完善页面6

pages/contents/articles.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="page-container">
+    <view class="header-actions">
+      <button type="primary" size="mini" @click="openArticleDrawer()">
+        添加文章
+      </button>
+      <button
+        type="default"
+        size="mini"
+        @click="openCategoryDrawer()"
+        style="margin-left: 10px"
+      >
+        分类管理
+      </button>
+    </view>
+
+    <uni-table border stripe emptyText="暂无数据">
+      <uni-tr>
+        <uni-th width="50" align="center">ID</uni-th>
+        <uni-th align="center">文章标题</uni-th>
+        <uni-th width="150" align="center">文章分类</uni-th>
+        <uni-th width="200" align="center">摘要</uni-th>
+        <uni-th width="150" align="center">操作</uni-th>
+      </uni-tr>
+      <uni-tr v-for="item in articleList" :key="item.id">
+        <uni-td align="center">{{ item.id }}</uni-td>
+        <uni-td align="center">{{ item.title }}</uni-td>
+        <uni-td align="center">{{ getCategoryName(item.categoryId) }}</uni-td>
+        <uni-td align="center">{{ item.summary }}</uni-td>
+        <uni-td align="center">
+          <button size="mini" type="primary" @click="openArticleDrawer(item)">
+            编辑
+          </button>
+        </uni-td>
+      </uni-tr>
+    </uni-table>
+
+    <view class="pagination-box">
+      <uni-pagination
+        :total="total"
+        :current="page"
+        :pageSize="pageSize"
+        @change="onPageChange"
+      />
+    </view>
+
+    <!-- 抽屉组件 -->
+    <ArticleFormDrawer ref="articleDrawerRef" @success="fetchArticles" />
+    <CategoryFormDrawer ref="categoryDrawerRef" @success="fetchCategories" />
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { api } from "@/services/api.js";
+import mockStore from "@/stores/useMockData.js";
+import ArticleFormDrawer from "@/components/ArticleFormDrawer.vue";
+import CategoryFormDrawer from "@/components/CategoryFormDrawer.vue";
+
+const articleList = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+
+const articleDrawerRef = ref(null);
+const categoryDrawerRef = ref(null);
+
+const fetchArticles = async () => {
+  const res = await api.getArticles(page.value, pageSize.value);
+  if (res.code === 200) {
+    articleList.value = res.data.list;
+    total.value = res.data.total;
+  }
+};
+
+const fetchCategories = async () => {
+  // 触发分类数据更新，由于使用了 reactive，这里其实可以不调接口，但为了模拟真实流程还是调用一下
+  await api.getCategories();
+};
+
+const getCategoryName = (categoryId) => {
+  const category = mockStore.mockCategories.find((c) => c.id === categoryId);
+  return category ? category.name : "未知分类";
+};
+
+const onPageChange = (e) => {
+  page.value = e.current;
+  fetchArticles();
+};
+
+const openArticleDrawer = (row = null) => {
+  articleDrawerRef.value.open(row);
+};
+
+const openCategoryDrawer = (row = null) => {
+  categoryDrawerRef.value.open(row);
+};
+
+onMounted(() => {
+  fetchCategories();
+  fetchArticles();
+});
+</script>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+  background-color: #fff;
+}
+.header-actions {
+  margin-bottom: 20px;
+  display: flex;
+}
+.pagination-box {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>