feat(hello): 添加 Hello 模块前端页面和路由配置

- 新增 About.vue 关于模块页面，展示模块信息和技术栈
- 新增 Demo.vue 功能演示页面，包含基础交互、表单演示和数据表格
- 新增 Index.vue 首页组件，提供模块介绍和快速导航功能
- 新增 index.js 路由配置文件，自动注册路由和菜单项
- 更新 README.md 文档，详细说明模块结构和使用方法

README.md

@@ -1,32 +1,152 @@
-# Hello Extension
+# Hello Module - 示例扩展模块
 
-这是一个演示扩展，用于展示如何创建和使用Sixshop扩展。
+这是一个完整的示例模块，展示如何在 CyShop 电商系统中实现前端模块化开发。
 
-## 功能说明
+## 📦 模块结构
 
-该扩展提供一个简单的API端点，返回欢迎信息。
+```
+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 | 功能演示（带缓存） |
 
-```shell
-composer require six-shop/hello
+## 🎯 如何使用
+
+### 1. 启动开发服务器
+
+```bash
+cd frontend/admin
+npm run dev
 ```
 
-## API接口
+### 2. 访问 Hello 模块
 
-### 获取欢迎信息
-- **URL**: `https://sixshop.ddev.site/api/hello`
-- **方法**: GET
-- **描述**: 返回简单的欢迎信息
+登录后，在左侧菜单中找到 **"Hello 示例"**，点击进入即可查看效果。
 
-## 响应示例
+### 3. 查看控制台输出
 
-```json
-{
-    "code": 0,
-    "status": "ok",
-    "msg": "success",
-    "data": "hello world"
+打开浏览器开发者工具，会看到类似输出：
+
+```
+🔌 已加载扩展模块：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/)
+
+---
+
+**这是一个示例模块，用于演示模块化开发的最佳实践**

frontend/admin/index.js

@@ -0,0 +1,78 @@
+/**
+ * Hello Module - 示例扩展模块
+ * 
+ * 这是一个完整的示例，展示如何在 six-shop/hello 扩展包中实现前端模块化
+ */
+
+export default {
+  // 路由配置 - 单个路由对象
+  routes: {
+    path: '/hello',
+    name: 'HelloModule',
+    component: () => import('@/layout/index.vue'),
+    redirect: '/hello/index',  // 添加默认重定向
+    meta: {
+      title: 'Hello 示例',
+      icon: 'Sunny',
+      permission: 'hello',
+      priority: 50  // 中等优先级
+    },
+    children: [
+      {
+        path: 'index',
+        name: 'HelloIndex',
+        component: () => import('./views/Index.vue'),
+        meta: {
+          title: '你好世界',
+          icon: 'Home'
+        }
+      },
+      {
+        path: 'about',
+        name: 'HelloAbout',
+        component: () => import('./views/About.vue'),
+        meta: {
+          title: '关于模块',
+          icon: 'InfoFilled'
+        }
+      },
+      {
+        path: 'demo',
+        name: 'HelloDemo',
+        component: () => import('./views/Demo.vue'),
+        meta: {
+          title: '功能演示',
+          icon: 'Grid',
+          keepAlive: true  // 启用页面缓存
+        }
+      }
+    ]
+  },
+  
+  // 菜单配置 - 与路由对应
+  menus: [
+    {
+      path: '/hello',
+      title: 'Hello 示例',
+      icon: 'Sunny',
+      permission: 'hello',
+      children: [
+        {
+          path: '/hello/index',
+          title: '你好世界',
+          icon: 'Home'
+        },
+        {
+          path: '/hello/about',
+          title: '关于模块',
+          icon: 'InfoFilled'
+        },
+        {
+          path: '/hello/demo',
+          title: '功能演示',
+          icon: 'Grid'
+        }
+      ]
+    }
+  ]
+}

frontend/admin/views/About.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="hello-about">
+    <el-card>
+      <template #header>
+        <span>ℹ️ 关于模块</span>
+      </template>
+      
+      <div class="about-content">
+        <h3>📦 模块信息</h3>
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="模块名称">Hello Module</el-descriptions-item>
+          <el-descriptions-item label="模块路径">/hello</el-descriptions-item>
+          <el-descriptions-item label="所属模组">six-shop</el-descriptions-item>
+          <el-descriptions-item label="包名">six-shop/hello</el-descriptions-item>
+          <el-descriptions-item label="位置">backend/vendor/six-shop/hello</el-descriptions-item>
+          <el-descriptions-item label="优先级">50</el-descriptions-item>
+        </el-descriptions>
+        
+        <h3 style="margin-top: 30px;">🎯 技术栈</h3>
+        <el-table :data="techStack" style="width: 100%; margin-top: 15px;" border>
+          <el-table-column prop="name" label="技术" width="150" />
+          <el-table-column prop="version" label="版本" width="100" />
+          <el-table-column prop="desc" label="说明" />
+        </el-table>
+        
+        <el-alert
+          title="💡 设计理念"
+          type="info"
+          description="通过约定优于配置的方式，实现零配置的模块化开发体验"
+          show-icon
+          style="margin-top: 20px;"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+const techStack = [
+  { name: 'ThinkPHP', version: '8.1+', desc: '后端框架' },
+  { name: 'Vue', version: '3.x', desc: '前端框架' },
+  { name: 'Element Plus', version: 'latest', desc: 'UI 组件库' },
+  { name: 'Vite', version: 'latest', desc: '构建工具' }
+]
+</script>
+
+<style scoped>
+.hello-about {
+  padding: 20px;
+}
+
+.about-content h3 {
+  margin-bottom: 15px;
+  color: #303133;
+}
+</style>

frontend/admin/views/Demo.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="hello-demo">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>🎮 功能演示</span>
+          <el-tag type="warning">Keep-Alive 页面</el-tag>
+        </div>
+      </template>
+      
+      <div class="demo-sections">
+        <!-- 示例 1: 基础交互 -->
+        <div class="demo-section">
+          <h3>🔘 基础交互</h3>
+          <el-space wrap>
+            <el-button @click="count++">点击次数：{{ count }}</el-button>
+            <el-button type="primary" @click="showMessage">显示消息</el-button>
+            <el-button type="success" @click="showSuccess">成功提示</el-button>
+          </el-space>
+        </div>
+        
+        <!-- 示例 2: 表单演示 -->
+        <div class="demo-section">
+          <h3>📝 表单演示</h3>
+          <el-form :model="formData" label-width="100px" style="max-width: 500px;">
+            <el-form-item label="用户名">
+              <el-input v-model="formData.username" placeholder="请输入用户名" />
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model="formData.email" placeholder="请输入邮箱" />
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input 
+                v-model="formData.note" 
+                type="textarea" 
+                :rows="3"
+                placeholder="请输入备注"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm">提交表单</el-button>
+              <el-button @click="resetForm">重置表单</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        
+        <!-- 示例 3: 数据表格 -->
+        <div class="demo-section">
+          <h3>📊 数据表格</h3>
+          <el-table :data="tableData" style="width: 100%" border stripe>
+            <el-table-column prop="id" label="ID" width="80" />
+            <el-table-column prop="name" label="姓名" />
+            <el-table-column prop="age" label="年龄" width="80" />
+            <el-table-column prop="email" label="邮箱" />
+            <el-table-column label="操作" width="150" fixed="right">
+              <template #default="{ row }">
+                <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        
+        <!-- 示例 4: Keep-Alive 测试 -->
+        <div class="demo-section">
+          <h3>⏸️ Keep-Alive 测试</h3>
+          <el-alert
+            title="此页面启用了 keep-alive，切换路由后状态会保留"
+            type="info"
+            :closable="false"
+            show-icon
+          />
+          <p style="margin-top: 10px; color: #606266;">
+            当前输入的内容：<strong>{{ formData.username || '无' }}</strong>
+          </p>
+          <p style="color: #606266;">
+            点击次数：<strong>{{ count }}</strong>
+          </p>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+// 基础交互
+const count = ref(0)
+
+const showMessage = () => {
+  ElMessage.info('这是一个普通消息提示')
+}
+
+const showSuccess = () => {
+  ElMessage.success('操作成功！')
+}
+
+// 表单演示
+const formData = ref({
+  username: '',
+  email: '',
+  note: ''
+})
+
+const submitForm = () => {
+  if (!formData.value.username) {
+    ElMessage.warning('请输入用户名')
+    return
+  }
+  ElMessage.success(`表单已提交，用户名：${formData.value.username}`)
+}
+
+const resetForm = () => {
+  formData.value = {
+    username: '',
+    email: '',
+    note: ''
+  }
+}
+
+// 数据表格
+const tableData = ref([
+  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
+  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
+  { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
+])
+
+const handleEdit = (row) => {
+  ElMessage.info(`编辑：${row.name}`)
+}
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确定要删除 ${row.name} 吗？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功')
+  }).catch(() => {
+    ElMessage.info('已取消删除')
+  })
+}
+</script>
+
+<style scoped>
+.hello-demo {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.demo-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.demo-section {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.demo-section:last-child {
+  border-bottom: none;
+}
+
+.demo-section h3 {
+  margin-bottom: 15px;
+  color: #303133;
+}
+</style>

frontend/admin/views/Index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="hello-index">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>👋 Hello World - 欢迎使用扩展模块</span>
+          <el-tag type="success">来自 six-shop/hello</el-tag>
+        </div>
+      </template>
+      
+      <div class="module-intro">
+        <h2>🎉 模块化开发示例</h2>
+        <p style="color: #606266; line-height: 1.8;">
+          这是一个来自 <code>backend/vendor/six-shop/hello</code> 扩展包的页面。
+          所有路由和菜单都已经自动注册，无需手动配置！
+        </p>
+        
+        <el-alert
+          title="✨ 特性展示"
+          type="success"
+          :closable="false"
+          show-icon
+          style="margin: 20px 0;"
+        >
+          <template #default>
+            <ul style="margin: 10px 0; padding-left: 20px;">
+              <li>✅ 自动路由注册</li>
+              <li>✅ 菜单自动加载</li>
+              <li>✅ 权限控制支持</li>
+              <li>✅ 热更新支持</li>
+              <li>✅ 页面缓存 (keepAlive)</li>
+            </ul>
+          </template>
+        </el-alert>
+        
+        <div class="quick-actions" style="margin-top: 30px;">
+          <h3>🚀 快速导航</h3>
+          <el-space wrap>
+            <el-button type="primary" @click="$router.push('/hello/about')">
+              <el-icon><InfoFilled /></el-icon>
+              关于模块
+            </el-button>
+            <el-button type="success" @click="$router.push('/hello/demo')">
+              <el-icon><Grid /></el-icon>
+              功能演示
+            </el-button>
+          </el-space>
+        </div>
+        
+        <div class="code-info" style="margin-top: 30px;">
+          <h3>📁 文件位置</h3>
+          <pre style="background: #f5f7fa; padding: 15px; border-radius: 4px; overflow-x: auto;">
+配置文件：backend/vendor/six-shop/hello/frontend/admin/index.js
+首页组件：backend/vendor/six-shop/hello/frontend/admin/views/Index.vue
+关于页面：backend/vendor/six-shop/hello/frontend/admin/views/About.vue
+演示页面：backend/vendor/six-shop/hello/frontend/admin/views/Demo.vue</pre>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { InfoFilled, Grid } from '@element-plus/icons-vue'
+</script>
+
+<style scoped>
+.hello-index {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.module-intro h2,
+.quick-actions h3,
+.code-info h3 {
+  margin-bottom: 15px;
+  color: #303133;
+}
+
+.module-intro p {
+  font-size: 14px;
+}
+
+.module-intro code {
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: #c7254e;
+  font-family: 'Courier New', monospace;
+}
+
+.quick-actions,
+.code-info {
+  padding: 20px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.code-info pre {
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #606266;
+}
+</style>