refactor: vue3.3 defineOptions

src/views/infra/apiAccessLog/index.vue

@@ -35,10 +35,12 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraApiAccessLog">
+<script setup lang="ts">
 import { allSchemas } from './apiAccessLog.data'
 import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
 
+defineOptions({ name: 'InfraApiAccessLog' })
+
 const { t } = useI18n() // 国际化
 
 // 列表相关的变量

src/views/infra/apiErrorLog/index.vue

@@ -51,11 +51,13 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraApiErrorLog">
+<script setup lang="ts">
 import { allSchemas } from './apiErrorLog.data'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
 
+defineOptions({ name: 'InfraApiErrorLog' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage()
 

src/views/infra/build/index.vue

@@ -27,7 +27,7 @@
     </div>
   </Dialog>
 </template>
-<script lang="ts" name="InfraBuild" setup>
+<script lang="ts" setup>
 import FcDesigner from '@form-create/designer'
 // import { useClipboard } from '@vueuse/core'
 import { isString } from '@/utils/is'
@@ -38,6 +38,8 @@ import xml from 'highlight.js/lib/languages/java'
 import json from 'highlight.js/lib/languages/json'
 import formCreate from '@form-create/element-ui'
 
+defineOptions({ name: 'InfraBuild' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 

src/views/infra/codegen/index.vue

@@ -56,13 +56,15 @@
   <!-- 弹窗：预览代码 -->
   <Preview ref="previewRef" />
 </template>
-<script setup lang="ts" name="InfraCodegen">
+<script setup lang="ts">
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
 import { CodegenTableVO } from '@/api/infra/codegen/types'
 import { allSchemas } from './codegen.data'
 import { ImportTable, Preview } from './components'
 
+defineOptions({ name: 'InfraCodegen' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter() // 路由跳转

src/views/infra/config/index.vue

@@ -82,12 +82,14 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraConfig">
+<script setup lang="ts">
 import type { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import * as ConfigApi from '@/api/infra/config'
 import { rules, allSchemas } from './config.data'
 
+defineOptions({ name: 'InfraConfig' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量

src/views/infra/dataSourceConfig/index.vue

@@ -65,12 +65,14 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraDataSourceConfig">
+<script setup lang="ts">
 import type { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
 import { rules, allSchemas } from './dataSourceConfig.data'
 
+defineOptions({ name: 'InfraDataSourceConfig' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量

src/views/infra/dbDoc/index.vue

@@ -14,10 +14,12 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="InfraDBDoc">
+<script setup lang="ts">
 import download from '@/utils/download'
 import * as DbDocApi from '@/api/infra/dbDoc'
 
+defineOptions({ name: 'InfraDBDoc' })
+
 const loading = ref(true) // 是否加载中
 const src = ref('') // HTML 的地址
 

src/views/infra/druid/index.vue

@@ -3,9 +3,11 @@
     <IFrame v-if="!loading" :src="url" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="InfraDruid">
+<script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
 
+defineOptions({ name: 'InfraDruid' })
+
 const loading = ref(true) // 是否加载中
 const url = ref(import.meta.env.VITE_BASE_URL + '/druid/index.html')
 

src/views/infra/file/index.vue

@@ -78,7 +78,7 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraFile">
+<script setup lang="ts">
 import type { UploadInstance, UploadRawFile, UploadProps, UploadFile } from 'element-plus'
 // 业务相关的 import
 import { allSchemas } from './fileList.data'
@@ -86,6 +86,8 @@ import * as FileApi from '@/api/infra/fileList'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 // import { useClipboard } from '@vueuse/core'
 
+defineOptions({ name: 'InfraFile' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/infra/fileConfig/index.vue

@@ -157,13 +157,15 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraFileConfig">
+<script setup lang="ts">
 import type { FormInstance } from 'element-plus'
 // 业务相关的 import
 import * as FileConfigApi from '@/api/infra/fileConfig'
 import { rules, allSchemas } from './fileConfig.data'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 
+defineOptions({ name: 'InfraFileConfig' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量

src/views/infra/job/JobLog.vue

@@ -47,13 +47,15 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraJobLog">
+<script setup lang="ts">
 import dayjs from 'dayjs'
 
 import * as JobLogApi from '@/api/infra/jobLog'
 import { allSchemas } from './jobLog.data'
 import { useRoute } from 'vue-router'
 
+defineOptions({ name: 'InfraJobLog' })
+
 const { t } = useI18n() // 国际化
 
 const { query } = useRoute()

src/views/infra/job/index.vue

@@ -128,12 +128,14 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraJob">
+<script setup lang="ts">
 import type { FormExpose } from '@/components/Form'
 import * as JobApi from '@/api/infra/job'
 import { rules, allSchemas } from './job.data'
 import { InfraJobStatusEnum } from '@/utils/constants'
 
+defineOptions({ name: 'InfraJob' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter()

src/views/infra/redis/index.vue

@@ -104,10 +104,13 @@
     </el-row>
   </XModal>
 </template>
-<script setup lang="ts" name="InfraRedis">
+<script setup lang="ts">
 import * as RedisApi from '@/api/infra/redis'
 import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types'
 import { DICT_TYPE } from '@/utils/dict'
+
+defineOptions({ name: 'InfraRedis' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const cache = ref<RedisMonitorInfoVO>()

src/views/infra/server/index.vue

@@ -3,9 +3,11 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="InfraAdminServer">
+<script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
 
+defineOptions({ name: 'InfraAdminServer' })
+
 const loading = ref(true) // 是否加载中
 const src = ref(import.meta.env.VITE_BASE_URL + '/admin/applications')
 

src/views/infra/skywalking/index.vue

@@ -3,9 +3,11 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="InfraSkyWalking">
+<script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
 
+defineOptions({ name: 'InfraSkyWalking' })
+
 const loading = ref(true) // 是否加载中
 const src = ref('http://skywalking.shop.iocoder.cn')
 

src/views/infra/swagger/index.vue

@@ -3,9 +3,11 @@
     <IFrame :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="InfraSwagger">
+<script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
 
+defineOptions({ name: 'InfraSwagger' })
+
 const loading = ref(true) // 是否加载中
 const src = ref(import.meta.env.VITE_BASE_URL + '/doc.html') // Knife4j UI
 // const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI

src/views/infra/testDemo/index.vue

@@ -1,4 +1,6 @@
 <template>
   <div>index</div>
 </template>
-<script setup lang="ts" name="TestDome"></script>
+<script setup lang="ts">
+  defineOptions({ name: 'TestDome' })
+</script>

src/views/infra/webSocket/index.vue

@@ -55,11 +55,13 @@
     </el-card>
   </div>
 </template>
-<script lang="ts" name="WebSocket" setup>
+<script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import { useUserStore } from '@/store/modules/user'
 import { useWebSocket } from '@vueuse/core'
 
+defineOptions({ name: 'WebSocket' })
+
 const userStore = useUserStore()
 
 const sendValue = ref('')