-An excellent front-end solution for enterprise applications.
+An excellent enterprise-grade front-end solution built with Ant Design 6, Umi 4, and TypeScript.
-[](https://github.com/ant-design/ant-design) [](https://github.com/umijs/umi) [](https://github.com/zuiidea/antd-admin/issues) [](http://opensource.org/licenses/MIT) [](https://github.com/zuiidea/antd-admin/pulls) [](https://gitter.im/antd-admin/antd-admin)
+[](https://github.com/ant-design/ant-design)
+[](https://github.com/umijs/umi)
+[](https://www.typescriptlang.org/)
+[](https://github.com/zuiidea/antd-admin/issues)
+[](https://github.com/zuiidea/antd-admin/stargazers)
+[](http://opensource.org/licenses/MIT)
+[](https://github.com/zuiidea/antd-admin/pulls)
-# antd-admin_next
+
-Lightweight admin template built with Ant Design, Umi and TypeScript. This project aims to provide a clean, extensible starting point for building admin panels. It includes common pages, sample components, and a local mock server for development.
+---
-## Key Features
+## 📖 Introduction
-- Ant Design 6 + Umi
-- TypeScript-first codebase
-- Local mock server (`mock/index.js`) for development
-- Lightweight state with `zustand`
-- Example pages: Dashboard, Users, Menu management, AI Chat demo
+**AntD Admin** is a lightweight, high-performance admin template designed to provide a clean and extensible starting point for building enterprise applications. It leverages the latest features of **Ant Design 6**, **Umi 4**, and **TypeScript**, offering a modern development experience with minimal boilerplate.
-## Quick Start
+Whether you are building a dashboard, a management system, or an AI-powered tool, this project provides the essential foundation you need.
-Recommended: use pnpm.
+## ✨ Key Features
+
+- 🚀 **Modern Stack**: Built on **Ant Design 6** + **Umi 4** + **TypeScript**.
+- 🎨 **Clean Architecture**: Lightweight state management using `zustand`.
+- 🛠 **Dev Experience**: Integrated local mock server (`mock/index.js`) for seamless frontend development without backend dependency.
+- 📦 **Rich Examples**: Includes ready-to-use pages:
+ - 📊 **Dashboard**: Data visualization overview.
+ - 👥 **User Management**: CRUD operations example.
+ - 🧩 **Menu Management**: Dynamic routing configuration.
+ - 🤖 **AI Chat Demo**: Integration example for LLM interfaces.
+- ✅ **CI/CD Ready**: Pre-configured GitHub Actions for linting and building.
+
+## 🚀 Quick Start
+
+We recommend using **pnpm** for package management.
```bash
-# install dependencies
+# 1. Clone the repository
+git clone https://github.com/zuiidea/antd-admin.git -b master --depth=1
+cd antd-admin
+
+# 2. Install dependencies
pnpm install
-# local development
-pnpm run dev
+# 3. Start local development server (with mock data)
+npm run dev
-# build for production
-pnpm run build
+# 4. Build for production
+npm run build
-# lint and format
-pnpm run lint
-pnpm run format
+# 5. Code quality checks
+npm run lint
+npm run format
```
-Scripts are defined in `package.json`.
+🔌 **Development Notes**
-## Project Structure (summary)
+#### Mock Server
-- `src/`
- - `layouts/` global layout components
- - `pages/` routes and views
- - `components/` shared components
- - `services/` API wrappers
- - `store/` global state (zustand)
- - `utils/` helpers and configuration
+The project includes a built-in mock server defined in `mock/index.js`. This allows you to develop frontend features independently of the backend.
-## Development notes
+To disable mocks or switch to a real API, modify the proxy settings in your configuration file (for example, `config/proxy.ts` or `.umirc.ts`).
-- Local mock: `mock/index.js` provides mocked API endpoints during development.
-- Common routes:
- - `/` or `/dashboard` — Dashboard
- - `/users` — Users list
- - `/sys/menu` — Menu management
- - `/ai/chat` — AI Chat demo
+#### Common Routes
-## Customization
+| Route | Description |
+| --- | --- |
+| `/` or `/dashboard` | Main Dashboard |
+| `/users` | User List & Management |
+| `/sys/menu` | System Menu Configuration |
+| `/ai/chat` | AI Chat Interface Demo |
-- Update API calls in `src/services` to point to real backends.
-- Reuse or extend components in `src/components` (for example `DropOption`).
+#### Customization
-## GitHub Actions CI
+- **API Integration:** Update API endpoints in `src/services` to connect to your real backend.
+- **Component Extension:** Reuse or extend existing components in `src/components` (for example, `DropOption`, `StandardTable`).
+- **Theme:** Customize Ant Design tokens in the theme configuration to match your brand identity.
-This repository includes a GitHub Actions workflow that installs dependencies with `pnpm`, runs lint and builds the project. The workflow is at `.github/workflows/ci.yml`.
+#### GitHub Actions CI
-If you want tests added to CI, add a test script to `package.json` and update the workflow accordingly.
+This repository includes a pre-configured GitHub Actions workflow to ensure code quality:
-## Contributing
+- Installs dependencies using `pnpm`.
+- Runs linting checks.
+- Builds the project for production.
-Contributions welcome via issues and pull requests. Typical contributions:
-
-- Bug fixes
-- Example pages or components
-- Type and lint improvements
\ No newline at end of file
+- **Workflow location:** `.github/workflows/ci.yml`
+- **Tip:** To add automated tests to the CI pipeline, add a test script to `package.json` and update the workflow YAML accordingly.
+🤝 Contributing
+Contributions are always welcome! Whether it's fixing a bug, adding a new feature, or improving documentation, please feel free to submit an Issue or a Pull Request.
+Typical contributions include:
+🐛 Bug fixes
+🧩 New example pages or components
+📝 Type definitions and linting improvements
+🌍 Internationalization (i18n) updates
+How to contribute:
+Fork the repository.
+Create your feature branch (git checkout -b feature/AmazingFeature).
+Commit your changes (git commit -m 'Add some AmazingFeature').
+Push to the branch (git push origin feature/AmazingFeature).
+Open a Pull Request.
+📄 License
+This project is licensed under the MIT License.
+Made with ❤️ by zuiidea and contributors.
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/API-configuration.md b/docs/API-configuration.md
new file mode 100644
index 0000000..c40a250
--- /dev/null
+++ b/docs/API-configuration.md
@@ -0,0 +1,36 @@
+# API configuration
+
+This project uses explicit per-feature service modules (TypeScript) under `src/services/` that call a shared HTTP helper `src/utils/request.ts` (exported as the default `api` function).
+
+Why this pattern?
+- Clear function boundaries per domain (users, admin, menu, dashboard).
+- Type-safe signatures in TypeScript for inputs/outputs (`src/types`).
+- Centralized request handling (query params, JSON body, auth header, unified response format) in `src/utils/request.ts`.
+
+Example service (from `src/services/user.ts`):
+
+```ts
+import type { PagedResponse, User } from '@/types/user';
+import api from '../utils/request';
+
+export async function listUsers(
+ params?: Record,
+): Promise> {
+ return api>('/users', { method: 'GET', params });
+}
+
+export async function createUser(values: Record): Promise {
+ return api('/user', { method: 'POST', body: values });
+}
+```
+
+Usage:
+- Import named functions from the service module: `import { listUsers } from '@/services/user'`.
+- The helper `api(path, options)` returns the parsed `data` payload from responses that follow the `{ success, message, data }` convention.
+
+Notes about `src/utils/request.ts`:
+- Combines `config.apiPrefix` with the provided `path`.
+- Supports `params` (query), `body` (JSON or FormData), and sets `Authorization` header from local storage when available.
+- Throws errors and shows UI messages for non-success responses.
+
+If you are migrating older code that used an API mapping, prefer creating small service modules with clear function names and types as shown above.
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..52b2616
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,57 @@
+
+
+An enterprise-grade front-end starter built with Ant Design 6, Umi 4 and TypeScript.
+
+[](https://github.com/ant-design/ant-design)
+[](https://github.com/umijs/umi)
+[](https://www.typescriptlang.org/)
+[](http://opensource.org/licenses/MIT)
+[](https://github.com/zuiidea/antd-admin/pulls)
+
+
+
+- Documentation source for this project is under `docs/`.
+
+## Quick start
+
+This repository uses `pnpm` in examples and CI; `npm` or `yarn` also work but `pnpm` is recommended.
+
+```bash
+# clone
+git clone https://github.com/zuiidea/antd-admin.git
+cd antd-admin
+
+# install
+pnpm install
+
+# start dev server (includes local mock server)
+npm run dev
+
+# build
+npm run build
+
+# lint & format
+npm run lint
+npm run format
+```
+
+Notes:
+
+- Mock data live in `mock/index.js` and the project can run without a backend during development.
+- CI workflow is available at `.github/workflows/ci.yml` (uses pnpm, lint, build).
+- Update API endpoints under `src/services` to integrate a real backend.
+
+For detailed documentation see the other pages in this `docs/` folder.
+
+## Contributing
+
+Contributions welcome — file issues or open a PR as usual on GitHub.
+
diff --git a/docs/_media/favicon.ico b/docs/_media/favicon.ico
new file mode 100644
index 0000000..7ca2170
Binary files /dev/null and b/docs/_media/favicon.ico differ
diff --git a/docs/_media/logo.svg b/docs/_media/logo.svg
new file mode 100644
index 0000000..ce7afe5
--- /dev/null
+++ b/docs/_media/logo.svg
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file
diff --git a/docs/_media/term_build.svg b/docs/_media/term_build.svg
new file mode 100644
index 0000000..5b1a6ea
--- /dev/null
+++ b/docs/_media/term_build.svg
@@ -0,0 +1,69 @@
+
\ No newline at end of file
diff --git a/docs/_media/term_i18n.svg b/docs/_media/term_i18n.svg
new file mode 100644
index 0000000..a287916
--- /dev/null
+++ b/docs/_media/term_i18n.svg
@@ -0,0 +1,69 @@
+
\ No newline at end of file
diff --git a/docs/_media/term_js_build.svg b/docs/_media/term_js_build.svg
new file mode 100644
index 0000000..ff7489f
--- /dev/null
+++ b/docs/_media/term_js_build.svg
@@ -0,0 +1,200 @@
+
\ No newline at end of file
diff --git a/docs/_media/term_js_i18n.svg b/docs/_media/term_js_i18n.svg
new file mode 100644
index 0000000..f985604
--- /dev/null
+++ b/docs/_media/term_js_i18n.svg
@@ -0,0 +1,200 @@
+
\ No newline at end of file
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
new file mode 100644
index 0000000..3d6d176
--- /dev/null
+++ b/docs/_sidebar.md
@@ -0,0 +1,12 @@
+- Getting started
+ - [Quick Start](getting-started.md)
+- Customization
+ - [Configuration](configuration.md)
+ - [API Configuration](API-configuration.md)
+ - [I18n](i18n.md)
+ - [Layout](layout.md)
+ - [Request](request.md)
+- Guide
+ - [Deploy](deploy.md)
+- [Change Log](change-log.md)
+- [FAQ](faq.md)
diff --git a/docs/change-log.md b/docs/change-log.md
new file mode 100644
index 0000000..7e8fa95
--- /dev/null
+++ b/docs/change-log.md
@@ -0,0 +1,26 @@
+## 6.0.0
+
+This project was modernized and migrated to a modern front-end stack. Key highlights of the current version:
+
+### Modern stack
+- Upgraded to Ant Design 6, Umi 4 and TypeScript 5.
+- React has been updated to the current major line used in the repo (see `package.json`).
+
+### Architecture & DX
+- Services are implemented as TypeScript modules under `src/services/` and use a centralized HTTP helper `src/utils/request.ts`.
+- Lightweight local state management using `zustand` replacing older `dva` patterns.
+- Local mock server using `mock/index.js` with `mockjs` for frontend development without backend dependency.
+
+### Tooling & CI
+- Dev workflows use `pnpm` by default; scripts are defined in `package.json` (e.g. `pnpm run dev`, `pnpm run build`).
+- Tests use `jest` and related tooling; CI is implemented with GitHub Actions (`.github/workflows/ci.yml`) which installs via `pnpm`, lints and builds the project.
+
+### Quality and types
+- TypeScript types are added/expanded under `src/types/` for safer APIs and components.
+- Prettier / ESLint configuration added to enforce code style.
+
+### Other
+- Documentation is maintained under `docs/` (this site) and updated to reflect the new stack and commands.
+- Removed old custom components that duplicate Ant Design functionality and simplified the codebase accordingly.
+
+If you want a more detailed, commit-level changelog for each migration step, I can generate one from git history or help draft a migration guide.
\ No newline at end of file
diff --git a/docs/configuration.md b/docs/configuration.md
new file mode 100644
index 0000000..08cb299
--- /dev/null
+++ b/docs/configuration.md
@@ -0,0 +1,33 @@
+# Configuration
+
+You can do some custom configuration in `/src/utils/config.js`:
+
+## siteName
+
+- Type `String`
+
+ Configure the site name, apply it to the login box, and display the title text at the top of the sidebar.
+
+## copyright
+
+- Type： `String`
+
+ Configure the copyright notice to apply to the login page, at the bottom of the `Primary` layout.
+
+## logoPath
+
+- Type： `String`
+
+ Configure the site logo to apply to the login box and the Logo display at the top of the sidebar.
+
+## apiPrefix
+
+- Type： `String`
+
+ Configure the prefix of the interface in the project. The interface related documents can be viewed [API configuration](API-configuration.md)
+
+## fixedHeader
+
+- Type： `String`
+
+ Under the `Primary` layout, whether the top of the page is fixed when scrolling。
\ No newline at end of file
diff --git a/docs/deploy.md b/docs/deploy.md
new file mode 100644
index 0000000..3cc157f
--- /dev/null
+++ b/docs/deploy.md
@@ -0,0 +1,113 @@
+# Deploy
+
+After the development is completed and verified in the development environment, it needs to be deployed to our users.
+
+
+
+## Build
+
+First execute the following command,
+
+```bash
+npm run build
+```
+
+After a few seconds, the output should look like this：
+
+```bash
+> antd-admin@5.0.0-beta build /Users/zuiidea/web/antd-admin
+> umi build
+
+[21:13:17] webpack compiled in 43s 868ms
+ DONE Compiled successfully in 43877ms 21:13:17
+
+File sizes after gzip:
+
+ 1.3 MB dist/vendors.async.js
+ 308.21 KB dist/umi.js
+ 45.49 KB dist/vendors.chunk.css
+ 36.08 KB dist/p__chart__highCharts__index.async.js
+ 33.53 KB dist/p__user__index.async.js
+ 22.36 KB dist/p__chart__ECharts__index.async.js
+ 4.21 KB dist/p__dashboard__index.async.js
+ 4.06 KB dist/umi.css
+ ...
+```
+
+The `build` command will package all resources, including JavaScript, CSS, web fonts, images, html, and more. You can find these files in the `dist/` directory.
+
+> If you have requirements for using HashHistory , deploying html to non-root directories, statics, etc., check out [Umi Deployment] (https://umijs.org/en/guide/deploy.html).
+
+## Local verification
+
+
+Local verification can be done via `serve` before publishing.
+
+```
+$ yarn global add serve
+$ serve ./dist
+
+Serving!
+
+- Local: http://localhost:5000
+- On Your Network: http://{Your IP}:5000
+
+Copied local address to clipboard!
+
+```
+
+Access [http://localhost:5000](http://localhost:5000), under normal circumstances, it should be consistent with `npm start` (The API may not get the correct data).
+
+
+## Deploy
+
+Next, we can upload the static file to the server. If you use Nginx as the Web server, you can configure it in `ngnix.conf`:
+```
+server
+ {
+ listen 80;
+ # Specify an accessible domain name
+ server_name antd-admin.zuiidea.com;
+ # The directory where the compiled files are stored
+ root /home/www/antd-admin/dist;
+
+ # Proxy server interface to avoid cross-domain
+ location /api {
+ proxy_pass http://localhost:7000/api;
+ }
+
+ Because the front end uses BrowserHistory, it will route backback to index.html
+ location / {
+ index index.html;
+ try_files $uri $uri/ /index.html;
+ }
+ }
+```
+
+Restart the web server and access [http://antd-admin.zuiidea.com](http://antd-admin.zuiidea.com) , You will see the correct page.
+
+```bash
+nginx -s reload
+```
+
+Similarly, if you use Caddy as a web server, you can do this in `Caddyfile`:
+
+```
+antd-admin.zuiidea.com {
+ gzip
+ root /home/www/antd-admin/dist
+ proxy /api http://localhost:7000
+
+ rewrite {
+ if {path} not_match ^/api
+ to {path} {path}/ /
+ }
+}
+
+
+antd-admin.zuiidea.com/public {
+ gzip
+ root /home/www/antd-admin/dist/static/public
+}
+
+```
diff --git a/docs/faq.md b/docs/faq.md
new file mode 100644
index 0000000..2c6409d
--- /dev/null
+++ b/docs/faq.md
@@ -0,0 +1,9 @@
+# FAQ
+
+Most asked
+
+## create new page
+
+ 1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
+ 2. modify namespace/pathToRegexp in model.js
+ 3. modify mock route.js to add a route
\ No newline at end of file
diff --git a/docs/getting-started.md b/docs/getting-started.md
new file mode 100644
index 0000000..24ea6a8
--- /dev/null
+++ b/docs/getting-started.md
@@ -0,0 +1,75 @@
+# Quick Start
+
+> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) 、 [ES2015+](http://es6.ruanyifeng.com/) 、 [Antd Design](https://ant.design/docs/react/introduce-cn). Learn about [UmiJS](https://umijs.org/). Ensure you have [Node.js](https://nodejs.org/) (v18+ recommended) and [Git](https://git-scm.com/) installed.
+
+## Installation
+
+```bash
+git clone https://github.com/zuiidea/antd-admin.git my-project
+cd my-project
+```
+
+## Scaffolding
+
+The project layout is as follows:
+
+```bash
+├── dist/ # Default build output directory
+├── mock/ # Mock files
+├── public/ # Static resource
+├── src/ # Source code
+│ ├── components/ # Components
+│ ├── e2e/ # Integrated Test Case
+│ ├── layouts/ # Common Layouts
+│ ├── locales/ # i18n resources
+│ ├── models/ # Global dva Model
+│ ├── pages/ # Sub-pages and templates
+│ ├── services/ # Backend Services
+│ │ ├── api.js # API configuration
+│ │ └── index.js # API export
+│ ├── themes/ # Themes
+│ │ ├── default.less # Less variable
+│ │ ├── index.less # Global style
+│ │ ├── mixin.less # Less mixin
+│ │ └── vars.less # Less variable and mixin
+│ ├── utils/ # Utility
+│ │ ├── config.js # Application configuration
+│ │ ├── constant.js # Static constant
+│ │ ├── index.js # Utility methods
+│ │ ├── request.js # Request function(axios)
+│ │ └── theme.js # Style variables used in js
+├── .editorconfig
+├── .env
+├── .eslintrc
+├── .gitignore
+├── .prettierignore
+├── .prettierrc
+├── .stylelintrc.json
+├── .travis.yml
+└── .umirc.js
+└── package.json
+```
+
+## Development
+
+1. Install dependencies (recommended: `pnpm`).
+
+```bash
+pnpm install
+```
+
+Or with other package managers:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+2. Start local development server.
+
+```bash
+npm run dev
+```
+
+3. After startup, open the app in a browser (see dev server output for the actual URL/port).
diff --git a/docs/i18n.md b/docs/i18n.md
new file mode 100644
index 0000000..17384e2
--- /dev/null
+++ b/docs/i18n.md
@@ -0,0 +1,121 @@
+# Internationalization (i18n) Guide
+
+This project uses Umi's `plugin-locale` (based on `react-intl`) to manage localization. Translation resources live in `src/locales` (for example `en-US.json`, `zh-CN.json`). Below are instructions for: adding a language, adding a translation entry, switching languages, and disabling i18n. Examples use Japanese `ja-JP`.
+
+## 1. Add a new language (persistent)
+
+1. Create a new translation file under `src/locales/` with the language id as the file name, for example: `src/locales/ja-JP.json`.
+
+2. The file should contain a JSON object of translation keys and values (nesting allowed):
+
+```json
+{
+ "welcome": "ようこそ",
+ "login": {
+ "username": "ユーザー名",
+ "password": "パスワード",
+ "submit": "ログイン"
+ }
+}
+```
+
+3. If you want Ant Design components to use the same locale (dates, component text), add the AntD locale import and mapping in `src/app.tsx`'s `pick` function, e.g.:
+
+```ts
+import jaJP from 'antd/locale/ja_JP';
+// ...
+if (l === 'ja-JP') return jaJP;
+```
+
+4. Add the language to the language selector (for example in `src/components/TopbarControls.tsx`):
+
+```ts
+{ key: 'ja-JP', label: '日本語' }
+```
+
+5. Restart the dev server:
+
+```bash
+pnpm run dev
+```
+
+Umi collects files in `src/locales` into `localeInfo` at build/dev time so the new language becomes available. If you prefer not to restart, see the runtime registration option below.
+
+## 2. Add a translation entry
+
+1. Add the same key to each language JSON (keep `en-US.json` and `zh-CN.json` up to date alongside the new language):
+
+`src/locales/en-US.json`
+
+```json
+"my.feature.greeting": "Hello from feature"
+```
+
+`src/locales/zh-CN.json`
+
+```json
+"my.feature.greeting": "来自功能的问候"
+```
+
+2. In a component use `useIntl()` and `formatMessage`:
+
+```ts
+import { useIntl } from 'umi';
+const intl = useIntl();
+const text = intl.formatMessage({ id: 'my.feature.greeting', defaultMessage: 'Hello' });
+```
+
+Use `useIntl()` (or `injectIntl`) so the component updates automatically when the locale changes.
+
+## 3. Runtime switching and registering
+
+- Switch locale (writes `umi_locale` to localStorage and either reloads or triggers an update):
+
+```ts
+import { setLocale } from 'umi';
+// switch and reload
+setLocale('ja-JP', true);
+// switch without reload (emit update event)
+setLocale('zh-CN', false);
+```
+
+- Register a locale at runtime (no server restart required):
+
+```ts
+import { addLocale, setLocale } from 'umi';
+import jaMessages from '@/locales/ja-JP.json';
+import jaAntd from 'antd/locale/ja_JP';
+
+addLocale('ja-JP', jaMessages, { antd: jaAntd, momentLocale: 'ja' });
+setLocale('ja-JP', false);
+```
+
+`addLocale` merges messages into the internal `localeInfo`. You can pass extra data (like AntD locale and moment locale) so components using AntD/moment behave correctly.
+
+## 4. Disable i18n (turn off multi-language)
+
+To permanently disable multi-language support:
+
+1. In `src/app.tsx`'s `LocaleWrapper`, return a fixed AntD locale (ignore `localStorage` `umi_locale`):
+
+```ts
+const pick = (l: string | null) => {
+ return zhCN; // force Chinese
+};
+```
+
+2. Remove or hide the language switcher (for example, remove language menu items in `src/components/TopbarControls.tsx`).
+
+3. Optionally remove other JSON files in `src/locales` except the single target language to reduce build size.
+
+If you only want to temporarily prevent user switching, hide the switcher (step 2) and keep files intact for easy re-enable.
+
+## 5. Debugging & common issues
+
+- New language not appearing: restart dev server or use `addLocale`; ensure AntD locale mapping exists in `app.tsx`.
+- Missing translations: check all `src/locales/*.json` contain the key, and the `formatMessage` id is correct.
+- Want automated extraction of message ids: this repo does not include extraction scripts; consider integrating `lingui`, `babel-plugin-react-intl`, or other tooling and adding scripts to `package.json`.
+
+If you want, I can:
+- create an initial `src/locales/ja-JP.json` and update `TopbarControls`/`app.tsx` mappings; or
+- add a small example component that demonstrates runtime registration using `addLocale`. Tell me which one you prefer.
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..e981d4c
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+ antd-admin - An admin dashboard application demo built upon Ant Design and UmiJS
+
+
+
+
+
+
+
+
+
+
Loading...
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/layout.md b/docs/layout.md
new file mode 100644
index 0000000..6c415d0
--- /dev/null
+++ b/docs/layout.md
@@ -0,0 +1,60 @@
+# Layout
+
+## Add a new layout
+
+Take a new layout named `secondary` as an example to make the route starting with `secondary` use this layout.
+
+1. Add related configuration in `src/utils/config.js`. For details, please refer to [layouts](/configuration?id=layouts).
+
+```javascript
+ layouts: [
+ {
+ name: 'primary',
+ include: [/.*/],
+ exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
+ },
+ {
+ name: 'secondary',
+ include: [/(\/(en|zh))*\/secondary\/(.*)/],
+ },
+ ],
+```
+
+2. Add the `secondary` layout component to the `src/layouts/BaseLayout.js` file.
+
+```javascript
+ import SecondaryLayout from './SecondaryLayout'
+
+ const LayoutMap = {
+ primary: PrimaryLayout,
+ public: PublicLayout,
+ secondary: SecondaryLayout,
+ }
+```
+
+3. Add the `SecondaryLayout.js` file to the `src/layouts/` directory.
+
+```javascript
+ import React from 'react'
+
+ export default ({ children }) => {
+ return (
+
+
Secondary
+ {children}
+
+ )
+ }
+```
+
+4. Add a `secondary/index.js` file to the `src/pages/` directory.
+
+```javascript
+ import React from 'react'
+
+ export default ({ children }) => {
+ Return
Secondary page Content
+ }
+```
+
+5. Finally, start the development mode with `npm run dev`, then open the layout page in your browser (see dev server output for the actual URL), e.g. `/secondary/`.
diff --git a/docs/request.md b/docs/request.md
new file mode 100644
index 0000000..f41dbd3
--- /dev/null
+++ b/docs/request.md
@@ -0,0 +1,33 @@
+# HTTP requests
+
+This project uses a small fetch-based HTTP helper implemented at `src/utils/request.ts` (export default `api`). The helper centralizes:
+
+- Prefixing paths with `config.apiPrefix`.
+- Handling `params` (query string) and `body` (JSON or FormData).
+- Injecting an `Authorization` header from local storage when available.
+- Unified response parsing and error handling (expects backend responses in the form `{ success, message, data }`).
+
+Key behaviors
+
+- `api(path, options)` merges `config.apiPrefix` + `path` to build the URL.
+- If `options.params` is provided it's serialized and appended as query string.
+- `options.body` handling:
+ - FormData is sent as-is (do not set Content-Type manually).
+ - Strings and Blobs are sent directly.
+ - Plain objects are JSON.stringified and Content-Type defaults to `application/json`.
+- If a token exists in local storage (key `app-auth-token`), the helper injects an `Authorization: Bearer ` header unless one is already provided.
+- Responses are expected to be JSON with `{ success: boolean, message?: string, data: T }`. Non-success responses throw an Error and show a UI message (uses `antd`'s `message`).
+
+Usage (TypeScript-friendly):
+
+```ts
+import api from '@/utils/request';
+
+// GET with query params
+const page = await api('/users', { method: 'GET', params: { page: 1, pageSize: 10 } });
+
+// POST with JSON body
+const created = await api('/user', { method: 'POST', body: { name: 'Alice' } });
+```
+
+The helper returns the `data` field from successful responses. Check `src/utils/request.ts` for exact typings and behavior.
\ No newline at end of file
diff --git a/docs/sw.js b/docs/sw.js
new file mode 100644
index 0000000..cf6295c
--- /dev/null
+++ b/docs/sw.js
@@ -0,0 +1,83 @@
+/* ===========================================================
+ * docsify sw.js
+ * ===========================================================
+ * Copyright 2016 @huxpro
+ * Licensed under Apache 2.0
+ * Register service worker.
+ * ========================================================== */
+
+const RUNTIME = 'docsify'
+const HOSTNAME_WHITELIST = [
+ self.location.hostname,
+ 'fonts.gstatic.com',
+ 'fonts.googleapis.com',
+ 'unpkg.com'
+]
+
+// The Util Function to hack URLs of intercepted requests
+const getFixedUrl = (req) => {
+ var now = Date.now()
+ var url = new URL(req.url)
+
+ // 1. fixed http URL
+ // Just keep syncing with location.protocol
+ // fetch(httpURL) belongs to active mixed content.
+ // And fetch(httpRequest) is not supported yet.
+ url.protocol = self.location.protocol
+
+ // 2. add query for caching-busting.
+ // Github Pages served with Cache-Control: max-age=600
+ // max-age on mutable content is error-prone, with SW life of bugs can even extend.
+ // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
+ // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
+ if (url.hostname === self.location.hostname) {
+ url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
+ }
+ return url.href
+}
+
+/**
+ * @Lifecycle Activate
+ * New one activated when old isnt being used.
+ *
+ * waitUntil(): activating ====> activated
+ */
+self.addEventListener('activate', event => {
+ event.waitUntil(self.clients.claim())
+})
+
+/**
+ * @Functional Fetch
+ * All network requests are being intercepted here.
+ *
+ * void respondWith(Promise r)
+ */
+self.addEventListener('fetch', event => {
+ // Skip some of cross-origin requests, like those for Google Analytics.
+ if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
+ // Stale-while-revalidate
+ // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
+ // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
+ const cached = caches.match(event.request)
+ const fixedUrl = getFixedUrl(event.request)
+ const fetched = fetch(fixedUrl, { cache: 'no-store' })
+ const fetchedCopy = fetched.then(resp => resp.clone())
+
+ // Call respondWith() with whatever we get first.
+ // If the fetch fails (e.g disconnected), wait for the cache.
+ // If there’s nothing in cache, wait for the fetch.
+ // If neither yields a response, return offline pages.
+ event.respondWith(
+ Promise.race([fetched.catch(_ => cached), cached])
+ .then(resp => resp || fetched)
+ .catch(_ => { /* eat any errors */ })
+ )
+
+ // Update the cache with the version we fetched (only for ok status)
+ event.waitUntil(
+ Promise.all([fetchedCopy, caches.open(RUNTIME)])
+ .then(([response, cache]) => response.ok && cache.put(event.request, response))
+ .catch(_ => { /* eat any errors */ })
+ )
+ }
+})
\ No newline at end of file
diff --git a/docs/zh-cn/API-configuration.md b/docs/zh-cn/API-configuration.md
new file mode 100644
index 0000000..59fbf1b
--- /dev/null
+++ b/docs/zh-cn/API-configuration.md
@@ -0,0 +1,35 @@
+# 接口配置
+
+本项目使用基于 TypeScript 的按功能分割服务模块，位于 `src/services/`，所有服务通过共享的 HTTP 封装 `src/utils/request.ts`（默认导出为 `api` 函数）发起请求。
+
+为什么采用此模式？
+- 每个领域（user/admin/menu/dashboard）有独立函数，职责清晰。
+- 使用 TypeScript 提供输入/输出类型定义，便于维护（参见 `src/types`）。
+- 请求处理集中化（查询参数、JSON body、鉴权 header、统一响应格式等）在 `src/utils/request.ts`。
+
+示例（来自 `src/services/user.ts`）：
+
+```ts
+import type { PagedResponse, User } from '@/types/user';
+import api from '../utils/request';
+
+export async function listUsers(
+ params?: Record,
+): Promise> {
+ return api>('/users', { method: 'GET', params });
+}
+
+export async function createUser(values: Record): Promise {
+ return api('/user', { method: 'POST', body: values });
+}
+```
+
+使用方式：
+- 通过 `import { listUsers } from '@/services/user'` 导入命名函数。
+- `api(path, options)` 返回后端约定格式 `{ success, message, data }` 中的 `data` 字段。
+
+关于 `src/utils/request.ts`：
+- 会将 `config.apiPrefix` 与 `path` 拼接；支持 `params`（查询）、`body`（JSON 或 FormData）；若存在本地 token 则自动注入 `Authorization`。
+- 对非成功响应会抛出异常并在界面上显示消息（使用 `antd` 的 `message`）。
+
+如果你在迁移旧的 API 映射实现，建议按当前结构将功能拆分为小型服务模块并补充类型定义。
\ No newline at end of file
diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md
new file mode 100644
index 0000000..8910de9
--- /dev/null
+++ b/docs/zh-cn/README.md
@@ -0,0 +1,53 @@
+
-
+
+ 
+
+
+
+