forked from lxbfYeaa/Reisaye
网站和推流制作完成
This commit is contained in:
364
EyeVue/src/views/read.vue
Normal file
364
EyeVue/src/views/read.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="flex h-screen w-full bg-gray-100 dark:bg-gray-900 p-6 overflow-y-auto">
|
||||
<div class="max-w-7xl mx-auto flex w-full">
|
||||
|
||||
<!-- 左侧信息区域 -->
|
||||
<div class="w-3/10 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mr-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">内容统计</h2>
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tbody class="bg-white dark:bg-gray-700">
|
||||
<tr class="border-b border-gray-200 dark:border-gray-600">
|
||||
<td class="px-4 py-2 font-medium text-gray-700 dark:text-gray-300">行数</td>
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-200">{{ lineCount }}</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200 dark:border-gray-600">
|
||||
<td class="px-4 py-2 font-medium text-gray-700 dark:text-gray-300">语言</td>
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-200">{{ language }}</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200 dark:border-gray-600">
|
||||
<td class="px-4 py-2 font-medium text-gray-700 dark:text-gray-300">字符数</td>
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-200">{{ article?.content?.length || 0 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 font-medium text-gray-700 dark:text-gray-300">阅读数</td>
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-200">{{ article?.read_count || 0 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 font-medium text-gray-700 dark:text-gray-300">标签数</td>
|
||||
<td class="px-4 py-2 text-gray-900 dark:text-gray-200">{{ tagCount }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 支持统计饼图 -->
|
||||
<div v-if="article" class="mt-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">翻译支持比例</h2>
|
||||
<div class="w-50">
|
||||
<PieChart :data="supportData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧阅读区域 -->
|
||||
<div class="w-7/10 w-full bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 overflow-y-auto">
|
||||
<div v-if="loading" class="text-center text-gray-500">加载中...</div>
|
||||
<div v-else-if="error" class="text-center text-red-500">{{ error }}</div>
|
||||
<div v-else class="prose dark:prose-invert max-w-none">
|
||||
<!-- 标题 -->
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ article.title }}</h1>
|
||||
<!-- 作者 -->
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">作者：{{ article.author }}</p>
|
||||
<a class="flex text-sm text-gray-500 dark:text-gray-400 mb-6" :href="`/edit?id=${article.id}`">编辑文章</a>
|
||||
<hr />
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="mb-6 whitespace-pre-line text-gray-700 dark:text-gray-300">
|
||||
{{ article.content }}
|
||||
</div>
|
||||
|
||||
<!-- 人工翻译 -->
|
||||
<div v-if="article.transform_content_human" class="mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">人工翻译内容</h2>
|
||||
<div class="whitespace-pre-line bg-gray-50 dark:bg-gray-700 p-4 rounded border dark:border-gray-600">
|
||||
{{ article.transform_content_human }}
|
||||
</div>
|
||||
<button
|
||||
@click="handleLike('human')"
|
||||
class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 like-button"
|
||||
>
|
||||
<svg
|
||||
:class="{ 'text-red-500 dark:text-red-400': humanLikeStatus }"
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.583 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
|
||||
</svg>
|
||||
点赞 {{ humanLikeStatus ? '已' : '未' }}完成
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 多个机器翻译 -->
|
||||
<div v-for="(trans, index) in article.transform_content_machine" :key="index" class="mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">AI 翻译内容 {{ index + 1 }}</h2>
|
||||
|
||||
<!-- 显示 Prompt -->
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">
|
||||
提示词：{{ article.support_machine_prompt[index] || '未提供' }}
|
||||
</p>
|
||||
|
||||
<!-- 翻译内容 -->
|
||||
<div class="whitespace-pre-line bg-gray-50 dark:bg-gray-700 p-4 rounded border dark:border-gray-600">
|
||||
{{ trans }}
|
||||
</div>
|
||||
|
||||
<!-- 点赞按钮 -->
|
||||
<button
|
||||
@click="handleLike(`machine-${index}`)"
|
||||
class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 like-button"
|
||||
>
|
||||
<svg
|
||||
:class="{ 'text-red-500 dark:text-red-400': machineLikeStatus[index] }"
|
||||
class="w-4 h-4 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.583 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
|
||||
</svg>
|
||||
点赞 {{ machineLikeStatus[index] ? '已' : '未' }}完成
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 标签 -->
|
||||
<div v-if="article.tags && article.tags.length > 0" class="mt-6">
|
||||
<h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">标签</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span v-for="tagId in article.tags" :key="tagId" class="inline-flex items-center bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm">
|
||||
{{ tagTitles[tagId] || '加载中...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watchEffect } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { useRoute } from 'vue-router'
|
||||
import PieChart from '@/components/PieChart.vue'
|
||||
import router from '@/router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 文章数据
|
||||
const article = ref<any>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// 翻译支持统计
|
||||
const supportData = ref({
|
||||
labels: ['人工翻译'],
|
||||
datasets: [
|
||||
{
|
||||
label: '翻译支持比例',
|
||||
data: [0],
|
||||
backgroundColor: [
|
||||
'rgba(54, 162, 235, 0.7)',
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(75, 192, 192, 0.7)',
|
||||
'rgba(153, 102, 255, 0.7)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 统计信息计算
|
||||
const wordCount = ref(0)
|
||||
const lineCount = ref(0)
|
||||
const language = ref('未知')
|
||||
const tagCount = ref(0)
|
||||
|
||||
// 标签相关
|
||||
const tagTitles = ref<Record<string, string>>({}) // 保存 tagId -> title 映射
|
||||
|
||||
// 获取标签名称
|
||||
const fetchTagTitle = async (tagId: string) => {
|
||||
try {
|
||||
const response = await axios.get('/api/tags/getTagById', {
|
||||
params: { id: tagId }
|
||||
})
|
||||
tagTitles.value[tagId] = response.data.title
|
||||
} catch (err) {
|
||||
tagTitles.value[tagId] = '未知标签'
|
||||
console.error(`获取标签 ${tagId} 失败`, err)
|
||||
}
|
||||
}
|
||||
|
||||
// 批量获取所有标签名
|
||||
const fetchAllTagTitles = () => {
|
||||
if (!article.value?.tags?.length) return
|
||||
|
||||
const uniqueTagIds = [...new Set(article.value.tags)] // 去重
|
||||
|
||||
uniqueTagIds.forEach(tagId => {
|
||||
if (!tagTitles.value[tagId]) {
|
||||
fetchTagTitle(tagId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 加载文章
|
||||
const fetchArticle = async () => {
|
||||
const id = route.query.id as string
|
||||
if (!id) {
|
||||
error.value = '缺少文章 ID'
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get('/api/page/getPageById', {
|
||||
params: { id }
|
||||
})
|
||||
article.value = response.data
|
||||
|
||||
// 更新本地 read_count
|
||||
if (article.value) {
|
||||
article.value.read_count = (article.value.read_count || 0) + 1
|
||||
}
|
||||
|
||||
// 初始化点赞状态
|
||||
initLikeStatus()
|
||||
|
||||
// 更新统计数据
|
||||
updateSupportData()
|
||||
wordCount.value = article.value.content.trim().split(/\s+/).length
|
||||
|
||||
// 获取标签名称
|
||||
fetchAllTagTitles()
|
||||
} catch (err) {
|
||||
error.value = '加载文章失败'
|
||||
console.error(err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 翻译点赞状态
|
||||
const humanLikeStatus = ref<boolean>(false)
|
||||
const machineLikeStatus = ref<{ [index: number]: boolean }>({})
|
||||
|
||||
const initLikeStatus = () => {
|
||||
// 人工翻译点赞状态
|
||||
const humanKey = `like_human_${article.value.id}`
|
||||
const storedHuman = localStorage.getItem(humanKey)
|
||||
if (storedHuman) {
|
||||
humanLikeStatus.value = JSON.parse(storedHuman).liked
|
||||
}
|
||||
|
||||
// 机器翻译点赞状态
|
||||
const machineLength = article.value?.transform_content_machine?.length || 0
|
||||
for (let i = 0; i < machineLength; i++) {
|
||||
const key = `like_machine_${article.value.id}_${i}`
|
||||
const stored = localStorage.getItem(key)
|
||||
if (stored) {
|
||||
machineLikeStatus.value[i] = JSON.parse(stored).liked
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新饼图数据
|
||||
const updateSupportData = () => {
|
||||
if (!article.value) return
|
||||
|
||||
const labels = ['人工翻译']
|
||||
const data = [article.value.support_human]
|
||||
|
||||
if (Array.isArray(article.value.transform_content_machine)) {
|
||||
article.value.transform_content_machine.forEach((_, index) => {
|
||||
labels.push(`AI翻译 ${index + 1}（${article.value.support_machine_prompt[index] || '无提示词'}）`)
|
||||
data.push(article.value.support_machine[index])
|
||||
})
|
||||
}
|
||||
|
||||
supportData.value.labels = labels
|
||||
supportData.value.datasets[0].data = data
|
||||
}
|
||||
|
||||
const handleLike = async (type: 'human' | `machine-${number}`) => {
|
||||
let needUpdate = false
|
||||
|
||||
if (type === 'human') {
|
||||
if (humanLikeStatus.value) return
|
||||
article.value.support_human += 1
|
||||
humanLikeStatus.value = true
|
||||
localStorage.setItem(`like_human_${article.value.id}`, JSON.stringify({ liked: true, timestamp: Date.now() }))
|
||||
needUpdate = true
|
||||
} else {
|
||||
const match = type.match(/machine-(\d+)/)
|
||||
if (!match) return
|
||||
const index = parseInt(match[1], 10)
|
||||
if (machineLikeStatus.value[index]) return
|
||||
|
||||
article.value.support_machine[index] += 1
|
||||
machineLikeStatus.value[index] = true
|
||||
localStorage.setItem(`like_machine_${article.value.id}_${index}`, JSON.stringify({ liked: true, timestamp: Date.now() }))
|
||||
needUpdate = true
|
||||
}
|
||||
|
||||
if (needUpdate) {
|
||||
try {
|
||||
await axios.post('/api/page/like', {
|
||||
id: article.value.id,
|
||||
human: article.value.support_human,
|
||||
machine: article.value.support_machine
|
||||
}, {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
updateSupportData()
|
||||
} catch (err) {
|
||||
console.error('点赞失败:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (window.innerWidth < 768) {
|
||||
router.push(`/readM?id=${route.query.id}`)
|
||||
}
|
||||
fetchArticle()
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (article.value?.content) {
|
||||
wordCount.value = article.value.content.trim().split(/\s+/).length
|
||||
lineCount.value = article.value.content.split('\n').length
|
||||
const text = article.value.content.trim()
|
||||
if (/[\u4e00-\u9fa5]/.test(text)) {
|
||||
language.value = '中文'
|
||||
} else if (/[a-zA-Z]/.test(text)) {
|
||||
language.value = '英文'
|
||||
} else {
|
||||
language.value = '未知'
|
||||
}
|
||||
}
|
||||
|
||||
updateSupportData()
|
||||
|
||||
tagCount.value = article.value?.tags?.length || 0
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.like-button {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.like-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.like-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.flex,
|
||||
.w-4\/10,
|
||||
.w-6\/10 {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.whitespace-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user