fix: 🐛 完善前端

public/api/dashboard.json

@@ -0,0 +1,155 @@
+{
+  "body": [
+    {
+      "type": "grid",
+      "columns": [
+        {
+          "type": "panel",
+          "title": "本地配置示例 支持交互",
+          "name": "chart-local",
+          "body": [
+            {
+              "type": "chart",
+              "config": {
+                "title": {
+                  "text": "极坐标双数值轴"
+                },
+                "legend": {
+                  "data": ["line"]
+                },
+                "polar": {
+                  "center": ["50%", "54%"]
+                },
+                "tooltip": {
+                  "trigger": "axis",
+                  "axisPointer": {
+                    "type": "cross"
+                  }
+                },
+                "angleAxis": {
+                  "type": "value",
+                  "startAngle": 0
+                },
+                "radiusAxis": {
+                  "min": 0
+                },
+                "series": [
+                  {
+                    "coordinateSystem": "polar",
+                    "name": "line",
+                    "type": "line",
+                    "showSymbol": false,
+                    "data": [
+                      [0, 0],
+                      [0.03487823687206265, 1],
+                      [0.06958655048003272, 2],
+                      [0.10395584540887964, 3],
+                      [0.13781867790849958, 4],
+                      [0.17101007166283433, 5],
+                      [0.2033683215379001, 6],
+                      [0.2347357813929454, 7],
+                      [0.26495963211660245, 8],
+                      [0.2938926261462365, 9],
+                      [0.3213938048432697, 10]
+                    ]
+                  }
+                ],
+                "animationDuration": 2000
+              },
+              "clickAction": {
+                "actionType": "dialog",
+                "dialog": {
+                  "title": "详情",
+                  "body": [
+                    {
+                      "type": "tpl",
+                      "tpl": "<span>当前选中值 ${value|json}<span>"
+                    },
+                    {
+                      "type": "chart",
+                      "api": "https://aisuda.bce.baidu.com/amis/api/mock2/chart/chart1"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "type": "panel",
+          "title": "远程图表示例(返回值带function)",
+          "name": "chart-remote",
+          "body": [
+            {
+              "type": "chart",
+              "api": "https://aisuda.bce.baidu.com/amis/api/mock2/chart/chart1"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "panel",
+      "title": "Form+chart组合",
+      "body": [
+        {
+          "type": "form",
+          "title": "过滤条件",
+          "target": "chart1,chart2",
+          "submitOnInit": true,
+          "className": "m-b",
+          "wrapWithPanel": false,
+          "mode": "inline",
+          "body": [
+            {
+              "type": "input-date",
+              "label": "开始日期",
+              "name": "starttime",
+              "value": "-8days",
+              "maxDate": "${endtime}"
+            },
+            {
+              "type": "input-date",
+              "label": "结束日期",
+              "name": "endtime",
+              "value": "-1days",
+              "minDate": "${starttime}"
+            },
+            {
+              "type": "input-text",
+              "label": "条件",
+              "name": "name",
+              "addOn": {
+                "type": "submit",
+                "label": "搜索",
+                "level": "primary"
+              }
+            }
+          ],
+          "actions": []
+        },
+        {
+          "type": "divider"
+        },
+        {
+          "type": "grid",
+          "className": "m-t-lg",
+          "columns": [
+            {
+              "type": "chart",
+              "name": "chart1",
+              "initFetch": false,
+              "api": "https://aisuda.bce.baidu.com/amis/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}"
+            },
+            {
+              "type": "chart",
+              "name": "chart2",
+              "initFetch": false,
+              "api": "https://aisuda.bce.baidu.com/amis/api/mock2/chart/chart2?name=$name"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/layout/index.module.scss

@@ -55,6 +55,7 @@
     }
     .arco-layout-sider-trigger {
       justify-content: end;
+      border-top: 1px solid #f1f1f1;
     }
     .arco-layout-sider-children {
       height: calc(100vh - 108px);

src/layout/index.tsx

@@ -33,6 +33,7 @@ const App = () => {
     </Layout.Header>
     <Layout>
       <Layout.Sider
+        width={220}
         defaultCollapsed={collapse}
         collapsible={true}
         onCollapse={onCollapse}

src/pages/Login/index.module.scss

@@ -0,0 +1,24 @@
+.login {
+  display: flex;
+  height: 100vh;
+  background: url(@/assets/login.bg.png) no-repeat bottom center;
+  background-size:cover;
+  .content {
+    width: 420px;
+    height: 320px;
+    box-sizing: border-box;
+    padding-left: 70px;
+    background: #fff;
+    border-radius: 6px;
+    margin: auto;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 1px solid #fff;
+    box-shadow: inset 1px 5px 15px rgba($color: #fff, $alpha: 1.0);
+    .form {
+      width: 420px;
+    }
+  }
+}

src/pages/Login/index.tsx

@@ -1,5 +1,50 @@
+import { Form, Input, Button, Checkbox } from '@arco-design/web-react'
+import {
+  IconUser,
+  IconLock
+} from '@arco-design/web-react/icon'
+import styles from './index.module.scss'
+import { useCallback } from 'react'
+const FormItem = Form.Item
+
 const Login = () => {
-  return <section>登录</section>
+  const [form] = Form.useForm();
+  const onSubmit = useCallback(() => {
+    form.validate().then(res => {
+      console.log(res)
+    })
+  }, [form])
+  return <section className={styles.login}>
+    <div className={styles.content}>
+      <Form
+        form={form}
+        initialValues={{
+          username: 'admin',
+          password: '123456'
+        }}
+        className={styles.form} autoComplete='off'>
+        <div>
+          <h2 style={{ color: '#666', fontSize: '24px', marginBottom: 20  }}>欢迎登录</h2>
+        </div>
+        <FormItem field={'username'} rules={[{ required: true }]}>
+          <Input placeholder='请输入用户名' prefix={<IconUser />} />
+        </FormItem>
+        <FormItem field={'password'} rules={[{ required: true }]}>
+          <Input.Password
+            prefix={<IconLock />}
+            defaultVisibility={false}
+            placeholder='请输入密码'
+          />
+        </FormItem>
+        <FormItem>
+          <Checkbox>记住密码</Checkbox>
+        </FormItem>
+        <FormItem>
+          <Button type='primary' long onClick={onSubmit}>登 录</Button>
+        </FormItem>
+      </Form>
+    </div>
+  </section>
 }
 
 export default Login

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import Loading from '@/components/Loading'
 import { lazy, Suspense } from 'react'
 import Layout from '@/layout'
@@ -16,7 +16,7 @@ const Router = () => {
     <Routes>
       <Route path='/login' element={<Login />}></Route>
       <Route path='/' element={<Layout />}>
-        <Route path='/' element={lazyLoad(lazy(async () => import('@/pages/Home/index.tsx')))}></Route>
+        <Route path='/' element={<Navigate to="/dashboard" />}></Route>
         <Route path='/*' element={lazyLoad(lazy(async () => import('@/pages/Admin/index.tsx')))}></Route>
       </Route>
     </Routes>