From 6396032e55c56c758f4e79189e6eea66cfab16e1 Mon Sep 17 00:00:00 2001
From: nekosu <liao.hy@outlook.com>
Date: Tue, 15 Aug 2023 00:14:44 +0800
Subject: [PATCH] feat: view png

---
 .../src/components/atomic/ImageHover.vue      | 23 ++++--------------
 .../client/src/components/tree/TaskTree.vue   |  3 +--
 packages/client/src/data/filesystem.ts        | 24 ++++++++++++++++++-
 packages/client/src/views/EditView.vue        | 19 ++++++++++++---
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/atomic/ImageHover.vue b/packages/client/src/components/atomic/ImageHover.vue
index 87035d1..9e8151a 100644
--- a/packages/client/src/components/atomic/ImageHover.vue
+++ b/packages/client/src/components/atomic/ImageHover.vue
@@ -2,27 +2,12 @@
 import { NAvatar, NPopover } from 'naive-ui'
 import { computed } from 'vue'
 
-import { type Path, fs, pool } from '@/filesystem'
+import { makePngUrl } from '@/data'
 
 const props = defineProps<{
   url: string | string[]
 }>()
 
-function makeUrl(v: string | null) {
-  const fallback = '/favicon-32x32.png'
-  if (v && v.endsWith('.png')) {
-    // TODO: maybe check?
-    const hash = fs.tree.readFile(v as Path)
-    if (hash) {
-      const url = pool.query(hash)
-      if (url) {
-        return url
-      }
-    }
-  }
-  return fallback
-}
-
 const first = computed(() => {
   return props.url instanceof Array
     ? props.url.length > 0
@@ -37,15 +22,15 @@ const first = computed(() => {
     <template #trigger>
       <!-- <img :src="url" /> -->
       <div class="w-8 h-8 flex justify-center items-center">
-        <NAvatar object-fit="contain" :src="makeUrl(first)"></NAvatar>
+        <NAvatar object-fit="contain" :src="makePngUrl(first)"></NAvatar>
       </div>
     </template>
 
     <div class="flex flex-col items-center">
       <template v-if="props.url instanceof Array">
-        <img v-for="(u, i) in props.url" :key="i" :src="makeUrl(u)" />
+        <img v-for="(u, i) in props.url" :key="i" :src="makePngUrl(u)" />
       </template>
-      <img v-else :src="makeUrl(first)" />
+      <img v-else :src="makePngUrl(first)" />
     </div>
   </NPopover>
 </template>
diff --git a/packages/client/src/components/tree/TaskTree.vue b/packages/client/src/components/tree/TaskTree.vue
index 7eae646..028f23a 100644
--- a/packages/client/src/components/tree/TaskTree.vue
+++ b/packages/client/src/components/tree/TaskTree.vue
@@ -53,7 +53,6 @@ function handleDrop({ node, dragNode, dropPosition }: TreeDropInfo) {
   const [td, tf, th] = path.divide(toKey)
   if (path.key_is_dir(fromKey)) {
     // dragging directory
-
     switch (dropPosition) {
       case 'inside': {
         if (!path.key_is_dir(toKey)) {
@@ -160,7 +159,7 @@ function handleDrop({ node, dragNode, dropPosition }: TreeDropInfo) {
 <template>
   <div class="flex flex-col gap-2 flex-1 min-h-0">
     <div class="flex gap-2">
-      <NInput v-model:value="searchText" placeholder="task">
+      <NInput v-model:value="searchText" placeholder="task" clearable>
         <template #prefix>
           <NIcon>
             <SearchOutlined></SearchOutlined>
diff --git a/packages/client/src/data/filesystem.ts b/packages/client/src/data/filesystem.ts
index 15d8013..99bade8 100644
--- a/packages/client/src/data/filesystem.ts
+++ b/packages/client/src/data/filesystem.ts
@@ -1,13 +1,35 @@
 import type { TreeOption, TreeSelectOption } from 'naive-ui'
 import { computed, ref } from 'vue'
 
-import { type PathKey, type PathSegments, fs, path } from '@/filesystem'
+import {
+  type Path,
+  type PathKey,
+  type PathSegments,
+  fs,
+  path,
+  pool
+} from '@/filesystem'
 import type { TaskData } from '@/types'
 
 export const expandKey = ref<PathKey[]>(['/' as PathKey])
 export const renameKey = ref<string | null>(null)
 export const renameInto = ref<string | null>(null)
 
+export function makePngUrl(v: string | null) {
+  const fallback = '/favicon-32x32.png'
+  if (v && v.endsWith('.png')) {
+    // TODO: maybe check?
+    const hash = fs.tree.readFile(v as Path)
+    if (hash) {
+      const url = pool.query(hash)
+      if (url) {
+        return url
+      }
+    }
+  }
+  return fallback
+}
+
 export const filesystemTree = computed<TreeOption>(() => {
   const rootOption: TreeOption = {
     key: '/',
diff --git a/packages/client/src/views/EditView.vue b/packages/client/src/views/EditView.vue
index c811053..fe65675 100644
--- a/packages/client/src/views/EditView.vue
+++ b/packages/client/src/views/EditView.vue
@@ -2,7 +2,6 @@
 import {
   BuildOutlined,
   CropOutlined,
-  EditOutlined,
   FileDownloadOutlined,
   FileUploadOutlined,
   NavigateBeforeOutlined,
@@ -16,8 +15,8 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { onEnterRename } from '@/components/tree/TaskTreeAction'
-import { active, getTask, history, setTask } from '@/data'
-import { type PathKey, fs } from '@/filesystem'
+import { active, getTask, history, makePngUrl, setTask } from '@/data'
+import { fs } from '@/filesystem'
 import { loadFS, saveCfg, saveFS } from '@/loader'
 
 import TaskEdit from '@/components/TaskEdit.vue'
@@ -147,6 +146,20 @@ onUnmounted(() => {
           "
         ></TaskEdit>
       </template>
+      <template
+        v-else-if="
+          active && active.endsWith('.png') && fs.tree.existsFile(active)
+        "
+      >
+        <div class="flex flex-col gap-4 max-h-full">
+          <div class="flex justify-center gap-2 items-center">
+            <span class="text-lg"> {{ active }} </span>
+          </div>
+          <div class="flex justify-center">
+            <img :src="makePngUrl(active)" />
+          </div>
+        </div>
+      </template>
     </NCard>
   </MainLayout>
 </template>