From d22c32d364dc5903cb0ca26525b3c8c63365684b Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Tue, 15 Oct 2024 23:36:44 -0700
Subject: [PATCH] fix(tabs): [tabs] modify tabs demo bug (#2274)

* fix: modify tabs bug

* fix: modify e2e-test
---
 .../demos/pc/app/tabs/basic-usage-composition-api.vue |  2 +-
 examples/sites/demos/pc/app/tabs/basic-usage.spec.ts  | 11 ++++++++---
 examples/sites/demos/pc/app/tabs/basic-usage.vue      |  2 +-
 .../pc/app/tabs/tabs-separator-composition-api.vue    |  2 +-
 examples/sites/demos/pc/app/tabs/tabs-separator.vue   |  2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
index fdf506ef94..0e53e814fb 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 import { ref } from 'vue'
 import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 
-const activeName = ref('second')
+const activeName = ref('first')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts b/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
index bdaf228e73..7a89b8b6e3 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/tabs/basic-usage.spec.ts
@@ -13,10 +13,15 @@ test('基本用法', async ({ page }) => {
   const activeBar = tabs.locator('.tiny-tabs__active-bar')
 
   await expect(tabItems).toHaveCount(4)
-  await expect(tabItems).toHaveClass([/is-top/, /is-top is-active/, /is-top/, /is-top/])
-  await expect(content).toHaveText(/数据组件/)
+  await expect(tabItems).toHaveClass([
+    /tiny-tabs__item is-top is-active/,
+    /tiny-tabs__item is-top is-disabled/,
+    /tiny-tabs__item is-top/,
+    /tiny-tabs__item is-top/
+  ])
+  await expect(content).toHaveText(/表单组件/)
   await expect(activeBar).toHaveCSS('width', '64px')
-  await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 96, 0)')
+  await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await item1.click()
   await expect(item1).toHaveClass(/is-active/)
   await expect(activeBar).toHaveCSS('width', '64px')
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.vue b/examples/sites/demos/pc/app/tabs/basic-usage.vue
index 903119123c..c23b620aaf 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage.vue
@@ -19,7 +19,7 @@ export default {
   },
   data() {
     return {
-      activeName: 'second'
+      activeName: 'first'
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
index 823054394e..9d2df6b95a 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
@@ -24,7 +24,7 @@
       <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
-    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
       <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator.vue b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
index f9e8a814d5..65c95e5912 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
@@ -24,7 +24,7 @@
       <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
-    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px">
       <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>