Merge pull request eee555#65 from putianyi889/patch-50

Create IconMenuItem.vue
putianyi889 · Jul 19, 2024 · 500490c · 500490c
2 parents 038f9fb + 7e27911
commit 500490c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 37 deletions.
diff --git a/front_end/src/App.vue b/front_end/src/App.vue
@@ -8,37 +8,15 @@
                         <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" class="menuitem">
-                        <el-tooltip v-if="local.menu_icon" :content="$t(item.content)">
-                            <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" class="menuicon" />
-                            </el-icon>{{ $t(item.content) }}
-                        </span>
+                    <el-menu-item v-for="item in menu_items" :index="'/' + item.index">
+                        <IconMenuItem :text="$t(item.content)" :icon="item.icon" />
                     </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">
-                        <el-tooltip v-if="local.menu_icon" :content="store.user.username">
-                            <el-icon class="menumargin">
-                                <User class="menuicon" />
-                            </el-icon>
-                        </el-tooltip>
-                        <span v-else style="padding-right: 5px">
-                            <el-icon>
-                                <User class="menuicon" />
-                            </el-icon>{{ store.user.username }}
-                        </span>
+                        <IconMenuItem :text="store.user.username" icon="User" />
                     </el-menu-item>
                     <el-menu-item index="/settings" style="padding-left: 8px; padding-right: 5px">
-                        <el-tooltip :content="$t('menu.setting')">
-                            <el-icon>
-                                <Setting class="menuicon" />
-                            </el-icon>
-                        </el-tooltip>
+                        <IconMenuItem :text="$t('menu.setting')" icon="Setting" />
                     </el-menu-item>
                     <LanguagePicker v-show="local.language_show" style="padding-left: 8px; padding-right: 8px;" />
                     <Login @login="user_login" @logout="user_logout"></Login>
@@ -72,6 +50,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import LanguagePicker from "./components/widgets/LanguagePicker.vue";
+import IconMenuItem from "./components/widgets/IconMenuItem.vue";
 import Login from "./components/Login.vue";
 import Footer from "./components/Footer.vue";
 import PlayerDialog from "./components/PlayerDialog.vue";
@@ -219,22 +198,12 @@ body {
     display: inline-flex;
 }
 
-.menuicon {
-    width: 60px;
-    height: 60px;
-}
-
 .el-menu-item {
     font-size: v-bind("local.menu_font_size + 'px'");
     padding-left: 8px;
     padding-right: 5px;
 }
 
-.menumargin {
-    margin-top: 0px;
-    margin-bottom: 0px;
-}
-
 .mainheight {
     height: calc(100svh - v-bind("local.menu_height + 'px'"))
 }

diff --git a/front_end/src/components/widgets/IconMenuItem.vue b/front_end/src/components/widgets/IconMenuItem.vue
@@ -0,0 +1,43 @@
+<template>
+    <el-tooltip v-if="local.menu_icon" :content="props.text">
+        <el-icon class="menumargin">
+            <slot v-if="props.usehtml" />
+            <component v-else :is="props.icon" class="menuicon" />
+        </el-icon>
+    </el-tooltip>
+    <span v-else style="padding-right: 5px">
+        <el-icon>
+            <slot v-if="props.usehtml" />
+            <component v-else :is="props.icon" class="menuicon" />
+        </el-icon>{{ props.text }}
+    </span>
+</template>
+
+<script lang="ts" setup>
+
+import { useLocalStore } from "@/store";
+
+const local = useLocalStore();
+
+const props = defineProps({
+    text: String,
+    icon: String,
+    usehtml: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+</script>
+
+<style lang="less" scoped>
+.menuicon {
+    width: 60px;
+    height: 60px;
+}
+
+.menumargin {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+</style>
diff --git a/front_end/src/store/index.ts b/front_end/src/store/index.ts
@@ -29,7 +29,7 @@ export const useUserStore = defineStore('user', {
     ),
 })
 
-export const usePlayerStore = defineStore('player', {
+export const useVideoPlayerStore = defineStore('videoplayer', {
     state: () => ({
         visible: false,
         id: 0,