From 174b2b9fa365f6e0fbe134e4f16380a272d38eb8 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 19 Apr 2025 13:20:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20WorkflowSidebar=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20VCard=20=E6=9B=BF=E4=BB=A3=20div=20=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E9=A2=9C=E8=89=B2=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/WorkflowSidebar.vue | 38 ++++++++++------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/layouts/components/WorkflowSidebar.vue b/src/layouts/components/WorkflowSidebar.vue
index 06ba1a35..fe51eb0b 100644
--- a/src/layouts/components/WorkflowSidebar.vue
+++ b/src/layouts/components/WorkflowSidebar.vue
@@ -136,7 +136,7 @@ onMounted(() => {
           @dragstart="!display.smAndDown.value && onDragStart($event, action)"
           @click="display.smAndDown.value && handleComponentClick(action)"
         >
-          <div class="component-card">
+          <VCard class="component-card">
             <VAvatar size="36" class="component-avatar">
               <VIcon :icon="getActionIcon(action.type)" size="18" />
             </VAvatar>
@@ -144,7 +144,7 @@ onMounted(() => {
               <div class="component-name">{{ action.name }}</div>
               <div class="component-desc">{{ display.smAndDown.value ? '点击添加' : '拖动到画布' }}</div>
             </div>
-          </div>
+          </VCard>
         </div>
       </div>
 
@@ -171,7 +171,7 @@ onMounted(() => {
   position: absolute;
   z-index: 100;
   overflow: hidden;
-  background-color: #f5f5f7;
+  background-color: rgb(var(--v-theme-background));
   box-shadow: 0 0 15px rgba(0, 0, 0, 8%);
   inline-size: 280px;
   inset-block: 0;
@@ -201,8 +201,8 @@ onMounted(() => {
 .sidebar-header {
   flex-shrink: 0;
   padding: 16px;
-  background-color: #fff;
-  border-block-end: 1px solid rgba(0, 0, 0, 6%);
+  background-color: rgb(var(--v-theme-background));
+  border-block-end: 1px solid rgba(var(--v-theme-on-background), 0.06);
 
   .header-content {
     position: relative;
@@ -211,20 +211,20 @@ onMounted(() => {
   }
 
   .workflow-logo {
-    background-color: #8c58f5;
+    background-color: rgb(var(--v-theme-primary));
     color: white;
     margin-inline-end: 10px;
   }
 
   .header-title {
-    color: #1a1a1a;
+    color: rgb(var(--v-theme-on-background));
     font-size: 18px;
     font-weight: 600;
   }
 
   .collapse-btn {
     position: absolute;
-    color: #8c58f5;
+    color: rgb(var(--v-theme-primary));
     inset-block-start: 0;
     inset-inline-end: 0;
   }
@@ -245,7 +245,7 @@ onMounted(() => {
 
   &::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: rgba(140, 88, 245, 30%);
+    background-color: rgba(var(--v-theme-primary), 0.3);
   }
 }
 
@@ -263,18 +263,18 @@ onMounted(() => {
   align-items: center;
   padding: 10px;
   border-radius: 12px;
-  background-color: #e4e4e7;
+  background-color: rgb(var(--v-theme-surface-variant));
   transition: all 0.2s ease;
 
   &:hover {
-    background-color: #d4d4d8;
+    background-color: rgb(var(--v-theme-surface-variant));
     transform: translateY(-2px);
   }
 }
 
 .component-avatar {
   flex-shrink: 0;
-  background-color: #8c58f5;
+  background-color: rgb(var(--v-theme-primary));
   color: white;
   margin-inline-end: 12px;
 
@@ -291,7 +291,7 @@ onMounted(() => {
 
 .component-name {
   overflow: hidden;
-  color: #1a1a1a;
+  color: rgb(var(--v-theme-on-background));
   font-size: 14px;
   font-weight: 500;
   text-overflow: ellipsis;
@@ -309,21 +309,17 @@ onMounted(() => {
 .sidebar-footer {
   flex-shrink: 0;
   padding: 12px;
-  background-color: #fff;
+  background-color: rgb(var(--v-theme-background));
   border-block-start: 1px solid rgba(0, 0, 0, 6%);
 
   .drag-btn {
-    background-color: #8c58f5;
+    background-color: rgb(var(--v-theme-primary));
     block-size: 44px;
     color: white;
     font-weight: 500;
     letter-spacing: normal;
     text-transform: none;
 
-    &:hover {
-      background-color: color.adjust(#8c58f5, $lightness: -5%);
-    }
-
     .btn-content {
       display: flex;
       align-items: center;
@@ -344,8 +340,8 @@ onMounted(() => {
 }
 
 .workflow-sidebar-fab {
-  background-color: #8c58f5;
-  box-shadow: 0 4px 10px rgba(140, 88, 245, 40%);
+  background-color: rgb(var(--v-theme-primary));
+  box-shadow: 0 4px 10px rgba(var(--v-theme-primary), 40%);
   color: white;
 
   &:hover {