refactor: vue3.3 defineOptions

src/views/mp/account/AccountForm.vue

@@ -68,9 +68,11 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="MpAccountForm" setup>
+<script lang="ts" setup>
 import * as AccountApi from '@/api/mp/account'
 
+defineOptions({ name: 'MpAccountForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mp/account/index.vue

@@ -100,9 +100,12 @@
   <!-- 对话框(添加 / 修改) -->
   <AccountForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="MpAccount">
+<script setup lang="ts">
 import * as AccountApi from '@/api/mp/account'
 import AccountForm from './AccountForm.vue'
+
+defineOptions({ name: 'MpAccount' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/mp/autoReply/components/ReplyForm.vue

@@ -32,12 +32,14 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ReplyForm">
+<script setup lang="ts">
 import WxReplySelect, { type Reply } from '@/views/mp/components/wx-reply'
 import type { FormInstance } from 'element-plus'
 import { MsgType } from './types'
 import { DICT_TYPE, getDictOptions, getIntDictOptions } from '@/utils/dict'
 
+defineOptions({ name: 'ReplyForm' })
+
 const props = defineProps<{
   modelValue: any
   reply: Reply

src/views/mp/autoReply/index.vue

@@ -67,7 +67,7 @@
     </el-dialog>
   </ContentWrap>
 </template>
-<script setup lang="ts" name="MpAutoReply">
+<script setup lang="ts">
 import ReplyForm from '@/views/mp/autoReply/components/ReplyForm.vue'
 import { type Reply, ReplyType } from '@/views/mp/components/wx-reply'
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
@@ -76,6 +76,9 @@ import { ContentWrap } from '@/components/ContentWrap'
 import type { TabPaneName } from 'element-plus'
 import ReplyTable from './components/ReplyTable.vue'
 import { MsgType } from './components/types'
+
+defineOptions({ name: 'MpAutoReply' })
+
 const message = useMessage() // 消息
 
 const accountId = ref(-1) // 公众号ID

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

src/views/mp/draft/components/NewsForm.vue

@@ -125,12 +125,14 @@
   </el-container>
 </template>
 
-<script setup lang="ts" name="NewsForm">
+<script setup lang="ts">
 import { Editor } from '@/components/Editor'
 import { createEditorConfig } from '../editor-config'
 import CoverSelect from './CoverSelect.vue'
 import { type NewsItem, createEmptyNewsItem } from './types'
 
+defineOptions({ name: 'NewsForm' })
+
 const message = useMessage()
 
 const props = defineProps<{

src/views/mp/draft/index.vue

@@ -61,7 +61,7 @@
   </el-dialog>
 </template>
 
-<script setup lang="ts" name="MpDraft">
+<script setup lang="ts">
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
 import * as MpDraftApi from '@/api/mp/draft'
 import * as MpFreePublishApi from '@/api/mp/freePublish'
@@ -74,6 +74,8 @@ import {
 } from './components/'
 // import drafts from './mock' // 可以用改本地数据模拟，避免API调用超限
 
+defineOptions({ name: 'MpDraft' })
+
 const message = useMessage() // 消息
 
 const accountId = ref(-1)

src/views/mp/freePublish/index.vue

@@ -48,10 +48,13 @@
   </ContentWrap>
 </template>
 
-<script lang="ts" setup name="MpFreePublish">
+<script lang="ts" setup>
 import * as FreePublishApi from '@/api/mp/freePublish'
 import WxNews from '@/views/mp/components/wx-news'
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
+
+defineOptions({ name: 'MpFreePublish' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -98,7 +101,7 @@ const handleDelete = async (item: any) => {
 }
 </script>
 <style lang="scss" scoped>
-@media (min-width: 992px) and (max-width: 1300px) {
+@media (width >= 992px) and (width <= 1300px) {
   .waterfall {
     column-count: 3;
   }
@@ -108,7 +111,7 @@ const handleDelete = async (item: any) => {
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (width >= 768px) and (width <= 991px) {
   .waterfall {
     column-count: 2;
   }
@@ -118,7 +121,7 @@ const handleDelete = async (item: any) => {
   }
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .waterfall {
     column-count: 1;
   }

src/views/mp/menu/index.vue

@@ -52,7 +52,7 @@
   </ContentWrap>
 </template>
 
-<script lang="ts" setup name="MpMenu">
+<script lang="ts" setup>
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
 import MenuEditor from './components/MenuEditor.vue'
 import MenuPreviewer from './components/MenuPreviewer.vue'
@@ -60,6 +60,8 @@ import * as MpMenuApi from '@/api/mp/menu'
 import * as UtilsTree from '@/utils/tree'
 import { RawMenu, Menu } from './components/types'
 
+defineOptions({ name: 'MpMenu' })
+
 const message = useMessage() // 消息
 const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__'
 

src/views/mp/message/index.vue

@@ -79,7 +79,7 @@
     <WxMsg :user-id="messageBox.userId" />
   </el-dialog>
 </template>
-<script setup lang="ts" name="MpMessage">
+<script setup lang="ts">
 import * as MpMessageApi from '@/api/mp/message'
 import WxMsg from '@/views/mp/components/wx-msg'
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
@@ -88,6 +88,8 @@ import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { MsgType } from '@/views/mp/components/wx-msg/types'
 import type { FormInstance } from 'element-plus'
 
+defineOptions({ name: 'MpMessage' })
+
 const loading = ref(false)
 const total = ref(0) // 数据的总页数
 const list = ref<any[]>([]) // 当前页的列表数据

src/views/mp/statistics/index.vue

@@ -73,10 +73,13 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="MpStatistics">
+<script setup lang="ts">
 import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
 import * as StatisticsApi from '@/api/mp/statistics'
 import * as MpAccountApi from '@/api/mp/account'
+
+defineOptions({ name: 'MpStatistics' })
+
 const message = useMessage() // 消息弹窗
 
 // 默认开始时间是当前日期-7，结束时间是当前日期-1

src/views/mp/tag/TagForm.vue

@@ -17,10 +17,12 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="MpTagForm" setup>
+<script lang="ts" setup>
 import * as MpTagApi from '@/api/mp/tag'
 import type { FormInstance, FormRules } from 'element-plus'
 
+defineOptions({ name: 'MpTagForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mp/tag/index.vue

@@ -82,12 +82,14 @@
   <!-- 表单弹窗：添加/修改 -->
   <TagForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="MpTag">
+<script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import * as MpTagApi from '@/api/mp/tag'
 import TagForm from './TagForm.vue'
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
 
+defineOptions({ name: 'MpTag' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/mp/user/UserForm.vue

@@ -30,10 +30,12 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="MpUserForm" setup>
+<script lang="ts" setup>
 import * as MpTagApi from '@/api/mp/tag'
 import * as MpUserApi from '@/api/mp/user'
 
+defineOptions({ name: 'MpUserForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/mp/user/index.vue

@@ -99,7 +99,7 @@
   <!-- 表单弹窗：修改 -->
   <UserForm ref="formRef" @success="getList" />
 </template>
-<script lang="ts" setup name="MpUser">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as MpUserApi from '@/api/mp/user'
 import * as MpTagApi from '@/api/mp/tag'
@@ -107,6 +107,8 @@ import WxAccountSelect from '@/views/mp/components/wx-account-select'
 import type { FormInstance } from 'element-plus'
 import UserForm from './UserForm.vue'
 
+defineOptions({ name: 'MpUser' })
+
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中