675fe0a1a8
主要更新： - 🎯 新增综合分析仪表板，包含关键指标卡片、预算对比、智能洞察等组件 - 📊 增强数据可视化能力，新增标签云分析、时间维度分析等图表 - 📱 优化移动端响应式设计，改进触控交互体验 - 🔧 新增多个API模块（base、budget、tag），完善数据管理 - 🗂️ 重构路由结构，新增贷款、快速添加、设置、统计等独立模块 - 🔄 优化数据导入导出功能，增强数据迁移能力 - 🐛 修复多个已知问题，提升系统稳定性 技术改进： - 使用IndexedDB提升本地存储性能 - 实现模拟API服务，支持离线开发 - 增加自动化测试脚本，确保功能稳定 - 优化打包配置，提升构建效率 文件变更： - 新增42个文件 - 修改55个文件 - 包含测试脚本、配置文件、组件和API模块 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
221 lines
9.0 KiB
HTML
221 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>新建交易表单布局预览</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
h2 {
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
}
|
||
.layout-demo {
|
||
border: 2px solid #1890ff;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
padding: 10px;
|
||
background: #f9f9f9;
|
||
border-radius: 4px;
|
||
}
|
||
.col {
|
||
flex: 1;
|
||
padding: 8px;
|
||
background: white;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 4px;
|
||
}
|
||
.label {
|
||
font-weight: bold;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
font-size: 13px;
|
||
}
|
||
.field {
|
||
padding: 8px;
|
||
background: #f0f0f0;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
.comparison {
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
.old-layout, .new-layout {
|
||
flex: 1;
|
||
}
|
||
.old-layout {
|
||
opacity: 0.7;
|
||
}
|
||
.summary {
|
||
background: #e6f7ff;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2>交易表单布局优化效果</h2>
|
||
|
||
<div class="comparison">
|
||
<div class="old-layout">
|
||
<h3>❌ 旧布局（需要上下滚动）</h3>
|
||
<div class="layout-demo">
|
||
<div style="height: 600px; overflow-y: auto; border: 1px solid #ccc; padding: 10px;">
|
||
<div class="label">交易类型</div>
|
||
<div class="field">收入 | 支出</div>
|
||
<br>
|
||
<div class="label">分类</div>
|
||
<div class="field">分类选择...</div>
|
||
<br>
|
||
<div class="label">金额</div>
|
||
<div class="field">金额输入框</div>
|
||
<br>
|
||
<div class="label">货币</div>
|
||
<div class="field">货币选择</div>
|
||
<br>
|
||
<div class="label">日期</div>
|
||
<div class="field">日期选择器</div>
|
||
<br>
|
||
<div class="label">状态</div>
|
||
<div class="field">状态选择</div>
|
||
<br>
|
||
<div class="label">项目</div>
|
||
<div class="field">项目输入</div>
|
||
<br>
|
||
<div class="label">付款人</div>
|
||
<div class="field">付款人选择</div>
|
||
<br>
|
||
<div class="label">收款人</div>
|
||
<div class="field">收款人选择</div>
|
||
<br>
|
||
<div class="label">数量</div>
|
||
<div class="field">数量输入</div>
|
||
<br>
|
||
<div class="label">标签</div>
|
||
<div class="field">标签选择</div>
|
||
<br>
|
||
<div class="label">描述</div>
|
||
<div class="field">描述文本框</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="new-layout">
|
||
<h3>✅ 新布局（充分利用横向空间）</h3>
|
||
<div class="layout-demo">
|
||
<div class="row">
|
||
<div class="col" style="flex: 0 0 25%;">
|
||
<div class="label">交易类型</div>
|
||
<div class="field">💸 支出 | 💰 收入</div>
|
||
</div>
|
||
<div class="col" style="flex: 0 0 40%;">
|
||
<div class="label">金额</div>
|
||
<div class="field" style="font-size: 18px;">¥ 1,000.00</div>
|
||
</div>
|
||
<div class="col" style="flex: 0 0 35%;">
|
||
<div class="label">货币</div>
|
||
<div class="field">¥ CNY | $ USD | ฿ THB | K MMK</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="label">分类（平铺按钮）</div>
|
||
<div class="field" style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||
<span style="padding: 4px 12px; background: #52c41a; color: white; border-radius: 4px;">💰 工资</span>
|
||
<span style="padding: 4px 12px; border: 1px solid #52c41a; color: #52c41a; border-radius: 4px;">🎁 奖金</span>
|
||
<span style="padding: 4px 12px; border: 1px solid #1890ff; color: #1890ff; border-radius: 4px;">💼 投资</span>
|
||
<span style="padding: 4px 12px; border: 1px dashed #999; color: #999; border-radius: 4px;">+ 添加分类</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col" style="flex: 0 0 25%;">
|
||
<div class="label">日期</div>
|
||
<div class="field">2024-01-07</div>
|
||
</div>
|
||
<div class="col" style="flex: 0 0 37%;">
|
||
<div class="label">状态</div>
|
||
<div class="field">✅ 已完成 | ⏳ 待处理 | ❌ 已取消</div>
|
||
</div>
|
||
<div class="col" style="flex: 0 0 38%;">
|
||
<div class="label">项目</div>
|
||
<div class="field">项目名称（可选）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="label">付款人</div>
|
||
<div class="field">选择或输入</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="label">收款人</div>
|
||
<div class="field">选择或输入</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="label">数量</div>
|
||
<div class="field">1</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="label">单价</div>
|
||
<div class="field">自动计算</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="label">标签</div>
|
||
<div class="field">选择标签...</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="label">描述</div>
|
||
<div class="field">描述信息（可选）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary">
|
||
<h3>📊 优化效果总结</h3>
|
||
<ul>
|
||
<li><strong>Modal宽度：</strong>从 600px 增加到 1200px，充分利用屏幕空间</li>
|
||
<li><strong>布局方式：</strong>从单列垂直布局改为多列横向布局</li>
|
||
<li><strong>行数优化：</strong>从 12+ 行减少到 5 行，大幅减少滚动</li>
|
||
<li><strong>字段分组：</strong>
|
||
<ul>
|
||
<li>第1行：交易类型、金额、货币（核心字段）</li>
|
||
<li>第2行：分类选择（平铺展示）</li>
|
||
<li>第3行：日期、状态、项目</li>
|
||
<li>第4行：付款人、收款人、数量、单价</li>
|
||
<li>第5行：标签、描述</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>用户体验：</strong>所有字段一屏可见，无需滚动，操作更高效</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |