perf: 百科杂项更新

JX3BOX · Jan 9, 2024 · a85edbb · a85edbb
1 parent 6adbd36
commit a85edbb
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 141 deletions.
diff --git a/src/assets/css/knowledge/nav.less b/src/assets/css/knowledge/nav.less
@@ -1,61 +1,61 @@
-.m-nav{
-    .el-tree{
-        background:none;
-    }
+//父级节点
+.el-tree-node__content {
+    .fz(14px, 28px);
+    .h(28px);
+    user-select: none;
+    color: #0366d6;
+}
 
-    .el-tree-node__label {
-        display: block;
-        width: 100%;
-
-        .u-name {
-            color: @color-link;
-        }
-
-        .u-count {
-            .fz(12px);
-            color: #888888;
-            .ml(5px);
-            font-style: normal;
-            font-weight: normal !important;
-        }
+//子级节点
+.is-leaf + .el-tree-node__label {
+    &:before {
+        content: "» ";
+        color: #3d454d;
+        .mr(5px);
     }
 
-    // 当前
-    .on{
+    .flex;
+    align-items: center;
+}
+
+.is-current {
+    & > .el-tree-node__content {
         .bold;
     }
+}
 
-    //父级节点
-    .el-tree-node__content {
-        .fz(14px, 28px);
-        .h(28px);
-        user-select: none;
+.el-tree-node__label {
+    .w(100%);
+    box-sizing: border-box;
+    line-height: 14px;
+    text-wrap: wrap;
+
+    .u-count {
+        font-size: 13px;
+        color: #888;
+        margin-left: 5px;
+        font-style: normal;
     }
 
-    //子级节点
-    .is-leaf + .el-tree-node__label {
-        &:before {
-            content: "»";
-            color: @color;
-            .mr(5px);
-        }
+    .u-leaf-name {
+        max-width: 160px;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
+}
 
-    .filter-tree.other {
-        .el-tree-node__content {
-            height: 48px;
-            line-height: 48px;
-        }
-
-        .el-tree-node__label {
-            padding: 0 15px;
-            border-bottom: 1px solid #eeeeee;
-        }
-
-        .is-leaf,
-        .el-tree-node__label:before {
-            .none;
-        }
+.el-tree-node__expand-icon.is-leaf {
+    .none;
+}
+
+.m-nav{
+    .m-menus-panel {
+        .w(100%);
+        overflow-y: auto;
+        overflow-x: hidden;
+        .scrollbar();
     }
 
 }
diff --git a/src/components/common/item-icon.vue b/src/components/common/item-icon.vue
@@ -36,7 +36,7 @@
 
 <script>
 import Item from "@jx3box/jx3box-editor/src/Item";
-import { get_item } from "@jx3box/jx3box-editor/service/item";
+import { get_item } from "@/service/item";
 import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 import { iconLink, getLink } from "@jx3box/jx3box-common/js/utils";
 

diff --git a/src/components/knowledge/nav.vue b/src/components/knowledge/nav.vue
@@ -1,37 +1,33 @@
 <template>
-    <div class="m-nav">
-        <el-tree
-            :data="tree_data"
-            :props="defaultProps"
-            node-key="key"
-            :default-expanded-keys="defaultExpandedKeys"
-            @node-click="clickHandler"
-        >
-            <template slot-scope="{ data }">
-                <template v-if="data.app == app">
-                    <router-link :to="data.path || '/'" class="el-tree-node__label" :class="{ on: isActive(data) }">
-                        <span class="u-name" v-text="data.label"></span>
-                        <em v-if="data.count" class="u-count" v-text="`( ${data.count} )`"></em>
+    <nav class="m-nav">
+        <div class="m-menus-panel">
+            <el-tree
+                :data="maps"
+                :props="defaultProps"
+                node-key="id"
+                ref="tree"
+                :indent="42"
+                lazy
+                :load="loadNode"
+            >
+                <template slot-scope="{ node, data }">
+                    <span v-if="!node.isLeaf" class="el-tree-node__label">
+                        <span class="u-name" v-text="data.name"></span>
+                        <em v-if="data.count" class="u-count" v-text="`(${data.count})`"></em>
+                    </span>
+                    <router-link v-else class="el-tree-node__label" :to="menuLink(data, node)">
+                        <span class="u-leaf-name" v-text="data.name" :title="data.name"></span>
+                        <em v-if="data.count" class="u-count" v-text="`(${data.count})`"></em>
                     </router-link>
                 </template>
-                <template v-else>
-                    <a
-                        :href="`/${data.app}/${data.path == '/' ? '' : data.path}`"
-                        class="el-tree-node__label"
-                        :class="{ on: isActive(data) }"
-                    >
-                        <span class="u-name" v-text="data.label"></span>
-                        <em v-if="data.count" class="u-count" v-text="`( ${data.count} )`"></em>
-                    </a>
-                </template>
-            </template>
-        </el-tree>
-    </div>
+            </el-tree>
+        </div>
+    </nav>
 </template>
 
 <script>
-import { getKnowledgeMenus, getKnowledgeCount } from "@/service/knowledge.js";
-import { map, each } from "lodash";
+import { getKnowledgeMenus, getKnowledgeCount, getKnowledgeList } from "@/service/knowledge.js";
+import { each } from "lodash";
 import { getAppType } from "@jx3box/jx3box-common/js/utils";
 import { getCalendarCount } from "@/service/calendar";
 
@@ -41,64 +37,67 @@ export default {
     data: function () {
         return {
             active: "knowledge",
-            data: {
-                knowledge: {
-                    label: "通识",
-                    key: "knowledge",
-                    app: "knowledge",
-                    path: "/",
-                    children: [],
-                },
-            },
+            maps: [],
             defaultProps: {
                 children: "children",
-                label: "label",
+                label: "name",
+                isLeaf: "leaf",
             },
-            defaultExpandedKeys: ["knowledge"],
         };
     },
     computed: {
-        tree_data: function () {
-            return map(this.data, (item, key) => {
-                return item;
-            });
-        },
-        app: function () {
-            return getAppType();
-        },
-    },
-    watch: {
-        activeKey: {
-            immediate: true,
-            handler(val) {
-                val && (this.active = val);
-            },
-        },
     },
     methods: {
         // 数据加载
         init: function () {
             // 通识
             this.loadKnowledge();
         },
+        async loadNode(node, resolve) {
+            const { level, data } = node;
+
+            if (level === 0) {
+                return resolve(this.maps);
+            }
+
+            const res = await getKnowledgeList({ type: data.id, _no_page: 1 });
+
+            let children = res?.data?.data;
+
+            children = children.map((item) => {
+                return {
+                    ...item,
+                    leaf: true,
+                };
+            });
+
+            if (children?.length) {
+                resolve(children);
+            } else {
+                resolve([]);
+            }
+        },
         loadKnowledge: async function () {
             // 加载通识子类统计
             const data = await getKnowledgeCount();
-            getKnowledgeMenus().then((res) => {
-                let knowledgeMenus = res?.data?.data;
-                let knowledgeTree = [];
-                each(knowledgeMenus, (item, key) => {
-                    const _item = data.data.data?.find((i) => i.type == item.name);
-                    knowledgeTree.push({
-                        key: item.name,
-                        path: "/type/" + item.name,
-                        label: item.label,
-                        count: _item.count,
-                        app: "knowledge",
-                    });
+            const res = await getKnowledgeMenus();
+            // const list = await getKnowledgeList({ _no_page: 1 });
+
+            let knowledgeMenus = res?.data?.data;
+            const maps = [];
+
+            each(knowledgeMenus, (item, key) => {
+                const _item = data.data.data?.find((i) => i.type == item.name);
+                maps.push({
+                    id: item.name,
+                    name: item.label,
+                    count: _item.count,
+                    children: [],
+                    leaf: false,
                 });
-                this.data.knowledge.children = knowledgeTree;
             });
+
+            this.maps = maps;
         },
         loadCalendarCount: function (year) {
             getCalendarCount({ year }).then((res) => {
@@ -113,21 +112,8 @@ export default {
                 });
             });
         },
-
-        // 交互操作
-        clickHandler: function (data, node) {
-            this.active = data.key;
-
-            if (data.type === "calendar" && node.expanded) {
-                this.loadCalendarCount(data.key);
-            }
-        },
-        isActive: function (data) {
-            if (data.children) {
-                return this.app == data.key;
-            } else {
-                return this.active == data.key;
-            }
+        menuLink(data, node) {
+            return { path: `/view/${data.id}` };
         },
     },
     created: function () {

diff --git a/src/layout/default-layout.vue b/src/layout/default-layout.vue
@@ -26,7 +26,7 @@
                 <slot></slot>
             </div>
 
-            <RightSidebar class="m-wiki-right-side">
+            <RightSidebar class="m-wiki-right-side" :show-toggle="true">
                 <slot name="right"></slot>
             </RightSidebar>
             <Footer></Footer>
@@ -105,8 +105,8 @@ export default {
 }
 
 .m-wiki-right-side {
-    &.c-sidebar-right.is-close {
-        transform: translateX(0) !important;
-    }
+    // &.c-sidebar-right.is-close {
+    //     transform: translateX(0) !important;
+    // }
 }
 </style>
diff --git a/src/service/item.js b/src/service/item.js
@@ -1,5 +1,5 @@
 import { $next, $node, $cms } from "@jx3box/jx3box-common/js/https";
-const $ = $node();
+const $ = $node({ mute: true });
 
 export function getMyFav(params) {
     return $next().get(`api/article/favorites/my`, {

diff --git a/src/views/knowledge/knowledge-single.vue b/src/views/knowledge/knowledge-single.vue
@@ -29,7 +29,7 @@
                     <template slot="body">
                         <Thx
                             class="m-thx"
-                            :postId="id"
+                            :postId="~~id"
                             postType="knowledge"
                             :postTitle="title"
                             :userId="author_id"
@@ -188,9 +188,6 @@ export default {
         //         })
         // }
     },
-    created: function () {
-        this.getData(this.id);
-    },
     watch: {
         "$route.params.post_id": {
             immediate: true,
@@ -201,6 +198,14 @@ export default {
                 }
             },
         },
+        id: {
+            immediate: true,
+            handler() {
+                if (this.id) {
+                    this.getData(this.id);
+                }
+            },
+        },
     },
 };
 </script>