# appsdk

**Repository Path**: tovictory/appsdk

## Basic Information

- **Project Name**: appsdk
- **Description**: 一个基于 Vue 3 的应用程序开发框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AppSDK

一个基于 Vue 3 的现代化应用程序开发框架，采用组件化架构设计，集成了现代化的前端开发工具链和 UI 组件库。AppSDK 提供了一个完整的应用开发解决方案，包含用户认证、路由管理、状态管理、响应式设计和主题定制等功能。

## 特性

- **现代化技术栈**：基于 Vue 3、Vite、Pinia、Vue Router 等最新前端技术
- **响应式设计**：支持桌面端和移动端的自适应布局
- **多主题支持**：内置多种主题（明亮、暗色、Valentine、Dracula、Lemonade、Dim）
- **用户认证**：包含登录/登出功能和用户状态管理
- **模块化架构**：清晰的组件划分，便于扩展和维护
- **本地存储**：持久化用户设置和偏好
- **拖拽功能**：可拖拽的工具栏
- **可访问性**：遵循 Web 可访问性最佳实践

## 项目结构

```
src/
├── assets/           # 静态资源文件（图片、字体等）
├── components/       # 可复用的 Vue 组件
├── composables/      # Vue 组合式 API 函数
├── layouts/          # 页面布局组件
├── router/           # 路由配置
├── services/         # API 服务和业务逻辑
├── store/            # Pinia 状态管理
├── styles/           # 全局样式文件
├── utils/            # 工具函数和辅助方法
├── views/            # 页面级组件
├── App.vue           # 根组件（使用子组件构建UI）
├── main.js           # 应用入口文件
└── style.css         # 全局样式表
```

### 目录职责说明

#### `assets/`
存放项目中使用的静态资源文件，如图片、字体、图标等。这些文件通常会被构建工具处理并输出到最终的构建目录中。
（当前为空目录）

#### `components/`
存放可复用的 Vue 组件。这些组件通常是无状态的或只包含局部状态，用于构建页面的不同部分。
（当前包含 Navbar.vue, Sidebar.vue, LoginDialog.vue, SettingsDrawer.vue, ProfileDrawer.vue, AboutDrawer.vue, WelcomeSection.vue, BaseDrawer.vue, Login.vue 等组件）

#### `composables/`
存放 Vue 3 的组合式 API 函数，用于逻辑复用。这些函数通常处理特定的业务逻辑或功能，如数据获取、状态管理等。
（当前为空目录）

#### `layouts/`
存放页面布局组件，如主页面结构、导航栏、侧边栏等。这些组件通常包含页面的整体结构和通用元素。
（当前为空目录）

#### `router/`
存放 Vue Router 的路由配置文件。定义应用的页面路由、导航守卫和路由相关逻辑。
（当前包含 index.js 路由配置文件，支持 Home、Project、Team、Docs、Help 等路由）

#### `services/`
存放与后端 API 交互的服务层代码。包括 HTTP 请求封装、数据处理等业务逻辑。
（当前为空目录）

#### `store/`
使用 Pinia 进行状态管理的文件。存放应用的全局状态、actions 和 getters。
（当前为空目录）

#### `styles/`
存放全局样式文件，如 CSS 变量、通用样式类等。用于统一管理应用的样式主题。
（当前为空目录）

#### `utils/`
存放通用的工具函数和辅助方法。如日期格式化、字符串处理、数据验证等。
（当前为空目录）

#### `views/`
存放页面级组件，每个文件通常对应一个路由页面。这些组件负责特定页面的业务逻辑和展示。
（当前包含 Home.vue, Project.vue, Team.vue, Docs.vue, Help.vue 页面组件）

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Pinia** - Vue 的存储库
- **Vue Router** - Vue.js 的官方路由管理器
- **Tailwind CSS** - 实用优先的 CSS 框架
- **DaisyUI** - 轻松构建美观的网站
- **Vite** - 下一代前端构建工具
- **Heroicons** - 精美的 SVG 图标库
- **Rolldown** - 高性能的构建工具（通过 rolldown-vite 使用）

## 安装和运行

1. 安装依赖：
   ```bash
   npm install
   ```

2. 启动开发服务器：
   ```bash
   npm run dev
   ```

3. 构建生产版本：
   ```bash
   npm run build
   ```

4. 预览生产构建：
   ```bash
   npm run preview
   ```

5. 清理构建目录：
   ```bash
   npm run clean
   ```

6. 完全清理（包括 node_modules）：
   ```bash
   npm run cleanall
   ```

## 组件说明

项目采用组件化架构，主要组件包括：

### 核心组件
- **App.vue**: 应用根组件，管理登录状态、工具栏、抽屉等全局功能
- **Navbar.vue**: 响应式导航栏，根据登录状态显示不同内容
- **Sidebar.vue**: 可折叠的侧边栏，支持移动端适配
- **BaseDrawer.vue**: 通用抽屉组件，其他抽屉组件的基础
- **WelcomeSection.vue**: 未登录时的欢迎页面

### 功能组件
- **LoginDialog.vue**: 登录对话框，包含用户名和密码输入
- **SettingsDrawer.vue**: 设置抽屉，支持主题、工具栏、搜索框等设置
- **ProfileDrawer.vue**: 用户个人资料抽屉
- **AboutDrawer.vue**: 关于应用信息抽屉

### 页面组件
- **Home.vue**: 仪表板页面，显示统计数据和项目进度
- **Project.vue**: 项目管理页面
- **Team.vue**: 团队协作页面
- **Docs.vue**: 文档页面
- **Help.vue**: 帮助和支持页面

## 功能特性

### 用户认证
- 登录/登出功能
- 登录状态管理
- 用户界面根据登录状态动态切换

### 主题定制
- 支持多种预设主题（明亮、暗色、Valentine、Dracula、Lemonade、Dim）
- 主题设置持久化到本地存储
- 实时主题切换
- 颜色的使用遵照daisyUI的最佳实践(https://daisyui.com/docs/colors/)，支持主题切换时显示自然

### 响应式设计
- 桌面端和移动端适配
- 可折叠的侧边栏
- 移动端专用的侧边栏切换按钮

### 本地存储
- 用户设置持久化（主题、工具栏显示、搜索框显示等）
- 自动从本地存储加载用户偏好

### 交互功能
- 可拖拽的工具栏
- 可切换位置的抽屉（左侧/右侧）
- 进度条和统计卡片
- 快捷操作按钮

## 开发规范

- 组件命名使用 PascalCase（如 `UserCard.vue`）
- 组合式函数以 `use` 开头（如 `useApi.js`）
- 工具函数以 camelCase 命名
- 样式类名使用 kebab-case
- 路由参数使用 kebab-case
- 使用 Vue 3 的 Composition API 和响应式语法
- 遵循 Vue 官方风格指南

## 构建配置

项目使用 Vite 作为构建工具，具有以下配置：
- 开发服务器运行在端口 3000
- 自动在浏览器中打开应用
- 支持网络访问
- 构建输出到 `dist` 目录
- 生成 sourcemaps 用于调试
- 使用 esbuild 进行代码压缩

## 本地存储键值

- `app-theme`: 应用主题设置
- `show-tools`: 工具栏显示设置
- `show-search`: 搜索框显示设置
- `drawer-position`: 抽屉位置设置

## 路由结构

- `/` - 仪表板页面
- `/project` - 项目页面
- `/team` - 团队页面
- `/docs` - 文档页面
- `/help` - 帮助页面