feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库

## 品牌标识（本次会话）起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」，那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」，移动端站已是「K」；移动端文档站则完全没有 favicon）。 - 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边；描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」 - 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）；顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)） - 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg） - 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留） - 移动端 7 个模板补 favicon（此前计数 0）验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/ theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致；两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。 ## 并行会话成果（本次一并入库） - 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具 + IconPreview 预览页 + ICON-SPEC.md 冻结规格 - 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁 - PC 组件：103 个大后台组件 / 组件11 批次 - uni-app：PC 端试点 + 移动端端实现 + 真实编译验证 ## 工程 - .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库） - CHANGELOG 补品牌标识条目 - ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
2026-09-21 10:05:48 +08:00
parent eb25feedaf
commit f1fbfc2ddb
2541 changed files with 270385 additions and 25873 deletions
@@ -1,13 +1,13 @@
-/* Aurora Admin ImagePreview 样式 — 图片大图预览，遮罩 + 左右切换 + 缩略图 */
+/* Kole UI ImagePreview 样式 — 图片大图预览，遮罩 + 左右切换 + 缩略图 */

-.aa-imgprev-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2500; display: flex; align-items: center; justify-content: center; flex-direction: column; }
-.aa-imgprev-img { max-width: 80vw; max-height: 70vh; border-radius: 4px; }
-.aa-imgprev-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--au-color-text-inverse); font-size: 20px; cursor: pointer; }
-.aa-imgprev-arrow:hover { background: rgba(255,255,255,0.3); }
-.aa-imgprev-arrow.prev { left: 24px; }
-.aa-imgprev-arrow.next { right: 24px; }
-.aa-imgprev-close { position: absolute; top: 20px; right: 24px; color: var(--au-color-text-inverse); font-size: 24px; cursor: pointer; background: none; border: none; }
-.aa-imgprev-thumbs { display: flex; gap: 8px; margin-top: 16px; }
-.aa-imgprev-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
-.aa-imgprev-thumb.is-active { border-color: var(--au-color-brand); }
-.aa-imgprev-count { color: var(--au-color-text-inverse); font-size: 13px; margin-top: 8px; }
+.kole-imgprev-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2500; display: flex; align-items: center; justify-content: center; flex-direction: column; }
+.kole-imgprev-img { max-width: 80vw; max-height: 70vh; border-radius: 4px; }
+.kole-imgprev-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--kole-color-text-inverse); font-size: 20px; cursor: pointer; }
+.kole-imgprev-arrow:hover { background: rgba(255,255,255,0.3); }
+.kole-imgprev-arrow.prev { left: 24px; }
+.kole-imgprev-arrow.next { right: 24px; }
+.kole-imgprev-close { position: absolute; top: 20px; right: 24px; color: var(--kole-color-text-inverse); font-size: 24px; cursor: pointer; background: none; border: none; }
+.kole-imgprev-thumbs { display: flex; gap: 8px; margin-top: 16px; }
+.kole-imgprev-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
+.kole-imgprev-thumb.is-active { border-color: var(--kole-color-brand); }
+.kole-imgprev-count { color: var(--kole-color-text-inverse); font-size: 13px; margin-top: 8px; }
@@ -3,21 +3,21 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Aurora Admin · ImagePreview（普通 H5）</title>
-  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <title>Kole UI · ImagePreview（普通 H5）</title>
+  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="ImagePreview.css" />
-  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:8px;}
-    .aa-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;border: 1px solid var(--au-color-border);}</style>
+  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);display:flex;gap:8px;}
+    .kole-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;border: 1px solid var(--kole-color-border);}</style>
 </head>
 <body>
  <div id="thumbs"></div>
-  <div class="aa-imgprev-mask" aria-modal="true" id="mask" style="display:none">
-    <button class="aa-imgprev-close" role="button" tabindex="0" aria-modal="true" id="close">✕</button>
-    <button class="aa-imgprev-arrow prev" role="dialog" aria-modal="true" id="prev">‹</button>
-    <img class="aa-imgprev-img" aria-modal="true" id="big" />
-    <button class="aa-imgprev-arrow next" role="dialog" aria-modal="true" id="next">›</button>
-    <div class="aa-imgprev-count" role="dialog" aria-modal="true" id="count"></div>
-    <div class="aa-imgprev-thumbs" role="dialog" aria-modal="true" id="strip"></div>
+  <div class="kole-imgprev-mask" aria-modal="true" id="mask" style="display:none">
+    <button class="kole-imgprev-close" role="button" tabindex="0" aria-modal="true" id="close">✕</button>
+    <button class="kole-imgprev-arrow prev" role="dialog" aria-modal="true" id="prev">‹</button>
+    <img class="kole-imgprev-img" aria-modal="true" id="big" />
+    <button class="kole-imgprev-arrow next" role="dialog" aria-modal="true" id="next">›</button>
+    <div class="kole-imgprev-count" role="dialog" aria-modal="true" id="count"></div>
+    <div class="kole-imgprev-thumbs" role="dialog" aria-modal="true" id="strip"></div>
  </div>

  <script>
@@ -32,9 +32,9 @@
    var mask = document.getElementById('mask');

    document.getElementById('thumbs').innerHTML = IMGS.map(function (u, i) {
-      return '<img class="aa-thumb" role="button" tabindex="0" src="' + u + '" data-i="' + i + '">';
+      return '<img class="kole-thumb" role="button" tabindex="0" src="' + u + '" data-i="' + i + '">';
    }).join('');
-    document.querySelectorAll('.aa-thumb').forEach(function (t) {
+    document.querySelectorAll('.kole-thumb').forEach(function (t) {
      t.onclick = function () { cur = parseInt(t.dataset.i, 10); show(); };
    });

@@ -43,9 +43,9 @@
      document.getElementById('big').src = IMGS[cur];
      document.getElementById('count').textContent = (cur + 1) + ' / ' + IMGS.length;
      document.getElementById('strip').innerHTML = IMGS.map(function (u, i) {
-        return '<img class="aa-imgprev-thumb ' + (i === cur ? 'is-active' : '') + '" role="dialog" aria-modal="true" src="' + u + '" data-i="' + i + '">';
+        return '<img class="kole-imgprev-thumb ' + (i === cur ? 'is-active' : '') + '" role="dialog" aria-modal="true" src="' + u + '" data-i="' + i + '">';
      }).join('');
-      document.querySelectorAll('.aa-imgprev-thumb').forEach(function (th) {
+      document.querySelectorAll('.kole-imgprev-thumb').forEach(function (th) {
        th.onclick = function () { cur = parseInt(th.dataset.i, 10); show(); };
      });
    }
@@ -6,15 +6,15 @@ export default function ImagePreview({ images = [], visible = false, index = 0,
  const len = images.length || 1;
  const go = dir => onChange && onChange((index + dir + len) % len);
  return (
-    <div className="aa-imgprev-mask" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>
-      <button className="aa-imgprev-close" onClick={onClose}>✕</button>
-      <button className="aa-imgprev-arrow prev" onClick={() => go(-1)}>‹</button>
-      <img className="aa-imgprev-img" src={images[index]} alt={index} />
-      <button className="aa-imgprev-arrow next" onClick={() => go(1)}>›</button>
-      <div className="aa-imgprev-count">{index + 1} / {len}</div>
-      <div className="aa-imgprev-thumbs">
+    <div className="kole-imgprev-mask" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>
+      <button className="kole-imgprev-close" onClick={onClose}>✕</button>
+      <button className="kole-imgprev-arrow prev" onClick={() => go(-1)}>‹</button>
+      <img className="kole-imgprev-img" src={images[index]} alt={index} />
+      <button className="kole-imgprev-arrow next" onClick={() => go(1)}>›</button>
+      <div className="kole-imgprev-count">{index + 1} / {len}</div>
+      <div className="kole-imgprev-thumbs">
        {images.map((u, i) => (
-          <img key={i} className={'aa-imgprev-thumb' + (i === index ? ' is-active' : '')}
+          <img key={i} className={'kole-imgprev-thumb' + (i === index ? ' is-active' : '')}
               src={u} onClick={() => onChange && onChange(i)} />
        ))}
      </div>
@@ -1,12 +1,12 @@
 <template>
-  <div class="aa-imgprev-mask" v-if="visible" @click.self="$emit('close')">
-    <button class="aa-imgprev-close" @click="$emit('close')">✕</button>
-    <button class="aa-imgprev-arrow prev" @click="go(-1)">‹</button>
-    <img class="aa-imgprev-img" :src="images[index]" :alt="index" />
-    <button class="aa-imgprev-arrow next" @click="go(1)">›</button>
-    <div class="aa-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
-    <div class="aa-imgprev-thumbs">
-      <img v-for="(u, i) in images" :key="i" class="aa-imgprev-thumb" :class="{ 'is-active': i === index }"
+  <div class="kole-imgprev-mask" v-if="visible" @click.self="$emit('close')">
+    <button class="kole-imgprev-close" @click="$emit('close')">✕</button>
+    <button class="kole-imgprev-arrow prev" @click="go(-1)">‹</button>
+    <img class="kole-imgprev-img" :src="images[index]" :alt="index" />
+    <button class="kole-imgprev-arrow next" @click="go(1)">›</button>
+    <div class="kole-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
+    <div class="kole-imgprev-thumbs">
+      <img v-for="(u, i) in images" :key="i" class="kole-imgprev-thumb" :class="{ 'is-active': i === index }"
           :src="u" @click="$emit('change', i)" />
    </div>
  </div>
@@ -14,7 +14,7 @@

 <script>
 export default {
-  name: 'AaImagePreview',
+  name: 'KoleImagePreview',
  props: { images: { type: Array, default: function () { return []; } }, visible: { type: Boolean, default: false }, index: { type: Number, default: 0 } },
  methods: {
    go: function (dir) {
@@ -1,12 +1,12 @@
 <template>
-  <div class="aa-imgprev-mask" v-if="visible" @click.self="emit('close')">
-    <button class="aa-imgprev-close" @click="emit('close')">✕</button>
-    <button class="aa-imgprev-arrow prev" @click="go(-1)">‹</button>
-    <img class="aa-imgprev-img" :src="images[index]" :alt="index" />
-    <button class="aa-imgprev-arrow next" @click="go(1)">›</button>
-    <div class="aa-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
-    <div class="aa-imgprev-thumbs">
-      <img v-for="(u, i) in images" :key="i" class="aa-imgprev-thumb" :class="{ 'is-active': i === index }"
+  <div class="kole-imgprev-mask" v-if="visible" @click.self="emit('close')">
+    <button class="kole-imgprev-close" @click="emit('close')">✕</button>
+    <button class="kole-imgprev-arrow prev" @click="go(-1)">‹</button>
+    <img class="kole-imgprev-img" :src="images[index]" :alt="index" />
+    <button class="kole-imgprev-arrow next" @click="go(1)">›</button>
+    <div class="kole-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
+    <div class="kole-imgprev-thumbs">
+      <img v-for="(u, i) in images" :key="i" class="kole-imgprev-thumb" :class="{ 'is-active': i === index }"
           :src="u" @click="emit('change', i)" />
    </div>
  </div>