docs(oa): 我发起的列表卡片折角序号设计与 Demo。
选定方案 A(左上品牌绿折角 + 两位序号),供实现前评审。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
804995ea45
commit
b2a30d78d8
2 files changed
+678
No files matched your search
@@ -0,0 +1,56 @@
|
|||||||
|
# 我发起的 · 列表卡片左上折角序号 Design
|
||||||
|
|
||||||
|
| 项 | 内容 |
|
||||||
|
|----|------|
|
||||||
|
| 日期 | 2026-08-13 |
|
||||||
|
| 状态 | 已定稿(用户确认方案 A) |
|
||||||
|
| 范围 | `mobile-h5`「我发起的」列表卡片左上角序号 |
|
||||||
|
| Demo | `mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html`(方案 A) |
|
||||||
|
|
||||||
|
## 背景
|
||||||
|
|
||||||
|
「我发起的」列表卡片(`pages/oa/mine/index`)与待办等同为钉钉风白卡片,缺少与 Web 表格「序号」对应的视觉锚点。产品选型对比了折角 / 圆点 / 左色条 / 胶囊 / 金额角标,确认落地 **A 折角序号**。
|
||||||
|
|
||||||
|
## 目标
|
||||||
|
|
||||||
|
在每张列表卡片左上角展示跨页连续序号,样式对齐 Demo A,不改变现有点击 / 长按行为。
|
||||||
|
|
||||||
|
## 非目标
|
||||||
|
|
||||||
|
- 待办 / 已办 / 抄送 / 草稿列表不同步改造
|
||||||
|
- 折角不随审批状态变色
|
||||||
|
- 不在角标展示金额(金额仍走 `previewFields` meta)
|
||||||
|
- 不新增接口字段
|
||||||
|
|
||||||
|
## 决策
|
||||||
|
|
||||||
|
| 项 | 选定 |
|
||||||
|
|----|------|
|
||||||
|
| 样式 | 左上直角三角折角 + 白色两位序号(`<10` 补零) |
|
||||||
|
| 颜色 | 品牌绿 `#0a9f6d`(三墙 Token,固定色) |
|
||||||
|
| 序号 | `(page - 1) * pageSize + index + 1`;当前页 `PAGE_SIZE = 10` |
|
||||||
|
| 范围 | 仅 `mine/index.vue` |
|
||||||
|
|
||||||
|
## UI 规格
|
||||||
|
|
||||||
|
- 卡片:`position: relative; overflow: hidden`(现有圆角保留)
|
||||||
|
- 折角:CSS 三角(约 `34px` 直角边,按 rpx 换算对齐 Demo),位于 `top:0; left:0`
|
||||||
|
- 数字:白字、字重 ≥700、约 10–11px 量级,贴在折角内侧,不溢出三角
|
||||||
|
- 内容区:保持现有 padding;标题不被折角遮挡可读区(折角仅占左上小三角)
|
||||||
|
|
||||||
|
## 数据与交互
|
||||||
|
|
||||||
|
- 序号由前端根据当前 `page` / `PAGE_SIZE` / `v-for` 下标计算;列表 `reset` 后从 1 起算正确
|
||||||
|
- 纯展示;点卡片进详情、长按打印 / 复制重开不变
|
||||||
|
|
||||||
|
## 验收
|
||||||
|
|
||||||
|
1. 第 1 页前 10 条显示 `01`–`10`;加载更多后第 11 条为 `11`(或 `11` 不强制补零到三位,两位数原样)
|
||||||
|
2. 搜索重置后序号从 `01` 重新计
|
||||||
|
3. 折角色与 Demo A 一致;状态文案 / hint 色逻辑不变
|
||||||
|
4. 无金额角标、无其它列表回归改动
|
||||||
|
|
||||||
|
## 参考
|
||||||
|
|
||||||
|
- Demo:`mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html` → Tab「A 折角序号」
|
||||||
|
- Web 序号语义:`docs/superpowers/specs/2026-08-11-oa-task-centers-pagination-design.md`
|
||||||
@@ -0,0 +1,622 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
|
<title>我发起的 · 列表卡片左上角序号 Demo</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--brand: #0a9f6d;
|
||||||
|
--brand-dark: #087f57;
|
||||||
|
--brand-soft: #e9f9f2;
|
||||||
|
--warn: #d97706;
|
||||||
|
--warn-soft: #fff7e8;
|
||||||
|
--danger: #ef4444;
|
||||||
|
--nav-bg: #ecfdf5;
|
||||||
|
--page-bg: #f5f6f8;
|
||||||
|
--text: #1f2329;
|
||||||
|
--text-muted: #8f959e;
|
||||||
|
--border: #e8eaed;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
background:
|
||||||
|
radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.12), transparent 55%),
|
||||||
|
linear-gradient(180deg, #f8fffc 0%, #f4f7fb 50%, #f7f8fa 100%);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.stage { max-width: 1180px; margin: 0 auto; padding: 28px 16px 64px; }
|
||||||
|
.hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 720; }
|
||||||
|
.hero p { margin: 0; color: #64748b; font-size: 14px; max-width: 860px; }
|
||||||
|
.rec {
|
||||||
|
margin: 16px 0 0;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--brand-soft);
|
||||||
|
border: 1px solid #b7ebd4;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #166534;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.rec b { color: var(--brand-dark); }
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex; flex-wrap: wrap; gap: 10px;
|
||||||
|
margin: 20px 0 18px;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
appearance: none; border: 1px solid #e2e8f0; background: #fff;
|
||||||
|
border-radius: 999px; padding: 10px 16px; font-size: 13px;
|
||||||
|
font-weight: 600; color: #475569; cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab.is-active {
|
||||||
|
color: var(--brand-dark); border-color: var(--brand);
|
||||||
|
background: var(--brand-soft);
|
||||||
|
box-shadow: 0 0 0 3px rgba(10, 159, 109, 0.16);
|
||||||
|
}
|
||||||
|
.tab .badge {
|
||||||
|
display: inline-block; margin-left: 6px;
|
||||||
|
padding: 1px 7px; border-radius: 999px;
|
||||||
|
font-size: 11px; font-weight: 700;
|
||||||
|
background: #fef3c7; color: #b45309;
|
||||||
|
}
|
||||||
|
.tab.is-active .badge {
|
||||||
|
background: #fff; color: var(--brand-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(240px, 300px) 1fr;
|
||||||
|
gap: 20px; align-items: start;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: rgba(255,255,255,.94);
|
||||||
|
border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px;
|
||||||
|
box-shadow: 0 10px 28px rgba(15,23,42,.05);
|
||||||
|
}
|
||||||
|
.panel h2 { margin: 0 0 4px; font-size: 15px; }
|
||||||
|
.panel .sub { margin: 0 0 10px; font-size: 12px; color: #64748b; }
|
||||||
|
.panel ul { margin: 0; padding-left: 18px; font-size: 13px; color: #475569; }
|
||||||
|
.panel li { margin: 6px 0; }
|
||||||
|
.panel .ok {
|
||||||
|
margin-top: 12px; padding: 10px 12px; border-radius: 10px;
|
||||||
|
background: #ecfdf5; border: 1px solid #a7f3d0;
|
||||||
|
font-size: 12px; color: #047857;
|
||||||
|
}
|
||||||
|
.panel .pick {
|
||||||
|
margin-top: 10px; padding: 10px 12px; border-radius: 10px;
|
||||||
|
background: #fff7e8; border: 1px solid #fde68a;
|
||||||
|
font-size: 12px; color: #92400e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phones { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
|
||||||
|
.phone {
|
||||||
|
width: 375px; background: #fff; border-radius: 28px; overflow: hidden;
|
||||||
|
box-shadow: 0 0 0 1px rgb(15 23 42 / 6%), 0 18px 40px rgb(15 23 42 / 12%);
|
||||||
|
}
|
||||||
|
.cap {
|
||||||
|
text-align: center; font-size: 11px; font-weight: 650; color: #64748b;
|
||||||
|
padding: 8px; background: #f8fafc; border-bottom: 1px solid #eef2f0;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
height: 44px; display: flex; align-items: center; padding: 0 8px 0 4px;
|
||||||
|
background: var(--nav-bg); border-bottom: 1px solid #d8f3e5;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-back {
|
||||||
|
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
|
||||||
|
color: #0f291e; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.nav-back::before {
|
||||||
|
content: ""; width: 10px; height: 10px;
|
||||||
|
border-left: 2px solid #0f291e; border-bottom: 2px solid #0f291e;
|
||||||
|
transform: rotate(45deg); margin-left: 4px;
|
||||||
|
}
|
||||||
|
.nav-title {
|
||||||
|
position: absolute; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 16px; font-weight: 650; color: #0f291e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
min-height: 640px;
|
||||||
|
background: var(--page-bg);
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
height: 36px;
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
padding: 0 12px; border-radius: 10px;
|
||||||
|
background: #fafafa; border: 1px solid #e8eaed;
|
||||||
|
}
|
||||||
|
.search-ico {
|
||||||
|
width: 13px; height: 13px; border: 1.5px solid #94a3b8; border-radius: 50%;
|
||||||
|
position: relative; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.search-ico::after {
|
||||||
|
content: ""; position: absolute; width: 6px; height: 1.5px;
|
||||||
|
right: -4px; bottom: -2px; background: #94a3b8; border-radius: 2px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.search-ph { font-size: 13px; color: #b0b7c3; }
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 10px 12px 0;
|
||||||
|
display: flex; flex-direction: column; gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 对齐 mine/index.vue 现有卡片 ===== */
|
||||||
|
.dd-card {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 14px 14px 12px;
|
||||||
|
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.dd-card__head {
|
||||||
|
display: flex; align-items: flex-start; gap: 8px;
|
||||||
|
}
|
||||||
|
.dd-card__title {
|
||||||
|
flex: 1; min-width: 0;
|
||||||
|
font-size: 15px; font-weight: 700; line-height: 1.4; color: #1f2329;
|
||||||
|
}
|
||||||
|
.dd-card__time {
|
||||||
|
flex-shrink: 0; font-size: 12px; line-height: 1.4; color: #8f959e; padding-top: 2px;
|
||||||
|
}
|
||||||
|
.dd-card__meta { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
.dd-card__meta-line {
|
||||||
|
font-size: 13px; line-height: 1.45; color: #8f959e;
|
||||||
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.dd-card__foot {
|
||||||
|
margin-top: 12px; display: flex; align-items: center;
|
||||||
|
justify-content: space-between; gap: 8px;
|
||||||
|
}
|
||||||
|
.dd-card__hint-tag {
|
||||||
|
max-width: 70%;
|
||||||
|
font-size: 11px; font-weight: 650; line-height: 1.2;
|
||||||
|
padding: 4px 9px; border-radius: 999px;
|
||||||
|
background: rgba(217, 119, 6, 0.12); color: #d97706;
|
||||||
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.dd-card__hint-tag.is-success {
|
||||||
|
background: rgba(10, 159, 109, 0.12); color: #0a9f6d;
|
||||||
|
}
|
||||||
|
.dd-card__hint-tag.is-danger {
|
||||||
|
background: rgba(239, 68, 68, 0.12); color: #ef4444;
|
||||||
|
}
|
||||||
|
.dd-card__status {
|
||||||
|
flex-shrink: 0; font-size: 12px; font-weight: 600; color: #d97706;
|
||||||
|
}
|
||||||
|
.dd-card__status.is-success { color: #0a9f6d; }
|
||||||
|
.dd-card__status.is-danger { color: #ef4444; }
|
||||||
|
|
||||||
|
/* ---------- A:左上折角序号 ---------- */
|
||||||
|
.style-a .dd-card { padding-left: 14px; }
|
||||||
|
.style-a .idx {
|
||||||
|
position: absolute; top: 0; left: 0;
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 34px 34px 0 0;
|
||||||
|
border-color: var(--brand) transparent transparent transparent;
|
||||||
|
}
|
||||||
|
.style-a .idx span {
|
||||||
|
position: absolute; top: -30px; left: 4px;
|
||||||
|
font-size: 10px; font-weight: 800; color: #fff;
|
||||||
|
line-height: 1; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- B:圆点序号(标题左侧)推荐 ---------- */
|
||||||
|
.style-b .dd-card__head { align-items: center; }
|
||||||
|
.style-b .idx {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 22px; height: 22px; border-radius: 50%;
|
||||||
|
display: inline-flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 11px; font-weight: 800; color: #fff;
|
||||||
|
background: var(--brand);
|
||||||
|
box-shadow: 0 2px 6px rgba(10, 159, 109, 0.28);
|
||||||
|
}
|
||||||
|
.style-b .idx.is-warn { background: var(--warn); box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28); }
|
||||||
|
.style-b .idx.is-danger { background: var(--danger); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28); }
|
||||||
|
.style-b .idx.is-mute { background: #94a3b8; box-shadow: none; }
|
||||||
|
|
||||||
|
/* ---------- C:左色条 + 小号序号 ---------- */
|
||||||
|
.style-c .dd-card {
|
||||||
|
padding-left: 18px;
|
||||||
|
border-left: 3px solid var(--brand);
|
||||||
|
}
|
||||||
|
.style-c .dd-card.is-warn { border-left-color: var(--warn); }
|
||||||
|
.style-c .dd-card.is-danger { border-left-color: var(--danger); }
|
||||||
|
.style-c .dd-card.is-mute { border-left-color: #94a3b8; }
|
||||||
|
.style-c .idx {
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 18px;
|
||||||
|
font-size: 12px; font-weight: 800; color: var(--brand);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
padding-top: 1px;
|
||||||
|
}
|
||||||
|
.style-c .dd-card.is-warn .idx { color: var(--warn); }
|
||||||
|
.style-c .dd-card.is-danger .idx { color: var(--danger); }
|
||||||
|
.style-c .dd-card.is-mute .idx { color: #94a3b8; }
|
||||||
|
|
||||||
|
/* ---------- D:金额角标(有金额才显示) ---------- */
|
||||||
|
.style-d .price {
|
||||||
|
position: absolute; top: 0; left: 0;
|
||||||
|
max-width: 72%;
|
||||||
|
padding: 4px 10px 4px 8px;
|
||||||
|
border-radius: 0 0 10px 0;
|
||||||
|
background: linear-gradient(135deg, #0a9f6d 0%, #059669 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 11px; font-weight: 750;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
box-shadow: 2px 2px 8px rgba(10, 159, 109, 0.22);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden; text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.style-d .dd-card.has-price { padding-top: 30px; }
|
||||||
|
.style-d .price .yen { opacity: 0.88; margin-right: 1px; font-weight: 600; }
|
||||||
|
.style-d .price.is-empty {
|
||||||
|
background: #e2e8f0; color: #64748b; box-shadow: none; font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- E:序号胶囊叠左上 ---------- */
|
||||||
|
.style-e .idx {
|
||||||
|
position: absolute; top: 8px; left: 8px;
|
||||||
|
min-width: 20px; height: 18px; padding: 0 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 10px; font-weight: 800; color: var(--brand-dark);
|
||||||
|
background: var(--brand-soft);
|
||||||
|
border: 1px solid #b7ebd4;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.style-e .dd-card { padding-top: 32px; }
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin-top: 22px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.legend .box {
|
||||||
|
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||||
|
padding: 12px 14px; font-size: 12px; color: #475569;
|
||||||
|
}
|
||||||
|
.legend h3 { margin: 0 0 6px; font-size: 13px; color: #0f291e; }
|
||||||
|
code {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 11px; background: #f1f5f9; padding: 1px 5px; border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="hero">
|
||||||
|
<h1>我发起的 · 列表卡片左上角序号 / 价格角标</h1>
|
||||||
|
<p>
|
||||||
|
对齐 <code>mobile-h5/pages/oa/mine/index</code> 现有钉钉风卡片(标题 / 相对时间 / previewFields / 待处理人 + 状态)。
|
||||||
|
对比五种「左上角」处理方式,便于选型后落地。
|
||||||
|
</p>
|
||||||
|
<div class="rec">
|
||||||
|
<b>已选定:A 折角序号</b> —— 左上品牌绿三角 + 白字两位序号(01、02…);
|
||||||
|
序号跨页连续;不随状态变色。详见
|
||||||
|
<code>docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md</code>。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabs" id="tabs">
|
||||||
|
<button type="button" class="tab is-active" data-k="a">A 折角序号<span class="badge">选定</span></button>
|
||||||
|
<button type="button" class="tab" data-k="b">B 圆点序号</button>
|
||||||
|
<button type="button" class="tab" data-k="c">C 左色条+序号</button>
|
||||||
|
<button type="button" class="tab" data-k="e">E 左上胶囊</button>
|
||||||
|
<button type="button" class="tab" data-k="d">D 金额角标</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layout">
|
||||||
|
<aside class="panel" id="side">
|
||||||
|
<h2>A 折角序号</h2>
|
||||||
|
<p class="sub">卡片左上三角折角</p>
|
||||||
|
<ul>
|
||||||
|
<li>视觉强、像「价签/角标」</li>
|
||||||
|
<li>会略微挤压标题可读区</li>
|
||||||
|
<li>长序号(两位数)空间紧</li>
|
||||||
|
</ul>
|
||||||
|
<div class="ok">产品已选定本方案,仅落地「我发起的」。</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div class="phones">
|
||||||
|
<div class="phone">
|
||||||
|
<div class="cap" id="cap">A 折角序号 · 选定 · 375px</div>
|
||||||
|
<div class="nav">
|
||||||
|
<div class="nav-back" aria-hidden="true"></div>
|
||||||
|
<div class="nav-title">我发起的</div>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="search-box">
|
||||||
|
<span class="search-ico" aria-hidden="true"></span>
|
||||||
|
<span class="search-ph">搜索流程名称</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list style-b" id="list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<div class="box">
|
||||||
|
<h3>序号规则</h3>
|
||||||
|
与 Web 四个中心一致:跨页连续<br />
|
||||||
|
<code>(page - 1) * pageSize + index + 1</code><br />
|
||||||
|
本 Demo 假设第 1 页,pageSize=10。
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h3>「价格」从哪来</h3>
|
||||||
|
D 方案从 <code>previewFields</code> 里识别含「金额」的字段;
|
||||||
|
无金额则显示「无金额」灰角标或隐藏(可配置)。
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<h3>落地范围建议</h3>
|
||||||
|
先只改「我发起的」;若观感好,再同步待办 / 已办 / 抄送 / 草稿,避免五页风格分裂。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const ROWS = [
|
||||||
|
{
|
||||||
|
title: '费用报销',
|
||||||
|
time: '09:12',
|
||||||
|
meta: ['报销金额:1280.00', '事由:差旅交通'],
|
||||||
|
amount: '1,280.00',
|
||||||
|
hint: '待张敏处理',
|
||||||
|
status: '进行中',
|
||||||
|
tone: 'warn'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '请假申请',
|
||||||
|
time: '昨天',
|
||||||
|
meta: ['请假类型:事假', '请假天数:1'],
|
||||||
|
amount: null,
|
||||||
|
hint: '待李华处理',
|
||||||
|
status: '进行中',
|
||||||
|
tone: 'warn'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '采购申请',
|
||||||
|
time: '前天',
|
||||||
|
meta: ['采购金额:8600.00', '供应商:华东物资'],
|
||||||
|
amount: '8,600.00',
|
||||||
|
hint: '审批完成',
|
||||||
|
status: '已完成',
|
||||||
|
tone: 'success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '出差申请',
|
||||||
|
time: '3天前',
|
||||||
|
meta: ['目的地:上海', '天数:2'],
|
||||||
|
amount: null,
|
||||||
|
hint: '已打回',
|
||||||
|
status: '已打回',
|
||||||
|
tone: 'danger'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用章申请',
|
||||||
|
time: '2026.08.01',
|
||||||
|
meta: ['用章类型:公章', '份数:2'],
|
||||||
|
amount: null,
|
||||||
|
hint: '我发起的',
|
||||||
|
status: '已撤销',
|
||||||
|
tone: 'mute'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const SIDE = {
|
||||||
|
a: {
|
||||||
|
title: 'A 折角序号',
|
||||||
|
sub: '卡片左上三角折角',
|
||||||
|
items: [
|
||||||
|
'视觉强、像「价签/角标」',
|
||||||
|
'会略微挤压标题可读区',
|
||||||
|
'长序号(两位数)空间紧'
|
||||||
|
],
|
||||||
|
note: 'ok',
|
||||||
|
noteText: '产品已选定本方案,仅落地「我发起的」。'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
title: 'B 圆点序号',
|
||||||
|
sub: '标题行左侧 · 状态同色',
|
||||||
|
items: [
|
||||||
|
'序号:(page-1)*pageSize + i + 1',
|
||||||
|
'色:进行中琥珀 / 通过绿 / 拒绝红 / 其它灰',
|
||||||
|
'不占绝对定位,标题不被遮挡'
|
||||||
|
],
|
||||||
|
note: 'pick',
|
||||||
|
noteText: '备选;本期不采用。'
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
title: 'C 左色条 + 序号',
|
||||||
|
sub: '状态色条 + 数字',
|
||||||
|
items: [
|
||||||
|
'左边框表达状态,序号为纯数字',
|
||||||
|
'与草稿箱「左色条」Demo 可对齐',
|
||||||
|
'标题仍完整可读'
|
||||||
|
],
|
||||||
|
note: 'ok',
|
||||||
|
noteText: '若五列表已统一左色条,这是自然延伸。'
|
||||||
|
},
|
||||||
|
d: {
|
||||||
|
title: 'D 金额角标',
|
||||||
|
sub: '左上价格条 · 无则灰/隐',
|
||||||
|
items: [
|
||||||
|
'从 previewFields 抽「*金额*」',
|
||||||
|
'有金额:¥1,280.00 绿角标',
|
||||||
|
'无金额:灰「无金额」或隐藏'
|
||||||
|
],
|
||||||
|
note: 'pick',
|
||||||
|
noteText: '「价格序号」若指金额露出,用本方案;序号另议。'
|
||||||
|
},
|
||||||
|
e: {
|
||||||
|
title: 'E 左上胶囊',
|
||||||
|
sub: '绝对定位浅绿胶囊',
|
||||||
|
items: [
|
||||||
|
'不挤标题行,但卡片整体变高',
|
||||||
|
'视觉弱于折角、强于纯色条',
|
||||||
|
'两位数序号更友好'
|
||||||
|
],
|
||||||
|
note: 'ok',
|
||||||
|
noteText: '折中方案;若标题很长可优先于 A。'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CAP = {
|
||||||
|
a: 'A 折角序号 · 选定 · 375px',
|
||||||
|
b: 'B 圆点序号 · 375px',
|
||||||
|
c: 'C 左色条+序号 · 375px',
|
||||||
|
d: 'D 金额角标 · 375px',
|
||||||
|
e: 'E 左上胶囊 · 375px'
|
||||||
|
}
|
||||||
|
|
||||||
|
function pad(n) {
|
||||||
|
return n < 10 ? '0' + n : String(n)
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(style) {
|
||||||
|
const list = document.getElementById('list')
|
||||||
|
list.className = 'list style-' + style
|
||||||
|
list.innerHTML = ROWS.map((row, i) => {
|
||||||
|
const n = i + 1
|
||||||
|
const tone = row.tone === 'mute' ? 'info' : row.tone
|
||||||
|
const hintCls = row.tone === 'mute' ? '' : ' is-' + (row.tone === 'warn' ? '' : row.tone)
|
||||||
|
const hintClass =
|
||||||
|
'dd-card__hint-tag' +
|
||||||
|
(row.tone === 'success' ? ' is-success' : '') +
|
||||||
|
(row.tone === 'danger' ? ' is-danger' : '')
|
||||||
|
const statusClass =
|
||||||
|
'dd-card__status' +
|
||||||
|
(row.tone === 'success' ? ' is-success' : '') +
|
||||||
|
(row.tone === 'danger' ? ' is-danger' : '')
|
||||||
|
|
||||||
|
let badge = ''
|
||||||
|
let cardExtra = ''
|
||||||
|
let headPrefix = ''
|
||||||
|
|
||||||
|
if (style === 'a') {
|
||||||
|
badge = '<div class="idx" aria-hidden="true"><span>' + pad(n) + '</span></div>'
|
||||||
|
} else if (style === 'b') {
|
||||||
|
const cls =
|
||||||
|
'idx' +
|
||||||
|
(row.tone === 'warn' ? ' is-warn' : '') +
|
||||||
|
(row.tone === 'success' ? '' : '') +
|
||||||
|
(row.tone === 'danger' ? ' is-danger' : '') +
|
||||||
|
(row.tone === 'mute' ? ' is-mute' : '')
|
||||||
|
// success 用默认绿;warn/danger/mute 覆盖
|
||||||
|
let bCls = 'idx'
|
||||||
|
if (row.tone === 'warn') bCls += ' is-warn'
|
||||||
|
else if (row.tone === 'danger') bCls += ' is-danger'
|
||||||
|
else if (row.tone === 'mute') bCls += ' is-mute'
|
||||||
|
headPrefix = '<span class="' + bCls + '">' + n + '</span>'
|
||||||
|
} else if (style === 'c') {
|
||||||
|
cardExtra =
|
||||||
|
' is-' +
|
||||||
|
(row.tone === 'mute' ? 'mute' : row.tone === 'success' ? 'success' : row.tone)
|
||||||
|
// border uses warn/danger/mute; success stays brand via default
|
||||||
|
if (row.tone === 'success') cardExtra = ''
|
||||||
|
headPrefix = '<span class="idx">' + pad(n) + '</span>'
|
||||||
|
} else if (style === 'd') {
|
||||||
|
if (row.amount) {
|
||||||
|
badge =
|
||||||
|
'<div class="price"><span class="yen">¥</span>' +
|
||||||
|
row.amount +
|
||||||
|
'</div>'
|
||||||
|
cardExtra = ' has-price'
|
||||||
|
} else {
|
||||||
|
badge = '<div class="price is-empty">无金额</div>'
|
||||||
|
cardExtra = ' has-price'
|
||||||
|
}
|
||||||
|
} else if (style === 'e') {
|
||||||
|
badge = '<span class="idx">' + pad(n) + '</span>'
|
||||||
|
}
|
||||||
|
|
||||||
|
const meta = row.meta
|
||||||
|
.map((m) => '<span class="dd-card__meta-line">' + m + '</span>')
|
||||||
|
.join('')
|
||||||
|
|
||||||
|
return (
|
||||||
|
'<div class="dd-card' +
|
||||||
|
cardExtra +
|
||||||
|
'">' +
|
||||||
|
badge +
|
||||||
|
'<div class="dd-card__head">' +
|
||||||
|
headPrefix +
|
||||||
|
'<div class="dd-card__title">' +
|
||||||
|
row.title +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="dd-card__time">' +
|
||||||
|
row.time +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="dd-card__meta">' +
|
||||||
|
meta +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="dd-card__foot">' +
|
||||||
|
'<span class="' +
|
||||||
|
hintClass +
|
||||||
|
'">' +
|
||||||
|
row.hint +
|
||||||
|
'</span>' +
|
||||||
|
'<span class="' +
|
||||||
|
statusClass +
|
||||||
|
'">' +
|
||||||
|
row.status +
|
||||||
|
'</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>'
|
||||||
|
)
|
||||||
|
}).join('')
|
||||||
|
|
||||||
|
const s = SIDE[style]
|
||||||
|
const side = document.getElementById('side')
|
||||||
|
side.innerHTML =
|
||||||
|
'<h2>' +
|
||||||
|
s.title +
|
||||||
|
'</h2>' +
|
||||||
|
'<p class="sub">' +
|
||||||
|
s.sub +
|
||||||
|
'</p>' +
|
||||||
|
'<ul>' +
|
||||||
|
s.items.map((t) => '<li>' + t + '</li>').join('') +
|
||||||
|
'</ul>' +
|
||||||
|
'<div class="' +
|
||||||
|
s.note +
|
||||||
|
'">' +
|
||||||
|
s.noteText +
|
||||||
|
'</div>'
|
||||||
|
|
||||||
|
document.getElementById('cap').textContent = CAP[style]
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('tabs').addEventListener('click', (e) => {
|
||||||
|
const btn = e.target.closest('.tab')
|
||||||
|
if (!btn) return
|
||||||
|
document.querySelectorAll('.tab').forEach((t) => t.classList.remove('is-active'))
|
||||||
|
btn.classList.add('is-active')
|
||||||
|
render(btn.dataset.k)
|
||||||
|
})
|
||||||
|
|
||||||
|
render('a')
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in new issue
Block a user