my-home/worldquant-alpha-system
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore polished account experience and align AI with Lark design

Browse Source
This commit is contained in:
yuxuanhui
2026-09-07 23:31:23 +08:00
parent 3f3d417296
commit 7dcf46836f
23 changed files with 1669 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ai/ChatPanel.tsx
+56 -26
View File
@@ -188,7 +188,12 @@ export function ChatPanel({
useEffect(() => {
if (!open) return;
previousFocus.current = document.activeElement as HTMLElement;
input.current?.querySelector("textarea")?.focus();
const textarea = input.current?.querySelector("textarea");
if (textarea && !textarea.disabled) textarea.focus();
else
root.current
?.querySelector<HTMLButtonElement>('button[aria-label="收起研究助手"]')
?.focus();
return () => {
requestAnimationFrame(() => {
if (
@@ -265,6 +270,7 @@ export function ChatPanel({
ref={root}
hidden={!open}
className="ai-chat"
id="research-assistant"
aria-label="AI 研究助手"
onKeyDown={(event) => {
if (event.key === "Escape") {
@@ -314,11 +320,13 @@ export function ChatPanel({
}}
/>
<header className="ai-header">
<div>
<strong>AI 研究助手</strong>
<span>与你一起查看、分析和记录</span>
</div>
<Button aria-label="收起研究助手" theme="borderless" onClick={onClose}>
<h2>AI 研究助手</h2>
<Button
type="tertiary"
aria-label="收起研究助手"
theme="borderless"
onClick={onClose}
>
收起
</Button>
</header>
@@ -337,7 +345,11 @@ export function ChatPanel({
}}
disabled={loading}
/>
<Button onClick={() => void createConversation()} disabled={loading}>
<Button
type="tertiary"
onClick={() => void createConversation()}
disabled={loading}
>
新会话
</Button>
</div>
@@ -359,10 +371,11 @@ export function ChatPanel({
{loading && <Spin />}
{!chat.messages.length && (
<div className="ai-empty">
<strong>从当前研究出发</strong>
<h3>从当前研究出发</h3>
<p>可以让我筛选 Alpha、解释已有指标，或提出研究记录修改。</p>
{!conversationId && (
<Button
type="tertiary"
onClick={() => void createConversation()}
disabled={loading}
>
@@ -451,7 +464,9 @@ export function ChatPanel({
<div className="ai-send">
<small>Enter 发送 · Shift + Enter 换行</small>
{activeRun ? (
<Button onClick={() => void stop()}>停止生成</Button>
<Button type="tertiary" onClick={() => void stop()}>
停止生成
</Button>
) : (
<Button
theme="solid"
@@ -513,7 +528,7 @@ function BusinessCard({
const openAlpha = (id: string) =>
onAction({ type: "open_alpha", alpha_id: id, nonce: Date.now() });
return (
<section className="ai-tool-card">
<section className="ai-tool-card" data-status={call.status}>
<div className="ai-card-title">
<strong>{toolLabels[call.name] ?? "业务操作"}</strong>
<Tag
@@ -546,8 +561,14 @@ function BusinessCard({
}[key]
}
</strong>
<del>{researchValue(key, target.before[key])}</del>
<ins>{researchValue(key, target.after[key])}</ins>
<del>
<span>修改前</span>
{researchValue(key, target.before[key])}
</del>
<ins>
<span>修改后</span>
{researchValue(key, target.after[key])}
</ins>
</div>
))}
</details>
@@ -569,20 +590,29 @@ function BusinessCard({
</p>
)}
{pending && (
<div className="inline-actions">
<Button
theme="solid"
disabled={disabled}
onClick={() => void onDecision(call.id, true)}
>
确认执行
</Button>
<Button
disabled={disabled}
onClick={() => void onDecision(call.id, false)}
>
拒绝
</Button>
<div className="ai-approval">
<p className="muted">
{call.preview.targets?.length
? `将修改 ${call.preview.targets.length} 条研究记录。`
: "将执行以上任务操作。"}
确认后执行。
</p>
<div className="inline-actions">
<Button
theme="solid"
disabled={disabled}
onClick={() => void onDecision(call.id, true)}
>
确认执行
</Button>
<Button
type="tertiary"
disabled={disabled}
onClick={() => void onDecision(call.id, false)}
>
拒绝
</Button>
</div>
</div>
)}
{typeof result.error === "string" && (
frontend/src/ai/ModelSettingsPanel.tsx
+13 -7
View File
@@ -80,12 +80,13 @@ export function ModelSettingsPanel() {
}
}
return (
<section className="panel full-width ai-settings">
<div className="panel-title">
<div>
<h2>大模型服务</h2>
<p>配置你的 OpenAI 兼容服务，供研究助手使用。</p>
</div>
<section
className="account-section full-width ai-settings"
id="model-settings"
aria-labelledby="model-settings-title"
>
<div className="section-heading">
<h2 id="model-settings-title">大模型服务</h2>
<Tag color={saved?.enabled && saved.ready ? "green" : "grey"}>
{saved?.enabled && saved.ready ? "已启用" : "未启用"}
</Tag>
@@ -167,6 +168,7 @@ export function ModelSettingsPanel() {
保存模型配置
</Button>
<Button
type="tertiary"
loading={busy === "test"}
disabled={!!busy || changed || !saved?.configured}
onClick={() => void test()}
@@ -177,7 +179,11 @@ export function ModelSettingsPanel() {
<p className="muted">
测试连接会向已保存的服务发送少量合成请求，按供应商规则计费。
</p>
<div className="ai-test-results">
<div
className="ai-test-results"
role="status"
aria-label="模型能力测试结果"
>
{Object.entries(saved?.test_results ?? {}).map(([name, result]) => (
<div key={name}>
<Tag color={result.ok ? "green" : "red"}>
frontend/src/ai/style.css
+184 -83
View File
@@ -4,6 +4,18 @@
.workspace {
padding-right: var(--chat-space, 0px);
}
/* Page mounts stay alive for drafts without breaking the bounded table layout. */
.alpha-page-view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.main-shell {
container-type: inline-size;
}
.ai-chat {
position: fixed;
inset: 0 0 0 auto;
@@ -13,162 +25,215 @@
flex-direction: column;
background: var(--surface);
border-left: 1px solid var(--line);
box-shadow: -8px 0 32px #151b2c0b;
color: var(--ink);
}
.ai-mask {
position: fixed;
inset: 0;
z-index: 1000;
background: #1f232926;
}
.ai-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 22px 20px 16px;
height: 56px;
padding: 0 var(--space-4);
border-bottom: 1px solid var(--line);
}
.ai-header strong {
font-size: 17px;
}
.ai-header span {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 6px;
.ai-header h2 {
font-size: 16px;
font-weight: 500;
}
.ai-conversations {
display: flex;
gap: 8px;
padding: 14px 16px;
flex-shrink: 0;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
}
.ai-conversations .semi-select {
flex: 1;
min-width: 0;
}
.ai-chat > .semi-banner {
margin: 0 var(--space-4) var(--space-3);
}
.ai-messages {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px 18px 24px;
padding: var(--space-3) var(--space-4) var(--space-4);
}
.ai-message {
margin: 0 0 24px;
margin-bottom: 24px;
overflow-wrap: anywhere;
}
.ai-role {
display: block;
color: var(--muted);
font-size: 11px;
margin-bottom: 8px;
font-size: 12px;
line-height: 20px;
margin-bottom: var(--space-2);
}
.ai-text {
white-space: pre-wrap;
line-height: 1.8;
line-height: 24px;
font-weight: 400;
}
.ai-message.user .ai-text {
background: var(--semi-color-primary-light-default);
padding: 12px 14px;
border-radius: 10px;
background: var(--canvas);
padding: var(--space-3);
border-radius: 8px;
}
.ai-empty {
margin: 48px 8px;
margin: 32px 0;
color: var(--muted);
line-height: 1.8;
line-height: 24px;
}
.ai-empty strong {
display: block;
.ai-empty h3 {
color: var(--ink);
font-size: 18px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
margin: 0 0 var(--space-2);
}
.ai-empty .semi-button {
margin-top: var(--space-3);
}
.ai-empty span {
display: block;
font-size: 12px;
margin-top: 16px;
line-height: 20px;
margin-top: var(--space-4);
}
.ai-composer {
padding: 14px 16px;
flex-shrink: 0;
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid var(--line);
background: var(--surface);
}
.ai-context {
color: var(--muted);
font-size: 11px;
margin-bottom: 10px;
font-size: 12px;
line-height: 20px;
margin-bottom: var(--space-2);
overflow-wrap: anywhere;
}
.ai-send {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
gap: var(--space-2);
margin-top: var(--space-2);
}
.ai-send small,
.ai-tool-card small,
.ai-run-state small {
color: var(--muted);
font-size: 11px;
font-size: 12px;
line-height: 20px;
font-weight: 400;
}
.ai-send .semi-button {
flex-shrink: 0;
}
.ai-run-state small,
.ai-tool-card small {
display: block;
margin-top: 6px;
margin-top: var(--space-1);
overflow-wrap: anywhere;
}
.ai-tool-card {
border: 1px solid var(--line);
border-radius: 9px;
padding: 12px;
margin: 12px 0;
font-size: 12px;
border-radius: 8px;
padding: var(--space-3);
margin: var(--space-3) 0;
font-size: 13px;
line-height: 20px;
}
.ai-card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.ai-card-title strong {
font-size: 14px;
font-weight: 500;
}
.ai-tool-card p {
margin: 10px 0;
margin: var(--space-2) 0;
}
.ai-tool-card summary {
cursor: pointer;
padding: 8px 0;
padding: var(--space-2) 0;
}
.ai-approval {
border-top: 1px solid var(--line);
padding-top: var(--space-2);
margin-top: var(--space-3);
}
.ai-diff {
display: grid;
gap: 6px;
margin: 8px 0 16px;
gap: var(--space-2);
margin: var(--space-2) 0 var(--space-3);
}
.ai-diff strong {
font-weight: 400;
color: var(--muted);
}
.ai-diff del,
.ai-diff ins {
display: block;
padding: 8px;
padding: var(--space-2) var(--space-3);
white-space: pre-wrap;
border-radius: 4px;
text-decoration: none;
}
.ai-diff del > span,
.ai-diff ins > span {
display: block;
color: var(--muted);
font-size: 12px;
margin-bottom: var(--space-1);
}
.ai-diff del {
background: #f5636310;
text-decoration: none;
border-left: 2px solid #c35757;
background: var(--canvas);
}
.ai-diff ins {
background: #32925c10;
text-decoration: none;
border-left: 2px solid #32925c;
background: var(--semi-color-success-light-default);
}
.ai-alpha-results > div {
padding: 10px 0;
padding: var(--space-3) 0;
border-top: 1px solid var(--line);
}
.ai-alpha-results .text-link {
margin-left: 0;
padding: 0;
text-align: left;
overflow-wrap: anywhere;
}
.ai-alpha-results table {
width: 100%;
text-align: left;
margin-top: 10px;
margin-top: var(--space-2);
border-collapse: collapse;
table-layout: fixed;
font-variant-numeric: tabular-nums;
}
.ai-alpha-results th,
.ai-alpha-results td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
padding: var(--space-1) 0;
}
.ai-alpha-results th {
color: var(--muted);
font-weight: 400;
font-size: 10px;
padding-bottom: 4px;
font-size: 12px;
}
.ai-resize {
position: absolute;
@@ -184,30 +249,77 @@
background: var(--accent);
opacity: 0.3;
}
.ai-settings {
scroll-margin-top: var(--space-4);
}
.ai-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 var(--space-4);
}
.ai-settings form > .muted {
margin: var(--space-2) 0 var(--space-3);
}
.ai-settings .inline-actions {
margin-top: 14px;
margin-top: var(--space-3);
}
.ai-settings .panel-title {
.ai-test-results {
display: grid;
gap: var(--space-2);
font-size: 13px;
}
.ai-test-results > div {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: baseline;
gap: var(--space-2);
}
.text-link {
border: none;
background: transparent;
color: var(--accent);
padding: 0 3px;
cursor: pointer;
.ai-test-results .semi-tag {
flex-shrink: 0;
}
@media (max-width: 1439px) {
.ai-chat {
width: min(var(--chat-width, 420px), 100vw);
box-shadow: -30px 0 120px #151b2c30;
.ai-launcher {
position: fixed;
right: var(--space-4);
bottom: 64px;
z-index: 1002;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 4px 12px #1f232914;
}
/* Reacting to available business width also covers an expanded 640px chat rail. */
@container (max-width: 900px) {
.account-grid,
.profile-grid,
.permission-list {
grid-template-columns: 1fr;
}
.preferences-grid,
.advanced-grid {
grid-template-columns: 1fr 1fr;
}
.preferences-form {
flex-wrap: wrap;
}
.library-stats .last-sync {
display: none;
}
}
@container (max-width: 600px) {
.ai-settings-grid {
grid-template-columns: 1fr;
}
.account-counts {
grid-template-columns: 1fr 1fr;
row-gap: var(--space-3);
}
.account-counts > div:nth-child(2) {
border: 0;
}
.account-name,
.breadcrumbs {
display: none;
}
.top-actions {
margin-left: auto;
}
}
@media (max-width: 640px) {
@@ -217,15 +329,4 @@
.ai-resize {
display: none;
}
.ai-settings-grid {
grid-template-columns: 1fr;
}
}
.ai-launcher {
position: fixed;
right: 20px;
bottom: 24px;
z-index: 1002;
box-shadow: 0 4px 18px #29213e24;
}