@hoenergy/hoenergy-template-pc 1.0.0

package/src/components/data/table/FormaxTable/src/hooks/usePagination.ts

@@ -0,0 +1,65 @@
+import type { PaginationProps } from '../types/pagination'
+import type { BasicTableProps } from '../types/table'
+import { computed, unref, ref, ComputedRef, watch } from 'vue'
+import { DEFAULTPAGESIZE, PAGESIZES } from '../const'
+
+const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean'
+
+export function usePagination(refProps: ComputedRef<BasicTableProps>) {
+  const configRef = ref<PaginationProps>({})
+  const show = ref(true)
+
+  watch(
+    () => unref(refProps).pagination,
+    (pagination) => {
+      if (!isBoolean(pagination) && pagination) {
+        configRef.value = {
+          ...unref(configRef),
+          ...(pagination ?? {}),
+        }
+      }
+    },
+    {
+      deep: true,
+    }
+  )
+
+  const getPaginationInfo = computed((): PaginationProps | boolean => {
+    const { pagination } = unref(refProps)
+    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
+      return false
+    }
+    return {
+      page: 1,
+      pageSize: DEFAULTPAGESIZE,
+      pageSizes: PAGESIZES,
+      showSizePicker: true,
+      showQuickJumper: true,
+      prefix: (pagingInfo: any) => `共 ${pagingInfo.itemCount} 条`,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+    }
+  })
+
+  function setPagination(info: Partial<PaginationProps>) {
+    const paginationInfo = unref(getPaginationInfo)
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    }
+  }
+
+  function getPagination() {
+    return unref(getPaginationInfo)
+  }
+
+  function getShowPagination() {
+    return unref(show)
+  }
+
+  async function setShowPagination(flag: boolean) {
+    show.value = flag
+  }
+
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination }
+}

package/src/components/data/table/FormaxTable/src/hooks/useTableContext.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue'
+import type { BasicTableProps, TableActionType } from '../types/table'
+import { provide, inject, ComputedRef } from 'vue'
+import type { Nullable, Recordable } from '../../../types'
+
+const key = Symbol('s-table')
+
+type Instance = TableActionType & {
+  wrapRef: Ref<Nullable<HTMLElement>>
+  getBindValues: ComputedRef<Recordable>
+}
+
+type RetInstance = Omit<Instance, 'getBindValues'> & {
+  getBindValues: ComputedRef<BasicTableProps>
+}
+
+export function createTableContext(instance: Instance) {
+  provide(key, instance)
+}
+
+export function useTableContext(): RetInstance {
+  return inject(key) as RetInstance
+}

package/src/components/data/table/FormaxTable/src/props.ts

@@ -0,0 +1,77 @@
+import type { PropType } from 'vue'
+import { NDataTable } from 'naive-ui'
+import { BasicColumn } from './types/table'
+
+export const basicProps = {
+  ...NDataTable.props,
+  title: {
+    type: String,
+    default: null,
+  },
+  titleTooltip: {
+    type: String,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  dataSource: {
+    type: [Object],
+    default: () => [],
+  },
+  columns: {
+    type: [Array] as PropType<BasicColumn[]>,
+    default: () => [],
+    required: true,
+  },
+  beforeRequest: {
+    type: Function as PropType<(...arg: any[]) => void | Promise<any>>,
+    default: null,
+  },
+  request: {
+    type: Function as PropType<(...arg: any[]) => Promise<any>>,
+    default: null,
+  },
+  toolbarShow: {
+    type: Boolean,
+    default: false,
+  },
+  afterRequest: {
+    type: Function as PropType<(...arg: any[]) => void | Promise<any>>,
+    default: null,
+  },
+  rowKey: {
+    type: [String, Function] as PropType<string | ((record: any) => string)>,
+    default: undefined,
+  },
+  hasForm: {
+    type: Boolean,
+    default: true,
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => ({}),
+  },
+  // 废弃
+  showPagination: {
+    type: [String, Boolean],
+    default: 'auto',
+  },
+  actionColumn: {
+    type: Object as PropType<BasicColumn>,
+    default: null,
+  },
+  canResize: {
+    type: Boolean,
+    default: true,
+  },
+  canExpand: {
+    type: Boolean,
+    default: false,
+  },
+  resizeHeightOffset: {
+    type: Number,
+    default: 0,
+  },
+}

package/src/components/data/table/FormaxTable/src/types/componentType.ts

@@ -0,0 +1,9 @@
+export type ComponentType =
+  | 'NInput'
+  | 'NInputNumber'
+  | 'NSelect'
+  | 'NCheckbox'
+  | 'NSwitch'
+  | 'NDatePicker'
+  | 'NTimePicker'
+  | 'NCascader';

package/src/components/data/table/FormaxTable/src/types/pagination.ts

@@ -0,0 +1,10 @@
+export interface PaginationProps {
+  page?: number; //�ܿ�ģʽ�µĵ�ǰҳ
+  itemCount?: number; //������
+  pageCount?: number; //��ҳ��
+  pageSize?: number; //�ܿ�ģʽ�µķ�ҳ��С
+  pageSizes?: number[]; //ÿҳ������ ���Զ���
+  showSizePicker?: boolean; //�Ƿ���ʾÿҳ������ѡ����
+  showQuickJumper?: boolean; //�Ƿ���ʾ������ת
+  prefix?: any; //��ҳǰ׺
+}

package/src/components/data/table/FormaxTable/src/types/table.ts

@@ -0,0 +1,45 @@
+import type {
+  InternalRowData,
+  TableBaseColumn,
+} from 'naive-ui/lib/data-table/src/interface'
+import { ComponentType } from './componentType'
+export interface BasicColumn<T = InternalRowData> extends TableBaseColumn<T> {
+  //编辑表格
+  edit?: boolean
+  editRow?: boolean
+  editable?: boolean
+  editComponent?: ComponentType
+  editComponentProps?: any
+  editRule?: boolean | ((text: string, record: any) => Promise<string>)
+  editValueMap?: (value: any) => string
+  onEditRow?: () => void
+  // 权限编码控制是否显示
+  auth?: string[]
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean)
+  // 控制是否支持拖拽，默认支持
+  draggable?: boolean
+}
+
+export interface TableActionType {
+  reload: (opt: any) => Promise<void>
+  emit?: any
+  getColumns: (opt?: any) => BasicColumn[]
+  setColumns: (columns: BasicColumn[] | string[]) => void
+}
+
+export interface BasicTableProps {
+  title?: string
+  dataSource: Function
+  columns: any[]
+  pagination: object
+  showPagination: boolean
+  actionColumn: any
+  canResize: boolean
+  resizeHeightOffset: number
+  loading: boolean
+  maxHeight?: number
+  titleTooltip?: string
+  toolbarShow?: boolean
+  bordered?: boolean
+}

package/src/components/data/table/FormaxTable/src/types/tableAction.ts

@@ -0,0 +1,25 @@
+import { NButton } from 'naive-ui'
+import type { Component } from 'vue'
+
+export interface ActionItem extends Partial<InstanceType<typeof NButton>> {
+  onClick?: any
+  label?: string
+  type?: 'success' | 'error' | 'warning' | 'info' | 'primary' | 'default'
+  color?: string
+  icon?: Component
+  popConfirm?: PopConfirm
+  disabled?: boolean
+  divider?: boolean
+  isPopConfirm?: boolean
+  auth?: string | string[]
+  ifShow?: boolean | ((action: ActionItem) => boolean)
+}
+
+export interface PopConfirm {
+  title: string
+  okText?: string
+  cancelText?: string
+  confirm: any
+  cancel?: any
+  confirmIcon?: Component
+}

package/src/components/data/table/FormaxTable/src/utils.ts

@@ -0,0 +1,65 @@
+
+import { onMounted, onUnmounted } from 'vue';
+
+export function isBoolean(val: unknown): val is boolean {
+  return typeof val === 'boolean';
+}
+
+export function useWindowSizeFn(fn: () => void, wait = 150) {
+  let timer: any = null;
+  const handler = () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(fn, wait);
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', handler);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handler);
+    if (timer) clearTimeout(timer);
+  });
+}
+
+export interface ViewportOffsetResult {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  rightIncludeBody: number;
+  bottomIncludeBody: number;
+}
+
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement;
+
+  const docScrollLeft = doc.scrollLeft;
+  const docScrollTop = doc.scrollTop;
+  const docClientLeft = doc.clientLeft;
+  const docClientTop = doc.clientTop;
+
+  const pageXOffset = window.pageXOffset;
+  const pageYOffset = window.pageYOffset;
+
+  const box = element.getBoundingClientRect();
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
+  const offsetLeft = retLeft + pageXOffset;
+  const offsetTop = rectTop + pageYOffset;
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  return {
+    left,
+    top,
+    right: doc.clientWidth - rectWidth - left,
+    bottom: doc.clientHeight - rectHeight - top,
+    rightIncludeBody: doc.clientWidth - left,
+    bottomIncludeBody: doc.clientHeight - top,
+  };
+}

package/src/components/general/button/FormaxButton/index.ts

@@ -0,0 +1,70 @@
+import { defineComponent, h } from 'vue'
+import { FormaxComponent, ComponentMeta } from '../../../../types'
+
+export const FormaxButton = defineComponent({
+  name: 'FormaxButton',
+  props: {
+    label: {
+      type: String,
+      default: 'Button',
+    },
+    type: {
+      type: String,
+      default: 'default', // primary, danger, default
+    },
+  },
+  setup(props: any, { emit, slots }: any) {
+    return () => {
+      const style = {
+        padding: '8px 16px',
+        borderRadius: '4px',
+        border: 0,
+        cursor: 'pointer',
+        backgroundColor:
+          props.type === 'primary'
+            ? '#007bff'
+            : props.type === 'danger'
+            ? '#dc3545'
+            : '#007bff',
+        color: '#fff',
+        fontSize: '14px',
+      }
+
+      const label = slots.default ? slots.default() : props.label
+
+      return h(
+        'button',
+        {
+          style,
+          onClick: (event: Event) => emit('click', event),
+        },
+        label
+      )
+    }
+  },
+}) as FormaxComponent
+
+const meta: ComponentMeta = {
+  name: 'FormaxButton',
+  label: '通用按钮',
+  description: '一个基础按钮组件',
+  props: {
+    label: { type: 'string', default: 'Button', description: '按钮文本' },
+    type: {
+      type: 'string',
+      default: 'default',
+      description: '按钮类型',
+      options: ['default', 'primary', 'danger'],
+    },
+  },
+  events: [{ name: 'click', description: '点击按钮时触发', payload: 'Event' }],
+  slots: [{ name: 'default', description: '按钮文本内容' }],
+  usage: `<FormaxButton type="primary" label="Click Me" @click="handleClick" />`,
+  package: 'general',
+  category: 'button',
+  key: 'FormaxButton',
+  conKey: 'GCFormaxButton',
+  image: 'GCFormaxButton.png',
+}
+
+FormaxButton.__doc_meta__ = meta

package/src/index.ts

@@ -0,0 +1,66 @@
+import { FormaxButton } from './components/general/button/FormaxButton'
+import { FormaxTableComponent as FormaxTable } from './components/data/table/FormaxTable'
+import { ComponentMeta, FormaxComponent } from './types'
+// 动态导入语言包，减少首次加载体积
+import enUSJSON from './locales/en.json'
+import zhCNJSON from './locales/zh-CN.json'
+
+export const localesObj = {
+  enUS: enUSJSON,
+  zhCN: zhCNJSON,
+}
+
+const components: Record<string, FormaxComponent> = {
+  FormaxButton,
+  FormaxTable,
+}
+
+export function install(app: any) {
+  Object.keys(components).forEach((key) => {
+    app.component(key, components[key])
+  })
+}
+
+// Extract metadata for low-code platform
+export const componentList: ComponentMeta[] = Object.values(components)
+  .map((comp) => comp.__doc_meta__)
+  .filter((meta): meta is ComponentMeta => !!meta)
+export { FormaxButton, FormaxTable }
+export * from './types'
+
+export default {
+  install,
+  componentList,
+  ...components,
+}
+const __pkgLabelMap: Record<string, string> = {
+  general: '通用组件',
+  data: '数据组件',
+}
+const __catLabelMap: Record<string, string> = { button: '按钮', table: '表格' }
+
+export const componentGoList: any[] = Object.values(components).reduce(
+  (acc: any[], comp: any) => {
+    const meta = comp.__doc_meta__ as ComponentMeta | undefined
+    if (!meta || !meta.package || !meta.category) return acc
+    const pkg = meta.package
+    const cat = meta.category
+    const key = meta.key || meta.name
+    let group = acc.find((g: any) => g.key === pkg)
+    if (!group) {
+      group = { key: pkg, label: __pkgLabelMap[pkg] || pkg, list: [] }
+      acc.push(group)
+    }
+    group.list.push({
+      key: cat,
+      title: meta.label,
+      package: pkg,
+      category: `${pkg[0].toUpperCase()}${cat}`,
+      categoryName: __catLabelMap[cat] || cat,
+      conKey: `${pkg[0].toUpperCase()}C${key}`,
+      image: `${pkg[0].toUpperCase()}C${key}.png`,
+    })
+    return acc
+  },
+  []
+)

package/src/locales/en.json

@@ -0,0 +1,13 @@
+{
+  "152ad41b95": "column display",
+  "4b9c3271dc": "reset",
+  "949a8b7bd2": "Column Settings",
+  "2b6bc0f293": "operation",
+  "0ec9eaf9c3": "more",
+  "63b6c98032": "Zebra Pattern Table",
+  "694fc5efa9": "refresh",
+  "1cdb193303": "density",
+  "03e59bb33c": "compact",
+  "18c63459a2": "default",
+  "43e534acf9": "loose"
+}

package/src/locales/zh-CN.json

@@ -0,0 +1,13 @@
+{
+  "152ad41b95": "列展示",
+  "4b9c3271dc": "重置",
+  "949a8b7bd2": "列设置",
+  "2b6bc0f293": "操作",
+  "0ec9eaf9c3": "更多",
+  "63b6c98032": "表格斑马纹",
+  "694fc5efa9": "刷新",
+  "1cdb193303": "密度",
+  "03e59bb33c": "紧凑",
+  "18c63459a2": "默认",
+  "43e534acf9": "宽松"
+}

package/src/mock.ts

@@ -0,0 +1,17 @@
+export const componentGoList = [
+    {
+        key: 'general',
+        label: '通用组件',
+        list: [
+            {
+                key: 'button',
+                title: '通用按钮',
+                package: 'general',
+                category: 'Gbutton',
+                categoryName: '按钮',
+                conKey: "GCFormaxButton",
+                image: "GCFormaxButton.png"
+            }
+        ]
+    }
+]

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+import type { DefineComponent } from 'vue'
+
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/types/i18n-auto-extractor.d.ts

@@ -0,0 +1,3 @@
+declare module 'i18n-auto-extractor' {
+  export function $at(text: string): string
+}

package/src/types.ts

@@ -0,0 +1,40 @@
+export interface PropMeta {
+  type: string
+  default?: any
+  description: string
+  options?: string[] // For enum types
+}
+
+export interface EventMeta {
+  name: string
+  description: string
+  payload?: string
+}
+
+export interface SlotMeta {
+  name: string
+  description: string
+}
+
+export type Nullable<T> = T | null
+export type Recordable<T = any> = Record<string, T>
+
+export interface ComponentMeta {
+  name: string
+  label: string
+  description: string
+  props: Record<string, PropMeta>
+  events: EventMeta[]
+  slots?: SlotMeta[]
+  usage: string
+  package?: string
+  category?: string
+  key?: string
+  conKey?: string
+  image?: string
+}
+
+// Type for the component with attached metadata
+export type FormaxComponent = any & {
+  __doc_meta__?: ComponentMeta
+}

package/tailwind.config.cjs

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './docs/**/*.{html,js}',
+    './src/**/*.{js,ts,jsx,tsx,vue}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    // 原有配置保留，新增/修改以下项
+    "resolveJsonModule": true, // 核心：开启 JSON 模块解析
+    "allowSyntheticDefaultImports": true // 可选：兼容默认导出
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  esbuildPlugins: [
+    {
+      name: 'external-vue',
+      setup(build) {
+        build.onResolve({ filter: /\.vue$/ }, (args) => ({
+          path: args.path,
+          external: true,
+        }))
+      },
+    },
+  ],
+  external: ['naive-ui', 'vue', '@vicons/antd', 'i18n-auto-extractor'],
+})

package/vite.config.ts

@@ -0,0 +1,59 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(({ mode }) => {
+  const isLibrary = mode === 'library'
+
+  return {
+    root: isLibrary ? '.' : 'playground',
+    plugins: [
+      vue(),
+      isLibrary &&
+        dts({
+          include: ['src/**/*.ts', 'src/**/*.vue'],
+          outputDir: 'dist',
+        }),
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    build: isLibrary
+      ? {
+          lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'FormaxUI',
+            fileName: (format) => `index.${format === 'es' ? 'mjs' : 'js'}`,
+            formats: ['es', 'cjs', 'umd'],
+          },
+          rollupOptions: {
+            external: [
+              'vue',
+              'naive-ui',
+              '@vicons/antd',
+              'i18n-auto-extractor',
+            ],
+            output: {
+              globals: {
+                vue: 'Vue',
+                'naive-ui': 'naive',
+                '@vicons/antd': 'vicons',
+                'i18n-auto-extractor': 'i18nAutoExtractor',
+              },
+            },
+          },
+          outDir: 'dist',
+          emptyOutDir: true,
+        }
+      : {
+          outDir: path.resolve(__dirname, 'dist-playground'),
+        },
+    server: {
+      port: 3001,
+      open: true,
+    },
+  }
+})