优化网站导航模块

modules/views/bak/category/preview/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-card :title="title" class="ele-body">
+    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.title">
+          <template #actions>
+            <span v-for="{ icon, text } in actions" :key="icon">
+              <component :is="icon" style="margin-right: 8px" />
+              {{ text }}
+            </span>
+          </template>
+          <template #extra>
+            <img
+              width="100"
+              height="100"
+              alt="logo"
+              v-if="item.image"
+              :src="item.image"
+            />
+          </template>
+          <a-list-item-meta :description="item.title">
+            <template #title>
+              <a @click="openNew('/cms/article/' + item.articleId)">{{
+                item.title
+              }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import { getArticleCategory } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  import {
+    StarOutlined,
+    LikeOutlined,
+    MessageOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const { currentRoute } = useRouter();
+  const title = ref<string>('');
+  const categoryId = ref(0);
+  const category = ref<ArticleCategory | any>();
+  const list = ref<Article[]>([]);
+  const spinning = ref(true);
+  const page = ref(1);
+
+  const pagination = {
+    onChange: (index: number) => {
+      page.value = index;
+      reload();
+    },
+    total: 10,
+    pageSize: 10
+  };
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '2' }
+  ];
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    // 加载文章分类
+    getArticleCategory(categoryId.value).then((data) => {
+      category.value = data;
+      // 修改页签标题
+      if (data.title) {
+        title.value = data.title;
+        setPageTabTitle(data.title);
+      }
+    });
+    // 加载文章列表
+    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
+      (data) => {
+        if (data?.list) {
+          pagination.total = data.count;
+          list.value = data.list;
+        }
+        spinning.value = false;
+      }
+    );
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        categoryId.value = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategoryPreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+</style>