组件化两栏显示

src/ui/desc.vue

@@ -1,40 +1,25 @@
 <template>
-    <div id="desc">
-        <div id="tools">
-            <span class="button-text" @click="exit"
-                ><left-outlined /> 返回游戏</span
-            >
-        </div>
-        <div id="desc-main">
-            <Scroll id="desc-left">
-                <div id="desc-list">
-                    <span
-                        v-for="(data, k) in desc"
-                        class="selectable desc-item"
-                        :selected="selected === k"
-                        @click="selected = k"
-                        >{{ data.text }}</span
-                    >
-                </div>
-            </Scroll>
-            <a-divider
-                id="divider"
-                :type="isMobile ? 'horizontal' : 'vertical'"
-            ></a-divider>
-            <div id="desc-right">
-                <Scroll><span v-html="content"></span></Scroll>
-            </div>
-        </div>
-    </div>
+    <Colomn @close="exit" :width="80" :height="80" :left="30" :right="70"
+        ><template #left
+            ><div id="desc-list">
+                <span
+                    v-for="(data, k) in desc"
+                    class="selectable desc-item"
+                    :selected="selected === k"
+                    @click="selected = k"
+                    >{{ data.text }}</span
+                >
+            </div></template
+        >
+        <template #right><span v-html="content"></span></template
+    ></Colomn>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import desc from '../data/desc.json';
-import { LeftOutlined } from '@ant-design/icons-vue';
-import Scroll from '../components/scroll.vue';
 import { has } from '../plugin/utils';
-import { isMobile } from '../plugin/use';
+import Colomn from '../components/colomn.vue';
 
 type DescKey = keyof typeof desc;
 
@@ -60,25 +45,6 @@ const content = computed(() => {
 </script>
 
 <style lang="less" scoped>
-#desc {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    font-size: 2.7vh;
-    font-family: 'normal';
-    user-select: none;
-}
-
-#desc-main {
-    width: 80%;
-    height: 80%;
-    display: flex;
-    justify-content: center;
-}
-
 #desc-left {
     flex-basis: 30%;
 }
@@ -88,47 +54,7 @@ const content = computed(() => {
     flex-direction: column;
 }
 
-#desc-right {
-    flex-basis: 70%;
-}
-
-#divider {
-    height: 100%;
-}
-
 .desc-item {
     padding: 1% 3% 1% 3%;
 }
-
-#tools {
-    width: 100%;
-    font-family: 'normal';
-    font-size: 3.2vh;
-    height: 5vh;
-    position: fixed;
-    left: 10vw;
-    top: 5vh;
-}
-
-@media screen and (max-width: 600px) {
-    #desc-main {
-        flex-direction: column;
-        width: 90%;
-        height: 75%;
-    }
-
-    #divider {
-        height: auto;
-        width: 100%;
-        margin: 5% 0 5% 0;
-    }
-
-    #desc-left {
-        height: 40%;
-    }
-
-    #desc-right {
-        height: 50%;
-    }
-}
 </style>

src/ui/settings.vue

@@ -1,50 +1,35 @@
 <template>
-    <div id="settings">
-        <div id="tools">
-            <span class="button-text tools" @click="exit"
-                ><left-outlined /> 返回游戏</span
-            >
-        </div>
-        <div id="settings-main">
-            <Scroll id="setting-left">
-                <div id="setting-list">
-                    <span
-                        class="selectable setting-item"
-                        :selected="selected === '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
-                id="divider"
-                :type="isMobile ? 'horizontal' : 'vertical'"
-            ></a-divider>
-            <div id="setting-right">
-                <Scroll style="height: 100%">
-                    <span v-html="descText"></span>
-                </Scroll>
-            </div>
-        </div>
-    </div>
+    <Column :width="60" :height="60" @close="exit"
+        ><template #left
+            ><div id="setting-list">
+                <span
+                    class="selectable setting-item"
+                    :selected="selected === '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></template
+        >
+        <template #right><span v-html="descText"></span></template
+    ></Column>
 </template>
 
 <script lang="ts" setup>
@@ -52,9 +37,7 @@ import { computed, ref } from 'vue';
 import { transition, itemDetail, autoSkill } from '../plugin/settings';
 import settingInfo from '../data/settings.json';
 import { has } from '../plugin/utils';
-import Scroll from '../components/scroll.vue';
-import { LeftOutlined } from '@ant-design/icons-vue';
-import { isMobile } from '../plugin/use';
+import Column from '../components/colomn.vue';
 
 type Settings = typeof settingInfo;
 
@@ -94,24 +77,6 @@ function click(id: keyof Settings) {
 </script>
 
 <style lang="less" scoped>
-#settings {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: 'normal';
-    font-size: 2.7vh;
-    user-select: none;
-}
-
-#settings-main {
-    width: 60%;
-    height: 60%;
-    display: flex;
-    flex-direction: row;
-}
-
 #setting-list {
     display: flex;
     flex-direction: column;
@@ -121,50 +86,4 @@ function click(id: keyof Settings) {
     width: 100%;
     padding: 1% 3% 1% 3%;
 }
-
-#setting-left {
-    flex-basis: 40%;
-    height: 100%;
-}
-
-#setting-right {
-    flex-basis: 60%;
-    height: 100%;
-}
-
-#divider {
-    height: 100%;
-}
-
-#tools {
-    width: 100%;
-    font-family: 'normal';
-    font-size: 3.2vh;
-    height: 5vh;
-    position: fixed;
-    left: 10vw;
-    top: 5vh;
-}
-
-@media screen and (max-width: 600px) {
-    #settings-main {
-        flex-direction: column;
-        width: 90%;
-        height: 75%;
-    }
-
-    #divider {
-        height: auto;
-        width: 100%;
-        margin: 5% 0 5% 0;
-    }
-
-    #setting-left {
-        height: 40%;
-    }
-
-    #setting-right {
-        height: 50%;
-    }
-}
 </style>

src/ui/skill.vue

@@ -0,0 +1,78 @@
+<template>
+    <Column @close="exit" :width="70" :height="70"
+        ><template #left
+            ><div id="skill-list">
+                <span
+                    v-for="(v, k) in skills"
+                    class="selectable skill-item"
+                    :selected="k === selected"
+                    :selectable="skillOpened(k)"
+                    @click="select(k)"
+                    >{{ v.text }}</span
+                >
+            </div></template
+        >
+        <template #right><span v-html="content"></span></template
+    ></Column>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import skills from '../data/skill.json';
+import { has } from '../plugin/utils';
+import Column from '../components/colomn.vue';
+
+type Skills = keyof typeof skills;
+
+const selected = ref<Skills>('none');
+
+function skillOpened(skill: Skills) {
+    return eval(skills[skill].opened) as boolean;
+}
+
+function select(skill: Skills) {
+    if (!skillOpened(skill)) return;
+    selected.value = skill;
+}
+
+const content = computed(() => {
+    return eval(
+        '`' +
+            skills[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('')
+                .replace(/level:(\d+)/g, 'core.getSkillLevel($1)') +
+            '`'
+    );
+});
+
+function exit() {
+    core.plugin.skillOpened.value = false;
+}
+</script>
+
+<style lang="less" scoped>
+#skill-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.skill-item {
+    width: 100%;
+    padding: 1% 3% 1% 3%;
+}
+
+.skill-item[selectable='false'] {
+    color: gray;
+}
+</style>