✨ 完成大作业部分及其打磨

app/pages/base/index/articleManage/[userId]/checkArticle/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { MdPreview } from 'md-editor-v3';
+  import 'md-editor-v3/lib/style.css';
+  import BackButton from '~/components/BackButton.vue';
+  const store = useArticleStore();
+  const content = store.currentArticle.content;
+  const title = store.currentArticle.title;
+</script>
+
+<template>
+  <div class="p-6">
+    <back-button class="ml-3" />
+    <div
+      class="m-2 bg-white rounded-xl p-6 border-gray-200 border-2 min-h-[300px] dark:bg-black dark:border-zinc-600"
+    >
+      <span class="text-4xl">{{ title }}</span>
+      <MdPreview
+        v-model="content"
+        :theme="useColorMode().preference"
+        class="mt-6"
+      ></MdPreview>
+    </div>
+  </div>
+</template>

app/pages/base/index/articleManage/[userId]/modifyArticle/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  const store = useArticleStore();
+  const content = ref(store.currentArticle.content);
+  const title = ref(store.currentArticle.title);
+
+  async function saveArticle(data: { title: string; content: string }) {
+    store.currentArticle.title = data.title;
+    store.currentArticle.content = data.content;
+    await store.modifyArticle();
+    useRouter().back();
+  }
+</script>
+
+<template>
+  <ArticleEditor
+    :base-content="content"
+    :base-title="title"
+    :save-button="'更改文章'"
+    @article-edit-finish="saveArticle"
+  />
+</template>
+
+<style scoped lang="less"></style>

app/pages/base/index/articleManage/index.vue

@@ -1,11 +1,125 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+  import SuperTable from '~/components/SuperTable.vue';
+  import * as echarts from 'echarts';
+  import type { TableProps, TableRowData } from 'tdesign-vue-next';
+  import { useWindowSize } from '@vueuse/core';
 
+  const store = useArticleStore();
+  const { pagination, articleList } = storeToRefs(store);
+
+  const columns = ref<TableProps['columns']>([
+    {
+      colKey: 'index',
+      title: '序号',
+      cell: (_, { rowIndex }: { rowIndex: number }) => (
+        <div>
+          {(pagination.value!.current! - 1) * pagination.value!.pageSize! +
+            rowIndex +
+            1}
+        </div>
+      ),
+    },
+    {
+      colKey: 'name',
+      title: '作者姓名',
+    },
+    {
+      colKey: 'amount',
+      title: '文章数量',
+    },
+    {
+      colKey: 'operator',
+      title: '操作',
+      cell: (_, { row }) => (
+        <div class="w-40 flex flex-row justify-evenly">
+          <t-button onClick={() => manageArticle(row)}>进入文章管理</t-button>
+        </div>
+      ),
+    },
+  ]);
+
+  function pageChange(x: { current: number; pageSize: number }) {
+    if (pagination.value) {
+      pagination.value.current = x.current;
+      pagination.value.pageSize = x.pageSize;
+      store.getArticleList();
+    }
+  }
+
+  function manageArticle(row: TableRowData) {
+    const router = useRouter();
+    router.push(`/base/articleManage/${row.id}`);
+    // router.push()
+  }
+
+  onMounted(async () => {
+    await store.getTotal();
+    await store.getArticleList();
+    const chartDom = document.getElementById('echarts')!;
+    const chart = echarts.init(chartDom);
+
+    const option = {
+      title: {
+        text: '柱状图示例',
+        left: 'center',
+      },
+      tooltip: {},
+      xAxis: {
+        type: 'category',
+        data: articleList.value.map((item: ArticleUser) => item.name),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: articleList.value.map((item: ArticleUser) => item.amount),
+          type: 'bar',
+          itemStyle: {
+            color: (params: { dataIndex: number }) => {
+              const colors = [
+                '#f1dbc3',
+                '#7493a8',
+                '#edc5ac',
+                '#cdaba2',
+                '#abb0b3',
+                '#cfc2b9',
+                '#a2979f',
+              ];
+              return colors[params.dataIndex % colors.length];
+            },
+          },
+        },
+      ],
+    };
+    chart.setOption(option);
+    watch(useWindowSize().width, (_val) => {
+      chart.resize();
+    });
+  });
 </script>
 
 <template>
-
+  <div class="p-6">
+    <div class="flex md:flex-row flex-col">
+      <div
+        class="flex-[1] m-2 p-6 bg-white rounded-xl dark:bg-zinc-800 border-2 dark:border-zinc-600"
+      >
+        <SuperTable
+          v-model:pagination="pagination"
+          :data="articleList"
+          :columns="columns"
+          :loading="false"
+          @page-change="pageChange"
+        />
+      </div>
+      <div
+        class="m-2 flex-[1] p-6 bg-white dark:bg-zinc-800 border-2 dark:border-zinc-600 rounded-xl"
+      >
+        <div id="echarts" class="w-full h-96"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>