[improvement][semantic-fe] Optimized the frontend display and code logic of visual modeling, and updated the relevant interface of the permission management module.

2025-12-18 00:07:21 +00:00 · 2023-08-07 10:10:54 +08:00
parent aa0a100a85
commit ef7c37a8da
39 changed files with 878 additions and 454 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/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({
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
+++ b/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({
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectList.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectList.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);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainTreeSelect.tsx
+++ b/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);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DefaultSettingForm.tsx
+++ b/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,46 +252,39 @@ const DefaultSettingForm: ForwardRefRenderFunction<any, Props> = (
          }
        >
          <Input.Group compact>
-            <span
-              style={{
-                display: 'inline-block',
-                lineHeight: '32px',
-                marginRight: '8px',
-              }}
-            >
-              {chatConfigType === ChatConfigType.DETAIL ? '前' : '最近'}
-            </span>
-            <InputNumber
-              value={unitState}
-              style={{ width: '120px' }}
-              onChange={(value) => {
-                setUnit(value);
-                form.setFieldValue('unit', value);
-              }}
-            />
-            <Select
-              value={periodState}
-              style={{ width: '100px' }}
-              onChange={(value) => {
-                form.setFieldValue('period', value);
-                setPeriod(value);
-              }}
-            >
-              <Option value="DAY">天</Option>
-              <Option value="WEEK">周</Option>
-              <Option value="MONTH">月</Option>
-              <Option value="YEAR">年</Option>
-            </Select>
+            {chatConfigType === ChatConfigType.DETAIL ? (
+              <span
+                style={{
+                  display: 'inline-block',
+                  lineHeight: '32px',
+                  marginRight: '8px',
+                }}
+              >
+                前
+              </span>
+            ) : (
+              <>
+                <FormItem name={'timeMode'} noStyle>
+                  <Select style={{ width: '90px' }}>
+                    <Option value="LAST">前</Option>
+                    <Option value="RECENT">最近</Option>
+                  </Select>
+                </FormItem>
+              </>
+            )}
+            <FormItem name={'unit'} noStyle>
+              <InputNumber style={{ width: '120px' }} />
+            </FormItem>
+            <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"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionAndMetricVisibleModal.tsx
+++ b/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>
    </>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTableTransfer.tsx
+++ b/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;
-  onKnowledgeInfosMapChange: (knowledgeInfosMap: IChatConfig.IKnowledgeInfosItemMap) => void;
+  knowledgeInfosMap?: IChatConfig.IKnowledgeInfosItemMap;
+  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}>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/DimensionMetricVisibleTransfer.tsx
+++ b/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>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntityCreateForm.tsx
+++ b/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,
-      name: entityData.names.join(','),
+      ...entity,
+      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(','),
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Entity/EntitySettingSection.tsx
+++ b/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;
-
-      setEntityData(entity);
+      setDomainData(data);

      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();
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/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"
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
+++ b/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: '请选择需要授权的部门',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateDrawer.tsx
+++ b/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 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 [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);

  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 || []);
-    setSelectedMetricKeyList(permissonData?.authRules?.[0]?.metrics || []);
+    const dimensionKeys = dimensionList.reduce((dimensionChangeList: string[], item: any) => {
+      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]}
-                targetList={[...selectedDimensionKeyList, ...selectedMetricKeyList]}
-                onChange={(bizNameList: string[]) => {
+                sourceList={[
+                  ...dimensionList.map((item) => {
+                    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;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
+++ b/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: '请选择需要授权的部门',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
+++ b/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);
          }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
+++ b/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;