update

packages/frontend/src/App.vue

@@ -26,12 +26,12 @@ const handleLogout = () => {
       <nav>
         <RouterLink to="/">{{ t('nav.dashboard') }}</RouterLink> |
         <RouterLink to="/connections">{{ t('nav.connections') }}</RouterLink> |
-        <RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink> | <!-- 新增终端链接 -->
-        <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
-        <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | <!-- 新增标签链接 -->
-        <RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink> | <!-- 新增通知链接 -->
-        <RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink> | <!-- 新增审计日志链接 -->
-        <RouterLink to="/settings">{{ t('nav.settings') }}</RouterLink> | <!-- 新增设置链接 -->
+         <RouterLink to="/workspace">{{ t('nav.terminal') }}</RouterLink> | <!-- 新增终端链接 -->
+         <RouterLink to="/proxies">{{ t('nav.proxies') }}</RouterLink> | <!-- 新增代理链接 -->
+         <!-- <RouterLink to="/tags">{{ t('nav.tags') }}</RouterLink> | --> <!-- 移除标签链接 -->
+         <RouterLink to="/notifications">{{ t('nav.notifications') }}</RouterLink> | <!-- 新增通知链接 -->
+         <RouterLink to="/audit-logs">{{ t('nav.auditLogs') }}</RouterLink> | <!-- 新增审计日志链接 -->
+         <RouterLink to="/settings">{{ t('nav.settings') }}</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/AddConnectionForm.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
 import { useProxiesStore } from '../stores/proxies.store'; // 引入代理 Store
 import { useTagsStore } from '../stores/tags.store'; // 引入标签 Store
+import TagInput from './TagInput.vue'; // 导入新的 TagInput 组件
 
 // 定义组件发出的事件
 const emit = defineEmits(['close', 'connection-added', 'connection-updated']);
@@ -253,25 +254,18 @@ const handleSubmit = async () => {
                 </option>
             </select>
              <div v-if="isProxyLoading" class="loading-small">{{ t('proxies.loading') }}</div>
-             <div v-if="proxyStoreError" class="error-small">{{ t('proxies.error', { error: proxyStoreError }) }}</div>
-        </div>
+              <div v-if="proxyStoreError" class="error-small">{{ t('proxies.error', { error: proxyStoreError }) }}</div>
+         </div>
 
-        <!-- 新增：标签选择 (多选框) -->
-        <div class="form-group">
-            <label>{{ t('connections.form.tags') }} ({{ t('connections.form.optional') }})</label>
-            <div class="tag-checkbox-group">
-                 <div v-if="isTagLoading" class="loading-small">{{ t('tags.loading') }}</div>
-                 <div v-else-if="tagStoreError" class="error-small">{{ t('tags.error', { error: tagStoreError }) }}</div>
-                 <div v-else-if="tags.length === 0" class="info-small">{{ t('tags.noTags') }}</div>
-                 <label v-for="tag in tags" :key="tag.id" class="tag-checkbox-label">
-                     <input type="checkbox" :value="tag.id" v-model="formData.tag_ids">
-                     {{ tag.name }}
-                 </label>
-            </div>
-        </div>
+         <!-- 新增：标签选择 (使用新组件) -->
+         <div class="form-group">
+             <label>{{ t('connections.form.tags') }} ({{ t('connections.form.optional') }})</label>
+             <TagInput v-model="formData.tag_ids" />
+             <!-- TagInput 组件内部会处理加载和错误状态 -->
+         </div>
 
-        <!-- 显示 storeError 或 formError -->
-        <div v-if="formError || storeError" class="error-message">
+         <!-- 显示 storeError 或 formError -->
+         <div v-if="formError || storeError" class="error-message">
           {{ formError || storeError }} <!-- 使用合并后的 storeError -->
         </div>
 
@@ -334,32 +328,14 @@ textarea {
   padding: 0.5rem;
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-sizing: border-box; /* Include padding and border in element's total width and height */
-}
+   box-sizing: border-box; /* Include padding and border in element's total width and height */
+ }
 
-/* 标签选择样式 */
-.tag-checkbox-group {
-    max-height: 150px; /* 限制高度，出现滚动条 */
-    overflow-y: auto;
-    border: 1px solid #ccc;
-    padding: 0.5rem;
-    border-radius: 4px;
-    margin-top: 0.5rem;
-}
+ /* 移除旧的标签选择样式 */
+ /* .tag-checkbox-group ... */
+ /* .tag-checkbox-label ... */
 
-.tag-checkbox-label {
-    display: block; /* 每个标签占一行 */
-    margin-bottom: 0.3rem;
-    font-weight: normal; /* 普通字体 */
-    cursor: pointer;
-}
-
-.tag-checkbox-label input[type="checkbox"] {
-    margin-right: 0.5rem;
-    width: auto; /* 恢复复选框默认宽度 */
-}
-
-.loading-small, .error-small, .info-small {
+ .loading-small, .error-small, .info-small {
     font-size: 0.9em;
     color: #666;
     margin-top: 0.2rem;

packages/frontend/src/components/AddProxyForm.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue';
+import { ref, reactive, watch, computed, onMounted } from 'vue'; // 添加 onMounted
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
+import { useTagsStore } from '../stores/tags.store'; // 引入标签 Store
+import TagInput from './TagInput.vue'; // 导入新的 TagInput 组件
 
 // 定义组件发出的事件
 const emit = defineEmits(['close', 'proxy-added', 'proxy-updated']);
@@ -14,7 +16,9 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const proxiesStore = useProxiesStore();
-const { isLoading, error: storeError } = storeToRefs(proxiesStore);
+const tagsStore = useTagsStore(); // 获取标签 store 实例
+const { isLoading, error: proxyStoreError } = storeToRefs(proxiesStore); // 重命名 error 避免冲突
+const { isLoading: isTagLoading, error: tagStoreError } = storeToRefs(tagsStore); // 获取标签状态
 
 // 表单数据模型
 const initialFormData = {
@@ -24,10 +28,14 @@ const initialFormData = {
   port: 1080, // 默认 SOCKS5 端口
   username: '',
   password: '',
+  tag_ids: [] as number[], // 新增 tag_ids 字段
 };
 const formData = reactive({ ...initialFormData });
 
 const formError = ref<string | null>(null); // 表单级别的错误信息
+// 合并加载和错误状态
+const isCombinedLoading = computed(() => isLoading.value || isTagLoading.value);
+const combinedStoreError = computed(() => proxyStoreError.value || tagStoreError.value);
 
 // 计算属性判断是否为编辑模式
 const isEditMode = computed(() => !!props.proxyToEdit);

packages/frontend/src/components/AddTagForm.vue

@@ -1,193 +0,0 @@
-<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/TagInput.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useTagsStore, TagInfo } from '../stores/tags.store';
+
+const props = defineProps<{
+  modelValue: number[]; // 接收选中的 tag_ids
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+const tagsStore = useTagsStore();
+const { tags, isLoading, error } = storeToRefs(tagsStore);
+
+const inputValue = ref(''); // 输入框的值
+const inputRef = ref<HTMLInputElement | null>(null); // 输入框引用
+const showSuggestions = ref(false); // 是否显示建议列表
+const selectedTagIds = ref<number[]>([]); // 本地维护选中的 tag_ids
+
+// 监听 props.modelValue 的变化，同步到本地 selectedTagIds
+watch(() => props.modelValue, (newVal) => {
+  // 只有在值确实不同的情况下才更新，避免无限循环
+  if (JSON.stringify(newVal.sort()) !== JSON.stringify(selectedTagIds.value.sort())) {
+    selectedTagIds.value = [...newVal];
+  }
+}, { immediate: true, deep: true });
+
+// 监听本地 selectedTagIds 的变化，通知父组件
+watch(selectedTagIds, (newVal) => {
+  // 只有在值确实不同的情况下才更新，避免无限循环
+  if (JSON.stringify(newVal.sort()) !== JSON.stringify(props.modelValue.sort())) {
+    emit('update:modelValue', [...newVal]);
+  }
+}, { deep: true });
+
+
+// 计算属性：所有标签的 Map，方便通过 ID 查找
+const tagsMap = computed(() => {
+  const map = new Map<number, TagInfo>();
+  tags.value.forEach(tag => map.set(tag.id, tag));
+  return map;
+});
+
+// 计算属性：已选中的标签对象
+const selectedTags = computed(() => {
+  // 确保先从 map 中查找，再过滤掉未找到的 (可能标签已被删除)
+  return selectedTagIds.value
+    .map(id => tagsMap.value.get(id))
+    .filter((tag): tag is TagInfo => tag !== undefined);
+});
+
+// 计算属性：过滤后的建议列表
+const suggestions = computed(() => {
+  if (!showSuggestions.value) { // 仅在需要显示时计算
+    return [];
+  }
+  let result: TagInfo[];
+  // 如果输入框为空，显示所有未选中的标签
+  if (!inputValue.value) {
+    result = tags.value.filter(tag => !selectedTagIds.value.includes(tag.id));
+  } else {
+    const lowerCaseInput = inputValue.value.toLowerCase();
+    result = tags.value.filter(tag =>
+      tag.name.toLowerCase().includes(lowerCaseInput) &&
+      !selectedTagIds.value.includes(tag.id) // 排除已选中的
+    );
+  }
+  return result;
+});
+
+// 处理输入框聚焦
+const handleFocus = async () => {
+  showSuggestions.value = false; // 在异步操作前显式设置为 false
+  // 1. 首先获取最新的标签
+  await tagsStore.fetchTags();
+
+  // 2. 基于更新后的标签列表和当前输入值，计算出实际可以显示的建议标签
+  //    (这部分逻辑与 computed 'suggestions' 类似，但不依赖 showSuggestions.value)
+  let potentialSuggestions: TagInfo[];
+  const currentInput = inputValue.value; // 获取当前输入框的值
+  // 过滤掉已选中的标签
+  const availableTags = tags.value.filter(tag => !selectedTagIds.value.includes(tag.id));
+
+  if (!currentInput) {
+    // 如果输入框为空，所有未选中的标签都是潜在建议
+    potentialSuggestions = availableTags;
+  } else {
+    // 如果输入框有值，则根据输入值过滤可用标签
+    const lowerCaseInput = currentInput.toLowerCase();
+    potentialSuggestions = availableTags.filter(tag =>
+      tag.name.toLowerCase().includes(lowerCaseInput)
+    );
+  }
+
+  // 3. 只有当确实存在潜在建议时，才显示建议列表
+  const shouldShow = potentialSuggestions.length > 0;
+  showSuggestions.value = shouldShow; // 最终状态由计算结果决定
+};
+
+// 处理输入框失焦
+const handleBlur = () => {
+  // 立即隐藏菜单，无需延迟
+  showSuggestions.value = false;
+};
+
+// 处理键盘事件 (Enter 创建, Backspace 删除)
+const handleKeyDown = async (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && inputValue.value.trim()) {
+    event.preventDefault(); // 阻止表单提交等默认行为
+    const trimmedInput = inputValue.value.trim();
+    const lowerCaseInput = trimmedInput.toLowerCase();
+    const existingTag = tags.value.find(tag => tag.name.toLowerCase() === lowerCaseInput);
+
+    if (existingTag && !selectedTagIds.value.includes(existingTag.id)) {
+      // 如果是现有标签且未选中，则选中它
+      selectTag(existingTag);
+    } else if (!existingTag) {
+      // 如果是新标签，则创建并选中
+      const success = await tagsStore.addTag(trimmedInput);
+      if (success) {
+        // addTag 内部会 fetchTags, store 会更新
+        // 需要等待 DOM 更新和 store 更新完成
+        await nextTick(); // 等待 store 更新
+        const newTag = tags.value.find(tag => tag.name === trimmedInput); // 再次查找确保获取到 ID
+        if (newTag) {
+          selectTag(newTag);
+        }
+      }
+    }
+    inputValue.value = ''; // 清空输入框
+    showSuggestions.value = false; // 创建或选择后隐藏建议
+  } else if (event.key === 'Backspace' && !inputValue.value && selectedTagIds.value.length > 0) {
+    // 如果输入框为空且按了退格键，则移除最后一个选中的标签 (仅从当前选择移除)
+    removeTagLocally(selectedTags.value[selectedTags.value.length - 1]);
+  }
+};
+
+// 选中一个标签 (来自建议列表或 Enter 创建)
+const selectTag = (tag: TagInfo) => {
+  if (!selectedTagIds.value.includes(tag.id)) {
+    // 使用 .push() 来触发 watch
+    const updatedIds = [...selectedTagIds.value, tag.id];
+    selectedTagIds.value = updatedIds;
+  }
+  inputValue.value = ''; // 清空输入框
+  showSuggestions.value = false; // 选择后隐藏建议
+  inputRef.value?.focus(); // 重新聚焦输入框
+};
+
+// 仅从本地选择中移除一个标签 (点击选中标签的 'x' 或 Backspace)
+const removeTagLocally = (tagToRemove: TagInfo) => {
+  selectedTagIds.value = selectedTagIds.value.filter(id => id !== tagToRemove.id);
+};
+
+// 处理全局删除标签 (点击标签上的 'x' 图标) - 这是全局删除
+const handleDeleteTagGlobally = async (tagToDelete: TagInfo) => {
+    // 弹出确认框，防止误删
+    if (confirm(t('tags.prompts.confirmDelete', { name: tagToDelete.name }))) {
+        const success = await tagsStore.deleteTag(tagToDelete.id);
+        if (success) {
+            // deleteTag 内部会 fetchTags, store 会更新
+            // selectedTagIds 会因为 watch props.modelValue 而自动更新 (如果父组件也更新了)
+            // 或者手动从 selectedTagIds 中移除 (更保险)
+            removeTagLocally(tagToDelete);
+            // 可选：显示成功提示
+        } else {
+            // 可选：显示错误提示
+            alert(t('tags.errorDelete', { error: tagsStore.error || '未知错误' }));
+        }
+    }
+};
+
+</script>
+
+<template>
+  <div class="tag-input-container">
+    <!-- .selected-tags 移动到 .input-area 内部 -->
+    <div class="input-area">
+       <div class="selected-tags">
+          <span v-for="tag in selectedTags" :key="tag.id" class="tag-item">
+            {{ tag.name }}
+            <button
+          type="button"
+          class="remove-tag-local"
+          @click="removeTagLocally(tag)"
+          :title="t('tags.removeSelection')"
+        >&times;</button>
+         <button
+            type="button"
+            class="remove-tag-global"
+            @click.stop="handleDeleteTagGlobally(tag)"
+            :title="t('tags.deleteTagGlobally')"
+            >&#x1F5D1;</button> <!-- 使用垃圾桶图标 -->
+          </span>
+       </div>
+      <input
+        ref="inputRef"
+        type="text"
+        class="tag-actual-input"
+        v-model="inputValue"
+        :placeholder="t('tags.inputPlaceholder')"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeyDown"
+        autocomplete="off"
+      />
+      <ul v-if="showSuggestions && suggestions.length > 0" class="suggestions-list">
+        <li
+          v-for="suggestion in suggestions"
+          :key="suggestion.id"
+          @mousedown.prevent="selectTag(suggestion)"
+        >
+          {{ suggestion.name }}
+        </li>
+      </ul>
+       <!-- 修改 v-if 条件，不再依赖 showSuggestions -->
+       <div v-if="isLoading" class="loading-small">{{ t('tags.loading') }}</div>
+       <div v-if="error" class="error-small">{{ t('tags.error', { error: error }) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tag-input-container {
+  /* 移除边框，让 .input-area 作为视觉边界 */
+  border-radius: 4px;
+  position: relative; /* 为了建议列表定位 */
+  box-sizing: border-box;
+  width: 100%; /* 占据父容器宽度 */
+}
+
+.selected-tags {
+  display: inline-flex; /* 改为 inline-flex 以便和 input 排列 */
+  flex-wrap: wrap;
+  gap: 0.3rem; /* 标签间距 */
+  /* margin-right: 0.5rem; */ /* 移除右边距 */
+  /* margin-bottom: 0.3rem; */ /* 如果换行，和下一行输入框的间距 */
+}
+
+.tag-item {
+  background-color: #e0e0e0;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  display: inline-flex; /* 让按钮和文字在一行 */
+  align-items: center;
+  font-size: 0.9em;
+  white-space: nowrap; /* 防止标签内文字换行 */
+}
+
+.tag-item button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.2rem;
+  margin-left: 0.3rem;
+  font-size: 1.1em; /* 放大图标 */
+  line-height: 1; /* 确保按钮高度一致 */
+  color: #555;
+}
+.tag-item button:hover {
+    color: #000;
+}
+.remove-tag-global {
+    font-size: 0.9em; /* 垃圾桶图标稍小 */
+    color: #a55; /* 红色提示危险操作 */
+}
+.remove-tag-global:hover {
+    color: red;
+}
+
+
+.input-area {
+  border: 1px solid #ccc; /* 将边框应用到这里 */
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem; /* 内边距 */
+  display: flex; /* 使用 flex 布局 */
+  flex-wrap: wrap; /* 允许内部元素（标签和输入框）换行 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 0.3rem; /* 标签和输入框之间的间距 */
+  cursor: text; /* 模拟文本输入框点击效果 */
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* 对实际的 input 元素进行样式调整 */
+.tag-actual-input {
+  flex-grow: 1; /* 占据剩余空间 */
+  border: none;
+  outline: none;
+  padding: 0.2rem 0; /* 微调内边距 */
+  font-size: 1em;
+  min-width: 100px; /* 保证输入框有最小宽度 */
+  background: transparent; /* 背景透明 */
+}
+
+.suggestions-list {
+  position: absolute;
+  top: calc(100% + 2px); /* 显示在 .input-area 下方，留一点空隙 */
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 150px;
+  overflow-y: auto;
+  z-index: 10; /* 确保在其他元素之上 */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.suggestions-list li {
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.suggestions-list li:hover {
+  background-color: #f0f0f0;
+}
+
+.loading-small, .error-small {
+    font-size: 0.8em;
+    color: #666;
+    margin-top: 0.2rem;
+    position: absolute; /* 避免推开布局 */
+    bottom: -1.5em; /* 显示在输入框下方 */
+    left: 0;
+}
+.error-small {
+    color: red;
+}
+</style>

packages/frontend/src/components/TagList.vue

@@ -1,102 +0,0 @@
-<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

@@ -295,10 +295,13 @@
     },
      "status": {
       "never": "Never"
-    }
-  },
-  "settings": {
-    "title": "Settings",
+    },
+    "inputPlaceholder": "Type to search or create tags...",
+    "removeSelection": "Remove this tag selection",
+    "deleteTagGlobally": "Delete this tag globally"
+   },
+   "settings": {
+     "title": "Settings",
     "changePassword": {
       "title": "Change Password",
       "currentPassword": "Current Password:",

packages/frontend/src/locales/zh.json

@@ -298,10 +298,13 @@
     },
      "status": {
       "never": "从未"
-    }
-  },
-  "settings": {
-    "title": "设置",
+    },
+    "inputPlaceholder": "输入搜索或创建标签...",
+    "removeSelection": "移除此标签选择",
+    "deleteTagGlobally": "全局删除此标签"
+   },
+   "settings": {
+     "title": "设置",
     "changePassword": {
       "title": "修改密码",
       "currentPassword": "当前密码:",

packages/frontend/src/router/index.ts

@@ -26,16 +26,16 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/proxies',
     name: 'Proxies',
-    component: () => import('../views/ProxiesView.vue')
-  },
-  // 新增：标签管理页面
-  {
-    path: '/tags',
-    name: 'Tags',
-    component: () => import('../views/TagsView.vue')
-  },
-  // 工作区页面 (不再需要 connectionId 参数)
-  {
+     component: () => import('../views/ProxiesView.vue')
+   },
+   // 移除：标签管理页面路由
+   // {
+   //   path: '/tags',
+   //   name: 'Tags',
+   //   component: () => import('../views/TagsView.vue')
+   // },
+   // 工作区页面 (不再需要 connectionId 参数)
+   {
     path: '/workspace', // 移除动态路由段
     name: 'Workspace',
     component: () => import('../views/WorkspaceView.vue'),

packages/frontend/src/views/TagsView.vue

@@ -1,103 +0,0 @@
-<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>