Merge pull request #2977 from xinnan-tech/role-tag

新增角色标签配置

main/manager-web/src/apis/module/agent.js

@@ -398,4 +398,35 @@ export default {
                 });
             }).send();
     },
+    // 获取智能体标签
+    getAgentTags(agentId, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/agent/${agentId}/tags`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .networkFail(() => {
+                RequestService.reAjaxFun(() => {
+                    this.getAgentTags(agentId, callback);
+                });
+            }).send();
+    },
+    // 保存智能体标签
+    saveAgentTags(agentId, tags, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/agent/${agentId}/tags`)
+            .method('PUT')
+            .data(tags)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .networkFail(() => {
+                RequestService.reAjaxFun(() => {
+                    this.saveAgentTags(agentId, tags, callback);
+                });
+            }).send();
+    },
 }

main/manager-web/src/components/AddWisdomBodyDialog.vue

@@ -14,7 +14,7 @@
         <div style="color: red;display: inline-block;">*</div> {{ $t('addAgentDialog.agentName') }}：
       </div>
       <div class="input-46" style="margin-top: 12px;">
-        <el-input ref="inputRef" :placeholder="$t('addAgentDialog.placeholder')" v-model="wisdomBodyName" @keyup.enter.native="confirm" />
+        <el-input maxLength="64" ref="inputRef" :placeholder="$t('addAgentDialog.placeholder')" v-model="wisdomBodyName" @keyup.enter.native="confirm" />
       </div>
     </div>
     <div style="display: flex;margin: 15px 15px;gap: 7px;">

main/manager-web/src/components/DeviceItem.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="device-item">
     <div style="display: flex;justify-content: space-between;">
-      <div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
+    <el-tooltip :content="device.agentName" placement="top" effect="light">
+      <div class="device-item-title">
         {{ device.agentName }}
       </div>
+    </el-tooltip>
       <div>
         <img src="@/assets/home/delete.png" alt="" style="width: 18px;height: 18px;margin-right: 10px;"
           @click.stop="handleDelete" />
-        <el-tooltip class="item" effect="dark" :content="device.systemPrompt" placement="top"
+        <el-tooltip class="item" effect="light" :content="device.systemPrompt" placement="top"
           popper-class="custom-tooltip">
           <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
         </el-tooltip>
@@ -39,6 +41,11 @@
     </div>
     <div class="version-info">
       <div>{{ $t('home.lastConversation') }}：{{ formattedLastConnectedTime }}</div>
+      <div ref="scrollRef" class="version-info-scroll">
+        <div ref="tagsRef" class="version-info-tags">
+          <el-tag v-for="(tag, index) in tags" :key="index" size="mini">{{ tag }}</el-tag>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -81,6 +88,10 @@ export default {
       } else {
         return this.device.lastConnectedAt;
       }
+    },
+    tags() {
+      if (!this.device.tags) return [];
+      return this.device.tags.map((tag) => tag.tagName);
     }
   },
   methods: {
@@ -102,16 +113,45 @@ export default {
       }
       this.$emit('chat-history', { agentId: this.device.agentId, agentName: this.device.agentName })
     }
+  },
+  watch: {
+    tags: {
+      handler(newTags) {
+        if (newTags.length === 0) return;
+        this.$nextTick(() => {
+          const scrollWidth = this.$refs.scrollRef.clientWidth;
+          const tagsWidth = this.$refs.tagsRef.clientWidth;
+          if (tagsWidth < scrollWidth) {
+            this.$refs.tagsRef.style.width = '100%';
+            this.$refs.tagsRef.style.justifyContent = 'flex-end';
+          } else {
+            this.$refs.tagsRef.style.width = 'fit-content';
+            this.$refs.tagsRef.style.justifyContent = 'flex-start';
+          }
+        })
+      },
+      immediate: true
+    }
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .device-item {
   width: 342px;
   border-radius: 20px;
   background: #fafcfe;
-  padding: 22px;
+  padding: 22px 22px 14px;
   box-sizing: border-box;
+  &-title {
+    flex: 1;
+    font-weight: bold;
+    font-size: 18px;
+    color: #3d4566;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
 .device-name {
@@ -142,6 +182,42 @@ export default {
   font-size: 12px;
   color: #979db1;
   font-weight: 400;
+  > div {
+    &:first-of-type {
+      margin-top: 5px;
+    }
+  }
+  &-scroll {
+    height: 26px;
+    margin-left: 20px;
+    flex: 1;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    &::-webkit-scrollbar {
+      height: 6px;
+      background: #e6ebff;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #409EFF;
+      border-radius: 8px;
+    }
+  }
+  &-tags {
+    width: fit-content;
+    display: flex;
+    gap: 6px;
+  }
+}
+
+.more-tag {
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.all-tags-popover {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
 }
 
 .disabled-btn {

main/manager-web/src/components/TtsModel.vue

@@ -71,8 +71,14 @@
                     {{ $t('ttsModel.delete') }}
                   </el-button>
               </template>
-              <el-button v-else type="success" size="mini" @click="saveEdit(scope.row)" class="save-Tts">{{ $t('ttsModel.save') }}
+              <template v-else>
+                <el-button type="success" size="mini" @click="cancelEdit(scope.row)" class="save-Tts">
+                  {{ $t('button.cancel') }}
                 </el-button>
+                <el-button type="success" size="mini" @click="saveEdit(scope.row)" class="save-Tts">
+                  {{ $t('ttsModel.save') }}
+                </el-button>
+              </template>
             </template>
           </el-table-column>
         </el-table>
@@ -340,6 +346,17 @@ export default {
       this.$set(row, 'originalData', { ...row });
     },
 
+    cancelEdit(row) {
+      // 通过新增创建的数据，取消编辑时，需要从数组中移除
+      if (!row.id) {
+        this.ttsModels.shift(row);
+      } else {
+        Object.assign(row, row.originalData);
+        delete row.originalData;
+      }
+      row.editing = false;
+    },
+
     saveEdit(row) {
       if (!row.voiceCode || !row.voiceName || !row.languageType) {
         this.$message.error({
@@ -447,7 +464,7 @@ export default {
         referenceText: '',
         selected: false,
         editing: true,
-        sort: maxSort + 1
+        sort: 0 // 新增数据默认排序在顶部
       };
 
       this.ttsModels.unshift(newRow);

main/manager-web/src/i18n/de.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': 'Systemfunktionsverwaltung',
   'header.changePassword': 'Passwort ändern',
   'header.logout': 'Abmelden',
-  'header.searchPlaceholder': 'Namen oder MAC suchen',
+  'header.searchPlaceholder': 'Name, Tag oder Mac-Suche',
 
   // McpToolCallDialog component text
   'mcpToolCall.title': 'Werkzeugaufruf',
@@ -747,6 +747,7 @@ export default {
 
   // Role configuration page text
   'roleConfig.title': 'Rollenkonfiguration',
+  'roleConfig.addTag': 'Neues Label hinzufügen',
   'roleConfig.restartNotice': 'Nach dem Speichern der Konfiguration müssen Sie das Gerät neu starten, damit die neue Konfiguration wirksam wird.',
   'roleConfig.saveConfig': 'Konfiguration speichern',
   'roleConfig.reset': 'Zurücksetzen',

main/manager-web/src/i18n/en.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': 'System Feature Management',
   'header.changePassword': 'Change Password',
   'header.logout': 'Logout',
-  'header.searchPlaceholder': 'Search name or mac',
+  'header.searchPlaceholder': 'Name, tag or MAC search',
 
   // McpToolCallDialog component text
   'mcpToolCall.title': 'Tool Call',
@@ -747,6 +747,7 @@ export default {
 
   // Role configuration page text
   'roleConfig.title': 'Role Configuration',
+  'roleConfig.addTag': 'Add New Tag',
   'roleConfig.restartNotice': 'After saving the configuration, you need to restart the device for the new configuration to take effect.',
   'roleConfig.saveConfig': 'Save Configuration',
   'roleConfig.reset': 'Reset',

main/manager-web/src/i18n/pt_BR.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': 'Gerenciamento de Funcionalidades do Sistema',
   'header.changePassword': 'Alterar Senha',
   'header.logout': 'Sair',
-  'header.searchPlaceholder': 'Pesquisar nome ou MAC',
+  'header.searchPlaceholder': 'Nome, tag ou pesquisa no Mac',
 
   // Texto do componente McpToolCallDialog
   'mcpToolCall.title': 'Chamada de Ferramenta',
@@ -747,6 +747,7 @@ export default {
 
   // Página de configuração de papel
   'roleConfig.title': 'Configuração de Papel',
+  'roleConfig.addTag': 'Adicionar Novo Rótulo',
   'roleConfig.restartNotice': 'Após salvar a configuração, é necessário reiniciar o dispositivo para que a nova configuração tenha efeito.',
   'roleConfig.saveConfig': 'Salvar Configuração',
   'roleConfig.reset': 'Redefinir',

main/manager-web/src/i18n/vi.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': 'Cấu hình chức năng hệ thống',
   'header.changePassword': 'Đổi mật khẩu',
   'header.logout': 'Đăng xuất',
-  'header.searchPlaceholder': 'Tìm tên hoặc MAC',
+  'header.searchPlaceholder': 'Tên, thẻ hoặc tìm kiếm mac',
 
   // McpToolCallDialog component text
   'mcpToolCall.title': 'Gọi công cụ',
@@ -747,6 +747,7 @@ export default {
 
   // Role configuration page text
   'roleConfig.title': 'Vai trò',
+  'roleConfig.addTag': 'Thêm mới nhãn',
   'roleConfig.restartNotice': 'Sau khi lưu cấu hình, bạn cần khởi động lại thiết bị để cấu hình mới có hiệu lực.',
   'roleConfig.saveConfig': 'Lưu cấu hình',
   'roleConfig.reset': 'Đặt lại',

main/manager-web/src/i18n/zh_CN.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': '系统功能配置',
   'header.changePassword': '修改密码',
   'header.logout': '退出登录',
-  'header.searchPlaceholder': '输入名称或mac搜索',
+  'header.searchPlaceholder': '名称、标签或mac搜索',
 
   // McpToolCallDialog组件文本
   'mcpToolCall.title': '工具调用',
@@ -747,6 +747,7 @@ export default {
 
   // 角色配置页面文本
   'roleConfig.title': '角色配置',
+  'roleConfig.addTag': '添加新标签',
   'roleConfig.restartNotice': '保存配置后，需要重启设备，新的配置才会生效。',
   'roleConfig.saveConfig': '保存配置',
   'roleConfig.reset': '重置',

main/manager-web/src/i18n/zh_TW.js

@@ -25,7 +25,7 @@ export default {
   'header.featureManagement': '系統功能配置',
   'header.changePassword': '修改密碼',
   'header.logout': '退出登錄',
-  'header.searchPlaceholder': '輸入名稱或mac搜索',
+  'header.searchPlaceholder': '名稱、標籤或mac搜索',
 
   // McpToolCallDialog组件文本
   'mcpToolCall.title': '工具調用',
@@ -747,6 +747,7 @@ export default {
 
   // 角色配置頁面文本
   'roleConfig.title': '角色配置',
+  'roleConfig.addTag': '添加新標籤',
   'roleConfig.restartNotice': '保存配置後，需要重啟設備，新的配置才會生效。',
   'roleConfig.saveConfig': '保存配置',
   'roleConfig.reset': '重置',

main/manager-web/src/styles/global.scss

@@ -20,3 +20,13 @@ select:-webkit-autofill:focus {
 .el-icon-video-play, .el-icon-video-pause { 
   font-size: 18px !important;
 }
+
+.is-light {
+  border: 1px solid #e4e7ed !important;
+  color: #595959;
+  font-size: 14px;
+  background: #fafcfe !important;
+  .popper__arrow {
+    border-top-color: #e4e7ed !important;
+   }
+}

main/manager-web/src/views/roleConfig.vue

@@ -11,10 +11,34 @@
         <div class="content-area">
           <el-card class="config-card" shadow="never">
             <div class="config-header">
-              <div class="header-icon">
+              <div class="header-left">
-                <img loading="lazy" src="@/assets/home/setting-user.png" alt="" />
+                <div class="header-icon">
+                  <img loading="lazy" src="@/assets/home/setting-user.png" alt="" />
+                </div>
+                <span class="header-title">{{ form.agentName }}</span>
+              </div>
+              <div class="header-tags">
+                <el-tag
+                  v-for="tag in dynamicTags"
+                  :key="tag.id"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleClose(tag.id)">
+                  {{tag.tagName}}
+                </el-tag>
+                <el-input
+                  class="input-new-tag"
+                  v-if="inputVisible"
+                  v-model="inputValue"
+                  ref="saveTagInput"
+                  size="small"
+                  maxLength="64"
+                  @keyup.enter.native="handleInputConfirm"
+                  @blur="handleInputConfirm"
+                >
+                </el-input>
+                <el-button v-else size="small" @click="showInput">+ {{ $t("roleConfig.addTag") }}</el-button>
               </div>
-              <span class="header-title">{{ form.agentName }}</span>
               <div class="header-actions">
                 <div class="hint-text">
                   <img loading="lazy" src="@/assets/home/info.png" alt="" />
@@ -39,7 +63,7 @@
                       <el-input
                         v-model="form.agentName"
                         class="form-input"
-                        maxlength="10"
+                        maxlength="64"
                       />
                     </el-form-item>
                     <el-form-item :label="$t('roleConfig.roleTemplate') + '：'">
@@ -362,13 +386,23 @@ export default {
         vad: false, // 语言检测活动功能状态
         asr: false, // 语音识别功能状态
       },
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: ''
     };
   },
   methods: {
     goToHome() {
       this.$router.push("/home");
     },
-    saveConfig() {
+    async saveConfig() {
+      try {
+        await this.handleSaveAgentTags(this.$route.query.agentId);
+      } catch (error) {
+        console.error('保存标签失败:', error);
+        return;
+      }
+
       const configData = {
         agentCode: this.form.agentCode,
         agentName: this.form.agentName,
@@ -407,6 +441,7 @@ export default {
           });
         }
       });
+      
     },
     resetConfig() {
       this.$confirm(i18n.t("roleConfig.confirmReset"), i18n.t("message.info"), {
@@ -435,6 +470,7 @@ export default {
               intentModelId: "",
             },
           };
+          this.dynamicTags = [];
           this.currentFunctions = [];
           this.$message.success({
             message: i18n.t("roleConfig.resetSuccess"),
@@ -1010,6 +1046,45 @@ export default {
         console.error("加载功能状态失败:", error);
       }
     },
+    handleClose(id) {
+      this.dynamicTags = this.dynamicTags.filter((item) => item.id !== id);
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        const tag = { id: new Date().getTime(), tagName: inputValue };
+        this.dynamicTags.push(tag);
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+    getAgentTags(agentId) {
+      Api.agent.getAgentTags(agentId, ({ data }) => {
+        if (data.code === 0) {
+          this.dynamicTags = data.data || [];
+        }
+      });
+    },
+    handleSaveAgentTags(agentId) {
+      return new Promise((resolve, reject) => {
+        const tagNames = this.dynamicTags.map(tag => tag.tagName);
+        Api.agent.saveAgentTags(agentId, { tagNames }, ({ data }) => {
+          if (data.code === 0) {
+            resolve();
+          } else {
+            reject(data.msg);
+          }
+        });
+      });
+    }
   },
   watch: {
     "form.model.ttsModelId": {
@@ -1036,6 +1111,7 @@ export default {
     const agentId = this.$route.query.agentId;
     if (agentId) {
       this.fetchAgentConfig(agentId);
+      this.getAgentTags(agentId);
       this.fetchAllFunctions();
     }
     this.fetchModelOptions();
@@ -1046,7 +1122,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .welcome {
   min-width: 900px;
   height: 100vh;
@@ -1123,6 +1199,48 @@ export default {
   font-weight: 700;
   font-size: 19px;
   color: #3d4566;
+  justify-content: space-between;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  flex-shrink: 0;
+}
+
+.header-tags {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  &::-webkit-scrollbar {
+      height: 6px;
+      background: #e6ebff;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #409EFF;
+      border-radius: 8px;
+    }
+}
+
+.header-tags .el-tag {
+  flex-shrink: 0;
+}
+
+.more-tag {
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.all-tags-popover {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px;
 }
 
 .header-icon {
@@ -1411,4 +1529,10 @@ export default {
     text-decoration: underline;
   }
 }
+.input-new-tag {
+  width: 90px;
+  &::v-deep(.el-input__inner) {
+    width: 90px !important;
+  }
+}
 </style>