diff --git a/react-pc-project/package-lock.json b/react-pc-project/package-lock.json
index 8e0a818..6d50ed1 100644
--- a/react-pc-project/package-lock.json
+++ b/react-pc-project/package-lock.json
@@ -19,6 +19,7 @@
         "mobx-react-lite": "^3.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-quill": "^1.3.5",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^4.0.0",
         "web-vitals": "^2.1.4"
@@ -1918,7 +1919,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -1930,7 +1931,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -3430,25 +3431,25 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
       "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/aria-query": {
       "version": "4.2.2",
@@ -3741,6 +3742,14 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.0.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
@@ -4458,7 +4467,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "1.0.10",
@@ -5962,6 +5971,14 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -6396,11 +6413,20 @@
         "sha.js": "^2.4.8"
       }
     },
+    "node_modules/create-react-class": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "dependencies": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -7264,7 +7290,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -9018,6 +9044,11 @@
       "resolved": "https://registry.npmjs.org/type/-/type-2.6.0.tgz",
       "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ=="
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -9083,6 +9114,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/fast-glob": {
       "version": "3.2.11",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -10444,7 +10480,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
       "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/import-cwd": {
       "version": "2.1.0",
@@ -13476,7 +13512,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -14590,6 +14626,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -16407,6 +16448,37 @@
         }
       ]
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -17220,6 +17292,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dom-factories": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
+      "integrity": "sha512-Bmic2N3oKji7vw9qjDr2dmwHvOATbFSnKy7EH0uT/qjvzIUsiXp6Yquk72LJ3WfMtRnq3ujXMMo7GsJeLPfFWw=="
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -17230,6 +17307,25 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-quill": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.5.tgz",
+      "integrity": "sha512-/W/rNCW+6QpGz8yQ9tFK5Ka/h/No1RqrcOOvCIOR092OiKzRFlU2xbPEwiP3Wgy/Dx13pi1YhjReDMX/5uotJg==",
+      "dependencies": {
+        "@types/quill": "1.3.10",
+        "create-react-class": "^15.6.0",
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.10",
+        "quill": "^1.3.7",
+        "react-dom-factories": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8.x"
+      },
+      "peerDependencies": {
+        "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -18402,7 +18498,7 @@
       "version": "1.53.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
       "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -20331,7 +20427,7 @@
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20374,7 +20470,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -20475,19 +20571,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -20513,19 +20596,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "3.9.10",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
-      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20889,7 +20959,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "7.1.2",
@@ -22770,7 +22840,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -24077,7 +24147,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -24086,7 +24156,7 @@
           "version": "0.3.9",
           "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
           "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-          "devOptional": true,
+          "dev": true,
           "requires": {
             "@jridgewell/resolve-uri": "^3.0.3",
             "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -25160,25 +25230,25 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
       "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
-      "devOptional": true
+      "dev": true
     },
     "@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "@tsconfig/node16": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
-      "devOptional": true
+      "dev": true
     },
     "@types/aria-query": {
       "version": "4.2.2",
@@ -25433,6 +25503,14 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
     },
+    "@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "requires": {
+        "parchment": "^1.1.2"
+      }
+    },
     "@types/react": {
       "version": "18.0.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
@@ -25826,8 +25904,7 @@
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -25879,14 +25956,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -26000,7 +26075,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "argparse": {
       "version": "1.0.10",
@@ -26443,8 +26518,7 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "requires": {}
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.1",
@@ -27183,6 +27257,11 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -27535,11 +27614,20 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-class": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "cross-spawn": {
       "version": "7.0.3",
@@ -28195,7 +28283,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true
+      "dev": true
     },
     "diff-sequences": {
       "version": "26.6.2",
@@ -29051,8 +29139,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "requires": {}
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
     },
     "eslint-plugin-testing-library": {
       "version": "3.10.2",
@@ -29499,6 +29586,11 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -29551,6 +29643,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-glob": {
       "version": "3.2.11",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -30587,7 +30684,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
       "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
-      "devOptional": true
+      "dev": true
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -31889,8 +31986,7 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "26.0.0",
@@ -32833,7 +32929,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "makeerror": {
       "version": "1.0.12",
@@ -33115,8 +33211,7 @@
     "mobx-react-lite": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
-      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
-      "requires": {}
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ=="
     },
     "moment": {
       "version": "2.29.4",
@@ -33685,6 +33780,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -35143,6 +35243,36 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -35733,6 +35863,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-dom-factories": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
+      "integrity": "sha512-Bmic2N3oKji7vw9qjDr2dmwHvOATbFSnKy7EH0uT/qjvzIUsiXp6Yquk72LJ3WfMtRnq3ujXMMo7GsJeLPfFWw=="
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -35743,6 +35878,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-quill": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.5.tgz",
+      "integrity": "sha512-/W/rNCW+6QpGz8yQ9tFK5Ka/h/No1RqrcOOvCIOR092OiKzRFlU2xbPEwiP3Wgy/Dx13pi1YhjReDMX/5uotJg==",
+      "requires": {
+        "@types/quill": "1.3.10",
+        "create-react-class": "^15.6.0",
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.10",
+        "quill": "^1.3.7",
+        "react-dom-factories": "^1.0.0"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -36664,7 +36812,7 @@
       "version": "1.53.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
       "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -38190,7 +38338,7 @@
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
       "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
-      "devOptional": true,
+      "dev": true,
       "requires": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -38211,7 +38359,7 @@
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
           "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-          "devOptional": true
+          "dev": true
         }
       }
     },
@@ -38289,13 +38437,6 @@
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
     },
-    "type-fest": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "optional": true,
-      "peer": true
-    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -38318,12 +38459,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typescript": {
-      "version": "3.9.10",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
-      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
-      "peer": true
-    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -38600,7 +38735,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "v8-to-istanbul": {
       "version": "7.1.2",
@@ -40057,8 +40192,7 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "requires": {}
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -40128,7 +40262,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true
+      "dev": true
     },
     "yocto-queue": {
       "version": "0.1.0",
diff --git a/react-pc-project/package.json b/react-pc-project/package.json
index 69978c8..9c07ab5 100644
--- a/react-pc-project/package.json
+++ b/react-pc-project/package.json
@@ -14,6 +14,7 @@
     "mobx-react-lite": "^3.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-quill": "^1.3.5",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^4.0.0",
     "web-vitals": "^2.1.4"
diff --git a/react-pc-project/src/pages/Article/index.js b/react-pc-project/src/pages/Article/index.js
index f301f89..ed96a76 100644
--- a/react-pc-project/src/pages/Article/index.js
+++ b/react-pc-project/src/pages/Article/index.js
@@ -1,7 +1,248 @@
-function Article () {
+import { Link, useNavigate } from 'react-router-dom'
+import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Table, Tag, Space, Popconfirm } from 'antd'
+import 'moment/locale/zh-cn'
+import locale from 'antd/es/date-picker/locale/zh_CN'
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
+import img404 from '@/assets/error.png'
+import './index.scss'
+import { useEffect, useState } from 'react'
+import { http } from '@/utils'
+import { useStore } from '@/store'
+import { observer } from 'mobx-react-lite'
+
+const { Option } = Select
+const { RangePicker } = DatePicker
+
+const Article = () => {
+    const { channelStore } = useStore()
+    /* // 频道列表管理
+    const [channeList, setChangelList] = useState([])
+
+    useEffect(() => {
+        const loadChannelList = async () => {
+            const res = await http.get('/channels')
+            setChangelList(res.data.channels)
+        }
+        loadChannelList()
+    }, []) */
+
+    // 文章列表管理 (统一管理数据，将来修改给 setList 传对象)
+    const [articleData, setArticleData] = useState({
+        list: [],     // 文章列表
+        count: 0     // 文章数量
+    })
+
+    // 文章参数管理
+    const [params, setParams] = useState({
+        page: 1,
+        per_page: 10,
+    })
+
+    /**
+     * 如果异步请求函数需要依赖一些数据的变化而重新执行，推荐把异步请求函数写到 useEffect 内部
+     * 统一不抽离函数到外面，只要涉及到异步请求的函数，都放到 useEffect 内部
+     * 本质区别：异步请求函数写到 useEffect 外部，当每次组件更新都会重新进行函数初始化，这本身就是一次性能消耗；而写到 useEffect 中，只会会依赖项发生变化的时候，函数才会进行重新初始化，避免性能损失
+     */
+    useEffect(() => {
+        const loadList = async () => {
+            const res = await http.get('/mp/articles', { params })
+            console.log(res)
+            const { results, total_count } = res.data
+            setArticleData ({
+                list: results,
+                count: total_count
+            })
+        }
+        loadList()
+    }, [params])
+
+    // 筛选
+    const onFinish = (values) => {
+        console.log(values)
+        const { channel_id, date, status } = values
+        // 数据处理
+        const _params = {}
+        if (status !== -1) {
+            _params.status = status
+        }
+        if (channel_id) {
+            _params.channel_id = channel_id
+        }
+        if (date) {
+            // 开始日期
+            _params.begin_pubdate = date[0].format('YYY-MM-DD')
+            // 结束日期
+            _params.end_pubdate = date[1].format('YYY-MM-DD')
+        } 
+        // 修改 params 数据，引起接口的重新发送，数据的字段是做一个对象的合并，对象的合并是一个整体的覆盖，改变了对象的整体应用
+        // 以下是不覆盖整体对象：
+        setParams({
+            ...params,
+            ..._params
+        })
+    }
+
+    // 分页
+    const pageChange = (page) => {
+        setParams({
+            ...params,
+            page
+        })
+    }
+
+    // 删除
+    const delArticle = async (data) => {
+        await http.delete(`/mp/articles/${data.id}`)
+        // 删除完要刷新列表（改动 useEffect 的依赖项就会重新调用接口进行刷新）
+        // 删完后会跳转回第一页
+        setParams ({
+            ...params,
+            page: 1
+        })
+    }
+
+    // 编辑
+    const navigate = useNavigate()
+    const goPublish = (data) => {
+        navigate(`/publish?id=${data.id}`)
+    }
+
+    const columns = [
+        {
+            title: '封面',
+            dataIndex: 'cover',
+            width: 120,
+            render: cover => {
+                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
+            }
+        },
+        {
+            title: '标题',
+            dataIndex: 'title',
+            width: 220
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            render: data => <Tag color="green">审核通过</Tag>
+        },
+        {
+            title: '发布时间',
+            dataIndex: 'pubdate'
+        },
+        {
+            title: '阅读数',
+            dataIndex: 'read_count'
+        },
+        {
+            title: '评论数',
+            dataIndex: 'comment_count'
+        },
+        {
+            title: '点赞数',
+            dataIndex: 'like_count'
+        },
+        {
+            title: '操作',
+            render: data => {
+                return (
+                    <Space size="middle">
+                        <Popconfirm 
+                        title="确定要编辑吗?"
+                        okText="确定" 
+                        cancelText="取消"
+                        onConfirm={() => goPublish(data)}>
+                        <Button
+                        type="primary"
+                        shape="circle"
+                        icon={<EditOutlined />}
+                        />
+                        </Popconfirm>
+
+                        <Popconfirm 
+                        title="确定删除吗?"
+                        okText="确定" 
+                        cancelText="取消"
+                        onConfirm={() => delArticle(data)}>
+                        <Button
+                            type="primary"
+                            danger
+                            shape="circle"
+                            icon={<DeleteOutlined />}
+                        />
+                        </Popconfirm>
+                    </Space>
+                )
+            }
+        }
+    ]
+
     return (
-        <div>Article</div>
+        <div>
+            {/* 筛选区域 */}
+            <Card
+                title={
+                    <Breadcrumb separator=">">
+                        <Breadcrumb.Item>
+                            <Link to="/home">首页</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>内容管理</Breadcrumb.Item>
+                    </Breadcrumb>
+                }
+                style={{ marginBottom: 20 }}
+            >
+                <Form
+                    onFinish={onFinish}
+                    initialValues={{ status: null }}>
+                    <Form.Item label="状态" name="status">
+                        <Radio.Group>
+                            <Radio value={null}>全部</Radio>
+                            <Radio value={0}>草稿</Radio>
+                            <Radio value={1}>待审核</Radio>
+                            <Radio value={2}>审核通过</Radio>
+                            <Radio value={3}>审核失败</Radio>
+                        </Radio.Group>
+                    </Form.Item>
+
+                    <Form.Item label="频道" name="channel_id">
+                        <Select
+                            placeholder="请选择文章频道"
+                            style={{ width: 120 }}
+                        >
+
+                            {channelStore.channelList.map(channel => <Option key={channel.id} value="channel.id">{channel.name}</Option>)}
+
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item label="日期" name="date">
+                        {/* 传入locale属性 控制中文显示*/}
+                        <RangePicker locale={locale}></RangePicker>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" style={{ marginLeft: 80 }}>
+                            筛选
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            {/* 文章列表区域 */}
+            <Card title={`根据筛选条件共查询到 ${articleData.count} 条结果：`}>
+                <Table 
+                rowKey="id" 
+                columns={columns} 
+                dataSource={articleData.list}
+                pagination={{
+                    pageSize: params.per_page,
+                    total: articleData.count,
+                    onChange: pageChange
+                }} 
+                />
+            </Card>
+        </div>
     )
 }
 
-export default Article
\ No newline at end of file
+export default observer(Article)
\ No newline at end of file
diff --git a/react-pc-project/src/pages/Article/index.scss b/react-pc-project/src/pages/Article/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/react-pc-project/src/pages/Layout/index.js b/react-pc-project/src/pages/Layout/index.js
index 47e9a6c..6126615 100644
--- a/react-pc-project/src/pages/Layout/index.js
+++ b/react-pc-project/src/pages/Layout/index.js
@@ -16,11 +16,12 @@ const { Header, Sider } = Layout
 
 const GeekLayout = () => {
   const { pathname } = useLocation()
-  const { userStore, loginStore } = useStore()
+  const { userStore, loginStore, channelStore } = useStore()
 
   useEffect( () => {
     userStore.getUserInfo()
-  }, [userStore])
+    channelStore.loadChannelList()
+  }, [userStore, channelStore])
 
   // 确定退出
   const navigate = useNavigate()
diff --git a/react-pc-project/src/pages/Publish/index.js b/react-pc-project/src/pages/Publish/index.js
index d3befc1..a4dce9f 100644
--- a/react-pc-project/src/pages/Publish/index.js
+++ b/react-pc-project/src/pages/Publish/index.js
@@ -1,7 +1,121 @@
-function Publish () {
+import {
+    Card,
+    Breadcrumb,
+    Form,
+    Button,
+    Radio,
+    Input,
+    Upload,
+    Space,
+    Select
+} from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import { Link } from 'react-router-dom'
+import './index.scss'
+import ReactQuill from 'react-quill'
+import 'react-quill/dist/quill.snow.css'
+import { useStore } from '@/store'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+
+const { Option } = Select
+
+const Publish = () => {
+    const { channelStore } = useStore()
+
+    // 存放上传图片的列表
+    const { fileList, setFileList } = useState([])
+
+    const onUploadChange = ({fileList}) => {
+        console.log(fileList)
+        // 采取受控的写法，在最后一次 log 里 response，最终 react state fileList 中存放的数据有 response.data.url
+        setFileList(fileList)
+    }
+
     return (
-        <div>Publish</div>
+        <div className="publish">
+            <Card
+                title={
+                    <Breadcrumb separator=">">
+                        <Breadcrumb.Item>
+                            <Link to="/home">首页</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>发布文章</Breadcrumb.Item>
+                    </Breadcrumb>
+                }
+            >
+                <Form
+                    labelCol={{ span: 4 }}
+                    wrapperCol={{ span: 16 }}
+                    initialValues={{ type: 1, content: 'this is content' }}
+                >
+                    <Form.Item
+                        label="标题"
+                        name="title"
+                        rules={[{ required: true, message: '请输入文章标题' }]}
+                    >
+                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="频道"
+                        name="channel_id"
+                        rules={[{ required: true, message: '请选择文章频道' }]}
+                    >
+                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
+                            {channelStore.channelList.map(item => (
+                                <Option key={item.id} value={item.id}>{item.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item label="封面">
+                        <Form.Item name="type">
+                            <Radio.Group>
+                                <Radio value={1}>单图</Radio>
+                                <Radio value={3}>三图</Radio>
+                                <Radio value={0}>无图</Radio>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Upload
+                            name="image"
+                            listType="picture-card"
+                            className="avatar-uploader"
+                            showUploadList
+                            action="http://geek.itheima.net/v1_0/upload"
+                            fileList={fileList}
+                            onChange={onUploadChange}
+                        >
+                            <div style={{ marginTop: 8 }}>
+                                <PlusOutlined />
+                            </div>
+                        </Upload>
+                    </Form.Item>
+
+                    {/* 这里的富文本组件，已经被 Form.Item 控制，它的输入内容会在 onFinished 回调中收集起来 */}
+                    <Form.Item
+                        label="内容"
+                        name="content"
+                        rules={[{ required: true, message: '请输入文章内容' }]}
+                    >
+                        <ReactQuill
+                            className="publish-quill"
+                            theme="snow"
+                            placeholder="请输入文章内容"
+                        />
+                    </Form.Item>
+
+                    <Form.Item wrapperCol={{ offset: 4 }}>
+                        <Space>
+                            <Button size="large" type="primary" htmlType="submit">
+                                发布文章
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Card>
+        </div>
     )
 }
 
-export default Publish
\ No newline at end of file
+export default observer(Publish)
\ No newline at end of file
diff --git a/react-pc-project/src/pages/Publish/index.scss b/react-pc-project/src/pages/Publish/index.scss
new file mode 100644
index 0000000..6f713ca
--- /dev/null
+++ b/react-pc-project/src/pages/Publish/index.scss
@@ -0,0 +1,17 @@
+.publish {
+    position: relative;
+  }
+  
+  .ant-upload-list {
+    .ant-upload-list-picture-card-container,
+    .ant-upload-select {
+      width: 146px;
+      height: 146px;
+    }
+  }
+
+  .publish-quill {
+    .ql-editor {
+      min-height: 300px;
+    }
+  }
\ No newline at end of file
diff --git a/react-pc-project/src/store/channel.Store.js b/react-pc-project/src/store/channel.Store.js
new file mode 100644
index 0000000..a8ffc07
--- /dev/null
+++ b/react-pc-project/src/store/channel.Store.js
@@ -0,0 +1,16 @@
+import { makeAutoObservable } from 'mobx'
+import {http} from '@/utils'
+
+class ChannelStore {
+    channelList = []
+    constructor () {
+        makeAutoObservable(this)
+    }
+
+    loadChannelList = async () => {
+        const res = await http.get('/channels')
+        this.channelList = res.data.channels
+    }
+}
+
+export default ChannelStore
\ No newline at end of file
diff --git a/react-pc-project/src/store/index.js b/react-pc-project/src/store/index.js
index c2ac8ed..3c901ee 100644
--- a/react-pc-project/src/store/index.js
+++ b/react-pc-project/src/store/index.js
@@ -4,11 +4,13 @@
 import React from "react";
 import LoginStore from "./login.Store";
 import UserStore from "./user.Store"
+import ChannelStore from "./channel.Store";
 
 class RootStore {
     constructor() {
         this.loginStore = new LoginStore()
         this.userStore = new UserStore()
+        this.channelStore = new ChannelStore()
     }
 }