feat: 色板初始化

components.d.ts

@@ -7,30 +7,35 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    MCard: typeof import('./src/components/MCard/index.vue')['default']
-    MConfigProvider: typeof import('./src/components/MConfigProvider/index.vue')['default']
-    MContent: typeof import('./src/components/MContent/index.vue')['default']
-    MContentTitle: typeof import('./src/components/MContentTitle/index.vue')['default']
-    MDialog: typeof import('./src/components/MDialog/index.vue')['default']
-    MDivider: typeof import('./src/components/MDivider/index.vue')['default']
-    MFooter: typeof import('./src/components/MFooter/index.vue')['default']
-    MIcon: typeof import('./src/components/MIcon/index.vue')['default']
-    MImage: typeof import('./src/components/MImage/index.vue')['default']
-    MNavBar: typeof import('./src/components/MNavBar/index.vue')['default']
-    MPicker: typeof import('./src/components/MPicker/index.vue')['default']
-    MSafeAreaTop: typeof import('./src/components/MSafeAreaTop/index.vue')['default']
-    MTabBar: typeof import('./src/components/MTabBar/index.vue')['default']
-    NutButton: typeof import('nutui-uniapp/components/button/button.vue')['default']
-    NutCheckbox: typeof import('nutui-uniapp/components/checkbox/checkbox.vue')['default']
-    NutConfigProvider: typeof import('nutui-uniapp/components/configprovider/configprovider.vue')['default']
+    MCard: (typeof import('./src/components/MCard/index.vue'))['default']
+    MConfigProvider: (typeof import('./src/components/MConfigProvider/index.vue'))['default']
+    MContent: (typeof import('./src/components/MContent/index.vue'))['default']
+    MContentTitle: (typeof import('./src/components/MContentTitle/index.vue'))['default']
+    MDialog: (typeof import('./src/components/MDialog/index.vue'))['default']
+    MDivider: (typeof import('./src/components/MDivider/index.vue'))['default']
+    MFooter: (typeof import('./src/components/MFooter/index.vue'))['default']
+    MIcon: (typeof import('./src/components/MIcon/index.vue'))['default']
+    MImage: (typeof import('./src/components/MImage/index.vue'))['default']
+    MNavBar: (typeof import('./src/components/MNavBar/index.vue'))['default']
+    MPicker: (typeof import('./src/components/MPicker/index.vue'))['default']
+    MSafeAreaTop: (typeof import('./src/components/MSafeAreaTop/index.vue'))['default']
+    MTabBar: (typeof import('./src/components/MTabBar/index.vue'))['default']
+    NutButton: (typeof import('nutui-uniapp/components/button/button.vue'))['default']
+    NutCheckbox: (typeof import('nutui-uniapp/components/checkbox/checkbox.vue'))['default']
+    NutConfigProvider: (typeof import('nutui-uniapp/components/configprovider/configprovider.vue'))['default']
     NutDialog: (typeof import('nutui-uniapp/components/dialog/dialog.vue'))['default']
-    NutDivider: typeof import('nutui-uniapp/components/divider/divider.vue')['default']
-    NutForm: typeof import('nutui-uniapp/components/form/form.vue')['default']
-    NutFormItem: typeof import('nutui-uniapp/components/formitem/formitem.vue')['default']
-    NutInput: typeof import('nutui-uniapp/components/input/input.vue')['default']
+    NutDivider: (typeof import('nutui-uniapp/components/divider/divider.vue'))['default']
+    NutForm: (typeof import('nutui-uniapp/components/form/form.vue'))['default']
+    NutFormItem: (typeof import('nutui-uniapp/components/formitem/formitem.vue'))['default']
+    NutInput: (typeof import('nutui-uniapp/components/input/input.vue'))['default']
+    NutNavbar: (typeof import('nutui-uniapp/components/navbar/navbar.vue'))['default']
+    NutPicker: (typeof import('nutui-uniapp/components/picker/picker.vue'))['default']
+    NutPopup: (typeof import('nutui-uniapp/components/popup/popup.vue'))['default']
     NutSwiper: (typeof import('nutui-uniapp/components/swiper/swiper.vue'))['default']
     NutSwiperItem: (typeof import('nutui-uniapp/components/swiperitem/swiperitem.vue'))['default']
-    NutTabbar: typeof import('nutui-uniapp/components/tabbar/tabbar.vue')['default']
-    NutTabbarItem: typeof import('nutui-uniapp/components/tabbaritem/tabbaritem.vue')['default']
+    NutSwitch: (typeof import('nutui-uniapp/components/switch/switch.vue'))['default']
+    NutTabbar: (typeof import('nutui-uniapp/components/tabbar/tabbar.vue'))['default']
+    NutTabbarItem: (typeof import('nutui-uniapp/components/tabbaritem/tabbaritem.vue'))['default']
+    NutTag: (typeof import('nutui-uniapp/components/tag/tag.vue'))['default']
   }
 }

src/App.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+  import { useUserStore } from '@/stores/modules/userStore'
   import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
 
+  const userStore = useUserStore()
+
   onLaunch(() => {
     console.log('App Launch')
+    userStore.initThemeAction()
   })
   onShow(() => {
     console.log('App Show')
@@ -14,6 +18,7 @@
 
 <style lang="scss">
   @import 'nutui-uniapp/styles/index.scss';
+
   uni-page-body,
   page {
     @apply bg-bg-page text-14px h-full;

src/components/MConfigProvider/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2025-04-09 10:19:11
  * @LastEditors: wjc
- * @LastEditTime: 2026-01-22 09:42:46
+ * @LastEditTime: 2026-01-22 14:20:25
  * @Description: 
 -->
 <template>
@@ -10,8 +10,8 @@
     <!-- 微信小程序非自定义组件不支持 v-bind(2025-1-16)，兼容处理 -->
     <!-- <navigation-bar v-bind="originNavBarStyle" /> -->
     <navigation-bar
-      :front-color="originNavBarStyle.frontColor"
-      :background-color="originNavBarStyle.backgroundColor"
+      :front-color="originNavBarStyle.frontColor as any"
+      :background-color="originNavBarStyle.backgroundColor as any"
       :animation="originNavBarStyle.animation"
     />
   </page-meta>
@@ -20,6 +20,7 @@
     class="bg-bg-page h-full"
     id="__uni-starter-styles__"
     :class="[userStore.theme]"
+    :style="userStore.themeVars"
   >
     <slot></slot>
   </nut-config-provider>

src/models/userTypes.ts

@@ -12,6 +12,13 @@ export interface IUser {
   real_name: string
 }
 
+export interface ThemeColors {
+  colorDanger: string
+  colorPrimary: string
+  colorSuccess: string
+  colorWarning: string
+}
+
 export interface UserState {
   agreePrivacy: boolean
   /** 当前显示的 tabBar */
@@ -23,6 +30,8 @@ export interface UserState {
   lang: string
   tabBar: TabBarItem[]
   theme: string
+  themeColors: ThemeColors
+  themeVars: Record<string, string>
   token: string
   user: User
   userActions: string[]

src/pages/index/index.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wjc
+ * @Date: 2025-04-09 10:19:11
+ * @LastEditors: wjc
+ * @LastEditTime: 2026-01-22 11:04:52
+ * @Description: 首页
+-->
 <route lang="json">
 {
   "actions": ["login"],
@@ -36,10 +43,6 @@
   import Share from './components/share/index.vue'
   import Work from './components/work/index.vue'
 
-  export default {
-    onPageScroll() {},
-  }
-
   const userStore = useUserStore()
   const tabBarList = ref(userStore.tabBar)
   const curTabBar = computed(() => userStore.curTabBar)

src/static/styles/vars.scss

@@ -13,17 +13,14 @@ page {
   --nut-primary-color: #0f67f8;
   --nut-dark-background: var(--bg-color-1);
   --nut-divider-line-height: 1rpx;
-
   --text-color-1: #2d3051;
   --text-color-2: #616178;
   --text-color-place: #9fa5b7;
-
-  --bg-page: #f6f7fc;
-  --bg-color-1: #fff;
-  --bg-color-2: #f2f3f7;
-  --bg-card: #fff;
-
-  --border-color-1: #e5e5e5;
+  --page: #f6f7fc;
+  // --bg-color-1: #fff;
+  // --bg-color-2: #f2f3f7;
+  --card: #fff;
+  --border: #e5e5e5;
 }
 
 .dark {
@@ -35,20 +32,15 @@ page {
   --info: #26a2fa;
   --up: #f52f3e;
   --down: #0ed57d;
-
   --nut-dark-background: var(--bg-color-1);
   --nut-divider-line-height: 1rpx;
-
   --text-color-1: #fff;
   --text-color-2: #9fa5b7;
-
-  --bg-page: #121325;
-  --bg-color-1: #202132;
-  --bg-color-2: #353646;
-  --bg-card: #202132;
-
-  --border-color-1: #343544;
-
-  --text-color-1: rgba(255, 255, 255, 0.87);
+  // --text-color-1: rgba(255, 255, 255, 0.87);
   --text-color-place: #9fa5b7;
+  --page: #121325;
+  // --bg-color-1: #202132;
+  // --bg-color-2: #353646;
+  --card: #202132;
+  --border: #343544;
 }

src/stores/modules/userStore.ts

@@ -1,6 +1,7 @@
 import api from '@/api'
 import i18n, { LangTypes, t } from '@/locale'
 import { ILogin, LoginRes, User, UserState } from '@/models/userTypes'
+import { updateMainColorVariables } from '@/utils/css-var'
 import { request } from '@/utils/request'
 import { defineStore } from 'pinia'
 
@@ -8,10 +9,17 @@ export const useUserStore = defineStore('user', {
   state: (): UserState => {
     return {
       theme: 'light',
+      themeColors: {
+        colorPrimary: '#2c68ff',
+        colorSuccess: '#10b86f',
+        colorWarning: '#ffa800',
+        colorDanger: '#ff495e',
+      },
+      themeVars: {},
       lang: 'zh-Hans',
       agreePrivacy: false,
       isInstall: false,
-      token: '',
+      token: '123',
       curTabBar: 'home',
       tabBar: [
         {
@@ -55,6 +63,14 @@ export const useUserStore = defineStore('user', {
           }
         },
       })
+      updateMainColorVariables(this.themeColors)
+    },
+    setThemeColorAction(key: string, value: string) {
+      this.themeColors[key] = value
+      updateMainColorVariables(this.themeColors)
+    },
+    setThemeVarsAction(val: Record<string, string>) {
+      this.themeVars = val
     },
     setLangAction(val: LangTypes) {
       uni.setLocale(val)
@@ -110,19 +126,23 @@ export const useUserStore = defineStore('user', {
       })
     },
     getUserInfoAction(): Promise<any> {
-      return new Promise((resolve, reject) => {
-        request
-          .get(api.Me.info)
-          .then((res) => {
-            if (res && res.data) {
-              this.userActions = res.data.actions
-              resolve(res.data)
-            }
-          })
-          .catch((error) => {
-            reject(error)
-          })
+      this.userActions = ['login']
+      return new Promise((resolve) => {
+        resolve(true)
       })
+      // return new Promise((resolve, reject) => {
+      //   request
+      //     .get(api.Me.info)
+      //     .then((res) => {
+      //       if (res && res.data) {
+      //         this.userActions = res.data.actions
+      //         resolve(res.data)
+      //       }
+      //     })
+      //     .catch((error) => {
+      //       reject(error)
+      //     })
+      // })
     },
   },
 })

src/utils/css-var.ts

@@ -2,9 +2,11 @@
  * @Author: wjc
  * @Date: 2026-01-19 16:52:19
  * @LastEditors: wjc
- * @LastEditTime: 2026-01-22 09:43:34
+ * @LastEditTime: 2026-01-22 16:18:24
  * @Description:
  */
+import { store } from '@/stores'
+import { useUserStore } from '@/stores/modules/userStore'
 import { TinyColor } from '@ctrl/tinycolor'
 import { getColors } from 'theme-colors'
 
@@ -67,68 +69,54 @@ function setCSSVariables(
   variables: { [key: string]: string },
   id = '__uni-starter-styles__'
 ): void {
-  // 获取或创建内联样式表元素
-  const styleElement = document.querySelector(`#${id}`) || document.createElement('style')
-
-  styleElement.id = id
-
-  // 构建要更新的 CSS 变量的样式文本
-  let cssText = ':root, page {'
-  for (const key in variables) {
-    if (Object.prototype.hasOwnProperty.call(variables, key)) {
-      cssText += `${key}: ${variables[key]};`
+  if (typeof document === 'undefined') {
+    const userStore = useUserStore(store)
+    userStore.setThemeVarsAction(variables)
+  } else {
+    // 获取或创建内联样式表元素
+    const styleElement = document.querySelector(`#${id}`) || document.createElement('style')
+
+    styleElement.id = id
+
+    // 构建要更新的 CSS 变量的样式文本
+    let cssText = ':root, page {'
+    for (const key in variables) {
+      if (Object.prototype.hasOwnProperty.call(variables, key)) {
+        cssText += `${key}: ${variables[key]};`
+      }
     }
-  }
-  cssText += '}'
+    cssText += '}'
 
-  // 将样式文本赋值给内联样式表
-  styleElement.textContent = cssText
+    // 将样式文本赋值给内联样式表
+    styleElement.textContent = cssText
 
-  // 将内联样式表添加到文档头部
-  if (!document.querySelector(`#${id}`)) {
-    setTimeout(() => {
-      document.head.append(styleElement)
-    })
+    // 将内联样式表添加到文档头部
+    if (!document.querySelector(`#${id}`)) {
+      setTimeout(() => {
+        document.head.append(styleElement)
+      })
+    }
   }
 }
 
 /**
  * 更新主要的 CSS 变量
- * @param  preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
+ * @param  theme - 当前偏好设置对象，它的颜色值将被转换成为 CSS 变量。
  */
 export function updateMainColorVariables(theme: any) {
   // 当修改到颜色变量时，更新 css 变量
-  const root = document.documentElement
-  if (!root) {
-    return
-  }
   if (!theme) {
     return
   }
-  const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = theme
+  const { colorDanger, colorPrimary, colorSuccess, colorWarning } = theme
 
   const colorVariables = generatorColorVariables([
     { color: colorPrimary, name: 'primary' },
-    { alias: 'warning', color: colorWarning, name: 'yellow' },
-    { alias: 'success', color: colorSuccess, name: 'green' },
-    { alias: 'destructive', color: colorDestructive, name: 'red' },
+    { color: colorWarning, name: 'warning' },
+    { color: colorSuccess, name: 'success' },
+    { color: colorDanger, name: 'danger' },
   ])
 
-  // 要设置的 CSS 变量映射
-  const colorMappings = {
-    '--green-500': '--success',
-    '--primary-500': '--primary',
-    '--red-500': '--destructive',
-    '--yellow-500': '--warning',
-  }
-
-  // 统一处理颜色变量的更新
-  Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
-    const colorValue = colorVariables[sourceVar]
-    if (colorValue) {
-      document.documentElement.style.setProperty(targetVar, colorValue)
-    }
-  })
-
+  console.log('colorVariables----', colorVariables)
   setCSSVariables(colorVariables)
 }

stylelint.config.mjs

@@ -18,6 +18,12 @@ export default {
             ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
           },
         ],
+        'selector-type-no-unknown': [
+          true,
+          {
+            ignoreTypes: ['page', 'uni-page-body', 'uni-toast'],
+          },
+        ],
       },
     },
     {
@@ -40,6 +46,7 @@ export default {
               'at-root',
               'tailwind',
               'apply',
+              'page',
               'variants',
               'responsive',
               'screen',
@@ -51,6 +58,12 @@ export default {
             ],
           },
         ],
+        'selector-type-no-unknown': [
+          true,
+          {
+            ignoreTypes: ['page'],
+          },
+        ],
       },
     },
   ],
@@ -158,6 +171,12 @@ export default {
       true,
       { ignoreProperties: { '/.+/': '/(v-bind(.*))|($.*)/' } },
     ],
+    'unit-no-unknown': [
+      true,
+      {
+        ignoreUnits: ['rpx'],
+      },
+    ],
     'value-keyword-case': null,
   },
 }