hy-app 0.2.12 → 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

@@ -0,0 +1,179 @@
+import fg from 'fast-glob'
+import { read, parse, vetur, webTypes, write, isString } from 'components-helper'
+import type {
+  Config,
+  InstallOptions,
+  NormalizeData,
+  Options,
+  ParseData,
+  ParseTable,
+} from 'components-helper'
+
+const config: Config = {
+  tags: 'tags.json',
+  attributes: 'attributes.json',
+  webTypes: 'web-types.json',
+  titleRegExp: /#+\s+(.*)\n+([^(#|\n)]*)/g,
+  tableRegExp: /#+\s+(.*)\n+(\|?.+\|.+)\n\|?\s*:?-+:?\s*\|.+((\n\|?.+\|.+)+)/g,
+  fileNameRegExp: /\/((\w|-)+)\.\w+$/,
+  separator: ',', // values截取
+  props: 'Props',
+  propsName: 'Prop name',
+  propsType: 'Type',
+  propsDescription: 'Description',
+  propsOptions: 'Values',
+  propsDefault: 'Default',
+  events: 'events',
+  eventsName: 'Event name',
+  eventsDescription: 'Description',
+  slots: 'slots',
+  slotsName: 'Name',
+  slotsDescription: 'Description',
+  slotsType: 'Type',
+  slotsSubtags: 'Subtags',
+  directives: 'directives',
+  directivesName: 'Name',
+  directivesType: 'Type',
+  directivesDescription: 'Description',
+}
+
+function normalize(options: Options, data: ParseData, path: string): NormalizeData {
+  const { fileNameRegExp, props, events, slots, directives } = options
+  const _fileNameRegExp = isString(fileNameRegExp) ? new RegExp(fileNameRegExp) : fileNameRegExp
+  const _path = path.match(_fileNameRegExp)
+  const fileName = _path ? _path[1] : ''
+  const _data: NormalizeData = Object.assign(data, { path, fileName })
+  const _props = new RegExp(props, 'i')
+  const _events = new RegExp(events, 'i')
+  const _slots = new RegExp(slots, 'i')
+  const _directives = new RegExp(directives, 'i')
+
+  if (!_data.table || !_data.table.length) return _data
+
+  for (let i = 0; i < _data.table.length; i++) {
+    const item = _data.table[i]
+    const title = item.title
+    if (!title) continue
+
+    if (_props.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'props',
+        regExp: _props,
+      })
+    } else if (_events.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'events',
+        regExp: _events,
+      })
+    } else if (_slots.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'slots',
+        regExp: _slots,
+      })
+    } else if (_directives.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'directives',
+        regExp: _directives,
+      })
+    }
+  }
+  return _data
+}
+
+function setData({
+  data,
+  key,
+  item,
+  title,
+  path,
+  fileName,
+  regExp,
+}: {
+  data: NormalizeData
+  key: 'props' | 'events' | 'slots' | 'directives'
+  item: ParseTable
+  title: string
+  path: string
+  fileName: string
+  regExp: RegExp
+}) {
+  const childTitle = title.replace(regExp, '').trim()
+
+  if (childTitle) {
+    const childHeader = data.headers?.find((item) => item.title === childTitle)
+    const childItem = {
+      path,
+      fileName,
+      title: childTitle,
+      description: childHeader?.description || data.description,
+      [key]: item,
+    }
+
+    if (!data.children) {
+      data.children = [childItem]
+    } else {
+      const child = data.children.find((item) => item.title === childTitle)
+
+      if (child) {
+        child[key] = item
+      } else {
+        data.children.push(childItem)
+      }
+    }
+  } else {
+    data[key] = item
+  }
+}
+
+export function generateWebTypes(options = {} as InstallOptions) {
+  if (!options.entry) throw new Error('entry must be a string (non empty) or an array of strings')
+  if (!options.outDir) throw new Error('outDir must be a string (non empty)')
+  if (!options.name) console.warn('missing property "name"')
+  if (!options.version) console.warn('missing property "version"')
+
+  const _options: Options = Object.assign(config, options)
+  const files: string[] = fg.sync(_options.entry, _options.fastGlobConfig)
+  const data = files.map((path) => {
+    const fileContent = read(path)
+    const parseContent = parse(_options, fileContent)
+    const content = normalize(_options, parseContent, path)
+    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)
+
+  write(_options, 'tags', tags)
+  write(_options, 'attributes', attributes)
+  write(_options, 'webTypes', webTypesData)
+}
+
+generateWebTypes({
+  entry: './dist/docs/components/hy-button/hy-button.md', // 你的组件路径
+  outDir: 'dist', // 输出目录
+  name: 'hy-app', // 组件库名字
+  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

@@ -47,6 +47,7 @@
         :round="icon?.round"
         :customStyle="icon?.customStyle || { marginRight: '2px' }"
       ></HyIcon>
+      <!-- @slot 插入默认的值 -->
       <slot>
         <text class="hy-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
       </slot>
@@ -63,8 +64,8 @@
       !disabled && !loading && !color && (plain || type === 'info')
         ? 'hy-button--active--plain'
         : !disabled && !loading && !plain
-          ? 'hy-button--active'
-          : ''
+        ? 'hy-button--active'
+        : ''
     "
     @click="clickHandler"
     :class="bemClass"
@@ -126,49 +127,164 @@ export default {
 
 <script setup lang="ts">
 /**
- * 自定义按钮组件
- * @description 用于表单提交、操作触发等场景，支持多种尺寸和状态
- * @component hy-button
+ * 提供试剂耗材的入库、申领、出库和明细查询等操作按钮
+ * @displayName hy-button
  */
-
-import { computed, type CSSProperties, toRefs } from 'vue'
+// 支持 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'
 
-const props = withDefaults(defineProps<HyButtonProps>(), {
-  hairline: false,
-  type: 'primary',
-  size: 'medium',
-  shape: 'square',
-  plain: false,
-  disabled: false,
-  loading: false,
-  loadingText: '',
-  loadingMode: 'spinner',
-  loadingSize: 13,
-  openType: '',
-  formType: '',
-  appParameter: '',
-  hoverStopPropagation: true,
-  lang: 'en',
-  sessionFrom: '',
-  sendMessageTitle: '',
-  sendMessagePath: '',
-  sendMessageImg: '',
-  showMessageCard: false,
-  dataName: '',
-  throttleTime: 0,
-  hoverStartTime: 0,
-  hoverStayTime: 200,
-  text: '',
-  color: '',
-  stop: true,
+// 可选：定义 props 类型
+// const props = withDefaults(defineProps<HyButtonProps>(), param)
+const props = defineProps({
+  /** 是否显示按钮的细边框 */
+  hairline: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 按钮的预置样式
+   * @values info,primary,error,warning,success
+   * */
+  type: {
+    type: String as PropType<HyApp.ThemeType>,
+    default: 'primary',
+  },
+  /**
+   * 按钮尺寸
+   * @values large,medium,small,mini
+   * */
+  size: {
+    type: String as PropType<HyApp.SizeType | 'mini'>,
+    default: 'medium',
+  },
+  /**
+   * 按钮形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String as PropType<HyApp.ShapeType>,
+    default: 'square',
+  },
+  /** 按钮是否镂空，背景色透明  */
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 按钮名称前是否带 loading 图标 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 加载中提示文字 */
+  loadingText: String,
+  /**
+   * 加载状态图标类型
+   * @values spinner,circle,semicircle
+   * */
+  loadingMode: {
+    type: String as PropType<HyApp.LoadingMode>,
+    default: 'spinner',
+  },
+  /** 加载图标大小 */
+  loadingSize: {
+    type: [Number, String],
+    default: 13,
+  },
+  /** 开放能力，具体请看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',
+  },
+  /** 会话来源，openType="contact"时有效 */
+  sessionFrom: String,
+  /** 会话内消息卡片标题，openType="contact"时有效 */
+  sendMessageTitle: String,
+  /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
+  sendMessagePath: String,
+  /** 会话内消息卡片图片，openType="contact"时有效 */
+  sendMessageImg: String,
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
+  showMessageCard: {
+    type: Boolean,
+    default: false,
+  },
+  /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
+  dataName: String,
+  /** 节流时间，一定时间内只能触发一次 */
+  throttleTime: {
+    type: Number,
+    default: 0,
+  },
+  /** 按住后多久出现点击态，单位毫秒 */
+  hoverStartTime: {
+    type: Number,
+    default: 0,
+  },
+  /** 手指松开后点击态保留时间，单位毫秒 */
+  hoverStayTime: {
+    type: Number,
+    default: 200,
+  },
+  /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
+  text: String,
+  /** 按钮图标api集合 */
+  icon: {
+    type: Object as PropType<HyIconProps>,
+  },
+  /** 按钮颜色，支持传入linear-gradient渐变色 */
+  color: String,
+  /** 阻止事件冒泡 */
+  stop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 阻止事件冒泡 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 阻止事件冒泡 */
+  customClass: String,
 })
 const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)
 const emit = defineEmits<IButtonEmits>()