feat:完善开发样式组件颜色部分

src/components/devStyle/components/constStyle.vue

@@ -3,7 +3,9 @@ import { ElSpace, ElButton } from 'element-plus';
 import "@/styles/main.css"
 import { copyToClipboardThenTip } from '@/utils/systemUtils'
 
-const colors = [
+// 黑色到白色主色一行
+const rowBlackToWhite = [
+    { title: "黑色", name: "--text-primary-color" },
     { title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
     { title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
     { title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
@@ -12,7 +14,25 @@ const colors = [
     { title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
     { title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
     { title: "白色主色", name: "--bg-white-100" },
+]
+// 主色到主色高亮背景一行（主色高亮背景为浅色，需黑色文字）
+const rowPrimaryToHighlight = [
     { title: "主色", name: "--color-primary-100" },
+    { title: "主色50%", name: "--color-primary-50", light: true },
+    { title: "主色35%", name: "--color-primary-35" },
+    { title: "主色10%", name: "--color-primary-10", light: true },
+    { title: "主色高亮背景", name: "--color-primary-2", light: true },
+]
+// 红色到绿色10%一行（*10% 为浅色背景，需黑色文字）
+const rowRedToGreen10 = [
+    { title: "红色", name: "--color-red-100" },
+    { title: "红色10%", name: "--color-red-10", light: true },
+    { title: "橙色", name: "--color-orange-100" },
+    { title: "橙色10%", name: "--color-orange-10", light: true },
+    { title: "黄色", name: "--color-yellow-100" },
+    { title: "黄色10%", name: "--color-yellow-10", light: true },
+    { title: "绿色", name: "--color-green-100" },
+    { title: "绿色10%", name: "--color-green-10", light: true },
 ]
 function copyColorVar(item) {
     const color = `var(${item.name})`
@@ -23,13 +43,36 @@ function copyColorVar(item) {
 <template>
     <el-space direction="vertical" alignment="flex-start">
         <div class="text-title-2">颜色</div>
-        <el-space>
-            <el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
-                v-on:click="copyColorVar(item)">
-                {{ item.title }}
-            </el-button>
+        <el-space direction="vertical" alignment="flex-start">
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowBlackToWhite" :key="'bw-' + index" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
+                    {{ item.title }}
+                </el-button>
+            </el-space>
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowPrimaryToHighlight" :key="'ph-' + index"
+                    :class="{ 'color-btn-text-black': item.light }"
+                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
+                    {{ item.title }}
+                </el-button>
+            </el-space>
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowRedToGreen10" :key="'rg-' + index"
+                    :class="{ 'color-btn-text-black': item.light }"
+                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
+                    {{ item.title }}
+                </el-button>
+            </el-space>
         </el-space>
     </el-space>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+/* 浅色背景按钮：文字黑色 */
+:deep(.color-btn-text-black) {
+    color: var(--el-color-black) !important;
+}
+</style>
\ No newline at end of file

src/styles/main.css

@@ -39,10 +39,22 @@
 
   /* 主色 设计定义*/
   --color-primary-100: #055FC2;
-  --color-primary-50: #82AFE0;
-  --color-primary-35: #AED6FF;
+  --color-primary-50: #89C1FF;
+  --color-primary-35: #B9DCFF;
   --color-primary-10: #E7F3FF;
   --color-primary-2: #F6FAFF;
+  /* 红色 设计定义 */
+  --color-red-100:#CE4F51;
+  --color-red-10:rgba(206, 79, 81, 0.1);
+  /* 橙色 设计定义 */
+  --color-orange-100:#FF954D;
+  --color-orange-10:rgba(255, 149, 77, 0.1);
+  /* 黄色 设计定义 */
+  --color-yellow-100:#E8BD0B;
+  --color-yellow-10:rgba(232, 189, 11, 0.1);
+  /* 绿色 设计定义 */
+  --color-green-100:#218139;
+  --color-green-10:rgba(33, 129, 57, 0.1);
 }
 
 .hover-dialog {