[improvement][headless-fe] Revamped the interaction for semantic modeling routing and successfully implemented the switching between dimension and dataset management. (#1934)

Co-authored-by: tristanliu <tristanliu@tencent.com>

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

@@ -1,7 +1,8 @@
 import { message, Tabs, Button, Space } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
-import { useParams, history } from '@umijs/max';
+import { useParams, history, Helmet } from '@umijs/max';
+import { BASE_TITLE } from '@/common/constants';
 import styles from './style.less';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
@@ -32,6 +33,9 @@ const MetricDetail: React.FC<Props> = () => {
   }, [metricId]);
 
   const queryMetricData = async (metricId: string) => {
+    if (!metricId) {
+      return;
+    }
     const { code, data, msg } = await getMetricData(metricId);
     if (code === 200) {
       setMetircData({ ...data });
@@ -80,7 +84,7 @@ const MetricDetail: React.FC<Props> = () => {
     {
       key: 'metricCaliberInput',
       label: '基础信息',
-      children: <MetricBasicInfo metircData={metircData} onQueryMetricData={queryMetricData} />,
+      children: <MetricBasicInfo metircData={metircData} />,
     },
     {
       key: 'metricTrend',
@@ -103,8 +107,20 @@ const MetricDetail: React.FC<Props> = () => {
 
   return (
     <>
+      <Helmet
+        title={`${metircData?.id ? `[指标]${metircData?.name}-${BASE_TITLE}` : '新建指标'}`}
+      />
       <div className={styles.metricDetailWrapper}>
         <div className={styles.metricDetail}>
+          <div className={styles.siderContainer}>
+            <MetricInfoSider
+              relationDimensionOptions={relationDimensionOptions}
+              metircData={metircData}
+              onDimensionRelationBtnClick={() => {
+                setMetricRelationModalOpenState(true);
+              }}
+            />
+          </div>
           <div className={styles.tabContainer}>
             <Tabs
               defaultActiveKey="metricCaliberInput"
@@ -130,15 +146,6 @@ const MetricDetail: React.FC<Props> = () => {
               className={styles.metricDetailTab}
             />
           </div>
-          <div className={styles.siderContainer}>
-            <MetricInfoSider
-              relationDimensionOptions={relationDimensionOptions}
-              metircData={metircData}
-              onDimensionRelationBtnClick={() => {
-                setMetricRelationModalOpenState(true);
-              }}
-            />
-          </div>
         </div>
         <DimensionAndMetricRelationModal
           metricItem={metircData}