feat: 在对话 智能体中心 标签位置 新增 全部 按钮

public/i18n/lang-en.json

@@ -225,6 +225,8 @@
 
     "online_search": "Online search",
 
+    "tag_all": "All",
+
     "copy": "Copy"
   }
 }

public/i18n/lang-zh.json

@@ -227,6 +227,8 @@
 
     "online_search": "联网搜索",
 
+    "tag_all": "全部",
+
     "copy": "复制"
   }
 }

src/modules/conversation-board/BoardTags.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="conversation-board-tags">
+    <div class="board-tag" :class="{ 'is-active': is_all }" @click="handleClickAll">
+      <span>{{ $t('conversation.tag_all') }}</span>
+    </div>
+
     <div
       v-for="(item, index) of list_labels"
       class="board-tag"
@@ -13,28 +17,52 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
 import useTagList from './use-tag-list';
 
+/**
+ * 单选版本
+ * 在V0的基础上，新增了一个 全部 按钮
+ */
+
 const emits = defineEmits(['change']);
 
 const current_id = ref('');
 
+// 是否是所有
+// 当前未选中任何标签，即为所有
+const is_all = computed(() => {
+  return !current_id.value;
+});
+
+/**
+ * 选择标签的某一项
+ * @param item
+ */
 const handleClick = (item) => {
   const target_id = item.labelId;
 
   if (target_id === current_id.value) {
-    // 已经选中了
+    // 已经选中了: 取消选中
     current_id.value = '';
   } else {
-    // 没有选中
+    // 没有选中: 选中操作
     current_id.value = target_id;
   }
 
   emits('change', current_id.value);
 };
 
+/**
+ * 选择所有
+ */
+const handleClickAll = () => {
+  current_id.value = '';
+
+  emits('change', current_id.value);
+};
+
 const { getTagList, api_status, api_message, list_labels } = useTagList();
 
 onMounted(() => {

src/modules/conversation-board/BoardTagsV0.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="conversation-board-tags">
+    <div
+      v-for="(item, index) of list_labels"
+      class="board-tag"
+      :class="{ 'is-active': item.labelId === current_id }"
+      :key="item.labelId"
+      @click="handleClick(item)"
+    >
+      <span>{{ item.labelName }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+import useTagList from './use-tag-list';
+
+/**
+ * 此组件为初期实现版本
+ * 没有 全部 按钮
+ * 仅可在已有的标签中点击任意一个进行选择
+ */
+
+const emits = defineEmits(['change']);
+
+const current_id = ref('');
+
+const handleClick = (item) => {
+  const target_id = item.labelId;
+
+  if (target_id === current_id.value) {
+    // 已经选中了
+    current_id.value = '';
+  } else {
+    // 没有选中
+    current_id.value = target_id;
+  }
+
+  emits('change', current_id.value);
+};
+
+const { getTagList, api_status, api_message, list_labels } = useTagList();
+
+onMounted(() => {
+  getTagList();
+});
+</script>
+
+<style lang="css" scoped>
+.conversation-board-tags {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+.conversation-board-tags .board-tag {
+  margin-left: 5px;
+  margin-right: 5px;
+
+  cursor: pointer;
+
+  padding: 10px;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  border-radius: 8px;
+
+  background-color: var(--color-bg-1);
+  color: var(--color-text-1);
+}
+
+.conversation-board-tags .board-tag.is-active {
+  background-color: rgb(var(--primary-6));
+  color: #fff;
+}
+</style>