feat: 重构侧栏布局,优化用户菜单和同步功能

This commit is contained in:
yuxuanhui
2026-09-09 08:34:34 +08:00
parent c67031a7cb
commit f6c2dcead8
4 changed files with 84 additions and 102 deletions
@@ -0,0 +1,12 @@
# 侧栏与工作空间布局
Type: task
Status: resolved
## Scope
按 oppein-design-propotype 重构侧栏:230/64px、用户菜单、命令入口、最近访问、语义色与窄屏隐藏。右侧仅保留配置、Bot、同步任务三个图标,压缩顶部占用。保留业务页面与未提交改动,不部署。
## Validation
构建;侧栏展开/收起、最近访问关闭、用户菜单、三个入口、主题、窄屏与现有工作空间回归。
## Answer
已完成侧栏、用户菜单、快捷导航、最近访问及三个图标入口。保留现有平级业务导航,不新增语言系统或移动抽屉。构建通过;13 项相关端到端用例通过,最后的侧栏复验通过;已查看展开浅色、收起深色与窄屏截图。未部署。
+48 -63
View File
@@ -479,60 +479,6 @@ export function AlphaPage({
account?.connection_status === "expired";
return (
<>
<div className="page-heading">
<div>
<h1>Alpha 管理</h1>
</div>
<div className="inline-actions">
<Button type="tertiary" onClick={() => setImporting(true)}>
导入 Alpha ID
</Button>
<Button
theme="solid"
disabled={!connected}
onClick={() => {
setSyncingScope(submission);
onOverlay();
}}
>
按天同步
</Button>
{submission === "SUBMITTED" && (
<Button
loading={busy === "full_sync"}
disabled={!connected}
onClick={() => void newTask("full_sync")}
>
全量同步已提交
</Button>
)}
</div>
</div>
<div className="library-stats">
<div>
<span>已同步 Alpha</span>
<strong>{Number(facets.total ?? 0).toLocaleString()}</strong>
</div>
<div>
<span>我的收藏</span>
<strong>{Number(facets.favorites ?? 0).toLocaleString()}</strong>
</div>
<div>
<span>覆盖地区</span>
<strong>
{Array.isArray(facets.region) ? facets.region.length : 0}
</strong>
</div>
<div className="last-sync">
<span>最近数据更新</span>
<strong>
{formatTime(
typeof facets.last_sync === "string" ? facets.last_sync : null,
account?.timezone,
)}
</strong>
</div>
</div>
{!connected && (
<Banner
type="info"
@@ -548,15 +494,26 @@ export function AlphaPage({
)}
{error && <Banner type="danger" description={error} />}
<section className="library-panel" ref={tablePanel}>
<Tabs
className="alpha-submission-tabs"
activeKey={submission}
onChange={changeSubmission}
tabList={[
{ itemKey: "UNSUBMITTED", tab: "待提交" },
{ itemKey: "SUBMITTED", tab: "已提交" },
]}
/>
<div className="alpha-tabs-header">
<Tabs
className="alpha-submission-tabs"
activeKey={submission}
onChange={changeSubmission}
tabList={[
{ itemKey: "UNSUBMITTED", tab: "待提交" },
{ itemKey: "SUBMITTED", tab: "已提交" },
]}
/>
<span className="alpha-last-sync">
最近数据更新{" "}
<span>
{formatTime(
typeof facets.last_sync === "string" ? facets.last_sync : null,
account?.timezone,
)}
</span>
</span>
</div>
<SavedViews
filters={{ ...filters, submission, sort, direction, limit: pageSize }}
columns={visibleColumns}
@@ -856,6 +813,34 @@ export function AlphaPage({
导出
</Button>
</a>
<Button
size="small"
type="tertiary"
onClick={() => setImporting(true)}
>
导入 Alpha ID
</Button>
<Button
size="small"
theme="solid"
disabled={!connected}
onClick={() => {
setSyncingScope(submission);
onOverlay();
}}
>
按天同步
</Button>
{submission === "SUBMITTED" && (
<Button
size="small"
loading={busy === "full_sync"}
disabled={!connected}
onClick={() => void newTask("full_sync")}
>
全量同步已提交
</Button>
)}
<Popover
trigger="click"
position="bottomRight"
+20 -37
View File
@@ -161,36 +161,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
flex-direction: column;
overflow: hidden;
}
.library-stats {
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--space-4);
padding: 0 0 var(--space-3);
flex-wrap: wrap;
}
.library-stats > div {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.library-stats span {
font-size: 12px;
color: var(--muted);
}
.library-stats strong {
font-size: 16px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.library-stats .last-sync {
margin-left: auto;
}
.library-stats .last-sync strong {
font-size: 12px;
font-weight: 400;
color: var(--muted);
}
.library-panel {
display: flex;
flex-direction: column;
@@ -210,9 +180,28 @@ label:not(.semi-checkbox):not(.semi-radio) {
max-height: 44%;
overflow: auto;
}
.alpha-submission-tabs {
.alpha-tabs-header {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
padding: 0 var(--space-3);
border-bottom: 1px solid var(--line);
}
.alpha-submission-tabs {
min-width: 0;
flex-shrink: 0;
}
.alpha-last-sync {
margin-left: auto;
padding: var(--space-2) 0;
color: var(--muted);
font-size: 12px;
text-align: right;
}
.alpha-last-sync > span {
display: inline-block;
font-variant-numeric: tabular-nums;
}
.alpha-submission-tabs .semi-tabs-content {
display: none;
@@ -782,9 +771,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
.advanced-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.library-stats .last-sync {
display: none;
}
.preferences-grid {
grid-template-columns: 1fr 1fr;
}
@@ -804,9 +790,6 @@ label:not(.semi-checkbox):not(.semi-radio) {
align-items: flex-start;
flex-wrap: wrap;
}
.library-stats {
gap: var(--space-3);
}
.primary-filters {
display: grid;
grid-template-columns: 1fr 1fr;
+4 -2
View File
@@ -9,7 +9,7 @@ test("submission tabs, day selection, local correlation and reload", async ({
await page.getByLabel("密码", { exact: true }).fill("browser-test-password");
await page.getByRole("button", { name: "进入工作空间" }).click();
await expect(
page.getByRole("heading", { name: "Alpha 管理", exact: true }),
page.getByRole("tab", { name: "待提交", exact: true }),
).toBeVisible();
const headers = { "X-WQ-Request": "1" };
const credentials = await page.request.put("/api/v1/account/credentials", {
@@ -118,7 +118,9 @@ test("submission tabs, day selection, local correlation and reload", async ({
await page.reload();
await page.getByRole("textbox", { name: "搜索 Alpha" }).fill("TEST0004");
await page.getByRole("button", { name: "查询", exact: true }).click();
await expect(page.locator(".alpha-table:visible")).toContainText("相关性偏高");
await expect(page.locator(".alpha-table:visible")).toContainText(
"相关性偏高",
);
await page.getByRole("tab", { name: "已提交", exact: true }).click();
await expect(
page.getByRole("button", { name: "全量同步已提交" }),