chore: 添加组件name

packages/design/package.json

@@ -48,6 +48,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }

packages/design/src/Button.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMButton">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Card.vue

@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCard">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Cascader.vue

@@ -8,7 +8,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCascader">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Checkbox.vue

@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCheckbox">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/CheckboxGroup.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCheckboxGroup">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Col.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCol">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Collapse.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCollapse">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/CollapseItem.vue

@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMCollapseItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/ColorPicker.vue

@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMColorPicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/DatePicker.vue

@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDatePicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Dialog.vue

@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDialog">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Divider.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDivider">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Dropdown.vue

@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdown">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/DropdownItem.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdownItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/DropdownMenu.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMDropdownMenu">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Form.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMForm">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/FormItem.vue

@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMFormItem">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Icon.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMIcon">
 import { getConfig } from './config';
 
 const uiComponent = getConfig('components').icon;

packages/design/src/Input.vue

@@ -15,7 +15,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMInput">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/InputNumber.vue

@@ -8,7 +8,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMInputNumber">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Option.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMOption">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/OptionGroup.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMOptionGroup">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Pagination.vue

@@ -7,7 +7,7 @@
   ></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMPagination">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Popover.vue

@@ -8,7 +8,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMPopover">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Radio.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRadio">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/RadioGroup.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRadioGroup">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Row.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMRow">
 import { getConfig } from './config';
 
 const uiComponent = getConfig('components').row;

packages/design/src/Scrollbar.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMScrollbar">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Select.vue

@@ -11,7 +11,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSelect">
 import { computed, onMounted, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Step.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMStep">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Steps.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSteps">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Switch.vue

@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMSwitch">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/TabPane.vue

@@ -10,7 +10,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTabPane">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Table.vue

@@ -10,7 +10,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTable">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/TableColumn.vue

@@ -6,7 +6,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTableColumn">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Tabs.vue

@@ -12,7 +12,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTabs">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Tag.vue

@@ -4,7 +4,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTag">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/TimePicker.vue

@@ -3,7 +3,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTimePicker">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Tooltip.vue

@@ -7,7 +7,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTooltip">
 import { computed } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Tree.vue

@@ -18,7 +18,7 @@
   </component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMTree">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/src/Upload.vue

@@ -2,7 +2,7 @@
   <component ref="upload" :is="uiComponent.component" v-bind="uiProps" @change="changeHandler"></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="TMUpload">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';

packages/design/vite.config.ts

@@ -17,12 +17,13 @@
  */
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   optimizeDeps: {
     esbuildOptions: {

packages/editor/package.json

@@ -79,6 +79,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }

packages/editor/src/components/ContentMenu.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorContentMenu">
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '../type';

packages/editor/src/components/Icon.vue

@@ -7,7 +7,7 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorIcon">
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 

packages/editor/src/components/ScrollBar.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollBar">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 

packages/editor/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollViewer">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { ScrollViewerEvent } from '../type';

packages/editor/src/components/ToolButton.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorToolButton">
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 

packages/editor/src/fields/Code.vue

@@ -8,7 +8,7 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCode">
 import { computed } from 'vue';
 
 const emit = defineEmits(['change']);

packages/editor/src/fields/CodeLink.vue

@@ -2,7 +2,7 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeLink">
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 

packages/editor/src/fields/CodeSelect.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeSelect">
 import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
 import { map, xor } from 'lodash-es';
 

packages/editor/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorUISelect">
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorAddPageBox">
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/CodeEditor.vue

@@ -2,7 +2,7 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeEditor">
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';

packages/editor/src/layouts/Framework.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorFramework">
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';

packages/editor/src/layouts/Layout.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayout">
 import { onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from './Resizer.vue';

packages/editor/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorNavMenu">
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/PropsPanel.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPropsPanel">
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';

packages/editor/src/layouts/Resizer.vue

@@ -4,7 +4,7 @@
   </span>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorResizer">
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 

packages/editor/src/layouts/sidebar/ComponentListPanel.vue

@@ -38,7 +38,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorComponentListPanel">
 import { computed, inject, ref } from 'vue';
 import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';

packages/editor/src/layouts/sidebar/LayerMenu.vue

@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayerMenu">
 import { computed, inject, markRaw, ref } from 'vue';
 import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -65,7 +65,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayerPanel">
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -78,7 +78,7 @@
   </TMagicTabs>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -81,7 +81,7 @@
   </TMagicDialog>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -93,7 +93,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeBlockList">
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
 import { forIn, isEmpty } from 'lodash-es';

packages/editor/src/layouts/workspace/Breadcrumb.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorBreadcrumb">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';

packages/editor/src/layouts/workspace/PageBar.vue

@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPageBar">
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorPageBarScrollContainer">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/workspace/Stage.vue

@@ -22,7 +22,7 @@
   </scroll-viewer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorStage">
 import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 

packages/editor/src/layouts/workspace/ViewerMenu.vue

@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorViewerMenu">
 import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 

packages/editor/src/layouts/workspace/Workspace.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorWorkspace">
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 

packages/editor/vite.config.ts

@@ -19,12 +19,13 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), VueSetupExtend()],
 
   resolve: {
     alias:

packages/form/package.json

@@ -56,6 +56,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.8"
   }
 }

packages/form/src/Form.vue

@@ -24,7 +24,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MForm">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import isEqual from 'lodash-es/isEqual';

packages/form/src/FormDialog.vue

@@ -55,7 +55,7 @@
   </TMagicDialog>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormDialog">
 import { computed, ref } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';

packages/form/src/containers/Col.vue

@@ -12,7 +12,7 @@
   </TMagicCol>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCol">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';

packages/form/src/containers/Container.vue

@@ -104,7 +104,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormContainer">
 import { computed, inject, ref, resolveComponent, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 

packages/form/src/containers/Fieldset.vue

@@ -52,7 +52,7 @@
   </fieldset>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormFieldset">
 import { computed, inject, watch } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';

packages/form/src/containers/GroupList.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupList">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 

packages/form/src/containers/GroupListItem.vue

@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormGroupListItem">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 

packages/form/src/containers/Panel.vue

@@ -49,7 +49,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormPanel">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 

packages/form/src/containers/Row.vue

@@ -15,7 +15,7 @@
   </TMagicRow>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormRow">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';

packages/form/src/containers/Step.vue

@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormStep">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';

packages/form/src/containers/Table.vue

@@ -159,7 +159,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormTable">
 import { computed, inject, onMounted, ref, toRefs } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';

packages/form/src/containers/Tabs.vue

@@ -42,7 +42,7 @@
   </TMagicTabs>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormTabs">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 

packages/form/src/fields/Cascader.vue

@@ -14,7 +14,7 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCascader">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';

packages/form/src/fields/Checkbox.vue

@@ -10,7 +10,7 @@
   >
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormCheckbox">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';

packages/form/src/fields/CheckboxGroup.vue

@@ -6,7 +6,7 @@
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormCheckGroup">
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';

packages/form/src/fields/ColorPicker.vue

@@ -8,7 +8,7 @@
   ></TMagicColorPicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormColorPicker">
 import { TMagicColorPicker } from '@tmagic/design';
 
 import { ColorPickConfig } from '../schema';

packages/form/src/fields/Date.vue

@@ -11,7 +11,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDate">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 

packages/form/src/fields/DateTime.vue

@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateTime">
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 

packages/form/src/fields/Daterange.vue

@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDateRange">
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';

packages/form/src/fields/Display.vue

@@ -2,7 +2,7 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormDisplay">
 import { DisplayConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

packages/form/src/fields/DynamicField.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormDynamicField">
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',

packages/form/src/fields/Hidden.vue

@@ -2,7 +2,7 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MFormHidden">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 

packages/form/src/fields/Link.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormLink">
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';

packages/form/src/fields/Number.vue

@@ -15,7 +15,7 @@
   ></TMagicInputNumber>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormNumber">
 import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';

packages/form/src/fields/RadioGroup.vue

@@ -6,7 +6,7 @@
   </TMagicRadioGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormRadioGroup">
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
 import { RadioGroupConfig } from '../schema';

packages/form/src/fields/Select.vue

@@ -25,7 +25,7 @@
   </TMagicSelect>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelect">
 import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';