kevisual/vite-react-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): add showBaseHeader state and conditional rendering in BaseHeader component

Browse Source
This commit is contained in:
熊潇
2026-02-26 04:02:59 +08:00
parent bdac089a85
commit cf3fe611eb
4 changed files with 60 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@@ -18,10 +18,10 @@
"license": "MIT",
"dependencies": {
"@base-ui/react": "^1.2.0",
"@kevisual/api": "^0.0.59",
"@kevisual/api": "^0.0.60",
"@kevisual/context": "^0.0.8",
"@kevisual/router": "0.0.84",
"@tanstack/react-router": "^1.162.8",
"@tanstack/react-router": "^1.163.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
@@ -42,11 +42,11 @@
},
"devDependencies": {
"@kevisual/kv-login": "^0.1.15",
"@kevisual/query": "0.0.49",
"@kevisual/query": "0.0.52",
"@kevisual/types": "^0.0.12",
"@tailwindcss/vite": "^4.2.1",
"@tanstack/react-router-devtools": "^1.162.8",
"@tanstack/router-plugin": "^1.162.8",
"@tanstack/react-router-devtools": "^1.163.2",
"@tanstack/router-plugin": "^1.163.2",
"@types/node": "^25.3.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",

94
pnpm-lock.yaml generated
View File

@@ -12,8 +12,8 @@ importers:
specifier: ^1.2.0
version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@kevisual/api':
specifier: ^0.0.59
version: 0.0.59(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
specifier: ^0.0.60
version: 0.0.60(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))
'@kevisual/context':
specifier: ^0.0.8
version: 0.0.8
@@ -21,8 +21,8 @@ importers:
specifier: 0.0.84
version: 0.0.84
'@tanstack/react-router':
specifier: ^1.162.8
version: 1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
specifier: ^1.163.2
version: 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
@@ -70,8 +70,8 @@ importers:
specifier: ^0.1.15
version: 0.1.15
'@kevisual/query':
specifier: 0.0.49
version: 0.0.49
specifier: 0.0.52
version: 0.0.52
'@kevisual/types':
specifier: ^0.0.12
version: 0.0.12
@@ -79,11 +79,11 @@ importers:
specifier: ^4.2.1
version: 4.2.1(vite@8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))
'@tanstack/react-router-devtools':
specifier: ^1.162.8
version: 1.162.8(@tanstack/react-router@1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.162.6)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
specifier: ^1.163.2
version: 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.163.2)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tanstack/router-plugin':
specifier: ^1.162.8
version: 1.162.8(@tanstack/react-router@1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))
specifier: ^1.163.2
version: 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))
'@types/node':
specifier: ^25.3.0
version: 25.3.0
@@ -433,8 +433,8 @@ packages:
'@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
'@kevisual/api@0.0.59':
resolution: {integrity: sha512-2w6GBG2mS92dz8afB0hLfjTw8lBGD5oXU5bw/QglFugHHp24fISZkEW1Hc+jP/jOiYlMzphws2/31DIXdDoGkg==}
'@kevisual/api@0.0.60':
resolution: {integrity: sha512-NTFDx1ns/iGli2fUJLJZRWu8nf5VkXV+sOQUqGGAJvrvGATvXSuITu6mD4P/aDQakx4hzQUPr9wDTZoNk7+RqQ==}
'@kevisual/context@0.0.8':
resolution: {integrity: sha512-DTJpyHI34NE76B7g6f+QlIqiCCyqI2qkBMQE736dzeRDGxOjnbe2iQY9W+Rt2PE6kmymM3qyOmSfNovyWyWrkA==}
@@ -448,8 +448,8 @@ packages:
'@kevisual/load@0.0.6':
resolution: {integrity: sha512-+3YTFehRcZ1haGel5DKYMUwmi5i6f2psyaPZlfkKU/cOXgkpwoG9/BEqPCnPjicKqqnksEpixVRkyHJ+5bjLVA==}
'@kevisual/query@0.0.49':
resolution: {integrity: sha512-GrWW+QlBO5lkiqvb7PjOstNtpTQVSR74EHHWjm7YoL9UdT1wuPQXGUApZHmMBSh3NIWCf0AL2G1hPWZMC7YeOQ==}
'@kevisual/query@0.0.52':
resolution: {integrity: sha512-m1UbyDTIxtfAQXM+EqhXA4ytE2V8rV8mXTZVBwzfW9O6+gtvAcRY7K1YYxfewTSXLVh9nwvfHe0KQ8MDL5ukyw==}
'@kevisual/router@0.0.84':
resolution: {integrity: sha512-l/TUFuqTJegB/S3FZQRBMUoz0Spvg8EzV3C/kBi/VO9KKCzjqZDVvhZJJbTQh9879CBY6vUy1ajo9WcLYnwbNA==}
@@ -853,20 +853,20 @@ packages:
resolution: {integrity: sha512-Kp/WSt411ZWYvgXy6uiv5RmhHrz9cAml05AQPrtdAp7eUqvIDbMGPnML25OKbzR3RJ1q4wgENxDTvlGPa9+Mww==}
engines: {node: '>=20.19'}
'@tanstack/react-router-devtools@1.162.8':
resolution: {integrity: sha512-dDohOU8eNbCukLQNcuocCTnvwSu8Z1XwbKvPc4U7KDYoUTUlJls48fXl5y/ENThK/nZEsA7i3oCy1BcX42OOlw==}
'@tanstack/react-router-devtools@1.163.2':
resolution: {integrity: sha512-gk/tC+vx8eoNNIM27vfb/bZTXQjpopw7tZA4WkRQWLh9A8PG3V6QjMQysbPcRRO5m7KtdCbTk51ZG4ERi0J1kA==}
engines: {node: '>=20.19'}
peerDependencies:
'@tanstack/react-router': ^1.162.8
'@tanstack/router-core': ^1.162.6
'@tanstack/react-router': ^1.163.2
'@tanstack/router-core': ^1.163.2
react: '>=18.0.0 || >=19.0.0'
react-dom: '>=18.0.0 || >=19.0.0'
peerDependenciesMeta:
'@tanstack/router-core':
optional: true
'@tanstack/react-router@1.162.8':
resolution: {integrity: sha512-WunoknGI5ielJ833yl/F7Vq4nv/OWzrJVBsMgyxX16Db1DwVvX/B5zTg8EMjdZUOJ7ONpvur3t4aq7KQiYRagQ==}
'@tanstack/react-router@1.163.2':
resolution: {integrity: sha512-1LosUlpL2mRMWxUZXmkEg5+Br5P5j9TrLngqRgHVbZoFkjnbcj1x9fQN2OVLrBv9Npw97NRsHeJljnAH/c7oSw==}
engines: {node: '>=20.19'}
peerDependencies:
react: '>=18.0.0 || >=19.0.0'
@@ -878,30 +878,30 @@ packages:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
'@tanstack/router-core@1.162.6':
resolution: {integrity: sha512-WFMNysDsDtnlM0G0L4LPWJuvpGatlPvBLGlPnieWYKem/Ed4mRHu7Hqw78MR/CMuFSRi9Gvv91/h8F3EVswAJw==}
'@tanstack/router-core@1.163.2':
resolution: {integrity: sha512-mD0Pav6kcpS317XSJN+wCZaxLLngDhlwgzPNca56dWCp8YKPEvhhj/Zdl+LdRlJQ2VJ5BOy7FbOV1hErc9Nj5Q==}
engines: {node: '>=20.19'}
'@tanstack/router-devtools-core@1.162.6':
resolution: {integrity: sha512-ni+9XmQOg9ale1e6FnhNrBymVVQAkzQ02SfAB6MgobXLp97MHiBk7d0k7DkoyVLk3tXRqmrCERWYRC8IGrcQmw==}
'@tanstack/router-devtools-core@1.163.2':
resolution: {integrity: sha512-IrbSK30AtMOgCLXTbvhnVsU6BGjhwB8EjfZIQLtUPDvFsP0RH3/2ZiWRA3a0EsQhxkl+fxIVByVP7wgyRzkZPQ==}
engines: {node: '>=20.19'}
peerDependencies:
'@tanstack/router-core': ^1.162.6
'@tanstack/router-core': ^1.163.2
csstype: ^3.0.10
peerDependenciesMeta:
csstype:
optional: true
'@tanstack/router-generator@1.162.6':
resolution: {integrity: sha512-mzkD3kfPW50xgX1hI8YrQx76+hshsUmpI9fVvS741L0cRQKH7bCIYTvcNHkz3sftZwmjt/lh+k7arV1AMLaWhA==}
'@tanstack/router-generator@1.163.2':
resolution: {integrity: sha512-6LjU3+8iKEgt8iOaYCmCnQCs0jsOhc7z8fa1yAYlj3s82uYWv3g5CB9mwv8wZXblXBQWOl+hW4PI6WNjP/CK9w==}
engines: {node: '>=20.19'}
'@tanstack/router-plugin@1.162.8':
resolution: {integrity: sha512-u6ZqYEjIA8jXge6JSl5UFFYPzVRciee0vwDwtkIF1Sb+G4cDdDaEjYQ4aN1/va8D7n3LptYvSMU8SeGkX+9slA==}
'@tanstack/router-plugin@1.163.2':
resolution: {integrity: sha512-SrVILMz/c15RYWxIMG+bf/glLbP/O9DUxOg0E7bo9pooBxGPvgWSlEzHNjhVekLhK5l7fiuQZzKsfksVeIEqDA==}
engines: {node: '>=20.19'}
peerDependencies:
'@rsbuild/core': '>=1.0.2'
'@tanstack/react-router': ^1.162.8
'@tanstack/react-router': ^1.163.2
vite: '>=5.0.0 || >=6.0.0 || >=7.0.0'
vite-plugin-solid: ^2.11.10
webpack: '>=5.92.0'
@@ -1846,7 +1846,7 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
'@kevisual/api@0.0.59(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
'@kevisual/api@0.0.60(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(use-sync-external-store@1.6.0(react@19.2.4))':
dependencies:
'@kevisual/context': 0.0.8
'@kevisual/js-filter': 0.0.5
@@ -1877,7 +1877,7 @@ snapshots:
dependencies:
eventemitter3: 5.0.4
'@kevisual/query@0.0.49': {}
'@kevisual/query@0.0.52': {}
'@kevisual/router@0.0.84':
dependencies:
@@ -2178,22 +2178,22 @@ snapshots:
'@tanstack/history@1.161.4': {}
'@tanstack/react-router-devtools@1.162.8(@tanstack/react-router@1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.162.6)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
'@tanstack/react-router-devtools@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@tanstack/router-core@1.163.2)(csstype@3.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@tanstack/react-router': 1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tanstack/router-devtools-core': 1.162.6(@tanstack/router-core@1.162.6)(csstype@3.2.3)
'@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tanstack/router-devtools-core': 1.163.2(@tanstack/router-core@1.163.2)(csstype@3.2.3)
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
optionalDependencies:
'@tanstack/router-core': 1.162.6
'@tanstack/router-core': 1.163.2
transitivePeerDependencies:
- csstype
'@tanstack/react-router@1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
'@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@tanstack/history': 1.161.4
'@tanstack/react-store': 0.9.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tanstack/router-core': 1.162.6
'@tanstack/router-core': 1.163.2
isbot: 5.1.35
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
@@ -2207,7 +2207,7 @@ snapshots:
react-dom: 19.2.4(react@19.2.4)
use-sync-external-store: 1.6.0(react@19.2.4)
'@tanstack/router-core@1.162.6':
'@tanstack/router-core@1.163.2':
dependencies:
'@tanstack/history': 1.161.4
'@tanstack/store': 0.9.1
@@ -2217,18 +2217,18 @@ snapshots:
tiny-invariant: 1.3.3
tiny-warning: 1.0.3
'@tanstack/router-devtools-core@1.162.6(@tanstack/router-core@1.162.6)(csstype@3.2.3)':
'@tanstack/router-devtools-core@1.163.2(@tanstack/router-core@1.163.2)(csstype@3.2.3)':
dependencies:
'@tanstack/router-core': 1.162.6
'@tanstack/router-core': 1.163.2
clsx: 2.1.1
goober: 2.1.18(csstype@3.2.3)
tiny-invariant: 1.3.3
optionalDependencies:
csstype: 3.2.3
'@tanstack/router-generator@1.162.6':
'@tanstack/router-generator@1.163.2':
dependencies:
'@tanstack/router-core': 1.162.6
'@tanstack/router-core': 1.163.2
'@tanstack/router-utils': 1.161.4
'@tanstack/virtual-file-routes': 1.161.4
prettier: 3.8.1
@@ -2239,7 +2239,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@tanstack/router-plugin@1.162.8(@tanstack/react-router@1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))':
'@tanstack/router-plugin@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0))':
dependencies:
'@babel/core': 7.29.0
'@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
@@ -2247,15 +2247,15 @@ snapshots:
'@babel/template': 7.28.6
'@babel/traverse': 7.29.0
'@babel/types': 7.29.0
'@tanstack/router-core': 1.162.6
'@tanstack/router-generator': 1.162.6
'@tanstack/router-core': 1.163.2
'@tanstack/router-generator': 1.163.2
'@tanstack/router-utils': 1.161.4
'@tanstack/virtual-file-routes': 1.161.4
chokidar: 3.6.0
unplugin: 2.3.11
zod: 3.25.76
optionalDependencies:
'@tanstack/react-router': 1.162.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
vite: 8.0.0-beta.15(@types/node@25.3.0)(esbuild@0.27.3)(jiti@2.6.1)(tsx@4.21.0)
transitivePeerDependencies:
- supports-color

4
src/pages/auth/modules/BaseHeader.tsx
View File

@@ -9,6 +9,7 @@ export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
me: state.me,
clearMe: state.clearMe,
links: state.links,
showBaseHeader: state.showBaseHeader,
})));
const navigate = useNavigate();
const meInfo = useMemo(() => {
@@ -48,6 +49,9 @@ export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
</div>
)
}, [store.me, store.clearMe])
if (!store.showBaseHeader) {
return null;
}
return (
<>
<div className="flex gap-2 text-lg w-full h-12 items-center justify-between bg-gray-200">

4
src/pages/auth/store.ts
View File

@@ -35,6 +35,8 @@ export type LayoutStore = {
setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
links: HeaderLink[];
setLinks: (links: HeaderLink[]) => void;
showBaseHeader: boolean;
setShowBaseHeader: (showBaseHeader: boolean) => void;
};
type HeaderLink = {
title?: string;
@@ -103,4 +105,6 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
})),
links: [{ title: '', href: '/', key: 'home' }],
setLinks: (links) => set({ links }),
showBaseHeader: true,
setShowBaseHeader: (showBaseHeader) => set({ showBaseHeader }),
}));