refactor: vue3.3 defineOptions

src/views/mp/components/wx-account-select/main.vue

@@ -4,9 +4,11 @@
   </el-select>
 </template>
 
-<script lang="ts" setup name="WxAccountSelect">
+<script lang="ts" setup>
 import * as MpAccountApi from '@/api/mp/account'
 
+defineOptions({ name: 'WxAccountSelect' })
+
 const account: MpAccountApi.AccountVO = reactive({
   id: -1,
   name: ''

src/views/mp/components/wx-location/main.vue

@@ -39,7 +39,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="WxLocation">
+<script setup lang="ts">
+defineOptions({ name: 'WxLocation' })
+
 const props = defineProps({
   locationX: {
     required: true,

src/views/mp/components/wx-material-select/main.vue

@@ -131,7 +131,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="WxMaterialSelect">
+<script lang="ts" setup>
 import WxNews from '@/views/mp/components/wx-news'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play'
@@ -141,6 +141,8 @@ import * as MpFreePublishApi from '@/api/mp/freePublish'
 import * as MpDraftApi from '@/api/mp/draft'
 import { dateFormatter } from '@/utils/formatTime'
 
+defineOptions({ name: 'WxMaterialSelect' })
+
 const props = withDefaults(
   defineProps<{
     type: string

src/views/mp/components/wx-msg/components/Msg.vue

@@ -48,7 +48,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="Msg">
+<script setup lang="ts">
 import WxVideoPlayer from '@/views/mp/components/wx-video-play'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
 import WxNews from '@/views/mp/components/wx-news'
@@ -57,6 +57,8 @@ import WxMusic from '@/views/mp/components/wx-music'
 import MsgEvent from './MsgEvent.vue'
 import { MsgType } from '../types'
 
+defineOptions({ name: 'Msg' })
+
 const props = defineProps<{
   item: any
 }>()

src/views/mp/components/wx-msg/components/MsgList.vue

@@ -24,12 +24,14 @@
     </div>
   </div>
 </template>
-<script setup lang="ts" name="MsgList">
+<script setup lang="ts">
 import Msg from './Msg.vue'
 import { formatDate } from '@/utils/formatTime'
 import { User } from '../types'
 import avatarWechat from '@/assets/imgs/wechat.png'
 
+defineOptions({ name: 'MsgList' })
+
 const props = defineProps<{
   list: any[]
   accountId: number

src/views/mp/components/wx-msg/main.vue

@@ -30,7 +30,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="WxMsg">
+<script setup lang="ts">
 import WxReplySelect, { Reply, ReplyType } from '@/views/mp/components/wx-reply'
 import MsgList from './components/MsgList.vue'
 import { getMessagePage, sendMessage } from '@/api/mp/message'
@@ -38,6 +38,8 @@ import { getUser } from '@/api/mp/user'
 import profile from '@/assets/imgs/profile.jpg'
 import { User } from './types'
 
+defineOptions({ name: 'WxMsg' })
+
 const message = useMessage() // 消息弹窗
 
 const props = defineProps({

src/views/mp/components/wx-music/main.vue

@@ -25,7 +25,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="WxMusic">
+<script setup lang="ts">
+defineOptions({ name: 'WxMusic' })
+
 const props = defineProps({
   title: {
     required: false,

src/views/mp/components/wx-news/main.vue

@@ -38,7 +38,9 @@
   </div>
 </template>
 
-<script lang="ts" name="WxNews" setup>
+<script lang="ts" setup>
+defineOptions({ name: 'WxNews' })
+
 const props = withDefaults(
   defineProps<{
     articles: any[] | null

src/views/mp/components/wx-reply/main.vue

@@ -59,7 +59,7 @@
   </el-tabs>
 </template>
 
-<script setup lang="ts" name="WxReplySelect">
+<script setup lang="ts">
 import { Reply, NewsType, ReplyType, createEmptyReply } from './components/types'
 import TabText from './components/TabText.vue'
 import TabImage from './components/TabImage.vue'
@@ -68,6 +68,8 @@ import TabVideo from './components/TabVideo.vue'
 import TabNews from './components/TabNews.vue'
 import TabMusic from './components/TabMusic.vue'
 
+defineOptions({ name: 'WxReplySelect' })
+
 interface Props {
   modelValue: Reply
   newsType?: NewsType

src/views/mp/components/wx-video-play/main.vue

@@ -48,10 +48,12 @@
   </div>
 </template>
 
-<script setup lang="ts" name="WxVideoPlayer">
+<script setup lang="ts">
 import 'video.js/dist/video-js.css'
 import { VideoPlayer } from '@videojs-player/vue'
 
+defineOptions({ name: 'WxVideoPlayer' })
+
 const props = defineProps({
   url: {
     type: String,

src/views/mp/components/wx-voice-play/main.vue

@@ -23,10 +23,12 @@
   </div>
 </template>
 
-<script setup lang="ts" name="WxVoicePlayer">
+<script setup lang="ts">
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder'
 
+defineOptions({ name: 'WxVoicePlayer' })
+
 const props = defineProps({
   url: {
     type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr