This commit is contained in:
@@ -65,17 +65,24 @@
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="group relative">
|
||||
<span class="block truncate max-w-[250px]" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.text }}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="block truncate max-w-[200px]" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
|
||||
{{ file.text || '-' }}
|
||||
</span>
|
||||
<!-- 悬浮提示 -->
|
||||
<div
|
||||
class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
|
||||
<div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
|
||||
{{ file.text }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看全文按钮 - 仅当文本超过一定长度时显示 -->
|
||||
<button
|
||||
v-if="file.text && file.text.length > 30"
|
||||
@click="openTextPreview(file.text)"
|
||||
class="flex-shrink-0 inline-flex items-center px-2 py-1 rounded text-xs transition-colors duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
]"
|
||||
>
|
||||
<EyeIcon class="w-3 h-3 mr-1" />
|
||||
{{ t('fileManage.viewText') }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@@ -304,6 +311,81 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文本预览模态框 -->
|
||||
<div v-if="showTextPreview" class="fixed inset-0 z-50" aria-labelledby="text-preview-title" role="dialog" aria-modal="true">
|
||||
<!-- 背景遮罩 -->
|
||||
<div
|
||||
class="fixed inset-0 bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm transition-opacity duration-300"
|
||||
@click="closeTextPreview"></div>
|
||||
|
||||
<!-- 模态框容器 -->
|
||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||
<div
|
||||
class="relative transform overflow-hidden rounded-2xl text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl animate-modal-scale"
|
||||
:class="[isDarkMode ? 'bg-gray-800/95 backdrop-blur-md' : 'bg-white']">
|
||||
|
||||
<!-- 模态框头部 -->
|
||||
<div class="relative px-6 pt-6 pb-4"
|
||||
:class="[isDarkMode ? 'bg-gradient-to-r from-gray-800/50 to-gray-700/50' : 'bg-gradient-to-r from-gray-50 to-white']">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
|
||||
<FileTextIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold leading-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
|
||||
{{ t('fileManage.textPreview') }}
|
||||
</h3>
|
||||
</div>
|
||||
<!-- 关闭按钮 -->
|
||||
<button @click="closeTextPreview" class="rounded-lg p-2 transition-all duration-200 hover:rotate-90"
|
||||
:class="[isDarkMode ? 'text-gray-400 hover:text-white hover:bg-white/10' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100']">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文本内容区域 -->
|
||||
<div class="px-6 py-4">
|
||||
<div
|
||||
class="max-h-[60vh] overflow-y-auto rounded-lg p-4 custom-scrollbar"
|
||||
:class="[isDarkMode ? 'bg-gray-700/50' : 'bg-gray-50']">
|
||||
<pre
|
||||
class="whitespace-pre-wrap break-words text-sm font-mono"
|
||||
:class="[isDarkMode ? 'text-gray-200' : 'text-gray-700']"
|
||||
>{{ previewText }}</pre>
|
||||
</div>
|
||||
<!-- 字符统计 -->
|
||||
<div class="mt-2 text-xs" :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
|
||||
{{ t('fileManage.charCount', { count: previewText.length }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t"
|
||||
:class="[isDarkMode ? 'border-gray-700/50' : 'border-gray-200']">
|
||||
<button @click="copyText"
|
||||
class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200"
|
||||
:class="[
|
||||
isDarkMode
|
||||
? 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
]">
|
||||
<CopyIcon class="w-4 h-4 mr-2" />
|
||||
{{ t('fileManage.copyText') }}
|
||||
</button>
|
||||
<button @click="closeTextPreview"
|
||||
class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/35">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -318,6 +400,9 @@ import {
|
||||
TrashIcon,
|
||||
PencilIcon,
|
||||
CheckIcon,
|
||||
EyeIcon,
|
||||
CopyIcon,
|
||||
FileTextIcon,
|
||||
} from 'lucide-vue-next'
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
import DataPagination from '@/components/common/DataPagination.vue'
|
||||
@@ -367,6 +452,32 @@ const editForm = ref<FileEditForm>({
|
||||
expired_count: null
|
||||
})
|
||||
|
||||
// 文本预览相关状态
|
||||
const showTextPreview = ref(false)
|
||||
const previewText = ref('')
|
||||
|
||||
// 打开文本预览
|
||||
const openTextPreview = (text: string) => {
|
||||
previewText.value = text
|
||||
showTextPreview.value = true
|
||||
}
|
||||
|
||||
// 关闭文本预览
|
||||
const closeTextPreview = () => {
|
||||
showTextPreview.value = false
|
||||
previewText.value = ''
|
||||
}
|
||||
|
||||
// 复制文本到剪贴板
|
||||
const copyText = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(previewText.value)
|
||||
alertStore.showAlert(t('fileManage.copySuccess'), 'success')
|
||||
} catch {
|
||||
alertStore.showAlert(t('fileManage.copyFailed'), 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// 打开编辑模态框
|
||||
const openEditModal = (file: FileListItem) => {
|
||||
editForm.value = {
|
||||
|
||||
Reference in New Issue
Block a user