增加插件管理的页面

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

@@ -0,0 +1,399 @@
+<template>
+  <el-drawer :visible.sync="dialogVisible" direction="rtl" size="50%" :wrapperClosable="false" :withHeader="false">
+    <!-- 自定义标题区域 -->
+    <div class="custom-header">
+      <div class="header-left">
+        <h3 class="bold-title">功能管理</h3>
+      </div>
+      <button class="custom-close-btn" @click="closeDialog">×</button>
+    </div>
+
+    <div class="function-manager">
+      <!-- 左侧：未选功能 -->
+      <div class="function-column">
+        <div class="column-header">
+          <h4 class="column-title">未选功能</h4>
+          <el-button type="text" @click="selectAll" class="select-all-btn">全选</el-button>
+        </div>
+        <div class="function-list">
+          <div v-for="func in unselected" :key="func.name" class="function-item" @click="handleFunctionClick(func)">
+            <el-checkbox :label="func.name" v-model="selectedNames" @change="(val) => handleCheckboxChange(func, val)" @click.native.stop>
+              <div class="func-tag">
+                <div class="color-dot" :style="{backgroundColor: getFunctionColor(func.name)}"></div>
+                <span>{{ func.name }}</span>
+              </div>
+            </el-checkbox>
+            <el-tooltip class="item" effect="dark" :content="func.description || '暂无功能描述'" placement="top">
+              <img src="@/assets/home/info.png" alt="" class="info-icon">
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间：已选功能 -->
+      <div class="function-column">
+        <div class="column-header">
+          <h4 class="column-title">已选功能</h4>
+          <el-button type="text" @click="deselectAll" class="select-all-btn">全选</el-button>
+        </div>
+        <div class="function-list">
+          <div v-for="func in selectedList" :key="func.name" class="function-item" @click="handleFunctionClick(func)">
+            <el-checkbox :label="func.name" v-model="selectedNames" @change="(val) => handleCheckboxChange(func, val)" @click.native.stop>
+              <div class="func-tag">
+                <div class="color-dot" :style="{backgroundColor: getFunctionColor(func.name)}"></div>
+                <span>{{ func.name }}</span>
+              </div>
+            </el-checkbox>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：参数配置 -->
+      <div class="params-column">
+        <h4 v-if="currentFunction" class="column-title">参数配置 - {{ currentFunction.name }}</h4>
+        <div v-if="currentFunction" class="params-container">
+          <el-form :model="currentFunction" size="mini" class="param-form">
+            <el-form-item v-for="(value, key) in currentFunction.params" :key="key" :label="key" class="param-item">
+              <el-input v-model="currentFunction.params[key]" size="mini" class="param-input" @change="(val) => handleParamChange(currentFunction, key, val)"/>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div v-else class="empty-tip">请选择已配置的功能进行参数设置</div>
+      </div>
+    </div>
+
+    <div class="drawer-footer">
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="saveSelection">保存配置</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    functions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.value,
+      selectedNames: [],
+      currentFunction: null,
+      modifiedFunctions: {},
+      allFunctions: [
+        {name: '天气', params: {city: '北京'}, description: '查看指定城市的天气情况'},
+        {name: '新闻', params: {type: '科技'}, description: '获取最新科技类新闻资讯'},
+        {name: '工具', params: {category: '常用'}, description: '提供常用工具集合'},
+        {name: '退出', params: {}, description: '退出当前系统'},
+        {name: '音乐', params: {genre: '流行'}, description: '播放流行音乐'},
+        {name: '翻译', params: {from: '中文', to: '英文'}, description: '提供中英文互译功能'},
+        {name: '计算', params: {precision: '2'}, description: '提供精确计算功能'},
+        {name: '日历', params: {view: '月'}, description: '查看月历视图'}
+      ],
+      functionColorMap: [
+        '#FF6B6B', '#4ECDC4', '#45B7D1',
+        '#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
+      ],
+      tempFunctions: {},
+      // 添加一个标志位来跟踪是否已经保存
+      hasSaved: false,
+    }
+  },
+  computed: {
+    selectedList() {
+      return this.allFunctions.filter(f => this.selectedNames.includes(f.name));
+    },
+    unselected() {
+      return this.allFunctions.filter(f => !this.selectedNames.includes(f.name));
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.dialogVisible = newVal;
+      if (newVal) {
+        this.selectedNames = this.functions.map(f => f.name);
+        this.currentFunction = this.selectedList[0] || null;
+      }
+    },
+    dialogVisible(newVal) {
+      this.$emit('input', newVal);
+    }
+  },
+  methods: {
+    handleFunctionClick(func) {
+      if (this.selectedNames.includes(func.name)) {
+        const tempFunc = this.tempFunctions[func.name];
+        this.currentFunction = tempFunc ? tempFunc : JSON.parse(JSON.stringify(func));
+      }
+    },
+    handleParamChange(func, key, value) {
+      if (!this.tempFunctions[func.name]) {
+        this.tempFunctions[func.name] = JSON.parse(JSON.stringify(func));
+      }
+      this.tempFunctions[func.name].params[key] = value;
+    },
+    handleCheckboxChange(func, checked) {
+      if (checked) {
+        if (!this.selectedNames.includes(func.name)) {
+          this.selectedNames = [...this.selectedNames, func.name];
+        }
+      } else {
+        this.selectedNames = this.selectedNames.filter(name => name !== func.name);
+      }
+
+      if (this.currentFunction && this.currentFunction.name === func.name && !checked) {
+        this.currentFunction = null;
+      }
+    },
+
+    selectAll() {
+      this.selectedNames = [...this.allFunctions.map(f => f.name)];
+      if (this.selectedList.length > 0) {
+        this.currentFunction = JSON.parse(JSON.stringify(this.selectedList[0]));
+      }
+    },
+
+    deselectAll() {
+      this.selectedNames = [];
+      this.currentFunction = null;
+    },
+
+    closeDialog() {
+      this.tempFunctions = {};
+      this.selectedNames = this.functions.map(f => f.name);
+      this.currentFunction = null;
+      this.dialogVisible = false;
+      this.$emit('input', false);
+      this.$emit('dialog-closed', false);
+    },
+
+    saveSelection() {
+      Object.keys(this.tempFunctions).forEach(name => {
+        this.modifiedFunctions[name] = JSON.parse(JSON.stringify(this.tempFunctions[name]));
+      });
+      this.tempFunctions = {};
+      this.hasSaved = true;
+
+      const selected = this.selectedList.map(f => {
+        const modified = this.modifiedFunctions[f.name];
+        return modified || f;
+      }).map(f => ({
+        ...f,
+        params: JSON.parse(JSON.stringify(f.params))
+      }));
+
+      this.$emit('update-functions', selected);
+      this.dialogVisible = false;
+      this.$message.success('配置保存成功');
+      // 通知父组件对话框已关闭且已保存
+      this.$emit('dialog-closed', true);
+    },
+
+    getFunctionColor(name) {
+      const hash = [...name].reduce((acc, char) => acc + char.charCodeAt(0), 0);
+      return this.functionColorMap[hash % 7];
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.function-manager {
+  display: grid;
+  grid-template-columns: minmax(120px, 0.5fr) minmax(120px, 0.5fr) minmax(200px, 2fr);
+  gap: 12px;
+  height: calc(70vh - 60px);
+}
+
+.custom-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #EBEEF5;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .bold-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .select-all-btn {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+  }
+}
+
+.function-column {
+  position: relative;
+  width: auto;
+  padding: 10px;
+  overflow-y: auto;
+  border-right: 1px solid #EBEEF5;
+  scrollbar-width: none;
+}
+
+.function-column::-webkit-scrollbar {
+  display: none;
+}
+
+.function-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.function-item {
+  padding: 8px 12px;
+  margin: 4px 0;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
+
+.params-column {
+  min-width: 280px;
+  padding: 10px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.params-column::-webkit-scrollbar {
+  display: none;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.column-title {
+  text-align: center;
+  width: 100%;
+}
+
+.func-tag {
+  display: flex;
+  align-items: center;
+}
+
+.color-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  border-radius: 50%;
+}
+
+.param-form {
+  ::v-deep .el-form-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .el-form-item__label {
+      font-size: 14px !important;
+      color: #606266;
+      text-align: left;
+      padding-right: 10px;
+      flex-shrink: 0;
+      width: auto !important;
+    }
+
+    .el-form-item__content {
+      margin-left: 0 !important;
+      flex-grow: 1;
+
+      .el-input__inner {
+        text-align: left;
+        padding-left: 8px;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.params-container {
+  padding: 16px;
+  border-radius: 4px;
+  min-width: 280px;
+}
+
+.empty-tip {
+  padding: 20px;
+  color: #909399;
+  text-align: center;
+}
+
+.param-input {
+  width: 100%;
+}
+
+.drawer-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: center;
+  background: #fff;
+}
+
+.info-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 1vh;
+}
+
+.custom-close-btn {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  border: 2px solid #cfcfcf;
+  background: none;
+  font-size: 30px;
+  font-weight: lighter;
+  color: #cfcfcf;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  padding: 0;
+  outline: none;
+  transition: all 0.3s;
+}
+
+.custom-close-btn:hover {
+  color: #409EFF;
+  border-color: #409EFF;
+}
+
+</style>

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

@@ -60,10 +60,31 @@
                   <div class="form-column">
                     <el-form-item v-for="(model, index) in models" :key="`model-${index}`" :label="model.label"
                       class="model-item">
-                      <el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="form-select">
-                        <el-option v-for="(item, optionIndex) in modelOptions[model.type]"
-                          :key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value" />
-                      </el-select>
+                      <div class="model-select-wrapper">
+                        <el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="form-select" @change="handleModelChange(model.type, $event)">
+                          <el-option v-for="(item, optionIndex) in modelOptions[model.type]" :key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value"/>
+                        </el-select>
+                          <div v-if="showFunctionIcons(model.type)" class="function-icons">
+                            <el-tooltip v-for="func in currentFunctions" :key="func.name" effect="dark" placement="top" popper-class="custom-tooltip">
+                              <div slot="content">
+                                <div><strong>功能名称:</strong> {{ func.name }}</div>
+                                <div v-if="Object.keys(func.params).length > 0">
+                                  <strong>参数配置:</strong>
+                                  <div v-for="(value, key) in func.params" :key="key">
+                                    {{ key }}: {{ value }}
+                                  </div>
+                                </div>
+                                <div v-else>无参数配置</div>
+                              </div>
+                              <div class="icon-dot" :style="{backgroundColor: getFunctionColor(func.name)}">
+                                {{ func.name.charAt(0) }}
+                              </div>
+                            </el-tooltip>
+                            <el-button class="edit-function-btn" @click="showFunctionDialog = true" :class="{'active-btn': showFunctionDialog}">
+                              编辑功能
+                            </el-button>
+                          </div>
+                      </div>
                     </el-form-item>
                     <el-form-item label="角色音色：">
                       <el-select v-model="form.ttsVoiceId" placeholder="请选择" class="form-select">
@@ -75,21 +96,23 @@
                 </div>
               </div>
             </el-form>
-
           </el-card>
         </div>
       </div>
     </div>
+
+    <function-dialog v-model="showFunctionDialog" :functions="currentFunctions" @update-functions="handleUpdateFunctions"  @dialog-closed="handleDialogClosed"/>
   </div>
 </template>
 
 <script>
 import Api from '@/apis/api';
 import HeaderBar from "@/components/HeaderBar.vue";
+import FunctionDialog from "@/components/FunctionDialog.vue";
 
 export default {
   name: 'RoleConfigPage',
-  components: { HeaderBar },
+  components: { HeaderBar, FunctionDialog },
   data() {
     return {
       form: {
@@ -121,6 +144,18 @@ export default {
       templates: [],
       loadingTemplate: false,
       voiceOptions: [],
+      showFunctionDialog: false,
+      currentFunctions: [],
+      functionColorMap: [
+        '#FF6B6B', '#4ECDC4', '#45B7D1',
+        '#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
+      ],
+      allFunctions: [
+        { name: '天气', params: {} },
+        { name: '新闻', params: {} },
+        { name: '工具', params: {} },
+        { name: '退出', params: {} }
+      ]
     }
   },
   methods: {
@@ -141,7 +176,8 @@ export default {
         systemPrompt: this.form.systemPrompt,
         langCode: this.form.langCode,
         language: this.form.language,
-        sort: this.form.sort
+        sort: this.form.sort,
+        functions: this.currentFunctions
       };
       Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
         if (data.code === 0) {
@@ -180,12 +216,12 @@ export default {
             intentModelId: "",
           }
         }
+        this.currentFunctions = [];
         this.$message.success({
           message: '配置已重置',
           showClose: true
         })
-      }).catch(() => {
-      });
+      }).catch(() => {});
     },
     fetchTemplates() {
       Api.agent.getAgentTemplate(({ data }) => {
@@ -247,6 +283,7 @@ export default {
               intentModelId: data.data.intentModelId
             }
           };
+          this.currentFunctions = data.data.functions || [];
         } else {
           this.$message.error(data.msg || '获取配置失败');
         }
@@ -281,7 +318,43 @@ export default {
           this.voiceOptions = [];
         }
       });
-    }
+    },
+    getFunctionColor(name) {
+      const hash = [...name].reduce((acc, char) => acc + char.charCodeAt(0), 0);
+      return this.functionColorMap[hash % 7];
+    },
+    showFunctionIcons(type) {
+      return type === 'Intent' &&
+        this.form.model.intentModelId === 'Intent_function_call';
+    },
+    handleModelChange(type, value) {
+      if (type === 'Intent' && value === 'Intent_function_call') {
+        this.fetchFunctionList();
+      }
+    },
+    fetchFunctionList() {
+      // 使用假数据代替API调用
+      return new Promise(resolve => {
+        setTimeout(() => {
+          this.currentFunctions = [
+            { name: '天气', params: { city: '北京' } },
+            { name: '新闻', params: { type: '科技' } }
+          ];
+          resolve();
+        }, 500);
+      });
+    },
+    handleUpdateFunctions(selected) {
+      this.currentFunctions = selected;
+      console.log('保存的功能列表:', selected);
+      this.$message.success('功能配置已保存');
+    },
+    handleDialogClosed(saved) {
+      if (!saved) {
+        // 如果未保存，恢复原始功能列表
+        this.currentFunctions = JSON.parse(JSON.stringify(this.originalFunctions));
+      }
+    },
   },
   watch: {
     'form.model.ttsModelId': {
@@ -308,6 +381,9 @@ export default {
     const agentId = this.$route.query.agentId;
     if (agentId) {
       this.fetchAgentConfig(agentId);
+      this.fetchFunctionList().then(() => {
+        this.originalFunctions = JSON.parse(JSON.stringify(this.currentFunctions));
+      });
     }
     this.fetchModelOptions();
     this.fetchTemplates();
@@ -510,6 +586,33 @@ export default {
   height: 19px;
 }
 
+.model-select-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.function-icons {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  padding-left: 10px;
+}
+
+.icon-dot {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 12px;
+  margin-right: 8px;
+  position: relative;
+}
+
 ::v-deep .el-form-item__label {
   font-size: 10px !important;
   color: #3d4566 !important;
@@ -552,4 +655,19 @@ export default {
   color: #409EFF;
   border-color: #409EFF;
 }
+
+.edit-function-btn {
+  background: #e6ebff;
+  color: #5778ff;
+  border: 1px solid #adbdff;
+  border-radius: 18px;
+  padding: 10px 20px;
+  transition: all 0.3s;
+}
+
+.edit-function-btn.active-btn {
+  background: #5778ff;
+  color: white;
+}
+
 </style>