FileShare/FileShare-Web-VUE/src/components/ClientPage.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { api, type BrowseDirectoryResponse, type FileRecordDto, type LibraryRootDto, type TextPreviewDto } from '../api'
import BreadcrumbNav from './client/BreadcrumbNav.vue'
import BrowseToolbar from './client/BrowseToolbar.vue'
import ClientHeader from './client/ClientHeader.vue'
import FileCard from './client/FileCard.vue'
import FileListItem from './client/FileListItem.vue'
import MobilePager from './client/MobilePager.vue'
import RootPicker from './client/RootPicker.vue'
import RootTabs from './client/RootTabs.vue'
import SelectedMediaPlayerHost from './client/SelectedMediaPlayerHost.vue'
import ViewToggle from './client/ViewToggle.vue'
import QrCodeModal from './QrCodeModal.vue'

type MediaPlayerHandle = {
  getVideoElement: () => HTMLVideoElement | null
  playVideo: () => Promise<void> | undefined
  resetVideo: () => void
}

const roots = ref<LibraryRootDto[]>([])
const browseData = ref<BrowseDirectoryResponse | null>(null)
const selectedFile = ref<FileRecordDto | null>(null)
const textPreview = ref<TextPreviewDto | null>(null)
const loading = ref(false)
const errorMessage = ref('')

const rootId = ref<number | undefined>()
const browsePath = ref<string[]>([])
const isBrowsingRoots = ref(true)

const activeTab = ref<'recent-added' | 'recent-played' | 'libraries'>('libraries')
const recentFiles = ref<FileRecordDto[]>([])
const recentLoading = ref(false)
const viewMode = ref<'list' | 'grid'>('list')

const qrModal = ref<InstanceType<typeof QrCodeModal> | null>(null)
const mediaPlayer = ref<MediaPlayerHandle | MediaPlayerHandle[] | null>(null)

const searchQuery = ref('')
const searchResults = ref<FileRecordDto[]>([])
const searchLoading = ref(false)
const isSearching = ref(false)
const searchPage = ref(1)
const searchPageSize = ref(10)
const searchTotal = ref(0)
const searchTotalPages = ref(0)

const filterType = ref<'all' | 'video' | 'audio' | 'text'>('all')
const sortBy = ref<'name' | 'size' | 'created' | 'type'>('name')
const sortDirection = ref<'asc' | 'desc'>('asc')
const browsePage = ref(1)
const browsePageSize = ref(10)

const resumePosition = ref(0)
const showResumePrompt = ref(false)
const resumeRequested = ref(false)
let lastPositionSave = 0

const activeRoots = computed(() => roots.value.filter((root) => root.isEnabled && root.isAvailable))
const selectedRoot = computed(() => roots.value.find((root) => root.id === selectedFile.value?.libraryRootId))
const currentBrowsePath = computed(() => browsePath.value.join('/'))

const breadcrumbs = computed(() => {
  const root = roots.value.find((r) => r.id === rootId.value)
  const items = [{ label: root?.displayName ?? '文件库', path: '' }]
  browsePath.value.forEach((label, index) => {
    items.push({
      label,
      path: browsePath.value.slice(0, index + 1).join('/'),
    })
  })
  return items
})

const displayedFiles = computed(() => browseData.value?.files ?? [])

const selectedMediaUrl = computed(() => selectedFile.value ? api.mediaUrl(selectedFile.value.streamUrl) : '')
const selectedThumbnailUrl = computed(() =>
  selectedFile.value?.thumbnailUrl ? api.thumbnailUrl(selectedFile.value.thumbnailUrl) : ''
)

const clientTitle = computed(() => {
  if (activeTab.value === 'recent-added') return '最近添加'
  if (activeTab.value === 'recent-played') return '最近播放'
  if (isBrowsingRoots.value) return '文件库'
  const root = roots.value.find((r) => r.id === rootId.value)
  const dir = browsePath.value.length > 0 ? browsePath.value[browsePath.value.length - 1] : ''
  return dir || (root?.displayName ?? '文件')
})

function getVideoElement() {
  const player = Array.isArray(mediaPlayer.value) ? mediaPlayer.value[0] : mediaPlayer.value
  return player?.getVideoElement() ?? null
}

function getMediaPlayer() {
  return Array.isArray(mediaPlayer.value) ? mediaPlayer.value[0] : mediaPlayer.value
}

function setError(error: unknown) {
  errorMessage.value = error instanceof Error ? error.message : '操作失败'
}

async function loadRoots() {
  roots.value = await api.getRoots()
}

async function browseDirectory() {
  if (!rootId.value) return
  try {
    errorMessage.value = ''
    loading.value = true
    browseData.value = await api.browseDirectory({
      rootId: rootId.value,
      path: currentBrowsePath.value,
      page: browsePage.value,
      pageSize: browsePageSize.value,
      mediaType: filterType.value,
      sortBy: sortBy.value,
      sortDirection: sortDirection.value,
    })
  } catch (error) {
    setError(error)
  } finally {
    loading.value = false
  }
}

async function loadRecentFiles(type: string) {
  try {
    errorMessage.value = ''
    recentLoading.value = true
    recentFiles.value = await api.getRecentFiles(type, 24)
  } catch (error) {
    setError(error)
  } finally {
    recentLoading.value = false
  }
}

function switchTab(tab: 'recent-added' | 'recent-played' | 'libraries') {
  flushVideoProgress()
  activeTab.value = tab
  isBrowsingRoots.value = true
  browseData.value = null
  selectedFile.value = null
  textPreview.value = null
  if (tab === 'recent-added') loadRecentFiles('added')
  else if (tab === 'recent-played') loadRecentFiles('played')
}

async function enterRoot(id: number) {
  flushVideoProgress()
  rootId.value = id
  isBrowsingRoots.value = false
  browsePath.value = []
  browsePage.value = 1
  selectedFile.value = null
  textPreview.value = null
  activeTab.value = 'libraries'
  await browseDirectory()
}

function backToRoots() {
  flushVideoProgress()
  isBrowsingRoots.value = true
  rootId.value = undefined
  browseData.value = null
  browsePath.value = []
  browsePage.value = 1
  selectedFile.value = null
  textPreview.value = null
  activeTab.value = 'libraries'
}

async function navigateTo(path: string) {
  flushVideoProgress()
  browsePath.value = path === '' ? [] : path.split('/')
  selectedFile.value = null
  textPreview.value = null
  browsePage.value = 1
  await browseDirectory()
}

async function enterSubdirectory(name: string) {
  flushVideoProgress()
  browsePath.value.push(name)
  selectedFile.value = null
  textPreview.value = null
  browsePage.value = 1
  await browseDirectory()
}

async function changeFilter(type: 'all' | 'video' | 'audio' | 'text') {
  flushVideoProgress()
  filterType.value = type
  browsePage.value = 1
  selectedFile.value = null
  textPreview.value = null
  await browseDirectory()
}

async function changeSortBy(value: 'name' | 'size' | 'created' | 'type') {
  sortBy.value = value
  await changeSort()
}

async function changeSortDirection(value: 'asc' | 'desc') {
  sortDirection.value = value
  await changeSort()
}

async function changeSort() {
  flushVideoProgress()
  browsePage.value = 1
  selectedFile.value = null
  textPreview.value = null
  await browseDirectory()
}

async function changeBrowsePage(page: number) {
  if (!browseData.value) return
  const nextPage = Math.min(Math.max(page, 1), Math.max(browseData.value.totalPages, 1))
  if (nextPage === browsePage.value) return
  flushVideoProgress()
  browsePage.value = nextPage
  selectedFile.value = null
  textPreview.value = null
  await browseDirectory()
}

async function doSearch(page = 1) {
  const keyword = searchQuery.value.trim()
  if (!keyword) return
  try {
    errorMessage.value = ''
    searchLoading.value = true
    isSearching.value = true
    searchPage.value = Math.max(page, 1)
    const response = await api.searchFiles({ page: searchPage.value, pageSize: searchPageSize.value, keyword })
    searchResults.value = response.items
    searchTotal.value = response.total
    searchTotalPages.value = response.totalPages
  } catch (error) {
    setError(error)
  } finally {
    searchLoading.value = false
  }
}

async function changeSearchPage(page: number) {
  const nextPage = Math.min(Math.max(page, 1), Math.max(searchTotalPages.value, 1))
  if (nextPage === searchPage.value) return
  flushVideoProgress()
  selectedFile.value = null
  textPreview.value = null
  await doSearch(nextPage)
}

function exitSearch() {
  flushVideoProgress()
  isSearching.value = false
  searchQuery.value = ''
  searchResults.value = []
  searchPage.value = 1
  searchTotal.value = 0
  searchTotalPages.value = 0
}

function updatePlaybackPosition(id: number, position: number) {
  if (selectedFile.value?.id === id) {
    selectedFile.value.playbackPosition = position
  }

  for (const files of [searchResults.value, recentFiles.value, browseData.value?.files]) {
    const file = files?.find((item) => item.id === id)
    if (file) {
      file.playbackPosition = position
    }
  }
}

function saveVideoProgress(position?: number) {
  if (!selectedFile.value || selectedFile.value.mediaType !== 'video') return
  const video = getVideoElement()
  if (!video) return

  const rawPosition = position ?? video.currentTime
  if (!Number.isFinite(rawPosition)) return

  const nextPosition = Math.floor(rawPosition)
  if (!Number.isFinite(nextPosition) || nextPosition < 0) return

  const fileId = selectedFile.value.id
  api.saveFileProgress(fileId, nextPosition)
    .then(() => updatePlaybackPosition(fileId, nextPosition))
    .catch(() => {})
}

function flushVideoProgress() {
  const video = getVideoElement()
  if (!video || video.currentTime === 0 || !Number.isFinite(video.currentTime) || video.ended) return
  saveVideoProgress()
}

function handleVideoTimeUpdate() {
  const video = getVideoElement()
  if (!video || video.paused || video.currentTime === 0 || !Number.isFinite(video.currentTime)) return

  const now = Date.now()
  if (now - lastPositionSave < 5000) return
  lastPositionSave = now
  saveVideoProgress()
}

function handleVideoPause() {
  flushVideoProgress()
}

function handleVideoPlay() {
  if (showResumePrompt.value && resumePosition.value > 0) {
    resumeRequested.value = true
  }
  seekToResumePosition()
  showResumePrompt.value = false
}

function handleVideoEnded() {
  saveVideoProgress(0)
}

function resetResume() {
  resumePosition.value = 0
  resumeRequested.value = false
  showResumePrompt.value = false
}

function tryResume(file: FileRecordDto) {
  if (file.mediaType !== 'video' || !file.playbackPosition || file.playbackPosition <= 0) return
  resumePosition.value = file.playbackPosition
  resumeRequested.value = false
  showResumePrompt.value = true
}

function seekToResumePosition() {
  const video = getVideoElement()
  if (!video || !resumeRequested.value || resumePosition.value <= 0 || video.readyState < 1) return

  const maxPosition = Number.isFinite(video.duration) && video.duration > 1
    ? Math.max(0, video.duration - 1)
    : resumePosition.value
  video.currentTime = Math.min(resumePosition.value, maxPosition)
  resumeRequested.value = false
}

function resumePlayback() {
  showResumePrompt.value = false
  resumeRequested.value = true
  seekToResumePosition()
  getMediaPlayer()?.playVideo()?.catch(() => {})
}

function dismissResume() {
  getMediaPlayer()?.resetVideo()
  saveVideoProgress(0)
  resetResume()
}

async function selectSearchFile(file: FileRecordDto) {
  const relativeParts = file.relativePath.split(/[\\/]/).filter(Boolean)
  relativeParts.pop()

  rootId.value = file.libraryRootId
  browsePath.value = relativeParts
  browsePage.value = 1
  isBrowsingRoots.value = false
  activeTab.value = 'libraries'
  exitSearch()
  await browseDirectory()

  await selectFile(browseData.value?.files.find((item) => item.id === file.id) ?? file)
}

async function selectFile(file: FileRecordDto) {
  flushVideoProgress()
  resetResume()
  lastPositionSave = 0
  selectedFile.value = file
  textPreview.value = null

  if (file.mediaType === 'video') {
    api.markFilePlayed(file.id).catch(() => {})
    tryResume(file)
  } else if (file.mediaType === 'audio') {
    api.markFilePlayed(file.id).catch(() => {})
  }

  if (file.mediaType !== 'text') return

  try {
    textPreview.value = await api.getTextPreview(file.id)
  } catch (error) {
    setError(error)
  }
}

onMounted(async () => {
  window.addEventListener('beforeunload', flushVideoProgress)
  loading.value = true
  try {
    await loadRoots()
  } catch (error) {
    setError(error)
  } finally {
    loading.value = false
  }
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', flushVideoProgress)
  flushVideoProgress()
})
</script>

<template>
  <main class="client-shell">
    <ClientHeader
      v-model:search-query="searchQuery"
      :title="clientTitle"
      :active-tab="activeTab"
      :recent-count="recentFiles.length"
      :active-roots-count="activeRoots.length"
      :is-browsing-roots="isBrowsingRoots"
      :is-searching="isSearching"
      :browse-data="browseData"
      @search="doSearch"
      @back="backToRoots"
      @exit-search="exitSearch"
      @open-qr="qrModal?.open()"
    />

    <p v-if="errorMessage" class="error-banner">{{ errorMessage }}</p>

    <RootTabs
      v-if="isBrowsingRoots && !isSearching"
      :active-tab="activeTab"
      @switch-tab="switchTab"
    />

    <section v-if="isSearching" class="recent-files">
      <div class="view-toggle-bar">
        <h3 class="search-results-title">
          搜索"{{ searchQuery }}" {{ searchTotal }} 个结果
        </h3>
        <ViewToggle v-model:view-mode="viewMode" />
      </div>
      <p v-if="searchLoading" class="empty-state">搜索中...</p>
      <p v-else-if="searchResults.length === 0" class="empty-state">无匹配文件</p>
      <div v-else-if="viewMode === 'grid'" class="file-grid">
        <template v-for="file in searchResults" :key="file.id">
          <FileCard :file="file" show-created-time @select="selectSearchFile" />
          <SelectedMediaPlayerHost
            v-if="selectedFile?.id === file.id"
            ref="mediaPlayer"
            :selected-file="selectedFile"
            :selected-root="selectedRoot"
            :selected-media-url="selectedMediaUrl"
            :selected-thumbnail-url="selectedThumbnailUrl"
            :show-resume-prompt="showResumePrompt"
            :resume-position="resumePosition"
            :text-preview="textPreview"
            @resume-playback="resumePlayback"
            @dismiss-resume="dismissResume"
            @loadedmetadata="seekToResumePosition"
            @canplay="seekToResumePosition"
            @play="handleVideoPlay"
            @timeupdate="handleVideoTimeUpdate"
            @pause="handleVideoPause"
            @ended="handleVideoEnded"
            @seeked="handleVideoPause"
          />
        </template>
      </div>
      <div v-else class="file-list">
        <template v-for="file in searchResults" :key="file.id">
          <FileListItem :file="file" show-created-time @select="selectSearchFile" />
          <SelectedMediaPlayerHost
            v-if="selectedFile?.id === file.id"
            ref="mediaPlayer"
            :selected-file="selectedFile"
            :selected-root="selectedRoot"
            :selected-media-url="selectedMediaUrl"
            :selected-thumbnail-url="selectedThumbnailUrl"
            :show-resume-prompt="showResumePrompt"
            :resume-position="resumePosition"
            :text-preview="textPreview"
            @resume-playback="resumePlayback"
            @dismiss-resume="dismissResume"
            @loadedmetadata="seekToResumePosition"
            @canplay="seekToResumePosition"
            @play="handleVideoPlay"
            @timeupdate="handleVideoTimeUpdate"
            @pause="handleVideoPause"
            @ended="handleVideoEnded"
            @seeked="handleVideoPause"
          />
        </template>
      </div>
      <MobilePager
        :page="searchPage"
        :total-pages="searchTotalPages"
        :total="searchTotal"
        @change-page="changeSearchPage"
      />
    </section>

    <section v-if="isBrowsingRoots && !isSearching && activeTab !== 'libraries'" class="recent-files">
      <div class="view-toggle-bar">
        <div></div>
        <ViewToggle v-model:view-mode="viewMode" />
      </div>

      <p v-if="recentLoading" class="empty-state">加载中...</p>
      <p v-else-if="recentFiles.length === 0" class="empty-state">
        {{ activeTab === 'recent-added' ? '暂无最近添加的文件' : '暂无播放记录' }}
      </p>
      <div v-else-if="viewMode === 'grid'" class="file-grid">
        <template v-for="file in recentFiles" :key="file.id">
          <FileCard :file="file" :selected="selectedFile?.id === file.id" @select="selectFile" />
          <SelectedMediaPlayerHost
            v-if="selectedFile?.id === file.id"
            ref="mediaPlayer"
            :selected-file="selectedFile"
            :selected-root="selectedRoot"
            :selected-media-url="selectedMediaUrl"
            :selected-thumbnail-url="selectedThumbnailUrl"
            :show-resume-prompt="showResumePrompt"
            :resume-position="resumePosition"
            :text-preview="textPreview"
            @resume-playback="resumePlayback"
            @dismiss-resume="dismissResume"
            @loadedmetadata="seekToResumePosition"
            @canplay="seekToResumePosition"
            @play="handleVideoPlay"
            @timeupdate="handleVideoTimeUpdate"
            @pause="handleVideoPause"
            @ended="handleVideoEnded"
            @seeked="handleVideoPause"
          />
        </template>
      </div>
      <div v-else class="file-list">
        <template v-for="file in recentFiles" :key="file.id">
          <FileListItem
            :file="file"
            :selected="selectedFile?.id === file.id"
            :show-last-played="activeTab === 'recent-played'"
            @select="selectFile"
          />
          <SelectedMediaPlayerHost
            v-if="selectedFile?.id === file.id"
            ref="mediaPlayer"
            :selected-file="selectedFile"
            :selected-root="selectedRoot"
            :selected-media-url="selectedMediaUrl"
            :selected-thumbnail-url="selectedThumbnailUrl"
            :show-resume-prompt="showResumePrompt"
            :resume-position="resumePosition"
            :text-preview="textPreview"
            @resume-playback="resumePlayback"
            @dismiss-resume="dismissResume"
            @loadedmetadata="seekToResumePosition"
            @canplay="seekToResumePosition"
            @play="handleVideoPlay"
            @timeupdate="handleVideoTimeUpdate"
            @pause="handleVideoPause"
            @ended="handleVideoEnded"
            @seeked="handleVideoPause"
          />
        </template>
      </div>
    </section>

    <RootPicker
      v-if="isBrowsingRoots && !isSearching && activeTab === 'libraries'"
      :roots="activeRoots"
      @enter-root="enterRoot"
    />

    <template v-else-if="!isBrowsingRoots && !isSearching">
      <BreadcrumbNav :breadcrumbs="breadcrumbs" @navigate-to="navigateTo" />

      <section v-if="browseData" class="browse-content">
        <section v-if="browseData.subdirectories.length > 0" class="browse-section">
          <h3>文件夹</h3>
          <div class="folder-grid">
            <button
              v-for="dir in browseData.subdirectories"
              :key="dir"
              type="button"
              class="folder-item"
              @click="enterSubdirectory(dir)"
            >
              <span class="folder-icon">&#128193;</span>
              <span>{{ dir }}</span>
            </button>
          </div>
        </section>

        <section class="browse-section">
          <BrowseToolbar
            v-model:view-mode="viewMode"
            :filter-type="filterType"
            :sort-by="sortBy"
            :sort-direction="sortDirection"
            @change-filter="changeFilter"
            @change-sort-by="changeSortBy"
            @change-sort-direction="changeSortDirection"
          />

          <div v-if="displayedFiles.length > 0 && viewMode === 'grid'" class="file-grid">
            <template v-for="file in displayedFiles" :key="file.id">
              <FileCard
                :file="file"
                :selected="selectedFile?.id === file.id"
                show-created-time
                @select="selectFile"
              />
              <SelectedMediaPlayerHost
                v-if="selectedFile?.id === file.id"
                ref="mediaPlayer"
                :selected-file="selectedFile"
                :selected-root="selectedRoot"
                :selected-media-url="selectedMediaUrl"
                :selected-thumbnail-url="selectedThumbnailUrl"
                :show-resume-prompt="showResumePrompt"
                :resume-position="resumePosition"
                :text-preview="textPreview"
                @resume-playback="resumePlayback"
                @dismiss-resume="dismissResume"
                @loadedmetadata="seekToResumePosition"
                @canplay="seekToResumePosition"
                @play="handleVideoPlay"
                @timeupdate="handleVideoTimeUpdate"
                @pause="handleVideoPause"
                @ended="handleVideoEnded"
                @seeked="handleVideoPause"
              />
            </template>
          </div>

          <div v-else-if="displayedFiles.length > 0" class="file-list">
            <template v-for="file in displayedFiles" :key="file.id">
              <FileListItem
                :file="file"
                :selected="selectedFile?.id === file.id"
                show-created-time
                @select="selectFile"
              />
              <SelectedMediaPlayerHost
                v-if="selectedFile?.id === file.id"
                ref="mediaPlayer"
                :selected-file="selectedFile"
                :selected-root="selectedRoot"
                :selected-media-url="selectedMediaUrl"
                :selected-thumbnail-url="selectedThumbnailUrl"
                :show-resume-prompt="showResumePrompt"
                :resume-position="resumePosition"
                :text-preview="textPreview"
                @resume-playback="resumePlayback"
                @dismiss-resume="dismissResume"
                @loadedmetadata="seekToResumePosition"
                @canplay="seekToResumePosition"
                @play="handleVideoPlay"
                @timeupdate="handleVideoTimeUpdate"
                @pause="handleVideoPause"
                @ended="handleVideoEnded"
                @seeked="handleVideoPause"
              />
            </template>
          </div>

          <MobilePager
            :page="browseData.page"
            :total-pages="browseData.totalPages"
            :total="browseData.total"
            @change-page="changeBrowsePage"
          />
          <p v-if="displayedFiles.length === 0 && filterType !== 'all'" class="empty-state">当前分类没有文件</p>
        </section>

        <p v-if="browseData.subdirectories.length === 0 && browseData.total === 0 && filterType === 'all'" class="empty-state">
          此目录下没有支持的文件
        </p>
      </section>

      <p v-else-if="!loading" class="empty-state">加载中...</p>
    </template>
  </main>

  <QrCodeModal ref="qrModal" />
</template>