feat(ui): refine feature flags, switch hover styles, and component interactions

Author: Ayideyia

frontend/src/assets/styles/custom.less

@@ -1,16 +1,16 @@
-body[debug-outline='true'] {
+body[feature-outline='true'] {
   * {
     outline: 1px solid var(--color);
   }
 }
 
-body[debug-no-animation='true'] {
+body[feature-no-animation='true'] {
   * {
     transition: none !important;
   }
 }
 
-body[debug-no-rounded='true'] {
+body[feature-no-rounded='true'] {
   .rounded-2,
   .rounded-4,
   .rounded-6,
@@ -21,9 +21,15 @@ body[debug-no-rounded='true'] {
   .rounded-full {
     border-radius: 0;
   }
+  ::-webkit-scrollbar-track {
+    border-radius: 0;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0;
+  }
 }
 
-body[debug-border='true'] {
+body[feature-border='true'] {
   box-shadow: inset 0 0 1px var(--color);
 }
 

frontend/src/assets/styles/theme.less

@@ -67,8 +67,10 @@
 
   // Switch
   --switch-on-bg: ~'var(--switch-on-bg-@{theme})';
+  --switch-on-hover-bg: ~'var(--switch-on-hover-bg-@{theme})';
   --switch-on-dot-bg: ~'var(--switch-on-dot-bg-@{theme})';
   --switch-off-bg: ~'var(--switch-off-bg-@{theme})';
+  --switch-off-hover-bg: ~'var(--switch-off-hover-bg-@{theme})';
   --switch-off-dot-bg: ~'var(--switch-off-dot-bg-@{theme})';
 
   // Input

frontend/src/assets/styles/utilities/others.less

@@ -122,6 +122,10 @@
   cursor: move;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }

frontend/src/assets/styles/variables.less

@@ -111,13 +111,17 @@
 
   // Switch
   --switch-on-bg-light: var(--primary-color);
+  --switch-on-hover-bg-light: var(--secondary-color);
   --switch-on-dot-bg-light: #fff;
   --switch-on-bg-dark: var(--primary-color);
+  --switch-on-hover-bg-dark: var(--secondary-color);
   --switch-on-dot-bg-dark: #fff;
 
   --switch-off-bg-light: rgba(0, 0, 0, 0.06);
+  --switch-off-hover-bg-light: rgba(0, 0, 0, 0.1);
   --switch-off-dot-bg-light: #fff;
-  --switch-off-bg-dark: rgba(255, 255, 255, 0.06);
+  --switch-off-bg-dark: rgba(255, 255, 255, 0.1);
+  --switch-off-hover-bg-dark: rgba(255, 255, 255, 0.06);
   --switch-off-dot-bg-dark: #fff;
 
   // Input

frontend/src/components/ColorPicker/index.vue

@@ -20,7 +20,7 @@ const pick = () => {
 <template>
   <div
     :class="{ 'pl-8': $slots.prefix, 'pr-8': $slots.suffix }"
-    class="gui-color-picker rounded-full inline-flex items-center overflow-hidden"
+    class="gui-color-picker rounded-full inline-flex items-center overflow-hidden cursor-pointer duration-200"
   >
     <div v-if="$slots.prefix" class="flex items-center line-clamp-1 break-all">
       <slot name="prefix" v-bind="{ pick }"></slot>
@@ -43,6 +43,10 @@ const pick = () => {
   color: var(--color);
   border: 1px solid var(--primary-color);
   background: var(--color-picker-bg);
+
+  &:hover {
+    color: var(--primary-color);
+  }
 }
 
 input::-webkit-color-swatch-wrapper {
@@ -52,7 +56,13 @@ input::-webkit-color-swatch-wrapper {
 }
 
 input::-webkit-color-swatch {
-  border-radius: 6px;
+  border-radius: 8px;
   border: none;
 }
+
+body[feature-no-rounded='true'] {
+  input::-webkit-color-swatch {
+    border-radius: 0;
+  }
+}
 </style>

frontend/src/components/Switch/index.vue

@@ -39,10 +39,10 @@ const toggle = () => {
       size,
       border,
       model ? 'on' : 'off',
-      disabled ? 'disabled' : '',
       border === 'square' ? 'rounded-4' : 'rounded-full',
+      { 'cursor-not-allowed': disabled },
     ]"
-    class="gui-switch relative cursor-pointer h-24 inline-flex items-center text-12"
+    class="gui-switch relative cursor-pointer h-24 inline-flex items-center text-12 duration-200"
   >
     <div
       :class="[border === 'square' ? 'rounded-4' : 'rounded-full']"
@@ -59,9 +59,9 @@ const toggle = () => {
 <style lang="less" scoped>
 .gui-switch {
   min-width: 50px;
-  .slot {
-    transition: margin 0.2s;
-  }
+  // .slot {
+  //   transition: margin 0.2s;
+  // }
 }
 
 .small {
@@ -81,6 +81,9 @@ const toggle = () => {
 .on {
   color: #fff;
   background-color: var(--switch-on-bg);
+  &:hover {
+    background-color: var(--switch-on-hover-bg);
+  }
   .dot {
     left: calc(100% - 22px);
     background-color: var(--switch-on-dot-bg);
@@ -115,6 +118,9 @@ const toggle = () => {
 .off {
   color: var(--card-color);
   background-color: var(--switch-off-bg);
+  &:hover {
+    background-color: var(--switch-off-hover-bg);
+  }
   .dot {
     left: 4px;
     background-color: var(--switch-off-dot-bg);
@@ -142,8 +148,4 @@ const toggle = () => {
     }
   }
 }
-
-.disabled {
-  cursor: not-allowed;
-}
 </style>

frontend/src/lang/locale/en.ts

@@ -619,7 +619,7 @@ export default {
     addGroupToMenu: 'Add proxy group to tray menu',
     multipleInstance: 'Allow multiple app instances',
     rollingRelease: 'Enable Rolling Release',
-    debugOutline: 'Show interface outline',
+    debugOutline: 'Show component outlines',
     debugNoAnimation: 'Disable animations',
     debugNoRounded: 'Disable rounded corners',
     debugBorder: 'Show window border',

frontend/src/lang/locale/zh.ts

@@ -570,8 +570,8 @@ export default {
       green: '绿色',
       purple: '紫色',
       custom: '自定义',
-      primary: '主颜色',
-      secondary: '次颜色',
+      primary: '主色',
+      secondary: '辅助色',
     },
     fontFamily: '字体',
     resetFont: '重置字体',
@@ -618,7 +618,7 @@ export default {
     addGroupToMenu: '将代理组添加到托盘菜单',
     multipleInstance: '允许多APP实例运行',
     rollingRelease: '启用滚动发行',
-    debugOutline: '显示界面轮廓',
+    debugOutline: '组件轮廓',
     debugNoAnimation: '禁用动画',
     debugNoRounded: '禁用圆角',
     debugBorder: '显示窗口边框',

frontend/src/stores/appSettings.ts

@@ -188,10 +188,10 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     document.documentElement.style.setProperty('--primary-color', primary)
     document.documentElement.style.setProperty('--secondary-color', secondary)
     document.body.style.fontFamily = settings.fontFamily
-    document.body.setAttribute('debug-outline', String(settings.debugOutline))
-    document.body.setAttribute('debug-no-animation', String(settings.debugNoAnimation))
-    document.body.setAttribute('debug-no-rounded', String(settings.debugNoRounded))
-    document.body.setAttribute('debug-border', String(settings.debugBorder))
+    document.body.setAttribute('feature-outline', String(settings.debugOutline))
+    document.body.setAttribute('feature-no-animation', String(settings.debugNoAnimation))
+    document.body.setAttribute('feature-no-rounded', String(settings.debugNoRounded))
+    document.body.setAttribute('feature-border', String(settings.debugBorder))
   }
 
   watch(