4.5 KiB
todo
解决 cookies 重合问题
导航栏菜单项
页面表格内单元样式细化
仪表盘填充真实数据
下载代码
- 下载本地项目，安装项目依赖包，运行：bun install
- 确定本地开发环境正常：需要安装node.js bun git
- 下载代码编辑器：vscode 并且安装好插件：ts biome tailwind css mdx
- 创建环境变量文件 .env，复制 .env.example 中的内容到 .env，并根据实际情况修改
- 启动项目终端运行 bun run dev
上传代码
- 使用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（表单提交、数据操作等） ├── app/ # App Router 核心目录 │ ├── (root)/ # 根路由组（无路径前缀） │ ├── login/ # /login 路由页面 │ ├── favicon.ico # 网站图标 │ ├── globals.css # 全局样式 │ └── layout.tsx # 根布局组件 ├── components/ # 可复用 UI 组件 ├── hooks/ # 自定义 React Hooks ├── lib/ # 工具函数、第三方库封装 ├── models/ # 数据模型、类型定义、Schema └── proxy.ts # 代理配置（API 转发等） .env # 环境变量（本地开发） .env.example # 环境变量示例模板 .gitignore # Git 忽略文件 .npmrc # npm 配置 biome.json # Biome 代码格式化/检查配置 bun.lock # Bun 包管理器锁文件 components.json # shadcn/ui 组件库配置 Dockerfile # Docker 容器化配置 next-env.d.ts # Next.js 类型声明 next.config.ts # Next.js 配置文件 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
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
数据管理与展示：
- zustand 状态管理库 https://zustand-demo.pmnd.rs/
- @tanstack/react-table 表格处理库 https://tanstack.com/table/latest/docs/guide/introduction
工程化与开发工具：
- 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