Leo
5a48abb784
## ① logo 比例不對＋深色仍有白底＋旁邊大量空白
三個症狀同一個根：**我用的是未裁淨的原始 PNG**。
portal 的註解早就寫著：原始 1840x560 **只有 32% 高度是實際字形**，上下大留白
⇒ 同 height 字看起來很小；留白處露出 paper-on-ink 自帶的 Ink 底板＝白底。
portal 用的是裁淨版（986x176），但**只內嵌在它的 HTML base64 裡**，我抄不到才用了原始圖。
修：
- 從 portal 的 base64 抽出兩張裁淨版，存成 arcrun-cis/trimmed/ 供全站共用
- 兩張**都是透明底**（實測四邊留白 0）⇒ 深色模式**拿掉 Ink 底板**
- 空白是**版面**造成：側欄 232px 扣 padding 剩 184px，logo 高 24px 只有 134px ⇒ 空 50px
⇒ 側欄對齊 portal 的 216px，logo 改 width:100% 填滿可用寬度
實測（渲染後量像素）：
logo 26px 高 × 151px 寬，右側剩餘空白 1px（原本 50px）
深色：側欄底(18,18,18) vs logo 上下皆(18,18,18) ⇒ 落差 0，無白底
## ② 側邊欄選中態太粗糙
leo：「參考現在 Portal 的格式⋯⋯這個比現在膠囊反紅精緻，重點是跟 portal 的形象符合」
修：逐字照 portal 的 #sidenav .nav.on ——
**不是實心膠囊**，而是 amber 字色 ＋ 8% amber 底 ＋ 右側 2px amber 邊。
側欄右緣也照 portal 用 2px amber 35%。
實測：選中列底(237,228,222)=amber 8%、右緣(176,74,47)=Relation、未選(242,241,237)=Canvas。
## 機械閘加三項守衛
- 不准用未裁淨的原始 lockup（字會太小）
- 選中態必須有 border-right-color: var(--amber)
- 不准再出現 border-radius:999px（膠囊，leo 已否決）
兩支閘全過；style.css 仍 0 個 hex。
58 lines
3.3 KiB
Bash
Executable File
58 lines
3.3 KiB
Bash
Executable File
#!/usr/bin/env bash
|
||
# check-cis.sh — CIS 合規機械檢查（t193）
|
||
#
|
||
# 🔴 leo 2026-08-04：「CIS 已經提供規範，你做的**連 Logo 都沒放上去**，
|
||
# 這跟美不美有關係嗎？要求放進 CIS 是**硬要求**，**你做為檢查有嗎？沒有怎麼交貨？**」
|
||
# ⇒ 交貨前先跑這支。不過就不准交。
|
||
set -uo pipefail
|
||
cd "$(dirname "$0")"
|
||
# 色票/字體/紋理在共用底層；版面在 style.css ⇒ 兩份都要看
|
||
CSS=frontend/src/arcrun-cis.css
|
||
LAYOUT=frontend/src/style.css
|
||
HTML=frontend/index.html
|
||
FAIL=0
|
||
ok(){ printf " ✅ %s\n" "$1"; }
|
||
ng(){ printf " ❌ %s\n" "$1"; FAIL=1; }
|
||
|
||
echo "━━━ CIS 合規檢查 ━━━"
|
||
|
||
# ① 官方色票（arcrun-cis/README.md 的 Colour 表）必須逐個出現
|
||
for t in "#FDFCFB:Paper" "#F2F1ED:Canvas" "#17181A:Ink" "#B04A2F:Relation" "#D9784F:Relation-dark"; do
|
||
hex="${t%%:*}"; name="${t##*:}"
|
||
grep -qi "$hex" "$CSS" && ok "色票 $name $hex" || ng "缺色票 $name $hex"
|
||
done
|
||
|
||
# ② 不准自創顏色：抓不在白名單內的 hex
|
||
# 版面檔**一個 hex 都不准有**（顏色一律 var(--...)）
|
||
STRAY_LAYOUT=$(grep -oiE '#[0-9a-f]{6}' "$LAYOUT" || true)
|
||
[ -z "$STRAY_LAYOUT" ] && ok "版面檔沒有寫死顏色" || ng "版面檔出現 hex：$STRAY_LAYOUT"
|
||
|
||
STRAY=$(grep -oiE '#[0-9a-f]{6}' "$CSS" | tr 'a-f' 'A-F' | sort -u \
|
||
| grep -vE '#(FDFCFB|F2F1ED|17181A|B04A2F|D9784F|1D7A48|7FE0A8|B03A26|E58575|1B1C1E|1E1F21|1D6B40|A8E8C4)' || true)
|
||
[ -z "$STRAY" ] && ok "沒有自創顏色" || ng "出現非 CIS 色：$(echo $STRAY | tr '\n' ' ')"
|
||
|
||
# ③ Logo 必須真的放進去（leo 點名的那條）
|
||
grep -q "arcrun-lockup-h-ink-trimmed.png" "$HTML" && ok "淺色 lockup（裁淨版）已放" || ng "缺淺色裁淨版 lockup"
|
||
grep -q "arcrun-lockup-h-paper-trimmed.png" "$HTML" && ok "深色 lockup（裁淨版）已放" || ng "缺深色裁淨版 lockup"
|
||
[ -f frontend/src/assets/arcrun-lockup-h-ink-trimmed.png ] && ok "lockup 檔案存在" || ng "lockup 檔案不存在"
|
||
# 🔴 不准用未裁淨的原始 PNG：1840x560 只有 32% 高是字形，同 height 看起來字很小
|
||
grep -qE 'lockup-h-(ink|paper-on-ink)\.png' "$HTML" && ng "用到未裁淨的原始 lockup（字會太小）" || ok "沒用未裁淨的原始圖"
|
||
# 側邊欄選中態要照 portal（amber 字＋8% 底＋右緣 2px），不是實心膠囊
|
||
grep -q "border-right-color: var(--amber)" "$LAYOUT" && ok "選中態同 portal（右緣 amber）" || ng "選中態未照 portal"
|
||
grep -q "border-radius: 999px" "$LAYOUT" && ng "還在用膠囊選中態（leo 已否決）" || ok "沒有膠囊選中態"
|
||
grep -q "lockup-h.svg" "$HTML" 2>/dev/null && ng "用到已作廢的 SVG lockup（字腔缺失）" || ok "沒用作廢的 SVG lockup"
|
||
|
||
# ④ 深淺色都要成立（portal 有 data-theme，這裡也要）
|
||
grep -q 'data-theme="dark"' "$CSS" && ok "有深色模式色票" || ng "缺深色模式"
|
||
|
||
# ⑤ 字體與背景紋理要與 portal 一致
|
||
grep -q "IBM Plex Sans" "$CSS" && ok "字體同 portal" || ng "字體與 portal 不一致"
|
||
grep -q "repeating-linear-gradient" "$CSS" && ok "紙張紋理同 portal" || ng "缺 portal 的紙張紋理"
|
||
|
||
# ⑥ App icon 用官方檔
|
||
[ -f build/appicon.png ] && ok "app icon 存在" || ng "缺 app icon"
|
||
|
||
echo
|
||
[ $FAIL -eq 0 ] && echo "✅ CIS 檢查全過" || echo "❌ CIS 檢查未過——**不准交貨**"
|
||
exit $FAIL
|