@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/grid/webdoc/grid-editor.js

@@ -9,7 +9,7 @@ export default {
         'zh-CN': `
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
-          <p class="custom-block-title">说明</p>
+          <p class="custom-block-title">特别说明：</p>
           <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,

package/demos/pc/app/grid/webdoc/grid-fixed.js

@@ -34,6 +34,17 @@ export default {
           '<p>Sets column freezing through the <code>fixed</code> property. The options are as follows: <code>left right</code>The default value is <code>left</code></p>\n'
       },
       'codeFiles': ['fixed/multi-column-fixed.vue']
+    },
+    {
+      'demoId': 'group-header-fixed',
+      'name': { 'zh-CN': '分组表头冻结', 'en-US': 'Group header fixed' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>fixed</code> 属性设置列冻结。当分组表头的某一项设置了冻结列，该分组表头其他项都会自动变成冻结列。</p>\n',
+        'en-US':
+          '<p><p>Set column freezing via the <code>fixed</code> attribute. When a frozen column is set for an item in the group header, other items in the group header will automatically become frozen columns. </p>\n'
+      },
+      'codeFiles': ['fixed/group-header-fixed.vue']
     }
   ],
   apis: [{ 'name': 'grid-fixed', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid/webdoc/grid-large-data.js

@@ -68,6 +68,30 @@ export default {
           '<div class="tip custom-block"><p class="custom-block-title"> Method Description </p>\n<p> <code>scrollTo(scrollLeft, scrollTop)</code>: Scroll to the corresponding position \n<code>scrollToRow(row)</code>: Scroll to the corresponding row \n<code>scrollToColumn(column)</code>: Scroll to the corresponding column </p>\n</div>\n'
       },
       'codeFiles': ['large-data/scroll-to.vue']
+    },
+    {
+      'demoId': 'large-data-column-anchor',
+      'name': { 'zh-CN': '表格列锚点', 'en-US': 'table column anchor' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>column-anchor</code> 设置表格列锚点，点击可快速滚动至对应列，表格初始化时，默认滚动到锚点第一项。</p>',
+        'en-US':
+          '<p>Set the table column anchor point through <code>column-anchor</code>. Click to quickly scroll to the corresponding column. When the table is initialized, it will scroll to the first item of the anchor point by default. </p>'
+      },
+      'codeFiles': ['large-data/column-anchor.vue']
+    },
+    {
+      'demoId': 'column-anchor-clear-active',
+      'name': {
+        'zh-CN': '再次加载数据时清除活跃列锚点',
+        'en-US': 'Clear active column anchors when loading data again'
+      },
+      'desc': {
+        'zh-CN': '<p>当使用 <code>fetch-data</code> 加载数据时，再次加载数据时会清除活跃列锚点。</p>',
+        'en-US':
+          '<p>When loading data using <code>fetch-data</code>, active column anchors are cleared when the data is loaded again.</p>'
+      },
+      'codeFiles': ['large-data/column-anchor-clear-active.vue']
     }
   ],
   apis: [{ 'name': 'grid-large-data', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid/webdoc/grid-renderer.js

@@ -55,6 +55,17 @@ export default {
       },
       'codeFiles': ['renderer/inner-renderer-date.vue']
     },
+    {
+      'demoId': 'renderer-inner-renderer-rate',
+      'name': { 'zh-CN': '比率渲染器', 'en-US': 'Custom Renderer' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>formatConfig.max</code> 配置，按照 <code>value / max</code> 计算样式百分比（进度条宽度占单元格宽度的百分比），按照 <code>value</code> 计算显示百分比（进度条上显示的比率），参考示例字段内置列渲染 <code>rate1</code>。
+          如果未配置 <code>formatConfig.max</code>，就按照 <code>value / total</code> 计算样式百分比和显示百分比，<code>formatConfig.total</code> 默认值是 <code>1</code>，参考示例字段内置列渲染 <code>rate2</code>。</p>`,
+        'en-US':
+          '<p>The custom renderer can customize the rendering of cells or a <code>vue component</code>. Configure <code>renderer</code> in the <code>grid-column</code> column to support method and object configuration. For details, see the following example. </p>\n'
+      },
+      'codeFiles': ['renderer/inner-renderer-rate.vue']
+    },
     {
       'demoId': 'render-async-colunm-render',
       'name': { 'zh-CN': '列异步数据渲染', 'en-US': 'Column Asynchronous Data Rendering' },

package/demos/pc/app/grid/webdoc/grid-toolbar.js

@@ -88,7 +88,7 @@ export default {
         'zh-CN': `
         <p>设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
         <ul>
-          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
+          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。自定义实现刷新时直接调用<code>handleFetch('reload')</code>。</li>
         </ul>`,
         'en-US':
           "<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot=&quot;toolbar&quot;</code> . \n2. Set the toolbar component attribute <code>refresh</code> to enable the table refresh function. </p>\n<ul>\n<li> Setting Toolbar Properties <code>loading</code>Enable/Disable Loading. \n <code>handleFetch('reload') </code></li>\n</ul>\n is invoked when the customized implementation is refreshed"

package/demos/pc/app/image/count-slot-composition-api.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo-image__count-solt">
+    <tiny-image :src="url" :preview-src-list="srcList">
+      <template #count="{ index }">
+        <span class="demo-image__count">第{{ index + 1 }}张/共{{ srcList.length }}张 </span>
+      </template>
+    </tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+</script>
+
+<style scoped>
+.demo-image__count-solt {
+  width: 200px;
+  height: 200px;
+}
+.demo-image__count {
+  font-size: 14px;
+  color: #fff;
+}
+</style>

package/demos/pc/app/image/count-slot.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试数目插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('image#count-solt')
+
+  const preview = page.locator('.pc-demo-container')
+  const imgs = preview.locator('.tiny-image > .tiny-image__inner')
+  await expect(imgs).toHaveCount(5)
+
+  await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
+  await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
+  await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
+  await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
+  await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
+})

package/demos/pc/app/image/count-slot.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="demo-image__count-solt">
+    <tiny-image :src="url" :preview-src-list="srcList">
+      <template #count="{ index }">
+        <span class="demo-image__count">第{{ index + 1 }}张/共{{ srcList.length }}张 </span>
+      </template>
+    </tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__count-solt {
+  width: 200px;
+  height: 200px;
+}
+.demo-image__count {
+  font-size: 14px;
+  color: #fff;
+}
+</style>

package/demos/pc/app/image/index-change-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo-image__index-change">
+    <tiny-image :src="url" :preview-src-list="srcList" @change-index="changeIndex"> </tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage, Modal } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+
+function changeIndex(index) {
+  console.log('sssss')
+  Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+}
+</script>
+
+<style scoped>
+.demo-image__index-change {
+  width: 200px;
+  height: 200px;
+}
+</style>

package/demos/pc/app/image/index-change.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试坐标切换', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('image#index-chenge')
+
+  const preview = page.locator('.pc-demo-container')
+  const imgs = preview.locator('.tiny-image > .tiny-image__inner')
+  await expect(imgs).toHaveCount(5)
+
+  await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
+  await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
+  await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
+  await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
+  await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
+})

package/demos/pc/app/image/index-change.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="demo-image__index-change">
+    <tiny-image :src="url" :preview-src-list="srcList" @change-index="changeIndex"> </tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  },
+  methods: {
+    changeIndex(index) {
+      Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__index-change {
+  width: 200px;
+  height: 200px;
+}
+</style>

package/demos/pc/app/image/keep-style-composition-api.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="demo-image__keep-style">
+    <tiny-image :src="url" :preview-src-list="srcList" keep-style></tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+</script>
+
+<style scoped>
+.demo-image__keep-style {
+  width: 200px;
+  height: 200px;
+}
+</style>

package/demos/pc/app/image/keep-style.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test'
+
+test('测试样式属性保持', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('image#keep-style')
+  const preview = page.locator('.pc-demo-container')
+  await preview.locator('.tiny-image__inner').click()
+  await page.waitForTimeout(50)
+
+  // viewerImage 是插入到body末尾的。
+  const viewerImage = page.locator('.tiny-image-viewer')
+  const mask = viewerImage.locator('.tiny-image-viewer__mask')
+  const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
+  const canvas = viewerImage.locator('.tiny-image-viewer__img')
+
+  // 验证出现
+  await expect(viewerImage).toHaveCount(1)
+  await expect(canvas).toHaveCount(1)
+  await expect(mask).toHaveCSS('position', 'absolute')
+  await expect(mask).toHaveCSS('opacity', '0.5')
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+
+  // 点击缩小
+  await toolbar.locator('svg').first().click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
+
+  //   点击放大
+  await toolbar.locator('svg').nth(1).click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+
+  // 点击向左旋转
+  await toolbar.locator('svg').nth(3).click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
+
+  const prev = viewerImage.locator('.tiny-image-viewer__prev')
+  const next = viewerImage.locator('.tiny-image-viewer__next')
+
+  // // 点击切换
+  await next.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /house\.jpg/)
+
+  await prev.click()
+  await page.waitForTimeout(20)
+  await prev.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /bridge\.jpg/)
+
+  // 点击关闭
+  await viewerImage.locator('.tiny-image-viewer__close').click()
+  await expect(viewerImage).toHaveCount(0)
+})

package/demos/pc/app/image/keep-style.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo-image__keep-style">
+    <tiny-image :src="url" :preview-src-list="srcList" keep-style></tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__keep-style {
+  width: 200px;
+  height: 200px;
+}
+</style>

package/demos/pc/app/image/preview-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-image__preview">
-    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000"></tiny-image>
+    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
   </div>
 </template>
 

package/demos/pc/app/image/preview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-image__preview">
-    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000"></tiny-image>
+    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
   </div>
 </template>
 

package/demos/pc/app/image/webdoc/image.js

@@ -10,9 +10,23 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code>src</code> 设置图片路径。<br>\n          通过 <code>fit</code> 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br>\n          <div class="tip custom-block">\n            <p class="custom-block-title">object-fit 说明</p>\n            <p>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>\n               contain：被替换的内容大小可以填充元素的内容框<br>\n               cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>\n               none：被替换的内容尺寸不会被改变<br>\n               scale-down：内容的尺寸就像是指定了none 或 contain，取决于哪一个将导致更小的对象尺寸。\n            </p>\n          </div>\n        ',
+          '通过 <code>src</code> 设置图片路径。<br>' +
+          ' 通过 <code>fit</code> 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br>' +
+          '<p class="custom-block-title">object-fit 说明</p>' +
+          '<p>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>' +
+          'contain：被替换的内容大小可以填充元素的内容框<br>' +
+          'cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>' +
+          'none：被替换的内容尺寸不会被改变<br>' +
+          'scale-down：内容的尺寸就像是指定了none 或 contain，取决于哪一个将导致更小的对象尺寸。',
         'en-US':
-          '\n          Set the image path using <code>src</code>. <br>\n          The <code>fit</code> attribute determines how the image will fit into the container frame, the same as the object-fit attribute of native css. <br>\n          <div class="tip custom-block">\n          <p class="custom-block-title">object-fit Description </p>\n          <p>fill: The content being replaced will be scaled to maintain its aspect ratio as it fills the element\'s content box <br>\n          contain: The size of the content to fill the element\'s content box <br>\n          cover: The size of the content being replaced maintains its aspect ratio while filling the element\'s entire content box <br>\n          none: The size of the content to be replaced will not be changed <br>\n          scale-down: The size of the content is specified as either none or contain, depending on which will result in a smaller object size.\n          </p>\n          </div>\n        '
+          'Use <code>src</code> to set the image path.<br>' +
+          'The <code>fit</code> attribute determines how the image fits into the container box, which is the same as the object-fit attribute of the native CSS.<br>' +
+          '<p class="custom-block-title">object-fit description</p>' +
+          "<p>fill:The replaced content is scaled to maintain its aspect ratio when filling the element's content box.<br>" +
+          'contain:The size of the replaced content fills the content box of the element.<br>' +
+          'cover:The size of the replaced content maintains its aspect ratio and fills the entire content box of the element.<br>' +
+          'none:The size of the replaced content is not changed.<br>' +
+          'scale-down:The size of the content is like specifying none or contain, depending on which would result in a smaller object size.'
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -36,9 +50,13 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n        通过 <code>lazy</code> 开启懒加载功能，当图片滚动到可视范围内才会加载。<br>\n        通过 <code>scroll-container</code> 来设置滚动容器，若未定义，则为最近一个 <code>overflow</code> 值为 <code>auto</code> 或 <code>scroll</code> 的父元素。</p>\n\n          <div class="tip custom-block">\n            <p>lazy 懒加载的图片必须是远程的图片，不支持静态图片懒加载。</p>\n          </div>\n        ',
+          '通过 <code>lazy</code> 开启懒加载功能，当图片滚动到可视范围内才会加载。<br>' +
+          '通过 <code>scroll-container</code> 来设置滚动容器，若未定义，则为最近一个 <code>overflow</code> 值为 <code>auto</code> 或 <code>scroll</code> 的父元素。' +
+          '<p>lazy 懒加载的图片必须是远程的图片，不支持静态图片懒加载。</p>',
         'en-US':
-          '\n          Enable lazy loading with <code>lazy</code>, and the image will only load when it is in visual range. <br>\n          Set the scroll container by <code>scroll-container</code>. If not defined, Is the parent element of the last <code>overflow</code> value <code>auto</code> or <code>scroll</code>. </p>\n\n          <div class="tip custom-block">\n          <p>lazy Lazy loading images must be remote images. Lazy loading of static images is not supported. </p>\n          </div>\n        '
+          'Enable lazy loading with <code>lazy</code>, and the image will only load when it is in visual range. <br>' +
+          'Set the scroll container by <code>scroll-container</code>.If not defined, Is the parent element of the last <code>overflow</code> value <code>auto</code> or <code>scroll</code>.<br>' +
+          '<p>lazy Lazy loading images must be remote images. Lazy loading of static images is not supported. </p>'
       },
       codeFiles: ['lazy.vue']
     },
@@ -50,12 +68,54 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code>preview-src-list</code> 属性 ，传入一组图片url的数组，点击图片后，会进入预览大图的模式。<br>\n          通过 <code>z-index</code> 设置预览图片的元素的z-index。\n        ',
+          '通过 <code>preview-src-list</code> 属性 ，传入一组图片 url 的数组，点击图片后，会进入预览大图的模式。<br>' +
+          '通过 <code>z-index</code> 设置预览图片的元素的 z-index。<br>' +
+          '通过添加 <code>show-index</code> 开启图片序号展示。<br>',
         'en-US':
-          '\n          Pass in an array of image urls via the <code>preview-src-list</code> property, and click on the image to enter the mode of previewing a large image. <br>\n          Set the z-index of the element of the preview image by <code>z-index</code>.\n        '
+          'Pass an array of image URLs through the <code>preview-src-list</code> attribute. After you click an image, the system enters the large image preview mode.<br>' +
+          'Use <code>z-index</code> to set the z-index of the element of the preview image.<br>' +
+          'Add <code>show-index</code> to enable the image sequence number display.<br>'
       },
       codeFiles: ['preview.vue']
     },
+    {
+      demoId: 'keep-style',
+      name: {
+        'zh-CN': '保持图片样式属性',
+        'en-US': 'Preserve Picture Style Properties'
+      },
+      desc: {
+        'zh-CN': '通过 <code>keep-style</code> 属性可以让图片切换时样式保持一致，图片的缩放、旋转、边距等状态不重置。',
+        'en-US':
+          'The <code>keep-style</code> attribute can be used to keep the style of an image consistent when the image is switched. The zoom, rotation, and margin status of the image is not reset.'
+      },
+      codeFiles: ['keep-style.vue']
+    },
+    {
+      demoId: 'index-change',
+      name: {
+        'zh-CN': '图片切换事件',
+        'en-US': 'Image switchover event'
+      },
+      desc: {
+        'zh-CN': '图片切换时触发 <code>change-index</code> 事件，参数返回当前图片的 index。',
+        'en-US':
+          'The <code>change-index</code> event is triggered when the image is switched. The index of the current image is returned.'
+      },
+      codeFiles: ['index-change.vue']
+    },
+    {
+      demoId: 'count-slot',
+      name: {
+        'zh-CN': '图片计数插槽',
+        'en-US': 'Picture Count Slot'
+      },
+      desc: {
+        'zh-CN': '通过 <code>count</code> 设置图片计数插槽。',
+        'en-US': 'Set the image count slot via <code>count</code>.'
+      },
+      codeFiles: ['count-slot.vue']
+    },
     {
       demoId: 'preview-in-dialog',
       name: {
@@ -76,9 +136,11 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现,只有大图片时，会看到加载中的插槽。 <br>\n          通过 <code> error </code> 插槽，定义图片在加载失败后的占位内容。 \n        ',
+          '通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现,只有大图片时，会看到加载中的插槽。 <br>' +
+          ' 通过 <code> error </code> 插槽，定义图片在加载失败后的占位内容。',
         'en-US':
-          '\n          The <code> placeholder</code> slot defines the placeholder content for images when loaded. Usually, because the image loads quickly, you will not see the appearance of this slot, only a large image, you will see the loading slot. <br>\n          Using the <code> error </code> slot, define the placeholder content of the image after loading failure.\n        '
+          'The <code> placeholder</code> slot defines the placeholder content for images when loaded. Usually, because the image loads quickly, you will not see the appearance of this slot, only a large image, you will see the loading slot. <br>' +
+          'Using the <code> error </code> slot, define the placeholder content of the image after loading failure.'
       },
       codeFiles: ['slot.vue']
     },
@@ -89,10 +151,10 @@ export default {
         'en-US': 'Events'
       },
       desc: {
-        'zh-CN':
-          '\n          <code>load</code> 事件: 图片加载成功触发 。<br>\n          <code>error</code> 事件: 图片加载失败触发 。<br>\n        ',
+        'zh-CN': '<code>load</code> 事件: 图片加载成功触发 。<br><code>error</code> 事件: 图片加载失败触发 。',
         'en-US':
-          '\n          <code>load</code> event: The image is successfully loaded. <br>\n          <code>error</code> event: The image failed to be loaded. <br>\n        '
+          '<code>load</code> event: The image is successfully loaded. <br>' +
+          '<code>error</code> event: The image failed to be loaded. '
       },
       codeFiles: ['events.vue']
     }

package/demos/pc/app/mind-map/basic-usage-composition-api.vue

@@ -1,14 +1,14 @@
 <template>
-  <tiny-mind-map class="mindmap" />
+  <tiny-mind-map class="demo-mind-map-basic" />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import { MindMap as TinyMindMap } from '@opentiny/vue'
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-basic {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>

package/demos/pc/app/mind-map/basic-usage.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-mind-map class="mindmap" />
+  <tiny-mind-map class="demo-mind-map-basic" />
 </template>
 
-<script lang="ts">
+<script>
 import { MindMap } from '@opentiny/vue'
 
 export default {
@@ -13,8 +13,8 @@ export default {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-basic {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>