Переглянути джерело

style(theme): 优化主题颜色变量并清理无用代码

调整主题颜色变量的梯度定义,增加详细注释说明
移除未使用的按钮active状态样式和SDK页面中的console.log代码
piks 6 днів тому
батько
коміт
cca92b8873
3 змінених файлів з 37 додано та 26 видалено
  1. 8 0
      src/styles/element.scss
  2. 28 5
      src/styles/theme.scss
  3. 1 21
      src/views/sdk/index.vue

+ 8 - 0
src/styles/element.scss

@@ -10,6 +10,10 @@
     // box-shadow: 0 6px 20px var(--btn-primary-shadow);
   }
 
+  // &:active {
+  //   background: var(--el-color-primary-dark);
+  // }
+
   &.is-disabled {
     opacity: 0.6;
     transform: none;
@@ -27,6 +31,10 @@
   //   background: var(--el-color-primary-light-3);
   // }
 
+  // &:active {
+  //   background: var(--el-color-primary-dark-2);
+  // }
+
   &.is-disabled {
     color: rgba(255, 255, 255, 0.5);
     transform: none;

+ 28 - 5
src/styles/theme.scss

@@ -1,10 +1,22 @@
 // ========== 亮色模式(默认) ==========
 :root {
   // 覆盖 Element Plus 主色
+  // ---- 主色 ----
   --el-color-primary: #8077ff;
-  --el-color-primary-light-3: #79bbff;
-  --el-color-primary-light-5: #a0cfff;
-  --el-color-primary-dark-2: #337ecc;
+
+  // ---- 亮色 light 梯度(与白色混合) ----
+  --el-color-primary-light-1: #8d85ff; // 10%
+  --el-color-primary-light-2: #9992ff; // 20%
+  --el-color-primary-light-3: #a6a0ff; // 30% ← hover 边框
+  --el-color-primary-light-4: #b3adff; // 40%
+  --el-color-primary-light-5: #c0bbff; // 50% ← 禁用背景
+  --el-color-primary-light-6: #ccc9ff; // 60%
+  --el-color-primary-light-7: #d9d6ff; // 70% ← input hover 边框
+  --el-color-primary-light-8: #e6e4ff; // 80% ← hover 背景
+  --el-color-primary-light-9: #f2f1ff; // 90% ← 极浅背景
+
+  // ---- 暗色(按下/激活:与黑色混合 20%) ----
+  --el-color-primary-dark-2: #665fcc;
 
   // 自定义渐变按钮变量
   --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
@@ -24,9 +36,20 @@
 // ========== 暗色模式 ==========
 html.dark {
   // 覆盖 Element Plus 暗色下的主色(可选调整)
+  // ---- 主色保持不变 ----
   --el-color-primary: #8077ff;
-  --el-color-primary-light-3: #3375b9;
-  --el-color-primary-light-5: #2a598a;
+  // ---- 暗色 light 梯度(与 #141414 混合) ----
+  --el-color-primary-light-1: #756de8; // 10%
+  --el-color-primary-light-2: #6a63d0; // 20%
+  --el-color-primary-light-3: #6059b9; // 30% ← 暗色边框
+  --el-color-primary-light-4: #554fa1; // 40%
+  --el-color-primary-light-5: #4a468a; // 50% ← 暗色禁用
+  --el-color-primary-light-6: #3f3c72; // 60%
+  --el-color-primary-light-7: #34325b; // 70% ← 暗色 hover 背景
+  --el-color-primary-light-8: #2a2843; // 80% ← 暗色浅背景
+  --el-color-primary-light-9: #1f1e2c; // 90% ← 暗色极浅背景
+  // ---- 暗色下 hover 变亮(与白色混合 20%) ----
+  --el-color-primary-dark-2: #9992ff;
   --el-color-primary-dark: rgba(255, 255, 255, 0.08);
 
   // 暗色下的渐变按钮

+ 1 - 21
src/views/sdk/index.vue

@@ -3,8 +3,7 @@
     <Breadcrumb />
     <TabFilter v-model="activeTab" :options="options" @change="handleTabChange" />
     <TableCard :data="tableData" :columns="columns" :current-page="pageNo" :page-size="pageSize" :total="total"
-      @update:current-page="pageNo = $event" @update:page-size="pageSize = $event" @change="handlePageChange"
-      @selection-change="handleSelectionChange">
+      @change="handlePageChange" @selection-change="handleSelectionChange">
       <template #toolbar-left>
         <el-button type="primary" size="large" class="is-solid" @click="handleAdd">新增</el-button>
         <el-button size="large" @click="handleBatchDelete">批量删除</el-button>
@@ -98,25 +97,6 @@ function handleSelectionChange(selection: any[]) {
   selectedRows.value = selection
 }
 
-function handleSearch() {
-  console.log('搜索:', searchKeyword.value)
-}
-
-function handleAdd() {
-  console.log('新增')
-}
-
-function handleBatchDelete() {
-  console.log('批量删除:', selectedRows.value)
-}
-
-function handleEdit(row: any) {
-  console.log('编辑:', row)
-}
-
-function handleDelete(row: any) {
-  console.log('删除:', row)
-}
 </script>
 
 <style lang="scss" scoped></style>