新增系统设置，可设置完全无音乐和隐藏战斗信息

src/components/dialog.vue

@@ -7,7 +7,7 @@
                     <span>{{ title }}</span>
                 </div>
                 <slot />
-                <img v-if="showHeader" :src="close_icon" class="close" @click="show = false; emit('close')"></img>
+                <img v-if="showHeader" :src="close_icon" class="close" @click="show = false; emit('close');"></img>
             </div>
         </div>
     </teleport>
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { watch, onMounted, ref } from "vue";
+import { watch, onMounted, ref, onBeforeUnmount } from "vue";
 import { useI18n } from "vue3-i18n";
 import { close_icon } from "@/config";
 
@@ -77,13 +77,15 @@ watch(() => prop.modelValue, (n, o) => {
     show.value = n;
 })
 
+const keydown = (e) => {
+    if (e.keyCode == 27) {
+        show.value = false;
+        emit('close');
+    }
+}
+
 onMounted(() => {
-    document.addEventListener('keydown', (e) => {
-        if (e.keyCode == 27) {
-            show.value = false;
-            emit('close');
-        }
-    })
+    document.addEventListener('keydown', keydown);
     if (prop.obscured) {
         style.value = {
             height: '100%'
@@ -92,6 +94,9 @@ onMounted(() => {
         style.value = {};
     }
 });
+onBeforeUnmount(() => {
+    document.removeEventListener('keydown', keydown)
+})
 </script>
 <style lang="scss" scoped>
 .dialog {

src/config/assets.ts

@@ -20,6 +20,7 @@ export const menu_icons = {
   illustrated: root + '/img/menu/illustrated.png',
   extras: root + '/img/menu/extras.png',
   setting: root + '/img/menu/setting.png',
+  settings: root + '/img/menu/settings.png',
 };
 
 export const attr_icon_urls = {

src/config/i18n/zh/index.ts

@@ -1,6 +1,7 @@
 import { weapon, armor, neck, ring, jewelry, pants, shoes, bracers, quality, extraQuality } from './euips';
 import * as skills from './skills';
 import * as point from './point';
+import * as setting from './setting';
 
 export default class Zh {
   title = '挂机放置游戏';
@@ -169,4 +170,7 @@ export default class Zh {
   update = ['版本更新通知', '检测到有服务器有新版本，是否刷新刷新页面更新版本？', '刷新页面', '暂时不管'];
 
   login = ['登录', '用户名', '密码', '登录/注册', '请输入用户名', '请输入密码', '登录成功'];
+
+  setting = setting;
+
 }

src/config/i18n/zh/setting.ts

@@ -0,0 +1,4 @@
+export const title = '系统设置';
+export const action = ['保存设置', '取消'];
+export const music = ['背景音乐', '完全关闭', '最小音量', '正常音量'];
+export const battle = ['战斗日志', '显示', '隐藏'];

src/store/state.ts

@@ -7,6 +7,7 @@ export default {
     { type: 'win', msg: t('welcome.0') },
     { type: 'win', msg: t('welcome.1') },
   ],
+  battleLog: 1, //是否显示战斗日志
   mobile: window.innerWidth < 768,
   curMenu: null,
   equipTip: {

src/tool/IndexedDB.ts

@@ -3,8 +3,10 @@ import { deepCopy } from './caller';
 const db_name = 'transmigration_game';
 export const store_name_archive = 'archive';
 export const key_name_archive = 'version';
+export const store_name_config = 'config';
+export const key_name_config = 'type';
 
-const version = 1;
+const version = 2;
 let db;
 /**
  * 打开数据库
@@ -45,6 +47,9 @@ const createStore = () => {
     // 创建索引，在后面查询数据的时候可以根据索引查
     // objectStore.createIndex(index_name_equip, index_name_equip, { unique: false });
   }
+  if (!db.objectStoreNames.contains(store_name_config)) {
+    db.createObjectStore(store_name_config, { keyPath: key_name_config });
+  }
 };
 
 await openDB();

src/views/archive.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.exportGame" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('archive.0')" v-model="showArchive" top="4rem" left='8%'>
+    <Dialog :title="t('archive.0')" v-model="showArchive" top="4rem" left='8%' @close="state.curMenu = null">
         <div class="archive">
             <span class="tip">* {{ t('archive.1') }}</span>
             <textarea class="textarea" v-model="archive"></textarea>

src/views/backpack/backpack.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.backpack" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('backpack')" v-model="show" top="4rem" left='8%'>
+    <Dialog :title="t('backpack')" v-model="show" top="4rem" left='8%' @close="state.curMenu = null">
         <Player />
         <Grid @openEquipMenu="openEquipMenu" />
     </Dialog>

src/views/illustrated/illustrated.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.illustrated" @click="showMenu">
     </Tooltip>
 
-    <Drawer :title="t('illustrated.0')" v-model="showIllustrated" :width="state.mobile ? '100%' : ''">
+    <Drawer :title="t('illustrated.0')" v-model="showIllustrated" :width="state.mobile ? '100%' : ''" @close="state.curMenu = null">
         <Tabs :tabs="tabs">
             <tab v-for="item in tabs" :name="item.name">
                 <Equips :type="item.name" quality="colorful" extraQuality="taigu" :samples="taigu[item.name]" />

src/views/menu.vue

@@ -6,9 +6,10 @@
         <SaveGame />
         <Archive />
         <Dungeon />
-        <Music />
+        <!-- <Music /> -->
         <Illustrated />
         <Version />
+        <Setting />
     </div>
 </template>
 
@@ -25,6 +26,7 @@ import Archive from "./archive.vue";
 import Music from "./music.vue";
 import Illustrated from "./illustrated";
 import Version from "./version";
+import Setting from "./setting.vue";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();

src/views/message/sys-info.vue

@@ -1,6 +1,6 @@
 <template>
     <div class='sysInfo' ref="sysInfo">
-        <div :class="['info', v.type]" v-for="(v, k) in state.sysInfo" :key="k">
+        <div :class="['info', v.type]" v-for="(v, k) in infos" :key="k">
             <span>{{ t('sys') }}</span>
             <i class="time" v-if="v.time">({{ v.time }})</i>：
             <span class="msg">{{ v.msg }}</span>
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { useStore } from "vuex";
-import { watch, nextTick, onMounted, ref } from "vue";
+import { watch, nextTick, onMounted, ref, computed } from "vue";
 import { useI18n } from "vue3-i18n";
 import { qualitys } from "@/config";
 import { Drawer, Tooltip } from "@/components";
@@ -32,6 +32,15 @@ import Bouts from "./bouts.vue";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
+const infos = computed(() => {
+    if (state.battleLog === 1) {
+        return state.sysInfo;
+    } else {
+        return state.sysInfo.filter(info => {
+            return info.type.indexOf('_') === -1;
+        })
+    }
+})
 const sysInfo = ref();
 const showBouts = ref(false)
 const bouts = ref<any>([])

src/views/point/point.vue

@@ -3,7 +3,8 @@
         <img class="menu-img" :src="menu_icons.reborn" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('menu')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'" padding="0.7rem">
+    <Dialog :title="t('menu')" v-model="showReborn" top="4rem" :left="state.mobile ? '4%' : '8%'" padding="0.7rem"
+        @close="state.curMenu = null">
         <div class="message">
             <div class="tips">
                 <p>- {{ t('desc.0') }}</p>

src/views/setting.vue

@@ -0,0 +1,134 @@
+<template>
+    <Tooltip :infos="[t('title')]" width="10rem">
+        <img class="menu-img" :src="menu_icons.settings" @click="showMenu">
+    </Tooltip>
+
+    <Dialog :title="t('title')" v-model="show" top="4rem" :left="state.mobile ? '4%' : '8%'" padding="0.7rem" :z="49"
+        @close="state.curMenu = null">
+        <div class="setting">
+            <div class="item">
+                <div class="label">{{ t('music.0') }}：</div>
+                <div class="options">
+                    <input type="radio" id="none" :value="0" v-model="settings.music"> {{ t('music.1') }}
+                    <input type="radio" id="min" :value="0.01" v-model="settings.music"> {{ t('music.2') }}
+                    <input type="radio" id="normal" :value="0.2" v-model="settings.music"> {{ t('music.3') }}
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">{{ t('battle.0') }}：</div>
+                <div class="options">
+                    <input type="radio" :value="1" v-model="settings.battle"> {{ t('battle.1') }}
+                    <input type="radio" :value="0" v-model="settings.battle"> {{ t('battle.2') }}
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <button class="button" @click="saveSettings">{{ t('action.0') }}</button>
+            <button class="button" @click="showMenu">{{ t('action.1') }}</button>
+        </div>
+    </Dialog>
+
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { Tooltip, Dialog } from "@/components"
+import { menu_icons } from "@/config";
+import { createt } from "@/config/i18n";
+import { store_name_config, key_name_config, getFromStore, insertToStore } from "@/tool";
+
+const t = createt('setting.');
+const { state, commit, dispatch } = useStore();
+const show = computed(() => {
+    return state.curMenu == 'setting';
+});
+const settings = ref({
+    type: 'setting',
+    music: 0.01,
+    battle: 1
+})
+
+const saveSettings = () => {
+    insertToStore(store_name_config, settings.value);
+    set();
+    showMenu();
+}
+
+const set = () => {
+    dispatch('set_music_volume', settings.value.music);
+    state.battleLog = settings.value.battle;
+}
+
+const readSetting = () => {
+    getFromStore(store_name_config, settings.value.type).then((rsp: any) => {
+        if (rsp) {
+            settings.value = rsp
+            set();
+        };
+    });
+}
+
+const showMenu = () => {
+    state.curMenu = show.value ? null : 'setting';
+}
+
+const keydown = (e) => {
+    if (state.curMenu != null) {
+        return;
+    }
+    if (e.keyCode == 27 && !e.ctrlKey) {
+        setTimeout(() => {
+            showMenu();
+        }, 50);
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('keydown', keydown, true)
+    readSetting();
+});
+onBeforeUnmount(() => {
+    document.removeEventListener('keydown', keydown)
+})
+
+</script>
+<style lang="scss" scoped>
+.setting {
+    width: 32rem;
+    font-size: 1rem;
+    padding-top: 1rem;
+
+    .label {
+        float: left;
+        width: 20%;
+        text-align: right;
+    }
+
+    .options {
+        float: right;
+        width: 78%;
+        text-align: left;
+    }
+
+    .item {
+        height: 2rem;
+    }
+
+    .footer {
+        padding-top: 1rem;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .setting {
+        width: 23.5rem;
+        margin-top: 0.5rem;
+
+        .footer {
+            margin-top: 0.5rem;
+        }
+
+    }
+}
+</style>

src/views/shop/shop.vue

@@ -3,7 +3,7 @@
         <img class="menu-img" :src="menu_icons.shop" @click="showMenu">
     </Tooltip>
 
-    <Dialog :title="t('shop')" v-model="showShop" top="4rem" left='8%'>
+    <Dialog :title="t('shop')" v-model="showShop" top="4rem" left='8%' @close="state.curMenu = null">
         <div class="coins">
             {{ t('coins.0') }}:{{ coins }}
         </div>

src/views/version/update-log.vue

@@ -43,6 +43,7 @@ const updateLogs: any = [{
         '流血伤害不再是真实伤害,受护甲减伤影响',
         '修复武器青光被动异常减伤BUG',
         '自动出售可勾选神话品质',
+        '新增系统设置，可设置完全无音乐和隐藏战斗信息',
     ],
     bug: [
         '修复一些UI显示BUG',

src/views/version/version.vue

@@ -4,7 +4,7 @@
         <img class="menu-img" :src="menu_icons.extras" @click="showMenu">
     </Tooltip>
 
-    <Drawer v-model="showVersion" :width="state.mobile ? '100%' : '35%'">
+    <Drawer v-model="showVersion" :width="state.mobile ? '100%' : '35%'" @close="state.curMenu = null">
         <UpdateLog />
     </Drawer>