= { // TS 语法
+ // const editorConfig = { // JS 语法
+ placeholder: '请输入内容...',
+ }
+
+ // 及时销毁 editor ，重要！
+ useEffect(() => {
+ return () => {
+ if (editor == null) return
+ editor.destroy()
+ setEditor(null)
+ }
+ }, [editor])
+
+ return (
+ <>
+
+
+ setHtmlFn(editor.getHtml())}
+ mode="default"
+ style={{ height: '500px', overflowY: 'hidden' }}
+ />
+
+
+ )
+}
+export default WangEditor
\ No newline at end of file
diff --git a/webook-fe/src/pages/articles/edit.tsx b/webook-fe/src/pages/articles/edit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e951a04b43b007b46ba2ca7c324835be1fd5dbea
--- /dev/null
+++ b/webook-fe/src/pages/articles/edit.tsx
@@ -0,0 +1,92 @@
+import dynamic from 'next/dynamic'
+import {Button, Form, Input} from "antd";
+import {useEffect, useState} from "react";
+import axios from "@/axios/axios";
+import router from "next/router";
+import {ProLayout} from "@ant-design/pro-components";
+import {useSearchParams} from "next/navigation";
+const WangEditor = dynamic(
+ // 引入对应的组件 设置的组件参考上面的wangEditor react使用文档
+ () => import('../../components/editor'),
+ {ssr: false},
+)
+
+function Page() {
+ const [form] = Form.useForm()
+ const [html, setHtml] = useState()
+ const params = useSearchParams()
+ const artID = params?.get("id")
+ const onFinish = (values: any) => {
+ if(artID) {
+ values.id = parseInt(artID)
+ }
+ values.content = html
+ axios.post("/articles/edit", values)
+ .then((res) => {
+ if(res.status != 200) {
+ alert(res.statusText);
+ return
+ }
+ if (res.data?.code == 0) {
+ router.push('/articles/list')
+ return
+ }
+ alert(res.data?.msg || "系统错误");
+ }).catch((err) => {
+ alert(err);
+ })
+ };
+ const publish = () => {
+ const values = form.getFieldsValue()
+ if (artID) {
+ values.id = parseInt(artID)
+ }
+ values.content = html
+ axios.post("/articles/publish", values)
+ .then((res) => {
+ if(res.status != 200) {
+ alert(res.statusText);
+ return
+ }
+ if (res.data?.code == 0) {
+ router.push('/articles/view?id='+res.data.data)
+ return
+ }
+ alert(res.data?.msg || "系统错误");
+ }).catch((err) => {
+ alert(err);
+ })
+ }
+
+ const [data, setData] = useState( )
+ useEffect(() => {
+ if (!artID) {
+ return
+ }
+ axios.get('/articles/detail/'+artID)
+ .then((res) => res.data)
+ .then((data) => {
+ form.setFieldsValue(data.data)
+ setHtml(data.data.content)
+ })
+ }, [form, artID])
+
+ return
+
+
+}
+export default Page
\ No newline at end of file
diff --git a/webook-fe/src/pages/articles/list.tsx b/webook-fe/src/pages/articles/list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a8d0e1303a38f2a822c8aa5dac51318f3e985df
--- /dev/null
+++ b/webook-fe/src/pages/articles/list.tsx
@@ -0,0 +1,137 @@
+import {EditOutlined} from '@ant-design/icons';
+import {ProLayout, ProList} from '@ant-design/pro-components';
+import {Button, Tag} from 'antd';
+import React, {useEffect, useState} from 'react';
+import axios from "@/axios/axios";
+import router from "next/router";
+
+const IconText = ({ icon, text, onClick }: { icon: any; text: string, onClick: any}) => (
+
+);
+
+interface ArticleItem {
+ id: bigint
+ title: string
+ status: number
+ abstract: string
+}
+
+const dataSource = [
+ {
+ title: '语雀的天空',
+ status: 1,
+ content: "hello, world"
+ },
+ {
+ title: 'Ant Design',
+ },
+ {
+ title: '蚂蚁金服体验科技',
+ },
+ {
+ title: 'TechUI',
+ },
+];
+
+const ArticleList = () => {
+ const [data, setData] = useState>([])
+ const [loading, setLoading] = useState()
+ useEffect(() => {
+ setLoading(true)
+ axios.post('/articles/list', {
+ "offset": 0,
+ "limit": 100,
+ }).then((res) => res.data)
+ .then((data) => {
+ setData(data.data)
+ setLoading(false)
+ })
+ }, [])
+
+ return (
+
+
+ toolBarRender={() => {
+ return [
+ ,
+ ];
+ }}
+ itemLayout="vertical"
+ rowKey="id"
+ headerTitle="文章列表"
+ loading={loading}
+ dataSource={data}
+ // ts:ignore
+ metas={{
+ title: {
+ dataIndex: "title"
+ },
+ description: {
+ render: (data, record, idx) => {
+ switch (record.status) {
+ case 1:
+ return (
+ <>
+ 未发表
+
+ )
+ case 2:
+ return (
+ <>
+ 已发表
+
+ )
+ case 3:
+ return (
+ <>
+ 尽自己可见
+
+ )
+ default:
+ return (<>)
+ }
+
+ },
+ },
+ actions: {
+ render: (text, row) => [
+ {
+ router.push("/articles/edit?id=" + row.id.toString())
+ }}
+ key="list-vertical-edit-o"
+ />,
+ ],
+ },
+ extra: {
+ render: () => (
+ 
+ ),
+ },
+ content: {
+ render: (node, record) => {
+ return (
+
+
+
+ )
+ }
+ },
+ }}
+ />
+
+ );
+};
+
+export default ArticleList;
diff --git a/webook-fe/src/pages/articles/model.tsx b/webook-fe/src/pages/articles/model.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..722bd753bf8845db08844c0f27e5efdb57092884
--- /dev/null
+++ b/webook-fe/src/pages/articles/model.tsx
@@ -0,0 +1,10 @@
+type Article = {
+ id: number
+ title: string
+ content: string
+ likeCnt: number
+ liked: boolean
+ collectCnt: number
+ collected: boolean
+ readCnt: number
+}
\ No newline at end of file
diff --git a/webook-fe/src/pages/articles/view.tsx b/webook-fe/src/pages/articles/view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..df28bd2f8c81acfa5cad8fd05bfdecb829b1094a
--- /dev/null
+++ b/webook-fe/src/pages/articles/view.tsx
@@ -0,0 +1,83 @@
+import React, {useState, useEffect, CSSProperties} from 'react';
+import axios from "@/axios/axios";
+import {useSearchParams} from "next/navigation";
+import {Button, Typography} from "antd";
+import {ProLayout} from "@ant-design/pro-components";
+import {EyeOutlined, LikeOutlined, StarOutlined} from "@ant-design/icons";
+import color from "@wangeditor/basic-modules/dist/basic-modules/src/modules/color";
+
+function Page(){
+ const [data, setData] = useState()
+ const [isLoading, setLoading] = useState(false)
+ const params = useSearchParams()
+ const artID = params?.get("id")!
+ debugger
+ useEffect(() => {
+ setLoading(true)
+ axios.get('/articles/pub/'+artID)
+ .then((res) => res.data)
+ .then((data) => {
+ setData(data.data)
+ setLoading(false)
+ })
+ }, [artID])
+
+ if (isLoading) return Loading...
+ if (!data) return No data
+
+ const like = () => {
+ axios.post('/articles/pub/like', {
+ id: parseInt(artID),
+ like: !data.liked
+ })
+ .then((res) => res.data)
+ .then((res) => {
+ if(res.code == 0) {
+ if (data.liked) {
+ data.likeCnt --
+ } else {
+ data.likeCnt ++
+ }
+ data.liked = !data.liked
+ setData(Object.assign({}, data))
+ }
+ })
+ }
+
+ const collect = () => {
+ if (data.collected) {
+ return
+ }
+ axios.post('/articles/pub/collect', {
+ id: parseInt(artID),
+ // 你可以加上增删改查收藏夹的功能，在这里传入收藏夹 ID
+ cid: 0,
+ })
+ .then((res) => res.data)
+ .then((res) => {
+ if(res.code == 0) {
+ data.collectCnt ++
+ data.collected = !data.collected
+ setData(Object.assign({}, data))
+ }
+ })
+ }
+
+ return (
+
+
+
+ {data.title}
+
+
+
+
+
+ }> {data.readCnt}
+ }> {data.likeCnt}
+ }> {data.collectCnt}
+
+ )
+}
+
+export default Page
\ No newline at end of file
diff --git a/webook-fe/src/pages/users/edit.tsx b/webook-fe/src/pages/users/edit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4cfe1bb5fd51dda164f2a27a7cb98bcd269f8f2d
--- /dev/null
+++ b/webook-fe/src/pages/users/edit.tsx
@@ -0,0 +1,94 @@
+import React, {useEffect, useState} from 'react';
+import {Button, DatePicker, Form, Input} from 'antd';
+import axios from "@/axios/axios";
+import moment from 'moment';
+import router from "next/router";
+
+const { TextArea } = Input;
+
+const onFinish = (values: any) => {
+ if (values.birthday) {
+ values.birthday = moment(values.birthday).format("YYYY-MM-DD")
+ }
+ axios.post("/users/edit", values)
+ .then((res) => {
+ if(res.status != 200) {
+ alert(res.statusText);
+ return
+ }
+ if (res.data?.code == 0) {
+ router.push('/users/profile')
+ return
+ }
+ alert(res.data?.msg || "系统错误");
+ }).catch((err) => {
+ alert(err);
+ })
+};
+
+const onFinishFailed = (errorInfo: any) => {
+ alert("输入有误")
+};
+
+function EditForm() {
+ const p: Profile = {} as Profile
+ const [data, setData] = useState(p)
+ const [isLoading, setLoading] = useState(false)
+
+ useEffect(() => {
+ setLoading(true)
+ axios.get('/users/profile')
+ .then((res) => res.data)
+ .then((data) => {
+ setData(data)
+ setLoading(false)
+ })
+ }, [])
+
+ if (isLoading) return Loading...
+ if (!data) return No profile data
+ return