From 2fbe46141745c577a592ac200fb6133391c8091a Mon Sep 17 00:00:00 2001 From: zhanglei Date: Tue, 17 Mar 2026 16:04:10 +0800 Subject: [PATCH] init --- vue-vben-admin/packages/styles/README.md | 19 +++++ vue-vben-admin/packages/styles/package.json | 37 +++++++++ .../packages/styles/src/antd/index.css | 75 ++++++++++++++++++ .../packages/styles/src/antdv-next/index.css | 77 +++++++++++++++++++ .../packages/styles/src/ele/index.css | 44 +++++++++++ .../packages/styles/src/global/index.scss | 1 + vue-vben-admin/packages/styles/src/index.ts | 1 + .../packages/styles/src/naive/index.css | 20 +++++ vue-vben-admin/packages/styles/tsconfig.json | 6 ++ 9 files changed, 280 insertions(+) create mode 100644 vue-vben-admin/packages/styles/README.md create mode 100644 vue-vben-admin/packages/styles/package.json create mode 100644 vue-vben-admin/packages/styles/src/antd/index.css create mode 100644 vue-vben-admin/packages/styles/src/antdv-next/index.css create mode 100644 vue-vben-admin/packages/styles/src/ele/index.css create mode 100644 vue-vben-admin/packages/styles/src/global/index.scss create mode 100644 vue-vben-admin/packages/styles/src/index.ts create mode 100644 vue-vben-admin/packages/styles/src/naive/index.css create mode 100644 vue-vben-admin/packages/styles/tsconfig.json diff --git a/vue-vben-admin/packages/styles/README.md b/vue-vben-admin/packages/styles/README.md new file mode 100644 index 0000000..4826446 --- /dev/null +++ b/vue-vben-admin/packages/styles/README.md @@ -0,0 +1,19 @@ +# @vben/styles + +用于多个 `app` 公用的样式文件，继承了 `@vben-core/design` 的所有能力。业务上有通用的样式文件可以放在这里。 + +## 用法 + +### 添加依赖 + +```bash +# 进入目标应用目录，例如 apps/xxxx-app +# cd apps/xxxx-app +pnpm add @vben/styles +``` + +### 使用 + +```ts +import '@vben/styles'; +``` diff --git a/vue-vben-admin/packages/styles/package.json b/vue-vben-admin/packages/styles/package.json new file mode 100644 index 0000000..79125f1 --- /dev/null +++ b/vue-vben-admin/packages/styles/package.json @@ -0,0 +1,37 @@ +{ + "name": "@vben/styles", + "version": "5.6.0", + "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": "packages/styles" + }, + "license": "MIT", + "type": "module", + "exports": { + ".": { + "types": "./src/index.ts", + "default": "./src/index.ts" + }, + "./antd": { + "default": "./src/antd/index.css" + }, + "./antdv-next": { + "default": "./src/antdv-next/index.css" + }, + "./ele": { + "default": "./src/ele/index.css" + }, + "./naive": { + "default": "./src/naive/index.css" + }, + "./global": { + "default": "./src/global/index.scss" + } + }, + "dependencies": { + "@vben-core/design": "workspace:*" + } +} diff --git a/vue-vben-admin/packages/styles/src/antd/index.css b/vue-vben-admin/packages/styles/src/antd/index.css new file mode 100644 index 0000000..4dec637 --- /dev/null +++ b/vue-vben-admin/packages/styles/src/antd/index.css @@ -0,0 +1,75 @@ +/* ant-design-vue 组件库的一些样式重置 */ + +.ant-app { + width: 100%; + height: 100%; + overscroll-behavior: none; + color: inherit; +} + +.ant-btn { + .anticon { + display: inline-flex; + } + + /* * 修复按钮添加图标时的位置问题 */ + > svg { + display: inline-block; + } + + > svg + span { + margin-inline-start: 6px; + } +} + +.ant-tag { + > svg { + display: inline-block; + } + + > svg + span { + margin-inline-start: 4px; + } +} + +.ant-message-notice-content, +.ant-notification-notice { + @apply dark:border-border/60 dark:border; +} + +.form-valid-error { + /** select 选择器的样式 */ + + .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) { + border-color: hsl(var(--destructive)) !important; + } + + .ant-select-focused .ant-select-selector { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important; + } + + /** 数字输入框样式 */ + .ant-input-number-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + } + + /** 密码输入框样式 */ + .ant-input-affix-wrapper:hover { + border-color: hsl(var(--destructive)); + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + } + + .ant-input:not(.valid-success) { + border-color: hsl(var(--destructive)) !important; + } +} + +/** 区间选择器下面来回切换时的样式 */ +.ant-app .form-valid-error .ant-picker-active-bar { + background-color: hsl(var(--destructive)); +} + +/** 时间选择器的样式 */ +.ant-app .form-valid-error .ant-picker-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} diff --git a/vue-vben-admin/packages/styles/src/antdv-next/index.css b/vue-vben-admin/packages/styles/src/antdv-next/index.css new file mode 100644 index 0000000..420dfe9 --- /dev/null +++ b/vue-vben-admin/packages/styles/src/antdv-next/index.css @@ -0,0 +1,77 @@ +/* antdv-next 组件库的一些样式重置 */ + +.ant-app { + width: 100%; + height: 100%; + overscroll-behavior: none; + color: inherit; +} + +.ant-btn { + .anticon { + display: inline-flex; + } + + /* * 修复按钮添加图标时的位置问题 */ + > .ant-btn-icon { + svg { + display: inline-block; + } + + svg + span { + margin-inline-start: 6px; + } + } +} + +.ant-tag { + > svg { + display: inline-block; + } + + > svg + span { + margin-inline-start: 4px; + } +} + +.ant-message-notice-content, +.ant-notification-notice { + @apply dark:border-border/60 dark:border; +} + +.form-valid-error { + /** select 选择器的样式 */ + + .ant-select:not(.valid-success) { + border-color: hsl(var(--destructive)) !important; + } + + .ant-select-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important; + } + + /** 数字输入框样式 */ + .ant-input-number-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + } + + /** 密码输入框样式 */ + .ant-input-affix-wrapper:hover { + border-color: hsl(var(--destructive)); + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); + } + + .ant-input:not(.valid-success) { + border-color: hsl(var(--destructive)) !important; + } +} + +/** 区间选择器下面来回切换时的样式 */ +.ant-app .form-valid-error .ant-picker-active-bar { + background-color: hsl(var(--destructive)); +} + +/** 时间选择器的样式 */ +.ant-app .form-valid-error .ant-picker-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} diff --git a/vue-vben-admin/packages/styles/src/ele/index.css b/vue-vben-admin/packages/styles/src/ele/index.css new file mode 100644 index 0000000..4ee8f7b --- /dev/null +++ b/vue-vben-admin/packages/styles/src/ele/index.css @@ -0,0 +1,44 @@ +.el-card { + --el-card-border-radius: var(--radius) !important; +} + +.form-valid-error { + /** select 选择器的样式 */ + .el-select .el-select__wrapper { + box-shadow: 0 0 0 1px var(--el-color-danger) inset; + } + + /** input 选择器的样式 */ + .el-input .el-input__wrapper { + box-shadow: 0 0 0 1px var(--el-color-danger) inset; + } + + /** radio和checkbox 选择器的样式 */ + .el-radio .el-radio__inner, + .el-checkbox .el-checkbox__inner { + border: 1px solid var(--el-color-danger); + } + + .el-checkbox-button .el-checkbox-button__inner, + .el-radio-button .el-radio-button__inner { + border: 1px solid var(--el-color-danger); + } + + .el-checkbox-button:first-child .el-checkbox-button__inner, + .el-radio-button:first-child .el-radio-button__inner { + border-left: 1px solid var(--el-color-danger); + } + + .el-checkbox-button:not(:first-child) .el-checkbox-button__inner, + .el-radio-button:not(:first-child) .el-radio-button__inner { + border-left: none; + } + + .el-textarea .el-textarea__inner { + border: 1px solid var(--el-color-danger); + } +} + +html .el-loading-mask { + z-index: 1000; +} diff --git a/vue-vben-admin/packages/styles/src/global/index.scss b/vue-vben-admin/packages/styles/src/global/index.scss new file mode 100644 index 0000000..c7af9bb --- /dev/null +++ b/vue-vben-admin/packages/styles/src/global/index.scss @@ -0,0 +1 @@ +@use '@vben-core/design/bem' as *; diff --git a/vue-vben-admin/packages/styles/src/index.ts b/vue-vben-admin/packages/styles/src/index.ts new file mode 100644 index 0000000..b375456 --- /dev/null +++ b/vue-vben-admin/packages/styles/src/index.ts @@ -0,0 +1 @@ +import '@vben-core/design'; diff --git a/vue-vben-admin/packages/styles/src/naive/index.css b/vue-vben-admin/packages/styles/src/naive/index.css new file mode 100644 index 0000000..a775116 --- /dev/null +++ b/vue-vben-admin/packages/styles/src/naive/index.css @@ -0,0 +1,20 @@ +.form-valid-error { + .n-base-selection__state-border, + .n-input__state-border, + .n-radio-group__splitor { + border: var(--n-border-error); + } + + .n-radio-group .n-radio-button, + .n-radio-group .n-radio-group__splitor { + --n-button-border-color: rgb(255 56 96); + } + + .n-radio__dot { + --n-box-shadow: inset 0 0 0 1px rgb(255 56 96); + } + + .n-checkbox-box__border { + --n-border: 1px solid rgb(255 56 96); + } +} diff --git a/vue-vben-admin/packages/styles/tsconfig.json b/vue-vben-admin/packages/styles/tsconfig.json new file mode 100644 index 0000000..ce1a891 --- /dev/null +++ b/vue-vben-admin/packages/styles/tsconfig.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "@vben/tsconfig/web.json", + "include": ["src"], + "exclude": ["node_modules"] +}