fix(web): align task and attachment card styling
This commit is contained in:
kingwl committed
1 parent
5c5555eec1
commit
401b810d5a
17 files changed
+31
-30
No files matched your search
@@ -15,8 +15,8 @@
|
||||
en: cd8120cba5566e19
|
||||
zh: 65359436088c8bc5
|
||||
/dsh-unified-corner-radius-standard/select-the-radius:
|
||||
en: 133f5ec603e88375
|
||||
zh: ef264171ceff69ed
|
||||
en: 9a090e07e101251c
|
||||
zh: 349596d7840d018d
|
||||
/dsh-unified-corner-radius-standard/reuse-tokens-and-preserve-deliberate-shapes:
|
||||
en: 855243d81b28eb13
|
||||
zh: b66b63e4f5e793fa
|
||||
|
||||
+1
-1
@@ -40,7 +40,7 @@ Prefer an existing shared size variant when a proposed control falls between the
|
||||
|
||||
Concrete defaults: `Button` uses H28/R8 for `sm` and H36/R12 for `md`, including outline variants. Standard H32 inputs and H36 selectors use R12. The Workspace files and New terminal guide entries both use R20, including title-only and described variants. Reserve R28 for their enclosing panel or dialog, not those entries.
|
||||
|
||||
Code blocks, diffs, and file previews share R16: changed-file entry cards, delivered-file cards, submitted-plan cards, generic file attachment cards, and hover preview panels. The 40px file-icon tiles inside changed-file, delivery, and submitted-plan cards use R10 on all four corners as a component-specific exception. Their hover fills keep the same contour.
|
||||
Code blocks, diffs, and preview cards share R16: changed-file entry cards, delivered-file cards, submitted-plan cards, created-task cards, generic file attachment cards before and after sending, and hover preview panels. The 40px icon tiles inside changed-file, delivery, submitted-plan, and created-task cards use R10 on all four corners as a component-specific exception and share the same neutral tile fill and border in both themes. Their hover fills keep the same contour.
|
||||
|
||||
<a id="shapes"></a>
|
||||
## Reuse tokens and preserve deliberate shapes
|
||||
|
||||
@@ -40,7 +40,7 @@ H 表示以 CSS 像素计、包含边框的设计外部高度。R 表示浏览
|
||||
|
||||
具体默认值：`Button` 的 `sm` 使用 H28/R8，`md` 使用 H36/R12，包含描边变体。标准 H32 输入框和 H36 选择器使用 R12。“工作区文件”和“新建终端”引导入口统一使用 R20，包含仅标题与带描述的变体。R28 留给包围它们的面板或对话框，不用于这些入口。
|
||||
|
||||
代码块、diff 与文件预览共用 R16：包括改动文件入口卡片、交付文件卡片、已提交计划卡片、通用附件文件卡片和悬停预览浮层。改动文件、交付文件与已提交计划卡片内部的 40px 文件图标底框作为组件特例，四角统一使用 R10。各自的 hover 保持同一轮廓。
|
||||
代码块、diff 与预览卡片共用 R16：包括改动文件入口卡片、交付文件卡片、已提交计划卡片、已创建任务卡片、发送前后的通用附件文件卡片和悬停预览浮层。改动文件、交付文件、已提交计划与已创建任务卡片内部的 40px 图标底框作为组件特例，四角统一使用 R10，并在明暗两种主题下分别共用相同的中性底色与边框。各自的 hover 保持同一轮廓。
|
||||
|
||||
<a id="shapes"></a>
|
||||
## 复用 token，保留有意设计的形状
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
en: 41cd21266011d571
|
||||
zh: 3172d1a2acbb27b7
|
||||
/deepseek-ai-dsh-client-ui-chat/reference-previews:
|
||||
en: 0a1948349b1fbfd9
|
||||
zh: 56256e4d695e5192
|
||||
en: 0e9c004b62fa2f77
|
||||
zh: d0b0e27f74747253
|
||||
/deepseek-ai-dsh-client-ui-chat/hidden-chat-rows:
|
||||
en: cbf1f0a2205046a5
|
||||
zh: 2e59d0815351349f
|
||||
|
||||
@@ -33,6 +33,8 @@ File-mention providers receive the viewed Session ID with the closing-turn owner
|
||||
<a id="reference-previews"></a>
|
||||
## Reference previews
|
||||
|
||||
Sent generic-file attachments retain the draft's [file-card radius](../../../docs/ui-radius.md#radius-scale).
|
||||
|
||||
Chat supplies file and HTTP(S) navigation through one `MarkdownDelegateProvider` around its node list. Assistant Markdown file links open in the right Sidebar after the message settles, including references to unmodified files. Relative paths resolve in the viewed Session's workspace; absolute paths retain the same Session's filesystem access. `#L24` and `#L24-L30` navigate to the first specified line and reuse an existing file tab. Missing files show the preview's error state.
|
||||
|
||||
Standalone Markdown images show contained previews and open the shared image lightbox; local paths resolve against the viewed workspace after settlement. Image file links keep their sidebar activation and show a thumbnail after hover dwell or keyboard focus. Escape dismisses the thumbnail. Failed images retain a localized status and their description; no duplicate-image filtering is applied.
|
||||
|
||||
@@ -33,6 +33,8 @@ kind: "package-reference"
|
||||
<a id="reference-previews"></a>
|
||||
## 引用预览
|
||||
|
||||
已发送的普通文件附件保留草稿中的[文件卡片圆角](../../../docs/ui-radius.zh.md#radius-scale)。
|
||||
|
||||
Chat 在节点列表外通过一个 `MarkdownDelegateProvider` 提供文件及 HTTP(S) 导航。Assistant Markdown 文件链接在消息落定后可于右侧栏打开，包括未修改文件的引用。相对路径基于当前查看的 Session 工作区解析；绝对路径仍使用同一 Session 的文件系统访问。`#L24` 和 `#L24-L30` 定位到指定起始行，并复用现有文件标签。文件缺失时显示预览错误状态。
|
||||
|
||||
独立的 Markdown 图片以内嵌预览显示，点击打开共享图片浮层；本地路径在消息落定后基于当前查看的工作区解析。图片文件链接保持点击打开侧栏，鼠标停留或键盘聚焦时显示缩略图，Esc 关闭缩略图。图片加载失败时保留本地化状态与图片说明；不执行重复图片过滤。
|
||||
|
||||
@@ -326,7 +326,7 @@
|
||||
min-height: 64px;
|
||||
padding: 8px 12px;
|
||||
border: 0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
|
||||
border-radius: var(--dsw-radius-xl);
|
||||
border-radius: var(--dsw-radius-lg);
|
||||
background: var(--dsw-specific-input-major, transparent);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
en: a13078ade4ef3b9d
|
||||
zh: 2c8b3e8b62ad5652
|
||||
/deepseek-ai-dsh-client-ui-plan/understand-the-implementation:
|
||||
en: 8f4efc68f61687a2
|
||||
zh: 917497a67dc2683e
|
||||
en: 31edfe487dfa0c08
|
||||
zh: c687a5fa5391415a
|
||||
/deepseek-ai-dsh-client-ui-plan/further-exploration:
|
||||
en: 59f62ef6269abf82
|
||||
zh: c8b4ee607be1e432
|
||||
|
||||
@@ -55,7 +55,7 @@ Plan cards derive from native `tool/call` or PTC dispatch arguments through a Co
|
||||
|
||||
The framework-bound `usePlans(turn)` exposes only submitted-plan data for that Turn. Chat indexes membership on Node updates and orders this collection when read; card rendering neither scans the transcript nor subscribes to other Turns or Node kinds.
|
||||
|
||||
Submitted-plan cards follow the [file-card radius family](../../../docs/ui-radius.md#radius-scale).
|
||||
Submitted-plan cards follow the [file-card family](../../../docs/ui-radius.md#radius-scale) for their radius and icon-tile material.
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ kind: "package-reference"
|
||||
|
||||
框架绑定的 `usePlans(turn)` 只提供该回合的已提交计划数据。Chat 随节点更新维护成员索引，并在读取时排列该集合；卡片渲染不扫描整段对话，也不订阅其他回合或节点类型。
|
||||
|
||||
已提交计划卡片遵循[文件卡片圆角家族](../../../docs/ui-radius.zh.md#radius-scale)。
|
||||
已提交计划卡片的圆角和图标底框材质遵循[文件卡片家族](../../../docs/ui-radius.zh.md#radius-scale)。
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@@ -23,7 +23,8 @@
|
||||
:global(body[data-ds-dark-theme]) .card { --plan-card-fill: var(--dsw-static-neutral-850); --plan-card-hover: var(--dsw-static-neutral-800); }
|
||||
.card:hover { background: var(--plan-card-hover); }
|
||||
.card:focus-visible { outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: 3px; }
|
||||
.cardIcon { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0.5px solid var(--dsw-alias-border-l1); border-radius: 10px; background: var(--plan-card-fill); }
|
||||
.cardIcon { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0.5px solid var(--dsw-alias-border-l1); border-radius: 10px; background: color-mix(in srgb, var(--dsw-static-neutral-00) 50%, transparent); }
|
||||
:global(body[data-ds-dark-theme]) .cardIcon { background: color-mix(in srgb, var(--dsw-static-neutral-00) 5%, transparent); }
|
||||
.cardDetails { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.cardTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 20px; }
|
||||
.cardDescription { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-tertiary); font-size: 10px; line-height: 16px; }
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
en: 6bd6882dbbbefcb0
|
||||
zh: 03aa15f1a65d13dc
|
||||
/deepseek-ai-dsh-client-ui-schedule/understand-the-implementation:
|
||||
en: 5e640dad909768cc
|
||||
zh: d25fee44d0550c90
|
||||
en: 959145f9a08c3913
|
||||
zh: caae642a82d2acd3
|
||||
/deepseek-ai-dsh-client-ui-schedule/further-exploration:
|
||||
en: 06e265120b05dbf5
|
||||
zh: 08ab1ef979b8ea40
|
||||
|
||||
@@ -67,7 +67,7 @@ A restored task tab carries no navigation parameters, because the Sidebar persis
|
||||
|
||||
Subscriptions exist only while the framework observes a source. The final unsubscribe releases event listeners and invalidates pending responses. Components receive framework-bound `useCatalog` hooks and explicit action callbacks. The mounted Records view reads `schedule.history` with the selected task's original Session binding; catalog and list responses omit full history. Components own disposable search, filtering, selection, confirmation, and history-page state. Reminder records remain Host-owned and do not come from historical Session projections or browser-local demo data.
|
||||
|
||||
Task menus use the [standard menu geometry](../../../docs/ui-radius.md#nested-hover), including keyboard-highlighted rows.
|
||||
Task menus use the [standard menu geometry](../../../docs/ui-radius.md#nested-hover), including keyboard-highlighted rows. Created-task cards follow the [file-card family](../../../docs/ui-radius.md#radius-scale) for their radius and icon-tile material.
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ kind: "package-reference"
|
||||
|
||||
仅在框架观察数据源期间订阅。最后一个订阅取消时释放事件监听，并使尚未完成的响应失效。组件接收框架绑定的 `useCatalog` hook 和明确的操作回调。已挂载的任务运行记录视图使用所选任务的原会话绑定读取 `schedule.history`；目录和列表响应不包含完整历史。组件拥有可丢弃的搜索、筛选、选择、确认和历史分页状态。提醒记录由 Host 拥有，不来自历史会话投影或浏览器本地演示数据。
|
||||
|
||||
任务菜单使用[标准菜单几何](../../../docs/ui-radius.zh.md#nested-hover)，包含键盘高亮行。
|
||||
任务菜单使用[标准菜单几何](../../../docs/ui-radius.zh.md#nested-hover)，包含键盘高亮行。已创建任务卡片的圆角和图标底框材质遵循[文件卡片家族](../../../docs/ui-radius.zh.md#radius-scale)。
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
/* schedule_create transcript card: clock, task title, frequency, open action.
|
||||
The box is the delivery card's (ui-deliverables Deliverables.module.css
|
||||
`.file`): the same fill/hover pair, 60px row, 8/10 padding, and 18px corner,
|
||||
with one inset overlay button making the whole row open the task. */
|
||||
/* Created-task cards follow the file-card treatment in docs/ui-radius.md. */
|
||||
|
||||
.card {
|
||||
--card-fill: var(--dsw-static-neutral-50);
|
||||
@@ -15,7 +12,7 @@
|
||||
padding: 8px 10px;
|
||||
overflow: hidden;
|
||||
border: 0.5px solid var(--dsw-alias-border-l1);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--dsw-radius-lg);
|
||||
background: var(--card-fill);
|
||||
color: var(--dsw-alias-label-primary);
|
||||
transition: background-color 120ms ease;
|
||||
@@ -59,8 +56,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* The clock glyph sits in the delivery card's icon frame (`.fileIcon`): a
|
||||
40px bordered 10px-corner square on the card's own fill. */
|
||||
.leading {
|
||||
display: grid;
|
||||
flex: none;
|
||||
@@ -68,12 +63,16 @@
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 0.5px solid var(--dsw-alias-border-l2);
|
||||
border: 0.5px solid var(--dsw-alias-border-l1);
|
||||
border-radius: 10px;
|
||||
background: var(--card-fill);
|
||||
background: color-mix(in srgb, var(--dsw-static-neutral-00) 50%, transparent);
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
}
|
||||
|
||||
:global(body[data-ds-dark-theme]) .leading {
|
||||
background: color-mix(in srgb, var(--dsw-static-neutral-00) 5%, transparent);
|
||||
}
|
||||
|
||||
.leading svg {
|
||||
flex: none;
|
||||
}
|
||||
@@ -118,7 +117,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* The open control keeps the primitive's outlined capsule geometry and stays
|
||||
/* The open control keeps the primitive's compact outlined geometry and stays
|
||||
its own target over the row-wide overlay. */
|
||||
.openButton {
|
||||
flex: none;
|
||||
|
||||
@@ -284,11 +284,9 @@ describe('ScheduleCreateCard', () => {
|
||||
expect(frequency).toMatch(/color:\s*var\(--dsw-alias-label-tertiary\);/)
|
||||
expect(frequency).toMatch(/font-size:\s*10px;/)
|
||||
expect(frequency).toMatch(/line-height:\s*16px;/)
|
||||
// The box is the delivery card's (ui-deliverables `.file`): fill/hover pair,
|
||||
// 8/10 padding, 18px corner, and a 60px row (8px insets around 44px).
|
||||
const card = /\.card\s*\{([^}]*)\}/.exec(stylesheet)?.[1] ?? ''
|
||||
expect(card).toMatch(/padding:\s*8px 10px;/)
|
||||
expect(card).toMatch(/border-radius:\s*18px;/)
|
||||
expect(card).toMatch(/border-radius:\s*var\(--dsw-radius-lg\);/)
|
||||
expect(card).toMatch(/background:\s*var\(--card-fill\);/)
|
||||
expect(stylesheet).toMatch(/\.card:has\(\.cardOpen\):hover\s*\{[^}]*background:\s*var\(--card-hover\);/)
|
||||
expect(stylesheet).toMatch(/\.row\s*\{[^}]*min-height:\s*44px;/)
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
".deleteButton: border-radius: 6px"
|
||||
],
|
||||
"ui-schedule/src/client/ScheduleCreateCard.module.css": [
|
||||
".card: border-radius: 18px",
|
||||
".leading: border-radius: 10px"
|
||||
],
|
||||
"ui-schedule/src/client/TaskManagerPage.module.css": [
|
||||
|
||||
Reference in new issue
Block a user