@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/mobile-first/app/tooltip/webdoc/tooltip.js

@@ -0,0 +1,205 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p></p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+
+    {
+      demoId: 'dynamic-disable',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `disabled` 设置禁用<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dynamic-disable.vue']
+    },
+    {
+      demoId: 'manual-control-tip',
+      name: {
+        'zh-CN': '手动控制',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['manual-control-tip.vue']
+    },
+    {
+      demoId: 'tooltip-theme',
+      name: {
+        'zh-CN': '主题',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['tooltip-theme.vue']
+    },
+    {
+      demoId: 'open-delay',
+      name: {
+        'zh-CN': '自动隐藏和延迟时间',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['open-delay.vue']
+    },
+    {
+      demoId: 'tooltip-offset',
+      name: {
+        'zh-CN': '偏移量',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['tooltip-offset.vue']
+    },
+    {
+      demoId: 'enterable',
+      name: {
+        'zh-CN': '鼠标是否可进入',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['enterable.vue']
+    },
+    {
+      demoId: 'visible-arrow',
+      name: {
+        'zh-CN': '是否显示箭头',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['visible-arrow.vue']
+    },
+    {
+      demoId: 'popper-class',
+      name: {
+        'zh-CN': '添加样式类名',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['popper-class.vue']
+    },
+    {
+      demoId: 'tooltip-content',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置过通过 `content` 插槽添加自定义内容。滤类型<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['tooltip-content.vue']
+    },
+    {
+      demoId: 'popper-options',
+      name: {
+        'zh-CN': 'popper 配置',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['popper-options.vue']
+    },
+    {
+      demoId: 'popper-options-bubbling',
+      name: {
+        'zh-CN': 'popper 配置通过 bubbling 控制 tip 位置',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['popper-options-bubbling.vue']
+    },
+    {
+      demoId: 'tabindex',
+      name: {
+        'zh-CN': 'tabindex 配置',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['tabindex.vue']
+    },
+    {
+      demoId: 'content-pre',
+      name: {
+        'zh-CN': '文本预格式化',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['content-pre.vue']
+    },
+    {
+      demoId: 'content-render',
+      name: {
+        'zh-CN': '自定义渲染',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['content-render.vue']
+    },
+    {
+      demoId: 'z-index',
+      name: {
+        'zh-CN': '弹出层 zIndex',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['z-index.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/user-head/webdoc/user-head.cn.md

@@ -0,0 +1,9 @@
+---
+title: UserHead 用户头像
+---
+
+# UserHead 用户头像
+
+<div>
+UserHead 用户头像组件，用来代表用户或事物，支持图片、图标或字符展示。
+</div>

package/resources/mobile-first/app/user-head/webdoc/user-head.en.md

@@ -0,0 +1,9 @@
+---
+title: UserHead 用户头像
+---
+
+# UserHead 用户头像
+
+<div>
+UserHead 用户头像组件，用来代表用户或事物，支持图片、图标或字符展示。
+</div>

package/resources/mobile-first/app/user-head/webdoc/user-head.js

@@ -0,0 +1,57 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p></p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+
+    {
+      demoId: 'user-head-style',
+      name: {
+        'zh-CN': '圆形头像',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>可通过 `round` 设置圆形头像。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['user-head-style.vue']
+    },
+    {
+      demoId: 'user-head-size',
+      name: {
+        'zh-CN': '头像尺寸',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>可通过 `size` 设置圆形头像尺寸大小。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['user-head-size.vue']
+    },
+    {
+      demoId: 'user-head-group',
+      name: {
+        'zh-CN': '群组头像',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过`group-size`属性设置群组头像整体尺寸大小，通过`list`传入对应数据<br>type：表示粗腰传入的类型<br>modelValue：文字头像传入字符串，图标头像不传，图片头像传入图片链接<br>round：是否展示圆形<br>群组头像最多只展示 4 个头像<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['user-head-group.vue']
+    }
+  ],
+  apis: []
+}

package/resources/pc/api/en-US/popeditor.json

@@ -195,6 +195,13 @@
       "type": "String",
       "desc": "Customized configuration pop-up window class name",
       "defaultValue": ""
+    },
+    {
+      "name": "auto-lookup",
+      "sample": "auto-lookup",
+      "type": "Boolean",
+      "desc": "Set initialization not to request data",
+      "defaultValue": "true"
     }
   ],
   "slots": [

package/resources/pc/api/zh-CN/config-provider.json

@@ -0,0 +1,32 @@
+{
+    "attrs": [
+        {
+            "name": "design",
+            "sample": "base",
+            "desc": "规范",
+            "type": "ConfigProviderProps",
+            "defaultValue": ""
+        },
+        {
+            "name": "breakPoints",
+            "sample": "base",
+            "desc": "断点, 为Layout提供",
+            "type": "breakPoint",
+            "defaultValue": "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}"
+        },
+        {
+            "name": "direction",
+            "sample": "text-dire",
+            "desc": "文字排版方向",
+            "type": "'ltr' | 'rtl'",
+            "defaultValue": "ltr"
+        },
+        {
+            "name": "tag",
+            "type": "object",
+            "desc": "是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div",
+            "sample": "base",
+            "defaultValue": "{enable: true,name: 'div'}"
+        }
+    ]
+}

package/resources/pc/api/zh-CN/popeditor.json

@@ -195,6 +195,13 @@
       "type": "String",
       "desc": "自定义配置弹窗类名",
       "defaultValue": ""
+    },
+    {
+      "name": "auto-lookup",
+      "sample": "auto-lookup",
+      "type": "Boolean",
+      "desc": "设置初始化不请求数据",
+      "defaultValue": "true"
     }
   ],
   "slots": [

package/resources/pc/api/zh-CN/transfer.json

@@ -178,7 +178,7 @@
       "defaultValue": ""
     },
     {
-      "name": "button",
+      "name": "button-panel",
       "sample": "panel-slot",
       "type": "",
       "desc": "自定义穿梭按钮",
@@ -192,15 +192,15 @@
       "defaultValue": ""
     },
     {
-      "name": "leftPanel",
-      "sample": "",
+      "name": "left-panel",
+      "sample": "panel-slot",
       "type": "",
       "desc": "左侧自定义内容",
       "defaultValue": ""
     },
     {
-      "name": "rightPanel",
-      "sample": "",
+      "name": "right-panel",
+      "sample": "panel-slot",
       "type": "",
       "desc": "右侧自定义内容",
       "defaultValue": ""

package/resources/pc/api/zh-CN/tree-menu.json

@@ -181,7 +181,7 @@
   "events": [
     {
       "name": "node-click",
-      "sample": "event-current-change",
+      "sample": "event-node-click",
       "type": "Function(arg1,arg2)",
       "desc": "节点被点击时的回调;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Object // 当前点击节点的数据信息对象",
       "defaultValue": ""

package/resources/pc/api/zh-CN/tree.json

@@ -4,7 +4,7 @@
       "name": "data",
       "sample": "data-source",
       "type": "Array",
-      "desc": "设置数据源。可配置静态数据源和动态数据源。;展示数据",
+      "desc": "设置数据源。可配置静态数据源和动态数据源。",
       "defaultValue": ""
     },
     {
@@ -53,7 +53,7 @@
       "name": "node-key",
       "sample": "node-key",
       "type": "String",
-      "desc": "节点唯一标识属性名称。;每个树节点用来作为唯一标识的属性，整棵树应该是唯一的",
+      "desc": "节点唯一标识属性名称。每个树节点用来作为唯一标识的属性，整棵树应该是唯一的",
       "defaultValue": ""
     },
     {
@@ -74,7 +74,7 @@
       "name": "expand-on-click-node",
       "sample": "expand-on-click-node",
       "type": "Boolean",
-      "desc": "点击节点展开收起开关。当设置为true: 点击节点内容时可展开/收起节点。设置为false: 只有点击节点名称前面的展开/收起图标才能进行节点展开/收起。;是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。",
+      "desc": "点击节点展开收起开关。当设置为true: 点击节点内容时可展开/收起节点。设置为false: 只有点击节点名称前面的展开/收起图标才能进行节点展开/收起。是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。",
       "defaultValue": "该属性的默认值为 true"
     },
     {
@@ -95,7 +95,7 @@
       "name": "default-checked-keys",
       "sample": "default-checked-keys",
       "type": "Array",
-      "desc": "配置默认选中。取值为 key 在数据源 dataset 中所对应的值。组件生成后会默认将 defaultValue 中所对应的节点选中。;默认勾选的节点的 key 的数组",
+      "desc": "配置默认选中。取值为 key 在数据源 dataset 中所对应的值。组件生成后会默认将 defaultValue 中所对应的节点选中。默认勾选的节点的 key 的数组",
       "defaultValue": ""
     },
     {
@@ -123,7 +123,7 @@
       "name": "draggable",
       "sample": "node-draggable",
       "type": "Boolean",
-      "desc": "是否开启节点拖拽，节点的位置可任意拖放，改变原来的节点的父子结构。;是否开启拖拽节点功能",
+      "desc": "是否开启节点拖拽，节点的位置可任意拖放，改变原来的节点的父子结构。是否开启拖拽节点功能",
       "defaultValue": "该属性的默认值为 false"
     },
     {
@@ -158,7 +158,7 @@
       "name": "lazy",
       "sample": "lazy-load-node",
       "type": "Boolean",
-      "desc": "异步加载模式，展开节点时再请求数据。需要服务支持。;是否懒加载子节点，需与 load 方法结合使用",
+      "desc": "异步加载模式，展开节点时再请求数据。需要服务支持。是否懒加载子节点，需与 load 方法结合使用",
       "defaultValue": "该属性的默认值为 false"
     },
     {
@@ -172,14 +172,14 @@
       "name": "filter-node-method",
       "sample": "filter-node",
       "type": "Function(value, data, node)",
-      "desc": "指定输入筛选时匹配的节点的字段值。showFilter 为 false时无效。;对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏",
+      "desc": "指定输入筛选时匹配的节点的字段值。showFilter 为 false时无效。对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏",
       "defaultValue": ""
     },
     {
       "name": "accordion",
       "sample": "accordion-mode",
       "type": "Boolean",
-      "desc": "是否为单一路径。为 true 时，全部层级的节点同级互斥，为数字时，不大于该值的节点同级互斥。;是否每次只打开一个同级树节点展开",
+      "desc": "是否为单一路径。为 true 时，全部层级的节点同级互斥，为数字时，不大于该值的节点同级互斥。是否每次只打开一个同级树节点展开",
       "defaultValue": "该属性的默认值为 false"
     },
     {
@@ -232,7 +232,7 @@
       "name": "getCheckedNodes",
       "sample": "check-on-click-node",
       "type": "(leafOnly, includeHalfChecked) => result",
-      "desc": "获取选中标识的数据。;若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组，仅配置多选时生效",
+      "desc": "获取选中标识的数据。若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组，仅配置多选时生效",
       "defaultValue": ""
     },
     {
@@ -323,7 +323,7 @@
       "name": "remove",
       "sample": "",
       "type": "(data) => void",
-      "desc": "删除节点。;删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性",
+      "desc": "删除节点。删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性",
       "defaultValue": ""
     },
     {
@@ -353,7 +353,7 @@
       "name": "node-click",
       "sample": "check-on-click-node",
       "type": "Function(data, node, vm)",
-      "desc": "点击节点后的事件。;节点被点击时的回调;//参数说明\n{data: 节点数据,node: 节点状态信息（包括数据）,vm: 组件实例}",
+      "desc": "点击节点后的事件。节点被点击时的回调;//参数说明\n{data: 节点数据,node: 节点状态信息（包括数据）,vm: 组件实例}",
       "defaultValue": ""
     },
     {
@@ -388,7 +388,7 @@
       "name": "node-expand",
       "sample": "default-expanded-keys",
       "type": "Function(data, node, vm)",
-      "desc": "展开节点后的事件。;节点被展开时触发的事件;//参数说明\n{data: 节点数据,node: 节点状态信息（包括数据,vm: 当前组件实例}",
+      "desc": "展开节点后的事件。节点被展开时触发的事件;//参数说明\n{data: 节点数据,node: 节点状态信息（包括数据,vm: 当前组件实例}",
       "defaultValue": ""
     },
     {
@@ -437,7 +437,7 @@
       "name": "node-drop",
       "sample": "node-draggable",
       "type": "Function(draggingNode, targetNode, dropType, event)",
-      "desc": "拖放节点后的事件。开启 dragable 属性为 true 有效。;拖拽成功完成时触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系（before/after/inner/none)\nevent: 原生事件}",
+      "desc": "拖放节点后的事件。开启 dragable 属性为 true 有效。拖拽成功完成时触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系（before/after/inner/none)\nevent: 原生事件}",
       "defaultValue": ""
     }
   ]

package/resources/pc/demo/action-menu/basic-usage.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('测试基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/basic-usage')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
+  const childMenu = page.locator('.tiny-dropdown-menu.tiny-dropdown-item--child')
+  const moreItem = menuItem.last().getByRole('button', { name: '更多' })
+
+  await expect(menuItem).toHaveCount(3)
+  await expect(menuItem.last()).toHaveText(/更多/)
+  await expect(moreItem.locator('svg path')).toHaveAttribute('d', 'M2 6h20L12 19z')
+  await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
+  await moreItem.hover()
+  await expect(moreItem.locator('svg')).toHaveCSS('transform', 'matrix(-1, 0, 0, -1, 0, 0)')
+  await expect(dropDownMenu).toBeVisible()
+  await dropDownMenu.locator('.tiny-dropdown-item').filter({ hasText: '网络设置' }).hover()
+  await expect(childMenu).toBeVisible()
+})

package/resources/pc/demo/action-menu/basic-usage.vue

@@ -1,5 +1,6 @@
 <template>
-  <tiny-action-menu :options="options"> </tiny-action-menu>
+  <tiny-action-menu :options="options">
+  </tiny-action-menu>
 </template>
 
 <script lang="jsx">

package/resources/pc/demo/action-menu/disabled.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/disabled')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const disabledItem = actionMenu.locator('.tiny-dropdown-item.tiny-dropdown-menu__item').filter({ hasText: '开机' })
+
+  await expect(disabledItem).toHaveClass(/is-disabled/)
+  await expect(disabledItem).toHaveCSS('cursor', 'not-allowed')
+})

package/resources/pc/demo/action-menu/item-click.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('菜单项点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/item-click')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const notify = page.locator('.tiny-notify')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
+
+  await menuItem.filter({ hasText: '开机' }).click()
+  await expect(notify.filter({ hasText: '{"label":"开机"}' })).toBeVisible()
+  await menuItem.filter({ hasText: '更多' }).hover()
+  await page.waitForTimeout(200)
+  await dropDownMenu.locator('.tiny-dropdown-item').filter({ hasText: '关机' }).click()
+  await expect(notify.filter({ hasText: '{"label":"关机"}' })).toBeVisible()
+})

package/resources/pc/demo/action-menu/max-show-num.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('显示个数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/max-show-num')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
+  const moreItem = menuItem.last().getByRole('button', { name: '更多' })
+
+  await expect(menuItem).toHaveCount(2)
+  await moreItem.hover()
+  await expect(dropDownMenu).toBeVisible()
+  await expect(page.locator('body > .tiny-dropdown-menu.tiny-popper >li.tiny-dropdown-item')).toHaveCount(4)
+})

package/resources/pc/demo/action-menu/more-click.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('更多按钮点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/more-click')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const notify = page.locator('.tiny-notify')
+
+  await menuItem.filter({ hasText: '开机' }).click()
+  await expect(notify).not.toBeVisible()
+  await menuItem.filter({ hasText: '更多' }).click()
+  await expect(notify.filter({ hasText: '触发 moreClick 事件' })).toBeVisible()
+})

package/resources/pc/demo/action-menu/more-text.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('下拉按钮显示文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/more-text')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+
+  await expect(menuItem.last().locator('.tiny-dropdown__title')).toHaveText('自定义下拉文本')
+})

package/resources/pc/demo/action-menu/popper-class.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义下拉面板样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/popper-class')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
+
+  await menuItem.last().hover()
+  await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
+})

package/resources/pc/demo/action-menu/slot-item.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('菜单项插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/slot-item')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const menuItem = actionMenu.locator('.tiny-action-menu__item')
+  const customIconReg = /^M6\.5 11C5\.7.+2\.2-2\.3c0-\.5\.4-\.9\.9-\.9z$/
+
+  await expect(menuItem.first().locator('svg > path').first()).toHaveAttribute('d', customIconReg)
+  await expect(menuItem.nth(1).locator('svg > path').first()).toHaveAttribute('d', customIconReg)
+})