u

code/link56/link56-frontend-new/src/request/api/post/index.ts

@@ -1,5 +1,5 @@
-import type { AddPostParams, Post, PostEditorForm, QueryPostParams, UpdatePostParams } from '@/types/post/editor'
-
+import type { DashboardData } from '@/types/post'
+import type { AddPostParams, DeletePostParams, Post, PostEditorForm, QueryPostParams, UpdatePostParams, UpdatePostStatusParams } from '@/types/post/editor'
 import { httpGet, httpPostJson } from '@/request/utils'
 
 export function addPostApi(params: AddPostParams) {
@@ -10,6 +10,22 @@ export function updatePostApi(params: UpdatePostParams) {
   return httpPostJson<PostEditorForm>('/post/update', params)
 }
 
+export function updatePostStatusApi(params: UpdatePostStatusParams) {
+  return httpPostJson<PostEditorForm>('/post/update/status', params)
+}
+
 export function queryPostApi(params: QueryPostParams) {
   return httpPostJson<BasePageResult<Post>>('/post/query', params)
 }
+
+export function getPostApi(id: number) {
+  return httpGet<PostEditorForm>(`/post/${id}`)
+}
+
+export function deletePostApi(params: DeletePostParams) {
+  return httpPostJson<void>('/post/delete', params)
+}
+
+export function getDashboardDataApi() {
+  return httpGet<DashboardData>(`/post/dashboard`)
+}

code/link56/link56-frontend-new/src/router/index.ts

@@ -49,10 +49,10 @@ const router = createRouter({
             },
             {
               path: '/settings/creator/home',
-              component: () => import('@/views/settings/creator/home.vue'),
+              component: () => import('@/views/settings/creator/home/index.vue'),
             },
             {
-              path: '/settings/creator/editor/:id?',
+              path: '/settings/creator/editor',
               component: () => import('@/views/settings/creator/editor.vue'),
             },
             {

code/link56/link56-frontend-new/src/types/post/editor.ts

@@ -1,7 +1,6 @@
 export enum PostStatusEnum {
   DRAFT = 0, // 草稿
   PUBLISHED = 1, // 已发布
-  OFFLINE = 2, // 已下架
 }
 
 export interface PostEditorForm {
@@ -46,6 +45,15 @@ export interface QueryPostParams {
   month: string
 }
 
+export interface DeletePostParams {
+  id: number
+}
+
+export interface UpdatePostStatusParams {
+  id: number
+  status: number
+}
+
 export interface Post {
   id: number
   title: string

code/link56/link56-frontend-new/src/types/post/index.ts

@@ -0,0 +1,18 @@
+export interface DashboradCount {
+  postCount: number
+  viewCount: number
+  likeCount: number
+  favoriteCount: number
+}
+
+export interface DashboradChart {
+  label: string
+  value: number
+}
+
+export interface DashboardData {
+  allCount: DashboradCount
+  numberChart: DashboradChart[]
+  viewChart: DashboradChart[]
+  typeChart: DashboradChart[]
+}

code/link56/link56-frontend-new/src/views/home/index.vue

@@ -2,7 +2,7 @@
 import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
 import { onMounted, ref } from 'vue'
 import QueryCompany from '@/components/QueryCompany.vue'
-import { getRecommendCompanyApi, getRecommendHotCompanyApi } from '@/request/api/company'
+import { getRecommendCompanyApi, getRecommendHotCompanyApi} from '@/request/api/company'
 import { useCommonStore } from '@/store/common'
 import Recommend from './components/recommend.vue'
 

code/link56/link56-frontend-new/src/views/settings/creator/editor.vue

@@ -9,13 +9,12 @@ import { useRoute } from 'vue-router'
 import CustomLoading from '@/components/CustomLoading.vue'
 import ImageUploadCard from '@/components/ImageUploadCard.vue'
 import WangEditor from '@/components/wang-editor/index.vue'
-import { addPostApi, updatePostApi } from '@/request/api/post'
+import { addPostApi, getPostApi, updatePostApi } from '@/request/api/post'
 import { getPostTagApi } from '@/request/api/post/tag'
 import { PostStatusEnum } from '@/types/post/editor'
 import { uploadToAliyun } from '@/utils/file'
 
 const route = useRoute()
-const id = route.params.id as string | undefined
 
 const titleInputRef = ref<HTMLInputElement | null>(null)
 const wangEditorRef = ref<any>(null)
@@ -80,9 +79,25 @@ const formRules = {
 const isUpdate = computed(() => form.value.id !== 0)
 
 onMounted(() => {
-  loading.init = false
+  const id = Number(route.query.id)
+  if (id) {
+    loading.init = true
 
-  oldForm.value = JSON.parse(JSON.stringify(form.value))
+    getPostApi(id).then((res) => {
+      if (res.isSuccess) {
+        form.value = res.data
+        oldForm.value = JSON.parse(JSON.stringify(res.data))
+      }
+      else {
+        ElMessage.error(res.message || '获取该帖子信息失败，请稍后再试')
+      }
+    }).catch((err) => {
+      console.log(err)
+      ElMessage.error('获取该帖子信息失败，请稍后再试')
+    }).finally(() => {
+      loading.init = false
+    })
+  }
 
   nextTick(() => {
     titleInputRef.value?.focus()
@@ -112,76 +127,70 @@ async function handleShowPushDrawer() {
   loading.init = false
 }
 
-async function handleSave(formEl: FormInstance | undefined) {
+async function handleCoverUploadIfNeeded() {
+  if (form.value.cover === oldForm.value.cover)
+    return
+
+  if (!form.value.cover || !imageUpload.value)
+    return
+
+  const { blob, name, size } = imageUpload.value
+  const res = await uploadToAliyun(blob, name, size, false)
+  form.value.cover = res.url
+}
+
+async function handleSave(formEl?: FormInstance) {
   if (!formEl)
     return
 
-  await formEl.validate(async (valid) => {
-    if (!valid)
-      return
+  loading.confirm = true
 
-    if (form.value.content === '') {
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      loading.confirm = false
+      return
+    }
+
+    if (!form.value.content) {
       ElMessage.warning('文章内容不能为空')
+      loading.confirm = false
       return
     }
 
-    loading.confirm = true
+    try {
+      await handleCoverUploadIfNeeded()
 
-    if (form.value.cover !== oldForm.value.cover) {
-      if (form.value.cover && imageUpload.value !== null) {
-        const aliyunRes = await uploadToAliyun(imageUpload.value.blob, imageUpload.value.name, imageUpload.value.size, false)
-        form.value.cover = aliyunRes.url
+      const payload = {
+        title: form.value.title,
+        content: form.value.content,
+        summary: form.value.summary,
+        status: form.value.status,
+        cover: form.value.cover,
+        tags: form.value.tags,
       }
+
+      const res = isUpdate.value
+        ? await updatePostApi({ id: form.value.id, ...payload })
+        : await addPostApi(payload)
+
+      if (!res.isSuccess) {
+        ElMessage.error(
+          res.message || (isUpdate.value ? '更新失败，请稍后再试' : '保存失败，请稍后再试'),
+        )
+        return
+      }
+
+      ElMessage.success(isUpdate.value ? '更新成功' : '保存成功')
+
+      form.value = res.data
+      showPushDrawer.value = false
     }
-
-    if (isUpdate.value) {
-      updatePostApi({
-        id: form.value.id,
-        title: form.value.title,
-        content: form.value.content,
-        summary: form.value.summary,
-        status: form.value.status,
-        cover: form.value.cover,
-        tags: form.value.tags,
-      }).then((res) => {
-        if (res.isSuccess) {
-          form.value = res.data
-        }
-        else {
-          ElMessage.error(res.message || '更新失败，请稍后再试')
-        }
-      }).catch((err) => {
-        console.log(err)
-        ElMessage.error('更新失败，请稍后再试')
-      }).finally(() => {
-        loading.confirm = false
-
-        showPushDrawer.value = false
-      })
+    catch (err) {
+      console.error(err)
+      ElMessage.error(isUpdate.value ? '更新失败，请稍后再试' : '保存失败，请稍后再试')
     }
-    else {
-      addPostApi({
-        title: form.value.title,
-        content: form.value.content,
-        summary: form.value.summary,
-        status: form.value.status,
-        cover: form.value.cover,
-        tags: form.value.tags,
-      }).then((res) => {
-        if (res.isSuccess) {
-          form.value = res.data
-        }
-        else {
-          ElMessage.error(res.message || '保存失败，请稍后再试')
-        }
-      }).catch((err) => {
-        console.log(err)
-        ElMessage.error('保存失败，请稍后再试')
-      }).finally(() => {
-        loading.confirm = false
-
-        showPushDrawer.value = false
-      })
+    finally {
+      loading.confirm = false
     }
   })
 }
@@ -225,7 +234,7 @@ async function handleSave(formEl: FormInstance | undefined) {
       </el-form-item>
 
       <el-form-item label="标签" prop="tags">
-        <el-select v-model="form.tags" placeholder="请选择标签">
+        <el-select v-model="form.tags" multiple placeholder="请选择标签">
           <el-option
             v-for="item in tagOptions"
             :key="item.id"

code/link56/link56-frontend-new/src/views/settings/creator/home/components/post-number-chart.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useEcharts } from '@/hooks/echarts'
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item', // 鼠标悬停时触发提示框，显示单个数据点
+    formatter: '{c}',
+  },
+  xAxis: {
+    type: 'category',
+    data: [] as string[],
+    axisLabel: {
+      interval: 0, // 强制显示所有标签
+    },
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [] as number[],
+      type: 'bar',
+      barWidth: '40%', // 调整柱子的宽度
+    },
+  ],
+}))
+onMounted(() => {
+  getData()
+})
+function getData() {
+  getForumPostChartNumberApi().then((res) => {
+    const labels: string[] = res.data.map(item => item.label)
+    const values: number[] = res.data.map(item => item.value)
+
+    updateOptions((opts) => {
+      opts.xAxis.data = labels
+      opts.series = [
+        {
+          data: values,
+          type: 'bar',
+          barWidth: '40%', // 调整柱子的宽度
+        },
+      ]
+      return opts
+    })
+  })
+}
+</script>
+
+<template>
+  <el-card class="card-demo" title="文章发布数量" hoverable>
+    <template #extra>
+      <a-link>刷新</a-link>
+    </template>
+    <div ref="domRef" class="h-360px" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped></style>

code/link56/link56-frontend-new/src/views/settings/creator/home/components/post-type-chart.vue

@@ -0,0 +1,63 @@
+<template>
+  <a-card class="card-demo" title="文章分类" hoverable>
+    <template #extra>
+      <a-link @click="getData">刷新</a-link>
+    </template>
+    <div ref="domRef" class="h-360px overflow-hidden"></div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import { useEcharts } from "@/hooks/echarts";
+import { getForumPostChartTypeApi } from "@/service/forum/post";
+import { onMounted } from "vue";
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  title: {
+    text: "文章分类",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left"
+  },
+  series: [
+    {
+      name: "文章分类",
+      type: "pie",
+      radius: "50%",
+      data: [] as any[], // Initial empty data
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
+}));
+
+// 数据请求并更新图表
+function getData() {
+  getForumPostChartTypeApi().then((res) => {
+    // 更新饼图的数据
+    updateOptions((opts) => {
+      opts.series[0].data = res.data.map((item) => ({
+        value: item.value,
+        name: item.label
+      }));
+      return opts;
+    });
+  });
+}
+
+onMounted(() => {
+  getData(); // 在组件加载时获取数据
+});
+</script>
+
+<style lang="scss" scoped></style>

code/link56/link56-frontend-new/src/views/settings/creator/home/components/post-view-chart.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-card class="card-demo" title="文章浏览量" hoverable>
+    <template #extra>
+      <a-link @click="getData">刷新</a-link>
+    </template>
+    <div ref="domRef" class="h-360px overflow-hidden"></div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import { useEcharts } from "@/hooks/echarts";
+import { getForumPostChartViewApi } from "@/service/forum/post";
+import { onMounted } from "vue";
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: "item", // 鼠标悬停时触发提示框，显示单个数据点
+    formatter: "{b}：{c}" // 自定义提示框显示格式：{b} 是 xAxis 的标签，{c} 是 series 的值
+  },
+
+  xAxis: {
+    type: "category",
+    data: [] as string[]
+  },
+  yAxis: {
+    type: "value"
+  },
+  series: [
+    {
+      data: [] as number[],
+      type: "line"
+    }
+  ]
+}));
+
+onMounted(() => {
+  getData();
+});
+
+function getData() {
+  getForumPostChartViewApi().then((res) => {
+    const labels: string[] = res.data.map((item) => item.label);
+    const values: number[] = res.data.map((item) => item.value);
+
+    updateOptions((opts) => {
+      opts.xAxis.data = labels;
+      opts.series = [
+        {
+          data: values,
+          type: "line"
+        }
+      ];
+      return opts;
+    });
+  });
+}
+</script>
+
+<style lang="scss" scoped></style>

code/link56/link56-frontend-new/src/views/settings/creator/home/index.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-
+import { onMounted, ref } from 'vue'
 import CustomLoading from '@/components/CustomLoading.vue'
+import { getDashboardDataApi } from '@/request/api/post'
 
 const loading = ref<boolean>(false)
+
+onMounted(() => {
+  getDashboardDataApi().then((res) => {
+    console.log(res)
+  })
+})
 </script>
 
 <template>
@@ -67,9 +73,7 @@ const loading = ref<boolean>(false)
           数据报表
         </div>
       </div>
-      <div class="card-content">
-      
-      </div>
+      <div class="card-content" />
     </div>
   </div>
 </template>

code/link56/link56-frontend-new/src/views/settings/creator/post.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-import type { TabsPaneContext } from 'element-plus'
 import type { Post, QueryPostParams } from '@/types/post/editor'
-import { Delete, Plus, Refresh, Search } from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import CustomLoading from '@/components/CustomLoading.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
-import { queryPostApi } from '@/request/api/post'
+import { deletePostApi, queryPostApi, updatePostStatusApi } from '@/request/api/post'
 import { PostStatusEnum } from '@/types/post/editor'
 
 const router = useRouter()
@@ -63,10 +62,6 @@ const postStatusOptions = [
     label: '已发布',
     value: PostStatusEnum.PUBLISHED,
   },
-  {
-    label: '已下架',
-    value: PostStatusEnum.OFFLINE,
-  },
 ]
 
 const page = reactive<Pagination>({
@@ -131,18 +126,100 @@ function handleTabChange() {
 }
 
 function handleDeleteRow(row: Post) {
-  ElMessageBox.confirm('删除内容后不可恢复，确定删除吗？', '删除提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    // 确认删除
-  })
+  ElMessageBox.confirm(
+    '删除内容后不可恢复，确定删除吗？',
+    '删除提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+      showClose: false,
+      beforeClose: async (action, instance, done) => {
+        if (action !== 'confirm') {
+          done()
+          return
+        }
+
+        try {
+          instance.confirmButtonLoading = true
+
+          const res = await deletePostApi({ id: row.id })
+
+          if (!res.isSuccess) {
+            ElMessage.error(res.message || '删除失败，请稍后再试')
+            return
+          }
+
+          ElMessage.success('删除成功')
+          queryPost()
+          done()
+        }
+        catch (err) {
+          console.error(err)
+          ElMessage.error('删除失败，请稍后再试')
+        }
+        finally {
+          instance.confirmButtonLoading = false
+        }
+      },
+    },
+  )
 }
 
-function handleToEdit(row: Post) {
+function handleUpdateToDraft(row: Post) {
+  ElMessageBox.confirm(
+    '确定将该文章移入草稿箱？',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+      showClose: false,
+      beforeClose: async (action, instance, done) => {
+        if (action !== 'confirm') {
+          done()
+          return
+        }
+
+        try {
+          instance.confirmButtonLoading = true
+
+          const res = await updatePostStatusApi({
+            id: row.id,
+            status: PostStatusEnum.DRAFT,
+          })
+
+          if (!res.isSuccess) {
+            ElMessage.error(res.message || '更新失败，请稍后再试')
+            return
+          }
+
+          ElMessage.success('更新成功')
+
+          tableData.value = tableData.value.filter(
+            item => item.id !== row.id,
+          )
+
+          done()
+        }
+        catch (err) {
+          console.error(err)
+          ElMessage.error('更新失败，请稍后再试')
+        }
+        finally {
+          instance.confirmButtonLoading = false
+        }
+      },
+    },
+  )
+}
+
+function handleToEdit(row?: Post) {
+  const query = row ? { id: row.id } : undefined
+
   router.push({
-    path: `/settings/creator/editor/${row.id}`,
+    path: '/settings/creator/editor',
+    query,
   })
 }
 </script>
@@ -197,14 +274,38 @@ function handleToEdit(row: Post) {
       <CustomLoading v-if="loading" :in-container="true" />
 
       <div v-else-if="tableData.length > 0" class="post-list">
-        <div v-for="item in tableData" :key="item.id" class="post-item">
+        <div
+          v-for="item in tableData"
+          :key="item.id"
+          class="post-item"
+          @click="handleToEdit(item)"
+        >
           <div v-if="item.cover" class="post-cover">
             <img :src="item.cover">
           </div>
           <div class="post-content">
             <div class="post-main">
-              <div class="post-title">
-                {{ item.title }}
+              <div class="post-title-area">
+                <span class="post-title">
+                  {{ item.title }}
+                </span>
+                <div class="post-status">
+                  <el-tag
+                    v-if="item.status === PostStatusEnum.DRAFT"
+                    type="info"
+                    size="small"
+                  >
+                    草稿
+                  </el-tag>
+
+                  <el-tag
+                    v-else-if="item.status === PostStatusEnum.PUBLISHED"
+                    type="success"
+                    size="small"
+                  >
+                    已发布
+                  </el-tag>
+                </div>
               </div>
               <div class="post-actions">
                 <el-dropdown>
@@ -215,7 +316,10 @@ function handleToEdit(row: Post) {
                     <el-dropdown-item @click="handleToEdit(item)">
                       编辑
                     </el-dropdown-item>
-                    <el-dropdown-item v-if="item.status !== PostStatusEnum.DRAFT">
+                    <el-dropdown-item v-if="item.status !== PostStatusEnum.DRAFT" @click="handleToEdit(item)">
+                      详细
+                    </el-dropdown-item>
+                    <el-dropdown-item v-if="item.status !== PostStatusEnum.DRAFT" @click="handleUpdateToDraft(item)">
                       移入草稿箱
                     </el-dropdown-item>
                     <el-dropdown-item @click="handleDeleteRow(item)">
@@ -247,7 +351,7 @@ function handleToEdit(row: Post) {
 
       <CustomEmpty v-else :in-container="true">
         <template #extra>
-          <el-button type="primary">
+          <el-button type="primary" @click="handleToEdit()">
             开始创作
           </el-button>
         </template>
@@ -269,11 +373,19 @@ function handleToEdit(row: Post) {
 
 <style lang="scss" scoped>
 .post-wrapper {
-  padding: 0px 16px;
   height: 100%;
   display: flex;
   flex-direction: column;
 
+  .post-header {
+    :deep(.el-tabs__nav-scroll) {
+      padding: 0px 16px;
+    }
+    .post-query {
+      padding: 0px 16px;
+    }
+  }
+
   .post-content {
     flex: 1;
     min-height: 0;
@@ -281,6 +393,7 @@ function handleToEdit(row: Post) {
   }
 
   .post-footer {
+    padding: 0px 16px;
     height: 56px;
     width: 100%;
     display: flex;
@@ -291,11 +404,10 @@ function handleToEdit(row: Post) {
 .post-list {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid #e5e7eb;
 }
 
 .post-item {
-  padding: 12px 16px;
+  padding: 12px 24px;
   display: flex;
   gap: 12px;
   cursor: pointer;
@@ -326,20 +438,35 @@ function handleToEdit(row: Post) {
       align-items: center;
       justify-content: space-between;
       font-size: 16px;
+      overflow: hidden;
 
-      .post-title {
-        width: 800px;
-        font-size: 20px;
-        font-weight: bold;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      .post-title-area {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        .post-title {
+          margin-right: 12px;
+          font-size: 20px;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .post-status {
+          display: flex;
+          flex-shrink: 0;
+        }
       }
 
       .post-actions {
         display: flex;
         align-items: center;
         gap: 8px;
+        flex-shrink: 0;
+        min-width: 0;
+        margin-left: 16px;
 
         .post-action {
           font-size: 24px;