style: 优化公告相关样式

src/views/home/components/NoticeCard.vue

@@ -12,12 +12,20 @@
       style="overflow: hidden"
     >
       <template #content>
-        <div class="content">
+        <a-space>
           <GiCellTag :value="item.type" :dict="notice_type" />
-          <p>
-            <a-link @click="onDetail(item.id)">{{ item.title }}</a-link>
-          </p>
-        </div>
+          <a-link @click="onDetail(item.id)">
+            <a-typography-paragraph
+              :ellipsis="{
+                rows: 1,
+                showTooltip: true,
+                css: true,
+              }"
+            >
+              {{ item.title }}
+            </a-typography-paragraph>
+          </a-link>
+        </a-space>
       </template>
     </a-comment>
   </a-card>
@@ -62,14 +70,6 @@ onMounted(() => {
   color: var(--color-text-4);
 }
 
-.content {
-  display: flex;
-  align-items: center;
-  > p {
-    margin-left: 6px;
-  }
-}
-
 .arco-link {
   color: rgb(var(--gray-8));
 }

src/views/system/notice/NoticeAddModal.vue

@@ -1,173 +0,0 @@
-<template>
-  <a-modal
-    v-model:visible="visible"
-    :title="title"
-    :mask-closable="false"
-    :esc-to-close="false"
-    :width="width >= 600 ? '80%' : '100%'"
-    draggable
-    @before-ok="save"
-    @close="reset"
-  >
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      layout="vertical"
-      :label-col-style="{ width: '75px' }"
-      size="large"
-    >
-      <a-row :gutter="16">
-        <a-col :span="24">
-          <a-form-item label="标题" field="title">
-            <a-input v-model="form.title" placeholder="请输入标题" allow-clear :max-length="150" show-word-limit style="width: 100%" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="8">
-          <a-form-item label="类型" field="type">
-            <a-select v-model="form.type" :options="notice_type" placeholder="请选择类型" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="生效时间" field="effectiveTime" tooltip="默认立即生效">
-            <a-date-picker
-              v-model="form.effectiveTime"
-              placeholder="请选择生效时间"
-              show-time
-              format="YYYY-MM-DD HH:mm:ss"
-              style="width: 100%"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="终止时间" field="terminateTime" tooltip="默认无终止">
-            <a-date-picker
-              v-model="form.terminateTime"
-              placeholder="请选择终止时间"
-              show-time
-              format="YYYY-MM-DD HH:mm:ss"
-              style="width: 100%"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="24">
-          <a-form-item label="内容" field="content">
-            <MdEditor v-model="form.content" :toolbars="toolbars" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import { type FormInstance, Message } from '@arco-design/web-vue'
-import { MdEditor } from 'md-editor-v3'
-import { useWindowSize } from '@vueuse/core'
-import { addNotice, getNotice, updateNotice } from '@/apis/system'
-import { useForm } from '@/hooks'
-import { useDict } from '@/hooks/app'
-
-const emit = defineEmits<{
-  (e: 'save-success'): void
-}>()
-const { width } = useWindowSize()
-const { notice_type } = useDict('notice_type')
-
-const dataId = ref('')
-const isUpdate = computed(() => !!dataId.value)
-const title = computed(() => (isUpdate.value ? '修改公告' : '新增公告'))
-
-const toolbars = [
-  'bold',
-  'underline',
-  'italic',
-  'strikeThrough',
-  '-',
-  'title',
-  'sub',
-  'sup',
-  'quote',
-  'unorderedList',
-  'orderedList',
-  'task',
-  '-',
-  'codeRow',
-  'code',
-  'link',
-  'image',
-  'table',
-  0,
-  1,
-  2,
-  3,
-  '-',
-  'revoke',
-  'next',
-  '=',
-  'prettier',
-  'pageFullscreen',
-  'fullscreen',
-  'preview',
-  'previewOnly'
-]
-
-const formRef = ref<FormInstance>()
-const rules: FormInstance['rules'] = {
-  title: [{ required: true, message: '请输入标题' }],
-  type: [{ required: true, message: '选择类型' }],
-  content: [{ required: true, message: '请输入内容' }]
-}
-
-const { form, resetForm } = useForm({})
-
-// 重置
-const reset = () => {
-  formRef.value?.resetFields()
-  resetForm()
-}
-
-const visible = ref(false)
-// 新增
-const onAdd = () => {
-  reset()
-  dataId.value = ''
-  visible.value = true
-}
-
-// 修改
-const onUpdate = async (id: string) => {
-  reset()
-  dataId.value = id
-  const res = await getNotice(id)
-  Object.assign(form, res.data)
-  visible.value = true
-}
-
-// 保存
-const save = async () => {
-  const isInvalid = await formRef.value?.validate()
-  if (isInvalid) return false
-  try {
-    if (isUpdate.value) {
-      await updateNotice(form, dataId.value)
-      Message.success('修改成功')
-    } else {
-      await addNotice(form)
-      Message.success('新增成功')
-    }
-    emit('save-success')
-    return true
-  } catch (error) {
-    return false
-  }
-}
-
-defineExpose({ onAdd, onUpdate })
-</script>
-
-<style lang="scss" scoped></style>

src/views/system/notice/index.vue

@@ -48,14 +48,10 @@
         </a-space>
       </template>
     </GiTable>
-    <NoticeAddModal ref="NoticeAddModalRef" @save-success="search" />
-    <NoticeDetailModal ref="NoticeDetailModalRef" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import NoticeAddModal from './NoticeAddModal.vue'
-import NoticeDetailModal from './NoticeDetailModal.vue'
 import { type NoticeQuery, type NoticeResp, deleteNotice, listNotice } from '@/apis/system'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
@@ -119,23 +115,18 @@ const onDelete = (record: NoticeResp) => {
   })
 }
 
-const NoticeAddModalRef = ref<InstanceType<typeof NoticeAddModal>>()
 // 新增
 const onAdd = () => {
-  // NoticeAddModalRef.value?.onAdd()
   router.push({ path: '/system/notice/add' })
 }
 
 // 修改
 const onUpdate = (record: NoticeResp) => {
-  // NoticeAddModalRef.value?.onUpdate(record.id)
   router.push({ path: '/system/notice/add', query: { id: record.id, type: 'edit' } })
 }
 
-const NoticeDetailModalRef = ref<InstanceType<typeof NoticeDetailModal>>()
 // 详情
 const onDetail = (record: NoticeResp) => {
-  // NoticeDetailModalRef.value?.onDetail(record.id)
   router.push({ path: '/system/notice/detail', query: { id: record.id } })
 }
 </script>

src/views/system/notice/page/add.vue

@@ -4,7 +4,15 @@
             <a-affix :target="(containerRef as HTMLElement)">
                 <a-page-header title="通知公告" :subtitle="type === 'edit' ? '修改' : '新增'" @back="onBack">
                     <template #extra>
-                        <a-button type="primary" @click="onReleased">{{ type === 'edit' ? '修改' : '发布' }}</a-button>
+                        <a-button type="primary" @click="onReleased">
+                          <template #icon>
+                            <icon-save v-if="type === 'edit'" />
+                            <icon-send v-else />
+                          </template>
+                          <template #default>
+                            {{ type === 'edit' ? '保存' : '发布' }}
+                          </template>
+                        </a-button>
                     </template>
                 </a-page-header>
             </a-affix>

src/views/system/notice/page/detail.vue

@@ -6,7 +6,7 @@
                 </a-page-header>
             </a-affix>
         </div>
-        <div class="detail_content" style="display: flex; flex-direction: column;">
+        <div class="detail_content">
             <h1 class="title">{{ form?.title }}</h1>
             <div class="info">
                 <a-space>
@@ -22,6 +22,12 @@
                         <span>{{ form?.effectiveTime ? form?.effectiveTime : form?.createTime
                             }}</span>
                     </span>
+                    <a-divider v-if="form?.updateTime" direction="vertical" />
+                    <span v-if="form?.updateTime">
+                      <icon-schedule class="icon" />
+                      <span>更新时间：</span>
+                      <span>{{ form?.updateTime }}</span>
+                    </span>
                 </a-space>
             </div>
             <div style="flex: 1;">
@@ -71,8 +77,11 @@ onMounted(() => {
     }
 
     .info {
-        text-align: right;
-        padding: 20px;
+        text-align: center;
+    }
+
+    .icon {
+      margin-right: 3px;
     }
 }
 </style>