From 7e0f17f72e6a78cf48cf25275924768f4a6efe67 Mon Sep 17 00:00:00 2001 From: KuroSago Date: Thu, 5 Sep 2024 16:34:09 +0800 Subject: [PATCH] M3 - 2 --- .../materialDesign3ThemeBuilder/package.json | 2 +- .../src/generateTheme.ts | 196 +++++++++--------- .../src/theme.types.ts | 8 +- src/pages.json | 12 ++ src/pages/colorCard/ColorPalette.vue | 43 ++++ src/pages/colorCard/Scheme.vue | 49 +++++ src/pages/colorCard/index.vue | 44 ++++ src/pages/colorCard/themes.ts | 126 +++++++++++ src/pages/splashScreen/index.vue | 35 ++-- src/router/index.ts | 1 - src/types/import-components.d.ts | 2 - tailwind.config.ts | 135 ++++++------ vite.config.ts | 4 +- 13 files changed, 460 insertions(+), 197 deletions(-) create mode 100644 src/pages/colorCard/ColorPalette.vue create mode 100644 src/pages/colorCard/Scheme.vue create mode 100644 src/pages/colorCard/index.vue create mode 100644 src/pages/colorCard/themes.ts diff --git a/packages/materialDesign3ThemeBuilder/package.json b/packages/materialDesign3ThemeBuilder/package.json index d8d3371..103f91f 100644 --- a/packages/materialDesign3ThemeBuilder/package.json +++ b/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", diff --git a/packages/materialDesign3ThemeBuilder/src/generateTheme.ts b/packages/materialDesign3ThemeBuilder/src/generateTheme.ts index fd515cd..76eb750 100644 --- a/packages/materialDesign3ThemeBuilder/src/generateTheme.ts +++ b/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: { - 0: hexFromArgb(primaryTonal.tone(0)), - 10: hexFromArgb(primaryTonal.tone(10)), - 20: hexFromArgb(primaryTonal.tone(20)), - 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)), + ...themeColors, + common: { + white: '#fff', + black: '#000', }, }; 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; +} diff --git a/packages/materialDesign3ThemeBuilder/src/theme.types.ts b/packages/materialDesign3ThemeBuilder/src/theme.types.ts index 074b9fc..3ac9358 100644 --- a/packages/materialDesign3ThemeBuilder/src/theme.types.ts +++ b/packages/materialDesign3ThemeBuilder/src/theme.types.ts @@ -43,10 +43,10 @@ export interface MD3Palettes { neutral: MD3NeutralTones neutralVariant: MD3Tones error: MD3Tones - info?: MD3Tones - warning?: MD3Tones - success?: MD3Tones - common?: { + info: MD3Tones + warning: MD3Tones + success: MD3Tones + common: { black: string white: string } diff --git a/src/pages.json b/src/pages.json index 9190da2..fda491b 100644 --- a/src/pages.json +++ b/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", diff --git a/src/pages/colorCard/ColorPalette.vue b/src/pages/colorCard/ColorPalette.vue new file mode 100644 index 0000000..1b28b91 --- /dev/null +++ b/src/pages/colorCard/ColorPalette.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/pages/colorCard/Scheme.vue b/src/pages/colorCard/Scheme.vue new file mode 100644 index 0000000..3ac6599 --- /dev/null +++ b/src/pages/colorCard/Scheme.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/pages/colorCard/index.vue b/src/pages/colorCard/index.vue new file mode 100644 index 0000000..a87f703 --- /dev/null +++ b/src/pages/colorCard/index.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/pages/colorCard/themes.ts b/src/pages/colorCard/themes.ts new file mode 100644 index 0000000..58bd4f6 --- /dev/null +++ b/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, +}; diff --git a/src/pages/splashScreen/index.vue b/src/pages/splashScreen/index.vue index 6710588..8d03da1 100644 --- a/src/pages/splashScreen/index.vue +++ b/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: 启动页面 --> + + diff --git a/src/router/index.ts b/src/router/index.ts index 3383f8f..55a004a 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -12,7 +12,6 @@ const router = createRouter({ export function setupRouter(app: App) { // Configure router guard - console.log('app ===', app); createRouterGuard(router); app.use(router); } diff --git a/src/types/import-components.d.ts b/src/types/import-components.d.ts index ab0232a..59580a3 100644 --- a/src/types/import-components.d.ts +++ b/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'] } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 52f6321..0534bfa 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,73 +1,74 @@ -import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'; -import { isMp } from './build/platform'; -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'], - corePlugins: { - // 小程序去使用 h5 的 preflight 和响应式 container 没有意义 - preflight: !isMp, - container: !isMp, - }, - plugins: [iconsPlugin({ - collections: getIconCollections(['mdi', 'svg-spinners']), - })], - theme: { - extend: { - opacity: { - disabled: 'var(--opacity-disabled)', - }, + import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'; + import { isMp } from './build/platform'; + + /** @type {import('tailwindcss').Config} */ + export default { + content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'], + corePlugins: { + // 小程序去使用 h5 的 preflight 和响应式 container 没有意义 + preflight: !isMp, + container: !isMp, }, - 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)', + plugins: [iconsPlugin({ + collections: getIconCollections(['mdi', 'svg-spinners']), + })], + theme: { + "extend": { + "opacity": { + "disabled": "var(--opacity-disabled)" + } }, - 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)', + "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)" }, - borderRadius: { - sm: 'var(--borderRadius-sm)', - base: 'var(--borderRadius-base)', - lg: 'var(--borderRadius-lg)', - circle: 'var(--borderRadius-circle)', + "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)" }, - 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)" + } +} + }; diff --git a/vite.config.ts b/vite.config.ts index 680169d..fd49b6e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -45,8 +45,8 @@ export default defineConfig(async ({ mode }) => { plugins: createVitePlugins({ isProd }), // 开发服务器配置 server: { - host: true, - // open: true, + // host: 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]]), },