release: v0.17.0

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

@@ -0,0 +1,37 @@
+.loginHeader {
+  height: 64px;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  backdrop-filter: blur(5px);
+  color: var(--td-text-color-primary);
+}
+
+.logo {
+  width: 188px;
+  height: 64px;
+}
+
+.operationsContainer {
+  display: flex;
+  align-items: center;
+  .t-button {
+    margin-left: 16px;
+  }
+}
+
+.operationsButton {
+  margin-left: 16px;
+}
+
+.icon {
+  height: 20px;
+  width: 20px;
+  padding: 6px;
+  box-sizing: content-box;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button } from 'tdesign-react';
+import { LogoGithubIcon, HelpCircleIcon, SettingIcon } from 'tdesign-icons-react';
+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>
+  );
+}