Skip to content

Commit

Permalink
Merge pull request eee555#49 from putianyi889/patch-37
Browse files Browse the repository at this point in the history 
增加设置页面，优化菜单外观
  • Loading branch information
@eee555
eee555 authored Jun 18, 2024
2 parents a52a892 + b18e8ce commit b465524
Show file tree
Hide file tree
Showing 11 changed files with 279 additions and 181 deletions.
5 changes: 3 additions & 2 deletions front_end/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@types/js-cookie": "^3.0.3",
"@types/lowdb": "^1.0.11",
"@types/node": "^20.5.1",
"axios": "^0.21.1",
"axios": "^1.7.2",
"echarts": "^5.5.0",
"element-plus": "^2.2.32",
"flag-icon-css": "^4.1.7",
Expand All @@ -29,6 +29,7 @@
"markdown-it-mathjax3": "^4.3.2",
"ms-toollib": "1.4.6-alpha",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"uuid": "^9.0.0",
"vue": "^3.4.0",
"vue-echarts": "^6.7.1",
Expand All @@ -46,4 +47,4 @@
"vite-plugin-top-level-await": "^1.4.1",
"vite-plugin-wasm": "^3.3.0"
}
}
}
157 changes: 89 additions & 68 deletions front_end/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,67 @@
<template>
<!-- message的z索引为2015 -->
<el-menu style="position: fixed; width: 100%; height: 60px; top: 0; z-index: 2010;user-select: none;"
mode="horizontal" :router="true" :default-active="menu_index">
<el-menu style="position: fixed; width: 100%; z-index: 2010; user-select: none" mode="horizontal" :router="true"
:default-active="menu_index" :ellipsis="false" menu-trigger="click">
<el-menu-item index="/">
<div class="logo" style="display: inline-flex;justify-content: center;align-items: center;">
<el-image style="width: 52px; height: 52px;display: inline-flex;" :src="logo_1" :fit="'cover'" />
<el-image style="width: 131px; height: 60px;display: inline-flex;" :src="logo_2" :fit="'cover'" />
<div class="logo" style="display: inline-flex; justify-content: center; align-items: center">
<el-image style="width: 52px; height: 52px; padding-top: 4px; padding-bottom: 4px; display: inline-flex"
:src="logo_1" :fit="'cover'" />
<el-image v-if="!local.menu_icon" style="width: 131px; height: 60px; display: inline-flex" :src="logo_2"
:fit="'cover'" />
</div>
</el-menu-item>
<el-menu-item index="/ranking">
<div class="header">{{ $t('menu.ranking') }}</div>
</el-menu-item>
<el-menu-item index="/video">
<div class="header">{{ $t('menu.video') }}</div>
</el-menu-item>
<el-menu-item index="/world">
<div class="header">{{ $t('menu.world') }}</div>
</el-menu-item>
<el-menu-item index="/guide">
<div class="header">{{ $t('menu.guide') }}</div>
<el-menu-item v-for="item in menu_items" :index="'/' + item.index"
style="font-size: 18px; padding-left: 8px; padding-right: 5px">
<el-tooltip v-if="local.menu_icon" :content="$t(item.content)">
<el-icon style="margin-top: 21px; margin-bottom: 21px">
<component :is="item.icon" style="width: 60px; height: 60px" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<component :is="item.icon" style="width: 60px; height: 60px" />
</el-icon>{{ $t(item.content) }}
</span>
</el-menu-item>
<el-menu-item index="/score">
<div class="header">{{ $t('menu.score') }}</div>
<div style="flex-grow: 1" />
<el-menu-item :index="player_url" v-if="store.user.id != 0" @click="store.player = store.user"
style="font-size: 18px; padding-left: 8px; padding-right: 5px">
<el-tooltip v-if="local.menu_icon" :content="store.user.username">
<el-icon style="margin-top: 21px; margin-bottom: 21px">
<User style="width: 60px; height: 60px" />
</el-icon>
</el-tooltip>
<span v-else style="padding-right: 5px">
<el-icon>
<User style="width: 60px; height: 60px" />
</el-icon>{{ store.user.username }}
</span>
</el-menu-item>
<el-menu-item :index="player_url" :disabled="store.user.id == 0" @click="store.player = store.user;">
<div class="header">{{ $t('menu.profile') }}</div>
<el-menu-item index="/settings" style="font-size: 18px; padding-left: 8px; padding-right: 8px">
<el-tooltip :content="$t('menu.setting')">
<el-icon style="margin-top: 20px; margin-bottom: 20px">
<Setting style="width: 60px; height: 60px" />
</el-icon>
</el-tooltip>
</el-menu-item>
<LanguagePicker/>
<div
style="margin-left: auto;margin-right: 16px;display: inline-flex;justify-content: center;align-items: center;">
<Menu @login="user_login" @logout="user_logout"></Menu>
<div style="font-size: 18px; padding-left: 8px; padding-right: 8px">
<LanguagePicker v-show="local.language_show" />
</div>
<div class="header">
<Login @login="user_login" @logout="user_logout"></Login>
</div>
</el-menu>


<div class="common-layout">
<el-container>
<div class="header_all" style="padding-top: 0;overflow: hidden;">
<div class="content" style="padding-top: 16px;">
<div class="header_all" style="padding-top: 0; overflow: hidden">
<div class="content" style="padding-top: 16px">
<router-view />
</div>
</div>


<el-footer style="margin: auto;">
<el-footer style="margin: auto">
Copyright @ 2023　<a href="http://fff666.top">元扫雷网 fff666.top</a>　版权所有　<a
href="https://beian.miit.gov.cn/">苏ICP备2023056839号-1</a>
<span style="width:12px; display:inline-block"></span>
<span style="width: 12px; display: inline-block"></span>
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=32020602001691" rel="noreferrer"
target="_blank">苏公网安备32020602001691</a>
</el-footer>
Expand All @@ -59,78 +74,86 @@
<template #footer>
<span class="dialog-footer">
<el-checkbox v-model="never_show_notice">不再显示此对话框</el-checkbox>
<el-button type="primary" @click="handle_notice_close();">
<el-button type="primary" @click="handle_notice_close()">
确认
</el-button>
</span>
</template>
</el-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, computed } from 'vue'
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import Menu from "./components/Menu.vue";
import LanguagePicker from './components/LanguagePicker.vue';
import LanguagePicker from "./components/LanguagePicker.vue";
import Login from "./components/Login.vue";
// import { LoginStatus } from "@/utils/common/structInterface"
import useCurrentInstance from "@/utils/common/useCurrentInstance";
import { useUserStore } from './store'
const store = useUserStore()
import { useLocalStore, useUserStore } from "./store";
const store = useUserStore();
const local = useLocalStore();
import { useI18n } from 'vue-i18n';
import { useI18n } from "vue-i18n";
const t = useI18n();
const { proxy } = useCurrentInstance();
import logo_1 from '@/assets/logo.png';
import logo_2 from '@/assets/logo2.png';
import logo_1 from "@/assets/logo.png";
import logo_2 from "@/assets/logo2.png";
import { useRouter } from 'vue-router'
const router = useRouter()
import { useRouter } from "vue-router";
const router = useRouter();
// const player_visible = ref(false)
const notice_visible = ref(false)
const never_show_notice = ref(false)
const notice_visible = ref(false);
const never_show_notice = ref(false);
// 主要是切换后的高亮
const menu_index = ref()
const menu_index = ref();
const menu_items = [
{ index: "ranking", icon: "Trophy", content: "menu.ranking" },
{ index: "video", icon: "VideoCameraFilled", content: "menu.video" },
{ index: "world", icon: "Odometer", content: "menu.world" },
{ index: "guide", icon: "Document", content: "menu.guide" },
{ index: "score", icon: "Histogram", content: "menu.score" },
];
const notice = ref(`
1、即日起开始删档公测，公测与开发同步进行。公测结束后，在正式上线之前会删除所有数据。
2、相关意见、问题和建议请移步至此处[https://gitee.com/ee55/saolei_website/issues]发表。
`)
`);
onMounted(() => {
const notice_hash = localStorage.getItem("notice") as String;
if (hash_code(notice.value) + "" != notice_hash) {
notice_visible.value = true;
}
console.log(`
元扫雷网(fff666.top)开发团队，期待您的加入: [email protected]
`);
router.isReady().then(() => { menu_index.value = router.currentRoute.value.fullPath; })
})
router.isReady().then(() => {
menu_index.value = router.currentRoute.value.fullPath;
});
});
const player_url = computed(() => {
return '/player/' + store.user.id;
})
return "/player/" + store.user.id;
});
const user_login = () => {
// player_visible.value = true;
// tab_width.value = "14vw";
}
};
const user_logout = () => {
// console.log(router.currentRoute.value.fullPath);
// 如果切在我的地盘，就切到主页
if (router.currentRoute.value.fullPath.slice(0, 7) == '/player') {
if (router.currentRoute.value.fullPath.slice(0, 7) == "/player") {
menu_index.value = "/";
proxy.$router.push("/");
}
}
};
// const goback_home = () => {
// router.push("/")
Expand All @@ -142,38 +165,36 @@ const handle_notice_close = () => {
localStorage.setItem("notice", hash_code(notice.value) + "");
}
notice_visible.value = false;
}
};
const hash_code = function (t: string) {
var hash = 0, i, chr;
var hash = 0,
i,
chr;
if (t.length === 0) return hash;
for (i = 0; i < t.length; i++) {
chr = t.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash = (hash << 5) - hash + chr;
hash |= 0; // 32bit integer
}
return hash;
};
</script>


<style lang='less'>
<style lang="less">
body {
overflow-y: scroll;
margin: 0;
}
.logo:hover {
cursor: pointer;
}
.header {
font-size: 18px;
margin: 0px;
padding-top: 21px;
}
Expand Down
3 changes: 3 additions & 0 deletions front_end/src/assets/language.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 30 additions & 12 deletions front_end/src/components/LanguagePicker.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,38 @@
<template>
<el-select v-model="i18n.global.locale.value" style="width: 100px">
<el-option v-for="item in options" :key="item.lang" :label="item.text" :value="item.lang" />
</el-select>
<el-dropdown @command="changeLanguage" trigger="click">
<el-image :src="logo_lang" style="width: 24px; height: 24px; margin-top: 18px; cursor: pointer"></el-image>
<template #dropdown>
<el-dropdown-item v-for="item in options" :command="item.lang">
{{ item.text }}
</el-dropdown-item>
</template>
</el-dropdown>
</template>

<script lang="ts" setup name="LanguagePicker">
import i18n from '@/i18n';
import { useI18n } from 'vue-i18n';
import { onBeforeMount } from "vue";
import i18n from "@/i18n";
import { useI18n } from "vue-i18n";
const t = useI18n();
import { useLocalStore } from "@/store";
const local = useLocalStore();
import logo_lang from "@/assets/language.svg";
const options = [
{ lang: 'dev', text: 'dev' },
{ lang: 'zh-cn', text: '简体中文' },
{ lang: 'de', text: 'name'},
{ lang: 'en', text: 'English'}
]
{ lang: "zh-cn", text: "简体中文" },
{ lang: "en", text: "English" },
{ lang: "de", text: "name" },
{ lang: "dev", text: "dev" },
];
onBeforeMount(() => {
i18n.global.locale.value = local.language;
});
</script>
const changeLanguage = (value: any) => {
i18n.global.locale.value = value;
local.language = value;
};
</script>
Loading

0 comments on commit b465524

Please sign in to comment.