oa-app-icon-picker-demo.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  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.0" />
  6. <title>OA 审批 · 应用图标(淡底色 + EP Icon)Demo</title>
  7. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  8. <style>
  9. :root {
  10. --primary: #10b981;
  11. --primary-dark: #059669;
  12. --primary-bg: #ecfdf5;
  13. --text: #1e293b;
  14. --text-muted: #64748b;
  15. --text-strong: #0f172a;
  16. --border: #d9e8e2;
  17. --bg-page: #f1f5f9;
  18. --surface: #ffffff;
  19. --shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  20. --radius: 10px;
  21. }
  22. * { box-sizing: border-box; }
  23. body {
  24. margin: 0;
  25. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  26. font-size: 14px;
  27. line-height: 1.5;
  28. color: var(--text);
  29. background: #eef2f0;
  30. padding: 24px;
  31. }
  32. .wrap { max-width: 1120px; margin: 0 auto; }
  33. .page-head h1 {
  34. margin: 0 0 6px;
  35. font-size: 22px;
  36. font-weight: 700;
  37. color: var(--text-strong);
  38. }
  39. .page-head p {
  40. margin: 0 0 20px;
  41. color: var(--text-muted);
  42. max-width: 720px;
  43. }
  44. .panel {
  45. background: var(--surface);
  46. border: 1px solid var(--border);
  47. border-radius: var(--radius);
  48. box-shadow: var(--shadow);
  49. margin-bottom: 16px;
  50. overflow: hidden;
  51. }
  52. .panel-top {
  53. display: flex;
  54. align-items: center;
  55. justify-content: space-between;
  56. gap: 12px;
  57. padding: 14px 18px;
  58. border-bottom: 1px solid #eef2f0;
  59. }
  60. .panel-top h2 {
  61. margin: 0;
  62. font-size: 15px;
  63. font-weight: 650;
  64. display: flex;
  65. align-items: center;
  66. gap: 8px;
  67. }
  68. .panel-top h2::before {
  69. content: '';
  70. width: 3px;
  71. height: 14px;
  72. border-radius: 2px;
  73. background: var(--primary);
  74. }
  75. .panel-body { padding: 18px; }
  76. .hint {
  77. margin: 0 0 14px;
  78. color: var(--text-muted);
  79. font-size: 13px;
  80. }
  81. .compare {
  82. display: grid;
  83. grid-template-columns: 1fr 1fr;
  84. gap: 16px;
  85. }
  86. @media (max-width: 800px) {
  87. .compare { grid-template-columns: 1fr; }
  88. }
  89. .compare-col {
  90. border: 1px solid #e2e8f0;
  91. border-radius: 10px;
  92. padding: 14px;
  93. background: #fafafa;
  94. }
  95. .compare-col h3 {
  96. margin: 0 0 4px;
  97. font-size: 13px;
  98. font-weight: 650;
  99. }
  100. .badge {
  101. display: inline-flex;
  102. align-items: center;
  103. height: 20px;
  104. padding: 0 8px;
  105. border-radius: 999px;
  106. font-size: 11px;
  107. font-weight: 600;
  108. margin-bottom: 12px;
  109. }
  110. .badge.old { background: #fee2e2; color: #b91c1c; }
  111. .badge.new { background: var(--primary-bg); color: var(--primary-dark); }
  112. .icon-row {
  113. display: flex;
  114. flex-wrap: wrap;
  115. gap: 10px;
  116. }
  117. .swatch {
  118. width: 36px;
  119. height: 36px;
  120. border-radius: 9px;
  121. display: grid;
  122. place-items: center;
  123. color: #fff;
  124. box-shadow: 0 1px 2px rgba(15,23,42,.08);
  125. }
  126. .swatch svg { width: 16px; height: 16px; }
  127. /* 图标色由 JS 按底色深色变体写入,勿强制灰/白 */
  128. .card-row {
  129. display: grid;
  130. grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  131. gap: 12px;
  132. }
  133. .oa-card {
  134. border: 1px solid #e2e8f0;
  135. border-radius: 10px;
  136. padding: 14px;
  137. background: #fff;
  138. transition: border-color .15s, box-shadow .15s;
  139. }
  140. .oa-card:hover {
  141. border-color: #a7f3d0;
  142. box-shadow: 0 4px 12px rgba(16,185,129,.08);
  143. }
  144. .oa-card__main {
  145. display: flex;
  146. gap: 12px;
  147. align-items: center;
  148. min-width: 0;
  149. }
  150. .oa-card__icon {
  151. width: 32px;
  152. height: 32px;
  153. border-radius: 8px;
  154. display: grid;
  155. place-items: center;
  156. flex-shrink: 0;
  157. }
  158. .oa-card__icon svg { width: 16px; height: 16px; }
  159. .oa-card__name {
  160. display: block;
  161. font-weight: 600;
  162. color: var(--text-strong);
  163. white-space: nowrap;
  164. overflow: hidden;
  165. text-overflow: ellipsis;
  166. }
  167. .oa-card__meta {
  168. display: flex;
  169. gap: 6px;
  170. margin-top: 4px;
  171. flex-wrap: wrap;
  172. }
  173. .tag {
  174. font-size: 11px;
  175. padding: 1px 7px;
  176. border-radius: 4px;
  177. background: var(--primary-bg);
  178. color: var(--primary-dark);
  179. font-weight: 500;
  180. }
  181. .tag.warn { background: #fffbeb; color: #d97706; }
  182. .tag.muted { background: #f1f5f9; color: #64748b; }
  183. .oa-card__ops {
  184. display: flex;
  185. gap: 6px;
  186. justify-content: flex-end;
  187. margin-top: 10px;
  188. padding-top: 8px;
  189. border-top: 1px solid #f1f5f9;
  190. }
  191. .btn {
  192. height: 28px;
  193. padding: 0 10px;
  194. border-radius: 6px;
  195. border: 1px solid #d1d5db;
  196. background: #fff;
  197. color: var(--text);
  198. font-size: 12px;
  199. cursor: pointer;
  200. display: inline-flex;
  201. align-items: center;
  202. gap: 4px;
  203. }
  204. .btn:hover { border-color: #94a3b8; }
  205. .btn.primary {
  206. background: var(--primary);
  207. border-color: var(--primary);
  208. color: #fff;
  209. }
  210. .btn.ghost {
  211. background: #fff;
  212. border-color: #cbd5e1;
  213. }
  214. .btn:disabled { opacity: .55; cursor: not-allowed; }
  215. /* Dialog */
  216. .dialog-mask {
  217. position: fixed;
  218. inset: 0;
  219. background: rgba(15, 23, 42, 0.35);
  220. display: none;
  221. align-items: center;
  222. justify-content: center;
  223. padding: 16px;
  224. z-index: 40;
  225. }
  226. .dialog-mask.open { display: flex; }
  227. .dialog {
  228. width: min(640px, 100%);
  229. max-height: calc(100vh - 100px);
  230. background: #fff;
  231. border-radius: 12px;
  232. box-shadow: 0 20px 50px rgba(15,23,42,.18);
  233. display: flex;
  234. flex-direction: column;
  235. overflow: hidden;
  236. }
  237. .dialog__head {
  238. display: flex;
  239. align-items: center;
  240. justify-content: space-between;
  241. padding: 14px 18px;
  242. border-bottom: 1px solid #eef2f0;
  243. font-weight: 650;
  244. }
  245. .dialog__body {
  246. padding: 18px;
  247. overflow: auto;
  248. }
  249. .dialog__foot {
  250. display: flex;
  251. justify-content: flex-end;
  252. gap: 8px;
  253. padding: 12px 18px;
  254. border-top: 1px solid #eef2f0;
  255. background: #fafafa;
  256. }
  257. .form-label {
  258. display: block;
  259. font-size: 12px;
  260. color: var(--text-muted);
  261. margin-bottom: 6px;
  262. }
  263. .form-grid {
  264. display: grid;
  265. grid-template-columns: 1fr 1fr;
  266. gap: 14px;
  267. }
  268. .span-2 { grid-column: 1 / -1; }
  269. @media (max-width: 560px) {
  270. .form-grid { grid-template-columns: 1fr; }
  271. .span-2 { grid-column: auto; }
  272. }
  273. input[type="text"], textarea, select {
  274. width: 100%;
  275. height: 36px;
  276. border: 1px solid #d1d5db;
  277. border-radius: 8px;
  278. padding: 0 10px;
  279. font: inherit;
  280. color: var(--text);
  281. background: #fff;
  282. }
  283. textarea { height: 72px; padding: 8px 10px; resize: vertical; }
  284. input:focus, textarea:focus, select:focus {
  285. outline: none;
  286. border-color: var(--primary);
  287. box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  288. }
  289. .picker {
  290. display: flex;
  291. flex-wrap: wrap;
  292. gap: 12px;
  293. align-items: flex-start;
  294. }
  295. .preview {
  296. width: 56px;
  297. height: 56px;
  298. border-radius: 12px;
  299. display: grid;
  300. place-items: center;
  301. box-shadow: 0 1px 3px rgba(15,23,42,.08);
  302. flex-shrink: 0;
  303. }
  304. .preview svg { width: 26px; height: 26px; }
  305. .picker-actions {
  306. display: flex;
  307. flex-wrap: wrap;
  308. gap: 8px;
  309. align-items: center;
  310. flex: 1;
  311. min-width: 200px;
  312. }
  313. .picker-tip {
  314. flex-basis: 100%;
  315. margin: 0;
  316. font-size: 12px;
  317. color: #94a3b8;
  318. }
  319. .icon-panel {
  320. margin-top: 12px;
  321. border: 1px solid #e2e8f0;
  322. border-radius: 10px;
  323. padding: 12px;
  324. background: #f8fafc;
  325. display: none;
  326. }
  327. .icon-panel.open { display: block; }
  328. .icon-panel__head {
  329. display: flex;
  330. align-items: center;
  331. justify-content: space-between;
  332. gap: 8px;
  333. margin-bottom: 10px;
  334. }
  335. .icon-panel__head strong { font-size: 13px; }
  336. .icon-grid {
  337. display: grid;
  338. grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  339. gap: 8px;
  340. max-height: 220px;
  341. overflow: auto;
  342. }
  343. .icon-cell {
  344. border: 1px solid transparent;
  345. background: #fff;
  346. border-radius: 8px;
  347. height: 56px;
  348. display: flex;
  349. flex-direction: column;
  350. align-items: center;
  351. justify-content: center;
  352. gap: 4px;
  353. cursor: pointer;
  354. color: #475569;
  355. font-size: 10px;
  356. padding: 4px;
  357. }
  358. .icon-cell:hover { border-color: #a7f3d0; color: var(--primary-dark); }
  359. .icon-cell.active {
  360. border-color: var(--primary);
  361. background: var(--primary-bg);
  362. color: var(--primary-dark);
  363. box-shadow: 0 0 0 2px rgba(16,185,129,.12);
  364. }
  365. .icon-cell svg { width: 20px; height: 20px; }
  366. .color-row {
  367. display: flex;
  368. flex-wrap: wrap;
  369. gap: 8px;
  370. margin-top: 10px;
  371. }
  372. .color-dot {
  373. width: 28px;
  374. height: 28px;
  375. border-radius: 8px;
  376. border: 2px solid transparent;
  377. cursor: pointer;
  378. box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
  379. }
  380. .color-dot.active {
  381. border-color: var(--primary-dark);
  382. box-shadow: 0 0 0 2px rgba(16,185,129,.25);
  383. }
  384. .toolbar {
  385. display: flex;
  386. flex-wrap: wrap;
  387. gap: 8px;
  388. margin-bottom: 14px;
  389. }
  390. .x {
  391. width: 28px;
  392. height: 28px;
  393. border: none;
  394. background: transparent;
  395. border-radius: 6px;
  396. cursor: pointer;
  397. color: #64748b;
  398. font-size: 18px;
  399. line-height: 1;
  400. }
  401. .x:hover { background: #f1f5f9; color: #0f172a; }
  402. .legend {
  403. display: flex;
  404. flex-wrap: wrap;
  405. gap: 12px;
  406. margin-top: 12px;
  407. font-size: 12px;
  408. color: var(--text-muted);
  409. }
  410. .legend span::before {
  411. content: '';
  412. display: inline-block;
  413. width: 8px;
  414. height: 8px;
  415. border-radius: 2px;
  416. margin-right: 6px;
  417. vertical-align: middle;
  418. }
  419. .legend .a::before { background: #f97316; }
  420. .legend .b::before { background: #bbf7d0; border: 1px solid #86efac; }
  421. </style>
  422. </head>
  423. <body>
  424. <div class="wrap">
  425. <header class="page-head">
  426. <h1>审批应用图标 · 交互 Demo</h1>
  427. <p>
  428. 新增时:<strong>淡色背景随机</strong> + <strong>Element Plus 图标随机</strong>;
  429. 图标取底色同色系深色。卡片图标 <strong>32×32</strong>(原 40×40),弹窗预览 <strong>56×56</strong>(原 80×80)。
  430. </p>
  431. </header>
  432. <section class="panel">
  433. <div class="panel-top"><h2>对比:现在 vs 目标</h2></div>
  434. <div class="panel-body">
  435. <div class="compare">
  436. <div class="compare-col">
  437. <span class="badge old">现状</span>
  438. <h3>饱和底色 + 固定三条杠</h3>
  439. <p class="hint">8 张 SVG 只换 fill,中间图形相同</p>
  440. <div class="icon-row" id="oldRow"></div>
  441. </div>
  442. <div class="compare-col">
  443. <span class="badge new">目标</span>
  444. <h3>淡色底 + 随机 / 可选 EP Icon</h3>
  445. <p class="hint">仅这 8 组彩色(禁止灰/slate);图标色 = 同色系深色</p>
  446. <div class="icon-row" id="newRow"></div>
  447. </div>
  448. </div>
  449. <div class="legend">
  450. <span class="a">现状:高饱和实心底</span>
  451. <span class="b">目标:浅色底 + 同色系深色图标</span>
  452. </div>
  453. </div>
  454. </section>
  455. <section class="panel">
  456. <div class="panel-top">
  457. <h2>审批管理 · 流程卡片预览</h2>
  458. <div class="toolbar" style="margin:0">
  459. <button class="btn primary" id="btnAdd" type="button">+ 新增审批</button>
  460. <button class="btn ghost" id="btnRerollAll" type="button">全部重新随机</button>
  461. </div>
  462. </div>
  463. <div class="panel-body">
  464. <p class="hint">卡片图标由「底色色值 + icon 名」组合渲染(非上传图片时)。点「编辑基础」可改图标。</p>
  465. <div class="card-row" id="cardRow"></div>
  466. </div>
  467. </section>
  468. </div>
  469. <div class="dialog-mask" id="dialogMask" role="dialog" aria-modal="true">
  470. <div class="dialog">
  471. <div class="dialog__head">
  472. <span id="dialogTitle">新增审批</span>
  473. <button class="x" type="button" id="btnClose" aria-label="关闭">×</button>
  474. </div>
  475. <div class="dialog__body">
  476. <div class="form-grid">
  477. <div class="span-2">
  478. <label class="form-label">应用图标</label>
  479. <div class="picker">
  480. <div class="preview" id="preview"></div>
  481. <div class="picker-actions">
  482. <button class="btn ghost" type="button" id="btnPickIcon">从图标库选择</button>
  483. <button class="btn ghost" type="button" id="btnRandomColor">换底色</button>
  484. <button class="btn ghost" type="button" id="btnRandomBoth">随机图标+底色</button>
  485. <button class="btn ghost" type="button" disabled title="Demo 未接上传">上传图片</button>
  486. <p class="picker-tip">新增时从上方 8 组彩色中随机底色 + 随机 EP 图标(图标为同色系深色);禁止灰色。可再选图标、换底色,或上传自定义图。</p>
  487. </div>
  488. </div>
  489. <div class="icon-panel" id="iconPanel">
  490. <div class="icon-panel__head">
  491. <strong>Element Plus 图标库(业务精选)</strong>
  492. <button class="btn ghost" type="button" id="btnClosePanel" style="height:24px">收起</button>
  493. </div>
  494. <div class="icon-grid" id="iconGrid"></div>
  495. <div>
  496. <div class="form-label" style="margin-top:10px">底色(仅 8 组彩色,无灰色)</div>
  497. <div class="color-row" id="colorRow"></div>
  498. </div>
  499. </div>
  500. </div>
  501. <div>
  502. <label class="form-label">应用名称</label>
  503. <input type="text" id="appName" placeholder="不超过50字" maxlength="50" />
  504. </div>
  505. <div>
  506. <label class="form-label">所属分组</label>
  507. <select id="group">
  508. <option>人事考勤</option>
  509. <option>财务报销</option>
  510. <option>行政后勤</option>
  511. </select>
  512. </div>
  513. <div class="span-2">
  514. <label class="form-label">说明</label>
  515. <textarea id="desc" placeholder="选填"></textarea>
  516. </div>
  517. </div>
  518. </div>
  519. <div class="dialog__foot">
  520. <button class="btn ghost" type="button" id="btnCancel">取消</button>
  521. <button class="btn primary" type="button" id="btnOk">确定</button>
  522. </div>
  523. </div>
  524. </div>
  525. <script>
  526. /**
  527. * 仅允许 Demo「淡色底 + 随机/可选 EP Icon」区的 8 组彩色
  528. * 禁止灰 / slate 等中性色
  529. */
  530. const COLOR_PAIRS = [
  531. { bg: '#d1fae5', fg: '#059669' }, // mint
  532. { bg: '#cffafe', fg: '#0891b2' }, // cyan
  533. { bg: '#dbeafe', fg: '#2563eb' }, // blue
  534. { bg: '#e0e7ff', fg: '#4f46e5' }, // indigo
  535. { bg: '#ede9fe', fg: '#7c3aed' }, // violet
  536. { bg: '#fce7f3', fg: '#db2777' }, // pink
  537. { bg: '#ffedd5', fg: '#ea580c' }, // orange
  538. { bg: '#fef3c7', fg: '#d97706' } // amber
  539. ]
  540. const PASTEL_COLORS = COLOR_PAIRS.map((p) => p.bg)
  541. const FG_BY_BG = Object.fromEntries(COLOR_PAIRS.map((p) => [p.bg.toLowerCase(), p.fg]))
  542. /** 现状高饱和(对比用) */
  543. const OLD_COLORS = ['#f97316', '#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f59e0b', '#06b6d4', '#14b8a6']
  544. /** 精选 EP 风格图标(path 近似 Element Plus outline) */
  545. const ICONS = {
  546. Document: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/>',
  547. Calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
  548. Clock: '<circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/>',
  549. Wallet: '<rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/><circle cx="16" cy="14" r="1.5"/>',
  550. Van: '<path d="M3 17h2a2 2 0 0 0 4 0h6a2 2 0 0 0 4 0h2V9l-4-4H3z"/><circle cx="7" cy="17" r="1.5"/><circle cx="17" cy="17" r="1.5"/>',
  551. User: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
  552. Stamp: '<path d="M5 21h14"/><path d="M8 17h8l1-4H7z"/><path d="M12 13V8"/><circle cx="12" cy="5" r="2"/>',
  553. Tickets: '<path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z"/><line x1="12" y1="7" x2="12" y2="17"/>',
  554. OfficeBuilding: '<rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 21V3M15 21V3M4 9h16M4 15h16"/>',
  555. Money: '<circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5c.8-1 2.2-1.5 3.5-1 1.6.6 1.8 2.4.3 3.2-1.4.8-2.8 1-3.3 2.3-.5 1.2.4 2.5 2 2.8 1.3.2 2.5-.3 3.2-1.2"/>',
  556. Briefcase: '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="3" y1="12" x2="21" y2="12"/>',
  557. Message: '<path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.2A8 8 0 1 1 21 12z"/>',
  558. Setting: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.6 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
  559. Checked: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
  560. CollectionTag: '<path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V4h9l8.6 8.6a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.5"/>',
  561. Present: '<rect x="3" y="8" width="18" height="13" rx="1"/><path d="M12 8v13M3 12h18"/><path d="M12 8c-2-3-5-3-5-1s3 2 5 1c2 1 5 0 5-1s-3-2-5 1z"/>'
  562. }
  563. const ICON_NAMES = Object.keys(ICONS)
  564. const SAMPLE_APPS = [
  565. { id: '1', name: '请假申请', group: '人事考勤' },
  566. { id: '2', name: '差旅报销', group: '财务报销' },
  567. { id: '3', name: '用车申请', group: '行政后勤' },
  568. { id: '4', name: '合同用印', group: '行政后勤' },
  569. { id: '5', name: '加班申请', group: '人事考勤' },
  570. { id: '6', name: '采购申请', group: '财务报销' }
  571. ]
  572. /** 由淡色底得到同色系深色(图标色) */
  573. function iconFgFromBg(bg) {
  574. const key = String(bg || '').toLowerCase()
  575. if (FG_BY_BG[key]) return FG_BY_BG[key]
  576. // 兜底:把浅色压暗为同色系深色
  577. const m = key.match(/^#([0-9a-f]{6})$/i)
  578. if (!m) return '#059669'
  579. const n = parseInt(m[1], 16)
  580. const r = (n >> 16) & 255
  581. const g = (n >> 8) & 255
  582. const b = n & 255
  583. const dark = (c) => Math.max(0, Math.round(c * 0.35))
  584. return '#' + [dark(r), dark(g), dark(b)].map((x) => x.toString(16).padStart(2, '0')).join('')
  585. }
  586. function svgIcon(name, size = 20, stroke = '#059669') {
  587. const body = ICONS[name] || ICONS.Document
  588. return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="color:${stroke}">${body}</svg>`
  589. }
  590. function pick(arr) {
  591. return arr[Math.floor(Math.random() * arr.length)]
  592. }
  593. function randomIconState() {
  594. return { icon: pick(ICON_NAMES), color: pick(PASTEL_COLORS) }
  595. }
  596. function renderTile(el, icon, color, soft) {
  597. el.style.background = color
  598. el.classList.toggle('soft', !!soft)
  599. const fg = soft ? iconFgFromBg(color) : '#ffffff'
  600. el.innerHTML = svgIcon(icon, soft ? 16 : 16, fg)
  601. el.style.color = fg
  602. }
  603. // —— 对比区 ——
  604. const oldRow = document.getElementById('oldRow')
  605. const newRow = document.getElementById('newRow')
  606. OLD_COLORS.forEach((c) => {
  607. const d = document.createElement('div')
  608. d.className = 'swatch'
  609. d.style.background = c
  610. // 现状:固定三条杠
  611. d.innerHTML = `<svg viewBox="0 0 24 24" fill="#fff"><rect x="5" y="7" width="14" height="2.2" rx="1"/><rect x="5" y="11" width="14" height="2.2" rx="1"/><rect x="5" y="15" width="14" height="2.2" rx="1"/></svg>`
  612. oldRow.appendChild(d)
  613. })
  614. PASTEL_COLORS.forEach((c, i) => {
  615. const d = document.createElement('div')
  616. d.className = 'swatch soft'
  617. const fg = iconFgFromBg(c)
  618. d.style.background = c
  619. d.style.color = fg
  620. d.innerHTML = svgIcon(ICON_NAMES[i % ICON_NAMES.length], 16, fg)
  621. newRow.appendChild(d)
  622. })
  623. // —— 卡片 ——
  624. let apps = SAMPLE_APPS.map((a) => ({ ...a, ...randomIconState(), status: 'draft' }))
  625. function renderCards() {
  626. const row = document.getElementById('cardRow')
  627. row.innerHTML = ''
  628. apps.forEach((app) => {
  629. const card = document.createElement('div')
  630. card.className = 'oa-card'
  631. card.innerHTML = `
  632. <div class="oa-card__main">
  633. <span class="oa-card__icon" style="background:${app.color};color:${iconFgFromBg(app.color)}">${svgIcon(app.icon, 16, iconFgFromBg(app.color))}</span>
  634. <span>
  635. <span class="oa-card__name">${app.name}</span>
  636. <span class="oa-card__meta">
  637. <span class="tag warn">未发布</span>
  638. <span class="tag">启用</span>
  639. <span class="tag muted">${app.icon}</span>
  640. </span>
  641. </span>
  642. </div>
  643. <div class="oa-card__ops">
  644. <button class="btn primary" type="button" data-act="design">设计</button>
  645. <button class="btn" type="button" data-act="edit">编辑基础</button>
  646. </div>
  647. `
  648. card.querySelector('[data-act="edit"]').onclick = () => openDialog('edit', app)
  649. card.querySelector('[data-act="design"]').onclick = () => alert('Demo:进入设计器(图标会同步展示)')
  650. row.appendChild(card)
  651. })
  652. }
  653. // —— 弹窗状态 ——
  654. let mode = 'add'
  655. let editingId = null
  656. let state = randomIconState()
  657. const mask = document.getElementById('dialogMask')
  658. const preview = document.getElementById('preview')
  659. const iconPanel = document.getElementById('iconPanel')
  660. const iconGrid = document.getElementById('iconGrid')
  661. const colorRow = document.getElementById('colorRow')
  662. function paintPreview() {
  663. const fg = iconFgFromBg(state.color)
  664. preview.style.background = state.color
  665. preview.style.color = fg
  666. preview.innerHTML = svgIcon(state.icon, 26, fg)
  667. // sync active cells
  668. iconGrid.querySelectorAll('.icon-cell').forEach((c) => {
  669. c.classList.toggle('active', c.dataset.icon === state.icon)
  670. })
  671. colorRow.querySelectorAll('.color-dot').forEach((c) => {
  672. c.classList.toggle('active', c.dataset.color === state.color)
  673. })
  674. }
  675. function buildPanels() {
  676. iconGrid.innerHTML = ''
  677. ICON_NAMES.forEach((name) => {
  678. const cell = document.createElement('button')
  679. cell.type = 'button'
  680. cell.className = 'icon-cell'
  681. cell.dataset.icon = name
  682. cell.innerHTML = `${svgIcon(name, 20)}<span>${name}</span>`
  683. cell.onclick = () => {
  684. state.icon = name
  685. paintPreview()
  686. }
  687. iconGrid.appendChild(cell)
  688. })
  689. colorRow.innerHTML = ''
  690. PASTEL_COLORS.forEach((c) => {
  691. const dot = document.createElement('button')
  692. dot.type = 'button'
  693. dot.className = 'color-dot'
  694. dot.dataset.color = c
  695. dot.style.background = c
  696. dot.title = c
  697. dot.onclick = () => {
  698. state.color = c
  699. paintPreview()
  700. }
  701. colorRow.appendChild(dot)
  702. })
  703. }
  704. function openDialog(m, app) {
  705. mode = m
  706. iconPanel.classList.remove('open')
  707. document.getElementById('dialogTitle').textContent = m === 'add' ? '新增审批' : '编辑基础'
  708. if (m === 'add') {
  709. editingId = null
  710. state = randomIconState()
  711. document.getElementById('appName').value = ''
  712. document.getElementById('desc').value = ''
  713. } else {
  714. editingId = app.id
  715. state = { icon: app.icon, color: app.color }
  716. document.getElementById('appName').value = app.name
  717. document.getElementById('desc').value = ''
  718. }
  719. paintPreview()
  720. mask.classList.add('open')
  721. }
  722. function closeDialog() {
  723. mask.classList.remove('open')
  724. }
  725. document.getElementById('btnAdd').onclick = () => openDialog('add')
  726. document.getElementById('btnClose').onclick = closeDialog
  727. document.getElementById('btnCancel').onclick = closeDialog
  728. mask.addEventListener('click', (e) => { if (e.target === mask) closeDialog() })
  729. document.getElementById('btnPickIcon').onclick = () => {
  730. iconPanel.classList.toggle('open')
  731. }
  732. document.getElementById('btnClosePanel').onclick = () => iconPanel.classList.remove('open')
  733. document.getElementById('btnRandomColor').onclick = () => {
  734. state.color = pick(PASTEL_COLORS)
  735. paintPreview()
  736. }
  737. document.getElementById('btnRandomBoth').onclick = () => {
  738. state = randomIconState()
  739. paintPreview()
  740. }
  741. document.getElementById('btnRerollAll').onclick = () => {
  742. apps = apps.map((a) => ({ ...a, ...randomIconState() }))
  743. renderCards()
  744. }
  745. document.getElementById('btnOk').onclick = () => {
  746. const name = document.getElementById('appName').value.trim() || (mode === 'add' ? '未命名审批' : apps.find((a) => a.id === editingId)?.name)
  747. if (mode === 'add') {
  748. apps.unshift({
  749. id: String(Date.now()),
  750. name,
  751. group: document.getElementById('group').value,
  752. ...state,
  753. status: 'draft'
  754. })
  755. } else {
  756. const app = apps.find((a) => a.id === editingId)
  757. if (app) {
  758. app.name = name
  759. app.icon = state.icon
  760. app.color = state.color
  761. }
  762. }
  763. renderCards()
  764. closeDialog()
  765. }
  766. buildPanels()
  767. renderCards()
  768. </script>
  769. </body>
  770. </html>