dpzvc3-ui 3.0.6 → 3.1.0

package/dist-prod/upload.0638581e551ed9afaba2.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.0638581e551ed9afaba2.chunk.js","mappings":"8IAEMA,EAAa,CCDZC,MAAM,UDEPC,EAAa,CAAC,OCmBpB,SAAeC,EAAAA,EAAAA,IAAgB,CAC7BC,KAAM,aACNC,WAAY,CACV,EAEFC,MAAI,WACF,IAAMC,GAAQC,EAAAA,EAAAA,IAAoD,IAC5DC,GAASD,EAAAA,EAAAA,IAAI,MAMnB,MAAO,CACLD,MAAAA,EACAE,OAAAA,EACAC,aAPmB,SAACC,GACpBJ,EAAMK,MAAQD,CAChB,EAOF,I,QCjCF,MAEA,GAFiC,E,QAAA,GAAgB,EAAQ,CAAC,CAAC,SFFrD,SAAiBE,EAAUC,EAAYC,EAAYC,EAAYC,EAAWC,GAC9E,IAAMC,GAAoBC,EAAAA,EAAAA,IAAkB,UAAU,GAEtD,OAAQC,EAAAA,EAAAA,OCPRC,EAAAA,EAAAA,IAcM,MAdNtB,EAcM,EAbJuB,EAAAA,EAAAA,IAIEJ,EAAA,CAHAX,IAAI,SACHgB,UAAU,EACVC,eAAgBZ,EAAAH,cDQhB,KAAM,EAAe,CAAC,mBCLTG,EAAAN,MAAMmB,SDOjBL,EAAAA,EAAAA,KAAW,ICNdC,EAAAA,EAAAA,IAICK,EAAAA,GAAA,CAAAC,IAAA,IAAAC,EAAAA,EAAAA,IAHyBhB,EAAAN,MAAK,SAArBuB,EAAMC,GDMZ,OAAQV,EAAAA,EAAAA,OCPZC,EAAAA,EAAAA,IAIC,OAFEM,IAAKG,EACLC,IAAKF,EAAKG,QDON,KAAM,EAAe/B,EAC1B,GAAI,OACJgC,EAAAA,EAAAA,IAAoB,QAAQ,IAEpC,GEhB4E,CAAC,YAAY,oB,cCJzF,IAAIC,EAAU,EAAQ,MACnBA,EAAQC,aAAYD,EAAUA,EAAQE,SACnB,iBAAZF,IAAsBA,EAAU,CAAC,CAACG,EAAOC,GAAIJ,EAAS,MAC7DA,EAAQK,SAAQF,EAAOG,QAAUN,EAAQK,SAG/BE,EADH,UACO,WAAYP,GAAS,EAAM,CAAC,E,0FCNzCQ,E,MAA0B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACN,EAAOC,GAAI,gQAWA,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,yBAAyB,oCAAoC,MAAQ,GAAG,SAAW,2GAA2G,eAAiB,CAAC,uTAAuT,+NAA+N,WAAa,MAEvzB,S","sources":["webpack://dpzvc3-ui/../../%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/dpzvc3/src/views/Upload.vue?a55e","webpack://dpzvc3-ui/../../%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/dpzvc3/src/views/Upload.vue","webpack://dpzvc3-ui/./src/views/Upload.vue","webpack://dpzvc3-ui/./src/views/Upload.vue?93fe","webpack://dpzvc3-ui/./src/views/Upload.vue?4ceb"],"sourcesContent":["import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"Upload\" }\nconst _hoisted_2 = [\"src\"]\n\nexport function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {\n  const _component_Upload = _resolveComponent(\"Upload\", true)!\n\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _createVNode(_component_Upload, {\n      ref: \"upload\",\n      multiple: true,\n      onOnChangeFile: _ctx.onChangeFile\n    }, null, 8 /* PROPS */, [\"onOnChangeFile\"]),\n    (_ctx.files.length)\n      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.files, (item, index) => {\n          return (_openBlock(), _createElementBlock(\"img\", {\n            key: index,\n            src: item.base64\n          }, null, 8 /* PROPS */, _hoisted_2))\n        }), 128 /* KEYED_FRAGMENT */))\n      : _createCommentVNode(\"v-if\", true)\n  ]))\n}","<template>\n  <div class=\"Upload\">\n    <Upload\n      ref=\"upload\"\n      :multiple=\"true\"\n      @on-change-file=\"onChangeFile\"\n    />\n\n    <template v-if=\"files.length\">\n      <img\n        v-for=\"(item, index) in files\"\n        :key=\"index\"\n        :src=\"item.base64\"\n      >\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, defineComponent } from 'vue'\n// import Upload from '@/components/upload'\n// import type { UploadProps } from '@/components/upload/types'\nexport default defineComponent({\n  name: 'ViewUpload',\n  components: {\n    // Upload\n  },\n  setup () {\n    const files = ref<Array<{ base64: string, clearBase64: string }>>([])\n    const upload = ref(null)\n\n    const onChangeFile = (newFiles: any[]) => {\n      files.value = newFiles\n    }\n\n    return {\n      files,\n      upload,\n      onChangeFile\n    }\n  }\n})\n</script>\n\n<style lang=\"less\" scoped>\n.Upload {\n  height: 100%;\n\n  .upload-box {\n    width: 200px;\n    height: 100px;\n    background: #008cee;\n    color: #ffffff;\n    text-align: center;\n    line-height: 100px;\n  }\n\n  // img {\n  //   width: 100px;\n  //   height: 100px;\n  //   margin: 5px;\n  //   object-fit: cover;\n  // }\n}\n</style>\n","import { render } from \"./Upload.vue?vue&type=template&id=5116d252&scoped=true&ts=true\"\nimport script from \"./Upload.vue?vue&type=script&lang=ts\"\nexport * from \"./Upload.vue?vue&type=script&lang=ts\"\n\nimport \"./Upload.vue?vue&type=style&index=0&id=5116d252&lang=less&scoped=true\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-5116d252\"]])\n\nexport default __exports__","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/dist/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/less-loader/dist/cjs.js!../../node_modules/vue-loader/dist/index.js??ruleSet[1].rules[9].use[0]!./Upload.vue?vue&type=style&index=0&id=5116d252&lang=less&scoped=true\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"3983d9c4\", content, true, {});","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.Upload[data-v-5116d252] {\n  height: 100%;\n}\n.Upload .upload-box[data-v-5116d252] {\n  width: 200px;\n  height: 100px;\n  background: #008cee;\n  color: #ffffff;\n  text-align: center;\n  line-height: 100px;\n}\n/*# sourceMappingURL=Upload.css.map */`, \"\",{\"version\":3,\"sources\":[\"webpack://./Upload.vue\",\"webpack://./src/views/Upload.vue\"],\"names\":[],\"mappings\":\"AACA;EACE,YAAA;ACAF;ADDA;EAII,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,kBAAA;ACAJ;AACA,qCAAqC\",\"sourcesContent\":[\"\\n.Upload {\\n  height: 100%;\\n\\n  .upload-box {\\n    width: 200px;\\n    height: 100px;\\n    background: #008cee;\\n    color: #ffffff;\\n    text-align: center;\\n    line-height: 100px;\\n  }\\n\\n  // img {\\n  //   width: 100px;\\n  //   height: 100px;\\n  //   margin: 5px;\\n  //   object-fit: cover;\\n  // }\\n}\\n\",\".Upload {\\n  height: 100%;\\n}\\n.Upload .upload-box {\\n  width: 200px;\\n  height: 100px;\\n  background: #008cee;\\n  color: #ffffff;\\n  text-align: center;\\n  line-height: 100px;\\n}\\n/*# sourceMappingURL=Upload.css.map */\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n"],"names":["_hoisted_1","class","_hoisted_2","defineComponent","name","components","setup","files","ref","upload","onChangeFile","newFiles","value","_ctx","_cache","$props","$setup","$data","$options","_component_Upload","_resolveComponent","_openBlock","_createElementBlock","_createVNode","multiple","onOnChangeFile","length","_Fragment","key","_renderList","item","index","src","base64","_createCommentVNode","content","__esModule","default","module","id","locals","exports","add","___CSS_LOADER_EXPORT___","push"],"ignoreList":[],"sourceRoot":""}

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "dpzvc3-ui",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "description": "Vue3组件库",
   "main": "dist/dpzvc3.js",
   "module": "dist/dpzvc3.esm.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "init": "webpack --progress --config webpack.dev.config.js",
     "dev": "webpack serve --config webpack.dev.config.js --open",
     "build:style": "gulp --gulpfile build-style.js",
     "build:dev": "webpack --config webpack.dist.dev.config.js",
     "build:prod": "webpack --config webpack.dist.prod.config.js",
-    "build": "npm run build:style && npm run build:dev && npm run build:prod",
+    "build:types": "tsc --project tsconfig.build.json && cp src/types/index.d.ts dist/types/index.d.ts",
+    "build": "npm run build:style && npm run build:dev && npm run build:prod && npm run build:types",
     "dist": "webpack --progress --config webpack.prod.config.js",
     "prepare": "husky"
   },
@@ -39,7 +41,11 @@
     "@babel/core": "^7.28.5",
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime": "^7.28.4",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "@vue/babel-plugin-jsx": "^2.0.1",
     "@vue/compiler-sfc": "^3.5.26",
     "@vue/eslint-config-standard": "^8.0.1",
     "autoprefixer": "^10.4.23",
@@ -85,8 +91,11 @@
     "postcss-loader": "^6.2.1",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
     "url-loader": "^0.5.9",
     "vue": "^3.5.26",
+    "vue-eslint-parser": "^10.2.0",
     "vue-hot-reload-api": "^1.3.3",
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^17.4.2",
@@ -110,4 +119,4 @@
       "eslint --max-warnings=0"
     ]
   }
-}
+}

package/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,67 @@
+import { defineComponent, ref, watch, computed, PropType } from 'vue'
+import Spinner from '../spinner'
+import type { IndicatorProps } from './types'
+export type { IndicatorProps }
+const prefixCls = 'dpzvc3-Indicator'
+
+export default defineComponent({
+  name: 'Dpzvc3Indicator',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: '#ffffff'
+    },
+    type: {
+      type: String as PropType<IndicatorProps['type']>,
+      default: 'snake'
+    },
+    size: {
+      type: [Number, String] as PropType<number | string>,
+      default: 45
+    },
+    text: {
+      type: String,
+      default: '加载中...'
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const visible = ref(props.modelValue)
+
+    // watch modelValue 更新 visible
+    watch(
+      () => props.modelValue,
+      val => {
+        visible.value = val
+      }
+    )
+
+    // watch visible 更新 v-model
+    watch(visible, val => {
+      emit('update:modelValue', val)
+    })
+
+    const classes = computed(() => [prefixCls])
+    const containerClasses = computed(() => [`${prefixCls}-container`])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+
+    return () => (
+      <div>
+        {visible.value && (
+          <div class={classes.value} onTouchmove={(e: any) => e.preventDefault()}>
+            <div class={containerClasses.value}>
+              <div class={wrapperClasses.value}>
+                <Spinner size={props.size} type={props.type} color={props.color} />
+                <span style={{ color: props.color }}>{props.text}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+})

package/src/components/Indicator/index.ts

@@ -0,0 +1,111 @@
+/**
+ * Indicator - Vue 3 版本
+ */
+import { createVNode, render } from 'vue'
+import Indicator from './Indicator'
+import type { IndicatorProps, IndicatorInstance } from './types'
+type containerE = HTMLElement | null
+let instance: any = null
+
+let container:containerE
+
+function createInstance (props = {}) {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const defaultProps = {
+    size: 45,
+    type: 'snake',
+    color: '#ffffff',
+    text: '加载中...',
+    visible: false,
+    ...props
+  }
+  const vnode = createVNode(Indicator, {
+    ...defaultProps,
+    onRemove: destroyInstance
+  })
+  render(vnode, container)
+  instance = vnode.component
+  return instance
+}
+
+function destroyInstance () {
+  if (!instance || !container) return
+  render(null, container)
+  if (container.parentNode) {
+    container.parentNode.removeChild(container)
+  }
+  instance = null
+  container = null
+}
+
+function open (options:IndicatorProps) {
+  if (!instance) {
+    createInstance(options)
+  }
+
+  // 更新 props
+  if (instance) {
+    Object.keys(options).forEach(key => {
+      instance.props[key] = options[key as keyof IndicatorProps]
+    })
+    instance.props.modelValue = true
+  }
+}
+
+function close () {
+  if (!instance) return
+  instance.props.modelValue = false
+  destroyInstance()
+}
+
+/* ================== 对外 API ================== */
+
+// Indicator.open = open
+// Indicator.remove = close
+
+// Indicator.snake = function (props:IndicatorProps) {
+//   props.type = 'snake'
+//   open(props)
+// }
+
+// Indicator.blade = function (props:IndicatorProps) {
+//   props.type = 'blade'
+//   open(props)
+// }
+
+// Indicator.circle = function (props:IndicatorProps) {
+//   props.type = 'fading-circle'
+//   open(props)
+// }
+
+// Indicator.bounce = function (props:IndicatorProps) {
+//   props.type = 'double-bounce'
+//   open(props)
+// }
+// export default Indicator
+
+const Indicators: IndicatorInstance = {
+  open,
+  remove: close,
+  snake: (props: IndicatorProps = {}) =>{
+    props.type = 'snake'
+    open(props)
+  },
+  blade: (props: IndicatorProps = {}) => {
+    props.type = 'blade'
+    open(props)
+  },
+  circle: (props: IndicatorProps = {}) => { 
+    props.type = 'fading-circle'
+    open(props)
+  },
+  bounce: (props: IndicatorProps = {}) => { 
+    props.type = 'double-bounce'
+    open(props)
+  },
+}
+
+
+export default Indicators

package/src/components/Indicator/types.ts

@@ -0,0 +1,15 @@
+
+export interface IndicatorProps {
+  modelValue?: boolean
+  color?: string
+  type?: 'snake' | 'blade' | 'fading-circle' | 'double-bounce'
+  size?: number | string
+  text?: string
+}
+type IndicatorType = 'snake' | 'blade' | 'circle' | 'bounce'
+export type IndicatorInstance = {
+    [k in IndicatorType]: (options: IndicatorProps) => any
+} & {
+    open: (options: IndicatorProps) => any,
+    remove: () => void,
+}

package/src/components/Text/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Created by admin on 2025/9/24.
+ */
+import type { App } from 'vue'
+import Text from './textBar'
+// import Number from './Number'
+// Text.Number = Number
+Text.install = (app: App): void => {
+    app.component('TextBar', Text); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Text=Text as IWithInstall<typeof Text>;
+export default _Text
+export type { TextBarProps } from './types'

package/src/components/Text/textBar.tsx

@@ -0,0 +1,104 @@
+// src/components/textBar/textBar.tsx
+import { defineComponent, ref, computed, watch, PropType } from 'vue'
+import type { TextBarProps } from './types'
+
+export type { TextBarProps }
+
+const prefixCls = 'dpzvc3-textBar'
+
+export default defineComponent({
+  name: 'TextBar',
+  props: {
+    modelValue: { type: [String, Number] as PropType<string | number>, default: '' },
+    type: { type: String, default: 'text' },
+    placeholder: { type: [String, Number] as PropType<string | number>, default: '请输入' },
+    rows: Number,
+    autofocus: { type: Boolean, default: true },
+    inputStyles: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    maxlength: Number,
+    name: String,
+    readonly: { type: Boolean, default: false },
+    disable: { type: Boolean, default: false }
+  },
+  emits: ['update:modelValue', 'input', 'on-input', 'on-enter', 'on-change'],
+  setup(props, { emit }) {
+    const currentVal = ref(props.modelValue)
+
+    watch(() => props.modelValue, val => {
+      currentVal.value = val
+    })
+
+    watch(currentVal, val => {
+      emit('input', val)
+      emit('on-input', val)
+      emit('update:modelValue', val)
+    })
+
+    const classes = computed(() => [prefixCls])
+    const inputClasses = computed(() => [`${prefixCls}-input`])
+    const textareaClasses = computed(() => [`${prefixCls}-textarea`])
+
+    // 输入事件
+    const changeInput = (e: Event) => {
+      const target = e.target as HTMLInputElement | HTMLTextAreaElement
+      currentVal.value = target.value
+      emit('input', currentVal.value)
+      emit('on-input', e)
+      emit('update:modelValue', currentVal.value)
+      emit('on-change', e)
+    }
+
+    // 回车事件
+    const enterInput = (e: KeyboardEvent) => {
+      emit('on-enter', e)
+    }
+
+    return () => {
+      if (props.type !== 'textarea') {
+        return (
+          <div class={classes.value} style={props.inputStyles}>
+            <label class={inputClasses.value} style={props.inputStyles}>
+              <input
+                type={props.type}
+                autofocus={props.autofocus}
+                value={currentVal.value}
+                placeholder={String(props.placeholder)}
+                readonly={props.readonly}
+                maxlength={props.maxlength}
+                name={props.name}
+                disabled={props.disable}
+                onInput={changeInput}
+                onBlur={changeInput}
+                onFocus={changeInput}
+                onKeyup={(e:any) => e.key === 'Enter' && enterInput(e)}
+                onChange={changeInput}
+              />
+            </label>
+          </div>
+        )
+      } else {
+        return (
+          <div class={classes.value} style={props.inputStyles}>
+            <label class={textareaClasses.value}>
+              <textarea
+                autofocus={props.autofocus}
+                value={currentVal.value}
+                placeholder={String(props.placeholder)}
+                readonly={props.readonly}
+                maxlength={props.maxlength}
+                name={props.name}
+                rows={props.rows}
+                disabled={props.disable}
+                onInput={changeInput}
+                onBlur={changeInput}
+                onFocus={changeInput}
+                onKeyup={(e: any) => e.key === 'Enter' && enterInput(e)}
+                onChange={changeInput}
+              />
+            </label>
+          </div>
+        )
+      }
+    }
+  }
+})

package/src/components/Text/types.ts

@@ -0,0 +1,13 @@
+// src/components/textBar/types.ts
+export interface TextBarProps {
+  modelValue?: string | number
+  type?: string
+  placeholder?: string | number
+  rows?: number
+  autofocus?: boolean
+  inputStyles?: Record<string, any>
+  maxlength?: number
+  name?: string
+  readonly?: boolean
+  disable?: boolean
+}

package/src/components/actionSheet/actionSheet.d.ts

@@ -0,0 +1,16 @@
+// src/components/badge/badge.d.ts
+
+import type { App } from 'vue'
+import type { ActionSheetProps } from './types'  // 引入同级 types.ts 中的 BadgeProps
+
+/** Badge 组件实例类型，带 install 方法 */
+declare const ActionSheet: {
+  /** Vue 组件本身 */
+  new (): any
+  /** props 类型引用 */
+  __props?: ActionSheetProp
+  /** install 方法，用于全量注册 */
+  install(app: App): void
+}
+
+export default ActionSheet

package/src/components/actionSheet/actionSheet.tsx

@@ -0,0 +1,86 @@
+// src/components/action-sheet/action-sheet.tsx
+import { defineComponent, ref, computed, watch, PropType } from 'vue'
+import Popup from '../popup'
+// import type { PopupProps } from '../popup/types'
+import type { ActionSheetProps  } from './types'
+export type { ActionSheetProps  } 
+
+
+export type ActionItem = {
+  text: string
+  onClick?: (item: ActionItem, index: number) => void
+}
+
+// export type ActionSheetProps = {
+//   modelValue?: boolean
+//   items?: ActionItem[]
+//   cancleText?: string
+// }
+
+const prefixCls = 'dpzvc3-actionSheet'
+
+export default defineComponent({
+  name: 'ActionSheet',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    items: { type: Array as PropType<ActionItem[]>, default: () => [] },
+    cancleText: { type: String, default: '取消' }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const visible = ref(props.modelValue)
+    const actions = ref(props.items)
+
+    // 同步 props.modelValue
+    watch(() => props.modelValue, val => { visible.value = val })
+    // 同步 actions
+    watch(() => props.items, val => { actions.value = val })
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const wrapperActionClass = computed(() => [`${prefixCls}-wrapper-action`])
+    const cancleClass = computed(() => [`${prefixCls}-cancle`])
+
+    const emitAction = (item: ActionItem, index: number) => {
+      item.onClick?.(item, index)
+      emit('update:modelValue', false)
+    }
+
+    const cancleClick = () => {
+      emit('update:modelValue', false)
+    }
+
+    return () => (
+      <div>
+        <Popup
+          v-model={visible.value}
+          position="bottom"
+          styles={{ background: 'transparent' }}
+        >
+          <div class={classes.value}>
+            <ul class={wrapperClasses.value}>
+              {actions.value.map((item, index) => (
+                <li
+                  key={index}
+                  class={wrapperActionClass.value}
+                  onClick={() => emitAction(item, index)}
+                >
+                  <span>{item.text}</span>
+                </li>
+              ))}
+            </ul>
+            {props.cancleText && (
+              <a
+                href="javascript:;"
+                class={cancleClass.value}
+                onClick={cancleClick}
+              >
+                {props.cancleText}
+              </a>
+            )}
+          </div>
+        </Popup>
+      </div>
+    )
+  }
+})

package/src/components/{action-sheet/index.js → actionSheet/index.ts}

@@ -3,3 +3,4 @@
  */
 import ActionSheet from './actionSheet'
 export default ActionSheet
+export type { ActionSheetProps } from './types'

package/src/components/actionSheet/types.ts

@@ -0,0 +1,10 @@
+type ActionItem = {
+  text: string
+  onClick?: (item: ActionItem, index: number) => void
+}
+
+export type ActionSheetProps = {
+  modelValue?: boolean
+  items?: ActionItem
+  cancleText?: string
+}

package/src/components/badge/{badge.vue → badge.tsx}

@@ -1,30 +1,19 @@
-<template>
-  <span :class="classes">
-    <slot />
-    <sup
-      v-show="visible"
-      :class="supClasses"
-    >{{ displayCount }}</sup>
-  </span>
-</template>
+import { defineComponent, computed, ref, watch,PropType } from 'vue'
 
-<script>
-import { computed, ref, watch, defineComponent } from 'vue'
-
-const prefixCls = 'dpzvc3-badge'
+import type { BadgeProps } from './types'
+export type { BadgeProps } 
 
 export default defineComponent({
   name: 'Dpzvc3Badge',
+
   props: {
     type: {
-      type: String,
-      default: 'danger',
-      validator: (val) => ['normal', 'danger', 'warning', 'success'].includes(val)
+      type: String as PropType<BadgeProps['type']>,
+      default: 'danger'
     },
     size: {
-      type: String,
-      default: 'normal',
-      validator: (val) => ['small', 'normal', 'large'].includes(val)
+      type: String as PropType<BadgeProps['size']>,
+      default: 'normal'
     },
     dot: {
       type: Boolean,
@@ -34,12 +23,15 @@ export default defineComponent({
       type: [Number, String],
       default: 99
     },
-    number: [Number, String]
+    number: {
+      type: [Number, String]
+    }
   },
-  setup (props) {
+
+  setup (props, { slots }) {
+    const prefixCls = 'dpzvc3-badge'
     const visible = ref(true)
 
-    // 监听 number 来控制 visible
     watch(
       () => props.number,
       (val) => {
@@ -55,6 +47,7 @@ export default defineComponent({
     )
 
     const classes = computed(() => [prefixCls])
+
     const supClasses = computed(() => [
       `${prefixCls}-${props.type}`,
       {
@@ -66,15 +59,22 @@ export default defineComponent({
     const displayCount = computed(() => {
       if (props.dot) return ''
       const num = Number(props.number)
-      return num <= Number(props.max) ? String(num) : String(props.max) + '+'
+      return num <= Number(props.max) ? String(num) : `${props.max}+`
     })
 
-    return {
-      classes,
-      supClasses,
-      visible,
-      displayCount
-    }
+    return () => (
+      <span class={classes.value}>
+        {slots.default?.()}
+        {visible.value && (
+          <sup class={supClasses.value}>
+            {displayCount.value}
+          </sup>
+        )}
+      </span>
+    )
+//     h('span', { class: classes.value }, [
+//   slots.default ? slots.default() : null,
+//   visible.value ? h('sup', { class: supClasses.value }, displayCount.value) : null
+// ])
   }
-})
-</script>
+})

package/src/components/badge/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Created by admin on 2025/11/4.
+ */
+import type { App } from 'vue'
+import Badge from './badge'
+Badge.install = (app: App): void => {
+    app.component('Badge', Badge); // 注册全局组件
+}
+type IWithInstall<T> = T & { install(app: App): void };
+const _Badge=Badge as IWithInstall<typeof Badge>;
+export default _Badge
+export type { BadgeProps } from './types'

package/src/components/badge/types.ts

@@ -0,0 +1,8 @@
+// src/components/badge/types.ts
+export type BadgeProps = {
+  type?: 'normal' | 'danger' | 'warning' | 'success'
+  size?: 'small' | 'normal' | 'large'
+  dot?: boolean
+  max?: number | string
+  number?: number | string
+}