diff --git a/package.json b/package.json
index 8c00989..ec69ade 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "less": "^4.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
     "react-router": "^7.6.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56f73c4..810efc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.1.4)(react@19.1.0)
       react-redux:
         specifier: ^9.2.0
         version: 9.2.0(@types/react@19.1.4)(react@19.1.0)(redux@5.0.1)
@@ -86,7 +89,7 @@
         version: 6.3.5(@types/node@22.15.30)(less@4.3.0)
       vitest:
         specifier: ^3.1.4
-        version: 3.1.4(@types/node@22.15.30)(jsdom@26.1.0)(less@4.3.0)
+        version: 3.1.4(@types/debug@4.1.12)(@types/node@22.15.30)(jsdom@26.1.0)(less@4.3.0)
 
 packages:
 
@@ -742,9 +745,18 @@
   '@types/babel__traverse@7.20.7':
     resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
 
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -760,6 +772,12 @@
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node@22.15.30':
     resolution: {integrity: sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==}
 
@@ -774,6 +792,12 @@
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/use-sync-external-store@0.0.6':
     resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
 
@@ -830,6 +854,9 @@
     resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
   '@vitejs/plugin-react@4.4.1':
     resolution: {integrity: sha512-IpEm5ZmeXAP/osiBXVVP5KjFMzbWOonMs0NaQQl+xYnUAcq4oHUBsF2+p4MgKWG4YMmFYJU8A6sxRPuowllm6w==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -920,6 +947,9 @@
   axios@1.9.0:
     resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -953,6 +983,9 @@
   caniuse-lite@1.0.30001718:
     resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.2.0:
     resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
     engines: {node: '>=12'}
@@ -965,6 +998,18 @@
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
@@ -987,6 +1032,9 @@
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   compute-scroll-into-view@3.1.1:
     resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
@@ -1039,6 +1087,9 @@
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
+  decode-named-character-reference@1.1.0:
+    resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -1054,6 +1105,9 @@
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1164,6 +1218,9 @@
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -1179,6 +1236,9 @@
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1301,10 +1361,19 @@
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1345,6 +1414,18 @@
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1353,10 +1434,17 @@
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -1446,6 +1534,9 @@
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
@@ -1470,10 +1561,97 @@
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -1540,6 +1718,9 @@
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
   parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
@@ -1593,6 +1774,9 @@
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -1845,6 +2029,12 @@
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
   react-redux@9.2.0:
     resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
     peerDependencies:
@@ -1887,6 +2077,12 @@
   redux@5.0.1:
     resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
 
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
   reselect@5.1.1:
     resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
@@ -1967,6 +2163,9 @@
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -1980,6 +2179,9 @@
   string-convert@0.2.1:
     resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -1988,6 +2190,12 @@
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-to-js@1.1.16:
+    resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
+
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
@@ -2046,6 +2254,12 @@
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -2074,6 +2288,24 @@
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   update-browserslist-db@1.1.3:
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
@@ -2088,6 +2320,12 @@
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite-node@3.1.4:
     resolution: {integrity: sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -2221,6 +2459,9 @@
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@adobe/css-tools@4.4.3': {}
@@ -2829,8 +3070,20 @@
     dependencies:
       '@babel/types': 7.27.1
 
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.7
+
   '@types/estree@1.0.7': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -2848,6 +3101,12 @@
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/ms@2.1.0': {}
+
   '@types/node@22.15.30':
     dependencies:
       undici-types: 6.21.0
@@ -2862,6 +3121,10 @@
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
   '@types/use-sync-external-store@0.0.6': {}
 
   '@types/yargs-parser@21.0.3': {}
@@ -2947,6 +3210,8 @@
       '@typescript-eslint/types': 8.32.1
       eslint-visitor-keys: 4.2.0
 
+  '@ungap/structured-clone@1.3.0': {}
+
   '@vitejs/plugin-react@4.4.1(vite@6.3.5(@types/node@22.15.30)(less@4.3.0))':
     dependencies:
       '@babel/core': 7.27.1
@@ -3099,6 +3364,8 @@
     transitivePeerDependencies:
       - debug
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   brace-expansion@1.1.11:
@@ -3132,6 +3399,8 @@
 
   caniuse-lite@1.0.30001718: {}
 
+  ccount@2.0.1: {}
+
   chai@5.2.0:
     dependencies:
       assertion-error: 2.0.1
@@ -3150,6 +3419,14 @@
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
   check-error@2.1.1: {}
 
   ci-info@3.9.0: {}
@@ -3166,6 +3443,8 @@
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   compute-scroll-into-view@3.1.1: {}
 
   concat-map@0.0.1: {}
@@ -3210,6 +3489,10 @@
 
   decimal.js@10.5.0: {}
 
+  decode-named-character-reference@1.1.0:
+    dependencies:
+      character-entities: 2.0.2
+
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
@@ -3218,6 +3501,10 @@
 
   dequal@2.0.3: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff-sequences@29.6.3: {}
 
   dom-accessibility-api@0.5.16: {}
@@ -3363,6 +3650,8 @@
 
   estraverse@5.3.0: {}
 
+  estree-util-is-identifier-name@3.0.0: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.7
@@ -3379,6 +3668,8 @@
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
+  extend@3.0.2: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.3:
@@ -3487,10 +3778,36 @@
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.7
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.16
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
 
+  html-url-attributes@3.0.1: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
@@ -3527,14 +3844,29 @@
 
   indent-string@4.0.0: {}
 
+  inline-style-parser@0.2.4: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-decimal@2.0.1: {}
+
   is-extglob@2.1.1: {}
 
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
   is-number@7.0.0: {}
 
+  is-plain-obj@4.1.0: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
   is-what@3.14.1: {}
@@ -3656,6 +3988,8 @@
 
   lodash@4.17.21: {}
 
+  longest-streak@3.1.0: {}
+
   loupe@3.1.3: {}
 
   lru-cache@10.4.3: {}
@@ -3678,8 +4012,230 @@
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   merge2@1.4.1: {}
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.1
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -3741,6 +4297,16 @@
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parse-node-version@1.0.1: {}
 
   parse5@7.3.0:
@@ -3784,6 +4350,8 @@
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
+  property-information@7.1.0: {}
+
   proxy-from-env@1.1.0: {}
 
   prr@1.0.1:
@@ -4121,6 +4689,24 @@
 
   react-is@18.3.1: {}
 
+  react-markdown@10.1.0(@types/react@19.1.4)(react@19.1.0):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.1.4
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 19.1.0
+      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-redux@9.2.0(@types/react@19.1.4)(react@19.1.0)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
@@ -4153,6 +4739,23 @@
 
   redux@5.0.1: {}
 
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   reselect@5.1.1: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -4232,6 +4835,8 @@
   source-map@0.6.1:
     optional: true
 
+  space-separated-tokens@2.0.2: {}
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -4242,12 +4847,25 @@
 
   string-convert@0.2.1: {}
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
 
   strip-json-comments@3.1.1: {}
 
+  style-to-js@1.1.16:
+    dependencies:
+      style-to-object: 1.0.8
+
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   stylis@4.3.6: {}
 
   supports-color@7.2.0:
@@ -4293,6 +4911,10 @@
     dependencies:
       punycode: 2.3.1
 
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -4317,6 +4939,39 @@
 
   undici-types@6.21.0: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   update-browserslist-db@1.1.3(browserslist@4.24.5):
     dependencies:
       browserslist: 4.24.5
@@ -4331,6 +4986,16 @@
     dependencies:
       react: 19.1.0
 
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
   vite-node@3.1.4(@types/node@22.15.30)(less@4.3.0):
     dependencies:
       cac: 6.7.14
@@ -4365,7 +5030,7 @@
       fsevents: 2.3.3
       less: 4.3.0
 
-  vitest@3.1.4(@types/node@22.15.30)(jsdom@26.1.0)(less@4.3.0):
+  vitest@3.1.4(@types/debug@4.1.12)(@types/node@22.15.30)(jsdom@26.1.0)(less@4.3.0):
     dependencies:
       '@vitest/expect': 3.1.4
       '@vitest/mocker': 3.1.4(vite@6.3.5(@types/node@22.15.30)(less@4.3.0))
@@ -4389,6 +5054,7 @@
       vite-node: 3.1.4(@types/node@22.15.30)(less@4.3.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@types/debug': 4.1.12
       '@types/node': 22.15.30
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -4442,3 +5108,5 @@
   yallist@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zwitch@2.0.4: {}
diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
index 99765e6..ba15c74 100644
--- a/src/AppLayout.tsx
+++ b/src/AppLayout.tsx
@@ -1,26 +1,43 @@
+// src/AppLayout.tsx
+
+import React, { useEffect, useMemo } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router';
-import { Layout, Menu, Dropdown, Button, Flex } from 'antd';
-import { HomeOutlined, AppstoreOutlined, DownOutlined } from '@ant-design/icons';
-import { useEffect, useMemo } from 'react';
+import { Layout, Menu, Dropdown, Button, Flex, Space } from 'antd';
+import {
+    HomeOutlined,
+    AppstoreOutlined,
+    DownOutlined,
+    UserOutlined,
+    SettingOutlined,
+    LogoutOutlined
+} from '@ant-design/icons';
 import logo from "./assets/logo.png";
 import { useAppDispatch, useAppSelector } from './store/hooks';
 import { getUserInfo } from './feature/user/userSlice';
 import { logout } from './feature/auth/authSlice';
-const { Header } = Layout;
 
-const AppLayout = () => {
+const { Header, Content, Footer } = Layout;
+
+const AppLayout: React.FC = () => {
     const location = useLocation();
     const navigate = useNavigate();
-    const userState = useAppSelector(state => state.user);
     const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(getUserInfo())
-    }, [dispatch])
+    // Redux状态
+    const { isAuth } = useAppSelector(state => state.auth);
+    const userState = useAppSelector(state => state.user);
 
-    // 判断是否在登录、注册或找回密码页面
+    // 获取用户信息
+    useEffect(() => {
+        if (isAuth) {
+            dispatch(getUserInfo());
+        }
+    }, [dispatch, isAuth]);
+
+    // 判断是否在认证页面
     const isAuthPage = useMemo(() => {
-        return ['/login', '/register', '/forget'].includes(location.pathname);
+        const authPaths = ['/login', '/register', '/forget'];
+        return authPaths.includes(location.pathname);
     }, [location.pathname]);
 
     // 导航项配置
@@ -32,17 +49,24 @@
             path: '/',
         },
         {
-            key: 'tasks',
-            label: '任务清单',
+            key: 'works',
+            label: '作品',
             icon: <AppstoreOutlined />,
-            path: '/tasks',
+            path: '/works',
         },
     ];
 
+    // 获取当前选中的菜单项
+    const selectedKey = useMemo(() => {
+        if (location.pathname === '/') return 'home';
+        if (location.pathname.startsWith('/works')) return 'works';
+        return '';
+    }, [location.pathname]);
+
     // 处理登出逻辑
     const handleLogout = () => {
-        dispatch(logout())
-        navigate('/login');  // 重定向到登录页
+        dispatch(logout());
+        navigate('/login', { replace: true });
     };
 
     // 下拉菜单内容
@@ -50,66 +74,137 @@
         {
             key: 'profile',
             label: '个人中心',
+            icon: <UserOutlined />,
             onClick: () => navigate('/profile'),
         },
         {
+            key: 'settings',
+            label: '设置',
+            icon: <SettingOutlined />,
+            onClick: () => navigate('/settings'),
+        },
+        {
+            type: 'divider' as const,
+        },
+        {
             key: 'logout',
             label: '登出',
+            icon: <LogoutOutlined />,
             onClick: handleLogout,
+            danger: true,
         },
     ];
 
+    // 处理菜单点击
+    const handleMenuClick = (path: string) => {
+        navigate(path);
+    };
+
     return (
         <Layout style={{ minHeight: '100vh', width: '100%' }}>
-            <Header className="header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                {/* logo */}
-                <Flex justify='center' align='center'>
-                    <img src={logo} alt="Logo" height='48px' />
-                    <div style={{ color: 'white', marginLeft: '10px' }}>
+            <Header
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '0 24px',
+                    background: '#001529'
+                }}
+            >
+                {/* Logo区域 */}
+                <Flex
+                    align="center"
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => navigate('/')}
+                >
+                    <img
+                        src={logo}
+                        alt="创驿Logo"
+                        style={{ height: 48 }}
+                    />
+                    <div style={{
+                        color: 'white',
+                        marginLeft: 12,
+                        fontSize: 18,
+                        fontWeight: 'bold'
+                    }}>
                         创驿
                     </div>
                 </Flex>
 
-                <div style={{
-                    height: '30px',
-                    width: '1px',
-                    backgroundColor: 'white',
-                    margin: '0 20px',
-                }}></div>
-
-                {/* 中间导航菜单 */}
-                <Menu
-                    mode="horizontal"
-                    theme="dark"
-                    selectedKeys={[location.pathname === '/' ? 'home' : location.pathname.slice(1)]}
-                    items={menuItems.map(item => ({
-                        ...item,
-                        onClick: () => navigate(item.path),
-                    }))}
-                    style={{ flex: 1 }}
-                />
-
-                {/* 右侧用户名和下拉菜单 */}
+                {/* 分割线 */}
                 {!isAuthPage && (
-                    <div style={{ display: 'flex', alignItems: 'center', color: 'white' }}>
-                        <span>{userState.username}</span>
+                    <div style={{
+                        height: 30,
+                        width: 1,
+                        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                        margin: '0 20px',
+                    }} />
+                )}
+
+                {/* 导航菜单 */}
+                {!isAuthPage && (
+                    <Menu
+                        mode="horizontal"
+                        theme="dark"
+                        selectedKeys={selectedKey ? [selectedKey] : []}
+                        items={menuItems.map(item => ({
+                            ...item,
+                            onClick: () => handleMenuClick(item.path),
+                        }))}
+                        style={{
+                            flex: 1,
+                            minWidth: 0,
+                            backgroundColor: 'transparent',
+                            borderBottom: 'none'
+                        }}
+                    />
+                )}
+
+                {/* 用户信息区域 */}
+                {!isAuthPage && isAuth && (
+                    <Space size="middle">
+                        <span style={{ color: 'white' }}>
+                            欢迎，{userState.username || '用户'}
+                        </span>
                         <Dropdown
-                            trigger={['click']}
                             menu={{ items: dropdownMenuItems }}
+                            trigger={['click']}
+                            placement="bottomRight"
                         >
-                            <Button type="text" icon={<DownOutlined />} style={{ marginLeft: '10px', color: 'white' }} />
+                            <Button
+                                type="text"
+                                style={{
+                                    color: 'white',
+                                    display: 'flex',
+                                    alignItems: 'center'
+                                }}
+                            >
+                                <DownOutlined />
+                            </Button>
                         </Dropdown>
-                    </div>
+                    </Space>
                 )}
             </Header>
-            <Layout.Content style={{ padding: '24px' }}>
+
+            <Content style={{
+                padding: isAuthPage ? 0 : 24,
+                minHeight: 'calc(100vh - 64px - 70px)' // 减去header和footer高度
+            }}>
                 <Outlet />
-            </Layout.Content>
-            <Layout.Footer style={{ textAlign: 'center' }}>
-                © 2025 创驿 - 愿做你创作路上的同行者
-            </Layout.Footer>
+            </Content>
+
+            {!isAuthPage && (
+                <Footer style={{
+                    textAlign: 'center',
+                    background: '#f0f2f5',
+                    padding: '24px 50px'
+                }}>
+                    © 2025 创驿 - 愿做你创作路上的同行者
+                </Footer>
+            )}
         </Layout>
     );
 };
 
-export default AppLayout;
+export default AppLayout;
\ No newline at end of file
diff --git a/src/api/interceptors.ts b/src/api/interceptors.ts
index bc2e566..3c0863b 100644
--- a/src/api/interceptors.ts
+++ b/src/api/interceptors.ts
@@ -7,7 +7,6 @@
     config.url = requestUrl.replace("/auth/","/");
   } else {
     const token = localStorage.getItem('token');
-    console.log(token);
     config.headers['token'] = `${token}`;
   }
   return config;
diff --git a/src/feature/auth/authSlice.ts b/src/feature/auth/authSlice.ts
index 607a6fd..289ce16 100644
--- a/src/feature/auth/authSlice.ts
+++ b/src/feature/auth/authSlice.ts
@@ -1,5 +1,7 @@
+// src/feature/auth/authSlice.ts
+
 import { createAsyncThunk, createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { AuthState } from "../../store/types";
+import type { AuthState } from "./types";
 import type { LoginRequest } from "../../api/Auth/type";
 import AuthAPI from "../../api/Auth/AuthApi";
 
@@ -9,9 +11,9 @@
 const initialState: AuthState = {
   token: storedToken || '',
   loading: false,
-  isAuth: false,
-  error: ''
-}
+  isAuth: !!storedToken, // 如果有token就设为true
+  error: '',
+};
 
 export const loginUser = createAsyncThunk<
   {token: string},
@@ -33,17 +35,47 @@
   }
 );
 
+// 新增：从localStorage恢复登录状态
+export const loginFromLocalStorage = createAsyncThunk<
+  {token: string} | {empty: true},
+  void,
+  { rejectValue: string }
+>(
+  'auth/loginFromLocalStorage',
+  async (_, { rejectWithValue, dispatch }) => {
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        // 返回空状态而不是错误
+        return { empty: true };
+      }
+      
+      // 直接使用refreshToken来验证token有效性
+      const result = await dispatch(refreshToken(token));
+      if (refreshToken.fulfilled.match(result)) {
+        // refresh成功，返回新的token
+        return { token: result.payload.token };
+      } else {
+        // refresh失败，token无效
+        localStorage.removeItem('token');
+        return rejectWithValue('token已失效，需要重新登录');
+      }
+    } catch {
+      localStorage.removeItem('token');
+      return rejectWithValue('恢复登录状态失败');
+    }
+  }
+);
+
 export const refreshToken = createAsyncThunk<
   {token: string},
   string,
   { rejectValue: string }
 >(
-
   'auth/refresh',
   async (oldToken: string, { rejectWithValue }) => {
     try {
       const response = await AuthAPI.refreshToken(oldToken);
-      console.log(response);
       if(response.data.code == 0)
         return {token: response.data.data};
       else 
@@ -61,42 +93,77 @@
     logout: (state) => {
       state.token = '';
       state.isAuth = false;
-      localStorage.clear()
-    },
-  },extraReducers: (builder) => {
-      // 处理登录的异步操作
-      builder
-        .addCase(loginUser.pending, (state) => {
-          state.loading = true;
-        })
-        .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
-          state.loading = false;
-          state.token = action.payload.token;
-          state.isAuth = true;
-
-          localStorage.setItem('token', state.token);
-        })
-        .addCase(loginUser.rejected, (state, action) => {
-          state.loading = false;
-          state.error = action.payload ? action.payload : '' // 错误处理
-        })
-
-        // 处理刷新 token 的异步操作
-        .addCase(refreshToken.pending, (state) => {
-          state.loading = true;
-        })
-        .addCase(refreshToken.fulfilled, (state, action) => {
-          state.loading = false;
-          state.token = action.payload.token; 
-          localStorage.setItem('token', state.token);
-        })
-        .addCase(refreshToken.rejected, (state, action) => {
-          state.loading = false;
-          state.error = action.payload ? action.payload : ''
-        });
+      localStorage.clear();
     },
     
+    // 清除错误信息
+    clearError: (state) => {
+      state.error = '';
+    },
+  },
+  extraReducers: (builder) => {
+    // 处理普通登录的异步操作
+    builder
+      .addCase(loginUser.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(loginUser.fulfilled, (state, action: PayloadAction<{token: string}>) => {
+        state.loading = false;
+        state.token = action.payload.token;
+        state.isAuth = true;
+        localStorage.setItem('token', state.token);
+      })
+      .addCase(loginUser.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload ? action.payload : '';
+      });
+      
+    // 处理从localStorage恢复登录状态
+    builder
+      .addCase(loginFromLocalStorage.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(loginFromLocalStorage.fulfilled, (state, action) => {
+        state.loading = false;
+        if ('token' in action.payload) {
+          // 有token的情况
+          state.token = action.payload.token;
+          state.isAuth = true;
+        } else {
+          // 空token的情况
+          state.token = '';
+          state.isAuth = false;
+        }
+      })
+      .addCase(loginFromLocalStorage.rejected, (state, action) => {
+        state.loading = false;
+        state.token = '';
+        state.isAuth = false;
+        state.error = action.payload ? action.payload : '';
+        localStorage.removeItem('token');
+      });
+      
+    // 处理刷新 token 的异步操作
+    builder
+      .addCase(refreshToken.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+      })
+      .addCase(refreshToken.fulfilled, (state, action) => {
+        state.loading = false;
+        state.token = action.payload.token;
+        state.isAuth = true;
+        localStorage.setItem('token', state.token);
+      })
+      .addCase(refreshToken.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload ? action.payload : '';
+        state.isAuth = false;
+      });
+  },
 });
 
-export const { logout } = authSlice.actions;
+export const { logout, clearError } = authSlice.actions;
 export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/feature/auth/types.ts b/src/feature/auth/types.ts
new file mode 100644
index 0000000..6d91e01
--- /dev/null
+++ b/src/feature/auth/types.ts
@@ -0,0 +1,7 @@
+// 定义认证状态
+export interface AuthState {
+    token: string;
+    loading: boolean;
+    isAuth: boolean;
+    error: string
+}
\ No newline at end of file
diff --git a/src/feature/Home.tsx b/src/feature/home/Home.tsx
similarity index 100%
rename from src/feature/Home.tsx
rename to src/feature/home/Home.tsx
diff --git a/src/feature/user/userSlice.ts b/src/feature/user/userSlice.ts
index d6200af..c3f7e44 100644
--- a/src/feature/user/userSlice.ts
+++ b/src/feature/user/userSlice.ts
@@ -32,12 +32,8 @@
     async (_, { rejectWithValue }) => {
         const response = await UserAPi.getMe();
         if (response.data.code == 0) {
-            console.log("xixi")
-            console.log(response)
             return response.data.data;
         } else {
-            console.log("buxixi")
-            console.log(response)
             return rejectWithValue(response.data.message);
         }
     } 
diff --git a/src/feature/work/CreatWorkComponents.tsx b/src/feature/work/CreatWorkComponents.tsx
new file mode 100644
index 0000000..12766ee
--- /dev/null
+++ b/src/feature/work/CreatWorkComponents.tsx
@@ -0,0 +1,545 @@
+import React, { useState, useCallback } from 'react';
+import {
+    Form, Input, Select, Upload, Button, Card, message, Space, Modal,
+    Divider, Row, Col, Typography, Alert, List, Tag,
+    type FormInstance
+} from 'antd';
+import {
+    PlusOutlined, InboxOutlined, DeleteOutlined, EditOutlined,
+    CheckCircleOutlined, SendOutlined, FileTextOutlined
+} from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type {
+    UploadFile, UploadProps, UploadChangeParam, RcFile,
+} from 'antd/es/upload';
+import { type StepFormProps, type BasicInfo, ARTWORK_CATEGORIES, type VersionFormData } from './types';
+import { getBase64 } from './utils';
+
+const { TextArea } = Input;
+const { Dragger } = Upload;
+const { Title, Text, Paragraph } = Typography;
+
+// ==================== 描述组件 ====================
+interface DescriptionsProps {
+    bordered?: boolean;
+    column?: number;
+    children: React.ReactNode;
+}
+
+interface DescriptionsItemProps {
+    label: string;
+    children: React.ReactNode;
+}
+
+export const Descriptions: React.FC<DescriptionsProps> & {
+    Item: React.FC<DescriptionsItemProps>;
+} = ({ children }) => {
+    return <div style={{ marginBottom: 16 }}>{children}</div>;
+};
+
+Descriptions.Item = ({ label, children }: DescriptionsItemProps) => {
+    return (
+        <div style={{ marginBottom: 12 }}>
+            <Text strong style={{ marginRight: 16 }}>{label}：</Text>
+            <span>{children}</span>
+        </div>
+    );
+};
+
+// ==================== 步骤1：基础信息 ====================
+export const BasicInfoStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext }) => {
+    const [form]: [FormInstance<BasicInfo>] = Form.useForm<BasicInfo>();
+    const [previewMode, setPreviewMode] = useState<boolean>(false);
+
+    const handleFinish = useCallback((values: BasicInfo) => {
+        onUpdate('basicInfo', values);
+        onNext?.();
+    }, [onUpdate, onNext]);
+
+    const handlePreview = useCallback(() => {
+        form.validateFields().then((values) => {
+            onUpdate('basicInfo', values);
+            setPreviewMode(true);
+        }).catch(() => {
+            message.error('请先填写完整信息');
+        });
+    }, [form, onUpdate]);
+
+    return (
+        <>
+            <Card>
+                <Form form={form} layout="vertical" initialValues={data.basicInfo} onFinish={handleFinish} autoComplete="off">
+                    <Form.Item
+                        label="作品名称"
+                        name="artworkName"
+                        rules={[
+                            { required: true, message: '请输入作品名称' },
+                            { min: 2, message: '作品名称至少2个字符' },
+                            { max: 50, message: '作品名称最多50个字符' },
+                        ]}
+                    >
+                        <Input placeholder="请输入作品名称，例如：未来城市概念设计" size="large" showCount maxLength={50} />
+                    </Form.Item>
+
+                    <Form.Item label="作品分类" name="artworkCategory" rules={[{ required: true, message: '请选择作品分类' }]}>
+                        <Select placeholder="请选择作品分类" size="large" options={ARTWORK_CATEGORIES} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="作品描述"
+                        name="artworkDescription"
+                        rules={[
+                            { required: true, message: '请输入作品描述' },
+                            { min: 20, message: '作品描述至少20个字符' },
+                            { max: 2000, message: '作品描述最多2000个字符' },
+                        ]}
+                        extra="支持 Markdown 格式，可以使用 # 标题、**粗体**、*斜体* 等格式"
+                    >
+                        <TextArea
+                            placeholder="请详细描述你的作品，包括创作理念、技术特点、使用说明等"
+                            rows={10}
+                            showCount
+                            maxLength={2000}
+                        />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space size="middle">
+                            <Button type="primary" htmlType="submit" size="large">下一步</Button>
+                            <Button onClick={handlePreview} size="large">预览描述</Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            <Modal title="作品描述预览" open={previewMode} onCancel={() => setPreviewMode(false)} footer={null} width={800}>
+                <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                    <ReactMarkdown>{form.getFieldValue('artworkDescription') || ''}</ReactMarkdown>
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 步骤2：封面上传 ====================
+export const CoverUploadStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext, onPrev }) => {
+    const [fileList, setFileList] = useState<UploadFile[]>(data.coverInfo.coverFile ? [data.coverInfo.coverFile] : []);
+    const [previewImage, setPreviewImage] = useState<string>('');
+    const [previewOpen, setPreviewOpen] = useState<boolean>(false);
+
+    const handleChange: UploadProps['onChange'] = useCallback((info: UploadChangeParam<UploadFile>) => {
+        const { fileList: newFileList } = info;
+        setFileList(newFileList);
+        onUpdate('coverInfo', { coverFile: newFileList[0] });
+    }, [onUpdate]);
+
+    const handlePreview = useCallback(async (file: UploadFile): Promise<void> => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as RcFile);
+        }
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    }, []);
+
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('只能上传图片文件！');
+            return false;
+        }
+        const isLt5M = file.size / 1024 / 1024 < 5;
+        if (!isLt5M) {
+            message.error('图片大小不能超过 5MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    const handleNext = useCallback((): void => {
+        if (fileList.length === 0) {
+            message.error('请上传作品封面');
+            return;
+        }
+        onNext?.();
+    }, [fileList, onNext]);
+
+    return (
+        <Card>
+            <Alert
+                message="封面图片要求"
+                description={
+                    <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
+                        <li>图片格式：JPG、PNG、GIF</li>
+                        <li>图片大小：不超过 5MB</li>
+                        <li>建议尺寸：宽高比 3:4，最小分辨率 600x800</li>
+                        <li>内容要求：清晰展示作品特色，避免模糊或像素化</li>
+                    </ul>
+                }
+                type="info"
+                showIcon
+                style={{ marginBottom: 24 }}
+            />
+
+            <Upload
+                listType="picture-card"
+                fileList={fileList}
+                onChange={handleChange}
+                onPreview={handlePreview}
+                beforeUpload={beforeUpload}
+                maxCount={1}
+                accept="image/*"
+            >
+                {fileList.length === 0 && (
+                    <div>
+                        <PlusOutlined />
+                        <div style={{ marginTop: 8 }}>上传封面</div>
+                    </div>
+                )}
+            </Upload>
+
+            <Modal open={previewOpen} title="封面预览" footer={null} onCancel={() => setPreviewOpen(false)}>
+                <img alt="封面预览" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+
+            <Divider />
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button type="primary" onClick={handleNext} size="large">下一步</Button>
+            </Space>
+        </Card>
+    );
+};
+
+// ==================== 版本管理相关组件 ====================
+const VersionItem: React.FC<{
+    version: VersionFormData;
+    index: number;
+    onEdit: (index: number) => void;
+    onDelete: (index: number) => void;
+}> = ({ version, index, onEdit, onDelete }) => {
+    return (
+        <Row align="middle">
+            <Col span={20}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                    <Space>
+                        <Tag color="blue">v{version.version}</Tag>
+                        <Text strong>{version.versionDescription}</Text>
+                    </Space>
+                    {version.seedFile && (
+                        <Space>
+                            <FileTextOutlined />
+                            <Text type="secondary">{version.seedFile.name}</Text>
+                        </Space>
+                    )}
+                </Space>
+            </Col>
+            <Col span={4} style={{ textAlign: 'right' }}>
+                <Space>
+                    <Button type="text" icon={<EditOutlined />} onClick={() => onEdit(index)} />
+                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => onDelete(index)} />
+                </Space>
+            </Col>
+        </Row>
+    );
+};
+
+const VersionEditForm: React.FC<{
+    form: FormInstance<VersionFormData>;
+    version: VersionFormData;
+    onSave: () => void;
+    onCancel: () => void;
+    onFileChange: (file: UploadFile | undefined) => void;
+}> = ({ form, version, onSave, onCancel, onFileChange }) => {
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isLt100M = file.size / 1024 / 1024 < 100;
+        if (!isLt100M) {
+            message.error('种子文件大小不能超过 100MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    return (
+        <Form form={form} layout="vertical" initialValues={version}>
+            <Row gutter={16}>
+                <Col span={6}>
+                    <Form.Item label="版本号" name="version" rules={[{ required: true, message: '请输入版本号' }]}>
+                        <Input placeholder="例如：1.0" />
+                    </Form.Item>
+                </Col>
+                <Col span={18}>
+                    <Form.Item
+                        label="版本描述"
+                        name="versionDescription"
+                        rules={[
+                            { required: true, message: '请输入版本描述' },
+                            { min: 10, message: '版本描述至少10个字符' },
+                        ]}
+                    >
+                        <TextArea placeholder="描述此版本的更新内容、新增功能等" rows={3} showCount maxLength={500} />
+                    </Form.Item>
+                </Col>
+            </Row>
+
+            <Form.Item label="种子文件">
+                <Dragger
+                    maxCount={1}
+                    beforeUpload={beforeUpload}
+                    fileList={version.seedFile ? [version.seedFile] : []}
+                    onChange={({ fileList }) => onFileChange(fileList[0])}
+                    onRemove={() => onFileChange(undefined)}
+                >
+                    <p className="ant-upload-drag-icon"><InboxOutlined /></p>
+                    <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                    <p className="ant-upload-hint">支持单个文件上传，文件大小不超过 100MB</p>
+                </Dragger>
+            </Form.Item>
+
+            <Space>
+                <Button type="primary" onClick={onSave}>保存</Button>
+                <Button onClick={onCancel}>取消</Button>
+            </Space>
+        </Form>
+    );
+};
+
+// ==================== 步骤3：版本管理 ====================
+export const VersionManagementStep: React.FC<StepFormProps> = ({ data, onUpdate, onNext, onPrev }) => {
+    const [versions, setVersions] = useState<VersionFormData[]>(
+        data.versions.length > 0 ? data.versions : [{ version: '1.0', versionDescription: '', seedFile: undefined }]
+    );
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const [form]: [FormInstance<VersionFormData>] = Form.useForm<VersionFormData>();
+
+    const handleAddVersion = useCallback(() => {
+        const newVersion: VersionFormData = {
+            version: `${versions.length + 1}.0`,
+            versionDescription: '',
+            seedFile: undefined,
+        };
+        setVersions([...versions, newVersion]);
+        setEditingIndex(versions.length);
+    }, [versions]);
+
+    const handleSaveVersion = useCallback((index: number) => {
+        form.validateFields().then((values) => {
+            const newVersions = [...versions];
+            newVersions[index] = { ...newVersions[index], ...values };
+            setVersions(newVersions);
+            setEditingIndex(null);
+            form.resetFields();
+            message.success('版本信息已保存');
+        }).catch(() => {
+            message.error('请完整填写版本信息');
+        });
+    }, [form, versions]);
+
+    const handleDeleteVersion = useCallback((index: number) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: '确定要删除这个版本吗？',
+            onOk: () => {
+                const newVersions = versions.filter((_, i) => i !== index);
+                setVersions(newVersions);
+                if (editingIndex === index) {
+                    setEditingIndex(null);
+                }
+            },
+        });
+    }, [versions, editingIndex]);
+
+    const handleFileChange = useCallback((index: number, file: UploadFile | undefined) => {
+        const newVersions = [...versions];
+        newVersions[index].seedFile = file;
+        setVersions(newVersions);
+    }, [versions]);
+
+    const handleNext = useCallback(() => {
+        if (versions.length === 0) {
+            message.error('至少需要添加一个版本');
+            return;
+        }
+
+        const incompleteVersion = versions.find((v, index) =>
+            !v.version || !v.versionDescription || !v.seedFile || index === editingIndex
+        );
+
+        if (incompleteVersion) {
+            message.error('请完成所有版本的信息填写');
+            return;
+        }
+
+        onUpdate('versions', versions);
+        onNext?.();
+    }, [versions, editingIndex, onUpdate, onNext]);
+
+    return (
+        <Card>
+            <div style={{ marginBottom: 16 }}>
+                <Title level={4}>版本列表</Title>
+                <Paragraph type="secondary">每个版本需要包含版本号、版本描述和种子文件</Paragraph>
+            </div>
+
+            <List
+                dataSource={versions}
+                renderItem={(version, index) => (
+                    <List.Item
+                        key={index}
+                        style={{
+                            background: editingIndex === index ? '#fafafa' : 'transparent',
+                            padding: 16,
+                            marginBottom: 16,
+                            border: '1px solid #f0f0f0',
+                            borderRadius: 8,
+                        }}
+                    >
+                        {editingIndex === index ? (
+                            <VersionEditForm
+                                form={form}
+                                version={version}
+                                onSave={() => handleSaveVersion(index)}
+                                onCancel={() => setEditingIndex(null)}
+                                onFileChange={(file) => handleFileChange(index, file)}
+                            />
+                        ) : (
+                            <VersionItem
+                                version={version}
+                                index={index}
+                                onEdit={(idx) => {
+                                    setEditingIndex(idx);
+                                    form.setFieldsValue(version);
+                                }}
+                                onDelete={handleDeleteVersion}
+                            />
+                        )}
+                    </List.Item>
+                )}
+            />
+
+            {editingIndex === null && (
+                <Button
+                    type="dashed"
+                    onClick={handleAddVersion}
+                    style={{ width: '100%', marginBottom: 24 }}
+                    icon={<PlusOutlined />}
+                >
+                    添加版本
+                </Button>
+            )}
+
+            <Divider />
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button type="primary" onClick={handleNext} size="large">下一步</Button>
+            </Space>
+        </Card>
+    );
+};
+
+// ==================== 步骤4：确认发布 ====================
+export const ConfirmPublishStep: React.FC<StepFormProps & { onPublish: () => void }> = ({ data, onPrev, onPublish }) => {
+    const [publishing, setPublishing] = useState<boolean>(false);
+
+    const handlePublish = useCallback(async () => {
+        setPublishing(true);
+        try {
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            message.success('作品发布成功！');
+            onPublish();
+        } catch {
+            message.error('发布失败，请重试');
+        } finally {
+            setPublishing(false);
+        }
+    }, [onPublish]);
+
+    return (
+        <Card>
+            <Title level={3} style={{ marginBottom: 24 }}>
+                <CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
+                确认发布信息
+            </Title>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>基础信息</Title>
+                <Descriptions bordered column={1}>
+                    <Descriptions.Item label="作品名称">{data.basicInfo.artworkName}</Descriptions.Item>
+                    <Descriptions.Item label="作品分类">
+                        <Tag color="blue">{data.basicInfo.artworkCategory}</Tag>
+                    </Descriptions.Item>
+                    <Descriptions.Item label="作品描述">
+                        <div style={{ maxHeight: 200, overflow: 'auto' }}>
+                            <ReactMarkdown>{data.basicInfo.artworkDescription}</ReactMarkdown>
+                        </div>
+                    </Descriptions.Item>
+                </Descriptions>
+            </div>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>作品封面</Title>
+                {data.coverInfo.coverFile && (
+                    <img
+                        src={data.coverInfo.coverFile.thumbUrl || data.coverInfo.coverFile.url}
+                        alt="作品封面"
+                        style={{ maxWidth: 300, maxHeight: 400, objectFit: 'cover' }}
+                    />
+                )}
+            </div>
+
+            <div style={{ marginBottom: 32 }}>
+                <Title level={4}>版本信息</Title>
+                <List
+                    dataSource={data.versions}
+                    renderItem={(version) => (
+                        <List.Item>
+                            <List.Item.Meta
+                                title={
+                                    <Space>
+                                        <Tag color="green">v{version.version}</Tag>
+                                        <Text>{version.versionDescription}</Text>
+                                    </Space>
+                                }
+                                description={
+                                    version.seedFile && (
+                                        <Space>
+                                            <FileTextOutlined />
+                                            <Text type="secondary">{version.seedFile.name}</Text>
+                                        </Space>
+                                    )
+                                }
+                            />
+                        </List.Item>
+                    )}
+                />
+            </div>
+
+            <Alert
+                message="发布须知"
+                description={
+                    <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
+                        <li>发布后的作品将公开展示，所有用户都可以查看和下载</li>
+                        <li>请确保作品内容符合社区规范，不包含违法违规内容</li>
+                        <li>发布后您仍可以编辑作品信息和添加新版本</li>
+                        <li>请尊重他人知识产权，确保作品为原创或已获得授权</li>
+                    </ul>
+                }
+                type="warning"
+                showIcon
+                style={{ marginBottom: 24 }}
+            />
+
+            <Space size="middle">
+                <Button onClick={onPrev} size="large">上一步</Button>
+                <Button
+                    type="primary"
+                    onClick={handlePublish}
+                    loading={publishing}
+                    icon={<SendOutlined />}
+                    size="large"
+                >
+                    确认发布
+                </Button>
+            </Space>
+        </Card>
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/CreateWork.tsx b/src/feature/work/CreateWork.tsx
new file mode 100644
index 0000000..5e97433
--- /dev/null
+++ b/src/feature/work/CreateWork.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { Layout, Steps, Card, Typography } from 'antd';
+import { FileTextOutlined, FileImageOutlined, SaveOutlined, SendOutlined } from '@ant-design/icons';
+import { BasicInfoStep, CoverUploadStep, VersionManagementStep, ConfirmPublishStep } from './CreatWorkComponents';
+import { useCreateWorkForm } from './hooks';
+
+
+const { Content } = Layout;
+const { Title, Paragraph } = Typography;
+
+const CreateWork: React.FC = () => {
+    const { currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish } = useCreateWorkForm();
+
+    const steps = useMemo(() => [
+        { title: '基础信息', description: '填写作品基本信息', icon: <FileTextOutlined /> },
+        { title: '上传封面', description: '上传作品封面图片', icon: <FileImageOutlined /> },
+        { title: '版本管理', description: '添加作品版本和文件', icon: <SaveOutlined /> },
+        { title: '确认发布', description: '检查并发布作品', icon: <SendOutlined /> },
+    ], []);
+
+    const renderStepContent = useMemo(() => {
+        const commonProps = { data: formData, onUpdate: handleUpdateFormData, onNext: handleNext, onPrev: handlePrev };
+
+        switch (currentStep) {
+            case 0: return <BasicInfoStep {...commonProps} />;
+            case 1: return <CoverUploadStep {...commonProps} />;
+            case 2: return <VersionManagementStep {...commonProps} />;
+            case 3: return <ConfirmPublishStep {...commonProps} onPublish={handlePublish} />;
+            default: return null;
+        }
+    }, [currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish]);
+
+    return (
+        <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+            <Content style={{ padding: '20px' }}>
+                <div style={{ maxWidth: 1000, margin: '0 auto' }}>
+                    <Card style={{ marginBottom: 24 }}>
+                        <Title level={2} style={{ marginBottom: 8 }}>创建新作品</Title>
+                        <Paragraph type="secondary">通过以下步骤发布您的创意作品，与社区分享您的才华</Paragraph>
+                    </Card>
+
+                    <Card style={{ marginBottom: 24 }}>
+                        <Steps current={currentStep} items={steps} />
+                    </Card>
+
+                    {renderStepContent}
+                </div>
+            </Content>
+        </Layout>
+    );
+};
+
+export default CreateWork;
\ No newline at end of file
diff --git a/src/feature/work/EditWork.tsx b/src/feature/work/EditWork.tsx
new file mode 100644
index 0000000..f56d42a
--- /dev/null
+++ b/src/feature/work/EditWork.tsx
@@ -0,0 +1,753 @@
+import React, { useState, useCallback } from 'react';
+import {
+    Modal, Form, Input, Upload, Button, message, Space, Card,
+    Typography, Alert, List, Tag, Popconfirm, Row, Col,
+    type FormInstance
+} from 'antd';
+import {
+    EditOutlined, DeleteOutlined, PlusOutlined, InboxOutlined,
+    SaveOutlined, FileTextOutlined, UserOutlined
+} from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type {
+    UploadFile, UploadProps, UploadChangeParam, RcFile,
+} from 'antd/es/upload';
+import type {
+    ArtworkData, VersionFormData, Comment,
+} from './types';
+
+const { TextArea } = Input;
+const { Dragger } = Upload;
+const { Text } = Typography;
+
+// ==================== 工具函数 ====================
+const getBase64 = (file: RcFile): Promise<string> =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = (): void => resolve(reader.result as string);
+        reader.onerror = (error): void => reject(error);
+    });
+
+// ==================== 类型定义 ====================
+interface EditCoverProps {
+    visible: boolean;
+    currentCover: string;
+    onCancel: () => void;
+    onSave: (coverUrl: string) => Promise<void>;
+}
+
+interface EditDescriptionProps {
+    visible: boolean;
+    currentDescription: string;
+    onCancel: () => void;
+    onSave: (description: string) => Promise<void>;
+}
+
+interface EditVersionsProps {
+    visible: boolean;
+    versions: VersionFormData[];
+    onCancel: () => void;
+    onSave: (versions: VersionFormData[]) => Promise<void>;
+}
+
+interface CommentItemProps {
+    comment: Comment;
+    isAuthor: boolean;
+    onDelete: (commentId: string) => Promise<void>;
+    level?: number;
+}
+
+interface EditWorkControlsProps {
+    artwork: ArtworkData;
+    isAuthor: boolean;
+    onUpdate: (updatedArtwork: Partial<ArtworkData>) => Promise<void>;
+    onDeleteComment: (commentId: string) => Promise<void>;
+}
+
+interface VersionItemProps {
+    version: VersionFormData;
+    index: number;
+    onEdit: (index: number) => void;
+    onDelete: (index: number) => void;
+}
+
+interface VersionEditFormProps {
+    form: FormInstance<VersionFormData>;
+    version: VersionFormData;
+    onSave: () => void;
+    onCancel: () => void;
+    onFileChange: (file: UploadFile | undefined) => void;
+}
+
+// ==================== 封面编辑组件 ====================
+export const EditWorkCover: React.FC<EditCoverProps> = ({
+    visible,
+    currentCover,
+    onCancel,
+    onSave
+}) => {
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+    const [previewImage, setPreviewImage] = useState<string>('');
+    const [previewOpen, setPreviewOpen] = useState<boolean>(false);
+    const [uploading, setUploading] = useState<boolean>(false);
+
+    const handleChange: UploadProps['onChange'] = useCallback((info: UploadChangeParam<UploadFile>): void => {
+        setFileList(info.fileList);
+    }, []);
+
+    const handlePreview = useCallback(async (file: UploadFile): Promise<void> => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as RcFile);
+        }
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    }, []);
+
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isImage = file.type.startsWith('image/');
+        if (!isImage) {
+            message.error('只能上传图片文件！');
+            return false;
+        }
+        const isLt5M = file.size / 1024 / 1024 < 5;
+        if (!isLt5M) {
+            message.error('图片大小不能超过 5MB！');
+            return false;
+        }
+        return false; // 阻止自动上传
+    }, []);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        if (fileList.length === 0) {
+            message.error('请选择要上传的封面图片');
+            return;
+        }
+
+        setUploading(true);
+        try {
+            // 模拟上传过程
+            const file = fileList[0];
+            const coverUrl = file.preview || URL.createObjectURL(file.originFileObj as RcFile);
+
+            await onSave(coverUrl);
+            message.success('封面更新成功！');
+            onCancel();
+        } catch {
+            message.error('封面更新失败，请重试');
+        } finally {
+            setUploading(false);
+        }
+    }, [fileList, onSave, onCancel]);
+
+    return (
+        <>
+            <Modal
+                title="编辑作品封面"
+                open={visible}
+                onCancel={onCancel}
+                footer={[
+                    <Button key="cancel" onClick={onCancel}>
+                        取消
+                    </Button>,
+                    <Button
+                        key="save"
+                        type="primary"
+                        loading={uploading}
+                        onClick={handleSave}
+                        icon={<SaveOutlined />}
+                    >
+                        保存
+                    </Button>,
+                ]}
+                width={600}
+            >
+                <div style={{ marginBottom: 16 }}>
+                    <Text strong>当前封面：</Text>
+                    <div style={{ marginTop: 8 }}>
+                        <img
+                            src={currentCover}
+                            alt="当前封面"
+                            style={{ maxWidth: '100%', maxHeight: 200, objectFit: 'cover' }}
+                        />
+                    </div>
+                </div>
+
+                <Alert
+                    message="新封面要求"
+                    description="图片格式：JPG、PNG、GIF；大小不超过 5MB；建议尺寸：宽高比 3:4"
+                    type="info"
+                    showIcon
+                    style={{ marginBottom: 16 }}
+                />
+
+                <Upload
+                    listType="picture-card"
+                    fileList={fileList}
+                    onChange={handleChange}
+                    onPreview={handlePreview}
+                    beforeUpload={beforeUpload}
+                    maxCount={1}
+                    accept="image/*"
+                >
+                    {fileList.length === 0 && (
+                        <div>
+                            <PlusOutlined />
+                            <div style={{ marginTop: 8 }}>选择新封面</div>
+                        </div>
+                    )}
+                </Upload>
+            </Modal>
+
+            <Modal
+                open={previewOpen}
+                title="图片预览"
+                footer={null}
+                onCancel={(): void => setPreviewOpen(false)}
+            >
+                <img alt="预览" style={{ width: '100%' }} src={previewImage} />
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 作品描述编辑组件 ====================
+export const EditWorkDescription: React.FC<EditDescriptionProps> = ({
+    visible,
+    currentDescription,
+    onCancel,
+    onSave
+}) => {
+    const [form] = Form.useForm<{ description: string }>();
+    const [previewMode, setPreviewMode] = useState<boolean>(false);
+    const [saving, setSaving] = useState<boolean>(false);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        try {
+            const values = await form.validateFields();
+            setSaving(true);
+            await onSave(values.description);
+            message.success('作品描述更新成功！');
+            onCancel();
+        } catch (error) {
+            if (error && typeof error === 'object' && 'errorFields' in error) {
+                message.error('请检查输入内容');
+            } else {
+                message.error('更新失败，请重试');
+            }
+        } finally {
+            setSaving(false);
+        }
+    }, [form, onSave, onCancel]);
+
+    const handlePreview = useCallback((): void => {
+        form.validateFields().then(() => {
+            setPreviewMode(true);
+        }).catch(() => {
+            message.error('请先填写完整信息');
+        });
+    }, [form]);
+
+    return (
+        <>
+            <Modal
+                title="编辑作品描述"
+                open={visible}
+                onCancel={onCancel}
+                footer={[
+                    <Button key="preview" onClick={handlePreview}>
+                        预览
+                    </Button>,
+                    <Button key="cancel" onClick={onCancel}>
+                        取消
+                    </Button>,
+                    <Button
+                        key="save"
+                        type="primary"
+                        loading={saving}
+                        onClick={handleSave}
+                        icon={<SaveOutlined />}
+                    >
+                        保存
+                    </Button>,
+                ]}
+                width={800}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                    initialValues={{ description: currentDescription }}
+                >
+                    <Form.Item
+                        label="作品描述"
+                        name="description"
+                        rules={[
+                            { required: true, message: '请输入作品描述' },
+                            { min: 20, message: '作品描述至少20个字符' },
+                            { max: 2000, message: '作品描述最多2000个字符' },
+                        ]}
+                        extra="支持 Markdown 格式，可以使用 # 标题、**粗体**、*斜体* 等格式"
+                    >
+                        <TextArea
+                            placeholder="请详细描述你的作品，包括创作理念、技术特点、使用说明等"
+                            rows={12}
+                            showCount
+                            maxLength={2000}
+                        />
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            <Modal
+                title="作品描述预览"
+                open={previewMode}
+                onCancel={(): void => setPreviewMode(false)}
+                footer={null}
+                width={800}
+            >
+                <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                    <ReactMarkdown>{form.getFieldValue('description') || ''}</ReactMarkdown>
+                </div>
+            </Modal>
+        </>
+    );
+};
+
+// ==================== 版本编辑相关组件 ====================
+const VersionItem: React.FC<VersionItemProps> = ({
+    version,
+    index,
+    onEdit,
+    onDelete
+}) => {
+    return (
+        <Row align="middle" style={{ width: '100%' }}>
+            <Col span={20}>
+                <Space direction="vertical" style={{ width: '100%' }}>
+                    <Space>
+                        <Tag color="blue">v{version.version}</Tag>
+                        <Text strong>{version.versionDescription}</Text>
+                    </Space>
+                    {version.seedFile && (
+                        <Space>
+                            <FileTextOutlined />
+                            <Text type="secondary">{version.seedFile.name}</Text>
+                        </Space>
+                    )}
+                </Space>
+            </Col>
+            <Col span={4} style={{ textAlign: 'right' }}>
+                <Space>
+                    <Button
+                        type="text"
+                        icon={<EditOutlined />}
+                        onClick={(): void => onEdit(index)}
+                    />
+                    <Popconfirm
+                        title="确定要删除这个版本吗？"
+                        onConfirm={(): void => onDelete(index)}
+                        okText="确定"
+                        cancelText="取消"
+                    >
+                        <Button type="text" danger icon={<DeleteOutlined />} />
+                    </Popconfirm>
+                </Space>
+            </Col>
+        </Row>
+    );
+};
+
+const VersionEditForm: React.FC<VersionEditFormProps> = ({
+    form,
+    version,
+    onSave,
+    onCancel,
+    onFileChange
+}) => {
+    const beforeUpload = useCallback((file: RcFile): boolean => {
+        const isLt100M = file.size / 1024 / 1024 < 100;
+        if (!isLt100M) {
+            message.error('种子文件大小不能超过 100MB！');
+            return false;
+        }
+        return false;
+    }, []);
+
+    return (
+        <div style={{ width: '100%' }}>
+            <Form form={form} layout="vertical" initialValues={version}>
+                <Row gutter={16}>
+                    <Col span={6}>
+                        <Form.Item
+                            label="版本号"
+                            name="version"
+                            rules={[{ required: true, message: '请输入版本号' }]}
+                        >
+                            <Input placeholder="例如：1.0" />
+                        </Form.Item>
+                    </Col>
+                    <Col span={18}>
+                        <Form.Item
+                            label="版本描述"
+                            name="versionDescription"
+                            rules={[
+                                { required: true, message: '请输入版本描述' },
+                                { min: 10, message: '版本描述至少10个字符' },
+                            ]}
+                        >
+                            <TextArea
+                                placeholder="描述此版本的更新内容、新增功能等"
+                                rows={3}
+                                showCount
+                                maxLength={500}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+
+                <Form.Item label="种子文件">
+                    <Dragger
+                        maxCount={1}
+                        beforeUpload={beforeUpload}
+                        fileList={version.seedFile ? [version.seedFile] : []}
+                        onChange={({ fileList }): void => onFileChange(fileList[0])}
+                        onRemove={(): void => onFileChange(undefined)}
+                    >
+                        <p className="ant-upload-drag-icon"><InboxOutlined /></p>
+                        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                        <p className="ant-upload-hint">支持单个文件上传，文件大小不超过 100MB</p>
+                    </Dragger>
+                </Form.Item>
+
+                <Space>
+                    <Button type="primary" onClick={onSave}>
+                        保存
+                    </Button>
+                    <Button onClick={onCancel}>
+                        取消
+                    </Button>
+                </Space>
+            </Form>
+        </div>
+    );
+};
+
+// ==================== 版本管理组件 ====================
+export const EditWorkVersions: React.FC<EditVersionsProps> = ({
+    visible,
+    versions,
+    onCancel,
+    onSave
+}) => {
+    const [localVersions, setLocalVersions] = useState<VersionFormData[]>(versions);
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const [form] = Form.useForm<VersionFormData>();
+    const [saving, setSaving] = useState<boolean>(false);
+
+    const handleAddVersion = useCallback((): void => {
+        const newVersion: VersionFormData = {
+            version: `${localVersions.length + 1}.0`,
+            versionDescription: '',
+            seedFile: undefined,
+        };
+        setLocalVersions([...localVersions, newVersion]);
+        setEditingIndex(localVersions.length);
+    }, [localVersions]);
+
+    const handleSaveVersion = useCallback((index: number): void => {
+        form.validateFields().then((values) => {
+            const newVersions = [...localVersions];
+            newVersions[index] = { ...newVersions[index], ...values };
+            setLocalVersions(newVersions);
+            setEditingIndex(null);
+            form.resetFields();
+            message.success('版本信息已保存');
+        }).catch(() => {
+            message.error('请完整填写版本信息');
+        });
+    }, [form, localVersions]);
+
+    const handleDeleteVersion = useCallback((index: number): void => {
+        const newVersions = localVersions.filter((_, i) => i !== index);
+        setLocalVersions(newVersions);
+        if (editingIndex === index) {
+            setEditingIndex(null);
+        }
+    }, [localVersions, editingIndex]);
+
+    const handleFileChange = useCallback((index: number, file: UploadFile | undefined): void => {
+        const newVersions = [...localVersions];
+        newVersions[index].seedFile = file;
+        setLocalVersions(newVersions);
+    }, [localVersions]);
+
+    const handleSave = useCallback(async (): Promise<void> => {
+        if (localVersions.length === 0) {
+            message.error('至少需要保留一个版本');
+            return;
+        }
+
+        const incompleteVersion = localVersions.find((v, index) =>
+            !v.version || !v.versionDescription || !v.seedFile || index === editingIndex
+        );
+
+        if (incompleteVersion) {
+            message.error('请完成所有版本的信息填写');
+            return;
+        }
+
+        setSaving(true);
+        try {
+            await onSave(localVersions);
+            message.success('版本信息更新成功！');
+            onCancel();
+        } catch {
+            message.error('更新失败，请重试');
+        } finally {
+            setSaving(false);
+        }
+    }, [localVersions, editingIndex, onSave, onCancel]);
+
+    return (
+        <Modal
+            title="编辑版本信息"
+            open={visible}
+            onCancel={onCancel}
+            footer={[
+                <Button key="cancel" onClick={onCancel}>
+                    取消
+                </Button>,
+                <Button
+                    key="save"
+                    type="primary"
+                    loading={saving}
+                    onClick={handleSave}
+                    icon={<SaveOutlined />}
+                >
+                    保存所有更改
+                </Button>,
+            ]}
+            width={900}
+        >
+            <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
+                <List
+                    dataSource={localVersions}
+                    renderItem={(version, index): React.ReactElement => (
+                        <List.Item
+                            key={index}
+                            style={{
+                                background: editingIndex === index ? '#fafafa' : 'transparent',
+                                padding: 16,
+                                marginBottom: 16,
+                                border: '1px solid #f0f0f0',
+                                borderRadius: 8,
+                            }}
+                        >
+                            {editingIndex === index ? (
+                                <VersionEditForm
+                                    form={form}
+                                    version={version}
+                                    onSave={(): void => handleSaveVersion(index)}
+                                    onCancel={(): void => setEditingIndex(null)}
+                                    onFileChange={(file): void => handleFileChange(index, file)}
+                                />
+                            ) : (
+                                <VersionItem
+                                    version={version}
+                                    index={index}
+                                    onEdit={(idx): void => {
+                                        setEditingIndex(idx);
+                                        form.setFieldsValue(version);
+                                    }}
+                                    onDelete={handleDeleteVersion}
+                                />
+                            )}
+                        </List.Item>
+                    )}
+                />
+
+                {editingIndex === null && (
+                    <Button
+                        type="dashed"
+                        onClick={handleAddVersion}
+                        style={{ width: '100%', marginTop: 16 }}
+                        icon={<PlusOutlined />}
+                    >
+                        添加新版本
+                    </Button>
+                )}
+            </div>
+        </Modal>
+    );
+};
+
+// ==================== 评论管理组件 ====================
+export const EditWorkComment: React.FC<CommentItemProps> = ({
+    comment,
+    isAuthor,
+    onDelete,
+    level = 0
+}) => {
+    const [deleting, setDeleting] = useState<boolean>(false);
+
+    const handleDelete = useCallback(async (): Promise<void> => {
+        if (!comment.id) return;
+
+        setDeleting(true);
+        try {
+            await onDelete(comment.id);
+            message.success('评论删除成功');
+        } catch {
+            message.error('删除失败，请重试');
+        } finally {
+            setDeleting(false);
+        }
+    }, [comment.id, onDelete]);
+
+    return (
+        <div style={{ marginLeft: level * 24 }}>
+            <div
+                style={{
+                    background: '#fafafa',
+                    padding: 12,
+                    borderRadius: 8,
+                    marginBottom: 8,
+                }}
+            >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <div style={{ flex: 1 }}>
+                        <Space style={{ marginBottom: 8 }}>
+                            <UserOutlined />
+                            <Text strong>{comment.author}</Text>
+                            {comment.createdAt && (
+                                <Text type="secondary" style={{ fontSize: 12 }}>
+                                    {new Date(comment.createdAt).toLocaleString()}
+                                </Text>
+                            )}
+                        </Space>
+                        <div>
+                            <Text>{comment.content}</Text>
+                        </div>
+                    </div>
+
+                    {isAuthor && comment.id && (
+                        <Popconfirm
+                            title="确定要删除这条评论吗？"
+                            onConfirm={handleDelete}
+                            okText="确定"
+                            cancelText="取消"
+                        >
+                            <Button
+                                type="text"
+                                danger
+                                size="small"
+                                icon={<DeleteOutlined />}
+                                loading={deleting}
+                            />
+                        </Popconfirm>
+                    )}
+                </div>
+            </div>
+
+            {/* 递归渲染子评论 */}
+            {comment.child && comment.child.length > 0 && (
+                <div>
+                    {comment.child.map((childComment, index) => (
+                        <EditWorkComment
+                            key={childComment.id || index}
+                            comment={childComment}
+                            isAuthor={isAuthor}
+                            onDelete={onDelete}
+                            level={level + 1}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ==================== 主编辑控制器组件 ====================
+export const EditWorkControls: React.FC<EditWorkControlsProps> = ({
+    artwork,
+    isAuthor,
+    onUpdate,
+}) => {
+    const [editCoverVisible, setEditCoverVisible] = useState<boolean>(false);
+    const [editDescriptionVisible, setEditDescriptionVisible] = useState<boolean>(false);
+    const [editVersionsVisible, setEditVersionsVisible] = useState<boolean>(false);
+
+    const handleUpdateCover = useCallback(async (coverUrl: string): Promise<void> => {
+        await onUpdate({ artworkCover: coverUrl });
+    }, [onUpdate]);
+
+    const handleUpdateDescription = useCallback(async (description: string): Promise<void> => {
+        await onUpdate({ artworkDescription: description });
+    }, [onUpdate]);
+
+    const handleUpdateVersions = useCallback(async (versions: VersionFormData[]): Promise<void> => {
+        // 转换为展示用的版本格式
+        const versionList = versions.map(v => ({
+            version: v.version,
+            versionDescription: v.versionDescription,
+            seedFile: v.seedFile?.name || '',
+        }));
+        await onUpdate({ versionList });
+    }, [onUpdate]);
+
+    if (!isAuthor) {
+        return null;
+    }
+
+    return (
+        <>
+            <Card title="作者管理" style={{ marginBottom: 24 }}>
+                <Space wrap>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditCoverVisible(true)}
+                    >
+                        编辑封面
+                    </Button>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditDescriptionVisible(true)}
+                    >
+                        编辑描述
+                    </Button>
+                    <Button
+                        icon={<EditOutlined />}
+                        onClick={(): void => setEditVersionsVisible(true)}
+                    >
+                        管理版本
+                    </Button>
+                </Space>
+            </Card>
+
+            <EditWorkCover
+                visible={editCoverVisible}
+                currentCover={artwork.artworkCover}
+                onCancel={(): void => setEditCoverVisible(false)}
+                onSave={handleUpdateCover}
+            />
+
+            <EditWorkDescription
+                visible={editDescriptionVisible}
+                currentDescription={artwork.artworkDescription}
+                onCancel={(): void => setEditDescriptionVisible(false)}
+                onSave={handleUpdateDescription}
+            />
+
+            <EditWorkVersions
+                visible={editVersionsVisible}
+                versions={artwork.versionList.map(v => ({
+                    version: v.version,
+                    versionDescription: v.versionDescription,
+                    seedFile: { name: v.seedFile } as UploadFile,
+                }))}
+                onCancel={(): void => setEditVersionsVisible(false)}
+                onSave={handleUpdateVersions}
+            />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/Work.tsx b/src/feature/work/Work.tsx
new file mode 100644
index 0000000..56939d1
--- /dev/null
+++ b/src/feature/work/Work.tsx
@@ -0,0 +1,288 @@
+// src/feature/work/Work.tsx
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Layout, Flex, Spin, Alert, message } from 'antd';
+import { useParams } from 'react-router';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import {
+    fetchArtworkDetail, fetchComments, addComment, selectCurrentArtwork,
+    selectWorkLoading, selectWorkError, selectComments, setCommentsPage, clearCurrentArtwork,
+    updateArtwork, deleteComment
+} from './workSlice';
+import { Sidebar, MainContent } from './WorkComponents';
+import { EditWorkControls } from './EditWork';
+import type { ArtworkData, Comment } from './types';
+
+const { Content } = Layout;
+
+interface UserState {
+    userid?: string | number;
+    username?: string;
+}
+
+interface RootState {
+    user: UserState;
+    work: {
+        currentArtwork: ArtworkData | null;
+        loading: {
+            artwork: boolean;
+            comments: boolean;
+            addComment: boolean;
+            updateArtwork?: boolean;
+            deleteComment?: boolean;
+        };
+        error: {
+            artwork: string | null;
+            comments: string | null;
+            addComment: string | null;
+            updateArtwork?: string | null;
+            deleteComment?: string | null;
+        };
+        comments: {
+            list: Comment[];
+            total: number;
+            current: number;
+            pageSize: number;
+        };
+    };
+}
+
+const Work: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { work_id } = useParams<{ work_id: string }>();
+
+    // Redux state
+    const currentArtwork = useAppSelector(selectCurrentArtwork);
+    const loading = useAppSelector(selectWorkLoading);
+    const error = useAppSelector(selectWorkError);
+    const comments = useAppSelector(selectComments);
+    const currentUser = useAppSelector((state: RootState) => state.user);
+
+    // Local state for edit functionality
+    const [showEditControls, setShowEditControls] = useState<boolean>(false);
+
+    // 初始化数据
+    useEffect(() => {
+        if (work_id) {
+            dispatch(clearCurrentArtwork());
+            dispatch(fetchArtworkDetail(work_id));
+            dispatch(fetchComments({ workId: work_id, page: 1, pageSize: 5 }));
+        }
+    }, [work_id, dispatch]);
+
+    // 权限判断
+    const isAuthor: boolean = Boolean(
+        currentUser?.userid && currentArtwork?.authorId &&
+        String(currentUser.userid) === String(currentArtwork.authorId)
+    );
+
+    // 显示编辑控件
+    useEffect(() => {
+        setShowEditControls(isAuthor);
+    }, [isAuthor]);
+
+    // 评论分页处理
+    const handleCommentsPageChange = useCallback((page: number, pageSize: number): void => {
+        dispatch(setCommentsPage({ current: page, pageSize }));
+        if (work_id) {
+            dispatch(fetchComments({ workId: work_id, page, pageSize }));
+        }
+    }, [work_id, dispatch]);
+
+    // 添加评论
+    const handleAddComment = useCallback(async (content: string, parentId?: string): Promise<void> => {
+        if (!work_id) return;
+        try {
+            await dispatch(addComment({ workId: work_id, content, parentId })).unwrap();
+            message.success(parentId ? '回复发表成功！' : '评论发表成功！');
+        } catch {
+            message.error('评论发表失败，请重试');
+        }
+    }, [work_id, dispatch]);
+
+    // ==================== EditWork 集成功能 ====================
+
+    // 更新作品信息
+    const handleUpdateArtwork = useCallback(async (updates: Partial<ArtworkData>): Promise<void> => {
+        if (!work_id || !currentArtwork) return;
+
+        try {
+            // 检查 updateArtwork action 是否存在
+            if (updateArtwork) {
+                await dispatch(updateArtwork({
+                    workId: work_id,
+                    updates
+                })).unwrap();
+                message.success('作品信息更新成功！');
+            } else {
+                // 临时处理：直接更新本地状态
+                console.log('updateArtwork action not available, using local update');
+                message.success('作品信息更新成功！（本地更新）');
+            }
+        } catch (error) {
+            console.error('更新作品失败:', error);
+            message.error('更新失败，请重试');
+            throw error;
+        }
+    }, [work_id, currentArtwork, dispatch]);
+
+    // 删除评论
+    const handleDeleteComment = useCallback(async (commentId: string): Promise<void> => {
+        if (!work_id) return;
+
+        try {
+            // 检查 deleteComment action 是否存在
+            if (deleteComment) {
+                await dispatch(deleteComment({
+                    workId: work_id,
+                    commentId
+                })).unwrap();
+                message.success('评论删除成功！');
+
+                // 重新加载评论列表
+                dispatch(fetchComments({
+                    workId: work_id,
+                    page: comments.current,
+                    pageSize: comments.pageSize
+                }));
+            } else {
+                // 临时处理
+                console.log('deleteComment action not available');
+                message.success('评论删除成功！（本地处理）');
+            }
+        } catch (error) {
+            console.error('删除评论失败:', error);
+            message.error('删除评论失败，请重试');
+            throw error;
+        }
+    }, [work_id, dispatch, comments.current, comments.pageSize]);
+
+    // 兼容旧的编辑处理器
+    const handleEditArtwork = useCallback((): void => {
+        if (isAuthor) {
+            setShowEditControls(true);
+            message.info('请使用上方的编辑控件来修改作品信息');
+        } else {
+            message.warning('您没有编辑此作品的权限');
+        }
+    }, [isAuthor]);
+
+    // ==================== 渲染逻辑 ====================
+
+    // 加载状态
+    if (loading.artwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                        <Spin size="large" tip="加载作品详情中..." />
+                    </div>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 错误状态
+    if (error.artwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <Flex justify="center" style={{ width: '100%' }}>
+                        <div style={{ width: '90%', maxWidth: 1200 }}>
+                            <Alert
+                                message="加载失败"
+                                description={error.artwork}
+                                type="error"
+                                showIcon
+                            />
+                        </div>
+                    </Flex>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 作品不存在
+    if (!currentArtwork) {
+        return (
+            <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+                <Content style={{ padding: '20px' }}>
+                    <Flex justify="center" align="center" style={{ height: '50vh' }}>
+                        <Alert
+                            message="作品不存在"
+                            description="未找到对应的作品信息"
+                            type="warning"
+                            showIcon
+                        />
+                    </Flex>
+                </Content>
+            </Layout>
+        );
+    }
+
+    // 确保数据完整性，添加默认值
+    const safeArtwork = {
+        ...currentArtwork,
+        usersSeedingCurrently: currentArtwork.usersSeedingCurrently || [],
+        usersSeedingHistory: currentArtwork.usersSeedingHistory || [],
+        versionList: currentArtwork.versionList || [],
+        comments: comments.list || []
+    };
+
+    const safeComments = {
+        ...comments,
+        list: comments.list || []
+    };
+
+    // 主要内容渲染
+    return (
+        <Layout style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
+            <Content style={{ padding: '20px' }}>
+                <Flex justify="center" style={{ width: '100%' }}>
+                    <div style={{ width: '90%', maxWidth: 1200 }}>
+                        {/* EditWork 编辑控件 - 仅作者可见 */}
+                        {showEditControls && (
+                            <div style={{ marginBottom: 20 }}>
+                                <EditWorkControls
+                                    artwork={safeArtwork}
+                                    isAuthor={isAuthor}
+                                    onUpdate={handleUpdateArtwork}
+                                    onDeleteComment={handleDeleteComment}
+                                />
+                            </div>
+                        )}
+
+                        {/* 原有的作品展示布局 */}
+                        <Flex gap={20}>
+                            <Sidebar
+                                coverUrl={safeArtwork.artworkCover}
+                                currentUsers={safeArtwork.usersSeedingCurrently}
+                                historyUsers={safeArtwork.usersSeedingHistory}
+                            />
+                            <MainContent
+                                artworkName={safeArtwork.artworkName || safeArtwork.artworkCategory}
+                                author={safeArtwork.author}
+                                category={safeArtwork.artworkCategory}
+                                description={safeArtwork.artworkDescription}
+                                versions={safeArtwork.versionList}
+                                comments={safeComments.list}
+                                commentsTotal={safeComments.total}
+                                commentsLoading={loading.comments}
+                                commentsError={error.comments}
+                                addCommentLoading={loading.addComment}
+                                onCommentsPageChange={handleCommentsPageChange}
+                                onAddComment={handleAddComment}
+                                currentPage={safeComments.current}
+                                pageSize={safeComments.pageSize}
+                                isAuthor={isAuthor}
+                                onEditArtwork={handleEditArtwork}
+                            />
+                        </Flex>
+                    </div>
+                </Flex>
+            </Content>
+        </Layout>
+    );
+};
+
+export default Work;
\ No newline at end of file
diff --git a/src/feature/work/WorkComponents.tsx b/src/feature/work/WorkComponents.tsx
new file mode 100644
index 0000000..64ef37a
--- /dev/null
+++ b/src/feature/work/WorkComponents.tsx
@@ -0,0 +1,368 @@
+import React, { useState } from 'react';
+import { Card, Typography, Tag, Flex, Table, Collapse, List, Spin, Alert, Button, Input, Form, message } from 'antd';
+import { EditOutlined, SendOutlined } from '@ant-design/icons';
+import ReactMarkdown from 'react-markdown';
+import type { ColumnsType } from 'antd/es/table';
+import type { PaginationConfig } from 'antd/es/pagination';
+import type { FormInstance } from 'antd/es/form';
+import type { Comment, Version, User, HistoryUser } from './types';
+import { parseUploadSize } from './types';
+
+const { Title, Paragraph } = Typography;
+const { Panel } = Collapse;
+const { TextArea } = Input;
+
+// 作品封面组件
+export const ArtworkCover: React.FC<{ coverUrl: string }> = ({ coverUrl }) => (
+    <Card cover={<img alt="作品封面" src={coverUrl} style={{ height: 250, objectFit: 'cover' }} />} />
+);
+
+// 当前做种用户组件
+export const CurrentSeedingUsers: React.FC<{ users: User[] }> = ({ users }) => (
+    <Card>
+        <Title level={4} style={{ marginBottom: 12 }}>当前做种用户</Title>
+        <Flex wrap="wrap" gap={8}>
+            {users.map((user) => (
+                <Tag key={user.userId} color="green">{user.username}</Tag>
+            ))}
+        </Flex>
+    </Card>
+);
+
+// 历史做种用户组件
+export const HistorySeedingUsers: React.FC<{ users: HistoryUser[] }> = ({ users }) => {
+    const sortedUsers = [...users].sort((a, b) => parseUploadSize(b.uploadTotal) - parseUploadSize(a.uploadTotal));
+
+    const columns: ColumnsType<HistoryUser> = [
+        { title: '用户名', dataIndex: 'username', key: 'username' },
+        {
+            title: '上传总量',
+            dataIndex: 'uploadTotal',
+            key: 'uploadTotal',
+            sorter: (a: HistoryUser, b: HistoryUser) => parseUploadSize(a.uploadTotal) - parseUploadSize(b.uploadTotal),
+        },
+    ];
+
+    return (
+        <Card>
+            <Title level={4} style={{ marginBottom: 12 }}>历史做种用户</Title>
+            <Table columns={columns} dataSource={sortedUsers} rowKey="username" pagination={false} size="small" />
+        </Card>
+    );
+};
+
+// 作品描述组件
+export const ArtworkDescription: React.FC<{
+    name: string;
+    author: string;
+    category: string;
+    description: string;
+    isAuthor?: boolean;
+    onEdit?: () => void;
+}> = ({ name, author, category, description, isAuthor = false, onEdit }) => (
+    <Card style={{ marginBottom: 20 }}>
+        <Flex justify="space-between" align="flex-start">
+            <div style={{ flex: 1 }}>
+                <Title level={2} style={{ marginBottom: 8 }}>{name}</Title>
+                <Paragraph style={{ marginBottom: 8, fontSize: 16 }}>
+                    <strong>作者：</strong>{author}
+                </Paragraph>
+                <div style={{ marginBottom: 16 }}>
+                    <Tag color="blue">{category}</Tag>
+                </div>
+                <div style={{ lineHeight: 1.6 }}>
+                    <ReactMarkdown>{description}</ReactMarkdown>
+                </div>
+            </div>
+            {isAuthor && (
+                <Button type="primary" icon={<EditOutlined />} onClick={onEdit} style={{ marginLeft: 16 }}>
+                    编辑作品
+                </Button>
+            )}
+        </Flex>
+    </Card>
+);
+
+// 版本历史组件
+export const VersionHistory: React.FC<{ versions: Version[] }> = ({ versions }) => (
+    <Card title="版本历史" style={{ marginBottom: 20 }}>
+        <Collapse>
+            {versions.map((version, index) => (
+                <Panel
+                    header={`版本 ${version.version}`}
+                    key={`version-${index}`}
+                    extra={<Tag color="blue">v{version.version}</Tag>}
+                >
+                    <div style={{ marginBottom: 16 }}>
+                        <strong>版本描述：</strong>
+                        <div style={{ marginTop: 8, lineHeight: 1.6 }}>
+                            <ReactMarkdown>{version.versionDescription}</ReactMarkdown>
+                        </div>
+                    </div>
+                    <div>
+                        <strong>种子文件：</strong>
+                        <a href={version.seedFile} target="_blank" rel="noopener noreferrer" style={{ marginLeft: 8 }}>
+                            下载链接
+                        </a>
+                    </div>
+                </Panel>
+            ))}
+        </Collapse>
+    </Card>
+);
+
+// 评论项组件（递归）
+export const CommentItem: React.FC<{
+    comment: Comment;
+    level?: number;
+    onReply?: (parentId: string, parentAuthor: string) => void;
+}> = ({ comment, level = 0, onReply }) => (
+    <div style={{ marginLeft: level * 20 }}>
+        <div style={{ marginBottom: 8 }}>
+            <Paragraph style={{ marginBottom: 4 }}>
+                <strong>{comment.author}：</strong>{comment.content}
+            </Paragraph>
+            <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>
+                {comment.createdAt && <span style={{ marginRight: 16 }}>{comment.createdAt}</span>}
+                {onReply && (
+                    <Button
+                        type="link"
+                        size="small"
+                        style={{ padding: 0, height: 'auto', fontSize: 12 }}
+                        onClick={() => onReply(comment.id || comment.author, comment.author)}
+                    >
+                        回复
+                    </Button>
+                )}
+            </div>
+        </div>
+        {comment.child && comment.child.length > 0 && (
+            <div style={{
+                borderLeft: level === 0 ? '2px solid #f0f0f0' : 'none',
+                paddingLeft: level === 0 ? 12 : 0
+            }}>
+                {comment.child.map((child, index) => (
+                    <CommentItem
+                        key={child.id || `child-${level}-${index}`}
+                        comment={child}
+                        level={level + 1}
+                        onReply={onReply}
+                    />
+                ))}
+            </div>
+        )}
+    </div>
+);
+
+// 发表评论组件
+export const CommentForm: React.FC<{
+    loading?: boolean;
+    onSubmit: (content: string, parentId?: string) => void;
+    replyTo?: { id: string; author: string } | null;
+    onCancelReply?: () => void;
+}> = ({ loading = false, onSubmit, replyTo, onCancelReply }) => {
+    const [form]: [FormInstance] = Form.useForm();
+    const [content, setContent] = useState('');
+
+    const handleSubmit = (): void => {
+        if (!content.trim()) {
+            message.warning('请输入评论内容');
+            return;
+        }
+        onSubmit(content.trim(), replyTo?.id);
+        setContent('');
+        form.resetFields();
+    };
+
+    const placeholder = replyTo ? `回复 @${replyTo.author}:` : "发表你的看法...";
+
+    return (
+        <Card
+            size="small"
+            style={{ marginBottom: 16 }}
+            title={replyTo ? (
+                <div style={{ fontSize: 14 }}>
+                    <span>回复 @{replyTo.author}</span>
+                    <Button type="link" size="small" onClick={onCancelReply} style={{ padding: '0 0 0 8px', fontSize: 12 }}>
+                        取消
+                    </Button>
+                </div>
+            ) : undefined}
+        >
+            <Form form={form} layout="vertical">
+                <Form.Item>
+                    <TextArea
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        placeholder={placeholder}
+                        rows={3}
+                        maxLength={500}
+                        showCount
+                    />
+                </Form.Item>
+                <Form.Item style={{ marginBottom: 0 }}>
+                    <Flex justify="flex-end" gap={8}>
+                        {replyTo && <Button onClick={onCancelReply}>取消</Button>}
+                        <Button
+                            type="primary"
+                            icon={<SendOutlined />}
+                            loading={loading}
+                            onClick={handleSubmit}
+                            disabled={!content.trim()}
+                        >
+                            {replyTo ? '发表回复' : '发表评论'}
+                        </Button>
+                    </Flex>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+// 评论区组件
+export const CommentSection: React.FC<{
+    comments: Comment[];
+    total: number;
+    loading?: boolean;
+    error?: string | null;
+    addCommentLoading?: boolean;
+    onPageChange: (page: number, pageSize: number) => void;
+    onAddComment: (content: string, parentId?: string) => void;
+    currentPage: number;
+    pageSize: number;
+}> = ({ comments, total, loading, error, addCommentLoading, onPageChange, onAddComment, currentPage, pageSize }) => {
+    const [replyTo, setReplyTo] = useState<{ id: string; author: string } | null>(null);
+
+    const handleReply = (parentId: string, parentAuthor: string): void => {
+        setReplyTo({ id: parentId, author: parentAuthor });
+    };
+
+    const handleCancelReply = (): void => {
+        setReplyTo(null);
+    };
+
+    const handleSubmitComment = (content: string, parentId?: string): void => {
+        onAddComment(content, parentId);
+        setReplyTo(null);
+    };
+
+    const paginationConfig: PaginationConfig = {
+        current: currentPage,
+        pageSize,
+        total,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条评论`,
+        pageSizeOptions: ['5', '10', '20'],
+        onChange: onPageChange,
+        onShowSizeChange: onPageChange,
+    };
+
+    return (
+        <Card title={`评论 (${total})`} style={{ marginBottom: 20 }}>
+            <CommentForm
+                loading={addCommentLoading}
+                onSubmit={handleSubmitComment}
+                replyTo={replyTo}
+                onCancelReply={handleCancelReply}
+            />
+
+            {error ? (
+                <Alert message="加载评论失败" description={error} type="error" showIcon />
+            ) : loading ? (
+                <Flex justify="center" align="center" style={{ minHeight: 200 }}>
+                    <Spin size="large" />
+                </Flex>
+            ) : comments.length > 0 ? (
+                <List
+                    dataSource={comments}
+                    pagination={paginationConfig}
+                    renderItem={(comment, index) => (
+                        <List.Item
+                            key={comment.id || `comment-${index}`}
+                            style={{ border: 'none', padding: '16px 0', borderBottom: '1px solid #f0f0f0' }}
+                        >
+                            <CommentItem comment={comment} onReply={handleReply} />
+                        </List.Item>
+                    )}
+                />
+            ) : (
+                <Paragraph style={{ textAlign: 'center', color: '#999', margin: '20px 0' }}>
+                    暂无评论，来发表第一条评论吧！
+                </Paragraph>
+            )}
+        </Card>
+    );
+};
+
+// 侧边栏组合组件
+export const Sidebar: React.FC<{
+    coverUrl: string;
+    currentUsers: User[];
+    historyUsers: HistoryUser[];
+    loading?: boolean;
+    error?: string | null;
+}> = ({ coverUrl, currentUsers, historyUsers, loading, error }) => (
+    <Flex flex={1} vertical gap={20}>
+        <ArtworkCover coverUrl={coverUrl} />
+        {loading ? (
+            <Flex justify="center" align="center" style={{ minHeight: 200 }}>
+                <Spin size="large" />
+            </Flex>
+        ) : error ? (
+            <Alert message="加载用户信息失败" description={error} type="error" showIcon />
+        ) : (
+            <>
+                <CurrentSeedingUsers users={currentUsers} />
+                <HistorySeedingUsers users={historyUsers} />
+            </>
+        )}
+    </Flex>
+);
+
+// 主内容区组合组件
+export const MainContent: React.FC<{
+    artworkName: string;
+    author: string;
+    category: string;
+    description: string;
+    versions: Version[];
+    comments: Comment[];
+    commentsTotal: number;
+    commentsLoading?: boolean;
+    commentsError?: string | null;
+    addCommentLoading?: boolean;
+    onCommentsPageChange: (page: number, pageSize: number) => void;
+    onAddComment: (content: string, parentId?: string) => void;
+    currentPage: number;
+    pageSize: number;
+    isAuthor?: boolean;
+    onEditArtwork?: () => void;
+}> = ({
+    artworkName, author, category, description, versions, comments, commentsTotal,
+    commentsLoading, commentsError, addCommentLoading, onCommentsPageChange, onAddComment,
+    currentPage, pageSize, isAuthor, onEditArtwork
+}) => (
+        <Flex flex={4} vertical>
+            <ArtworkDescription
+                name={artworkName}
+                author={author}
+                category={category}
+                description={description}
+                isAuthor={isAuthor}
+                onEdit={onEditArtwork}
+            />
+            <VersionHistory versions={versions} />
+            <CommentSection
+                comments={comments}
+                total={commentsTotal}
+                loading={commentsLoading}
+                error={commentsError}
+                addCommentLoading={addCommentLoading}
+                onPageChange={onCommentsPageChange}
+                onAddComment={onAddComment}
+                currentPage={currentPage}
+                pageSize={pageSize}
+            />
+        </Flex>
+    );
\ No newline at end of file
diff --git a/src/feature/work/hooks.ts b/src/feature/work/hooks.ts
new file mode 100644
index 0000000..f07189e
--- /dev/null
+++ b/src/feature/work/hooks.ts
@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router";
+import type { 
+    WorkFormData, 
+    BasicInfo, 
+    CoverInfo, 
+    VersionFormData,
+    ArtworkCategory
+} from './types';
+
+// ==================== Hook ====================
+export const useCreateWorkForm = () => {
+    const navigate = useNavigate();
+    const [currentStep, setCurrentStep] = useState<number>(0);
+    const [formData, setFormData] = useState<WorkFormData>({
+        basicInfo: { 
+            artworkName: '', 
+            artworkCategory: '概念设计' as ArtworkCategory, 
+            artworkDescription: '' 
+        },
+        coverInfo: {},
+        versions: [],
+    });
+
+    const handleUpdateFormData = useCallback((field: keyof WorkFormData, value: BasicInfo | CoverInfo | VersionFormData[]) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    }, []);
+
+    const handleNext = useCallback(() => setCurrentStep(prev => Math.min(prev + 1, 3)), []);
+    const handlePrev = useCallback(() => setCurrentStep(prev => Math.max(prev - 1, 0)), []);
+    const handlePublish = useCallback(() => navigate('/work/new-work-id'), [navigate]);
+
+    return { currentStep, formData, handleUpdateFormData, handleNext, handlePrev, handlePublish };
+};
\ No newline at end of file
diff --git a/src/feature/work/mockData.ts b/src/feature/work/mockData.ts
new file mode 100644
index 0000000..8470e61
--- /dev/null
+++ b/src/feature/work/mockData.ts
@@ -0,0 +1,405 @@
+import type { ArtworkData, Comment } from './types';
+
+// 生成随机时间的工具函数
+const generateRandomDate = (daysAgo: number): string => {
+    const date = new Date();
+    date.setDate(date.getDate() - Math.floor(Math.random() * daysAgo));
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+// 通用评论数据
+const baseComments: Comment[] = [
+    {
+        id: 'comment_1',
+        content: '这个作品真的很棒！设计思路很新颖，学到了很多东西。',
+        author: '设计爱好者小王',
+        authorId: 'user_wang_001',
+        createdAt: generateRandomDate(3),
+        child: [
+            {
+                id: 'comment_1_1',
+                content: '同感！特别是色彩搭配的部分，很有启发性。',
+                author: '视觉设计师李雷',
+                authorId: 'user_lilei_002',
+                createdAt: generateRandomDate(2),
+                child: [],
+            },
+            {
+                id: 'comment_1_2',
+                content: '确实，作者的审美很在线，期待更多作品！',
+                author: '创意总监韩梅梅',
+                authorId: 'user_hanmeimei_003',
+                createdAt: generateRandomDate(2),
+                child: [
+                    {
+                        id: 'comment_1_2_1',
+                        content: '@创意总监韩梅梅 您说得对，这种风格确实很难得',
+                        author: '设计爱好者小王',
+                        authorId: 'user_wang_001',
+                        createdAt: generateRandomDate(1),
+                        child: [],
+                    }
+                ],
+            },
+        ],
+    },
+    {
+        id: 'comment_2',
+        content: '技术实现方面有什么特别的难点吗？想了解一下制作过程。',
+        author: '技术控阿明',
+        authorId: 'user_aming_004',
+        createdAt: generateRandomDate(5),
+        child: [],
+    },
+    {
+        id: 'comment_3',
+        content: '看起来很专业，请问这是用什么软件制作的？',
+        author: '新手小白',
+        authorId: 'user_xiaobai_005',
+        createdAt: generateRandomDate(4),
+        child: [
+            {
+                id: 'comment_3_1',
+                content: '从效果来看应该是用Adobe全家桶，主要是PS和AI',
+                author: '软件专家老刘',
+                authorId: 'user_laoliu_006',
+                createdAt: generateRandomDate(3),
+                child: [],
+            }
+        ],
+    },
+    {
+        id: 'comment_4',
+        content: '色彩运用得很巧妙，给人一种很舒服的视觉感受。',
+        author: '色彩搭配师小张',
+        authorId: 'user_xiaozhang_007',
+        createdAt: generateRandomDate(6),
+        child: [],
+    },
+    {
+        id: 'comment_5',
+        content: '作品质量很高，但是感觉在某些细节上还可以再优化一下。',
+        author: '完美主义者',
+        authorId: 'user_perfect_008',
+        createdAt: generateRandomDate(7),
+        child: [
+            {
+                id: 'comment_5_1',
+                content: '能具体说说哪些地方可以优化吗？我也想学习学习',
+                author: '求知者小陈',
+                authorId: 'user_xiaochen_009',
+                createdAt: generateRandomDate(6),
+                child: [],
+            }
+        ],
+    },
+    {
+        id: 'comment_6',
+        content: '已经下载收藏了，感谢分享！🎉',
+        author: '收藏家大佬',
+        authorId: 'user_collector_010',
+        createdAt: generateRandomDate(8),
+        child: [],
+    },
+    {
+        id: 'comment_7',
+        content: '这个风格很适合我正在做的项目，能不能商用呢？',
+        author: '商务合作方',
+        authorId: 'user_business_011',
+        createdAt: generateRandomDate(9),
+        child: [],
+    },
+    {
+        id: 'comment_8',
+        content: '教程什么时候出？期待大神的分享！',
+        author: '学习狂人',
+        authorId: 'user_learner_012',
+        createdAt: generateRandomDate(10),
+        child: [],
+    }
+];
+
+// 作品数据集合
+export const mockArtworks: Record<string, ArtworkData> = {
+    '12345': {
+        artworkId: '12345',
+        artworkCover: 'https://picsum.photos/300/400?random=1',
+        author: '视觉设计师张三',
+        authorId: 'author_zhangsan_001',
+        artworkName: '未来城市概念设计',
+        artworkCategory: '概念设计',
+        comments: [],
+        artworkDescription: `# 未来城市概念设计
+
+这是一个关于2050年智慧城市的概念设计作品。整个设计融合了**可持续发展**、**人工智能**和**绿色科技**的理念。
+
+## 设计理念
+
+- 🌱 **生态友好**：建筑与自然和谐共生
+- 🤖 **智能化**：AI驱动的城市管理系统
+- 🚗 **零排放**：全面电动化的交通系统
+- 🏗️ **模块化**：可扩展的建筑结构
+
+## 技术特点
+
+采用了最新的**参数化设计**方法，通过算法生成建筑形态，确保每个结构都能最大化利用自然光和风能。
+
+*希望这个设计能为未来城市规划提供一些启发。*`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:future_city_v1_0&dn=未来城市v1.0.zip',
+                versionDescription: `## 初始版本 v1.0
+
+### 包含内容
+- 🎨 **高分辨率效果图** (4K)
+- 📐 **CAD源文件** (.dwg)
+- 🖼️ **PSD分层文件**
+- 📄 **设计说明文档**
+
+### 更新说明
+首次发布，包含完整的设计方案和素材文件。`,
+            },
+            {
+                version: '1.1',
+                seedFile: 'magnet:?xt=urn:btih:future_city_v1_1&dn=未来城市v1.1.zip',
+                versionDescription: `## 更新版本 v1.1
+
+### 新增内容
+- 🌃 **夜景渲染图**
+- 🎬 **动画演示视频** (1080p)
+- 🔧 **Blender源文件**
+
+### 修复内容
+- 修复了部分贴图丢失问题
+- 优化了文件结构
+- 添加了英文版说明文档`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: '设计师小李', userId: 'user_xiaoli_101' },
+            { username: '建筑师王工', userId: 'user_wanggong_102' },
+            { username: '学生小赵', userId: 'user_xiaozhao_103' },
+            { username: '创意总监', userId: 'user_director_104' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: '资深下载者', uploadTotal: '156.8GB',
+                userId: ''
+            },
+            {
+                username: '设计素材库', uploadTotal: '89.2GB',
+                userId: ''
+            },
+            {
+                username: '创意工作室', uploadTotal: '67.5GB',
+                userId: ''
+            },
+            {
+                username: '学院资源组', uploadTotal: '45.3GB',
+                userId: ''
+            },
+            {
+                username: '独立设计师', uploadTotal: '23.7GB',
+                userId: ''
+            },
+        ],
+    },
+    
+    '23456': {
+        artworkId: '23456',
+        artworkCover: 'https://picsum.photos/300/400?random=2',
+        author: 'UI设计师李四',
+        authorId: 'author_lisi_002',
+        artworkName: '移动应用界面设计套件',
+        artworkCategory: 'UI/UX设计',
+        comments: [],
+        artworkDescription: `# 移动应用界面设计套件
+
+一套完整的移动端UI设计规范和组件库，包含**100+个精美界面**和**500+个设计组件**。
+
+## 包含内容
+
+### 📱 界面设计
+- 登录注册页面
+- 主页和导航
+- 商品展示页面
+- 个人中心
+- 设置页面
+
+### 🎨 设计系统
+- **颜色规范**：主色调、辅助色、状态色
+- **字体系统**：标题、正文、注释文字
+- **图标库**：线性图标、填充图标
+- **组件库**：按钮、输入框、卡片等`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:ui_kit_v1_0&dn=UI设计套件v1.0.zip',
+                versionDescription: `## 基础版本 v1.0
+
+### 核心功能
+- 📱 **50个界面模板**
+- 🎨 **基础组件库**
+- 📋 **设计规范文档**
+- 🎯 **Sketch源文件**`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: 'UI设计新手', userId: 'user_ui_newbie_201' },
+            { username: '产品经理小王', userId: 'user_pm_wang_202' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: 'UI设计公司', uploadTotal: '78.9GB',
+                userId: ''
+            },
+            {
+                username: '设计师联盟', uploadTotal: '45.6GB',
+                userId: ''
+            },
+            {
+                username: '学习小组', uploadTotal: '23.4GB',
+                userId: ''
+            },
+        ],
+    },
+
+    '67890': {
+        artworkId: '67890',
+        artworkCover: 'https://picsum.photos/300/400?random=6',
+        author: '刘松林',
+        authorId: '2', // 用户ID为2
+        artworkName: 'React组件库开发指南',
+        artworkCategory: '前端开发',
+        comments: [],
+        artworkDescription: `# React组件库开发指南
+
+一套完整的**企业级React组件库**开发教程和源码，包含从设计到发布的完整流程。
+
+## 项目特色
+
+### 🚀 技术栈
+- **React 18** + **TypeScript**
+- **Styled-components** 样式解决方案
+- **Storybook** 组件文档
+- **Jest** + **Testing Library** 测试
+
+### 📦 组件覆盖
+- **基础组件**: Button, Input, Select, Modal等
+- **布局组件**: Grid, Layout, Container等  
+- **数据展示**: Table, List, Card, Timeline等`,
+        versionList: [
+            {
+                version: '1.0',
+                seedFile: 'magnet:?xt=urn:btih:react_components_v1_0&dn=React组件库v1.0.zip',
+                versionDescription: `## 基础版本 v1.0
+
+### 核心内容
+- 📚 **完整教程文档** (50+页)
+- 💻 **基础组件源码** (20+个组件)
+- 🧪 **单元测试示例**
+- 📖 **Storybook配置**`,
+            },
+        ],
+        usersSeedingCurrently: [
+            { username: '前端新手小李', userId: 'user_frontend_newbie_601' },
+            { username: 'React爱好者', userId: 'user_react_fan_602' },
+        ],
+        usersSeedingHistory: [
+            {
+                username: '大厂前端团队', uploadTotal: '567.8GB',
+                userId: ''
+            },
+            {
+                username: '开源社区', uploadTotal: '234.5GB',
+                userId: ''
+            },
+            {
+                username: '技术培训机构', uploadTotal: '189.7GB',
+                userId: ''
+            },
+        ],
+    },
+};
+
+// 获取指定作品的评论数据
+export const getCommentsForArtwork = (artworkId: string): Comment[] => {
+    // 为不同作品生成不同的评论
+    const commentVariations: Record<string, Comment[]> = {
+        '12345': baseComments,
+        '23456': baseComments.slice(0, 5).map(comment => ({
+            ...comment,
+            id: `ui_${comment.id}`,
+            content: comment.content.replace('作品', 'UI套件').replace('设计', '界面设计'),
+        })),
+        '67890': [
+            {
+                id: 'dev_comment_1',
+                content: '这个组件库的设计思路很棒！TypeScript类型定义特别完善。',
+                author: '前端架构师张工',
+                authorId: 'user_architect_zhang',
+                createdAt: generateRandomDate(2),
+                child: [
+                    {
+                        id: 'dev_comment_1_1',
+                        content: '同感！特别是组件API的设计，很符合React的设计理念。',
+                        author: 'React核心开发者',
+                        authorId: 'user_react_core',
+                        createdAt: generateRandomDate(1),
+                        child: [],
+                    }
+                ],
+            },
+            {
+                id: 'dev_comment_2',
+                content: '构建配置写得很详细，我们团队已经参考这个搭建了自己的组件库。',
+                author: '技术负责人小刘',
+                authorId: 'user_tech_liu',
+                createdAt: generateRandomDate(3),
+                child: [],
+            },
+        ],
+    };
+    
+    return commentVariations[artworkId] || baseComments;
+};
+
+// 根据作品ID获取作品数据
+export const getArtworkById = (artworkId: string): ArtworkData | null => {
+    const artwork = mockArtworks[artworkId];
+    if (artwork) {
+        return {
+            ...artwork,
+            comments: getCommentsForArtwork(artworkId)
+        };
+    }
+    return null;
+};
+
+// 获取所有作品列表
+export const getAllArtworks = (): ArtworkData[] => {
+    return Object.values(mockArtworks);
+};
+
+// 按分类获取作品
+export const getArtworksByCategory = (category: string): ArtworkData[] => {
+    return Object.values(mockArtworks).filter(artwork => artwork.artworkCategory === category);
+};
+
+// 搜索作品
+export const searchArtworks = (keyword: string): ArtworkData[] => {
+    const lowerKeyword = keyword.toLowerCase();
+    return Object.values(mockArtworks).filter(artwork => 
+        artwork.artworkName.toLowerCase().includes(lowerKeyword) ||
+        artwork.artworkDescription.toLowerCase().includes(lowerKeyword) ||
+        artwork.author.toLowerCase().includes(lowerKeyword) ||
+        artwork.artworkCategory.toLowerCase().includes(lowerKeyword)
+    );
+};
\ No newline at end of file
diff --git a/src/feature/work/types.ts b/src/feature/work/types.ts
new file mode 100644
index 0000000..2d7dbd7
--- /dev/null
+++ b/src/feature/work/types.ts
@@ -0,0 +1,283 @@
+import type { UploadFile } from 'antd/es/upload';
+
+// ==================== 基础类型 ====================
+
+export interface User {
+    userId: string;
+    username: string;
+}
+
+export interface HistoryUser extends User {
+    uploadTotal: string;
+}
+
+// ==================== 评论相关 ====================
+
+export interface Comment {
+    id?: string;
+    content: string;
+    author: string;
+    authorId?: string;
+    createdAt?: string;
+    child: Comment[];
+}
+
+// ==================== 版本管理相关 ====================
+
+// 用于表单创建的版本信息
+export interface VersionFormData {
+    version: string;
+    versionDescription: string;
+    seedFile?: UploadFile; // 表单中的文件对象
+}
+
+// 用于展示的版本信息（后端返回）
+export interface Version {
+    version: string;
+    versionDescription: string;
+    seedFile: string; // 文件URL或路径
+    uploadedAt?: string;
+    fileSize?: number;
+}
+
+// ==================== 作品相关 ====================
+
+// 基础信息（表单用）
+export interface BasicInfo {
+    artworkName: string;
+    artworkCategory: ArtworkCategory;
+    artworkDescription: string;
+}
+
+// 封面信息（表单用）
+export interface CoverInfo {
+    coverFile?: UploadFile;
+}
+
+// 表单数据结构
+export interface WorkFormData {
+    basicInfo: BasicInfo;
+    coverInfo: CoverInfo;
+    versions: VersionFormData[];
+}
+
+// 完整的作品数据（后端返回/展示用）
+export interface ArtworkData {
+    artworkId: string;
+    artworkCover: string;
+    author: string;
+    authorId: string;
+    artworkName: string;
+    artworkCategory: ArtworkCategory;
+    artworkDescription: string;
+    versionList: Version[];
+    comments: Comment[];
+    usersSeedingCurrently: User[];
+    usersSeedingHistory: HistoryUser[];
+    createdAt?: string;
+    updatedAt?: string;
+    downloadCount?: number;
+    likeCount?: number;
+}
+
+// ==================== 表单相关 ====================
+
+export interface StepFormProps {
+    data: WorkFormData;
+    onUpdate: (field: keyof WorkFormData, value: BasicInfo | CoverInfo | VersionFormData[]) => void;
+    onNext?: () => void;
+    onPrev?: () => void;
+}
+
+// ==================== 常量定义 ====================
+
+export const ARTWORK_CATEGORIES = [
+    { label: '概念设计', value: '概念设计' },
+    { label: 'UI/UX设计', value: 'UI/UX设计' },
+    { label: '3D建模', value: '3D建模' },
+    { label: '摄影作品', value: '摄影作品' },
+    { label: '音乐制作', value: '音乐制作' },
+    { label: '前端开发', value: '前端开发' },
+    { label: '插画艺术', value: '插画艺术' },
+    { label: '动画制作', value: '动画制作' },
+    { label: '视频剪辑', value: '视频剪辑' },
+    { label: '其他', value: '其他' },
+];
+
+// 提取分类值的联合类型
+export type ArtworkCategory = '概念设计' | 'UI/UX设计' | '3D建模' | '摄影作品' | '音乐制作' | '前端开发' | '插画艺术' | '动画制作' | '视频剪辑' | '其他';
+
+// 分类选项类型（用于 Select 组件）
+export interface ArtworkCategoryOption {
+    label: string;
+    value: ArtworkCategory;
+}
+
+// ==================== 工具函数 ====================
+
+/**
+ * 解析上传大小字符串为MB数值
+ * @param uploadStr 上传大小字符串，如 "1.5GB", "500MB"
+ * @returns 大小值（以MB为单位）
+ */
+export const parseUploadSize = (uploadStr: string): number => {
+    const match = uploadStr.match(/(\d+(?:\.\d+)?)\s*(GB|MB|KB|TB)?/i);
+    if (!match) return 0;
+    
+    const size = parseFloat(match[1]);
+    const unit = (match[2] || '').toUpperCase();
+    
+    const multipliers: Record<string, number> = {
+        'TB': 1024 * 1024,
+        'GB': 1024,
+        'MB': 1,
+        'KB': 1 / 1024,
+        '': 1
+    };
+    
+    return size * (multipliers[unit] || 1);
+};
+
+/**
+ * 格式化文件大小为可读字符串
+ * @param sizeInMB 文件大小（MB）
+ * @returns 格式化后的字符串
+ */
+export const formatFileSize = (sizeInMB: number): string => {
+    if (sizeInMB >= 1024) {
+        return `${(sizeInMB / 1024).toFixed(1)}GB`;
+    } else if (sizeInMB >= 1) {
+        return `${sizeInMB.toFixed(1)}MB`;
+    } else {
+        return `${(sizeInMB * 1024).toFixed(0)}KB`;
+    }
+};
+
+/**
+ * 格式化日期
+ * @param dateString 日期字符串
+ * @returns 格式化后的日期字符串
+ */
+export const formatDate = (dateString?: string): string => {
+    if (!dateString) return '';
+    
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
+    
+    if (diffInHours < 1) {
+        return '刚刚';
+    } else if (diffInHours < 24) {
+        return `${Math.floor(diffInHours)}小时前`;
+    } else if (diffInHours < 24 * 7) {
+        return `${Math.floor(diffInHours / 24)}天前`;
+    } else {
+        return date.toLocaleDateString('zh-CN');
+    }
+};
+
+/**
+ * 验证文件大小是否符合要求
+ * @param fileSize 文件大小（字节）
+ * @param maxSizeMB 最大允许大小（MB）
+ * @returns 是否符合要求
+ */
+export const isValidFileSize = (fileSize: number, maxSizeMB: number): boolean => {
+    const fileSizeMB = fileSize / (1024 * 1024);
+    return fileSizeMB <= maxSizeMB;
+};
+
+/**
+ * 验证文件类型是否符合要求
+ * @param fileName 文件名
+ * @param allowedExtensions 允许的扩展名数组
+ * @returns 是否符合要求
+ */
+export const isValidFileType = (fileName: string, allowedExtensions: string[]): boolean => {
+    if (!fileName) return false;
+    const extension = fileName.toLowerCase().split('.').pop();
+    return extension ? allowedExtensions.includes(extension) : false;
+};
+
+/**
+ * 验证图片文件类型
+ * @param fileName 文件名
+ * @returns 是否为有效图片
+ */
+export const isValidImageFile = (fileName: string): boolean => {
+    return isValidFileType(fileName, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']);
+};
+
+/**
+ * 安全地解析JSON字符串
+ * @param jsonString JSON字符串
+ * @returns 解析结果或null
+ */
+export const safeJsonParse = <T = unknown>(jsonString: string): T | null => {
+    try {
+        return JSON.parse(jsonString) as T;
+    } catch {
+        return null;
+    }
+};
+
+// ==================== 类型守卫 ====================
+
+export const isValidArtworkCategory = (category: string): category is ArtworkCategory => {
+    return ARTWORK_CATEGORIES.some(cat => cat.value === category);
+};
+
+export const isComment = (obj: unknown): obj is Comment => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'content' in obj && 
+           'author' in obj && 
+           'child' in obj &&
+           typeof (obj as Record<string, unknown>).content === 'string' && 
+           typeof (obj as Record<string, unknown>).author === 'string' && 
+           Array.isArray((obj as Record<string, unknown>).child);
+};
+
+export const isUser = (obj: unknown): obj is User => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'userId' in obj && 
+           'username' in obj &&
+           typeof (obj as Record<string, unknown>).userId === 'string' && 
+           typeof (obj as Record<string, unknown>).username === 'string';
+};
+
+export const isHistoryUser = (obj: unknown): obj is HistoryUser => {
+    return isUser(obj) && 
+           'uploadTotal' in obj &&
+           typeof (obj as Record<string, unknown>).uploadTotal === 'string';
+};
+
+export const isVersion = (obj: unknown): obj is Version => {
+    return typeof obj === 'object' && 
+           obj !== null && 
+           'version' in obj && 
+           'versionDescription' in obj && 
+           'seedFile' in obj &&
+           typeof (obj as Record<string, unknown>).version === 'string' && 
+           typeof (obj as Record<string, unknown>).versionDescription === 'string' && 
+           typeof (obj as Record<string, unknown>).seedFile === 'string';
+};
+
+export const isArtworkData = (obj: unknown): obj is ArtworkData => {
+    if (typeof obj !== 'object' || obj === null) return false;
+    
+    const artwork = obj as Record<string, unknown>;
+    
+    return typeof artwork.artworkId === 'string' &&
+           typeof artwork.artworkCover === 'string' &&
+           typeof artwork.author === 'string' &&
+           typeof artwork.authorId === 'string' &&
+           typeof artwork.artworkName === 'string' &&
+           typeof artwork.artworkCategory === 'string' &&
+           typeof artwork.artworkDescription === 'string' &&
+           Array.isArray(artwork.versionList) &&
+           Array.isArray(artwork.comments) &&
+           Array.isArray(artwork.usersSeedingCurrently) &&
+           Array.isArray(artwork.usersSeedingHistory);
+};
\ No newline at end of file
diff --git a/src/feature/work/utils.ts b/src/feature/work/utils.ts
new file mode 100644
index 0000000..a10d95f
--- /dev/null
+++ b/src/feature/work/utils.ts
@@ -0,0 +1,155 @@
+import type { RcFile } from 'antd/es/upload';
+
+// 将文件转换为Base64
+export const getBase64 = (file: RcFile): Promise<string> =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = (error) => reject(error);
+    });
+
+// 验证图片文件
+interface ValidationResult {
+    valid: boolean;
+    message?: string;
+}
+
+export const validateImageFile = (file: RcFile): ValidationResult => {
+    const isImage = file.type.startsWith('image/');
+    if (!isImage) {
+        return { valid: false, message: '只能上传图片文件！' };
+    }
+
+    const isLt5M = file.size / 1024 / 1024 < 5;
+    if (!isLt5M) {
+        return { valid: false, message: '图片大小不能超过 5MB！' };
+    }
+
+    return { valid: true };
+};
+
+// 验证种子文件
+export const validateSeedFile = (file: RcFile): ValidationResult => {
+    const isLt100M = file.size / 1024 / 1024 < 100;
+    if (!isLt100M) {
+        return { valid: false, message: '种子文件大小不能超过 100MB！' };
+    }
+
+    return { valid: true };
+};
+
+// 格式化文件大小
+export const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// 防抖函数 - 修复版本
+export const debounce = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    wait: number
+): ((...args: Parameters<T>) => void) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    
+    return (...args: Parameters<T>) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+};
+
+// 节流函数 - 修复版本
+export const throttle = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    limit: number
+): ((...args: Parameters<T>) => void) => {
+    let inThrottle: boolean;
+    
+    return (...args: Parameters<T>) => {
+        if (!inThrottle) {
+            func(...args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+};
+// 生成唯一ID
+export const generateId = (): string => {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
+
+// 安全的JSON解析
+export const safeJsonParse = <T>(str: string, defaultValue: T): T => {
+    try {
+        return JSON.parse(str) as T;
+    } catch {
+        return defaultValue;
+    }
+};
+
+// 检查是否为空值
+export const isEmpty = (value: unknown): boolean => {
+    if (value === null || value === undefined) return true;
+    if (typeof value === 'string') return value.trim() === '';
+    if (Array.isArray(value)) return value.length === 0;
+    if (typeof value === 'object') return Object.keys(value).length === 0;
+    return false;
+};
+
+// URL参数解析
+export const parseUrlParams = (url: string): Record<string, string> => {
+    const params: Record<string, string> = {};
+    const urlObj = new URL(url);
+    
+    urlObj.searchParams.forEach((value, key) => {
+        params[key] = value;
+    });
+    
+    return params;
+};
+
+// 时间格式化
+export const formatDate = (date: Date | string | number, format: string = 'YYYY-MM-DD HH:mm:ss'): string => {
+    const d = new Date(date);
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const hours = String(d.getHours()).padStart(2, '0');
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const seconds = String(d.getSeconds()).padStart(2, '0');
+    
+    return format
+        .replace('YYYY', year.toString())
+        .replace('MM', month)
+        .replace('DD', day)
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+};
+
+// 相对时间格式化（例如：2小时前）
+export const formatRelativeTime = (date: Date | string | number): string => {
+    const now = new Date();
+    const target = new Date(date);
+    const diff = now.getTime() - target.getTime();
+    
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+    const years = Math.floor(months / 12);
+    
+    if (years > 0) return `${years}年前`;
+    if (months > 0) return `${months}个月前`;
+    if (days > 0) return `${days}天前`;
+    if (hours > 0) return `${hours}小时前`;
+    if (minutes > 0) return `${minutes}分钟前`;
+    return '刚刚';
+};
\ No newline at end of file
diff --git a/src/feature/work/workSlice.ts b/src/feature/work/workSlice.ts
new file mode 100644
index 0000000..6b2c12c
--- /dev/null
+++ b/src/feature/work/workSlice.ts
@@ -0,0 +1,469 @@
+import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit';
+import type { ArtworkData, Comment } from './types';
+import type { RootState } from '../../store/store';
+import { getArtworkById, getCommentsForArtwork } from './mockData';
+
+// ==================== 类型定义 ====================
+interface WorkState {
+    currentArtwork: ArtworkData | null;
+    loading: {
+        artwork: boolean;
+        comments: boolean;
+        addComment: boolean;
+        updateArtwork: boolean;
+        deleteComment: boolean;
+    };
+    error: {
+        artwork: string | null;
+        comments: string | null;
+        addComment: string | null;
+        updateArtwork: string | null;
+        deleteComment: string | null;
+    };
+    comments: {
+        list: Comment[];
+        total: number;
+        current: number;
+        pageSize: number;
+    };
+}
+
+interface FetchCommentsParams {
+    workId: string;
+    page: number;
+    pageSize: number;
+}
+
+interface AddCommentParams {
+    workId: string;
+    content: string;
+    parentId?: string;
+}
+
+interface UpdateArtworkParams {
+    workId: string;
+    updates: Partial<ArtworkData>;
+}
+
+interface DeleteCommentParams {
+    workId: string;
+    commentId: string;
+}
+
+interface SetCommentsPageParams {
+    current: number;
+    pageSize: number;
+}
+
+// ==================== 初始状态 ====================
+const initialState: WorkState = {
+    currentArtwork: null,
+    loading: {
+        artwork: false,
+        comments: false,
+        addComment: false,
+        updateArtwork: false,
+        deleteComment: false,
+    },
+    error: {
+        artwork: null,
+        comments: null,
+        addComment: null,
+        updateArtwork: null,
+        deleteComment: null,
+    },
+    comments: {
+        list: [],
+        total: 0,
+        current: 1,
+        pageSize: 5,
+    },
+};
+
+// ==================== Mock 工具函数 ====================
+
+// 模拟网络延迟
+const mockDelay = (ms: number = 800): Promise<void> => 
+    new Promise(resolve => setTimeout(resolve, ms));
+
+// 生成新评论ID
+const generateCommentId = (): string => {
+    return `comment_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+// 生成新评论数据
+const createNewComment = (content: string): Comment => {
+    return {
+        id: generateCommentId(),
+        content,
+        author: '当前用户', // 实际应用中从用户状态获取
+        authorId: 'current_user_id',
+        createdAt: new Date().toLocaleString('zh-CN'),
+        child: [],
+    };
+};
+
+// 递归删除评论
+const removeCommentById = (comments: Comment[], targetId: string): Comment[] => {
+    return comments.filter(comment => {
+        if (comment.id === targetId) {
+            return false;
+        }
+        if (comment.child.length > 0) {
+            comment.child = removeCommentById(comment.child, targetId);
+        }
+        return true;
+    });
+};
+
+// 递归添加回复评论
+const addReplyToComment = (comments: Comment[], parentId: string, newComment: Comment): Comment[] => {
+    return comments.map(comment => {
+        if (comment.id === parentId) {
+            return {
+                ...comment,
+                child: [...comment.child, newComment]
+            };
+        }
+        if (comment.child.length > 0) {
+            return {
+                ...comment,
+                child: addReplyToComment(comment.child, parentId, newComment)
+            };
+        }
+        return comment;
+    });
+};
+
+// 分页处理评论
+const paginateComments = (comments: Comment[], page: number, pageSize: number): Comment[] => {
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return comments.slice(startIndex, endIndex);
+};
+
+// ==================== 异步 Actions ====================
+
+// 获取作品详情
+export const fetchArtworkDetail = createAsyncThunk<
+    ArtworkData,
+    string,
+    { rejectValue: string }
+>(
+    'work/fetchArtworkDetail',
+    async (workId: string, { rejectWithValue }) => {
+        try {
+            await mockDelay(600); // 模拟网络延迟
+            
+            const artwork = getArtworkById(workId);
+            
+            if (!artwork) {
+                throw new Error(`作品 ${workId} 不存在`);
+            }
+            
+            return artwork;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '获取作品详情失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 获取评论列表
+export const fetchComments = createAsyncThunk<
+    { comments: Comment[]; total: number },
+    FetchCommentsParams,
+    { rejectValue: string }
+>(
+    'work/fetchComments',
+    async ({ workId, page, pageSize }, { rejectWithValue }) => {
+        try {
+            await mockDelay(400); // 模拟网络延迟
+            
+            const allComments = getCommentsForArtwork(workId);
+            const paginatedComments = paginateComments(allComments, page, pageSize);
+            
+            return {
+                comments: paginatedComments,
+                total: allComments.length
+            };
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '获取评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 添加评论
+export const addComment = createAsyncThunk<
+    Comment,
+    AddCommentParams,
+    { rejectValue: string }
+>(
+    'work/addComment',
+    async ({ workId, content }, { rejectWithValue }) => {
+        try {
+            await mockDelay(500); // 模拟网络延迟
+            
+            // 验证作品是否存在
+            const artwork = getArtworkById(workId);
+            if (!artwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 创建新评论
+            const newComment = createNewComment(content);
+            
+            // 模拟服务器返回完整的评论数据
+            return newComment;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '添加评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 更新作品信息
+export const updateArtwork = createAsyncThunk<
+    ArtworkData,
+    UpdateArtworkParams,
+    { rejectValue: string }
+>(
+    'work/updateArtwork',
+    async ({ workId, updates }, { rejectWithValue }) => {
+        try {
+            await mockDelay(1000); // 模拟网络延迟
+            
+            const currentArtwork = getArtworkById(workId);
+            if (!currentArtwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 模拟文件上传处理
+            const processedUpdates = { ...updates };
+            
+            // 如果包含 blob URL，模拟转换为正式URL
+            if (updates.artworkCover && updates.artworkCover.startsWith('blob:')) {
+                // 模拟上传成功，生成新的图片URL
+                processedUpdates.artworkCover = `https://picsum.photos/300/400?random=${Date.now()}`;
+            }
+            
+            // 处理版本文件上传
+            if (updates.versionList) {
+                processedUpdates.versionList = updates.versionList.map(version => ({
+                    ...version,
+                    seedFile: version.seedFile.startsWith?.('blob:') 
+                        ? `magnet:?xt=urn:btih:updated_${Date.now()}&dn=${version.version}.zip`
+                        : version.seedFile
+                }));
+            }
+            
+            // 合并更新后的数据
+            const updatedArtwork: ArtworkData = {
+                ...currentArtwork,
+                ...processedUpdates,
+                updatedAt: new Date().toISOString(),
+            };
+            
+            return updatedArtwork;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '更新作品失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// 删除评论
+export const deleteComment = createAsyncThunk<
+    string,
+    DeleteCommentParams,
+    { rejectValue: string }
+>(
+    'work/deleteComment',
+    async ({ workId, commentId }, { rejectWithValue }) => {
+        try {
+            await mockDelay(300); // 模拟网络延迟
+            
+            // 验证作品是否存在
+            const artwork = getArtworkById(workId);
+            if (!artwork) {
+                throw new Error('作品不存在');
+            }
+            
+            // 模拟删除成功
+            return commentId;
+        } catch (error) {
+            const message = error instanceof Error ? error.message : '删除评论失败';
+            return rejectWithValue(message);
+        }
+    }
+);
+
+// ==================== Slice 定义 ====================
+const workSlice = createSlice({
+    name: 'work',
+    initialState,
+    reducers: {
+        // 清除当前作品
+        clearCurrentArtwork: (state) => {
+            state.currentArtwork = null;
+            state.comments.list = [];
+            state.comments.total = 0;
+            state.comments.current = 1;
+            // 清除所有错误状态
+            Object.keys(state.error).forEach(key => {
+                state.error[key as keyof typeof state.error] = null;
+            });
+        },
+        
+        // 设置评论分页
+        setCommentsPage: (state, action: PayloadAction<SetCommentsPageParams>) => {
+            state.comments.current = action.payload.current;
+            state.comments.pageSize = action.payload.pageSize;
+        },
+        
+        // 清除特定错误
+        clearError: (state, action: PayloadAction<keyof WorkState['error']>) => {
+            state.error[action.payload] = null;
+        },
+        
+        // 清除所有错误
+        clearAllErrors: (state) => {
+            Object.keys(state.error).forEach(key => {
+                state.error[key as keyof typeof state.error] = null;
+            });
+        },
+    },
+    extraReducers: (builder) => {
+        // 获取作品详情
+        builder
+            .addCase(fetchArtworkDetail.pending, (state) => {
+                state.loading.artwork = true;
+                state.error.artwork = null;
+            })
+            .addCase(fetchArtworkDetail.fulfilled, (state, action) => {
+                state.loading.artwork = false;
+                state.currentArtwork = action.payload;
+                state.error.artwork = null;
+            })
+            .addCase(fetchArtworkDetail.rejected, (state, action) => {
+                state.loading.artwork = false;
+                state.error.artwork = action.payload || '获取作品详情失败';
+            });
+
+        // 获取评论列表
+        builder
+            .addCase(fetchComments.pending, (state) => {
+                state.loading.comments = true;
+                state.error.comments = null;
+            })
+            .addCase(fetchComments.fulfilled, (state, action) => {
+                state.loading.comments = false;
+                state.comments.list = action.payload.comments;
+                state.comments.total = action.payload.total;
+                state.error.comments = null;
+            })
+            .addCase(fetchComments.rejected, (state, action) => {
+                state.loading.comments = false;
+                state.error.comments = action.payload || '获取评论失败';
+            });
+
+        // 添加评论
+        builder
+            .addCase(addComment.pending, (state) => {
+                state.loading.addComment = true;
+                state.error.addComment = null;
+            })
+            .addCase(addComment.fulfilled, (state, action) => {
+                state.loading.addComment = false;
+                
+                const newComment = action.payload;
+                const { parentId } = action.meta.arg;
+                
+                if (parentId) {
+                    // 添加回复评论
+                    state.comments.list = addReplyToComment(state.comments.list, parentId, newComment);
+                } else {
+                    // 添加顶级评论
+                    state.comments.list.unshift(newComment);
+                    state.comments.total += 1;
+                }
+                
+                state.error.addComment = null;
+            })
+            .addCase(addComment.rejected, (state, action) => {
+                state.loading.addComment = false;
+                state.error.addComment = action.payload || '添加评论失败';
+            });
+
+        // 更新作品信息
+        builder
+            .addCase(updateArtwork.pending, (state) => {
+                state.loading.updateArtwork = true;
+                state.error.updateArtwork = null;
+            })
+            .addCase(updateArtwork.fulfilled, (state, action) => {
+                state.loading.updateArtwork = false;
+                state.currentArtwork = action.payload;
+                state.error.updateArtwork = null;
+            })
+            .addCase(updateArtwork.rejected, (state, action) => {
+                state.loading.updateArtwork = false;
+                state.error.updateArtwork = action.payload || '更新作品失败';
+            });
+
+        // 删除评论
+        builder
+            .addCase(deleteComment.pending, (state) => {
+                state.loading.deleteComment = true;
+                state.error.deleteComment = null;
+            })
+            .addCase(deleteComment.fulfilled, (state, action) => {
+                state.loading.deleteComment = false;
+                
+                // 从评论列表中移除已删除的评论
+                state.comments.list = removeCommentById(state.comments.list, action.payload);
+                state.comments.total = Math.max(0, state.comments.total - 1);
+                state.error.deleteComment = null;
+            })
+            .addCase(deleteComment.rejected, (state, action) => {
+                state.loading.deleteComment = false;
+                state.error.deleteComment = action.payload || '删除评论失败';
+            });
+    },
+});
+
+// ==================== Actions 导出 ====================
+export const { 
+    clearCurrentArtwork, 
+    setCommentsPage, 
+    clearError, 
+    clearAllErrors 
+} = workSlice.actions;
+
+// ==================== Selectors 导出 ====================
+export const selectCurrentArtwork = (state: RootState): ArtworkData | null => 
+    state.work.currentArtwork;
+
+export const selectWorkLoading = (state: RootState): WorkState['loading'] => 
+    state.work.loading;
+
+export const selectWorkError = (state: RootState): WorkState['error'] => 
+    state.work.error;
+
+export const selectComments = (state: RootState): WorkState['comments'] => 
+    state.work.comments;
+
+export const selectIsAuthor = (state: RootState): boolean => {
+    const currentUser = state.user;
+    const currentArtwork = state.work.currentArtwork;
+    
+    return Boolean(
+        currentUser?.userid && 
+        currentArtwork?.authorId &&
+        String(currentUser.userid) === String(currentArtwork.authorId)
+    );
+};
+
+// ==================== Reducer 导出 ====================
+export default workSlice.reducer;
\ No newline at end of file
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
index 238fdf4..2764f5a 100644
--- a/src/routes/ProtectedRoute.tsx
+++ b/src/routes/ProtectedRoute.tsx
@@ -1,7 +1,10 @@
-import React, { useEffect } from 'react';
-import { useAppSelector, useAppDispatch } from '../store/hooks'; // 导入 hooks
+// src/routes/ProtectedRoute.tsx
+
+import React, { useEffect, useState } from 'react';
+import { useAppSelector, useAppDispatch } from '../store/hooks';
 import { useNavigate } from 'react-router';
-import { refreshToken } from '../feature/auth/authSlice'; // 导入刷新 token 的 thunk
+import { refreshToken } from '../feature/auth/authSlice';
+import { Spin } from 'antd';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -11,26 +14,68 @@
   const { isAuth, token } = useAppSelector((state) => state.auth);
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const tryRefreshToken = async () => {
+      // 如果没有token，直接跳转到登录页
       if (!token) {
-        navigate('/login'); // 如果没有 token，跳转到登录页
+        navigate('/login', { replace: true });
+        return;
       }
+
+      // 如果有token但未认证，尝试刷新token
       if (!isAuth && token) {
+        setIsLoading(true);
         try {
-          await dispatch(refreshToken(token)).unwrap(); // 尝试刷新 token
-        } catch {
-          navigate('/login');
+          await dispatch(refreshToken(token)).unwrap();
+        } catch (error) {
+          console.error('Token refresh failed:', error);
+          navigate('/login', { replace: true });
+        } finally {
+          setIsLoading(false);
         }
       }
     };
 
-    tryRefreshToken(); // 执行 token 刷新
+    tryRefreshToken();
   }, [isAuth, token, dispatch, navigate]);
 
-  // 如果已认证则渲染 children，否则返回 null
-  return isAuth ? <>{children}</> : null;
+  // 显示加载状态
+  if (isLoading) {
+    return (
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh'
+      }}>
+        <Spin size="large" tip="验证身份中..." />
+      </div>
+    );
+  }
+
+  // 如果没有token，返回null（会触发导航）
+  if (!token) {
+    return null;
+  }
+
+  // 如果已认证，渲染children
+  if (isAuth) {
+    return <>{children}</>;
+  }
+
+  // 如果有token但还在验证中，显示加载状态
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh'
+    }}>
+      <Spin size="large" tip="验证身份中..." />
+    </div>
+  );
 };
 
-export default ProtectedRoute;
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 585b1f6..3bb3135 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -1,29 +1,45 @@
+// src/routes/routes.ts
+
 import { createBrowserRouter } from "react-router";
-import Home from "../feature/Home";
+import Home from "../feature/home/Home";
 import AuthLayout from "../feature/auth/AuthLayout";
 import Login from "../feature/auth/Login";
 import Register from "../feature/auth/Register";
 import Forget from "../feature/auth/Forget";
 import AppLayout from "../AppLayout";
 import withProtect from "./withProtect";
+import Work from "../feature/work/Work";
+import CreateWork from "../feature/work/CreateWork";
 
+// 创建受保护的组件
+const ProtectedHome = withProtect(Home);
+const ProtectedWork = withProtect(Work);
+const ProtectedCreatWork = withProtect(CreateWork)
 export default createBrowserRouter([
   {
+    path: "/",
     Component: AppLayout,
     children: [
       {
         path: "/",
-        // 使用 ProtectedRoute 来包裹需要保护的页面
-        element: withProtect(Home),
+        Component: ProtectedHome,
       },
       {
         Component: AuthLayout,
         children: [
-          { path: "login", Component: Login },
-          { path: "register", Component: Register },
-          { path: "forget", Component: Forget },
+          { path: "/login", Component: Login },
+          { path: "/register", Component: Register },
+          { path: "/forget", Component: Forget },
         ],
       },
+      {
+        path: "/work/:work_id",
+        Component: ProtectedWork,
+      },
+      {
+        path:"/work/creat",
+        Component: ProtectedCreatWork
+      }
     ],
   },
-]);
+]);
\ No newline at end of file
diff --git a/src/routes/withProtect.ts b/src/routes/withProtect.ts
index bcde943..f8ea125 100644
--- a/src/routes/withProtect.ts
+++ b/src/routes/withProtect.ts
@@ -1,10 +1,14 @@
-import React from 'react';
-import ProtectedRoute from './ProtectedRoute'; 
+// src/routes/withProtect.ts
 
-const withProtect = (Component: React.ComponentType) => {
-  return React.createElement(ProtectedRoute, {
-    children: React.createElement(Component)
-  });
+import React from 'react';
+import ProtectedRoute from './ProtectedRoute';
+
+const withProtect = <P extends object>(Component: React.ComponentType<P>) => {
+  return function ProtectedComponent(props: P) {
+    return React.createElement(ProtectedRoute, {
+      children: React.createElement(Component, props)
+    });
+  };
 };
 
 export default withProtect;
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 4921218..cb5b975 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,10 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from "../feature/auth/authSlice"
 import userReducer from "../feature/user/userSlice"
+import workReducer from "../feature/work/workSlice"
+
 export const store = configureStore({
   reducer: {
       auth: authReducer,
       user: userReducer,
+      work: workReducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(),
 })
diff --git a/src/store/types.ts b/src/store/types.ts
deleted file mode 100644
index 3e2d796..0000000
--- a/src/store/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// 定义用户基本信息
-export interface User {
-    id: number;
-    username: string;
-    email: string;
-    role: string;
-    token: string;
-}
-
-// 定义认证状态
-export interface AuthState {
-    token: string;
-    loading: boolean;
-    isAuth: boolean;
-    error: string
-}
\ No newline at end of file