feat: 前端搭建-未完成

2025-06-29 21:59:32 +08:00
parent ab95af0bbe
commit 731315144e
62 changed files with 4831 additions and 604 deletions
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.10.0",
+    "echarts": "^5.6.0",
+    "element-plus": "^2.10.2",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.7",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.0",
+    "vue-tsc": "^2.2.10"
+  }
+}
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <MainLayout />
+</template>
+
+<script setup lang="ts">
+import MainLayout from './layouts/MainLayout.vue';
+</script>
--- a/web/src/api/dashboard.ts
+++ b/web/src/api/dashboard.ts
@@ -0,0 +1,6 @@
+import request from './index';
+import type { DashboardStats } from '@/types/models';
+
+export const getDashboardStats = (): Promise<DashboardStats> => {
+  return request.get('/api/dashboard/stats');
+};
--- a/web/src/api/groups.ts
+++ b/web/src/api/groups.ts
@@ -0,0 +1,42 @@
+import apiClient from './index';
+import type { Group } from '../types/models';
+
+/**
+ * 获取所有分组列表
+ */
+export const fetchGroups = (): Promise<Group[]> => {
+    return apiClient.get('/groups').then(res => res.data.data);
+};
+
+/**
+ * 获取单个分组的详细信息
+ * @param id 分组ID
+ */
+export const fetchGroup = (id: string): Promise<Group> => {
+    return apiClient.get(`/groups/${id}`).then(res => res.data.data);
+};
+
+/**
+ * 创建一个新的分组
+ * @param groupData 新分组的数据
+ */
+export const createGroup = (groupData: Omit<Group, 'id' | 'created_at' | 'updated_at'>): Promise<Group> => {
+    return apiClient.post('/groups', groupData).then(res => res.data.data);
+};
+
+/**
+ * 更新一个已存在的分组
+ * @param id 分组ID
+ * @param groupData 要更新的数据
+ */
+export const updateGroup = (id: string, groupData: Partial<Omit<Group, 'id' | 'created_at' | 'updated_at'>>): Promise<Group> => {
+    return apiClient.put(`/groups/${id}`, groupData).then(res => res.data.data);
+};
+
+/**
+ * 删除一个分组
+ * @param id 分组ID
+ */
+export const deleteGroup = (id: string): Promise<void> => {
+    return apiClient.delete(`/groups/${id}`).then(res => res.data);
+};
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+  baseURL: "/",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// 可以添加请求和响应拦截器
+// apiClient.interceptors.request.use(...)
+// apiClient.interceptors.response.use(...)
+
+export default apiClient;
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -0,0 +1,36 @@
+import apiClient from './index';
+import type { Key } from '../types/models';
+
+/**
+ * 获取指定分组下的所有密钥列表
+ * @param groupId 分组ID
+ */
+export const fetchKeysInGroup = (groupId: string): Promise<Key[]> => {
+    return apiClient.get(`/groups/${groupId}/keys`).then(res => res.data.data);
+};
+
+/**
+ * 在指定分组下创建一个新的密钥
+ * @param groupId 分组ID
+ * @param keyData 新密钥的数据
+ */
+export const createKey = (groupId: string, keyData: Omit<Key, 'id' | 'group_id' | 'usage' | 'created_at' | 'updated_at'>): Promise<Key> => {
+    return apiClient.post(`/groups/${groupId}/keys`, keyData).then(res => res.data.data);
+};
+
+/**
+ * 更新一个已存在的密钥
+ * @param id 密钥ID
+ * @param keyData 要更新的数据
+ */
+export const updateKey = (id: string, keyData: Partial<Omit<Key, 'id' | 'group_id' | 'usage' | 'created_at' | 'updated_at'>>): Promise<Key> => {
+    return apiClient.put(`/keys/${id}`, keyData).then(res => res.data.data);
+};
+
+/**
+ * 删除一个密钥
+ * @param id 密钥ID
+ */
+export const deleteKey = (id: string): Promise<void> => {
+    return apiClient.delete(`/keys/${id}`).then(res => res.data);
+};
--- a/web/src/api/logs.ts
+++ b/web/src/api/logs.ts
@@ -0,0 +1,24 @@
+import request from './index';
+import type { RequestLog } from '@/types/models';
+
+export type { RequestLog };
+
+export interface LogQuery {
+  page?: number;
+  size?: number;
+  group_id?: number;
+  start_time?: string;
+  end_time?: string;
+  status_code?: number;
+}
+
+export interface PaginatedLogs {
+  total: number;
+  page: number;
+  size: number;
+  data: RequestLog[];
+}
+
+export const getLogs = (query: LogQuery): Promise<PaginatedLogs> => {
+  return request.get('/api/logs', { params: query });
+};
--- a/web/src/api/settings.ts
+++ b/web/src/api/settings.ts
@@ -0,0 +1,10 @@
+import request from './index';
+import type { Setting } from '@/types/models';
+
+export function getSettings() {
+  return request.get<Setting[]>('/api/settings');
+}
+
+export function updateSettings(settings: Setting[]) {
+  return request.put('/api/settings', settings);
+}
--- a/web/src/assets/vue.svg
+++ b/web/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/web/src/components/GroupConfigForm.vue
+++ b/web/src/components/GroupConfigForm.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="group-config-form">
+    <el-card v-if="groupStore.selectedGroupDetails" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>分组配置</span>
+          <el-button type="primary" @click="handleSave" :loading="isSaving">保存</el-button>
+        </div>
+      </template>
+      <el-form :model="formData" label-width="120px" ref="formRef">
+        <el-form-item label="分组名称" prop="name" :rules="[{ required: true, message: '请输入分组名称' }]">
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="formData.description" type="textarea"></el-input>
+        </el-form-item>
+        <el-form-item label="设为默认" prop="is_default">
+          <el-switch v-model="formData.is_default"></el-switch>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-empty v-else description="请先从左侧选择一个分组"></el-empty>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue';
+import { useGroupStore } from '@/stores/groupStore';
+import { updateGroup } from '@/api/groups';
+import { ElCard, ElForm, ElFormItem, ElInput, ElButton, ElSwitch, ElMessage, ElEmpty } from 'element-plus';
+import type { FormInstance } from 'element-plus';
+
+const groupStore = useGroupStore();
+const formRef = ref<FormInstance>();
+const isSaving = ref(false);
+
+const formData = reactive({
+  name: '',
+  description: '',
+  is_default: false,
+});
+
+watch(() => groupStore.selectedGroupDetails, (newGroup) => {
+  if (newGroup) {
+    formData.name = newGroup.name;
+    formData.description = newGroup.description;
+    formData.is_default = newGroup.is_default;
+  }
+}, { immediate: true, deep: true });
+
+const handleSave = async () => {
+  if (!formRef.value || !groupStore.selectedGroupId) return;
+
+  try {
+    await formRef.value.validate();
+    isSaving.value = true;
+    await updateGroup(groupStore.selectedGroupId, {
+        name: formData.name,
+        description: formData.description,
+        is_default: formData.is_default,
+    });
+    ElMessage.success('保存成功');
+    // 刷新列表以获取最新数据
+    await groupStore.fetchGroups();
+  } catch (error) {
+    console.error('Failed to save group config:', error);
+    ElMessage.error('保存失败，请查看控制台');
+  } finally {
+    isSaving.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
--- a/web/src/components/GroupList.vue
+++ b/web/src/components/GroupList.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="group-list" v-loading="groupStore.isLoading">
+    <el-menu
+      :default-active="groupStore.selectedGroupId || undefined"
+      @select="handleSelect"
+    >
+      <el-menu-item
+        v-for="group in groupStore.groups"
+        :key="group.id"
+        :index="group.id"
+      >
+        <template #title>
+          <span>{{ group.name }}</span>
+          <el-tag v-if="group.is_default" size="small" style="margin-left: 8px"
+            >默认</el-tag
+          >
+        </template>
+      </el-menu-item>
+    </el-menu>
+    <div
+      v-if="!groupStore.isLoading && groupStore.groups.length === 0"
+      class="empty-state"
+    >
+      暂无分组
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useGroupStore } from "@/stores/groupStore";
+import { ElMenu, ElMenuItem, ElTag, vLoading } from "element-plus";
+
+const groupStore = useGroupStore();
+
+onMounted(() => {
+  // 组件挂载时获取分组数据
+  if (groupStore.groups.length === 0) {
+    groupStore.fetchGroups();
+  }
+});
+
+const handleSelect = (index: string) => {
+  groupStore.selectGroup(index);
+};
+</script>
+
+<style scoped>
+.group-list {
+  border-right: 1px solid var(--el-border-color);
+  height: 100%;
+}
+.el-menu {
+  border-right: none;
+}
+.empty-state {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding-top: 20px;
+}
+</style>
--- a/web/src/components/KeyTable.vue
+++ b/web/src/components/KeyTable.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="key-table">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>密钥管理</span>
+          <el-button type="primary" @click="handleAddKey" :disabled="!groupStore.selectedGroupId">添加密钥</el-button>
+        </div>
+      </template>
+
+      <el-table :data="keyStore.keys" v-loading="keyStore.isLoading" style="width: 100%">
+        <el-table-column prop="api_key" label="API Key (部分)" min-width="180">
+            <template #default="scope">
+                {{ scope.row.api_key.substring(0, 3) }}...{{ scope.row.api_key.slice(-4) }}
+            </template>
+        </el-table-column>
+        <el-table-column prop="platform" label="平台" width="100" />
+        <el-table-column prop="model_types" label="可用模型" min-width="150">
+            <template #default="scope">
+                <el-tag v-for="model in scope.row.model_types" :key="model" style="margin-right: 5px;">{{ model }}</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column prop="rate_limit" label="速率限制" width="120">
+            <template #default="scope">
+                {{ scope.row.rate_limit }} / {{ scope.row.rate_limit_unit }}
+            </template>
+        </el-table-column>
+        <el-table-column prop="is_active" label="状态" width="80">
+            <template #default="scope">
+                <el-tag :type="scope.row.is_active ? 'success' : 'danger'">
+                    {{ scope.row.is_active ? '启用' : '禁用' }}
+                </el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="scope">
+            <el-button size="small" @click="handleEditKey(scope.row)">编辑</el-button>
+            <el-popconfirm
+                title="确定要删除这个密钥吗？"
+                @confirm="handleDeleteKey(scope.row.id)"
+            >
+                <template #reference>
+                    <el-button size="small" type="danger">删除</el-button>
+                </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-empty v-if="!keyStore.isLoading && keyStore.keys.length === 0" description="该分组下暂无密钥"></el-empty>
+    </el-card>
+
+    <!-- Add/Edit Dialog -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
+      <el-form :model="keyFormData" label-width="120px" ref="keyFormRef" :rules="keyFormRules">
+        <el-form-item label="API Key" prop="api_key">
+          <el-input v-model="keyFormData.api_key" placeholder="请输入完整的API Key"></el-input>
+        </el-form-item>
+        <el-form-item label="平台" prop="platform">
+          <el-select v-model="keyFormData.platform" placeholder="请选择平台">
+            <el-option label="OpenAI" value="OpenAI"></el-option>
+            <el-option label="Gemini" value="Gemini"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="可用模型" prop="model_types">
+           <el-select
+                v-model="keyFormData.model_types"
+                multiple
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请输入或选择可用模型">
+            </el-select>
+        </el-form-item>
+        <el-form-item label="速率限制" prop="rate_limit">
+            <el-input-number v-model="keyFormData.rate_limit" :min="0"></el-input-number>
+        </el-form-item>
+        <el-form-item label="限制单位" prop="rate_limit_unit">
+             <el-select v-model="keyFormData.rate_limit_unit">
+                <el-option label="分钟" value="minute"></el-option>
+                <el-option label="小时" value="hour"></el-option>
+                <el-option label="天" value="day"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="启用状态" prop="is_active">
+          <el-switch v-model="keyFormData.is_active"></el-switch>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleConfirmSave" :loading="isSaving">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import { useKeyStore } from '@/stores/keyStore';
+import { useGroupStore } from '@/stores/groupStore';
+import * as keyApi from '@/api/keys';
+import type { Key } from '@/types/models';
+import { ElCard, ElTable, ElTableColumn, ElButton, ElTag, ElPopconfirm, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElSwitch, ElMessage, ElEmpty, ElInputNumber } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
+
+const keyStore = useKeyStore();
+const groupStore = useGroupStore();
+
+const dialogVisible = ref(false);
+const isSaving = ref(false);
+const isEdit = ref(false);
+const currentKeyId = ref<string | null>(null);
+const keyFormRef = ref<FormInstance>();
+
+const dialogTitle = computed(() => (isEdit.value ? '编辑密钥' : '添加密钥'));
+
+const initialFormData: Omit<Key, 'id' | 'group_id' | 'usage' | 'created_at' | 'updated_at'> = {
+    api_key: '',
+    platform: 'OpenAI',
+    model_types: [],
+    rate_limit: 60,
+    rate_limit_unit: 'minute',
+    is_active: true,
+};
+
+const keyFormData = reactive({ ...initialFormData });
+
+const keyFormRules = reactive<FormRules>({
+    api_key: [{ required: true, message: '请输入API Key', trigger: 'blur' }],
+    platform: [{ required: true, message: '请选择平台', trigger: 'change' }],
+    model_types: [{ required: true, message: '请至少输入一个可用模型', trigger: 'change' }],
+});
+
+
+const resetForm = () => {
+    Object.assign(keyFormData, initialFormData);
+    currentKeyId.value = null;
+};
+
+const handleAddKey = () => {
+    isEdit.value = false;
+    resetForm();
+    dialogVisible.value = true;
+};
+
+const handleEditKey = (key: Key) => {
+    isEdit.value = true;
+    resetForm();
+    currentKeyId.value = key.id;
+    // 只填充表单所需字段
+    keyFormData.api_key = key.api_key;
+    keyFormData.platform = key.platform;
+    keyFormData.model_types = key.model_types;
+    keyFormData.rate_limit = key.rate_limit;
+    keyFormData.rate_limit_unit = key.rate_limit_unit;
+    keyFormData.is_active = key.is_active;
+    dialogVisible.value = true;
+};
+
+const handleDeleteKey = async (id: string) => {
+    try {
+        await keyApi.deleteKey(id);
+        ElMessage.success('删除成功');
+        if (groupStore.selectedGroupId) {
+            keyStore.fetchKeys(groupStore.selectedGroupId);
+        }
+    } catch (error) {
+        console.error('Failed to delete key:', error);
+        ElMessage.error('删除失败');
+    }
+};
+
+const handleConfirmSave = async () => {
+    if (!keyFormRef.value || !groupStore.selectedGroupId) return;
+
+    try {
+        await keyFormRef.value.validate();
+        isSaving.value = true;
+
+        const dataToSave = {
+            api_key: keyFormData.api_key,
+            platform: keyFormData.platform,
+            model_types: keyFormData.model_types,
+            rate_limit: keyFormData.rate_limit,
+            rate_limit_unit: keyFormData.rate_limit_unit,
+            is_active: keyFormData.is_active,
+        };
+
+        if (isEdit.value && currentKeyId.value) {
+            await keyApi.updateKey(currentKeyId.value, dataToSave);
+        } else {
+            await keyApi.createKey(groupStore.selectedGroupId, dataToSave);
+        }
+
+        ElMessage.success('保存成功');
+        dialogVisible.value = false;
+        await keyStore.fetchKeys(groupStore.selectedGroupId);
+
+    } catch (error) {
+        console.error('Failed to save key:', error);
+        ElMessage.error('保存失败，请检查表单或查看控制台');
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-table {
+    margin-top: 16px;
+}
+</style>
--- a/web/src/components/LogFilter.vue
+++ b/web/src/components/LogFilter.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-form :inline="true" :model="filterData" class="log-filter-form">
+    <el-form-item label="分组">
+      <el-select v-model="filterData.group_id" placeholder="所有分组" clearable>
+        <el-option v-for="group in groups" :key="group.id" :label="group.name" :value="group.id" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <el-date-picker
+        v-model="dateRange"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="handleDateChange"
+      />
+    </el-form-item>
+    <el-form-item label="状态码">
+      <el-input v-model.number="filterData.status_code" placeholder="例如 200" clearable />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="applyFilters">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { useLogStore } from '@/stores/logStore';
+import { useGroupStore } from '@/stores/groupStore';
+import { storeToRefs } from 'pinia';
+import type { LogQuery } from '@/api/logs';
+
+const logStore = useLogStore();
+const groupStore = useGroupStore();
+const { groups } = storeToRefs(groupStore);
+
+const filterData = reactive<LogQuery>({});
+const dateRange = ref<[Date, Date] | null>(null);
+
+onMounted(() => {
+  groupStore.fetchGroups();
+});
+
+const handleDateChange = (dates: [Date, Date] | null) => {
+  if (dates) {
+    filterData.start_time = dates[0].toISOString();
+    filterData.end_time = dates[1].toISOString();
+  } else {
+    filterData.start_time = undefined;
+    filterData.end_time = undefined;
+  }
+};
+
+const applyFilters = () => {
+  logStore.setFilters(filterData);
+};
+</script>
+
+<style scoped>
+.log-filter-form {
+  padding: 20px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>
--- a/web/src/components/StatsChart.vue
+++ b/web/src/components/StatsChart.vue
@@ -0,0 +1,52 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+import type { GroupRequestStat } from '@/types/models';
+
+const props = defineProps<{
+  data: GroupRequestStat[];
+}>();
+
+const chart = ref<HTMLElement | null>(null);
+let myChart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (chart.value) {
+    myChart = echarts.init(chart.value);
+    updateChart();
+  }
+};
+
+const updateChart = () => {
+  if (!myChart) return;
+  myChart.setOption({
+    title: {
+      text: '各分组请求量',
+    },
+    tooltip: {},
+    xAxis: {
+      data: props.data.map(item => item.group_name),
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '请求量',
+        type: 'bar',
+        data: props.data.map(item => item.request_count),
+      },
+    ],
+  });
+};
+
+onMounted(() => {
+  initChart();
+});
+
+watch(() => props.data, () => {
+  updateChart();
+}, { deep: true });
+</script>
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-container style="height: 100vh;">
+    <el-aside width="200px">
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-vertical-demo"
+        @select="handleSelect"
+        router
+      >
+        <el-menu-item index="/dashboard">
+          <template #title>
+            <span>Dashboard</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/groups">
+          <template #title>
+            <span>Groups</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/logs">
+          <template #title>
+            <span>Logs</span>
+          </template>
+        </el-menu-item>
+        <el-menu-item index="/settings">
+          <template #title>
+            <span>Settings</span>
+          </template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const activeIndex = ref(route.path)
+
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style scoped>
+.el-menu-vertical-demo {
+  height: 100%;
+}
+</style>
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Dashboard from '../views/Dashboard.vue';
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/dashboard',
+  },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: Dashboard,
+  },
+  {
+    path: '/groups',
+    name: 'Groups',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/Groups.vue'),
+  },
+  {
+    path: '/logs',
+    name: 'Logs',
+    component: () => import('../views/Logs.vue'),
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import('../views/Settings.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+export default router;
--- a/web/src/stores/dashboardStore.ts
+++ b/web/src/stores/dashboardStore.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { getDashboardStats } from '@/api/dashboard';
+import type { DashboardStats } from '@/types/models';
+
+export const useDashboardStore = defineStore('dashboard', () => {
+  const stats = ref<DashboardStats | null>(null);
+  const loading = ref(false);
+
+  const fetchStats = async () => {
+    loading.value = true;
+    try {
+      const response = await getDashboardStats();
+      stats.value = response;
+    } catch (error) {
+      console.error('Failed to fetch dashboard stats:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    stats,
+    loading,
+    fetchStats,
+  };
+});
--- a/web/src/stores/groupStore.ts
+++ b/web/src/stores/groupStore.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import * as groupApi from '@/api/groups';
+import type { Group } from '@/types/models';
+
+export const useGroupStore = defineStore('group', () => {
+  // State
+  const groups = ref<Group[]>([]);
+  const selectedGroupId = ref<string | null>(null);
+  const isLoading = ref(false);
+
+  // Getters
+  const selectedGroupDetails = computed(() => {
+    if (!selectedGroupId.value) {
+      return null;
+    }
+    return groups.value.find(g => g.id === selectedGroupId.value) || null;
+  });
+
+  // Actions
+  async function fetchGroups() {
+    isLoading.value = true;
+    try {
+      groups.value = await groupApi.fetchGroups();
+      // 默认选中第一个分组
+      if (groups.value.length > 0 && !selectedGroupId.value) {
+        selectedGroupId.value = groups.value[0].id;
+      }
+    } catch (error) {
+      console.error('Failed to fetch groups:', error);
+      // 这里可以添加更复杂的错误处理逻辑，例如用户通知
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function selectGroup(id: string | null) {
+    selectedGroupId.value = id;
+  }
+
+  return {
+    // State
+    groups,
+    selectedGroupId,
+    isLoading,
+    // Getters
+    selectedGroupDetails,
+    // Actions
+    fetchGroups,
+    selectGroup,
+  };
+});
--- a/web/src/stores/keyStore.ts
+++ b/web/src/stores/keyStore.ts
@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { ref, watch } from 'vue';
+import * as keyApi from '@/api/keys';
+import type { Key } from '@/types/models';
+import { useGroupStore } from './groupStore';
+
+export const useKeyStore = defineStore('key', () => {
+  // State
+  const keys = ref<Key[]>([]);
+  const isLoading = ref(false);
+  const groupStore = useGroupStore();
+
+  // Actions
+  async function fetchKeys(groupId: string) {
+    if (!groupId) {
+      keys.value = [];
+      return;
+    }
+    isLoading.value = true;
+    try {
+      keys.value = await keyApi.fetchKeysInGroup(groupId);
+    } catch (error) {
+      console.error(`Failed to fetch keys for group ${groupId}:`, error);
+      keys.value = []; // 出错时清空列表
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  // Watch for changes in the selected group and fetch keys accordingly
+  watch(() => groupStore.selectedGroupId, (newGroupId) => {
+    if (newGroupId) {
+      fetchKeys(newGroupId);
+    } else {
+      keys.value = [];
+    }
+  }, { immediate: true }); // immediate: true ensures it runs on initialization
+
+  return {
+    // State
+    keys,
+    isLoading,
+    // Actions
+    fetchKeys,
+  };
+});
--- a/web/src/stores/logStore.ts
+++ b/web/src/stores/logStore.ts
@@ -0,0 +1,61 @@
+import { defineStore } from 'pinia';
+import { ref, reactive } from 'vue';
+import { getLogs } from '@/api/logs';
+import type { RequestLog, LogQuery, PaginatedLogs } from '@/api/logs';
+
+export const useLogStore = defineStore('logs', () => {
+  const logs = ref<RequestLog[]>([]);
+  const loading = ref(false);
+  const pagination = reactive({
+    page: 1,
+    size: 10,
+    total: 0,
+  });
+  const filters = reactive<LogQuery>({});
+
+  const fetchLogs = async () => {
+    loading.value = true;
+    try {
+      const query: LogQuery = {
+        ...filters,
+        page: pagination.page,
+        size: pagination.size,
+      };
+      const response: PaginatedLogs = await getLogs(query);
+      logs.value = response.data;
+      pagination.total = response.total;
+    } catch (error) {
+      console.error('Failed to fetch logs:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const setFilters = (newFilters: LogQuery) => {
+    Object.assign(filters, newFilters);
+    pagination.page = 1;
+    fetchLogs();
+  };
+
+  const setPage = (page: number) => {
+    pagination.page = page;
+    fetchLogs();
+  };
+
+  const setSize = (size: number) => {
+    pagination.size = size;
+    pagination.page = 1;
+    fetchLogs();
+  };
+
+  return {
+    logs,
+    loading,
+    pagination,
+    filters,
+    fetchLogs,
+    setFilters,
+    setPage,
+    setSize,
+  };
+});
--- a/web/src/stores/settingStore.ts
+++ b/web/src/stores/settingStore.ts
@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia';
+import { getSettings, updateSettings as apiUpdateSettings } from '@/api/settings';
+import type { Setting } from '@/types/models';
+import { ElMessage } from 'element-plus';
+
+interface SettingState {
+  settings: Setting[];
+  loading: boolean;
+  error: any;
+}
+
+export const useSettingStore = defineStore('setting', {
+  state: (): SettingState => ({
+    settings: [],
+    loading: false,
+    error: null,
+  }),
+  actions: {
+    async fetchSettings() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const response = await getSettings();
+        this.settings = response.data;
+      } catch (error) {
+        this.error = error;
+        ElMessage.error('Failed to fetch settings.');
+      } finally {
+        this.loading = false;
+      }
+    },
+    async updateSettings(settingsToUpdate: Setting[]) {
+      this.loading = true;
+      this.error = null;
+      try {
+        await apiUpdateSettings(settingsToUpdate);
+        await this.fetchSettings(); // Refresh the settings after update
+        ElMessage.success('Settings updated successfully.');
+      } catch (error) {
+        this.error = error;
+        ElMessage.error('Failed to update settings.');
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+});
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/web/src/types/models.ts
+++ b/web/src/types/models.ts
@@ -0,0 +1,59 @@
+// Based on internal/models/types.go
+
+export interface Key {
+    id: string;
+    group_id: string;
+    api_key: string;
+    platform: 'OpenAI' | 'Gemini';
+    model_types: string[];
+    rate_limit: number;
+    rate_limit_unit: 'minute' | 'hour' | 'day';
+    usage: number;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface Group {
+    id: string;
+    name: string;
+    description: string;
+    is_default: boolean;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface GroupWithKeys extends Group {
+    keys: Key[];
+}
+
+export interface GroupRequestStat {
+  group_name: string;
+  request_count: number;
+}
+
+export interface DashboardStats {
+  total_requests: number;
+  success_requests: number;
+  success_rate: number;
+  group_stats: GroupRequestStat[];
+}
+
+export interface RequestLog {
+  id: string;
+  timestamp: string;
+  group_id: number;
+  key_id: number;
+  source_ip: string;
+  status_code: number;
+  request_path: string;
+  request_body_snippet: string;
+}
+export interface Setting {
+  key: string;
+  value: string;
+}
+export interface Setting {
+  key: string;
+  value: string;
+}
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="dashboard-page">
+    <h1>仪表盘</h1>
+    <div v-if="loading">加载中...</div>
+    <div v-if="stats" class="stats-grid">
+      <el-card>
+        <el-statistic title="总请求数" :value="stats.total_requests" />
+      </el-card>
+      <el-card>
+        <el-statistic title="成功请求数" :value="stats.success_requests" />
+      </el-card>
+      <el-card>
+        <el-statistic title="成功率" :value="stats.success_rate" :formatter="rateFormatter" />
+      </el-card>
+    </div>
+    <el-card v-if="stats && stats.group_stats.length > 0" class="chart-card">
+      <StatsChart :data="stats.group_stats" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDashboardStore } from '@/stores/dashboardStore';
+import StatsChart from '@/components/StatsChart.vue';
+
+const dashboardStore = useDashboardStore();
+const { stats, loading } = storeToRefs(dashboardStore);
+
+onMounted(() => {
+  dashboardStore.fetchStats();
+});
+
+const rateFormatter = (rate: number) => {
+  return `${(rate * 100).toFixed(2)}%`;
+};
+</script>
+
+<style scoped>
+.dashboard-page {
+  padding: 20px;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+.chart-card {
+  margin-top: 20px;
+}
+</style>
--- a/web/src/views/Groups.vue
+++ b/web/src/views/Groups.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="groups-view">
+    <el-row :gutter="20" class="main-layout">
+      <el-col :span="6" class="left-panel">
+        <group-list />
+      </el-col>
+      <el-col :span="18" class="right-panel">
+        <div class="config-section">
+          <group-config-form />
+        </div>
+        <div class="keys-section">
+          <key-table />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GroupList from '@/components/GroupList.vue';
+import GroupConfigForm from '@/components/GroupConfigForm.vue';
+import KeyTable from '@/components/KeyTable.vue';
+import { ElRow, ElCol } from 'element-plus';
+</script>
+
+<style scoped>
+.groups-view {
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.main-layout, .left-panel, .right-panel {
+  height: 100%;
+}
+
+.left-panel {
+  background-color: #fff;
+  border-radius: 4px;
+  overflow-y: auto;
+}
+
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.config-section, .keys-section {
+  background-color: #fff;
+  border-radius: 4px;
+}
+</style>
--- a/web/src/views/Logs.vue
+++ b/web/src/views/Logs.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="logs-page">
+    <h1>日志查询</h1>
+    <LogFilter />
+    <el-table :data="logs" v-loading="loading" style="width: 100%">
+      <el-table-column prop="timestamp" label="时间" width="180" :formatter="formatDate" />
+      <el-table-column prop="group_id" label="分组ID" width="100" />
+      <el-table-column prop="key_id" label="密钥ID" width="100" />
+      <el-table-column prop="source_ip" label="源IP" width="150" />
+      <el-table-column prop="status_code" label="状态码" width="100" />
+      <el-table-column prop="request_path" label="请求路径" />
+      <el-table-column prop="request_body_snippet" label="请求体片段" />
+    </el-table>
+    <el-pagination
+      background
+      layout="prev, pager, next, sizes"
+      :total="pagination.total"
+      :page-size="pagination.size"
+      :current-page="pagination.page"
+      @current-change="handlePageChange"
+      @size-change="handleSizeChange"
+      class="pagination-container"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useLogStore } from '@/stores/logStore';
+import LogFilter from '@/components/LogFilter.vue';
+import type { RequestLog } from '@/types/models';
+
+const logStore = useLogStore();
+const { logs, loading, pagination } = storeToRefs(logStore);
+
+onMounted(() => {
+  logStore.fetchLogs();
+});
+
+const handlePageChange = (page: number) => {
+  logStore.setPage(page);
+};
+
+const handleSizeChange = (size: number) => {
+  logStore.setSize(size);
+};
+
+const formatDate = (_row: RequestLog, _column: any, cellValue: string) => {
+  return new Date(cellValue).toLocaleString();
+};
+</script>
+
+<style scoped>
+.logs-page {
+  padding: 20px;
+}
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -0,0 +1,44 @@
+<template>
+  <div v-loading="loading">
+    <h1>Settings</h1>
+    <el-form :model="form" label-width="200px">
+      <el-form-item v-for="setting in settings" :key="setting.key" :label="setting.key">
+        <el-input v-model="form[setting.key]"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="saveSettings">Save</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useSettingStore } from '@/stores/settingStore';
+import { storeToRefs } from 'pinia';
+import type { Setting } from '@/types/models';
+
+const settingStore = useSettingStore();
+const { settings, loading } = storeToRefs(settingStore);
+
+const form = ref<Record<string, string>>({});
+
+onMounted(() => {
+  settingStore.fetchSettings();
+});
+
+watch(settings, (newSettings) => {
+  form.value = newSettings.reduce((acc, setting) => {
+    acc[setting.key] = setting.value;
+    return acc;
+  }, {} as Record<string, string>);
+}, { immediate: true, deep: true });
+
+const saveSettings = () => {
+  const settingsToUpdate: Setting[] = Object.entries(form.value).map(([key, value]) => ({
+    key,
+    value,
+  }));
+  settingStore.updateSettings(settingsToUpdate);
+};
+</script>
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'url'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    outDir: 'dist'
+  },
+  base: './'
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`