@opentiny/vue-docs 2.2.23 → 3.16.0

package/demos/mobile/app/button/event.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#event')
+
+  const button = page.locator('#event .tiny-mobile-button')
+
+  await button.click()
+  await expect(button).toHaveClass(/is-loading/)
+  await page.waitForTimeout(2000)
+  await expect(button).not.toHaveClass(/is-loading/)
+})

package/demos/mobile/app/button/icon.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#icon')
+
+  const buttons = page.locator('#icon .tiny-mobile-button')
+
+  await expect(buttons.first()).toHaveClass(/tiny-mobile-button--icon/)
+  await expect(buttons.first().locator('.is-icon')).toBeVisible()
+
+  await expect(buttons.nth(1)).toHaveClass(/tiny-mobile-button--icon/)
+  await expect(buttons.nth(1).locator('.is-icon')).toBeVisible()
+  await expect(buttons.nth(1).locator('span')).toBeVisible()
+})

package/demos/mobile/app/button/loading.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('加载中状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#loading')
+
+  const buttons = page.locator('.button-wrap .tiny-mobile-button')
+
+  await expect(buttons.first()).toHaveClass(/is-loading/)
+  await expect(buttons.first().locator('.tiny-mobile-button-loading-white')).toBeVisible()
+})

package/demos/mobile/app/button/reset-time.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('重置时间', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#reset-time')
+
+  const button = page.locator('.button-wrap .tiny-mobile-button')
+  await button.click()
+
+  await expect(button).toHaveClass(/is-disabled/)
+  await page.waitForTimeout(500)
+  await expect(button).not.toHaveClass(/is-disabled/)
+})

package/demos/mobile/app/button/size.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#size')
+
+  const buttons = page.locator('.button-wrap .tiny-mobile-button')
+
+  // 主要按钮
+  const smallPrimaryBtn = buttons.first()
+  const size = await smallPrimaryBtn.boundingBox()
+  await expect(smallPrimaryBtn).toHaveClass(/tiny-mobile-button--small/)
+  expect(size?.height).toBeCloseTo(28, 1)
+  expect(smallPrimaryBtn).toHaveCSS('font-size', '12px')
+
+  // 文字按钮
+  const smallTextBtn = buttons.nth(3)
+  await expect(smallTextBtn).toHaveClass(/tiny-mobile-button--small/)
+  expect(smallTextBtn).toHaveCSS('font-size', '12px')
+
+  // 图标按钮
+  const smallIconBtn = buttons.nth(4)
+  const iconSize = await smallIconBtn.locator('.tiny-icon').boundingBox()
+  expect(iconSize?.width).toBeCloseTo(16, 1)
+})

package/demos/mobile/app/input/textarea-scalable.spec.ts

@@ -19,7 +19,7 @@ test.describe('文本域可缩放', () => {
 
     const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
 
+    await expect(textarea.nth(4)).toHaveClass(/is-autosize/)
     await expect(textarea.nth(5)).toHaveClass(/is-autosize/)
-    await expect(textarea.nth(6)).toHaveClass(/is-autosize/)
   })
 })

package/demos/mobile/app/loading/background.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义遮罩背景色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#background')
+
+  const loading = page.locator('#background .tiny-mobile-loading')
+  await expect(loading).toHaveCSS('background-color', 'rgba(25, 25, 25, 0.376)')
+})

package/demos/mobile/app/loading/base.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#base')
+
+  const loading = page.locator('#base .tiny-mobile-loading')
+  const loadingIcon = loading.locator('.tiny-mobile-loading__icon')
+
+  await expect(loading).toBeVisible()
+  await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.294)')
+  await expect(loadingIcon).toBeVisible()
+  await expect(loadingIcon).toHaveCSS('width', '24px')
+  await expect(loadingIcon).toHaveCSS('height', '24px')
+
+  // 可关闭
+  await page.getByRole('button', { name: '关闭 Loading' }).click()
+  await expect(loading).not.toBeVisible()
+})

package/demos/mobile/app/loading/custom-class.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#custom-class')
+
+  const loading = page.locator('#custom-class .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+
+  await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
+  await expect(loadingText).toBeVisible()
+  await expect(loadingText).toHaveCSS('color', 'rgb(255, 255, 255)')
+})

package/demos/mobile/app/loading/global-regitstry.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('全局加载', () => {
+  test('指令方式加载', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('loading#global-registry')
+
+    const loading = page.locator('.tiny-mobile-loading')
+
+    await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
+    await expect(loading).toBeVisible()
+    await expect(loading).toHaveClass(/is-fullscreen/)
+    await page.waitForTimeout(3000)
+    await expect(loading).not.toBeVisible()
+  })
+
+  test('静态方法加载', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('loading#global-registry')
+
+    const loading = page.locator('.tiny-mobile-loading')
+
+    await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()
+    await expect(loading).toBeVisible()
+    await page.waitForTimeout(3000)
+    await expect(loading).not.toBeVisible()
+  })
+})

package/demos/mobile/app/loading/size.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#size')
+
+  const loadings = page.locator('#size .tiny-mobile-loading')
+
+  // mini
+  const miniLoading = loadings.first()
+  await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-mini/)
+  await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'row')
+  await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '14px')
+  await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '14px')
+
+  // small
+  const smallLoading = loadings.nth(1)
+  await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-small/)
+  await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '24px')
+  await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '24px')
+
+  // medium
+  const mediumLoading = loadings.nth(2)
+  await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/.tiny-mobile-loading-medium/)
+  await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '40px')
+  await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '40px')
+
+  // large
+  const largeLoading = loadings.nth(3)
+  await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-large/)
+  await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '96px')
+  await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '96px')
+})

package/demos/mobile/app/loading/spinner.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义加载图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#spinner')
+
+  const loading = page.locator('#spinner .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+  const svg = loading.locator('.tiny-mobile-loading__spinner')
+
+  await expect(loadingText).toContainText('自定义 loading 图标')
+  await expect(svg).toBeVisible()
+})

package/demos/mobile/app/loading/spinner.vue

@@ -10,7 +10,7 @@ export default {
   mounted() {
     Loading.service({
       spinner: iconLoading(),
-      text: '自定义loading图标',
+      text: '自定义 loading 图标',
       target: document.getElementById('demo-loading'),
       background: '#fff',
       tiny_mode: 'mobile'

package/demos/mobile/app/loading/tip-text.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义加载提示文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#tip-text')
+
+  const loading = page.locator('#tip-text .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+  await expect(loadingText).toContainText('加载中...')
+})

package/demos/mobile/app/loading/webdoc/loading.js

@@ -78,7 +78,7 @@ export default {
       codeFiles: ['size.vue']
     },
     {
-      demoId: 'global-registry.',
+      demoId: 'global-registry',
       name: {
         'zh-CN': '全局加载',
         'en-US': 'Global Registry'

package/demos/mobile-first/app/file-upload/preview-picture.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" @preview="handlePreview">
+    <tiny-file-upload
+      :action="action"
+      list-type="picture-single"
+      :file-list="fileList1"
+      @preview="handlePreview"
+      image-bg-color="red"
+    >
     </tiny-file-upload>
     <br />
     <br />
@@ -10,12 +16,11 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { FileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload: FileUpload
   },
   data() {
     return {
@@ -23,7 +28,7 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/hae-logo.png`
         }
       ],
       fileList2: [
@@ -46,8 +51,8 @@ export default {
     }
   },
   methods: {
-    handlePreview() {
-      console.log(...arguments)
+    handlePreview(...args) {
+      console.log(...args)
     }
   }
 }

package/demos/mobile-first/app/file-upload/show-download-bar.vue

@@ -0,0 +1,90 @@
+<template>
+  <tiny-file-upload
+    ref="upload"
+    :action="action"
+    :file-list="fileList"
+    list-type="saas"
+    @download-file="handleDownloadFile"
+  ></tiny-file-upload>
+</template>
+
+<script>
+import { FileUpload, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          docId: 'M1T2A1N548572512085860351',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test1.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860352',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test1.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleDownloadFile(file) {
+      // 模拟下载成功场景
+      if (file.docId === 'M1T2A1N548572512085860351') {
+        file.showDownloadBar = true
+
+        // 更新downloadPercentage，vue2下写法
+        this.$set(file, 'downloadPercentage', 0)
+        // 更新downloadPercentage，vue3下写法
+        // file.downloadPercentage = 0
+
+        const timer = setInterval(() => {
+          if (file.downloadPercentage >= 100) {
+            clearInterval(timer)
+            // 下载完成后可以隐藏进度条，因为进度条有过渡动画，所以可以延迟1s再隐藏
+            setTimeout(() => {
+              file.showDownloadBar = false
+            }, 1000)
+
+            Modal.message({ message: '下载成功', status: 'success' })
+            return
+          }
+          file.downloadPercentage += 10
+        }, 300)
+      } else {
+        // 模拟下载失败场景
+        file.showDownloadBar = true
+
+        // 更新downloadPercentage，vue2下写法
+        this.$set(file, 'downloadPercentage', 0)
+        // 更新downloadPercentage，vue3下写法
+        // file.downloadPercentage = 0
+
+        const timer = setInterval(() => {
+          if (file.downloadPercentage >= 50) {
+            clearInterval(timer)
+            // file.showDownloadBar = false
+            file.downloadStatus = 'exception'
+            Modal.message({ message: '下载失败', status: 'error' })
+            return
+          }
+          file.downloadPercentage += 10
+        }, 300)
+      }
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/file-upload/webdoc/file-upload.js

@@ -96,7 +96,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件<p>',
+          '<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['download-all.vue']
@@ -109,11 +109,25 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件<p>',
+          '<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['download.vue']
     },
+    {
+      demoId: 'show-download-bar',
+      name: {
+        'zh-CN': '下载进度条',
+        'en-US': 'Download progress bar'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过给 file 对象设置 `showDownloadBar:true` 可以显示下载进度条，`downloadPercentage` 属性传入下载进度，`downloadStatus` 设置下载状态。<p>',
+        'en-US':
+          '<p>You can set the `showDownloadBar:true` attribute of the file object to display the download progress bar, set the`downloadPercentage` attribute to transfer the download progress, and set the`downloadStatus` to set the download status.</p>'
+      },
+      codeFiles: ['show-download-bar.vue']
+    },
     {
       demoId: 'download-picture',
       name: {
@@ -122,7 +136,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件<p>',
+          '<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['download-picture.vue']
@@ -135,7 +149,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件<p>',
+          '<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['re-upload.vue']
@@ -148,7 +162,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件<p>',
+          '<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['re-upload-picture.vue']
@@ -308,7 +322,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件<p>',
+        'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['drag-file-list.vue']
@@ -321,7 +335,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件<p>',
+          '<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件。<p>',
         'en-US': '<p>button click</p>'
       },
       codeFiles: ['event-trigger-click.vue']

package/demos/mobile-first/app/form/prompt-slot.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="w-96">
+    <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="96px" show-message>
+      <tiny-form-item label="必填项" prop="users" required>
+        <template #prompt>
+          <div class="relative sm:absolute text-xs leading-normal text-color-alert" title="强提示插槽">强提示插槽</div>
+        </template>
+        <tiny-input v-model="createData.users"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="URL" prop="url">
+        <tiny-input v-model="createData.url"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button type="primary" @click="handleSubmit('ruleForm')" class="ml-24"> 提交 </tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      createData: {
+        users: '',
+        url: ''
+      },
+      rules: {
+        users: [
+          { required: true, message: '必填', trigger: 'blur' },
+          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+        ],
+        url: { type: 'url' }
+      }
+    }
+  },
+  methods: {
+    handleSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          Modal.alert('提交成功')
+        }
+      })
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/form/webdoc/form.js

@@ -215,6 +215,18 @@ export default {
           '<p>Set the `validate-debounce` attribute of FormItem to `true` to enable the verification anti-jitter function. In the case of continuous input, the verification starts when the last input ends. The default value is `false`.</p>'
       },
       codeFiles: ['validate-debounce.vue']
+    },
+    {
+      demoId: 'prompt-slot',
+      name: {
+        'zh-CN': '强提示插槽',
+        'en-US': 'Prompt slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `prompt` 插槽，自定义强提示插槽的内容。</p>',
+        'en-US': '<p>Customize the content of the strong prompt slot in the `prompt` slot. </p>'
+      },
+      codeFiles: ['prompt-slot.vue']
     }
   ]
 }

package/demos/mobile-first/app/steps/slot-bottom.vue

@@ -59,7 +59,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 /* 文本超出两行显示...，IE下不支持 */
 .multi-line {
   display: -webkit-box;

package/demos/mobile-first/app/tabs/tabs-events-close.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
+  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
@@ -47,6 +47,10 @@ export default {
     }
   },
   methods: {
+    beforeClose(name) {
+      // 只能关闭标签页“其他组件”
+      return name === 'fifth'
+    },
     close(name) {
       this.$message({
         title: 'close 事件',

package/demos/pc/app/action-menu/basic-usage-composition-api.vue

@@ -17,8 +17,7 @@ const options = ref([
     label: '关机'
   },
   {
-    label: '重启',
-    divided: true
+    label: '重启'
   },
   {
     label: '网络设置',

package/demos/pc/app/action-menu/basic-usage.vue

@@ -22,8 +22,7 @@ export default {
           label: '关机'
         },
         {
-          label: '重启',
-          divided: true
+          label: '重启'
         },
         {
           label: '网络设置',

package/demos/pc/app/anchor/is-affix-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
+      <span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>

package/demos/pc/app/anchor/is-affix.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="demo-top mb10">
       <tiny-switch v-model="isAffix"></tiny-switch>
-      <span>{{ isAffix ? '打开固定模式' : '关闭固定模式' }}</span>
+      <span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
     </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>

package/demos/pc/app/carousel/autoplay-composition-api.vue

@@ -6,11 +6,20 @@
   </tiny-carousel>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.tiny-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+  font-size: 25px;
+}
+
 .carousel-item-demo:nth-child(2n) {
   background-color: #fafafa;
 }