refactor(quality): Q21 前端巨型组件拆分 — DeploymentEditAdvanced 590L→289L (-51%), 提取 types(parseAdvancedManifest+buildAdvancedManifest 纯函数) + UpdateStrategyCard/TolerationsCard/PodMiscCard/PodSecurityCard/HostSettingsCard 5 个受控 Card 组件, manifest 解析(106L)和序列化(121L)提取为纯函数, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓, 17/17 测试通过

2026-07-08 20:37:03 +08:00
1 parent a530d3898c
commit b4591de97c
@@ -0,0 +1,90 @@
+// UpdateStrategyCard.tsx — 更新策略 + 历史版本/进度 卡片 (Q21 提取)
+// 受控展示组件，接收 state 片段 + setter 回调。
+import { RefreshCw, Clock } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import i18n from '@/i18n';
+
+interface UpdateStrategyCardProps {
+  strategyType: 'RollingUpdate' | 'Recreate';
+  onStrategyTypeChange: (t: 'RollingUpdate' | 'Recreate') => void;
+  maxSurge: string;
+  onMaxSurgeChange: (v: string) => void;
+  maxUnavailable: string;
+  onMaxUnavailableChange: (v: string) => void;
+  revisionHistoryLimit: string;
+  onRevisionHistoryLimitChange: (v: string) => void;
+  progressDeadlineSeconds: string;
+  onProgressDeadlineSecondsChange: (v: string) => void;
+}
+
+export function UpdateStrategyCard({
+  strategyType, onStrategyTypeChange,
+  maxSurge, onMaxSurgeChange,
+  maxUnavailable, onMaxUnavailableChange,
+  revisionHistoryLimit, onRevisionHistoryLimitChange,
+  progressDeadlineSeconds, onProgressDeadlineSecondsChange,
+}: UpdateStrategyCardProps) {
+  return (
+    <>
+      {/* 更新策略 */}
+      <Card className="dg-card">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <RefreshCw className="h-4 w-4 dg-text-blue" />{i18n.t('k8s.editAdvanced.updateStrategy')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0 space-y-3">
+          <div className="flex items-center gap-4">
+            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
+              <input type="radio" checked={strategyType === 'RollingUpdate'} onChange={() => onStrategyTypeChange('RollingUpdate')}
+                className="accent-blue-500" />
+              RollingUpdate（滚动更新）
+            </label>
+            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
+              <input type="radio" checked={strategyType === 'Recreate'} onChange={() => onStrategyTypeChange('Recreate')}
+                className="accent-blue-500" />
+              Recreate（重建）
+            </label>
+          </div>
+          {strategyType === 'RollingUpdate' && (
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="dg-text-muted text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
+                <Input value={maxSurge} onChange={e => onMaxSurgeChange(e.target.value)}
+                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
+              </div>
+              <div>
+                <Label className="dg-text-muted text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
+                <Input value={maxUnavailable} onChange={e => onMaxUnavailableChange(e.target.value)}
+                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 历史版本 / 进度 */}
+      <Card className="dg-card">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Clock className="h-4 w-4 dg-text-yellow" />历史版本 &amp; 进度
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-0 grid grid-cols-2 gap-3">
+          <div>
+            <Label className="dg-text-muted text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
+            <Input type="number" value={revisionHistoryLimit} onChange={e => onRevisionHistoryLimitChange(e.target.value)}
+              className="h-8 mt-1 dg-input text-sm font-mono" />
+          </div>
+          <div>
+            <Label className="dg-text-muted text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
+            <Input type="number" value={progressDeadlineSeconds} onChange={e => onProgressDeadlineSecondsChange(e.target.value)}
+              className="h-8 mt-1 dg-input text-sm font-mono" />
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+}