1panel
This commit is contained in:
beabigegg
850
frontend/src/views/HistoryView.vue
Normal file
850
frontend/src/views/HistoryView.vue
Normal file
@@ -0,0 +1,850 @@
|
||||
<template>
|
||||
<div class="history-view">
|
||||
<!-- 頁面標題 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">歷史記錄</h1>
|
||||
<div class="page-actions">
|
||||
<el-button @click="exportHistory">
|
||||
<el-icon><Download /></el-icon>
|
||||
匯出記錄
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 篩選區域 -->
|
||||
<div class="content-card">
|
||||
<div class="filters-section">
|
||||
<div class="filters-row">
|
||||
<div class="filter-group">
|
||||
<label>時間範圍:</label>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
start-placeholder="開始日期"
|
||||
end-placeholder="結束日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="handleDateRangeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>狀態:</label>
|
||||
<el-select v-model="filters.status" @change="handleFilterChange">
|
||||
<el-option label="全部" value="all" />
|
||||
<el-option label="已完成" value="COMPLETED" />
|
||||
<el-option label="失敗" value="FAILED" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>檔案類型:</label>
|
||||
<el-select v-model="filters.fileType" @change="handleFilterChange">
|
||||
<el-option label="全部" value="all" />
|
||||
<el-option label="Word" value="doc" />
|
||||
<el-option label="PowerPoint" value="ppt" />
|
||||
<el-option label="Excel" value="xls" />
|
||||
<el-option label="PDF" value="pdf" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<el-button @click="clearFilters">
|
||||
<el-icon><Close /></el-icon>
|
||||
清除篩選
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-row">
|
||||
<el-input
|
||||
v-model="filters.search"
|
||||
placeholder="搜尋檔案名稱..."
|
||||
style="width: 300px"
|
||||
clearable
|
||||
@input="handleSearchChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 統計概覽 -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon primary">
|
||||
<el-icon><Files /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">{{ filteredJobs.length }}</div>
|
||||
<div class="stat-label">總記錄數</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon success">
|
||||
<el-icon><SuccessFilled /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">{{ completedCount }}</div>
|
||||
<div class="stat-label">成功完成</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon warning">
|
||||
<el-icon><Money /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">${{ totalCost.toFixed(4) }}</div>
|
||||
<div class="stat-label">總成本</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon info">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="stat-value">{{ avgProcessingTime }}</div>
|
||||
<div class="stat-label">平均處理時間</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 歷史記錄列表 -->
|
||||
<div class="content-card">
|
||||
<div class="card-body">
|
||||
<div v-if="loading" class="loading-state">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredJobs.length === 0" class="empty-state">
|
||||
<el-icon class="empty-icon"><Document /></el-icon>
|
||||
<div class="empty-title">無歷史記錄</div>
|
||||
<div class="empty-description">
|
||||
在所選時間範圍內沒有找到符合條件的記錄
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- 表格模式 -->
|
||||
<div class="view-toggle">
|
||||
<el-radio-group v-model="viewMode">
|
||||
<el-radio-button label="table">表格檢視</el-radio-button>
|
||||
<el-radio-button label="card">卡片檢視</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- 表格檢視 -->
|
||||
<div v-if="viewMode === 'table'" class="table-view">
|
||||
<el-table :data="paginatedJobs" style="width: 100%">
|
||||
<el-table-column prop="original_filename" label="檔案名稱" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="file-info">
|
||||
<div class="file-icon" :class="getFileExtension(row.original_filename)">
|
||||
{{ getFileExtension(row.original_filename).toUpperCase() }}
|
||||
</div>
|
||||
<span class="file-name">{{ row.original_filename }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="file_size" label="檔案大小" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ formatFileSize(row.file_size) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="target_languages" label="翻譯語言" width="150">
|
||||
<template #default="{ row }">
|
||||
<div class="language-tags">
|
||||
<el-tag
|
||||
v-for="lang in row.target_languages.slice(0, 2)"
|
||||
:key="lang"
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
{{ getLanguageText(lang) }}
|
||||
</el-tag>
|
||||
<el-tag v-if="row.target_languages.length > 2" size="small" type="info">
|
||||
+{{ row.target_languages.length - 2 }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" label="狀態" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusTagType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="total_cost" label="成本" width="100">
|
||||
<template #default="{ row }">
|
||||
${{ (row.total_cost || 0).toFixed(4) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="created_at" label="建立時間" width="130">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="completed_at" label="完成時間" width="130">
|
||||
<template #default="{ row }">
|
||||
{{ row.completed_at ? formatDate(row.completed_at) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button type="text" size="small" @click="viewJobDetail(row.job_uuid)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 'COMPLETED'"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="downloadJob(row)"
|
||||
>
|
||||
下載
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 卡片檢視 -->
|
||||
<div v-else class="card-view">
|
||||
<div class="history-cards">
|
||||
<div
|
||||
v-for="job in paginatedJobs"
|
||||
:key="job.job_uuid"
|
||||
class="history-card"
|
||||
@click="viewJobDetail(job.job_uuid)"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="file-info">
|
||||
<div class="file-icon" :class="getFileExtension(job.original_filename)">
|
||||
{{ getFileExtension(job.original_filename).toUpperCase() }}
|
||||
</div>
|
||||
<div class="file-details">
|
||||
<div class="file-name">{{ job.original_filename }}</div>
|
||||
<div class="file-meta">
|
||||
{{ formatFileSize(job.file_size) }} •
|
||||
{{ formatDate(job.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-status">
|
||||
<el-tag :type="getStatusTagType(job.status)" size="small">
|
||||
{{ getStatusText(job.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="languages-section">
|
||||
<div class="language-label">翻譯語言:</div>
|
||||
<div class="language-tags">
|
||||
<span
|
||||
v-for="lang in job.target_languages"
|
||||
:key="lang"
|
||||
class="language-tag"
|
||||
>
|
||||
{{ getLanguageText(lang) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-section">
|
||||
<div class="stat-item" v-if="job.total_cost > 0">
|
||||
<span class="stat-label">成本:</span>
|
||||
<span class="stat-value">${{ job.total_cost.toFixed(4) }}</span>
|
||||
</div>
|
||||
<div class="stat-item" v-if="job.total_tokens > 0">
|
||||
<span class="stat-label">Token:</span>
|
||||
<span class="stat-value">{{ job.total_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer" v-if="job.completed_at || job.processing_started_at">
|
||||
<div class="time-info">
|
||||
<div v-if="job.processing_started_at && job.completed_at">
|
||||
處理時間: {{ calculateProcessingTime(job.processing_started_at, job.completed_at) }}
|
||||
</div>
|
||||
<div v-if="job.completed_at">
|
||||
完成時間: {{ formatTime(job.completed_at) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions" @click.stop>
|
||||
<el-button
|
||||
v-if="job.status === 'COMPLETED'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="downloadJob(job)"
|
||||
>
|
||||
下載
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分頁 -->
|
||||
<div class="pagination-section" v-if="totalPages > 1">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="filteredJobs.length"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useJobsStore } from '@/stores/jobs'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { debounce } from 'lodash-es'
|
||||
import {
|
||||
Download, Close, Search, Files, SuccessFilled, Money, Clock, Document
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// Router 和 Store
|
||||
const router = useRouter()
|
||||
const jobsStore = useJobsStore()
|
||||
|
||||
// 響應式數據
|
||||
const loading = ref(false)
|
||||
const viewMode = ref('table')
|
||||
const dateRange = ref([])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(20)
|
||||
|
||||
const filters = ref({
|
||||
status: 'all',
|
||||
fileType: 'all',
|
||||
search: ''
|
||||
})
|
||||
|
||||
// 語言映射
|
||||
const languageMap = {
|
||||
'zh-TW': '繁中',
|
||||
'zh-CN': '簡中',
|
||||
'en': '英文',
|
||||
'ja': '日文',
|
||||
'ko': '韓文',
|
||||
'vi': '越文'
|
||||
}
|
||||
|
||||
// 計算屬性
|
||||
const allJobs = computed(() => jobsStore.jobs.filter(job =>
|
||||
job.status === 'COMPLETED' || job.status === 'FAILED'
|
||||
))
|
||||
|
||||
const filteredJobs = computed(() => {
|
||||
let jobs = allJobs.value
|
||||
|
||||
// 狀態篩選
|
||||
if (filters.value.status !== 'all') {
|
||||
jobs = jobs.filter(job => job.status === filters.value.status)
|
||||
}
|
||||
|
||||
// 檔案類型篩選
|
||||
if (filters.value.fileType !== 'all') {
|
||||
jobs = jobs.filter(job => {
|
||||
const ext = getFileExtension(job.original_filename)
|
||||
switch (filters.value.fileType) {
|
||||
case 'doc': return ['docx', 'doc'].includes(ext)
|
||||
case 'ppt': return ['pptx', 'ppt'].includes(ext)
|
||||
case 'xls': return ['xlsx', 'xls'].includes(ext)
|
||||
case 'pdf': return ext === 'pdf'
|
||||
default: return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 日期範圍篩選
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
const [startDate, endDate] = dateRange.value
|
||||
jobs = jobs.filter(job => {
|
||||
const jobDate = new Date(job.created_at).toDateString()
|
||||
return jobDate >= new Date(startDate).toDateString() &&
|
||||
jobDate <= new Date(endDate).toDateString()
|
||||
})
|
||||
}
|
||||
|
||||
// 搜尋篩選
|
||||
if (filters.value.search.trim()) {
|
||||
const searchTerm = filters.value.search.toLowerCase().trim()
|
||||
jobs = jobs.filter(job =>
|
||||
job.original_filename.toLowerCase().includes(searchTerm)
|
||||
)
|
||||
}
|
||||
|
||||
return jobs.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
|
||||
})
|
||||
|
||||
const paginatedJobs = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return filteredJobs.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
const totalPages = computed(() => Math.ceil(filteredJobs.value.length / pageSize.value))
|
||||
|
||||
const completedCount = computed(() =>
|
||||
filteredJobs.value.filter(job => job.status === 'COMPLETED').length
|
||||
)
|
||||
|
||||
const totalCost = computed(() =>
|
||||
filteredJobs.value.reduce((sum, job) => sum + (job.total_cost || 0), 0)
|
||||
)
|
||||
|
||||
const avgProcessingTime = computed(() => {
|
||||
const completedJobs = filteredJobs.value.filter(job =>
|
||||
job.status === 'COMPLETED' && job.processing_started_at && job.completed_at
|
||||
)
|
||||
|
||||
if (completedJobs.length === 0) return '無資料'
|
||||
|
||||
const totalMs = completedJobs.reduce((sum, job) => {
|
||||
const startTime = new Date(job.processing_started_at)
|
||||
const endTime = new Date(job.completed_at)
|
||||
return sum + (endTime - startTime)
|
||||
}, 0)
|
||||
|
||||
const avgMs = totalMs / completedJobs.length
|
||||
const minutes = Math.floor(avgMs / 60000)
|
||||
const seconds = Math.floor((avgMs % 60000) / 1000)
|
||||
|
||||
return `${minutes}分${seconds}秒`
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleFilterChange = () => {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const handleSearchChange = debounce(() => {
|
||||
currentPage.value = 1
|
||||
}, 300)
|
||||
|
||||
const handleDateRangeChange = () => {
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
const clearFilters = () => {
|
||||
filters.value.status = 'all'
|
||||
filters.value.fileType = 'all'
|
||||
filters.value.search = ''
|
||||
dateRange.value = []
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const viewJobDetail = (jobUuid) => {
|
||||
router.push(`/job/${jobUuid}`)
|
||||
}
|
||||
|
||||
const downloadJob = async (job) => {
|
||||
try {
|
||||
if (job.target_languages.length === 1) {
|
||||
const originalExt = getFileExtension(job.original_filename)
|
||||
const translatedExt = getTranslatedFileExtension(originalExt)
|
||||
const filename = `${job.original_filename.replace(/\.[^/.]+$/, '')}_${job.target_languages[0]}_translated.${translatedExt}`
|
||||
await jobsStore.downloadFile(job.job_uuid, job.target_languages[0], filename)
|
||||
} else {
|
||||
const filename = `${job.original_filename.replace(/\.[^/.]+$/, '')}_translated.zip`
|
||||
await jobsStore.downloadAllFiles(job.job_uuid, filename)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('下載失敗:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const exportHistory = () => {
|
||||
// 匯出 CSV 格式的歷史記錄
|
||||
const csvContent = [
|
||||
['檔案名稱', '檔案大小', '目標語言', '狀態', '成本', '建立時間', '完成時間'].join(','),
|
||||
...filteredJobs.value.map(job => [
|
||||
`"${job.original_filename}"`,
|
||||
formatFileSize(job.file_size),
|
||||
`"${job.target_languages.join(', ')}"`,
|
||||
getStatusText(job.status),
|
||||
(job.total_cost || 0).toFixed(4),
|
||||
formatDate(job.created_at),
|
||||
job.completed_at ? formatDate(job.completed_at) : ''
|
||||
].join(','))
|
||||
].join('\n')
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' })
|
||||
const link = document.createElement('a')
|
||||
const url = URL.createObjectURL(blob)
|
||||
link.setAttribute('href', url)
|
||||
link.setAttribute('download', `翻譯歷史記錄_${new Date().toISOString().slice(0, 10)}.csv`)
|
||||
link.click()
|
||||
|
||||
ElMessage.success('歷史記錄已匯出')
|
||||
}
|
||||
|
||||
const getFileExtension = (filename) => {
|
||||
return filename.split('.').pop().toLowerCase()
|
||||
}
|
||||
|
||||
const getTranslatedFileExtension = (originalExt) => {
|
||||
// PDF 翻譯後變成 DOCX
|
||||
if (originalExt === 'pdf') {
|
||||
return 'docx'
|
||||
}
|
||||
// 其他格式保持不變
|
||||
return originalExt
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 B'
|
||||
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const formatDate = (timestamp) => {
|
||||
return new Date(timestamp).toLocaleDateString('zh-TW', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (timestamp) => {
|
||||
const now = new Date()
|
||||
const time = new Date(timestamp)
|
||||
const diff = now - time
|
||||
|
||||
if (diff < 86400000) return '今天'
|
||||
if (diff < 172800000) return '昨天'
|
||||
if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
|
||||
|
||||
return time.toLocaleDateString('zh-TW')
|
||||
}
|
||||
|
||||
const calculateProcessingTime = (startTime, endTime) => {
|
||||
const start = new Date(startTime)
|
||||
const end = new Date(endTime)
|
||||
const diff = end - start
|
||||
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
const seconds = Math.floor((diff % 60000) / 1000)
|
||||
|
||||
return `${minutes}分${seconds}秒`
|
||||
}
|
||||
|
||||
const getLanguageText = (langCode) => {
|
||||
return languageMap[langCode] || langCode
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'COMPLETED': '已完成',
|
||||
'FAILED': '失敗'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
const getStatusTagType = (status) => {
|
||||
const typeMap = {
|
||||
'COMPLETED': 'success',
|
||||
'FAILED': 'danger'
|
||||
}
|
||||
return typeMap[status] || 'info'
|
||||
}
|
||||
|
||||
// 生命週期
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await jobsStore.fetchJobs({ per_page: 100 })
|
||||
} catch (error) {
|
||||
console.error('載入歷史記錄失敗:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 監聽檢視模式變化，重置分頁
|
||||
watch(viewMode, () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-view {
|
||||
.filters-section {
|
||||
.filters-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin: 24px 0;
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-view {
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.file-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.docx, &.doc { background-color: #2b579a; }
|
||||
&.pptx, &.ppt { background-color: #d24726; }
|
||||
&.xlsx, &.xls { background-color: #207245; }
|
||||
&.pdf { background-color: #ff0000; }
|
||||
}
|
||||
|
||||
.file-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.language-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-view {
|
||||
.history-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.history-card {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background: var(--el-bg-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.file-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.docx, &.doc { background-color: #2b579a; }
|
||||
&.pptx, &.ppt { background-color: #d24726; }
|
||||
&.xlsx, &.xls { background-color: #207245; }
|
||||
&.pdf { background-color: #ff0000; }
|
||||
}
|
||||
|
||||
.file-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.languages-section {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.language-label {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.language-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
.language-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
background-color: var(--el-color-primary-light-8);
|
||||
color: var(--el-color-primary);
|
||||
border: 1px solid var(--el-color-primary-light-5);
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.stat-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
.time-info {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user