(fix)(supersonic-fe) show tip when register failed and replace icon when login failed and fix metric style issue (#2160)

2025-12-10 02:46:56 +00:00 · 2025-03-12 08:22:46 +08:00
parent b7369abcca
commit f05a4b523c
4 changed files with 337 additions and 22 deletions
--- 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);
    }
  };

--- 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);
    }
  };

--- 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}
--- 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);
+    }
+  }
+}