fix:百科优化 #23

JX3BOX · Jan 3, 2024 · 3251ec4 · 3251ec4
1 parent ca48fb0
commit 3251ec4
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -14,10 +14,10 @@
         "@antv/g2": "^4.2.10",
         "@jx3box/jx3box-comment-ui": "^1.8.2",
         "@jx3box/jx3box-common": "^8.1.4",
-        "@jx3box/jx3box-common-ui": "^8.0.13",
+        "@jx3box/jx3box-common-ui": "^8.0.16",
         "@jx3box/jx3box-data": "^3.5.6",
         "@jx3box/jx3box-dict": "^2.1.1",
-        "@jx3box/jx3box-editor": "^2.1.0",
+        "@jx3box/jx3box-editor": "^2.1.1",
         "@jx3box/jx3box-map": "^0.2.0",
         "axios": "^0.21.1",
         "core-js": "^3.4.3",
@@ -26,9 +26,9 @@
         "localforage": "^1.7.3",
         "lodash": "^4.17.15",
         "mitt": "^3.0.1",
+        "qrcode.vue": "^1.7.0",
         "urijs": "^1.19.11",
         "uuid": "^9.0.1",
-        "qrcode.vue": "^1.7.0",
         "vue": "^2.6.11",
         "vue-clipboard2": "^0.3.3",
         "vue-fragment": "^1.6.0",

diff --git a/src/assets/css/cj/right-side.less b/src/assets/css/cj/right-side.less
@@ -103,6 +103,37 @@
             overflow-y: auto;
             .scrollbar();
         }
+        .u-zones {
+            padding: 5px 0;
+            .flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 5px;
+            .u-zone {
+                .w(60px);
+                text-align: center;
+            }
+            .u-qq {
+                height: 20px;
+                padding: 0 5px;
+                line-height: 19px;
+                font-size: 12px;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 4px;
+                display: inline-block;
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+                white-space: nowrap;
+                border-color: transparent;
+                cursor: pointer;
+                &:hover {
+                    background-color: #e6f0fb;
+                    border-color: #cde0f7;
+                    color: #0366d6;
+                }
+            }
+        }
     }
 
     @media screen and (max-width: @ipad) {

diff --git a/src/components/cj/achievement-count.vue b/src/components/cj/achievement-count.vue
@@ -21,7 +21,7 @@ export default {
                 general_point: "常规资历数",
                 armor: "五甲成就数",
                 armor_point: "五甲资历数",
-                post_count: "收录攻略数",
+                // post_count: "收录攻略数",
             },
         };
     },

diff --git a/src/components/cj/extend.vue b/src/components/cj/extend.vue
@@ -11,13 +11,33 @@
                 <a class="u-show-message" target="_blank" href="https://www.jx3box.com/tool/13659/">申请展示 »</a>
             </h2>
             <div class="m-group-content">
-                <el-tree
+                <!-- <el-tree
                     class="m-group-tree"
                     :default-expand-all="false"
                     :data="groups"
                     node-key="uuid"
                     @node-click="clickNode"
-                />
+                /> -->
+                <el-collapse v-model="activeName" accordion>
+                    <el-collapse-item
+                        :title="group.label"
+                        :name="group.label"
+                        v-for="group in groups"
+                        :key="group.uuid"
+                    >
+                        <div class="u-zones" v-for="zone in group.children" :key="zone.uuid">
+                            <el-tag class="u-zone" size="mini">{{ zone.label }}</el-tag>
+                            <span
+                                size="mini"
+                                class="u-qq"
+                                v-for="qq in zone.children"
+                                :key="qq.uuid"
+                                @click="copy(qq.label)"
+                                >{{ qq.label }}</span
+                            >
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
             </div>
         </div>
     </div>

diff --git a/src/components/common/rank.vue b/src/components/common/rank.vue
@@ -2,19 +2,24 @@
     <div class="m-wiki-rank">
         <h2 class="m-title">
             <img class="u-icon" svg-inline src="@/assets/img/cj/rank.svg" />
-            <span class="u-text">贡献榜</span>
+            <span class="u-text">排行榜</span>
         </h2>
-        <ul class="u-list">
-            <li v-for="(rank, k) in ranks" :key="k">
-                <a class="u-contributor" :href="rank.user_id ? authorLink(rank.user_id) : null">
-                    <i class="u-avatar">
-                        <img :src="showAvatar(rank.avatar)" :alt="rank.nickname" />
-                    </i>
-                    <span class="u-name" v-text="rank.nickname"></span>
-                    <em class="u-count">+ {{ rank.count }}</em>
-                </a>
-            </li>
-        </ul>
+        <el-tabs v-model="activeTab">
+            <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">
+                <ul class="u-list">
+                    <li v-for="(rank, k) in ranks" :key="k">
+                        <a class="u-contributor" :href="rank.user_id ? authorLink(rank.user_id) : null">
+                            <span class="u-left">
+                                <span class="u-order" :class="k < 3 && `t${k + 1}`">{{ k + 1 }}</span>
+                                <img class="u-avatar" :src="showAvatar(rank.avatar)" :alt="rank.nickname" />
+                                <span class="u-name" v-text="rank.nickname"></span>
+                            </span>
+                            <em class="u-count">+ {{ rank.count }}</em>
+                        </a>
+                    </li>
+                </ul>
+            </el-tab-pane>
+        </el-tabs>
     </div>
 </template>
 
@@ -32,13 +37,41 @@ export default {
     data() {
         return {
             ranks: [],
+            activeTab: "achievement",
+            tabs: [
+                {
+                    name: "achievement",
+                    label: "成就",
+                },
+                {
+                    name: "item",
+                    label: "物品",
+                },
+                {
+                    name: "quest",
+                    label: "任务",
+                },
+                {
+                    name: "knowledge",
+                    label: "通识",
+                },
+                {
+                    name: "skill",
+                    label: "技能",
+                },
+            ],
         };
     },
     computed: {
         client() {
             return this.$store.state.client;
         },
     },
+    watch: {
+        activeTab() {
+            this.loadData();
+        },
+    },
     mounted() {
         this.loadData();
     },
@@ -47,11 +80,11 @@ export default {
         authorLink,
         loadData() {
             const params = {
-                type: this.type,
+                type: this.activeTab,
                 client: this.client,
             };
             getWikiRanking(params).then((res) => {
-                this.ranks = res.data?.data || [];
+                this.ranks = (res.data?.data || []).slice(0, 10);
             });
         },
     },
@@ -87,7 +120,9 @@ export default {
     }
 
     .u-contributor {
-        .db;
+        .flex;
+        justify-content: space-between;
+        align-items: center;
         padding: 5px 0;
 
         &:hover {
@@ -96,21 +131,44 @@ export default {
     }
 
     @h: 24px;
-
-    .u-avatar {
-        .db;
-        .fl;
-        .size(@h);
-        .mr(15px);
-
-        img {
-            .db;
-            .full;
+    .u-left {
+        .flex;
+        align-items: center;
+        gap: 5px;
+    }
+    .u-order {
+        background-color: #f6f8fa;
+        display: inline-block;
+        border-radius: 3px;
+        font-size: 12px;
+        line-height: 16px;
+        width: 16px;
+        height: 16px;
+        color: #888;
+        vertical-align: middle;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        text-align: center;
+        &.t1 {
+            color: #fff;
+            background-color: #fc3c3c;
+        }
+        &.t2 {
+            color: #fff;
+            background-color: #fba524;
+        }
+        &.t3 {
+            color: #fff;
+            background-color: #0366d6;
         }
     }
+    .u-avatar {
+        .size(14px);
+        .r(50%);
+    }
 
     .u-name {
-        .fz(13px);
+        .fz(12px);
         .lh(@h);
         color: #555;
     }

diff --git a/src/components/item/extend.vue b/src/components/item/extend.vue
@@ -2,7 +2,7 @@
     <div class="m-extend" :class="{ isHome: isHome }">
         <SideMsg></SideMsg>
         <!-- 贡献排行榜 -->
-        <Rank type="item"></Rank>
+        <!-- <Rank type="item"></Rank> -->
 
         <MyItems />
         <MyPlans />
@@ -15,14 +15,14 @@ import User from "@jx3box/jx3box-common/js/user.js";
 import MyPlans from "@/components/item/my-plans.vue";
 import MyItems from "@/components/item/my-items.vue";
 import SideMsg from "@/components/common/side-msg.vue";
-import Rank from "@/components/common/rank.vue";
+// import Rank from "@/components/common/rank.vue";
 export default {
     name: "Extend",
     components: {
         MyPlans,
         MyItems,
         SideMsg,
-        Rank,
+        // Rank,
     },
     props: [],
     data: function () {

diff --git a/src/components/item/price-tabs.vue b/src/components/item/price-tabs.vue
@@ -46,7 +46,7 @@ export default {
         active_tab_handle(tab) {
             if (tab.name === "item-price-chart") {
                 this.$nextTick(() => {
-                    this.$refs.item_price_chart.render();
+                    this.$refs.item_price_chart?.render();
                 });
             }
         },

diff --git a/src/components/knowledge/recent.vue b/src/components/knowledge/recent.vue
@@ -16,13 +16,6 @@
                         <div class="u-remark" v-if="post.remark" v-text="'📑 ' + post.remark"></div>
                     </div>
                 </div>
-                <div class="m-body">
-                    <div
-                        class="u-excerpt"
-                        :to="{ name: 'view', params: { source_id: post.source_id } }"
-                        v-html="ellipsis(post.content)"
-                    ></div>
-                </div>
                 <div class="m-user">
                     <div class="u-author">
                         <img class="u-icon" :src="showAvatar(post.user)" :alt="post.user_nickname" />
@@ -34,6 +27,13 @@
                     </div>
                     <div class="u-updated" v-text="ts2str(post.updated)"></div>
                 </div>
+                <div class="m-body">
+                    <div
+                        class="u-excerpt"
+                        :to="{ name: 'view', params: { source_id: post.source_id } }"
+                        v-html="ellipsis(post.content)"
+                    ></div>
+                </div>
             </div>
         </div>
     </div>
@@ -85,8 +85,11 @@ export default {
     .m-post {
         .fz(12px);
         .clip;
-        padding: 10px;
+        padding: 15px 10px;
         border-bottom: 1px solid #ccc;
+        .m-head {
+            margin-top: 5px;
+        }
         &:last-child {
             border-bottom: none;
         }
@@ -118,20 +121,21 @@ export default {
         }
         .m-user {
             .x(left);
+            padding-bottom: 5px;
         }
         .u-updated {
             // .fr;
             .mr(0);
             opacity: 0.75;
         }
         .u-remark {
-            margin-top: 0;
-            margin-bottom: 0;
+            margin-top: 5px;
+            margin-bottom: 5px;
         }
         .u-excerpt {
+            margin-top: 5px;
+            margin-bottom: 5px;
             .db;
-            .mt(6px);
-            .mb(6px);
             .lh(1.6);
             color: #999;
         }

diff --git a/src/views/item/detail.vue b/src/views/item/detail.vue
@@ -393,7 +393,7 @@ export default {
         active_tab_handle(tab) {
             if (tab.name === "item-price-chart") {
                 this.$nextTick(() => {
-                    this.$refs.item_price_chart.render();
+                    this.$refs.item_price_chart?.render();
                 });
             }
         },
@@ -497,7 +497,7 @@ export default {
                         } else {
                             this.server = this.firstServer;
                         }
-                        this.$refs.item_price_chart.render();
+                        this.$refs.item_price_chart?.render();
                     });
                 });
         },

diff --git a/src/views/item/home.vue b/src/views/item/home.vue
@@ -44,6 +44,12 @@
                             <span>技艺助手</span>
                         </a>
                     </li>
+                    <li class="qlink">
+                        <a target="_blank" href="/item/plan_list">
+                            <i class="el-icon-orange"></i>
+                            <span>物品清单</span>
+                        </a>
+                    </li>
                     <!-- <li class="qlink">
                         <a target="_blank" href="/pvg/price">
                             <i class="el-icon-orange"></i>