perf: move wechat account entrance to ribbon

frontend/src/components/icons/QRCode.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M20 6H6V20H20V6Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M20 28H6V42H20V28Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M42 6H28V20H42V6Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round" />
+        <path :stroke-width="props.strokeWidth" d="M29 28V42" stroke="currentColor" stroke-linecap="round" />
+        <path :stroke-width="props.strokeWidth" d="M41 28V42" stroke="currentColor" stroke-linecap="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/Ribbon.vue

@@ -15,6 +15,7 @@ import { extraTheme } from '@/utils/extra_theme.js'
 import useBrowserStore from 'stores/browser.js'
 import { useRender } from '@/utils/render.js'
 import wechatUrl from '@/assets/images/wechat_official.png'
+import QRCode from '@/components/icons/QRCode.vue'
 
 const themeVars = useThemeVars()
 const render = useRender()
@@ -82,10 +83,6 @@ const preferencesOptions = computed(() => {
             type: 'divider',
             key: 'd1',
         },
-        {
-            label: 'menu.wechat_official',
-            key: 'wechat_official',
-        },
         {
             label: 'menu.about',
             key: 'about',
@@ -106,9 +103,6 @@ const onSelectPreferenceMenu = (key) => {
         case 'report':
             BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm/issues')
             break
-        case 'wechat_official':
-            showWechat.value = true
-            break
         case 'about':
             dialogStore.openAboutDialog()
             break
@@ -158,6 +152,13 @@ const exThemeVars = computed(() => {
                 @select="onSelectPreferenceMenu">
                 <icon-button :icon="Config" :size="iconSize" :stroke-width="3" class="nav-menu-button" />
             </n-dropdown>
+            <icon-button
+                v-if="prefStore.currentLanguage === 'zh'"
+                :icon="QRCode"
+                :size="iconSize"
+                :tooltip="$t('ribbon.wechat_official')"
+                class="nav-menu-button"
+                @click="showWechat = true" />
             <icon-button
                 :icon="Github"
                 :size="iconSize"
@@ -246,7 +247,7 @@ const exThemeVars = computed(() => {
 
     .nav-menu-item {
         align-items: center;
-        padding: 10px 0;
+        padding: 10px 0 15px;
         gap: 18px;
         --wails-draggable: none;
 

frontend/src/langs/en-us.json

@@ -143,6 +143,7 @@
     "server": "Server",
     "browser": "Data Browser",
     "log": "Log",
+    "wechat_official": "Wechat Official Account",
     "github": "Github"
   },
   "dialogue": {
@@ -339,7 +340,6 @@
     "help": "Help",
     "check_update": "Check for Updates...",
     "report_bug": "Report a Bug",
-    "wechat_official": "Wechat Official Account",
     "about": "About"
   },
   "log": {

frontend/src/langs/zh-cn.json

@@ -143,6 +143,7 @@
     "server": "服务器",
     "browser": "数据浏览",
     "log": "日志",
+    "wechat_official": "微信公众号",
     "github": "Github"
   },
   "dialogue": {
@@ -339,7 +340,6 @@
     "help": "帮助",
     "check_update": "检查更新...",
     "report_bug": "报告错误",
-    "wechat_official": "微信公众号",
     "about": "关于"
   },
   "log": {