- {/**/}
-
- */}
-
- );
- }
-}
-
-export default App;
diff --git a/cyynote-frontend/src/components/ProtectedRoute.tsx b/cyynote-frontend/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..cdbbd0d
--- /dev/null
+++ b/cyynote-frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,8 @@
+import { Navigate, Outlet } from 'react-router';
+import { useAuthStore } from '../stores/useAuthStore';
+
+/** Wraps routes that require authentication. Redirects to /login if not signed in. */
+export default function ProtectedRoute() {
+ const user = useAuthStore((s) => s.user);
+ return user ?
-
-
-
-
- { /*
-
+ 确认要删除「{deleteNoteName}」吗？删除后可在回收站恢复。
+
+ );
+}
diff --git a/cyynote-frontend/src/components/modals/PasswordModal.tsx b/cyynote-frontend/src/components/modals/PasswordModal.tsx
new file mode 100644
index 0000000..f3f6b3a
--- /dev/null
+++ b/cyynote-frontend/src/components/modals/PasswordModal.tsx
@@ -0,0 +1,78 @@
+import { Modal, Form, Button, Toast } from '@douyinfe/semi-ui';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { useUIStore } from '../../stores/useUIStore';
+import authService from '../../services/auth.service';
+
+export default function PasswordModal() {
+ const { updatePasswordModelVisible, setUpdatePasswordModelVisible } = useUIStore();
+ const user = useAuthStore((s) => s.user);
+
+ const handleSubmit = (values: {
+ username: string;
+ oldpassword: string;
+ newpassword: string;
+ }) => {
+ authService
+ .updatePassword(values.username, values.oldpassword, values.newpassword)
+ .then(
+ () => {
+ Toast.success('密码修改成功');
+ setUpdatePasswordModelVisible(false);
+ },
+ (error: unknown) => {
+ const msg =
+ error instanceof Error ? error.message : '修改失败，请重试';
+ Toast.error(msg);
+ },
+ );
+ };
+
+ return (
+ setUpdatePasswordModelVisible(false)}
+ closeOnEsc
+ >
+
+ );
+}
diff --git a/cyynote-frontend/src/components/modals/TrashListModal.tsx b/cyynote-frontend/src/components/modals/TrashListModal.tsx
new file mode 100644
index 0000000..93ea6d3
--- /dev/null
+++ b/cyynote-frontend/src/components/modals/TrashListModal.tsx
@@ -0,0 +1,66 @@
+import { Modal, List, Avatar, Button, ButtonGroup, Toast, Typography } from '@douyinfe/semi-ui';
+import { useUIStore } from '../../stores/useUIStore';
+import { useNoteStore } from '../../stores/useNoteStore';
+import noteService from '../../services/note.service';
+import type { INote } from '../../types';
+
+interface TrashListModalProps {
+ trashList: INote[];
+ onRestored: () => void;
+}
+
+export default function TrashListModal({ trashList, onRestored }: TrashListModalProps) {
+ const { deleteModelVisible, setDeleteModelVisible } = useUIStore();
+
+ const handleRestore = (id: number) => {
+ noteService.restoreFromTrash(id).then(
+ () => {
+ Toast.success('已从回收站恢复');
+ setDeleteModelVisible(false);
+ onRestored();
+ },
+ () => Toast.error('恢复失败，请重试'),
+ );
+ };
+
+ return (
+ setDeleteModelVisible(false)}
+ closeOnEsc
+ >
+
+ );
+}
diff --git a/cyynote-frontend/src/components/note/NoteEditor.tsx b/cyynote-frontend/src/components/note/NoteEditor.tsx
new file mode 100644
index 0000000..0bb827c
--- /dev/null
+++ b/cyynote-frontend/src/components/note/NoteEditor.tsx
@@ -0,0 +1,64 @@
+import { useCallback } from 'react';
+import { Input, Skeleton, Breadcrumb } from '@douyinfe/semi-ui';
+import { useNoteStore } from '../../stores/useNoteStore';
+import { useUIStore } from '../../stores/useUIStore';
+import PlaygroundApp from '../lexical/LexicalApp';
+
+export default function NoteEditor() {
+ const { currentNoteId, currentTitle, currentContent, setTitle } = useNoteStore();
+ const { isNoteLoading } = useUIStore();
+
+ const handleTitleChange = useCallback(
+ (value: string) => {
+ setTitle(value);
+ },
+ [setTitle],
+ );
+
+ // handleRefreshTree is intentionally a no-op here:
+ // LexicalApp calls it after structural changes, but tree refresh
+ // is driven by the NoteStore and handled at the NotePage level.
+ const handleRefreshTree = useCallback(() => {
+ // no-op: tree is refreshed by NotePage via store subscription
+ }, []);
+
+ return (
+ <>
+ {
- constructor(props: Props) {
- super(props);
- this.handleRegister = this.handleRegister.bind(this);
-
- this.state = {
- username: "",
- email: "",
- password: "",
- successful: false,
- message: ""
- };
- }
-
- validationSchema() {
- return Yup.object().shape({
- username: Yup.string()
- .test(
- "len",
- "The username must be between 3 and 20 characters.",
- (val: any) =>
- val &&
- val.toString().length >= 3 &&
- val.toString().length <= 20
- )
- .required("This field is required!"),
- email: Yup.string()
- .email("This is not a valid email.")
- .required("This field is required!"),
- password: Yup.string()
- .test(
- "len",
- "The password must be between 6 and 40 characters.",
- (val: any) =>
- val &&
- val.toString().length >= 6 &&
- val.toString().length <= 40
- )
- .required("This field is required!"),
- });
- }
-
- handleRegister(formValue: { username: string; email: string; password: string }) {
- const { username, email, password } = formValue;
-
- this.setState({
- message: "",
- successful: false
- });
-
- AuthService.register(
- username,
- email,
- password
- ).then(
- response => {
- this.setState({
- message: response.data.message,
- successful: true
- });
- },
- error => {
- const resMessage =
- (error.response &&
- error.response.data &&
- error.response.data.message) ||
- error.message ||
- error.toString();
-
- this.setState({
- successful: false,
- message: resMessage
- });
- }
- );
- }
-
- render() {
- const { successful, message } = this.state;
-
- const initialValues = {
- username: "",
- email: "",
- password: "",
- };
-
- return (
- ({ resolver: yupResolver(schema) });
+
+ const onSubmit = async (data: RegisterForm) => {
+ setMessage('');
+ setSuccessful(false);
+ try {
+ await authService.register(data.username, data.email, data.password);
+ setSuccessful(true);
+ setMessage('注册成功！请登录。');
+ } catch (error: unknown) {
+ const msg = error instanceof Error ? error.message : '注册失败，请重试';
+ setSuccessful(false);
+ setMessage(msg);
+ }
+ };
+
+ return (
+
+
- 
-
-
-
-
-
+ return (
+ 
-
-
+
+ );
}
diff --git a/cyynote-frontend/src/components/modals/DeleteModal.tsx b/cyynote-frontend/src/components/modals/DeleteModal.tsx
new file mode 100644
index 0000000..31cbf7e
--- /dev/null
+++ b/cyynote-frontend/src/components/modals/DeleteModal.tsx
@@ -0,0 +1,42 @@
+import { Modal, Toast } from '@douyinfe/semi-ui';
+import { useUIStore } from '../../stores/useUIStore';
+import { useNoteStore } from '../../stores/useNoteStore';
+import noteService from '../../services/note.service';
+
+interface DeleteModalProps {
+ onDeleted: () => void;
+}
+
+export default function DeleteModal({ onDeleted }: DeleteModalProps) {
+ const { deleteVisible, deleteId, deleteNoteName, closeDeleteConfirm } = useUIStore();
+ const clearCurrentNote = useNoteStore((s) => s.clearCurrentNote);
+
+ const handleOk = () => {
+ if (deleteId === null) return;
+ noteService.delete(deleteId).then(
+ () => {
+ Toast.info(`已删除：${deleteNoteName}`);
+ closeDeleteConfirm();
+ clearCurrentNote();
+ onDeleted();
+ },
+ () => {
+ Toast.error('删除失败，请重试');
+ closeDeleteConfirm();
+ },
+ );
+ };
+
+ return (
+
+
- );
- }
+
+
+
+
+
+ - (
+
+
+ {item.title}
+
+
+ 创建时间：{item.createtime}，更新时间：{item.updatetime}，
+ 最后浏览时间：{item.viewtime}。
+
+
+ }
+ extra={
+
+
+
+ {currentNoteId !== null && currentContent !== null ? ( +
+
+ );
+}
diff --git a/cyynote-frontend/src/components/profile.component.tsx b/cyynote-frontend/src/components/profile.component.tsx
index 9043fb5..cda8bea 100644
--- a/cyynote-frontend/src/components/profile.component.tsx
+++ b/cyynote-frontend/src/components/profile.component.tsx
@@ -1,7 +1,7 @@
import { Component } from "react";
-import { Navigate } from "react-router-dom";
+import { Navigate } from 'react-router';
import AuthService from "../services/auth.service";
-import IUser from "../types/user.type";
+import type { IUser } from '../types';
type Props = {};
diff --git a/cyynote-frontend/src/components/register.component.tsx b/cyynote-frontend/src/components/register.component.tsx
index e0919eb..85369ef 100644
--- a/cyynote-frontend/src/components/register.component.tsx
+++ b/cyynote-frontend/src/components/register.component.tsx
@@ -1,178 +1,126 @@
-import { Component } from "react";
-import { Formik, Field, Form, ErrorMessage } from "formik";
-import * as Yup from "yup";
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
+import authService from '../services/auth.service';
-import AuthService from "../services/auth.service";
+const schema = Yup.object().shape({
+ username: Yup.string()
+ .min(3, '用户名最少 3 个字符')
+ .max(20, '用户名最多 20 个字符')
+ .required('请输入用户名'),
+ email: Yup.string().email('邮箱格式不正确').required('请输入邮箱'),
+ password: Yup.string()
+ .min(6, '密码最少 6 个字符')
+ .max(40, '密码最多 40 个字符')
+ .required('请输入密码'),
+});
-type Props = {};
-
-type State = {
- username: string,
- email: string,
- password: string,
- successful: boolean,
- message: string
-};
-
-export default class Register extends Component+
+ {currentNoteId !== null && currentContent !== null ? ( +
请从左侧选择笔记
+ )}
+
+
-
- );
- }
+interface RegisterForm {
+ username: string;
+ email: string;
+ password: string;
+}
+
+export default function Register() {
+ const [message, setMessage] = useState('');
+ const [successful, setSuccessful] = useState(false);
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm
-
-
-
-
-
-
-
-
-
+
+ );
}
diff --git a/cyynote-frontend/src/components/sidebar/NoteTree.tsx b/cyynote-frontend/src/components/sidebar/NoteTree.tsx
new file mode 100644
index 0000000..35db517
--- /dev/null
+++ b/cyynote-frontend/src/components/sidebar/NoteTree.tsx
@@ -0,0 +1,199 @@
+import { useCallback } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import {
+ Tree,
+ List,
+ Input,
+ Button,
+ ButtonGroup,
+ Dropdown,
+ Typography,
+ Toast,
+} from '@douyinfe/semi-ui';
+import {
+ IconCopyAdd,
+ IconDelete,
+ IconSearch,
+} from '@douyinfe/semi-icons';
+import { IconModal, IconToken as LabIconToken, IconTreeSelect } from '@douyinfe/semi-icons-lab';
+import { useNoteStore } from '../../stores/useNoteStore';
+import { useUIStore } from '../../stores/useUIStore';
+import noteService from '../../services/note.service';
+import type { INote, ITreeNode } from '../../types';
+
+const NAV_ITEMS = ['首页', '设置', '已删除'] as const;
+type NavItem = (typeof NAV_ITEMS)[number];
+
+interface NoteTreeProps {
+ onRefreshTree: () => void;
+ onNavItemClick: (item: NavItem) => void;
+ onSearch: () => void;
+}
+
+export default function NoteTree({ onRefreshTree, onNavItemClick, onSearch }: NoteTreeProps) {
+ const { treeData, viewData, currentNoteId, setCurrentNote } = useNoteStore();
+ const { openDeleteConfirm, setSearchQuery, searchQuery, setActiveView } = useUIStore();
+
+ const loadNote = useCallback(
+ (id: number) => {
+ noteService.get(id).then(
+ (res) => {
+ const note = res.data;
+ setCurrentNote(note.id, note.title, note.context);
+ setActiveView('note');
+ },
+ () => Toast.error('加载笔记失败'),
+ );
+ },
+ [setCurrentNote, setActiveView],
+ );
+
+ const addNote = useCallback(
+ (pid: number) => {
+ noteService.add(pid).then(
+ () => {
+ Toast.success('已添加');
+ onRefreshTree();
+ },
+ () => Toast.error('添加失败'),
+ );
+ },
+ [onRefreshTree],
+ );
+
+ const treeStyle: CSSProperties = {
+ height: 550,
+ border: '1px solid var(--semi-color-border)',
+ position: 'sticky',
+ top: '85px',
+ };
+
+ const renderLabel = (label: ReactNode, item: ITreeNode) => (
+
+
+
+
+
+
+
+
+
+
+ {label}
+
+
+ }
+ onClick={(e) => {
+ addNote(item.key);
+ e.stopPropagation();
+ }}
+ />
+ }
+ onClick={(e) => {
+ openDeleteConfirm(item.key, String(label));
+ e.stopPropagation();
+ }}
+ />
+
+
+ );
+
+ return (
+ <>
+ +
+ }
+ showClear
+ value={searchQuery}
+ onChange={(v) => setSearchQuery(v)}
+ onEnterPress={onSearch}
+ />
+
+
+ + CYY Note +
+ +- (
+
onNavItemClick(item)}
+ >
+ {item === '首页' && } style={{ marginRight: 4 }} />}
+ {item === '设置' && } style={{ marginRight: 4 }} />}
+ {item === '已删除' && } style={{ marginRight: 4 }} />}
+ {item}
+
+ )}
+ />
+
+
+
+
+
+ 最近浏览
+ loadNote(item.id)}
+ >
+ {item.title}
+
+ ))}
+
+ }
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/cyynote-frontend/src/pages/note-page.tsx b/cyynote-frontend/src/pages/note-page.tsx
index 6eaeac9..c465fa1 100644
--- a/cyynote-frontend/src/pages/note-page.tsx
+++ b/cyynote-frontend/src/pages/note-page.tsx
@@ -1,1154 +1,374 @@
-import { Component } from "react";
-import { Navigate } from "react-router-dom";
-import AuthService from "../services/auth.service";
-import IUser from "../types/user.type";
-import {
- Layout,
- Nav,
- Button,
- Breadcrumb,
- Skeleton,
- Avatar,
- List,
- Tree,
- Input,
- Typography,
- Toast,
- ButtonGroup, Form,
- SideSheet, Tabs, TabPane, BackTop, Modal, Dropdown, Tag,
- Row
-} from '@douyinfe/semi-ui';
-
-import {
- IconBell,
- IconBytedanceLogo,
- IconSearch,
- IconExit, IconArrowUp, IconMenu, IconCopyAdd, IconDelete, IconMinusCircle, IconCode
-} from '@douyinfe/semi-icons';
-import { IconDescriptions, IconModal, IconToken, IconTreeSelect } from "@douyinfe/semi-icons-lab";
-
-import "./styles.css";
-
-
-import NoteService from "../services/note.service";
-
-import PlaygroundApp from "../components/lexical/LexicalApp.tsx";
-
-
-type Props = NonNullable- (
+
+
+ {item.title}
+
+
+ 创建时间：{item.createtime}，更新时间：{item.updatetime}，
+ 最后浏览时间：{item.viewtime}。
+
+
+ }
+ extra={
+
-
- {label}
-
- {/*{label}*/}
- {treeButton(item.key)}
-
- );
- const onTreeSelect = (e) => {
- console.log('当前选项: ', e)
- this.setState({
- isNoteShow: false
- });
- NoteService.get(e).then(
- response => {
- // console.log(response.data.data)
- const data = response.data.data
- // console.log(data)
- this.setState({
- showSettings: false,
- showNote: true,
- showHome: false,
- showSearch: false,
- noteId: data.id,
- editData: data.context,
- noteTitle: data.title,
- isNoteShow: true,
- treeValue: data.id,
- });
- },
- error => {
- console.log(error)
- }
- );
- console.log(e);
- };
-
-
- const treeDataWithNode = treeNodeData;
-
- console.log(treeDataWithNode)
-
- const treeStyle = {
- // width: 260,
- height: 550,
- border: '1px solid var(--semi-color-border)',
- position: 'sticky',
- top: '85px',
- };
-
- const onbreakpoint = (screen, bool) => {
- console.log(screen, bool);
-
- if (!bool) {
- this.setState({
- siderFlag: false,
- siderWidth: '0px'
- });
- } else {
- this.setState({
- siderFlag: true,
- siderWidth: '265px'
- });
- }
-
- };
-
- const inputOnChange = (value, e) => {
- console.log(value);
- this.setState({
- noteTitle: value,
- });
- }
-
- const itemClick = (e, item) => {
- console.log(e);
- console.log(e.item);
- console.log(item);
- console.log('itemClick');
- Toast.info('菜单选择:' + item);
- if (item === '首页') {
- this.setState({
- showSettings: false,
- showNote: false,
- showHome: true,
- showSearch: false,
- });
- } else if (item === '设置') {
- this.setState({
- showSettings: true,
- showNote: false,
- showHome: false,
- showSearch: false,
- });
-
- } else if (item === '已删除') {
- console.log('已删除');
- this.setState({
- deleteModelVisible: true,
- });
-
- NoteService.dataHome('4', '0').then(
- response => {
- // console.log(response.data.data);
- const data = response.data.data
- // console.log(data);
- this.setState({
- deleteListData: data,
- })
- },
- error => {
- console.log(error)
- }
- );
- }
- };
- const homeDataClick = (e, item) => {
- console.log(e);
- console.log(e.item);
- console.log(item);
- console.log('homeDataClick');
- // Toast.info('查看:' + item);
- onTreeSelect(item);
- };
-
- const deleteNote = (id) => {
- console.log('deleteNote');
- NoteService.delete(id).then(
- response => {
- console.log(response.data.data);
- const data = response.data.data
- console.log(data);
- Toast.info('删除:' + data);
- this.handleLawClick();
- },
- error => {
- console.log(error)
- }
- );
- }
-
- const addNote = (pid) => {
- console.log('addNote');
- console.log(pid);
- NoteService.add(pid).then(
- response => {
- console.log(response.data.data);
- const data = response.data.data
- console.log(data);
- Toast.info('添加:' + data);
- this.handleLawClick();
- },
- error => {
- console.log(error)
- }
- );
- }
-
-
- const updatePassword = () => {
- console.log('updatePassword');
- this.setState({updatePasswordModelVisible: true,});
- }
-
-
- const historyClick = (flag) => {
- console.log('historyClick');
- console.log(flag);
-
- NoteService.historyQueryOrDelete(flag).then(
- response => {
- console.log("data:"+response.data.data)
- Toast.info("historyCount:"+response.data.data);
- },
- error => {
- console.log(error)
- }
- );
-
- }
-
-
- const dropdownClick = (id) => {
- console.log('dropdownClick');
- console.log(id);
- console.log('dropdownClick=============');
- onTreeSelect(id);
- }
- const search = () => {
- console.log('search');
- console.log(this.state.searchData);
-
- this.setState({
- showSettings: false,
- showNote: false,
- showHome: false,
- showSearch: true,
- });
-
- NoteService.dataHome('0', this.state.searchData).then(
- response => {
- console.log(response.data.data);
- const data = response.data.data
- console.log(data);
- this.setState({
- dataHome: data,
- })
- },
- error => {
- console.log(error)
- }
- );
-
- }
-
- const onTabSelect = (e) => {
- console.log(e);
- console.log('onTabSelect');
-
- NoteService.dataHome(e, '0').then(
- response => {
- console.log(response.data.data);
- const data = response.data.data
- console.log(data);
- this.setState({
- dataHome: data,
- })
- },
- error => {
- console.log(error)
- }
- );
-
- };
- const deleteListDataClick = (e, item) => {
- console.log(e);
- console.log(e.item);
- console.log(item);
- console.log('deleteListDataClick');
-
- NoteService.deleteBack(item).then(
- response => {
- console.log(response.data.data)
- Toast.info('已恢复:' + response.data.data);
- this.handleLawClick(0)
- this.setState({ deleteModelVisible: false, });
- },
- error => {
- console.log(error)
- }
- );
- };
-
-
- return (
-
-
-
- -
- } showClear onEnterPress={() => search()} >
-
-
- CYY Note
--
-
itemClick(e, item)}>
- {/*} style={{ marginRight: 4 }} />*/}
- {item === '首页' && } style={{ marginRight: 4 }} />}
- {item === '设置' && } style={{ marginRight: 4 }} />}
- {item === '已删除' && } style={{ marginRight: 4 }} />}
-
- {item}
-
- }
-
- // renderItem={item =>
-
-
-
- 最近浏览
- dropdownClick(item.id)}>{item.title}
- )
- })
- }
-
- }
- >
-
-
-
- - More content... {noteId} - - -
- -
-
-
-
-
-
- -
-
-
-
- {showNote &&
- - (
-
- {item.title}
-
-
- 创建时间：{item.createtime}，更新时间：{item.updatetime}，最后浏览时间：{item.viewtime}。
-
-
-
- }
- extra={
-
-
- - {isNoteShow ? ( -
- - - {isNoteShow ? ( -
-
- ) : (
-
- 空
-
- )}
- .
- -
- onTabSelect(e)}>
-
-
-
-
-
-
-
-
-
-
-
- - (
-
- {item.title}
-
- 创建时间：{item.createtime}，更新时间：{item.updatetime}，最后浏览时间：{item.viewtime}。
-
-
-
- }
- extra={
-
- Settings
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- Search： {this.state.searchData}
- {this.state.searchData} - -
- - {this.state.searchData} - -
-
-
- - (
-
- {item.title}，
-
- 创建时间：{item.createtime}，更新时间：{item.updatetime}，最后浏览时间：{item.viewtime}。
-
-
- }
- extra={
-
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ {
+ setActiveView('note');
+ noteService.get(id).then(
+ (res) => {
+ const note = res.data;
+ useNoteStore.getState().setCurrentNote(note.id, note.title, note.context);
+ },
+ () => Toast.error('加载失败'),
+ );
+ }} />
+
+ 搜索：{searchQuery}
+
+
+
+ );
+}
diff --git a/cyynote-frontend/src/pages/sign-in.tsx b/cyynote-frontend/src/pages/sign-in.tsx
index 9599a03..b91aa12 100644
--- a/cyynote-frontend/src/pages/sign-in.tsx
+++ b/cyynote-frontend/src/pages/sign-in.tsx
@@ -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- (
+
+
+ {item.title}
+
+
+ 创建时间：{item.createtime}，更新时间：{item.updatetime}。
+
+
+ }
+ extra={
+
-
-
-
-
-
- {/*Header*/}
-
+
+ + CyyNote 登录 +
+ +