From efe1568ab5f157e963b2ff4932a880eb120b2f2e Mon Sep 17 00:00:00 2001 From: Eamon <17516219072@163.com> Date: Thu, 5 Mar 2026 10:14:13 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4README.md=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 88 ++++++++++++++++--------------------------------------- 1 file changed, 26 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 158083d..ed77367 100644 --- a/README.md +++ b/README.md @@ -8,37 +8,9 @@ 仪表盘填充真实数据 +## 目录结构 -#### 下载代码 -1. 下载本地项目，安装项目依赖包，运行：bun install -2. 确定本地开发环境正常：需要安装node.js bun git -3. 下载代码编辑器：vscode 并且安装好插件：ts biome tailwind css mdx -4. 创建环境变量文件 .env，复制 .env.example 中的内容到 .env，并根据实际情况修改 -5. 启动项目终端运行 bun run dev - -### 上传代码 -1. 使用git命令上传至master分支： -#### 添加所有文件 -- git add . -#### 查看文件状态 -- git status -#### 提交到本地仓库 -- git commit -m "提交说明" -#### 推送到远程仓库 -- git push -u origin master - -#### 确保已配置Git用户信息： -- git config --global user.name "你的用户名" -- git config --global user.email "你的邮箱" - -#### git 发布版本命令 -- 首先在package.json文件中跟新最新版本号"version": "1.0.2", -- 然后终端执行./publish.ps1 <版本号> -- 在gitea项目地址页面选择 发布 -- 发布最新版本号 -- 返回后可以在 代码 -- 提交记录中查看发布的版本是否挂载正确 - -#### 目录结构 - +``` public/ # 静态资源（图片、字体等） src/ ├── actions/ # 服务端 Action（表单提交、数据操作等） @@ -67,41 +39,33 @@ package.json # 项目依赖与脚本 postcss.config.mjs # PostCSS 配置 README.md # 项目说明文档 tsconfig.json # TypeScript 配置 +``` -#### 项目使用到的技术栈 +## 搭建开发环境 -核心框架： -- nextjs 服务框架 https://nextjs.org/docs -- react 前端 UI 框架 https://react.dev/learn -- typescript (ts) 类型安全的 JavaScript 超集 https://www.typescriptlang.org/docs/ -- bun 包管理器 / 运行时 https://bun.sh/docs +1. 下载本地项目：`git clone https://43.226.58.254:53000/lanhu/admin` +2. 安装依赖包：`bun install` +3. 创建环境变量文件 .env，复制 .env.example 中的内容到 .env，并根据实际情况修改 +4. 启动项目终端运行 `bun run dev` -UI / 样式体系： -- radix-ui 无样式的基础 UI 组件库 https://www.radix-ui.com/docs/primitives/overview/introduction -- tailwindcss css 库 https://tailwindcss.com/ -- tailwindcss-animate Tailwind CSS 动画插件 https://github.com/jamiebuilds/tailwindcss-animate -- tw-animate-css 扩展的 Tailwind 动画库 https://github.com/ixartz/tw-animate-css -- class-variance-authority (cva) 样式变体管理工具 https://cva.style/docs -- clsx/tailwind-merge CSS 类名处理工具 https://github.com/lukeed/clsx / https://github.com/dcastil/tailwind-merge -- lucide-react 图标库 https://lucide.dev/icons/ -- next-themes 主题切换（暗黑 / 亮色模式） https://github.com/pacocoursey/next-themes +## 构建项目 & 版本管理 -表单与数据验证： -- react-hook-form 表单处理库 https://react-hook-form.com/get-started -- @hookform/resolvers react-hook-form 校验解析器 https://react-hook-form.com/api/useform/resolver -- zod 数据验证库 https://zod.dev/ -- date-fns 时间处理库 https://date-fns.org/docs/Getting-Started +1. 在 package.json 文件中修改版本号 +2. 构建并上传镜像, 终端运行 `./publish.ps1 <版本号>` +3. 终端执行成功后在 `https://43.226.58.254:53000/lanhu/admin` 发布最新版本 -数据管理与展示： -- zustand 状态管理库 https://zustand-demo.pmnd.rs/ -- @tanstack/react-table 表格处理库 https://tanstack.com/table/latest/docs/guide/introduction +## 技术栈 +| 类别 | 场景/库名 | 推荐方案/用途 | +| :--- | :--- | :--- | +| **核心框架** | Next.js | 服务框架 (React 全栈框架) | +| **UI / 样式体系** | Radix UI | 无样式基础 UI 组件原语 | +| | Tailwind CSS | CSS 框架 (原子化 CSS) | +| | lucide-react | 图标库 | +| **表单与数据验证** | React Hook Form | 表单状态管理及验证 | +| | Zod | 数据验证与类型推断 | +| **数据管理与通信** | Zustand | 全局状态管理库 | +| | TanStack Query | 服务端状态管理 (数据请求、缓存) | +| | TanStack Table | 无头 UI 表格库 | +| **工具库** | date-fns | 日期时间处理库 | -工程化与开发工具： -- eslint 代码检查工具 https://eslint.org/docs/latest/ -- @biomejs/biome 代码格式化 / 检查工具 https://biomejs.dev/guides/getting-started/ -- babel-plugin-react-compiler React 编译器插件（性能优化） https://react.dev/blog/2024/04/25/react-compiler -- typescript 类型检查 https://www.typescriptlang.org/docs/ - -部署与构建： -- Docker 容器化部署运行环境 https://www.docker.com/get-started -- Turbopack Next.js 新一代构建工具（脚本中启用 --turbopack） https://turbo.build/pack/docs/introduction \ No newline at end of file +生产环境的项目部署通过单独的部署脚本进行管理，前端开发上线只需要构建以及发布版本，无需考虑部署问题。