yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimize interface color matching

pull/48/MERGE
vince 2024-07-15 23:22:00 +08:00
parent b12266bb90
commit caf1fc4375
27 changed files with 270 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
internal/tailwind-config/src/index.ts
View File

@ -24,30 +24,86 @@ packages.forEach((pkg) => {
} }
}); });
function createColorsPattern(name: string) { const shadcnUiColors = {
return { accent: {
100: `hsl(var(--${name}-100))`, DEFAULT: 'hsl(var(--accent))',
200: `hsl(var(--${name}-200))`, foreground: 'hsl(var(--accent-foreground))',
300: `hsl(var(--${name}-300))`, hover: 'hsl(var(--accent-hover))',
400: `hsl(var(--${name}-400))`, },
500: `hsl(var(--${name}-500))`, background: {
600: `hsl(var(--${name}-600))`, DEFAULT: 'hsl(var(--background))',
700: `hsl(var(--${name}-700))`, content: 'hsl(var(--background-content))',
800: `hsl(var(--${name}-800))`, },
900: `hsl(var(--${name}-900))`, border: 'hsl(var(--border))',
1000: `hsl(var(--${name}-1000))`, card: {
active: `hsl(var(--${name}-700))`, DEFAULT: 'hsl(var(--card))',
background: `hsl(var(--${name}-100))`, foreground: 'hsl(var(--card-foreground))',
'background-hover': `hsl(var(--${name}-200))`, },
border: `hsl(var(--${name}-300))`, destructive: {
'border-hover': `hsl(var(--${name}-400))`, ...createColorsPattern('destructive'),
foreground: `hsl(var(--${name}-foreground))`, DEFAULT: 'hsl(var(--destructive))',
hover: `hsl(var(--${name}-500))`, },
text: `hsl(var(--${name}-900))`,
'text-active': `hsl(var(--${name}-1000))`, foreground: 'hsl(var(--foreground))',
'text-hover': `hsl(var(--${name}-800))`,
}; input: {
} DEFAULT: 'hsl(var(--input))',
background: 'hsl(var(--input-background))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
...createColorsPattern('primary'),
DEFAULT: 'hsl(var(--primary))',
},
ring: 'hsl(var(--ring))',
secondary: {
DEFAULT: 'hsl(var(--secondary))',
desc: 'hsl(var(--secondary-desc))',
foreground: 'hsl(var(--secondary-foreground))',
},
};
const customColors = {
authentication: {
DEFAULT: 'hsl(var(--authentication))',
},
green: {
...createColorsPattern('green'),
foreground: 'hsl(var(--success-foreground))',
},
heavy: {
DEFAULT: 'hsl(var(--heavy))',
foreground: 'hsl(var(--heavy-foreground))',
},
main: {
DEFAULT: 'hsl(var(--main))',
},
overlay: 'hsl(var(--overlay))',
red: {
...createColorsPattern('red'),
foreground: 'hsl(var(--destructive-foreground))',
},
success: {
...createColorsPattern('success'),
DEFAULT: 'hsl(var(--success))',
},
warning: {
...createColorsPattern('warning'),
DEFAULT: 'hsl(var(--warning))',
},
yellow: {
...createColorsPattern('yellow'),
foreground: 'hsl(var(--warning-foreground))',
},
};
export default { export default {
content: [ content: [
@ -93,71 +149,8 @@ export default {
xl: 'calc(var(--radius) + 4px)', xl: 'calc(var(--radius) + 4px)',
}, },
colors: { colors: {
accent: { ...customColors,
DEFAULT: 'hsl(var(--accent))', ...shadcnUiColors,
foreground: 'hsl(var(--accent-foreground))',
hover: 'hsl(var(--accent-hover))',
},
authentication: 'hsl(var(--authentication))',
background: 'hsl(var(--background))',
border: 'hsl(var(--border))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
destructive: {
...createColorsPattern('destructive'),
DEFAULT: 'hsl(var(--destructive))',
},
foreground: 'hsl(var(--foreground))',
green: {
...createColorsPattern('green'),
foreground: 'hsl(var(--success-foreground))',
},
heavy: {
DEFAULT: 'hsl(var(--heavy))',
foreground: 'hsl(var(--heavy-foreground))',
},
input: {
DEFAULT: 'hsl(var(--input))',
background: 'hsl(var(--input-background))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
overlay: 'hsl(var(--overlay))',
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
...createColorsPattern('primary'),
DEFAULT: 'hsl(var(--primary))',
},
red: {
...createColorsPattern('red'),
foreground: 'hsl(var(--destructive-foreground))',
},
ring: 'hsl(var(--ring))',
secondary: {
DEFAULT: 'hsl(var(--secondary))',
desc: 'hsl(var(--secondary-desc))',
foreground: 'hsl(var(--secondary-foreground))',
},
success: {
...createColorsPattern('success'),
DEFAULT: 'hsl(var(--success))',
},
warning: {
...createColorsPattern('warning'),
DEFAULT: 'hsl(var(--warning))',
},
yellow: {
...createColorsPattern('yellow'),
foreground: 'hsl(var(--warning-foreground))',
},
}, },
fontFamily: { fontFamily: {
sans: [ sans: [
@ -195,3 +188,29 @@ export default {
}, },
}, },
} as Config; } as Config;
function createColorsPattern(name: string) {
return {
50: `hsl(var(--${name}-50))`,
100: `hsl(var(--${name}-100))`,
200: `hsl(var(--${name}-200))`,
300: `hsl(var(--${name}-300))`,
400: `hsl(var(--${name}-400))`,
500: `hsl(var(--${name}-500))`,
600: `hsl(var(--${name}-600))`,
700: `hsl(var(--${name}-700))`,
800: `hsl(var(--${name}-800))`,
900: `hsl(var(--${name}-900))`,
950: `hsl(var(--${name}-950))`,
active: `hsl(var(--${name}-600))`,
background: `hsl(var(--${name}-50))`,
'background-hover': `hsl(var(--${name}-100))`,
border: `hsl(var(--${name}-200))`,
'border-hover': `hsl(var(--${name}-300))`,
foreground: `hsl(var(--${name}-foreground))`,
hover: `hsl(var(--${name}-400))`,
text: `hsl(var(--${name}-800))`,
'text-active': `hsl(var(--${name}-900))`,
'text-hover': `hsl(var(--${name}-700))`,
};
}

1
package.json
View File

@ -84,7 +84,6 @@
"packageManager": "pnpm@9.5.0", "packageManager": "pnpm@9.5.0",
"pnpm": { "pnpm": {
"overrides": { "overrides": {
"@ant-design/colors": "^7.1.0",
"@ctrl/tinycolor": "^4.1.0", "@ctrl/tinycolor": "^4.1.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"eslint": "^8.57.0", "eslint": "^8.57.0",

2
packages/@core/forward/preferences/src/config.ts
View File

@ -79,7 +79,7 @@ const defaultPreferences: Preferences = {
theme: { theme: {
builtinType: 'default', builtinType: 'default',
colorDestructive: 'hsl(348 100% 61%)', colorDestructive: 'hsl(348 100% 61%)',
colorPrimary: 'hsl(245 82% 67%)', colorPrimary: 'hsl(231 98% 65%)',
colorSuccess: 'hsl(144 57% 58%)', colorSuccess: 'hsl(144 57% 58%)',
colorWarning: 'hsl(42 84% 61%)', colorWarning: 'hsl(42 84% 61%)',
mode: 'dark', mode: 'dark',

4
packages/@core/forward/preferences/src/constants.ts
View File

@ -31,11 +31,11 @@ const SUPPORT_LANGUAGES: Language[] = [
const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
{ {
color: 'hsl(245 82% 67%)', color: 'hsl(231 98% 65%)',
type: 'default', type: 'default',
}, },
{ {
color: 'hsl(231 98% 65%)', color: 'hsl(245 82% 67%)',
type: 'violet', type: 'violet',
}, },
{ {

2
packages/@core/forward/preferences/src/preferences.test.ts
View File

@ -25,7 +25,7 @@ describe('preferences', () => {
}); });
it('initPreferences should initialize preferences with overrides and namespace', async () => { it('initPreferences should initialize preferences with overrides and namespace', async () => {
const overrides = { theme: { colorPrimary: 'hsl(245 82% 67%)' } }; const overrides = { theme: { colorPrimary: 'hsl(231 98% 65%)' } };
const namespace = 'testNamespace'; const namespace = 'testNamespace';
await preferenceManager.initPreferences({ namespace, overrides }); await preferenceManager.initPreferences({ namespace, overrides });

26
packages/@core/shared/design/src/design-tokens/dark/index.css
View File

@ -2,17 +2,20 @@
:root.dark[data-theme='custom'], :root.dark[data-theme='custom'],
:root.dark[data-theme='default'] { :root.dark[data-theme='default'] {
/* Default background color of <body />...etc */ /* Default background color of <body />...etc */
--background: 220deg 13.04% 8%; --background: 222.34deg 10.43% 12.27%;
/* 主体区域背景色 */
--background-content: 220deg 13.06% 9%;
--foreground: 220 13% 91%; --foreground: 220 13% 91%;
/* Background color for <Card /> */ /* Background color for <Card /> */
--card: 222.86deg 8.43% 16.27%; --card: 222.34deg 10.43% 12.27%;
/* --card: 222.2 84% 4.9%; */ /* --card: 222.2 84% 4.9%; */
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */ /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 222.86deg 8.43% 16.27%; --popover: 222.82deg 8.43% 16.27%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */ /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
@ -53,7 +56,7 @@
--heavy-foreground: var(--accent-foreground); --heavy-foreground: var(--accent-foreground);
/* Default border color */ /* Default border color */
--border: 0deg 0% 100% / 10%; --border: 215 27.9% 16.9%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */ /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%; --input: 0deg 0% 100% / 10%;
@ -63,20 +66,25 @@
/* Used for focus ring */ /* Used for focus ring */
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
/* 基本圆角大小 */
--radius: 0.5rem;
/* ============= Custom ============= */
/* 遮罩颜色 */ /* 遮罩颜色 */
--overlay: 0deg 0% 0% / 40%; --overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */ /* 基本文字大小 */
--font-size-base: 16px; --font-size-base: 16px;
/* 基本圆角大小 */ /* 主体内容背景色 */
--radius: 0.5rem; --content: 240 11% 96%;
/* 登录背景色 */
--authentication: 220deg 13.06% 3.04%;
/* =============component & UI============= */ /* =============component & UI============= */
/* authentication */
--authentication: 240deg 11% 2%;
color-scheme: dark; color-scheme: dark;
} }

54
packages/@core/shared/design/src/design-tokens/default/index.css
View File

@ -5,7 +5,10 @@
'Segoe UI Symbol'; 'Segoe UI Symbol';
/* Default background color of <body />...etc */ /* Default background color of <body />...etc */
--background: 0 0% 100%; --background: 0 0 100%;
/* 主体区域背景色 */
--background-content: 210 11.11% 96.47%;
--foreground: 210 6% 21%; --foreground: 210 6% 21%;
/* Background color for <Card /> */ /* Background color for <Card /> */
@ -55,7 +58,7 @@
--heavy-foreground: var(--accent-foreground); --heavy-foreground: var(--accent-foreground);
/* Default border color */ /* Default border color */
--border: 240 6% 90%; --border: 240 5.9% 90%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */ /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%; --input: 240deg 5.88% 90%;
@ -65,14 +68,22 @@
/* Used for focus ring */ /* Used for focus ring */
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* ============= custom ============= */
/* 遮罩颜色 */ /* 遮罩颜色 */
--overlay: 0deg 0% 0% / 40%; --overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */ /* 基本文字大小 */
--font-size-base: 16px; --font-size-base: 16px;
/* Border radius for card, input and buttons */ /* 主体内容背景色 */
--radius: 0.5rem; --content: 240 11% 96%;
/* 登录背景色 */
--authentication: 231deg 61% 44%;
/* 用于浅色主题下一些暗色主题的颜色 */ /* 用于浅色主题下一些暗色主题的颜色 */
--dark-foreground: 220 13% 91%; --dark-foreground: 220 13% 91%;
@ -82,23 +93,20 @@
/* =============component & UI============= */ /* =============component & UI============= */
/* authentication */
--authentication: 231deg 61% 44%;
/* menu */ /* menu */
--menu: 0deg 0% 100%; --menu: 0deg 0% 100%;
--menu-darken: 0deg 0% 95%; --menu-deep: 0deg 0% 95%;
/* menu-dark */ /* menu-dark */
--menu-dark: 225deg 12% 13%; --menu-dark: 222.34deg 10.43% 12.27%;
--menu-dark-darken: 223deg 11% 10%; --menu-dark-deep: 223deg 11% 10%;
accent-color: var(--primary); accent-color: var(--primary);
color-scheme: light; color-scheme: light;
} }
:root[data-theme='violet'] { :root[data-theme='violet'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%; --card-foreground: 224 71.4% 4.1%;
@ -119,7 +127,7 @@
} }
:root[data-theme='pink'] { :root[data-theme='pink'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
@ -140,7 +148,7 @@
} }
:root[data-theme='rose'] { :root[data-theme='rose'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
@ -161,7 +169,7 @@
} }
:root[data-theme='sky-blue'] { :root[data-theme='sky-blue'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
@ -182,7 +190,7 @@
} }
:root[data-theme='deep-blue'] { :root[data-theme='deep-blue'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
@ -203,7 +211,7 @@
} }
:root[data-theme='green'] { :root[data-theme='green'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
@ -224,7 +232,7 @@
} }
:root[data-theme='deep-green'] { :root[data-theme='deep-green'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
@ -245,7 +253,7 @@
} }
:root[data-theme='orange'] { :root[data-theme='orange'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%; --card-foreground: 20 14.3% 4.1%;
@ -266,7 +274,7 @@
} }
:root[data-theme='yellow'] { :root[data-theme='yellow'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%; --card-foreground: 20 14.3% 4.1%;
@ -287,7 +295,7 @@
} }
:root[data-theme='zinc'] { :root[data-theme='zinc'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
@ -308,7 +316,7 @@
} }
:root[data-theme='neutral'] { :root[data-theme='neutral'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 0 0% 3.9%; --foreground: 0 0% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 0 0% 3.9%; --card-foreground: 0 0% 3.9%;
@ -329,7 +337,7 @@
} }
:root[data-theme='slate'] { :root[data-theme='slate'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
@ -350,7 +358,7 @@
} }
:root[data-theme='gray'] { :root[data-theme='gray'] {
--background: 0 0% 100%; /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%; --card-foreground: 224 71.4% 4.1%;

4
packages/@core/shared/toolkit/package.json
View File

@ -36,14 +36,14 @@
} }
}, },
"dependencies": { "dependencies": {
"@ant-design/colors": "^7.1.0",
"@ctrl/tinycolor": "^4.1.0", "@ctrl/tinycolor": "^4.1.0",
"@vue/shared": "^3.4.31", "@vue/shared": "^3.4.31",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"defu": "^6.1.4", "defu": "^6.1.4",
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"tailwind-merge": "^2.4.0" "tailwind-merge": "^2.4.0",
"theme-colors": "^0.1.0"
}, },
"devDependencies": { "devDependencies": {
"@types/lodash.clonedeep": "^4.5.9", "@types/lodash.clonedeep": "^4.5.9",

30
packages/@core/shared/toolkit/src/colorful/generator.ts
View File

@ -1,35 +1,34 @@
import { generate } from '@ant-design/colors'; import { TinyColor } from '@ctrl/tinycolor';
import { getColors } from 'theme-colors';
import { convertToHslCssVar } from './convert'; import { convertToHslCssVar } from './convert';
export * from '@ant-design/colors';
interface Opts {
backgroundColor?: string;
theme?: 'dark' | 'default';
}
interface ColorItem { interface ColorItem {
alias?: string; alias?: string;
color: string; color: string;
name: string; name: string;
} }
function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) { function generatorColorVariables(colorItems: ColorItem[]) {
const colorVariables: Record<string, string> = {}; const colorVariables: Record<string, string> = {};
colorItems.forEach(({ alias, color, name }) => { colorItems.forEach(({ alias, color, name }) => {
if (color) { if (color) {
const colors = generate(color, opts); const colorsMap = getColors(new TinyColor(color).toHexString());
let mainColor = colors[5]; let mainColor = colorsMap['500'];
colors.forEach((colorValue, colorIndex) => {
const colorKeys = Object.keys(colorsMap);
colorKeys.forEach((key) => {
const colorValue = colorsMap[key];
const hslColor = convertToHslCssVar(colorValue); const hslColor = convertToHslCssVar(colorValue);
colorVariables[`--${name}-${colorIndex + 1}00`] = hslColor; colorVariables[`--${name}-${key}`] = hslColor;
if (alias) { if (alias) {
colorVariables[`--${alias}-${colorIndex + 1}00`] = hslColor; colorVariables[`--${alias}-${key}`] = hslColor;
} }
if (colorIndex === 5) { if (key === '500') {
mainColor = hslColor; mainColor = hslColor;
} }
}); });
@ -38,7 +37,6 @@ function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
} }
} }
}); });
return colorVariables; return colorVariables;
} }

2
packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
View File

@ -99,7 +99,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<main ref="contentElement" :style="style"> <main ref="contentElement" :style="style" class="bg-background-content">
<slot></slot> <slot></slot>
</main> </main>
</template> </template>

13
packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
View File

@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
interface Props { interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/** /**
* 是否固定在顶部 * 是否固定在顶部
* @default true * @default true
@ -35,7 +31,6 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
fixed: true, fixed: true,
height: 32, height: 32,
show: true, show: true,
@ -44,9 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
}); });
const style = computed((): CSSProperties => { const style = computed((): CSSProperties => {
const { backgroundColor, fixed, height, show, width, zIndex } = props; const { fixed, height, show, width, zIndex } = props;
return { return {
backgroundColor,
height: `${height}px`, height: `${height}px`,
marginBottom: show ? '0' : `-${height}px`, marginBottom: show ? '0' : `-${height}px`,
position: fixed ? 'fixed' : 'static', position: fixed ? 'fixed' : 'static',
@ -57,7 +51,10 @@ const style = computed((): CSSProperties => {
</script> </script>
<template> <template>
<footer :style="style" class="bottom-0 w-full transition-all duration-200"> <footer
:style="style"
class="bg-background-content bottom-0 w-full transition-all duration-200"
>
<slot></slot> <slot></slot>
</footer> </footer>
</template> </template>

12
packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
View File

@ -6,11 +6,6 @@ import { IcRoundMenu } from '@vben-core/icons';
import { VbenIconButton } from '@vben-core/shadcn-ui'; import { VbenIconButton } from '@vben-core/shadcn-ui';
interface Props { interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/** /**
* 横屏 * 横屏
* @default false * @default false
@ -60,8 +55,6 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
// fixed: true,
height: 60, height: 60,
isMixedNav: false, isMixedNav: false,
show: true, show: true,
@ -76,12 +69,11 @@ const emit = defineEmits<{ openMenu: []; toggleSidebar: [] }>();
const slots = useSlots(); const slots = useSlots();
const style = computed((): CSSProperties => { const style = computed((): CSSProperties => {
const { backgroundColor, fullWidth, height, show } = props; const { fullWidth, height, show } = props;
const right = !show || !fullWidth ? undefined : 0; const right = !show || !fullWidth ? undefined : 0;
return { return {
// ...(props.isMixedNav ? { left: 0, position: `fixed` } : {}), // ...(props.isMixedNav ? { left: 0, position: `fixed` } : {}),
backgroundColor,
height: `${height}px`, height: `${height}px`,
marginTop: show ? 0 : `-${height}px`, marginTop: show ? 0 : `-${height}px`,
right, right,
@ -106,7 +98,7 @@ function handleToggleMenu() {
<template> <template>
<header <header
:style="style" :style="style"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200" class="border-border bg-background top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
> >
<div v-if="slots.logo" :style="logoStyle"> <div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot> <slot name="logo"></slot>

2
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@ -255,7 +255,7 @@ function handleMouseleave() {
></div> ></div>
<aside <aside
:style="style" :style="style"
class="fixed left-0 top-0 h-full transition-all duration-200" class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
> >

20
packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
View File

@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
interface Props { interface Props {
/**
* 背景颜色
*/
backgroundColor?: string;
/** /**
* 高度 * 高度
* @default 30 * @default 30
@ -15,29 +11,23 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--background))',
fixed: true, fixed: true,
height: 30, height: 30,
}); });
const hiddenStyle = computed((): CSSProperties => { const style = computed((): CSSProperties => {
const { height } = props; const { height } = props;
return { return {
height: `${height}px`, height: `${height}px`,
}; };
}); });
const style = computed((): CSSProperties => {
const { backgroundColor } = props;
return {
...hiddenStyle.value,
backgroundColor,
};
});
</script> </script>
<template> <template>
<section :style="style" class="border-border flex w-full"> <section
:style="style"
class="border-border bg-background flex w-full border-b"
>
<slot></slot> <slot></slot>
</section> </section>
</template> </template>

6
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@ -45,7 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
sidebarTheme: 'dark', sidebarTheme: 'dark',
sidebarWidth: 180, sidebarWidth: 180,
tabbarEnable: true, tabbarEnable: true,
tabbarHeight: 36, tabbarHeight: 38,
zIndex: 200, zIndex: 200,
}); });
@ -211,11 +211,11 @@ const sidebarFace = computed(() => {
if (isDark) { if (isDark) {
backgroundColor = isSidebarMixedNav.value backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-dark-darken))' ? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))'; : 'hsl(var(--menu-dark))';
} else { } else {
backgroundColor = isSidebarMixedNav.value backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--menu-darken))' ? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))'; : 'hsl(var(--menu))';
} }

4
packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenu.vue
View File

@ -3,7 +3,9 @@ import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';
import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'; import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';
const props = defineProps<ContextMenuRootProps>(); const props = withDefaults(defineProps<ContextMenuRootProps>(), {
modal: false,
});
const emits = defineEmits<ContextMenuRootEmits>(); const emits = defineEmits<ContextMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits); const forwarded = useForwardPropsEmits(props, emits);

4
packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenu.vue
View File

@ -6,7 +6,9 @@ import {
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue'; } from 'radix-vue';
const props = defineProps<DropdownMenuRootProps>(); const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
modal: false,
});
const emits = defineEmits<DropdownMenuRootEmits>(); const emits = defineEmits<DropdownMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits); const forwarded = useForwardPropsEmits(props, emits);

30
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@ -94,10 +94,7 @@ function handleUnpinTab(tab: TabConfig) {
</script> </script>
<template> <template>
<div <div :style="style" class="tabs-chrome size-full flex-1 overflow-hidden pt-1">
:style="style"
class="tabs-chrome bg-accent size-full flex-1 overflow-hidden pt-1"
>
<!-- footer -> 4px --> <!-- footer -> 4px -->
<div <div
ref="contentRef" ref="contentRef"
@ -130,7 +127,7 @@ function handleUnpinTab(tab: TabConfig) {
<!-- divider --> <!-- divider -->
<div <div
v-if="i !== 0" v-if="i !== 0"
class="tabs-chrome__divider bg-accent absolute left-[var(--gap)] top-1/2 z-0 h-5 w-[1px] translate-y-[-50%]" class="tabs-chrome__divider bg-foreground/80 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
></div> ></div>
<!-- background --> <!-- background -->
<div <div
@ -157,24 +154,27 @@ function handleUnpinTab(tab: TabConfig) {
<!-- extra --> <!-- extra -->
<div <div
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100" class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%]"
> >
<!-- <div
class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
> -->
<!-- close-icon --> <!-- close-icon -->
<IcRoundClose <IcRoundClose
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable" v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all" class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)" @click.stop="handleClose(tab.key)"
/> />
<MdiPin <MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable" v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all" class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)" @click.stop="handleUnpinTab(tab)"
/> />
</div> </div>
<!-- tab-item-main --> <!-- tab-item-main -->
<div <div
class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] duration-150 group-hover:pr-3" class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3 group-[.is-active]:font-semibold"
> >
<VbenIcon <VbenIcon
v-if="showIcon" v-if="showIcon"
@ -200,7 +200,7 @@ function handleUnpinTab(tab: TabConfig) {
</template> </template>
<style scoped> <style scoped>
html.dark { /* html.dark {
.tabs-chrome { .tabs-chrome {
.is-active { .is-active {
.tabs-chrome__item-main { .tabs-chrome__item-main {
@ -208,7 +208,7 @@ html.dark {
} }
} }
} }
} } */
.tabs-chrome { .tabs-chrome {
.dragging { .dragging {
@ -235,12 +235,12 @@ html.dark {
.tabs-chrome__background { .tabs-chrome__background {
&-content { &-content {
@apply bg-accent; @apply bg-heavy;
} }
&-before, &-before,
&-after { &-after {
@apply fill-accent; @apply fill-heavy;
} }
} }
} }
@ -252,12 +252,12 @@ html.dark {
@apply opacity-100; @apply opacity-100;
&-content { &-content {
@apply bg-background; @apply bg-background-content;
} }
&-before, &-before,
&-after { &-after {
@apply fill-background; @apply fill-background-content;
} }
} }
} }

22
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@ -29,7 +29,8 @@ const typeWithClass = computed(() => {
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100`, content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100`,
}, },
card: { card: {
content: 'h-[90%] rounded-md mr-1', content:
'h-[calc(100%-6px)] rounded-md mr-2 border-border [&.is-active]:border-primary border transition-all',
}, },
plain: { plain: {
content: 'h-full', content: 'h-full',
@ -64,7 +65,7 @@ function handleUnpinTab(tab: TabConfig) {
</script> </script>
<template> <template>
<div class="bg-accent h-full flex-1 overflow-hidden"> <div class="h-full flex-1 overflow-hidden">
<VbenScrollbar class="h-full" horizontal> <VbenScrollbar class="h-full" horizontal>
<div <div
:class="contentClass" :class="contentClass"
@ -76,7 +77,7 @@ function handleUnpinTab(tab: TabConfig) {
:key="tab.key" :key="tab.key"
:class="[ :class="[
{ {
'tabs-item is-active bg-background': tab.key === active, 'tabs-item is-active bg-background-content': tab.key === active,
dragable: !tab.affixTab, dragable: !tab.affixTab,
}, },
typeWithClass.content, typeWithClass.content,
@ -94,26 +95,29 @@ function handleUnpinTab(tab: TabConfig) {
<div class="relative flex size-full items-center"> <div class="relative flex size-full items-center">
<!-- extra --> <!-- extra -->
<div <div
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100" class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
> >
<!-- <div
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
> -->
<!-- close-icon --> <!-- close-icon -->
<IcRoundClose <IcRoundClose
v-show=" v-show="
!tab.affixTab && tabsView.length > 1 && tab.closable !tab.affixTab && tabsView.length > 1 && tab.closable
" "
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground size-3 cursor-pointer rounded-full transition-all" class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
@click.stop="handleClose(tab.key)" @click.stop="handleClose(tab.key)"
/> />
<MdiPin <MdiPin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable" v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all" class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="handleUnpinTab(tab)" @click.stop="handleUnpinTab(tab)"
/> />
</div> </div>
<!-- tab-item-main --> <!-- tab-item-main -->
<div <div
class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-3 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300" class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
> >
<!-- <div <!-- <div
class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4" class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
@ -139,7 +143,7 @@ function handleUnpinTab(tab: TabConfig) {
</template> </template>
<style scoped> <style scoped>
html.dark { /* html.dark {
.tabs-item { .tabs-item {
&.is-active { &.is-active {
.tabs-item__main { .tabs-item__main {
@ -147,5 +151,5 @@ html.dark {
} }
} }
} }
} } */
</style> </style>

2
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
View File

@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
<template> <template>
<VbenDropdownMenu :menus="menus" :modal="false"> <VbenDropdownMenu :menus="menus" :modal="false">
<div <div
class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold" class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
> >
<IcRoundKeyboardArrowDown class="size-5" /> <IcRoundKeyboardArrowDown class="size-5" />
</div> </div>

2
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
View File

@ -10,7 +10,7 @@ function toggleScreen() {
<template> <template>
<div <div
class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold" class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
@click="toggleScreen" @click="toggleScreen"
> >
<IcTwotoneFitScreen v-if="screen" /> <IcTwotoneFitScreen v-if="screen" />

44
packages/effects/layouts/src/authentication/authentication.vue
View File

@ -4,46 +4,40 @@ import { computed } from 'vue';
import { $t } from '@vben-core/locales'; import { $t } from '@vben-core/locales';
import { preferences, usePreferences } from '@vben-core/preferences'; import { preferences, usePreferences } from '@vben-core/preferences';
import AuthenticationFromView from './from-view.vue'; import AuthenticationFormView from './form.vue';
import SloganIcon from './icons/slogan.vue'; import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue'; import Toolbar from './toolbar.vue';
defineOptions({ defineOptions({ name: 'Authentication' });
name: 'Authentication',
});
const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences(); const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
const appName = computed(() => preferences.app.name); const appName = computed(() => preferences.app.name);
const logoSource = computed(() => preferences.logo.source);
</script> </script>
<template> <template>
<div class="flex min-h-full flex-1 select-none overflow-x-hidden"> <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
<AuthenticationFromView <!-- 左侧认证面板 -->
<AuthenticationFormView
v-if="authPanelLeft" v-if="authPanelLeft"
class="-enter-x min-h-full w-2/5" class="min-h-full w-2/5"
transition-name="slide-left" transition-name="slide-left"
/> />
<!-- 头部 Logo 和应用名称 -->
<div class="absolute left-0 top-0 z-10 flex flex-1"> <div class="absolute left-0 top-0 z-10 flex flex-1">
<div <div
:class=" :class="authPanelLeft ? 'lg:text-foreground' : 'lg:text-white'"
authPanelLeft || authPanelCenter
? 'lg:text-foreground'
: 'lg:text-white'
"
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6" class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
> >
<img <img :alt="appName" :src="logoSource" class="mr-2" width="42" />
:alt="appName"
:src="preferences.logo.source"
:width="42"
class="mr-2"
/>
<p class="text-xl font-medium"> <p class="text-xl font-medium">
{{ appName }} {{ appName }}
</p> </p>
</div> </div>
</div> </div>
<!-- 中间内容 -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block"> <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div class="bg-authentication absolute inset-0 h-full w-full"> <div class="bg-authentication absolute inset-0 h-full w-full">
<div class="flex-col-center -enter-x mr-20 h-full"> <div class="flex-col-center -enter-x mr-20 h-full">
@ -57,18 +51,22 @@ const appName = computed(() => preferences.app.name);
</div> </div>
</div> </div>
</div> </div>
<!-- 中心认证面板 -->
<div v-if="authPanelCenter" class="flex-center bg-authentication w-full"> <div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
<AuthenticationFromView <AuthenticationFormView
class="enter-y md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5" class="md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
> >
<template #toolbar> <template #toolbar>
<Toolbar class="bg-muted" /> <Toolbar />
</template> </template>
</AuthenticationFromView> </AuthenticationFormView>
</div> </div>
<AuthenticationFromView
<!-- 右侧认证面板 -->
<AuthenticationFormView
v-if="authPanelRight" v-if="authPanelRight"
class="enter-x min-h-full w-2/5 flex-1" class="min-h-full w-2/5 flex-1"
/> />
</div> </div>
</template> </template>

6
packages/effects/layouts/src/authentication/from-view.vue → packages/effects/layouts/src/authentication/form.vue
View File

@ -9,7 +9,9 @@ defineOptions({
}); });
</script> </script>
<template> <template>
<div class="flex-col-center relative px-6 py-10 lg:flex-initial lg:px-8"> <div
class="flex-col-center bg-background-content relative px-6 py-10 lg:flex-initial lg:px-8"
>
<slot name="toolbar"> <slot name="toolbar">
<Toolbar /> <Toolbar />
</slot> </slot>
@ -20,7 +22,7 @@ defineOptions({
<component <component
:is="Component" :is="Component"
:key="route.fullPath" :key="route.fullPath"
class="mt-6 w-full sm:mx-auto md:max-w-md" class="enter-x mt-6 w-full sm:mx-auto md:max-w-md"
/> />
</KeepAlive> </KeepAlive>
</Transition> </Transition>

2
packages/effects/layouts/src/authentication/toolbar.vue
View File

@ -12,7 +12,7 @@ defineOptions({
</script> </script>
<template> <template>
<div <div
class="flex-center bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1" class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
> >
<div class="hidden md:flex"> <div class="hidden md:flex">
<AuthenticationColorToggle /> <AuthenticationColorToggle />

2
packages/effects/layouts/src/widgets/global-search/global-search.vue
View File

@ -91,7 +91,7 @@ onMounted(() => {
class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
/> />
<span <span
class="text-muted-foreground group-hover:text-foreground hidden text-sm duration-300 md:block" class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
> >
{{ $t('widgets.search.title') }} {{ $t('widgets.search.title') }}
</span> </span>

4
packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue
View File

@ -227,9 +227,7 @@ async function handleReset() {
:title="$t('preferences.title')" :title="$t('preferences.title')"
class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none" class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
> >
<IconSetting <IconSetting class="duration-3000 fill-primary-foreground text-2xl" />
class="duration-3000 fill-primary-foreground animate-spin text-2xl"
/>
</VbenButton> </VbenButton>
</template> </template>
<template #extra> <template #extra>

22
pnpm-lock.yaml
View File

@ -5,7 +5,6 @@ settings:
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
overrides: overrides:
'@ant-design/colors': ^7.1.0
'@ctrl/tinycolor': ^4.1.0 '@ctrl/tinycolor': ^4.1.0
clsx: ^2.1.1 clsx: ^2.1.1
eslint: ^8.57.0 eslint: ^8.57.0
@ -682,9 +681,6 @@ importers:
packages/@core/shared/toolkit: packages/@core/shared/toolkit:
dependencies: dependencies:
'@ant-design/colors':
specifier: ^7.1.0
version: 7.1.0
'@ctrl/tinycolor': '@ctrl/tinycolor':
specifier: ^4.1.0 specifier: ^4.1.0
version: 4.1.0 version: 4.1.0
@ -706,6 +702,9 @@ importers:
tailwind-merge: tailwind-merge:
specifier: ^2.4.0 specifier: ^2.4.0
version: 2.4.0 version: 2.4.0
theme-colors:
specifier: ^0.1.0
version: 0.1.0
devDependencies: devDependencies:
'@types/lodash.clonedeep': '@types/lodash.clonedeep':
specifier: ^4.5.9 specifier: ^4.5.9
@ -1096,8 +1095,8 @@ packages:
resolution: {integrity: sha512-QRVEYpIfgkprNHc916JlPuNbLzOgrm9DZalHasnLUz4P6g7pR21olb8YCyM2OTJjombNhya9ZpckcADU5Qyvlg==} resolution: {integrity: sha512-QRVEYpIfgkprNHc916JlPuNbLzOgrm9DZalHasnLUz4P6g7pR21olb8YCyM2OTJjombNhya9ZpckcADU5Qyvlg==}
engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
'@ant-design/colors@7.1.0': '@ant-design/colors@6.0.0':
resolution: {integrity: sha512-MMoDGWn1y9LdQJQSHiCC20x3uZ3CwQnv9QMz6pCmJOrqdgM9YxsoVVY0wtrdXbmfSgnV0KNk6zi09NAhMR2jvg==} resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
'@ant-design/icons-svg@4.4.2': '@ant-design/icons-svg@4.4.2':
resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==} resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
@ -8576,6 +8575,9 @@ packages:
text-table@0.2.0: text-table@0.2.0:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
theme-colors@0.1.0:
resolution: {integrity: sha512-6gTEHQqWlQNiOEGHCSSQmU//E5SnXHJ4H7oHQOD8x77CvNYNQAmt73dqR71mzw5ULV87zaHLxK5pIBnsToFuZw==}
thenify-all@1.6.0: thenify-all@1.6.0:
resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
engines: {node: '>=0.8'} engines: {node: '>=0.8'}
@ -9610,7 +9612,7 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- chokidar - chokidar
'@ant-design/colors@7.1.0': '@ant-design/colors@6.0.0':
dependencies: dependencies:
'@ctrl/tinycolor': 4.1.0 '@ctrl/tinycolor': 4.1.0
@ -9618,7 +9620,7 @@ snapshots:
'@ant-design/icons-vue@7.0.1(vue@3.4.31(typescript@5.5.3))': '@ant-design/icons-vue@7.0.1(vue@3.4.31(typescript@5.5.3))':
dependencies: dependencies:
'@ant-design/colors': 7.1.0 '@ant-design/colors': 6.0.0
'@ant-design/icons-svg': 4.4.2 '@ant-design/icons-svg': 4.4.2
vue: 3.4.31(typescript@5.5.3) vue: 3.4.31(typescript@5.5.3)
@ -12916,7 +12918,7 @@ snapshots:
ant-design-vue@4.2.3(vue@3.4.31(typescript@5.5.3)): ant-design-vue@4.2.3(vue@3.4.31(typescript@5.5.3)):
dependencies: dependencies:
'@ant-design/colors': 7.1.0 '@ant-design/colors': 6.0.0
'@ant-design/icons-vue': 7.0.1(vue@3.4.31(typescript@5.5.3)) '@ant-design/icons-vue': 7.0.1(vue@3.4.31(typescript@5.5.3))
'@babel/runtime': 7.24.8 '@babel/runtime': 7.24.8
'@ctrl/tinycolor': 4.1.0 '@ctrl/tinycolor': 4.1.0
@ -17865,6 +17867,8 @@ snapshots:
text-table@0.2.0: {} text-table@0.2.0: {}
theme-colors@0.1.0: {}
thenify-all@1.6.0: thenify-all@1.6.0:
dependencies: dependencies:
thenify: 3.3.1 thenify: 3.3.1