feat TMDBID搜索

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/components/cards/TmdbSelectorCard.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import api from '@/api'
+import type { MediaInfo } from '@/api/types'
+
+// update:modelValue 事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const items = ref<{}[]>([])
+
+// 搜索词
+const keyword = ref('')
+
+// 加载中
+const loading = ref(false)
+
+// 选中条目
+function selectMedia(item: MediaInfo) {
+  console.log(item)
+  emit('update:modelValue', item.tmdb_id)
+  emit('close')
+}
+
+// 搜索词条
+async function searchMedias() {
+  if (!keyword)
+    return
+
+  // 调用API搜索词条
+  try {
+    loading.value = true
+    const result: MediaInfo[] = await api.get('media/search', {
+      params: {
+        title: keyword.value,
+        page: 1,
+        count: 20,
+      },
+    })
+
+    // 清空
+    items.value = []
+
+    // 赋值
+    for (const item of result) {
+      if (items.value.length > 0)
+        items.value.push({ type: 'divider', inset: true })
+      items.value.push({
+        prependAvatar: item.poster_path,
+        title: `${item.title}（${item.year}）`,
+        subtitle: `<span class="text-primary">${item.type}</span> ${item.overview}`,
+        onClick: () => selectMedia(item),
+      })
+    }
+    loading.value = false
+  }
+  catch (e) {
+    console.error(e)
+  }
+}
+</script>
+
+<template>
+  <VCard
+    class="mx-auto"
+    min-width="30rem"
+  >
+    <VToolbar flat dense>
+      <VTextField
+        v-model="keyword"
+        density="compact"
+        label="输入名称搜索"
+        single-line
+        hide-details
+        flat
+        class="mx-3"
+        append-inner-icon="mdi-magnify"
+        :loading="loading"
+        @click:append-inner="searchMedias"
+        @keydown.enter="searchMedias"
+      />
+    </VToolbar>
+
+    <VList
+      v-if="items.length > 0"
+      :items="items"
+      item-props
+      lines="three"
+    >
+      <template #subtitle="{ subtitle }">
+        <div v-html="subtitle" />
+      </template>
+    </VList>
+  </VCard>
+</template>

src/components/filebrowser/List.vue

@@ -10,6 +10,7 @@ import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
 import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
+import TmdbSelectorCard from '@/components/cards/TmdbSelectorCard.vue'
 
 // 输入参数
 const inProps = defineProps({
@@ -92,6 +93,9 @@ const nameTestResult = ref<Context>()
 // 识别结果对话框
 const nameTestDialog = ref(false)
 
+// TMDB选择对话框
+const tmdbSelectorDialog = ref(false)
+
 // 生成1到50季的下拉框选项
 const seasonItems = ref(
   Array.from({ length: 51 }, (_, i) => i).map(item => ({
@@ -667,6 +671,8 @@ onMounted(() => {
                 label="TMDBID"
                 placeholder="留空自动识别"
                 :rules="[numberValidator]"
+                append-inner-icon="mdi-magnify"
+                @click:append-inner="tmdbSelectorDialog = true"
               />
             </VCol>
             <VCol
@@ -722,10 +728,10 @@ onMounted(() => {
         </VForm>
       </VCardText>
       <VCardActions>
-        <div class="flex-grow-1" />
         <VBtn depressed @click="transferPopper = false">
           取消
         </VBtn>
+        <VSpacer />
         <VBtn
           @click="transfer"
         >
@@ -766,6 +772,17 @@ onMounted(() => {
       </VCardItem>
     </vCard>
   </vDialog>
+  <!-- TMDB ID搜索框 -->
+  <vDialog
+    v-model="tmdbSelectorDialog"
+    width="600"
+    scrollable
+  >
+    <TmdbSelectorCard
+      v-model="transferForm.tmdbid"
+      @close="tmdbSelectorDialog = false"
+    />
+  </vDialog>
 </template>
 
 <style lang="scss" scoped>

src/components/filebrowser/Toolbar.vue

@@ -180,9 +180,3 @@ const sortIcon = computed(() => {
     </VDialog>
   </VToolbar>
 </template>
-
-<style lang="scss" scoped>
-.v-toolbar{
-  background: rgb(var(--v-table-header-background));
-}
-</style>

src/components/filebrowser/Tree.vue

@@ -35,6 +35,7 @@ function init() {
     name: 'root',
     children: [],
     size: 0,
+    modify_time: 0,
   }]
 }
 

src/styles/styles.scss

@@ -122,3 +122,7 @@
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
 }
+
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
+}

src/views/reorganize/TransferHistoryView.vue

@@ -5,6 +5,7 @@ import { useConfirm } from 'vuetify-use-dialog'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
 import type { TransferHistory } from '@/api/types'
+import TmdbSelectorCard from '@/components/cards/TmdbSelectorCard.vue'
 
 // 确认框
 const createConfirm = useConfirm()
@@ -71,6 +72,9 @@ const progressText = ref('请稍候 ...')
 // 进度值
 const progressValue = ref(0)
 
+// TMDB选择对话框
+const tmdbSelectorDialog = ref(false)
+
 // 获取订阅列表数据
 async function fetchData({
   page,
@@ -412,6 +416,8 @@ const dropdownItems = ref([
               v-model="redoTmdbId"
               label="TMDB编号"
               :rules="[requiredValidator, numberValidator]"
+              append-inner-icon="mdi-magnify"
+              @click:append-inner="tmdbSelectorDialog = true"
             />
           </VCol>
         </VRow>
@@ -455,6 +461,17 @@ const dropdownItems = ref([
       </vCardText>
     </vCard>
   </vDialog>
+  <!-- TMDB ID搜索框 -->
+  <vDialog
+    v-model="tmdbSelectorDialog"
+    width="600"
+    scrollable
+  >
+    <TmdbSelectorCard
+      v-model="redoTmdbId"
+      @close="tmdbSelectorDialog = false"
+    />
+  </vDialog>
 </template>
 
 <style lang="scss">