feat: update user preferences and system settings management

2026-02-03 16:37:05 +08:00
parent 555bf38b71
commit 5a22351a66
21 changed files with 417 additions and 153 deletions
--- a/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
@@ -33,7 +33,6 @@ const formSchema = z.object({
  top_k: z.number().min(1).max(100).optional(),
  top_p: z.number().min(0).max(1).optional(),
  repetition_penalty: z.number().min(0).max(2).optional(),
-  backend: z.string().optional(),
 })

 type FormData = z.infer<typeof formSchema>
@@ -77,16 +76,9 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
      top_k: 20,
      top_p: 0.7,
      repetition_penalty: 1.05,
-      backend: preferences?.default_backend || 'local',
    },
  })

-  useEffect(() => {
-    if (preferences?.default_backend) {
-      setValue('backend', preferences.default_backend)
-    }
-  }, [preferences?.default_backend, setValue])
-
  useImperativeHandle(ref, () => ({
    loadParams: (params: any) => {
      setValue('text', params.text || '')
@@ -142,22 +134,6 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
-      <div className="space-y-0.5">
-        <Label>后端选择</Label>
-        <Select
-          value={watch('backend')}
-          onValueChange={(value: string) => setValue('backend', value)}
-        >
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="local">本地模型</SelectItem>
-            <SelectItem value="aliyun">阿里云 API</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
      <div className="space-y-0.5">
        <IconLabel icon={Globe2} tooltip="语言" required />
        <Select
--- a/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
@@ -38,7 +38,6 @@ const formSchema = z.object({
  top_k: z.number().min(1).max(100).optional(),
  top_p: z.number().min(0).max(1).optional(),
  repetition_penalty: z.number().min(0).max(2).optional(),
-  backend: z.string().optional(),
 })

 type FormData = z.infer<typeof formSchema>
@@ -78,16 +77,9 @@ function VoiceCloneForm() {
      top_k: 20,
      top_p: 0.7,
      repetition_penalty: 1.05,
-      backend: preferences?.default_backend || 'local',
    } as Partial<FormData>,
  })

-  useEffect(() => {
-    if (preferences?.default_backend) {
-      setValue('backend', preferences.default_backend)
-    }
-  }, [preferences?.default_backend, setValue])
-
  useEffect(() => {
    const fetchData = async () => {
      try {
@@ -243,22 +235,6 @@ function VoiceCloneForm() {

      <div className={step === 2 ? 'block space-y-4' : 'hidden'}>
        {/* Step 2: Synthesis Options */}
-        <div className="space-y-0.5">
-          <Label>后端选择</Label>
-          <Select
-            value={watch('backend')}
-            onValueChange={(value: string) => setValue('backend', value)}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="local">本地模型</SelectItem>
-              <SelectItem value="aliyun">阿里云 API</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
        <div className="space-y-0.5">
          <IconLabel icon={Globe2} tooltip="语言（可选）" />
          <Select
--- a/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
@@ -32,7 +32,6 @@ const formSchema = z.object({
  top_k: z.number().min(1).max(100).optional(),
  top_p: z.number().min(0).max(1).optional(),
  repetition_penalty: z.number().min(0).max(2).optional(),
-  backend: z.string().optional(),
 })

 type FormData = z.infer<typeof formSchema>
@@ -74,16 +73,9 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
      top_k: 20,
      top_p: 0.7,
      repetition_penalty: 1.05,
-      backend: preferences?.default_backend || 'local',
    },
  })

-  useEffect(() => {
-    if (preferences?.default_backend) {
-      setValue('backend', preferences.default_backend)
-    }
-  }, [preferences?.default_backend, setValue])
-
  useImperativeHandle(ref, () => ({
    loadParams: (params: any) => {
      setValue('text', params.text || '')
@@ -94,7 +86,6 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
      setValue('top_k', params.top_k || 20)
      setValue('top_p', params.top_p || 0.7)
      setValue('repetition_penalty', params.repetition_penalty || 1.05)
-      setValue('backend', params.backend || 'local')
    }
  }))

@@ -133,22 +124,6 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
-      <div className="space-y-0.5">
-        <Label>后端选择</Label>
-        <Select
-          value={watch('backend')}
-          onValueChange={(value: string) => setValue('backend', value)}
-        >
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="local">本地模型</SelectItem>
-            <SelectItem value="aliyun">阿里云 API</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
      <div className="space-y-0.5">
        <IconLabel icon={Globe2} tooltip="语言" required />
        <Select
--- a/qwen3-tts-frontend/src/components/ui/switch.tsx
+++ b/qwen3-tts-frontend/src/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
--- a/qwen3-tts-frontend/src/contexts/UserPreferencesContext.tsx
+++ b/qwen3-tts-frontend/src/contexts/UserPreferencesContext.tsx
@@ -9,6 +9,7 @@ interface UserPreferencesContextType {
  updatePreferences: (prefs: Partial<UserPreferences>) => Promise<void>
  hasAliyunKey: boolean
  refetchPreferences: () => Promise<void>
+  isBackendAvailable: (backend: string) => boolean
 }

 const UserPreferencesContext = createContext<UserPreferencesContextType | undefined>(undefined)
@@ -43,7 +44,7 @@ export function UserPreferencesProvider({ children }: { children: ReactNode }) {
      if (cached) {
        setPreferences(JSON.parse(cached))
      } else {
-        setPreferences({ default_backend: 'local', onboarding_completed: false })
+        setPreferences({ default_backend: 'aliyun', onboarding_completed: false })
      }
    } finally {
      setIsLoading(false)
@@ -72,6 +73,13 @@ export function UserPreferencesProvider({ children }: { children: ReactNode }) {
    }
  }

+  const isBackendAvailable = (backend: string) => {
+    if (!preferences?.available_backends) {
+      return backend === 'aliyun'
+    }
+    return preferences.available_backends.includes(backend)
+  }
+
  return (
    <UserPreferencesContext.Provider
      value={{
@@ -80,6 +88,7 @@ export function UserPreferencesProvider({ children }: { children: ReactNode }) {
        updatePreferences,
        hasAliyunKey,
        refetchPreferences: fetchPreferences,
+        isBackendAvailable,
      }}
    >
      {children}
--- a/qwen3-tts-frontend/src/lib/api.ts
+++ b/qwen3-tts-frontend/src/lib/api.ts
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import type { LoginRequest, LoginResponse, User, PasswordChangeRequest, UserPreferences } from '@/types/auth'
+import type { LoginRequest, LoginResponse, User, PasswordChangeRequest, UserPreferences, SystemSettings } from '@/types/auth'
 import type { Job, JobCreateResponse, JobListResponse, JobType } from '@/types/job'
 import type { Language, Speaker, CustomVoiceForm, VoiceDesignForm, VoiceCloneForm } from '@/types/tts'
 import type { UserCreateRequest, UserUpdateRequest, UserListResponse } from '@/types/user'
@@ -209,6 +209,15 @@ export const authApi = {
    )
    return response.data
  },
+
+  getSystemSettings: async (): Promise<SystemSettings> => {
+    const response = await apiClient.get<SystemSettings>('/users/system/settings')
+    return response.data
+  },
+
+  updateSystemSettings: async (settings: { local_model_enabled: boolean }): Promise<void> => {
+    await apiClient.put('/users/system/settings', settings)
+  },
 }

 export const ttsApi = {
--- a/qwen3-tts-frontend/src/pages/Settings.tsx
+++ b/qwen3-tts-frontend/src/pages/Settings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Switch } from '@/components/ui/switch'
 import {
  Form,
  FormControl,
@@ -32,11 +33,12 @@ type ApiKeyFormValues = z.infer<typeof apiKeySchema>

 export default function Settings() {
  const { user } = useAuth()
-  const { preferences, hasAliyunKey, updatePreferences, refetchPreferences } = useUserPreferences()
+  const { preferences, hasAliyunKey, updatePreferences, refetchPreferences, isBackendAvailable } = useUserPreferences()
  const [showApiKey, setShowApiKey] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [showPasswordDialog, setShowPasswordDialog] = useState(false)
  const [isPasswordLoading, setIsPasswordLoading] = useState(false)
+  const [localModelEnabled, setLocalModelEnabled] = useState(false)

  const form = useForm<ApiKeyFormValues>({
    resolver: zodResolver(apiKeySchema),
@@ -45,6 +47,34 @@ export default function Settings() {
    },
  })

+  useEffect(() => {
+    if (user?.is_superuser) {
+      fetchSystemSettings()
+    }
+  }, [user])
+
+  const fetchSystemSettings = async () => {
+    try {
+      const settings = await authApi.getSystemSettings()
+      setLocalModelEnabled(settings.local_model_enabled)
+    } catch (error) {
+      console.error('Failed to fetch system settings:', error)
+    }
+  }
+
+  const handleToggleLocalModel = async (enabled: boolean) => {
+    try {
+      await authApi.updateSystemSettings({ local_model_enabled: enabled })
+      setLocalModelEnabled(enabled)
+      toast.success(`本地模型已${enabled ? '启用' : '禁用'}`)
+
+      await refetchPreferences()
+    } catch (error) {
+      toast.error('更新失败，请重试')
+      console.error('Failed to update system settings:', error)
+    }
+  }
+
  const handleBackendChange = async (value: string) => {
    try {
      await updatePreferences({ default_backend: value as 'local' | 'aliyun' })
@@ -141,11 +171,20 @@ export default function Settings() {
                value={preferences.default_backend}
                onValueChange={handleBackendChange}
              >
-                <div className="flex items-center space-x-3 border rounded-lg p-4 hover:bg-accent/50 cursor-pointer">
-                  <RadioGroupItem value="local" id="backend-local" />
+                <div className={`flex items-center space-x-3 border rounded-lg p-4 ${
+                  !isBackendAvailable('local') ? 'opacity-50' : 'hover:bg-accent/50 cursor-pointer'
+                }`}>
+                  <RadioGroupItem
+                    value="local"
+                    id="backend-local"
+                    disabled={!isBackendAvailable('local')}
+                  />
                  <Label htmlFor="backend-local" className="flex-1 cursor-pointer">
                    <div className="font-medium">本地模型</div>
-                    <div className="text-sm text-muted-foreground">免费使用本地 Qwen3-TTS 模型</div>
+                    <div className="text-sm text-muted-foreground">
+                      免费使用本地 Qwen3-TTS 模型
+                      {!isBackendAvailable('local') && ' (管理员未启用)'}
+                    </div>
                  </Label>
                </div>
                <div className="flex items-center space-x-3 border rounded-lg p-4 hover:bg-accent/50 cursor-pointer">
@@ -249,6 +288,32 @@ export default function Settings() {
            </CardContent>
          </Card>

+          {user.is_superuser && (
+            <Card>
+              <CardHeader>
+                <CardTitle>系统设置</CardTitle>
+                <CardDescription>管理全局系统设置（仅管理员可见）</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="local-model-toggle">启用本地模型</Label>
+                      <p className="text-sm text-muted-foreground">
+                        允许普通用户在设置中选择并使用本地 Qwen3-TTS 模型
+                      </p>
+                    </div>
+                    <Switch
+                      id="local-model-toggle"
+                      checked={localModelEnabled}
+                      onCheckedChange={handleToggleLocalModel}
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
          <Card>
            <CardHeader>
              <CardTitle>账户信息</CardTitle>
--- a/qwen3-tts-frontend/src/types/auth.ts
+++ b/qwen3-tts-frontend/src/types/auth.ts
@@ -33,4 +33,9 @@ export interface PasswordChangeRequest {
 export interface UserPreferences {
  default_backend: 'local' | 'aliyun'
  onboarding_completed: boolean
+  available_backends?: string[]
+}
+
+export interface SystemSettings {
+  local_model_enabled: boolean
 }