@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="icon-demo">
+    <tiny-form label-width="100px" style="padding-bottom: 80px">
+      <tiny-form-item label="搜索图标">
+        <tiny-input class="search-input" v-model="searchName" clearable autofocus size="small"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="图标形状">
+        <tiny-radio-group v-model="shape">
+          <tiny-radio label="line">线性图标</tiny-radio>
+          <tiny-radio label="filled">面性图标</tiny-radio>
+        </tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="主色">
+        <input type="color" v-model="firstColor" />
+      </tiny-form-item>
+      <tiny-form-item label="副色">
+        <input type="color" v-model="secondColor" />
+      </tiny-form-item>
+      <tiny-form-item label="是否托底">
+        <tiny-switch v-model="isUnderlay"></tiny-switch>
+      </tiny-form-item>
+      <tiny-form-item label="托底设置" v-if="isUnderlay">
+        <span>托底颜色：</span>
+        <input type="color" v-model="underlay.background" /> &nbsp;&nbsp;
+        <span>托底圆角：</span>
+        <tiny-input v-model="underlay.borderRadius" clearable autofocus size="small" style="width: 120px"></tiny-input
+        >&nbsp;&nbsp;
+        <span>中心缩放：</span>
+        <tiny-input v-model="underlay.scale" clearable autofocus size="small" style="width: 120px"></tiny-input>
+      </tiny-form-item>
+    </tiny-form>
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in advanceIcons"
+        :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>
+    <hr />
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in batch3Icons"
+        :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 lang="jsx">
+import Svgs from '@opentiny/vue-icon'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyModal,
+  TinyInput,
+  TinyRadioGroup,
+  TinyRadio,
+  TinyColorPicker,
+  TinySwitch
+} from '@opentiny/vue'
+import { advanceIcons, batch3Icons } from './advance-icons.js'
+
+export default {
+  components: {
+    TinyInput,
+    TinyForm,
+    TinyFormItem,
+    TinyRadioGroup,
+    TinyRadio,
+    TinyColorPicker,
+    TinySwitch
+  },
+  data() {
+    return {
+      Svgs,
+      advanceIcons,
+      batch3Icons,
+      searchName: '',
+      shape: 'line',
+      firstColor: '#0067D1',
+      secondColor: '#36C18D',
+      isUnderlay: false,
+      underlay: {
+        background: '#eef3fe',
+        borderRadius: '4px',
+        scale: 0.8
+      }
+    }
+  },
+  watch: {
+    underlay: {
+      handler() {
+        this.$forceUpdate()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    click(name) {
+      window.navigator.clipboard.writeText(name)
+      TinyModal.message({
+        message: `成功复制图标名称 ${name} `,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svgs-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  width: 250px;
+}
+
+.group-name {
+  display: none;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  padding: 0 0 8px 20px;
+  margin-bottom: 20px;
+  border-bottom: solid 1px #ccc;
+}
+
+.svgs-icon {
+  cursor: pointer;
+  transition: all 0.4s;
+  font-size: 40px;
+  fill: var(--tv-color-icon-control);
+  color: var(--tv-color-icon-control);
+}
+
+.svgs-icon:hover {
+  transform: scale(1.5, 1.5);
+}
+
+.svgs-item {
+  display: none;
+  width: 20%;
+  text-align: center;
+  padding: 24px;
+}
+
+.svgs-item:hover {
+  background-color: var(--tv-color-bg-hover);
+}
+
+.svgs-text {
+  margin-top: 12px;
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.svgs-box:has(> .svg-visible) .group-name {
+  display: block;
+}
+
+.svgs-item.svg-visible {
+  display: inline-block;
+}
+</style>

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

@@ -50,6 +50,26 @@ export default {
       },
       codeFiles: ['show-title.vue']
     },
+    {
+      demoId: 'advance-icons',
+      name: {
+        'zh-CN': '标准图标合集',
+        'en-US': 'Icon Set'
+      },
+      desc: {
+        'zh-CN': `Saas业务梳理280多个标准图标，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>
+                  `,
+        'en-US': `More than 280 standard icons are sorted out for SaaS services. SaaS service applications must use standard icons. It adds three new functions: linear and facial icon switching, dual-color switching and bottom-supporting effects.
+                  The <code>shape</code> property is used to set the linear or facial icon of the icon. It supports <code>'line' |'filled'</code>. The default value is linear. \n<br>
+                  Set the primary color and secondary color of the icon through the <code>firstColor, secondColor</code> attribute. \n<br>
+                  Set the bottoming effect of the icon through the <code>underlay</code> attribute. Default style: {background: '#dbdbdb', borderRadius: '4px', scale:0.6} <br>`
+      },
+      codeFiles: ['advance-usage.vue'],
+      hidePc: true // PC的图标未整理，该demo仅服务于saas标准图标
+    },
     {
       demoId: 'list',
       name: {

package/demos/pc/app/modal/modal-header.vue

@@ -7,7 +7,15 @@
     <h2>标签式调用</h2>
     <div class="content">
       <tiny-button @click="openModal">自定义弹窗标题</tiny-button>
-      <tiny-modal v-model="show" title="自定义弹窗标题" message="窗口内容" show-header show-footer> </tiny-modal>
+      <tiny-modal
+        v-model="show"
+        title="自定义弹窗标题"
+        message="窗口内容"
+        show-header
+        show-footer
+        :header-dragable="false"
+      >
+      </tiny-modal>
     </div>
   </div>
 </template>
@@ -27,7 +35,13 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
+      Modal.alert({
+        message: '窗口内容',
+        title: '自定义弹窗标题',
+        showHeader: true,
+        showFooter: true,
+        headerDragable: false
+      })
     },
     openModal() {
       this.show = true

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

@@ -77,7 +77,8 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过 <code>show-header</code>属性，设置是否显示头部。默认值为：<code>true</code><br>
+          通过<code>show-header</code>属性，设置是否显示头部。默认值为：<code>true</code>。<br>
+          通过<code>header-dragable</code>属性，设置是否可以通过标题拖动弹窗。默认值为：<code>true</code>。<br>
           通过<code>title</code>属性，设置窗口的标题。<br>
         `,
         'en-US': `
@@ -95,17 +96,17 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>show-footer</code>属性设置是否显示底部。默认值为：<code>false</code> <br>
-          通过<code>confirm-content</code>属性，修改确认按钮文字；<code>cancel-content</code>属性，修改取消按钮文字。<br>
-          通过<code>confirm-btn-props</code>属性，修改确认按钮的属性；<code>cancel-btn-props</code>属性，修改取消按钮的属性。<br>
-          通过<code>footerDragable</code>属性，让底部也支持拖动（默认只有标题栏可拖动）。默认值为：<code>false</code><br>
+          通过<code>show-footer</code>属性，设置是否显示底部。默认值为：<code>false</code>。<br>
+          通过<code>footer-dragable</code>属性，让底部也支持拖动（默认只有标题栏可拖动）。默认值为：<code>false</code>。<br>
+          通过<code>confirm-content</code>属性，修改确认按钮文字；通过<code>cancel-content</code>属性，修改取消按钮文字。<br>
+          通过<code>confirm-btn-props</code>属性，修改确认按钮的属性；通过<code>cancel-btn-props</code>属性，修改取消按钮的属性。<br>
           通过<code>#footer</code>插槽，完全自定义底部内容。<br>
         `,
         'en-US': ` 
           Use the <code>show-footer</code> property to set whether the bottom is displayed. The default value is <code>false</code> <br>
           Modify the confirmation button text by using the <code>confirm-content</code> property; The <code> cancer-content </code> property modifies the cancel button text. <br>
           The <code>confirm-btn-props</code> property is used to modify the properties of the confirm button. <code> cancer-btn-props </code> property to modify the properties of the cancel button. <br>
-          Use the <code>footerDragable</code> property to make the bottom also dragable (by default, only the title bar can be dragged). The default value is <code>false</code><br>
+          Use the <code>footer-dragable</code> property to make the bottom also dragable (by default, only the title bar can be dragged). The default value is <code>false</code><br>
           Completely customize the bottom content via the <code>#footer</code> slot. <br>
         `
       },

package/demos/pc/app/query-builder/webdoc/query-builder.js

@@ -10,10 +10,8 @@ export default {
       },
       desc: {
         'zh-CN': `
-        <div class="tip custom-block"> 
-          <p class=\"custom-block-title\"> config 属性说明 </p>
-          <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parseNumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n       二、fields 数据配置  \n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
-        'en-US': ''
+        <code>config</code>属性说明，<code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parseNumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n fields 数据配置  \n      <pre> <code>fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
+        'en-US': `<code>config</code> Attribute Description,  <code>autoSelectField</code>: Whether the range field is automatically selected by default. If checked, the first option will be selected by default; otherwise, it defaults to -----  <code>autoSelectOperator</code>: Whether the operator is automatically selected by default. If checked, the first option will be selected by default; otherwise, it defaults to -----  <code>disabled</code>: Disable all rules  <code>parseNumbers</code>: Numbers will be converted to the Number type, not the String type  <code>showCloneButtons</code>: Display copy buttons, allowing the entire rule to be copied  <code>showCombinatorsBetweenRules</code>: Uniformly modify the combinator array, which no longer appears on the connection line but instead appears as a dropdown selection  <code>showLockButtons</code>: Display lock buttons, allowing the entire rule to be locked  <code>showNotToggle</code>: Display the not condition toggle box  <code>displayOnlyField</code>: Whether only the field selector is displayed. \n  fields data configuration \n<pre><code>Data in fields (only used to explain the meaning of each field, no business specificity) \n {\n name: 'isMusician',//name: values (formal parameters) in formatted data \n label: 'Is a musician',//label: the external display name of the range field in the rule generator \n valueEditorType: 'checkbox',//placeholder: the default value of the value field \n operators: [//operator customization, name is the value in formatted data, label is the external display name of the range field \n {\n name: '=', \n label: '=' \n} \n], \n BindProps: {//The bindProps parameter can be used to control the parameters of a certain type of component\n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator： The default selection for operators is validator: (r)=>!! r. Value//validator: validation rules (this feature is still under iterative development...) \n inputType: 'number',//numeric type of value range \n valueEditorType: 'radio'//type of value range editor \n defaultValue: false,//default value of value range \n values: [//optional range configuration of value range (drop-down))\n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ], \n values: [//Optional field configuration for value range (single choice)\n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //The range type can be selected as \n comparator:'groupNumber ',//comparator for grouping \n groupNumber:'group1',//grouping group \n}, \n//combination subarray configuration, label is the display character, name is the data value \n combiners: [\n {\n name: 'and', \n label: 'and' \n}, \n {\n name: 'or', \n label: 'or' \n} \n] \n</code></press><br>`
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -21,11 +19,12 @@ export default {
       demoId: 'display-only-field',
       name: {
         'zh-CN': '简易模式',
-        'en-US': 'Basic'
+        'en-US': 'Simple Mode'
       },
       desc: {
-        'zh-CN': 'config 配置添加 displayOnlyField 属性，开启简易模式仅展示字段选择器功能',
-        'en-US': ' '
+        'zh-CN': '<code>config</code>配置添加<code>displayOnlyField</code>属性，开启简易模式仅展示字段选择器功能',
+        'en-US':
+          '<code>config</code>Configure to add<code>showOnlyField</code>attribute, enable simple mode to only display field selector function'
       },
       codeFiles: ['display-only-field.vue']
     },
@@ -36,8 +35,10 @@ export default {
         'en-US': 'Basic'
       },
       desc: {
-        'zh-CN': 'fields 数组配置项中存在 children 子数据项，则开启树型字段选择器功能，配置示例如下',
-        'en-US': ' '
+        'zh-CN':
+          '<code>fields</code>数组配置项中存在<code>children</code>子数据项，则开启树型字段选择器功能，配置示例如下',
+        'en-US':
+          'If there is a <code>children</code> sub-item in the <code>fields</code> array configuration, the tree-type field selector function will be enabled. The configuration example is as follows'
       },
       codeFiles: ['tree-field.vue']
     },
@@ -49,8 +50,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '添加 max-height 属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值 + 单位，如 500、500px、50rem 等。',
-        'en-US': ' '
+          '添加<code>max-height</code>属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值 + 单位，如 500、500px、50rem 等。',
+        'en-US':
+          'Add <code>max-height</code> attribute to set the maximum height of the component. If the content exceeds the limit, a scroll bar will be displayed. The attribute value supports both numeric and numeric + unit, such as 500, 500px, 50rem, etc.'
       },
       codeFiles: ['max-height.vue']
     },
@@ -90,8 +92,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title">  bindProps 属性说明 </p>\nleftSelect：左侧 Select 参数，统一控制左侧所有 Select \nselect：右侧 Select 参数 \ninput：输入框参数，包括 textarea \nnumeric：计数器 \ndate：日期选择器 \ntime：时间选择器 \nradio：单选框 \ncheckbox：多选框 \n</div> \n',
-        'en-US': ' '
+          '<code>config</code> 配置添加<code>bindProps</code>属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title">  <code>bindProps</code> 属性说明 </p>\n <code>leftSelect</code>：左侧 <code>Select</code> 参数，统一控制左侧所有 <code>Select</code> , 右侧 <code>Select</code> 参数：<code>input</code>输入框，包括 <code>textarea</code> \n<numeric>：计数器 \n<date>：日期选择器 \n<time>：时间选择器 \n<radio>：单选框 \n<checkbox>：多选框 \n</div> \n',
+        'en-US':
+          '<code>config</code> Configure to add <code>bindProps</code> attribute to control the parameters of a certain type of component. The middle operator type component does not support parameter passing for the time being. See the following description for specific configuration: \n<div class="tip custom-block">\n<p class="custom-block-title">  <code>bindProps</code> Attribute Description </p>\n <code>leftSelect</code>: Left <code>Select</code> parameters, uniformly control all left <code>Select</code>, right <code>Select</code> parameters: <code>input</code> input box, including <code>textarea</code> \n<numeric>: counter \n<date>: date picker \n<time>: time picker \n<radio>: radio button \n<checkbox>: checkbox \n</div> \n'
       },
       codeFiles: ['sub-component-param.vue']
     },
@@ -103,7 +106,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '高级模式，用法详见示例:<br> \n 自定义组件必须实现:<strong> value</strong>属性和<strong>change</strong>事件，<br> \n <strong>自定义组件的其他额外属性：</strong><br> \n data-id: string，数据 ID <br> \n operator: string, 操作符<br> \n filed-name: string, 字段名 <br> \n path: Array<number> 字段在 queryBuilder 中的父子路径，<br> \n key: to| from',
+          '高级模式，用法详见示例:<br> \n 自定义组件必须实现:<code> value</code>属性和<code>change</code>事件，<br> \n <code>自定义组件的其他额外属性：</code><br> \n <code>data-id: string</code>，数据 ID <br> \n <code>operator: string</code>, 操作符<br> \n <code>filed-name: string</code>, 字段名 <br> \n <code>path: Array<number> </code>字段在 <code>queryBuilder</code> 中的父子路径，<br> \n<code> key: to| from</code>',
         'en-US': ' '
       },
       codeFiles: ['advanced-mode.vue']

package/demos/pc/app/scroll-text/scroll-direction.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('文字滚动方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-direction')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'scroll-left')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'scroll-right')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'scroll-up')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'scroll-down')
 })

package/demos/pc/app/select/allow-create.spec.ts

@@ -16,12 +16,12 @@ test('点击选中', async ({ page }) => {
   await input.dispatchEvent('keyup', { KeyboardEvent })
 
   await expect(input).toHaveValue('测试 allow-create')
-  await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' }).click()
   await expect(input).toHaveValue('测试 allow-create')
 
   await input.click()
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
 })
 
 test('enter 选中', async ({ page }) => {
@@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
   await input.click()
 
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
 })

package/demos/pc/app/select/automatic-dropdown.spec.ts

@@ -23,9 +23,9 @@ test('可搜索时，获取焦点自动下拉', async ({ page }) => {
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '上海' })).toHaveClass(/selected/)
 })

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

@@ -6,14 +6,14 @@ test('基础用法标签式', async ({ page }) => {
   const wrap = page.locator('#basic-usage')
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
-  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const dropdown = page.locator('body > .tiny-select-dropdown').nth(0)
   const option = dropdown.locator('.tiny-option')
 
   await input.click()
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
@@ -36,7 +36,7 @@ test('基础用法配置式', async ({ page }) => {
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()

package/demos/pc/app/select/binding-obj.spec.ts

@@ -10,12 +10,12 @@ test('binding-obj', async ({ page }) => {
   const valueLocator = wrap.locator('.value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '重庆' }).click()
   await expect(input).toHaveValue('重庆')
   await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
 })

package/demos/pc/app/select/cache-usage.spec.ts

@@ -10,10 +10,10 @@ test('cache-op', async ({ page }) => {
   const cacheValue = wrap.locator('.cache-value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '北京' }).click()
   await expect(cacheValue).toContainText(['选项 1'])
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(cacheValue).toContainText(['选项 2'])
 })

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

@@ -16,6 +16,6 @@ test('clearable', async ({ page }) => {
   await expect(input).toHaveValue('')
   // 验证选中
   await icon.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
 })

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

@@ -28,14 +28,14 @@ export default {
         'zh-CN': `
             通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。<br>
             通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
-            通过 <code>show-limit-text</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
+            设置 <code>show-limit-text</code> 可展示选中条数和限制总条数的占比，默认为 false 不展示，非saas属性。<br>
             多选时，通过给 option 标签配置 <code>required</code> 或者在 options 配置项中添加 <code>required</code> 属性，来设置必选选项。<br>
             通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式。<br>
         `,
         'en-US': `
             Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag (Tag component).<br>
-            The <code>multiple-limit</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0.
-            The <code>show-limit-text</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.<br>
+            The <code>multiple-limit</code> attribute is used to limit the maximum number of options available. The default value is 0.
+            Set <code>show-limit-text</code> to display the proportion of the number of selected items and the maximum number of options available. The default value is false.
             When multiple options are selected, you can set <code>required</code> for the option tag or add the <code>required</code> attribute to the options configuration item to set mandatory options.<br>
             You can use the <code>dropdown-icon</code> attribute to customize the drop-down icon, and the <code>drop-style</code> attribute to customize the style of the drop-down options.<br>
         `
@@ -50,7 +50,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签，<code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code>，非saas属性 。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签，<code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
         'en-US':
           '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. Set <code>show-proportion</code> to display the current number of selected items and the proportion of total items, with a default value of <code>false</code> . By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
       },
@@ -86,7 +86,8 @@ export default {
         'en-US':
           '<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
       },
-      codeFiles: ['tag-type.vue']
+      codeFiles: ['tag-type.vue'],
+      hideSaas: true
     },
     {
       demoId: 'size',
@@ -178,7 +179,8 @@ export default {
         'en-US':
           '<p>The search box is displayed through the <code>searchable</code> attribute setting drop-down panel, which is not displayed by default. </p>\n'
       },
-      codeFiles: ['searchable.vue']
+      codeFiles: ['searchable.vue'],
+      hideSaas: true
     },
     {
       demoId: 'allow-create',
@@ -232,7 +234,8 @@ export default {
         'en-US':
           'The <p>Set the input box type through the <code>input-box-type</code> attribute. Optional values: input / underline. </p>\n'
       },
-      codeFiles: ['input-box-type.vue']
+      codeFiles: ['input-box-type.vue'],
+      hideSaas: true
     },
     {
       demoId: 'show-alloption',
@@ -259,7 +262,8 @@ export default {
         'en-US':
           '<p>By setting the value of the v-model through the <code>clear-no-match-value</code>attribute, if a matching value cannot be found in the options, it will be automatically cleared and will not be cleared by default.</p>\n'
       },
-      codeFiles: ['clear-no-match-value.vue']
+      codeFiles: ['clear-no-match-value.vue'],
+      hideSaas: true
     },
     {
       demoId: 'optimization',
@@ -351,7 +355,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>no-data-text</code> 属性设置选项为空时显示的文本，<code>show-empty-image</code> 属性设置是否显示空数据图片，默认不显示。</p>\n',
+          '<p>通过 <code>no-data-text</code> 属性设置选项为空时显示的文本，<code>show-empty-image</code> 属性设置是否显示空数据图片，默认不显示，非saas属性。</p>\n',
         'en-US':
           '<p>By setting the<code>no-data-text</code> attribute to display text when the option is empty, and by setting the <code>show-empty-image</code> attribute to display empty data images, it is not displayed by default.</p>\n'
       },
@@ -616,7 +620,8 @@ export default {
         'zh-CN': '<p>通过 <code>reference</code> 插槽自定义触发源的 HTML 模板。</p>\n',
         'en-US': '<p>Customize the HTML template of the trigger source through the <code>reference</code> slot.</p>'
       },
-      codeFiles: ['slot-reference.vue']
+      codeFiles: ['slot-reference.vue'],
+      hideSaas: true
     },
     {
       demoId: 'slot-label',
@@ -647,7 +652,8 @@ export default {
           If <code>show-all-text-tag</code> is set to <code>true</code> and all is selected, only the tag specified by <code>all-text</code> is displayed in the text box. The default value is <code>false</code>.
         `
       },
-      codeFiles: ['all-text.vue']
+      codeFiles: ['all-text.vue'],
+      hideSaas: true
     },
     {
       demoId: 'events',