fix(vue-renderless): [user,user-account,user-contact,user-head,user-link,virtual-scroll-box,virtual-tree,watermark,wizard] fix site: Optimize site documentation typesetting

examples/sites/demos/pc/app/user-account/custom-service-composition-api.vue

@@ -40,7 +40,7 @@ function getLangData() {
 
 function getLogoutUrl() {
   return new Promise((resolve, reject) => {
-    /* 自定义注销逻辑，返回注销完成后的重定向url */
+    /* 自定义注销逻辑，返回注销完成后的重定向 url */
     setTimeout(() => {
       window.localStorage.setItem('isLogin', false)
       const url = '/pc/user-account/custom-service'
@@ -51,7 +51,7 @@ function getLogoutUrl() {
 }
 
 function isGuestUser() {
-  /* 此处为用户自定义获取当前登录状态，未登录为访客，返回true,已登录返回false */
+  /* 此处为用户自定义获取当前登录状态，未登录为访客，返回 true，已登录返回 false */
   isLogin.value = window.localStorage.getItem('isLogin') === 'true'
 
   return !isLogin.value

examples/sites/demos/pc/app/user-account/custom-service.vue

@@ -44,7 +44,7 @@ export default {
     },
     getLogoutUrl() {
       return new Promise((resolve, reject) => {
-        /* 自定义注销逻辑，返回注销完成后的重定向url */
+        /* 自定义注销逻辑，返回注销完成后的重定向 url */
         setTimeout(() => {
           window.localStorage.setItem('isLogin', false)
           const url = '/pc/user-account/custom-service'
@@ -54,7 +54,7 @@ export default {
       })
     },
     isGuestUser() {
-      /* 此处为用户自定义获取当前登录状态，未登录为访客，返回true,已登录返回false */
+      /* 此处为用户自定义获取当前登录状态，未登录为访客，返回 true，已登录返回 false */
       this.isLogin = window.localStorage.getItem('isLogin') === 'true'
 
       return !this.isLogin

examples/sites/demos/pc/app/user-contact/webdoc/user-contact.js

@@ -24,7 +24,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>:data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
+          '<p>通过 <code>:data</code> 设置数据源，<code>imgUrl</code> 表示的是图片路径，<code>userName</code> 表示的是姓名，<code>userDescription</code> 表示的是用户描述。</p>\n',
         'en-US':
           '<p>Set the data source through<code>: data</code>. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
       },
@@ -38,7 +38,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过设置<code>show-img</code> 是否显示头像，<code>show-name</code> 是否显示名字,<code>show-number</code> 是否显示用户账号,默认值为<code>true</code>。</p>',
+          '<p>通过设置<code>show-img</code> 是否显示头像，<code>show-name</code> 是否显示名字，<code>show-number</code> 是否显示用户账号，默认值为<code>true</code>。</p>',
         'en-US':
           '<p>By setting<code>show img</code>to display avatars,<code>show name</code>to display names, and<code>show number</code>to display user accounts, the default value is<code>true</code>.</p> '
       },
@@ -59,7 +59,7 @@ export default {
     {
       demoId: 'contact-espace',
       name: {
-        'zh-CN': '连接eSpace',
+        'zh-CN': '连接 eSpace',
         'en-US': 'Connecting to the eSpace'
       },
       desc: {

examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue

@@ -28,63 +28,63 @@ import { TinyGrid, TinyGridColumn, TinyUserHead } from '@opentiny/vue'
 const mockData = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     employees: 800,
     createdDate: '2014-04-30 00:56:00',
     boole: false
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     employees: 300,
     createdDate: '2016-07-08 12:36:22',
     boole: true
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     employees: 1300,
     createdDate: '2014-02-14 14:14:14',
     boole: false
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     employees: 360,
     createdDate: '2013-01-13 13:13:13',
     boole: true
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     employees: 810,
     createdDate: '2012-12-12 12:12:12',
     boole: true
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     employees: 800,
     createdDate: '2011-11-11 11:11:11',
     boole: true
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     employees: 400,
     createdDate: '2016-04-30 23:56:00',
     boole: false
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     boole: true,
     city: '厦门',
     createdDate: '2016-06-03 13:53:25',

examples/sites/demos/pc/app/user-head/render-user-head-in-grid.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('Grid 单元格展示头像', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('user-head#render-user-head-in-grid')
-  const iconBox = page.getByRole('cell', { name: '800 GFD科技YX公司' }).locator('svg')
+  const iconBox = page.getByRole('cell', { name: '800 GFD 科技 YX 公司' }).locator('svg')
   await expect(iconBox).toBeVisible()
-  const iconBox1 = page.getByRole('cell', { name: '300 WWW科技YX公司' }).locator('svg')
+  const iconBox1 = page.getByRole('cell', { name: '300 WWW 科技 YX 公司' }).locator('svg')
   await expect(iconBox1).toBeVisible()
 })

examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue

@@ -33,63 +33,63 @@ export default {
     const mockData = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         employees: 800,
         createdDate: '2014-04-30 00:56:00',
         boole: false
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         employees: 300,
         createdDate: '2016-07-08 12:36:22',
         boole: true
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         employees: 1300,
         createdDate: '2014-02-14 14:14:14',
         boole: false
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         employees: 360,
         createdDate: '2013-01-13 13:13:13',
         boole: true
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         employees: 810,
         createdDate: '2012-12-12 12:12:12',
         boole: true
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         employees: 800,
         createdDate: '2011-11-11 11:11:11',
         boole: true
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         employees: 400,
         createdDate: '2016-04-30 23:56:00',
         boole: false
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         boole: true,
         city: '厦门',
         createdDate: '2016-06-03 13:53:25',

examples/sites/demos/pc/app/user-head/webdoc/user-head.js

@@ -118,7 +118,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>color</code>属性设置自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
+          '<p>可通过<code>color</code>属性设置自定义颜色，图标或文字类型（type 属性值为 icon 或 label）的情况下，设置字体颜色和背景色。</p>\n',
         'en-US':
           '<p>You can use <code>color</code> to customize the color. If the icon or text type is set to icon or label, set the font color and background color. </p>\n'
       },
@@ -155,7 +155,7 @@ export default {
         'en-US': 'Avatar Displayed in Grid Cells'
       },
       desc: {
-        'zh-CN': '可通过Grid单元格<code>renderer</code>属性设置传入封装用户头像组件（HTML格式）。',
+        'zh-CN': '可通过 Grid 单元格<code>renderer</code>属性设置传入封装用户头像组件（HTML 格式）。',
         'en-US':
           'Pass in the encapsulated user avatar component (in HTML format) through the Grid cell attribute<code>renderer</code>.'
       },

examples/sites/demos/pc/app/user-link/custom-service-composition-api.vue

@@ -51,7 +51,7 @@ function fetchUser() {
   return new Promise((resolve, reject) => {
     const result = {
       sex: 'M',
-      l0_Name: 'SZ技术',
+      l0_Name: 'SZ 技术',
       effective_Start_Date: '2011/10/14 00:00:00',
       l3_Dept_Code: '038384',
       person_Notes_Cn: 'test1 12345678',
@@ -61,7 +61,7 @@ function fetchUser() {
       person_Mail: '',
       name: '公共技术测试数据部门',
       location_second_area: 'Shenzhen',
-      upper_Name: 'IT技术架构与测试数据部',
+      upper_Name: 'IT 技术架构与测试数据部',
       coa_Combination: '0021.000.0001.038759',
       l4_Name: '公共技术测试数据部门',
       english_Name: 'zhang san',

examples/sites/demos/pc/app/user-link/custom-service.vue

@@ -63,7 +63,7 @@ export default {
       return new Promise((resolve, reject) => {
         const result = {
           sex: 'M',
-          l0_Name: 'SZ技术',
+          l0_Name: 'SZ 技术',
           effective_Start_Date: '2011/10/14 00:00:00',
           l3_Dept_Code: '038384',
           person_Notes_Cn: 'test1 12345678',
@@ -73,7 +73,7 @@ export default {
           person_Mail: '',
           name: '公共技术测试数据部门',
           location_second_area: 'Shenzhen',
-          upper_Name: 'IT技术架构与测试数据部',
+          upper_Name: 'IT 技术架构与测试数据部',
           coa_Combination: '0021.000.0001.038759',
           l4_Name: '公共技术测试数据部门',
           english_Name: 'zhang san',

examples/sites/demos/pc/app/user-link/webdoc/user-link.js

@@ -23,7 +23,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 text-field 设置显示字段信息,默认是 userCN\n注意 UserLink 组件请求的是 mock 数据，其他用户查询不了，开发时请用真实服务。</p>\n',
+          '<p>通过 text-field 设置显示字段信息，默认是 userCN\n注意 UserLink 组件请求的是 mock 数据，其他用户查询不了，开发时请用真实服务。</p>\n',
         'en-US':
           '<p>Use text-field to set the displayed field information. The default value is userCN.\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use the real service during development. </p>\n'
       },
@@ -37,7 +37,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "<p>通过 text-split 自定义文本分隔符,默认是 ','\n注意 UserLink 组件请求的是 mock 数据，其他用户查询不了，开发时请用真实服务。</p>\n",
+          "<p>通过 text-split 自定义文本分隔符，默认是 ','\n注意 UserLink 组件请求的是 mock 数据，其他用户查询不了，开发时请用真实服务。</p>\n",
         'en-US':
           "<p>Use text-split to customize the text separator. The default value is ','\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use the real service during development. </p>\n"
       },

examples/sites/demos/pc/app/user/custom-service-composition-api.vue

@@ -116,8 +116,8 @@ function getSuggestUser(userCN) {
 }
 
 function fetchW3Accounts(userId) {
-  /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-  TinyModal.message(`v-model默认值为：${userId}`)
+  /* 此为初始化时，v-model 值不为空时，根据默认值查询用户数据，数据返回格式如下 */
+  TinyModal.message(`v-model 默认值为：${userId}`)
 
   return new Promise((resolve) => {
     const result = [

examples/sites/demos/pc/app/user/custom-service.vue

@@ -122,8 +122,8 @@ export default {
       })
     },
     fetchW3Accounts(userId) {
-      /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-      TinyModal.message(`v-model默认值为：${userId}`)
+      /* 此为初始化时，v-model 值不为空时，根据默认值查询用户数据，数据返回格式如下 */
+      TinyModal.message(`v-model 默认值为：${userId}`)
 
       return new Promise((resolve) => {
         const result = [

examples/sites/demos/pc/app/user/custom-sort.vue

@@ -124,8 +124,8 @@ export default {
       })
     },
     fetchW3Accounts(userId) {
-      /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-      TinyModal.message(`v-model默认值为：${userId}`)
+      /* 此为初始化时，v-model 值不为空时，根据默认值查询用户数据，数据返回格式如下 */
+      TinyModal.message(`v-model 默认值为：${userId}`)
 
       return new Promise((resolve) => {
         const result = [

examples/sites/demos/pc/app/user/webdoc/user.js

@@ -57,12 +57,12 @@ export default {
     {
       demoId: 'multiple-users-hover-expand',
       name: {
-        'zh-CN': '折叠 Tag， hover 展开',
+        'zh-CN': '折叠 Tag，hover 展开',
         'en-US': 'Collapse Tag'
       },
       desc: {
         'zh-CN':
-          '<p>多选时通过设置 <code>hover-expand</code> 为 true ，默认折叠 tag, hover 时展示所有 tag。tag 超出隐藏并展示 tooltip。</p>\n',
+          '<p>多选时通过设置 <code>hover-expand</code> 为 true，默认折叠 tag, hover 时展示所有 tag。tag 超出隐藏并展示 tooltip。</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['multiple-users-hover-expand.vue']
@@ -96,7 +96,7 @@ export default {
     {
       demoId: 'tag-copy-all',
       name: {
-        'zh-CN': 'user选择器选项可一键复制',
+        'zh-CN': 'user 选择器选项可一键复制',
         'en-US': 'User selector options can be copied'
       },
       desc: {
@@ -182,7 +182,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>cache</code> 属性指定用户数据是否缓存，默认为缓存。\n\n<code>cache-key</code> 属性可以自定义缓存的 key 值，默认为 tiny-user 。\n\n<code>cache-fields</code> 属性用于指定缓存哪些用户数据。</p>\n',
+          '<p>通过 <code>cache</code> 属性指定用户数据是否缓存，默认为缓存。\n\n<code>cache-key</code> 属性可以自定义缓存的 key 值，默认为 tiny-user。\n\n<code>cache-fields</code> 属性用于指定缓存哪些用户数据。</p>\n',
         'en-US':
           '<p>The <code>cache</code> attribute specifies whether user data is cached. The default value is cached. The \n\n<code>cache-key</code> attribute can be used to customize the cache key value. The default value is tiny-user. The \n\n<code>cache-fields</code> property is used to specify which user data is cached. </p>\n'
       },
@@ -269,7 +269,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>service</code> 属性可自定义用户服务,当用户在文本框中输入准确的账号时,会在下拉菜单中出现此用户。\n通过 <code>sort-by-fetch-data</code> 联想时下拉框的数据顺序和接口返回的数据顺序一致</p>\n',
+          '<p>通过 <code>service</code> 属性可自定义用户服务，当用户在文本框中输入准确的账号时，会在下拉菜单中出现此用户。\n通过 <code>sort-by-fetch-data</code> 联想时下拉框的数据顺序和接口返回的数据顺序一致</p>\n',
         'en-US':
           '<p>You can customize the user service through the <code>service</code> attribute. When a user enters an accurate account in the text box, the user is displayed in the drop-down menu. \nThe data sequence in the drop-down list box during <code>sort-by-fetch-data</code> association is the same as that returned by the interface.</p>\n'
       },
@@ -308,7 +308,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>设置 <code>show-tips</code> 属性可展示用户信息，默认展示。</p>\n<p>设置 <code>max-width</code> 属性可设置 tips 展示信息最大宽度，默认`200`。</p>\n',
+          '<p>设置 <code>show-tips</code> 属性可展示用户信息，默认展示。</p>\n<p>设置 <code>max-width</code> 属性可设置 tips 展示信息最大宽度，默认 `200`。</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['hidden-tips-disable.vue']

examples/sites/demos/pc/app/virtual-scroll-box/tree-composition-api.vue

@@ -33,7 +33,7 @@ const config = reactive({
   spanConfig: [[]] // 没有合并
 })
 const treeData = ref([])
-const treeExpandeds = ref([1, 21]) // 树默认展开项的id
+const treeExpandeds = ref([1, 21]) // 树默认展开项的 id
 const rowOffset = ref('')
 const nodeKey = 'id'
 const rowHeight = 36
@@ -112,7 +112,7 @@ const flattenTreeData = () => {
   config.rowSizes = chart.map(() => rowHeight) // 树的每一项高度
 
   // 这两项没有实际作用，只是为了保证组件正常工作
-  config.columns = ['c-1'] // 只有1列
+  config.columns = ['c-1'] // 只有 1 列
   config.columnSizes = [config.width - 17] // 这个列的宽度为 `虚滚区域宽度` 减去 `垂直滚动条宽度`
 }