From 9f1a79ae03ccd311faed4fc3258418ba3ba9e701 Mon Sep 17 00:00:00 2001 From: YANG JIANKUAN Date: Thu, 5 Nov 2026 12:23:40 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E5=86=85=E5=AE=B9=E5=8C=BA?= =?UTF-8?q?=E5=9B=9B=E8=A7=92=E6=94=B9=E4=B8=BA=E7=9B=B4=E8=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 内容区原来只有左上角 12px 圆角、左下角是直角，看着不统一；去掉 .main 和 .top 的左上角圆角。 设计规范 §5.3、UI demo 和原型的样式同步修改。 Co-Authored-By: Claude Opus 5.5 --- apps/web/src/styles/app.css | 6 +++--- docs/design/design-system.md | 4 ++-- docs/design/ui-demo/demo.css | 6 +++--- docs/prototype/assets/app.css | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css index 14b3630..08fe334 100644 --- a/apps/web/src/styles/app.css +++ b/apps/web/src/styles/app.css @@ -8,7 +8,7 @@ * 与原型的差别：原型把框架挂在 body.app 上，这里挂在 AppShell 的根元素 .app-frame 上。 */ /* ===================================================================== - * 1. 页面框架：96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角 + * 1. 页面框架：96px 墨色渐变侧栏 + 透明顶栏；内容区四角都是直角（侧栏贴边，不做圆角衔接） * ===================================================================== */ .app-frame{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed} .sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0} @@ -31,8 +31,8 @@ .plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)} .plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)} -.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)} -.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} +.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)} +.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)} .crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden} .crumbs > *{min-width:0;overflow:hidden;text-overflow:ellipsis} diff --git a/docs/design/design-system.md b/docs/design/design-system.md index de19cdc..0d16c22 100644 --- a/docs/design/design-system.md +++ b/docs/design/design-system.md @@ -207,7 +207,7 @@ ┌──────┬────────────────────────────────────────────────────┐ │ 侧栏 │ 顶栏（透明）：公司 / 页面 搜索 │ 额度 · 通知 │ │ 96px ├────────────────────────────────────────────────────┤ -│ logo │╭ 内容区（浅灰底，左上角 12px 圆角压在侧栏深色上） │ +│ logo ││ 内容区（浅灰底，四角直角，直接贴着侧栏） │ │ 菜单 ││ │ │ … ││ 页面内容（三种主布局见下） │ │ 头像 ││ │ @@ -229,7 +229,7 @@ - 顶栏不用深色，避免和侧栏连成一个「门」字形边框。 **内容区**： -- 浅灰底 `--bg-page`，左上角 12px 圆角，压在侧栏的深色上。 +- 浅灰底 `--bg-page`，四角都是直角，直接贴着侧栏（2026-11-05 改：原为左上角 12px 圆角，只有左上角圆、左下角是直角，看着不统一）。 - 页面左右内边距 32px，1400px 以下为 24px。 | 布局 | 页面 | 结构 | diff --git a/docs/design/ui-demo/demo.css b/docs/design/ui-demo/demo.css index ee6ae84..85f3d7c 100644 --- a/docs/design/ui-demo/demo.css +++ b/docs/design/ui-demo/demo.css @@ -81,7 +81,7 @@ table.data.keys td:first-child{width:1%;padding-right:var(--sp-6)} /* 快捷 .ic.xl{width:32px;height:32px;stroke-width:1.25} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} -/* ---- B2 页面框架 v0.2（§5.3）：96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角 ---- +/* ---- B2 页面框架 v0.2（§5.3）：96px 墨色渐变侧栏 + 透明顶栏；内容区四角直角（2026-11-05 改） ---- * 结构由 demo.js 的 Demo.shell() 生成：body.app > aside.sidebar + main.main > header.top + 页面内容 */ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed} .sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 0 var(--sp-4) 10px;color:var(--side-fg);min-width:0} @@ -105,8 +105,8 @@ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-heig .plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)} .plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)} -.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)} -.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} +.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)} +.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)} /* 左侧「公司 / 页面」 */ .crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden} diff --git a/docs/prototype/assets/app.css b/docs/prototype/assets/app.css index f1137df..5d2269d 100644 --- a/docs/prototype/assets/app.css +++ b/docs/prototype/assets/app.css @@ -9,7 +9,7 @@ * v0.1 的 216px 侧栏、校样纸底色、2px 圆角已删除。 */ /* ===================================================================== - * 1. 页面框架 v0.2（§5.3）：96px 墨色渐变侧栏 + 透明顶栏 + 内容区左上角圆角 + * 1. 页面框架 v0.2（§5.3）：96px 墨色渐变侧栏 + 透明顶栏；内容区四角直角（2026-11-05 改） * 结构：body.app > aside.sidebar + main.main > header.top + [header.ph 项目头] + 页面内容 * ===================================================================== */ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-width:1280px;background:linear-gradient(180deg,var(--side-top) 0%,var(--side-bottom) 100%) fixed} @@ -34,8 +34,8 @@ body.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-heig .plan[data-plan="pro"]{background:var(--plan-pro-bg);color:var(--plan-pro-fg);box-shadow:inset 0 0 0 1px var(--plan-pro-line)} .plan[data-plan="ent"]{background:var(--plan-ent-bg);color:var(--c-ink)} -.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page);border-top-left-radius:var(--radius-card)} -.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;border-top-left-radius:var(--radius-card);transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} +.main{min-width:0;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-page)} +.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);padding:0 var(--pad-page);background:transparent;border-bottom:var(--line) solid transparent;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)} .top.scrolled{background:var(--topbar-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border-subtle)} /* 左侧「公司 / 页面」 */ .crumbs{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text-secondary);white-space:nowrap;overflow:hidden}