From 87b8b3a34ba4f89df54786458668d3e05056903f Mon Sep 17 00:00:00 2001 From: lzh Date: Thu, 18 Dec 2025 17:16:18 +0800 Subject: [PATCH 01/29] =?UTF-8?q?chore:=20=E6=9C=AC=E5=9C=B0=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E6=8E=A5=E5=8F=A3=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/.env.development | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web-antd/.env.development b/apps/web-antd/.env.development index e0210c648..cff255764 100644 --- a/apps/web-antd/.env.development +++ b/apps/web-antd/.env.development @@ -4,7 +4,7 @@ VITE_PORT=5666 VITE_BASE=/ # 请求路径 -VITE_BASE_URL=http://172.17.16.14:48080 +VITE_BASE_URL=http://127.0.0.1:48080 # 接口地址 VITE_GLOB_API_URL=/admin-api # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务 -- 2.49.1 From f6b2d8b82f77469d0ba2d47ade406c0077a639cb Mon Sep 17 00:00:00 2001 From: lzh Date: Thu, 18 Dec 2025 17:19:40 +0800 Subject: [PATCH 02/29] =?UTF-8?q?chore:=20=E9=A6=96=E9=A1=B5=E6=96=87?= =?UTF-8?q?=E5=AD=97=E5=86=85=E5=AE=B9=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/preferences.ts | 2 +- apps/web-ele/src/preferences.ts | 2 +- apps/web-naive/src/preferences.ts | 2 +- apps/web-tdesign/src/preferences.ts | 2 +- .../common-ui/src/ui/authentication/login.vue | 12 +++++------- packages/locales/src/langs/en-US/authentication.json | 4 ++-- packages/locales/src/langs/zh-CN/authentication.json | 4 ++-- 7 files changed, 13 insertions(+), 15 deletions(-) diff --git a/apps/web-antd/src/preferences.ts b/apps/web-antd/src/preferences.ts index 73eb135cb..16616a40f 100644 --- a/apps/web-antd/src/preferences.ts +++ b/apps/web-antd/src/preferences.ts @@ -20,6 +20,6 @@ export const overridesPreferences = defineOverridesPreferences({ }, copyright: { companyName: import.meta.env.VITE_APP_TITLE, - companySiteLink: 'https://gitee.com/yudaocode/yudao-ui-admin-vben', + companySiteLink: 'https://www.vs-cushwake.com/', }, }); diff --git a/apps/web-ele/src/preferences.ts b/apps/web-ele/src/preferences.ts index 73eb135cb..16616a40f 100644 --- a/apps/web-ele/src/preferences.ts +++ b/apps/web-ele/src/preferences.ts @@ -20,6 +20,6 @@ export const overridesPreferences = defineOverridesPreferences({ }, copyright: { companyName: import.meta.env.VITE_APP_TITLE, - companySiteLink: 'https://gitee.com/yudaocode/yudao-ui-admin-vben', + companySiteLink: 'https://www.vs-cushwake.com/', }, }); diff --git a/apps/web-naive/src/preferences.ts b/apps/web-naive/src/preferences.ts index 73eb135cb..16616a40f 100644 --- a/apps/web-naive/src/preferences.ts +++ b/apps/web-naive/src/preferences.ts @@ -20,6 +20,6 @@ export const overridesPreferences = defineOverridesPreferences({ }, copyright: { companyName: import.meta.env.VITE_APP_TITLE, - companySiteLink: 'https://gitee.com/yudaocode/yudao-ui-admin-vben', + companySiteLink: 'https://www.vs-cushwake.com/', }, }); diff --git a/apps/web-tdesign/src/preferences.ts b/apps/web-tdesign/src/preferences.ts index 73eb135cb..16616a40f 100644 --- a/apps/web-tdesign/src/preferences.ts +++ b/apps/web-tdesign/src/preferences.ts @@ -20,6 +20,6 @@ export const overridesPreferences = defineOverridesPreferences({ }, copyright: { companyName: import.meta.env.VITE_APP_TITLE, - companySiteLink: 'https://gitee.com/yudaocode/yudao-ui-admin-vben', + companySiteLink: 'https://www.vs-cushwake.com/', }, }); diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue index c2a9c4bb6..447409878 100644 --- a/packages/effects/common-ui/src/ui/authentication/login.vue +++ b/packages/effects/common-ui/src/ui/authentication/login.vue @@ -14,8 +14,6 @@ import { useVbenForm } from '@vben-core/form-ui'; import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui'; import Title from './auth-title.vue'; -import DocLink from './doc-link.vue'; -import ThirdPartyLogin from './third-party-login.vue'; interface Props extends AuthenticationProps { formSchema?: VbenFormSchema[]; @@ -178,14 +176,14 @@ defineExpose({ - + - + - + diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json index d1fd9b77d..5d87c58b5 100644 --- a/packages/locales/src/langs/en-US/authentication.json +++ b/packages/locales/src/langs/en-US/authentication.json @@ -1,7 +1,7 @@ { "welcomeBack": "Welcome Back", - "pageTitle": "Plug-and-play Admin system", - "pageDesc": "Efficient, versatile frontend template", + "pageTitle": "Smart Space Digital Twin Hub", + "pageDesc": "Unified command of people, assets, and spaces powered by comprehensive AIoT perception.", "loginSuccess": "Login Successful", "loginSuccessDesc": "Welcome Back", "loginSubtitle": "Enter your account details to manage your projects", diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json index 1eb61aed6..6d27f6fe7 100644 --- a/packages/locales/src/langs/zh-CN/authentication.json +++ b/packages/locales/src/langs/zh-CN/authentication.json @@ -1,7 +1,7 @@ { "welcomeBack": "欢迎回来", - "pageTitle": "开箱即用的大型中后台管理系统", - "pageDesc": "工程化、高性能、跨组件库的前端模版", + "pageTitle": "智慧空间·全域数字感知中枢", + "pageDesc": "融合AIoT全感知能力，实现人、物、空间的一屏统管与高效调度", "loginSuccess": "登录成功", "loginSuccessDesc": "欢迎回来", "loginSubtitle": "请输入您的帐户信息以开始管理您的项目", -- 2.49.1 From ececf4cdaeedcc4baaf1753e0945ccf3245ef47c Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 09:26:53 +0800 Subject: [PATCH 03/29] =?UTF-8?q?chore:=20=E4=B8=BB=E9=A2=98=E8=89=B2?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AAamber?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/@core/base/typings/src/app.d.ts | 1 + packages/@core/preferences/src/config.ts | 4 ++-- packages/@core/preferences/src/constants.ts | 6 +++++- packages/effects/layouts/src/authentication/toolbar.vue | 5 ++--- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts index f2b443359..346c66c15 100644 --- a/packages/@core/base/typings/src/app.d.ts +++ b/packages/@core/base/typings/src/app.d.ts @@ -18,6 +18,7 @@ type ThemeModeType = 'auto' | 'dark' | 'light'; type PreferencesButtonPositionType = 'auto' | 'fixed' | 'header'; type BuiltinThemeType = + | 'amber' | 'custom' | 'deep-blue' | 'deep-green' diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 5b8d72363..9a7221e16 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -109,9 +109,9 @@ const defaultPreferences: Preferences = { wheelable: true, }, theme: { - builtinType: 'default', + builtinType: 'amber', colorDestructive: 'hsl(348 100% 61%)', - colorPrimary: 'hsl(212 100% 45%)', + colorPrimary: 'hsl(37 100% 52%)', colorSuccess: 'hsl(144 57% 58%)', colorWarning: 'hsl(42 84% 61%)', mode: 'dark', diff --git a/packages/@core/preferences/src/constants.ts b/packages/@core/preferences/src/constants.ts index 7ec2007d0..515388107 100644 --- a/packages/@core/preferences/src/constants.ts +++ b/packages/@core/preferences/src/constants.ts @@ -8,6 +8,10 @@ interface BuiltinThemePreset { } const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ + { + color: 'hsl(37 100% 52%)', + type: 'amber', + }, { color: 'hsl(212 100% 45%)', type: 'default', @@ -112,7 +116,7 @@ const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [ }, ]; -export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7); +export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS }; diff --git a/packages/effects/layouts/src/authentication/toolbar.vue b/packages/effects/layouts/src/authentication/toolbar.vue index 94d321ab0..cf0fce562 100644 --- a/packages/effects/layouts/src/authentication/toolbar.vue +++ b/packages/effects/layouts/src/authentication/toolbar.vue @@ -6,7 +6,6 @@ import { computed } from 'vue'; import { preferences } from '@vben/preferences'; import { - AuthenticationColorToggle, AuthenticationLayoutToggle, LanguageToggle, ThemeToggle, @@ -24,7 +23,7 @@ const props = withDefaults(defineProps(), { toolbarList: () => ['color', 'language', 'layout', 'theme'], }); -const showColor = computed(() => props.toolbarList.includes('color')); +// const showColor = computed(() => props.toolbarList.includes('color')); const showLayout = computed(() => props.toolbarList.includes('layout')); const showLanguage = computed(() => props.toolbarList.includes('language')); const showTheme = computed(() => props.toolbarList.includes('theme')); @@ -39,7 +38,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme')); > -- 2.49.1 From a63656736684db385765ab4a07de16dd9ea855b6 Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 11:45:58 +0800 Subject: [PATCH 04/29] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E7=A0=81=E4=B8=8D=E6=A0=A1=E9=AA=8C=E6=89=8B=E6=9C=BA?= =?UTF-8?q?=E5=8F=B7=E8=BE=93=E5=85=A5=E7=9A=84bug=20&=20=E5=B0=86?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E6=94=B9=E4=B8=BA6=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/_core/authentication/code-login.vue | 2 +- .../src/views/_core/authentication/forget-password.vue | 2 +- .../ui-kit/shadcn-ui/src/components/pin-input/input.vue | 8 ++++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/web-antd/src/views/_core/authentication/code-login.vue index 1862abf8c..98d75b47c 100644 --- a/apps/web-antd/src/views/_core/authentication/code-login.vue +++ b/apps/web-antd/src/views/_core/authentication/code-login.vue @@ -24,7 +24,7 @@ const accessStore = useAccessStore(); const tenantEnable = isTenantEnable(); const loading = ref(false); -const CODE_LENGTH = 4; +const CODE_LENGTH = 6; const loginRef = ref(); diff --git a/apps/web-antd/src/views/_core/authentication/forget-password.vue b/apps/web-antd/src/views/_core/authentication/forget-password.vue index 4837cf7dc..4534b18d6 100644 --- a/apps/web-antd/src/views/_core/authentication/forget-password.vue +++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue @@ -24,7 +24,7 @@ const router = useRouter(); const tenantEnable = isTenantEnable(); const loading = ref(false); -const CODE_LENGTH = 4; +const CODE_LENGTH = 6; const forgetPasswordRef = ref(); /** 获取租户列表，并默认选中 */ diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue index a8557788d..595b7275b 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue @@ -59,12 +59,16 @@ function handleComplete(e: string[]) { async function handleSend(e: Event) { try { e?.preventDefault(); + // 先执行验证码发送逻辑（包含手机号验证） + await handleSendCode(); + // 只有成功后才开始倒计时 countdown.value = maxTime; startCountdown(); - await handleSendCode(); } catch (error) { console.error('Failed to send code:', error); - // Consider emitting an error event or showing a notification + // 如果发送失败，确保倒计时停止 + countdown.value = 0; + clearTimeout(timer.value); emit('sendError', error); } } -- 2.49.1 From 7fd767a22ba9eb8c0a1564c99c2582f2b7fc9a39 Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:49:21 +0800 Subject: [PATCH 05/29] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=BB=93=E6=9E=84=E6=8C=87=E5=8D=97=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/PROJECT_STRUCTURE_GUIDE.md | 1130 ++++++++++++++++++++++ 1 file changed, 1130 insertions(+) create mode 100644 apps/web-antd/PROJECT_STRUCTURE_GUIDE.md diff --git a/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md new file mode 100644 index 000000000..f019dadf4 --- /dev/null +++ b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md @@ -0,0 +1,1130 @@ +# Yudao UI Admin Vben - 项目结构与开发指南 + +> **专注于 web-antd 项目** - 基于 Vue 3 + Vite + Ant Design Vue 的后台管理系统 + +## 📋 目录 + +- [项目架构](#项目架构) +- [目录结构详解](#目录结构详解) +- [通用组件库](#通用组件库) +- [配置文件说明](#配置文件说明) +- [主题定制](#主题定制) +- [登录布局定制](#登录布局定制) +- [开发调试指南](#开发调试指南) +- [本次会话修改记录](#本次会话修改记录) + +--- + +## 🏗️ 项目架构 + +### 整体结构 + +本项目采用 **Monorepo** 架构，使用 **pnpm workspace** 管理多个包： + +``` +yudao-ui-admin-vben/ +├── apps/ # 应用层 +│ ├── web-antd/ # Ant Design Vue 版本 (主要使用) +│ ├── web-ele/ # Element Plus 版本 +│ ├── web-naive/ # Naive UI 版本 +│ └── web-tdesign/ # TDesign 版本 +├── packages/ # 公共包 +│ ├── @core/ # 核心包 +│ ├── effects/ # 业务效果包 +│ ├── locales/ # 国际化 +│ ├── stores/ # 状态管理 +│ └── ... # 其他工具包 +├── internal/ # 内部工具 +│ ├── vite-config/ # Vite 配置 +│ ├── tailwind-config/ # Tailwind 配置 +│ └── lint-configs/ # 代码规范配置 +└── docs/ # 文档站点 +``` + +### 技术栈 + +| 技术 | 版本 | 说明 | +|------|------|------| +| Vue | 3.x | 渐进式 JavaScript 框架 | +| Vite | 5.x | 下一代前端构建工具 | +| TypeScript | 5.x | 类型安全 | +| Ant Design Vue | 4.x | UI 组件库 | +| Pinia | 2.x | 状态管理 | +| Vue Router | 4.x | 路由管理 | +| Tailwind CSS | 3.x | 原子化 CSS | +| VueUse | 10.x | Vue Composition API 工具集 | + +--- + +## 📁 目录结构详解 + +### apps/web-antd/ - 主应用目录 + +``` +apps/web-antd/ +├── public/ # 静态资源 +│ ├── favicon.ico # 网站图标 +│ ├── login-illustration.svg # 登录页插图 +│ ├── images/ # 图片资源 +│ ├── static/ # 静态文件 +│ └── tinymce/ # 富文本编辑器资源 +│ +├── src/ +│ ├── adapter/ # 适配器层 +│ │ ├── component.ts # 组件适配器 (全局组件注册) +│ │ ├── form.ts # 表单适配器 +│ │ └── vxe-table.ts # 表格适配器 +│ │ +│ ├── api/ # API 接口层 (201 个文件) +│ │ ├── core/ # 核心接口 (登录、权限等) +│ │ ├── system/ # 系统管理 +│ │ ├── infra/ # 基础设施 +│ │ ├── bpm/ # 工作流 +│ │ ├── mall/ # 商城 +│ │ ├── mp/ # 公众号 +│ │ ├── pay/ # 支付 +│ │ ├── ai/ # AI 相关 +│ │ ├── iot/ # 物联网 +│ │ └── erp/ # ERP +│ │ +│ ├── assets/ # 资源文件 +│ │ ├── images/ # 图片 +│ │ └── svg/ # SVG 图标 +│ │ +│ ├── components/ # 业务组件 (54 个文件) +│ │ ├── Bpmnjs/ # 工作流设计器 +│ │ ├── Button/ # 按钮组件 +│ │ ├── ContentWrap/ # 内容包裹器 +│ │ ├── Crontab/ # 定时任务配置 +│ │ ├── Dialog/ # 对话框 +│ │ ├── Editor/ # 编辑器 +│ │ ├── Form/ # 表单 +│ │ ├── Icon/ # 图标 +│ │ ├── ImageViewer/ # 图片查看器 +│ │ ├── InputNumber/ # 数字输入框 +│ │ ├── JsonEditor/ # JSON 编辑器 +│ │ ├── Search/ # 搜索 +│ │ ├── SimpleProcessDesignerV2/ # 流程设计器 V2 +│ │ ├── Table/ # 表格 +│ │ ├── UploadFile/ # 文件上传 +│ │ └── UploadImg/ # 图片上传 +│ │ +│ ├── layouts/ # 布局组件 +│ │ ├── auth.vue # 登录页布局 (自定义) +│ │ ├── auth-original.vue # 原始登录页布局 (备份) +│ │ ├── basic.vue # 基础布局 +│ │ └── index.ts # 导出 +│ │ +│ ├── locales/ # 本地化 +│ │ ├── langs/ # 语言包 +│ │ │ ├── en-US.json # 英文 +│ │ │ └── zh-CN.json # 中文 +│ │ └── index.ts +│ │ +│ ├── plugins/ # 插件 +│ │ └── form-create.ts # 表单构建器插件 +│ │ +│ ├── router/ # 路由配置 +│ │ ├── guard.ts # 路由守卫 +│ │ ├── index.ts # 路由实例 +│ │ └── routes/ # 路由定义 +│ │ ├── core.ts # 核心路由 (登录、404等) +│ │ └── modules/ # 业务路由模块 +│ │ +│ ├── store/ # 状态管理 (Pinia) +│ │ ├── index.ts +│ │ ├── modules/ +│ │ │ ├── auth.ts # 认证状态 +│ │ │ ├── dict.ts # 字典状态 +│ │ │ └── tenant.ts # 租户状态 +│ │ +│ ├── utils/ # 工具函数 +│ │ ├── dict.ts # 字典工具 +│ │ ├── tree.ts # 树形数据工具 +│ │ └── ... +│ │ +│ ├── views/ # 页面视图 (1233 个文件) +│ │ ├── _core/ # 核心页面 +│ │ │ ├── authentication/ # 认证相关 +│ │ │ │ ├── login.vue # 登录页 +│ │ │ │ ├── code-login.vue # 验证码登录 +│ │ │ │ ├── qrcode-login.vue # 二维码登录 +│ │ │ │ └── forget-password.vue # 忘记密码 +│ │ │ ├── profile/ # 个人中心 +│ │ │ └── ... +│ │ ├── system/ # 系统管理 +│ │ ├── bpm/ # 工作流 +│ │ ├── mall/ # 商城 +│ │ ├── mp/ # 公众号 +│ │ ├── pay/ # 支付 +│ │ ├── ai/ # AI +│ │ ├── iot/ # 物联网 +│ │ └── erp/ # ERP +│ │ +│ ├── app.vue # 根组件 +│ ├── bootstrap.ts # 应用启动配置 +│ ├── main.ts # 应用入口 +│ └── preferences.ts # 偏好设置 +│ +├── index.html # HTML 模板 +├── vite.config.mts # Vite 配置 +├── tsconfig.json # TypeScript 配置 +├── tailwind.config.mjs # Tailwind 配置 +├── package.json # 依赖管理 +└── LOGIN_LAYOUT_README.md # 登录布局文档 +``` + +--- + +## 🧩 通用组件库 + +### packages/@core/ - 核心组件包 + +#### 1. shadcn-ui (`packages/@core/ui-kit/shadcn-ui`) + +基于 shadcn/ui 的 Vue 组件库，提供高质量的基础 UI 组件： + +```typescript +// 导入方式 +import { + VbenButton, + VbenInput, + VbenModal, + VbenToast, + VbenDropdown, + VbenSelect, + VbenPinInput, // 验证码输入框 + VbenLoading, + VbenSpinner, + // ... 更多组件 +} from '@vben-core/shadcn-ui'; +``` + +**常用组件**： +- **按钮类**: `VbenButton`, `VbenIconButton` +- **输入类**: `VbenInput`, `VbenInputPassword`, `VbenPinInput` +- **选择类**: `VbenSelect`, `VbenDropdown`, `VbenCheckbox`, `VbenRadio` +- **反馈类**: `VbenModal`, `VbenToast`, `VbenAlert`, `VbenLoading` +- **布局类**: `VbenCard`, `VbenTabs`, `VbenCollapse` + +#### 2. form-ui (`packages/@core/ui-kit/form-ui`) + +强大的表单构建器： + +```typescript +import { useVbenForm, VbenFormSchema } from '@vben-core/form-ui'; + +// 表单配置示例 +const formSchema: VbenFormSchema[] = [ + { + component: 'VbenInput', + fieldName: 'username', + label: '用户名', + rules: z.string().min(1, { message: '请输入用户名' }), + }, + { + component: 'VbenInputPassword', + fieldName: 'password', + label: '密码', + rules: z.string().min(6, { message: '密码至少6位' }), + }, +]; + +const [Form, formApi] = useVbenForm({ schema: formSchema }); +``` + +#### 3. menu-ui (`packages/@core/ui-kit/menu-ui`) + +菜单组件，支持多级菜单、收缩展开等： + +```typescript +import { VbenMenu } from '@vben-core/menu-ui'; +``` + +#### 4. layout-ui (`packages/@core/ui-kit/layout-ui`) + +布局组件（Header, Sidebar, Content, Footer）： + +```typescript +import { BasicLayout, LayoutHeader, LayoutSidebar } from '@vben-core/layout-ui'; +``` + +#### 5. popup-ui (`packages/@core/ui-kit/popup-ui`) + +弹窗、抽屉组件： + +```typescript +import { VbenModal, VbenDrawer } from '@vben-core/popup-ui'; +``` + +--- + +### packages/effects/ - 业务效果包 + +#### 1. layouts (`packages/effects/layouts`) + +布局组件和小部件： + +```typescript +import { + // 布局组件 + AuthPageLayout, // 认证页布局 + LoginIllustration, // 登录插图 (自定义新增) + + // 小部件 + ThemeToggle, // 主题切换 + LanguageToggle, // 语言切换 + ColorToggle, // 颜色选择器 + LayoutToggle, // 布局切换 + UserDropdown, // 用户下拉菜单 + Breadcrumb, // 面包屑 + GlobalSearch, // 全局搜索 + LockScreen, // 锁屏 + Notification, // 通知 +} from '@vben/layouts'; +``` + +**目录结构**： +``` +packages/effects/layouts/src/ +├── authentication/ # 认证相关 +│ ├── authentication.vue # 认证页布局 +│ ├── icons/ +│ │ ├── login-illustration.vue # 登录插图组件 +│ │ └── slogan.vue # Logo/标语组件 +│ └── index.ts # 导出 +├── basic/ # 基础布局 +├── widgets/ # 小部件 +│ ├── theme-toggle.vue +│ ├── language-toggle.vue +│ ├── color-toggle.vue # 颜色选择器 (已修改) +│ └── ... +└── index.ts +``` + +#### 2. common-ui (`packages/effects/common-ui`) + +通用 UI 组件： + +```typescript +import { + // 认证组件 + AuthenticationLogin, // 登录表单 + AuthenticationCodeLogin, // 验证码登录 + AuthenticationForgetPassword, // 忘记密码 + AuthenticationRegister, // 注册 + + // 其他通用组件 + Page, // 页面容器 + DocAlert, // 文档提醒 + Description, // 描述列表 + Ellipsis, // 文本省略 + Iframe, // 内嵌页面 + // ... +} from '@vben/common-ui'; +``` + +#### 3. hooks (`packages/effects/hooks`) + +业务相关的 Composition API 钩子： + +```typescript +import { + useWatermark, // 水印 + useTabs, // 标签页管理 + useContentHeight, // 内容高度自适应 + isTenantEnable, // 租户功能是否启用 +} from '@vben/hooks'; +``` + +#### 4. access (`packages/effects/access`) + +权限控制： + +```typescript +import { useAccess } from '@vben/access'; + +// 权限检查 +const { hasAccessByRoles, hasAccessByCodes } = useAccess(); + +// 指令方式 + +``` + +--- + +### packages/其他包 + +#### locales - 国际化 + +```typescript +import { $t, setupI18n } from '@vben/locales'; + +// 使用翻译 +$t('authentication.login'); +$t('authentication.username'); +``` + +**语言包位置**： +- 中文: `packages/locales/src/langs/zh-CN/*.json` +- 英文: `packages/locales/src/langs/en-US/*.json` + +#### stores - 状态管理 + +```typescript +import { + useUserStore, // 用户信息 + useAccessStore, // 权限信息 + useTabsStore, // 标签页 + useAppStore, // 应用配置 +} from '@vben/stores'; + +const userStore = useUserStore(); +await userStore.fetchUserInfo(); +``` + +#### preferences - 偏好设置 + +```typescript +import { + preferences, // 偏好设置对象 + updatePreferences, // 更新偏好设置 + usePreferences, // 响应式偏好设置 +} from '@vben/preferences'; + +// 读取 +const isDark = preferences.theme.mode === 'dark'; + +// 更新 +updatePreferences({ + theme: { + colorPrimary: '#FFA00A', + builtinType: 'amber', + }, +}); +``` + +#### utils - 工具函数 + +```typescript +import { + // 路由工具 + mapTree, + resetRoutes, + + // 通用工具 + formatDate, + formatDateTime, + openWindow, + + // 验证器 + isEmail, + isPhone, + isUrl, +} from '@vben/utils'; +``` + +#### constants - 常量定义 + +```typescript +import { + // 核心常量 + LOGIN_PATH, + VBEN_DOC_URL, + + // 业务枚举 + DictEnum, + SystemEnum, + BpmEnum, + // ... +} from '@vben/constants'; +``` + +--- + +## ⚙️ 配置文件说明 + +### 1. Vite 配置 (`vite.config.mts`) + +```typescript +import { defineConfig } from '@vben/vite-config'; + +export default defineConfig(async () => { + return { + application: {}, + vite: { + server: { + proxy: { + '/admin-api': { + target: 'http://localhost:48080/admin-api', + changeOrigin: true, + rewrite: (path) => path.replace(/^\/admin-api/, ''), + }, + }, + }, + }, + }; +}); +``` + +### 2. TypeScript 配置 (`tsconfig.json`) + +```json +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "@vben/tsconfig/web-app.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "#/*": ["./src/*"] + }, + "allowJs": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] +} +``` + +**路径别名**： +- `#/*` → `./src/*` (应用内部) +- `@vben/*` → `packages/*` (公共包) + +### 3. Tailwind 配置 (`tailwind.config.mjs`) + +```javascript +import { defineConfig } from '@vben/tailwind-config'; + +export default defineConfig({ + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + // 自定义配置... +}); +``` + +### 4. 环境变量 (`.env.*`) + +```bash +# .env.development +VITE_APP_TITLE=芋道管理系统 +VITE_APP_BASE_API=/admin-api +VITE_APP_NAMESPACE=vben-web-antd +``` + +--- + +## 🎨 主题定制 + +### 1. 新增主题色 + +**文件**: `packages/@core/preferences/src/constants.ts` + +```typescript +const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ + { + color: 'hsl(37 100% 52%)', // #FFA00A + type: 'amber', + }, + // ... 其他颜色 +]; + +export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); +``` + +**类型定义**: `packages/@core/base/typings/src/app.d.ts` + +```typescript +type BuiltinThemeType = + | 'amber' // 新增 + | 'default' + | 'orange' + | 'red' + // ... + | (Record & string); +``` + +**默认主题**: `packages/@core/preferences/src/config.ts` + +```typescript +const defaultPreferences: Preferences = { + theme: { + builtinType: 'amber', // 默认主题类型 + colorPrimary: 'hsl(37 100% 52%)', // 主色调 + mode: 'dark', // 暗色模式 + radius: '0.5', // 圆角 + }, + // ... +}; +``` + +### 2. Loading 页面定制 + +**文件**: `internal/vite-config/src/plugins/inject-app-loading/default-loading.html` + +```html + +``` + +**注意**: 修改后需要**重启开发服务器**才能生效！ + +--- + +## 🔐 登录布局定制 + +### 自定义登录页 + +**文件**: `apps/web-antd/src/layouts/auth.vue` + +**主要特性**： +- ✅ 橙色渐变背景 (`rgb(218,125,68)` → `#FFA00A`) +- ✅ 浮动插图动画（左侧） +- ✅ 表单卡片居右 +- ✅ 支持 Light/Dark 主题 +- ✅ 响应式布局 +- ✅ 快速过渡动画 + +**组件引用**： +```typescript +import { + LanguageToggle, + LoginIllustration, + ThemeToggle, +} from '@vben/layouts'; +``` + +**详细文档**: 参见 `apps/web-antd/LOGIN_LAYOUT_README.md` + +### 登录页面 + +**文件**: `apps/web-antd/src/views/_core/authentication/login.vue` + +**功能**： +- 用户名/密码登录 +- 图形验证码 +- 记住密码 +- 第三方登录（手机、二维码） + +**表单配置示例**： +```typescript +const formSchema = computed((): VbenFormSchema[] => [ + { + component: 'VbenInput', + fieldName: 'username', + label: $t('authentication.username'), + rules: z.string().min(1), + }, + { + component: 'VbenInputPassword', + fieldName: 'password', + label: $t('authentication.password'), + rules: z.string().min(1), + }, + // ... +]); +``` + +### 验证码登录/忘记密码 + +**文件**： +- `apps/web-antd/src/views/_core/authentication/code-login.vue` +- `apps/web-antd/src/views/_core/authentication/forget-password.vue` + +**验证码组件** (`VbenPinInput`): +- ✅ 验证码长度: 6 位 +- ✅ 发送前验证手机号 +- ✅ 倒计时 60 秒 +- ✅ 失败自动清除倒计时 + +**修复**: `packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue` +```typescript +async function handleSend(e: Event) { + try { + e?.preventDefault(); + // ✅ 先验证手机号 + await handleSendCode(); + // ✅ 验证成功后才开始倒计时 + countdown.value = maxTime; + startCountdown(); + } catch (error) { + // ✅ 失败清除倒计时 + countdown.value = 0; + clearTimeout(timer.value); + } +} +``` + +--- + +## 🛠️ 开发调试指南 + +### 启动项目 + +```bash +# 安装依赖 +pnpm install + +# 启动开发服务器 +pnpm dev + +# 或者只启动 web-antd +pnpm --filter @vben/web-antd dev +``` + +### 构建项目 + +```bash +# 构建所有应用 +pnpm build + +# 只构建 web-antd +pnpm --filter @vben/web-antd build +``` + +### 代码规范 + +```bash +# ESLint 检查 +pnpm lint + +# 格式化代码 +pnpm format + +# 类型检查 +pnpm typecheck +``` + +### 常用命令 + +```bash +# 清理所有 node_modules +pnpm clean + +# 清理并重新安装 +pnpm clean && pnpm install + +# 查看依赖树 +pnpm list --depth 0 + +# 更新依赖 +pnpm update +``` + +### 调试技巧 + +#### 1. Vue DevTools + +安装 Vue DevTools 浏览器扩展，可以查看： +- 组件树 +- Pinia 状态 +- 路由信息 +- 性能分析 + +#### 2. 网络请求调试 + +打开浏览器开发者工具 Network 面板： +- 查看 API 请求/响应 +- 检查请求头/响应头 +- 查看接口耗时 + +#### 3. 控制台调试 + +```typescript +// 在组件中使用 console +console.log('当前路由:', router.currentRoute.value); +console.log('用户信息:', userStore.userInfo); +console.log('权限列表:', accessStore.accessCodes); +``` + +#### 4. 断点调试 + +在 VS Code 中配置 `.vscode/launch.json`: +```json +{ + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome", + "url": "http://localhost:5173", + "webRoot": "${workspaceFolder}/apps/web-antd" + } + ] +} +``` + +#### 5. 性能分析 + +使用 Vue DevTools Performance 功能： +- 记录组件渲染时间 +- 查找性能瓶颈 +- 优化重渲染 + +--- + +## 📝 本次会话修改记录 + +### 1. 主题色定制 (#FFA00A - 橙色) + +#### 文件: `packages/@core/preferences/src/constants.ts` +```typescript +// 新增 amber 主题色 +const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ + { + color: 'hsl(37 100% 52%)', // #FFA00A + type: 'amber', + }, + // ... +]; +export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); // 7→8 +``` + +#### 文件: `packages/@core/base/typings/src/app.d.ts` +```typescript +type BuiltinThemeType = + | 'amber' // ← 新增 + | 'default' + // ... +``` + +#### 文件: `packages/@core/preferences/src/config.ts` +```typescript +const defaultPreferences: Preferences = { + theme: { + builtinType: 'amber', // ← 设为默认 + colorPrimary: 'hsl(37 100% 52%)', // ← 设为默认 + // ... + }, +}; +``` + +--- + +### 2. 登录布局重构 + +#### 文件: `apps/web-antd/src/layouts/auth.vue` + +**完全重构，新增功能**： +- ✅ 橙色渐变背景 (从 `rgb(218,125,68)` 到 `#FFA00A`) +- ✅ 浮动插图组件 (左侧，带动画) +- ✅ 白色 Logo 文字，带阴影 +- ✅ 表单卡片右对齐，垂直居中 +- ✅ 快速过渡动画 (0.2s/0.15s) +- ✅ 响应式布局 +- ✅ 保留原有 Toolbar (主题、语言切换) + +**关键代码**： +```vue + + + +``` + +#### 备份文件: `apps/web-antd/src/layouts/auth-original.vue` +保留了原始布局，可随时切换回去。 + +--- + +### 3. 登录插图组件 + +#### 文件: `packages/effects/layouts/src/authentication/icons/login-illustration.vue` + +**新建组件**： +```vue + + + + + +``` + +#### 文件: `packages/effects/layouts/src/authentication/index.ts` +```typescript +export { default as AuthPageLayout } from './authentication.vue'; +export { default as LoginIllustration } from './icons/login-illustration.vue'; // ← 新增导出 +export * from './types'; +``` + +#### 静态资源: `apps/web-antd/public/login-illustration.svg` +插图 SVG 文件放置在 public 目录。 + +--- + +### 4. 登录页优化 + +#### 文件: `apps/web-antd/src/views/_core/authentication/login.vue` + +**修改内容**： +- ✅ 移除内部标题，使用组件默认标题 +- ✅ 新增"其他登录方式"分隔线 +- ✅ 图标按钮样式统一 +- ✅ 手机登录 + 二维码登录（微信已注释） +- ✅ 多语言支持 + +**其他登录方式**： +```vue + +``` + +--- + +### 5. 验证码功能修复 + +#### 文件: `packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue` + +**问题**: 点击"发送验证码"后立即开始倒计时，即使手机号验证失败。 + +**修复**: 先验证手机号，成功后才开始倒计时。 + +```typescript +async function handleSend(e: Event) { + try { + e?.preventDefault(); + // ✅ 先执行验证码发送逻辑（包含手机号验证） + await handleSendCode(); + // ✅ 只有成功后才开始倒计时 + countdown.value = maxTime; + startCountdown(); + } catch (error) { + console.error('Failed to send code:', error); + // ✅ 如果发送失败，确保倒计时停止 + countdown.value = 0; + clearTimeout(timer.value); + emit('sendError', error); + } +} +``` + +#### 文件: `apps/web-antd/src/views/_core/authentication/forget-password.vue` +#### 文件: `apps/web-antd/src/views/_core/authentication/code-login.vue` + +**修改**: 验证码长度从 4 位改为 6 位。 + +```typescript +const CODE_LENGTH = 6; // 4 → 6 +``` + +--- + +### 6. 国际化新增 + +#### 文件: `packages/locales/src/langs/zh-CN/authentication.json` +```json +{ + "otherLoginMethods": "或使用以下方式登录", + "contactSupport": "遇到问题？", + "support": "联系支持" +} +``` + +#### 文件: `packages/locales/src/langs/en-US/authentication.json` +```json +{ + "otherLoginMethods": "Or sign in with", + "contactSupport": "Need help?", + "support": "Contact Support" +} +``` + +--- + +### 7. Loading 页面优化 + +#### 文件: `internal/vite-config/src/plugins/inject-app-loading/default-loading.html` + +**问题**: +- Loading 动画颜色先蓝后橙（闪烁） +- 标题字体粗细变化 + +**修复**: +```html + +``` + +**注意**: 修改后需要**重启开发服务器**才能生效！ + +--- + +## 📚 相关文档 + +- [登录布局详细说明](./LOGIN_LAYOUT_README.md) +- [项目官方文档](https://doc.vben.pro) +- [Vite 文档](https://vitejs.dev) +- [Vue 3 文档](https://vuejs.org) +- [Ant Design Vue 文档](https://antdv.com) +- [Tailwind CSS 文档](https://tailwindcss.com) + +--- + +## 🔍 快速查找 + +### 我要修改... + +| 需求 | 文件位置 | +|------|---------| +| **登录页布局** | `apps/web-antd/src/layouts/auth.vue` | +| **登录表单** | `apps/web-antd/src/views/_core/authentication/login.vue` | +| **验证码登录** | `apps/web-antd/src/views/_core/authentication/code-login.vue` | +| **忘记密码** | `apps/web-antd/src/views/_core/authentication/forget-password.vue` | +| **主题色** | `packages/@core/preferences/src/constants.ts` | +| **Loading 页面** | `internal/vite-config/src/plugins/inject-app-loading/default-loading.html` | +| **国际化** | `packages/locales/src/langs/zh-CN/*.json` | +| **路由配置** | `apps/web-antd/src/router/routes/` | +| **API 接口** | `apps/web-antd/src/api/` | +| **全局组件** | `apps/web-antd/src/components/` | +| **工具函数** | `apps/web-antd/src/utils/` | +| **状态管理** | `apps/web-antd/src/store/` | + +### 常见问题 + +#### Q: 如何切换回原始登录布局？ +A: 修改路由配置，将 `auth.vue` 改为 `auth-original.vue`。 + +#### Q: 如何添加新的主题色？ +A: 参见 [主题定制](#主题定制) 章节。 + +#### Q: 修改 Loading 页面后不生效？ +A: 必须重启开发服务器 (`Ctrl+C` 然后 `pnpm dev`)。 + +#### Q: 如何自定义登录插图？ +A: 替换 `apps/web-antd/public/login-illustration.svg` 文件。 + +#### Q: 验证码长度如何修改？ +A: 修改对应页面的 `CODE_LENGTH` 常量。 + +--- + + -- 2.49.1 From fc7b405805cda02765cfa0a5990b094189f761f1 Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:49:39 +0800 Subject: [PATCH 06/29] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E6=8F=92=E5=9B=BE=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E5=92=8C=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/public/login-illustration.svg | 1 + .../icons/login-illustration.vue | 53 +++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 apps/web-antd/public/login-illustration.svg create mode 100644 packages/effects/layouts/src/authentication/icons/login-illustration.vue diff --git a/apps/web-antd/public/login-illustration.svg b/apps/web-antd/public/login-illustration.svg new file mode 100644 index 000000000..7894f64da --- /dev/null +++ b/apps/web-antd/public/login-illustration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/effects/layouts/src/authentication/icons/login-illustration.vue b/packages/effects/layouts/src/authentication/icons/login-illustration.vue new file mode 100644 index 000000000..bcfbfea0e --- /dev/null +++ b/packages/effects/layouts/src/authentication/icons/login-illustration.vue @@ -0,0 +1,53 @@ + + + + + + -- 2.49.1 From 8d1c469804a704f7c8d6e022359df5b858552cdc Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:51:00 +0800 Subject: [PATCH 07/29] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=92=8C=E8=AE=A4=E8=AF=81=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构认证页面布局，优化视觉效果和用户体验 - 更新登录页面UI组件和交互逻辑 - 新增原始认证布局备份文件 - 导出登录插图组件供使用 --- apps/web-antd/src/layouts/auth-original.vue | 26 +++ apps/web-antd/src/layouts/auth.vue | 177 ++++++++++++++++-- .../src/views/_core/authentication/login.vue | 91 ++++++++- .../layouts/src/authentication/index.ts | 1 + 4 files changed, 279 insertions(+), 16 deletions(-) create mode 100644 apps/web-antd/src/layouts/auth-original.vue diff --git a/apps/web-antd/src/layouts/auth-original.vue b/apps/web-antd/src/layouts/auth-original.vue new file mode 100644 index 000000000..9851a9e02 --- /dev/null +++ b/apps/web-antd/src/layouts/auth-original.vue @@ -0,0 +1,26 @@ + + + + diff --git a/apps/web-antd/src/layouts/auth.vue b/apps/web-antd/src/layouts/auth.vue index 8ba66e85a..5e8bb823c 100644 --- a/apps/web-antd/src/layouts/auth.vue +++ b/apps/web-antd/src/layouts/auth.vue @@ -1,25 +1,174 @@ + + diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue index aa1db4c53..c48989776 100644 --- a/apps/web-antd/src/views/_core/authentication/login.vue +++ b/apps/web-antd/src/views/_core/authentication/login.vue @@ -170,17 +170,97 @@ const formSchema = computed((): VbenFormSchema[] => { + + diff --git a/packages/effects/layouts/src/authentication/index.ts b/packages/effects/layouts/src/authentication/index.ts index d7c1c293a..987d78cd7 100644 --- a/packages/effects/layouts/src/authentication/index.ts +++ b/packages/effects/layouts/src/authentication/index.ts @@ -1,2 +1,3 @@ export { default as AuthPageLayout } from './authentication.vue'; +export { default as LoginIllustration } from './icons/login-illustration.vue'; export * from './types'; -- 2.49.1 From 2bb2480c90c0ae613d06801503f4ea6db92f127b Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:51:46 +0800 Subject: [PATCH 08/29] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E8=AE=A4?= =?UTF-8?q?=E8=AF=81=E7=9B=B8=E5=85=B3=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96?= =?UTF-8?q?=E6=96=87=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 补充和完善中文认证文案 - 补充和完善英文认证文案 --- packages/locales/src/langs/en-US/authentication.json | 7 +++++-- packages/locales/src/langs/zh-CN/authentication.json | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json index 5d87c58b5..06d069b36 100644 --- a/packages/locales/src/langs/en-US/authentication.json +++ b/packages/locales/src/langs/en-US/authentication.json @@ -32,7 +32,7 @@ "goToLogin": "Login instead", "passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols", "forgetPassword": "Forget Password?", - "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password", + "forgetPasswordSubtitle": "Enter your phone number, and we will send you a verification code to reset your password", "resetPasswordSuccess": "Reset password success", "emailTip": "Please enter email", "emailValidErrorTip": "The email format you entered is incorrect", @@ -66,5 +66,8 @@ "center": "Align Center", "alignLeft": "Align Left", "alignRight": "Align Right" - } + }, + "otherLoginMethods": "Or sign in with", + "contactSupport": "Need help?", + "support": "Contact Support" } diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json index 6d27f6fe7..38b4f33d0 100644 --- a/packages/locales/src/langs/zh-CN/authentication.json +++ b/packages/locales/src/langs/zh-CN/authentication.json @@ -32,7 +32,7 @@ "goToLogin": "去登录", "passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号", "forgetPassword": "忘记密码?", - "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接", + "forgetPasswordSubtitle": "输入您的手机号，我们将向您发送重置密码的验证码", "resetPasswordSuccess": "重置密码成功", "emailTip": "请输入邮箱", "emailValidErrorTip": "你输入的邮箱格式不正确", @@ -66,5 +66,8 @@ "center": "居中", "alignLeft": "居左", "alignRight": "居右" - } + }, + "otherLoginMethods": "或使用以下方式登录", + "contactSupport": "遇到问题？", + "support": "联系支持" } -- 2.49.1 From 05da75d1cacdc902f7d05905ef54216872a8a0d5 Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:52:04 +0800 Subject: [PATCH 09/29] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=BA=94?= =?UTF-8?q?=E7=94=A8=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整默认加载动画的样式和动效 --- .../plugins/inject-app-loading/default-loading.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/internal/vite-config/src/plugins/inject-app-loading/default-loading.html b/internal/vite-config/src/plugins/inject-app-loading/default-loading.html index 289570586..69239b036 100644 --- a/internal/vite-config/src/plugins/inject-app-loading/default-loading.html +++ b/internal/vite-config/src/plugins/inject-app-loading/default-loading.html @@ -35,12 +35,13 @@ .title { margin-top: 66px; font-size: 28px; - font-weight: 600; - color: rgb(0 0 0 / 85%); + font-weight: 600 !important; + color: rgb(0 0 0 / 85%) !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } .dark .title { - color: #fff; + color: #fff !important; } .loader { @@ -56,7 +57,7 @@ width: 48px; height: 5px; content: ''; - background: hsl(var(--primary, 210 100% 50%) / 50%); + background: hsl(var(--primary, 37 100% 52%) / 50%); border-radius: 50%; animation: shadow-ani 0.5s linear infinite; } @@ -68,7 +69,7 @@ width: 100%; height: 100%; content: ''; - background: hsl(var(--primary, 210 100% 50%)); + background: hsl(var(--primary, 37 100% 52%)); border-radius: 4px; animation: jump-ani 0.5s linear infinite; } -- 2.49.1 From 53f05957860e14c5296c4583f318f4abd38c1bac Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:53:42 +0800 Subject: [PATCH 10/29] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0VSCode?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index a45451b07..3b4f77e49 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -62,7 +62,7 @@ "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "Vue.volar" }, // extensions "extensions.ignoreRecommendations": true, -- 2.49.1 From b14bd96cb26b250d234144b055ecdc4150401ae7 Mon Sep 17 00:00:00 2001 From: lzh Date: Fri, 19 Dec 2025 13:54:09 +0800 Subject: [PATCH 11/29] =?UTF-8?q?style:=20=E4=BB=A3=E7=A0=81=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 应用 linter 和 prettier 格式化规则 --- apps/web-antd/PROJECT_STRUCTURE_GUIDE.md | 222 ++++++++++-------- apps/web-antd/src/layouts/auth-original.vue | 1 - apps/web-antd/src/layouts/auth.vue | 14 +- .../src/views/_core/authentication/login.vue | 8 +- .../inject-app-loading/default-loading.html | 6 +- .../icons/login-illustration.vue | 27 ++- 6 files changed, 155 insertions(+), 123 deletions(-) diff --git a/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md index f019dadf4..eabfdb7da 100644 --- a/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md +++ b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md @@ -43,16 +43,16 @@ yudao-ui-admin-vben/ ### 技术栈 -| 技术 | 版本 | 说明 | -|------|------|------| -| Vue | 3.x | 渐进式 JavaScript 框架 | -| Vite | 5.x | 下一代前端构建工具 | -| TypeScript | 5.x | 类型安全 | -| Ant Design Vue | 4.x | UI 组件库 | -| Pinia | 2.x | 状态管理 | -| Vue Router | 4.x | 路由管理 | -| Tailwind CSS | 3.x | 原子化 CSS | -| VueUse | 10.x | Vue Composition API 工具集 | +| 技术 | 版本 | 说明 | +| -------------- | ---- | -------------------------- | +| Vue | 3.x | 渐进式 JavaScript 框架 | +| Vite | 5.x | 下一代前端构建工具 | +| TypeScript | 5.x | 类型安全 | +| Ant Design Vue | 4.x | UI 组件库 | +| Pinia | 2.x | 状态管理 | +| Vue Router | 4.x | 路由管理 | +| Tailwind CSS | 3.x | 原子化 CSS | +| VueUse | 10.x | Vue Composition API 工具集 | --- @@ -193,7 +193,7 @@ import { VbenToast, VbenDropdown, VbenSelect, - VbenPinInput, // 验证码输入框 + VbenPinInput, // 验证码输入框 VbenLoading, VbenSpinner, // ... 更多组件 @@ -201,6 +201,7 @@ import { ``` **常用组件**： + - **按钮类**: `VbenButton`, `VbenIconButton` - **输入类**: `VbenInput`, `VbenInputPassword`, `VbenPinInput` - **选择类**: `VbenSelect`, `VbenDropdown`, `VbenCheckbox`, `VbenRadio` @@ -268,23 +269,24 @@ import { VbenModal, VbenDrawer } from '@vben-core/popup-ui'; ```typescript import { // 布局组件 - AuthPageLayout, // 认证页布局 - LoginIllustration, // 登录插图 (自定义新增) - + AuthPageLayout, // 认证页布局 + LoginIllustration, // 登录插图 (自定义新增) + // 小部件 - ThemeToggle, // 主题切换 - LanguageToggle, // 语言切换 - ColorToggle, // 颜色选择器 - LayoutToggle, // 布局切换 - UserDropdown, // 用户下拉菜单 - Breadcrumb, // 面包屑 - GlobalSearch, // 全局搜索 - LockScreen, // 锁屏 - Notification, // 通知 + ThemeToggle, // 主题切换 + LanguageToggle, // 语言切换 + ColorToggle, // 颜色选择器 + LayoutToggle, // 布局切换 + UserDropdown, // 用户下拉菜单 + Breadcrumb, // 面包屑 + GlobalSearch, // 全局搜索 + LockScreen, // 锁屏 + Notification, // 通知 } from '@vben/layouts'; ``` **目录结构**： + ``` packages/effects/layouts/src/ ├── authentication/ # 认证相关 @@ -309,17 +311,17 @@ packages/effects/layouts/src/ ```typescript import { // 认证组件 - AuthenticationLogin, // 登录表单 - AuthenticationCodeLogin, // 验证码登录 + AuthenticationLogin, // 登录表单 + AuthenticationCodeLogin, // 验证码登录 AuthenticationForgetPassword, // 忘记密码 - AuthenticationRegister, // 注册 - + AuthenticationRegister, // 注册 + // 其他通用组件 - Page, // 页面容器 - DocAlert, // 文档提醒 - Description, // 描述列表 - Ellipsis, // 文本省略 - Iframe, // 内嵌页面 + Page, // 页面容器 + DocAlert, // 文档提醒 + Description, // 描述列表 + Ellipsis, // 文本省略 + Iframe, // 内嵌页面 // ... } from '@vben/common-ui'; ``` @@ -330,10 +332,10 @@ import { ```typescript import { - useWatermark, // 水印 - useTabs, // 标签页管理 - useContentHeight, // 内容高度自适应 - isTenantEnable, // 租户功能是否启用 + useWatermark, // 水印 + useTabs, // 标签页管理 + useContentHeight, // 内容高度自适应 + isTenantEnable, // 租户功能是否启用 } from '@vben/hooks'; ``` @@ -366,6 +368,7 @@ $t('authentication.username'); ``` **语言包位置**： + - 中文: `packages/locales/src/langs/zh-CN/*.json` - 英文: `packages/locales/src/langs/en-US/*.json` @@ -373,10 +376,10 @@ $t('authentication.username'); ```typescript import { - useUserStore, // 用户信息 - useAccessStore, // 权限信息 - useTabsStore, // 标签页 - useAppStore, // 应用配置 + useUserStore, // 用户信息 + useAccessStore, // 权限信息 + useTabsStore, // 标签页 + useAppStore, // 应用配置 } from '@vben/stores'; const userStore = useUserStore(); @@ -387,9 +390,9 @@ await userStore.fetchUserInfo(); ```typescript import { - preferences, // 偏好设置对象 - updatePreferences, // 更新偏好设置 - usePreferences, // 响应式偏好设置 + preferences, // 偏好设置对象 + updatePreferences, // 更新偏好设置 + usePreferences, // 响应式偏好设置 } from '@vben/preferences'; // 读取 @@ -411,12 +414,12 @@ import { // 路由工具 mapTree, resetRoutes, - + // 通用工具 formatDate, formatDateTime, openWindow, - + // 验证器 isEmail, isPhone, @@ -431,7 +434,7 @@ import { // 核心常量 LOGIN_PATH, VBEN_DOC_URL, - + // 业务枚举 DictEnum, SystemEnum, @@ -485,6 +488,7 @@ export default defineConfig(async () => { ``` **路径别名**： + - `#/*` → `./src/*` (应用内部) - `@vben/*` → `packages/*` (公共包) @@ -519,7 +523,7 @@ VITE_APP_NAMESPACE=vben-web-antd ```typescript const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ { - color: 'hsl(37 100% 52%)', // #FFA00A + color: 'hsl(37 100% 52%)', // #FFA00A type: 'amber', }, // ... 其他颜色 @@ -532,7 +536,7 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); ```typescript type BuiltinThemeType = - | 'amber' // 新增 + | 'amber' // 新增 | 'default' | 'orange' | 'red' @@ -545,10 +549,10 @@ type BuiltinThemeType = ```typescript const defaultPreferences: Preferences = { theme: { - builtinType: 'amber', // 默认主题类型 + builtinType: 'amber', // 默认主题类型 colorPrimary: 'hsl(37 100% 52%)', // 主色调 - mode: 'dark', // 暗色模式 - radius: '0.5', // 圆角 + mode: 'dark', // 暗色模式 + radius: '0.5', // 圆角 }, // ... }; @@ -564,11 +568,12 @@ const defaultPreferences: Preferences = { .loader::after { background: hsl(var(--primary, 37 100% 52%)); /* 橙色 #FFA00A */ } - + /* 标题样式 */ .title { font-weight: 600 !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; + font-family: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } ``` @@ -584,6 +589,7 @@ const defaultPreferences: Preferences = { **文件**: `apps/web-antd/src/layouts/auth.vue` **主要特性**： + - ✅ 橙色渐变背景 (`rgb(218,125,68)` → `#FFA00A`) - ✅ 浮动插图动画（左侧） - ✅ 表单卡片居右 @@ -592,12 +598,9 @@ const defaultPreferences: Preferences = { - ✅ 快速过渡动画 **组件引用**： + ```typescript -import { - LanguageToggle, - LoginIllustration, - ThemeToggle, -} from '@vben/layouts'; +import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts'; ``` **详细文档**: 参见 `apps/web-antd/LOGIN_LAYOUT_README.md` @@ -607,12 +610,14 @@ import { **文件**: `apps/web-antd/src/views/_core/authentication/login.vue` **功能**： + - 用户名/密码登录 - 图形验证码 - 记住密码 - 第三方登录（手机、二维码） **表单配置示例**： + ```typescript const formSchema = computed((): VbenFormSchema[] => [ { @@ -634,16 +639,19 @@ const formSchema = computed((): VbenFormSchema[] => [ ### 验证码登录/忘记密码 **文件**： + - `apps/web-antd/src/views/_core/authentication/code-login.vue` - `apps/web-antd/src/views/_core/authentication/forget-password.vue` **验证码组件** (`VbenPinInput`): + - ✅ 验证码长度: 6 位 - ✅ 发送前验证手机号 - ✅ 倒计时 60 秒 - ✅ 失败自动清除倒计时 **修复**: `packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue` + ```typescript async function handleSend(e: Event) { try { @@ -722,6 +730,7 @@ pnpm update #### 1. Vue DevTools 安装 Vue DevTools 浏览器扩展，可以查看： + - 组件树 - Pinia 状态 - 路由信息 @@ -730,6 +739,7 @@ pnpm update #### 2. 网络请求调试 打开浏览器开发者工具 Network 面板： + - 查看 API 请求/响应 - 检查请求头/响应头 - 查看接口耗时 @@ -746,6 +756,7 @@ console.log('权限列表:', accessStore.accessCodes); #### 4. 断点调试 在 VS Code 中配置 `.vscode/launch.json`: + ```json { "version": "0.2.0", @@ -764,6 +775,7 @@ console.log('权限列表:', accessStore.accessCodes); #### 5. 性能分析 使用 Vue DevTools Performance 功能： + - 记录组件渲染时间 - 查找性能瓶颈 - 优化重渲染 @@ -775,11 +787,12 @@ console.log('权限列表:', accessStore.accessCodes); ### 1. 主题色定制 (#FFA00A - 橙色) #### 文件: `packages/@core/preferences/src/constants.ts` + ```typescript // 新增 amber 主题色 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [ { - color: 'hsl(37 100% 52%)', // #FFA00A + color: 'hsl(37 100% 52%)', // #FFA00A type: 'amber', }, // ... @@ -788,18 +801,20 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); // 7→8 ``` #### 文件: `packages/@core/base/typings/src/app.d.ts` + ```typescript type BuiltinThemeType = - | 'amber' // ← 新增 - | 'default' - // ... + | 'amber' // ← 新增 + | 'default'; +// ... ``` #### 文件: `packages/@core/preferences/src/config.ts` + ```typescript const defaultPreferences: Preferences = { theme: { - builtinType: 'amber', // ← 设为默认 + builtinType: 'amber', // ← 设为默认 colorPrimary: 'hsl(37 100% 52%)', // ← 设为默认 // ... }, @@ -813,6 +828,7 @@ const defaultPreferences: Preferences = { #### 文件: `apps/web-antd/src/layouts/auth.vue` **完全重构，新增功能**： + - ✅ 橙色渐变背景 (从 `rgb(218,125,68)` 到 `#FFA00A`) - ✅ 浮动插图组件 (左侧，带动画) - ✅ 白色 Logo 文字，带阴影 @@ -822,30 +838,32 @@ const defaultPreferences: Preferences = { - ✅ 保留原有 Toolbar (主题、语言切换) **关键代码**： + ```vue