# Demo Project - Admin Framework 使用示例

这是一个使用 **Admin Framework** 框架的完整示例项目。

## 📁 项目结构

```
demo-project/
├── public/
│   └── index.html              # HTML 模板
├── src/
│   ├── config/
│   │   └── index.js            # 配置文件
│   ├── libs/
│   │   └── admin-framework.js  # 框架文件（从 dist 复制）
│   ├── views/
│   │   └── business/
│   │       └── product_list.vue # 示例业务页面
│   ├── App.vue                 # 根组件
│   └── main.js                 # 入口文件
├── babel.config.js
├── package.json
├── webpack.config.js
└── README.md
```

## ⚠️ 重要说明

**本项目已更新为直接使用框架源码**（不再使用打包文件），更方便调试！

**✅ 已启用完整的 Source Map 支持**，可以在浏览器中直接调试源码！

**首次运行或更新后，请先安装依赖**：
```bash
npm install
```

如果遇到问题，删除 `node_modules` 和 `package-lock.json` 后重新安装。

---

## 🚀 快速开始

### 方式一：一键启动（推荐）

#### Windows 用户
双击运行 `start.bat`，会自动：
1. 检查并安装依赖
2. 启动开发服务器
3. 自动打开浏览器

#### Linux/Mac 用户
```bash
chmod +x start.sh
./start.sh
```

### 方式二：手动启动

```bash
# 1. 安装依赖（首次运行必须）
npm install

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

### ~~ 方式三：复制框架文件（已废弃）~~

### 1. 使用源码（当前方式）

将框架打包文件复制到项目中：

```bash
# 在 admin-framework 目录执行构建
cd admin-framework
npm run build

# 创建 libs 目录
mkdir demo-project/src/libs

# 复制打包文件
cp dist/admin-framework.js demo-project/src/libs/
```

### 2. 安装依赖

```bash
cd demo-project
npm install
```

### 3. 启动开发服务器

```bash
npm run dev
```

浏览器会自动打开 `http://localhost:8080`

### 4. 构建生产版本

```bash
npm run build
```

生成的文件在 `dist` 目录中。

## 📝 核心文件说明

### main.js - 入口文件

```javascript
import AdminFramework from './libs/admin-framework.js'
import config from './config'

// 使用框架
Vue.use(AdminFramework, {
  config,
  ViewUI,
  VueRouter,
  Vuex,
  createPersistedState
})

// 创建 Vue 实例
new Vue({
  router: AdminFramework.router,
  store: AdminFramework.store,
  render: h => h(App)
}).$mount('#app')
```

### config/index.js - 配置文件

```javascript
export default {
  title: 'Demo 管理系统',
  apiUrl: 'http://localhost:3000/api/',
  uploadUrl: 'http://localhost:3000/api/upload',
  tokenKey: 'demo_token'
}
```

### 业务页面示例

`src/views/business/product_list.vue` 展示了如何：
- 使用 ViewUI 组件（Table、Button、Modal 等）
- 调用 API 接口（this.$http）
- 使用框架提供的工具方法

## 🎯 框架提供的功能

### 1. 内置页面

- ✅ **主页**（HomePage）- 欢迎页面
- ✅ **系统页面**（SysUser、SysRole、SysMenu 等）
- ✅ **登录页面**（LoginPage）
- ✅ **错误页面**（401、404、500）

### 2. 布局组件

- ✅ **Main** - 主布局
- ✅ **ParentView** - 父级视图

### 3. 工具方法

```javascript
// HTTP 请求
this.$http.get(url, params)
this.$http.post(url, data)

// 工具函数
this.$tools.formatDate(date, format)
this.$tools.setToken(token)
this.$tools.getToken()

// UI 工具
this.$uiTool.delConfirm(callback)
this.$uiTool.setRem()
```

### 4. Store 状态管理

```javascript
// 用户模块
this.$store.dispatch('user/handleLogin', data)
this.$store.dispatch('user/handleLogOut')
this.$store.getters['user/userName']

// 应用模块
this.$store.dispatch('app/getSysTitle', { defaultTitle: '系统' })
this.$store.getters['app/sysFormModel']
```

## 🐛 调试功能

### Source Map 已启用

项目已配置完整的 Source Map 支持：

✅ **开发模式**：使用 `eval-source-map`
- 高质量的源码映射
- 可以在浏览器中看到原始源代码
- 支持断点调试
- 包含行和列信息

✅ **生产模式**：使用 `source-map`
- 生成独立的 .map 文件
- 完整的源码信息

### 如何调试

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

2. **打开浏览器开发者工具**（F12）

3. **在 Sources 标签页查看源码**：
   ```
   webpack://
   ├── demo-project/src/     ← Demo 项目源码
   └── src/                  ← 框架源码（可直接调试）
   ```

4. **设置断点调试**：
   - 点击行号设置断点
   - 或在代码中添加 `debugger` 语句

### 详细调试指南

查看完整调试教程：**[调试指南.md](./调试指南.md)** 📚

包含：
- Source Map 配置说明
- 浏览器调试技巧
- 框架源码调试方法
- Vue DevTools 使用
- Console 调试技巧

## 🔧 自定义开发

### 添加业务路由

在 `main.js` 中添加自定义路由：

```javascript
const businessRoutes = [
  {
    path: '/business/product',
    name: 'product_list',
    component: ProductList
  }
]

// 添加到主路由
const mainRoute = AdminFramework.router.options.routes.find(r => r.path === '/')
mainRoute.children.push(...businessRoutes)
```

### 使用系统页面

```javascript
import { SysUser, SysRole } from './libs/admin-framework.js'

// 或者直接使用
const SysUser = AdminFramework.SysUser
```

## 📚 更多文档

查看完整文档：`admin-framework/完整使用文档.md`

## 💡 提示

1. **框架文件**：确保将最新的 `admin-framework.js` 复制到 `src/libs/` 目录
2. **ViewUI 样式**：已在 main.js 中引入 `view-design/dist/styles/iview.css`
3. **API 配置**：修改 `config/index.js` 中的 `apiUrl` 为你的后端地址
4. **登录功能**：访问 `/login` 可以看到登录页面

## 🎉 开始开发

现在你可以：
1. 访问 `http://localhost:8080/login` 查看登录页面
2. 访问 `http://localhost:8080/home` 查看主页
3. 访问 `http://localhost:8080/business/product` 查看业务页面示例
4. 开始开发你的业务页面！

祝开发愉快！ 🚀