M3 - 2

packages/materialDesign3ThemeBuilder/package.json

@@ -17,7 +17,7 @@
     "release:major": "standard-version --release-as major"
   },
   "dependencies": {
-    "@material/material-color-utilities": "0.2.7"
+    "@material/material-color-utilities": "0.3.0"
   },
   "devDependencies": {
     "standard-version": "^9.5.0",

packages/materialDesign3ThemeBuilder/src/generateTheme.ts

@@ -3,7 +3,7 @@ import {
   argbFromHex,
   hexFromArgb,
 } from '@material/material-color-utilities';
-import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
+import type { MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
 
 /**
  * Generates a theme based on the provided color values.
@@ -13,6 +13,9 @@ import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
  * @param {string} options.secondary - The secondary color. - 次要颜色。
  * @param {string} options.tertiary - The tertiary color. - 第三色。
  * @param {string} options.error - The error color. - 错误颜色。
+ * @param {string} options.info - The info color. - 信息颜色。
+ * @param {string} options.warning - The warning color. - 警告颜色。
+ * @param {string} options.success - The success color. - 成功颜色。
  * @param {string} options.neutral - The neutral color. - 中性颜色。
  * @param {string} options.neutralVariant - The variant of the neutral color. - 中性颜色的变体。
  *
@@ -128,11 +131,15 @@ import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
  *   @property {string} darkScheme.outlineVariant - The outline variant color used in dark mode. - 暗色模式下使用的轮廓变体颜色。
  *   @property {string} darkScheme.shadow - The shadow color used in dark mode. - 暗色模式下使用的阴影颜色。
  */
+
 export function generateTheme({
   primary,
   secondary,
   tertiary,
   error,
+  info,
+  warning,
+  success,
   neutral,
   neutralVariant,
 }: {
@@ -140,6 +147,9 @@ export function generateTheme({
   secondary: string
   tertiary: string
   error: string
+  info: string
+  warning: string
+  success: string
   neutral: string
   neutralVariant: string
 }): {
@@ -151,116 +161,44 @@ export function generateTheme({
   const secondaryTonal = TonalPalette.fromInt(argbFromHex(secondary));
   const tertiaryTonal = TonalPalette.fromInt(argbFromHex(tertiary));
   const errorTonal = TonalPalette.fromInt(argbFromHex(error));
+  const infoTonal = TonalPalette.fromInt(argbFromHex(info));
+  const warningTonal = TonalPalette.fromInt(argbFromHex(warning));
+  const successTonal = TonalPalette.fromInt(argbFromHex(success));
   const neutralTonal = TonalPalette.fromInt(argbFromHex(neutral));
   const neutralVariantTonal = TonalPalette.fromInt(argbFromHex(neutralVariant));
 
+  const themeColors: {
+    primary: MD3Tones
+    secondary: MD3Tones
+    tertiary: MD3Tones
+    error: MD3Tones
+    info: MD3Tones
+    warning: MD3Tones
+    success: MD3Tones
+    neutral: MD3NeutralTones
+    neutralVariant: MD3Tones
+  } = {
+    primary: generateTonalColors(primaryTonal),
+    secondary: generateTonalColors(secondaryTonal),
+    tertiary: generateTonalColors(tertiaryTonal),
+    error: generateTonalColors(errorTonal),
+    info: generateTonalColors(infoTonal),
+    warning: generateTonalColors(warningTonal),
+    success: generateTonalColors(successTonal),
+    neutral: generateNeutralColors(neutralTonal),
+    neutralVariant: generateTonalColors(neutralVariantTonal),
+  };
+
   const palette: MD3Palettes = {
-    primary: {
+    ...themeColors,
-      0: hexFromArgb(primaryTonal.tone(0)),
+    common: {
-      10: hexFromArgb(primaryTonal.tone(10)),
+      white: '#fff',
-      20: hexFromArgb(primaryTonal.tone(20)),
+      black: '#000',
-      30: hexFromArgb(primaryTonal.tone(30)),
-      40: hexFromArgb(primaryTonal.tone(40)),
-      50: hexFromArgb(primaryTonal.tone(50)),
-      60: hexFromArgb(primaryTonal.tone(60)),
-      70: hexFromArgb(primaryTonal.tone(70)),
-      80: hexFromArgb(primaryTonal.tone(80)),
-      90: hexFromArgb(primaryTonal.tone(90)),
-      95: hexFromArgb(primaryTonal.tone(95)),
-      99: hexFromArgb(primaryTonal.tone(99)),
-      100: hexFromArgb(primaryTonal.tone(100)),
-    },
-    secondary: {
-      0: hexFromArgb(secondaryTonal.tone(0)),
-      10: hexFromArgb(secondaryTonal.tone(10)),
-      20: hexFromArgb(secondaryTonal.tone(20)),
-      30: hexFromArgb(secondaryTonal.tone(30)),
-      40: hexFromArgb(secondaryTonal.tone(40)),
-      50: hexFromArgb(secondaryTonal.tone(50)),
-      60: hexFromArgb(secondaryTonal.tone(60)),
-      70: hexFromArgb(secondaryTonal.tone(70)),
-      80: hexFromArgb(secondaryTonal.tone(80)),
-      90: hexFromArgb(secondaryTonal.tone(90)),
-      95: hexFromArgb(secondaryTonal.tone(95)),
-      99: hexFromArgb(secondaryTonal.tone(99)),
-      100: hexFromArgb(secondaryTonal.tone(100)),
-    },
-    tertiary: {
-      0: hexFromArgb(tertiaryTonal.tone(0)),
-      10: hexFromArgb(tertiaryTonal.tone(10)),
-      20: hexFromArgb(tertiaryTonal.tone(20)),
-      30: hexFromArgb(tertiaryTonal.tone(30)),
-      40: hexFromArgb(tertiaryTonal.tone(40)),
-      50: hexFromArgb(tertiaryTonal.tone(50)),
-      60: hexFromArgb(tertiaryTonal.tone(60)),
-      70: hexFromArgb(tertiaryTonal.tone(70)),
-      80: hexFromArgb(tertiaryTonal.tone(80)),
-      90: hexFromArgb(tertiaryTonal.tone(90)),
-      95: hexFromArgb(tertiaryTonal.tone(95)),
-      99: hexFromArgb(tertiaryTonal.tone(99)),
-      100: hexFromArgb(tertiaryTonal.tone(100)),
-    },
-    error: {
-      0: hexFromArgb(errorTonal.tone(0)),
-      10: hexFromArgb(errorTonal.tone(10)),
-      20: hexFromArgb(errorTonal.tone(20)),
-      30: hexFromArgb(errorTonal.tone(30)),
-      40: hexFromArgb(errorTonal.tone(40)),
-      50: hexFromArgb(errorTonal.tone(50)),
-      60: hexFromArgb(errorTonal.tone(60)),
-      70: hexFromArgb(errorTonal.tone(70)),
-      80: hexFromArgb(errorTonal.tone(80)),
-      90: hexFromArgb(errorTonal.tone(90)),
-      95: hexFromArgb(errorTonal.tone(95)),
-      99: hexFromArgb(errorTonal.tone(99)),
-      100: hexFromArgb(errorTonal.tone(100)),
-    },
-    neutral: {
-      0: hexFromArgb(neutralTonal.tone(0)),
-      4: hexFromArgb(neutralTonal.tone(4)),
-      6: hexFromArgb(neutralTonal.tone(6)),
-      10: hexFromArgb(neutralTonal.tone(10)),
-      12: hexFromArgb(neutralTonal.tone(12)),
-      17: hexFromArgb(neutralTonal.tone(17)),
-      20: hexFromArgb(neutralTonal.tone(20)),
-      22: hexFromArgb(neutralTonal.tone(22)),
-      24: hexFromArgb(neutralTonal.tone(24)),
-      30: hexFromArgb(neutralTonal.tone(30)),
-      40: hexFromArgb(neutralTonal.tone(40)),
-      50: hexFromArgb(neutralTonal.tone(50)),
-      60: hexFromArgb(neutralTonal.tone(60)),
-      70: hexFromArgb(neutralTonal.tone(70)),
-      80: hexFromArgb(neutralTonal.tone(80)),
-      90: hexFromArgb(neutralTonal.tone(90)),
-      92: hexFromArgb(neutralTonal.tone(92)),
-      94: hexFromArgb(neutralTonal.tone(94)),
-      95: hexFromArgb(neutralTonal.tone(95)),
-      96: hexFromArgb(neutralTonal.tone(96)),
-      98: hexFromArgb(neutralTonal.tone(98)),
-      99: hexFromArgb(neutralTonal.tone(99)),
-      100: hexFromArgb(neutralTonal.tone(100)),
-    },
-    neutralVariant: {
-      0: hexFromArgb(neutralVariantTonal.tone(0)),
-      10: hexFromArgb(neutralVariantTonal.tone(10)),
-      20: hexFromArgb(neutralVariantTonal.tone(20)),
-      30: hexFromArgb(neutralVariantTonal.tone(30)),
-      40: hexFromArgb(neutralVariantTonal.tone(40)),
-      50: hexFromArgb(neutralVariantTonal.tone(50)),
-      60: hexFromArgb(neutralVariantTonal.tone(60)),
-      70: hexFromArgb(neutralVariantTonal.tone(70)),
-      80: hexFromArgb(neutralVariantTonal.tone(80)),
-      90: hexFromArgb(neutralVariantTonal.tone(90)),
-      95: hexFromArgb(neutralVariantTonal.tone(95)),
-      99: hexFromArgb(neutralVariantTonal.tone(99)),
-      100: hexFromArgb(neutralVariantTonal.tone(100)),
     },
   };
 
   const lightScheme: MD3ColorSchemeTokens = {
 
-    // 缺少 : info warning success
-
     // primary
     primary: palette.primary[40],
     onPrimary: palette.primary[100],
@@ -285,6 +223,24 @@ export function generateTheme({
     errorContainer: palette.error[90],
     onErrorContainer: palette.error[10],
 
+    // info
+    info: palette.info[40],
+    onInfo: palette.info[100],
+    infoContainer: palette.info[90],
+    onInfoContainer: palette.info[10],
+
+    // warning
+    warning: palette.warning[40],
+    onWarning: palette.warning[100],
+    warningContainer: palette.warning[90],
+    onWarningContainer: palette.warning[10],
+
+    // success
+    success: palette.success[40],
+    onSuccess: palette.success[100],
+    successContainer: palette.success[90],
+    onSuccessContainer: palette.success[10],
+
     // surface
     surface: palette.neutral[98],
     onSurface: palette.neutral[10],
@@ -338,6 +294,24 @@ export function generateTheme({
     errorContainer: palette.error[30],
     onErrorContainer: palette.error[90],
 
+    // info
+    info: palette.info[80],
+    onInfo: palette.info[20],
+    infoContainer: palette.info[30],
+    onInfoContainer: palette.info[90],
+
+    // warning
+    warning: palette.warning[80],
+    onWarning: palette.warning[20],
+    warningContainer: palette.warning[30],
+    onWarningContainer: palette.warning[90],
+
+    // success
+    success: palette.success[80],
+    onSuccess: palette.success[20],
+    successContainer: palette.success[30],
+    onSuccessContainer: palette.success[90],
+
     // surface
     surface: palette.neutral[6],
     onSurface: palette.neutral[90],
@@ -372,3 +346,21 @@ export function generateTheme({
     darkScheme,
   };
 }
+
+function generateTonalColors(tonal: TonalPalette): MD3Tones {
+  const tones: (keyof MD3Tones)[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100];
+  const result: MD3NeutralTones = {} as MD3NeutralTones;
+  tones.forEach((tone) => {
+    result[tone] = hexFromArgb(tonal.tone(tone));
+  });
+  return result;
+}
+
+function generateNeutralColors(tonal: TonalPalette): MD3NeutralTones {
+  const tones: (keyof MD3NeutralTones)[] = [0, 4, 6, 10, 12, 17, 20, 22, 24, 30, 40, 50, 60, 70, 80, 90, 92, 94, 95, 96, 98, 99, 100];
+  const result: MD3NeutralTones = {} as MD3NeutralTones;
+  tones.forEach((tone) => {
+    result[tone] = hexFromArgb(tonal.tone(tone));
+  });
+  return result;
+}

packages/materialDesign3ThemeBuilder/src/theme.types.ts

@@ -43,10 +43,10 @@ export interface MD3Palettes {
   neutral: MD3NeutralTones
   neutralVariant: MD3Tones
   error: MD3Tones
-  info?: MD3Tones
+  info: MD3Tones
-  warning?: MD3Tones
+  warning: MD3Tones
-  success?: MD3Tones
+  success: MD3Tones
-  common?: {
+  common: {
     black: string
     white: string
   }

src/pages.json

@@ -12,6 +12,18 @@
         "ignoreAuth": true
       }
     },
+    {
+      "name": "ColorCard",
+      "path": "pages/colorCard/index",
+      "style": {
+        "navigationBarTitleText": "ColorCard",
+        "navigationStyle": "custom"
+      },
+      "meta": {
+        "tabBar": false,
+        "ignoreAuth": true
+      }
+    },
     {
       "name": "Home",
       "path": "pages/index/index",

src/pages/colorCard/ColorPalette.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ColorPalette',
+  props: {
+    palette: {
+      type: Object as PropType<Record<string, any>>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <div
+    v-for="(value, keyName) in palette" :key="keyName" class="flex flex-col"
+  >
+    <h2 v-if="typeof value === 'object'">
+      {{ keyName }}
+    </h2>
+    <div v-if="typeof value === 'object'" class="flex haha flex-1">
+      <ColorPalette :palette="value" />
+    </div>
+    <div
+      v-else
+      class="flex h-[54rpx] transition-background-color duration-300"
+      :style="{
+        backgroundColor: value,
+        width: `calc(100vw/${Object.keys(palette).length})`,
+      }"
+    >
+      <!-- <span>{{ keyName }}: {{ value }}</span> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.palette {
+  margin: 20px;
+}
+</style>

src/pages/colorCard/Scheme.vue

@@ -0,0 +1,49 @@
+<!--
+  ## File: /src/pages/splashScreen/Scheme.vue
+
+  Project: uniapp_vue3_vite_ts
+
+  Created Date: 2024-09-05 10:45:49
+
+  Author: KuroSago
+
+  ## Last Modified: 2024-09-05 10:45:49
+
+  Modified By: kurosago
+
+  ## Copyright (c) 2024 self.
+
+  Use To: Scheme
+-->
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+const props = defineProps<{
+  scheme: Record<string, any>
+}>();
+
+defineComponent({
+  name: 'Scheme',
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-[8px]">
+    <div
+      v-for="(v, k) in props.scheme"
+      :key="k" class="flex flex-col items-center justify-center "
+    >
+      <span class="text-ellipsis w-full overflow-hidden">{{ k }}</span>
+      <div
+        class="flex-1 w-full flex items-center justify-center transition-background-color duration-300"
+        :style="{
+          backgroundColor: v,
+          borderRadius: '8px',
+        }"
+      >
+        {{ v }}
+      </div>
+    </div>
+  </div>
+</template>

src/pages/colorCard/index.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
+import ColorPalette from './ColorPalette.vue';
+import Scheme from './Scheme.vue';
+import { ThemeAssemble } from './themes';
+
+type ThemeKeys = keyof typeof ThemeAssemble;
+
+const theme: Ref<ThemeKeys> = ref('Watermelon');
+
+const themeColor = computed(() => {
+  return generateTheme(ThemeAssemble[theme.value]);
+});
+</script>
+
+<template>
+  <view class="bg-primary flex-1">
+    <div class="py-[32rpx] b flex flex-col b-[#123]">
+      <span>click it to change theme</span>
+
+      <div class="grid grid-cols-4 gap-4">
+        <div v-for="(v, k) in ThemeAssemble" :key="k" class="flex flex-col justify-center items-center" @click="theme = k">
+          <div class="w-[100rpx] h-[100rpx] bg-[#123] rounded-[8rpx]" :style="{ backgroundColor: v.primary }" />
+          <span>{{ k }}</span>
+        </div>
+      </div>
+
+      <span>now : {{ theme }}</span>
+    </div>
+
+    <!-- 递归渲染色卡 -->
+    <ColorPalette :palette="themeColor.palette" />
+
+    <!-- lightScheme -->
+    <span>lightScheme</span>
+    <Scheme :scheme="themeColor.lightScheme" />
+
+    <!-- darkScheme -->
+    <span>darkScheme</span>
+    <Scheme :scheme="themeColor.darkScheme" />
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/colorCard/themes.ts

@@ -0,0 +1,126 @@
+/**
+ * ## File: /src/pages/colorCard/themes.ts
+ *
+ * Project: uniapp_vue3_vite_ts
+ *
+ * Created Date: 2024-09-05 15:54:91
+ *
+ * Author: KuroSago
+ *
+ * ## Last Modified: 2024-09-05 15:54:91
+ *
+ * Modified By: kurosago
+ *
+ * ## Copyright (c) 2024 self.
+ *
+ * Use To:
+ */
+
+const Avocado = {
+  primary: '#6b8e23', // 牛油果果肉的绿色
+  secondary: '#556b2f', // 牛油果外皮的深绿色
+  tertiary: '#8fbc8f', // 浅绿色，作为柔和的补充色
+  error: '#b22222', // 红棕色，作为对比的错误提示色
+  warning: '#d2b48c', // 牛油果核的棕色，作为警告色
+  success: '#228b22', // 深绿色，象征成功和活力
+  info: '#c0c0c0', // 中性的灰色，用作信息色
+  neutral: '#4b5320', // 深绿色，作为主中性色
+  neutralVariant: '#f0e68c', // 浅黄色调，作为一种温和的变体色
+};
+
+// 西瓜
+const Watermelon = {
+  primary: '#ff4757', // 西瓜果肉的鲜红色
+  secondary: '#2ecc71', // 西瓜外皮的绿色
+  tertiary: '#f1c40f', // 黄色，代表西瓜的阳光感
+  error: '#c0392b', // 深红色，作为错误提示色
+  warning: '#f39c12', // 橙黄色，警告色
+  success: '#27ae60', // 明亮的绿色，象征成功
+  info: '#ecf0f1', // 浅灰色，作为信息色
+  neutral: '#34495e', // 瓜籽的深蓝色，作为主中性色
+  neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色变体
+};
+
+// 蓝莓
+const Blueberry = {
+  primary: '#4a69bd', // 蓝莓的深蓝色
+  secondary: '#82ccdd', // 浅蓝色，代表天空的清爽感
+  tertiary: '#f8c291', // 柔和的米色，代表蓝莓周围的土壤
+  error: '#e74c3c', // 深红色，警示错误
+  warning: '#f39c12', // 金黄色，代表警告
+  success: '#27ae60', // 明亮的绿色，象征蓝莓生长的活力
+  info: '#dfe6e9', // 浅灰色，信息提示
+  neutral: '#2d3436', // 深灰色，作为中性色
+  neutralVariant: '#636e72', // 较浅的灰色，作为中性色变体
+};
+
+const Lemon = {
+  primary: '#f7b731', // 柠檬的明亮黄色，作为主色调
+  secondary: '#badc58', // 浅绿色，代表柠檬叶子
+  tertiary: '#f9ca24', // 较深的黄色，代表柠檬皮
+  error: '#eb4d4b', // 鲜红色，用于警示错误
+  warning: '#f0932b', // 橙色，代表警告
+  success: '#6ab04c', // 浅绿色，象征成功与自然活力
+  info: '#dff9fb', // 淡蓝色，象征信息提示的清爽
+  neutral: '#2f3640', // 深灰色，作为主中性色
+  neutralVariant: '#7f8c8d', // 中性灰，作为中性色变体
+};
+
+const Grape = {
+  primary: '#6f1e51', // 葡萄的深紫色，作为主色调
+  secondary: '#833471', // 较浅的紫色，代表葡萄皮的色彩层次
+  tertiary: '#b53471', // 带红色调的紫色，代表成熟葡萄
+  error: '#e55039', // 深红色，用于错误提示
+  warning: '#f39c12', // 亮橙色，作为警告色
+  success: '#78e08f', // 浅绿色，象征成功和自然
+  info: '#c8d6e5', // 浅蓝色，信息提示色
+  neutral: '#2d3436', // 深灰色，作为中性色
+  neutralVariant: '#8395a7', // 较浅的灰色，作为中性色变体
+};
+
+const Peach = {
+  primary: '#ff6b81', // 蜜桃果肉的粉红色
+  secondary: '#ff9f43', // 温暖的橙色，代表蜜桃的阳光感
+  tertiary: '#ffeaa7', // 柔和的黄色，带来舒适感
+  error: '#e74c3c', // 鲜艳的红色，警示错误
+  warning: '#f39c12', // 明亮的橙色，代表警告
+  success: '#2ecc71', // 绿色，象征自然和成长
+  info: '#dfe6e9', // 浅灰蓝，信息提示色
+  neutral: '#576574', // 中性蓝灰色，作为中性色
+  neutralVariant: '#8395a7', // 较浅的灰色，作为中性色变体
+};
+
+const Ocean = {
+  primary: '#3498db', // 海水的深蓝色
+  secondary: '#1abc9c', // 清新的蓝绿色，代表海洋的生命力
+  tertiary: '#6dd5ed', // 浅蓝色，海天相接的色彩
+  error: '#e74c3c', // 鲜红色，代表警示
+  warning: '#f39c12', // 明亮的橙色，作为警告色
+  success: '#2ecc71', // 绿色，代表自然的复苏
+  info: '#ecf0f1', // 非常浅的蓝白色，信息提示色
+  neutral: '#34495e', // 深蓝灰色，作为中性色
+  neutralVariant: '#7f8c8d', // 较浅的蓝灰色，作为中性色变体
+};
+
+const Forest = {
+  primary: '#1e5631', // 深绿色，代表茂密的树叶和森林的稳重感
+  secondary: '#a3d9a5', // 浅绿色，代表新生的植物和森林中的光线
+  tertiary: '#755139', // 棕色，代表树木的树干和泥土
+  error: '#d32f2f', // 深红色，象征警示
+  warning: '#ffa000', // 亮橙色，作为警告色
+  success: '#4caf50', // 中绿色，象征森林的生机与成功
+  info: '#c8e6c9', // 柔和的浅绿，提供信息提示的清新感
+  neutral: '#2c3e50', // 深蓝灰色，代表阴影和静谧
+  neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色的变体
+};
+
+export const ThemeAssemble = {
+  Avocado,
+  Watermelon,
+  Blueberry,
+  Lemon,
+  Grape,
+  Peach,
+  Ocean,
+  Forest,
+};

src/pages/splashScreen/index.vue

@@ -9,27 +9,16 @@
 
   ## Last Modified: 2024-06-24 11:30:88
 
-  Modified By: KuroSago
+  Modified By: kurosago
 
   ## Copyright (c) 2024 self.
 
   Use To: 启动页面
 -->
 <script lang="ts" setup>
-import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
 import { useUserStore } from '@/stores/modules/user';
 import { useSystemInfoStore } from '@/stores/modules/system';
 
-const a = generateTheme({
-  primary: '#6200ee',
-  secondary: '#03dac6',
-  tertiary: '#03dac6',
-  error: '#b00020',
-  neutral: '#000000',
-  neutralVariant: '#ffffff',
-});
-console.log(console.log(JSON.stringify(a)));
-
 const { changeThemeModel } = useSystemInfoStore();
 
 const router = useRouter();
@@ -60,16 +49,26 @@ function changeTheme() {
     model: themeModel === 'DARK' ? 'LIGHT' : 'DARK',
   });
 }
+
+// fnc : 跳转到色卡页面
+function toColorCard() {
+  router.push({
+    name: 'ColorCard',
+  });
+}
 </script>
 
 <template>
-  <view class=" bg-primary">
+  <view class=" bg-primary flex-1">
-    <span class="text-#123">流转</span>
+    <span @click="changeTheme">
+      changeTheme
+    </span>
 
-    <button
+    <button @click="toColorCard">
-      @click="changeTheme"
+      色卡
-    >
-      4
     </button>
   </view>
 </template>
+
+<style>
+</style>

src/router/index.ts

@@ -12,7 +12,6 @@ const router = createRouter({
 
 export function setupRouter(app: App<Element>) {
   // Configure router guard
-  console.log('app ===', app);
   createRouterGuard(router);
   app.use(router);
 }

src/types/import-components.d.ts

@@ -9,8 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
     BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
-    BasicInput: typeof import('./../components/BasicInput/index.vue')['default']
     Iconify: typeof import('./../components/Iconify/index.vue')['default']
-    Test: typeof import('./../components/Test/index.vue')['default']
   }
 }

tailwind.config.ts

@@ -1,3 +1,4 @@
+
   import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
   import { isMp } from './build/platform';
 
@@ -13,61 +14,61 @@ export default {
       collections: getIconCollections(['mdi', 'svg-spinners']),
     })],
     theme: {
-    extend: {
+    "extend": {
-      opacity: {
+        "opacity": {
-        disabled: 'var(--opacity-disabled)',
+            "disabled": "var(--opacity-disabled)"
+        }
     },
+    "colors": {
+        "primary": "var(--colors-primary)",
+        "secondary": "var(--colors-secondary)",
+        "accent": "var(--colors-accent)",
+        "success": "var(--colors-success)",
+        "warning": "var(--colors-warning)",
+        "error": "var(--colors-error)",
+        "disable": "var(--colors-disable)",
+        "danger": "var(--colors-danger)",
+        "mark": "var(--colors-mark)",
+        "title": "var(--colors-title)",
+        "subtitle": "var(--colors-subtitle)",
+        "paragraph": "var(--colors-paragraph)",
+        "fontColorblack": "var(--colors-fontColorblack)",
+        "fontColorPrimary": "var(--colors-fontColorPrimary)",
+        "fontColorInverse": "var(--colors-fontColorInverse)",
+        "fontColorGrey": "var(--colors-fontColorGrey)",
+        "fontColorPlaceholder": "var(--colors-fontColorPlaceholder)",
+        "fontColorDisable": "var(--colors-fontColorDisable)",
+        "fontColorBottomText": "var(--colors-fontColorBottomText)",
+        "container": "var(--colors-container)",
+        "page": "var(--colors-page)",
+        "containerInverse": "var(--colors-containerInverse)",
+        "containerHover": "var(--colors-containerHover)",
+        "secondaryHover": "var(--colors-secondaryHover)",
+        "containerMask": "var(--colors-containerMask)",
+        "iconButton": "var(--colors-iconButton)",
+        "borderColor": "var(--colors-borderColor)"
     },
-    colors: {
+    "fontSize": {
-      primary: 'var(--colors-primary)',
+        "sm": "var(--fontSize-sm)",
-      secondary: 'var(--colors-secondary)',
+        "base": "var(--fontSize-base)",
-      accent: 'var(--colors-accent)',
+        "lg": "var(--fontSize-lg)",
-      success: 'var(--colors-success)',
+        "title": "var(--fontSize-title)",
-      warning: 'var(--colors-warning)',
+        "subtitle": "var(--fontSize-subtitle)",
-      error: 'var(--colors-error)',
+        "paragraph": "var(--fontSize-paragraph)"
-      disable: 'var(--colors-disable)',
-      danger: 'var(--colors-danger)',
-      mark: 'var(--colors-mark)',
-      title: 'var(--colors-title)',
-      subtitle: 'var(--colors-subtitle)',
-      paragraph: 'var(--colors-paragraph)',
-      fontColorblack: 'var(--colors-fontColorblack)',
-      fontColorPrimary: 'var(--colors-fontColorPrimary)',
-      fontColorInverse: 'var(--colors-fontColorInverse)',
-      fontColorGrey: 'var(--colors-fontColorGrey)',
-      fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)',
-      fontColorDisable: 'var(--colors-fontColorDisable)',
-      fontColorBottomText: 'var(--colors-fontColorBottomText)',
-      container: 'var(--colors-container)',
-      page: 'var(--colors-page)',
-      containerInverse: 'var(--colors-containerInverse)',
-      containerHover: 'var(--colors-containerHover)',
-      secondaryHover: 'var(--colors-secondaryHover)',
-      containerMask: 'var(--colors-containerMask)',
-      iconButton: 'var(--colors-iconButton)',
-      borderColor: 'var(--colors-borderColor)',
-    },
-    fontSize: {
-      sm: 'var(--fontSize-sm)',
-      base: 'var(--fontSize-base)',
-      lg: 'var(--fontSize-lg)',
-      title: 'var(--fontSize-title)',
-      subtitle: 'var(--fontSize-subtitle)',
-      paragraph: 'var(--fontSize-paragraph)',
-    },
-    borderRadius: {
-      sm: 'var(--borderRadius-sm)',
-      base: 'var(--borderRadius-base)',
-      lg: 'var(--borderRadius-lg)',
-      circle: 'var(--borderRadius-circle)',
-    },
-    spacing: {
-      rowSm: 'var(--spacing-rowSm)',
-      rowBase: 'var(--spacing-rowBase)',
-      rowLg: 'var(--spacing-rowLg)',
-      colSm: 'var(--spacing-colSm)',
-      colBase: 'var(--spacing-colBase)',
-      colLg: 'var(--spacing-colLg)',
     },
+    "borderRadius": {
+        "sm": "var(--borderRadius-sm)",
+        "base": "var(--borderRadius-base)",
+        "lg": "var(--borderRadius-lg)",
+        "circle": "var(--borderRadius-circle)"
     },
+    "spacing": {
+        "rowSm": "var(--spacing-rowSm)",
+        "rowBase": "var(--spacing-rowBase)",
+        "rowLg": "var(--spacing-rowLg)",
+        "colSm": "var(--spacing-colSm)",
+        "colBase": "var(--spacing-colBase)",
+        "colLg": "var(--spacing-colLg)"
+    }
+}
   };

vite.config.ts

@@ -45,8 +45,8 @@ export default defineConfig(async ({ mode }) => {
     plugins: createVitePlugins({ isProd }),
     // 开发服务器配置
     server: {
-      host: true,
+      // host: true,
-      // open: true,
+      open: true,
       port: Number.parseInt(VITE_PORT!, 10),
       proxy: resolveProxy([[VITE_PROXY_PREFIX as string, VITE_BASE_URL as string], [VITE_UPLOAD_PROXY_PREFIX as string, VITE_UPLOAD_URL as string]]),
     },