ZhuLinsen#602 [PR 7] 首页工作台状态管理收口与追问链路优化 (ZhuLinsen#760)

* feat(theme): establish theme-aware design system and normalize UI tokens * refactor(web): implement stockPoolStore and modernize dashboard architecture * feat(web): enhance analysis follow-up flow and user experience * test(web): fix layout regressions and strengthen automated coverage * update CHANGELOG.md * feat(ChatPage): enhance follow-up context handling and update tests for hydration logic. update CHANGELOG.md * feat(AuthContext): update login logic to reset dashboard state based on auth status test(AuthContext): add test for dashboard state reset behavior when auth is enabled feat(stockPoolStore): implement request sequencing to ignore late history responses * fix(web): harden dashboard task sync and follow-up flow

Author: Activer007

apps/dsa-web/e2e/smoke.spec.ts

@@ -52,7 +52,7 @@ test.describe('web smoke', () => {
  test('home page shows analysis entry and history panel after login', async ({ page }) => {
  await login(page);
 
- const stockInput = page.getByPlaceholder('输入股票代码，如 600519、00700、AAPL');
+ const stockInput = page.getByPlaceholder('输入股票代码，如 600519、HK00700、AAPL');
  await expect(stockInput).toBeVisible({ timeout: 10_000 });
  await expect(page.getByRole('link', { name: '首页' })).toBeVisible();
  await expect(page.getByRole('link', { name: '问股' })).toBeVisible();
@@ -108,8 +108,8 @@ test.describe('web smoke', () => {
  await page.waitForLoadState('domcontentloaded');
  await page.waitForTimeout(1000);
 
- // Use text content instead of role for heading
- await expect(page.getByText('系统设置')).toBeVisible({ timeout: 10_000 });
+ // Use heading role for more precise selection
+ await expect(page.getByRole('heading', { name: '系统设置' })).toBeVisible({ timeout: 10_000 });
  await expect(page.getByRole('button', { name: '重置' })).toBeVisible();
  await expect(page.getByRole('button', { name: /保存配置/ })).toBeVisible();
  });

apps/dsa-web/package-lock.json

@@ -33,17 +33,17 @@ export const ApiErrorAlert: React.FC<ApiErrorAlertProps> = ({
  {onDismiss ? (
  <button
  type="button"
- className="shrink-0 rounded-md border border-white/10 px-2 py-1 text-[11px] text-red-100/85 transition hover:bg-white/5"
+ className="shrink-0 rounded-md border border-danger/25 bg-danger/5 px-2 py-1 text-[11px] text-danger transition hover:bg-danger/12"
  onClick={onDismiss}
  >
  {dismissLabel}
  </button>
  ) : null}
  </div>
  {showDetails ? (
- <details className="mt-3 rounded-lg border border-white/8 bg-black/15 px-3 py-2">
- <summary className="cursor-pointer text-xs text-red-100/90">查看详情</summary>
- <pre className="mt-2 whitespace-pre-wrap break-words text-[11px] leading-5 text-red-100/85">
+ <details className="mt-3 rounded-lg border border-subtle bg-surface-2 px-3 py-2">
+ <summary className="cursor-pointer text-xs text-danger opacity-90">查看详情</summary>
+ <pre className="mt-2 whitespace-pre-wrap break-words text-[11px] leading-5 text-danger opacity-85">
  {error.rawMessage}
  </pre>
  </details>

apps/dsa-web/src/components/common/ApiErrorAlert.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { cn } from '../../utils/cn';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
- variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient' | 'danger' | 'settings-primary' | 'settings-secondary';
+ variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient' | 'danger' | 'danger-subtle' | 'settings-primary' | 'settings-secondary' | 'home-action-ai' | 'home-action-report';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  isLoading?: boolean;
  /** Custom loading text. */
@@ -20,12 +20,15 @@ const BUTTON_SIZE_STYLES = {
 const BUTTON_VARIANT_STYLES = {
  primary: 'border border-cyan/30 bg-primary-gradient text-primary-foreground shadow-lg shadow-cyan/20 hover:brightness-105',
  secondary: 'border border-border/70 bg-card text-foreground shadow-soft-card hover:bg-hover',
- 'settings-primary': 'border border-[rgba(0,212,255,0.26)] bg-gradient-to-br from-[rgba(0,212,255,0.96)] to-[rgba(0,168,204,0.96)] text-[#041118] shadow-lg shadow-cyan/20 hover:brightness-105 hover:shadow-xl hover:shadow-cyan/22',
- 'settings-secondary': 'border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.03)] text-secondary-text hover:translate-y-[-1px] hover:border-[rgba(0,212,255,0.3)] hover:bg-[rgba(0,212,255,0.06)] hover:text-foreground',
+ 'settings-primary': 'border settings-button-primary hover:brightness-105 hover:shadow-xl',
+ 'settings-secondary': 'border settings-button-secondary hover:translate-y-[-1px]',
  outline: 'border border-cyan/25 bg-transparent text-cyan hover:bg-cyan/10',
  ghost: 'border border-transparent bg-transparent text-secondary-text hover:bg-hover hover:text-foreground',
  gradient: 'border border-cyan/20 bg-gradient-to-r from-cyan to-purple text-primary-foreground shadow-lg shadow-cyan/20 hover:brightness-105',
  danger: 'border border-danger/40 bg-danger text-destructive-foreground shadow-lg shadow-danger/20 hover:brightness-105',
+ 'danger-subtle': 'border border-danger/60 bg-danger/10 text-danger hover:bg-danger/15',
+ 'home-action-ai': 'bg-[var(--home-action-ai-bg)] border border-[var(--home-action-ai-border)] text-[var(--home-action-ai-text)] hover:bg-[var(--home-action-ai-hover-bg)]',
+ 'home-action-report': 'bg-[var(--home-action-report-bg)] border border-[var(--home-action-report-border)] text-[var(--home-action-report-text)] hover:bg-[var(--home-action-report-hover-bg)]',
 } as const;
 
 /**
@@ -43,7 +46,7 @@ export const Button: React.FC<ButtonProps> = ({
  type = 'button',
  ...props
 }) => {
- const glowStyles = glow ? 'shadow-glow-cyan hover:shadow-[0_0_30px_rgba(0,212,255,0.38)]' : '';
+ const glowStyles = glow ? 'shadow-glow-cyan settings-glow-cyan-hover' : '';
 
  return (
  <button

apps/dsa-web/src/components/common/Button.tsx

@@ -32,7 +32,7 @@ export const Card: React.FC<CardProps> = ({
 
  const variantStyles = {
  default: 'terminal-card',
- bordered: 'terminal-card terminal-card-hover',
+ bordered: 'terminal-card',
  gradient: 'gradient-border-card',
  };
 
@@ -45,7 +45,7 @@ export const Card: React.FC<CardProps> = ({
  {(title || subtitle) && (
  <div className="mb-3">
  {subtitle ? <span className="label-uppercase">{subtitle}</span> : null}
- {title ? <h3 className="mt-1 text-lg font-semibold text-white">{title}</h3> : null}
+ {title ? <h3 className="mt-1 text-lg font-semibold text-foreground">{title}</h3> : null}
  </div>
  )}
  {children}
@@ -61,7 +61,7 @@ export const Card: React.FC<CardProps> = ({
  {(title || subtitle) && (
  <div className="mb-3">
  {subtitle ? <span className="label-uppercase">{subtitle}</span> : null}
- {title ? <h3 className="mt-1 text-lg font-semibold text-white">{title}</h3> : null}
+ {title ? <h3 className="mt-1 text-lg font-semibold text-foreground">{title}</h3> : null}
  </div>
  )}
  {children}

apps/dsa-web/src/components/common/Card.tsx

@@ -36,7 +36,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
  {label && (
  <label
  htmlFor={checkboxId}
- className="cursor-pointer select-none text-sm font-medium text-white"
+ className="cursor-pointer select-none text-sm font-medium text-foreground"
  >
  {label}
  </label>

apps/dsa-web/src/components/common/Checkbox.tsx

@@ -24,19 +24,19 @@ export const Collapsible: React.FC<CollapsibleProps> = ({
  return (
  <div
  className={cn(
- 'overflow-hidden rounded-2xl border border-white/8 bg-card/70 shadow-soft-card transition-all duration-300',
- 'hover:border-cyan/20',
+ 'overflow-hidden rounded-2xl border border-subtle bg-card/70 shadow-soft-card transition-all duration-300',
+ 'hover:border-accent',
  className,
  )}
  >
  <button
  type="button"
  onClick={() => setIsOpen(!isOpen)}
- className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5"
+ className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-hover"
  >
  <div className="flex items-center gap-3">
- {icon && <span className="text-cyan-400">{icon}</span>}
- <span className="font-medium text-gray-100">{title}</span>
+ {icon && <span className="text-cyan">{icon}</span>}
+ <span className="font-medium text-foreground">{title}</span>
  </div>
  <svg
  className={cn('h-5 w-5 text-secondary-text transition-transform duration-300', isOpen && 'rotate-180')}
@@ -51,7 +51,7 @@ export const Collapsible: React.FC<CollapsibleProps> = ({
  <div
  className={cn('overflow-hidden transition-all duration-300 ease-in-out', isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0')}
  >
- <div className="border-t border-white/8 px-4 pb-4 pt-2">
+ <div className="border-t border-subtle px-4 pb-4 pt-2">
  {children}
  </div>
  </div>

apps/dsa-web/src/components/common/Collapsible.tsx

@@ -76,7 +76,7 @@ export const Drawer: React.FC<DrawerProps> = ({
  className={cn(
  'relative flex w-full flex-col bg-card',
  borderClass,
- side === 'right' ? 'border-white/50' : 'border-border/70 shadow-2xl',
+ side === 'right' ? 'border-border/80' : 'border-border/70 shadow-2xl',
  side === 'left' ? 'animate-slide-in-left' : 'animate-slide-in-right'
  )}
  >