399 lines
18 KiB
HTML
399 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>主页菜单图标 · 配色挑选</title>
|
|
<style>
|
|
:root {
|
|
--ink: #1f2a26;
|
|
--muted: #6b7b74;
|
|
--line: #e2e8e5;
|
|
--page: #f5f8f7;
|
|
--brand: #16a34a;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(900px 480px at 0% -10%, #dcfce7 0%, transparent 50%),
|
|
radial-gradient(800px 420px at 100% 0%, #e0e7ff 0%, transparent 45%),
|
|
var(--page);
|
|
line-height: 1.45;
|
|
}
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 18px 100px; }
|
|
h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.02em; }
|
|
.sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 720px; }
|
|
.note {
|
|
margin: 14px 0 0;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.note code {
|
|
font-family: ui-monospace, Menlo, monospace;
|
|
font-size: 12px;
|
|
background: #f1f5f4;
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.phone {
|
|
margin: 20px 0 8px;
|
|
max-width: 390px;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
overflow: hidden;
|
|
box-shadow: 0 16px 40px rgba(20,40,30,.08);
|
|
}
|
|
.phone-hd {
|
|
padding: 18px 16px 14px;
|
|
background: linear-gradient(155deg, #14532d 0%, #16a34a 48%, #22c55e 100%);
|
|
color: #fff;
|
|
}
|
|
.phone-hd .brand { font-size: 12px; opacity: .85; }
|
|
.phone-hd .hello { font-size: 18px; font-weight: 650; margin-top: 6px; }
|
|
.phone-body { padding: 14px; background: #f5f8f7; }
|
|
.panel {
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--line);
|
|
padding: 12px;
|
|
}
|
|
.panel-hd {
|
|
display: flex; justify-content: space-between; align-items: baseline;
|
|
margin-bottom: 12px;
|
|
}
|
|
.panel-title { font-size: 14px; font-weight: 650; }
|
|
.hint { font-size: 12px; color: var(--muted); }
|
|
.menu-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px 6px;
|
|
}
|
|
.menu-card {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
padding: 8px 4px;
|
|
border-radius: 12px;
|
|
}
|
|
.menu-icon {
|
|
width: 48px; height: 48px; border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
|
|
}
|
|
.menu-icon svg { width: 26px; height: 26px; display: block; }
|
|
.menu-title {
|
|
font-size: 12px; text-align: center; color: var(--ink);
|
|
max-width: 72px; line-height: 1.2;
|
|
}
|
|
|
|
.sec {
|
|
margin: 28px 0 10px;
|
|
font-size: 14px; color: var(--muted);
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 14px 12px 12px;
|
|
cursor: pointer;
|
|
transition: .15s;
|
|
text-align: center;
|
|
}
|
|
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
|
|
.card.is-current { outline: 2px dashed #94a3b8; outline-offset: -2px; }
|
|
.card.is-selected {
|
|
border-color: var(--fg, #2563eb);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 25%, transparent);
|
|
}
|
|
.card .icon-box {
|
|
width: 56px; height: 56px; border-radius: 16px;
|
|
margin: 0 auto 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
|
|
}
|
|
.card .icon-box svg { width: 30px; height: 30px; }
|
|
.card .name { font-size: 13px; font-weight: 650; margin: 0 0 4px; }
|
|
.card .meta {
|
|
font-size: 11px; color: var(--muted);
|
|
font-family: ui-monospace, Menlo, monospace;
|
|
line-height: 1.4;
|
|
}
|
|
.tag {
|
|
display: inline-block; margin-top: 8px;
|
|
font-size: 11px; padding: 2px 8px; border-radius: 999px;
|
|
background: #f1f5f4; color: var(--muted);
|
|
}
|
|
.tag.rec { background: #eff6ff; color: #1d4ed8; }
|
|
.tag.hot { background: #fff7ed; color: #c2410c; }
|
|
|
|
.footer {
|
|
position: sticky; bottom: 12px; margin-top: 22px;
|
|
background: rgba(255,255,255,.94);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
display: flex; flex-wrap: wrap; gap: 12px;
|
|
align-items: center; justify-content: space-between;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.08);
|
|
}
|
|
.picked { display: flex; align-items: center; gap: 10px; font-size: 13px; }
|
|
.picked .sw {
|
|
width: 44px; height: 44px; border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
|
|
}
|
|
.picked .sw svg { width: 24px; height: 24px; }
|
|
.picked strong { display: block; font-size: 14px; }
|
|
.picked span { color: var(--muted); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
|
|
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.actions button {
|
|
height: 36px; padding: 0 14px; border-radius: 8px;
|
|
border: 1px solid var(--line); background: #fff;
|
|
font: inherit; font-size: 13px; cursor: pointer;
|
|
}
|
|
.actions button.primary {
|
|
background: var(--brand); border-color: transparent; color: #fff; font-weight: 600;
|
|
}
|
|
.toast {
|
|
position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(10px);
|
|
background: #1f2a26; color: #fff; padding: 8px 14px; border-radius: 999px;
|
|
font-size: 13px; opacity: 0; transition: .2s; pointer-events: none; z-index: 20;
|
|
}
|
|
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 印章/发起审批图标：用 currentColor 便于换色 -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
|
<symbol id="icon-approve" viewBox="0 0 1024 1024">
|
|
<path fill="currentColor" d="M645.51 854.33c15.49-57.33 86.49-42 86.49-42s-43.54-44.53-23-112.67c11.22-37.2 39.58-67.99 79.81-76.43 20.41-4.28 56.37-4.23 69.42 0.55 3.66-18.04 7.33-36.14 10.85-54.39l23.84-117.26c7.41-37.35 14.81-74.7 22.78-112.05 6.27-32.55 13.19-65.1 19.53-97.81 4.72-24.74 10.09-49.48 14.81-74.71 2.6-14.16 5.86-28.31 8.46-42.07 0.61-2.04 0.96-4.14 1.06-6.26-1.06-24.66-1.06-41.01-16.93-48.83-16.43-7.89-32.38-7.89-40.85 0-21.65 10.98-43.45 21.48-65.1 32.55-54.04 26.85-107.41 53.7-161.45 80.48L468.71 285.97c-59.16 29.46-118.4 60.46-178.21 88.78-45.57 21.56-90 45.81-135.08 67.38-19.53 9.44-40.2 15.79-59.73 25.71-15.79 7.97-31.25 20.02-31.25 39.55 0 8.87 1.63 21.48 8.95 27.83 2.68 2.03 5.94 3.58 8.46 5.69 40.28 22.14 78.44 48.42 117.58 72.67l76.17 47.2h0.57c16.44 7.98 32.31 7.98 48.74-7.81l0.49-0.57c0.49-0.57 0.98-0.57 0.98-1.05 0.65-0.49 1.71-1.06 2.2-2.04 1.14-1.14 2.11-1.63 3.25-2.68 0.98-1.06 2.61-2.04 3.66-3.17 1.63-1.55 3.17-2.61 4.23-4.15 1.62-1.73 3.39-3.31 5.29-4.72 2.11-1.63 3.66-3.66 5.77-5.29 2.2-2.11 4.31-3.66 6.35-5.7 2.11-2.19 4.8-4.23 6.91-6.43 2.68-2.03 4.8-4.72 7.49-6.83 2.61-2.61 5.21-4.72 7.81-7.32 2.77-2.61 5.86-5.29 8.46-7.89 3.25-2.61 5.86-5.21 9.03-7.89 3.25-2.61 6.35-5.86 9.52-8.38 3.25-3.26 6.43-5.86 10.09-8.95 3.17-3.17 6.91-6.35 10.09-8.95 3.67-3.17 6.84-6.34 10.58-9.44 3.76-3.08 7.3-6.43 10.58-10.01 3.66-3.17 7.32-6.92 11.15-10.09 3.66-3.1 7.33-6.76 11.07-9.93 3.66-3.66 7.97-6.83 11.64-10.5 3.74-3.66 7.98-6.84 11.72-10.58 3.66-3.66 7.81-6.83 11.64-10.41 4.07-3.74 7.89-7.32 12.13-10.58 4.23-3.67 7.97-7.33 12.21-10.58 4.15-3.58 7.89-7.32 12.21-10.98 4.15-3.66 7.89-7.32 12.12-10.98 4.15-3.74 7.98-7.4 12.13-10.58 3.74-3.58 7.65-7.08 11.72-10.41 3.66-3.74 7.89-6.83 11.64-10.58 3.66-3.67 7.89-6.84 11.64-10.5 3.66-3.74 7.32-6.83 11.64-10.58 3.66-3.09 7.32-6.75 11.15-9.93 3.66-3.25 7.32-6.83 11.07-10.01 3.67-3.01 7.25-6.19 10.58-9.44 3.74-3.17 6.83-6.35 10.58-9.52 3.25-3.1 6.83-6.27 10.09-8.95 3.25-3.17 6.34-5.7 9.52-8.87 3.17-2.68 6.35-5.78 9.52-8.46 3.25-2.6 5.86-5.21 8.95-7.89 2.68-2.6 5.86-5.21 8.54-7.89 2.6-2.6 5.21-4.72 7.89-7.32 2.64-2.11 5.14-4.39 7.49-6.83 2.03-2.12 4.72-4.23 6.83-6.35 2.11-2.11 4.23-3.66 6.34-5.69 2.12-1.63 3.66-3.26 5.86-5.29l4.72-4.72c1.62-1.14 2.6-2.68 4.23-3.74 1.05-0.98 2.19-2.11 3.66-3.09 1.13-1.14 2.19-1.63 2.68-2.69l3.17-3.09h0.57c2.68 0.98 5.29 2.53 7.89 3.58 1.63 0.65 2.69 1.63 4.23 2.2 0.57 0.49 1.14 0.49 2.12 0.98 0.56 0 2.11 0.57 2.11 1.14v0.49c-0.57 0.49-1.06 0.49-1.06 0.98l-1.62 1.63-6.84 6.83a76.647 76.647 0 0 0-8.95 10.01c-2.12 2.12-4.31 4.72-6.35 6.84a22.64 22.64 0 0 0-3.25 3.66l-1.55 1.62c-0.57 0.49-1.05 1.47-1.62 1.47-9.44 10.09-19.04 20.59-28.48 30.59l-74.7 78.94c-28.56 29.86-56.64 59.89-85.28 89.83-26.93 28.4-53.95 56.8-80.4 85.2-20.67 21.56-40.69 43.13-61.36 64.69-8.95 9.44-18.06 18.88-27.02 28.88l-0.57 0.57c-7.89 7.81-7.89 16.28-7.89 24.17v177.81c0 16.28 7.89 31.98 24.33 40.36 16.36 7.97 32.31 0 40.69-7.89l62.98-62.5c10.66-10.58 20.75-21.07 30.76-31.57 1.13-1.06 2.11-2.11 3.25-2.11 1.46-0.57 3.58 0.57 4.72 1.62 22.7 14.9 97.27 71.69 97.27 71.69s3.59-31.79 6.31-41.84z"/>
|
|
<path fill="currentColor" d="M699.65 908.97H948.6c7.12 0 13.06-7.66 11.87-15.33l-4.75-28.07c-2.37-11.5-11.87-20.41-22.52-20.41h-76.72l-4.75-31.9c26.08-11.5 43.89-38.29 43.89-70.19 0-42.12-32.02-76.58-71.16-76.58-39.14 0-71.2 34.42-71.2 76.55 0 31.9 17.78 58.7 43.89 70.19l-3.56 31.9h-77.33c-10.68 0-21.34 8.94-22.52 20.41L689 893.61c-2.4 7.69 3.53 15.36 10.65 15.36z m248.89 19.12M944.08 960.22h-239.4c-9.34 0-16.92-7.58-16.92-16.92v-0.91c0-9.34 7.58-16.92 16.92-16.92h239.4c9.34 0 16.92 7.58 16.92 16.92v0.91c0 9.35-7.57 16.92-16.92 16.92z"/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<div class="wrap">
|
|
<h1>主页菜单图标 · 配色挑选</h1>
|
|
<p class="sub">
|
|
针对「发起审批」图标底色 + 图形色。未来多个入口应各自配色，避免整屏同一种绿。
|
|
点选下方色卡，顶部手机预览会同步；底部可复制 <code>iconBg / iconFg</code>。
|
|
</p>
|
|
<p class="note">
|
|
当前实现：底色靠 CSS <code>.tone-approve</code>（浅绿），SVG 内写死 <code>fill="#16a34a"</code>。
|
|
目标：菜单项可配置 <code>iconBg</code> + <code>iconFg</code>（或复用已有 OA 色对）。
|
|
</p>
|
|
|
|
<div class="phone">
|
|
<div class="phone-hd">
|
|
<div class="brand">中科兴皖 · 移动工作台</div>
|
|
<div class="hello">您好，示例用户</div>
|
|
</div>
|
|
<div class="phone-body">
|
|
<div class="panel">
|
|
<div class="panel-hd">
|
|
<span class="panel-title">功能菜单</span>
|
|
<span class="hint">配色预览</span>
|
|
</div>
|
|
<div class="menu-grid" id="liveGrid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sec">当前（对照）</div>
|
|
<div class="grid" id="g-current"></div>
|
|
|
|
<div class="sec">OA 审批色对（与发起页 ep 图标一致，推荐复用）</div>
|
|
<div class="grid" id="g-oa"></div>
|
|
|
|
<div class="sec">扩展色对（非绿，适合多入口区分）</div>
|
|
<div class="grid" id="g-extra"></div>
|
|
|
|
<div class="footer">
|
|
<div class="picked">
|
|
<div class="sw" id="pickedSw"></div>
|
|
<div>
|
|
<strong id="pickedName">未选择</strong>
|
|
<span id="pickedHex">点击色卡挑选</span>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" id="copyPair">复制 bg, fg</button>
|
|
<button type="button" class="primary" id="copyJson">复制菜单字段 JSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast">已复制</div>
|
|
|
|
<script>
|
|
const ICON = `<svg viewBox="0 0 1024 1024" aria-hidden="true"><use href="#icon-approve"/></svg>`;
|
|
|
|
/** 与 mobile-h5/utils/oa-app-icons.js 对齐 */
|
|
const OA_PAIRS = [
|
|
{ id: 'oa-0', name: '翠绿', bg: '#d1fae5', fg: '#059669', tag: 'OA', tagClass: '' },
|
|
{ id: 'oa-1', name: '青蓝', bg: '#cffafe', fg: '#0891b2', tag: 'OA · 推荐', tagClass: 'rec' },
|
|
{ id: 'oa-2', name: '天蓝', bg: '#dbeafe', fg: '#2563eb', tag: 'OA · 推荐', tagClass: 'rec' },
|
|
{ id: 'oa-3', name: '靛蓝', bg: '#e0e7ff', fg: '#4f46e5', tag: 'OA', tagClass: '' },
|
|
{ id: 'oa-4', name: '紫罗兰', bg: '#ede9fe', fg: '#7c3aed', tag: 'OA', tagClass: '' },
|
|
{ id: 'oa-5', name: '玫粉', bg: '#fce7f3', fg: '#db2777', tag: 'OA', tagClass: '' },
|
|
{ id: 'oa-6', name: '橙', bg: '#ffedd5', fg: '#ea580c', tag: 'OA · 推荐', tagClass: 'rec' },
|
|
{ id: 'oa-7', name: '琥珀', bg: '#fef3c7', fg: '#d97706', tag: 'OA', tagClass: '' }
|
|
];
|
|
|
|
const CURRENT = [
|
|
{
|
|
id: 'current',
|
|
name: '当前 tone-approve',
|
|
bg: '#c8f5de',
|
|
fg: '#16a34a',
|
|
tag: '当前',
|
|
tagClass: 'hot',
|
|
current: true
|
|
}
|
|
];
|
|
|
|
const EXTRA = [
|
|
{ id: 'ex-slate', name: '石板灰', bg: '#eef2f1', fg: '#3d524a', tag: '克制', tagClass: '' },
|
|
{ id: 'ex-sky', name: '晴空蓝', bg: '#e0f2fe', fg: '#0284c7', tag: '清爽', tagClass: 'rec' },
|
|
{ id: 'ex-royal', name: '宝蓝', bg: '#dbeafe', fg: '#1d4ed8', tag: '正式', tagClass: 'rec' },
|
|
{ id: 'ex-indigo', name: '深靛', bg: '#e0e7ff', fg: '#3730a3', tag: '稳重', tagClass: '' },
|
|
{ id: 'ex-violet', name: '葡萄紫', bg: '#f3e8ff', fg: '#7e22ce', tag: '个性', tagClass: '' },
|
|
{ id: 'ex-rose', name: '玫瑰红', bg: '#ffe4e6', fg: '#e11d48', tag: '醒目', tagClass: '' },
|
|
{ id: 'ex-coral', name: '珊瑚', bg: '#ffedd5', fg: '#c2410c', tag: '温暖', tagClass: '' },
|
|
{ id: 'ex-amber', name: '大麦黄邻', bg: '#fff7e8', fg: '#a67b20', tag: '已有 tone', tagClass: '' },
|
|
{ id: 'ex-teal', name: '孔雀石', bg: '#ccfbf1', fg: '#0f766e', tag: '青绿', tagClass: '' },
|
|
{ id: 'ex-lime', name: '青柠', bg: '#ecfccb', fg: '#4d7c0f', tag: '活力', tagClass: '' },
|
|
{ id: 'ex-brown', name: '咖啡', bg: '#f5e6d3', fg: '#92400e', tag: '沉稳', tagClass: '' },
|
|
{ id: 'ex-ink', name: '墨蓝', bg: '#e2e8f0', fg: '#334155', tag: '极简', tagClass: '' }
|
|
];
|
|
|
|
/** 预览宫格：第 1 个跟随选中的「发起审批」配色，其余用固定多色演示可定制 */
|
|
const PREVIEW_OTHERS = [
|
|
{ title: '待办', bg: '#dbeafe', fg: '#2563eb', glyph: '☰' },
|
|
{ title: '已办', bg: '#ffedd5', fg: '#ea580c', glyph: '▤' },
|
|
{ title: '抄送', bg: '#ede9fe', fg: '#7c3aed', glyph: '↗' },
|
|
{ title: '统计', bg: '#fef3c7', fg: '#d97706', glyph: '¥' },
|
|
{ title: '通讯录', bg: '#fce7f3', fg: '#db2777', glyph: '☺' },
|
|
{ title: '设置', bg: '#eef2f1', fg: '#3d524a', glyph: '⚙' },
|
|
{ title: '更多', bg: '#cffafe', fg: '#0891b2', glyph: '▦' }
|
|
];
|
|
|
|
let selected = CURRENT[0];
|
|
|
|
function toast(msg) {
|
|
const el = document.getElementById('toast');
|
|
el.textContent = msg;
|
|
el.classList.add('show');
|
|
clearTimeout(toast._t);
|
|
toast._t = setTimeout(() => el.classList.remove('show'), 1400);
|
|
}
|
|
|
|
async function copyText(t) {
|
|
try {
|
|
await navigator.clipboard.writeText(t);
|
|
} catch {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = t;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
ta.remove();
|
|
}
|
|
toast('已复制');
|
|
}
|
|
|
|
function renderCard(p, host) {
|
|
const el = document.createElement('article');
|
|
el.className = 'card' + (p.current ? ' is-current' : '') + (selected?.id === p.id ? ' is-selected' : '');
|
|
el.style.setProperty('--fg', p.fg);
|
|
el.innerHTML = `
|
|
<div class="icon-box" style="background:${p.bg};color:${p.fg}">${ICON}</div>
|
|
<div class="name">${p.name}</div>
|
|
<div class="meta">${p.bg}<br/>${p.fg}</div>
|
|
<span class="tag ${p.tagClass || ''}">${p.tag || ''}</span>
|
|
`;
|
|
el.addEventListener('click', () => {
|
|
selected = p;
|
|
sync();
|
|
});
|
|
host.appendChild(el);
|
|
}
|
|
|
|
function renderLiveGrid() {
|
|
const grid = document.getElementById('liveGrid');
|
|
const first = `
|
|
<div class="menu-card">
|
|
<div class="menu-icon" style="background:${selected.bg};color:${selected.fg}">${ICON}</div>
|
|
<div class="menu-title">发起审批</div>
|
|
</div>`;
|
|
const rest = PREVIEW_OTHERS.map(
|
|
(o) => `
|
|
<div class="menu-card">
|
|
<div class="menu-icon" style="background:${o.bg};color:${o.fg}">
|
|
<span style="font-size:20px;line-height:1;color:${o.fg}">${o.glyph}</span>
|
|
</div>
|
|
<div class="menu-title">${o.title}</div>
|
|
</div>`
|
|
).join('');
|
|
grid.innerHTML = first + rest;
|
|
}
|
|
|
|
function syncFooter() {
|
|
const sw = document.getElementById('pickedSw');
|
|
sw.style.background = selected.bg;
|
|
sw.style.color = selected.fg;
|
|
sw.innerHTML = ICON;
|
|
document.getElementById('pickedName').textContent = selected.name;
|
|
document.getElementById('pickedHex').textContent = `${selected.bg} / ${selected.fg}`;
|
|
}
|
|
|
|
function sync() {
|
|
document.getElementById('g-current').innerHTML = '';
|
|
document.getElementById('g-oa').innerHTML = '';
|
|
document.getElementById('g-extra').innerHTML = '';
|
|
CURRENT.forEach((p) => renderCard(p, document.getElementById('g-current')));
|
|
OA_PAIRS.forEach((p) => renderCard(p, document.getElementById('g-oa')));
|
|
EXTRA.forEach((p) => renderCard(p, document.getElementById('g-extra')));
|
|
renderLiveGrid();
|
|
syncFooter();
|
|
}
|
|
|
|
document.getElementById('copyPair').addEventListener('click', () => {
|
|
copyText(`${selected.bg}, ${selected.fg}`);
|
|
});
|
|
document.getElementById('copyJson').addEventListener('click', () => {
|
|
const json = JSON.stringify(
|
|
{
|
|
title: '发起审批',
|
|
icon: 'approve',
|
|
iconBg: selected.bg,
|
|
iconFg: selected.fg
|
|
},
|
|
null,
|
|
2
|
|
);
|
|
copyText(json);
|
|
});
|
|
|
|
// 默认推荐：天蓝（正式、非绿）
|
|
selected = OA_PAIRS[2];
|
|
sync();
|
|
</script>
|
|
</body>
|
|
</html>
|