fix(web): restore master composer geometry

This commit is contained in:
kingwl committed 2026-10-09 18:38:13 +08:00
1 parent 9c8d8efd22
commit a0d31a9f27
11 files changed
+38 -47

No files matched your search

+6 -6
View File
@@ -15,14 +15,14 @@
en: cd8120cba5566e19
zh: 65359436088c8bc5
/dsh-unified-corner-radius-standard/select-the-radius:
en: e656a4338333da37
zh: 504abf8b0f5fc8f1
en: e736416ec85d6e16
zh: 0edf60fccc867295
/dsh-unified-corner-radius-standard/reuse-tokens-and-preserve-deliberate-shapes:
en: 57074166ec5a6149
zh: 3065680007c3a436
en: fb6d50f3139ad186
zh: 668cb0c02bd22167
/dsh-unified-corner-radius-standard/nested-geometry-and-hover:
en: ffe2954cdba61ca6
zh: 56bd59debb04fe34
en: 7fe4eb7707e6a9f3
zh: be7530a05c205e27
/dsh-unified-corner-radius-standard/settings-card-materials:
en: 85e7e63183df06d1
zh: 1da2b44083d7ebe2
+2 -4
View File
@@ -34,7 +34,7 @@ H means designed outer height in CSS pixels, including borders. R means CSS `bor
| Standard control or single-line cell | H32–40; buttons, inputs, selects, navigation rows | R12 | `--dsw-radius-md` |
| Large control or grouped content | Large buttons, deliberately multiline cells, nested form groups | R16 | `--dsw-radius-lg` |
| Independent content card | Settings cards, message bubbles, guide entry cards | R20 | `--dsw-radius-xl` |
| Main enclosing surface | Dialogs, main or floating panels | R28 | `--dsw-radius-panel` |
| Main enclosing surface | Composer, dialogs, main or floating panels | R28 | `--dsw-radius-panel` |
Prefer an existing shared size variant when a proposed control falls between these bands. A taller card remains a card: do not promote it to R28 merely because it exceeds a button's height. A multiline cell intentionally designed for multiple lines uses R16; an ordinary button whose label wraps retains its button variant.
@@ -49,7 +49,7 @@ Reuse `ui-primitives` controls before adding feature-owned geometry. Use `box-si
Consume the named tokens instead of introducing local values such as 10px, 14px, 18px, or 24px for ordinary controls and cards. Schedule controls, Desktop onboarding, account notices, and shortcut controls retain their package-owned geometry; the [radius exception record](../packages/client/ui-theme/tests/expected/radius-exceptions.expected.json) pins each permitted file, selector, and declaration rather than exempting whole packages. A family-specific property may refer to a shared token, as `--dsl-guide-entry-radius` does. Geometry derived from a real inset may use `calc()`; it is not an additional scale tier.
Ordinary rounded surfaces use the theme's `superellipse(1.5)` curve where supported; the composer follows the circular [concentric-inset rule](#nested-hover). `corner-shape` is not inherited: the theme applies it to elements and their `::before`/`::after`. Unsupported engines retain ordinary circular corners. Do not introduce component-specific smoothing that makes a fill and its outline curve differently.
Ordinary rounded surfaces use the theme's `superellipse(1.5)` curve where supported. `corner-shape` is not inherited: the theme applies it to elements and their `::before`/`::after`. Unsupported engines retain ordinary circular corners. Do not introduce component-specific smoothing that makes a fill and its outline curve differently.
Preserve intentional circles and capsules: avatars and status dots use `50%`; explicit pills and full-round tracks may use `999px`. Pair every such full-round declaration with `corner-shape: round` in the same rule. Do not turn every button into a capsule just because its height is small. Tiny drawing details, such as glyph marks or miniature tracks, may retain their established local geometry; they do not justify arbitrary radii on surrounding controls.
@@ -68,8 +68,6 @@ Distinguish these three arrangements before changing a child radius:
| Fill flush against an enclosing edge | The enclosure owns the visible corner; clip the fill or inherit the matching corner | A split-button card with two independent hover regions |
| Separate card or form group inside another surface | Choose the child's semantic tier; do not subtract all parent padding mechanically | R16 editor within an R20 settings card |
The composer uses circular arcs at all four corners, with outer R = primary-button diameter / 2 + its equal right and bottom inset. A 34px button and 8px inset give R25. With the toolbar on one line, the lower-right arc and primary button share a center. The 28px attachment button stays aligned with the smaller toolbar controls; its unequal left and bottom insets preserve the row's visual balance. The workspace-picker outline inherits the card's radius and curve.
Standard menus use outer R16, 4px padding, and R12 items, including command selection, task menus, and the exposed highlights in subagent and background-job menus. Tree disclosure gutters retain their indentation; controls inside a filled job row keep their own compact geometry. Compact menus use outer R12, 4px padding, and R8 items. Shared `SegmentedControl` uses outer R12, 4px inset, and R8 segments/indicator; `SegmentedTabs` uses outer R16, 4px inset, and R12 segments/indicator. Keep indicator offsets, width calculations, submenu alignment, and pointer bridges consistent when changing padding.
The radius subtraction is also the nominal sizing rule for nested superellipses. Equal exponents do not make them exact offset curves, so their diagonal gap may differ from the side inset. Keep the shared superellipse menu and segmented-control treatments; use circular arcs when strict equal radial spacing is required.
+2 -4
View File
@@ -34,7 +34,7 @@ H 表示以 CSS 像素计、包含边框的设计外部高度。R 表示浏览
| 标准控件或单行 cell | H32–40;按钮、输入框、选择器、导航行 | R12 | `--dsw-radius-md` |
| 大控件或分组内容 | 大按钮、明确设计为多行的 cell、嵌套表单组 | R16 | `--dsw-radius-lg` |
| 独立内容卡片 | 设置卡片、消息气泡、引导入口卡片 | R20 | `--dsw-radius-xl` |
| 主容器 | 对话框、主面板或悬浮面板 | R28 | `--dsw-radius-panel` |
| 主容器 | 对话输入框、对话框、主面板或悬浮面板 | R28 | `--dsw-radius-panel` |
拟定控件尺寸落在档位之间时,优先复用已有的公共尺寸变体。高卡片仍是卡片,不因高度超过按钮就升到 R28。专门设计为多行的 cell 使用 R16;普通按钮的文字发生换行时,仍保留其按钮变体。
@@ -49,7 +49,7 @@ H 表示以 CSS 像素计、包含边框的设计外部高度。R 表示浏览
普通控件和卡片使用具名 token,不新增 10px、14px、18px、24px 等局部数值。计划任务控件、Desktop 引导、账号通知和快捷键控件保留所属包的几何规则;[圆角例外记录](../packages/client/ui-theme/tests/expected/radius-exceptions.expected.json)逐项固定允许的文件、选择器及声明,不豁免整个包。组件族专用属性可引用共享 token,例如 `--dsl-guide-entry-radius`。由真实内缩距离派生的几何可使用 `calc()`;它不构成新的尺度档位。
普通圆角表面在支持时使用主题的 `superellipse(1.5)` 曲线;对话输入框遵循圆弧的[同心内缩规则](#nested-hover)。`corner-shape` 不会继承:主题将它应用于元素及其 `::before`/`::after`。不支持的引擎保留普通圆弧。不要添加组件专用的平滑规则,导致底色与外框使用不同曲线。
普通圆角表面在支持时使用主题的 `superellipse(1.5)` 曲线。`corner-shape` 不会继承:主题将它应用于元素及其 `::before`/`::after`。不支持的引擎保留普通圆弧。不要添加组件专用的平滑规则,导致底色与外框使用不同曲线。
保留有意设计的圆形与胶囊:头像和状态点使用 `50%`;明确的胶囊与全圆轨道可使用 `999px`。每个此类全圆声明都在同一规则中配对 `corner-shape: round`。不要因为高度较小就把所有按钮变成胶囊。图形标记或微型轨道等细小绘制细节可保留既有局部几何,但不能据此给外围控件使用任意圆角。
@@ -68,8 +68,6 @@ H 表示以 CSS 像素计、包含边框的设计外部高度。R 表示浏览
| 底色紧贴容器边缘 | 由外框决定可见圆角;裁切底色或继承相应圆角 | 两个独立 hover 区域组成的分体按钮卡片 |
| 容器内独立的卡片或表单组 | 按子元素用途选择档位;不机械减去全部父级内边距 | R20 设置卡片内的 R16 编辑器 |
对话输入框四角均使用圆弧,外层 R = 主按钮直径 / 2 + 按钮到右侧和底部的相等内缩距离。34px 按钮与 8px 内缩距离对应 R25。工具栏保持单行时,右下角圆弧与主按钮同心。28px 附件按钮与较小的工具栏控件保持对齐;左侧和底部采用不同内缩距离,以保持整行的视觉平衡。工作区选择状态的轮廓继承卡片的半径与曲线。
标准菜单使用外层 R16、4px 内边距、R12 菜单项,包含命令选择、任务菜单,以及子会话和后台任务菜单的外露高亮区域。树形展开操作保留缩进;带底色任务行内的控件保留各自的紧凑几何。紧凑菜单使用外层 R12、4px 内边距、R8 菜单项。公共 `SegmentedControl` 使用外层 R12、4px 内缩、R8 分段和指示器;`SegmentedTabs` 使用外层 R16、4px 内缩、R12 分段和指示器。修改内边距时,同步保持指示器偏移、宽度计算、子菜单对齐与指针桥接区域一致。
半径相减也用于嵌套超级椭圆的名义尺寸关系。相同指数不意味着两条曲线严格等距,因此对角线间隙可能不同于侧边内缩。菜单与分段控件保留公共的超级椭圆样式;要求径向严格等距时使用圆弧。
+2 -2
View File
@@ -9,8 +9,8 @@
en: dc8c41fbf9869179
zh: e45976a585cb9c86
/web-ui-style-reference/component-rules:
en: 458da7f974517997
zh: 8b45f816151c233d
en: 3a35065f2be9de06
zh: 41291bba391fb515
/web-ui-style-reference/corner-radii-and-settings-cards:
en: 118972f6c2bd6ce4
zh: 85f8416b03e4dd8b
+1 -1
View File
@@ -21,7 +21,7 @@ Global style sheets belong in `ui-theme/src/styles/`. Component styles live besi
- Keep source text, terminal output, and diff lines unwrapped when their component contract requires column preservation; use the shared scrollbar styles rather than component-specific scrollbar selectors.
- Put presentation in CSS. Inline React styles may pass component-local custom-property values but must not encode theme branches.
- Preserve keyboard focus visibility and reduced-motion behavior when adding transitions or hover-only controls.
- Rounded corners default to the global superellipse smoothing from ui-theme's `corner-shape.css` on supporting engines. Follow the radius standard's [circular-shape](ui-radius.md#shapes) and [nested-geometry](ui-radius.md#nested-hover) rules; the ui-theme corner-shape spec enforces the full-round pairing.
- Rounded corners inherit the global superellipse smoothing from ui-theme's `corner-shape.css` on supporting engines. Pair `corner-shape: round` with every full-round `border-radius` (`50%`, `100%`, or a pill radius) so circles and capsules keep circular arcs; the ui-theme corner-shape spec enforces the pairing.
- Elevated surfaces (menus, popovers, modals, panels, floating buttons, the composer) set `border: 0` and take `box-shadow: var(--dsw-elevation-panel)`, `var(--dsw-elevation-prominent)`, or the composer's `var(--dsw-elevation-soft)` (larger blur at lower alpha): the 0.5px hairline stroke is the first shadow layer, and `--dsw-elevation-stroke-color` rebinds or suppresses it per surface or state. Never pair a `--dsw-alias-border-*` border with an lv/elevation shadow — the ui-theme elevation spec rejects the pairing; state-colored borders (warn panels) stay real borders.
- Existing and new dropdown, context, submenu, and selection menus use `Menu` or wrap custom content in `MenuSurface`. The material is the theme-owned `--dsw-menu-surface-fill` plus `--dsw-menu-backdrop-filter`; feature and platform CSS must not override either. The ui-theme menu spec rejects unwrapped menu/listbox renderers, material overrides, and token redefinitions. The schedule-owned `TaskMenu` and `ClockPicker` retain their existing containers and material as explicit exceptions ([owner](../packages/client/ui-schedule/README.md)).
- Modal backdrops, including settings and confirmation dialogs, retain their translucent dark mask without blur. The theme sets `--dsw-mask-blur` to `none`; Desktop-owned modal overlays also leave the parent page unfiltered.
+1 -1
View File
@@ -21,7 +21,7 @@
- 当组件约定要求保留列结构时,源码文本、终端输出和 diff 行不得换行;使用共享滚动条样式,不得定义组件专用滚动条选择器。
- 呈现规则写在 CSS 中。React 内联样式可以传递组件局部自定义属性值,但不得编码主题分支。
- 添加过渡动画或仅悬停可见的控件时,保留清晰可见的键盘焦点和减少动态效果行为。
- 支持的引擎上,圆角默认使用 ui-theme `corner-shape.css` 的全局超级椭圆平滑。遵循圆角规范中的[圆形](ui-radius.zh.md#shapes)与[嵌套几何](ui-radius.zh.md#nested-hover)规则;ui-theme 的 corner-shape spec 强制全圆声明的配对。
- 支持的引擎上,圆角继承 ui-theme `corner-shape.css` 的全局超级椭圆平滑。每个正圆 `border-radius`(`50%`、`100%` 或胶囊半径)必须配对 `corner-shape: round`,使圆形与胶囊保持圆弧;ui-theme 的 corner-shape spec 强制这一配对。
- 高层级表面(菜单、浮层、对话框、面板、悬浮按钮、输入框)设 `border: 0` 并使用 `box-shadow: var(--dsw-elevation-panel)`、`var(--dsw-elevation-prominent)` 或输入框专用的 `var(--dsw-elevation-soft)`(更大模糊、更低透明度):0.5px 发丝描边是第一层投影,`--dsw-elevation-stroke-color` 可按表面或状态重绑或抑制描边。不得将 `--dsw-alias-border-*` border 与 lv/elevation 投影配对——ui-theme 的 elevation spec 会拒绝;状态色 border(warn 面板)保持真 border。
- 存量和新增的下拉菜单、上下文菜单、子菜单及选择菜单使用 `Menu`,自定义内容用 `MenuSurface` 包裹。材质由主题的 `--dsw-menu-surface-fill` 和 `--dsw-menu-backdrop-filter` 组成;功能及平台 CSS 不得覆盖两者。ui-theme 菜单检查拒绝未使用共享容器的 menu/listbox 渲染、材质覆盖和 token 重定义。计划任务自有的 `TaskMenu` 与 `ClockPicker` 是明确例外,保留现有容器和材质([所属包](../packages/client/ui-schedule/README.zh.md))。
- 设置、确认框等模态弹窗保留黑色半透明遮罩,不模糊背景。主题将 `--dsw-mask-blur` 设为 `none`;Desktop 自有模态浮层也不对父页面施加模糊。
@@ -18,8 +18,8 @@
en: 1d2a3a7f98c2cc9b
zh: f895dd5e9f91e0a9
/deepseek-ai-dsh-client-ui-conversation/shell-and-standard-props:
en: cf788f93d8b97b50
zh: dd177c2a15bbf6bf
en: d541ae8b98468d34
zh: f6899329498d97b8
/deepseek-ai-dsh-client-ui-conversation/temporary-composer-entries:
en: bb1244310f5c0382
zh: 824b84077432b559
+1 -1
View File
@@ -56,7 +56,7 @@ The shared image slot props keep display choices separate from durable reference
The composer measures its expanded control groups after size, content, visibility, or font-loading changes. If they cannot share a line, the row sets `--dsh-composer-model-text-display: none` and `--dsh-composer-model-icon-display: block` for the model seat; their defaults are `block` and `none`. Wrapping remains available if even the icon cannot fit.
The composer card, its toolbar controls, and the workspace-picker outline follow the [composer geometry](../../../docs/ui-radius.md#nested-hover). The context meter follows the [statistics-control radius](../../../docs/ui-radius.md#radius-scale).
The context meter follows the [statistics-control radius](../../../docs/ui-radius.md#radius-scale).
The context-occupancy button shows a ring and percentage below the input card, after the Session statistics. Clicking it opens the token breakdown in a panel kept inside the viewport, including when no statistics are shown; the button stays hidden until context usage and capacity are available.
+1 -1
View File
@@ -56,7 +56,7 @@ target package 通过 declaration merge 扩展 snapshot 与 Location data map,
控件组的尺寸、内容、可见性或字体加载状态变化后,composer 测量展开状态下的控件组。若无法排在同一行,控制栏为模型位设置 `--dsh-composer-model-text-display: none` 和 `--dsh-composer-model-icon-display: block`;两者默认值分别为 `block` 和 `none`。若连图标也放不下,仍允许换行。
输入卡片、工具栏控件与工作区选择状态的轮廓遵循[输入框几何规则](../../../docs/ui-radius.zh.md#nested-hover)。上下文占用率入口遵循[统计控件圆角规则](../../../docs/ui-radius.zh.md#radius-scale)。
上下文占用率入口遵循[统计控件圆角规则](../../../docs/ui-radius.zh.md#radius-scale)。
上下文占用按钮在输入卡片下方、会话统计右侧显示圆环和百分比。点击按钮可在视口内的面板查看 token 构成,没有统计项时面板也不会越界;上下文用量和容量尚不可用时,按钮保持隐藏。
@@ -43,10 +43,6 @@
}
.card {
--dsh-composer-primary-size: 34px;
--dsh-composer-add-size: 28px;
--dsh-composer-control-inset: 8px;
--dsh-composer-row-shift: 2px;
box-sizing: border-box;
position: relative; /* overlay anchor positioning context */
display: flex;
@@ -62,9 +58,7 @@
soft elevation tier. Fill: the input surface token (elevated in dark). */
border: 0;
--dsw-elevation-stroke-color: var(--dsw-alias-border-l2);
border-radius: calc(var(--dsh-composer-primary-size) / 2 + var(--dsh-composer-control-inset));
/* The lower-right arc shares a center with the primary button. */
corner-shape: round;
border-radius: var(--dsw-radius-panel);
background: var(--dsw-specific-input-major);
box-shadow: var(--dsw-elevation-soft);
/* The draft text follows the Settings font-size preference (the textarea,
@@ -96,8 +90,7 @@
inset: 0;
box-sizing: border-box;
border: 1px dashed currentColor;
border-radius: inherit;
corner-shape: inherit;
border-radius: var(--dsw-radius-panel);
color: var(--dsw-alias-border-l4);
transition: color 100ms ease;
pointer-events: none;
@@ -261,9 +254,10 @@
align-items: center;
justify-content: space-between;
gap: 12px;
/* Smaller controls sit below the primary button's vertical center. */
padding: var(--dsh-composer-row-shift) var(--dsh-composer-control-inset)
calc(var(--dsh-composer-control-inset) - var(--dsh-composer-row-shift));
/* 2px moved from the bottom pad to the top: the whole control row sits 2px
lower in the card (it read too high against the textarea) while the
controls' own centering stays untouched. */
padding: 2px 8px 6px;
min-width: 0;
/* Size container so the chips inside can collapse to icon-only when the
card runs out of row width (PermissionSelect @container rule). Anonymous
@@ -321,8 +315,8 @@
display: grid;
place-items: center;
flex: none;
width: var(--dsh-composer-add-size);
height: var(--dsh-composer-add-size);
width: 28px;
height: 28px;
border: none;
border-radius: 999px;
corner-shape: round;
@@ -379,8 +373,8 @@
display: grid;
place-items: center;
flex: none;
width: var(--dsh-composer-primary-size);
height: var(--dsh-composer-primary-size);
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
corner-shape: round;
@@ -390,8 +384,10 @@
color: #fff;
cursor: pointer;
transition: background-color 100ms ease;
/* Cancel the row shift to preserve equal right and bottom insets. */
transform: translateY(calc(-1 * var(--dsh-composer-row-shift)));
/* Opts out of the row's 2px downward shift (.row top pad): the send circle
keeps its original seat while the smaller chips sit lower. Transform, not
margin, so flex centering math is untouched. */
transform: translateY(-2px);
}
.primary:hover:not(:disabled) {
@@ -1,8 +1,8 @@
/* Default smooth corner curvature. Inside the support guard, corners use
* superellipse(1.5) — between a circular arc (round = superellipse(1)) and a
* squircle (superellipse(2)) — instead of the default arc. Engines without
* corner-shape keep circular corners because the token and the rule exist
* only inside the guard.
/* Smooth corner curvature for every rounded surface. Inside the support
* guard, all corners curve along superellipse(1.5) — between a circular arc
* (round = superellipse(1)) and a squircle (superellipse(2)) — instead of the
* default arc; engines without corner-shape keep circular corners because the
* token and the rule exist only inside the guard.
*
* corner-shape does not inherit, so the universal selector applies the token
* to elements and their ::before/::after; other pseudo-elements (for example
@@ -12,8 +12,7 @@
* circle into a squircle and squares off capsule ends, so every effectively
* uncapped radius (50%, 100%, or a pill radius far above the box size) pairs
* `corner-shape: round` with its `border-radius` in the owning component
* sheet. The corner-shape stylesheet spec enforces that pairing.
* Component-specific curve rules are documented in docs/ui-radius.md. */
* sheet. The corner-shape stylesheet spec enforces that pairing. */
@supports (corner-shape: superellipse(1.5)) {
:root {
--dsw-corner-shape: superellipse(1.5);