@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/app/flowchart/slots-composition-api.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="tiny-demo">
+    <tiny-flowchart
+      ref="chart"
+      :data="chartDataRaw"
+      :config="chartConfigRaw"
+      @click-node="onClickNode"
+      @click-link="onClickLink"
+      @click-blank="onClickBlank"
+    >
+      <!-- content 插槽：下拉形式展示，收起时显示紧凑视图，点击展开显示表单列表 -->
+      <template #content="params">
+        <tiny-popover
+          placement="bottom-start"
+          trigger="manual"
+          width="220"
+          popper-class="flowchart-content-popover"
+          :visible-arrow="false"
+          :model-value="params.dropdowns[params.node.name]"
+          @update:model-value="params.dropdowns[params.node.name] = $event"
+        >
+          <template #default>
+            <div class="flowchart-content-slot">
+              <div v-for="(item, i) in params.node.info.items" :key="item.key || i" class="content-item">
+                <span class="item-name">{{ item.name }}</span>
+                <span class="item-role">{{ item.role }}</span>
+                <span class="item-status">{{ item.status }}</span>
+              </div>
+            </div>
+          </template>
+          <template #reference>
+            <div
+              class="flowchart-content-trigger"
+              :style="{ borderColor: params.config.listBorderColor }"
+              @click.stop="params.dropdowns[params.node.name] = !params.dropdowns[params.node.name]"
+            >
+              <span class="trigger-text">处理人({{ params.node.info.items.length }})</span>
+              <component :is="params.dropdowns[params.node.name] ? IconUp : IconDown" class="trigger-icon" />
+            </div>
+          </template>
+        </tiny-popover>
+      </template>
+    </tiny-flowchart>
+  </div>
+</template>
+
+<script setup>
+import { TinyModal, TinyPopover, TinyFlowchart } from '@opentiny/vue'
+import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { hooks } from '@opentiny/vue-common'
+
+const { createNode, createLink, createItem, createConfig } = TinyFlowchart
+
+const IconDown = iconChevronDown()
+const IconUp = iconChevronUp()
+
+const handlers = [
+  createItem('WX100001', '张三', '转审人', '已转审', '很好', '2018-08-20 12:00', ''),
+  createItem('WX100002', '李四', '主管', '已转审', '非常好', '2018-08-20 12:00', ''),
+  createItem('WX100003', '王五', '主管', '处理中', '', '', '')
+]
+
+const chartData = {
+  nodes: [
+    createNode('1', 1, '基础信息', '2018.08.02', [], 1, 0),
+    createNode('2', 1, '调职补偿', '2018.08.02', handlers, 0, 2),
+    createNode('3', 1, '汇总调职补偿', '', [], 1, 4),
+    createNode('4', 3, '启动精算', '', [], 4, 5),
+    createNode('5', 3, '复核精算', '', [], 4, 6),
+    createNode('6', 3, '审核精算', '', [], 4, 7),
+    createNode('7', 1, '调职补偿', '2018.08.02', [], 2, 1),
+    createNode('8', 1, '复核', '2018.08.02', [], 2, 2),
+    createNode('9', 2, '审批', '2018.08.02', [], 2, 3),
+    createNode('10', 1, '复核', '2018.08.02', [], 4, 2),
+    createNode('11', 2, '审批', '2018.08.02', [], 4, 3),
+    createNode('12', 3, '运算调职兑现率', '', [], 4, 4),
+    createNode('13', 1, '复核', '2018.08.02', [], 6, 2),
+    createNode('14', 4, '审批审批审批审批审批 0123456789asdfghjkl', '2018.08.02', [], 6, 3)
+  ],
+  links: [
+    createLink('1', '2', '0 r0.5 t1 c r1.5', 1),
+    createLink('2', '3', '0 r1.5 c b1 r0.5', 3),
+    createLink('3', '4', '0 r0.5 c b3 r0.5', 3),
+    createLink('4', '5', '', 3),
+    createLink('5', '6', '', 3),
+    createLink('1', '7', 'r0.5 b1 c r0.5', 1),
+    createLink('7', '8', '', 1),
+    createLink('8', '9', '', 1),
+    createLink('9', '3', '0 r0.5 c t1', 3),
+    createLink('10', '11', '', 1),
+    createLink('11', '12', '', 3),
+    createLink('12', '4', '0 r0.5', 3),
+    createLink('13', '14', '', 1),
+    createLink('14', '4', '0 r1.5 c t2', 3, 'dash')
+  ]
+}
+
+const chartConfig = createConfig()
+
+chartConfig.headUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
+
+chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status)
+chartConfig.adjustPos = (afterNode) => afterNode.raw.name === '2' && (afterNode.y += 1)
+// content 插槽需更大展示空间，默认 listWidth 62px 过小会导致文字挤压重叠
+chartConfig.listWidth = 150
+
+const chartDataRaw = hooks.markRaw(chartData)
+const chartConfigRaw = hooks.markRaw(chartConfig)
+
+function onClickNode(_afterNode, _e) {
+  TinyModal.message('click-node')
+}
+
+function onClickLink(_afterLink, _e) {
+  TinyModal.message('click-link')
+}
+
+function onClickBlank(_param, _e) {
+  TinyModal.message('click-blank')
+}
+</script>
+
+<style scoped>
+/* 覆盖 content 插槽容器的固定高度(默认 24px)，否则下拉触发区会被挤压 */
+:deep(.tiny-flow-chart__node-item) {
+  min-height: 24px !important;
+  height: auto !important;
+}
+
+/* 下拉触发区：收起时显示的紧凑视图 */
+.flowchart-content-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  min-height: 22px;
+  padding: 0 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.flowchart-content-trigger .trigger-text {
+  white-space: nowrap;
+}
+.flowchart-content-trigger .trigger-icon {
+  flex-shrink: 0;
+}
+
+/* content 插槽：下拉展开后的表单列表 */
+.flowchart-content-slot {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.flowchart-content-slot .content-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px dashed #e8e8e8;
+}
+.flowchart-content-slot .content-item:last-child {
+  border-bottom: none;
+}
+.flowchart-content-slot .item-name {
+  min-width: 40px;
+}
+.flowchart-content-slot .item-role {
+  min-width: 50px;
+  color: #666;
+}
+.flowchart-content-slot .item-status {
+  color: #1890ff;
+}
+
+/* 下拉弹层样式 */
+:deep(.flowchart-content-popover.tiny-popper) {
+  margin-top: 2px;
+  padding: 0;
+}
+</style>

package/demos/pc/app/flowchart/slots.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽定制', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('flowchart#slots')
+
+  const preview = page.locator('#slots')
+  const flowchart = preview.locator('.tiny-flow-chart')
+  const nodes = flowchart.locator('.tiny-flow-chart__node-icon-wrapper')
+  await expect(flowchart).toBeVisible()
+  await expect(flowchart.locator('.tiny-flow-chart__canvas')).toBeVisible()
+  await expect(nodes).toHaveCount(14)
+
+  // content 插槽：下拉形式，点击「处理人(3)」展开后显示表单列表（弹层可能 teleport 到 body）
+  const trigger = flowchart.locator('.flowchart-content-trigger')
+  await expect(trigger).toBeVisible()
+  await expect(trigger).toContainText('处理人(3)')
+  await trigger.click()
+  const contentSlot = page.locator('.flowchart-content-slot')
+  await expect(contentSlot).toBeVisible()
+  await expect(contentSlot).toContainText('张三')
+  await expect(contentSlot).toContainText('李四')
+  await expect(contentSlot).toContainText('王五')
+})

package/demos/pc/app/flowchart/slots.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="tiny-demo">
+    <tiny-flowchart
+      ref="chart"
+      :data="chartData"
+      :config="chartConfig"
+      @click-node="onClickNode"
+      @click-link="onClickLink"
+      @click-blank="onClickBlank"
+    >
+      <!-- content 插槽：下拉形式展示，收起时显示紧凑视图，点击展开显示表单列表 -->
+      <template #content="params">
+        <tiny-popover
+          placement="bottom-start"
+          trigger="manual"
+          width="220"
+          popper-class="flowchart-content-popover"
+          :visible-arrow="false"
+          :model-value="params.dropdowns[params.node.name]"
+          @update:model-value="params.dropdowns[params.node.name] = $event"
+        >
+          <template #default>
+            <div class="flowchart-content-slot">
+              <div v-for="(item, i) in params.node.info.items" :key="item.key || i" class="content-item">
+                <span class="item-name">{{ item.name }}</span>
+                <span class="item-role">{{ item.role }}</span>
+                <span class="item-status">{{ item.status }}</span>
+              </div>
+            </div>
+          </template>
+          <template #reference>
+            <div
+              class="flowchart-content-trigger"
+              :style="{ borderColor: params.config.listBorderColor }"
+              @click.stop="params.dropdowns[params.node.name] = !params.dropdowns[params.node.name]"
+            >
+              <span class="trigger-text">处理人({{ params.node.info.items.length }})</span>
+              <component :is="params.dropdowns[params.node.name] ? IconUp : IconDown" class="trigger-icon" />
+            </div>
+          </template>
+        </tiny-popover>
+      </template>
+    </tiny-flowchart>
+  </div>
+</template>
+
+<script>
+import { TinyModal, TinyPopover, TinyFlowchart } from '@opentiny/vue'
+import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { hooks } from '@opentiny/vue-common'
+
+const { createNode, createLink, createItem, createConfig } = TinyFlowchart
+
+const IconDown = iconChevronDown()
+const IconUp = iconChevronUp()
+
+const handlers = [
+  createItem('WX100001', '张三', '转审人', '已转审', '很好', '2018-08-20 12:00', ''),
+  createItem('WX100002', '李四', '主管', '已转审', '非常好', '2018-08-20 12:00', ''),
+  createItem('WX100003', '王五', '主管', '处理中', '', '', '')
+]
+
+const chartData = {
+  nodes: [
+    createNode('1', 1, '基础信息', '2018.08.02', [], 1, 0),
+    createNode('2', 1, '调职补偿', '2018.08.02', handlers, 0, 2),
+    createNode('3', 1, '汇总调职补偿', '', [], 1, 4),
+    createNode('4', 3, '启动精算', '', [], 4, 5),
+    createNode('5', 3, '复核精算', '', [], 4, 6),
+    createNode('6', 3, '审核精算', '', [], 4, 7),
+    createNode('7', 1, '调职补偿', '2018.08.02', [], 2, 1),
+    createNode('8', 1, '复核', '2018.08.02', [], 2, 2),
+    createNode('9', 2, '审批', '2018.08.02', [], 2, 3),
+    createNode('10', 1, '复核', '2018.08.02', [], 4, 2),
+    createNode('11', 2, '审批', '2018.08.02', [], 4, 3),
+    createNode('12', 3, '运算调职兑现率', '', [], 4, 4),
+    createNode('13', 1, '复核', '2018.08.02', [], 6, 2),
+    createNode('14', 4, '审批审批审批审批审批 0123456789asdfghjkl', '2018.08.02', [], 6, 3)
+  ],
+  links: [
+    createLink('1', '2', '0 r0.5 t1 c r1.5', 1),
+    createLink('2', '3', '0 r1.5 c b1 r0.5', 3),
+    createLink('3', '4', '0 r0.5 c b3 r0.5', 3),
+    createLink('4', '5', '', 3),
+    createLink('5', '6', '', 3),
+    createLink('1', '7', 'r0.5 b1 c r0.5', 1),
+    createLink('7', '8', '', 1),
+    createLink('8', '9', '', 1),
+    createLink('9', '3', '0 r0.5 c t1', 3),
+    createLink('10', '11', '', 1),
+    createLink('11', '12', '', 3),
+    createLink('12', '4', '0 r0.5', 3),
+    createLink('13', '14', '', 1),
+    createLink('14', '4', '0 r1.5 c t2', 3, 'dash')
+  ]
+}
+
+const chartConfig = createConfig()
+
+chartConfig.headUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
+
+chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status)
+chartConfig.adjustPos = (afterNode) => afterNode.raw.name === '2' && (afterNode.y += 1)
+// content 插槽需更大展示空间，默认 listWidth 62px 过小会导致文字挤压重叠
+chartConfig.listWidth = 150
+
+export default {
+  components: {
+    TinyFlowchart,
+    TinyPopover,
+    IconDown,
+    IconUp
+  },
+  data() {
+    return {
+      chartData: hooks.markRaw(chartData),
+      chartConfig: hooks.markRaw(chartConfig)
+    }
+  },
+  methods: {
+    onClickNode(_afterNode, _e) {
+      TinyModal.message('click-node')
+    },
+    onClickLink(_afterLink, _e) {
+      TinyModal.message('click-link')
+    },
+    onClickBlank(_param, _e) {
+      TinyModal.message('click-blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 覆盖 content 插槽容器的固定高度(默认 24px)，否则下拉触发区会被挤压 */
+:deep(.tiny-flow-chart__node-item) {
+  min-height: 24px !important;
+  height: auto !important;
+}
+
+/* 下拉触发区：收起时显示的紧凑视图 */
+.flowchart-content-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  min-height: 22px;
+  padding: 0 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.flowchart-content-trigger .trigger-text {
+  white-space: nowrap;
+}
+.flowchart-content-trigger .trigger-icon {
+  flex-shrink: 0;
+}
+
+/* content 插槽：下拉展开后的表单列表 */
+.flowchart-content-slot {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.flowchart-content-slot .content-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px dashed #e8e8e8;
+}
+.flowchart-content-slot .content-item:last-child {
+  border-bottom: none;
+}
+.flowchart-content-slot .item-name {
+  min-width: 40px;
+}
+.flowchart-content-slot .item-role {
+  min-width: 50px;
+  color: #666;
+}
+.flowchart-content-slot .item-status {
+  color: #1890ff;
+}
+
+/* 下拉弹层样式 */
+:deep(.flowchart-content-popover.tiny-popper) {
+  margin-top: 2px;
+  padding: 0;
+}
+</style>

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

@@ -12,11 +12,23 @@ export default {
       },
       desc: {
         'zh-CN':
-          "\n        <p>节点支持 <code>icon</code> | <code>label</code> | <code>content</code> 插槽定制内容，示例提供了 <code>content</code> 插槽的默认实现。节点使用 <code>row</code> | <code>col</code> 属性进行行列配置。连线使用 <code>p</code> 属性进行相对路径配置。流程图的其它设置通过 <code>config</code> 进行配置。组件预置了 <code>createItem</code> | <code>createNode</code> | <code>createLink</code> | <code>createConfig</code> 静态方法，以便于快速构建选项。流程图的行高列宽由 <code>config</code> 的属性 <code>width</code> | <code>height</code> | <code>cols</code> | <code>rows</code> 确定，节点的位置由流程图的行高列宽，以及节点的 <code>row</code> | <code>col</code> 位置确定。</p>\n        <p>连线相对路径配置详细介绍：</p>\n        <ul>\n          <li>'0'  表示从起始节点 1 的位置开始</li>\n          <li>'r2' 表示向右画两列宽度的连线</li>\n          <li>'c'  表示画一个圆角</li>\n          <li>'b2' 表示向下画两行高度的连线</li>\n          <li>'c'  再画一个圆角</li>\n          <li>'l1' 表示向左画一列宽度的连线</li>\n          <li>'c'  再画一个圆角</li>\n          <li>'t1' 向上画一行高度的连线</li>\n        </ul>\n        <p>连线配置参数举例:</p>\n        <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n        ",
+          "\n<p>节点支持 <code>icon</code> | <code>label</code> | <code>content</code> 插槽定制内容，示例提供了 <code>content</code> 插槽的默认实现。节点使用 <code>row</code> | <code>col</code> 属性进行行列配置。连线使用 <code>p</code> 属性进行相对路径配置。流程图的其它设置通过 <code>config</code> 进行配置。组件预置了 <code>createItem</code> | <code>createNode</code> | <code>createLink</code> | <code>createConfig</code> 静态方法，以便于快速构建选项。流程图的行高列宽由 <code>config</code> 的属性 <code>width</code> | <code>height</code> | <code>cols</code> | <code>rows</code> 确定，节点的位置由流程图的行高列宽，以及节点的 <code>row</code> | <code>col</code> 位置确定。</p>\n        <p>连线相对路径配置详细介绍：</p>\n        <ul>\n          <li>'0'  表示从起始节点 1 的位置开始</li>\n          <li>'r2' 表示向右画两列宽度的连线</li>\n          <li>'c'  表示画一个圆角</li>\n          <li>'b2' 表示向下画两行高度的连线</li>\n          <li>'c'  再画一个圆角</li>\n          <li>'l1' 表示向左画一列宽度的连线</li>\n          <li>'c'  再画一个圆角</li>\n          <li>'t1' 向上画一行高度的连线</li>\n        </ul>\n        <p>连线配置参数举例:</p>\n        <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n        ",
         'en-US':
-          "\n        <p>The node supports custom content through the <code>icon</code> | <code>label</code> | <code>content</code> slots, with a default implementation provided for the <code>content</code> slot. Nodes can be configured for row and column placement using the <code>row</code> | <code>col</code> attributes, while connections between nodes can be configured using the <code>p</code> attribute for relative path configuration. Other settings for the flowchart can be configured through the <code>config</code> attribute. The component also provides static methods <code>createItem</code> | <code>createNode</code> | <code>createLink</code> | <code>createConfig</code> for quick option building. The row height and column width of the flowchart are determined by the <code>width</code> | <code>height</code> | <code>cols</code> | <code>rows</code> attributes of the <code>config</code>, while the position of each node is determined by the row height, column width, and the <code>row</code> | <code>col</code> position of the node.</p>\n        <p>Detailed introduction to configuring relative paths for connections:</p>\n        <ul>\n          <li>'0' represents starting from node 1 position.</li>\n          <li>'r2' represents drawing a line two columns wide to the right.</li>\n          <li>'c'  represents drawing a circle.</li>\n          <li>'b2' represents a downward line of two height units.</li>\n          <li>'c'  represents drawing a circle again.</li>\n          <li>'l1' represents drawing a line one columns wide to the left.</li>\n          <li>'t1' represents a upward line of two height units.</li>\n        </ul>\n        <p>Example of connection configuration parameters:</p>\n        <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n        "
+          "\n<p>The node supports custom content through the <code>icon</code> | <code>label</code> | <code>content</code> slots, with a default implementation provided for the <code>content</code> slot. Nodes can be configured for row and column placement using the <code>row</code> | <code>col</code> attributes, while connections between nodes can be configured using the <code>p</code> attribute for relative path configuration. Other settings for the flowchart can be configured through the <code>config</code> attribute. The component also provides static methods <code>createItem</code> | <code>createNode</code> | <code>createLink</code> | <code>createConfig</code> for quick option building. The row height and column width of the flowchart are determined by the <code>width</code> | <code>height</code> | <code>cols</code> | <code>rows</code> attributes of the <code>config</code>, while the position of each node is determined by the row height, column width, and the <code>row</code> | <code>col</code> position of the node.</p>\n        <p>Detailed introduction to configuring relative paths for connections:</p>\n        <ul>\n          <li>'0' represents starting from node 1 position.</li>\n          <li>'r2' represents drawing a line two columns wide to the right.</li>\n          <li>'c'  represents drawing a circle.</li>\n          <li>'b2' represents a downward line of two height units.</li>\n          <li>'c'  represents drawing a circle again.</li>\n          <li>'l1' represents drawing a line one columns wide to the left.</li>\n          <li>'t1' represents a upward line of two height units.</li>\n        </ul>\n        <p>Example of connection configuration parameters:</p>\n        <span>const link = { from: '1', to: '2', p: '0 r2 c b2 c l1 c t1', status: 1 }</span>\n        "
       },
       codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'slots',
+      name: {
+        'zh-CN': '插槽定制',
+        'en-US': 'Slots Usage'
+      },
+      desc: {
+        'zh-CN': '节点支持 content 插槽自定义内容。',
+        'en-US': 'The node supports content slots for custom content.'
+      },
+      codeFiles: ['slots.vue']
     }
   ],
   features: [

package/demos/pc/app/form/basic-usage.spec.ts

@@ -18,15 +18,17 @@ test('测试基本表单', async ({ page }) => {
   await decreaseIcon.click()
   await expect(numericInput).toHaveValue('0')
 
-  // 日期选择器
-  const datePicker = demo.getByRole('textbox').first()
+  // 日期选择器（PR #4028 后，role 从 textbox 改为 combobox）
+  const datePicker = demo.getByRole('combobox').first()
   await datePicker.click()
+  await page.waitForTimeout(200) // 等待弹出层显示
   await page.getByRole('cell', { name: '15' }).getByText('15').click()
   await expect(datePicker).toHaveValue(/15/)
 
-  // 時間选择器
-  const timePicker = demo.getByRole('combobox').nth(0)
+  // 时间选择器
+  const timePicker = demo.getByRole('combobox').nth(1) // 第二个 combobox（第一个是日期选择器）
   await timePicker.click()
+  await page.waitForTimeout(200) // 等待下拉列表显示
   await page.getByRole('option').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 

package/demos/pc/app/form/custom-validation-string-length-composition-api.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="demo-form">
+    <tiny-form :model="state" :rules="rules">
+      <tiny-form-item label="HTML" prop="value0">
+        <tiny-input :maxLength="3" v-model="state.value0"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="默认" prop="value1">
+        <tiny-input v-model="state.value1"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="自定义" prop="value2">
+        <tiny-input v-model="state.value2"></tiny-input>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput } from '@opentiny/vue'
+
+const state = reactive({
+  value0: '',
+  value1: '',
+  value2: ''
+})
+
+const rules = ref({
+  value1: [{ max: 3 }],
+  value2: [{ max: 4, regular: (val) => val.length }]
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/demos/pc/app/form/custom-validation-string-length.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义字符串长度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#custom-validation-string-length')
+
+  const demo = page.locator('#custom-validation-string-length')
+  const input1 = demo.locator('input').nth(0)
+  const input2 = demo.locator('input').nth(1)
+  const input3 = demo.locator('input').nth(2)
+
+  await input1.fill('1111111')
+  await expect(input1).toHaveValue('111')
+  await input2.fill('1111111')
+  await expect(page.locator('.tiny-tooltip').getByText('不能大于 3 个字符')).toBeVisible()
+  await input3.fill('1111111')
+  await expect(page.locator('.tiny-tooltip').getByText('不能大于 4 个字符')).toBeVisible()
+})

package/demos/pc/app/form/custom-validation-string-length.vue

@@ -14,21 +14,36 @@
   </div>
 </template>
 
-<script setup>
-import { reactive, ref } from 'vue'
-
+<script>
 import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput } from '@opentiny/vue'
 
-const state = reactive({
-  value0: '',
-  value1: '',
-  value2: ''
-})
-
-const rules = ref({
-  value1: [{ max: 3 }],
-  value2: [{ max: 3, regular: (val) => val.length }]
-})
+export default {
+  components: {
+    TinyForm,
+    TinyFormItem,
+    TinyInput
+  },
+  data() {
+    return {
+      state: {
+        value0: '',
+        value1: '',
+        value2: ''
+      },
+      rules: {
+        value1: [{ max: 3 }],
+        value2: [
+          {
+            max: 4,
+            regular(val) {
+              return val.length
+            }
+          }
+        ]
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>

package/demos/pc/app/form/group-form-composition-api.vue

@@ -85,7 +85,7 @@ function resetForm() {
   width: 380px;
 }
 .group-form-title {
-  margin-bottom: 24px;
+  margin-top: 24px;
   font-size: 16px;
   color: #191919;
   font-weight: bold;
@@ -94,7 +94,7 @@ function resetForm() {
   padding-top: 8px;
 }
 .second-title {
-  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .address {
   position: relative;

package/demos/pc/app/form/group-form.vue

@@ -92,7 +92,7 @@ export default {
   width: 380px;
 }
 .group-form-title {
-  margin-bottom: 24px;
+  margin-top: 24px;
   font-size: 16px;
   color: #191919;
   font-weight: bold;
@@ -101,7 +101,7 @@ export default {
   padding-top: 8px;
 }
 .second-title {
-  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .address {
   position: relative;

package/demos/pc/app/grid/filter/advanced-filter-composition-api.vue

@@ -97,7 +97,7 @@ const employeesFilter = ref({
   layout: 'input,enum,default,extends,base',
   inputFilter: {
     component: TinyNumeric,
-    attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
+    attrs: { min: 0, max: 10000 },
     relations: [
       {
         label: '小于',

package/demos/pc/app/grid/filter/advanced-filter.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('过滤高级设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-default-filter')
+  await page.setViewportSize({ width: 1920, height: 1980 })
   await page
     .getByRole('cell', { name: '公司名称鼠标移入可以动态提示 tooltip，公司名称鼠标移入可以动态提示 tooltip' })
     .getByRole('img')

package/demos/pc/app/grid/filter/advanced-filter.vue

@@ -103,7 +103,7 @@ export default {
         layout: 'input,enum,default,extends,base',
         inputFilter: {
           component: TinyNumeric,
-          attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
+          attrs: { min: 0, max: 10000 },
           relations: [
             {
               label: '小于',