数据库信息的中英文切换

src/views/User/introduction/Introduce.vue

@@ -6,8 +6,8 @@
     <div v-else-if="error" class="error-message">{{ error }}</div>
     <!-- 正常展示内容 -->
     <div v-else class="content-wrapper">
-      <h1 class="title">{{ softwareIntro.title }}</h1>
-      <div v-for="(paragraph, index) in softwareIntro.introParagraphs" :key="index" class="paragraph">
+      <h1 class="title">{{ currentTitle }}</h1>
+      <div v-for="(paragraph, index) in currentIntroParagraphs" :key="index" class="paragraph">
         <p v-html="paragraph"></p>
       </div>
     </div>
@@ -15,8 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { api5000 } from '@/utils/request'; // 导入封装的api5000
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { api5000 } from '@/utils/request';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 // 定义 targetId 为 prop
 const props = defineProps({
@@ -26,36 +29,94 @@ const props = defineProps({
   }
 });
 
-// 存储介绍内容
+// 存储介绍内容（支持中英文）
 const softwareIntro = ref({
   title: '',
-  introParagraphs: []
+  title_en: '',
+  intro: '',
+  intro_en: ''
+});
+
+// 当前语言状态（与全局同步）
+const language = ref(locale.value || localStorage.getItem('language') || 'zh');
+
+// 当前显示的标题
+const currentTitle = computed(() => {
+  return language.value === 'zh' ? softwareIntro.value.title : softwareIntro.value.title_en;
+});
+
+// 当前显示的段落内容
+const currentIntroParagraphs = computed(() => {
+  const intro = language.value === 'zh' ? softwareIntro.value.intro : softwareIntro.value.intro_en;
+  return intro
+    .replace(/<p>/g, '')
+    .replace(/<\/p>/g, '\r\n')
+    .replace(/<br>/g, '')
+    .split('\r\n')
+    .filter((p: string) => p.trim() !== '');
 });
+
 // 加载状态
 const isLoading = ref(true);
 // 错误信息
 const error = ref('');
 
-// 判断是否为标题段落
-
-// 处理段落，将图片路径转换为  标签
-
-onMounted(async () => {
+// 获取数据
+const fetchSoftwareIntro = async () => {
   try {
-    // 使用 api5000 调用接口
     const response = await api5000.get(`/admin/software-intro/${props.targetId}`);
-    const { title, intro } = response.data;
-    // 保留 \r\n 换行符
-    const processedIntro = intro.replace(/<p>/g, '').replace(/<\/p>/g, '\r\n').replace(/<br>/g, '');
-    softwareIntro.value.introParagraphs = processedIntro.split('\r\n').filter((paragraph: string) => paragraph.trim()!== '');
-    softwareIntro.value.title = title;
+    const { title, title_en, intro, intro_en } = response.data;
+
+    // 设置多语言内容
+    softwareIntro.value.title = title || '';
+    softwareIntro.value.title_en = title_en || '';
+    softwareIntro.value.intro = intro || '';
+    softwareIntro.value.intro_en = intro_en || '';
   } catch (err: any) {
     error.value = err.message || '请求数据时发生错误';
   } finally {
     isLoading.value = false;
   }
+};
+
+// 监听全局语言变化事件
+const handleLanguageChange = (event: Event) => {
+ const newLang = (event as CustomEvent<{ lang: string }>).detail.lang;
+  language.value = newLang;
+  // 重新获取数据以刷新内容
+  fetchSoftwareIntro();
+};
+
+// 页面挂载后初始化
+onMounted(async () => {
+  await fetchSoftwareIntro();
+
+  // 添加全局事件监听器
+  window.addEventListener('languageChanged', handleLanguageChange);
+});
+
+// 卸载时移除监听器
+onUnmounted(() => {
+  window.removeEventListener('languageChanged', handleLanguageChange);
+});
+
+// 封装设置视频样式的函数（保持原逻辑）
+const setVideoStyle = (video: HTMLVideoElement) => {
+  const containerWidth = (document.querySelector('.software-intro-container') as HTMLElement).offsetWidth;
+  const maxWidth = containerWidth * 0.8;
+  if (video.videoWidth > maxWidth) {
+    video.style.width = `${maxWidth}px`;
+    video.style.height = 'auto';
+  } else {
+    video.style.width = 'auto';
+    video.style.height = 'auto';
+  }
+  video.style.maxWidth = '80%';
+  video.style.objectFit = 'contain';
+};
 
-  // 页面加载完成后，监听视频播放事件
+// 页面加载完成后，监听视频播放事件
+onMounted(() => {
   const container = document.querySelector('.software-intro-container');
   if (container) {
     container.addEventListener('play', (event) => {
@@ -65,7 +126,6 @@ onMounted(async () => {
       }
     }, true);
 
-    // 监听窗口大小变化事件，确保视频在窗口大小改变时也能适应
     window.addEventListener('resize', () => {
       const videos = container.querySelectorAll('video');
       videos.forEach((video) => {
@@ -76,35 +136,20 @@ onMounted(async () => {
     });
   }
 });
-
-// 封装设置视频样式的函数
-const setVideoStyle = (video: HTMLVideoElement) => {
-  const containerWidth = (document.querySelector('.software-intro-container') as HTMLElement).offsetWidth;
-  const maxWidth = containerWidth * 0.8; // 最大宽度为容器宽度的 80%
-  if (video.videoWidth > maxWidth) {
-    video.style.width = `${maxWidth}px`;
-    video.style.height = 'auto';
-  } else {
-    video.style.width = 'auto';
-    video.style.height = 'auto';
-  }
-  video.style.maxWidth = '80%';
-  video.style.objectFit = 'contain';
-};
 </script>
 
 <style scoped lang="scss">
 .software-intro-container {
   width: 95%;
-  margin: 0 auto; 
+  margin: 0 auto;
   padding: 20px;
-  background-color: #fff; 
-  border-radius: 8px; /* 圆角 */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
-  height: 80vh; /* 设置容器高度为视口高度的 80% */
-  overflow-y: auto; /* 当内容超出容器高度时，显示垂直滚动条 */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  height: 80vh;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .loading-message {
@@ -117,7 +162,7 @@ const setVideoStyle = (video: HTMLVideoElement) => {
 .error-message {
   text-align: center;
   font-size: 18px;
-  color: #ff0000; /* 红色错误信息 */
+  color: #ff0000;
   padding: 20px;
 }
 
@@ -125,7 +170,7 @@ const setVideoStyle = (video: HTMLVideoElement) => {
   font-size: 36px;
   text-align: center;
   margin-bottom: 20px;
-  color: #333; /* 深灰色标题 */
+  color: #333;
 }
 
 .paragraph {
@@ -134,19 +179,18 @@ const setVideoStyle = (video: HTMLVideoElement) => {
 
 p {
   font-size: 16px;
-  line-height: 1.8; /* 增大行高 */
-  color: #666; /* 灰色文字 */
+  line-height: 1.8;
+  color: #666;
 }
 
 .intro-image {
   max-width: 100%;
   height: auto;
-  border-radius: 4px; /* 图片圆角 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 图片阴影 */
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 10px;
 }
 
-/* 控制视频尺寸 */
 video {
   width: 80%;
   max-width: 80%;
@@ -154,11 +198,10 @@ video {
   object-fit: contain;
 }
 
-/* 响应式设计 */
 @media (max-width: 768px) {
   .software-intro-container {
     padding: 15px;
-    height: 90vh; /* 在小屏幕上，调整容器高度为视口高度的 90% */
+    height: 90vh;
   }
 
   .title {