@nextclaw/ui 0.15.10 → 0.15.12

package/src/features/settings/pages/__tests__/secrets-config-page.test.tsx

@@ -13,30 +13,30 @@ const mocks = vi.hoisted(() => ({
         enabled: true,
         defaults: {
           env: 'vault-env',
-          file: 'vault-file',
+          file: 'vault-file'
         },
         providers: {
           'vault-env': { source: 'env', prefix: 'NEXTCLAW_' },
-          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' },
+          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' }
         },
         refs: {
           'agents.defaults.model': {
             source: 'env',
             provider: 'vault-env',
-            id: 'DEFAULT_MODEL',
-          },
-        },
-      },
-    },
-  },
+            id: 'DEFAULT_MODEL'
+          }
+        }
+      }
+    }
+  }
 }));
 
 vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.useConfigData,
   useUpdateSecrets: () => ({
     mutate: mocks.mutate,
-    isPending: false,
-  }),
+    isPending: false
+  })
 }));
 
 describe('SecretsConfigPage', () => {
@@ -59,7 +59,8 @@ describe('SecretsConfigPage', () => {
 
     render(<SecretsConfigPage />);
 
-    expect(screen.getByText('Secret Providers')).toBeTruthy();
+    expect(screen.getByText('密钥提供器')).toBeTruthy();
+    expect(screen.getByText('密钥引用')).toBeTruthy();
     expect(screen.getByDisplayValue('vault-env')).toBeTruthy();
     expect(screen.getByDisplayValue('NEXTCLAW_')).toBeTruthy();
 
@@ -71,20 +72,20 @@ describe('SecretsConfigPage', () => {
         defaults: {
           env: 'vault-env',
           file: 'vault-file',
-          exec: null,
+          exec: null
         },
         providers: {
           'vault-env': { source: 'env', prefix: 'NEXTCLAW_' },
-          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' },
+          'vault-file': { source: 'file', path: '/tmp/secrets.json', format: 'json' }
         },
         refs: {
           'agents.defaults.model': {
             source: 'env',
             provider: 'vault-env',
-            id: 'DEFAULT_MODEL',
-          },
-        },
-      },
+            id: 'DEFAULT_MODEL'
+          }
+        }
+      }
     });
   });
 });

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -1,18 +1,16 @@
-import type { ChatMessageLayout } from "@nextclaw/agent-chat-ui";
-import { Check, Palette } from "lucide-react";
-import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
-import { useChatMessageLayoutStore } from "@/features/chat";
-import { SettingRow } from "@/shared/components/settings/setting-row";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/shared/components/ui/card";
-import { Switch } from "@/shared/components/ui/switch";
-import { useSideDockStore } from "@/features/side-dock";
-import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
+import type { ChatMessageLayout } from '@nextclaw/agent-chat-ui';
+import { Check } from 'lucide-react';
+import { useTheme } from '@/app/components/theme-provider';
+import { useChatMessageLayoutStore } from '@/features/chat';
+import { useLanguagePreference } from '@/features/settings/hooks/use-language-preference';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Switch } from '@/shared/components/ui/switch';
+import { useSideDockStore } from '@/features/side-dock';
+import { t } from '@/shared/lib/i18n';
+import { THEME_OPTIONS, type UiTheme } from '@/shared/lib/theme';
+import { cn } from '@/shared/lib/utils';
 
 const CHAT_MESSAGE_LAYOUT_OPTIONS: Array<{
   value: ChatMessageLayout;
@@ -20,78 +18,103 @@ const CHAT_MESSAGE_LAYOUT_OPTIONS: Array<{
   descriptionKey: string;
 }> = [
   {
-    value: "card",
-    labelKey: "chatMessageLayoutCard",
-    descriptionKey: "chatMessageLayoutCardDescription",
+    value: 'card',
+    labelKey: 'chatMessageLayoutCard',
+    descriptionKey: 'chatMessageLayoutCardDescription'
   },
   {
-    value: "flat",
-    labelKey: "chatMessageLayoutFlat",
-    descriptionKey: "chatMessageLayoutFlatDescription",
-  },
+    value: 'flat',
+    labelKey: 'chatMessageLayoutFlat',
+    descriptionKey: 'chatMessageLayoutFlatDescription'
+  }
 ];
 
 export function AppearanceSettingsPage() {
+  const { theme, setTheme } = useTheme();
+  const { currentLanguage, languageOptions, selectLanguage } = useLanguagePreference();
   const messageLayout = useChatMessageLayoutStore((state) => state.layout);
-  const setMessageLayout = useChatMessageLayoutStore(
-    (state) => state.setLayout,
-  );
+  const setMessageLayout = useChatMessageLayoutStore((state) => state.setLayout);
   const isSideDockVisible = useSideDockStore((state) => state.isVisible);
   const setSideDockVisible = useSideDockStore((state) => state.setVisible);
 
   return (
-    <PageLayout>
-      <PageHeader title={t("appearance")} />
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Palette className="h-4 w-4" />
-            {t("appearance")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
+    <SettingsPage title={t('appearance')}>
+      <SettingsSection>
+        <SettingsGroup>
+          <SettingRow
+            title={t('theme')}
+            control={
+              <Select value={theme} onValueChange={(value) => setTheme(value as UiTheme)}>
+                <SelectTrigger aria-label={t('theme')} className='w-36 sm:w-44'>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {THEME_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {t(option.labelKey)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            }
+          />
           <SettingRow
-            title={t("chatMessageLayoutTitle")}
-            description={t("chatMessageLayoutDescription")}
+            title={t('language')}
+            control={
+              <Select
+                value={currentLanguage}
+                onValueChange={(value) => selectLanguage(value as typeof currentLanguage)}
+              >
+                <SelectTrigger aria-label={t('language')} className='w-36 sm:w-44'>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {languageOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            }
+          />
+          <SettingRow
+            title={t('chatMessageLayoutTitle')}
+            description={t('chatMessageLayoutDescription')}
+            layout='stacked'
           >
             <div
-              role="radiogroup"
-              aria-label={t("chatMessageLayoutTitle")}
-              className="grid gap-2 sm:grid-cols-2"
+              role='radiogroup'
+              aria-label={t('chatMessageLayoutTitle')}
+              className='grid gap-1 rounded-xl bg-background/65 p-1 sm:grid-cols-2'
             >
               {CHAT_MESSAGE_LAYOUT_OPTIONS.map((option) => {
                 const selected = option.value === messageLayout;
                 return (
                   <button
                     key={option.value}
-                    type="button"
-                    role="radio"
+                    type='button'
+                    role='radio'
                     aria-checked={selected}
                     onClick={() => setMessageLayout(option.value)}
                     className={cn(
-                      "flex min-w-0 items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+                      'flex min-w-0 items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                       selected
-                        ? "border-primary/35 bg-primary/5 text-foreground"
-                        : "border-border bg-card text-muted-foreground hover:border-border/80 hover:bg-muted/45 hover:text-foreground",
+                        ? 'bg-card text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:bg-card/60 hover:text-foreground'
                     )}
                   >
                     <span
                       className={cn(
-                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
-                        selected
-                          ? "border-primary bg-primary text-primary-foreground"
-                          : "border-border bg-background",
+                        'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ring-1',
+                        selected ? 'bg-primary text-primary-foreground ring-primary' : 'bg-background ring-border'
                       )}
                     >
-                      {selected ? (
-                        <Check className="h-2.5 w-2.5" strokeWidth={3} />
-                      ) : null}
+                      {selected ? <Check className='h-2.5 w-2.5' strokeWidth={3} /> : null}
                     </span>
-                    <span className="min-w-0">
-                      <span className="block text-sm font-medium">
-                        {t(option.labelKey)}
-                      </span>
-                      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                    <span className='min-w-0'>
+                      <span className='block text-sm font-medium'>{t(option.labelKey)}</span>
+                      <span className='mt-1 block text-xs leading-5 text-muted-foreground'>
                         {t(option.descriptionKey)}
                       </span>
                     </span>
@@ -101,19 +124,19 @@ export function AppearanceSettingsPage() {
             </div>
           </SettingRow>
           <SettingRow
-            title={t("sideDockVisibilityTitle")}
-            description={t("sideDockVisibilityDescription")}
+            title={t('sideDockVisibilityTitle')}
+            description={t('sideDockVisibilityDescription')}
             control={
               <Switch
-                id="appearance-side-dock-visible"
-                aria-label={t("sideDockVisibilityTitle")}
+                id='appearance-side-dock-visible'
+                aria-label={t('sideDockVisibilityTitle')}
                 checked={isSideDockVisible}
                 onCheckedChange={setSideDockVisible}
               />
             }
           />
-        </CardContent>
-      </Card>
-    </PageLayout>
+        </SettingsGroup>
+      </SettingsSection>
+    </SettingsPage>
   );
 }

package/src/features/settings/pages/model-config-page.tsx

@@ -1,17 +1,24 @@
 import { Button } from '@/shared/components/ui/button';
-import { Card } from '@/shared/components/ui/card';
+import { NavigationLink } from '@/shared/components/actions/navigation-link';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Skeleton } from '@/shared/components/ui/skeleton';
 import { FormActions } from '@/shared/components/ui/actions/form-actions';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
-import { useConfig, useConfigSchema, useProviderTemplates, useProviders, useUpdateModel } from '@/shared/hooks/use-config';
+import {
+  useConfig,
+  useConfigSchema,
+  useProviderTemplates,
+  useProviders,
+  useUpdateModel
+} from '@/shared/hooks/use-config';
 import { hintForPath } from '@/shared/lib/config-hints';
 import { t } from '@/shared/lib/i18n';
 import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
-import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
 import { getDocsUrl } from '@/shared/components/doc-browser/doc-browser-context';
-import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
+import { BookOpen, Loader2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
@@ -21,14 +28,21 @@ function ModelConfigForm(props: {
   initialWorkspace: string;
   isPending: boolean;
   modelHelpText: string;
-  modelLabel: string;
   modelPlaceholder: string;
   onSubmit: (payload: { model: string; workspace: string }) => void;
   providerCatalog: ReturnType<typeof buildProviderModelCatalog>;
-  workspaceLabel: string;
   workspacePlaceholder: string;
 }) {
-  const { initialModel, initialWorkspace, isPending, modelHelpText, modelLabel, modelPlaceholder, onSubmit, providerCatalog, workspaceLabel, workspacePlaceholder } = props;
+  const {
+    initialModel,
+    initialWorkspace,
+    isPending,
+    modelHelpText,
+    modelPlaceholder,
+    onSubmit,
+    providerCatalog,
+    workspacePlaceholder
+  } = props;
   const [model, setModel] = useState(initialModel);
   const [workspace, setWorkspace] = useState(initialWorkspace);
 
@@ -38,46 +52,42 @@ function ModelConfigForm(props: {
         event.preventDefault();
         onSubmit({ model, workspace });
       }}
-      className="space-y-5"
+      className='space-y-5'
     >
-      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
-        <div className="rounded-2xl border border-border/75 bg-card p-6">
-          <div className="mb-6 flex items-center gap-3">
-            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-              <Sparkles className="h-4 w-4" />
+      <SettingsSection>
+        <SettingsGroup>
+          <SettingRow title={t('defaultModel')} description={modelHelpText} layout='stacked'>
+            <div className='space-y-2'>
+              <Label htmlFor='model' className='sr-only'>{t('defaultModel')}</Label>
+              <ProviderScopedModelInput
+                id='model'
+                value={model}
+                onChange={setModel}
+                providerCatalog={providerCatalog}
+                modelPlaceholder={modelPlaceholder}
+              />
+              <NavigationLink href={getDocsUrl('/guide/model-selection')} external icon={BookOpen} size='xs'>
+                {t('channelsGuideTitle')}
+              </NavigationLink>
             </div>
-            <h3 className="text-base font-semibold text-foreground">{t('defaultModel')}</h3>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="model" className="text-xs font-medium text-muted-foreground">
-              {modelLabel}
-            </Label>
-            <ProviderScopedModelInput id="model" value={model} onChange={setModel} providerCatalog={providerCatalog} modelPlaceholder={modelPlaceholder} />
-            <p className="text-xs text-muted-foreground/80">{modelHelpText}</p>
-            <a href={getDocsUrl('/guide/model-selection')} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
-              <BookOpen className="h-3.5 w-3.5" />
-              {t('channelsGuideTitle')}
-            </a>
-          </div>
-        </div>
-        <div className="rounded-2xl border border-border/75 bg-card p-6">
-          <div className="mb-6 flex items-center gap-3">
-            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-              <Folder className="h-4 w-4" />
+          </SettingRow>
+          <SettingRow title={t('workspace')} layout='stacked'>
+            <div className='space-y-2'>
+              <Label htmlFor='workspace' className='sr-only'>{t('workspace')}</Label>
+              <Input
+                id='workspace'
+                value={workspace}
+                onChange={(event) => setWorkspace(event.target.value)}
+                placeholder={workspacePlaceholder}
+                className='rounded-xl'
+              />
             </div>
-            <h3 className="text-base font-semibold text-foreground">{t('workspace')}</h3>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="workspace" className="text-xs font-medium text-muted-foreground">
-              {workspaceLabel}
-            </Label>
-            <Input id="workspace" value={workspace} onChange={(event) => setWorkspace(event.target.value)} placeholder={workspacePlaceholder} className="rounded-xl" />
-          </div>
-        </div>
-      </div>
+          </SettingRow>
+        </SettingsGroup>
+      </SettingsSection>
       <FormActions>
-        <Button type="submit" disabled={isPending} size="sm">
-          {isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t('saveChanges')}
+        <Button type='submit' disabled={isPending} size='sm'>
+          {isPending ? <Loader2 className='h-3.5 w-3.5 animate-spin' /> : t('saveChanges')}
         </Button>
       </FormActions>
     </form>
@@ -95,7 +105,13 @@ export function ModelConfigPage() {
   const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
 
   const providerCatalog = useMemo(
-    () => buildProviderModelCatalog({ providersView, templatesView, config, onlyConfigured: true }),
+    () =>
+      buildProviderModelCatalog({
+        providersView,
+        templatesView,
+        config,
+        onlyConfigured: true
+      }),
     [config, providersView, templatesView]
   );
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
@@ -104,50 +120,39 @@ export function ModelConfigPage() {
 
   if (isLoading) {
     return (
-      <div className="max-w-2xl space-y-6">
-        <div className="space-y-2">
-          <Skeleton className="h-8 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </div>
-        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
-          <div className="mb-6 flex items-center gap-3">
-            <Skeleton className="h-9 w-9 rounded-lg" />
-            <div className="space-y-2">
-              <Skeleton className="h-5 w-24" />
-              <Skeleton className="h-3 w-32" />
-            </div>
+      <SettingsPage title={t('modelPageTitle')} description={t('modelPageDescription')}>
+        <div className='divide-y divide-border/55 overflow-hidden rounded-2xl bg-muted/45'>
+          <div className='space-y-3 p-4'>
+            <Skeleton className='h-5 w-24' />
+            <Skeleton className='h-10 w-full rounded-xl' />
           </div>
-          <Skeleton className="mb-2 h-4 w-20" />
-          <Skeleton className="h-10 w-full rounded-xl" />
-        </Card>
-        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
-          <Skeleton className="mb-2 h-5 w-24" />
-          <Skeleton className="h-10 w-full rounded-xl" />
-        </Card>
-      </div>
+          <div className='space-y-3 p-4'>
+            <Skeleton className='h-5 w-24' />
+            <Skeleton className='h-10 w-full rounded-xl' />
+          </div>
+        </div>
+      </SettingsPage>
     );
   }
 
   return (
-    <PageLayout>
-      <PageHeader title={t('modelPageTitle')} description={t('modelPageDescription')} />
+    <SettingsPage title={t('modelPageTitle')} description={t('modelPageDescription')}>
       <ModelConfigForm
         key={`${initialModel}::${initialWorkspace}`}
         initialModel={initialModel}
         initialWorkspace={initialWorkspace}
         isPending={updateModel.isPending}
         modelHelpText={modelHelpText}
-        modelLabel={modelHint?.label ?? 'Model Name'}
         modelPlaceholder={modelHint?.placeholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER}
         onSubmit={({ model, workspace }) =>
           updateModel.mutate({
             model,
             workspace
-          })}
+          })
+        }
         providerCatalog={providerCatalog}
-        workspaceLabel={workspaceHint?.label ?? 'Default Path'}
         workspacePlaceholder={workspaceHint?.placeholder ?? '/path/to/workspace'}
       />
-    </PageLayout>
+    </SettingsPage>
   );
 }