create-simpleadmin-ui 2.0.0

package/template/src/views/system/file/index.vue

@@ -0,0 +1,1031 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox, type UploadRequestOptions } from 'element-plus'
+import {
+  Refresh,
+  Search,
+  Upload,
+  Download,
+  View,
+  ZoomIn,
+  ZoomOut,
+  RefreshRight,
+  Picture,
+  Document,
+  Notebook,
+  VideoCamera,
+  Headset,
+  Box,
+  Files,
+  Reading,
+  Grid,
+  Postcard,
+} from '@element-plus/icons-vue'
+import http, { get, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+import { marked } from 'marked'
+
+interface FileItem {
+  id: number
+  fileName: string
+  originalName: string
+  contentType?: string
+  extension: string
+  size: number
+  storagePath: string
+  provider: string
+  createTime: string
+}
+
+type PreviewKind = 'image' | 'pdf' | 'video' | 'audio' | 'text' | 'markdown' | 'unsupported'
+
+const loading = ref(false)
+const uploading = ref(false)
+const previewLoading = ref(false)
+const total = ref(0)
+const list = ref<FileItem[]>([])
+const previewVisible = ref(false)
+
+const query = reactive({ pageIndex: 1, pageSize: 10, keyword: '' })
+
+const preview = reactive({
+  name: '',
+  kind: 'unsupported' as PreviewKind,
+  url: '' as string,
+  text: '',
+  size: 0,
+  contentType: '',
+  row: null as FileItem | null,
+})
+
+/** 预览缩放：1 = 100% */
+const zoom = ref(1)
+const ZOOM_MIN = 0.25
+const ZOOM_MAX = 4
+const ZOOM_STEP = 0.25
+
+/** 图片拖拽平移 */
+const pan = reactive({ x: 0, y: 0 })
+const dragging = ref(false)
+const dragStart = reactive({ x: 0, y: 0, panX: 0, panY: 0 })
+
+const pageSizeSum = computed(() => list.value.reduce((s, f) => s + (f.size || 0), 0))
+
+const canZoom = computed(() =>
+  ['image', 'pdf'].includes(preview.kind) && !previewLoading.value,
+)
+
+const zoomPercent = computed(() => `${Math.round(zoom.value * 100)}%`)
+
+const zoomTransform = computed(() => `translate(${pan.x}px, ${pan.y}px) scale(${zoom.value})`)
+
+const TEXT_MAX_BYTES = 2 * 1024 * 1024
+
+function clampZoom(v: number) {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(v * 100) / 100))
+}
+
+function resetZoom() {
+  zoom.value = 1
+  pan.x = 0
+  pan.y = 0
+}
+
+function zoomIn() {
+  zoom.value = clampZoom(zoom.value + ZOOM_STEP)
+}
+
+function zoomOut() {
+  zoom.value = clampZoom(zoom.value - ZOOM_STEP)
+}
+
+function onPreviewWheel(e: WheelEvent) {
+  if (!canZoom.value) return
+  e.preventDefault()
+  if (e.deltaY < 0) zoomIn()
+  else zoomOut()
+}
+
+function onPanStart(e: MouseEvent) {
+  if (preview.kind !== 'image' || e.button !== 0) return
+  e.preventDefault()
+  dragging.value = true
+  dragStart.x = e.clientX
+  dragStart.y = e.clientY
+  dragStart.panX = pan.x
+  dragStart.panY = pan.y
+  window.addEventListener('mousemove', onPanMove)
+  window.addEventListener('mouseup', onPanEnd)
+}
+
+function onPanMove(e: MouseEvent) {
+  if (!dragging.value) return
+  pan.x = dragStart.panX + (e.clientX - dragStart.x)
+  pan.y = dragStart.panY + (e.clientY - dragStart.y)
+}
+
+function onPanEnd() {
+  if (!dragging.value) return
+  dragging.value = false
+  window.removeEventListener('mousemove', onPanMove)
+  window.removeEventListener('mouseup', onPanEnd)
+}
+
+function normalizeExt(ext: string) {
+  return (ext || '').replace(/^\./, '').toLowerCase()
+}
+
+function formatSize(bytes: number) {
+  if (!bytes || bytes < 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  let n = bytes
+  let i = 0
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024
+    i++
+  }
+  return `${n < 10 && i > 0 ? n.toFixed(1) : Math.round(n)} ${units[i]}`
+}
+
+function resolveFileMeta(ext: string) {
+  const e = normalizeExt(ext)
+  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(e)) {
+    return { tone: 'img', icon: Picture }
+  }
+  if (e === 'pdf') return { tone: 'pdf', icon: Document }
+  if (['doc', 'docx', 'rtf', 'odt'].includes(e)) return { tone: 'doc', icon: Notebook }
+  if (['xls', 'xlsx', 'csv', 'ods'].includes(e)) return { tone: 'xls', icon: Grid }
+  if (['ppt', 'pptx', 'odp'].includes(e)) return { tone: 'ppt', icon: Postcard }
+  if (['zip', 'rar', '7z', 'gz', 'tar', 'bz2'].includes(e)) return { tone: 'zip', icon: Box }
+  if (['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'].includes(e)) return { tone: 'video', icon: VideoCamera }
+  if (['mp3', 'wav', 'aac', 'm4a', 'flac'].includes(e)) return { tone: 'audio', icon: Headset }
+  if (['md', 'markdown'].includes(e)) return { tone: 'md', icon: Reading }
+  if (
+    ['txt', 'log', 'json', 'xml', 'html', 'htm', 'css', 'js', 'ts', 'vue', 'yml', 'yaml', 'ini', 'conf', 'sql'].includes(
+      e,
+    )
+  ) {
+    return { tone: 'text', icon: Document }
+  }
+  return { tone: 'file', icon: Files }
+}
+
+function guessMime(row: FileItem) {
+  const ct = (row.contentType || '').trim()
+  if (ct && ct !== 'application/octet-stream') return ct
+  const e = normalizeExt(row.extension)
+  const map: Record<string, string> = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    bmp: 'image/bmp',
+    ico: 'image/x-icon',
+    pdf: 'application/pdf',
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+    ogg: 'video/ogg',
+    mp3: 'audio/mpeg',
+    wav: 'audio/wav',
+    aac: 'audio/aac',
+    m4a: 'audio/mp4',
+    txt: 'text/plain',
+    md: 'text/markdown',
+    json: 'application/json',
+    xml: 'application/xml',
+    csv: 'text/csv',
+    log: 'text/plain',
+    html: 'text/html',
+    htm: 'text/html',
+    css: 'text/css',
+    js: 'text/javascript',
+    ts: 'text/plain',
+    vue: 'text/plain',
+    yml: 'text/yaml',
+    yaml: 'text/yaml',
+    sql: 'text/plain',
+  }
+  return map[e] || 'application/octet-stream'
+}
+
+function resolvePreviewKind(row: FileItem): PreviewKind {
+  const e = normalizeExt(row.extension)
+  const ct = (row.contentType || '').toLowerCase()
+  if (ct.startsWith('image/') || ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(e)) {
+    return 'image'
+  }
+  if (ct === 'application/pdf' || e === 'pdf') return 'pdf'
+  if (ct.startsWith('video/') || ['mp4', 'webm', 'ogg'].includes(e)) return 'video'
+  if (ct.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'aac', 'm4a'].includes(e)) return 'audio'
+  if (ct === 'text/markdown' || ['md', 'markdown'].includes(e)) return 'markdown'
+  if (
+    ct.startsWith('text/') ||
+    ct === 'application/json' ||
+    ct === 'application/xml' ||
+    [
+      'txt',
+      'json',
+      'xml',
+      'csv',
+      'log',
+      'html',
+      'htm',
+      'css',
+      'js',
+      'ts',
+      'vue',
+      'yml',
+      'yaml',
+      'ini',
+      'conf',
+      'sql',
+    ].includes(e)
+  ) {
+    return 'text'
+  }
+  return 'unsupported'
+}
+
+/** 去掉 script / 行内事件，降低预览 HTML 风险 */
+function sanitizeHtml(html: string) {
+  return (html || '')
+    .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+}
+
+async function renderMarkdown(source: string) {
+  const html = await marked.parse(source, { gfm: true, breaks: true })
+  return sanitizeHtml(typeof html === 'string' ? html : String(html))
+}
+
+function canPreview(row: FileItem) {
+  return resolvePreviewKind(row) !== 'unsupported'
+}
+
+function revokePreviewUrl() {
+  if (preview.url) {
+    URL.revokeObjectURL(preview.url)
+    preview.url = ''
+  }
+}
+
+function resetPreview() {
+  revokePreviewUrl()
+  preview.name = ''
+  preview.kind = 'unsupported'
+  preview.text = ''
+  preview.size = 0
+  preview.contentType = ''
+  preview.row = null
+  onPanEnd()
+  resetZoom()
+}
+
+async function fetchBlob(row: FileItem) {
+  const res = await http.get(`/files/${row.id}/download`, { responseType: 'blob' })
+  const raw = res.data as Blob
+  const mime = guessMime(row)
+  return raw.type && raw.type !== 'application/octet-stream' ? raw : new Blob([raw], { type: mime })
+}
+
+async function openPreview(row: FileItem) {
+  const kind = resolvePreviewKind(row)
+  resetPreview()
+  preview.name = row.originalName || row.fileName
+  preview.kind = kind
+  preview.size = row.size
+  preview.contentType = row.contentType || guessMime(row)
+  preview.row = row
+  previewVisible.value = true
+
+  if (kind === 'unsupported') return
+
+  if ((kind === 'text' || kind === 'markdown') && row.size > TEXT_MAX_BYTES) {
+    preview.kind = 'unsupported'
+    preview.text = `文本过大（${formatSize(row.size)}），请下载后查看。`
+    return
+  }
+
+  previewLoading.value = true
+  try {
+    const blob = await fetchBlob(row)
+    if (kind === 'markdown') {
+      const source = await blob.text()
+      preview.text = await renderMarkdown(source)
+    } else if (kind === 'text') {
+      preview.text = await blob.text()
+    } else {
+      preview.url = URL.createObjectURL(blob)
+    }
+  } catch {
+    ElMessage.error('预览加载失败')
+    previewVisible.value = false
+    resetPreview()
+  } finally {
+    previewLoading.value = false
+  }
+}
+
+function onPreviewClosed() {
+  resetPreview()
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const data = await get<{ total: number; items: FileItem[] }>('/files', {
+      pageIndex: query.pageIndex,
+      pageSize: query.pageSize,
+      keyword: query.keyword || undefined,
+    })
+    total.value = data.total
+    list.value = data.items || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  query.pageIndex = 1
+  load()
+}
+
+function resetQuery() {
+  query.keyword = ''
+  query.pageIndex = 1
+  load()
+}
+
+async function customUpload(options: UploadRequestOptions) {
+  uploading.value = true
+  try {
+    const fd = new FormData()
+    fd.append('file', options.file)
+    await http.post('/files/upload', fd, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+    ElMessage.success('上传成功')
+    options.onSuccess?.({} as never)
+    load()
+  } catch (e) {
+    options.onError?.(e as never)
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function download(row: FileItem) {
+  try {
+    const blob = await fetchBlob(row)
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = row.originalName || row.fileName || 'download'
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  } catch {
+    ElMessage.error('下载失败')
+  }
+}
+
+async function remove(row: FileItem) {
+  await ElMessageBox.confirm(`确认删除文件「${row.originalName}」？`, '提示', { type: 'warning' })
+  await del('/files', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(load)
+onBeforeUnmount(() => {
+  onPanEnd()
+  revokePreviewUrl()
+})
+</script>
+
+<template>
+  <AppPage title="文件管理" description="上传、下载、预览与文件元数据维护">
+    <div class="file-stats">
+      <div class="file-stats__item">
+        <span class="file-stats__num">{{ total }}</span>
+        <span class="file-stats__label">全部文件</span>
+      </div>
+      <div class="file-stats__item file-stats__item--hit">
+        <span class="file-stats__num">{{ list.length }}</span>
+        <span class="file-stats__label">本页条数</span>
+      </div>
+      <div class="file-stats__item file-stats__item--ok">
+        <span class="file-stats__num">{{ formatSize(pageSizeSum) }}</span>
+        <span class="file-stats__label">本页合计大小</span>
+      </div>
+      <div class="file-stats__item">
+        <span class="file-stats__num">{{ uploading ? '…' : '就绪' }}</span>
+        <span class="file-stats__label">上传状态</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="query.keyword"
+        clearable
+        placeholder="搜索文件名"
+        style="width: 220px"
+        @keyup.enter="search"
+      />
+      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
+      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      <div class="toolbar__spacer" />
+      <el-upload
+        :show-file-list="false"
+        :http-request="customUpload"
+        v-permission="'system:file:upload'"
+      >
+        <el-button type="success" :icon="Upload" :loading="uploading">上传文件</el-button>
+      </el-upload>
+    </div>
+
+    <div class="table-wrap" v-loading="loading">
+      <el-table :data="list" border stripe empty-text="暂无文件">
+        <el-table-column label="文件名" min-width="220" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell" :class="{ 'is-previewable': canPreview(row) }" @click="canPreview(row) && openPreview(row)">
+              <span class="name-cell__icon" :data-tone="resolveFileMeta(row.extension).tone">
+                <el-icon :size="14">
+                  <component :is="resolveFileMeta(row.extension).icon" />
+                </el-icon>
+              </span>
+              <strong>{{ row.originalName }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="扩展名" width="90" align="center">
+          <template #default="{ row }">
+            <code class="mono">{{ row.extension || '—' }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="大小" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatSize(row.size) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contentType" label="类型" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row.contentType" class="muted">{{ row.contentType }}</span>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="存储" width="88" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" type="info">{{ row.provider || 'local' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传时间" width="170" class-name="is-datetime" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="datetime-cell">{{ formatDateTime(row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="280" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                :icon="View"
+                :disabled="!canPreview(row)"
+                v-permission="'system:file:download'"
+                @click="openPreview(row)"
+              >
+                预览
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                :icon="Download"
+                v-permission="'system:file:download'"
+                @click="download(row)"
+              >
+                下载
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:file:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="pager">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        v-model:current-page="query.pageIndex"
+        v-model:page-size="query.pageSize"
+        :page-sizes="[10, 20, 50]"
+        @current-change="load"
+        @size-change="
+          () => {
+            query.pageIndex = 1
+            load()
+          }
+        "
+      />
+    </div>
+
+    <el-dialog
+      v-model="previewVisible"
+      :title="preview.name || '文件预览'"
+      width="60%"
+      class="file-preview-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+      @closed="onPreviewClosed"
+    >
+      <div class="preview-meta">
+        <el-tag size="small" type="info">{{ preview.contentType || 'unknown' }}</el-tag>
+        <span class="muted">{{ formatSize(preview.size) }}</span>
+        <div class="preview-zoom" v-if="canZoom">
+          <el-button-group>
+            <el-button :icon="ZoomOut" :disabled="zoom <= ZOOM_MIN" @click="zoomOut" />
+            <el-button class="preview-zoom__pct" @click="resetZoom">{{ zoomPercent }}</el-button>
+            <el-button :icon="ZoomIn" :disabled="zoom >= ZOOM_MAX" @click="zoomIn" />
+            <el-button :icon="RefreshRight" title="重置" @click="resetZoom" />
+          </el-button-group>
+          <span class="muted preview-zoom__hint">滚轮缩放{{ preview.kind === 'image' ? '，按住左键拖动' : '' }}</span>
+        </div>
+      </div>
+
+      <div
+        class="preview-stage"
+        :class="{
+          'is-zoomable': canZoom,
+          'is-panning': dragging,
+          'is-image': preview.kind === 'image',
+        }"
+        v-loading="previewLoading"
+        @wheel="onPreviewWheel"
+        @mousedown="onPanStart"
+      >
+        <template v-if="!previewLoading">
+          <div
+            v-if="preview.kind === 'image' && preview.url"
+            class="preview-transform"
+            :style="{ transform: zoomTransform }"
+          >
+            <img class="preview-image" :src="preview.url" :alt="preview.name" draggable="false" />
+          </div>
+
+          <div
+            v-else-if="preview.kind === 'pdf' && preview.url"
+            class="preview-transform preview-transform--frame"
+            :style="{ transform: `scale(${zoom})`, transformOrigin: 'top center' }"
+          >
+            <iframe class="preview-frame" :src="preview.url" title="PDF 预览" />
+          </div>
+
+          <video
+            v-else-if="preview.kind === 'video' && preview.url"
+            class="preview-media"
+            :src="preview.url"
+            controls
+          />
+
+          <audio
+            v-else-if="preview.kind === 'audio' && preview.url"
+            class="preview-audio"
+            :src="preview.url"
+            controls
+          />
+
+          <div
+            v-else-if="preview.kind === 'markdown'"
+            class="preview-markdown"
+            v-html="preview.text"
+          />
+
+          <pre v-else-if="preview.kind === 'text'" class="preview-text">{{ preview.text }}</pre>
+
+          <div v-else class="preview-empty">
+            <p>{{ preview.text || '该文件类型暂不支持在线预览。' }}</p>
+            <p class="muted">可下载后使用本地应用打开（如 Office、压缩包等）。</p>
+            <el-button
+              v-if="preview.row"
+              type="primary"
+              :icon="Download"
+              v-permission="'system:file:download'"
+              @click="download(preview.row)"
+            >
+              下载文件
+            </el-button>
+          </div>
+        </template>
+      </div>
+
+      <template #footer>
+        <el-button @click="previewVisible = false">关闭</el-button>
+        <el-button
+          v-if="preview.row"
+          type="primary"
+          :icon="Download"
+          v-permission="'system:file:download'"
+          @click="download(preview.row)"
+        >
+          下载
+        </el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.file-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.file-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.file-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.file-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.file-stats__item--ok .file-stats__num {
+  color: var(--sa-accent);
+  font-size: 18px;
+}
+.file-stats__item--hit .file-stats__num {
+  color: #0369a1;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.toolbar__spacer {
+  flex: 1;
+}
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell.is-previewable {
+  cursor: pointer;
+}
+.name-cell.is-previewable:hover strong {
+  color: var(--sa-accent);
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell__icon[data-tone='img'] {
+  background: #ecfdf5;
+  color: #059669;
+}
+.name-cell__icon[data-tone='pdf'] {
+  background: #fef2f2;
+  color: #dc2626;
+}
+.name-cell__icon[data-tone='doc'] {
+  background: #eff6ff;
+  color: #2563eb;
+}
+.name-cell__icon[data-tone='xls'] {
+  background: #ecfdf5;
+  color: #047857;
+}
+.name-cell__icon[data-tone='ppt'] {
+  background: #fff7ed;
+  color: #c2410c;
+}
+.name-cell__icon[data-tone='zip'] {
+  background: #fef3c7;
+  color: #b45309;
+}
+.name-cell__icon[data-tone='video'] {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+.name-cell__icon[data-tone='audio'] {
+  background: #fdf2f8;
+  color: #db2777;
+}
+.name-cell__icon[data-tone='md'] {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+.name-cell__icon[data-tone='text'] {
+  background: #f1f5f9;
+  color: #475569;
+}
+.name-cell__icon[data-tone='file'] {
+  background: #f8fafc;
+  color: #64748b;
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.muted {
+  color: var(--sa-ink-muted);
+  font-size: 12px;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.preview-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+}
+.preview-zoom {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-left: auto;
+}
+.preview-zoom__pct {
+  min-width: 64px;
+  font-variant-numeric: tabular-nums;
+}
+.preview-zoom__hint {
+  white-space: nowrap;
+}
+.preview-stage {
+  min-height: 0;
+  height: 100%;
+  flex: 1;
+  max-height: none;
+  border: 1px solid var(--sa-border);
+  border-radius: 12px;
+  background: #0f172a0a;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.preview-stage.is-zoomable {
+  overscroll-behavior: contain;
+}
+.preview-stage.is-image {
+  cursor: grab;
+  user-select: none;
+}
+.preview-stage.is-image.is-panning {
+  cursor: grabbing;
+}
+.preview-transform {
+  transform-origin: center center;
+  will-change: transform;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.preview-stage:not(.is-panning) .preview-transform {
+  transition: transform 0.08s ease-out;
+}
+.preview-transform--frame {
+  width: 100%;
+  align-self: flex-start;
+}
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+  pointer-events: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.preview-frame {
+  width: 100%;
+  height: calc(80vh - 180px);
+  min-height: 200px;
+  border: 0;
+  background: #fff;
+  pointer-events: auto;
+}
+.preview-media {
+  width: 100%;
+  max-height: calc(80vh - 180px);
+  background: #000;
+}
+.preview-audio {
+  width: min(100%, 480px);
+  margin: 48px auto;
+  display: block;
+}
+.preview-text {
+  width: 100%;
+  margin: 0;
+  padding: 16px 18px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--sa-ink);
+  align-self: stretch;
+}
+.preview-markdown {
+  width: 100%;
+  align-self: stretch;
+  padding: 18px 22px;
+  line-height: 1.7;
+  color: var(--sa-ink-secondary);
+  overflow: auto;
+}
+.preview-markdown :deep(h1),
+.preview-markdown :deep(h2),
+.preview-markdown :deep(h3),
+.preview-markdown :deep(h4) {
+  margin: 1em 0 0.5em;
+  color: var(--sa-ink);
+  font-weight: 700;
+  line-height: 1.35;
+}
+.preview-markdown :deep(h1) {
+  font-size: 1.6em;
+  border-bottom: 1px solid var(--sa-border);
+  padding-bottom: 0.3em;
+}
+.preview-markdown :deep(h2) {
+  font-size: 1.35em;
+}
+.preview-markdown :deep(h3) {
+  font-size: 1.15em;
+}
+.preview-markdown :deep(p) {
+  margin: 0 0 0.85em;
+}
+.preview-markdown :deep(ul),
+.preview-markdown :deep(ol) {
+  margin: 0 0 0.85em;
+  padding-left: 1.5em;
+}
+.preview-markdown :deep(li) {
+  margin: 0.2em 0;
+}
+.preview-markdown :deep(blockquote) {
+  margin: 0 0 0.85em;
+  padding: 0.4em 0.9em;
+  border-left: 4px solid var(--sa-accent, #2563eb);
+  background: var(--sa-toolbar-bg, #f8fafc);
+  color: var(--sa-ink-muted);
+}
+.preview-markdown :deep(code) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  background: var(--sa-toolbar-bg, #f1f5f9);
+}
+.preview-markdown :deep(pre) {
+  margin: 0 0 0.85em;
+  padding: 12px 14px;
+  border-radius: 10px;
+  overflow: auto;
+  background: #0f172a;
+  color: #e2e8f0;
+}
+.preview-markdown :deep(pre code) {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+.preview-markdown :deep(a) {
+  color: var(--sa-accent, #2563eb);
+}
+.preview-markdown :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 0.85em;
+  font-size: 13px;
+}
+.preview-markdown :deep(th),
+.preview-markdown :deep(td) {
+  border: 1px solid var(--sa-border);
+  padding: 6px 10px;
+  text-align: left;
+}
+.preview-markdown :deep(th) {
+  background: var(--sa-toolbar-bg, #f8fafc);
+}
+.preview-markdown :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+.preview-markdown :deep(hr) {
+  border: 0;
+  border-top: 1px solid var(--sa-border);
+  margin: 1.2em 0;
+}
+.preview-empty {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--sa-ink-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+@media (max-width: 900px) {
+  .file-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.file-preview-dialog.el-dialog {
+  width: 60vw !important;
+  max-width: 60vw !important;
+  height: 80vh !important;
+  max-height: 80vh !important;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: auto !important;
+}
+.el-overlay-dialog:has(.file-preview-dialog) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.file-preview-dialog .el-dialog__body {
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.file-preview-dialog .el-dialog__footer {
+  flex-shrink: 0;
+}
+</style>