# Hello Module - 示例扩展模块

这是一个完整的示例模块，展示如何在 CyShop 电商系统中实现前端模块化开发。

## 📦 模块结构

```
hello/
├── frontend/
│   └── admin/
│       ├── index.js              # 模块配置入口（必需）
│       └── views/                # Vue 组件目录
│           ├── Index.vue         # 首页
│           ├── About.vue         # 关于页
│           └── Demo.vue          # 演示页（带 keep-alive）
├── src/                          # 后端代码（PHP）
├── route/                        # 后端路由定义
└── composer.json                 # Composer 配置
```

## 🚀 功能特性

- ✅ 自动路由注册
- ✅ 菜单自动加载
- ✅ 权限控制支持
- ✅ 页面缓存支持 (keepAlive)
- ✅ 热更新支持
- ✅ Element Plus 完整集成

## 📝 路由说明

| 路由名称 | 路径 | 组件 | 说明 |
|---------|------|------|------|
| HelloIndex | /hello/index | Index.vue | 首页展示 |
| HelloAbout | /hello/about | About.vue | 关于页面 |
| HelloDemo | /hello/demo | Demo.vue | 功能演示（带缓存） |

## 🎯 如何使用

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

```bash
cd frontend/admin
npm run dev
```

### 2. 访问 Hello 模块

登录后，在左侧菜单中找到 **"Hello 示例"**，点击进入即可查看效果。

### 3. 查看控制台输出

打开浏览器开发者工具，会看到类似输出：

```
🔌 已加载扩展模块：1 个路由，1 个菜单
```

## 💡 代码示例

### index.js 配置

```javascript
export default {
  routes: {
    path: '/hello',
    name: 'HelloModule',
    component: () => import('@/layout/index.vue'),
    meta: {
      title: 'Hello 示例',
      icon: 'Sunny',
      permission: 'hello',
      priority: 50
    },
    children: [
      {
        path: 'index',
        name: 'HelloIndex',
        component: () => import('./views/Index.vue'),
        meta: {
          title: '你好世界',
          icon: 'Home'
        }
      }
    ]
  },
  menus: [...]
}
```

### Vue 组件示例

```vue
<template>
  <div class="my-component">
    <el-card>
      <h1>我的组件</h1>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
</script>
```

## 🔧 开发技巧

### 使用主应用的组件

```javascript
import Layout from '@/layout/index.vue'
import SearchForm from '@/components/SearchForm.vue'
```

### 使用 Element Plus

```javascript
import { ElMessage, ElTable } from 'element-plus'
import { Setting, Document } from '@element-plus/icons-vue'
```

### 路由跳转

```javascript
// 在模板中
$router.push('/other-path')

// 或在 script 中
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/other-path')
```

## ⚠️ 注意事项

1. **路由命名**: 使用唯一前缀，避免与其他模块冲突
2. **权限控制**: 通过 `permission` 字段控制访问
3. **文件位置**: 必须放在 `frontend/admin/` 目录下
4. **导出格式**: 必须使用 `export default` 导出配置对象
5. **模组目录**: 只能放在 `six-shop` 或 `sixdec` 目录下

## 📚 更多信息

- [模块化开发指南](../../../../frontend/admin/MODULE_GUIDE.md)
- [Vue Router 文档](https://router.vuejs.org/)
- [Element Plus 文档](https://element-plus.org/)
- [ThinkPHP 8 文档](https://www.thinkphp.cn/)

---

**这是一个示例模块，用于演示模块化开发的最佳实践**