@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/app/guide/show-close.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <tiny-button plain class="show-close-btn" @click="stepStart">新手引导显示关闭按钮</tiny-button>
+    <tiny-guide :show-step="showStep" :dom-data="domData" :show-close="true"></tiny-guide>
+
+    <tiny-button plain class="hide-close-btn" style="margin-top: 20px" @click="stepStartWithoutClose"
+      >新手引导隐藏关闭按钮</tiny-button
+    >
+    <tiny-guide :show-step="showStepWithoutClose" :dom-data="domDataWithoutClose" :show-close="false"></tiny-guide>
+  </div>
+</template>
+
+<script>
+import { TinyGuide, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGuide,
+    TinyButton
+  },
+  data() {
+    return {
+      showStep: false,
+      showStepWithoutClose: false,
+      domData: [
+        {
+          title: '新手引导标题 1',
+          text: '这里是可以关闭的新手引导，点击右上角的关闭按钮可直接退出引导',
+          domElement: '.show-close-btn',
+          button: [
+            {
+              text: '下一步',
+              action: 'next'
+            }
+          ]
+        },
+        {
+          title: '新手引导标题 2',
+          text: '这个引导步骤展示了关闭按钮功能',
+          domElement: '.show-close-btn',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ],
+      domDataWithoutClose: [
+        {
+          title: '新手引导标题 1',
+          text: '这里是不显示关闭按钮的新手引导，无法通过关闭按钮退出引导',
+          domElement: '.hide-close-btn',
+          button: [
+            {
+              text: '下一步',
+              action: 'next'
+            }
+          ]
+        },
+        {
+          title: '新手引导标题 2',
+          text: '这个引导没有关闭按钮，只能通过底部按钮操作',
+          domElement: '.hide-close-btn',
+          button: [
+            {
+              text: '完成',
+              action: 'complete'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    stepStart() {
+      this.showStep = !this.showStep
+    },
+    stepStartWithoutClose() {
+      this.showStepWithoutClose = !this.showStepWithoutClose
+    }
+  }
+}
+</script>

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

@@ -128,6 +128,18 @@ export default {
         'en-US': ''
       },
       codeFiles: ['callback.vue']
+    },
+    {
+      demoId: 'show-close',
+      name: {
+        'zh-CN': '关闭按钮',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>通过添加 <code>showClose</code> 来自定义是否显示关闭按钮。默认值为 <code>false</code> </p>',
+        'en-US': ''
+      },
+      codeFiles: ['show-close.vue']
     }
   ],
   features: [

package/demos/pc/app/icon/advance-icons.js

@@ -307,7 +307,7 @@ export const batch3Icons = [
   'IconEquipment',
   'IconExchangerate',
   'IconFastCode',
-  'IconGeneralAi',
+  'IconAIGeneral',
   'IconGeneralPageIndigo',
   'IconIndicatorArtifactConfiguration',
   'IconInspectionPlan',
@@ -402,7 +402,6 @@ export const batch3Icons = [
   'IconTermination',
   'IconTimezone',
   'IconTrain',
-  'IconTransfer',
   'IconTransferInventoryList',
   'IconTransferringInventoryListsAcrossOrganizations',
   'IconTransportation',
@@ -410,3 +409,110 @@ export const batch3Icons = [
   'IconWaybill',
   'IconWorkOvertime'
 ]
+
+export const batch4Icons = [
+  'IconAIAbout',
+  'IconAIApplication',
+  'IconAIBrowsingHistory',
+  'IconAICalendar',
+  'IconAIComputingPowerAIPolicy',
+  'IconAIConferenceManagement',
+  'IconAIDocument',
+  'IconAIDocumentQA',
+  'IconAIExternalKnowledgeAnswer',
+  'IconAIFindRecords',
+  'IconAIFollowUp',
+  'IconAIGCPainting',
+  'IconAIImageBasedTextRecognition',
+  'IconAIInformation',
+  'IconAIInternalKnowledgeAnswers',
+  'IconAIITServiceQA',
+  'IconAILabelExtraction',
+  'IconAIMemorySpace',
+  'IconAIOfficeDataSearch',
+  'IconAIOrganization',
+  'IconAIPosting',
+  'IconAIProcessQA',
+  'IconAIQuestion',
+  'IconAIReading',
+  'IconAISearch',
+  'IconAISearchPeople',
+  'IconAISearchQA',
+  'IconAISmartLookup',
+  'IconAISmartNotes',
+  'IconAISmartTranslation',
+  'IconAITakingPhotos',
+  'IconAITechnicalInsightsQA',
+  'IconAITerminologyQA',
+  'IconAITranslation',
+  'IconAIUCDSearch',
+  'IconAIWebQA',
+  'IconAIWrite',
+  'IconAIWriting',
+  'IconAnalysisTypeContainer',
+  'IconAnchor',
+  'IconApprovalFlow',
+  'IconAvatar',
+  'IconBadge',
+  'IconButton',
+  'IconButtonBar',
+  'IconCalendarView',
+  'IconCardGroup',
+  'IconCardTemplate',
+  'IconCarousel',
+  'IconCascader',
+  'IconChart',
+  'IconCheckbox',
+  'IconChooser',
+  'IconCreatePage',
+  'IconDetailsTemplatePage',
+  'IconDialogBox',
+  'IconDialogSelect',
+  'IconFavorites',
+  'IconFilterView',
+  'IconFloating',
+  'IconFlowchart',
+  'IconFoldingPanelContainers',
+  'IconForm',
+  'IconGeneralPage',
+  'IconGrid',
+  'IconImage',
+  'IconInput',
+  'IconListSheet',
+  'IconMetAlert',
+  'IconMultiColumnContainer',
+  'IconMultipleContainerGroups',
+  'IconNavigationContainer',
+  'IconNumber',
+  'IconNumeric',
+  'IconObjectInfo',
+  'IconPageLoader',
+  'IconPager',
+  'IconProcessOverview',
+  'IconProgress',
+  'IconPromptBox',
+  'IconRadio',
+  'IconRecord',
+  'IconRuleBuilder',
+  'IconSelection',
+  'IconSelectView',
+  'IconShortcut',
+  'IconSlider',
+  'IconSliderButton',
+  'IconSplitPanelContainer',
+  'IconSpreadGrid',
+  'IconStandardList',
+  'IconSteps',
+  'IconSwitch',
+  'IconSwitchCard',
+  'IconTabContainer',
+  'IconTabs',
+  'IconTag',
+  'IconTagGroup',
+  'IconTimeLine',
+  'IconTimePicker',
+  'IconTitleContainer',
+  'IconTransfer',
+  'IconTree',
+  'IconTreeMenuContainer'
+]

package/demos/pc/app/icon/advance-usage-composition-api.vue

@@ -29,6 +29,7 @@
         <tiny-input v-model="underlay.scale" clearable autofocus size="small" style="width: 120px"></tiny-input>
       </tiny-form-item>
     </tiny-form>
+    <h3>第一批次图标</h3>
     <div class="svgs-wrapper">
       <div
         v-for="name in advanceIcons"
@@ -51,6 +52,7 @@
       </div>
     </div>
     <hr />
+    <h3>第二批次图标</h3>
     <div class="svgs-wrapper">
       <div
         v-for="name in batch3Icons"
@@ -72,13 +74,36 @@
         <span class="svgs-text" :title="name">{{ name }}</span>
       </div>
     </div>
+    <hr />
+    <h3>第三批次图标</h3>
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in batch4Icons"
+        :key="name"
+        :class="{
+          'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
+          'svgs-item': true
+        }"
+        @click="click(name)"
+      >
+        <component
+          :is="Svgs[name] && Svgs[name]()"
+          class="svgs-icon"
+          :first-color="firstColor"
+          :second-color="secondColor"
+          :shape="shape"
+          :underlay="isUnderlay ? underlay : null"
+        ></component>
+        <span class="svgs-text" :title="name">{{ name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="js">
 import Svgs from '@opentiny/vue-icon'
 import { TinyForm, TinyFormItem, TinyModal, TinyInput, TinyRadioGroup, TinyRadio, TinySwitch } from '@opentiny/vue'
-import { advanceIcons, batch3Icons } from './advance-icons.js'
+import { advanceIcons, batch3Icons, batch4Icons } from './advance-icons.js'
 import { getCurrentInstance, ref, watch } from 'vue'
 
 const searchName = ref('')

package/demos/pc/app/icon/advance-usage.vue

@@ -29,6 +29,7 @@
         <tiny-input v-model="underlay.scale" clearable autofocus size="small" style="width: 120px"></tiny-input>
       </tiny-form-item>
     </tiny-form>
+    <h3>第一批次图标</h3>
     <div class="svgs-wrapper">
       <div
         v-for="name in advanceIcons"
@@ -51,6 +52,7 @@
       </div>
     </div>
     <hr />
+    <h3>第二批次图标</h3>
     <div class="svgs-wrapper">
       <div
         v-for="name in batch3Icons"
@@ -72,6 +74,29 @@
         <span class="svgs-text" :title="name">{{ name }}</span>
       </div>
     </div>
+    <hr />
+    <h3>第三批次图标</h3>
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in batch4Icons"
+        :key="name"
+        :class="{
+          'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
+          'svgs-item': true
+        }"
+        @click="click(name)"
+      >
+        <component
+          :is="Svgs[name] && Svgs[name]()"
+          class="svgs-icon"
+          :first-color="firstColor"
+          :second-color="secondColor"
+          :shape="shape"
+          :underlay="isUnderlay ? underlay : null"
+        ></component>
+        <span class="svgs-text" :title="name">{{ name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -87,7 +112,7 @@ import {
   TinyColorPicker,
   TinySwitch
 } from '@opentiny/vue'
-import { advanceIcons, batch3Icons } from './advance-icons.js'
+import { advanceIcons, batch3Icons, batch4Icons } from './advance-icons.js'
 
 export default {
   components: {
@@ -104,6 +129,7 @@ export default {
       Svgs,
       advanceIcons,
       batch3Icons,
+      batch4Icons,
       searchName: '',
       shape: 'line',
       firstColor: '#0067D1',

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

@@ -12,7 +12,7 @@ export default {
       },
       desc: {
         'zh-CN': `
-          从 <code>@opentiny/vue-icon</code> 图标库中引入图标函数。图标函数执行后生成一个有效的 <code> Vue </code> 图标组件，可以在模板中使用。<br>
+          从 <code>@opentiny/vue-icon</code> 图标库中引入图标函数，图标函数执行后生成一个有效的 <code> Vue </code> 图标组件，可以在模板中使用。在组件内应该保存图标组件的变量用于绑定，要避免在模板上直接绑定图标函数的执行。<br>
           通过修改图标的 <code>font-size</code> 的样式，指定图标的大小，通过修改<code>fill</code> 的样式指定图标的颜色。
           <div class="tip custom-block">
             <p class="custom block title"> 常见的图标使用方式 </p>
@@ -20,10 +20,11 @@ export default {
             1、在模板中通过标签式引入。比如 <code> &lt;tiny-shared /&gt; </code> <br>
             2、在模板中通过<code> &lt;component&gt; </code> 组件引入。比如 <code> &lt;component :is="tinyShared" /&gt; </code> <br>
             3、在组件属性中传入。比如 <code> &lt;tiny-button :icon="tinyShared" &gt; </code> <br>
+            4、避免模板绑定图标函数的执行。不建议 <code> &lt;component :is="IconShared()" /&gt; </code> 
           </div>
         `,
         'en-US': `
-          Introduce icon functions from the <code>@opentiny/vue-icon</code> icon library. The execution of the icon function generates a valid <code> Vue </code> icon component that can be used in the template. <br>
+          Introduce icon functions from the <code>@opentiny/vue-icon</code> icon library. The execution of the icon function generates a valid <code> Vue </code> icon component that can be used in the template.Save the icon component variables for binding within the component. Avoid directly binding the icon function execution on the template. <br>
           Specify the size of the icon by modifying the <code>font-size</code> style, and specify the color of the icon by modifying <code>fill</code>.
           <div class="tip custom-block">
             <p class="custom block title"> Common icon usage </p>
@@ -31,6 +32,7 @@ export default {
             1. Import labels in the template. For example, <code> &lt; tiny-shared /&gt;  </code> <br>
             2, in the template by <code> &lt; component&gt;  The </code> component is introduced. For example, <code> &lt; component :is="tinyShared" /&gt;  </code> <br>
             3. Pass in component properties. For example, <code> &lt; tiny-button :icon="tinyShared" &gt;  </code> <br>
+            4. Avoid executing template-bound icon functions.Not recommended <code> &lt;component :is="IconShared()" /&gt; </code> 
           </div>
           `
       },
@@ -57,7 +59,7 @@ export default {
         'en-US': 'Icon Set'
       },
       desc: {
-        'zh-CN': `Saas业务梳理280多个标准图标，Saas业务的应用必须使用标准图标。它新增了三大功能：支持线性、面性图标切换，支持双色切换和托底效果。<br>
+        'zh-CN': `Saas业务梳理 600 多个标准图标，Saas业务的应用必须使用标准图标。它新增了三大功能：支持线性、面性图标切换，支持双色切换和托底效果。<br>
                   通过<code>shape</code> 属性，设置图标的线性或面性图标，它支持<code>'line' | 'filled' </code>, 默认为线性图标 。\n<br>
                   通过<code>firstColor, secondColor</code>属性，设置图标的主色和副色。\n<br>
                   通过<code>underlay</code>属性，设置图标的托底效果。默认样式： { background:'#eef3fe', borderRadius:'4px',scale:0.8 } <br>

package/demos/pc/app/input/resize.spec.ts

@@ -38,7 +38,7 @@ test('可缩放文本域', async ({ page }) => {
   // autosize 检查高度
   await textarea2.nth(1).fill('')
   defaultHeight = await textarea2
-    .nth(0)
+    .nth(1)
     .boundingBox()
     .then((box) => box?.height)
   await textarea2.nth(1).fill(fillText + fillText)
@@ -47,5 +47,5 @@ test('可缩放文本域', async ({ page }) => {
     .boundingBox()
     .then((box) => box?.height)
   await expect(fill1Height).not.toBeNull()
-  await expect(defaultHeight).toBeGreaterThanOrEqual(fill1Height || 0)
+  await expect(fill1Height).toBeGreaterThanOrEqual(defaultHeight || 0)
 })

package/demos/pc/app/link/custom-icon-composition-api.vue

@@ -31,6 +31,6 @@ const TinyIconFilletExternalLink = iconFilletExternalLink()
 
 <style scoped>
 .tiny-link {
-  margin-right: 48px;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/link/custom-icon.vue

@@ -38,6 +38,6 @@ export default {
 
 <style scoped>
 .tiny-link {
-  margin-right: 48px;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/link/target-composition-api.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <p>Link 组件 target 属性示例</p>
+    <div class="demo-link-target">
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_blank">在新窗口打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_self">在当前窗口打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_parent">在父框架中打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_top">在整个窗口中打开</tiny-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinyLink } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.demo-link-target {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

package/demos/pc/app/link/target.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Link Target 功能', () => {
+  test('验证不同target值的链接行为', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('link#target')
+
+    // 使用正确的选择器 - 选择所有链接
+    const links = page.locator('.demo-link-target a')
+
+    // 验证链接数量
+    await expect(links).toHaveCount(4)
+
+    // 验证每个链接的target属性
+    const targets = ['_blank', '_self', '_parent', '_top']
+    for (let i = 0; i < targets.length; i++) {
+      const link = links.nth(i)
+      await expect(link).toHaveAttribute('target', targets[i])
+    }
+
+    // 验证链接文本
+    const expectedTexts = ['在新窗口打开', '在当前窗口打开', '在父框架中打开', '在整个窗口中打开']
+    for (let i = 0; i < expectedTexts.length; i++) {
+      const link = links.nth(i)
+      await expect(link).toContainText(expectedTexts[i])
+    }
+  })
+
+  test('验证链接的href属性', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('link#target')
+
+    const links = page.locator('.demo-link-target a')
+
+    // 验证所有链接都有相同的href
+    for (let i = 0; i < 4; i++) {
+      const link = links.nth(i)
+      await expect(link).toHaveAttribute('href', 'https://opentiny.design/tiny-vue')
+    }
+  })
+})

package/demos/pc/app/link/target.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <p>Link 组件 target 属性示例</p>
+    <div class="demo-link-target">
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_blank">在新窗口打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_self">在当前窗口打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_parent">在父框架中打开</tiny-link>
+      <tiny-link :underline="false" href="https://opentiny.design/tiny-vue" target="_top">在整个窗口中打开</tiny-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyLink } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyLink
+  }
+}
+</script>
+
+<style scoped>
+.demo-link-target {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

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

@@ -84,6 +84,20 @@ export default {
           '<p>Use the <code>href</code> attribute to specify the URL to be redirected to. This attribute can be used together with the native attribute <code>target</code>. </p>'
       },
       codeFiles: ['config-href.vue']
+    },
+    {
+      demoId: 'target',
+      name: {
+        'zh-CN': '打开方式',
+        'en-US': 'Open mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>target</code> 配置链接打开方式，可选值有 <code>_self</code>、<code>_blank</code>、<code>_parent</code>、<code>_top</code>。</p>',
+        'en-US':
+          '<p>Use the <code>target</code> attribute to configure the link opening mode. The optional values are <code>_self</code>, <code>_blank</code>, <code>_parent</code>, <code>_top</code>. </p>'
+      },
+      codeFiles: ['target.vue']
     }
   ],
   hiddenDemo: {

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

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h2>消息状态：</h2>
+    <div class="content">
+      <tiny-button @click="infoClick()">信息提示图标</tiny-button>
+      <tiny-button @click="successClick()">成功提示图标</tiny-button>
+      <tiny-button @click="warningClick()">警告提示图标</tiny-button>
+      <tiny-button @click="errorClick()">错误提示图标</tiny-button>
+      <tiny-button @click="loadingClick()">加载提示图标</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Message } from '@opentiny/vue'
+
+function infoClick() {
+  console.log(Message, 18)
+  Message.message({ message: '基本提示图标', status: 'info' })
+}
+
+function successClick() {
+  Message.message({ message: '成功提示图标', status: 'success' })
+}
+
+function warningClick() {
+  Message.message({ message: '警告提示图标', status: 'warning' })
+}
+
+function errorClick() {
+  Message.message({ message: '错误提示图标', status: 'error' })
+}
+
+function loadingClick() {
+  Message.message({ message: '加载提示图标', status: 'loading' })
+}
+</script>
+
+<style scoped>
+h2 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 20px 0 12px;
+}
+.content {
+  margin: 8px;
+}
+</style>

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

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('状态和图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('message#basic-usage')
+  const message = page.locator('.type__message.is__visible')
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '信息提示图标' }).click()
+  await expect(message).toHaveClass(/status__info/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '成功提示图标' }).click()
+  await expect(message.nth(1)).toHaveClass(/status__success/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '警告提示图标' }).click()
+  await expect(message.nth(2)).toHaveClass(/status__warning/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '错误提示图标' }).click()
+  await expect(message.nth(3)).toHaveClass(/status__error/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '加载提示图标' }).click()
+  await expect(message.nth(4)).toHaveClass(/status__loading/)
+})

package/demos/pc/app/message/basic-usage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h2>消息状态：</h2>
+    <div class="content">
+      <tiny-button @click="infoClick()">信息提示图标</tiny-button>
+      <tiny-button @click="successClick()">成功提示图标</tiny-button>
+      <tiny-button @click="warningClick()">警告提示图标</tiny-button>
+      <tiny-button @click="errorClick()">错误提示图标</tiny-button>
+      <tiny-button @click="loadingClick()">加载提示图标</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Message } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    infoClick() {
+      Message.message({ message: '基本提示图标', status: 'info' })
+    },
+    successClick() {
+      Message.message({ message: '成功提示图标', status: 'success' })
+    },
+    warningClick() {
+      Message.message({ message: '警告提示图标', status: 'warning' })
+    },
+    errorClick() {
+      Message.message({ message: '错误提示图标', status: 'error' })
+    },
+    loadingClick() {
+      Message.message({ message: '加载提示图标', status: 'loading' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+h2 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 20px 0 12px;
+}
+.content {
+  margin: 8px;
+}
+</style>