update

2026-04-29 19:05:47 +08:00
parent b98c66ca21
commit 88c2fa5d03
40 changed files with 1781 additions and 2068 deletions
@@ -0,0 +1,73 @@
+import {
+  List,
+  Avatar,
+  Button,
+  ButtonGroup,
+  Typography,
+  Tabs,
+  TabPane,
+  Toast,
+} from '@douyinfe/semi-ui';
+import { useNoteStore } from '../../stores/useNoteStore';
+import noteService from '../../services/note.service';
+import type { INote } from '../../types';
+
+export default function HomePage() {
+  const { homeData, setHomeData, setCurrentNote } = useNoteStore();
+
+  const loadNote = (id: number) => {
+    noteService.get(id).then(
+      (res) => {
+        const note = res.data;
+        setCurrentNote(note.id, note.title, note.context);
+      },
+      () => Toast.error('加载笔记失败'),
+    );
+  };
+
+  const handleTabChange = (key: string) => {
+    noteService.getHomeData(key, '0').then(
+      (res) => setHomeData(res.data),
+      () => Toast.error('加载列表失败'),
+    );
+  };
+
+  return (
+    <>
+      <Tabs type="button" onChange={handleTabChange} defaultActiveKey="1">
+        <TabPane tab="最近更新" itemKey="1" />
+        <TabPane tab="最新添加" itemKey="2" />
+        <TabPane tab="最近浏览" itemKey="3" />
+      </Tabs>
+      <div style={{ padding: 5, border: '1px solid var(--semi-color-border)', margin: 5 }}>
+        <List
+          dataSource={homeData}
+          renderItem={(item: INote) => (
+            <List.Item
+              header={<Avatar color="blue">NOTE</Avatar>}
+              main={
+                <div>
+                  <span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>
+                    {item.title}
+                  </span>
+                  <Typography.Text
+                    ellipsis={{ showTooltip: true }}
+                    style={{ width: 'calc(100% - 68px)' }}
+                  >
+                    创建时间：{item.createtime}，更新时间：{item.updatetime}，
+                    最后浏览时间：{item.viewtime}。
+                  </Typography.Text>
+                </div>
+              }
+              extra={
+                <ButtonGroup theme="borderless">
+                  <Button onClick={() => loadNote(item.id)}>查看</Button>
+                </ButtonGroup>
+              }
+            />
+          )}
+        />
+      </div>
+    </>
+  );
+}
@@ -1,123 +1,79 @@
-import { Component } from "react";
-import {  Form,Toast, Button } from '@douyinfe/semi-ui';
-// import { IconSemiLogo, IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';
-import { Layout } from '@douyinfe/semi-ui';
-
-import { Navigate } from "react-router-dom";
-// import { Formik, Field, Form, ErrorMessage } from "formik";
-// import * as Yup from "yup";
-
-import AuthService from "../services/auth.service";
-import {IconDescriptions} from "@douyinfe/semi-icons-lab";
-
-type Props = {};
-
-type State = {
-    redirect: string | null,
-    username: string,
-    password: string,
-    loading: boolean,
-    message: string
-};
-
-export default class SignIn extends Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        // this.handleLogin = this.handleLogin.bind(this);
-
-        this.state = {
-            redirect: null,
-            username: "",
-            password: "",
-            loading: false,
-            message: ""
-        };
-    }
-
-    componentDidMount() {
-        const currentUser = AuthService.getCurrentUser();
-
-        if (currentUser) {
-            this.setState({ redirect: "/home" });
-        }
-    }
-
-    // componentWillUnmount() {
-    //     window.location.reload();
-    // }
-
-
-    handleSubmit = (values: { username: string; password: string }) => {
-        console.log(values);
-        // Toast.info('表单已提交');
-
-        AuthService.login(values.username, values.password).then(
-            () => {
-                Toast.info('登录成功');
-                this.setState({
-                    redirect: "/home"
-                });
-            },
-            error => {
-                const resMessage =
-                    (error.response &&
-                        error.response.data &&
-                        error.response.data.message) ||
-                    error.message ||
-                    error.toString();
-                Toast.info(resMessage);
-            }
-        );
-    };
-
-    render() {
-        if (this.state.redirect) {
-            return <Navigate to={this.state.redirect} />
-        }
-
-
-        const { Header, Footer, Content } = Layout;
-
-        const commonStyle = {
-            height: 64,
-            lineHeight: '64px',
-            background: 'var(--semi-color-fill-0)'
-        };
-        return (
-            <Layout className="components-layout-demo">
-                <Header style={commonStyle}>
-                    <div style={{ paddingTop: '10px' }} >
-
-
-                        <IconDescriptions style={{height: '36px', fontSize: 36}}/>
-                    </div>
-
-
-                    {/*Header*/}
-                </Header>
-                <Content style={{ textAlign: 'center' }}>
-                    CyyNote 登录
-                    <Form onSubmit={values => this.handleSubmit(values)} style={{ textAlign: 'center' ,width: 400 }}>
-                        {({ formState, values, formApi }) => (
-                            <>
-                                <Form.Input field='username' label='UserName' style={{ width: '100%' }} placeholder='Enter your user name'></Form.Input>
-                                <Form.Input mode="password"  field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
-                                <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                    <p>
-                                        <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
-                                    </p>
-                                    <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
-                                </div>
-                            </>
-                        )}
-                    </Form>
-
-
-                </Content>
-                <Footer style={commonStyle}>@版权无限所有</Footer>
-            </Layout>
-
-        );
-    }
-}
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { Form, Button, Toast, Layout } from '@douyinfe/semi-ui';
+import { IconDescriptions } from '@douyinfe/semi-icons-lab';
+import authService from '../services/auth.service';
+import { useAuthStore } from '../stores/useAuthStore';
+
+interface SignInForm {
+  username: string;
+  password: string;
+}
+
+export default function SignIn() {
+  const navigate = useNavigate();
+  const user = useAuthStore((s) => s.user);
+
+  useEffect(() => {
+    if (user) navigate('/home', { replace: true });
+  }, [user, navigate]);
+
+  const handleSubmit = async (values: SignInForm) => {
+    try {
+      await authService.login(values.username, values.password);
+      Toast.success('登录成功');
+      navigate('/home', { replace: true });
+    } catch (error: unknown) {
+      const msg =
+        error instanceof Error ? error.message : '登录失败，请重试';
+      Toast.error(msg);
+    }
+  };
+
+  const { Header, Content } = Layout;
+  const commonStyle = {
+    height: 64,
+    lineHeight: '64px',
+    background: 'var(--semi-color-fill-0)',
+  };
+
+  return (
+    <Layout className="components-layout-demo">
+      <Header style={commonStyle}>
+        <div style={{ paddingTop: '10px' }}>
+          <IconDescriptions style={{ height: '36px', fontSize: 36 }} />
+        </div>
+      </Header>
+      <Content style={{ textAlign: 'center' }}>
+        <p style={{ marginTop: 32, marginBottom: 16, fontSize: 20, fontWeight: 600 }}>
+          CyyNote 登录
+        </p>
+        <Form
+          onSubmit={(values) => void handleSubmit(values as SignInForm)}
+          style={{ textAlign: 'center', width: 400, margin: '0 auto' }}
+        >
+          <Form.Input
+            field="username"
+            label="用户名"
+            style={{ width: '100%' }}
+            placeholder="请输入用户名"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          />
+          <Form.Input
+            mode="password"
+            field="password"
+            label="密码"
+            style={{ width: '100%' }}
+            placeholder="请输入密码"
+            rules={[{ required: true, message: '请输入密码' }]}
+          />
+          <div style={{ marginTop: 16 }}>
+            <Button htmlType="submit" type="primary" theme="solid" block>
+              登录
+            </Button>
+          </div>
+        </Form>
+      </Content>
+    </Layout>
+  );
+}