Reorganize prototype documentation
This commit is contained in:
parent
e7250c4cf7
commit
9e734babbb
|
|
@ -2,6 +2,7 @@ legacy-cent-app/
|
|||
node_modules/
|
||||
dist/
|
||||
backups/
|
||||
docs/prototype/
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
|
|
|||
|
|
@ -1,175 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>分类轮盘步骤示意</title>
|
||||
<link rel="stylesheet" href="./原型样式.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="flow-stage">
|
||||
<section class="flow-intro">
|
||||
<h1>分类轮盘步骤示意</h1>
|
||||
<p>快速记账在账本流水页底部抽屉内完成。轮盘是临时选择态，不能把所有层级同时放在一个画面里。</p>
|
||||
</section>
|
||||
|
||||
<div class="flow-grid">
|
||||
<section class="phone flow-phone">
|
||||
<header class="mini-appbar">
|
||||
<span>1</span>
|
||||
<strong>抽屉默认态</strong>
|
||||
</header>
|
||||
<div class="drawer-demo">
|
||||
<div class="drawer-handle" aria-hidden="true"></div>
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
<div class="selection-row">
|
||||
<div class="selected-path">
|
||||
<span>支出</span>
|
||||
<span>餐饮</span>
|
||||
<strong>外卖</strong>
|
||||
</div>
|
||||
<button class="date-pill">今天 12:30</button>
|
||||
</div>
|
||||
<div class="note-line drawer-note-line">
|
||||
<input value="午餐" aria-label="备注" />
|
||||
</div>
|
||||
<div class="mini-keypad">
|
||||
<span>7</span><span>8</span><span>9</span><span class="category-cell">支出</span>
|
||||
<span>4</span><span>5</span><span>6</span><span>+</span>
|
||||
<span>1</span><span>2</span><span>3</span><span>-</span>
|
||||
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phone flow-phone">
|
||||
<header class="mini-appbar">
|
||||
<span>2</span>
|
||||
<strong>点击支出按钮</strong>
|
||||
</header>
|
||||
<div class="drawer-demo">
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
<div class="selection-row">
|
||||
<div class="selected-path">
|
||||
<span>支出</span>
|
||||
</div>
|
||||
<button class="date-pill">今天 12:30</button>
|
||||
</div>
|
||||
<div class="floating-choice">
|
||||
<div class="radial-step type-step" aria-label="类型选择">
|
||||
<button class="radial-center">✓</button>
|
||||
<button class="radial-node type-expense active">支出</button>
|
||||
<button class="radial-node type-income">收入</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-keypad active-picker">
|
||||
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
||||
<span>4</span><span>5</span><span>6</span><span>+</span>
|
||||
<span>1</span><span>2</span><span>3</span><span>-</span>
|
||||
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phone flow-phone">
|
||||
<header class="mini-appbar">
|
||||
<span>3</span>
|
||||
<strong>选择支出后</strong>
|
||||
</header>
|
||||
<div class="drawer-demo">
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
<div class="selection-row">
|
||||
<div class="selected-path">
|
||||
<span>支出</span>
|
||||
</div>
|
||||
<button class="date-pill">今天 12:30</button>
|
||||
</div>
|
||||
<div class="floating-choice">
|
||||
<div class="radial-step category-step" aria-label="支出分类选择">
|
||||
<button class="radial-center">✓</button>
|
||||
<button class="radial-node category-food active">餐饮</button>
|
||||
<button class="radial-node category-transit">交通</button>
|
||||
<button class="radial-node category-daily">日用</button>
|
||||
<button class="radial-node category-shop">购物</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-keypad active-picker">
|
||||
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
||||
<span>4</span><span>5</span><span>6</span><span>+</span>
|
||||
<span>1</span><span>2</span><span>3</span><span>-</span>
|
||||
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phone flow-phone">
|
||||
<header class="mini-appbar">
|
||||
<span>4</span>
|
||||
<strong>进入子分类</strong>
|
||||
</header>
|
||||
<div class="drawer-demo">
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
<div class="selection-row">
|
||||
<div class="selected-path">
|
||||
<span>支出</span>
|
||||
<span>餐饮</span>
|
||||
</div>
|
||||
<button class="date-pill">今天 12:30</button>
|
||||
</div>
|
||||
<div class="floating-choice">
|
||||
<div class="radial-step subcategory-step" aria-label="餐饮子分类选择">
|
||||
<button class="radial-center">✓</button>
|
||||
<button class="radial-node sub-takeout active">外卖</button>
|
||||
<button class="radial-node sub-restaurant">饭店</button>
|
||||
<button class="radial-node sub-coffee">咖啡</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-keypad active-picker">
|
||||
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
||||
<span>4</span><span>5</span><span>6</span><span>+</span>
|
||||
<span>1</span><span>2</span><span>3</span><span>-</span>
|
||||
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phone flow-phone">
|
||||
<header class="mini-appbar">
|
||||
<span>5</span>
|
||||
<strong>确认当前层级</strong>
|
||||
</header>
|
||||
<div class="drawer-demo">
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
<div class="selection-row">
|
||||
<div class="selected-path">
|
||||
<span>支出</span>
|
||||
<span>餐饮</span>
|
||||
<strong>外卖</strong>
|
||||
</div>
|
||||
<button class="date-pill">今天 12:30</button>
|
||||
</div>
|
||||
<div class="note-line drawer-note-line">
|
||||
<input value="午餐" aria-label="备注" />
|
||||
</div>
|
||||
<div class="mini-keypad">
|
||||
<span>7</span><span>8</span><span>9</span><span class="category-cell">外卖</span>
|
||||
<span>4</span><span>5</span><span>6</span><span>+</span>
|
||||
<span>1</span><span>2</span><span>3</span><span>-</span>
|
||||
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,835 +0,0 @@
|
|||
:root {
|
||||
color: #101827;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(255, 122, 89, 0.28), transparent 30%),
|
||||
radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.24), transparent 32%),
|
||||
linear-gradient(135deg, #fff3e8 0%, #ecfeff 48%, #fff1f8 100%);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.stage {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: start center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: min(100%, 390px);
|
||||
height: 780px;
|
||||
min-height: 780px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(20, 83, 45, 0.12);
|
||||
border-radius: 28px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 24px 58px rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
|
||||
.appbar {
|
||||
background: linear-gradient(135deg, #00a676 0%, #00b4d8 52%, #ff7a59 100%);
|
||||
color: #fff;
|
||||
padding: 18px 18px 14px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
color: inherit;
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.deprecated-note {
|
||||
margin: 24px 14px;
|
||||
border: 1px solid #bdeee0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.deprecated-note h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.deprecated-note p {
|
||||
margin: 0 0 12px;
|
||||
color: #526072;
|
||||
}
|
||||
|
||||
.deprecated-note a {
|
||||
color: #007a78;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat span {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 14px 14px 2px;
|
||||
}
|
||||
|
||||
.phone-relative .content {
|
||||
padding-bottom: 250px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 14px 2px 8px;
|
||||
color: #0f5f68;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.ledger-card {
|
||||
border: 1px solid #d8f1e7;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ledger-card + .ledger-card {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ledger-head,
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ledger-name {
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: 12px;
|
||||
background: #d7fbef;
|
||||
color: #007a5a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #526072;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
border-top: 1px solid #dff5ee;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.action {
|
||||
min-height: 36px;
|
||||
border: 1px solid #ccefe5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #152033;
|
||||
}
|
||||
|
||||
.day {
|
||||
margin: 14px -14px 0;
|
||||
padding: 7px 16px;
|
||||
background: #e9fbf7;
|
||||
color: #0f5f68;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.entry {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-height: 62px;
|
||||
border-bottom: 1px solid #e0f4ed;
|
||||
}
|
||||
|
||||
.entry-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 17px;
|
||||
background: #00a676;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.entry-main strong,
|
||||
.entry-amount strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-main span,
|
||||
.entry-amount span {
|
||||
color: #526072;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.entry-amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.expense {
|
||||
color: #d94836;
|
||||
}
|
||||
|
||||
.income {
|
||||
color: #008f5f;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
background: #00a676;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
box-shadow: 0 8px 24px rgba(0, 166, 118, 0.28);
|
||||
}
|
||||
|
||||
.phone-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.drawer-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.2));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.entry-drawer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
min-height: 292px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #bdeee0;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -18px 36px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.drawer-handle {
|
||||
width: 42px;
|
||||
height: 5px;
|
||||
margin: 9px auto 0;
|
||||
border-radius: 999px;
|
||||
background: #8ee8d4;
|
||||
}
|
||||
|
||||
.drawer-amount-line {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.radial-step {
|
||||
position: relative;
|
||||
width: 176px;
|
||||
height: 118px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.radial-center,
|
||||
.radial-node {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.radial-center {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border: 0;
|
||||
background: #00a676;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.radial-node {
|
||||
min-width: 48px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
background: #ffffff;
|
||||
color: #101827;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.radial-node.active {
|
||||
border-color: #ffb703;
|
||||
background: #fff0bf;
|
||||
color: #9b4d00;
|
||||
}
|
||||
|
||||
.type-expense {
|
||||
right: 68px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.type-income {
|
||||
right: 34px;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
.category-food {
|
||||
right: 88px;
|
||||
bottom: 4px;
|
||||
border-color: #ffbf87;
|
||||
}
|
||||
|
||||
.category-transit {
|
||||
right: 104px;
|
||||
bottom: 48px;
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
|
||||
.category-daily {
|
||||
right: 54px;
|
||||
bottom: 82px;
|
||||
border-color: #86efac;
|
||||
}
|
||||
|
||||
.category-shop {
|
||||
right: 0;
|
||||
bottom: 96px;
|
||||
border-color: #f9a8d4;
|
||||
}
|
||||
|
||||
.sub-takeout {
|
||||
right: 86px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.sub-restaurant {
|
||||
right: 92px;
|
||||
bottom: 54px;
|
||||
}
|
||||
|
||||
.sub-coffee {
|
||||
right: 40px;
|
||||
bottom: 88px;
|
||||
}
|
||||
|
||||
.selection-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 0 14px 10px;
|
||||
}
|
||||
|
||||
.selected-path {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
padding: 0;
|
||||
color: #0f5f68;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.selected-path span + span::before,
|
||||
.selected-path span + strong::before {
|
||||
content: ">";
|
||||
margin-right: 5px;
|
||||
color: #00a676;
|
||||
}
|
||||
|
||||
.selected-path span,
|
||||
.selected-path strong {
|
||||
min-height: 24px;
|
||||
border-radius: 12px;
|
||||
padding: 3px 8px;
|
||||
background: #e6fbf8;
|
||||
}
|
||||
|
||||
.selected-path strong {
|
||||
background: #fff0bf;
|
||||
color: #9b4d00;
|
||||
}
|
||||
|
||||
.drawer-note-line {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.flow-stage {
|
||||
width: min(100%, 1180px);
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 48px;
|
||||
}
|
||||
|
||||
.flow-intro {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.flow-intro h1 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 26px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.flow-intro p {
|
||||
margin: 0;
|
||||
color: #526072;
|
||||
}
|
||||
|
||||
.flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.flow-phone {
|
||||
width: 100%;
|
||||
height: 470px;
|
||||
min-height: 470px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.mini-appbar {
|
||||
min-height: 58px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: linear-gradient(135deg, #00a676 0%, #00b4d8 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mini-appbar span {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.drawer-demo {
|
||||
position: relative;
|
||||
min-height: 412px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.floating-choice {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
bottom: 150px;
|
||||
z-index: 4;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(189, 238, 224, 0.86);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.mini-keypad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid #bdeee0;
|
||||
}
|
||||
|
||||
.mini-keypad span,
|
||||
.mini-keypad strong {
|
||||
min-height: 38px;
|
||||
border-right: 1px solid #d7f5ec;
|
||||
border-bottom: 1px solid #d7f5ec;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mini-keypad span:nth-child(4n) {
|
||||
border-right: 0;
|
||||
background: #e6fbf8;
|
||||
color: #007a78;
|
||||
}
|
||||
|
||||
.mini-keypad strong {
|
||||
border-right: 0;
|
||||
background: #00a676;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mini-keypad .category-cell {
|
||||
background: #fff0bf;
|
||||
color: #9b4d00;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mini-keypad .confirm-cell {
|
||||
background: #00a676;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active-picker {
|
||||
margin-top: 170px;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
margin-top: 18px;
|
||||
border-top: 1px solid #d7f5ec;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.amount-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.amount-line strong {
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amount-meta {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 7px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
min-width: 58px;
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 17px;
|
||||
background: #ff5a47;
|
||||
color: #fff;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.date-pill {
|
||||
min-height: 28px;
|
||||
border: 1px solid #ffc56d;
|
||||
border-radius: 14px;
|
||||
padding: 0 10px;
|
||||
background: #fff2cc;
|
||||
color: #a45100;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 0 14px 12px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.chips::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chip {
|
||||
min-width: max-content;
|
||||
min-height: 34px;
|
||||
border: 1px solid #bdeee0;
|
||||
border-radius: 17px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #ffffff;
|
||||
color: #115e59;
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
border-color: #ffb703;
|
||||
background: #fff0bf;
|
||||
color: #9b4d00;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.category {
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 4px 7px;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: 6px;
|
||||
background: #fff;
|
||||
color: #101827;
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.category span:last-child {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.category-mark {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.category.food {
|
||||
border-color: #ffbf87;
|
||||
background: #fff1e4;
|
||||
}
|
||||
|
||||
.category.food .category-mark {
|
||||
background: #ff6b35;
|
||||
}
|
||||
|
||||
.category.daily {
|
||||
border-color: #86efac;
|
||||
background: #ecfdf3;
|
||||
}
|
||||
|
||||
.category.daily .category-mark {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.category.transit {
|
||||
border-color: #93c5fd;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.category.transit .category-mark {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.category.shopping {
|
||||
border-color: #f9a8d4;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.category.shopping .category-mark {
|
||||
background: #e84393;
|
||||
}
|
||||
|
||||
.category.income {
|
||||
border-color: #bef264;
|
||||
background: #f7fee7;
|
||||
}
|
||||
|
||||
.category.income .category-mark {
|
||||
background: #65a30d;
|
||||
}
|
||||
|
||||
.category.active {
|
||||
outline: 2px solid #00a676;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
.note-line {
|
||||
padding: 0 14px 12px;
|
||||
}
|
||||
|
||||
.note-line input {
|
||||
min-height: 42px;
|
||||
width: 100%;
|
||||
border: 1px solid #bdeee0;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.chip-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.keypad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-top: 1px solid #bdeee0;
|
||||
}
|
||||
|
||||
.key {
|
||||
min-height: 58px;
|
||||
border: 0;
|
||||
border-right: 1px solid #d7f5ec;
|
||||
border-bottom: 1px solid #d7f5ec;
|
||||
background: #ffffff;
|
||||
color: #101827;
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.key:nth-child(4n) {
|
||||
border-right: 0;
|
||||
background: #e6fbf8;
|
||||
color: #007a78;
|
||||
}
|
||||
|
||||
.key:active {
|
||||
background: #c9f7ef;
|
||||
}
|
||||
|
||||
.commit-key {
|
||||
background: #00a676 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.utility-key {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category-key {
|
||||
font-size: 16px;
|
||||
background: #fff0bf !important;
|
||||
color: #9b4d00 !important;
|
||||
}
|
||||
|
||||
.invite-box {
|
||||
border: 1px dashed #86dfca;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.member {
|
||||
display: grid;
|
||||
grid-template-columns: 38px 1fr auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-height: 58px;
|
||||
border-bottom: 1px solid #d7f5ec;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 18px;
|
||||
background: #d7fbef;
|
||||
color: #007a5a;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.stage {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.phone {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
# 原型说明
|
||||
|
||||
这些原型用于评审信息架构和移动端交互，不是最终视觉稿。
|
||||
|
||||
## 页面
|
||||
|
||||
- [账本列表](账本列表.html)
|
||||
- [账本流水](账本流水.html)
|
||||
- 条目明细：开发环境访问 `/prototype/entry-detail`，用于评审查看、编辑与常规分类选择流程。
|
||||
- [分类轮盘步骤](分类轮盘步骤.html)
|
||||
- [成员邀请](成员邀请.html)
|
||||
|
||||
## 快速记账
|
||||
|
||||
快速记账不再作为单独页面，而是账本流水页内的底部抽屉。
|
||||
|
||||
当前交互方向：
|
||||
|
||||
- 点击账本流水页右下角记账入口，打开底部抽屉。
|
||||
- 抽屉内输入金额、备注、日期时间，并使用数字键盘确认。
|
||||
- 金额与日期时间位于抽屉顶部；关闭按钮取消，点击抽屉外部关闭。
|
||||
- 点击日期时间后直接打开系统日期时间选择器，不再展开额外输入行或二次确认按钮。
|
||||
- 信息行仅保留备注和分类按钮，完整分类路径合并显示为 `支出>餐饮>外卖`，初始显示 `支出`。
|
||||
- 加减键用于连续计算；发生运算时金额下方显示完整算式，金额区实时显示结果，退格同时更新算式和结果。
|
||||
- 点击键盘右上角的收支/分类按钮后，分类选择器覆盖原数字键盘区域，其他界面进入模糊的非交互状态。
|
||||
- 分类键原位变为圆形“确定”坐标原点，已选路径使用圆形按钮向左延伸；横轴节点可点击返回对应层。
|
||||
- 纵轴同时使用正负区域：原点上方最多放置两个候选，其余候选从原点下方排列并可纵向滚动。
|
||||
- 坐标节点均使用带轻阴影的圆形“图标 + 小文字”按钮；横纵轴容器保持透明，不绘制面板底色。
|
||||
- 坐标按钮为 `72px`，轴容器预留阴影安全区；纵轴上下端使用渐隐遮罩提示仍可继续滚动。
|
||||
- “确定”上下是同一分类序列的同步滚动视口，拖动任意一端时另一端同步位移，分类可连续经过原点上下区域。
|
||||
- Y 轴使用受边界约束的自定义拖动，不启用浏览器原生弹性滚动；触达首尾后继续拖动不会产生过度位移或回弹虚影。
|
||||
- 松手后根据拖动速度提供短距离减速惯性，惯性同样受首尾边界约束，触边立即停止。
|
||||
- 圆形按钮仅使用柔和投影表达悬浮层级，不使用拟物厚度或透视高光；靠近原点的阴影使用渐隐收尾，避免硬裁切。
|
||||
- 横轴减少上下内边距；圆形节点使用更清晰的 `2px` 分类色边框区分按钮边界。
|
||||
- 横轴已选路径使用分类色实底与白色前景，和未选择的浅色圆形候选形成明确区分。
|
||||
- “确定”使用方形按钮并建立独立前景层，Y 轴按钮与原点保留安全间距，滚动时不会被原点矩形覆盖。
|
||||
- 选择器关闭时保留当前层级和选择状态，再次打开时从上一次状态继续，不重置到收支类型层。
|
||||
- 横轴每一级均可点击并返回对应层重新选择；例如点击 `支出` 重新选择支出或收入，点击 `餐饮` 重新选择一级分类。
|
||||
- 横轴固定占满抽屉可用宽度，纵轴固定覆盖完整键盘高度；候选数量只影响滚动，不改变坐标轴尺寸。
|
||||
- 数字键盘不再放置分类键，右列为加、减和占据下面两格的整笔确认键。
|
||||
- 点击选择器外部确认当前层级；选择到最后一级分类时自动确认并收起选择器。
|
||||
- 备注为可选项，不自动获得焦点；用户手动点击备注后隐藏数字键盘，抽屉随内容收缩并交由系统键盘输入。
|
||||
- [分类选择步骤](分类轮盘步骤.html) 用分步骤画面表达交互状态（文件名暂时保留旧称）。
|
||||
- 收入后续可复用同一套二维选择器，二期再承载 `普通收入 / 报销 / 退款`。
|
||||
|
||||
[快速记账](快速记账.html) 仅保留为旧版独立页参考，不再作为主原型入口。
|
||||
|
||||
## 参考来源
|
||||
|
||||
参考了 `legacy-cent-app` 中的旧版方向：
|
||||
|
||||
- 账本卡片列表。
|
||||
- 账本内顶部收入、结余、支出三栏。
|
||||
- 按日期分组的流水。
|
||||
- 底部快捷记账面板。
|
||||
- 数字键盘式金额输入。
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>快速记账原型已合并</title>
|
||||
<link rel="stylesheet" href="./原型样式.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="stage">
|
||||
<section class="phone">
|
||||
<header class="appbar">
|
||||
<div class="toolbar">
|
||||
<button class="icon-button" aria-label="关闭">×</button>
|
||||
<h1 class="title">快速记账</h1>
|
||||
<span class="toolbar-spacer" aria-hidden="true"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="deprecated-note">
|
||||
<h2>已并入账本流水页</h2>
|
||||
<p>快速记账不再作为独立页面。请在账本流水页查看底部抽屉和分类轮盘交互。</p>
|
||||
<a href="./账本流水.html">打开账本流水原型</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>成员邀请原型</title>
|
||||
<link rel="stylesheet" href="./原型样式.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="stage">
|
||||
<section class="phone">
|
||||
<header class="appbar">
|
||||
<div class="toolbar">
|
||||
<button class="icon-button" aria-label="返回">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
|
||||
</button>
|
||||
<h1 class="title">成员</h1>
|
||||
<button class="icon-button" aria-label="邀请">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6"/><path d="M22 11h-6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<p class="section-title">家庭日常</p>
|
||||
<section class="invite-box">
|
||||
<div class="row">
|
||||
<div>
|
||||
<strong>邀请成员加入账本</strong>
|
||||
<div class="muted">链接 24 小时后过期</div>
|
||||
</div>
|
||||
<button class="primary">生成</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="section-title">当前成员</p>
|
||||
<article class="member">
|
||||
<div class="avatar">我</div>
|
||||
<div><strong>自己</strong><div class="muted">owner · 可邀请和移除成员</div></div>
|
||||
<span class="badge">拥有者</span>
|
||||
</article>
|
||||
<article class="member">
|
||||
<div class="avatar">王</div>
|
||||
<div><strong>小王</strong><div class="muted">member · 可查看和记账</div></div>
|
||||
<span class="badge">成员</span>
|
||||
</article>
|
||||
<article class="member">
|
||||
<div class="avatar">李</div>
|
||||
<div><strong>小李</strong><div class="muted">member · 最近同步 10:42</div></div>
|
||||
<span class="badge">成员</span>
|
||||
</article>
|
||||
|
||||
<p class="section-title">权限说明</p>
|
||||
<div class="ledger-card">
|
||||
<div class="muted">首版只做账本级权限。同一账本内成员共享全量流水，不做单条账目权限。</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>账本列表原型</title>
|
||||
<link rel="stylesheet" href="./原型样式.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="stage">
|
||||
<section class="phone">
|
||||
<header class="appbar">
|
||||
<div class="toolbar">
|
||||
<button class="icon-button" aria-label="同步">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6v5h-5"/><path d="M4 18v-5h5"/><path d="M18 11a6 6 0 0 0-10-4l-4 4"/><path d="M6 13a6 6 0 0 0 10 4l4-4"/></svg>
|
||||
</button>
|
||||
<h1 class="title">账本</h1>
|
||||
<button class="icon-button" aria-label="新增账本">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<p class="section-title">我的账本</p>
|
||||
|
||||
<article class="ledger-card">
|
||||
<div class="ledger-head">
|
||||
<div>
|
||||
<h2 class="ledger-name">家庭日常</h2>
|
||||
<span class="muted">3 名成员 · 今天已同步</span>
|
||||
</div>
|
||||
<span class="badge">共享</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="action">设置</button>
|
||||
<button class="action">报表</button>
|
||||
<button class="action">成员</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="ledger-card">
|
||||
<div class="ledger-head">
|
||||
<div>
|
||||
<h2 class="ledger-name">旅行备用</h2>
|
||||
<span class="muted">仅自己 · 12 条流水</span>
|
||||
</div>
|
||||
<span class="badge">独享</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="action">设置</button>
|
||||
<button class="action">报表</button>
|
||||
<button class="action">成员</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="ledger-card">
|
||||
<div class="ledger-head">
|
||||
<div>
|
||||
<h2 class="ledger-name">装修记录</h2>
|
||||
<span class="muted">2 名成员 · 有 2 条待同步</span>
|
||||
</div>
|
||||
<span class="badge">共享</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="action">设置</button>
|
||||
<button class="action">报表</button>
|
||||
<button class="action">成员</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>账本流水原型</title>
|
||||
<link rel="stylesheet" href="./原型样式.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="stage">
|
||||
<section class="phone phone-relative">
|
||||
<header class="appbar">
|
||||
<div class="toolbar">
|
||||
<button class="icon-button" aria-label="报表">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5"/><path d="M8 17V9"/><path d="M12 17V7"/><path d="M16 17v-4"/><path d="M20 17V6"/></svg>
|
||||
</button>
|
||||
<h1 class="title">家庭日常</h1>
|
||||
<button class="icon-button" aria-label="更多">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat"><strong>8,240</strong><span>收入</span></div>
|
||||
<div class="stat"><strong>5,986</strong><span>结余</span></div>
|
||||
<div class="stat"><strong>2,254</strong><span>支出</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="day">今天 · 7 月 18 日</div>
|
||||
<article class="entry">
|
||||
<div class="entry-icon">餐</div>
|
||||
<div class="entry-main"><strong>午餐</strong><span>餐饮 · 小王</span></div>
|
||||
<div class="entry-amount"><strong class="expense">-58.00</strong><span>12:28</span></div>
|
||||
</article>
|
||||
<article class="entry">
|
||||
<div class="entry-icon">行</div>
|
||||
<div class="entry-main"><strong>打车</strong><span>交通 · 自己</span></div>
|
||||
<div class="entry-amount"><strong class="expense">-31.50</strong><span>09:16</span></div>
|
||||
</article>
|
||||
|
||||
<div class="day">昨天 · 7 月 17 日</div>
|
||||
<article class="entry">
|
||||
<div class="entry-icon">薪</div>
|
||||
<div class="entry-main"><strong>工资</strong><span>收入 · 自己</span></div>
|
||||
<div class="entry-amount"><strong class="income">+8,240.00</strong><span>18:02</span></div>
|
||||
</article>
|
||||
<article class="entry">
|
||||
<div class="entry-icon">购</div>
|
||||
<div class="entry-main"><strong>超市采购</strong><span>日用 · 小王</span></div>
|
||||
<div class="entry-amount"><strong class="expense">-236.80</strong><span>16:45</span></div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="drawer-scrim" aria-hidden="true"></div>
|
||||
<section class="entry-drawer" aria-label="快速记账抽屉">
|
||||
<div class="drawer-handle" aria-hidden="true"></div>
|
||||
<div class="amount-line drawer-amount-line">
|
||||
<strong>58.00</strong>
|
||||
</div>
|
||||
|
||||
<div class="selection-row">
|
||||
<div class="selected-path" aria-label="当前分类">
|
||||
<span>支出</span>
|
||||
<span>餐饮</span>
|
||||
<strong>外卖</strong>
|
||||
</div>
|
||||
<button class="date-pill" aria-label="选择日期时间">今天 12:30</button>
|
||||
</div>
|
||||
|
||||
<div class="note-line drawer-note-line">
|
||||
<input value="午餐" aria-label="备注" />
|
||||
</div>
|
||||
<div class="keypad">
|
||||
<button class="key">7</button><button class="key">8</button><button class="key">9</button><button class="key category-key" aria-label="分类选择">支出</button>
|
||||
<button class="key">4</button><button class="key">5</button><button class="key">6</button><button class="key">+</button>
|
||||
<button class="key">1</button><button class="key">2</button><button class="key">3</button><button class="key">-</button>
|
||||
<button class="key">.</button><button class="key">0</button><button class="key utility-key" aria-label="退格">⌫</button><button class="key commit-key" aria-label="确认">✓</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue