@opentiny/vue-docs 3.17.4 → 3.18.1

package/demos/mobile-first/app/time-line-new/single-status.vue

@@ -0,0 +1,40 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <tiny-time-line :data="data1" show-icon> </tiny-time-line>
+    <tiny-time-line :data="data2" show-icon>
+      <template #show-icon>
+        <icon-copy />
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+import { IconCopy, IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew,
+    IconCopy: IconCopy()
+  },
+  data() {
+    return {
+      data1: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() }
+      ],
+      data2: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconCopy() }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/sub-field.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-time-line :data="data" sub-field></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/webdoc/time-line-new.cn.md

@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>

package/demos/mobile-first/app/time-line-new/webdoc/time-line-new.en.md

@@ -0,0 +1,9 @@
+---
+title: TimeLine 时间线
+---
+
+# TimeLine 时间线
+
+<div>
+
+</div>

package/demos/mobile-first/app/time-line-new/webdoc/time-line-new.js

@@ -0,0 +1,120 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `data` 属性设置时间线步骤条数据</p>',
+        'en-US': '<p>Set the timeline step bar data through the `data` property.</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'sub-field',
+      name: {
+        'zh-CN': '两侧分布',
+        'en-US': 'Bilateral distribution'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `sub-field` 属性设置时间线两侧展示。</p>',
+        'en-US': '<p>Use the `sub-field` attribute to set the display on both sides of the timeline.</p>'
+      },
+      codeFiles: ['sub-field.vue']
+    },
+    {
+      demoId: 'single-status',
+      name: {
+        'zh-CN': '单状态时间轴',
+        'en-US': 'Single-state timeline'
+      },
+      desc: {
+        'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
+        'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
+      },
+      codeFiles: ['single-status.vue']
+    },
+    {
+      demoId: 'many-status',
+      name: {
+        'zh-CN': '多状态时间轴',
+        'en-US': 'Multi-state timeline'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过在`data`里面的属性`autoColor`设置自定义状态。对应场景： `success` ：成功  `error` ：失败 `info` ：等待 </p>',
+        'en-US':
+          '<p>Set the user-defined state through the `autoColor` attribute in `data`. Scenario: `success`: success; error`: failure; info`: waiting</p>'
+      },
+      codeFiles: ['many-status.vue']
+    },
+    {
+      demoId: 'node-toset',
+      name: {
+        'zh-CN': '节点配置图标',
+        'en-US': 'Node configuration icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
+        'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
+      },
+      codeFiles: ['node-toset.vue']
+    },
+    {
+      demoId: 'fold-time',
+      name: {
+        'zh-CN': '折叠时间轴',
+        'en-US': 'Collapse Timeline'
+      },
+      desc: {
+        '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: {
+        'zh-CN': '自定义插槽',
+        'en-US': 'Custom Slots'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `slot` 为 `left` 可以自定义步骤条右侧内容。`data`中自定义属性名应避免`name`(正标题)、`tips`(副标题)、`time`(时间)属性</p>',
+        'en-US':
+          '<p>You can set `slot` to `left` to customize the content on the right of the step bar. User-defined attribute names in `data` should avoid `name` (head title), `tips` (subtitle), and `time` (time) attributes.</p>'
+      },
+      codeFiles: ['auto-slot.vue']
+    }
+  ]
+}

package/demos/mobile-first/menus.js

@@ -55,6 +55,7 @@ export const cmpMenus = [
       { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
       { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
+      { name: 'FluentEditor', nameCn: '富文本', key: 'fluent-editor' },
       { name: 'Form', nameCn: '表单', key: 'form' },
       { name: 'Input', nameCn: '输入框', key: 'input' },
       { name: 'Numeric', nameCn: '计数器', key: 'numeric' },

package/demos/pc/app/autocomplete/clearable.spec.ts

@@ -3,10 +3,12 @@ import { test, expect } from '@playwright/test'
 test('可清除', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('autocomplete#clearable')
-  await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
+
+  const demo = page.locator('#clearable')
+  await demo.getByRole('textbox', { name: '请输入内容', exact: true }).click()
   await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
-  await page.getByRole('textbox', { name: '请输入内容', exact: true }).hover()
-  await page.getByRole('combobox').locator('path').click()
+  await demo.getByRole('textbox', { name: '请输入内容', exact: true }).hover()
+  await demo.getByRole('combobox').locator('.tiny-input__clear').click()
 
   await expect(page.getByRole('textbox', { name: '请输入内容', exact: true })).toHaveValue('')
 })

package/demos/pc/app/base-select/collapse-tags.spec.ts

@@ -20,13 +20,13 @@ test('collapse-tags', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
 
   // 取消选中一个
-  await option.filter({ hasText: '北京' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '北京' }).click()
   await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
   await expect(tag).toHaveCount(1)
 
   // 再选中2个
-  await option.filter({ hasText: '天津' }).locator('span').nth(2).click()
-  await option.filter({ hasText: '深圳' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '天津' }).click()
+  await option.filter({ hasText: '深圳' }).click()
   await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
   await expect(tag).toHaveCount(2)
 })

package/demos/pc/app/base-select/size.spec.ts

@@ -9,7 +9,7 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '30px')
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '28px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })
 

package/demos/pc/app/carousel/autoplay.spec.ts

@@ -7,7 +7,7 @@ test('自动切换', async ({ page }) => {
   await page.waitForTimeout(100)
   const preview = page.locator('#autoplay')
   const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
+  const carouselItems = preview.locator('.tiny-carousel__item')
   // 默认显示第一张幻灯片
   await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 

package/demos/pc/app/checkbox/checkbox-button-multiple.spec.ts

@@ -19,14 +19,4 @@ test('多行按钮', async ({ page }) => {
   let groupBox = await checkboxGroup.boundingBox()
   let checkboxButtonBox = await checkboxButton.boundingBox()
   expect(groupBox?.height).toBe(((checkboxButtonBox?.height || 0) + bottomSpace) * 2)
-
-  // 测试三行场景
-  page.setViewportSize({
-    width: 500,
-    height: 700
-  })
-  await page.waitForTimeout(200)
-  groupBox = await checkboxGroup.boundingBox()
-  checkboxButtonBox = await checkboxButton.boundingBox()
-  expect(groupBox?.height).toBe(((checkboxButtonBox?.height || 0) + bottomSpace) * 3)
 })

package/demos/pc/app/color-select-panel/alpha.spec.ts

@@ -3,7 +3,11 @@ import { test, expect } from '@playwright/test'
 test('测试Alpha', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#alpha')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  const demo = await page.locator('#alpha')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
   await page.locator('.black').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  const v1 = await page.evaluate('document.querySelector("input[type=text]").value = "#377820"')
+  await page.locator('.tiny-color-select-panel__alpha__slider').click()
+  const v2 = await page.evaluate('document.querySelector("input[type=text]").value = "#406a8080"')
+  expect(v1).not.toContainEqual(v2)
 })

package/demos/pc/app/color-select-panel/base.spec.ts

@@ -2,8 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('color-select-panel#basic-usage')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.goto('color-select-panel#alpha')
+  const demo = await page.locator('#alpha')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  const v1 = await page.evaluate('document.querySelector("input[type=text]").value = "#377820"')
   await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
+  const v2 = await page.evaluate('document.querySelector("input[type=text]").value = "#206578"')
+  expect(v1).not.toContainEqual(v2)
 })

package/demos/pc/app/color-select-panel/event.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('事件触发', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#event')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '取消' }).click()
+  const demo = await page.locator('#event')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '取消' }).click()
+  expect(page.locator('.tiny-notify')).toHaveText('用户点击了取消')
+  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
 })

package/demos/pc/app/color-select-panel/history.spec.ts

@@ -3,13 +3,11 @@ import { test, expect } from '@playwright/test'
 test('历史记录', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#history')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Append history color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '历史记录' }).click()
-  await page.getByRole('button', { name: 'Pop history color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '历史记录' }).click()
+  const demo = await page.locator('#history')
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.locator('.tiny-color-select-panel__inner__hue-select > div').dblclick()
+  await demo.getByRole('button', { name: '选择' }).click()
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '历史记录' }).click()
+  expect(page.locator('.tiny-color-select-panel__history__color-block')).toHaveCount(2)
 })

package/demos/pc/app/color-select-panel/predefine.spec.ts

@@ -3,23 +3,9 @@ import { test, expect } from '@playwright/test'
 test('预定义颜色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#predefine')
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.locator('.black').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Append predefine color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
-  await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
+  const demo = await page.locator('#predefine')
   await page.getByRole('button', { name: 'Pop predefine color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
-  await page.getByRole('button', { name: '选择' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
-  await page.getByRole('button', { name: 'Append predefine color' }).click()
-  await page.getByRole('button', { name: 'Show Color select panel' }).click()
-  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await demo.getByRole('button', { name: 'Show Color select panel' }).click()
+  await demo.getByRole('button', { name: '预定义颜色' }).click()
+  expect(page.locator('.tiny-color-select-panel__predefine__color-block')).toHaveCount(7)
 })

package/demos/pc/app/config-provider/tag.spec.ts

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('测试自定义标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('config-provider#tag')
-  await page.getByText('这是一个Tag被DOM包裹').click()
-  await page.locator('#tag span').nth(2).click()
+  const demo = await page.locator('#tag span')
+  await demo.nth(2).click()
   await page.waitForTimeout(300)
-  await page.locator('#tag span').nth(2).click()
+  await demo.nth(2).click()
   await page.waitForTimeout(300)
-  await expect(page.locator('.tiny-switch').nth(2)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  const elements = await page.locator('.tiny-config-provider')
+  await expect(elements.nth(1)).toHaveCSS('padding', '16px')
 })

package/demos/pc/app/date-picker/align.spec.ts

@@ -8,6 +8,7 @@ test('[DatePicker] 测试对齐方式', async ({ page }) => {
   const leftDateInputDom = page.getByRole('textbox').nth(1)
   const leftDatePanelDom = page.locator('.tiny-picker-panel').nth(2)
   const leftClosePanel = page.getByText('左对齐：')
+  await page.waitForTimeout(200)
 
   await leftDateInputDom.click()
   await page.waitForTimeout(200)

package/demos/pc/app/date-picker/clear.spec.ts

@@ -12,9 +12,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 默认显示清除按钮
   await datePickerDefaultClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute(
+  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
     'd',
-    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
   )
 
   // 隐藏清除按钮
@@ -24,9 +24,9 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 自定义清除图标
   await datePickerCustomClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute(
+  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
     'd',
-    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
   )
 
   // 测试清除功能

package/demos/pc/app/date-picker/custom-suffix-icon.spec.ts

@@ -6,6 +6,6 @@ test('[DatePicker] 测试自定义后置图标', async ({ page }) => {
   const svgPathDom = page.locator('i path')
   await expect(svgPathDom).toHaveAttribute(
     'd',
-    'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z'
+    'M12.99 7.5c.28 0 .5.22.5.5s-.22.5-.5.5H3.01c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h9.98z'
   )
 })

package/demos/pc/app/dialog-box/custom-dialog-content.spec.ts

@@ -7,7 +7,7 @@ test('dialogBox 自定义内容', async ({ page }) => {
   const dialogBox = page.locator('.tiny-dialog-box')
   await button.click()
   await expect(dialogBox).toBeVisible()
-  await page.locator('#custom-dialog-content path').nth(2).click()
+  await page.locator('.tiny-alert > .tiny-alert__close').click()
   await page.waitForTimeout(300)
   await page.getByRole('button', { name: /确 定/ }).click()
   await expect(dialogBox).toBeHidden()

package/demos/pc/app/fluent-editor/basic-usage-composition-api.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
+</script>

package/demos/pc/app/fluent-editor/basic-usage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { TinyFluentEditor } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

package/demos/pc/app/fluent-editor/data-switch-composition-api.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
+    内容：<br />
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+const value = ref('<p>Hello <strong>FluentEditor</strong>!</p>')
+</script>

package/demos/pc/app/fluent-editor/data-switch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
+    内容：<br />
+    {{ value }}
+  </div>
+</template>
+
+<script>
+import { TinyFluentEditor } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      value: '<p>Hello <strong>FluentEditor</strong>!</p>'
+    }
+  }
+}
+</script>

package/demos/pc/app/fluent-editor/disabled-composition-api.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
+</script>

package/demos/pc/app/fluent-editor/disabled.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
+  </div>
+</template>
+
+<script>
+import { TinyFluentEditor } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

package/demos/pc/app/fluent-editor/image-upload-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Modal } from '@opentiny/vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
+const imageUpload = {
+  url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
+  method: 'POST',
+  name: 'image',
+  withCredentials: true,
+  headers: {},
+  success: (serverResponse, next) => {
+    let file = {}
+
+    // eslint-disable-next-line no-unreachable-loop
+    for (const key in serverResponse) {
+      file = serverResponse[key]
+      break
+    }
+
+    next(file.downloadUrl)
+  },
+  fail: (serverError) => {
+    Modal.message({
+      message: `上传失败回调事件：${serverError}`,
+      status: 'info'
+    })
+  }
+}
+</script>