Feat: Use storybook to display public components. #9914 (#9915)

### What problem does this PR solve?
Feat: Use storybook to display public components. #9914
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/package.json

@@ -3,12 +3,14 @@
   "author": "bill",
   "scripts": {
     "build": "umi build",
+    "build-storybook": "storybook build",
     "dev": "cross-env UMI_DEV_SERVER_COMPRESS=none umi dev",
     "postinstall": "umi setup",
     "lint": "umi lint --eslint-only",
     "prepare": "cd .. && husky web/.husky",
     "setup": "umi setup",
     "start": "npm run dev",
+    "storybook": "storybook dev -p 6006",
     "test": "jest --no-cache --coverage"
   },
   "lint-staged": {
@@ -116,11 +118,17 @@
   "devDependencies": {
     "@react-dev-inspector/umi4-plugin": "^2.0.1",
     "@redux-devtools/extension": "^3.3.0",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-onboarding": "^9.1.4",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+    "@storybook/react-webpack5": "^9.1.4",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
+    "@types/node": "^24.3.0",
     "@types/react": "^18.0.33",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.0.11",
@@ -131,19 +139,24 @@
     "@umijs/lint": "^4.1.1",
     "@umijs/plugins": "^4.1.0",
     "@welldone-software/why-did-you-render": "^8.0.3",
+    "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
     "eslint-plugin-check-file": "^2.8.0",
+    "eslint-plugin-storybook": "^9.1.4",
     "eslint-webpack-plugin": "^4.1.0",
     "html-loader": "^5.1.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
     "prettier": "^3.2.4",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.4.9",
     "react-dev-inspector": "^2.0.1",
     "remark-loader": "^6.0.0",
+    "storybook": "^9.1.4",
     "tailwindcss": "^3",
     "terser-webpack-plugin": "^5.3.11",
     "ts-node": "^10.9.2",