From f42d41417d471442cf7344a9826591f2f0b58a1d Mon Sep 17 00:00:00 2001
From: igeekfan <igeekfan@foxmail.com>
Date: Sat, 13 Jul 2024 17:59:12 +0800
Subject: [PATCH] Refactor code for improved organization and readability

---
 .env.development                     |   4 +-
 README.md                            |  32 +-
 src/view/user/index.vue              | 466 +++++++++++++--------------
 src/view/user/my-create-classify.vue | 129 ++++----
 4 files changed, 304 insertions(+), 327 deletions(-)

diff --git a/.env.development b/.env.development
index 9ba4836..9149005 100644
--- a/.env.development
+++ b/.env.development
@@ -2,8 +2,8 @@ ENV = 'development'
 
 
 
-#VUE_APP_BASE_URL = 'https://api.igeekfan.cn/'
-#VUE_APP_CURRENT_URL = 'https://vvlog.igeekfan.cn/'
+# VUE_APP_BASE_URL = 'https://api.igeekfan.cn/'
+# VUE_APP_CURRENT_URL = 'https://vvlog.igeekfan.cn/'
 
 
  VUE_APP_BASE_URL = 'https://localhost:5001/'
diff --git a/README.md b/README.md
index 02c8cbc..3fb8062 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,5 @@
-
 <p align="center">
-  <a href="http://doc.cms.7yue.pro/">
+  <a href="https://igeekfan.cn/">
     <img width="200" src="https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/left-logo.png">
   </a>
 </p>
@@ -17,7 +16,7 @@
 
 1. Lin-CMS 是工程类开源项目，不能保证无缝升级.
 
-2. 当前分支为 Vue3 版本，如需使用 Vue2.x 请切换至 vue2 分支。
+2. 当前分支为 Vue3 版本
 
 ## 文档资料
 
@@ -29,33 +28,6 @@
 
 - [https://vvlog.igeekfan.cn/](https://vvlog.igeekfan.cn/)
 
-## Lin CMS 的特点
-
-Lin CMS 的构筑思想是有其自身特点的。下面我们阐述一些 Lin 的主要特点。
-
-#### Lin CMS 是一个前后端分离的 CMS 解决方案
-
-这意味着，Lin 既提供后台的支撑，也有一套对应的前端系统，当然双端分离的好处不仅仅在于此，我们会在后续提供`NodeJS`和`PHP`版本的 Lin。如果你心仪 Lin，却又因为技术栈的原因无法即可使用，没关系，我们会在后续提供更多的语言版本。为什么 Lin 要选择前后端分离的单页面架构呢？
-
-首先，传统的网站开发更多的是采用服务端渲染的方式，需用使用一种模板语言在服务端完成页面渲染：比如 JinJa2、Jade 等。
-服务端渲染的好处在于可以比较好的支持 SEO，但作为内部使用的 CMS 管理系统，SEO 并不重要。
-
-但一个不可忽视的事实是，服务器渲染的页面到底是由前端开发者来完成，还是由服务器开发者来完成？其实都不太合适。现在已经没有多少前端开发者是了解这些服务端模板语言的，而服务器开发者本身是不太擅长开发页面的。那还是分开吧，前端用最熟悉的 Vue 写 JS 和 CSS，而服务器只关注自己的 API 即可。
-
-其次，单页面应用程序的体验本身就要好于传统网站。
-
-#### 框架本身已内置了 CMS 常用的功能
-
-Lin 已经内置了 CMS 中最为常见的需求：用户管理、权限管理、日志系统等。开发者只需要集中精力开发自己的 CMS 业务即可
-
-#### Lin CMS 本身也是一套开发规范
-
-Lin CMS 除了内置常见的功能外，还提供了一套开发规范与工具类。换句话说，开发者无需再纠结如何验证参数？如何操作数据库？如何做全局的异常处理？API 的结构如何？前端结构应该如何组织？这些问题 Lin CMS 已经给出了解决方案。当然，如果你不喜欢 Lin 给出的架构，那么自己去实现自己的 CMS 架构也是可以的。但通常情况下，你确实无需再做出架构上的改动，Lin 可以满足绝大多数中小型的 CMS 需求。
-
-举例来说，每个 API 都需要校验客户端传递的参数。但校验的方法有很多种，不同的开发者会有不同的构筑方案。但 Lin 提供了一套验证机制，开发者无需再纠结如何校验参数，只需模仿 Lin 的校验方案去写自己的业务即可。
-
-还是基于这样的一个原则：**Lin CMS 只需要开发者关注自己的业务开发，它已经内置了很多机制帮助开发者快速开发自己的业务**。
-
 ## 快速上手
 
 ```sh
diff --git a/src/view/user/index.vue b/src/view/user/index.vue
index 6e4257a..30aca63 100644
--- a/src/view/user/index.vue
+++ b/src/view/user/index.vue
@@ -12,12 +12,8 @@
             <el-tab-pane name="article">
               <template #label> <i class="el-icon-date"></i> <span style="margin-left: 3px">随笔</span> </template>
               <!-- <my-create-classify></my-create-classify> -->
-              <article-list
-                :dataSource="dataSource"
-                class="vv-article-list"
-                @deleteArticle="deleteArticle"
-                :showEdit="true"
-              ></article-list>
+              <article-list :dataSource="dataSource" class="vv-article-list" @deleteArticle="deleteArticle"
+                :showEdit="true"></article-list>
               <infinite-loading @infinite="infiniteHandler" :identifier="any" distance="50">
                 <template #spinner>
                   <el-divider class="lin-divider">加载中...</el-divider>
@@ -31,36 +27,25 @@
               <template #label> <i class="el-icon-user"></i> <span style="margin-left: 3px">关注</span> </template>
               <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                 <el-tab-pane :label="'关注用户' + info.subscribe_count" name="subscribe">
-                  <subscribe-user-list
-                    :userId="userId"
-                    userType="subscribe"
-                    v-if="activeName == 'subscribe'"
+                  <subscribe-user-list :userId="userId" userType="subscribe" v-if="activeName == 'subscribe'"
                     v-on:success="subscribe_count => (info.subscribe_count = subscribe_count)"
-                    v-on:subscribe="subscribe_count => (info.subscribe_count += subscribe_count)"
-                  ></subscribe-user-list>
+                    v-on:subscribe="subscribe_count => (info.subscribe_count += subscribe_count)"></subscribe-user-list>
                 </el-tab-pane>
                 <el-tab-pane :label="'粉丝' + info.fans_count" name="fans">
-                  <subscribe-user-list
-                    :userId="userId"
-                    userType="fans"
-                    v-if="activeName == 'fans'"
+                  <subscribe-user-list :userId="userId" userType="fans" v-if="activeName == 'fans'"
                     v-on:success="fans_count => (info.fans_count = fans_count)"
-                    v-on:subscribe="fans_count => (info.subscribe_count += fans_count)"
-                  ></subscribe-user-list>
+                    v-on:subscribe="fans_count => (info.subscribe_count += fans_count)"></subscribe-user-list>
                 </el-tab-pane>
                 <el-tab-pane :label="'标签' + info.tag_count" name="tag">
-                  <subscribe-tag-list
-                    :userId="userId"
-                    v-if="activeName == 'tag'"
+                  <subscribe-tag-list :userId="userId" v-if="activeName == 'tag'"
                     v-on:success="tag_count => (info.tag_count = tag_count)"
-                    v-on:subscribe="tag_count => (info.tag_count += tag_count)"
-                  ></subscribe-tag-list>
+                    v-on:subscribe="tag_count => (info.tag_count += tag_count)"></subscribe-tag-list>
                 </el-tab-pane>
               </el-tabs>
             </el-tab-pane>
             <el-tab-pane name="classify">
               <template #label>
-                <i class="el-icon-collection"></i> <span style="margin-left: 3px">专栏</span>
+                <i class="el-icon-present"></i> <span style="margin-left: 3px">专栏</span>
               </template>
               <my-create-classify :userId="userId"></my-create-classify>
             </el-tab-pane>
@@ -72,7 +57,9 @@
             </el-tab-pane>
             <el-tab-pane name="like">
               <template #label>
-                <el-icon><Star /></el-icon> <span style="margin-left: 3px">点赞</span>
+                <el-icon>
+                  <Star />
+                </el-icon> <span style="margin-left: 3px">点赞</span>
               </template>
               <user-like-article :userId="userId" ref="userLikeArticle" :classify_id="classify_id"></user-like-article>
             </el-tab-pane>
@@ -109,7 +96,9 @@
             <div>
               <router-link :to="{ path: `/p/editor/0` }">
                 <el-button type="primary" plain>
-                  <el-icon class="el-icon--left"> <Edit /> </el-icon>写随笔
+                  <el-icon class="el-icon--left">
+                    <Edit />
+                  </el-icon>写随笔
                 </el-button>
               </router-link>
             </div>
@@ -121,257 +110,258 @@
 </template>
 
 <script>
-import { SubscribeUserList, SubscribeTagList } from '@/view/subscribe'
-import Profile from '@/view/user/profile'
-import articleApi from '@/model/article'
-import subscribeApi from '@/model/subscribe'
-import InfiniteLoading from 'v3-infinite-loading'
-import 'v3-infinite-loading/lib/style.css'
-import ArticleList from '@/view/article/article-list'
-import MyCreateClassify from './my-create-classify'
-import CollectionList from '@/view/collection/collection-list'
-import UserLikeArticle from './user-like-article'
-export default {
-  name: 'UserIndex',
-  components: {
-    SubscribeUserList,
-    SubscribeTagList,
-    Profile,
-    ArticleList,
-    InfiniteLoading,
-    MyCreateClassify,
-    CollectionList,
-    UserLikeArticle,
-  },
-  data() {
-    return {
-      tab: 'article',
-      activeName: 'subscribe',
-      dataSource: [],
-      pagination: {
-        currentPage: 0,
-        pageSize: 10,
-        pageTotal: 0,
-      },
-      loading: false,
-      any: new Date(),
-      info: {
-        subscribe_count: 0,
-        fans_count: 0,
-        tag_count: 0,
-      },
-      classifys: [],
-    }
-  },
-  computed: {
-    userId() {
-      return this.$route.params.id
-    },
-    name() {
-      return this.$route.params.name
-    },
-    classify_id() {
-      return this.$route.query.classify_id
-    },
-  },
-  watch: {
-    name(newVal) {
-      this.tab = newVal
-    },
-    async $route(v) {
-      let key = v.query.key
-      console.log(v)
-      switch (v.params.name) {
-        case 'article':
-          this.refresh()
-          break
-        case 'subscribe':
-          if (key == null || key == undefined) {
-            key = 'subscribe'
-          }
-          this.activeName = key
-          await this.getUserSubscribe()
-          break
-        case 'collection':
-          break
-        case 'like':
-          this.$refs.userLikeArticle.refresh()
-          break
-        default:
-          break
-      }
+  import { SubscribeUserList, SubscribeTagList } from '@/view/subscribe'
+  import Profile from '@/view/user/profile'
+  import articleApi from '@/model/article'
+  import subscribeApi from '@/model/subscribe'
+  import InfiniteLoading from 'v3-infinite-loading'
+  import 'v3-infinite-loading/lib/style.css'
+  import ArticleList from '@/view/article/article-list'
+  import MyCreateClassify from './my-create-classify'
+  import CollectionList from '@/view/collection/collection-list'
+  import UserLikeArticle from './user-like-article'
+  export default {
+    name: 'UserIndex',
+    components: {
+      SubscribeUserList,
+      SubscribeTagList,
+      Profile,
+      ArticleList,
+      InfiniteLoading,
+      MyCreateClassify,
+      CollectionList,
+      UserLikeArticle,
     },
-  },
-  async created() {
-    console.log(this.query)
-    // await this.getUserSubscribe()
-  },
-  mounted() {
-    setTimeout(() => {
-      switch (this.name) {
-        case 'article':
-        case 'subscribe':
-        case 'collection':
-        case 'like':
-          this.tab = this.name
-          break
-        default:
-          this.tab = 'article'
-          break
+    data() {
+      return {
+        tab: 'article',
+        activeName: 'subscribe',
+        dataSource: [],
+        pagination: {
+          currentPage: 0,
+          pageSize: 10,
+          pageTotal: 0,
+        },
+        loading: false,
+        any: new Date(),
+        info: {
+          subscribe_count: 0,
+          fans_count: 0,
+          tag_count: 0,
+        },
+        classifys: [],
       }
-      let key = this.$route.query.key
-      if (key == null || key == undefined) {
-        key = 'subscribe'
-      }
-      this.activeName = key
-    }, 500)
-  },
-  methods: {
-    async deleteArticle() {
-      await this.refresh()
     },
-    async refresh() {
-      this.pagination.currentPage = 0
-      this.any = new Date()
-      await this.infiniteHandler()
+    computed: {
+      userId() {
+        return this.$route.params.id
+      },
+      name() {
+        return this.$route.params.name
+      },
+      classify_id() {
+        return this.$route.query.classify_id
+      },
     },
-    handleTabClick(tab, event) {
-      if (tab.paneName == this.name) return
-      this.$router.push({ path: `/user/${this.userId}/${tab.paneName}` })
+    watch: {
+      name(newVal) {
+        this.tab = newVal
+      },
+      async $route(v) {
+        let key = v.query.key
+        console.log(v)
+        switch (v.params.name) {
+          case 'article':
+            this.refresh()
+            break
+          case 'subscribe':
+            if (key == null || key == undefined) {
+              key = 'subscribe'
+            }
+            this.activeName = key
+            await this.getUserSubscribe()
+            break
+          case 'collection':
+            break
+          case 'like':
+            this.$refs.userLikeArticle.refresh()
+            break
+          default:
+            break
+        }
+      },
     },
-    handleClick(tab, event) {
-      if (tab.paneName == this.$route.query.key) return
-      this.$router.push({
-        path: `/user/${this.userId}/subscribe?key=${tab.name}`,
-      })
+    async created() {
+      console.log(this.query)
+      // await this.getUserSubscribe()
     },
-    async infiniteHandler($state) {
-      let res
-      const currentPage = this.pagination.currentPage
-      res = await articleApi.getQueryArticles({
-        count: this.pagination.pageSize,
-        page: currentPage,
-        sort: this.sort,
-        user_id: this.userId,
-        classify_id: this.classify_id,
-      })
-      let items = [...res.items]
-
-      if (items.length == 0) {
-        if (currentPage == 0) {
-          this.dataSource = items
+    mounted() {
+      setTimeout(() => {
+        switch (this.name) {
+          case 'article':
+          case 'subscribe':
+          case 'collection':
+          case 'classify':
+          case 'like':
+            this.tab = this.name
+            break
+          default:
+            this.tab = 'article'
+            break
         }
-        $state && $state.complete()
-      } else {
-        if (currentPage == 0) {
-          this.dataSource = items
-        } else {
-          this.dataSource = this.dataSource.concat(items)
+        let key = this.$route.query.key
+        if (key == null || key == undefined) {
+          key = 'subscribe'
         }
-        this.pagination.currentPage += 1
-        this.pagination.pageTotal = res.count
-
-        $state && $state.loaded()
-      }
+        this.activeName = key
+      }, 500)
     },
-    async getUserSubscribe() {
-      if (this.userId != null) {
-        let res = await subscribeApi.getUserSubscribe({
-          userId: this.userId,
+    methods: {
+      async deleteArticle() {
+        await this.refresh()
+      },
+      async refresh() {
+        this.pagination.currentPage = 0
+        this.any = new Date()
+        await this.infiniteHandler()
+      },
+      handleTabClick(tab, event) {
+        if (tab.paneName == this.name) return
+        this.$router.push({ path: `/user/${this.userId}/${tab.paneName}` })
+      },
+      handleClick(tab, event) {
+        if (tab.paneName == this.$route.query.key) return
+        this.$router.push({
+          path: `/user/${this.userId}/subscribe?key=${tab.name}`,
         })
-        this.info = res
-      }
+      },
+      async infiniteHandler($state) {
+        let res
+        const currentPage = this.pagination.currentPage
+        res = await articleApi.getQueryArticles({
+          count: this.pagination.pageSize,
+          page: currentPage,
+          sort: this.sort,
+          user_id: this.userId,
+          classify_id: this.classify_id,
+        })
+        let items = [...res.items]
+
+        if (items.length == 0) {
+          if (currentPage == 0) {
+            this.dataSource = items
+          }
+          $state && $state.complete()
+        } else {
+          if (currentPage == 0) {
+            this.dataSource = items
+          } else {
+            this.dataSource = this.dataSource.concat(items)
+          }
+          this.pagination.currentPage += 1
+          this.pagination.pageTotal = res.count
+
+          $state && $state.loaded()
+        }
+      },
+      async getUserSubscribe() {
+        if (this.userId != null) {
+          let res = await subscribeApi.getUserSubscribe({
+            userId: this.userId,
+          })
+          this.info = res
+        }
+      },
     },
-  },
-}
+  }
 </script>
 
 <style lang="scss" scoped>
-.lin-divider .el-divider__text {
-  background-color: #f4f5f5;
-}
+  .lin-divider .el-divider__text {
+    background-color: #f4f5f5;
+  }
 
-.list {
-  .item {
-    cursor: pointer;
-    padding-left: 10px;
+  .list {
+    .item {
+      cursor: pointer;
+      padding-left: 10px;
 
-    &:hover {
-      background: #e6f7ff;
+      &:hover {
+        background: #e6f7ff;
+      }
     }
   }
-}
-
-.vv-article-list :deep(.article-list .article-item) {
-  padding: 1.5rem 0rem;
-}
-
-.vv-tabs :deep(.el-tabs__item) {
-  font-size: 16px;
-}
 
-.vv-tabs :deep(.el-tabs__nav .el-tabs__active-bar) {
-  height: 3px;
-}
+  .vv-article-list :deep(.article-list .article-item) {
+    padding: 1.5rem 0rem;
+  }
 
-.number-board {
-  display: flex;
+  .vv-tabs :deep(.el-tabs__item) {
+    font-size: 16px;
+  }
 
-  .el-divider--vertical {
-    height: 5rem;
+  .vv-tabs :deep(.el-tabs__nav .el-tabs__active-bar) {
+    height: 3px;
   }
 
-  .number-board-item {
-    flex: 1 1;
+  .number-board {
+    display: flex;
 
-    &:hover {
-      color: #175199;
+    .el-divider--vertical {
+      height: 5rem;
     }
 
-    .number-board-item-inner {
-      padding: 12px 0;
-      text-align: center;
-      line-height: 1.6;
+    .number-board-item {
+      flex: 1 1;
 
-      .number-board-item-name {
-        font-size: 14px;
-        color: #8590a6;
+      &:hover {
+        color: #175199;
       }
 
-      .number-board-item-value {
-        font-size: 20px;
-        color: #1a1a1a;
-        font-weight: 600;
+      .number-board-item-inner {
+        padding: 12px 0;
+        text-align: center;
+        line-height: 1.6;
 
-        &:hover {
-          text-decoration: underline;
+        .number-board-item-name {
+          font-size: 14px;
+          color: #8590a6;
+        }
+
+        .number-board-item-value {
+          font-size: 20px;
+          color: #1a1a1a;
+          font-weight: 600;
+
+          &:hover {
+            text-decoration: underline;
+          }
         }
       }
     }
   }
-}
 
-.lin-card {
-  margin-bottom: 10px;
-  border-radius: 8px;
+  .lin-card {
+    margin-bottom: 10px;
+    border-radius: 8px;
 
-  .lin-title {
+    .lin-title {
+      margin-bottom: 1rem;
+      padding: 0 0 0 0.5rem;
+      color: #000;
+      border-left: 4px solid #ec7259;
+    }
+  }
+
+  .tag-card {
+    margin-bottom: 10px;
+    border-radius: 8px;
+  }
+
+  .tag-title {
     margin-bottom: 1rem;
     padding: 0 0 0 0.5rem;
     color: #000;
     border-left: 4px solid #ec7259;
   }
-}
-
-.tag-card {
-  margin-bottom: 10px;
-  border-radius: 8px;
-}
-
-.tag-title {
-  margin-bottom: 1rem;
-  padding: 0 0 0 0.5rem;
-  color: #000;
-  border-left: 4px solid #ec7259;
-}
 </style>
diff --git a/src/view/user/my-create-classify.vue b/src/view/user/my-create-classify.vue
index 2a5be94..518c119 100644
--- a/src/view/user/my-create-classify.vue
+++ b/src/view/user/my-create-classify.vue
@@ -1,71 +1,86 @@
 <template>
   <div>
-    <el-card>
-      <template #header>
-        <span>{{ name }}</span>
+    <v-list itemLayout="horizontal" :dataSource="listData" :bordered="false" v-loading="loading" class="list"
+      :pagination="pagination">
+      <template v-slot:renderItem="{ item, index }">
+        <v-list-item class="item">
+          <template #actions>
+          </template>
+          <v-list-item-meta>
+            <template #title>
+              <router-link :to="{ path: `/user/${userId}/classify?classify_id=${item.id}` }" target="_blank">
+                {{ item.classify_name }}
+              </router-link>
+            </template>
+            <template #description>
+              <span class="fn-ellpisis1 item">{{ $filters.filterTimeYmdHms(item.create_time) }}</span>
+              <span class="fn-ellpisis1 item">文章数 {{ item.article_count }}</span>
+
+            </template>
+            <template #avatar>
+              <el-avatar :src="item.thumbnail_display" shape="square" style="height: 84px;width: 150px;">
+                <img src=" https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
+              </el-avatar>
+            </template>
+          </v-list-item-meta>
+        </v-list-item>
+      </template>
+      <template #footer>
+        <div></div>
       </template>
-      <div>
-        <el-tag
-          :hit="false"
-          type="success"
-          class="margin-left-xs margin-bottom-xs"
-          :effect="classify_id == undefined ? 'dark' : 'plain'"
-        >
-          <router-link :to="{ path: `/user/${userId}/classify` }">全部</router-link>
-        </el-tag>
-        <template v-for="item in classifys">
-          <el-tag
-            :hit="false"
-            :effect="item.id == classify_id ? 'dark' : 'plain'"
-            type="success"
-            v-key="item.id"
-            class="margin-left-xs margin-bottom-xs"
-          >
-            <router-link :to="{ path: `/user/${userId}/classify?classify_id=${item.id}` }"
-              >{{ item.classify_name }}
-            </router-link>
-          </el-tag>
-        </template>
-      </div>
-    </el-card>
+    </v-list>
   </div>
 </template>
 
 <script>
-import classifyApi from '@/model/classify'
-export default {
-  name: 'MyCreateClassify',
-  data() {
-    return {
-      classifys: [],
-    }
-  },
-  computed: {
-    userId() {
-      return this.$route.params.id
+  import classifyApi from '@/model/classify'
+  import VList from '@/component/list'
+
+  export default {
+    name: 'MyCreateClassify',
+    components: {
+      VList,
+      VListItem: VList.Item,
+      VListItemMeta: VList.Item.Meta,
     },
-    classify_id() {
-      return this.$route.query.classify_id
+    data() {
+      return {
+        listData: [],
+      }
     },
-    name() {
-      return this.user.id == this.userId ? '我创建的个人专栏' : '他的个人专栏'
+    computed: {
+      userId() {
+        return this.$route.params.id
+      },
+      classify_id() {
+        return this.$route.query.classify_id
+      },
+      name() {
+        return this.user.id == this.userId ? '我创建的个人专栏' : '他的个人专栏'
+      },
+      user() {
+        return this.$store.state.user
+      },
     },
-    user() {
-      return this.$store.state.user
+    async created() {
+      this.getClassifys()
     },
-  },
-  async created() {
-    this.getClassifys()
-  },
-  methods: {
-    async getClassifys() {
-      let res = await classifyApi.getClassifys({
-        user_id: this.userId,
-      })
-      this.classifys = res
+    methods: {
+      async getClassifys() {
+        let res = await classifyApi.getClassifys({
+          user_id: this.userId,
+        })
+        this.listData = res.items
+      },
     },
-  },
-}
+  }
 </script>
 
-<style></style>
+<style>
+  .item:not(:last-child)::after {
+    content: '·';
+    color: rgb(178, 186, 194);
+    margin: 0px 0.4em;
+  }
+
+</style>