feat:引入 TDesign 以及前端初稿

This commit is contained in:
Neo
2026-01-24 22:56:57 +08:00
parent 6147924889
commit c972c52e04
80 changed files with 35245 additions and 0 deletions

242
Prototype/index.html Normal file
View File

@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>球房运营助手 - 原型展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-miniprogram/miniprogram_dist/common/style/index.css">
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.prototype-container {
max-width: 1800px;
margin: 0 auto;
}
.prototype-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(393px, 1fr));
gap: 40px;
padding: 20px;
}
.phone-frame {
width: 393px;
height: 852px;
background: #000;
border-radius: 50px;
padding: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
position: relative;
margin: 0 auto;
}
.phone-frame::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 30px;
background: #000;
border-radius: 0 0 20px 20px;
z-index: 10;
}
.phone-screen {
width: 100%;
height: 100%;
background: #fff;
border-radius: 40px;
overflow: hidden;
border: none;
}
.page-label {
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
color: #fff;
font-size: 36px;
font-weight: 700;
margin-bottom: 40px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="prototype-container">
<h1>球房运营助手 - 原型展示</h1>
<div class="prototype-grid">
<!-- 登录页 -->
<div>
<div class="page-label">登录页</div>
<div class="phone-frame">
<iframe src="pages/login.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 账号申请页 -->
<div>
<div class="page-label">账号申请页</div>
<div class="phone-frame">
<iframe src="pages/apply.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 审核中页 -->
<div>
<div class="page-label">审核中页</div>
<div class="phone-frame">
<iframe src="pages/reviewing.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 无权限页 -->
<div>
<div class="page-label">无权限页</div>
<div class="phone-frame">
<iframe src="pages/no-permission.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 任务列表页 -->
<div>
<div class="page-label">任务列表页(首页)</div>
<div class="phone-frame">
<iframe src="pages/task-list.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 任务详情页 - 高优先召回 -->
<div>
<div class="page-label">任务详情页 - 高优先召回</div>
<div class="phone-frame">
<iframe src="pages/task-detail.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 任务详情页 - 优先召回 -->
<div>
<div class="page-label">任务详情页 - 优先召回</div>
<div class="phone-frame">
<iframe src="pages/task-detail-priority.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 任务详情页 - 关系构建 -->
<div>
<div class="page-label">任务详情页 - 关系构建</div>
<div class="phone-frame">
<iframe src="pages/task-detail-relationship.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 任务详情页 - 客户回访 -->
<div>
<div class="page-label">任务详情页 - 客户回访</div>
<div class="phone-frame">
<iframe src="pages/task-detail-callback.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 业绩详情页 -->
<div>
<div class="page-label">业绩详情页</div>
<div class="phone-frame">
<iframe src="pages/performance.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 看板-财务视图 -->
<div>
<div class="page-label">看板 - 财务视图</div>
<div class="phone-frame">
<iframe src="pages/board-finance.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 看板-客户视图 -->
<div>
<div class="page-label">看板 - 客户视图</div>
<div class="phone-frame">
<iframe src="pages/board-customer.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 客户详情页 -->
<div>
<div class="page-label">客户详情页</div>
<div class="phone-frame">
<iframe src="pages/customer-detail.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 看板-助教视图 -->
<div>
<div class="page-label">看板 - 助教视图</div>
<div class="phone-frame">
<iframe src="pages/board-coach.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 助教详情页 -->
<div>
<div class="page-label">助教详情页</div>
<div class="phone-frame">
<iframe src="pages/coach-detail.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 我的首页 -->
<div>
<div class="page-label">我的首页</div>
<div class="phone-frame">
<iframe src="pages/my-profile.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 备注记录页 -->
<div>
<div class="page-label">备注记录页</div>
<div class="phone-frame">
<iframe src="pages/notes.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 助手对话记录页 -->
<div>
<div class="page-label">助手对话记录页</div>
<div class="phone-frame">
<iframe src="pages/chat-history.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 首页设置页 -->
<div>
<div class="page-label">首页设置页</div>
<div class="phone-frame">
<iframe src="pages/home-settings.html" class="phone-screen"></iframe>
</div>
</div>
<!-- 助手对话页 -->
<div>
<div class="page-label">助手对话页</div>
<div class="phone-frame">
<iframe src="pages/chat.html" class="phone-screen"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>