This commit is contained in:
2026-02-18 00:58:33 +08:00
parent ebd8a7e8be
commit 0b9d4dfce3
3 changed files with 1103 additions and 59 deletions

View File

@@ -1,63 +1,48 @@
# 项目概览
## 项目名称
next-simple-template
## 包名/作用域
@kevisual/next-simple-template
## 项目描述
Light Code - 一个直觉、高效的代码编辑器前端界面
## 技术栈
- **框架**: Next.js 16.1.1 (App Router)
- **语言**: TypeScript 5
- **UI库**: React 19.2.3
- **样式**: Tailwind CSS 4
- **组件库**: Radix UI (Dialog, Slot, etc.)
- **状态管理**: Zustand valtio
- **图标**: Lucide React
- **工具库**:
- class-variance-authority (组件变体)
- clsx + tailwind-merge (样式处理)
- sonner (通知)
- **请求库**(自定义框架)
- @kevisual/query
# AGENTS.md
本指南为在此仓库中工作的 AI 编码代理提供关键信息。
## 项目结构
```
src/
├── app/
├── layout.tsx # 根布局,配置字体和元数据
│ ├── page.tsx # 首页组件
│ └── globals.css # 全局样式
├── components/
│ └── ui/
│ ├── button.tsx # 按钮组件 (支持多种变体)
│ └── dialog.tsx # 对话框组件
├── lib/
│ └── utils.ts # 工具函数 (cn类名合并)
└── proxy.ts # 代理配置
├── components/ui/ # shadcn/ui 组件Base UI 基础组件)
├── lib/ # 工具函数cn() 函数用于 className 合并)
├── modules/ # 应用模块query client、basename
├── pages/ # 页面组件(默认导出)
├── routes/ # TanStack Router 基于文件的路由
├── styles/ # 全局样式、主题 CSS
└── main.tsx # 应用入口
```
## 核心配置
- **路径别名**: `@/*` 映射到 `./src/*`
- **构建输出**:
- 开发环境: 标准Next.js
- 生产环境: 静态导出到 `dist` 目录
- **Base Path**: 生产环境使用 `basename` 路径
## 可用命令
- `pnpm dev` - 启动开发服务器
- `pnpm build` - 构建生产版本
- `pnpm start` - 启动生产服务器
- `pnpm pub` - 部署到远程
- `pnpm ui` - 添加shadcn组件
## 代码风格指南
## 特性
- 深色模式支持
- 响应式设计
- TypeScript严格模式
- 可访问性组件 (Radix UI)
- 静态导出支持
### 模块目录结构
每个新模块(如 `page-app`)应遵循以下结构:
```
pages/page-app/
├── components/ # 模块专属组件
├── store/ # 模块状态管理
└── module/ # 模块功能函数
```
### 状态和数据获取
- **Zustand** 用于全局状态管理
- **@kevisual/query** 用于数据获取QueryClient 实例位于 `src/modules/query.ts`
- **React Hook Form** 用于表单管理
## 核心依赖
- **@base-ui/react**: Headless UI 基础组件
- **@tanstack/react-router**: 基于 TanStack Router 插件的文件路由
- **class-variance-authority**: 基于变体的样式系统
- **clsx + tailwind-merge**: 通过 `cn()` 提供 className 工具函数
- **lucide-react**: 图标库
- **react-hook-form**: 表单处理
- **sonner**: Toast 通知
- **zustand**: 状态管理
- **tailwindcss v4**: 使用 @tailwindcss/vite 插件进行样式处理