Merge pull request eee555#51 from putianyi889/patch-38

性能、界面优化
putianyi889 · Jun 20, 2024 · a0ca9ae · a0ca9ae
2 parents b465524 + aa842e7
commit a0ca9ae
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 72 deletions.
diff --git a/front_end/src/App.vue b/front_end/src/App.vue
@@ -1,59 +1,49 @@
 <template>
     <!-- message的z索引为2015 -->
-    <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; 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 class="menu" mode="horizontal" :router="true" :default-active="menu_index" :ellipsis="false"
+        menu-trigger="click">
+        <el-menu-item index="/" class="logo">
+            <el-image class="logo1" :src="logo_1" :fit="'cover'" />
+            <el-image v-if="!local.menu_icon" class="logo2" :src="logo_2" :fit="'cover'" />
         </el-menu-item>
-        <el-menu-item v-for="item in menu_items" :index="'/' + item.index"
-            style="font-size: 18px; padding-left: 8px; padding-right: 5px">
+        <el-menu-item v-for="item in menu_items" :index="'/' + item.index" class="menuitem">
             <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 class="menumargin">
+                    <component :is="item.icon" class="menuicon" />
                 </el-icon>
             </el-tooltip>
             <span v-else style="padding-right: 5px">
                 <el-icon>
-                    <component :is="item.icon" style="width: 60px; height: 60px" />
+                    <component :is="item.icon" class="menuicon" />
                 </el-icon>{{ $t(item.content) }}
             </span>
         </el-menu-item>
         <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-menu-item :index="player_url" v-if="store.user.id != 0" @click="store.player = store.user" class="menuitem">
             <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 class="menumargin">
+                    <User class="menuicon" />
                 </el-icon>
             </el-tooltip>
             <span v-else style="padding-right: 5px">
                 <el-icon>
-                    <User style="width: 60px; height: 60px" />
+                    <User class="menuicon" />
                 </el-icon>{{ store.user.username }}
             </span>
         </el-menu-item>
-        <el-menu-item index="/settings" style="font-size: 18px; padding-left: 8px; padding-right: 8px">
+        <el-menu-item index="/settings" style="padding-left: 8px; padding-right: 5px">
             <el-tooltip :content="$t('menu.setting')">
-                <el-icon style="margin-top: 20px; margin-bottom: 20px">
-                    <Setting style="width: 60px; height: 60px" />
+                <el-icon>
+                    <Setting class="menuicon" />
                 </el-icon>
             </el-tooltip>
         </el-menu-item>
-        <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>
+        <LanguagePicker v-show="local.language_show" style="padding-left: 8px; padding-right: 8px;" />
+        <Login @login="user_login" @logout="user_logout"></Login>
     </el-menu>
     <div class="common-layout">
         <el-container>
-            <div class="header_all" style="padding-top: 0; overflow: hidden">
+            <div class="header_all" style="padding-top: 0; overflow: auto">
                 <div class="content" style="padding-top: 16px">
                     <router-view />
                 </div>
@@ -83,8 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
-import Menu from "./components/Menu.vue";
+import { ref, onMounted, computed } from "vue";
 import LanguagePicker from "./components/LanguagePicker.vue";
 import Login from "./components/Login.vue";
 // import { LoginStatus } from "@/utils/common/structInterface"
@@ -183,12 +172,36 @@ const hash_code = function (t: string) {
 
 <style lang="less">
 body {
-    overflow-y: scroll;
+    overflow: auto;
     margin: 0;
 }
 
-.logo:hover {
+</style>
+
+<style lang="less" scoped>
+
+.logo {
     cursor: pointer;
+    display: inline-flex; 
+    justify-content: center; 
+    align-items: center;
+    padding: 0px;
+    padding-left: v-bind("local.menu_height / 8 + 'px'");
+    padding-right: v-bind("local.menu_height / 8 + 'px'");
+}
+
+.logo1 {
+    width: v-bind("local.menu_height - 8 + 'px'");
+    height: v-bind("local.menu_height - 8 + 'px'");
+    padding-top: 4px;
+    padding-bottom: 4px;
+    display: inline-flex;
+}
+
+.logo2 {
+    width: v-bind("local.menu_height * 2.17 + 'px'");
+    height: v-bind("local.menu_height + 'px'");
+    display: inline-flex;
 }
 
 .header {
@@ -197,7 +210,31 @@ body {
     padding-top: 21px;
 }
 
+.menu {
+    height: v-bind("local.menu_height + 'px'");
+    position: fixed;
+    width: 100%;
+    z-index: 2010;
+    user-select: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.menuicon {
+    width: 60px;
+    height: 60px;
+}
 
+.menuitem {
+    font-size: v-bind("local.menu_font_size + 'px'");
+    padding-left: 8px;
+    padding-right: 5px;
+}
+
+.menumargin {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
 
 /*设置点击前的样式 */
 a {
@@ -217,7 +254,7 @@ a {
 }
 
 .content {
-    margin-top: 60px;
+    margin-top: v-bind("local.menu_height + 'px'");
 }
 
 .clickable:hover {

diff --git a/front_end/src/components/LanguagePicker.vue b/front_end/src/components/LanguagePicker.vue
@@ -1,6 +1,6 @@
 <template>
     <el-dropdown @command="changeLanguage" trigger="click">
-        <el-image :src="logo_lang" style="width: 24px; height: 24px; margin-top: 18px; cursor: pointer"></el-image>
+        <el-image :src="logo_lang" class="icon"></el-image>
         <template #dropdown>
             <el-dropdown-item v-for="item in options" :command="item.lang">
                 {{ item.text }}
@@ -36,3 +36,11 @@ const changeLanguage = (value: any) => {
     local.language = value;
 };
 </script>
+
+<style lang="less" scoped>
+.icon {
+    margin-top: v-bind("local.menu_height / 4 + 'px'");
+    margin-bottom: v-bind("local.menu_height / 4 + 'px'");
+    cursor: pointer;
+}
+</style>
diff --git a/front_end/src/components/Login.vue b/front_end/src/components/Login.vue
@@ -1,14 +1,17 @@
 <template>
-    <el-button v-if="store.login_status != LoginStatus.IsLogin" @click.stop="openLogin">
+    <el-button v-if="store.login_status != LoginStatus.IsLogin" @click.stop="openLogin" class="fakemenuitem" text
+        size="small">
         {{ $t('menu.login') }}
     </el-button>
-    <el-button v-if="store.login_status != LoginStatus.IsLogin" @click.stop="openRegister">
+    <el-button v-if="store.login_status != LoginStatus.IsLogin" @click.stop="openRegister" style="margin-left: 0px;"
+        class="fakemenuitem" text size="small">
         {{ $t('menu.register') }}
     </el-button>
-    <el-button v-if="store.login_status == LoginStatus.IsLogin" @click.stop="logout();">
+    <el-button v-if="store.login_status == LoginStatus.IsLogin" @click.stop="logout();" class="fakemenuitem" text
+        size="small">
         {{ $t('menu.logout') }}
     </el-button>
-    <el-dialog v-model="login_visible" :title="$t('login.title')" width="30%" align-center draggable
+    <el-dialog v-model="login_visible" :title="$t('login.title')" width="400px" align-center draggable
         :lock-scroll="false" @close='closeLogin'>
         <el-form size="default">
             <el-form-item>
@@ -41,7 +44,7 @@
                 style="cursor: pointer;color: blue;">{{ $t('login.forgetPassword') }}</div>
         </el-form>
     </el-dialog>
-    <el-dialog v-model="register_visible" :title="$t('register.title')" width="30%" align-center draggable
+    <el-dialog v-model="register_visible" :title="$t('register.title')" width="400px" align-center draggable
         :lock-scroll="false" @close='closeLogin'>
         <el-form size="default">
             <el-form-item>
@@ -92,7 +95,7 @@
             </el-form-item>
         </el-form>
     </el-dialog>
-    <el-dialog v-model="retrieve_visible" :title="$t('forgetPassword.title')" width="30%" align-center draggable
+    <el-dialog v-model="retrieve_visible" :title="$t('forgetPassword.title')" width="400px" align-center draggable
         :lock-scroll="false" @close='closeLogin'>
         <el-form size="default">
             <el-form-item>
@@ -143,8 +146,9 @@ const { proxy } = useCurrentInstance();
 import { LoginStatus } from "@/utils/common/structInterface"
 import ValidCode from "@/components/ValidCode.vue";
 import { genFileId, ElMessage } from 'element-plus'
-import { useUserStore } from '../store'
+import { useLocalStore, useUserStore } from '../store'
 const store = useUserStore()
+const local = useLocalStore()
 
 import { useI18n } from 'vue-i18n';
 const t = useI18n();
@@ -444,6 +448,7 @@ const logout = async () => {
                 username: "",
                 realname: "",
                 is_banned: false,
+                is_staff: false,
                 country: ""
             };
             store.player = {
@@ -508,14 +513,9 @@ const get_email_captcha = (type: string) => {
 </script>
 
 
-<style>
-/* input:invalid {
-    outline: 2px solid rgb(167, 11, 11);
-    border-radius: 3px;
+<style lang="less" scoped>
+.fakemenuitem {
+    height: v-bind("local.menu_height + 'px'");
+    font-size: v-bind("local.menu_font_size + 'px'"); // Somehow doesn't work
 }
-
-.el-dialog .el-dialog__body {
-    flex: 1;
-    overflow: auto;
-} */
 </style>
diff --git a/front_end/src/components/PlayerName.vue b/front_end/src/components/PlayerName.vue
@@ -1,9 +1,9 @@
 <template>
     <span @click.stop>
-        <el-popover placement="bottom" width="298px" popper-class="max-h-300px overflow-auto" @show="pop_show"
-            @hide="pop_hide" trigger="click" popper-style="background-color:rgba(250,250,250);" :show-after="0"
+        <el-popover v-if="render" placement="bottom" width="298px" popper-class="max-h-300px overflow-auto" @show="pop_show"
+            @hide="pop_hide" trigger="hover" popper-style="background-color:rgba(250,250,250);" :show-after="0"
             :hide-after="0">
-            <Wait v-show="is_loading"></Wait>
+            <Wait v-if="is_loading"></Wait>
             <div>
                 <div style="width: 80px;float: left;line-height: 200%;">
                     <el-image style="width: 72px; height: 72px;margin-top: 10px;border-radius: 8px;" :src="image_url"
@@ -38,6 +38,8 @@
                 </span>
             </template>
         </el-popover>
+        <span v-else href="" target="_blank" class="clickable" @click="render = true;">{{ data.user_name }}
+        </span>
     </span>
 </template>
 
@@ -84,7 +86,7 @@ const e_bvs_id = ref("");
 
 // 控制加载时的小圈圈
 const is_loading = ref(true);
-
+const render = ref(false);
 
 const pop_show = () => {
     image_url.value = image_url_default;
@@ -126,8 +128,6 @@ const pop_show = () => {
     }).catch(() => {
         // is_loading.value = false;
     })
-
-
 }
 
 

diff --git a/front_end/src/components/PreviewNumber.vue b/front_end/src/components/PreviewNumber.vue
@@ -3,7 +3,7 @@
         <el-dialog v-model="preview_visible"
             style="background-color: rgba(240, 240, 240, 0.48); backdrop-filter: blur(1px);" draggable align-center
             destroy-on-close :modal="false" :lock-scroll="false">
-            <iframe class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
+            <iframe v-if="preview_visible" class="flop-player-iframe flop-player-display-none" style="width: 100%; height: 500px; border: 0px"
                 src="/flop/index.html" ref="video_iframe"></iframe>
         </el-dialog>
     </Teleport>

diff --git a/front_end/src/components/VideoList.vue b/front_end/src/components/VideoList.vue
@@ -22,9 +22,9 @@
         <el-table-column prop="bv" />
         <el-table-column style="white-space: nowrap;">
             <template #default="scope">
-                <el-button v-if="review_mode" type="success" circle :icon="Check" @click="handleApprove(scope.row)" />
+                <el-button v-if="review_mode" type="success" circle :icon="Check" @click.stop="handleApprove(scope.row)" />
                 <el-button v-if="store.user.is_staff" type="danger" circle :icon="Close"
-                    @click="handleFreeze(scope.row)" />
+                    @click.stop="handleFreeze(scope.row)" />
             </template>
         </el-table-column>
         <!-- <el-table-column min-width="200">
@@ -71,7 +71,7 @@ const data = defineProps({
     review_mode: {
         type: Boolean,
         default: false
-    }
+    },
 })
 
 const emit = defineEmits(['update'])