docs(site): [detail-page, scroll-text] Improve documentation (#1109)

examples/sites/demos/pc/app/detail-page/basic-usage-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-detail-page v-model="value"></tiny-detail-page>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { DetailPage as TinyDetailPage } from '@opentiny/vue'
 

examples/sites/demos/pc/app/detail-page/basic-usage.vue

@@ -2,7 +2,7 @@
   <tiny-detail-page v-model="value"></tiny-detail-page>
 </template>
 
-<script lang="jsx">
+<script>
 import { DetailPage } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/detail-page/custom-show-text-composition-api.vue

@@ -1,42 +1,41 @@
 <template>
   <tiny-detail-page
     v-model="value"
-    title="数据："
+    title="表头详情"
-    text-split="--"
+    text-split="-"
-    dialog-title="个性化"
+    dialog-title="表头设置"
-    label-title="文本字段"
+    label-title="表头名称"
-    value-title="勾选隐藏"
+    value-title="是否隐藏"
     tips="不能全部隐藏"
     save-button="修改数据"
     cancel-button="取消修改"
   ></tiny-detail-page>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { DetailPage as TinyDetailPage } from '@opentiny/vue'
 
 const value = ref([
   {
     label: '标题1',
-    value: '测试文本1'
+    value: '描述1'
   },
   {
     label: '标题2',
-    value: '测试文本2',
+    value: '描述2'
-    hidden: true
   },
   {
     label: '标题3',
-    value: '测试文本3'
+    value: '描述3'
   },
   {
     label: '标题4',
-    value: '测试文本4'
+    value: '描述4'
   },
   {
     label: '标题5',
-    value: '测试文本5'
+    value: '描述5'
   }
 ])
 </script>

examples/sites/demos/pc/app/detail-page/custom-show-text.spec.ts

@@ -3,16 +3,14 @@ import { test, expect } from '@playwright/test'
 test('自定义展示文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('detail-page#custom-show-text')
-  await expect(
+  await expect(page.getByText('表头详情标题1-描述1标题2-描述2标题3-描述3标题4')).toBeVisible()
-    page.getByText('数据：标题1--测试文本1标题2--测试文本2标题3--测试文本3标题4--测试文本4标题5--测试文本5')
-  ).toBeVisible()
   await page
     .locator('div')
-    .filter({ hasText: /^数据：$/ })
+    .filter({ hasText: /^表头详情$/ })
     .getByRole('img')
     .click()
-  await expect(page.getByText('个性化', { exact: true })).toBeVisible()
+  await expect(page.getByText('表头设置', { exact: true })).toBeVisible()
-  await expect(page.getByText('文本字段')).toBeVisible()
+  await expect(page.getByText('表头名称')).toBeVisible()
-  await expect(page.getByText('勾选隐藏')).toBeVisible()
+  await expect(page.getByText('是否隐藏')).toBeVisible()
   await expect(page.getByRole('button', { name: '取消修改' })).toBeVisible()
 })

examples/sites/demos/pc/app/detail-page/custom-show-text.vue

@@ -1,18 +1,18 @@
 <template>
   <tiny-detail-page
     v-model="value"
-    title="数据："
+    title="表头详情"
-    text-split="--"
+    text-split="-"
-    dialog-title="个性化"
+    dialog-title="表头设置"
-    label-title="文本字段"
+    label-title="表头名称"
-    value-title="勾选隐藏"
+    value-title="是否隐藏"
     tips="不能全部隐藏"
     save-button="修改数据"
     cancel-button="取消修改"
   ></tiny-detail-page>
 </template>
 
-<script lang="jsx">
+<script>
 import { DetailPage } from '@opentiny/vue'
 
 export default {
@@ -24,24 +24,23 @@ export default {
       value: [
         {
           label: '标题1',
-          value: '测试文本1'
+          value: '描述1'
         },
         {
           label: '标题2',
-          value: '测试文本2',
+          value: '描述2'
-          hidden: true
         },
         {
           label: '标题3',
-          value: '测试文本3'
+          value: '描述3'
         },
         {
           label: '标题4',
-          value: '测试文本4'
+          value: '描述4'
         },
         {
           label: '标题5',
-          value: '测试文本5'
+          value: '描述5'
         }
       ]
     }

examples/sites/demos/pc/app/detail-page/webdoc/detail-page.js

@@ -6,9 +6,16 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>在数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</p>\n',
+        'zh-CN': `<p>
-        'en-US':
+          <div>通过 <code> modelValue / v-model</code> 设置要显示的数据。</div>
-          '<p>You can set <code>hidden: true</code> in the data object to specify the data to be hidden by default. </p>\n'
+          <div>在每个数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</div>
+          <div>用户点击组件右上角的图标可以弹出个性化弹窗，弹窗里能选择是否隐藏指定数据。</div>
+        </p>`,
+        'en-US': `<p>
+          <div> Sets the data to be displayed with <code> modelValue/v-model</code>. </div>
+          <div> can set <code>hidden: true</code> in each data object to specify the default hidden data. </div>
+          <div> The user clicks the icon in the upper right corner of the component to pop up a personalized popup window, which can choose whether to hide the specified data. </div>
+        </p>`
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -31,7 +38,8 @@ export default {
       'properties': [
         {
           'name': 'modelValue / v-model',
-          'type': 'Array',
+          'type': 'IDetailPageItem[]',
+          'typeAnchorName': 'IDetailPageItem',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置表头详情栏的数据', 'en-US': 'Set the data in the table header details column' },
           'demoId': ''
@@ -41,18 +49,18 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "详情栏标题;默认为 '带表头的详情栏'",
+            'zh-CN': `详情栏标, 默认为 '数据'`,
-            'en-US': 'Details column title; The default value is Detail Bar with Table Header.'
+            'en-US': `Details field, default value is' Data '`
           },
           'demoId': 'custom-show-text'
         },
         {
           'name': 'text-split',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': `'---'`,
           'desc': {
-            'zh-CN': "详情栏标题分隔符;默认为 ':'",
+            'zh-CN': `详情栏标题分隔符`,
-            'en-US': "Details column title separator; The default value is ':'"
+            'en-US': 'Details column title separator'
           },
           'demoId': 'custom-show-text'
         },
@@ -61,8 +69,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗标题;默认为 '个性化设置'",
+            'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
-            'en-US': "Personalized pop-up window title; Default to'Personalization'"
+            'en-US': "Personalize pop-up title, default is'Personalized title'"
           },
           'demoId': 'custom-show-text'
         },
@@ -71,8 +79,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '字段'",
+            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
-            'en-US': "Personalized pop-up window header text title bar field; The default value is'Field'"
+            'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
           },
           'demoId': 'custom-show-text'
         },
@@ -81,8 +89,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "提示不能全部隐藏的提示语;默认为 '至少显示一个'",
+            'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
-            'en-US': "Prompt message that cannot be completely hidden; The default value is'At least one is displayed'"
+            'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
           },
           'demoId': 'custom-show-text'
         },
@@ -91,8 +99,9 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗表头文本操作栏字段;默认为 '隐藏'",
+            'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
-            'en-US': "Personalized pop-up window header text operation column field; The default value is'hidden'"
+            'en-US':
+              "Personalized pop-up window header text operation column field, The default value is'Click to hide'"
           },
           'demoId': 'custom-show-text'
         },
@@ -101,8 +110,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗确定按钮的文本;默认为 '确 定'",
+            'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
-            'en-US': "Text of the confirmation button in the personalized pop-up window; The default value is'OK'"
+            'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
           },
           'demoId': 'custom-show-text'
         },
@@ -111,8 +120,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': "个性化弹窗取消按钮的文本;默认为 '取 消'",
+            'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
-            'en-US': "Text of the cancel button in the personalized pop-up window; The default value is'Cancel'"
+            'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
           },
           'demoId': 'custom-show-text'
         }
@@ -120,5 +129,16 @@ export default {
       'events': [],
       'slots': []
     }
+  ],
+  types: [
+    {
+      name: 'IDetailPageItem',
+      type: 'interface',
+      code: `interface IDetailPageItem {
+  label: string
+  value: string
+  hidden?: boolean
+}`
+    }
   ]
 }

examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 
 <script setup lang="jsx">

examples/sites/demos/pc/app/scroll-text/basic-usage.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#basic-usage')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
 })

examples/sites/demos/pc/app/scroll-text/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 
 <script lang="jsx">

examples/sites/demos/pc/app/scroll-text/custom-scroll-text-composition-api.vue

@@ -1,7 +0,0 @@
-<template>
-  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
-</template>
-
-<script setup lang="jsx">
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
-</script>

examples/sites/demos/pc/app/scroll-text/custom-scroll-text.spec.ts

@@ -1,7 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义文本内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('scroll-text#custom-scroll-text')
-  await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
-})

examples/sites/demos/pc/app/scroll-text/custom-scroll-text.vue

@@ -1,13 +0,0 @@
-<template>
-  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
-</template>
-
-<script lang="jsx">
-import { ScrollText } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyScrollText: ScrollText
-  }
-}
-</script>

examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>
 

examples/sites/demos/pc/app/scroll-text/custom-text-style.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/scroll-text/hover-stop.spec.ts

@@ -4,5 +4,5 @@ test('鼠标悬停时文本停止滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#hover-stop')
   await page.locator('.tiny-scroll-text__content').dispatchEvent('mouseenter')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-play-state', 'paused')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-play-state', 'paused')
 })

examples/sites/demos/pc/app/scroll-text/hover-stop.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue

@@ -10,6 +10,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/scroll-text/scroll-direction.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('文字滚动方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-direction')
-  await expect(page.locator('.tiny-scroll-text__content').nth(0)).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
-  await expect(page.locator('.tiny-scroll-text__content').nth(1)).toHaveCSS('animation-name', 'moveRight')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
-  await expect(page.locator('.tiny-scroll-text__content').nth(2)).toHaveCSS('animation-name', 'moveUp')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
-  await expect(page.locator('.tiny-scroll-text__content').nth(3)).toHaveCSS('animation-name', 'moveDown')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
 })

examples/sites/demos/pc/app/scroll-text/scroll-direction.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/scroll-text/scroll-time.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('滚动时间间隔', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-time')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-duration', '10s')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-duration', '10s')
 })

examples/sites/demos/pc/app/scroll-text/scroll-time.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue

@@ -6,6 +6,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/scroll-text/slots.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js

@@ -5,7 +5,10 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '可通过 text 自定义文本内容。',
+        'en-US': 'You can use <code>text</code> to customize the text content. '
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -27,24 +30,6 @@ export default {
       },
       'codeFiles': ['hover-stop.vue']
     },
-    {
-      'demoId': 'custom-scroll-text',
-      'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Custom Text Content' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>text</code> 自定义文本内容。</p>\n',
-        'en-US': '<p>You can use <code>text</code> to customize the text content. </p>\n'
-      },
-      'codeFiles': ['custom-scroll-text.vue']
-    },
-    {
-      'demoId': 'slots',
-      'name': { 'zh-CN': '通过 solt 插槽自定义文本内容', 'en-US': 'Customize the text content through the Solt slot' },
-      'desc': {
-        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
-        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
-      },
-      'codeFiles': ['slots.vue']
-    },
     {
       'demoId': 'scroll-time',
       'name': { 'zh-CN': '滚动时间间隔', 'en-US': 'Scrolling Interval' },
@@ -62,6 +47,15 @@ export default {
         'en-US': '<p>You can use <code>class</code> to customize the text style. </p>\n'
       },
       'codeFiles': ['custom-text-style.vue']
+    },
+    {
+      'demoId': 'slots',
+      'name': { 'zh-CN': '插槽', 'en-US': 'Solt' },
+      'desc': {
+        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
+        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
+      },
+      'codeFiles': ['slots.vue']
     }
   ],
   apis: [
@@ -71,40 +65,40 @@ export default {
       'properties': [
         {
           'name': 'direction',
-          'type': 'string',
+          'type': `'up' | 'left' | 'down' | 'right'`,
-          'defaultValue': '该属性的默认值为 left',
+          'defaultValue': `'left'`,
           'desc': {
-            'zh-CN': '滚动的方向;该属性的可选值为 up / left / down / right',
+            'zh-CN': '滚动的方向',
-            'en-US': 'Scrolling direction; The optional values of this attribute are up / left / down / right'
+            'en-US': 'Scrolling direction'
           },
           'demoId': 'scroll-direction'
         },
         {
           'name': 'hover-stop',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': 'hover 滚动是否停止，可选值为 false 或 true；默认值true。',
+            'zh-CN': 'hover 滚动是否停止',
-            'en-US': 'Whether to stop scrolling. The value can be false or true. The default value is true.'
+            'en-US': 'Whether to stop scrolling.'
           },
           'demoId': 'hover-stop'
         },
         {
           'name': 'time',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 5',
+          'defaultValue': '5',
           'desc': {
-            'zh-CN': '整个滚动过程所用的时间，默认值 5s 。',
+            'zh-CN': '整个滚动过程所用的时间',
-            'en-US': 'Time taken for scrolling. The default value is 5s.'
+            'en-US': 'Time taken for scrolling'
           },
           'demoId': 'scroll-time'
         },
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ScrollText',
+          'defaultValue': `'ScrollText'`,
           'desc': { 'zh-CN': '滚动的文本内容', 'en-US': 'Scrolled text content' },
-          'demoId': 'custom-scroll-text'
+          'demoId': 'basic-usage'
         }
       ],
       'events': [],
@@ -113,7 +107,7 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
+          'desc': { 'zh-CN': '默认插槽，滚动的内容的插槽', 'en-US': 'Default slot, the slot for scrolling content' },
           'demoId': 'custom-scroll-text'
         }
       ]