style: 代码格式化调整
- 应用 linter 和 prettier 格式化规则
This commit is contained in:
@@ -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;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -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
|
||||
<template>
|
||||
<div class="relative flex h-screen w-full overflow-hidden font-sans">
|
||||
<!-- 橙色渐变背景 -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r
|
||||
from-[rgb(218,125,68)]
|
||||
via-[#FFA00A]/30
|
||||
to-[#FFA00A]/8">
|
||||
<div
|
||||
class="to-[#FFA00A]/8 absolute inset-0 bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30"
|
||||
>
|
||||
<!-- 浮动插图 -->
|
||||
<div class="absolute -left-[5%] top-1/2
|
||||
hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block">
|
||||
<div
|
||||
class="absolute -left-[5%] top-1/2 hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block"
|
||||
>
|
||||
<LoginIllustration :alt="appName" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Logo - 白色字体 -->
|
||||
<div class="absolute left-4 top-4">
|
||||
<img :src="logo" :alt="appName" />
|
||||
<span class="text-xl font-semibold text-white
|
||||
drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]">
|
||||
<span
|
||||
class="text-xl font-semibold text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]"
|
||||
>
|
||||
{{ appName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 登录卡片 - 右侧居中 -->
|
||||
<div class="flex w-full flex-1 items-center justify-end">
|
||||
<div class="w-full md:w-[480px] lg:mr-[10%]">
|
||||
@@ -868,6 +886,7 @@ const defaultPreferences: Preferences = {
|
||||
```
|
||||
|
||||
#### 备份文件: `apps/web-antd/src/layouts/auth-original.vue`
|
||||
|
||||
保留了原始布局,可随时切换回去。
|
||||
|
||||
---
|
||||
@@ -877,6 +896,7 @@ const defaultPreferences: Preferences = {
|
||||
#### 文件: `packages/effects/layouts/src/authentication/icons/login-illustration.vue`
|
||||
|
||||
**新建组件**:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
@@ -893,7 +913,7 @@ defineProps<{
|
||||
<img
|
||||
src="/login-illustration.svg"
|
||||
:alt="alt || 'Login Illustration'"
|
||||
class="animate-float w-full opacity-40"
|
||||
class="w-full animate-float opacity-40"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -905,7 +925,8 @@ defineProps<{
|
||||
}
|
||||
|
||||
@keyframes float-smooth {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1.2) translateY(0);
|
||||
}
|
||||
50% {
|
||||
@@ -916,6 +937,7 @@ defineProps<{
|
||||
```
|
||||
|
||||
#### 文件: `packages/effects/layouts/src/authentication/index.ts`
|
||||
|
||||
```typescript
|
||||
export { default as AuthPageLayout } from './authentication.vue';
|
||||
export { default as LoginIllustration } from './icons/login-illustration.vue'; // ← 新增导出
|
||||
@@ -923,6 +945,7 @@ export * from './types';
|
||||
```
|
||||
|
||||
#### 静态资源: `apps/web-antd/public/login-illustration.svg`
|
||||
|
||||
插图 SVG 文件放置在 public 目录。
|
||||
|
||||
---
|
||||
@@ -932,6 +955,7 @@ export * from './types';
|
||||
#### 文件: `apps/web-antd/src/views/_core/authentication/login.vue`
|
||||
|
||||
**修改内容**:
|
||||
|
||||
- ✅ 移除内部标题,使用组件默认标题
|
||||
- ✅ 新增"其他登录方式"分隔线
|
||||
- ✅ 图标按钮样式统一
|
||||
@@ -939,12 +963,13 @@ export * from './types';
|
||||
- ✅ 多语言支持
|
||||
|
||||
**其他登录方式**:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="mt-8">
|
||||
<!-- 分隔线 -->
|
||||
<div class="relative mb-6 flex justify-center text-xs">
|
||||
<span class="bg-background relative z-10 px-3">
|
||||
<span class="relative z-10 bg-background px-3">
|
||||
{{ $t('authentication.otherLoginMethods') }}
|
||||
</span>
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
@@ -956,22 +981,20 @@ export * from './types';
|
||||
<div class="flex justify-center gap-8">
|
||||
<!-- 手机登录 -->
|
||||
<button
|
||||
class="flex size-12 items-center justify-center
|
||||
rounded-2xl border bg-slate-50
|
||||
transition-all hover:scale-110 hover:shadow-md"
|
||||
@click="$router.push('/auth/code-login')">
|
||||
class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
|
||||
@click="$router.push('/auth/code-login')"
|
||||
>
|
||||
<svg><!-- 手机图标 --></svg>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- 二维码登录 -->
|
||||
<button
|
||||
class="flex size-12 items-center justify-center
|
||||
rounded-2xl border bg-slate-50
|
||||
transition-all hover:scale-110 hover:shadow-md"
|
||||
@click="$router.push('/auth/qrcode-login')">
|
||||
class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
|
||||
@click="$router.push('/auth/qrcode-login')"
|
||||
>
|
||||
<svg><!-- 二维码图标 --></svg>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- 微信登录 (已注释) -->
|
||||
<!-- <button ...>...</button> -->
|
||||
</div>
|
||||
@@ -1009,12 +1032,13 @@ async function handleSend(e: Event) {
|
||||
```
|
||||
|
||||
#### 文件: `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
|
||||
const CODE_LENGTH = 6; // 4 → 6
|
||||
```
|
||||
|
||||
---
|
||||
@@ -1022,6 +1046,7 @@ const CODE_LENGTH = 6; // 4 → 6
|
||||
### 6. 国际化新增
|
||||
|
||||
#### 文件: `packages/locales/src/langs/zh-CN/authentication.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"otherLoginMethods": "或使用以下方式登录",
|
||||
@@ -1031,6 +1056,7 @@ const CODE_LENGTH = 6; // 4 → 6
|
||||
```
|
||||
|
||||
#### 文件: `packages/locales/src/langs/en-US/authentication.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"otherLoginMethods": "Or sign in with",
|
||||
@@ -1045,29 +1071,32 @@ const CODE_LENGTH = 6; // 4 → 6
|
||||
|
||||
#### 文件: `internal/vite-config/src/plugins/inject-app-loading/default-loading.html`
|
||||
|
||||
**问题**:
|
||||
**问题**:
|
||||
|
||||
- Loading 动画颜色先蓝后橙(闪烁)
|
||||
- 标题字体粗细变化
|
||||
|
||||
**修复**:
|
||||
|
||||
```html
|
||||
<style data-app-loading="inject-css">
|
||||
/* 修改主题色回退值为橙色 */
|
||||
.loader::before {
|
||||
background: hsl(var(--primary, 37 100% 52%) / 50%); /* 蓝色 → 橙色 */
|
||||
}
|
||||
|
||||
|
||||
.loader::after {
|
||||
background: hsl(var(--primary, 37 100% 52%)); /* 蓝色 → 橙色 */
|
||||
}
|
||||
|
||||
|
||||
/* 锁定标题样式 */
|
||||
.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;
|
||||
color: rgb(0 0 0 / 85%) !important;
|
||||
}
|
||||
|
||||
|
||||
.dark .title {
|
||||
color: #fff !important;
|
||||
}
|
||||
@@ -1094,7 +1123,7 @@ const CODE_LENGTH = 6; // 4 → 6
|
||||
### 我要修改...
|
||||
|
||||
| 需求 | 文件位置 |
|
||||
|------|---------|
|
||||
| --- | --- |
|
||||
| **登录页布局** | `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` |
|
||||
@@ -1111,20 +1140,23 @@ const CODE_LENGTH = 6; // 4 → 6
|
||||
### 常见问题
|
||||
|
||||
#### 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` 常量。
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -23,4 +23,3 @@ const logoDark = computed(() => preferences.logo.sourceDark);
|
||||
<!-- <template #toolbar></template> -->
|
||||
</AuthPageLayout>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import {
|
||||
LanguageToggle,
|
||||
LoginIllustration,
|
||||
ThemeToggle,
|
||||
} from '@vben/layouts';
|
||||
import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts';
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
|
||||
const appName = computed(() => preferences.app.name);
|
||||
@@ -22,7 +18,7 @@ const { isDark } = usePreferences();
|
||||
<div class="absolute inset-0 z-0 size-full">
|
||||
<!-- 橙色渐变背景 - 从左到右依次变淡 -->
|
||||
<div
|
||||
class="absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 to-[#FFA00A]/8 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40 dark:to-[#FFA00A]/12"
|
||||
class="to-[#FFA00A]/8 dark:to-[#FFA00A]/12 absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40"
|
||||
>
|
||||
<!-- 浮动插图 - 左侧区域 -->
|
||||
<div
|
||||
@@ -51,7 +47,7 @@ const { isDark } = usePreferences();
|
||||
|
||||
<!-- 右上角 Toolbar -->
|
||||
<div
|
||||
class="bg-accent absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl px-3 py-1 lg:right-6 lg:top-6"
|
||||
class="absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl bg-accent px-3 py-1 lg:right-6 lg:top-6"
|
||||
>
|
||||
<LanguageToggle v-if="preferences.widget.languageToggle" />
|
||||
<ThemeToggle v-if="preferences.widget.themeToggle" />
|
||||
@@ -64,7 +60,7 @@ const { isDark } = usePreferences();
|
||||
<!-- 登录卡片 - 响应式居中/靠右 -->
|
||||
<div class="w-full md:w-[480px] lg:mr-[10%]">
|
||||
<div
|
||||
class="bg-background relative overflow-hidden rounded-[2.5rem] p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
|
||||
class="relative overflow-hidden rounded-[2.5rem] bg-background p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
|
||||
>
|
||||
<!-- 登录表单 - RouterView 渲染实际的登录组件 -->
|
||||
<div class="login-form-container">
|
||||
@@ -79,7 +75,7 @@ const { isDark } = usePreferences();
|
||||
|
||||
<!-- 遇到问题 -->
|
||||
<div class="mt-6 text-center">
|
||||
<span class="text-muted-foreground text-xs">
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{{ $t('authentication.contactSupport') }}
|
||||
<a
|
||||
href="#"
|
||||
|
||||
@@ -185,12 +185,14 @@ const formSchema = computed((): VbenFormSchema[] => {
|
||||
<div class="mt-8">
|
||||
<div class="relative mb-6 flex justify-center text-xs text-slate-400">
|
||||
<span
|
||||
class="bg-background dark:bg-slate-900 relative z-10 px-3 font-medium"
|
||||
class="relative z-10 bg-background px-3 font-medium dark:bg-slate-900"
|
||||
>
|
||||
{{ $t('authentication.otherLoginMethods') }}
|
||||
</span>
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-slate-100 dark:border-slate-700"></div>
|
||||
<div
|
||||
class="w-full border-t border-slate-100 dark:border-slate-700"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -238,7 +240,7 @@ const formSchema = computed((): VbenFormSchema[] => {
|
||||
<circle cx="6.5" cy="17.5" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- 微信扫码登录 -->
|
||||
<!-- <button
|
||||
class="flex size-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-xl text-slate-400 transition-all hover:scale-110 hover:bg-white hover:text-[#46AF35] hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
}
|
||||
|
||||
.loading.hidden {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
@@ -34,10 +34,12 @@
|
||||
|
||||
.title {
|
||||
margin-top: 66px;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, sans-serif !important;
|
||||
font-size: 28px;
|
||||
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 {
|
||||
|
||||
@@ -14,18 +14,29 @@ defineProps<{
|
||||
src="/login-illustration.svg"
|
||||
:alt="alt || 'Login Illustration'"
|
||||
class="animate-float w-full opacity-40"
|
||||
style="max-width: none; height: auto;"
|
||||
style="max-width: none; height: auto"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@keyframes float-smooth {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1.2) translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2) translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.login-illustration-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -40,14 +51,4 @@ defineProps<{
|
||||
.login-illustration-container img.animate-float {
|
||||
animation: float-smooth 3s ease-in-out 0ms infinite;
|
||||
}
|
||||
|
||||
@keyframes float-smooth {
|
||||
0%, 100% {
|
||||
transform: scale(1.2) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) translateY(-15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user