hello/frontend/admin/views/Index.vue

<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>