From c91b487a1dd89c37e85424d82a7e7450740ddd90 Mon Sep 17 00:00:00 2001 From: zdh Date: Thu, 4 Jun 2026 16:20:52 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20UI/UX=20consistency=20audit=20=E2=80=94?= =?UTF-8?q?=20sidebar=20widths,=20primary=20colors,=20accessibility,=20con?= =?UTF-8?q?trast,=20reduced-motion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + index.html | 19 ++++++++++++++----- .../ai-usage-levels-for-software-company.html | 5 ++++- .../provincial-bidding-smart-supervision-platform.html | 2 +- 深国际综合改革方案/index.html | 1 + .../报告/深国际改革方案_专家头脑风暴.html | 1 + .../报告/深圳国际综合改革方案.html | 1 + .../报告/ai-transformation-plan.html | 2 +- .../报告/jinlu-deer-mall-requirements-analysis.html | 2 +- 9 files changed, 25 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index 377cbcf..d21a5bf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .superpowers/ qModel/.git/ 招标投标AI推广应用政策解读/.git/ +.claude/skills/ui-ux-pro-max/ diff --git a/index.html b/index.html index 42550cc..56575d6 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,8 @@ --border-light: #F0F0F0; --text-primary: #141414; --text-secondary: #595959; - --text-tertiary: #8C8C8C; + --text-tertiary: #767676; + --z-header: 100; --z-drawer: 200; --z-overlay: 300; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; @@ -39,7 +40,8 @@ --border-light: #2C2C2E; --text-primary: #D1D1D6; --text-secondary: #8E8E93; - --text-tertiary: #636366; + --text-tertiary: #8E8E93; + --z-header: 100; --z-drawer: 200; --z-overlay: 300; --shadow-sm: 0 1px 2px rgba(0,0,0,0.15), 0 1px 4px -1px rgba(0,0,0,0.1); --shadow-md: 0 2px 4px rgba(0,0,0,0.2), 0 4px 10px -2px rgba(0,0,0,0.15); --drawer-bg: #1C1C1E; @@ -48,10 +50,13 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text-primary); - line-height: 1.57; font-size: 14px; min-height: 100vh; + line-height: 1.6; font-size: 14px; min-height: 100vh; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, color 0.2s ease; } +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } +} ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } @@ -114,6 +119,7 @@ body { -webkit-tap-highlight-color: transparent; min-height: 36px; } .chip:active { transform: scale(0.96); } +.chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .chip .chip-count { font-size: 11px; background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 5px; } .chip.active .chip-count { background: rgba(255,255,255,0.25); } @@ -135,6 +141,7 @@ body { transition: all 0.12s ease; text-decoration: none; min-height: 40px; } .sidebar .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); } +.sidebar .nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); } .sidebar .nav-item.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; } .sidebar .nav-item .nav-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; } .sidebar .nav-item .nav-count { @@ -144,7 +151,7 @@ body { .sidebar .nav-item.active .nav-count { background: rgba(22,119,255,0.12); color: var(--color-primary); } .sidebar .sub-nav { padding-left: 24px; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .sidebar .sub-nav.open { max-height: 500px; } -.sidebar .sub-nav .nav-item { font-size: 12px; padding: 5px 12px; } +.sidebar .sub-nav .nav-item { font-size: 12px; padding: 8px 12px; min-height: 36px; } .sidebar .theme-section { padding: 12px 16px; border-top: 1px solid var(--border-light); margin-top: 8px; } @@ -206,6 +213,7 @@ body { transition: all 0.2s ease; text-decoration: none; color: var(--text-primary); display: block; } .all-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } +.all-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-md); } .all-card:active { transform: scale(0.99); } .all-card .card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; } .all-card .card-desc { @@ -225,12 +233,13 @@ body { cursor: pointer; user-select: none; transition: background 0.12s ease; min-height: 44px; } .wiki-toc-header:hover { background: var(--color-primary-bg); } +.wiki-toc-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-md); } .wiki-toc-header .toc-icon { font-size: 16px; transition: transform 0.2s ease; } .wiki-toc-header.open .toc-icon { transform: rotate(90deg); } .wiki-toc-header .toc-title { font-size: 14px; font-weight: 600; flex: 1; } .wiki-toc-header .toc-count { font-size: 12px; color: var(--text-tertiary); } .wiki-toc-body { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } -.wiki-toc-body.open { max-height: 2000px; } +.wiki-toc-body.open { max-height: none; } .wiki-toc-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 42px; border-bottom: 1px solid var(--border-light); transition: background 0.1s ease; diff --git a/抖音主题/报告/ai-usage-levels-for-software-company.html b/抖音主题/报告/ai-usage-levels-for-software-company.html index add8665..1293415 100644 --- a/抖音主题/报告/ai-usage-levels-for-software-company.html +++ b/抖音主题/报告/ai-usage-levels-for-software-company.html @@ -12,7 +12,7 @@ --color-error: #FF4D4F; --color-error-bg: #FFF2F0; --color-error-border: #FFCCC7; --bg: #F5F5F5; --bg-container: #FFFFFF; --bg-elevated: #FAFAFA; --border: #D9D9D9; --border-light: #F0F0F0; - --text-primary: #141414; --text-secondary: #595959; --text-tertiary: #8C8C8C; + --text-primary: #141414; --text-secondary: #595959; --text-tertiary: #767676; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.03),0 1px 6px -1px rgba(0,0,0,0.02); --shadow-md: 0 2px 4px rgba(0,0,0,0.04),0 4px 12px -2px rgba(0,0,0,0.04); @@ -108,6 +108,9 @@ .back-to-top.show{display:flex;align-items:center;justify-content:center;} @media(max-width:992px){:root{--sidebar-w:220px;}.main{padding:24px 20px 48px;}} + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } + } @media(max-width:768px){ .menu-btn{display:flex;align-items:center;justify-content:center;} .sidebar{display:block;position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;transform:translateX(-100%);transition:transform .25s ease;z-index:201;padding-top:60px;} diff --git a/招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html b/招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html index 44a05d2..65732c6 100644 --- a/招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html +++ b/招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html @@ -33,7 +33,7 @@ --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02); --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04); --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.08); - --sidebar-w: 280px; + --sidebar-w: 260px; --header-h: 64px; } * { margin: 0; padding: 0; box-sizing: border-box; } diff --git a/深国际综合改革方案/index.html b/深国际综合改革方案/index.html index 22a35a5..ead0ef5 100644 --- a/深国际综合改革方案/index.html +++ b/深国际综合改革方案/index.html @@ -6,6 +6,7 @@ 深国际综合改革方案 — 系列报告