From f05a4b523c99a07ceedc71487f4391015e310176 Mon Sep 17 00:00:00 2001
From: williamhliu <137068196+williamhliu@users.noreply.github.com>
Date: Wed, 12 Mar 2025 08:22:46 +0800
Subject: [PATCH] (fix)(supersonic-fe) show tip when register failed and
 replace icon when login failed and fix metric style issue (#2160)

---
 .../pages/Login/components/RegisterForm.tsx   |   5 +-
 .../supersonic-fe/src/pages/Login/index.tsx   |   7 +-
 .../src/pages/SemanticModel/Metric/Detail.tsx |  21 +-
 .../src/pages/SemanticModel/Metric/style.less | 326 +++++++++++++++++-
 4 files changed, 337 insertions(+), 22 deletions(-)

diff --git a/webapp/packages/supersonic-fe/src/pages/Login/components/RegisterForm.tsx b/webapp/packages/supersonic-fe/src/pages/Login/components/RegisterForm.tsx
index c35576007..b9a75b362 100644
--- a/webapp/packages/supersonic-fe/src/pages/Login/components/RegisterForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Login/components/RegisterForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Button, Modal, Input } from 'antd';
+import { Form, Button, Modal, Input, message } from 'antd';
 
 import type { RegisterFormDetail } from './types';
 
@@ -37,8 +37,9 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
     try {
       await handleUpdate(formValus);
       setSaveLoading(false);
-    } catch (error) {
+    } catch (error: any) {
       setSaveLoading(false);
+      message.error(error.message);
     }
   };
 
diff --git a/webapp/packages/supersonic-fe/src/pages/Login/index.tsx b/webapp/packages/supersonic-fe/src/pages/Login/index.tsx
index 600b1ca2f..50b46874e 100644
--- a/webapp/packages/supersonic-fe/src/pages/Login/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Login/index.tsx
@@ -41,8 +41,9 @@ const LoginPage: React.FC = () => {
       }
       history.push('/');
       return;
+    } else {
+      message.error(msg);
     }
-    message.success(msg);
   };
 
   // 处理登录按钮响应
@@ -55,12 +56,14 @@ const LoginPage: React.FC = () => {
   // 处理注册弹窗确定按钮
   const handleRegister = async (values: RegisterFormDetail) => {
     const enCodeValues = { ...values, password: encryptPassword(values.password, encryptKey) };
-    const { code } = await userRegister(enCodeValues);
+    const { code, msg } = await userRegister(enCodeValues);
     if (code === 200) {
       message.success('注册成功');
       setCreateModalVisible(false);
       // 注册完自动帮用户登录
       await loginDone(enCodeValues);
+    } else {
+      message.error(msg);
     }
   };
 
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
index d927eb203..435a31f93 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
@@ -107,20 +107,8 @@ 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"
@@ -146,6 +134,15 @@ 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}
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
index f1f9006d0..0a61d48f3 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
@@ -1,4 +1,3 @@
-
 .metricWrapper {
   width: 100%;
   margin-left: auto;
@@ -12,7 +11,6 @@
   flex-direction: column;
 }
 
-
 .metricFilterWrapper {
   margin: 20px;
   padding: 20px;
@@ -183,7 +181,68 @@
   }
 }
 
-
+.metricEditWrapper {
+  .metricDetailTab {
+    :global {
+      .ant-tabs-nav {
+        margin: 10px 20px 0 20px;
+        padding: 0 20px;
+        background-color: rgb(255, 255, 255);
+        border-radius: 8px;
+        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      }
+      .ant-tabs-tab {
+        padding: 12px 0;
+        color: #344767;
+        font-weight: 500;
+      }
+    }
+  }
+  .metricDetail {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 0px;
+    background-color: transparent;
+    height: 100%;
+    .tabContainer {
+      padding: 24px;
+      min-height: calc(100vh - 78px);
+      width: calc(100vw - 350px);
+      background-color: #fafafb;
+    }
+    .metricInfoContent {
+      padding: 25px;
+      .title {
+        position: relative;
+        margin-bottom: 12px;
+        color: #0e73ff;
+        font-weight: bold;
+        font-size: 16px;
+        &::before {
+          position: absolute;
+          top: 10px;
+          left: -10px;
+          display: block;
+          width: 3px;
+          height: 14px;
+          font-size: 0;
+          background: #0e73ff;
+          border: 1px solid #0e73ff;
+          border-radius: 2px;
+          content: '';
+        }
+      }
+    }
+    .siderContainer {
+      width: 350px;
+      min-height: calc(100vh - 78px);
+      border-radius: 6px;
+      padding: 24px 0 24px 24px;
+    }
+  }
+}
 
 .metricDetailWrapper {
   height: calc(100vh - 56px);
@@ -215,8 +274,7 @@
     .tabContainer {
       height: 100%;
       min-height: calc(100vh - 78px);
-      // width: calc(100vw - 450px);
-      width: 100%;
+      width: calc(100vw - 450px);
       background-color: #fafafb;
     }
     .metricInfoContent {
@@ -245,8 +303,9 @@
     .siderContainer {
       width: 450px;
       min-height: calc(100vh - 78px);
+      margin: 10px 20px 20px 0;
+      background-color: rgb(255, 255, 255);
       border-radius: 6px;
-      padding: 10px 0 24px 24px;
       box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px,
         rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
     }
@@ -265,5 +324,260 @@
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
+.metricInfoSider {
+  padding: 20px;
+  color: #344767;
+  background-color: #fff;
+  height: 100%;
+  border: 1px solid #e6ebf1;
+  border-radius: 6px;
+  .createTitle {
+    margin-bottom: 10px;
+    color: #344767;
+    font-weight: 500;
+    font-size: 16px;
+    font-family: var(--tencent-font-family);
+  }
+  .gotoMetricListIcon {
+    color: #3182ce;
+    cursor: pointer;
+    &:hover {
+      color: #5493ff;
+    }
+  }
+  .title {
+    margin-bottom: 20px;
+    .name {
+      font-weight: 600;
+      font-size: 18px;
+    }
+    .bizName {
+      margin: 5px 0 0 25px;
+      color: #7b809a;
+      font-weight: 400;
+    }
+  }
+  .desc {
+    display: block;
+    margin-top: 8px;
+    color: #7b809a;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.9;
+  }
+  .subTitle {
+    margin: 0px;
+    color: rgb(123, 128, 154);
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.25;
+    letter-spacing: 0.03333em;
+    text-transform: uppercase;
+    text-decoration: none;
+    vertical-align: unset;
+    opacity: 1;
+  }
+  .sectionContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: scroll;
 
+    overflow: hidden;
+    background-image: none;
+    border-radius: 6px;
+    .section {
+      padding: 16px;
+      color: rgb(52, 71, 103);
+      line-height: 1.25;
+      background: transparent;
+      box-shadow: none;
+      opacity: 1;
+      .sectionTitleBox {
+        padding: 8px 0;
+        color: rgb(52, 71, 103);
+        background: transparent;
+        box-shadow: none;
+        opacity: 1;
+        .sectionTitle {
+          margin: 0px;
+          color: rgb(52, 71, 103);
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 1.625;
+          letter-spacing: 0.0075em;
+          text-transform: capitalize;
+          text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
+        }
+      }
 
+      .item {
+        display: flex;
+        padding-top: 8px;
+        padding-right: 16px;
+        padding-bottom: 8px;
+        color: rgb(52, 71, 103);
+        background: transparent;
+        box-shadow: none;
+        opacity: 1;
+        .itemLable {
+          min-width: fit-content;
+          margin: 0px;
+          margin-right: 10px;
+          color: #344767;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 1.5;
+          letter-spacing: 0.02857em;
+          text-transform: capitalize;
+          text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
+        }
+        .itemValue {
+          margin: 0px;
+          color: #7b809a;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 1.5;
+          letter-spacing: 0.02857em;
+          text-transform: none;
+          text-decoration: none;
+          vertical-align: unset;
+          opacity: 1;
+        }
+      }
+    }
+    .hr {
+      flex-shrink: 0;
+      margin: 0px;
+      border-color: rgb(242, 244, 247);
+      // border-width: 0px 0px thin;
+      border-style: solid;
+    }
+    .ctrlBox {
+      .ctrlList {
+        position: relative;
+        margin: 0px;
+        padding: 8px 0px;
+        list-style: none;
+        background-color: rgb(249, 250, 251);
+        li {
+          position: relative;
+          display: flex;
+          flex-grow: 1;
+          align-items: center;
+          justify-content: flex-start;
+          box-sizing: border-box;
+          min-width: 0px;
+          margin: 4px;
+          padding: 4px 16px;
+          color: inherit;
+          text-align: left;
+          text-decoration: none;
+          vertical-align: middle;
+          background-color: transparent;
+          border: 0px;
+          border-radius: 0px;
+          outline: 0px;
+          cursor: pointer;
+          transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+          appearance: none;
+          user-select: none;
+          -webkit-tap-highlight-color: transparent;
+          -webkit-box-flex: 1;
+          -webkit-box-pack: start;
+          -webkit-box-align: center;
+          &:hover {
+            color: #3182ce;
+            text-decoration: none;
+            background-color: rgba(16, 24, 40, 0.04);
+          }
+        }
+        .ctrlItemIcon {
+          flex-shrink: 0;
+          min-width: unset;
+          margin-right: 5px;
+          font-size: 14px;
+        }
+        .styles.ctrlItemLable {
+          display: block;
+          margin: 0px;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+}
+
+.settingList {
+  list-style: none;
+  margin: 0px;
+  position: relative;
+  padding: 0px;
+  li {
+    -webkit-tap-highlight-color: transparent;
+    background-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    border-radius: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    min-width: 0px;
+    box-sizing: border-box;
+    text-align: left;
+    padding: 8px 16px;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    &.active {
+      background-color: rgba(22, 119, 255, 0.08);
+      .icon {
+        color: rgb(22, 119, 255);
+      }
+      .content {
+        .text {
+          color: rgb(22, 119, 255);
+        }
+      }
+    }
+    .icon {
+      min-width: 32px;
+      color: #344767;
+      flex-shrink: 0;
+      display: inline-flex;
+    }
+    .content {
+      flex: 1 1 auto;
+      min-width: 0px;
+      margin-top: 4px;
+      margin-bottom: 4px;
+      .text {
+        margin: 0px;
+        color: #344767;
+        font-size: 16px;
+        // line-height: 1.57;
+        // font-family: var(--tencent-font-family);
+        font-weight: 600;
+        display: block;
+      }
+    }
+    &:hover {
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+}