nanxun/jizhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial project import

Browse Source
This commit is contained in:
nanxun
2026-07-24 23:11:20 +08:00
commit 6396eabb87
372 changed files with 49682 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/jizhi-color-concepts-preview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 KiB

design/jizhi-color-concepts.html
+488
View File
@@ -0,0 +1,488 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记之 · 纯色配色提案</title>
<style>
:root {
color-scheme: light;
--page-ink: #252722;
--page-muted: #72766c;
--page-paper: #eeeae0;
}
* { box-sizing: border-box; }
body {
margin: 0;
color: var(--page-ink);
font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
background: #f3f4f6;
min-height: 100vh;
}
.page-shell {
width: min(1540px, calc(100% - 40px));
margin: 0 auto;
padding: 64px 0 88px;
}
.page-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
align-items: end;
gap: 42px;
margin-bottom: 44px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: #77756d;
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow::before {
width: 34px;
height: 2px;
content: "";
background: #252722;
}
h1 {
margin: 0;
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
font-size: clamp(42px, 6vw, 82px);
font-weight: 700;
letter-spacing: -.06em;
line-height: .98;
}
h1 span { color: #202124; }
.intro {
max-width: 580px;
margin: 22px 0 0;
color: var(--page-muted);
font-size: 15px;
line-height: 1.8;
}
.brief {
padding: 22px 24px;
border: 1px solid #e1e4e8;
border-radius: 18px;
background: #ffffff;
}
.brief strong {
display: block;
margin-bottom: 10px;
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
font-size: 18px;
}
.brief p {
margin: 0;
color: var(--page-muted);
font-size: 13px;
line-height: 1.7;
}
.concept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 28px;
align-items: start;
}
.concept {
--bg: #f5f3ed;
--surface: #ffffff;
--primary: #2f5d50;
--primary-soft: #dde8e1;
--accent: #d68f4c;
--ink: #1d2a25;
--muted: #6f776f;
--line: #d8d8ce;
--expense: #c75b50;
--income: #347b66;
position: relative;
overflow: hidden;
padding: 22px;
border: 1px solid #e1e4e8;
border-radius: 28px;
background: #ffffff;
box-shadow: none;
}
.concept::after { display: none; }
.concept-head {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.concept-index {
color: var(--primary);
font-family: Georgia, serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
}
.concept h2 {
margin: 4px 0 5px;
color: var(--ink);
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
font-size: 27px;
line-height: 1.1;
}
.concept-note {
color: var(--muted);
font-size: 12px;
}
.recommend {
padding: 6px 10px;
border: 1px solid var(--primary);
border-radius: 999px;
color: var(--primary);
background: var(--primary-soft);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.swatches {
display: flex;
gap: 7px;
margin-top: 12px;
}
.swatch {
width: 22px;
height: 22px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--swatch);
box-shadow: 0 0 0 1px rgba(37, 39, 34, .12);
}
.phone {
position: relative;
z-index: 1;
width: min(100%, 334px);
height: 696px;
margin: 0 auto;
overflow: hidden;
border: 7px solid #242622;
border-radius: 43px;
color: var(--ink);
background: var(--bg);
box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
}
.status {
display: flex;
align-items: center;
justify-content: space-between;
height: 33px;
padding: 7px 19px 0;
font-size: 10px;
font-weight: 800;
}
.status-icons { display: flex; gap: 5px; align-items: center; }
.signal { width: 12px; height: 7px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: skew(-15deg); }
.battery { width: 16px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.battery::after { display: block; width: 10px; height: 4px; margin: 1px; content: ""; background: currentColor; }
.app-content {
height: calc(100% - 33px);
padding: 9px 16px 78px;
overflow: hidden;
}
.app-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; object-fit: cover; }
.brand-name { font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif; font-size: 19px; font-weight: 800; }
.brand-sub { margin-top: 1px; color: var(--muted); font-size: 9px; }
.avatar {
display: grid;
width: 31px;
height: 31px;
place-items: center;
border-radius: 50%;
color: var(--surface);
background: var(--primary);
font-size: 12px;
font-weight: 800;
}
.balance-card {
position: relative;
overflow: hidden;
padding: 17px 18px 16px;
border-radius: 22px;
color: var(--surface);
background: var(--primary);
}
.balance-card::after { display: none; }
.balance-label { opacity: .78; font-size: 10px; }
.balance { margin: 3px 0 13px; font-family: Georgia, serif; font-size: 31px; font-weight: 700; letter-spacing: -.04em; }
.balance-meta { display: flex; gap: 25px; font-size: 10px; }
.balance-meta b { display: block; margin-top: 2px; font-size: 13px; }
.quick-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 13px 0;
}
.quick {
padding: 10px 2px 8px;
border: 1px solid var(--line);
border-radius: 15px;
text-align: center;
background: var(--surface);
}
.quick-icon {
display: grid;
width: 28px;
height: 28px;
margin: 0 auto 5px;
place-items: center;
border-radius: 10px;
color: var(--primary);
background: var(--primary-soft);
}
.quick:nth-child(2) .quick-icon { color: var(--primary); background: var(--primary-soft); }
.quick:nth-child(3) .quick-icon { color: var(--primary); background: var(--primary-soft); }
.quick:nth-child(4) .quick-icon { color: var(--primary); background: var(--primary-soft); }
.quick span { font-size: 9px; font-weight: 700; }
.budget-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
}
.section-title { font-size: 12px; font-weight: 800; }
.budget-copy { margin: 4px 0 9px; color: var(--muted); font-size: 9px; }
.budget-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
.budget-track i { display: block; width: 63%; height: 100%; border-radius: inherit; background: var(--accent); }
.budget-number { color: var(--primary); font-family: Georgia, serif; font-size: 17px; font-weight: 800; }
.budget-number small { display: block; margin-top: 2px; color: var(--muted); font-family: inherit; font-size: 8px; font-weight: 500; text-align: right; }
.insight {
display: flex;
align-items: center;
gap: 9px;
margin: 11px 0 14px;
padding: 9px 11px;
border-left: 3px solid var(--accent);
border-radius: 6px 13px 13px 6px;
background: var(--accent-soft);
}
.insight-mark { color: var(--accent); font-family: Georgia, serif; font-size: 18px; font-weight: 800; }
.insight strong { display: block; font-size: 9px; }
.insight p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.list-head a { color: var(--primary); font-size: 8px; font-weight: 700; }
.transaction {
display: grid;
grid-template-columns: 34px 1fr auto;
align-items: center;
gap: 9px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}
.tx-icon {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
}
.transaction:nth-of-type(3) .tx-icon { color: var(--primary); background: var(--primary-soft); }
.transaction:nth-of-type(4) .tx-icon { color: var(--income); background: var(--income-soft); }
.tx-name { font-size: 10px; font-weight: 800; }
.tx-note { margin-top: 2px; color: var(--muted); font-size: 8px; }
.tx-money { font-family: Georgia, serif; font-size: 11px; font-weight: 800; }
.tx-money.income { color: var(--income); }
.bottom-nav {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 68px;
padding: 8px 10px 9px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.nav-item { display: grid; place-items: center; gap: 2px; color: var(--muted); font-size: 8px; }
.nav-item.active { color: var(--primary); font-weight: 800; }
.nav-item.add { transform: translateY(-17px); }
.add-button { display: grid; width: 43px; height: 43px; place-items: center; border: 4px solid var(--bg); border-radius: 50%; color: var(--surface); background: var(--primary); box-shadow: 0 8px 18px rgba(17, 24, 39, .16); }
svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-blue { --bg:#f5f7fa; --surface:#ffffff; --primary:#2563eb; --primary-soft:#e8efff; --accent:#2563eb; --accent-soft:#eef3ff; --ink:#111827; --muted:#667085; --line:#e4e7ec; --expense:#d92d20; --income:#14804a; --income-soft:#e9f7ef; }
.theme-green { --bg:#f4f7f6; --surface:#ffffff; --primary:#087f6d; --primary-soft:#e3f2ef; --accent:#087f6d; --accent-soft:#edf7f5; --ink:#17201e; --muted:#66736f; --line:#e1e7e5; --expense:#cf3f36; --income:#087f6d; --income-soft:#e3f2ef; }
.theme-orange { --bg:#f7f7f5; --surface:#ffffff; --primary:#ed5a2b; --primary-soft:#ffebe4; --accent:#ed5a2b; --accent-soft:#fff2ed; --ink:#1c1c1c; --muted:#707070; --line:#e6e6e2; --expense:#cf3f36; --income:#267a52; --income-soft:#e7f4ec; }
.theme-black { --bg:#f4f4f4; --surface:#ffffff; --primary:#202124; --primary-soft:#ececec; --accent:#202124; --accent-soft:#f0f0f0; --ink:#171717; --muted:#6b6b6b; --line:#e1e1e1; --expense:#d63b32; --income:#24754d; --income-soft:#e8f3ed; }
@media (max-width: 820px) {
.page-shell { width: min(100% - 22px, 430px); padding: 38px 0 62px; }
.page-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
.concept-grid { grid-template-columns: 1fr; gap: 20px; }
.concept { padding: 17px; border-radius: 23px; }
.phone { height: 685px; }
}
</style>
</head>
<body>
<main class="page-shell">
<header class="page-head">
<div>
<div class="eyebrow">COLOR STUDY · FLAT</div>
<h1>记之<span>纯色提案</span></h1>
<p class="intro">所有方案只保留一个品牌主色，不使用渐变、发光或半透明背景。页面结构保持一致，只比较大面积底色、主按钮和状态色是否舒服。</p>
</div>
<aside class="brief">
<strong>这次只看纯色</strong>
<p>四套方案都采用白色卡片与中性文字，收入和支出只在金额处使用语义色，避免一个页面同时出现过多颜色。</p>
</aside>
</header>
<section class="concept-grid" id="conceptGrid" aria-label="记之配色方案"></section>
</main>
<script>
const themes = [
{ cls: 'theme-blue', index: '01', name: '清爽蓝白', note: '清晰、可靠，最接近成熟工具产品', colors: ['#F5F7FA','#FFFFFF','#2563EB','#111827'] },
{ cls: 'theme-green', index: '02', name: '克制青绿', note: '温和、耐看，适合长期使用', colors: ['#F4F7F6','#FFFFFF','#087F6D','#17201E'] },
{ cls: 'theme-orange', index: '03', name: '活力橙黑', note: '直接、轻快，记账操作更醒目', colors: ['#F7F7F5','#FFFFFF','#ED5A2B','#1C1C1C'] },
{ cls: 'theme-black', index: '04', name: '极简黑白', note: '克制、清楚，与黑白图标最统一', recommended: true, colors: ['#F4F4F4','#FFFFFF','#202124','#171717'] }
];
const icons = {
mic: '<svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M9 21h6"/></svg>',
camera: '<svg viewBox="0 0 24 24"><path d="M4 7h3l1.5-2h7L17 7h3v12H4z"/><circle cx="12" cy="13" r="3.5"/></svg>',
scan: '<svg viewBox="0 0 24 24"><path d="M8 3H4v4M16 3h4v4M8 21H4v-4M16 21h4v-4M7 12h10"/></svg>',
sparkle: '<svg viewBox="0 0 24 24"><path d="M12 3c.8 4.3 2.7 6.2 7 7-4.3.8-6.2 2.7-7 7-.8-4.3-2.7-6.2-7-7 4.3-.8 6.2-2.7 7-7z"/></svg>',
food: '<svg viewBox="0 0 24 24"><path d="M7 3v8M4 3v5c0 2 1 3 3 3s3-1 3-3V3M7 11v10M16 3v18M16 3c3 2 4 5 4 8h-4"/></svg>',
bus: '<svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="16" rx="3"/><path d="M5 12h14M8 16h.01M16 16h.01M8 21v-2M16 21v-2"/></svg>',
wallet: '<svg viewBox="0 0 24 24"><path d="M4 6h14a2 2 0 0 1 2 2v11H4zM4 6V4h12v2M15 12h5"/></svg>',
home: '<svg viewBox="0 0 24 24"><path d="m4 11 8-7 8 7v9h-6v-6h-4v6H4z"/></svg>',
chart: '<svg viewBox="0 0 24 24"><path d="M4 20V9M10 20V4M16 20v-7M22 20H2"/></svg>',
chat: '<svg viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 10h8"/></svg>',
user: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1-5 4-7 8-7s7 2 8 7"/></svg>',
plus: '<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>'
};
const phone = () => `
<div class="phone">
<div class="status"><span>9:41</span><span class="status-icons"><i class="signal"></i><i class="battery"></i></span></div>
<div class="app-content">
<div class="app-head">
<div class="brand">
<img src="frontend/assets/branding/jizhi-app-icon-1024.png" alt="记之图标">
<div><div class="brand-name">记之</div><div class="brand-sub">把日子记明白</div></div>
</div>
<div class="avatar">之</div>
</div>
<section class="balance-card">
<div class="balance-label">七月结余</div>
<div class="balance">¥ 4,286.50</div>
<div class="balance-meta"><span>收入<b>¥ 8,640</b></span><span>支出<b>¥ 4,353.50</b></span></div>
</section>
<div class="quick-row">
<div class="quick"><div class="quick-icon">${icons.mic}</div><span>说一笔</span></div>
<div class="quick"><div class="quick-icon">${icons.camera}</div><span>拍账单</span></div>
<div class="quick"><div class="quick-icon">${icons.scan}</div><span>截屏记</span></div>
<div class="quick"><div class="quick-icon">${icons.sparkle}</div><span>问一问</span></div>
</div>
<section class="budget-card">
<div><div class="section-title">本月预算</div><div class="budget-copy">已使用 63%，节奏刚刚好</div><div class="budget-track"><i></i></div></div>
<div class="budget-number">¥ 1,847<small>剩余可用</small></div>
</section>
<div class="insight"><div class="insight-mark">i</div><div><strong>今天比平时少花了 18 元</strong><p>晚餐控制得不错，继续按这个节奏。</p></div></div>
<div class="list-head"><div class="section-title">今天</div><a>全部明细</a></div>
<div class="transaction"><div class="tx-icon">${icons.food}</div><div><div class="tx-name">午餐</div><div class="tx-note">园区食堂 · 12:26</div></div><div class="tx-money">- ¥ 28</div></div>
<div class="transaction"><div class="tx-icon">${icons.bus}</div><div><div class="tx-name">地铁</div><div class="tx-note">交通出行 · 08:41</div></div><div class="tx-money">- ¥ 4</div></div>
<div class="transaction"><div class="tx-icon">${icons.wallet}</div><div><div class="tx-name">稿费到账</div><div class="tx-note">兼职收入 · 07:30</div></div><div class="tx-money income">+ ¥ 680</div></div>
</div>
<nav class="bottom-nav">
<div class="nav-item active">${icons.home}<span>明细</span></div>
<div class="nav-item">${icons.chart}<span>统计</span></div>
<div class="nav-item add"><div class="add-button">${icons.plus}</div><span>记一笔</span></div>
<div class="nav-item">${icons.user}<span>我的</span></div>
</nav>
</div>`;
document.querySelector('#conceptGrid').innerHTML = themes.map(theme => `
<article class="concept ${theme.cls}">
<header class="concept-head">
<div>
<div class="concept-index">SCHEME ${theme.index}</div>
<h2>${theme.name}</h2>
<div class="concept-note">${theme.note}</div>
<div class="swatches">${theme.colors.map(color => `<i class="swatch" style="--swatch:${color}" title="${color}"></i>`).join('')}</div>
</div>
${theme.recommended ? '<span class="recommend">优先推荐</span>' : ''}
</header>
${phone()}
</article>`).join('');
</script>
</body>
</html>
design/jizhi-green-ui-concepts.html
+27
View File
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>记之 · 克制青绿六页面</title>
<style>
:root{--brand:#087f6d;--deep:#066b5c;--soft:#e3f2ef;--bg:#f4f7f6;--card:#fff;--ink:#17201e;--muted:#66736f;--faint:#98a29f;--line:#e1e7e5;--ai:#4f6f8f;--aiSoft:#ebf0f7;--expense:#cf3f36;--warning:#b86b10;--warningSoft:#fff4dd;--page:#edf1ef;--shadow:rgba(23,32,30,.12)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--page);font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}.page{width:min(1380px,calc(100% - 32px));margin:auto;padding:52px 0 80px}.head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;margin:0 4px 34px}.kicker{margin-bottom:10px;color:var(--brand);font:800 11px Georgia;letter-spacing:.16em}h1{margin:0;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(38px,5vw,66px);line-height:1}.intro{max-width:700px;margin:17px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.palette{display:flex;gap:9px;padding:13px;border:1px solid var(--line);border-radius:17px;background:#fff}.palette i{width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(360px,1fr));gap:26px 22px;align-items:start}.case{padding:17px 15px 21px;border:1px solid #dce3e0;border-radius:23px;background:#fff}.caseHead{display:flex;justify-content:space-between;width:min(100%,370px);margin:0 auto 14px}.idx{color:var(--brand);font:800 10px Georgia;letter-spacing:.14em}.case h2{margin:5px 0 3px;font-size:20px}.note{color:var(--muted);font-size:11px}.tag{align-self:flex-start;padding:5px 9px;border:1px solid var(--brand);border-radius:999px;color:var(--brand);background:var(--soft);font-size:9px;font-weight:800}
.phone{position:relative;width:min(100%,370px);height:780px;margin:auto;overflow:hidden;border:7px solid #1d2422;border-radius:43px;background:var(--bg);box-shadow:0 18px 36px var(--shadow)}.status{display:flex;justify-content:space-between;height:34px;padding:8px 19px 0;font-size:10px;font-weight:800}.sys{letter-spacing:2px}.screen{height:calc(100% - 34px);overflow:hidden;padding:8px 16px 82px;background:var(--bg)}.top{display:flex;align-items:center;justify-content:space-between;min-height:42px;margin-bottom:12px}.title{font-size:16px;font-weight:800}.brand{display:flex;align-items:center;gap:9px}.logo{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;object-fit:cover}.brand b{font-family:"Noto Serif SC","Songti SC",serif;font-size:18px}.micro,.sub{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.45}.square{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px}.action{color:var(--brand);font-size:10px;font-weight:800}.panel{border:1px solid var(--line);border-radius:17px;background:#fff}.st{font-size:11px;font-weight:800}.link{color:var(--brand);font-size:8px;font-weight:800}.section{display:flex;justify-content:space-between;align-items:center;margin:13px 1px 4px}
.hero{padding:17px 18px;border-radius:19px;color:#fff;background:var(--brand)}.hero small{color:#d9efeb}.heroValue{margin:5px 0 14px;font:700 29px Georgia}.heroMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.heroMeta span{color:#c9e6e0;font-size:8px}.heroMeta b{display:block;margin-top:3px;color:#fff;font:700 11px Georgia}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:11px 0}.quick>div{padding:9px 2px 8px;border:1px solid var(--line);border-radius:14px;text-align:center;background:#fff}.qicon,.cicon,.ricon{display:grid;place-items:center;color:var(--brand);background:var(--soft)}.qicon{width:28px;height:28px;margin:0 auto 5px;border-radius:9px;font-size:13px}.quick span{font-size:8px;font-weight:700}.budget{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 13px}.track{height:5px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--soft)}.track i{display:block;width:var(--w,63%);height:100%;background:var(--brand)}.budgetVal{color:var(--brand);font:800 16px Georgia}
.tx{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.cicon{width:34px;height:34px;border-radius:11px;font-size:12px;font-weight:800}.tx b{font-size:10px}.tx small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.money{font:800 11px Georgia}.out{color:var(--expense)}.income{color:var(--brand)}.nav{position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);height:68px;padding:8px 9px 9px;border-top:1px solid var(--line);background:#fff}.nav>div{display:grid;place-items:center;gap:2px;color:var(--faint);font-size:8px}.nav b{font-size:14px}.nav .on{color:var(--brand);font-weight:800}.nav .add{transform:translateY(-15px)}.fab{display:grid;width:42px;height:42px;place-items:center;border:4px solid var(--bg);border-radius:50%;color:#fff;background:var(--brand);box-shadow:0 7px 15px var(--shadow);font-size:20px}
.chat{display:grid;grid-template-rows:auto 1fr auto;padding:8px 13px 14px}.person{display:flex;align-items:center;gap:8px}.aiAvatar{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:var(--ai);background:var(--aiSoft);font-size:16px}.online{color:var(--brand);font-size:8px}.log{overflow:hidden;padding:9px 3px}.stamp{margin-bottom:13px;color:var(--faint);font-size:8px;text-align:center}.msg{display:flex;gap:7px;margin-bottom:11px}.msg.me{justify-content:flex-end}.miniAI{display:grid;flex:0 0 25px;height:25px;place-items:center;border-radius:8px;color:var(--ai);background:var(--aiSoft);font-size:9px;font-weight:800}.bubble{max-width:77%;padding:10px 11px;border:1px solid var(--line);border-radius:6px 15px 15px 15px;background:#fff;font-size:10px;line-height:1.55}.me .bubble{border-color:var(--brand);border-radius:15px 6px 15px 15px;color:#fff;background:var(--brand)}.thinking{display:inline-flex;gap:6px;margin:0 0 11px 32px;padding:6px 9px;border-radius:99px;color:var(--ai);background:var(--aiSoft);font-size:8px;font-weight:700}.chatBill{margin:0 0 11px 32px;padding:11px;border-color:#cfd9e4}.billHead{display:flex;justify-content:space-between;margin-bottom:7px;color:var(--ai);font-size:8px;font-weight:800}.ok{padding:3px 7px;border-radius:99px;color:var(--brand);background:var(--soft)}.composer{display:grid;grid-template-columns:30px 1fr 30px 34px;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:18px;background:#fff}.composeBtn{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:10px;color:var(--muted);background:var(--bg)}.composeBtn.send{color:#fff;background:var(--brand)}.placeholder{color:var(--faint);font-size:9px}
.segments{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#fff}.seg{padding:9px;border-radius:9px;color:var(--muted);text-align:center;font-size:10px;font-weight:800}.seg.on{color:#fff;background:var(--brand)}.amount{padding:24px 0 18px;text-align:center}.amount small{color:var(--muted)}.amount b{display:block;margin-top:4px;color:var(--expense);font:700 38px Georgia}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin-top:10px}.cat{padding:7px 2px;border:1px solid transparent;border-radius:12px;text-align:center}.cat.on{border-color:var(--brand);background:var(--soft)}.cat .cicon{margin:0 auto 5px}.cat span{font-size:8px;font-weight:700}.form{margin-top:13px;padding:2px 13px}.formRow{display:grid;grid-template-columns:20px 67px 1fr 15px;align-items:center;gap:5px;min-height:42px;border-bottom:1px solid var(--line);font-size:9px}.formRow:last-child{border:0}.lab{color:var(--muted)}.val{text-align:right;font-weight:700}.primary{display:grid;width:100%;min-height:44px;margin-top:14px;place-items:center;border:0;border-radius:14px;color:#fff;background:var(--brand);font-size:11px;font-weight:800}
.months{display:flex;justify-content:center;gap:18px;margin:1px 0 11px;color:var(--muted);font-size:9px}.months b{color:var(--ink);font-size:11px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.metric{padding:11px 9px}.metric span{color:var(--muted);font-size:8px}.metric b{display:block;margin-top:5px;font:700 14px Georgia}.chartCard{margin-top:10px;padding:13px}.barRow{display:grid;grid-template-columns:44px 1fr 43px;align-items:center;gap:7px;margin-top:10px;font-size:8px}.bar{height:7px;overflow:hidden;border-radius:99px;background:var(--soft)}.bar i{display:block;width:var(--w);height:100%;background:var(--brand)}.barRow b{font:700 9px Georgia;text-align:right}.aiReport{margin-top:10px;padding:13px;border-color:#cfd9e4;background:var(--aiSoft)}.aiHead{color:var(--ai);font-size:9px;font-weight:800}.aiReport strong{display:block;margin-top:8px;font-size:12px;line-height:1.45}.aiReport p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.55}
.profile{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:11px;padding:14px}.avatar{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;color:#fff;background:var(--brand);font:800 20px serif}.profileName{font-size:14px;font-weight:800}.ledger{margin-top:10px;padding:13px}.ledgerTop{display:flex;justify-content:space-between}.ledgerName{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800}.dot{width:9px;height:9px;border-radius:3px;background:var(--brand)}.ledgerStats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.ledgerStat{padding:9px;border-radius:10px;background:var(--bg)}.ledgerStat span{color:var(--muted);font-size:8px}.ledgerStat b{display:block;margin-top:3px;font:700 12px Georgia}.settings{margin-top:10px;padding:0 13px}.setting{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid var(--line)}.setting:last-child{border:0}.ricon{width:31px;height:31px;border-radius:10px;font-size:12px;font-weight:800}.ricon.ai{color:var(--ai);background:var(--aiSoft)}.setting b{font-size:10px}.setting p{margin:2px 0 0;color:var(--muted);font-size:8px}.chev{color:var(--faint)}
.captureState{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:10px 11px;color:var(--deep);background:var(--soft)}.stateMark{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;color:#fff;background:var(--brand)}.captureState b{font-size:9px}.captureState p{margin:2px 0 0;color:var(--muted);font-size:8px}.warning{display:flex;gap:7px;margin-bottom:9px;padding:9px 10px;border:1px solid #f1d79e;border-radius:12px;color:var(--warning);background:var(--warningSoft);font-size:8px;line-height:1.45}.parsed{margin-bottom:9px;padding:12px}.parsedHead{display:flex;justify-content:space-between;margin-bottom:9px;font-size:9px;font-weight:800}.confidence{color:var(--brand);font-size:8px}.parsedMain{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px}.parsedMain .cicon{width:38px;height:38px}.parsedAmount{color:var(--expense);font:800 16px Georgia}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{padding:5px 7px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:var(--bg);font-size:8px}.captureFooter{position:absolute;right:13px;bottom:13px;left:13px}.captureFooter .primary{margin:0}
@media(max-width:1180px){.grid{grid-template-columns:repeat(2,minmax(350px,1fr))}}@media(max-width:790px){.page{width:min(100% - 18px,430px);padding:30px 0 52px}.head{grid-template-columns:1fr;gap:18px}.palette{justify-self:start}.grid{grid-template-columns:1fr;gap:18px}.case{padding:15px 9px 18px}.phone{height:760px}}
</style></head>
<body><main class="page"><header class="head"><div><div class="kicker">JIZHI UI STUDY · 02</div><h1>克制青绿 · 六页面</h1><p class="intro">白色承载内容，青绿只负责品牌与操作，红色只提示支出，低饱和蓝只标识 AI。界面不依赖装饰性效果，让账本信息成为视觉中心。</p></div><div class="palette"><i style="--c:#f4f7f6"></i><i style="--c:#fff"></i><i style="--c:#087f6d"></i><i style="--c:#17201e"></i></div></header><section class="grid">
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 01</div><h2>首页 · 明细</h2><div class="note">结余、预算和今日账单</div></div><span class="tag">主视觉</span></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="brand"><img class="logo" src="frontend/assets/branding/jizhi-app-icon-1024.png"><div><b>记之</b><div class="micro">日常账本</div></div></div><div class="square">•••</div></div><section class="hero"><small>七月结余</small><div class="heroValue">¥ 4,286.50</div><div class="heroMeta"><span>收入<b>¥ 8,640</b></span><span>支出<b>¥ 4,353</b></span><span>共计<b>48 笔</b></span></div></section><div class="quick"><div><i class="qicon">声</i><span>语音记账</span></div><div><i class="qicon">拍</i><span>拍照识别</span></div><div><i class="qicon">截</i><span>截屏记账</span></div><div><i class="qicon">问</i><span>问一问</span></div></div><section class="panel budget"><div><b class="st">本月预算</b><div class="sub">已使用 63%，当前节奏正常</div><div class="track"><i></i></div></div><div class="budgetVal">¥ 1,847</div></section><div class="section"><b class="st">今天</b><span class="link">全部明细</span></div><div class="tx"><div class="cicon">餐</div><div><b>午餐</b><small>餐饮 · 12:26</small></div><div class="money out">- ¥28</div></div><div class="tx"><div class="cicon">行</div><div><b>地铁</b><small>交通 · 08:41</small></div><div class="money out">- ¥4</div></div><div class="tx"><div class="cicon">收</div><div><b>稿费到账</b><small>兼职 · 07:30</small></div><div class="money income">+ ¥680</div></div></div><nav class="nav"><div class="on"><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 02</div><h2>AI 聊天</h2><div class="note">蓝色仅标识 AI 身份与状态</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen chat"><div class="top"><div class="person"><div class="square">‹</div><div class="aiAvatar">✦</div><div><b class="title">小记</b><div class="online">已连接 · 日常账本</div></div></div><div class="square">•••</div></div><div class="log"><div class="stamp">今天 14:28</div><div class="msg me"><div class="bubble">今天兼职赚了 680 元，午饭花了 28。</div></div><div class="thinking">● 正在核对账本分类</div><div class="msg"><div class="miniAI">记</div><div class="bubble">已识别到 2 笔：兼职收入 680 元、餐饮支出 28 元。</div></div><section class="panel chatBill"><div class="billHead"><span>✦ AI 入账结果</span><span class="ok">已记录</span></div><div class="tx"><div class="cicon">收</div><div><b>兼职收入</b><small>今天 14:28</small></div><div class="money income">+ ¥680</div></div><div class="tx"><div class="cicon">餐</div><div><b>午饭</b><small>餐饮 · 14:28</small></div><div class="money out">- ¥28</div></div></section><div class="msg"><div class="miniAI">记</div><div class="bubble">本月收入是 8,640 元，结余 4,286.50 元。</div></div></div><div class="composer"><button class="composeBtn">⌨</button><div class="placeholder">说说今天的收入或支出...</div><button class="composeBtn">☺</button><button class="composeBtn send">↑</button></div></div></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 03</div><h2>记一笔</h2><div class="note">纯色切换、分类和确认操作</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="square">‹</div><div class="title">记一笔</div><span class="action">日常账本</span></div><div class="segments"><div class="seg on">支出</div><div class="seg">收入</div></div><div class="amount"><small>金额</small><b>¥ 28.00</b></div><b class="st">选择分类</b><div class="cats"><div class="cat on"><div class="cicon">餐</div><span>餐饮</span></div><div class="cat"><div class="cicon">购</div><span>购物</span></div><div class="cat"><div class="cicon">行</div><span>交通</span></div><div class="cat"><div class="cicon">住</div><span>居住</span></div><div class="cat"><div class="cicon">礼</div><span>人情</span></div><div class="cat"><div class="cicon">卡</div><span>账单</span></div><div class="cat"><div class="cicon">娱</div><span>娱乐</span></div><div class="cat"><div class="cicon">•••</div><span>其他</span></div></div><section class="panel form"><div class="formRow"><span>✎</span><span class="lab">备注</span><span class="val">园区食堂</span><span class="chev">›</span></div><div class="formRow"><span>▭</span><span class="lab">支付方式</span><span class="val">微信支付</span><span class="chev">›</span></div><div class="formRow"><span>□</span><span class="lab">时间</span><span class="val">今天 12:26</span><span class="chev">›</span></div></section><button class="primary">确认记账</button></div></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 04</div><h2>统计 · 月报</h2><div class="note">业务图表青绿，AI 摘要蓝灰</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">统计</div><div class="square">□</div></div><div class="months"><span>六月</span><b>2026 年 7 月</b><span>八月</span></div><div class="metrics"><section class="panel metric"><span>收入</span><b class="income">¥8,640</b></section><section class="panel metric"><span>支出</span><b class="out">¥4,353</b></section><section class="panel metric"><span>结余</span><b>¥4,286</b></section></div><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">支出分类</b><span class="link">共 48 笔</span></div><div class="barRow"><span>餐饮</span><div class="bar"><i style="--w:78%"></i></div><b>¥1,420</b></div><div class="barRow"><span>购物</span><div class="bar"><i style="--w:54%"></i></div><b>¥986</b></div><div class="barRow"><span>交通</span><div class="bar"><i style="--w:34%"></i></div><b>¥628</b></div><div class="barRow"><span>居住</span><div class="bar"><i style="--w:26%"></i></div><b>¥480</b></div></section><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">预算进度</b><span class="budgetVal">63%</span></div><div class="sub">本月预算 ¥6,200，剩余 ¥1,847</div><div class="track"><i></i></div></section><section class="panel aiReport"><div class="aiHead">✦ 小记月报</div><strong>这个月花得更稳了，结余比上月多 12%</strong><p>餐饮支出下降 186 元，交通预算仍有 372 元可用。以上金额均来自当前账本。</p></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div class="on"><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 05</div><h2>我的</h2><div class="note">账号、账本和数据入口</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">我的</div><div class="square">⚙</div></div><section class="panel profile"><div class="avatar">南</div><div><div class="profileName">南浔</div><div class="sub">已连续记账 26 天</div></div><span class="chev">›</span></section><section class="panel ledger"><div class="ledgerTop"><div class="ledgerName"><i class="dot"></i>日常账本</div><span class="link">切换</span></div><div class="ledgerStats"><div class="ledgerStat"><span>本月结余</span><b>¥4,286</b></div><div class="ledgerStat"><span>本月账单</span><b>48 笔</b></div></div></section><section class="panel settings"><div class="setting"><div class="ricon">预</div><div><b>预算管理</b><p>本月剩余 ¥1,847</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">类</div><div><b>分类管理</b><p>自定义图标与排序</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon ai">AI</div><div><b>AI 伙伴</b><p>小记 · 理性陪伴</p></div><span class="chev">›</span></div></section><section class="panel settings"><div class="setting"><div class="ricon">本</div><div><b>账本管理</b><p>新建、重命名和切换</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">数</div><div><b>账号与数据</b><p>导出、密码与账号管理</p></div><span class="chev">›</span></div></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div class="on"><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 06</div><h2>截屏识别确认</h2><div class="note">多账单、时间和分类确认</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen" style="padding-bottom:68px"><div class="top"><div class="square">‹</div><div class="title">确认识别结果</div><span class="action">2 笔</span></div><section class="panel captureState"><div class="stateMark">✓</div><div><b>图片解析完成</b><p>请核对金额、分类和原始交易时间</p></div></section><div class="warning"><span>△</span><span>第 2 笔只识别到日期，已使用当前时间，可点击时间重新选择。</span></div><section class="panel parsed"><div class="parsedHead"><span>账单 1</span><span class="confidence">识别可信</span></div><div class="parsedMain"><div class="cicon">餐</div><div><b>午餐</b><div class="sub">美团支付 · 餐饮</div></div><div class="parsedAmount">- ¥32.80</div></div><div class="chips"><span class="chip">餐饮</span><span class="chip">7月18日 12:36</span><span class="chip">修改</span></div></section><section class="panel parsed"><div class="parsedHead"><span>账单 2</span><span class="confidence" style="color:var(--warning)">需核对时间</span></div><div class="parsedMain"><div class="cicon">购</div><div><b>生活用品</b><div class="sub">支付宝 · 购物</div></div><div class="parsedAmount">- ¥86.50</div></div><div class="chips"><span class="chip">购物</span><span class="chip">今天 14:41</span><span class="chip">修改</span></div></section></div><div class="captureFooter"><button class="primary">确认保存 2 笔账单</button></div></div></article>
</section></main></body></html>
design/jizhi-theme-studio.html
+124
View File
@@ -0,0 +1,124 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>记之 · 高保真配色实验室</title>
<style>
:root{--brand:#00b386;--deep:#009973;--soft:#e6f7f1;--bg:#f6f7f9;--card:#ffffff;--ink:#191f26;--muted:#5e6772;--faint:#9aa3ad;--line:#eef0f3;--ai:#5b6bf5;--aiSoft:#eef0fe;--expense:#f0642d;--expenseSoft:#fff3ec;--warning:#f5a623;--warningSoft:#fff7e8;--page:#edf0f2;--shadow:rgba(25,31,38,.12)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--page);font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}.page{width:min(1380px,calc(100% - 32px));margin:auto;padding:52px 0 80px}.head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;margin:0 4px 34px}.kicker{margin-bottom:10px;color:var(--brand);font:800 11px "Noto Sans SC","Microsoft YaHei",sans-serif;letter-spacing:.16em}h1{margin:0;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(38px,5vw,66px);line-height:1}.intro{max-width:700px;margin:17px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.palette{display:flex;gap:9px;padding:13px;border:1px solid var(--line);border-radius:17px;background:#fff}.palette i{width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(360px,1fr));gap:26px 22px;align-items:start}.case{padding:17px 15px 21px;border:1px solid #dce3e0;border-radius:23px;background:#fff}.caseHead{display:flex;justify-content:space-between;width:min(100%,370px);margin:0 auto 14px}.idx{color:var(--brand);font:800 10px "Noto Sans SC","Microsoft YaHei",sans-serif;letter-spacing:.14em}.case h2{margin:5px 0 3px;font-size:20px}.note{color:var(--muted);font-size:11px}.tag{align-self:flex-start;padding:5px 9px;border:1px solid var(--brand);border-radius:999px;color:var(--brand);background:var(--soft);font-size:9px;font-weight:800}
.phone{position:relative;width:min(100%,370px);height:780px;margin:auto;overflow:hidden;border:7px solid #1d2422;border-radius:43px;background:var(--bg);box-shadow:0 18px 36px var(--shadow)}.status{display:flex;justify-content:space-between;height:34px;padding:8px 19px 0;font-size:10px;font-weight:800}.sys{letter-spacing:2px}.screen{height:calc(100% - 34px);overflow:hidden;padding:8px 16px 82px;background:var(--bg)}.top{display:flex;align-items:center;justify-content:space-between;min-height:42px;margin-bottom:12px}.title{font-size:16px;font-weight:800}.brand{display:flex;align-items:center;gap:9px}.logo{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;object-fit:cover}.brand b{font-family:"Noto Serif SC","Songti SC",serif;font-size:18px}.micro,.sub{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.45}.square{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px}.action{color:var(--brand);font-size:10px;font-weight:800}.panel{border:1px solid var(--line);border-radius:17px;background:#fff}.st{font-size:11px;font-weight:800}.link{color:var(--brand);font-size:8px;font-weight:800}.section{display:flex;justify-content:space-between;align-items:center;margin:13px 1px 4px}
.hero{padding:17px 18px;border-radius:19px;color:#fff;background:var(--brand)}.hero small{color:#d9efeb}.heroValue{margin:5px 0 14px;font:700 29px/1.1 "Noto Sans SC","Microsoft YaHei",sans-serif}.heroMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.heroMeta span{color:#c9e6e0;font-size:8px}.heroMeta b{display:block;margin-top:3px;color:#fff;font:700 11px "Noto Sans SC","Microsoft YaHei",sans-serif}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:11px 0}.quick>div{padding:9px 2px 8px;border:1px solid var(--line);border-radius:14px;text-align:center;background:#fff}.qicon,.cicon,.ricon{display:grid;place-items:center;color:var(--brand);background:var(--soft)}.qicon{width:28px;height:28px;margin:0 auto 5px;border-radius:9px;font-size:13px}.quick span{font-size:8px;font-weight:700}.budget{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 13px}.track{height:5px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--soft)}.track i{display:block;width:var(--w,63%);height:100%;background:var(--brand)}.budgetVal{color:var(--brand);font:800 16px "Noto Sans SC","Microsoft YaHei",sans-serif}
.tx{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.cicon{width:34px;height:34px;border-radius:11px;font-size:12px;font-weight:800}.tx b{font-size:10px}.tx small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.money{font:800 11px "Noto Sans SC","Microsoft YaHei",sans-serif}.out{color:var(--expense)}.income{color:var(--brand)}.nav{position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);height:68px;padding:8px 9px 9px;border-top:1px solid var(--line);background:#fff}.nav>div{display:grid;place-items:center;gap:2px;color:var(--faint);font-size:8px}.nav b{font-size:14px}.nav .on{color:var(--brand);font-weight:800}.nav .add{transform:translateY(-15px)}.fab{display:grid;width:42px;height:42px;place-items:center;border:4px solid var(--bg);border-radius:50%;color:#fff;background:var(--brand);box-shadow:0 7px 15px var(--shadow);font-size:20px}
.chat{display:grid;grid-template-rows:auto 1fr auto;padding:8px 13px 14px}.person{display:flex;align-items:center;gap:8px}.aiAvatar{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:var(--ai);background:var(--aiSoft);font-size:16px}.online{color:var(--brand);font-size:8px}.log{overflow:hidden;padding:9px 3px}.stamp{margin-bottom:13px;color:var(--faint);font-size:8px;text-align:center}.msg{display:flex;gap:7px;margin-bottom:11px}.msg.me{justify-content:flex-end}.miniAI{display:grid;flex:0 0 25px;height:25px;place-items:center;border-radius:8px;color:var(--ai);background:var(--aiSoft);font-size:9px;font-weight:800}.bubble{max-width:77%;padding:10px 11px;border:1px solid var(--line);border-radius:6px 15px 15px 15px;background:#fff;font-size:10px;line-height:1.55}.me .bubble{border-color:var(--brand);border-radius:15px 6px 15px 15px;color:#fff;background:var(--brand)}.thinking{display:inline-flex;gap:6px;margin:0 0 11px 32px;padding:6px 9px;border-radius:99px;color:var(--ai);background:var(--aiSoft);font-size:8px;font-weight:700}.chatBill{margin:0 0 11px 32px;padding:11px;border-color:#cfd9e4}.billHead{display:flex;justify-content:space-between;margin-bottom:7px;color:var(--ai);font-size:8px;font-weight:800}.ok{padding:3px 7px;border-radius:99px;color:var(--brand);background:var(--soft)}.composer{display:grid;grid-template-columns:30px 1fr 30px 34px;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:18px;background:#fff}.composeBtn{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:10px;color:var(--muted);background:var(--bg)}.composeBtn.send{color:#fff;background:var(--brand)}.placeholder{color:var(--faint);font-size:9px}
.segments{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#fff}.seg{padding:9px;border-radius:9px;color:var(--muted);text-align:center;font-size:10px;font-weight:800}.seg.on{color:#fff;background:var(--brand)}.amount{padding:24px 0 18px;text-align:center}.amount small{color:var(--muted)}.amount b{display:block;margin-top:4px;color:var(--expense);font:700 38px/1.1 "Noto Sans SC","Microsoft YaHei",sans-serif}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin-top:10px}.cat{padding:7px 2px;border:1px solid transparent;border-radius:12px;text-align:center}.cat.on{border-color:var(--brand);background:var(--soft)}.cat .cicon{margin:0 auto 5px}.cat span{font-size:8px;font-weight:700}.form{margin-top:13px;padding:2px 13px}.formRow{display:grid;grid-template-columns:20px 67px 1fr 15px;align-items:center;gap:5px;min-height:42px;border-bottom:1px solid var(--line);font-size:9px}.formRow:last-child{border:0}.lab{color:var(--muted)}.val{text-align:right;font-weight:700}.primary{display:grid;width:100%;min-height:44px;margin-top:14px;place-items:center;border:0;border-radius:14px;color:#fff;background:var(--brand);font-size:11px;font-weight:800}
.months{display:flex;justify-content:center;gap:18px;margin:1px 0 11px;color:var(--muted);font-size:9px}.months b{color:var(--ink);font-size:11px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.metric{padding:11px 9px}.metric span{color:var(--muted);font-size:8px}.metric b{display:block;margin-top:5px;font:700 14px "Noto Sans SC","Microsoft YaHei",sans-serif}.chartCard{margin-top:10px;padding:13px}.barRow{display:grid;grid-template-columns:44px 1fr 43px;align-items:center;gap:7px;margin-top:10px;font-size:8px}.bar{height:7px;overflow:hidden;border-radius:99px;background:var(--soft)}.bar i{display:block;width:var(--w);height:100%;background:var(--brand)}.barRow b{font:700 9px "Noto Sans SC","Microsoft YaHei",sans-serif;text-align:right}.aiReport{margin-top:10px;padding:13px;border-color:#cfd9e4;background:var(--aiSoft)}.aiHead{color:var(--ai);font-size:9px;font-weight:800}.aiReport strong{display:block;margin-top:8px;font-size:12px;line-height:1.45}.aiReport p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.55}
.profile{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:11px;padding:14px}.avatar{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;color:#fff;background:var(--brand);font:800 20px serif}.profileName{font-size:14px;font-weight:800}.ledger{margin-top:10px;padding:13px}.ledgerTop{display:flex;justify-content:space-between}.ledgerName{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800}.dot{width:9px;height:9px;border-radius:3px;background:var(--brand)}.ledgerStats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.ledgerStat{padding:9px;border-radius:10px;background:var(--bg)}.ledgerStat span{color:var(--muted);font-size:8px}.ledgerStat b{display:block;margin-top:3px;font:700 12px "Noto Sans SC","Microsoft YaHei",sans-serif}.settings{margin-top:10px;padding:0 13px}.setting{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid var(--line)}.setting:last-child{border:0}.ricon{width:31px;height:31px;border-radius:10px;font-size:12px;font-weight:800}.ricon.ai{color:var(--ai);background:var(--aiSoft)}.setting b{font-size:10px}.setting p{margin:2px 0 0;color:var(--muted);font-size:8px}.chev{color:var(--faint)}
.captureState{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:10px 11px;color:var(--deep);background:var(--soft)}.stateMark{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;color:#fff;background:var(--brand)}.captureState b{font-size:9px}.captureState p{margin:2px 0 0;color:var(--muted);font-size:8px}.warning{display:flex;gap:7px;margin-bottom:9px;padding:9px 10px;border:1px solid #f1d79e;border-radius:12px;color:var(--warning);background:var(--warningSoft);font-size:8px;line-height:1.45}.parsed{margin-bottom:9px;padding:12px}.parsedHead{display:flex;justify-content:space-between;margin-bottom:9px;font-size:9px;font-weight:800}.confidence{color:var(--brand);font-size:8px}.parsedMain{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px}.parsedMain .cicon{width:38px;height:38px}.parsedAmount{color:var(--expense);font:800 16px "Noto Sans SC","Microsoft YaHei",sans-serif}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{padding:5px 7px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:var(--bg);font-size:8px}.captureFooter{position:absolute;right:13px;bottom:13px;left:13px}.captureFooter .primary{margin:0}
@media(max-width:1180px){.grid{grid-template-columns:repeat(2,minmax(350px,1fr))}}@media(max-width:790px){.page{width:min(100% - 18px,430px);padding:30px 0 52px}.head{grid-template-columns:1fr;gap:18px}.palette{justify-self:start}.grid{grid-template-columns:1fr;gap:18px}.case{padding:15px 9px 18px}.phone{height:760px}}
/* Theme studio controls. App mockup geometry stays unchanged. */
body{padding-left:326px;transition:padding-left .22s ease}.page{width:min(1380px,calc(100% - 36px));padding-top:42px}.studio{position:fixed;z-index:20;inset:0 auto 0 0;width:326px;overflow:auto;border-right:1px solid #dfe3e7;background:#fff;color:#191f26;box-shadow:8px 0 24px rgba(25,31,38,.06)}.studioInner{padding:22px 18px 28px}.studioBrand{display:flex;align-items:center;gap:11px;padding-bottom:18px;border-bottom:1px solid #eef0f3}.studioBrand img{width:42px;height:42px;border:1px solid #e6e9ed;border-radius:12px}.studioBrand b{display:block;font-size:15px}.studioBrand span{display:block;margin-top:3px;color:#7b8490;font-size:10px}.studioTitle{display:flex;align-items:end;justify-content:space-between;margin:20px 0 10px}.studioTitle b{font-size:12px}.studioTitle span{color:#8a939e;font-size:9px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 8px;border:1px solid #e7eaee;border-radius:11px;background:#fff;color:#303741;font:700 10px inherit;cursor:pointer}.preset:hover,.preset.active{border-color:var(--preview,#00b386);box-shadow:inset 0 0 0 1px var(--preview,#00b386)}.presetDot{width:17px;height:17px;border:4px solid var(--softPreview,#e6f7f1);border-radius:6px;background:var(--preview,#00b386)}.tokenGroups{display:grid;gap:15px;margin-top:18px}.tokenGroup{display:grid;gap:7px}.tokenGroup h3{margin:0;color:#89919b;font-size:9px;font-weight:800;letter-spacing:.08em}.tokenRow{display:grid;grid-template-columns:78px 31px 1fr;align-items:center;gap:8px}.tokenRow label{font-size:10px;font-weight:700}.tokenRow input[type=color]{width:31px;height:31px;padding:2px;border:1px solid #dfe3e7;border-radius:9px;background:#fff;cursor:pointer}.tokenRow input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}.tokenRow input[type=text]{min-width:0;height:31px;padding:0 8px;border:1px solid #e1e5e9;border-radius:9px;outline:0;color:#424a55;background:#f8f9fa;font:700 10px ui-monospace,Consolas,monospace;text-transform:uppercase}.tokenRow input[type=text]:focus{border-color:#98a2ad;background:#fff}.tokenBlock{margin-bottom:5px;padding:9px 10px;border:1px solid #eef0f3;border-radius:12px;background:#fafbfc}.tokenSliders{display:grid;grid-template-columns:28px 1fr 26px 28px 1fr 26px 28px 1fr 26px;align-items:center;gap:4px;margin-top:7px}.tokenSliders label{font-size:8px;color:#89919b;font-weight:700}.tokenSliders span{font-size:8px;color:#424a55;font-weight:700;text-align:right}.tokenSliders input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#e1e5e9;border-radius:2px;outline:none;cursor:pointer}.tokenSliders input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:#424a55;box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer}.contrast{display:grid;gap:7px;margin-top:18px;padding:12px;border:1px solid #e7eaee;border-radius:13px;background:#f8f9fa}.contrastHead{display:flex;justify-content:space-between;font-size:10px;font-weight:800}.contrastGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.contrastItem{padding:7px;border-radius:8px;background:#fff;font-size:8px}.contrastItem b{display:block;margin-top:2px;font-size:11px}.contrastItem.pass b{color:#14805e}.contrastItem.fail b{color:#c23e35}.studioActions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.studioButton{min-height:38px;border:1px solid #dfe3e7;border-radius:11px;background:#fff;color:#303741;font:800 10px inherit;cursor:pointer}.studioButton.primaryAction{border-color:#20252b;color:#fff;background:#20252b}.studioHint{margin:12px 2px 0;color:#8b949f;font-size:9px;line-height:1.55}.toast{position:fixed;z-index:40;left:344px;bottom:22px;padding:10px 14px;border-radius:11px;color:#fff;background:#20252b;font-size:11px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}.toast.show{opacity:1;transform:none}.studioToggle{display:none;position:fixed;z-index:30;right:14px;bottom:14px;width:48px;height:48px;border:0;border-radius:15px;color:#fff;background:#20252b;font-size:18px;box-shadow:0 10px 24px rgba(25,31,38,.2)}
.panel,.quick>div,.square,.composer,.segments,.nav,.case{background:var(--card)}.screen,.phone{background:var(--bg)}.hero small,.heroMeta span{color:rgba(255,255,255,.78)}.aiReport,.thinking,.miniAI,.aiAvatar,.ricon.ai{background:var(--aiSoft)}.chatBill,.aiReport{border-color:var(--ai)}.warning{border-color:var(--warning)}.cicon.food{color:#d85b37;background:#fff0e9}.cicon.transit{color:#168f8a;background:#e7f7f5}.cicon.salary{color:#17855f;background:#e8f7f0}.cicon.shopping{color:#4078c9;background:#edf3fc}.cicon.housing{color:#9b7138;background:#f8f0e3}.cicon.gift{color:#c25174;background:#fbeaf0}.cicon.fun{color:#7e5fc4;background:#f1edfb}.cicon.cardcat{color:#5a6877;background:#eef1f4}.livePalette i{background:var(--swatch)}
@media(max-width:1500px) and (min-width:981px){.grid{grid-template-columns:repeat(2,minmax(350px,1fr))}}@media(max-width:980px){body{padding-left:0}.studio{transform:translateX(-104%);transition:transform .22s ease}.studio.open{transform:none}.studioToggle{display:grid;place-items:center}.toast{left:16px;bottom:76px}.page{width:min(100% - 18px,760px)}.grid{grid-template-columns:1fr}.head{grid-template-columns:1fr}.palette{justify-self:start}}
</style></head>
<body>
<aside class="studio" id="studio"><div class="studioInner">
<div class="studioBrand"><img src="frontend/assets/branding/jizhi-app-icon-centered.png" alt="记之"><div><b>记之主题编辑器</b><span>实时预览 · 不修改 App</span></div></div>
<div class="studioTitle"><b>快速方案</b><span>全部为纯色</span></div>
<div class="presets" id="presets"></div>
<div class="tokenGroups" id="tokenGroups"></div>
<div class="contrast"><div class="contrastHead"><span>可读性检查</span><span>WCAG 对比度</span></div><div class="contrastGrid" id="contrastGrid"></div></div>
<div class="studioActions"><button class="studioButton" id="resetTheme">恢复当前配色</button><button class="studioButton primaryAction" id="copyTheme">复制色板 JSON</button></div>
<p class="studioHint">颜色只保存在当前浏览器。拖动 H/S/L 滑块可按色相、饱和度、明度微调每个色值。分类图标保留独立颜色，避免所有账单都变成同一种色块。</p>
</div></aside>
<button class="studioToggle" id="studioToggle" aria-label="打开配色编辑器">🎨</button>
<div class="toast" id="toast">色板已复制</div><main class="page"><header class="head"><div><div class="kicker">JIZHI THEME STUDIO · LIVE</div><h1>记之 · 高保真配色实验室</h1><p class="intro">保持当前 App 的页面结构，只调整颜色。使用左侧面板实时修改品牌色、AI 色、背景、卡片、文字和语义色，六个页面会同步预览。全稿只使用纯色。</p></div><div class="palette livePalette"><i data-swatch="bg"></i><i data-swatch="card"></i><i data-swatch="brand"></i><i data-swatch="ai"></i><i data-swatch="ink"></i></div></header><section class="grid">
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 01</div><h2>首页 · 明细</h2><div class="note">结余、预算和今日账单</div></div><span class="tag">主视觉</span></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="brand"><img class="logo" src="frontend/assets/branding/jizhi-app-icon-centered.png"><div><b>记之</b><div class="micro">日常账本</div></div></div><div class="square">•••</div></div><section class="hero"><small>七月结余</small><div class="heroValue">¥ 4,286.50</div><div class="heroMeta"><span>收入<b>¥ 8,640</b></span><span>支出<b>¥ 4,353</b></span><span>共计<b>48 笔</b></span></div></section><div class="quick"><div><i class="qicon">声</i><span>语音记账</span></div><div><i class="qicon">拍</i><span>拍照识别</span></div><div><i class="qicon">截</i><span>截屏记账</span></div><div><i class="qicon">问</i><span>问一问</span></div></div><section class="panel budget"><div><b class="st">本月预算</b><div class="sub">已使用 63%，当前节奏正常</div><div class="track"><i></i></div></div><div class="budgetVal">¥ 1,847</div></section><div class="section"><b class="st">今天</b><span class="link">全部明细</span></div><div class="tx"><div class="cicon food">餐</div><div><b>午餐</b><small>餐饮 · 12:26</small></div><div class="money out">- ¥28</div></div><div class="tx"><div class="cicon transit">行</div><div><b>地铁</b><small>交通 · 08:41</small></div><div class="money out">- ¥4</div></div><div class="tx"><div class="cicon salary">收</div><div><b>稿费到账</b><small>兼职 · 07:30</small></div><div class="money income">+ ¥680</div></div></div><nav class="nav"><div class="on"><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 02</div><h2>AI 聊天</h2><div class="note">AI 色仅标识 AI 身份与状态</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen chat"><div class="top"><div class="person"><div class="square">‹</div><div class="aiAvatar">✦</div><div><b class="title">小记</b><div class="online">已连接 · 日常账本</div></div></div><div class="square">•••</div></div><div class="log"><div class="stamp">今天 14:28</div><div class="msg me"><div class="bubble">今天兼职赚了 680 元，午饭花了 28。</div></div><div class="thinking">● 正在核对账本分类</div><div class="msg"><div class="miniAI">记</div><div class="bubble">已识别到 2 笔：兼职收入 680 元、餐饮支出 28 元。</div></div><section class="panel chatBill"><div class="billHead"><span>✦ AI 入账结果</span><span class="ok">已记录</span></div><div class="tx"><div class="cicon salary">收</div><div><b>兼职收入</b><small>今天 14:28</small></div><div class="money income">+ ¥680</div></div><div class="tx"><div class="cicon food">餐</div><div><b>午饭</b><small>餐饮 · 14:28</small></div><div class="money out">- ¥28</div></div></section><div class="msg"><div class="miniAI">记</div><div class="bubble">本月收入是 8,640 元，结余 4,286.50 元。</div></div></div><div class="composer"><button class="composeBtn">⌨</button><div class="placeholder">说说今天的收入或支出...</div><button class="composeBtn">☺</button><button class="composeBtn send">↑</button></div></div></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 03</div><h2>记一笔</h2><div class="note">纯色切换、分类和确认操作</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="square">‹</div><div class="title">记一笔</div><span class="action">日常账本</span></div><div class="segments"><div class="seg on">支出</div><div class="seg">收入</div></div><div class="amount"><small>金额</small><b>¥ 28.00</b></div><b class="st">选择分类</b><div class="cats"><div class="cat on"><div class="cicon food">餐</div><span>餐饮</span></div><div class="cat"><div class="cicon shopping">购</div><span>购物</span></div><div class="cat"><div class="cicon transit">行</div><span>交通</span></div><div class="cat"><div class="cicon housing">住</div><span>居住</span></div><div class="cat"><div class="cicon gift">礼</div><span>人情</span></div><div class="cat"><div class="cicon cardcat">卡</div><span>账单</span></div><div class="cat"><div class="cicon fun">娱</div><span>娱乐</span></div><div class="cat"><div class="cicon">•••</div><span>其他</span></div></div><section class="panel form"><div class="formRow"><span>✎</span><span class="lab">备注</span><span class="val">园区食堂</span><span class="chev">›</span></div><div class="formRow"><span>▭</span><span class="lab">支付方式</span><span class="val">微信支付</span><span class="chev">›</span></div><div class="formRow"><span>□</span><span class="lab">时间</span><span class="val">今天 12:26</span><span class="chev">›</span></div></section><button class="primary">确认记账</button></div></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 04</div><h2>统计 · 月报</h2><div class="note">业务图表使用品牌色，AI 摘要使用 AI 色</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">统计</div><div class="square">□</div></div><div class="months"><span>六月</span><b>2026 年 7 月</b><span>八月</span></div><div class="metrics"><section class="panel metric"><span>收入</span><b class="income">¥8,640</b></section><section class="panel metric"><span>支出</span><b class="out">¥4,353</b></section><section class="panel metric"><span>结余</span><b>¥4,286</b></section></div><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">支出分类</b><span class="link">共 48 笔</span></div><div class="barRow"><span>餐饮</span><div class="bar"><i style="--w:78%"></i></div><b>¥1,420</b></div><div class="barRow"><span>购物</span><div class="bar"><i style="--w:54%"></i></div><b>¥986</b></div><div class="barRow"><span>交通</span><div class="bar"><i style="--w:34%"></i></div><b>¥628</b></div><div class="barRow"><span>居住</span><div class="bar"><i style="--w:26%"></i></div><b>¥480</b></div></section><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">预算进度</b><span class="budgetVal">63%</span></div><div class="sub">本月预算 ¥6,200，剩余 ¥1,847</div><div class="track"><i></i></div></section><section class="panel aiReport"><div class="aiHead">✦ 小记月报</div><strong>这个月花得更稳了，结余比上月多 12%</strong><p>餐饮支出下降 186 元，交通预算仍有 372 元可用。以上金额均来自当前账本。</p></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div class="on"><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 05</div><h2>我的</h2><div class="note">账号、账本和数据入口</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">我的</div><div class="square">⚙</div></div><section class="panel profile"><div class="avatar">南</div><div><div class="profileName">南浔</div><div class="sub">已连续记账 26 天</div></div><span class="chev">›</span></section><section class="panel ledger"><div class="ledgerTop"><div class="ledgerName"><i class="dot"></i>日常账本</div><span class="link">切换</span></div><div class="ledgerStats"><div class="ledgerStat"><span>本月结余</span><b>¥4,286</b></div><div class="ledgerStat"><span>本月账单</span><b>48 笔</b></div></div></section><section class="panel settings"><div class="setting"><div class="ricon">预</div><div><b>预算管理</b><p>本月剩余 ¥1,847</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">类</div><div><b>分类管理</b><p>自定义图标与排序</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon ai">AI</div><div><b>AI 伙伴</b><p>小记 · 理性陪伴</p></div><span class="chev">›</span></div></section><section class="panel settings"><div class="setting"><div class="ricon">本</div><div><b>账本管理</b><p>新建、重命名和切换</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">数</div><div><b>账号与数据</b><p>导出、密码与账号管理</p></div><span class="chev">›</span></div></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div class="on"><b>○</b><span>我的</span></div></nav></div></article>
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 06</div><h2>截屏识别确认</h2><div class="note">多账单、时间和分类确认</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen" style="padding-bottom:68px"><div class="top"><div class="square">‹</div><div class="title">确认识别结果</div><span class="action">2 笔</span></div><section class="panel captureState"><div class="stateMark">✓</div><div><b>图片解析完成</b><p>请核对金额、分类和原始交易时间</p></div></section><div class="warning"><span>△</span><span>第 2 笔只识别到日期，已使用当前时间，可点击时间重新选择。</span></div><section class="panel parsed"><div class="parsedHead"><span>账单 1</span><span class="confidence">识别可信</span></div><div class="parsedMain"><div class="cicon food">餐</div><div><b>午餐</b><div class="sub">美团支付 · 餐饮</div></div><div class="parsedAmount">- ¥32.80</div></div><div class="chips"><span class="chip">餐饮</span><span class="chip">7月18日 12:36</span><span class="chip">修改</span></div></section><section class="panel parsed"><div class="parsedHead"><span>账单 2</span><span class="confidence" style="color:var(--warning)">需核对时间</span></div><div class="parsedMain"><div class="cicon shopping">购</div><div><b>生活用品</b><div class="sub">支付宝 · 购物</div></div><div class="parsedAmount">- ¥86.50</div></div><div class="chips"><span class="chip">购物</span><span class="chip">今天 14:41</span><span class="chip">修改</span></div></section></div><div class="captureFooter"><button class="primary">确认保存 2 笔账单</button></div></div></article>
</section></main><script>
const tokenMeta = {
brand:['主品牌色','品牌与操作'], deep:['品牌深色','强调文字'], soft:['品牌浅底','选中背景'],
ai:['AI 标识色','AI 身份'], aiSoft:['AI 浅底','AI 卡片'], bg:['页面背景','App 底色'],
card:['卡片颜色','内容承载'], ink:['正文颜色','主文字'], muted:['次级文字','说明文字'],
faint:['弱文字','占位与图标'], line:['边框颜色','分割线'], expense:['支出颜色','金额与错误'],
warning:['警告颜色','需核对状态'], warningSoft:['警告浅底','提示背景']
};
const groups = [
['品牌与 AI',['brand','deep','soft','ai','aiSoft']],
['界面基础',['bg','card','ink','muted','faint','line']],
['业务语义',['expense','warning','warningSoft']]
];
const currentTheme = {brand:'#00B386',deep:'#009973',soft:'#E6F7F1',ai:'#5B6BF5',aiSoft:'#EEF0FE',bg:'#F6F7F9',card:'#FFFFFF',ink:'#191F26',muted:'#5E6772',faint:'#9AA3AD',line:'#EEF0F3',expense:'#F0642D',warning:'#F5A623',warningSoft:'#FFF7E8'};
const presets = [
{name:'当前薄荷',brand:'#00B386',deep:'#009973',soft:'#E6F7F1',ai:'#5B6BF5',aiSoft:'#EEF0FE',bg:'#F6F7F9',card:'#FFFFFF',ink:'#191F26',muted:'#5E6772',faint:'#9AA3AD',line:'#EEF0F3',expense:'#F0642D',warning:'#F5A623',warningSoft:'#FFF7E8'},
{name:'清晰蓝白',brand:'#2F6BFF',deep:'#2456D8',soft:'#EAF0FF',ai:'#4859B8',aiSoft:'#EEF0FA',bg:'#F5F7FA',card:'#FFFFFF',ink:'#172033',muted:'#667085',faint:'#98A2B3',line:'#E5E9F0',expense:'#D95040',warning:'#C88412',warningSoft:'#FFF5E3'},
{name:'暖纸橙棕',brand:'#C45D26',deep:'#9E451B',soft:'#FBECE4',ai:'#416A8A',aiSoft:'#EAF0F4',bg:'#F5F2EC',card:'#FFFEFB',ink:'#28231F',muted:'#746B62',faint:'#A39A91',line:'#E8E1D8',expense:'#C6473A',warning:'#A96A12',warningSoft:'#F8EDD9'},
{name:'墨黑工具',brand:'#25282C',deep:'#111315',soft:'#ECEEF0',ai:'#4967A9',aiSoft:'#EBEFF7',bg:'#F3F4F5',card:'#FFFFFF',ink:'#181A1D',muted:'#626A73',faint:'#9AA1A9',line:'#E3E6E9',expense:'#D24B3C',warning:'#B47717',warningSoft:'#F6EEDC'},
{name:'湖蓝青灰',brand:'#147D89',deep:'#0E626C',soft:'#E5F2F3',ai:'#536AA6',aiSoft:'#ECEFF8',bg:'#F3F6F6',card:'#FFFFFF',ink:'#192326',muted:'#647276',faint:'#98A3A6',line:'#E1E7E8',expense:'#D25443',warning:'#B87917',warningSoft:'#F7EFDC'},
{name:'柔和莓红',brand:'#B44B68',deep:'#913A53',soft:'#F9EAF0',ai:'#5668A9',aiSoft:'#ECEFF8',bg:'#F7F4F5',card:'#FFFFFF',ink:'#271D21',muted:'#74656B',faint:'#A5979D',line:'#EAE1E4',expense:'#C73F35',warning:'#B47717',warningSoft:'#F8EFDC'}
];
const root = document.documentElement;
const normalize = value => /^#[0-9a-f]{6}$/i.test(value) ? value.toUpperCase() : null;
/* HSL helpers */
function rgb(hex){const v=parseInt(hex.slice(1),16);return [(v>>16)&255,(v>>8)&255,v&255]}
function hslFromHex(hex){const[r,g,b]=rgb(hex).map(v=>v/255);const max=Math.max(r,g,b),min=Math.min(r,g,b);let h=0;const l=(max+min)/2;if(max!==min){const d=max-min;const s=l>.5?d/(2-max-min):d/(max+min);h=r===max?((g-b)/d+(g<b?6:0))/6:g===max?((b-r)/d+2)/6:((r-g)/d+4)/6;return[Math.round(h*360),Math.round(s*100),Math.round(l*100)]}return[0,0,Math.round(l*100)]}
function hexFromHsl(h,s,l){h/=360;s/=100;l/=100;const a=s*Math.min(l,1-l);const f=n=>{n=(n+h*12)%12;const t=Math.round((l-a*Math.max(-1,Math.min(n-3,9-n,1)))*255);return Math.max(0,Math.min(255,t))};return'#'+[f(0),f(8),f(4)].map(v=>v.toString(16).padStart(2,'0').toUpperCase()).join('')}
function luminance(hex){return rgb(hex).map(v=>{v/=255;return v<=.03928?v/12.92:Math.pow((v+.055)/1.055,2.4)}).reduce((sum,v,i)=>sum+v*[.2126,.7152,.0722][i],0)}
function ratio(a,b){const x=luminance(a),y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)}
/* Core */
function setToken(key,value,persist=true){const hex=normalize(value);if(!hex)return false;root.style.setProperty('--'+key,hex);const color=document.querySelector(`[data-color="${key}"]`);const text=document.querySelector(`[data-text="${key}"]`);if(color)color.value=hex;if(text)text.value=hex;document.querySelectorAll(`[data-swatch="${key}"]`).forEach(el=>el.style.setProperty('--swatch',hex));if(persist)save();updateContrast();return true}
function applyTheme(theme,persist=true){Object.keys(tokenMeta).forEach(key=>setToken(key,theme[key]||currentTheme[key],false));document.querySelectorAll('.preset').forEach(button=>button.classList.toggle('active',button.dataset.name===theme.name));updateAllSliders();if(persist)save()}
function readTheme(){return Object.fromEntries(Object.keys(tokenMeta).map(key=>[key,getComputedStyle(root).getPropertyValue('--'+key).trim().toUpperCase()]))}
function save(){localStorage.setItem('jizhi-theme-studio',JSON.stringify(readTheme()))}
/* Render controls with HSL sliders per token */
function renderControls(){
document.getElementById('presets').innerHTML=presets.map(p=>`<button class="preset" data-name="${p.name}" style="--preview:${p.brand};--softPreview:${p.soft}"><i class="presetDot"></i>${p.name}</button>`).join('');
document.getElementById('tokenGroups').innerHTML=groups.map(([name,keys])=>`<section class="tokenGroup"><h3>${name}</h3>${keys.map(key=>`<div class="tokenBlock"><div class="tokenRow"><label>${tokenMeta[key][0]}</label><input type="color" data-color="${key}" aria-label="${tokenMeta[key][0]}"><input type="text" data-text="${key}" maxlength="7" aria-label="${tokenMeta[key][0]} HEX"></div><div class="tokenSliders"><label>色相</label><input type="range" data-hue="${key}" min="0" max="360" value="0" aria-label="色相"><span data-hue-val="${key}">0</span><label>饱和度</label><input type="range" data-sat="${key}" min="0" max="100" value="0" aria-label="饱和度"><span data-sat-val="${key}">0</span><label>明度</label><input type="range" data-lit="${key}" min="0" max="100" value="0" aria-label="明度"><span data-lit-val="${key}">0</span></div></div>`).join('')}</section>`).join('');
}
function updateSliders(key){
const el = document.querySelector(`[data-text="${key}"]`); if (!el) return;
const hex = normalize(el.value); if (!hex) return;
const [h,s,l] = hslFromHex(hex);
const kinds = ['hue','sat','lit'];
[h,s,l].forEach((v,i) => {
const slider = document.querySelector(`[data-${kinds[i]}="${key}"]`);
const span = document.querySelector(`[data-${kinds[i]}-val="${key}"]`);
if (slider) slider.value = v;
if (span) span.textContent = v;
});
}
function updateAllSliders(){Object.keys(tokenMeta).forEach(key=>updateSliders(key))}
function updateContrast(){const t=readTheme();const checks=[['正文 / 卡片',t.ink,t.card,4.5],['次文 / 卡片',t.muted,t.card,4.5],['白字 / 主色','#FFFFFF',t.brand,4.5],['支出 / 卡片',t.expense,t.card,3]];document.getElementById('contrastGrid').innerHTML=checks.map(([name,a,b,min])=>{const value=ratio(a,b);return `<div class="contrastItem ${value>=min?'pass':'fail'}"><span>${name}</span><b>${value.toFixed(2)} : 1</b></div>`}).join('')}
function toast(message){const el=document.getElementById('toast');el.textContent=message;el.classList.add('show');clearTimeout(window.toastTimer);window.toastTimer=setTimeout(()=>el.classList.remove('show'),1600)}
renderControls();
/* Events */
document.getElementById('presets').addEventListener('click',event=>{const button=event.target.closest('.preset');if(!button)return;const preset=presets.find(item=>item.name===button.dataset.name);applyTheme(preset);toast('已应用 '+preset.name)});
// color picker / hex text
document.getElementById('tokenGroups').addEventListener('input',event=>{const key=event.target.dataset.color||event.target.dataset.text;if(!key)return;setToken(key,event.target.value);updateSliders(key)});
document.getElementById('tokenGroups').addEventListener('change',event=>{const key=event.target.dataset.text;if(key&&!setToken(key,event.target.value)){event.target.value=readTheme()[key];toast('请输入 6 位十六进制颜色')}});
// H / S / L sliders —— build hex on the fly
document.getElementById('tokenGroups').addEventListener('input',event=>{
const kind = event.target.dataset.hue !== undefined ? 'hue' : event.target.dataset.sat !== undefined ? 'sat' : event.target.dataset.lit !== undefined ? 'lit' : null;
if (!kind) return;
const key = event.target.dataset[kind]; if (!key) return;
const hue = document.querySelector(`[data-hue="${key}"]`);
const sat = document.querySelector(`[data-sat="${key}"]`);
const lit = document.querySelector(`[data-lit="${key}"]`);
if (!hue || !sat || !lit) return;
const h = parseInt(hue.value), s = parseInt(sat.value), l = parseInt(lit.value);
const hex = hexFromHsl(h, s, l); if (!hex) return;
setToken(key, hex);
document.querySelector(`[data-color="${key}"]`).value = hex;
document.querySelector(`[data-hue-val="${key}"]`).textContent = h;
document.querySelector(`[data-sat-val="${key}"]`).textContent = s;
document.querySelector(`[data-lit-val="${key}"]`).textContent = l;
});
document.getElementById('resetTheme').addEventListener('click',()=>{localStorage.removeItem('jizhi-theme-studio');applyTheme({...currentTheme,name:'当前薄荷'});toast('已恢复当前 App 配色')});
document.getElementById('copyTheme').addEventListener('click',async()=>{await navigator.clipboard.writeText(JSON.stringify(readTheme(),null,2));toast('色板 JSON 已复制')});
document.getElementById('studioToggle').addEventListener('click',()=>document.getElementById('studio').classList.toggle('open'));
let stored=null;try{stored=JSON.parse(localStorage.getItem('jizhi-theme-studio'))}catch(_){stored=null}applyTheme(stored&&Object.keys(stored).length?stored:{...currentTheme,name:'当前薄荷'},false);
</script></body></html>
design/miaoji-latest.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

design/ui-mockup.html
+1918
View File
File diff suppressed because it is too large Load Diff
design/ux-prototype.html
+1015
View File
File diff suppressed because it is too large Load Diff