组件元数据自动生成解决方案

Augmunt智能路由2025/8/20大约 4 分钟

组件元数据自动生成解决方案

🎯 问题解决

本解决方案完美解决了fizz-authorization-admin项目中编辑器的三个核心问题：

✅ 精确的组件识别 - 通过自动生成的组件元数据准确识别pb-website项目中的组件
✅ 完整的参数信息 - 自动提取组件的参数配置、类型和验证规则
✅ 所见即所得配置 - 基于元数据的可视化组件参数配置界面

🏗️ 技术架构

构建时自动生成

pb-website 构建 → 扫描组件 → 提取元数据 → 生成JSON → fizz-admin 加载 → 组件配置器

核心组件

Vite插件 (src/.vuepress/webcomponents/plugins/generate-metadata.js)
- 在构建过程中自动扫描组件
- 解析Vue组件的props定义
- 提取组件注释中的元数据
- 生成标准化的JSON文件
组件元数据文件 (src/.vuepress/public/webcomponents/component-metadata.json)
- 构建时自动生成
- 包含所有组件的详细信息
- 通过HTTP可直接访问

组件注释规范

<!--
@displayName 产品头部
@description 产品展示头部组件，用于显示产品的基本信息和状态
@category display
-->

🚀 使用方法

1. 在pb-website项目中构建

# 构建Web Components并生成元数据
pnpm build:webcomponents

构建完成后会自动生成：

src/.vuepress/public/webcomponents/pb-webcomponents.js - Web Components脚本
src/.vuepress/public/webcomponents/component-metadata.json - 组件元数据

2. 启动静态服务器

# 启动VuePress开发服务器
pnpm dev

# 或者单独启动静态服务器
http-server src/.vuepress/public -p 8080 --cors

3. 在fizz-authorization-admin中使用

组件元数据会自动从以下URL加载：

http://localhost:8080/webcomponents/component-metadata.json

📋 当前支持的组件

构建后自动生成以下组件的元数据：

展示组件 (display)

ProductHeader (产品头部) - pb-product-header
- 参数：icon, title, subtitle, status, description
ClinicalValue (临床价值) - pb-clinical-value
- 参数：title, values (JSON数组)
TechnicalSpecsSimple (技术规格) - pb-technical-specs-simple
- 参数：title, specs (JSON对象)
ClinicalApplications (临床应用) - pb-clinical-applications
- 参数：title, applications (JSON数组)
ResearchData (研究数据) - pb-research-data
- 参数：title, data (JSON数组)
CompetitiveAdvantages (竞争优势) - pb-competitive-advantages
- 参数：title, advantages (JSON数组)

🔧 开发指南

添加新组件

创建Vue组件 (支持TypeScript)

<!--
@displayName 组件显示名称
@description 组件描述
@category display|form|media|layout|navigation
-->
<template>
  <!-- 组件模板 -->
</template>

<script setup lang="ts">
interface Props {
  title?: string
  data?: any[]
}

const { title, data } = defineProps<Props>()
</script>

在vue-wrapper.js中注册

import NewComponent from '../components/NewComponent.vue'

// 在registerProductComponents函数中添加
wrapVueComponent(NewComponent, 'pb-new-component', ['data'])

重新构建
```
pnpm build:webcomponents
```

支持的参数类型

string - 字符串输入
number - 数字输入
boolean - 布尔值开关
array - JSON数组 (自动解析)
object - JSON对象 (自动解析)
select - 下拉选择器
color - 颜色选择器
icon - 图标选择器

元数据结构

{
  "version": "1.0.0",
  "generatedAt": "2025-08-20T12:31:36.253Z",
  "components": {
    "ComponentName": {
      "name": "ComponentName",
      "displayName": "组件显示名称",
      "description": "组件描述",
      "category": "display",
      "webComponentTag": "pb-component-name",
      "props": {
        "propName": {
          "type": "string",
          "default": "",
          "description": "参数描述",
          "required": false
        }
      }
    }
  }
}