init
This commit is contained in:
16
.gitignore
vendored
Normal file
16
.gitignore
vendored
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# Local
|
||||||
|
.DS_Store
|
||||||
|
*.local
|
||||||
|
*.log*
|
||||||
|
|
||||||
|
# Dist
|
||||||
|
node_modules
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Profile
|
||||||
|
.rspack-profile-*/
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
4
.prettierignore
Normal file
4
.prettierignore
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# Lock files
|
||||||
|
package-lock.json
|
||||||
|
pnpm-lock.yaml
|
||||||
|
yarn.lock
|
||||||
3
.prettierrc
Normal file
3
.prettierrc
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true
|
||||||
|
}
|
||||||
78
AGENTS.md
Normal file
78
AGENTS.md
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
# AGENTS.md
|
||||||
|
|
||||||
|
You are an expert in JavaScript, Rsbuild, and web application development. You write maintainable, performant, and accessible code.
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- **React 19** + **TypeScript** — frontend framework and type system
|
||||||
|
- **Rsbuild 2** — build tool (wraps Rspack), configured in `rsbuild.config.ts`
|
||||||
|
- **React Router v7** (`react-router`) — client-side routing
|
||||||
|
- **antd 6** + **@ant-design/icons 6** — UI component library and icon set
|
||||||
|
- **pnpm** — package manager
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
- `pnpm run dev` - Start the dev server (auto-opens http://localhost:3000)
|
||||||
|
- `pnpm run build` - Build the app for production (output: `dist/`)
|
||||||
|
- `pnpm run preview` - Preview the production build locally
|
||||||
|
- `pnpm run lint` - Lint TypeScript/TSX files with ESLint
|
||||||
|
- `pnpm run format` - Format all files with Prettier
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
index.tsx # App entry point — mounts React root to #root
|
||||||
|
App.tsx # Root component — renders <RouterProvider>
|
||||||
|
App.css # Root component styles
|
||||||
|
router.tsx # Route config (createBrowserRouter)
|
||||||
|
env.d.ts # Rsbuild environment type declarations
|
||||||
|
layouts/
|
||||||
|
RootLayout.tsx # Root layout with nav links and <Outlet />
|
||||||
|
pages/
|
||||||
|
Home.tsx # "/" index page
|
||||||
|
About.tsx # "/about" page
|
||||||
|
NotFound.tsx # "*" catch-all 404 page
|
||||||
|
public/
|
||||||
|
favicon.png
|
||||||
|
rsbuild.config.ts # Build configuration
|
||||||
|
eslint.config.mjs # ESLint flat config (TS/TSX only, dist/ ignored)
|
||||||
|
tsconfig.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## Routing
|
||||||
|
|
||||||
|
Uses **React Router v7** (`react-router`) with `createBrowserRouter`.
|
||||||
|
|
||||||
|
- Route config lives in `src/router.tsx`
|
||||||
|
- `RootLayout` wraps all routes — add shared nav/header/footer there
|
||||||
|
- Add new pages under `src/pages/`, register them in `src/router.tsx`
|
||||||
|
|
||||||
|
## TypeScript Configuration
|
||||||
|
|
||||||
|
- `noUnusedLocals` and `noUnusedParameters` are enabled — unused variables/parameters are errors
|
||||||
|
- `verbatimModuleSyntax` is enabled — type-only imports must use `import type`
|
||||||
|
- `moduleResolution: "bundler"` — use bundler-style module resolution
|
||||||
|
|
||||||
|
## Code Style
|
||||||
|
|
||||||
|
- **Single quotes** (`singleQuote: true` in `.prettierrc`)
|
||||||
|
- ESLint applies to `**/*.{ts,tsx}` only, with `react-hooks` and `react-refresh` plugins enabled
|
||||||
|
|
||||||
|
## UI Components (antd)
|
||||||
|
|
||||||
|
- Import components directly from `antd`, icons from `@ant-design/icons` — tree-shaking is automatic
|
||||||
|
- To customize the theme, wrap the app with `ConfigProvider` in `App.tsx`:
|
||||||
|
```tsx
|
||||||
|
import { ConfigProvider } from 'antd';
|
||||||
|
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</ConfigProvider>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Docs
|
||||||
|
|
||||||
|
- Rsbuild: https://rsbuild.rs/llms.txt
|
||||||
|
- Rspack: https://rspack.rs/llms.txt
|
||||||
|
- antd v6 完整文档(中文): https://ant.design/llms-full-cn.txt
|
||||||
|
- antd v6 组件单页(中文): https://ant.design/components/{组件名}-cn.md(如 button-cn.md)
|
||||||
36
README.md
Normal file
36
README.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# Rsbuild project
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Get started
|
||||||
|
|
||||||
|
Start the dev server, and the app will be available at [http://localhost:3000](http://localhost:3000).
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Build the app for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Preview the production build locally:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## Learn more
|
||||||
|
|
||||||
|
To learn more about Rsbuild, check out the following resources:
|
||||||
|
|
||||||
|
- [Rsbuild documentation](https://rsbuild.rs) - explore Rsbuild features and APIs.
|
||||||
|
- [Rsbuild GitHub repository](https://github.com/web-infra-dev/rsbuild) - your feedback and contributions are welcome!
|
||||||
22
eslint.config.mjs
Normal file
22
eslint.config.mjs
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import js from '@eslint/js';
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import globals from 'globals';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat['recommended-latest'],
|
||||||
|
reactRefresh.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "taotie-web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "rsbuild build",
|
||||||
|
"dev": "rsbuild --open",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "rsbuild preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^6.2.3",
|
||||||
|
"antd": "^6.4.2",
|
||||||
|
"react": "^19.2.6",
|
||||||
|
"react-dom": "^19.2.6",
|
||||||
|
"react-router": "^7.15.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@rsbuild/core": "^2.0.5",
|
||||||
|
"@rsbuild/plugin-react": "^2.0.0",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"eslint": "^10.3.0",
|
||||||
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
|
"globals": "^17.6.0",
|
||||||
|
"prettier": "^3.8.3",
|
||||||
|
"typescript": "^6.0.3",
|
||||||
|
"typescript-eslint": "^8.59.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
2349
pnpm-lock.yaml
generated
Normal file
2349
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
7
rsbuild.config.ts
Normal file
7
rsbuild.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from '@rsbuild/core';
|
||||||
|
import { pluginReact } from '@rsbuild/plugin-react';
|
||||||
|
|
||||||
|
// Docs: https://rsbuild.rs/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [pluginReact()],
|
||||||
|
});
|
||||||
26
src/App.css
Normal file
26
src/App.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
background-image: linear-gradient(to bottom, #020917, #101725);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 3.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
6
src/App.tsx
Normal file
6
src/App.tsx
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { RouterProvider } from 'react-router';
|
||||||
|
import router from './router';
|
||||||
|
|
||||||
|
const App = () => <RouterProvider router={router} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
11
src/env.d.ts
vendored
Normal file
11
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types="@rsbuild/core/types" />
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Imports the SVG file as a React component.
|
||||||
|
* @requires [@rsbuild/plugin-svgr](https://npmjs.com/package/@rsbuild/plugin-svgr)
|
||||||
|
*/
|
||||||
|
declare module '*.svg?react' {
|
||||||
|
import type React from 'react';
|
||||||
|
const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
||||||
|
export default ReactComponent;
|
||||||
|
}
|
||||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const rootEl = document.getElementById('root');
|
||||||
|
if (rootEl) {
|
||||||
|
const root = ReactDOM.createRoot(rootEl);
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/layouts/RootLayout.tsx
Normal file
18
src/layouts/RootLayout.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { Link, Outlet } from 'react-router';
|
||||||
|
|
||||||
|
const RootLayout = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<nav>
|
||||||
|
<Link to="/">首页</Link>
|
||||||
|
{' | '}
|
||||||
|
<Link to="/about">关于</Link>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RootLayout;
|
||||||
10
src/pages/About.tsx
Normal file
10
src/pages/About.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
const About = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>关于</h1>
|
||||||
|
<p>这是关于页面。</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
10
src/pages/Home.tsx
Normal file
10
src/pages/Home.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
const Home = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>首页</h1>
|
||||||
|
<p>欢迎来到 TaoTie。</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
14
src/pages/NotFound.tsx
Normal file
14
src/pages/NotFound.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
|
const NotFound = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>404 - 页面不存在</h1>
|
||||||
|
<p>
|
||||||
|
<Link to="/">返回首页</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotFound;
|
||||||
19
src/router.tsx
Normal file
19
src/router.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { createBrowserRouter } from 'react-router';
|
||||||
|
import RootLayout from './layouts/RootLayout';
|
||||||
|
import About from './pages/About';
|
||||||
|
import Home from './pages/Home';
|
||||||
|
import NotFound from './pages/NotFound';
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <RootLayout />,
|
||||||
|
children: [
|
||||||
|
{ index: true, element: <Home /> },
|
||||||
|
{ path: 'about', element: <About /> },
|
||||||
|
{ path: '*', element: <NotFound /> },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default router;
|
||||||
22
tsconfig.json
Normal file
22
tsconfig.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["DOM", "ES2020"],
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"target": "ES2020",
|
||||||
|
"noEmit": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
|
||||||
|
/* modules */
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
|
||||||
|
/* type checking */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user