实现投稿ui

2026-01-23 11:16:07 +08:00
parent 2bb3db5966
commit 5932adcd9a
8 changed files with 839 additions and 16 deletions
--- a/back/main.py
+++ b/back/main.py
@@ -293,6 +293,28 @@ def downvote():
    except Exception as e:
        return jsonify({"code": 2003, "data": f"点踩失败: {str(e)}"})

+@app.route('/api/test', methods=['GET'])
+def test_api():
+    return jsonify({"code": 1000, "data": ""})
+
+@app.route('/api/statics', methods=['GET'])
+def get_statics():
+    try:
+        post_count = Submission.query.count()
+        comment_count = Comment.query.count()
+        # TODO：目前暂未实现图片上传逻辑，先返回114514！！！
+        image_count = 114514
+        return jsonify({
+            "code": 1000,
+            "data": {
+                "posts": post_count,
+                "comments": comment_count,
+                "images": image_count
+            }
+        })
+    except Exception as e:
+        return jsonify({"code": 2003, "data": str(e)})
+
 # --- 用户的管理api端点 ---
 # TODO: 用户管理端点

--- a/front/package.json
+++ b/front/package.json
@@ -13,6 +13,7 @@
    "@fluentui/react": "^8.125.3",
    "@fluentui/react-components": "^9.72.9",
    "@fluentui/react-icons": "^2.0.316",
+    "@uiw/react-md-editor": "^4.0.11",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-markdown": "^10.1.0",
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
      '@fluentui/react-icons':
        specifier: ^2.0.316
        version: 2.0.316(react@19.2.3)
+      '@uiw/react-md-editor':
+        specifier: ^4.0.11
+        version: 4.0.11(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
      react:
        specifier: ^19.2.0
        version: 19.2.3
@@ -1044,85 +1047,71 @@ packages:
    resolution: {integrity: sha512-AEXMESUDWWGqD6LwO/HkqCZgUE1VCJ1OhbvYGsfqX2Y6w5quSXuyoy/Fg3nRqiwro+cJYFxiw5v4kB2ZDLhxrw==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.55.2':
    resolution: {integrity: sha512-ZV7EljjBDwBBBSv570VWj0hiNTdHt9uGznDtznBB4Caj3ch5rgD4I2K1GQrtbvJ/QiB+663lLgOdcADMNVC29Q==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.55.2':
    resolution: {integrity: sha512-uvjwc8NtQVPAJtq4Tt7Q49FOodjfbf6NpqXyW/rjXoV+iZ3EJAHLNAnKT5UJBc6ffQVgmXTUL2ifYiLABlGFqA==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.55.2':
    resolution: {integrity: sha512-s3KoWVNnye9mm/2WpOZ3JeUiediUVw6AvY/H7jNA6qgKA2V2aM25lMkVarTDfiicn/DLq3O0a81jncXszoyCFA==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loong64-gnu@4.55.2':
    resolution: {integrity: sha512-gi21faacK+J8aVSyAUptML9VQN26JRxe484IbF+h3hpG+sNVoMXPduhREz2CcYr5my0NE3MjVvQ5bMKX71pfVA==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-loong64-musl@4.55.2':
    resolution: {integrity: sha512-qSlWiXnVaS/ceqXNfnoFZh4IiCA0EwvCivivTGbEu1qv2o+WTHpn1zNmCTAoOG5QaVr2/yhCoLScQtc/7RxshA==}
    cpu: [loong64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-ppc64-gnu@4.55.2':
    resolution: {integrity: sha512-rPyuLFNoF1B0+wolH277E780NUKf+KoEDb3OyoLbAO18BbeKi++YN6gC/zuJoPPDlQRL3fIxHxCxVEWiem2yXw==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-ppc64-musl@4.55.2':
    resolution: {integrity: sha512-g+0ZLMook31iWV4PvqKU0i9E78gaZgYpSrYPed/4Bu+nGTgfOPtfs1h11tSSRPXSjC5EzLTjV/1A7L2Vr8pJoQ==}
    cpu: [ppc64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-riscv64-gnu@4.55.2':
    resolution: {integrity: sha512-i+sGeRGsjKZcQRh3BRfpLsM3LX3bi4AoEVqmGDyc50L6KfYsN45wVCSz70iQMwPWr3E5opSiLOwsC9WB4/1pqg==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.55.2':
    resolution: {integrity: sha512-C1vLcKc4MfFV6I0aWsC7B2Y9QcsiEcvKkfxprwkPfLaN8hQf0/fKHwSF2lcYzA9g4imqnhic729VB9Fo70HO3Q==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.55.2':
    resolution: {integrity: sha512-68gHUK/howpQjh7g7hlD9DvTTt4sNLp1Bb+Yzw2Ki0xvscm2cOdCLZNJNhd2jW8lsTPrHAHuF751BygifW4bkQ==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.53.3':
    resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.55.2':
    resolution: {integrity: sha512-1e30XAuaBP1MAizaOBApsgeGZge2/Byd6wV4a8oa6jPdHELbRHBiw7wvo4dp7Ie2PE8TZT4pj9RLGZv9N4qwlw==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.55.2':
    resolution: {integrity: sha512-4BJucJBGbuGnH6q7kpPqGJGzZnYrpAzRd60HQSt3OpX/6/YVgSsJnNzR8Ot74io50SeVT4CtCWe/RYIAymFPwA==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-openbsd-x64@4.55.2':
    resolution: {integrity: sha512-cT2MmXySMo58ENv8p6/O6wI/h/gLnD3D6JoajwXFZH6X9jz4hARqUhWpGuQhOgLNXscfZYRQMJvZDtWNzMAIDw==}
@@ -1178,6 +1167,9 @@ packages:
  '@types/estree@1.0.8':
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}

+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
  '@types/hast@3.0.4':
    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}

@@ -1193,6 +1185,9 @@ packages:
  '@types/node@24.10.9':
    resolution: {integrity: sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==}

+  '@types/prismjs@1.26.5':
+    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
+
  '@types/react-dom@19.2.3':
    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
    peerDependencies:
@@ -1266,6 +1261,21 @@ packages:
    resolution: {integrity: sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@uiw/copy-to-clipboard@1.0.19':
+    resolution: {integrity: sha512-AYxzFUBkZrhtExb2QC0C4lFH2+BSx6JVId9iqeGHakBuosqiQHUQaNZCvIBeM97Ucp+nJ22flOh8FBT2pKRRAA==}
+
+  '@uiw/react-markdown-preview@5.1.5':
+    resolution: {integrity: sha512-DNOqx1a6gJR7Btt57zpGEKTfHRlb7rWbtctMRO2f82wWcuoJsxPBrM+JWebDdOD0LfD8oe2CQvW2ICQJKHQhZg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@uiw/react-md-editor@4.0.11':
+    resolution: {integrity: sha512-F0OR5O1v54EkZYvJj3ew0I7UqLiPeU34hMAY4MdXS3hI86rruYi5DHVkG/VuvLkUZW7wIETM2QFtZ459gKIjQA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
  '@ungap/structured-clone@1.3.0':
    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}

@@ -1305,6 +1315,12 @@ packages:
    resolution: {integrity: sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==}
    hasBin: true

+  bcp-47-match@2.0.3:
+    resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
  brace-expansion@1.1.12:
    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}

@@ -1366,6 +1382,9 @@ packages:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}

+  css-selector-parser@3.3.0:
+    resolution: {integrity: sha512-Y2asgMGFqJKF4fq4xHDSlFYIkeVfRsm69lQC1q9kbEsH5XtnINTMrweLkjYMeaUgiXBy/uvKeO/a1JHTNnmB2g==}
+
  csstype@3.2.3:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

@@ -1391,6 +1410,10 @@ packages:
  devlop@1.1.0:
    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}

+  direction@2.0.1:
+    resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==}
+    hasBin: true
+
  electron-to-chromium@1.5.267:
    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}

@@ -1407,6 +1430,10 @@ packages:
  embla-carousel@8.6.0:
    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}

+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
  esbuild@0.27.2:
    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
    engines: {node: '>=18'}
@@ -1525,6 +1552,9 @@ packages:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
  glob-parent@6.0.2:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}
@@ -1541,12 +1571,54 @@ packages:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}

+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-has-property@3.0.0:
+    resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==}
+
+  hast-util-heading-rank@3.0.0:
+    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-parse-selector@3.1.1:
+    resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
+  hast-util-select@6.0.4:
+    resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
  hast-util-to-jsx-runtime@2.3.6:
    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}

+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
  hast-util-whitespace@3.0.0:
    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}

+  hastscript@7.2.0:
+    resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
  hermes-estree@0.25.1:
    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}

@@ -1556,6 +1628,9 @@ packages:
  html-url-attributes@3.0.1:
    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}

+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
  ignore@5.3.2:
    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
    engines: {node: '>= 4'}
@@ -1804,6 +1879,9 @@ packages:
  node-releases@2.0.27:
    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}

+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
  optionator@0.9.4:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}
@@ -1823,6 +1901,12 @@ packages:
  parse-entities@4.0.2:
    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}

+  parse-numeric-range@1.3.0:
+    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
  path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@@ -1846,6 +1930,9 @@ packages:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}

+  property-information@6.5.0:
+    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
+
  property-information@7.1.0:
    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}

@@ -1867,6 +1954,12 @@ packages:
      '@types/react': '>=18'
      react: '>=18'

+  react-markdown@9.0.3:
+    resolution: {integrity: sha512-Yk7Z94dbgYTOrdk41Z74GoKA7rThnsbbqBTRYuxoe08qvfQ9tJVhmAKw6BJS/ZORG7kTy/s1QvYzSuaoBA1qfw==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
  react-refresh@0.18.0:
    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
    engines: {node: '>=0.10.0'}
@@ -1892,9 +1985,52 @@ packages:
    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
    engines: {node: '>=0.10.0'}

+  refractor@4.9.0:
+    resolution: {integrity: sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og==}
+
+  rehype-attr@3.0.3:
+    resolution: {integrity: sha512-Up50Xfra8tyxnkJdCzLBIBtxOcB2M1xdeKe1324U06RAvSjYm7ULSeoM+b/nYPQPVd7jsXJ9+39IG1WAJPXONw==}
+    engines: {node: '>=16'}
+
+  rehype-autolink-headings@7.1.0:
+    resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
+
+  rehype-ignore@2.0.3:
+    resolution: {integrity: sha512-IzhP6/u/6sm49sdktuYSmeIuObWB+5yC/5eqVws8BhuGA9kY25/byz6uCy/Ravj6lXUShEd2ofHM5MyAIj86Sg==}
+    engines: {node: '>=16'}
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-prism-plus@2.0.0:
+    resolution: {integrity: sha512-FeM/9V2N7EvDZVdR2dqhAzlw5YI49m9Tgn7ZrYJeYHIahM6gcXpH0K1y2gNnKanZCydOMluJvX2cB9z3lhY8XQ==}
+
+  rehype-prism-plus@2.0.1:
+    resolution: {integrity: sha512-Wglct0OW12tksTUseAPyWPo3srjBOY7xKlql/DPKi7HbsdZTyaLCAoO58QBKSczFQxElTsQlOY3JDOFzB/K++Q==}
+
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  rehype-rewrite@4.0.4:
+    resolution: {integrity: sha512-L/FO96EOzSA6bzOam4DVu61/PB3AGKcSPXpa53yMIozoxH4qg1+bVZDF8zh1EsuxtSauAhzt5cCnvoplAaSLrw==}
+    engines: {node: '>=16.0.0'}
+
+  rehype-slug@6.0.0:
+    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
+
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
  remark-gfm@4.0.1:
    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}

+  remark-github-blockquote-alert@1.3.1:
+    resolution: {integrity: sha512-OPNnimcKeozWN1w8KVQEuHOxgN3L4rah8geMOLhA5vN9wITqU4FWD+G26tkEsCGHiOVDbISx+Se5rGZ+D1p0Jg==}
+    engines: {node: '>=16'}
+
  remark-parse@11.0.0:
    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}

@@ -2010,6 +2146,9 @@ packages:
  unified@11.0.5:
    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}

+  unist-util-filter@5.0.1:
+    resolution: {integrity: sha512-pHx7D4Zt6+TsfwylH9+lYhBhzyhEnCXs/lbq/Hstxno5z4gVdyc2WEW0asfjGKPyG4pEKrnBv5hdkO6+aRnQJw==}
+
  unist-util-is@6.0.1:
    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}

@@ -2039,6 +2178,9 @@ packages:
    peerDependencies:
      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
  vfile-message@4.0.3:
    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}

@@ -2085,6 +2227,9 @@ packages:
      yaml:
        optional: true

+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
  which@2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}
@@ -3814,6 +3959,10 @@ snapshots:

  '@types/estree@1.0.8': {}

+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.11
+
  '@types/hast@3.0.4':
    dependencies:
      '@types/unist': 3.0.3
@@ -3830,6 +3979,8 @@ snapshots:
    dependencies:
      undici-types: 7.16.0

+  '@types/prismjs@1.26.5': {}
+
  '@types/react-dom@19.2.3(@types/react@19.2.8)':
    dependencies:
      '@types/react': 19.2.8
@@ -3933,6 +4084,41 @@ snapshots:
      '@typescript-eslint/types': 8.53.1
      eslint-visitor-keys: 4.2.1

+  '@uiw/copy-to-clipboard@1.0.19': {}
+
+  '@uiw/react-markdown-preview@5.1.5(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@uiw/copy-to-clipboard': 1.0.19
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-markdown: 9.0.3(@types/react@19.2.8)(react@19.2.3)
+      rehype-attr: 3.0.3
+      rehype-autolink-headings: 7.1.0
+      rehype-ignore: 2.0.3
+      rehype-prism-plus: 2.0.0
+      rehype-raw: 7.0.0
+      rehype-rewrite: 4.0.4
+      rehype-slug: 6.0.0
+      remark-gfm: 4.0.1
+      remark-github-blockquote-alert: 1.3.1
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  '@uiw/react-md-editor@4.0.11(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@uiw/react-markdown-preview': 5.1.5(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      rehype: 13.0.2
+      rehype-prism-plus: 2.0.1
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
  '@ungap/structured-clone@1.3.0': {}

  '@vitejs/plugin-react@5.1.2(vite@7.3.1(@types/node@24.10.9))':
@@ -3972,6 +4158,10 @@ snapshots:

  baseline-browser-mapping@2.9.15: {}

+  bcp-47-match@2.0.3: {}
+
+  boolbase@1.0.0: {}
+
  brace-expansion@1.1.12:
    dependencies:
      balanced-match: 1.0.2
@@ -4028,6 +4218,8 @@ snapshots:
      shebang-command: 2.0.0
      which: 2.0.2

+  css-selector-parser@3.3.0: {}
+
  csstype@3.2.3: {}

  debug@4.4.3:
@@ -4046,6 +4238,8 @@ snapshots:
    dependencies:
      dequal: 2.0.3

+  direction@2.0.1: {}
+
  electron-to-chromium@1.5.267: {}

  embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
@@ -4058,6 +4252,8 @@ snapshots:

  embla-carousel@8.6.0: {}

+  entities@6.0.1: {}
+
  esbuild@0.27.2:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.27.2
@@ -4209,6 +4405,8 @@ snapshots:

  gensync@1.0.0-beta.2: {}

+  github-slugger@2.0.0: {}
+
  glob-parent@6.0.2:
    dependencies:
      is-glob: 4.0.3
@@ -4219,6 +4417,94 @@ snapshots:

  has-flag@4.0.0: {}

+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-has-property@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-heading-rank@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-parse-selector@3.1.1:
+    dependencies:
+      '@types/hast': 2.3.10
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-select@6.0.4:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      bcp-47-match: 2.0.3
+      comma-separated-tokens: 2.0.3
+      css-selector-parser: 3.3.0
+      devlop: 1.1.0
+      direction: 2.0.1
+      hast-util-has-property: 3.0.0
+      hast-util-to-string: 3.0.1
+      hast-util-whitespace: 3.0.0
+      nth-check: 2.1.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
  hast-util-to-jsx-runtime@2.3.6:
    dependencies:
      '@types/estree': 1.0.8
@@ -4239,10 +4525,40 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
  hast-util-whitespace@3.0.0:
    dependencies:
      '@types/hast': 3.0.4

+  hastscript@7.2.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 3.1.1
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
  hermes-estree@0.25.1: {}

  hermes-parser@0.25.1:
@@ -4251,6 +4567,8 @@ snapshots:

  html-url-attributes@3.0.1: {}

+  html-void-elements@3.0.0: {}
+
  ignore@5.3.2: {}

  ignore@7.0.5: {}
@@ -4686,6 +5004,10 @@ snapshots:

  node-releases@2.0.27: {}

+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
  optionator@0.9.4:
    dependencies:
      deep-is: 0.1.4
@@ -4717,6 +5039,12 @@ snapshots:
      is-decimal: 2.0.1
      is-hexadecimal: 2.0.1

+  parse-numeric-range@1.3.0: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
  path-exists@4.0.0: {}

  path-key@3.1.1: {}
@@ -4733,6 +5061,8 @@ snapshots:

  prelude-ls@1.2.1: {}

+  property-information@6.5.0: {}
+
  property-information@7.1.0: {}

  punycode@2.3.1: {}
@@ -4762,6 +5092,23 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  react-markdown@9.0.3(@types/react@19.2.8)(react@19.2.3):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/react': 19.2.8
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 19.2.3
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
  react-refresh@0.18.0: {}

  react-router-dom@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
@@ -4780,6 +5127,90 @@ snapshots:

  react@19.2.3: {}

+  refractor@4.9.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      '@types/prismjs': 1.26.5
+      hastscript: 7.2.0
+      parse-entities: 4.0.2
+
+  rehype-attr@3.0.3:
+    dependencies:
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  rehype-autolink-headings@7.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@ungap/structured-clone': 1.3.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-is-element: 3.0.0
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  rehype-ignore@2.0.3:
+    dependencies:
+      hast-util-select: 6.0.4
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-prism-plus@2.0.0:
+    dependencies:
+      hast-util-to-string: 3.0.1
+      parse-numeric-range: 1.3.0
+      refractor: 4.9.0
+      rehype-parse: 9.0.1
+      unist-util-filter: 5.0.1
+      unist-util-visit: 5.0.0
+
+  rehype-prism-plus@2.0.1:
+    dependencies:
+      hast-util-to-string: 3.0.1
+      parse-numeric-range: 1.3.0
+      refractor: 4.9.0
+      rehype-parse: 9.0.1
+      unist-util-filter: 5.0.1
+      unist-util-visit: 5.0.0
+
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  rehype-rewrite@4.0.4:
+    dependencies:
+      hast-util-select: 6.0.4
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  rehype-slug@6.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      github-slugger: 2.0.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-to-string: 3.0.1
+      unist-util-visit: 5.0.0
+
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
+
  remark-gfm@4.0.1:
    dependencies:
      '@types/mdast': 4.0.4
@@ -4791,6 +5222,10 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  remark-github-blockquote-alert@1.3.1:
+    dependencies:
+      unist-util-visit: 5.0.0
+
  remark-parse@11.0.0:
    dependencies:
      '@types/mdast': 4.0.4
@@ -4941,6 +5376,12 @@ snapshots:
      trough: 2.2.0
      vfile: 6.0.3

+  unist-util-filter@5.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
  unist-util-is@6.0.1:
    dependencies:
      '@types/unist': 3.0.3
@@ -4978,6 +5419,11 @@ snapshots:
    dependencies:
      react: 19.2.3

+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
  vfile-message@4.0.3:
    dependencies:
      '@types/unist': 3.0.3
@@ -5000,6 +5446,8 @@ snapshots:
      '@types/node': 24.10.9
      fsevents: 2.3.3

+  web-namespaces@2.0.1: {}
+
  which@2.0.2:
    dependencies:
      isexe: 2.0.0
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,10 +1,10 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { MainLayout } from './layouts/MainLayout';
 import About from './components/About';
+import CreatePost from './components/CreatePost';
 import './App.css';

 const Home = () => <h1>Home Page</h1>;
-const CreatePost = () => <h1>Create Post</h1>;
 const NotFound = () => <h1>404 Not Found</h1>;

 function App() {
--- a/front/src/api.ts
+++ b/front/src/api.ts
@@ -48,3 +48,36 @@ export const getAbout = async (): Promise<string> => {
    throw error;
  }
 };
+
+export interface StaticsData {
+  posts: number;
+  comments: number;
+  images: number;
+}
+
+export const testApiStatus = async (): Promise<boolean> => {
+  try {
+    const response = await fetch('/api/test');
+    return response.ok;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const getStatics = async (): Promise<StaticsData> => {
+  try {
+    const response = await fetch('/api/statics');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const json = await response.json();
+    if (json.code === 1000) {
+      return json.data;
+    } else {
+      throw new Error('Invalid response code');
+    }
+  } catch (error) {
+    console.error('Failed to fetch statics:', error);
+    throw error;
+  }
+};
--- a/front/src/components/CreatePost.tsx
+++ b/front/src/components/CreatePost.tsx
@@ -0,0 +1,126 @@
+// 我草，react-md-editor这么好用，无语了，早知道v1也用这个编辑器了.....
+// 不过居然没有汉化...有点可惜
+// 我撤回刚才那句话，编辑器有提供中文指令集，我是sb。
+import React, { useState, useEffect } from 'react';
+import MDEditor from '@uiw/react-md-editor';
+// 引入中文指令集
+import { getCommands, getExtraCommands } from '@uiw/react-md-editor/commands-cn';
+// 导入编辑器样式
+import '@uiw/react-md-editor/markdown-editor.css';
+import { 
+  Button, 
+  Text, 
+  makeStyles, 
+  shorthands, 
+  tokens 
+} from '@fluentui/react-components';
+import { 
+  NumberSymbol24Regular, 
+  Send24Regular, 
+  Save24Regular 
+} from '@fluentui/react-icons';
+import { useLayout } from '../context/LayoutContext';
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    maxWidth: '1000px',
+    margin: '0 auto',
+    ...shorthands.padding('20px'),
+    boxSizing: 'border-box',
+  },
+  editorWrapper: {
+    flexGrow: 1,
+    minHeight: '400px',
+    marginBottom: '20px',
+    '& .w-md-editor': {
+      height: '100% !important',
+      boxShadow: tokens.shadow16,
+      borderRadius: tokens.borderRadiusMedium,
+    }
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  footerLeft: {
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center',
+  },
+  footerRight: {
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center',
+  },
+  autoSaveText: {
+    color: tokens.colorNeutralForeground4,
+    fontSize: tokens.fontSizeBase200,
+  }
+});
+
+const CreatePost: React.FC = () => {
+  const styles = useStyles();
+  const { isDarkMode } = useLayout();
+  const [value, setValue] = useState<string | undefined>("");
+  const [lastSaved, setLastSaved] = useState<string>("");
+
+  useEffect(() => {
+    // 模拟自动保存时间显示
+    const now = new Date();
+    setLastSaved(now.toLocaleTimeString('zh-CN', { hour12: false }));
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.editorWrapper} data-color-mode={isDarkMode ? "dark" : "light"}>
+        <MDEditor
+          value={value}
+          onChange={setValue}
+          preview="live"
+          height="100%"
+          textareaProps={{
+            placeholder: "请在此输入投稿内容...",
+          }}
+          commands={getCommands()}
+          extraCommands={getExtraCommands()}
+        />
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.footerLeft}>
+          <Button 
+            appearance="primary" 
+            icon={<Send24Regular />}
+          >
+            提交
+          </Button>
+          <Button 
+            appearance="subtle" 
+            icon={<NumberSymbol24Regular />}
+          >
+            添加标签
+          </Button>
+        </div>
+
+        <div className={styles.footerRight}>
+          <Text className={styles.autoSaveText}>
+            自动保存 {lastSaved}
+          </Text>
+          <Button 
+            appearance="outline" 
+            icon={<Save24Regular />}
+          >
+            保存草稿
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreatePost;
--- a/front/src/components/StatusDisplay.tsx
+++ b/front/src/components/StatusDisplay.tsx
@@ -0,0 +1,177 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  makeStyles,
+  tokens,
+  Card,
+  CardHeader,
+  Text,
+  Spinner,
+  Badge,
+  Button,
+} from '@fluentui/react-components';
+import { 
+  CheckmarkCircle20Filled, 
+  DismissCircle20Filled,
+  ArrowClockwise20Regular
+} from '@fluentui/react-icons';
+import { testApiStatus, getStatics } from '../api';
+import type { StaticsData } from '../api';
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+    width: '100%',
+  },
+  card: {
+    width: '100%',
+  },
+  statusContainer: {
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    paddingBottom: tokens.spacingVerticalM,
+  },
+  statusText: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalSNudge,
+  },
+  online: {
+    color: tokens.colorStatusSuccessForeground1,
+    fontSize: tokens.fontSizeBase200,
+  },
+  offline: {
+    color: tokens.colorStatusDangerForeground1,
+    fontSize: tokens.fontSizeBase200,
+  },
+  statsContainer: {
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    paddingBottom: tokens.spacingVerticalM,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  },
+  statRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  refreshButton: {
+    minWidth: 'auto',
+    padding: '2px',
+  },
+  labelText: {
+    fontSize: tokens.fontSizeBase200,
+  },
+  headerText: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+  }
+});
+
+const StatusDisplay: React.FC = () => {
+  const styles = useStyles();
+  const [isApiOnline, setIsApiOnline] = useState<boolean | null>(null);
+  const [statics, setStatics] = useState<StaticsData | null>(null);
+  const [isTestLoading, setIsTestLoading] = useState<boolean>(true);
+  const [isStaticsLoading, setIsStaticsLoading] = useState<boolean>(true);
+  const checkStatus = useCallback(async () => {
+    const online = await testApiStatus();
+    setIsApiOnline(online);
+    setIsTestLoading(false);
+  }, []);
+  const refreshStatics = useCallback(async () => {
+    setIsStaticsLoading(true);
+    try {
+      const data = await getStatics();
+      setStatics(data);
+    } catch (error) {
+      console.error('Failed to refresh statics:', error);
+      setStatics(null); // 失败时重置数据
+    } finally {
+      setIsStaticsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // 初始加载
+    checkStatus();
+    refreshStatics();
+
+    // 每 10 秒测试一次后端 API 状态
+    const testInterval = setInterval(checkStatus, 10000);
+    
+    return () => {
+      clearInterval(testInterval);
+    };
+  }, [checkStatus, refreshStatics]);
+
+  return (
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        <CardHeader
+          header={<Text className={styles.headerText}>系统状态</Text>}
+        />
+        <div className={styles.statusContainer}>
+          {isTestLoading && isApiOnline === null ? (
+            <Spinner size="tiny" label="检查中..." />
+          ) : (
+            <div className={styles.statusText}>
+              {isApiOnline ? (
+                <>
+                  <CheckmarkCircle20Filled fontSize={16} className={styles.online} />
+                  <Text className={styles.online}>在线</Text>
+                </>
+              ) : (
+                <>
+                  <DismissCircle20Filled fontSize={16} className={styles.offline} />
+                  <Text className={styles.offline}>离线</Text>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <Card className={styles.card}>
+        <CardHeader
+          header={<Text className={styles.headerText}>统计数据</Text>}
+          action={
+            <Button
+              className={styles.refreshButton}
+              appearance="subtle"
+              icon={<ArrowClockwise20Regular fontSize={16} />}
+              onClick={refreshStatics}
+              disabled={isStaticsLoading}
+              title="刷新统计数据"
+            />
+          }
+        />
+        <div className={styles.statsContainer}>
+          {isStaticsLoading && !statics ? (
+            <Spinner size="tiny" label="加载中..." />
+          ) : statics ? (
+            <>
+              <div className={styles.statRow}>
+                <Text className={styles.labelText}>投稿数量:</Text>
+                <Badge size="small" appearance="outline" color="brand">{statics.posts}</Badge>
+              </div>
+              <div className={styles.statRow}>
+                <Text className={styles.labelText}>评论数量:</Text>
+                <Badge size="small" appearance="outline" color="brand">{statics.comments}</Badge>
+              </div>
+              <div className={styles.statRow}>
+                <Text className={styles.labelText}>图片数量:</Text>
+                <Badge size="small" appearance="outline" color="brand">{statics.images}</Badge>
+              </div>
+            </>
+          ) : (
+            <Text className={styles.labelText} italic>统计数据获取失败。</Text>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default StatusDisplay;
--- a/front/src/layouts/MainLayout.tsx
+++ b/front/src/layouts/MainLayout.tsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
 import Footer from './components/Footer';
+import StatusDisplay from '../components/StatusDisplay';
 import { LayoutProvider, useLayout } from '../context/LayoutContext';

 const useStyles = makeStyles({
@@ -21,12 +22,13 @@ const useStyles = makeStyles({
  container: {
    display: 'flex',
    flex: '1 1 auto',
+    overflow: 'hidden',
+    height: 'calc(100vh - 64px)', // 减去 Header 的高度
    position: 'relative',
  },
  content: {
    flex: '1 1 auto',
    padding: '20px',
-    paddingBottom: '64px',
    overflowY: 'auto',
    display: 'flex',
    flexDirection: 'column',
@@ -36,6 +38,17 @@ const useStyles = makeStyles({
    minHeight: 0,
    boxSizing: 'border-box',
  },
+  rightPanel: {
+    width: '240px',
+    flexShrink: 0,
+    borderLeft: `1px solid ${tokens.colorNeutralStroke1}`,
+    padding: '20px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    overflowY: 'auto',
+    '@media (max-width: 768px)': {
+      display: 'none',
+    },
+  }
 });

 const LayoutContent = ({ toasterId }: { toasterId: string }) => {
@@ -51,6 +64,9 @@ const LayoutContent = ({ toasterId }: { toasterId: string }) => {
          <main className={styles.content}>
            <Outlet />
          </main>
+          <aside className={styles.rightPanel}>
+            <StatusDisplay />
+          </aside>
        </div>
        <Footer />
        <Toaster toasterId={toasterId} position="top-end" />