mod: ui

frontend/src/App.vue

@@ -8,4 +8,8 @@ import MainLayout from "./components/MainLayout.vue";
   </v-app>
 </template>
 
-<style></style>
+<style>
+:root {
+  font-family: "Inter Variable", sans-serif;
+}
+</style>

frontend/src/components/MainLayout.vue

@@ -16,6 +16,7 @@ import {
   SetAutoAccept,
   GetSaveHistory,
   SetSaveHistory,
+  GetVersion,
 } from "../../bindings/mesh-drop/internal/config/config";
 import { Dialogs } from "@wailsio/runtime";
 
@@ -43,6 +44,7 @@ onMounted(async () => {
   hostName.value = await GetHostName();
   autoAccept.value = await GetAutoAccept();
   saveHistory.value = await GetSaveHistory();
+  version.value = await GetVersion();
 });
 
 const checkMobile = () => {
@@ -56,12 +58,13 @@ const checkMobile = () => {
 // --- 后端集成 ---
 onMounted(async () => {
   peers.value = await GetPeers();
+  peers.value = peers.value.sort((a, b) => a.name.localeCompare(b.name));
 });
 
 // --- 事件监听 ---
-
 Events.On("peers:update", (event) => {
   peers.value = event.data;
+  peers.value = peers.value.sort((a, b) => a.name.localeCompare(b.name));
 });
 
 Events.On("transfer:refreshList", async () => {
@@ -117,6 +120,7 @@ const changeSavePath = async () => {
 const hostName = ref("");
 const autoAccept = ref(false);
 const saveHistory = ref(false);
+const version = ref("");
 
 // --- 操作 ---
 
@@ -281,6 +285,14 @@ const handleMenuClick = (key: string) => {
                 ></v-switch
               ></template>
             </v-list-item>
+            <v-list-item title="Version">
+              <template #prepend>
+                <v-icon icon="mdi-information"></v-icon>
+              </template>
+              <template #append
+                ><div class="text-grey">{{ version }}</div></template
+              >
+            </v-list-item>
           </v-list>
         </div>
       </v-container>

frontend/src/components/PeerCard.vue

@@ -225,16 +225,30 @@ const handleSendFiles = () => {
         </v-chip>
 
         <!-- Multiple IP Selector -->
-        <div v-else-if="ips.length > 1" style="width: 150px">
-          <v-select
-            v-model="selectedIp"
-            :items="ips"
-            density="compact"
-            hide-details
-            variant="outlined"
-            single-line
-          ></v-select>
-        </div>
+        <v-menu v-else-if="ips.length > 1">
+          <template #activator="{ props }">
+            <v-chip
+              v-bind="props"
+              size="small"
+              color="info"
+              label
+              link
+              append-icon="mdi-menu-down"
+            >
+              {{ selectedIp }}
+            </v-chip>
+          </template>
+          <v-list density="compact">
+            <v-list-item
+              v-for="ip in ips"
+              :key="ip"
+              :value="ip"
+              @click="selectedIp = ip"
+            >
+              <v-list-item-title>{{ ip }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
 
         <!-- No Route -->
         <v-chip v-else color="warning" size="small" label> No Route </v-chip>

frontend/src/main.ts

@@ -5,19 +5,22 @@
  */
 
 // Plugins
-import { registerPlugins } from '@/plugins'
+import { registerPlugins } from "@/plugins";
 
 // Components
-import App from './App.vue'
+import App from "./App.vue";
 
 // Composables
-import { createApp } from 'vue'
+import { createApp } from "vue";
 
 // Styles
-import 'unfonts.css'
+// import "unfonts.css";
 
-const app = createApp(App)
+// Fonts
+import "@fontsource-variable/inter";
 
-registerPlugins(app)
+const app = createApp(App);
 
-app.mount('#app')
+registerPlugins(app);
+
+app.mount("#app");