test(checkbox): add disabled state demos and e2e test (#3835)

* fix(vue-renderless/checkbox): [checkbox] fix disabled state style issue

* fix(checkbox): [checkbox] fix disabled state style and improve disabled checked behavior test

* test(checkbox): fix disabled checkbox e2e test by using native click via evaluate

Author: IKEYCY

examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue

@@ -0,0 +1,10 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyCheckbox } from '@opentiny/vue'
+
+const checked = ref(true)
+</script>

examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用复选框', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('checkbox#disabled')
+
+  const checkbox = page.locator('#disabled .tiny-checkbox')
+
+  await expect(checkbox).toHaveClass(/is-disabled/)
+  await expect(checkbox).toHaveClass(/is-checked/)
+
+  // 在浏览器上下文调用原生 click，但先作类型判断，避免 TS 报错
+  await checkbox.evaluate((node: Element) => {
+    if (node instanceof HTMLElement) {
+      node.click()
+    }
+  })
+
+  // 状态应保持不变
+  await expect(checkbox).toHaveClass(/is-checked/)
+})

examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue

@@ -0,0 +1,18 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script>
+import { TinyCheckbox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox
+  },
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js

@@ -16,6 +16,19 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    // 禁用复选框
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 字段设置当前复选框是否为禁用状态。</p>',
+        'en-US': '<p>Set whether the current checkbox is disabled through the <code>disabled</code> field.</p>'
+      },
+      codeFiles: ['checkbox-disabled.vue']
+    },
     {
       demoId: 'checkbox-group',
       name: {