From 9df8317ece7517a72da19a0ea1c90ffb7a552a1b Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 20 Feb 2023 00:05:54 +0800
Subject: [PATCH] refactor: segmented #6286

---
 components/_util/type.ts                 |  14 +-
 components/segmented/demo/basic.vue      |   6 +-
 components/segmented/demo/block.vue      |   6 +-
 components/segmented/demo/controlled.vue |  35 ---
 components/segmented/demo/custom.vue     | 133 ++++++-----
 components/segmented/demo/disabled.vue   |  10 +-
 components/segmented/demo/dynamic.vue    |   8 +-
 components/segmented/demo/icon.vue       |  49 ----
 components/segmented/demo/index.vue      |   6 +-
 components/segmented/demo/size.vue       |  14 +-
 components/segmented/index.en-US.md      |  31 ++-
 components/segmented/index.ts            |   8 +-
 components/segmented/index.zh-CN.md      |  29 ++-
 components/segmented/src/MotionThumb.tsx | 161 +++++++++++++
 components/segmented/src/segmented.tsx   | 273 ++++++++++++-----------
 components/segmented/style/index.ts      |  85 +++----
 typings/global.d.ts                      |   2 +
 17 files changed, 527 insertions(+), 343 deletions(-)
 delete mode 100644 components/segmented/demo/controlled.vue
 delete mode 100644 components/segmented/demo/icon.vue
 create mode 100644 components/segmented/src/MotionThumb.tsx

diff --git a/components/_util/type.ts b/components/_util/type.ts
index 5bed7f248..a48ad6f66 100644
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -59,8 +59,18 @@ export function functionType<T = () => {}>(defaultVal?: T) {
   return { type: Function as PropType<T>, default: defaultVal as T };
 }
 
-export function anyType<T = any>(defaultVal?: T) {
-  return { validator: () => true, default: defaultVal as T } as unknown as { type: PropType<T> };
+export function anyType<T = any>(defaultVal?: T, required?: boolean) {
+  const type = { validator: () => true, default: defaultVal as T } as unknown;
+  return required
+    ? (type as {
+        type: PropType<T>;
+        default: T;
+        required: true;
+      })
+    : (type as {
+        default: T;
+        type: PropType<T>;
+      });
 }
 export function vNodeType<T = VueNode>() {
   return { validator: () => true } as unknown as { type: PropType<T> };
diff --git a/components/segmented/demo/basic.vue b/components/segmented/demo/basic.vue
index 229460011..a6c24ae96 100644
--- a/components/segmented/demo/basic.vue
+++ b/components/segmented/demo/basic.vue
@@ -15,17 +15,19 @@ The most basic usage.
 </docs>
 
 <template>
-  <a-segmented :options="data" />
+  <a-segmented v-model:value="value" :options="data" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
     const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
+    const value = ref(data[0]);
     return {
       data,
+      value,
     };
   },
 });
diff --git a/components/segmented/demo/block.vue b/components/segmented/demo/block.vue
index 4a94c9e9e..8e49394bd 100644
--- a/components/segmented/demo/block.vue
+++ b/components/segmented/demo/block.vue
@@ -14,17 +14,19 @@ title:
 `block` property will make the `Segmented` fit to its parent width.
 </docs>
 <template>
-  <a-segmented block :options="data" />
+  <a-segmented v-model:value="value" block :options="data" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
     const data = reactive([123, 456, 'longtext-longtext-longtext-longtext']);
+    const value = ref(data[0]);
     return {
       data,
+      value,
     };
   },
 });
diff --git a/components/segmented/demo/controlled.vue b/components/segmented/demo/controlled.vue
deleted file mode 100644
index 602315048..000000000
--- a/components/segmented/demo/controlled.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<docs>
----
-order: 4
-title:
-  zh-CN: 受控模式
-  en-US: Controlled mode
----
-
-## zh-CN
-
-受控的 Segmented
-
-## en-US
-Controlled Segmented.
-</docs>
-<template>
-  <div>
-    <a-segmented :options="data" default-value="1" @change="handle" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const data = reactive(['Map', 'Transit', 'Satellite']);
-    const handle = v => console.log(v);
-    return {
-      data,
-      handle,
-    };
-  },
-});
-</script>
diff --git a/components/segmented/demo/custom.vue b/components/segmented/demo/custom.vue
index 09165d99d..02787cf76 100644
--- a/components/segmented/demo/custom.vue
+++ b/components/segmented/demo/custom.vue
@@ -14,80 +14,103 @@ title:
 Custom each Segmented Item.
 </docs>
 <template>
-  <a-segmented :options="data">
-    <template #title="index">
-      <template v-if="index === 0">
-        <div style="padding: 4px 4px">
-          <a-avatar src="https://joeschmoe.io/api/v1/random" />
-          <div>User 1</div>
-        </div>
-      </template>
-      <template v-if="index === 1">
-        <div style="padding: 4px 4px">
-          <a-avatar style="background-color: #f56a00">K</a-avatar>
-          <div>User 2</div>
-        </div>
-      </template>
-      <template v-if="index === 2">
-        <div style="padding: 4px 4px">
-          <a-avatar style="background-color: #1890ff">
-            <template #icon><UserOutlined /></template>
+  <a-segmented v-model:value="value" :options="data">
+    <template #label="{ value: val, payload = {} }">
+      <div style="padding: 4px 4px">
+        <template v-if="payload.icon">
+          <a-avatar :src="payload.src" :style="payload.style">
+            <template #icon><component :is="payload.icon" /></template>
+            {{ payload.content }}
           </a-avatar>
-          <div>User 3</div>
-        </div>
-      </template>
+        </template>
+        <template v-else>
+          <a-avatar :src="payload.src" :style="payload.style">
+            {{ payload.content }}
+          </a-avatar>
+        </template>
+        <div>{{ val }}</div>
+      </div>
     </template>
   </a-segmented>
   <br />
   <br />
-  <a-segmented :options="options2">
-    <template #title="index">
-      <template v-if="index === 0">
-        <div style="padding: 4px 4px">
-          <div>Spring</div>
-          <div>Jan-Mar</div>
-        </div>
-      </template>
-      <template v-if="index === 1">
-        <div style="padding: 4px 4px">
-          <div>Summer</div>
-          <div>Apr-Jun</div>
-        </div>
-      </template>
-      <template v-if="index === 2">
-        <div style="padding: 4px 4px">
-          <div>Autumn</div>
-          <div>Jul-Sept</div>
-        </div>
-      </template>
-      <template v-if="index === 3">
-        <div style="padding: 4px 4px">
-          <div>Winter</div>
-          <div>Oct-Dec</div>
-        </div>
-      </template>
+  <a-segmented v-model:value="value2" :options="options2">
+    <template #label="{ payload }">
+      <div style="padding: 4px 4px">
+        <div>{{ payload.title }}</div>
+        <div>{{ payload.subTitle }}</div>
+      </div>
     </template>
   </a-segmented>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { UserOutlined } from '@ant-design/icons-vue';
 import ASegmented from 'ant-design-vue/es/segmented/src/segmented';
-
 export default defineComponent({
   components: { ASegmented, UserOutlined },
   setup() {
-    const data = reactive([{ value: 'user1' }, { value: 'user2' }, { value: 'user3' }]);
-    const options2 = reactive([
-      { value: 'spring' },
-      { value: 'summer' },
-      { value: 'autumn' },
-      { value: 'winter' },
+    const data = ref([
+      {
+        value: 'user1',
+        payload: {
+          src: 'https://joeschmoe.io/api/v1/random',
+          style: { backgroundColor: '#f56a00' },
+        },
+      },
+      {
+        value: 'user2',
+        payload: {
+          style: { backgroundColor: '#f56a00' },
+          content: 'K',
+        },
+      },
+      {
+        value: 'user3',
+        payload: {
+          icon: UserOutlined,
+          style: { backgroundColor: '#f56a00' },
+        },
+      },
     ]);
+    const options2 = ref([
+      {
+        value: 'spring',
+        payload: {
+          title: 'Spring',
+          subTitle: 'Jan-Mar',
+        },
+      },
+      {
+        value: 'summer',
+        payload: {
+          title: 'Summer',
+          subTitle: 'Apr-Jun',
+        },
+      },
+      {
+        value: 'autumn',
+        payload: {
+          title: 'Autumn',
+          subTitle: 'Jul-Sept',
+        },
+      },
+      {
+        value: 'winter',
+        payload: {
+          title: 'Winter',
+          subTitle: 'Oct-Dec',
+        },
+      },
+    ]);
+    const value = ref('user1');
+    const value2 = ref('spring');
     return {
       data,
       options2,
+      value,
+      value2,
     };
   },
 });
diff --git a/components/segmented/demo/disabled.vue b/components/segmented/demo/disabled.vue
index ac7ed75cc..654a8eff7 100644
--- a/components/segmented/demo/disabled.vue
+++ b/components/segmented/demo/disabled.vue
@@ -15,15 +15,15 @@ Disabled Segmented.
 </docs>
 <template>
   <div>
-    <a-segmented disabled :options="data" />
+    <a-segmented v-model:value="value" disabled :options="data" />
     <br />
     <br />
-    <a-segmented :options="data2" />
+    <a-segmented v-model:value="value2" :options="data2" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 
 export default defineComponent({
   setup() {
@@ -35,9 +35,13 @@ export default defineComponent({
       { value: 'Quarterly', disabled: true },
       'Yearly',
     ]);
+    const value = ref(data[0]);
+    const value2 = ref('Daily');
     return {
       data,
       data2,
+      value,
+      value2,
     };
   },
 });
diff --git a/components/segmented/demo/dynamic.vue b/components/segmented/demo/dynamic.vue
index b888fa3d2..65264485b 100644
--- a/components/segmented/demo/dynamic.vue
+++ b/components/segmented/demo/dynamic.vue
@@ -14,10 +14,10 @@ title:
 Load dynamically.
 </docs>
 <template>
-  <a-segmented :options="data"></a-segmented>
+  <a-segmented v-model:value="value" :options="data"></a-segmented>
   <br />
   <br />
-  <a-button type="primary" @click="loadMore" :disabled="isDisabled">Load More</a-button>
+  <a-button type="primary" :disabled="isDisabled" @click="loadMore">Load More</a-button>
 </template>
 
 <script lang="ts">
@@ -25,15 +25,17 @@ import { defineComponent, reactive, ref } from 'vue';
 export default defineComponent({
   setup() {
     const data = reactive(['Daily', 'Weekly', 'Monthly']);
-    const isDisabled = ref<boolean>(false);
+    const isDisabled = ref(false);
     const loadMore = () => {
       data.push(...['Quarterly', 'Yearly']);
       isDisabled.value = true;
     };
+    const value = ref(data[0]);
     return {
       data,
       loadMore,
       isDisabled,
+      value,
     };
   },
 });
diff --git a/components/segmented/demo/icon.vue b/components/segmented/demo/icon.vue
deleted file mode 100644
index b48685158..000000000
--- a/components/segmented/demo/icon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<docs>
----
-order: 7
-title:
-  zh-CN: 设置图标
-  en-US: With Icon
----
-
-## zh-CN
-
-给 Segmented Item 设置 Icon。
-
-## en-US
-Set `icon` for Segmented Item.
-</docs>
-<template>
-  <a-segmented :options="data">
-    <template #icon="index">
-      <template v-if="index == 0">
-        <unordered-list-outlined />
-      </template>
-      <template v-if="index == 1">
-        <appstore-outlined />
-      </template>
-    </template>
-  </a-segmented>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
-import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
-
-export default defineComponent({
-  components: { UnorderedListOutlined, AppstoreOutlined },
-  setup() {
-    const data = reactive([
-      {
-        value: 'List',
-      },
-      {
-        value: 'Kanban',
-      },
-    ]);
-    return {
-      data,
-    };
-  },
-});
-</script>
diff --git a/components/segmented/demo/index.vue b/components/segmented/demo/index.vue
index a43e7e60c..92790b2e1 100644
--- a/components/segmented/demo/index.vue
+++ b/components/segmented/demo/index.vue
@@ -3,11 +3,9 @@
     <basic />
     <block />
     <disabled />
-    <controlled />
     <custom />
     <dynamic />
     <size />
-    <icon />
   </demo-sort>
 </template>
 
@@ -18,14 +16,12 @@ import US from '../index.en-US.md';
 import Basic from './basic.vue';
 import Block from './block.vue';
 import Disabled from './disabled.vue';
-import Controlled from './controlled.vue';
 import Custom from './custom.vue';
 import Dynamic from './dynamic.vue';
 import Size from './size.vue';
-import Icon from './icon.vue';
 
 export default defineComponent({
-  components: { Icon, Size, Dynamic, Custom, Controlled, Disabled, Block, Basic },
+  components: { Size, Dynamic, Custom, Disabled, Block, Basic },
   category: 'Components',
   subtitle: '分段控制器',
   type: 'Data Display',
diff --git a/components/segmented/demo/size.vue b/components/segmented/demo/size.vue
index b22197f1a..461538207 100644
--- a/components/segmented/demo/size.vue
+++ b/components/segmented/demo/size.vue
@@ -14,23 +14,29 @@ title:
 There are three sizes of an a-segmented: `large` (40px), `default` (32px) and `small` (24px).
 </docs>
 <template>
-  <a-segmented :options="data" size="large" />
+  <a-segmented v-model:value="value" :options="data" size="large" />
   <br />
   <br />
-  <a-segmented :options="data" />
+  <a-segmented v-model:value="value2" :options="data" />
   <br />
   <br />
-  <a-segmented :options="data" size="small" />
+  <a-segmented v-model:value="value3" :options="data" size="small" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, ref, reactive } from 'vue';
 
 export default defineComponent({
   setup() {
     const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']);
+    const value = ref(data[0]);
+    const value2 = ref(data[0]);
+    const value3 = ref(data[0]);
     return {
       data,
+      value,
+      value2,
+      value3,
     };
   },
 });
diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md
index 9a22d29f8..d3200147b 100644
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@@ -13,14 +13,35 @@ Segmented Controls.
 
 ## API
 
-### Segmented
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | block | Option to fit width to its parent\'s width | boolean | false |  |
-| defaultValue | Default selected value | string \| number |  |  |
 | disabled | Disable all segments | boolean | false |  |
-| change | The callback function that is triggered when the state changes | function(value: string \| number) |  |  |
-| options | Set children optional | string[] \| number[] \| Array<{ value?: string disabled?: boolean }> | [] |  |
+| options | Set children optional | string[] \| number[] \| SegmentedOption[] | [] |  |
 | size | The size of the Segmented. | `large` \| `middle` \| `small` | - |  |
 | value | Currently selected value | string \| number |  |  |
+| label | custom label by slot | v-slot:label="SegmentedBaseOption" |  |  |
+
+### events
+
+| Events Name | Description | Arguments |  |
+| --- | --- | --- | --- |
+| change | The callback function that is triggered when the state changes | function(value: string \| number) | - |
+
+#### SegmentedBaseOption、 SegmentedOption
+
+```ts
+interface SegmentedBaseOption {
+  value: string | number;
+  disabled?: boolean;
+  payload?: any; // payload more data
+  /**
+   * html `title` property for label
+   */
+  title?: string;
+  className?: string;
+}
+interface SegmentedOption extends SegmentedBaseOption {
+  label?: VueNode | ((option: SegmentedBaseOption) => VueNode);
+}
+```
diff --git a/components/segmented/index.ts b/components/segmented/index.ts
index 02d21bc86..fa9ae38c0 100644
--- a/components/segmented/index.ts
+++ b/components/segmented/index.ts
@@ -1,10 +1,6 @@
-import type { App } from 'vue';
 import Segmented from './src';
 import type { SegmentedProps } from './src';
+import { withInstall } from '../_util/type';
 
-Segmented.install = function (app: App) {
-  app.component(Segmented.name, Segmented);
-  return app;
-};
-export default Segmented;
+export default withInstall(Segmented);
 export type { SegmentedProps };
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index 70faa863a..501b648a7 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -19,9 +19,32 @@ title: Segmented
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | block | 将宽度调整为父元素宽度的选项 | boolean | 无 |  |
-| defaultValue | 默认选中的值 | string \| number |  |  |
 | disabled | 是否禁用 | boolean | false |  |
-| change | 选项变化时的回调函数 | function(value: string \| number) |  |  |
-| options | 数据化配置选项内容 | string[] \| number[] \| Array<{ value?: string disabled?: boolean }> | [] |  |
+| options | 数据化配置选项内容 | string[] \| number[] \| SegmentedOption[] | [] |  |
 | size | 控件尺寸 | `large` \| `middle` \| `small` | - |  |
 | value | 当前选中的值 | string \| number |  |  |
+| label | 使用插槽自定义 label | v-slot:label="SegmentedBaseOption" |  |  |
+
+### 事件
+
+| 事件名称 | 说明                 | 回调参数                          |     |
+| -------- | -------------------- | --------------------------------- | --- |
+| change   | 选项变化时的回调函数 | function(value: string \| number) | -   |
+
+#### SegmentedBaseOption、SegmentedOption
+
+```ts
+interface SegmentedBaseOption {
+  value: string | number;
+  disabled?: boolean;
+  payload?: any; // payload more data
+  /**
+   * html `title` property for label
+   */
+  title?: string;
+  className?: string;
+}
+interface SegmentedOption extends SegmentedBaseOption {
+  label?: VueNode | ((option: SegmentedBaseOption) => VueNode);
+}
+```
diff --git a/components/segmented/src/MotionThumb.tsx b/components/segmented/src/MotionThumb.tsx
new file mode 100644
index 000000000..77f5a1ccb
--- /dev/null
+++ b/components/segmented/src/MotionThumb.tsx
@@ -0,0 +1,161 @@
+import { addClass, removeClass } from 'ant-design-vue/es/vc-util/Dom/class';
+import type { CSSProperties, Ref, TransitionProps } from 'vue';
+import { onBeforeUnmount, nextTick, Transition, watch, defineComponent, computed, ref } from 'vue';
+import { anyType } from '../../_util/type';
+import type { SegmentedValue } from './segmented';
+
+type ThumbReact = {
+  left: number;
+  right: number;
+  width: number;
+} | null;
+
+export interface MotionThumbInterface {
+  value: SegmentedValue;
+  getValueIndex: (value: SegmentedValue) => number;
+  prefixCls: string;
+  motionName: string;
+  onMotionStart: VoidFunction;
+  onMotionEnd: VoidFunction;
+  direction?: 'ltr' | 'rtl';
+}
+
+const calcThumbStyle = (targetElement: HTMLElement | null | undefined): ThumbReact =>
+  targetElement
+    ? {
+        left: targetElement.offsetLeft,
+        right:
+          (targetElement.parentElement!.clientWidth as number) -
+          targetElement.clientWidth -
+          targetElement.offsetLeft,
+        width: targetElement.clientWidth,
+      }
+    : null;
+
+const toPX = (value?: number) => (value !== undefined ? `${value}px` : undefined);
+
+const MotionThumb = defineComponent({
+  props: {
+    value: anyType<SegmentedValue>(),
+    getValueIndex: anyType<(value: SegmentedValue) => number>(),
+    prefixCls: anyType<string>(),
+    motionName: anyType<string>(),
+    onMotionStart: anyType<VoidFunction>(),
+    onMotionEnd: anyType<VoidFunction>(),
+    direction: anyType<'ltr' | 'rtl'>(),
+    containerRef: anyType<Ref<HTMLDivElement>>(),
+  },
+  emits: ['motionStart', 'motionEnd'],
+  setup(props, { emit }) {
+    const thumbRef = ref<HTMLDivElement>();
+    // =========================== Effect ===========================
+    const findValueElement = (val: SegmentedValue) => {
+      const index = props.getValueIndex(val);
+
+      const ele = props.containerRef.value?.querySelectorAll<HTMLDivElement>(
+        `.${props.prefixCls}-item`,
+      )[index];
+      return ele?.offsetParent && ele;
+    };
+
+    const prevStyle = ref<ThumbReact>(null);
+    const nextStyle = ref<ThumbReact>(null);
+
+    watch(
+      () => props.value,
+      (value, prevValue) => {
+        const prev = findValueElement(prevValue);
+        const next = findValueElement(value);
+
+        const calcPrevStyle = calcThumbStyle(prev);
+        const calcNextStyle = calcThumbStyle(next);
+
+        prevStyle.value = calcPrevStyle;
+        nextStyle.value = calcNextStyle;
+
+        if (prev && next) {
+          emit('motionStart');
+        } else {
+          emit('motionEnd');
+        }
+      },
+      { flush: 'post' },
+    );
+
+    const thumbStart = computed(() =>
+      props.direction === 'rtl'
+        ? toPX(-(prevStyle.value?.right as number))
+        : toPX(prevStyle.value?.left as number),
+    );
+    const thumbActive = computed(() =>
+      props.direction === 'rtl'
+        ? toPX(-(nextStyle.value?.right as number))
+        : toPX(nextStyle.value?.left as number),
+    );
+
+    // =========================== Motion ===========================
+    let timeid: any;
+    const onAppearStart: TransitionProps['onBeforeEnter'] = (el: HTMLDivElement) => {
+      clearTimeout(timeid);
+      nextTick(() => {
+        if (el) {
+          el.style.transform = `translateX(var(--thumb-start-left))`;
+          el.style.width = `var(--thumb-start-width)`;
+        }
+      });
+    };
+
+    const onAppearActive: TransitionProps['onEnter'] = (el: HTMLDivElement) => {
+      timeid = setTimeout(() => {
+        if (el) {
+          addClass(el, `${props.motionName}-appear-active`);
+          el.style.transform = `translateX(var(--thumb-active-left))`;
+          el.style.width = `var(--thumb-active-width)`;
+        }
+      });
+    };
+    const onAppearEnd: TransitionProps['onAfterEnter'] = (el: HTMLDivElement) => {
+      prevStyle.value = null;
+      nextStyle.value = null;
+      if (el) {
+        el.style.transform = null;
+        el.style.width = null;
+        removeClass(el, `${props.motionName}-appear-active`);
+      }
+      emit('motionEnd');
+    };
+    const mergedStyle = computed<CSSProperties>(() => ({
+      '--thumb-start-left': thumbStart.value,
+      '--thumb-start-width': toPX(prevStyle.value?.width),
+      '--thumb-active-left': thumbActive.value,
+      '--thumb-active-width': toPX(nextStyle.value?.width),
+    }));
+    onBeforeUnmount(() => {
+      clearTimeout(timeid);
+    });
+    return () => {
+      // It's little ugly which should be refactor when @umi/test update to latest jsdom
+      const motionProps = {
+        ref: thumbRef,
+        style: mergedStyle.value,
+        class: [`${props.prefixCls}-thumb`],
+      };
+
+      if (process.env.NODE_ENV === 'test') {
+        (motionProps as any)['data-test-style'] = JSON.stringify(mergedStyle.value);
+      }
+
+      return (
+        <Transition
+          appear
+          onBeforeEnter={onAppearStart}
+          onEnter={onAppearActive}
+          onAfterEnter={onAppearEnd}
+        >
+          {!prevStyle.value || !nextStyle.value ? null : <div {...motionProps}></div>}
+        </Transition>
+      );
+    };
+  },
+});
+export default MotionThumb;
diff --git a/components/segmented/src/segmented.tsx b/components/segmented/src/segmented.tsx
index 3ce995877..06221891a 100644
--- a/components/segmented/src/segmented.tsx
+++ b/components/segmented/src/segmented.tsx
@@ -1,151 +1,170 @@
-import { defineComponent, ref, toRefs, reactive, watch } from 'vue';
-import type { ExtractPropTypes, PropType } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
+import type { ExtractPropTypes, FunctionalComponent } from 'vue';
 import classNames from '../../_util/classNames';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
-import { getPropsSlot, initDefaultProps } from '../../_util/props-util';
+import { initDefaultProps } from '../../_util/props-util';
 import useStyle from '../style';
-
+import type { VueNode } from '../../_util/type';
+import { someType, arrayType, booleanType, stringType } from '../../_util/type';
+import type { ChangeEvent } from '../../_util/EventInterface';
+import MotionThumb from './MotionThumb';
+export type SegmentedValue = string | number;
 export type segmentedSize = 'large' | 'small';
-export interface SegmentedOptions {
-  value?: string;
+export interface SegmentedBaseOption {
+  value: string | number;
   disabled?: boolean;
+  payload?: any;
+  /**
+   * html `title` property for label
+   */
+  title?: string;
+  className?: string;
+}
+export interface SegmentedOption extends SegmentedBaseOption {
+  label?: VueNode | ((option: SegmentedBaseOption) => VueNode);
+}
+
+function normalizeOptions(options: (SegmentedOption | string | number)[]) {
+  return options.map(option => {
+    if (typeof option === 'object' && option !== null) {
+      return option;
+    }
+
+    return {
+      label: option?.toString(),
+      title: option?.toString(),
+      value: option as unknown as SegmentedBaseOption['value'],
+    };
+  });
 }
 export const segmentedProps = () => {
   return {
-    options: { type: Array as PropType<Array<SegmentedOptions | string | number>> },
-    defaultValue: { type: [Number, String] },
-    block: Boolean,
-    disabled: Boolean,
-    size: { type: String as PropType<segmentedSize> },
+    prefixCls: String,
+    options: arrayType<(SegmentedOption | string | number)[]>(),
+    block: booleanType(),
+    disabled: booleanType(),
+    size: stringType<segmentedSize>(),
+    value: { ...someType<SegmentedValue>([String, Number]), required: true },
+    motionName: String,
   };
 };
 export type SegmentedProps = Partial<ExtractPropTypes<ReturnType<typeof segmentedProps>>>;
+
+const SegmentedOption: FunctionalComponent<
+  SegmentedOption & { prefixCls: string; checked: boolean }
+> = (props, { slots, emit, attrs }) => {
+  const { value, disabled, payload, title, prefixCls, label = slots.label, checked } = props;
+  const handleChange = (event: InputEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    emit('change', event, value);
+  };
+
+  return (
+    <label
+      class={classNames(
+        {
+          [`${prefixCls}-item-disabled`]: disabled,
+        },
+        attrs.class,
+      )}
+    >
+      <input
+        class={`${prefixCls}-item-input`}
+        type="radio"
+        disabled={disabled}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <div class={`${prefixCls}-item-label`} title={typeof title === 'string' ? title : ''}>
+        {typeof label === 'function'
+          ? label({
+              value,
+              disabled,
+              payload,
+              title,
+            })
+          : label}
+      </div>
+    </label>
+  );
+};
+SegmentedOption.inheritAttrs = false;
+
 export default defineComponent({
   name: 'ASegmented',
   inheritAttrs: false,
-  props: { ...initDefaultProps(segmentedProps(), {}) },
-  emits: ['change', 'value'],
-  slots: ['icon', 'title'],
-  setup(props, { emit, slots }) {
-    const { prefixCls } = useConfigInject('segmented', props);
+  props: initDefaultProps(segmentedProps(), {
+    options: [],
+    motionName: 'thumb-motion',
+  }),
+  emits: ['change', 'update:value'],
+  slots: ['label'],
+  setup(props, { emit, slots, attrs }) {
+    const { prefixCls, direction, size } = useConfigInject('segmented', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const pre = prefixCls.value;
-    const { size } = toRefs(props);
-    const itemRef = ref([]);
-    const { options, disabled, defaultValue } = toRefs(props);
-    const segmentedItemInput = () => {
-      return <input type="radio" class={`${pre}-item-input`} disabled checked />;
-    };
-    const isDisabled = item => {
-      if (disabled.value || (typeof item == 'object' && item.disabled)) {
-        return segmentedItemInput();
+    const rootRef = ref<HTMLDivElement>();
+    const thumbShow = ref(false);
+
+    const segmentedOptions = computed(() => normalizeOptions(props.options));
+    const handleChange = (_event: ChangeEvent, val: SegmentedValue) => {
+      if (props.disabled) {
+        return;
       }
-    };
-    const currentItemKey = ref();
-    currentItemKey.value = defaultValue.value ? defaultValue.value : 0;
-    const toPX = (value: number) => (value !== undefined ? `${value}px` : undefined);
-    // 开始 or 停止
-    const thumbShow = ref(true);
-    const mergedStyle = reactive({
-      startLeft: '',
-      startWidth: '',
-      activeLeft: '',
-      activeWidth: '',
-    });
-    const handleSelectedChange = (item, index) => {
-      if (disabled.value || item.disabled) return;
-      currentItemKey.value = index;
-      emit('change', { value: item, key: index });
-    };
-    const icon = getPropsSlot(slots, props, 'icon');
-    const title = getPropsSlot(slots, props, 'title');
-    const iconNode = index => {
-      return icon ? (
-        <span class={classNames({ [`${pre}-item-icon`]: icon })}>{slots.icon?.(index)}</span>
-      ) : (
-        ''
-      );
-    };
-    const itemNode = (item, index) => {
-      if (title) {
-        return <div>{slots.title?.(index)}</div>;
-      }
-      return <span>{item.value}</span>;
-    };
-    const calcThumbStyle = index => {
-      return {
-        left: itemRef.value[index].children[0].offsetParent.offsetLeft,
-        width: itemRef.value[index].children[0].clientWidth,
-      };
-    };
-    const thumbStyle = reactive({
-      transform: '',
-      width: '',
-    });
-    const isValueType = item => {
-      return item instanceof Object ? (item.disabled ? true : false) : false;
-    };
-    watch(
-      () => currentItemKey.value,
-      (newValue, oldValue) => {
-        const prev = oldValue ? oldValue : defaultValue.value ? defaultValue.value : 0;
-        const next = newValue;
-        const calcPrevStyle = calcThumbStyle(prev);
-        const calcNextStyle = calcThumbStyle(next);
-        mergedStyle.startLeft = toPX(calcPrevStyle.left);
-        mergedStyle.startWidth = toPX(calcPrevStyle.width);
-        mergedStyle.activeLeft = toPX(calcNextStyle.left);
-        mergedStyle.activeWidth = toPX(calcNextStyle.width);
-        if (prev !== next) {
-          thumbStyle.transform = `translateX(${mergedStyle.activeLeft})`;
-          thumbStyle.width = `${mergedStyle.activeWidth}`;
-        }
-      },
-    );
-    const thumbNode = () => {
-      return thumbShow.value ? (
-        <div
-          class={classNames({
-            [`${pre}-thumb`]: thumbShow.value,
-            [`${pre}-thumb-motion-appear-active`]: thumbShow.value,
-          })}
-          style={thumbStyle}
-        />
-      ) : (
-        ''
-      );
+      emit('update:value', val);
+      emit('change', val);
     };
     return () => {
+      const pre = prefixCls.value;
       return wrapSSR(
         <div
-          class={classNames(pre, {
-            [hashId.value]: true,
-            [`${pre}-block`]: props.block,
-            [`${pre}-item-disabled`]: props.disabled,
-            [`${pre}-lg`]: size.value == 'large',
-            [`${pre}-sm`]: size.value == 'small',
-          })}
+          {...attrs}
+          class={classNames(
+            pre,
+            {
+              [hashId.value]: true,
+              [`${pre}-block`]: props.block,
+              [`${pre}-disabled`]: props.disabled,
+              [`${pre}-lg`]: size.value == 'large',
+              [`${pre}-sm`]: size.value == 'small',
+              [`${pre}-rtl`]: direction.value === 'rtl',
+            },
+            attrs.class,
+          )}
+          ref={rootRef}
         >
-          <div class={classNames(`${pre}-group`)}>
-            {thumbNode()}
-            {options.value.map((item, index) => {
-              return (
-                <label
-                  ref={ref => (itemRef.value[index] = ref)}
-                  class={classNames(`${pre}-item`, {
-                    [`${pre}-item-selected`]: currentItemKey.value == index,
-                    [`${pre}-item-disabled`]: disabled.value || isValueType(item),
-                  })}
-                  onClick={() => handleSelectedChange(item, index)}
-                >
-                  {isDisabled(item)}
-                  <div class={classNames(`${pre}-item-label`)} key={index}>
-                    {iconNode(index)}
-                    {typeof item == 'object' ? itemNode(item, index) : item}
-                  </div>
-                </label>
-              );
-            })}
+          <div class={`${pre}-group`}>
+            <MotionThumb
+              containerRef={rootRef}
+              prefixCls={pre}
+              value={props.value}
+              motionName={`${pre}-${props.motionName}`}
+              direction={direction.value}
+              getValueIndex={val => segmentedOptions.value.findIndex(n => n.value === val)}
+              onMotionStart={() => {
+                thumbShow.value = true;
+              }}
+              onMotionEnd={() => {
+                thumbShow.value = false;
+              }}
+            />
+            {segmentedOptions.value.map(segmentedOption => (
+              <SegmentedOption
+                key={segmentedOption.value}
+                prefixCls={pre}
+                class={classNames(segmentedOption.className, `${pre}-item`, {
+                  [`${pre}-item-selected`]:
+                    segmentedOption.value === props.value && !thumbShow.value,
+                })}
+                checked={segmentedOption.value === props.value}
+                onChange={handleChange}
+                {...segmentedOption}
+                disabled={!!props.disabled || !!segmentedOption.disabled}
+                v-slots={slots}
+              />
+            ))}
           </div>
         </div>,
       );
diff --git a/components/segmented/style/index.ts b/components/segmented/style/index.ts
index cd0fba445..7b232db8f 100644
--- a/components/segmented/style/index.ts
+++ b/components/segmented/style/index.ts
@@ -17,7 +17,7 @@ interface SegmentedToken extends FullToken<'Segmented'> {
 }
 
 // ============================== Mixins ==============================
-function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {
+function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
   return {
     [`${cls}, ${cls}:hover, ${cls}:focus`]: {
       color: token.colorTextDisabled,
@@ -26,7 +26,7 @@ function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {
   };
 }
 
-function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
+function getItemSelectedStyle(token: SegmentedToken): CSSObject {
   return {
     backgroundColor: token.bgColorSelected,
     boxShadow: token.boxShadow,
@@ -39,8 +39,8 @@ const segmentedTextEllipsisCss: CSSObject = {
   ...textEllipsis,
 };
 
-// ============================== Shared ==============================
-const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObject => {
+// ============================== Styles ==============================
+const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
   const { componentCls } = token;
 
   return {
@@ -63,16 +63,16 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
       },
 
       // RTL styles
-      '&&-rtl': {
+      [`&${componentCls}-rtl`]: {
         direction: 'rtl',
       },
 
       // block styles
-      '&&-block': {
+      [`&${componentCls}-block`]: {
         display: 'flex',
       },
 
-      [`&&-block ${componentCls}-item`]: {
+      [`&${componentCls}-block ${componentCls}-item`]: {
         flex: 1,
         minWidth: 0,
       },
@@ -86,7 +86,7 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
         borderRadius: token.borderRadiusSM,
 
         '&-selected': {
-          ...getSegmentedItemSelectedStyle(token),
+          ...getItemSelectedStyle(token),
           color: token.labelColorHover,
         },
 
@@ -97,7 +97,7 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
           height: '100%',
           top: 0,
           insetInlineStart: 0,
-          borderRadius: token.borderRadiusSM,
+          borderRadius: 'inherit',
           transition: `background-color ${token.motionDurationMid}`,
         },
 
@@ -118,7 +118,7 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
 
         // syntactic sugar to add `icon` for Segmented Item
         '&-icon + *': {
-          marginInlineEnd: token.marginSM / 2,
+          marginInlineStart: token.marginSM / 2,
         },
 
         '&-input': {
@@ -132,39 +132,9 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
         },
       },
 
-      // size styles
-      '&&-lg': {
-        borderRadius: token.borderRadiusLG,
-        [`${componentCls}-item-label`]: {
-          minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
-          lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
-          padding: `0 ${token.segmentedPaddingHorizontal}px`,
-          fontSize: token.fontSizeLG,
-        },
-        [`${componentCls}-item-selected`]: {
-          borderRadius: token.borderRadius,
-        },
-      },
-
-      '&&-sm': {
-        borderRadius: token.borderRadiusSM,
-        [`${componentCls}-item-label`]: {
-          minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
-          lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
-          padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
-        },
-        [`${componentCls}-item-selected`]: {
-          borderRadius: token.borderRadiusXS,
-        },
-      },
-
-      // disabled styles
-      ...segmentedDisabledItem(`&-disabled ${componentCls}-item`, token),
-      ...segmentedDisabledItem(`${componentCls}-item-disabled`, token),
-
       // thumb styles
       [`${componentCls}-thumb`]: {
-        ...getSegmentedItemSelectedStyle(token),
+        ...getItemSelectedStyle(token),
 
         position: 'absolute',
         insetBlockStart: 0,
@@ -180,6 +150,36 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
           },
       },
 
+      // size styles
+      [`&${componentCls}-lg`]: {
+        borderRadius: token.borderRadiusLG,
+        [`${componentCls}-item-label`]: {
+          minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
+          lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
+          padding: `0 ${token.segmentedPaddingHorizontal}px`,
+          fontSize: token.fontSizeLG,
+        },
+        [`${componentCls}-item, ${componentCls}-thumb`]: {
+          borderRadius: token.borderRadius,
+        },
+      },
+
+      [`&${componentCls}-sm`]: {
+        borderRadius: token.borderRadiusSM,
+        [`${componentCls}-item-label`]: {
+          minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
+          lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
+          padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
+        },
+        [`${componentCls}-item, ${componentCls}-thumb`]: {
+          borderRadius: token.borderRadiusXS,
+        },
+      },
+
+      // disabled styles
+      ...getItemDisabledStyle(`&-disabled ${componentCls}-item`, token),
+      ...getItemDisabledStyle(`${componentCls}-item-disabled`, token),
+
       // transition effect when `appear-active`
       [`${componentCls}-thumb-motion-appear-active`]: {
         transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, width ${token.motionDurationSlow} ${token.motionEaseInOut}`,
@@ -188,6 +188,7 @@ const genSharedSegmentedStyle: GenerateStyle<SegmentedToken> = (token): CSSObjec
     },
   };
 };
+
 // ============================== Export ==============================
 export default genComponentStyleHook('Segmented', token => {
   const {
@@ -210,5 +211,5 @@ export default genComponentStyleHook('Segmented', token => {
     bgColorHover: colorFillSecondary,
     bgColorSelected: colorBgElevated,
   });
-  return [genSharedSegmentedStyle(segmentedToken)];
+  return [genSegmentedStyle(segmentedToken)];
 });
diff --git a/typings/global.d.ts b/typings/global.d.ts
index d876d93f9..ea1102e25 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -163,6 +163,8 @@ declare module 'vue' {
 
     ASelect: typeof import('ant-design-vue')['Select'];
 
+    ASegmented: typeof import('ant-design-vue')['Segmented'];
+
     ASelectOptGroup: typeof import('ant-design-vue')['SelectOptGroup'];
 
     ASelectOption: typeof import('ant-design-vue')['SelectOption'];