完善M3
This commit is contained in:
parent
de90300e51
commit
82705051eb
@ -4,7 +4,7 @@ import autoImport from 'unplugin-auto-import/vite';
|
||||
import viteRestart from 'vite-plugin-restart';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import Unocss from 'unocss/vite';
|
||||
import { appProvider, buildThemeConfig, createComponents } from '../vite/plugins/index';
|
||||
import { appProvider, createComponents } from '../vite/plugins/index';
|
||||
import { isH5 } from './platform';
|
||||
|
||||
interface VitePluginConfig {
|
||||
@ -17,7 +17,6 @@ export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[]
|
||||
// @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
|
||||
uni?.default(),
|
||||
appProvider(),
|
||||
buildThemeConfig(),
|
||||
createComponents(),
|
||||
Unocss(),
|
||||
autoImport({
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"git:hooks": "npx simple-git-hooks",
|
||||
"postinstall": "weapp-tw patch",
|
||||
"version:first": "commit-and-tag-version --first-release",
|
||||
"version:alpha": "commit-and-tag-version --prerelease alpha",
|
||||
"version:beta": "commit-and-tag-version --prerelease beta",
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
argbFromHex,
|
||||
hexFromArgb,
|
||||
} from '@material/material-color-utilities';
|
||||
import type { MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
|
||||
import type { AppTheme, MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
|
||||
|
||||
/**
|
||||
* Generates a theme based on the provided color values.
|
||||
@ -152,11 +152,7 @@ export function generateTheme({
|
||||
success: string
|
||||
neutral: string
|
||||
neutralVariant: string
|
||||
}): {
|
||||
palette: MD3Palettes
|
||||
lightScheme: MD3ColorSchemeTokens
|
||||
darkScheme: MD3ColorSchemeTokens
|
||||
} {
|
||||
}): AppTheme {
|
||||
const primaryTonal = TonalPalette.fromInt(argbFromHex(primary));
|
||||
const secondaryTonal = TonalPalette.fromInt(argbFromHex(secondary));
|
||||
const tertiaryTonal = TonalPalette.fromInt(argbFromHex(tertiary));
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { generateTheme } from './generateTheme';
|
||||
import type {
|
||||
AppTheme,
|
||||
MD3ColorSchemeTokens,
|
||||
MD3NeutralTones,
|
||||
MD3Palettes,
|
||||
@ -7,4 +8,4 @@ import type {
|
||||
} from './theme.types';
|
||||
|
||||
export { generateTheme };
|
||||
export type { MD3Tones, MD3NeutralTones, MD3Palettes, MD3ColorSchemeTokens };
|
||||
export type { MD3Tones, MD3NeutralTones, MD3Palettes, MD3ColorSchemeTokens, AppTheme };
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
/**
|
||||
* Represents the MD3Tones interface.
|
||||
*/
|
||||
|
||||
export interface AppTheme {
|
||||
palette: MD3Palettes
|
||||
lightScheme: MD3ColorSchemeTokens
|
||||
darkScheme: MD3ColorSchemeTokens
|
||||
}
|
||||
export interface MD3Tones {
|
||||
0: string
|
||||
10: string
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
// S、M、L、XL、XXL、XXXL
|
||||
// S: Small 小 ；M: Middle 中；L: Large 大；XL: extra large 加大；多个X则代表多重加大码，X越多，码数越大。
|
||||
export enum Size {
|
||||
S = 's',
|
||||
M = 'm',
|
||||
L = 'l',
|
||||
XL = 'xl',
|
||||
XXl = 'xxl',
|
||||
XXXL = 'xxxl',
|
||||
}
|
||||
// export enum Size {
|
||||
// S = 's',
|
||||
// M = 'm',
|
||||
// L = 'l',
|
||||
// XL = 'xl',
|
||||
// XXl = 'xxl',
|
||||
// XXXL = 'xxxl',
|
||||
// }
|
||||
|
||||
export enum UNOCSS_THEME_TYPE {
|
||||
SCREENS = 'screens',
|
||||
COLORS = 'colors',
|
||||
SPACING = 'spacing',
|
||||
BORDERRADIUS = 'borderRadius',
|
||||
FONTFAMILY = 'fontFamily',
|
||||
}
|
||||
// export enum UNOCSS_THEME_TYPE {
|
||||
// SCREENS = 'screens',
|
||||
// COLORS = 'colors',
|
||||
// SPACING = 'spacing',
|
||||
// BORDERRADIUS = 'borderRadius',
|
||||
// FONTFAMILY = 'fontFamily',
|
||||
// }
|
||||
|
||||
export enum THEME_MODEL {
|
||||
LIGHT = 'light',
|
||||
DARK = 'dark',
|
||||
LIGHT = 'lightScheme',
|
||||
DARK = 'darkScheme',
|
||||
}
|
||||
|
||||
@ -5,11 +5,15 @@ export const themeMixin = {
|
||||
computed: {
|
||||
__themeModel() {
|
||||
const themeStore = storeToRefs(useSystemInfoStore());
|
||||
return themeStore.themeModel.value;
|
||||
return themeStore.getThemeModel.value;
|
||||
},
|
||||
__themeKey() {
|
||||
const themeStore = storeToRefs(useSystemInfoStore());
|
||||
return themeStore.getThemeKey.value;
|
||||
},
|
||||
__theme() {
|
||||
const themeStore = storeToRefs(useSystemInfoStore());
|
||||
const theme = themeStore.theme.value;
|
||||
const theme = themeStore.getTheme.value;
|
||||
return Object.keys(theme)
|
||||
.map(key => `${key}:${theme[key]};`)
|
||||
.join('');
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
export interface ThemeCfg {
|
||||
'--colors-primary': string
|
||||
'--colors-secondary': string
|
||||
'--colors-accent': string
|
||||
'--colors-success': string
|
||||
'--colors-warning': string
|
||||
'--colors-error': string
|
||||
'--colors-disable': string
|
||||
'--colors-danger': string
|
||||
'--colors-mark': string
|
||||
'--colors-title': string
|
||||
'--colors-subtitle': string
|
||||
'--colors-paragraph': string
|
||||
'--colors-fontColorblack': string
|
||||
'--colors-fontColorPrimary': string
|
||||
'--colors-fontColorInverse': string
|
||||
'--colors-fontColorGrey': string
|
||||
'--colors-fontColorPlaceholder': string
|
||||
'--colors-fontColorDisable': string
|
||||
'--colors-fontColorBottomText': string
|
||||
'--colors-container': string
|
||||
'--colors-page': string
|
||||
'--colors-containerInverse': string
|
||||
'--colors-containerHover': string
|
||||
'--colors-containerMask': string
|
||||
'--colors-iconButton': string
|
||||
'--colors-borderColor': string
|
||||
'--fontSize-sm': string
|
||||
'--fontSize-base': string
|
||||
'--fontSize-lg': string
|
||||
'--fontSize-title': string
|
||||
'--fontSize-subtitle': string
|
||||
'--fontSize-paragraph': string
|
||||
'--borderRadius-sm': string
|
||||
'--borderRadius-base': string
|
||||
'--borderRadius-lg': string
|
||||
'--borderRadius-circle': string
|
||||
'--spacing-rowSm': string
|
||||
'--spacing-rowBase': string
|
||||
'--spacing-rowLg': string
|
||||
'--spacing-colSm': string
|
||||
'--spacing-colBase': string
|
||||
'--spacing-colLg': string
|
||||
'--opacity-disabled': string
|
||||
[propName: string]: string
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import ColorPaletteComponent from './ColorPalette.vue';
|
||||
|
||||
const props = defineProps({
|
||||
palette: {
|
||||
@ -19,11 +18,11 @@ defineComponent({
|
||||
<div
|
||||
v-for="(value, keyName) in props.palette" :key="keyName" class="flex flex-col"
|
||||
>
|
||||
<h2 v-if="typeof value === 'object'">
|
||||
<h2 v-if="typeof value === 'object'" class="text-onBackground m-3">
|
||||
{{ keyName }}
|
||||
</h2>
|
||||
<div v-if="typeof value === 'object'" class="flex haha flex-1">
|
||||
<ColorPaletteComponent class="flex" :palette="value" />
|
||||
<ColorPalette class="flex" :palette="value" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
|
||||
@ -1,31 +1,87 @@
|
||||
<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';
|
||||
import { ThemeAssemble } from '@/stores/helper/themes';
|
||||
import { useSystemInfoStore } from '@/stores/modules/system';
|
||||
import type { THEME_MODEL } from '@/enums/UI';
|
||||
|
||||
type ThemeKeys = keyof typeof ThemeAssemble;
|
||||
|
||||
const theme: Ref<ThemeKeys> = ref('Watermelon');
|
||||
const { changeThemeKey, changeThemeModel } = useSystemInfoStore();
|
||||
|
||||
const themeColor = computed(() => {
|
||||
return generateTheme(ThemeAssemble[theme.value]);
|
||||
return useSystemInfoStore().theme;
|
||||
});
|
||||
|
||||
const themeKey = computed(() => {
|
||||
return useSystemInfoStore().getThemeKey;
|
||||
});
|
||||
|
||||
const themeModel = computed(() => {
|
||||
return useSystemInfoStore().getThemeModel;
|
||||
});
|
||||
|
||||
type ThemeModelKey = keyof typeof THEME_MODEL;
|
||||
|
||||
const themeModelList: {
|
||||
key: ThemeModelKey
|
||||
value: string
|
||||
}[] = [
|
||||
{
|
||||
key: 'LIGHT',
|
||||
value: 'LIGHT',
|
||||
},
|
||||
{
|
||||
key: 'DARK',
|
||||
value: 'DARK',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="bg-primary flex-1">
|
||||
<view class="bg-background flex-1">
|
||||
<div class="py-[32rpx] b flex flex-col b-[#123]">
|
||||
<h2>click it to change theme</h2>
|
||||
<h2 class="text-onBackground">
|
||||
click it to change themeModel
|
||||
</h2>
|
||||
|
||||
<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 }" />
|
||||
<h4>{{ k }}</h4>
|
||||
<div class="flex flex-row my-3">
|
||||
<div
|
||||
v-for="(item, index) in themeModelList"
|
||||
:key="index"
|
||||
class="flex-1 p-4 flex justify-center items-center"
|
||||
:class="{
|
||||
'bg-common-black text-common-white': item.key === 'DARK',
|
||||
'bg-common-white text-common-black': item.key === 'LIGHT',
|
||||
}"
|
||||
@click="changeThemeModel({
|
||||
model: item.key,
|
||||
})"
|
||||
>
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>now : {{ theme }}</h4>
|
||||
<div class="m-3 text-onBackground">
|
||||
now : {{ themeModel }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-[32rpx] b flex flex-col b-[#123]">
|
||||
<h2 class="text-onBackground">
|
||||
click it to change themeKey
|
||||
</h2>
|
||||
|
||||
<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="changeThemeKey({ key: k })">
|
||||
<div class="w-[100rpx] h-[100rpx] bg-[#123] rounded-[8rpx]" :style="{ backgroundColor: v.primary }" />
|
||||
<h4 class="text-onBackground">
|
||||
{{ k }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="m-3 text-onBackground">
|
||||
now : {{ themeKey }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- 递归渲染色卡 -->
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
## Last Modified: 2024-06-24 11:30:88
|
||||
|
||||
Modified By: kurosago
|
||||
Modified By: KuroSago
|
||||
|
||||
## Copyright (c) 2024 self.
|
||||
|
||||
@ -32,13 +32,13 @@ onMounted(async () => {
|
||||
name: 'Home',
|
||||
});
|
||||
} else {
|
||||
router.replace({
|
||||
name: 'Login',
|
||||
params: {
|
||||
redirect: 'Home',
|
||||
tabBar: 'true',
|
||||
},
|
||||
});
|
||||
// router.replace({
|
||||
// name: 'Login',
|
||||
// params: {
|
||||
// redirect: 'Home',
|
||||
// tabBar: 'true',
|
||||
// },
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -9,13 +9,15 @@
|
||||
*
|
||||
* ## Last Modified: 2024-09-05 15:54:91
|
||||
*
|
||||
* Modified By: kurosago
|
||||
* Modified By: KuroSago
|
||||
*
|
||||
* ## Copyright (c) 2024 self.
|
||||
*
|
||||
* Use To:
|
||||
*/
|
||||
|
||||
import type { MD3ColorSchemeTokens, MD3Palettes } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
|
||||
const Avocado = {
|
||||
primary: '#6b8e23', // 牛油果果肉的绿色
|
||||
secondary: '#556b2f', // 牛油果外皮的深绿色
|
||||
@ -124,3 +126,25 @@ export const ThemeAssemble = {
|
||||
Ocean,
|
||||
Forest,
|
||||
};
|
||||
|
||||
export function convertSchemeToCSSVariables(scheme: MD3ColorSchemeTokens): Record<string, string> {
|
||||
const cssVariables: Record<string, string> = {};
|
||||
|
||||
for (const [key, value] of Object.entries(scheme)) {
|
||||
cssVariables[`--${key}`] = value;
|
||||
}
|
||||
|
||||
return cssVariables;
|
||||
}
|
||||
|
||||
export function convertPaletteToCSSVariables(palette: MD3Palettes): Record<string, string> {
|
||||
const cssVariables: Record<string, string> = {};
|
||||
|
||||
for (const [key, value] of Object.entries(palette) as [string, Record<string, string>][]) {
|
||||
for (const [subKey, subValue] of Object.entries(value)) {
|
||||
cssVariables[`--${key}-${subKey}`] = subValue;
|
||||
}
|
||||
}
|
||||
|
||||
return cssVariables;
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
import type { AppTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { ThemeAssemble, convertPaletteToCSSVariables, convertSchemeToCSSVariables } from '../helper/themes';
|
||||
import { THEME_MODEL } from '@/enums/UI';
|
||||
import type { ThemeCfg } from '@/model/theme';
|
||||
import { theme as _theme } from '@/theme/theme';
|
||||
|
||||
type ThemeModelKey = keyof typeof THEME_MODEL;
|
||||
type AppThemeKey = keyof typeof ThemeAssemble;
|
||||
interface SystemInfo {
|
||||
theme: ThemeCfg
|
||||
theme: AppTheme
|
||||
themeKey: AppThemeKey
|
||||
themeModel: ThemeModelKey
|
||||
systemInfo: UniApp.GetSystemInfoResult
|
||||
}
|
||||
@ -13,17 +16,30 @@ export const useSystemInfoStore = defineStore({
|
||||
id: 'system',
|
||||
state: (): SystemInfo => ({
|
||||
// 主题
|
||||
theme: <ThemeCfg>{ ..._theme.light },
|
||||
|
||||
theme: generateTheme(ThemeAssemble.Avocado),
|
||||
// 所选主题样式
|
||||
themeKey: 'Avocado',
|
||||
// 当前主题模式
|
||||
themeModel: 'LIGHT',
|
||||
|
||||
// 系统信息
|
||||
systemInfo: {
|
||||
statusBarHeight: 0,
|
||||
} as UniApp.GetSystemInfoResult,
|
||||
}),
|
||||
getters: {},
|
||||
getters: {
|
||||
getTheme: (state) => {
|
||||
// 主题
|
||||
const schemeData = convertSchemeToCSSVariables(state.theme[THEME_MODEL[state.themeModel]]);
|
||||
// 调色板
|
||||
const palette = convertPaletteToCSSVariables(state.theme.palette);
|
||||
return {
|
||||
...schemeData,
|
||||
...palette,
|
||||
};
|
||||
},
|
||||
getThemeKey: state => state.themeKey,
|
||||
getThemeModel: state => state.themeModel,
|
||||
},
|
||||
actions: {
|
||||
// 获取系统信息
|
||||
async getSystemInfo() {
|
||||
@ -31,10 +47,15 @@ export const useSystemInfoStore = defineStore({
|
||||
this.systemInfo = res;
|
||||
},
|
||||
|
||||
// 切换主题
|
||||
// 切换模式 明亮/暗黑
|
||||
changeThemeModel({ model }: { model: ThemeModelKey } = { model: 'DARK' }) {
|
||||
this.themeModel = model;
|
||||
this.theme = { ..._theme[THEME_MODEL[model]] };
|
||||
},
|
||||
|
||||
// 切换主题 色彩
|
||||
changeThemeKey({ key }: { key: AppThemeKey }) {
|
||||
this.themeKey = key;
|
||||
this.theme = generateTheme(ThemeAssemble[key]);
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
|
||||
@ -1,219 +0,0 @@
|
||||
/**
|
||||
* 主题根文件
|
||||
* @note 命名规则: ( key )
|
||||
* -- 变量标志符
|
||||
* colors 变量类型
|
||||
* primary 变量标识符
|
||||
* 在本文件的各种定义主题中 key 名应当保持完全统一
|
||||
* 按照此格式书写的 key 名完全路径禁止有重叠,否则会引发 bug
|
||||
*/
|
||||
|
||||
/**
|
||||
* secondary ：通常用于表示次要的、补充的元素，例如按钮的边框颜色、图标的颜色等。
|
||||
* accent ：通常用于表示强调的、突出的元素，例如链接的颜色、高亮的颜色等。
|
||||
* tertiary ：通常用于表示第三级的、较为次要的元素，例如表格的边框颜色、分割线的颜色等。
|
||||
* neutral ：通常用于表示中性的、不带有情感色彩的元素，例如背景色、文本颜色等。
|
||||
*/
|
||||
|
||||
import type { THEME_MODEL } from '@/enums/UI';
|
||||
import type { ThemeCfg } from '@/model/theme';
|
||||
|
||||
export const theme: {
|
||||
[key in THEME_MODEL]: ThemeCfg
|
||||
} = {
|
||||
light: {
|
||||
/* light */
|
||||
|
||||
/* 颜色 */
|
||||
'--colors-primary': '#FFE274', // 主色
|
||||
'--colors-secondary': '#5A7767', // 次要
|
||||
'--colors-accent': '#FB9300', // 强调
|
||||
|
||||
'--colors-success': '#4cd964',
|
||||
'--colors-warning': '#f0ad4e',
|
||||
'--colors-error': '#dd524d',
|
||||
'--colors-disable': '#ddd',
|
||||
'--colors-danger': '#FF6843',
|
||||
'--colors-mark': 'rgba(0,0,0,0.4)',
|
||||
|
||||
/* 文章场景相关 */
|
||||
'--colors-title': '#2c405a', // 文章标题颜色
|
||||
'--colors-subtitle': '#555555', // 二级标题颜色
|
||||
'--colors-paragraph': '#3f536e', // 文章段落颜色
|
||||
|
||||
/* 文字基本颜色 */
|
||||
'--colors-fontColorblack': '#333', // 基本色 - 不切换
|
||||
'--colors-fontColorPrimary': '#333', // 基本色
|
||||
'--colors-fontColorInverse': '#fff', // 反色
|
||||
'--colors-fontColorGrey': '#999', // 辅助灰色，如加载更多的提示信息
|
||||
'--colors-fontColorPlaceholder': '#808080',
|
||||
'--colors-fontColorDisable': '#c0c0c0',
|
||||
'--colors-fontColorBottomText': '#6F6E80', // 底部tabbar文字颜色
|
||||
|
||||
/* 背景颜色 */
|
||||
'--colors-container': '#ffffff',
|
||||
'--colors-page': '#F6F4F0',
|
||||
'--colors-containerInverse': '#000000', // 背景反色
|
||||
'--colors-containerHover': 'rgba(255, 226, 116, .5)', // 点击状态颜色
|
||||
'--colors-secondaryHover': 'rgba(90,119,103, .5)', // 点击状态颜色
|
||||
'--colors-containerMask': 'rgba(0, 0, 0, 0.4)', // 遮罩颜色
|
||||
// '--colors-iconButton': '#F5F5EC',
|
||||
'--colors-iconButton': '#E4E4E4', // ICON 按钮背景色
|
||||
|
||||
/* 边框颜色 */
|
||||
'--colors-borderColor': '#c8c7cc',
|
||||
|
||||
/* 文字尺寸 */
|
||||
'--fontSize-sm': '24rpx',
|
||||
'--fontSize-base': '28rpx',
|
||||
'--fontSize-lg': '32rpx',
|
||||
/* 文章场景相关 */
|
||||
'--fontSize-title': '40rpx',
|
||||
'--fontSize-subtitle': '36rpx',
|
||||
'--fontSize-paragraph': '32rpx',
|
||||
|
||||
/* Border Radius */
|
||||
'--borderRadius-sm': '4rpx',
|
||||
'--borderRadius-base': '6rpx',
|
||||
'--borderRadius-lg': '12rpx',
|
||||
'--borderRadius-circle': '50%',
|
||||
|
||||
/* 水平间距 */
|
||||
'--spacing-rowSm': '12px',
|
||||
'--spacing-rowBase': '24rpx',
|
||||
'--spacing-rowLg': '32rpx',
|
||||
|
||||
/* 垂直间距 */
|
||||
'--spacing-colSm': '8rpx',
|
||||
'--spacing-colBase': '16rpx',
|
||||
'--spacing-colLg': '24rpx',
|
||||
|
||||
/* 透明度 */
|
||||
'--opacity-disabled': '0.3', // 组件禁用态的透明度
|
||||
},
|
||||
dark: {
|
||||
/* dark */
|
||||
|
||||
/* 颜色 */
|
||||
'--colors-primary': '#123',
|
||||
'--colors-secondary': '#5A7767', // 次要
|
||||
'--colors-accent': '#FB9300', // 强调
|
||||
|
||||
'--colors-success': '#4cd964',
|
||||
'--colors-warning': '#f0ad4e',
|
||||
'--colors-error': '#dd524d',
|
||||
'--colors-disable': '#ddd',
|
||||
'--colors-danger': '#FF6843',
|
||||
'--colors-mark': 'rgba(26, 26, 26,0.4)',
|
||||
|
||||
/* 文章场景相关 */
|
||||
'--colors-title': '#2c405a', // 文章标题颜色
|
||||
'--colors-subtitle': '#555555', // 二级标题颜色
|
||||
'--colors-paragraph': '#3f536e', // 文章段落颜色
|
||||
|
||||
/* 文字基本颜色 */
|
||||
'--colors-fontColorblack': '#333', // 基本色 - 不切换
|
||||
'--colors-fontColorPrimary': '#999', // 基本色
|
||||
'--colors-fontColorInverse': '#333', // 反色
|
||||
'--colors-fontColorGrey': '#666', // 辅助灰色，如加载更多的提示信息
|
||||
'--colors-fontColorPlaceholder': '#808080',
|
||||
'--colors-fontColorDisable': '#c0c0c0',
|
||||
'--colors-fontColorBottomText': '#6F6E80', // 底部tabbar文字颜色
|
||||
|
||||
/* 背景颜色 */
|
||||
'--colors-container': '#000000',
|
||||
'--colors-page': '#191919',
|
||||
'--colors-containerInverse': '#ffffff', // 背景反色
|
||||
'--colors-containerHover': 'rgba(255, 226, 116, .5)', // 点击状态颜色
|
||||
'--colors-secondaryHover': 'rgba(90,119,103, .5)', // 点击状态颜色
|
||||
'--colors-containerMask': 'rgba(0, 0, 0, 0.4)', // 遮罩颜色
|
||||
'--colors-iconButton': '#808080', // ICON 按钮背景色
|
||||
|
||||
/* 边框颜色 */
|
||||
'--colors-borderColor': '#c8c7cc',
|
||||
|
||||
/* 文字尺寸 */
|
||||
'--fontSize-sm': '24rpx',
|
||||
'--fontSize-base': '28rpx',
|
||||
'--fontSize-lg': '32rpx',
|
||||
|
||||
/* 文章场景相关 */
|
||||
'--fontSize-title': '40rpx',
|
||||
'--fontSize-subtitle': '36rpx',
|
||||
'--fontSize-paragraph': '32rpx',
|
||||
|
||||
/* Border Radius */
|
||||
'--borderRadius-sm': '4rpx',
|
||||
'--borderRadius-base': '6rpx',
|
||||
'--borderRadius-lg': '12rpx',
|
||||
'--borderRadius-circle': '50%',
|
||||
|
||||
/* 水平间距 */
|
||||
'--spacing-rowSm': '12px',
|
||||
'--spacing-rowBase': '24rpx',
|
||||
'--spacing-rowLg': '32rpx',
|
||||
|
||||
/* 垂直间距 */
|
||||
'--spacing-colSm': '8rpx',
|
||||
'--spacing-colBase': '16rpx',
|
||||
'--spacing-colLg': '24rpx',
|
||||
|
||||
/* 透明度 */
|
||||
'--opacity-disabled': '0.3', // 组件禁用态的透明度
|
||||
},
|
||||
};
|
||||
|
||||
enum ExtendStyle {
|
||||
SPACING = 'spacing',
|
||||
// BORDERRADIUS = 'borderRadius' ,
|
||||
// FONTSIZE = 'fontSize',
|
||||
OPACITY = 'opacity',
|
||||
}
|
||||
|
||||
// 构建 theme
|
||||
export function buildTheme() {
|
||||
const spacing = {
|
||||
0: '0px',
|
||||
};
|
||||
|
||||
let i = 0;
|
||||
|
||||
while (i <= 750) {
|
||||
spacing[`${i}px`] = `${i}px`;
|
||||
spacing[`${i}rpx`] = `${i}rpx`;
|
||||
i++;
|
||||
}
|
||||
|
||||
const _theme: any = {
|
||||
extend: {
|
||||
// spacing,
|
||||
},
|
||||
};
|
||||
|
||||
const flattenedObj: Map<string, any> = new Map([]);
|
||||
for (const [_, themeItem] of Object.entries(theme)) {
|
||||
for (const [key, _] of Object.entries(themeItem)) {
|
||||
flattenedObj.set(key, _);
|
||||
}
|
||||
}
|
||||
|
||||
const extendList = [ExtendStyle.OPACITY];
|
||||
|
||||
flattenedObj.forEach((_v: string, k: string) => {
|
||||
const [_, key, value] = k.match(/^--([^-]+)-(.+)$/) || [0, 'key', 'value'];
|
||||
|
||||
if (extendList.includes(key as ExtendStyle)) {
|
||||
if (!_theme.extend[key]) {
|
||||
_theme.extend[key] = {};
|
||||
}
|
||||
_theme.extend[key][value] = `var(${k})`;
|
||||
} else {
|
||||
if (!_theme[key]) {
|
||||
_theme[key] = {};
|
||||
}
|
||||
_theme[key][value] = `var(${k})`;
|
||||
}
|
||||
});
|
||||
// console.log('_theme ===>>>', _theme);
|
||||
return _theme;
|
||||
}
|
||||
242
src/theme/vars.ts
Normal file
242
src/theme/vars.ts
Normal file
@ -0,0 +1,242 @@
|
||||
/**
|
||||
* ## File: /src/theme/vars.ts
|
||||
*
|
||||
* Project: uniapp_vue3_vite_ts
|
||||
*
|
||||
* Created Date: 2024-09-19 20:54:62
|
||||
*
|
||||
* Author: KuroSago
|
||||
*
|
||||
* ## Last Modified: 2024-09-19 20:54:62
|
||||
*
|
||||
* Modified By: KuroSago
|
||||
*
|
||||
* ## Copyright (c) 2024 self.
|
||||
*
|
||||
* Use To:
|
||||
*/
|
||||
import type { MD3ColorSchemeTokens, MD3Palettes } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
|
||||
const palette: MD3Palettes = {
|
||||
primary: {
|
||||
0: 'var(--primary-0)',
|
||||
10: 'var(--primary-10)',
|
||||
20: 'var(--primary-20)',
|
||||
30: 'var(--primary-30)',
|
||||
40: 'var(--primary-40)',
|
||||
50: 'var(--primary-50)',
|
||||
60: 'var(--primary-60)',
|
||||
70: 'var(--primary-70)',
|
||||
80: 'var(--primary-80)',
|
||||
90: 'var(--primary-90)',
|
||||
95: 'var(--primary-95)',
|
||||
99: 'var(--primary-99)',
|
||||
100: 'var(--primary-100)',
|
||||
},
|
||||
secondary: {
|
||||
0: 'var(--secondary-0)',
|
||||
10: 'var(--secondary-10)',
|
||||
20: 'var(--secondary-20)',
|
||||
30: 'var(--secondary-30)',
|
||||
40: 'var(--secondary-40)',
|
||||
50: 'var(--secondary-50)',
|
||||
60: 'var(--secondary-60)',
|
||||
70: 'var(--secondary-70)',
|
||||
80: 'var(--secondary-80)',
|
||||
90: 'var(--secondary-90)',
|
||||
95: 'var(--secondary-95)',
|
||||
99: 'var(--secondary-99)',
|
||||
100: 'var(--secondary-100)',
|
||||
},
|
||||
tertiary: {
|
||||
0: 'var(--tertiary-0)',
|
||||
10: 'var(--tertiary-10)',
|
||||
20: 'var(--tertiary-20)',
|
||||
30: 'var(--tertiary-30)',
|
||||
40: 'var(--tertiary-40)',
|
||||
50: 'var(--tertiary-50)',
|
||||
60: 'var(--tertiary-60)',
|
||||
70: 'var(--tertiary-70)',
|
||||
80: 'var(--tertiary-80)',
|
||||
90: 'var(--tertiary-90)',
|
||||
95: 'var(--tertiary-95)',
|
||||
99: 'var(--tertiary-99)',
|
||||
100: 'var(--tertiary-100)',
|
||||
},
|
||||
error: {
|
||||
0: 'var(--error-0)',
|
||||
10: 'var(--error-10)',
|
||||
20: 'var(--error-20)',
|
||||
30: 'var(--error-30)',
|
||||
40: 'var(--error-40)',
|
||||
50: 'var(--error-50)',
|
||||
60: 'var(--error-60)',
|
||||
70: 'var(--error-70)',
|
||||
80: 'var(--error-80)',
|
||||
90: 'var(--error-90)',
|
||||
95: 'var(--error-95)',
|
||||
99: 'var(--error-99)',
|
||||
100: 'var(--error-100)',
|
||||
},
|
||||
info: {
|
||||
0: 'var(--info-0)',
|
||||
10: 'var(--info-10)',
|
||||
20: 'var(--info-20)',
|
||||
30: 'var(--info-30)',
|
||||
40: 'var(--info-40)',
|
||||
50: 'var(--info-50)',
|
||||
60: 'var(--info-60)',
|
||||
70: 'var(--info-70)',
|
||||
80: 'var(--info-80)',
|
||||
90: 'var(--info-90)',
|
||||
95: 'var(--info-95)',
|
||||
99: 'var(--info-99)',
|
||||
100: 'var(--info-100)',
|
||||
},
|
||||
warning: {
|
||||
0: 'var(--warning-0)',
|
||||
10: 'var(--warning-10)',
|
||||
20: 'var(--warning-20)',
|
||||
30: 'var(--warning-30)',
|
||||
40: 'var(--warning-40)',
|
||||
50: 'var(--warning-50)',
|
||||
60: 'var(--warning-60)',
|
||||
70: 'var(--warning-70)',
|
||||
80: 'var(--warning-80)',
|
||||
90: 'var(--warning-90)',
|
||||
95: 'var(--warning-95)',
|
||||
99: 'var(--warning-99)',
|
||||
100: 'var(--warning-100)',
|
||||
},
|
||||
success: {
|
||||
0: 'var(--success-0)',
|
||||
10: 'var(--success-10)',
|
||||
20: 'var(--success-20)',
|
||||
30: 'var(--success-30)',
|
||||
40: 'var(--success-40)',
|
||||
50: 'var(--success-50)',
|
||||
60: 'var(--success-60)',
|
||||
70: 'var(--success-70)',
|
||||
80: 'var(--success-80)',
|
||||
90: 'var(--success-90)',
|
||||
95: 'var(--success-95)',
|
||||
99: 'var(--success-99)',
|
||||
100: 'var(--success-100)',
|
||||
},
|
||||
neutral: {
|
||||
0: 'var(--neutral-0)',
|
||||
4: 'var(--neutral-4)',
|
||||
6: 'var(--neutral-6)',
|
||||
10: 'var(--neutral-10)',
|
||||
12: 'var(--neutral-12)',
|
||||
17: 'var(--neutral-17)',
|
||||
20: 'var(--neutral-20)',
|
||||
22: 'var(--neutral-22)',
|
||||
24: 'var(--neutral-24)',
|
||||
30: 'var(--neutral-30)',
|
||||
40: 'var(--neutral-40)',
|
||||
50: 'var(--neutral-50)',
|
||||
60: 'var(--neutral-60)',
|
||||
70: 'var(--neutral-70)',
|
||||
80: 'var(--neutral-80)',
|
||||
90: 'var(--neutral-90)',
|
||||
92: 'var(--neutral-92)',
|
||||
94: 'var(--neutral-94)',
|
||||
95: 'var(--neutral-95)',
|
||||
96: 'var(--neutral-96)',
|
||||
98: 'var(--neutral-98)',
|
||||
99: 'var(--neutral-99)',
|
||||
100: 'var(--neutral-100)',
|
||||
},
|
||||
neutralVariant: {
|
||||
0: 'var(--neutralVariant-0)',
|
||||
10: 'var(--neutralVariant-10)',
|
||||
20: 'var(--neutralVariant-20)',
|
||||
30: 'var(--neutralVariant-30)',
|
||||
40: 'var(--neutralVariant-40)',
|
||||
50: 'var(--neutralVariant-50)',
|
||||
60: 'var(--neutralVariant-60)',
|
||||
70: 'var(--neutralVariant-70)',
|
||||
80: 'var(--neutralVariant-80)',
|
||||
90: 'var(--neutralVariant-90)',
|
||||
95: 'var(--neutralVariant-95)',
|
||||
99: 'var(--neutralVariant-99)',
|
||||
100: 'var(--neutralVariant-100)',
|
||||
},
|
||||
common: {
|
||||
white: 'var(--common-white)',
|
||||
black: 'var(--common-black)',
|
||||
},
|
||||
};
|
||||
|
||||
const scheme: MD3ColorSchemeTokens = {
|
||||
primary: 'var(--primary)',
|
||||
onPrimary: 'var(--onPrimary)',
|
||||
primaryContainer: 'var(--primaryContainer)',
|
||||
onPrimaryContainer: 'var(--onPrimaryContainer)',
|
||||
secondary: 'var(--secondary)',
|
||||
onSecondary: 'var(--onSecondary)',
|
||||
secondaryContainer: 'var(--secondaryContainer)',
|
||||
onSecondaryContainer: 'var(--onSecondaryContainer)',
|
||||
tertiary: 'var(--tertiary)',
|
||||
onTertiary: 'var(--onTertiary)',
|
||||
tertiaryContainer: 'var(--tertiaryContainer)',
|
||||
onTertiaryContainer: 'var(--onTertiaryContainer)',
|
||||
error: 'var(--error)',
|
||||
onError: 'var(--onError)',
|
||||
errorContainer: 'var(--errorContainer)',
|
||||
onErrorContainer: 'var(--onErrorContainer)',
|
||||
info: 'var(--info)',
|
||||
onInfo: 'var(--onInfo)',
|
||||
infoContainer: 'var(--infoContainer)',
|
||||
onInfoContainer: 'var(--onInfoContainer)',
|
||||
warning: 'var(--warning)',
|
||||
onWarning: 'var(--onWarning)',
|
||||
warningContainer: 'var(--warningContainer)',
|
||||
onWarningContainer: 'var(--onWarningContainer)',
|
||||
success: 'var(--success)',
|
||||
onSuccess: 'var(--onSuccess)',
|
||||
successContainer: 'var(--successContainer)',
|
||||
onSuccessContainer: 'var(--onSuccessContainer)',
|
||||
surface: 'var(--surface)',
|
||||
onSurface: 'var(--onSurface)',
|
||||
surfaceVariant: 'var(--surfaceVariant)',
|
||||
onSurfaceVariant: 'var(--onSurfaceVariant)',
|
||||
surfaceContainerLowest: 'var(--surfaceContainerLowest)',
|
||||
surfaceContainerLow: 'var(--surfaceContainerLow)',
|
||||
surfaceContainer: 'var(--surfaceContainer)',
|
||||
surfaceContainerHigh: 'var(--surfaceContainerHigh)',
|
||||
surfaceContainerHighest: 'var(--surfaceContainerHighest)',
|
||||
surfaceTint: 'var(--surfaceTint)',
|
||||
outline: 'var(--outline)',
|
||||
outlineVariant: 'var(--outlineVariant)',
|
||||
shadow: 'var(--shadow)',
|
||||
background: 'var(--background)',
|
||||
onBackground: 'var(--onBackground)',
|
||||
inversePrimary: 'var(--inversePrimary)',
|
||||
inverseSurface: 'var(--inverseSurface)',
|
||||
inverseOnSurface: 'var(--inverseOnSurface)',
|
||||
};
|
||||
|
||||
// 拉平色板 palette 为 tokens
|
||||
export function getPaletteTokens() {
|
||||
const paletteTokens: Record<string, string> = {};
|
||||
for (const [key, value] of Object.entries(palette)) {
|
||||
for (const [subKey, subValue] of Object.entries(value as Record<string, string>)) {
|
||||
paletteTokens[`${key}-${subKey}`] = subValue;
|
||||
}
|
||||
}
|
||||
return paletteTokens;
|
||||
}
|
||||
|
||||
export function themeVars() {
|
||||
const paletteTokens = getPaletteTokens();
|
||||
const colors = {
|
||||
...paletteTokens,
|
||||
...scheme,
|
||||
};
|
||||
// console.log('colors', colors);
|
||||
return {
|
||||
colors,
|
||||
};
|
||||
};
|
||||
2
src/typings/components.d.ts
vendored
2
src/typings/components.d.ts
vendored
@ -11,6 +11,6 @@ declare module 'vue' {
|
||||
BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
'svg-icon': typeof import('./../components/SvgIcon/index.vue')['default']
|
||||
SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
157
unocss.config.ts
157
unocss.config.ts
@ -1,78 +1,81 @@
|
||||
/**
|
||||
* unocss defineConfig
|
||||
* @link unocss: https://github.com/unocss/unocss
|
||||
* @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* unocss defineConfig
|
||||
* @link unocss: https://github.com/unocss/unocss
|
||||
* @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
|
||||
* */
|
||||
|
||||
import { defineConfig, presetIcons } from 'unocss';
|
||||
import presetWeapp from 'unocss-preset-weapp';
|
||||
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
|
||||
import transformerDirectives from '@unocss/transformer-directives';
|
||||
|
||||
const transformRules = {
|
||||
'.': '-d111-',
|
||||
'/': '-s111-',
|
||||
':': '-c111-',
|
||||
'%': '-p111-',
|
||||
'!': '-e111-',
|
||||
'#': '-w111-',
|
||||
'(': '-b111l-',
|
||||
')': '-b111r-',
|
||||
'[': '-f111l-',
|
||||
']': '-f111r-',
|
||||
$: '-r111-',
|
||||
',': '-r222-',
|
||||
};
|
||||
|
||||
const prefix = '';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
// https://github.com/MellowCo/unocss-preset-weapp
|
||||
presetWeapp({
|
||||
nonValuedAttribute: true,
|
||||
prefix: prefix,
|
||||
whRpx: true,
|
||||
transform: true,
|
||||
platform: 'uniapp',
|
||||
transformRules,
|
||||
}),
|
||||
// 由 Iconify 提供支持的纯 CSS 图标解决方案
|
||||
presetIcons({
|
||||
scale: 1,
|
||||
warn: true,
|
||||
extraProperties: {
|
||||
'display': 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
},
|
||||
}),
|
||||
],
|
||||
// transformers: [transformerDirectives()],
|
||||
// attributify: false,
|
||||
shortcuts: [
|
||||
{
|
||||
'border-base': 'border border-gray-500_10',
|
||||
'z-tar-both': 'z-988',
|
||||
'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
|
||||
center: 'flex justify-center items-center',
|
||||
},
|
||||
],
|
||||
theme: {"extend":{"opacity":{"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)"},"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)"}},
|
||||
transformers: [
|
||||
transformerDirectives({
|
||||
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
|
||||
enforce: 'pre'
|
||||
}),
|
||||
transformerAttributify({
|
||||
classPrefix: prefix,
|
||||
transformRules,
|
||||
nonValuedAttribute: true,
|
||||
}),
|
||||
transformerClass({
|
||||
transformRules,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
import { defineConfig, presetIcons } from 'unocss';
|
||||
import presetWeapp from 'unocss-preset-weapp';
|
||||
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
|
||||
import transformerDirectives from '@unocss/transformer-directives';
|
||||
import { themeVars } from './src/theme/vars';
|
||||
|
||||
const transformRules = {
|
||||
'.': '-d111-',
|
||||
'/': '-s111-',
|
||||
':': '-c111-',
|
||||
'%': '-p111-',
|
||||
'!': '-e111-',
|
||||
'#': '-w111-',
|
||||
'(': '-b111l-',
|
||||
')': '-b111r-',
|
||||
'[': '-f111l-',
|
||||
']': '-f111r-',
|
||||
'$': '-r111-',
|
||||
',': '-r222-',
|
||||
};
|
||||
|
||||
const prefix = '';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
// https://github.com/MellowCo/unocss-preset-weapp
|
||||
presetWeapp({
|
||||
nonValuedAttribute: true,
|
||||
prefix,
|
||||
whRpx: true,
|
||||
transform: true,
|
||||
platform: 'uniapp',
|
||||
transformRules,
|
||||
}),
|
||||
// 由 Iconify 提供支持的纯 CSS 图标解决方案
|
||||
presetIcons({
|
||||
scale: 1,
|
||||
warn: true,
|
||||
extraProperties: {
|
||||
'display': 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
},
|
||||
}),
|
||||
],
|
||||
// transformers: [transformerDirectives()],
|
||||
// attributify: false,
|
||||
shortcuts: [
|
||||
{
|
||||
'border-base': 'border border-gray-500_10',
|
||||
'z-tar-both': 'z-988',
|
||||
'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
|
||||
'center': 'flex justify-center items-center',
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
extend: { opacity: { disabled: 'var(--opacity-disabled)' } },
|
||||
...themeVars(),
|
||||
},
|
||||
|
||||
transformers:
|
||||
[
|
||||
transformerDirectives({
|
||||
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
|
||||
enforce: 'pre',
|
||||
}),
|
||||
transformerAttributify({
|
||||
classPrefix: prefix,
|
||||
transformRules,
|
||||
nonValuedAttribute: true,
|
||||
}),
|
||||
transformerClass({
|
||||
transformRules,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
import * as fs from 'node:fs';
|
||||
import { buildTheme } from '../../src/theme/theme';
|
||||
|
||||
export default function buildThemeConfig() {
|
||||
const fileName = './unocss.config.ts';
|
||||
const _data = buildTheme();
|
||||
// 写入时会先清空文件
|
||||
fs.writeFile(fileName, `${createFileByTemplate(_data)}`, (err: any) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
} else {
|
||||
// console.log('构建 css 提示文件完成');
|
||||
console.table(flatten(_data));
|
||||
}
|
||||
});
|
||||
|
||||
// 写完文件后使用编辑器格式化一下
|
||||
}
|
||||
|
||||
function flatten(obj: any, parentKey = ''): any {
|
||||
let result: any = {};
|
||||
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
const newKey = parentKey ? `${parentKey}.${key}` : key;
|
||||
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
const flattened = flatten(value, newKey);
|
||||
result = { ...result, ...flattened };
|
||||
} else {
|
||||
result[newKey] = value;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 通过模版生成文件
|
||||
function createFileByTemplate(theme: any) {
|
||||
const file_string = `
|
||||
|
||||
/**
|
||||
* unocss defineConfig
|
||||
* @link unocss: https://github.com/unocss/unocss
|
||||
* @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
|
||||
* */
|
||||
|
||||
import { defineConfig, presetIcons } from 'unocss';
|
||||
import presetWeapp from 'unocss-preset-weapp';
|
||||
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
|
||||
import transformerDirectives from '@unocss/transformer-directives';
|
||||
|
||||
const transformRules = {
|
||||
'.': '-d111-',
|
||||
'/': '-s111-',
|
||||
':': '-c111-',
|
||||
'%': '-p111-',
|
||||
'!': '-e111-',
|
||||
'#': '-w111-',
|
||||
'(': '-b111l-',
|
||||
')': '-b111r-',
|
||||
'[': '-f111l-',
|
||||
']': '-f111r-',
|
||||
$: '-r111-',
|
||||
',': '-r222-',
|
||||
};
|
||||
|
||||
const prefix = '';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
// https://github.com/MellowCo/unocss-preset-weapp
|
||||
presetWeapp({
|
||||
nonValuedAttribute: true,
|
||||
prefix: prefix,
|
||||
whRpx: true,
|
||||
transform: true,
|
||||
platform: 'uniapp',
|
||||
transformRules,
|
||||
}),
|
||||
// 由 Iconify 提供支持的纯 CSS 图标解决方案
|
||||
presetIcons({
|
||||
scale: 1,
|
||||
warn: true,
|
||||
extraProperties: {
|
||||
'display': 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
},
|
||||
}),
|
||||
],
|
||||
// transformers: [transformerDirectives()],
|
||||
// attributify: false,
|
||||
shortcuts: [
|
||||
{
|
||||
'border-base': 'border border-gray-500_10',
|
||||
'z-tar-both': 'z-988',
|
||||
'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
|
||||
center: 'flex justify-center items-center',
|
||||
},
|
||||
],
|
||||
theme: ${JSON.stringify(theme)},
|
||||
transformers: [
|
||||
transformerDirectives({
|
||||
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
|
||||
enforce: 'pre'
|
||||
}),
|
||||
transformerAttributify({
|
||||
classPrefix: prefix,
|
||||
transformRules,
|
||||
nonValuedAttribute: true,
|
||||
}),
|
||||
transformerClass({
|
||||
transformRules,
|
||||
}),
|
||||
],
|
||||
});
|
||||
`;
|
||||
|
||||
return file_string;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import appProvider from './appProvider';
|
||||
import buildThemeConfig from './build.unocss.config';
|
||||
import createComponents from './components';
|
||||
|
||||
export { appProvider, buildThemeConfig, createComponents };
|
||||
export { appProvider, createComponents };
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user