principles-disciple 1.8.0 → 1.8.2

package/ui/src/charts.tsx

@@ -0,0 +1,586 @@
+import React from 'react';
+
+/**
+ * StatusBadge - 统一颜色的状态徽章
+ */
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+
+interface StatusBadgeProps {
+  variant: BadgeVariant;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BADGE_COLORS: Record<BadgeVariant, { bg: string; text: string }> = {
+  success: { bg: 'rgba(74, 124, 111, 0.12)', text: 'var(--success)' },
+  warning: { bg: 'rgba(184, 134, 11, 0.12)', text: 'var(--warning)' },
+  error: { bg: 'rgba(196, 92, 74, 0.12)', text: 'var(--error)' },
+  info: { bg: 'rgba(91, 139, 160, 0.12)', text: 'var(--info)' },
+  neutral: { bg: 'var(--bg-sunken)', text: 'var(--text-secondary)' },
+};
+
+export function StatusBadge({ variant, children, className = '' }: StatusBadgeProps) {
+  const { bg, text } = BADGE_COLORS[variant];
+  return (
+    <span
+      className={`badge ${variant !== 'neutral' ? variant : ''} ${className}`}
+      style={variant !== 'neutral' ? undefined : { background: bg, color: text }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/**
+ * EmptyState - 空状态插图组件
+ */
+
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return (
+    <div className="empty-state">
+      <div className="empty-state-icon">
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="8" y="12" width="32" height="24" rx="3" stroke="currentColor" strokeWidth="1.5" strokeDasharray="3 2"/>
+          <path d="M16 20h16M16 26h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+          <circle cx="38" cy="10" r="6" fill="var(--bg-sunken)" stroke="currentColor" strokeWidth="1.5"/>
+          <path d="M36 10h4M38 8v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+        </svg>
+      </div>
+      <p className="empty-state-title">{title}</p>
+      {description && <p className="empty-state-desc">{description}</p>}
+      {action && <div className="empty-state-action">{action}</div>}
+    </div>
+  );
+}
+
+/**
+ * Sparkline - 轻量级迷你趋势图
+ * 用于 KPI 卡片展示趋势
+ */
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  fillOpacity?: number;
+  showDots?: boolean;
+  animated?: boolean;
+}
+
+export function Sparkline({
+  data,
+  width = 60,
+  height = 24,
+  color = 'var(--accent)',
+  fillOpacity = 0.15,
+  showDots = false,
+  animated = true,
+}: SparklineProps) {
+  if (!data || data.length < 2) {
+    return <span className="sparkline-empty">-</span>;
+  }
+
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min;
+  // If all values are the same, draw a flat line in the middle
+  const isFlat = range === 0;
+
+  const points = data.map((value, index) => {
+    const x = (index / (data.length - 1)) * width;
+    const y = isFlat ? height / 2 : height - ((value - min) / range) * height;
+    return `${x},${y}`;
+  });
+
+  const linePoints = points.join(' ');
+  const areaPoints = `0,${height} ${linePoints} ${width},${height}`;
+
+  return (
+    <svg
+      className={`sparkline ${animated ? 'sparkline-animated' : ''}`}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+    >
+      {/* 填充区域 */}
+      <polygon
+        points={areaPoints}
+        fill={color}
+        fillOpacity={fillOpacity}
+        className="sparkline-area"
+      />
+      {/* 线条 */}
+      <polyline
+        points={linePoints}
+        fill="none"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="sparkline-line"
+      />
+      {/* 数据点 */}
+      {showDots && data.map((value, index) => {
+        const x = (index / (data.length - 1)) * width;
+        const y = isFlat ? height / 2 : height - ((value - min) / range!) * height;
+        return (
+          <circle
+            key={index}
+            cx={x}
+            cy={y}
+            r={2}
+            fill={color}
+            className="sparkline-dot"
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+/**
+ * MiniBarChart - 迷你柱状图
+ * 用于展示对比数据
+ */
+
+interface MiniBarChartProps {
+  data: number[];
+  labels?: string[];
+  width?: number;
+  height?: number;
+  color?: string;
+  barWidth?: number;
+  gap?: number;
+}
+
+export function MiniBarChart({
+  data,
+  labels,
+  width = 100,
+  height = 40,
+  color = 'var(--accent)',
+  barWidth = 6,
+  gap = 4,
+}: MiniBarChartProps) {
+  if (!data || data.length === 0) {
+    return <span className="chart-empty">-</span>;
+  }
+
+  const max = Math.max(...data, 1);
+  const totalWidth = data.length * (barWidth + gap) - gap;
+  const startX = (width - totalWidth) / 2;
+
+  return (
+    <svg
+      className="mini-bar-chart"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      {data.map((value, index) => {
+        const barHeight = (value / max) * (height - 4);
+        const x = startX + index * (barWidth + gap);
+        const y = height - barHeight - 2;
+        return (
+          <rect
+            key={index}
+            x={x}
+            y={y}
+            width={barWidth}
+            height={barHeight}
+            fill={color}
+            rx={2}
+            className="bar"
+          >
+            {labels && (
+              <title>{labels[index]}: {value}</title>
+            )}
+          </rect>
+        );
+      })}
+    </svg>
+  );
+}
+
+/**
+ * DonutChart - 环形图
+ * 用于展示比例数据
+ */
+
+interface DonutSegment {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface DonutChartProps {
+  segments: DonutSegment[];
+  size?: number;
+  strokeWidth?: number;
+  showLabels?: boolean;
+}
+
+export function DonutChart({
+  segments,
+  size = 80,
+  strokeWidth = 8,
+  showLabels = true,
+}: DonutChartProps) {
+  if (!segments || segments.length === 0) {
+    return <span className="chart-empty">-</span>;
+  }
+
+  const total = Math.abs(segments.reduce((sum, s) => sum + s.value, 0));
+  
+  // Handle zero total case
+  if (total === 0) {
+    return <span className="chart-empty">No data</span>;
+  }
+
+  const radius = (size - strokeWidth) / 2;
+  const center = size / 2;
+
+  let currentAngle = -90; // 从顶部开始
+
+  const paths = segments.map((segment, index) => {
+    const percentage = Math.abs(segment.value) / Math.abs(total);
+    const angle = percentage * 360;
+    const startAngle = currentAngle;
+    const endAngle = currentAngle + angle;
+
+    // 转换为弧度
+    const startRad = (startAngle * Math.PI) / 180;
+    const endRad = (endAngle * Math.PI) / 180;
+
+    // 计算弧线端点
+    const x1 = center + radius * Math.cos(startRad);
+    const y1 = center + radius * Math.sin(startRad);
+    const x2 = center + radius * Math.cos(endRad);
+    const y2 = center + radius * Math.sin(endRad);
+
+    // 大弧标志
+    const largeArc = angle > 180 ? 1 : 0;
+
+    const path = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`;
+
+    currentAngle = endAngle;
+
+    return {
+      ...segment,
+      path,
+      percentage,
+      key: index,
+    };
+  });
+
+  return (
+    <div className="donut-chart-wrapper">
+      <svg
+        className="donut-chart"
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+      >
+        {/* 背景圆环 */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke="var(--border)"
+          strokeWidth={strokeWidth}
+        />
+        {/* 数据弧线 */}
+        {paths.map((segment) => (
+          <path
+            key={segment.key}
+            d={segment.path}
+            fill="none"
+            stroke={segment.color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            className="donut-segment"
+          >
+            <title>{segment.label}: {segment.value} ({(segment.percentage * 100).toFixed(1)}%)</title>
+          </path>
+        ))}
+        {/* 中心数值 */}
+        <text
+          x={center}
+          y={center - 4}
+          textAnchor="middle"
+          className="donut-total"
+        >
+          {total}
+        </text>
+        <text
+          x={center}
+          y={center + 12}
+          textAnchor="middle"
+          className="donut-label"
+        >
+          total
+        </text>
+      </svg>
+      {showLabels && (
+        <div className="donut-legend">
+          {paths.map((segment) => (
+            <div key={segment.key} className="legend-item">
+              <span
+                className="legend-color"
+                style={{ background: segment.color }}
+              />
+              <span className="legend-label">{segment.label}</span>
+              <span className="legend-value">{segment.value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * TrendIndicator - 趋势指示器
+ * 展示数值变化方向
+ */
+
+interface TrendIndicatorProps {
+  value: number;
+  previousValue: number;
+  showPercent?: boolean;
+}
+
+export function TrendIndicator({
+  value,
+  previousValue,
+  showPercent = true,
+}: TrendIndicatorProps) {
+  if (previousValue === 0) {
+    return <span className="trend-neutral">-</span>;
+  }
+
+  const change = value - previousValue;
+  const percentChange = (change / previousValue) * 100;
+
+  const isPositive = change > 0;
+  const isNegative = change < 0;
+
+  const direction = isPositive ? '↑' : isNegative ? '↓' : '→';
+  const percentText = showPercent ? `${Math.abs(percentChange).toFixed(1)}%` : '';
+
+  return (
+    <span
+      className={`trend-indicator ${
+        isPositive ? 'trend-up' : isNegative ? 'trend-down' : 'trend-neutral'
+      }`}
+      aria-label={`${isPositive ? 'Increase' : isNegative ? 'Decrease' : 'No change'} of ${percentText}`}
+    >
+      <span className="trend-direction">{direction}</span>
+      {percentText && <span className="trend-percent">{percentText}</span>}
+    </span>
+  );
+}
+
+/**
+ * StatCard - 统计卡片（带趋势图）
+ */
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  trend?: number[];
+  trendLabel?: string;
+  status?: 'success' | 'warning' | 'error' | 'info';
+}
+
+export function StatCard({
+  label,
+  value,
+  trend,
+  trendLabel,
+  status = 'info',
+}: StatCardProps) {
+  const statusColors: Record<string, string> = {
+    success: 'var(--success)',
+    warning: 'var(--warning)',
+    error: 'var(--error)',
+    info: 'var(--accent)',
+  };
+
+  return (
+    <div className={`stat-card stat-card--${status}`}>
+      <div className="stat-content">
+        <span className="stat-label">{label}</span>
+        <span className="stat-value">{value}</span>
+        {trendLabel && <span className="stat-trend-label">{trendLabel}</span>}
+      </div>
+      {trend && trend.length >= 2 && (
+        <div className="stat-sparkline">
+          <Sparkline
+            data={trend}
+            width={50}
+            height={20}
+            color={statusColors[status]}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * TimeRangeSelector - 时间范围选择器
+ * 用于控制图表数据的时间范围
+ */
+
+interface TimeRangeSelectorProps {
+  value: number;
+  onChange: (days: number) => void;
+  options?: number[];
+}
+
+export function TimeRangeSelector({
+  value,
+  onChange,
+  options = [7, 14, 30],
+}: TimeRangeSelectorProps) {
+  return (
+    <div className="time-range-selector">
+      {options.map((days) => (
+        <button
+          key={days}
+          className={`time-range-option ${value === days ? 'active' : ''}`}
+          onClick={() => onChange(days)}
+        >
+          {days}天
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * GroupedBarChart - 分组柱状图
+ * 用于展示多组对比数据（如 created vs completed）
+ */
+
+interface GroupedBarChartProps {
+  data: Array<{
+    label: string;
+    values: number[];
+  }>;
+  colors?: string[];
+  width?: number;
+  height?: number;
+  barWidth?: number;
+  groupGap?: number;
+}
+
+export function GroupedBarChart({
+  data,
+  colors = ['var(--accent)', 'var(--earth-tan)'],
+  width = 280,
+  height = 60,
+  barWidth = 4,
+  groupGap = 8,
+}: GroupedBarChartProps) {
+  if (!data || data.length === 0) {
+    return <span className="chart-empty">-</span>;
+  }
+
+  // 找出最大值
+  const maxValue = Math.max(...data.flatMap((d) => d.values), 1);
+  const numBars = data[0]?.values.length || 1;
+  const groupWidth = numBars * barWidth + (numBars - 1) * 2;
+  const totalWidth = data.length * groupWidth + (data.length - 1) * groupGap;
+  const startX = (width - totalWidth) / 2;
+
+  return (
+    <svg
+      className="grouped-bar-chart"
+      width="100%"
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      {data.map((group, groupIndex) => {
+        const groupX = startX + groupIndex * (groupWidth + groupGap);
+        return group.values.map((value, barIndex) => {
+          const barHeight = (value / maxValue) * (height - 8);
+          const x = groupX + (barIndex + 1) * (barWidth + 2);
+          const y = height - barHeight - 4;
+          return (
+            <rect
+              key={`${groupIndex}-${barIndex}`}
+              x={x}
+              y={y}
+              width={barWidth}
+              height={barHeight}
+              fill={colors[barIndex] || colors[0]}
+              rx={2}
+              className="bar"
+            >
+              <title>{group.label}: {value}</title>
+            </rect>
+          );
+        });
+      })}
+    </svg>
+  );
+}
+
+/**
+ * CollapsiblePanel - 可折叠面板
+ */
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+interface CollapsiblePanelProps {
+  title: string;
+  badge?: React.ReactNode;
+  defaultCollapsed?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function CollapsiblePanel({
+  title,
+  badge,
+  defaultCollapsed = false,
+  children,
+  className = '',
+}: CollapsiblePanelProps) {
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+
+  return (
+    <section className={`panel collapsible-panel ${collapsed ? 'collapsed' : ''} ${className}`}>
+      <div
+        className="panel-header"
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        <div className="panel-header-left">
+          <h3>{title}</h3>
+          {badge}
+        </div>
+        <button className="collapse-toggle" onClick={(e) => { e.stopPropagation(); }}>
+          {collapsed ? (
+            <ChevronDown strokeWidth={1.75} size={18} />
+          ) : (
+            <ChevronUp strokeWidth={1.75} size={18} />
+          )}
+        </button>
+      </div>
+      {!collapsed && <div className="panel-content">{children}</div>}
+    </section>
+  );
+}

package/ui/src/components/ErrorState.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export function ErrorState({ error }: { error: string }) {
+  return <div className="panel error">{error}</div>;
+}
+

package/ui/src/components/Loading.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useI18n } from '../i18n/ui';
+
+export function Loading() {
+  const { t } = useI18n();
+  return (
+    <div className="loading-state">
+      <div className="spinner"></div>
+      <span>{t('common.loading')}</span>
+    </div>
+  );
+}
+

package/ui/src/components/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/auth';
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated } = useAuth();
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+  return <>{children}</>;
+}
+

package/ui/src/components/Shell.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Hexagon, BarChart3, GitBranch, FileCheck, Brain, Radio, Lock, Download, LogOut, Moon, Sun } from 'lucide-react';
+import { api } from '../api';
+import { useI18n } from '../i18n/ui';
+import { useAuth } from '../context/auth';
+import { useTheme } from '../context/theme';
+
+export function Shell({ children }: { children: React.ReactNode }) {
+  const { logout, token } = useAuth();
+  const { t } = useI18n();
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="app-shell">
+      <a href="#main-content" className="skip-link">跳过导航，直接访问内容</a>
+      <aside className="sidebar">
+        <div className="brand">
+          <div className="brand-logo">
+            <span className="logo-icon">
+              <Hexagon strokeWidth={1.5} />
+            </span>
+          </div>
+          <span className="eyebrow">{t('brand.title')}</span>
+          <h1>{t('brand.title')}</h1>
+          <p>{t('brand.subtitle')}</p>
+        </div>
+        <nav className="nav">
+          <NavLink to="/overview" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <BarChart3 strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.overview')}</span>
+          </NavLink>
+          <NavLink to="/evolution" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <GitBranch strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.evolution')}</span>
+          </NavLink>
+          <NavLink to="/samples" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <FileCheck strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.samples')}</span>
+          </NavLink>
+          <NavLink to="/thinking-models" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <Brain strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.thinkingModels')}</span>
+          </NavLink>
+          <NavLink to="/feedback" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <Radio strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.feedback')}</span>
+          </NavLink>
+          <NavLink to="/gate" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+            <span className="nav-icon">
+              <Lock strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.gateMonitor')}</span>
+          </NavLink>
+        </nav>
+        <div className="sidebar-footer">
+          <a className="export-link" href={api.exportCorrections('redacted')}>
+            <span className="nav-icon">
+              <Download strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.exportSamples')}</span>
+          </a>
+          <button className="theme-toggle" onClick={toggleTheme} title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
+            <span className="nav-icon">
+              {theme === 'dark' ? <Sun strokeWidth={1.75} /> : <Moon strokeWidth={1.75} />}
+            </span>
+            <span>{theme === 'dark' ? 'Light' : 'Dark'}</span>
+          </button>
+          <button className="logout-button" onClick={logout}>
+            <span className="nav-icon">
+              <LogOut strokeWidth={1.75} />
+            </span>
+            <span>{t('nav.logout')}</span>
+          </button>
+        </div>
+      </aside>
+      <main className="content" id="main-content">{children}</main>
+    </div>
+  );
+}
+