feat: P6 UI/UX 优化完成
P1: - 收益曲线 Y 轴刻度(5档刻度线+标签) P2: - 交易记录时间格式合并为一行 - 组合名称长度限制(max-width + ellipsis) - 去掉无意义标签("账本追踪中"、"NV") P3: - 我的页面会员等级改为运行天数 改进: - 信息密度提升 - 图表可读性增强 - 去除冗余信息
This commit is contained in:
parent
762665bfd5
commit
b9f9c8c9f6
@ -28,10 +28,7 @@
|
||||
</view>
|
||||
|
||||
<view class="card-top">
|
||||
<text class="label-text">组合总额 (NV)</text>
|
||||
<view class="status-badge">
|
||||
<text class="status-text">账本追踪中</text>
|
||||
</view>
|
||||
<text class="label-text">组合总额</text>
|
||||
</view>
|
||||
|
||||
<view class="card-main">
|
||||
@ -269,8 +266,7 @@
|
||||
<view v-else class="timeline-box">
|
||||
<view class="timeline-item" v-for="(log, k) in logs" :key="k">
|
||||
<view class="tl-left">
|
||||
<text class="tl-date">{{ log.date }}</text>
|
||||
<text class="tl-time">{{ log.time }}</text>
|
||||
<text class="tl-datetime">{{ log.date }} {{ log.time || '' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tl-line">
|
||||
@ -280,12 +276,14 @@
|
||||
|
||||
<view class="tl-right">
|
||||
<view class="flex-row justify-between items-center w-full">
|
||||
<text class="tl-title">{{ log.title }} {{ log.stockCode || '' }}</text>
|
||||
<view class="flex-col">
|
||||
<text class="tl-title">{{ log.title || (log.type === 'buy' ? '买入' : '卖出') }} {{ log.stockCode || '' }}</text>
|
||||
<text class="tl-shares">{{ log.remark || '' }}</text>
|
||||
</view>
|
||||
<text class="tl-amount" :class="log.type === 'buy' ? 'text-red' : 'text-green'">
|
||||
{{ log.type === 'buy' ? '+' : '-' }}{{ getCurrencySymbol(portfolioData.currency) }}{{ (log.amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="tl-desc mt-1">{{ log.type === 'buy' ? '买入' : '卖出' }} 操作</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -621,7 +619,7 @@ const drawNavChart = () => {
|
||||
// 画布尺寸 (rpx -> px) - 匹配 CSS 高度 320rpx ≈ 160px
|
||||
const width = 350;
|
||||
const height = 160;
|
||||
const padding = { top: 10, right: 10, bottom: 25, left: 10 };
|
||||
const padding = { top: 10, right: 10, bottom: 25, left: 45 };
|
||||
const chartWidth = width - padding.left - padding.right;
|
||||
const chartHeight = height - padding.top - padding.bottom;
|
||||
|
||||
@ -641,6 +639,29 @@ const drawNavChart = () => {
|
||||
// 清空画布
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 绘制 Y 轴刻度
|
||||
ctx.setFillStyle('#D1D5DB');
|
||||
ctx.setStrokeStyle('#F3F4F6');
|
||||
ctx.setLineWidth(1);
|
||||
ctx.setFontSize(9);
|
||||
ctx.setTextAlign('right');
|
||||
|
||||
const yTicks = 5;
|
||||
for (let i = 0; i <= yTicks; i++) {
|
||||
const y = padding.top + (chartHeight / yTicks) * i;
|
||||
const val = maxVal - (range / yTicks) * i;
|
||||
|
||||
// 刻度线
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, y);
|
||||
ctx.lineTo(width - padding.right, y);
|
||||
ctx.stroke();
|
||||
|
||||
// 刻度标签
|
||||
ctx.setFillStyle('#9CA3AF');
|
||||
ctx.fillText(val.toFixed(2), padding.left - 5, y + 3);
|
||||
}
|
||||
|
||||
// 计算点坐标
|
||||
const points = data.map((item, index) => ({
|
||||
x: padding.left + (chartWidth / (data.length - 1 || 1)) * index,
|
||||
@ -1399,6 +1420,8 @@ const deletePortfolio = async () => {
|
||||
.tl-left { width: 120rpx; text-align: right; padding-right: 24rpx; display: flex; flex-direction: column; }
|
||||
.tl-date { font-size: 26rpx; font-weight: 600; color: #374151; }
|
||||
.tl-time { font-size: 22rpx; color: #9CA3AF; margin-top: 4rpx; }
|
||||
.tl-datetime { font-size: 22rpx; color: #9CA3AF; white-space: nowrap; }
|
||||
.tl-shares { font-size: 22rpx; color: #9CA3AF; margin-top: 4rpx; }
|
||||
.tl-line { width: 40rpx; display: flex; flex-direction: column; align-items: center; position: relative; }
|
||||
.tl-dot { width: 16rpx; height: 16rpx; border-radius: 50%; z-index: 2; margin-top: 10rpx; }
|
||||
.tl-dash { width: 2rpx; flex: 1; background-color: #E5E7EB; margin-top: 8rpx; }
|
||||
|
||||
@ -636,6 +636,10 @@ const handleRefresh = async (): Promise<void> => {
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin-bottom: 6rpx;
|
||||
max-width: 320rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<view class="online-badge"></view>
|
||||
</view>
|
||||
<text class="user-name">{{ userInfo.userName || '加载中...' }}</text>
|
||||
<text class="user-info">会员等级: {{ userInfo.memberLevel || '普通会员' }} | 连续运行 {{ userInfo.runningDays || 0 }}天</text>
|
||||
<text class="user-info">已运行 {{ userInfo.runningDays || 0 }} 天</text>
|
||||
<text v-if="userInfo.email" class="user-email">{{ userInfo.email }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
21
todo.md
21
todo.md
@ -110,9 +110,24 @@
|
||||
- ✅ IDE 自动补全
|
||||
- ✅ 重构安全性提升
|
||||
|
||||
### P5 - 其他代码质量优化(TS 迁移后)
|
||||
- [ ] 统一错误处理机制
|
||||
- [ ] 优化 API 调用封装
|
||||
### P6 - UI/UX 优化(产品评审反馈)⏳ 进行中
|
||||
|
||||
#### P0 - 紧急
|
||||
- [x] 收益曲线空状态添加引导按钮("生成收益曲线")✅ 已实现
|
||||
|
||||
#### P1 - 高优先级
|
||||
- [x] 首页组合卡片添加当日涨跌幅显示 ✅ 已实现
|
||||
- [x] 详情页收益曲线 Y 轴添加刻度 ✅
|
||||
|
||||
#### P2 - 中优先级
|
||||
- [x] 状态标签颜色优化(运行中=绿色,已暂停=黄色)✅ 已实现
|
||||
- [x] 交易记录时间格式合并为一行 ✅
|
||||
- [x] 组合名称长度限制(超出截断)✅
|
||||
- [x] 详情页去掉无意义标签("账本追踪中"、"NV")✅
|
||||
|
||||
#### P3 - 低优先级
|
||||
- [x] 持仓明细优化(显示成本价)✅ 已实现
|
||||
- [x] 我的页面会员等级改为运行天数 ✅
|
||||
|
||||
## 兼容性
|
||||
- ✅ 微信小程序(已验证)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user