ProjectTonyStack项目-前端终止
This commit is contained in:
zeaslity
133
c-ProjectTonyStack/1-原始设计/1-页面/mask_binance_account.md
Normal file
133
c-ProjectTonyStack/1-原始设计/1-页面/mask_binance_account.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# 页面地址 [BinanceAccountView.vue](TonyMask/src/pages/BinanceAccountView.vue)
|
||||
|
||||
# 页面设计
|
||||
|
||||
- 需要在 Header 右侧显示当前 用户名(加粗,加大显示)
|
||||
- 从已登录信息中获取当前用户名
|
||||
|
||||
# 页面功能
|
||||
|
||||
## 接口信息
|
||||
|
||||
- 接口地址 GET /api/binance/account/info
|
||||
- 接口返回的结构体
|
||||
|
||||
```go
|
||||
// Account define account info
|
||||
type Account struct {
|
||||
MakerCommission int64 `json:"makerCommission"`
|
||||
TakerCommission int64 `json:"takerCommission"`
|
||||
BuyerCommission int64 `json:"buyerCommission"`
|
||||
SellerCommission int64 `json:"sellerCommission"`
|
||||
CommissionRates CommissionRates `json:"commissionRates"`
|
||||
CanTrade bool `json:"canTrade"`
|
||||
CanWithdraw bool `json:"canWithdraw"`
|
||||
CanDeposit bool `json:"canDeposit"`
|
||||
UpdateTime uint64 `json:"updateTime"`
|
||||
AccountType string `json:"accountType"`
|
||||
Balances []Balance `json:"balances"`
|
||||
Permissions []string `json:"permissions"`
|
||||
UID int64 `json:"uid"`
|
||||
}
|
||||
|
||||
type CommissionRates struct {
|
||||
Maker string `json:"maker"`
|
||||
Taker string `json:"taker"`
|
||||
Buyer string `json:"buyer"`
|
||||
Seller string `json:"seller"`
|
||||
}
|
||||
|
||||
// Balance define user balance of your account
|
||||
type Balance struct {
|
||||
Asset string `json:"asset"`
|
||||
Free string `json:"free"`
|
||||
Locked string `json:"locked"`
|
||||
}
|
||||
```
|
||||
|
||||
## 账户支持的交易对信息
|
||||
|
||||
### 账户支持的交易对模块
|
||||
|
||||
- 查看状态
|
||||
- 使用隐藏的输入框,包含胶囊按钮状交易对信息
|
||||
- 输入框隐藏,不可见
|
||||
-
|
||||
- 账户支持的交易对信息,通过如下接口获取
|
||||
- 接口地址 GET /api/binance/account/symbols/get
|
||||
- 胶囊按钮状显示每一个支持的交易对信息
|
||||
- 包含 交易对图标 简称
|
||||
- 图标信息通过[CryptoIcon.vue](TonyMask/src/components/CryptoIcon.vue)获取
|
||||
- 右侧有编辑按钮,点击编辑之后进入编辑模式
|
||||
- 隐藏输入框出现
|
||||
- 胶囊按钮出现删除按键
|
||||
- 右侧编辑按键变为保存按键
|
||||
|
||||
### 添加账户支持加密货币
|
||||
|
||||
- 账户支持的交易对模块进入编辑模式后
|
||||
- 空白侧支持点击
|
||||
- 点击之后,可以使用[CurrencySelector.vue](/TonyMask/src/components/CurrencySelector.vue)进行交易对选择
|
||||
- 选择之后,立即调用添加接口
|
||||
- 接口地址 POST /api/binance/account/symbols/add
|
||||
- 当点击保存按钮之后,退出编辑模式
|
||||
|
||||
### 删除账户支持的加密货币
|
||||
|
||||
- 账户支持的交易对模块进入编辑模式后
|
||||
- 可以通过胶囊按钮的删除键进行删除
|
||||
- 点击删除按键后,立刻调用删除接口
|
||||
- 接口地址 POST /api/binance/account/symbols/delete
|
||||
- 当点击保存按钮之后,退出编辑模式
|
||||
|
||||
## 账户信息模块
|
||||
- 使用矩形长条状展示账户信息
|
||||
- 账户UID
|
||||
- 账户类型
|
||||
- 能否交易
|
||||
- 能否提款
|
||||
- 能够充值
|
||||
- 交易手续费
|
||||
- 账户权限
|
||||
|
||||
## 资产详情模块
|
||||
|
||||
- 使用表格的形式展示当前用户的资产信息
|
||||
|
||||
### 表格设计
|
||||
|
||||
- 表格头从左到右依次展示
|
||||
|
||||
- 文字输入框-筛选功能-快速根据币种简称 币种名称筛选到币种
|
||||
- 刷新按钮
|
||||
- 用于刷新调用币种实时价格
|
||||
- 汇总计算-当前账户总资产-累加每一行的资产总计
|
||||
- 加粗显示
|
||||
|
||||
- 表格内容展示
|
||||
|
||||
- 统一采用四舍五入保存两位小数
|
||||
- 统一不显示单位
|
||||
|
||||
- 按照如下的顺序展示列信息
|
||||
- 币种图标
|
||||
- 不显示表头
|
||||
- 币种大写名称
|
||||
- 表头显示名称
|
||||
- 币种实时价格
|
||||
- 表头显示实时价格
|
||||
- 币种总数量
|
||||
- 表头显示总数量
|
||||
- 币种可使用数量
|
||||
- 表头显示可使用数量
|
||||
- 币种冻结数量
|
||||
- 表头显示冻结数量
|
||||
- 币种总计
|
||||
- 表头显示币种总计
|
||||
- 该行币种总数量与币种的实时价格相乘的结果
|
||||
|
||||
### 币种实时价格列展示
|
||||
|
||||
- 使用 symbols 参数,将 account_info 接口中的所有币种,一次查询
|
||||
- 查询币种的实时价格 接口地址为 POST /api/binance/market/ticker/price
|
||||
- 具体函数为 [binance_market_handler.go](TonyCryptoOctopus\handler\binance_market_handler.go)中的 GetPriceTickerHandler 方法
|
||||
46
c-ProjectTonyStack/1-原始设计/1-页面/mask_binance_order.md
Normal file
46
c-ProjectTonyStack/1-原始设计/1-页面/mask_binance_order.md
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
|
||||
# 页面地址 [BinanceOrder.vue](TonyMask/src/pages/BinanceOrder.vue)
|
||||
- 页面在侧边栏的名称为 交易订单
|
||||
- 在主内容区的页面Header部分 靠右侧显示 交易订单
|
||||
- 展示特定交易对，特定查询条件下的订单情况
|
||||
|
||||
|
||||
# 页面设计
|
||||
## 订单查询栏
|
||||
- 接口参数为 [binance_order_handler.go](TonyCryptoOctopus\handler\binance_order_handler.go) 中的MyTradesRequest
|
||||
- 接口参数说明: 前端不呈现limit,固定为1000
|
||||
- 忽略OrderID和FromID,不需要此参数
|
||||
- 默认起始时间为 2025-01-01 08:00:00
|
||||
- 新增固定时间段,最近三个月,最近一个月,最近一年,最近三年,当点击查询时候,根据当前时间作为endTime推算起始时间
|
||||
- 取消固定时间选择之后，恢复到默认时间
|
||||
|
||||
### 币种选择器
|
||||
- 使用通用组件中的CurrencySelector
|
||||
- 根据页面样式,合理调整大小
|
||||
|
||||
### 订单接口数据
|
||||
- 接口地址 /api/binance/order/trades/save 查询
|
||||
- 具体接口为 [binance_order_handler.go](TonyCryptoOctopus\handler\binance_order_handler.go)中的GetMyTradesHandler
|
||||
|
||||
### 文件保存地址栏
|
||||
- 需要显示返回接口中的的message字段内容
|
||||
- message字段的内容是本地保存的订单数据文件地址
|
||||
- 点击查询之后，在订单查询栏最下面出现
|
||||
- 居中显示
|
||||
|
||||
## 订单展示区
|
||||
|
||||
### 时间区域展示
|
||||
- 根据订单的cst_time,展示时间轴
|
||||
- 每笔订单在时间轴上是一个小点,点击可以筛选到该笔订单
|
||||
- 时间轴可以划取范围,通过时间段筛选订单
|
||||
- 时间轴的范围自动根据最早和最晚交易时间进行修改
|
||||
- 时间轴的间距需要根据时间跨度，自动设置，便于美观
|
||||
|
||||
### 订单列表区
|
||||
- 支持按照时间顺序排序，支持倒序或者正序排列
|
||||
- 可以筛选卖出和买入方向的订单
|
||||
- 设置分页展示
|
||||
- 分页默认大小为20
|
||||
- 分页的可选大小为20 50 100
|
||||
@@ -1,22 +1,20 @@
|
||||
|
||||
|
||||
|
||||
# 单一币种盈亏分析大屏 [SingleProfitAndLoss.vue](TonyMask/src/pages/SingleProfitAndLoss.vue)
|
||||
|
||||
## 数据接口及格式
|
||||
- 数据接口 /api/profit-loss/single
|
||||
- 数据格式 [profit_and_loss.go](TonyProfitLoss/models/profit_and_loss.go)
|
||||
- 数据接口 POST /api/profit-loss/single
|
||||
- 数据返回格式 [profit_and_loss.go](TonyProfitLoss/models/profit_and_loss.go)
|
||||
- 数据统一不显示单位，不显示美元标识符
|
||||
|
||||
## 页面设计
|
||||
- 页面要求 设计的较为好看
|
||||
- 对于重点内容有突出显示
|
||||
|
||||
## 头部
|
||||
- 未选择币种时候,显示币种输入框,
|
||||
- 点击币种输入框,可以调用[cryptoIconData.ts](TonyMask/src/components/Icons/cryptoIconData.ts)中的findCoinByName方法,查询获取到任意支持的币种
|
||||
- 选择币种之后,币种输入框消失.显示币种图标,币种全名称,币种简介.使用选择体包裹币种,右侧显示 X 取消选择,点击之后,重新显示币种输入框
|
||||
- 右侧显示计算按钮，点击开始计算
|
||||
- 显示文字 单一币种盈亏分析
|
||||
- 靠右显示
|
||||
|
||||
### 币种选择器
|
||||
- 使用通用组件中的CurrencySelector
|
||||
- 根据页面样式,合理调整大小
|
||||
|
||||
## 单一币种盈亏分析展示
|
||||
- 使用绿色代表盈亏大于0，红色代表盈亏小于0
|
||||
@@ -1,15 +1,17 @@
|
||||
# 前端图标模组
|
||||
- 此模组作为前端项目的公共模组，可以供其他页面使用
|
||||
|
||||
## 样式说明
|
||||
- 图标只需要满足明亮模式
|
||||
- 图标的大小是可以调整的
|
||||
- 图标应该采用svg的格式
|
||||
|
||||
|
||||
## 图标管理
|
||||
|
||||
### 图标获取
|
||||
- 加密货币的图标，从[TradingView所有加密货币](https://cn.tradingview.com/markets/cryptocurrencies/prices-all/)爬取
|
||||
- 通过从[TradingView所有加密货币](https://cn.tradingview.com/markets/cryptocurrencies/prices-all/) 或者从稳定、公开的加密货币API（例如 CoinGecko 或 CoinMarketCap 的免费API）通过手动执行，获取前1000名加密货币的数据。
|
||||
- 按照市值排序，获取排名前一千的加密货币
|
||||
- 加密货币的全称 和 简称同样从此页面获取
|
||||
|
||||
### 图标存储
|
||||
- 常见加密货币创建svg的图标数据存储起来，便其他的页面调用
|
||||
@@ -28,15 +30,18 @@
|
||||
|
||||
### 交易对图标
|
||||
- 交易对图标，仿照[TradingView交易对页面](https://cn.tradingview.com/symbols/BTCUSDT/?exchange=BINANCE)页面中图标放置的样式,将两种加密货币的图标进行叠放显示
|
||||
-
|
||||
- 构建查用的交易对图标缓存Map，可以通过交易对名称快速获取到对应的图标
|
||||
- 常用交易对如下 BTCUSDT ETHUSDT BNBUSDT NEXOUSDT XRPUSDT LINKUSDT SOLUSDT
|
||||
- 此函数需要考虑后续能够手动添加其他的交易对
|
||||
|
||||
|
||||
## 加密货币名称
|
||||
### 交易对名称
|
||||
- 后端的接口通常返回的是交易对名称
|
||||
- 交易对名称构成为 SOLUSDT LINKUSDT
|
||||
- 后端接口的symbol均改为 交易对名称
|
||||
|
||||
### 前端后端接口-加密货币名称
|
||||
- 后端的接口返回的是交易对名称或者币种简称
|
||||
- 交易对名称构成为 SOLUSDT LINKUSDT
|
||||
- 后端接口的symbol均改为 交易对名称
|
||||
- 在前后端的接口中，需要设计函数解析接口中的参数
|
||||
|
||||
### 加密货币全称
|
||||
- 前端应该优先展示加密货币大写全称
|
||||
-
|
||||
- 前端必须要同时展示加密货币的图标和名称
|
||||
51
c-ProjectTonyStack/1-原始设计/2-组件/mask_currency_selector.md
Normal file
51
c-ProjectTonyStack/1-原始设计/2-组件/mask_currency_selector.md
Normal file
@@ -0,0 +1,51 @@
|
||||
|
||||
|
||||
# 组件名称 币种选择器 CurrencySelector
|
||||
|
||||
## 组件功能
|
||||
- 通用组件
|
||||
- 用于其他页面中的加密货交易对选择器
|
||||
- 输入框交易对选择器
|
||||
|
||||
## 组件参数说明
|
||||
- 输入框存在参数设置，支持单选和多选
|
||||
- 输入框可选择的币种选项支持配置
|
||||
- 加密货币币种选项
|
||||
- 交易对选项
|
||||
- 输入框默认币种或交易对名称
|
||||
- 默认参数为 点击选择币种
|
||||
- 有参数时，查找默认币种图标显示
|
||||
- 币种选项的展示数量
|
||||
- 默认为6个
|
||||
- 可以通过参数调节，通过滑动块展示选项
|
||||
|
||||
## 样式
|
||||
- 可以通过参数进行自定义长度 宽度和高度,以适应各个页面使用
|
||||
- 匹配明亮和黑暗模式
|
||||
- 币种图标不需要颜色变换
|
||||
- 输入框选项，均显示为图标 简称
|
||||
- 币种选项- 图标 BNB
|
||||
- 交易对选项- 图标 BNBUSDT
|
||||
- 输入框在页面中的层级处于最高层级
|
||||
- 点击输入框选择时候，文字输入框和选项不会被其他内容遮挡
|
||||
|
||||
## 功能设计
|
||||
- 输入框点击输入框空白处之后，出现文字输入框及币种选项
|
||||
- 文字输入框按照币种名称快速查找交易对
|
||||
- 文字输入框高度与交易对选项保持一致
|
||||
|
||||
- 当点击选项后，币种图标 名称 删除键 出现在输入框
|
||||
- 样式为胶囊按钮状
|
||||
- 胶囊按钮状颜色不同于输入框的颜色
|
||||
|
||||
- 币种选项部分有滑动功能
|
||||
- 当鼠标处于币种选项部分时候,可以通过滑轮控制币种选项的滑动
|
||||
- 币种选项部分右侧 有拖动滑动块，也可以通过滑动块控制选项展示
|
||||
|
||||
- 已选择选项有删除键,点击删除键，输入框中去除此选项
|
||||
- 当输入框无选项时，自动显示默认的文字或者选项
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
28
c-ProjectTonyStack/1-原始设计/3-工具/utils_time_exchange.md
Normal file
28
c-ProjectTonyStack/1-原始设计/3-工具/utils_time_exchange.md
Normal file
@@ -0,0 +1,28 @@
|
||||
|
||||
# 时间工具类
|
||||
|
||||
## 工具统一内容
|
||||
1 前后端之间的接口参数,时间统一使用"2025-01-01 08:00:00"的格式
|
||||
2 前后端之间接口的时间字符串,统一都为东八区时间
|
||||
|
||||
## 函数功能
|
||||
|
||||
### 获取一个月前的时间字符串
|
||||
- 当调用之后,根据当前之间,推算一个月前的时间,返回时间字符串
|
||||
- 格式为"2025-01-01 08:00:00"
|
||||
|
||||
### 获取三个月前的时间字符串
|
||||
- 当调用之后,根据当前之间,推算三个月前的时间,返回时间字符串
|
||||
- 格式为"2025-01-01 08:00:00"
|
||||
|
||||
### 获取一年前的时间字符串
|
||||
- 当调用之后,根据当前之间,推算一年前的时间,返回时间字符串
|
||||
- 格式为"2025-01-01 08:00:00"
|
||||
|
||||
### 获取三年前的时间字符串
|
||||
- 当调用之后,根据当前之间,推算一年前的时间,返回时间字符串
|
||||
- 格式为"2025-01-01 08:00:00"
|
||||
|
||||
### 解析时间字符串为时间
|
||||
- 传入为格式为"2025-01-01 08:00:00"的时间字符串
|
||||
- 使用东八区时区解析,转换为时间对象
|
||||
@@ -1,49 +0,0 @@
|
||||
|
||||
|
||||
# 页面地址 [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
|
||||
|
||||
## 资产总计
|
||||
- 新增一列 名称为 资产总计
|
||||
- 每一行 将 币种数量与 币种价格相乘的结果
|
||||
@@ -1,36 +0,0 @@
|
||||
|
||||
|
||||
# 页面地址 [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)中的输入框
|
||||
- 根据页面样式,合理调整大小
|
||||
|
||||
## 开始时间
|
||||
- 当取消初始时间内容时候,自动变为默认的初始时间
|
||||
@@ -1,36 +0,0 @@
|
||||
|
||||
|
||||
# 页面地址 [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)页面中的实现
|
||||
|
||||
|
||||
120
c-ProjectTonyStack/1-原始设计/vue3-typescript-stye.md
Normal file
120
c-ProjectTonyStack/1-原始设计/vue3-typescript-stye.md
Normal file
@@ -0,0 +1,120 @@
|
||||
**背景 (Context):**
|
||||
|
||||
你是一名资深前端架构师，负责搭建前端框架和制定开发规范。该项目要求极高的代码质量、无缝的用户体验（跨设备、跨主题）以及长期的可维护性。
|
||||
|
||||
**核心指令 (Core Directive):**
|
||||
|
||||
请你以架构师的身份，严格遵循并执行以下所有规范来生成代码、组件、模块和提供解决方案。你的任何产出都必须成为团队的代码典范。
|
||||
|
||||
**1. 语言与语法 (Language & Syntax):**
|
||||
|
||||
* **TypeScript 至上 (TypeScript Supremacy):**
|
||||
|
||||
* 项目 **必须** 完全基于 TypeScript (`<script setup lang="ts">`)。**严禁** 任何 `.js` 文件或 JavaScript 语法的混入。
|
||||
* **杜绝 `any`:** 除非在第三方库类型定义缺失且无法补充的极端情况下，否则**严禁**使用 `any`。所有变量、函数参数/返回值、Props、Emits、Pinia State/Actions **必须** 拥有精确的类型或接口（Interface/Type）。
|
||||
* **善用高级类型:** 积极使用泛型（Generics）、条件类型（Conditional Types）、映射类型（Mapped Types）和类型守卫（Type Guards）来创建灵活且类型安全的代码。
|
||||
* **类型组织:** 全局共享的类型定义在 `@/types` 目录下，按模块划分文件（如 `user.d.ts`, `order.d.ts`）。
|
||||
|
||||
* **纯粹的 Vue 3 (Pure Vue 3):**
|
||||
|
||||
* **组合式API (`<script setup>`)**: 这是项目中**唯一**允许的组件逻辑组织方式。
|
||||
* **响应式核心:** 精准使用 `ref`、`reactive`、`computed` 和 `watchEffect`。理解 `shallowRef` 和 `readonly` 等API的适用场景，并在需要时使用它们来优化性能。
|
||||
* **生命周期:** **必须** 使用 `onMounted`, `onUnmounted` 等组合式API钩子，**严禁** 混用任何Vue 2选项式API。
|
||||
* **依赖注入:** 复杂场景下，善用 `provide` 和 `inject` 进行跨层级组件通信，并为注入的值提供明确的类型定义和默认值。
|
||||
* **状态管理:** 唯一的状态管理方案是 **Pinia**。Store的定义必须模块化，包含清晰的 `state`, `getters`, `actions`，并全部进行严格的类型标注。
|
||||
|
||||
**2. UI框架与设计 (UI Framework & Design):**
|
||||
|
||||
* **Vuetify 3 & Material Design:**
|
||||
* 所有UI界面和组件**必须**基于 [Vuetify 3](https://vuetifyjs.com/en/) 构建。
|
||||
* 深度贯彻 [Google Material Design 3 (MD3)](https://m3.material.io/) 设计哲学。
|
||||
* **主题适配 (Theming):**
|
||||
* 所有组件和自定义样式**必须**能完美适配**明亮 (Light)** 和**黑暗 (Dark)** 两种主题模式。
|
||||
* **严禁**硬编码颜色值（如 `#FFFFFF` 或 `black`）。**必须**使用Vuetify提供的主题颜色变量（如 `rgb(var(--v-theme-surface))` 或在SASS中使用 `v-theme(on-surface)`）。
|
||||
* 自定义样式需利用CSS变量或SASS函数来响应主题切换。
|
||||
* **响应式设计 (Responsive Design):**
|
||||
* 所有页面和组件**必须**在不同尺寸的设备上提供卓越的体验，包括手机、iPad（横屏/竖屏）和桌面端。
|
||||
* 积极使用Vuetify的栅格系统 (`v-row`, `v-col`) 和响应式断点工具类（如 `hidden-sm-and-down`）。
|
||||
* 对于复杂布局，使用 Vuetify 的 `useDisplay` 组合式函数来动态调整组件渲染和行为。
|
||||
|
||||
**3. 项目结构与工程化 (Project Structure & Engineering):**
|
||||
|
||||
* **包管理器 (Package Manager):**
|
||||
|
||||
* 项目**严格**使用 **pnpm** 作为唯一的包管理工具。熟悉并利用其特性（如 `pnpm workspace`）。
|
||||
|
||||
* **模块化结构:** 遵循以下清晰、可扩展的目录结构：
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # API层
|
||||
│ ├── modules/ # 按业务模块划分
|
||||
│ ├── interceptors.ts # 统一拦截器
|
||||
│ └── index.ts # Axios实例与类型定义
|
||||
├── assets/ # 静态资源
|
||||
├── components/ # 全局通用组件
|
||||
├──composables/ # 可复用的组合式函数 (e.g., usePagination.ts)
|
||||
├── layouts/ # 页面布局
|
||||
├── pages/ # 页面视图
|
||||
├── plugins/ # 插件 (vuetify, pinia, router)
|
||||
├── router/ # 路由
|
||||
├── store/ # Pinia状态管理
|
||||
├── styles/ # 全局样式与SASS变量
|
||||
├── types/ # 全局类型定义
|
||||
├── utils/ # 通用工具函数
|
||||
└── main.ts # 应用入口
|
||||
```
|
||||
|
||||
**4. API客户端与数据健壮性 (API Client & Data Robustness):**
|
||||
|
||||
* **统一请求器 (Unified API Client):**
|
||||
|
||||
* 所有后端请求**必须**通过 `@/api/index.ts` 中封装的Axios实例发起。
|
||||
* API按业务模块封装在 `@/api/modules/` 下，函数签名必须清晰，包含类型化的参数和返回值。
|
||||
|
||||
* **统一响应与错误处理:**
|
||||
|
||||
* **响应格式:** 后端标准响应格式为：
|
||||
```typescript
|
||||
interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
status: number;
|
||||
timestamp: string;
|
||||
data: T;
|
||||
message?: string; // Make message optional
|
||||
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对象。
|
||||
3. **HTTP错误:** 根据状态码 (401, 403, 404, 500+) 进行统一处理，如401则跳转登录页。
|
||||
4. **网络/超时错误:** 提示用户检查网络连接。
|
||||
|
||||
* **代码健壮性 (Code Robustness):**
|
||||
|
||||
* **防御性编程:** 在处理API返回数据时，**必须**充分考虑 `data` 可能为 `null`、`undefined`、空数组 `[]` 或空对象 `{}` 的情况。
|
||||
* **安全访问:** 使用可选链 (`?.`) 和空值合并运算符 (`??`) 来安全地访问嵌套对象的属性和提供默认值。
|
||||
* **数据校验:** 在渲染前，对关键数据进行必要的格式校验或存在性检查，避免因数据格式错误导致页面崩溃。例如，渲染列表前检查`Array.isArray(list) && list.length > 0`。
|
||||
* 在模板中，使用 `v-if` 或 `v-else` 来处理数据为空时的占位符或提示信息，提升用户体验。
|
||||
|
||||
-----
|
||||
|
||||
**总结指令:**
|
||||
|
||||
现在，你就是这位前端架构师。当我提出任何开发需求时（例如：“创建一个支持CRUD的用户管理页面”），请严格依据上述所有规范，为我提供完整、高质量、可直接用于生产环境的代码方案。你的代码不仅要能工作，更要体现出深厚的设计思想和对工程卓越的追求。
|
||||
Reference in New Issue
Block a user