[improvement][headless-fe] code stash

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

@@ -0,0 +1,146 @@
+import { Tag, Space, Tooltip } from 'antd';
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import {
+  ExportOutlined,
+  SolutionOutlined,
+  PartitionOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import styles from './style.less';
+import IndicatorStar from '../IndicatorStar';
+import { toDomainList, toModelList } from '@/pages/SemanticModel/utils';
+import { MenuItem } from './type';
+
+type Props = {
+  detailData: any;
+  menuKey: string;
+  menuList: MenuItem[];
+  onMenuKeyChange?: (key: string, item: MenuItem) => void;
+};
+
+const DetailSider: React.FC<Props> = ({ detailData, menuList, menuKey, onMenuKeyChange }) => {
+  const [settingKey, setSettingKey] = useState<string>(menuKey);
+
+  useEffect(() => {
+    if (menuKey) {
+      setSettingKey(menuKey);
+    }
+  }, [menuKey]);
+
+  return (
+    <div className={styles.DetailInfoSider}>
+      <div className={styles.sectionContainer}>
+        {detailData?.id ? (
+          <div className={styles.title}>
+            <div className={styles.name}>
+              <Space>
+                <IndicatorStar indicatorId={detailData?.id} initState={detailData?.isCollect} />
+                {detailData?.name}
+                {detailData?.hasAdminRes && (
+                  <span
+                    className={styles.gotoMetricListIcon}
+                    onClick={() => {
+                      toModelList(detailData.domainId, detailData.modelId);
+                    }}
+                  >
+                    <Tooltip title="前往所属模型指标列表">
+                      <ExportOutlined />
+                    </Tooltip>
+                  </span>
+                )}
+              </Space>
+            </div>
+            {detailData?.bizName && <div className={styles.bizName}>{detailData.bizName}</div>}
+          </div>
+        ) : (
+          <div className={styles.createTitle}>
+            <Space>
+              <SettingOutlined />
+              新建指标
+            </Space>
+          </div>
+        )}
+
+        <hr className={styles.hr} />
+        <div className={styles.section} style={{ padding: '16px 0' }}>
+          <ul className={styles.settingList}>
+            {menuList.map((item) => {
+              return (
+                <li
+                  className={item.key === settingKey ? styles.active : ''}
+                  key={item.key}
+                  onClick={() => {
+                    onMenuKeyChange?.(item.key, item);
+                    setSettingKey(item.key);
+                  }}
+                >
+                  <div className={styles.icon}>{item.icon}</div>
+                  <div className={styles.content}>
+                    <span className={styles.text}> {item.text}</span>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        {detailData?.id && (
+          <div className={styles.section} style={{ marginTop: 'auto' }}>
+            <div className={styles.sectionTitleBox}>
+              <span className={styles.sectionTitle}>
+                <Space>
+                  <SolutionOutlined />
+                  创建信息
+                </Space>
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>所属模型: </span>
+              <span className={styles.itemValue}>
+                <Space>
+                  <Tag icon={<PartitionOutlined />} color="#3b5999">
+                    {detailData?.modelName || '模型名为空'}
+                  </Tag>
+                  {detailData?.hasAdminRes && (
+                    <span
+                      className={styles.gotoMetricListIcon}
+                      onClick={() => {
+                        toDomainList(detailData.domainId, 'overview');
+                      }}
+                    >
+                      <Tooltip title="前往模型设置页">
+                        <ExportOutlined />
+                      </Tooltip>
+                    </span>
+                  )}
+                </Space>
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>创建人: </span>
+              <span className={styles.itemValue}>{detailData?.createdBy}</span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>创建时间: </span>
+              <span className={styles.itemValue}>
+                {detailData?.createdAt
+                  ? dayjs(detailData?.createdAt).format('YYYY-MM-DD HH:mm:ss')
+                  : ''}
+              </span>
+            </div>
+            <div className={styles.item}>
+              <span className={styles.itemLable}>更新时间: </span>
+              <span className={styles.itemValue}>
+                {detailData?.createdAt
+                  ? dayjs(detailData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')
+                  : ''}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DetailSider;