From b2e934097854aa41ae152a49df2a5a913ebc9372 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Mon, 3 Mar 2025 22:21:42 +0800
Subject: [PATCH 01/29] feat: add name

---
 packages/varlet-ui/varlet.config.mjs | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/varlet-ui/varlet.config.mjs b/packages/varlet-ui/varlet.config.mjs
index 97196f1bbc1..333a0221017 100644
--- a/packages/varlet-ui/varlet.config.mjs
+++ b/packages/varlet-ui/varlet.config.mjs
@@ -392,6 +392,14 @@ export default defineConfig({
         doc: 'watermark',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'Signature 签名',
+          'en-US': 'Signature',
+        },
+        doc: 'Signature',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': 'Code 代码块',

From dda43c31598e8c0bf584b80cd6a2df008278006b Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Mon, 3 Mar 2025 23:20:04 +0800
Subject: [PATCH 02/29] feat: add function signature

---
 .../varlet-ui/src/signature/Signature.vue     | 204 ++++++++++++++++++
 packages/varlet-ui/src/signature/index.ts     |  12 ++
 packages/varlet-ui/src/signature/props.ts     |  42 ++++
 .../varlet-ui/src/signature/signature.less    |  45 ++++
 4 files changed, 303 insertions(+)
 create mode 100644 packages/varlet-ui/src/signature/Signature.vue
 create mode 100644 packages/varlet-ui/src/signature/index.ts
 create mode 100644 packages/varlet-ui/src/signature/props.ts
 create mode 100644 packages/varlet-ui/src/signature/signature.less

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
new file mode 100644
index 00000000000..64e76551bbe
--- /dev/null
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -0,0 +1,204 @@
+<template>
+  <div :class="classes">
+    <div ref="wrap" class="var-signature__inner">
+      <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
+      <p v-if="!isCanvasSupported" class="var-signature__unsupport">{{ unsupportText }}</p>
+    </div>
+
+    <div class="var-signature__actions">
+      <var-button class="var-signature__button" type="default" @click="clear">{{ translate('clear') }}</var-button>
+      <var-button class="var-signature__button" type="primary" @click="confirm">{{ translate('confirm') }}</var-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
+import VarButton from '../button'
+import { useLocale } from '../locale'
+import { createNamespace, useValidation } from '../utils/components'
+import { props } from './props'
+
+const { n, classes } = createNamespace('signature')
+
+export default defineComponent({
+  name: 'VarSignature',
+  components: {
+    VarButton,
+  },
+  props,
+  emits: ['start', 'end', 'signing', 'confirm', 'clear', 'update:modelValue'],
+
+  setup(props, { emit }) {
+    const { validateWithTrigger } = useValidation()
+    const { t } = useLocale()
+    const translate = (key: string) => t(`signature.${key}`)
+
+    const canvas = ref<HTMLCanvasElement | null>(null)
+    const wrap = ref<HTMLElement | null>(null)
+    const isCanvasSupported = computed(() => {
+      const elem = document.createElement('canvas')
+      return !!(elem.getContext && elem.getContext('2d'))
+    })
+
+    const unsupportText = computed(() => props.unsupportText || translate('unsupportText'))
+
+    const state = reactive({
+      canvasHeight: 0,
+      canvasWidth: 0,
+      ctx: null as CanvasRenderingContext2D | null,
+      isSupportTouch: 'ontouchstart' in window,
+      events:
+        'ontouchstart' in window
+          ? ['touchstart', 'touchmove', 'touchend', 'touchleave']
+          : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'],
+      isEmpty: true,
+    })
+
+    const addEvent = () => {
+      if (!canvas.value) {
+        return
+      }
+      canvas.value.addEventListener(state.events[0], startEventHandler as EventListener, false)
+    }
+
+    const startEventHandler = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+      if (!state.ctx) {
+        return
+      }
+
+      state.ctx.beginPath()
+      state.ctx.lineWidth = props.lineWidth
+      state.ctx.strokeStyle = props.strokeStyle
+      state.isEmpty = false
+      emit('start')
+
+      if (!canvas.value) {
+        return
+      }
+      canvas.value.addEventListener(state.events[1], moveEventHandler as EventListener, false)
+      canvas.value.addEventListener(state.events[2], endEventHandler as EventListener, false)
+      canvas.value.addEventListener(state.events[3], leaveEventHandler as EventListener, false)
+    }
+
+    const moveEventHandler = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+      if (!canvas.value || !state.ctx) {
+        return
+      }
+
+      const evt = state.isSupportTouch ? (event as TouchEvent).touches[0] : (event as MouseEvent)
+
+      emit('signing', evt)
+      const coverPos = canvas.value.getBoundingClientRect()
+      const mouseX = evt.clientX - coverPos.left
+      const mouseY = evt.clientY - coverPos.top
+
+      state.ctx.lineTo(mouseX, mouseY)
+      state.ctx.stroke()
+    }
+
+    const endEventHandler = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+      emit('end')
+      if (!canvas.value) {
+        return
+      }
+
+      canvas.value.removeEventListener(state.events[1], moveEventHandler as EventListener, false)
+      canvas.value.removeEventListener(state.events[2], endEventHandler as EventListener, false)
+
+      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, props.modelValue)
+    }
+
+    const leaveEventHandler = (event: MouseEvent | TouchEvent) => {
+      event.preventDefault()
+      if (!canvas.value) {
+        return
+      }
+
+      canvas.value.removeEventListener(state.events[1], moveEventHandler as EventListener, false)
+      canvas.value.removeEventListener(state.events[2], endEventHandler as EventListener, false)
+    }
+
+    const clear = () => {
+      if (!canvas.value || !state.ctx) {
+        return
+      }
+
+      canvas.value.addEventListener(state.events[2], endEventHandler as EventListener, false)
+      state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight)
+      state.ctx.closePath()
+      state.isEmpty = true
+
+      emit('clear')
+      emit('update:modelValue', '')
+      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, '')
+    }
+
+    const confirm = () => {
+      if (!canvas.value) {
+        return
+      }
+
+      const dataUrl = getDataUrl(canvas.value)
+      emit('confirm', canvas.value, dataUrl)
+      emit('update:modelValue', dataUrl)
+      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, dataUrl)
+    }
+
+    const isCanvasBlank = (canvas: HTMLCanvasElement) => {
+      if (!canvas) {
+        return true
+      }
+
+      const blank = document.createElement('canvas')
+      blank.width = canvas.width
+      blank.height = canvas.height
+
+      return canvas.toDataURL() === blank.toDataURL()
+    }
+
+    const getDataUrl = (canvas: HTMLCanvasElement) => {
+      if (isCanvasBlank(canvas)) {
+        return ''
+      }
+
+      switch (props.type) {
+        case 'png':
+          return canvas.toDataURL('image/png')
+        case 'jpg':
+          return canvas.toDataURL('image/jpeg', 0.8)
+        default:
+          return canvas.toDataURL('image/png')
+      }
+    }
+
+    onMounted(() => {
+      if (isCanvasSupported.value && canvas.value && wrap.value) {
+        state.ctx = canvas.value.getContext('2d')
+        state.canvasWidth = wrap.value.offsetWidth
+        state.canvasHeight = wrap.value.offsetHeight
+        addEvent()
+      }
+    })
+
+    return {
+      ...toRefs(state),
+      canvas,
+      wrap,
+      isCanvasSupported,
+      confirm,
+      clear,
+      classes: computed(() => classes(n(), props.customClass ? props.customClass : null)),
+      translate,
+      unsupportText,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './signature';
+</style>
diff --git a/packages/varlet-ui/src/signature/index.ts b/packages/varlet-ui/src/signature/index.ts
new file mode 100644
index 00000000000..8c0eb706deb
--- /dev/null
+++ b/packages/varlet-ui/src/signature/index.ts
@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from '../utils/components'
+import { props as signatureProps } from './props'
+import Signature from './Signature.vue'
+
+withInstall(Signature)
+withPropsDefaultsSetter(Signature, signatureProps)
+
+export { signatureProps }
+
+export const _SignatureComponent = Signature
+
+export default Signature
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
new file mode 100644
index 00000000000..dc196e9f92c
--- /dev/null
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -0,0 +1,42 @@
+import { type PropType } from 'vue'
+
+export type SignatureType = 'png' | 'jpg'
+
+export const props = {
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  lineWidth: {
+    type: Number,
+    default: 2,
+  },
+  strokeStyle: {
+    type: String,
+    default: '#000',
+  },
+  type: {
+    type: String as PropType<SignatureType>,
+    default: 'png',
+  },
+  unsupportText: {
+    type: String,
+    default: '',
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+  validateTrigger: {
+    type: Array as PropType<Array<'onChange'>>,
+    default: () => ['onChange'],
+  },
+  rules: {
+    type: [Array, Object] as PropType<Array<(v: any) => any> | object>,
+    default: () => [],
+  },
+  height: {
+    type: [Number, String],
+    default: 200,
+  },
+}
diff --git a/packages/varlet-ui/src/signature/signature.less b/packages/varlet-ui/src/signature/signature.less
new file mode 100644
index 00000000000..55fb3ebe06e
--- /dev/null
+++ b/packages/varlet-ui/src/signature/signature.less
@@ -0,0 +1,45 @@
+@import '../styles/common';
+@import '../styles/elevation';
+
+:root {
+  --signature-background-color: #fff;
+  --signature-border-color: #e0e0e0;
+  --signature-border-radius: 4px;
+  --signature-actions-padding: 10px;
+  --signature-button-margin: 0 4px;
+  --signature-inner-height: 200px;
+}
+
+.var-signature {
+  width: 100%;
+  border: 1px solid var(--signature-border-color);
+  border-radius: var(--signature-border-radius);
+  background-color: var(--signature-background-color);
+  overflow: hidden;
+
+  &__inner {
+    position: relative;
+    width: 100%;
+    height: var(--signature-inner-height);
+  }
+
+  &__unsupport {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    margin: 0;
+    color: var(--color-text-disabled);
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--signature-actions-padding);
+    border-top: 1px solid var(--signature-border-color);
+  }
+
+  &__button {
+    margin: var(--signature-button-margin);
+  }
+}

From 960ad7bc4ed3227fa2806dee2a33d6355e5ade99 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Tue, 4 Mar 2025 00:13:33 +0800
Subject: [PATCH 03/29] fix: adjust css

---
 packages/varlet-ui/types/index.d.ts    |  2 ++
 packages/varlet-ui/types/skeleton.d.ts | 39 ++++++++++++++------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/varlet-ui/types/index.d.ts b/packages/varlet-ui/types/index.d.ts
index 4baa019bfb0..79414fd30d2 100644
--- a/packages/varlet-ui/types/index.d.ts
+++ b/packages/varlet-ui/types/index.d.ts
@@ -74,6 +74,7 @@ export * from './result'
 export * from './ripple'
 export * from './row'
 export * from './select'
+export * from './signature'
 export * from './skeleton'
 export * from './slider'
 export * from './snackbar'
@@ -169,6 +170,7 @@ declare module 'vue' {
     VarResult: typeof import('@varlet/ui')['_ResultComponent']
     VarRow: typeof import('@varlet/ui')['_RowComponent']
     VarSelect: typeof import('@varlet/ui')['_SelectComponent']
+    VarSignature: typeof import('@varlet/ui')['_SignatureComponent']
     VarSkeleton: typeof import('@varlet/ui')['_SkeletonComponent']
     VarSlider: typeof import('@varlet/ui')['_SliderComponent']
     VarSnackbar: typeof import('@varlet/ui')['_SnackbarComponent']
diff --git a/packages/varlet-ui/types/skeleton.d.ts b/packages/varlet-ui/types/skeleton.d.ts
index ba426f7ed5b..bd113a3ecf3 100644
--- a/packages/varlet-ui/types/skeleton.d.ts
+++ b/packages/varlet-ui/types/skeleton.d.ts
@@ -1,30 +1,33 @@
 import { VNode } from 'vue'
 import { BasicAttributes, SetPropsDefaults, VarComponent } from './varComponent'
 
-export declare const skeletonProps: Record<keyof SkeletonProps, any>
-
-export interface SkeletonProps extends BasicAttributes {
-  loading?: boolean
-  title?: boolean
-  avatar?: boolean
-  card?: boolean
-  fullscreen?: boolean
-  fullscreenZIndex?: string | number
-  titleWidth?: string | number
-  avatarSize?: string | number
-  cardHeight?: string | number
-  rows?: string | number
-  rowsWidth?: (string | number)[]
+export type SignatureType = 'png' | 'jpg'
+
+export declare const signatureProps: Record<keyof SignatureProps, any>
+
+export interface SignatureProps extends BasicAttributes {
+  modelValue?: string
+  lineWidth?: number
+  strokeStyle?: string
+  type?: SignatureType
+  unsupportText?: string
+  customClass?: string
+  height?: number | string
+  validateTrigger?: string[]
+  rules?: Array<(v: string) => any>
 }
 
-export class Skeleton extends VarComponent {
-  static setPropsDefaults: SetPropsDefaults<SkeletonProps>
+export class Signature extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<SignatureProps>
 
-  $props: SkeletonProps
+  $props: SignatureProps
 
   $slots: {
     default(): VNode[]
   }
+
+  clear(): void
+  confirm(): void
 }
 
-export class _SkeletonComponent extends Skeleton {}
+export class _SignatureComponent extends Signature {}

From 46e4e7bcb507d9236118a846030d125894b83b89 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Tue, 4 Mar 2025 09:09:43 +0800
Subject: [PATCH 04/29] fix: adjust css

---
 .../src/signature/__tests__/index.spec.js     | 162 +++++++++++++++
 .../varlet-ui/src/signature/docs/en-US.md     | 195 ++++++++++++++++++
 .../varlet-ui/src/signature/docs/zh-CN.md     |  18 ++
 .../varlet-ui/src/signature/example/index.vue |  46 +++++
 .../src/signature/example/locale/en-US.ts     |  14 ++
 .../src/signature/example/locale/index.ts     |  17 ++
 .../src/signature/example/locale/zh-CN.ts     |  14 ++
 packages/varlet-ui/types/signature.d.ts       |   0
 8 files changed, 466 insertions(+)
 create mode 100644 packages/varlet-ui/src/signature/__tests__/index.spec.js
 create mode 100644 packages/varlet-ui/src/signature/docs/en-US.md
 create mode 100644 packages/varlet-ui/src/signature/docs/zh-CN.md
 create mode 100644 packages/varlet-ui/src/signature/example/index.vue
 create mode 100644 packages/varlet-ui/src/signature/example/locale/en-US.ts
 create mode 100644 packages/varlet-ui/src/signature/example/locale/index.ts
 create mode 100644 packages/varlet-ui/src/signature/example/locale/zh-CN.ts
 create mode 100644 packages/varlet-ui/types/signature.d.ts

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
new file mode 100644
index 00000000000..daf48949921
--- /dev/null
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -0,0 +1,162 @@
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, test, vi } from 'vitest'
+import Signature from '..'
+import VarSignature from '../Signature.vue'
+
+test('signature use', () => {
+  const app = createApp({}).use(Signature)
+  expect(app.component(Signature.name)).toBeTruthy()
+})
+
+describe('test signature component props', () => {
+  test('signature lineWidth', async () => {
+    const wrapper = mount(VarSignature, {
+      props: {
+        lineWidth: 2,
+      },
+    })
+
+    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    await wrapper.setProps({ lineWidth: 4 })
+    wrapper.unmount()
+  })
+
+  test('signature strokeStyle', async () => {
+    const wrapper = mount(VarSignature, {
+      props: {
+        strokeStyle: '#000',
+      },
+    })
+
+    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    await wrapper.setProps({ strokeStyle: '#f00' })
+    wrapper.unmount()
+  })
+
+  test('signature type', async () => {
+    const wrapper = mount(VarSignature, {
+      props: {
+        type: 'png',
+      },
+    })
+
+    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    await wrapper.setProps({ type: 'jpg' })
+    wrapper.unmount()
+  })
+
+  test('signature unsupportText', () => {
+    // 模拟不支持 canvas 的环境
+    const originalGetContext = HTMLCanvasElement.prototype.getContext
+    HTMLCanvasElement.prototype.getContext = () => null
+
+    const wrapper = mount(VarSignature, {
+      props: {
+        unsupportText: '自定义不支持提示',
+      },
+    })
+
+    expect(wrapper.find('.var-signature__unsupport').text()).toBe('自定义不支持提示')
+
+    // 恢复原始方法
+    HTMLCanvasElement.prototype.getContext = originalGetContext
+    wrapper.unmount()
+  })
+
+  test('signature customClass', async () => {
+    const wrapper = mount(VarSignature, {
+      props: {
+        customClass: 'test-class',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('test-class')
+    await wrapper.setProps({ customClass: 'another-class' })
+    expect(wrapper.classes()).toContain('another-class')
+    wrapper.unmount()
+  })
+
+  test('signature height', async () => {
+    const wrapper = mount(VarSignature, {
+      props: {
+        height: 300,
+      },
+    })
+
+    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    await wrapper.setProps({ height: 400 })
+    wrapper.unmount()
+  })
+})
+
+describe('test signature component events', () => {
+  test('signature clear event', async () => {
+    const onClear = vi.fn()
+    const onUpdateModelValue = vi.fn()
+
+    const wrapper = mount(VarSignature, {
+      props: {
+        onClear,
+        'onUpdate:modelValue': onUpdateModelValue,
+      },
+    })
+
+    await wrapper.find('.var-signature__button').trigger('click')
+    expect(onClear).toHaveBeenCalled()
+    expect(onUpdateModelValue).toHaveBeenCalledWith('')
+    wrapper.unmount()
+  })
+
+  test('signature confirm event', async () => {
+    const onConfirm = vi.fn()
+    const onUpdateModelValue = vi.fn()
+
+    const wrapper = mount(VarSignature, {
+      props: {
+        onConfirm,
+        'onUpdate:modelValue': onUpdateModelValue,
+      },
+    })
+
+    await wrapper.findAll('.var-signature__button')[1].trigger('click')
+    expect(onConfirm).toHaveBeenCalled()
+    wrapper.unmount()
+  })
+})
+
+test('signature canvas operations', async () => {
+  // 由于 JSDOM 环境下 canvas 操作有限，这里只做简单测试
+  const wrapper = mount(VarSignature)
+
+  const canvas = wrapper.find('canvas').element
+  expect(canvas).toBeTruthy()
+
+  // 模拟 canvas 上下文
+  const mockContext = {
+    beginPath: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    clearRect: vi.fn(),
+    closePath: vi.fn(),
+  }
+
+  // 保存原始方法
+  const originalGetContext = canvas.getContext
+
+  // 模拟 getContext 方法
+  canvas.getContext = () => mockContext
+
+  // 触发 mousedown 事件
+  await wrapper.find('canvas').trigger('mousedown', {
+    clientX: 10,
+    clientY: 10,
+  })
+
+  expect(mockContext.beginPath).toHaveBeenCalled()
+
+  // 恢复原始方法
+  canvas.getContext = originalGetContext
+
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/signature/docs/en-US.md b/packages/varlet-ui/src/signature/docs/en-US.md
new file mode 100644
index 00000000000..f9aa2fe5a73
--- /dev/null
+++ b/packages/varlet-ui/src/signature/docs/en-US.md
@@ -0,0 +1,195 @@
+# Signature
+
+### Intro
+
+A component for electronic signature that allows users to sign on the screen.
+
+### Basic Usage
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" />
+</template>
+
+
+### Custom Line Width
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" :line-width="4" />
+</template>
+
+### Custom Stroke Style
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" stroke-style="#f44336" />
+</template>
+
+### Custom Height
+```html
+
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" :height="300" />
+</template>
+
+###Custom Output Type
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" type="jpg" />
+</template>
+
+### Form Validation
+```html
+<script setup>
+import { ref } from 'vue'
+import { Snackbar } from '@varlet/ui'
+
+const signature = ref('')
+
+const onSubmit = () => {
+  Snackbar.success('Submit Success')
+}
+</script>
+
+<template>
+  <var-form @submit="onSubmit">
+    <var-signature
+      v-model="signature"
+      :rules="[v => !!v || 'Signature is required']"
+    />
+    <var-button type="primary" native-type="submit">Submit</var-button>
+  </var-form>
+</template>
+
+## API
+### Props Prop Description Type Default v-model
+
+Signature data URL
+
+string
+
+'' line-width
+
+Line width of the signature
+
+number
+
+2 stroke-style
+
+Stroke style of the signature
+
+string
+
+'#000' type
+
+Output image type
+
+'png' | 'jpg'
+
+'png' unsupport-text
+
+Text displayed when canvas is not supported
+
+string
+
+- custom-class
+
+Custom class name
+
+string
+
+'' height
+
+Height of the signature area
+
+number | string
+
+200 validate-trigger
+
+Trigger method for validation
+
+ValidateTriggers[]
+
+['onChange'] rules
+
+Validation rules
+
+Array | Object
+
+-
+### Events Event Description Arguments start
+
+Triggered when starting to sign
+
+- signing
+
+Triggered during signing
+
+event: TouchEvent | MouseEvent end
+
+Triggered when ending the signature
+
+- confirm
+
+Triggered when confirming the signature
+
+canvas: HTMLCanvasElement, dataUrl: string clear
+
+Triggered when clearing the signature
+
+- update:model-value
+
+Triggered when the signature value changes
+
+value: string
+### Slots Name Description SlotProps default
+
+Custom content
+
+-
+### Style Variables
+Here are the CSS variables used by the component. Styles can be customized using StyleProvider .
+ Variable Default --signature-background-color
+
+#fff --signature-border-color
+
+#e0e0e0 --signature-border-radius
+
+4px --signature-actions-padding
+
+10px --signature-button-margin
+
+0 4px --signature-inner-height
+
+200px
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/docs/zh-CN.md b/packages/varlet-ui/src/signature/docs/zh-CN.md
new file mode 100644
index 00000000000..64bbfe953aa
--- /dev/null
+++ b/packages/varlet-ui/src/signature/docs/zh-CN.md
@@ -0,0 +1,18 @@
+# 电子签名
+
+### 介绍
+
+一个用于在屏幕上进行电子签名的组件。
+
+### 基本使用
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature v-model="signature" />
+</template>
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
new file mode 100644
index 00000000000..62ec780fd5b
--- /dev/null
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue'
+import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
+import { Snackbar } from '@varlet/ui'
+import { t, use } from './locale'
+
+const signature = ref('')
+
+watchLang(use)
+onThemeChange()
+
+const onSubmit = () => {
+  Snackbar.success(t('submitSuccess'))
+}
+</script>
+
+<template>
+  <app-type>{{ t('basicUsage') }}</app-type>
+  <var-signature v-model="signature" />
+
+  <app-type>{{ t('customLineWidth') }}</app-type>
+  <var-signature v-model="signature" :line-width="4" />
+
+  <app-type>{{ t('customStrokeStyle') }}</app-type>
+  <var-signature v-model="signature" stroke-style="#f44336" />
+
+  <app-type>{{ t('customHeight') }}</app-type>
+  <var-signature v-model="signature" :height="300" />
+
+  <app-type>{{ t('customOutputType') }}</app-type>
+  <var-signature v-model="signature" type="jpg" />
+
+  <app-type>{{ t('formValidation') }}</app-type>
+  <var-form @submit="onSubmit">
+    <var-signature v-model="signature" :rules="[(v) => !!v || t('signatureRequired')]" />
+    <var-button type="primary" native-type="submit">
+      {{ t('submit') }}
+    </var-button>
+  </var-form>
+</template>
+
+<style lang="less">
+.var-signature {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/packages/varlet-ui/src/signature/example/locale/en-US.ts b/packages/varlet-ui/src/signature/example/locale/en-US.ts
new file mode 100644
index 00000000000..b291cd1f1dd
--- /dev/null
+++ b/packages/varlet-ui/src/signature/example/locale/en-US.ts
@@ -0,0 +1,14 @@
+export default {
+  basicUsage: 'Basic Usage',
+  customLineWidth: 'Custom Line Width',
+  customStrokeStyle: 'Custom Stroke Style',
+  customHeight: 'Custom Height',
+  customOutputType: 'Custom Output Type',
+  formValidation: 'Form Validation',
+  clear: 'Clear',
+  confirm: 'Confirm',
+  submit: 'Submit',
+  signatureRequired: 'Signature is required',
+  submitSuccess: 'Submit Success',
+  unsupportText: 'Your browser does not support Canvas, electronic signature is not available',
+}
diff --git a/packages/varlet-ui/src/signature/example/locale/index.ts b/packages/varlet-ui/src/signature/example/locale/index.ts
new file mode 100644
index 00000000000..e031be8c1a4
--- /dev/null
+++ b/packages/varlet-ui/src/signature/example/locale/index.ts
@@ -0,0 +1,17 @@
+import { Locale } from '@varlet/ui'
+import enUS from './en-US'
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = Locale.useLocale()
+
+const use = (lang: string) => {
+  Locale.use(lang)
+  exampleUse(lang)
+}
+
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+add('zh-CN', zhCN)
+add('en-US', enUS)
+
+export { add, t, merge, use }
diff --git a/packages/varlet-ui/src/signature/example/locale/zh-CN.ts b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
new file mode 100644
index 00000000000..f39c9ffb4a5
--- /dev/null
+++ b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
@@ -0,0 +1,14 @@
+export default {
+  basicUsage: '基本使用',
+  customLineWidth: '自定义线宽',
+  customStrokeStyle: '自定义笔触颜色',
+  customHeight: '自定义高度',
+  customOutputType: '自定义输出类型',
+  formValidation: '表单校验',
+  clear: '清除',
+  confirm: '确认',
+  submit: '提交',
+  signatureRequired: '请签名',
+  submitSuccess: '提交成功',
+  unsupportText: '您的浏览器不支持Canvas，无法使用电子签名功能',
+}
diff --git a/packages/varlet-ui/types/signature.d.ts b/packages/varlet-ui/types/signature.d.ts
new file mode 100644
index 00000000000..e69de29bb2d

From ca79f54e46258b51682f7681c5b6591158dfff80 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Tue, 4 Mar 2025 23:42:58 +0800
Subject: [PATCH 05/29] feat: signature finish

---
 .../varlet-ui/src/signature/Signature.vue     |  21 +-
 .../varlet-ui/src/signature/docs/en-US.md     | 240 ++++++++----------
 .../varlet-ui/src/signature/docs/zh-CN.md     | 149 ++++++++++-
 .../varlet-ui/src/signature/example/index.vue |  61 +++--
 .../src/signature/example/locale/en-US.ts     |  16 +-
 .../src/signature/example/locale/zh-CN.ts     |  15 +-
 packages/varlet-ui/src/signature/props.ts     |   4 +
 7 files changed, 328 insertions(+), 178 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 64e76551bbe..bed74dbec2d 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -1,20 +1,14 @@
 <template>
   <div :class="classes">
-    <div ref="wrap" class="var-signature__inner">
+    <div ref="wrap" class="var-signature__inner" :class="{ 'var-signature--disabled': disabled }">
       <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
       <p v-if="!isCanvasSupported" class="var-signature__unsupport">{{ unsupportText }}</p>
     </div>
-
-    <div class="var-signature__actions">
-      <var-button class="var-signature__button" type="default" @click="clear">{{ translate('clear') }}</var-button>
-      <var-button class="var-signature__button" type="primary" @click="confirm">{{ translate('confirm') }}</var-button>
-    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
-import VarButton from '../button'
 import { useLocale } from '../locale'
 import { createNamespace, useValidation } from '../utils/components'
 import { props } from './props'
@@ -23,9 +17,6 @@ const { n, classes } = createNamespace('signature')
 
 export default defineComponent({
   name: 'VarSignature',
-  components: {
-    VarButton,
-  },
   props,
   emits: ['start', 'end', 'signing', 'confirm', 'clear', 'update:modelValue'],
 
@@ -64,7 +55,7 @@ export default defineComponent({
 
     const startEventHandler = (event: MouseEvent | TouchEvent) => {
       event.preventDefault()
-      if (!state.ctx) {
+      if (!state.ctx || props.disabled) {
         return
       }
 
@@ -201,4 +192,12 @@ export default defineComponent({
 
 <style lang="less">
 @import './signature';
+
+.var-signature {
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
 </style>
diff --git a/packages/varlet-ui/src/signature/docs/en-US.md b/packages/varlet-ui/src/signature/docs/en-US.md
index f9aa2fe5a73..71fc2e6a3b0 100644
--- a/packages/varlet-ui/src/signature/docs/en-US.md
+++ b/packages/varlet-ui/src/signature/docs/en-US.md
@@ -6,19 +6,38 @@ A component for electronic signature that allows users to sign on the screen.
 
 ### Basic Usage
 
+Bind signature value through `v-model`.
+
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
+
+const clear = () => {
+  signature.value = ''
+}
+
+const save = () => {
+  console.log('Signature data:', signature.value)
+}
 </script>
 
 <template>
   <var-signature v-model="signature" />
+  
+  <var-space>
+    <var-button type="primary" @click="save">Save</var-button>
+    <var-button @click="clear">Clear</var-button>
+  </var-space>
+  
+  <img v-if="signature" :src="signature" alt="Signature Preview" style="margin-top: 10px" />
 </template>
+```
 
+### Custom Style
 
-### Custom Line Width
+Customize signature style through properties like `color`, `lineWidth`, etc.
 
 ```html
 <script setup>
@@ -28,48 +47,67 @@ const signature = ref('')
 </script>
 
 <template>
-  <var-signature v-model="signature" :line-width="4" />
+  <var-signature
+    v-model="signature"
+    color="#2979ff"
+    line-width="3"
+    background="#f5f5f5"
+  />
 </template>
+```
 
-### Custom Stroke Style
+### Disabled State
 
-```html
-<script setup>
-import { ref } from 'vue'
-
-const signature = ref('')
-</script>
+Set disabled state through the `disabled` property.
 
+```html
 <template>
-  <var-signature v-model="signature" stroke-style="#f44336" />
+  <var-signature v-model="signature" disabled />
 </template>
+```
 
-### Custom Height
-```html
+## API
 
-<script setup>
-import { ref } from 'vue'
+### Props
 
-const signature = ref('')
-</script>
+| Prop | Description | Type | Default |
+| --- | --- | --- | --- |
+| `v-model` | Signature value (base64 format) | _string_ | `''` |
+| `color` | Pen color | _string_ | `#000` |
+| `line-width` | Line width | _string \| number_ | `2` |
+| `background` | Canvas background color | _string_ | `#fff` |
+| `width` | Canvas width | _string \| number_ | `100%` |
+| `height` | Canvas height | _string \| number_ | `200` |
+| `disabled` | Whether to disable signature | _boolean_ | `false` |
 
-<template>
-  <var-signature v-model="signature" :height="300" />
-</template>
+### Events
 
-###Custom Output Type
-```html
-<script setup>
-import { ref } from 'vue'
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `start` | Triggered when starting to sign | `event: TouchEvent` |
+| `signing` | Triggered during signing | `event: TouchEvent` |
+| `end` | Triggered when ending signature | `event: TouchEvent` |
+| `change` | Triggered when signature content changes | `value: string` |
 
-const signature = ref('')
-</script>
+### Methods
 
-<template>
-  <var-signature v-model="signature" type="jpg" />
-</template>
+| Method | Description | Parameters |
+| --- | --- | --- |
+| `clear` | Clear signature | `-` |
+| `save` | Save signature, returns base64 format image data | `-` |
+
+### Style Variables
+
+Here are the CSS variables used by the component. Styles can be customized using [StyleProvider](#/en-US/style-provider).
+
+| Variable | Default |
+| --- | --- |
+| `--signature-background` | `#fff` |
+| `--signature-border-color` | `#e0e0e0` |
+| `--signature-border-radius` | `4px` |
+
+### Example
 
-### Form Validation
 ```html
 <script setup>
 import { ref } from 'vue'
@@ -77,119 +115,51 @@ import { Snackbar } from '@varlet/ui'
 
 const signature = ref('')
 
-const onSubmit = () => {
-  Snackbar.success('Submit Success')
+const handleSave = async () => {
+  if (!signature.value) {
+    Snackbar.warning('Please sign first')
+    return
+  }
+  
+  // Here you can upload signature data to server
+  console.log('Signature data:', signature.value)
+  Snackbar.success('Save successful')
 }
 </script>
 
 <template>
-  <var-form @submit="onSubmit">
+  <var-card>
+    <template #title>
+      Please sign below
+    </template>
+    
     <var-signature
       v-model="signature"
-      :rules="[v => !!v || 'Signature is required']"
+      height="300"
+      color="#2979ff"
+      line-width="3"
     />
-    <var-button type="primary" native-type="submit">Submit</var-button>
-  </var-form>
+    
+    <template #footer>
+      <var-space>
+        <var-button type="primary" @click="handleSave">
+          Confirm
+        </var-button>
+        <var-button @click="signature = ''">
+          Reset
+        </var-button>
+      </var-space>
+    </template>
+  </var-card>
+  
+  <var-paper :elevation="2" style="margin-top: 16px" v-if="signature">
+    <img :src="signature" alt="Signature Preview" style="width: 100%" />
+  </var-paper>
 </template>
+```
 
-## API
-### Props Prop Description Type Default v-model
-
-Signature data URL
-
-string
-
-'' line-width
-
-Line width of the signature
-
-number
-
-2 stroke-style
-
-Stroke style of the signature
-
-string
-
-'#000' type
-
-Output image type
-
-'png' | 'jpg'
-
-'png' unsupport-text
-
-Text displayed when canvas is not supported
-
-string
-
-- custom-class
-
-Custom class name
-
-string
-
-'' height
-
-Height of the signature area
-
-number | string
-
-200 validate-trigger
-
-Trigger method for validation
-
-ValidateTriggers[]
-
-['onChange'] rules
-
-Validation rules
-
-Array | Object
-
--
-### Events Event Description Arguments start
-
-Triggered when starting to sign
-
-- signing
-
-Triggered during signing
-
-event: TouchEvent | MouseEvent end
-
-Triggered when ending the signature
-
-- confirm
-
-Triggered when confirming the signature
-
-canvas: HTMLCanvasElement, dataUrl: string clear
-
-Triggered when clearing the signature
-
-- update:model-value
-
-Triggered when the signature value changes
-
-value: string
-### Slots Name Description SlotProps default
-
-Custom content
-
--
-### Style Variables
-Here are the CSS variables used by the component. Styles can be customized using StyleProvider .
- Variable Default --signature-background-color
-
-#fff --signature-border-color
-
-#e0e0e0 --signature-border-radius
-
-4px --signature-actions-padding
-
-10px --signature-button-margin
-
-0 4px --signature-inner-height
+## Notes
 
-200px
\ No newline at end of file
+1. Signature data is stored in base64 format, which may occupy large space. It's recommended to compress before uploading to server.
+2. When using on mobile devices, it's recommended to set appropriate canvas size for better signature experience.
+3. Canvas border, border radius and other styles can be customized through CSS.
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/docs/zh-CN.md b/packages/varlet-ui/src/signature/docs/zh-CN.md
index 64bbfe953aa..deb359c4993 100644
--- a/packages/varlet-ui/src/signature/docs/zh-CN.md
+++ b/packages/varlet-ui/src/signature/docs/zh-CN.md
@@ -6,13 +6,160 @@
 
 ### 基本使用
 
+通过 `v-model` 绑定签名的值。
+
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
+
+const clear = () => {
+  signature.value = ''
+}
+
+const save = () => {
+  console.log('签名数据：', signature.value)
+}
 </script>
 
 <template>
   <var-signature v-model="signature" />
-</template>
\ No newline at end of file
+  
+  <var-space>
+    <var-button type="primary" @click="save">保存签名</var-button>
+    <var-button @click="clear">清除签名</var-button>
+  </var-space>
+  
+  <img v-if="signature" :src="signature" alt="签名预览" style="margin-top: 10px" />
+</template>
+```
+
+### 自定义样式
+
+可以通过 `color`、`lineWidth` 等属性自定义签名的样式。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const signature = ref('')
+</script>
+
+<template>
+  <var-signature
+    v-model="signature"
+    color="#2979ff"
+    line-width="3"
+    background="#f5f5f5"
+  />
+</template>
+```
+
+### 禁用状态
+
+通过 `disabled` 属性设置禁用状态。
+
+```html
+<template>
+  <var-signature v-model="signature" disabled />
+</template>
+```
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `v-model` | 签名的值（base64格式） | _string_ | `''` |
+| `color` | 画笔颜色 | _string_ | `#000` |
+| `line-width` | 画笔粗细 | _string \| number_ | `2` |
+| `background` | 画布背景色 | _string_ | `#fff` |
+| `width` | 画布宽度 | _string \| number_ | `100%` |
+| `height` | 画布高度 | _string \| number_ | `200` |
+| `disabled` | 是否禁用 | _boolean_ | `false` |
+
+### 事件
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `start` | 开始签名时触发 | `event: TouchEvent` |
+| `signing` | 签名过程中触发 | `event: TouchEvent` |
+| `end` | 结束签名时触发 | `event: TouchEvent` |
+| `change` | 签名内容变化时触发 | `value: string` |
+
+### 方法
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| `clear` | 清除签名 | `-` |
+| `save` | 保存签名，返回 base64 格式的图片数据 | `-` |
+
+### 样式变量
+
+以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--signature-background` | `#fff` |
+| `--signature-border-color` | `#e0e0e0` |
+| `--signature-border-radius` | `4px` |
+
+### 示例
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Snackbar } from '@varlet/ui'
+
+const signature = ref('')
+
+const handleSave = async () => {
+  if (!signature.value) {
+    Snackbar.warning('请先签名')
+    return
+  }
+  
+  // 这里可以将签名数据上传到服务器
+  console.log('签名数据：', signature.value)
+  Snackbar.success('保存成功')
+}
+</script>
+
+<template>
+  <var-card>
+    <template #title>
+      请在下方签名
+    </template>
+    
+    <var-signature
+      v-model="signature"
+      height="300"
+      color="#2979ff"
+      line-width="3"
+    />
+    
+    <template #footer>
+      <var-space>
+        <var-button type="primary" @click="handleSave">
+          确认签名
+        </var-button>
+        <var-button @click="signature = ''">
+          重新签名
+        </var-button>
+      </var-space>
+    </template>
+  </var-card>
+  
+  <var-paper :elevation="2" style="margin-top: 16px" v-if="signature">
+    <img :src="signature" alt="签名预览" style="width: 100%" />
+  </var-paper>
+</template>
+```
+
+## 注意事项
+
+1. 签名数据以 base64 格式存储，可能会占用较大空间，建议在上传服务器前进行压缩处理。
+2. 在移动设备上使用时，建议设置适当的画布大小以获得更好的签名体验。
+3. 可以通过 CSS 自定义画布的边框、圆角等样式。
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
index 62ec780fd5b..8e1ae20b245 100644
--- a/packages/varlet-ui/src/signature/example/index.vue
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -5,42 +5,53 @@ import { Snackbar } from '@varlet/ui'
 import { t, use } from './locale'
 
 const signature = ref('')
+const signatureRef = ref(null)
 
 watchLang(use)
 onThemeChange()
 
-const onSubmit = () => {
-  Snackbar.success(t('submitSuccess'))
+const clear = () => {
+  signatureRef.value?.clear()
+}
+
+const save = () => {
+  if (signatureRef.value?.isEmpty) {
+    Snackbar.warning(t('pleaseSignFirst'))
+    return
+  }
+  signatureRef.value?.confirm()
+  Snackbar.success(t('saveSuccess'))
 }
 </script>
 
 <template>
+  <!-- Basic Usage -->
   <app-type>{{ t('basicUsage') }}</app-type>
-  <var-signature v-model="signature" />
-
-  <app-type>{{ t('customLineWidth') }}</app-type>
-  <var-signature v-model="signature" :line-width="4" />
-
-  <app-type>{{ t('customStrokeStyle') }}</app-type>
-  <var-signature v-model="signature" stroke-style="#f44336" />
-
-  <app-type>{{ t('customHeight') }}</app-type>
-  <var-signature v-model="signature" :height="300" />
-
-  <app-type>{{ t('customOutputType') }}</app-type>
-  <var-signature v-model="signature" type="jpg" />
-
-  <app-type>{{ t('formValidation') }}</app-type>
-  <var-form @submit="onSubmit">
-    <var-signature v-model="signature" :rules="[(v) => !!v || t('signatureRequired')]" />
-    <var-button type="primary" native-type="submit">
-      {{ t('submit') }}
-    </var-button>
-  </var-form>
+  <var-signature ref="signatureRef" v-model="signature" />
+  <var-space class="signature-actions">
+    <var-button type="primary" size="small" @click="save">{{ t('save') }}</var-button>
+    <var-button size="small" @click="clear">{{ t('clear') }}</var-button>
+  </var-space>
+  <img v-if="signature" :src="signature" alt="Signature Preview" style="margin-top: 10px" />
+
+  <!-- Custom Style -->
+  <app-type>{{ t('customStyle') }}</app-type>
+  <var-signature v-model="signature" stroke-style="#2979ff" line-width="3" background="#f5f5f5" />
+
+  <!-- Disabled State -->
+  <app-type>{{ t('disabledState') }}</app-type>
+  <var-signature v-model="signature" disabled />
 </template>
 
 <style lang="less">
-.var-signature {
-  margin-bottom: 16px;
+.signature-actions {
+  display: flex;
+  justify-content: flex-end !important;
+  margin-top: 6px !important;
+
+  :deep(.var-button) {
+    padding: 0 16px;
+    height: 32px;
+  }
 }
 </style>
diff --git a/packages/varlet-ui/src/signature/example/locale/en-US.ts b/packages/varlet-ui/src/signature/example/locale/en-US.ts
index b291cd1f1dd..1a480f4e01a 100644
--- a/packages/varlet-ui/src/signature/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/signature/example/locale/en-US.ts
@@ -1,14 +1,24 @@
 export default {
   basicUsage: 'Basic Usage',
+  customStyle: 'Custom Style',
+  disabledState: 'Disabled State',
+  completeExample: 'Complete Example',
+  save: 'Save',
+  clear: 'Clear',
+  confirm: 'Confirm',
+  reset: 'Reset',
+  pleaseSignFirst: 'Please sign first',
+  saveSuccess: 'Save successful',
+  pleaseSignBelow: 'Please sign below',
   customLineWidth: 'Custom Line Width',
   customStrokeStyle: 'Custom Stroke Style',
   customHeight: 'Custom Height',
   customOutputType: 'Custom Output Type',
   formValidation: 'Form Validation',
-  clear: 'Clear',
-  confirm: 'Confirm',
   submit: 'Submit',
   signatureRequired: 'Signature is required',
-  submitSuccess: 'Submit Success',
+  signatureTooSmall: 'Signature is too small, please sign bigger',
+  submitSuccess: 'Submit successful',
   unsupportText: 'Your browser does not support Canvas, electronic signature is not available',
+  cleared: 'Cleared',
 }
diff --git a/packages/varlet-ui/src/signature/example/locale/zh-CN.ts b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
index f39c9ffb4a5..110e0b07b42 100644
--- a/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
@@ -1,14 +1,23 @@
 export default {
   basicUsage: '基本使用',
+  customStyle: '自定义样式',
+  disabledState: '禁用状态',
+  completeExample: '完整示例',
+  save: '保存签名',
+  clear: '清除签名',
+  confirm: '确认签名',
+  reset: '重新签名',
+  pleaseSignFirst: '请先签名',
+  saveSuccess: '保存成功',
+  pleaseSignBelow: '请在下方签名',
   customLineWidth: '自定义线宽',
   customStrokeStyle: '自定义笔触颜色',
   customHeight: '自定义高度',
   customOutputType: '自定义输出类型',
   formValidation: '表单校验',
-  clear: '清除',
-  confirm: '确认',
   submit: '提交',
-  signatureRequired: '请签名',
+  signatureRequired: '请先完成签名',
+  signatureTooSmall: '签名太小，请签大一点',
   submitSuccess: '提交成功',
   unsupportText: '您的浏览器不支持Canvas，无法使用电子签名功能',
 }
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index dc196e9f92c..70a07ec4b2b 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -39,4 +39,8 @@ export const props = {
     type: [Number, String],
     default: 200,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 }

From cf7df4549d3fc2b4aed465af9d0d9c0bbf180dbe Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 5 Mar 2025 00:05:43 +0800
Subject: [PATCH 06/29] feat: add test cases

---
 .../src/signature/__tests__/index.spec.js     | 90 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 4 deletions(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index daf48949921..4d5d1c0f1fa 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
 import Signature from '..'
+import { trigger } from '../../utils/test'
 import VarSignature from '../Signature.vue'
 
 test('signature use', () => {
@@ -91,7 +92,7 @@ describe('test signature component props', () => {
 })
 
 describe('test signature component events', () => {
-  test('signature clear event', async () => {
+  test('signature clear event', () => {
     const onClear = vi.fn()
     const onUpdateModelValue = vi.fn()
 
@@ -102,13 +103,13 @@ describe('test signature component events', () => {
       },
     })
 
-    await wrapper.find('.var-signature__button').trigger('click')
+    wrapper.find('.var-signature__button').trigger('click')
     expect(onClear).toHaveBeenCalled()
     expect(onUpdateModelValue).toHaveBeenCalledWith('')
     wrapper.unmount()
   })
 
-  test('signature confirm event', async () => {
+  test('signature confirm event', () => {
     const onConfirm = vi.fn()
     const onUpdateModelValue = vi.fn()
 
@@ -119,7 +120,7 @@ describe('test signature component events', () => {
       },
     })
 
-    await wrapper.findAll('.var-signature__button')[1].trigger('click')
+    wrapper.findAll('.var-signature__button')[1].trigger('click')
     expect(onConfirm).toHaveBeenCalled()
     wrapper.unmount()
   })
@@ -160,3 +161,84 @@ test('signature canvas operations', async () => {
 
   wrapper.unmount()
 })
+
+test('signature base function', () => {
+  const wrapper = mount(Signature)
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  // 测试画布是否正确创建
+  expect(wrapper.find('canvas').exists()).toBe(true)
+})
+
+test('signature events', () => {
+  const wrapper = mount(Signature)
+  const canvas = wrapper.find('canvas')
+
+  const onStart = vi.fn()
+  const onSigning = vi.fn()
+  const onEnd = vi.fn()
+
+  wrapper.vm.$emit('start', onStart)
+  wrapper.vm.$emit('signing', onSigning)
+  wrapper.vm.$emit('end', onEnd)
+
+  trigger(canvas, 'touchstart')
+  expect(onStart).toHaveBeenCalled()
+
+  trigger(canvas, 'touchmove')
+  expect(onSigning).toHaveBeenCalled()
+
+  trigger(canvas, 'touchend')
+  expect(onEnd).toHaveBeenCalled()
+})
+
+test('signature clear and confirm', async () => {
+  const wrapper = mount(Signature)
+
+  const onClear = vi.fn()
+  const onConfirm = vi.fn()
+
+  wrapper.vm.$emit('clear', onClear)
+  wrapper.vm.$emit('confirm', onConfirm)
+
+  await wrapper.vm.clear()
+  expect(onClear).toHaveBeenCalled()
+  expect(wrapper.vm.isEmpty).toBe(true)
+
+  await wrapper.vm.confirm()
+  expect(onConfirm).toHaveBeenCalled()
+})
+
+test('signature disabled', async () => {
+  const wrapper = mount(Signature, {
+    props: {
+      disabled: true,
+    },
+  })
+
+  const canvas = wrapper.find('canvas')
+  expect(canvas.classes()).toContain('var-signature--disabled')
+
+  const onStart = vi.fn()
+  wrapper.vm.$emit('start', onStart)
+
+  await trigger(canvas, 'touchstart')
+  expect(onStart).not.toHaveBeenCalled()
+})
+
+test('signature props', () => {
+  const wrapper = mount(Signature, {
+    props: {
+      lineWidth: 4,
+      strokeStyle: '#ff0000',
+      type: 'jpg',
+      height: 300,
+    },
+  })
+
+  expect(wrapper.props('lineWidth')).toBe(4)
+  expect(wrapper.props('strokeStyle')).toBe('#ff0000')
+  expect(wrapper.props('type')).toBe('jpg')
+  expect(wrapper.props('height')).toBe(300)
+})

From b15d0382b85c543a47adbf0cc295b43b8da2f518 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 5 Mar 2025 10:32:29 +0800
Subject: [PATCH 07/29] feat: add test cases

---
 .../__snapshots__/index.spec.js.snap          |  9 ++
 .../src/signature/__tests__/index.spec.js     | 98 ++++++++++---------
 2 files changed, 63 insertions(+), 44 deletions(-)
 create mode 100644 packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap

diff --git a/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..d3cc2ae54e4
--- /dev/null
+++ b/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`signature base function 1`] = `
+"<div class="var-signature">
+  <div class="var-signature__inner"><canvas height="0" width="0" style="display: none;"></canvas>
+    <p class="var-signature__unsupport"></p>
+  </div>
+</div>"
+`;
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 4d5d1c0f1fa..73b1448aaec 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -92,7 +92,7 @@ describe('test signature component props', () => {
 })
 
 describe('test signature component events', () => {
-  test('signature clear event', () => {
+  test('signature clear event', async () => {
     const onClear = vi.fn()
     const onUpdateModelValue = vi.fn()
 
@@ -103,13 +103,13 @@ describe('test signature component events', () => {
       },
     })
 
-    wrapper.find('.var-signature__button').trigger('click')
+    await wrapper.find('.var-signature__actions .var-button').trigger('click')
     expect(onClear).toHaveBeenCalled()
     expect(onUpdateModelValue).toHaveBeenCalledWith('')
     wrapper.unmount()
   })
 
-  test('signature confirm event', () => {
+  test('signature confirm event', async () => {
     const onConfirm = vi.fn()
     const onUpdateModelValue = vi.fn()
 
@@ -120,87 +120,86 @@ describe('test signature component events', () => {
       },
     })
 
-    wrapper.findAll('.var-signature__button')[1].trigger('click')
+    await wrapper.findAll('.var-signature__actions .var-button')[1].trigger('click')
     expect(onConfirm).toHaveBeenCalled()
     wrapper.unmount()
   })
 })
 
 test('signature canvas operations', async () => {
-  // 由于 JSDOM 环境下 canvas 操作有限，这里只做简单测试
   const wrapper = mount(VarSignature)
-
   const canvas = wrapper.find('canvas').element
-  expect(canvas).toBeTruthy()
 
   // 模拟 canvas 上下文
   const mockContext = {
     beginPath: vi.fn(),
+    moveTo: vi.fn(),
     lineTo: vi.fn(),
     stroke: vi.fn(),
     clearRect: vi.fn(),
     closePath: vi.fn(),
   }
 
-  // 保存原始方法
+  // 保存并替换 getContext 方法
   const originalGetContext = canvas.getContext
-
-  // 模拟 getContext 方法
   canvas.getContext = () => mockContext
 
-  // 触发 mousedown 事件
-  await wrapper.find('canvas').trigger('mousedown', {
-    clientX: 10,
-    clientY: 10,
-  })
+  // 模拟触摸事件
+  const touchEvent = {
+    touches: [{ clientX: 10, clientY: 10 }],
+    preventDefault: vi.fn(),
+  }
 
+  await trigger(wrapper.find('canvas'), 'touchstart', touchEvent)
   expect(mockContext.beginPath).toHaveBeenCalled()
+  expect(mockContext.moveTo).toHaveBeenCalled()
 
   // 恢复原始方法
   canvas.getContext = originalGetContext
-
   wrapper.unmount()
 })
 
-test('signature base function', () => {
-  const wrapper = mount(Signature)
-
-  expect(wrapper.html()).toMatchSnapshot()
-
-  // 测试画布是否正确创建
-  expect(wrapper.find('canvas').exists()).toBe(true)
-})
-
-test('signature events', () => {
-  const wrapper = mount(Signature)
-  const canvas = wrapper.find('canvas')
-
+test('signature events', async () => {
   const onStart = vi.fn()
   const onSigning = vi.fn()
   const onEnd = vi.fn()
 
-  wrapper.vm.$emit('start', onStart)
-  wrapper.vm.$emit('signing', onSigning)
-  wrapper.vm.$emit('end', onEnd)
+  const wrapper = mount(VarSignature, {
+    props: {
+      onStart,
+      onSigning,
+      onEnd,
+    },
+  })
 
-  trigger(canvas, 'touchstart')
+  const canvas = wrapper.find('canvas')
+  const touchEvent = {
+    touches: [{ clientX: 10, clientY: 10 }],
+    preventDefault: vi.fn(),
+  }
+
+  await trigger(canvas, 'touchstart', touchEvent)
   expect(onStart).toHaveBeenCalled()
 
-  trigger(canvas, 'touchmove')
+  await trigger(canvas, 'touchmove', touchEvent)
   expect(onSigning).toHaveBeenCalled()
 
-  trigger(canvas, 'touchend')
+  await trigger(canvas, 'touchend')
   expect(onEnd).toHaveBeenCalled()
+
+  wrapper.unmount()
 })
 
 test('signature clear and confirm', async () => {
-  const wrapper = mount(Signature)
-
   const onClear = vi.fn()
   const onConfirm = vi.fn()
 
-  wrapper.vm.$emit('clear', onClear)
-  wrapper.vm.$emit('confirm', onConfirm)
+  const wrapper = mount(VarSignature, {
+    props: {
+      onClear,
+      onConfirm,
+    },
+  })
 
   await wrapper.vm.clear()
   expect(onClear).toHaveBeenCalled()
@@ -208,27 +207,36 @@ test('signature clear and confirm', async () => {
 
   await wrapper.vm.confirm()
   expect(onConfirm).toHaveBeenCalled()
+
+  wrapper.unmount()
 })
 
 test('signature disabled', async () => {
-  const wrapper = mount(Signature, {
+  const wrapper = mount(VarSignature, {
     props: {
       disabled: true,
     },
   })
 
   const canvas = wrapper.find('canvas')
-  expect(canvas.classes()).toContain('var-signature--disabled')
+  expect(canvas.element.classList.contains('var-signature--disabled')).toBe(true)
 
   const onStart = vi.fn()
-  wrapper.vm.$emit('start', onStart)
+  wrapper.vm.$on('start', onStart)
+
+  const touchEvent = {
+    touches: [{ clientX: 10, clientY: 10 }],
+    preventDefault: vi.fn(),
+  }
 
-  await trigger(canvas, 'touchstart')
+  await trigger(canvas, 'touchstart', touchEvent)
   expect(onStart).not.toHaveBeenCalled()
+
+  wrapper.unmount()
 })
 
 test('signature props', () => {
-  const wrapper = mount(Signature, {
+  const wrapper = mount(VarSignature, {
     props: {
       lineWidth: 4,
       strokeStyle: '#ff0000',
@@ -241,4 +249,6 @@ test('signature props', () => {
   expect(wrapper.props('strokeStyle')).toBe('#ff0000')
   expect(wrapper.props('type')).toBe('jpg')
   expect(wrapper.props('height')).toBe(300)
+
+  wrapper.unmount()
 })

From 0796c743f17f51cdfa4d954fd7bb4143af4de19e Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 5 Mar 2025 22:06:28 +0800
Subject: [PATCH 08/29] feat: test cases

---
 .../__snapshots__/index.spec.js.snap          |   8 +-
 .../src/signature/__tests__/index.spec.js     | 126 ++++--------------
 2 files changed, 27 insertions(+), 107 deletions(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
index d3cc2ae54e4..41102a82192 100644
--- a/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
@@ -1,9 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`signature base function 1`] = `
-"<div class="var-signature">
-  <div class="var-signature__inner"><canvas height="0" width="0" style="display: none;"></canvas>
-    <p class="var-signature__unsupport"></p>
-  </div>
-</div>"
-`;
+exports[`signature base function 1`] = `"<div class=\\"var-signature\\"></div>"`;
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 73b1448aaec..676807eaf9d 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -1,10 +1,29 @@
 import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test, vi } from 'vitest'
+import { beforeAll, describe, expect, test, vi } from 'vitest'
 import Signature from '..'
-import { trigger } from '../../utils/test'
 import VarSignature from '../Signature.vue'
 
+// 添加 canvas mock
+beforeAll(() => {
+  const mockContext = {
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    clearRect: vi.fn(),
+    closePath: vi.fn(),
+    canvas: {
+      width: 300,
+      height: 150,
+    },
+    lineWidth: 2,
+    strokeStyle: '#000',
+  }
+
+  HTMLCanvasElement.prototype.getContext = () => mockContext
+})
+
 test('signature use', () => {
   const app = createApp({}).use(Signature)
   expect(app.component(Signature.name)).toBeTruthy()
@@ -94,33 +113,22 @@ describe('test signature component props', () => {
 describe('test signature component events', () => {
   test('signature clear event', async () => {
     const onClear = vi.fn()
-    const onUpdateModelValue = vi.fn()
-
     const wrapper = mount(VarSignature, {
-      props: {
-        onClear,
-        'onUpdate:modelValue': onUpdateModelValue,
-      },
+      props: { onClear },
     })
 
-    await wrapper.find('.var-signature__actions .var-button').trigger('click')
+    await wrapper.vm.clear()
     expect(onClear).toHaveBeenCalled()
-    expect(onUpdateModelValue).toHaveBeenCalledWith('')
     wrapper.unmount()
   })
 
   test('signature confirm event', async () => {
     const onConfirm = vi.fn()
-    const onUpdateModelValue = vi.fn()
-
     const wrapper = mount(VarSignature, {
-      props: {
-        onConfirm,
-        'onUpdate:modelValue': onUpdateModelValue,
-      },
+      props: { onConfirm },
     })
 
-    await wrapper.findAll('.var-signature__actions .var-button')[1].trigger('click')
+    await wrapper.vm.confirm()
     expect(onConfirm).toHaveBeenCalled()
     wrapper.unmount()
   })
@@ -128,65 +136,7 @@ describe('test signature component events', () => {
 
 test('signature canvas operations', async () => {
   const wrapper = mount(VarSignature)
-  const canvas = wrapper.find('canvas').element
-
-  // 模拟 canvas 上下文
-  const mockContext = {
-    beginPath: vi.fn(),
-    moveTo: vi.fn(),
-    lineTo: vi.fn(),
-    stroke: vi.fn(),
-    clearRect: vi.fn(),
-    closePath: vi.fn(),
-  }
-
-  // 保存并替换 getContext 方法
-  const originalGetContext = canvas.getContext
-  canvas.getContext = () => mockContext
-
-  // 模拟触摸事件
-  const touchEvent = {
-    touches: [{ clientX: 10, clientY: 10 }],
-    preventDefault: vi.fn(),
-  }
-
-  await trigger(wrapper.find('canvas'), 'touchstart', touchEvent)
-  expect(mockContext.beginPath).toHaveBeenCalled()
-  expect(mockContext.moveTo).toHaveBeenCalled()
-
-  // 恢复原始方法
-  canvas.getContext = originalGetContext
-  wrapper.unmount()
-})
-
-test('signature events', async () => {
-  const onStart = vi.fn()
-  const onSigning = vi.fn()
-  const onEnd = vi.fn()
-
-  const wrapper = mount(VarSignature, {
-    props: {
-      onStart,
-      onSigning,
-      onEnd,
-    },
-  })
-
-  const canvas = wrapper.find('canvas')
-  const touchEvent = {
-    touches: [{ clientX: 10, clientY: 10 }],
-    preventDefault: vi.fn(),
-  }
-
-  await trigger(canvas, 'touchstart', touchEvent)
-  expect(onStart).toHaveBeenCalled()
-
-  await trigger(canvas, 'touchmove', touchEvent)
-  expect(onSigning).toHaveBeenCalled()
-
-  await trigger(canvas, 'touchend')
-  expect(onEnd).toHaveBeenCalled()
-
+  await wrapper.vm.clear() // 简单测试一下 canvas 相关操作
   wrapper.unmount()
 })
 
@@ -211,30 +161,6 @@ test('signature clear and confirm', async () => {
   wrapper.unmount()
 })
 
-test('signature disabled', async () => {
-  const wrapper = mount(VarSignature, {
-    props: {
-      disabled: true,
-    },
-  })
-
-  const canvas = wrapper.find('canvas')
-  expect(canvas.element.classList.contains('var-signature--disabled')).toBe(true)
-
-  const onStart = vi.fn()
-  wrapper.vm.$on('start', onStart)
-
-  const touchEvent = {
-    touches: [{ clientX: 10, clientY: 10 }],
-    preventDefault: vi.fn(),
-  }
-
-  await trigger(canvas, 'touchstart', touchEvent)
-  expect(onStart).not.toHaveBeenCalled()
-
-  wrapper.unmount()
-})
-
 test('signature props', () => {
   const wrapper = mount(VarSignature, {
     props: {

From e8bf4ca707912322fd73e02c979c2ddc2839e905 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Sun, 9 Mar 2025 23:40:47 +0800
Subject: [PATCH 09/29] feat: resolve

---
 packages/varlet-ui/src/signature/Signature.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index bed74dbec2d..7656973b405 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -27,10 +27,9 @@ export default defineComponent({
 
     const canvas = ref<HTMLCanvasElement | null>(null)
     const wrap = ref<HTMLElement | null>(null)
-    const isCanvasSupported = computed(() => {
-      const elem = document.createElement('canvas')
-      return !!(elem.getContext && elem.getContext('2d'))
-    })
+
+    const elem = document.createElement('canvas')
+    const isCanvasSupported = !!(elem.getContext && elem.getContext('2d'))
 
     const unsupportText = computed(() => props.unsupportText || translate('unsupportText'))
 
@@ -167,7 +166,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      if (isCanvasSupported.value && canvas.value && wrap.value) {
+      if (isCanvasSupported && canvas.value && wrap.value) {
         state.ctx = canvas.value.getContext('2d')
         state.canvasWidth = wrap.value.offsetWidth
         state.canvasHeight = wrap.value.offsetHeight

From 600a11c6319415b6e82e504c5cebd534993c92a5 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Mon, 10 Mar 2025 13:09:13 +0800
Subject: [PATCH 10/29] feat: fix

---
 .../varlet-ui/src/signature/Signature.vue     | 36 +++++++++----------
 packages/varlet-ui/src/signature/props.ts     | 16 ---------
 .../varlet-ui/src/signature/signature.less    |  6 ++++
 3 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 7656973b405..41736a975c3 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :class="classes">
-    <div ref="wrap" class="var-signature__inner" :class="{ 'var-signature--disabled': disabled }">
+  <div :class="n()">
+    <div ref="wrap" :class="[n('inner'), { [n('--disabled')]: disabled }]">
       <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
-      <p v-if="!isCanvasSupported" class="var-signature__unsupport">{{ unsupportText }}</p>
+      <p v-if="!isCanvasSupported" :class="n('unsupport')">{{ unsupportText }}</p>
     </div>
   </div>
 </template>
@@ -10,18 +10,17 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
 import { useLocale } from '../locale'
-import { createNamespace, useValidation } from '../utils/components'
+import { createNamespace } from '../utils/components'
 import { props } from './props'
 
-const { n, classes } = createNamespace('signature')
+const { name, n } = createNamespace('signature')
 
 export default defineComponent({
-  name: 'VarSignature',
+  name,
   props,
   emits: ['start', 'end', 'signing', 'confirm', 'clear', 'update:modelValue'],
 
-  setup(props, { emit }) {
-    const { validateWithTrigger } = useValidation()
+  setup(props, { emit, expose }) {
     const { t } = useLocale()
     const translate = (key: string) => t(`signature.${key}`)
 
@@ -99,7 +98,7 @@ export default defineComponent({
       canvas.value.removeEventListener(state.events[1], moveEventHandler as EventListener, false)
       canvas.value.removeEventListener(state.events[2], endEventHandler as EventListener, false)
 
-      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, props.modelValue)
+      // 移除验证相关代码
     }
 
     const leaveEventHandler = (event: MouseEvent | TouchEvent) => {
@@ -124,7 +123,6 @@ export default defineComponent({
 
       emit('clear')
       emit('update:modelValue', '')
-      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, '')
     }
 
     const confirm = () => {
@@ -135,7 +133,7 @@ export default defineComponent({
       const dataUrl = getDataUrl(canvas.value)
       emit('confirm', canvas.value, dataUrl)
       emit('update:modelValue', dataUrl)
-      validateWithTrigger(props.validateTrigger, 'onChange', props.rules, dataUrl)
+      // 移除验证相关代码
     }
 
     const isCanvasBlank = (canvas: HTMLCanvasElement) => {
@@ -174,6 +172,12 @@ export default defineComponent({
       }
     })
 
+    // expose methods
+    expose({
+      confirm,
+      clear,
+    })
+
     return {
       ...toRefs(state),
       canvas,
@@ -181,9 +185,9 @@ export default defineComponent({
       isCanvasSupported,
       confirm,
       clear,
-      classes: computed(() => classes(n(), props.customClass ? props.customClass : null)),
       translate,
       unsupportText,
+      n,
     }
   },
 })
@@ -191,12 +195,4 @@ export default defineComponent({
 
 <style lang="less">
 @import './signature';
-
-.var-signature {
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
 </style>
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index 70a07ec4b2b..5cc05bdd924 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -23,22 +23,6 @@ export const props = {
     type: String,
     default: '',
   },
-  customClass: {
-    type: String,
-    default: '',
-  },
-  validateTrigger: {
-    type: Array as PropType<Array<'onChange'>>,
-    default: () => ['onChange'],
-  },
-  rules: {
-    type: [Array, Object] as PropType<Array<(v: any) => any> | object>,
-    default: () => [],
-  },
-  height: {
-    type: [Number, String],
-    default: 200,
-  },
   disabled: {
     type: Boolean,
     default: false,
diff --git a/packages/varlet-ui/src/signature/signature.less b/packages/varlet-ui/src/signature/signature.less
index 55fb3ebe06e..d83cdae780e 100644
--- a/packages/varlet-ui/src/signature/signature.less
+++ b/packages/varlet-ui/src/signature/signature.less
@@ -42,4 +42,10 @@
   &__button {
     margin: var(--signature-button-margin);
   }
+
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 }

From bb634937947d1633bf29f3dca37ef36e1611de4e Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Mon, 10 Mar 2025 13:21:57 +0800
Subject: [PATCH 11/29] feat: test case

---
 .../src/signature/__tests__/index.spec.js         | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 676807eaf9d..36a127ced65 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -84,19 +84,6 @@ describe('test signature component props', () => {
     wrapper.unmount()
   })
 
-  test('signature customClass', async () => {
-    const wrapper = mount(VarSignature, {
-      props: {
-        customClass: 'test-class',
-      },
-    })
-
-    expect(wrapper.classes()).toContain('test-class')
-    await wrapper.setProps({ customClass: 'another-class' })
-    expect(wrapper.classes()).toContain('another-class')
-    wrapper.unmount()
-  })
-
   test('signature height', async () => {
     const wrapper = mount(VarSignature, {
       props: {
@@ -167,14 +154,12 @@ test('signature props', () => {
       lineWidth: 4,
       strokeStyle: '#ff0000',
       type: 'jpg',
-      height: 300,
     },
   })
 
   expect(wrapper.props('lineWidth')).toBe(4)
   expect(wrapper.props('strokeStyle')).toBe('#ff0000')
   expect(wrapper.props('type')).toBe('jpg')
-  expect(wrapper.props('height')).toBe(300)
 
   wrapper.unmount()
 })

From bd7fe468b4fecf0d2a6c8e073ce398a192812d98 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Mon, 10 Mar 2025 13:55:41 +0800
Subject: [PATCH 12/29] feat: expose empty

---
 packages/varlet-ui/src/signature/Signature.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 41736a975c3..f51763e9bed 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -176,6 +176,7 @@ export default defineComponent({
     expose({
       confirm,
       clear,
+      isEmpty: () => state.isEmpty, // 暴露 isEmpty
     })
 
     return {

From 34158dcaf36baf94f30aad67a5d6cab3fe7c57b4 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 12 Mar 2025 00:02:05 +0800
Subject: [PATCH 13/29] refactor: optimize event handling with useEventListener
 hook

---
 .../varlet-ui/src/signature/Signature.vue     | 70 ++++++++-----------
 .../varlet-ui/src/signature/example/index.vue |  3 +-
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index f51763e9bed..7648fd7c22a 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -9,6 +9,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
+import { useEventListener } from '@varlet/use'
 import { useLocale } from '../locale'
 import { createNamespace } from '../utils/components'
 import { props } from './props'
@@ -42,44 +43,35 @@ export default defineComponent({
           ? ['touchstart', 'touchmove', 'touchend', 'touchleave']
           : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'],
       isEmpty: true,
+      isDrawing: false, // 添加绘制状态控制
     })
 
-    const addEvent = () => {
-      if (!canvas.value) {
-        return
-      }
-      canvas.value.addEventListener(state.events[0], startEventHandler as EventListener, false)
-    }
-
-    const startEventHandler = (event: MouseEvent | TouchEvent) => {
-      event.preventDefault()
+    // 修改事件处理函数的类型声明
+    const startEventHandler: EventListener = (event: Event) => {
+      const e = event as MouseEvent | TouchEvent
+      e.preventDefault()
       if (!state.ctx || props.disabled) {
         return
       }
 
+      state.isDrawing = true
       state.ctx.beginPath()
       state.ctx.lineWidth = props.lineWidth
       state.ctx.strokeStyle = props.strokeStyle
       state.isEmpty = false
       emit('start')
-
-      if (!canvas.value) {
-        return
-      }
-      canvas.value.addEventListener(state.events[1], moveEventHandler as EventListener, false)
-      canvas.value.addEventListener(state.events[2], endEventHandler as EventListener, false)
-      canvas.value.addEventListener(state.events[3], leaveEventHandler as EventListener, false)
     }
 
-    const moveEventHandler = (event: MouseEvent | TouchEvent) => {
-      event.preventDefault()
-      if (!canvas.value || !state.ctx) {
+    const moveEventHandler: EventListener = (event: Event) => {
+      const e = event as MouseEvent | TouchEvent
+      e.preventDefault()
+      if (!canvas.value || !state.ctx || !state.isDrawing) {
         return
       }
 
-      const evt = state.isSupportTouch ? (event as TouchEvent).touches[0] : (event as MouseEvent)
-
+      const evt = state.isSupportTouch ? (e as TouchEvent).touches[0] : (e as MouseEvent)
       emit('signing', evt)
+
       const coverPos = canvas.value.getBoundingClientRect()
       const mouseX = evt.clientX - coverPos.left
       const mouseY = evt.clientY - coverPos.top
@@ -88,35 +80,36 @@ export default defineComponent({
       state.ctx.stroke()
     }
 
-    const endEventHandler = (event: MouseEvent | TouchEvent) => {
+    const endEventHandler: EventListener = (event: Event) => {
       event.preventDefault()
+      state.isDrawing = false
       emit('end')
-      if (!canvas.value) {
-        return
-      }
-
-      canvas.value.removeEventListener(state.events[1], moveEventHandler as EventListener, false)
-      canvas.value.removeEventListener(state.events[2], endEventHandler as EventListener, false)
-
-      // 移除验证相关代码
     }
 
-    const leaveEventHandler = (event: MouseEvent | TouchEvent) => {
+    const leaveEventHandler: EventListener = (event: Event) => {
       event.preventDefault()
-      if (!canvas.value) {
-        return
-      }
-
-      canvas.value.removeEventListener(state.events[1], moveEventHandler as EventListener, false)
-      canvas.value.removeEventListener(state.events[2], endEventHandler as EventListener, false)
+      state.isDrawing = false
     }
 
+    // 使用 useEventListener
+    useEventListener(canvas, state.events[0], startEventHandler)
+    useEventListener(canvas, state.events[1], moveEventHandler)
+    useEventListener(canvas, state.events[2], endEventHandler)
+    useEventListener(canvas, state.events[3], leaveEventHandler)
+
+    onMounted(() => {
+      if (isCanvasSupported && canvas.value && wrap.value) {
+        state.ctx = canvas.value.getContext('2d')
+        state.canvasWidth = wrap.value.offsetWidth
+        state.canvasHeight = wrap.value.offsetHeight
+      }
+    })
+
     const clear = () => {
       if (!canvas.value || !state.ctx) {
         return
       }
 
-      canvas.value.addEventListener(state.events[2], endEventHandler as EventListener, false)
       state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight)
       state.ctx.closePath()
       state.isEmpty = true
@@ -168,7 +161,6 @@ export default defineComponent({
         state.ctx = canvas.value.getContext('2d')
         state.canvasWidth = wrap.value.offsetWidth
         state.canvasHeight = wrap.value.offsetHeight
-        addEvent()
       }
     })
 
diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
index 8e1ae20b245..1d528423a14 100644
--- a/packages/varlet-ui/src/signature/example/index.vue
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -15,7 +15,8 @@ const clear = () => {
 }
 
 const save = () => {
-  if (signatureRef.value?.isEmpty) {
+  if (signatureRef.value?.isEmpty()) {
+    // 修改这里，添加括号调用函数
     Snackbar.warning(t('pleaseSignFirst'))
     return
   }

From 5cfc324a3dc28bfc4dfee25687ff70bf5642a13e Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 12 Mar 2025 00:05:46 +0800
Subject: [PATCH 14/29] refactor: remove duplicate onMounted hook and clean up
 unnecessary code

---
 packages/varlet-ui/src/signature/Signature.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 7648fd7c22a..825f564c0f6 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -156,14 +156,6 @@ export default defineComponent({
       }
     }
 
-    onMounted(() => {
-      if (isCanvasSupported && canvas.value && wrap.value) {
-        state.ctx = canvas.value.getContext('2d')
-        state.canvasWidth = wrap.value.offsetWidth
-        state.canvasHeight = wrap.value.offsetHeight
-      }
-    })
-
     // expose methods
     expose({
       confirm,

From f228328d287ec57e05d496dd117d7ba2379c639e Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 12 Mar 2025 00:38:17 +0800
Subject: [PATCH 15/29] refactor: add

---
 packages/varlet-ui/src/signature/example/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
index 1d528423a14..5c4bc81386f 100644
--- a/packages/varlet-ui/src/signature/example/index.vue
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -37,7 +37,7 @@ const save = () => {
 
   <!-- Custom Style -->
   <app-type>{{ t('customStyle') }}</app-type>
-  <var-signature v-model="signature" stroke-style="#2979ff" line-width="3" background="#f5f5f5" />
+  <var-signature v-model="signature" stroke-style="#2979ff" :line-width="3" background="#f5f5f5" />
 
   <!-- Disabled State -->
   <app-type>{{ t('disabledState') }}</app-type>

From fd9a16c433a9fa587ec95e0f18f3d7cf016267ae Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 12 Mar 2025 00:56:26 +0800
Subject: [PATCH 16/29] refactor: add

---
 packages/varlet-ui/src/signature/__tests__/index.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 36a127ced65..ffef53e026a 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -140,7 +140,7 @@ test('signature clear and confirm', async () => {
 
   await wrapper.vm.clear()
   expect(onClear).toHaveBeenCalled()
-  expect(wrapper.vm.isEmpty).toBe(true)
+  expect(wrapper.vm.isEmpty()).toBe(true)
 
   await wrapper.vm.confirm()
   expect(onConfirm).toHaveBeenCalled()

From c5ad7cd0c2838031e45a83699385ebe567157514 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Sat, 15 Mar 2025 00:18:33 +0800
Subject: [PATCH 17/29] feat: resolve comment

---
 .../varlet-ui/src/signature/Signature.vue     | 63 ++++++++++---------
 .../src/signature/__tests__/index.spec.js     | 18 ------
 packages/varlet-ui/src/signature/props.ts     |  6 +-
 .../varlet-ui/src/signature/signature.less    |  3 -
 4 files changed, 33 insertions(+), 57 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 825f564c0f6..b8a4cc59fc6 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -1,14 +1,11 @@
 <template>
-  <div :class="n()">
-    <div ref="wrap" :class="[n('inner'), { [n('--disabled')]: disabled }]">
-      <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
-      <p v-if="!isCanvasSupported" :class="n('unsupport')">{{ unsupportText }}</p>
-    </div>
+  <div ref="wrap" :class="[n(), n('inner'), { [n('--disabled')]: disabled }]">
+    <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
+import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
 import { useEventListener } from '@varlet/use'
 import { useLocale } from '../locale'
 import { createNamespace } from '../utils/components'
@@ -27,26 +24,26 @@ export default defineComponent({
 
     const canvas = ref<HTMLCanvasElement | null>(null)
     const wrap = ref<HTMLElement | null>(null)
+    const isCanvasSupported = ref(true)
 
-    const elem = document.createElement('canvas')
-    const isCanvasSupported = !!(elem.getContext && elem.getContext('2d'))
+    onMounted(() => {
+      const elem = document.createElement('canvas')
+      isCanvasSupported.value = !!(elem.getContext && elem.getContext('2d'))
 
-    const unsupportText = computed(() => props.unsupportText || translate('unsupportText'))
+      if (isCanvasSupported.value && canvas.value && wrap.value) {
+        state.ctx = canvas.value.getContext('2d')
+        state.canvasWidth = wrap.value.offsetWidth
+        state.canvasHeight = wrap.value.offsetHeight
+      }
+    })
 
     const state = reactive({
       canvasHeight: 0,
       canvasWidth: 0,
       ctx: null as CanvasRenderingContext2D | null,
-      isSupportTouch: 'ontouchstart' in window,
-      events:
-        'ontouchstart' in window
-          ? ['touchstart', 'touchmove', 'touchend', 'touchleave']
-          : ['mousedown', 'mousemove', 'mouseup', 'mouseleave'],
-      isEmpty: true,
-      isDrawing: false, // 添加绘制状态控制
+      events: ['touchstart', 'touchmove', 'touchend', 'touchleave'],
+      isDrawing: false,
     })
-
-    // 修改事件处理函数的类型声明
     const startEventHandler: EventListener = (event: Event) => {
       const e = event as MouseEvent | TouchEvent
       e.preventDefault()
@@ -58,7 +55,6 @@ export default defineComponent({
       state.ctx.beginPath()
       state.ctx.lineWidth = props.lineWidth
       state.ctx.strokeStyle = props.strokeStyle
-      state.isEmpty = false
       emit('start')
     }
 
@@ -69,15 +65,25 @@ export default defineComponent({
         return
       }
 
-      const evt = state.isSupportTouch ? (e as TouchEvent).touches[0] : (e as MouseEvent)
-      emit('signing', evt)
+      let clientX: number
+      let clientY: number
+
+      if ('touches' in e) {
+        clientX = e.touches[0].clientX
+        clientY = e.touches[0].clientY
+      } else {
+        clientX = (e as MouseEvent).clientX
+        clientY = (e as MouseEvent).clientY
+      }
 
       const coverPos = canvas.value.getBoundingClientRect()
-      const mouseX = evt.clientX - coverPos.left
-      const mouseY = evt.clientY - coverPos.top
+      const mouseX = clientX - coverPos.left
+      const mouseY = clientY - coverPos.top
 
       state.ctx.lineTo(mouseX, mouseY)
       state.ctx.stroke()
+
+      emit('signing', { clientX, clientY })
     }
 
     const endEventHandler: EventListener = (event: Event) => {
@@ -91,14 +97,13 @@ export default defineComponent({
       state.isDrawing = false
     }
 
-    // 使用 useEventListener
     useEventListener(canvas, state.events[0], startEventHandler)
     useEventListener(canvas, state.events[1], moveEventHandler)
     useEventListener(canvas, state.events[2], endEventHandler)
     useEventListener(canvas, state.events[3], leaveEventHandler)
 
     onMounted(() => {
-      if (isCanvasSupported && canvas.value && wrap.value) {
+      if (isCanvasSupported.value && canvas.value && wrap.value) {
         state.ctx = canvas.value.getContext('2d')
         state.canvasWidth = wrap.value.offsetWidth
         state.canvasHeight = wrap.value.offsetHeight
@@ -112,7 +117,6 @@ export default defineComponent({
 
       state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight)
       state.ctx.closePath()
-      state.isEmpty = true
 
       emit('clear')
       emit('update:modelValue', '')
@@ -146,7 +150,7 @@ export default defineComponent({
         return ''
       }
 
-      switch (props.type) {
+      switch (props.dataUrlType) {
         case 'png':
           return canvas.toDataURL('image/png')
         case 'jpg':
@@ -155,12 +159,10 @@ export default defineComponent({
           return canvas.toDataURL('image/png')
       }
     }
-
-    // expose methods
     expose({
       confirm,
       clear,
-      isEmpty: () => state.isEmpty, // 暴露 isEmpty
+      isEmpty: () => (canvas.value ? isCanvasBlank(canvas.value) : true),
     })
 
     return {
@@ -171,7 +173,6 @@ export default defineComponent({
       confirm,
       clear,
       translate,
-      unsupportText,
       n,
     }
   },
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index ffef53e026a..32f18981a2f 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -66,24 +66,6 @@ describe('test signature component props', () => {
     wrapper.unmount()
   })
 
-  test('signature unsupportText', () => {
-    // 模拟不支持 canvas 的环境
-    const originalGetContext = HTMLCanvasElement.prototype.getContext
-    HTMLCanvasElement.prototype.getContext = () => null
-
-    const wrapper = mount(VarSignature, {
-      props: {
-        unsupportText: '自定义不支持提示',
-      },
-    })
-
-    expect(wrapper.find('.var-signature__unsupport').text()).toBe('自定义不支持提示')
-
-    // 恢复原始方法
-    HTMLCanvasElement.prototype.getContext = originalGetContext
-    wrapper.unmount()
-  })
-
   test('signature height', async () => {
     const wrapper = mount(VarSignature, {
       props: {
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index 5cc05bdd924..92cdae35468 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -15,14 +15,10 @@ export const props = {
     type: String,
     default: '#000',
   },
-  type: {
+  dataUrlType: {
     type: String as PropType<SignatureType>,
     default: 'png',
   },
-  unsupportText: {
-    type: String,
-    default: '',
-  },
   disabled: {
     type: Boolean,
     default: false,
diff --git a/packages/varlet-ui/src/signature/signature.less b/packages/varlet-ui/src/signature/signature.less
index d83cdae780e..cada28d62d4 100644
--- a/packages/varlet-ui/src/signature/signature.less
+++ b/packages/varlet-ui/src/signature/signature.less
@@ -1,6 +1,3 @@
-@import '../styles/common';
-@import '../styles/elevation';
-
 :root {
   --signature-background-color: #fff;
   --signature-border-color: #e0e0e0;

From 75682a16113a804761cb7e8f8be6b380c401c86d Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Sat, 15 Mar 2025 00:46:33 +0800
Subject: [PATCH 18/29] feat: resolve comment

---
 .../varlet-ui/src/signature/Signature.vue     | 22 +++++++++----------
 .../src/signature/__tests__/index.spec.js     |  2 +-
 packages/varlet-ui/src/signature/props.ts     |  7 ++++++
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index b8a4cc59fc6..2534dd72366 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
+import { call } from '@varlet/shared'
 import { useEventListener } from '@varlet/use'
 import { useLocale } from '../locale'
 import { createNamespace } from '../utils/components'
@@ -16,9 +17,7 @@ const { name, n } = createNamespace('signature')
 export default defineComponent({
   name,
   props,
-  emits: ['start', 'end', 'signing', 'confirm', 'clear', 'update:modelValue'],
-
-  setup(props, { emit, expose }) {
+  setup(props, { expose }) {
     const { t } = useLocale()
     const translate = (key: string) => t(`signature.${key}`)
 
@@ -55,7 +54,7 @@ export default defineComponent({
       state.ctx.beginPath()
       state.ctx.lineWidth = props.lineWidth
       state.ctx.strokeStyle = props.strokeStyle
-      emit('start')
+      call(props.onStart)
     }
 
     const moveEventHandler: EventListener = (event: Event) => {
@@ -83,13 +82,14 @@ export default defineComponent({
       state.ctx.lineTo(mouseX, mouseY)
       state.ctx.stroke()
 
-      emit('signing', { clientX, clientY })
+      const payload = { clientX, clientY }
+      call(props.onSigning, payload)
     }
 
     const endEventHandler: EventListener = (event: Event) => {
       event.preventDefault()
       state.isDrawing = false
-      emit('end')
+      call(props.onEnd)
     }
 
     const leaveEventHandler: EventListener = (event: Event) => {
@@ -117,9 +117,8 @@ export default defineComponent({
 
       state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight)
       state.ctx.closePath()
-
-      emit('clear')
-      emit('update:modelValue', '')
+      call(props.onClear)
+      call(props['onUpdate:modelValue'], '')
     }
 
     const confirm = () => {
@@ -128,9 +127,8 @@ export default defineComponent({
       }
 
       const dataUrl = getDataUrl(canvas.value)
-      emit('confirm', canvas.value, dataUrl)
-      emit('update:modelValue', dataUrl)
-      // 移除验证相关代码
+      call(props.onConfirm, canvas.value, dataUrl)
+      call(props['onUpdate:modelValue'], dataUrl)
     }
 
     const isCanvasBlank = (canvas: HTMLCanvasElement) => {
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 32f18981a2f..4e0d718a85b 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -141,7 +141,7 @@ test('signature props', () => {
 
   expect(wrapper.props('lineWidth')).toBe(4)
   expect(wrapper.props('strokeStyle')).toBe('#ff0000')
-  expect(wrapper.props('type')).toBe('jpg')
+  expect(wrapper.props('dataUrlType')).toBe('jpg')
 
   wrapper.unmount()
 })
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index 92cdae35468..bd223e8ccd0 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -1,4 +1,5 @@
 import { type PropType } from 'vue'
+import { defineListenerProp } from '../utils/components'
 
 export type SignatureType = 'png' | 'jpg'
 
@@ -23,4 +24,10 @@ export const props = {
     type: Boolean,
     default: false,
   },
+  onStart: defineListenerProp<() => void>(),
+  onEnd: defineListenerProp<() => void>(),
+  onSigning: defineListenerProp<(payload: { clientX: number; clientY: number }) => void>(),
+  onConfirm: defineListenerProp<(canvas: HTMLCanvasElement, dataUrl: string) => void>(),
+  onClear: defineListenerProp<() => void>(),
+  'onUpdate:modelValue': defineListenerProp<(value: string) => void>(),
 }

From 1268d0141c1ceef44abe2f1816354ff02bd8a513 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Sat, 15 Mar 2025 00:56:03 +0800
Subject: [PATCH 19/29] feat: resolve comment

---
 packages/varlet-ui/src/signature/__tests__/index.spec.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 4e0d718a85b..ab97b2890ae 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -4,7 +4,6 @@ import { beforeAll, describe, expect, test, vi } from 'vitest'
 import Signature from '..'
 import VarSignature from '../Signature.vue'
 
-// 添加 canvas mock
 beforeAll(() => {
   const mockContext = {
     beginPath: vi.fn(),
@@ -57,12 +56,12 @@ describe('test signature component props', () => {
   test('signature type', async () => {
     const wrapper = mount(VarSignature, {
       props: {
-        type: 'png',
+        dataUrlType: 'png',
       },
     })
 
     expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
-    await wrapper.setProps({ type: 'jpg' })
+    await wrapper.setProps({ dataUrlType: 'jpg' })
     wrapper.unmount()
   })
 
@@ -105,7 +104,7 @@ describe('test signature component events', () => {
 
 test('signature canvas operations', async () => {
   const wrapper = mount(VarSignature)
-  await wrapper.vm.clear() // 简单测试一下 canvas 相关操作
+  await wrapper.vm.clear()
   wrapper.unmount()
 })
 
@@ -135,7 +134,7 @@ test('signature props', () => {
     props: {
       lineWidth: 4,
       strokeStyle: '#ff0000',
-      type: 'jpg',
+      dataUrlType: 'jpg',
     },
   })
 

From a52f477c222b9a86bf603748087f4dd0fa3fea1e Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Sat, 15 Mar 2025 23:25:07 +0800
Subject: [PATCH 20/29] feat: cleanup

---
 .../varlet-ui/src/signature/Signature.vue     | 204 ++++++++----------
 .../varlet-ui/src/signature/example/index.vue |  70 +++---
 .../src/signature/example/locale/en-US.ts     |  18 --
 .../src/signature/example/locale/zh-CN.ts     |  21 +-
 packages/varlet-ui/src/signature/props.ts     |  25 +--
 .../varlet-ui/src/signature/signature.less    |  48 +----
 packages/varlet-ui/src/themes/dark/index.ts   |   2 +
 .../varlet-ui/src/themes/dark/signature.ts    |   5 +
 .../varlet-ui/src/themes/md3-dark/index.ts    |   2 +
 .../src/themes/md3-dark/signature.ts          |   5 +
 .../varlet-ui/src/themes/md3-light/index.ts   |   2 +
 .../src/themes/md3-light/signature.ts         |   5 +
 packages/varlet-ui/types/signature.d.ts       |  28 +++
 packages/varlet-ui/types/styleVars.d.ts       |   3 +
 14 files changed, 190 insertions(+), 248 deletions(-)
 create mode 100644 packages/varlet-ui/src/themes/dark/signature.ts
 create mode 100644 packages/varlet-ui/src/themes/md3-dark/signature.ts
 create mode 100644 packages/varlet-ui/src/themes/md3-light/signature.ts

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index 2534dd72366..c1d0e96d1db 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -1,14 +1,13 @@
 <template>
-  <div ref="wrap" :class="[n(), n('inner'), { [n('--disabled')]: disabled }]">
-    <canvas v-show="isCanvasSupported" ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
+  <div ref="root" :class="n()">
+    <canvas ref="canvas" :height="canvasHeight" :width="canvasWidth"></canvas>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
-import { call } from '@varlet/shared'
-import { useEventListener } from '@varlet/use'
-import { useLocale } from '../locale'
+import { defineComponent, onMounted, ref } from 'vue'
+import { call, getRect, getStyle } from '@varlet/shared'
+import { onWindowResize, useEventListener } from '@varlet/use'
 import { createNamespace } from '../utils/components'
 import { props } from './props'
 
@@ -17,166 +16,131 @@ const { name, n } = createNamespace('signature')
 export default defineComponent({
   name,
   props,
-  setup(props, { expose }) {
-    const { t } = useLocale()
-    const translate = (key: string) => t(`signature.${key}`)
-
-    const canvas = ref<HTMLCanvasElement | null>(null)
-    const wrap = ref<HTMLElement | null>(null)
-    const isCanvasSupported = ref(true)
-
-    onMounted(() => {
-      const elem = document.createElement('canvas')
-      isCanvasSupported.value = !!(elem.getContext && elem.getContext('2d'))
-
-      if (isCanvasSupported.value && canvas.value && wrap.value) {
-        state.ctx = canvas.value.getContext('2d')
-        state.canvasWidth = wrap.value.offsetWidth
-        state.canvasHeight = wrap.value.offsetHeight
-      }
-    })
-
-    const state = reactive({
-      canvasHeight: 0,
-      canvasWidth: 0,
-      ctx: null as CanvasRenderingContext2D | null,
-      events: ['touchstart', 'touchmove', 'touchend', 'touchleave'],
-      isDrawing: false,
-    })
-    const startEventHandler: EventListener = (event: Event) => {
-      const e = event as MouseEvent | TouchEvent
-      e.preventDefault()
-      if (!state.ctx || props.disabled) {
+  setup(props) {
+    const root = ref<HTMLElement>()
+    const canvas = ref<HTMLCanvasElement>()
+    const canvasWidth = ref(0)
+    const canvasHeight = ref(0)
+    let isSigning = false
+    let ctx: CanvasRenderingContext2D | null = null
+
+    useEventListener(canvas, 'touchstart', handleTouchstart)
+    useEventListener(canvas, 'touchmove', handleTouchmove)
+    useEventListener(canvas, 'touchend', handleTouchend)
+
+    onWindowResize(resize)
+    onMounted(resize)
+
+    function resize() {
+      if (!canvas.value || !root.value) {
         return
       }
 
-      state.isDrawing = true
-      state.ctx.beginPath()
-      state.ctx.lineWidth = props.lineWidth
-      state.ctx.strokeStyle = props.strokeStyle
-      call(props.onStart)
+      ctx = canvas.value.getContext('2d')
+      canvasWidth.value = root.value.offsetWidth
+      canvasHeight.value = root.value.offsetHeight
     }
 
-    const moveEventHandler: EventListener = (event: Event) => {
-      const e = event as MouseEvent | TouchEvent
-      e.preventDefault()
-      if (!canvas.value || !state.ctx || !state.isDrawing) {
+    function handleTouchstart(event: TouchEvent) {
+      if (!ctx || !root.value) {
         return
       }
 
-      let clientX: number
-      let clientY: number
+      event.preventDefault()
+      isSigning = true
+
+      ctx.beginPath()
+      ctx.lineWidth = props.lineWidth
+      ctx.strokeStyle = props.strokeStyle === 'currentColor' ? getStyle(root.value).color : props.strokeStyle
+
+      call(props.onStart)
+    }
 
-      if ('touches' in e) {
-        clientX = e.touches[0].clientX
-        clientY = e.touches[0].clientY
-      } else {
-        clientX = (e as MouseEvent).clientX
-        clientY = (e as MouseEvent).clientY
+    function handleTouchmove(event: TouchEvent) {
+      event.preventDefault()
+      if (!canvas.value || !ctx || !isSigning) {
+        return
       }
 
-      const coverPos = canvas.value.getBoundingClientRect()
-      const mouseX = clientX - coverPos.left
-      const mouseY = clientY - coverPos.top
+      const clientX = event.touches[0].clientX
+      const clientY = event.touches[0].clientY
+      const rect = getRect(canvas.value)
+      const x = clientX - rect.left
+      const y = clientY - rect.top
 
-      state.ctx.lineTo(mouseX, mouseY)
-      state.ctx.stroke()
+      ctx.lineTo(x, y)
+      ctx.stroke()
 
-      const payload = { clientX, clientY }
-      call(props.onSigning, payload)
+      call(props.onSigning, { clientX, clientY, x, y })
     }
 
-    const endEventHandler: EventListener = (event: Event) => {
+    function handleTouchend(event: Event) {
       event.preventDefault()
-      state.isDrawing = false
+      isSigning = false
       call(props.onEnd)
     }
 
-    const leaveEventHandler: EventListener = (event: Event) => {
-      event.preventDefault()
-      state.isDrawing = false
+    function getDataUrl(canvas: HTMLCanvasElement) {
+      switch (props.dataUrlType) {
+        case 'png':
+          return canvas.toDataURL('image/png')
+        case 'jpg':
+          return canvas.toDataURL('image/jpeg')
+        default:
+          return canvas.toDataURL('image/png')
+      }
     }
 
-    useEventListener(canvas, state.events[0], startEventHandler)
-    useEventListener(canvas, state.events[1], moveEventHandler)
-    useEventListener(canvas, state.events[2], endEventHandler)
-    useEventListener(canvas, state.events[3], leaveEventHandler)
-
-    onMounted(() => {
-      if (isCanvasSupported.value && canvas.value && wrap.value) {
-        state.ctx = canvas.value.getContext('2d')
-        state.canvasWidth = wrap.value.offsetWidth
-        state.canvasHeight = wrap.value.offsetHeight
+    function isCanvasEmpty(canvas: HTMLCanvasElement) {
+      if (!canvas) {
+        return true
       }
-    })
 
-    const clear = () => {
-      if (!canvas.value || !state.ctx) {
-        return
-      }
+      const emptyCanvas = document.createElement('canvas')
+      emptyCanvas.width = canvas.width
+      emptyCanvas.height = canvas.height
 
-      state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight)
-      state.ctx.closePath()
-      call(props.onClear)
-      call(props['onUpdate:modelValue'], '')
+      return canvas.toDataURL() === emptyCanvas.toDataURL()
     }
 
-    const confirm = () => {
-      if (!canvas.value) {
+    // expose
+    function reset() {
+      if (!ctx) {
         return
       }
 
-      const dataUrl = getDataUrl(canvas.value)
-      call(props.onConfirm, canvas.value, dataUrl)
-      call(props['onUpdate:modelValue'], dataUrl)
+      isSigning = false
+      ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
+      ctx.closePath()
     }
 
-    const isCanvasBlank = (canvas: HTMLCanvasElement) => {
-      if (!canvas) {
-        return true
+    // expose
+    function confirm() {
+      if (!canvas.value) {
+        return
       }
 
-      const blank = document.createElement('canvas')
-      blank.width = canvas.width
-      blank.height = canvas.height
-
-      return canvas.toDataURL() === blank.toDataURL()
-    }
-
-    const getDataUrl = (canvas: HTMLCanvasElement) => {
-      if (isCanvasBlank(canvas)) {
+      if (isCanvasEmpty(canvas.value)) {
         return ''
       }
 
-      switch (props.dataUrlType) {
-        case 'png':
-          return canvas.toDataURL('image/png')
-        case 'jpg':
-          return canvas.toDataURL('image/jpeg', 0.8)
-        default:
-          return canvas.toDataURL('image/png')
-      }
+      return getDataUrl(canvas.value)
     }
-    expose({
-      confirm,
-      clear,
-      isEmpty: () => (canvas.value ? isCanvasBlank(canvas.value) : true),
-    })
 
     return {
-      ...toRefs(state),
+      root,
       canvas,
-      wrap,
-      isCanvasSupported,
-      confirm,
-      clear,
-      translate,
+      canvasWidth,
+      canvasHeight,
       n,
+      confirm,
+      reset,
     }
   },
 })
 </script>
 
 <style lang="less">
+@import '../styles/common';
 @import './signature';
 </style>
diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
index 5c4bc81386f..3721a3bb23b 100644
--- a/packages/varlet-ui/src/signature/example/index.vue
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -1,58 +1,60 @@
 <script setup>
 import { ref } from 'vue'
 import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
-import { Snackbar } from '@varlet/ui'
 import { t, use } from './locale'
 
 const signature = ref('')
-const signatureRef = ref(null)
+const customStyleSignature = ref('')
+const signatureRef = ref()
+const customStyleSignatureRef = ref()
 
 watchLang(use)
-onThemeChange()
+onThemeChange(() => {
+  signatureRef.value?.reset()
+  customStyleSignatureRef.value?.reset()
+  signature.value = ''
+  customStyleSignature.value = ''
+})
+
+function confirmSignature() {
+  signature.value = signatureRef.value.confirm()
+}
+
+function resetSignature() {
+  signature.value = ''
+  signatureRef.value.reset()
+}
 
-const clear = () => {
-  signatureRef.value?.clear()
+function confirmCustomStyleSignature() {
+  customStyleSignature.value = customStyleSignatureRef.value.confirm()
 }
 
-const save = () => {
-  if (signatureRef.value?.isEmpty()) {
-    // 修改这里，添加括号调用函数
-    Snackbar.warning(t('pleaseSignFirst'))
-    return
-  }
-  signatureRef.value?.confirm()
-  Snackbar.success(t('saveSuccess'))
+function clearCustomStyleSignature() {
+  customStyleSignature.value = ''
+  customStyleSignatureRef.value.reset()
 }
 </script>
 
 <template>
-  <!-- Basic Usage -->
   <app-type>{{ t('basicUsage') }}</app-type>
   <var-signature ref="signatureRef" v-model="signature" />
-  <var-space class="signature-actions">
-    <var-button type="primary" size="small" @click="save">{{ t('save') }}</var-button>
-    <var-button size="small" @click="clear">{{ t('clear') }}</var-button>
+  <var-space class="gap">
+    <var-button type="primary" @click="confirmSignature">{{ t('confirm') }}</var-button>
+    <var-button type="primary" @click="resetSignature">{{ t('reset') }}</var-button>
   </var-space>
-  <img v-if="signature" :src="signature" alt="Signature Preview" style="margin-top: 10px" />
+  <img v-if="signature" :src="signature" style="margin-top: 10px" />
 
-  <!-- Custom Style -->
   <app-type>{{ t('customStyle') }}</app-type>
-  <var-signature v-model="signature" stroke-style="#2979ff" :line-width="3" background="#f5f5f5" />
-
-  <!-- Disabled State -->
-  <app-type>{{ t('disabledState') }}</app-type>
-  <var-signature v-model="signature" disabled />
+  <var-signature ref="customStyleSignatureRef" style="color: var(--color-primary)" :line-width="4" />
+  <var-space class="gap">
+    <var-button type="primary" @click="confirmCustomStyleSignature">{{ t('confirm') }}</var-button>
+    <var-button type="primary" @click="clearCustomStyleSignature">{{ t('reset') }}</var-button>
+  </var-space>
+  <img v-if="customStyleSignature" :src="customStyleSignature" class="gap" />
 </template>
 
-<style lang="less">
-.signature-actions {
-  display: flex;
-  justify-content: flex-end !important;
-  margin-top: 6px !important;
-
-  :deep(.var-button) {
-    padding: 0 16px;
-    height: 32px;
-  }
+<style scoped>
+.gap {
+  margin-top: 10px !important;
 }
 </style>
diff --git a/packages/varlet-ui/src/signature/example/locale/en-US.ts b/packages/varlet-ui/src/signature/example/locale/en-US.ts
index 1a480f4e01a..bb8bf63962a 100644
--- a/packages/varlet-ui/src/signature/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/signature/example/locale/en-US.ts
@@ -1,24 +1,6 @@
 export default {
   basicUsage: 'Basic Usage',
   customStyle: 'Custom Style',
-  disabledState: 'Disabled State',
-  completeExample: 'Complete Example',
-  save: 'Save',
-  clear: 'Clear',
   confirm: 'Confirm',
   reset: 'Reset',
-  pleaseSignFirst: 'Please sign first',
-  saveSuccess: 'Save successful',
-  pleaseSignBelow: 'Please sign below',
-  customLineWidth: 'Custom Line Width',
-  customStrokeStyle: 'Custom Stroke Style',
-  customHeight: 'Custom Height',
-  customOutputType: 'Custom Output Type',
-  formValidation: 'Form Validation',
-  submit: 'Submit',
-  signatureRequired: 'Signature is required',
-  signatureTooSmall: 'Signature is too small, please sign bigger',
-  submitSuccess: 'Submit successful',
-  unsupportText: 'Your browser does not support Canvas, electronic signature is not available',
-  cleared: 'Cleared',
 }
diff --git a/packages/varlet-ui/src/signature/example/locale/zh-CN.ts b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
index 110e0b07b42..6c49e847037 100644
--- a/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/signature/example/locale/zh-CN.ts
@@ -1,23 +1,6 @@
 export default {
   basicUsage: '基本使用',
   customStyle: '自定义样式',
-  disabledState: '禁用状态',
-  completeExample: '完整示例',
-  save: '保存签名',
-  clear: '清除签名',
-  confirm: '确认签名',
-  reset: '重新签名',
-  pleaseSignFirst: '请先签名',
-  saveSuccess: '保存成功',
-  pleaseSignBelow: '请在下方签名',
-  customLineWidth: '自定义线宽',
-  customStrokeStyle: '自定义笔触颜色',
-  customHeight: '自定义高度',
-  customOutputType: '自定义输出类型',
-  formValidation: '表单校验',
-  submit: '提交',
-  signatureRequired: '请先完成签名',
-  signatureTooSmall: '签名太小，请签大一点',
-  submitSuccess: '提交成功',
-  unsupportText: '您的浏览器不支持Canvas，无法使用电子签名功能',
+  confirm: '确认',
+  reset: '重置',
 }
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index bd223e8ccd0..df09ec6e3e0 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -1,33 +1,28 @@
 import { type PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
-export type SignatureType = 'png' | 'jpg'
+export type SignatureDataUrlType = 'png' | 'jpg'
+export interface SignatureSigningData {
+  x: number
+  y: number
+  clientX: number
+  clientY: number
+}
 
 export const props = {
-  modelValue: {
-    type: String,
-    default: '',
-  },
   lineWidth: {
     type: Number,
     default: 2,
   },
   strokeStyle: {
     type: String,
-    default: '#000',
+    default: 'currentColor',
   },
   dataUrlType: {
-    type: String as PropType<SignatureType>,
+    type: String as PropType<SignatureDataUrlType>,
     default: 'png',
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
   onStart: defineListenerProp<() => void>(),
   onEnd: defineListenerProp<() => void>(),
-  onSigning: defineListenerProp<(payload: { clientX: number; clientY: number }) => void>(),
-  onConfirm: defineListenerProp<(canvas: HTMLCanvasElement, dataUrl: string) => void>(),
-  onClear: defineListenerProp<() => void>(),
-  'onUpdate:modelValue': defineListenerProp<(value: string) => void>(),
+  onSigning: defineListenerProp<(data: SignatureSigningData) => void>(),
 }
diff --git a/packages/varlet-ui/src/signature/signature.less b/packages/varlet-ui/src/signature/signature.less
index cada28d62d4..a50df21883b 100644
--- a/packages/varlet-ui/src/signature/signature.less
+++ b/packages/varlet-ui/src/signature/signature.less
@@ -1,48 +1,12 @@
 :root {
-  --signature-background-color: #fff;
-  --signature-border-color: #e0e0e0;
-  --signature-border-radius: 4px;
-  --signature-actions-padding: 10px;
-  --signature-button-margin: 0 4px;
-  --signature-inner-height: 200px;
+  --signature-background-color: var(--color-surface-container-highest);
+  --signature-stroke-color: #333;
+  --signature-height: 200px;
 }
 
 .var-signature {
   width: 100%;
-  border: 1px solid var(--signature-border-color);
-  border-radius: var(--signature-border-radius);
-  background-color: var(--signature-background-color);
-  overflow: hidden;
-
-  &__inner {
-    position: relative;
-    width: 100%;
-    height: var(--signature-inner-height);
-  }
-
-  &__unsupport {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    margin: 0;
-    color: var(--color-text-disabled);
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--signature-actions-padding);
-    border-top: 1px solid var(--signature-border-color);
-  }
-
-  &__button {
-    margin: var(--signature-button-margin);
-  }
-
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
+  color: var(--signature-stroke-color);
+  background: var(--signature-background-color);
+  height: var(--signature-height);
 }
diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
index 6b8df27a28e..8ee8bbe074d 100644
--- a/packages/varlet-ui/src/themes/dark/index.ts
+++ b/packages/varlet-ui/src/themes/dark/index.ts
@@ -50,6 +50,7 @@ import rate from './rate'
 import result from './result'
 import ripple from './ripple'
 import select from './select'
+import signature from './signature'
 import skeleton from './skeleton'
 import slider from './slider'
 import snackbar from './snackbar'
@@ -209,4 +210,5 @@ export default {
   ...tooltip,
   ...select,
   ...code,
+  ...signature,
 } as StyleVars
diff --git a/packages/varlet-ui/src/themes/dark/signature.ts b/packages/varlet-ui/src/themes/dark/signature.ts
new file mode 100644
index 00000000000..abec9605b65
--- /dev/null
+++ b/packages/varlet-ui/src/themes/dark/signature.ts
@@ -0,0 +1,5 @@
+export default {
+  '--signature-background-color': 'var(--color-surface-container-highest)',
+  '--signature-stroke-color': '#fff',
+  '--signature-height': '200px',
+}
diff --git a/packages/varlet-ui/src/themes/md3-dark/index.ts b/packages/varlet-ui/src/themes/md3-dark/index.ts
index 5505cdccb52..afdcc3d67e5 100644
--- a/packages/varlet-ui/src/themes/md3-dark/index.ts
+++ b/packages/varlet-ui/src/themes/md3-dark/index.ts
@@ -50,6 +50,7 @@ import rate from './rate'
 import result from './result'
 import ripple from './ripple'
 import select from './select'
+import signature from './signature'
 import skeleton from './skeleton'
 import slider from './slider'
 import snackbar from './snackbar'
@@ -209,4 +210,5 @@ export default {
   ...space,
   ...swipe,
   ...code,
+  ...signature,
 } as StyleVars
diff --git a/packages/varlet-ui/src/themes/md3-dark/signature.ts b/packages/varlet-ui/src/themes/md3-dark/signature.ts
new file mode 100644
index 00000000000..0db6aa7049e
--- /dev/null
+++ b/packages/varlet-ui/src/themes/md3-dark/signature.ts
@@ -0,0 +1,5 @@
+export default {
+  '--signature-background-color': 'var(--color-surface-container-highest)',
+  '--signature-stroke-color': 'var(--color-inverse-surface)',
+  '--signature-height': '200px',
+}
diff --git a/packages/varlet-ui/src/themes/md3-light/index.ts b/packages/varlet-ui/src/themes/md3-light/index.ts
index f62b74a1853..9641c039b20 100644
--- a/packages/varlet-ui/src/themes/md3-light/index.ts
+++ b/packages/varlet-ui/src/themes/md3-light/index.ts
@@ -50,6 +50,7 @@ import rate from './rate'
 import result from './result'
 import ripple from './ripple'
 import select from './select'
+import signature from './signature'
 import skeleton from './skeleton'
 import slider from './slider'
 import snackbar from './snackbar'
@@ -209,4 +210,5 @@ export default {
   ...watermark,
   ...appBar,
   ...code,
+  ...signature,
 } as StyleVars
diff --git a/packages/varlet-ui/src/themes/md3-light/signature.ts b/packages/varlet-ui/src/themes/md3-light/signature.ts
new file mode 100644
index 00000000000..1f02cb50e4d
--- /dev/null
+++ b/packages/varlet-ui/src/themes/md3-light/signature.ts
@@ -0,0 +1,5 @@
+export default {
+  '--signature-background-color': 'var(--color-surface-container-low)',
+  '--signature-stroke-color': '#1D1B20',
+  '--signature-height': '200px',
+}
diff --git a/packages/varlet-ui/types/signature.d.ts b/packages/varlet-ui/types/signature.d.ts
index e69de29bb2d..7308c8ad55f 100644
--- a/packages/varlet-ui/types/signature.d.ts
+++ b/packages/varlet-ui/types/signature.d.ts
@@ -0,0 +1,28 @@
+import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
+
+export declare const signatureProps: Record<keyof SignatureProps, any>
+
+export type SignatureDataUrlType = 'png' | 'jpg'
+export interface SignatureSigningData {
+  x: number
+  y: number
+  clientX: number
+  clientY: number
+}
+
+export interface SignatureProps extends BasicAttributes {
+  lineWidth?: number
+  strokeStyle?: string
+  dataUrlType?: SignatureDataUrlType
+  onStart?: ListenerProp<() => void>
+  onEnd?: ListenerProp<() => void>
+  onSigning?: ListenerProp<(data: SignatureSigningData) => void>
+}
+
+export class Signature extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<SignatureProps>
+
+  $props: SignatureProps
+}
+
+export class _SignatureComponent extends Signature {}
diff --git a/packages/varlet-ui/types/styleVars.d.ts b/packages/varlet-ui/types/styleVars.d.ts
index a68e9ae407c..91d42de82ab 100644
--- a/packages/varlet-ui/types/styleVars.d.ts
+++ b/packages/varlet-ui/types/styleVars.d.ts
@@ -575,6 +575,9 @@ interface BaseStyleVars {
   '--option-font-size'?: string
   '--option-selected-background'?: string
   '--option-text-color'?: string
+  '--signature-background'?: string
+  '--signature-border-color'?: string
+  '--signature-border-radius'?: string
   '--skeleton-content-padding'?: string
   '--skeleton-card-height'?: string
   '--skeleton-card-border-radius'?: string

From 01f61e749d2c28c62d75e3f2d9fa88536ad77d1e Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 19 Mar 2025 00:44:37 +0800
Subject: [PATCH 21/29] feat: test cases

---
 .../src/signature/__tests__/index.spec.js     | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index ab97b2890ae..fcc7caeb0f6 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -36,7 +36,7 @@ describe('test signature component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    expect(wrapper.find('.var-signature')).toBeTruthy()
     await wrapper.setProps({ lineWidth: 4 })
     wrapper.unmount()
   })
@@ -48,7 +48,7 @@ describe('test signature component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    expect(wrapper.find('.var-signature')).toBeTruthy()
     await wrapper.setProps({ strokeStyle: '#f00' })
     wrapper.unmount()
   })
@@ -60,7 +60,7 @@ describe('test signature component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    expect(wrapper.find('.var-signature')).toBeTruthy()
     await wrapper.setProps({ dataUrlType: 'jpg' })
     wrapper.unmount()
   })
@@ -72,7 +72,7 @@ describe('test signature component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-signature__inner').exists()).toBe(true)
+    expect(wrapper.find('.var-signature')).toBeTruthy()
     await wrapper.setProps({ height: 400 })
     wrapper.unmount()
   })
@@ -85,7 +85,7 @@ describe('test signature component events', () => {
       props: { onClear },
     })
 
-    await wrapper.vm.clear()
+    await wrapper.find('.var-signature').trigger('clear')
     expect(onClear).toHaveBeenCalled()
     wrapper.unmount()
   })
@@ -96,7 +96,7 @@ describe('test signature component events', () => {
       props: { onConfirm },
     })
 
-    await wrapper.vm.confirm()
+    await wrapper.find('.var-signature').trigger('confirm')
     expect(onConfirm).toHaveBeenCalled()
     wrapper.unmount()
   })
@@ -104,7 +104,7 @@ describe('test signature component events', () => {
 
 test('signature canvas operations', async () => {
   const wrapper = mount(VarSignature)
-  await wrapper.vm.clear()
+  await wrapper.find('.var-signature').trigger('clear')
   wrapper.unmount()
 })
 
@@ -119,11 +119,10 @@ test('signature clear and confirm', async () => {
     },
   })
 
-  await wrapper.vm.clear()
+  await wrapper.find('.var-signature').trigger('clear')
   expect(onClear).toHaveBeenCalled()
-  expect(wrapper.vm.isEmpty()).toBe(true)
 
-  await wrapper.vm.confirm()
+  await wrapper.find('.var-signature').trigger('confirm')
   expect(onConfirm).toHaveBeenCalled()
 
   wrapper.unmount()

From 4e61cfb08c554b9e8f2d11df6f35370bce7c6ff2 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 19 Mar 2025 02:31:40 +0800
Subject: [PATCH 22/29] feat: docs finish

---
 .../__snapshots__/index.spec.js.snap          | 13 ---
 .../__snapshots__/index.spec.js.snap          | 10 ---
 .../__snapshots__/index.spec.js.snap          | 36 ---------
 .../src/signature/__tests__/index.spec.js     | 81 +++++++++----------
 .../varlet-ui/src/signature/docs/en-US.md     | 68 ++++++++--------
 .../varlet-ui/src/signature/docs/zh-CN.md     | 68 ++++++++--------
 .../__snapshots__/index.spec.js.snap          |  9 +++
 7 files changed, 116 insertions(+), 169 deletions(-)
 delete mode 100644 packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
 delete mode 100644 packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
 delete mode 100644 packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap

diff --git a/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
deleted file mode 100644
index ad5283891b4..00000000000
--- a/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`hover style binding 1`] = `"<div style="color: rgb(1, 1, 1);"></div>"`;
-
-exports[`hover style binding 2`] = `"<div style=""></div>"`;
-
-exports[`hover style binding on update 1`] = `"<div style="color: rgb(1, 1, 1);">2</div>"`;
-
-exports[`hover style binding restore 1`] = `"<div style="color: rgb(255, 255, 255);"></div>"`;
-
-exports[`hover style binding restore 2`] = `"<div style="color: rgb(1, 1, 1);"></div>"`;
-
-exports[`hover style binding restore 3`] = `"<div style="color: rgb(255, 255, 255);"></div>"`;
diff --git a/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
deleted file mode 100644
index 3cbd37288bf..00000000000
--- a/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`overlay show 1`] = `
-"<transition-stub name="var-overlay--fade" appear="false" persisted="false" css="true">
-  <div class="var-overlay" style="z-index: 1998;">
-    <div class="var-overlay__overlay" style="z-index: 1999;"></div>
-    <div class="var-overlay__content" style="z-index: 2000;"> default slot content </div>
-  </div>
-</transition-stub>"
-`;
diff --git a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap
deleted file mode 100644
index 14011f4c1b3..00000000000
--- a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`popup show 1`] = `
-"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
-  <div class="var--box var-popup" style="z-index: 1998; display: none;">
-    <div class="var-popup__overlay" style="z-index: 1999;"></div>
-    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
-      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000; display: none;" role="dialog" aria-modal="true">
-        <!---->
-      </div>
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
-
-exports[`popup show 2`] = `
-"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
-  <div class="var--box var-popup" style="z-index: 1998;">
-    <div class="var-popup__overlay" style="z-index: 1999;"></div>
-    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
-      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000;" role="dialog" aria-modal="true"> default slot content </div>
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
-
-exports[`popup show 3`] = `
-"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
-  <div class="var--box var-popup" style="z-index: 1998; display: none;">
-    <div class="var-popup__overlay" style="z-index: 1999;"></div>
-    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
-      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000; display: none;" role="dialog" aria-modal="true"> default slot content </div>
-    </transition-stub>
-  </div>
-</transition-stub>"
-`;
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index fcc7caeb0f6..9cbc3f0fdb7 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -53,7 +53,7 @@ describe('test signature component props', () => {
     wrapper.unmount()
   })
 
-  test('signature type', async () => {
+  test('signature dataUrlType', async () => {
     const wrapper = mount(VarSignature, {
       props: {
         dataUrlType: 'png',
@@ -64,71 +64,68 @@ describe('test signature component props', () => {
     await wrapper.setProps({ dataUrlType: 'jpg' })
     wrapper.unmount()
   })
+})
 
-  test('signature height', async () => {
+describe('test signature component events', () => {
+  test('signature start event', async () => {
+    const onStart = vi.fn()
     const wrapper = mount(VarSignature, {
-      props: {
-        height: 300,
-      },
+      props: { onStart },
     })
 
-    expect(wrapper.find('.var-signature')).toBeTruthy()
-    await wrapper.setProps({ height: 400 })
+    await wrapper.find('canvas').trigger('touchstart', {
+      touches: [{ clientX: 0, clientY: 0 }],
+    })
+    expect(onStart).toHaveBeenCalled()
     wrapper.unmount()
   })
-})
 
-describe('test signature component events', () => {
-  test('signature clear event', async () => {
-    const onClear = vi.fn()
+  test('signature signing event', async () => {
+    const onSigning = vi.fn()
     const wrapper = mount(VarSignature, {
-      props: { onClear },
+      props: { onSigning },
+    })
+
+    await wrapper.find('canvas').trigger('touchstart', {
+      touches: [{ clientX: 0, clientY: 0 }],
     })
 
-    await wrapper.find('.var-signature').trigger('clear')
-    expect(onClear).toHaveBeenCalled()
+    await wrapper.find('canvas').trigger('touchmove', {
+      touches: [{ clientX: 10, clientY: 10 }],
+    })
+
+    expect(onSigning).toHaveBeenCalled()
     wrapper.unmount()
   })
 
-  test('signature confirm event', async () => {
-    const onConfirm = vi.fn()
+  test('signature end event', async () => {
+    const onEnd = vi.fn()
     const wrapper = mount(VarSignature, {
-      props: { onConfirm },
+      props: { onEnd },
     })
 
-    await wrapper.find('.var-signature').trigger('confirm')
-    expect(onConfirm).toHaveBeenCalled()
+    await wrapper.find('canvas').trigger('touchend')
+    expect(onEnd).toHaveBeenCalled()
     wrapper.unmount()
   })
 })
 
-test('signature canvas operations', async () => {
-  const wrapper = mount(VarSignature)
-  await wrapper.find('.var-signature').trigger('clear')
-  wrapper.unmount()
-})
-
-test('signature clear and confirm', async () => {
-  const onClear = vi.fn()
-  const onConfirm = vi.fn()
-
-  const wrapper = mount(VarSignature, {
-    props: {
-      onClear,
-      onConfirm,
-    },
+describe('test signature component methods', () => {
+  test('signature reset method', async () => {
+    const wrapper = mount(VarSignature)
+    await wrapper.vm.reset()
+    wrapper.unmount()
   })
 
-  await wrapper.find('.var-signature').trigger('clear')
-  expect(onClear).toHaveBeenCalled()
-
-  await wrapper.find('.var-signature').trigger('confirm')
-  expect(onConfirm).toHaveBeenCalled()
-
-  wrapper.unmount()
+  test('signature confirm method', async () => {
+    const wrapper = mount(VarSignature)
+    const result = await wrapper.vm.confirm()
+    expect(result).toBe('')
+    wrapper.unmount()
+  })
 })
 
-test('signature props', () => {
+test('signature props validation', () => {
   const wrapper = mount(VarSignature, {
     props: {
       lineWidth: 4,
diff --git a/packages/varlet-ui/src/signature/docs/en-US.md b/packages/varlet-ui/src/signature/docs/en-US.md
index 71fc2e6a3b0..dc4fba7383e 100644
--- a/packages/varlet-ui/src/signature/docs/en-US.md
+++ b/packages/varlet-ui/src/signature/docs/en-US.md
@@ -14,11 +14,11 @@ import { ref } from 'vue'
 
 const signature = ref('')
 
-const clear = () => {
+const reset = () => {
   signature.value = ''
 }
 
-const save = () => {
+const confirm = () => {
   console.log('Signature data:', signature.value)
 }
 </script>
@@ -27,8 +27,8 @@ const save = () => {
   <var-signature v-model="signature" />
   
   <var-space>
-    <var-button type="primary" @click="save">Save</var-button>
-    <var-button @click="clear">Clear</var-button>
+    <var-button type="primary" @click="confirm">Confirm</var-button>
+    <var-button @click="reset">Reset</var-button>
   </var-space>
   
   <img v-if="signature" :src="signature" alt="Signature Preview" style="margin-top: 10px" />
@@ -37,7 +37,7 @@ const save = () => {
 
 ### Custom Style
 
-Customize signature style through properties like `color`, `lineWidth`, etc.
+Customize signature style through properties like `stroke-style`, `line-width`, etc.
 
 ```html
 <script setup>
@@ -49,20 +49,22 @@ const signature = ref('')
 <template>
   <var-signature
     v-model="signature"
-    color="#2979ff"
-    line-width="3"
-    background="#f5f5f5"
+    stroke-style="#2979ff"
+    :line-width="3"
   />
 </template>
 ```
 
-### Disabled State
+### Specify Image Format
 
-Set disabled state through the `disabled` property.
+Specify the generated image format through `data-url-type`.
 
 ```html
 <template>
-  <var-signature v-model="signature" disabled />
+  <var-signature
+    v-model="signature"
+    data-url-type="jpg"
+  />
 </template>
 ```
 
@@ -73,28 +75,24 @@ Set disabled state through the `disabled` property.
 | Prop | Description | Type | Default |
 | --- | --- | --- | --- |
 | `v-model` | Signature value (base64 format) | _string_ | `''` |
-| `color` | Pen color | _string_ | `#000` |
+| `stroke-style` | Pen color, supports `currentColor` | _string_ | `#000` |
 | `line-width` | Line width | _string \| number_ | `2` |
-| `background` | Canvas background color | _string_ | `#fff` |
-| `width` | Canvas width | _string \| number_ | `100%` |
-| `height` | Canvas height | _string \| number_ | `200` |
-| `disabled` | Whether to disable signature | _boolean_ | `false` |
+| `data-url-type` | Generated image format | _'png' \| 'jpg'_ | `'png'` |
 
 ### Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `start` | Triggered when starting to sign | `event: TouchEvent` |
-| `signing` | Triggered during signing | `event: TouchEvent` |
-| `end` | Triggered when ending signature | `event: TouchEvent` |
-| `change` | Triggered when signature content changes | `value: string` |
+| `signing` | Triggered during signing | `{ x: number, y: number, clientX: number, clientY: number }` |
+| `end` | Triggered when ending signature | `event: Event` |
 
 ### Methods
 
-| Method | Description | Parameters |
-| --- | --- | --- |
-| `clear` | Clear signature | `-` |
-| `save` | Save signature, returns base64 format image data | `-` |
+| Method | Description | Parameters | Return |
+| --- | --- | --- | --- |
+| `reset` | Clear signature and end current path | `-` | `void` |
+| `confirm` | Save signature, returns base64 format image data. Returns empty string if canvas is empty | `-` | `string` |
 
 ### Style Variables
 
@@ -102,9 +100,9 @@ Here are the CSS variables used by the component. Styles can be customized using
 
 | Variable | Default |
 | --- | --- |
-| `--signature-background` | `#fff` |
-| `--signature-border-color` | `#e0e0e0` |
-| `--signature-border-radius` | `4px` |
+| `--signature-height` | `200px` |
+| `--signature-border-color` | `var(--color-surface-container-highest)` |
+| `--signature-stroke-color` | `#fff` |
 
 ### Example
 
@@ -115,7 +113,7 @@ import { Snackbar } from '@varlet/ui'
 
 const signature = ref('')
 
-const handleSave = async () => {
+const handleConfirm = async () => {
   if (!signature.value) {
     Snackbar.warning('Please sign first')
     return
@@ -135,14 +133,13 @@ const handleSave = async () => {
     
     <var-signature
       v-model="signature"
-      height="300"
-      color="#2979ff"
-      line-width="3"
+      stroke-style="#2979ff"
+      :line-width="3"
     />
     
     <template #footer>
       <var-space>
-        <var-button type="primary" @click="handleSave">
+        <var-button type="primary" @click="handleConfirm">
           Confirm
         </var-button>
         <var-button @click="signature = ''">
@@ -160,6 +157,9 @@ const handleSave = async () => {
 
 ## Notes
 
-1. Signature data is stored in base64 format, which may occupy large space. It's recommended to compress before uploading to server.
-2. When using on mobile devices, it's recommended to set appropriate canvas size for better signature experience.
-3. Canvas border, border radius and other styles can be customized through CSS.
\ No newline at end of file
+1. Signature data is stored in base64 format, which may occupy large space. It's recommended to compress before uploading to server
+2. When using on mobile devices, it's recommended to set appropriate canvas size for better signature experience
+3. Canvas border, border radius and other styles can be customized through CSS
+4. The component automatically adapts to container width and adjusts canvas size when window size changes
+5. When `stroke-style` is set to `'currentColor'`, it will inherit the text color of the parent element
+6. You can choose to generate PNG or JPG format signature images through the `data-url-type` property
diff --git a/packages/varlet-ui/src/signature/docs/zh-CN.md b/packages/varlet-ui/src/signature/docs/zh-CN.md
index deb359c4993..ad3481c96b7 100644
--- a/packages/varlet-ui/src/signature/docs/zh-CN.md
+++ b/packages/varlet-ui/src/signature/docs/zh-CN.md
@@ -14,11 +14,11 @@ import { ref } from 'vue'
 
 const signature = ref('')
 
-const clear = () => {
+const reset = () => {
   signature.value = ''
 }
 
-const save = () => {
+const confirm = () => {
   console.log('签名数据：', signature.value)
 }
 </script>
@@ -27,8 +27,8 @@ const save = () => {
   <var-signature v-model="signature" />
   
   <var-space>
-    <var-button type="primary" @click="save">保存签名</var-button>
-    <var-button @click="clear">清除签名</var-button>
+    <var-button type="primary" @click="confirm">确认签名</var-button>
+    <var-button @click="reset">重置签名</var-button>
   </var-space>
   
   <img v-if="signature" :src="signature" alt="签名预览" style="margin-top: 10px" />
@@ -37,7 +37,7 @@ const save = () => {
 
 ### 自定义样式
 
-可以通过 `color`、`lineWidth` 等属性自定义签名的样式。
+可以通过 `stroke-style`、`line-width` 等属性自定义签名的样式。
 
 ```html
 <script setup>
@@ -49,20 +49,22 @@ const signature = ref('')
 <template>
   <var-signature
     v-model="signature"
-    color="#2979ff"
-    line-width="3"
-    background="#f5f5f5"
+    stroke-style="#2979ff"
+    :line-width="3"
   />
 </template>
 ```
 
-### 禁用状态
+### 指定图片格式
 
-通过 `disabled` 属性设置禁用状态。
+可以通过 `data-url-type` 指定生成的图片格式。
 
 ```html
 <template>
-  <var-signature v-model="signature" disabled />
+  <var-signature
+    v-model="signature"
+    data-url-type="jpg"
+  />
 </template>
 ```
 
@@ -73,28 +75,24 @@ const signature = ref('')
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `v-model` | 签名的值（base64格式） | _string_ | `''` |
-| `color` | 画笔颜色 | _string_ | `#000` |
+| `stroke-style` | 画笔颜色，支持 `currentColor` | _string_ | `#000` |
 | `line-width` | 画笔粗细 | _string \| number_ | `2` |
-| `background` | 画布背景色 | _string_ | `#fff` |
-| `width` | 画布宽度 | _string \| number_ | `100%` |
-| `height` | 画布高度 | _string \| number_ | `200` |
-| `disabled` | 是否禁用 | _boolean_ | `false` |
+| `data-url-type` | 生成图片的格式 | _'png' \| 'jpg'_ | `'png'` |
 
 ### 事件
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
 | `start` | 开始签名时触发 | `event: TouchEvent` |
-| `signing` | 签名过程中触发 | `event: TouchEvent` |
-| `end` | 结束签名时触发 | `event: TouchEvent` |
-| `change` | 签名内容变化时触发 | `value: string` |
+| `signing` | 签名过程中触发 | `{ x: number, y: number, clientX: number, clientY: number }` |
+| `end` | 结束签名时触发 | `event: Event` |
 
 ### 方法
 
-| 方法名 | 说明 | 参数 |
-| --- | --- | --- |
-| `clear` | 清除签名 | `-` |
-| `save` | 保存签名，返回 base64 格式的图片数据 | `-` |
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| `reset` | 清除签名并结束当前路径 | `-` | `void` |
+| `confirm` | 保存签名，返回 base64 格式的图片数据。画布为空时返回空字符串 | `-` | `string` |
 
 ### 样式变量
 
@@ -102,9 +100,9 @@ const signature = ref('')
 
 | 变量名 | 默认值 |
 | --- | --- |
-| `--signature-background` | `#fff` |
-| `--signature-border-color` | `#e0e0e0` |
-| `--signature-border-radius` | `4px` |
+| `--signature-height` | `200px` |
+| `--signature-border-color` | `var(--color-surface-container-highest)` |
+| `--signature-stroke-color` | `#fff` |
 
 ### 示例
 
@@ -115,7 +113,7 @@ import { Snackbar } from '@varlet/ui'
 
 const signature = ref('')
 
-const handleSave = async () => {
+const handleConfirm = async () => {
   if (!signature.value) {
     Snackbar.warning('请先签名')
     return
@@ -135,14 +133,13 @@ const handleSave = async () => {
     
     <var-signature
       v-model="signature"
-      height="300"
-      color="#2979ff"
-      line-width="3"
+      stroke-style="#2979ff"
+      :line-width="3"
     />
     
     <template #footer>
       <var-space>
-        <var-button type="primary" @click="handleSave">
+        <var-button type="primary" @click="handleConfirm">
           确认签名
         </var-button>
         <var-button @click="signature = ''">
@@ -160,6 +157,9 @@ const handleSave = async () => {
 
 ## 注意事项
 
-1. 签名数据以 base64 格式存储，可能会占用较大空间，建议在上传服务器前进行压缩处理。
-2. 在移动设备上使用时，建议设置适当的画布大小以获得更好的签名体验。
-3. 可以通过 CSS 自定义画布的边框、圆角等样式。
\ No newline at end of file
+1. 签名数据以 base64 格式存储，可能会占用较大空间，建议在上传服务器前进行压缩处理
+2. 在移动设备上使用时，建议设置适当的画布大小以获得更好的签名体验
+3. 可以通过 CSS 自定义画布的边框、圆角等样式
+4. 组件会自动适应容器宽度，并在窗口大小改变时重新调整画布尺寸
+5. 当 `stroke-style` 设置为 `'currentColor'` 时，将会继承父元素的文字颜色
+6. 可以通过 `data-url-type` 属性选择生成 PNG 或 JPG 格式的签名图片
\ No newline at end of file
diff --git a/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
index 241b7b71f22..dabef0e15e1 100644
--- a/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
@@ -640,6 +640,9 @@ exports[`dark theme 1`] = `
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
+  "--signature-background-color": "var(--color-surface-container-highest)",
+  "--signature-height": "200px",
+  "--signature-stroke-color": "#fff",
   "--skeleton-animation-background": "linear-gradient(
         90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05),hsla(0,0%,100%,0))
       ",
@@ -1534,6 +1537,9 @@ exports[`md3Dark theme 1`] = `
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
+  "--signature-background-color": "var(--color-surface-container-highest)",
+  "--signature-height": "200px",
+  "--signature-stroke-color": "var(--color-inverse-surface)",
   "--skeleton-animation-background": "linear-gradient(
         90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05),hsla(0,0%,100%,0))
       ",
@@ -2412,6 +2418,9 @@ exports[`md3Light theme 1`] = `
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
+  "--signature-background-color": "var(--color-surface-container-low)",
+  "--signature-height": "200px",
+  "--signature-stroke-color": "#1D1B20",
   "--skeleton-animation-background": "linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0))",
   "--skeleton-avatar-background-color": "rgba(0, 0, 0, 0.12)",
   "--skeleton-avatar-border-radius": "50%",

From d6811dd8447746f2e8dc23044d33e60ce9c6c0c9 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 19 Mar 2025 03:13:44 +0800
Subject: [PATCH 23/29] feat: resolve comment

---
 .../__snapshots__/index.spec.js.snap          |  3 -
 .../src/signature/__tests__/index.spec.js     | 83 +++----------------
 2 files changed, 11 insertions(+), 75 deletions(-)
 delete mode 100644 packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap

diff --git a/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
deleted file mode 100644
index 41102a82192..00000000000
--- a/packages/varlet-ui/src/signature/__tests__/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`signature base function 1`] = `"<div class=\\"var-signature\\"></div>"`;
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index 9cbc3f0fdb7..f02109d0b35 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -4,26 +4,25 @@ import { beforeAll, describe, expect, test, vi } from 'vitest'
 import Signature from '..'
 import VarSignature from '../Signature.vue'
 
+// 模拟 Canvas API
 beforeAll(() => {
-  const mockContext = {
+  // 模拟 getContext
+  HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    clearRect: vi.fn(),
+    closePath: vi.fn(),
     beginPath: vi.fn(),
     moveTo: vi.fn(),
     lineTo: vi.fn(),
     stroke: vi.fn(),
-    clearRect: vi.fn(),
-    closePath: vi.fn(),
-    canvas: {
-      width: 300,
-      height: 150,
-    },
-    lineWidth: 2,
-    strokeStyle: '#000',
-  }
+  }))
 
-  HTMLCanvasElement.prototype.getContext = () => mockContext
+  // 模拟 toDataURL
+  HTMLCanvasElement.prototype.toDataURL = vi.fn((type) => {
+    return type === 'image/jpeg' ? 'data:image/jpeg;base64,test' : 'data:image/png;base64,test'
+  })
 })
 
-test('signature use', () => {
+test('signature plugin', () => {
   const app = createApp({}).use(Signature)
   expect(app.component(Signature.name)).toBeTruthy()
 })
@@ -66,50 +65,6 @@ describe('test signature component props', () => {
   })
 })
 
-describe('test signature component events', () => {
-  test('signature start event', async () => {
-    const onStart = vi.fn()
-    const wrapper = mount(VarSignature, {
-      props: { onStart },
-    })
-
-    await wrapper.find('canvas').trigger('touchstart', {
-      touches: [{ clientX: 0, clientY: 0 }],
-    })
-    expect(onStart).toHaveBeenCalled()
-    wrapper.unmount()
-  })
-
-  test('signature signing event', async () => {
-    const onSigning = vi.fn()
-    const wrapper = mount(VarSignature, {
-      props: { onSigning },
-    })
-
-    await wrapper.find('canvas').trigger('touchstart', {
-      touches: [{ clientX: 0, clientY: 0 }],
-    })
-
-    await wrapper.find('canvas').trigger('touchmove', {
-      touches: [{ clientX: 10, clientY: 10 }],
-    })
-
-    expect(onSigning).toHaveBeenCalled()
-    wrapper.unmount()
-  })
-
-  test('signature end event', async () => {
-    const onEnd = vi.fn()
-    const wrapper = mount(VarSignature, {
-      props: { onEnd },
-    })
-
-    await wrapper.find('canvas').trigger('touchend')
-    expect(onEnd).toHaveBeenCalled()
-    wrapper.unmount()
-  })
-})
-
 describe('test signature component methods', () => {
   test('signature reset method', async () => {
     const wrapper = mount(VarSignature)
@@ -124,19 +79,3 @@ describe('test signature component methods', () => {
     wrapper.unmount()
   })
 })
-
-test('signature props validation', () => {
-  const wrapper = mount(VarSignature, {
-    props: {
-      lineWidth: 4,
-      strokeStyle: '#ff0000',
-      dataUrlType: 'jpg',
-    },
-  })
-
-  expect(wrapper.props('lineWidth')).toBe(4)
-  expect(wrapper.props('strokeStyle')).toBe('#ff0000')
-  expect(wrapper.props('dataUrlType')).toBe('jpg')
-
-  wrapper.unmount()
-})

From e71f0f348c818cc4ebbf63e5f6ff8c5ed5883921 Mon Sep 17 00:00:00 2001
From: xueyuan <xue.yuan.99999@gmail.com>
Date: Wed, 19 Mar 2025 09:04:25 +0800
Subject: [PATCH 24/29] feat: "resolve comment"

---
 .../__snapshots__/index.spec.js.snap          | 13 +++++++
 .../__snapshots__/index.spec.js.snap          | 10 ++++++
 .../__snapshots__/index.spec.js.snap          | 36 +++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
 create mode 100644 packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
 create mode 100644 packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap

diff --git a/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..ad5283891b4
--- /dev/null
+++ b/packages/varlet-ui/src/hover/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`hover style binding 1`] = `"<div style="color: rgb(1, 1, 1);"></div>"`;
+
+exports[`hover style binding 2`] = `"<div style=""></div>"`;
+
+exports[`hover style binding on update 1`] = `"<div style="color: rgb(1, 1, 1);">2</div>"`;
+
+exports[`hover style binding restore 1`] = `"<div style="color: rgb(255, 255, 255);"></div>"`;
+
+exports[`hover style binding restore 2`] = `"<div style="color: rgb(1, 1, 1);"></div>"`;
+
+exports[`hover style binding restore 3`] = `"<div style="color: rgb(255, 255, 255);"></div>"`;
diff --git a/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..3cbd37288bf
--- /dev/null
+++ b/packages/varlet-ui/src/overlay/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`overlay show 1`] = `
+"<transition-stub name="var-overlay--fade" appear="false" persisted="false" css="true">
+  <div class="var-overlay" style="z-index: 1998;">
+    <div class="var-overlay__overlay" style="z-index: 1999;"></div>
+    <div class="var-overlay__content" style="z-index: 2000;"> default slot content </div>
+  </div>
+</transition-stub>"
+`;
diff --git a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..14011f4c1b3
--- /dev/null
+++ b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`popup show 1`] = `
+"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
+  <div class="var--box var-popup" style="z-index: 1998; display: none;">
+    <div class="var-popup__overlay" style="z-index: 1999;"></div>
+    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
+      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000; display: none;" role="dialog" aria-modal="true">
+        <!---->
+      </div>
+    </transition-stub>
+  </div>
+</transition-stub>"
+`;
+
+exports[`popup show 2`] = `
+"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
+  <div class="var--box var-popup" style="z-index: 1998;">
+    <div class="var-popup__overlay" style="z-index: 1999;"></div>
+    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
+      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000;" role="dialog" aria-modal="true"> default slot content </div>
+    </transition-stub>
+  </div>
+</transition-stub>"
+`;
+
+exports[`popup show 3`] = `
+"<transition-stub name="var-fade" appear="false" persisted="false" css="true">
+  <div class="var--box var-popup" style="z-index: 1998; display: none;">
+    <div class="var-popup__overlay" style="z-index: 1999;"></div>
+    <transition-stub name="var-pop-center" appear="false" persisted="false" css="true">
+      <div class="var-popup__content var-popup--center var-popup--content-background-color var-elevation--3" style="z-index: 2000; display: none;" role="dialog" aria-modal="true"> default slot content </div>
+    </transition-stub>
+  </div>
+</transition-stub>"
+`;

From 3e7c88f6d54ff3b8fca84e2e0a6939820c176846 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 20 Mar 2025 22:52:38 +0800
Subject: [PATCH 25/29] refactor: cleanup

---
 .../varlet-ui/src/signature/Signature.vue     |  10 +-
 .../src/signature/__tests__/index.spec.js     |  94 +++++------
 .../varlet-ui/src/signature/docs/en-US.md     | 146 +++++-------------
 .../varlet-ui/src/signature/docs/zh-CN.md     | 140 +++++------------
 .../varlet-ui/src/signature/example/index.vue |   7 +-
 packages/varlet-ui/src/signature/props.ts     |   8 +-
 .../varlet-ui/src/signature/signature.less    |   2 +
 .../varlet-ui/src/themes/dark/signature.ts    |   1 +
 .../src/themes/md3-dark/signature.ts          |   1 +
 .../src/themes/md3-light/signature.ts         |   1 +
 packages/varlet-ui/types/styleVars.d.ts       |   5 +-
 packages/varlet-ui/varlet.config.mjs          |  16 +-
 12 files changed, 156 insertions(+), 275 deletions(-)

diff --git a/packages/varlet-ui/src/signature/Signature.vue b/packages/varlet-ui/src/signature/Signature.vue
index c1d0e96d1db..3087c24b949 100644
--- a/packages/varlet-ui/src/signature/Signature.vue
+++ b/packages/varlet-ui/src/signature/Signature.vue
@@ -71,10 +71,14 @@ export default defineComponent({
       ctx.lineTo(x, y)
       ctx.stroke()
 
-      call(props.onSigning, { clientX, clientY, x, y })
+      call(props.onSigning)
     }
 
     function handleTouchend(event: Event) {
+      if (!isSigning) {
+        return
+      }
+
       event.preventDefault()
       isSigning = false
       call(props.onEnd)
@@ -82,8 +86,6 @@ export default defineComponent({
 
     function getDataUrl(canvas: HTMLCanvasElement) {
       switch (props.dataUrlType) {
-        case 'png':
-          return canvas.toDataURL('image/png')
         case 'jpg':
           return canvas.toDataURL('image/jpeg')
         default:
@@ -100,7 +102,7 @@ export default defineComponent({
       emptyCanvas.width = canvas.width
       emptyCanvas.height = canvas.height
 
-      return canvas.toDataURL() === emptyCanvas.toDataURL()
+      return getDataUrl(canvas) === getDataUrl(emptyCanvas)
     }
 
     // expose
diff --git a/packages/varlet-ui/src/signature/__tests__/index.spec.js b/packages/varlet-ui/src/signature/__tests__/index.spec.js
index f02109d0b35..0abd5af3609 100644
--- a/packages/varlet-ui/src/signature/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/signature/__tests__/index.spec.js
@@ -1,22 +1,19 @@
 import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
-import { beforeAll, describe, expect, test, vi } from 'vitest'
+import { beforeAll, expect, test, vi } from 'vitest'
 import Signature from '..'
+import { trigger } from '../../utils/test'
 import VarSignature from '../Signature.vue'
 
-// 模拟 Canvas API
 beforeAll(() => {
-  // 模拟 getContext
   HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
     clearRect: vi.fn(),
     closePath: vi.fn(),
     beginPath: vi.fn(),
-    moveTo: vi.fn(),
     lineTo: vi.fn(),
     stroke: vi.fn(),
   }))
 
-  // 模拟 toDataURL
   HTMLCanvasElement.prototype.toDataURL = vi.fn((type) => {
     return type === 'image/jpeg' ? 'data:image/jpeg;base64,test' : 'data:image/png;base64,test'
   })
@@ -27,55 +24,60 @@ test('signature plugin', () => {
   expect(app.component(Signature.name)).toBeTruthy()
 })
 
-describe('test signature component props', () => {
-  test('signature lineWidth', async () => {
-    const wrapper = mount(VarSignature, {
-      props: {
-        lineWidth: 2,
-      },
-    })
-
-    expect(wrapper.find('.var-signature')).toBeTruthy()
-    await wrapper.setProps({ lineWidth: 4 })
-    wrapper.unmount()
+test('signature events', async () => {
+  const onStart = vi.fn()
+  const onEnd = vi.fn()
+  const onSigning = vi.fn()
+
+  const wrapper = mount(VarSignature, {
+    props: {
+      onStart,
+      onEnd,
+      onSigning,
+    },
   })
 
-  test('signature strokeStyle', async () => {
-    const wrapper = mount(VarSignature, {
-      props: {
-        strokeStyle: '#000',
-      },
-    })
+  const canvas = wrapper.find('canvas')
 
-    expect(wrapper.find('.var-signature')).toBeTruthy()
-    await wrapper.setProps({ strokeStyle: '#f00' })
-    wrapper.unmount()
-  })
+  await trigger(canvas, 'touchmove')
+  expect(onSigning).not.toHaveBeenCalled()
 
-  test('signature dataUrlType', async () => {
-    const wrapper = mount(VarSignature, {
-      props: {
-        dataUrlType: 'png',
-      },
-    })
+  await trigger(canvas, 'touchend')
+  expect(onEnd).not.toHaveBeenCalled()
 
-    expect(wrapper.find('.var-signature')).toBeTruthy()
-    await wrapper.setProps({ dataUrlType: 'jpg' })
-    wrapper.unmount()
-  })
+  await trigger(canvas, 'touchstart')
+  expect(onStart).toHaveBeenCalled()
+
+  await trigger(canvas, 'touchmove')
+  expect(onSigning).toHaveBeenCalled()
+
+  await trigger(canvas, 'touchend')
+  expect(onEnd).toHaveBeenCalled()
+
+  wrapper.unmount()
 })
 
-describe('test signature component methods', () => {
-  test('signature reset method', async () => {
-    const wrapper = mount(VarSignature)
-    await wrapper.vm.reset()
-    wrapper.unmount()
+test('signature methods', async () => {
+  const wrapper = mount(VarSignature, {
+    props: {
+      dataUrlType: 'png',
+    },
   })
 
-  test('signature confirm method', async () => {
-    const wrapper = mount(VarSignature)
-    const result = await wrapper.vm.confirm()
-    expect(result).toBe('')
-    wrapper.unmount()
+  HTMLCanvasElement.prototype.toDataURL = vi.fn((type) => {
+    expect(type).toBe('image/png')
+    return type === 'image/jpeg' ? 'data:image/jpeg;base64,test' : 'data:image/png;base64,test'
   })
+
+  expect(wrapper.vm.confirm()).toBe('')
+  wrapper.vm.reset()
+
+  await wrapper.setProps({ dataUrlType: 'jpg' })
+
+  HTMLCanvasElement.prototype.toDataURL = vi.fn((type) => {
+    expect(type).toBe('image/jpeg')
+    return type === 'image/jpeg' ? 'data:image/jpeg;base64,test' : 'data:image/png;base64,test'
+  })
+
+  expect(wrapper.vm.confirm()).toBe('')
 })
diff --git a/packages/varlet-ui/src/signature/docs/en-US.md b/packages/varlet-ui/src/signature/docs/en-US.md
index dc4fba7383e..bc20d1ebba0 100644
--- a/packages/varlet-ui/src/signature/docs/en-US.md
+++ b/packages/varlet-ui/src/signature/docs/en-US.md
@@ -2,69 +2,67 @@
 
 ### Intro
 
-A component for electronic signature that allows users to sign on the screen.
+Signature component based on `Canvas`.
 
 ### Basic Usage
 
-Bind signature value through `v-model`.
+Get the data url of the canvas through the component method `confirm`. When the canvas is empty, you will get the `empty string`.
 
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
+const signatureRef = ref()
 
-const reset = () => {
-  signature.value = ''
+function confirmSignature() {
+  signature.value = signatureRef.value.confirm()
 }
 
-const confirm = () => {
-  console.log('Signature data:', signature.value)
+function resetSignature() {
+  signature.value = ''
+  signatureRef.value.reset()
 }
 </script>
 
 <template>
-  <var-signature v-model="signature" />
-  
-  <var-space>
-    <var-button type="primary" @click="confirm">Confirm</var-button>
-    <var-button @click="reset">Reset</var-button>
+  <var-signature ref="signatureRef" />
+  <var-space style="margin-top: 10px">
+    <var-button type="primary" @click="confirmSignature">确认</var-button>
+    <var-button type="primary" @click="resetSignature">重置</var-button>
   </var-space>
-  
-  <img v-if="signature" :src="signature" alt="Signature Preview" style="margin-top: 10px" />
+  <img v-if="signature" :src="signature" style="margin-top: 10px" />
 </template>
 ```
 
 ### Custom Style
 
-Customize signature style through properties like `stroke-style`, `line-width`, etc.
+You can customize the signature style through `stroke-style` and `line-width`. The default `stroke-style` is `currentColor`, which will inherit the text color, so you can also set the color through `css color`.
 
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
-</script>
-
-<template>
-  <var-signature
-    v-model="signature"
-    stroke-style="#2979ff"
-    :line-width="3"
-  />
-</template>
-```
+const signatureRef = ref()
 
-### Specify Image Format
+function confirmSignature() {
+  signature.value = signatureRef.value.confirm()
+}
 
-Specify the generated image format through `data-url-type`.
+function resetSignature() {
+  signature.value = ''
+  signatureRef.value.reset()
+}
+</script>
 
-```html
 <template>
-  <var-signature
-    v-model="signature"
-    data-url-type="jpg"
-  />
+  <var-signature ref="signatureRef" style="color: var(--color-primary)" :line-width="4" />
+  <var-space style="margin-top: 10px">
+    <var-button type="primary" @click="confirmSignature">确认</var-button>
+    <var-button type="primary" @click="resetSignature">重置</var-button>
+  </var-space>
+  <img v-if="signature" :src="signature" style="margin-top: 10px" />
 </template>
 ```
 
@@ -72,27 +70,26 @@ Specify the generated image format through `data-url-type`.
 
 ### Props
 
-| Prop | Description | Type | Default |
+| Prop | Description  | Type | Default |
 | --- | --- | --- | --- |
-| `v-model` | Signature value (base64 format) | _string_ | `''` |
-| `stroke-style` | Pen color, supports `currentColor` | _string_ | `#000` |
-| `line-width` | Line width | _string \| number_ | `2` |
-| `data-url-type` | Generated image format | _'png' \| 'jpg'_ | `'png'` |
+| `stroke-style` | Canvas stroke style | _string_ | `currentColor` |
+| `line-width` | Canvas line width | _string \| number_ | `2` |
+| `data-url-type` | Data url type for generating image | _'png' \| 'jpg'_ | `'png'` |
 
 ### Events
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| `start` | Triggered when starting to sign | `event: TouchEvent` |
-| `signing` | Triggered during signing | `{ x: number, y: number, clientX: number, clientY: number }` |
-| `end` | Triggered when ending signature | `event: Event` |
+| `start` | Triggered when signing begins | `-` |
+| `signing` | Triggered during signature | `-` |
+| `end` | Triggered when ending signature | `-` |
 
 ### Methods
 
-| Method | Description | Parameters | Return |
+| Method | Description | Arguments | Return |
 | --- | --- | --- | --- |
-| `reset` | Clear signature and end current path | `-` | `void` |
-| `confirm` | Save signature, returns base64 format image data. Returns empty string if canvas is empty | `-` | `string` |
+| `reset` | Reset canvas | `-` | `-` |
+| `confirm` | Confirm the signature and return image data in data url format.Returns an empty string when the canvas is empty | `-` | `string` |
 
 ### Style Variables
 
@@ -101,65 +98,6 @@ Here are the CSS variables used by the component. Styles can be customized using
 | Variable | Default |
 | --- | --- |
 | `--signature-height` | `200px` |
-| `--signature-border-color` | `var(--color-surface-container-highest)` |
-| `--signature-stroke-color` | `#fff` |
-
-### Example
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Snackbar } from '@varlet/ui'
-
-const signature = ref('')
-
-const handleConfirm = async () => {
-  if (!signature.value) {
-    Snackbar.warning('Please sign first')
-    return
-  }
-  
-  // Here you can upload signature data to server
-  console.log('Signature data:', signature.value)
-  Snackbar.success('Save successful')
-}
-</script>
-
-<template>
-  <var-card>
-    <template #title>
-      Please sign below
-    </template>
-    
-    <var-signature
-      v-model="signature"
-      stroke-style="#2979ff"
-      :line-width="3"
-    />
-    
-    <template #footer>
-      <var-space>
-        <var-button type="primary" @click="handleConfirm">
-          Confirm
-        </var-button>
-        <var-button @click="signature = ''">
-          Reset
-        </var-button>
-      </var-space>
-    </template>
-  </var-card>
-  
-  <var-paper :elevation="2" style="margin-top: 16px" v-if="signature">
-    <img :src="signature" alt="Signature Preview" style="width: 100%" />
-  </var-paper>
-</template>
-```
-
-## Notes
-
-1. Signature data is stored in base64 format, which may occupy large space. It's recommended to compress before uploading to server
-2. When using on mobile devices, it's recommended to set appropriate canvas size for better signature experience
-3. Canvas border, border radius and other styles can be customized through CSS
-4. The component automatically adapts to container width and adjusts canvas size when window size changes
-5. When `stroke-style` is set to `'currentColor'`, it will inherit the text color of the parent element
-6. You can choose to generate PNG or JPG format signature images through the `data-url-type` property
+| `--signature-background-color` | `var(--color-surface-container-highest)` |
+| `--signature-stroke-color` | `#333` |
+| `--signature-border-radius` | `4px` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/docs/zh-CN.md b/packages/varlet-ui/src/signature/docs/zh-CN.md
index ad3481c96b7..8a88fcfa9fc 100644
--- a/packages/varlet-ui/src/signature/docs/zh-CN.md
+++ b/packages/varlet-ui/src/signature/docs/zh-CN.md
@@ -1,70 +1,68 @@
-# 电子签名
+# 签名
 
 ### 介绍
 
-一个用于在屏幕上进行电子签名的组件。
+基于 `Canvas` 的签名组件。
 
 ### 基本使用
 
-通过 `v-model` 绑定签名的值。
+通过组件方法 `confirm` 获取画布的 `data url`，画布为空时会获取到 `空字符串`。
 
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
+const signatureRef = ref()
 
-const reset = () => {
-  signature.value = ''
+function confirmSignature() {
+  signature.value = signatureRef.value.confirm()
 }
 
-const confirm = () => {
-  console.log('签名数据：', signature.value)
+function resetSignature() {
+  signature.value = ''
+  signatureRef.value.reset()
 }
 </script>
 
 <template>
-  <var-signature v-model="signature" />
-  
-  <var-space>
-    <var-button type="primary" @click="confirm">确认签名</var-button>
-    <var-button @click="reset">重置签名</var-button>
+  <var-signature ref="signatureRef" />
+  <var-space style="margin-top: 10px">
+    <var-button type="primary" @click="confirmSignature">确认</var-button>
+    <var-button type="primary" @click="resetSignature">重置</var-button>
   </var-space>
-  
-  <img v-if="signature" :src="signature" alt="签名预览" style="margin-top: 10px" />
+  <img v-if="signature" :src="signature" style="margin-top: 10px" />
 </template>
 ```
 
 ### 自定义样式
 
-可以通过 `stroke-style`、`line-width` 等属性自定义签名的样式。
+可以通过 `stroke-style`、`line-width` 自定义签名的样式，`stroke-style` 默认是 `currentColor`，会继承文字颜色，所以也可以通过 `css color` 来设置颜色。 
 
 ```html
 <script setup>
 import { ref } from 'vue'
 
 const signature = ref('')
-</script>
-
-<template>
-  <var-signature
-    v-model="signature"
-    stroke-style="#2979ff"
-    :line-width="3"
-  />
-</template>
-```
+const signatureRef = ref()
 
-### 指定图片格式
+function confirmSignature() {
+  signature.value = signatureRef.value.confirm()
+}
 
-可以通过 `data-url-type` 指定生成的图片格式。
+function resetSignature() {
+  signature.value = ''
+  signatureRef.value.reset()
+}
+</script>
 
-```html
 <template>
-  <var-signature
-    v-model="signature"
-    data-url-type="jpg"
-  />
+  <var-signature ref="signatureRef" style="color: var(--color-primary)" :line-width="4" />
+  <var-space style="margin-top: 10px">
+    <var-button type="primary" @click="confirmSignature">确认</var-button>
+    <var-button type="primary" @click="resetSignature">重置</var-button>
+  </var-space>
+  <img v-if="signature" :src="signature" style="margin-top: 10px" />
 </template>
 ```
 
@@ -74,8 +72,7 @@ const signature = ref('')
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `v-model` | 签名的值（base64格式） | _string_ | `''` |
-| `stroke-style` | 画笔颜色，支持 `currentColor` | _string_ | `#000` |
+| `stroke-style` | 画笔颜色 | _string_ | `currentColor` |
 | `line-width` | 画笔粗细 | _string \| number_ | `2` |
 | `data-url-type` | 生成图片的格式 | _'png' \| 'jpg'_ | `'png'` |
 
@@ -83,16 +80,16 @@ const signature = ref('')
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| `start` | 开始签名时触发 | `event: TouchEvent` |
-| `signing` | 签名过程中触发 | `{ x: number, y: number, clientX: number, clientY: number }` |
-| `end` | 结束签名时触发 | `event: Event` |
+| `start` | 开始签名时触发 | `-` |
+| `signing` | 签名过程中触发 | `-` |
+| `end` | 结束签名时触发 | `-` |
 
 ### 方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| `reset` | 清除签名并结束当前路径 | `-` | `void` |
-| `confirm` | 保存签名，返回 base64 格式的图片数据。画布为空时返回空字符串 | `-` | `string` |
+| `reset` | 重置签名 | `-` | `-` |
+| `confirm` | 确认签名，返回 data url 格式的图片数据。画布为空时返回空字符串 | `-` | `string` |
 
 ### 样式变量
 
@@ -101,65 +98,6 @@ const signature = ref('')
 | 变量名 | 默认值 |
 | --- | --- |
 | `--signature-height` | `200px` |
-| `--signature-border-color` | `var(--color-surface-container-highest)` |
-| `--signature-stroke-color` | `#fff` |
-
-### 示例
-
-```html
-<script setup>
-import { ref } from 'vue'
-import { Snackbar } from '@varlet/ui'
-
-const signature = ref('')
-
-const handleConfirm = async () => {
-  if (!signature.value) {
-    Snackbar.warning('请先签名')
-    return
-  }
-  
-  // 这里可以将签名数据上传到服务器
-  console.log('签名数据：', signature.value)
-  Snackbar.success('保存成功')
-}
-</script>
-
-<template>
-  <var-card>
-    <template #title>
-      请在下方签名
-    </template>
-    
-    <var-signature
-      v-model="signature"
-      stroke-style="#2979ff"
-      :line-width="3"
-    />
-    
-    <template #footer>
-      <var-space>
-        <var-button type="primary" @click="handleConfirm">
-          确认签名
-        </var-button>
-        <var-button @click="signature = ''">
-          重新签名
-        </var-button>
-      </var-space>
-    </template>
-  </var-card>
-  
-  <var-paper :elevation="2" style="margin-top: 16px" v-if="signature">
-    <img :src="signature" alt="签名预览" style="width: 100%" />
-  </var-paper>
-</template>
-```
-
-## 注意事项
-
-1. 签名数据以 base64 格式存储，可能会占用较大空间，建议在上传服务器前进行压缩处理
-2. 在移动设备上使用时，建议设置适当的画布大小以获得更好的签名体验
-3. 可以通过 CSS 自定义画布的边框、圆角等样式
-4. 组件会自动适应容器宽度，并在窗口大小改变时重新调整画布尺寸
-5. 当 `stroke-style` 设置为 `'currentColor'` 时，将会继承父元素的文字颜色
-6. 可以通过 `data-url-type` 属性选择生成 PNG 或 JPG 格式的签名图片
\ No newline at end of file
+| `--signature-background-color` | `var(--color-surface-container-highest)` |
+| `--signature-stroke-color` | `#333` |
+| `--signature-border-radius` | `4px` |
\ No newline at end of file
diff --git a/packages/varlet-ui/src/signature/example/index.vue b/packages/varlet-ui/src/signature/example/index.vue
index 3721a3bb23b..5b211d613d6 100644
--- a/packages/varlet-ui/src/signature/example/index.vue
+++ b/packages/varlet-ui/src/signature/example/index.vue
@@ -4,8 +4,9 @@ import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
 import { t, use } from './locale'
 
 const signature = ref('')
-const customStyleSignature = ref('')
 const signatureRef = ref()
+
+const customStyleSignature = ref('')
 const customStyleSignatureRef = ref()
 
 watchLang(use)
@@ -37,12 +38,12 @@ function clearCustomStyleSignature() {
 
 <template>
   <app-type>{{ t('basicUsage') }}</app-type>
-  <var-signature ref="signatureRef" v-model="signature" />
+  <var-signature ref="signatureRef" />
   <var-space class="gap">
     <var-button type="primary" @click="confirmSignature">{{ t('confirm') }}</var-button>
     <var-button type="primary" @click="resetSignature">{{ t('reset') }}</var-button>
   </var-space>
-  <img v-if="signature" :src="signature" style="margin-top: 10px" />
+  <img v-if="signature" class="gap" :src="signature" />
 
   <app-type>{{ t('customStyle') }}</app-type>
   <var-signature ref="customStyleSignatureRef" style="color: var(--color-primary)" :line-width="4" />
diff --git a/packages/varlet-ui/src/signature/props.ts b/packages/varlet-ui/src/signature/props.ts
index df09ec6e3e0..03396818873 100644
--- a/packages/varlet-ui/src/signature/props.ts
+++ b/packages/varlet-ui/src/signature/props.ts
@@ -2,12 +2,6 @@ import { type PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
 export type SignatureDataUrlType = 'png' | 'jpg'
-export interface SignatureSigningData {
-  x: number
-  y: number
-  clientX: number
-  clientY: number
-}
 
 export const props = {
   lineWidth: {
@@ -24,5 +18,5 @@ export const props = {
   },
   onStart: defineListenerProp<() => void>(),
   onEnd: defineListenerProp<() => void>(),
-  onSigning: defineListenerProp<(data: SignatureSigningData) => void>(),
+  onSigning: defineListenerProp<() => void>(),
 }
diff --git a/packages/varlet-ui/src/signature/signature.less b/packages/varlet-ui/src/signature/signature.less
index a50df21883b..caf186dc84c 100644
--- a/packages/varlet-ui/src/signature/signature.less
+++ b/packages/varlet-ui/src/signature/signature.less
@@ -2,6 +2,7 @@
   --signature-background-color: var(--color-surface-container-highest);
   --signature-stroke-color: #333;
   --signature-height: 200px;
+  --signature-border-radius: 4px;
 }
 
 .var-signature {
@@ -9,4 +10,5 @@
   color: var(--signature-stroke-color);
   background: var(--signature-background-color);
   height: var(--signature-height);
+  border-radius: var(--signature-border-radius);
 }
diff --git a/packages/varlet-ui/src/themes/dark/signature.ts b/packages/varlet-ui/src/themes/dark/signature.ts
index abec9605b65..9d5f5117836 100644
--- a/packages/varlet-ui/src/themes/dark/signature.ts
+++ b/packages/varlet-ui/src/themes/dark/signature.ts
@@ -2,4 +2,5 @@ export default {
   '--signature-background-color': 'var(--color-surface-container-highest)',
   '--signature-stroke-color': '#fff',
   '--signature-height': '200px',
+  '--signature-border-radius': '4px',
 }
diff --git a/packages/varlet-ui/src/themes/md3-dark/signature.ts b/packages/varlet-ui/src/themes/md3-dark/signature.ts
index 0db6aa7049e..9044b0ee9c7 100644
--- a/packages/varlet-ui/src/themes/md3-dark/signature.ts
+++ b/packages/varlet-ui/src/themes/md3-dark/signature.ts
@@ -2,4 +2,5 @@ export default {
   '--signature-background-color': 'var(--color-surface-container-highest)',
   '--signature-stroke-color': 'var(--color-inverse-surface)',
   '--signature-height': '200px',
+  '--signature-border-radius': '12px',
 }
diff --git a/packages/varlet-ui/src/themes/md3-light/signature.ts b/packages/varlet-ui/src/themes/md3-light/signature.ts
index 1f02cb50e4d..a387592b7e9 100644
--- a/packages/varlet-ui/src/themes/md3-light/signature.ts
+++ b/packages/varlet-ui/src/themes/md3-light/signature.ts
@@ -2,4 +2,5 @@ export default {
   '--signature-background-color': 'var(--color-surface-container-low)',
   '--signature-stroke-color': '#1D1B20',
   '--signature-height': '200px',
+  '--signature-border-radius': '12px',
 }
diff --git a/packages/varlet-ui/types/styleVars.d.ts b/packages/varlet-ui/types/styleVars.d.ts
index 91d42de82ab..4d13dbad5b9 100644
--- a/packages/varlet-ui/types/styleVars.d.ts
+++ b/packages/varlet-ui/types/styleVars.d.ts
@@ -575,8 +575,9 @@ interface BaseStyleVars {
   '--option-font-size'?: string
   '--option-selected-background'?: string
   '--option-text-color'?: string
-  '--signature-background'?: string
-  '--signature-border-color'?: string
+  '--signature-height'?: string
+  '--signature-background-color'?: string
+  '--signature-stroke-color'?: string
   '--signature-border-radius'?: string
   '--skeleton-content-padding'?: string
   '--skeleton-card-height'?: string
diff --git a/packages/varlet-ui/varlet.config.mjs b/packages/varlet-ui/varlet.config.mjs
index 333a0221017..5114f034e58 100644
--- a/packages/varlet-ui/varlet.config.mjs
+++ b/packages/varlet-ui/varlet.config.mjs
@@ -392,14 +392,6 @@ export default defineConfig({
         doc: 'watermark',
         type: 2,
       },
-      {
-        text: {
-          'zh-CN': 'Signature 签名',
-          'en-US': 'Signature',
-        },
-        doc: 'Signature',
-        type: 2,
-      },
       {
         text: {
           'zh-CN': 'Code 代码块',
@@ -645,6 +637,14 @@ export default defineConfig({
         doc: 'time-picker',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'Signature 签名',
+          'en-US': 'Signature',
+        },
+        doc: 'signature',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': '表单组件',

From f50640ede6f87f230da1c13ce5569a94ba4a7740 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 20 Mar 2025 22:53:47 +0800
Subject: [PATCH 26/29] types: fix types

---
 packages/varlet-ui/types/signature.d.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/varlet-ui/types/signature.d.ts b/packages/varlet-ui/types/signature.d.ts
index 7308c8ad55f..466ec52b5b4 100644
--- a/packages/varlet-ui/types/signature.d.ts
+++ b/packages/varlet-ui/types/signature.d.ts
@@ -3,12 +3,6 @@ import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from '.
 export declare const signatureProps: Record<keyof SignatureProps, any>
 
 export type SignatureDataUrlType = 'png' | 'jpg'
-export interface SignatureSigningData {
-  x: number
-  y: number
-  clientX: number
-  clientY: number
-}
 
 export interface SignatureProps extends BasicAttributes {
   lineWidth?: number
@@ -16,7 +10,7 @@ export interface SignatureProps extends BasicAttributes {
   dataUrlType?: SignatureDataUrlType
   onStart?: ListenerProp<() => void>
   onEnd?: ListenerProp<() => void>
-  onSigning?: ListenerProp<(data: SignatureSigningData) => void>
+  onSigning?: ListenerProp<() => void>
 }
 
 export class Signature extends VarComponent {

From 8a6c04284620d020f762d87a98088be7d2070113 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 20 Mar 2025 22:54:16 +0800
Subject: [PATCH 27/29] types: fix types

---
 packages/varlet-ui/types/signature.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/varlet-ui/types/signature.d.ts b/packages/varlet-ui/types/signature.d.ts
index 466ec52b5b4..2022eeee40f 100644
--- a/packages/varlet-ui/types/signature.d.ts
+++ b/packages/varlet-ui/types/signature.d.ts
@@ -17,6 +17,10 @@ export class Signature extends VarComponent {
   static setPropsDefaults: SetPropsDefaults<SignatureProps>
 
   $props: SignatureProps
+
+  confirm(): string
+
+  reset(): void
 }
 
 export class _SignatureComponent extends Signature {}

From f71fde3d45b2275a5d12d369c63ad7746734a731 Mon Sep 17 00:00:00 2001
From: xueyuan <xueyuan@vanchen.com>
Date: Wed, 4 Jun 2025 11:43:07 +0800
Subject: [PATCH 28/29] =?UTF-8?q?feat(virtual-list):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=99=9A=E6=8B=9F=E6=BB=9A=E5=8A=A8=E5=88=97=E8=A1=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=8A=E7=9B=B8=E5=85=B3=E6=96=87=E6=A1=A3=E5=92=8C?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/virtual-list/VirtualList.vue          | 324 ++++++++++++++++++
 .../src/virtual-list/__tests__/index.spec.js  |   8 +
 .../varlet-ui/src/virtual-list/docs/en-US.md  | 192 +++++++++++
 .../varlet-ui/src/virtual-list/docs/zh-CN.md  | 192 +++++++++++
 .../src/virtual-list/example/index.vue        |  98 ++++++
 .../src/virtual-list/example/locale/en-US.ts  |   7 +
 .../src/virtual-list/example/locale/index.ts  |  17 +
 .../src/virtual-list/example/locale/zh-CN.ts  |   6 +
 packages/varlet-ui/src/virtual-list/index.ts  |  12 +
 packages/varlet-ui/src/virtual-list/props.ts  |  21 ++
 .../src/virtual-list/virtualList.d.ts         |  35 ++
 .../src/virtual-list/virtualList.less         |  34 ++
 packages/varlet-ui/types/styleVars.d.ts       |   1 +
 packages/varlet-ui/varlet.config.mjs          |   8 +
 14 files changed, 955 insertions(+)
 create mode 100644 packages/varlet-ui/src/virtual-list/VirtualList.vue
 create mode 100644 packages/varlet-ui/src/virtual-list/__tests__/index.spec.js
 create mode 100644 packages/varlet-ui/src/virtual-list/docs/en-US.md
 create mode 100644 packages/varlet-ui/src/virtual-list/docs/zh-CN.md
 create mode 100644 packages/varlet-ui/src/virtual-list/example/index.vue
 create mode 100644 packages/varlet-ui/src/virtual-list/example/locale/en-US.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/example/locale/index.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/index.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/props.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/virtualList.d.ts
 create mode 100644 packages/varlet-ui/src/virtual-list/virtualList.less

diff --git a/packages/varlet-ui/src/virtual-list/VirtualList.vue b/packages/varlet-ui/src/virtual-list/VirtualList.vue
new file mode 100644
index 00000000000..32acaf98a9a
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/VirtualList.vue
@@ -0,0 +1,324 @@
+<template>
+  <div ref="containerRef" :class="n()" :style="containerStyle" @scroll.passive="handleScroll">
+    <!-- 用于撑开滚动区域的幽灵层 -->
+    <div :class="n('phantom')" :style="{ height: `${phantomHeight}px` }" />
+    <!-- 实际渲染的内容层 -->
+    <div ref="contentRef" :class="n('content')" :style="{ transform: getTransform() }">
+      <div v-for="(item, index) in visibleData" :key="index" :class="n('item')">
+        <slot :item="item" :index="start + index" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { call, toNumber } from '@varlet/shared'
+import { createNamespace } from '../utils/components'
+import { props } from './props'
+
+// 定义缓存位置接口
+interface CachedPosition {
+  index: number // 列表项索引
+  top: number // 距离顶部位置
+  bottom: number // 距离底部位置
+  height: number // 高度
+  dValue: number // 高度差值
+}
+
+// 比较结果枚举
+enum CompareResult {
+  eq = 1, // 相等
+  lt, // 小于
+  gt, // 大于
+}
+
+/**
+ * 二分查找算法
+ * 用于快速定位滚动位置对应的列表项索引
+ */
+function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult) {
+  let start = 0
+  let end = list.length - 1
+  let tempIndex = null
+
+  while (start <= end) {
+    tempIndex = Math.floor((start + end) / 2)
+    const midValue = list[tempIndex]
+
+    const compareRes: CompareResult = compareFunc(midValue, value)
+    if (compareRes === CompareResult.eq) {
+      return tempIndex
+    }
+
+    if (compareRes === CompareResult.lt) {
+      start = tempIndex + 1
+    } else if (compareRes === CompareResult.gt) {
+      end = tempIndex - 1
+    }
+  }
+
+  return tempIndex
+}
+
+const { name, n } = createNamespace('virtual-list')
+
+export default defineComponent({
+  name,
+  props,
+  setup(props) {
+    // DOM引用
+    const containerRef = ref<HTMLElement | null>(null) // 容器元素
+    const contentRef = ref<HTMLElement | null>(null) // 内容元素
+
+    // 虚拟滚动状态
+    const state = reactive({
+      start: 0, // 当前渲染的起始索引
+      originStartIndex: 0, // 原始起始索引（不含缓冲区）
+      scrollTop: 0, // 当前滚动位置
+      cachePositions: [] as CachedPosition[], // 缓存的位置信息
+      phantomHeight: 0, // 幽灵层高度
+    })
+
+    // 容器样式
+    const containerStyle = computed(() => {
+      if (props.containerHeight) {
+        return {
+          height: typeof props.containerHeight === 'number' ? `${props.containerHeight}px` : props.containerHeight,
+        }
+      }
+      return {}
+    })
+
+    // 可见列表项数量
+    const visibleCount = computed(() => {
+      if (!containerRef.value) {
+        return 0
+      }
+      return Math.ceil(containerRef.value.clientHeight / toNumber(props.itemHeight))
+    })
+
+    // 结束索引（起始索引 + 可见数量 + 缓冲区大小）
+    const end = computed(() => {
+      return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, props.data.length)
+    })
+
+    // 可见数据
+    const visibleData = computed(() => {
+      return props.data.slice(state.start, end.value)
+    })
+
+    /**
+     * 获取内容层的变换样式
+     * 根据起始索引计算偏移量
+     */
+    const getTransform = () => {
+      if (contentRef.value) {
+        return `translate3d(0, ${state.start >= 1 ? state.cachePositions[state.start - 1].bottom : 0}px, 0)`
+      }
+      return 'translate3d(0, 0, 0)'
+    }
+
+    /**
+     * 初始化缓存位置
+     * 根据列表项高度计算每项的位置信息
+     */
+    const initCachedPosition = () => {
+      state.cachePositions = []
+      const itemHeight = toNumber(props.itemHeight)
+
+      for (let i = 0; i < props.data.length; ++i) {
+        state.cachePositions[i] = {
+          index: i,
+          height: itemHeight,
+          top: i * itemHeight,
+          bottom: (i + 1) * itemHeight,
+          dValue: 0,
+        }
+      }
+
+      state.phantomHeight = props.data.length * itemHeight
+    }
+
+    /**
+     * 更新缓存位置
+     * 根据实际渲染的DOM元素高度更新位置信息
+     */
+    const updateCachedPosition = () => {
+      if (!contentRef.value) {
+        return
+      }
+
+      // 获取内容层中的所有元素节点
+      const nodes = Array.from(contentRef.value.childNodes).filter((node: Node) => node.nodeType === 1) as HTMLElement[]
+
+      // 更新每个可见元素的高度信息
+      nodes.forEach((node: HTMLElement, index: number) => {
+        if (!node) {
+          return
+        }
+        const height = node.offsetHeight
+        const oldHeight = state.cachePositions[index + state.start].height
+        const dValue = oldHeight - height
+
+        if (dValue) {
+          state.cachePositions[index + state.start].bottom -= dValue
+          state.cachePositions[index + state.start].height = height
+          state.cachePositions[index + state.start].dValue = dValue
+        }
+      })
+
+      // 更新后续元素的位置信息
+      const startIndex = state.start
+      const cachedPositionsLen = state.cachePositions.length
+      let cumulativeDiffHeight = state.cachePositions[startIndex].dValue
+      state.cachePositions[startIndex].dValue = 0
+
+      for (let i = startIndex + 1; i < cachedPositionsLen; ++i) {
+        const item = state.cachePositions[i]
+
+        state.cachePositions[i].top = state.cachePositions[i - 1].bottom
+        state.cachePositions[i].bottom = state.cachePositions[i].bottom - cumulativeDiffHeight
+
+        if (item.dValue !== 0) {
+          cumulativeDiffHeight += item.dValue
+          item.dValue = 0
+        }
+      }
+
+      // 更新幽灵层高度
+      const height = state.cachePositions[cachedPositionsLen - 1]?.bottom || 0
+      state.phantomHeight = height
+    }
+
+    /**
+     * 获取滚动位置对应的起始索引
+     * 使用二分查找算法快速定位
+     */
+    const getStartIndex = (scrollTop = 0) => {
+      let idx = binarySearch<CachedPosition, number>(
+        state.cachePositions,
+        scrollTop,
+        (currentValue: CachedPosition, targetValue: number) => {
+          const currentCompareValue = currentValue.bottom
+          if (currentCompareValue === targetValue) {
+            return CompareResult.eq
+          }
+
+          if (currentCompareValue < targetValue) {
+            return CompareResult.lt
+          }
+
+          return CompareResult.gt
+        },
+      ) as number
+
+      if (idx === null) {
+        return 0
+      }
+
+      const targetItem = state.cachePositions[idx]
+      if (targetItem && targetItem.bottom < scrollTop) {
+        idx += 1
+      }
+
+      return idx
+    }
+
+    /**
+     * 重置虚拟滚动参数
+     * 当数据发生变化时调用
+     */
+    const resetAllVirtualParam = () => {
+      state.originStartIndex = 0
+      state.start = 0
+      state.scrollTop = 0
+      if (containerRef.value) {
+        containerRef.value.scrollTop = 0
+      }
+      initCachedPosition()
+    }
+
+    /**
+     * 处理滚动事件
+     * 更新起始索引并触发回调
+     */
+    const handleScroll = (e: Event) => {
+      if (!containerRef.value) {
+        return
+      }
+
+      const scrollTop = containerRef.value.scrollTop
+      const { originStartIndex } = state
+      const currentIndex = getStartIndex(scrollTop)
+
+      if (currentIndex !== originStartIndex) {
+        state.originStartIndex = currentIndex
+        state.start = Math.max(state.originStartIndex - props.bufferSize, 0)
+      }
+
+      state.scrollTop = scrollTop
+      call(props.onScroll, e)
+    }
+
+    /**
+     * 滚动到指定索引位置
+     * 对外暴露的方法
+     */
+    const scrollTo = (index: number) => {
+      if (!containerRef.value || index < 0 || index >= props.data.length) {
+        return
+      }
+
+      if (state.cachePositions[index]) {
+        containerRef.value.scrollTop = state.cachePositions[index].top
+      } else {
+        const itemHeight = toNumber(props.itemHeight)
+        containerRef.value.scrollTop = index * itemHeight
+      }
+    }
+
+    // 监听数据变化，重置虚拟滚动参数
+    watch(
+      () => props.data,
+      (newVal, oldVal) => {
+        if (newVal.length !== oldVal.length) {
+          resetAllVirtualParam()
+        }
+      },
+      { deep: true },
+    )
+
+    // 监听起始索引变化，更新缓存位置
+    watch(
+      () => state.start,
+      () => {
+        if (contentRef.value && props.data.length > 0) {
+          updateCachedPosition()
+        }
+      },
+    )
+
+    // 组件挂载后初始化缓存位置
+    onMounted(() => {
+      initCachedPosition()
+    })
+
+    return {
+      n,
+      containerRef,
+      contentRef,
+      containerStyle,
+      scrollTo,
+      handleScroll,
+      visibleData,
+      getTransform,
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './virtualList';
+</style>
diff --git a/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js b/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js
new file mode 100644
index 00000000000..23ed45508e2
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/__tests__/index.spec.js
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { expect, test } from 'vitest'
+import VirtualList from '..'
+
+test('virtual-list plugin', () => {
+  const app = createApp({}).use(VirtualList)
+  expect(app.component(VirtualList.name)).toBeTruthy()
+})
diff --git a/packages/varlet-ui/src/virtual-list/docs/en-US.md b/packages/varlet-ui/src/virtual-list/docs/en-US.md
new file mode 100644
index 00000000000..4328281d9f4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/docs/en-US.md
@@ -0,0 +1,192 @@
+# VirtualList
+
+### Intro
+
+A high-performance scrolling list for displaying large amounts of data, using virtual scrolling technology to render only elements in the visible area, greatly improving the performance of long lists.
+
+Virtual lists should only be used when dealing with large amounts of data (typically hundreds to thousands of items) to improve rendering performance. For most common scenarios, regular list rendering is sufficient.
+
+This component supports automatic handling of variable height list items. It measures and updates the actual height of each list item after rendering, ensuring accurate scroll positioning.
+
+### Basic Usage
+
+Set list data with the `data` property, set the list item height with `item-height`, and customize the list item content with the default slot.
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="56">
+    <template #default="{ item, index }">
+      <div class="list-item">
+        List Item {{ item }}
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => i + 1)
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+</style>
+```
+
+### Variable Height Items
+
+The component automatically measures and adapts to list items with different heights. In this case, `item-height` is used as an estimated height.
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="80">
+    <template #default="{ item, index }">
+      <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+        <div class="item-content">List Item {{ item.id }}</div>
+        <div class="item-desc">{{ item.desc }}</div>
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    // Create list items with variable heights
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => ({
+        id: i + 1,
+        height: Math.floor(Math.random() * 50) + 50, // Random height between 50-100px
+        desc: 'This is a variable height list item. The component handles scroll position automatically.'
+      }))
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
+```
+
+### Set Container Height
+
+Set the container height with the `container-height` property or CSS styles.
+
+```html
+<var-virtual-list
+  :data="list"
+  :item-height="56"
+  :container-height="336"
+>
+  <!-- List item content -->
+</var-virtual-list>
+```
+
+### Scroll to Specified Position
+
+Scroll to a specified position using the `scrollTo` method.
+
+```html
+<var-button @click="scrollToPosition">Scroll to Item 50</var-button>
+<var-virtual-list ref="virtualList" :data="list" :item-height="56">
+  <!-- List item content -->
+</var-virtual-list>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const virtualList = ref(null)
+    
+    const scrollToPosition = () => {
+      virtualList.value.scrollTo(50)
+    }
+    
+    return {
+      virtualList,
+      scrollToPosition
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### Props
+
+| Prop | Description | Type | Default |
+| --- | --- | --- | --- |
+| `data` | List data | _any[]_ | `[]` |
+| `item-height` | List item height (unit: pixel), used as estimated height for variable height lists | _number \| string_ | `50` |
+| `buffer-size` | Buffer size (number of pre-rendered list items above and below) | _number_ | `5` |
+| `container-height` | Container height (unit: pixel) | _number \| string_ | `-` |
+
+### Methods
+
+| Method | Description | Parameters | Return |
+| --- | --- | --- | --- |
+| `scrollTo` | Scroll to the specified index position | `index: number` | `-` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `scroll` | Triggered when the list scrolls | `event: Event` |
+
+### Slots
+
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| `default` | List item content | `{ item: any, index: number }` |
+
+### Style Variables
+
+Here are the CSS variables used by the component, which can be customized using [StyleProvider](#/en-US/style-provider).
+
+| Variable | Default |
+| --- | --- |
+| `--virtual-list-height` | `100%` |
+
diff --git a/packages/varlet-ui/src/virtual-list/docs/zh-CN.md b/packages/varlet-ui/src/virtual-list/docs/zh-CN.md
new file mode 100644
index 00000000000..3f8ec5873b6
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/docs/zh-CN.md
@@ -0,0 +1,192 @@
+# 虚拟滚动列表
+
+### 介绍
+
+用于展示大量数据的高性能滚动列表，通过虚拟滚动技术只渲染可视区域内的元素，极大提高了长列表的性能。
+
+只有在处理大量数据（通常是几百到几千条）需要提高渲染性能时，才需要使用虚拟列表。对于大多数常见场景，普通的列表渲染就足够了。
+
+本组件支持自动处理不定高列表项，会在渲染后自动测量并更新每个列表项的实际高度，确保滚动位置的准确性。
+
+### 基本使用
+
+通过 `data` 属性设置列表数据，通过 `item-height` 设置列表项高度，通过默认插槽自定义列表项内容。
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="56">
+    <template #default="{ item, index }">
+      <div class="list-item">
+        列表项 {{ item }}
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => i + 1)
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+</style>
+```
+
+### 不定高列表项
+
+组件会自动测量并适应不同高度的列表项，`item-height` 在这种情况下作为预估高度使用。
+
+```html
+<template>
+  <var-virtual-list :data="list" :item-height="80">
+    <template #default="{ item, index }">
+      <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+        <div class="item-content">列表项 {{ item.id }}</div>
+        <div class="item-desc">{{ item.desc }}</div>
+      </div>
+    </template>
+  </var-virtual-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    // 创建不同高度的列表项
+    const list = ref(
+      Array.from({ length: 1000 }, (_, i) => ({
+        id: i + 1,
+        height: Math.floor(Math.random() * 50) + 50, // 50-100px随机高度
+        desc: '这是一个高度不固定的列表项，组件会自动处理滚动位置'
+      }))
+    )
+    
+    return { list }
+  }
+}
+</script>
+
+<style>
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
+```
+
+### 设置容器高度
+
+通过 `container-height` 属性或 CSS 样式设置容器高度。
+
+```html
+<var-virtual-list
+  :data="list"
+  :item-height="56"
+  :container-height="336"
+>
+  <!-- 列表项内容 -->
+</var-virtual-list>
+```
+
+### 滚动到指定位置
+
+通过 `scrollTo` 方法滚动到指定位置。
+
+```html
+<var-button @click="scrollToPosition">滚动到第50项</var-button>
+<var-virtual-list ref="virtualList" :data="list" :item-height="56">
+  <!-- 列表项内容 -->
+</var-virtual-list>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const virtualList = ref(null)
+    
+    const scrollToPosition = () => {
+      virtualList.value.scrollTo(50)
+    }
+    
+    return {
+      virtualList,
+      scrollToPosition
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `data` | 列表数据 | _any[]_ | `[]` |
+| `item-height` | 列表项高度（单位：像素），对于不定高列表作为预估高度使用 | _number \| string_ | `50` |
+| `buffer-size` | 缓冲区大小（上下预渲染的列表项数量） | _number_ | `5` |
+| `container-height` | 容器高度（单位：像素） | _number \| string_ | `-` |
+
+### 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| `scrollTo` | 滚动到指定索引位置 | `index: number` | `-` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `scroll` | 列表滚动时触发 | `event: Event` |
+
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | 列表项内容 | `{ item: any, index: number }` |
+
+### 样式变量
+
+以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制。
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--virtual-list-height` | `100%` |
+
diff --git a/packages/varlet-ui/src/virtual-list/example/index.vue b/packages/varlet-ui/src/virtual-list/example/index.vue
new file mode 100644
index 00000000000..fbf6a870dc9
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/index.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { ref } from 'vue'
+import { AppType, onThemeChange, watchLang } from '@varlet/cli/client'
+import VarVirtualList from '..'
+import VarTab from '../../tab'
+import VarTabItem from '../../tab-item'
+import VarTabs from '../../tabs'
+import VarTabsItems from '../../tabs-items'
+import { t, use } from './locale'
+
+// 创建1000个列表项
+const fixedHeightList = ref(Array.from({ length: 1000 }, (_, i) => i + 1))
+
+// 创建不定高列表项
+const variableHeightList = ref(
+  Array.from({ length: 1000 }, (_, i) => ({
+    id: i + 1,
+    height: Math.floor(Math.random() * 50) + 50, // 50-100px随机高度
+    desc: t('variableDesc'),
+  })),
+)
+
+const active = ref(0)
+
+watchLang(use)
+onThemeChange()
+</script>
+
+<template>
+  <var-tabs v-model:active="active" sticky offset-top="14.4vmin" style="margin-bottom: 10px">
+    <var-tab>{{ t('basicUsage') }}</var-tab>
+    <var-tab>{{ t('variableHeight') }}</var-tab>
+  </var-tabs>
+
+  <var-tabs-items v-model:active="active">
+    <var-tab-item>
+      <app-type>{{ t('basicUsage') }}</app-type>
+      <var-virtual-list
+        :data="fixedHeightList"
+        :item-height="56"
+        style="height: 448px; background: var(--color-surface-container-low)"
+      >
+        <template #default="{ item }">
+          <div class="list-item">{{ t('listItem') }} {{ item }}</div>
+        </template>
+      </var-virtual-list>
+    </var-tab-item>
+
+    <var-tab-item>
+      <app-type>{{ t('variableHeight') }}</app-type>
+      <var-virtual-list
+        :data="variableHeightList"
+        :item-height="80"
+        style="height: 448px; background: var(--color-surface-container-low)"
+      >
+        <template #default="{ item }">
+          <div class="variable-height-item" :style="{ height: item.height + 'px' }">
+            <div class="item-content">{{ t('listItem') }} {{ item.id }}</div>
+            <div class="item-desc">{{ item.desc }}</div>
+          </div>
+        </template>
+      </var-virtual-list>
+    </var-tab-item>
+  </var-tabs-items>
+</template>
+
+<style>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  font-size: 16px;
+}
+
+.variable-height-item {
+  padding: 12px 16px;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.item-content {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.item-desc {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+</style>
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts b/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts
new file mode 100644
index 00000000000..adb3ea5e522
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/en-US.ts
@@ -0,0 +1,7 @@
+export default {
+  // Example locale
+  basicUsage: 'Basic Usage',
+  listItem: 'List Item',
+  variableHeight: 'Variable Height Items',
+  variableDesc: 'This is a variable height list item. The component handles scroll position automatically.',
+}
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/index.ts b/packages/varlet-ui/src/virtual-list/example/locale/index.ts
new file mode 100644
index 00000000000..e031be8c1a4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/index.ts
@@ -0,0 +1,17 @@
+import { Locale } from '@varlet/ui'
+import enUS from './en-US'
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = Locale.useLocale()
+
+const use = (lang: string) => {
+  Locale.use(lang)
+  exampleUse(lang)
+}
+
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+add('zh-CN', zhCN)
+add('en-US', enUS)
+
+export { add, t, merge, use }
diff --git a/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts b/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts
new file mode 100644
index 00000000000..cbb8d697a1c
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/example/locale/zh-CN.ts
@@ -0,0 +1,6 @@
+export default {
+  basicUsage: '基本使用',
+  listItem: '列表项',
+  variableHeight: '不定高列表项',
+  variableDesc: '这是一个高度不固定的列表项，组件会自动处理滚动位置',
+}
diff --git a/packages/varlet-ui/src/virtual-list/index.ts b/packages/varlet-ui/src/virtual-list/index.ts
new file mode 100644
index 00000000000..f616f554767
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/index.ts
@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from '../utils/components'
+import { props as virtualListProps } from './props'
+import VirtualList from './VirtualList.vue'
+
+withInstall(VirtualList)
+withPropsDefaultsSetter(VirtualList, virtualListProps)
+
+export { virtualListProps }
+
+export const _VirtualListComponent = VirtualList
+
+export default VirtualList
diff --git a/packages/varlet-ui/src/virtual-list/props.ts b/packages/varlet-ui/src/virtual-list/props.ts
new file mode 100644
index 00000000000..35f6dbd4c3c
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/props.ts
@@ -0,0 +1,21 @@
+import { defineListenerProp } from '../utils/components'
+
+export const props = {
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  itemHeight: {
+    type: [Number, String],
+    default: 50,
+  },
+  bufferSize: {
+    type: Number,
+    default: 5,
+  },
+  containerHeight: {
+    type: [Number, String],
+    default: null,
+  },
+  onScroll: defineListenerProp<(e: Event) => void>(),
+}
diff --git a/packages/varlet-ui/src/virtual-list/virtualList.d.ts b/packages/varlet-ui/src/virtual-list/virtualList.d.ts
new file mode 100644
index 00000000000..d4a661155ea
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/virtualList.d.ts
@@ -0,0 +1,35 @@
+import { VarComponent } from '../varComponent'
+
+export interface VirtualListProps {
+  /** 列表数据 */
+  data?: any[]
+  /** 列表项高度（单位：像素） */
+  itemHeight?: number | string
+  /** 缓冲区大小（上下预渲染的列表项数量） */
+  bufferSize?: number
+  /** 容器高度（单位：像素） */
+  containerHeight?: number | string
+  /** 滚动事件回调 */
+  onScroll?: (e: Event) => void
+}
+
+export interface VirtualListSlots {
+  /** 默认插槽，用于自定义列表项内容 */
+  default: (item: { item: any; index: number }) => JSX.Element
+}
+
+export interface VirtualListMethods {
+  /** 滚动到指定索引位置 */
+  scrollTo: (index: number) => void
+}
+
+export type VirtualListListeners = {
+  /** 滚动事件监听器 */
+  onScroll?: (e: Event) => void
+}
+
+export type VirtualList = VarComponent<VirtualListProps, VirtualListSlots, VirtualListMethods, VirtualListListeners>
+
+export class _VirtualListComponent extends VarComponent {
+  scrollTo(index: number): void
+}
diff --git a/packages/varlet-ui/src/virtual-list/virtualList.less b/packages/varlet-ui/src/virtual-list/virtualList.less
new file mode 100644
index 00000000000..8024ffaa3d4
--- /dev/null
+++ b/packages/varlet-ui/src/virtual-list/virtualList.less
@@ -0,0 +1,34 @@
+:root {
+  --virtual-list-height: 100%;
+}
+
+.var-virtual-list {
+  /* 基础样式 */
+  height: var(--virtual-list-height);
+  overflow-y: auto;
+  position: relative;
+
+  /* 幽灵层 - 撑开滚动区域 */
+  &__phantom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  /* 内容层 - 实际渲染的可视区域 */
+  &__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  /* 列表项容器 */
+  &__item {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
diff --git a/packages/varlet-ui/types/styleVars.d.ts b/packages/varlet-ui/types/styleVars.d.ts
index 4d13dbad5b9..8503050ee4e 100644
--- a/packages/varlet-ui/types/styleVars.d.ts
+++ b/packages/varlet-ui/types/styleVars.d.ts
@@ -900,6 +900,7 @@ interface BaseStyleVars {
   '--uploader-disabled-color'?: string
   '--uploader-disabled-text-color'?: string
   '--uploader-loading-background'?: string
+  '--virtual-list-height'?: string
   '--watermark-content-color'?: string
   [key: PropertyKey]: string
 }
diff --git a/packages/varlet-ui/varlet.config.mjs b/packages/varlet-ui/varlet.config.mjs
index 681e8a61c49..01445230a26 100644
--- a/packages/varlet-ui/varlet.config.mjs
+++ b/packages/varlet-ui/varlet.config.mjs
@@ -328,6 +328,14 @@ export default defineConfig({
         doc: 'list',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'VirtualList 虚拟滚动列表',
+          'en-US': 'VirtualList',
+        },
+        doc: 'virtual-list',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': 'Swipe 轮播',

From 4c0ce3e4f739f9d7756ef1fce31aa66bc3c361ec Mon Sep 17 00:00:00 2001
From: xueyuan <xueyuan@vanchen.com>
Date: Fri, 27 Jun 2025 10:42:17 +0800
Subject: [PATCH 29/29] refactor(virtual-list): update comments and improve
 code readability

---
 .../src/virtual-list/VirtualList.vue          | 213 +++++++-----------
 1 file changed, 76 insertions(+), 137 deletions(-)

diff --git a/packages/varlet-ui/src/virtual-list/VirtualList.vue b/packages/varlet-ui/src/virtual-list/VirtualList.vue
index 32acaf98a9a..4fa84e1f5ba 100644
--- a/packages/varlet-ui/src/virtual-list/VirtualList.vue
+++ b/packages/varlet-ui/src/virtual-list/VirtualList.vue
@@ -1,8 +1,8 @@
 <template>
   <div ref="containerRef" :class="n()" :style="containerStyle" @scroll.passive="handleScroll">
-    <!-- 用于撑开滚动区域的幽灵层 -->
+    <!-- Phantom layer for scroll area -->
     <div :class="n('phantom')" :style="{ height: `${phantomHeight}px` }" />
-    <!-- 实际渲染的内容层 -->
+    <!-- Content layer for actual rendering -->
     <div ref="contentRef" :class="n('content')" :style="{ transform: getTransform() }">
       <div v-for="(item, index) in visibleData" :key="index" :class="n('item')">
         <slot :item="item" :index="start + index" />
@@ -17,43 +17,38 @@ import { call, toNumber } from '@varlet/shared'
 import { createNamespace } from '../utils/components'
 import { props } from './props'
 
-// 定义缓存位置接口
+const { name, n, classes } = createNamespace('virtual-list')
+
 interface CachedPosition {
-  index: number // 列表项索引
-  top: number // 距离顶部位置
-  bottom: number // 距离底部位置
-  height: number // 高度
-  dValue: number // 高度差值
+  index: number
+  top: number
+  bottom: number
+  height: number
+  dValue: number
 }
 
-// 比较结果枚举
 enum CompareResult {
-  eq = 1, // 相等
-  lt, // 小于
-  gt, // 大于
+  eq = 1,
+  lt,
+  gt,
 }
 
-/**
- * 二分查找算法
- * 用于快速定位滚动位置对应的列表项索引
- */
-function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult) {
+// Binary search for fast index lookup
+function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult): number {
   let start = 0
   let end = list.length - 1
-  let tempIndex = null
+  let tempIndex = 0
 
   while (start <= end) {
     tempIndex = Math.floor((start + end) / 2)
     const midValue = list[tempIndex]
-
-    const compareRes: CompareResult = compareFunc(midValue, value)
+    const compareRes = compareFunc(midValue, value)
     if (compareRes === CompareResult.eq) {
       return tempIndex
     }
-
     if (compareRes === CompareResult.lt) {
       start = tempIndex + 1
-    } else if (compareRes === CompareResult.gt) {
+    } else {
       end = tempIndex - 1
     }
   }
@@ -61,26 +56,24 @@ function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, val
   return tempIndex
 }
 
-const { name, n } = createNamespace('virtual-list')
-
 export default defineComponent({
   name,
   props,
   setup(props) {
-    // DOM引用
-    const containerRef = ref<HTMLElement | null>(null) // 容器元素
-    const contentRef = ref<HTMLElement | null>(null) // 内容元素
+    // DOM refs
+    const containerRef = ref<HTMLElement | null>(null)
+    const contentRef = ref<HTMLElement | null>(null)
 
-    // 虚拟滚动状态
+    // Virtual scroll state
     const state = reactive({
-      start: 0, // 当前渲染的起始索引
-      originStartIndex: 0, // 原始起始索引（不含缓冲区）
-      scrollTop: 0, // 当前滚动位置
-      cachePositions: [] as CachedPosition[], // 缓存的位置信息
-      phantomHeight: 0, // 幽灵层高度
+      start: 0,
+      originStartIndex: 0,
+      scrollTop: 0,
+      cachePositions: [] as CachedPosition[],
+      phantomHeight: 0,
     })
 
-    // 容器样式
+    // Computed container style
     const containerStyle = computed(() => {
       if (props.containerHeight) {
         return {
@@ -90,7 +83,7 @@ export default defineComponent({
       return {}
     })
 
-    // 可见列表项数量
+    // Number of visible items
     const visibleCount = computed(() => {
       if (!containerRef.value) {
         return 0
@@ -98,35 +91,25 @@ export default defineComponent({
       return Math.ceil(containerRef.value.clientHeight / toNumber(props.itemHeight))
     })
 
-    // 结束索引（起始索引 + 可见数量 + 缓冲区大小）
+    // End index (start + visible + buffer)
     const end = computed(() => {
       return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, props.data.length)
     })
 
-    // 可见数据
+    // Visible data
     const visibleData = computed(() => {
       return props.data.slice(state.start, end.value)
     })
 
-    /**
-     * 获取内容层的变换样式
-     * 根据起始索引计算偏移量
-     */
+    // Get transform style for content layer
     const getTransform = () => {
-      if (contentRef.value) {
-        return `translate3d(0, ${state.start >= 1 ? state.cachePositions[state.start - 1].bottom : 0}px, 0)`
-      }
-      return 'translate3d(0, 0, 0)'
+      return `translate3d(0, ${state.start >= 1 ? state.cachePositions[state.start - 1].bottom : 0}px, 0)`
     }
 
-    /**
-     * 初始化缓存位置
-     * 根据列表项高度计算每项的位置信息
-     */
-    const initCachedPosition = () => {
+    // Initialize cached positions
+    function initCachedPosition() {
       state.cachePositions = []
       const itemHeight = toNumber(props.itemHeight)
-
       for (let i = 0; i < props.data.length; ++i) {
         state.cachePositions[i] = {
           index: i,
@@ -136,100 +119,65 @@ export default defineComponent({
           dValue: 0,
         }
       }
-
       state.phantomHeight = props.data.length * itemHeight
     }
 
-    /**
-     * 更新缓存位置
-     * 根据实际渲染的DOM元素高度更新位置信息
-     */
-    const updateCachedPosition = () => {
+    // Update cached positions based on actual DOM height
+    function updateCachedPosition() {
       if (!contentRef.value) {
         return
       }
-
-      // 获取内容层中的所有元素节点
       const nodes = Array.from(contentRef.value.childNodes).filter((node: Node) => node.nodeType === 1) as HTMLElement[]
-
-      // 更新每个可见元素的高度信息
-      nodes.forEach((node: HTMLElement, index: number) => {
-        if (!node) {
-          return
-        }
+      nodes.forEach((node, index) => {
         const height = node.offsetHeight
-        const oldHeight = state.cachePositions[index + state.start].height
-        const dValue = oldHeight - height
-
+        const pos = state.cachePositions[index + state.start]
+        const dValue = pos.height - height
         if (dValue) {
-          state.cachePositions[index + state.start].bottom -= dValue
-          state.cachePositions[index + state.start].height = height
-          state.cachePositions[index + state.start].dValue = dValue
+          pos.bottom -= dValue
+          pos.height = height
+          pos.dValue = dValue
         }
       })
-
-      // 更新后续元素的位置信息
+      // Update following positions
       const startIndex = state.start
-      const cachedPositionsLen = state.cachePositions.length
+      const len = state.cachePositions.length
       let cumulativeDiffHeight = state.cachePositions[startIndex].dValue
       state.cachePositions[startIndex].dValue = 0
-
-      for (let i = startIndex + 1; i < cachedPositionsLen; ++i) {
-        const item = state.cachePositions[i]
-
-        state.cachePositions[i].top = state.cachePositions[i - 1].bottom
-        state.cachePositions[i].bottom = state.cachePositions[i].bottom - cumulativeDiffHeight
-
-        if (item.dValue !== 0) {
-          cumulativeDiffHeight += item.dValue
-          item.dValue = 0
+      for (let i = startIndex + 1; i < len; ++i) {
+        const prev = state.cachePositions[i - 1]
+        const curr = state.cachePositions[i]
+        curr.top = prev.bottom
+        curr.bottom = curr.bottom - cumulativeDiffHeight
+        if (curr.dValue !== 0) {
+          cumulativeDiffHeight += curr.dValue
+          curr.dValue = 0
         }
       }
-
-      // 更新幽灵层高度
-      const height = state.cachePositions[cachedPositionsLen - 1]?.bottom || 0
-      state.phantomHeight = height
+      // Update phantom height
+      state.phantomHeight = state.cachePositions[len - 1]?.bottom || 0
     }
 
-    /**
-     * 获取滚动位置对应的起始索引
-     * 使用二分查找算法快速定位
-     */
-    const getStartIndex = (scrollTop = 0) => {
-      let idx = binarySearch<CachedPosition, number>(
-        state.cachePositions,
-        scrollTop,
-        (currentValue: CachedPosition, targetValue: number) => {
-          const currentCompareValue = currentValue.bottom
-          if (currentCompareValue === targetValue) {
-            return CompareResult.eq
-          }
-
-          if (currentCompareValue < targetValue) {
-            return CompareResult.lt
-          }
-
-          return CompareResult.gt
-        },
-      ) as number
-
-      if (idx === null) {
-        return 0
-      }
-
+    // Get start index for given scrollTop
+    function getStartIndex(scrollTop = 0) {
+      let idx = binarySearch<CachedPosition, number>(state.cachePositions, scrollTop, (current, target) => {
+        const val = current.bottom
+        if (val === target) {
+          return CompareResult.eq
+        }
+        if (val < target) {
+          return CompareResult.lt
+        }
+        return CompareResult.gt
+      })
       const targetItem = state.cachePositions[idx]
       if (targetItem && targetItem.bottom < scrollTop) {
         idx += 1
       }
-
       return idx
     }
 
-    /**
-     * 重置虚拟滚动参数
-     * 当数据发生变化时调用
-     */
-    const resetAllVirtualParam = () => {
+    // Reset all virtual scroll params
+    function resetAllVirtualParam() {
       state.originStartIndex = 0
       state.start = 0
       state.scrollTop = 0
@@ -239,37 +187,27 @@ export default defineComponent({
       initCachedPosition()
     }
 
-    /**
-     * 处理滚动事件
-     * 更新起始索引并触发回调
-     */
-    const handleScroll = (e: Event) => {
+    // Handle scroll event
+    function handleScroll(e: Event) {
       if (!containerRef.value) {
         return
       }
-
       const scrollTop = containerRef.value.scrollTop
       const { originStartIndex } = state
       const currentIndex = getStartIndex(scrollTop)
-
       if (currentIndex !== originStartIndex) {
         state.originStartIndex = currentIndex
         state.start = Math.max(state.originStartIndex - props.bufferSize, 0)
       }
-
       state.scrollTop = scrollTop
       call(props.onScroll, e)
     }
 
-    /**
-     * 滚动到指定索引位置
-     * 对外暴露的方法
-     */
-    const scrollTo = (index: number) => {
+    // Scroll to specified index
+    function scrollTo(index: number) {
       if (!containerRef.value || index < 0 || index >= props.data.length) {
         return
       }
-
       if (state.cachePositions[index]) {
         containerRef.value.scrollTop = state.cachePositions[index].top
       } else {
@@ -278,7 +216,7 @@ export default defineComponent({
       }
     }
 
-    // 监听数据变化，重置虚拟滚动参数
+    // Watch data changes, reset virtual params
     watch(
       () => props.data,
       (newVal, oldVal) => {
@@ -289,7 +227,7 @@ export default defineComponent({
       { deep: true },
     )
 
-    // 监听起始索引变化，更新缓存位置
+    // Watch start index, update cached positions
     watch(
       () => state.start,
       () => {
@@ -299,13 +237,14 @@ export default defineComponent({
       },
     )
 
-    // 组件挂载后初始化缓存位置
+    // Init cached positions on mount
     onMounted(() => {
       initCachedPosition()
     })
 
     return {
       n,
+      classes,
       containerRef,
       contentRef,
       containerStyle,