[improvement][headless-fe] Added view management functionality. (#701)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

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

@@ -1,13 +1,15 @@
-import { message } from 'antd';
+import { message, Tabs, Button, Space } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
-import { connect, useParams } from 'umi';
+import { connect, useParams, history } from 'umi';
 import type { StateType } from '../model';
 import styles from './style.less';
+import { ArrowLeftOutlined } from '@ant-design/icons';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
 import { ISemantic } from '../data';
 import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
 import MetricInfoSider from './MetricInfoSider';
+import type { TabsProps } from 'antd';
 
 type Props = Record<string, any>;
 
@@ -17,6 +19,9 @@ const MetricDetail: React.FC<Props> = () => {
   const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
   const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
   const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+  const [drillDownDimension, setDrillDownDimension] = useState<ISemantic.IDrillDownDimensionItem[]>(
+    [],
+  );
   const [relationDimensionOptions, setRelationDimensionOptions] = useState<
     { value: string; label: string; modelId: number }[]
   >([]);
@@ -38,6 +43,7 @@ const MetricDetail: React.FC<Props> = () => {
   const queryDrillDownDimension = async (metricId: number) => {
     const { code, data, msg } = await getDrillDownDimension(metricId);
     if (code === 200 && Array.isArray(data)) {
+      setDrillDownDimension(data);
       const ids = data.map((item) => item.dimensionId);
       queryDimensionList(ids);
       return data;
@@ -70,15 +76,57 @@ const MetricDetail: React.FC<Props> = () => {
     return [];
   };
 
+  const tabItems: TabsProps['items'] = [
+    {
+      key: 'metricTrend',
+      label: '图表',
+      children: (
+        <MetricTrendSection
+          metircData={metircData}
+          relationDimensionOptions={relationDimensionOptions}
+          dimensionList={dimensionList}
+        />
+      ),
+    },
+    // {
+    //   key: 'metricCaliberInput',
+    //   label: '基础信息',
+    //   children: <></>,
+    // },
+    // {
+    //   key: 'metricDataRemark',
+    //   label: '备注',
+    //   children: <></>,
+    // },
+  ];
+
   return (
     <>
       <div className={styles.metricDetailWrapper}>
         <div className={styles.metricDetail}>
           <div className={styles.tabContainer}>
-            <MetricTrendSection
-              metircData={metircData}
-              relationDimensionOptions={relationDimensionOptions}
-              dimensionList={dimensionList}
+            <Tabs
+              defaultActiveKey="metricTrend"
+              items={tabItems}
+              tabBarExtraContent={{
+                right: (
+                  <Button
+                    size="middle"
+                    type="link"
+                    key="backListBtn"
+                    onClick={() => {
+                      history.push('/metric/market');
+                    }}
+                  >
+                    <Space>
+                      <ArrowLeftOutlined />
+                      返回列表页
+                    </Space>
+                  </Button>
+                ),
+              }}
+              size="large"
+              className={styles.metricDetailTab}
             />
           </div>
           <div className={styles.siderContainer}>
@@ -91,20 +139,20 @@ const MetricDetail: React.FC<Props> = () => {
             />
           </div>
         </div>
+        <DimensionAndMetricRelationModal
+          metricItem={metircData}
+          relationsInitialValue={drillDownDimension}
+          open={metricRelationModalOpenState}
+          onCancel={() => {
+            setMetricRelationModalOpenState(false);
+          }}
+          onSubmit={(relations) => {
+            queryMetricData(metricId);
+            queryDrillDownDimension(metricId);
+            setMetricRelationModalOpenState(false);
+          }}
+        />
       </div>
-      <DimensionAndMetricRelationModal
-        metricItem={metircData}
-        relationsInitialValue={metircData?.relateDimension?.drillDownDimensions}
-        open={metricRelationModalOpenState}
-        onCancel={() => {
-          setMetricRelationModalOpenState(false);
-        }}
-        onSubmit={(relations) => {
-          queryMetricData(metricId);
-          queryDrillDownDimension(metricId);
-          setMetricRelationModalOpenState(false);
-        }}
-      />
     </>
   );
 };