feat: initial skill level by skland (#284)

src/components/global/MduiSelectNum.vue

@@ -1,15 +1,19 @@
 <template>
   <select
+    ref="el"
     class="mdui-select"
-    :mdui-select="disableJs ? undefined : mduiOptions ? JSON.stringify(mduiOptions) : ''"
     :value="value"
     @change="$emit('change', parseInt($event.target.value))"
   >
-    <option v-for="opt of options" :key="`opt-${opt}`" :value="opt">{{ opt }}</option>
+    <option v-for="opt of options" :key="`opt-${opt}`" :value="opt">{{
+      display ? display(opt) : opt
+    }}</option>
   </select>
 </template>
 
 <script>
+import { markRaw } from 'vue';
+
 export default {
   name: 'mdui-select-num',
   model: {
@@ -20,6 +24,40 @@ export default {
     options: Array,
     mduiOptions: Object,
     disableJs: Boolean,
+    display: Function,
+  },
+  data: () => ({
+    inst: null,
+    updateTimer: null,
+  }),
+  computed: {
+    optionsKey() {
+      return this.options.join(',');
+    },
+  },
+  mounted() {
+    if (!this.disableJs) {
+      this.inst = markRaw(new this.$Select(this.$refs.el, this.mduiOptions));
+    }
+  },
+  watch: {
+    async value(value) {
+      if (this.inst && String(value) !== this.inst.value) {
+        this.handleUpdate();
+      }
+    },
+    optionsKey() {
+      this.handleUpdate();
+    },
+  },
+  methods: {
+    handleUpdate() {
+      if (this.updateTimer || this.disableJs || !this.inst) return;
+      this.updateTimer = setTimeout(() => {
+        this.inst.handleUpdate();
+        this.updateTimer = null;
+      });
+    },
   },
 };
 </script>

src/components/home/Changelog.vue

@@ -1,11 +1,6 @@
 <template>
   <div id="changelog">
-    <div v-for="changelog in first" :key="changelog.time">
-      <h4>{{ changelog.time }}</h4>
-      <ul>
-        <li v-for="(change, index) in changelog.changes" :key="index" v-html="change"></li>
-      </ul>
-    </div>
+    <ChangelogItem :list="first" />
     <div class="mdui-panel mdui-panel-gapless" mdui-panel>
       <div class="mdui-panel-item">
         <div class="mdui-panel-item-header">
@@ -15,12 +10,7 @@
           <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
         </div>
         <div class="mdui-panel-item-body">
-          <div v-for="changelog in second" :key="changelog.time">
-            <h4>{{ changelog.time }}</h4>
-            <ul>
-              <li v-for="(change, index) in changelog.changes" :key="index" v-html="change"></li>
-            </ul>
-          </div>
+          <ChangelogItem :list="second" />
         </div>
       </div>
     </div>
@@ -29,9 +19,11 @@
 
 <script>
 import changelogs from '@/data/changelog.json';
+import ChangelogItem from './ChangelogItem.vue';
 
 export default {
   name: 'changelog',
+  components: { ChangelogItem },
   data: () => ({
     first: changelogs.slice(0, 5),
     second: changelogs.slice(5),

src/components/home/ChangelogItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div v-for="item in list" :key="item.time">
+      <h4>{{ item.time }}</h4>
+      <ul>
+        <template v-for="(change, index) in item.changes">
+          <li v-if="typeof change === 'string'" :key="index" v-html="change"></li>
+          <li v-else :key="index">
+            {{ change.title }}
+            <ul class="mdui-m-t-0">
+              <li v-for="(content, cIndex) in change.contents" :key="cIndex" v-html="content"></li>
+            </ul>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>

src/components/material/PresetSettingDialog.vue

@@ -42,15 +42,13 @@
               v-model="pSetting.skills.normal[1]"
               :options="$_.range(1, sp.skills.normal.length + 1)"
               @change="handleNormalSkillLevelSelect1Change"
-            ></mdui-select-num>
+            />
             <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-            <span :key="`sn-s-${pSetting.skills.normal[1] + 1}`">
-              <mdui-select-num
-                v-model="pSetting.skills.normal[2]"
-                :options="$_.range(pSetting.skills.normal[1] + 1, sp.skills.normal.length + 2)"
-                @change="pSetting.skills.normal[0] = true"
-              ></mdui-select-num>
-            </span>
+            <mdui-select-num
+              v-model="pSetting.skills.normal[2]"
+              :options="$_.range(pSetting.skills.normal[1] + 1, sp.skills.normal.length + 2)"
+              @change="pSetting.skills.normal[0] = true"
+            />
           </div>
         </div>
         <!-- 精英技能选框 -->
@@ -92,21 +90,21 @@
                     sp.skills.normal.length + skill.cost.length + 1,
                   )
                 "
+                :display="minus7"
                 @change="() => handleEliteSkillLevelSelect1Change(i)"
-              ></mdui-select-num>
+              />
               <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-              <span :key="`se-s-${pSetting.skills.elite[i][1] + 1}`">
-                <mdui-select-num
-                  v-model="pSetting.skills.elite[i][2]"
-                  :options="
-                    $_.range(
-                      pSetting.skills.elite[i][1] + 1,
-                      sp.skills.normal.length + skill.cost.length + 2,
-                    )
-                  "
-                  @change="pSetting.skills.elite[i][0] = true"
-                ></mdui-select-num>
-              </span>
+              <mdui-select-num
+                v-model="pSetting.skills.elite[i][2]"
+                :options="
+                  $_.range(
+                    pSetting.skills.elite[i][1] + 1,
+                    sp.skills.normal.length + skill.cost.length + 2,
+                  )
+                "
+                :display="minus7"
+                @change="pSetting.skills.elite[i][0] = true"
+              />
             </div>
           </div>
         </template>
@@ -157,15 +155,13 @@
                 v-model="pSetting.uniequip[id][1]"
                 :options="$_.range(cost.length)"
                 @change="() => handleUniequipLevelSelect1Change(id)"
-              ></mdui-select-num>
+              />
               <i class="mdui-icon material-icons mdui-m-x-2">arrow_forward</i>
-              <span :key="`se-s-${pSetting.uniequip[id][1] + 1}`">
-                <mdui-select-num
-                  v-model="pSetting.uniequip[id][2]"
-                  :options="$_.range(pSetting.uniequip[id][1] + 1, cost.length + 1)"
-                  @change="pSetting.uniequip[id][0] = true"
-                ></mdui-select-num>
-              </span>
+              <mdui-select-num
+                v-model="pSetting.uniequip[id][2]"
+                :options="$_.range(pSetting.uniequip[id][1] + 1, cost.length + 1)"
+                @change="pSetting.uniequip[id][0] = true"
+              />
             </div>
           </div>
         </template>
@@ -213,7 +209,7 @@
 <script>
 import { defineComponent, markRaw } from 'vue';
 import { mapState, mapActions } from 'pinia';
-import { debounce } from 'lodash';
+import { debounce, size } from 'lodash';
 import { useDataStore } from '@/store/data';
 import { useSklandStore } from '@/store/skland';
 import DataImg from '@/components/DataImg.vue';
@@ -256,6 +252,14 @@ export default defineComponent({
     overflow: 'hidden',
     updateOverflowDebounce: null,
   }),
+  watch: {
+    curSklandCultivate: {
+      handler() {
+        this.initSettingDefaultValue();
+      },
+      immediate: true,
+    },
+  },
   computed: {
     ...mapState(useDataStore, ['characterTable', 'uniequip']),
     ...mapState(useSklandStore, {
@@ -317,23 +321,61 @@ export default defineComponent({
       return offsetUniequipIcons.has(icon) ? 'uniequip-icon-img-offset' : '';
     },
     handleNormalSkillLevelSelect1Change() {
-      this.$mutationNextTick();
       const { normal } = this.pSetting.skills;
       normal[0] = true;
       if (normal[1] >= normal[2]) normal[2] = normal[1] + 1;
     },
     handleEliteSkillLevelSelect1Change(i) {
-      this.$mutationNextTick();
       const { elite } = this.pSetting.skills;
       elite[i][0] = true;
       if (elite[i][1] >= elite[i][2]) elite[i][2] = elite[i][1] + 1;
     },
     handleUniequipLevelSelect1Change(id) {
-      this.$mutationNextTick();
       const { uniequip } = this.pSetting;
       uniequip[id][0] = true;
       if (uniequip[id][1] >= uniequip[id][2]) uniequip[id][2] = uniequip[id][1] + 1;
     },
+    minus7(num) {
+      return num - 7;
+    },
+    initSettingDefaultValue() {
+      if (!this.sp || !this.pSetting || !size(this.curSklandCultivate)) return;
+
+      const { mainSkillLevel, skills, equips } = this.curSklandCultivate;
+
+      // 普通技能 (1~7)
+      if (mainSkillLevel && mainSkillLevel < 7 && this.sp.skills.normal.length >= 2) {
+        const config = this.pSetting.skills.normal;
+        if (!config[0]) {
+          config[1] = mainSkillLevel;
+          config[2] = 7;
+        }
+      }
+
+      // 精英技能 (0~3)
+      if (skills && this.sp.skills.elite.length) {
+        this.sp.skills.elite.forEach(({ name }, i) => {
+          const config = this.pSetting.skills.elite[i];
+          const curLevel = skills[name];
+          if (!config[0] && curLevel < 3) {
+            config[1] = curLevel + 7;
+            config[2] = 10;
+          }
+        });
+      }
+
+      // 模组 (0~3)
+      if (equips && this.presetUniequip?.length) {
+        this.presetUniequip.forEach(({ id }) => {
+          const config = this.pSetting.uniequip[id];
+          const curLevel = equips[id];
+          if (!config[0] && curLevel < 3) {
+            config[1] = curLevel;
+            config[2] = 3;
+          }
+        });
+      }
+    },
   },
 });
 </script>

src/components/material/PresetTodoDialog.vue

@@ -185,7 +185,7 @@ export default defineComponent({
           type: 'eliteSkill',
           index: i,
           group: _.map(_.range(setting.skills.elite[i][1], setting.skills.elite[i][2]), ski => ({
-            name: `${this.$t(`skill.${name}`)} ${ski} -> ${ski + 1}`,
+            name: `${this.$t(`skill.${name}`)} ${ski - 7} -> ${ski - 6}`,
             index: ski,
             check: setting.skills.elite[i][0],
             cost: cost[ski - 7],

src/data/changelog.json

@@ -1,4 +1,17 @@
 [
+  {
+    "time": "2024-11-06",
+    "changes": [
+      {
+        "title": "精英材料计算",
+        "contents": [
+          "若有森空岛练度数据，使用预设时将会根据练度自动填写起始技能等级",
+          "专精技能等级的显示方式由 7~10 改为 0~3",
+          "修复二次编辑预设时，预设显示没有更新的问题"
+        ]
+      }
+    ]
+  },
   {
     "time": "2024-10-28",
     "changes": [

src/views/Home.vue

@@ -119,7 +119,7 @@
         </li>
         <li>
           Wiki
-          <ul>
+          <ul class="mdui-m-t-0">
             <li>CN - <a href="http://prts.wiki/" target="_blank">PRTS Wiki</a></li>
             <li>EN - <a href="https://gamepress.gg/arknights/" target="_blank">GamePress</a></li>
             <li>JP - <a href="https://arknights.wikiru.jp/" target="_blank">Wikiru</a></li>

src/views/Material/index.js

@@ -76,7 +76,7 @@ const getPresetSettingTemplate = eliteLength => {
   return init;
 };
 
-const uniequipInit = [false, 0, 1];
+const uniequipInit = [false, 0, 3];
 Object.freeze(uniequipInit);
 
 const min0 = x => (x < 0 ? 0 : x);
@@ -1206,11 +1206,12 @@ export default defineComponent({
       this.showPreset(obj);
     },
     showPreset(obj, edit = false) {
+      console.warn('showPreset', obj);
       this.selectedPreset =
         edit && typeof obj.index === 'number' ? { tag: this.selected.presets[obj.index] } : obj;
-      this.selectedPresetName = obj.tag.name;
+      this.selectedPresetName = this.selectedPreset.tag.name;
       let pSetting;
-      if (edit) pSetting = _.cloneDeep(obj.tag.setting);
+      if (edit) pSetting = _.cloneDeep(this.selectedPreset.tag.setting);
       else {
         const eliteSkills = this.elite[this.selectedPresetName]?.skills?.elite ?? [];
         pSetting = getPresetSettingTemplate(eliteSkills.length);