💄 Optimize file previewer

2025-11-06 19:48:45 +08:00
parent ae1ba62d1a
commit cd7894ec87
4 changed files with 160 additions and 29 deletions
--- a/app/components/AttachmentItem.vue
+++ b/app/components/AttachmentItem.vue
@@ -45,7 +45,11 @@ import { computed, ref, onMounted, watch } from "vue"
 import { decode } from "blurhash"
 import type { SnAttachment } from "~/types/api"

-const props = defineProps<{ item: SnAttachment; maxHeight?: string }>()
+const props = defineProps<{
+  item: SnAttachment
+  original?: boolean
+  maxHeight?: string
+}>()

 const itemType = computed(() => props.item.mimeType.split("/")[0] ?? "unknown")
 const blurhash = computed(() => props.item.fileMeta?.blur)
@@ -65,7 +69,7 @@ const router = useRouter()
 function openExternally() {
  // Capture image position for transition
  const img = event?.target as HTMLImageElement
-  if (img && itemType.value === 'image') {
+  if (img && itemType.value === "image") {
    const rect = img.getBoundingClientRect()
    const transitionData = {
      src: remoteSource.value,
@@ -77,16 +81,20 @@ function openExternally() {
    }

    // Store transition data
-    sessionStorage.setItem('imageTransition', JSON.stringify(transitionData))
+    sessionStorage.setItem("imageTransition", JSON.stringify(transitionData))
  }

-  router.push('/files/' + props.item.id)
+  router.push("/files/" + props.item.id)
 }

 const blurCanvas = ref<HTMLCanvasElement | null>(null)

 const apiBase = useSolarNetworkUrl()
-const remoteSource = computed(() => `${apiBase}/drive/files/${props.item.id}`)
+const remoteSource = computed(
+  () =>
+    `${apiBase}/drive/files/${props.item.id}` +
+    (props.original ? "?original=true" : "")
+)

 const blurhashContainerStyle = computed(() => {
  return {
--- a/app/components/AttachmentList.vue
+++ b/app/components/AttachmentList.vue
@@ -14,7 +14,7 @@
        class="carousel-container rounded-lg overflow-hidden"
        :style="carouselStyle"
      >
-        <v-card width="100%" border>
+        <v-card width="100%" class="transition-all duration-300" border>
          <v-carousel
            height="100%"
            hide-delimiter-background
@@ -25,9 +25,13 @@
            <v-carousel-item
              v-for="attachment in attachments"
              :key="attachment.id"
-              :src="getAttachmentUrl(attachment)"
              cover
+            >
+              <attachment-item
+                original
+                :item="attachment"
              />
+            </v-carousel-item>
          </v-carousel>
        </v-card>
      </div>
--- a/app/composables/useMarkdownProcessor.ts
+++ b/app/composables/useMarkdownProcessor.ts
@@ -12,10 +12,43 @@ export function useMarkdownProcessor() {
    // @ts-ignore
  }).use(texmath, {
    engine: katex,
-    delimiters: 'dollars',
+    delimiters: "dollars",
    katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
  })

+  const defaultParagraphRenderer =
+    processor.renderer.rules.paragraph_open ||
+    ((tokens, idx, options, env, self) =>
+      self.renderToken(tokens, idx, options))
+  processor.renderer.rules.paragraph_open = function (
+    tokens,
+    idx,
+    options,
+    env,
+    self
+  ) {
+    let result = ""
+    if (idx > 1) {
+      const inline = tokens[idx - 2]
+      const paragraph = tokens[idx]
+      if (
+        inline &&
+        inline.type === "inline" &&
+        inline.map &&
+        inline.map[1] &&
+        paragraph &&
+        paragraph.map &&
+        paragraph.map[0]
+      ) {
+        const diff = paragraph.map[0] - inline.map[1]
+        if (diff > 0) {
+          result = "<br>".repeat(diff)
+        }
+      }
+    }
+    return result + defaultParagraphRenderer(tokens, idx, options, env, self)
+  }
+
  return {
    render: (content: string) => processor.render(content)
  }
--- a/app/pages/files/[id].vue
+++ b/app/pages/files/[id].vue
@@ -13,19 +13,57 @@
        <v-row align="center" class="pa-2">
          <v-col cols="12" md="4">
            <div class="d-flex align-center gap-2">
-              <v-icon>mdi-file</v-icon>
-              <span>{{ fileInfo.name || "File" }}</span>
-            </div>
-          </v-col>
-          <v-col cols="12" md="8">
-            <div class="d-flex align-center justify-end gap-4">
-              <span>{{ fileInfo.mimeType }} ({{ fileType }})</span>
-              <span>{{ formatBytes(fileInfo.size) }}</span>
-              <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
-              <v-btn icon size="small" density="compact" @click="handleDownload">
+              <v-tooltip location="bottom" :text="fileInfo.mimeType">
+                <template #activator="{ props }">
+                  <v-icon v-bind="props" :icon="fileIcon"></v-icon>
+                </template>
+              </v-tooltip>
+              <v-tooltip location="bottom" :text="fileInfo.name || 'File'">
+                <template #activator="{ props }">
+                  <span class="line-clamp-1" v-bind="props">
+                    {{ fileInfo.name || "File" }}
+                  </span>
+                </template>
+              </v-tooltip>
+              <!-- Action buttons on mobile -->
+              <div class="d-flex d-md-none gap-2 ml-auto">
+                <v-btn
+                  icon
+                  size="small"
+                  density="compact"
+                  @click="handleDownload"
+                >
                  <v-icon>mdi-download</v-icon>
                </v-btn>
-              <v-btn icon size="small" density="compact" @click="infoDialog = true">
+                <v-btn
+                  icon
+                  size="small"
+                  density="compact"
+                  @click="infoDialog = true"
+                >
+                  <v-icon>mdi-information</v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="12" md="8" class="d-none d-md-block">
+            <div class="d-flex align-center justify-end gap-4">
+              <span>{{ formatBytes(fileInfo.size) }}</span>
+              <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
+              <v-btn
+                icon
+                size="small"
+                density="compact"
+                @click="handleDownload"
+              >
+                <v-icon>mdi-download</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                density="compact"
+                @click="infoDialog = true"
+              >
                <v-icon>mdi-information</v-icon>
              </v-btn>
            </div>
@@ -61,7 +99,6 @@
            v-if="fileType === 'image'"
            :src="fileSource"
            class="preview-image"
-            contain
          />
          <video
            v-else-if="fileType === 'video'"
@@ -115,15 +152,42 @@
    <v-dialog v-model="infoDialog" max-width="640">
      <v-card title="File Information" prepend-icon="mdi-information">
        <v-card-text>
+          <v-row>
+            <v-col cols="12" md="6">
              <div class="mb-4">
-            <b>FID</b> <span class="font-mono">#{{ fileInfo?.id }}</span>
+                <strong>File ID</strong>
+                <div class="text-xs">#{{ fileInfo?.id }}</div>
              </div>
+              <div class="mb-4">
+                <strong>File Name</strong>
+                <div class="text-xs">{{ fileInfo?.name || 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>MIME Type</strong>
+                <div class="text-xs">{{ fileInfo?.mimeType || 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>File Size</strong>
+                <div class="text-xs">{{ fileInfo?.size ? formatBytes(fileInfo.size) : 'N/A' }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-4">
+                <strong>Created At</strong>
+                <div class="text-xs">{{ fileInfo?.createdAt ? new Date(fileInfo.createdAt).toLocaleString() : 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>Encrypted</strong>
+                <div class="text-xs">{{ fileInfo?.isEncrypted ? 'Yes' : 'No' }}</div>
+              </div>
+            </v-col>
+          </v-row>
          <div class="mb-4">
            <strong>Metadata:</strong>
          </div>
          <v-card variant="outlined" class="pa-2">
            <pre
-              class="overflow-x-auto text-body-2"
+              class="overflow-x-auto text-xs"
            ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
          </v-card>
        </v-card-text>
@@ -180,7 +244,11 @@ const api = useSolarNetwork()
 const fileInfo = ref<SnCloudFile | null>(null)

 useHead({
-  title: computed(() => fileInfo.value?.name ? `${fileInfo.value.name} - File Preview` : 'File Preview')
+  title: computed(() =>
+    fileInfo.value?.name
+      ? `${fileInfo.value.name} - File Preview`
+      : "File Preview"
+  )
 })
 async function fetchFileInfo() {
  try {
@@ -196,7 +264,7 @@ async function fetchFileInfo() {
 }

 function checkForTransition() {
-  const transitionData = sessionStorage.getItem('imageTransition')
+  const transitionData = sessionStorage.getItem("imageTransition")
  if (transitionData) {
    try {
      const data = JSON.parse(transitionData)
@@ -206,20 +274,23 @@ function checkForTransition() {
      // Calculate final position (centered in viewport)
      const viewportWidth = window.innerWidth
      const viewportHeight = window.innerHeight
-      const finalWidth = Math.min(viewportWidth * 0.9, data.width * (viewportHeight / data.height))
+      const finalWidth = Math.min(
+        viewportWidth * 0.9,
+        data.width * (viewportHeight / data.height)
+      )
      const finalHeight = finalWidth / data.aspectRatio
      const finalX = (viewportWidth - finalWidth) / 2
      const finalY = (viewportHeight - finalHeight) / 2

      // Set initial position (from original image location)
      transitionStyle.value = {
-        position: 'fixed',
+        position: "fixed",
        top: `${data.y}px`,
        left: `${data.x}px`,
        width: `${data.width}px`,
        height: `${data.height}px`,
        zIndex: 9999,
-        transition: 'all 0.3s ease-out'
+        transition: "all 0.3s ease-out"
      }

      // Animate to final position
@@ -235,12 +306,12 @@ function checkForTransition() {
        // Hide transition after animation
        setTimeout(() => {
          isTransitioning.value = false
-          sessionStorage.removeItem('imageTransition')
+          sessionStorage.removeItem("imageTransition")
        }, 300)
      })
    } catch (error) {
-      console.warn('Failed to parse transition data:', error)
-      sessionStorage.removeItem('imageTransition')
+      console.warn("Failed to parse transition data:", error)
+      sessionStorage.removeItem("imageTransition")
    }
  }
 }
@@ -256,6 +327,21 @@ const fileType = computed(() => {
  if (!fileInfo.value) return "unknown"
  return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
+const fileIcon = computed(() => {
+  if (!fileInfo.value?.mimeType) return 'mdi-file'
+
+  const mime = fileInfo.value.mimeType.toLowerCase()
+
+  if (mime.startsWith('image/')) return 'mdi-file-image'
+  if (mime.startsWith('video/')) return 'mdi-file-video'
+  if (mime.startsWith('audio/')) return 'mdi-file-music'
+  if (mime === 'application/pdf') return 'mdi-file-pdf'
+  if (mime.startsWith('text/') || mime.includes('javascript') || mime.includes('json') || mime.includes('xml')) return 'mdi-file-code'
+  if (mime.includes('zip') || mime.includes('rar') || mime.includes('tar')) return 'mdi-zip-box'
+  if (mime.includes('document') || mime.includes('word') || mime.includes('excel') || mime.includes('powerpoint')) return 'mdi-file-document'
+
+  return 'mdi-file'
+})
 const fileSource = computed(() => {
  let url = `${apiBase}/drive/files/${fileId}?original=true`
  if (passcode) {