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>
|
||||||
|
|
||||||
<view class="card-top">
|
<view class="card-top">
|
||||||
<text class="label-text">组合总额 (NV)</text>
|
<text class="label-text">组合总额</text>
|
||||||
<view class="status-badge">
|
|
||||||
<text class="status-text">账本追踪中</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="card-main">
|
<view class="card-main">
|
||||||
@ -269,8 +266,7 @@
|
|||||||
<view v-else class="timeline-box">
|
<view v-else class="timeline-box">
|
||||||
<view class="timeline-item" v-for="(log, k) in logs" :key="k">
|
<view class="timeline-item" v-for="(log, k) in logs" :key="k">
|
||||||
<view class="tl-left">
|
<view class="tl-left">
|
||||||
<text class="tl-date">{{ log.date }}</text>
|
<text class="tl-datetime">{{ log.date }} {{ log.time || '' }}</text>
|
||||||
<text class="tl-time">{{ log.time }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="tl-line">
|
<view class="tl-line">
|
||||||
@ -280,12 +276,14 @@
|
|||||||
|
|
||||||
<view class="tl-right">
|
<view class="tl-right">
|
||||||
<view class="flex-row justify-between items-center w-full">
|
<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'">
|
<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 }) }}
|
{{ log.type === 'buy' ? '+' : '-' }}{{ getCurrencySymbol(portfolioData.currency) }}{{ (log.amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="tl-desc mt-1">{{ log.type === 'buy' ? '买入' : '卖出' }} 操作</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -621,7 +619,7 @@ const drawNavChart = () => {
|
|||||||
// 画布尺寸 (rpx -> px) - 匹配 CSS 高度 320rpx ≈ 160px
|
// 画布尺寸 (rpx -> px) - 匹配 CSS 高度 320rpx ≈ 160px
|
||||||
const width = 350;
|
const width = 350;
|
||||||
const height = 160;
|
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 chartWidth = width - padding.left - padding.right;
|
||||||
const chartHeight = height - padding.top - padding.bottom;
|
const chartHeight = height - padding.top - padding.bottom;
|
||||||
|
|
||||||
@ -641,6 +639,29 @@ const drawNavChart = () => {
|
|||||||
// 清空画布
|
// 清空画布
|
||||||
ctx.clearRect(0, 0, width, height);
|
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) => ({
|
const points = data.map((item, index) => ({
|
||||||
x: padding.left + (chartWidth / (data.length - 1 || 1)) * 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-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-date { font-size: 26rpx; font-weight: 600; color: #374151; }
|
||||||
.tl-time { font-size: 22rpx; color: #9CA3AF; margin-top: 4rpx; }
|
.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-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-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; }
|
.tl-dash { width: 2rpx; flex: 1; background-color: #E5E7EB; margin-top: 8rpx; }
|
||||||
|
|||||||
@ -636,6 +636,10 @@ const handleRefresh = async (): Promise<void> => {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1F2937;
|
color: #1F2937;
|
||||||
margin-bottom: 6rpx;
|
margin-bottom: 6rpx;
|
||||||
|
max-width: 320rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-tags {
|
.card-tags {
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
<view class="online-badge"></view>
|
<view class="online-badge"></view>
|
||||||
</view>
|
</view>
|
||||||
<text class="user-name">{{ userInfo.userName || '加载中...' }}</text>
|
<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>
|
<text v-if="userInfo.email" class="user-email">{{ userInfo.email }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|||||||
21
todo.md
21
todo.md
@ -110,9 +110,24 @@
|
|||||||
- ✅ IDE 自动补全
|
- ✅ IDE 自动补全
|
||||||
- ✅ 重构安全性提升
|
- ✅ 重构安全性提升
|
||||||
|
|
||||||
### P5 - 其他代码质量优化(TS 迁移后)
|
### P6 - UI/UX 优化(产品评审反馈)⏳ 进行中
|
||||||
- [ ] 统一错误处理机制
|
|
||||||
- [ ] 优化 API 调用封装
|
#### P0 - 紧急
|
||||||
|
- [x] 收益曲线空状态添加引导按钮("生成收益曲线")✅ 已实现
|
||||||
|
|
||||||
|
#### P1 - 高优先级
|
||||||
|
- [x] 首页组合卡片添加当日涨跌幅显示 ✅ 已实现
|
||||||
|
- [x] 详情页收益曲线 Y 轴添加刻度 ✅
|
||||||
|
|
||||||
|
#### P2 - 中优先级
|
||||||
|
- [x] 状态标签颜色优化(运行中=绿色,已暂停=黄色)✅ 已实现
|
||||||
|
- [x] 交易记录时间格式合并为一行 ✅
|
||||||
|
- [x] 组合名称长度限制(超出截断)✅
|
||||||
|
- [x] 详情页去掉无意义标签("账本追踪中"、"NV")✅
|
||||||
|
|
||||||
|
#### P3 - 低优先级
|
||||||
|
- [x] 持仓明细优化(显示成本价)✅ 已实现
|
||||||
|
- [x] 我的页面会员等级改为运行天数 ✅
|
||||||
|
|
||||||
## 兼容性
|
## 兼容性
|
||||||
- ✅ 微信小程序(已验证)
|
- ✅ 微信小程序(已验证)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user