修复首次获取Cookie

back/api/config.ts

@@ -5,6 +5,7 @@ import { Logger } from 'winston';
 import config from '../config';
 import * as fs from 'fs';
 import { celebrate, Joi } from 'celebrate';
+import { execSync } from 'child_process';
 const route = Router();
 
 export default (app: Router) => {
@@ -57,6 +58,9 @@ export default (app: Router) => {
         const { name, content } = req.body;
         const path = (config.fileMap as any)[name];
         fs.writeFileSync(path, content);
+        if (name === 'crontab.list') {
+          execSync(`crontab ${path}`);
+        }
         res.send({ code: 200, msg: '保存成功' });
       } catch (e) {
         logger.error('🔥 error: %o', e);

back/services/cookie.ts

@@ -165,12 +165,18 @@ export default class CookieService {
       let ucookie = this.getCookie(res);
       let content = getFileContentByName(config.confFile);
       const regx = /.*Cookie[0-9]{1}\=\"(.+?)\"/g;
-      const lastCookie = oldCookie || (content.match(regx) as any[]).pop();
+      if (content.match(regx)) {
-      const cookieRegx = /Cookie([0-9]+)\=.+?/.exec(lastCookie);
+        const lastCookie = oldCookie || (content.match(regx) as any[]).pop();
-      if (cookieRegx) {
+        const cookieRegx = /Cookie([0-9]+)\=.+?/.exec(lastCookie);
-        const num = parseInt(cookieRegx[1]) + 1;
+        if (cookieRegx) {
-        const newCookie = `${lastCookie}\nCookie${num}="${ucookie}"`;
+          const num = parseInt(cookieRegx[1]) + 1;
-        const result = content.replace(lastCookie, newCookie);
+          const newCookie = `${lastCookie}\nCookie${num}="${ucookie}"`;
+          const result = content.replace(lastCookie, newCookie);
+          fs.writeFileSync(config.confFile, result);
+        }
+      } else {
+        const newCookie = `Cookie1="${ucookie}"`;
+        const result = content.replace(`Cookie1=""`, newCookie);
         fs.writeFileSync(config.confFile, result);
       }
       return { cookie: ucookie };

src/pages/login/index.less

@@ -1,4 +1,24 @@
-.form {
+@import '~antd/es/style/themes/default.less';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: @layout-body-background;
+}
+
+.lang {
+  width: 100%;
+  height: 40px;
+  line-height: 44px;
+  text-align: right;
+  :global(.ant-dropdown-trigger) {
+    margin-right: 24px;
+  }
+}
+
+.content {
   position: absolute;
   top: 45%;
   left: 50%;
@@ -6,53 +26,97 @@
   width: 320px;
   height: 320px;
   padding: 36px;
-  box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
+  // box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
+}
 
-  button {
+@media (min-width: @screen-md-min) {
-    width: 100%;
+  .container {
+    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
   }
 
-  p {
+  .content {
-    color: rgb(204, 204, 204);
+    padding: 32px 0 24px;
-    text-align: center;
+  }
-    margin-top: 16px;
+}
-    font-size: 12px;
+
+.top {
+  text-align: center;
+}
+
+.header {
+  height: 44px;
+  line-height: 44px;
+  a {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+    justify-content: center;
   }
 }
 
 .logo {
-  text-align: center;
+  height: 44px;
-  cursor: pointer;
+  margin-right: 16px;
-  margin-bottom: 24px;
+  vertical-align: top;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    width: 40px;
-    margin-right: 8px;
-  }
-
-  span {
-    vertical-align: text-bottom;
-    font-size: 16px;
-    text-transform: uppercase;
-    display: inline-block;
-    font-weight: 700;
-    // color: @primary-color;
-    // .text-gradient();
-  }
 }
 
-.ant-spin-container,
+.title {
-.ant-spin-nested-loading {
+  position: relative;
-  height: 100%;
+  top: 2px;
+  color: @heading-color;
+  font-weight: 600;
+  font-size: 33px;
+  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }
 
-.footer {
+.desc {
-  position: absolute;
+  margin-top: 12px;
-  width: 100%;
+  margin-bottom: 40px;
-  bottom: 0;
+  color: @text-color-secondary;
-}
+  font-size: @font-size-base;
+}
+
+.main {
+  width: 320px;
+  margin: 25px auto 0;
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+    max-width: 320px;
+  }
+
+  :global {
+    .@{ant-prefix}-tabs-nav-list {
+      margin: auto;
+      font-size: 16px;
+    }
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+    .register {
+      float: right;
+    }
+  }
+
+  .prefixIcon {
+    color: @primary-color;
+    font-size: @font-size-base;
+  }
+}

src/pages/login/index.tsx

@@ -1,9 +1,10 @@
 import React, { Fragment, useEffect } from 'react';
 import { Button, Row, Input, Form, notification } from 'antd';
 import config from '@/utils/config';
-import { history } from 'umi';
+import { history, Link } from 'umi';
 import styles from './index.less';
 import { request } from '@/utils/http';
+import logo from '@/assets/logo.png';
 
 const FormItem = Form.Item;
 
@@ -39,34 +40,45 @@ const Login = () => {
   }, []);
 
   return (
-    <Fragment>
+    <div className={styles.container}>
-      <div className={styles.form}>
+      <div className={styles.content}>
-        <div className={styles.logo}>
+        <div className={styles.top}>
-          <span>{config.siteName}</span>
+          <div className={styles.header}>
+            <Link to="/">
+              <img alt="logo" className={styles.logo} src={logo} />
+              <span className={styles.title}>{config.siteName}</span>
+            </Link>
+          </div>
+        </div>
+        <div className={styles.main}>
+          <Form onFinish={handleOk}>
+            <FormItem
+              name="username"
+              rules={[{ required: true, message: '请输入用户名' }]}
+              hasFeedback
+            >
+              <Input placeholder="用户名" autoFocus />
+            </FormItem>
+            <FormItem
+              name="password"
+              rules={[{ required: true, message: '请输入密码' }]}
+              hasFeedback
+            >
+              <Input type="password" placeholder="密码" />
+            </FormItem>
+            <Row>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ width: '100%' }}
+              >
+                登录
+              </Button>
+            </Row>
+          </Form>
         </div>
-        <Form onFinish={handleOk}>
-          <FormItem
-            name="username"
-            rules={[{ required: true, message: '请输入用户名' }]}
-            hasFeedback
-          >
-            <Input placeholder="用户名" autoFocus />
-          </FormItem>
-          <FormItem
-            name="password"
-            rules={[{ required: true, message: '请输入密码' }]}
-            hasFeedback
-          >
-            <Input type="password" placeholder="密码" />
-          </FormItem>
-          <Row>
-            <Button type="primary" htmlType="submit">
-              Sign in
-            </Button>
-          </Row>
-        </Form>
       </div>
-    </Fragment>
+    </div>
   );
 };
 

src/utils/config.ts

@@ -1,5 +1,5 @@
 export default {
-  siteName: '京东羊毛脚本控制面板',
+  siteName: '脚本控制面板',
   apiPrefix: '/api/',
   authKey: 'token',