ui: improve

README.md

@@ -33,9 +33,10 @@ You can download the prebuilt installer from the newest successful build of the
 
 
 ## FIXME
+- [ ] Login logic(frontend)
 - [ ] Refactor client player
-   - Use `APlayer`
-- [x] Use git deps of and plugin dialog in `package.json `and `Cargo.toml`, because of https://github.com/tauri-apps/plugins-workspace/issues/738.
+   - Player mute state wrong.
+   - May use `APlayer`?
 
 ## Tech Stack
 

src/components/Navigator.vue

@@ -93,6 +93,18 @@ function onMenuScale() {
   else if (sizeMd.value)
     expandMenu.value = !expandMenu.value;
 }
+
+function onMenuScaleFromSearchButton() {
+  if (sizeLg.value)
+    shrinkMenu.value = true;
+  else if (sizeMd.value)
+    expandMenu.value = true;
+
+  setTimeout(() => {
+    const input = document.getElementById('nav-search') as HTMLInputElement;
+    input?.focus();
+  }, 100);
+}
 const onlyIcon = computed(() => { return sizeLg.value && shrinkMenu.value || sizeMd.value && !expandMenu.value; });
 
 const delayedOnlyIcon = ref(onlyIcon.value);
@@ -167,7 +179,7 @@ function search() {
           </QHoverButton>
         </template>
       </QInput>
-      <QHoverButton v-else class="h-10 w-10" @click="onMenuScale">
+      <QHoverButton v-else class="h-10 w-10" @click="onMenuScaleFromSearchButton">
         <IconSearch class="text-sm" />
       </QHoverButton>
     </div>

src/locales/zh-CN.yaml

@@ -60,6 +60,7 @@ track:
   local-src: 本地源
   netease-src: 网易云源
   pop: 热度
+  duration: 时长
 loading: 加载中
 app-title: 媒体播放器
 titlebar:

src/model_ext/ncm.ts

@@ -26,6 +26,7 @@ export interface NcmSong {
   cp: number
   crbt: unknown
   djld: number
+  /** duration time in millisecond (Maybe?) */
   dt: number
   entertainmentTags: unknown
   fee: number

src/pages/main/SearchResult.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useStorage } from '@vueuse/core';
 import QPivot from '~qui/pivot/QPivot.vue';
 import QPivotItem from '~qui/pivot/QPivotItem.vue';
 import { ApiClient } from '~/api/client';
@@ -11,9 +12,12 @@ import type { NcmSearchResult } from '~/model_ext/ncm';
 import QTable from '~qui/table/QTable.vue';
 import type { Column } from '~qui/table/types';
 
+import { formatTime } from '~/utils';
+
 defineProps<{
   query: string
 }>();
+
 const loading = ref(true);
 
 const tracks = ref<Track[]>([]);
@@ -32,6 +36,8 @@ watch(() => route.query, async () => {
 
 const { t } = useI18n();
 
+const pivotValue = useStorage('search-result-pivot', 'local');
+
 const localCols: Column[] = [
   { key: 'title', title: t('track.title') },
   { key: 'artist', title: t('track.artist') },
@@ -41,6 +47,9 @@ const ncmCols: Column[] = [
   { key: 'title', title: t('track.title') },
   { key: 'artist', title: t('track.artist') },
   { key: 'album', title: t('track.album') },
+  { key: 'duration', title: t('track.duration'), style: {
+    gridTemplateColumn: '48px',
+  } },
   { key: 'pop', title: t('track.pop'), style: {
     textAlign: 'right',
     gridTemplateColumn: '24px',
@@ -54,7 +63,7 @@ const ncmCols: Column[] = [
       {{ t('loading') }}
     </div>
     <div v-else class="h-full flex-1 flex">
-      <QPivot value="local" class="bg-main_bg">
+      <QPivot v-model:value="pivotValue" class="bg-main_bg">
         <QPivotItem value="local" :name="t('search-result.local-track')">
           <QTable :columns="localCols" :data="tracks" :show-head="true" :row-key="(row) => row.id">
             <template #title="{ row }">
@@ -79,6 +88,9 @@ const ncmCols: Column[] = [
             <template #album="{ row }">
               {{ row.al.name }}
             </template>
+            <template #duration="{ row }">
+              {{ formatTime(row.dt / 1000) }}
+            </template>
             <template #pop="{ row }">
               {{ row.pop }}
             </template>

src/qui/pivot/QPivot.vue

@@ -10,6 +10,10 @@ const props = defineProps<{
   value: ItemKey
 }>();
 
+const emit = defineEmits<{
+  'update:value': [value: ItemKey]
+}>();
+
 const activated = ref<ItemKey>(props.value);
 
 const tabs: Item[] = reactive([]);
@@ -34,8 +38,10 @@ provide<PivotRegister>(qPivotRegisterKey, (tab: Item) => {
 });
 
 function activate(opt: Item) {
-  if (opt)
+  if (opt) {
     activated.value = opt.key;
+    emit('update:value', opt.key);
+  }
 }
 </script>