public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-10-03 16:53:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat:完善快速开始功能

Browse Source
This commit is contained in:
张凯博
2025-08-19 10:23:42 +08:00
parent 86905b288e
commit 1c054a5eab
1 changed files with 303 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/dashboard/README.md
+303 -71
View File
@@ -1,118 +1,186 @@
# 快速开始组件功能说明
# Dashboard 仪表板模块
## 概述
快速开始组件提供了一个便捷的导航面板，用户可以快速访问常用的页面和外部链接。支持从标签栏右键收藏页面到快速开始列表。
Dashboard 仪表板模块是系统的核心展示区域，提供了数据概览、快速导航、工作台等功能。包含工作台页面、数据分析页面以及可复用的组件库。
## 功能特性
## 模块结构
### 1. 快速链接管理
- ✅ 显示预设的常用链接
```
dashboard/
├── workplace.vue # 工作台主页面
├── analysis.vue # 数据分析页面
├── components/ # 可复用组件
│ ├── QuickStart.vue # 快速开始组件
│ ├── AddQuickLinkDialog.vue # 添加快速链接对话框
│ └── index.ts # 组件导出文件
└── README.md # 模块说明文档
```
## 页面功能
### 1. 工作台页面 (workplace.vue)
**核心功能：**
- ✅ 用户欢迎信息展示
- ✅ 进行中的项目列表
- ✅ 动态时间线
- ✅ 快速开始/便捷导航
- ✅ 数据指数图表
- ✅ 团队成员展示
**布局特点：**
- 响应式栅格布局
- 左右分栏设计
- 卡片式组件展示
- 移动端适配
### 2. 数据分析页面 (analysis.vue)
**主要功能：**
- ✅ 数据统计图表
- ✅ 趋势分析展示
- ✅ 实时数据监控
- ✅ 可视化数据报表
## 组件功能
### 1. 快速开始组件 (QuickStart.vue)
#### 核心特性
- ✅ 快速链接管理和展示
- ✅ 支持内部路由跳转和外部链接访问
- ✅ 固定高度容器，内容可滚动
- ✅ 响应式设计，适配不同屏幕尺寸
### 2. 标签栏右键收藏
#### 标签栏右键收藏
- ✅ 在任意标签页右击可收藏到快速开始
- ✅ 支持切换收藏状态（收藏/取消收藏）
- ✅ 自动获取路由配置的图标
- ✅ 智能图标匹配和颜色配置
- ✅ 实时状态显示和图标切换
### 3. 手动添加链接
#### 手动添加链接
- ✅ 通过对话框手动添加自定义链接
- ✅ 支持选择图标和自定义颜色
- ✅ 表单验证确保数据正确性
- ✅ 支持内部链接和外部链接
### 4. 右键管理链接
#### 右键管理链接
- ✅ 在快速链接上右击可编辑或删除
- ✅ 编辑功能支持修改所有属性
- ✅ 编辑功能自动预填充现有数据
- ✅ 删除功能带有确认对话框
- ✅ 防止误操作的安全提示
### 4. 数据持久化
#### 数据持久化
- ✅ 使用 localStorage 保存用户配置
- ✅ 页面刷新后数据不丢失
- ✅ 支持导入/导出配置（后续可扩展）
- ✅ 支持导入/导出配置（可扩展）
## 使用方法
### 2. 添加快速链接对话框 (AddQuickLinkDialog.vue)
### 从标签栏收藏页面
#### 功能特性
- ✅ 支持新增和编辑两种模式
- ✅ 完整的表单验证
- ✅ 图标选择器（22个常用图标）
- ✅ 颜色自定义选择
- ✅ 链接类型区分（内部/外部）
#### 收藏页面
## 使用指南
### 访问 Dashboard
#### 工作台页面
- **路径**：`/dashboard/workplace`
- **功能**：个人工作台，包含项目概览、动态信息、快速导航等
- **适用场景**：日常工作的起始页面
#### 数据分析页面
- **路径**：`/dashboard/analysis`
- **功能**：数据统计和分析展示
- **适用场景**：查看系统数据和业务指标
### 快速开始组件使用
#### 从标签栏收藏页面
**收藏页面：**
1. 在任意页面的标签上右击
2. 选择"收藏到快速开始"
3. 系统会自动获取路由图标和颜色
4. 前往工作台查看新添加的链接
#### 取消收藏
**取消收藏：**
1. 在已收藏页面的标签上右击
2. 选择"取消收藏"（图标会显示为实心星星）
3. 链接立即从快速开始列表中移除
#### 自动图标获取
**自动图标获取：**
- **优先级1**：使用路由 `meta.icon` 配置
- **优先级2**：根据路径智能匹配预设图标
- **优先级3**：使用默认链接图标
### 手动添加链接
#### 手动添加链接
1. 在快速开始组件中点击"添加"按钮
2. 填写链接信息：
- 标题：链接显示名称
- 描述：链接说明文字
- 链接地址：内部路径或外部URL
- 链接类型：内部链接或外部链接
- 图标：从预设图标中选择
- 颜色：自定义图标颜色
- **标题**：链接显示名称
- **描述**：链接说明文字
- **链接地址**：内部路径或外部URL
- **链接类型**：内部链接或外部链接
- **图标**：从预设图标中选择
- **颜色**：自定义图标颜色
3. 点击确定保存
### 管理快速链接
#### 管理快速链接
#### 右键菜单操作
**编辑链接：**
1. 在快速开始组件中右击任意链接
2. 选择"编辑链接"
3. 对话框会自动填充现有的链接信息
4. 修改需要更改的字段
5. 点击"确定"保存修改
1. **编辑链接**：
- 在快速开始组件中右击任意链接
- 选择"编辑链接"
- 对话框会自动填充现有的链接信息
- 修改需要更改的字段
- 点击"确定"保存修改
**删除链接：**
1. 在快速开始组件中右击任意链接
2. 选择"删除链接"
3. 在确认对话框中点击"确定"
2. **删除链接**：
- 在快速开始组件中右击任意链接
- 选择"删除链接"
- 在确认对话框中点击"确定"
### 使用快速链接
#### 使用快速链接
- **内部链接**：点击后在当前窗口跳转
- **外部链接**：点击后在新标签页打开，带有"外链"标识
## 技术实现
## 技术架构
### 组件结构
### 目录结构
```
dashboard/components/
├── QuickStart.vue # 主要的快速开始组件
├── AddQuickLinkDialog.vue # 添加快速链接对话框
├── index.ts # 组件导出文件
└── README.md # 功能说明文档
```text
dashboard/
├── workplace.vue # 工作台主页面
├── analysis.vue # 数据分析页面
├── components/ # 组件库
│ ├── QuickStart.vue # 快速开始组件
│ ├── AddQuickLinkDialog.vue # 添加链接对话框
│ └── index.ts # 组件导出
└── README.md # 模块文档
```
### 核心文件
### 核心技术栈
- `QuickStart.vue`: 主组件，负责显示快速链接列表
- `AddQuickLinkDialog.vue`: 添加/编辑对话框
- `utils/quickStartManager.ts`: 全局数据管理器
- `layouts/components/TagsView/index.vue`: 标签栏组件（已修改）
- **Vue 3**: Composition API + `<script setup>`
- **TypeScript**: 完整的类型定义
- **Element Plus**: UI 组件库
- **ECharts**: 数据可视化图表
- **Pinia**: 状态管理（如需要）
- **Vue Router**: 路由管理
### 数据管理
使用 `quickStartManager` 全局管理器：
#### 快速开始数据管理器
```typescript
// utils/quickStartManager.ts
import { quickStartManager } from '@/utils/quickStartManager';
// 获取所有链接
@@ -128,47 +196,211 @@ const exists = quickStartManager.isLinkExists(href);
quickStartManager.addListener(callback);
```
### 图标配置
#### 本地存储
支持的图标类型：
- **存储方式**: localStorage
- **数据格式**: JSON
- **存储键**: `quick-start-links`
- **容错处理**: 存储失败时的降级方案
### 组件设计
#### 1. 工作台页面 (workplace.vue)
**技术特点:**
- 响应式栅格布局 (`ElRow` + `ElCol`)
- 组件化设计，功能模块独立
- 数据驱动的动态渲染
- 移动端适配
**主要组件:**
```vue
<template>
<div class="app-container">
<!-- 用户信息卡片 -->
<ElCard>用户欢迎信息</ElCard>
<ElRow :gutter="16">
<!-- 左侧内容区 -->
<ElCol :xl="16">
<ProjectList /> <!-- 项目列表 -->
<ActivityTimeline /> <!-- 动态时间线 -->
</ElCol>
<!-- 右侧侧边栏 -->
<ElCol :xl="8">
<QuickStart /> <!-- 快速开始 -->
<DataChart /> <!-- 数据图表 -->
<TeamMembers /> <!-- 团队成员 -->
</ElCol>
</ElRow>
</div>
</template>
```
#### 2. 快速开始组件 (QuickStart.vue)
**核心特性:**
- 虚拟滚动优化（大量链接时）
- 右键菜单交互
- 拖拽排序（可扩展）
- 实时数据同步
**组件架构:**
```typescript
// 数据响应式
const quickLinks = ref<QuickLink[]>([]);
const selectedLink = ref<QuickLink | null>(null);
// 事件处理
const handleQuickLinkClick = (item: QuickLink) => { /* 跳转逻辑 */ };
const handleEditLink = (item: QuickLink) => { /* 编辑逻辑 */ };
const handleDeleteLink = (item: QuickLink) => { /* 删除逻辑 */ };
// 生命周期
onMounted(() => quickStartManager.addListener(updateQuickLinks));
onUnmounted(() => quickStartManager.removeListener(updateQuickLinks));
```
### 图标系统
#### 支持的图标类型
**Element Plus 图标:**
- User, Setting, Document, DataAnalysis
- Monitor, Tools, Bell, Message, Search
- House, Files, Calendar, ChatDotRound
- Connection, DataBoard, Histogram, PieChart
- TrendCharts, Operation, Service, Guide, Link
### 路径映射
系统会根据路径自动推断合适的图标：
## 性能优化
```typescript
const iconMap = {
'/dashboard': { icon: 'House', color: '#409EFF' },
'/system': { icon: 'Setting', color: '#67C23A' },
'/user': { icon: 'User', color: '#409EFF' },
// ... 更多映射
};
```
### 组件优化
- **虚拟滚动**: 大量快速链接时使用虚拟滚动
- **懒加载**: 图表组件按需加载
- **缓存策略**: localStorage 本地缓存
- **数据同步**: 事件监听机制
## 扩展功能
### 已规划的功能
1. **权限控制**: 根据用户角色显示不同的快速链接
2. **分组管理**: 将快速链接按类别分组显示
3. **拖拽排序**: 支持用户自定义链接顺序
4. **导入导出**: 支持配置的导入和导出
5. **使用统计**: 记录链接点击次数和使用频率
6. **云端同步**: 将配置同步到云端账户
7. **主题定制**: 支持自定义主题和样式
8. **快捷键**: 支持键盘快捷键操作
### 自定义配置
可以通过修改 `quickStartManager.ts` 中的默认配置来自定义预设链接：
#### 修改默认链接
```typescript
// utils/quickStartManager.ts
private getDefaultLinks(): QuickLink[] {
return [
// 自定义默认链接
{
id: 'custom-link',
title: "自定义链接",
description: "这是一个自定义的快速链接",
icon: "Star",
color: "#409EFF",
href: "/custom-page",
action: "navigate"
}
// 更多自定义链接...
];
}
```
#### 扩展图标映射
```typescript
// utils/quickStartManager.ts
const iconMap = {
'/custom-module': { icon: 'CustomIcon', color: '#FF6B6B' },
// 添加更多路径映射...
};
```
## 开发指南
### 添加新页面
1. **创建页面组件**: `dashboard/new-page.vue`
2. **配置路由**: 在 `router/index.ts` 中添加路由配置
3. **添加图标映射**: 在 `quickStartManager.ts` 中添加路径映射
### 创建新组件
1. **创建组件文件**: `dashboard/components/NewComponent.vue`
2. **导出组件**: 在 `components/index.ts` 中导出
3. **在页面中使用**: 导入并使用组件
## 注意事项
1. **存储限制**: localStorage 有大小限制，建议控制链接数量
2. **图标依赖**: 确保使用的图标已在 Element Plus 中导入
3. **路由匹配**: 内部链接需要确保路由存在
4. **安全性**: 外部链接会在新窗口打开，已添加安全参数
### 性能注意事项
## 测试页面
- **存储限制**: localStorage 有大小限制（通常5-10MB）
- **内存管理**: 及时清理事件监听器，避免内存泄漏
- **渲染优化**: 大量数据时考虑虚拟滚动或分页
访问 `/demo/quick-start-test` 可以测试收藏功能的完整流程。
### 兼容性注意事项
- **浏览器支持**: 确保目标浏览器支持使用的 API
- **图标依赖**: 确保使用的图标已正确导入
- **路由匹配**: 内部链接需要确保对应路由存在
### 安全注意事项
- **外部链接**: 使用 `noopener,noreferrer` 参数
- **XSS 防护**: 对用户输入进行适当的转义
- **权限控制**: 敏感功能需要权限验证
## 测试
### 功能测试
访问 `/demo/quick-start-test` 进行完整的功能测试：
1. **收藏功能测试**
2. **编辑功能测试**
3. **删除功能测试**
4. **图标获取测试**
5. **数据持久化测试**
### 单元测试
```typescript
// tests/dashboard/QuickStart.spec.ts
import { mount } from '@vue/test-utils';
import QuickStart from '@/views/dashboard/components/QuickStart.vue';
describe('QuickStart Component', () => {
it('should render quick links', () => {
const wrapper = mount(QuickStart);
expect(wrapper.find('.quick-links-container').exists()).toBe(true);
});
});
```
## 更新日志
### v1.0.0 (最新)
- ✅ 新增编辑链接预填充功能
- ✅ 优化图标获取逻辑
- ✅ 支持切换收藏状态
- ✅ 完善错误处理和用户提示
- ✅ 新增右键删除链接功能
- ✅ 添加确认对话框
- ✅ 实现标签栏右键收藏功能
- ✅ 自动获取路由图标
- ✅ 数据持久化存储
- ✅ 基础快速开始组件
- ✅ 手动添加链接功能
- ✅ 内部和外部链接支持