feat: window shadow

src-tauri/Cargo.toml

@@ -52,6 +52,7 @@ tracing = { workspace = true }
 tracing-subscriber = { workspace = true }
 server = { path = "server" }
 dotenvy = { workspace = true }
+window-shadows = "0.2.2"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/main.rs

@@ -39,6 +39,8 @@ fn main() {
     .plugin(tauri_plugin_window_state::Builder::default().build())
     .invoke_handler(tauri::generate_handler![greet, get_server,])
     .setup(|app| {
+      let window = app.get_window("main").unwrap();
+      window_shadows::set_shadow(&window, true).expect("failed to set shadow");
       let path_resolver = app.path_resolver();
       let resource_path = path_resolver
         .resolve_resource("../.env")

src/App.vue

@@ -58,7 +58,6 @@ const denseTitle = computed(() => route.name === 'lyric' || inPhone.value);
     class="w-full h-full max-h-screen flex flex-col
       text-sm text-black dark:text-white
       bg-main_w_bg dark:bg-main_d_bg"
-    :class="getPlatform() !== 'web' ? 'border-white/10 border' : ''"
   >
     <div v-if="loading" class="w-full h-full flex justify-center items-center">
       <p>

src/components/QPlayer.vue

@@ -220,7 +220,7 @@ function artistAlbum(view: Track | undefined) {
     else if (view.artist)
       return view.artist;
     else if (view.album)
-      return `${t('player.unknown-artist')} • view.album`;
+      return `${t('player.unknown-artist')} • ${view.album}`;
   }
 }
 
@@ -303,7 +303,7 @@ function setMediaSessionHandler() {
     <div class="grow flex justify-between items-center p-0.5">
       <div class="flex-1 h-full flex overflow-hidden">
         <!-- Track info (cover/title/artist...) -->
-        <HoverLayer v-if="currentTrack" class="flex items-center select-none cursor-default min-w-0" @click="onInfoCardClick()">
+        <HoverLayer v-if="currentTrack" class="flex items-center select-none cursor-default min-w-[160px] h-20" @click="onInfoCardClick()">
           <QImage
             v-if="showCardImg" :src="currentTrack ? ApiClient.get().cover_uri(currentTrack.id) : ''"
             class="object-scale-down w-[70px] h-[70px] border-white/10 border"

src/components/TitleBar.vue

@@ -3,6 +3,7 @@ import { appWindow } from '@tauri-apps/api/window';
 import { onBeforeMount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+import { useI18n } from 'vue-i18n';
 import IconUnmaximized from '~icons/fluent/square-multiple-16-regular';
 import IconMaximized from '~icons/fluent/maximize-16-regular';
 import IconClose from '~icons/fluent/dismiss-16-regular';
@@ -17,6 +18,8 @@ defineProps<{ dense?: boolean }>();
 const route = useRoute();
 const router = useRouter();
 
+const { t } = useI18n();
+
 const maximized = ref(false);
 
 inTauri(() => {
@@ -50,12 +53,12 @@ function onGoBack() {
 
 <template>
   <div data-tauri-drag-region class="h-title bg-transparent select-none cursor-default flex justify-start fixed top-0 inset-x-0">
-    <div :class="`flex justify-center items-center ${dense ? '' : 'h-14'} space-x-2`">
-      <div :class="`flex justify-center items-center ${dense ? '' : 'mx-1 rounded'} w-10 h-10 ${canGoBack ? 'hover:bg-gray-500/10' : 'opacity-25'}`" @click="onGoBack()">
+    <div class="flex justify-center items-center space-x-2" :class="dense ? '' : 'h-14'">
+      <div :class="`flex justify-center items-center ${dense ? 'h-title w-12' : 'h-10 w-10 mx-1 rounded'} ${canGoBack ? 'hover:bg-gray-500/10' : 'opacity-25'}`" @click="onGoBack()">
         <IconGoBack />
       </div>
       <img data-tauri-drag-region :src="QSyncIcon" class="w-6" alt="QSync logo">
-      <span data-tauri-drag-region class="text-sm leading-none">媒体播放器</span>
+      <span data-tauri-drag-region class="text-sm leading-none">{{ t('app-title') }}</span>
     </div>
     <div v-if="getPlatform() === 'tauri'" class="flex ml-auto">
       <div id="titlebar-minimize" class="titlebar-button hover:bg-gray-500/10" @click="onMinimize()">

src/components/typo/H1.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="text-5xl mb-2">
+  <h1 class="text-4xl mb-2">
     <slot />
   </h1>
 </template>

src/components/typo/H2.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="text-lg mt-5 mb-2">
+  <h2 class="text-xl mt-1 mb-1">
     <slot />
-  </h1>
+  </h2>
 </template>

src/layouts/Basic.vue

@@ -18,7 +18,7 @@ defineExpose({
     class="relative h-full w-full grow pb-1 overflow-auto flex flex-col px-1"
     :class="pt"
   >
-    <div class="flex justify-between px-12">
+    <div class="flex justify-between px-12 mb-3">
       <H1>{{ header }}</H1>
       <slot name="header-extra" />
     </div>

src/locales/zh-CN.yaml

@@ -59,3 +59,4 @@ track:
   local-src: 本地源
   netease-src: 网易云源
 loading: 加载中
+app-title: 媒体播放器

src/pages/Lyric.vue

@@ -38,7 +38,7 @@ const picture_url = computed(() => {
     }"
   >
     <div class="flex items-end bg-gray-800/60 backdrop-blur-2xl w-full h-full">
-      <QImage :src="picture_url" class="ml-5 mb-5 w-72 h-72 rounded ring-1 ring-white/10" :class="picture_url ? '' : 'invisible'">
+      <QImage :src="picture_url" class="ml-5 mb-5 w-64 h-64 rounded ring-1 ring-white/10" :class="picture_url ? '' : 'invisible'">
         <template #failed>
           <div class="flex items-center justify-center h-full">
             <IconMusic class="text-6xl" />