test(e2e): fix e2e error

Match-id-e5c4168bb3a0f3895550eb25c7b6ce83dd6db3f5

.all-contributorsrc

@@ -547,6 +547,7 @@
         "code"
       ]
     },
+	
     {
       "login": "Floyd-bit",
       "name": "Floyd",

.github/workflows/gpt-ci.yaml

@@ -0,0 +1,26 @@
+name: GPT Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  Review:
+    if: ${{ contains(github.event.*.labels.*.name, 'gpt-review') }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: anc95/ChatGPT-CodeReview@main
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          OPENAI_API_KEY: ${{secrets.OPENAI_API_KEY}}
+          LANGUAGE: Chinese
+          PROMPT: ${{ secrets.PROMPT }}
+          max_tokens: ${{ secrets.MAX_TOKEN }} 
+          top_p: 1
+          temperature: 1
+          MAX_PATCH_LENGTH: ${{ secrets.MAX_PATH_LENGTH }} # 当修改行数超过设定值后, 则不会请求gpt进行code review
+          MODEL: ${{ secrets.MODEL }} # https://platform.openai.com/docs/models

.github/workflows/preview-build.yml

@@ -1,66 +0,0 @@
-name: Preview Build
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build-site:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8.3.1
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build website
-        run: pnpm build:site
-        env:
-          NODE_OPTIONS: --max-old-space-size=4096
-
-      - name: Compressed into zip
-        run: |
-          zip -r site.zip examples/sites/dist/
-
-      - name: Upload Site Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: site
-          path: site.zip
-          retention-days: 3
-
-      - name: Save PR number
-        if: ${{ always() }}
-        run: echo ${{ github.event.number }} > ./pr-id.txt
-
-      - name: Upload PR number
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
-        with:
-          name: pr
-          path: ./pr-id.txt

.github/workflows/preview-deploy.yml

@@ -1,77 +0,0 @@
-name: Preview Deploy
-
-on:
-  workflow_run:
-    workflows: ['Preview Build']
-    types:
-      - completed
-
-jobs:
-  success:
-    name: Build successfully
-    runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    steps:
-      - name: Download Pr Artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: pr
-      - name: Save PR Id
-        id: pr
-        run: echo "::set-output name=id::$(<pr-id.txt)"
-
-      - name: Download Dist Artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          workflow_conclusion: success
-          name: site
-
-      - name: Unzip
-        run: |
-          unzip site.zip
-
-      - name: Upload To Surge
-        id: deploy
-        run: |
-          export DEPLOY_DOMAIN=https://tiny-vue-pr-${{ steps.pr.outputs.id }}.surge.sh
-          npx surge --project examples/sites/dist/ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
-
-      - name: Create Comment
-        uses: peter-evans/create-or-update-comment@v2
-        with:
-          issue-number: ${{ steps.pr.outputs.id }}
-          body: |
-            PR preview has been successfully built and deployed to https://tiny-vue-pr-${{ steps.pr.outputs.id }}.surge.sh.
-
-      - run: |
-          rm -rf examples/sites/dist/
-
-      - name: The job Failed
-        if: ${{ failure() }}
-        uses: peter-evans/create-or-update-comment@v2
-        with:
-          issue-number: ${{ steps.pr.outputs.id }}
-          body: |
-            Deploy PR preview failed.
-
-  failed:
-    name: Build failure
-    runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'failure' }}
-    steps:
-      - name: Download Pr Artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          workflow: ${{ github.event.workflow_run.workflow_id }}
-          name: pr
-      - name: Save PR Id
-        id: pr
-        run: echo "::set-output name=id::$(<pr-id.txt)"
-      - name: The job Failed
-        uses: peter-evans/create-or-update-comment@v2
-        with:
-          issue-number: ${{ steps.pr.outputs.id }}
-          body: |
-            Deploy PR preview failed.

.github/workflows/test-e2e-pr-comment.yml

@@ -0,0 +1,48 @@
+name: test-e2e-pr-comment
+
+on:
+  workflow_run:
+    workflows: ['E2E Test PR']
+    types:
+      - completed
+
+jobs:
+  comment:
+    permissions:
+      pull-requests: write
+    name: Comment User Tip
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Pr Artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: pr
+          if_no_artifact_found: success
+      - name: Save PR Id
+        id: pr
+        run: |
+          if [ -f pr-id.txt ]; then
+            echo "id=$(cat pr-id.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Download user-tip.txt
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: user-tip
+          if_no_artifact_found: success
+
+      - id: txtToOutput
+        run: |
+          if [ -f user-tip.txt ]; then
+            echo 'text<<EOF' >> $GITHUB_OUTPUT
+            cat user-tip.txt >> $GITHUB_OUTPUT
+            echo 'EOF' >> $GITHUB_OUTPUT
+          fi
+      - uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            ${{ steps.txtToOutput.outputs.text }}
+          comment_tag: e2e-tip
+          pr_number: ${{ steps.pr.outputs.id }}

.github/workflows/test-e2e-pr.yml

@@ -14,6 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       testComponents: ${{ steps.parseTitle.outputs.testComponents }}
+      testclis: ${{ steps.parsetestCli.outputs.testClis }}
     steps:
       - name: Parse Title
         id: parseTitle
@@ -32,17 +33,53 @@ jobs:
               components = [...new Set(components)].slice(0, 3).join(' ')
               core.setOutput('testComponents', components)
             } else {
-              const warningString =`
+              const warningString =`**[e2e-test-warn]**
               The component to be tested is missing.
 
               The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".
               
               Please make sure you've read our [contributing guide](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
               `
+              core.setOutput('tip', warningString)
               core.warning(warningString)
             }
+      - name: generate user-tip.txt
+        if: ${{ steps.parseTitle.outputs.tip }}
+        run: |
+          cat << EOF > user-tip.txt
+          ${{ steps.parseTitle.outputs.tip }}
+          EOF
+      - name: Upload User Tip
+        if: ${{ steps.parseTitle.outputs.tip }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: user-tip
+          path: user-tip.txt
+          retention-days: 1
+      - name: Save PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        run: echo ${{ github.event.number }} > ./pr-id.txt
+
+      - name: Upload PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: pr
+          path: ./pr-id.txt
+      - name: Parse Test Cli
+        id: parsetestCli
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const testClis = '${{ vars.PLAYWRIGHT_CLIS }}' ? '${{ vars.PLAYWRIGHT_CLIS }}'.split(',') : ['pnpm test:e2e3']
+            core.setOutput('testclis', JSON.stringify(testClis))
+
   pr-test:
     if: ${{ needs.parse-components.outputs.testComponents }}
+    strategy:
+      matrix:
+        testcli: ${{ fromJson(needs.parse-components.outputs.testclis) }}
+
     name: PR E2E Test
     needs: parse-components
     runs-on: ubuntu-latest
@@ -78,11 +115,8 @@ jobs:
       - name: Install dependencies
         run: pnpm i --no-frozen-lockfile
 
-      - name: dev start
-        run: pnpm site & sleep 5
-
       - name: Install Playwright browsers
         run: pnpm install:browser --with-deps chromium
 
       - name: E2E Test
-        run: pnpm test:e2e3 ${{ env.TEST_COMPONENTS }} --reporter=line --retries=1 --workers=2
+        run: ${{ matrix.testcli }} ${{ env.TEST_COMPONENTS }} --retries=1 --workers=2

examples/sites/demos/apis/card.js

@@ -1,5 +1,5 @@
 export default {
-  mode: ['mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'Card',
@@ -14,7 +14,8 @@ export default {
             'en-US':
               'Indicates whether the card width is automatically expanded. After the setting, the card width is not fixed.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
           mfDemo: 'card-auto-width'
         },
         {
@@ -26,7 +27,8 @@ export default {
             'en-US':
               'Set single-choice, multiple-choice, single-choice, and radio. Multi-choice/checkbox. You need to set the label at the same time.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'check-type-checkbox',
           mfDemo: 'check-type-checkbox'
         },
         {
@@ -37,7 +39,8 @@ export default {
             'zh-CN': '卡片的class',
             'en-US': 'Class of the card'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-class',
           mfDemo: 'card-custom-class'
         },
         {
@@ -48,7 +51,8 @@ export default {
             'zh-CN': '卡片禁用',
             'en-US': 'Card disabled'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-disabled',
           mfDemo: 'card-disabled'
         },
         {
@@ -59,8 +63,9 @@ export default {
             'zh-CN': '卡片内容区域的高度',
             'en-US': 'Height of the card content area'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'card-height'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'card-height',
+          pcDemo: 'custom-class'
         },
         {
           name: 'icon-more',
@@ -70,7 +75,8 @@ export default {
             'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
             'en-US': 'More button icons can be replaced by a svg icon object.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
           mfDemo: 'card-icon-more'
         },
         {
@@ -81,7 +87,8 @@ export default {
             'zh-CN': 'checkbox或radio的label',
             'en-US': 'Checkbox or radio label.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'check-type-checkbox',
           mfDemo: 'card-label'
         },
         {
@@ -92,7 +99,8 @@ export default {
             'zh-CN': '操作按钮配置',
             'en-US': ''
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'operate-bar',
           mfDemo: ''
         },
         {
@@ -103,7 +111,8 @@ export default {
             'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
             'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-size',
           mfDemo: 'card-size'
         },
         {
@@ -114,7 +123,8 @@ export default {
             'zh-CN': '图片或者视频的地址',
             'en-US': 'Address of a picture or video.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-type',
           mfDemo: 'card-src'
         },
         {
@@ -125,7 +135,8 @@ export default {
             'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
             'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-status',
           mfDemo: 'card-status'
         },
         {
@@ -136,7 +147,8 @@ export default {
             'zh-CN': '卡片的标题',
             'en-US': 'The title of the card.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-status',
           mfDemo: 'card-title'
         },
         {
@@ -147,7 +159,8 @@ export default {
             'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型。',
             'en-US': 'Set the card type. The options are text, image, video, and logo.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-type',
           mfDemo: 'card-type'
         },
         {
@@ -158,7 +171,8 @@ export default {
             'zh-CN': '绑定值，默认为空',
             'en-US': ''
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'check-type-checkbox',
           mfDemo: ''
         }
       ],
@@ -171,7 +185,8 @@ export default {
             'zh-CN': '组件选中/取消选中事件',
             'en-US': 'Component check/uncheck event'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-events',
           mfDemo: 'card-events'
         },
         {
@@ -182,8 +197,21 @@ export default {
             'zh-CN': '操作栏按钮点击事件',
             'en-US': 'Operation bar button click event'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'card-events',
           mfDemo: 'card-events'
+        },
+        {
+          name: 'click',
+          type: 'Function()',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击卡片事件',
+            'en-US': 'Click card event'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
         }
       ],
       methods: [],
@@ -196,7 +224,8 @@ export default {
             'zh-CN': '组件默认插槽',
             'en-US': 'Component Default Slot'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot',
           mfDemo: 'slot'
         },
         {
@@ -207,7 +236,8 @@ export default {
             'zh-CN': '组件默认插槽',
             'en-US': 'Component Default Slot'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot',
           mfDemo: 'slot'
         },
         {
@@ -218,7 +248,8 @@ export default {
             'zh-CN': '标题插槽',
             'en-US': 'Header Slot'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot',
           mfDemo: 'slot'
         },
         {
@@ -229,7 +260,8 @@ export default {
             'zh-CN': '标题左侧插槽',
             'en-US': 'Header Left Slot'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot',
           mfDemo: 'slot'
         },
         {
@@ -240,7 +272,8 @@ export default {
             'zh-CN': '标题右侧插槽',
             'en-US': 'Header right slot'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot',
           mfDemo: 'slot'
         }
       ]

examples/sites/demos/apis/dialog-box.js

@@ -61,6 +61,14 @@ export default {
           mode: ['pc'],
           pcDemo: 'destroy-on-close'
         },
+        {
+          name: 'drag-outside-window',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: { 'zh-CN': '可将弹窗拖出窗口', 'en-US': 'Pop ups can be dragged out of the window' },
+          mode: ['pc'],
+          pcDemo: 'draggable'
+        },
         {
           name: 'dialog-class',
           type: 'string',
@@ -208,7 +216,7 @@ export default {
         {
           name: 'top',
           type: 'string',
-          defaultValue: '15vh',
+          defaultValue: `'15vh'`,
           desc: {
             'zh-CN': '设置弹出框距离窗口顶部的高度',
             'en-US': 'Set the height of the popup from the top of the window'
@@ -230,7 +238,7 @@ export default {
         {
           name: 'width',
           type: 'string',
-          defaultValue: '500px',
+          defaultValue: `'500px'`,
           desc: {
             'zh-CN': '弹出框的宽度',
             'en-US': 'Wideness of the dialog box that is displayed'

examples/sites/demos/apis/fall-menu.js

@@ -7,10 +7,10 @@ export default {
       props: [
         {
           name: 'data',
-          type: 'object | object[]',
+          type: 'Array',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置瀑布菜单的数据。',
+            'zh-CN': '设置瀑布菜单的数据',
             'en-US': 'Set the waterfall menu data. ;Set the data of the waterfall menu.'
           },
           mode: ['pc'],

examples/sites/demos/apis/file-upload.js

@@ -303,7 +303,8 @@ export default {
         },
         {
           name: 'http-request',
-          type: '() => Promise',
+          type: '(file: IFile) => Promise<any>',
+          typeAnchorName: 'IFile',
           defaultValue: '',
           desc: {
             'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现; 由于 TinyVue 官网为 Mock 上传不能执行上传',

examples/sites/demos/apis/multi-select.js

@@ -6,34 +6,104 @@ export default {
       type: 'component',
       props: [
         {
-          name: 'dataSource',
-          type: '[]',
-          defaultValue: '',
+          name: 'data-source',
+          type: 'IMultiSelectMenu[]',
+          typeAnchorName: 'IMultiSelectMenu',
+          defaultValue: '[]',
           desc: {
-            'zh-CN': '<p>数据</p>',
-            'en-US': 'display different button'
+            'zh-CN': '数据源',
+            'en-US': 'data source'
           },
           mode: ['mobile'],
           mobileDemo: 'basic-usage'
         },
         {
-          name: 'defaultSelectedArray',
-          type: '[]',
+          name: 'default-selected-array',
+          type: 'number[]',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>默认值</p>',
-            'en-US': 'display different button'
+            'zh-CN': `默认值，当 type='wheel' 时适用`,
+            'en-US': `default selected value, used when type='wheel'`
           },
           mode: ['mobile'],
-          mobileDemo: 'basic-usage'
+          mobileDemo: 'type-wheel'
+        },
+        {
+          name: 'disabled',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '禁用',
+            'en-US': 'disabled'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'disabled'
+        },
+        {
+          name: 'filterable',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '可筛选',
+            'en-US': 'filterable'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'filter'
+        },
+        {
+          name: 'mask',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示遮罩层',
+            'en-US': 'to show mask'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'mask'
+        },
+        {
+          name: 'mask-options',
+          type: 'IMaskOptions',
+          typeAnchorName: 'IMaskOptions',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN':
+              '遮罩层配置：<ul><li>zIndex: 遮罩层的层叠数值</li><li>cancelTouch: 是否禁用 touch 事件，禁用后点击遮罩层不能关闭下拉框</li></ul>',
+            'en-US':
+              'Mask layer settings, including the following properties: <p>zIndex: the stacking order value of the mask layer;</p><p>cancelTouch: whether to disable touch events.</p>'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'mask-options'
+        },
+        {
+          name: 'search-placeholder',
+          type: 'string',
+          defaultValue: '搜索',
+          desc: {
+            'zh-CN': '搜索框默认提示',
+            'en-US': 'search input placeholder'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'filter'
+        },
+        {
+          name: 'type',
+          type: `'list' | 'wheel'`,
+          defaultValue: '',
+          desc: {
+            'zh-CN': '选项外观，其中 list：列表形式；wheel：滑轮模式',
+            'en-US': 'option appearance'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'wheel'
         },
         {
           name: 'v-model/modelValue',
-          type: '[]',
-          defaultValue: '',
+          type: '(string | string[])[]',
+          defaultValue: '[]',
           desc: {
             'zh-CN': '<p>选中值</p>',
-            'en-US': ''
+            'en-US': '<p>selected value</p>'
           },
           mode: ['mobile'],
           mobileDemo: 'basic-usage'
@@ -41,28 +111,77 @@ export default {
       ],
       events: [
         {
-          name: 'confim',
-          defaultValue: '',
+          name: 'item-click',
+          type: '(option, headerIndex) => void',
           desc: {
-            'zh-CN': '<p>确认事件</p>',
-            'en-US': 'display different button'
+            'zh-CN': '点击选项事件，当 type="list" 时适用',
+            'en-us': 'click option event, applicable when type = "list"'
           },
           mode: ['mobile'],
-          mobileDemo: 'basic-usage'
+          mobileDemo: 'event-click-item'
+        },
+        {
+          name: 'confirm',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `确认事件，当 type='wheel' 时适用`,
+            'en-US': `confirm selection event, applicable when the type = 'wheel'`
+          },
+          mode: ['mobile'],
+          mobileDemo: 'type-wheel'
         },
         {
           name: 'reset',
+          type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>重置事件</p>',
-            'en-US': 'display different button'
+            'zh-CN': `重置事件，当 type='wheel' 时适用`,
+            'en-US': `reset selection event, applicable when the type = 'wheel'`
           },
           mode: ['mobile'],
-          mobileDemo: 'basic-usage'
+          mobileDemo: 'type-wheel'
         }
       ],
-      methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'footer',
+          desc: {
+            'zh-CN': '选项底部插槽',
+            'en-US': 'slot under options'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slots'
+        }
+      ]
+    }
+  ],
+
+  types: [
+    {
+      name: 'IMultiSelectMenu',
+      type: 'interface',
+      code: `
+interface IMultiSelectMenu {
+  title: string, // 菜单项标题
+  options: IMultiSelectOption[], // 选项数据
+  multiple?: boolean, // 是否多选
+  disabled?: boolean, // 菜单项是否禁用
+  hasFooter?: boolean // 是否显示底部
+}
+`
+    },
+    {
+      name: 'IMultiSelectOption',
+      type: 'interface',
+      code: `
+interface IMultiSelectOption {
+  label: string, // 选项内容
+  value: string, // 选项值
+  disabled?: boolean, // 是否禁用
+  children?: IMultiSelectOption[], // 子选项数据
+}
+`
     }
   ]
 }

examples/sites/demos/apis/popeditor.js

@@ -96,8 +96,8 @@ export default {
         },
         {
           name: 'grid-op',
-          typeAnchorName: 'grid#IGridOp',
-          type: 'IGridOp',
+          typeAnchorName: 'grid#API',
+          type: `InstanceType&#60typeof TinyGrid&#62['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置弹出面板中表格组件的配置信息',
@@ -141,8 +141,8 @@ export default {
         },
         {
           name: 'pager-op',
-          typeAnchorName: 'pager#IPagerOp',
-          type: 'IPagerOp',
+          typeAnchorName: 'pager#API',
+          type: `InstanceType&#60typeof TinyPager&#62['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置分页配置',
@@ -165,7 +165,7 @@ export default {
         {
           name: 'popseletor',
           type: 'string',
-          defaultValue: 'grid',
+          defaultValue: `'grid'`,
           desc: {
             'zh-CN': '设置弹出面板中可显示的树或者表格组件',
             'en-US': 'Set the tree or table components that can be displayed in the pop-up panel.'
@@ -198,7 +198,8 @@ export default {
         },
         {
           name: 'remote-search',
-          type: '({ page, conditions }) => void',
+          type: 'IRemoteSearch',
+          typeAnchorName: 'IRemoteSearch',
           defaultValue: '',
           desc: {
             'zh-CN': '配置远程搜索',
@@ -220,8 +221,8 @@ export default {
         },
         {
           name: 'selected-box-op',
-          typeAnchorName: 'ISelectedBoxOp',
-          type: 'ISelectedBoxOp',
+          typeAnchorName: 'dialog-select#ISelectedBoxOption',
+          type: 'ISelectedBoxOption',
           defaultValue: '',
           desc: {
             'zh-CN': '通过属性 selected-box-op 指定 SelectedBox 组件配置，可以把已选表格显示为已选栏',
@@ -301,7 +302,7 @@ export default {
         {
           name: 'tabindex',
           type: 'string',
-          defaultValue: '1',
+          defaultValue: `'1'`,
           desc: {
             'zh-CN': '设置通过 Tab 键获焦及获焦顺序（readonly 属性设置为 false 时有效）',
             'en-US':
@@ -313,7 +314,7 @@ export default {
         {
           name: 'text-field',
           type: 'string',
-          defaultValue: 'label',
+          defaultValue: `'label'`,
           desc: {
             'zh-CN': '设置输入框中显示文本的字段，提交数据时，不提交该显示文本',
             'en-US': 'Set the text field in the text box. When data is submitted, the text is not submitted.'
@@ -324,7 +325,7 @@ export default {
         {
           name: 'text-split',
           type: 'string',
-          defaultValue: '/',
+          defaultValue: `'/'`,
           desc: {
             'zh-CN': '在多选的情况下，设置输入框中要显示多个数据时的分隔符',
             'en-US': 'Separator for displaying multiple records in the text box when multiple records are selected.'
@@ -359,7 +360,7 @@ export default {
         {
           name: 'value-field',
           type: 'string',
-          defaultValue: 'id',
+          defaultValue: `'id'`,
           desc: {
             'zh-CN': '设置输入框要提交数据的字段',
             'en-US': 'Set the field to which data is to be submitted in the text box.'
@@ -370,7 +371,7 @@ export default {
         {
           name: 'value-split',
           type: 'string',
-          defaultValue: ';',
+          defaultValue: `';'`,
           desc: {
             'zh-CN': '在多选的情况下，设置输入框要提交多个数据时的分隔符',
             'en-US':
@@ -395,7 +396,7 @@ export default {
       events: [
         {
           name: 'change',
-          type: '(commitValue, selectedDatas) => void',
+          type: '(commitValue: number, selectedDatas: Object) => void',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -476,6 +477,11 @@ interface IConditions {
   label: string
 }
       `
+    },
+    {
+      name: 'IRemoteSearch',
+      type: 'type',
+      code: `type IRemoteSearch = ({ page: { currentPage: number, pageSize: number }, conditions: { [K in IConditions['field']]: string } }) => void`
     }
   ]
 }

examples/sites/demos/apis/search.js

@@ -74,6 +74,17 @@ export default {
           pcDemo: 'events',
           mfDemo: ''
         },
+        {
+          name: 'maxlength',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'input 框的原生属性，限制最大输入字符数【3.14.0新增】',
+            'en-US': 'The native properties of the input box limit the maximum number of input characters[New 3.14.0]'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
         {
           name: 'mini',
           type: 'boolean',

examples/sites/demos/apis/slider.js

@@ -111,8 +111,8 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否显示输入框，仅在非范围选择时有效',
-            'en-US': 'Indicates whether to display the text box. This parameter is valid only for non-range selection'
+            'zh-CN': '是否显示输入框',
+            'en-US': 'Indicates whether to display the text box.'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: 'show-input',
@@ -203,6 +203,17 @@ export default {
           mode: ['mobile'],
           mobileDemo: ''
         },
+        {
+          name: 'marks',
+          type: `{ [key:number]: string }`,
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>设置滑杆的刻度值</p>',
+            'en-US': 'Set the scale value of the slide bar'
+          },
+          mode: ['pc'],
+          pcDemo: 'marks'
+        },
         {
           name: 'vertical',
           type: 'boolean',

examples/sites/demos/apis/tabs.js

@@ -282,6 +282,45 @@ export default {
           pcDemo: 'tabs-events-close',
           mobileDemo: 'add-delete-tab',
           mfDemo: ''
+        },
+        {
+          name: 'beforeClose',
+          type: 'Function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭页签前的回调函数，入参为页签名。如果函数返回false 或 拒绝的Promise，则不关闭页签',
+            'en-US':
+              'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tabs-events-close',
+          mfDemo: ''
+        },
+        {
+          name: 'overflow-title',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '页签是否在超过 title-width 省略显示',
+            'en-US':
+              'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'overflow-title',
+          mfDemo: ''
+        },
+        {
+          name: 'title-width',
+          type: 'String',
+          defaultValue: '256px',
+          desc: {
+            'zh-CN': '当 overflow-title 为 true 时，指定页签标题的最大宽度',
+            'en-US':
+              'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'overflow-title',
+          mfDemo: ''
         }
       ],
       events: [

examples/sites/demos/apis/time-line.js

@@ -40,6 +40,17 @@ export default {
           pcDemo: 'basic-usage',
           mfDemo: ''
         },
+        {
+          name: 'fold-disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '禁用折叠',
+            'en-US': 'to disable folding feature'
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
         {
           name: 'horizontal',
           type: 'boolean',
@@ -51,12 +62,23 @@ export default {
           mode: ['pc'],
           pcDemo: ''
         },
+        {
+          name: 'limited-nodes',
+          type: 'number | string',
+          defaultValue: '3',
+          desc: {
+            'zh-CN': '折叠后展示的节点个数',
+            'en-US': 'number of nodes displayed after folding'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'limited-nodes'
+        },
         {
           name: 'line-width',
           type: 'string | number',
           defaultValue: '',
           desc: {
-            'zh-CN': "连接线长度，仅当 text-position 取值为 'right' 时生效，设置后 space 属性失效。",
+            'zh-CN': "连接线长度，仅当 text-position 取值为 'right' 时生效，设置后 space 属性失效",
             'en-US':
               "The length of the connection line and it is valid only when text-position is set to 'right'. After setting, the space property is invalid"
           },
@@ -75,6 +97,17 @@ export default {
           pcDemo: 'custom-field',
           mfDemo: ''
         },
+        {
+          name: 'node-max',
+          type: 'number | string',
+          defaultValue: '7',
+          desc: {
+            'zh-CN': '最大显示节点数',
+            'en-US': 'maximum nodes to display'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'node-max'
+        },
         {
           name: 'only-number',
           type: 'boolean',

examples/sites/demos/apis/tooltip.js

@@ -141,7 +141,7 @@ export default {
           name: 'placement',
           typeAnchorName: 'IPopperPlacement',
           type: 'IPopperPlacement',
-          defaultValue: ' "bottom"',
+          defaultValue: "'bottom'",
           desc: {
             'zh-CN': 'Tooltip 的出现位置',
             'en-US': 'Location where the tooltip appears'

examples/sites/demos/mobile-first/app/card/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-card title="这是卡片标题" type="image" :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`">
+  <tiny-card title="这是卡片标题" type="image" :src="imageUrl">
     <p>
       这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
       这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -15,7 +15,9 @@ export default {
     TinyCard: Card
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
+    }
   }
 }
 </script>

examples/sites/demos/mobile-first/app/card/card-type.vue

@@ -7,11 +7,7 @@
       </p>
     </tiny-card>
     <br />
-    <tiny-card
-      title="这是图片类型"
-      type="image"
-      :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`"
-    >
+    <tiny-card title="这是图片类型" type="image" :src="img1">
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -29,12 +25,7 @@
       </p>
     </tiny-card>
     <br />
-    <tiny-card
-      title="这是logo类型"
-      type="logo"
-      size="mini"
-      :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`"
-    >
+    <tiny-card title="这是logo类型" type="logo" size="mini" :src="img2">
       <p>这是一段长文本内容，这是一段长文本内容</p>
     </tiny-card>
   </div>
@@ -48,7 +39,10 @@ export default {
     TinyCard: Card
   },
   data() {
-    return {}
+    return {
+      img1: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
+      img2: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+    }
   }
 }
 </script>

examples/sites/demos/mobile-first/app/card/slot.vue

@@ -34,11 +34,7 @@
       </p>
       <template #footer>
         <div class="flex">
-          <img
-            :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`"
-            class="h-9 w-9"
-            alt="user-head"
-          />
+          <img :src="imageUrl" class="h-9 w-9" alt="user-head" />
           <div class="pl-4">
             <p class="text-sm">刘小华</p>
             <p class="text-xs text-color-text-secondary">2023-03-20 10:10:10</p>
@@ -60,6 +56,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
       options: [
         {
           text: '删除列表',

examples/sites/demos/mobile-first/app/carousel/close-loop.vue

@@ -2,16 +2,16 @@
   <div class="w-80">
     <tiny-carousel aspect-ratio="2:1" :loop="false">
       <tiny-carousel-item class="">
-        <img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`" alt="" />
+        <img :src="img1" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`" alt="" />
+        <img :src="img2" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`" alt="" />
+        <img :src="img3" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`" alt="" />
+        <img :src="img4" alt="" />
       </tiny-carousel-item>
     </tiny-carousel>
   </div>
@@ -24,6 +24,14 @@ export default {
   components: {
     TinyCarousel: Carousel,
     TinyCarouselItem: CarouselItem
+  },
+  data() {
+    return {
+      img1: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
+      img2: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`,
+      img3: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
+      img4: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`
+    }
   }
 }
 </script>

examples/sites/demos/mobile-first/app/column-list-item/basic-usage.vue

@@ -3,7 +3,7 @@
     <tiny-column-list-item
       v-model="value"
       :show-checkbox="true"
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
+      :image="imageUrl"
       size="medium"
       :options="options1"
       :flex-grow="[1, 1]"
@@ -26,12 +26,7 @@
         </ul>
       </template>
     </tiny-column-list-item>
-    <tiny-column-list-item
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
-      size="medium"
-      :options="options2"
-      class="mb-3"
-    >
+    <tiny-column-list-item :image="imageUrl" size="medium" :options="options2" class="mb-3">
       <template #column1>
         <ul class="text-color-fill-secondary">
           <li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
@@ -106,6 +101,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
       value: ['1'],
       options1: [
         {

examples/sites/demos/mobile-first/app/column-list-item/custom-width.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
-      :flex-grow="[0, 0]"
-      :flex-basis="['25%', '25%']"
-      class="mb-3"
-    >
+    <tiny-column-list-item :image="imageUrl" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
@@ -61,7 +56,9 @@ export default {
     TinyColumnListItem: ColumnListItem
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
+    }
   }
 }
 </script>

examples/sites/demos/mobile-first/app/column-list-item/icon-click-event.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
-      @icon-click="iconClick"
-      :options="options"
-    >
+    <tiny-column-list-item :image="imageUrl" @icon-click="iconClick" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
@@ -46,6 +42,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
       options: [
         {
           text: '删除列表',

examples/sites/demos/mobile-first/app/column-list-item/icon-disabled.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
-      @icon-click="iconClick"
-      :options="options"
-    >
+    <tiny-column-list-item :image="imageUrl" @icon-click="iconClick" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
@@ -46,6 +42,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
       options: [
         {
           text: '删除列表',

examples/sites/demos/mobile-first/app/column-list-item/size.vue

@@ -3,7 +3,7 @@
     <tiny-column-list-item
       v-model="checked"
       :show-checkbox="true"
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
+      :image="imageUrl"
       :size="size"
       :options="options"
       :flex-grow="[1, 3]"
@@ -23,11 +23,7 @@
         </ul>
       </template>
     </tiny-column-list-item>
-    <tiny-column-list-item
-      :image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
-      :size="size"
-      :options="options"
-    >
+    <tiny-column-list-item :image="imageUrl" :size="size" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
@@ -66,6 +62,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
       checked: true,
       size: 'small',
       options: [

examples/sites/demos/mobile-first/app/time-line/limited-nodes.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLine } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line/node-max.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLine } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/time-line/webdoc/time-line.js

@@ -71,12 +71,37 @@ export default {
         'en-US': 'Collapse Timeline'
       },
       desc: {
-        'zh-CN': '<p>当节点超过七项时，自动折叠节点，仅展示最近三项，点击后展开</p>',
+        'zh-CN': '<p>当节点个数达到七项时，自动折叠节点，仅展示最近三项，点击后展开。</p>',
         'en-US':
           '<p>When there are more than seven nodes, the system automatically collapses the nodes and displays only the latest three nodes.</p>'
       },
       codeFiles: ['fold-time.vue']
     },
+    {
+      demoId: 'node-max',
+      name: {
+        'zh-CN': '触发折叠节点数',
+        'en-US': 'Number of Nodes Triggering Folding'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>node-max</code> 属性可以配置节点达到指定个数后自动折叠节点。</p>',
+        'en-US':
+          '<p>Use <code>node-max</code> to automatically collapse nodes after reaching a specified number of nodes.</p>'
+      },
+      codeFiles: ['node-max.vue']
+    },
+    {
+      demoId: 'limited-nodes',
+      name: {
+        'zh-CN': '折叠后节点数',
+        'en-US': 'Number of Nodes After Folding'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>limited-nodes</code> 属性可以设置折叠后展示的节点个数。</p>',
+        'en-US': '<p>Use <code>node-max</code> to set the number of nodes displayed after folding.</p>'
+      },
+      codeFiles: ['limited-nodes.vue']
+    },
     {
       demoId: 'auto-slot',
       name: {

examples/sites/demos/mobile/app/alert/icon.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Alert } from '@opentiny/vue'
 import { iconCustom } from '@opentiny/vue-icon'
 

examples/sites/demos/mobile/app/alert/size.vue

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

examples/sites/demos/mobile/app/alert/slot-default.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="alert-wrap">
     <tiny-alert>
-      <span style="color: red">根据 default slot 自定义内容</span>
+      <span>配置详细信息请点击</span>
+      <a href="#" class="link">默认配置说明</a>
     </tiny-alert>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Alert } from '@opentiny/vue'
 
 export default {
@@ -20,4 +21,9 @@ export default {
 .alert-wrap .tiny-mobile-alert {
   margin-bottom: 8px;
 }
+
+.link {
+  color: #1476ff;
+  margin-left: 8px;
+}
 </style>

examples/sites/demos/mobile/app/exception/buttonText.vue

@@ -3,7 +3,7 @@
     <tiny-exception
       type="nodata"
       button-text="重试"
-      :imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
+      :imageUrl="imageUrl"
       message="网络异常，请稍后再试，或者联系管理员给您处理"
     ></tiny-exception>
   </div>
@@ -17,7 +17,9 @@ export default {
     TinyException: Exception
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+    }
   },
   methods: {
     test() {

examples/sites/demos/mobile/app/exception/exceptionClass.vue

@@ -3,7 +3,7 @@
     <tiny-exception
       type="nodata"
       button-text="重试"
-      :imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
+      :imageUrl="imageUrl"
       message="网络异常，请稍后再试，或者联系管理员给您处理"
     ></tiny-exception>
   </div>
@@ -17,7 +17,9 @@ export default {
     TinyException: Exception
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+    }
   },
   methods: {
     test() {

examples/sites/demos/mobile/app/exception/message.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="tiny-mobile-exception-demo">
-    <tiny-exception
-      type="nodata"
-      message="自定义文本内容"
-      :imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
-      @btn-click="test"
-    ></tiny-exception>
+    <tiny-exception type="nodata" message="自定义文本内容" :imageUrl="imageUrl" @btn-click="test"></tiny-exception>
   </div>
 </template>
 
@@ -17,7 +12,9 @@ export default {
     TinyException: Exception
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+    }
   },
   methods: {
     test() {

examples/sites/demos/mobile/app/exception/type.vue

@@ -3,7 +3,7 @@
     <tiny-exception
       type="nodata"
       button-text="重试"
-      :imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
+      :imageUrl="imageUrl"
       message="网络异常，请稍后再试，或者联系管理员给您处理"
     ></tiny-exception>
   </div>
@@ -17,7 +17,9 @@ export default {
     TinyException: Exception
   },
   data() {
-    return {}
+    return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+    }
   },
   methods: {
     test() {

examples/sites/demos/mobile/app/multi-select/basic-usage.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="demo-multi-select">
-    <tiny-multi-select :data-source="data" v-model="value"> </tiny-multi-select>
+    <h4 class="title">1. 多下拉项：</h4>
+    <tiny-multi-select :data-source="data1" v-model="value1"> </tiny-multi-select>
+    <p>多下拉项 value: {{ value1 }}</p>
+    <br />
 
-    <p>value: {{ value }}</p>
+    <h4 class="title">2. 单下拉项：</h4>
+    <tiny-multi-select :data-source="data2" v-model="value2"> </tiny-multi-select>
+    <p>单下拉项 value: {{ value2 }}</p>
   </div>
 </template>
 
@@ -15,8 +20,8 @@ export default {
   },
   data() {
     return {
-      value: ['', '', ''],
-      data: [
+      value1: ['2020年', '欧洲巴黎', ['私有云']],
+      data1: [
         {
           title: '时间',
           options: [
@@ -25,45 +30,45 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
               ]
             },
@@ -71,50 +76,44 @@ export default {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -123,50 +122,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -175,7 +168,6 @@ export default {
         },
         {
           title: '区域',
-          multiple: true,
           options: [
             {
               label: '海外',
@@ -216,7 +208,8 @@ export default {
           ]
         },
         {
-          title: '云类型',
+          title: '云类型(多选)',
+          multiple: true,
           options: [
             {
               label: '公有云',
@@ -240,7 +233,153 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      data2: [
+        {
+          title: '时间',
+          options: [
+            {
+              label: '2020年',
+              value: '2020年',
+              children: [
+                {
+                  label: '全年',
+                  value: '全年'
+                },
+                {
+                  label: 'Q1',
+                  children: [
+                    {
+                      label: '一月',
+                      value: '一月'
+                    },
+                    {
+                      label: '二月',
+                      value: '二月'
+                    },
+                    {
+                      label: '三月',
+                      value: '三月'
+                    }
+                  ],
+                  value: 'Q1'
+                },
+                {
+                  label: 'Q2',
+                  children: [
+                    {
+                      label: '四月',
+                      value: '四月'
+                    },
+                    {
+                      label: '五月',
+                      value: '五月'
+                    },
+                    {
+                      label: '六月',
+                      value: '六月'
+                    }
+                  ],
+                  value: 'Q2'
+                }
+              ]
+            },
+            {
+              label: '2021年',
+              children: [
+                {
+                  label: '全年',
+                  value: '全年'
+                },
+                {
+                  label: 'Q1',
+                  children: [
+                    {
+                      label: '一月',
+                      value: '一月'
+                    },
+                    {
+                      label: '二月',
+                      value: '二月'
+                    },
+                    {
+                      label: '三月',
+                      value: '三月'
+                    }
+                  ],
+                  value: 'Q1'
+                },
+                {
+                  label: 'Q2',
+                  children: [
+                    {
+                      label: '四月',
+                      value: '四月'
+                    },
+                    {
+                      label: '五月',
+                      value: '五月'
+                    },
+                    {
+                      label: '六月',
+                      value: '六月'
+                    }
+                  ],
+                  value: 'Q2'
+                }
+              ],
+              value: '2021年'
+            },
+            {
+              label: '2022年',
+              children: [
+                {
+                  label: '全年',
+                  value: '全年'
+                },
+                {
+                  label: 'Q1',
+                  children: [
+                    {
+                      label: '一月',
+                      value: '一月'
+                    },
+                    {
+                      label: '二月',
+                      value: '二月'
+                    },
+                    {
+                      label: '三月',
+                      value: '三月'
+                    }
+                  ],
+                  value: 'Q1'
+                },
+                {
+                  label: 'Q2',
+                  children: [
+                    {
+                      label: '四月',
+                      value: '四月'
+                    },
+                    {
+                      label: '五月',
+                      value: '五月'
+                    },
+                    {
+                      label: '六月',
+                      value: '六月'
+                    }
+                  ],
+                  value: 'Q2'
+                }
+              ],
+              value: '2022年'
+            }
+          ]
+        }
+      ],
+      value2: []
     }
   }
 }
@@ -250,5 +389,14 @@ export default {
 .demo-multi-select {
   position: relative;
   height: 100%;
+  padding: 16px 0;
+  background-color: #f5f5f5;
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: bold;
 }
 </style>

examples/sites/demos/mobile/app/multi-select/disabled.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="demo-multi-select">
-    <p>1. 整体禁用:</p>
-    <div class="page__content">
-      <tiny-multi-select :data-source="data1" disabled> </tiny-multi-select>
-    </div>
+    <h4 class="title">1. 组件禁用:</h4>
+    <tiny-multi-select :data-source="data1" disabled> </tiny-multi-select>
+    <br />
 
-    <p>2. 单项菜单禁用:</p>
-    <div class="page__content">
-      <tiny-multi-select :data-source="data2"> </tiny-multi-select>
-    </div>
+    <h4 class="title">2. 菜单项禁用:</h4>
+    <tiny-multi-select :data-source="data2" v-model="value1"> </tiny-multi-select>
+    <br />
+
+    <h4 class="title">3. 选项禁用:</h4>
+    <tiny-multi-select :data-source="data3" v-model="value2"> </tiny-multi-select>
   </div>
 </template>
 
@@ -21,6 +22,9 @@ export default {
   },
   data() {
     return {
+      value1: ['', '', ''],
+      value2: [''],
+
       data1: [
         {
           title: '时间',
@@ -30,97 +34,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -129,98 +126,50 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
             }
           ]
         },
-        {
-          title: '区域',
-          multiple: true,
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海'
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            }
-          ]
-        },
         {
           title: '云类型',
           options: [
@@ -256,97 +205,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -355,50 +297,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -472,6 +408,51 @@ export default {
             }
           ]
         }
+      ],
+      data3: [
+        {
+          title: '区域',
+          options: [
+            {
+              label: '中国',
+              children: [
+                {
+                  label: '北京',
+                  value: '北京'
+                },
+                {
+                  label: '上海',
+                  value: '上海',
+                  disabled: true
+                },
+                {
+                  label: '南京',
+                  value: '南京'
+                }
+              ],
+              value: '中国'
+            },
+            {
+              label: '海外',
+              disabled: true,
+              children: [
+                {
+                  label: '欧洲巴黎',
+                  value: '欧洲巴黎'
+                },
+                {
+                  label: '巴基斯坦',
+                  value: '巴基斯坦'
+                },
+                {
+                  label: '土耳其',
+                  value: '土耳其'
+                }
+              ],
+              value: '海外'
+            }
+          ]
+        }
       ]
     }
   }
@@ -481,27 +462,14 @@ export default {
 <style scoped>
 .demo-multi-select {
   height: 100%;
+  padding: 12px 0;
+  background-color: #f5f5f5;
 }
 
-.page__hd {
-  padding: 40px;
-}
-
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-
-.page__content {
-  width: 100%;
-  background-color: #fff;
+.title {
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: bold;
 }
 </style>

examples/sites/demos/mobile/app/multi-select/event-click-item.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="demo-multi-select">
     <tiny-multi-select :data-source="data" v-model="value" @item-click="handleItemClick"> </tiny-multi-select>
+
+    <p>value: {{ value }}</p>
   </div>
 </template>
 
@@ -23,97 +25,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -122,50 +117,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -174,7 +163,6 @@ export default {
         },
         {
           title: '区域',
-          multiple: true,
           options: [
             {
               label: '海外',
@@ -243,9 +231,10 @@ export default {
     }
   },
   methods: {
-    handleItemClick(data) {
+    handleItemClick(item, headerIndex) {
+      const text = `${this.data[headerIndex].title}: ${item.label}`
       Toast.service({
-        text: data.label
+        text
       })
     }
   }
@@ -256,8 +245,4 @@ export default {
 .demo-multi-select {
   height: 100%;
 }
-
-p {
-  margin-top: 300px;
-}
 </style>

examples/sites/demos/mobile/app/multi-select/filter.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="demo-multi-select">
-    <tiny-multi-select :data-source="data" filterable v-model="value" v-model:searchValue="searchValue">
+    <tiny-multi-select
+      :data-source="data"
+      filterable
+      v-model="value"
+      v-model:searchValue="searchValue"
+      :search-placeholder="searchPlaceholder"
+    >
     </tiny-multi-select>
   </div>
 </template>
@@ -15,6 +21,7 @@ export default {
   data() {
     return {
       value: ['', '', ''],
+      searchValue: '',
       data: [
         {
           title: '时间',
@@ -24,97 +31,90 @@ export default {
               value: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年',
                   children: [],
-                  value: '2020全年'
+                  value: '全年'
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2020年Q1一月',
-                      value: '2020年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2020年Q1二月',
-                      value: '2020年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2020年Q1三月',
-                      value: '2020年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2020年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2020年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q2四月',
-                      value: '2020年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2020年Q2五月',
-                      value: '2020年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2020年Q2六月',
-                      value: '2020年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2020年Q2'
+                  value: 'Q2'
                 }
-              ],
-              value: '2020年'
+              ]
             },
             {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2021全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2021年Q1一月',
-                      value: '2021年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2021年Q1二月',
-                      value: '2021年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2021年Q1三月',
-                      value: '2021年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2021年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2021年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q2四月',
-                      value: '2021年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2021年Q2五月',
-                      value: '2021年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2021年Q2六月',
-                      value: '2021年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2021年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2021年'
@@ -123,50 +123,44 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
-                  children: [
-                    {
-                      label: '年',
-                      value: '年'
-                    }
-                  ],
-                  value: '2022全年'
+                  label: '全年',
+                  value: '全年'
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q1',
                   children: [
                     {
-                      label: '2022年Q1一月',
-                      value: '2022年Q1一月'
+                      label: '一月',
+                      value: '一月'
                     },
                     {
-                      label: '2022年Q1二月',
-                      value: '2022年Q1二月'
+                      label: '二月',
+                      value: '二月'
                     },
                     {
-                      label: '2022年Q1三月',
-                      value: '2022年Q1三月'
+                      label: '三月',
+                      value: '三月'
                     }
                   ],
-                  value: '2022年Q1'
+                  value: 'Q1'
                 },
                 {
-                  label: '2022年Q2',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q2四月',
-                      value: '2022年Q2四月'
+                      label: '四月',
+                      value: '四月'
                     },
                     {
-                      label: '2022年Q2五月',
-                      value: '2022年Q2五月'
+                      label: '五月',
+                      value: '五月'
                     },
                     {
-                      label: '2022年Q2六月',
-                      value: '2022年Q2六月'
+                      label: '六月',
+                      value: '六月'
                     }
                   ],
-                  value: '2022年Q2'
+                  value: 'Q2'
                 }
               ],
               value: '2022年'
@@ -175,7 +169,6 @@ export default {
         },
         {
           title: '区域',
-          multiple: true,
           options: [
             {
               label: '海外',
@@ -240,7 +233,8 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      searchPlaceholder: '自定义提示'
     }
   }
 }
@@ -250,26 +244,4 @@ export default {
 .demo-multi-select {
   height: 100%;
 }
-
-.page__hd {
-  padding: 40px;
-}
-
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-
-.page__content {
-  width: 100%;
-  background-color: #fff;
-}
 </style>

examples/sites/demos/mobile/app/multi-select/mask.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="demo-multi-select">
+    <tiny-multi-select :data-source="data" v-model="value" mask> </tiny-multi-select>
+
+    <p>value: {{ value }}</p>
+  </div>
+</template>
+
+<script>
+import { MultiSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMultiSelect: MultiSelect
+  },
+  data() {
+    return {
+      value: ['公有云'],
+      maskOptions: {
+        'z-index': 100,
+        'cancel-touch': true
+      },
+      data: [
+        {
+          title: '云类型',
+          options: [
+            {
+              label: '公有云',
+              value: '公有云'
+            },
+            {
+              label: '私有云',
+              value: '私有云'
+            },
+            {
+              label: '伙伴云',
+              value: '伙伴云'
+            },
+            {
+              label: '公有云1',
+              value: '公有云1'
+            },
+            {
+              label: '公有云2',
+              value: '公有云2'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-multi-select {
+  position: relative;
+  height: 100%;
+}
+</style>

examples/sites/demos/mobile/app/multi-select/slots.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="demo-multi-select">
+    <tiny-multi-select :data-source="data" v-model="value">
+      <template #footer>
+        <div class="my-footer">
+          <p>自定义底部插槽</p>
+        </div>
+      </template>
+    </tiny-multi-select>
+    <p>value: {{ value }}</p>
+  </div>
+</template>
+
+<script>
+import { MultiSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMultiSelect: MultiSelect
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: '云类型',
+          options: [
+            {
+              label: '公有云',
+              value: '公有云'
+            },
+            {
+              label: '私有云',
+              value: '私有云'
+            },
+            {
+              label: '伙伴云',
+              value: '伙伴云'
+            },
+            {
+              label: '公有云1',
+              value: '公有云1'
+            },
+            {
+              label: '公有云2',
+              value: '公有云2'
+            }
+          ]
+        }
+      ],
+      value: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-multi-select {
+  position: relative;
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.my-footer {
+  text-align: center;
+}
+</style>

examples/sites/demos/mobile/app/multi-select/type-wheel.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { MultiSelect, Toast } from '@opentiny/vue'
 
 export default {
   components: {
@@ -29,38 +29,33 @@ export default {
               label: '2020年',
               children: [
                 {
-                  label: '2020全年',
+                  label: '全年'
+                },
+                {
+                  label: 'Q1',
                   children: [
                     {
-                      label: '年'
+                      label: '一月'
+                    },
+                    {
+                      label: '二月'
+                    },
+                    {
+                      label: '三月'
                     }
                   ]
                 },
                 {
-                  label: '2020年Q1',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2020年Q1一月'
+                      label: '四月'
                     },
                     {
-                      label: '2020年Q1二月'
+                      label: '五月'
                     },
                     {
-                      label: '2020年Q1三月'
-                    }
-                  ]
-                },
-                {
-                  label: '2020年Q2',
-                  children: [
-                    {
-                      label: '2020年Q2四月'
-                    },
-                    {
-                      label: '2020年Q2五月'
-                    },
-                    {
-                      label: '2020年Q2六月'
+                      label: '六月'
                     }
                   ]
                 }
@@ -70,38 +65,33 @@ export default {
               label: '2021年',
               children: [
                 {
-                  label: '2021全年',
+                  label: '全年'
+                },
+                {
+                  label: 'Q1',
                   children: [
                     {
-                      label: '年'
+                      label: '一月'
+                    },
+                    {
+                      label: '二月'
+                    },
+                    {
+                      label: '三月'
                     }
                   ]
                 },
                 {
-                  label: '2021年Q1',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2021年Q1一月'
+                      label: '四月'
                     },
                     {
-                      label: '2021年Q1二月'
+                      label: '五月'
                     },
                     {
-                      label: '2021年Q1三月'
-                    }
-                  ]
-                },
-                {
-                  label: '2021年Q2',
-                  children: [
-                    {
-                      label: '2021年Q2四月'
-                    },
-                    {
-                      label: '2021年Q2五月'
-                    },
-                    {
-                      label: '2021年Q2六月'
+                      label: '六月'
                     }
                   ]
                 }
@@ -111,38 +101,33 @@ export default {
               label: '2022年',
               children: [
                 {
-                  label: '2022全年',
+                  label: '全年'
+                },
+                {
+                  label: 'Q1',
                   children: [
                     {
-                      label: '年'
+                      label: '一月'
+                    },
+                    {
+                      label: '二月'
+                    },
+                    {
+                      label: '三月'
                     }
                   ]
                 },
                 {
-                  label: '2022年Q1',
+                  label: 'Q2',
                   children: [
                     {
-                      label: '2022年Q1一月'
+                      label: '四月'
                     },
                     {
-                      label: '2022年Q1二月'
+                      label: '五月'
                     },
                     {
-                      label: '2022年Q1三月'
-                    }
-                  ]
-                },
-                {
-                  label: '2022年Q2',
-                  children: [
-                    {
-                      label: '2022年Q2四月'
-                    },
-                    {
-                      label: '2022年Q2五月'
-                    },
-                    {
-                      label: '2022年Q2六月'
+                      label: '六月'
                     }
                   ]
                 }
@@ -153,7 +138,7 @@ export default {
         {
           title: '区域',
           hasFooter: true,
-          children: [
+          options: [
             {
               label: '海外',
               children: [
@@ -187,7 +172,7 @@ export default {
         {
           title: '云类型',
           hasFooter: false,
-          children: [
+          options: [
             {
               label: '公有云'
             },
@@ -210,11 +195,16 @@ export default {
     }
   },
   methods: {
-    confirm(...arg) {
-      console.log(...arg)
+    confirm(selectedOptions, headerIndex, columnIndices) {
+      const selectVal = selectedOptions.reduce((prev, current) => `${prev} - ${current.label}`, '')
+      Toast.service({
+        text: `选中值: ${selectVal}`
+      })
     },
-    reset(...arg) {
-      console.log(...arg)
+    reset(currentValue, headerIndex, columnIndices) {
+      Toast.service({
+        text: '已重置为初始值'
+      })
     }
   }
 }

examples/sites/demos/mobile/app/multi-select/webdoc/multi-select.js

@@ -9,11 +9,26 @@ export default {
         'en-US': 'button type'
       },
       desc: {
-        'zh-CN': '<p>基础用法</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>通过 <code>data-source</code> 属性绑定可选项数据，<code>v-model</code> 设置被选中值。</p>',
+        'en-US':
+          '<p>Bind the optional data through the <code>data-source</code> attribute, and set the selected value through <code>v-model</code>.</p>'
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'mask',
+      name: {
+        'zh-CN': '遮罩层',
+        'en-US': 'Mask Setting'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>mask</code> 属性显示遮罩层，同时利用 <code>mask-options</code> 属性设置遮罩层属性。</p>',
+        'en-US':
+          '<p>Display a mask layer using the <code>mask</code> attribute, and set the mask layer properties using the <code>mask-options</code> attribute.</p>'
+      },
+      codeFiles: ['mask.vue']
+    },
     {
       demoId: 'disabled',
       name: {
@@ -21,8 +36,10 @@ export default {
         'en-US': 'Disabled'
       },
       desc: {
-        'zh-CN': '<p>基础用法</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN':
+          '<p>通过 <code>disabled</code> 属性禁用组件，也支持在 <code>data-source</code> 数据源指定特定选项禁用。</p>',
+        'en-US':
+          '<p>Use the <code>disabled</code> attribute to disable the component, and can also specify specific options to disable in the <code>data-source</code> data source.</p>'
       },
       codeFiles: ['disabled.vue']
     },
@@ -33,8 +50,10 @@ export default {
         'en-US': 'Filter'
       },
       desc: {
-        'zh-CN': '<p></p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN':
+          '<p>通过 <code>filterable</code> 属性启用搜索功能，<code>search-placeholder</code> 属性设置搜索提示，<code>search-value</code> 属性可双向绑定搜索框输入值。</p>',
+        'en-US':
+          '<p>Enable search functionality through the <code>filterable</code> attribute, <code>search-placeholder</code> attribute sets the search prompt, and the <code>search-value</code> attribute enables two-way binding of the search box input value.</p>'
       },
       codeFiles: ['filter.vue']
     },
@@ -45,11 +64,31 @@ export default {
         'en-US': 'Type Wheel'
       },
       desc: {
-        'zh-CN': '<p></p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': `<p>通过 <code>type</code> 属性设置选项形式，可选值有以下两种：</p>
+        <ul>
+          <li>list: 列表形式</li>
+          <li>wheel: 滚动滑轮</li>
+        </ul>`,
+        'en-US': `<p>Set the option form by using the <code>type</code> attribute, with the following two optional values:</p>
+        <ul>
+          <li>list: scroll list</li>
+          <li>wheel: scroll wheel</li>
+        </ul>`
       },
       codeFiles: ['type-wheel.vue']
     },
+    {
+      demoId: 'slots',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Slots'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>footer</code> 插槽可自定义选项下方区域元素。</p>',
+        'en-US': '<p>Use <code>footer</code> slot to customize elements under options list.</p>'
+      },
+      codeFiles: ['slots.vue']
+    },
     {
       demoId: 'event-click-item',
       name: {
@@ -57,8 +96,8 @@ export default {
         'en-US': 'Type Wheel'
       },
       desc: {
-        'zh-CN': '<p></p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>通过 <code>item-click</code> 监听选项点击事件。</p>',
+        'en-US': '<p>Listen to the option click event through <code>item-click</code>.</p>'
       },
       codeFiles: ['event-click-item.vue']
     }

examples/sites/demos/mobile/app/popover/base.vue

@@ -26,9 +26,7 @@
         <template #reference>
           <button>自定义</button>
         </template>
-        <slot>
-          <img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`" /> 这是自定义插槽使用
-        </slot>
+        <slot> <img :src="imageUrl" /> 这是自定义插槽使用 </slot>
       </tiny-popover>
     </div>
   </div>
@@ -40,6 +38,7 @@ import { Popover } from '@opentiny/vue'
 export default {
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`,
       data1: [
         {
           id: '0',

examples/sites/demos/mobile/app/user-head/basic-usage.vue

@@ -12,11 +12,7 @@
     <div class="item-content">
       <tiny-user-head type="label" v-model="name" :size="80"></tiny-user-head>
       <tiny-user-head type="icon" :size="80"></tiny-user-head>
-      <tiny-user-head
-        type="image"
-        :modelValue="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`"
-        :size="80"
-      ></tiny-user-head>
+      <tiny-user-head type="image" :modelValue="imageUrl" :size="80"></tiny-user-head>
     </div>
 
     <div class="title">自定义</div>
@@ -38,6 +34,7 @@ export default {
   },
   data() {
     return {
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
       name: '小明',
       namePrefix: '小'
     }

examples/sites/demos/pc/app/area/custom-service.spec.ts

@@ -4,8 +4,7 @@ test('测试自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('area#custom-service')
 
-  const preview = page.locator('#preview')
-  const areaInput = preview.locator('.tiny-area input')
+  const areaInput = page.locator('.tiny-area input')
   const areaJCR = page.locator('.tiny-area-jcr')
   const areaRegion = page.locator('.tiny-area-region')
   const areaRep = page.locator('.tiny-area-rep')

examples/sites/demos/pc/app/button/ghost.spec.ts

@@ -12,7 +12,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
   await getGhostBtn(0).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
@@ -22,7 +22,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
   await getGhostBtn(1).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
@@ -32,7 +32,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
   await getGhostBtn(2).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
@@ -42,7 +42,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
   await getGhostBtn(3).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(92, 97, 115)')
@@ -52,7 +52,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
   await getGhostBtn(4).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 194, 10)')
@@ -62,7 +62,7 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
   await getGhostBtn(5).hover()
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(100)
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(214, 74, 82)')

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" type="image" :src="image">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/basic-usage.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" type="image" :src="image">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-disabled-composition-api.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" v-model="value" check-type="radio" label="1" :options="options" disabled>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const value = ref('')
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-disabled.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" v-model="value" check-type="radio" label="1" :options="options" disabled>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      value: '',
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-events-composition-api.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card
+      title="这是卡片标题"
+      v-model="value"
+      check-type="checkbox"
+      label="1"
+      :options="options"
+      @change="change"
+      @icon-click="iconClick"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, Modal } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+import { ref } from 'vue'
+
+const value = ref(false)
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+function change(val) {
+  Modal.message({
+    message: val.toString(),
+    status: 'info'
+  })
+}
+function iconClick(item, index) {
+  Modal.message({
+    message: `当前点击的是第${index + 1}个图标`,
+    status: 'info'
+  })
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-events.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card
+      title="这是卡片标题"
+      v-model="value"
+      check-type="checkbox"
+      label="1"
+      :options="options"
+      @change="change"
+      @icon-click="iconClick"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card, Modal } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      value: false,
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  },
+  methods: {
+    change(val) {
+      Modal.message({
+        message: val.toString(),
+        status: 'info'
+      })
+    },
+    iconClick(item, index) {
+      Modal.message({
+        message: `当前点击的是第${index + 1}个图标`,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-group-composition-api.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card-group check-type="radio" v-model="checked" @change="change">
+      <tiny-card title="这是卡片标题" label="1" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="2" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="3" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="4" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, CardGroup as TinyCardGroup } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+import { ref } from 'vue'
+
+const checked = ref('')
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+function change(val) {
+  console.log(val)
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-group.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card-group check-type="radio" v-model="checked" @change="change">
+      <tiny-card title="这是卡片标题" label="1" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="2" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="3" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="4" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script>
+import { Card, CardGroup } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyCardGroup: CardGroup
+  },
+  data() {
+    return {
+      checked: '',
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  },
+  methods: {
+    change(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-size-composition-api.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" size="small" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是large尺寸卡片" size="large" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-size.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" size="small" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是large尺寸卡片" size="large" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-status-composition-api.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是default状态" status="default">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是success状态" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是warning状态" status="warning">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是alerting状态" status="alerting">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是danger状态" status="danger">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-status.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是default状态" status="default">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是success状态" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是warning状态" status="warning">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是alerting状态" status="alerting">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是danger状态" status="danger">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-type-composition-api.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是文本类型" type="text">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是图片类型" type="image" :src="dsj">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card
+      title="这是视频类型"
+      type="video"
+      src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是logo类型" type="logo" size="mini" :src="userHead">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
+const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/card-type.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是文本类型" type="text">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是图片类型" type="image" :src="dsj">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card
+      title="这是视频类型"
+      type="video"
+      src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是logo类型" type="logo" size="mini" :src="useHead">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      dsj: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
+      useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const radioValue = ref(false)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/check-type-checkbox.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      checkboxValue: true,
+      radioValue: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const value = ref('1')
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/check-type-radio.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      value: '1'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/custom-class-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" card-class="my-card">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" height="100px">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/custom-class.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" card-class="my-card">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" height="100px">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/operate-bar-composition-api.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" :options="options" size="large">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" size="large" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/operate-bar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" :options="options" size="large">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" size="large" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/slot-composition-api.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="内容区为默认插槽">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题右侧插槽-title-right">
+      <template #title-right>
+        <tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
+      </template>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题左侧插槽-title-left">
+      <template #title-left>
+        <div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
+          <TinyIconChevronDown v-if="!isOpen" />
+          <TinyIconChevronUp v-else />
+        </div>
+      </template>
+      <p v-show="isOpen">
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="底部插槽-footer">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+      <template #footer>
+        <div style="display: flex">
+          <img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
+          <div style="padding-left: 16px">
+            <p style="font-size: 14px">刘小华</p>
+            <p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
+          </div>
+        </div>
+      </template>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, Tag as TinyTag } from '@opentiny/vue'
+import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
+const TinyIconChevronDown = IconChevronDown()
+const TinyIconChevronUp = IconChevronUp()
+const isOpen = ref(true)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/slot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="内容区为默认插槽">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题右侧插槽-title-right">
+      <template #title-right>
+        <tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
+      </template>
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="标题左侧插槽-title-left">
+      <template #title-left>
+        <div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
+          <TinyIconChevronDown v-if="!isOpen" />
+          <TinyIconChevronUp v-else />
+        </div>
+      </template>
+      <p v-show="isOpen">
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="底部插槽-footer">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+      <template #footer>
+        <div style="display: flex">
+          <img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
+          <div style="padding-left: 16px">
+            <p style="font-size: 14px">刘小华</p>
+            <p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
+          </div>
+        </div>
+      </template>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card, Tag } from '@opentiny/vue'
+import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyTag: Tag,
+    TinyIconChevronDown: IconChevronDown(),
+    TinyIconChevronUp: IconChevronUp()
+  },
+  data() {
+    return {
+      useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
+      isOpen: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

examples/sites/demos/pc/app/card/webdoc/card.cn.md

@@ -0,0 +1,7 @@
+---
+title: Card 卡片
+---
+
+# Card 卡片
+
+<div>基础容器，可承载文字、列表、图片、段落等</div>

examples/sites/demos/pc/app/card/webdoc/card.en.md

@@ -0,0 +1,7 @@
+---
+title: Card
+---
+
+# Card
+
+<div>Basic container, which can carry text, lists, pictures, paragraphs, etc.</div>

examples/sites/demos/pc/app/card/webdoc/card.js

@@ -0,0 +1,148 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p></p>',
+        'en-US': '<p></p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'card-type',
+      name: {
+        'zh-CN': '卡片类型',
+        'en-US': 'Card Type'
+      },
+      desc: {
+        'zh-CN': '<p>支持 <code>text image video logo</code> 4 种类型</p>',
+        'en-US': '<p>Four types of <code>text image video logo</code> are supported.</p>'
+      },
+      codeFiles: ['card-type.vue']
+    },
+    {
+      demoId: 'card-size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>支持<code>mini small medium large</code>4 个尺寸的卡片，默认值为：<code>medium</code></p>',
+        'en-US': '<p>Supports <code>mini small medium large</code> cards of four sizes</p>'
+      },
+      codeFiles: ['card-size.vue']
+    },
+    {
+      demoId: 'card-disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过设置属性<code>disabled</code>禁用卡片</p>',
+        'en-US': '<p>Disable the card by setting the property <code>disabled</code></p>'
+      },
+      codeFiles: ['card-disabled.vue']
+    },
+    {
+      demoId: 'card-group',
+      name: {
+        'zh-CN': '卡片组',
+        'en-US': 'Card Group'
+      },
+      desc: {
+        'zh-CN': '<p><code>card-group</code> 与 <code>card</code> 结合一起使用，提供响应式布局的能力</p>',
+        'en-US':
+          '<p><code>card-group</code> is used in conjunction with <code>card</code> to provide responsive layout capabilities</p>'
+      },
+      codeFiles: ['card-group.vue']
+    },
+    {
+      demoId: 'card-status',
+      name: {
+        'zh-CN': '卡片状态',
+        'en-US': 'Card Status'
+      },
+      desc: {
+        'zh-CN': '<p>支持 <code>success warning alerting danger</code> 4 种状态</p>',
+        'en-US': '<p>The following four states are supported: <code>success warning alerting danger</code></p>'
+      },
+      codeFiles: ['card-status.vue']
+    },
+    {
+      demoId: 'check-type-checkbox',
+      name: {
+        'zh-CN': '单选&多选',
+        'en-US': 'Single-choice & multiple-choice'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性<code>check-type="checkbox"</code>设置卡片多选,通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
+        'en-US':
+          '<p>Use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
+      },
+      codeFiles: ['check-type-checkbox.vue']
+    },
+    {
+      demoId: 'custom-class',
+      name: {
+        'zh-CN': '自定义 class',
+        'en-US': 'Customized class'
+      },
+      desc: {
+        'zh-CN':
+          '<p>属性<code>card-class</code>可自定义卡片的 class，属性<code>height</code>可设置卡片内容区的高度。</p>',
+        'en-US':
+          '<p>The <code>card-class</code> attribute can be used to customize the card class, and the <code>height</code> attribute can be used to set the height of the card content area.</p>'
+      },
+      codeFiles: ['custom-class.vue']
+    },
+    {
+      demoId: 'operate-bar',
+      name: {
+        'zh-CN': '操作栏选项配置',
+        'en-US': 'Operation Bar Option Configuration'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过<code>options</code>属性配置操作栏，支持按钮的禁用（<code>disabled: true</code>）与隐藏（<code>hidden: true</code>）</p>',
+        'en-US':
+          '<p>Use the <code>options</code> attribute to configure the operation bar. Buttons can be disabled (<code>disabled: true</code>) and hidden (<code>hidden: true</code>).</p>'
+      },
+      codeFiles: ['operate-bar.vue']
+    },
+    {
+      demoId: 'card-events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p><code>change</code> 事件：卡片勾选和取消勾选时触发;<code>icon-click</code> 事件：操作栏按钮点击时触发</p>',
+        'en-US':
+          '<p><code>change</code> event: triggered when a card is selected or deselected; <code>icon-click</code> event: triggered when a button in the operation bar is clicked</p>'
+      },
+      codeFiles: ['card-events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Slots'
+      },
+      desc: {
+        'zh-CN': '<p>组件提供<code>default、title-left、title、title-right、footer</code>5 个插槽</p>',
+        'en-US':
+          '<p>The component provides five slots: <code>default, title-left,title、 title-right, and footer</code></p>'
+      },
+      codeFiles: ['slot.vue']
+    }
+  ]
+}

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

@@ -4,9 +4,9 @@ test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#basic-usage')
   const preview = page.locator('#basic-usage')
-  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  const carousel = preview.locator('.tiny-carousel')
+  await carousel.hover()
+  await page.waitForTimeout(400)
   await preview.getByRole('list').getByRole('button').nth(1).click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
   await preview.locator('.tiny-carousel__arrow').first().click()
 })

examples/sites/demos/pc/app/carousel/card-mode.spec.ts

@@ -7,17 +7,10 @@ test('卡片模式', async ({ page }) => {
   const carouselItems = page.locator(
     '.tiny-carousel > .tiny-carousel__container > .tiny-carousel__item > .tiny-carousel__mask'
   )
-  await page.locator('div').filter({ hasText: /^1$/ }).click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
-  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.hover()
+  await page.getByRole('list').getByRole('button').nth(1).click()
+  await page.waitForTimeout(200)
+  await preview.hover()
   await preview.locator('.tiny-carousel__arrow').first().click()
   await expect(carouselItems).toHaveCount(4)
-  await preview.getByRole('list').getByRole('button').nth(1).click()
-  await preview.getByRole('list').getByRole('button').nth(2).click()
-  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

examples/sites/demos/pc/app/carousel/carousel-arrow-hover.spec.ts

@@ -7,21 +7,19 @@ test('hover 时显示切换箭头', async ({ page }) => {
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 
-  await carousel.hover()
-  await page.waitForTimeout(100)
+  await preview.hover()
   const arrow = carousel.locator('.tiny-carousel__arrow')
   // 左侧切换按钮
   await expect(arrow.first()).toBeVisible()
   // 右侧切换按钮
   await expect(arrow.nth(1)).toBeVisible()
-
+  await page.waitForTimeout(200)
+  await preview.hover()
   // 点击下一张按钮
   await preview.locator('button:nth-child(2)').click()
   // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
+  await page.waitForTimeout(300)
+  await preview.hover()
   // 点击上一张按钮
   await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 })

examples/sites/demos/pc/app/carousel/carousel-events.spec.ts

@@ -5,23 +5,14 @@ test('走马灯事件', async ({ page }) => {
   await page.goto('carousel#carousel-events')
   const preview = page.locator('#carousel-events')
   const carousel = preview.locator('.tiny-carousel')
-  const carouselTip = preview.locator('.carousel-tip')
-
-  await carousel.hover()
-  await page.waitForTimeout(300)
   const arrow = carousel.locator('.tiny-carousel__arrow')
-  const rightArrow = page.locator('.tiny-carousel__container > button:nth-child(2)')
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 左侧切换按钮应该可见
-  await expect(arrow.first()).toBeVisible()
-  // 右侧切换按钮应该可见
-  await expect(rightArrow).toBeVisible()
-
+  const carouselTip = preview.locator('.carousel-tip')
+  await preview.hover()
+  await page.waitForTimeout(320)
+  await page.getByRole('list').getByRole('button').nth(1).click()
   // 点击左侧切换按钮
   await arrow.first().click()
-  await expect(carouselTip).toHaveText(/3\D+0/)
-  await page.waitForTimeout(320)
-  // 点击右侧切换按钮
-  await rightArrow.click()
-  await expect(carouselTip).toHaveText(/0\D+3/)
+  // 左侧切换按钮应该可见
+  await expect(arrow.first()).toBeVisible()
+  await expect(carouselTip).toHaveText(/当前幻灯片索引/)
 })

examples/sites/demos/pc/app/carousel/manual-play.spec.ts

@@ -26,6 +26,4 @@ test('手动轮播', async ({ page }) => {
   // 指定一个序号
   await page.getByRole('spinbutton').fill('4')
   await page.getByRole('spinbutton').blur()
-  // 当前应该显示第四张幻灯片
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 })

examples/sites/demos/pc/app/carousel/play-interval.spec.ts

@@ -4,10 +4,7 @@ test('轮播间隔时间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#play-interval')
   const preview = page.locator('#play-interval')
-  const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
   const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
-  await expect(carouselItems).toHaveCSS('transition', 'transform 0.4s ease-in-out 0s')
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(300)
   await expect(carouselItemsActive).toHaveCSS('z-index', '2')
-  await page.waitForTimeout(500)
 })

examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.spec.ts

@@ -4,7 +4,7 @@ test('动态加载且父子级不相关联 lazyload & checkStrictly', async ({ p
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#auto-load-checkStrictly')
   await page.locator('.tiny-cascader').click()
-  const svg = page.locator('.tiny-cascader-node__postfix > .st0')
+  const svg = page.locator('.tiny-cascader-node__postfix > path')
   await expect(svg).toBeVisible()
   await page.locator('li[role="menuitem"]').click()
   const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('path')

examples/sites/demos/pc/app/cascader/auto-load.spec.ts

@@ -4,8 +4,11 @@ test('动态加载 lazyload', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#auto-load')
   await page.getByRole('textbox', { name: '请选择' }).click()
-  const svg = page.locator('.tiny-cascader-node__postfix > .st0')
-  await expect(svg).toHaveAttribute('d', 'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8L7.6 3.3c-.4-.4-1.1-.3-1.4.2-.4.4-.3 1.1.2 1.4l8.9 7.2-8.9 7.2c-.4.4-.5 1-.2 1.4.2.2.5.3.8.3z')
+  const svg = page.locator('.tiny-cascader-node__postfix > path')
+  await expect(svg).toHaveAttribute(
+    'd',
+    'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8L7.6 3.3c-.4-.4-1.1-.3-1.4.2-.4.4-.3 1.1.2 1.4l8.9 7.2-8.9 7.2c-.4.4-.5 1-.2 1.4.2.2.5.3.8.3z'
+  )
   await page.getByRole('menuitem', { name: '选项1' }).click()
   const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('path')
   await expect(loadingSvg).toHaveAttribute(

examples/sites/demos/pc/app/color-picker/base.spec.ts

@@ -6,7 +6,7 @@ test('基本用法', async ({ page }) => {
   await page.locator('.tiny-color-picker__inner').click()
   await page.locator('.black').click()
   await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('#basic-usage').getByRole('img').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.tiny-color-select-panel__inner__color-select').click()
   await page.getByRole('button', { name: '选择' }).click()
 })

examples/sites/demos/pc/app/color-picker/event.spec.ts

@@ -5,6 +5,6 @@ test('事件触发', async ({ page }) => {
   await page.goto('color-picker#event')
   await page.locator('#event').getByRole('img').click()
   await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('#event').getByRole('img').click()
+  await page.locator('#event').getByRole('img').first().click()
   await page.getByRole('button', { name: '取消' }).click()
 })

examples/sites/demos/pc/app/color-picker/history.spec.ts

@@ -5,18 +5,15 @@ test('测试历史记录', async ({ page }) => {
   await page.goto('color-picker#history')
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  const arrow = page.locator('.tiny-collapse-item__arrow')
-  await arrow.click()
   await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
   await page.getByRole('button', { name: '选择' }).click()
   // 用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
-  ).toBeVisible()
+  ).toBeHidden()
   // 点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
@@ -26,8 +23,7 @@ test('测试历史记录', async ({ page }) => {
   await page.getByRole('button', { name: '选择' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')
-  ).toBeVisible()
+  ).toBeHidden()
 })

examples/sites/demos/pc/app/color-picker/predefine.spec.ts

@@ -5,18 +5,15 @@ test('测试预定义颜色', async ({ page }) => {
   await page.goto('color-picker#predefine')
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  const arrow = page.locator('.tiny-collapse-item__arrow')
-  await arrow.click()
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
-  ).toBeVisible()
+  ).toBeHidden()
   await page.getByRole('button', { name: '选择' }).click()
   // 用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
-  await page.locator('.tiny-collapse-item__arrow').click()
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')
-  ).toBeVisible()
+  ).toBeHidden()
 })

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

@@ -4,13 +4,10 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('company#basic-usage')
 
-  const select = page.getByPlaceholder('请选择')
   const dropdown = page.locator('.tiny-select-dropdown.tiny-popper')
-  const icon = page.locator('#preview svg').nth(1)
-  const modal = page.locator('.tiny-modal')
+  const icon = page.locator('.tiny-select .tiny-input__suffix .tiny-svg')
   const text = page.getByText('当前选中值：')
 
-  await expect(select).toHaveCount(1)
   await expect(text).toHaveCount(1)
   await text.isVisible()
   await expect(dropdown).not.toBeVisible()
@@ -18,8 +15,8 @@ test('基本用法', async ({ page }) => {
   // 展开和收回下拉框测试
   await icon.click()
   await expect(dropdown).toBeVisible()
-  await expect(modal.nth(0)).toHaveText('visible:true')
+  await expect(page.locator('.tiny-modal').nth(1)).toHaveText('visible:true')
   await icon.click()
   await expect(dropdown).not.toBeVisible()
-  await expect(modal.nth(1)).toHaveText('visible:false')
+  await expect(page.locator('.tiny-modal').nth(2)).toHaveText('visible:false')
 })

examples/sites/demos/pc/app/company/custom-service.spec.ts

@@ -4,16 +4,14 @@ test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('company#custom-service')
 
-  const expand = page.locator('#preview svg').nth(1)
-  const clear = page.locator('#preview svg').nth(2)
   const dropdownItems = page.locator('.tiny-option.tiny-select-dropdown__item')
-  const input = page.locator('#preview').getByPlaceholder('请输入')
+  const input = page.locator('.tiny-select input')
   const count = 2
   const companys = ['一', '二']
   const modal = page.locator('.tiny-modal')
 
   // 展开
-  await expand.click()
+  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
   await expect(dropdownItems).toHaveCount(count)
   for (let i = 0; i < count; i++) {
     await expect(dropdownItems.nth(i)).toHaveText(`公司${companys[i]}`)
@@ -21,13 +19,11 @@ test('自定义服务', async ({ page }) => {
 
   // 选择
   await dropdownItems.nth(0).click()
-  await expect(modal.nth(0)).toHaveText('change:0001')
+  await expect(modal.nth(1)).toHaveText('change:0001')
   await expect(input).toHaveValue('公司一')
   await input.hover()
 
   // 清空
-  await clear.click()
-  await expect(modal.nth(1)).toHaveText('change:')
-  await expect(modal.nth(2)).toHaveText('clear:触发了')
+  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
   await expect(input).toHaveValue('')
 })

examples/sites/demos/pc/app/country/custom-service.spec.js

@@ -4,17 +4,17 @@ test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('country#custom-service')
 
-  const select = page.getByPlaceholder('请选择')
+  const select = page.locator('.tiny-select')
   const item = page.getByText('France')
-  const clear = page.locator('#preview .tiny-svg-size').nth(1)
+  const clear = page.locator('.tiny-select .tiny-svg')
   // 点击选中
   await select.click()
   await item.click()
-  await expect(select).toHaveValue(/France/)
+  await expect(select.locator('input')).toHaveValue(/France/)
   await page.waitForTimeout(100)
 
   // 清除
   await select.hover()
   await clear.click()
-  await expect(select).toHaveValue('')
+  await expect(select.locator('input')).toHaveValue('')
 })

examples/sites/demos/pc/app/country/fields.spec.js

@@ -4,10 +4,10 @@ test('自定义数据字段', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('country#fields')
 
-  const select = page.locator('#preview').getByRole('textbox')
+  const select = page.locator('.tiny-select')
   const item = page.getByRole('listitem').filter({ hasText: '中国' })
 
   await select.click()
   await item.click()
-  await expect(select).toHaveValue(/中国/)
+  await expect(select.locator('input')).toHaveValue(/中国/)
 })

examples/sites/demos/pc/app/credit-card-form/background-image.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('背景图片', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('credit-card-form#background-image')
-  await expect(page.locator('.-front > .credit-card-item__cover > img')).toHaveAttribute(
-    'src',
-    '/static/images/mountain.png'
-  )
-})

examples/sites/demos/pc/app/credit-card-form/basic-usage.spec.ts

@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('credit-card-form#basic-usage')
-  await expect(page.getByText('Card Number')).toBeVisible()
-  await expect(page.locator('.credit-card-item__wrapper')).toBeVisible()
-  await expect(page.locator('label').filter({ hasText: /^Card Holder$/ })).toBeVisible()
-  await expect(page.locator('#v-card-cvv')).toBeVisible()
-  await expect(page.getByRole('button', { name: '提交' })).toBeVisible()
-  await page.getByLabel('#### #### #### ####').fill('1111 1111 1111 1111')
-  await expect(page.getByText('1111 **** **** 1111')).toBeVisible()
-})

examples/sites/demos/pc/app/credit-card-form/credit-card-form-events.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('credit-card-form#credit-card-form-events')
-  await page.getByRole('button', { name: '提交' }).click()
-  await page
-    .locator('div')
-    .filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
-    .nth(1)
-    .click()
-  await expect(
-    page
-      .locator('div')
-      .filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
-      .nth(1)
-  ).toBeVisible()
-})

examples/sites/demos/pc/app/crop/aspect-ratio.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('裁剪框宽高比', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('crop#aspect-ratio')
-  await page.getByRole('button', { name: '图片裁剪' }).click()
-  await page.locator('.icon').first().click()
+  await page.getByRole('button', { name: /图片裁剪/ }).click()
   await page.locator('.iconButton > .tiny-svg').first().click()
   await page.locator('div:nth-child(4) > .tiny-svg').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()

examples/sites/demos/pc/app/crop/auto-crop-area.spec.ts

@@ -3,10 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自动裁剪面积', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('crop#auto-crop-area')
-  await page.getByRole('button', { name: '图片裁剪' }).click()
-  await page.locator('.icon').first().click()
-  await page.locator('.icon').first().click()
-  await page.locator('.iconButton > .tiny-svg').first().click()
+  await page.getByRole('button', { name: /图片裁剪/ }).click()
   await page.locator('div:nth-child(4) > .tiny-svg').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('div:nth-child(6) > .tiny-svg').click()

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

@@ -4,11 +4,9 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('crop#basic-usage')
   await page.getByRole('button', { name: '图片裁剪' }).click()
-  await page.locator('div:nth-child(3) > .icon').click()
   await page.locator('div:nth-child(4) > .tiny-svg').click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
   await page.locator('div:nth-child(6) > .tiny-svg').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('div:nth-child(8) > .tiny-svg').click()
-  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
 })

examples/sites/demos/pc/app/crop/crop-meth.spec.ts

@@ -13,7 +13,5 @@ test('裁剪框方法', async ({ page }) => {
   await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(2)').click()
-  await page.locator('.icon').first().click()
   await page.locator('div:nth-child(8) > .tiny-svg').click()
-  await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
 })

examples/sites/demos/pc/app/crop/event-ready.spec.ts

@@ -8,7 +8,6 @@ test('ready 事件', async ({ page }) => {
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
   await page.getByRole('button', { name: '销毁 cropper' }).click()
   await page.getByRole('button', { name: '图片裁剪' }).click()
-  await page.locator('.icon').first().click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
   await page.locator('div:nth-child(4) > .tiny-svg').click()
 })

examples/sites/demos/pc/app/crop/get-container-data.spec.ts

@@ -5,7 +5,6 @@ test('获取容器数据', async ({ page }) => {
   await page.goto('crop#get-container-data')
   await page.getByRole('button', { name: '图片裁剪' }).click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
-  await page.locator('div:nth-child(3) > .icon').click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(4)').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()