From adab376a1745f8968205eb20b0d81dd774a79cc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B3=96=E9=86=8B=E8=99=BE=E4=BB=81?=
 <liuchuana@hotmail.com>
Date: Wed, 10 Apr 2024 14:27:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E9=95=87=E6=B4=BE=E6=96=B0=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E6=B5=81=E7=A8=8B=E8=B5=B0=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/talent.less  |   7 +-
 src/assets/css/talent2.less |  84 +++++++--------
 src/views/Talent2.vue       | 203 ++++++++++++++++++++++++++++--------
 3 files changed, 205 insertions(+), 89 deletions(-)

diff --git a/src/assets/css/talent.less b/src/assets/css/talent.less
index b81013a2..671b7897 100644
--- a/src/assets/css/talent.less
+++ b/src/assets/css/talent.less
@@ -32,7 +32,6 @@
     }
 }
 
-
 // 头部
 .m-talent-header {
     .clearfix;
@@ -131,14 +130,15 @@
         transition: 0.1s ease-in;
         .tm(0.4);
         box-sizing: border-box;
+        margin: 0 auto;
     }
     .u-txt {
         .db;
         .x;
         .fz(14px, 2);
         white-space: nowrap;
-        overflow: hidden;
-        .w(48px);
+        // overflow: hidden;
+        // .w(48px);
     }
 
     .el-radio {
@@ -232,7 +232,6 @@
     }
 }
 
-
 .m-talent-op {
     .mt(20px);
     .x;
diff --git a/src/assets/css/talent2.less b/src/assets/css/talent2.less
index 6a78919c..67438b18 100644
--- a/src/assets/css/talent2.less
+++ b/src/assets/css/talent2.less
@@ -1,5 +1,4 @@
 .m-talent2-box {
-
     position: relative;
     .m-talent2-main {
         display: flex;
@@ -16,8 +15,7 @@
         text-shadow: 1px 1px 1px black;
     }
 
-
-    background-image: url('../img/talent2/bg.png');
+    background-image: url("../img/talent2/bg.png");
     background-repeat: no-repeat;
     min-height: 525px;
     width: 772px;
@@ -38,17 +36,20 @@
         top: 45px;
 
         span {
-            color: #02FA02;
+            color: #02fa02;
         }
 
         &-empty {
             span {
-                color: #FC5531;
+                color: #fc5531;
             }
         }
     }
     .m-talent2-actions {
         padding: 6px 14px;
+        bottom: -4px;
+        right: 0;
+        position: absolute;
         text-align: right;
         .reset-btn {
             display: inline-block;
@@ -56,29 +57,28 @@
             cursor: pointer;
             width: 92px;
             height: 26px;
-            color: #D7E6DF;
+            color: #d7e6df;
             font-size: 14px;
             text-align: center;
             padding-top: 2px;
             background-repeat: no-repeat;
             background-position: center;
-            bottom: 24px;
+            // bottom: 24px;
         }
         &-btn {
-            background-image: url('../img/talent2/1-1.png');
+            background-image: url("../img/talent2/1-1.png");
 
             &:hover {
-                background-image: url('../img/talent2/1-2.png');
+                background-image: url("../img/talent2/1-2.png");
             }
 
             &:active {
-                background-image: url('../img/talent2/1-3.png');
+                background-image: url("../img/talent2/1-3.png");
             }
-
         }
         &-btn-disabled {
-            background-image: url('../img/talent2/1-4.png');
-            cursor: not-allowed!important;
+            background-image: url("../img/talent2/1-4.png");
+            cursor: not-allowed !important;
         }
     }
 }
@@ -90,13 +90,12 @@
     margin-bottom: 12px;
     padding-left: 16px;
 
-    background-image: url('../img/talent2/title_bg.png');
+    background-image: url("../img/talent2/title_bg.png");
     background-repeat: no-repeat;
     background-position: left bottom;
 
     transform: rotate(90deg) translateY(150px) translateX(135px);
 
-
     .m-talent2-xf-icon {
         width: 30px;
         transform: rotate(-90deg);
@@ -109,20 +108,22 @@
         // bottom: -2px;
         text-align: center;
         width: 20px;
+        height: 22px;
+        line-height: 20px;
         font-size: 14px;
         margin-right: 8px;
         color: #fff;
 
-        background-image: url('../img/talent2/count_bg.png');
+        background-image: url("../img/talent2/count_bg.png");
         background-repeat: no-repeat;
 
         transform: rotate(-90deg);
-        left: 36px;
-        bottom: 18px;
+        left: 50px;
+        bottom: 4px;
     }
 
     &-name {
-        color: #F3F50A;
+        color: #f3f50a;
         font-size: 15px;
         margin-left: 35px;
 
@@ -144,7 +145,7 @@
 
     &-row {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(5, 1fr);
         justify-items: center;
         padding: 0 12px;
         height: 52px;
@@ -175,11 +176,11 @@
 
             &::after {
                 transition: background-color 5s linear;
-                content: '';
+                content: "";
                 position: absolute;
                 width: 52px;
                 height: 52px;
-                background-image: url('../img/talent2/skill_bg.png');
+                background-image: url("../img/talent2/skill_bg.png");
                 z-index: 6;
                 left: -1px;
                 top: -2px;
@@ -193,18 +194,18 @@
         }
 
         .skill-img {
-            border-radius: 0!important;
+            border-radius: 0 !important;
         }
 
         .m-talent2-selected {
             &::before {
                 transition: opacity 0.2s linear;
-                content: '';
+                content: "";
                 position: absolute;
                 height: 48px;
                 width: 48px;
                 border-radius: 48px;
-                background-color: rgba(0,0,0,0.5);
+                background-color: rgba(0, 0, 0, 0.5);
                 z-index: 10;
                 opacity: 0;
             }
@@ -213,12 +214,12 @@
         .m-talent2-unselected {
             &::before {
                 transition: opacity 0.2s linear;
-                content: '';
+                content: "";
                 position: absolute;
                 height: 48px;
                 width: 48px;
                 border-radius: 48px;
-                background-color: rgba(0,0,0,0.5);
+                background-color: rgba(0, 0, 0, 0.5);
                 z-index: 10;
                 opacity: 1;
             }
@@ -227,12 +228,12 @@
         .m-talent2-skill-unselected {
             &::before {
                 transition: opacity 0.2s linear;
-                content: '';
+                content: "";
                 position: absolute;
                 height: 48px;
                 width: 48px;
                 border-radius: 6px;
-                background-color: rgba(0,0,0,0.5);
+                background-color: rgba(0, 0, 0, 0.5);
                 z-index: 10;
                 opacity: 1;
             }
@@ -252,7 +253,7 @@
             height: 48px;
             width: 48px;
             border-radius: 48px;
-            background-color: rgba(0,0,0,0.5);
+            background-color: rgba(0, 0, 0, 0.5);
             z-index: 11;
         }
         .is-add-skill {
@@ -261,11 +262,10 @@
             height: 48px;
             width: 48px;
             border-radius: 6px;
-            background-color: rgba(0,0,0,0.5);
+            background-color: rgba(0, 0, 0, 0.5);
             z-index: 11;
         }
 
-
         &-empty {
             visibility: hidden;
         }
@@ -273,18 +273,18 @@
         &-count {
             position: absolute;
             width: 20px;
-            background-image: url('../img/talent2/count_bg.png');
+            background-image: url("../img/talent2/count_bg.png");
             background-repeat: no-repeat;
             text-align: center;
             right: -6px;
             bottom: 0;
             z-index: 11;
 
-            color: #F89403;
+            color: #f89403;
         }
 
         &-count-under {
-            color: #02FA02;
+            color: #02fa02;
         }
 
         &-relate {
@@ -304,13 +304,13 @@
     .m-talent2-pretab {
         position: relative;
         &::before {
-            content: '';
+            content: "";
             position: absolute;
             width: 34px;
             height: 26px;
             top: -16px;
             left: 7px;
-            background-image: url('../img/talent2/next_bg.png');
+            background-image: url("../img/talent2/next_bg.png");
             z-index: 203;
         }
     }
@@ -321,7 +321,7 @@
         position: absolute;
         bottom: calc(100% + 3px);
         left: -2px;
-        background-color: rgba(0,0,0,.8);
+        background-color: rgba(0, 0, 0, 0.8);
         margin-left: 4px;
         border-radius: 3px;
         padding: 10px;
@@ -383,8 +383,8 @@
             color: #fff;
             font-size: 12px;
         }
-        .m-talent-retrogress{
-            color:#f00;
+        .m-talent-retrogress {
+            color: #f00;
             font-size: 12px;
             line-height: 20px;
         }
@@ -411,8 +411,8 @@
 
         &-count {
             transform: unset;
-            left: 40px;
-            bottom: -5px;
+            left: 50px;
+            // bottom: -5px;
         }
 
         &-name {
diff --git a/src/views/Talent2.vue b/src/views/Talent2.vue
index 2a901bf6..1cae2489 100644
--- a/src/views/Talent2.vue
+++ b/src/views/Talent2.vue
@@ -81,6 +81,7 @@
                                         <template v-for="(item, i) in row">
                                             <div
                                                 v-if="item"
+                                                :key="i"
                                                 class="m-talent2-content-item"
                                                 :class="[
                                                     {
@@ -92,7 +93,6 @@
                                                         ? 'm-talent2-content-item-disabled'
                                                         : '',
                                                 ]"
-                                                :key="i"
                                                 @mouseover="item && $set(item, 'on', true)"
                                                 @mouseleave="item && $set(item, 'on', false)"
                                             >
@@ -122,7 +122,7 @@
                                                     <span
                                                         v-if="
                                                             item.pretab &&
-                                                            !isLeftParentAdd(index, i) &&
+                                                            item.pretab > isLeftParentAdd(index, i) &&
                                                             canLeftItemOperate(index, i)
                                                         "
                                                         :class="
@@ -210,7 +210,7 @@
                                                     >
                                                 </span>
                                             </div>
-                                            <div v-else class="m-talent2-content-item-empty" :key="i"></div>
+                                            <div v-else :key="'empty-' + i" class="m-talent2-content-item-empty"></div>
                                         </template>
                                     </div>
                                 </div>
@@ -354,7 +354,7 @@
                                                     >
                                                 </span>
                                             </div>
-                                            <div v-else class="m-talent2-content-item-empty" :key="i"></div>
+                                            <div v-else class="m-talent2-content-item-empty" :key="'empty-' + i"></div>
                                         </template>
                                     </div>
                                 </div>
@@ -422,12 +422,11 @@
 </template>
 
 <script>
-import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
-import { __ossMirror, __imgPath, __ossRoot, __iconPath } from "@jx3box/jx3box-common/data/jx3box.json";
-import { xfConfigs } from "@jx3box/jx3box-talent2/src/talent2.json";
+import { __ossMirror, __imgPath, __ossRoot, __iconPath, __node } from "@jx3box/jx3box-common/data/jx3box.json";
+// 所有心法的配置
 import { defaultXf, defaultConfigs } from "@jx3box/jx3box-talent2/src/default.json";
+
 import User from "@jx3box/jx3box-common/js/user";
-import cloneDeep from "lodash/cloneDeep";
 import { addTalent, putTalent } from "@/service/talent.js";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 import { copy } from "@/utils/clipboard";
@@ -445,7 +444,6 @@ export default {
             begin: "left",
             l_name: "山川",
             r_name: "日月",
-
             version: "",
             versions: [], // 版本列表
             talents: {}, // 镇派数据
@@ -462,7 +460,7 @@ export default {
                 right: [],
             },
             condition: [], // 激活条件
-            mutex: [], // 互斥关系
+            // mutex: [], // 互斥关系
 
             isLogin: User.isLogin(),
             isAdmin: false,
@@ -474,6 +472,8 @@ export default {
 
             // 初始化请求
             isInit: true,
+
+            talentOriginData: {},
         };
     },
     computed: {
@@ -532,7 +532,7 @@ export default {
             return this.total - this.totalCount;
         },
         mount: function () {
-            return xfmap[this.xf]?.id;
+            return this.xfMaps[this.xf]?.id;
         },
         params: function () {
             const { mount, version, code, pzcode, xf } = this;
@@ -548,44 +548,102 @@ export default {
             };
         },
         xfMaps: function () {
-            const xfMaps = cloneDeep(xfmap);
-            // delete xfMaps["山居剑意"];
+            let xfMaps = {};
+            xfMaps["通用"] = {
+                name: "通用",
+                id: 0,
+                force: 0,
+                school: 0,
+                client: ["all", "std", "origin"],
+            };
+            if (this.talentOriginData && this.talentOriginData.mount && this.talentOriginData.mount.length) {
+                const mount = this.talentOriginData.mount;
+                mount.forEach((item) => {
+                    if (item.talent_tabs.length && item.first) {
+                        xfMaps[item.mount_name] = {
+                            name: item.mount_name,
+                            id: item.mount_id,
+                            force: item.force_id,
+                            school: item.school_id,
+                            client: ["all", "std", "origin"],
+                        };
+                    }
+                });
+            }
             return xfMaps;
         },
+        xfConfigs: function () {
+            let xfConfigs = {};
+            xfConfigs["通用"] = {
+                begin: "left",
+                content: [0, 0],
+                talent: ["山川", "日月"],
+                condition: [0, 5, 10, 15, 20, 25, 25],
+            };
+            if (this.talentOriginData && this.talentOriginData.mount && this.talentOriginData.mount.length) {
+                this.talentOriginData.mount.forEach((item) => {
+                    if (item.talent_tabs.length || item.first) {
+                        const content = item.talent_tabs.map((item) => this.getMountId(item));
+                        xfConfigs[item.mount_name] = {
+                            begin: item.talent_tabs[0] === item.first ? "left" : "right",
+                            content: content,
+                            talent: item.talent_tabs,
+                            condition: [0, 5, 10, 15, 20, 25, 25],
+                        };
+                    }
+                });
+            } else {
+                return null;
+            }
+            return xfConfigs;
+        },
         isEditing: function () {
             return !!this.currentSchema;
         },
-        mutexObj: function ({ mutex }) {
-            const result = {};
-
-            // 遍历输入的二维数组
-            for (const subArr of mutex) {
-                for (const num of subArr) {
-                    // 如果数字还不存在于结果对象中，就初始化为空数组
-                    if (!result[num]) {
-                        result[num] = [];
-                    }
-
-                    // 将当前数字所在的子数组中的其他数字添加到结果对象的对应数组中
-                    const otherNums = subArr.filter((item) => item !== num);
-                    result[num] = result[num].concat(otherNums);
-                }
+        // 互斥关系对象
+        mutexObj: function () {
+            const mutexObj = {};
+            if (this.talentOriginData && this.talentOriginData.mutex) {
+                Object.values(this.talentOriginData.mutex).forEach((item) => {
+                    Object.entries(item).forEach(([key, value]) => {
+                        mutexObj[key] = value;
+                    });
+                });
             }
-
-            return result;
+            return mutexObj;
         },
     },
     methods: {
         updateDrawer: function (val) {
             this.drawer = val;
         },
+        getPreTab(talentId) {
+            const condition = this.talentOriginData.condition;
+            for (const key in condition) {
+                const d = condition[key];
+                if (d[talentId] && Object.values(d[talentId].PreviousTab).length) {
+                    return Object.values(d[talentId].PreviousTab)[0];
+                }
+            }
+            return "";
+        },
+        getMountId(xf) {
+            const d = this.talentOriginData.mount.find((item) => item.first === xf);
+            if (d) {
+                return d.mount_id;
+            } else {
+                return d;
+            }
+        },
         getIcon(key) {
             return __imgPath + "image/box/" + key + ".svg";
         },
-        reload: function (schema) {
+        reload: function () {
             this.currentSchema = "";
-            // this.l_data = ["0000", "0000", "0000", "0000", "0000", "0000"];
-            // this.r_data = ["0000", "0000", "0000", "0000", "0000", "0000"];
+            const ldata = this.l_data.map((item) => "0".repeat(item.length));
+            const rdata = this.r_data.map((item) => "0".repeat(item.length));
+            this.l_data = ldata;
+            this.r_data = rdata;
         },
         reset: function () {},
         // 生成code
@@ -642,6 +700,7 @@ export default {
         },
         parseSchema: function () {
             try {
+                const xfConfigs = this.xfConfigs;
                 const _code = JSON.parse(this.code);
                 this.version = _code.version;
                 this.xf = _code.xf;
@@ -717,6 +776,9 @@ export default {
          * 判断left该项父项是否加点
          */
         isLeftParentAdd: function (rowIndex, colIndex) {
+            if (!this.talentContent.left[rowIndex - 1][colIndex]) {
+                return this.isLeftParentAdd(rowIndex - 1, colIndex);
+            }
             return Number(this.l_data?.[rowIndex - 1]?.[colIndex]);
         },
         /**
@@ -728,8 +790,9 @@ export default {
         leftTalentAdd: function (item, rowIndex, colIndex) {
             if (!this.canOperate(rowIndex, "left")) return;
             if (this.isMutex(item, rowIndex, colIndex, "left")) return;
+
             // 当父项有层数，才可以进行增加层数操作
-            if (item?.pretab && !this.isLeftParentAdd(rowIndex, colIndex)) {
+            if (item?.pretab && item?.pretab > this.isLeftParentAdd(rowIndex, colIndex)) {
                 this.$message.warning({
                     message: "要激活该天赋需要先激活对应的上层天赋",
                 });
@@ -865,6 +928,9 @@ export default {
          * 判断right该项父项是否加点
          */
         isRightParentAdd: function (rowIndex, colIndex) {
+            if (!this.talentContent.right[rowIndex - 1][colIndex]) {
+                return this.isRightParentAdd(rowIndex - 1, colIndex);
+            }
             return Number(this.r_data[rowIndex - 1][colIndex]);
         },
         /**
@@ -933,6 +999,7 @@ export default {
 
                 this.r_data.splice(rowIndex, 1, row.join(""));
             } else {
+                console.log(item);
                 this.$message({
                     type: "warning",
                     message: "该天赋已达最高层数",
@@ -1003,16 +1070,59 @@ export default {
         // ---------------------
         // 获取版本列表
         getVersions: function () {
-            fetch(__ossRoot + "data/talent2/index.json")
+            fetch(__node + "talent-origin/list")
                 .then((res) => res.json())
                 .then((response) => {
-                    this.versions = response;
+                    this.versions = response.data.list.map((item) => {
+                        return {
+                            version: item.talent_version,
+                            name: item.version,
+                        };
+                    });
                     this.version = this.versions[0]?.version;
                 });
-            // this.version = "v20230912"
         },
+        getTanletOriginData: function () {
+            this.talents = { ...defaultXf };
+            fetch(__node + "talent-origin/" + this.version)
+                .then((res) => res.json())
+                .then((response) => {
+                    const data = response.data;
+                    const mount = response.data.mount.reduce((acc, current) => {
+                        if (current.first !== null) {
+                            const existing = acc.find((item) => item.first === current.first);
+                            if (!existing) {
+                                if (
+                                    current.talent_tabs &&
+                                    current.talent_tabs.length &&
+                                    current.talent_tabs[0] === current.talent_tabs[1]
+                                ) {
+                                    acc.push({
+                                        ...current,
+                                        mount_name: current.first,
+                                        talent_tabs: [current.first],
+                                    });
+                                } else {
+                                    acc.push(current);
+                                }
+                            }
+                        }
+                        return acc;
+                    }, []);
+                    data.mount = mount;
+                    this.talentOriginData = data;
+                    this.talents = { ...response.data.detail, ...defaultXf };
+                    if (this.isInit) {
+                        this.xf = "通用";
+                        this.isInit = false;
+                    }
+                    this.total = 66;
+                });
+        },
+
         getTalents: function () {
-            fetch(__ossRoot + "data/talent2/" + this.version + ".json")
+            fetch(__ossRoot + "data/talent2/v20240305.json")
+                // fetch(__ossRoot + "data/talent2/v20240305.json")
                 .then((res) => res.json())
                 .then((response) => {
                     this.talents = { ...response, ...defaultXf };
@@ -1135,13 +1245,16 @@ export default {
     watch: {
         version: function (val) {
             if (val) {
-                this.getTalents();
+                // this.getTalents();
+                this.getTanletOriginData();
             }
         },
+        // 选择心法触发这里👇
         xf: {
             immediate: true,
-            handler(val, oVal) {
-                if (val) {
+            handler(val) {
+                if (val && this.xfConfigs) {
+                    const xfConfigs = this.xfConfigs;
                     this.xfContent = xfConfigs[val]?.content;
                     this.begin = xfConfigs[val]?.begin;
 
@@ -1151,13 +1264,13 @@ export default {
                             if (l) {
                                 this.$set(l, "on", false);
                                 this.$set(l, "count", 0);
+                                l["pretab"] = this.getPreTab(l.id);
                             }
                             return l;
                         });
                         return _left;
                     });
                     this.l_name = xfConfigs[val]?.talent[0];
-
                     const col_len = Math.max(...this.talentContent.left.map((l) => l.length));
                     const row_len = this.talentContent.left.length;
 
@@ -1172,11 +1285,13 @@ export default {
                             if (r) {
                                 this.$set(r, "on", false);
                                 this.$set(r, "count", 0);
+                                r["pretab"] = this.getPreTab(r.id);
                             }
                             return r;
                         });
                         return _right;
                     });
+
                     this.r_name = xfConfigs[val]?.talent[1];
 
                     this.r_data = Array(row_len)
@@ -1189,14 +1304,16 @@ export default {
                         this.total = 66;
                     } else {
                         this.total = defaultConfigs.total;
+                        // this.total = 99;
                     }
 
                     // 激活条件
                     this.condition = xfConfigs[val]?.condition || [0, 5, 10, 15, 20, 25];
-                    this.mutex = xfConfigs[val]?.mutex || [];
+                    // this.mutex = xfConfigs[val]?.mutex || [];
 
                     // 初始化code
                     this.renderCode();
+                    // console.log(this.talentContent);
                 }
             },
         },