完善部分ui，修改部分剧情

src/ui/chapter.vue

@@ -15,13 +15,13 @@ const props = defineProps<{
     chapter: string;
 }>();
 
-let canvas: HTMLCanvasElement;
+let can: HTMLCanvasElement;
 let ctx: CanvasRenderingContext2D;
 let text: HTMLSpanElement;
 
 onMounted(async () => {
-    canvas = document.getElementById('chapter-back') as HTMLCanvasElement;
-    ctx = canvas.getContext('2d')!;
+    can = document.getElementById('chapter-back') as HTMLCanvasElement;
+    ctx = can.getContext('2d')!;
     text = document.getElementById('chapter-text') as HTMLSpanElement;
 
     const ani = new Animation();
@@ -36,10 +36,10 @@ onMounted(async () => {
     ani.register('rect2', h / 2);
     ani.register('text', window.innerWidth + 10 + textWidth);
 
-    canvas.width = w;
-    canvas.height = h;
-    canvas.style.width = `${window.innerWidth}px`;
-    canvas.style.height = `${window.innerHeight}px`;
+    can.width = w;
+    can.height = h;
+    can.style.width = `${window.innerWidth}px`;
+    can.style.height = `${window.innerHeight}px`;
     text.style.left = `${w + 10}px`;
     text.style.top = `${window.innerHeight / 2 - h * 0.025}px`;
     text.style.height = `${h * 0.05}px`;
@@ -55,7 +55,10 @@ onMounted(async () => {
             return;
         }
 
-        if (time >= 4000) chapterShowed.value = false;
+        if (time >= 4000) {
+            chapterShowed.value = false;
+            ani.ticker.destroy();
+        }
 
         if (!soundPlayed && time >= 1500) {
             soundPlayed = true;
@@ -114,9 +117,6 @@ onMounted(async () => {
     ani.mode(hyper('sin', 'in')).time(1000).apply('rect2', 0);
     await sleep(1000);
     ani.mode(hyper('sin', 'out')).time(1000).apply('lineOpacity', 0);
-
-    await sleep(1000);
-    ani.ticker.destroy();
 });
 </script>
 

src/ui/markedEnemy.vue

@@ -25,13 +25,13 @@
                             >伤害：{{ getDamage(v) }}</span
                         >
                         <span class="marked-critical marked-item"
-                            >临界: {{ getCritical(v)[0] }}</span
+                            >临界：{{ getCritical(v)[0] }}</span
                         >
                         <span class="marked-critical-damage marked-item"
-                            >减伤： {{ getCritical(v)[1] }}</span
+                            >减伤：{{ getCritical(v)[1] }}</span
                         >
                         <span class="marked-def marked-item"
-                            >{{ ratio }}防: {{ getDefDamage(v) }}</span
+                            >{{ ratio }}防：{{ getDefDamage(v) }}</span
                         >
                         <div class="marked-button">
                             <span

src/ui/settings.vue

@@ -11,11 +11,27 @@
                     <span
                         class="selectable setting-item"
                         :selected="selected === 'transition'"
-                        @click="transition = !transition"
+                        @click="click('transition')"
                         >界面动画:&nbsp;&nbsp;&nbsp;{{
                             transition ? 'ON' : 'OFF'
                         }}</span
                     >
+                    <span
+                        class="selectable setting-item"
+                        :selected="selected === 'itemDetail'"
+                        @click="click('itemDetail')"
+                        >宝石血瓶显伤:&nbsp;&nbsp;&nbsp;{{
+                            itemDetail ? 'ON' : 'OFF'
+                        }}</span
+                    >
+                    <span
+                        class="selectable setting-item"
+                        :selected="selected === 'autoSkill'"
+                        @click="click('autoSkill')"
+                        >自动切换技能:&nbsp;&nbsp;&nbsp;{{
+                            autoSkill ? 'ON' : 'OFF'
+                        }}</span
+                    >
                 </div>
             </Scroll>
             <a-divider
@@ -24,11 +40,7 @@
             ></a-divider>
             <div id="setting-right">
                 <Scroll style="height: 100%">
-                    <span
-                        v-if="descText.value.startsWith('!!html')"
-                        v-html="descText.value"
-                    ></span>
-                    <span v-else>{{ descText.value }}</span>
+                    <span v-html="descText"></span>
                 </Scroll>
             </div>
         </div>
@@ -36,10 +48,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { transition } from '../plugin/settings';
+import { computed, ref } from 'vue';
+import { transition, itemDetail, autoSkill } from '../plugin/settings';
 import settingInfo from '../data/settings.json';
-import { type } from '../plugin/utils';
+import { has } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import { isMobile } from '../plugin/use';
@@ -49,12 +61,36 @@ type Settings = typeof settingInfo;
 const selected = ref<keyof Settings>('transition');
 
 const descText = computed(() => {
-    return type(settingInfo[selected.value].desc);
+    return settingInfo[selected.value].desc
+        .map((v, i, a) => {
+            if (/^\d+\./.test(v)) return `${'&nbsp;'.repeat(12)}${v}`;
+            else if (
+                (has(a[i - 1]) && v !== '<br>' && a[i - 1] === '<br>') ||
+                i === 0
+            ) {
+                return `${'&nbsp;'.repeat(8)}${v}`;
+            } else return v;
+        })
+        .join('');
 });
 
 function exit() {
     core.plugin.settingsOpened.value = false;
 }
+
+function click(id: keyof Settings) {
+    if (selected.value !== id) {
+        selected.value = id;
+        return;
+    }
+    if (id === 'transition') {
+        transition.value = !transition.value;
+    } else if (id === 'itemDetail') {
+        itemDetail.value = !itemDetail.value;
+    } else if (id === 'autoSkill') {
+        autoSkill.value = !autoSkill.value;
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/ui/statusBar.vue

@@ -84,10 +84,18 @@
                         }}</span>
                     </div>
                     <div v-if="skillOpened" class="status-item">
-                        <span id="skill-tree" class="button-text">技能树</span>
+                        <span
+                            id="skill-tree"
+                            class="button-text"
+                            @click="openSkillTree"
+                            >技能树</span
+                        >
                     </div>
                     <div v-if="skillOpened" class="status-item">
-                        <span id="status-skill" class="button-text"
+                        <span
+                            id="status-skill"
+                            class="button-text"
+                            @click="openSkill"
                             >查看技能</span
                         >
                     </div>
@@ -161,6 +169,16 @@ function update() {
     }
     skillOpened.value = core.getFlag('chapter', 0) > 0;
 }
+
+function openSkillTree(e: MouseEvent) {
+    e.stopPropagation();
+    core.useItem('skill1');
+}
+
+function openSkill(e: MouseEvent) {
+    e.stopPropagation();
+    core.useItem('cross');
+}
 </script>
 
 <style lang="less" scoped>
@@ -213,6 +231,7 @@ function update() {
     font-size: 1.9vw;
     width: 100%;
     text-align: center;
+    text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
 }
 
 #status-lv {
@@ -220,6 +239,7 @@ function update() {
     font-size: 1.9vw;
     width: 100%;
     text-align: center;
+    text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
 }
 
 .status-extra {