feat: 切换主题配色

.env

@@ -6,7 +6,7 @@ VITE_TITLE = 绝弹管理后台
 # 网站副标题
 VITE_SUBTITLE = 快速开发web应用的模板工具
 # 接口前缀 说明：参见 axios 的 baseURL
-VITE_API = http://127.0.0.1:3030/
+VITE_API = http://demo.dev.juetan.cn/
 
 # =====================================================================================
 # 开发设置

scripts/vite/color.ts

@@ -0,0 +1,10 @@
+const unoLevels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const arcoLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+export const arcoToUnoColor = (arcoColorName: string) => {
+  const colors = {};
+  for (let i = 0; i < 10; i++) {
+    colors[unoLevels[i]] = `rgb(var(--${arcoColorName}-${arcoLevels[i]}))`;
+  }
+  return colors;
+};

src/pages/_layout/index.vue

@@ -12,7 +12,7 @@
               v-if="isDev"
               class="absolute -right-14 -top-1 text-xs font-normal text-brand-500 bg-brand-50 px-1.5 rounded-full"
             >
-              开发版
+              本地版
             </span>
           </h1>
         </router-link>

src/pages/_login/index.vue

@@ -15,7 +15,7 @@
       <div
         class="login-box w-[960px] h-[560px] relative mx-4 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
       >
-        <div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
+        <div class="relative hidden md:block w-full h-full overflow-hidden bg-[rgb(var(--primary-6))] px-4">
           <img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
         </div>
         <div class="relative p-20 px-8 md:px-14 bg-white shadow-sm">

src/styles/css-arco.less

@@ -2,7 +2,7 @@
 
 // @blue-6: #09f;
 
-// @arcoblue-6:#2288f1;
+@arcoblue-6:#3b9;
 
 body {
   .arco-layout-sider {
@@ -23,13 +23,18 @@ body {
   .arco-menu-vertical .arco-menu-inline-header {
     margin-bottom: 1px;
   }
+
   .arco-menu {
     .arco-menu-item {
       &:hover {
         background-color: var(--color-neutral-2);
       }
       &.arco-menu-selected {
-        background-color: @arcoblue-1;
+        color: #fff;
+        background-color: @arcoblue-6;
+        .arco-menu-icon {
+          color: inherit;
+        }
       }
     }
     .arco-menu-inner {

vite.config.ts

@@ -9,6 +9,7 @@ import AutoComponent from "unplugin-vue-components/vite";
 import { defineConfig, loadEnv } from "vite";
 import Page from "vite-plugin-pages";
 import plugin from "./scripts/vite/plugin";
+import { arcoToUnoColor } from "./scripts/vite/color";
 
 /**
  * vite 配置
@@ -91,19 +92,8 @@ export default defineConfig(({ mode }) => {
       Unocss({
         theme: {
           colors: {
-            brand: {
-              50: 'rgb(var(--primary-1))',
-              100: 'rgb(var(--primary-2))',
-              200: 'rgb(var(--primary-3))',
-              300: 'rgb(var(--primary-4))',
-              400: 'rgb(var(--primary-5))',
-              500: 'rgb(var(--primary-6))',
-              600: 'rgb(var(--primary-7))',
-              700: 'rgb(var(--primary-8))',
-              800: 'rgb(var(--primary-9))',
-              900: 'rgb(var(--primary-10))',
-            }
-          }
+            brand: arcoToUnoColor("primary"),
+          },
         },
         include: ["src/**/*.{vue,ts,tsx,css,scss,sass,less,styl}"],
         presets: [presetUno(), presetIcons({ prefix: "" })],