hy-app 0.2.13 → 0.2.14

package/compiler.ts

@@ -0,0 +1,108 @@
+import fs from 'fs'
+import path from 'path'
+import { parse } from '@vue/compiler-sfc'
+import ts from 'typescript'
+
+// 读取组件文件
+const componentPath = path.resolve(__dirname, './components/hy-button/hy-button.vue')
+const content = fs.readFileSync(componentPath, 'utf-8')
+const { descriptor } = parse(content)
+
+if (!descriptor.scriptSetup) {
+  console.error('未找到script setup部分')
+  process.exit(1)
+}
+
+// 解析TypeScript类型
+const sourceCode = descriptor.scriptSetup.content
+const sourceFile = ts.createSourceFile('temp.ts', sourceCode, ts.ScriptTarget.Latest, true)
+
+// 存储解析结果
+const propsInfo: Record<
+  string,
+  {
+    type: string
+    default?: string
+    values?: string[]
+    description?: string
+  }
+> = {}
+
+// 遍历AST查找interface定义
+function traverseNode(node: ts.Node) {
+  if (ts.isInterfaceDeclaration(node) && node.name.text === 'buttonProps') {
+    node.members.forEach((member) => {
+      if (ts.isPropertySignature(member) && member.name) {
+        const propName = member.name.getText()
+        const type = member.type?.getText() || 'any'
+
+        // 提取JSDoc注释中的信息
+        const jsDoc = ts.getJSDocCommentsAndTags(member)
+        const description = jsDoc
+          .filter((tag) => ts.isJSDocText(tag))
+          .map((tag) => (tag as ts.JSDocText).comment)
+          .join('\n')
+          .trim()
+
+        const valuesTag = jsDoc.find(
+          (tag) => ts.isJSDocTag(tag) && tag.tagName.text === 'values',
+        ) as ts.JSDocTag | undefined
+        const values = valuesTag?.comment ? valuesTag.comment.split('|').map((v) => v.trim()) : []
+
+        propsInfo[propName] = {
+          type,
+          description: description || undefined,
+          values: values.length ? values : undefined,
+        }
+      }
+    })
+  }
+
+  ts.forEachChild(node, traverseNode)
+}
+
+traverseNode(sourceFile)
+
+// 解析默认值
+const defaultsMatch = sourceCode.match(/withDefaults\(.*?,\s*({[\s\S]*?})\s*\)/)
+if (defaultsMatch) {
+  const defaultsCode = defaultsMatch[1]
+  const defaultsSource = ts.createSourceFile(
+    'defaults.ts',
+    `const defaults = ${defaultsCode};`,
+    ts.ScriptTarget.Latest,
+    true,
+  )
+
+  ts.forEachChild(defaultsSource, (node) => {
+    if (ts.isVariableDeclaration(node) && node.name.getText() === 'defaults') {
+      const initializer = node.initializer
+      if (ts.isObjectLiteralExpression(initializer)) {
+        initializer.properties.forEach((prop) => {
+          if (ts.isPropertyAssignment(prop)) {
+            const propName = prop.name.getText()
+            const defaultValue = prop.initializer.getText()
+            if (propsInfo[propName]) {
+              propsInfo[propName].default = defaultValue
+            }
+          }
+        })
+      }
+    }
+  })
+}
+
+// 生成Markdown文档
+let md = '## Props\n\n'
+md += '| 属性名 | 类型 | 默认值 | 可选值 | 说明 |\n'
+md += '|--------|------|--------|--------|------|\n'
+
+Object.entries(propsInfo).forEach(([name, info]) => {
+  md += `| ${name} | ${info.type} | ${info.default || '-'} | ${
+    info.values ? info.values.join('、') : '-'
+  } | ${info.description || '-'} |\n`
+})
+
+// 写入文档文件
+fs.writeFileSync(path.join(__dirname, 'docs/button-props.md'), md)
+console.log('Props文档生成成功，包含可选值信息！')

package/component-helper.ts

@@ -157,12 +157,14 @@ export function generateWebTypes(options = {} as InstallOptions) {
     const fileContent = read(path)
     const parseContent = parse(_options, fileContent)
     const content = normalize(_options, parseContent, path)
-    if (content.title === 'hy-button') console.log(JSON.stringify(content))
+    content.props.content = content.props.content.map((item) => {
+      item.Values = item.Values.replace(/`|-/g, '')
+      return item
+    })
     return content
   })
   const { tags, attributes } = vetur(_options, data)
   const webTypesData = webTypes(_options, data)
-  console.log(_options, data)
 
   write(_options, 'tags', tags)
   write(_options, 'attributes', attributes)
@@ -173,5 +175,5 @@ generateWebTypes({
   entry: './dist/docs/components/hy-button/hy-button.md', // 你的组件路径
   outDir: 'dist', // 输出目录
   name: 'hy-app', // 组件库名字
-  version: '0.2.10', // 版本号
+  version: '0.2.14', // 版本号
 })

package/components/hy-button/HyButton.docgen.js

@@ -0,0 +1,6 @@
+// HyButton.docgen.js
+const { buttonProps } = require('./props.ts')
+
+module.exports = {
+  props: buttonProps,
+}

package/components/hy-button/hy-button.vue

@@ -1,7 +1,3 @@
-<!--
-  @component hy-button 按钮组件
-  @description 用于页面中的操作按钮，支持多种状态和样式
--->
 <template>
   <!-- #ifndef APP-NVUE -->
   <button
@@ -119,12 +115,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 从底部弹出的动作菜单面板组件
- *
- * @displayName HyButton 动作面板
- * @version 1.0.0
- */
 export default {
   name: 'hy-button',
   options: {
@@ -136,144 +126,165 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from 'vue'
+/**
+ * 提供试剂耗材的入库、申领、出库和明细查询等操作按钮
+ * @displayName hy-button
+ */
+// 支持 VueDocGen 生成文档时显示 JsDoc 的内容，也可以简单编写为：defineOptions({});
+defineOptions({})
+type MessageType = 'info' | 'primary' | 'error' | 'warning' | 'success'
+/**
+ * 334
+ * */
+export interface buttonProps {
+  /**
+   * 按钮类型
+   *
+   * @values primary,default,danger
+   * */
+  type: MessageType
+}
+// 支持 VueDocGen 生成文档时显示 JsDoc 的内容，也可以简单编写为：defineOptions({});
+defineOptions({})
+import { computed, type CSSProperties, toRefs, type PropType } from 'vue'
 import { bem, throttle } from '../../utils'
-import defaultProps from './props'
+import { defaultProps } from './props'
 import { ColorConfig } from '../../config'
 import type { HyButtonProps, IButtonEmits } from './typing.d.ts'
+import type HyIconProps from '../hy-icon/typing'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 import { HyApp } from 'hy-app/typing/modules/common'
 
-type MessageType = 'info' | 'primary' | 'error' | 'warning' | 'success'
-// const props = withDefaults(defineProps<{ type: MessageType }>(), { type: 'error' })
+// 可选：定义 props 类型
+// const props = withDefaults(defineProps<HyButtonProps>(), param)
 const props = defineProps({
+  /** 是否显示按钮的细边框 */
   hairline: {
     type: Boolean,
     default: false,
   },
+  /**
+   * 按钮的预置样式
+   * @values info,primary,error,warning,success
+   * */
   type: {
-    type: String,
+    type: String as PropType<HyApp.ThemeType>,
     default: 'primary',
-    validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
   },
+  /**
+   * 按钮尺寸
+   * @values large,medium,small,mini
+   * */
   size: {
-    type: String,
+    type: String as PropType<HyApp.SizeType | 'mini'>,
     default: 'medium',
-    validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
   },
+  /**
+   * 按钮形状
+   * @values circle,square
+   * */
   shape: {
-    type: String,
+    type: String as PropType<HyApp.ShapeType>,
     default: 'square',
-    validator: (v) => ['circle', 'square'].includes(v),
   },
+  /** 按钮是否镂空，背景色透明  */
   plain: {
     type: Boolean,
     default: false,
   },
+  /** 是否禁用 */
   disabled: {
     type: Boolean,
     default: false,
   },
+  /** 按钮名称前是否带 loading 图标 */
   loading: {
     type: Boolean,
     default: false,
   },
-  loadingText: {
-    type: String,
-    default: '',
-  },
+  /** 加载中提示文字 */
+  loadingText: String,
+  /**
+   * 加载状态图标类型
+   * @values spinner,circle,semicircle
+   * */
   loadingMode: {
-    type: String,
+    type: String as PropType<HyApp.LoadingMode>,
     default: 'spinner',
-    validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
   },
+  /** 加载图标大小 */
   loadingSize: {
-    type: Number,
+    type: [Number, String],
     default: 13,
   },
-  openType: {
-    type: String,
-    default: '',
-  },
-  formType: {
-    type: String,
-    default: '',
-  },
-  appParameter: {
-    type: String,
-    default: '',
-  },
+  /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
+  openType: String,
+  /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
+  formType: String,
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） */
+  appParameter: String,
+  /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
   hoverStopPropagation: {
     type: Boolean,
     default: true,
   },
+  /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） */
   lang: {
     type: String,
     default: 'en',
   },
-  sessionFrom: {
-    type: String,
-    default: '',
-  },
-  sendMessageTitle: {
-    type: String,
-    default: '',
-  },
-  sendMessagePath: {
-    type: String,
-    default: '',
-  },
-  sendMessageImg: {
-    type: String,
-    default: '',
-  },
+  /** 会话来源，openType="contact"时有效 */
+  sessionFrom: String,
+  /** 会话内消息卡片标题，openType="contact"时有效 */
+  sendMessageTitle: String,
+  /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
+  sendMessagePath: String,
+  /** 会话内消息卡片图片，openType="contact"时有效 */
+  sendMessageImg: String,
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
   showMessageCard: {
     type: Boolean,
     default: false,
   },
-  dataName: {
-    type: String,
-    default: '',
-  },
+  /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
+  dataName: String,
+  /** 节流时间，一定时间内只能触发一次 */
   throttleTime: {
     type: Number,
     default: 0,
   },
+  /** 按住后多久出现点击态，单位毫秒 */
   hoverStartTime: {
     type: Number,
     default: 0,
   },
+  /** 手指松开后点击态保留时间，单位毫秒 */
   hoverStayTime: {
     type: Number,
     default: 200,
   },
-  text: {
-    type: String,
-    default: '',
-  },
+  /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
+  text: String,
+  /** 按钮图标api集合 */
   icon: {
-    type: Object,
-    default: () => ({}),
-  },
-  color: {
-    type: String,
-    default: '',
+    type: Object as PropType<HyIconProps>,
   },
+  /** 按钮颜色，支持传入linear-gradient渐变色 */
+  color: String,
+  /** 阻止事件冒泡 */
   stop: {
     type: Boolean,
     default: true,
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   customStyle: {
-    type: CSSProperties,
-  },
-  /**阻止事件冒泡*/
-  customClass: {
-    type: String,
+    type: Object as PropType<CSSProperties>,
   },
+  /** 阻止事件冒泡 */
+  customClass: String,
 })
 const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)
 const emit = defineEmits<IButtonEmits>()

package/components/hy-button/props.ts

@@ -1,160 +1,159 @@
 import type { HyButtonProps } from './typing'
 import { HyApp } from 'hy-app/typing/modules/common'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import HyIconProps from '@/package/components/hy-icon/typing'
 
-const defaultProps = {
-  /**是否显示按钮的细边框*/
+export const defaultProps = {
+  /** 是否显示按钮的细边框 */
   hairline: {
     type: Boolean,
     default: false,
   },
-  /**按钮的预置样式*/
+  /** 按钮的预置样式 */
   type: {
-    type: String,
+    type: String as PropType<HyApp.ThemeType>,
     default: 'primary',
     validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
   },
-  /**按钮尺寸*/
+  /** 按钮尺寸 */
   size: {
-    type: String,
+    type: String as PropType<HyApp.SizeType | 'mini'>,
     default: 'medium',
     validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
   },
-  /**按钮形状*/
+  /** 按钮形状 */
   shape: {
-    type: String,
+    type: String as PropType<HyApp.ShapeType>,
     default: 'square',
     validator: (v) => ['circle', 'square'].includes(v),
   },
-  /**按钮是否镂空，背景色透明 */
+  /** 按钮是否镂空，背景色透明  */
   plain: {
     type: Boolean,
     default: false,
   },
-  /**是否禁用*/
+  /** 是否禁用 */
   disabled: {
     type: Boolean,
     default: false,
   },
-  /**按钮名称前是否带 loading 图标*/
+  /** 按钮名称前是否带 loading 图标 */
   loading: {
     type: Boolean,
     default: false,
   },
-  /**加载中提示文字*/
+  /** 加载中提示文字 */
   loadingText: {
     type: String,
     default: '',
   },
-  /**加载状态图标类型*/
+  /** 加载状态图标类型 */
   loadingMode: {
-    type: String,
+    type: String as PropType<HyApp.LoadingMode>,
     default: 'spinner',
     validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
   },
-  /**加载图标大小*/
+  /** 加载图标大小 */
   loadingSize: {
     type: Number,
     default: 13,
   },
-  /**开放能力，具体请看uniapp稳定关于button组件部分说明*/
+  /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
   openType: {
     type: String,
     default: '',
   },
-  /**用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件*/
+  /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
   formType: {
     type: String,
     default: '',
   },
-  /**打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）*/
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） */
   appParameter: {
     type: String,
     default: '',
   },
-  /**指定是否阻止本节点的祖先节点出现点击态，微信小程序有效*/
+  /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
   hoverStopPropagation: {
     type: Boolean,
     default: true,
   },
-  /**指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）*/
+  /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） */
   lang: {
     type: String,
     default: 'en',
   },
-  /**会话来源，openType="contact"时有效*/
+  /** 会话来源，openType="contact"时有效 */
   sessionFrom: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片标题，openType="contact"时有效*/
+  /** 会话内消息卡片标题，openType="contact"时有效 */
   sendMessageTitle: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片点击跳转小程序路径，openType="contact"时有效*/
+  /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
   sendMessagePath: {
     type: String,
     default: '',
   },
-  /**会话内消息卡片图片，openType="contact"时有效*/
+  /** 会话内消息卡片图片，openType="contact"时有效 */
   sendMessageImg: {
     type: String,
     default: '',
   },
-  /**是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效*/
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
   showMessageCard: {
     type: Boolean,
     default: false,
   },
-  /**额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取*/
+  /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
   dataName: {
     type: String,
     default: '',
   },
-  /**节流时间，一定时间内只能触发一次*/
+  /** 节流时间，一定时间内只能触发一次 */
   throttleTime: {
     type: Number,
     default: 0,
   },
-  /**按住后多久出现点击态，单位毫秒*/
+  /** 按住后多久出现点击态，单位毫秒 */
   hoverStartTime: {
     type: Number,
     default: 0,
   },
-  /**手指松开后点击态保留时间，单位毫秒*/
+  /** 手指松开后点击态保留时间，单位毫秒 */
   hoverStayTime: {
     type: Number,
     default: 200,
   },
-  /**按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）*/
+  /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
   text: {
     type: String,
     default: '',
   },
-  /**按钮图标api集合*/
+  /** 按钮图标api集合 */
   icon: {
-    type: Object,
+    type: Object as PropType<HyIconProps>,
     default: () => ({}),
   },
-  /**按钮颜色，支持传入linear-gradient渐变色*/
+  /** 按钮颜色，支持传入linear-gradient渐变色 */
   color: {
     type: String,
     default: '',
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   stop: {
     type: Boolean,
     default: true,
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   customStyle: {
-    type: CSSProperties,
+    type: Object as PropType<CSSProperties>,
   },
-  /**阻止事件冒泡*/
+  /** 阻止事件冒泡 */
   customClass: {
     type: String,
   },
-}
-
-export default defaultProps
+} as const

package/docgen.config.js

@@ -1,9 +1,8 @@
 const path = require('path')
 
 module.exports = {
-  components: ['./components/**/*.vue'],
+  components: ['./components/hy-button/hy-button.vue'],
   outDir: 'dist/docs',
-  defaultExamples: true,
   apiOptions: {
     jsx: false,
     alias: {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "hy-app",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "测试组件提示",
   "main": "./index.ts",
   "private": false,
   "scripts": {
     "web-types": "vue-docgen-web-types  --configFile web-types.config.js",
-    "web": "npx web-types-generator --name hy-app --src ./components --out ./web-types.json",
     "doc": "npx vue-docgen -c docgen.config.js",
-    "gen:web-types": "tsx ./component-helper.ts"
+    "gen:web-types": "tsx ./component-helper.ts",
+    "docs": "npx ts-node compiler.ts"
   },
   "keywords": [
     "华玥组件库",
@@ -19,9 +19,11 @@
   "author": "gaoxianhua",
   "license": "MIT",
   "devDependencies": {
-    "component-helper": "1.3.1-rc.1",
+    "@types/node": "^24.0.15",
     "components-helper": "^2.2.0",
+    "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
     "vue-docgen-api": "^4.79.2",
     "vue-docgen-cli": "^4.79.0",
     "vue-docgen-web-types": "^0.1.8"