背景颜色样式调整

src/components/CommandCard.vue

@@ -92,26 +92,6 @@ export default {
 </script>
 
 <style scoped>
-.q-card.command {
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.3) !important;
-  backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-  -webkit-backdrop-filter: blur(
-    calc(var(--glass-effect-strength) * 1px)
-  ) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
-}
-
-.body--dark .q-card.command {
-  background: rgba(57, 57, 57, 0.09) !important;
-  border: 1px solid rgb(59 58 58 / 5%);
-  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
-    0 3px 1px -2px rgb(69 67 67 / 12%);
-}
-
 .card-wrapper {
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, width;

src/components/card/CommandCardContent.vue

@@ -61,7 +61,6 @@ export default {
 </script>
 
 <style scoped>
-/* 保留卡片基础样式 */
 .q-card.command {
   cursor: pointer;
   user-select: none;
@@ -74,4 +73,11 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
 }
+
+.body--dark .q-card.command {
+  background: rgba(57, 57, 57, 0.09) !important;
+  border: 1px solid rgb(59 58 58 / 5%);
+  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
+    0 3px 1px -2px rgb(69 67 67 / 12%);
+}
 </style>

src/components/composer/CommandComposer.vue

@@ -76,11 +76,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: #f4f4f4;
+  background-color: var(--utools-bg-color);
-}
-
-.body--dark .command-composer {
-  background-color: #303132;
 }
 
 .composer-body {

src/components/composer/ComposerCard.vue

@@ -315,14 +315,6 @@ export default defineComponent({
   position: relative;
 }
 
-.composer-card .q-card {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.body--dark .composer-card .q-card {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
 /* 控制流程组件样式 */
 .control-component {
   flex: 1;
@@ -340,6 +332,7 @@ export default defineComponent({
 
 .command-item {
   transition: all 0.3s ease;
+  background-color: var(--transparent-bg-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: inherit;
@@ -353,14 +346,6 @@ export default defineComponent({
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.body--dark .composer-card.drag-handle:hover::before {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.body--dark .composer-card.drag-handle:active::before {
-  background: rgba(255, 255, 255, 0.15);
-}
-
 /* 收起状态样式 */
 .composer-card.collapsed {
   transform-origin: top;

src/components/composer/ComposerList.vue

@@ -294,7 +294,7 @@ export default defineComponent({
   margin: 4px 8px;
   padding: 0 8px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: rgba(0, 0, 0, 0.02);
+  background: var(--transparent-bg-color);
   cursor: grab;
   font-size: 12px;
   min-height: 40px;
@@ -315,8 +315,7 @@ export default defineComponent({
 }
 
 .command-item.q-item-type:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  transform: translateX(3px);
-  transform: translateX(4px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
@@ -325,16 +324,6 @@ export default defineComponent({
   transform: scale(0.95);
 }
 
-/* 暗色模式适配 */
-.body--dark .command-item.q-item-type {
-  border-color: rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.body--dark .command-item.q-item-type:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
 .body--dark .section-header {
   border-bottom-color: rgba(255, 255, 255, 0.05);
 }

src/components/composer/flow/DropArea.vue

@@ -64,14 +64,7 @@ export default defineComponent({
 
 .drop-area:hover,
 .drop-area-dragging {
-  border-color: #bdbdbd;
+  background-color: var(--utools-bg-color);
-  background-color: #f9f9f9;
-}
-
-.body--dark .drop-area:hover,
-.body--dark .drop-area-dragging {
-  border: 2px dashed #676666;
-  background-color: #303132;
 }
 
 .drop-area-dragging {

src/components/popup/EditorHistory.vue

@@ -339,6 +339,7 @@ export default {
   height: 100vh;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
   border-radius: 10px;
+  background-color: var(--utools-bg-color);
 }
 
 .history-layout {
@@ -361,7 +362,6 @@ export default {
 .header-section {
   padding: 16px 16px 8px;
   position: relative;
-  background: #f4f4f4;
 }
 
 .preview-container {
@@ -371,7 +371,6 @@ export default {
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;
-  background: #f4f4f4;
   transition: all 0.3s ease;
   position: relative;
 }
@@ -386,7 +385,6 @@ export default {
 .history-list {
   flex: 1;
   padding: 0;
-  background: #f4f4f4;
   overflow-y: auto;
   overflow-x: hidden;
   height: calc(100vh - 64px); /* Subtract header height */
@@ -499,15 +497,6 @@ export default {
   opacity: 0.3;
 }
 
-/* 暗色模式适配 */
-.body--dark .history-card,
-.body--dark .history-list-container,
-.body--dark .header-section,
-.body--dark .history-list,
-.body--dark .preview-container {
-  background: #303133;
-}
-
 .history-btn {
   color: #666;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

src/components/quickcommandUI/QuickCommand.vue

@@ -371,10 +371,6 @@ export default {
 
 <style>
 .quickcommand-ui.q-card {
-  background-color: var(--utools-bright-bg);
+  background-color: var(--utools-bg-color);
-}
-
-.body--dark .quickcommand-ui.q-card {
-  background-color: var(--utools-dark-bg);
 }
 </style>

src/css/app.css

@@ -1,20 +1,25 @@
 /* app global css */
 :root {
-  --utools-bright-bg: #f4f4f4;
+  --utools-bg-color: #f4f4f4;
-  --utools-bright-font-color: #333;
+  --utools-font-color: #333;
-  --utools-dark-bg: #303133;
+  --transparent-bg-color: rgba(0, 0, 0, 0.02);
-  --utools-dark-font-color: #fff;
   --q-dark: #464646;
-  --q-dark-page: var(--utools-dark-bg);
+  --q-dark-page: #303133;
+}
+
+:root:has(.body--dark) {
+  --utools-bg-color: #303133;
+  --utools-font-color: #fff;
+  --transparent-bg-color: rgba(255, 255, 255, 0.05);
 }
 
 .q-card--dark {
-  background: var(--utools-dark-bg);
+  background: var(--q-dark-page);
 }
 
 body {
-  background: var(--utools-bright-bg);
+  background: var(--utools-bg-color);
-  color: var(--utools-bright-font-color);
+  color: var(--utools-font-color);
 }
 
 /* Monaco Editor 调整行号栏样式 */
@@ -32,7 +37,7 @@ body {
 /* Monaco Editor 当前行高亮样式 */
 .monaco-editor .current-line {
   border: none !important;
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: transparent !important;
 }
 
 .monaco-editor .line-numbers {
@@ -47,10 +52,6 @@ body {
   color: var(--q-primary) !important;
 }
 
-.body--dark .monaco-editor .current-line {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
 .monaco-editor .margin-view-overlays .current-line {
   background-color: transparent !important;
 }
@@ -188,14 +189,14 @@ body.body--dark.glass-effect-menu .q-card.command {
 }
 
 /* 标签栏毛玻璃效果 */
-body.glass-effect-menu .q-tabs {
+body.glass-effect-menu .tag-bar .q-tabs {
   background: rgba(255, 255, 255, calc(0.15 + var(--glass-effect-strength) * 0.01)) !important;
   backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
   -webkit-backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-body.body--dark.glass-effect-menu .q-tabs {
+body.body--dark.glass-effect-menu .tag-bar .q-tabs {
   background: rgba(0, 0, 0, calc(0.2 + var(--glass-effect-strength) * 0.02)) !important;
   border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
@@ -305,3 +306,44 @@ body.body--dark.glass-effect-menu .q-menu {
   justify-content: flex-end;
   font-size: 12px;
 }
+
+/* 左右抖动 */
+@keyframes leftRight {
+  0% {
+    transform: translateX(-2px);
+    opacity: 0.7;
+  }
+
+  50% {
+    transform: translateX(2px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-2px);
+    opacity: 0.7;
+  }
+}
+
+/* 上下抖动 */
+@keyframes upDown {
+  0% {
+    transform: translateY(-1px);
+    opacity: 1;
+  }
+
+  50% {
+    transform: translateY(1px);
+    opacity: 0.6;
+  }
+
+  75% {
+    transform: translateY(0.5px);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: translateY(-1px);
+    opacity: 1;
+  }
+}

src/css/composer.css

@@ -89,12 +89,6 @@
   margin: 4px 0px;
 }
 
-/* 暗黑模式下的标签栏背景颜色 */
-.body--dark .command-composer .q-tab,
-.body--dark .command-composer .q-tab-panel {
-  background-color: #303133;
-}
-
 .body--dark .command-composer .q-tab--inactive {
   opacity: 2;
 }