Merge pull request #26 from sevenliu1896/master

[improvement][semantic-fe] Optimized the frontend display and code lo…

webapp/packages/supersonic-fe/src/components/SelectPartner/index.tsx

@@ -1,6 +1,6 @@
-import { Avatar, TreeSelect, Tag } from 'antd';
+import { TreeSelect, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { getDepartmentTree, getUserByDeptid } from './service';
+import { getUserByDeptid, getOrganizationTree } from './service';
 import TMEAvatar from '@/components/TMEAvatar';
 
 type Props = {
@@ -11,6 +11,9 @@ type Props = {
 };
 
 const isDisableCheckbox = (name: string, type: string) => {
+  if (!name) {
+    return false;
+  }
   const isPersonNode = name.includes('(');
   if (type === 'selectedPerson') {
     return !isPersonNode;
@@ -25,18 +28,18 @@ const isDisableCheckbox = (name: string, type: string) => {
 };
 
 // 转化树结构
-export function changeTreeData(treeData: any = [], type: string) {
+export function changeTreeData(treeData: any = [], type: string, keyName = 'id') {
   return treeData.map((item: any) => {
     return {
       title: item.name,
-      value: item.key,
+      value: item[keyName],
-      key: item.key,
+      key: item[keyName],
-      isLeaf: !!item.emplid,
+      isLeaf: !item.subOrganizations,
-      children: item?.subDepartments ? changeTreeData(item.subDepartments, type) : [],
+      children: item.subOrganizations ? changeTreeData(item.subOrganizations, type, keyName) : [],
-      disableCheckbox: isDisableCheckbox(item.name, type),
+      disableCheckbox: isDisableCheckbox(item.displayName, type),
-      checkable: !isDisableCheckbox(item.name, type),
+      checkable: !isDisableCheckbox(item.displayName, type),
-      icon: item.name.includes('(') && (
+      icon: (item.displayName || '').includes('(') && (
-        <Avatar size={18} shape="square" src={`${item.avatarImg}`} alt="avatar" />
+        <TMEAvatar size="small" staffName={item.name} />
       ),
     };
   });
@@ -51,9 +54,12 @@ const SelectPartner: React.FC<Props> = ({
   const [treeData, setTreeData] = useState([]);
 
   const getDetpartment = async () => {
-    const res = await getDepartmentTree();
+    const { code, data } = await getOrganizationTree();
-    const data = changeTreeData(res.data, type);
+    if (code === 200) {
-    setTreeData(data);
+      const changeData = changeTreeData(data, type);
+      setTreeData(changeData);
+      return;
+    }
   };
 
   useEffect(() => {
@@ -78,13 +84,21 @@ const SelectPartner: React.FC<Props> = ({
   const onLoadData = (target: any) => {
     const { key } = target;
     const loadData = async () => {
-      const childData = await getUserByDeptid(key);
+      const { code, data } = await getUserByDeptid(key);
-      if (childData.data.length === 0) {
+      if (code === 200) {
-        return;
+        const list = data.reduce((userList: any[], item: any) => {
+          const { name, displayName } = item;
+          if (name && displayName) {
+            userList.push({ key: `${key}-${item.id}`, ...item });
           }
+          return userList;
+        }, []);
         setTimeout(() => {
-        setTreeData((origin) => updateTreeData(origin, key, changeTreeData(childData.data, type)));
+          setTreeData((origin) => {
+            return updateTreeData(origin, key, changeTreeData(list, type, 'key'));
+          });
         }, 300);
+      }
     };
     return new Promise<void>((resolve) => {
       loadData().then(() => {

webapp/packages/supersonic-fe/src/components/SelectPartner/service.ts

@@ -1,13 +1,12 @@
 import { request } from 'umi';
 
-export async function getDepartmentTree() {
-  return request<any>('/api/tpp/getDetpartmentTree', {
-    method: 'GET',
-  });
-}
-
 export async function getUserByDeptid(id: any) {
-  return request<any>(`/api/tpp/getUserByDeptid/${id}`, {
+  return request<any>(`${process.env.AUTH_API_BASE_URL}user/getUserByOrg/${id}`, {
+    method: 'GET',
+  });
+}
+export async function getOrganizationTree() {
+  return request<any>(`${process.env.AUTH_API_BASE_URL}user/getOrganizationTree`, {
     method: 'GET',
   });
 }

webapp/packages/supersonic-fe/src/components/SelectTMEPerson/index.tsx

@@ -30,15 +30,7 @@ const SelectTMEPerson: FC<Props> = ({ placeholder, value, isMultiple = true, onC
         }
       },
       updater: (list) => {
-        const users = list.map((item: UserItem) => {
+        setUserList(list);
-          const { enName, chName, name } = item;
-          return {
-            ...item,
-            enName: enName || name,
-            chName: chName || name,
-          };
-        });
-        setUserList(users);
       },
       cleanup: () => {
         setUserList([]);
@@ -58,8 +50,8 @@ const SelectTMEPerson: FC<Props> = ({ placeholder, value, isMultiple = true, onC
     >
       {userList.map((item) => {
         return (
-          <Select.Option key={item.enName} value={item.enName}>
+          <Select.Option key={item.name} value={item.name}>
-            <TMEAvatar size="small" staffName={item.enName} />
+            <TMEAvatar size="small" staffName={item.name} />
             <span className={styles.userText}>{item.displayName}</span>
           </Select.Option>
         );

webapp/packages/supersonic-fe/src/components/SelectTMEPerson/service.ts

@@ -1,19 +1,15 @@
 import request from 'umi-request';
 
-export type UserItem = {
+export interface UserItem {
-  enName?: string;
+  id: number;
+  name: string;
   displayName: string;
-  chName?: string;
-  name?: string;
   email: string;
-};
+}
+
 export type GetAllUserRes = Result<UserItem[]>;
 
 // 获取所有用户
 export async function getAllUser(): Promise<GetAllUserRes> {
-  const { APP_TARGET } = process.env;
-  if (APP_TARGET === 'inner') {
-    return request.get('/api/oa/user/all');
-  }
   return request.get(`${process.env.AUTH_API_BASE_URL}user/getUserList`);
 }

webapp/packages/supersonic-fe/src/components/SqlEditor/index.tsx

@@ -49,11 +49,13 @@ export interface ISqlEditorProps {
   isRightTheme?: boolean;
   editorConfig?: IAceEditorProps;
   sizeChanged?: number;
+  isFullScreen?: boolean;
   fullScreenBtnVisible?: boolean;
   onSqlChange?: (sql: string) => void;
   onChange?: (sql: string) => void;
   onSelect?: (sql: string) => void;
   onCmdEnter?: () => void;
+  triggerBackToNormal?: () => void;
 }
 
 /**
@@ -71,10 +73,12 @@ function SqlEditor(props: ISqlEditorProps) {
     sizeChanged,
     editorConfig,
     fullScreenBtnVisible = true,
+    isFullScreen = false,
     onSqlChange,
     onChange,
     onSelect,
     onCmdEnter,
+    triggerBackToNormal,
   } = props;
   const resize = useCallback(
     debounce(() => {
@@ -118,11 +122,15 @@ function SqlEditor(props: ISqlEditorProps) {
     setHintsPopover(hints);
   }, [hints]);
 
-  const [isSqlIdeFullScreen, setIsSqlIdeFullScreen] = useState<boolean>(false);
+  const [isSqlIdeFullScreen, setIsSqlIdeFullScreen] = useState<boolean>(isFullScreen);
+
+  useEffect(() => {
+    setIsSqlIdeFullScreen(isFullScreen);
+  }, [isFullScreen]);
 
   const handleNormalScreenSqlIde = () => {
     setIsSqlIdeFullScreen(false);
-    // setSqlEditorHeight(getDefaultSqlEditorHeight(screenSize));
+    triggerBackToNormal?.();
   };
   return (
     <div className={styles.sqlEditor} style={{ height }}>

webapp/packages/supersonic-fe/src/pages/SemanticModel/ChatSetting.tsx

@@ -1,7 +1,7 @@
 import { Tabs, Popover, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { connect, Helmet, useParams, history } from 'umi';
-import ProjectListTree from './components/ProjectList';
+import DomainListTree from './components/DomainList';
 import styles from './components/style.less';
 import type { StateType } from './model';
 import { DownOutlined } from '@ant-design/icons';
@@ -20,7 +20,6 @@ type Props = {
 };
 
 const ChatSetting: React.FC<Props> = ({ domainManger, dispatch }) => {
-  window.RUNNING_ENV = 'chat';
   const defaultTabKey = 'metric';
   const params: any = useParams();
   const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
@@ -159,7 +158,7 @@ const ChatSetting: React.FC<Props> = ({ domainManger, dispatch }) => {
               maxHeight: '800px',
             }}
             content={
-              <ProjectListTree
+              <DomainListTree
                 createDomainBtnVisible={false}
                 onTreeSelected={() => {
                   setOpen(false);

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlDetail.tsx

@@ -467,21 +467,16 @@ const SqlDetail: React.FC<IProps> = ({
         <Pane initialSize={exploreEditorSize || '500px'}>
           <div className={styles.sqlMain}>
             <div className={styles.sqlEditorWrapper}>
-              <FullScreen
-                isFullScreen={isSqlIdeFullScreen}
-                top={`${DEFAULT_FULLSCREEN_TOP}px`}
-                triggerBackToNormal={handleNormalScreenSqlIde}
-              >
               <SqlEditor
                 value={sql}
-                  // height={sqlEditorHeight}
+                isFullScreen={isSqlIdeFullScreen}
+                triggerBackToNormal={handleNormalScreenSqlIde}
                 // theme="monokai"
                 isRightTheme={isRight}
                 sizeChanged={editorSize}
                 onSqlChange={onSqlChange}
                 onSelect={onSelect}
               />
-              </FullScreen>
             </div>
           </div>
         </Pane>

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx

@@ -3,9 +3,11 @@ import StandardFormRow from '@/components/StandardFormRow';
 import TagSelect from '@/components/TagSelect';
 import React, { useEffect } from 'react';
 import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
+import { SearchOutlined } from '@ant-design/icons';
+import DomainTreeSelect from '../../components/DomainTreeSelect';
+import styles from '../style.less';
 
 const FormItem = Form.Item;
-const { Option } = Select;
 
 type Props = {
   filterValues?: any;
@@ -25,10 +27,7 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
     onFiltersChange(value, values);
   };
 
-  const onSearch = (value) => {
+  const onSearch = (value: any) => {
-    if (!value) {
-      return;
-    }
     onFiltersChange(value, form.getFieldsValue());
   };
 
@@ -57,34 +56,24 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
       form={form}
       colon={false}
       onValuesChange={(value, values) => {
-        if (value.keywords || value.keywordsType) {
+        if (value.name) {
           return;
         }
         handleValuesChange(value, values);
       }}
-      initialValues={{
-        keywordsType: 'name',
-      }}
     >
       <StandardFormRow key="search" block>
-        <Input.Group compact>
+        <div className={styles.searchBox}>
-          <FormItem name={'keywordsType'} noStyle>
+          <FormItem name={'name'} noStyle>
-            <Select>
+            <div className={styles.searchInput}>
-              <Option value="name">中文名</Option>
-              <Option value="bizName">英文名</Option>
-              <Option value="id">ID</Option>
-            </Select>
-          </FormItem>
-          <FormItem name={'keywords'} noStyle>
               <Input.Search
-              placeholder="请输入需要查询的指标信息"
+                placeholder="请输入需要查询指标的ID、指标名称、字段名称"
-              allowClear
+                enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
                 onSearch={onSearch}
-              style={{ width: 300 }}
-              enterButton
               />
+            </div>
           </FormItem>
-        </Input.Group>
+        </div>
       </StandardFormRow>
       {filterList.map((item) => {
         const { title, key, options } = item;
@@ -102,6 +91,11 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
           </StandardFormRow>
         );
       })}
+      <StandardFormRow key="domainIds" title="所属主题域" block>
+        <FormItem name="domainIds">
+          <DomainTreeSelect />
+        </FormItem>
+      </StandardFormRow>
     </Form>
   );
 };

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx

@@ -1,6 +1,6 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Space } from 'antd';
+import { message } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
@@ -23,6 +23,7 @@ type QueryMetricListParams = {
   bizName?: string;
   sensitiveLevel?: string;
   type?: string;
+  [key: string]: any;
 };
 
 const ClassMetricTable: React.FC<Props> = () => {
@@ -31,8 +32,9 @@ const ClassMetricTable: React.FC<Props> = () => {
     pageSize: 20,
     total: 0,
   });
-
+  const [loading, setLoading] = useState<boolean>(false);
   const [dataSource, setDataSource] = useState<any[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
   const actionRef = useRef<ActionType>();
 
   useEffect(() => {
@@ -40,11 +42,13 @@ const ClassMetricTable: React.FC<Props> = () => {
   }, []);
 
   const queryMetricList = async (params: QueryMetricListParams = {}) => {
+    setLoading(true);
     const { code, data, msg } = await queryMetric({
-      ...params,
       ...pagination,
+      ...params,
     });
-    const { list, pageSize, current, total } = data;
+    setLoading(false);
+    const { list, pageSize, current, total } = data || {};
     let resData: any = {};
     if (code === 200) {
       setPagination({
@@ -87,6 +91,10 @@ const ClassMetricTable: React.FC<Props> = () => {
       dataIndex: 'bizName',
       title: '字段名称',
     },
+    {
+      dataIndex: 'domainName',
+      title: '主题域',
+    },
     {
       dataIndex: 'sensitiveLevel',
       title: '敏感度',
@@ -105,7 +113,6 @@ const ClassMetricTable: React.FC<Props> = () => {
     {
       dataIndex: 'type',
       title: '指标类型',
-      // search: false,
       valueEnum: {
         ATOMIC: '原子指标',
         DERIVED: '衍生指标',
@@ -123,25 +130,18 @@ const ClassMetricTable: React.FC<Props> = () => {
   ];
 
   const handleFilterChange = async (filterParams: {
-    keywordsType: string;
+    name: string;
-    keywords: string;
     sensitiveLevel: string;
     type: string;
   }) => {
-    const params: QueryMetricListParams = {};
+    const { sensitiveLevel, type } = filterParams;
-    const { keywordsType, keywords, sensitiveLevel, type } = filterParams;
+    const params: QueryMetricListParams = { ...filterParams };
-    if (keywordsType && keywords) {
-      params[keywordsType] = keywords;
-    }
     const sensitiveLevelValue = sensitiveLevel?.[0];
     const typeValue = type?.[0];
-    if (sensitiveLevelValue) {
-      params.sensitiveLevel = sensitiveLevelValue;
-    }
-    if (type) {
-      params.type = typeValue;
-    }
 
+    params.sensitiveLevel = sensitiveLevelValue;
+    params.type = typeValue;
+    setFilterParams(params);
     await queryMetricList(params);
   };
 
@@ -157,7 +157,6 @@ const ClassMetricTable: React.FC<Props> = () => {
       <ProTable
         className={`${styles.metricTable}`}
         actionRef={actionRef}
-        // headerTitle="指标列表"
         rowKey="id"
         search={false}
         dataSource={dataSource}
@@ -166,27 +165,19 @@ const ClassMetricTable: React.FC<Props> = () => {
         tableAlertRender={() => {
           return false;
         }}
+        loading={loading}
         onChange={(data: any) => {
           const { current, pageSize, total } = data;
-          setPagination({
+          const pagin = {
             current,
             pageSize,
             total,
-          });
+          };
+          setPagination(pagin);
+          queryMetricList({ ...pagin, ...filterParams });
         }}
         size="small"
         options={{ reload: false, density: false, fullScreen: false }}
-        // toolBarRender={() => [
-        //   <Button
-        //     key="create"
-        //     type="primary"
-        //     onClick={() => {
-        //       setMetricItem(undefined);
-        //     }}
-        //   >
-        //     创建指标
-        //   </Button>,
-        // ]}
       />
     </>
   );

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less

@@ -8,3 +8,76 @@
 .metricTable {
     margin: 20px;
 }
+
+
+
+.searchBox {
+    // margin-bottom: 12px;
+    background: #fff;
+    border-radius: 10px;
+    width: 500px;
+    margin: 0 auto;
+    .searchInput {
+        width: 100%;
+        border: 1px solid rgba(35, 104, 184, 0.6);
+        border-radius: 10px;
+    }
+    :global {
+
+        .ant-select-auto-complete {
+            width: 100%;
+        }
+        .ant-input {
+            height: 50px;
+            padding: 0 15px;
+            color: #515a6e;
+            font-size: 14px;
+            line-height: 50px;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+            caret-color: #296df3;
+  
+            &:focus {
+                border-right-width: 0 !important;
+                box-shadow: none;
+            }
+        }
+  
+        .ant-input-group-addon {
+            left: 0 !important;
+            padding: 0;
+            background: hsla(0, 0%, 100%, 0.2);
+            border: none;
+            border-top-left-radius: 0;
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+            border-bottom-left-radius: 0;
+  
+            .ant-btn {
+                width: 72px;
+                height: 50px;
+                margin: 0;
+                color: rgba(35, 104, 184, 0.6);
+                font-size: 16px;
+                background-color: transparent;
+                background-color: transparent;
+                border: none;
+                box-shadow: none !important;
+  
+                &::after {
+                    box-shadow: none !important;
+                }
+  
+                .anticon {
+                    font-size: 28px;
+  
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+        }
+    }
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/ProjectManager.tsx

@@ -1,7 +1,7 @@
 import { Tabs, Popover, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { connect, Helmet, history, useParams } from 'umi';
-import ProjectListTree from './components/ProjectList';
+import DomainListTree from './components/DomainList';
 import ClassDataSourceTable from './components/ClassDataSourceTable';
 import ClassDimensionTable from './components/ClassDimensionTable';
 import ClassMetricTable from './components/ClassMetricTable';
@@ -24,7 +24,6 @@ type Props = {
 };
 
 const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
-  window.RUNNING_ENV = 'semantic';
   const defaultTabKey = 'xflow';
   const params: any = useParams();
   const menuKey = params.menuKey ? params.menuKey : defaultTabKey;
@@ -203,7 +202,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
               maxHeight: '800px',
             }}
             content={
-              <ProjectListTree
+              <DomainListTree
                 onTreeSelected={() => {
                   setOpen(false);
                 }}

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ContextMenu.tsx

@@ -6,7 +6,6 @@ import { SemanticNodeType } from '../../enum';
 import { SEMANTIC_NODE_TYPE_CONFIG } from '../../constant';
 
 type InitContextMenuProps = {
-  graphShowType?: string;
   onMenuClick?: (key: string, item: Item) => void;
 };
 

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegend.tsx

@@ -0,0 +1,83 @@
+import { Space, Checkbox } from 'antd';
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import React, { useState, useEffect } from 'react';
+
+import { connect } from 'umi';
+import type { StateType } from '../../model';
+import styles from '../style.less';
+
+type Props = {
+  legendOptions: LegendOptionsItem[];
+  value?: string[];
+  domainManger: StateType;
+  onChange?: (ids: CheckboxValueType[]) => void;
+  defaultCheckAll?: boolean;
+  [key: string]: any;
+};
+
+type LegendOptionsItem = {
+  id: string;
+  label: string;
+};
+
+const GraphLegend: React.FC<Props> = ({
+  legendOptions,
+  value,
+  defaultCheckAll = false,
+  onChange,
+}) => {
+  const [groupValue, setGroupValue] = useState<CheckboxValueType[]>(value || []);
+
+  useEffect(() => {
+    if (!defaultCheckAll) {
+      return;
+    }
+    if (!Array.isArray(legendOptions)) {
+      setGroupValue([]);
+      return;
+    }
+    setGroupValue(
+      legendOptions.map((item) => {
+        return item.id;
+      }),
+    );
+  }, [legendOptions]);
+
+  useEffect(() => {
+    if (!Array.isArray(value)) {
+      setGroupValue([]);
+      return;
+    }
+    setGroupValue(value);
+  }, [value]);
+
+  const handleChange = (checkedValues: CheckboxValueType[]) => {
+    setGroupValue(checkedValues);
+    onChange?.(checkedValues);
+  };
+
+  return (
+    <div className={styles.graphLegend}>
+      <Checkbox.Group style={{ width: '100%' }} onChange={handleChange} value={groupValue}>
+        <div style={{ width: '100%', maxWidth: '450px' }}>
+          <div className={styles.title}>可见数据源</div>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Space wrap size={[8, 16]}>
+              {legendOptions.map((item) => {
+                return (
+                  <Checkbox key={item.id} value={item.id} style={{ transform: 'scale(0.85)' }}>
+                    {item.label}
+                  </Checkbox>
+                );
+              })}
+            </Space>
+          </div>
+        </div>
+      </Checkbox.Group>
+    </div>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(GraphLegend);

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/GraphLegendVisibleModeItem.tsx

@@ -0,0 +1,42 @@
+import { Segmented } from 'antd';
+
+import React from 'react';
+import { SemanticNodeType } from '../../enum';
+import styles from '../style.less';
+
+type Props = {
+  value?: SemanticNodeType;
+  onChange?: (value: SemanticNodeType) => void;
+  [key: string]: any;
+};
+
+const GraphLegendVisibleModeItem: React.FC<Props> = ({ value, onChange }) => {
+  return (
+    <div className={styles.graphLegendVisibleModeItem}>
+      <Segmented
+        size="small"
+        block={true}
+        value={value}
+        onChange={(changeValue) => {
+          onChange?.(changeValue as SemanticNodeType);
+        }}
+        options={[
+          {
+            value: '',
+            label: '全部',
+          },
+          {
+            value: SemanticNodeType.DIMENSION,
+            label: '仅维度',
+          },
+          {
+            value: SemanticNodeType.METRIC,
+            label: '仅指标',
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default GraphLegendVisibleModeItem;

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/NodeInfoDrawer.tsx

@@ -95,6 +95,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
           },
           {
             label: '别名',
+            hideItem: !alias,
             value: alias || '-',
           },
           {
@@ -213,20 +214,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
       message.error(msg);
     }
   };
-
+  const extraNode = (
-  return (
-    <>
-      <Drawer
-        title={
-          <Space>
-            {nodeData?.name}
-            <TransTypeTag type={nodeData?.nodeType} />
-          </Space>
-        }
-        placement="right"
-        mask={false}
-        getContainer={false}
-        footer={
     <div className="ant-drawer-extra">
       <Space>
         <Button
@@ -253,7 +241,20 @@ const NodeInfoDrawer: React.FC<Props> = ({
         </Popconfirm>
       </Space>
     </div>
+  );
+  return (
+    <>
+      <Drawer
+        title={
+          <Space>
+            {nodeData?.name}
+            <TransTypeTag type={nodeData?.nodeType} />
+          </Space>
         }
+        placement="right"
+        mask={false}
+        getContainer={false}
+        footer={false}
         {...restProps}
       >
         <div key={nodeData?.id} className={styles.nodeInfoDrawerContent}>
@@ -282,6 +283,7 @@ const NodeInfoDrawer: React.FC<Props> = ({
             );
           })}
         </div>
+        {extraNode}
       </Drawer>
     </>
   );

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/components/ToolBar.tsx

@@ -1,8 +1,9 @@
 import G6, { Graph } from '@antv/g6';
+import { IAbstractGraph as IGraph } from '@antv/g6-core';
 import { createDom } from '@antv/dom-util';
 import { ToolBarSearchCallBack } from '../../data';
 const searchIconSvgPath = `<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" />`;
-
+const visibleModeIconSvgPath = `<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zM340 683v77c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-77c-10.1 3.3-20.8 5-32 5s-21.9-1.8-32-5zm64-198V264c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v221c10.1-3.3 20.8-5 32-5s21.9 1.8 32 5zm-64 198c10.1 3.3 20.8 5 32 5s21.9-1.8 32-5c41.8-13.5 72-52.7 72-99s-30.2-85.5-72-99c-10.1-3.3-20.8-5-32-5s-21.9 1.8-32 5c-41.8 13.5-72 52.7-72 99s30.2 85.5 72 99zm.1-115.7c.3-.6.7-1.2 1-1.8v-.1l1.2-1.8c.1-.2.2-.3.3-.5.3-.5.7-.9 1-1.4.1-.1.2-.3.3-.4.5-.6.9-1.1 1.4-1.6l.3-.3 1.2-1.2.4-.4c.5-.5 1-.9 1.6-1.4.6-.5 1.1-.9 1.7-1.3.2-.1.3-.2.5-.3.5-.3.9-.7 1.4-1 .1-.1.3-.2.4-.3.6-.4 1.2-.7 1.9-1.1.1-.1.3-.1.4-.2.5-.3 1-.5 1.6-.8l.6-.3c.7-.3 1.3-.6 2-.8.7-.3 1.4-.5 2.1-.7.2-.1.4-.1.6-.2.6-.2 1.1-.3 1.7-.4.2 0 .3-.1.5-.1.7-.2 1.5-.3 2.2-.4.2 0 .3 0 .5-.1.6-.1 1.2-.1 1.8-.2h.6c.8 0 1.5-.1 2.3-.1s1.5 0 2.3.1h.6c.6 0 1.2.1 1.8.2.2 0 .3 0 .5.1.7.1 1.5.2 2.2.4.2 0 .3.1.5.1.6.1 1.2.3 1.7.4.2.1.4.1.6.2.7.2 1.4.4 2.1.7.7.2 1.3.5 2 .8l.6.3c.5.2 1.1.5 1.6.8.1.1.3.1.4.2.6.3 1.3.7 1.9 1.1.1.1.3.2.4.3.5.3 1 .6 1.4 1 .2.1.3.2.5.3.6.4 1.2.9 1.7 1.3s1.1.9 1.6 1.4l.4.4 1.2 1.2.3.3c.5.5 1 1.1 1.4 1.6.1.1.2.3.3.4.4.4.7.9 1 1.4.1.2.2.3.3.5l1.2 1.8s0 .1.1.1a36.18 36.18 0 015.1 18.5c0 6-1.5 11.7-4.1 16.7-.3.6-.7 1.2-1 1.8 0 0 0 .1-.1.1l-1.2 1.8c-.1.2-.2.3-.3.5-.3.5-.7.9-1 1.4-.1.1-.2.3-.3.4-.5.6-.9 1.1-1.4 1.6l-.3.3-1.2 1.2-.4.4c-.5.5-1 .9-1.6 1.4-.6.5-1.1.9-1.7 1.3-.2.1-.3.2-.5.3-.5.3-.9.7-1.4 1-.1.1-.3.2-.4.3-.6.4-1.2.7-1.9 1.1-.1.1-.3.1-.4.2-.5.3-1 .5-1.6.8l-.6.3c-.7.3-1.3.6-2 .8-.7.3-1.4.5-2.1.7-.2.1-.4.1-.6.2-.6.2-1.1.3-1.7.4-.2 0-.3.1-.5.1-.7.2-1.5.3-2.2.4-.2 0-.3 0-.5.1-.6.1-1.2.1-1.8.2h-.6c-.8 0-1.5.1-2.3.1s-1.5 0-2.3-.1h-.6c-.6 0-1.2-.1-1.8-.2-.2 0-.3 0-.5-.1-.7-.1-1.5-.2-2.2-.4-.2 0-.3-.1-.5-.1-.6-.1-1.2-.3-1.7-.4-.2-.1-.4-.1-.6-.2-.7-.2-1.4-.4-2.1-.7-.7-.2-1.3-.5-2-.8l-.6-.3c-.5-.2-1.1-.5-1.6-.8-.1-.1-.3-.1-.4-.2-.6-.3-1.3-.7-1.9-1.1-.1-.1-.3-.2-.4-.3-.5-.3-1-.6-1.4-1-.2-.1-.3-.2-.5-.3-.6-.4-1.2-.9-1.7-1.3s-1.1-.9-1.6-1.4l-.4-.4-1.2-1.2-.3-.3c-.5-.5-1-1.1-1.4-1.6-.1-.1-.2-.3-.3-.4-.4-.4-.7-.9-1-1.4-.1-.2-.2-.3-.3-.5l-1.2-1.8v-.1c-.4-.6-.7-1.2-1-1.8-2.6-5-4.1-10.7-4.1-16.7s1.5-11.7 4.1-16.7zM620 539v221c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V539c-10.1 3.3-20.8 5-32 5s-21.9-1.8-32-5zm64-198v-77c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v77c10.1-3.3 20.8-5 32-5s21.9 1.8 32 5zm-64 198c10.1 3.3 20.8 5 32 5s21.9-1.8 32-5c41.8-13.5 72-52.7 72-99s-30.2-85.5-72-99c-10.1-3.3-20.8-5-32-5s-21.9 1.8-32 5c-41.8 13.5-72 52.7-72 99s30.2 85.5 72 99zm.1-115.7c.3-.6.7-1.2 1-1.8v-.1l1.2-1.8c.1-.2.2-.3.3-.5.3-.5.7-.9 1-1.4.1-.1.2-.3.3-.4.5-.6.9-1.1 1.4-1.6l.3-.3 1.2-1.2.4-.4c.5-.5 1-.9 1.6-1.4.6-.5 1.1-.9 1.7-1.3.2-.1.3-.2.5-.3.5-.3.9-.7 1.4-1 .1-.1.3-.2.4-.3.6-.4 1.2-.7 1.9-1.1.1-.1.3-.1.4-.2.5-.3 1-.5 1.6-.8l.6-.3c.7-.3 1.3-.6 2-.8.7-.3 1.4-.5 2.1-.7.2-.1.4-.1.6-.2.6-.2 1.1-.3 1.7-.4.2 0 .3-.1.5-.1.7-.2 1.5-.3 2.2-.4.2 0 .3 0 .5-.1.6-.1 1.2-.1 1.8-.2h.6c.8 0 1.5-.1 2.3-.1s1.5 0 2.3.1h.6c.6 0 1.2.1 1.8.2.2 0 .3 0 .5.1.7.1 1.5.2 2.2.4.2 0 .3.1.5.1.6.1 1.2.3 1.7.4.2.1.4.1.6.2.7.2 1.4.4 2.1.7.7.2 1.3.5 2 .8l.6.3c.5.2 1.1.5 1.6.8.1.1.3.1.4.2.6.3 1.3.7 1.9 1.1.1.1.3.2.4.3.5.3 1 .6 1.4 1 .2.1.3.2.5.3.6.4 1.2.9 1.7 1.3s1.1.9 1.6 1.4l.4.4 1.2 1.2.3.3c.5.5 1 1.1 1.4 1.6.1.1.2.3.3.4.4.4.7.9 1 1.4.1.2.2.3.3.5l1.2 1.8v.1a36.18 36.18 0 015.1 18.5c0 6-1.5 11.7-4.1 16.7-.3.6-.7 1.2-1 1.8v.1l-1.2 1.8c-.1.2-.2.3-.3.5-.3.5-.7.9-1 1.4-.1.1-.2.3-.3.4-.5.6-.9 1.1-1.4 1.6l-.3.3-1.2 1.2-.4.4c-.5.5-1 .9-1.6 1.4-.6.5-1.1.9-1.7 1.3-.2.1-.3.2-.5.3-.5.3-.9.7-1.4 1-.1.1-.3.2-.4.3-.6.4-1.2.7-1.9 1.1-.1.1-.3.1-.4.2-.5.3-1 .5-1.6.8l-.6.3c-.7.3-1.3.6-2 .8-.7.3-1.4.5-2.1.7-.2.1-.4.1-.6.2-.6.2-1.1.3-1.7.4-.2 0-.3.1-.5.1-.7.2-1.5.3-2.2.4-.2 0-.3 0-.5.1-.6.1-1.2.1-1.8.2h-.6c-.8 0-1.5.1-2.3.1s-1.5 0-2.3-.1h-.6c-.6 0-1.2-.1-1.8-.2-.2 0-.3 0-.5-.1-.7-.1-1.5-.2-2.2-.4-.2 0-.3-.1-.5-.1-.6-.1-1.2-.3-1.7-.4-.2-.1-.4-.1-.6-.2-.7-.2-1.4-.4-2.1-.7-.7-.2-1.3-.5-2-.8l-.6-.3c-.5-.2-1.1-.5-1.6-.8-.1-.1-.3-.1-.4-.2-.6-.3-1.3-.7-1.9-1.1-.1-.1-.3-.2-.4-.3-.5-.3-1-.6-1.4-1-.2-.1-.3-.2-.5-.3-.6-.4-1.2-.9-1.7-1.3s-1.1-.9-1.6-1.4l-.4-.4-1.2-1.2-.3-.3c-.5-.5-1-1.1-1.4-1.6-.1-.1-.2-.3-.3-.4-.4-.4-.7-.9-1-1.4-.1-.2-.2-.3-.3-.5l-1.2-1.8v-.1c-.4-.6-.7-1.2-1-1.8-2.6-5-4.1-10.7-4.1-16.7s1.5-11.7 4.1-16.7z"></path>`;
 // const searchNode = (graph) => {
 //   const toolBarSearchInput = document.getElementById('toolBarSearchInput') as HTMLInputElement;
 //   const searchText = toolBarSearchInput.value.trim();
@@ -90,13 +91,29 @@ const searchInputDOM = (graph: Graph, onSearch: ToolBarSearchCallBack) => {
   return searchDom;
 };
 
-const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
+function zoomGraph(graph, ratio) {
+  const width = graph.get('width');
+  const height = graph.get('height');
+  const centerX = width / 2;
+  const centerY = height / 2;
+  graph.zoom(ratio, { x: centerX, y: centerY });
+}
+
+const initToolBar = ({
+  onSearch,
+  onClick,
+}: {
+  onSearch: ToolBarSearchCallBack;
+  onClick?: (code: string, graph: IGraph) => void;
+}) => {
   const toolBarInstance = new G6.ToolBar();
   const config = toolBarInstance._cfgs;
   const defaultContentDomString = config.getContent();
   const defaultContentDom = createDom(defaultContentDomString);
   // @ts-ignore
-  const elements = defaultContentDom.querySelectorAll('li[code="redo"], li[code="undo"]');
+  const elements = defaultContentDom.querySelectorAll(
+    'li[code="redo"], li[code="undo"], li[code="realZoom"]',
+  );
   elements.forEach((element) => {
     element.remove();
   });
@@ -113,7 +130,21 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
     ${searchIconSvgPath}
   </svg>
 </li>`;
-  defaultContentDom.insertAdjacentHTML('afterbegin', searchBtnDom);
+  const visibleBtnDom = `<li code="visibleMode">
+  <svg
+    viewBox="64 64 896 896"
+    class="icon"
+    data-icon="visibleMode"
+    width="24"
+    height="24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    ${visibleModeIconSvgPath}
+  </svg>
+  </li>`;
+
+  defaultContentDom.insertAdjacentHTML('afterbegin', `${searchBtnDom}${visibleBtnDom}`);
   let searchInputContentVisible = true;
   const toolbar = new G6.ToolBar({
     position: { x: 20, y: 20 },
@@ -122,6 +153,16 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
       const searchInput = searchInputDOM(graph as Graph, onSearch);
       const content = `<div class="g6-component-toolbar-content">${defaultContentDom.outerHTML}</div>`;
       const contentDom = createDom(content);
+      contentDom.addEventListener('click', (event: PointerEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      });
+      contentDom.addEventListener('dblclick', (event: PointerEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      });
       contentDom.appendChild(searchInput);
       return contentDom;
     },
@@ -133,11 +174,54 @@ const initToolBar = ({ onSearch }: { onSearch: ToolBarSearchCallBack }) => {
           searchText.style.display = visible;
           searchInputContentVisible = !searchInputContentVisible;
         }
+      } else if (code === 'visibleMode') {
+        const searchText = document.getElementById('searchInputContent');
+        if (searchText) {
+          const visible = 'none';
+          searchText.style.display = visible;
+          searchInputContentVisible = false;
+        }
+      } else if (code.includes('zoom')) {
+        const sensitivity = 0.1; // 设置缩放灵敏度，值越小，缩放越不敏感，默认值为 1
+        const zoomInRatio = 1 - sensitivity;
+        const zoomOutRatio = 1 + sensitivity;
+
+        if (code === 'zoomIn') {
+          zoomGraph(graph, zoomInRatio);
+        } else if (code === 'zoomOut') {
+          zoomGraph(graph, zoomOutRatio);
+        }
+        // else if (code === 'realZoom') {
+        //   const width = graph.get('width');
+        //   const height = graph.get('height');
+        //   const centerX = width / 2;
+        //   const centerY = height / 2;
+        //   graph.moveTo(centerX, centerY);
+        //   graph.zoomTo(1, { x: centerX, y: centerY });
+        // } else if (code === 'autoZoom') {
+        //   const width = graph.get('width');
+        //   const height = graph.get('height');
+        //   const centerX = width / 2;
+        //   const centerY = height / 2;
+        //   const centerModel = graph.getPointByCanvas(centerX, centerY);
+
+        //   // 调用 fitView
+        //   graph.fitView();
+
+        //   // 在 fitView 之后获取新的画布中心点
+        //   const newCenterCanvas = graph.getCanvasByPoint(centerModel.x, centerModel.y);
+
+        //   // 计算并调整画布的偏移量，使得画布中心点保持不变
+        //   const dx = centerX - newCenterCanvas.x;
+        //   const dy = centerY - newCenterCanvas.y;
+        //   graph.translate(dx, dy);
+        // }
       } else {
         // handleDefaultOperator public方法缺失graph作为参数传入，将graph挂载在cfgs上，源码通过get会获取到graph,完成默认code的执行逻辑
         toolBarInstance._cfgs.graph = graph;
         toolBarInstance.handleDefaultOperator(code);
       }
+      onClick?.(code, graph);
     },
   });
 

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'umi';
 import type { StateType } from '../model';
-import { IGroup } from '@antv/g-base';
+// import { IGroup } from '@antv/g-base';
 import type { Dispatch } from 'umi';
 import {
   typeConfigs,
@@ -16,7 +16,7 @@ import { Item, TreeGraphData, NodeConfig, IItemBaseConfig } from '@antv/g6-core'
 import initToolBar from './components/ToolBar';
 import initTooltips from './components/ToolTips';
 import initContextMenu from './components/ContextMenu';
-import initLegend from './components/Legend';
+// import initLegend from './components/Legend';
 import { SemanticNodeType } from '../enum';
 import G6 from '@antv/g6';
 import { ISemantic, IDataSource } from '../data';
@@ -26,11 +26,14 @@ import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
 import DeleteConfirmModal from './components/DeleteConfirmModal';
 import ClassDataSourceTypeModal from '../components/ClassDataSourceTypeModal';
 import GraphToolBar from './components/GraphToolBar';
-import { cloneDeep } from 'lodash';
+import GraphLegend from './components/GraphLegend';
+import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem';
+
+// import { cloneDeep } from 'lodash';
 
 type Props = {
   domainId: number;
-  graphShowType?: SemanticNodeType;
+  // graphShowType?: SemanticNodeType;
   domainManger: StateType;
   dispatch: Dispatch;
 };
@@ -39,7 +42,7 @@ const DomainManger: React.FC<Props> = ({
   domainManger,
   domainId,
   // graphShowType = SemanticNodeType.DIMENSION,
-  graphShowType,
+  // graphShowType,
   dispatch,
 }) => {
   const ref = useRef(null);
@@ -53,7 +56,7 @@ const DomainManger: React.FC<Props> = ({
 
   const legendDataRef = useRef<any[]>([]);
   const graphRef = useRef<any>(null);
-  const legendDataFilterFunctions = useRef<any>({});
+  // const legendDataFilterFunctions = useRef<any>({});
   const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
 
   const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
@@ -70,30 +73,19 @@ const DomainManger: React.FC<Props> = ({
   const [confirmModalOpenState, setConfirmModalOpenState] = useState<boolean>(false);
   const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
 
-  // const toggleNodeVisibility = (graph: Graph, node: Item, visible: boolean) => {
+  const visibleModeOpenRef = useRef<boolean>(false);
-  //   if (visible) {
+  const [visibleModeOpen, setVisibleModeOpen] = useState<boolean>(false);
-  //     graph.showItem(node);
+
-  //   } else {
+  const graphShowTypeRef = useRef<SemanticNodeType>();
-  //     graph.hideItem(node);
+  const [graphShowTypeState, setGraphShowTypeState] = useState<SemanticNodeType>();
-  //   }
+
-  // };
+  const graphLegendDataSourceIds = useRef<string[]>();
 
   useEffect(() => {
     dimensionListRef.current = dimensionList;
     metricListRef.current = metricList;
   }, [dimensionList, metricList]);
 
-  // const toggleChildrenVisibility = (graph: Graph, node: Item, visible: boolean) => {
-  //   const model = node.getModel();
-  //   if (Array.isArray(model.children)) {
-  //     model.children.forEach((child) => {
-  //       const childNode = graph.findById(child.id);
-  //       toggleNodeVisibility(graph, childNode, visible);
-  //       toggleChildrenVisibility(graph, childNode, visible);
-  //     });
-  //   }
-  // };
-
   const handleSeachNode = (text: string) => {
     const filterData = dataSourceRef.current.reduce(
       (data: ISemantic.IDomainSchemaRelaList, item: ISemantic.IDomainSchemaRelaItem) => {
@@ -117,12 +109,24 @@ const DomainManger: React.FC<Props> = ({
     refreshGraphData(rootGraphData);
   };
 
-  const changeGraphData = (
+  const changeGraphData = (dataSourceList: ISemantic.IDomainSchemaRelaList): TreeGraphData => {
-    dataSourceList: ISemantic.IDomainSchemaRelaList,
+    const relationData = formatterRelationData({
-    type?: SemanticNodeType,
+      dataSourceList,
-  ): TreeGraphData => {
+      type: graphShowTypeRef.current,
-    const relationData = formatterRelationData({ dataSourceList, type, limit: 20 });
+      limit: 20,
-    const legendList = relationData.map((item: any) => {
+      showDataSourceId: graphLegendDataSourceIds.current,
+    });
+
+    const graphRootData = {
+      id: 'root',
+      name: domainManger.selectDomainName,
+      children: relationData,
+    };
+    return graphRootData;
+  };
+
+  const initLegendData = (graphRootData: TreeGraphData) => {
+    const legendList = graphRootData?.children?.map((item: any) => {
       const { id, name } = item;
       return {
         id,
@@ -131,13 +135,7 @@ const DomainManger: React.FC<Props> = ({
         ...typeConfigs.datasource,
       };
     });
-    legendDataRef.current = legendList;
+    legendDataRef.current = legendList as any;
-    const graphRootData = {
-      id: 'root',
-      name: domainManger.selectDomainName,
-      children: relationData,
-    };
-    return graphRootData;
   };
 
   const queryDataSourceList = async (params: {
@@ -153,8 +151,9 @@ const DomainManger: React.FC<Props> = ({
           }),
         );
         const graphRootData = changeGraphData(data);
-        setGraphData(graphRootData);
         dataSourceRef.current = data;
+        initLegendData(graphRootData);
+        setGraphData(graphRootData);
         return graphRootData;
       }
       return false;
@@ -164,41 +163,42 @@ const DomainManger: React.FC<Props> = ({
   };
 
   useEffect(() => {
+    graphLegendDataSourceIds.current = undefined;
     graphRef.current = null;
     queryDataSourceList({ domainId });
-  }, [domainId, graphShowType]);
+  }, [domainId]);
 
-  const getLegendDataFilterFunctions = () => {
+  // const getLegendDataFilterFunctions = () => {
-    legendDataRef.current.map((item: any) => {
+  //   legendDataRef.current.map((item: any) => {
-      const { id } = item;
+  //     const { id } = item;
-      legendDataFilterFunctions.current = {
+  //     legendDataFilterFunctions.current = {
-        ...legendDataFilterFunctions.current,
+  //       ...legendDataFilterFunctions.current,
-        [id]: (d: any) => {
+  //       [id]: (d: any) => {
-          if (d.legendType === id) {
+  //         if (d.legendType === id) {
-            return true;
+  //           return true;
-          }
+  //         }
-          return false;
+  //         return false;
-        },
+  //       },
-      };
+  //     };
-    });
+  //   });
-  };
+  // };
 
-  const setAllActiveLegend = (legend: any) => {
+  // const setAllActiveLegend = (legend: any) => {
-    const legendCanvas = legend._cfgs.legendCanvas;
+  //   const legendCanvas = legend._cfgs.legendCanvas;
-    if (!legendCanvas) {
+  //   if (!legendCanvas) {
-      return;
+  //     return;
-    }
+  //   }
-    // 从图例中找出node-group节点;
+  //   // 从图例中找出node-group节点;
-    const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
+  //   const group = legendCanvas.find((e: any) => e.get('name') === 'node-group');
-    // 数据源的图例节点在node-group中的children中；
+  //   // 数据源的图例节点在node-group中的children中；
-    const groups = group.get('children');
+  //   const groups = group.get('children');
-    groups.forEach((itemGroup: any) => {
+  //   groups.forEach((itemGroup: any) => {
-      const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
+  //     const labelText = itemGroup.find((e: any) => e.get('name') === 'circle-node-text');
-      // legend中activateLegend事件触发在图例节点的Text上，方法中存在向上溯源的逻辑：const shapeGroup = shape.get('parent');
+  //     // legend中activateLegend事件触发在图例节点的Text上，方法中存在向上溯源的逻辑：const shapeGroup = shape.get('parent');
-      // 因此复用实例方法时，在这里不能直接将图例节点传入，需要在节点的children中找任意一个元素作为入参；
+  //     // 因此复用实例方法时，在这里不能直接将图例节点传入，需要在节点的children中找任意一个元素作为入参；
-      legend.activateLegend(labelText);
+  //     legend.activateLegend(labelText);
-    });
+  //   });
-  };
+  // };
 
   const handleContextMenuClickEdit = (item: IItemBaseConfig) => {
     const targetData = item.model;
@@ -273,7 +273,6 @@ const DomainManger: React.FC<Props> = ({
     if (targetData.nodeType === SemanticNodeType.DIMENSION) {
       const targetItem = dimensionListRef.current.find((item) => item.id === targetData.uid);
       if (targetItem) {
-        // setDimensionItem({ ...targetItem });
         setCurrentNodeData(targetItem);
         setConfirmModalOpenState(true);
       } else {
@@ -283,7 +282,6 @@ const DomainManger: React.FC<Props> = ({
     if (targetData.nodeType === SemanticNodeType.METRIC) {
       const targetItem = metricListRef.current.find((item) => item.id === targetData.uid);
       if (targetItem) {
-        // setMetricItem({ ...targetItem });
         setCurrentNodeData(targetItem);
         setConfirmModalOpenState(true);
       } else {
@@ -357,6 +355,16 @@ const DomainManger: React.FC<Props> = ({
     },
   };
 
+  function handleToolBarClick(code: string) {
+    if (code === 'visibleMode') {
+      visibleModeOpenRef.current = !visibleModeOpenRef.current;
+      setVisibleModeOpen(visibleModeOpenRef.current);
+      return;
+    }
+    visibleModeOpenRef.current = false;
+    setVisibleModeOpen(false);
+  }
+
   useEffect(() => {
     if (!Array.isArray(graphData?.children)) {
       return;
@@ -371,17 +379,16 @@ const DomainManger: React.FC<Props> = ({
       const graphNodeList = flatGraphDataNode(graphData.children);
       const graphConfigKey = graphNodeList.length > 20 ? 'dendrogram' : 'mindmap';
 
-      getLegendDataFilterFunctions();
+      // getLegendDataFilterFunctions();
-      const toolbar = initToolBar({ onSearch: handleSeachNode });
+      const toolbar = initToolBar({ onSearch: handleSeachNode, onClick: handleToolBarClick });
       const tooltip = initTooltips();
       const contextMenu = initContextMenu({
-        graphShowType,
         onMenuClick: handleContextMenuClick,
       });
-      const legend = initLegend({
+      // const legend = initLegend({
-        nodeData: legendDataRef.current,
+      //   nodeData: legendDataRef.current,
-        filterFunctions: { ...legendDataFilterFunctions.current },
+      //   filterFunctions: { ...legendDataFilterFunctions.current },
-      });
+      // });
 
       graphRef.current = new G6.TreeGraph({
         container: 'semanticGraph',
@@ -400,7 +407,10 @@ const DomainManger: React.FC<Props> = ({
             'drag-node',
             'drag-canvas',
             // 'activate-relations',
-            'zoom-canvas',
+            {
+              type: 'zoom-canvas',
+              sensitivity: 0.3, // 设置缩放灵敏度，值越小，缩放越不敏感，默认值为 1
+            },
             {
               type: 'activate-relations',
               trigger: 'mouseenter', // 触发方式，可以是 'mouseenter' 或 'click'
@@ -429,45 +439,35 @@ const DomainManger: React.FC<Props> = ({
         layout: {
           ...graphConfigMap[graphConfigKey].layout,
         },
-        plugins: [legend, tooltip, toolbar, contextMenu],
+        plugins: [tooltip, toolbar, contextMenu],
+        // plugins: [legend, tooltip, toolbar, contextMenu],
       });
       graphRef.current.set('initGraphData', graphData);
       graphRef.current.set('initDataSource', dataSourceRef.current);
 
-      const legendCanvas = legend._cfgs.legendCanvas;
+      // const legendCanvas = legend._cfgs.legendCanvas;
 
       // legend模式事件方法bindEvents会有点击图例空白清空选中的逻辑，在注册click事件前，先将click事件队列清空；
-      legend._cfgs.legendCanvas._events.click = [];
+      // legend._cfgs.legendCanvas._events.click = [];
-      // legendCanvas.on('click', (e) => {
+      // legendCanvas.on('click', () => {
-      //   const shape = e.target;
+      //   // @ts-ignore findLegendItemsByState为Legend的 private方法，忽略ts校验
-      //   const shapeGroup = shape.get('parent');
+      //   const activedNodeList = legend.findLegendItemsByState('active');
-      //   const shapeGroupId = shapeGroup?.cfg?.id;
+      //   // 获取当前所有激活节点后进行数据遍历筛选；
-      //   if (shapeGroupId) {
+      //   const activedNodeIds = activedNodeList.map((item: IGroup) => {
-      //     const isActive = shapeGroup.get('active');
+      //     return item.cfg.id;
-      //     const targetNode = graphRef.current.findById(shapeGroupId);
+      //   });
-      //     toggleNodeVisibility(graphRef.current, targetNode, isActive);
+      //   const graphDataClone = cloneDeep(graphData);
-      //     toggleChildrenVisibility(graphRef.current, targetNode, isActive);
+      //   const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
-      //   }
+      //     ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
+      //         if (activedNodeIds.includes(item.id)) {
+      //           children.push(item);
+      //         }
+      //         return children;
+      //       }, [])
+      //     : [];
+      //   graphDataClone.children = filterGraphDataChildren;
+      //   refreshGraphData(graphDataClone);
       // });
-      legendCanvas.on('click', () => {
-        // @ts-ignore findLegendItemsByState为Legend的 private方法，忽略ts校验
-        const activedNodeList = legend.findLegendItemsByState('active');
-        // 获取当前所有激活节点后进行数据遍历筛选；
-        const activedNodeIds = activedNodeList.map((item: IGroup) => {
-          return item.cfg.id;
-        });
-        const graphDataClone = cloneDeep(graphData);
-        const filterGraphDataChildren = Array.isArray(graphDataClone?.children)
-          ? graphDataClone.children.reduce((children: TreeGraphData[], item: TreeGraphData) => {
-              if (activedNodeIds.includes(item.id)) {
-                children.push(item);
-              }
-              return children;
-            }, [])
-          : [];
-        graphDataClone.children = filterGraphDataChildren;
-        refreshGraphData(graphDataClone);
-      });
 
       graphRef.current.node(function (node: NodeConfig) {
         return getNodeConfigByType(node, {
@@ -478,7 +478,7 @@ const DomainManger: React.FC<Props> = ({
       graphRef.current.render();
       graphRef.current.fitView([80, 80]);
 
-      setAllActiveLegend(legend);
+      // setAllActiveLegend(legend);
 
       graphRef.current.on('node:click', (evt: any) => {
         const item = evt.item; // 被操作的节点 item
@@ -513,8 +513,11 @@ const DomainManger: React.FC<Props> = ({
     }
   }, [graphData]);
 
-  const updateGraphData = async () => {
+  const updateGraphData = async (params?: { graphShowType?: SemanticNodeType }) => {
-    const graphRootData = await queryDataSourceList({ domainId });
+    const graphRootData = await queryDataSourceList({
+      domainId,
+      graphShowType: params?.graphShowType,
+    });
     if (graphRootData) {
       refreshGraphData(graphRootData);
     }
@@ -529,6 +532,27 @@ const DomainManger: React.FC<Props> = ({
 
   return (
     <>
+      <GraphLegend
+        legendOptions={legendDataRef.current}
+        defaultCheckAll={true}
+        onChange={(nodeIds: string[]) => {
+          graphLegendDataSourceIds.current = nodeIds;
+          const rootGraphData = changeGraphData(dataSourceRef.current);
+          refreshGraphData(rootGraphData);
+        }}
+      />
+      {visibleModeOpen && (
+        <GraphLegendVisibleModeItem
+          value={graphShowTypeState}
+          onChange={(showType) => {
+            graphShowTypeRef.current = showType;
+            setGraphShowTypeState(showType);
+            const rootGraphData = changeGraphData(dataSourceRef.current);
+            refreshGraphData(rootGraphData);
+          }}
+        />
+      )}
+
       <GraphToolBar
         onClick={({ eventName }: { eventName: string }) => {
           setNodeDataSource(undefined);
@@ -547,7 +571,7 @@ const DomainManger: React.FC<Props> = ({
       />
       <div
         ref={ref}
-        key={`${domainId}-${graphShowType}`}
+        key={`${domainId}`}
         id="semanticGraph"
         style={{ width: '100%', height: 'calc(100vh - 175px)', position: 'relative' }}
       />
@@ -648,7 +672,7 @@ const DomainManger: React.FC<Props> = ({
           onOkClick={() => {
             setConfirmModalOpenState(false);
             updateGraphData();
-            graphShowType === SemanticNodeType.DIMENSION
+            graphShowTypeState === SemanticNodeType.DIMENSION
               ? dispatch({
                   type: 'domainManger/queryDimensionList',
                   payload: {

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/style.less

@@ -20,3 +20,35 @@
     }
   }
 }
+
+.graphLegend {
+  padding: 15px;
+  background: #45be940d;
+  position: absolute;
+  top: 100px;
+  left: 20px;
+  z-index: 1;
+  border: 1px solid #78c16d;
+  min-width: 190px;
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 10px;
+    font-weight: 500;
+  }
+  :global {
+    .ant-form-item {
+      margin-bottom: 2px;
+    }
+  }
+}
+.graphLegendVisibleModeItem {
+  padding: 3px;
+  background: #fff;
+  position: absolute;
+  top: 58px;
+  left: 20px;
+  z-index: 1;
+  border: 1px solid #eee;
+  min-width: 190px;
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/utils.ts

@@ -67,8 +67,9 @@ export const formatterRelationData = (params: {
   dataSourceList: ISemantic.IDomainSchemaRelaList;
   limit?: number;
   type?: SemanticNodeType;
+  showDataSourceId?: string[];
 }): TreeGraphData[] => {
-  const { type, dataSourceList, limit } = params;
+  const { type, dataSourceList, limit, showDataSourceId } = params;
   const relationData = dataSourceList.reduce(
     (relationList: TreeGraphData[], item: ISemantic.IDomainSchemaRelaItem) => {
       const { datasource, dimensions, metrics } = item;
@@ -86,6 +87,7 @@ export const formatterRelationData = (params: {
         const metricList = getMetricChildren(metrics, dataSourceNodeId, limit);
         childrenList = [...dimensionList, ...metricList];
       }
+      if (!showDataSourceId || showDataSourceId.includes(dataSourceNodeId)) {
         relationList.push({
           ...datasource,
           legendType: dataSourceNodeId,
@@ -100,6 +102,7 @@ export const formatterRelationData = (params: {
             stroke: '#5AD8A6',
           },
         });
+      }
       return relationList;
     },
     [],

webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraphCanvas.tsx

@@ -1,10 +1,10 @@
-import { Radio } from 'antd';
+// import { Radio } from 'antd';
 import React, { useState } from 'react';
 import { connect } from 'umi';
 import styles from './components/style.less';
 import type { StateType } from './model';
 import { SemanticNodeType } from './enum';
-import SemanticFlow from './SemanticFlows';
+// import SemanticFlow from './SemanticFlows';
 import SemanticGraph from './SemanticGraph';
 
 type Props = {
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
-  const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DIMENSION);
+  // const [graphShowType, setGraphShowType] = useState<SemanticNodeType>(SemanticNodeType.DIMENSION);
   const { selectDomainId } = domainManger;
   return (
     <div className={styles.semanticGraphCanvas}>
@@ -32,15 +32,15 @@ const SemanticGraphCanvas: React.FC<Props> = ({ domainManger }) => {
       </div> */}
 
       <div className={styles.canvasContainer}>
-        {graphShowType === SemanticNodeType.DATASOURCE ? (
+        {/* {graphShowType === SemanticNodeType.DATASOURCE ? (
           <div style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
             <SemanticFlow />
           </div>
-        ) : (
+        ) : ( */}
         <div style={{ width: '100%' }}>
           <SemanticGraph domainId={selectDomainId} />
         </div>
-        )}
+        {/* )} */}
       </div>
     </div>
   );

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx

@@ -42,7 +42,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       ...pagination,
       domainId: selectDomainId,
     });
-    const { list, pageSize, current, total } = data;
+    const { list, pageSize, current, total } = data || {};
     let resData: any = {};
     if (code === 200) {
       setPagination({

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx

@@ -35,7 +35,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       ...pagination,
       domainId: selectDomainId,
     });
-    const { list, pageSize, current, total } = data;
+    const { list, pageSize, current, total } = data || {};
     let resData: any = {};
     if (code === 200) {
       setPagination({

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx

@@ -17,7 +17,7 @@ import { ISemantic } from '../data';
 
 const { Search } = Input;
 
-type ProjectListProps = {
+type DomainListProps = {
   selectDomainId: number;
   selectDomainName: string;
   domainList: ISemantic.IDomainItem[];
@@ -43,7 +43,7 @@ const projectTreeFlat = (projectTree: DataNode[], filterValue: string): DataNode
   return newProjectTree;
 };
 
-const ProjectListTree: FC<ProjectListProps> = ({
+const DomainListTree: FC<DomainListProps> = ({
   selectDomainId,
   domainList,
   createDomainBtnVisible = true,
@@ -184,7 +184,7 @@ const ProjectListTree: FC<ProjectListProps> = ({
   };
 
   return (
-    <div className={styles.projectList}>
+    <div className={styles.domainList}>
       <Row>
         <Col flex="1 1 200px">
           <Search
@@ -244,4 +244,4 @@ export default connect(
     selectDomainName,
     domainList,
   }),
-)(ProjectListTree);
+)(DomainListTree);

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainTreeSelect.tsx

@@ -0,0 +1,83 @@
+import { message, TreeSelect } from 'antd';
+import type { DataNode } from 'antd/lib/tree';
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { connect } from 'umi';
+import type { Dispatch } from 'umi';
+import type { StateType } from '../model';
+import { getDomainList } from '../../SemanticModel/service';
+import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
+import styles from './style.less';
+import { ISemantic } from '../data';
+
+type Props = {
+  value?: any;
+  onChange?: () => void;
+  treeSelectProps?: Record<string, any>;
+  domainList: ISemantic.IDomainItem[];
+  dispatch: Dispatch;
+};
+
+const DomainTreeSelect: FC<Props> = ({
+  value,
+  onChange,
+  treeSelectProps = {},
+  domainList,
+  dispatch,
+}) => {
+  const [domainTree, setDomainTree] = useState<DataNode[]>([]);
+
+  const initProjectTree = async () => {
+    const { code, data, msg } = await getDomainList();
+    if (code === 200) {
+      dispatch({
+        type: 'domainManger/setDomainList',
+        payload: { domainList: data },
+      });
+    } else {
+      message.error(msg);
+    }
+  };
+
+  useEffect(() => {
+    if (domainList.length === 0) {
+      initProjectTree();
+    }
+  }, []);
+
+  useEffect(() => {
+    const treeData = addPathInTreeData(constructorClassTreeFromList(domainList));
+    setDomainTree(treeData);
+  }, [domainList]);
+
+  return (
+    <div className={styles.domainTreeSelect}>
+      <TreeSelect
+        showSearch
+        style={{ width: '100%' }}
+        value={value}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder={'请选择主题域'}
+        allowClear
+        multiple
+        treeNodeFilterProp="title"
+        treeDefaultExpandAll
+        onChange={onChange}
+        treeData={domainTree}
+        {...treeSelectProps}
+      />
+    </div>
+  );
+};
+
+export default connect(
+  ({
+    domainManger: { selectDomainId, selectDomainName, domainList },
+  }: {
+    domainManger: StateType;
+  }) => ({
+    selectDomainId,
+    selectDomainName,
+    domainList,
+  }),
+)(DomainTreeSelect);

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DefaultSettingForm.tsx

@@ -33,8 +33,6 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
 ) => {
   const [form] = Form.useForm();
   const [metricListOptions, setMetricListOptions] = useState<any>([]);
-  const [unitState, setUnit] = useState<number | null>();
-  const [periodState, setPeriod] = useState<string>();
   const [dataItemListOptions, setDataItemListOptions] = useState<any>([]);
   const formatEntityData = formatRichEntityDataListToIds(entityData);
   const getFormValidateFields = async () => {
@@ -47,15 +45,10 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
 
   useEffect(() => {
     form.resetFields();
-    setUnit(null);
-    setPeriod('');
     if (!entityData?.chatDefaultConfig) {
       return;
     }
     const { chatDefaultConfig, id } = formatEntityData;
-    const { period, unit } = chatDefaultConfig;
-    setUnit(unit);
-    setPeriod(period);
     form.setFieldsValue({
       ...chatDefaultConfig,
       id,
@@ -172,6 +165,7 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
         initialValues={{
           unit: 7,
           period: 'DAY',
+          timeMode: 'LAST',
         }}
       >
         <FormItem hidden={true} name="id" label="ID">
@@ -249,7 +243,6 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
             </FormItem> */}
           </>
         )}
-
         <FormItem
           label={
             <FormItemTitle
@@ -259,6 +252,7 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
           }
         >
           <Input.Group compact>
+            {chatConfigType === ChatConfigType.DETAIL ? (
               <span
                 style={{
                   display: 'inline-block',
@@ -266,39 +260,31 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
                   marginRight: '8px',
                 }}
               >
-              {chatConfigType === ChatConfigType.DETAIL ? '前' : '最近'}
+                前
               </span>
-            <InputNumber
+            ) : (
-              value={unitState}
+              <>
-              style={{ width: '120px' }}
+                <FormItem name={'timeMode'} noStyle>
-              onChange={(value) => {
+                  <Select style={{ width: '90px' }}>
-                setUnit(value);
+                    <Option value="LAST">前</Option>
-                form.setFieldValue('unit', value);
+                    <Option value="RECENT">最近</Option>
-              }}
+                  </Select>
-            />
+                </FormItem>
-            <Select
+              </>
-              value={periodState}
+            )}
-              style={{ width: '100px' }}
+            <FormItem name={'unit'} noStyle>
-              onChange={(value) => {
+              <InputNumber style={{ width: '120px' }} />
-                form.setFieldValue('period', value);
+            </FormItem>
-                setPeriod(value);
+            <FormItem name={'period'} noStyle>
-              }}
+              <Select style={{ width: '90px' }}>
-            >
                 <Option value="DAY">天</Option>
                 <Option value="WEEK">周</Option>
                 <Option value="MONTH">月</Option>
                 <Option value="YEAR">年</Option>
               </Select>
+            </FormItem>
           </Input.Group>
         </FormItem>
-
-        <FormItem name="unit" hidden={true}>
-          <InputNumber />
-        </FormItem>
-        <FormItem name="period" hidden={true}>
-          <Input />
-        </FormItem>
-
         <FormItem>
           <Button
             type="primary"

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Modal, message, Tabs } from 'antd';
+import { Modal, message, Tabs, Button } from 'antd';
 
 import { addDomainExtend, editDomainExtend } from '../../service';
 import DimensionMetricVisibleTransfer from './DimensionMetricVisibleTransfer';
@@ -40,6 +40,8 @@ const DimensionAndMetricVisibleModal: React.FC<Props> = ({
   const [knowledgeInfosMap, setKnowledgeInfosMap] = useState<IChatConfig.IKnowledgeInfosItemMap>(
     {},
   );
+
+  const [activeKey, setActiveKey] = useState<string>('visibleSetting');
   const formRef = useRef<any>();
 
   const [globalKnowledgeConfigInitialValues, setGlobalKnowledgeConfigInitialValues] =
@@ -200,10 +202,17 @@ const DimensionAndMetricVisibleModal: React.FC<Props> = ({
         title={settingTypeConfig.modalTitle}
         maskClosable={false}
         open={visible}
-        footer={renderFooter()}
+        footer={activeKey === 'visibleSetting' ? false : renderFooter()}
+        // footer={false}
         onCancel={onCancel}
       >
-        <Tabs items={tabItem} defaultActiveKey="visibleSetting" />
+        <Tabs
+          items={tabItem}
+          defaultActiveKey="visibleSetting"
+          onChange={(key) => {
+            setActiveKey(key);
+          }}
+        />
       </Modal>
     </>
   );

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx

@@ -1,4 +1,4 @@
-import { Table, Transfer, Checkbox, Button } from 'antd';
+import { Table, Transfer, Checkbox, Button, Tag } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem } from 'antd/es/transfer';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
@@ -9,7 +9,7 @@ import DimensionValueSettingModal from './DimensionValueSettingModal';
 import TransTypeTag from '../TransTypeTag';
 import { TransType } from '../../enum';
 import TableTitleTooltips from '../../components/TableTitleTooltips';
-
+import { SemanticNodeType } from '../../enum';
 interface RecordType {
   id: number;
   key: string;
@@ -19,8 +19,8 @@ interface RecordType {
 }
 
 type Props = {
-  knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap;
+  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
-  onKnowledgeInfosMapChange: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
+  onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
   [key: string]: any;
 };
 
@@ -56,7 +56,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
     onKnowledgeInfosMapChange?.(knowledgeMap);
   };
 
-  const rightColumns: ColumnsType<RecordType> = [
+  let rightColumns: ColumnsType<RecordType> = [
     {
       dataIndex: 'name',
       title: '名称',
@@ -65,7 +65,7 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
       dataIndex: 'type',
       width: 80,
       title: '类型',
-      render: (type) => {
+      render: (type: SemanticNodeType) => {
         return <TransTypeTag type={type} />;
       },
     },
@@ -78,11 +78,11 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
         />
       ),
       width: 120,
-      render: (_, record) => {
+      render: (_: any, record: RecordType) => {
         const { type, bizName } = record;
         return type === TransType.DIMENSION ? (
           <Checkbox
-            checked={knowledgeInfosMap[bizName]?.searchEnable}
+            checked={knowledgeInfosMap?.[bizName]?.searchEnable}
             onChange={(e: CheckboxChangeEvent) => {
               updateKnowledgeInfosMap(record, { searchEnable: e.target.checked });
             }}
@@ -98,18 +98,18 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
     {
       title: '操作',
       dataIndex: 'x',
-      render: (_, record) => {
+      render: (_: any, record: RecordType) => {
         const { type, bizName } = record;
         return type === TransType.DIMENSION ? (
           <Button
             style={{ padding: 0 }}
             key="editable"
             type="link"
-            disabled={!knowledgeInfosMap[bizName]?.searchEnable}
+            disabled={!knowledgeInfosMap?.[bizName]?.searchEnable}
             onClick={(event) => {
               setCurrentRecord(record);
               setCurrentDimensionSettingFormData(
-                knowledgeInfosMap[bizName]?.knowledgeAdvancedConfig,
+                knowledgeInfosMap?.[bizName]?.knowledgeAdvancedConfig,
               );
               setDimensionValueSettingModalVisible(true);
               event.stopPropagation();
@@ -137,6 +137,9 @@ const DimensionMetricVisibleTableTransfer: React.FC<Props> = ({
       },
     },
   ];
+  if (!knowledgeInfosMap) {
+    rightColumns = leftColumns;
+  }
   return (
     <>
       <Transfer {...restProps}>

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx

@@ -1,4 +1,3 @@
-import { Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { IChatConfig } from '../../data';
 import DimensionMetricVisibleTableTransfer from './DimensionMetricVisibleTableTransfer';
@@ -10,11 +9,11 @@ interface RecordType {
 }
 
 type Props = {
-  knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap;
+  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
   sourceList: any[];
   targetList: string[];
   titles?: string[];
-  onKnowledgeInfosMapChange: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
+  onKnowledgeInfosMapChange?: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
   onChange?: (params?: any) => void;
   transferProps?: Record<string, any>;
 };
@@ -75,20 +74,6 @@ const DimensionMetricVisibleTransfer: React.FC<Props> = ({
         }}
         targetKeys={targetKeys}
         onChange={handleChange}
-        render={(item) => (
-          <div style={{ display: 'flex' }}>
-            <span style={{ flex: '1' }}>{item.name}</span>
-            <span style={{ flex: '0 1 40px' }}>
-              {item.type === 'dimension' ? (
-                <Tag color="blue">{'维度'}</Tag>
-              ) : item.type === 'metric' ? (
-                <Tag color="orange">{'指标'}</Tag>
-              ) : (
-                <></>
-              )}
-            </span>
-          </div>
-        )}
         {...transferProps}
       />
     </div>

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntityCreateForm.tsx

@@ -7,7 +7,7 @@ import { formLayout } from '@/components/FormHelper/utils';
 import styles from '../style.less';
 
 type Props = {
-  entityData?: { id: number; names: string[] };
+  domainData?: ISemantic.IDomainItem;
   dimensionList: ISemantic.IDimensionList;
   domainId: number;
   onSubmit: () => void;
@@ -16,7 +16,7 @@ type Props = {
 const FormItem = Form.Item;
 
 const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
-  { entityData, dimensionList, domainId, onSubmit },
+  { domainData, dimensionList, domainId, onSubmit },
   ref,
 ) => {
   const [form] = Form.useForm();
@@ -27,15 +27,15 @@ const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
 
   useEffect(() => {
     form.resetFields();
-    if (!entityData) {
+    if (!domainData?.entity) {
       return;
     }
-
+    const { entity } = domainData;
     form.setFieldsValue({
-      ...entityData,
+      ...entity,
-      name: entityData.names.join(','),
+      name: entity.names.join(','),
     });
-  }, [entityData]);
+  }, [domainData]);
 
   useImperativeHandle(ref, () => ({
     getFormValidateFields,
@@ -54,8 +54,8 @@ const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
   const saveEntity = async () => {
     const values = await form.validateFields();
     const { name } = values;
-
     const { code, msg, data } = await updateDomain({
+      ...domainData,
       entity: {
         ...values,
         names: name.split(','),

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySettingSection.tsx

@@ -6,7 +6,7 @@ import type { StateType } from '../../model';
 import { getDomainDetail } from '../../service';
 import ProCard from '@ant-design/pro-card';
 import EntityCreateForm from './EntityCreateForm';
-import type { IChatConfig } from '../../data';
+import type { ISemantic } from '../../data';
 
 type Props = {
   dispatch: Dispatch;
@@ -14,9 +14,9 @@ type Props = {
 };
 
 const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
-  const { selectDomainId, dimensionList, metricList } = domainManger;
+  const { selectDomainId, dimensionList } = domainManger;
 
-  const [entityData, setEntityData] = useState<IChatConfig.IChatRichConfig>();
+  const [domainData, setDomainData] = useState<ISemantic.IDomainItem>();
 
   const entityCreateRef = useRef<any>({});
 
@@ -26,9 +26,7 @@ const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
     });
 
     if (code === 200) {
-      const { entity } = data;
+      setDomainData(data);
-
-      setEntityData(entity);
 
       return;
     }
@@ -52,7 +50,7 @@ const EntitySettingSection: React.FC<Props> = ({ domainManger }) => {
             <EntityCreateForm
               ref={entityCreateRef}
               domainId={Number(selectDomainId)}
-              entityData={entityData}
+              domainData={domainData}
               dimensionList={dimensionList}
               onSubmit={() => {
                 queryDomainData();

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx

@@ -20,6 +20,7 @@ import { getMeasureListByDomainId } from '../service';
 import { creatExprMetric, updateExprMetric } from '../service';
 import { ISemantic } from '../data';
 import { history } from 'umi';
+import { check } from 'prettier';
 
 export type CreateFormProps = {
   datasourceId?: number;
@@ -97,7 +98,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
     if (currentStep < 1) {
       forward();
     } else {
-      // onSubmit?.(submitForm);
       await saveMetric(submitForm);
     }
   };
@@ -244,7 +244,11 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
           name="isPercent"
           valuePropName="checked"
         >
-          <Switch />
+          <Switch
+            onChange={(checked) => {
+              form.setFieldValue(['dataFormat', 'needMultiply100'], checked);
+            }}
+          />
         </FormItem>
         {isPercentState && (
           <>
@@ -265,10 +269,6 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
                   title={'原始值是否乘以100'}
                   subTitle={'如 原始值0.001 ->展示值0.1% '}
                 />
-                // <FormItemTitle
-                //   title={'仅添加百分号'}
-                //   subTitle={'开启后，会对原始数值直接加%，如0.02 -> 0.02%'}
-                // />
               }
               name={['dataFormat', 'needMultiply100']}
               valuePropName="checked"

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Input, Switch, message } from 'antd';
-import SelectPartenr from '@/components/SelectPartner';
+import SelectPartner from '@/components/SelectPartner';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
 import { connect } from 'umi';
 import type { Dispatch } from 'umi';
@@ -110,7 +110,7 @@ const PermissionAdminForm: React.FC<Props> = ({ domainManger, onValuesChange })
           <>
             {APP_TARGET === 'inner' && (
               <FormItem name="viewOrgs" label="按组织">
-                <SelectPartenr
+                <SelectPartner
                   type="selectedDepartment"
                   treeSelectProps={{
                     placeholder: '请选择需要授权的部门',

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx

@@ -6,7 +6,9 @@ import { createGroupAuth, updateGroupAuth } from '../../service';
 import PermissionCreateForm from './PermissionCreateForm';
 import type { StateType } from '../../model';
 import SqlEditor from '@/components/SqlEditor';
+import { TransType } from '../../enum';
 import DimensionMetricVisibleTransfer from '../Entity/DimensionMetricVisibleTransfer';
+import { wrapperTransTypeAndId } from '../Entity/utils';
 import styles from '../style.less';
 
 type Props = {
@@ -30,32 +32,10 @@ const PermissionCreateDrawer: React.FC<Props> = ({
   const { dimensionList, metricList } = domainManger;
   const [form] = Form.useForm();
   const basicInfoFormRef = useRef<any>(null);
-  const [sourceDimensionList, setSourceDimensionList] = useState<any[]>([]);
-  const [sourceMetricList, setSourceMetricList] = useState<any[]>([]);
   const [selectedDimensionKeyList, setSelectedDimensionKeyList] = useState<string[]>([]);
   const [selectedMetricKeyList, setSelectedMetricKeyList] = useState<string[]>([]);
 
-  useEffect(() => {
+  const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);
-    const list = dimensionList.reduce((highList: any[], item: any) => {
-      const { name, bizName, sensitiveLevel } = item;
-      if (sensitiveLevel === 2) {
-        highList.push({ id: bizName, name, type: 'dimension' });
-      }
-      return highList;
-    }, []);
-    setSourceDimensionList(list);
-  }, [dimensionList]);
-
-  useEffect(() => {
-    const list = metricList.reduce((highList: any[], item: any) => {
-      const { name, bizName, sensitiveLevel } = item;
-      if (sensitiveLevel === 2) {
-        highList.push({ id: bizName, name, type: 'metric' });
-      }
-      return highList;
-    }, []);
-    setSourceMetricList(list);
-  }, [metricList]);
 
   const saveAuth = async () => {
     const basicInfoFormValues = await basicInfoFormRef.current.formRef.validateFields();
@@ -103,9 +83,24 @@ const PermissionCreateDrawer: React.FC<Props> = ({
       dimensionFilterDescription,
       dimensionFilters: Array.isArray(dimensionFilters) ? dimensionFilters[0] || '' : '',
     });
+    const dimensionAuth = permissonData?.authRules?.[0]?.dimensions || [];
+    const metricAuth = permissonData?.authRules?.[0]?.metrics || [];
+    setSelectedDimensionKeyList(dimensionAuth);
+    setSelectedMetricKeyList(metricAuth);
 
-    setSelectedDimensionKeyList(permissonData?.authRules?.[0]?.dimensions || []);
+    const dimensionKeys = dimensionList.reduce((dimensionChangeList: string[], item: any) => {
-    setSelectedMetricKeyList(permissonData?.authRules?.[0]?.metrics || []);
+      if (dimensionAuth.includes(item.bizName)) {
+        dimensionChangeList.push(wrapperTransTypeAndId(TransType.DIMENSION, item.id));
+      }
+      return dimensionChangeList;
+    }, []);
+    const metricKeys = metricList.reduce((metricChangeList: string[], item: any) => {
+      if (metricAuth.includes(item.bizName)) {
+        metricChangeList.push(wrapperTransTypeAndId(TransType.METRIC, item.id));
+      }
+      return metricChangeList;
+    }, []);
+    setSelectedKeyList([...dimensionKeys, ...metricKeys]);
   }, [permissonData]);
 
   const renderFooter = () => {
@@ -138,7 +133,7 @@ const PermissionCreateDrawer: React.FC<Props> = ({
         footer={renderFooter()}
         onClose={onCancel}
       >
-        <div style={{ overflow: 'auto', margin: '0 auto', width: '1000px' }}>
+        <div style={{ overflow: 'auto', margin: '0 auto', width: '1200px' }}>
           <Space direction="vertical" style={{ width: '100%' }} size={20}>
             <ProCard title="基本信息" bordered>
               <PermissionCreateForm
@@ -148,15 +143,37 @@ const PermissionCreateDrawer: React.FC<Props> = ({
               />
             </ProCard>
 
-            <ProCard title="列权限" bordered>
+            <ProCard title="列权限" bordered tooltip="仅对敏感度为高的指标/维度进行授权">
               <DimensionMetricVisibleTransfer
                 titles={['未授权维度/指标', '已授权维度/指标']}
-                sourceList={[...sourceDimensionList, ...sourceMetricList]}
+                sourceList={[
-                targetList={[...selectedDimensionKeyList, ...selectedMetricKeyList]}
+                  ...dimensionList.map((item) => {
-                onChange={(bizNameList: string[]) => {
+                    const transType = TransType.DIMENSION;
+                    const { id } = item;
+                    return {
+                      ...item,
+                      transType,
+                      key: wrapperTransTypeAndId(transType, id),
+                    };
+                  }),
+                  ...metricList.map((item) => {
+                    const transType = TransType.METRIC;
+                    const { id } = item;
+                    return {
+                      ...item,
+                      transType,
+                      key: wrapperTransTypeAndId(transType, id),
+                    };
+                  }),
+                ]}
+                targetList={selectedKeyList}
+                onChange={(newTargetKeys: string[]) => {
+                  setSelectedKeyList(newTargetKeys);
                   const dimensionKeyChangeList = dimensionList.reduce(
                     (dimensionChangeList: string[], item: any) => {
-                      if (bizNameList.includes(item.bizName)) {
+                      if (
+                        newTargetKeys.includes(wrapperTransTypeAndId(TransType.DIMENSION, item.id))
+                      ) {
                         dimensionChangeList.push(item.bizName);
                       }
                       return dimensionChangeList;
@@ -165,7 +182,9 @@ const PermissionCreateDrawer: React.FC<Props> = ({
                   );
                   const metricKeyChangeList = metricList.reduce(
                     (metricChangeList: string[], item: any) => {
-                      if (bizNameList.includes(item.bizName)) {
+                      if (
+                        newTargetKeys.includes(wrapperTransTypeAndId(TransType.METRIC, item.id))
+                      ) {
                         metricChangeList.push(item.bizName);
                       }
                       return metricChangeList;

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useImperativeHandle, forwardRef } from 'react';
 import { Form, Input } from 'antd';
 import type { ForwardRefRenderFunction } from 'react';
-import SelectPartenr from '@/components/SelectPartner';
+import SelectPartner from '@/components/SelectPartner';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
 import { formLayout } from '@/components/FormHelper/utils';
 import styles from '../style.less';
@@ -54,7 +54,7 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
         </FormItem>
         {APP_TARGET === 'inner' && (
           <FormItem name="authorizedDepartmentIds" label="按组织">
-            <SelectPartenr
+            <SelectPartner
               type="selectedDepartment"
               treeSelectProps={{
                 placeholder: '请选择需要授权的部门',

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx

@@ -6,7 +6,7 @@ import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../../model';
 import { getGroupAuthInfo, removeGroupAuth } from '../../service';
-import { getDepartmentTree } from '@/components/SelectPartner/service';
+import { getOrganizationTree } from '@/components/SelectPartner/service';
 import { getAllUser } from '@/components/SelectTMEPerson/service';
 import PermissionCreateDrawer from './PermissionCreateDrawer';
 import { findDepartmentTree } from '@/pages/SemanticModel/utils';
@@ -52,7 +52,7 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
   }, [selectDomainId]);
 
   const queryDepartmentData = async () => {
-    const { code, data } = await getDepartmentTree();
+    const { code, data } = await getOrganizationTree();
     if (code === 200 || code === '0') {
       setDepartmentTreeData(data);
     }
@@ -120,7 +120,7 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
       render: (_, record: any) => {
         const { authorizedUsers = [] } = record;
         const personNameList = tmePerson.reduce((enNames: string[], item: any) => {
-          const hasPerson = authorizedUsers.includes(item.enName);
+          const hasPerson = authorizedUsers.includes(item.name);
           if (hasPerson) {
             enNames.push(item.displayName);
           }

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less

@@ -95,7 +95,11 @@
   }
 }
 
-.projectList {
+.domainTreeSelect {
+  width: 300px;
+}
+
+.domainList {
   display: flex;
   flex-direction: column;
   width: 400px;

webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts

@@ -89,6 +89,7 @@ export declare namespace ISemantic {
     admins?: string[];
     adminOrgs?: any[];
     isOpen?: number;
+    entity?: { entityId: number; names: string[] };
     dimensionCnt?: number;
     metricCnt?: number;
   }

webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts

@@ -1,7 +1,11 @@
 import request from 'umi-request';
 
+const getRunningEnv = () => {
+  return window.location.pathname.includes('/chatSetting/') ? 'chat' : 'semantic';
+};
+
 export function getDomainList(): Promise<any> {
-  if (window.RUNNING_ENV === 'chat') {
+  if (getRunningEnv() === 'chat') {
     return request.get(`${process.env.CHAT_API_BASE_URL}conf/domainList`);
   }
   return request.get(`${process.env.API_BASE_URL}domain/getDomainList`);
@@ -40,10 +44,11 @@ export function updateDatasource(data: any): Promise<any> {
 }
 
 export function getDimensionList(data: any): Promise<any> {
+  const { domainId } = data;
   const queryParams = {
-    data: { current: 1, pageSize: 999999, ...data },
+    data: { current: 1, pageSize: 999999, ...data, ...(domainId ? { domainIds: [domainId] } : {}) },
   };
-  if (window.RUNNING_ENV === 'chat') {
+  if (getRunningEnv() === 'chat') {
     return request.post(`${process.env.CHAT_API_BASE_URL}conf/dimension/page`, queryParams);
   }
   return request.post(`${process.env.API_BASE_URL}dimension/queryDimension`, queryParams);
@@ -62,10 +67,11 @@ export function updateDimension(data: any): Promise<any> {
 }
 
 export function queryMetric(data: any): Promise<any> {
+  const { domainId } = data;
   const queryParams = {
-    data: { current: 1, pageSize: 999999, ...data },
+    data: { current: 1, pageSize: 999999, ...data, ...(domainId ? { domainIds: [domainId] } : {}) },
   };
-  if (window.RUNNING_ENV === 'chat') {
+  if (getRunningEnv() === 'chat') {
     return request.post(`${process.env.CHAT_API_BASE_URL}conf/metric/page`, queryParams);
   }
   return request.post(`${process.env.API_BASE_URL}metric/queryMetric`, queryParams);

webapp/packages/supersonic-fe/src/pages/SemanticModel/utils.tsx

@@ -2,7 +2,7 @@ import type { API } from '@/services/API';
 import { ISemantic } from './data';
 import type { DataNode } from 'antd/lib/tree';
 
-export const changeTreeData = (treeData: API.ProjectList, auth?: boolean): DataNode[] => {
+export const changeTreeData = (treeData: API.DomainList, auth?: boolean): DataNode[] => {
   return treeData.map((item: any) => {
     const newItem: DataNode = {
       ...item,
@@ -14,7 +14,7 @@ export const changeTreeData = (treeData: API.ProjectList, auth?: boolean): DataN
   });
 };
 
-export const addPathInTreeData = (treeData: API.ProjectList, loopPath: any[] = []): any => {
+export const addPathInTreeData = (treeData: API.DomainList, loopPath: any[] = []): any => {
   return treeData.map((item: any) => {
     const { children, parentId = [] } = item;
     const path = loopPath.slice();
@@ -41,6 +41,7 @@ export const constructorClassTreeFromList = (list: any[], parentId: number = 0)
         nodeItem.children = children;
       }
       nodeItem.key = nodeItem.id;
+      nodeItem.value = nodeItem.id;
       nodeItem.title = nodeItem.name;
       nodeList.push(nodeItem);
     }
@@ -49,7 +50,7 @@ export const constructorClassTreeFromList = (list: any[], parentId: number = 0)
   return tree;
 };
 
-export const treeParentKeyLists = (treeData: API.ProjectList): string[] => {
+export const treeParentKeyLists = (treeData: API.DomainList): string[] => {
   let keys: string[] = [];
   treeData.forEach((item: any) => {
     if (item.children && item.children.length > 0) {
@@ -67,10 +68,10 @@ export const findDepartmentTree: any = (treeData: any[], projectId: string) => {
   }
   let newStepList: any[] = [];
   const departmentData = treeData.find((item) => {
-    if (item.subDepartments) {
+    if (item.subOrganizations) {
-      newStepList = newStepList.concat(item.subDepartments);
+      newStepList = newStepList.concat(item.subOrganizations);
     }
-    return item.key === projectId;
+    return item.id === projectId;
   });
   if (departmentData) {
     return departmentData;