完善页面6

2026-02-26 09:50:58 +08:00
parent ff10f495ad
commit 9f5e94837a
8 changed files with 644 additions and 453 deletions
--- a/components/ArticleFormDrawer.vue
+++ b/components/ArticleFormDrawer.vue
@@ -0,0 +1,225 @@
+<template>
+  <uni-drawer ref="drawerRef" mode="right" :width="600">
+    <view class="drawer-content">
+      <view class="drawer-header">
+        <text class="title">{{ isEdit ? "编辑文章" : "添加文章" }}</text>
+        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
+      </view>
+      <scroll-view scroll-y class="drawer-body">
+        <uni-forms
+          ref="formRef"
+          :model="formData"
+          :rules="rules"
+          label-width="80px"
+        >
+          <uni-forms-item label="文章标题" name="title" required>
+            <uni-easyinput
+              v-model="formData.title"
+              placeholder="请输入文章标题"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="文章分类" name="categoryId" required>
+            <picker
+              mode="selector"
+              :range="categoryList"
+              range-key="name"
+              @change="onCategoryChange"
+              :value="categoryIndex"
+            >
+              <view
+                class="picker-view"
+                style="
+                  height: 36px;
+                  line-height: 36px;
+                  border: 1px solid #e5e5e5;
+                  border-radius: 4px;
+                  padding: 0 10px;
+                  color: #333;
+                "
+              >
+                {{
+                  formData.categoryId
+                    ? getCategoryName(formData.categoryId)
+                    : "请选择文章分类"
+                }}
+              </view>
+            </picker>
+          </uni-forms-item>
+          <uni-forms-item label="文章摘要" name="summary">
+            <uni-easyinput
+              type="textarea"
+              v-model="formData.summary"
+              placeholder="请输入文章摘要"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="文章封面" name="cover">
+            <uni-easyinput
+              v-model="formData.cover"
+              placeholder="请输入封面图片URL"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="文章内容" name="content" required>
+            <view
+              class="editor-container"
+              style="
+                border: 1px solid #e5e5e5;
+                border-radius: 4px;
+                min-height: 300px;
+              "
+            >
+              <richtext-editor
+                v-model="formData.content"
+                placeholder="请输入文章内容..."
+              ></richtext-editor>
+            </view>
+          </uni-forms-item>
+        </uni-forms>
+      </scroll-view>
+      <view class="drawer-footer">
+        <button class="btn-cancel" @click="close">取消</button>
+        <button
+          class="btn-confirm"
+          type="primary"
+          @click="submit"
+          :loading="loading"
+        >
+          确定
+        </button>
+      </view>
+    </view>
+  </uni-drawer>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import { api } from "@/services/api.js";
+import mockStore from "@/stores/useMockData.js";
+
+const emit = defineEmits(["success"]);
+const drawerRef = ref(null);
+const formRef = ref(null);
+const isEdit = ref(false);
+const loading = ref(false);
+const editId = ref(null);
+
+const categoryList = computed(() => mockStore.mockCategories);
+
+const formData = reactive({
+  title: "",
+  categoryId: "",
+  summary: "",
+  cover: "",
+  content: "",
+});
+
+const categoryIndex = computed(() => {
+  if (!formData.categoryId) return -1;
+  return categoryList.value.findIndex((c) => c.id === formData.categoryId);
+});
+
+const getCategoryName = (id) => {
+  const category = categoryList.value.find((c) => c.id === id);
+  return category ? category.name : "请选择文章分类";
+};
+
+const onCategoryChange = (e) => {
+  const index = e.detail.value;
+  formData.categoryId = categoryList.value[index].id;
+};
+
+const rules = {
+  title: {
+    rules: [{ required: true, errorMessage: "请输入文章标题" }],
+  },
+  categoryId: {
+    rules: [{ required: true, errorMessage: "请选择文章分类" }],
+  },
+  content: {
+    rules: [{ required: true, errorMessage: "请输入文章内容" }],
+  },
+};
+
+const open = (row) => {
+  if (row) {
+    isEdit.value = true;
+    editId.value = row.id;
+    Object.assign(formData, {
+      title: row.title,
+      categoryId: row.categoryId,
+      summary: row.summary,
+      cover: row.cover,
+      content: row.content,
+    });
+  } else {
+    isEdit.value = false;
+    editId.value = null;
+    Object.assign(formData, {
+      title: "",
+      categoryId: "",
+      summary: "",
+      cover: "",
+      content: "",
+    });
+  }
+  drawerRef.value.open();
+};
+
+const close = () => {
+  drawerRef.value.close();
+};
+
+const submit = async () => {
+  try {
+    await formRef.value.validate();
+    loading.value = true;
+    if (isEdit.value) {
+      await api.updateArticle(editId.value, formData);
+    } else {
+      await api.addArticle(formData);
+    }
+    uni.showToast({ title: "保存成功", icon: "success" });
+    emit("success");
+    close();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({ open, close });
+</script>
+
+<style scoped>
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+}
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+.drawer-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.drawer-body {
+  flex: 1;
+  padding: 15px;
+}
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+.drawer-footer button {
+  margin-left: 10px;
+  min-width: 80px;
+}
+</style>
--- a/components/CategoryFormDrawer.vue
+++ b/components/CategoryFormDrawer.vue
@@ -0,0 +1,153 @@
+<template>
+  <uni-drawer ref="drawerRef" mode="right" :width="400">
+    <view class="drawer-content">
+      <view class="drawer-header">
+        <text class="title">{{ isEdit ? "编辑分类" : "添加分类" }}</text>
+        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
+      </view>
+      <scroll-view scroll-y class="drawer-body">
+        <uni-forms
+          ref="formRef"
+          :model="formData"
+          :rules="rules"
+          label-width="80px"
+        >
+          <uni-forms-item label="分类名称" name="name" required>
+            <uni-easyinput
+              v-model="formData.name"
+              placeholder="请输入分类名称"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="排序" name="sort">
+            <uni-easyinput
+              type="number"
+              v-model="formData.sort"
+              placeholder="请输入排序"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="状态" name="status">
+            <switch
+              :checked="formData.status === 1"
+              @change="(e) => (formData.status = e.detail.value ? 1 : 0)"
+            />
+          </uni-forms-item>
+        </uni-forms>
+      </scroll-view>
+      <view class="drawer-footer">
+        <button class="btn-cancel" @click="close">取消</button>
+        <button
+          class="btn-confirm"
+          type="primary"
+          @click="submit"
+          :loading="loading"
+        >
+          确定
+        </button>
+      </view>
+    </view>
+  </uni-drawer>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { api } from "@/services/api.js";
+
+const emit = defineEmits(["success"]);
+const drawerRef = ref(null);
+const formRef = ref(null);
+const isEdit = ref(false);
+const loading = ref(false);
+const editId = ref(null);
+
+const formData = reactive({
+  name: "",
+  sort: 0,
+  status: 1,
+});
+
+const rules = {
+  name: {
+    rules: [{ required: true, errorMessage: "请输入分类名称" }],
+  },
+};
+
+const open = (row) => {
+  if (row) {
+    isEdit.value = true;
+    editId.value = row.id;
+    Object.assign(formData, {
+      name: row.name,
+      sort: row.sort,
+      status: row.status,
+    });
+  } else {
+    isEdit.value = false;
+    editId.value = null;
+    Object.assign(formData, {
+      name: "",
+      sort: 0,
+      status: 1,
+    });
+  }
+  drawerRef.value.open();
+};
+
+const close = () => {
+  drawerRef.value.close();
+};
+
+const submit = async () => {
+  try {
+    await formRef.value.validate();
+    loading.value = true;
+    if (isEdit.value) {
+      await api.updateCategory(editId.value, formData);
+    } else {
+      await api.addCategory(formData);
+    }
+    uni.showToast({ title: "保存成功", icon: "success" });
+    emit("success");
+    close();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({ open, close });
+</script>
+
+<style scoped>
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+}
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+.drawer-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.drawer-body {
+  flex: 1;
+  padding: 15px;
+}
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+.drawer-footer button {
+  margin-left: 10px;
+  min-width: 80px;
+}
+</style>
--- a/pages/contents/articles.vue
+++ b/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>
--- a/pages/mall/admin/cms/article/list.uvue
+++ b/pages/mall/admin/cms/article/list.uvue
@@ -85,14 +85,6 @@
        </view>
        
        <scroll-view class="drawer-body" :scroll-y="true">
-          <!-- 文章信息区块 -->
-          <view class="section-title">
-            <view class="title-inner active">
-              <text class="title-txt">文章信息</text>
-              <view class="title-line"></view>
-            </view>
-          </view>
-
          <view class="form-grid">
            <view class="form-row">
              <view class="form-col">
@@ -111,15 +103,15 @@
              </view>
            </view>

-            <view class="form-row mt-20">
-              <view class="form-col">
+            <view class="form-row mt-20" style="position: relative; z-index: 10;">
+              <view class="form-col" style="position: relative; z-index: 11;">
                <view class="label-box"><text class="required">*</text><text class="label-txt">文章分类:</text></view>
                <view class="input-box z-20" style="position: relative;">
                  <view class="select-mock" @click.stop="toggleDropdown">
                    <text class="select-val">{{ formCategory || '请选择' }}</text>
                    <text class="arrow-down">▼</text>
                  </view>
-                  <view v-if="dropdownVisible" class="dropdown-list" @click.stop="">
+                  <view v-if="dropdownVisible" class="dropdown-list">
                    <view 
                      v-for="(cat, index) in categoryList" 
                      :key="index" 
@@ -256,7 +248,6 @@ const selectCategory = (cat: string) => {
  dropdownVisible.value = false
 }

-const handleAdd = () => {
 let editorCtx: any = null
 const onEditorReady = () => {
  // @ts-ignore
@@ -285,6 +276,7 @@ const insertImage = () => {
  })
 }

+const handleAdd = () => {
  formTitle.value = ''
  formAuthor.value = ''
  formCategory.value = ''
--- a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
+++ b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
@@ -1,3 +1,12 @@
+---
+🚧 注意：
+
+⚠ 注意：当前使用 mock 数据，后续真实接口完成后替换
+真实接口地址和返回字段未确定，请后续接口联调完成后再替换。
+
+文档标记维持在此文件中，以便后续开发和对接。
+---
+
 # uni-app-x 页面修复指南

 ## 📋 文档概述
--- a/pages/mall/admin/错误信息.txt
+++ b/pages/mall/admin/错误信息.txt
@@ -169,444 +169,3 @@ at <KeepAlive>
 at <RouterView>
 at <Layout>
 at <App>
-warnHandler @ uni-h5.es.js:19975
-callWithErrorHandling @ vue.runtime.esm.js:1381
-warn$1 @ vue.runtime.esm.js:1207
-get @ vue.runtime.esm.js:4455
-(anonymous) @ list.uvue?t=1772068177429&import:1028
-renderFnWithContext @ vue.runtime.esm.js:2033
-renderSlot @ vue.runtime.esm.js:4254
-(anonymous) @ uni-h5.es.js:18666
-renderComponentRoot @ vue.runtime.esm.js:2092
-componentUpdateFn @ vue.runtime.esm.js:7365
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-mountChildren @ vue.runtime.esm.js:6942
-processFragment @ vue.runtime.esm.js:7158
-patch @ vue.runtime.esm.js:6668
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7372
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-mountChildren @ vue.runtime.esm.js:6942
-processFragment @ vue.runtime.esm.js:7158
-patch @ vue.runtime.esm.js:6668
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7372
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-mountChildren @ vue.runtime.esm.js:6942
-processFragment @ vue.runtime.esm.js:7158
-patch @ vue.runtime.esm.js:6668
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7372
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-mountChildren @ vue.runtime.esm.js:6942
-processFragment @ vue.runtime.esm.js:7158
-patch @ vue.runtime.esm.js:6668
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7372
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-mountChildren @ vue.runtime.esm.js:6942
-processFragment @ vue.runtime.esm.js:7158
-patch @ vue.runtime.esm.js:6668
-mountChildren @ vue.runtime.esm.js:6942
-mountElement @ vue.runtime.esm.js:6849
-processElement @ vue.runtime.esm.js:6814
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7372
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-setupRenderEffect @ vue.runtime.esm.js:7507
-mountComponent @ vue.runtime.esm.js:7274
-processComponent @ vue.runtime.esm.js:7228
-patch @ vue.runtime.esm.js:6694
-patchBlockChildren @ vue.runtime.esm.js:7084
-processFragment @ vue.runtime.esm.js:7176
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-callWithErrorHandling @ vue.runtime.esm.js:1381
-flushJobs @ vue.runtime.esm.js:1585
-Promise.then
-queueFlush @ vue.runtime.esm.js:1494
-queueJob @ vue.runtime.esm.js:1488
-(anonymous) @ vue.runtime.esm.js:7491
-resetScheduling @ vue.runtime.esm.js:236
-triggerEffects @ vue.runtime.esm.js:280
-triggerRefValue @ vue.runtime.esm.js:1033
-set value @ vue.runtime.esm.js:1078
-handleAdd @ list.uvue:297
-callWithErrorHandling @ vue.runtime.esm.js:1381
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-uni-h5.es.js:19975 [Vue warn]: Unhandled error during execution of native event handler 
- at <Text>
-at <View>
-at <View>
-at <View>
-at <ScrollView>
-at <View>
-at <View>
-at <View>
-at <List>
-at <View>
-at <View>
-at <View>
-at <View>
-at <AdminLayout>
-at <View>
-at <Index>
-at <AsyncComponentWrapper>
-at <PageBody>
-at <Page>
-at <Anonymous>
-at <KeepAlive>
-at <RouterView>
-at <Layout>
-at <App>
-warnHandler @ uni-h5.es.js:19975
-callWithErrorHandling @ vue.runtime.esm.js:1381
-warn$1 @ vue.runtime.esm.js:1207
-logError @ vue.runtime.esm.js:1438
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-vue.runtime.esm.js:1443 TypeError: _ctx.formatText is not a function
-    at _createVNode.onClick._cache.<computed>._cache.<computed> (list.uvue?t=1772068177429&import:980:85)
-    at callWithErrorHandling (vue.runtime.esm.js:1381:19)
-    at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17)
-    at UniTextElement.invoker (vue.runtime.esm.js:10253:5)
-logError @ vue.runtime.esm.js:1443
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-uni-h5.es.js:19975 [Vue warn]: Unhandled error during execution of native event handler 
- at <Text>
-at <View>
-at <View>
-at <View>
-at <ScrollView>
-at <View>
-at <View>
-at <View>
-at <List>
-at <View>
-at <View>
-at <View>
-at <View>
-at <AdminLayout>
-at <View>
-at <Index>
-at <AsyncComponentWrapper>
-at <PageBody>
-at <Page>
-at <Anonymous>
-at <KeepAlive>
-at <RouterView>
-at <Layout>
-at <App>
-warnHandler @ uni-h5.es.js:19975
-callWithErrorHandling @ vue.runtime.esm.js:1381
-warn$1 @ vue.runtime.esm.js:1207
-logError @ vue.runtime.esm.js:1438
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-vue.runtime.esm.js:1443 TypeError: _ctx.formatText is not a function
-    at _createVNode.onClick._cache.<computed>._cache.<computed> (list.uvue?t=1772068177429&import:990:85)
-    at callWithErrorHandling (vue.runtime.esm.js:1381:19)
-    at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17)
-    at UniTextElement.invoker (vue.runtime.esm.js:10253:5)
-logError @ vue.runtime.esm.js:1443
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-uni-h5.es.js:19975 [Vue warn]: Unhandled error during execution of native event handler 
- at <Text>
-at <View>
-at <View>
-at <View>
-at <ScrollView>
-at <View>
-at <View>
-at <View>
-at <List>
-at <View>
-at <View>
-at <View>
-at <View>
-at <AdminLayout>
-at <View>
-at <Index>
-at <AsyncComponentWrapper>
-at <PageBody>
-at <Page>
-at <Anonymous>
-at <KeepAlive>
-at <RouterView>
-at <Layout>
-at <App>
-warnHandler @ uni-h5.es.js:19975
-callWithErrorHandling @ vue.runtime.esm.js:1381
-warn$1 @ vue.runtime.esm.js:1207
-logError @ vue.runtime.esm.js:1438
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-vue.runtime.esm.js:1443 TypeError: _ctx.formatText is not a function
-    at _createVNode.onClick._cache.<computed>._cache.<computed> (list.uvue?t=1772068177429&import:1000:85)
-    at callWithErrorHandling (vue.runtime.esm.js:1381:19)
-    at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17)
-    at UniTextElement.invoker (vue.runtime.esm.js:10253:5)
-logError @ vue.runtime.esm.js:1443
-errorHandler @ uni-h5.es.js:19600
-callWithErrorHandling @ vue.runtime.esm.js:1381
-handleError @ vue.runtime.esm.js:1421
-callWithErrorHandling @ vue.runtime.esm.js:1383
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-list.uvue?t=1772068177429&import:1010 [Vue warn]: Property "insertImage" was accessed during render but is not defined on instance. 
- at <View>
-at <View>
-at <View>
-at <ScrollView>
-at <View>
-at <View>
-at <View>
-at <List>
-at <View>
-at <View>
-at <View>
-at <View>
-at <AdminLayout>
-at <View>
-at <Index>
-at <AsyncComponentWrapper>
-at <PageBody>
-at <Page>
-at <Anonymous>
-at <KeepAlive>
-at <RouterView>
-at <Layout>
-at <App>
-warnHandler @ uni-h5.es.js:19975
-callWithErrorHandling @ vue.runtime.esm.js:1381
-warn$1 @ vue.runtime.esm.js:1207
-get @ vue.runtime.esm.js:4455
-(anonymous) @ list.uvue?t=1772068177429&import:1010
-renderFnWithContext @ vue.runtime.esm.js:2033
-renderSlot @ vue.runtime.esm.js:4254
-(anonymous) @ uni-h5.es.js:18666
-renderComponentRoot @ vue.runtime.esm.js:2092
-componentUpdateFn @ vue.runtime.esm.js:7444
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-processFragment @ vue.runtime.esm.js:7202
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-processFragment @ vue.runtime.esm.js:7202
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-processFragment @ vue.runtime.esm.js:7202
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-processFragment @ vue.runtime.esm.js:7202
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchBlockChildren @ vue.runtime.esm.js:7084
-processFragment @ vue.runtime.esm.js:7176
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-updateComponent @ vue.runtime.esm.js:7305
-processComponent @ vue.runtime.esm.js:7239
-patch @ vue.runtime.esm.js:6694
-patchBlockChildren @ vue.runtime.esm.js:7084
-processFragment @ vue.runtime.esm.js:7176
-patch @ vue.runtime.esm.js:6668
-patchKeyedChildren @ vue.runtime.esm.js:7650
-patchChildren @ vue.runtime.esm.js:7564
-patchElement @ vue.runtime.esm.js:6989
-processElement @ vue.runtime.esm.js:6825
-patch @ vue.runtime.esm.js:6682
-componentUpdateFn @ vue.runtime.esm.js:7453
-run @ vue.runtime.esm.js:153
-instance.update @ vue.runtime.esm.js:7497
-callWithErrorHandling @ vue.runtime.esm.js:1381
-flushJobs @ vue.runtime.esm.js:1585
-Promise.then
-queueFlush @ vue.runtime.esm.js:1494
-queueJob @ vue.runtime.esm.js:1488
-(anonymous) @ vue.runtime.esm.js:7491
-resetScheduling @ vue.runtime.esm.js:236
-triggerEffects @ vue.runtime.esm.js:280
-triggerRefValue @ vue.runtime.esm.js:1033
-set value @ vue.runtime.esm.js:1078
-closeDrawer @ list.uvue:314
-callWithErrorHandling @ vue.runtime.esm.js:1381
-callWithAsyncErrorHandling @ vue.runtime.esm.js:1388
-invoker @ vue.runtime.esm.js:10253
-list.uvue?t=1772068177429&import:1028 [Vue warn]: Property "onEditorReady" was accessed during render but is not defined on instance. 
- at <View>
-at <View>
-at <View>
-at <ScrollView>
-at <View>
-at <View>
-at <View>
-at <List>
-at <View>
-at <View>
-at <View>
-at <View>
-at <AdminLayout>
-at <View>
-at <Index>
-at <AsyncComponentWrapper>
-at <PageBody>
-at <Page>
-at <Anonymous>
-at <KeepAlive>
-at <RouterView>
-at <Layout>
-at <App>
--- a/services/api.js
+++ b/services/api.js
@@ -0,0 +1,42 @@
+// ⚠ Mock 数据，后续请替换成真实接口。
+import mockStore from "../stores/useMockData.js";
+
+// 模拟网络延迟
+const delay = (ms = 500) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const api = {
+  // 文章分类接口
+  async getCategories() {
+    await delay();
+    return { code: 200, data: mockStore.mockCategories, msg: "success" };
+  },
+  async addCategory(data) {
+    await delay();
+    mockStore.addCategory(data);
+    return { code: 200, data: null, msg: "success" };
+  },
+  async updateCategory(id, data) {
+    await delay();
+    mockStore.updateCategory(id, data);
+    return { code: 200, data: null, msg: "success" };
+  },
+
+  // 文章接口
+  async getArticles(page = 1, pageSize = 10) {
+    await delay();
+    const total = mockStore.mockArticles.length;
+    const start = (page - 1) * pageSize;
+    const data = mockStore.mockArticles.slice(start, start + pageSize);
+    return { code: 200, data: { list: data, total }, msg: "success" };
+  },
+  async addArticle(data) {
+    await delay();
+    mockStore.addArticle(data);
+    return { code: 200, data: null, msg: "success" };
+  },
+  async updateArticle(id, data) {
+    await delay();
+    mockStore.updateArticle(id, data);
+    return { code: 200, data: null, msg: "success" };
+  },
+};
--- a/stores/useMockData.js
+++ b/stores/useMockData.js
@@ -0,0 +1,92 @@
+// ⚠ Mock 数据，后续请替换成真实接口。
+import { reactive, watch } from "vue";
+
+export const useMockData = () => {
+  // 从本地存储读取初始数据，如果没有则使用默认值
+  const initialCategories = uni.getStorageSync("mockCategories") || [
+    { id: 101, name: "分类 A", status: 1, sort: 1 },
+    { id: 102, name: "分类 B", status: 1, sort: 2 },
+  ];
+
+  const initialArticles = uni.getStorageSync("mockArticles") || [
+    {
+      id: 1,
+      title: "文章 1",
+      summary: "摘要 1",
+      cover: "",
+      categoryId: 101,
+      content: "<p>富文本内容 1</p>",
+    },
+    {
+      id: 2,
+      title: "文章 2",
+      summary: "摘要 2",
+      cover: "",
+      categoryId: 102,
+      content: "<p>富文本内容 2</p>",
+    },
+  ];
+
+  const mockCategories = reactive(initialCategories);
+  const mockArticles = reactive(initialArticles);
+
+  // 监听数据变化并保存到本地存储
+  watch(
+    mockCategories,
+    (newVal) => {
+      uni.setStorageSync("mockCategories", JSON.parse(JSON.stringify(newVal)));
+    },
+    { deep: true },
+  );
+
+  watch(
+    mockArticles,
+    (newVal) => {
+      uni.setStorageSync("mockArticles", JSON.parse(JSON.stringify(newVal)));
+    },
+    { deep: true },
+  );
+
+  const addCategory = (category) => {
+    const newId =
+      mockCategories.length > 0
+        ? Math.max(...mockCategories.map((c) => c.id)) + 1
+        : 101;
+    mockCategories.push({ ...category, id: newId });
+  };
+
+  const updateCategory = (id, category) => {
+    const index = mockCategories.findIndex((c) => c.id === id);
+    if (index !== -1) {
+      Object.assign(mockCategories[index], category);
+    }
+  };
+
+  const addArticle = (article) => {
+    const newId =
+      mockArticles.length > 0
+        ? Math.max(...mockArticles.map((a) => a.id)) + 1
+        : 1;
+    mockArticles.push({ ...article, id: newId });
+  };
+
+  const updateArticle = (id, article) => {
+    const index = mockArticles.findIndex((a) => a.id === id);
+    if (index !== -1) {
+      Object.assign(mockArticles[index], article);
+    }
+  };
+
+  return {
+    mockCategories,
+    mockArticles,
+    addCategory,
+    updateCategory,
+    addArticle,
+    updateArticle,
+  };
+};
+
+// 单例模式，确保全局共享状态
+const mockStore = useMockData();
+export default mockStore;