refactor: 重构工作台

src/views/dashboard/workplace/components/Notice.vue

@@ -0,0 +1,89 @@
+<template>
+  <a-card
+    class="general-card"
+    title="公告"
+    :header-style="{ paddingBottom: '0' }"
+    :body-style="{ padding: '15px 20px 13px 20px' }"
+  >
+    <template #extra>
+      <a-link @click="router.replace({ path: '/system/notice' })">更多</a-link>
+    </template>
+    <a-skeleton v-if="loading" :loading="loading" :animation="true">
+      <a-skeleton-line :rows="5" />
+    </a-skeleton>
+    <div v-else>
+      <a-empty v-if="dataList.length === 0">暂无公告</a-empty>
+      <div v-else>
+        <div v-for="(item, idx) in dataList" :key="idx" class="item">
+          <GiCellTag :value="item.type" :dict="notice_type" />
+          <a-link class="item-content" @click="onDetail(item.id)">
+            <a-typography-paragraph
+              :ellipsis="{
+                rows: 1,
+                showTooltip: true,
+                css: true,
+              }"
+            >
+            {{ item.title }}
+            </a-typography-paragraph>
+          </a-link>
+        </div>
+      </div>
+    </div>
+  </a-card>
+
+  <NoticeDetailModal ref="NoticeDetailModalRef" />
+</template>
+
+<script lang="ts" setup>
+import { type DashboardNoticeResp, listDashboardNotice } from '@/apis'
+import { useDict } from '@/hooks/app'
+import NoticeDetailModal from '@/views/system/notice/NoticeDetailModal.vue'
+
+const router = useRouter()
+const { notice_type } = useDict('notice_type')
+
+const dataList = ref<DashboardNoticeResp[]>([])
+const loading = ref(false)
+// 查询列表数据
+const getDataList = async () => {
+  try {
+    loading.value = true
+    const res = await listDashboardNotice()
+    dataList.value = res.data
+  } finally {
+    loading.value = false
+  }
+}
+
+const NoticeDetailModalRef = ref<InstanceType<typeof NoticeDetailModal>>()
+// 详情
+const onDetail = (id: string) => {
+  NoticeDetailModalRef.value?.onDetail(id)
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>
+
+<style scoped lang="less">
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  margin-bottom: 4px;
+  .item-content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-left: 4px;
+    color: var(--color-text-2);
+    text-decoration: none;
+    font-size: 13px;
+    cursor: pointer;
+  }
+}
+</style>