From 7222893120a10cabedd54fbcc9600bce8442f2c3 Mon Sep 17 00:00:00 2001
From: wanghanlin <1533525126@qq.com>
Date: Fri, 14 Aug 2026 17:06:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(role):=20=E5=AE=A2=E6=9C=8D=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E7=AE=A1=E7=90=86=E9=A1=B5=E5=B8=83=E5=B1=80=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B9=B6=E6=94=AF=E6=8C=81=20MCP=20=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=85=A8=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/RoleManager.vue | 196 +++++++++++++++++++++++++----
 1 file changed, 171 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/RoleManager.vue b/frontend/src/views/RoleManager.vue
index a2dbeee..cb87163 100644
--- a/frontend/src/views/RoleManager.vue
+++ b/frontend/src/views/RoleManager.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card title="🎭 客服角色管理" :bordered="false">
+  <t-card title="🎭 客服角色管理" :bordered="false" class="role-page-card">
     <p class="desc-text">为角色设定人设并授权可检索的知识库分类。对话页只能选择这里配置好的角色，检索范围由服务端按角色强制限定。</p>
 
     <div class="role-shell">
@@ -77,20 +77,20 @@
 
           <t-form label-align="top" class="detail-form">
             <t-row :gutter="16">
-              <t-col :span="8">
+              <t-col :span="6" :xs="12">
                 <t-form-item label="角色名称 *">
                   <t-input v-model="form.name" :disabled="saving" placeholder="请输入角色名称" />
                 </t-form-item>
               </t-col>
-              <t-col :span="4">
-                <t-form-item label="状态">
-                  <t-switch v-model="form.enabled" :disabled="saving" :label="['启用', '停用']" />
+              <t-col :span="6" :xs="12">
+                <t-form-item label="职责描述">
+                  <t-input v-model="form.description" :disabled="saving" placeholder="职责描述（可选）" />
                 </t-form-item>
               </t-col>
             </t-row>
 
-            <t-form-item label="职责描述">
-              <t-input v-model="form.description" :disabled="saving" placeholder="职责描述（可选）" />
+            <t-form-item label="状态">
+              <t-switch v-model="form.enabled" :disabled="saving" :label="['启用', '停用']" />
             </t-form-item>
 
             <t-form-item label="人设 / 风格提示词">
@@ -102,6 +102,8 @@
               />
             </t-form-item>
 
+            <div class="form-section-title">授权配置</div>
+
             <t-form-item label="可检索知识库授权">
               <t-checkbox-group v-if="categoryStore.categories.length" v-model="form.categoryIds">
                 <t-checkbox
@@ -125,24 +127,43 @@
                   全部授权（允许调用所有已接入的 MCP 工具）
                 </t-checkbox>
                 <t-loading size="small" :loading="mcpLoading">
-                  <t-checkbox-group
-                    v-if="!allToolsSelected && mcpServers.length"
-                    v-model="form.allowedMcpTools"
-                    class="mcp-tools-list"
-                  >
-                    <div v-for="s in mcpServers" :key="s.configId" class="mcp-server-group">
-                      <div class="mcp-server-name">{{ s.serverName }}</div>
+                  <template v-if="!allToolsSelected && mcpServers.length">
+                    <div class="mcp-tools-toolbar">
                       <t-checkbox
-                        v-for="t in s.tools"
-                        :key="t.name"
-                        :value="t.name"
+                        :checked="allToolsChecked"
+                        :indeterminate="allToolsIndeterminate"
                         :disabled="saving"
+                        @change="toggleAllTools"
                       >
-                        <span class="mcp-tool-label">{{ t.rawName }}</span>
-                        <span v-if="t.description" class="mcp-tool-desc"> — {{ t.description }}</span>
+                        全选工具
                       </t-checkbox>
                     </div>
-                  </t-checkbox-group>
+                    <div class="mcp-tools-list">
+                      <div v-for="s in mcpServers" :key="s.configId" class="mcp-server-group">
+                        <div class="mcp-server-header">
+                          <span class="mcp-server-name">{{ s.serverName }}</span>
+                          <t-checkbox
+                            :checked="isGroupAllChecked(s)"
+                            :indeterminate="isGroupIndeterminate(s)"
+                            :disabled="saving"
+                            @change="(val) => toggleGroupAll(s, val)"
+                          >
+                            全选
+                          </t-checkbox>
+                        </div>
+                        <t-checkbox
+                          v-for="t in s.tools"
+                          :key="t.name"
+                          :checked="form.allowedMcpTools.includes(t.name)"
+                          :disabled="saving"
+                          @change="(val) => toggleTool(t.name, val)"
+                        >
+                          <span class="mcp-tool-label">{{ t.rawName }}</span>
+                          <span v-if="t.description" class="mcp-tool-desc"> — {{ t.description }}</span>
+                        </t-checkbox>
+                      </div>
+                    </div>
+                  </template>
                   <span v-else-if="!allToolsSelected && !mcpServers.length && !mcpLoading" class="desc-text">
                     暂无已接入的 MCP 工具，请先在「MCP 服务管理」中配置并启用 Server
                   </span>
@@ -230,12 +251,88 @@ const isDirty = computed(() => takeSnapshot() !== snapshot.value)
 
 // ---- 计算属性 ----
 const selectedRole = computed(() => roles.value.find(r => r.id === selectedId.value) ?? null)
-// 「全部授权」复选框：以 ["*"] 表示全部，取消则清空
+// 勾选「全部授权」前暂存已选工具，取消时恢复
+let lastToolsBeforeAll: string[] = []
+
+// 「全部授权」复选框：以 ["*"] 表示全部，取消则恢复之前的勾选
 const allToolsSelected = computed<boolean>({
   get: () => form.allowedMcpTools.includes('*'),
-  set: (val) => { form.allowedMcpTools = val ? ['*'] : [] },
+  set: (val) => {
+    if (val) {
+      lastToolsBeforeAll = form.allowedMcpTools.filter(t => t !== '*')
+      form.allowedMcpTools = ['*']
+    } else {
+      form.allowedMcpTools = [...lastToolsBeforeAll]
+    }
+  },
 })
 
+// ---- MCP 工具全选 ----
+// 所有工具名（扁平、去重）
+const allToolNames = computed<string[]>(() => {
+  const names = new Set<string>()
+  for (const s of mcpServers.value) {
+    for (const t of (s.tools || [])) {
+      names.add(t.name)
+    }
+  }
+  return [...names]
+})
+
+// 全局全选：所有工具是否都已勾选
+const allToolsChecked = computed<boolean>(() => {
+  const names = allToolNames.value
+  return names.length > 0 && names.every(n => form.allowedMcpTools.includes(n))
+})
+
+// 全局半选：部分工具已勾选
+const allToolsIndeterminate = computed<boolean>(() => {
+  const names = allToolNames.value
+  const selected = names.filter(n => form.allowedMcpTools.includes(n)).length
+  return selected > 0 && selected < names.length
+})
+
+function toggleAllTools(val: boolean): void {
+  if (val) {
+    form.allowedMcpTools = [...new Set([...form.allowedMcpTools, ...allToolNames.value])]
+  } else {
+    const nameSet = new Set(allToolNames.value)
+    form.allowedMcpTools = form.allowedMcpTools.filter(n => !nameSet.has(n))
+  }
+}
+
+// 单个 Server 分组是否全选
+function isGroupAllChecked(group: any): boolean {
+  const tools = group.tools || []
+  return tools.length > 0 && tools.every((t: any) => form.allowedMcpTools.includes(t.name))
+}
+
+// 单个 Server 分组是否半选
+function isGroupIndeterminate(group: any): boolean {
+  const tools = group.tools || []
+  const selected = tools.filter((t: any) => form.allowedMcpTools.includes(t.name)).length
+  return selected > 0 && selected < tools.length
+}
+
+function toggleGroupAll(group: any, val: boolean): void {
+  const names = (group.tools || []).map((t: any) => t.name)
+  if (val) {
+    form.allowedMcpTools = [...new Set([...form.allowedMcpTools, ...names])]
+  } else {
+    const nameSet = new Set(names)
+    form.allowedMcpTools = form.allowedMcpTools.filter(n => !nameSet.has(n))
+  }
+}
+
+// 单个工具勾选/取消
+function toggleTool(name: string, val: boolean): void {
+  if (val) {
+    form.allowedMcpTools = [...new Set([...form.allowedMcpTools, name])]
+  } else {
+    form.allowedMcpTools = form.allowedMcpTools.filter(n => n !== name)
+  }
+}
+
 // ---- 初始化 ----
 onMounted(() => {
   reload()
@@ -450,10 +547,16 @@ async function handleDelete(): Promise<void> {
 </script>
 
 <style scoped>
+/* ===== 页级留白 ===== */
+.role-page-card {
+  margin: 16px;
+}
+
 /* ===== 整体分栏 ===== */
 .role-shell {
   display: flex;
   gap: 16px;
+  height: calc(100vh - 220px);
   min-height: 520px;
 }
 
@@ -527,8 +630,13 @@ async function handleDelete(): Promise<void> {
 }
 
 .role-item-name {
+  flex: 1;
+  min-width: 0;
   font-size: 13px;
   color: var(--td-text-color-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .role-item-desc {
@@ -548,13 +656,14 @@ async function handleDelete(): Promise<void> {
   border: 1px solid var(--td-border-level-1-color);
   border-radius: 10px;
   padding: 20px 24px;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 .detail-header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
+  flex-shrink: 0;
   margin-bottom: 20px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--td-border-level-1-color);
@@ -575,22 +684,43 @@ async function handleDelete(): Promise<void> {
 
 .detail-form {
   flex: 1;
+  overflow-y: auto;
 }
 
 .detail-footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
+  flex-shrink: 0;
   margin-top: 24px;
   padding-top: 14px;
   border-top: 1px solid var(--td-border-level-1-color);
 }
 
+/* ===== 表单分区标题 ===== */
+.form-section-title {
+  margin: 8px 0 12px;
+  padding-left: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-primary);
+  border-left: 3px solid var(--td-brand-color);
+  line-height: 1.4;
+}
+
 /* ===== MCP 工具授权 ===== */
 .mcp-tools-box {
   width: 100%;
 }
 
+.mcp-tools-toolbar {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed var(--td-border-level-1-color);
+}
+
 .mcp-tools-list {
   width: 100%;
   display: flex;
@@ -608,11 +738,17 @@ async function handleDelete(): Promise<void> {
   border-radius: 8px;
 }
 
+.mcp-server-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
 .mcp-server-name {
   font-size: 12px;
   font-weight: 600;
   color: var(--td-text-color-secondary);
-  margin-bottom: 2px;
 }
 
 .mcp-tool-label {
@@ -635,12 +771,22 @@ async function handleDelete(): Promise<void> {
 }
 
 @media (max-width: 768px) {
+  .role-page-card {
+    margin: 12px;
+  }
   .role-shell {
     flex-direction: column;
+    height: auto;
   }
   .role-sidebar {
     width: auto;
     max-height: 260px;
   }
+  .role-detail {
+    overflow: visible;
+  }
+  .detail-form {
+    overflow: visible;
+  }
 }
 </style>