feat: 前端: 实现标签管理界面

packages/frontend/src/App.vue

@@ -20,6 +20,7 @@ const handleLogout = () => {
         <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> |
         <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
         <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
+        <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | <!-- 新增标签链接 -->
         <RouterLink v-if="!isAuthenticated" to="/login">{{ t('nav.login') }}</RouterLink>
         <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout">{{ t('nav.logout') }}</a>
       </nav>

packages/frontend/src/components/AddTagForm.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTagsStore, TagInfo } from '../stores/tags.store';
+
+// 定义 Props
+const props = defineProps<{
+  tagToEdit: TagInfo | null; // 接收要编辑的标签对象
+}>();
+
+// 定义发出的事件
+const emit = defineEmits(['close', 'tag-saved']);
+
+const { t } = useI18n();
+const tagsStore = useTagsStore();
+
+const tagName = ref('');
+const formError = ref<string | null>(null);
+
+// 计算属性判断是否为编辑模式
+const isEditMode = computed(() => !!props.tagToEdit);
+
+// 计算属性动态设置表单标题
+const formTitle = computed(() => {
+    return isEditMode.value ? t('tags.form.titleEdit') : t('tags.form.title');
+});
+
+// 计算属性动态设置提交按钮文本
+const submitButtonText = computed(() => {
+    if (tagsStore.isLoading) {
+        return isEditMode.value ? t('tags.form.saving') : t('tags.form.adding');
+    }
+    return isEditMode.value ? t('tags.form.confirmEdit') : t('tags.form.confirm');
+});
+
+// 监听 prop 变化以填充或重置表单
+watch(() => props.tagToEdit, (newVal) => {
+    formError.value = null; // 清除错误
+    if (newVal) {
+        // 编辑模式：填充表单
+        tagName.value = newVal.name;
+    } else {
+        // 添加模式：重置表单
+        tagName.value = '';
+    }
+}, { immediate: true });
+
+// 处理表单提交
+const handleSubmit = async () => {
+    formError.value = null;
+    tagsStore.error = null; // 清除 store 中的旧错误
+
+    const nameToSubmit = tagName.value.trim();
+    if (!nameToSubmit) {
+        formError.value = t('tags.form.errorNameRequired');
+        return;
+    }
+
+    let success = false;
+    if (isEditMode.value && props.tagToEdit) {
+        // 调用更新 action
+        if (nameToSubmit !== props.tagToEdit.name) { // 只有名称改变时才更新
+             success = await tagsStore.updateTag(props.tagToEdit.id, nameToSubmit);
+             if (!success) {
+                 formError.value = t('tags.form.errorUpdate', { error: tagsStore.error || 'Unknown error' });
+             }
+        } else {
+            success = true; // 名称未改变，视为成功
+        }
+    } else {
+        // 调用添加 action
+        success = await tagsStore.addTag(nameToSubmit);
+        if (!success) {
+            formError.value = t('tags.form.errorAdd', { error: tagsStore.error || 'Unknown error' });
+        }
+    }
+
+    if (success) {
+        emit('tag-saved'); // 发出保存成功事件
+    }
+};
+</script>
+
+<template>
+    <div class="add-tag-form-overlay">
+        <div class="add-tag-form">
+            <h3>{{ formTitle }}</h3>
+            <form @submit.prevent="handleSubmit">
+                <div class="form-group">
+                    <label for="tag-name">{{ t('tags.form.name') }}</label>
+                    <input type="text" id="tag-name" v-model="tagName" required />
+                </div>
+
+                <div v-if="formError || tagsStore.error" class="error-message">
+                    {{ formError || tagsStore.error }}
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" :disabled="tagsStore.isLoading">
+                        {{ submitButtonText }}
+                    </button>
+                    <button type="button" @click="emit('close')" :disabled="tagsStore.isLoading">
+                        {{ t('tags.form.cancel') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* 样式与 AddConnectionForm 类似，可以考虑提取公共样式 */
+.add-tag-form-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001; /* 比 TagList 高一层 */
+}
+
+.add-tag-form {
+  background-color: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  min-width: 300px;
+  max-width: 400px;
+}
+
+h3 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-weight: bold;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.error-message {
+  color: red;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}
+
+.form-actions button {
+  margin-left: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #007bff;
+  color: white;
+}
+
+.form-actions button[type="button"] {
+  background-color: #ccc;
+  color: #333;
+}
+
+.form-actions button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

packages/frontend/src/components/TagList.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useTagsStore, TagInfo } from '../stores/tags.store';
+
+// 定义 Props
+const props = defineProps<{
+  tags: TagInfo[];
+}>();
+
+// 定义发出的事件
+const emit = defineEmits(['edit-tag']);
+
+const { t } = useI18n();
+const tagsStore = useTagsStore();
+
+// 处理删除标签
+const handleDelete = async (tag: TagInfo) => {
+    // 可以添加确认提示框
+    if (confirm(t('tags.prompts.confirmDelete', { name: tag.name }))) {
+        const success = await tagsStore.deleteTag(tag.id);
+        if (!success) {
+            // 可以显示错误提示，例如使用 alert 或更复杂的通知系统
+            alert(t('tags.errors.deleteFailed', { error: tagsStore.error || 'Unknown error' }));
+        }
+        // 列表会在 store 内部刷新
+    }
+};
+
+// 格式化时间戳 (可以提取为公共工具函数)
+const formatDate = (timestamp: number) => {
+    if (!timestamp) return t('tags.status.never');
+    return new Date(timestamp * 1000).toLocaleString();
+};
+</script>
+
+<template>
+    <table class="tag-list-table">
+        <thead>
+            <tr>
+                <th>{{ t('tags.table.name') }}</th>
+                <th>{{ t('tags.table.updatedAt') }}</th>
+                <th>{{ t('tags.table.actions') }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="tag in tags" :key="tag.id">
+                <td>{{ tag.name }}</td>
+                <td>{{ formatDate(tag.updated_at) }}</td>
+                <td>
+                    <button @click="emit('edit-tag', tag)" class="action-button edit-button">
+                        {{ t('tags.actions.edit') }}
+                    </button>
+                    <button @click="handleDelete(tag)" class="action-button delete-button" :disabled="tagsStore.isLoading">
+                        {{ t('tags.actions.delete') }}
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+.tag-list-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+
+th, td {
+    border: 1px solid #ddd;
+    padding: 0.8rem;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+.action-button {
+    padding: 0.3rem 0.6rem;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+
+.edit-button {
+    background-color: #ffc107; /* Amber */
+    color: #333;
+}
+
+.delete-button {
+    background-color: #dc3545; /* Red */
+    color: white;
+}
+
+.action-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+</style>

packages/frontend/src/locales/en.json

@@ -5,7 +5,8 @@
     "connections": "Connections",
     "proxies": "Proxies",
     "login": "Login",
-    "logout": "Logout"
+    "logout": "Logout",
+    "tags": "Tags"
   },
   "login": {
     "title": "User Login",
@@ -218,5 +219,43 @@
     "saving": "Saving",
     "saveSuccess": "Save successful",
     "saveError": "Save error"
+  },
+  "tags": {
+    "title": "Tag Management",
+    "addTag": "Add New Tag",
+    "loading": "Loading tags...",
+    "error": "Failed to load tags: {error}",
+    "noTags": "No tags yet. Click 'Add New Tag' to create one!",
+    "table": {
+      "name": "Name",
+      "updatedAt": "Updated At",
+      "actions": "Actions"
+    },
+    "actions": {
+      "edit": "Edit",
+      "delete": "Delete"
+    },
+    "form": {
+      "title": "Add New Tag",
+      "titleEdit": "Edit Tag",
+      "name": "Tag Name:",
+      "confirm": "Confirm Add",
+      "confirmEdit": "Confirm Edit",
+      "adding": "Adding...",
+      "saving": "Saving...",
+      "cancel": "Cancel",
+      "errorNameRequired": "Tag name cannot be empty.",
+      "errorAdd": "Failed to add tag: {error}",
+      "errorUpdate": "Failed to update tag: {error}"
+    },
+    "prompts": {
+        "confirmDelete": "Are you sure you want to delete the tag \"{name}\"? This cannot be undone."
+    },
+    "errors": {
+        "deleteFailed": "Failed to delete tag: {error}"
+    },
+     "status": {
+      "never": "Never"
+    }
   }
 }

packages/frontend/src/locales/zh.json

@@ -5,7 +5,8 @@
     "connections": "连接管理",
     "proxies": "代理管理",
     "login": "登录",
-    "logout": "登出"
+    "logout": "登出",
+    "tags": "标签管理"
   },
   "login": {
     "title": "用户登录",
@@ -221,5 +222,43 @@
     "saving": "正在保存",
     "saveSuccess": "保存成功",
     "saveError": "保存出错"
+  },
+  "tags": {
+    "title": "标签管理",
+    "addTag": "添加新标签",
+    "loading": "正在加载标签...",
+    "error": "加载标签列表失败: {error}",
+    "noTags": "还没有任何标签。点击“添加新标签”来创建一个吧！",
+    "table": {
+      "name": "名称",
+      "updatedAt": "更新时间",
+      "actions": "操作"
+    },
+    "actions": {
+      "edit": "编辑",
+      "delete": "删除"
+    },
+    "form": {
+      "title": "添加新标签",
+      "titleEdit": "编辑标签",
+      "name": "标签名称:",
+      "confirm": "确认添加",
+      "confirmEdit": "确认编辑",
+      "adding": "正在添加...",
+      "saving": "正在保存...",
+      "cancel": "取消",
+      "errorNameRequired": "标签名称不能为空。",
+      "errorAdd": "添加标签失败: {error}",
+      "errorUpdate": "更新标签失败: {error}"
+    },
+    "prompts": {
+        "confirmDelete": "确定要删除标签 \"{name}\" 吗？此操作不可撤销。"
+    },
+    "errors": {
+        "deleteFailed": "删除标签失败: {error}"
+    },
+     "status": {
+      "never": "从未"
+    }
   }
 }

packages/frontend/src/router/index.ts

@@ -28,6 +28,12 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Proxies',
     component: () => import('../views/ProxiesView.vue')
   },
+  // 新增：标签管理页面
+  {
+    path: '/tags',
+    name: 'Tags',
+    component: () => import('../views/TagsView.vue')
+  },
   // 工作区页面，需要 connectionId 参数
   {
     path: '/workspace/:connectionId', // 使用动态路由段

packages/frontend/src/stores/tags.store.ts

@@ -0,0 +1,100 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import axios from 'axios'; // 假设使用 axios 发送请求
+
+// 定义标签信息接口
+export interface TagInfo {
+    id: number;
+    name: string;
+    created_at: number;
+    updated_at: number;
+}
+
+export const useTagsStore = defineStore('tags', () => {
+    const tags = ref<TagInfo[]>([]);
+    const isLoading = ref(false);
+    const error = ref<string | null>(null);
+
+    // 获取标签列表
+    async function fetchTags() {
+        isLoading.value = true;
+        error.value = null;
+        try {
+            const response = await axios.get<TagInfo[]>('/api/v1/tags');
+            tags.value = response.data;
+            return true;
+        } catch (err: any) {
+            console.error('Failed to fetch tags:', err);
+            error.value = err.response?.data?.message || err.message || '获取标签列表失败';
+            return false;
+        } finally {
+            isLoading.value = false;
+        }
+    }
+
+    // 添加新标签
+    async function addTag(name: string): Promise<boolean> {
+        isLoading.value = true;
+        error.value = null;
+        try {
+            const response = await axios.post<{ message: string, tag: TagInfo }>('/api/v1/tags', { name });
+            // 添加成功后，重新获取列表以保证数据同步 (或者直接将新标签添加到 ref)
+            await fetchTags(); // 简单起见，重新获取
+            // tags.value.push(response.data.tag); // 另一种方式
+            // tags.value.sort((a, b) => a.name.localeCompare(b.name)); // 保持排序
+            return true;
+        } catch (err: any) {
+            console.error('Failed to add tag:', err);
+            error.value = err.response?.data?.message || err.message || '添加标签失败';
+            return false;
+        } finally {
+            isLoading.value = false;
+        }
+    }
+
+    // 更新标签
+    async function updateTag(id: number, name: string): Promise<boolean> {
+        isLoading.value = true;
+        error.value = null;
+        try {
+            await axios.put(`/api/v1/tags/${id}`, { name });
+            // 更新成功后，重新获取列表
+            await fetchTags();
+            return true;
+        } catch (err: any) {
+            console.error('Failed to update tag:', err);
+            error.value = err.response?.data?.message || err.message || '更新标签失败';
+            return false;
+        } finally {
+            isLoading.value = false;
+        }
+    }
+
+    // 删除标签
+    async function deleteTag(id: number): Promise<boolean> {
+        isLoading.value = true;
+        error.value = null;
+        try {
+            await axios.delete(`/api/v1/tags/${id}`);
+            // 删除成功后，重新获取列表
+            await fetchTags();
+            return true;
+        } catch (err: any) {
+            console.error('Failed to delete tag:', err);
+            error.value = err.response?.data?.message || err.message || '删除标签失败';
+            return false;
+        } finally {
+            isLoading.value = false;
+        }
+    }
+
+    return {
+        tags,
+        isLoading,
+        error,
+        fetchTags,
+        addTag,
+        updateTag,
+        deleteTag,
+    };
+});

packages/frontend/src/views/TagsView.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTagsStore, TagInfo } from '../stores/tags.store';
+import TagList from '../components/TagList.vue';
+import AddTagForm from '../components/AddTagForm.vue'; // 稍后创建
+
+const { t } = useI18n();
+const tagsStore = useTagsStore();
+
+const showAddTagForm = ref(false);
+const tagToEdit = ref<TagInfo | null>(null);
+
+// 组件挂载时获取标签列表
+onMounted(() => {
+    tagsStore.fetchTags();
+});
+
+// 打开添加表单
+const openAddForm = () => {
+    tagToEdit.value = null; // 确保不是编辑模式
+    showAddTagForm.value = true;
+};
+
+// 打开编辑表单
+const openEditForm = (tag: TagInfo) => {
+    tagToEdit.value = tag;
+    showAddTagForm.value = true;
+};
+
+// 关闭表单
+const closeForm = () => {
+    showAddTagForm.value = false;
+    tagToEdit.value = null;
+};
+
+// 处理标签添加/更新成功事件
+const onTagSaved = () => {
+    closeForm();
+    // Store 内部会自动刷新列表，这里无需额外操作
+};
+
+</script>
+
+<template>
+    <div class="tags-view">
+        <h2>{{ t('tags.title') }}</h2>
+
+        <div class="actions-bar">
+            <button @click="openAddForm">{{ t('tags.addTag') }}</button>
+        </div>
+
+        <div v-if="tagsStore.isLoading" class="loading-message">
+            {{ t('tags.loading') }}
+        </div>
+        <div v-else-if="tagsStore.error" class="error-message">
+            {{ t('tags.error', { error: tagsStore.error }) }}
+        </div>
+        <div v-else-if="tagsStore.tags.length === 0" class="no-data-message">
+            {{ t('tags.noTags') }}
+        </div>
+        <TagList v-else :tags="tagsStore.tags" @edit-tag="openEditForm" />
+
+        <!-- 添加/编辑标签表单 (模态框) -->
+        <AddTagForm
+            v-if="showAddTagForm"
+            :tag-to-edit="tagToEdit"
+            @close="closeForm"
+            @tag-saved="onTagSaved"
+        />
+    </div>
+</template>
+
+<style scoped>
+.tags-view {
+    padding: 1rem;
+}
+
+h2 {
+    margin-bottom: 1rem;
+}
+
+.actions-bar {
+    margin-bottom: 1rem;
+}
+
+.actions-bar button {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+}
+
+.loading-message,
+.error-message,
+.no-data-message {
+    margin-top: 1rem;
+    text-align: center;
+    color: #666;
+}
+
+.error-message {
+    color: red;
+}
+</style>