From 13bd69c69bbddd003e173cd52b55bd660e3a3107 Mon Sep 17 00:00:00 2001
From: chenxi <2465950588@qq.com>
Date: Wed, 6 Nov 2024 22:41:56 -0800
Subject: [PATCH] =?UTF-8?q?fix(docs):=20[anchor]=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=94=9A=E7=82=B9=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pc/app/anchor/change-composition-api.vue     |  4 ++--
 .../sites/demos/pc/app/anchor/change.spec.ts     | 12 ++++++++----
 examples/sites/demos/pc/app/anchor/change.vue    |  4 ++--
 .../app/anchor/set-container-composition-api.vue | 16 ++++++++++------
 .../sites/demos/pc/app/anchor/set-container.vue  | 16 ++++++++++------
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/examples/sites/demos/pc/app/anchor/change-composition-api.vue b/examples/sites/demos/pc/app/anchor/change-composition-api.vue
index 2312fe62fb..ab905f2589 100644
--- a/examples/sites/demos/pc/app/anchor/change-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/change-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 const links = ref([
   {
@@ -42,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  TinyModal.message({ message: `change${link}`, status: 'info' })
+  console.log(`当前锚点${link}`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/anchor/change.spec.ts b/examples/sites/demos/pc/app/anchor/change.spec.ts
index e82ef76cdd..d52d35269e 100644
--- a/examples/sites/demos/pc/app/anchor/change.spec.ts
+++ b/examples/sites/demos/pc/app/anchor/change.spec.ts
@@ -7,11 +7,15 @@ test('change事件', async ({ page }) => {
   const anchor = page.locator('.tiny-anchor')
   const link1 = anchor.getByRole('link', { name: '演示' })
   const link2 = anchor.getByRole('link', { name: 'change 事件' })
-  const modal = page.locator('.tiny-modal')
 
+  const values = [] as string[]
+  page.on('console', async (msg) => {
+    for (const arg of msg.args()) {
+      values.push(await arg.jsonValue())
+    }
+  })
   await link1.click()
-  await expect(modal).toHaveCount(1)
   await link2.click()
-  await expect(modal).toHaveCount(2)
-  await expect(modal.last()).toHaveText(/#change/)
+  expect(values.length).toBe(2)
+  expect(values[0].startsWith('当前锚点#demonstrate')).toBeTruthy()
 })
diff --git a/examples/sites/demos/pc/app/anchor/change.vue b/examples/sites/demos/pc/app/anchor/change.vue
index cf364c0592..3cb45ede45 100644
--- a/examples/sites/demos/pc/app/anchor/change.vue
+++ b/examples/sites/demos/pc/app/anchor/change.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 export default {
   components: {
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      TinyModal.message({ message: `change${link}`, status: 'info' })
+      console.log(`当前锚点${link}`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue b/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
index eb0ce2b4ee..26b45e4c8f 100644
--- a/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
@@ -67,25 +67,29 @@ function handleClick(e, link) {
 .scroll-container {
   height: 40vh;
   overflow: auto;
+  text-align: center;
+  font-size: 24px;
+}
+.scroll-container > div {
+  padding-top: 20%;
 }
 .sec-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.1);
+  background: #b6d4f2;
 }
 .sec-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.3);
+  background: #c2c2c2;
 }
 .sec-3 {
-  background: rgba(135, 206, 235, 0.6);
-  padding-top: 20vh;
+  background: #fff4e8;
 }
 .sec-3-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.8);
+  background: #b9e683;
 }
 .sec-3-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 1);
+  background: #f2c5c2;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/anchor/set-container.vue b/examples/sites/demos/pc/app/anchor/set-container.vue
index 4fdd01c6ff..ddcd889c1d 100644
--- a/examples/sites/demos/pc/app/anchor/set-container.vue
+++ b/examples/sites/demos/pc/app/anchor/set-container.vue
@@ -78,25 +78,29 @@ export default {
 .scroll-container {
   height: 40vh;
   overflow: auto;
+  text-align: center;
+  font-size: 24px;
+}
+.scroll-container > div {
+  padding-top: 20%;
 }
 .sec-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.1);
+  background: #b6d4f2;
 }
 .sec-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.3);
+  background: #c2c2c2;
 }
 .sec-3 {
-  background: rgba(135, 206, 235, 0.6);
-  padding-top: 20vh;
+  background: #fff4e8;
 }
 .sec-3-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.8);
+  background: #b9e683;
 }
 .sec-3-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 1);
+  background: #f2c5c2;
 }
 </style>