feat(m): 列表

Author: bestGao

src/constants/commonTypes.ts

@@ -0,0 +1,20 @@
+const articleTypes = [
+  {
+    label: "大前端",
+    value: "FE",
+  },
+  {
+    label: "后端",
+    value: "BE",
+  },
+  {
+    label: "人工智能",
+    value: "AI",
+  },
+  {
+    label: "系统架构设计",
+    value: "Architecture",
+  },
+];
+
+export { articleTypes };

src/constants/menus.tsx

@@ -26,7 +26,7 @@ const menuItems: MenuItem[] = [
   {
     key: "Architecture",
     icon: <KubernetesOutlined />,
-    label: <Link to="/system_architecture">系统架构</Link>,
+    label: <Link to="/system_architecture">系统架构设计</Link>,
   },
 ];
 

src/pages/ai/index.module.less

@@ -1,15 +1,14 @@
 .aiContainer {
-  height: 100%;
-  display: flex;
-
-  flex-direction: column;
-  justify-content: space-between;
   .title {
     height: 64px;
   }
 }
 .bigMe {
-  flex: 1;
+  position: absolute;
+  bottom: 0;
+  right: 16px;
+  width: 200px;
+  height: 100px;
   background-repeat: no-repeat;
   background-image: url("../../assets/me.png");
   background-size: 100%;

src/pages/ai/index.tsx

@@ -1,8 +1,37 @@
+import { useEffect } from "react";
+import { List } from "antd";
+import { post } from "@/utils/request";
 import style from "./index.module.less";
+import useCustomReducer from "@/hooks/useCusReducer";
+import { Link } from "react-router-dom";
 export default function AI() {
+  const [state, dispatch] = useCustomReducer({
+    article: [],
+  });
+
+  useEffect(() => {
+    async function getList() {
+      const res: any = await post("/user/posts", { articleType: "AI" });
+      if (res) {
+        dispatch("article", res.articles);
+      }
+    }
+    getList();
+  }, []);
   return (
     <div className={style.aiContainer}>
-      <div className={style.title}>人工智能</div>
+      <List
+        size="large"
+        bordered
+        dataSource={state.article}
+        renderItem={(item: any) => (
+          <List.Item>
+            <Link target="_blank" to={item.link}>
+              {item.title}
+            </Link>
+          </List.Item>
+        )}
+      />
       <div className={style.bigMe} />
     </div>
   );

src/pages/arch/index.tsx

@@ -1,3 +1,37 @@
-export default function BE() {
-  return <div>后端</div>;
+import { useEffect } from "react";
+import { List } from "antd";
+import style from "./index.module.less";
+import { post } from "@/utils/request";
+import useCustomReducer from "@/hooks/useCusReducer";
+import { Link } from "react-router-dom";
+export default function BFE() {
+  const [state, dispatch] = useCustomReducer({
+    article: [],
+  });
+
+  useEffect(() => {
+    async function getList() {
+      const res: any = await post("/user/posts", { articleType: "Architecture" });
+      if (res) {
+        dispatch("article", res.articles);
+      }
+    }
+    getList();
+  }, []);
+  return (
+    <div>
+      <List
+        size="large"
+        bordered
+        dataSource={state.article}
+        renderItem={(item: any) => (
+          <List.Item>
+            <Link target="_blank" to={item.link}>
+              {item.title}
+            </Link>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
 }

src/pages/be/index.tsx

@@ -1,3 +1,37 @@
-export default function BE() {
-  return <div>后端</div>;
+import { useEffect } from "react";
+import { List } from "antd";
+import style from "./index.module.less";
+import { post } from "@/utils/request";
+import useCustomReducer from "@/hooks/useCusReducer";
+import { Link } from "react-router-dom";
+export default function BFE() {
+  const [state, dispatch] = useCustomReducer({
+    article: [],
+  });
+
+  useEffect(() => {
+    async function getList() {
+      const res: any = await post("/user/posts", { articleType: "BE" });
+      if (res) {
+        dispatch("article", res.articles);
+      }
+    }
+    getList();
+  }, []);
+  return (
+    <div>
+      <List
+        size="large"
+        bordered
+        dataSource={state.article}
+        renderItem={(item: any) => (
+          <List.Item>
+            <Link target="_blank" to={item.link}>
+              {item.title}
+            </Link>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
 }

src/pages/bfe/index.tsx

@@ -1,3 +1,37 @@
+import { useEffect } from "react";
+import { List } from "antd";
+import style from "./index.module.less";
+import { post } from "@/utils/request";
+import useCustomReducer from "@/hooks/useCusReducer";
+import { Link } from "react-router-dom";
 export default function BFE() {
-  return <div>大前端</div>;
+  const [state, dispatch] = useCustomReducer({
+    article: [],
+  });
+
+  useEffect(() => {
+    async function getList() {
+      const res: any = await post("/user/posts", { articleType: "FE" });
+      if (res) {
+        dispatch("article", res.articles);
+      }
+    }
+    getList();
+  }, []);
+  return (
+    <div>
+      <List
+        size="large"
+        bordered
+        dataSource={state.article}
+        renderItem={(item: any) => (
+          <List.Item>
+            <Link target="_blank" to={item.link}>
+              {item.title}
+            </Link>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
 }

src/pages/user/write/index.tsx

@@ -2,10 +2,30 @@ import { useEffect, useState } from "react";
 import Vditor from "vditor";
 import style from "./index.module.less";
 import "vditor/dist/index.css";
-import { Button } from "antd";
+import { post } from "@/utils/request";
+import {
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  List,
+  Typography,
+  message,
+} from "antd";
+import axios from "axios";
+import { articleTypes } from "@/constants/commonTypes";
+import { useNavigate } from "react-router-dom";
 
-const App = () => {
+const { Option } = Select;
+const { Title } = Typography;
+
+const Write = () => {
   const [vd, setVd] = useState<Vditor>();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+
   useEffect(() => {
     const vditor = new Vditor("vditor", {
       mode: "sv",
@@ -14,20 +34,95 @@ const App = () => {
         setVd(vditor);
       },
     });
+
     // Clear the effect
     return () => {
       vd?.destroy();
       setVd(undefined);
     };
   }, []);
+
+  const handlePublish = () => {
+    setIsModalVisible(true);
+  };
+
+  // 定义 ValidationError 类型
+
+  const handleOk = async () => {
+    // 验证表单字段，如果有错误会抛出异常
+    await form.validateFields();
+
+    // 获取所有字段的值
+    const values = form.getFieldsValue();
+    // 获取富文本编辑器的内容
+    const content = vd?.getValue();
+
+    if (!content) {
+      return;
+    }
+
+    // 发送请求
+    const response: any = await post("/user/write", {
+      category: values.category,
+      title: values.title,
+      content: content,
+    });
+
+    // 根据响应显示成功或错误模态框
+    if (response?.success) {
+      message.success("文章已成功发布");
+      // 成功后可以关闭弹窗并重置表单
+      setIsModalVisible(false);
+      form.resetFields();
+      setTimeout(() => {
+        navigate("/");
+      }, 0);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+  };
+
   return (
     <div className={style.writeWP}>
       <div className={style.operaBtns}>
-        <Button type="primary">发布</Button>
+        <Button type="primary" onClick={handlePublish}>
+          发布
+        </Button>
       </div>
       <div id="vditor" className="vditor" />
+      <Modal
+        title="发布文章"
+        open={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        okText="确定"
+        cancelText="取消"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="category"
+            label="文章分类"
+            rules={[{ required: true, message: "请选择文章分类" }]}
+          >
+            <Select
+              placeholder="请选择文章分类"
+              options={articleTypes}
+            ></Select>
+          </Form.Item>
+          <Form.Item
+            name="title"
+            label="文章标题"
+            rules={[{ required: true, message: "请输入文章标题" }]}
+          >
+            <Input placeholder="请输入文章标题" />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 };
 
-export default App;
+export default Write;

src/utils/request.ts

@@ -44,7 +44,7 @@ service.interceptors.response.use(
           break;
         case 401:
           console.log(`response`, error.response.data);
-          message.error(error.response.data.message)
+          message.error(error.response.data.message);
           break;
         case 403:
           console.log("Forbidden");
@@ -53,10 +53,14 @@ service.interceptors.response.use(
           console.log("Not Found");
           break;
         case 500:
-          console.log("Internal Server Error");
+          if (error.response.data.message) {
+            message.error(error.response.data.message);
+          } else {
+            console.log(error);
+          }
           break;
         default:
-          message.error(error.response.data.message)
+          message.error(error.response.data.message);
           console.log(`Unexpected error: ${error.response.status}`);
       }
     } else if (error.request) {