refactor: update UI components to use base-ui library and improve accessibility

- Refactored Dialog component to use base-ui's dialog implementation, enhancing structure and accessibility features.
- Updated Input component to utilize base-ui's input, improving styling and consistency.
- Reworked Label component for better accessibility and styling.
- Refined Select component to leverage base-ui's select, enhancing usability and visual consistency.
- Modified Separator component to use base-ui's separator, improving styling.
- Enhanced Sonner component to include custom icons and improved theming.
- Refactored Table component for better structure and accessibility.
- Updated Tabs component to utilize base-ui's tabs, improving styling and functionality.
- Introduced Checkbox component using base-ui's checkbox, enhancing accessibility and styling.

src/app/config/page.tsx

@@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { configSchema } from './store/schema';
 
 export const ConfigPage = () => {
@@ -19,7 +20,7 @@ export const ConfigPage = () => {
     }
   };
 
-  const handleChange = (field: keyof typeof config, value: string) => {
+  const handleChange = (field: keyof typeof config, value: string | boolean) => {
     setConfig({ [field]: value });
   };
 
@@ -67,6 +68,17 @@ export const ConfigPage = () => {
               />
             </div>
 
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="enable-cors"
+                checked={config.ENABLE_CORS}
+                onCheckedChange={(checked) => handleChange('ENABLE_CORS', checked === true)}
+              />
+              <Label htmlFor="enable-cors" className="cursor-pointer">
+                启用跨域
+              </Label>
+            </div>
+
             <div className="space-y-2">
               <Label htmlFor="ai-base-url">AI 基础地址</Label>
               <Input

src/app/config/store/index.ts

@@ -23,6 +23,7 @@ const loadInitialConfig = (): Config => {
     CNB_API_KEY: '',
     CNB_COOKIE: '',
     CNB_CORS_URL: 'https://cors.kevisual.cn',
+    ENABLE_CORS: true,
     AI_BASE_URL: '',
     AI_MODEL: '',
     AI_API_KEY: ''
@@ -43,6 +44,7 @@ export const useConfigStore = create<ConfigState>()(
             CNB_API_KEY: '',
             CNB_COOKIE: '',
             CNB_CORS_URL: 'https://cors.kevisual.cn',
+            ENABLE_CORS: true,
             AI_BASE_URL: 'https://api.cnb.cool/kevisual/cnb-ai/-/ai/',
             AI_MODEL: 'CNB-Models',
             AI_API_KEY: ''

src/app/config/store/schema.ts

@@ -4,6 +4,7 @@ export const configSchema = z.object({
   CNB_API_KEY: z.string().min(1, 'API Key is required'),
   CNB_COOKIE: z.string().min(1, 'Cookie is required'),
   CNB_CORS_URL: z.url('Must be a valid URL'),
+  ENABLE_CORS: z.boolean(),
   AI_BASE_URL: z.url('Must be a valid URL'),
   AI_MODEL: z.string().min(1, 'AI Model is required'),
   AI_API_KEY: z.string().min(1, 'AI API Key is required'),
@@ -15,6 +16,7 @@ export const defaultConfig: Config = {
   CNB_API_KEY: '',
   CNB_COOKIE: '',
   CNB_CORS_URL: 'https://cors.kevisual.cn',
+  ENABLE_CORS: true,
   AI_BASE_URL: '',
   AI_MODEL: '',
   AI_API_KEY: ''