hello/frontend/admin/views/About.vue

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