feat: big update

src/components/LanguageSelector.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="language-selector">
+    <earth-icon class="icon" size="32" />
+    <t-select borderless auto-width :value="locale" @change="handleLocaleChange">
+      <t-option
+        v-for="option in localeOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </t-select>
+  </div>
+</template>
+
+<script setup>
+import { useLocale } from '@/utils/i18n'
+import { EarthIcon } from 'tdesign-icons-vue-next'
+
+const { locale, localeOptions, changeLocale } = useLocale()
+
+function handleLocaleChange(newLocale) {
+  changeLocale(newLocale)
+}
+</script>
+
+<style scoped>
+.language-selector {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.language-selector .icon {
+  color: var(--td-brand-color);
+}
+</style>

src/components/NavBar.vue

@@ -29,7 +29,7 @@
               :max-height="400"
               direction="left"
             >
-              <t-avatar class="user-avatar" :size="32">
+              <t-avatar class="user-avatar" size="32">
                 <template #icon>
                   <UserIcon />
                 </template>
@@ -50,6 +50,13 @@
                   <span>{{ $t('navbar.item.dashboard') }}</span>
                 </t-dropdown-item>
 
+                <t-dropdown-item value="language" @click="languageDialogVisible = true">
+                  <template #prefixIcon>
+                    <TranslateIcon />
+                  </template>
+                  <span>{{ $t('navbar.item.language') }}</span>
+                </t-dropdown-item>
+
                 <t-dropdown-item
                   value="logout"
                   theme="error"
@@ -71,15 +78,38 @@
         </div>
       </template>
     </t-head-menu>
+
+    <t-dialog
+      v-model:visible="languageDialogVisible"
+      :header="$t('navbar.item.language')"
+      :close-btn="true"
+      :footer="false"
+      attach="body"
+      width="360px"
+    >
+      <div class="language-dialog-content">
+        <LanguageSelector />
+      </div>
+    </t-dialog>
   </t-header>
 </template>
 
 <script setup>
-import { UserIcon, LoginIcon, LogoutIcon, Dashboard1Icon } from 'tdesign-icons-vue-next'
+import { ref } from 'vue'
+import {
+  UserIcon,
+  LoginIcon,
+  LogoutIcon,
+  Dashboard1Icon,
+  TranslateIcon,
+} from 'tdesign-icons-vue-next'
 import { useAuthStore } from '@/stores/auth'
 import { MessagePlugin } from 'tdesign-vue-next'
+import LanguageSelector from '@/components/LanguageSelector.vue'
 
 const authStore = useAuthStore()
+
+const languageDialogVisible = ref(false)
 </script>
 
 <style scoped>
@@ -93,6 +123,8 @@ const authStore = useAuthStore()
 }
 
 .nav-bar {
+  width: 100%;
+  box-sizing: border-box;
   background-color: transparent;
 }
 
@@ -117,4 +149,11 @@ const authStore = useAuthStore()
 .user-avatar {
   cursor: pointer;
 }
+
+.language-dialog-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+}
 </style>

src/components/PageFooter.vue

@@ -26,17 +26,7 @@
     <div class="footer-bottom">
       <span>© {{ currentYear }} NettedX {{ t('footer.rights') }}</span>
 
-      <div class="language-selector">
-        <earth-icon class="icon" size="32" />
-        <t-select borderless auto-width :value="locale" @change="handleLocaleChange">
-          <t-option
-            v-for="option in localeOptions"
-            :key="option.value"
-            :label="option.label"
-            :value="option.value"
-          />
-        </t-select>
-      </div>
+      <LanguageSelector />
     </div>
 
     <div class="language-wrapper"></div>
@@ -46,14 +36,10 @@
 <script setup>
 import { computed } from 'vue'
 import { useLocale } from '@/utils/i18n'
-import { EarthIcon } from 'tdesign-icons-vue-next'
-const { locale, t, localeOptions, changeLocale } = useLocale()
+import LanguageSelector from '@/components/LanguageSelector.vue'
+const { t } = useLocale()
 
 const currentYear = computed(() => new Date().getFullYear())
-
-function handleLocaleChange(newLocale) {
-  changeLocale(newLocale)
-}
 </script>
 
 <style scoped>
@@ -137,15 +123,4 @@ function handleLocaleChange(newLocale) {
   padding: 1rem 0;
   box-sizing: border-box;
 }
-
-.language-selector {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.language-selector .icon {
-  color: var(--td-brand-color);
-}
 </style>

src/components/SiderBar.vue

@@ -0,0 +1,71 @@
+<template>
+  <t-aside style="border-top: 1px solid var(--component-border)">
+    <t-menu theme="light" v-model="selectedValue" style="margin-right: 50px" height="550px">
+      <t-menu-item v-for="item in menuItems" :key="item.value" :value="item.value" :to="item.path">
+        <template #icon>
+          <t-icon :name="item.icon" />
+        </template>
+        {{ item.label }}
+      </t-menu-item>
+    </t-menu>
+  </t-aside>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useLocale } from '@/utils/i18n'
+import { useRoute } from 'vue-router'
+
+const { t } = useLocale()
+
+const route = useRoute()
+
+const selectedValue = ref('dashboard')
+
+const menuItems = computed(() => [
+  {
+    value: 'dashboard',
+    label: t('menu.dashboard'),
+    icon: 'dashboard',
+    path: '/dashboard',
+  },
+  {
+    value: 'send',
+    label: t('menu.send'),
+    icon: 'send',
+    path: '/send',
+  },
+  {
+    value: 'transactions',
+    label: t('menu.transactions'),
+    icon: 'tree-list',
+    path: '/transactions',
+  },
+  {
+    value: 'verify',
+    label: t('menu.verify'),
+    icon: 'verified',
+    path: '/verify',
+  },
+  {
+    value: 'account',
+    label: t('menu.account'),
+    icon: 'user',
+    path: '/account',
+  },
+])
+
+// 根据route的路径来设置选中的菜单项
+watch(
+  () => route.path,
+  (newPath) => {
+    const selectedItem = menuItems.value.find((item) => newPath.startsWith(item.path))
+    if (selectedItem) {
+      selectedValue.value = selectedItem.value
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped></style>