From 79f3a05cadf75e597dfae3e21f4bb09b830c472d Mon Sep 17 00:00:00 2001 From: zeaslity Date: Fri, 5 Sep 2025 17:24:08 +0800 Subject: [PATCH] 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. --- .../go-gin-gorm-style.md | 0 .../vue3-typescript-stye.md | 17 ++++- b-需求转换专业设计/转换的prompt.md | 13 ++++ .../1-原始设计/mask_binance_account.md | 49 +++++++++++++ .../1-原始设计/mask_binance_order.md | 36 ++++++++++ .../1-原始设计/mask_crypto_icon.md | 42 +++++++++++ .../1-原始设计/mask_currency_selector.md | 36 ++++++++++ c-ProjectTonyStack/1-原始设计/mask_layout.md | 20 ++++++ .../1-原始设计/mask_login_page.md | 32 +++++++++ .../1-原始设计/mask_profit-loss.md | 37 ++++++++++ .../1-原始设计/mask_single-pnl.md | 44 ++++++++++++ c-ProjectTonyStack/1-原始设计/前端重构.md | 0 .../2-AI优化设计/agi_login_page.md | 72 +++++++++++++++++++ c-ProjectTonyStack/promt.md | 12 ++++ 14 files changed, 409 insertions(+), 1 deletion(-) rename {Golang项目 => a-Golang项目}/go-gin-gorm-style.md (100%) rename {Vue3项目 => a-Vue3项目}/vue3-typescript-stye.md (90%) create mode 100644 b-需求转换专业设计/转换的prompt.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_binance_account.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_binance_order.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_currency_selector.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_layout.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_login_page.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_profit-loss.md create mode 100644 c-ProjectTonyStack/1-原始设计/mask_single-pnl.md create mode 100644 c-ProjectTonyStack/1-原始设计/前端重构.md create mode 100644 c-ProjectTonyStack/2-AI优化设计/agi_login_page.md create mode 100644 c-ProjectTonyStack/promt.md diff --git a/Golang项目/go-gin-gorm-style.md b/a-Golang项目/go-gin-gorm-style.md similarity index 100% rename from Golang项目/go-gin-gorm-style.md rename to a-Golang项目/go-gin-gorm-style.md diff --git a/Vue3项目/vue3-typescript-stye.md b/a-Vue3项目/vue3-typescript-stye.md similarity index 90% rename from Vue3项目/vue3-typescript-stye.md rename to a-Vue3项目/vue3-typescript-stye.md index 11c0038..0912c9d 100644 --- a/Vue3项目/vue3-typescript-stye.md +++ b/a-Vue3项目/vue3-typescript-stye.md @@ -74,7 +74,7 @@ * **统一响应与错误处理:** - * **响应格式:** 假设后端标准响应格式为： + * **响应格式:** 后端标准响应格式为： ```typescript interface ApiResponse { 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对象。 diff --git a/b-需求转换专业设计/转换的prompt.md b/b-需求转换专业设计/转换的prompt.md new file mode 100644 index 0000000..b588fd6 --- /dev/null +++ b/b-需求转换专业设计/转换的prompt.md @@ -0,0 +1,13 @@ +你是一名经验丰富的系统架构师。你的任务是接收一个初步的、可能不完整或不严谨的需求设计，并将其转化为一份专业的、结构严谨、技术上可行的详细设计方案。这份方案最终将被格式化为一段高质量的Prompt，可以直接输入给AI（例如，一个编码助手或另一个架构设计AI），以生成代码、详细的架构图或进一步的实现细节。 + +这个转化的过程将严格遵循几个核心优化方向： + +- 面向AI输入进行优化： 结构清晰，指令明确，上下文充足，便于AI理解和执行。 + +- 提升严密性与完整性： 补充缺失的非功能性需求，明确边界条件、约束和系统规模预估。 + +- 修正设计错误： 识别并纠正初步设计中不切实际、性能低下或架构不合理的部分。 + +- 优化设计方案： 提出更高效、可扩展、更具鲁棒性的技术选型和架构模式。 + +- 语言专业化： 使用业界标准的术语和概念来描述架构组件、数据流和设计决策。 \ No newline at end of file diff --git a/c-ProjectTonyStack/1-原始设计/mask_binance_account.md b/c-ProjectTonyStack/1-原始设计/mask_binance_account.md new file mode 100644 index 0000000..d587844 --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_binance_account.md @@ -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 + +## 资产总计 +- 新增一列 名称为 资产总计 +- 每一行 将 币种数量与 币种价格相乘的结果 diff --git a/c-ProjectTonyStack/1-原始设计/mask_binance_order.md b/c-ProjectTonyStack/1-原始设计/mask_binance_order.md new file mode 100644 index 0000000..5efb3be --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_binance_order.md @@ -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)中的输入框 +- 根据页面样式,合理调整大小 + +## 开始时间 +- 当取消初始时间内容时候,自动变为默认的初始时间 \ No newline at end of file diff --git a/c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md b/c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md new file mode 100644 index 0000000..6535a97 --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_crypto_icon.md @@ -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均改为 交易对名称 + +### 加密货币全称 + - 前端应该优先展示加密货币大写全称 + - diff --git a/c-ProjectTonyStack/1-原始设计/mask_currency_selector.md b/c-ProjectTonyStack/1-原始设计/mask_currency_selector.md new file mode 100644 index 0000000..cf34f4b --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_currency_selector.md @@ -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)页面中的实现 + + diff --git a/c-ProjectTonyStack/1-原始设计/mask_layout.md b/c-ProjectTonyStack/1-原始设计/mask_layout.md new file mode 100644 index 0000000..0ee06e1 --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_layout.md @@ -0,0 +1,20 @@ +# 页面设计 + +## 页面总体布局设计 +### 现代化布局 +- 采用经典的“侧边导航 + 顶部应用栏 + 主内容区”布局 +- 主内容区最上面显示Header,显示当前处于的主功能区介绍 + +### 可收缩侧边栏 +- 左侧的功能栏可以通过点击按钮在“完整模式”和“图标模式”之间平滑切换，有效节省屏幕空间。 + +### 页面切换 +- 点击侧边栏的不同菜单项，主内容区会流畅地切换到对应的页面组件，实现了单页面应用（SPA）的核心导航功能。 +- 侧边栏高亮展示当前功能页面 + +### 明亮/暗色主题 +- 左侧功能栏最下面提供了一个主题切换按钮，可以一键在明亮（Light）和暗色（Dark）模式间切换。 + +### 响应式设计 +- 整个布局基于 Vuetify 的栅格系统，无论在桌面、平板还是手机上都能提供良好的视觉和操作体验。 + diff --git a/c-ProjectTonyStack/1-原始设计/mask_login_page.md b/c-ProjectTonyStack/1-原始设计/mask_login_page.md new file mode 100644 index 0000000..b814f0a --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_login_page.md @@ -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时,直接红字提示 用户名或密码错误! \ No newline at end of file diff --git a/c-ProjectTonyStack/1-原始设计/mask_profit-loss.md b/c-ProjectTonyStack/1-原始设计/mask_profit-loss.md new file mode 100644 index 0000000..14e578a --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_profit-loss.md @@ -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 + +- 展示已实现盈亏，未实现盈亏，总盈亏 + +- 确保下列柱状图的纵坐标具有可变性，符合人类的观看习惯，纵坐标轴只显示整数数值，纵坐标可能出现负数 +- 按照柱状图，按照从大到小的顺序，展示查询币种的收益率 +- 按照柱状图，按照从大到小的顺序，展示查询币种的年化收益率 +- 按照柱状图，按照从大到小的顺序，展示查询币种的总盈亏数据 +- 按照柱状图，按照从大到小的顺序，展示查询币种的已实现盈亏数据 +- 按照柱状图，按照从大到小的顺序，展示查询币种的未实现盈亏数据 + + + \ No newline at end of file diff --git a/c-ProjectTonyStack/1-原始设计/mask_single-pnl.md b/c-ProjectTonyStack/1-原始设计/mask_single-pnl.md new file mode 100644 index 0000000..79453a7 --- /dev/null +++ b/c-ProjectTonyStack/1-原始设计/mask_single-pnl.md @@ -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) +- 手续费 设置列表展示,小图标+手续费金额 + + +## 买入方向数据 +- 买入数量 +- 买入总金额 +- 买入订单数量 +- 平均买入价格 + +## 卖出方向数据 +- 卖出数量 +- 卖出总金额 +- 卖出订单数量 +- 平均卖出价格 \ No newline at end of file diff --git a/c-ProjectTonyStack/1-原始设计/前端重构.md b/c-ProjectTonyStack/1-原始设计/前端重构.md new file mode 100644 index 0000000..e69de29 diff --git a/c-ProjectTonyStack/2-AI优化设计/agi_login_page.md b/c-ProjectTonyStack/2-AI优化设计/agi_login_page.md new file mode 100644 index 0000000..f093cd9 --- /dev/null +++ b/c-ProjectTonyStack/2-AI优化设计/agi_login_page.md @@ -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 (`