(feature)(supersonic-fe) add permission manage in agent (#2095)

2025-12-10 11:07:06 +00:00 · 2025-02-24 08:18:48 +08:00
parent 50ed340ae0
commit 29271f7278
6 changed files with 16013 additions and 12807 deletions
--- a/webapp/packages/chat-sdk/package.json
+++ b/webapp/packages/chat-sdk/package.json
@@ -209,5 +209,6 @@
  },
  "engines": {
    "node": ">=16"
-  }
-}
+  },
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+}
--- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx
@@ -1,6 +1,6 @@
-import { Form, Input, Button, Switch, Tabs, Select, message, Space, Tooltip, Row, Col } from 'antd';
+import { Form, Input, Button, Switch, Tabs, Select, message, Space, Tooltip } from 'antd';
 import MainTitleMark from '@/components/MainTitleMark';
-import { AgentType, ChatAppConfig, ChatAppConfigItem } from './type';
+import { AgentType, ChatAppConfig } from './type';
 import { useEffect, useState } from 'react';
 import styles from './style.less';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
@@ -9,9 +9,9 @@ import ToolsSection from './ToolsSection';
 import globalStyles from '@/global.less';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
-import FormItemTitle from '@/components/FormHelper/FormItemTitle';
-import { getLlmModelTypeList, getLlmModelAppList, getLlmList } from '../../services/system';
+import { getLlmModelAppList, getLlmList } from '../../services/system';
 import MemorySection from './MemorySection';
+import PermissionSection from './PermissionSection';

 const FormItem = Form.Item;
 const { TextArea } = Input;
@@ -195,16 +195,6 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
          <FormItem name="enableFeedback" label="开启用户确认" valuePropName="checked" htmlFor="">
            <Switch />
          </FormItem>
-          {/* <FormItem
-            name={['multiTurnConfig', 'enableMultiTurn']}
-            label="开启多轮对话"
-            valuePropName="checked"
-          >
-            <Switch />
-          </FormItem>
-          <FormItem name="enableMemoryReview" label="开启记忆评估" valuePropName="checked">
-            <Switch />
-          </FormItem> */}
          <FormItem
            name={['toolConfig', 'simpleMode']}
            label="开启精简模式"
@@ -214,7 +204,6 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
          >
            <Switch />
          </FormItem>
-
          <FormItem
            name={['toolConfig', 'debugMode']}
            label="开启调试信息"
@@ -286,8 +275,6 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
            </Space>
          </div>
          <Space style={{ alignItems: 'start' }}>
-            {/* <Row> */}
-            {/* <Col flex="400px"> */}
            <div style={{ width: 350 }}>
              {modelTypeOptions.map((item) => {
                return (
@@ -312,8 +299,6 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
                );
              })}
            </div>
-            {/* </Col>
-            <Col flex="auto"> */}
            <div style={{ width: 900 }}>
              {modelTypeOptions.map((item) => {
                return (
@@ -358,44 +343,10 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
                );
              })}
            </div>
-            {/* </Col> */}
-            {/* </Row> */}
          </Space>
        </div>
      ),
    },
-    // {
-    //   label: '提示词配置',
-    //   key: 'promptConfig',
-    //   children: (
-    //     <div className={styles.agentFormContainer}>
-    //       <FormItem
-    //         name={['promptConfig', 'promptTemplate']}
-    //         label={
-    //           <>
-    //             <Space>
-    //               提示词模板
-    //               <Tooltip
-    //                 overlayInnerStyle={{ width: 400 }}
-    //                 title={
-    //                   <>
-    //                     {tips.map((tip) => (
-    //                       <div>{tip}</div>
-    //                     ))}
-    //                   </>
-    //                 }
-    //               >
-    //                 <QuestionCircleOutlined />
-    //               </Tooltip>
-    //             </Space>
-    //           </>
-    //         }
-    //       >
-    //         <Input.TextArea style={{ minHeight: 600 }} />
-    //       </FormItem>
-    //     </div>
-    //   ),
-    // },
    {
      label: '工具配置',
      key: 'tools',
@@ -406,6 +357,11 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
      key: 'memory',
      children: <MemorySection agentId={editAgent?.id} />,
    },
+    {
+      label: '权限管理',
+      key: 'permissonSetting',
+      children: <PermissionSection currentAgent={editAgent} onSaveAgent={onSaveAgent} />,
+    },
  ];

  return (
@@ -421,7 +377,7 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
      <Tabs
        tabBarExtraContent={
          <Space>
-            {activeKey !== 'memory' && (
+            {activeKey !== 'memory' && activeKey !== 'permissonSetting' && (
              <Button
                type="primary"
                loading={saveLoading}
--- a/webapp/packages/supersonic-fe/src/pages/Agent/PermissionSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/PermissionSection.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Switch } from 'antd';
+import SelectPartner from '@/components/SelectPartner';
+import SelectTMEPerson from '@/components/SelectTMEPerson';
+import FormItemTitle from '@/components/FormHelper/FormItemTitle';
+import styles from './style.less';
+import { AgentType } from './type';
+
+type Props = {
+  currentAgent?: AgentType;
+  onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
+};
+
+const FormItem = Form.Item;
+
+const PermissionSection: React.FC<Props> = ({ currentAgent, onSaveAgent }) => {
+  const [isOpenState, setIsOpenState] = useState(true);
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    form.setFieldsValue({
+      ...currentAgent,
+    });
+    setIsOpenState(currentAgent?.isOpen === 1);
+  }, []);
+
+  const saveAuth = async () => {
+    const values = await form.validateFields();
+    const { admins, adminOrgs, isOpen, viewOrgs = [], viewers = [] } = values;
+    const agent = {
+      ...(currentAgent || {}),
+      admins,
+      adminOrgs,
+      viewOrgs,
+      viewers,
+      isOpen: isOpen ? 1 : 0,
+    };
+    onSaveAgent(agent as any);
+  };
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      onValuesChange={(value) => {
+        const { isOpen } = value;
+        if (isOpen !== undefined) {
+          setIsOpenState(isOpen);
+        }
+        saveAuth();
+      }}
+      className={styles.permissionSection}
+    >
+      <FormItem
+        name="admins"
+        label={
+          <FormItemTitle title={'管理员'} subTitle={'管理员将拥有主题域下所有编辑及访问权限'} />
+        }
+      >
+        <SelectTMEPerson placeholder="请邀请团队成员" />
+      </FormItem>
+      <FormItem name="adminOrgs" label="按组织">
+        <SelectPartner
+          type="selectedDepartment"
+          treeSelectProps={{
+            placeholder: '请选择需要授权的部门',
+          }}
+        />
+      </FormItem>
+      <Form.Item label={<FormItemTitle title={'设为公开'} />} name="isOpen" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      {!isOpenState && (
+        <>
+          <FormItem name="viewOrgs" label="按组织">
+            <SelectPartner
+              type="selectedDepartment"
+              treeSelectProps={{
+                placeholder: '请选择需要授权的部门',
+              }}
+            />
+          </FormItem>
+          <FormItem name="viewers" label="按个人">
+            <SelectTMEPerson placeholder="请选择需要授权的个人" />
+          </FormItem>
+        </>
+      )}
+    </Form>
+  );
+};
+
+export default PermissionSection;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/style.less
@@ -19,7 +19,7 @@
  margin: 0 auto;
 }

-.agentFormTitle{
+.agentFormTitle {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 500;
@@ -381,7 +381,6 @@
  margin-bottom: 20px;
 }

-
 .agentChatModelCell {
  cursor: pointer;
  &:hover {
@@ -391,4 +390,15 @@

 .agentChatModelCellActive {
  background-color: #f0f5ff;
-}
+}
+
+.permissionSection {
+  width: 1000px;
+  height: calc(100vh - 250px);
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 40px;
+  overflow-y: auto;
+}
--- a/webapp/packages/supersonic-fe/src/pages/Agent/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/type.ts
@@ -95,10 +95,14 @@ export type AgentType = {
  enableSearch?: 0 | 1;
  enableFeedback?: 0 | 1;
  toolConfig?: string;
-  // modelConfig?: LlmConfigType;
  chatAppConfig: ChatAppConfig;
  multiTurnConfig?: MultiTurnConfig;
  visualConfig?: VisualConfig;
+  admins?: string[];
+  adminOrgs?: string[];
+  viewers?: string[];
+  viewOrgs?: string[];
+  isOpen: number;
 };

 export type ModelType = {
--- a/webapp/pnpm-lock.yaml
+++ b/webapp/pnpm-lock.yaml