family-ops-workbench.html 68 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>家庭运营工作台 · 设计草稿</title>
  7. <style>
  8. /* ============================================================
  9. 设计令牌(单一事实源)—— 严格镜像 admin-tokens.css 语义
  10. 三层:基色 -> 语义 -> 组件。组件层禁止裸 hex / 裸 px / 裸 ms。
  11. ============================================================ */
  12. :root {
  13. /* ---- 品牌主色与功能色(Ant Design 5 语义) ---- */
  14. --c-primary: #1677FF;
  15. --c-primary-hover: #0958D9; /* 加深:白字 6.16:1,且 hover 不浅于主按钮默认态 */
  16. --c-primary-active: #0958D9;
  17. --c-primary-disabled: #A0C4FF;
  18. --c-primary-deep: #0B5FCC; /* 主按钮填充:白字 5.96:1;--c-primary 保留作链接/下划线强调 */
  19. --c-success: #52C41A;
  20. --c-success-text: #237804; /* 加深:#237804 on #F6FFED = 5.44:1 */
  21. --c-success-bg: #F6FFED;
  22. --c-success-border: #B7EB8F;
  23. --c-warning: #FAAD14;
  24. --c-warning-bg: #FFFBE6; /* 警告徽标浅底 */
  25. --c-warning-text: #874D00; /* 深琥珀文字:#874D00 on #FFFBE6 = 6.53:1 */
  26. --c-danger: #FF4D4F;
  27. --c-danger-text: #CF1322;
  28. --c-danger-bg: #FFF1F0;
  29. --c-danger-border: #FFCCC7;
  30. --c-neutral: #909399; /* 沿用 Element 灰语义(非蓝) */
  31. --c-info-bg: #E6F4FF; /* 主色浅底:hero 卡 / 焦点态背景 */
  32. --c-info-border: #91CAFF; /* 主色浅描边:焦点环 / 选中边 */
  33. --c-info-text: #0958D9; /* 小号可点击文字(保证 AA ≥4.5:1) */
  34. --c-link-hover: #003EB3; /* link-toggle hover:更深蓝,白底 ≥7:1,仅作 :root 令牌 */
  35. --c-ring: rgba(9, 88, 217, 0.85); /* focus ring, ≥3:1 vs white */
  36. /* ---- 文字灰阶(rgba 体系,层次稳定) ---- */
  37. --t-primary: rgba(0, 0, 0, 0.88);
  38. --t-regular: rgba(0, 0, 0, 0.65);
  39. --t-secondary: rgba(0, 0, 0, 0.65); /* 加深:7.00:1,承载真实文字内容 */
  40. --t-placeholder: rgba(0, 0, 0, 0.25);
  41. --t-on-primary: #FFFFFF;
  42. --t-disabled: rgba(0, 0, 0, 0.25);
  43. /* ---- 边框与填充 ---- */
  44. --b-base: #D9D9D9;
  45. --b-light: #F0F0F0;
  46. --b-extra-light: #F5F5F5;
  47. --b-strong: #BFBFBF;
  48. --bw: 1px;
  49. /* ---- 背景 ---- */
  50. --bg-page: #F0F2F5;
  51. --bg-card: #FFFFFF;
  52. --bg-header: #FAFAFA;
  53. --bg-fill: #F5F5F5;
  54. --bg-hover: rgba(0, 0, 0, 0.04);
  55. --bg-selected: #E6F4FF;
  56. --bg-mask: rgba(0, 0, 0, 0.45);
  57. /* ---- 字体 ---- */
  58. --font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  59. --fs-sm: 12px;
  60. --fs-base: 14px;
  61. --fs-md: 14px;
  62. --fs-lg: 16px;
  63. --fs-xl: 20px;
  64. --fs-2xl: 24px;
  65. --fs-3xl: 28px;
  66. --lh-base: 1.5;
  67. /* ---- 间距(8px 基准,禁止非标值) ---- */
  68. --sp-1: 4px;
  69. --sp-2: 8px;
  70. --sp-3: 12px;
  71. --sp-4: 16px;
  72. --sp-5: 20px;
  73. --sp-6: 24px;
  74. --sp-7: 32px;
  75. --sp-8: 48px;
  76. /* ---- 圆角(禁止 >8px) ---- */
  77. --r-sm: 2px;
  78. --r-base: 4px;
  79. --r-control: 6px;
  80. --r-card: 8px;
  81. /* ---- 阴影(轻量化:阴影分层且罕见) ---- */
  82. --sh-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02);
  83. --sh-popup: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
  84. --sh-hover: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  85. /* ---- 动效令牌(≤200ms) ---- */
  86. --d-fast: 120ms;
  87. --d-base: 160ms;
  88. --d-slow: 200ms;
  89. --ease: cubic-bezier(0.4, 0, 0.2, 1);
  90. /* ---- 控件 / 图标尺寸 ---- */
  91. --w-input: 220px;
  92. --w-input-sm: 160px;
  93. --w-select: 150px;
  94. --w-select-sm: 120px;
  95. --w-select-lg: 180px;
  96. --icon-sm: 16px;
  97. --icon-md: 20px;
  98. --icon-lg: 24px;
  99. --qe-icon-box: 40px;
  100. --ring-1: 2px;
  101. --ring-2: 4px;
  102. --lift: -2px;
  103. --spinner: 14px;
  104. --stat-hero-w: 248px;
  105. --table-min: 1490px;
  106. --z-sticky: 5;
  107. --z-popup: 1000;
  108. /* ---- 表格列宽令牌(避免裸 px) ---- */
  109. --col-cb: 44px;
  110. --col-id: 72px;
  111. --col-name: 150px;
  112. --col-code: 116px;
  113. --col-time: 164px;
  114. --col-members: 86px;
  115. --col-reports: 86px;
  116. --col-plans: 84px;
  117. --col-tasks: 84px;
  118. --col-coupons: 96px;
  119. --col-active: 108px;
  120. --col-rate: 116px;
  121. --col-status: 92px;
  122. --col-op: 212px;
  123. /* ---- 组件尺寸令牌(杜绝裸 px) ---- */
  124. --vw: 1440px;
  125. --appbar-h: 60px;
  126. --bar-w: 3px;
  127. --ctrl-h: 32px;
  128. --ctrl-sm-h: 28px;
  129. --brand-mark: 28px;
  130. --avatar: 28px;
  131. --th-h: 46px;
  132. --sw-w: 44px;
  133. --sw-h: 22px;
  134. --sw-r: 11px;
  135. --sw-thumb: 18px;
  136. --sw-top: 2px;
  137. --sw-left: 2px;
  138. --sw-travel: 22px;
  139. --cb: 16px;
  140. --cb-ic: 12px;
  141. --rate-h: 6px;
  142. --rate-r: 3px;
  143. --rate-val-w: 38px;
  144. --dot: 6px;
  145. --pad-2: 2px;
  146. --status-lh: 20px;
  147. --menu-w: 148px;
  148. --menu-item-h: 34px;
  149. --pg-btn: 32px;
  150. --w-jump: 56px;
  151. --ls-code: 0.5px;
  152. --sr: 1px;
  153. --demo-tbl-w: 560px;
  154. --sh-appbar: 0 1px 4px rgba(0, 21, 41, 0.06);
  155. --sh-thumb: 0 1px 2px rgba(0, 0, 0, 0.2);
  156. }
  157. /* ============================================================
  158. 基础重置
  159. ============================================================ */
  160. * { box-sizing: border-box; }
  161. html, body { margin: 0; padding: 0; }
  162. body {
  163. font-family: var(--font-family);
  164. font-size: var(--fs-base);
  165. line-height: var(--lh-base);
  166. color: var(--t-primary);
  167. background: var(--bg-page);
  168. -webkit-font-smoothing: antialiased;
  169. }
  170. .screen { width: var(--vw); margin: 0 auto; background: var(--bg-page); }
  171. /* 图标基类 */
  172. .icon { width: var(--icon-md); height: var(--icon-md); display: inline-block; vertical-align: middle; flex: none; }
  173. .icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  174. .icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
  175. .icon--current { fill: currentColor; }
  176. .icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  177. /* ============================================================
  178. 顶部应用栏(grounding:呈现后台环境,非重构目标)
  179. ============================================================ */
  180. .appbar {
  181. height: var(--appbar-h); flex: none;
  182. display: flex; align-items: center; justify-content: space-between;
  183. padding: 0 var(--sp-6);
  184. background: var(--bg-card);
  185. border-bottom: var(--bw) solid var(--b-light);
  186. box-shadow: var(--sh-appbar);
  187. }
  188. .appbar__logo { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 600; color: var(--t-primary); }
  189. .appbar__logo .mark { width: var(--brand-mark); height: var(--brand-mark); border-radius: var(--r-control); background: var(--c-primary); color: var(--t-on-primary); display: flex; align-items: center; justify-content: center; }
  190. .appbar__right { display: flex; align-items: center; gap: var(--sp-4); color: var(--t-regular); }
  191. .appbar__user { display: flex; align-items: center; gap: var(--sp-2); }
  192. .appbar__avatar { width: var(--avatar); height: var(--avatar); border-radius: 50%; background: var(--bg-fill); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
  193. /* ============================================================
  194. 页面容器
  195. ============================================================ */
  196. .page { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
  197. /* 页头 */
  198. .page-header { display: flex; align-items: center; justify-content: space-between; flex: none; }
  199. .page-header__titles { display: flex; align-items: baseline; gap: var(--sp-3); }
  200. .page-title { font-size: var(--fs-xl); font-weight: 600; line-height: 1.4; color: var(--t-primary); margin: 0; }
  201. .page-subtitle { font-size: var(--fs-sm); color: var(--t-secondary); font-weight: 400; }
  202. .page-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
  203. /* 区块标题:14/500 + 3px 主色竖条 */
  204. .section-title {
  205. font-size: var(--fs-base); font-weight: 500; color: var(--t-primary);
  206. padding-left: var(--sp-2); border-left: var(--bar-w) solid var(--c-primary);
  207. margin: 0;
  208. }
  209. /* ============================================================
  210. 卡片
  211. ============================================================ */
  212. .card {
  213. background: var(--bg-card);
  214. border: var(--bw) solid var(--b-light);
  215. border-radius: var(--r-card);
  216. box-shadow: var(--sh-card);
  217. }
  218. .card__header {
  219. display: flex; align-items: center; justify-content: space-between;
  220. padding: var(--sp-5) var(--sp-6);
  221. border-bottom: var(--bw) solid var(--b-light);
  222. }
  223. .card__header .section-title { border-left: none; padding-left: 0; }
  224. .card__header-note { font-size: var(--fs-sm); color: var(--t-secondary); }
  225. .card__body { padding: var(--sp-6); }
  226. /* ============================================================
  227. 按钮(八态完整:default/hover/focus/active/disabled/loading/success/error)
  228. ============================================================ */
  229. .btn {
  230. display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  231. height: var(--ctrl-h); padding: 0 var(--sp-4);
  232. font-size: var(--fs-base); font-family: inherit; font-weight: 400; line-height: 1;
  233. border-radius: var(--r-control);
  234. border: var(--bw) solid transparent;
  235. cursor: pointer; white-space: nowrap;
  236. transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
  237. }
  238. .btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-1) var(--bg-card), 0 0 0 var(--ring-2) var(--c-ring); }
  239. .btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
  240. .btn--primary { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: var(--t-on-primary); }
  241. .btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
  242. .btn--primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); }
  243. .btn--primary.is-disabled, .btn--primary:disabled { background: var(--c-primary-disabled); border-color: var(--c-primary-disabled); color: var(--t-on-primary); cursor: not-allowed; }
  244. .btn--default { background: var(--bg-card); border-color: var(--b-base); color: var(--t-primary); }
  245. .btn--default:hover { color: var(--c-primary-hover); border-color: var(--c-primary-hover); }
  246. .btn--default:active { color: var(--c-primary-active); border-color: var(--c-primary-active); }
  247. .btn--default.is-disabled, .btn--default:disabled { background: var(--bg-card); border-color: var(--b-light); color: var(--t-disabled); cursor: not-allowed; }
  248. .btn--text { background: transparent; border-color: transparent; color: var(--c-info-text); height: var(--ctrl-h); padding: 0 var(--sp-2); }
  249. .btn--text:hover { color: var(--c-primary-hover); background: var(--bg-hover); }
  250. .btn--text:active { color: var(--c-primary-active); }
  251. .btn--text.is-disabled, .btn--text:disabled { color: var(--t-disabled); cursor: not-allowed; }
  252. /* success / error 语义态(用于提交结果等) */
  253. .btn--success { background: var(--c-success-text); border-color: var(--c-success-text); color: var(--t-on-primary); }
  254. .btn--error { background: var(--c-danger-text); border-color: var(--c-danger-text); color: var(--t-on-primary); }
  255. /* loading:文字透明,显示旋转 spinner */
  256. .btn.is-loading { color: transparent !important; cursor: default; position: relative; pointer-events: none; }
  257. .btn.is-loading::after {
  258. content: ""; position: absolute; top: 50%; left: 50%;
  259. width: var(--spinner); height: var(--spinner); margin: calc(var(--spinner) / -2) 0 0 calc(var(--spinner) / -2);
  260. border: var(--ring-1) solid currentColor; border-top-color: transparent; border-radius: 50%;
  261. animation: spin var(--d-slow) linear infinite;
  262. color: var(--t-on-primary);
  263. }
  264. .btn--default.is-loading::after { color: var(--c-primary); }
  265. @keyframes spin { to { transform: rotate(360deg); } }
  266. /* ============================================================
  267. 表单控件(input / select)—— 八态
  268. ============================================================ */
  269. .field { display: flex; flex-direction: column; gap: var(--sp-1); }
  270. .field__label { font-size: var(--fs-base); color: var(--t-regular); font-weight: 500; }
  271. .input, .select {
  272. height: var(--ctrl-h); padding: 0 var(--sp-3);
  273. font-size: var(--fs-base); font-family: inherit; color: var(--t-primary);
  274. background: var(--bg-card);
  275. border: var(--bw) solid var(--b-base);
  276. border-radius: var(--r-base);
  277. transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
  278. }
  279. .input::placeholder { color: var(--t-placeholder); }
  280. .input:hover, .select:hover { border-color: var(--c-primary-hover); }
  281. .input:focus, .input:focus-visible, .select:focus, .select:focus-visible {
  282. outline: none; border-color: var(--c-primary);
  283. box-shadow: 0 0 0 var(--ring-1) var(--c-ring);
  284. }
  285. .input.is-disabled, .select.is-disabled {
  286. background: var(--bg-fill); border-color: var(--b-light); color: var(--t-disabled); cursor: not-allowed;
  287. }
  288. .input.is-error, .select.is-error { border-color: var(--c-danger); }
  289. .input.is-error:focus { box-shadow: 0 0 0 var(--ring-1) var(--c-danger-bg); }
  290. .input--w { width: var(--w-input); }
  291. .input--sm { width: var(--w-input-sm); }
  292. .select--w { width: var(--w-select); }
  293. .select--sm { width: var(--w-select-sm); }
  294. .select--lg { width: var(--w-select-lg); }
  295. .field__error { font-size: var(--fs-sm); color: var(--c-danger-text); }
  296. .field__hint { font-size: var(--fs-sm); color: var(--t-secondary); }
  297. .input-wrap { position: relative; display: inline-flex; align-items: center; }
  298. .input-wrap .icon { position: absolute; right: var(--sp-3); color: var(--t-secondary); pointer-events: none; }
  299. /* 区间连接符 */
  300. .range-sep { color: var(--t-secondary); padding: 0 var(--sp-1); align-self: flex-end; height: var(--ctrl-h); display: inline-flex; align-items: center; }
  301. /* ============================================================
  302. 开关 Switch(启用状态)—— 八态
  303. ============================================================ */
  304. .switch { position: relative; display: inline-flex; align-items: center; width: var(--sw-w); height: var(--sw-h); cursor: pointer; }
  305. .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  306. .switch__track {
  307. width: var(--sw-w); height: var(--sw-h); border-radius: var(--sw-r);
  308. background: var(--b-strong);
  309. transition: background-color var(--d-base) var(--ease);
  310. }
  311. .switch__thumb {
  312. position: absolute; top: var(--sw-top); left: var(--sw-left);
  313. width: var(--sw-thumb); height: var(--sw-thumb); border-radius: 50%;
  314. background: var(--bg-card); box-shadow: var(--sh-thumb);
  315. transition: transform var(--d-base) var(--ease);
  316. }
  317. .switch input:checked ~ .switch__track { background: var(--c-primary); }
  318. .switch input:checked ~ .switch__thumb { transform: translateX(var(--sw-travel)); }
  319. .switch input:focus-visible ~ .switch__track { box-shadow: 0 0 0 var(--ring-1) var(--c-info-bg), 0 0 0 var(--ring-2) var(--c-ring); }
  320. .switch.is-disabled { cursor: not-allowed; opacity: 0.55; }
  321. .switch.is-loading .switch__thumb { animation: pulse var(--d-slow) var(--ease) infinite; }
  322. @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
  323. .switch__label { margin-left: var(--sp-2); font-size: var(--fs-base); color: var(--t-regular); }
  324. /* ============================================================
  325. 统计带(One Thing Leads:表格为主角,统计带为次级带状序列)
  326. 带内设置「主指标」(家庭总收益) 打破等权重卡片墙
  327. ============================================================ */
  328. .stat-band { display: flex; overflow: hidden; border-radius: var(--r-card); }
  329. .stat-hero {
  330. flex: 0 0 var(--stat-hero-w);
  331. background: var(--c-info-bg);
  332. padding: var(--sp-6);
  333. border-right: var(--bw) solid var(--b-light);
  334. display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2);
  335. }
  336. .stat-hero__label { font-size: var(--fs-sm); color: var(--t-regular); display: flex; align-items: center; gap: var(--sp-2); }
  337. .stat-hero__value { font-size: var(--fs-3xl); font-weight: 600; color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
  338. .stat-hero__sub { font-size: var(--fs-sm); color: var(--t-secondary); }
  339. .stat-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
  340. .stat-cell { padding: var(--sp-5) var(--sp-6); border-left: var(--bw) solid var(--b-light); display: flex; flex-direction: column; gap: var(--sp-2); }
  341. .stat-cell:nth-child(3n+1) { border-left: none; }
  342. .stat-cell:nth-child(n+4) { border-top: var(--bw) solid var(--b-light); }
  343. .stat-cell__label { font-size: var(--fs-sm); color: var(--t-secondary); display: flex; align-items: center; gap: var(--sp-1); }
  344. .stat-cell__value { font-size: var(--fs-2xl); font-weight: 600; color: var(--t-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
  345. .stat-cell__sub { font-size: var(--fs-sm); color: var(--t-secondary); }
  346. .stat-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--t-secondary); }
  347. .stat-note strong { color: var(--c-warning); font-weight: 600; }
  348. /* ============================================================
  349. 筛选条(去卡片化,底部细分割线分区)
  350. ============================================================ */
  351. .filter-bar { display: flex; flex-direction: column; gap: var(--sp-4); }
  352. .filter-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); }
  353. .filter-row--advanced { padding-top: var(--sp-4); border-top: var(--bw) solid var(--b-light); }
  354. .filter-spacer { flex: 1 1 auto; }
  355. .link-toggle { display: inline-flex; align-items: center; gap: var(--sp-1); background: none; border: none; cursor: pointer; color: var(--c-info-text); font-size: var(--fs-base); font-family: inherit; padding: var(--sp-1) 0; }
  356. .link-toggle:hover { color: var(--c-link-hover); text-decoration: underline; }
  357. .link-toggle:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; border-radius: var(--radius-2); }
  358. .link-toggle .icon { transition: transform var(--d-base) var(--ease); }
  359. .link-toggle.is-open .icon { transform: rotate(180deg); }
  360. /* ============================================================
  361. 批量操作条(选中态)
  362. ============================================================ */
  363. .batch-bar {
  364. display: flex; align-items: center; gap: var(--sp-3);
  365. padding: var(--sp-3) var(--sp-4);
  366. margin-bottom: var(--sp-4);
  367. background: var(--bg-selected);
  368. border: var(--bw) solid var(--c-info-border);
  369. border-radius: var(--r-base);
  370. }
  371. .batch-bar__count { font-size: var(--fs-base); color: var(--c-info-text); font-weight: 500; }
  372. .batch-bar__spacer { flex: 1 1 auto; }
  373. /* ============================================================
  374. 表格(英雄主角)
  375. ============================================================ */
  376. .table-scroll { overflow-x: auto; border: var(--bw) solid var(--b-light); border-radius: var(--r-card); }
  377. table.grid { width: 100%; min-width: var(--table-min); border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); color: var(--t-primary); }
  378. table.grid th, table.grid td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--b-light); }
  379. table.grid thead th {
  380. background: var(--bg-header); font-weight: 500; color: var(--t-primary);
  381. height: var(--th-h); position: sticky; top: 0; z-index: var(--z-sticky); white-space: nowrap;
  382. }
  383. table.grid tbody tr { transition: background-color var(--d-fast) var(--ease); }
  384. table.grid tbody tr:hover { background: var(--bg-hover); }
  385. table.grid tbody tr.is-selected { background: var(--bg-selected); }
  386. table.grid tbody tr.is-selected:hover { background: var(--bg-selected); }
  387. table.grid .num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
  388. table.grid .col-cb { width: var(--col-cb); position: sticky; left: 0; z-index: var(--z-sticky); background: var(--bg-card); }
  389. table.grid thead .col-cb { background: var(--bg-header); }
  390. table.grid tbody tr:hover .col-cb { background: var(--bg-hover); }
  391. table.grid tbody tr.is-selected .col-cb { background: var(--bg-selected); }
  392. table.grid .col-op { width: var(--col-op); position: sticky; right: 0; z-index: var(--z-sticky); background: var(--bg-card); text-align: right; white-space: nowrap; }
  393. table.grid thead .col-op { background: var(--bg-header); }
  394. table.grid tbody tr:hover .col-op { background: var(--bg-hover); }
  395. table.grid tbody tr.is-selected .col-op { background: var(--bg-selected); }
  396. .col-id { width: var(--col-id); }
  397. .col-name { width: var(--col-name); }
  398. .col-code { width: var(--col-code); }
  399. .col-time { width: var(--col-time); }
  400. .col-members { width: var(--col-members); }
  401. .col-reports { width: var(--col-reports); }
  402. .col-plans { width: var(--col-plans); }
  403. .col-tasks { width: var(--col-tasks); }
  404. .col-coupons { width: var(--col-coupons); }
  405. .col-active { width: var(--col-active); }
  406. .col-rate { width: var(--col-rate); }
  407. .col-status { width: var(--col-status); }
  408. /* 单元格内数值链接(小号),用 --c-info-text 保证 AA */
  409. .cell-link { color: var(--c-info-text); cursor: pointer; font-variant-numeric: tabular-nums; }
  410. .cell-link:hover { color: var(--c-primary-hover); text-decoration: underline; }
  411. .cell-zero { color: var(--t-secondary); }
  412. .cell-code { font-family: 'SF Mono', 'JetBrains Mono', monospace; letter-spacing: var(--ls-code); color: var(--t-regular); }
  413. /* 复选框(自定义,纯 CSS) */
  414. .checkbox { width: var(--cb); height: var(--cb); border: var(--bw) solid var(--b-base); border-radius: var(--r-sm); background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
  415. .checkbox svg { width: var(--cb-ic); height: var(--cb-ic); fill: none; stroke: var(--t-on-primary); stroke-width: 3; opacity: 0; }
  416. .checkbox.is-checked { background: var(--c-primary); border-color: var(--c-primary); }
  417. .checkbox.is-checked svg { opacity: 1; }
  418. .checkbox.is-indeterminate { background: var(--c-primary); border-color: var(--c-primary); }
  419. .checkbox.is-indeterminate svg { opacity: 1; stroke-dasharray: 10; }
  420. /* 完成率进度条 */
  421. .rate { display: flex; align-items: center; gap: var(--sp-2); }
  422. .rate__bar { flex: 1; height: var(--rate-h); border-radius: var(--rate-r); background: var(--bg-fill); overflow: hidden; }
  423. .rate__fill { height: 100%; border-radius: var(--rate-r); background: var(--c-primary); }
  424. .rate__val { font-variant-numeric: tabular-nums; color: var(--t-regular); min-width: var(--rate-val-w); text-align: right; }
  425. /* 状态徽标(浅底+深字+同色圆点) */
  426. .status { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--pad-2) var(--sp-2); font-size: var(--fs-sm); line-height: var(--status-lh); border-radius: var(--r-sm); white-space: nowrap; }
  427. .status::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; }
  428. .status--success { background: var(--c-success-bg); color: var(--c-success-text); }
  429. .status--info { background: var(--c-info-bg); color: var(--c-info-text); }
  430. .status--warning { background: var(--c-warning-bg); color: var(--c-warning-text); }
  431. .status--error { background: var(--c-danger-bg); color: var(--c-danger-text); }
  432. .status--default { background: var(--bg-fill); color: var(--t-regular); }
  433. /* ============================================================
  434. 下拉菜单(更多)—— 真实菜单项
  435. ============================================================ */
  436. .dropdown { position: relative; display: inline-block; }
  437. .dropdown__menu {
  438. position: absolute; top: calc(100% + var(--sp-1)); left: 0; min-width: var(--menu-w);
  439. background: var(--bg-card); border: var(--bw) solid var(--b-light);
  440. border-radius: var(--r-control); box-shadow: var(--sh-popup); padding: var(--sp-1); z-index: var(--z-popup);
  441. }
  442. .dropdown__item { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); height: var(--menu-item-h); border-radius: var(--r-base); color: var(--t-primary); font-size: var(--fs-base); cursor: pointer; }
  443. .dropdown__item:hover { background: var(--bg-fill); }
  444. .dropdown__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--t-secondary); }
  445. .dropdown__item.is-danger { color: var(--c-danger-text); }
  446. /* ============================================================
  447. 快捷入口网格(次级区,轻边框 + hover 微抬升)
  448. ============================================================ */
  449. .qe-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
  450. .qe-card {
  451. display: flex; align-items: center; gap: var(--sp-3);
  452. padding: var(--sp-4);
  453. background: var(--bg-card); border: var(--bw) solid var(--b-light); border-radius: var(--r-card);
  454. cursor: pointer; text-decoration: none; color: inherit;
  455. transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
  456. }
  457. .qe-card:hover { transform: translateY(var(--lift)); box-shadow: var(--sh-hover); border-color: var(--c-info-border); }
  458. .qe-card.is-current { border-color: var(--c-primary); background: var(--c-info-bg); }
  459. .qe-icon { width: var(--qe-icon-box); height: var(--qe-icon-box); border-radius: var(--r-control); background: var(--c-info-bg); color: var(--c-primary); display: flex; align-items: center; justify-content: center; flex: none; }
  460. .qe-icon .icon { width: var(--icon-md); height: var(--icon-md); }
  461. .qe-meta { display: flex; flex-direction: column; gap: var(--pad-2); min-width: 0; }
  462. .qe-title { font-size: var(--fs-base); font-weight: 500; color: var(--t-primary); }
  463. .qe-sub { font-size: var(--fs-sm); color: var(--t-secondary); }
  464. /* ============================================================
  465. 页脚:分页 + 导出
  466. ============================================================ */
  467. .page-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  468. .pagination { display: flex; align-items: center; gap: var(--sp-2); color: var(--t-regular); font-size: var(--fs-base); margin-left: auto; }
  469. .pagination__btn { min-width: var(--pg-btn); height: var(--ctrl-h); padding: 0 var(--sp-2); border: var(--bw) solid var(--b-base); border-radius: var(--r-control); background: var(--bg-card); color: var(--t-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
  470. .pagination__btn:hover:not(:disabled) { color: var(--c-primary); border-color: var(--c-primary-hover); }
  471. .pagination__btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--t-on-primary); }
  472. .pagination__btn:disabled { color: var(--t-disabled); cursor: not-allowed; }
  473. .pagination__jump { display: inline-flex; align-items: center; gap: var(--sp-1); }
  474. .pagination__jump .input { width: var(--w-jump); height: var(--ctrl-h); text-align: center; }
  475. .pagination__sizes .select { height: var(--ctrl-h); }
  476. .pagination__total { color: var(--t-secondary); }
  477. /* ============================================================
  478. 八态演示面板
  479. ============================================================ */
  480. .demo { margin-top: var(--sp-2); }
  481. .demo summary {
  482. cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2);
  483. font-size: var(--fs-base); font-weight: 500; color: var(--t-primary); padding: var(--sp-1) 0;
  484. }
  485. .demo summary::-webkit-details-marker { display: none; }
  486. .demo summary .icon { transition: transform var(--d-base) var(--ease); color: var(--t-secondary); }
  487. .demo[open] summary .icon { transform: rotate(90deg); }
  488. .demo__body { padding: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-6); }
  489. .demo-group__title { font-size: var(--fs-base); font-weight: 500; color: var(--t-primary); margin: 0 0 var(--sp-3); }
  490. .demo-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
  491. .demo-cell { display: flex; flex-direction: column; gap: var(--sp-2); }
  492. .demo-cell__tag { font-size: var(--fs-sm); color: var(--t-secondary); }
  493. .demo-note { font-size: var(--fs-sm); color: var(--t-secondary); }
  494. /* 演示用强制态(静态呈现,无需交互即可查看) */
  495. .show-hover:hover { background: var(--bg-hover); }
  496. .btn.show-hover:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--t-on-primary); }
  497. .btn--default.show-hover:hover { background: var(--bg-card); color: var(--c-primary-hover); border-color: var(--c-primary-hover); }
  498. .show-focus { box-shadow: 0 0 0 var(--ring-1) var(--bg-card), 0 0 0 var(--ring-2) var(--c-ring) !important; outline: none; }
  499. .btn.show-active, .btn--primary.show-active { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--t-on-primary); }
  500. .demo-row .show-selected { background: var(--bg-selected); }
  501. .sr-only { position: absolute; width: var(--sr); height: var(--sr); padding: 0; margin: calc(-1 * var(--sr)); overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  502. /* ============================================================
  503. 减少动效偏好
  504. ============================================================ */
  505. @media (prefers-reduced-motion: reduce) {
  506. *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  507. .btn.is-loading::after { animation: none; }
  508. }
  509. </style>
  510. </head>
  511. <body>
  512. <div class="screen">
  513. <!-- 顶部应用栏(grounding) -->
  514. <header class="appbar">
  515. <div class="appbar__logo">
  516. <span class="mark">
  517. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11.5 12 5l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-8.5Z"/></svg>
  518. </span>
  519. 浠艾福 · 管理后台
  520. </div>
  521. <div class="appbar__right">
  522. <span class="appbar__user">
  523. <span class="appbar__avatar">
  524. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5Z"/></svg>
  525. </span>
  526. 运营管理员 (admin)
  527. </span>
  528. </div>
  529. </header>
  530. <main class="page">
  531. <!-- 页头 -->
  532. <div class="page-header">
  533. <div class="page-header__titles">
  534. <h1 class="page-title">家庭运营工作台</h1>
  535. <span class="page-subtitle">管理便捷视角 · 全局概览与快捷作业入口</span>
  536. </div>
  537. <div class="page-header__actions">
  538. <button class="btn btn--default" type="button">
  539. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5V2L8 6l4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7Z"/></svg>
  540. 刷新
  541. </button>
  542. </div>
  543. </div>
  544. <!-- ① 全局运营概览(统计带,带内主指标打破等权重) -->
  545. <section class="card" aria-label="全局运营概览">
  546. <div class="card__header">
  547. <h2 class="section-title">全局运营概览</h2>
  548. <span class="card__header-note">聚合口径:当前为前端求和兜底示例</span>
  549. </div>
  550. <div class="card__body">
  551. <div class="stat-band">
  552. <!-- 主指标 -->
  553. <div class="stat-hero">
  554. <div class="stat-hero__label">
  555. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M7 6h7a3 3 0 0 1 0 6H8m0 0h6a3 3 0 0 1 0 6H7"/></svg>
  556. 家庭总收益(元)
  557. </div>
  558. <div class="stat-hero__value">1,284,560</div>
  559. <div class="stat-hero__sub">本月新增 +86,420</div>
  560. </div>
  561. <!-- 其余 6 项 -->
  562. <div class="stat-grid">
  563. <div class="stat-cell">
  564. <div class="stat-cell__label">
  565. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3 0-6 1.5-6 4.5V20h12v-2.5C10 14.5 7 13 8 13Zm8 0c-.6 0-1.3.05-2 .15C16.2 14.7 18 16.3 18 18.5V20h4v-2.5c0-3-3-4.5-6-4.5Z"/></svg>
  566. 家庭总数
  567. </div>
  568. <div class="stat-cell__value">1,204</div>
  569. <div class="stat-cell__sub">启用中 1,138</div>
  570. </div>
  571. <div class="stat-cell">
  572. <div class="stat-cell__label">
  573. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z"/></svg>
  574. 成员总数
  575. </div>
  576. <div class="stat-cell__value">5,732</div>
  577. <div class="stat-cell__sub">含孩子 3,910</div>
  578. </div>
  579. <div class="stat-cell">
  580. <div class="stat-cell__label">
  581. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm8 1.5V8h3.5L14 4.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z"/></svg>
  582. 本月报告数
  583. </div>
  584. <div class="stat-cell__value">9,846</div>
  585. <div class="stat-cell__sub">日均 328</div>
  586. </div>
  587. <div class="stat-cell">
  588. <div class="stat-cell__label">
  589. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14a1 1 0 0 1 1 1v15l-3-2-3 2-3-2-3 2-3-2V5a1 1 0 0 1 1-1Zm3 5v2h8V9H8Zm0 4v2h6v-2H8Z"/></svg>
  590. 方案总数
  591. </div>
  592. <div class="stat-cell__value">2,317</div>
  593. <div class="stat-cell__sub">已发布 1,984</div>
  594. </div>
  595. <div class="stat-cell">
  596. <div class="stat-cell__label">
  597. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6v2h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3V3Zm0 4v2h6V7H9Zm-1 5 2 2 4-4"/></svg>
  598. 任务总数
  599. </div>
  600. <div class="stat-cell__value">6,503</div>
  601. <div class="stat-cell__sub">进行中 1,202</div>
  602. </div>
  603. <div class="stat-cell">
  604. <div class="stat-cell__label">
  605. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm2 4h4v4H6V9Zm6 0h6v2h-6V9Zm0 4h6v2h-6v-2Z"/></svg>
  606. 已发优惠券
  607. </div>
  608. <div class="stat-cell__value">14,260</div>
  609. <div class="stat-cell__sub">未核销 5,118</div>
  610. </div>
  611. </div>
  612. </div>
  613. <p class="stat-note"><strong>注:</strong>现有 <code>getFamilyList</code> / <code>getFamilyOverview</code> 仅返回单家庭明细;全局聚合需新增聚合接口,或由前端对分页数据求和兜底(本草稿数字为代表性占位)。</p>
  614. </div>
  615. </section>
  616. <!-- ② 筛选 / 排序条 -->
  617. <section class="card" aria-label="筛选">
  618. <div class="card__header">
  619. <h2 class="section-title">筛选与检索</h2>
  620. <button class="link-toggle is-open" type="button" aria-expanded="true">
  621. 收起高级筛选
  622. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
  623. </button>
  624. </div>
  625. <div class="card__body">
  626. <div class="filter-bar">
  627. <!-- 主检索行 -->
  628. <div class="filter-row">
  629. <div class="field">
  630. <label class="field__label" for="f-name">家庭名称</label>
  631. <div class="input-wrap">
  632. <input id="f-name" class="input input--w" type="text" placeholder="请输入家庭名称" value="幸福" />
  633. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4a6 6 0 1 0 3.7 10.7l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"/></svg>
  634. </div>
  635. </div>
  636. <button class="btn btn--primary" type="button">
  637. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4a6 6 0 1 0 3.7 10.7l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"/></svg>
  638. 搜索
  639. </button>
  640. <button class="btn btn--default" type="button">重置</button>
  641. <div class="filter-spacer"></div>
  642. <button class="btn btn--text" type="button">
  643. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 8h14M5 12h14M5 16h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
  644. 高级筛选
  645. </button>
  646. </div>
  647. <!-- 高级筛选行 -->
  648. <div class="filter-row filter-row--advanced">
  649. <div class="field">
  650. <label class="field__label" for="f-code">邀请码</label>
  651. <input id="f-code" class="input input--sm" type="text" placeholder="如 XF8K2P" />
  652. </div>
  653. <div class="field">
  654. <label class="field__label" for="f-owner">负责人</label>
  655. <input id="f-owner" class="input input--sm" type="text" placeholder="运营 / 规划师" />
  656. </div>
  657. <div class="field">
  658. <label class="field__label" for="f-time-start">创建时间区间</label>
  659. <div style="display:flex;align-items:flex-end;gap:var(--sp-2)">
  660. <input id="f-time-start" class="input input--sm" type="text" placeholder="开始日期" value="2024-09-01" />
  661. <span class="range-sep">~</span>
  662. <input id="f-time-end" class="input input--sm" type="text" placeholder="结束日期" value="2024-11-30" aria-label="结束日期" />
  663. </div>
  664. </div>
  665. <div class="field">
  666. <label class="field__label" for="f-members-min">成员数区间</label>
  667. <div style="display:flex;align-items:flex-end;gap:var(--sp-2)">
  668. <input id="f-members-min" class="input input--sm" type="text" placeholder="最小" value="0" />
  669. <span class="range-sep">~</span>
  670. <input id="f-members-max" class="input input--sm" type="text" placeholder="最大" value="20" aria-label="最大成员数" />
  671. </div>
  672. </div>
  673. <div class="field">
  674. <label class="field__label" for="f-status">启用状态</label>
  675. <select id="f-status" class="select select--sm">
  676. <option>全部</option>
  677. <option>已启用</option>
  678. <option>已停用</option>
  679. </select>
  680. </div>
  681. </div>
  682. </div>
  683. </div>
  684. </section>
  685. <!-- ③④ 指标列表(英雄主角) -->
  686. <section class="card" aria-label="家庭列表与运营指标">
  687. <div class="card__header">
  688. <h2 class="section-title">家庭列表 · 运营指标</h2>
  689. <span class="card__header-note">共 1,204 条 · 当前页 6 条</span>
  690. </div>
  691. <div class="card__body">
  692. <!-- 批量操作条(选中态) -->
  693. <div class="batch-bar">
  694. <span class="batch-bar__count">已选 3 项</span>
  695. <button class="btn btn--default" type="button">批量导出</button>
  696. <button class="btn btn--default" type="button">批量启用</button>
  697. <button class="btn btn--default" type="button">批量停用</button>
  698. <div class="batch-bar__spacer"></div>
  699. <button class="btn btn--text" type="button">清空选择</button>
  700. </div>
  701. <div class="table-scroll">
  702. <table class="grid">
  703. <thead>
  704. <tr>
  705. <th class="col-cb">
  706. <span class="checkbox is-indeterminate" title="部分选中" aria-label="全选">
  707. <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg>
  708. </span>
  709. </th>
  710. <th class="col-id">ID</th>
  711. <th class="col-name">家庭名称</th>
  712. <th class="col-code">邀请码</th>
  713. <th class="col-time">创建时间</th>
  714. <th class="col-members num">成员数</th>
  715. <th class="col-reports num">报告数</th>
  716. <th class="col-plans num">方案数</th>
  717. <th class="col-tasks num">任务数</th>
  718. <th class="col-coupons num">优惠券数</th>
  719. <th class="col-active">最近活跃</th>
  720. <th class="col-rate">报告完成率</th>
  721. <th class="col-status">启用状态</th>
  722. <th class="col-op">操作</th>
  723. </tr>
  724. </thead>
  725. <tbody>
  726. <!-- 行 1:含展开的「更多」真实菜单 -->
  727. <tr>
  728. <td class="col-cb"><span class="checkbox is-checked" aria-label="已选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  729. <td>10231</td>
  730. <td><strong>幸福一家人</strong></td>
  731. <td><span class="cell-code">XF8K2P</span></td>
  732. <td>2024-11-02 14:33</td>
  733. <td class="num"><span class="cell-link">6</span></td>
  734. <td class="num"><span class="cell-link">48</span></td>
  735. <td class="num"><span class="cell-link">3</span></td>
  736. <td class="num"><span class="cell-link">12</span></td>
  737. <td class="num"><span class="cell-link">5</span></td>
  738. <td><span class="status status--success">2 分钟前</span></td>
  739. <td>
  740. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:92%"></div></div><span class="rate__val">92%</span></div>
  741. </td>
  742. <td>
  743. <label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  744. </td>
  745. <td class="col-op">
  746. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  747. <span class="dropdown">
  748. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">
  749. 更多
  750. <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
  751. </button>
  752. <span class="dropdown__menu">
  753. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z"/></svg>查看成员</span>
  754. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14H6V3Zm3 7h6v2H9v-2Zm0 4h6v2H9v-2Z"/></svg>报告明细</span>
  755. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 9h8v2H8zm0 4h8v2H8z"/></svg>方案明细</span>
  756. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6v2h3v16H6V5h3V3Zm0 8 2 2 4-4"/></svg>任务明细</span>
  757. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H4zM8 11h6v2H8zm0 4h6v2H8z"/></svg>优惠券</span>
  758. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M7 6h7a3 3 0 0 1 0 6H8m0 0h6a3 3 0 0 1 0 6H7"/></svg>收益</span>
  759. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8v2H8zm0 4h5v2H8z"/></svg>配置</span>
  760. </span>
  761. </span>
  762. </td>
  763. </tr>
  764. <!-- 行 2 -->
  765. <tr>
  766. <td class="col-cb"><span class="checkbox is-checked" aria-label="已选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  767. <td>10230</td>
  768. <td><strong>向阳花开</strong></td>
  769. <td><span class="cell-code">XY7M9Q</span></td>
  770. <td>2024-10-28 09:12</td>
  771. <td class="num"><span class="cell-link">4</span></td>
  772. <td class="num"><span class="cell-link">31</span></td>
  773. <td class="num"><span class="cell-link">2</span></td>
  774. <td class="num"><span class="cell-link">8</span></td>
  775. <td class="num"><span class="cell-link">2</span></td>
  776. <td><span class="status status--info">15 分钟前</span></td>
  777. <td>
  778. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:88%"></div></div><span class="rate__val">88%</span></div>
  779. </td>
  780. <td>
  781. <label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  782. </td>
  783. <td class="col-op">
  784. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  785. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  786. </td>
  787. </tr>
  788. <!-- 行 3:0 成员 / 停用 -->
  789. <tr>
  790. <td class="col-cb"><span class="checkbox" aria-label="未选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  791. <td>10229</td>
  792. <td><strong>晨光小屋</strong></td>
  793. <td><span class="cell-code">CG3W5L</span></td>
  794. <td>2024-10-15 20:45</td>
  795. <td class="num"><span class="cell-zero">0</span></td>
  796. <td class="num"><span class="cell-zero">0</span></td>
  797. <td class="num"><span class="cell-zero">0</span></td>
  798. <td class="num"><span class="cell-zero">0</span></td>
  799. <td class="num"><span class="cell-zero">0</span></td>
  800. <td><span class="status status--default">3 天前</span></td>
  801. <td>
  802. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:0%"></div></div><span class="rate__val">0%</span></div>
  803. </td>
  804. <td>
  805. <label class="switch"><input type="checkbox" /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  806. </td>
  807. <td class="col-op">
  808. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  809. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  810. </td>
  811. </tr>
  812. <!-- 行 4:选中态(整行高亮) -->
  813. <tr class="is-selected">
  814. <td class="col-cb"><span class="checkbox is-checked" aria-label="已选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  815. <td>10228</td>
  816. <td><strong>萌芽之家</strong></td>
  817. <td><span class="cell-code">MY6T1R</span></td>
  818. <td>2024-09-30 11:08</td>
  819. <td class="num"><span class="cell-link">3</span></td>
  820. <td class="num"><span class="cell-link">19</span></td>
  821. <td class="num"><span class="cell-link">1</span></td>
  822. <td class="num"><span class="cell-link">5</span></td>
  823. <td class="num"><span class="cell-link">1</span></td>
  824. <td><span class="status status--info">1 小时前</span></td>
  825. <td>
  826. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:76%"></div></div><span class="rate__val">76%</span></div>
  827. </td>
  828. <td>
  829. <label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  830. </td>
  831. <td class="col-op">
  832. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  833. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  834. </td>
  835. </tr>
  836. <!-- 行 5 -->
  837. <tr>
  838. <td class="col-cb"><span class="checkbox" aria-label="未选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  839. <td>10227</td>
  840. <td><strong>星河湾家庭</strong></td>
  841. <td><span class="cell-code">XH9B4N</span></td>
  842. <td>2024-09-12 16:20</td>
  843. <td class="num"><span class="cell-link">8</span></td>
  844. <td class="num"><span class="cell-link">67</span></td>
  845. <td class="num"><span class="cell-link">5</span></td>
  846. <td class="num"><span class="cell-link">21</span></td>
  847. <td class="num"><span class="cell-link">9</span></td>
  848. <td><span class="status status--success">5 分钟前</span></td>
  849. <td>
  850. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:95%"></div></div><span class="rate__val">95%</span></div>
  851. </td>
  852. <td>
  853. <label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  854. </td>
  855. <td class="col-op">
  856. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  857. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  858. </td>
  859. </tr>
  860. <!-- 行 6:停用 -->
  861. <tr>
  862. <td class="col-cb"><span class="checkbox" aria-label="未选"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></span></td>
  863. <td>10226</td>
  864. <td><strong>晚晴居</strong></td>
  865. <td><span class="cell-code">WQ2D7K</span></td>
  866. <td>2024-08-21 13:55</td>
  867. <td class="num"><span class="cell-link">2</span></td>
  868. <td class="num"><span class="cell-link">7</span></td>
  869. <td class="num"><span class="cell-link">1</span></td>
  870. <td class="num"><span class="cell-link">3</span></td>
  871. <td class="num"><span class="cell-zero">0</span></td>
  872. <td><span class="status status--warning">2 小时前</span></td>
  873. <td>
  874. <div class="rate"><div class="rate__bar"><div class="rate__fill" style="width:64%"></div></div><span class="rate__val">64%</span></div>
  875. </td>
  876. <td>
  877. <label class="switch"><input type="checkbox" /><span class="switch__track"></span><span class="switch__thumb"></span></label>
  878. </td>
  879. <td class="col-op">
  880. <button class="btn btn--primary" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">编辑</button>
  881. <button class="btn btn--default" type="button" style="height:var(--ctrl-sm-h);padding:0 var(--sp-3)">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  882. </td>
  883. </tr>
  884. </tbody>
  885. </table>
  886. </div>
  887. <!-- ⑤ 页脚:分页 + 导出 -->
  888. <div class="page-footer" style="margin-top:var(--sp-4)">
  889. <button class="btn btn--default" type="button">
  890. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
  891. 导出当前结果
  892. </button>
  893. <nav class="pagination" aria-label="分页">
  894. <span class="pagination__total">共 1,204 条</span>
  895. <button class="pagination__btn" disabled aria-label="上一页">‹</button>
  896. <button class="pagination__btn is-active" aria-current="page">1</button>
  897. <button class="pagination__btn">2</button>
  898. <button class="pagination__btn">3</button>
  899. <span style="color:var(--t-secondary)">…</span>
  900. <button class="pagination__btn">61</button>
  901. <button class="pagination__btn" aria-label="下一页">›</button>
  902. <span class="pagination__sizes">
  903. <select class="select" aria-label="每页条数"><option>10 条/页</option><option>20 条/页</option><option>50 条/页</option><option>100 条/页</option></select>
  904. </span>
  905. <span class="pagination__jump">跳至 <input class="input" type="text" value="1" /> 页</span>
  906. </nav>
  907. </div>
  908. </div>
  909. </section>
  910. <!-- 快捷入口网格(10 张卡片) -->
  911. <section class="card" aria-label="快捷入口">
  912. <div class="card__header">
  913. <h2 class="section-title">快捷入口</h2>
  914. <span class="card__header-note">从本屏直达全部家庭运营模块</span>
  915. </div>
  916. <div class="card__body">
  917. <div class="qe-grid">
  918. <a class="qe-card is-current" href="#">
  919. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3 0-6 1.5-6 4.5V20h12v-2.5C10 14.5 7 13 8 13Zm8 0c-.6 0-1.3.05-2 .15C16.2 14.7 18 16.3 18 18.5V20h4v-2.5c0-3-3-4.5-6-4.5Z"/></svg></span>
  920. <span class="qe-meta"><span class="qe-title">家庭列表</span><span class="qe-sub">/families · 当前</span></span>
  921. </a>
  922. <a class="qe-card" href="#">
  923. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z"/></svg></span>
  924. <span class="qe-meta"><span class="qe-title">孩子管理</span><span class="qe-sub">/children</span></span>
  925. </a>
  926. <a class="qe-card" href="#">
  927. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H4zM8 11h6v2H8zm0 4h6v2H8zM8 8h8v2H8z"/></svg></span>
  928. <span class="qe-meta"><span class="qe-title">积分管理</span><span class="qe-sub">/points</span></span>
  929. </a>
  930. <a class="qe-card" href="#">
  931. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14H6V3Zm3 7h6v2H9v-2Zm0 4h6v2H9v-2Z"/></svg></span>
  932. <span class="qe-meta"><span class="qe-title">积分记录</span><span class="qe-sub">/points-log</span></span>
  933. </a>
  934. <a class="qe-card" href="#">
  935. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l3 6 6 .9-4.5 4.3 1.1 6.3L12 17.8 6.4 20.8l1.1-6.3L3 9.9 9 9l3-6Z"/></svg></span>
  936. <span class="qe-meta"><span class="qe-title">心愿管理</span><span class="qe-sub">/wishes</span></span>
  937. </a>
  938. <a class="qe-card" href="#">
  939. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a4 4 0 0 0-4 4v2H7a2 2 0 0 0-2 2v9h14v-9a2 2 0 0 0-2-2h-1V7a4 4 0 0 0-4-4Zm0 3a1 1 0 0 1 1 1v2h-2V7a1 1 0 0 1 1-1Z"/></svg></span>
  940. <span class="qe-meta"><span class="qe-title">奖励管理</span><span class="qe-sub">/rewards</span></span>
  941. </a>
  942. <a class="qe-card" href="#">
  943. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8v2H8zm0 4h5v2H8z"/></svg></span>
  944. <span class="qe-meta"><span class="qe-title">汇总方式配置</span><span class="qe-sub">/family-metric-agg-config</span></span>
  945. </a>
  946. <a class="qe-card" href="#">
  947. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H4zM8 11h6v2H8zm0 4h6v2H8z"/></svg></span>
  948. <span class="qe-meta"><span class="qe-title">家庭优惠券</span><span class="qe-sub">/family-coupon</span></span>
  949. </a>
  950. <a class="qe-card" href="#">
  951. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M7 6h7a3 3 0 0 1 0 6H8m0 0h6a3 3 0 0 1 0 6H7"/></svg></span>
  952. <span class="qe-meta"><span class="qe-title">家庭收益</span><span class="qe-sub">/family-earnings</span></span>
  953. </a>
  954. <a class="qe-card" href="#">
  955. <span class="qe-icon"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 6v6c0 4 3.5 7 8 8 4.5-1 8-4 8-8V6l-8-4Zm-1 12-3-3 1.4-1.4L11 11.2l4.6-4.6L17 8l-6 6Z"/></svg></span>
  956. <span class="qe-meta"><span class="qe-title">提现审核</span><span class="qe-sub">/family-earnings-withdraw</span></span>
  957. </a>
  958. </div>
  959. </div>
  960. </section>
  961. <!-- 八态演示面板(可折叠) -->
  962. <section class="card demo" aria-label="八态演示面板">
  963. <div class="card__header">
  964. <h2 class="section-title">八态演示面板</h2>
  965. <span class="card__header-note">default / hover / focus / active / disabled / loading / error / success</span>
  966. </div>
  967. <div class="card__body">
  968. <details class="demo" open>
  969. <summary>
  970. <svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
  971. 展开:关键交互元素的完整八态
  972. </summary>
  973. <div class="demo__body">
  974. <!-- 按钮八态 -->
  975. <div>
  976. <h3 class="demo-group__title">按钮(主按钮)</h3>
  977. <div class="demo-row">
  978. <div class="demo-cell"><button class="btn btn--primary" type="button">default</button><span class="demo-cell__tag">默认</span></div>
  979. <div class="demo-cell"><button class="btn btn--primary show-hover" type="button">hover</button><span class="demo-cell__tag">悬停(静态呈现)</span></div>
  980. <div class="demo-cell"><button class="btn btn--primary show-focus" type="button">focus</button><span class="demo-cell__tag">键盘焦点(环 ≥3:1)</span></div>
  981. <div class="demo-cell"><button class="btn btn--primary show-active" type="button">active</button><span class="demo-cell__tag">按压 / 选中</span></div>
  982. <div class="demo-cell"><button class="btn btn--primary is-disabled" type="button" disabled>disabled</button><span class="demo-cell__tag">禁用(视觉+语义)</span></div>
  983. <div class="demo-cell"><button class="btn btn--primary is-loading" type="button">loading</button><span class="demo-cell__tag">加载中</span></div>
  984. <div class="demo-cell"><button class="btn btn--error" type="button">error</button><span class="demo-cell__tag">错误态</span></div>
  985. <div class="demo-cell"><button class="btn btn--success" type="button">success</button><span class="demo-cell__tag">成功态</span></div>
  986. </div>
  987. </div>
  988. <!-- 输入框八态 -->
  989. <div>
  990. <h3 class="demo-group__title">输入框</h3>
  991. <div class="demo-row">
  992. <div class="demo-cell"><div class="field"><input class="input input--w" type="text" placeholder="默认输入" /><span class="demo-cell__tag">default</span></div></div>
  993. <div class="demo-cell"><div class="field"><input class="input input--w show-focus" type="text" value="focus" /><span class="demo-cell__tag">focus(环)</span></div></div>
  994. <div class="demo-cell"><div class="field"><input class="input input--w is-disabled" type="text" value="禁用" disabled /><span class="demo-cell__tag">disabled</span></div></div>
  995. <div class="demo-cell"><div class="field"><input class="input input--w is-error" type="text" value="非法值" /><span class="field__error">邀请码格式不正确</span><span class="demo-cell__tag">error</span></div></div>
  996. <div class="demo-cell"><div class="field"><input class="input input--w" type="text" placeholder="加载中…" disabled style="background:var(--bg-fill)" /><span class="demo-cell__tag">loading(读屏提示)</span></div></div>
  997. <div class="demo-cell"><div class="field"><input class="input input--w" type="text" value="已保存" /><span class="status status--success" style="margin-top:var(--pad-2)">校验通过</span><span class="demo-cell__tag">success</span></div></div>
  998. <div class="demo-cell"><div class="field"><input class="input input--w" type="text" placeholder="无内容" /><span class="demo-cell__tag">empty</span></div></div>
  999. <div class="demo-cell"><div class="field"><button class="btn btn--primary show-active" type="button">active</button><span class="demo-cell__tag">active</span></div></div>
  1000. </div>
  1001. </div>
  1002. <!-- 开关八态 -->
  1003. <div>
  1004. <h3 class="demo-group__title">开关(启用状态)</h3>
  1005. <div class="demo-row">
  1006. <div class="demo-cell"><label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="demo-cell__tag">on(default)</span></div>
  1007. <div class="demo-cell"><label class="switch"><input type="checkbox" /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="demo-cell__tag">off(default)</span></div>
  1008. <div class="demo-cell"><label class="switch"><input type="checkbox" checked class="show-focus-switch" /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="demo-cell__tag">focus(环)</span></div>
  1009. <div class="demo-cell"><label class="switch is-disabled"><input type="checkbox" disabled /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="demo-cell__tag">disabled</span></div>
  1010. <div class="demo-cell"><label class="switch is-loading"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="demo-cell__tag">loading</span></div>
  1011. <div class="demo-cell"><label class="switch"><input type="checkbox" checked /><span class="switch__track"></span><span class="switch__thumb"></span></label><span class="switch__label">启用</span><span class="demo-cell__tag">on + label</span></div>
  1012. </div>
  1013. </div>
  1014. <!-- 表格行八态 -->
  1015. <div>
  1016. <h3 class="demo-group__title">表格行</h3>
  1017. <div class="demo-row" style="align-items:stretch">
  1018. <div class="demo-cell" style="flex:1;min-width:var(--demo-tbl-w)">
  1019. <div class="table-scroll" style="min-width:auto">
  1020. <table class="grid" style="min-width:auto">
  1021. <thead><tr><th class="col-cb"><span class="checkbox" aria-hidden="true"></span></th><th>家庭</th><th class="num">成员</th><th class="col-op">操作</th></tr></thead>
  1022. <tbody>
  1023. <tr><td class="col-cb">·</td><td>普通行 default</td><td class="num">6</td><td class="col-op">编辑</td></tr>
  1024. <tr class="show-hover" style="background:var(--bg-hover)"><td class="col-cb">·</td><td>悬停 hover</td><td class="num">4</td><td class="col-op">编辑</td></tr>
  1025. <tr class="is-selected"><td class="col-cb">·</td><td>选中 selected</td><td class="num">3</td><td class="col-op">编辑</td></tr>
  1026. <tr style="opacity:.55"><td class="col-cb">·</td><td>禁用 disabled</td><td class="num">0</td><td class="col-op">编辑</td></tr>
  1027. <tr><td class="col-cb">·</td><td>加载 loading(行内骨架)</td><td class="num">—</td><td class="col-op">编辑</td></tr>
  1028. <tr><td class="col-cb">·</td><td>错误 error(红色描边)</td><td class="num"><span class="status status--error">失败</span></td><td class="col-op">编辑</td></tr>
  1029. <tr><td class="col-cb">·</td><td>成功 success(绿色态)</td><td class="num"><span class="status status--success">通过</span></td><td class="col-op">编辑</td></tr>
  1030. <tr style="color:var(--t-secondary)"><td class="col-cb">·</td><td>(空状态)暂无数据</td><td class="num">0</td><td class="col-op">—</td></tr>
  1031. </tbody>
  1032. </table>
  1033. </div>
  1034. <span class="demo-cell__tag">八态行示例</span>
  1035. </div>
  1036. </div>
  1037. </div>
  1038. <!-- 下拉八态 -->
  1039. <div>
  1040. <h3 class="demo-group__title">下拉(更多菜单)</h3>
  1041. <div class="demo-row">
  1042. <div class="demo-cell">
  1043. <span class="dropdown">
  1044. <button class="btn btn--default" type="button">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  1045. </span>
  1046. <span class="demo-cell__tag">default(收起)</span>
  1047. </div>
  1048. <div class="demo-cell">
  1049. <span class="dropdown">
  1050. <button class="btn btn--default" type="button">更多 <svg class="icon icon--current icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  1051. <span class="dropdown__menu">
  1052. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z"/></svg>查看成员</span>
  1053. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14H6V3Zm3 7h6v2H9v-2Zm0 4h6v2H9v-2Z"/></svg>报告明细</span>
  1054. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 9h8v2H8zm0 4h8v2H8z"/></svg>方案明细</span>
  1055. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6v2h3v16H6V5h3V3Zm0 8 2 2 4-4"/></svg>任务明细</span>
  1056. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H4zM8 11h6v2H8zm0 4h6v2H8z"/></svg>优惠券</span>
  1057. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M7 6h7a3 3 0 0 1 0 6H8m0 0h6a3 3 0 0 1 0 6H7"/></svg>收益</span>
  1058. <span class="dropdown__item"><svg class="icon icon--current" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8v2H8zm0 4h5v2H8z"/></svg>配置</span>
  1059. </span>
  1060. </span>
  1061. <span class="demo-cell__tag">expanded(7 个真实项)</span>
  1062. </div>
  1063. <div class="demo-cell">
  1064. <span class="dropdown">
  1065. <button class="btn btn--default is-disabled" type="button" disabled>更多</button>
  1066. </span>
  1067. <span class="demo-cell__tag">disabled</span>
  1068. </div>
  1069. </div>
  1070. </div>
  1071. <p class="demo-note">说明:本面板以静态方式呈现八态,便于评审逐项核对;真实交互由 Vue 组件在 cfc-web 中实现,此处仅作视觉契约。</p>
  1072. </div>
  1073. </details>
  1074. </div>
  1075. </section>
  1076. </main>
  1077. </div>
  1078. </body>
  1079. </html>