perf: update macro

JX3BOX · Jul 5, 2024 · b12540f · b12540f
1 parent 3e4ef92
commit b12540f
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -11,12 +11,12 @@
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common-ui@latest @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-talent2@latest @jx3box/jx3box-dict@latest @jx3box/jx3box-comment-ui@latest @jx3box/jx3box-editor@latest"
     },
     "dependencies": {
-        "@jx3box/jx3box-comment-ui": "^1.9.7",
-        "@jx3box/jx3box-common": "^8.2.20",
-        "@jx3box/jx3box-common-ui": "^8.9.0",
+        "@jx3box/jx3box-comment-ui": "^1.9.9",
+        "@jx3box/jx3box-common": "^8.2.24",
+        "@jx3box/jx3box-common-ui": "^8.9.4",
         "@jx3box/jx3box-data": "^3.6.0",
         "@jx3box/jx3box-dict": "^2.2.2",
-        "@jx3box/jx3box-editor": "^2.2.8",
+        "@jx3box/jx3box-editor": "^2.2.11",
         "@jx3box/jx3box-macro": "^1.0.1",
         "@jx3box/jx3box-talent": "^1.2.7",
         "@jx3box/jx3box-talent2": "^1.5.9",

diff --git a/src/assets/css/macro.less b/src/assets/css/macro.less
@@ -54,6 +54,11 @@
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
+
+        .m-skills-list {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
     }
 }
 // $notify 样式错误

diff --git a/src/assets/css/single.less b/src/assets/css/single.less
@@ -7,6 +7,62 @@
 
 .m-single-macro {
     margin: 20px 0;
+
+    .m-skills-list {
+        .flex;
+        gap: 30px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        .flex;
+        flex-wrap: wrap;
+
+        border: 1px solid #eee;
+        border-radius: 4px;
+        background: #f6f8fa;
+        padding: 10px 20px;
+    }
+    .m-skill {
+        // position: relative;
+        // display: flex;
+        // justify-content: center;
+        .pr;
+
+        &:not(:last-of-type)::after {
+            content: "▲";
+            .pa;
+            right: -25px;
+            top: 15px;
+            transform: rotate(90deg);
+        }
+
+        .u-skill-icon {
+            .size(48px, 48px);
+        }
+
+        .u-name {
+            display: block;
+            font-size: 12px;
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 48px;
+        }
+
+        .u-mask {
+            .pa;
+            .lt(0);
+            .size(48px, 48px);
+            background-color: rgba(0, 0, 0, 0.5);
+            .r(6px);
+            .none;
+            .pointer;
+        }
+
+        &:hover {
+            cursor: move;
+        }
+    }
 }
 
 .m-single-post .el-divider{

diff --git a/src/components/cms-single.vue b/src/components/cms-single.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="m-single-box">
         <!-- 头部 -->
-        <PostHeader :post="post" :stat="stat">
+        <PostHeader :post="post" :stat="stat" :title-extra="true">
             <slot name="single-header"></slot>
         </PostHeader>
 

diff --git a/src/views/Single.vue b/src/views/Single.vue
@@ -25,10 +25,25 @@
                     </span>
                     <!-- 宏 -->
                     <el-divider content-position="left" v-if="item.macro">宏</el-divider>
+                    <el-divider content-position="left" v-if="item.sq && item.sq.length">武学序列</el-divider>
                     <div class="u-usage" v-if="item.desc">{{ item.desc }}</div>
                     <div class="u-macro macro-box" :class="{ withUsage: item.desc }" v-if="item.macro">
                         <macro :ctx="item.macro" :lang="lang" :name="author_info.display_name + '#' + item.name" :id="id" :can-comment="canComment" />
                     </div>
+                    <div class="u-macro macro-box" :class="{ withUsage: item.desc }" v-if="item.sq && item.sq.length">
+                        <ul class="m-skills-list">
+                                <li
+                                    v-for="(skill, index) in item.sq"
+                                    :key="skill.SkillID + '' + index"
+                                    class="m-skill"
+                                >
+                                    <div class="u-skill" v-if="skill && skill.IconID">
+                                        <img class="u-skill-icon" :src="iconLink(skill.IconID)" :alt="skill.IconID" />
+                                        <span class="u-name" :title="skill.Name">{{ skill.Name }}</span>
+                                    </div>
+                                </li>
+                            </ul>
+                    </div>
                     <!-- 奇穴 镇派 -->
                     <template v-if="item.talent">
                         <el-divider content-position="left">{{ client === "origin" ? "镇派" : "奇穴" }}</el-divider>
@@ -99,6 +114,7 @@ import { getStat, postStat } from "@jx3box/jx3box-common/js/stat";
 import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
 import { appKey } from "../../setting.json";
 import { __iconPath, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
 
 export default {
     name: "single",
@@ -178,6 +194,7 @@ export default {
         iconURL: function (val) {
             return __iconPath + "icon/" + val + ".png";
         },
+        iconLink
     },
     mounted: function () {
         if (this.id) {