完成主题色定制

components.d.ts

@@ -8,5 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
+    WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
   }
 }

package.json

@@ -56,6 +56,7 @@
     "@uni-helper/uni-app-types": "1.0.0-alpha.7",
     "@uni-helper/uni-ui-types": "1.0.0-alpha.7",
     "@uni-helper/vite-plugin-uni-components": "^0.2.6",
+    "@uni-ku/root": "^1.4.1",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
     "cross-env": "^10.1.0",

pnpm-lock.yaml

@@ -126,6 +126,9 @@ importers:
       '@uni-helper/vite-plugin-uni-components':
         specifier: ^0.2.6
         version: 0.2.6(rollup@4.55.1)
+      '@uni-ku/root':
+        specifier: ^1.4.1
+        version: 1.4.1(vite@5.2.8(@types/node@25.0.3)(sass@1.78.0)(terser@5.44.1))
       '@vue/runtime-core':
         specifier: ^3.4.21
         version: 3.5.26
@@ -1844,6 +1847,11 @@ packages:
   '@uni-helper/vite-plugin-uni-components@0.2.6':
     resolution: {integrity: sha512-0Z7agSZ9M4jv6zCrBzvUhuIGR7gb2wPepcmIBBGHsYshh32q9PtaAcDXlZRkerSdsxP8ZZBCeuJcFvlFH5QrOQ==}
 
+  '@uni-ku/root@1.4.1':
+    resolution: {integrity: sha512-DI9LLbWmPXjqJVwZTC84GuvSz9vzOgSUjbFrOE1y3kivttEReNVqwWM3n/kzFoNuS3KKm/DissOph4rFs912Zw==}
+    peerDependencies:
+      vite: ^5.0.0
+
   '@vitejs/plugin-legacy@5.3.2':
     resolution: {integrity: sha512-8moCOrIMaZ/Rjln0Q6GsH6s8fAt1JOI3k8nmfX4tXUxE5KAExVctSyOBk+A25GClsdSWqIk2yaUthH3KJ2X4tg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6851,6 +6859,13 @@ snapshots:
       - rollup
       - supports-color
 
+  '@uni-ku/root@1.4.1(vite@5.2.8(@types/node@25.0.3)(sass@1.78.0)(terser@5.44.1))':
+    dependencies:
+      '@vue/compiler-sfc': 3.4.21
+      chokidar: 3.6.0
+      jsonc-parser: 3.3.1
+      vite: 5.2.8(@types/node@25.0.3)(sass@1.78.0)(terser@5.44.1)
+
   '@vitejs/plugin-legacy@5.3.2(terser@5.44.1)(vite@5.2.8(@types/node@25.0.3)(sass@1.78.0)(terser@5.44.1))':
     dependencies:
       '@babel/core': 7.25.2
@@ -6951,13 +6966,13 @@ snapshots:
 
   '@vue/compiler-sfc@3.4.21':
     dependencies:
-      '@babel/parser': 7.25.6
+      '@babel/parser': 7.28.5
       '@vue/compiler-core': 3.4.21
       '@vue/compiler-dom': 3.4.21
       '@vue/compiler-ssr': 3.4.21
       '@vue/shared': 3.4.21
       estree-walker: 2.0.2
-      magic-string: 0.30.11
+      magic-string: 0.30.21
       postcss: 8.5.6
       source-map-js: 1.2.1
 

src/App.ku.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
-onLaunch(() => {
-  console.log('App Launch')
-})
-onShow(() => {
-  console.log('App Show')
-})
-onHide(() => {
-  console.log('App Hide')
+import { useTheme } from '@/composables/useTheme'
+import { useConfigProvider } from 'wot-design-uni'
+
+const { theme, themeVars } = useTheme()
+
+useConfigProvider({
+  themeVars,
 })
 </script>
-<style lang="scss">
-// @import '@/styles/variable.scss';
-</style>
+
+<template>
+  <!-- 模板层继续保留（对 H5 / 普通场景有用） -->
+  <wd-config-provider :theme="theme" :theme-vars="themeVars" custom-class="app-theme">
+    <KuRootView />
+  </wd-config-provider>
+</template>

src/composables/useTheme.ts

@@ -0,0 +1,8 @@
+import { appTheme } from '@/themes/index'
+
+export function useTheme() {
+  return {
+    theme: appTheme.theme,
+    themeVars: appTheme.themeVars,
+  }
+}

src/pages/index/index.vue

@@ -11,6 +11,7 @@
 
     <wd-button>主要按钮</wd-button>
     <wd-button type="success">成功按钮</wd-button>
+    <wd-button type="primary">主要按钮</wd-button>
     <wd-button type="info">信息按钮</wd-button>
     <wd-button type="warning">警告按钮</wd-button>
     <wd-button type="error">危险按钮</wd-button>
@@ -22,7 +23,7 @@ import { ref } from 'vue'
 const title = ref('Hello')
 </script>
 
-<style>
+<style scoped lang="scss">
 .content {
   display: flex;
   flex-direction: column;
@@ -46,6 +47,6 @@ const title = ref('Hello')
 
 .title {
   font-size: 36rpx;
-  color: #8f8f94;
+  color: var(--wot-color-theme);
 }
 </style>

src/style/css-vars.scss

@@ -0,0 +1,60 @@
+:root,
+page {
+  --wot-color-theme: initial;
+  --wot-color-primary: initial;
+  --wot-color-success: initial;
+  --wot-color-warning: initial;
+  --wot-color-error: initial;
+  --wot-color-danger: initial;
+  --wot-color-info: initial;
+  --wot-color-black: initial;
+  --wot-color-white: initial;
+  --wot-color-gray-1: initial;
+  --wot-color-gray-2: initial;
+  --wot-color-gray-3: initial;
+  --wot-color-gray-4: initial;
+  --wot-color-gray-5: initial;
+  --wot-color-gray-6: initial;
+  --wot-color-gray-7: initial;
+  --wot-color-gray-8: initial;
+  --wot-color-title: initial;
+  --wot-color-content: initial;
+  --wot-color-secondary: initial;
+  --wot-color-aid: initial;
+  --wot-color-tip: initial;
+  --wot-color-border: initial;
+  --wot-color-border-light: initial;
+  --wot-color-bg: initial;
+  --wot-color-bg-light: initial;
+  --wot-color-bg-disabled: initial;
+  --wot-button-primary-bg-color: initial;
+  --wot-button-primary-color: initial;
+  --wot-button-primary-border-color: initial;
+  --wot-button-normal-bg-color: initial;
+  --wot-button-normal-color: initial;
+  --wot-button-normal-border-color: initial;
+  --wot-button-disabled-bg-color: initial;
+  --wot-button-disabled-color: initial;
+  --wot-field-label-color: initial;
+  --wot-field-value-color: initial;
+  --wot-field-placeholder-color: initial;
+  --wot-input-text-color: initial;
+  --wot-input-placeholder-color: initial;
+  --wot-input-disabled-color: initial;
+  --wot-input-border-color: initial;
+  --wot-input-focus-border-color: initial;
+  --wot-cell-background-color: initial;
+  --wot-cell-border-color: initial;
+  --wot-cell-title-color: initial;
+  --wot-cell-value-color: initial;
+  --wot-card-background-color: initial;
+  --wot-card-border-radius: initial;
+  --wot-dialog-background-color: initial;
+  --wot-dialog-title-color: initial;
+  --wot-dialog-content-color: initial;
+  --wot-toast-background-color: initial;
+  --wot-toast-text-color: initial;
+  --wot-border-radius-sm: initial;
+  --wot-border-radius-md: initial;
+  --wot-border-radius-lg: initial;
+}

src/themes/default.ts

@@ -0,0 +1,13 @@
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+export const defaultTheme = {
+  theme: 'light',
+  themeVars: {
+    colorTheme: '#007aff',
+    buttonPrimaryBgColor: '#e01f1fff',
+    buttonPrimaryColor: '#2c249bc2',
+  },
+} satisfies {
+  theme: 'light' | 'dark'
+  themeVars: ConfigProviderThemeVars
+}

src/themes/index.ts

@@ -0,0 +1,15 @@
+import { defaultTheme } from './default'
+import { luoxinTheme } from './luoxin'
+
+function resolveTheme() {
+  // const mode = import.meta.env.VITE_MODE
+
+  // if (mode === 'production_luoxin') {
+  //   return luoxinTheme
+  // }
+
+  //* 默认用default主题
+  return defaultTheme
+}
+
+export const appTheme = resolveTheme()

src/themes/luoxin.ts

@@ -0,0 +1,17 @@
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+export const luoxinTheme = {
+  theme: 'light',
+  themeVars: {
+    colorTheme: '#07c160',
+    buttonPrimaryBgColor: '#07c160',
+    buttonPrimaryColor: '#ffffff',
+
+    // 你可以在这里加 LUOXIN 的品牌色
+    colorSuccess: '#07c160',
+    colorWarning: '#faad14',
+  },
+} satisfies {
+  theme: 'light' | 'dark'
+  themeVars: ConfigProviderThemeVars
+}

src/uni.scss

@@ -73,4 +73,6 @@ $uni-font-size-title: 20px;
 $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
-$uni-font-size-paragraph: 15px;
+$uni-font-size-paragraph: 15px;
+
+@import '@/style/css-vars.scss';

tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/*"]
     },
     "lib": ["esnext", "dom"],
     "types": [

vite.config.ts

@@ -1,8 +1,11 @@
+// vite.config.ts
 import { defineConfig } from 'vite'
+import UniKuRoot from '@uni-ku/root'
 import uni from '@dcloudio/vite-plugin-uni'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from '@uni-helper/vite-plugin-uni-components'
 import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'
+import path from 'path'
 
 export default defineConfig(async () => {
   const { default: tsconfigPaths } = await import('vite-tsconfig-paths')
@@ -10,18 +13,23 @@ export default defineConfig(async () => {
   return {
     plugins: [
       tsconfigPaths(),
+      UniKuRoot(),
       AutoImport({
         imports: ['vue', 'pinia'],
         dts: 'src/auto-imports.d.ts',
       }),
-
-      // ✅ 用 uni-helper 的组件插件
       Components({
         resolvers: [WotResolver()],
       }),
       uni(),
     ],
 
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+
     css: {},
   }
 })