feat(live-demo): 登录页添加版本号

pili-engineering · Jul 11, 2022 · 492c31e · 492c31e
1 parent bda216b
commit 492c31e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 21 deletions.
diff --git a/packages/live-demo/src/pages/login/index.module.scss b/packages/live-demo/src/pages/login/index.module.scss
@@ -1,8 +1,17 @@
-.container {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  align-items: center;
-  justify-content: center;
+.page {
+  width: 100%;
+  height: 100%;
   background-image: url("./bg-login.svg");
 }
+
+.card {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.version {
+  text-align: center;
+  padding: 16px 0;
+}
diff --git a/packages/live-demo/src/pages/login/index.tsx b/packages/live-demo/src/pages/login/index.tsx
@@ -27,6 +27,7 @@ const validateForm = (value: LoginData): string | null => {
 
 interface LoginProps {
   nextUrl: string;
+  version?: string | null;
 }
 
 /**
@@ -35,7 +36,7 @@ interface LoginProps {
  */
 export const Login: React.FC<LoginProps> = (props) => {
   const history = useHistory();
-  const { nextUrl } = props;
+  const { nextUrl, version } = props;
   const { dispatch: dispatchUserStoreState } = useUserStore();
   const { dispatch: dispatchIMStoreState } = useIMStore();
 
@@ -130,16 +131,18 @@ export const Login: React.FC<LoginProps> = (props) => {
     });
   };
 
-  return <div className={styles.container}>
-    <LoginForm
-      className={styles.form}
-      data={loginData}
-      onChange={onChange}
-      onSmsClick={onSmsClick}
-      onSubmit={onSubmit}
-      isSmsLoading={isSmsLoading}
-      isLoading={isLoading}
-      countdown={countdown}
-    />
+  return <div className={styles.page}>
+    <div className={styles.card}>
+      <LoginForm
+        data={loginData}
+        onChange={onChange}
+        onSmsClick={onSmsClick}
+        onSubmit={onSubmit}
+        isSmsLoading={isSmsLoading}
+        isLoading={isLoading}
+        countdown={countdown}
+      />
+      {version && <div className={styles.version}>当前版本：{version}</div>}
+    </div>
   </div>;
 };
diff --git a/packages/live-demo/src/pages/login/login-form/index.scss b/packages/live-demo/src/pages/login/login-form/index.scss
@@ -4,7 +4,7 @@
   //height: 504px;
   background: #FFFFFF;
   box-shadow: 0 4px 18px 0 rgba(4, 90, 133, 0.50);
-  border-radius: 8px;
+  border-radius: 16px;
   display: flex;
   overflow: hidden;
 
@@ -52,6 +52,7 @@
 
     .text {
       margin: 0 20px;
+      white-space: nowrap;
     }
   }
 

diff --git a/packages/live-demo/src/router/index.tsx b/packages/live-demo/src/router/index.tsx
@@ -10,7 +10,7 @@ const changeDocumentTitle = (path: string) => {
   if (path === '/') {
     return '欢迎登录';
   }
-  if (path === '/list') {
+  if (path === '/room-list') {
     return '房间列表';
   }
   if (path.startsWith('/room')) {
@@ -30,7 +30,7 @@ const RootRouter = () => {
   }, [location.pathname]);
 
   return <Switch>
-    <Route exact path="/login" render={() => <Login nextUrl="/room-list"/>}/>
+    <Route exact path="/login" render={() => <Login nextUrl="/room-list" version={version}/>}/>
     <Route
       path="/"
       render={() => {

diff --git a/packages/live-demo/src/version.d.ts b/packages/live-demo/src/version.d.ts
@@ -0,0 +1 @@
+declare const version: string;
diff --git a/packages/live-demo/vite.config.ts b/packages/live-demo/vite.config.ts
@@ -2,10 +2,15 @@ import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import * as path from 'path';
 
+const packageJson = require('./package.json');
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
   return {
+    define: {
+      version: JSON.stringify(packageJson.version),
+    },
     plugins: [react()],
     resolve: {
       alias: {