feat: add settings pages

web/src/views/settings/AboutSettings.vue

@@ -21,36 +21,36 @@ onMounted(loadAbout)
 <template>
   <div>
     <!-- 站点关于 -->
-    <div class="mb-8">
-      <h3 class="text-xl font-semibold mb-2">白虎面板</h3>
-      <p class="text-muted-foreground">一个轻量级的定时任务管理系统，支持脚本管理、定时执行和日志追踪。</p>
+    <div class="mb-6">
+      <h3 class="text-lg font-semibold mb-1">白虎面板</h3>
+      <p class="text-sm text-muted-foreground">一个轻量级的定时任务管理系统，支持脚本管理、定时执行和日志追踪。</p>
     </div>
 
-    <div class="grid md:grid-cols-2 gap-x-16 gap-y-8">
+    <div class="grid md:grid-cols-2 gap-x-8 gap-y-5">
       <!-- 左侧：技术栈和功能特性 -->
-      <div class="space-y-8">
+      <div class="space-y-5">
         <div>
-          <h4 class="text-sm font-medium mb-4">技术栈</h4>
-          <div class="flex flex-wrap gap-2">
-            <Badge v-for="tech in techStack" :key="tech" variant="secondary">{{ tech }}</Badge>
+          <h4 class="text-sm font-medium mb-2">技术栈</h4>
+          <div class="flex flex-wrap gap-1.5">
+            <Badge v-for="tech in techStack" :key="tech" class="text-xs bg-primary/15 text-primary border-0">{{ tech }}</Badge>
           </div>
         </div>
 
         <div>
-          <h4 class="text-sm font-medium mb-4">功能特性</h4>
-          <div class="flex flex-wrap gap-2">
-            <Badge v-for="feature in features" :key="feature" variant="outline">{{ feature }}</Badge>
+          <h4 class="text-sm font-medium mb-2">功能特性</h4>
+          <div class="flex flex-wrap gap-1.5">
+            <Badge v-for="feature in features" :key="feature" class="text-xs bg-accent text-accent-foreground">{{ feature }}</Badge>
           </div>
         </div>
       </div>
 
       <!-- 右侧：系统信息 -->
       <div>
-        <h4 class="text-sm font-medium mb-4">系统信息</h4>
-        <div class="space-y-3">
+        <h4 class="text-sm font-medium mb-2">系统信息</h4>
+        <div class="space-y-2">
           <div class="flex justify-between items-center">
             <span class="text-muted-foreground text-sm">系统版本:</span>
-            <Badge variant="outline" class="font-mono">{{ aboutInfo?.version || 'dev' }}</Badge>
+            <Badge variant="outline" class="font-mono text-xs">{{ aboutInfo?.version || 'dev' }}</Badge>
           </div>
           <div class="flex justify-between items-center">
             <span class="text-muted-foreground text-sm">构建时间:</span>
@@ -69,9 +69,9 @@ onMounted(loadAbout)
     </div>
 
     <!-- 底部：版权和链接 -->
-    <div class="mt-10 pt-6 border-t flex items-center justify-center gap-2 text-sm text-muted-foreground">
-      <span>© 2025 保留所有权利。</span>
-      <a href="https://github.com" target="_blank" class="inline-flex items-center gap-1 text-primary hover:underline">
+    <div class="mt-6 pt-4 border-t flex items-center justify-center gap-2 text-sm text-muted-foreground">
+      <span>© {{ new Date().getFullYear() }} 保留所有权利。</span>
+      <a href="https://github.com/engigu/BaiHu/" target="_blank" class="inline-flex items-center gap-1 text-primary hover:underline">
         <ExternalLink class="h-3.5 w-3.5" />
         GitHub 仓库
       </a>

web/src/views/settings/Settings.vue

@@ -50,10 +50,10 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="site" class="mt-6">
-        <Card class="max-w-lg">
+        <Card class="max-w-xl">
           <CardHeader>
             <CardTitle>站点设置</CardTitle>
-            <CardDescription>查看当前站点配置信息</CardDescription>
+            <CardDescription>配置站点标题、图标和系统参数</CardDescription>
           </CardHeader>
           <CardContent>
             <SiteSettings />
@@ -62,7 +62,7 @@ const activeTab = ref('password')
       </TabsContent>
 
       <TabsContent value="about" class="mt-6">
-        <Card class="max-w-3xl">
+        <Card class="max-w-xl">
           <CardContent class="pt-6">
             <AboutSettings />
           </CardContent>

web/src/views/settings/SiteSettings.vue

@@ -1,33 +1,89 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { api } from '@/api'
+import { Button } from '@/components/ui/button'
+import { api, type SiteSettings } from '@/api'
+import { toast } from 'vue-sonner'
+import { useSiteSettings } from '@/composables/useSiteSettings'
 
-const siteName = ref('')
-const sitePort = ref(0)
+const { refreshSettings } = useSiteSettings()
 
-async function loadSiteSettings() {
+const form = ref<SiteSettings>({
+  title: '',
+  subtitle: '',
+  icon: '',
+  page_size: '10',
+  cookie_days: '7'
+})
+const loading = ref(false)
+
+const iconPreview = computed(() => {
+  if (!form.value.icon) return ''
+  // 简单验证是否是 SVG
+  if (form.value.icon.trim().startsWith('<svg')) {
+    return form.value.icon
+  }
+  return ''
+})
+
+async function loadSettings() {
   try {
     const res = await api.settings.getSite()
-    siteName.value = res.site_name || '白虎面板'
-    sitePort.value = res.port
+    form.value = res
   } catch {}
 }
 
-onMounted(loadSiteSettings)
+async function saveSettings() {
+  loading.value = true
+  try {
+    await api.settings.updateSite(form.value)
+    await refreshSettings()
+    toast.success('保存成功')
+  } catch {
+    toast.error('保存失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadSettings)
 </script>
 
 <template>
   <div class="space-y-4">
-    <div class="space-y-2">
-      <Label>站点名称</Label>
-      <Input v-model="siteName" disabled class="max-w-sm" />
+    <div class="grid grid-cols-4 items-center gap-4">
+      <Label class="text-right">站点标题</Label>
+      <Input v-model="form.title" placeholder="白虎面板" class="col-span-3" />
     </div>
-    <div class="space-y-2">
-      <Label>端口</Label>
-      <Input v-model.number="sitePort" type="number" class="w-32" disabled />
+    <div class="grid grid-cols-4 items-center gap-4">
+      <Label class="text-right">站点标语</Label>
+      <Input v-model="form.subtitle" placeholder="轻量级定时任务管理系统" class="col-span-3" />
+    </div>
+    <div class="grid grid-cols-4 items-center gap-4">
+      <Label class="text-right">站点图标</Label>
+      <div class="col-span-3 flex items-center gap-2">
+        <Input v-model="form.icon" placeholder="<svg>...</svg>" class="flex-1 font-mono text-xs" />
+        <div v-if="iconPreview" class="p-1.5 border rounded bg-muted/50 w-8 h-8 flex items-center justify-center shrink-0 [&>svg]:w-5 [&>svg]:h-5" v-html="iconPreview" />
+      </div>
+    </div>
+    <div class="grid grid-cols-4 items-center gap-4">
+      <Label class="text-right">分页/Cookie</Label>
+      <div class="col-span-3 flex items-center gap-4">
+        <div class="flex items-center gap-2">
+          <Input v-model="form.page_size" type="number" class="w-20" />
+          <span class="text-sm text-muted-foreground">条/页</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <Input v-model="form.cookie_days" type="number" class="w-20" />
+          <span class="text-sm text-muted-foreground">天过期</span>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end pt-2">
+      <Button @click="saveSettings" :disabled="loading">
+        {{ loading ? '保存中...' : '保存设置' }}
+      </Button>
     </div>
-    <p class="text-sm text-muted-foreground">站点设置需要修改配置文件后重启服务</p>
   </div>
 </template>