From a0f3b538f33a5510df8a745db2bba1e8a992c33f Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 29 Jan 2026 09:59:54 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimze color of scripts action
 button

---
 src/renderer/assets/svg/BaseSvg.vue | 21 ++++++++++++++++
 src/renderer/pages/ScriptPage.vue   | 38 +++++++----------------------
 2 files changed, 30 insertions(+), 29 deletions(-)
 create mode 100644 src/renderer/assets/svg/BaseSvg.vue

diff --git a/src/renderer/assets/svg/BaseSvg.vue b/src/renderer/assets/svg/BaseSvg.vue
new file mode 100644
index 00000000..47cc1058
--- /dev/null
+++ b/src/renderer/assets/svg/BaseSvg.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg :width="size" :height="size" :viewBox="viewBox" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <symbol id="icon-GitHub" viewBox="0 0 24 24">
+        <path
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        />
+      </symbol>
+    </defs>
+
+    <use :href="`#icon-${name}`" />
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  name: { type: String, required: true },
+  size: { type: [Number, String], default: 18 },
+  viewBox: { type: String, default: '0 0 24 24' },
+})
+</script>
diff --git a/src/renderer/pages/ScriptPage.vue b/src/renderer/pages/ScriptPage.vue
index 2e8edf07..a899e3e4 100644
--- a/src/renderer/pages/ScriptPage.vue
+++ b/src/renderer/pages/ScriptPage.vue
@@ -90,7 +90,7 @@
                     <Trash2 :size="14" />
                   </button>
                   <button
-                    class="action-btn bg-accent text-white!"
+                    class="action-btn bg-accent/50 text-white! hover:bg-accent!"
                     :title="t('pages.scripts.marketplace.shareScript')"
                     @click.stop="openShareDialog(item)"
                   >
@@ -98,7 +98,7 @@
                   </button>
                   <button
                     v-if="item.category === 'manualTrigger'"
-                    class="action-btn bg-accent/50 text-white!"
+                    class="action-btn bg-accent/50 text-white! hover:bg-accent!"
                     :title="t('pages.scripts.runScript')"
                     @click.stop="runScript(item.filePath)"
                   >
@@ -109,8 +109,8 @@
                     v-if="item.category !== 'manualTrigger' && item.category !== 'uploader.advancedplist'"
                     class="action-btn border-none"
                     :class="{
-                      'bg-success/40': !item.enabled,
-                      'bg-error/40': item.enabled,
+                      'bg-success/50 hover:bg-success!': !item.enabled,
+                      'bg-error/50 hover:bg-error!': item.enabled,
                     }"
                     :title="item.enabled ? t('pages.scripts.disableScript') : t('pages.scripts.enableScript')"
                     @click.stop="toggleScript(item.filePath)"
@@ -257,12 +257,7 @@
                 @click="handleGitHubLogin"
               >
                 <template #icon>
-                  <svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <title>GitHub</title>
-                    <path
-                      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-                    />
-                  </svg>
+                  <BaseSvg name="GitHub" :size="18" color="black" />
                 </template>
               </CustomButton>
             </template>
@@ -395,12 +390,7 @@
     >
       <div class="flex flex-col gap-4 p-6">
         <div v-if="!githubAuth.isAuthenticated" class="flex flex-col items-center gap-4 py-8">
-          <svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>GitHub</title>
-            <path
-              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-            />
-          </svg>
+          <BaseSvg name="GitHub" :size="18" color="black" />
           <p class="text-center text-sm text-secondary">{{ t('pages.scripts.marketplace.loginRequired') }}</p>
           <CustomButton
             type="primary"
@@ -409,12 +399,7 @@
             @click="handleGitHubLogin"
           >
             <template #icon>
-              <svg width="18" height="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <title>GitHub</title>
-                <path
-                  d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-                />
-              </svg>
+              <BaseSvg name="GitHub" :size="18" color="black" />
             </template>
           </CustomButton>
         </div>
@@ -469,12 +454,7 @@
       height="auto"
     >
       <div class="flex flex-col items-center gap-6 p-6">
-        <svg width="48" height="48" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>GitHub</title>
-          <path
-            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-          />
-        </svg>
+        <BaseSvg name="GitHub" :size="18" color="black" />
         <p class="text-center text-secondary">
           {{ t('pages.scripts.marketplace.deviceFlowInstructions') }}
         </p>
@@ -549,6 +529,7 @@ import {
 import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import BaseSvg from '@/assets/svg/BaseSvg.vue'
 import CustomButton from '@/components/common/CustomButton.vue'
 import CustomInput from '@/components/common/CustomInput.vue'
 import CustomModal from '@/components/common/CustomModal.vue'
@@ -852,7 +833,6 @@ async function fetchMarketplaceScripts() {
   try {
     const scripts = await window.electron.triggerRPC<IScriptMeta[]>(IRPCActionType.SCRIPT_MARKETPLACE_FETCH_LIST)
     marketplaceScripts.value = scripts || []
-    console.log('Fetched marketplace scripts:', marketplaceScripts.value)
   } catch (error) {
     console.error('Failed to fetch marketplace scripts:', error)
     marketplaceError.value = true