style: 优化公告和字典项响应式窗口效果

src/views/system/dict/item/index.vue

@@ -6,7 +6,7 @@
     :mask-closable="false"
     :esc-to-close="false"
     :modal-style="{ maxWidth: '780px' }"
-    width="90%"
+    :width="width >= 600 ? '90%' : '100%'"
     ok-text="关闭"
     hide-cancel
   >
@@ -68,7 +68,9 @@ import DictItemAddModal from './DictItemAddModal.vue'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
+import { useWindowSize } from '@vueuse/core'
 
+const { width } = useWindowSize()
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',

src/views/system/notice/NoticeAddModal.vue

@@ -4,7 +4,7 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    width="80%"
+    :width="width >= 600 ? '80%' : '100%'"
     @before-ok="save"
     @close="reset"
   >
@@ -69,7 +69,9 @@ import { Message, type FormInstance } from '@arco-design/web-vue'
 import { useForm } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { MdEditor } from 'md-editor-v3'
+import { useWindowSize } from '@vueuse/core'
 
+const { width } = useWindowSize()
 const { notice_type } = useDict('notice_type')
 
 const dataId = ref('')

src/views/system/notice/NoticeDetailModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model:visible="visible" width="70%" :footer="false" @close="reset">
+  <a-modal v-model:visible="visible" :width="width >= 600 ? '70%' : '100%'" :footer="false" @close="reset">
     <a-typography :style="{ marginTop: '-40px', textAlign: 'center' }">
       <a-typography-title>
         {{ dataDetail?.title }}
@@ -38,7 +38,9 @@
 <script setup lang="ts">
 import { getNotice, type NoticeResp } from '@/apis'
 import { MdPreview } from 'md-editor-v3'
+import { useWindowSize } from '@vueuse/core'
 
+const { width } = useWindowSize()
 const dataDetail = ref<NoticeResp>()
 const visible = ref(false)
 // 详情