feat: integrate platform backend and application interfaces

admin/src/pages/Login/components/Header/index.module.less

@@ -8,9 +8,30 @@
   color: var(--td-text-color-primary);
 }
 
+@media screen and (max-width: 700px) {
+  .loginHeader {
+    padding: 0 16px;
+    backdrop-filter: none;
+  }
+}
+
 .logo {
   width: 188px;
   height: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 2px;
+  font-size: 18px;
+  line-height: 1.1;
+  text-align: left;
+  color: var(--td-text-color-primary);
+  small {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--td-text-color-secondary);
+  }
 }
 
 .operationsContainer {
@@ -23,13 +44,13 @@
 
 .operationsButton {
   margin-left: 16px;
+  width: 40px;
+  height: 40px;
 }
 
 .icon {
-  height: 20px;
-  width: 20px;
-  padding: 6px;
-  box-sizing: content-box;
+  height: 24px !important;
+  width: 24px !important;
 
   &:hover {
     cursor: pointer;

admin/src/pages/Login/components/Header/index.tsx

@@ -1,61 +1,32 @@
 import React from 'react';
-import { Button } from 'tdesign-react';
-import { LogoGithubIcon, HelpCircleIcon, SettingIcon } from 'tdesign-icons-react';
+import { MiragenFlowButton } from '@miragenflow/ui';
+import { SettingIcon } from 'components/LineIcons';
 import { useAppDispatch } from 'modules/store';
 import { toggleSetting } from 'modules/global';
 
-import LogoFullIcon from 'assets/svg/assets-logo-full.svg?component';
 import Style from './index.module.less';
 
 export default function Header() {
   const dispatch = useAppDispatch();
 
-  const navToGitHub = () => {
-    window.open('https://github.com/tencent/tdesign-react-starter');
-  };
-
-  const navToHelper = () => {
-    window.open('http://tdesign.tencent.com/starter/docs/react/get-started');
-  };
-
   const toggleSettingPanel = () => {
     dispatch(toggleSetting());
   };
 
   return (
-    <div>
-      <header className={Style.loginHeader}>
-        <LogoFullIcon className={Style.logo} />
-        <div className={Style.operationsContainer}>
-          <Button
-            className={Style.operationsButton}
-            theme='default'
-            shape='square'
-            variant='text'
-            onClick={navToGitHub}
-          >
-            <LogoGithubIcon className={Style.icon} />
-          </Button>
-          <Button
-            className={Style.operationsButton}
-            theme='default'
-            shape='square'
-            variant='text'
-            onClick={navToHelper}
-          >
-            <HelpCircleIcon className={Style.icon} />
-          </Button>
-          <Button
-            className={Style.operationsButton}
-            theme='default'
-            shape='square'
-            variant='text'
-            onClick={toggleSettingPanel}
-          >
-            <SettingIcon className={Style.icon} />
-          </Button>
-        </div>
-      </header>
-    </div>
+    <header className={Style.loginHeader}>
+      <div className={Style.logo}><strong>元境幻生</strong><small>MiragenFlow 管理台</small></div>
+      <div className={Style.operationsContainer}>
+        <MiragenFlowButton
+          aria-label='页面设置'
+          className={Style.operationsButton}
+          shape='square'
+          type='text'
+          onClick={toggleSettingPanel}
+        >
+          <SettingIcon className={Style.icon} />
+        </MiragenFlowButton>
+      </div>
+    </header>
   );
 }