feat: 配置开发环境和清理项目结构
- 修改默认路由重定向到首页 (/home) - 配置开发服务器使用5667端口 - 整理测试文件到temp-tests目录 - 优化项目结构便于开发和部署 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
woshiqp465
@@ -35,7 +35,7 @@ const coreRoutes: RouteRecordRaw[] = [
|
||||
},
|
||||
name: 'Root',
|
||||
path: '/',
|
||||
redirect: '/analytics/overview',
|
||||
redirect: '/home',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -5,12 +5,13 @@ export default defineConfig(async () => {
|
||||
application: {},
|
||||
vite: {
|
||||
server: {
|
||||
port: 5667,
|
||||
proxy: {
|
||||
'/api': {
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
// mock代理目标地址
|
||||
target: 'http://localhost:3000/api',
|
||||
target: 'http://localhost:5667/api',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
|
||||
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 258 KiB |
@@ -1,221 +0,0 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user