修复已知问题

Msg-Lbo · Mar 9, 2024 · a6f19b7 · a6f19b7
1 parent 8149949
commit a6f19b7
Show file tree

Hide file tree

Showing 13 changed files with 1,196 additions and 60 deletions.
diff --git a/client/components.d.ts b/client/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Bread_crumb: typeof import('./src/components/bread_crumb.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NBadge: typeof import('naive-ui')['NBadge']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
@@ -17,6 +18,8 @@ declare module 'vue' {
     NCarousel: typeof import('naive-ui')['NCarousel']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
+    NCollapse: typeof import('naive-ui')['NCollapse']
+    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialog: typeof import('naive-ui')['NDialog']
@@ -50,6 +53,7 @@ declare module 'vue' {
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
     NTable: typeof import('naive-ui')['NTable']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/apis/album.ts b/client/src/apis/album.ts
@@ -5,7 +5,9 @@ export const createAlbumApi = async (name: string) => {
     return await $http({
         url: '/album/add-album',
         method: 'POST',
-        data: name
+        data: {
+            name
+        }
     })
 }
 
@@ -15,4 +17,12 @@ export const getAlbumListApi = async () => {
         url: '/album/album-list',
         method: 'GET',
     })
+}
+
+// 获取专辑ID列表
+export const getIdListApi = async () => {
+    return await $http({
+        url: '/album/albumId-list',
+        method: 'GET',
+    })
 }
diff --git a/client/src/views/home/Articledetail.vue b/client/src/views/home/Articledetail.vue
@@ -6,6 +6,7 @@
           <h1>{{ title }}</h1>
           <div class="article-info">
             <span>作者：{{ author }}</span>
+            <span>专辑：{{ name }}</span>
             <span>发布时间：{{ time }}</span>
           </div>
           <div class="campaigns" v-if="is_campaigns">
@@ -65,7 +66,9 @@
             <n-button size="small" type="error" @click="likeArticle">{{
               is_like === true ? "取消点赞" : "点赞"
             }}</n-button>
-            <n-button size="small" type="warning" @click="collectArticle">{{ is_collect === true ? '取消收藏' : '收藏' }}</n-button>
+            <n-button size="small" type="warning" @click="collectArticle">{{
+              is_collect === true ? "取消收藏" : "收藏"
+            }}</n-button>
             <n-button size="small" type="info" @click="shareArticle">分享</n-button>
             <n-button size="small" type="success" :disabled="!userStore.account" @click="addComment">发送</n-button>
           </n-space>
@@ -91,6 +94,7 @@ const route = useRoute(); // 获取路由对象
 const id = ref(route.query.id); // 获取路由参数
 const title = ref("");
 const author = ref("");
+const name = ref("");
 const time = ref("");
 const comment = ref("");
 const user = ref();
@@ -146,6 +150,7 @@ const getArticleDetail = async () => {
   time.value = res.data.create_time;
   console.log(res.data.is_campaigns);
   user.value = res.data.user;
+  name.value = res.data.name;
   is_campaigns.value = res.data.is_campaigns == 1 ? true : false;
 };
 getArticleDetail();

diff --git a/client/src/views/home/article/components/AddArticle.vue b/client/src/views/home/article/components/AddArticle.vue
@@ -14,6 +14,9 @@
                             <n-form-item label="文章分类" path="category_id">
                                 <n-select v-model:value="articleForm.category_id" :options="categoryOptions" />
                             </n-form-item>
+                            <n-form-item label="文章专辑" path="album">
+                                <n-select v-model:value="articleForm.album" :options="albumOptions" />
+                            </n-form-item>
                         </n-form>
                     </div>
                     <div class="cover-content">
@@ -48,6 +51,7 @@ import { MdEditor } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import { UploadFileInfo, useMessage } from 'naive-ui';
 import { addArticleApi, getArticleDetailApi, updateArticleApi, uploadArticleImageApi } from '@/apis/article';
+import { getIdListApi } from "@/apis/album";
 import { useUserStore } from '@/store/userinfo';
 import { getCategoryListApi } from '@/apis/category';
 
@@ -63,28 +67,44 @@ const articleForm = ref({
     cover: '',
     content: '',
     category_id: '',
+    album:'',
     author: userStore.account
 })
+
 // 父组件传递过来的id
 const props = defineProps({
     editId: {
         type: Number,
         default: 0
     }
 })
-// 或者文章详情
+// 获取文章详情
 const getArticleDetail = async () => {
     const res = await getArticleDetailApi(props.editId)
     if (res.code === 200) {
-        articleForm.value = res.data[0]
+        articleForm.value = res.data    
     }
 }
 // 如果有id，就获取文章详情
 if (props.editId) {
     getArticleDetail()
 }
 
-
+// 获取专辑列表
+const albumOptions = ref([])
+const getAlbumList = async () => {
+    const res = await getIdListApi()
+    if (res.code === 200) {
+        const formatData = res.data.map((item: any) => {
+            return {
+                label: item.name,
+                value: item.id
+            }
+        })
+        albumOptions.value = formatData
+    }
+}
+getAlbumList()
 // 获取分类列表
 const categoryOptions = ref([])
 const getCategoryList = async () => {

diff --git a/client/src/views/home/article/components/AlbumList.vue b/client/src/views/home/article/components/AlbumList.vue
@@ -1,13 +1,37 @@
 <template>
-  <div></div>
+  <div id="albumList">
+    <n-popover placement="bottom" trigger="click">
+      <template #trigger>
+        <n-button type="success" size="small" @click="showAddPopover = true">创建专辑</n-button>
+      </template>
+      <n-input size="small" v-model:value="name" placeholder="请输入专辑名" />
+      <div class="add-button" style="text-align: right; margin-top: 5px;">
+         <n-button @click="createAlbum" size="small">提交</n-button>
+      </div>
+    </n-popover>
+    <div class="album-list">
+      <div class="album-item">
+        <n-collapse arrow-placement="right">
+          <n-collapse-item v-for="item in albumList" :key="item.id" :title="item.albumName" :name="item.id">
+            <div class="article-list">
+              <div class="article-item" v-for="article in item.articleList" :key="article.id" @click="toArticle(article.id)">
+                {{ article.article_title }}
+              </div>
+            </div>
+          </n-collapse-item>
+        </n-collapse>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { getAlbumListApi } from "@/apis/album";
+import { getAlbumListApi, createAlbumApi } from "@/apis/album";
+import router from "@/router";
 import { ref } from "vue";
 const albumList = ref<any>([]);
-
-
+const showAddPopover = ref<boolean>(false);
+const name = ref<string>("");
 // 获取专辑列表
 const getAlbumList = async () => {
   const res = await getAlbumListApi();
@@ -16,6 +40,56 @@ const getAlbumList = async () => {
   }
 };
 getAlbumList();
+
+// 新增专辑
+const createAlbum = async () => {
+  const res = await createAlbumApi(name.value);
+  if (res.code === 200) {
+    getAlbumList();
+  }
+};
+
+const toArticle = (id: number) => {
+  // 路由传参
+  router.push({
+    path: "/detail",
+    query: {
+      id: id,
+    },
+  });
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.album-list {
+  height: 72vh;
+  .album-item {
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    &:last-child {
+      border-bottom: none;
+    }
+    .article-list {
+      width: 100%;
+      .article-item {
+        padding: 10px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+        transition: all 0.1s ease-in-out;
+
+        &:hover {
+          background-color: #eee;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/client/src/views/home/article/components/CollectList.vue b/client/src/views/home/article/components/CollectList.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="collect-list">
     <div class="collect-list">
-      收藏列表
       <div class="collect-item" v-for="item in articleList" :key="item.id">
         <div class="collect-item-img">
           <img :src="item.cover" alt="" />