From 352ada7e2e0835f8aef6c6522bd43a742936c76a Mon Sep 17 00:00:00 2001
From: unknown <1987250181@qq.com>
Date: Fri, 5 Dec 2025 00:08:55 +0800
Subject: [PATCH] feat(switch): add width property to support custom switch
 width

---
 examples/sites/demos/apis/switch.js           | 15 ++++++++
 .../demos/pc/app/switch/webdoc/switch.js      | 12 +++++++
 .../pc/app/switch/width-composition-api.vue   | 29 +++++++++++++++
 .../sites/demos/pc/app/switch/width.spec.ts   | 17 +++++++++
 examples/sites/demos/pc/app/switch/width.vue  | 35 +++++++++++++++++++
 packages/renderless/src/switch/vue.ts         | 19 ++++++++++
 packages/vue/src/switch/src/index.ts          |  3 +-
 packages/vue/src/switch/src/pc.vue            |  6 ++--
 8 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/switch/width-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/switch/width.spec.ts
 create mode 100644 examples/sites/demos/pc/app/switch/width.vue

diff --git a/examples/sites/demos/apis/switch.js b/examples/sites/demos/apis/switch.js
index 641fb956cf..9bb63d8222 100644
--- a/examples/sites/demos/apis/switch.js
+++ b/examples/sites/demos/apis/switch.js
@@ -111,6 +111,21 @@ export default {
           pcDemo: 'custom-true-false-value',
           mfDemo: ''
         },
+        {
+          name: 'width',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义开关的宽度',
+            'en-US': 'Define the width of the switch'
+          },
+          mode: ['pc'],
+          mfDemo: '',
+          pcDemo: 'width',
+          meta: {
+            stable: '3.28.0'
+          }
+        },
         {
           name: 'types',
           type: 'string',
diff --git a/examples/sites/demos/pc/app/switch/webdoc/switch.js b/examples/sites/demos/pc/app/switch/webdoc/switch.js
index e712a7f9a7..c822bf8970 100644
--- a/examples/sites/demos/pc/app/switch/webdoc/switch.js
+++ b/examples/sites/demos/pc/app/switch/webdoc/switch.js
@@ -28,6 +28,18 @@ export default {
       },
       codeFiles: ['mini-mode.vue']
     },
+    {
+      demoId: 'width',
+      name: {
+        'zh-CN': '自定义宽度',
+        'en-US': 'Custom width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>width</code> 设置开关的宽度。</p>',
+        'en-US': '<p>Set the width of the switch through <code>width</code> .</p>'
+      },
+      codeFiles: ['width.vue']
+    },
     {
       demoId: 'loading',
       name: {
diff --git a/examples/sites/demos/pc/app/switch/width-composition-api.vue b/examples/sites/demos/pc/app/switch/width-composition-api.vue
new file mode 100644
index 0000000000..bdfd3b5b98
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/width-composition-api.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinySwitch } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/switch/width.spec.ts b/examples/sites/demos/pc/app/switch/width.spec.ts
new file mode 100644
index 0000000000..66374c779a
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/width.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('width 属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#width')
+
+  const demo = page.locator('#width')
+  const switchBtns = demo.locator('.tiny-switch')
+
+  // 测试 number 类型的 width
+  const numberSwitch = switchBtns.nth(0)
+  await expect(numberSwitch).toHaveCSS('width', '150px')
+
+  // 测试 string 类型的 width
+  const stringSwitch = switchBtns.nth(1)
+  await expect(stringSwitch).toHaveCSS('width', '150px')
+})
diff --git a/examples/sites/demos/pc/app/switch/width.vue b/examples/sites/demos/pc/app/switch/width.vue
new file mode 100644
index 0000000000..177973a442
--- /dev/null
+++ b/examples/sites/demos/pc/app/switch/width.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinySwitch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch
+  }
+}
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/packages/renderless/src/switch/vue.ts b/packages/renderless/src/switch/vue.ts
index ebd0255bad..71a72dfea3 100644
--- a/packages/renderless/src/switch/vue.ts
+++ b/packages/renderless/src/switch/vue.ts
@@ -45,6 +45,25 @@ export const renderless = (
       } else {
         return props.showText
       }
+    }),
+    // 添加 switchStyle 计算属性
+    switchStyle: computed(() => {
+      if (props.width) {
+        return {
+          width: typeof props.width === 'number' ? `${props.width}px` : props.width
+        }
+      }
+      return {}
+    }),
+    // 添加 displayOnlyStyle 计算属性
+    displayOnlyStyle: computed(() => {
+      if (props.width) {
+        return {
+          width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+          display: 'inline-block'
+        }
+      }
+      return {}
     })
   })
 
diff --git a/packages/vue/src/switch/src/index.ts b/packages/vue/src/switch/src/index.ts
index 79a5005d3b..9154014c0d 100644
--- a/packages/vue/src/switch/src/index.ts
+++ b/packages/vue/src/switch/src/index.ts
@@ -69,7 +69,8 @@ export const switchProps = {
   loading: {
     type: Boolean,
     default: false
-  }
+  },
+  width: [Number, String]
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/switch/src/pc.vue b/packages/vue/src/switch/src/pc.vue
index ba20f2be95..82744ecb62 100644
--- a/packages/vue/src/switch/src/pc.vue
+++ b/packages/vue/src/switch/src/pc.vue
@@ -14,6 +14,7 @@
     v-if="!state.isDisplayOnly"
     :class="[state.wrapClasses, state.showText ? 'tiny-switch__text' : '']"
     :tabindex="tabindex"
+    :style="state.switchStyle"
     @click="toggle"
     @keydown.space="toggle"
     @keydown.enter="toggle"
@@ -36,7 +37,7 @@
       <slot v-if="state.currentValue === falseValue && !loading" name="inactive-icon"></slot>
     </span>
   </span>
-  <span v-else>
+  <span v-else :style="state.displayOnlyStyle">
     <slot v-if="state.currentValue === trueValue" name="open">{{ t('yes') }}</slot>
     <slot v-if="state.currentValue === falseValue" name="close">{{ t('no') }}</slot></span
   >
@@ -62,7 +63,8 @@ export default defineComponent({
     'showText',
     'beforeChange',
     'displayOnly',
-    'loading'
+    'loading',
+    'width'
   ],
   components: { IconLoading: IconLoadingShadow() },
   setup(props, context) {