@yarch/create-admin 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/bin/create-admin.mjs +245 -0
- package/package.json +20 -0
- package/templates/admin-antd/README.md +29 -0
- package/templates/admin-antd/archetype.json +12 -0
- package/templates/admin-antd/index.html +11 -0
- package/templates/admin-antd/package.json +26 -0
- package/templates/admin-antd/src/app/router.tsx +28 -0
- package/templates/admin-antd/src/components/page-container.tsx +10 -0
- package/templates/admin-antd/src/features/products/api.ts +13 -0
- package/templates/admin-antd/src/features/products/hooks/use-products.ts +19 -0
- package/templates/admin-antd/src/layouts/basic-layout.tsx +27 -0
- package/templates/admin-antd/src/main.tsx +12 -0
- package/templates/admin-antd/src/pages/dashboard.tsx +8 -0
- package/templates/admin-antd/src/pages/login.tsx +16 -0
- package/templates/admin-antd/src/pages/products.tsx +19 -0
- package/templates/admin-antd/src/stores/auth.ts +7 -0
- package/templates/admin-antd/src/types/index.ts +7 -0
- package/templates/admin-antd/src/ui/theme.ts +3 -0
- package/templates/admin-antd/tsconfig.json +16 -0
- package/templates/admin-antd/vite.config.ts +16 -0
- package/templates/admin-arco/README.md +29 -0
- package/templates/admin-arco/archetype.json +12 -0
- package/templates/admin-arco/index.html +11 -0
- package/templates/admin-arco/package.json +26 -0
- package/templates/admin-arco/src/app/router.tsx +28 -0
- package/templates/admin-arco/src/components/page-container.tsx +10 -0
- package/templates/admin-arco/src/features/products/api.ts +13 -0
- package/templates/admin-arco/src/features/products/hooks/use-products.ts +19 -0
- package/templates/admin-arco/src/layouts/basic-layout.tsx +26 -0
- package/templates/admin-arco/src/main.tsx +12 -0
- package/templates/admin-arco/src/pages/dashboard.tsx +8 -0
- package/templates/admin-arco/src/pages/login.tsx +16 -0
- package/templates/admin-arco/src/pages/products.tsx +19 -0
- package/templates/admin-arco/src/stores/auth.ts +7 -0
- package/templates/admin-arco/src/types/index.ts +7 -0
- package/templates/admin-arco/src/ui/theme.ts +3 -0
- package/templates/admin-arco/tsconfig.json +16 -0
- package/templates/admin-arco/vite.config.ts +16 -0
- package/templates/admin-semi/README.md +29 -0
- package/templates/admin-semi/archetype.json +12 -0
- package/templates/admin-semi/index.html +11 -0
- package/templates/admin-semi/package.json +26 -0
- package/templates/admin-semi/src/app/router.tsx +28 -0
- package/templates/admin-semi/src/components/page-container.tsx +10 -0
- package/templates/admin-semi/src/features/products/api.ts +13 -0
- package/templates/admin-semi/src/features/products/hooks/use-products.ts +19 -0
- package/templates/admin-semi/src/layouts/basic-layout.tsx +29 -0
- package/templates/admin-semi/src/main.tsx +12 -0
- package/templates/admin-semi/src/pages/dashboard.tsx +8 -0
- package/templates/admin-semi/src/pages/login.tsx +16 -0
- package/templates/admin-semi/src/pages/products.tsx +19 -0
- package/templates/admin-semi/src/stores/auth.ts +7 -0
- package/templates/admin-semi/src/types/index.ts +7 -0
- package/templates/admin-semi/src/ui/theme.ts +3 -0
- package/templates/admin-semi/tsconfig.json +16 -0
- package/templates/admin-semi/vite.config.ts +16 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{packageName}}",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "{{description}}",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "vite",
|
|
9
|
+
"build": "tsc --noEmit && vite build"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^19",
|
|
13
|
+
"react-dom": "^19",
|
|
14
|
+
"react-router-dom": "^7",
|
|
15
|
+
"@yarch/contract": "{{yarchContractDep}}",
|
|
16
|
+
"@yarch/react": "{{yarchReactDep}}",
|
|
17
|
+
"@arco-design/web-react": "^2"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@types/react": "^19",
|
|
21
|
+
"@types/react-dom": "^19",
|
|
22
|
+
"@vitejs/plugin-react": "^4",
|
|
23
|
+
"typescript": "^5.6",
|
|
24
|
+
"vite": "^6"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useNavigate, Routes, Route } from "react-router-dom";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
import { setupReactNavigator } from "@yarch/react";
|
|
4
|
+
import BasicLayout from "../layouts/basic-layout";
|
|
5
|
+
import Dashboard from "../pages/dashboard";
|
|
6
|
+
import Login from "../pages/login";
|
|
7
|
+
import Products from "../pages/products";
|
|
8
|
+
|
|
9
|
+
function NavigatorSetup() {
|
|
10
|
+
const navigate = useNavigate();
|
|
11
|
+
useEffect(() => { setupReactNavigator(navigate); }, [navigate]);
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export default function App() {
|
|
16
|
+
return (
|
|
17
|
+
<>
|
|
18
|
+
<NavigatorSetup />
|
|
19
|
+
<Routes>
|
|
20
|
+
<Route path="/login" element={<Login />} />
|
|
21
|
+
<Route path="/" element={<BasicLayout />}>
|
|
22
|
+
<Route index element={<Dashboard />} />
|
|
23
|
+
<Route path="products" element={<Products />} />
|
|
24
|
+
</Route>
|
|
25
|
+
</Routes>
|
|
26
|
+
</>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createClient } from "@yarch/contract";
|
|
2
|
+
import type { PageData } from "@yarch/contract";
|
|
3
|
+
import type { Product } from "../../types";
|
|
4
|
+
import { authStore } from "../../stores/auth";
|
|
5
|
+
|
|
6
|
+
const api = createClient({
|
|
7
|
+
baseUrl: "/api/v1",
|
|
8
|
+
getHeaders: () => ({ Authorization: `Bearer ${authStore.token}` }),
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export function fetchProducts(page = 1, pageSize = 20): Promise<PageData<Product>> {
|
|
12
|
+
return api.get<PageData<Product>>(`/products?page=${page}&pageSize=${pageSize}`);
|
|
13
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
import type { PageData } from "@yarch/contract";
|
|
3
|
+
import type { Product } from "../../../types";
|
|
4
|
+
import { fetchProducts } from "../api";
|
|
5
|
+
|
|
6
|
+
export function useProducts() {
|
|
7
|
+
const [data, setData] = useState<PageData<Product> | null>(null);
|
|
8
|
+
const [loading, setLoading] = useState(false);
|
|
9
|
+
const [error, setError] = useState<Error | null>(null);
|
|
10
|
+
const [page, setPage] = useState(1);
|
|
11
|
+
|
|
12
|
+
const load = useCallback(async (p: number) => {
|
|
13
|
+
setLoading(true); setError(null);
|
|
14
|
+
try { setData(await fetchProducts(p)); } catch (e) { setError(e as Error); } finally { setLoading(false); }
|
|
15
|
+
}, []);
|
|
16
|
+
|
|
17
|
+
useEffect(() => { load(page); }, [page, load]);
|
|
18
|
+
return { data, loading, error, page, setPage, reload: () => load(page) };
|
|
19
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Layout, Menu } from "@arco-design/web-react";
|
|
2
|
+
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
3
|
+
|
|
4
|
+
const MenuItem = Menu.Item;
|
|
5
|
+
|
|
6
|
+
export default function BasicLayout() {
|
|
7
|
+
const navigate = useNavigate();
|
|
8
|
+
const location = useLocation();
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<Layout style={{ minHeight: "100vh" }}>
|
|
12
|
+
<Layout.Sider>
|
|
13
|
+
<Menu selectedKeys={[location.pathname]} onClickMenuItem={(key) => navigate(key)}>
|
|
14
|
+
<MenuItem key="/">首页</MenuItem>
|
|
15
|
+
<MenuItem key="/products">商品</MenuItem>
|
|
16
|
+
</Menu>
|
|
17
|
+
</Layout.Sider>
|
|
18
|
+
<Layout>
|
|
19
|
+
<Layout.Header style={{ background: "#fff", padding: "0 24px" }} />
|
|
20
|
+
<Layout.Content style={{ padding: 24 }}>
|
|
21
|
+
<Outlet />
|
|
22
|
+
</Layout.Content>
|
|
23
|
+
</Layout>
|
|
24
|
+
</Layout>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import { BrowserRouter } from "react-router-dom";
|
|
4
|
+
import App from "./app/router";
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<BrowserRouter>
|
|
9
|
+
<App />
|
|
10
|
+
</BrowserRouter>
|
|
11
|
+
</React.StrictMode>
|
|
12
|
+
);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Layout, Menu, Table, Button } from "@arco-design/web-react";
|
|
2
|
+
import { useNavigate } from "react-router-dom";
|
|
3
|
+
import { authStore } from "../stores/auth";
|
|
4
|
+
|
|
5
|
+
export default function Login() {
|
|
6
|
+
const navigate = useNavigate();
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
|
|
9
|
+
<form onSubmit={(e: React.FormEvent) => { e.preventDefault(); authStore.token = "demo"; navigate("/"); }}>
|
|
10
|
+
<h2>登录</h2>
|
|
11
|
+
<p>演示——真实认证走 yarch-auth JWT</p>
|
|
12
|
+
<Button type="primary" htmlType="submit" long>登录</Button>
|
|
13
|
+
</form>
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Layout, Menu, Table, Button } from "@arco-design/web-react";
|
|
2
|
+
import { useProducts } from "../features/products/hooks/use-products";
|
|
3
|
+
|
|
4
|
+
export default function Products() {
|
|
5
|
+
const { data, loading, page, setPage } = useProducts();
|
|
6
|
+
const columns = [
|
|
7
|
+
{ title: "ID", dataIndex: "id", key: "id" },
|
|
8
|
+
{ title: "名称", dataIndex: "name", key: "name" },
|
|
9
|
+
{ title: "价格(分)", dataIndex: "priceCents", key: "priceCents" },
|
|
10
|
+
{ title: "库存", dataIndex: "stock", key: "stock" },
|
|
11
|
+
];
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div>
|
|
15
|
+
<h2>商品列表</h2>
|
|
16
|
+
<Table columns={columns} data={data?.list ?? []} rowKey="id" loading={loading} pagination={{ current: page, total: data?.total ?? 0, onChange: setPage }} />
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"esModuleInterop": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"jsx": "react-jsx",
|
|
11
|
+
"noEmit": true
|
|
12
|
+
},
|
|
13
|
+
"include": [
|
|
14
|
+
"src"
|
|
15
|
+
]
|
|
16
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import react from "@vitejs/plugin-react";
|
|
2
|
+
import { defineConfig } from "vite";
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [react()],
|
|
6
|
+
server: {
|
|
7
|
+
port: {{port}},
|
|
8
|
+
proxy: {
|
|
9
|
+
// 后端 API 反向代理（对接 yarch java/golang 栈的信封接口）
|
|
10
|
+
"/api/v1": {
|
|
11
|
+
target: "{{proxyTarget}}",
|
|
12
|
+
changeOrigin: true,
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# {{appName}}
|
|
2
|
+
|
|
3
|
+
> {{description}}
|
|
4
|
+
>
|
|
5
|
+
> 由 `@yarch/create-admin` 从 **admin-semi 档**（Vite + React + Semi Design）生成。
|
|
6
|
+
|
|
7
|
+
## 起跑
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm install
|
|
11
|
+
pnpm dev # http://localhost:{{port}}
|
|
12
|
+
pnpm build # tsc --noEmit + vite build
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 与后端联调
|
|
16
|
+
|
|
17
|
+
`vite.config.ts` 已把 `/api/v1` 反代到 `{{proxyTarget}}`，改 target 即可指向你的后端。
|
|
18
|
+
接口走 `@yarch/contract` 的信封解包（RestResponse / 错误码 / traceId / 401 跳转）。
|
|
19
|
+
|
|
20
|
+
## 登记与升级
|
|
21
|
+
|
|
22
|
+
1. **服务名登记**：`{{packageName}}` 须去 yarch 仓 `contract/registry.md` 二、服务名登记表登记（PR 即登记）；
|
|
23
|
+
2. **@yarch 底座依赖**：若 package.json 中为 `^x.y.z` 版本依赖——升级底座 = `pnpm update @yarch/contract @yarch/react`；若为 `file:…` 本地路径（yarch 发版前的过渡形态）——正式发版后替换为 `^x.y.z` 并重跑 `pnpm install`。
|
|
24
|
+
|
|
25
|
+
## 结构纪律（depcruise 同款口径）
|
|
26
|
+
|
|
27
|
+
- `pages/` 薄入口：只组合 `features/`，不得直调 `features/*/api.ts`；
|
|
28
|
+
- `ui/`、`components/` 不得反向依赖 `features/`、`pages/`；
|
|
29
|
+
- 有 JSX 用 `.tsx`，纯逻辑/类型 `.ts`。
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "yarch 中后台工程模板 · 默认档 Semi Design（抖音系）：Vite + React 19 + react-router 7 + @yarch 契约底座",
|
|
3
|
+
"variables": [
|
|
4
|
+
{ "name": "packageName", "desc": "工程名（= npm 包名 = registry.md 服务名，一-1 校验）", "required": true, "default": "" },
|
|
5
|
+
{ "name": "appName", "desc": "展示名（index.html 标题）", "required": false, "default": "= packageName" },
|
|
6
|
+
{ "name": "description", "desc": "工程描述（package.json）", "required": false, "default": "" },
|
|
7
|
+
{ "name": "port", "desc": "vite dev 端口", "required": false, "default": "5173" },
|
|
8
|
+
{ "name": "proxyTarget", "desc": "/api/v1 反向代理目标", "required": false, "default": "http://localhost:8080" },
|
|
9
|
+
{ "name": "yarchContractDep", "desc": "@yarch/contract 依赖（发版前 file: 本地路径，发版后 ^x.y.z）", "required": false, "default": "" },
|
|
10
|
+
{ "name": "yarchReactDep", "desc": "@yarch/react 依赖（同上）", "required": false, "default": "" }
|
|
11
|
+
]
|
|
12
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{packageName}}",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "{{description}}",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "vite",
|
|
9
|
+
"build": "tsc --noEmit && vite build"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^19",
|
|
13
|
+
"react-dom": "^19",
|
|
14
|
+
"react-router-dom": "^7",
|
|
15
|
+
"@yarch/contract": "{{yarchContractDep}}",
|
|
16
|
+
"@yarch/react": "{{yarchReactDep}}",
|
|
17
|
+
"@douyinfe/semi-ui": "^2"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@types/react": "^19",
|
|
21
|
+
"@types/react-dom": "^19",
|
|
22
|
+
"@vitejs/plugin-react": "^4",
|
|
23
|
+
"typescript": "^5.6",
|
|
24
|
+
"vite": "^6"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useNavigate, Routes, Route } from "react-router-dom";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
import { setupReactNavigator } from "@yarch/react";
|
|
4
|
+
import BasicLayout from "../layouts/basic-layout";
|
|
5
|
+
import Dashboard from "../pages/dashboard";
|
|
6
|
+
import Login from "../pages/login";
|
|
7
|
+
import Products from "../pages/products";
|
|
8
|
+
|
|
9
|
+
function NavigatorSetup() {
|
|
10
|
+
const navigate = useNavigate();
|
|
11
|
+
useEffect(() => { setupReactNavigator(navigate); }, [navigate]);
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export default function App() {
|
|
16
|
+
return (
|
|
17
|
+
<>
|
|
18
|
+
<NavigatorSetup />
|
|
19
|
+
<Routes>
|
|
20
|
+
<Route path="/login" element={<Login />} />
|
|
21
|
+
<Route path="/" element={<BasicLayout />}>
|
|
22
|
+
<Route index element={<Dashboard />} />
|
|
23
|
+
<Route path="products" element={<Products />} />
|
|
24
|
+
</Route>
|
|
25
|
+
</Routes>
|
|
26
|
+
</>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createClient } from "@yarch/contract";
|
|
2
|
+
import type { PageData } from "@yarch/contract";
|
|
3
|
+
import type { Product } from "../../types";
|
|
4
|
+
import { authStore } from "../../stores/auth";
|
|
5
|
+
|
|
6
|
+
const api = createClient({
|
|
7
|
+
baseUrl: "/api/v1",
|
|
8
|
+
getHeaders: () => ({ Authorization: `Bearer ${authStore.token}` }),
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
export function fetchProducts(page = 1, pageSize = 20): Promise<PageData<Product>> {
|
|
12
|
+
return api.get<PageData<Product>>(`/products?page=${page}&pageSize=${pageSize}`);
|
|
13
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
import type { PageData } from "@yarch/contract";
|
|
3
|
+
import type { Product } from "../../../types";
|
|
4
|
+
import { fetchProducts } from "../api";
|
|
5
|
+
|
|
6
|
+
export function useProducts() {
|
|
7
|
+
const [data, setData] = useState<PageData<Product> | null>(null);
|
|
8
|
+
const [loading, setLoading] = useState(false);
|
|
9
|
+
const [error, setError] = useState<Error | null>(null);
|
|
10
|
+
const [page, setPage] = useState(1);
|
|
11
|
+
|
|
12
|
+
const load = useCallback(async (p: number) => {
|
|
13
|
+
setLoading(true); setError(null);
|
|
14
|
+
try { setData(await fetchProducts(p)); } catch (e) { setError(e as Error); } finally { setLoading(false); }
|
|
15
|
+
}, []);
|
|
16
|
+
|
|
17
|
+
useEffect(() => { load(page); }, [page, load]);
|
|
18
|
+
return { data, loading, error, page, setPage, reload: () => load(page) };
|
|
19
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Layout, Nav } from "@douyinfe/semi-ui";
|
|
2
|
+
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
3
|
+
|
|
4
|
+
export default function BasicLayout() {
|
|
5
|
+
const navigate = useNavigate();
|
|
6
|
+
const location = useLocation();
|
|
7
|
+
const { Sider, Header, Content } = Layout;
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<Layout style={{ minHeight: "100vh" }}>
|
|
11
|
+
<Sider>
|
|
12
|
+
<Nav
|
|
13
|
+
selectedKeys={[location.pathname]}
|
|
14
|
+
items={[
|
|
15
|
+
{ itemKey: "/", text: "首页" },
|
|
16
|
+
{ itemKey: "/products", text: "商品" },
|
|
17
|
+
]}
|
|
18
|
+
onSelect={(data) => navigate(String(data.itemKey))}
|
|
19
|
+
/>
|
|
20
|
+
</Sider>
|
|
21
|
+
<Layout>
|
|
22
|
+
<Header style={{ background: "#fff", padding: "0 24px" }} />
|
|
23
|
+
<Content style={{ padding: 24 }}>
|
|
24
|
+
<Outlet />
|
|
25
|
+
</Content>
|
|
26
|
+
</Layout>
|
|
27
|
+
</Layout>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import { BrowserRouter } from "react-router-dom";
|
|
4
|
+
import App from "./app/router";
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<BrowserRouter>
|
|
9
|
+
<App />
|
|
10
|
+
</BrowserRouter>
|
|
11
|
+
</React.StrictMode>
|
|
12
|
+
);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Layout, Nav, Table, Button } from "@douyinfe/semi-ui";
|
|
2
|
+
import { useNavigate } from "react-router-dom";
|
|
3
|
+
import { authStore } from "../stores/auth";
|
|
4
|
+
|
|
5
|
+
export default function Login() {
|
|
6
|
+
const navigate = useNavigate();
|
|
7
|
+
return (
|
|
8
|
+
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
|
|
9
|
+
<form onSubmit={(e: React.FormEvent) => { e.preventDefault(); authStore.token = "demo"; navigate("/"); }}>
|
|
10
|
+
<h2>登录</h2>
|
|
11
|
+
<p>演示——真实认证走 yarch-auth JWT</p>
|
|
12
|
+
<Button theme="solid" type="primary" htmlType="submit" block>登录</Button>
|
|
13
|
+
</form>
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Layout, Nav, Table, Button } from "@douyinfe/semi-ui";
|
|
2
|
+
import { useProducts } from "../features/products/hooks/use-products";
|
|
3
|
+
|
|
4
|
+
export default function Products() {
|
|
5
|
+
const { data, loading, page, setPage } = useProducts();
|
|
6
|
+
const columns = [
|
|
7
|
+
{ title: "ID", dataIndex: "id", key: "id" },
|
|
8
|
+
{ title: "名称", dataIndex: "name", key: "name" },
|
|
9
|
+
{ title: "价格(分)", dataIndex: "priceCents", key: "priceCents" },
|
|
10
|
+
{ title: "库存", dataIndex: "stock", key: "stock" },
|
|
11
|
+
];
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div>
|
|
15
|
+
<h2>商品列表</h2>
|
|
16
|
+
<Table columns={columns} dataSource={data?.list ?? []} rowKey="id" loading={loading} pagination={{ currentPage: page, total: data?.total ?? 0, onPageChange: setPage }} />
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"esModuleInterop": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"jsx": "react-jsx",
|
|
11
|
+
"noEmit": true
|
|
12
|
+
},
|
|
13
|
+
"include": [
|
|
14
|
+
"src"
|
|
15
|
+
]
|
|
16
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import react from "@vitejs/plugin-react";
|
|
2
|
+
import { defineConfig } from "vite";
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [react()],
|
|
6
|
+
server: {
|
|
7
|
+
port: {{port}},
|
|
8
|
+
proxy: {
|
|
9
|
+
// 后端 API 反向代理（对接 yarch java/golang 栈的信封接口）
|
|
10
|
+
"/api/v1": {
|
|
11
|
+
target: "{{proxyTarget}}",
|
|
12
|
+
changeOrigin: true,
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
});
|