@yancyyu/openhermit 1.5.8 → 1.5.9

package/src/renderer/components/settings/sections/CliStatusSection.tsx

@@ -420,63 +420,63 @@ export const CliStatusSection = ({
                   </p>
                 )}
                 <div className="ml-6 mt-3 space-y-2">
-                    {ALL_AGENT_TYPES.map((agentType) => {
-                      const provider = cliProviderStatusByAgentType.get(agentType) ?? null;
-                      const harnessProviders = globalProvidersByAgentType.get(agentType) ?? [];
-                      if (!provider) {
-                        return (
-                          <div
-                            key={agentType}
-                            className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2 rounded-md border px-3 py-2"
-                            style={{
-                              borderColor: 'var(--color-border-subtle)',
-                              backgroundColor: 'rgba(255, 255, 255, 0.02)',
-                            }}
-                          >
-                            <div className="min-w-0">
-                              <div className="flex items-center gap-2 text-xs">
-                                <Terminal
-                                  className="size-4 shrink-0"
-                                  style={{ color: 'var(--color-text-muted)' }}
-                                />
-                                <span
-                                  className="font-medium"
-                                  style={{ color: 'var(--color-text-secondary)' }}
-                                >
-                                  {AGENT_TYPE_LABELS[agentType]}
-                                </span>
-                                <span style={{ color: 'var(--color-text-muted)' }}>
-                                  {harnessProviders.length > 0
-                                    ? `${harnessProviders.length} 个 Provider`
-                                    : '未配置 Provider'}
-                                </span>
-                              </div>
-                              <div
-                                className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px]"
+                  {ALL_AGENT_TYPES.map((agentType) => {
+                    const provider = cliProviderStatusByAgentType.get(agentType) ?? null;
+                    const harnessProviders = globalProvidersByAgentType.get(agentType) ?? [];
+                    if (!provider) {
+                      return (
+                        <div
+                          key={agentType}
+                          className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2 rounded-md border px-3 py-2"
+                          style={{
+                            borderColor: 'var(--color-border-subtle)',
+                            backgroundColor: 'rgba(255, 255, 255, 0.02)',
+                          }}
+                        >
+                          <div className="min-w-0">
+                            <div className="flex items-center gap-2 text-xs">
+                              <Terminal
+                                className="size-4 shrink-0"
                                 style={{ color: 'var(--color-text-muted)' }}
+                              />
+                              <span
+                                className="font-medium"
+                                style={{ color: 'var(--color-text-secondary)' }}
                               >
-                                <span>Agent 类型：{agentType}</span>
-                                <span>Provider：{harnessProviders.length}</span>
-                              </div>
+                                {AGENT_TYPE_LABELS[agentType]}
+                              </span>
+                              <span style={{ color: 'var(--color-text-muted)' }}>
+                                {harnessProviders.length > 0
+                                  ? `${harnessProviders.length} 个 Provider`
+                                  : '未配置 Provider'}
+                              </span>
                             </div>
-                            <div className="flex shrink-0 items-start gap-2">
-                              <button
-                                type="button"
-                                onClick={() => handleHarnessManage(agentType)}
-                                className="flex items-center gap-1 rounded-md border px-2 py-[3px] text-[10px] font-medium transition-colors hover:bg-white/5"
-                                style={{
-                                  borderColor: 'var(--color-border)',
-                                  color: 'var(--color-text-secondary)',
-                                }}
-                              >
-                                <SlidersHorizontal className="size-3" />
-                                配置
-                              </button>
+                            <div
+                              className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px]"
+                              style={{ color: 'var(--color-text-muted)' }}
+                            >
+                              <span>Agent 类型：{agentType}</span>
+                              <span>Provider：{harnessProviders.length}</span>
                             </div>
                           </div>
-                        );
-                      }
-                      return (
+                          <div className="flex shrink-0 items-start gap-2">
+                            <button
+                              type="button"
+                              onClick={() => handleHarnessManage(agentType)}
+                              className="flex items-center gap-1 rounded-md border px-2 py-[3px] text-[10px] font-medium transition-colors hover:bg-white/5"
+                              style={{
+                                borderColor: 'var(--color-border)',
+                                color: 'var(--color-text-secondary)',
+                              }}
+                            >
+                              <SlidersHorizontal className="size-3" />
+                              配置
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    }
+                    return (
                       <div
                         key={agentType}
                         className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-2 rounded-md border px-3 py-2"
@@ -526,9 +526,9 @@ export const CliStatusSection = ({
                           </div>
                         </div>
                       </div>
-                      );
-                    })}
-                  </div>
+                    );
+                  })}
+                </div>
               </div>
             ) : (
               <div className="space-y-2 text-sm" style={{ color: 'var(--color-text-secondary)' }}>
@@ -683,7 +683,9 @@ export const CliStatusSection = ({
       <GenericHarnessProviderDialog
         agentType={genericHarnessAgentType}
         providers={
-          genericHarnessAgentType ? (globalProvidersByAgentType.get(genericHarnessAgentType) ?? []) : []
+          genericHarnessAgentType
+            ? (globalProvidersByAgentType.get(genericHarnessAgentType) ?? [])
+            : []
         }
         loading={globalProvidersLoading}
         error={globalProvidersError}
@@ -793,7 +795,9 @@ const GenericHarnessProviderDialog = ({
                 placeholder="API Key（可选）"
               />
             </div>
-            {addProviderError ? <div className="text-xs text-red-400">{addProviderError}</div> : null}
+            {addProviderError ? (
+              <div className="text-xs text-red-400">{addProviderError}</div>
+            ) : null}
             <div className="flex justify-end">
               <button
                 type="button"
@@ -919,8 +923,8 @@ const GenericHarnessProviderDialog = ({
                 color: 'var(--color-text-muted)',
               }}
             >
-              当前还没有绑定到 {title} 的 Provider。请在 Hermit 配置中添加
-              `agent_types` 包含 `{agentType ?? 'agent'}` 的 Provider。
+              当前还没有绑定到 {title} 的 Provider。请在 Hermit 配置中添加 `agent_types` 包含 `
+              {agentType ?? 'agent'}` 的 Provider。
             </div>
           )}
         </div>

package/src/renderer/components/settings/sections/GeneralSection.tsx

@@ -451,11 +451,7 @@ export const GeneralSection = ({
           {copied ? '已复制' : '复制链接'}
         </button>
       </div>
-      {serverError && (
-        <p className="mb-2 text-xs text-red-400">
-          服务状态获取失败：{serverError}
-        </p>
-      )}
+      {serverError && <p className="mb-2 text-xs text-red-400">服务状态获取失败：{serverError}</p>}
       <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
         当前为 Web 控制台模式。服务由 Hermit 后端托管，不能在浏览器内启动或关闭。
       </p>
@@ -590,7 +586,9 @@ export const GeneralSection = ({
                   min={100}
                   value={ccSettings.stream_preview_interval_ms}
                   onChange={(event) =>
-                    patchCcSettings({ stream_preview_interval_ms: Number(event.target.value) || 100 })
+                    patchCcSettings({
+                      stream_preview_interval_ms: Number(event.target.value) || 100,
+                    })
                   }
                   className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
                 />
@@ -625,11 +623,7 @@ export const GeneralSection = ({
             </div>
 
             <div className="flex items-center gap-3">
-              <Button
-                size="sm"
-                onClick={() => void saveCcSettings()}
-                disabled={ccSettingsSaving}
-              >
+              <Button size="sm" onClick={() => void saveCcSettings()} disabled={ccSettingsSaving}>
                 {ccSettingsSaving ? <Loader2 className="mr-1.5 size-3.5 animate-spin" /> : null}
                 保存运行设置
               </Button>

package/src/renderer/components/settings/sections/HarnessSection.tsx

@@ -30,7 +30,8 @@ export const HarnessSection = (): React.JSX.Element => {
         fetch('/api/v1/projects'),
       ]);
 
-      const providerData = providerRes.status === 'fulfilled' ? providerRes.value : { providers: [] };
+      const providerData =
+        providerRes.status === 'fulfilled' ? providerRes.value : { providers: [] };
       const providerCoverage = new Map<CcAgentType, string[]>(
         ALL_AGENT_TYPES.map((type) => [type, []])
       );
@@ -50,10 +51,12 @@ export const HarnessSection = (): React.JSX.Element => {
       if (projectsRes.status === 'fulfilled' && projectsRes.value.ok) {
         try {
           const json = await projectsRes.value.json();
-          for (const proj of (json.data?.projects ?? [])) {
+          for (const proj of json.data?.projects ?? []) {
             if (proj.agent_type) projectAgentTypes.add(proj.agent_type);
           }
-        } catch { /* ignore parse errors */ }
+        } catch {
+          /* ignore parse errors */
+        }
       }
 
       setUsedAgentTypes(projectAgentTypes);
@@ -83,11 +86,11 @@ export const HarnessSection = (): React.JSX.Element => {
       {/* Supported agent types reference */}
       <div>
         <SettingsSectionHeader title="支持的 Agent 类型" />
-        <p className="text-xs mb-3" style={{ color: 'var(--color-text-muted)' }}>
+        <p className="mb-3 text-xs" style={{ color: 'var(--color-text-muted)' }}>
           hermit 支持的全部 Agent CLI 类型。绿色表示已配置对应 Provider。
         </p>
 
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
           {ALL_AGENT_TYPES.map((type) => {
             const covering = coveredTypes.get(type) ?? [];
             const covered = covering.length > 0;
@@ -96,23 +99,34 @@ export const HarnessSection = (): React.JSX.Element => {
               <div
                 key={type}
                 className="flex items-center gap-2 rounded-lg border px-3 py-2.5"
-                style={{ borderColor: 'var(--color-border)', background: 'var(--color-surface-raised)' }}
+                style={{
+                  borderColor: 'var(--color-border)',
+                  background: 'var(--color-surface-raised)',
+                }}
               >
-                <div className={cn(
-                  'w-2 h-2 rounded-full shrink-0',
-                  covered ? 'bg-green-500' : 'bg-gray-500'
-                )} />
+                <div
+                  className={cn(
+                    'h-2 w-2 shrink-0 rounded-full',
+                    covered ? 'bg-green-500' : 'bg-gray-500'
+                  )}
+                />
                 <div className="min-w-0 flex-1">
-                  <p className="text-xs font-medium truncate" style={{ color: 'var(--color-text)' }}>
+                  <p
+                    className="truncate text-xs font-medium"
+                    style={{ color: 'var(--color-text)' }}
+                  >
                     {AGENT_TYPE_LABELS[type]}
                   </p>
                   {covered && (
-                    <p className="text-[10px] truncate" style={{ color: 'var(--color-text-muted)' }}>
+                    <p
+                      className="truncate text-[10px]"
+                      style={{ color: 'var(--color-text-muted)' }}
+                    >
                       {covering.join(', ')}
                     </p>
                   )}
                 </div>
-                {covered && <CheckCircle2 size={12} className="text-green-500 shrink-0" />}
+                {covered && <CheckCircle2 size={12} className="shrink-0 text-green-500" />}
               </div>
             );
           })}
@@ -122,8 +136,9 @@ export const HarnessSection = (): React.JSX.Element => {
       {/* Unified harness configuration: runtime + providers */}
       <div>
         <SettingsSectionHeader title="Harness 配置" />
-        <p className="text-xs mb-3" style={{ color: 'var(--color-text-muted)' }}>
-          点击对应 Harness 的“配置”，安装、检查运行时，并配置 settings.json、API Key、端点和认证方式。
+        <p className="mb-3 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          点击对应 Harness 的“配置”，安装、检查运行时，并配置 settings.json、API
+          Key、端点和认证方式。
         </p>
 
         <CliStatusSection showSectionHeader={false} />

package/src/renderer/components/settings/sections/PlatformsSection.tsx

@@ -53,7 +53,9 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
       { key: 'app_secret', label: 'App Secret', placeholder: '...', required: true, secret: true },
       { key: 'allow_from', label: '允许来源（用户 ID 或 *）', placeholder: '* 或 ou_xxxx' },
       {
-        key: 'share_session_in_channel', label: '群内共享记忆', placeholder: '',
+        key: 'share_session_in_channel',
+        label: '群内共享记忆',
+        placeholder: '',
         type: 'select',
         options: [
           { value: 'false', label: '关闭（默认）— 每人独立上下文' },
@@ -61,7 +63,9 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
         ],
       },
       {
-        key: 'thread_isolation', label: '按回复串隔离', placeholder: '',
+        key: 'thread_isolation',
+        label: '按回复串隔离',
+        placeholder: '',
         type: 'select',
         options: [
           { value: 'false', label: '关闭（默认）' },
@@ -77,7 +81,9 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
       { key: 'app_secret', label: 'App Secret', placeholder: '...', required: true, secret: true },
       { key: 'allow_from', label: '允许来源', placeholder: '* 或 ou_xxxx' },
       {
-        key: 'share_session_in_channel', label: '群内共享记忆', placeholder: '',
+        key: 'share_session_in_channel',
+        label: '群内共享记忆',
+        placeholder: '',
         type: 'select',
         options: [
           { value: 'false', label: '关闭（默认）— 每人独立上下文' },
@@ -98,10 +104,18 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
   telegram: {
     label: 'Telegram',
     fields: [
-      { key: 'bot_token', label: 'Bot Token', placeholder: '1234567890:AAH...', required: true, secret: true },
+      {
+        key: 'bot_token',
+        label: 'Bot Token',
+        placeholder: '1234567890:AAH...',
+        required: true,
+        secret: true,
+      },
       { key: 'allow_from', label: '允许的 Chat ID', placeholder: '* 或 123456789' },
       {
-        key: 'share_session_in_channel', label: '群内共享记忆', placeholder: '',
+        key: 'share_session_in_channel',
+        label: '群内共享记忆',
+        placeholder: '',
         type: 'select',
         options: [
           { value: 'false', label: '关闭（默认）— 每人独立上下文' },
@@ -117,7 +131,9 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
       { key: 'app_secret', label: 'App Secret', placeholder: '...', required: true, secret: true },
       { key: 'allow_from', label: '允许来源', placeholder: '*' },
       {
-        key: 'share_session_in_channel', label: '群内共享记忆', placeholder: '',
+        key: 'share_session_in_channel',
+        label: '群内共享记忆',
+        placeholder: '',
         type: 'select',
         options: [
           { value: 'false', label: '关闭（默认）— 每人独立上下文' },
@@ -129,15 +145,19 @@ const PLATFORM_META: Record<PlatformType, { label: string; fields: PlatformField
   slack: {
     label: 'Slack',
     fields: [
-      { key: 'bot_token', label: 'Bot Token', placeholder: 'xoxb-...', required: true, secret: true },
+      {
+        key: 'bot_token',
+        label: 'Bot Token',
+        placeholder: 'xoxb-...',
+        required: true,
+        secret: true,
+      },
       { key: 'app_token', label: 'App Token', placeholder: 'xapp-...', secret: true },
     ],
   },
   bridge: {
     label: 'Bridge（内部）',
-    fields: [
-      { key: 'allow_from', label: '允许来源', placeholder: '* 或平台名' },
-    ],
+    fields: [{ key: 'allow_from', label: '允许来源', placeholder: '* 或平台名' }],
   },
 };
 
@@ -177,7 +197,7 @@ async function fetchProjectDetail(name: string): Promise<ProjectDetail> {
 async function addPlatform(
   projectName: string,
   type: string,
-  options: Record<string, string>,
+  options: Record<string, string>
 ): Promise<void> {
   const res = await fetch(`/api/v1/projects/${encodeURIComponent(projectName)}/add-platform`, {
     method: 'POST',
@@ -213,16 +233,23 @@ export const PlatformsSection = (): React.JSX.Element => {
     }
   }, []);
 
-  useEffect(() => { void refresh(); }, [refresh]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
 
   const toggleExpand = async (name: string) => {
-    if (expanded === name) { setExpanded(null); return; }
+    if (expanded === name) {
+      setExpanded(null);
+      return;
+    }
     setExpanded(name);
     if (!details[name]) {
       try {
         const d = await fetchProjectDetail(name);
         setDetails((prev) => ({ ...prev, [name]: d }));
-      } catch { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
     }
   };
 
@@ -232,7 +259,9 @@ export const PlatformsSection = (): React.JSX.Element => {
     try {
       const d = await fetchProjectDetail(projectName);
       setDetails((prev) => ({ ...prev, [projectName]: d }));
-    } catch { /* ignore */ }
+    } catch {
+      /* ignore */
+    }
     void refresh();
   };
 
@@ -257,7 +286,9 @@ export const PlatformsSection = (): React.JSX.Element => {
       </div>
 
       {loading && (
-        <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>加载中…</p>
+        <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+          加载中…
+        </p>
       )}
 
       <div className="space-y-2">
@@ -277,11 +308,17 @@ export const PlatformsSection = (): React.JSX.Element => {
                 onClick={() => void toggleExpand(proj.name)}
               >
                 {isExpanded ? (
-                  <ChevronDown className="size-4 shrink-0" style={{ color: 'var(--color-text-muted)' }} />
+                  <ChevronDown
+                    className="size-4 shrink-0"
+                    style={{ color: 'var(--color-text-muted)' }}
+                  />
                 ) : (
-                  <ChevronRight className="size-4 shrink-0" style={{ color: 'var(--color-text-muted)' }} />
+                  <ChevronRight
+                    className="size-4 shrink-0"
+                    style={{ color: 'var(--color-text-muted)' }}
+                  />
                 )}
-                <span className="flex-1 font-medium text-sm" style={{ color: 'var(--color-text)' }}>
+                <span className="flex-1 text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                   {proj.name}
                 </span>
                 <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
@@ -308,29 +345,33 @@ export const PlatformsSection = (): React.JSX.Element => {
               {/* Expanded detail */}
               {isExpanded && (
                 <div
-                  className="border-t px-4 py-3 space-y-3"
+                  className="space-y-3 border-t px-4 py-3"
                   style={{ borderColor: 'var(--color-border)', background: 'var(--color-surface)' }}
                 >
                   {detail ? (
                     <>
                       {detail.platforms.map((p) => {
                         const meta = PLATFORM_META[p.type as PlatformType];
-                        const cfg = detail.platform_configs.find(
-                          (c) => c.type === p.type,
-                        );
+                        const cfg = detail.platform_configs.find((c) => c.type === p.type);
                         return (
                           <div
                             key={p.type}
                             className="rounded-lg border p-3"
-                            style={{ borderColor: 'var(--color-border)', background: 'var(--color-surface-raised)' }}
+                            style={{
+                              borderColor: 'var(--color-border)',
+                              background: 'var(--color-surface-raised)',
+                            }}
                           >
-                            <div className="flex items-center gap-2 mb-2">
+                            <div className="mb-2 flex items-center gap-2">
                               {p.connected ? (
                                 <Wifi className="size-3.5 text-green-400" />
                               ) : (
                                 <WifiOff className="size-3.5 text-red-400" />
                               )}
-                              <span className="font-medium text-sm" style={{ color: 'var(--color-text)' }}>
+                              <span
+                                className="text-sm font-medium"
+                                style={{ color: 'var(--color-text)' }}
+                              >
                                 {meta?.label ?? p.type}
                               </span>
                               <span
@@ -340,31 +381,40 @@ export const PlatformsSection = (): React.JSX.Element => {
                                 {p.connected ? '已连接' : '未连接'}
                               </span>
                             </div>
-                            {cfg && Object.entries(cfg)
-                              .filter(([k]) => k !== 'type')
-                              .map(([k, v]) => (
-                                <div key={k} className="flex gap-2 text-xs mt-1">
-                                  <span className="w-28 shrink-0" style={{ color: 'var(--color-text-muted)' }}>{k}</span>
-                                  <span className="truncate font-mono" style={{ color: 'var(--color-text-secondary)' }}>
-                                    {k.toLowerCase().includes('secret') || k.toLowerCase().includes('token') || k.toLowerCase().includes('key')
-                                      ? `${String(v).slice(0, 6)}••••`
-                                      : String(v)}
-                                  </span>
-                                </div>
-                              ))}
+                            {cfg &&
+                              Object.entries(cfg)
+                                .filter(([k]) => k !== 'type')
+                                .map(([k, v]) => (
+                                  <div key={k} className="mt-1 flex gap-2 text-xs">
+                                    <span
+                                      className="w-28 shrink-0"
+                                      style={{ color: 'var(--color-text-muted)' }}
+                                    >
+                                      {k}
+                                    </span>
+                                    <span
+                                      className="truncate font-mono"
+                                      style={{ color: 'var(--color-text-secondary)' }}
+                                    >
+                                      {k.toLowerCase().includes('secret') ||
+                                      k.toLowerCase().includes('token') ||
+                                      k.toLowerCase().includes('key')
+                                        ? `${String(v).slice(0, 6)}••••`
+                                        : String(v)}
+                                    </span>
+                                  </div>
+                                ))}
                           </div>
                         );
                       })}
                     </>
                   ) : (
-                    <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>加载中…</p>
+                    <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                      加载中…
+                    </p>
                   )}
 
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => setAddOpen(proj.name)}
-                  >
+                  <Button size="sm" variant="outline" onClick={() => setAddOpen(proj.name)}>
                     <Plus className="mr-1.5 size-3.5" />
                     添加渠道
                   </Button>
@@ -407,7 +457,11 @@ function AddPlatformDialog({
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (open) { setPlatformType('feishu'); setFields({}); setError(null); }
+    if (open) {
+      setPlatformType('feishu');
+      setFields({});
+      setError(null);
+    }
   }, [open]);
 
   const meta = PLATFORM_META[platformType];
@@ -449,7 +503,10 @@ function AddPlatformDialog({
             <Label>平台类型</Label>
             <Select
               value={platformType}
-              onValueChange={(v) => { setPlatformType(v as PlatformType); setFields({}); }}
+              onValueChange={(v) => {
+                setPlatformType(v as PlatformType);
+                setFields({});
+              }}
             >
               <SelectTrigger className="mt-1">
                 <SelectValue />
@@ -480,7 +537,9 @@ function AddPlatformDialog({
                   </SelectTrigger>
                   <SelectContent>
                     {f.options.map((o) => (
-                      <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                      <SelectItem key={o.value} value={o.value}>
+                        {o.label}
+                      </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
@@ -496,9 +555,7 @@ function AddPlatformDialog({
             </div>
           ))}
 
-          {error && (
-            <p className="text-sm text-red-400">{error}</p>
-          )}
+          {error && <p className="text-sm text-red-400">{error}</p>}
 
           <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
             添加后需要重启 cc-connect 才能生效。
@@ -506,7 +563,9 @@ function AddPlatformDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={onClose}>取消</Button>
+          <Button variant="outline" onClick={onClose}>
+            取消
+          </Button>
           <Button onClick={() => void handleSave()} disabled={saving}>
             {saving ? '添加中…' : '添加'}
           </Button>