# SaaS Admin Panel

**Repository Path**: Kuaima-tech/SaaS-Admin-Panel

## Basic Information

- **Project Name**: SaaS Admin Panel
- **Description**: 一个基于 Vue 3 + TypeScript + shadcn/ui 的现代化 SaaS 后台管理面板。
技术栈
框架: Vue 3 + TypeScript
构建工具: Vite
UI 组件: shadcn/ui + Tailwind CSS + Radix Vue
路由: Vue Router 4
状态管理: Pinia
图标: Lucide Vue Next
包管理: pnpm
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-14
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SaaS Admin Panel

一个基于 Vue 3 + TypeScript + shadcn/ui 的现代化 SaaS 后台管理面板。

## 技术栈

- **框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **UI 组件**: shadcn/ui + Tailwind CSS + Radix Vue
- **路由**: Vue Router 4
- **状态管理**: Pinia
- **图标**: Lucide Vue Next
- **包管理**: pnpm
- **代码规范**: ESLint + Prettier

## 功能特性

### 🎨 现代化设计
- 基于 shadcn/ui 的美观组件库
- 支持深色/浅色主题切换
- 响应式设计，适配各种屏幕尺寸
- 优雅的动画效果和交互体验

### 📊 功能模块
- **仪表板**: 数据概览、统计图表、最新活动
- **用户管理**: 用户列表、角色权限、状态管理
- **设置页面**: 个人设置、外观配置、通知设置、系统配置

### 🔧 开发体验
- TypeScript 支持，类型安全
- 热更新开发环境
- 代码格式化和检查
- 模块化组件架构

## 快速开始

### 环境要求
- Node.js >= 18
- pnpm >= 8

### 安装依赖
\`\`\`bash
pnpm install
\`\`\`

### 开发模式
\`\`\`bash
pnpm dev
\`\`\`

### 构建生产版本
\`\`\`bash
pnpm build
\`\`\`

### 预览生产版本
\`\`\`bash
pnpm preview
\`\`\`

### 代码检查
\`\`\`bash
pnpm lint
\`\`\`

### 代码格式化
\`\`\`bash
pnpm format
\`\`\`

## 项目结构

\`\`\`
src/
├── assets/          # 静态资源
├── components/      # 组件
│   ├── ui/         # 基础 UI 组件
│   ├── Sidebar.vue # 侧边栏组件
│   ├── Header.vue  # 头部导航组件
│   └── Layout.vue  # 布局组件
├── lib/            # 工具函数
├── router/         # 路由配置
├── stores/         # 状态管理
├── views/          # 页面组件
│   ├── Dashboard.vue
│   ├── Users.vue
│   └── Settings.vue
└── main.ts         # 应用入口
\`\`\`

## 主要组件

### Layout 组件
- **Sidebar**: 可折叠的侧边栏导航
- **Header**: 顶部导航栏，包含主题切换、通知等功能

### UI 组件
- **Button**: 多样化的按钮组件
- **Card**: 卡片容器组件
- **CardHeader**: 卡片标题组件
- **CardTitle**: 卡片标题文字组件
- **CardContent**: 卡片内容组件

### 页面组件
- **Dashboard**: 仪表板页面，展示数据概览
- **Users**: 用户管理页面，包含用户列表和操作
- **Settings**: 设置页面，包含个人、系统等配置

## 状态管理

### App Store
- 主题模式控制
- 侧边栏折叠状态
- 页面标题管理

### Auth Store
- 用户认证状态
- 用户信息管理

## 自定义配置

### 主题配置
在 \`src/assets/main.css\` 中修改 CSS 变量来自定义主题颜色：

\`\`\`css
:root {
  --primary: 222.2 47.4% 11.2%;
  --secondary: 210 40% 96%;
  --accent: 210 40% 96%;
  --destructive: 0 84.2% 60.2%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  /* ... */
}
\`\`\`

### 路由配置
在 \`src/router/index.ts\` 中添加新的路由：

\`\`\`typescript
{
  path: '/new-page',
  name: 'newPage',
  component: () => import('@/views/NewPage.vue'),
  meta: {
    title: '新页面'
  }
}
\`\`\`

## 开发说明

### 添加新的 UI 组件
1. 在 \`src/components/ui/\` 中创建组件文件
2. 使用 \`class-variance-authority\` 实现变体样式
3. 使用 \`cn\` 工具函数合并样式

### 添加新页面
1. 在 \`src/views/\` 中创建页面组件
2. 在 \`src/router/index.ts\` 中添加路由
3. 更新侧边栏导航菜单

### 状态管理
使用 Pinia 的组合式 API 风格：

\`\`\`typescript
export const useMyStore = defineStore('myStore', () => {
  const state = ref(initialValue)
  const getters = computed(() => state.value * 2)
  const actions = {
    updateState(newValue: number) {
      state.value = newValue
    }
  }
  return { state, getters, ...actions }
})
\`\`\`

## 贡献指南

1. Fork 项目
2. 创建特性分支 (\`git checkout -b feature/AmazingFeature\`)
3. 提交更改 (\`git commit -m 'Add some AmazingFeature'\`)
4. 推送到分支 (\`git push origin feature/AmazingFeature\`)
5. 打开 Pull Request

## 许可证

本项目采用 MIT 许可证。详情请参阅 [LICENSE](LICENSE) 文件。