feat: editable description field

frontend/components.d.ts

@@ -49,6 +49,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     Screen: typeof import('./src/components/Screen.vue')['default']
     ShowLoading: typeof import('./src/components/ShowLoading.vue')['default']
+    ShowOrEdit: typeof import('./src/components/ShowOrEdit.vue')['default']
     Sider: typeof import('./src/components/layout/Sider.vue')['default']
   }
 }

frontend/src/assets/css/main.css

@@ -7,4 +7,12 @@
 #app {
   width: 100vw;
   height: 100vh;
+}
+
+.ellipsis-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }

frontend/src/components/ShowOrEdit.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+      class="min-h-6"
+      @click="handleOnClick"
+  >
+    <n-input
+        v-if="isEdit"
+        ref="inputRef"
+        :value="inputValue"
+        @update:value="v => inputValue = v"
+        @change="handleChange"
+        @blur="handleChange"
+    />
+
+    <n-tooltip
+        v-else
+        trigger="hover"
+        placement="top"
+    >
+      <template #trigger>
+        <div class="ellipsis-2">{{ inputValue }}</div>
+      </template>
+      <div class="ellipsis-2">{{ inputValue }}</div>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue'
+import type { InputInst } from 'naive-ui'
+
+interface OnUpdateValue {
+  (value: string): void
+}
+
+const props = defineProps<{
+  value: string | number
+  onUpdateValue?: OnUpdateValue
+}>()
+
+const isEdit = ref(false)
+const inputRef = ref<InputInst | null>(null)
+const inputValue = ref(String(props.value))
+
+watch(
+    () => props.value,
+    v => inputValue.value = String(v)
+)
+
+function handleOnClick() {
+  isEdit.value = true
+  nextTick(() => inputRef.value?.focus())
+}
+
+function handleChange() {
+  props.onUpdateValue?.(String(inputValue.value))
+  isEdit.value = false
+}
+</script>

frontend/src/views/index.vue

@@ -151,6 +151,7 @@ import ImportJson from "@/components/ImportJson.vue"
 import {useEventStore} from "@/stores/event"
 import {BrowserOpenURL, ClipboardSetText} from "../../wailsjs/runtime"
 import Password from "@/components/Password.vue"
+import ShowOrEdit from "@/components/ShowOrEdit.vue"
 import {useI18n} from 'vue-i18n'
 import {
   DownloadOutline,
@@ -369,10 +370,12 @@ const columns = ref<any[]>([
     key: "Description",
     width: 150,
     render: (row: appType.MediaInfo, index: number) => {
-      const d = h("div", {class: "ellipsis-2",}, row.Description)
-      return h(NTooltip, {trigger: 'hover', placement: 'top'}, {
-        trigger: () => d,
-        default: () => d
+      return h(ShowOrEdit, {
+        value: row.Description,
+        onUpdateValue(v: string) {
+          data.value[index].Description = v
+          cacheData()
+        }
       })
     }
   },
@@ -961,13 +964,4 @@ const checkLoading = () => {
     }
   }, 6000)
 }
-</script>
-<style>
-.ellipsis-2 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-</style>
+</script>