Skip to content

Q
qjclaw-dmg
Commit 9fd7024f authored by edy's avatar edy
Browse files
Options

fix(ui): align task automation settings workbench ui

parent af633e6e
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 23 deletions
apps/ui/src/features/settings/SettingsPanels.tsx
View file @ 9fd7024f
......@@ -360,12 +360,12 @@ export function SettingsPanels({
tabIndex={value ? 0 : -1}
aria-disabled={!value}
aria-label={value ? `${label} ${copied ? "已复制" : "复制"}` : label}
title={copied ? "✅已复制" : value || undefined}
title={copied ? "已复制" : value || undefined}
onClick={() => copyReadonlyConfigValue(value)}
onKeyDown={(event) => handleReadonlyConfigKeyDown(event, value)}
>
<span className="settings-readonly-config-text">{value || "-"}</span>
{copied ? <span className="settings-readonly-config-copy-feedback">✅已复制</span> : null}
{copied ? <span className="settings-readonly-config-copy-feedback">已复制</span> : null}
</div>
</div>
)
......
apps/ui/src/features/tasks/TaskPanelView.tsx
View file @ 9fd7024f
......@@ -110,6 +110,15 @@ function TaskPanelOutputIcon({ artifact }: { artifact: TaskPanelArtifact }) {
)
}
function TaskPanelPackageIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.75 8.15 12 4.2l7.25 3.95v7.7L12 19.8l-7.25-3.95v-7.7Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.7" />
<path d="m4.95 8.35 7.05 3.9 7.05-3.9M12 12.25v7.25M8.35 6.2l7.25 4" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.55" />
</svg>
)
}
function TaskPanelStatCards({ items }: { items: TaskPanelItem[] }) {
const summary = useMemo(() => summarizeTaskPanelItems(items), [items])
const stats = [
......@@ -194,7 +203,7 @@ function TaskPanelOutputList({ outputs }: { outputs: TaskPanelOutputItem[] }) {
<div className="task-panel-output-header">
<div className="task-panel-output-heading">
<span className="task-panel-output-heading-icon" aria-hidden="true">
📦
<TaskPanelPackageIcon />
</span>
<h2>内容产出</h2>
</div>
......@@ -225,7 +234,7 @@ function TaskPanelOutputList({ outputs }: { outputs: TaskPanelOutputItem[] }) {
{artifactPath}
</button>
{copiedOutputRowKey === outputRowKey ? (
<span className="task-panel-artifact-copied" aria-live="polite">✅已复制</span>
<span className="task-panel-artifact-copied" aria-live="polite">已复制</span>
) : null}
</div>
) : null}
......
apps/ui/src/styles/automation.css
View file @ 9fd7024f
......@@ -19,6 +19,7 @@
gap: 14px;
min-height: 0;
padding: 0;
overflow: hidden;
}
.automation-header,
......@@ -49,6 +50,7 @@
justify-content: center;
gap: 6px;
white-space: nowrap;
min-width: 0;
}
.automation-action-button svg,
......@@ -104,6 +106,13 @@
color: #1d4ed8;
}
.automation-action-button:disabled,
.automation-delete-button:disabled,
.automation-filter-row button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.automation-form-actions .automation-form-button-secondary {
border: 1px solid rgba(203, 213, 225, 0.92);
background: #ffffff;
......@@ -183,9 +192,11 @@
.automation-layout {
display: grid;
grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr);
grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.7fr);
gap: 14px;
height: 100%;
min-height: 0;
overflow: hidden;
}
.automation-list-pane,
......@@ -201,7 +212,7 @@
.automation-list-pane {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 10px;
gap: 8px;
padding: 12px;
}
......@@ -226,6 +237,7 @@
border-color: #93c5fd;
background: #eff6ff;
color: #1d4ed8;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.automation-list-scroll {
......@@ -243,13 +255,13 @@
.automation-task-list,
.automation-run-list {
display: grid;
gap: 8px;
gap: 7px;
}
.automation-task-row {
height: 84px;
height: 78px;
overflow: hidden;
padding: 12px;
padding: 10px;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 12px;
background: #ffffff;
......@@ -260,6 +272,7 @@
.automation-task-row.active {
border-color: #60a5fa;
background: linear-gradient(180deg, #eff6ff, #ffffff);
box-shadow: inset 3px 0 0 #2563eb;
}
.automation-task-select {
......@@ -303,8 +316,8 @@
.automation-detail-pane {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 12px;
padding: 16px;
gap: 10px;
padding: 14px;
overflow: hidden;
}
......@@ -327,7 +340,8 @@
max-width: 100%;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
-webkit-line-clamp: 2;
overflow-wrap: anywhere;
}
.automation-kicker {
......@@ -391,7 +405,7 @@
}
.automation-run-item {
padding: 12px;
padding: 10px 12px;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 12px;
background: #ffffff;
......@@ -442,8 +456,9 @@
.automation-form {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 12px;
padding: 14px;
gap: 10px;
padding: 12px;
overflow: hidden;
}
.automation-form-grid {
......@@ -489,7 +504,7 @@
.automation-form-grid textarea {
resize: vertical;
min-height: 120px;
min-height: 104px;
padding: 10px;
line-height: 1.5;
}
......
apps/ui/src/styles/tasks.css
View file @ 9fd7024f
......@@ -456,6 +456,11 @@
line-height: 1;
}
.task-panel-output-heading-icon svg {
width: 22px;
height: 22px;
}
.task-panel-output-header h2 {
margin: 0;
color: #17253d;
......
apps/ui/test/settingsPanelsSource.test.ts
View file @ 9fd7024f
......@@ -138,7 +138,8 @@ test("read-only config values expose full values by title and copy on click or k
assert.match(settingsPanelsSource, /const \[copiedConfigValue, setCopiedConfigValue\] = useState<string \| null>\(null\)/)
assert.match(settingsPanelsSource, /setCopiedConfigValue\(value\)/)
assert.match(settingsPanelsSource, /settings-readonly-config-copy-feedback/)
assert.match(settingsPanelsSource, />✅已复制</)
assert.match(settingsPanelsSource, />已复制</)
assert.doesNotMatch(settingsPanelsSource, /✅已复制/)
assert.match(settingsPanelsSource, /navigator\.clipboard\.writeText\(value\)/)
assert.match(settingsPanelsSource, /const handleReadonlyConfigKeyDown = \(event: KeyboardEvent<HTMLDivElement>, value\?: string\) =>/)
assert.match(settingsPanelsSource, /event\.key !== "Enter" && event\.key !== " "/)
......
docs/2026-05-25-client-ui-ux-execution-plan.md
View file @ 9fd7024f
......@@ -352,7 +352,7 @@
- Modify: `apps/ui/src/features/settings/SettingsPanels.tsx`
- Modify: matching CSS files under `apps/ui/src/styles/`
- [ ] **Step 1: Chat composer**
- [x] **Step 1: Chat composer**
Requirements:
......@@ -368,7 +368,11 @@
- Attachment chip text truncates cleanly.
- Submit button remains icon-first with accessible label.
- [ ] **Step 2: Message list**
Progress note:
- Completed on 2026-05-25: added a single blue focus ring on the composer surface and stabilized attachment chip truncation.
- [x] **Step 2: Message list**
Requirements:
......@@ -382,7 +386,11 @@
- Long Chinese, English, URLs, and code blocks do not break layout.
- Message actions do not shift message height when appearing.
- [ ] **Step 3: Task panel icon cleanup**
Progress note:
- Completed on 2026-05-25: added long-line wrapping guards for message text, assistant markdown, and code blocks while preserving existing message alignment and `aria-live` trace behavior.
- [x] **Step 3: Task panel icon cleanup**
Replace visible emoji used as UI icons with existing icon components or local SVG components.
......@@ -395,7 +403,11 @@
- No visible emoji icons remain in primary tool controls or headings.
- Existing Chinese text remains unchanged except for necessary label updates.
- [ ] **Step 4: Automation tasks density**
Progress note:
- Completed on 2026-05-25: replaced the content-output heading emoji with a local SVG icon and changed copy feedback to text-only `已复制`.
- [x] **Step 4: Automation tasks density**
Requirements:
......@@ -408,7 +420,11 @@
- The page reads as an operational tool, not a card-heavy marketing layout.
- Long task prompts truncate or wrap predictably.
- [ ] **Step 5: Settings hierarchy**
Progress note:
- Completed on 2026-05-25: tightened list/detail/form/run-history spacing, preserved `role="alert"` errors, and added clearer active/disabled states.
- [x] **Step 5: Settings hierarchy**
Requirements:
......@@ -422,7 +438,11 @@
- Users can scan required vs optional config groups quickly.
- Editing one section does not visually imply other sections are editing.
- [ ] **Step 6: Validate key workflows**
Progress note:
- Completed on 2026-05-25: preserved source toggle, secret reveal/copy, save/reset/edit, and Tabs semantics; copy feedback is now text-only without emoji.
- [x] **Step 6: Validate key workflows**
Run:
......@@ -444,6 +464,11 @@
- Typecheck and build pass.
- Relevant source tests pass.
Progress note:
- Passed on 2026-05-25: `corepack pnpm --filter @qjclaw/ui typecheck`; `corepack pnpm build`.
- Passed on 2026-05-25: `node --test apps/ui/test/taskPanelViewSource.test.ts`; `node --test apps/ui/test/settingsPanelsSource.test.ts`; `node --test apps/ui/test/chatCancelSource.test.ts`.
## 7. Phase 5 - 可访问性和响应式补齐
**目标:** 解决 UI-ux-pro-max 指出的高优先级问题：键盘导航、skip link、错误提示、图片 alt、响应式边界。
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment