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