From 5579681342dc96718d49cf742067f9cb56665489 Mon Sep 17 00:00:00 2001
From: dufu1991 <24769077+dufu1991@users.noreply.github.com>
Date: Thu, 2 Jan 2025 18:03:14 +0800
Subject: [PATCH] fix(vue-renderless):
 [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder]
 fix site: Optimize site documentation typesetting (#2721)

* feat(site):Optimize the typography of CJK characters, mix Chinese and English punctuation, and avoid excessive use of spaces for all Chinese text and comments within the site.

* feat(site):Optimize the typography of CJK characters, mix Chinese and English punctuation, and avoid excessive use of spaces for all Chinese text and comments within the site.

* fix(vue-renderless): [amount, anchor, area, autocomplete] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [base-select] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [base-select] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [base-select] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [breadcrumb, bulletin-board, button, button-group] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [calendar, calendar-view, card, carousel, cascader, cascader-panel, chart] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [checkbox, collapse, color-picker, color-select-panel,company,config-provider,container,crop,currency] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [breadcrumb, bulletin-board, button, button-group] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [date-picker,dept,dialog-box,dialog-select,directives,divider,drawer,drop-roles,drop-times,dropdown] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [espace,fall-menu,file-upload,filter-panel,float-button,floatbar,flowchart,fluent-editor,form,fullscreen] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting

* fix(vue-renderless): [grid-select,guide,hrapprover,hrapprover,icon,icon-multicolor,image,infinite-scroll,input,ip-address,layout,link,link-menu,loading,locales,logon-user,logout,milestone,mind-map,modal,nav-menu,notify,numeric,pager,pop-upload,popconfirm,popeditor,popover,progress,qr-code,query-builder] fix site: Optimize site documentation typesetting
---
 .../grid-select/config-composition-api.vue    |  4 +-
 .../sites/demos/pc/app/grid-select/config.vue |  4 +-
 .../grid-select/remote-composition-api.vue    |  4 +-
 .../sites/demos/pc/app/grid-select/remote.vue |  4 +-
 .../pc/app/grid-select/webdoc/grid-select.js  |  2 +-
 .../guide/arrow-position-composition-api.vue  |  8 +-
 .../demos/pc/app/guide/arrow-position.vue     |  8 +-
 .../app/guide/basic-usage-composition-api.vue |  4 +-
 .../demos/pc/app/guide/basic-usage.spec.ts    |  6 +-
 .../sites/demos/pc/app/guide/basic-usage.vue  |  4 +-
 .../pc/app/guide/callback-composition-api.vue | 12 +--
 .../sites/demos/pc/app/guide/callback.spec.ts | 12 +--
 .../sites/demos/pc/app/guide/callback.vue     | 12 +--
 .../guide/highlight-box-composition-api.vue   |  6 +-
 .../demos/pc/app/guide/highlight-box.spec.ts  |  6 +-
 .../demos/pc/app/guide/highlight-box.vue      |  6 +-
 .../pc/app/guide/offset-composition-api.vue   |  8 +-
 .../sites/demos/pc/app/guide/offset.spec.ts   |  4 +-
 examples/sites/demos/pc/app/guide/offset.vue  |  8 +-
 .../guide/only-content-composition-api.vue    |  4 +-
 .../demos/pc/app/guide/only-content.spec.ts   |  8 +-
 .../sites/demos/pc/app/guide/only-content.vue |  4 +-
 .../pc/app/guide/size-composition-api.vue     |  2 +-
 examples/sites/demos/pc/app/guide/size.vue    |  2 +-
 .../pc/app/hrapprover/webdoc/hrapprover.js    |  4 +-
 .../icon-multicolor/list-composition-api.vue  |  2 +-
 .../demos/pc/app/icon-multicolor/list.vue     |  2 +-
 .../icon-multicolor/webdoc/icon-multicolor.js |  8 +-
 .../demos/pc/app/image/keep-style.spec.ts     |  2 +-
 .../sites/demos/pc/app/image/lazy.spec.ts     |  2 +-
 .../preview-in-dialog-composition-api.vue     |  2 +-
 .../pc/app/image/preview-in-dialog.spec.ts    |  2 +-
 .../demos/pc/app/image/preview-in-dialog.vue  |  2 +-
 .../sites/demos/pc/app/image/preview.spec.ts  |  2 +-
 .../sites/demos/pc/app/image/webdoc/image.js  |  8 +-
 .../input/display-only-composition-api.vue    |  4 +-
 ...isplay-only-popup-more-composition-api.vue |  2 +-
 .../pc/app/input/display-only-popup-more.vue  |  2 +-
 .../sites/demos/pc/app/input/display-only.vue |  4 +-
 .../pc/app/input/mask-composition-api.vue     |  2 +-
 examples/sites/demos/pc/app/input/mask.vue    |  2 +-
 .../sites/demos/pc/app/input/webdoc/input.js  |  2 +-
 .../demos/pc/app/ip-address/event.spec.ts     |  4 +-
 .../pc/app/ip-address/webdoc/ip-address.cn.md |  4 +-
 .../pc/app/ip-address/webdoc/ip-address.js    |  2 +-
 .../demos/pc/app/layout/alignment.spec.ts     |  2 +-
 .../sites/demos/pc/app/layout/gutter.spec.ts  |  2 +-
 .../pc/app/layout/tag-composition-api.vue     |  6 +-
 examples/sites/demos/pc/app/layout/tag.vue    |  6 +-
 .../demos/pc/app/layout/webdoc/layout.js      |  6 +-
 .../pc/app/link-menu/custom-foot.spec.ts      |  2 +-
 .../pc/app/link-menu/custom-icon.spec.ts      |  6 +-
 .../data-resource-composition-api.vue         |  2 +-
 .../pc/app/link-menu/data-resource.spec.ts    |  4 +-
 .../demos/pc/app/link-menu/data-resource.vue  |  2 +-
 .../app/link-menu/get-menu-data-sync.spec.ts  |  2 +-
 .../demos/pc/app/link-menu/menu-items.spec.ts |  2 +-
 .../sites/demos/pc/app/link/webdoc/link.js    |  2 +-
 .../demos/pc/app/loading/webdoc/loading.js    |  2 +-
 .../pc/app/logon-user/webdoc/logon-user.cn.md |  2 +-
 .../logout/basic-usage-composition-api.vue    |  4 +-
 .../sites/demos/pc/app/logout/basic-usage.vue |  4 +-
 .../milestone/basic-usage-composition-api.vue | 10 +--
 .../pc/app/milestone/basic-usage.spec.ts      |  2 +-
 .../demos/pc/app/milestone/basic-usage.vue    | 10 +--
 .../milestone/custom-flag-composition-api.vue |  2 +-
 .../pc/app/milestone/custom-flag.spec.ts      |  2 +-
 .../demos/pc/app/milestone/custom-flag.vue    |  2 +-
 .../custom-icon-slot-composition-api.vue      | 12 +--
 .../pc/app/milestone/custom-icon-slot.vue     | 12 +--
 .../data-field-mapping-composition-api.vue    | 18 ++---
 .../app/milestone/data-field-mapping.spec.ts  |  4 +-
 .../pc/app/milestone/data-field-mapping.vue   | 18 ++---
 .../milestone/flag-before-composition-api.vue |  4 +-
 .../pc/app/milestone/flag-before.spec.ts      |  6 +-
 .../demos/pc/app/milestone/flag-before.vue    |  4 +-
 .../milestone-events-composition-api.vue      |  2 +-
 .../pc/app/milestone/milestone-events.vue     |  2 +-
 .../pc/app/mind-map/event-composition-api.vue |  2 +-
 .../sites/demos/pc/app/mind-map/event.spec.ts | 22 ++---
 .../sites/demos/pc/app/mind-map/event.vue     |  2 +-
 .../mind-map/export-data-composition-api.vue  |  4 +-
 .../demos/pc/app/mind-map/export-data.vue     |  4 +-
 .../app/modal/basic-usage-composition-api.vue |  4 +-
 .../demos/pc/app/modal/basic-usage.spec.ts    |  8 +-
 .../sites/demos/pc/app/modal/basic-usage.vue  |  4 +-
 .../modal/message-close-composition-api.vue   |  2 +-
 .../demos/pc/app/modal/message-close.vue      |  2 +-
 .../app/modal/message-top-composition-api.vue |  4 +-
 .../demos/pc/app/modal/message-top.spec.ts    |  2 +-
 .../sites/demos/pc/app/modal/message-top.vue  |  4 +-
 .../app/modal/modal-lock-composition-api.vue  |  2 +-
 .../sites/demos/pc/app/modal/modal-lock.vue   |  2 +-
 .../app/modal/modal-other-composition-api.vue |  4 +-
 .../demos/pc/app/modal/modal-other.spec.ts    |  4 +-
 .../sites/demos/pc/app/modal/modal-other.vue  |  4 +-
 .../sites/demos/pc/app/modal/webdoc/modal.js  | 26 +++---
 .../pc/app/nav-menu/allow-full-url.spec.ts    |  2 +-
 .../before-skip-prevent-composition-api.vue   |  2 +-
 .../pc/app/nav-menu/before-skip-prevent.vue   |  2 +-
 .../demos/pc/app/nav-menu/parent-key.spec.ts  |  2 +-
 .../demos/pc/app/nav-menu/webdoc/nav-menu.js  |  8 +-
 .../app/notify/duration-composition-api.vue   |  4 +-
 .../demos/pc/app/notify/duration.spec.ts      |  4 +-
 .../sites/demos/pc/app/notify/duration.vue    |  4 +-
 .../notify/notify-events-composition-api.vue  |  2 +-
 .../demos/pc/app/notify/notify-events.spec.ts |  2 +-
 .../demos/pc/app/notify/notify-events.vue     |  2 +-
 .../demos/pc/app/notify/webdoc/notify.js      | 16 ++--
 .../demos/pc/app/numeric/blur-event.spec.ts   |  2 +-
 .../app/numeric/controls-composition-api.vue  |  4 +-
 .../sites/demos/pc/app/numeric/controls.vue   |  4 +-
 .../demos/pc/app/numeric/numeric-size.spec.ts |  6 +-
 .../app/numeric/precision-composition-api.vue |  8 +-
 .../sites/demos/pc/app/numeric/precision.vue  |  8 +-
 .../demos/pc/app/numeric/webdoc/numeric.js    |  4 +-
 .../app/pager/pager-event-composition-api.vue |  8 +-
 .../demos/pc/app/pager/pager-event.spec.ts    |  8 +-
 .../sites/demos/pc/app/pager/pager-event.vue  |  8 +-
 .../pager/pager-in-grid-composition-api.vue   | 80 +++++++++----------
 .../demos/pc/app/pager/pager-in-grid.spec.ts  |  4 +-
 .../demos/pc/app/pager/pager-in-grid.vue      | 80 +++++++++----------
 .../demos/pc/app/pager/pager-mode.spec.ts     |  2 +-
 .../sites/demos/pc/app/pager/webdoc/pager.js  |  4 +-
 .../pc/app/pop-upload/basic-usage.spec.ts     |  2 +-
 .../before-upload-composition-api.vue         |  2 +-
 .../demos/pc/app/pop-upload/before-upload.vue |  2 +-
 .../pc/app/pop-upload/file-limit.spec.ts      |  2 +-
 .../prevent-delete-file-composition-api.vue   |  2 +-
 .../pc/app/pop-upload/prevent-delete-file.vue |  2 +-
 .../pc/app/pop-upload/webdoc/pop-upload.js    |  4 +-
 .../app/popconfirm/event-composition-api.vue  |  6 +-
 .../demos/pc/app/popconfirm/event.spec.ts     | 10 +--
 .../sites/demos/pc/app/popconfirm/event.vue   |  6 +-
 .../popconfirm/trigger-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/popconfirm/trigger.vue |  2 +-
 .../app/popconfirm/type-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/popconfirm/type.vue    |  2 +-
 .../popeditor/auto-lookup-composition-api.vue |  2 +-
 .../demos/pc/app/popeditor/auto-lookup.vue    |  2 +-
 .../popeditor/auto-reset-composition-api.vue  | 20 ++---
 .../demos/pc/app/popeditor/auto-reset.vue     | 20 ++---
 .../popeditor/basic-usage-composition-api.vue | 20 ++---
 .../pc/app/popeditor/basic-usage.spec.ts      |  6 +-
 .../demos/pc/app/popeditor/basic-usage.vue    | 20 ++---
 .../before-close-composition-api.vue          | 16 ++--
 .../demos/pc/app/popeditor/before-close.vue   | 16 ++--
 .../before-reset-composition-api.vue          | 20 ++---
 .../pc/app/popeditor/before-reset.spec.ts     |  2 +-
 .../demos/pc/app/popeditor/before-reset.vue   | 20 ++---
 .../popeditor/clearable-composition-api.vue   | 20 ++---
 .../demos/pc/app/popeditor/clearable.vue      | 20 ++---
 .../condition-form-composition-api.vue        | 22 ++---
 .../pc/app/popeditor/condition-form.spec.ts   |  2 +-
 .../demos/pc/app/popeditor/condition-form.vue | 22 ++---
 .../condition-layout-composition-api.vue      |  2 +-
 .../pc/app/popeditor/condition-layout.vue     |  2 +-
 .../popeditor/conditions-composition-api.vue  | 20 ++---
 .../demos/pc/app/popeditor/conditions.spec.ts |  2 +-
 .../demos/pc/app/popeditor/conditions.vue     | 20 ++---
 .../popeditor/disabled-composition-api.vue    | 20 ++---
 .../sites/demos/pc/app/popeditor/disabled.vue | 20 ++---
 .../popeditor/draggable-composition-api.vue   | 20 ++---
 .../demos/pc/app/popeditor/draggable.vue      | 20 ++---
 .../app/popeditor/events-composition-api.vue  | 22 ++---
 .../demos/pc/app/popeditor/events.spec.ts     |  6 +-
 .../sites/demos/pc/app/popeditor/events.vue   | 22 ++---
 .../pc/app/popeditor/grid-composition-api.vue | 20 ++---
 .../sites/demos/pc/app/popeditor/grid.vue     | 20 ++---
 .../pc/app/popeditor/icon-composition-api.vue | 20 ++---
 .../sites/demos/pc/app/popeditor/icon.vue     | 20 ++---
 .../app/popeditor/multi-composition-api.vue   | 20 ++---
 .../multi-value-array-composition-api.vue     | 20 ++---
 .../pc/app/popeditor/multi-value-array.vue    | 20 ++---
 .../demos/pc/app/popeditor/multi.spec.ts      |  4 +-
 .../sites/demos/pc/app/popeditor/multi.vue    | 20 ++---
 .../app/popeditor/pager-composition-api.vue   | 20 ++---
 .../sites/demos/pc/app/popeditor/pager.vue    | 20 ++---
 .../radio-change-close-composition-api.vue    | 16 ++--
 .../pc/app/popeditor/radio-change-close.vue   | 16 ++--
 .../popeditor/readonly-composition-api.vue    | 20 ++---
 .../sites/demos/pc/app/popeditor/readonly.vue | 20 ++---
 .../remote-search-composition-api.vue         |  2 +-
 .../demos/pc/app/popeditor/remote-search.vue  |  2 +-
 .../popeditor/render-text-composition-api.vue |  6 +-
 .../demos/pc/app/popeditor/render-text.vue    |  6 +-
 .../app/popeditor/resize-composition-api.vue  | 20 ++---
 .../sites/demos/pc/app/popeditor/resize.vue   | 20 ++---
 .../selected-box-composition-api.vue          | 16 ++--
 .../demos/pc/app/popeditor/selected-box.vue   | 16 ++--
 .../show-clear-btn-composition-api.vue        | 20 ++---
 .../pc/app/popeditor/show-clear-btn.spec.ts   |  2 +-
 .../demos/pc/app/popeditor/show-clear-btn.vue | 20 ++---
 .../show-history-composition-api.vue          | 20 ++---
 .../demos/pc/app/popeditor/show-history.vue   | 20 ++---
 .../show-overflow-composition-api.vue         | 20 ++---
 .../pc/app/popeditor/show-overflow.spec.ts    |  6 +-
 .../demos/pc/app/popeditor/show-overflow.vue  | 20 ++---
 .../app/popeditor/single-select-radio.spec.ts |  2 +-
 .../pc/app/popeditor/size-composition-api.vue | 20 ++---
 .../sites/demos/pc/app/popeditor/size.vue     | 20 ++---
 .../pc/app/popeditor/slot-composition-api.vue | 20 ++---
 .../popeditor/slot-footer-composition-api.vue | 16 ++--
 .../demos/pc/app/popeditor/slot-footer.vue    | 16 ++--
 .../sites/demos/pc/app/popeditor/slot.vue     | 20 ++---
 .../app/popeditor/suggest-composition-api.vue | 22 ++---
 .../sites/demos/pc/app/popeditor/suggest.vue  | 22 ++---
 .../popeditor/tabindex-composition-api.vue    | 20 ++---
 .../sites/demos/pc/app/popeditor/tabindex.vue | 20 ++---
 .../popeditor/textField-composition-api.vue   | 20 ++---
 .../demos/pc/app/popeditor/textField.spec.ts  |  2 +-
 .../demos/pc/app/popeditor/textField.vue      | 20 ++---
 .../app/popeditor/title-composition-api.vue   | 20 ++---
 .../demos/pc/app/popeditor/title.spec.ts      |  4 +-
 .../sites/demos/pc/app/popeditor/title.vue    | 20 ++---
 .../sites/demos/pc/app/popeditor/tree.spec.ts |  2 +-
 .../app/popeditor/trigger-composition-api.vue | 20 ++---
 .../demos/pc/app/popeditor/trigger.spec.ts    |  2 +-
 .../sites/demos/pc/app/popeditor/trigger.vue  | 20 ++---
 .../pc/app/popeditor/webdoc/popeditor.js      |  2 +-
 .../app/popeditor/width-composition-api.vue   | 20 ++---
 .../sites/demos/pc/app/popeditor/width.vue    | 20 ++---
 .../popover/custom-popper-composition-api.vue |  2 +-
 .../demos/pc/app/popover/custom-popper.vue    |  2 +-
 .../ignore-boundaries-composition-api.vue     |  4 +-
 .../pc/app/popover/ignore-boundaries.vue      |  4 +-
 .../popover/transition-composition-api.vue    |  8 +-
 .../demos/pc/app/popover/transition.spec.js   |  2 +-
 .../sites/demos/pc/app/popover/transition.vue |  8 +-
 .../demos/pc/app/popover/webdoc/popover.cn.md |  2 +-
 .../demos/pc/app/popover/webdoc/popover.js    |  8 +-
 .../custom-status-composition-api.vue         |  8 +-
 .../demos/pc/app/progress/custom-status.vue   |  8 +-
 .../app/progress/progress-type-circle.spec.ts |  2 +-
 .../demos/pc/app/progress/webdoc/progress.js  |  2 +-
 .../sites/demos/pc/app/qr-code/icon.spec.ts   |  2 +-
 .../app/query-builder/sub-component-param.vue |  6 +-
 .../app/query-builder/webdoc/query-builder.js |  6 +-
 238 files changed, 1083 insertions(+), 1083 deletions(-)

diff --git a/examples/sites/demos/pc/app/grid-select/config-composition-api.vue b/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
index be5206e045..f0c8af88a1 100644
--- a/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid-select/config-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：单选</p>
+    <p>场景 1：单选</p>
     <br />
     <tiny-grid-select
       v-model="valueSingle"
@@ -10,7 +10,7 @@
       :radio-config="radioConfig"
     ></tiny-grid-select>
     <br /><br />
-    <p>场景2：多选</p>
+    <p>场景 2：多选</p>
     <br />
     <tiny-grid-select
       v-model="valueMultiple"
diff --git a/examples/sites/demos/pc/app/grid-select/config.vue b/examples/sites/demos/pc/app/grid-select/config.vue
index 75ffe4f92d..d38ff607e8 100644
--- a/examples/sites/demos/pc/app/grid-select/config.vue
+++ b/examples/sites/demos/pc/app/grid-select/config.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：单选</p>
+    <p>场景 1：单选</p>
     <br />
     <tiny-grid-select
       v-model="valueSingle"
@@ -10,7 +10,7 @@
       :radio-config="radioConfig"
     ></tiny-grid-select>
     <br /><br />
-    <p>场景2：多选</p>
+    <p>场景 2：多选</p>
     <br />
     <tiny-grid-select
       v-model="valueMulti"
diff --git a/examples/sites/demos/pc/app/grid-select/remote-composition-api.vue b/examples/sites/demos/pc/app/grid-select/remote-composition-api.vue
index 7f57fecb56..93c66dddde 100644
--- a/examples/sites/demos/pc/app/grid-select/remote-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid-select/remote-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：单选</p>
+    <p>场景 1：单选</p>
     <br />
     <tiny-grid-select
       v-model="valueSingle"
@@ -10,7 +10,7 @@
       :remote-method="remoteMethod"
     ></tiny-grid-select>
     <br /><br />
-    <p>场景2：多选</p>
+    <p>场景 2：多选</p>
     <br />
     <tiny-grid-select
       v-model="valueMultiple"
diff --git a/examples/sites/demos/pc/app/grid-select/remote.vue b/examples/sites/demos/pc/app/grid-select/remote.vue
index c596e0231b..17f9ff44ff 100644
--- a/examples/sites/demos/pc/app/grid-select/remote.vue
+++ b/examples/sites/demos/pc/app/grid-select/remote.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：单选</p>
+    <p>场景 1：单选</p>
     <br />
     <tiny-grid-select
       v-model="valueSingle"
@@ -10,7 +10,7 @@
       :remote-method="remoteMethod"
     ></tiny-grid-select>
     <br /><br />
-    <p>场景2：多选</p>
+    <p>场景 2：多选</p>
     <br />
     <tiny-grid-select
       v-model="valueMultiple"
diff --git a/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js b/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
index df125a46ee..16df03dfd7 100644
--- a/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
+++ b/examples/sites/demos/pc/app/grid-select/webdoc/grid-select.js
@@ -51,7 +51,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>同时使用 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 3个属性开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。<br>在多选模式下，可通过 <code>reserve-keyword</code> 设置选中一个选项后依然保留搜索关键字。</p>',
+          '<p>同时使用 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 3 个属性开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。<br>在多选模式下，可通过 <code>reserve-keyword</code> 设置选中一个选项后依然保留搜索关键字。</p>',
         'en-US': ''
       },
       codeFiles: ['remote.vue']
diff --git a/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
index a7e14502cb..462608703b 100644
--- a/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
@@ -31,7 +31,7 @@ const showStep3 = ref(false)
 const showStep4 = ref(false)
 const data1 = ref([
   {
-    title: '新手引导标题1',
+    title: '新手引导标题 1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-arrow-position',
     button: [
@@ -44,7 +44,7 @@ const data1 = ref([
 ])
 const data2 = ref([
   {
-    title: '新手引导标题2',
+    title: '新手引导标题 2',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-arrow-position',
     button: [
@@ -57,7 +57,7 @@ const data2 = ref([
 ])
 const data3 = ref([
   {
-    title: '新手引导标题3',
+    title: '新手引导标题 3',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-arrow-position',
     button: [
@@ -71,7 +71,7 @@ const data3 = ref([
 const data4 = ref([
   {
     popPosition: 'top',
-    title: '新手引导标题4',
+    title: '新手引导标题 4',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-arrow-position',
     button: [
diff --git a/examples/sites/demos/pc/app/guide/arrow-position.vue b/examples/sites/demos/pc/app/guide/arrow-position.vue
index a60265c67a..0b2e79ef8e 100644
--- a/examples/sites/demos/pc/app/guide/arrow-position.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position.vue
@@ -38,7 +38,7 @@ export default {
       showStep4: false,
       data1: [
         {
-          title: '新手引导标题1',
+          title: '新手引导标题 1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-arrow-position',
           button: [
@@ -51,7 +51,7 @@ export default {
       ],
       data2: [
         {
-          title: '新手引导标题2',
+          title: '新手引导标题 2',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-arrow-position',
           button: [
@@ -64,7 +64,7 @@ export default {
       ],
       data3: [
         {
-          title: '新手引导标题3',
+          title: '新手引导标题 3',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-arrow-position',
           button: [
@@ -78,7 +78,7 @@ export default {
       data4: [
         {
           popPosition: 'top',
-          title: '新手引导标题4',
+          title: '新手引导标题 4',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-arrow-position',
           button: [
diff --git a/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
index 37c09a9e38..e865b4984a 100644
--- a/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
@@ -17,7 +17,7 @@ import { TinyGuide, TinyButton, TinyDivider } from '@opentiny/vue'
 const showStep = ref(false)
 const domData = ref([
   {
-    title: '新手引导标题1',
+    title: '新手引导标题 1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案',
     domElement: '.guide-box1',
     button: [
@@ -28,7 +28,7 @@ const domData = ref([
     ]
   },
   {
-    title: '新手引导标题2',
+    title: '新手引导标题 2',
     text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
     domElement: '.guide-box2',
     button: [
diff --git a/examples/sites/demos/pc/app/guide/basic-usage.spec.ts b/examples/sites/demos/pc/app/guide/basic-usage.spec.ts
index dbfac08bcb..4f3aa0e2ef 100644
--- a/examples/sites/demos/pc/app/guide/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/guide/basic-usage.spec.ts
@@ -6,15 +6,15 @@ test('基础用法', async ({ page }) => {
 
   const activeDom = page.getByRole('button', { name: '基础新手引导' })
   const startGuide = page.getByRole('button', { name: '开始引导' })
-  const step1 = page.getByRole('heading', { name: '新手引导标题1' })
-  const step2 = page.getByRole('heading', { name: '新手引导标题2' })
+  const step1 = page.getByRole('heading', { name: '新手引导标题 1' })
+  const step2 = page.getByRole('heading', { name: '新手引导标题 2' })
   const step3 = page.getByRole('dialog').locator('div').nth(2)
   const next = page.getByRole('button', { name: '下一步' })
   const finished = page.getByRole('button', { name: '完成' })
   const showBtn = page.getByRole('button', { name: '带滚动条新手引导' })
   const closeBtn = page.getByRole('button', { name: 'Close Tour' })
 
-  // 打开页面即显示guide
+  // 打开页面即显示 guide
   await expect(activeDom).toBeVisible()
   await startGuide.click()
 
diff --git a/examples/sites/demos/pc/app/guide/basic-usage.vue b/examples/sites/demos/pc/app/guide/basic-usage.vue
index 322cd52b82..becda63df1 100644
--- a/examples/sites/demos/pc/app/guide/basic-usage.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage.vue
@@ -24,7 +24,7 @@ export default {
       showStep: false,
       domData: [
         {
-          title: '新手引导标题1',
+          title: '新手引导标题 1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案',
           domElement: '.guide-box1',
           button: [
@@ -35,7 +35,7 @@ export default {
           ]
         },
         {
-          title: '新手引导标题2',
+          title: '新手引导标题 2',
           text: '<div class="scrollBox" style="height:254px">这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案</div>',
           domElement: '.guide-box2',
           button: [
diff --git a/examples/sites/demos/pc/app/guide/callback-composition-api.vue b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
index aea809555a..a0e46d0420 100644
--- a/examples/sites/demos/pc/app/guide/callback-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
@@ -21,7 +21,7 @@ const showStep = ref(false)
 const label = ref('')
 const domData = ref([
   {
-    title: '新手引导标题1',
+    title: '新手引导标题 1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e1',
     button: [
@@ -35,7 +35,7 @@ const domData = ref([
     }
   },
   {
-    title: '新手引导标题2',
+    title: '新手引导标题 2',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e2',
     button: [
@@ -54,7 +54,7 @@ const domData = ref([
     }
   },
   {
-    title: '新手引导标题3',
+    title: '新手引导标题 3',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e3',
     button: [
@@ -73,7 +73,7 @@ const domData = ref([
     }
   },
   {
-    title: '新手引导标题4',
+    title: '新手引导标题 4',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e4',
     button: [
@@ -96,7 +96,7 @@ const domData = ref([
     }
   },
   {
-    title: '新手引导标题5',
+    title: '新手引导标题 5',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e5',
     button: [
@@ -115,7 +115,7 @@ const domData = ref([
     }
   },
   {
-    title: '新手引导标题6',
+    title: '新手引导标题 6',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.e6',
     button: [
diff --git a/examples/sites/demos/pc/app/guide/callback.spec.ts b/examples/sites/demos/pc/app/guide/callback.spec.ts
index 4a2c0c719c..0d019d33dc 100644
--- a/examples/sites/demos/pc/app/guide/callback.spec.ts
+++ b/examples/sites/demos/pc/app/guide/callback.spec.ts
@@ -14,27 +14,27 @@ test('窗口的事件回调', async ({ page }) => {
 
   await start.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题1/)
+  await expect(guide).toHaveText(/新手引导标题 1/)
   await expect(text).toHaveText(/展示之前/)
 
   await showBtn.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题2/)
+  await expect(guide).toHaveText(/新手引导标题 2/)
   await expect(text.nth(2)).toHaveText(/下一步/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题3/)
+  await expect(guide).toHaveText(/新手引导标题 3/)
   await expect(text.nth(4)).toHaveText(/下一步/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题4/)
+  await expect(guide).toHaveText(/新手引导标题 4/)
   await expect(text.nth(6)).toHaveText(/隐藏/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题5/)
+  await expect(guide).toHaveText(/新手引导标题 5/)
   await expect(text.nth(9)).toHaveText(/下一步/)
 
   await cancelBtn.click()
@@ -47,7 +47,7 @@ test('窗口的事件回调', async ({ page }) => {
   await nextBtn.click()
   await nextBtn.click()
   await expect(guide).toBeVisible()
-  await expect(guide).toHaveText(/新手引导标题6/)
+  await expect(guide).toHaveText(/新手引导标题 6/)
   await expect(text.nth(11)).toHaveText(/完成/)
   await completeBtn.click()
   await expect(guide).toBeHidden()
diff --git a/examples/sites/demos/pc/app/guide/callback.vue b/examples/sites/demos/pc/app/guide/callback.vue
index fc5872497e..7b02270dde 100644
--- a/examples/sites/demos/pc/app/guide/callback.vue
+++ b/examples/sites/demos/pc/app/guide/callback.vue
@@ -27,7 +27,7 @@ export default {
       label: '',
       domData: [
         {
-          title: '新手引导标题1',
+          title: '新手引导标题 1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e1',
           button: [
@@ -41,7 +41,7 @@ export default {
           }
         },
         {
-          title: '新手引导标题2',
+          title: '新手引导标题 2',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e2',
           button: [
@@ -60,7 +60,7 @@ export default {
           }
         },
         {
-          title: '新手引导标题3',
+          title: '新手引导标题 3',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e3',
           button: [
@@ -79,7 +79,7 @@ export default {
           }
         },
         {
-          title: '新手引导标题4',
+          title: '新手引导标题 4',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e4',
           button: [
@@ -102,7 +102,7 @@ export default {
           }
         },
         {
-          title: '新手引导标题5',
+          title: '新手引导标题 5',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e5',
           button: [
@@ -121,7 +121,7 @@ export default {
           }
         },
         {
-          title: '新手引导标题6',
+          title: '新手引导标题 6',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.e6',
           button: [
diff --git a/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
index 65bd9cd594..a920ea373b 100644
--- a/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
@@ -5,9 +5,9 @@
         <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
         <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
         <div>
-          <tiny-button plain class="hight1">新手引导1</tiny-button>
-          <tiny-button plain class="hight2">新手引导2</tiny-button>
-          <tiny-button plain class="hight3">新手引导3</tiny-button>
+          <tiny-button plain class="hight1">新手引导 1</tiny-button>
+          <tiny-button plain class="hight2">新手引导 2</tiny-button>
+          <tiny-button plain class="hight3">新手引导 3</tiny-button>
         </div>
         <div>
           <tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
diff --git a/examples/sites/demos/pc/app/guide/highlight-box.spec.ts b/examples/sites/demos/pc/app/guide/highlight-box.spec.ts
index cd52ae5eb8..b5b363d1cf 100644
--- a/examples/sites/demos/pc/app/guide/highlight-box.spec.ts
+++ b/examples/sites/demos/pc/app/guide/highlight-box.spec.ts
@@ -5,9 +5,9 @@ test('高亮多处', async ({ page }) => {
   await page.goto('guide#highlight-box')
 
   const showBtn = page.getByRole('button', { name: '开始引导', exact: true })
-  const step1 = page.getByRole('button', { name: '新手引导1' })
-  const step2 = page.getByRole('button', { name: '新手引导2' })
-  const step3 = page.getByRole('button', { name: '新手引导3' })
+  const step1 = page.getByRole('button', { name: '新手引导 1' })
+  const step2 = page.getByRole('button', { name: '新手引导 2' })
+  const step3 = page.getByRole('button', { name: '新手引导 3' })
   const hightAlert1 = page.locator('.tiny-alert').nth(0)
   const hightAlert2 = page.locator('.hight5')
   const guide = page.getByRole('dialog')
diff --git a/examples/sites/demos/pc/app/guide/highlight-box.vue b/examples/sites/demos/pc/app/guide/highlight-box.vue
index be4eba77ce..b14f1a2ed9 100644
--- a/examples/sites/demos/pc/app/guide/highlight-box.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box.vue
@@ -5,9 +5,9 @@
         <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
         <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
         <div>
-          <tiny-button plain class="hight1">新手引导1</tiny-button>
-          <tiny-button plain class="hight2">新手引导2</tiny-button>
-          <tiny-button plain class="hight3">新手引导3</tiny-button>
+          <tiny-button plain class="hight1">新手引导 1</tiny-button>
+          <tiny-button plain class="hight2">新手引导 2</tiny-button>
+          <tiny-button plain class="hight3">新手引导 3</tiny-button>
         </div>
         <div>
           <tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
diff --git a/examples/sites/demos/pc/app/guide/offset-composition-api.vue b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
index fd6bfae7b1..ce4c0a90db 100644
--- a/examples/sites/demos/pc/app/guide/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
@@ -27,7 +27,7 @@ const showStepCrossAxis = ref(false)
 const showStepAlignmentAxis = ref(false)
 const domDataDefault = ref([
   {
-    title: '新手引导标题1',
+    title: '新手引导标题 1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-offset',
     button: [
@@ -40,7 +40,7 @@ const domDataDefault = ref([
 ])
 const domDataMainAxis = ref([
   {
-    title: '新手引导标题2',
+    title: '新手引导标题 2',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-offset',
     button: [
@@ -53,7 +53,7 @@ const domDataMainAxis = ref([
 ])
 const domDataCrossAxis = ref([
   {
-    title: '新手引导标题3',
+    title: '新手引导标题 3',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-offset',
     button: [
@@ -66,7 +66,7 @@ const domDataCrossAxis = ref([
 ])
 const domDataAlignmentAxis = ref([
   {
-    title: '新手引导标题4',
+    title: '新手引导标题 4',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
     domElement: '.demo-guide-offset',
     button: [
diff --git a/examples/sites/demos/pc/app/guide/offset.spec.ts b/examples/sites/demos/pc/app/guide/offset.spec.ts
index bc4157bc6f..46710de094 100644
--- a/examples/sites/demos/pc/app/guide/offset.spec.ts
+++ b/examples/sites/demos/pc/app/guide/offset.spec.ts
@@ -8,14 +8,14 @@ test('引导框偏移量', async ({ page }) => {
   const guideBtn2 = page.getByRole('button', { name: '纵轴偏移 50px' })
   const guide = page.getByRole('dialog')
 
-  // 引导1 没有设置
+  // 引导 1 没有设置
   await guideBtn1.click()
   await expect(guide).toBeVisible()
 
   await page.waitForTimeout(500)
   const guideBox1 = await guide.boundingBox()
 
-  // 引导2  50px
+  // 引导 2  50px
   await page.getByRole('button', { name: 'Close Tour' }).click()
   await guideBtn2.click()
   await expect(guide).toBeVisible()
diff --git a/examples/sites/demos/pc/app/guide/offset.vue b/examples/sites/demos/pc/app/guide/offset.vue
index adc17a3ae5..9f48aedc17 100644
--- a/examples/sites/demos/pc/app/guide/offset.vue
+++ b/examples/sites/demos/pc/app/guide/offset.vue
@@ -34,7 +34,7 @@ export default {
       showStepAlignmentAxis: false,
       domDataDefault: [
         {
-          title: '新手引导标题1',
+          title: '新手引导标题 1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-offset',
           button: [
@@ -47,7 +47,7 @@ export default {
       ],
       domDataMainAxis: [
         {
-          title: '新手引导标题2',
+          title: '新手引导标题 2',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-offset',
           button: [
@@ -60,7 +60,7 @@ export default {
       ],
       domDataCrossAxis: [
         {
-          title: '新手引导标题3',
+          title: '新手引导标题 3',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-offset',
           button: [
@@ -73,7 +73,7 @@ export default {
       ],
       domDataAlignmentAxis: [
         {
-          title: '新手引导标题4',
+          title: '新手引导标题 4',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案',
           domElement: '.demo-guide-offset',
           button: [
diff --git a/examples/sites/demos/pc/app/guide/only-content-composition-api.vue b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
index ab063f0348..d99fb078d0 100644
--- a/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
@@ -3,8 +3,8 @@
     <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
     <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
     <div>
-      <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
-      <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+      <tiny-button plain class="guide1-content-steps">新手引导 1</tiny-button>
+      <tiny-button plain class="guide2-content-steps">新手引导 2</tiny-button>
     </div>
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
diff --git a/examples/sites/demos/pc/app/guide/only-content.spec.ts b/examples/sites/demos/pc/app/guide/only-content.spec.ts
index 39c899353a..cce397e0e0 100644
--- a/examples/sites/demos/pc/app/guide/only-content.spec.ts
+++ b/examples/sites/demos/pc/app/guide/only-content.spec.ts
@@ -6,12 +6,12 @@ test('纯段落用户引导', async ({ page }) => {
 
   const showBtn = page.getByRole('button', { name: '开始引导' })
   const nextBtn = page.getByRole('button', { name: '下一步' })
-  const guideEle1 = page.getByRole('button', { name: '新手引导1' })
-  const guideEle2 = page.getByRole('button', { name: '新手引导2' })
+  const guideEle1 = page.getByRole('button', { name: '新手引导 1' })
+  const guideEle2 = page.getByRole('button', { name: '新手引导 2' })
   const guide = page.getByRole('dialog')
   const arrow = guide.locator('.shepherd-arrow')
 
-  // 引导1
+  // 引导 1
   await showBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveClass(/only-content/)
@@ -25,7 +25,7 @@ test('纯段落用户引导', async ({ page }) => {
   expect(guideBox.x + guideBox.width / 2).toBeGreaterThan(guideEle1Box.x)
   expect(guideBox.x + guideBox.width / 2).toBeLessThan(guideEle1Box.x + guideEle1Box.width)
 
-  // 引导2
+  // 引导 2
   await nextBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveClass(/only-content/)
diff --git a/examples/sites/demos/pc/app/guide/only-content.vue b/examples/sites/demos/pc/app/guide/only-content.vue
index b5a90e625a..f6d8298986 100644
--- a/examples/sites/demos/pc/app/guide/only-content.vue
+++ b/examples/sites/demos/pc/app/guide/only-content.vue
@@ -3,8 +3,8 @@
     <tiny-button type="primary" @click="stepStart">开始引导</tiny-button>
     <tiny-divider color="var(--ti-common-color-line-dividing)"></tiny-divider>
     <div>
-      <tiny-button plain class="guide1-content-steps">新手引导1</tiny-button>
-      <tiny-button plain class="guide2-content-steps">新手引导2</tiny-button>
+      <tiny-button plain class="guide1-content-steps">新手引导 1</tiny-button>
+      <tiny-button plain class="guide2-content-steps">新手引导 2</tiny-button>
     </div>
     <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
   </div>
diff --git a/examples/sites/demos/pc/app/guide/size-composition-api.vue b/examples/sites/demos/pc/app/guide/size-composition-api.vue
index 92e8b6df55..165621474c 100644
--- a/examples/sites/demos/pc/app/guide/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/size-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyGuide, TinyButton } from '@opentiny/vue'
 const showStep = ref(false)
 const domData = ref([
   {
-    title: '新手引导标题1',
+    title: '新手引导标题 1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
     domElement: '.auto-size',
     button: [
diff --git a/examples/sites/demos/pc/app/guide/size.vue b/examples/sites/demos/pc/app/guide/size.vue
index bacc045410..b9dae723a5 100644
--- a/examples/sites/demos/pc/app/guide/size.vue
+++ b/examples/sites/demos/pc/app/guide/size.vue
@@ -18,7 +18,7 @@ export default {
       showStep: false,
       domData: [
         {
-          title: '新手引导标题1',
+          title: '新手引导标题 1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
           domElement: '.auto-size',
           button: [
diff --git a/examples/sites/demos/pc/app/hrapprover/webdoc/hrapprover.js b/examples/sites/demos/pc/app/hrapprover/webdoc/hrapprover.js
index 9dbd24aeb1..caeed4ee16 100644
--- a/examples/sites/demos/pc/app/hrapprover/webdoc/hrapprover.js
+++ b/examples/sites/demos/pc/app/hrapprover/webdoc/hrapprover.js
@@ -22,7 +22,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过 <code>category</code> 设置权签类别，默认值是 <code>0303</code>，发送权签人请求的category参数。</p>\n',
+          '<p>可通过 <code>category</code> 设置权签类别，默认值是 <code>0303</code>，发送权签人请求的 category 参数。</p>\n',
         'en-US':
           '<p>You can set the approval type through <code>category</code>. The default value is <code>0303</code>, which is the category parameter of the request sent by the approver. </p>\n'
       },
@@ -36,7 +36,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>value</code> 设置权签人的值。 通过 <code>disabled</code> 设置组件是否禁用，默认值为 false。</p>\n',
+          '<p>通过 <code>value</code> 设置权签人的值。通过 <code>disabled</code> 设置组件是否禁用，默认值为 false。</p>\n',
         'en-US':
           '<p>Use <code>value</code> to set the value of the approver. Use <code>disabled</code> to set whether to disable the component. The default value is false. </p>\n'
       },
diff --git a/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue b/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
index e47c243783..176e7f588d 100644
--- a/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
+++ b/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
@@ -69,7 +69,7 @@ const MultiColorSvgs = Object.keys(MultiColorSvgsList).map((name) => {
   return {
     name,
     component: MultiColorSvgsList[name](),
-    // 3.19.0版本新增图标
+    // 3.19.0 版本新增图标
     tinyFlag3_19: tinyIconMulticolor.includes(name)
   }
 })
diff --git a/examples/sites/demos/pc/app/icon-multicolor/list.vue b/examples/sites/demos/pc/app/icon-multicolor/list.vue
index b1eff8db38..8064dafc71 100644
--- a/examples/sites/demos/pc/app/icon-multicolor/list.vue
+++ b/examples/sites/demos/pc/app/icon-multicolor/list.vue
@@ -76,7 +76,7 @@ export default {
         return {
           name,
           component: MultiColorSvgs[name](),
-          // 3.19.0版本新增图标
+          // 3.19.0 版本新增图标
           tinyFlag3_19: tinyIconMulticolor.includes(name)
         }
       })
diff --git a/examples/sites/demos/pc/app/icon-multicolor/webdoc/icon-multicolor.js b/examples/sites/demos/pc/app/icon-multicolor/webdoc/icon-multicolor.js
index 4256b1b591..c6473f71d5 100644
--- a/examples/sites/demos/pc/app/icon-multicolor/webdoc/icon-multicolor.js
+++ b/examples/sites/demos/pc/app/icon-multicolor/webdoc/icon-multicolor.js
@@ -11,10 +11,10 @@ export default {
       desc: {
         'zh-CN': `通过 <code>first-color</code> 自定义图标第一层颜色，通过 <code>second-color</code> 自定义图标第二层颜色。
           <div class="tip custom-block">
-            <p>图标颜色规则： 共三层颜色，其中一二层颜色可独立配置，第三层颜色为第二层颜色透明度的50%</p>
-            <p>第一层默认颜色： rgba(0,103,209,1)</p>
-            <p>第二层默认颜色： rgba(0,103,209,0.7) （默认为第一层的70%）</p>
-            <p>第三层默认颜色： rgba(0,103,209,0.35)（第二层的50%）</p>
+            <p>图标颜色规则：共三层颜色，其中一二层颜色可独立配置，第三层颜色为第二层颜色透明度的 50%</p>
+            <p>第一层默认颜色：rgba(0,103,209,1)</p>
+            <p>第二层默认颜色：rgba(0,103,209,0.7) （默认为第一层的 70%）</p>
+            <p>第三层默认颜色：rgba(0,103,209,0.35)（第二层的 50%）</p>
           </div>
           `,
         'en-US':
diff --git a/examples/sites/demos/pc/app/image/keep-style.spec.ts b/examples/sites/demos/pc/app/image/keep-style.spec.ts
index 7af298e940..56c2beecba 100644
--- a/examples/sites/demos/pc/app/image/keep-style.spec.ts
+++ b/examples/sites/demos/pc/app/image/keep-style.spec.ts
@@ -8,7 +8,7 @@ test('测试样式属性保持', async ({ page }) => {
   await preview.locator('.tiny-image__inner').click()
   await page.waitForTimeout(50)
 
-  // viewerImage 是插入到body末尾的。
+  // viewerImage 是插入到 body 末尾的。
   const viewerImage = page.locator('.tiny-image-viewer')
   const mask = viewerImage.locator('.tiny-image-viewer__mask')
   const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
diff --git a/examples/sites/demos/pc/app/image/lazy.spec.ts b/examples/sites/demos/pc/app/image/lazy.spec.ts
index 8768f49c7b..a6cf20d7a6 100644
--- a/examples/sites/demos/pc/app/image/lazy.spec.ts
+++ b/examples/sites/demos/pc/app/image/lazy.spec.ts
@@ -7,7 +7,7 @@ test('测试懒加载', async ({ page }) => {
   const preview = page.locator('.pc-demo-container')
   await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(1)
 
-  // 滚动2次，触发下面2张加载
+  // 滚动 2 次，触发下面 2 张加载
   const imageBox = preview.locator('.demo-image__lazy')
   await imageBox.hover()
   await page.mouse.wheel(0, 300)
diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue b/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
index 10b26ec1ee..1e78b5b828 100644
--- a/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="show = true"> 弹出Dialog </tiny-button>
+  <tiny-button @click="show = true"> 弹出 Dialog </tiny-button>
   <tiny-dialog-box v-model:visible="show" class="demo-image__preview-dialog-box" title="消息" width="30%">
     <div class="demo-image__preview__in">
       <tiny-image :src="url" :preview-src-list="srcList"></tiny-image>
diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts b/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts
index 286fa0c0d0..929d5cca8d 100644
--- a/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts
+++ b/examples/sites/demos/pc/app/image/preview-in-dialog.spec.ts
@@ -6,7 +6,7 @@ test('测试对话框中预览图片', async ({ page }) => {
 
   const preview = page.locator('.pc-demo-container')
   const viewerImage = page.locator('.tiny-image-viewer')
-  const btn = preview.getByRole('button', { name: '弹出Dialog' })
+  const btn = preview.getByRole('button', { name: '弹出 Dialog' })
   const dialog = page.locator('.pc-demo-container .tiny-dialog-box__title')
   const image = preview.locator('.tiny-image__inner')
 
diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog.vue b/examples/sites/demos/pc/app/image/preview-in-dialog.vue
index a87a965361..21c8682b22 100644
--- a/examples/sites/demos/pc/app/image/preview-in-dialog.vue
+++ b/examples/sites/demos/pc/app/image/preview-in-dialog.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="show = true"> 弹出Dialog </tiny-button>
+    <tiny-button @click="show = true"> 弹出 Dialog </tiny-button>
     <tiny-dialog-box class="demo-image__preview-dialog-box" v-model:visible="show" title="消息" width="30%">
       <div class="demo-image__preview__in">
         <tiny-image :src="url" :preview-src-list="srcList"></tiny-image>
diff --git a/examples/sites/demos/pc/app/image/preview.spec.ts b/examples/sites/demos/pc/app/image/preview.spec.ts
index d902b92ff7..8415a407dc 100644
--- a/examples/sites/demos/pc/app/image/preview.spec.ts
+++ b/examples/sites/demos/pc/app/image/preview.spec.ts
@@ -8,7 +8,7 @@ test('测试图片预览大图', async ({ page }) => {
   await preview.locator('.tiny-image__inner').click()
   await page.waitForTimeout(50)
 
-  // viewerImage 是插入到body末尾的。
+  // viewerImage 是插入到 body 末尾的。
   const viewerImage = page.locator('.tiny-image-viewer')
   const mask = viewerImage.locator('.tiny-image-viewer__mask')
   const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
diff --git a/examples/sites/demos/pc/app/image/webdoc/image.js b/examples/sites/demos/pc/app/image/webdoc/image.js
index a096ba48e0..48c204a96a 100644
--- a/examples/sites/demos/pc/app/image/webdoc/image.js
+++ b/examples/sites/demos/pc/app/image/webdoc/image.js
@@ -17,7 +17,7 @@ export default {
           'contain：被替换的内容大小可以填充元素的内容框<br>' +
           'cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>' +
           'none：被替换的内容尺寸不会被改变<br>' +
-          'scale-down：内容的尺寸就像是指定了none 或 contain，取决于哪一个将导致更小的对象尺寸。',
+          'scale-down：内容的尺寸就像是指定了 none 或 contain，取决于哪一个将导致更小的对象尺寸。',
         'en-US':
           'Use <code>src</code> to set the image path.<br>' +
           'The <code>fit</code> attribute determines how the image fits into the container box, which is the same as the object-fit attribute of the native CSS.<br>' +
@@ -68,7 +68,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>preview-src-list</code> 属性 ，传入一组图片 url 的数组，点击图片后，会进入预览大图的模式。<br>' +
+          '通过 <code>preview-src-list</code> 属性，传入一组图片 url 的数组，点击图片后，会进入预览大图的模式。<br>' +
           '通过 <code>z-index</code> 设置预览图片的元素的 z-index。<br>' +
           '通过添加 <code>show-index</code> 开启图片序号展示。<br>',
         'en-US':
@@ -136,7 +136,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现,只有大图片时，会看到加载中的插槽。 <br>' +
+          '通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现，只有大图片时，会看到加载中的插槽。 <br>' +
           ' 通过 <code> error </code> 插槽，定义图片在加载失败后的占位内容。',
         'en-US':
           'The <code> placeholder</code> slot defines the placeholder content for images when loaded. Usually, because the image loads quickly, you will not see the appearance of this slot, only a large image, you will see the loading slot. <br>' +
@@ -151,7 +151,7 @@ export default {
         'en-US': 'Events'
       },
       desc: {
-        'zh-CN': '<code>load</code> 事件: 图片加载成功触发 。<br><code>error</code> 事件: 图片加载失败触发 。',
+        'zh-CN': '<code>load</code> 事件：图片加载成功触发。<br><code>error</code> 事件：图片加载失败触发。',
         'en-US':
           '<code>load</code> event: The image is successfully loaded. <br>' +
           '<code>error</code> event: The image failed to be loaded. '
diff --git a/examples/sites/demos/pc/app/input/display-only-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
index 3001c73868..6620ca90b7 100644
--- a/examples/sites/demos/pc/app/input/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
@@ -2,7 +2,7 @@
   <div class="display-only">
     <p class="demp-input">输入框</p>
     <p>
-      <label>display-only & display-only-content：</label>
+      <label>display-only & display-only-content:</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
     </p>
     <p>
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only & autosize：</label>
+      <label>display-only & autosize:</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
index 3135cfcf56..1ea7a68e55 100644
--- a/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
@@ -9,7 +9,7 @@ import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue'
 
 const input = ref(
-  '表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏'
+  '表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏'
 )
 </script>
 
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more.vue b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
index d22e695f1f..010430b8f7 100644
--- a/examples/sites/demos/pc/app/input/display-only-popup-more.vue
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
@@ -14,7 +14,7 @@ export default {
   data() {
     return {
       input:
-        '表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏'
+        '表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏。表单文本域开启只读模式，文本内容超过 5 行自动隐藏'
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index 6bd8c0be2d..97d5a42e3d 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -2,7 +2,7 @@
   <div class="display-only">
     <p class="demp-input">输入框</p>
     <p>
-      <label>display-only & display-only-content：</label>
+      <label>display-only & display-only-content:</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
     </p>
     <p>
@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only & autosize：</label>
+      <label>display-only & autosize:</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>
diff --git a/examples/sites/demos/pc/app/input/mask-composition-api.vue b/examples/sites/demos/pc/app/input/mask-composition-api.vue
index 3aaabf3e6e..9067e92c1d 100644
--- a/examples/sites/demos/pc/app/input/mask-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/mask-composition-api.vue
@@ -9,7 +9,7 @@
 import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue'
 
-const input = ref('文字过长时会显示点点点，并且鼠标悬浮出现tip')
+const input = ref('文字过长时会显示点点点，并且鼠标悬浮出现 tip')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/input/mask.vue b/examples/sites/demos/pc/app/input/mask.vue
index ee4968cba2..22ec307c23 100644
--- a/examples/sites/demos/pc/app/input/mask.vue
+++ b/examples/sites/demos/pc/app/input/mask.vue
@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      input: '文字过长时会显示点点点，并且鼠标悬浮出现tip'
+      input: '文字过长时会显示点点点，并且鼠标悬浮出现 tip'
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index 42efcaf3f1..87b89be19e 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -287,7 +287,7 @@ export default {
         'en-US': 'Box type'
       },
       desc: {
-        'zh-CN': '通过 <code>input-box-type</code>属性，设置边框模式,可取值为 <code>"normal" | "underline"</code> 。',
+        'zh-CN': '通过 <code>input-box-type</code>属性，设置边框模式，可取值为 <code>"normal" | "underline"</code> 。',
         'en-US': 'Set the border mode through the input-box-type attribute. The value can be "normal"|"underline".'
       },
       codeFiles: ['input-box-type.vue']
diff --git a/examples/sites/demos/pc/app/ip-address/event.spec.ts b/examples/sites/demos/pc/app/ip-address/event.spec.ts
index 1940ade842..c5c1c9cc2b 100644
--- a/examples/sites/demos/pc/app/ip-address/event.spec.ts
+++ b/examples/sites/demos/pc/app/ip-address/event.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('ipAddress change事件', async ({ page }) => {
+test('ipAddress change 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#event')
 
@@ -27,7 +27,7 @@ test('ipAddress change事件', async ({ page }) => {
   await expect(modal.filter({ hasText: 'input 事件触发了' })).toBeVisible()
 })
 
-test('select事件', async ({ page }) => {
+test('select 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#event')
 
diff --git a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.cn.md b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.cn.md
index 6f201c63b7..6469a19068 100644
--- a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.cn.md
+++ b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.cn.md
@@ -1,7 +1,7 @@
 ---
-title: IpAddress IP地址输入框
+title: IpAddress IP 地址输入框
 ---
 
-# IpAddress IP地址输入框
+# IpAddress IP 地址输入框
 
 <div>IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。</div>
diff --git a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
index c1d7b96d19..d0dbb1d83f 100644
--- a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
+++ b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
@@ -23,7 +23,7 @@ export default {
         'en-US': 'Delimiter'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>delimiter</code> 设置分隔符(图标类)，或通过默认插槽设置分隔符。</p>',
+        'zh-CN': '<p>通过 <code>delimiter</code> 设置分隔符 (图标类)，或通过默认插槽设置分隔符。</p>',
         'en-US':
           '<p>The delimiter can be set through the <code>delimiter</code> property (icon class) or through the default slot. </p>'
       },
diff --git a/examples/sites/demos/pc/app/layout/alignment.spec.ts b/examples/sites/demos/pc/app/layout/alignment.spec.ts
index 05ea4b13d4..5536b30b88 100644
--- a/examples/sites/demos/pc/app/layout/alignment.spec.ts
+++ b/examples/sites/demos/pc/app/layout/alignment.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('layout对齐方式', async ({ page }) => {
+test('layout 对齐方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
   await page.goto('layout#alignment')
diff --git a/examples/sites/demos/pc/app/layout/gutter.spec.ts b/examples/sites/demos/pc/app/layout/gutter.spec.ts
index c730788c85..e4d7b8a4c5 100644
--- a/examples/sites/demos/pc/app/layout/gutter.spec.ts
+++ b/examples/sites/demos/pc/app/layout/gutter.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('gutter栅格间隔', async ({ page }) => {
+test('gutter 栅格间隔', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('layout#gutter')
   const preview = page.locator('.pc-demo-container')
diff --git a/examples/sites/demos/pc/app/layout/tag-composition-api.vue b/examples/sites/demos/pc/app/layout/tag-composition-api.vue
index f39d8dafd9..777b3a9f00 100644
--- a/examples/sites/demos/pc/app/layout/tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/tag-composition-api.vue
@@ -2,13 +2,13 @@
   <tiny-layout class="tiny-layout-tag1">
     <tiny-row tag="span">
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
     </tiny-row>
   </tiny-layout>
diff --git a/examples/sites/demos/pc/app/layout/tag.vue b/examples/sites/demos/pc/app/layout/tag.vue
index 0c049f0c6e..92ed666d7b 100644
--- a/examples/sites/demos/pc/app/layout/tag.vue
+++ b/examples/sites/demos/pc/app/layout/tag.vue
@@ -2,13 +2,13 @@
   <tiny-layout class="tiny-layout-tag1">
     <tiny-row tag="span">
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
       <tiny-col :span="3">
-        <div class="col">span（行标签已改为span）</div>
+        <div class="col">span（行标签已改为 span）</div>
       </tiny-col>
     </tiny-row>
   </tiny-layout>
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.js b/examples/sites/demos/pc/app/layout/webdoc/layout.js
index b8ec3876b1..ad666f75b2 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.js
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.js
@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n            通过在<code>Layout </code> 组件嵌套使用 <code>Row</code> , <code>Col</code> 组件, 来实现对一个区域进行 12/24 栅格布局。<br>\n            通过<code>Layout </code> 组件的<code> cols </code> 属性来指定布局的总栅格栏数，组件库默认为12栅格栏；<br>\n            通过 <code>Col</code> 组件的 <code>span</code> 属性指定每栏所占栅格数。当一行的栅格数之和大于总栅格栏数时，布局会自动换行显示。<br>\n          ',
+          '\n            通过在<code>Layout </code> 组件嵌套使用 <code>Row</code> , <code>Col</code> 组件，来实现对一个区域进行 12/24 栅格布局。<br>\n            通过<code>Layout </code> 组件的<code> cols </code> 属性来指定布局的总栅格栏数，组件库默认为 12 栅格栏；<br>\n            通过 <code>Col</code> 组件的 <code>span</code> 属性指定每栏所占栅格数。当一行的栅格数之和大于总栅格栏数时，布局会自动换行显示。<br>\n          ',
         'en-US':
           '\n          A 12/24 grid Layout of an area is implemented by nesting <code>Row</code>, <code>Col</code> components within <code>Layout </code> components. <br>\n          Use the <code> cols </code> property of the <code>Layout </code> component to specify the total number of grid columns for the layout. The component library defaults to 12 grid columns. <br>\n          The <code>span</code> property of the <code>Col</code> component specifies the number of grids per column. When the sum of the number of grids in a row is greater than the total number of grid columns, the layout is automatically wrapped. <br> \n        '
       },
@@ -38,7 +38,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n            在启用<code>Row</code> 组件的 <code>flex</code> 布局时，可通过设置它的 <code>order</code> 属性值为: <code>asc 或 desc</code>，给<code>Col</code> 组件排序。<br>\n            待排序的列需指定 <code>no</code> 属性为数字值，属性的默认值为0。\n          ',
+          '\n            在启用<code>Row</code> 组件的 <code>flex</code> 布局时，可通过设置它的 <code>order</code> 属性值为：<code>asc 或 desc</code>，给<code>Col</code> 组件排序。<br>\n            待排序的列需指定 <code>no</code> 属性为数字值，属性的默认值为 0。\n          ',
         'en-US':
           '\n            When you enable the <code>flex</code> layout of the <code>Row</code> component, you can do this by setting its <code>order</code> property to: <code>asc or desc</code>, which sorts <code>Col</code> components. <br>\n            The column to be sorted requires the <code>no</code> attribute to be numeric, which defaults to 0.\n          '
       },
@@ -79,7 +79,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>\n            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值<br>\n            通过 <code>noSpace</code> 属性，让子项间没有间距。\n          ',
+          '\n            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>\n            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右 10px </code>的 padding 值<br>\n            通过 <code>noSpace</code> 属性，让子项间没有间距。\n          ',
         'en-US':
           '\n            This is done by using the <code>gutter</code> property of the <code>Row</code> component.\n            Without setting the <code>gutter</code>, the component will default to <code>Col</code> and set the padding value to 10px </code> around the <code>. \n          '
       },
diff --git a/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts b/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts
index 01def12d5f..f29772f93b 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts
+++ b/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts
@@ -17,6 +17,6 @@ test('自定义菜单弹窗底部', async ({ page }) => {
   // 确认选择
   await firstButton.click()
   await expect(dialogBox).toBeHidden()
-  // 页面上应该展示所选的1个菜单项
+  // 页面上应该展示所选的 1 个菜单项
   await expect(preview.locator('.tiny-link-menu .tiny-link-menu__nav > a')).toHaveCount(1)
 })
diff --git a/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts b/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts
index fbc66d0e95..25834f937b 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts
+++ b/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts
@@ -1,15 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('以下2个测试将覆盖2个demo: 自定义折叠展开图标、菜单内容超长时省略显示', () => {
+test.describe('以下 2 个测试将覆盖 2 个 demo: 自定义折叠展开图标、菜单内容超长时省略显示', () => {
   test('自定义折叠展开图标', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('link-menu#custom-icon')
     // 点击图标弹出对话框
     const linkMenuList = page.locator('.tiny-tree.tiny-link-menu__overflow > div')
     const filterIcon = page.locator('.tiny-link-menu__filert .tiny-input__icon')
-    // 默认搜索图标的path数量为1
+    // 默认搜索图标的 path 数量为 1
     await expect(filterIcon.locator('path')).toHaveCount(3)
-    // 默认展开图标的path数量为1
+    // 默认展开图标的 path 数量为 1
     await expect(linkMenuList.nth(1).locator('.tree-node-icon .tiny-tree-node__expand-icon path')).toHaveCount(2)
   })
 })
diff --git a/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
index 0549ad9a63..60d6e72679 100644
--- a/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
@@ -22,7 +22,7 @@ const expandIcon = iconPutAway()
 const datas = ref([
   {
     id: 1,
-    label: '菜单内容超长时换行显示，默认为 false菜单内容超长时换行显示，默认为 false。添加属性wrap显示换行'
+    label: '菜单内容超长时换行显示，默认为 false 菜单内容超长时换行显示，默认为 false。添加属性 wrap 显示换行'
   },
   {
     id: 2,
diff --git a/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts b/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts
index 2eb0903c27..4b63f3a2b4 100644
--- a/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts
+++ b/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('以下3个测试将覆盖3个demo: 数据源、收藏菜单标题、菜单内容超长时换行显示', () => {
+test.describe('以下 3 个测试将覆盖 3 个 demo: 数据源、收藏菜单标题、菜单内容超长时换行显示', () => {
   test('弹框功能是否正常', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('link-menu#data-resource')
@@ -75,7 +75,7 @@ test.describe('以下3个测试将覆盖3个demo: 数据源、收藏菜单标题
     await preview.getByRole('button', { name: '确定' }).click()
     // 弹框应该不可见
     await expect(dialogBox).toBeHidden()
-    // 页面上应该展示所选的3个菜单项
+    // 页面上应该展示所选的 3 个菜单项
     await expect(preview.locator('.tiny-link-menu .tiny-link-menu__nav > a')).toHaveCount(3)
   })
 })
diff --git a/examples/sites/demos/pc/app/link-menu/data-resource.vue b/examples/sites/demos/pc/app/link-menu/data-resource.vue
index 99bc611d73..8cc3cd956c 100644
--- a/examples/sites/demos/pc/app/link-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/link-menu/data-resource.vue
@@ -26,7 +26,7 @@ export default {
       datas: [
         {
           id: 1,
-          label: '菜单内容超长时换行显示，默认为 false菜单内容超长时换行显示，默认为 false。添加属性wrap显示换行'
+          label: '菜单内容超长时换行显示，默认为 false 菜单内容超长时换行显示，默认为 false。添加属性 wrap 显示换行'
         },
         {
           id: 2,
diff --git a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts
index d0d9d75f52..7fdb659fd9 100644
--- a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts
+++ b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts
@@ -36,6 +36,6 @@ test('自定义菜单数据服务', async ({ page }) => {
   await preview.getByRole('button', { name: '确定' }).click()
   // 弹框应该不可见
   await expect(dialogBox).toBeHidden()
-  // 页面上应该展示所选的3个菜单项
+  // 页面上应该展示所选的 3 个菜单项
   await expect(preview.locator('.tiny-link-menu .tiny-link-menu__nav > a')).toHaveCount(3)
 })
diff --git a/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts b/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts
index 9a34f4bb5d..38f71ffccf 100644
--- a/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts
+++ b/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts
@@ -46,6 +46,6 @@ test('可收藏栏目数', async ({ page }) => {
   await preview.getByRole('button', { name: '确定' }).click()
   // 弹框应该不可见
   await expect(dialogBox).toBeHidden()
-  // 页面上应该展示所选的5个菜单项
+  // 页面上应该展示所选的 5 个菜单项
   await expect(preview.locator('.tiny-link-menu .tiny-link-menu__nav > a')).toHaveCount(5)
 })
diff --git a/examples/sites/demos/pc/app/link/webdoc/link.js b/examples/sites/demos/pc/app/link/webdoc/link.js
index fe87a2f883..00e908eb07 100644
--- a/examples/sites/demos/pc/app/link/webdoc/link.js
+++ b/examples/sites/demos/pc/app/link/webdoc/link.js
@@ -11,7 +11,7 @@ export default {
       desc: {
         'zh-CN': `
           通过 <code>value</code> 或者默认插槽设置链接显示内容。<br>
-          绑定 <code>click</code> 事件监听点击。 当禁用或配置 <code>href</code> 属性时， 不会触发<code>click</code>事件！
+          绑定 <code>click</code> 事件监听点击。当禁用或配置 <code>href</code> 属性时，不会触发<code>click</code>事件！
         `,
         'en-US': `
           Set the link to display content via <code>value</code> or the default slot. 
diff --git a/examples/sites/demos/pc/app/loading/webdoc/loading.js b/examples/sites/demos/pc/app/loading/webdoc/loading.js
index 39e3fc3d97..8eacbd3a9f 100644
--- a/examples/sites/demos/pc/app/loading/webdoc/loading.js
+++ b/examples/sites/demos/pc/app/loading/webdoc/loading.js
@@ -71,7 +71,7 @@ export default {
         'en-US': 'Directive'
       },
       desc: {
-        'zh-CN': '<p>通过v-loading使用指令。</p>',
+        'zh-CN': '<p>通过 v-loading 使用指令。</p>',
         'en-US': '<p>Use instructions via v-loading</p>'
       },
       codeFiles: ['directive.vue']
diff --git a/examples/sites/demos/pc/app/logon-user/webdoc/logon-user.cn.md b/examples/sites/demos/pc/app/logon-user/webdoc/logon-user.cn.md
index dea321990d..0de0b82a89 100644
--- a/examples/sites/demos/pc/app/logon-user/webdoc/logon-user.cn.md
+++ b/examples/sites/demos/pc/app/logon-user/webdoc/logon-user.cn.md
@@ -4,4 +4,4 @@ title: LogonUser 登录用户
 
 # LogonUser 登录用户
 
-<div>LogonUser 用于显示当前登录人的 显示名（displayName） 或 长工号（userCN）。</div>
+<div>LogonUser 用于显示当前登录人的 显示名（displayName）或 长工号（userCN）。</div>
diff --git a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
index e17b0a72b0..4a240c71da 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
@@ -25,7 +25,7 @@ function beforeLogout() {
 
 function getLogoutUrl() {
   return new Promise((resolve, reject) => {
-    /* 自定义注销逻辑，返回注销完成后的重定向url */
+    /* 自定义注销逻辑，返回注销完成后的重定向 url */
     setTimeout(() => {
       window.localStorage.setItem('isLogin', false)
       const url = window.location.href
@@ -36,7 +36,7 @@ function getLogoutUrl() {
 }
 
 function isGuestUser() {
-  /* 此处为用户自定义获取当前登录状态，未登录为访客，返回true,已登录返回false */
+  /* 此处为用户自定义获取当前登录状态，未登录为访客，返回 true，已登录返回 false */
   isLogin.value = window.localStorage.getItem('isLogin') === 'true'
 
   return !isLogin.value
diff --git a/examples/sites/demos/pc/app/logout/basic-usage.vue b/examples/sites/demos/pc/app/logout/basic-usage.vue
index 4c51548a91..e94fdd170c 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage.vue
@@ -29,7 +29,7 @@ export default {
     },
     getLogoutUrl() {
       return new Promise((resolve, reject) => {
-        /* 自定义注销逻辑，返回注销完成后的重定向url */
+        /* 自定义注销逻辑，返回注销完成后的重定向 url */
         setTimeout(() => {
           window.localStorage.setItem('isLogin', false)
           const url = window.location.href
@@ -39,7 +39,7 @@ export default {
       })
     },
     isGuestUser() {
-      /* 此处为用户自定义获取当前登录状态，未登录为访客，返回true,已登录返回false */
+      /* 此处为用户自定义获取当前登录状态，未登录为访客，返回 true，已登录返回 false */
       this.isLogin = window.localStorage.getItem('isLogin') === 'true'
 
       return !this.isLogin
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
index bbd46380cc..07073f44b6 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="demo-milestone">
-    <div>场景1： 默认</div>
+    <div>场景 1：默认</div>
     <br />
     <tiny-milestone :data="milestoneData"></tiny-milestone>
     <br />
     <br />
-    <div>场景2： 自定义状态色</div>
+    <div>场景 2：自定义状态色</div>
     <br />
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
     <br />
     <br />
-    <div>场景3： 自定义状态色 + 实心显示</div>
+    <div>场景 3：自定义状态色 + 实心显示</div>
     <br />
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" solid></tiny-milestone>
   </div>
@@ -20,7 +20,7 @@
 import { ref } from 'vue'
 import { TinyMilestone } from '@opentiny/vue'
 
-// statusMap 对应 milestoneData的status；显示的背景色样式（可以是旗，可以是步骤条）
+// statusMap 对应 milestoneData 的 status；显示的背景色样式（可以是旗，可以是步骤条）
 const statusMap = ref({
   // 对应 status = completed
   completed: '#1890ff',
@@ -67,7 +67,7 @@ const milestoneData = ref([
     flags: [
       {
         status: 'back',
-        content: '欢迎使用vui',
+        content: '欢迎使用 vui',
         name: 'test7'
       },
       {
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
index 14a84b8406..ecf4aab94d 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
@@ -55,7 +55,7 @@ test('基本用法', async ({ page }) => {
     }
   ]
   const titles = ['completed 状态', 'completed 状态', 'doing 状态', 'cancel 状态', 'back 状态', 'end 状态']
-  const flagContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
+  const flagContents = [/引导用户按照流程完成任务/, /test7欢迎使用 vui/, /test8/, /test6/]
   const flagLineColors = ['rgb(237, 247, 223)', 'rgb(237, 247, 223)', 'rgb(232, 250, 255)', 'rgba(242, 48, 48, 0.1)']
 
   await expect(nodes).toHaveCount(nodeCount)
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.vue b/examples/sites/demos/pc/app/milestone/basic-usage.vue
index faeeb66067..4d35a966b7 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="demo-milestone">
-    <div>场景1： 默认</div>
+    <div>场景 1：默认</div>
     <br />
     <tiny-milestone :data="milestoneData"></tiny-milestone>
     <br />
     <br />
-    <div>场景2： 自定义状态色</div>
+    <div>场景 2：自定义状态色</div>
     <br />
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
     <br />
     <br />
-    <div>场景3： 自定义状态色 + 实心显示</div>
+    <div>场景 3：自定义状态色 + 实心显示</div>
     <br />
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" solid></tiny-milestone>
   </div>
@@ -25,7 +25,7 @@ export default {
   },
   data() {
     return {
-      // statusMap 对应 milestoneData的status；显示的背景色样式（可以是旗，可以是步骤条）
+      // statusMap 对应 milestoneData 的 status；显示的背景色样式（可以是旗，可以是步骤条）
       statusMap: {
         // 对应 status = completed
         completed: '#1890ff',
@@ -71,7 +71,7 @@ export default {
           flags: [
             {
               status: 'back',
-              content: '欢迎使用vui',
+              content: '欢迎使用 vui',
               name: 'test7'
             },
             {
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
index 28f00c553e..06e2d2a4d7 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
@@ -51,7 +51,7 @@ const milestoneData = ref([
     flags: [
       {
         status: 'back',
-        content: '欢迎使用vui',
+        content: '欢迎使用 vui',
         name: 'test7'
       },
       {
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag.spec.ts b/examples/sites/demos/pc/app/milestone/custom-flag.spec.ts
index 26e611b20e..f8aa848b93 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/custom-flag.spec.ts
@@ -5,7 +5,7 @@ test('自定义旗帜内容', async ({ page }) => {
   await page.goto('milestone#custom-flag')
 
   const flags = page.locator('.tiny-milestone__flag-content > span')
-  const flagContents = ['引导用户按照流程完成任务', '欢迎使用vui', 'test8', 'test6']
+  const flagContents = ['引导用户按照流程完成任务', '欢迎使用 vui', 'test8', 'test6']
   const flagCount = 4
 
   await expect(flags).toHaveCount(flagCount)
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag.vue b/examples/sites/demos/pc/app/milestone/custom-flag.vue
index deea32e776..5b619c1071 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag.vue
@@ -56,7 +56,7 @@ export default {
           flags: [
             {
               status: 'back',
-              content: '欢迎使用vui',
+              content: '欢迎使用 vui',
               name: 'test7'
             },
             {
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
index fb8d1794fa..f7d92354e8 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
@@ -24,38 +24,38 @@ const statusMap = ref({
 // 数据源
 const milestoneData = ref([
   {
-    name: '自定义数据1',
+    name: '自定义数据 1',
     time: '2018-9-7',
     status: 'completed',
     icon: iconShare()
   },
   {
-    name: '自定义数据2',
+    name: '自定义数据 2',
     time: '2018-9-8',
     status: 'completed',
     icon: iconYes()
   },
   {
-    name: '自定义数据3',
+    name: '自定义数据 3',
     time: '2018-9-10',
     status: 'doing',
     content: null,
     icon: iconDel()
   },
   {
-    name: '自定义数据4',
+    name: '自定义数据 4',
     time: '2018-9-9',
     status: 'cancel',
     icon: iconWriting()
   },
   {
-    name: '自定义数据5',
+    name: '自定义数据 5',
     time: '2018-9-11',
     status: 'back',
     icon: iconAscending()
   },
   {
-    name: '自定义数据6',
+    name: '自定义数据 6',
     time: '2018-9-9',
     status: 'end',
     icon: iconShare()
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
index 253e9d1572..ea2543250d 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
@@ -34,38 +34,38 @@ export default {
       // 数据源
       milestoneData: [
         {
-          name: '自定义数据1',
+          name: '自定义数据 1',
           time: '2018-9-7',
           status: 'completed',
           icon: IconShare()
         },
         {
-          name: '自定义数据2',
+          name: '自定义数据 2',
           time: '2018-9-8',
           status: 'completed',
           icon: IconYes()
         },
         {
-          name: '自定义数据3',
+          name: '自定义数据 3',
           time: '2018-9-10',
           status: 'doing',
           content: null,
           icon: IconDel()
         },
         {
-          name: '自定义数据4',
+          name: '自定义数据 4',
           time: '2018-9-9',
           status: 'cancel',
           icon: IconWriting()
         },
         {
-          name: '自定义数据5',
+          name: '自定义数据 5',
           time: '2018-9-11',
           status: 'back',
           icon: IconAscending()
         },
         {
-          name: '自定义数据6',
+          name: '自定义数据 6',
           time: '2018-9-9',
           status: 'end',
           icon: IconShare()
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
index c345c0fce4..adf060cbaf 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
@@ -28,15 +28,15 @@ const statusMap = ref({
 })
 const milestoneData = ref([
   {
-    name: 'POR1', // name-field设置的键名
-    date: '2018-9-7', // time-field设置的键名
-    progress: 'completed', // status-field设置的键名，completed-field设置的键值
-    // flag-field设置的键名
+    name: 'POR1', // name-field 设置的键名
+    date: '2018-9-7', // time-field 设置的键名
+    progress: 'completed', // status-field 设置的键名，completed-field 设置的键值
+    // flag-field 设置的键名
     flags: [
       {
-        progress: 'completed', // flag-status-field设置的键名
-        title: '第一阶段', // flag-name-field设置的键名
-        describe: 'flag-content-field' // flag-content-field设置的键名
+        progress: 'completed', // flag-status-field 设置的键名
+        title: '第一阶段', // flag-name-field 设置的键名
+        describe: 'flag-content-field' // flag-content-field 设置的键名
       }
     ]
   },
@@ -66,12 +66,12 @@ const milestoneData = ref([
       {
         progress: 'back',
         describe: 'flag-content-field',
-        title: '第四阶段1'
+        title: '第四阶段 1'
       },
       {
         progress: 'doing',
         describe: 'flag-content-field',
-        title: '第四阶段2'
+        title: '第四阶段 2'
       }
     ]
   },
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping.spec.ts b/examples/sites/demos/pc/app/milestone/data-field-mapping.spec.ts
index 09dc96e135..bba2854000 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping.spec.ts
@@ -18,8 +18,8 @@ test('数据字段映射', async ({ page }) => {
   ]
   const flagcontents = [
     /第二阶段flag-content-field/,
-    /第四阶段1flag-content-field/,
-    /第四阶段2flag-content-field/,
+    /第四阶段 1flag-content-field/,
+    /第四阶段 2flag-content-field/,
     /第五阶段flag-content-field/
   ]
   const titles = ['POR1', 'POR2', 'POR3', 'POR4', 'POR5']
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
index 48e3b53bcc..4d43de09ad 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
@@ -33,15 +33,15 @@ export default {
       },
       milestoneData: [
         {
-          name: 'POR1', // name-field设置的键名
-          date: '2018-9-7', // time-field设置的键名
-          progress: 'completed', // status-field设置的键名，completed-field设置的键值
-          // flag-field设置的键名
+          name: 'POR1', // name-field 设置的键名
+          date: '2018-9-7', // time-field 设置的键名
+          progress: 'completed', // status-field 设置的键名，completed-field 设置的键值
+          // flag-field 设置的键名
           flags: [
             {
-              progress: 'completed', // flag-status-field设置的键名
-              title: '第一阶段', // flag-name-field设置的键名
-              describe: 'flag-content-field' // flag-content-field设置的键名
+              progress: 'completed', // flag-status-field 设置的键名
+              title: '第一阶段', // flag-name-field 设置的键名
+              describe: 'flag-content-field' // flag-content-field 设置的键名
             }
           ]
         },
@@ -71,12 +71,12 @@ export default {
             {
               progress: 'back',
               describe: 'flag-content-field',
-              title: '第四阶段1'
+              title: '第四阶段 1'
             },
             {
               progress: 'doing',
               describe: 'flag-content-field',
-              title: '第四阶段2'
+              title: '第四阶段 2'
             }
           ]
         },
diff --git a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
index 2bf7d7c421..1076cf60a3 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-milestone">
     <tiny-button @click="handleClick(!isBefore)" style="max-width: unset"
-      >设置flag-before值为{{ !isBefore }}</tiny-button
+      >设置 flag-before 值为 {{ !isBefore }}</tiny-button
     >
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :flag-before="isBefore"></tiny-milestone>
   </div>
@@ -51,7 +51,7 @@ const milestoneData = ref([
     flags: [
       {
         status: 'back',
-        content: '欢迎使用vui',
+        content: '欢迎使用 vui',
         name: 'test7'
       },
       {
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
index 7f70cba382..7f845b03e7 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts
@@ -9,9 +9,9 @@ test('旗子数据来源', async ({ page }) => {
   const flagLineDots = flagLines.locator('.tiny-milestone__dot')
   const nodes = page.locator('.tiny-milestone__icon.tiny-milestone__icon-custom')
   const flagCount = 4
-  const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
-  const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/]
-  const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' })
+  const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用 vui/, /test8/, /test6/]
+  const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用 vui/, /test8/]
+  const button = page.getByRole('button').filter({ hasText: '设置 flag-before 值为 true' })
   const flagAfterLineColors = ['rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)', 'rgb(179, 214, 255)']
   const flagBeforeLineColors = ['rgb(179, 214, 255)', 'rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)']
 
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.vue b/examples/sites/demos/pc/app/milestone/flag-before.vue
index 0daf910f02..675e6a2e12 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-milestone">
     <tiny-button @click="handleClick(!isBefore)" style="max-width: unset"
-      >设置flag-before值为{{ !isBefore }}</tiny-button
+      >设置 flag-before 值为 {{ !isBefore }}</tiny-button
     >
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :flag-before="isBefore"></tiny-milestone>
   </div>
@@ -57,7 +57,7 @@ export default {
           flags: [
             {
               status: 'back',
-              content: '欢迎使用vui',
+              content: '欢迎使用 vui',
               name: 'test7'
             },
             {
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
index ff5771cadc..d96a056d75 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
@@ -52,7 +52,7 @@ const milestoneData = ref([
     flags: [
       {
         status: 'back',
-        content: '欢迎使用vui',
+        content: '欢迎使用 vui',
         name: 'test7'
       },
       {
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events.vue b/examples/sites/demos/pc/app/milestone/milestone-events.vue
index d6b5cbbad2..16c65b2cea 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events.vue
@@ -57,7 +57,7 @@ export default {
           flags: [
             {
               status: 'back',
-              content: '欢迎使用vui',
+              content: '欢迎使用 vui',
               name: 'test7'
             },
             {
diff --git a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
index 3fa91a11c2..60a68950a1 100644
--- a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
@@ -33,7 +33,7 @@ const exampleData = ref({
         id: 'c9ee9a4e8f3f83c5'
       },
       {
-        topic: 'Javascript权威指南',
+        topic: 'Javascript 权威指南',
         id: 'c9ee9b8e87958282'
       },
       {
diff --git a/examples/sites/demos/pc/app/mind-map/event.spec.ts b/examples/sites/demos/pc/app/mind-map/event.spec.ts
index cf59626568..5dd720c877 100644
--- a/examples/sites/demos/pc/app/mind-map/event.spec.ts
+++ b/examples/sites/demos/pc/app/mind-map/event.spec.ts
@@ -3,28 +3,28 @@ import { test, expect } from '@playwright/test'
 test('测试创建事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.getByText('触发事件create').isVisible()
+  await page.getByText('触发事件 create').isVisible()
 })
 
-test('测试operation事件', async ({ page }) => {
+test('测试 operation 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
   await page.locator('me-tpc').filter({ hasText: '前端修仙指南' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.getByText('触发事件operation').first().isVisible()
-  // 新创建node时会触发selectNewNode事件
-  // 这个触发是符合逻辑的, 因为创建后的node的确是new-node
-  // 创建后会自动选择, 自然触发selectNewNode是符合逻辑的
-  await page.getByText('触发事件selectNewNode').first().isVisible()
+  await page.getByText('触发事件 operation').first().isVisible()
+  // 新创建 node 时会触发 selectNewNode 事件
+  // 这个触发是符合逻辑的，因为创建后的 node 的确是 new-node
+  // 创建后会自动选择，自然触发 selectNewNode 是符合逻辑的
+  await page.getByText('触发事件 selectNewNode').first().isVisible()
 })
-test('测试select-node, select-nodes, select-new-node事件', async ({ page }) => {
+test('测试 select-node, select-nodes, select-new-node 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
   await page.locator('me-tpc').filter({ hasText: '算法 第四版' }).click()
   await page.locator('.map-canvas').press('Tab')
   await page.locator('me-tpc').filter({ hasText: '大话数据结构' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'Javascript权威指南' }).click()
+  await page.locator('me-tpc').filter({ hasText: 'Javascript 权威指南' }).click()
   await page
     .locator('me-tpc')
     .filter({ hasText: 'new node' })
@@ -32,8 +32,8 @@ test('测试select-node, select-nodes, select-new-node事件', async ({ page })
     .click({
       modifiers: ['Control']
     })
-  await page.getByText('触发事件selectNode').first().isVisible()
-  await page.getByAltText('触发事件selectNodes').isVisible()
+  await page.getByText('触发事件 selectNode').first().isVisible()
+  await page.getByAltText('触发事件 selectNodes').isVisible()
 })
 test('测试 unselect-node,unselect-nodes', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
diff --git a/examples/sites/demos/pc/app/mind-map/event.vue b/examples/sites/demos/pc/app/mind-map/event.vue
index 484765e078..4b2a926ef1 100644
--- a/examples/sites/demos/pc/app/mind-map/event.vue
+++ b/examples/sites/demos/pc/app/mind-map/event.vue
@@ -40,7 +40,7 @@ export default {
               id: 'c9ee9a4e8f3f83c5'
             },
             {
-              topic: 'Javascript权威指南',
+              topic: 'Javascript 权威指南',
               id: 'c9ee9b8e87958282'
             },
             {
diff --git a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
index c5c6a4a216..a15c820251 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
@@ -25,7 +25,7 @@ const exampleData = ref({
         id: 'c9ee9a4e8f3f83c5'
       },
       {
-        topic: 'Javascript权威指南',
+        topic: 'Javascript 权威指南',
         id: 'c9ee9b8e87958282'
       },
       {
@@ -57,7 +57,7 @@ const onCreate = (instance) => {
 }
 const exportData = () => {
   if (render.value) {
-    TinyModal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+    TinyModal.message({ message: '数据已经输出于控制台，请打开控制台查看', status: 'info' })
 
     console.log(render.value.getData())
   }
diff --git a/examples/sites/demos/pc/app/mind-map/export-data.vue b/examples/sites/demos/pc/app/mind-map/export-data.vue
index bbbcdae12c..b2fb4041fa 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data.vue
@@ -33,7 +33,7 @@ export default {
               id: 'c9ee9a4e8f3f83c5'
             },
             {
-              topic: 'Javascript权威指南',
+              topic: 'Javascript 权威指南',
               id: 'c9ee9b8e87958282'
             },
             {
@@ -68,7 +68,7 @@ export default {
     },
     exportData() {
       if (this.render) {
-        TinyModal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+        TinyModal.message({ message: '数据已经输出于控制台，请打开控制台查看', status: 'info' })
 
         console.log(this.render.getData())
       }
diff --git a/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
index 4bdea8fa33..c5fa2c5617 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
@@ -17,8 +17,8 @@
     <div class="content">
       <tiny-modal v-model="show1" title="基本提示框" message="窗口内容1" show-footer> </tiny-modal>
       <tiny-modal v-model="show2" title="基本提示框" message="窗口内容2" status="success" show-footer> </tiny-modal>
-      <tiny-button @click="show1 = true"> 打开弹窗1 </tiny-button>
-      <tiny-button @click="show2 = true"> 打开弹窗2 </tiny-button>
+      <tiny-button @click="show1 = true"> 打开弹窗 1 </tiny-button>
+      <tiny-button @click="show2 = true"> 打开弹窗 2 </tiny-button>
     </div>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
index 6a35952a95..602519fe59 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
@@ -21,13 +21,13 @@ test('基本用法', async ({ page }) => {
   await page.getByRole('button', { name: '消息提示' }).click()
   await expect(content.nth(3)).toHaveText(/简单的消息/)
 
-  // 打开弹窗1
-  await page.getByRole('button', { name: '打开弹窗1' }).click()
+  // 打开弹窗 1
+  await page.getByRole('button', { name: '打开弹窗 1' }).click()
   await expect(content.nth(1)).toHaveText(/窗口内容1/)
   await page.getByRole('button', { name: '确定' }).click()
 
-  // 打开弹窗2
-  await page.getByRole('button', { name: '打开弹窗2' }).click()
+  // 打开弹窗 2
+  await page.getByRole('button', { name: '打开弹窗 2' }).click()
   await expect(content.nth(2)).toHaveText(/窗口内容2/)
   await page.getByRole('button', { name: '确定' }).click()
 })
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.vue b/examples/sites/demos/pc/app/modal/basic-usage.vue
index 284b140a03..de3f057578 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.vue
+++ b/examples/sites/demos/pc/app/modal/basic-usage.vue
@@ -17,8 +17,8 @@
     <div class="content">
       <tiny-modal v-model="show1" title="基本提示框" message="窗口内容1" show-footer> </tiny-modal>
       <tiny-modal v-model="show2" title="基本提示框" message="窗口内容2" status="success" show-footer> </tiny-modal>
-      <tiny-button @click="show1 = true"> 打开弹窗1 </tiny-button>
-      <tiny-button @click="show2 = true"> 打开弹窗2 </tiny-button>
+      <tiny-button @click="show1 = true"> 打开弹窗 1 </tiny-button>
+      <tiny-button @click="show2 = true"> 打开弹窗 2 </tiny-button>
     </div>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/modal/message-close-composition-api.vue b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
index 355808464a..d52141a74a 100644
--- a/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
@@ -12,7 +12,7 @@ import { Button as TinyButton, Modal } from '@opentiny/vue'
 function btnClick() {
   Modal.message({
     status: 'info',
-    message: '自定义消息的内容可关闭,5s 后得自动关闭',
+    message: '自定义消息的内容可关闭，5s 后得自动关闭',
     messageClosable: true,
     duration: 5000
   })
diff --git a/examples/sites/demos/pc/app/modal/message-close.vue b/examples/sites/demos/pc/app/modal/message-close.vue
index a61177fb65..60137001b5 100644
--- a/examples/sites/demos/pc/app/modal/message-close.vue
+++ b/examples/sites/demos/pc/app/modal/message-close.vue
@@ -17,7 +17,7 @@ export default {
     btnClick() {
       Modal.message({
         status: 'info',
-        message: '自定义消息的内容可关闭,5s 后得自动关闭',
+        message: '自定义消息的内容可关闭，5s 后得自动关闭',
         messageClosable: true,
         duration: 5000
       })
diff --git a/examples/sites/demos/pc/app/modal/message-top-composition-api.vue b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
index 886afceb60..6d4a70958f 100644
--- a/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="content">
-      <tiny-button @click="btnClick">消息距离顶部500px</tiny-button>
+      <tiny-button @click="btnClick">消息距离顶部 500px</tiny-button>
     </div>
   </div>
 </template>
@@ -12,7 +12,7 @@ import { Button as TinyButton, Modal } from '@opentiny/vue'
 function btnClick() {
   Modal.message({
     status: 'info',
-    message: '自定义消息的内容距离顶部500px',
+    message: '自定义消息的内容距离顶部 500px',
     top: 500
   })
 }
diff --git a/examples/sites/demos/pc/app/modal/message-top.spec.ts b/examples/sites/demos/pc/app/modal/message-top.spec.ts
index 58359e6586..b25287aa80 100644
--- a/examples/sites/demos/pc/app/modal/message-top.spec.ts
+++ b/examples/sites/demos/pc/app/modal/message-top.spec.ts
@@ -4,6 +4,6 @@ test('消息距离顶部位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#message-top')
   const content = page.locator('.type__message')
-  await page.getByRole('button', { name: '消息距离顶部500px' }).click()
+  await page.getByRole('button', { name: '消息距离顶部 500px' }).click()
   await expect(content).toHaveCSS('top', '500px')
 })
diff --git a/examples/sites/demos/pc/app/modal/message-top.vue b/examples/sites/demos/pc/app/modal/message-top.vue
index 3f614ef3be..fb34dc3674 100644
--- a/examples/sites/demos/pc/app/modal/message-top.vue
+++ b/examples/sites/demos/pc/app/modal/message-top.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="content">
-      <tiny-button @click="btnClick">消息距离顶部500px</tiny-button>
+      <tiny-button @click="btnClick">消息距离顶部 500px</tiny-button>
     </div>
   </div>
 </template>
@@ -17,7 +17,7 @@ export default {
     btnClick() {
       Modal.message({
         status: 'info',
-        message: '自定义消息的内容距离顶部500px',
+        message: '自定义消息的内容距离顶部 500px',
         top: 500
       })
     }
diff --git a/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
index 60ff5b3a40..37f45f271d 100644
--- a/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>需要为body添加滚动条之后，再验证锁定功能</h2>
+    <h2>需要为 body 添加滚动条之后，再验证锁定功能</h2>
     <div class="content">
       <tiny-button @click="addBodyScroll">添加滚动条</tiny-button>
       <tiny-button @click="removeBodyScroll">还原滚动条</tiny-button>
diff --git a/examples/sites/demos/pc/app/modal/modal-lock.vue b/examples/sites/demos/pc/app/modal/modal-lock.vue
index ac5e070fed..66954dd2cd 100644
--- a/examples/sites/demos/pc/app/modal/modal-lock.vue
+++ b/examples/sites/demos/pc/app/modal/modal-lock.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>需要为body添加滚动条之后，再验证锁定功能</h2>
+    <h2>需要为 body 添加滚动条之后，再验证锁定功能</h2>
     <div class="content">
       <tiny-button @click="addBodyScroll">添加滚动条</tiny-button>
       <tiny-button @click="removeBodyScroll">还原滚动条</tiny-button>
diff --git a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
index 5452f0fc3a..0a5eb13e4f 100644
--- a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
@@ -2,11 +2,11 @@
   <div>
     <h2>函数式调用</h2>
     <div class="content">
-      <tiny-button @click="btnClick">弹窗esc关闭</tiny-button>
+      <tiny-button @click="btnClick">弹窗 esc 关闭</tiny-button>
     </div>
     <h2>标签式调用</h2>
     <div class="content">
-      <tiny-button @click="openModal">弹窗esc关闭,保留表单数据</tiny-button>
+      <tiny-button @click="openModal">弹窗 esc 关闭，保留表单数据</tiny-button>
       <tiny-modal
         v-model="show"
         type="confirm"
diff --git a/examples/sites/demos/pc/app/modal/modal-other.spec.ts b/examples/sites/demos/pc/app/modal/modal-other.spec.ts
index 27b6af5feb..469b8402e1 100644
--- a/examples/sites/demos/pc/app/modal/modal-other.spec.ts
+++ b/examples/sites/demos/pc/app/modal/modal-other.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('modal#modal-other')
-  await page.getByRole('button', { name: '弹窗esc关闭' }).first().click()
+  await page.getByRole('button', { name: '弹窗 esc 关闭' }).first().click()
   await page.locator('body').press('Escape')
-  await page.getByRole('button', { name: '弹窗esc关闭,保留表单数据' }).click()
+  await page.getByRole('button', { name: '弹窗 esc 关闭，保留表单数据' }).click()
   await page.locator('body').press('Escape')
 })
diff --git a/examples/sites/demos/pc/app/modal/modal-other.vue b/examples/sites/demos/pc/app/modal/modal-other.vue
index e80a67c205..915a0bf574 100644
--- a/examples/sites/demos/pc/app/modal/modal-other.vue
+++ b/examples/sites/demos/pc/app/modal/modal-other.vue
@@ -2,11 +2,11 @@
   <div>
     <h2>函数式调用</h2>
     <div class="content">
-      <tiny-button @click="btnClick">弹窗esc关闭</tiny-button>
+      <tiny-button @click="btnClick">弹窗 esc 关闭</tiny-button>
     </div>
     <h2>标签式调用</h2>
     <div class="content">
-      <tiny-button @click="openModal">弹窗esc关闭,保留表单数据</tiny-button>
+      <tiny-button @click="openModal">弹窗 esc 关闭，保留表单数据</tiny-button>
       <tiny-modal
         v-model="show"
         type="confirm"
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js
index 13c639dcd4..1f0673b0f3 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.js
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.js
@@ -10,17 +10,17 @@ export default {
       },
       desc: {
         'zh-CN': `
-          <code>Modal</code> 组件有2种调用方法：<code>函数式调用</code>和<code>标签式调用</code>。 <br>
+          <code>Modal</code> 组件有 2 种调用方法：<code>函数式调用</code>和<code>标签式调用</code>。 <br>
           <div class="tip custom-block">
             <p class="custom-block-title"> 函数式调用 </p>
             通过调用<code>Modal</code>对象下的 <code>alert</code>、<code>confirm</code>、<code>message</code>方法调用弹窗组件。 <br>
             函数入参：支持<code>(message:string, title:string, options: Object)</code> 或  <code>(options: Object) </code>两种形式。
-                     其中 <code>options</code> 对象支持<code>Modal</code> 组件的部分属性值,比如 <code>message, title, status</code> 等。 <br>
+                     其中 <code>options</code> 对象支持<code>Modal</code> 组件的部分属性值，比如 <code>message, title, status</code> 等。 <br>
             函数返回：返回值为一个<code>Promise</code>对象，其中属性<code>vm</code>可用来关闭当前模态框<br>
           </div>
           <div class="tip custom-block">
             <p class="custom-block-title"> 标签式调用 </p>
-            <code>Modal</code> 对象自身也是一个标准的Vue 组件，通过<code>modelValue</code> 属性控制弹窗的显示和隐藏。
+            <code>Modal</code> 对象自身也是一个标准的 Vue 组件，通过<code>modelValue</code> 属性控制弹窗的显示和隐藏。
           </div>
           <div class="warning custom-block">
             <p class="custom-block-title"> 特别提示： </p>
@@ -137,8 +137,8 @@ export default {
       desc: {
         'zh-CN': `
           通过<code>resize</code>属性，设置是否允许拖动边框调整窗口大小，并且右上角显示切换最大化的按钮。<br>
-          当 <code>resize</code>属性设置为<code>true</code>后，通过 <code>min-height</code>属性设置拖拽后窗口的最小高度,默认值为 200.<br>
-          <code>min-width</code>属性设置拖拽后窗口的最小宽度,默认值为 340。<br>
+          当 <code>resize</code>属性设置为<code>true</code>后，通过 <code>min-height</code>属性设置拖拽后窗口的最小高度，默认值为 200.<br>
+          <code>min-width</code>属性设置拖拽后窗口的最小宽度，默认值为 340。<br>
         `,
         'en-US': `
           With the <code>resize</code> property, set whether to allow dragging the border to resize the window, and the upper right corner shows a button to maximize the switch. <br>
@@ -156,8 +156,8 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>mask</code>属性,设置是否显示遮罩层。默认值为<code>true</code>  <br>
-          通过<code>mask-closable</code>属性,设置是否允许点击遮罩层关闭窗口。默认值为<code>false</code><br>
+          通过<code>mask</code>属性，设置是否显示遮罩层。默认值为<code>true</code>  <br>
+          通过<code>mask-closable</code>属性，设置是否允许点击遮罩层关闭窗口。默认值为<code>false</code><br>
         `,
         'en-US': `
           The <code>mask</code> property can be used to set whether the mask layer is displayed. The default value is <code>true</code> <br>
@@ -174,8 +174,8 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>lock-scroll</code>属性,设置是否锁住滚动条，不允许页面滚动。默认值为<code>false</code><br>
-          通过<code>lock-view</code>属性,设置是否锁住页面，不允许窗口之外的任何操作。默认值为<code>true</code><br>
+          通过<code>lock-scroll</code>属性，设置是否锁住滚动条，不允许页面滚动。默认值为<code>false</code><br>
+          通过<code>lock-view</code>属性，设置是否锁住页面，不允许窗口之外的任何操作。默认值为<code>true</code><br>
           <div class="tip custom-block">
             <code>锁住滚动条</code> 是指锁定<code>body</code>元素上的滚动条，仅当<code>body</code>有滚动条时，才有效果。<br>
             <code>锁住页面</code> 是指鼠标不能操作蒙层下面的元素。<br>
@@ -203,7 +203,7 @@ export default {
         'zh-CN': `
           通过<code>esc-closable</code>属性设置是否允许按 Esc 键关闭窗口。默认值为<code>false</code><br>
           通过<code>z-index</code>属性设置自定义堆叠顺序。<br>
-          通过<code>is-form-reset</code>属性，设置关闭弹窗后，是否重置数据。 默认值为<code>true</code>,即关闭弹窗后重置数据。<br>
+          通过<code>is-form-reset</code>属性，设置关闭弹窗后，是否重置数据。默认值为<code>true</code>,即关闭弹窗后重置数据。<br>
         `,
         'en-US': ` 
           The <code>esc-closable</code> property sets whether to allow the Esc key to close the window. The default value is <code>false</code><br>
@@ -255,7 +255,7 @@ export default {
       },
       desc: {
         'zh-CN': `
-          弹窗模式具有 <code> #default </code>,<code> #footer </code>插槽，标签式时，使用标准的Vue插槽语法即可。<br /> 
+          弹窗模式具有 <code> #default </code>,<code> #footer </code>插槽，标签式时，使用标准的 Vue 插槽语法即可。<br /> 
           在函数式使用时，通过<code>slots</code>属性，传入相应的插槽。<code> #footer </code>插槽的作用域上下文变量有： <code> {$modal, beforeClose,confirm,cancel} </code> 可使用。 <br /> 
           <div class="tip custom-block">
             函数式传入插槽时，由于<code>Modal</code>组件是直接挂载到<code>body</code>上，不是在<code>Demo</code>组件内部渲染的，所以<code>jsx</code>引用组件时，要使用引用组件的变量，而不能使用<code>Demo</code>中注册的组件名。详见示例代码
@@ -285,7 +285,7 @@ export default {
       desc: {
         'zh-CN': `
           通过<code>message-closable</code>属性设置消息可手动关闭。默认值为<code>false</code><br>
-          通过<code>duration</code>属性设置自动关闭的延迟时间,单位为毫秒。默认值为<code>3000 ms</code><br>
+          通过<code>duration</code>属性设置自动关闭的延迟时间，单位为毫秒。默认值为<code>3000 ms</code><br>
         `,
         'en-US': `
           Messages can be manually closed by setting the <code>message-closable</code> property. The default value is <code>false</code><br>
@@ -301,7 +301,7 @@ export default {
         'en-US': 'Position from top'
       },
       desc: {
-        'zh-CN': '通过<code>top</code>属性设置消息距离顶部的位置,单位为px',
+        'zh-CN': '通过<code>top</code>属性设置消息距离顶部的位置，单位为 px',
         'en-US': `Use the <code>top</code> property to set the distance from the top of the message in units of px. `
       },
       codeFiles: ['message-top.vue']
diff --git a/examples/sites/demos/pc/app/nav-menu/allow-full-url.spec.ts b/examples/sites/demos/pc/app/nav-menu/allow-full-url.spec.ts
index 42984ac9ea..59d792dd53 100644
--- a/examples/sites/demos/pc/app/nav-menu/allow-full-url.spec.ts
+++ b/examples/sites/demos/pc/app/nav-menu/allow-full-url.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('支持完整URL', async ({ page }) => {
+test('支持完整 URL', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#allow-full-url')
   const preview = page.locator('#allow-full-url')
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
index 8749220840..63cd69d604 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
@@ -310,7 +310,7 @@ const TinyIconTotal = iconTotal()
 
 function handleSkip({ url }) {
   TinyModal.message({
-    message: 'prevent 事件，当前URL：' + url,
+    message: 'prevent 事件，当前 URL：' + url,
     status: 'info'
   })
   return false
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
index f7c76d3886..ec2744e3c4 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
@@ -20,7 +20,7 @@ export default {
   methods: {
     handleSkip({ url }) {
       TinyModal.message({
-        message: 'prevent 事件，当前URL：' + url,
+        message: 'prevent 事件，当前 URL：' + url,
         status: 'info'
       })
       return false
diff --git a/examples/sites/demos/pc/app/nav-menu/parent-key.spec.ts b/examples/sites/demos/pc/app/nav-menu/parent-key.spec.ts
index 7d5145f2f9..b1e9984d0d 100644
--- a/examples/sites/demos/pc/app/nav-menu/parent-key.spec.ts
+++ b/examples/sites/demos/pc/app/nav-menu/parent-key.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('支持完整URL', async ({ page }) => {
+test('支持完整 URL', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#parent-key')
   const preview = page.locator('#parent-key')
diff --git a/examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js b/examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js
index c633fe040c..0be49acb4a 100644
--- a/examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js
+++ b/examples/sites/demos/pc/app/nav-menu/webdoc/nav-menu.js
@@ -22,7 +22,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '当一级菜单内容过多溢出时，通过 <code>overflow</code> 配置显示方式，共有 <code>auto</code>、<code>retract</code>、<code>fixed</code>、<code>hidden</code> 4种方式，默认为 <code>auto</code>。\n          <div class="tip custom-block"><p class="custom-block-title">overflow 选项说明</p>\n<p>\n          auto：菜单栏右侧显示 <code>更多</code> 菜单，鼠标悬停该菜单时，将显示剩余未展示的菜单；<br/>\n          fixed：菜单栏左侧显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>\n          retract：菜单栏不显示任何菜单，只显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>\n          hidden：剩余未展示的菜单隐藏不显示。</p></div>',
+          '当一级菜单内容过多溢出时，通过 <code>overflow</code> 配置显示方式，共有 <code>auto</code>、<code>retract</code>、<code>fixed</code>、<code>hidden</code> 4 种方式，默认为 <code>auto</code>。\n          <div class="tip custom-block"><p class="custom-block-title">overflow 选项说明</p>\n<p>\n          auto：菜单栏右侧显示 <code>更多</code> 菜单，鼠标悬停该菜单时，将显示剩余未展示的菜单；<br/>\n          fixed：菜单栏左侧显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>\n          retract：菜单栏不显示任何菜单，只显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>\n          hidden：剩余未展示的菜单隐藏不显示。</p></div>',
         'en-US':
           'When there is too much content in the first level menu that overflows, configure the display mode through<code>overflow</code>. There are four modes:<code>auto</code>,<code>retract</code>,<code>fixed</code>, and<code>hidden</code>. The default is<code>auto</code>.\n        <div class="tip custom-block"><p class="custom-block-title">Overview Options Description</p>\n<p>\n        auto: The<code>More</code>menu is displayed on the right side of the menu bar. When the mouse hovers over this menu, the remaining undisclosed menus will be displayed< br/>\n        fixed: The<code>sandwich fold/expand</code>icon is displayed on the left side of the menu bar. When the mouse hovers over this icon, all menus will be displayed< br/>\n        retract: The menu bar does not display any menus, only displays the<code>sandwich fold/expand</code>icon. When the mouse hovers over this icon, all menus will be displayed< br/>\n        hidden: The remaining undisclosed menus are hidden and not displayed.</p> </div>'
       },
@@ -43,11 +43,11 @@ export default {
     {
       demoId: 'slot-logo',
       name: {
-        'zh-CN': '定义Logo',
+        'zh-CN': '定义 Logo',
         'en-US': 'Custom Logo'
       },
       desc: {
-        'zh-CN': '通过 <code>logo</code> 插槽自定义 Logo 。',
+        'zh-CN': '通过 <code>logo</code> 插槽自定义 Logo。',
         'en-US': 'Customize the logo through the<code>logo</code>slot.'
       },
       codeFiles: ['slot-logo.vue']
@@ -121,7 +121,7 @@ export default {
     {
       demoId: 'allow-full-url',
       name: {
-        'zh-CN': '支持完整URL',
+        'zh-CN': '支持完整 URL',
         'en-US': 'Support complete URL'
       },
       desc: {
diff --git a/examples/sites/demos/pc/app/notify/duration-composition-api.vue b/examples/sites/demos/pc/app/notify/duration-composition-api.vue
index f4d4a52340..58d4deeac8 100644
--- a/examples/sites/demos/pc/app/notify/duration-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/duration-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
-    <tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
+    <tiny-button @click="successClick" :reset-time="0">500ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="errorClick" :reset-time="0">5000ms 后自动关闭提示框</tiny-button>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/notify/duration.spec.ts b/examples/sites/demos/pc/app/notify/duration.spec.ts
index cb7d1be5f6..82e7d9e175 100644
--- a/examples/sites/demos/pc/app/notify/duration.spec.ts
+++ b/examples/sites/demos/pc/app/notify/duration.spec.ts
@@ -4,12 +4,12 @@ test('自动关闭延时', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('notify#duration')
 
-  await page.getByRole('button', { name: '500ms后自动关闭提示框' }).click()
+  await page.getByRole('button', { name: '500ms 后自动关闭提示框' }).click()
   await page.waitForSelector('.tiny-notify')
   await page.waitForTimeout(500)
   await page.waitForSelector('.tiny-notify', { state: 'hidden' })
 
-  await page.getByRole('button', { name: '5000ms后自动关闭提示框' }).click()
+  await page.getByRole('button', { name: '5000ms 后自动关闭提示框' }).click()
   await page.waitForSelector('.tiny-notify')
   await page.waitForTimeout(5000)
   await page.waitForSelector('.tiny-notify', { state: 'hidden' })
diff --git a/examples/sites/demos/pc/app/notify/duration.vue b/examples/sites/demos/pc/app/notify/duration.vue
index 02744edeec..a072fd1fec 100644
--- a/examples/sites/demos/pc/app/notify/duration.vue
+++ b/examples/sites/demos/pc/app/notify/duration.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
-    <tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
+    <tiny-button @click="successClick" :reset-time="0">500ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="errorClick" :reset-time="0">5000ms 后自动关闭提示框</tiny-button>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
index fdc45a72e0..2bebc783a0 100644
--- a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
@@ -14,7 +14,7 @@ function baseClick() {
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     beforeClose: () => {
-      TinyModal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
+      TinyModal.message({ message: '在通知框关闭前触发的事件，返回 false 可阻止关闭通知框', status: 'info' })
       return false
     },
     position: 'top-right'
diff --git a/examples/sites/demos/pc/app/notify/notify-events.spec.ts b/examples/sites/demos/pc/app/notify/notify-events.spec.ts
index 2183697f88..c7779e2878 100644
--- a/examples/sites/demos/pc/app/notify/notify-events.spec.ts
+++ b/examples/sites/demos/pc/app/notify/notify-events.spec.ts
@@ -5,7 +5,7 @@ test('关闭通知框前触发的事件', async ({ page }) => {
   await page.goto('notify#notify-events')
   await page.getByRole('button', { name: '关闭前的事件' }).click()
   await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
-  const cloEveNT = await page.locator('.tiny-modal__box').filter({ hasText: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框' })
+  const cloEveNT = await page.locator('.tiny-modal__box').filter({ hasText: '在通知框关闭前触发的事件，返回 false 可阻止关闭通知框' })
   await expect(cloEveNT).toBeVisible()
 })
 
diff --git a/examples/sites/demos/pc/app/notify/notify-events.vue b/examples/sites/demos/pc/app/notify/notify-events.vue
index b4eb0cb1af..92d5976e0b 100644
--- a/examples/sites/demos/pc/app/notify/notify-events.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events.vue
@@ -19,7 +19,7 @@ export default {
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         beforeClose: () => {
-          TinyModal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
+          TinyModal.message({ message: '在通知框关闭前触发的事件，返回 false 可阻止关闭通知框', status: 'info' })
           return false
         },
         position: 'top-right'
diff --git a/examples/sites/demos/pc/app/notify/webdoc/notify.js b/examples/sites/demos/pc/app/notify/webdoc/notify.js
index 214f1123ba..0c2b0202c6 100644
--- a/examples/sites/demos/pc/app/notify/webdoc/notify.js
+++ b/examples/sites/demos/pc/app/notify/webdoc/notify.js
@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>Notify</code>函数,在页面上弹出通知框组件。<br>
+          通过<code>Notify</code>函数，在页面上弹出通知框组件。<br>
           通过 <code>title</code>  属性设置通知框标题。<br>
           通过 <code>message</code>  属性设置通知框的内容。<br>
           <div class="tip custom-block">
@@ -38,7 +38,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>\n',
+          '<p>可通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：info。</p>\n',
         'en-US':
           '<p>You can set different types by <code>type</code>. The options are success, warning, info, and error. The default value is info. </p>\n'
       },
@@ -52,7 +52,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>duration</code>  属性设置自动关闭的延迟时间， 默认情况， <code>success  info </code> 延时5秒 <code> warning  error </code> 延时10秒自动关闭。',
+          '通过 <code>duration</code>  属性设置自动关闭的延迟时间，默认情况， <code>success  info </code> 延时 5 秒 <code> warning  error </code> 延时 10 秒自动关闭。',
         'en-US':
           'Use the <code>duration</code> property to set the automatic shutdown delay. By default, <code>success info </code> delays the shutdown by 5 seconds. <code> warning error </code> delays the shutdown by 10 seconds.'
       },
@@ -65,7 +65,7 @@ export default {
         'en-US': 'Display position'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>position</code>  属性设置通知框显示位置，默认值：bottom-right 。</p>\n',
+        'zh-CN': '<p>可通过 <code>position</code>  属性设置通知框显示位置，默认值：bottom-right。</p>\n',
         'en-US':
           '<p>You can set the position of the notification box through the <code>position</code> attribute. The default value is bottom-right. </p>\n'
       },
@@ -91,7 +91,7 @@ export default {
         'en-US': 'The type icon is not displayed.'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>showIcon</code>  属性设置通知框是否显示类型图标，默认值：true 。</p>\n',
+        'zh-CN': '<p>可通过 <code>showIcon</code>  属性设置通知框是否显示类型图标，默认值：true。</p>\n',
         'en-US':
           '<p>You can use the <code>showIcon</code> attribute to set whether to display the type icon in the notification box. The default value is true. </p>\n'
       },
@@ -104,7 +104,7 @@ export default {
         'en-US': 'Custom Close Icon'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>closeIcon</code>  属性设置通知框关闭图标，默认值：IconClose 。</p>\n',
+        'zh-CN': '<p>可通过 <code>closeIcon</code>  属性设置通知框关闭图标，默认值：IconClose。</p>\n',
         'en-US':
           '<p>You can set the icon for closing the notification box through the <code>closeIcon</code> attribute. The default value is IconClose. </p>\n'
       },
@@ -117,7 +117,7 @@ export default {
         'en-US': 'Custom type icon'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>statusIcon</code>  属性设置通知框类型图标，默认值：IconInfoSolid 。</p>\n',
+        'zh-CN': '<p>可通过 <code>statusIcon</code>  属性设置通知框类型图标，默认值：IconInfoSolid。</p>\n',
         'en-US':
           '<p>You can set the notification box type icon through the <code>statusIcon</code> attribute. The default value is IconInfoSolid. </p>\n'
       },
@@ -157,7 +157,7 @@ export default {
         'zh-CN': `
           通过<code>Notify</code>函数弹出通知后，会返回一个对应的<code>instance</code>对象，并保存在组件库的内部闭包变量中。<br>
           需要手动关闭通知时，可以调用 <code>instance.close()</code> 方法关闭该通知。<br>
-          在<code>Notify</code>函数中，还存在2个静态方法去关闭通知。<br>
+          在<code>Notify</code>函数中，还存在 2 个静态方法去关闭通知。<br>
           1、<code>Notify.close :(id, beforeClose)=>void </code>, 关闭指定的通知。其中<code>id</code>可通过<code>instance</code>对象获取。 <br>
           2、<code>Notify.closeAll :()=>void </code>, 关闭所有通知。<br>
         `,
diff --git a/examples/sites/demos/pc/app/numeric/blur-event.spec.ts b/examples/sites/demos/pc/app/numeric/blur-event.spec.ts
index d1665df830..eb1bdf00b6 100644
--- a/examples/sites/demos/pc/app/numeric/blur-event.spec.ts
+++ b/examples/sites/demos/pc/app/numeric/blur-event.spec.ts
@@ -7,5 +7,5 @@ test('失焦事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   await numeric.focus()
   await numeric.blur()
-  await expect(page.getByText('blur事件')).toBeHidden()
+  await expect(page.getByText('blur 事件')).toBeHidden()
 })
diff --git a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
index bc78baf7e9..9c13f6f171 100644
--- a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>隐藏加减按钮:</p>
+    <p>隐藏加减按钮：</p>
     <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
-    <p>加减按钮全置于右侧:</p>
+    <p>加减按钮全置于右侧：</p>
     <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/numeric/controls.vue b/examples/sites/demos/pc/app/numeric/controls.vue
index 194439a08b..b9d0530d98 100644
--- a/examples/sites/demos/pc/app/numeric/controls.vue
+++ b/examples/sites/demos/pc/app/numeric/controls.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>隐藏加减按钮:</p>
+    <p>隐藏加减按钮：</p>
     <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
-    <p>加减按钮全置于右侧:</p>
+    <p>加减按钮全置于右侧：</p>
     <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts b/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts
index 4ec7560a01..754899d5ea 100644
--- a/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts
+++ b/examples/sites/demos/pc/app/numeric/numeric-size.spec.ts
@@ -4,21 +4,21 @@ test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#numeric-size')
 
-  // large尺寸
+  // large 尺寸
   const largeNumeric = page.locator('.tiny-numeric').first()
   await expect(largeNumeric).toHaveClass(/tiny-numeric--medium/)
   await largeNumeric.getByRole('spinbutton').fill('123')
   await largeNumeric.locator('.tiny-numeric__decrease').click()
   await largeNumeric.locator('.tiny-numeric__increase').click()
 
-  // small尺寸
+  // small 尺寸
   const smallNumeric = page.locator('.tiny-numeric').nth(2)
   await expect(smallNumeric).toHaveClass(/tiny-numeric--small/)
   await smallNumeric.getByRole('spinbutton').fill('111')
   await smallNumeric.locator('.tiny-numeric__decrease').click()
   await smallNumeric.locator('.tiny-numeric__increase').click()
 
-  // mini尺寸
+  // mini 尺寸
   const miniNumeric = page.locator('.tiny-numeric').nth(3)
   await expect(miniNumeric).toHaveClass(/tiny-numeric--mini/)
   await miniNumeric.getByRole('spinbutton').fill('100')
diff --git a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
index c139531422..ebcf2a0426 100644
--- a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
-  <p>数值精度:</p>
+  <p>数值精度：</p>
   <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
-  <p>数值格式:</p>
+  <p>数值格式：</p>
   <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
 </template>
 
@@ -13,12 +13,12 @@ const value = ref(1)
 const precision = ref(2)
 const value1 = ref(123456879.445566)
 const format = reactive({
-  zeroize: true, // 是否保留多余的0字符
+  zeroize: true, // 是否保留多余的 0 字符
   fraction: 4, // 保留小数位数
   rounding: 0, // 舍入点
   prefix: '$', // 前置标识
   groupSize: 3, // 整数部分分组间隔，即第一个分组位数
-  secondaryGroupSize: 2, // 整数部分第二级分组间隔，不设置或为0时 自动取groupSize
+  secondaryGroupSize: 2, // 整数部分第二级分组间隔，不设置或为 0 时 自动取 groupSize
   groupSeparator: ',', // 整数部分分组分隔符
   decimalSeparator: '.', // 小数点符号
   fractionGroupSize: 0, // 小数部分分组间隔
diff --git a/examples/sites/demos/pc/app/numeric/precision.vue b/examples/sites/demos/pc/app/numeric/precision.vue
index 026b25ab1d..108b8f1b7a 100644
--- a/examples/sites/demos/pc/app/numeric/precision.vue
+++ b/examples/sites/demos/pc/app/numeric/precision.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <p>数值精度:</p>
+    <p>数值精度：</p>
     <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
-    <p>数值格式:</p>
+    <p>数值格式：</p>
     <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
   </div>
 </template>
@@ -20,12 +20,12 @@ export default {
       precision: 2,
       value1: 123456879.445566,
       format: {
-        zeroize: true, // 是否保留多余的0字符
+        zeroize: true, // 是否保留多余的 0 字符
         fraction: 4, // 保留小数位数
         rounding: 0, // 舍入点
         prefix: '$', // 前置标识
         groupSize: 3, // 整数部分分组间隔，即第一个分组位数
-        secondaryGroupSize: 2, // 整数部分第二级分组间隔，不设置或为0时 自动取groupSize
+        secondaryGroupSize: 2, // 整数部分第二级分组间隔，不设置或为 0 时 自动取 groupSize
         groupSeparator: ',', // 整数部分分组分隔符
         decimalSeparator: '.', // 小数点符号
         fractionGroupSize: 0, // 小数部分分组间隔
diff --git a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
index 2f78742bea..183a8da622 100644
--- a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
@@ -157,7 +157,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '可通过<code>@change</code>设置监听数值改变事件。当<code>change-compat</code>为false时，仅当加减按钮及直接输入数值时会触发<code>change</code>事件。',
+          '可通过<code>@change</code>设置监听数值改变事件。当<code>change-compat</code>为 false 时，仅当加减按钮及直接输入数值时会触发<code>change</code>事件。',
         'en-US':
           'The <code>@change</code> event is triggered when the value of the text box is changed. When the<code>change compat</code>is false, the <code>change</code> event will be triggered when only the add and subtract buttons and directly entering numerical values are used.</p>\n'
       },
@@ -216,7 +216,7 @@ export default {
     {
       demoId: 'filter-mode-change',
       name: {
-        'zh-CN': '过滤器模式change事件',
+        'zh-CN': '过滤器模式 change 事件',
         'en-US': 'Filter Mode'
       },
       desc: {
diff --git a/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
index d4b01f1045..f8995c8632 100644
--- a/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
@@ -29,28 +29,28 @@ function debounce(fn, delay = 50) {
 
 function handleCurrentChange(val) {
   TinyModal.message({
-    message: `current-change 事件，当前页: ${val}`,
+    message: `current-change 事件，当前页：${val}`,
     status: 'info'
   })
 }
 
 function handleSizeChange(val) {
   TinyModal.message({
-    message: `size-change 事件，每页条目数: ${val}`,
+    message: `size-change 事件，每页条目数：${val}`,
     status: 'info'
   })
 }
 
 function prevClick(val) {
   TinyModal.message({
-    message: `prev-click 事件，当前页: ${val}`,
+    message: `prev-click 事件，当前页：${val}`,
     status: 'info'
   })
 }
 
 function nextClick(val) {
   TinyModal.message({
-    message: `next-click 事件，当前页: ${val}`,
+    message: `next-click 事件，当前页：${val}`,
     status: 'info'
   })
 }
diff --git a/examples/sites/demos/pc/app/pager/pager-event.spec.ts b/examples/sites/demos/pc/app/pager/pager-event.spec.ts
index f073795f1f..2aea5a046b 100644
--- a/examples/sites/demos/pc/app/pager/pager-event.spec.ts
+++ b/examples/sites/demos/pc/app/pager/pager-event.spec.ts
@@ -10,7 +10,7 @@ test('事件', async ({ page }) => {
 
   // 当前所在页改变
   await pager.first().locator('.tiny-pager__pages li').last().click()
-  await expect(modalBox.getByText('current-change 事件，当前页: 10')).toBeVisible()
+  await expect(modalBox.getByText('current-change 事件，当前页：10')).toBeVisible()
 
   // 每页展示条目数改变
   const sizeChange = pager.nth(1).locator('.tiny-pager__sizes')
@@ -18,13 +18,13 @@ test('事件', async ({ page }) => {
 
   await sizeChange.click()
   await sizeSelect.nth(3).getByText('20').click()
-  await expect(modalBox.getByText('size-change 事件，每页条目数: 20')).toBeVisible()
+  await expect(modalBox.getByText('size-change 事件，每页条目数：20')).toBeVisible()
 
   // 上一页、下一页
   await pager.nth(2).locator('.tiny-pager__btn-next').click()
-  await expect(modalBox.getByText('next-click 事件，当前页: 2')).toBeVisible()
+  await expect(modalBox.getByText('next-click 事件，当前页：2')).toBeVisible()
   await pager.nth(2).locator('.tiny-pager__btn-prev').click()
-  await expect(modalBox.getByText('prev-click 事件，当前页: 1')).toBeVisible()
+  await expect(modalBox.getByText('prev-click 事件，当前页：1')).toBeVisible()
 
   // 每页条目数和当前页同时改变
   await pager.nth(3).locator('.tiny-pager__sizes').click()
diff --git a/examples/sites/demos/pc/app/pager/pager-event.vue b/examples/sites/demos/pc/app/pager/pager-event.vue
index 488e35b2f9..7e627d469a 100644
--- a/examples/sites/demos/pc/app/pager/pager-event.vue
+++ b/examples/sites/demos/pc/app/pager/pager-event.vue
@@ -34,25 +34,25 @@ export default {
   methods: {
     handleCurrentChange(val) {
       TinyModal.message({
-        message: `current-change 事件，当前页: ${val}`,
+        message: `current-change 事件，当前页：${val}`,
         status: 'info'
       })
     },
     handleSizeChange(val) {
       TinyModal.message({
-        message: `size-change 事件，每页条目数: ${val}`,
+        message: `size-change 事件，每页条目数：${val}`,
         status: 'info'
       })
     },
     prevClick(val) {
       TinyModal.message({
-        message: `prev-click 事件，当前页: ${val}`,
+        message: `prev-click 事件，当前页：${val}`,
         status: 'info'
       })
     },
     nextClick(val) {
       TinyModal.message({
-        message: `next-click 事件，当前页: ${val}`,
+        message: `next-click 事件，当前页：${val}`,
         status: 'info'
       })
     },
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
index 30c1aa55d3..0c7385a75e 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
@@ -48,7 +48,7 @@ const tableData = ref([])
 const mockData = ref([
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     userId: 421000103624183,
     area: '华东区',
     province: '福建省',
@@ -56,7 +56,7 @@ const mockData = ref([
     contact: '许生',
     telephone: '1234567890',
     address: '福州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 800,
     createdDate: '2014-04-30 00:56:00',
     boole: false,
@@ -65,7 +65,7 @@ const mockData = ref([
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     userId: 421000103624183,
     area: '华南区',
     province: '广东省',
@@ -73,7 +73,7 @@ const mockData = ref([
     contact: '朱生',
     telephone: '1234567890',
     address: '深圳福田区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 300,
     createdDate: '2016-07-08 12:36:22',
     boole: true,
@@ -82,7 +82,7 @@ const mockData = ref([
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     userId: 441047913162396,
     area: '华南区',
     province: '广东省',
@@ -90,7 +90,7 @@ const mockData = ref([
     contact: '秦生',
     telephone: '1234567890',
     address: '中山市',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 1300,
     createdDate: '2014-02-14 14:14:14',
     boole: false,
@@ -99,7 +99,7 @@ const mockData = ref([
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     userId: 702973890055088,
     area: '华东区',
     province: '福建省',
@@ -107,7 +107,7 @@ const mockData = ref([
     contact: '周生',
     telephone: '1234567890',
     address: '龙岩',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 360,
     createdDate: '2013-01-13 13:13:13',
     boole: true,
@@ -116,7 +116,7 @@ const mockData = ref([
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     userId: 702973890055088,
     area: '华南区',
     province: '广东省',
@@ -124,7 +124,7 @@ const mockData = ref([
     contact: '郑生',
     telephone: '1234567890',
     address: '韶关',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 810,
     createdDate: '2012-12-12 12:12:12',
     boole: true,
@@ -133,7 +133,7 @@ const mockData = ref([
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     userId: 441047913162396,
     area: '华中区',
     province: '湖北省',
@@ -141,7 +141,7 @@ const mockData = ref([
     contact: '陈生',
     telephone: '1234567890',
     address: '黄冈',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 800,
     createdDate: '2011-11-11 11:11:11',
     boole: true,
@@ -150,7 +150,7 @@ const mockData = ref([
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     userId: 421000103624183,
     area: '华中区',
     province: '湖北省',
@@ -159,7 +159,7 @@ const mockData = ref([
     telephone: '1234567890',
     address: '赤壁',
     introduction:
-      '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的80%以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
+      '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的 80% 以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
     employees: 400,
     createdDate: '2016-04-30 23:56:00',
     boole: false,
@@ -168,7 +168,7 @@ const mockData = ref([
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     userId: 421000103624183,
     address: '厦门岛内',
     area: '华东区',
@@ -178,14 +178,14 @@ const mockData = ref([
     contact: '李四',
     createdDate: '2016-06-03 13:53:25',
     employees: 540,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     province: '福建省',
     rate: 0.6,
     telephone: '1234567890'
   },
   {
     id: '9',
-    name: 'UJM有限责任公司',
+    name: 'UJM 有限责任公司',
     userId: 421000103624183,
     area: '华南区',
     province: '广西省',
@@ -193,7 +193,7 @@ const mockData = ref([
     contact: '段生',
     telephone: '1234567890',
     address: '南宁',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 750,
     createdDate: '2014-04-21 11:56:00',
     boole: true,
@@ -202,7 +202,7 @@ const mockData = ref([
   },
   {
     id: '10',
-    name: 'IKA有限责任公司',
+    name: 'IKA 有限责任公司',
     userId: 421000103624183,
     area: '华南区',
     province: '广西省',
@@ -210,7 +210,7 @@ const mockData = ref([
     contact: '谭生',
     telephone: '1234567890',
     address: '北海',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 400,
     createdDate: '2014-09-30 00:56:00',
     boole: false,
@@ -219,7 +219,7 @@ const mockData = ref([
   },
   {
     id: '11',
-    name: 'TIG管理YX公司',
+    name: 'TIG 管理 YX 公司',
     userId: 421000103624183,
     area: '华南区',
     province: '广西省',
@@ -227,7 +227,7 @@ const mockData = ref([
     contact: '陈生',
     telephone: '1234567890',
     address: '桂林',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 900,
     createdDate: '2014-11-30 00:56:00',
     boole: true,
@@ -236,7 +236,7 @@ const mockData = ref([
   },
   {
     id: '12',
-    name: 'GGT科技YX公司',
+    name: 'GGT 科技 YX 公司',
     userId: 441047913162396,
     area: '西南区',
     province: '云南省',
@@ -244,7 +244,7 @@ const mockData = ref([
     contact: '周生',
     telephone: '1234567890',
     address: '昆明',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 500,
     createdDate: '2014-03-20 02:50:00',
     boole: false,
@@ -253,7 +253,7 @@ const mockData = ref([
   },
   {
     id: '13',
-    name: 'YYSYX公司',
+    name: 'YYSYX 公司',
     userId: 441047913162396,
     area: '西南区',
     province: '云南省',
@@ -261,7 +261,7 @@ const mockData = ref([
     contact: '廖生',
     telephone: '1234567890',
     address: '西双版纳',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 985,
     createdDate: '2015-07-28 11:37:00',
     boole: true,
@@ -270,7 +270,7 @@ const mockData = ref([
   },
   {
     id: '14',
-    name: 'VBN有限责任公司',
+    name: 'VBN 有限责任公司',
     userId: 421000103624183,
     area: '西南区',
     province: '云南省',
@@ -278,7 +278,7 @@ const mockData = ref([
     contact: '欧生',
     telephone: '1234567890',
     address: '大理',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 598,
     createdDate: '2014-04-30 00:56:00',
     boole: false,
@@ -287,7 +287,7 @@ const mockData = ref([
   },
   {
     id: '15',
-    name: '深圳万众科技YX公司',
+    name: '深圳万众科技 YX 公司',
     userId: 441047913162396,
     area: '华中区',
     province: '湖北省',
@@ -295,7 +295,7 @@ const mockData = ref([
     contact: '阮生',
     telephone: '1234567890',
     address: '武汉',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 725,
     createdDate: '2014-04-30 00:56:00',
     boole: true,
@@ -304,7 +304,7 @@ const mockData = ref([
   },
   {
     id: '16',
-    name: '深圳云创信息技术YX公司',
+    name: '深圳云创信息技术 YX 公司',
     userId: 421000103624183,
     area: '华中区',
     province: '湖北省',
@@ -312,7 +312,7 @@ const mockData = ref([
     contact: '邓生',
     telephone: '1234567890',
     address: '十堰',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 632,
     createdDate: '2014-07-30 02:44:00',
     boole: true,
@@ -321,7 +321,7 @@ const mockData = ref([
   },
   {
     id: '17',
-    name: '深圳明乐餐饮管理YX公司',
+    name: '深圳明乐餐饮管理 YX 公司',
     userId: 441047913162396,
     area: '华中区',
     province: '湖北省',
@@ -329,7 +329,7 @@ const mockData = ref([
     contact: '罗生',
     telephone: '1234567890',
     address: '潜江',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 246,
     createdDate: '2013-04-30 00:56:00',
     boole: false,
@@ -338,7 +338,7 @@ const mockData = ref([
   },
   {
     id: '18',
-    name: '珠海忆兰居科技YX公司',
+    name: '珠海忆兰居科技 YX 公司',
     userId: 441047913162396,
     area: '华南区',
     province: '广东省',
@@ -346,7 +346,7 @@ const mockData = ref([
     contact: '黄生',
     telephone: '1234567890',
     address: '珠海香洲区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 592,
     createdDate: '2014-05-30 01:00:00',
     boole: false,
@@ -355,7 +355,7 @@ const mockData = ref([
   },
   {
     id: '19',
-    name: '珠海万家医疗科技YX公司',
+    name: '珠海万家医疗科技 YX 公司',
     userId: 441047913162396,
     area: '华南区',
     province: '广东省',
@@ -363,7 +363,7 @@ const mockData = ref([
     contact: '刘生',
     telephone: '1234567890',
     address: '广州天河区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 851,
     createdDate: '2014-04-29 08:56:00',
     boole: false,
@@ -372,7 +372,7 @@ const mockData = ref([
   },
   {
     id: '20',
-    name: '东莞亿聚礼品YX公司',
+    name: '东莞亿聚礼品 YX 公司',
     userId: 421000103624183,
     area: '华中区',
     province: '湖北省',
@@ -380,7 +380,7 @@ const mockData = ref([
     contact: '范生',
     telephone: '1234567890',
     address: '襄阳',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
     employees: 394,
     createdDate: '2014-04-28 10:56:00',
     boole: true,
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid.spec.ts b/examples/sites/demos/pc/app/pager/pager-in-grid.spec.ts
index 9986ce73bc..ada71ea970 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid.spec.ts
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid.spec.ts
@@ -10,7 +10,7 @@ test('测试表格分页', async ({ page }) => {
   const firstTableRow = demo.locator('.tiny-grid .tiny-grid-body__row').first()
 
   await next.click()
-  await expect(firstTableRow).toHaveText(/WSX科技YX公司/)
+  await expect(firstTableRow).toHaveText(/WSX 科技 YX 公司/)
   await next.click()
-  await expect(firstTableRow).toHaveText(/TIG管理YX公司/)
+  await expect(firstTableRow).toHaveText(/TIG 管理 YX 公司/)
 })
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid.vue b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
index ae9bbb46c8..9f4b707e97 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
@@ -55,7 +55,7 @@ export default {
       mockData: [
         {
           id: '1',
-          name: 'GFD科技YX公司',
+          name: 'GFD 科技 YX 公司',
           userId: 421000103624183,
           area: '华东区',
           province: '福建省',
@@ -63,7 +63,7 @@ export default {
           contact: '许生',
           telephone: '1234567890',
           address: '福州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 800,
           createdDate: '2014-04-30 00:56:00',
           boole: false,
@@ -72,7 +72,7 @@ export default {
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'WWW 科技 YX 公司',
           userId: 421000103624183,
           area: '华南区',
           province: '广东省',
@@ -80,7 +80,7 @@ export default {
           contact: '朱生',
           telephone: '1234567890',
           address: '深圳福田区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 300,
           createdDate: '2016-07-08 12:36:22',
           boole: true,
@@ -89,7 +89,7 @@ export default {
         },
         {
           id: '3',
-          name: 'RFV有限责任公司',
+          name: 'RFV 有限责任公司',
           userId: 441047913162396,
           area: '华南区',
           province: '广东省',
@@ -97,7 +97,7 @@ export default {
           contact: '秦生',
           telephone: '1234567890',
           address: '中山市',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 1300,
           createdDate: '2014-02-14 14:14:14',
           boole: false,
@@ -106,7 +106,7 @@ export default {
         },
         {
           id: '4',
-          name: 'TGB科技YX公司',
+          name: 'TGB 科技 YX 公司',
           userId: 702973890055088,
           area: '华东区',
           province: '福建省',
@@ -114,7 +114,7 @@ export default {
           contact: '周生',
           telephone: '1234567890',
           address: '龙岩',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 360,
           createdDate: '2013-01-13 13:13:13',
           boole: true,
@@ -123,7 +123,7 @@ export default {
         },
         {
           id: '5',
-          name: 'YHN科技YX公司',
+          name: 'YHN 科技 YX 公司',
           userId: 702973890055088,
           area: '华南区',
           province: '广东省',
@@ -131,7 +131,7 @@ export default {
           contact: '郑生',
           telephone: '1234567890',
           address: '韶关',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 810,
           createdDate: '2012-12-12 12:12:12',
           boole: true,
@@ -140,7 +140,7 @@ export default {
         },
         {
           id: '6',
-          name: 'WSX科技YX公司',
+          name: 'WSX 科技 YX 公司',
           userId: 441047913162396,
           area: '华中区',
           province: '湖北省',
@@ -148,7 +148,7 @@ export default {
           contact: '陈生',
           telephone: '1234567890',
           address: '黄冈',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 800,
           createdDate: '2011-11-11 11:11:11',
           boole: true,
@@ -157,7 +157,7 @@ export default {
         },
         {
           id: '7',
-          name: 'KBG物业YX公司',
+          name: 'KBG 物业 YX 公司',
           userId: 421000103624183,
           area: '华中区',
           province: '湖北省',
@@ -166,7 +166,7 @@ export default {
           telephone: '1234567890',
           address: '赤壁',
           introduction:
-            '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的80%以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
+            '公司治理结构严格按现代企业制度设计，管理机构设置合理，制度完善，各部门分工明确、协作顺畅。拥有中、高级职称或大学本科以上学历的人员占职工总人数的 80% 以上，具有雄厚的资金实力和高度专业化的项目开发管理能力，是一支具有强烈的社会责任感和引领房地产业科技创新的地产新军。',
           employees: 400,
           createdDate: '2016-04-30 23:56:00',
           boole: false,
@@ -175,7 +175,7 @@ export default {
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术 YX 公司',
           userId: 421000103624183,
           address: '厦门岛内',
           area: '华东区',
@@ -185,14 +185,14 @@ export default {
           contact: '李四',
           createdDate: '2016-06-03 13:53:25',
           employees: 540,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           province: '福建省',
           rate: 0.6,
           telephone: '1234567890'
         },
         {
           id: '9',
-          name: 'UJM有限责任公司',
+          name: 'UJM 有限责任公司',
           userId: 421000103624183,
           area: '华南区',
           province: '广西省',
@@ -200,7 +200,7 @@ export default {
           contact: '段生',
           telephone: '1234567890',
           address: '南宁',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 750,
           createdDate: '2014-04-21 11:56:00',
           boole: true,
@@ -209,7 +209,7 @@ export default {
         },
         {
           id: '10',
-          name: 'IKA有限责任公司',
+          name: 'IKA 有限责任公司',
           userId: 421000103624183,
           area: '华南区',
           province: '广西省',
@@ -217,7 +217,7 @@ export default {
           contact: '谭生',
           telephone: '1234567890',
           address: '北海',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 400,
           createdDate: '2014-09-30 00:56:00',
           boole: false,
@@ -226,7 +226,7 @@ export default {
         },
         {
           id: '11',
-          name: 'TIG管理YX公司',
+          name: 'TIG 管理 YX 公司',
           userId: 421000103624183,
           area: '华南区',
           province: '广西省',
@@ -234,7 +234,7 @@ export default {
           contact: '陈生',
           telephone: '1234567890',
           address: '桂林',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 900,
           createdDate: '2014-11-30 00:56:00',
           boole: true,
@@ -243,7 +243,7 @@ export default {
         },
         {
           id: '12',
-          name: 'GGT科技YX公司',
+          name: 'GGT 科技 YX 公司',
           userId: 441047913162396,
           area: '西南区',
           province: '云南省',
@@ -251,7 +251,7 @@ export default {
           contact: '周生',
           telephone: '1234567890',
           address: '昆明',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 500,
           createdDate: '2014-03-20 02:50:00',
           boole: false,
@@ -260,7 +260,7 @@ export default {
         },
         {
           id: '13',
-          name: 'YYSYX公司',
+          name: 'YYSYX 公司',
           userId: 441047913162396,
           area: '西南区',
           province: '云南省',
@@ -268,7 +268,7 @@ export default {
           contact: '廖生',
           telephone: '1234567890',
           address: '西双版纳',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 985,
           createdDate: '2015-07-28 11:37:00',
           boole: true,
@@ -277,7 +277,7 @@ export default {
         },
         {
           id: '14',
-          name: 'VBN有限责任公司',
+          name: 'VBN 有限责任公司',
           userId: 421000103624183,
           area: '西南区',
           province: '云南省',
@@ -285,7 +285,7 @@ export default {
           contact: '欧生',
           telephone: '1234567890',
           address: '大理',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 598,
           createdDate: '2014-04-30 00:56:00',
           boole: false,
@@ -294,7 +294,7 @@ export default {
         },
         {
           id: '15',
-          name: '深圳万众科技YX公司',
+          name: '深圳万众科技 YX 公司',
           userId: 441047913162396,
           area: '华中区',
           province: '湖北省',
@@ -302,7 +302,7 @@ export default {
           contact: '阮生',
           telephone: '1234567890',
           address: '武汉',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 725,
           createdDate: '2014-04-30 00:56:00',
           boole: true,
@@ -311,7 +311,7 @@ export default {
         },
         {
           id: '16',
-          name: '深圳云创信息技术YX公司',
+          name: '深圳云创信息技术 YX 公司',
           userId: 421000103624183,
           area: '华中区',
           province: '湖北省',
@@ -319,7 +319,7 @@ export default {
           contact: '邓生',
           telephone: '1234567890',
           address: '十堰',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 632,
           createdDate: '2014-07-30 02:44:00',
           boole: true,
@@ -328,7 +328,7 @@ export default {
         },
         {
           id: '17',
-          name: '深圳明乐餐饮管理YX公司',
+          name: '深圳明乐餐饮管理 YX 公司',
           userId: 441047913162396,
           area: '华中区',
           province: '湖北省',
@@ -336,7 +336,7 @@ export default {
           contact: '罗生',
           telephone: '1234567890',
           address: '潜江',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 246,
           createdDate: '2013-04-30 00:56:00',
           boole: false,
@@ -345,7 +345,7 @@ export default {
         },
         {
           id: '18',
-          name: '珠海忆兰居科技YX公司',
+          name: '珠海忆兰居科技 YX 公司',
           userId: 441047913162396,
           area: '华南区',
           province: '广东省',
@@ -353,7 +353,7 @@ export default {
           contact: '黄生',
           telephone: '1234567890',
           address: '珠海香洲区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 592,
           createdDate: '2014-05-30 01:00:00',
           boole: false,
@@ -362,7 +362,7 @@ export default {
         },
         {
           id: '19',
-          name: '珠海万家医疗科技YX公司',
+          name: '珠海万家医疗科技 YX 公司',
           userId: 441047913162396,
           area: '华南区',
           province: '广东省',
@@ -370,7 +370,7 @@ export default {
           contact: '刘生',
           telephone: '1234567890',
           address: '广州天河区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 851,
           createdDate: '2014-04-29 08:56:00',
           boole: false,
@@ -379,7 +379,7 @@ export default {
         },
         {
           id: '20',
-          name: '东莞亿聚礼品YX公司',
+          name: '东莞亿聚礼品 YX 公司',
           userId: 421000103624183,
           area: '华中区',
           province: '湖北省',
@@ -387,7 +387,7 @@ export default {
           contact: '范生',
           telephone: '1234567890',
           address: '襄阳',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
           employees: 394,
           createdDate: '2014-04-28 10:56:00',
           boole: true,
diff --git a/examples/sites/demos/pc/app/pager/pager-mode.spec.ts b/examples/sites/demos/pc/app/pager/pager-mode.spec.ts
index f6b895d001..fa994ca701 100644
--- a/examples/sites/demos/pc/app/pager/pager-mode.spec.ts
+++ b/examples/sites/demos/pc/app/pager/pager-mode.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('分页complete模式', async ({ page }) => {
+test('分页 complete 模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pager#pager-mode')
 
diff --git a/examples/sites/demos/pc/app/pager/webdoc/pager.js b/examples/sites/demos/pc/app/pager/webdoc/pager.js
index 071f811243..d3720ceb92 100644
--- a/examples/sites/demos/pc/app/pager/webdoc/pager.js
+++ b/examples/sites/demos/pc/app/pager/webdoc/pager.js
@@ -111,7 +111,7 @@ export default {
         'en-US': 'Paging drop-down list box display position'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>popper-append-to-body</code> 设置分页下拉框元素是否追加到body元素节点下。</p>',
+        'zh-CN': '<p>通过 <code>popper-append-to-body</code> 设置分页下拉框元素是否追加到 body 元素节点下。</p>',
         'en-US':
           'Indicates whether to add an element in the <p> <code>popper-append-to-body</code> paging drop-down list box to the body element node.</p>'
       },
@@ -138,7 +138,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>custom-total</code> 设置分页总条数显示文本。传值为文本则显示传入的文本，传值为 <code>true</code> 时，<code>0 ～ 99999</code> 显示具体数值， <code>100000 ～ 999999</code> 显示 <code>10万+</code> 。<code>1000000 ～ 9999999</code> 显示 <code>100万+</code> 。超过 <code>10000000</code> 显示 <code>1千万+</code></p>',
+          '<p>通过 <code>custom-total</code> 设置分页总条数显示文本。传值为文本则显示传入的文本，传值为 <code>true</code> 时，<code>0 ～ 99999</code> 显示具体数值， <code>100000 ～ 999999</code> 显示 <code>10 万+</code> 。<code>1000000 ～ 9999999</code> 显示 <code>100 万+</code> 。超过 <code>10000000</code> 显示 <code>1 千万+</code></p>',
         'en-US':
           '<p> <code>custom total</code> You can customize the total number of pages to display text. If the value is passed as text, the incoming text will be displayed; When the value is passed as <code>true</code> , a number is displayed normally when it is less than <code>100000</code> , and when it is greater than <code>100000</code> , it is displayed as <code>100K+</code> . By analogy, display <code>1M+</code> , <code>10M+</code> , and display as <code>10M+</code> when it is greater than <code>10 million</code> .\n'
       },
diff --git a/examples/sites/demos/pc/app/pop-upload/basic-usage.spec.ts b/examples/sites/demos/pc/app/pop-upload/basic-usage.spec.ts
index 2c212ae8e6..ab66018a9b 100644
--- a/examples/sites/demos/pc/app/pop-upload/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/pop-upload/basic-usage.spec.ts
@@ -25,7 +25,7 @@ test('PopUpload 基本用法', async ({ page }) => {
   await lists.isHidden()
   await expect(uploadsBtn).toBeDisabled()
 
-  // 判断弹窗中的uploadName属性是否生效
+  // 判断弹窗中的 uploadName 属性是否生效
   await page.waitForTimeout(200)
   await expect(uploadName).toHaveAttribute('name', 'inputName')
 
diff --git a/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
index 1c2f4ef3f1..e36c111fdf 100644
--- a/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
@@ -9,7 +9,7 @@ import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 const action = ref('http://localhost:3000/api/upload')
 
 function handleUpload(file) {
-  // return false  支持同步返回 也支持 Promise异步返回
+  // return false  支持同步返回 也支持 Promise 异步返回
   return new Promise((resolve, reject) => {
     TinyModal.confirm(`确定上传 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
diff --git a/examples/sites/demos/pc/app/pop-upload/before-upload.vue b/examples/sites/demos/pc/app/pop-upload/before-upload.vue
index 7530fca455..8ff74f37d0 100644
--- a/examples/sites/demos/pc/app/pop-upload/before-upload.vue
+++ b/examples/sites/demos/pc/app/pop-upload/before-upload.vue
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     handleUpload(file) {
-      // return false  支持同步返回 也支持 Promise异步返回
+      // return false  支持同步返回 也支持 Promise 异步返回
       return new Promise((resolve, reject) => {
         TinyModal.confirm(`确定上传 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
diff --git a/examples/sites/demos/pc/app/pop-upload/file-limit.spec.ts b/examples/sites/demos/pc/app/pop-upload/file-limit.spec.ts
index 63b977618e..a01a55d87b 100644
--- a/examples/sites/demos/pc/app/pop-upload/file-limit.spec.ts
+++ b/examples/sites/demos/pc/app/pop-upload/file-limit.spec.ts
@@ -19,7 +19,7 @@ test('PopUpload 最大上传文件数', async ({ page }) => {
   await alert.getByText('上传文件数限制为:2').isVisible()
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
   await fileChooser.setFiles([path1, path2, path3])
-  await alert.getByText('上传文件数量超出限制,已取消该操作').isVisible()
+  await alert.getByText('上传文件数量超出限制，已取消该操作').isVisible()
   await expect(lists).toHaveCount(0)
   await fileChooser.setFiles([path1, path2])
   await expect(lists).toHaveCount(2)
diff --git a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
index b7e749b66e..8cefd3cafc 100644
--- a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
@@ -9,7 +9,7 @@ import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 const action = ref('http://localhost:3000/api/upload')
 
 function handleRemove(file) {
-  // return false  支持同步返回 也支持 Promise异步返回
+  // return false  支持同步返回 也支持 Promise 异步返回
   return new Promise((resolve, reject) => {
     TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
diff --git a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
index 801793517e..6e73ba2236 100644
--- a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     handleRemove(file) {
-      // return false  支持同步返回 也支持 Promise异步返回
+      // return false  支持同步返回 也支持 Promise 异步返回
       return new Promise((resolve, reject) => {
         TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
diff --git a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
index 47c900c290..b66cd17976 100644
--- a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
+++ b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
@@ -38,7 +38,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>medium</code>，<code>small</code>，<code>mini</code> 设置组件尺寸，<code>disabled</code> 设置是否禁用，默认值为 false 。',
+          '通过 <code>medium</code>，<code>small</code>，<code>mini</code> 设置组件尺寸，<code>disabled</code> 设置是否禁用，默认值为 false。',
         'en-US':
           'Set the component size through<code>media</code>,<code>small</code>,<code>mini</code>, and whether to <code>disabled</code> it. The default value is false.'
       },
@@ -65,7 +65,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本, \n          <code>submit-button-text</code> 设置提交按钮的文本， <code>upload-button-text</code> 设置上传按钮的文本。',
+          '通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本，\n          <code>submit-button-text</code> 设置提交按钮的文本， <code>upload-button-text</code> 设置上传按钮的文本。',
         'en-US':
           'Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,\n          <code>submit-button-text</code>Set the text for the submit button,<code>upload-button-text</code>Set the text for the upload button.'
       },
diff --git a/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
index 438b0e3796..57018dcc2f 100644
--- a/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
@@ -18,21 +18,21 @@ const message = ref('这是气泡确认框提示内容文本描述，这是两
 function show() {
   TinyModal.message({
     status: 'info',
-    message: 'show事件触发了'
+    message: 'show 事件触发了'
   })
 }
 
 function hide() {
   TinyModal.message({
     status: 'info',
-    message: 'hide事件触发了'
+    message: 'hide 事件触发了'
   })
 }
 
 function confirm() {
   TinyModal.message({
     status: 'info',
-    message: 'confirm事件触发了'
+    message: 'confirm 事件触发了'
   })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popconfirm/event.spec.ts b/examples/sites/demos/pc/app/popconfirm/event.spec.ts
index 663a72a95d..d032dd57e5 100644
--- a/examples/sites/demos/pc/app/popconfirm/event.spec.ts
+++ b/examples/sites/demos/pc/app/popconfirm/event.spec.ts
@@ -12,10 +12,10 @@ test('隐藏显示事件', async ({ page }) => {
 
   await popConfirm.hover()
   await expect(popConfirmPopover).toBeVisible()
-  await expect(modal.filter({ hasText: 'show事件触发了' })).toBeVisible()
+  await expect(modal.filter({ hasText: 'show 事件触发了' })).toBeVisible()
   await confirmBtn.click()
   await expect(popConfirmPopover).not.toBeVisible()
-  await expect(modal.filter({ hasText: 'hide事件触发了' })).toBeVisible()
+  await expect(modal.filter({ hasText: 'hide 事件触发了' })).toBeVisible()
 })
 
 test('点击确认事件', async ({ page }) => {
@@ -30,9 +30,9 @@ test('点击确认事件', async ({ page }) => {
 
   await popConfirm.hover()
   await expect(popConfirmPopover).toBeVisible()
-  await expect(modal.filter({ hasText: 'show事件触发了' })).toBeVisible()
+  await expect(modal.filter({ hasText: 'show 事件触发了' })).toBeVisible()
   await confirmBtn.click()
   await expect(popConfirmPopover).not.toBeVisible()
-  await expect(modal.filter({ hasText: 'confirm事件触发了' })).toBeVisible()
-  await expect(modal.filter({ hasText: 'hide事件触发了' })).toBeVisible()
+  await expect(modal.filter({ hasText: 'confirm 事件触发了' })).toBeVisible()
+  await expect(modal.filter({ hasText: 'hide 事件触发了' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/popconfirm/event.vue b/examples/sites/demos/pc/app/popconfirm/event.vue
index 8084fcda23..24f2b2369b 100644
--- a/examples/sites/demos/pc/app/popconfirm/event.vue
+++ b/examples/sites/demos/pc/app/popconfirm/event.vue
@@ -26,19 +26,19 @@ export default {
     show() {
       TinyModal.message({
         status: 'info',
-        message: 'show事件触发了'
+        message: 'show 事件触发了'
       })
     },
     hide() {
       TinyModal.message({
         status: 'info',
-        message: 'hide事件触发了'
+        message: 'hide 事件触发了'
       })
     },
     confirm() {
       TinyModal.message({
         status: 'info',
-        message: 'confirm事件触发了'
+        message: 'confirm 事件触发了'
       })
     }
   }
diff --git a/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
index e5773f606c..9c8e3bcbfa 100644
--- a/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
@@ -17,7 +17,7 @@
 import { ref } from 'vue'
 import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
-const title = ref('确定要删除该安全组规则吗?')
+const title = ref('确定要删除该安全组规则吗？')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/popconfirm/trigger.vue b/examples/sites/demos/pc/app/popconfirm/trigger.vue
index 40cb776cd0..4ae28f8424 100644
--- a/examples/sites/demos/pc/app/popconfirm/trigger.vue
+++ b/examples/sites/demos/pc/app/popconfirm/trigger.vue
@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      title: '确定要删除该安全组规则吗?'
+      title: '确定要删除该安全组规则吗？'
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
index 4fadfaf948..1a3d75bf6c 100644
--- a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
@@ -38,7 +38,7 @@ import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 const title = ref('提示标题')
-const message = ref('安全组规则是推荐的，确定要删除该安全组规则吗?')
+const message = ref('安全组规则是推荐的，确定要删除该安全组规则吗？')
 const TinyIconDel = iconDel()
 </script>
 
diff --git a/examples/sites/demos/pc/app/popconfirm/type.vue b/examples/sites/demos/pc/app/popconfirm/type.vue
index 98cf12ce7d..39fd3d91c2 100644
--- a/examples/sites/demos/pc/app/popconfirm/type.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type.vue
@@ -44,7 +44,7 @@ export default {
   data() {
     return {
       title: '提示标题',
-      message: '安全组规则是推荐的，确定要删除该安全组规则吗?',
+      message: '安全组规则是推荐的，确定要删除该安全组规则吗？',
       TinyIconDel: iconDel()
     }
   }
diff --git a/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue b/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
index 4acb2681d1..d703b1b75b 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
@@ -67,7 +67,7 @@ function remoteSearch({ page }) {
   const data = Array.from({ length: page.pageSize }).map((item, i) => {
     return {
       id: pageSize * (currentPage - 1) + i + 1,
-      name: randomAlphabets() + 'YX公司',
+      name: randomAlphabets() + 'YX 公司',
       city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
       employees: Math.ceil(Math.random() * 10000)
     }
diff --git a/examples/sites/demos/pc/app/popeditor/auto-lookup.vue b/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
index ab2903bfe4..32e69f5f98 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
@@ -72,7 +72,7 @@ export default {
       const data = Array.from({ length: page.pageSize }).map((item, i) => {
         return {
           id: pageSize * (currentPage - 1) + i + 1,
-          name: randomAlphabets() + 'YX公司',
+          name: randomAlphabets() + 'YX 公司',
           city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
           employees: Math.ceil(Math.random() * 10000)
         }
diff --git a/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue b/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
index cc060091a9..95cc392656 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
@@ -16,61 +16,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/auto-reset.vue b/examples/sites/demos/pc/app/popeditor/auto-reset.vue
index e829d7a54d..95080d79e6 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-reset.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-reset.vue
@@ -20,61 +20,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
index 414c6325a3..2b5737cf32 100644
--- a/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司',
+    name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/basic-usage.spec.ts b/examples/sites/demos/pc/app/popeditor/basic-usage.spec.ts
index 9dd7ddb088..3e57543da6 100644
--- a/examples/sites/demos/pc/app/popeditor/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/basic-usage.spec.ts
@@ -11,11 +11,11 @@ test('PopEditor 基本用法', async ({ page }) => {
   const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
   const dataItem = dialogBox
     .getByRole('row', {
-      name: '1 GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司 福建 福州'
+      name: '1 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 福建 福州'
     })
     .locator('span')
 
-  // 点击文本框，编辑弹出框弹出,数据渲染
+  // 点击文本框，编辑弹出框弹出，数据渲染
   await expect(textBox).toBeVisible()
   await textBox.click()
   await expect(dialogBox).toBeVisible()
@@ -26,7 +26,7 @@ test('PopEditor 基本用法', async ({ page }) => {
   await confirmBtn.click()
   await expect(dialogBox).not.toBeVisible()
   await expect(textBox).toHaveValue(
-    'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司'
+    'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司'
   )
 
   // 点击删除图标，清空文本框
diff --git a/examples/sites/demos/pc/app/popeditor/basic-usage.vue b/examples/sites/demos/pc/app/popeditor/basic-usage.vue
index f618653b63..bb99d88a3a 100644
--- a/examples/sites/demos/pc/app/popeditor/basic-usage.vue
+++ b/examples/sites/demos/pc/app/popeditor/basic-usage.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司',
+        name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue b/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
index b55d67ddbe..184aa7b4de 100644
--- a/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
@@ -16,43 +16,43 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技有限公司',
+    name: 'GFD 科技有限公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技有限公司',
+    name: 'WWW 科技有限公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技有限公司',
+    name: 'TGB 科技有限公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技有限公司',
+    name: 'YHN 科技有限公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技有限公司',
+    name: 'WSX 科技有限公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
@@ -64,7 +64,7 @@ const dataset = [
   },
   {
     id: '9',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
diff --git a/examples/sites/demos/pc/app/popeditor/before-close.vue b/examples/sites/demos/pc/app/popeditor/before-close.vue
index 273fd5be11..16e8c49d0a 100644
--- a/examples/sites/demos/pc/app/popeditor/before-close.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-close.vue
@@ -20,43 +20,43 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技有限公司',
+        name: 'GFD 科技有限公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技有限公司',
+        name: 'WWW 科技有限公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技有限公司',
+        name: 'TGB 科技有限公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技有限公司',
+        name: 'YHN 科技有限公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技有限公司',
+        name: 'WSX 科技有限公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
@@ -68,7 +68,7 @@ export default {
       },
       {
         id: '9',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
diff --git a/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue b/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
index 8216afdd09..7958b2fd7b 100644
--- a/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
@@ -16,61 +16,61 @@ import { TinyPopeditor, TinyModal } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/before-reset.spec.ts b/examples/sites/demos/pc/app/popeditor/before-reset.spec.ts
index 178cdd761c..6a4a19a9af 100644
--- a/examples/sites/demos/pc/app/popeditor/before-reset.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/before-reset.spec.ts
@@ -12,7 +12,7 @@ test('PopEditor 重置', async ({ page }) => {
   const resetBtn = dialogBox.getByRole('button', { name: '重 置' })
   const infoModal = page.locator('.tiny-modal')
 
-  // 点击弹出框重置按钮，清空搜索框，modal弹出提示
+  // 点击弹出框重置按钮，清空搜索框，modal 弹出提示
   await textBox.click()
   await company.fill('111')
   await city.fill('222')
diff --git a/examples/sites/demos/pc/app/popeditor/before-reset.vue b/examples/sites/demos/pc/app/popeditor/before-reset.vue
index 2e46d54756..60667aa824 100644
--- a/examples/sites/demos/pc/app/popeditor/before-reset.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-reset.vue
@@ -20,61 +20,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue b/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
index 3ef5471208..7b4194bd08 100644
--- a/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/clearable.vue b/examples/sites/demos/pc/app/popeditor/clearable.vue
index 29fd838a7e..5f965c72da 100644
--- a/examples/sites/demos/pc/app/popeditor/clearable.vue
+++ b/examples/sites/demos/pc/app/popeditor/clearable.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
index efe679592d..19881f02ef 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
@@ -54,61 +54,61 @@ import {
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
@@ -159,7 +159,7 @@ const rules = ref({
   textarea: [{ required: true, message: '必填', trigger: 'change' }],
   users: [
     { required: true, message: '必填', trigger: 'blur' },
-    { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+    { min: 2, max: 11, message: '长度必须不小于 2', trigger: 'change' }
   ],
   email: { type: 'email' }
 })
diff --git a/examples/sites/demos/pc/app/popeditor/condition-form.spec.ts b/examples/sites/demos/pc/app/popeditor/condition-form.spec.ts
index 0bd2539e2f..ffb8b90dc4 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-form.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/condition-form.spec.ts
@@ -10,7 +10,7 @@ test('PopEditor 表单中使用并开启表单校验', async ({ page }) => {
     .filter({ hasText: /^文本选择确 认取 消$/ })
     .getByRole('textbox')
     .click()
-  await page.getByRole('row', { name: 'GFD科技YX公司 福建 福州' }).locator('path').nth(1).click()
+  await page.getByRole('row', { name: 'GFD 科技 YX 公司 福建 福州' }).locator('path').nth(1).click()
   await page.getByRole('button', { name: '确 认' }).click()
   await preview
     .locator('div')
diff --git a/examples/sites/demos/pc/app/popeditor/condition-form.vue b/examples/sites/demos/pc/app/popeditor/condition-form.vue
index b593b5e27d..d6648628d1 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-form.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-form.vue
@@ -64,61 +64,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
@@ -170,7 +170,7 @@ export default {
         textarea: [{ required: true, message: '必填', trigger: 'change' }],
         users: [
           { required: true, message: '必填', trigger: 'blur' },
-          { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
+          { min: 2, max: 11, message: '长度必须不小于 2', trigger: 'change' }
         ],
         email: { type: 'email' }
       }
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
index 1c91581d17..01abc9c43a 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
@@ -79,7 +79,7 @@ function remoteSearch({ page }) {
   const data = Array.from({ length: page.pageSize }).map((item, i) => {
     return {
       id: pageSize * (currentPage - 1) + i + 1,
-      name: randomAlphabets() + 'YX公司',
+      name: randomAlphabets() + 'YX 公司',
       city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
       employees: Math.ceil(Math.random() * 10000)
     }
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout.vue b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
index 5bca5f5a6e..6bbfbcd4c9 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
@@ -86,7 +86,7 @@ export default {
       const data = Array.from({ length: page.pageSize }).map((item, i) => {
         return {
           id: pageSize * (currentPage - 1) + i + 1,
-          name: randomAlphabets() + 'YX公司',
+          name: randomAlphabets() + 'YX 公司',
           city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
           employees: Math.ceil(Math.random() * 10000)
         }
diff --git a/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue b/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
index 26422f9697..8e0beec1ec 100644
--- a/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/conditions.spec.ts b/examples/sites/demos/pc/app/popeditor/conditions.spec.ts
index e4fd845011..1434eeb31e 100644
--- a/examples/sites/demos/pc/app/popeditor/conditions.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/conditions.spec.ts
@@ -17,7 +17,7 @@ test('PopEditor 自定义查询条件', async ({ page }) => {
   await searchBtn.click()
   await expect(dialogBox.locator('.tiny-grid__empty-block')).toBeVisible()
 
-  // 或者按enter键搜索
+  // 或者按 enter 键搜索
   await company.fill('')
   await city.fill('福州')
   await searchBtn.press('Enter')
diff --git a/examples/sites/demos/pc/app/popeditor/conditions.vue b/examples/sites/demos/pc/app/popeditor/conditions.vue
index c04fd66902..7d518a198a 100644
--- a/examples/sites/demos/pc/app/popeditor/conditions.vue
+++ b/examples/sites/demos/pc/app/popeditor/conditions.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue b/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
index bd11401b89..05352c4d61 100644
--- a/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/disabled.vue b/examples/sites/demos/pc/app/popeditor/disabled.vue
index 14fc83b30d..f8e99dba2e 100644
--- a/examples/sites/demos/pc/app/popeditor/disabled.vue
+++ b/examples/sites/demos/pc/app/popeditor/disabled.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
index ace6a00082..a727dd1ace 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
@@ -21,61 +21,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/draggable.vue b/examples/sites/demos/pc/app/popeditor/draggable.vue
index 5c128a623a..0035240a9c 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable.vue
@@ -25,61 +25,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
index 2e5c7ad522..58c704719c 100644
--- a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
@@ -51,7 +51,7 @@ handlePageChange(1)
 
 function changeFn(val, data) {
   TinyModal.message({
-    message: `值变为${val},${JSON.stringify(data)}`,
+    message: `值变为 ${val},${JSON.stringify(data)}`,
     status: 'info'
   })
 }
@@ -60,61 +60,61 @@ function handlePageChange(val) {
   const dataset = [
     {
       id: '1',
-      name: 'GFD科技YX公司',
+      name: 'GFD 科技 YX 公司',
       city: '福州',
       province: '福建'
     },
     {
       id: '2',
-      name: 'WWW科技YX公司',
+      name: 'WWW 科技 YX 公司',
       city: '深圳',
       province: '广东'
     },
     {
       id: '3',
-      name: 'RFV有限责任公司',
+      name: 'RFV 有限责任公司',
       city: '中山',
       province: '广东'
     },
     {
       id: '4',
-      name: 'TGB科技YX公司',
+      name: 'TGB 科技 YX 公司',
       city: '龙岩',
       province: '福建'
     },
     {
       id: '5',
-      name: 'YHN科技YX公司',
+      name: 'YHN 科技 YX 公司',
       city: '韶关',
       province: '广东'
     },
     {
       id: '6',
-      name: 'WSX科技YX公司',
+      name: 'WSX 科技 YX 公司',
       city: '黄冈',
       province: '武汉'
     },
     {
       id: '7',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '8',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     },
     {
       id: '9',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '10',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     }
diff --git a/examples/sites/demos/pc/app/popeditor/events.spec.ts b/examples/sites/demos/pc/app/popeditor/events.spec.ts
index 99d499464a..974d66bd43 100644
--- a/examples/sites/demos/pc/app/popeditor/events.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/events.spec.ts
@@ -8,13 +8,13 @@ test('PopEditor change 事件', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-  const dataItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
-  const infoModal = page.getByText('值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建"}')
+  const dataItem = dialogBox.getByRole('row', { name: '1 GFD 科技 YX 公司 福建 福州' }).locator('span')
+  const infoModal = page.getByText('值变为 1,{"id":"1","name":"GFD 科技 YX 公司","city":"福州","province":"福建"}')
 
   await textBox.click()
   await dataItem.click()
   await confirmBtn.click()
   await expect(dialogBox).not.toBeVisible()
-  await expect(textBox).toHaveValue('GFD科技YX公司')
+  await expect(textBox).toHaveValue('GFD 科技 YX 公司')
   await expect(infoModal).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/popeditor/events.vue b/examples/sites/demos/pc/app/popeditor/events.vue
index 8cfc08782f..c579646c5c 100644
--- a/examples/sites/demos/pc/app/popeditor/events.vue
+++ b/examples/sites/demos/pc/app/popeditor/events.vue
@@ -59,7 +59,7 @@ export default {
   methods: {
     changeFn(val, data) {
       TinyModal.message({
-        message: `值变为${val},${JSON.stringify(data)}`,
+        message: `值变为 ${val},${JSON.stringify(data)}`,
         status: 'info'
       })
     },
@@ -67,61 +67,61 @@ export default {
       const dataset = [
         {
           id: '1',
-          name: 'GFD科技YX公司',
+          name: 'GFD 科技 YX 公司',
           city: '福州',
           province: '福建'
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'WWW 科技 YX 公司',
           city: '深圳',
           province: '广东'
         },
         {
           id: '3',
-          name: 'RFV有限责任公司',
+          name: 'RFV 有限责任公司',
           city: '中山',
           province: '广东'
         },
         {
           id: '4',
-          name: 'TGB科技YX公司',
+          name: 'TGB 科技 YX 公司',
           city: '龙岩',
           province: '福建'
         },
         {
           id: '5',
-          name: 'YHN科技YX公司',
+          name: 'YHN 科技 YX 公司',
           city: '韶关',
           province: '广东'
         },
         {
           id: '6',
-          name: 'WSX科技YX公司',
+          name: 'WSX 科技 YX 公司',
           city: '黄冈',
           province: '武汉'
         },
         {
           id: '7',
-          name: 'KBG物业YX公司',
+          name: 'KBG 物业 YX 公司',
           city: '赤壁',
           province: '武汉'
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术 YX 公司',
           province: '广东',
           city: '深圳'
         },
         {
           id: '9',
-          name: 'KBG物业YX公司',
+          name: 'KBG 物业 YX 公司',
           city: '赤壁',
           province: '武汉'
         },
         {
           id: '10',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术 YX 公司',
           province: '广东',
           city: '深圳'
         }
diff --git a/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue b/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
index 9cd8d818b4..19c8a26c37 100644
--- a/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
@@ -9,61 +9,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/grid.vue b/examples/sites/demos/pc/app/popeditor/grid.vue
index 410f8c7b56..b22d5581f9 100644
--- a/examples/sites/demos/pc/app/popeditor/grid.vue
+++ b/examples/sites/demos/pc/app/popeditor/grid.vue
@@ -13,61 +13,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue b/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
index 0ed5efde86..2d4e44a22f 100644
--- a/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
@@ -40,61 +40,61 @@ const gridOp = ref({
   data: [
     {
       id: '1',
-      name: 'GFD科技YX公司',
+      name: 'GFD 科技 YX 公司',
       city: '福州',
       province: '福建'
     },
     {
       id: '2',
-      name: 'WWW科技YX公司',
+      name: 'WWW 科技 YX 公司',
       city: '深圳',
       province: '广东'
     },
     {
       id: '3',
-      name: 'RFV有限责任公司',
+      name: 'RFV 有限责任公司',
       city: '中山',
       province: '广东'
     },
     {
       id: '4',
-      name: 'TGB科技YX公司',
+      name: 'TGB 科技 YX 公司',
       city: '龙岩',
       province: '福建'
     },
     {
       id: '5',
-      name: 'YHN科技YX公司',
+      name: 'YHN 科技 YX 公司',
       city: '韶关',
       province: '广东'
     },
     {
       id: '6',
-      name: 'WSX科技YX公司',
+      name: 'WSX 科技 YX 公司',
       city: '黄冈',
       province: '武汉'
     },
     {
       id: '7',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '8',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     },
     {
       id: '9',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '10',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     }
diff --git a/examples/sites/demos/pc/app/popeditor/icon.vue b/examples/sites/demos/pc/app/popeditor/icon.vue
index 2777c75b82..e788d2d12d 100644
--- a/examples/sites/demos/pc/app/popeditor/icon.vue
+++ b/examples/sites/demos/pc/app/popeditor/icon.vue
@@ -45,61 +45,61 @@ export default {
         data: [
           {
             id: '1',
-            name: 'GFD科技YX公司',
+            name: 'GFD 科技 YX 公司',
             city: '福州',
             province: '福建'
           },
           {
             id: '2',
-            name: 'WWW科技YX公司',
+            name: 'WWW 科技 YX 公司',
             city: '深圳',
             province: '广东'
           },
           {
             id: '3',
-            name: 'RFV有限责任公司',
+            name: 'RFV 有限责任公司',
             city: '中山',
             province: '广东'
           },
           {
             id: '4',
-            name: 'TGB科技YX公司',
+            name: 'TGB 科技 YX 公司',
             city: '龙岩',
             province: '福建'
           },
           {
             id: '5',
-            name: 'YHN科技YX公司',
+            name: 'YHN 科技 YX 公司',
             city: '韶关',
             province: '广东'
           },
           {
             id: '6',
-            name: 'WSX科技YX公司',
+            name: 'WSX 科技 YX 公司',
             city: '黄冈',
             province: '武汉'
           },
           {
             id: '7',
-            name: 'KBG物业YX公司',
+            name: 'KBG 物业 YX 公司',
             city: '赤壁',
             province: '武汉'
           },
           {
             id: '8',
-            name: '深圳市福德宝网络技术YX公司',
+            name: '深圳市福德宝网络技术 YX 公司',
             province: '广东',
             city: '深圳'
           },
           {
             id: '9',
-            name: 'KBG物业YX公司',
+            name: 'KBG 物业 YX 公司',
             city: '赤壁',
             province: '武汉'
           },
           {
             id: '10',
-            name: '深圳市福德宝网络技术YX公司',
+            name: '深圳市福德宝网络技术 YX 公司',
             province: '广东',
             city: '深圳'
           }
diff --git a/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue b/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
index 46c963c6d8..ec086aa970 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
@@ -22,61 +22,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue b/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
index f50b852fc2..094d6de2d2 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
@@ -21,61 +21,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/multi-value-array.vue b/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
index 8ed4ef6f9e..267f06d1e8 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
@@ -25,61 +25,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/multi.spec.ts b/examples/sites/demos/pc/app/popeditor/multi.spec.ts
index 82356f619e..d09e95259d 100644
--- a/examples/sites/demos/pc/app/popeditor/multi.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/multi.spec.ts
@@ -8,8 +8,8 @@ test('PopEditor 多选', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-  const select1 = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
-  const select2 = dialogBox.getByRole('row', { name: '2 WWW科技YX公司 广东 深圳' }).locator('span')
+  const select1 = dialogBox.getByRole('row', { name: '1 GFD 科技 YX 公司 福建 福州' }).locator('span')
+  const select2 = dialogBox.getByRole('row', { name: '2 WWW 科技 YX 公司 广东 深圳' }).locator('span')
 
   // 允许多选
   await textBox.click()
diff --git a/examples/sites/demos/pc/app/popeditor/multi.vue b/examples/sites/demos/pc/app/popeditor/multi.vue
index a5a737b1bd..380ad4cfd8 100644
--- a/examples/sites/demos/pc/app/popeditor/multi.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi.vue
@@ -26,61 +26,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
index 9af3730275..465d8ec54b 100644
--- a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
@@ -53,61 +53,61 @@ function handlePageChange() {
   const dataset = [
     {
       id: '1',
-      name: 'GFD科技YX公司',
+      name: 'GFD 科技 YX 公司',
       city: '福州',
       province: '福建'
     },
     {
       id: '2',
-      name: 'WWW科技YX公司',
+      name: 'WWW 科技 YX 公司',
       city: '深圳',
       province: '广东'
     },
     {
       id: '3',
-      name: 'RFV有限责任公司',
+      name: 'RFV 有限责任公司',
       city: '中山',
       province: '广东'
     },
     {
       id: '4',
-      name: 'TGB科技YX公司',
+      name: 'TGB 科技 YX 公司',
       city: '龙岩',
       province: '福建'
     },
     {
       id: '5',
-      name: 'YHN科技YX公司',
+      name: 'YHN 科技 YX 公司',
       city: '韶关',
       province: '广东'
     },
     {
       id: '6',
-      name: 'WSX科技YX公司',
+      name: 'WSX 科技 YX 公司',
       city: '黄冈',
       province: '武汉'
     },
     {
       id: '7',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '8',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     },
     {
       id: '9',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '10',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     }
diff --git a/examples/sites/demos/pc/app/popeditor/pager.vue b/examples/sites/demos/pc/app/popeditor/pager.vue
index 8971281274..cd90ee8d39 100644
--- a/examples/sites/demos/pc/app/popeditor/pager.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager.vue
@@ -61,61 +61,61 @@ export default {
       const dataset = [
         {
           id: '1',
-          name: 'GFD科技YX公司',
+          name: 'GFD 科技 YX 公司',
           city: '福州',
           province: '福建'
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'WWW 科技 YX 公司',
           city: '深圳',
           province: '广东'
         },
         {
           id: '3',
-          name: 'RFV有限责任公司',
+          name: 'RFV 有限责任公司',
           city: '中山',
           province: '广东'
         },
         {
           id: '4',
-          name: 'TGB科技YX公司',
+          name: 'TGB 科技 YX 公司',
           city: '龙岩',
           province: '福建'
         },
         {
           id: '5',
-          name: 'YHN科技YX公司',
+          name: 'YHN 科技 YX 公司',
           city: '韶关',
           province: '广东'
         },
         {
           id: '6',
-          name: 'WSX科技YX公司',
+          name: 'WSX 科技 YX 公司',
           city: '黄冈',
           province: '武汉'
         },
         {
           id: '7',
-          name: 'KBG物业YX公司',
+          name: 'KBG 物业 YX 公司',
           city: '赤壁',
           province: '武汉'
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术 YX 公司',
           province: '广东',
           city: '深圳'
         },
         {
           id: '9',
-          name: 'KBG物业YX公司',
+          name: 'KBG 物业 YX 公司',
           city: '赤壁',
           province: '武汉'
         },
         {
           id: '10',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术 YX 公司',
           province: '广东',
           city: '深圳'
         }
diff --git a/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue b/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
index 898a6bd6a6..31d16ae903 100644
--- a/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
@@ -16,43 +16,43 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司',
+    name: 'GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技有限公司',
+    name: 'WWW 科技有限公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技有限公司',
+    name: 'TGB 科技有限公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技有限公司',
+    name: 'YHN 科技有限公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技有限公司',
+    name: 'WSX 科技有限公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
@@ -64,7 +64,7 @@ const dataset = [
   },
   {
     id: '9',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
diff --git a/examples/sites/demos/pc/app/popeditor/radio-change-close.vue b/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
index 308daa94c1..548befac5d 100644
--- a/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
+++ b/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
@@ -20,43 +20,43 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司',
+        name: 'GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司 GFD 科技有限公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技有限公司',
+        name: 'WWW 科技有限公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技有限公司',
+        name: 'TGB 科技有限公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技有限公司',
+        name: 'YHN 科技有限公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技有限公司',
+        name: 'WSX 科技有限公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
@@ -68,7 +68,7 @@ export default {
       },
       {
         id: '9',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
diff --git a/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue b/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
index 1c195ed200..22026fe195 100644
--- a/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/readonly.vue b/examples/sites/demos/pc/app/popeditor/readonly.vue
index 9fdfec06b2..3718e58c8c 100644
--- a/examples/sites/demos/pc/app/popeditor/readonly.vue
+++ b/examples/sites/demos/pc/app/popeditor/readonly.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue b/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
index 3392160102..198290c925 100644
--- a/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
@@ -58,7 +58,7 @@ function remoteSearch({ page }) {
   const data = Array.from({ length: page.pageSize }).map((item, i) => {
     return {
       id: pageSize * (currentPage - 1) + i + 1,
-      name: randomAlphabets() + 'YX公司',
+      name: randomAlphabets() + 'YX 公司',
       city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
       employees: Math.ceil(Math.random() * 10000)
     }
diff --git a/examples/sites/demos/pc/app/popeditor/remote-search.vue b/examples/sites/demos/pc/app/popeditor/remote-search.vue
index 71d62db98a..4872a52260 100644
--- a/examples/sites/demos/pc/app/popeditor/remote-search.vue
+++ b/examples/sites/demos/pc/app/popeditor/remote-search.vue
@@ -65,7 +65,7 @@ export default {
       const data = Array.from({ length: page.pageSize }).map((item, i) => {
         return {
           id: pageSize * (currentPage - 1) + i + 1,
-          name: randomAlphabets() + 'YX公司',
+          name: randomAlphabets() + 'YX 公司',
           city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
           employees: Math.ceil(Math.random() * 10000)
         }
diff --git a/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue b/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
index 718bf34984..a93f081d66 100644
--- a/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
@@ -51,8 +51,8 @@ const conditions = ref([
 
 function renderText() {
   return Promise.resolve([
-    { id: 25, name: 'XXXYX公司', city: '赤壁', employees: 5120 },
-    { id: 20, name: 'AAAYX公司', city: '赤壁', employees: 5120 }
+    { id: 25, name: 'XXXYX 公司', city: '赤壁', employees: 5120 },
+    { id: 20, name: 'AAAYX 公司', city: '赤壁', employees: 5120 }
   ])
 }
 
@@ -66,7 +66,7 @@ function remoteSearch({ page }) {
   const data = Array.from({ length: page.pageSize }).map((item, i) => {
     return {
       id: pageSize * (currentPage - 1) + i + 1,
-      name: randomAlphabets() + 'YX公司',
+      name: randomAlphabets() + 'YX 公司',
       city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
       employees: Math.ceil(Math.random() * 10000)
     }
diff --git a/examples/sites/demos/pc/app/popeditor/render-text.vue b/examples/sites/demos/pc/app/popeditor/render-text.vue
index a27d05c83d..21d4f67e57 100644
--- a/examples/sites/demos/pc/app/popeditor/render-text.vue
+++ b/examples/sites/demos/pc/app/popeditor/render-text.vue
@@ -58,8 +58,8 @@ export default {
   methods: {
     renderText() {
       return Promise.resolve([
-        { id: 25, name: 'XXXYX公司', city: '赤壁', employees: 5120 },
-        { id: 20, name: 'AAAYX公司', city: '赤壁', employees: 5120 }
+        { id: 25, name: 'XXXYX 公司', city: '赤壁', employees: 5120 },
+        { id: 20, name: 'AAAYX 公司', city: '赤壁', employees: 5120 }
       ])
     },
     remoteSearch({ page }) {
@@ -72,7 +72,7 @@ export default {
       const data = Array.from({ length: page.pageSize }).map((item, i) => {
         return {
           id: pageSize * (currentPage - 1) + i + 1,
-          name: randomAlphabets() + 'YX公司',
+          name: randomAlphabets() + 'YX 公司',
           city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
           employees: Math.ceil(Math.random() * 10000)
         }
diff --git a/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue b/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
index decde5252f..1e9a646adb 100644
--- a/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
@@ -9,61 +9,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerh',
+    name: 'GFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerh',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/resize.vue b/examples/sites/demos/pc/app/popeditor/resize.vue
index 83a1bd6c96..327015fac5 100644
--- a/examples/sites/demos/pc/app/popeditor/resize.vue
+++ b/examples/sites/demos/pc/app/popeditor/resize.vue
@@ -13,61 +13,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerhGFD科技YX公司sdgasgwegagafggrgerh',
+        name: 'GFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerhGFD 科技 YX 公司 sdgasgwegagafggrgerh',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue b/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
index d8ef7b9152..1bc3811067 100644
--- a/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
@@ -23,43 +23,43 @@ import Sortable from 'sortablejs'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技有限公司',
+    name: 'GFD 科技有限公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技有限公司',
+    name: 'WWW 科技有限公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技有限公司',
+    name: 'TGB 科技有限公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技有限公司',
+    name: 'YHN 科技有限公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技有限公司',
+    name: 'WSX 科技有限公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
@@ -71,7 +71,7 @@ const dataset = [
   },
   {
     id: '9',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
diff --git a/examples/sites/demos/pc/app/popeditor/selected-box.vue b/examples/sites/demos/pc/app/popeditor/selected-box.vue
index d841c8ff4e..c50f0b7c8f 100644
--- a/examples/sites/demos/pc/app/popeditor/selected-box.vue
+++ b/examples/sites/demos/pc/app/popeditor/selected-box.vue
@@ -27,43 +27,43 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技有限公司',
+        name: 'GFD 科技有限公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技有限公司',
+        name: 'WWW 科技有限公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技有限公司',
+        name: 'TGB 科技有限公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技有限公司',
+        name: 'YHN 科技有限公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技有限公司',
+        name: 'WSX 科技有限公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
@@ -75,7 +75,7 @@ export default {
       },
       {
         id: '9',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
diff --git a/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
index 370c37af12..c7fc357371 100644
--- a/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/show-clear-btn.spec.ts b/examples/sites/demos/pc/app/popeditor/show-clear-btn.spec.ts
index 2f2d8bd34b..fbf6b18f85 100644
--- a/examples/sites/demos/pc/app/popeditor/show-clear-btn.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/show-clear-btn.spec.ts
@@ -8,7 +8,7 @@ test('PopEditor 是否可清除', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const del = preview.getByRole('img')
 
-  await expect(textBox).toHaveValue('GFD科技YX公司')
+  await expect(textBox).toHaveValue('GFD 科技 YX 公司')
   await del.click()
   await expect(textBox).toHaveValue('')
 })
diff --git a/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue b/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
index b2ce6378bf..77c36bfb9c 100644
--- a/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
index bc44603122..16da176dbd 100644
--- a/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
@@ -32,61 +32,61 @@ const gridOp = ref({
   data: [
     {
       id: '1',
-      name: 'GFD科技YX公司',
+      name: 'GFD 科技 YX 公司',
       city: '福州',
       province: '福建'
     },
     {
       id: '2',
-      name: 'WWW科技YX公司',
+      name: 'WWW 科技 YX 公司',
       city: '深圳',
       province: '广东'
     },
     {
       id: '3',
-      name: 'RFV有限责任公司',
+      name: 'RFV 有限责任公司',
       city: '中山',
       province: '广东'
     },
     {
       id: '4',
-      name: 'TGB科技YX公司',
+      name: 'TGB 科技 YX 公司',
       city: '龙岩',
       province: '福建'
     },
     {
       id: '5',
-      name: 'YHN科技YX公司',
+      name: 'YHN 科技 YX 公司',
       city: '韶关',
       province: '广东'
     },
     {
       id: '6',
-      name: 'WSX科技YX公司',
+      name: 'WSX 科技 YX 公司',
       city: '黄冈',
       province: '武汉'
     },
     {
       id: '7',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '8',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     },
     {
       id: '9',
-      name: 'KBG物业YX公司',
+      name: 'KBG 物业 YX 公司',
       city: '赤壁',
       province: '武汉'
     },
     {
       id: '10',
-      name: '深圳市福德宝网络技术YX公司',
+      name: '深圳市福德宝网络技术 YX 公司',
       province: '广东',
       city: '深圳'
     }
diff --git a/examples/sites/demos/pc/app/popeditor/show-history.vue b/examples/sites/demos/pc/app/popeditor/show-history.vue
index 3dfce09a7f..92052a30fd 100644
--- a/examples/sites/demos/pc/app/popeditor/show-history.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-history.vue
@@ -39,61 +39,61 @@ export default {
         data: [
           {
             id: '1',
-            name: 'GFD科技YX公司',
+            name: 'GFD 科技 YX 公司',
             city: '福州',
             province: '福建'
           },
           {
             id: '2',
-            name: 'WWW科技YX公司',
+            name: 'WWW 科技 YX 公司',
             city: '深圳',
             province: '广东'
           },
           {
             id: '3',
-            name: 'RFV有限责任公司',
+            name: 'RFV 有限责任公司',
             city: '中山',
             province: '广东'
           },
           {
             id: '4',
-            name: 'TGB科技YX公司',
+            name: 'TGB 科技 YX 公司',
             city: '龙岩',
             province: '福建'
           },
           {
             id: '5',
-            name: 'YHN科技YX公司',
+            name: 'YHN 科技 YX 公司',
             city: '韶关',
             province: '广东'
           },
           {
             id: '6',
-            name: 'WSX科技YX公司',
+            name: 'WSX 科技 YX 公司',
             city: '黄冈',
             province: '武汉'
           },
           {
             id: '7',
-            name: 'KBG物业YX公司',
+            name: 'KBG 物业 YX 公司',
             city: '赤壁',
             province: '武汉'
           },
           {
             id: '8',
-            name: '深圳市福德宝网络技术YX公司',
+            name: '深圳市福德宝网络技术 YX 公司',
             province: '广东',
             city: '深圳'
           },
           {
             id: '9',
-            name: 'KBG物业YX公司',
+            name: 'KBG 物业 YX 公司',
             city: '赤壁',
             province: '武汉'
           },
           {
             id: '10',
-            name: '深圳市福德宝网络技术YX公司',
+            name: '深圳市福德宝网络技术 YX 公司',
             province: '广东',
             city: '深圳'
           }
diff --git a/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
index 3ee569f2d3..93182019bf 100644
--- a/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
@@ -19,61 +19,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司',
+    name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/show-overflow.spec.ts b/examples/sites/demos/pc/app/popeditor/show-overflow.spec.ts
index 46ed9c93c8..f045f75de2 100644
--- a/examples/sites/demos/pc/app/popeditor/show-overflow.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/show-overflow.spec.ts
@@ -8,11 +8,11 @@ test('PopEditor 数据超出隐藏', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const overflowDate = dialogBox.getByRole('cell', {
-    name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司'
+    name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司'
   })
-  const tooltip = page.getByRole('tooltip', { name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司' })
+  const tooltip = page.getByRole('tooltip', { name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司' })
 
-  // 数据超出隐藏，tooltips显示全部内容
+  // 数据超出隐藏，tooltips 显示全部内容
   await textBox.click()
   await expect(dialogBox).toBeVisible()
   await expect(tooltip).not.toBeVisible()
diff --git a/examples/sites/demos/pc/app/popeditor/show-overflow.vue b/examples/sites/demos/pc/app/popeditor/show-overflow.vue
index 868b6d92bd..1dfb148227 100644
--- a/examples/sites/demos/pc/app/popeditor/show-overflow.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-overflow.vue
@@ -23,61 +23,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司',
+        name: 'GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司 GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/single-select-radio.spec.ts b/examples/sites/demos/pc/app/popeditor/single-select-radio.spec.ts
index 9a3eb00834..663c7bd2f5 100644
--- a/examples/sites/demos/pc/app/popeditor/single-select-radio.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/single-select-radio.spec.ts
@@ -10,7 +10,7 @@ test('PopEditor 树模式单选', async ({ page }) => {
   const tree = dialogBox.locator('.tiny-tree')
   const treeNode = tree.locator('label')
 
-  // 单选tree模式
+  // 单选 tree 模式
   await textBox.click()
   await expect(dialogBox).toBeVisible()
   await expect(tree).toBeVisible()
diff --git a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
index 5f89e629b0..555def16f8 100644
--- a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
@@ -45,61 +45,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/size.vue b/examples/sites/demos/pc/app/popeditor/size.vue
index eec43b5690..380fcfdb11 100644
--- a/examples/sites/demos/pc/app/popeditor/size.vue
+++ b/examples/sites/demos/pc/app/popeditor/size.vue
@@ -49,61 +49,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue b/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
index 8b0db9ade2..d6818774c5 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
@@ -26,61 +26,61 @@ import { TinyPopeditor, TinyInput, TinyButton } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
index 375310b018..697cbf438a 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
@@ -14,43 +14,43 @@ import { TinyPopeditor, TinyButton } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技有限公司',
+    name: 'GFD 科技有限公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技有限公司',
+    name: 'WWW 科技有限公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技有限公司',
+    name: 'TGB 科技有限公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技有限公司',
+    name: 'YHN 科技有限公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技有限公司',
+    name: 'WSX 科技有限公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
@@ -62,7 +62,7 @@ const dataset = [
   },
   {
     id: '9',
-    name: 'KBG物业有限公司',
+    name: 'KBG 物业有限公司',
     city: '赤壁',
     province: '武汉'
   },
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer.vue b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
index 1bf31357d9..45de9cacac 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
@@ -19,43 +19,43 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技有限公司',
+        name: 'GFD 科技有限公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技有限公司',
+        name: 'WWW 科技有限公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技有限公司',
+        name: 'TGB 科技有限公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技有限公司',
+        name: 'YHN 科技有限公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技有限公司',
+        name: 'WSX 科技有限公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
@@ -67,7 +67,7 @@ export default {
       },
       {
         id: '9',
-        name: 'KBG物业有限公司',
+        name: 'KBG 物业有限公司',
         city: '赤壁',
         province: '武汉'
       },
diff --git a/examples/sites/demos/pc/app/popeditor/slot.vue b/examples/sites/demos/pc/app/popeditor/slot.vue
index b12ce0cffb..964cb7ccc0 100644
--- a/examples/sites/demos/pc/app/popeditor/slot.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot.vue
@@ -32,61 +32,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
index 61e982dc22..ada379259b 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
@@ -11,7 +11,7 @@
       :conditions="conditions"
     ></tiny-popeditor>
     <br />
-    <p>value值：{{ value }}</p>
+    <p>value 值：{{ value }}</p>
   </div>
 </template>
 
@@ -22,61 +22,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/suggest.vue b/examples/sites/demos/pc/app/popeditor/suggest.vue
index 0bd7043e37..14c47e908b 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest.vue
@@ -11,7 +11,7 @@
       :conditions="conditions"
     ></tiny-popeditor>
     <br />
-    <p>value值：{{ value }}</p>
+    <p>value 值：{{ value }}</p>
   </div>
 </template>
 
@@ -21,61 +21,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue b/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
index f83be06238..3ee6e4640a 100644
--- a/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
@@ -26,61 +26,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/tabindex.vue b/examples/sites/demos/pc/app/popeditor/tabindex.vue
index 920382bc6b..1a12243e17 100644
--- a/examples/sites/demos/pc/app/popeditor/tabindex.vue
+++ b/examples/sites/demos/pc/app/popeditor/tabindex.vue
@@ -30,61 +30,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue b/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
index e0805ba5c0..49e27c7a11 100644
--- a/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
@@ -9,61 +9,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/textField.spec.ts b/examples/sites/demos/pc/app/popeditor/textField.spec.ts
index a114b26099..a9dc7133b8 100644
--- a/examples/sites/demos/pc/app/popeditor/textField.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/textField.spec.ts
@@ -8,7 +8,7 @@ test('PopEditor 显示字段映射', async ({ page }) => {
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-  const seletItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
+  const seletItem = dialogBox.getByRole('row', { name: '1 GFD 科技 YX 公司 福建 福州' }).locator('span')
 
   // 显示城市的字段映射
   await textBox.click()
diff --git a/examples/sites/demos/pc/app/popeditor/textField.vue b/examples/sites/demos/pc/app/popeditor/textField.vue
index fb6253bead..e7b66612d6 100644
--- a/examples/sites/demos/pc/app/popeditor/textField.vue
+++ b/examples/sites/demos/pc/app/popeditor/textField.vue
@@ -13,61 +13,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/title-composition-api.vue b/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
index 6766fc03c0..57b7bf2ba4 100644
--- a/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
@@ -15,61 +15,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/title.spec.ts b/examples/sites/demos/pc/app/popeditor/title.spec.ts
index da346be2b3..aff33bd7f3 100644
--- a/examples/sites/demos/pc/app/popeditor/title.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/title.spec.ts
@@ -24,13 +24,13 @@ test.describe('PopEditor 自定义标题和提交字段映射', () => {
     const textBox = preview.getByRole('textbox')
     const dialogBox = page.locator('.tiny-dialog-box')
     const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-    const seletItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
+    const seletItem = dialogBox.getByRole('row', { name: '1 GFD 科技 YX 公司 福建 福州' }).locator('span')
 
     // 显示公司的字段映射
     await textBox.click()
     await expect(dialogBox).toBeVisible()
     await seletItem.nth(0).check()
     await confirmBtn.click()
-    await expect(textBox).toHaveValue('GFD科技YX公司')
+    await expect(textBox).toHaveValue('GFD 科技 YX 公司')
   })
 })
diff --git a/examples/sites/demos/pc/app/popeditor/title.vue b/examples/sites/demos/pc/app/popeditor/title.vue
index 63837dea84..bc52212c83 100644
--- a/examples/sites/demos/pc/app/popeditor/title.vue
+++ b/examples/sites/demos/pc/app/popeditor/title.vue
@@ -19,61 +19,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/tree.spec.ts b/examples/sites/demos/pc/app/popeditor/tree.spec.ts
index 1277f6af94..2133b7c44a 100644
--- a/examples/sites/demos/pc/app/popeditor/tree.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/tree.spec.ts
@@ -9,7 +9,7 @@ test('PopEditor 开启树模式', async ({ page }) => {
   const dialogBox = page.locator('.tiny-dialog-box')
   const tree = dialogBox.locator('.tiny-tree')
 
-  // tree模式
+  // tree 模式
   await textBox.click()
   await expect(dialogBox).toBeVisible()
   await expect(tree).toBeVisible()
diff --git a/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue b/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
index 0827e16088..de2150bc52 100644
--- a/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
@@ -20,61 +20,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/trigger.spec.ts b/examples/sites/demos/pc/app/popeditor/trigger.spec.ts
index 83b6f8b413..30ad310418 100644
--- a/examples/sites/demos/pc/app/popeditor/trigger.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/trigger.spec.ts
@@ -16,5 +16,5 @@ test('PopEditor 单选时触发勾选的方式', async ({ page }) => {
   await row.click()
   await confirmBtn.click()
   await expect(dialogBox).not.toBeVisible()
-  await expect(textBox).toHaveValue('WWW科技YX公司')
+  await expect(textBox).toHaveValue('WWW 科技 YX 公司')
 })
diff --git a/examples/sites/demos/pc/app/popeditor/trigger.vue b/examples/sites/demos/pc/app/popeditor/trigger.vue
index a75f41dfac..1e09d486ae 100644
--- a/examples/sites/demos/pc/app/popeditor/trigger.vue
+++ b/examples/sites/demos/pc/app/popeditor/trigger.vue
@@ -24,61 +24,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
index 835294585f..cc968b7e94 100644
--- a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
+++ b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
@@ -458,7 +458,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>配置 <code>auto-lookup</code> 为false，设置初始化不请求数据，也可以调用 this.$refs.popeditor.handleSearch() 主动调用请求方法。</p>',
+          '<p>配置 <code>auto-lookup</code> 为 false，设置初始化不请求数据，也可以调用 this.$refs.popeditor.handleSearch() 主动调用请求方法。</p>',
         'en-US': ''
       },
       codeFiles: ['auto-lookup.vue']
diff --git a/examples/sites/demos/pc/app/popeditor/width-composition-api.vue b/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
index 1f0a3a6a43..d9910f9b96 100644
--- a/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
@@ -16,61 +16,61 @@ import { TinyPopeditor } from '@opentiny/vue'
 const dataset = [
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD 科技 YX 公司',
     city: '福州',
     province: '福建'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW 科技 YX 公司',
     city: '深圳',
     province: '广东'
   },
   {
     id: '3',
-    name: 'RFV有限责任公司',
+    name: 'RFV 有限责任公司',
     city: '中山',
     province: '广东'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB 科技 YX 公司',
     city: '龙岩',
     province: '福建'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN 科技 YX 公司',
     city: '韶关',
     province: '广东'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX 科技 YX 公司',
     city: '黄冈',
     province: '武汉'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   },
   {
     id: '9',
-    name: 'KBG物业YX公司',
+    name: 'KBG 物业 YX 公司',
     city: '赤壁',
     province: '武汉'
   },
   {
     id: '10',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术 YX 公司',
     province: '广东',
     city: '深圳'
   }
diff --git a/examples/sites/demos/pc/app/popeditor/width.vue b/examples/sites/demos/pc/app/popeditor/width.vue
index b6298b912f..54a29ba8e1 100644
--- a/examples/sites/demos/pc/app/popeditor/width.vue
+++ b/examples/sites/demos/pc/app/popeditor/width.vue
@@ -20,61 +20,61 @@ export default {
     const dataset = [
       {
         id: '1',
-        name: 'GFD科技YX公司',
+        name: 'GFD 科技 YX 公司',
         city: '福州',
         province: '福建'
       },
       {
         id: '2',
-        name: 'WWW科技YX公司',
+        name: 'WWW 科技 YX 公司',
         city: '深圳',
         province: '广东'
       },
       {
         id: '3',
-        name: 'RFV有限责任公司',
+        name: 'RFV 有限责任公司',
         city: '中山',
         province: '广东'
       },
       {
         id: '4',
-        name: 'TGB科技YX公司',
+        name: 'TGB 科技 YX 公司',
         city: '龙岩',
         province: '福建'
       },
       {
         id: '5',
-        name: 'YHN科技YX公司',
+        name: 'YHN 科技 YX 公司',
         city: '韶关',
         province: '广东'
       },
       {
         id: '6',
-        name: 'WSX科技YX公司',
+        name: 'WSX 科技 YX 公司',
         city: '黄冈',
         province: '武汉'
       },
       {
         id: '7',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '8',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       },
       {
         id: '9',
-        name: 'KBG物业YX公司',
+        name: 'KBG 物业 YX 公司',
         city: '赤壁',
         province: '武汉'
       },
       {
         id: '10',
-        name: '深圳市福德宝网络技术YX公司',
+        name: '深圳市福德宝网络技术 YX 公司',
         province: '广东',
         city: '深圳'
       }
diff --git a/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue b/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
index fee1d818f6..d9c7371494 100644
--- a/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
@@ -40,7 +40,7 @@ import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 <style>
 /** 自定义弹出层的样式
-    由于弹出层是插入在body中的，所以写全局样式 */
+    由于弹出层是插入在 body 中的，所以写全局样式 */
 .custom-popover-demo-cls {
   font-size: 16px !important;
   font-style: italic;
diff --git a/examples/sites/demos/pc/app/popover/custom-popper.vue b/examples/sites/demos/pc/app/popover/custom-popper.vue
index 945274df94..f13506160a 100644
--- a/examples/sites/demos/pc/app/popover/custom-popper.vue
+++ b/examples/sites/demos/pc/app/popover/custom-popper.vue
@@ -50,7 +50,7 @@ export default {
 
 <style>
 /** 自定义弹出层的样式
-    由于弹出层是插入在body中的，所以写全局样式 */
+    由于弹出层是插入在 body 中的，所以写全局样式 */
 .custom-popover-demo-cls {
   font-size: 16px !important;
   font-style: italic;
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
index 70dda81f48..523fadd19e 100644
--- a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
@@ -29,12 +29,12 @@
         >
           <template #reference>
             <div>
-              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+              <tiny-button @click="visible2 = !visible2">子级弹框 2</tiny-button>
             </div>
           </template>
         </tiny-popover>
         <template #reference>
-          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+          <tiny-button @click="visible1 = !visible1">子级弹框 1</tiny-button>
         </template>
       </tiny-popover>
       <template #reference>
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
index 9d18d15b07..743cf2c2ff 100644
--- a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
@@ -29,12 +29,12 @@
         >
           <template #reference>
             <div>
-              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+              <tiny-button @click="visible2 = !visible2">子级弹框 2</tiny-button>
             </div>
           </template>
         </tiny-popover>
         <template #reference>
-          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+          <tiny-button @click="visible1 = !visible1">子级弹框 1</tiny-button>
         </template>
       </tiny-popover>
       <template #reference>
diff --git a/examples/sites/demos/pc/app/popover/transition-composition-api.vue b/examples/sites/demos/pc/app/popover/transition-composition-api.vue
index d15f25fff3..598772bafd 100644
--- a/examples/sites/demos/pc/app/popover/transition-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/transition-composition-api.vue
@@ -10,7 +10,7 @@
         content="这是一段内容。"
       >
         <template #reference>
-          <tiny-button>默认0.2s隐藏</tiny-button>
+          <tiny-button>默认 0.2s 隐藏</tiny-button>
         </template>
       </tiny-popover>
     </div>
@@ -24,7 +24,7 @@
         content="这是一段内容。"
       >
         <template #reference>
-          <tiny-button>自定义1.5s隐藏</tiny-button>
+          <tiny-button>自定义 1.5s 隐藏</tiny-button>
         </template>
       </tiny-popover>
     </div>
@@ -43,8 +43,8 @@ import { TinyPopover, TinyButton } from '@opentiny/vue'
 </style>
 
 <style>
-/** 自定义动画类名要匹配transition属性中的值
-    由于弹窗元素是插入到body中的，所以写在全局样式 */
+/** 自定义动画类名要匹配 transition 属性中的值
+    由于弹窗元素是插入到 body 中的，所以写在全局样式 */
 .custom-fade-enter,
 .custom-fade-enter-from,
 .custom-fade-leave-to {
diff --git a/examples/sites/demos/pc/app/popover/transition.spec.js b/examples/sites/demos/pc/app/popover/transition.spec.js
index 4819e45013..0dae20cadf 100644
--- a/examples/sites/demos/pc/app/popover/transition.spec.js
+++ b/examples/sites/demos/pc/app/popover/transition.spec.js
@@ -4,7 +4,7 @@ test('自定义渐变动画', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#transition')
 
-  let button1 = page.getByRole('button', { name: '默认0.2s隐藏' })
+  let button1 = page.getByRole('button', { name: '默认 0.2s 隐藏' })
   let pop1 = page.getByRole('tooltip', { name: /这是一段内容/ })
 
   await button1.hover()
diff --git a/examples/sites/demos/pc/app/popover/transition.vue b/examples/sites/demos/pc/app/popover/transition.vue
index 7ebbdeb879..40d7a7c876 100644
--- a/examples/sites/demos/pc/app/popover/transition.vue
+++ b/examples/sites/demos/pc/app/popover/transition.vue
@@ -10,7 +10,7 @@
         content="这是一段内容。"
       >
         <template #reference>
-          <tiny-button>默认0.2s隐藏</tiny-button>
+          <tiny-button>默认 0.2s 隐藏</tiny-button>
         </template>
       </tiny-popover>
     </div>
@@ -24,7 +24,7 @@
         content="这是一段内容。"
       >
         <template #reference>
-          <tiny-button>自定义1.5s隐藏</tiny-button>
+          <tiny-button>自定义 1.5s 隐藏</tiny-button>
         </template>
       </tiny-popover>
     </div>
@@ -50,8 +50,8 @@ export default {
 </style>
 
 <style>
-/** 自定义动画类名要匹配transition属性中的值
-    由于弹窗元素是插入到body中的，所以写在全局样式 */
+/** 自定义动画类名要匹配 transition 属性中的值
+    由于弹窗元素是插入到 body 中的，所以写在全局样式 */
 .custom-fade-enter,
 .custom-fade-enter-from,
 .custom-fade-leave-to {
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.cn.md b/examples/sites/demos/pc/app/popover/webdoc/popover.cn.md
index 7e6d5a0ea6..c790ec7604 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.cn.md
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.cn.md
@@ -4,4 +4,4 @@ title: Popover 气泡卡片
 
 # Popover 气泡卡片
 
-<div>Popover可通过对一个触发源操作触发弹出框，多用于信息提示和说明。</div>
+<div>Popover 可通过对一个触发源操作触发弹出框，多用于信息提示和说明。</div>
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.js b/examples/sites/demos/pc/app/popover/webdoc/popover.js
index 3b4fdb1c33..6282276ef9 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.js
@@ -32,7 +32,7 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>
+          通过<code>trigger</code> 属性设定弹出框的 4 种触发方式，默认值为 <code> click </code>。<br>
           当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。
           `,
         'en-US': `
@@ -80,7 +80,7 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>
+          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留 8px 的空间，以保证箭头不会贴在弹窗层两边。<br>
           通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置。
           `,
         'en-US': `
@@ -118,8 +118,8 @@ export default {
       },
       desc: {
         'zh-CN': `
-          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒。<br>
-          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒。<br>
+          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为 0，单位为毫秒。<br>
+          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为 200，单位为毫秒。<br>
           <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>
           `,
         'en-US': `
diff --git a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
index 60e8987f06..9d3a5cd27b 100644
--- a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
@@ -2,7 +2,7 @@
   <div class="custom-status">
     <div class="error">
       <div class="tiny-progress-demo">
-        <span class="tiny-progress-demo-title">失败:</span>
+        <span class="tiny-progress-demo-title">失败：</span>
         <div class="tiny-progress-content">
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
@@ -23,7 +23,7 @@
 
       <div class="loading">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">上传中:</span>
+          <span class="tiny-progress-demo-title">上传中：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
@@ -39,7 +39,7 @@
 
       <div class="reloading">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">失败可重试:</span>
+          <span class="tiny-progress-demo-title">失败可重试：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
@@ -63,7 +63,7 @@
 
       <div class="success">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">成功:</span>
+          <span class="tiny-progress-demo-title">成功：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
diff --git a/examples/sites/demos/pc/app/progress/custom-status.vue b/examples/sites/demos/pc/app/progress/custom-status.vue
index 578921cb90..89aae628c2 100644
--- a/examples/sites/demos/pc/app/progress/custom-status.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status.vue
@@ -2,7 +2,7 @@
   <div class="custom-status">
     <div class="error">
       <div class="tiny-progress-demo">
-        <span class="tiny-progress-demo-title">失败:</span>
+        <span class="tiny-progress-demo-title">失败：</span>
         <div class="tiny-progress-content">
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
@@ -23,7 +23,7 @@
 
       <div class="loading">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">上传中:</span>
+          <span class="tiny-progress-demo-title">上传中：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
@@ -39,7 +39,7 @@
 
       <div class="reloading">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">失败可重试:</span>
+          <span class="tiny-progress-demo-title">失败可重试：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
@@ -63,7 +63,7 @@
 
       <div class="success">
         <div class="tiny-progress-demo">
-          <span class="tiny-progress-demo-title">成功:</span>
+          <span class="tiny-progress-demo-title">成功：</span>
           <div class="tiny-progress-content">
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts b/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
index 1238c614cf..090fa6e719 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
@@ -19,7 +19,7 @@ test.describe('环形', () => {
     await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 3 A 47 47 0 1 1 50 97 A 47 47 0 1 1 50 3")')
   })
 
-  test('是否C型圆环类型', async ({ page }) => {
+  test('是否 C 型圆环类型', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).not.toBeNull())
     await page.goto('progress#progress-type-circle')
 
diff --git a/examples/sites/demos/pc/app/progress/webdoc/progress.js b/examples/sites/demos/pc/app/progress/webdoc/progress.js
index 4af25d8caa..a3d6728ca2 100644
--- a/examples/sites/demos/pc/app/progress/webdoc/progress.js
+++ b/examples/sites/demos/pc/app/progress/webdoc/progress.js
@@ -75,7 +75,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '通过 <code>type="circle"</code> 设置为圆环类型，<code>type="dashboard"</code> 则为C型圆环类型; <code>width</code> 设置环形进度条画布宽度，默认值为126px。',
+          '通过 <code>type="circle"</code> 设置为圆环类型，<code>type="dashboard"</code> 则为 C 型圆环类型; <code>width</code> 设置环形进度条画布宽度，默认值为 126px。',
         'en-US':
           'Set<code>type="circle"</code>to the circular type, and<code>type="dashboard"</code>to the C-shaped circular type< Code>width</code>Set the width of the circular progress bar canvas, with a default value of 126px.'
       },
diff --git a/examples/sites/demos/pc/app/qr-code/icon.spec.ts b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
index 64488adc7c..8bc04280fe 100644
--- a/examples/sites/demos/pc/app/qr-code/icon.spec.ts
+++ b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义icon', async ({ page }) => {
+test('自定义 icon', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#icon')
 
diff --git a/examples/sites/demos/pc/app/query-builder/sub-component-param.vue b/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
index b3789b9ee8..e27b75c66e 100644
--- a/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
+++ b/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
@@ -104,7 +104,7 @@ const config = {
   showLockButtons: false,
   bindProps: {
     leftSelect: {
-      // 此为左侧Select参数，统一控制左侧所有Select
+      // 此为左侧 Select 参数，统一控制左侧所有 Select
       filterable: true,
       filterMethod: (value, data) => {
         if (!value) return true
@@ -112,11 +112,11 @@ const config = {
       }
     },
     input: {
-      // 此为输入框参数，包括textarea
+      // 此为输入框参数，包括 textarea
       clearable: true
     },
     select: {
-      // 此为右侧Select参数
+      // 此为右侧 Select 参数
       clearable: true
     },
     numeric: {
diff --git a/examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js b/examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js
index fad26d58ad..c489eb471d 100644
--- a/examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js
+++ b/examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js
@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "\n          <div class=\"tip custom-block\">\n           <p class=\"custom-block-title\"> config 属性说明 </p>\n       <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  <br>\n       <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  <br>\n       <code>disabled</code>：禁用所有规则  <br>\n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  <br>\n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  <br>\n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  <br>\n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  <br>\n       <code>showNotToggle</code>：展示 not 条件切换框  <br>\n       <code>displayOnlyField</code>：是否仅展示字段选择器  <br>\n       </div>  <br>\n       二、fields 数据配置  <br>\n      <pre> <code>\n       fields中的数据（只用于说明各字段含义，无业务特定性）  <br>\n       {  <br>\n         name: 'isMusician', //name：格式化数据中的值（形参）  <br>\n         label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  <br>\n         valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  <br>\n         operators: [ //运算符自定义，name为格式化数据中的值，label为范围域对外展示的名称  <br>\n           {  <br>\n             name: '=',  <br>\n             label: '='  <br>\n           }  <br>\n         ],  <br>\n         bindProps: { // 通过bindProps参数可对某一类组件进行参数控制  <br>\n           input:{  <br>\n             clearable:true  <br>\n           },  <br>\n           select:{  <br>\n             filterable:true  <br>\n           }  <br>\n         },  <br>\n         defaultValue: false, //defaultOperator：运算符的默认缺省选择  <br>\n         validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  <br>\n         inputType: 'number', //值域的数值类型  <br>\n         valueEditorType: 'radio' //值域编辑器的类型  <br>\n         defaultValue: false, //值域的默认值  <br>\n         values: [ //值域的可选域配置（下拉）  <br>\n           {  <br>\n              label: 'Percussion instruments',  <br>\n              options: [  <br>\n               {  <br>\n                    name: 'Clapstick',  <br>\n                    label: 'Clapstick'  <br>\n               }  <br>\n             ]  <br>\n           }  <br>\n         ],  <br>\n         values: [ //值域的可选域配置（单选）  <br>\n           {  <br>\n              name: 'M',  <br>\n              label: 'Male'  <br>\n           },  <br>\n           {  <br>\n              name: 'F',  <br>\n              label: 'Female'  <br>\n           },  <br>\n           {  <br>\n              name: 'O',  <br>\n              label: 'Other'  <br>\n           }  <br>\n         ],  <br>\n         valueSources: ['field', 'value'], //值域类型可选择  <br>\n         comparator: 'groupNumber', //分组时的比较器  <br>\n         groupNumber: 'group1', //分组的组别  <br>\n       },  <br>\n       // 组合子数组配置，label为展示字符，name为数据值  <br>\n       combinators: [  <br>\n         {  <br>\n           name: 'and',  <br>\n           label: '且'  <br>\n         },  <br>\n         {  <br>\n           name: 'or',  <br>\n           label: '或'  <br>\n         }  <br>\n       ]  <br>\n       </code></pre>  <br>\n       ",
+          "\n          <div class=\"tip custom-block\">\n           <p class=\"custom-block-title\"> config 属性说明 </p>\n       <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  <br>\n       <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  <br>\n       <code>disabled</code>：禁用所有规则  <br>\n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  <br>\n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  <br>\n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  <br>\n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  <br>\n       <code>showNotToggle</code>：展示 not 条件切换框  <br>\n       <code>displayOnlyField</code>：是否仅展示字段选择器  <br>\n       </div>  <br>\n       二、fields 数据配置  <br>\n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  <br>\n       {  <br>\n         name: 'isMusician', //name：格式化数据中的值（形参）  <br>\n         label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  <br>\n         valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  <br>\n         operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  <br>\n           {  <br>\n             name: '=',  <br>\n             label: '='  <br>\n           }  <br>\n         ],  <br>\n         bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  <br>\n           input:{  <br>\n             clearable:true  <br>\n           },  <br>\n           select:{  <br>\n             filterable:true  <br>\n           }  <br>\n         },  <br>\n         defaultValue: false, //defaultOperator：运算符的默认缺省选择  <br>\n         validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  <br>\n         inputType: 'number', //值域的数值类型  <br>\n         valueEditorType: 'radio' //值域编辑器的类型  <br>\n         defaultValue: false, //值域的默认值  <br>\n         values: [ //值域的可选域配置（下拉）  <br>\n           {  <br>\n              label: 'Percussion instruments',  <br>\n              options: [  <br>\n               {  <br>\n                    name: 'Clapstick',  <br>\n                    label: 'Clapstick'  <br>\n               }  <br>\n             ]  <br>\n           }  <br>\n         ],  <br>\n         values: [ //值域的可选域配置（单选）  <br>\n           {  <br>\n              name: 'M',  <br>\n              label: 'Male'  <br>\n           },  <br>\n           {  <br>\n              name: 'F',  <br>\n              label: 'Female'  <br>\n           },  <br>\n           {  <br>\n              name: 'O',  <br>\n              label: 'Other'  <br>\n           }  <br>\n         ],  <br>\n         valueSources: ['field', 'value'], //值域类型可选择  <br>\n         comparator: 'groupNumber', //分组时的比较器  <br>\n         groupNumber: 'group1', //分组的组别  <br>\n       },  <br>\n       // 组合子数组配置，label 为展示字符，name 为数据值  <br>\n       combinators: [  <br>\n         {  <br>\n           name: 'and',  <br>\n           label: '且'  <br>\n         },  <br>\n         {  <br>\n           name: 'or',  <br>\n           label: '或'  <br>\n         }  <br>\n       ]  <br>\n       </code></pre>  <br>\n       ",
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
@@ -47,7 +47,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '添加 max-height 属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值+单位，如 500、500px、50rem 等。',
+          '添加 max-height 属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值 + 单位，如 500、500px、50rem 等。',
         'en-US': ' '
       },
       codeFiles: ['max-height.vue']
@@ -73,7 +73,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 自定义组件必须实现:<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',
         'en-US': ' '
       },
       codeFiles: ['advanced-mode.vue']