style: 优化公告相关样式

Author: Charles7c

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

@@ -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/index.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/add.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>