更新 package.json 和 pnpm-lock.yaml，添加 class-variance-authority 依赖；修改 main.tsx 中的 basename 引入方式；新增 theme.css 样式文件

package.json

@@ -9,7 +9,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "ui": "pnpm dlx shadcn@latest add ",
-    "pub": "envision deploy ./dist -k vite-react -v 0.0.1"
+    "pub": "envision deploy ./dist -k vite-react -v 0.0.1 -y y -u"
   },
   "files": [
     "dist"
@@ -20,6 +20,7 @@
     "@kevisual/router": "0.0.70",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-router": "^1.158.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "es-toolkit": "^1.44.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@tanstack/react-router':
         specifier: ^1.158.0
         version: 1.158.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1197,6 +1200,9 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clsx@1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
@@ -2910,6 +2916,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clsx@1.2.1: {}
 
   clsx@2.1.1: {}

src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./styles/theme.css";
 
 @custom-variant dark (&:is(.dark *));
 

src/main.tsx

@@ -2,10 +2,12 @@ import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import './index.css'
+import { basename } from './modules/basename'
 
 // Set up a Router instance
 const router = createRouter({
   routeTree,
+  basepath: basename,
   defaultPreload: 'intent',
   scrollRestoration: true,
 })

src/modules/basename.ts

@@ -1,2 +1,2 @@
 // @ts-ignore
-export const basename = DEV_SERVER ? '/' : BASE_NAME;
+export const basename = BASE_NAME;

src/styles/theme.css

@@ -0,0 +1,98 @@
+@import 'tailwindcss';
+
+@theme {
+  /* --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745; */
+
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block;
+    /* 修复交汇时出现的白块 */
+  }
+}
+
+ul,
+menu {
+  list-style: disc;
+}
+
+ol {
+  list-style: decimal;
+}