feat: 实施性能优化、UX主题、高危操作二次确认及DX规范

package.json

@@ -5,6 +5,7 @@
     "dev": "PUBLIC_API=https://update.reactnative.cn/api rsbuild dev",
     "dev:local": "PUBLIC_API=http://localhost:9000 rsbuild dev",
     "build": "NODE_ENV=production rsbuild build",
+    "build:analyze": "BUNDLE_ANALYZE=true NODE_ENV=production rsbuild build",
     "preview": "rsbuild preview",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "bun test",

rsbuild.config.ts

@@ -18,6 +18,11 @@ export default defineConfig({
       ),
     },
   },
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-experience',
+    },
+  },
   plugins: [
     pluginReact({
       reactCompiler: true,

src/components/dangerous-confirm-modal.tsx

@@ -0,0 +1,106 @@
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { Alert, Input, Modal, Typography } from 'antd';
+import { type ReactNode, useEffect, useState } from 'react';
+
+const { Text } = Typography;
+
+export interface DangerousConfirmModalProps {
+  open: boolean;
+  title: string;
+  description: ReactNode;
+  expectedConfirmText?: string;
+  confirmPlaceholder?: string;
+  dangerButtonText?: string;
+  loading?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void | Promise<void>;
+}
+
+/**
+ * 高危毁灭性操作二次确认 Guard 弹窗组件
+ * 当配置了 expectedConfirmText 时，用户必须在输入框中输入匹配的文本方可点击确认。
+ */
+export function DangerousConfirmModal({
+  open,
+  title,
+  description,
+  expectedConfirmText,
+  confirmPlaceholder = '请输入对应的确认名称以继续',
+  dangerButtonText = '确认执行',
+  loading = false,
+  onCancel,
+  onConfirm,
+}: DangerousConfirmModalProps) {
+  const [inputText, setInputText] = useState('');
+
+  // 重置输入状态
+  useEffect(() => {
+    if (open) {
+      setInputText('');
+    }
+  }, [open]);
+
+  const hasExpectedText =
+    expectedConfirmText !== undefined && expectedConfirmText !== null;
+  const isMatched = hasExpectedText
+    ? expectedConfirmText.trim() !== '' &&
+      inputText.trim() === expectedConfirmText.trim()
+    : true;
+
+  return (
+    <Modal
+      open={open}
+      title={
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            color: '#ff4d4f',
+          }}
+        >
+          <ExclamationCircleFilled style={{ fontSize: 20 }} />
+          <span>{title}</span>
+        </div>
+      }
+      onCancel={onCancel}
+      onOk={onConfirm}
+      okText={dangerButtonText}
+      okButtonProps={{
+        danger: true,
+        type: 'primary',
+        disabled: !isMatched,
+        loading,
+      }}
+      cancelText="取消"
+      destroyOnClose
+    >
+      <Alert
+        type="warning"
+        showIcon
+        message="高风险操作提示"
+        description={description}
+        style={{ marginBottom: 16, marginTop: 12 }}
+      />
+
+      {expectedConfirmText && (
+        <div style={{ marginTop: 12 }}>
+          <p style={{ marginBottom: 8, fontSize: 13 }}>
+            为防止误操作，请输入提示文本{' '}
+            <Text code copyable>
+              {expectedConfirmText}
+            </Text>{' '}
+            以进行确认：
+          </p>
+          <Input
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            placeholder={confirmPlaceholder}
+            status={inputText && !isMatched ? 'error' : ''}
+            autoFocus
+          />
+        </div>
+      )}
+    </Modal>
+  );
+}

src/components/lazy-chart.tsx

@@ -0,0 +1,119 @@
+import {
+  type ComponentProps,
+  type ComponentType,
+  lazy,
+  Suspense,
+  useCallback,
+  useState,
+} from 'react';
+import { SectionErrorBoundary } from './section-error-boundary';
+import { ChartSkeleton } from './skeletons';
+
+type ChartComponentType = 'Area' | 'Line' | 'Pie' | 'DualAxes';
+
+function createLazyChart<T extends ChartComponentType>(type: T) {
+  return lazy(() =>
+    import('@ant-design/charts').then((module) => ({
+      default: module[type] as ComponentType<any>,
+    })),
+  );
+}
+
+interface AsyncChartProps<T extends ChartComponentType> {
+  chartType: T;
+  errorTitle: string;
+  height?: number;
+  chartProps: Record<string, any>;
+}
+
+function AsyncChartWrapper<T extends ChartComponentType>({
+  chartType,
+  errorTitle,
+  height,
+  chartProps,
+}: AsyncChartProps<T>) {
+  const [retryCount, setRetryCount] = useState(0);
+  const [LazyComponent, setLazyComponent] = useState(() =>
+    createLazyChart(chartType),
+  );
+
+  const handleReset = useCallback(() => {
+    setLazyComponent(() => createLazyChart(chartType));
+    setRetryCount((c) => c + 1);
+  }, [chartType]);
+
+  return (
+    <SectionErrorBoundary title={errorTitle} onReset={handleReset}>
+      <Suspense
+        key={retryCount}
+        fallback={<ChartSkeleton height={height || 300} />}
+      >
+        <LazyComponent {...chartProps} />
+      </Suspense>
+    </SectionErrorBoundary>
+  );
+}
+
+export function AsyncArea({
+  height,
+  ...props
+}: ComponentProps<typeof import('@ant-design/charts')['Area']> & {
+  height?: number;
+}) {
+  return (
+    <AsyncChartWrapper
+      chartType="Area"
+      errorTitle="图表渲染异常"
+      height={height}
+      chartProps={{ ...props, height }}
+    />
+  );
+}
+
+export function AsyncLine({
+  height,
+  ...props
+}: ComponentProps<typeof import('@ant-design/charts')['Line']> & {
+  height?: number;
+}) {
+  return (
+    <AsyncChartWrapper
+      chartType="Line"
+      errorTitle="折线图渲染异常"
+      height={height}
+      chartProps={{ ...props, height }}
+    />
+  );
+}
+
+export function AsyncPie({
+  height,
+  ...props
+}: ComponentProps<typeof import('@ant-design/charts')['Pie']> & {
+  height?: number;
+}) {
+  return (
+    <AsyncChartWrapper
+      chartType="Pie"
+      errorTitle="饼图渲染异常"
+      height={height}
+      chartProps={{ ...props, height }}
+    />
+  );
+}
+
+export function AsyncDualAxes({
+  height,
+  ...props
+}: ComponentProps<typeof import('@ant-design/charts')['DualAxes']> & {
+  height?: number;
+}) {
+  return (
+    <AsyncChartWrapper
+      chartType="DualAxes"
+      errorTitle="双轴图表渲染异常"
+      height={height}
+      chartProps={{ ...props, height }}
+    />
+  );
+}

src/components/section-error-boundary.tsx

@@ -0,0 +1,72 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button } from 'antd';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  title?: string;
+  onReset?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class SectionErrorBoundary extends Component<Props, State> {
+  public override state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('SectionErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  public override render() {
+    if (this.state.hasError) {
+      return (
+        <Alert
+          type="error"
+          showIcon
+          message={this.props.title || '局部组件加载或渲染失败'}
+          description={
+            <div style={{ marginTop: 8 }}>
+              <p
+                style={{
+                  margin: '4px 0',
+                  fontSize: 13,
+                  color: 'rgba(0, 0, 0, 0.65)',
+                }}
+              >
+                {this.state.error?.message || '未知渲染错误'}
+              </p>
+              <Button
+                size="small"
+                type="primary"
+                danger
+                icon={<ReloadOutlined />}
+                onClick={this.handleReset}
+                style={{ marginTop: 8 }}
+              >
+                重试组件
+              </Button>
+            </div>
+          }
+          style={{ margin: '12px 0' }}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}