From 885a0a9a00b2e5df0557648f44862bca49d1b659 Mon Sep 17 00:00:00 2001 From: Noah Lan <6995syu@163.com> Date: Tue, 17 Mar 2026 18:59:35 +0800 Subject: [PATCH 1/5] fix: build.mjs commands could not be executed correctly. (#7682) * fix: Fix issue where commands could not be executed correctly when they contained spaces * chore: oxfmt --- internal/node-utils/scripts/build.mjs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/internal/node-utils/scripts/build.mjs b/internal/node-utils/scripts/build.mjs index c38b4914c..65a64e9c4 100644 --- a/internal/node-utils/scripts/build.mjs +++ b/internal/node-utils/scripts/build.mjs @@ -1,8 +1,7 @@ import { spawnSync } from 'node:child_process'; const pnpmCommand = - process.env.npm_execpath && - process.env.npm_execpath.endsWith('.cjs') + process.env.npm_execpath && process.env.npm_execpath.endsWith('.cjs') ? [process.execPath, process.env.npm_execpath] : ['pnpm']; @@ -22,7 +21,11 @@ const steps = [ for (const args of steps) { const [command, ...commandArgs] = pnpmCommand; - const result = spawnSync(command, [...commandArgs, ...args], { + let cmd = command; + if (cmd.includes(' ')) { + cmd = `"${command}"`; + } + const result = spawnSync(cmd, [...commandArgs, ...args], { shell: true, stdio: 'inherit', }); From b908076846a4021eedd6e824c6e30425932a20e2 Mon Sep 17 00:00:00 2001 From: afe1 <2279948211@qq.com> Date: Wed, 18 Mar 2026 20:18:25 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20sass-embedded@1.98.0=20=E5=9C=A8=20m?= =?UTF-8?q?acOS=2013=20=E4=BC=9A=E7=9B=B4=E6=8E=A5=E5=B4=A9=20(#7692)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: catelog * fix: system --- docs/src/en/guide/project/dir.md | 4 +- docs/src/en/guide/project/standard.md | 4 +- docs/src/guide/project/dir.md | 4 +- docs/src/guide/project/standard.md | 4 +- .../vite-config/src/config/application.ts | 45 +++++---- oxfmt.config.ts => oxfmt.config.mjs | 0 oxlint.config.ts => oxlint.config.mjs | 0 vben-admin.code-workspace | 92 +++++++++---------- 8 files changed, 75 insertions(+), 78 deletions(-) rename oxfmt.config.ts => oxfmt.config.mjs (100%) rename oxlint.config.ts => oxlint.config.mjs (100%) diff --git a/docs/src/en/guide/project/dir.md b/docs/src/en/guide/project/dir.md index 47b92cb2e..ededcff5f 100644 --- a/docs/src/en/guide/project/dir.md +++ b/docs/src/en/guide/project/dir.md @@ -26,8 +26,8 @@ The repository uses Monorepo management, and the project structure is as follows │ ├── node-utils # Node.js tools │ ├── tsconfig # Common tsconfig settings │ └── vite-config # Common Vite configuration -├── oxfmt.config.ts # Oxfmt config entry -├── oxlint.config.ts # Oxlint configuration file +├── oxfmt.config.mjs # Oxfmt config entry +├── oxlint.config.mjs # Oxlint configuration file ├── package.json # Project dependency configuration ├── packages # Project packages directory │ ├── @core # Core package diff --git a/docs/src/en/guide/project/standard.md b/docs/src/en/guide/project/standard.md index 1fa620091..4c8ace02a 100644 --- a/docs/src/en/guide/project/standard.md +++ b/docs/src/en/guide/project/standard.md @@ -49,7 +49,7 @@ pnpm oxfmt --check ### Configuration -The root Oxfmt entry file is `oxfmt.config.ts`, and its core configuration is located in `internal/lint-configs/oxfmt-config`. +The root Oxfmt entry file is `oxfmt.config.mjs`, and its core configuration is located in `internal/lint-configs/oxfmt-config`. ## Oxlint @@ -64,7 +64,7 @@ pnpm oxlint --fix ### Configuration -The core Oxlint configuration is located in `internal/lint-configs/oxlint-config`, and the root entry file is `oxlint.config.ts`. +The core Oxlint configuration is located in `internal/lint-configs/oxlint-config`, and the root entry file is `oxlint.config.mjs`. ## ESLint diff --git a/docs/src/guide/project/dir.md b/docs/src/guide/project/dir.md index 124e2e460..c8b3ea769 100644 --- a/docs/src/guide/project/dir.md +++ b/docs/src/guide/project/dir.md @@ -26,8 +26,8 @@ │ ├── node-utils # Node.js 工具 │ ├── tsconfig # 通用 tsconfig 配置 │ └── vite-config # 通用 Vite 配置 -├── oxfmt.config.ts # Oxfmt 配置入口 -├── oxlint.config.ts # Oxlint 配置文件 +├── oxfmt.config.mjs # Oxfmt 配置入口 +├── oxlint.config.mjs # Oxlint 配置文件 ├── package.json # 项目依赖配置 ├── packages # 项目包目录 │ ├── @core # 核心包 diff --git a/docs/src/guide/project/standard.md b/docs/src/guide/project/standard.md index 038d43d9c..0cb1d24fc 100644 --- a/docs/src/guide/project/standard.md +++ b/docs/src/guide/project/standard.md @@ -49,7 +49,7 @@ pnpm oxfmt --check ### 配置 -Oxfmt 的根目录入口文件为 `oxfmt.config.ts`，其核心配置位于 `internal/lint-configs/oxfmt-config` 目录下，可以根据项目需求进行修改。 +Oxfmt 的根目录入口文件为 `oxfmt.config.mjs`，其核心配置位于 `internal/lint-configs/oxfmt-config` 目录下，可以根据项目需求进行修改。 ## Oxlint @@ -64,7 +64,7 @@ pnpm oxlint --fix ### 配置 -Oxlint 的核心配置位于 `internal/lint-configs/oxlint-config` 目录下，根目录入口文件为 `oxlint.config.ts`。 +Oxlint 的核心配置位于 `internal/lint-configs/oxlint-config` 目录下，根目录入口文件为 `oxlint.config.mjs`。 ## ESLint diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts index f8c226462..f7f2d87ba 100644 --- a/internal/vite-config/src/config/application.ts +++ b/internal/vite-config/src/config/application.ts @@ -1,18 +1,18 @@ -import type { CSSOptions, UserConfig } from 'vite'; +import type { CSSOptions, UserConfig } from "vite"; -import type { DefineApplicationOptions } from '../typing'; +import type { DefineApplicationOptions } from "../typing"; -import path, { relative } from 'node:path'; +import path, { relative } from "node:path"; -import { findMonorepoRoot } from '@vben/node-utils'; +import { findMonorepoRoot } from "@vben/node-utils"; -import { NodePackageImporter } from 'sass-embedded'; -import { defineConfig, loadEnv, mergeConfig } from 'vite'; +import { NodePackageImporter } from "sass"; +import { defineConfig, loadEnv, mergeConfig } from "vite"; -import { defaultImportmapOptions, getDefaultPwaOptions } from '../options'; -import { loadApplicationPlugins } from '../plugins'; -import { loadAndConvertEnv } from '../utils/env'; -import { getCommonConfig } from './common'; +import { defaultImportmapOptions, getDefaultPwaOptions } from "../options"; +import { loadApplicationPlugins } from "../plugins"; +import { loadAndConvertEnv } from "../utils/env"; +import { getCommonConfig } from "./common"; function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { return defineConfig(async (config) => { @@ -21,14 +21,14 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { const { command, mode } = config; const { application = {}, vite = {} } = options || {}; const root = process.cwd(); - const isBuild = command === 'build'; + const isBuild = command === "build"; const env = loadEnv(mode, root); const plugins = await loadApplicationPlugins({ archiver: true, archiverPluginOptions: {}, compress: false, - compressTypes: ['brotli', 'gzip'], + compressTypes: ["brotli", "gzip"], devtools: true, env, extraAppConfig: true, @@ -44,7 +44,7 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { nitroMockOptions: {}, print: !isBuild, printInfoMap: { - 'Vben Admin Docs': 'https://doc.vben.pro', + "Vben Admin Docs": "https://doc.vben.pro", }, pwa: true, pwaOptions: getDefaultPwaOptions(appTitle), @@ -60,9 +60,9 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { build: { rolldownOptions: { output: { - assetFileNames: '[ext]/[name]-[hash].[ext]', - chunkFileNames: 'js/[name]-[hash].js', - entryFileNames: 'jse/index-[name]-[hash].js', + assetFileNames: "[ext]/[name]-[hash].[ext]", + chunkFileNames: "js/[name]-[hash].js", + entryFileNames: "jse/index-[name]-[hash].js", minify: isBuild ? { compress: { @@ -72,7 +72,7 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { : false, }, }, - target: 'es2015', + target: "es2015", }, css: createCssOptions(injectGlobalScss), plugins, @@ -82,18 +82,15 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { warmup: { // 预热文件 clientFiles: [ - './index.html', - './src/bootstrap.ts', - './src/{views,layouts,router,store,api,adapter}/*', + "./index.html", + "./src/bootstrap.ts", + "./src/{views,layouts,router,store,api,adapter}/*", ], }, }, }; - const mergedCommonConfig = mergeConfig( - await getCommonConfig(), - applicationConfig, - ); + const mergedCommonConfig = mergeConfig(await getCommonConfig(), applicationConfig); return mergeConfig(mergedCommonConfig, vite); }); } diff --git a/oxfmt.config.ts b/oxfmt.config.mjs similarity index 100% rename from oxfmt.config.ts rename to oxfmt.config.mjs diff --git a/oxlint.config.ts b/oxlint.config.mjs similarity index 100% rename from oxlint.config.ts rename to oxlint.config.mjs diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace index 419681056..e60de2e96 100644 --- a/vben-admin.code-workspace +++ b/vben-admin.code-workspace @@ -2,179 +2,179 @@ "folders": [ { "name": "@vben/backend-mock", - "path": "apps/backend-mock" + "path": "apps/backend-mock", }, { "name": "@vben/web-antd", - "path": "apps/web-antd" + "path": "apps/web-antd", }, { "name": "@vben/web-antdv-next", - "path": "apps/web-antdv-next" + "path": "apps/web-antdv-next", }, { "name": "@vben/web-ele", - "path": "apps/web-ele" + "path": "apps/web-ele", }, { "name": "@vben/web-naive", - "path": "apps/web-naive" + "path": "apps/web-naive", }, { "name": "@vben/web-tdesign", - "path": "apps/web-tdesign" + "path": "apps/web-tdesign", }, { "name": "@vben/docs", - "path": "docs" + "path": "docs", }, { "name": "@vben/commitlint-config", - "path": "internal/lint-configs/commitlint-config" + "path": "internal/lint-configs/commitlint-config", }, { "name": "@vben/eslint-config", - "path": "internal/lint-configs/eslint-config" + "path": "internal/lint-configs/eslint-config", }, { "name": "@vben/oxfmt-config", - "path": "internal/lint-configs/oxfmt-config" + "path": "internal/lint-configs/oxfmt-config", }, { "name": "@vben/oxlint-config", - "path": "internal/lint-configs/oxlint-config" + "path": "internal/lint-configs/oxlint-config", }, { "name": "@vben/stylelint-config", - "path": "internal/lint-configs/stylelint-config" + "path": "internal/lint-configs/stylelint-config", }, { "name": "@vben/node-utils", - "path": "internal/node-utils" + "path": "internal/node-utils", }, { "name": "@vben/tsconfig", - "path": "internal/tsconfig" + "path": "internal/tsconfig", }, { "name": "@vben/vite-config", - "path": "internal/vite-config" + "path": "internal/vite-config", }, { "name": "@vben-core/design", - "path": "packages/@core/base/design" + "path": "packages/@core/base/design", }, { "name": "@vben-core/icons", - "path": "packages/@core/base/icons" + "path": "packages/@core/base/icons", }, { "name": "@vben-core/shared", - "path": "packages/@core/base/shared" + "path": "packages/@core/base/shared", }, { "name": "@vben-core/typings", - "path": "packages/@core/base/typings" + "path": "packages/@core/base/typings", }, { "name": "@vben-core/composables", - "path": "packages/@core/composables" + "path": "packages/@core/composables", }, { "name": "@vben-core/preferences", - "path": "packages/@core/preferences" + "path": "packages/@core/preferences", }, { "name": "@vben-core/form-ui", - "path": "packages/@core/ui-kit/form-ui" + "path": "packages/@core/ui-kit/form-ui", }, { "name": "@vben-core/layout-ui", - "path": "packages/@core/ui-kit/layout-ui" + "path": "packages/@core/ui-kit/layout-ui", }, { "name": "@vben-core/menu-ui", - "path": "packages/@core/ui-kit/menu-ui" + "path": "packages/@core/ui-kit/menu-ui", }, { "name": "@vben-core/popup-ui", - "path": "packages/@core/ui-kit/popup-ui" + "path": "packages/@core/ui-kit/popup-ui", }, { "name": "@vben-core/shadcn-ui", - "path": "packages/@core/ui-kit/shadcn-ui" + "path": "packages/@core/ui-kit/shadcn-ui", }, { "name": "@vben-core/tabs-ui", - "path": "packages/@core/ui-kit/tabs-ui" + "path": "packages/@core/ui-kit/tabs-ui", }, { "name": "@vben/constants", - "path": "packages/constants" + "path": "packages/constants", }, { "name": "@vben/access", - "path": "packages/effects/access" + "path": "packages/effects/access", }, { "name": "@vben/common-ui", - "path": "packages/effects/common-ui" + "path": "packages/effects/common-ui", }, { "name": "@vben/hooks", - "path": "packages/effects/hooks" + "path": "packages/effects/hooks", }, { "name": "@vben/layouts", - "path": "packages/effects/layouts" + "path": "packages/effects/layouts", }, { "name": "@vben/plugins", - "path": "packages/effects/plugins" + "path": "packages/effects/plugins", }, { "name": "@vben/request", - "path": "packages/effects/request" + "path": "packages/effects/request", }, { "name": "@vben/icons", - "path": "packages/icons" + "path": "packages/icons", }, { "name": "@vben/locales", - "path": "packages/locales" + "path": "packages/locales", }, { "name": "@vben/preferences", - "path": "packages/preferences" + "path": "packages/preferences", }, { "name": "@vben/stores", - "path": "packages/stores" + "path": "packages/stores", }, { "name": "@vben/styles", - "path": "packages/styles" + "path": "packages/styles", }, { "name": "@vben/types", - "path": "packages/types" + "path": "packages/types", }, { "name": "@vben/utils", - "path": "packages/utils" + "path": "packages/utils", }, { "name": "@vben/playground", - "path": "playground" + "path": "playground", }, { "name": "@vben/turbo-run", - "path": "scripts/turbo-run" + "path": "scripts/turbo-run", }, { "name": "@vben/vsh", - "path": "scripts/vsh" - } - ] + "path": "scripts/vsh", + }, + ], } From bed97a84d8232b72739e491454275e729c17854a Mon Sep 17 00:00:00 2001 From: Jin Mao Date: Thu, 19 Mar 2026 09:02:11 +0800 Subject: [PATCH 3/5] =?UTF-8?q?revert:=20"fix:=20sass-embedded@1.98.0=20?= =?UTF-8?q?=E5=9C=A8=20macOS=2013=20=E4=BC=9A=E7=9B=B4=E6=8E=A5=E5=B4=A9?= =?UTF-8?q?=20(#7692)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/en/guide/project/dir.md | 4 +- docs/src/en/guide/project/standard.md | 4 +- docs/src/guide/project/dir.md | 4 +- docs/src/guide/project/standard.md | 4 +- .../vite-config/src/config/application.ts | 45 ++++----- oxfmt.config.mjs => oxfmt.config.ts | 0 oxlint.config.mjs => oxlint.config.ts | 0 vben-admin.code-workspace | 92 +++++++++---------- 8 files changed, 78 insertions(+), 75 deletions(-) rename oxfmt.config.mjs => oxfmt.config.ts (100%) rename oxlint.config.mjs => oxlint.config.ts (100%) diff --git a/docs/src/en/guide/project/dir.md b/docs/src/en/guide/project/dir.md index ededcff5f..47b92cb2e 100644 --- a/docs/src/en/guide/project/dir.md +++ b/docs/src/en/guide/project/dir.md @@ -26,8 +26,8 @@ The repository uses Monorepo management, and the project structure is as follows │ ├── node-utils # Node.js tools │ ├── tsconfig # Common tsconfig settings │ └── vite-config # Common Vite configuration -├── oxfmt.config.mjs # Oxfmt config entry -├── oxlint.config.mjs # Oxlint configuration file +├── oxfmt.config.ts # Oxfmt config entry +├── oxlint.config.ts # Oxlint configuration file ├── package.json # Project dependency configuration ├── packages # Project packages directory │ ├── @core # Core package diff --git a/docs/src/en/guide/project/standard.md b/docs/src/en/guide/project/standard.md index 4c8ace02a..1fa620091 100644 --- a/docs/src/en/guide/project/standard.md +++ b/docs/src/en/guide/project/standard.md @@ -49,7 +49,7 @@ pnpm oxfmt --check ### Configuration -The root Oxfmt entry file is `oxfmt.config.mjs`, and its core configuration is located in `internal/lint-configs/oxfmt-config`. +The root Oxfmt entry file is `oxfmt.config.ts`, and its core configuration is located in `internal/lint-configs/oxfmt-config`. ## Oxlint @@ -64,7 +64,7 @@ pnpm oxlint --fix ### Configuration -The core Oxlint configuration is located in `internal/lint-configs/oxlint-config`, and the root entry file is `oxlint.config.mjs`. +The core Oxlint configuration is located in `internal/lint-configs/oxlint-config`, and the root entry file is `oxlint.config.ts`. ## ESLint diff --git a/docs/src/guide/project/dir.md b/docs/src/guide/project/dir.md index c8b3ea769..124e2e460 100644 --- a/docs/src/guide/project/dir.md +++ b/docs/src/guide/project/dir.md @@ -26,8 +26,8 @@ │ ├── node-utils # Node.js 工具 │ ├── tsconfig # 通用 tsconfig 配置 │ └── vite-config # 通用 Vite 配置 -├── oxfmt.config.mjs # Oxfmt 配置入口 -├── oxlint.config.mjs # Oxlint 配置文件 +├── oxfmt.config.ts # Oxfmt 配置入口 +├── oxlint.config.ts # Oxlint 配置文件 ├── package.json # 项目依赖配置 ├── packages # 项目包目录 │ ├── @core # 核心包 diff --git a/docs/src/guide/project/standard.md b/docs/src/guide/project/standard.md index 0cb1d24fc..038d43d9c 100644 --- a/docs/src/guide/project/standard.md +++ b/docs/src/guide/project/standard.md @@ -49,7 +49,7 @@ pnpm oxfmt --check ### 配置 -Oxfmt 的根目录入口文件为 `oxfmt.config.mjs`，其核心配置位于 `internal/lint-configs/oxfmt-config` 目录下，可以根据项目需求进行修改。 +Oxfmt 的根目录入口文件为 `oxfmt.config.ts`，其核心配置位于 `internal/lint-configs/oxfmt-config` 目录下，可以根据项目需求进行修改。 ## Oxlint @@ -64,7 +64,7 @@ pnpm oxlint --fix ### 配置 -Oxlint 的核心配置位于 `internal/lint-configs/oxlint-config` 目录下，根目录入口文件为 `oxlint.config.mjs`。 +Oxlint 的核心配置位于 `internal/lint-configs/oxlint-config` 目录下，根目录入口文件为 `oxlint.config.ts`。 ## ESLint diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts index f7f2d87ba..f8c226462 100644 --- a/internal/vite-config/src/config/application.ts +++ b/internal/vite-config/src/config/application.ts @@ -1,18 +1,18 @@ -import type { CSSOptions, UserConfig } from "vite"; +import type { CSSOptions, UserConfig } from 'vite'; -import type { DefineApplicationOptions } from "../typing"; +import type { DefineApplicationOptions } from '../typing'; -import path, { relative } from "node:path"; +import path, { relative } from 'node:path'; -import { findMonorepoRoot } from "@vben/node-utils"; +import { findMonorepoRoot } from '@vben/node-utils'; -import { NodePackageImporter } from "sass"; -import { defineConfig, loadEnv, mergeConfig } from "vite"; +import { NodePackageImporter } from 'sass-embedded'; +import { defineConfig, loadEnv, mergeConfig } from 'vite'; -import { defaultImportmapOptions, getDefaultPwaOptions } from "../options"; -import { loadApplicationPlugins } from "../plugins"; -import { loadAndConvertEnv } from "../utils/env"; -import { getCommonConfig } from "./common"; +import { defaultImportmapOptions, getDefaultPwaOptions } from '../options'; +import { loadApplicationPlugins } from '../plugins'; +import { loadAndConvertEnv } from '../utils/env'; +import { getCommonConfig } from './common'; function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { return defineConfig(async (config) => { @@ -21,14 +21,14 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { const { command, mode } = config; const { application = {}, vite = {} } = options || {}; const root = process.cwd(); - const isBuild = command === "build"; + const isBuild = command === 'build'; const env = loadEnv(mode, root); const plugins = await loadApplicationPlugins({ archiver: true, archiverPluginOptions: {}, compress: false, - compressTypes: ["brotli", "gzip"], + compressTypes: ['brotli', 'gzip'], devtools: true, env, extraAppConfig: true, @@ -44,7 +44,7 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { nitroMockOptions: {}, print: !isBuild, printInfoMap: { - "Vben Admin Docs": "https://doc.vben.pro", + 'Vben Admin Docs': 'https://doc.vben.pro', }, pwa: true, pwaOptions: getDefaultPwaOptions(appTitle), @@ -60,9 +60,9 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { build: { rolldownOptions: { output: { - assetFileNames: "[ext]/[name]-[hash].[ext]", - chunkFileNames: "js/[name]-[hash].js", - entryFileNames: "jse/index-[name]-[hash].js", + assetFileNames: '[ext]/[name]-[hash].[ext]', + chunkFileNames: 'js/[name]-[hash].js', + entryFileNames: 'jse/index-[name]-[hash].js', minify: isBuild ? { compress: { @@ -72,7 +72,7 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { : false, }, }, - target: "es2015", + target: 'es2015', }, css: createCssOptions(injectGlobalScss), plugins, @@ -82,15 +82,18 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) { warmup: { // 预热文件 clientFiles: [ - "./index.html", - "./src/bootstrap.ts", - "./src/{views,layouts,router,store,api,adapter}/*", + './index.html', + './src/bootstrap.ts', + './src/{views,layouts,router,store,api,adapter}/*', ], }, }, }; - const mergedCommonConfig = mergeConfig(await getCommonConfig(), applicationConfig); + const mergedCommonConfig = mergeConfig( + await getCommonConfig(), + applicationConfig, + ); return mergeConfig(mergedCommonConfig, vite); }); } diff --git a/oxfmt.config.mjs b/oxfmt.config.ts similarity index 100% rename from oxfmt.config.mjs rename to oxfmt.config.ts diff --git a/oxlint.config.mjs b/oxlint.config.ts similarity index 100% rename from oxlint.config.mjs rename to oxlint.config.ts diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace index e60de2e96..419681056 100644 --- a/vben-admin.code-workspace +++ b/vben-admin.code-workspace @@ -2,179 +2,179 @@ "folders": [ { "name": "@vben/backend-mock", - "path": "apps/backend-mock", + "path": "apps/backend-mock" }, { "name": "@vben/web-antd", - "path": "apps/web-antd", + "path": "apps/web-antd" }, { "name": "@vben/web-antdv-next", - "path": "apps/web-antdv-next", + "path": "apps/web-antdv-next" }, { "name": "@vben/web-ele", - "path": "apps/web-ele", + "path": "apps/web-ele" }, { "name": "@vben/web-naive", - "path": "apps/web-naive", + "path": "apps/web-naive" }, { "name": "@vben/web-tdesign", - "path": "apps/web-tdesign", + "path": "apps/web-tdesign" }, { "name": "@vben/docs", - "path": "docs", + "path": "docs" }, { "name": "@vben/commitlint-config", - "path": "internal/lint-configs/commitlint-config", + "path": "internal/lint-configs/commitlint-config" }, { "name": "@vben/eslint-config", - "path": "internal/lint-configs/eslint-config", + "path": "internal/lint-configs/eslint-config" }, { "name": "@vben/oxfmt-config", - "path": "internal/lint-configs/oxfmt-config", + "path": "internal/lint-configs/oxfmt-config" }, { "name": "@vben/oxlint-config", - "path": "internal/lint-configs/oxlint-config", + "path": "internal/lint-configs/oxlint-config" }, { "name": "@vben/stylelint-config", - "path": "internal/lint-configs/stylelint-config", + "path": "internal/lint-configs/stylelint-config" }, { "name": "@vben/node-utils", - "path": "internal/node-utils", + "path": "internal/node-utils" }, { "name": "@vben/tsconfig", - "path": "internal/tsconfig", + "path": "internal/tsconfig" }, { "name": "@vben/vite-config", - "path": "internal/vite-config", + "path": "internal/vite-config" }, { "name": "@vben-core/design", - "path": "packages/@core/base/design", + "path": "packages/@core/base/design" }, { "name": "@vben-core/icons", - "path": "packages/@core/base/icons", + "path": "packages/@core/base/icons" }, { "name": "@vben-core/shared", - "path": "packages/@core/base/shared", + "path": "packages/@core/base/shared" }, { "name": "@vben-core/typings", - "path": "packages/@core/base/typings", + "path": "packages/@core/base/typings" }, { "name": "@vben-core/composables", - "path": "packages/@core/composables", + "path": "packages/@core/composables" }, { "name": "@vben-core/preferences", - "path": "packages/@core/preferences", + "path": "packages/@core/preferences" }, { "name": "@vben-core/form-ui", - "path": "packages/@core/ui-kit/form-ui", + "path": "packages/@core/ui-kit/form-ui" }, { "name": "@vben-core/layout-ui", - "path": "packages/@core/ui-kit/layout-ui", + "path": "packages/@core/ui-kit/layout-ui" }, { "name": "@vben-core/menu-ui", - "path": "packages/@core/ui-kit/menu-ui", + "path": "packages/@core/ui-kit/menu-ui" }, { "name": "@vben-core/popup-ui", - "path": "packages/@core/ui-kit/popup-ui", + "path": "packages/@core/ui-kit/popup-ui" }, { "name": "@vben-core/shadcn-ui", - "path": "packages/@core/ui-kit/shadcn-ui", + "path": "packages/@core/ui-kit/shadcn-ui" }, { "name": "@vben-core/tabs-ui", - "path": "packages/@core/ui-kit/tabs-ui", + "path": "packages/@core/ui-kit/tabs-ui" }, { "name": "@vben/constants", - "path": "packages/constants", + "path": "packages/constants" }, { "name": "@vben/access", - "path": "packages/effects/access", + "path": "packages/effects/access" }, { "name": "@vben/common-ui", - "path": "packages/effects/common-ui", + "path": "packages/effects/common-ui" }, { "name": "@vben/hooks", - "path": "packages/effects/hooks", + "path": "packages/effects/hooks" }, { "name": "@vben/layouts", - "path": "packages/effects/layouts", + "path": "packages/effects/layouts" }, { "name": "@vben/plugins", - "path": "packages/effects/plugins", + "path": "packages/effects/plugins" }, { "name": "@vben/request", - "path": "packages/effects/request", + "path": "packages/effects/request" }, { "name": "@vben/icons", - "path": "packages/icons", + "path": "packages/icons" }, { "name": "@vben/locales", - "path": "packages/locales", + "path": "packages/locales" }, { "name": "@vben/preferences", - "path": "packages/preferences", + "path": "packages/preferences" }, { "name": "@vben/stores", - "path": "packages/stores", + "path": "packages/stores" }, { "name": "@vben/styles", - "path": "packages/styles", + "path": "packages/styles" }, { "name": "@vben/types", - "path": "packages/types", + "path": "packages/types" }, { "name": "@vben/utils", - "path": "packages/utils", + "path": "packages/utils" }, { "name": "@vben/playground", - "path": "playground", + "path": "playground" }, { "name": "@vben/turbo-run", - "path": "scripts/turbo-run", + "path": "scripts/turbo-run" }, { "name": "@vben/vsh", - "path": "scripts/vsh", - }, - ], + "path": "scripts/vsh" + } + ] } From d43a3729c32e7c002529488c8466a642d3c47b9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <126167116+caodachen@users.noreply.github.com> Date: Thu, 19 Mar 2026 09:03:40 +0800 Subject: [PATCH 4/5] fix: playground(drawer) comment (#7695) --- playground/src/views/examples/drawer/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playground/src/views/examples/drawer/index.vue b/playground/src/views/examples/drawer/index.vue index 9804b19f1..4aaa7798a 100644 --- a/playground/src/views/examples/drawer/index.vue +++ b/playground/src/views/examples/drawer/index.vue @@ -60,7 +60,7 @@ function openInContentDrawer(placement: DrawerPlacement = 'right') { } function openMaxContentDrawer() { - // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里 + // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置写在Drawer的属性里 inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open(); } From 0c300d040ce5a585577bfeaf5c2fc9323aa1a21a Mon Sep 17 00:00:00 2001 From: xingyu Date: Thu, 19 Mar 2026 15:51:09 +0800 Subject: [PATCH 5/5] fix: tailwindcss config (#7693) * chore: update deps * fix: tailwindcss config * fix: lint * fix: lint * chore: update deps --- .vscode/settings.json | 2 +- docs/package.json | 1 + docs/src/en/guide/project/tailwindcss.md | 6 +- docs/src/guide/project/tailwindcss.md | 6 +- .../eslint-config/src/configs/node.ts | 1 + .../oxlint-config/src/configs/tailwindcss.ts | 2 +- internal/tailwind-config/package.json | 38 + internal/tailwind-config/src/index.ts | 1 + internal/tailwind-config/src/theme.css | 569 +++++++ .../src/plugins/tailwind-reference.ts | 2 +- package.json | 3 +- packages/@core/base/design/package.json | 5 +- packages/@core/base/design/src/css/global.css | 570 +------ .../@core/base/design/src/css/nprogress.css | 2 +- .../components/normal-menu/normal-menu.vue | 2 +- .../ui-kit/shadcn-ui/src/assets/index.css | 1 + .../breadcrumb/breadcrumb-background.vue | 2 +- .../src/components/tabs-chrome/tabs.vue | 2 +- .../src/components/cropper/cropper.vue | 2 +- .../src/widgets/theme-toggle/theme-button.vue | 2 +- .../effects/plugins/src/vxe-table/style.css | 2 +- playground/src/views/examples/form/basic.vue | 2 +- pnpm-lock.yaml | 1311 ++++++++--------- pnpm-workspace.yaml | 38 +- scripts/vsh/src/check-dep/index.ts | 1 + vben-admin.code-workspace | 4 + 26 files changed, 1257 insertions(+), 1320 deletions(-) create mode 100644 internal/tailwind-config/package.json create mode 100644 internal/tailwind-config/src/index.ts create mode 100644 internal/tailwind-config/src/theme.css create mode 100644 packages/@core/ui-kit/shadcn-ui/src/assets/index.css diff --git a/.vscode/settings.json b/.vscode/settings.json index a35e6f0c7..44a3a8ddc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "tailwindCSS.experimental.configFile": "packages/@core/base/design/src/css/global.css", + "tailwindCSS.experimental.configFile": "internal/tailwind-config/src/theme.css", "tailwindCSS.lint.suggestCanonicalClasses": "ignore", // workbench "workbench.list.smoothScrolling": true, diff --git a/docs/package.json b/docs/package.json index bee65c99a..c418d797f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -28,6 +28,7 @@ "devDependencies": { "@nolebase/vitepress-plugin-git-changelog": "catalog:", "@tailwindcss/vite": "catalog:", + "@vben/tailwind-config": "workspace:*", "@vben/vite-config": "workspace:*", "@vite-pwa/vitepress": "catalog:", "vitepress": "catalog:", diff --git a/docs/src/en/guide/project/tailwindcss.md b/docs/src/en/guide/project/tailwindcss.md index 98e27ba7c..131fdcbb7 100644 --- a/docs/src/en/guide/project/tailwindcss.md +++ b/docs/src/en/guide/project/tailwindcss.md @@ -6,7 +6,7 @@ The project no longer maintains Tailwind through `tailwind.config.*` files. Theme definitions and scan scope are now managed through CSS and the shared Vite configuration. -- Theme entry: `packages/@core/base/design/src/css/global.css` +- Theme entry: `internal/tailwind-config/src/theme.css` - Vite integration: `internal/vite-config` In `global.css`, you will see the Tailwind CSS v4 directives currently used by the project, such as: @@ -21,7 +21,7 @@ In `global.css`, you will see the Tailwind CSS v4 directives currently used by t The project does not decide whether Tailwind CSS is enabled based on whether a package contains `tailwind.config.mjs`. -Apps and packages share `@vben/vite-config`, which integrates `@tailwindcss/vite`. The Tailwind scan scope is managed centrally in `packages/@core/base/design/src/css/global.css`. +Apps and packages share `@vben/vite-config`, which integrates `@tailwindcss/vite`. The Tailwind scan scope is managed centrally in `@vben/tailwind-config`, backed by `internal/tailwind-config/src/theme.css`. ::: tip Notes on using Tailwind CSS in packages @@ -35,4 +35,4 @@ The project applies a shared handling layer for `@apply` inside Vue single-file - `internal/vite-config/src/plugins/tailwind-reference.ts` -When component styles use `@apply`, the required `@reference` is injected automatically in most cases. +When component styles use `@apply`, `@reference "@vben/tailwind-config/theme"` is injected automatically in most cases. diff --git a/docs/src/guide/project/tailwindcss.md b/docs/src/guide/project/tailwindcss.md index c0f6e7edd..c51bd75a5 100644 --- a/docs/src/guide/project/tailwindcss.md +++ b/docs/src/guide/project/tailwindcss.md @@ -6,7 +6,7 @@ 项目当前不再通过 `tailwind.config.*` 文件维护 Tailwind 配置，主题与扫描范围都统一放在 CSS 与共享 Vite 配置中。 -- 主题入口：`packages/@core/base/design/src/css/global.css` +- 主题入口：`internal/tailwind-config/src/theme.css` - Vite 集成：`internal/vite-config` 在 `global.css` 中你会看到当前项目使用的 Tailwind CSS v4 指令，例如： @@ -21,7 +21,7 @@ 当前项目不会根据某个包下是否存在 `tailwind.config.mjs` 来决定是否启用 Tailwind CSS。 -应用和包统一复用 `@vben/vite-config`，并由该配置接入 `@tailwindcss/vite`。Tailwind 的扫描范围则统一在 `packages/@core/base/design/src/css/global.css` 中维护。 +应用和包统一复用 `@vben/vite-config`，并由该配置接入 `@tailwindcss/vite`。Tailwind 的扫描范围则统一在 `@vben/tailwind-config` 对应的 `internal/tailwind-config/src/theme.css` 中维护。 ::: tip 包使用 Tailwind CSS 的说明 @@ -35,4 +35,4 @@ - `internal/vite-config/src/plugins/tailwind-reference.ts` -当组件样式中使用 `@apply` 时，会自动注入对应的 `@reference`，一般不需要手动补充。 +当组件样式中使用 `@apply` 时，会自动注入 `@reference "@vben/tailwind-config/theme"`，一般不需要手动补充。 diff --git a/internal/lint-configs/eslint-config/src/configs/node.ts b/internal/lint-configs/eslint-config/src/configs/node.ts index 721bd5a0a..95d998673 100644 --- a/internal/lint-configs/eslint-config/src/configs/node.ts +++ b/internal/lint-configs/eslint-config/src/configs/node.ts @@ -18,6 +18,7 @@ export async function node(): Promise { { allowModules: [ 'tsdown', + 'unplugin-vue', '@vben/vite-config', 'vitest', 'vite', diff --git a/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts b/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts index c24e5c865..5e7bff5ab 100644 --- a/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts +++ b/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts @@ -14,7 +14,7 @@ const selectors = [ ]; const settings = { - entryPoint: 'packages/@core/base/design/src/css/global.css', + entryPoint: 'internal/tailwind-config/src/theme.css', selectors, }; diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json new file mode 100644 index 000000000..6701907c7 --- /dev/null +++ b/internal/tailwind-config/package.json @@ -0,0 +1,38 @@ +{ + "name": "@vben/tailwind-config", + "version": "5.7.0", + "private": true, + "homepage": "https://github.com/vbenjs/vue-vben-admin", + "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", + "repository": { + "type": "git", + "url": "git+https://github.com/vbenjs/vue-vben-admin.git", + "directory": "internal/tailwind-config" + }, + "license": "MIT", + "type": "module", + "files": [ + "src" + ], + "sideEffects": [ + "**/*.css" + ], + "main": "./src/index.ts", + "module": "./src/index.ts", + "types": "./src/index.ts", + "exports": { + ".": { + "types": "./src/index.ts", + "default": "./src/index.ts" + }, + "./theme": { + "default": "./src/theme.css" + } + }, + "dependencies": { + "@iconify/tailwind4": "catalog:", + "@tailwindcss/typography": "catalog:", + "tailwindcss": "catalog:", + "tw-animate-css": "catalog:" + } +} diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts new file mode 100644 index 000000000..5b1d5b4cf --- /dev/null +++ b/internal/tailwind-config/src/index.ts @@ -0,0 +1 @@ +import './theme.css'; diff --git a/internal/tailwind-config/src/theme.css b/internal/tailwind-config/src/theme.css new file mode 100644 index 000000000..c212dc66e --- /dev/null +++ b/internal/tailwind-config/src/theme.css @@ -0,0 +1,569 @@ +@import 'tailwindcss'; +@import 'tw-animate-css'; + +@plugin '@tailwindcss/typography'; +@plugin '@iconify/tailwind4'; + +/* Monorepo source detection: scan all packages and apps for utility classes */ +@source '../../../packages/'; +@source '../../../apps/'; +@source '../../../docs/'; +@source '../../../playground/'; + +/* Dark mode uses .dark class selector, not prefers-color-scheme */ +@custom-variant dark (&:is(.dark *)); + +/* Explicitly pin Tailwind v4 dynamic spacing for classes like w-150/h-55. */ +@theme { + --spacing: 0.25rem; +} + +@theme inline { + /* Font */ + --font-sans: var(--font-family); + + /* Border Radius */ + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + /* Box Shadow */ + --shadow-float: + 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), + 0 9px 28px 8px rgb(0 0 0 / 5%); + + /* Animations */ + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + --animate-collapsible-down: collapsible-down 0.2s ease-in-out; + --animate-collapsible-up: collapsible-up 0.2s ease-in-out; + --animate-float: float 5s linear 0ms infinite; + + /* ===== Semantic Colors (shadcn-ui) ===== */ + + --color-background: hsl(var(--background)); + --color-background-deep: hsl(var(--background-deep)); + --color-foreground: hsl(var(--foreground)); + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + --color-accent-hover: hsl(var(--accent-hover)); + --color-accent-lighter: hsl(var(--accent-lighter)); + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-input-background: hsl(var(--input-background)); + --color-ring: hsl(var(--ring)); + --color-secondary: hsl(var(--secondary)); + --color-secondary-desc: hsl(var(--secondary-desc)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + /* ===== Custom Semantic Colors ===== */ + + --color-header: hsl(var(--header)); + --color-heavy: hsl(var(--heavy)); + --color-heavy-foreground: hsl(var(--heavy-foreground)); + --color-main: hsl(var(--main)); + --color-overlay: hsl(var(--overlay)); + --color-overlay-content: hsl(var(--overlay-content)); + --color-sidebar: hsl(var(--sidebar)); + --color-sidebar-deep: hsl(var(--sidebar-deep)); + + /* ===== Primary Palette ===== */ + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + --color-primary-50: hsl(var(--primary-50)); + --color-primary-100: hsl(var(--primary-100)); + --color-primary-200: hsl(var(--primary-200)); + --color-primary-300: hsl(var(--primary-300)); + --color-primary-400: hsl(var(--primary-400)); + --color-primary-500: hsl(var(--primary-500)); + --color-primary-600: hsl(var(--primary-600)); + --color-primary-700: hsl(var(--primary-700)); + --color-primary-active: hsl(var(--primary-700)); + --color-primary-background-light: hsl(var(--primary-200)); + --color-primary-background-lighter: hsl(var(--primary-100)); + --color-primary-background-lightest: hsl(var(--primary-50)); + --color-primary-border: hsl(var(--primary-400)); + --color-primary-border-light: hsl(var(--primary-300)); + --color-primary-hover: hsl(var(--primary-600)); + --color-primary-text: hsl(var(--primary-500)); + --color-primary-text-active: hsl(var(--primary-700)); + --color-primary-text-hover: hsl(var(--primary-600)); + + /* ===== Destructive Palette ===== */ + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + --color-destructive-50: hsl(var(--destructive-50)); + --color-destructive-100: hsl(var(--destructive-100)); + --color-destructive-200: hsl(var(--destructive-200)); + --color-destructive-300: hsl(var(--destructive-300)); + --color-destructive-400: hsl(var(--destructive-400)); + --color-destructive-500: hsl(var(--destructive-500)); + --color-destructive-600: hsl(var(--destructive-600)); + --color-destructive-700: hsl(var(--destructive-700)); + --color-destructive-active: hsl(var(--destructive-700)); + --color-destructive-background-light: hsl(var(--destructive-200)); + --color-destructive-background-lighter: hsl(var(--destructive-100)); + --color-destructive-background-lightest: hsl(var(--destructive-50)); + --color-destructive-border: hsl(var(--destructive-400)); + --color-destructive-border-light: hsl(var(--destructive-300)); + --color-destructive-hover: hsl(var(--destructive-600)); + --color-destructive-text: hsl(var(--destructive-500)); + --color-destructive-text-active: hsl(var(--destructive-700)); + --color-destructive-text-hover: hsl(var(--destructive-600)); + + /* ===== Success Palette ===== */ + + --color-success: hsl(var(--success)); + --color-success-foreground: hsl(var(--success-foreground)); + --color-success-50: hsl(var(--success-50)); + --color-success-100: hsl(var(--success-100)); + --color-success-200: hsl(var(--success-200)); + --color-success-300: hsl(var(--success-300)); + --color-success-400: hsl(var(--success-400)); + --color-success-500: hsl(var(--success-500)); + --color-success-600: hsl(var(--success-600)); + --color-success-700: hsl(var(--success-700)); + --color-success-active: hsl(var(--success-700)); + --color-success-background-light: hsl(var(--success-200)); + --color-success-background-lighter: hsl(var(--success-100)); + --color-success-background-lightest: hsl(var(--success-50)); + --color-success-border: hsl(var(--success-400)); + --color-success-border-light: hsl(var(--success-300)); + --color-success-hover: hsl(var(--success-600)); + --color-success-text: hsl(var(--success-500)); + --color-success-text-active: hsl(var(--success-700)); + --color-success-text-hover: hsl(var(--success-600)); + + /* ===== Warning Palette ===== */ + + --color-warning: hsl(var(--warning)); + --color-warning-foreground: hsl(var(--warning-foreground)); + --color-warning-50: hsl(var(--warning-50)); + --color-warning-100: hsl(var(--warning-100)); + --color-warning-200: hsl(var(--warning-200)); + --color-warning-300: hsl(var(--warning-300)); + --color-warning-400: hsl(var(--warning-400)); + --color-warning-500: hsl(var(--warning-500)); + --color-warning-600: hsl(var(--warning-600)); + --color-warning-700: hsl(var(--warning-700)); + --color-warning-active: hsl(var(--warning-700)); + --color-warning-background-light: hsl(var(--warning-200)); + --color-warning-background-lighter: hsl(var(--warning-100)); + --color-warning-background-lightest: hsl(var(--warning-50)); + --color-warning-border: hsl(var(--warning-400)); + --color-warning-border-light: hsl(var(--warning-300)); + --color-warning-hover: hsl(var(--warning-600)); + --color-warning-text: hsl(var(--warning-500)); + --color-warning-text-active: hsl(var(--warning-700)); + --color-warning-text-hover: hsl(var(--warning-600)); + + /* ===== Green Palette (alias for success shades) ===== */ + + --color-green-50: hsl(var(--green-50)); + --color-green-100: hsl(var(--green-100)); + --color-green-200: hsl(var(--green-200)); + --color-green-300: hsl(var(--green-300)); + --color-green-400: hsl(var(--green-400)); + --color-green-500: hsl(var(--green-500)); + --color-green-600: hsl(var(--green-600)); + --color-green-700: hsl(var(--green-700)); + --color-green-active: hsl(var(--green-700)); + --color-green-background-light: hsl(var(--green-200)); + --color-green-background-lighter: hsl(var(--green-100)); + --color-green-background-lightest: hsl(var(--green-50)); + --color-green-border: hsl(var(--green-400)); + --color-green-border-light: hsl(var(--green-300)); + --color-green-foreground: hsl(var(--success-foreground)); + --color-green-hover: hsl(var(--green-600)); + --color-green-text: hsl(var(--green-500)); + --color-green-text-active: hsl(var(--green-700)); + --color-green-text-hover: hsl(var(--green-600)); + + /* ===== Red Palette (alias for destructive shades) ===== */ + + --color-red-50: hsl(var(--red-50)); + --color-red-100: hsl(var(--red-100)); + --color-red-200: hsl(var(--red-200)); + --color-red-300: hsl(var(--red-300)); + --color-red-400: hsl(var(--red-400)); + --color-red-500: hsl(var(--red-500)); + --color-red-600: hsl(var(--red-600)); + --color-red-700: hsl(var(--red-700)); + --color-red-active: hsl(var(--red-700)); + --color-red-background-light: hsl(var(--red-200)); + --color-red-background-lighter: hsl(var(--red-100)); + --color-red-background-lightest: hsl(var(--red-50)); + --color-red-border: hsl(var(--red-400)); + --color-red-border-light: hsl(var(--red-300)); + --color-red-foreground: hsl(var(--destructive-foreground)); + --color-red-hover: hsl(var(--red-600)); + --color-red-text: hsl(var(--red-500)); + --color-red-text-active: hsl(var(--red-700)); + --color-red-text-hover: hsl(var(--red-600)); + + /* ===== Yellow Palette (alias for warning shades) ===== */ + + --color-yellow-50: hsl(var(--yellow-50)); + --color-yellow-100: hsl(var(--yellow-100)); + --color-yellow-200: hsl(var(--yellow-200)); + --color-yellow-300: hsl(var(--yellow-300)); + --color-yellow-400: hsl(var(--yellow-400)); + --color-yellow-500: hsl(var(--yellow-500)); + --color-yellow-600: hsl(var(--yellow-600)); + --color-yellow-700: hsl(var(--yellow-700)); + --color-yellow-active: hsl(var(--yellow-700)); + --color-yellow-background-light: hsl(var(--yellow-200)); + --color-yellow-background-lighter: hsl(var(--yellow-100)); + --color-yellow-background-lightest: hsl(var(--yellow-50)); + --color-yellow-border: hsl(var(--yellow-400)); + --color-yellow-border-light: hsl(var(--yellow-300)); + --color-yellow-foreground: hsl(var(--warning-foreground)); + --color-yellow-hover: hsl(var(--yellow-600)); + --color-yellow-text: hsl(var(--yellow-500)); + --color-yellow-text-active: hsl(var(--yellow-700)); + --color-yellow-text-hover: hsl(var(--yellow-600)); +} + +/* Keyframes */ +@keyframes accordion-down { + from { + height: 0; + } + + to { + height: var(--reka-accordion-content-height); + } +} + +@keyframes accordion-up { + from { + height: var(--reka-accordion-content-height); + } + + to { + height: 0; + } +} + +@keyframes collapsible-down { + from { + height: 0; + } + + to { + height: var(--reka-collapsible-content-height); + } +} + +@keyframes collapsible-up { + from { + height: var(--reka-collapsible-content-height); + } + + to { + height: 0; + } +} + +@keyframes float { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-20px); + } + + 100% { + transform: translateY(0); + } +} + +/* Base styles */ +@layer base { + *, + ::after, + ::before { + @apply border-border outline-ring/50; + + box-sizing: border-box; + border-style: solid; + border-width: 0; + } + + html { + @apply text-foreground bg-background font-sans; + + scroll-behavior: smooth; + font-size: var(--font-size-base, 16px); + font-variation-settings: normal; + font-synthesis-weight: none; + line-height: 1.15; + text-rendering: optimizelegibility; + text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + } + + #app, + body, + html { + @apply size-full; + } + + body { + min-height: 100vh; + } + + a, + a:active, + a:hover, + a:link, + a:visited { + @apply no-underline; + } + + ::view-transition-new(root), + ::view-transition-old(root) { + @apply animate-none mix-blend-normal; + } + + ::view-transition-old(root) { + @apply z-1; + } + + ::view-transition-new(root) { + @apply z-2147483646; + } + + html.dark::view-transition-old(root) { + @apply z-2147483646; + } + + html.dark::view-transition-new(root) { + @apply z-1; + } + + input::placeholder, + textarea::placeholder { + @apply opacity-100; + } + + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + @apply m-0 appearance-none; + } + + /* Only adjust scrollbar for non-macOS */ + html:not([data-platform='macOs']) { + ::-webkit-scrollbar { + @apply h-2.5 w-2.5; + } + + ::-webkit-scrollbar-thumb { + @apply bg-border rounded-sm border-none; + } + + ::-webkit-scrollbar-track { + @apply rounded-sm border-none bg-transparent shadow-none; + } + + ::-webkit-scrollbar-button { + @apply hidden; + } + } +} + +/* Custom utilities (v4 @utility syntax) */ +@utility flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +@utility flex-col-center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +/* Component styles (complex selectors, not convertible to @utility) */ +.outline-box { + @apply outline-border relative cursor-pointer rounded-md p-1 outline-1; +} + +.outline-box::after { + @apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""]; +} + +.outline-box.outline-box-active { + @apply outline-primary outline-2; +} + +.outline-box.outline-box-active::after { + display: none; +} + +.outline-box:not(.outline-box-active):hover::after { + @apply outline-primary top-0 left-0 h-full w-full p-1 opacity-100; +} + +.vben-link { + @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer; +} + +.card-box { + @apply bg-card text-card-foreground border-border rounded-xl border; +} + +/* Enter animations (converted from enterAnimationPlugin) */ +@keyframes enter-x-animation { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes enter-y-animation { + to { + opacity: 1; + transform: translateY(0); + } +} + +.enter-x:nth-child(1) { + opacity: 0; + transform: translateX(50px); + animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; +} + +.enter-x:nth-child(2) { + opacity: 0; + transform: translateX(50px); + animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; +} + +.enter-x:nth-child(3) { + opacity: 0; + transform: translateX(50px); + animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; +} + +.enter-x:nth-child(4) { + opacity: 0; + transform: translateX(50px); + animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; +} + +.enter-x:nth-child(5) { + opacity: 0; + transform: translateX(50px); + animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; +} + +.enter-y:nth-child(1) { + opacity: 0; + transform: translateY(50px); + animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; +} + +.enter-y:nth-child(2) { + opacity: 0; + transform: translateY(50px); + animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; +} + +.enter-y:nth-child(3) { + opacity: 0; + transform: translateY(50px); + animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; +} + +.enter-y:nth-child(4) { + opacity: 0; + transform: translateY(50px); + animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; +} + +.enter-y:nth-child(5) { + opacity: 0; + transform: translateY(50px); + animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; +} + +.-enter-x:nth-child(1) { + opacity: 0; + transform: translateX(-50px); + animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; +} + +.-enter-x:nth-child(2) { + opacity: 0; + transform: translateX(-50px); + animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; +} + +.-enter-x:nth-child(3) { + opacity: 0; + transform: translateX(-50px); + animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; +} + +.-enter-x:nth-child(4) { + opacity: 0; + transform: translateX(-50px); + animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; +} + +.-enter-x:nth-child(5) { + opacity: 0; + transform: translateX(-50px); + animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; +} + +.-enter-y:nth-child(1) { + opacity: 0; + transform: translateY(-50px); + animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; +} + +.-enter-y:nth-child(2) { + opacity: 0; + transform: translateY(-50px); + animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; +} + +.-enter-y:nth-child(3) { + opacity: 0; + transform: translateY(-50px); + animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; +} + +.-enter-y:nth-child(4) { + opacity: 0; + transform: translateY(-50px); + animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; +} + +.-enter-y:nth-child(5) { + opacity: 0; + transform: translateY(-50px); + animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; +} + +html.invert-mode { + @apply invert; +} + +html.grayscale-mode { + @apply grayscale; +} diff --git a/internal/vite-config/src/plugins/tailwind-reference.ts b/internal/vite-config/src/plugins/tailwind-reference.ts index 8c3185125..86460494c 100644 --- a/internal/vite-config/src/plugins/tailwind-reference.ts +++ b/internal/vite-config/src/plugins/tailwind-reference.ts @@ -1,6 +1,6 @@ import type { Plugin } from 'vite'; -const REFERENCE_LINE = '@reference "@vben-core/design/theme";\n'; +const REFERENCE_LINE = '@reference "@vben/tailwind-config/theme";\n'; /** * Auto-inject @reference into Vue SFC