feat(docs): add frontend design prompt for fund management system
Add a new prompt file outlining requirements for a modernized fund management analysis system frontend, including multi-page support, smooth transitions, collapsible function bar, and light/dark theme switching. This enhances the project's design documentation for AI-optimized prompts.
This commit is contained in:
zeaslity
@@ -74,7 +74,7 @@
|
||||
|
||||
* **统一响应与错误处理:**
|
||||
|
||||
* **响应格式:** 假设后端标准响应格式为：
|
||||
* **响应格式:** 后端标准响应格式为：
|
||||
```typescript
|
||||
interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
@@ -85,6 +85,21 @@
|
||||
error?: string;
|
||||
}
|
||||
```
|
||||
* **响应代码:** 后端标准代码的含义如下：
|
||||
```typescript
|
||||
// 常见错误码定义
|
||||
export enum ApiErrorCode {
|
||||
CodeSuccess = 0 // 成功
|
||||
CodeServerError = 10001 // 服务器内部错误
|
||||
CodeParamError = 10002 // 参数错误
|
||||
CodeUnauthorized = 10003 // 未授权
|
||||
CodeForbidden = 10004 // 禁止访问
|
||||
CodeNotFound = 10005 // 请求的数据不存在
|
||||
CodeTimeout = 10006 // 请求超时
|
||||
CodeValidationFail = 10007 // 验证失败
|
||||
CodeBusiness = 20001 // 业务逻辑错误
|
||||
}
|
||||
```
|
||||
* **统一拦截器:** 在响应拦截器 (`@/api/interceptors.ts`) 中，实现全局错误处理逻辑：
|
||||
1. **业务成功:** `code` 为 `0`，直接解析并返回 `data`。
|
||||
2. **业务失败:** `code` 不为 `0`，提取 `message`，通过全局通知系统（如Vuetify的Snackbar）展示给用户，并 `Promise.reject` 一个带有`data`的Error对象。
|
||||
13
b-需求转换专业设计/转换的prompt.md
Normal file
13
b-需求转换专业设计/转换的prompt.md
Normal file
@@ -0,0 +1,13 @@
|
||||
你是一名经验丰富的系统架构师。你的任务是接收一个初步的、可能不完整或不严谨的需求设计，并将其转化为一份专业的、结构严谨、技术上可行的详细设计方案。这份方案最终将被格式化为一段高质量的Prompt，可以直接输入给AI（例如，一个编码助手或另一个架构设计AI），以生成代码、详细的架构图或进一步的实现细节。
|
||||
|
||||
这个转化的过程将严格遵循几个核心优化方向：
|
||||
|
||||
- 面向AI输入进行优化： 结构清晰，指令明确，上下文充足，便于AI理解和执行。
|
||||
|
||||
- 提升严密性与完整性： 补充缺失的非功能性需求，明确边界条件、约束和系统规模预估。
|
||||
|
||||
- 修正设计错误： 识别并纠正初步设计中不切实际、性能低下或架构不合理的部分。
|
||||
|
||||
- 优化设计方案： 提出更高效、可扩展、更具鲁棒性的技术选型和架构模式。
|
||||
|
||||
- 语言专业化： 使用业界标准的术语和概念来描述架构组件、数据流和设计决策。
|
||||
49
c-ProjectTonyStack/1-原始设计/mask_binance_account.md
Normal file
49
c-ProjectTonyStack/1-原始设计/mask_binance_account.md
Normal file
@@ -0,0 +1,49 @@
|
||||
|
||||
|
||||
# 页面地址 [BinanceAccountView.vue](TonyMask/src/pages/BinanceAccountView.vue)
|
||||
|
||||
# 页面设计
|
||||
|
||||
## 页面修改
|
||||
- 需要在Header右侧显示当前 用户名(加粗,加大显示) 从已登录信息中获取
|
||||
|
||||
- 缩小账户类型一行的大小
|
||||
- 时间使用后端返回数据中的timestamp字段,已经是东八区时间,直接展示即可
|
||||
|
||||
## 页面功能
|
||||
|
||||
### 账户支持的加密货币
|
||||
- 展示 账户支持的加密货币 图标 简称
|
||||
- 接口地址 GET /api/binance/account/symbols/get
|
||||
- 返回的接口币种是加以对名称,BNBUSDT,XRPUSDT等,请统一去除掉USDT后缀
|
||||
- 增大显示
|
||||
- 用一行显示
|
||||
|
||||
### 添加账户支持加密货币
|
||||
- 接口地址 POST /api/binance/account/symbols/add
|
||||
- 下面内容都在同一行显示
|
||||
- 左侧显示文字 添加账户支持加密货币
|
||||
- 中间 动态显示 加密货币图标及名称 能够有删除键 可以取消选择
|
||||
- 右侧，输入框，可以调用[cryptoIconData.ts](TonyMask/src/components/Icons/cryptoIconData.ts)中的方法,根据输入的简称,匹配查询获取到任意支持的币种 显示币种图标和简称
|
||||
- 最右侧,显示添加按钮,显示删除按钮
|
||||
|
||||
### 删除账户支持的加密货币
|
||||
- 接口地址 POST /api/binance/account/symbols/delete
|
||||
- 与添加共用逻辑,通过按钮区分调用方法
|
||||
|
||||
|
||||
# 资产详情页面
|
||||
- 修改 总计 列名称为 币种数量
|
||||
- 搜索框 右侧 显示 当前账户总资产
|
||||
- 累加每一行的资产总计
|
||||
|
||||
## 币种实时价格展示
|
||||
- 新增一列,名称为币种价格 展示币种的实时价格
|
||||
- 查询币种的实时价格 接口地址为 POST /api/binance/market/ticker/price
|
||||
- 具体函数为 [binance_market_handler.go](TonyCryptoOctopus\handler\binance_market_handler.go)中的GetPriceTickerHandler方法
|
||||
- 使用列表形式 Symbols
|
||||
- 构建交易对名称 使用symbol+USDT,例如 BTC转换为 BTCUSDT
|
||||
|
||||
## 资产总计
|
||||
- 新增一列 名称为 资产总计
|
||||
- 每一行 将 币种数量与 币种价格相乘的结果
|
||||
36
c-ProjectTonyStack/1-原始设计/mask_binance_order.md
Normal file
36
c-ProjectTonyStack/1-原始设计/mask_binance_order.md
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
# 页面地址 [BinanceOrder.vue](TonyMask/src/pages/BinanceOrder.vue)
|
||||
- 如果没有页面 请创建该页面
|
||||
- 页面在侧边栏的名称为 交易订单
|
||||
|
||||
# 页面设计
|
||||
- 展示特定币种，特定查询条件下的订单情况
|
||||
- 接口参数为 [binance_order_handler.go](TonyCryptoOctopus\handler\binance_order_handler.go) 中的MyTradesRequest
|
||||
- 接口参数说明: 前端不呈现limit,固定为1000
|
||||
- 忽略OrderID和FromID,不需要此参数
|
||||
- 默认起始时间为 2025-01-01 08:00:00
|
||||
- 新增固定时间段,最近三个月,最近一个月,最近一年,最近三年,当点击查询时候,根据当前时间作为endTime推算起始时间
|
||||
|
||||
- 支持按照时间顺序,倒序或者正序排列
|
||||
- 可以筛选卖出和买入方向的订单
|
||||
- 根据订单的cst_time,展示时间轴
|
||||
- 每笔订单在时间轴上是一个小点,点击可以筛选到该笔订单
|
||||
- 时间轴可以划取范围,通过时间段筛选订单
|
||||
|
||||
|
||||
|
||||
## 订单接口数据
|
||||
- 接口地址 /api/binance/order/trades 查询
|
||||
- 接口地址 /api/binance/order/trades/save 查询+保存
|
||||
- 具体接口为 [binance_order_handler.go](TonyCryptoOctopus\handler\binance_order_handler.go)中的GetMyTradesHandler
|
||||
- 订单接口查询,有两个查询按钮,一个查询 一个查询保存,颜色不同
|
||||
- 查询保存之后,额外显示返回结果的message字段内容
|
||||
|
||||
|
||||
## 输入框设置
|
||||
- 使用 [CurrencySelector.vue](TonyMask\src\components\CurrencySelector.vue)中的输入框
|
||||
- 根据页面样式,合理调整大小
|
||||
|
||||
## 开始时间
|
||||
- 当取消初始时间内容时候,自动变为默认的初始时间
|
||||
42
c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md
Normal file
42
c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 前端图标模组
|
||||
|
||||
## 样式说明
|
||||
- 图标只需要满足明亮模式
|
||||
- 图标的大小是可以调整的
|
||||
- 图标应该采用svg的格式
|
||||
|
||||
|
||||
## 图标管理
|
||||
|
||||
### 图标获取
|
||||
- 加密货币的图标，从[TradingView所有加密货币](https://cn.tradingview.com/markets/cryptocurrencies/prices-all/)爬取
|
||||
|
||||
### 图标存储
|
||||
- 常见加密货币创建svg的图标数据存储起来，便其他的页面调用
|
||||
- 存储结构体包含
|
||||
- 加密货币全称 Bitcoin
|
||||
- 加密货币大写全称 BITCOIN
|
||||
- 加密货币简称 BTC
|
||||
- 加密货币描述 Bitcoin is balabala
|
||||
- 加密货币svg图标内容
|
||||
- 应该有未知货币的图标
|
||||
- 应该设计类似Map的结构，可以快速通过加密货币名称获取到对应图标
|
||||
|
||||
### 图标查询
|
||||
- 设计一个函数，能够通过交易对,前缀匹配,大写名称,加密货币简称均可查询到加密货币全称,即多对一的查询函数
|
||||
- 查询速度应该在O(n)以下
|
||||
|
||||
### 交易对图标
|
||||
- 交易对图标，仿照[TradingView交易对页面](https://cn.tradingview.com/symbols/BTCUSDT/?exchange=BINANCE)页面中图标放置的样式,将两种加密货币的图标进行叠放显示
|
||||
-
|
||||
|
||||
|
||||
## 加密货币名称
|
||||
### 交易对名称
|
||||
- 后端的接口通常返回的是交易对名称
|
||||
- 交易对名称构成为 SOLUSDT LINKUSDT
|
||||
- 后端接口的symbol均改为 交易对名称
|
||||
|
||||
### 加密货币全称
|
||||
- 前端应该优先展示加密货币大写全称
|
||||
-
|
||||
36
c-ProjectTonyStack/1-原始设计/mask_currency_selector.md
Normal file
36
c-ProjectTonyStack/1-原始设计/mask_currency_selector.md
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
# 页面地址 [CurrencySelector.vue](TonyMask/src/components/CurrencySelector.vue)
|
||||
- 如果没有页面 请创建该页面
|
||||
|
||||
# 页面设计
|
||||
- 作为所有其他设计币安账户支持币种的通用组件
|
||||
|
||||
## 样式
|
||||
- 账户支持币种选择框
|
||||
- 大小可以通过样式自定义,以适应其他页面调用
|
||||
- 匹配明亮和黑暗模式
|
||||
|
||||
## 功能设计
|
||||
- 呈现一个输入框 点击输入框空白处之后，出现文字输入框及币种选项
|
||||
- 支持通过输入按照币种名称快速查找币种
|
||||
- 输入框高度与选项保持一致
|
||||
- 输入框默认显示文字，点击选择币种，点击输入框之后消失，无选中币种时出现
|
||||
- 选项为账户支持的币种列表,显示为 币种图标 币种全名称
|
||||
- 当点击选项后，币种图标 名称 删除按键 出现在输入框 样式为按钮状样式
|
||||
- 币种选项部分有滑动功能
|
||||
- 当鼠标处于币种选项部分时候,可以通过滑轮控制币种选项的滑动
|
||||
- 币种选项部分右侧 有拖动滑动块
|
||||
- 已选择币种有取消选择按钮,点击取消按钮，输入框中去除此币种
|
||||
- 币种默认为 LINK，显示币种图标和币种全名称
|
||||
|
||||
### 参数说明
|
||||
- 输入框存在参数设置，支持单选和多选
|
||||
- 输入框可选择的币种选项支持配置
|
||||
- 调用[account.ts](TonyMask/src/api/account.ts)获取账户支持的币种列表, 然后调用[cryptoIconData.ts](TonyMask/src/components/Icons/cryptoIconData.ts)获取到对应的图标和全名称
|
||||
- 直接调用[cryptoIconData.ts](TonyMask/src/components/Icons/cryptoIconData.ts)获取到全部的币种图标和全名称
|
||||
|
||||
## 功能参考
|
||||
- 参照[ProfitAndLoss.vue](TonyMask/src/pages/ProfitAndLoss.vue)页面中的实现
|
||||
|
||||
|
||||
20
c-ProjectTonyStack/1-原始设计/mask_layout.md
Normal file
20
c-ProjectTonyStack/1-原始设计/mask_layout.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# 页面设计
|
||||
|
||||
## 页面总体布局设计
|
||||
### 现代化布局
|
||||
- 采用经典的“侧边导航 + 顶部应用栏 + 主内容区”布局
|
||||
- 主内容区最上面显示Header,显示当前处于的主功能区介绍
|
||||
|
||||
### 可收缩侧边栏
|
||||
- 左侧的功能栏可以通过点击按钮在“完整模式”和“图标模式”之间平滑切换，有效节省屏幕空间。
|
||||
|
||||
### 页面切换
|
||||
- 点击侧边栏的不同菜单项，主内容区会流畅地切换到对应的页面组件，实现了单页面应用（SPA）的核心导航功能。
|
||||
- 侧边栏高亮展示当前功能页面
|
||||
|
||||
### 明亮/暗色主题
|
||||
- 左侧功能栏最下面提供了一个主题切换按钮，可以一键在明亮（Light）和暗色（Dark）模式间切换。
|
||||
|
||||
### 响应式设计
|
||||
- 整个布局基于 Vuetify 的栅格系统，无论在桌面、平板还是手机上都能提供良好的视觉和操作体验。
|
||||
|
||||
32
c-ProjectTonyStack/1-原始设计/mask_login_page.md
Normal file
32
c-ProjectTonyStack/1-原始设计/mask_login_page.md
Normal file
@@ -0,0 +1,32 @@
|
||||
|
||||
|
||||
# 页面设计
|
||||
- 传统的登录页面,即打开前端网址出现的页面
|
||||
- 居中显示登录模块
|
||||
- 最上面显示 图标 ProjectTonyStack
|
||||
- 下面依次显示 用户名 用户名输入栏 密码 密码输入栏
|
||||
-
|
||||
### 密码输入栏
|
||||
- 密码输入之后应该默认是隐藏的
|
||||
- 密码输入栏最右边有隐藏显示图标,点击之后可以切换密码隐藏或明文显示
|
||||
|
||||
## 加密传输
|
||||
- 登录的密码向后端传递时应该采用加密的方式
|
||||
- 请在前后端之间设计一种加密传输用户密码的方式
|
||||
- 可以假设密钥不会外泄
|
||||
- 非对称加密的方式可行,但是有点复杂
|
||||
|
||||
## 页面功能
|
||||
- 当用户在调用其他接口时,ApiResponse后端标准返回体,code为10003的情况时,给出报错之后,2秒钟后重新跳转到登录页
|
||||
- 用户可以输入用户名,密码
|
||||
- 用户名 密码是必填项
|
||||
- 用户可以点击登录按钮进行登录
|
||||
- 将用户名 密码加密向后端传输,调用登录接口
|
||||
- 登录接口地址 POST /api/user/login
|
||||
|
||||
### 登录成功
|
||||
- 登录成功后,后端返回的ApiResponse的code为0时,ApiResponse中的data即为token
|
||||
- 需要将Token附加到后续所有请求的Header中, BearToken Auth的方式
|
||||
-
|
||||
### 登录失败
|
||||
- 当ApiResponse的code不为0时,直接红字提示 用户名或密码错误!
|
||||
37
c-ProjectTonyStack/1-原始设计/mask_profit-loss.md
Normal file
37
c-ProjectTonyStack/1-原始设计/mask_profit-loss.md
Normal file
@@ -0,0 +1,37 @@
|
||||
|
||||
|
||||
# 盈亏大屏页面 [ProfitAndLoss.vue](mdc:TonyMask/src/pages/ProfitAndLoss.vue)
|
||||
- 与后端进行 盈亏分析 数据的请求为 [profit_loss.ts](mdc:TonyMask/src/api/profit_loss.ts)
|
||||
- 请求选定的时间，默认为东八区的时间，起始时间修正为00:00:00，终止时间修正为 23:59:59
|
||||
|
||||
## 数据接口及格式
|
||||
- 数据接口 /api/profit-loss/aggregation
|
||||
- 数据格式为 [profit_and_loss.go](mdc:TonyProfitLoss/models/profit_and_loss.go)
|
||||
- 数据统一不显示单位，不显示美元标识符
|
||||
|
||||
## 页面设计
|
||||
- 按照下面的顺序依次呈现
|
||||
|
||||
### 币种选择
|
||||
- 币种选择栏 下拉框点击之后，币种图标出现在选择框中，具有删除按键
|
||||
- 下拉框出现，各个币种的图标及名称，点击的方式选取需要计算盈亏的币种
|
||||
- 选择框右边出现计算按钮
|
||||
|
||||
### 总体盈亏情况
|
||||
|
||||
- 使用绿色代表盈亏大于0，红色代表盈亏小于0
|
||||
|
||||
- 展示已实现盈亏，未实现盈亏，总盈亏
|
||||
|
||||
- 确保下列柱状图的纵坐标具有可变性，符合人类的观看习惯，纵坐标轴只显示整数数值，纵坐标可能出现负数
|
||||
- 按照柱状图，按照从大到小的顺序，展示查询币种的收益率
|
||||
- 按照柱状图，按照从大到小的顺序，展示查询币种的年化收益率
|
||||
- 按照柱状图，按照从大到小的顺序，展示查询币种的总盈亏数据
|
||||
- 按照柱状图，按照从大到小的顺序，展示查询币种的已实现盈亏数据
|
||||
- 按照柱状图，按照从大到小的顺序，展示查询币种的未实现盈亏数据
|
||||
|
||||
|
||||
<!-- ### 单一币种盈亏情况
|
||||
- 页面下方使用横条展示 币种图标及名称 点击即可跳转单一币种盈亏分析页面 [SingleProfitAndLoss.vue](mdc:TonyMask/src/pages/SingleProfitAndLoss.vue)
|
||||
- 数据来源接口 /api/profit-loss/aggregation 中包括此部分数据
|
||||
- 跳转时，附带单一币种的盈亏数据，传递给 单一币种盈亏分析页面 -->
|
||||
44
c-ProjectTonyStack/1-原始设计/mask_single-pnl.md
Normal file
44
c-ProjectTonyStack/1-原始设计/mask_single-pnl.md
Normal file
@@ -0,0 +1,44 @@
|
||||
|
||||
|
||||
|
||||
# 单一币种盈亏分析大屏 [SingleProfitAndLoss.vue](TonyMask/src/pages/SingleProfitAndLoss.vue)
|
||||
|
||||
## 数据接口及格式
|
||||
- 数据接口 /api/profit-loss/single
|
||||
- 数据格式 [profit_and_loss.go](TonyProfitLoss/models/profit_and_loss.go)
|
||||
- 数据统一不显示单位，不显示美元标识符
|
||||
|
||||
## 页面设计
|
||||
- 页面要求 设计的较为好看
|
||||
- 对于重点内容有突出显示
|
||||
|
||||
## 头部
|
||||
- 未选择币种时候,显示币种输入框,
|
||||
- 点击币种输入框,可以调用[cryptoIconData.ts](TonyMask/src/components/Icons/cryptoIconData.ts)中的findCoinByName方法,查询获取到任意支持的币种
|
||||
- 选择币种之后,币种输入框消失.显示币种图标,币种全名称,币种简介.使用选择体包裹币种,右侧显示 X 取消选择,点击之后,重新显示币种输入框
|
||||
- 右侧显示计算按钮，点击开始计算
|
||||
|
||||
## 单一币种盈亏分析展示
|
||||
- 使用绿色代表盈亏大于0，红色代表盈亏小于0
|
||||
|
||||
- 下面的每条内容,展示在同一行中
|
||||
- 交易时间，最早交易时间，最晚交易时间，跨度天数(day_duration)
|
||||
- 总盈亏(total_pnl)
|
||||
- 已实现盈亏,未实现盈亏
|
||||
- 展示收益率(total_pnl_percentage)
|
||||
- 年化收益率(annualized_pnl_percentage) 相对年化收益率(annualized_pnl_percentage_real)
|
||||
- 总交易次数 总交易金额 总交易数量(total_trade_quantity)
|
||||
- 手续费 设置列表展示,小图标+手续费金额
|
||||
|
||||
|
||||
## 买入方向数据
|
||||
- 买入数量
|
||||
- 买入总金额
|
||||
- 买入订单数量
|
||||
- 平均买入价格
|
||||
|
||||
## 卖出方向数据
|
||||
- 卖出数量
|
||||
- 卖出总金额
|
||||
- 卖出订单数量
|
||||
- 平均卖出价格
|
||||
0
c-ProjectTonyStack/1-原始设计/前端重构.md
Normal file
0
c-ProjectTonyStack/1-原始设计/前端重构.md
Normal file
72
c-ProjectTonyStack/2-AI优化设计/agi_login_page.md
Normal file
72
c-ProjectTonyStack/2-AI优化设计/agi_login_page.md
Normal file
@@ -0,0 +1,72 @@
|
||||
### **主题：用户认证模块 - 登录页面技术设计方案 (v2.0)**
|
||||
|
||||
**1. 总体目标 (Overall Objective)**
|
||||
|
||||
构建一个安全、健壮、响应式且符合 Material Design 3 (MD3) 规范的用户登录页面。该页面需完全遵循项目既定的 `vue3-typescript-stye.md` 架构规范，并实现客户端密码加密、全局状态管理和统一的API错误处理逻辑。
|
||||
|
||||
**2. 页面级组件设计 (`Login.vue`)**
|
||||
|
||||
* **文件位置:** `src/pages/Login.vue`
|
||||
* **技术栈:** Vue 3 (`<script setup lang="ts">`), Vuetify 3
|
||||
* **布局与样式:**
|
||||
* **居中布局:** 必须使用 Vuetify 的栅格系统 (`v-container`, `v-row`, `v-col`) 实现页面内容在所有视口下（移动端、平板、桌面端）的垂直与水平居中。
|
||||
* **登录卡片:** 主体容器使用 `v-card` 组件，并设置 `elevation` 属性以符合 MD3 的视觉深度。
|
||||
* **标题栏:** 卡片顶部使用 `v-toolbar` 组件，颜色绑定为 `color="primary"`，内容为项目图标（使用 `v-icon`）与 "ProjectTonyStack" 文本。
|
||||
* **主题化:** 所有组件颜色、背景、文本颜色严禁硬编码。必须使用 Vuetify 主题变量（如 `primary`, `error`, `surface`），确保在明亮/黑暗模式下无缝切换。
|
||||
* **表单设计 (`v-form`):**
|
||||
* **表单实例:** 使用 `v-form` 组件包裹所有输入域，并通过 `ref` 引用实例以调用其 `validate` 方法。
|
||||
* **输入字段 (`v-text-field`):**
|
||||
* **用户名:** `label` 为 "用户名"，`prepend-inner-icon` 设置为 `mdi-account-outline`。
|
||||
* **密码:** `label` 为 "密码"，`prepend-inner-icon` 设置为 `mdi-lock-outline`。
|
||||
* **密码可见性:** 字段类型 (`type`) 动态绑定为 `'text'` 或 `'password'`。使用 `append-inner-icon` 属性，并根据状态动态切换 `mdi-eye` 和 `mdi-eye-off` 图标，点击该图标可切换密码的明文/密文显示。
|
||||
* **校验规则:** 用户名和密码均为必填项。必须使用 Vuetify 的 `:rules` 属性进行客户端校验，提供明确的错误提示信息（如："用户名为必填项"）。
|
||||
* **用户交互:**
|
||||
* **登录按钮 (`v-btn`):** 按钮应为块级元素 (`block`)，颜色为 `primary`。必须绑定 `:loading` 属性到组件的布尔状态，在API请求期间显示加载指示器，并禁用按钮。
|
||||
* **错误提示:** 在表单内、登录按钮上方，使用 `v-alert` 组件。通过 `v-if` 指令控制其显示。`type` 属性绑定为 `error`，使其颜色与主题的错误色保持一致。Alert 中显示的错误文本来自组件状态。
|
||||
|
||||
**3. 密码加密传输方案**
|
||||
|
||||
* **选型:** 鉴于 "密钥不会外泄" 的假设及对简化实现的追求，我们采用**对称加密算法 AES (CBC模式, PKCS7填充)**。
|
||||
* **实现:**
|
||||
* **依赖库:** 项目引入 `crypto-js` 库进行加密操作。
|
||||
* **工具模块:** 在 `src/utils/crypto.ts` 中封装一个 `encryptAES` 函数。此函数接收明文密码，使用预设的16字节密钥（KEY）和16字节初始化向量（IV）进行加密，并返回 Base64 编码的密文字符串。
|
||||
* **数据流:**
|
||||
1. 前端：在发起登录请求前，**仅对密码字段**调用 `encryptAES` 函数。
|
||||
2. 传输：向后端 `POST /api/user/login` 接口发送 JSON 体，其中 `username` 为明文，`password` 为加密后的密文。
|
||||
3. 后端：使用相同的 KEY 和 IV 解密密码，然后进行哈希比对验证。
|
||||
|
||||
**4. 状态管理 (Pinia)**
|
||||
|
||||
* **模块位置:** `src/store/auth.ts`
|
||||
* **职责:** 统一管理用户认证状态（Token）及相关业务逻辑（登录、登出），作为全应用认证信息的唯一可信源。
|
||||
* **State:** 定义 `AuthState` 接口，包含 `token: string | null`。初始状态尝试从 `localStorage` 读取 `token` 以支持持久化登录。
|
||||
* **Actions:**
|
||||
* `login(credentials: UserCredentials): Promise<void>`:
|
||||
1. 接收包含明文密码的 `credentials` 对象。
|
||||
2. 调用 `src/utils/crypto.ts` 中的 `encryptAES` 加密密码。
|
||||
3. 调用 `src/api/modules/user.ts` 中的 `loginApi` 方法发起请求。
|
||||
4. **成功时 (`code: 0`):** 从 API 响应中提取 `token`，调用内部 `setToken` action。
|
||||
5. **失败时:** 捕获 API 层抛出的错误，调用 `clearToken` action，然后将错误继续向上抛出，由UI层处理显示。
|
||||
* `setToken(token: string)`: 将 `token` 同时存入 Pinia state 和 `localStorage`。
|
||||
* `logout()`: 清理 state 和 `localStorage` 中的 `token`，并可在此触发路由跳转至登录页。
|
||||
* **Getters:**
|
||||
* `isAuthenticated: (state) => boolean`: 根据 `state.token` 是否存在返回一个布尔值，便于在应用各处快速判断登录状态。
|
||||
|
||||
**5. API 层设计与全局错误处理**
|
||||
|
||||
* **API 模块:**
|
||||
* **文件位置:** `src/api/modules/user.ts`
|
||||
* **函数定义:** 导出一个 `loginApi(data: LoginPayload): Promise<LoginResponse>` 函数。参数和返回类型必须从 `@/types/user.d.ts` 导入，确保类型安全。
|
||||
* **类型定义:**
|
||||
* **文件位置:** `@/types/user.d.ts`
|
||||
* **接口:** 定义 `UserCredentials` (明文)、`LoginPayload` (加密后)、`LoginResponse` (包含 `token` 字段) 等精确的接口。
|
||||
* **统一拦截器 (Critical Refinement):**
|
||||
* **文件位置:** `@/api/interceptors.ts`
|
||||
* **请求拦截器:** 自动从 `authStore` 获取 `token`，如果存在，则附加到每个请求的 `Authorization` Header 中 (`Bearer ${token}`)。
|
||||
* **响应拦截器:**
|
||||
1. **业务成功 (`code === 0`):** 解析响应体，直接 `resolve(response.data.data)`。
|
||||
2. **业务失败 (`code !== 0`):** `reject(new Error(response.data.message))`。错误信息将由页面级的 `catch` 块捕获并显示在 `v-alert` 中。
|
||||
3. **未授权处理 (`code === 10003`):** 这是全局的强制下线逻辑。拦截器必须执行以下原子操作：
|
||||
* 通过全局通知组件（如 Snackbar）向用户显示 "登录状态已过期，请重新登录" 的提示。
|
||||
* 调用 `authStore.logout()` 清理所有本地认证凭据。
|
||||
* 延迟2秒后，使用 `router.push('/login')` 强制将页面跳转到登录页。**此逻辑严禁在任何页面组件中单独实现**。
|
||||
12
c-ProjectTonyStack/promt.md
Normal file
12
c-ProjectTonyStack/promt.md
Normal file
@@ -0,0 +1,12 @@
|
||||
请根据前端代码的风格，设计一个现代化的资金管理分析系统的前端页面布局样式。要求支持多页面功能，不同页面之间切换流畅。功能栏可以隐藏。页面主题支持明亮和暗色模式切换
|
||||
|
||||
|
||||
你是一名经验丰富的系统架构师,能够将通俗的需求,粗略的设计,转化为专业技术且精细的设计稿.
|
||||
转化的参考方向如下:
|
||||
- 设计内容是面向AI输入的,优化方向应该针对AI的prompt
|
||||
- 提升设计中的严密性与完整性
|
||||
- 修改设计中存在的错误
|
||||
- 优化设计方案
|
||||
- 用专业的技术语言来精细化设计稿
|
||||
|
||||
将请你根据前端代码的风格要求vue3-typescript-stye.md，对登录设计稿进行优化
|
||||
Reference in New Issue
Block a user