@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/app/grid/large-data/full-data-loading.spec.js

@@ -3,14 +3,21 @@ import { test, expect } from '@playwright/test'
 test('全量加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-large-data#large-data-full-data-loading')
-  await page.locator('.tiny-grid__body').hover()
+  await page.setViewportSize({
+    width: 1400,
+    height: 2500
+  })
+  await page.waitForTimeout(1000)
+  await page.locator('.tiny-grid__body-wrapper').hover()
+  await page.locator('.tiny-grid__body-wrapper').click()
   // 先滚动 1000px
   await page.mouse.wheel(0, 1000)
   await expect(page.getByRole('cell', { name: '28' })).toBeVisible()
   await page.waitForTimeout(500)
-  await page.locator('.tiny-grid__body').hover()
+  await page.locator('.tiny-grid__body-wrapper').hover()
+  await page.locator('.tiny-grid__body-wrapper').click()
   // 先滚动 4000px
   await page.mouse.wheel(0, 5000)
   await page.waitForTimeout(200)
-  await expect(page.getByRole('cell', { name: '153' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: '129' })).toBeVisible()
 })

package/demos/pc/app/grid/large-data/virtual-rolling.spec.js

@@ -3,12 +3,19 @@ import { test, expect } from '@playwright/test'
 test('虚拟滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-large-data#large-data-virtual-rolling')
-  await page.locator('.tiny-grid__body').hover()
+  await page.setViewportSize({
+    width: 1400,
+    height: 2500
+  })
+  await page.waitForTimeout(1000)
+  await page.locator('.tiny-grid__body-wrapper').hover()
+  await page.locator('.tiny-grid__body-wrapper').click()
   // 先滚动 1000px
   await page.mouse.wheel(0, 1000)
   await expect(page.getByRole('cell', { name: '24' })).toBeVisible()
   await page.waitForTimeout(500)
-  await page.locator('.tiny-grid__body').hover()
+  await page.locator('.tiny-grid__body-wrapper').hover()
+  await page.locator('.tiny-grid__body-wrapper').click()
   // 先滚动 4000px
   await page.mouse.wheel(0, 5000)
   await expect(page.getByRole('cell', { name: '124' })).toBeVisible()

package/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js

@@ -4,7 +4,10 @@ test('键盘导航测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   const demo = page.locator('#mouse-keyboard-keyboard-navigation')
   await page.goto('grid-mouse-keyboard#mouse-keyboard-keyboard-navigation')
-
+  await page.setViewportSize({
+    width: 1400,
+    height: 2500
+  })
   await page.getByText('GFD 科技 YX 公司').click()
   await page.waitForTimeout(300)
   await page.locator('body').press('ArrowDown')

package/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue

@@ -7,19 +7,19 @@
       field="date3"
       title="日期3"
       format-text="date"
-      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+      :format-config="{ dateFormat: 'dd/MM/yyyy' }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="date4"
       title="日期4"
       format-text="date"
-      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+      :format-config="{ dateFormat: 'dd/MM/yyyy' }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="date5"
       title="日期5"
       format-text="date"
-      :format-config="{ valueFormat: 'MM/dd/yyyy' }"
+      :format-config="{ dateFormat: 'MM/dd/yyyy' }"
     ></tiny-grid-column>
   </tiny-grid>
 </template>
@@ -27,6 +27,7 @@
 <script setup>
 import { ref } from 'vue'
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+
 const tableData = ref([
   {
     id: '1',

package/demos/pc/app/grid/renderer/inner-renderer-date.spec.js

@@ -4,6 +4,6 @@ test('日期渲染器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-renderer#renderer-inner-renderer-date')
   await expect(page.getByText('-07-02').first()).toBeVisible()
-  await expect(page.getByText('-02-15').first()).toBeVisible()
-  await expect(page.getByText('-02-15').nth(1)).toBeVisible()
+  await expect(page.getByText('02/07/2024').first()).toBeVisible()
+  await expect(page.getByText('02/15/2024').first()).toBeVisible()
 })

package/demos/pc/app/grid/renderer/inner-renderer-date.vue

@@ -7,19 +7,19 @@
       field="date3"
       title="日期3"
       format-text="date"
-      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+      :format-config="{ dateFormat: 'dd/MM/yyyy' }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="date4"
       title="日期4"
       format-text="date"
-      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+      :format-config="{ dateFormat: 'dd/MM/yyyy' }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="date5"
       title="日期5"
       format-text="date"
-      :format-config="{ valueFormat: 'MM/dd/yyyy' }"
+      :format-config="{ dateFormat: 'MM/dd/yyyy' }"
     ></tiny-grid-column>
   </tiny-grid>
 </template>

package/demos/pc/app/grid/renderer/inner-renderer.spec.js

@@ -3,6 +3,10 @@ import { test, expect } from '@playwright/test'
 test('内置渲染器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-renderer#renderer-inner-renderer')
+  await page.setViewportSize({
+    width: 1400,
+    height: 2500
+  })
   const cell = page.getByRole('cell', { name: '90.0%' }).locator('.tiny-grid__rate-chart')
   await expect(cell).toHaveCSS('background-color', 'rgb(92, 179, 0)')
 })

package/demos/pc/app/grid/size/max-min-grid-height.spec.js

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('设置 maxHeight 最大高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-size#size-max-min-grid-height')
-  await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '160px')
-  await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '260px')
+  await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '200px')
+  await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '300px')
 })

package/demos/pc/app/grid/slot/slot-conf-composition-api.vue

@@ -0,0 +1,141 @@
+<template>
+  <tiny-grid v-bind="op"></tiny-grid>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyGrid } from '@opentiny/vue'
+
+const tableData = [
+  {
+    id: '1',
+    name: 'GFD 科技 YX 公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00',
+    boole: false
+  },
+  {
+    id: '2',
+    name: 'WWW 科技 YX 公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22',
+    boole: true
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14',
+    boole: false
+  },
+  {
+    id: '4',
+    name: 'TGB 科技 YX 公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13',
+    boole: true
+  },
+  {
+    id: '5',
+    name: 'YHN 科技 YX 公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12',
+    boole: true
+  },
+  {
+    id: '6',
+    name: 'WSX 科技 YX 公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11',
+    boole: true
+  },
+  {
+    id: '7',
+    name: 'KBG 物业 YX 公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00',
+    boole: false
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术 YX 公司',
+    boole: true,
+    city: '厦门',
+    createdDate: '2016-06-03 13:53:25',
+    employees: 540
+  }
+]
+
+const op = ref({
+  editConfig: {
+    trigger: 'click',
+    mode: 'cell',
+    showStatus: true
+  },
+  columns: [
+    {
+      type: 'index',
+      width: 60
+    },
+    {
+      type: 'selection',
+      width: 60
+    },
+    {
+      field: 'employees',
+      title: '员工数'
+    },
+    {
+      field: 'createdDate',
+      title: '创建日期'
+    },
+    {
+      field: 'city',
+      title: '城市',
+      slots: {
+        default: ({ row }) => {
+          return (
+            <div class="city-slot" style={{ color: 'red' }}>
+              {row.city}
+            </div>
+          )
+        },
+        header: () => {
+          return (
+            <div class="city-header" style={{ color: 'blue' }}>
+              城市
+            </div>
+          )
+        }
+      }
+    },
+    {
+      field: 'boole',
+      title: '布尔值',
+      align: 'center',
+      formatText: 'boole',
+      editor: checkboxEdit
+    }
+  ],
+  data: tableData
+})
+
+function checkboxEdit(h, { row }) {
+  return (
+    <input
+      type="checkbox"
+      checked={row.boole}
+      onChange={(event) => {
+        row.boole = event.target.checked
+      }}
+    />
+  )
+}
+</script>

package/demos/pc/app/grid/slot/slot-conf.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('配置式表格插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-slot#slot-conf-slot')
+
+  const dom = page.locator('#slot-conf-slot')
+  const citySlot = dom.locator('.city-slot').first()
+  await expect(citySlot).toHaveCSS('color', 'rgb(255, 0, 0)')
+  const cityHeader = dom.locator('.city-header').first()
+  await expect(cityHeader).toHaveCSS('color', 'rgb(0, 0, 255)')
+})

package/demos/pc/app/grid/slot/slot-conf.vue

@@ -0,0 +1,151 @@
+<template>
+  <tiny-grid v-bind="op"></tiny-grid>
+</template>
+
+<script lang="jsx">
+import { TinyGrid } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid
+  },
+  data() {
+    const tableData = [
+      {
+        id: '1',
+        name: 'GFD 科技 YX 公司',
+        city: '福州',
+        employees: 800,
+        createdDate: '2014-04-30 00:56:00',
+        boole: false
+      },
+      {
+        id: '2',
+        name: 'WWW 科技 YX 公司',
+        city: '深圳',
+        employees: 300,
+        createdDate: '2016-07-08 12:36:22',
+        boole: true
+      },
+      {
+        id: '3',
+        name: 'RFV 有限责任公司',
+        city: '中山',
+        employees: 1300,
+        createdDate: '2014-02-14 14:14:14',
+        boole: false
+      },
+      {
+        id: '4',
+        name: 'TGB 科技 YX 公司',
+        city: '龙岩',
+        employees: 360,
+        createdDate: '2013-01-13 13:13:13',
+        boole: true
+      },
+      {
+        id: '5',
+        name: 'YHN 科技 YX 公司',
+        city: '韶关',
+        employees: 810,
+        createdDate: '2012-12-12 12:12:12',
+        boole: true
+      },
+      {
+        id: '6',
+        name: 'WSX 科技 YX 公司',
+        city: '黄冈',
+        employees: 800,
+        createdDate: '2011-11-11 11:11:11',
+        boole: true
+      },
+      {
+        id: '7',
+        name: 'KBG 物业 YX 公司',
+        city: '赤壁',
+        employees: 400,
+        createdDate: '2016-04-30 23:56:00',
+        boole: false
+      },
+      {
+        id: '8',
+        name: '深圳市福德宝网络技术 YX 公司',
+        boole: true,
+        city: '厦门',
+        createdDate: '2016-06-03 13:53:25',
+        employees: 540
+      }
+    ]
+
+    return {
+      op: {
+        editConfig: {
+          trigger: 'click',
+          mode: 'cell',
+          showStatus: true
+        },
+        columns: [
+          {
+            type: 'index',
+            width: 60
+          },
+          {
+            type: 'selection',
+            width: 60
+          },
+          {
+            field: 'employees',
+            title: '员工数'
+          },
+          {
+            field: 'createdDate',
+            title: '创建日期'
+          },
+          {
+            field: 'city',
+            title: '城市',
+            slots: {
+              default: ({ row }) => {
+                return (
+                  <div class="city-slot" style={{ color: 'red' }}>
+                    {row.city}
+                  </div>
+                )
+              },
+              header: () => {
+                return (
+                  <div class="city-header" style={{ color: 'blue' }}>
+                    城市
+                  </div>
+                )
+              }
+            }
+          },
+          {
+            field: 'boole',
+            title: '布尔值',
+            align: 'center',
+            formatText: 'boole',
+            editor: this.checkboxEdit
+          }
+        ],
+        data: tableData
+      },
+      tableData
+    }
+  },
+  methods: {
+    checkboxEdit(h, { row }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row.boole = event.target.checked
+          }}
+        />
+      )
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/sort/combinations-sort.spec.js

@@ -5,7 +5,7 @@ test('多字段组合排序', async ({ page }) => {
   await page.goto('grid-sort#sort-combinations-sort')
   await page.getByRole('cell', { name: '员工数（员工数和名称组合排序）' }).getByRole('img').click()
   // 员工数第一优先级排序
-  await expect(page.locator('.tiny-grid-body__row').first()).toContainText('1300')
+  await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300')
   // 公司名称第二优先级排序
-  await expect(page.locator('.tiny-grid-body__row').nth(1)).toContainText('YHN 科技 YX 公司')
+  await expect(page.locator('.tiny-grid-body__row').nth(6)).toContainText('YHN 科技 YX 公司')
 })

package/demos/pc/app/grid/webdoc/grid-edit.js

@@ -100,6 +100,18 @@ export default {
           '<p>Table attribute setting<code>edit-config</code>Enable the editing mode, and then set <code>trigger</code> in the attribute object to modify the triggering mode. The options are as follows: <code>click trigger (click), double-click trigger (dblclick), and manual trigger (manual)</code>. The default value is <code>click trigger</code>. </p>\n'
       },
       codeFiles: ['edit/trigger-mode-for-editing.vue']
+    },
+    {
+      demoId: 'scrollbar-not-blur',
+      name: { 'zh-CN': '行编辑滚动不失焦', 'en-US': 'Scroll not blur' },
+      desc: {
+        'zh-CN': `
+          <p>配置 <code>edit-config</code> 的<code>blurOutside</code>自定义编辑态的退出逻辑。</p>
+          `,
+        'en-US':
+          '<p>Configure <code>blurOutside</code> of <code>edit-config</code> to customize the exit logic of the editing state. </p>\n'
+      },
+      codeFiles: ['edit/scrollbar-not-blur.vue']
     }
   ],
   apis: [{ name: 'grid-edit', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid/webdoc/grid-empty.js

@@ -27,7 +27,7 @@ export default {
       name: { 'zh-CN': '固定居中', 'en-US': 'Fix Center' },
       desc: {
         'zh-CN':
-          '<p>配置 <code>is-center-empty</code> 为 <code>true</code> 时，拖动横向滚动条可以保持空数据提示使终相对表格宽度居中显示。</p>\n',
+          '<p>（从3.25.0版本开始默认固定居中）配置 <code>is-center-empty</code> 为 <code>true</code> 时，拖动横向滚动条可以保持空数据提示使终相对表格宽度居中显示。</p>\n',
         'en-US':
           '<p>When <code>is-center-empty</code> is set to <code>true</code>, drag the horizontal scroll bar to keep the empty data prompt so that the final data is displayed in the center of the table width</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-expand.js

@@ -15,6 +15,17 @@ export default {
       },
       codeFiles: ['expand/has-row-expand.vue']
     },
+    {
+      demoId: 'expand-trigger-slot',
+      name: { 'zh-CN': '展开行触发器插槽', 'en-US': 'Expand row trigger slot' },
+      desc: {
+        'zh-CN': `
+        <p>通过 <code>expand-trigger</code> 插槽可以自定义展开行图标。</p>
+        `,
+        'en-US': '<p>You can customize the expand row icon through the <code>expand-trigger</code> slot. </p>\n'
+      },
+      codeFiles: ['expand/expand-trigger-slot.vue']
+    },
     {
       demoId: 'expand-expand-config',
       name: { 'zh-CN': '展开行配置项', 'en-US': 'Basic Usage' },

package/demos/pc/app/grid/webdoc/grid-slot.js

@@ -11,6 +11,15 @@ export default {
       },
       codeFiles: ['slot/default-slot.vue']
     },
+    {
+      demoId: 'slot-conf-slot',
+      name: { 'zh-CN': '配置式表格插槽', 'en-US': 'Config slot' },
+      desc: {
+        'zh-CN': `<p>通过 <code>column.slots</code> 添加表格列的插槽。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
+      codeFiles: ['slot/slot-conf.vue']
+    },
     {
       demoId: 'slot-buttons-slot',
       name: { 'zh-CN': '工具栏插槽', 'en-US': 'Toolbar slot' },

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

@@ -71,7 +71,8 @@ export const iconGroups = {
     'IconUp',
     'IconUpdate',
     'IconUpO',
-    'IconUpWard'
+    'IconUpWard',
+    'IconTriangleUp'
   ],
   Downward: [
     'IconArrowBottom',
@@ -291,6 +292,7 @@ export const iconGroups = {
     'IconTabletView',
     'IconUnlock',
     'IconUser',
+    'IconDelegatedProcessing',
     'IconVersiontree',
     'IconWebPlus',
     'IconJs',
@@ -387,7 +389,11 @@ export const iconGroups = {
     'IconSmile',
     'IconStarActive',
     'IconStarDisable',
-    'IconStarO'
+    'IconStarO',
+    'IconBadgeHotCn',
+    'IconBadgeHotEn',
+    'IconBadgeNewCn',
+    'IconBadgeNewEn'
   ],
   Tool: [
     'IconConfig',

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

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('基本示例', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#basic-usage')
-  const input = page.locator('.demo-input > .tiny-input > .tiny-input-display-only > input')
+  const input = page.locator('#basic-usage .demo-input > .tiny-input > .tiny-input-display-only > input')
 
   await expect(input).toBeVisible()
   await expect(input).toHaveAttribute('placeholder', 'Please input')

package/demos/pc/app/loading/background.spec.ts

@@ -3,6 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义遮罩背景色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#background')
-  const loadingBg = page.locator('.tiny-loading__mask')
+
+  const demo = page.locator('#background')
+  const loadingBg = demo.locator('.tiny-loading__mask')
   await expect(loadingBg).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.2)')
 })

package/demos/pc/app/loading/custom-class.spec.ts

@@ -3,8 +3,10 @@ import { test, expect } from '@playwright/test'
 test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#custom-class')
-  const loadingBg = page.locator('.tiny-loading__mask')
-  const loadingText = page.locator('.new-loading')
+
+  const demo = page.locator('#custom-class')
+  const loadingBg = demo.locator('.tiny-loading__mask')
+  const loadingText = demo.locator('.new-loading')
   await expect(loadingBg).toHaveCSS('background-color', 'rgb(89, 89, 89)')
   await expect(loadingText).toBeVisible()
 })

package/demos/pc/app/loading/fullscreen.spec.ts

@@ -3,11 +3,13 @@ import { test, expect } from '@playwright/test'
 test('全局加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#fullscreen')
-  await page.getByRole('button', { name: '指令方式加载全屏 Loading' }).click()
-  const vLoading = page.locator('.circular')
+
+  const demo = page.locator('#fullscreen')
+  await demo.getByRole('button', { name: '指令方式加载全屏 Loading' }).click()
+  const vLoading = page.locator('.tiny-loading.tiny-loading__mask.is-fullscreen')
   await expect(vLoading).toBeVisible()
 
-  await page.getByRole('button', { name: '静态方法加载全屏 Loading' }).click()
-  const sLoading = page.getByText('正在提交...', { exact: true })
+  await demo.getByRole('button', { name: '静态方法加载全屏 Loading' }).click()
+  const sLoading = vLoading.getByText('正在提交...', { exact: true })
   await expect(sLoading).toBeVisible()
 })

package/demos/pc/app/loading/loading-tip-text.spec.ts

@@ -3,6 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义加载提示文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#loading-tip-text')
-  const loadingText = page.locator('.tiny-loading__text')
+
+  const demo = page.locator('#loading-tip-text')
+  const loadingText = demo.locator('.tiny-loading__text')
   await expect(loadingText).toContainText('加载中')
 })

package/demos/pc/app/loading/size.spec.ts

@@ -3,9 +3,11 @@ import { test, expect } from '@playwright/test'
 test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#size')
-  const smallLoading = page.locator('.tiny-loading__spinner-small')
-  const mediumLoading = page.locator('.tiny-loading__spinner-medium')
-  const largeLoading = page.locator('.tiny-loading__spinner-large')
+
+  const demo = page.locator('#size')
+  const smallLoading = demo.locator('.tiny-loading__spinner-small')
+  const mediumLoading = demo.locator('.tiny-loading__spinner-medium')
+  const largeLoading = demo.locator('.tiny-loading__spinner-large')
   await expect(smallLoading).toBeVisible()
   await expect(mediumLoading).toBeVisible()
   await expect(largeLoading).toBeVisible()

package/demos/pc/app/locales/custom-service-composition-api.vue

@@ -11,15 +11,15 @@ import { TinyLocales } from '@opentiny/vue'
 
 function getLocale() {
   // resolve 出来的必须是国际化的 key
-  return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
+  return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
 }
 
 function getCurrentLocale() {
-  return Promise.resolve(['zh_CN'])
+  return Promise.resolve(['zhCN'])
 }
 
 function getChangeLocaleUrl(targetLocale) {
-  if (targetLocale === 'en_US') {
+  if (targetLocale === 'enUS') {
     return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
   } else {
     return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)