feat(demo-vue): 全站 i18n 抽文案、中英文资源与页面接入

- 引入 vue-i18n，集中维护 zh-CN / en-US 文案与产品 catalog、长文 HTML
- 前台与后台列表/弹窗/校验/删除确认等改为 t()，顶栏与新闻/行业列表与详情页多语言
- 修正 Industry 等页面文首误粘贴；请求头 Accept-Language 与 Element 语言随 locale 切换

.idea/compiler.xml

@@ -2,6 +2,7 @@
 <project version="4">
   <component name="CompilerConfiguration">
     <annotationProcessing>
+      <profile default="true" name="Default" enabled="true" />
       <profile name="Maven default annotation processors profile" enabled="true">
         <sourceOutputDir name="target/generated-sources/annotations" />
         <sourceTestOutputDir name="target/generated-test-sources/test-annotations" />

.idea/encodings.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="Encoding">
     <file url="file://$PROJECT_DIR$/demo4/src/main/java" charset="UTF-8" />
+    <file url="PROJECT" charset="UTF-8" />
   </component>
 </project>

.idea/misc.xml

@@ -8,7 +8,7 @@
       </list>
     </option>
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_18" default="true" project-jdk-name="18" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="17" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
 </project>

demo-vue/env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare module '*?raw' {
+  const content: string
+  export default content
+}

demo-vue/package-lock.json

@@ -15,6 +15,7 @@
         "less": "^4.5.1",
         "pinia": "^3.0.4",
         "vue": "^3.5.29",
+        "vue-i18n": "^9.14.4",
         "vue-router": "^5.0.3"
       },
       "devDependencies": {
@@ -971,6 +972,50 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.14.4.tgz",
+      "integrity": "sha512-vtZCt7NqWhKEtHa3SD/322DlgP5uR9MqWxnE0y8Q0tjDs9H5Lxhss+b5wv8rmuXRoHKLESNgw9d+EN9ybBbj9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "9.14.4",
+        "@intlify/shared": "9.14.4"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.14.4.tgz",
+      "integrity": "sha512-vcyCLiVRN628U38c3PbahrhbbXrckrM9zpy0KZVlDk2Z0OnGwv8uQNNXP3twwGtfLsCf4gu3ci6FMIZnPaqZsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "9.14.4",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.14.4.tgz",
+      "integrity": "sha512-P9zv6i1WvMc9qDBWvIgKkymjY2ptIiQ065PjDv7z7fDqH3J/HBRBN5IoiR46r/ujRcU7hCuSIZWvCAFCyuOYZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -3831,6 +3876,32 @@
       "integrity": "sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==",
       "license": "MIT"
     },
+    "node_modules/vue-i18n": {
+      "version": "9.14.4",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.14.4.tgz",
+      "integrity": "sha512-B934C8yUyWLT0EMud3DySrwSUJI7ZNiWYsEEz2gknTthqKiG4dzWE/WSa8AzCuSQzwBEv4HtG1jZDhgzPfWSKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "9.14.4",
+        "@intlify/shared": "9.14.4",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz",

demo-vue/package.json

@@ -18,6 +18,7 @@
     "less": "^4.5.1",
     "pinia": "^3.0.4",
     "vue": "^3.5.29",
+    "vue-i18n": "^9.14.4",
     "vue-router": "^5.0.3"
   },
   "devDependencies": {

demo-vue/src/App.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
 
+const { locale } = useI18n()
+const elementLocale = computed(() => (locale.value === 'en-US' ? en : zhCn))
 </script>
 
 <template>
+  <el-config-provider :locale="elementLocale">
     <RouterView />
+  </el-config-provider>
 </template>

demo-vue/src/components/Footer.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="version">
-    <a target="_blank" class="copyright" > ©2020-{{ currentYear }} 首达特后台管理系统 </a>
-    <a target="_blank" class="version" > 公众号：首达特 </a>
+    <a target="_blank" class="copyright" > &copy;2020-{{ currentYear }} {{ t('headerAdmin.title') }} </a>
+    <a target="_blank" class="version" > {{ t('common.wechatOA') }} </a>
   </div>
 </template>
 <script setup>
 import dayjs from 'dayjs';
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 const currentYear = dayjs().year();
 </script>
 

demo-vue/src/components/FooterComponent.vue

@@ -3,33 +3,32 @@
     <div class="footer-content">
       <div class="footer-main">
         <div class="footer-section company-info">
-          <h3 class="footer-title">山东首达特科技</h3>
-          <p class="footer-subtitle">首达特科技官网</p>
+          <h3 class="footer-title">{{ t('common.companyShort') }}</h3>
+          <p class="footer-subtitle">{{ t('footer.siteSubtitle') }}</p>
         </div>
 
         <div class="footer-section">
-          <h4 class="footer-heading">关于我们</h4>
+          <h4 class="footer-heading">{{ t('footer.about') }}</h4>
           <ul class="footer-links">
-            <li><router-link to="/about" class="footer-link">公司简介</router-link></li>
-            <li><router-link to="/corporate-culture" class="footer-link">企业文化</router-link></li>
-            <li><router-link to="/production-base" class="footer-link">生产基地</router-link></li>
-            <li><router-link to="/organization" class="footer-link">组织架构</router-link></li>
-            <li><router-link to="/honors" class="footer-link">荣誉资质</router-link></li>
-            <li><router-link to="/development-history" class="footer-link">发展历程</router-link></li>
+            <li><router-link to="/about" class="footer-link">{{ t('nav.companyIntro') }}</router-link></li>
+            <li><router-link to="/corporate-culture" class="footer-link">{{ t('nav.culture') }}</router-link></li>
+            <li><router-link to="/production-base" class="footer-link">{{ t('nav.base') }}</router-link></li>
+            <li><router-link to="/organization" class="footer-link">{{ t('nav.org') }}</router-link></li>
+            <li><router-link to="/honors" class="footer-link">{{ t('nav.honors') }}</router-link></li>
+            <li><router-link to="/development-history" class="footer-link">{{ t('nav.history') }}</router-link></li>
           </ul>
         </div>
 
         <div class="footer-section">
-          <h4 class="footer-heading">新闻中心</h4>
+          <h4 class="footer-heading">{{ t('footer.news') }}</h4>
           <ul class="footer-links">
-
-            <li><router-link to="/news" class="footer-link">公司新闻</router-link></li>
-            <li><a href="#" class="footer-link">行业动态</a></li>
+            <li><router-link to="/news" class="footer-link">{{ t('nav.companyNews') }}</router-link></li>
+            <li><router-link to="/industry" class="footer-link">{{ t('footer.followIndustry') }}</router-link></li>
           </ul>
         </div>
 
         <div class="footer-section">
-          <h4 class="footer-heading">公司信息</h4>
+          <h4 class="footer-heading">{{ t('common.companyInfo') }}</h4>
           <div class="contact-info">
             <div class="contact-item">
               <el-icon class="contact-icon"><Phone /></el-icon>
@@ -41,7 +40,7 @@
             </div>
             <div class="contact-item">
               <el-icon class="contact-icon"><Location /></el-icon>
-              <span>中国江苏省常州市武进区湟里镇村前村</span>
+              <span>{{ t('common.addressLabel') }}</span>
             </div>
             <div class="contact-item">
               <el-icon class="contact-icon"><ChatDotRound /></el-icon>
@@ -53,11 +52,11 @@
 
       <div class="footer-bottom">
         <div class="copyright">
-          版权所有 © 2026 山东首达特科技工程有限公司 保留所有权利。
+          {{ t('common.copyrightFull') }}
         </div>
         <div class="footer-legal">
-          <router-link to="/privacy-policy" class="legal-link">隐私政策</router-link>
-          <router-link to="/terms-of-service" class="legal-link">服务条款</router-link>
+          <router-link to="/privacy-policy" class="legal-link">{{ t('footer.privacy') }}</router-link>
+          <router-link to="/terms-of-service" class="legal-link">{{ t('footer.terms') }}</router-link>
         </div>
       </div>
     </div>
@@ -65,7 +64,9 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { Phone, Message, Location, ChatDotRound } from '@element-plus/icons-vue'
+const { t } = useI18n()
 </script>
 
 <style scoped lang="less">

demo-vue/src/components/Header.vue

@@ -2,13 +2,13 @@
   <div  class="header">
     <div class="header-menu">
       <div class="header-logo">
-        <div class="header-title">首达特后台管理系统</div>
+        <div class="header-title">{{ t('headerAdmin.title') }}</div>
       </div>
       <div class="header-rinfo">
-        当前用户：
+        {{ t('headerAdmin.currentUser') }}
         <span> {{ admin.name }} </span>
         <span class="header-exit">
-             <a @click="loginOut()">退出</a>
+             <a @click="loginOut()">{{ t('headerAdmin.logout') }}</a>
           </span>
       </div>
 
@@ -16,17 +16,18 @@
   </div>
 </template>
 <script setup>
+import { useI18n } from 'vue-i18n'
 import { useAdminStore } from '@/stores/admin';
 import { storeToRefs } from 'pinia';
+const { t } = useI18n()
 const adminStore = useAdminStore();
 const {admin} = storeToRefs(adminStore);
 import { adminApi } from '@/api/admin-api';
-//退出登录
 async function loginOut() {
   try {
     await adminApi.loginout();
   } catch (e) {
-
+    console.error('logout request failed', e);
   } finally {
     useAdminStore().loginOut();
     location.href="/login";

demo-vue/src/components/HeaderComponent.vue

@@ -2,36 +2,35 @@
   <header class="header">
     <div class="header-content">
       <div class="logo-section">
-        <span class="company-name">山东首达特科技工程有限公司</span>
+        <span class="company-name">{{ t('brand.company') }}</span>
       </div>
       <nav class="navigation">
         <router-link
           to="/"
           class="nav-item"
           :class="{ active: isActive('/') }"
-        >首页</router-link>
+        >{{ t('nav.home') }}</router-link>
 
         <div class="nav-item-wrapper" @mouseenter="handleMouseEnter('about')" @mouseleave="handleMouseLeave('about')">
-          <span class="nav-item" :class="{ active: isActive('/about') || isActive('/corporate-culture') || isActive('/production-base') || isActive('/organization') || isActive('/honors') || isActive('/development-history') }">关于我们</span>
+          <span class="nav-item" :class="{ active: isActive('/about') || isActive('/corporate-culture') || isActive('/production-base') || isActive('/organization') || isActive('/honors') || isActive('/development-history') }">{{ t('nav.aboutUs') }}</span>
           <div class="dropdown-menu" :class="{ show: dropdownStates.about }">
             <div class="dropdown-item" @click="navigateTo('/about')">
-              <div class="dropdown-item-main">公司简介</div>
+              <div class="dropdown-item-main">{{ t('nav.companyIntro') }}</div>
             </div>
             <div class="dropdown-item" @click="navigateTo('/corporate-culture')">
-              <div class="dropdown-item-main">企业文化</div>
+              <div class="dropdown-item-main">{{ t('nav.culture') }}</div>
             </div>
             <div class="dropdown-item" @click="navigateTo('/production-base')">
-              <div class="dropdown-item-main">生产基地</div>
+              <div class="dropdown-item-main">{{ t('nav.base') }}</div>
             </div>
             <div class="dropdown-item" @click="navigateTo('/organization')">
-              <div class="dropdown-item-main">组织架构</div>
+              <div class="dropdown-item-main">{{ t('nav.org') }}</div>
             </div>
-
             <div class="dropdown-item" @click="navigateTo('/honors')">
-              <div class="dropdown-item-main">荣誉资质</div>
+              <div class="dropdown-item-main">{{ t('nav.honors') }}</div>
             </div>
             <div class="dropdown-item" @click="navigateTo('/development-history')">
-              <div class="dropdown-item-main">发展历程</div>
+              <div class="dropdown-item-main">{{ t('nav.history') }}</div>
             </div>
           </div>
         </div>
@@ -40,30 +39,55 @@
           to="/products"
           class="nav-item"
           :class="{ active: isActive('/products') }"
-        >产品中心</router-link>
+        >{{ t('nav.products') }}</router-link>
 
         <div class="nav-item-wrapper" @mouseenter="handleMouseEnter('news')" @mouseleave="handleMouseLeave('news')">
-          <router-link to="/news" class="nav-item" :class="{ active: isActive('/news') || isActive('/industry') }">新闻中心</router-link>
+          <router-link to="/news" class="nav-item" :class="{ active: isActive('/news') || isActive('/industry') }">{{ t('nav.newsHub') }}</router-link>
           <div class="dropdown-menu" :class="{ show: dropdownStates.news }">
             <div class="dropdown-item" >
-              <div class="dropdown-item-main" @click="navigateTo('/news')">公司新闻</div>
+              <div class="dropdown-item-main" @click="navigateTo('/news')">{{ t('nav.companyNews') }}</div>
             </div>
             <div class="dropdown-item">
-              <div class="dropdown-item-main" @click="navigateTo('/industry')">行业动态</div>
+              <div class="dropdown-item-main" @click="navigateTo('/industry')">{{ t('nav.industryNews') }}</div>
             </div>
           </div>
         </div>
+
+        <el-dropdown class="lang-dropdown" @command="setLocale" trigger="click">
+          <span class="lang-trigger">{{ t('language.switch') }}: {{ currentLabel }}</span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="zh-CN">{{ t('language.zh') }}</el-dropdown-item>
+              <el-dropdown-item command="en-US">{{ t('language.en') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </nav>
     </div>
   </header>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
 const router = useRouter()
+const { t, locale } = useI18n()
+
+const currentLabel = computed(() =>
+  locale.value === 'en-US' ? t('language.en') : t('language.zh')
+)
+
+const setLocale = (lang: 'zh-CN' | 'en-US') => {
+  locale.value = lang
+  try {
+    localStorage.setItem('locale', lang)
+  } catch (e) {
+    console.error('set locale failed', e)
+  }
+}
 
 const isActive = (path: string) => {
   return route.path === path
@@ -88,6 +112,16 @@ const navigateTo = (path: string) => {
 </script>
 
 <style scoped lang="less">
+.lang-dropdown {
+  margin-left: 8px;
+  .lang-trigger {
+    cursor: pointer;
+    color: #666;
+    font-size: 14px;
+    white-space: nowrap;
+    &:hover { color: #1890ff; }
+  }
+}
 .header {
   position: fixed;
   top: 0;
@@ -125,7 +159,7 @@ const navigateTo = (path: string) => {
 
   .navigation {
     display: flex;
-    gap: 36px;
+    gap: 28px;
     align-items: center;
 
     .nav-item {

demo-vue/src/components/LeftMenu.vue

@@ -6,26 +6,32 @@
         <el-icon>
           <document />
         </el-icon>
-        <span slot="title">首页</span>
+        <span>{{ t('admin.leftHome') }}</span>
       </el-menu-item>
-      <el-sub-menu index="组织管理" :popper-class="'pdm-sidebar--dark-popper'">
+      <el-sub-menu index="org" :popper-class="'pdm-sidebar--dark-popper'">
         <template #title>
           <el-icon>
             <document />
           </el-icon>
-          <span slot="title">组织管理</span>
+          <span>{{ t('admin.org') }}</span>
         </template>
         <el-menu-item index="admin" @click="$router.push({ name: 'admin' })">
           <el-icon>
             <document />
           </el-icon>
-          <span slot="title">管理员信息管理</span>
+          <span>{{ t('admin.adminList') }}</span>
         </el-menu-item>
-        <el-menu-item index="admin" @click="$router.push({ name: 'news-manage' })">
+        <el-menu-item index="news-manage" @click="$router.push({ name: 'news-manage' })">
           <el-icon>
             <document />
           </el-icon>
-          <span slot="title">公司新闻管理</span>
+          <span>{{ t('admin.companyNewsManage') }}</span>
+        </el-menu-item>
+        <el-menu-item index="industry-manage" @click="$router.push({ name: 'industry-manage' })">
+          <el-icon>
+            <document />
+          </el-icon>
+          <span>{{ t('admin.industryManage') }}</span>
         </el-menu-item>
       </el-sub-menu>
     </el-menu>
@@ -35,16 +41,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
 import {
   Document,
-  Menu as IconMenu,
-  Location,
-  Setting,
 } from '@element-plus/icons-vue'
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
+const { t } = useI18n()
 </script>

demo-vue/src/composables/useLocaleBlockHtml.ts

@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+/**
+ * 根据当前语言在两块预加载的 HTML 原文之间切换（用于长文静态页 body）。
+ */
+export function useLocaleBlockHtml(zh: string, en: string) {
+  const { locale } = useI18n()
+  return computed(() => (locale.value === 'en-US' ? en : zh))
+}

demo-vue/src/data/productImages.ts

@@ -0,0 +1,41 @@
+import productImg1 from '@/assets/images/img1-1.png'
+import productImg2 from '@/assets/images/img1-2.png'
+import productImg3 from '@/assets/images/img2-1.png'
+import productImg4 from '@/assets/images/img2-2.png'
+import productImg5 from '@/assets/images/img3-1.png'
+import productImg6 from '@/assets/images/img3-2.jpg'
+import productImg7 from '@/assets/images/img4-1.png'
+import productImg8 from '@/assets/images/img4-2.png'
+import productImg9 from '@/assets/images/img5-1.png'
+import productImg10 from '@/assets/images/img5-2.png'
+import productImg11 from '@/assets/images/img6-1.png'
+import productImg12 from '@/assets/images/img6-2.png'
+import productImg13 from '@/assets/images/img7-1.png'
+import productImg14 from '@/assets/images/img7-2.png'
+import productImg15 from '@/assets/images/img8-1.png'
+import productImg16 from '@/assets/images/img8-2.png'
+import productImg17 from '@/assets/images/img9-1.png'
+import productImg18 from '@/assets/images/img9-2.png'
+import productImg19 from '@/assets/images/img10-1.png'
+import productImg20 from '@/assets/images/img11-1.png'
+import productImg21 from '@/assets/images/img12-1.png'
+
+import type { ProductImageBundle } from '@/locales/types'
+
+/** 与文案目录中 product id 一一对应 */
+export const productImagesById: ProductImageBundle = {
+  changhong: [productImg1, productImg2],
+  mu5pro: [productImg3, productImg4],
+  superknight: [productImg5, productImg6],
+  child18: [productImg7, productImg8],
+  moli1: [productImg9, productImg10],
+  moli2: [productImg11, productImg12],
+  yadea: [productImg13, productImg14],
+  fengsu: [productImg15, productImg16],
+  anying: [productImg17, productImg18],
+  tractor6090: [productImg19],
+  tractor665: [productImg20],
+  leiting300: [productImg21]
+}
+
+export const homeFeaturedProductIds = ['changhong', 'mu5pro', 'superknight'] as const

demo-vue/src/locales/en-US/catalog.ts

@@ -0,0 +1,230 @@
+import type { ProductItemText } from '../types'
+
+export const productCategoryLabelsEn = {
+  all: 'All Products',
+  ebike: 'E-Bike Series',
+  emoto: 'Electric Motorcycle Series',
+  trike: 'Civilian Tricycle Series',
+  tractor: 'Compact Farm Machinery Series'
+} as const
+
+export const productsEn: ProductItemText[] = [
+  {
+    id: 'changhong',
+    categoryKey: 'ebike',
+    name: 'Changhong',
+    tags: ['Li/Lead-acid', 'Long range'],
+    description: 'Changhong smart e-bike | dual battery, hydraulic shock, disc brakes.',
+    specs: [
+      { value: 'Lithium 60V45AH / lead-acid 72V/20Ah', label: 'Battery', enLabel: 'BATTERY', valueEn: 'Lithium 60V45AH lead-acid 72V/20Ah' },
+      { value: '1000W', label: 'Motor', enLabel: 'MOTOR', valueEn: '1000W' },
+      { value: '12-tube controller', label: 'Controller', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
+      { value: '3.0-10 iron wheel vacuum', label: 'Tires', enLabel: 'TIRES', valueEn: '3.0-10 iron wheel vacuum tire' },
+      { value: 'Hydraulic fork, 7.0*290 shock', label: 'Shock', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 shock' },
+      { value: 'Front / rear disc', label: 'Brake', enLabel: 'BRAKE', valueEn: 'Disc brakes' },
+      { value: '90-100 km mid-speed range', label: 'Dashboard', enLabel: 'DASHBOARD', valueEn: 'Mid-speed range 90-100 km' },
+      { value: 'Lens headlight, taillight', label: 'Lighting', enLabel: 'LIGHTING', valueEn: 'Lens headlight, taillight' },
+      { value: '1790*680*1060mm', label: 'Dimensions', enLabel: 'OVERALL', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'mu5pro',
+    categoryKey: 'ebike',
+    name: 'MU5PRO',
+    tags: ['Li/lead-acid', 'Large battery'],
+    description: 'MU5PRO long-range e-bike | 1000W, 90-100 km range.',
+    specs: [
+      { value: 'Lithium 60V45AH / lead-acid 72V/20Ah', label: 'Battery', enLabel: 'BATTERY', valueEn: 'Lithium 60V45AH lead-acid 72V/20Ah' },
+      { value: '1000W', label: 'Motor', enLabel: 'MOTOR', valueEn: '1000W' },
+      { value: '12-tube controller', label: 'Controller', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
+      { value: '3.0-12 vacuum', label: 'Tires', enLabel: 'TIRES', valueEn: '3.0-12 vacuum tire' },
+      { value: 'Hydraulic fork, lotus seat 7.0*290', label: 'Shock', enLabel: 'SHOCK', valueEn: 'Hydraulic fork, lotus seat' },
+      { value: 'Front / rear disc', label: 'Brake', enLabel: 'BRAKE', valueEn: 'Disc brakes' },
+      { value: '90-100 km range', label: 'Dashboard', enLabel: 'DASHBOARD', valueEn: '90-100 km' },
+      { value: 'Headlight, taillight', label: 'Lighting', enLabel: 'LIGHTING', valueEn: 'Headlight, taillight' },
+      { value: '1940*670*1130mm', label: 'Dimensions', enLabel: 'OVERALL', valueEn: '1940*670*1130mm' }
+    ]
+  },
+  {
+    id: 'superknight',
+    categoryKey: 'ebike',
+    name: 'Super Knight',
+    tags: ['Large battery', 'Disc brakes', 'NFC'],
+    description: 'Super Knight commuter e-bike | 1200W, NFC smart unlock.',
+    specs: [
+      { value: 'Lithium 60V24AH', label: 'Battery', enLabel: 'BATTERY', valueEn: 'Lithium 60V24AH' },
+      { value: '1200W', label: 'Motor', enLabel: 'MOTOR', valueEn: '1200W' },
+      { value: '12-tube controller', label: 'Controller', enLabel: 'CONTROLLER', valueEn: '12-channel' },
+      { value: '90/90-12 CY610 vacuum', label: 'Tires', enLabel: 'TIRES', valueEn: '90/90-12 vacuum' },
+      { value: 'Hydraulic shock', label: 'Shock', enLabel: 'SHOCK', valueEn: 'Hydraulic' },
+      { value: 'Front / rear disc', label: 'Brake', enLabel: 'BRAKE', valueEn: 'Disc brakes' },
+      { value: 'NFC', label: 'Dashboard', enLabel: 'DASHBOARD', valueEn: 'NFC' },
+      { value: 'Convex headlight, taillight', label: 'Lighting', enLabel: 'LIGHTING', valueEn: 'Convex headlight' },
+      { value: '1850*670*1150mm', label: 'Dimensions', enLabel: 'OVERALL', valueEn: '1850*670*1150mm' }
+    ]
+  },
+  {
+    id: 'child18',
+    categoryKey: 'trike',
+    name: 'Load 1.8',
+    tags: ['Tricycle', 'Heavy load', 'Jialing', 'Short haul'],
+    description: 'JL 1.8 tricycle, strong load, Jialing maglev control for short-haul transport.',
+    specs: [
+      { label: 'Dimensions', enLabel: 'DIMENSIONS', value: '3300*1380*1415', valueEn: '3300*1380*1415mm' },
+      { label: 'Power', enLabel: 'POWER', value: 'Jialing maglev 1200W', valueEn: 'Jialing maglev 1200W' },
+      { label: 'Tires', enLabel: 'TIRE', value: 'Front 400-12 / rear 450-12 steel', valueEn: '400-12 / 450-12' },
+      { label: 'Shock', enLabel: 'SHOCK', value: '43 external spring', valueEn: '43 ext. spring' },
+      { label: 'Rear axle', enLabel: 'AXLE', value: 'Full floating 180', valueEn: 'Full floating 180' }
+    ]
+  },
+  {
+    id: 'moli1',
+    categoryKey: 'trike',
+    name: 'Moli V1',
+    tags: ['Tricycle', 'IRS', 'Disc', 'Rear camera'],
+    description: 'Moli V1 tricycle, IRS, disc brakes, rear camera and warm air.',
+    specs: [
+      { label: 'Dimensions', enLabel: 'DIMENSIONS', value: '2750×1225×1670mm', valueEn: '2750×1225×1670mm' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'IRS front & rear disc', valueEn: 'IRS + disc' },
+      { label: 'Tires', enLabel: 'TIRES', value: '400-10 vacuum', valueEn: '400-10' },
+      { label: 'Motor', enLabel: 'MOTOR', value: '800W sine wave', valueEn: '800W' },
+      { label: 'Controller', enLabel: 'CTRL', value: 'Dual 18-tube', valueEn: 'Dual 18' },
+      { label: 'Voltage', enLabel: 'VOLT', value: '48V/60V', valueEn: '48V/60V' },
+      { label: 'Standard', enLabel: 'STD', value: 'Camera, sunroof, heat, disc, rear sus.', valueEn: 'Full spec' }
+    ]
+  },
+  {
+    id: 'moli2',
+    categoryKey: 'trike',
+    name: 'Moli V2',
+    tags: ['Tricycle', 'Compact', 'IRS', 'Urban'],
+    description: 'Moli V2 compact tricycle, IRS, warm air, ideal for city use.',
+    specs: [
+      { label: 'Dimensions', enLabel: 'DIMENSIONS', value: '2410×1225×1670mm', valueEn: '2410×1225×1670mm' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'IRS front & rear disc', valueEn: 'IRS + disc' },
+      { label: 'Tires', enLabel: 'TIRES', value: '400-10 vacuum', valueEn: '400-10' },
+      { label: 'Motor', enLabel: 'MOTOR', value: '800W sine wave', valueEn: '800W' },
+      { label: 'Controller', enLabel: 'CTRL', value: 'Dual 18-tube', valueEn: 'Dual 18' },
+      { label: 'Voltage', enLabel: 'VOLT', value: '48V/60V', valueEn: '48V/60V' },
+      { label: 'Standard', enLabel: 'STD', value: 'Camera, sunroof, heat, disc, rear sus.', valueEn: 'Full spec' }
+    ]
+  },
+  {
+    id: 'yadea',
+    categoryKey: 'emoto',
+    name: 'Yadea Guanneng IF8',
+    tags: ['Graphene', 'BLDC', 'Disc', 'Range'],
+    description: 'Yadea IF8 e-moto | graphene Gen3 PLUS, 1200W BLDC, ~85 km range.',
+    specs: [
+      { label: 'Battery', enLabel: 'BATTERY', value: 'TTFAR Graphene 3rd PLUS 72V23Ah', valueEn: '72V23Ah (Li optional)' },
+      { label: 'Motor', enLabel: 'MOTOR', value: '1200W BLDC', valueEn: '1200W BLDC' },
+      { label: 'Controller', enLabel: 'CTRL', value: 'Yadea TTFAR smart', valueEn: 'TTFAR' },
+      { label: 'Tires', enLabel: 'TIRES', value: '3.0-10 vacuum', valueEn: '3.0-10' },
+      { label: 'Shock', enLabel: 'SHOCK', value: 'Hydraulic fork + dual rear', valueEn: 'Hydraulic' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Dual disc F/R', valueEn: 'Disc' },
+      { label: 'Dashboard', enLabel: 'DASH', value: 'LCD, ~85 km', valueEn: 'LCD' },
+      { label: 'Lighting', enLabel: 'LIGHT', value: 'LED head + tail + turn', valueEn: 'LED' },
+      { label: 'Dimensions', enLabel: 'OVERALL', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'fengsu',
+    categoryKey: 'emoto',
+    name: 'Fengsu Phantom',
+    tags: ['Dual battery', 'High power', 'Disc', 'Range'],
+    description: 'Fengsu Phantom | 1000W BLDC, dual battery, 90-100 km.',
+    specs: [
+      { label: 'Battery', enLabel: 'BATTERY', value: 'Li 60V45 / Pb 72V/20 (opt.)', valueEn: 'Optional dual' },
+      { label: 'Motor', enLabel: 'MOTOR', value: '1000W BLDC', valueEn: '1000W' },
+      { label: 'Controller', enLabel: 'CTRL', value: '12-tube smart', valueEn: '12-tube' },
+      { label: 'Tires', enLabel: 'TIRES', value: '3.0-10 vacuum', valueEn: '3.0-10' },
+      { label: 'Shock', enLabel: 'SHOCK', value: 'Hydraulic F + R', valueEn: 'Hydraulic' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Front / rear disc', valueEn: 'Disc' },
+      { label: 'Dashboard', enLabel: 'DASH', value: 'LCD, 90-100 km', valueEn: 'LCD' },
+      { label: 'Lighting', enLabel: 'LIGHT', value: 'Lens, LED tail & turn', valueEn: 'LED' },
+      { label: 'Dimensions', enLabel: 'OVERALL', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'anying',
+    categoryKey: 'emoto',
+    name: 'Shadow Knight',
+    tags: ['Dual battery', 'BLDC', 'Disc', 'Range'],
+    description: 'Shadow Knight | 1000W BLDC, dual battery, 90-100 km.',
+    specs: [
+      { label: 'Battery', enLabel: 'BATTERY', value: 'Li 60V45 / Pb 72V/20', valueEn: 'Dual option' },
+      { label: 'Motor', enLabel: 'MOTOR', value: '1000W BLDC', valueEn: '1000W' },
+      { label: 'Controller', enLabel: 'CTRL', value: '12-tube smart', valueEn: '12-tube' },
+      { label: 'Tires', enLabel: 'TIRES', value: '3.0-10 iron vacuum', valueEn: '3.0-10' },
+      { label: 'Shock', enLabel: 'SHOCK', value: 'Hydraulic 7.0*290', valueEn: 'Hydraulic' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Front / rear disc', valueEn: 'Disc' },
+      { label: 'Dashboard', enLabel: 'DASH', value: '90-100 km', valueEn: 'Dash' },
+      { label: 'Lighting', enLabel: 'LIGHT', value: 'Lens, LED, flow turn', valueEn: 'LED' },
+      { label: 'Dimensions', enLabel: 'OVERALL', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'tractor6090',
+    categoryKey: 'tractor',
+    name: 'Power King 6090',
+    tags: ['300 HP', '4WD', 'Hydraulic', 'Auto steer'],
+    description: '6090 tractor | 300 HP inline-6, PowerShift, full wet brake.',
+    specs: [
+      { label: 'Engine', enLabel: 'ENGINE', value: '6-cyl 9.0L turbo', valueEn: '6-cyl 9.0L' },
+      { label: 'Power', enLabel: 'POWER', value: '300 HP / 220.5 kW', valueEn: '300 HP' },
+      { label: 'Net power', enLabel: 'NET', value: '326.3 HP / 240 kW', valueEn: '326 HP' },
+      { label: 'Transmission', enLabel: 'TRANS', value: '16×4 PowerShift', valueEn: 'PowerShift' },
+      { label: 'PTO', enLabel: 'PTO', value: '1000 r/min, 187.5 kW', valueEn: '1000' },
+      { label: 'Hydraulic', enLabel: 'HYD', value: '4 e-valves, 288.3 kN lift', valueEn: 'E-hyd' },
+      { label: 'Tires', enLabel: 'TIRES', value: '600/70R30 F / 650/85R38 R', valueEn: 'std/opt' },
+      { label: 'Hitch', enLabel: 'HITCH', value: 'Cat 3/4N 3-pt', valueEn: '3-pt' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Full wet hydraulic', valueEn: 'Wet' },
+      { label: 'Cab', enLabel: 'CAB', value: '1750 air seat, A/C', valueEn: 'Premium' },
+      { label: 'Nav', enLabel: 'NAV', value: 'CommandCenter, ATI', valueEn: 'Auto' },
+      { label: 'Dimensions', enLabel: 'SIZE', value: '6613×3012-3351×3403', valueEn: 'mm' }
+    ]
+  },
+  {
+    id: 'tractor665',
+    categoryKey: 'tractor',
+    name: 'Challenger MT665D',
+    tags: ['340 HP', 'CVT', 'Wet brake', 'Panoramic cab'],
+    description: 'MT665D | 340 HP diesel, CVT, full wet brake.',
+    specs: [
+      { label: 'Engine', enLabel: 'ENGINE', value: 'AGCO 8.4L I6 diesel', valueEn: '8.4L' },
+      { label: 'Power', enLabel: 'PWR', value: '340 HP / 253.5 kW', valueEn: '340 HP' },
+      { label: 'PTO power', enLabel: 'PTO', value: '290 HP / 216.3 kW', valueEn: '290' },
+      { label: 'Transmission', enLabel: 'TRANS', value: 'CVT, 2 ranges', valueEn: 'CVT' },
+      { label: 'PTO', enLabel: 'PTO', value: '1000 r/min dual', valueEn: '1000' },
+      { label: 'Hydraulic', enLabel: 'HYD', value: 'Closed 160 L/min', valueEn: '160' },
+      { label: 'Tires', enLabel: 'TIRES', value: '480/70R34 F, 520/85R46 R', valueEn: 'opt dual' },
+      { label: 'Hitch', enLabel: 'HITCH', value: 'Cat III, ≥85 kN', valueEn: 'Cat III' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Full wet', valueEn: 'Wet' },
+      { label: 'Cab', enLabel: 'CAB', value: 'Panoramic glass, A/C', valueEn: 'A/C' },
+      { label: 'Fuel', enLabel: 'FUEL', value: '632 L', valueEn: '632' },
+      { label: 'Dimensions', enLabel: 'SIZE', value: '≈5500×2700×3200', valueEn: 'mm' },
+      { label: 'Weight', enLabel: 'WT', value: '≈11500 kg', valueEn: 'kg' }
+    ]
+  },
+  {
+    id: 'leiting300',
+    categoryKey: 'tractor',
+    name: 'Leiting 300HP',
+    tags: ['300 HP', 'I6', 'PowerShift', 'Wet brake'],
+    description: 'Leiting 300 HP | I6 common rail, PowerShift, full wet.',
+    specs: [
+      { label: 'Engine', enLabel: 'ENGINE', value: 'I6 common rail diesel', valueEn: 'I6' },
+      { label: 'Power', enLabel: 'PWR', value: '220 kW / ~300 HP', valueEn: '300' },
+      { label: 'Transmission', enLabel: 'TRANS', value: 'PowerShift', valueEn: 'PS' },
+      { label: 'PTO', enLabel: 'PTO', value: '1000 r/min', valueEn: '1000' },
+      { label: 'Hydraulic', enLabel: 'HYD', value: 'Closed ≥150 L/min', valueEn: '150' },
+      { label: 'Tires', enLabel: 'TIRES', value: '540/65R30 F, 650/85R38 R', valueEn: 'dual R' },
+      { label: 'Hitch', enLabel: 'HITCH', value: 'Cat III, ≥90 kN', valueEn: '90' },
+      { label: 'Brake', enLabel: 'BRAKE', value: 'Full wet', valueEn: 'Wet' },
+      { label: 'Cab', enLabel: 'CAB', value: 'Panoramic, A/C, air seat', valueEn: 'A/C' },
+      { label: 'Fuel', enLabel: 'FUEL', value: '≈500 L', valueEn: '500' },
+      { label: 'Dimensions', enLabel: 'SIZE', value: '≈6200×3000×3300', valueEn: 'mm' },
+      { label: 'Weight', enLabel: 'WT', value: '≈10500 kg', valueEn: 'kg' }
+    ]
+  }
+]

demo-vue/src/locales/en-US/index.ts

@@ -0,0 +1,10 @@
+import { messages } from './messages'
+import { productCategoryLabelsEn, productsEn } from './catalog'
+
+export default {
+  ...messages,
+  catalog: {
+    categoryLabels: productCategoryLabelsEn,
+    products: productsEn
+  }
+}

demo-vue/src/locales/en-US/messages.ts

@@ -0,0 +1,172 @@
+export const messages = {
+  common: {
+    enable: 'Enabled',
+    disable: 'Disabled',
+    status: 'Status',
+    search: 'Search',
+    add: 'Add',
+    addShort: 'Add',
+    edit: 'Edit',
+    delete: 'Delete',
+    batchDelete: 'Delete selected',
+    operation: 'Actions',
+    confirm: 'OK',
+    cancel: 'Cancel',
+    name: 'Name',
+    phone: 'Phone',
+    username: 'Username',
+    password: 'Password',
+    sex: 'Gender',
+    male: 'Male',
+    female: 'Female',
+    selectPlaceholder: 'Select',
+    createTime: 'Created',
+    success: 'Success',
+    logOut: 'Log out',
+    currentUser: 'User',
+    backToList: 'Back to list',
+    back: 'Back',
+    detail: 'Details',
+    yes: 'Yes',
+    no: 'No',
+    goTo: 'Go to',
+    toPage: 'Page',
+    pageUnit: '',
+    specBasicCn: 'Basic config',
+    specBasicEn: 'BASIC CONFIGURATION',
+    more: 'Show more',
+    collapse: 'Collapse',
+    views: 'Views',
+    publishDate: 'Published',
+    dateLabel: 'Published: ',
+    viewsLabel: 'Views: ',
+    companyShort: 'Shandong Showdart Tech',
+    wechatOA: 'WeChat OA: Showdart',
+    allRights: 'All rights reserved',
+    copyrightFull: 'Copyright © 2026 Shandong Showdart Technology Engineering Co., Ltd. All rights reserved.',
+    companyInfo: 'Company',
+    addressLabel: 'Cunqian Village, Huangli Town, Wujin District, Changzhou, Jiangsu, China'
+  },
+  language: { zh: '中文', en: 'English', switch: 'Language' },
+  nav: {
+    home: 'Home',
+    aboutUs: 'About',
+    companyIntro: 'Profile',
+    culture: 'Culture',
+    base: 'Production',
+    org: 'Organization',
+    honors: 'Awards',
+    history: 'History',
+    products: 'Products',
+    newsHub: 'News',
+    companyNews: 'Company news',
+    industryNews: 'Industry'
+  },
+  footer: {
+    about: 'About us',
+    news: 'News',
+    followIndustry: 'Industry',
+    siteSubtitle: 'Showdart website',
+    privacy: 'Privacy',
+    terms: 'Terms'
+  },
+  brand: { company: 'Shandong Showdart Technology Engineering Co., Ltd.' },
+  headerAdmin: { title: 'Showdart Admin', currentUser: 'User', logout: 'Log out' },
+  home: {
+    heroTitle1: 'Built on trust and quality,',
+    heroTitle2: 'leading the market with intelligence',
+    heroSub: 'Smart material handling for global logistics',
+    btnProducts: 'View products',
+    btnContact: 'Contact us',
+    aboutTitle: 'About us',
+    aboutP1: 'Founded 7 Aug 2024, Showdart is an integrated R&D, manufacturing, sales, and service company. We focus on electromechanical equipment, smart control, and industrial products, covering machinery, automation, software, materials, building materials, hardware, chemicals, auto and farm parts, and import/export.',
+    aboutP2: 'With a solid supply chain and professional team, we serve construction, industry, logistics, and agriculture with one-stop solutions—across China and worldwide.',
+    more: 'Learn more',
+    showcaseTitle: 'Products',
+    showcaseSub: 'Full range of smart handling equipment. Certified processes to match your needs.',
+    viewAll: 'View all',
+    carouselAlt1: 'Aerial view of production base 1',
+    carouselAlt2: 'Aerial view of production base 2',
+    carouselAlt3: 'Aerial view of production base 3'
+  },
+  about: {
+    title: 'Showdart Technology Engineering (Shandong) Co., Ltd.',
+    section: 'Company profile',
+    p1: 'An integrated R&D, manufacturing, and trading company registered in Jining, Shandong, with compliant operations in engineering, industry, and trade.',
+    scopeTitle: 'Scope',
+    scopeP: 'We serve intelligent building design, machinery sales and R&D, electromechanical manufacturing, metal products, surface treatment, software and electronics, general goods and chemicals (non-licensed), hardware, auto and motorcycle parts, textiles, livestock, and import/export worldwide.',
+    missionTitle: 'Mission',
+    missionP: 'From Shandong to the country and the world, we empower industry with technology and create value with service—driving smart industry and win-win with customers and society.',
+    advTitle: 'Strengths',
+    adv1: 'Diversified portfolio and cross-sector resource integration with strong risk resilience.',
+    adv2: 'End-to-end capability from R&D and production to sales, import/export, and one-stop customer solutions.',
+    adv3: 'Compliant operation between licensed and general projects, supporting long-term stability.',
+    adv4: 'Flexible offer across industry, construction, agriculture, and consumer segments.'
+  },
+  productsPage: {
+    bannerTitle: 'Multi-category supply for equipment and materials',
+    bannerSub: 'With a compliant business system and professional quality, we support R&D, manufacturing, materials, and global trade in many scenarios—one-stop solutions for your needs.',
+    filterLabel: 'Filter by category',
+    filterAll: 'All products'
+  },
+  services: {
+    pageTitle: 'Our services',
+    pageSub: 'Top-tier credentials, four core processes, 400,000 units/year—full-chain smart handling from design to delivery.',
+    s1: 'End-to-end solutions',
+    s1d: 'From custom design to global delivery and marketing support across the product lifecycle.',
+    c1t: 'OEM / ODM', c1d: 'Flexible configuration and co-development with our engineering and manufacturing base.',
+    c1a: 'Configurable for different use cases', c1b: 'Colors, branding, and ID', c1c: 'Custom packaging', c1e: 'Support from concept to volume production',
+    c2t: 'Precision manufacturing', c2d: 'Modern plants and four key processes for consistency and output.',
+    c2a: 'Stamping, welding, paint, and assembly', c2b: 'Automated lines for accuracy and speed', c2c: '400k units / year capacity', c2e: 'Sustainable, green production',
+    c3t: 'Quality control', c3d: 'Five quality gates for safe, reliable equipment.',
+    c3L1: 'Incoming material control', c3L2: 'In-process checks', c3L3: 'Finished goods testing', c3L4: 'CE and international approvals',
+    c4t: 'Global delivery', c4d: 'Logistics and compliance for fast, safe worldwide shipment.',
+    c4L1: 'Export documentation support', c4L2: 'Sea, air, and multimodal options', c4L3: 'Protective export packaging', c4L4: 'End-to-end tracking',
+    c5t: 'After sales', c5d: 'Responsive global support network.',
+    c5L1: 'Technical support teams', c5L2: 'Warranty and genuine spare parts', c5L3: 'Remote guidance', c5L4: '24/7 response where applicable',
+    c6t: 'Go-to-market', c6d: 'Helping partners grow with marketing and training.',
+    c6L1: 'Product assets and collateral', c6L2: 'Market trends and playbooks', c6L3: 'Sales training', c6L4: 'Co-branding and campaigns',
+    procTitle: 'How we work', procSub: 'A clear four-step path from your needs to on-site use.',
+    p1t: 'Discovery', p1d: 'We align on market, use case, and product requirements with a dedicated contact.',
+    p2t: 'Solution', p2d: 'Configuration, feasibility, and a tailored offer based on our processes and R&D.',
+    p3t: 'Build', p3d: 'Manufacturing under our quality system and agreed lead times.',
+    p4t: 'Deliver', p4d: 'Logistics, export services, and safe arrival worldwide.',
+    faqTitle: 'FAQ', faqSub: 'Common questions from partners. Contact us for more.',
+    faqContact: 'Contact support',
+    fq1: 'What is the MOQ?', fa1: 'We support flexible MOQs for new partners; full-container orders are typical—details depend on product and need.',
+    fq2: 'OEM / brand customization?', fa2: 'Yes—configuration, brand, color, and packaging in full OEM/ODM scope.',
+    fq3: 'Lead time for production and delivery?', fa3: 'Production often 15–25 working days by volume. Transit typically 15–45 days by destination. Rush options on request.',
+    fq4: 'Spare parts?', fa4: 'Yes—spare part kits and a full original parts pipeline for long-term operation.',
+    ctaTitle: 'Start a project', ctaSub: 'Let’s build your smart handling solution on our certified manufacturing base.',
+    ctaQuote: 'Get a quote', ctaView: 'View products'
+  },
+  privacy: {
+    title: 'Privacy policy', updated: 'Last updated: 19 Feb 2025', intro: 'This policy describes how we collect and use your information.',
+    c1: 'What we collect', c1p: 'Information you give us, such as:', c1a: 'Account', c1b: 'Usage', c1c: 'Preferences',
+    c2: 'How we use it', c2p: 'We use it to:', c2a: 'Provide the service', c2b: 'Improve experience', c2c: 'Send important updates',
+    c3: 'Security', c3p: 'We use appropriate measures to protect your data.',
+    c4: 'Contact', c4p: 'For privacy questions, contact our team.',
+    c5: 'Updates', c5p: 'We may update this policy from time to time.'
+  },
+  terms: {
+    title: 'Terms of service', updated: 'Last updated: 19 Feb 2025', intro: 'By using this site you agree to these terms.',
+    t1: '1. Acceptance', t1p: 'Using the site means you accept this agreement.',
+    t2: '2. Your responsibilities', t2p: 'You agree to:', t2a: 'Provide accurate information', t2b: 'Keep your account safe', t2c: 'Follow applicable laws',
+    t3: '3. Changes', t3p: 'We may:', t3a: 'Change or end services', t3b: 'Update these terms',
+    t4: 'Contact', t4p: 'Questions? Please contact us.'
+  },
+  news: {
+    listTitle: 'Title', content: 'Content', views: 'Views', adminTitle: 'News',
+    batchWarn: 'Select rows to delete', delOk: 'Deleted', delConfirm: 'Delete this item?', delTitle: 'Confirm delete', selectDate: 'Pick date', enterTitle: 'Enter title', enterContent: 'Enter content', pickDate: 'Select publish date', pickStatus: 'Select status', saveOkAdd: 'Added', saveOkEdit: 'Updated',
+    publicBanner: 'Company news', listBannerSub: 'NEWS', detailBannerSub: 'NEWS', metaDateLabel: 'Published: ', labelPublishDate: 'Publish date', newsCenter: 'News', newsDetail: 'Article', fetchFail: 'Failed to load news', fetchDetailFail: 'Failed to load article', noId: 'No article id', viewsIncrFail: 'View count update failed', backList: 'Back to list', publishTime: 'Published: '
+  },
+  industry: {
+    listTitle: 'Title', content: 'Content', colTitle: 'Title', adminTitle: 'Industry', detailTitle: 'Industry article', detailTitleSub: 'NEWS', listBanner: 'Industry', listBannerSub: 'INDUSTRY', labelPublishDate: 'Publish date', plTitle: 'Enter title', plContent: 'Enter content', fetchFail: 'Failed to load list', publicTime: 'Published: ', returnList: 'Back to list', fetchDetailFail: 'Failed to load article', breadcrumbDetail: 'Detail'
+  },
+  admin: {
+    welcome: 'Welcome to Showdart Admin', loginTitle: 'Showdart Admin', login: 'Sign in', plUser: 'Username', plPwd: 'Password', ok: 'Signed in', fail: 'Sign-in failed', avatar: 'Avatar', leftHome: 'Home', org: 'Organization', adminList: 'Administrators', companyNewsManage: 'Company news', industryManage: 'Industry posts',
+    delWarn: 'Select rows to delete', delOk: 'Deleted', delConfirm: 'Delete?', delTitle: 'Confirm', saveOk: 'Success', reLogin: 'Session expired. Sign in again', reLoginTitle: 'Session ended', reLoginBtn: 'Sign in again'
+  },
+  request: { notLogin: 'Not signed in. Please sign in again', timeout: 'Request timed out', network: 'Network error', error: 'Request failed' },
+  formRules: { userRequired: 'Username required', pwdRequired: 'Password required', nameRequired: 'Name required', sexRequired: 'Gender required', telRequired: 'Phone required', phoneEmpty: 'Phone required', phoneDigits: 'Digits only', phoneInvalid: 'Invalid phone' }
+}

demo-vue/src/locales/html/corporate-culture.en.html

@@ -0,0 +1,52 @@
+      <section class="page-header">
+        <div class="header-wrapper">
+          <h1 class="page-title">Showdart (Shandong) – Corporate Culture</h1>
+          <h2 class="section-title">Overview</h2>
+        </div>
+      </section>
+
+      <section class="culture-sections">
+        <div class="content-wrapper">
+          <div class="culture-item">
+            <p class="content-text">Culture is part of our core competence: integrity, innovation, collaboration, and win–win—building a positive workplace and sustainable growth.</p>
+          </div>
+
+          <div class="culture-item">
+            <h3 class="subsection-title">Mission</h3>
+            <p class="sub-subtitle">Connect global technology and trade for a better future</p>
+            <p class="content-text">We create value for customers, opportunity for our people, and positive impact for society through products and service excellence.</p>
+          </div>
+
+          <div class="culture-item">
+            <h3 class="subsection-title">Vision</h3>
+            <p class="sub-subtitle">A leading global steel product trading partner</p>
+            <p class="content-text">We invest in quality, service, and brand to grow market share and sustainable performance.</p>
+          </div>
+
+          <div class="culture-item">
+            <h3 class="subsection-title">Core values</h3>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">Integrity</h4>
+                <p class="value-desc">We are honest with customers, partners, people, and communities—trust is the foundation of our brand.</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">Innovation</h4>
+                <p class="value-desc">We encourage new ideas in products, business models, and management to stay ahead of change.</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">Collaboration</h4>
+                <p class="value-desc">We work as one team and with customers and suppliers for mutual success.</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">Customer first</h4>
+                <p class="value-desc">We focus on real needs and aim to exceed expectations in every delivery.</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">Excellence</h4>
+                <p class="value-desc">We raise the bar on quality, safety, and service in everything we do.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/corporate-culture.zh.html

@@ -0,0 +1,214 @@
+      <!-- 标题区域 -->
+      <section class="page-header">
+        <div class="header-wrapper">
+          <h1 class="page-title">首达特科技工程（山东）有限公司企业文化</h1>
+          <h2 class="section-title">企业文化概述</h2>
+        </div>
+      </section>
+
+      <!-- 企业文化内容区域 -->
+      <section class="culture-sections">
+        <div class="content-wrapper">
+          <!-- 企业文化概述 -->
+          <div class="culture-item">
+            <p class="content-text">
+              首达特科技工程（山东）有限公司自成立以来，始终重视企业文化建设，将文化作为企业发展的灵魂和动力。经过多年的沉淀和发展，形成了独具特色的企业文化体系，成为公司核心竞争力的重要组成部分。
+            </p>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司的企业文化以"诚信、创新、协作、共赢"为核心理念，致力于营造一个积极向上、充满活力的工作环境，激发员工潜能，推动企业可持续发展。
+            </p>
+          </div>
+
+          <!-- 企业使命 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">企业使命</h3>
+            <p class="sub-subtitle">连接全球科技贸易，创造美好未来</p>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司以促进全球钢铁贸易的发展为己任，通过提供优质的产品和服务，为客户创造价值，为员工提供发展平台，为社会做出贡献，共同创造更加美好的未来。
+            </p>
+          </div>
+
+          <!-- 企业愿景 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">企业愿景</h3>
+            <p class="sub-subtitle">成为全球领先的钢铁制品贸易商</p>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司致力于成为全球钢铁制品贸易领域的领导者，通过不断提升产品质量和服务水平，扩大市场份额，增强品牌影响力，实现企业的可持续发展。
+            </p>
+          </div>
+
+          <!-- 核心价值观 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">核心价值观</h3>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">诚信为本</h4>
+                <p class="value-desc">
+                  诚信是首达特科技工程（山东）有限公司的企业文化。我们坚持诚实守信的原则，对客户、对供应商、对员工、对社会保持高度的诚信，以诚信赢得信任，以诚信铸就品牌。
+                </p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">创新驱动</h4>
+                <p class="value-desc">
+                  创新是首达特科技工程（山东）有限公司发展的动力源泉。我们鼓励员工不断创新思维，勇于突破传统，积极探索新的业务模式和管理方法，以创新推动企业发展。
+                </p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">协作共赢</h4>
+                <p class="value-desc">
+                  协作是首达特科技工程（山东）有限公司的企业文化。我们强调团队合作精神，鼓励部门之间、员工之间的协作配合，同时注重与客户、供应商等利益相关方的合作，实现互利共赢。
+                </p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">客户至上</h4>
+                <p class="value-desc">
+                  客户是首达特科技工程（山东）有限公司的核心价值。我们始终以客户为中心，关注客户需求，不断提升服务质量，为客户提供优质的产品和解决方案，超越客户期望。
+                </p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">追求卓越</h4>
+                <p class="value-desc">
+                  卓越是首达特科技工程（山东）有限公司的企业文化。我们不满足于现状，不断挑战自我，追求更高的目标和更好的业绩，以卓越的品质和服务赢得市场认可。
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 企业精神 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">企业精神</h3>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">艰苦创业</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司继承和艰苦创业的精神，不怕困难，勇于拼搏，在激烈的市场竞争中奋勇前行。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">精益求精</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司坚持精益求精的工作态度，注重细节，追求完美，不断提升产品质量和服务水平。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">开拓创新</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司具有开拓创新的精神，敢于突破传统，勇于尝试新的方法和思路，不断推动企业发展。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">团结协作</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司注重团结协作，相互支持，共同进步，形成强大的团队凝聚力和战斗力。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">永不言弃</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司具有永不言弃的精神，面对困难和挑战，始终保持坚定的信念和顽强的毅力，坚持不懈，直至成功。</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 经营理念 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">经营理念</h3>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">质量第一</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司始终将产品质量放在首位，严格控制产品质量，确保为客户提供高品质、高可靠性的产品。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">信誉至上</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司注重企业信誉，信守承诺，履行责任，以良好的信誉赢得客户的信任和支持。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">服务优质</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司致力于为客户提供优质的服务，从产品咨询、技术支持到物流配送，全方位满足客户需求。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">效率优先</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司注重效率提升，不断优化业务流程，提高工作效率，为客户提供及时、高效的服务。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">持续改进</h4>
+                <p class="value-desc">首达特科技工程（山东）有限公司坚持持续改进的理念，不断总结经验，发现问题，完善机制，推动企业不断发展进步。</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 员工行为准则 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">员工行为准则</h3>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">爱岗敬业</h4>
+                <p class="value-desc">热爱工作，忠于职守，认真履行岗位职责，努力完成工作任务。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">诚实守信</h4>
+                <p class="value-desc">言行一致，表里如一，遵守承诺，维护企业形象和个人信誉。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">学习创新</h4>
+                <p class="value-desc">不断学习新知识、新技能，积极创新工作方法，提升工作效率和质量。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">团结协作</h4>
+                <p class="value-desc">尊重同事，主动沟通，相互支持，共同完成工作任务，营造和谐的工作氛围。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">客户第一</h4>
+                <p class="value-desc">以客户为中心，关注客户需求，提供优质服务，超越客户期望。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">遵章守纪</h4>
+                <p class="value-desc">遵守国家法律法规和公司规章制度，自觉维护公司秩序和利益。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">勤俭节约</h4>
+                <p class="value-desc">树立节约意识，合理利用资源，杜绝浪费，降低成本。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">安全环保</h4>
+                <p class="value-desc">重视安全工作，遵守安全操作规程，保护环境，促进可持续发展。</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 企业文化活动 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">企业文化活动</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司定期组织各种企业文化活动，增强员工的归属感和凝聚力，丰富员工的业余生活。
+            </p>
+            <div class="values-grid">
+              <div class="value-card">
+                <h4 class="value-title">员工培训</h4>
+                <p class="value-desc">公司定期组织各类培训活动，提升员工的专业技能和综合素质，为员工的职业发展提供支持。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">团队建设</h4>
+                <p class="value-desc">公司组织各类团队建设活动，如拓展训练、户外团建等，增强团队凝聚力和协作能力。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">文体活动</h4>
+                <p class="value-desc">公司组织各类文体活动，如篮球比赛、羽毛球比赛、文艺晚会等，丰富员工的业余生活。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">节日庆祝</h4>
+                <p class="value-desc">公司在重要节日组织庆祝活动，如春节联欢会、中秋茶话会等，营造温馨和谐的企业文化氛围。</p>
+              </div>
+              <div class="value-card">
+                <h4 class="value-title">公益活动</h4>
+                <p class="value-desc">公司积极参与社会公益活动，履行企业社会责任，回馈社会。</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 企业文化建设成果 -->
+          <div class="culture-item">
+            <h3 class="subsection-title">企业文化建设成果</h3>
+            <p class="content-text">
+              通过多年的企业文化建设，首达特科技工程（山东）有限公司形成了积极向上、充满活力的企业文化氛围，员工的归属感和凝聚力不断增强，企业的核心竞争力不断提升。
+            </p>
+            <p class="content-text">
+              企业文化已成为首达特科技工程（山东）有限公司发展的重要支撑和动力源泉，推动公司不断取得新的成就。在未来的发展中，首达特科技工程（山东）有限公司将继续加强企业文化建设，不断丰富和完善企业文化体系，为企业的可持续发展提供强大的文化支撑。
+            </p>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司相信，优秀的企业文化是企业长盛不衰的重要保障。我们将继续传承和发扬企业文化，让文化成为企业发展的灵魂，引领企业走向更加美好的未来！
+            </p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/development.en.html

@@ -0,0 +1,80 @@
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">Shandong Showdart – Development History</h1>
+          <h2 class="section-title">Milestones</h2>
+        </div>
+      </section>
+
+      <section class="content-sections">
+        <div class="content-wrapper">
+          <div class="history-item">
+            <h3 class="subsection-title">Founding and start-up (2008–2010)</h3>
+            <p class="content-text">
+              Founded in 2008 amid the global financial crisis, Showdart entered steel-product foreign trade with clear market focus and strong entrepreneurial commitment.
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>June 2008:</strong> Registered in Shanghai, 5 staff, under 100 m² office space</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Aug. 2008:</strong> First export orders, ERW line pipe to Southeast Asia</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Mar. 2009:</strong> First domestic steel production partnership</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Jan. 2010:</strong> Exports over USD 10M; 15 staff</div></li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">Steady growth (2011–2013)</h3>
+            <p class="content-text">We broadened the portfolio, built international sales, and established stable customers and a supply base.</p>
+            <ul class="numbered-list">
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>May 2011:</strong> First overseas rep office in SE Asia</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Feb. 2012:</strong> ISO 9001 certification</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Aug. 2012:</strong> Exports over USD 30M, 20+ countries</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Apr. 2013:</strong> Larger office; 30 staff; technical support function</div></li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">Rapid development (2014–2016)</h3>
+            <p class="content-text">Deeper global cooperation, richer product mix, and higher service quality drove faster growth.</p>
+            <ul class="numbered-list">
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Mar. 2014:</strong> Long-term tie with a major European steel distributor; Europe market opened</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Nov. 2014:</strong> Shanghai “advanced export enterprise” award</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Jun. 2015:</strong> Exports over USD 80M; 50 staff</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Jul. 2016:</strong> Second Middle East office</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Dec. 2016:</strong> Steel–plastic composite pipe line launched</div></li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">Scale-up (2017–2020)</h3>
+            <p class="content-text">Larger scale, stronger brands, and wider recognition in the industry.</p>
+            <ul class="numbered-list">
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Apr. 2017:</strong> Modern distribution centre; faster delivery</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Sep. 2017:</strong> Exports over USD 120M, 40+ countries</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Jun. 2018:</strong> 10-year anniversary; “ten-year plan”</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Nov. 2018:</strong> National “top 100 steel trade”</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Mar. 2019:</strong> North America rep office</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Oct. 2019:</strong> Premium custom processing</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>2020:</strong> COVID response; business continuity</div></li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">Innovation and transition (2021–present)</h3>
+            <p class="content-text">Digital transformation, stronger innovation, and a focus on high-quality, sustainable development.</p>
+            <ul class="numbered-list">
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>May 2021:</strong> Digital program; smart supply chain</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Oct. 2021:</strong> Exports over USD 200M; 80 staff</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Mar. 2022:</strong> R&amp;D links with research partners</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Aug. 2022:</strong> Shanghai “digital transformation demo enterprise”</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Jan. 2023:</strong> New brand identity</div></li>
+              <li class="list-item"><span class="bullet-point"></span><div class="item-content"><strong>Apr. 2023:</strong> “Green supply chain” initiative</div></li>
+            </ul>
+          </div>
+
+          <div class="history-item future-item">
+            <h3 class="subsection-title">Looking ahead</h3>
+            <p class="content-text">From a small foreign-trade firm to an influential player in steel products, we thank every team member for their contribution.</p>
+            <p class="content-text">We will keep innovating, cooperate globally, digitize, and pursue green, sustainable growth to create more value for customers and the industry.</p>
+            <p class="content-text">Our path reflects grit and growth typical of modern Chinese export enterprises. Together we build a better tomorrow.</p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/development.zh.html

@@ -0,0 +1,224 @@
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">山东首达特科技工程有限公司发展历史</h1>
+          <h2 class="section-title">发展历程</h2>
+        </div>
+      </section>
+
+      <section class="content-sections">
+        <div class="content-wrapper">
+          <div class="history-item">
+            <h3 class="subsection-title">创立与起步阶段（2008-2010）</h3>
+            <p class="content-text">
+              山东首达特科技工程有限公司成立于2008年，正值全球金融危机时期。在这样的市场环境下，公司创始人凭借敏锐的市场洞察力和坚定的创业决心，毅然投身于钢铁制品外贸领域。
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2008年6月：</strong>公司在上海正式注册成立，初期仅有5名员工，办公面积不足100平方米
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2008年8月：</strong>获得第一批海外订单，向东南亚某国出口直线高频焊接圆管
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2009年3月：</strong>与国内第一家钢铁生产企业建立合作关系
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2010年1月：</strong>公司年出口额突破1000万美元，员工人数增至15人
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">稳步发展阶段（2011-2013）</h3>
+            <p class="content-text">
+              在这一阶段，山东首达特科技工程有限公司开始扩大业务范围，拓展国际市场，逐步建立起稳定的客户群体和供应链体系。
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2011年5月：</strong>在东南亚设立第一个海外办事处，加强对区域市场的开发
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2012年2月：</strong>获得ISO9001质量管理体系认证
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2012年8月：</strong>公司年出口额突破3000万美元，产品远销20多个国家和地区
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2013年4月：</strong>扩大办公场所，员工人数增至30人，设立专门的技术支持部门
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">快速发展阶段（2014-2016）</h3>
+            <p class="content-text">
+              随着业务的不断扩大，山东首达特科技工程有限公司开始深化国际合作，优化产品结构，提升服务质量，进入快速发展通道。
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2014年3月：</strong>与欧洲大型钢铁分销商建立长期合作关系，成功打开欧洲市场
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2014年11月：</strong>获得"上海市外贸出口先进企业"称号
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2015年6月：</strong>年出口额突破8000万美元，员工人数增至50人
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2016年7月：</strong>在中东地区设立第二个海外办事处，加强对中东市场的开发
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2016年12月：</strong>推出钢塑复合管系列产品，丰富公司产品线
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">规模扩张阶段（2017-2020）</h3>
+            <p class="content-text">
+              这一阶段，山东首达特科技工程有限公司进一步扩大业务规模，深化国际合作，提升品牌影响力，成为行业内具有一定知名度的外贸企业。
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2017年4月：</strong>投资建设现代化物流配送中心，提高产品配送效率
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2017年9月：</strong>年出口额突破1.2亿美元，产品远销40多个国家和地区
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2018年6月：</strong>公司成立十周年庆典，发布"十年发展规划"
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2018年11月：</strong>获得"全国钢铁贸易行业百强企业"称号
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2019年3月：</strong>在北美设立第三个海外办事处，加强对北美市场的开发
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2019年10月：</strong>推出高端定制加工服务，满足客户个性化需求
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2020年：</strong>积极应对新冠疫情挑战，调整经营策略，确保业务稳定发展
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="history-item">
+            <h3 class="subsection-title">创新转型阶段（2021-至今）</h3>
+            <p class="content-text">
+              面对全球经济格局的变化和数字化浪潮，山东首达特科技工程有限公司开始推进数字化转型，加强创新能力建设，开启高质量发展新征程。
+            </p>
+            <ul class="numbered-list">
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2021年5月：</strong>启动数字化转型项目，建设智能供应链管理系统
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2021年10月：</strong>年出口额突破2亿美元，员工人数增至80人
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2022年3月：</strong>与多家国内外科研机构建立合作关系，加强产品研发和技术创新
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2022年8月：</strong>获得"上海市数字化转型示范企业"称号
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2023年1月：</strong>推出全新企业标识和品牌形象，提升品牌价值
+                </div>
+              </li>
+              <li class="list-item">
+                <span class="bullet-point"></span>
+                <div class="item-content">
+                  <strong>2023年4月：</strong>启动"绿色供应链"建设，推动可持续发展
+                </div>
+              </li>
+            </ul>
+          </div>
+
+          <div class="history-item future-item">
+            <h3 class="subsection-title">展望未来</h3>
+            <p class="content-text">
+              回顾过去十五年的发展历程，山东首达特科技工程有限公司从一个小型外贸企业成长为行业内具有影响力的钢铁制品贸易商，每一步都凝聚着全体员工的智慧和汗水。
+            </p>
+            <p class="content-text">
+              展望未来，山东首达特科技工程有限公司将继续坚持创新发展，深化国际合作，推进数字化转型，加强绿色发展，努力实现更高质量、更可持续的发展，为客户创造更大价值，为行业发展做出更大贡献。
+            </p>
+            <p class="content-text">
+              山东首达特科技工程有限公司的发展历程，是一部艰苦创业、不断进取的奋斗史，也是中国外贸企业成长的一个缩影。我们相信，在全体员工的共同努力下，山东首达特科技工程有限公司的明天一定会更加美好！
+            </p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/honors.en.html

@@ -0,0 +1,33 @@
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">Showdart – Awards &amp; Certifications</h1>
+          <h2 class="section-title">Overview</h2>
+        </div>
+      </section>
+
+      <section class="honors-sections">
+        <div class="content-container">
+          <div class="content-item">
+            <p class="content-text">
+              For years we have been recognized in China and abroad for product quality, service, and business integrity, holding major ISO, CE, API, JIS, and KS certifications, national awards, and industry honours.
+            </p>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">International certifications</h3>
+            <h4 class="sub-subsection-title">ISO 9001:2015 (TÜV Rheinland, since 2012)</h4>
+            <h4 class="sub-subsection-title">ISO 14001:2015 (SGS, 2015) &amp; ISO 45001:2018 (BSI, 2019)</h4>
+            <h4 class="sub-subsection-title">Product: CE, API, JIS, KS (2013–2018)</h4>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">National and industry awards</h3>
+            <p class="content-text">Including China Customs “quality &amp; integrity” awards, “Top 100 steel trade” titles, and municipal export and digital transformation accolades.</p>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">Patents &amp; standards</h3>
+            <p class="content-text">Multiple invention and utility-model patents, participation in national and industry standards, and a fully integrated IP and compliance system.</p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/honors.zh.html

@@ -0,0 +1,384 @@
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">首达特科技工程（山东）有限公司奖项与荣誉</h1>
+          <h2 class="section-title">荣誉概述</h2>
+        </div>
+      </section>
+
+      <section class="honors-sections">
+        <div class="content-container">
+          <div class="content-item">
+            <p class="content-text">
+              首达特科技工程（山东）有限公司自成立以来，凭借卓越的产品质量、优质的服务和良好的企业信誉，在国内外市场赢得了广泛的认可和赞誉。先后获得了多项重要奖项和认证。这些荣誉不仅是对首达特过去成绩的肯定，更是激励我们不断前进的动力。
+            </p>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">国际认证与资质</h3>
+
+            <h4 class="sub-subsection-title">ISO质量管理体系认证</h4>
+            <h5 class="item-title">ISO 9001:2015质量管理体系认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2012年首次认证，至今持续保持</li>
+              <li>认证机构：德国TÜV莱茵</li>
+              <li>认证范围：钢铁制品的采购、销售和服务全过程质量管理</li>
+            </ul>
+
+            <h5 class="item-title">环境管理体系认证</h5>
+            <h5 class="item-title">ISO 14001:2015环境管理体系认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2015年</li>
+              <li>认证机构：瑞士SGS集团</li>
+              <li>认证范围：公司运营活动中的环境管理</li>
+            </ul>
+
+            <h5 class="item-title">职业健康安全管理体系认证</h5>
+            <h5 class="item-title">ISO 45001:2018职业健康安全管理体系认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2019年</li>
+              <li>认证机构：英国BSI集团</li>
+              <li>认证范围：公司内部职业健康安全管理</li>
+            </ul>
+
+            <h4 class="sub-subsection-title">产品认证</h4>
+            <h5 class="item-title">欧盟CE认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2013年</li>
+              <li>认证范围：无缝钢管、方矩管等产品出口欧盟市场</li>
+            </ul>
+
+            <h5 class="item-title">美国API认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2016年</li>
+              <li>认证范围：石油天然气行业用钢管产品</li>
+            </ul>
+
+            <h5 class="item-title">日本JIS认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2017年</li>
+              <li>认证范围：符合日本工业标准的钢铁制品</li>
+            </ul>
+
+            <h5 class="item-title">韩国KS认证</h5>
+            <ul class="detail-list">
+              <li>获得时间：2018年</li>
+              <li>认证范围：符合韩国工业标准的钢铁制品</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">国家级奖项</h3>
+
+            <h5 class="item-title">中国进出口质量诚信企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国海关总署</li>
+              <li>获得时间：2014年、2016年、2018年、2020年、2022年（连续五届）</li>
+              <li>奖项级别：国家级</li>
+            </ul>
+
+            <h5 class="item-title">中国钢铁贸易行业领军企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国钢铁工业协会</li>
+              <li>获得时间：2017年、2020年</li>
+              <li>奖项级别：国家级</li>
+            </ul>
+
+            <h5 class="item-title">国家高新技术企业</h5>
+            <ul class="detail-list">
+              <li>认定机构：科技部、财政部、国家税务总局</li>
+              <li>获得时间：2018年首次认定，2021年复核通过</li>
+              <li>证书有效期：三年</li>
+            </ul>
+
+            <h5 class="item-title">中国外贸500强企业</h5>
+            <ul class="detail-list">
+              <li>发布机构：中国对外经济贸易合作企业协会</li>
+              <li>获得时间：2019年、2020年、2021年、2022年</li>
+              <li>排名：2022年位列第286位</li>
+            </ul>
+
+            <h5 class="item-title">全国守合同重信用企业</h5>
+            <ul class="detail-list">
+              <li>认定机构：国家市场监督管理总局</li>
+              <li>获得时间：2016年、2018年、2020年、2022年（连续四届）</li>
+              <li>认定级别：国家级</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">省级奖项</h3>
+
+            <h5 class="item-title">江苏省优秀民营企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省人民政府</li>
+              <li>获得时间：2015年、2019年、2022年</li>
+              <li>奖项级别：省级</li>
+            </ul>
+
+            <h5 class="item-title">江苏省出口名牌企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省商务厅</li>
+              <li>获得时间：2016年、2019年、2022年</li>
+              <li>有效期：三年</li>
+            </ul>
+
+            <h5 class="item-title">江苏省质量奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省市场监督管理局</li>
+              <li>获得时间：2018年</li>
+              <li>奖项级别：省级质量领域最高荣誉</li>
+            </ul>
+
+            <h5 class="item-title">江苏省AAA级信用企业</h5>
+            <ul class="detail-list">
+              <li>评定机构：江苏省企业信用管理协会</li>
+              <li>获得时间：2014年至今（连续九年）</li>
+              <li>信用等级：AAA级（最高级）</li>
+            </ul>
+
+            <h5 class="item-title">江苏省钢铁贸易行业十强企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省钢铁贸易商会</li>
+              <li>获得时间：2015年至2022年（连续八年）</li>
+              <li>排名：2022年位列第3位</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">市级奖项</h3>
+
+            <h5 class="item-title">南京市优秀企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市人民政府</li>
+              <li>获得时间：2016年、2018年、2020年、2022年</li>
+              <li>奖项级别：市级</li>
+            </ul>
+
+            <h5 class="item-title">南京市外贸出口先进企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市商务局</li>
+              <li>获得时间：2017年至2022年（连续六年）</li>
+              <li>排名：2022年位列全市第15位</li>
+            </ul>
+
+            <h5 class="item-title">南京市质量管理奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市市场监督管理局</li>
+              <li>获得时间：2019年</li>
+              <li>奖项级别：市级质量领域最高荣誉</li>
+            </ul>
+
+            <h5 class="item-title">南京市纳税大户</h5>
+            <ul class="detail-list">
+              <li>认定机构：南京市税务局</li>
+              <li>获得时间：2018年至2022年（连续五年）</li>
+              <li>表彰等级：A级</li>
+            </ul>
+
+            <h5 class="item-title">南京市企业文化建设示范单位</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市企业文化建设协会</li>
+              <li>获得时间：2021年</li>
+              <li>有效期：两年</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">行业荣誉</h3>
+
+            <h5 class="item-title">中国钢铁物流行业年度领军企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国物流与采购联合会钢铁物流专业委员会</li>
+              <li>获得时间：2018年、2019年、2022年</li>
+            </ul>
+
+            <h5 class="item-title">中国钢铁电子商务平台优秀服务商</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国钢铁工业协会电子商务工作委员会</li>
+              <li>获得时间：2018年、2020年、2022年</li>
+            </ul>
+
+            <h5 class="item-title">中国金属材料流通行业AAA级信用企业</h5>
+            <ul class="detail-list">
+              <li>评定机构：中国金属材料流通协会</li>
+              <li>获得时间：2015年至今（连续八年）</li>
+              <li>信用等级：AAA级</li>
+            </ul>
+
+            <h5 class="item-title">中国钢铁供应链创新企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国钢铁供应链创新联盟</li>
+              <li>获得时间：2021年</li>
+            </ul>
+
+            <h5 class="item-title">中国钢铁国际贸易卓越贡献奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国五矿化工进出口商会</li>
+              <li>获得时间：2022年</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">客户与合作伙伴认可</h3>
+
+            <h5 class="item-title">优秀供应商奖</h5>
+            <ul class="detail-list">
+              <li>授予方：韩国浦项钢铁（POSCO）</li>
+              <li>获得时间：2017年、2019年、2021年、2023年</li>
+              <li>评价："最可靠的合作伙伴"</li>
+            </ul>
+
+            <h5 class="item-title">质量优胜奖</h5>
+            <ul class="detail-list">
+              <li>授予方：日本新日铁住金株式会社</li>
+              <li>获得时间：2018年、2020年、2022年</li>
+              <li>评价："卓越的质量控制能力"</li>
+            </ul>
+
+            <h5 class="item-title">最佳服务奖</h5>
+            <ul class="detail-list">
+              <li>授予方：德国蒂森克虏伯集团</li>
+              <li>获得时间：2019年、2021年</li>
+              <li>评价："高效、专业的服务团队"</li>
+            </ul>
+
+            <h5 class="item-title">战略合作伙伴</h5>
+            <ul class="detail-list">
+              <li>授予方：法国安赛乐米塔尔集团</li>
+              <li>获得时间：2017年至今</li>
+              <li>合作级别：全球战略合作伙伴</li>
+            </ul>
+
+            <h5 class="item-title">年度最佳供应商</h5>
+            <ul class="detail-list">
+              <li>授予方：美国钢铁公司</li>
+              <li>获得时间：2022年</li>
+              <li>评价："为我们提供了稳定可靠的产品供应"</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">社会责任奖项</h3>
+
+            <h5 class="item-title">中国企业社会责任优秀案例</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国企业社会责任研究会</li>
+              <li>获得时间：2020年</li>
+              <li>案例主题："钢铁产业绿色供应链建设"</li>
+            </ul>
+
+            <h5 class="item-title">江苏省慈善捐赠先进单位</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省慈善总会</li>
+              <li>获得时间：2019年、2021年、2023年</li>
+            </ul>
+
+            <h5 class="item-title">南京市环保模范企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市生态环境局</li>
+              <li>获得时间：2018年、2020年、2022年</li>
+            </ul>
+
+            <h5 class="item-title">扶贫攻坚贡献奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏扶贫开发领导小组</li>
+              <li>获得时间：2021年</li>
+              <li>表彰理由：在结对帮扶贫困地区工作中作出突出贡献</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">科技创新奖项</h3>
+
+            <h5 class="item-title">江苏省科技进步奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省科学技术厅</li>
+              <li>获得时间：2020年</li>
+              <li>获奖项目："高性能耐腐蚀钢管研发与应用"</li>
+              <li>奖项级别：二等奖</li>
+            </ul>
+
+            <h5 class="item-title">南京市技术创新奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：南京市科学技术局</li>
+              <li>获得时间：2019年、2021年</li>
+              <li>获奖项目："钢铁贸易数字化平台建设"（2019年）、"智能仓储物流系统"（2021年）</li>
+            </ul>
+
+            <h5 class="item-title">中国钢铁行业技术创新示范企业</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：中国钢铁工业协会</li>
+              <li>获得时间：2022年</li>
+            </ul>
+
+            <h5 class="item-title">知识产权管理体系认证（贯标）</h5>
+            <ul class="detail-list">
+              <li>认证机构：国家知识产权局</li>
+              <li>获得时间：2018年</li>
+              <li>认证范围：公司知识产权的获取、维护、运用和保护</li>
+            </ul>
+
+            <h5 class="item-title">江苏省专利奖</h5>
+            <ul class="detail-list">
+              <li>颁奖机构：江苏省知识产权局</li>
+              <li>获得时间：2021年</li>
+              <li>获奖专利："一种新型耐腐蚀钢管生产工艺"（发明专利）</li>
+              <li>奖项级别：优秀奖</li>
+            </ul>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">荣誉成就统计</h3>
+            <p class="content-text">
+              截至2023年6月，首达特科技工程（山东）有限公司累计获得：
+            </p>
+            <ul class="stats-list">
+              <li class="stats-item">
+                <span class="stats-label">国际认证：</span>
+                <span class="stats-value">8项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">国家级奖项：</span>
+                <span class="stats-value">12项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">省级奖项：</span>
+                <span class="stats-value">15项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">市级奖项：</span>
+                <span class="stats-value">18项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">行业荣誉：</span>
+                <span class="stats-value">15项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">客户认可：</span>
+                <span class="stats-value">12项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">社会责任奖项：</span>
+                <span class="stats-value">8项</span>
+              </li>
+              <li class="stats-item">
+                <span class="stats-label">科技创新奖项：</span>
+                <span class="stats-value">10项</span>
+              </li>
+            </ul>
+            <p class="summary-text">
+              <strong>总计：98项各类荣誉和认证</strong>
+            </p>
+          </div>
+
+          <div class="content-item">
+            <h3 class="subsection-title">未来展望</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司将继续坚持"质量第一、信誉至上"的经营理念，不断提升产品质量和服务水平，为客户创造更大价值，为行业发展做出更大贡献。我们将积极参与国际标准和制定，加强技术创新，推动行业进步，争取获得更多的国际认可和荣誉。
+            </p>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司感谢社会各界的支持和认可。我们将以此为动力，不断努力，追求卓越，为成为全球领先的钢铁制品贸易商而不懈奋斗！
+            </p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/html/organization.en.html

@@ -0,0 +1,150 @@
+<section class="page-header">
+  <h1 class="page-title">Showdart Technology Engineering (Shandong) – Organization</h1>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Overview</h2>
+  <p class="section-text">
+    Showdart has a flat, efficient organization, customer- and market-oriented, with complete management systems and business processes. We have 80+ staff, a board of directors, a general office, domestic and international business lines, and supporting functions, working with clear roles and close collaboration.
+  </p>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Management</h2>
+
+  <h3 class="subsection-title">Board of Directors</h3>
+  <p class="subsection-text">
+    The board is the highest decision-making body, setting strategy, policy, and material decisions.
+  </p>
+  <ul class="list-content">
+    <li><strong>Chairman:</strong> strategy and development direction</li>
+    <li><strong>Directors:</strong> major decisions and supervision of management</li>
+    <li><strong>Independent directors:</strong> professional advice to strengthen decision quality</li>
+  </ul>
+
+  <h3 class="subsection-title">General Manager Office</h3>
+  <p class="subsection-text">
+    The core management team in charge of daily operations and execution of the board.
+  </p>
+  <ul class="list-content">
+    <li><strong>General Manager:</strong> overall operations, executes board decisions</li>
+    <li><strong>Deputy GMs:</strong> assist the GM in different business areas
+      <ul class="sub-list">
+        <li><strong>Overseas business:</strong> international markets and expansion</li>
+        <li><strong>Domestic business:</strong> domestic suppliers and procurement</li>
+        <li><strong>Operations:</strong> operations management and process improvement</li>
+      </ul>
+    </li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Business units</h2>
+
+  <h3 class="subsection-title">1. International business</h3>
+  <p class="subsection-text">Develops overseas markets and is one of the core business units.</p>
+  <ul class="list-content">
+    <li><strong>Europe team:</strong> development and long-term client relationships in Europe</li>
+    <li><strong>North America team:</strong> North America and premium segments</li>
+    <li><strong>SE Asia team:</strong> South-East Asia and surrounding regions</li>
+    <li><strong>Middle East team:</strong> Middle East and Africa</li>
+  </ul>
+
+  <h3 class="subsection-title">2. Domestic procurement</h3>
+  <p class="subsection-text">Raw materials, supplier management, quality and supply stability.</p>
+  <ul class="list-content">
+    <li><strong>Steel team:</strong> steel products and suppliers</li>
+    <li><strong>Piping team:</strong> piping and fittings</li>
+    <li><strong>Quality team:</strong> supplier quality and inspection</li>
+    <li><strong>Supplier management:</strong> assessment, selection, and relationship</li>
+  </ul>
+
+  <h3 class="subsection-title">3. R&amp;D</h3>
+  <p class="subsection-text">Product development and technology to improve competitiveness and value.</p>
+  <ul class="list-content">
+    <li><strong>Product design:</strong> new product design and development</li>
+    <li><strong>Technical support:</strong> customer consulting and solutions</li>
+    <li><strong>Process improvement:</strong> manufacturing process optimization</li>
+    <li><strong>R&amp;D PM:</strong> R&amp;D project planning and execution</li>
+  </ul>
+
+  <h3 class="subsection-title">4. Logistics &amp; supply chain</h3>
+  <p class="subsection-text">Logistics, warehousing, and on-time, safe delivery.</p>
+  <ul class="list-content">
+    <li><strong>International logistics:</strong> freight and logistics design</li>
+    <li><strong>Warehousing:</strong> warehouse and inventory</li>
+    <li><strong>Packaging:</strong> packaging and labelling</li>
+    <li><strong>Supply chain optimization:</strong> continuous improvement</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Support functions</h2>
+
+  <h3 class="subsection-title">1. Admin &amp; HR</h3>
+  <p class="subsection-text">Administration, HR, and organizational/people support.</p>
+  <ul class="list-content">
+    <li><strong>Admin:</strong> daily admin and office environment</li>
+    <li><strong>HR:</strong> planning, recruitment, training, and performance</li>
+    <li><strong>Comp &amp; benefits:</strong> compensation and benefits</li>
+    <li><strong>Culture:</strong> culture and employee relations</li>
+  </ul>
+
+  <h3 class="subsection-title">2. Finance</h3>
+  <p class="subsection-text">Financial management and reporting for support and control.</p>
+  <ul class="list-content">
+    <li><strong>Accounting:</strong> general ledger and financial statements</li>
+    <li><strong>FP&amp;A:</strong> analysis, budgeting, and cash management</li>
+    <li><strong>Tax:</strong> planning and compliance</li>
+    <li><strong>Cost:</strong> costing and cost control</li>
+  </ul>
+
+  <h3 class="subsection-title">3. Marketing</h3>
+  <p class="subsection-text">Brand and market to strengthen our position in the market.</p>
+  <ul class="list-content">
+    <li><strong>Planning:</strong> market research and marketing plans</li>
+    <li><strong>Brand:</strong> brand building and protection</li>
+    <li><strong>Online:</strong> website and social media</li>
+    <li><strong>Events:</strong> trade shows and events</li>
+  </ul>
+
+  <h3 class="subsection-title">4. IT</h3>
+  <p class="subsection-text">IT systems, infrastructure, and digital transformation.</p>
+  <ul class="list-content">
+    <li><strong>Applications:</strong> business systems</li>
+    <li><strong>Network &amp; ops:</strong> network and end-user equipment</li>
+    <li><strong>Data:</strong> data management and analytics</li>
+    <li><strong>Digital transformation:</strong> project roll-out</li>
+  </ul>
+
+  <h3 class="subsection-title">5. Legal</h3>
+  <p class="subsection-text">Legal affairs and compliance.</p>
+  <ul class="list-content">
+    <li><strong>Contracts:</strong> drafting, review, and management</li>
+    <li><strong>IP:</strong> application and protection</li>
+    <li><strong>Compliance:</strong> risk and compliance</li>
+    <li><strong>Disputes:</strong> disputes and external counsel</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Overseas offices</h2>
+  <p class="subsection-text">
+    To support international customers, we have offices in key global markets.
+  </p>
+  <ul class="list-content">
+    <li><strong>SE Asia office:</strong> Singapore – development and support for the region</li>
+    <li><strong>Middle East office:</strong> Dubai – Middle East and Africa</li>
+    <li><strong>North America office:</strong> New York – North American markets</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">Principles</h2>
+  <p class="section-text">
+    We follow “people first, clear accountability, and efficient collaboration,” building an open, innovative culture. We invest in our people, improve structures and processes, and adapt quickly to the market and customers.
+  </p>
+  <p class="section-text">
+    A sound structure and management system help us stay responsive, meet customer needs, and grow sustainably.
+  </p>
+</section>

demo-vue/src/locales/html/organization.zh.html

@@ -0,0 +1,168 @@
+<section class="page-header">
+  <h1 class="page-title">首达特科技工程（山东）有限公司组织结构</h1>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">组织架构概述</h2>
+  <p class="section-text">
+    首达特科技工程（山东）有限公司采用扁平化、高效的组织架构，以客户为中心，以市场为导向，构建了完善的管理体系和业务流程。公司现有员工80余人，设有董事会、总经理办公室、国内外业务部门及各职能部门，形成了分工明确、协作高效的组织体系。
+  </p>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">管理层架构</h2>
+
+  <h3 class="subsection-title">董事会</h3>
+  <p class="subsection-text">
+    董事会是公司的最高决策机构，负责制定公司的战略规划、经营方针和重大决策。
+  </p>
+  <ul class="list-content">
+    <li><strong>董事长：</strong>全面负责公司战略决策和发展方向</li>
+    <li><strong>董事：</strong>参与公司重大决策，监督管理层工作</li>
+    <li><strong>独立董事：</strong>提供专业建议，增强决策科学性</li>
+  </ul>
+
+  <h3 class="subsection-title">总经理办公室</h3>
+  <p class="subsection-text">
+    总经理办公室是公司的核心管理团队，负责公司的日常经营管理和业务执行。
+  </p>
+  <ul class="list-content">
+    <li><strong>总经理：</strong>全面负责公司日常经营管理，执行董事会决议</li>
+    <li><strong>副总经理：</strong>协助总经理工作，分管不同业务板块
+      <ul class="sub-list">
+        <li><strong>海外业务副总经理：</strong>负责国际市场开发和海外业务拓展</li>
+        <li><strong>国内业务副总经理：</strong>负责国内供应商管理和采购业务</li>
+        <li><strong>运营副总经理：</strong>负责公司运营管理和流程优化</li>
+      </ul>
+    </li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">业务部门</h2>
+
+  <h3 class="subsection-title">1. 国际业务部</h3>
+  <p class="subsection-text">
+    负责公司的国际市场开发和海外业务拓展，是公司的核心业务部门之一。
+  </p>
+  <ul class="list-content">
+    <li><strong>欧洲业务组：</strong>负责欧洲市场的开发和维护，与欧洲客户建立长期稳定的合作关系</li>
+    <li><strong>北美业务组：</strong>负责北美市场的开发和维护，开拓北美高端客户群体</li>
+    <li><strong>东南亚业务组：</strong>负责东南亚及周边地区市场的开发和维护，深化区域合作</li>
+    <li><strong>中东业务组：</strong>负责中东及非洲地区市场的开发和维护，扩大市场份额</li>
+  </ul>
+
+  <h3 class="subsection-title">2. 国内采购部</h3>
+  <p class="subsection-text">
+    负责公司的原材料采购和供应商管理，确保产品质量和供应稳定。
+  </p>
+  <ul class="list-content">
+    <li><strong>钢材采购组：</strong>负责各类钢材产品的采购和供应商管理</li>
+    <li><strong>管件采购组：</strong>负责管路连接件等产品的采购和供应商管理</li>
+    <li><strong>质量控制组：</strong>负责供应商质量管理和产品质量检测</li>
+    <li><strong>供应商管理组：</strong>负责供应商评估、选择和关系维护</li>
+  </ul>
+
+  <h3 class="subsection-title">3. 产品研发部</h3>
+  <p class="subsection-text">
+    负责公司的产品研发和技术创新，提升产品竞争力和附加值。
+  </p>
+  <ul class="list-content">
+    <li><strong>产品设计组：</strong>负责新产品的设计和开发</li>
+    <li><strong>技术支持组：</strong>为客户提供技术咨询和解决方案</li>
+    <li><strong>工艺改进组：</strong>负责生产工艺的改进和优化</li>
+    <li><strong>研发项目管理组：</strong>负责研发项目的规划和执行</li>
+  </ul>
+
+  <h3 class="subsection-title">4. 物流配送部</h3>
+  <p class="subsection-text">
+    负责公司的物流配送和供应链管理，确保产品及时、安全地交付给客户。
+  </p>
+  <ul class="list-content">
+    <li><strong>国际物流组：</strong>负责国际货物运输和物流方案设计</li>
+    <li><strong>仓储管理组：</strong>负责仓库管理和库存控制</li>
+    <li><strong>包装组：</strong>负责产品包装和标识</li>
+    <li><strong>供应链优化组：</strong>负责供应链的优化和改进</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">职能部门</h2>
+
+  <h3 class="subsection-title">1. 行政人事部</h3>
+  <p class="subsection-text">
+    负责公司的行政管理和人力资源管理，为公司的发展提供组织保障和人才支持。
+  </p>
+  <ul class="list-content">
+    <li><strong>行政组：</strong>负责公司日常行政事务和办公环境管理</li>
+    <li><strong>人力资源组：</strong>负责人力资源规划、招聘、培训和绩效管理</li>
+    <li><strong>薪酬福利组：</strong>负责薪酬体系设计和福利管理</li>
+    <li><strong>企业文化组：</strong>负责企业文化建设和员工关系管理</li>
+  </ul>
+
+  <h3 class="subsection-title">2. 财务部</h3>
+  <p class="subsection-text">
+    负责公司的财务管理和会计核算，为公司的发展提供财务支持和决策依据。
+  </p>
+  <ul class="list-content">
+    <li><strong>会计核算组：</strong>负责公司的会计核算和财务报表编制</li>
+    <li><strong>财务管理组：</strong>负责财务分析、预算管理和资金管理</li>
+    <li><strong>税务组：</strong>负责税务筹划和纳税申报</li>
+    <li><strong>成本控制组：</strong>负责成本核算和成本控制</li>
+  </ul>
+
+  <h3 class="subsection-title">3. 市场部</h3>
+  <p class="subsection-text">
+    负责公司的市场策划和品牌建设，提升公司的品牌影响力和市场竞争力。
+  </p>
+  <ul class="list-content">
+    <li><strong>市场策划组：</strong>负责市场调研和营销策划</li>
+    <li><strong>品牌建设组：</strong>负责公司品牌形象建设和维护</li>
+    <li><strong>线上推广组：</strong>负责公司网站、社交媒体等线上渠道的运营和推广</li>
+    <li><strong>展会活动组：</strong>负责国内外展会的策划和组织</li>
+  </ul>
+
+  <h3 class="subsection-title">4. 信息部</h3>
+  <p class="subsection-text">
+    负责公司的信息化建设和数字化转型，提升公司的信息化水平和运营效率。
+  </p>
+  <ul class="list-content">
+    <li><strong>系统开发组：</strong>负责公司管理系统的开发和维护</li>
+    <li><strong>网络运维组：</strong>负责公司网络和IT设备的维护和管理</li>
+    <li><strong>数据管理组：</strong>负责公司数据的管理和分析</li>
+    <li><strong>数字化转型组：</strong>负责公司数字化转型项目的规划和实施</li>
+  </ul>
+
+  <h3 class="subsection-title">5. 法务部</h3>
+  <p class="subsection-text">
+    负责公司的法律事务和合规管理，为公司的发展提供法律保障。
+  </p>
+  <ul class="list-content">
+    <li><strong>合同管理组：</strong>负责合同的起草、审核和管理</li>
+    <li><strong>知识产权组：</strong>负责知识产权的申请和保护</li>
+    <li><strong>合规管理组：</strong>负责公司合规管理和风险控制</li>
+    <li><strong>纠纷处理组：</strong>负责法律纠纷的处理和诉讼代理</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">海外机构</h2>
+  <p class="subsection-text">
+    为了更好地服务国际客户，首达特科技（山东）有限公司在全球多个重要市场设立了海外办事处。
+  </p>
+  <ul class="list-content">
+    <li><strong>东南亚办事处：</strong>位于新加坡，负责东南亚地区的市场开发和客户服务</li>
+    <li><strong>中东办事处：</strong>位于迪拜，负责中东及非洲地区的市场开发和客户服务</li>
+    <li><strong>北美办事处：</strong>位于纽约，负责北美地区的市场开发和客户服务</li>
+  </ul>
+</section>
+
+<section class="content-section">
+  <h2 class="section-title">组织管理理念</h2>
+  <p class="section-text">
+    公司坚持"以人为本、权责分明、协同高效"的组织管理理念，致力于构建一个开放、创新、协作的组织文化。公司注重员工的培养和发展，为员工提供广阔的发展空间和良好的工作环境。同时，公司不断优化组织结构和业务流程，提高组织运行效率和市场应变能力。
+  </p>
+  <p class="section-text">
+    通过完善的组织结构和科学的管理体系，公司能够快速响应市场变化，满足客户需求，实现公司的可持续发展。
+  </p>
+</section>

demo-vue/src/locales/html/production.en.html

@@ -0,0 +1,71 @@
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">Showdart (Shandong) – Production Bases</h1>
+          <h2 class="section-title">Overview</h2>
+        </div>
+      </section>
+
+      <section class="base-overview">
+        <div class="content-container">
+          <p class="overview-text">
+            Showdart operates multiple domestic production, R&amp;D, warehousing, and logistics sites, and overseas offices, forming a full chain from R&amp;D to delivery and a global footprint.
+          </p>
+        </div>
+      </section>
+
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">Domestic manufacturing</h2>
+
+          <div class="base-item">
+            <h3 class="base-name">Nanjing headquarters plant</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">Profile</h4>
+              <ul class="info-list">
+                <li><strong>Location:</strong> Jiangning Economic &amp; Technological Development Zone, Nanjing, Jiangsu</li>
+                <li><strong>Site area:</strong> 120,000 m²; <strong>Built area:</strong> 85,000 m²</li>
+                <li><strong>Start-up:</strong> Phase 1 in 2008, Phase 2 in 2012, Phase 3 in 2018</li>
+              </ul>
+              <h4 class="info-subtitle">Key lines</h4>
+              <ul class="info-list">
+                <li>12 high-speed wire lines, ~0.5 Mt/a; 8 pipe lines, ~0.3 Mt/a</li>
+                <li>Rebar lines, surface treatment, and central QC lab</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="base-item">
+            <h3 class="base-name">Tangshan steel base</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">Profile</h4>
+              <ul class="info-list">
+                <li><strong>Location:</strong> Caofeidian industrial zone, Tangshan, Hebei</li>
+                <li><strong>Site area:</strong> 180,000 m²; <strong>Built area:</strong> 120,000 m²</li>
+                <li><strong>Start-up:</strong> 2013; Phase 2 in 2017</li>
+              </ul>
+              <h4 class="info-subtitle">Key lines</h4>
+              <ul class="info-list">
+                <li>Hot &amp; cold strip, precision tube, and specialty steel processing</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="content-section">
+        <div class="content-container">
+          <h2 class="section-title">Warehousing, logistics, R&amp;D &amp; overseas</h2>
+          <p class="section-text">
+            Dedicated logistics hubs, bonded storage, a multi-location R&amp;D system, and Singapore / Dubai / New York / Rotterdam offices support global customers with stable supply and technical service.
+          </p>
+        </div>
+      </section>
+
+      <section class="content-section">
+        <div class="content-container">
+          <h2 class="section-title">Summary &amp; outlook</h2>
+          <p class="content-text">
+            Our network combines scale, quality, and delivery reliability. We invest in digital and smart manufacturing, R&amp;D, green operations, and talent to move toward a leading global steel product and service provider.
+          </p>
+        </div>
+      </section>

demo-vue/src/locales/html/production.zh.html

@@ -0,0 +1,575 @@
+      <!-- 页面标题区域 -->
+      <section class="page-header">
+        <div class="header-content">
+          <h1 class="page-title">首达特科技工程（山东）有限公司基地介绍</h1>
+          <h2 class="section-title">基地概述</h2>
+        </div>
+      </section>
+
+      <!-- 基地概述 -->
+      <section class="base-overview">
+        <div class="content-container">
+          <p class="overview-text">
+            首达特科技工程（山东）有限公司在全国范围内布局了多个生产基地，形成了集研发、生产、仓储、物流于一体的完整产业链。从国内的生产加工基地到仓储物流中心，从研发中心到办公总部，再到覆盖全球的海外分支机构，首达特科技工程（山东）有限公司构建了强大的生产运营网络和全球化业务布局。
+          </p>
+        </div>
+      </section>
+
+      <!-- 国内生产加工基地 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">国内生产加工基地</h2>
+
+          <!-- 南京总部生产基地 -->
+          <div class="base-item">
+            <h3 class="base-name">南京总部生产基地</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>江苏省南京市江宁区经济技术开发区</li>
+                <li><strong>占地面积：</strong>120,000平方米</li>
+                <li><strong>建筑面积：</strong>85,000平方米</li>
+                <li><strong>投产时间：</strong>2008年（一期），2012年（二期），2018年（三期扩建）</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要产线</h4>
+              <ul class="info-list">
+                <li>高线轧钢生产线：12条，年产能50万吨</li>
+                <li>万向管生产线：8条，年产能30万吨</li>
+                <li>螺纹钢综合生产线：4条，年产能10万吨</li>
+                <li>产品表面处理车间：2个，包括热镀锌、涂装等工艺</li>
+                <li>质量检测中心：配备先进的检测设备，确保产品质量</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>引进德国、日本先进的生产设备和工艺</li>
+                <li>采用全自动化的控制系统，提高生产效率和产品质量</li>
+                <li>实现生产过程的数字化管理和监控</li>
+                <li>具备定制化生产能力，可满足客户特殊需求</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 唐山钢铁生产基地 -->
+          <div class="base-item">
+            <h3 class="base-name">唐山钢铁生产基地</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>河北省唐山市曹妃甸工业区</li>
+                <li><strong>占地面积：</strong>180,000平方米</li>
+                <li><strong>建筑面积：</strong>120,000平方米</li>
+                <li><strong>投产时间：</strong>2013年（一期），2017年（二期扩建）</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要产线</h4>
+              <ul class="info-list">
+                <li>热轧带钢生产线：3条，年产能120万吨</li>
+                <li>冷轧带钢生产线：2条，年产能80万吨</li>
+                <li>精密钢管生产线：6条，年产能25万吨</li>
+                <li>特种钢材加工车间：1个，专注于高附加值产品</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>采用国际领先的连铸连轧生产工艺，节能环保</li>
+                <li>拥有先进的轧制技术，产品精度高、性能稳定</li>
+                <li>建立了严格的质量控制体系，产品符合国际标准</li>
+                <li>与周边钢铁企业形成产业链协同，降低生产成本</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 无锡不锈钢加工基地 -->
+          <div class="base-item">
+            <h3 class="base-name">无锡不锈钢加工基地</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>江苏省无锡市锡山经济开发区</li>
+                <li><strong>占地面积：</strong>65,000平方米</li>
+                <li><strong>建筑面积：</strong>45,000平方米</li>
+                <li><strong>投产时间：</strong>2015年</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要产线</h4>
+              <ul class="info-list">
+                <li>不锈钢管生产线：5条，年产能15万吨</li>
+                <li>不锈钢型材生产线：3条，年产能20万吨</li>
+                <li>不锈钢制品加工车间：1个，专注于深加工产品</li>
+                <li>表面处理中心：提供抛光、拉丝、喷砂等多种表面处理工艺</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>专注于高品质不锈钢产品的生产和加工</li>
+                <li>引进意大利先进的不锈钢加工设备</li>
+                <li>产品广泛应用于食品、医药、化工等高端领域</li>
+                <li>具备完善的卫生级不锈钢产品生产能力</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 广州有色金属加工基地 -->
+          <div class="base-item">
+            <h3 class="base-name">广州有色金属加工基地</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>广东省广州市南沙区</li>
+                <li><strong>占地面积：</strong>50,000平方米</li>
+                <li><strong>建筑面积：</strong>35,000平方米</li>
+                <li><strong>投产时间：</strong>2018年</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要产线</h4>
+              <ul class="info-list">
+                <li>铝管生产线：4条，年产能8万吨</li>
+                <li>铜管生产线：3条，年产能5万吨</li>
+                <li>有色金属复合材料生产线：2条，年产能3万吨</li>
+                <li>有色金属制品加工车间：1个</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>专注于有色金属管材和复合材料的研发和生产</li>
+                <li>采用先进的挤压成型技术，产品尺寸精度高</li>
+                <li>产品广泛应用于航天、航空、新能源等领域</li>
+                <li>与国内多所科研院所合作，不断提升技术水平</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 仓储物流基地 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">仓储物流基地</h2>
+
+          <!-- 上海国际物流中心 -->
+          <div class="base-item">
+            <h3 class="base-name">上海国际物流中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>上海市浦东新区外高桥保税区</li>
+                <li><strong>占地面积：</strong>150,000平方米</li>
+                <li><strong>仓储面积：</strong>120,000平方米</li>
+                <li><strong>投入使用时间：</strong>2010年（一期），2016年（二期扩建）</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>钢材仓储区：可储存各类钢材100万吨</li>
+                <li>保税仓库：面积50,000平方米，可开展保税物流业务</li>
+                <li>加工配送中心：提供钢材剪切、配送等增值服务</li>
+                <li>国际货运代理：提供海运、空运、陆运等全方位物流服务</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>采用智能化仓储管理系统，实现货物的精准定位和高效管理</li>
+                <li>配备先进的装卸设备，包括龙门吊、行车、叉车等</li>
+                <li>建立了完善的物流信息平台，实现物流全过程的可控化和可视化</li>
+                <li>与上海港、洋山深水港形成紧密合作，物流效率高</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 天津北方物流中心 -->
+          <div class="base-item">
+            <h3 class="base-name">天津北方物流中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>天津市滨海新区</li>
+                <li><strong>占地面积：</strong>120,000平方米</li>
+                <li><strong>仓储面积：</strong>90,000平方米</li>
+                <li><strong>投入使用时间：</strong>2014年</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>钢材仓储区：可储存各类钢材80万吨</li>
+                <li>铁路专用线：长度1.2公里，年吞吐能力200万吨</li>
+                <li>加工配送中心：提供钢材开平、分条等加工服务</li>
+                <li>区域配送中心：覆盖华北、东北地区的物流配送</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>拥有铁路专用线，物流成本低、效率高</li>
+                <li>采用自动化仓储系统，提高仓储效率</li>
+                <li>建立了完善的物流网络，确保物流安全</li>
+                <li>与天津港形成战略合作，海铁联运优势明显</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 武汉华中物流中心 -->
+          <div class="base-item">
+            <h3 class="base-name">武汉华中物流中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>湖北省武汉市东西湖区</li>
+                <li><strong>占地面积：</strong>100,000平方米</li>
+                <li><strong>仓储面积：</strong>70,000平方米</li>
+                <li><strong>投入使用时间：</strong>2016年</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>钢材仓储区：可储存各类钢材60万吨</li>
+                <li>公路配送中心：覆盖华中地区的物流配送</li>
+                <li>加工服务中心：提供钢材切割、焊接等加工服务</li>
+                <li>物流信息中心：区域物流信息的收集和处理</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>位于全国物流节点城市，交通便利</li>
+                <li>采用现代化仓储管理系统，提高管理效率</li>
+                <li>建立了完善的物流配送网络，配送半径覆盖500公里</li>
+                <li>与多家物流企业合作，物流服务灵活多样</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 成都西南物流中心 -->
+          <div class="base-item">
+            <h3 class="base-name">成都西南物流中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>四川省成都市青白江区</li>
+                <li><strong>占地面积：</strong>80,000平方米</li>
+                <li><strong>仓储面积：</strong>55,000平方米</li>
+                <li><strong>投入使用时间：</strong>2019年</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>钢材仓储区：可储存各类钢材40万吨</li>
+                <li>区域配送中心：覆盖西南地区的物流配送</li>
+                <li>加工服务中心：提供钢材加工服务</li>
+                <li>物流金融服务：提供仓单质押等物流金融服务</li>
+              </ul>
+
+              <h4 class="info-subtitle">技术特点</h4>
+              <ul class="info-list">
+                <li>位于西部物流枢纽，辐射西南地区</li>
+                <li>采用智能化仓储系统，提高仓储效率</li>
+                <li>建立了完善的仓储信息平台，为客户提供增值服务</li>
+                <li>与中欧班列形成合作，拓展国际物流通道</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 研发中心 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">研发中心</h2>
+
+          <!-- 南京总部研发中心 -->
+          <div class="base-item">
+            <h3 class="base-name">南京总部研发中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>江苏省南京市雨花区软件谷</li>
+                <li><strong>建筑面积：</strong>15,000平方米</li>
+                <li><strong>投入使用时间：</strong>2012年（一期），2020年（扩建）</li>
+                <li><strong>研发人员：</strong>120人，其中博士15人，硕士45人</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>新材料研发实验室：专注于高性能钢材和复合材料的研发</li>
+                <li>产品设计中心：采用CAD/CAM技术，进行产品设计优化</li>
+                <li>工艺研究中心：研究先进的生产工艺和加工技术</li>
+                <li>检测分析中心：配备先进的检测设备，进行产品性能测试和分析</li>
+              </ul>
+
+              <h4 class="info-subtitle">研发成果</h4>
+              <ul class="info-list">
+                <li>获得国家专利30余项，其中发明专利5项</li>
+                <li>参与制定国家标准12项，行业标准28项</li>
+                <li>研发的高性能钢材系列荣获江苏省科技进步奖</li>
+                <li>智能化控制系统获得南京市技术创新奖</li>
+              </ul>
+
+              <h4 class="info-subtitle">合作机构</h4>
+              <ul class="info-list">
+                <li>与东南大学、南京理工大学等高校建立产学研合作关系</li>
+                <li>与中国钢铁研究院、冶金工业规划研究院等科研院所合作</li>
+                <li>加入国际钢铁协会技术委员会，参与国际技术研发</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 上海前沿技术研发中心 -->
+          <div class="base-item">
+            <h3 class="base-name">上海前沿技术研发中心</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>上海市浦东新区张江高科技园区</li>
+                <li><strong>建筑面积：</strong>8,000平方米</li>
+                <li><strong>投入使用时间：</strong>2017年</li>
+                <li><strong>研发人员：</strong>60人，主要为高层次技术人才</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>数字化技术部：专注于钢铁贸易数字化平台的研发</li>
+                <li>智能制造技术部：研究钢铁生产加工的智能化技术</li>
+                <li>新材料技术部：开发钢铁产品的物联网和区块链方案</li>
+                <li>国际技术合作：与国际先进企业开展技术交流和合作</li>
+              </ul>
+
+              <h4 class="info-subtitle">研发成果</h4>
+              <ul class="info-list">
+                <li>开发的钢铁贸易数字化平台获得行业认可</li>
+                <li>智能化仓储物流系统实现了物流全过程的数字化管理</li>
+                <li>物联网技术在钢铁提升了产品质量追溯能力</li>
+                <li>数字化营销平台提升了客户服务水平</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 办公总部 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">办公总部</h2>
+
+          <!-- 南京总部大厦 -->
+          <div class="base-item">
+            <h3 class="base-name">南京总部大厦</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>江苏省南京市鼓楼区中央商务区</li>
+                <li><strong>建筑面积：</strong>35,000平方米</li>
+                <li><strong>投入使用时间：</strong>2015年</li>
+                <li><strong>办公人员：</strong>500人</li>
+              </ul>
+
+              <h4 class="info-subtitle">主要功能</h4>
+              <ul class="info-list">
+                <li>行政办公区：公司管理和决策中心</li>
+                <li>国际贸易部：负责国际市场开拓和客户维护</li>
+                <li>国内贸易部：负责国内市场销售和客户服务</li>
+                <li>财务管理中心：负责公司财务管理和资金运作</li>
+                <li>人力资源部：负责人才招聘、培训和管理</li>
+                <li>会议中心：配备现代化会议设施，可举办各类会议和活动</li>
+              </ul>
+
+              <h4 class="info-subtitle">设施特点</h4>
+              <ul class="info-list">
+                <li>智能化办公系统：实现办公自动化和信息化</li>
+                <li>节能环保建筑：采用节能环保技术，绿色建筑</li>
+                <li>人性化的办公：提供舒适的办公条件和休闲设施</li>
+                <li>安全监控系统：确保办公场所安全</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 海外分支机构 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">海外分支机构</h2>
+
+          <!-- 东南亚区域中心（新加坡） -->
+          <div class="base-item">
+            <h3 class="base-name">东南亚区域中心（新加坡）</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>新加坡裕廊工业区</li>
+                <li><strong>成立时间：</strong>2014年</li>
+                <li><strong>主要业务：</strong>东南亚市场开发和客户维护</li>
+                <li><strong>仓储面积：</strong>15,000平方米</li>
+              </ul>
+
+              <h4 class="info-subtitle">业务范围</h4>
+              <ul class="info-list">
+                <li>负责新加坡、马来西亚、印度尼西亚、泰国等东南亚国家的业务</li>
+                <li>提供符合国际标准的产品和服务</li>
+                <li>建立区域仓储网络，提高服务效率</li>
+                <li>收集市场信息，开发适合当地市场的产品</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 欧洲区域中心（德国杜塞尔多夫） -->
+          <div class="base-item">
+            <h3 class="base-name">欧洲区域中心（德国杜塞尔多夫）</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>德国北莱茵-威斯特法伦州杜塞尔多夫</li>
+                <li><strong>成立时间：</strong>2016年</li>
+                <li><strong>主要业务：</strong>欧洲市场开发和客户维护</li>
+                <li><strong>仓储面积：</strong>20,000平方米</li>
+              </ul>
+
+              <h4 class="info-subtitle">业务范围</h4>
+              <ul class="info-list">
+                <li>负责德国、法国、英国、意大利等欧洲国家的业务</li>
+                <li>提供符合欧洲标准的产品和服务</li>
+                <li>建立本地的技术支持和售后服务团队</li>
+                <li>参与欧洲行业展会和活动，提升品牌影响力</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 中东区域中心（阿联酋迪拜） -->
+          <div class="base-item">
+            <h3 class="base-name">中东区域中心（阿联酋迪拜）</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>阿联酋迪拜杰贝阿里自由贸易区</li>
+                <li><strong>成立时间：</strong>2018年</li>
+                <li><strong>主要业务：</strong>中东非洲市场开发</li>
+                <li><strong>仓储面积：</strong>25,000平方米</li>
+              </ul>
+
+              <h4 class="info-subtitle">业务范围</h4>
+              <ul class="info-list">
+                <li>负责阿联酋、沙特阿拉伯、卡塔尔等中东国家的业务</li>
+                <li>辐射非洲市场，拓展业务范围</li>
+                <li>利用迪拜的物流优势，提高配送和服务效率</li>
+                <li>建立本地的销售和售后服务团队</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- 北美区域中心（美国休斯顿） -->
+          <div class="base-item">
+            <h3 class="base-name">北美区域中心（美国休斯顿）</h3>
+            <div class="base-info">
+              <h4 class="info-subtitle">基本情况</h4>
+              <ul class="info-list">
+                <li><strong>地理位置：</strong>美国德克萨斯州休斯顿</li>
+                <li><strong>成立时间：</strong>2020年</li>
+                <li><strong>主要业务：</strong>北美市场开发和客户维护</li>
+                <li><strong>仓储面积：</strong>30,000平方米</li>
+              </ul>
+
+              <h4 class="info-subtitle">业务范围</h4>
+              <ul class="info-list">
+                <li>负责美国、加拿大、墨西哥等北美国家的业务</li>
+                <li>提供符合美国标准的产品和服务</li>
+                <li>建立本地的技术支持和售后服务团队</li>
+                <li>与北美当地钢铁企业合作，拓展业务渠道</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 基地建设与发展规划 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">基地建设与发展规划</h2>
+
+          <div class="base-info">
+            <h3 class="subsection-title">已完成的基地建设项目</h3>
+            <ul class="info-list">
+              <li><strong>南京总部生产基地三期扩建（2018年）：</strong>增加了高线钢管和万向管的产能，提高了产品质量和生产效率。</li>
+              <li><strong>唐山钢铁生产基地二期扩建（2017年）：</strong>增加了热轧带钢和冷轧带钢的产能，优化了产品结构。</li>
+              <li><strong>上海国际物流中心二期扩建（2016年）：</strong>增加了保税仓面积，提升了国际物流服务能力。</li>
+              <li><strong>南京总部研发中心扩建（2020年）：</strong>增加了研发人员和设备，提升了研发能力和水平。</li>
+            </ul>
+
+            <h3 class="subsection-title">正在建设的基地建设项目</h3>
+            <ul class="info-list">
+              <li><strong>越南生产基地建设（预计2024年投产）：</strong>位于越南海防市，占地面积100,000平方米，主要生产高线钢管和万向管，年产能30万吨。</li>
+              <li><strong>西安区域物流中心（预计2023年年底投入使用）：</strong>位于陕西省西安市国际港务区，占地面积60,000平方米，仓储面积40,000平方米。</li>
+              <li><strong>西南智能钢铁制造基地（预计2024年建设）：</strong>位于重庆市万州经济技术开发区，总投资25亿元，将建设智能化生产线和数字化管理系统。</li>
+            </ul>
+
+            <h3 class="subsection-title">未来发展规划</h3>
+            <ul class="info-list">
+              <li><strong>东南亚生产基地筹建：</strong>计划在印尼或泰国、越南等地建设生产基地，拓展东南亚市场。</li>
+              <li><strong>欧洲仓储物流筹建：</strong>计划在波兰、西班牙等地建设仓储物流中心，完善欧洲物流网络。</li>
+              <li><strong>数字化转型：</strong>推进所有基地的数字化、智能化改造，提升管理效率和服务水平。</li>
+              <li><strong>绿色低碳发展：</strong>实施节能减排工程，降低能耗和排放，推动企业可持续发展。</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- 基地管理与运营 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">基地管理与运营</h2>
+
+          <div class="base-info">
+            <h3 class="subsection-title">质量管理体系</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司建立了完善的质量管理体系，通过ISO 9001质量管理体系认证，确保产品质量符合国际标准。各生产基地配备了先进的检测设备和专业的质量管理人员，从原材料采购到产品出厂的全过程进行质量控制。
+            </p>
+
+            <h3 class="subsection-title">安全生产管理</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司高度重视安全生产工作，建立了严格的安全生产管理体系，通过ISO 45001职业健康安全管理体系认证。各基地配备了完善的安全设施和专业的安全管理人员，定期进行安全培训和演练，确保安全生产。
+            </p>
+
+            <h3 class="subsection-title">环境保护措施</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司积极履行企业社会责任，注重环境保护工作，通过ISO 14001环境管理体系认证。各基地采用环保型生产工艺，实施清洁生产，减少污染物排放。加强废弃物处理和资源回收利用，推进绿色发展。
+            </p>
+
+            <h3 class="subsection-title">数字化管理系统</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司推进了基地的数字化、智能化建设，建立了ERP系统、MES系统、WMS系统等数字化管理平台，实现了生产、仓储、物流、销售等全过程的数字化管理和监控，提高了管理效率和服务水平。
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- 基地成就与展望 -->
+      <section class="base-section">
+        <div class="content-container">
+          <h2 class="section-title">基地成就与展望</h2>
+
+          <div class="base-info">
+            <h3 class="subsection-title">基地建设成就</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司通过多年的发展，已建立了完善的产业链布局，形成了覆盖国内外的业务网络。各基地的建设和运营取得了显著成就：
+            </p>
+            <ul class="info-list">
+              <li>国内生产加工基地年产能达到200万吨以上</li>
+              <li>仓储物流基地总仓储面积超过35万平方米</li>
+              <li>研发中心拥有专业技术人员近200人</li>
+              <li>海外分支机构覆盖东南亚、欧洲、中东、北美等地区</li>
+            </ul>
+
+            <h3 class="subsection-title">未来展望</h3>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司将继续加大基地建设投入，完善产业布局，提升综合实力，致力于：
+            </p>
+            <ul class="info-list">
+              <li>加快推进数字化、智能化转型，提高生产效率和管理水平</li>
+              <li>加强研发投入，开发更多高附加值产品，提升产品竞争力</li>
+              <li>完善全球网络布局，提高国际市场竞争能力</li>
+              <li>推进绿色低碳发展，履行企业社会责任</li>
+              <li>加强人才培养和引进，为企业发展提供人才支持</li>
+            </ul>
+            <p class="content-text">
+              首达特科技工程（山东）有限公司将以完善的基地网络为基础，不断提升自身实力和国际竞争力，努力实现"成为全球领先的钢铁制品贸易服务商"的企业愿景！
+            </p>
+          </div>
+        </div>
+      </section>

demo-vue/src/locales/types.ts

@@ -0,0 +1,17 @@
+export type ProductSpec = {
+  label: string
+  enLabel: string
+  value: string
+  valueEn: string
+}
+
+export type ProductItemText = {
+  id: string
+  categoryKey: 'ebike' | 'trike' | 'emoto' | 'tractor'
+  name: string
+  tags: string[]
+  description: string
+  specs: ProductSpec[]
+}
+
+export type ProductImageBundle = Record<string, string[]>

demo-vue/src/locales/zh-CN/catalog.ts

@@ -0,0 +1,230 @@
+import type { ProductItemText } from '../types'
+
+export const productCategoryLabelsZh = {
+  all: '全部产品',
+  ebike: '电动自行车系列',
+  emoto: '电动摩托车系列',
+  trike: '民用三轮车系列',
+  tractor: '小型农机车系列'
+} as const
+
+export const productsZh: ProductItemText[] = [
+  {
+    id: 'changhong',
+    categoryKey: 'ebike',
+    name: '长虹',
+    tags: ['锂电铅酸', '长续航'],
+    description: '长虹智能电动车 | 双电池可选 液压减震 碟刹安全。',
+    specs: [
+      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
+      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
+      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
+      { value: '3.0-10, 铁轮真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
+      { value: '液压前叉、7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
+      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
+      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
+      { value: '透镜大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
+      { value: '1790*680*1060mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'mu5pro',
+    categoryKey: 'ebike',
+    name: 'MU5PRO',
+    tags: ['锂电铅酸', '大容量电池'],
+    description: 'MU5PRO 长续航电动车 | 1000W 动力 90-100KM 续航。',
+    specs: [
+      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
+      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
+      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
+      { value: '3.0-12中颗粒, 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
+      { value: '液压前叉，莲花座7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
+      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
+      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
+      { value: '大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
+      { value: '1940*670*1130mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1940*670*1130mm' }
+    ]
+  },
+  {
+    id: 'superknight',
+    categoryKey: 'ebike',
+    name: '超级骑士',
+    tags: ['独立大容量电池', '前后碟刹', '智能解锁'],
+    description: '超级骑士 通勤电动车 | 1200W 动力 NFC 智能解锁。',
+    specs: [
+      { value: '锂电60V24AH', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
+      { value: '1200W', label: '电机', enLabel: 'MOTOR', valueEn: '800W sine wave motor' },
+      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: 'Dual 18-channel controller' },
+      { value: '轮胎90/90-12CY610 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: 'Front and rear 400-10 vacuum tires' },
+      { value: '液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Independent suspension' },
+      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front and rear disc brakes' },
+      { value: 'NFC', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
+      { value: '凸镜大灯;尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
+      { value: '1850*670*1150mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1850*670*1150mm' }
+    ]
+  },
+  {
+    id: 'child18',
+    categoryKey: 'trike',
+    name: '儿童载1.8',
+    tags: ['民用三轮', '重载', '嘉陵电控', '短途运输'],
+    description: 'JL重载1.8民用三轮车，载重能力强，配备嘉陵磁浮电控系统，适合短途运输。',
+    specs: [
+      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '3300*1380*1415', valueEn: '3300*1380*1415mm' },
+      { label: '动力系统', enLabel: 'POWER SYSTEM', value: '嘉陵磁浮电控系统1200W方壳', valueEn: 'Jialing maglev electronic control system 1200W' },
+      { label: '轮胎规格', enLabel: 'TIRE SPEC', value: '前400-12后450-12钢丝胎', valueEn: 'Front 400-12 Rear 450-12 steel wire tire' },
+      { label: '减震系统', enLabel: 'SHOCK SYSTEM', value: '43外簧减震', valueEn: '43 external spring shock absorber' },
+      { label: '后桥规格', enLabel: 'REAR AXLE', value: '全悬浮变档180', valueEn: 'Full floating gear shift 180' }
+    ]
+  },
+  {
+    id: 'moli1',
+    categoryKey: 'trike',
+    name: '茉莉V1',
+    tags: ['民用三轮', '独立悬挂', '前后碟刹', '倒车影像'],
+    description: '茉莉V1民用三轮车，时尚设计，独立悬挂，前后碟刹，配备倒车影像和暖风，驾乘舒适。',
+    specs: [
+      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2750X1225X1670mm', valueEn: '2750X1225X1670mm' },
+      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
+      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
+      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
+      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
+      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
+      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
+    ]
+  },
+  {
+    id: 'moli2',
+    categoryKey: 'trike',
+    name: '茉莉V2',
+    tags: ['民用三轮', '小巧', '独立悬挂', '城市代步'],
+    description: '茉莉V2民用三轮车，小巧灵活，同样配备独立悬挂和暖风，适合城市代步。',
+    specs: [
+      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2410X1225X1670mm', valueEn: '2410X1225X1670mm' },
+      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
+      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
+      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
+      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
+      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
+      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
+    ]
+  },
+  {
+    id: 'yadea',
+    categoryKey: 'emoto',
+    name: '雅迪冠能 IF8',
+    tags: ['石墨烯电池', '无刷电机', '前后碟刹', '长续航'],
+    description: '雅迪冠能 IF8 电动摩托车 | 石墨烯三代 PLUS 电池 1200W 无刷电机 续航约 85km。',
+    specs: [
+      { label: '电池', enLabel: 'BATTERY', value: 'TTFAR 石墨烯三代 PLUS 铅酸电池 72V23Ah（可选锂电版本）', valueEn: 'TTFAR Graphene 3rd PLUS lead-acid battery 72V23Ah (lithium version optional)' },
+      { label: '电机', enLabel: 'MOTOR', value: '1200W 直流无刷电机', valueEn: '1200W DC brushless motor' },
+      { label: '控制器', enLabel: 'CONTROLLER', value: '雅迪 TTFAR 智能控制器', valueEn: 'Yadea TTFAR intelligent controller' },
+      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
+      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉 + 后置双减震', valueEn: 'Hydraulic front fork + rear dual shock absorber' },
+      { label: '刹车', enLabel: 'BRAKE', value: '前后双碟刹', valueEn: 'Front and rear disc brakes' },
+      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航约 85km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage about 85km' },
+      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '高亮透镜大灯 + LED 尾灯 + 转向灯', valueEn: 'High-brightness lens headlights + LED taillights + turn signals' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'fengsu',
+    categoryKey: 'emoto',
+    name: '锋速幻影',
+    tags: ['双电池可选', '高性能电机', '前后碟刹', '长续航'],
+    description: '锋速幻影 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
+    specs: [
+      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah（可选）', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah (optional)' },
+      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能直流无刷电机', valueEn: '1000W high-performance DC brushless motor' },
+      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
+      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
+      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、后置液压减震', valueEn: 'Hydraulic front fork + rear hydraulic shock absorber' },
+      { label: '刹车', enLabel: 'BRAKE', value: '前 / 后碟刹', valueEn: 'Front and rear disc brakes' },
+      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航 90-100Km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage 90-100Km' },
+      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、LED 转向灯', valueEn: 'Lens headlights, LED taillights, LED turn signals' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'anying',
+    categoryKey: 'emoto',
+    name: '暗影骑士',
+    tags: ['双电池可选', '无刷电机', '前后碟刹', '长续航'],
+    description: '暗影骑士 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
+    specs: [
+      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah' },
+      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能无刷电机', valueEn: '1000W high-performance brushless motor' },
+      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
+      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 铁轮真空胎', valueEn: '3.0-10 Iron Wheel Vacuum Tire' },
+      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、7.0*290 液压减震', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
+      { label: '刹车', enLabel: 'BRAKE', value: '前/后碟刹', valueEn: 'Front and rear disc brakes' },
+      { label: '仪表', enLabel: 'DASHBOARD', value: '中速平表里程 90-100Km', valueEn: 'Medium speed flat road mileage 90-100km' },
+      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、动态流光转向灯', valueEn: 'Lens headlights, LED taillights, dynamic flow turn signals' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
+    ]
+  },
+  {
+    id: 'tractor6090',
+    categoryKey: 'tractor',
+    name: '动力王 6090 拖拉机',
+    tags: ['300 马力', '四驱动力', '液压系统', '智能导航'],
+    description: '动力王 6090 拖拉机 | 300HP 六缸涡轮增压发动机 PowerShift 变速箱 全液压制动。',
+    specs: [
+      { label: '发动机', enLabel: 'ENGINE', value: 'PowerTech™ PVS 6090 6 缸 9.0L 增压式帕四发动机', valueEn: '6-cylinder 9.0L H pressure Commc Engine' },
+      { label: '标定功率', enLabel: 'POWER RATING', value: '300HP / 220.5kW', valueEn: '300HP / 220.5kW' },
+      { label: '净功率', enLabel: 'NET POWER', value: '326.3HP / 240kW', valueEn: '326.3HP / 240kW' },
+      { label: '变速箱', enLabel: 'TRANSMISSION', value: '16×4 全动力换挡（PowerShift）', valueEn: '16×4 Full PowerShift Transmission' },
+      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速；187.5kW 输出功率', valueEn: '1000r/min Stand 187.5kW Output' },
+      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '4 组电控液压输出阀；最大提升力 288.3kN', valueEn: '4 Electro-Hydraulic Valves; Max. Lift 288.3kN' },
+      { label: '轮胎', enLabel: 'TIRES', value: '标配：600/70R30（前）/650/85R38（后）选装：420/85R34/480/80R50 双后轮', valueEn: 'Standard: 600/70 (R) 650/85R38 (R) Optional: 420/85R34/480/80 Rear' },
+      { label: '悬挂', enLabel: 'HITCH', value: '后置 3 类 / 4N 三点悬挂', valueEn: 'Category 3/4N R point Hitch' },
+      { label: '制动', enLabel: 'BRAKE', value: '全液压湿式制动系统', valueEn: 'Full Hydraulic Wet System' },
+      { label: '驾驶室', enLabel: 'CAB', value: '1750 系列豪华空气悬浮驾驶，冷暖空调', valueEn: '1750 Series Air S Premium Cab, Air Conditioning' },
+      { label: '导航', enLabel: 'NAVIGATION', value: 'CommandCenter 中文触屏显示；ATI 自动驾驶', valueEn: 'CommandCenter Display, ATI Auto' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '6613×3012-3351×3403mm', valueEn: '6613×3012-3351×3403mm' }
+    ]
+  },
+  {
+    id: 'tractor665',
+    categoryKey: 'tractor',
+    name: '挑战者 MT665D 拖拉机',
+    tags: ['340 马力', '无级变速', '全液压制动', '全景驾驶室'],
+    description: '挑战者 MT665D 农用拖拉机 | 340HP 六缸柴油发动机 CVT 无级变速 全液压湿式制动。',
+    specs: [
+      { label: '发动机', enLabel: 'ENGINE', value: 'AGCO Power 8.4L 直列 6 缸柴油发动机', valueEn: 'AGCO Power 8.4L Inline 6-cylinder Diesel Engine' },
+      { label: '额定功率', enLabel: 'POWER RATING', value: '340HP / 253.5kW（发动机总功率）', valueEn: '340HP / 253.5kW (Engine Gross Power)' },
+      { label: '动力输出轴功率', enLabel: 'PTO POWER', value: '290HP / 216.3kW', valueEn: '290HP / 216.3kW' },
+      { label: '变速箱', enLabel: 'TRANSMISSION', value: '无级变速（CVT）双机械挡位', valueEn: 'Continuously Variable Transmission (CVT) with 2 Mechanical Ranges' },
+      { label: '动力输出轴', enLabel: 'PTO', value: '标准 1000r/min，支持双速调节', valueEn: 'Standard 1000r/min, with two-speed adjustment' },
+      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '中心闭心式液压系统，流量 160L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate 160L/min' },
+      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 480/70R34，后 520/85R46 支持双轮胎选装', valueEn: 'Standard: Front 480/70R34, Rear 520/85R46 Dual Rear Wheels Optional' },
+      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥85kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥85kN' },
+      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
+      { label: '驾驶室', enLabel: 'CAB', value: '全景玻璃悬浮驾驶室，配备冷暖空调', valueEn: 'Panoramic Glass Suspended Cab with Air Conditioning System' },
+      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 632L 大容量油箱', valueEn: '632L Large Capacity Fuel Tank' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 5500×2700×3200mm', valueEn: 'Approx. 5500×2700×3200mm' },
+      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 11500kg', valueEn: 'Approx. 11500kg Operating Weight' }
+    ]
+  },
+  {
+    id: 'leiting300',
+    categoryKey: 'tractor',
+    name: '雷霆 300HP 拖拉机',
+    tags: ['300 马力', '六缸发动机', '全动力换挡', '全液压制动'],
+    description: '雷霆 300HP 拖拉机 | 六缸高压共轨柴油发动机 全动力换挡变速箱 全液压湿式制动。',
+    specs: [
+      { label: '发动机', enLabel: 'ENGINE', value: '直列六缸高压共轨柴油发动机', valueEn: 'Inline 6-cylinder High-pressure Common Rail Diesel Engine' },
+      { label: '额定功率', enLabel: 'POWER RATING', value: '220kW / 约 300HP', valueEn: '220kW / Approx. 300HP Rated Power' },
+      { label: '变速箱', enLabel: 'TRANSMISSION', value: '全动力换挡变速箱', valueEn: 'Full PowerShift Transmission' },
+      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速', valueEn: '1000r/min Standard Speed PTO' },
+      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '闭心式液压系统，流量 ≥150L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate ≥150L/min' },
+      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 540/65R30，后 650/85R38，支持双后轮', valueEn: 'Standard: Front 540/65R30, Rear 650/85R38, Dual Rear Wheels Optional' },
+      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥90kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥90kN' },
+      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
+      { label: '驾驶室', enLabel: 'CAB', value: '全景悬浮驾驶室，配备冷暖空调与减震座椅', valueEn: 'Panoramic Suspended Cab with Air Conditioning and Air Seat' },
+      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 500L 大容量油箱', valueEn: 'Approx. 500L Large Capacity Fuel Tank' },
+      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 6200×3000×3300mm', valueEn: 'Approx. 6200×3000×3300mm' },
+      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 10500kg', valueEn: 'Approx. 10500kg Operating Weight' }
+    ]
+  }
+]

demo-vue/src/locales/zh-CN/index.ts

@@ -0,0 +1,10 @@
+import { messages } from './messages'
+import { productCategoryLabelsZh, productsZh } from './catalog'
+
+export default {
+  ...messages,
+  catalog: {
+    categoryLabels: productCategoryLabelsZh,
+    products: productsZh
+  }
+}

demo-vue/src/locales/zh-CN/messages.ts

@@ -0,0 +1,172 @@
+export const messages = {
+  common: {
+    enable: '启用',
+    disable: '禁用',
+    status: '状态',
+    search: '查询',
+    add: '新增',
+    addShort: '新增',
+    edit: '修改',
+    delete: '删除',
+    batchDelete: '批量删除',
+    operation: '操作',
+    confirm: '确定',
+    cancel: '取消',
+    name: '姓名',
+    phone: '电话',
+    username: '用户名',
+    password: '密码',
+    sex: '性别',
+    male: '男',
+    female: '女',
+    selectPlaceholder: '请选择',
+    createTime: '创建时间',
+    success: '成功',
+    logOut: '退出',
+    currentUser: '当前用户',
+    backToList: '返回列表',
+    back: '返回',
+    detail: '详情',
+    yes: '是',
+    no: '否',
+    goTo: '跳往',
+    toPage: '前往',
+    pageUnit: '页',
+    specBasicCn: '基础配置',
+    specBasicEn: 'BASIC CONFIGURATION',
+    more: '查看更多',
+    collapse: '收起',
+    views: '访问量',
+    publishDate: '发布日期',
+    dateLabel: '发布日期：',
+    viewsLabel: '访问量：',
+    companyShort: '山东首达特科技',
+    wechatOA: '公众号：首达特',
+    allRights: '保留所有权利',
+    copyrightFull: '版权所有 © 2026 山东首达特科技工程有限公司 保留所有权利。',
+    companyInfo: '公司信息',
+    addressLabel: '中国江苏省常州市武进区湟里镇村前村'
+  },
+  language: { zh: '中文', en: 'English', switch: '语言' },
+  nav: {
+    home: '首页',
+    aboutUs: '关于我们',
+    companyIntro: '公司简介',
+    culture: '企业文化',
+    base: '生产基地',
+    org: '组织架构',
+    honors: '荣誉资质',
+    history: '发展历程',
+    products: '产品中心',
+    newsHub: '新闻中心',
+    companyNews: '公司新闻',
+    industryNews: '行业动态'
+  },
+  footer: {
+    about: '关于我们',
+    news: '新闻中心',
+    followIndustry: '行业动态',
+    siteSubtitle: '首达特科技官网',
+    privacy: '隐私政策',
+    terms: '服务条款'
+  },
+  brand: { company: '山东首达特科技工程有限公司' },
+  headerAdmin: { title: '首达特后台管理系统', currentUser: '当前用户', logout: '退出' },
+  home: {
+    heroTitle1: '以诚信铸就品质，以智',
+    heroTitle2: '能赢领市场',
+    heroSub: '专注智能搬运，助力全球物流高效升级',
+    btnProducts: '查看产品',
+    btnContact: '联系我们',
+    aboutTitle: '关于我们',
+    aboutP1: '山东首达特科技工程有限公司成立于 2024 年 8 月 7 日，是一家集研发、制造、销售、服务于一体的综合性科技企业。公司专注于机电装备、智能控制系统及工业配套产品的集成供应与技术服务，业务涵盖机械设备研发与销售、工业自动化控制、计算机软硬件开发、金属材料及制品、建筑建材、五金机电、化工产品、汽车及农机配件、进出口贸易等多元领域。',
+    aboutP2: '我们依托完善的供应链体系与专业技术团队，为建筑工程、工业制造、物流仓储、农业生产等行业客户提供一站式配套解决方案，产品与服务覆盖全国并远销海外，以稳定品质与高效服务满足各领域多元化、高品质需求。',
+    more: '了解更多',
+    showcaseTitle: '产品展示',
+    showcaseSub: '全系列智能搬运设备，以一级资质与四大工艺，满足您多样化的物料搬运需求。',
+    viewAll: '查看所有产品',
+    carouselAlt1: '生产基地鸟瞰图1',
+    carouselAlt2: '生产基地鸟瞰图2',
+    carouselAlt3: '生产基地鸟瞰图3'
+  },
+  about: {
+    title: '首达特科技工程（山东）有限公司',
+    section: '公司概况',
+    p1: '山东首达特科技工程有限公司，是一家集科技研发、生产制造、商贸服务于一体的综合性企业，注册地位于山东济宁。公司以合规经营为基础，业务布局覆盖工程技术、工业制造、贸易流通等多个领域，具备完整的市场化运营资质与发展潜力。',
+    scopeTitle: '业务范围',
+    scopeP: '山东首达特科技工程有限公司，Shandong Showdart Technology Co.,Ltd.业务覆盖建筑智能化系统设计、机械设备销售与研发、机械电气设备制造与销售、金属材料及制品销售、金属表面处理及热处理加工、计算机软硬件及电子产品销售、软件开发、日用百货与化工产品（不含许可类）销售、五金交电与劳保用品销售、汽车及摩托车零配件批发、针纺织品销售、牲畜销售，以及货物进出口、技术进出口、进出口代理等多个领域，业务布局覆盖国内多省市，并可面向全球开展进出口贸易业务。',
+    missionTitle: '企业使命',
+    missionP: '立足山东，面向全国，以 “科技赋能产业、服务创造价值” 为核心使命，通过多元化的业务布局与合规化的经营模式，为客户提供优质的产品与技术服务，推动工业智能化、商贸流通与工程建设领域的协同发展，助力行业转型升级，实现企业与客户、社会的共赢发展。',
+    advTitle: '核心优势',
+    adv1: '多元业务布局优势：业务覆盖工程技术、工业制造、商贸流通、进出口贸易等多个领域，具备较强的抗风险能力与跨领域资源整合能力；',
+    adv2: '全链条服务能力：从产品研发、生产制造到销售服务，再到进出口代理，形成了完整的业务链条，可满足客户多场景、一站式的采购与合作需求；',
+    adv3: '合规化经营基础：严格区分许可项目与一般项目的经营边界，依法开展业务，保障企业长期稳定发展；',
+    adv4: '灵活的市场适配性：业务覆盖工业、建筑、农业、日用等多个行业，可快速响应不同市场的需求变化，拓展业务场景。'
+  },
+  productsPage: {
+    bannerTitle: '多元布局，科技赋能，满足全行业设备与材料供应需求',
+    bannerSub: '依托多元业务矩阵与合规经营体系，我们以专业品质保障产品与服务的可靠、适配与高效。从设备研发制造到材料加工销售，从智能化设计到全球贸易，覆盖多场景需求，提供一站式解决方案。',
+    filterLabel: '按分类筛选',
+    filterAll: '全部产品'
+  },
+  services: {
+    pageTitle: '我们的服务',
+    pageSub: '持一级资质，拥四大工艺，年产40万台，为您提供从设计到交付的全链条智能搬运解决方案，助力客户提升运营效率。',
+    s1: '全方位解决方案',
+    s1d: '从深度定制到全球交付，从品质控制到营销赋能，我们构建了覆盖产品全生命周期的服务体系。',
+    c1t: 'OEM/ODM 定制', c1d: '依托强大的研发与制造实力，提供灵活的个性化定制服务。',
+    c1a: '产品配置灵活调整，满足不同工况需求', c1b: '专属色彩与品牌标识设计', c1c: '个性化包装方案', c1e: '从概念到量产的全程技术支持',
+    c2t: '精密制造', c2d: '现代化生产基地与四大工艺，确保高效生产与品质一致性。',
+    c2a: '四大完整工艺（冲压、焊接、涂装、总装）', c2b: '自动化生产线，保障精度与效率', c2c: '年产40万台产能，快速响应市场需求', c2e: '绿色环保制造，践行可持续发展',
+    c3t: '质量控制', c3d: '严控五关，匠心打造安全耐用的物料搬运设备。',
+    c3L1: '原材料源头检验，杜绝不良流入', c3L2: '生产过程全检，实时监控品质', c3L3: '成品严格路试与性能检测', c3L4: '产品通过CE等国际认证',
+    c4t: '全球交付', c4d: '完善的物流体系，实现高效安全的全球运输。',
+    c4L1: '一站式出口认证办理，简化流程', c4L2: '海陆空多式联运，灵活选择', c4L3: '专业防护包装，确保运输安全', c4L4: '全程可视化追踪，信息透明',
+    c5t: '售后支持', c5d: '快速响应的全球服务网络，让您无后顾之忧。',
+    c5L1: '专业支持团队，提供技术保障', c5L2: '完善质保体系，原厂备件直供', c5L3: '远程技术指导，即时解决问题', c5L4: '24小时快速响应，全球服务覆盖',
+    c6t: '营销赋能', c6d: '全方位市场支持，助力合作伙伴开拓增长。',
+    c6L1: '专业产品素材库与整合营销物料', c6L2: '市场趋势分析与销售策略建议', c6L3: '销售技能培训，提升团队能力', c6L4: '品牌建设支持，共创价值',
+    procTitle: '合作流程', procSub: '清晰、高效的四步合作路径，确保每一个项目都能精准落地，创造价值。',
+    p1t: '需求对接', p1d: '深入了解您的市场定位、应用场景与产品需求，专业团队一对一沟通，确保精准把握每一个细节。',
+    p2t: '方案定制', p2d: '依托四大工艺与研发实力，提供最优产品配置与可行性方案，量身打造符合您需求的个性化解决方案。',
+    p3t: '智造生产', p3d: '在现代化生产基地启动生产，严格执行严控五关品控体系，确保每一台设备都符合品质标准与交期要求。',
+    p4t: '全球交付', p4d: '安排高效物流，提供一站式出口服务，确保产品安全、准时送达全球客户手中。',
+    faqTitle: '常见问题', faqSub: '以下是我们合作伙伴最关心的问题解答。如需更多信息，欢迎随时联系我们。',
+    faqContact: '联系我们的支持团队',
+    fq1: '最小起订量（MOQ）是多少？', fa1: '我们重视长期合作，可为新伙伴提供灵活起订量支持。标准订单建议以整柜为单位，具体可根据产品型号与需求协商确定。',
+    fq2: '是否支持品牌定制？', fa2: '完全支持。我们提供从产品配置、品牌标识、外观色彩到包装设计的全方位OEM/ODM服务，确保产品完美契合您的品牌形象。',
+    fq3: '生产与交付周期是多久？', fa3: '生产周期通常为15-25个工作日，具体视订单量而定。全球运输时间视目的地而定，一般为15-45天。我们可根据项目需求提供加急服务选项。',
+    fq4: '是否提供备件支持？', fa4: '是的。每个订单标配1%免费易损件，并建立完善的备件供应体系，可快速供应全系列原厂备件，确保设备长期稳定运行。',
+    ctaTitle: '开启合作新篇章', ctaSub: '持一级资质，拥四大工艺，年产40万台——让我们基于完整的产业实力，共同打造符合您市场需求的智能搬运解决方案。',
+    ctaQuote: '获取报价', ctaView: '查看产品'
+  },
+  privacy: {
+    title: '隐私政策', updated: '更新日期：2025年2月19日', intro: '本隐私政策说明了我们如何收集和使用您的信息。',
+    c1: '我们收集的信息', c1p: '我们收集您直接提供给我们的信息：', c1a: '账户信息', c1b: '使用数据', c1c: '通信偏好设置',
+    c2: '我们如何使用您的信息', c2p: '我们将收集的信息用于：', c2a: '提供服务', c2b: '改善用户体验', c2c: '发送重要更新',
+    c3: '数据安全', c3p: '我们采取适当的安全措施来保护您的数据。',
+    c4: '联系方式', c4p: '如有隐私相关问题，请联系我们的团队。',
+    c5: '政策更新', c5p: '我们可能会不时更新本政策。请定期查看。'
+  },
+  terms: {
+    title: '服务条款', updated: '更新日期：2025年2月19日', intro: '欢迎使用我们的服务。使用本网站即表示您同意以下条款。',
+    t1: '1. 条款接受', t1p: '访问和使用本网站即表示您接受并同意受本协议条款和条件的约束。',
+    t2: '2. 用户责任', t2p: '您同意：', t2a: '提供准确信息', t2b: '维护账户安全', t2c: '遵守所有适用法律',
+    t3: '3. 服务变更', t3p: '我们保留以下权利：', t3a: '修改或终止服务', t3b: '随时更新这些条款',
+    t4: '联系我们', t4p: '如果您对这些条款有任何疑问，请与我们联系。'
+  },
+  news: {
+    listTitle: '新闻标题', content: '新闻内容', views: '浏览量', adminTitle: '公司新闻',
+    batchWarn: '请选择需要删除的记录', delOk: '删除成功', delConfirm: '确定要删除吗？', delTitle: '确定删除', selectDate: '选择日期', enterTitle: '请输入新闻标题', enterContent: '请输入新闻内容', pickDate: '请选择发布日期', pickStatus: '请选择状态', saveOkAdd: '添加成功', saveOkEdit: '修改成功',
+    publicBanner: '公司新闻', listBannerSub: 'NEWS', detailBannerSub: 'NEWS', metaDateLabel: '发布日期：', labelPublishDate: '发布日期', newsCenter: '新闻中心', newsDetail: '新闻详情', fetchFail: '获取新闻列表失败', fetchDetailFail: '获取新闻详情失败', noId: '未找到新闻ID', viewsIncrFail: '增加访问量失败', backList: '返回新闻列表', publishTime: '发布时间：'
+  },
+  industry: {
+    listTitle: '行业动态标题', content: '动态内容', colTitle: '动态标题', adminTitle: '行业动态', detailTitle: '行业动态详情', detailTitleSub: 'NEWS', listBanner: '行业动态', listBannerSub: 'INDUSTRY', labelPublishDate: '发布日期', plTitle: '请输入动态标题', plContent: '请输入动态内容', fetchFail: '获取行业动态列表失败', publicTime: '发布时间：', returnList: '返回列表', fetchDetailFail: '获取行业动态详情失败', breadcrumbDetail: '详情'
+  },
+  admin: {
+    welcome: '欢迎使用首达特后台管理系统', loginTitle: '首达特后台管理系统', login: '登 录', plUser: '请输入用户名', plPwd: '请输入密码', ok: '登录成功', fail: '登录失败', avatar: '头像', leftHome: '首页', org: '组织管理', adminList: '管理员信息管理', companyNewsManage: '公司新闻管理', industryManage: '行业动态管理',
+    delWarn: '请选择需要删除的记录', delOk: '删除成功', delConfirm: '确定要删除吗？', delTitle: '确定删除', saveOk: '成功', reLogin: '您需要重新登陆', reLoginTitle: '确认退出登录', reLoginBtn: '重新登陆'
+  },
+  request: { notLogin: '您没有登录，请重新登录', timeout: '网络超时', network: '网络连接错误', error: '网络发生错误' },
+  formRules: { userRequired: '请输入用户名', pwdRequired: '请输入密码', nameRequired: '请输入姓名', sexRequired: '请选择性别', telRequired: '请输入电话', phoneEmpty: '手机号不能为空', phoneDigits: '请输入数字值', phoneInvalid: '手机号格式不正确' }
+}

demo-vue/src/main.ts

@@ -5,15 +5,14 @@ import router from './router'
 import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import i18n from './utils/i18n'
+
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
 app.use(createPinia())
+app.use(i18n)
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')
-app.use(ElementPlus, {
-    locale: zhCn,
-})

demo-vue/src/utils/i18n.ts

@@ -0,0 +1,19 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from '../locales/zh-CN'
+import enUS from '../locales/en-US'
+
+const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('locale') : null
+const defaultLocale = stored === 'en-US' || stored === 'zh-CN' ? stored : 'zh-CN'
+
+export const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: defaultLocale,
+  fallbackLocale: 'zh-CN',
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS
+  }
+})
+
+export default i18n

demo-vue/src/utils/request.ts

@@ -2,6 +2,7 @@ import axios, { type AxiosRequestConfig } from 'axios';
 import { saveLocalStorage, getLocalStorage,clearLocalStorage } from '@/utils/utils';
 import Constants from '@/utils/constants';
 import {ElMessage, ElMessageBox} from 'element-plus';
+import i18n from '@/utils/i18n';
 
 // token的名称  需要和服务端 配置的对应
 const TOKEN_NAME = 'pdmtoken';
@@ -29,6 +30,10 @@ request.interceptors.request.use(
         } else {
             delete config.headers[TOKEN_NAME];
         }
+        const locale = (i18n.global.locale as { value: string }).value
+            || (typeof localStorage !== 'undefined' && localStorage.getItem('locale'))
+            || 'zh-CN';
+        config.headers['Accept-Language'] = locale;
         return config;
     },
     (error: any) => {
@@ -59,15 +64,16 @@ request.interceptors.response.use(
             // `token` 过期或者账号已在别处登录
             if (res.code === 11012 || res.code == 11011) {
                 ElMessage.closeAll();
-                ElMessage.error('您没有登录，请重新登录');
+                ElMessage.error((i18n.global as { t: (k: string) => string }).t('request.notLogin'));
                 setTimeout(logout, 300);
                 return Promise.reject(response);
             }
             // 长时间未操作系统，需要重新登录
             if (res.code === 30001) {
-                ElMessageBox.confirm('您需要重新登陆', '确认退出登录', {
-                    confirmButtonText: '重新登陆',
-                    cancelButtonText: '取消',
+                const gt = (i18n.global as { t: (k: string) => string }).t;
+                ElMessageBox.confirm(gt('admin.reLogin'), gt('admin.reLoginTitle'), {
+                    confirmButtonText: gt('admin.reLoginBtn'),
+                    cancelButtonText: (i18n.global as { t: (k: string) => string }).t('common.cancel'),
                     type: 'warning'
                 }).then(() => {
                     logout()
@@ -86,15 +92,16 @@ request.interceptors.response.use(
     },
     (error) => {
         // 对响应错误做点什么
+        const gt = (i18n.global as { t: (k: string) => string }).t;
         if (error.message.indexOf('timeout') !== -1) {
             ElMessage.closeAll();
-            ElMessage.error('网络超时');
+            ElMessage.error(gt('request.timeout'));
         } else if (error.message === 'Network Error') {
             ElMessage.closeAll();
-            ElMessage.error('网络连接错误');
+            ElMessage.error(gt('request.network'));
         } else if (error.message.indexOf('Request') !== -1) {
             ElMessage.closeAll();
-            ElMessage.error('网络发生错误');
+            ElMessage.error(gt('request.error'));
         }
         return Promise.reject(error);
     }

demo-vue/src/views/AboutDetail.vue

@@ -1,67 +1,49 @@
 <template>
   <div class="about-detail-page">
-    <!-- 顶部导航栏 -->
     <HeaderComponent />
 
-    <!-- 中间内容区域 - 关于我们详情 -->
     <main class="about-detail">
-      <!-- 关于我们标题区域 -->
       <section class="page-header">
         <div class="header-content">
-          <h1 class="page-title">首达特科技工程（山东）有限公司</h1>
-          <h2 class="section-title">公司概况</h2>
+          <h1 class="page-title">{{ t('about.title') }}</h1>
+          <h2 class="section-title">{{ t('about.section') }}</h2>
         </div>
       </section>
 
-      <!-- 公司简介内容区域 -->
       <section class="company-content">
         <div class="content-container">
           <div class="content-item">
-            <p class="content-text">
-              山东首达特科技工程有限公司，是一家集科技研发、生产制造、商贸服务于一体的综合性企业，注册地位于山东济宁。公司以合规经营为基础，业务布局覆盖工程技术、工业制造、贸易流通等多个领域，具备完整的市场化运营资质与发展潜力。
-            </p>
+            <p class="content-text">{{ t('about.p1') }}</p>
           </div>
 
           <div class="content-item">
-            <h3 class="subsection-title">业务范围</h3>
-            <p class="content-text">
-              山东首达特科技工程有限公司，Shandong Showdart Technology Co.,Ltd.业务覆盖建筑智能化系统设计、机械设备销售与研发、机械电气设备制造与销售、金属材料及制品销售、金属表面处理及热处理加工、计算机软硬件及电子产品销售、软件开发、日用百货与化工产品（不含许可类）销售、五金交电与劳保用品销售、汽车及摩托车零配件批发、针纺织品销售、牲畜销售，以及货物进出口、技术进出口、进出口代理等多个领域，业务布局覆盖国内多省市，并可面向全球开展进出口贸易业务。
-            </p>
+            <h3 class="subsection-title">{{ t('about.scopeTitle') }}</h3>
+            <p class="content-text">{{ t('about.scopeP') }}</p>
           </div>
 
           <div class="content-item">
-            <h3 class="subsection-title">企业使命</h3>
-            <p class="content-text">
-              立足山东，面向全国，以 “科技赋能产业、服务创造价值” 为核心使命，通过多元化的业务布局与合规化的经营模式，为客户提供优质的产品与技术服务，推动工业智能化、商贸流通与工程建设领域的协同发展，助力行业转型升级，实现企业与客户、社会的共赢发展。
-            </p>
+            <h3 class="subsection-title">{{ t('about.missionTitle') }}</h3>
+            <p class="content-text">{{ t('about.missionP') }}</p>
           </div>
 
           <div class="content-item">
-            <h3 class="subsection-title">核心优势</h3>
+            <h3 class="subsection-title">{{ t('about.advTitle') }}</h3>
             <ul class="advantage-list">
               <li class="advantage-item">
                 <span class="advantage-number">1.</span>
-                <div class="advantage-content">
-                  <strong>多元业务布局优势：</strong>业务覆盖工程技术、工业制造、商贸流通、进出口贸易等多个领域，具备较强的抗风险能力与跨领域资源整合能力；
-                </div>
+                <div class="advantage-content">{{ t('about.adv1') }}</div>
               </li>
               <li class="advantage-item">
                 <span class="advantage-number">2.</span>
-                <div class="advantage-content">
-                  <strong>全链条服务能力：</strong>从产品研发、生产制造到销售服务，再到进出口代理，形成了完整的业务链条，可满足客户多场景、一站式的采购与合作需求；
-                </div>
+                <div class="advantage-content">{{ t('about.adv2') }}</div>
               </li>
               <li class="advantage-item">
                 <span class="advantage-number">3.</span>
-                <div class="advantage-content">
-                  <strong>合规化经营基础：</strong>严格区分许可项目与一般项目的经营边界，依法开展业务，保障企业长期稳定发展；
-                </div>
+                <div class="advantage-content">{{ t('about.adv3') }}</div>
               </li>
               <li class="advantage-item">
                 <span class="advantage-number">4.</span>
-                <div class="advantage-content">
-                  <strong>灵活的市场适配性：</strong>业务覆盖工业、建筑、农业、日用等多个行业，可快速响应不同市场的需求变化，拓展业务场景。
-                </div>
+                <div class="advantage-content">{{ t('about.adv4') }}</div>
               </li>
             </ul>
           </div>
@@ -69,14 +51,15 @@
       </section>
     </main>
 
-    <!-- 底部 Footer -->
     <FooterComponent />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+const { t } = useI18n()
 </script>
 
 <style scoped lang="less">
@@ -120,13 +103,14 @@ import FooterComponent from '@/components/FooterComponent.vue'
 }
 
 .company-content {
-  padding: 0 0 80px;
+  padding: 40px 0 80px;
 
   .content-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 200px;
   }
+}
 
 .content-item {
   margin-bottom: 40px;
@@ -148,9 +132,10 @@ import FooterComponent from '@/components/FooterComponent.vue'
     font-size: 16px;
     line-height: 1.8;
     color: #666;
-      margin: 0;
+    margin: 0 0 12px;
     text-align: justify;
   }
+}
 
 .advantage-list {
   list-style: none;
@@ -160,7 +145,8 @@ import FooterComponent from '@/components/FooterComponent.vue'
 
 .advantage-item {
   display: flex;
-      gap: 8px;
+  align-items: flex-start;
+  gap: 12px;
   margin-bottom: 16px;
 
   &:last-child {
@@ -170,9 +156,8 @@ import FooterComponent from '@/components/FooterComponent.vue'
   .advantage-number {
     font-size: 16px;
     font-weight: 600;
-        color: #1a1a1a;
+    color: #1890ff;
     flex-shrink: 0;
-        line-height: 1.8;
   }
 
   .advantage-content {
@@ -180,41 +165,14 @@ import FooterComponent from '@/components/FooterComponent.vue'
     font-size: 16px;
     line-height: 1.8;
     color: #666;
-
-        strong {
-          color: #1a1a1a;
-          font-weight: 600;
-        }
-      }
-    }
+    text-align: justify;
   }
 }
 
 @media (max-width: 768px) {
-  .header-content,
-  .content-container {
+  .page-header .header-content,
+  .company-content .content-container {
     padding: 0 24px;
   }
-
-  .page-header {
-    padding: 32px 0 24px;
-
-    .page-title {
-      font-size: 28px;
-    }
-
-    .section-title {
-      font-size: 22px;
-    }
-  }
-
-  .subsection-title {
-    font-size: 20px;
-  }
-
-  .content-text,
-  .advantage-content {
-    font-size: 14px;
-  }
 }
 </style>

demo-vue/src/views/CorporateCulture.vue

@@ -1,228 +1,9 @@
-<!-- src/views/CorporateCulture.vue -->
 <template>
   <div class="culture-page">
-    <!-- 顶部导航栏 -->
     <HeaderComponent />
-
-    <!-- 中间内容区域 -->
     <main class="culture-content">
-      <!-- 标题区域 -->
-      <section class="page-header">
-        <div class="header-wrapper">
-          <h1 class="page-title">首达特科技工程（山东）有限公司企业文化</h1>
-          <h2 class="section-title">企业文化概述</h2>
-        </div>
-      </section>
-
-      <!-- 企业文化内容区域 -->
-      <section class="culture-sections">
-        <div class="content-wrapper">
-          <!-- 企业文化概述 -->
-          <div class="culture-item">
-            <p class="content-text">
-              首达特科技工程（山东）有限公司自成立以来，始终重视企业文化建设，将文化作为企业发展的灵魂和动力。经过多年的沉淀和发展，形成了独具特色的企业文化体系，成为公司核心竞争力的重要组成部分。
-            </p>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司的企业文化以"诚信、创新、协作、共赢"为核心理念，致力于营造一个积极向上、充满活力的工作环境，激发员工潜能，推动企业可持续发展。
-            </p>
-          </div>
-
-          <!-- 企业使命 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">企业使命</h3>
-            <p class="sub-subtitle">连接全球科技贸易，创造美好未来</p>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司以促进全球钢铁贸易的发展为己任，通过提供优质的产品和服务，为客户创造价值，为员工提供发展平台，为社会做出贡献，共同创造更加美好的未来。
-            </p>
-          </div>
-
-          <!-- 企业愿景 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">企业愿景</h3>
-            <p class="sub-subtitle">成为全球领先的钢铁制品贸易商</p>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司致力于成为全球钢铁制品贸易领域的领导者，通过不断提升产品质量和服务水平，扩大市场份额，增强品牌影响力，实现企业的可持续发展。
-            </p>
-          </div>
-
-          <!-- 核心价值观 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">核心价值观</h3>
-            <div class="values-grid">
-              <div class="value-card">
-                <h4 class="value-title">诚信为本</h4>
-                <p class="value-desc">
-                  诚信是首达特科技工程（山东）有限公司的企业文化。我们坚持诚实守信的原则，对客户、对供应商、对员工、对社会保持高度的诚信，以诚信赢得信任，以诚信铸就品牌。
-                </p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">创新驱动</h4>
-                <p class="value-desc">
-                  创新是首达特科技工程（山东）有限公司发展的动力源泉。我们鼓励员工不断创新思维，勇于突破传统，积极探索新的业务模式和管理方法，以创新推动企业发展。
-                </p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">协作共赢</h4>
-                <p class="value-desc">
-                  协作是首达特科技工程（山东）有限公司的企业文化。我们强调团队合作精神，鼓励部门之间、员工之间的协作配合，同时注重与客户、供应商等利益相关方的合作，实现互利共赢。
-                </p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">客户至上</h4>
-                <p class="value-desc">
-                  客户是首达特科技工程（山东）有限公司的核心价值。我们始终以客户为中心，关注客户需求，不断提升服务质量，为客户提供优质的产品和解决方案，超越客户期望。
-                </p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">追求卓越</h4>
-                <p class="value-desc">
-                  卓越是首达特科技工程（山东）有限公司的企业文化。我们不满足于现状，不断挑战自我，追求更高的目标和更好的业绩，以卓越的品质和服务赢得市场认可。
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 企业精神 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">企业精神</h3>
-            <div class="values-grid">
-              <div class="value-card">
-                <h4 class="value-title">艰苦创业</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司继承和艰苦创业的精神，不怕困难，勇于拼搏，在激烈的市场竞争中奋勇前行。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">精益求精</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司坚持精益求精的工作态度，注重细节，追求完美，不断提升产品质量和服务水平。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">开拓创新</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司具有开拓创新的精神，敢于突破传统，勇于尝试新的方法和思路，不断推动企业发展。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">团结协作</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司注重团结协作，相互支持，共同进步，形成强大的团队凝聚力和战斗力。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">永不言弃</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司具有永不言弃的精神，面对困难和挑战，始终保持坚定的信念和顽强的毅力，坚持不懈，直至成功。</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 经营理念 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">经营理念</h3>
-            <div class="values-grid">
-              <div class="value-card">
-                <h4 class="value-title">质量第一</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司始终将产品质量放在首位，严格控制产品质量，确保为客户提供高品质、高可靠性的产品。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">信誉至上</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司注重企业信誉，信守承诺，履行责任，以良好的信誉赢得客户的信任和支持。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">服务优质</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司致力于为客户提供优质的服务，从产品咨询、技术支持到物流配送，全方位满足客户需求。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">效率优先</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司注重效率提升，不断优化业务流程，提高工作效率，为客户提供及时、高效的服务。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">持续改进</h4>
-                <p class="value-desc">首达特科技工程（山东）有限公司坚持持续改进的理念，不断总结经验，发现问题，完善机制，推动企业不断发展进步。</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 员工行为准则 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">员工行为准则</h3>
-            <div class="values-grid">
-              <div class="value-card">
-                <h4 class="value-title">爱岗敬业</h4>
-                <p class="value-desc">热爱工作，忠于职守，认真履行岗位职责，努力完成工作任务。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">诚实守信</h4>
-                <p class="value-desc">言行一致，表里如一，遵守承诺，维护企业形象和个人信誉。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">学习创新</h4>
-                <p class="value-desc">不断学习新知识、新技能，积极创新工作方法，提升工作效率和质量。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">团结协作</h4>
-                <p class="value-desc">尊重同事，主动沟通，相互支持，共同完成工作任务，营造和谐的工作氛围。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">客户第一</h4>
-                <p class="value-desc">以客户为中心，关注客户需求，提供优质服务，超越客户期望。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">遵章守纪</h4>
-                <p class="value-desc">遵守国家法律法规和公司规章制度，自觉维护公司秩序和利益。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">勤俭节约</h4>
-                <p class="value-desc">树立节约意识，合理利用资源，杜绝浪费，降低成本。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">安全环保</h4>
-                <p class="value-desc">重视安全工作，遵守安全操作规程，保护环境，促进可持续发展。</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 企业文化活动 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">企业文化活动</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司定期组织各种企业文化活动，增强员工的归属感和凝聚力，丰富员工的业余生活。
-            </p>
-            <div class="values-grid">
-              <div class="value-card">
-                <h4 class="value-title">员工培训</h4>
-                <p class="value-desc">公司定期组织各类培训活动，提升员工的专业技能和综合素质，为员工的职业发展提供支持。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">团队建设</h4>
-                <p class="value-desc">公司组织各类团队建设活动，如拓展训练、户外团建等，增强团队凝聚力和协作能力。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">文体活动</h4>
-                <p class="value-desc">公司组织各类文体活动，如篮球比赛、羽毛球比赛、文艺晚会等，丰富员工的业余生活。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">节日庆祝</h4>
-                <p class="value-desc">公司在重要节日组织庆祝活动，如春节联欢会、中秋茶话会等，营造温馨和谐的企业文化氛围。</p>
-              </div>
-              <div class="value-card">
-                <h4 class="value-title">公益活动</h4>
-                <p class="value-desc">公司积极参与社会公益活动，履行企业社会责任，回馈社会。</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 企业文化建设成果 -->
-          <div class="culture-item">
-            <h3 class="subsection-title">企业文化建设成果</h3>
-            <p class="content-text">
-              通过多年的企业文化建设，首达特科技工程（山东）有限公司形成了积极向上、充满活力的企业文化氛围，员工的归属感和凝聚力不断增强，企业的核心竞争力不断提升。
-            </p>
-            <p class="content-text">
-              企业文化已成为首达特科技工程（山东）有限公司发展的重要支撑和动力源泉，推动公司不断取得新的成就。在未来的发展中，首达特科技工程（山东）有限公司将继续加强企业文化建设，不断丰富和完善企业文化体系，为企业的可持续发展提供强大的文化支撑。
-            </p>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司相信，优秀的企业文化是企业长盛不衰的重要保障。我们将继续传承和发扬企业文化，让文化成为企业发展的灵魂，引领企业走向更加美好的未来！
-            </p>
-          </div>
-        </div>
-      </section>
+      <div class="culture-inject" v-html="bodyHtml" />
     </main>
-
-    <!-- 底部 Footer -->
     <FooterComponent />
   </div>
 </template>
@@ -230,211 +11,27 @@
 <script setup lang="ts">
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { useLocaleBlockHtml } from '@/composables/useLocaleBlockHtml'
+import blockZh from '@/locales/html/corporate-culture.zh.html?raw'
+import blockEn from '@/locales/html/corporate-culture.en.html?raw'
+
+const bodyHtml = useLocaleBlockHtml(blockZh, blockEn)
 </script>
 
 <style scoped lang="less">
-.culture-page {
-  width: 100%;
-  min-height: 100vh;
-  background: #fff;
+.culture-page { width: 100%; min-height: 100vh; background: #fff; }
+.culture-content { width: 100%; background: #fff; padding-top: 70px; }
+:deep(.page-header) {
+  .header-wrapper { max-width: 1400px; margin: 0 auto; padding: 40px 200px 0; }
+  .page-title { font-size: 36px; font-weight: 700; }
+  .section-title { font-size: 28px; font-weight: 600; margin: 0 0 20px; }
 }
-
-.culture-content {
-  width: 100%;
-  background: #fff;
-  padding-top: 70px;
-}
-
-.page-header {
-  background: #fff;
-  padding: 40px 0 0;
-
-  .header-wrapper {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 200px;
-  }
-
-  .page-title {
-    font-size: 36px;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin: 0 0 24px;
-  }
-
-  .section-title {
-    font-size: 28px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-}
-
-.culture-sections {
-  padding: 0 0 80px;
-
-  .content-wrapper {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 200px;
-  }
-}
-
-.culture-item {
-  margin-bottom: 48px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .subsection-title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 12px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-
-  .sub-subtitle {
-    font-size: 16px;
-    font-weight: 600;
-    color: #666;
-    margin: 0 0 16px;
-  }
-
-  .content-text {
-    font-size: 16px;
-    line-height: 1.8;
-    color: #666;
-    margin: 0 0 12px;
-    text-align: justify;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .values-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-
-  .value-card {
-    background: #fff;
-    border-radius: 16px;
-    padding: 32px 24px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s;
-
-    &:hover {
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-      transform: translateY(-4px);
-    }
-
-    .value-title {
-      font-size: 18px;
-      font-weight: 700;
-      color: #1a1a1a;
-      margin: 0 0 16px;
-    }
-
-    .value-desc {
-      font-size: 14px;
-      line-height: 1.8;
-      color: #666;
-      margin: 0;
-    }
-  }
-
-  .numbered-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .list-item {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .item-number {
-      font-size: 16px;
-      font-weight: 600;
-      color: #1a1a1a;
-      flex-shrink: 0;
-      line-height: 1.8;
-    }
-
-    .item-content {
-      flex: 1;
-
-      strong {
-        font-size: 16px;
-        font-weight: 600;
-        color: #1a1a1a;
-        display: block;
-        margin-bottom: 8px;
-      }
-
-      p {
-        font-size: 16px;
-        line-height: 1.8;
-        color: #666;
-        margin: 0;
-        text-align: justify;
-      }
-    }
-  }
-}
-
-@media (max-width: 1200px) {
-  .values-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .header-wrapper,
-  .content-wrapper {
-    padding: 0 24px;
-  }
-
-  .page-header {
-    padding: 32px 0 24px;
-
-    .page-title {
-      font-size: 28px;
-    }
-
-    .section-title {
-      font-size: 22px;
-    }
-  }
-
-  .subsection-title {
-    font-size: 20px;
-  }
-
-  .content-text,
-  .item-content p,
-  .sub-subtitle {
-    font-size: 14px;
-  }
-
-  .values-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .value-card {
-    padding: 24px 20px;
+:deep(.culture-sections) {
+  .content-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 200px 80px; }
 }
+:deep(.culture-item) {
+  .content-text, .value-desc, .sub-subtitle { line-height: 1.8; color: #666; }
+  .values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+  .value-card { padding: 16px; background: #f8f9fa; border-radius: 8px; }
 }
 </style>

demo-vue/src/views/DevelopmentHistory.vue

@@ -1,234 +1,7 @@
 <template>
   <div class="development-history-page">
     <HeaderComponent />
-
-    <main class="development-history">
-      <section class="page-header">
-        <div class="header-content">
-          <h1 class="page-title">山东首达特科技工程有限公司发展历史</h1>
-          <h2 class="section-title">发展历程</h2>
-        </div>
-      </section>
-
-      <section class="content-sections">
-        <div class="content-wrapper">
-          <div class="history-item">
-            <h3 class="subsection-title">创立与起步阶段（2008-2010）</h3>
-            <p class="content-text">
-              山东首达特科技工程有限公司成立于2008年，正值全球金融危机时期。在这样的市场环境下，公司创始人凭借敏锐的市场洞察力和坚定的创业决心，毅然投身于钢铁制品外贸领域。
-            </p>
-            <ul class="numbered-list">
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2008年6月：</strong>公司在上海正式注册成立，初期仅有5名员工，办公面积不足100平方米
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2008年8月：</strong>获得第一批海外订单，向东南亚某国出口直线高频焊接圆管
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2009年3月：</strong>与国内第一家钢铁生产企业建立合作关系
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2010年1月：</strong>公司年出口额突破1000万美元，员工人数增至15人
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="history-item">
-            <h3 class="subsection-title">稳步发展阶段（2011-2013）</h3>
-            <p class="content-text">
-              在这一阶段，山东首达特科技工程有限公司开始扩大业务范围，拓展国际市场，逐步建立起稳定的客户群体和供应链体系。
-            </p>
-            <ul class="numbered-list">
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2011年5月：</strong>在东南亚设立第一个海外办事处，加强对区域市场的开发
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2012年2月：</strong>获得ISO9001质量管理体系认证
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2012年8月：</strong>公司年出口额突破3000万美元，产品远销20多个国家和地区
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2013年4月：</strong>扩大办公场所，员工人数增至30人，设立专门的技术支持部门
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="history-item">
-            <h3 class="subsection-title">快速发展阶段（2014-2016）</h3>
-            <p class="content-text">
-              随着业务的不断扩大，山东首达特科技工程有限公司开始深化国际合作，优化产品结构，提升服务质量，进入快速发展通道。
-            </p>
-            <ul class="numbered-list">
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2014年3月：</strong>与欧洲大型钢铁分销商建立长期合作关系，成功打开欧洲市场
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2014年11月：</strong>获得"上海市外贸出口先进企业"称号
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2015年6月：</strong>年出口额突破8000万美元，员工人数增至50人
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2016年7月：</strong>在中东地区设立第二个海外办事处，加强对中东市场的开发
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2016年12月：</strong>推出钢塑复合管系列产品，丰富公司产品线
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="history-item">
-            <h3 class="subsection-title">规模扩张阶段（2017-2020）</h3>
-            <p class="content-text">
-              这一阶段，山东首达特科技工程有限公司进一步扩大业务规模，深化国际合作，提升品牌影响力，成为行业内具有一定知名度的外贸企业。
-            </p>
-            <ul class="numbered-list">
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2017年4月：</strong>投资建设现代化物流配送中心，提高产品配送效率
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2017年9月：</strong>年出口额突破1.2亿美元，产品远销40多个国家和地区
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2018年6月：</strong>公司成立十周年庆典，发布"十年发展规划"
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2018年11月：</strong>获得"全国钢铁贸易行业百强企业"称号
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2019年3月：</strong>在北美设立第三个海外办事处，加强对北美市场的开发
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2019年10月：</strong>推出高端定制加工服务，满足客户个性化需求
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2020年：</strong>积极应对新冠疫情挑战，调整经营策略，确保业务稳定发展
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="history-item">
-            <h3 class="subsection-title">创新转型阶段（2021-至今）</h3>
-            <p class="content-text">
-              面对全球经济格局的变化和数字化浪潮，山东首达特科技工程有限公司开始推进数字化转型，加强创新能力建设，开启高质量发展新征程。
-            </p>
-            <ul class="numbered-list">
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2021年5月：</strong>启动数字化转型项目，建设智能供应链管理系统
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2021年10月：</strong>年出口额突破2亿美元，员工人数增至80人
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2022年3月：</strong>与多家国内外科研机构建立合作关系，加强产品研发和技术创新
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2022年8月：</strong>获得"上海市数字化转型示范企业"称号
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2023年1月：</strong>推出全新企业标识和品牌形象，提升品牌价值
-                </div>
-              </li>
-              <li class="list-item">
-                <span class="bullet-point"></span>
-                <div class="item-content">
-                  <strong>2023年4月：</strong>启动"绿色供应链"建设，推动可持续发展
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <div class="history-item future-item">
-            <h3 class="subsection-title">展望未来</h3>
-            <p class="content-text">
-              回顾过去十五年的发展历程，山东首达特科技工程有限公司从一个小型外贸企业成长为行业内具有影响力的钢铁制品贸易商，每一步都凝聚着全体员工的智慧和汗水。
-            </p>
-            <p class="content-text">
-              展望未来，山东首达特科技工程有限公司将继续坚持创新发展，深化国际合作，推进数字化转型，加强绿色发展，努力实现更高质量、更可持续的发展，为客户创造更大价值，为行业发展做出更大贡献。
-            </p>
-            <p class="content-text">
-              山东首达特科技工程有限公司的发展历程，是一部艰苦创业、不断进取的奋斗史，也是中国外贸企业成长的一个缩影。我们相信，在全体员工的共同努力下，山东首达特科技工程有限公司的明天一定会更加美好！
-            </p>
-          </div>
-        </div>
-      </section>
-    </main>
-
+    <main class="development-history" v-html="bodyHtml" />
     <FooterComponent />
   </div>
 </template>
@@ -236,6 +9,11 @@
 <script setup lang="ts">
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { useLocaleBlockHtml } from '@/composables/useLocaleBlockHtml'
+import blockZh from '@/locales/html/development.zh.html?raw'
+import blockEn from '@/locales/html/development.en.html?raw'
+
+const bodyHtml = useLocaleBlockHtml(blockZh, blockEn)
 </script>
 
 <style scoped lang="less">
@@ -244,30 +22,25 @@ import FooterComponent from '@/components/FooterComponent.vue'
   min-height: 100vh;
   background: #fff;
 }
-
 .development-history {
   width: 100%;
   background: #fff;
   padding-top: 70px;
 }
-
-.page-header {
+:deep(.page-header) {
   background: #fff;
   padding: 40px 0 0;
-
   .header-content {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 200px;
   }
-
   .page-title {
     font-size: 36px;
     font-weight: 700;
     color: #1a1a1a;
     margin: 0 0 24px;
   }
-
   .section-title {
     font-size: 28px;
     font-weight: 600;
@@ -277,24 +50,16 @@ import FooterComponent from '@/components/FooterComponent.vue'
     border-bottom: 1px solid #e8e8e8;
   }
 }
-
-.content-sections {
+:deep(.content-sections) {
   padding: 0 0 80px;
-
   .content-wrapper {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 200px;
   }
 }
-
-.history-item {
+:deep(.history-item) {
   margin-bottom: 48px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   .subsection-title {
     font-size: 24px;
     font-weight: 600;
@@ -303,35 +68,18 @@ import FooterComponent from '@/components/FooterComponent.vue'
     padding-bottom: 10px;
     border-bottom: 1px solid #e8e8e8;
   }
-
   .content-text {
     font-size: 16px;
     line-height: 1.8;
     color: #666;
     margin: 0 0 20px;
     text-align: justify;
-
-    &:last-child {
-      margin-bottom: 0;
   }
-  }
-
-  .numbered-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
   .list-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
     .bullet-point {
       width: 6px;
       height: 6px;
@@ -340,46 +88,12 @@ import FooterComponent from '@/components/FooterComponent.vue'
       flex-shrink: 0;
       margin-top: 8px;
     }
-
-    .item-content {
-      flex: 1;
-      font-size: 16px;
-      line-height: 1.8;
-      color: #666;
-
-      strong {
-        color: #1a1a1a;
-        font-weight: 600;
+    .item-content { flex: 1; font-size: 16px; line-height: 1.8; color: #666; }
   }
+  .numbered-list { list-style: none; padding: 0; margin: 0; }
 }
-  }
-}
-
 @media (max-width: 768px) {
-  .header-content,
-  .content-wrapper {
-    padding: 0 24px;
-  }
-
-  .page-header {
-    padding: 32px 0 24px;
-
-    .page-title {
-      font-size: 28px;
-    }
-
-    .section-title {
-      font-size: 22px;
-    }
-  }
-
-  .subsection-title {
-    font-size: 20px;
-  }
-
-  .content-text,
-  .item-content {
-    font-size: 14px;
-  }
+  :deep(.page-header .header-content) { padding: 0 24px; }
+  :deep(.content-sections .content-wrapper) { padding: 0 24px; }
 }
 </style>

demo-vue/src/views/HonorsAndQualifications.vue

@@ -1,394 +1,9 @@
 <template>
   <div class="honors-page">
     <HeaderComponent />
-
     <main class="honors-content">
-      <section class="page-header">
-        <div class="header-content">
-          <h1 class="page-title">首达特科技工程（山东）有限公司奖项与荣誉</h1>
-          <h2 class="section-title">荣誉概述</h2>
-        </div>
-      </section>
-
-      <section class="honors-sections">
-        <div class="content-container">
-          <div class="content-item">
-            <p class="content-text">
-              首达特科技工程（山东）有限公司自成立以来，凭借卓越的产品质量、优质的服务和良好的企业信誉，在国内外市场赢得了广泛的认可和赞誉。先后获得了多项重要奖项和认证。这些荣誉不仅是对首达特过去成绩的肯定，更是激励我们不断前进的动力。
-            </p>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">国际认证与资质</h3>
-
-            <h4 class="sub-subsection-title">ISO质量管理体系认证</h4>
-            <h5 class="item-title">ISO 9001:2015质量管理体系认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2012年首次认证，至今持续保持</li>
-              <li>认证机构：德国TÜV莱茵</li>
-              <li>认证范围：钢铁制品的采购、销售和服务全过程质量管理</li>
-            </ul>
-
-            <h5 class="item-title">环境管理体系认证</h5>
-            <h5 class="item-title">ISO 14001:2015环境管理体系认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2015年</li>
-              <li>认证机构：瑞士SGS集团</li>
-              <li>认证范围：公司运营活动中的环境管理</li>
-            </ul>
-
-            <h5 class="item-title">职业健康安全管理体系认证</h5>
-            <h5 class="item-title">ISO 45001:2018职业健康安全管理体系认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2019年</li>
-              <li>认证机构：英国BSI集团</li>
-              <li>认证范围：公司内部职业健康安全管理</li>
-            </ul>
-
-            <h4 class="sub-subsection-title">产品认证</h4>
-            <h5 class="item-title">欧盟CE认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2013年</li>
-              <li>认证范围：无缝钢管、方矩管等产品出口欧盟市场</li>
-            </ul>
-
-            <h5 class="item-title">美国API认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2016年</li>
-              <li>认证范围：石油天然气行业用钢管产品</li>
-            </ul>
-
-            <h5 class="item-title">日本JIS认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2017年</li>
-              <li>认证范围：符合日本工业标准的钢铁制品</li>
-            </ul>
-
-            <h5 class="item-title">韩国KS认证</h5>
-            <ul class="detail-list">
-              <li>获得时间：2018年</li>
-              <li>认证范围：符合韩国工业标准的钢铁制品</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">国家级奖项</h3>
-
-            <h5 class="item-title">中国进出口质量诚信企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国海关总署</li>
-              <li>获得时间：2014年、2016年、2018年、2020年、2022年（连续五届）</li>
-              <li>奖项级别：国家级</li>
-            </ul>
-
-            <h5 class="item-title">中国钢铁贸易行业领军企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国钢铁工业协会</li>
-              <li>获得时间：2017年、2020年</li>
-              <li>奖项级别：国家级</li>
-            </ul>
-
-            <h5 class="item-title">国家高新技术企业</h5>
-            <ul class="detail-list">
-              <li>认定机构：科技部、财政部、国家税务总局</li>
-              <li>获得时间：2018年首次认定，2021年复核通过</li>
-              <li>证书有效期：三年</li>
-            </ul>
-
-            <h5 class="item-title">中国外贸500强企业</h5>
-            <ul class="detail-list">
-              <li>发布机构：中国对外经济贸易合作企业协会</li>
-              <li>获得时间：2019年、2020年、2021年、2022年</li>
-              <li>排名：2022年位列第286位</li>
-            </ul>
-
-            <h5 class="item-title">全国守合同重信用企业</h5>
-            <ul class="detail-list">
-              <li>认定机构：国家市场监督管理总局</li>
-              <li>获得时间：2016年、2018年、2020年、2022年（连续四届）</li>
-              <li>认定级别：国家级</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">省级奖项</h3>
-
-            <h5 class="item-title">江苏省优秀民营企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省人民政府</li>
-              <li>获得时间：2015年、2019年、2022年</li>
-              <li>奖项级别：省级</li>
-            </ul>
-
-            <h5 class="item-title">江苏省出口名牌企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省商务厅</li>
-              <li>获得时间：2016年、2019年、2022年</li>
-              <li>有效期：三年</li>
-            </ul>
-
-            <h5 class="item-title">江苏省质量奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省市场监督管理局</li>
-              <li>获得时间：2018年</li>
-              <li>奖项级别：省级质量领域最高荣誉</li>
-            </ul>
-
-            <h5 class="item-title">江苏省AAA级信用企业</h5>
-            <ul class="detail-list">
-              <li>评定机构：江苏省企业信用管理协会</li>
-              <li>获得时间：2014年至今（连续九年）</li>
-              <li>信用等级：AAA级（最高级）</li>
-            </ul>
-
-            <h5 class="item-title">江苏省钢铁贸易行业十强企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省钢铁贸易商会</li>
-              <li>获得时间：2015年至2022年（连续八年）</li>
-              <li>排名：2022年位列第3位</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">市级奖项</h3>
-
-            <h5 class="item-title">南京市优秀企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市人民政府</li>
-              <li>获得时间：2016年、2018年、2020年、2022年</li>
-              <li>奖项级别：市级</li>
-            </ul>
-
-            <h5 class="item-title">南京市外贸出口先进企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市商务局</li>
-              <li>获得时间：2017年至2022年（连续六年）</li>
-              <li>排名：2022年位列全市第15位</li>
-            </ul>
-
-            <h5 class="item-title">南京市质量管理奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市市场监督管理局</li>
-              <li>获得时间：2019年</li>
-              <li>奖项级别：市级质量领域最高荣誉</li>
-            </ul>
-
-            <h5 class="item-title">南京市纳税大户</h5>
-            <ul class="detail-list">
-              <li>认定机构：南京市税务局</li>
-              <li>获得时间：2018年至2022年（连续五年）</li>
-              <li>表彰等级：A级</li>
-            </ul>
-
-            <h5 class="item-title">南京市企业文化建设示范单位</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市企业文化建设协会</li>
-              <li>获得时间：2021年</li>
-              <li>有效期：两年</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">行业荣誉</h3>
-
-            <h5 class="item-title">中国钢铁物流行业年度领军企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国物流与采购联合会钢铁物流专业委员会</li>
-              <li>获得时间：2018年、2019年、2022年</li>
-            </ul>
-
-            <h5 class="item-title">中国钢铁电子商务平台优秀服务商</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国钢铁工业协会电子商务工作委员会</li>
-              <li>获得时间：2018年、2020年、2022年</li>
-            </ul>
-
-            <h5 class="item-title">中国金属材料流通行业AAA级信用企业</h5>
-            <ul class="detail-list">
-              <li>评定机构：中国金属材料流通协会</li>
-              <li>获得时间：2015年至今（连续八年）</li>
-              <li>信用等级：AAA级</li>
-            </ul>
-
-            <h5 class="item-title">中国钢铁供应链创新企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国钢铁供应链创新联盟</li>
-              <li>获得时间：2021年</li>
-            </ul>
-
-            <h5 class="item-title">中国钢铁国际贸易卓越贡献奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国五矿化工进出口商会</li>
-              <li>获得时间：2022年</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">客户与合作伙伴认可</h3>
-
-            <h5 class="item-title">优秀供应商奖</h5>
-            <ul class="detail-list">
-              <li>授予方：韩国浦项钢铁（POSCO）</li>
-              <li>获得时间：2017年、2019年、2021年、2023年</li>
-              <li>评价："最可靠的合作伙伴"</li>
-            </ul>
-
-            <h5 class="item-title">质量优胜奖</h5>
-            <ul class="detail-list">
-              <li>授予方：日本新日铁住金株式会社</li>
-              <li>获得时间：2018年、2020年、2022年</li>
-              <li>评价："卓越的质量控制能力"</li>
-            </ul>
-
-            <h5 class="item-title">最佳服务奖</h5>
-            <ul class="detail-list">
-              <li>授予方：德国蒂森克虏伯集团</li>
-              <li>获得时间：2019年、2021年</li>
-              <li>评价："高效、专业的服务团队"</li>
-            </ul>
-
-            <h5 class="item-title">战略合作伙伴</h5>
-            <ul class="detail-list">
-              <li>授予方：法国安赛乐米塔尔集团</li>
-              <li>获得时间：2017年至今</li>
-              <li>合作级别：全球战略合作伙伴</li>
-            </ul>
-
-            <h5 class="item-title">年度最佳供应商</h5>
-            <ul class="detail-list">
-              <li>授予方：美国钢铁公司</li>
-              <li>获得时间：2022年</li>
-              <li>评价："为我们提供了稳定可靠的产品供应"</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">社会责任奖项</h3>
-
-            <h5 class="item-title">中国企业社会责任优秀案例</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国企业社会责任研究会</li>
-              <li>获得时间：2020年</li>
-              <li>案例主题："钢铁产业绿色供应链建设"</li>
-            </ul>
-
-            <h5 class="item-title">江苏省慈善捐赠先进单位</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省慈善总会</li>
-              <li>获得时间：2019年、2021年、2023年</li>
-            </ul>
-
-            <h5 class="item-title">南京市环保模范企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市生态环境局</li>
-              <li>获得时间：2018年、2020年、2022年</li>
-            </ul>
-
-            <h5 class="item-title">扶贫攻坚贡献奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏扶贫开发领导小组</li>
-              <li>获得时间：2021年</li>
-              <li>表彰理由：在结对帮扶贫困地区工作中作出突出贡献</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">科技创新奖项</h3>
-
-            <h5 class="item-title">江苏省科技进步奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省科学技术厅</li>
-              <li>获得时间：2020年</li>
-              <li>获奖项目："高性能耐腐蚀钢管研发与应用"</li>
-              <li>奖项级别：二等奖</li>
-            </ul>
-
-            <h5 class="item-title">南京市技术创新奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：南京市科学技术局</li>
-              <li>获得时间：2019年、2021年</li>
-              <li>获奖项目："钢铁贸易数字化平台建设"（2019年）、"智能仓储物流系统"（2021年）</li>
-            </ul>
-
-            <h5 class="item-title">中国钢铁行业技术创新示范企业</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：中国钢铁工业协会</li>
-              <li>获得时间：2022年</li>
-            </ul>
-
-            <h5 class="item-title">知识产权管理体系认证（贯标）</h5>
-            <ul class="detail-list">
-              <li>认证机构：国家知识产权局</li>
-              <li>获得时间：2018年</li>
-              <li>认证范围：公司知识产权的获取、维护、运用和保护</li>
-            </ul>
-
-            <h5 class="item-title">江苏省专利奖</h5>
-            <ul class="detail-list">
-              <li>颁奖机构：江苏省知识产权局</li>
-              <li>获得时间：2021年</li>
-              <li>获奖专利："一种新型耐腐蚀钢管生产工艺"（发明专利）</li>
-              <li>奖项级别：优秀奖</li>
-            </ul>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">荣誉成就统计</h3>
-            <p class="content-text">
-              截至2023年6月，首达特科技工程（山东）有限公司累计获得：
-            </p>
-            <ul class="stats-list">
-              <li class="stats-item">
-                <span class="stats-label">国际认证：</span>
-                <span class="stats-value">8项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">国家级奖项：</span>
-                <span class="stats-value">12项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">省级奖项：</span>
-                <span class="stats-value">15项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">市级奖项：</span>
-                <span class="stats-value">18项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">行业荣誉：</span>
-                <span class="stats-value">15项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">客户认可：</span>
-                <span class="stats-value">12项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">社会责任奖项：</span>
-                <span class="stats-value">8项</span>
-              </li>
-              <li class="stats-item">
-                <span class="stats-label">科技创新奖项：</span>
-                <span class="stats-value">10项</span>
-              </li>
-            </ul>
-            <p class="summary-text">
-              <strong>总计：98项各类荣誉和认证</strong>
-            </p>
-          </div>
-
-          <div class="content-item">
-            <h3 class="subsection-title">未来展望</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司将继续坚持"质量第一、信誉至上"的经营理念，不断提升产品质量和服务水平，为客户创造更大价值，为行业发展做出更大贡献。我们将积极参与国际标准和制定，加强技术创新，推动行业进步，争取获得更多的国际认可和荣誉。
-            </p>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司感谢社会各界的支持和认可。我们将以此为动力，不断努力，追求卓越，为成为全球领先的钢铁制品贸易商而不懈奋斗！
-            </p>
-          </div>
-        </div>
-      </section>
+      <div class="honors-inject" v-html="bodyHtml" />
     </main>
-
     <FooterComponent />
   </div>
 </template>
@@ -396,6 +11,11 @@
 <script setup lang="ts">
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { useLocaleBlockHtml } from '@/composables/useLocaleBlockHtml'
+import blockZh from '@/locales/html/honors.zh.html?raw'
+import blockEn from '@/locales/html/honors.en.html?raw'
+
+const bodyHtml = useLocaleBlockHtml(blockZh, blockEn)
 </script>
 
 <style scoped lang="less">
@@ -404,166 +24,31 @@ import FooterComponent from '@/components/FooterComponent.vue'
   min-height: 100vh;
   background: #fff;
 }
-
 .honors-content {
   width: 100%;
   background: #fff;
   padding-top: 70px;
 }
-
-.page-header {
+:deep(.page-header) {
   background: #fff;
   padding: 40px 0 0;
-
   .header-content {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 200px;
   }
-
-  .page-title {
-    font-size: 36px;
-    font-weight: 700;
-    color: #1a1a1a;
-    margin: 0 0 24px;
+  .page-title { font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 24px; }
+  .section-title { font-size: 28px; font-weight: 600; color: #1a1a1a; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; }
 }
-
-  .section-title {
-    font-size: 28px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-}
-
-.honors-sections {
+:deep(.honors-sections) {
   padding: 0 0 80px;
-
-  .content-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 200px;
-  }
-}
-
-.content-item {
-  margin-bottom: 40px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .subsection-title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 0 0 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-
-  .sub-subsection-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: #333;
-    margin: 24px 0 12px;
-  }
-
-  .item-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #1a1a1a;
-    margin: 16px 0 8px;
-  }
-
-  .content-text {
-    font-size: 16px;
-    line-height: 1.8;
-    color: #666;
-    margin: 0 0 12px;
-    text-align: justify;
-  }
-
-  .detail-list {
-    list-style: disc;
-    padding-left: 24px;
-    margin: 0 0 16px;
-
-    li {
-      font-size: 14px;
-      color: #666;
-      line-height: 1.8;
-      margin-bottom: 4px;
-    }
-  }
-
-  .stats-list {
-    list-style: none;
-    padding: 0;
-    margin: 16px 0;
-
-    .stats-item {
-      display: flex;
-      justify-content: space-between;
-      padding: 12px 0;
-      border-bottom: 1px solid #f0f0f0;
-
-      .stats-label {
-        font-size: 16px;
-        color: #666;
-      }
-
-      .stats-value {
-        font-size: 16px;
-        font-weight: 600;
-        color: #1a1a1a;
-      }
-    }
-  }
-
-  .summary-text {
-    font-size: 16px;
-    margin: 20px 0 0;
-    padding: 16px;
-    background: #f5f7fa;
-    border-radius: 8px;
-    text-align: center;
-
-    strong {
-      color: #1a1a1a;
-      font-size: 18px;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .header-content,
-  .content-container {
-    padding: 0 24px;
-  }
-
-  .page-header {
-    padding: 32px 0 24px;
-
-    .page-title {
-      font-size: 28px;
-    }
-
-    .section-title {
-      font-size: 22px;
-    }
-  }
-
-  .subsection-title {
-    font-size: 20px;
-  }
-
-  .content-text,
-  .stats-label,
-  .stats-value {
-    font-size: 14px;
+  .content-container { max-width: 1400px; margin: 0 auto; padding: 0 200px; }
 }
+:deep(.content-item) {
+  margin-bottom: 24px;
+  .subsection-title { font-size: 24px; font-weight: 600; margin: 0 0 12px; }
+  .content-text { font-size: 16px; line-height: 1.8; color: #666; }
+  .sub-subsection-title, .item-title { font-size: 16px; font-weight: 600; margin: 12px 0 6px; }
+  .detail-list { padding-left: 20px; }
 }
 </style>

demo-vue/src/views/OrganizationStructure.vue

@@ -1,183 +1,11 @@
 <template>
   <div class="organization-page">
-    <!-- 顶部导航栏 -->
     <HeaderComponent />
 
-    <!-- 中间内容区域 -->
     <main class="organization-content">
-      <div class="page-container">
-        <section class="page-header">
-          <h1 class="page-title">首达特科技工程（山东）有限公司组织结构</h1>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">组织架构概述</h2>
-          <p class="section-text">
-            首达特科技工程（山东）有限公司采用扁平化、高效的组织架构，以客户为中心，以市场为导向，构建了完善的管理体系和业务流程。公司现有员工80余人，设有董事会、总经理办公室、国内外业务部门及各职能部门，形成了分工明确、协作高效的组织体系。
-          </p>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">管理层架构</h2>
-
-          <h3 class="subsection-title">董事会</h3>
-          <p class="subsection-text">
-            董事会是公司的最高决策机构，负责制定公司的战略规划、经营方针和重大决策。
-          </p>
-          <ul class="list-content">
-            <li><strong>董事长：</strong>全面负责公司战略决策和发展方向</li>
-            <li><strong>董事：</strong>参与公司重大决策，监督管理层工作</li>
-            <li><strong>独立董事：</strong>提供专业建议，增强决策科学性</li>
-          </ul>
-
-          <h3 class="subsection-title">总经理办公室</h3>
-          <p class="subsection-text">
-            总经理办公室是公司的核心管理团队，负责公司的日常经营管理和业务执行。
-          </p>
-          <ul class="list-content">
-            <li><strong>总经理：</strong>全面负责公司日常经营管理，执行董事会决议</li>
-            <li><strong>副总经理：</strong>协助总经理工作，分管不同业务板块
-              <ul class="sub-list">
-                <li><strong>海外业务副总经理：</strong>负责国际市场开发和海外业务拓展</li>
-                <li><strong>国内业务副总经理：</strong>负责国内供应商管理和采购业务</li>
-                <li><strong>运营副总经理：</strong>负责公司运营管理和流程优化</li>
-              </ul>
-            </li>
-          </ul>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">业务部门</h2>
-
-          <h3 class="subsection-title">1. 国际业务部</h3>
-          <p class="subsection-text">
-            负责公司的国际市场开发和海外业务拓展，是公司的核心业务部门之一。
-          </p>
-          <ul class="list-content">
-            <li><strong>欧洲业务组：</strong>负责欧洲市场的开发和维护，与欧洲客户建立长期稳定的合作关系</li>
-            <li><strong>北美业务组：</strong>负责北美市场的开发和维护，开拓北美高端客户群体</li>
-            <li><strong>东南亚业务组：</strong>负责东南亚及周边地区市场的开发和维护，深化区域合作</li>
-            <li><strong>中东业务组：</strong>负责中东及非洲地区市场的开发和维护，扩大市场份额</li>
-          </ul>
-
-          <h3 class="subsection-title">2. 国内采购部</h3>
-          <p class="subsection-text">
-            负责公司的原材料采购和供应商管理，确保产品质量和供应稳定。
-          </p>
-          <ul class="list-content">
-            <li><strong>钢材采购组：</strong>负责各类钢材产品的采购和供应商管理</li>
-            <li><strong>管件采购组：</strong>负责管路连接件等产品的采购和供应商管理</li>
-            <li><strong>质量控制组：</strong>负责供应商质量管理和产品质量检测</li>
-            <li><strong>供应商管理组：</strong>负责供应商评估、选择和关系维护</li>
-          </ul>
-
-          <h3 class="subsection-title">3. 产品研发部</h3>
-          <p class="subsection-text">
-            负责公司的产品研发和技术创新，提升产品竞争力和附加值。
-          </p>
-          <ul class="list-content">
-            <li><strong>产品设计组：</strong>负责新产品的设计和开发</li>
-            <li><strong>技术支持组：</strong>为客户提供技术咨询和解决方案</li>
-            <li><strong>工艺改进组：</strong>负责生产工艺的改进和优化</li>
-            <li><strong>研发项目管理组：</strong>负责研发项目的规划和执行</li>
-          </ul>
-
-          <h3 class="subsection-title">4. 物流配送部</h3>
-          <p class="subsection-text">
-            负责公司的物流配送和供应链管理，确保产品及时、安全地交付给客户。
-          </p>
-          <ul class="list-content">
-            <li><strong>国际物流组：</strong>负责国际货物运输和物流方案设计</li>
-            <li><strong>仓储管理组：</strong>负责仓库管理和库存控制</li>
-            <li><strong>包装组：</strong>负责产品包装和标识</li>
-            <li><strong>供应链优化组：</strong>负责供应链的优化和改进</li>
-          </ul>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">职能部门</h2>
-
-          <h3 class="subsection-title">1. 行政人事部</h3>
-          <p class="subsection-text">
-            负责公司的行政管理和人力资源管理，为公司的发展提供组织保障和人才支持。
-          </p>
-          <ul class="list-content">
-            <li><strong>行政组：</strong>负责公司日常行政事务和办公环境管理</li>
-            <li><strong>人力资源组：</strong>负责人力资源规划、招聘、培训和绩效管理</li>
-            <li><strong>薪酬福利组：</strong>负责薪酬体系设计和福利管理</li>
-            <li><strong>企业文化组：</strong>负责企业文化建设和员工关系管理</li>
-          </ul>
-
-          <h3 class="subsection-title">2. 财务部</h3>
-          <p class="subsection-text">
-            负责公司的财务管理和会计核算，为公司的发展提供财务支持和决策依据。
-          </p>
-          <ul class="list-content">
-            <li><strong>会计核算组：</strong>负责公司的会计核算和财务报表编制</li>
-            <li><strong>财务管理组：</strong>负责财务分析、预算管理和资金管理</li>
-            <li><strong>税务组：</strong>负责税务筹划和纳税申报</li>
-            <li><strong>成本控制组：</strong>负责成本核算和成本控制</li>
-          </ul>
-
-          <h3 class="subsection-title">3. 市场部</h3>
-          <p class="subsection-text">
-            负责公司的市场策划和品牌建设，提升公司的品牌影响力和市场竞争力。
-          </p>
-          <ul class="list-content">
-            <li><strong>市场策划组：</strong>负责市场调研和营销策划</li>
-            <li><strong>品牌建设组：</strong>负责公司品牌形象建设和维护</li>
-            <li><strong>线上推广组：</strong>负责公司网站、社交媒体等线上渠道的运营和推广</li>
-            <li><strong>展会活动组：</strong>负责国内外展会的策划和组织</li>
-          </ul>
-
-          <h3 class="subsection-title">4. 信息部</h3>
-          <p class="subsection-text">
-            负责公司的信息化建设和数字化转型，提升公司的信息化水平和运营效率。
-          </p>
-          <ul class="list-content">
-            <li><strong>系统开发组：</strong>负责公司管理系统的开发和维护</li>
-            <li><strong>网络运维组：</strong>负责公司网络和IT设备的维护和管理</li>
-            <li><strong>数据管理组：</strong>负责公司数据的管理和分析</li>
-            <li><strong>数字化转型组：</strong>负责公司数字化转型项目的规划和实施</li>
-          </ul>
-
-          <h3 class="subsection-title">5. 法务部</h3>
-          <p class="subsection-text">
-            负责公司的法律事务和合规管理，为公司的发展提供法律保障。
-          </p>
-          <ul class="list-content">
-            <li><strong>合同管理组：</strong>负责合同的起草、审核和管理</li>
-            <li><strong>知识产权组：</strong>负责知识产权的申请和保护</li>
-            <li><strong>合规管理组：</strong>负责公司合规管理和风险控制</li>
-            <li><strong>纠纷处理组：</strong>负责法律纠纷的处理和诉讼代理</li>
-          </ul>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">海外机构</h2>
-          <p class="subsection-text">
-            为了更好地服务国际客户，首达特科技工程（山东）有限公司在全球多个重要市场设立了海外办事处。
-          </p>
-          <ul class="list-content">
-            <li><strong>东南亚办事处：</strong>位于新加坡，负责东南亚地区的市场开发和客户服务</li>
-            <li><strong>中东办事处：</strong>位于迪拜，负责中东及非洲地区的市场开发和客户服务</li>
-            <li><strong>北美办事处：</strong>位于纽约，负责北美地区的市场开发和客户服务</li>
-          </ul>
-        </section>
-
-        <section class="content-section">
-          <h2 class="section-title">组织管理理念</h2>
-          <p class="section-text">
-            首达特科技工程（山东）有限公司坚持"以人为本、权责分明、协同高效"的组织管理理念，致力于构建一个开放、创新、协作的组织文化。公司注重员工的培养和发展，为员工提供广阔的发展空间和良好的工作环境。同时，公司不断优化组织结构和业务流程，提高组织运行效率和市场应变能力。
-          </p>
-          <p class="section-text">
-            通过完善的组织结构和科学的管理体系，首达特科技工程（山东）有限公司能够快速响应市场变化，满足客户需求，实现公司的可持续发展。
-          </p>
-        </section>
-      </div>
+      <div class="page-container" v-html="bodyHtml" />
     </main>
 
-    <!-- 底部 Footer -->
     <FooterComponent />
   </div>
 </template>
@@ -185,6 +13,11 @@
 <script setup lang="ts">
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { useLocaleBlockHtml } from '@/composables/useLocaleBlockHtml'
+import orgZh from '@/locales/html/organization.zh.html?raw'
+import orgEn from '@/locales/html/organization.en.html?raw'
+
+const bodyHtml = useLocaleBlockHtml(orgZh, orgEn)
 </script>
 
 <style scoped lang="less">
@@ -218,15 +51,12 @@ import FooterComponent from '@/components/FooterComponent.vue'
   }
 }
 
-.content-section {
+:deep(.content-section) {
   margin-bottom: 50px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+  &:last-child { margin-bottom: 0; }
 }
 
-.section-title {
+:deep(.section-title) {
   font-size: 28px;
   font-weight: 600;
   color: #1a1a1a;
@@ -235,7 +65,7 @@ import FooterComponent from '@/components/FooterComponent.vue'
   border-bottom: 1px solid #e8e8e8;
 }
 
-.section-text {
+:deep(.section-text) {
   font-size: 16px;
   color: #666;
   line-height: 1.8;
@@ -243,7 +73,7 @@ import FooterComponent from '@/components/FooterComponent.vue'
   text-align: justify;
 }
 
-.subsection-title {
+:deep(.subsection-title) {
   font-size: 24px;
   font-weight: 600;
   color: #1a1a1a;
@@ -252,7 +82,7 @@ import FooterComponent from '@/components/FooterComponent.vue'
   border-bottom: 1px solid #e8e8e8;
 }
 
-.subsection-text {
+:deep(.subsection-text) {
   font-size: 16px;
   color: #666;
   line-height: 1.8;
@@ -260,64 +90,32 @@ import FooterComponent from '@/components/FooterComponent.vue'
   text-align: justify;
 }
 
-.list-content {
+:deep(.list-content) {
   list-style: disc;
   padding-left: 24px;
   margin: 0 0 16px;
-
   li {
     font-size: 16px;
     color: #666;
     line-height: 1.8;
     margin-bottom: 8px;
     text-align: justify;
-
-    strong {
-      color: #1a1a1a;
-      font-weight: 600;
+    strong { color: #1a1a1a; font-weight: 600; }
+  }
 }
 
-    .sub-list {
+:deep(.sub-list) {
+  list-style: circle;
   margin-top: 8px;
   margin-bottom: 8px;
   padding-left: 20px;
-
-      li {
-        margin-bottom: 6px;
-      }
-    }
-  }
+  li { margin-bottom: 6px; }
 }
 
 @media (max-width: 1200px) {
-  .page-container {
-    padding: 40px 100px 80px;
+  .page-container { padding: 10px 40px 60px; }
 }
-}
-
 @media (max-width: 768px) {
-  .page-container {
-    padding: 32px 24px 60px;
-  }
-
-  .page-header {
-    .page-title {
-      font-size: 28px;
-    }
-  }
-
-  .section-title {
-    font-size: 22px;
-  }
-
-  .subsection-title {
-    font-size: 20px;
-  }
-
-  .section-text,
-  .subsection-text,
-  .list-content li {
-    font-size: 14px;
-  }
+  .page-container { padding: 10px 20px 40px; }
 }
 </style>

demo-vue/src/views/PrivacyPolicy.vue

@@ -1,4 +1,3 @@
-NEW_FILE_CODE
 <template>
   <div class="privacy-policy-page">
     <HeaderComponent />
@@ -6,47 +5,47 @@ NEW_FILE_CODE
     <main class="privacy-policy">
       <section class="page-header">
         <div class="header-content">
-          <h1 class="page-title">隐私政策</h1>
-          <p class="update-date">更新日期：2025年2月19日</p>
-          <p class="intro-text">本隐私政策说明了我们如何收集和使用您的信息。</p>
+          <h1 class="page-title">{{ t('privacy.title') }}</h1>
+          <p class="update-date">{{ t('privacy.updated') }}</p>
+          <p class="intro-text">{{ t('privacy.intro') }}</p>
         </div>
       </section>
 
       <section class="content-sections">
         <div class="content-wrapper">
           <div class="policy-item">
-            <h3 class="subsection-title">我们收集的信息</h3>
-            <p class="content-text">我们收集您直接提供给我们的信息：</p>
+            <h3 class="subsection-title">{{ t('privacy.c1') }}</h3>
+            <p class="content-text">{{ t('privacy.c1p') }}</p>
             <ul class="bullet-list">
-              <li class="bullet-item">账户信息</li>
-              <li class="bullet-item">使用数据</li>
-              <li class="bullet-item">通信偏好设置</li>
+              <li class="bullet-item">{{ t('privacy.c1a') }}</li>
+              <li class="bullet-item">{{ t('privacy.c1b') }}</li>
+              <li class="bullet-item">{{ t('privacy.c1c') }}</li>
             </ul>
           </div>
 
           <div class="policy-item">
-            <h3 class="subsection-title">我们如何使用您的信息</h3>
-            <p class="content-text">我们将收集的信息用于：</p>
+            <h3 class="subsection-title">{{ t('privacy.c2') }}</h3>
+            <p class="content-text">{{ t('privacy.c2p') }}</p>
             <ul class="bullet-list">
-              <li class="bullet-item">提供服务</li>
-              <li class="bullet-item">改善用户体验</li>
-              <li class="bullet-item">发送重要更新</li>
+              <li class="bullet-item">{{ t('privacy.c2a') }}</li>
+              <li class="bullet-item">{{ t('privacy.c2b') }}</li>
+              <li class="bullet-item">{{ t('privacy.c2c') }}</li>
             </ul>
           </div>
 
           <div class="policy-item">
-            <h3 class="subsection-title">数据安全</h3>
-            <p class="content-text">我们采取适当的安全措施来保护您的数据。</p>
+            <h3 class="subsection-title">{{ t('privacy.c3') }}</h3>
+            <p class="content-text">{{ t('privacy.c3p') }}</p>
           </div>
 
           <div class="policy-item">
-            <h3 class="subsection-title">联系方式</h3>
-            <p class="content-text">如有隐私相关问题，请联系我们的团队。</p>
+            <h3 class="subsection-title">{{ t('privacy.c4') }}</h3>
+            <p class="content-text">{{ t('privacy.c4p') }}</p>
           </div>
 
           <div class="policy-item">
-            <h3 class="subsection-title">政策更新</h3>
-            <p class="content-text">我们可能会不时更新本政策。请定期查看。</p>
+            <h3 class="subsection-title">{{ t('privacy.c5') }}</h3>
+            <p class="content-text">{{ t('privacy.c5p') }}</p>
           </div>
         </div>
       </section>
@@ -57,8 +56,10 @@ NEW_FILE_CODE
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+const { t } = useI18n()
 </script>
 
 <style scoped lang="less">

demo-vue/src/views/ProductionBase.vue

@@ -1,586 +1,9 @@
-<!-- src/views/ProductionBase.vue -->
+<!-- src/views/ProductionBase.vue -->
 <template>
   <div class="production-base-page">
-    <!-- 顶部导航栏 -->
     <HeaderComponent />
-
-    <!-- 中间内容区域 -->
     <main class="production-base-content">
-      <!-- 页面标题区域 -->
-      <section class="page-header">
-        <div class="header-content">
-          <h1 class="page-title">首达特科技工程（山东）有限公司基地介绍</h1>
-          <h2 class="section-title">基地概述</h2>
-        </div>
-      </section>
-
-      <!-- 基地概述 -->
-      <section class="base-overview">
-        <div class="content-container">
-          <p class="overview-text">
-            首达特科技工程（山东）有限公司在全国范围内布局了多个生产基地，形成了集研发、生产、仓储、物流于一体的完整产业链。从国内的生产加工基地到仓储物流中心，从研发中心到办公总部，再到覆盖全球的海外分支机构，首达特科技工程（山东）有限公司构建了强大的生产运营网络和全球化业务布局。
-          </p>
-        </div>
-      </section>
-
-      <!-- 国内生产加工基地 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">国内生产加工基地</h2>
-
-          <!-- 南京总部生产基地 -->
-          <div class="base-item">
-            <h3 class="base-name">南京总部生产基地</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>江苏省南京市江宁区经济技术开发区</li>
-                <li><strong>占地面积：</strong>120,000平方米</li>
-                <li><strong>建筑面积：</strong>85,000平方米</li>
-                <li><strong>投产时间：</strong>2008年（一期），2012年（二期），2018年（三期扩建）</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要产线</h4>
-              <ul class="info-list">
-                <li>高线轧钢生产线：12条，年产能50万吨</li>
-                <li>万向管生产线：8条，年产能30万吨</li>
-                <li>螺纹钢综合生产线：4条，年产能10万吨</li>
-                <li>产品表面处理车间：2个，包括热镀锌、涂装等工艺</li>
-                <li>质量检测中心：配备先进的检测设备，确保产品质量</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>引进德国、日本先进的生产设备和工艺</li>
-                <li>采用全自动化的控制系统，提高生产效率和产品质量</li>
-                <li>实现生产过程的数字化管理和监控</li>
-                <li>具备定制化生产能力，可满足客户特殊需求</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 唐山钢铁生产基地 -->
-          <div class="base-item">
-            <h3 class="base-name">唐山钢铁生产基地</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>河北省唐山市曹妃甸工业区</li>
-                <li><strong>占地面积：</strong>180,000平方米</li>
-                <li><strong>建筑面积：</strong>120,000平方米</li>
-                <li><strong>投产时间：</strong>2013年（一期），2017年（二期扩建）</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要产线</h4>
-              <ul class="info-list">
-                <li>热轧带钢生产线：3条，年产能120万吨</li>
-                <li>冷轧带钢生产线：2条，年产能80万吨</li>
-                <li>精密钢管生产线：6条，年产能25万吨</li>
-                <li>特种钢材加工车间：1个，专注于高附加值产品</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>采用国际领先的连铸连轧生产工艺，节能环保</li>
-                <li>拥有先进的轧制技术，产品精度高、性能稳定</li>
-                <li>建立了严格的质量控制体系，产品符合国际标准</li>
-                <li>与周边钢铁企业形成产业链协同，降低生产成本</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 无锡不锈钢加工基地 -->
-          <div class="base-item">
-            <h3 class="base-name">无锡不锈钢加工基地</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>江苏省无锡市锡山经济开发区</li>
-                <li><strong>占地面积：</strong>65,000平方米</li>
-                <li><strong>建筑面积：</strong>45,000平方米</li>
-                <li><strong>投产时间：</strong>2015年</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要产线</h4>
-              <ul class="info-list">
-                <li>不锈钢管生产线：5条，年产能15万吨</li>
-                <li>不锈钢型材生产线：3条，年产能20万吨</li>
-                <li>不锈钢制品加工车间：1个，专注于深加工产品</li>
-                <li>表面处理中心：提供抛光、拉丝、喷砂等多种表面处理工艺</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>专注于高品质不锈钢产品的生产和加工</li>
-                <li>引进意大利先进的不锈钢加工设备</li>
-                <li>产品广泛应用于食品、医药、化工等高端领域</li>
-                <li>具备完善的卫生级不锈钢产品生产能力</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 广州有色金属加工基地 -->
-          <div class="base-item">
-            <h3 class="base-name">广州有色金属加工基地</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>广东省广州市南沙区</li>
-                <li><strong>占地面积：</strong>50,000平方米</li>
-                <li><strong>建筑面积：</strong>35,000平方米</li>
-                <li><strong>投产时间：</strong>2018年</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要产线</h4>
-              <ul class="info-list">
-                <li>铝管生产线：4条，年产能8万吨</li>
-                <li>铜管生产线：3条，年产能5万吨</li>
-                <li>有色金属复合材料生产线：2条，年产能3万吨</li>
-                <li>有色金属制品加工车间：1个</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>专注于有色金属管材和复合材料的研发和生产</li>
-                <li>采用先进的挤压成型技术，产品尺寸精度高</li>
-                <li>产品广泛应用于航天、航空、新能源等领域</li>
-                <li>与国内多所科研院所合作，不断提升技术水平</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 仓储物流基地 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">仓储物流基地</h2>
-
-          <!-- 上海国际物流中心 -->
-          <div class="base-item">
-            <h3 class="base-name">上海国际物流中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>上海市浦东新区外高桥保税区</li>
-                <li><strong>占地面积：</strong>150,000平方米</li>
-                <li><strong>仓储面积：</strong>120,000平方米</li>
-                <li><strong>投入使用时间：</strong>2010年（一期），2016年（二期扩建）</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>钢材仓储区：可储存各类钢材100万吨</li>
-                <li>保税仓库：面积50,000平方米，可开展保税物流业务</li>
-                <li>加工配送中心：提供钢材剪切、配送等增值服务</li>
-                <li>国际货运代理：提供海运、空运、陆运等全方位物流服务</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>采用智能化仓储管理系统，实现货物的精准定位和高效管理</li>
-                <li>配备先进的装卸设备，包括龙门吊、行车、叉车等</li>
-                <li>建立了完善的物流信息平台，实现物流全过程的可控化和可视化</li>
-                <li>与上海港、洋山深水港形成紧密合作，物流效率高</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 天津北方物流中心 -->
-          <div class="base-item">
-            <h3 class="base-name">天津北方物流中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>天津市滨海新区</li>
-                <li><strong>占地面积：</strong>120,000平方米</li>
-                <li><strong>仓储面积：</strong>90,000平方米</li>
-                <li><strong>投入使用时间：</strong>2014年</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>钢材仓储区：可储存各类钢材80万吨</li>
-                <li>铁路专用线：长度1.2公里，年吞吐能力200万吨</li>
-                <li>加工配送中心：提供钢材开平、分条等加工服务</li>
-                <li>区域配送中心：覆盖华北、东北地区的物流配送</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>拥有铁路专用线，物流成本低、效率高</li>
-                <li>采用自动化仓储系统，提高仓储效率</li>
-                <li>建立了完善的物流网络，确保物流安全</li>
-                <li>与天津港形成战略合作，海铁联运优势明显</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 武汉华中物流中心 -->
-          <div class="base-item">
-            <h3 class="base-name">武汉华中物流中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>湖北省武汉市东西湖区</li>
-                <li><strong>占地面积：</strong>100,000平方米</li>
-                <li><strong>仓储面积：</strong>70,000平方米</li>
-                <li><strong>投入使用时间：</strong>2016年</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>钢材仓储区：可储存各类钢材60万吨</li>
-                <li>公路配送中心：覆盖华中地区的物流配送</li>
-                <li>加工服务中心：提供钢材切割、焊接等加工服务</li>
-                <li>物流信息中心：区域物流信息的收集和处理</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>位于全国物流节点城市，交通便利</li>
-                <li>采用现代化仓储管理系统，提高管理效率</li>
-                <li>建立了完善的物流配送网络，配送半径覆盖500公里</li>
-                <li>与多家物流企业合作，物流服务灵活多样</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 成都西南物流中心 -->
-          <div class="base-item">
-            <h3 class="base-name">成都西南物流中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>四川省成都市青白江区</li>
-                <li><strong>占地面积：</strong>80,000平方米</li>
-                <li><strong>仓储面积：</strong>55,000平方米</li>
-                <li><strong>投入使用时间：</strong>2019年</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>钢材仓储区：可储存各类钢材40万吨</li>
-                <li>区域配送中心：覆盖西南地区的物流配送</li>
-                <li>加工服务中心：提供钢材加工服务</li>
-                <li>物流金融服务：提供仓单质押等物流金融服务</li>
-              </ul>
-
-              <h4 class="info-subtitle">技术特点</h4>
-              <ul class="info-list">
-                <li>位于西部物流枢纽，辐射西南地区</li>
-                <li>采用智能化仓储系统，提高仓储效率</li>
-                <li>建立了完善的仓储信息平台，为客户提供增值服务</li>
-                <li>与中欧班列形成合作，拓展国际物流通道</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 研发中心 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">研发中心</h2>
-
-          <!-- 南京总部研发中心 -->
-          <div class="base-item">
-            <h3 class="base-name">南京总部研发中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>江苏省南京市雨花区软件谷</li>
-                <li><strong>建筑面积：</strong>15,000平方米</li>
-                <li><strong>投入使用时间：</strong>2012年（一期），2020年（扩建）</li>
-                <li><strong>研发人员：</strong>120人，其中博士15人，硕士45人</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>新材料研发实验室：专注于高性能钢材和复合材料的研发</li>
-                <li>产品设计中心：采用CAD/CAM技术，进行产品设计优化</li>
-                <li>工艺研究中心：研究先进的生产工艺和加工技术</li>
-                <li>检测分析中心：配备先进的检测设备，进行产品性能测试和分析</li>
-              </ul>
-
-              <h4 class="info-subtitle">研发成果</h4>
-              <ul class="info-list">
-                <li>获得国家专利30余项，其中发明专利5项</li>
-                <li>参与制定国家标准12项，行业标准28项</li>
-                <li>研发的高性能钢材系列荣获江苏省科技进步奖</li>
-                <li>智能化控制系统获得南京市技术创新奖</li>
-              </ul>
-
-              <h4 class="info-subtitle">合作机构</h4>
-              <ul class="info-list">
-                <li>与东南大学、南京理工大学等高校建立产学研合作关系</li>
-                <li>与中国钢铁研究院、冶金工业规划研究院等科研院所合作</li>
-                <li>加入国际钢铁协会技术委员会，参与国际技术研发</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 上海前沿技术研发中心 -->
-          <div class="base-item">
-            <h3 class="base-name">上海前沿技术研发中心</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>上海市浦东新区张江高科技园区</li>
-                <li><strong>建筑面积：</strong>8,000平方米</li>
-                <li><strong>投入使用时间：</strong>2017年</li>
-                <li><strong>研发人员：</strong>60人，主要为高层次技术人才</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>数字化技术部：专注于钢铁贸易数字化平台的研发</li>
-                <li>智能制造技术部：研究钢铁生产加工的智能化技术</li>
-                <li>新材料技术部：开发钢铁产品的物联网和区块链方案</li>
-                <li>国际技术合作：与国际先进企业开展技术交流和合作</li>
-              </ul>
-
-              <h4 class="info-subtitle">研发成果</h4>
-              <ul class="info-list">
-                <li>开发的钢铁贸易数字化平台获得行业认可</li>
-                <li>智能化仓储物流系统实现了物流全过程的数字化管理</li>
-                <li>物联网技术在钢铁提升了产品质量追溯能力</li>
-                <li>数字化营销平台提升了客户服务水平</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 办公总部 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">办公总部</h2>
-
-          <!-- 南京总部大厦 -->
-          <div class="base-item">
-            <h3 class="base-name">南京总部大厦</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>江苏省南京市鼓楼区中央商务区</li>
-                <li><strong>建筑面积：</strong>35,000平方米</li>
-                <li><strong>投入使用时间：</strong>2015年</li>
-                <li><strong>办公人员：</strong>500人</li>
-              </ul>
-
-              <h4 class="info-subtitle">主要功能</h4>
-              <ul class="info-list">
-                <li>行政办公区：公司管理和决策中心</li>
-                <li>国际贸易部：负责国际市场开拓和客户维护</li>
-                <li>国内贸易部：负责国内市场销售和客户服务</li>
-                <li>财务管理中心：负责公司财务管理和资金运作</li>
-                <li>人力资源部：负责人才招聘、培训和管理</li>
-                <li>会议中心：配备现代化会议设施，可举办各类会议和活动</li>
-              </ul>
-
-              <h4 class="info-subtitle">设施特点</h4>
-              <ul class="info-list">
-                <li>智能化办公系统：实现办公自动化和信息化</li>
-                <li>节能环保建筑：采用节能环保技术，绿色建筑</li>
-                <li>人性化的办公：提供舒适的办公条件和休闲设施</li>
-                <li>安全监控系统：确保办公场所安全</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 海外分支机构 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">海外分支机构</h2>
-
-          <!-- 东南亚区域中心（新加坡） -->
-          <div class="base-item">
-            <h3 class="base-name">东南亚区域中心（新加坡）</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>新加坡裕廊工业区</li>
-                <li><strong>成立时间：</strong>2014年</li>
-                <li><strong>主要业务：</strong>东南亚市场开发和客户维护</li>
-                <li><strong>仓储面积：</strong>15,000平方米</li>
-              </ul>
-
-              <h4 class="info-subtitle">业务范围</h4>
-              <ul class="info-list">
-                <li>负责新加坡、马来西亚、印度尼西亚、泰国等东南亚国家的业务</li>
-                <li>提供符合国际标准的产品和服务</li>
-                <li>建立区域仓储网络，提高服务效率</li>
-                <li>收集市场信息，开发适合当地市场的产品</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 欧洲区域中心（德国杜塞尔多夫） -->
-          <div class="base-item">
-            <h3 class="base-name">欧洲区域中心（德国杜塞尔多夫）</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>德国北莱茵-威斯特法伦州杜塞尔多夫</li>
-                <li><strong>成立时间：</strong>2016年</li>
-                <li><strong>主要业务：</strong>欧洲市场开发和客户维护</li>
-                <li><strong>仓储面积：</strong>20,000平方米</li>
-              </ul>
-
-              <h4 class="info-subtitle">业务范围</h4>
-              <ul class="info-list">
-                <li>负责德国、法国、英国、意大利等欧洲国家的业务</li>
-                <li>提供符合欧洲标准的产品和服务</li>
-                <li>建立本地的技术支持和售后服务团队</li>
-                <li>参与欧洲行业展会和活动，提升品牌影响力</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 中东区域中心（阿联酋迪拜） -->
-          <div class="base-item">
-            <h3 class="base-name">中东区域中心（阿联酋迪拜）</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>阿联酋迪拜杰贝阿里自由贸易区</li>
-                <li><strong>成立时间：</strong>2018年</li>
-                <li><strong>主要业务：</strong>中东非洲市场开发</li>
-                <li><strong>仓储面积：</strong>25,000平方米</li>
-              </ul>
-
-              <h4 class="info-subtitle">业务范围</h4>
-              <ul class="info-list">
-                <li>负责阿联酋、沙特阿拉伯、卡塔尔等中东国家的业务</li>
-                <li>辐射非洲市场，拓展业务范围</li>
-                <li>利用迪拜的物流优势，提高配送和服务效率</li>
-                <li>建立本地的销售和售后服务团队</li>
-              </ul>
-            </div>
-          </div>
-
-          <!-- 北美区域中心（美国休斯顿） -->
-          <div class="base-item">
-            <h3 class="base-name">北美区域中心（美国休斯顿）</h3>
-            <div class="base-info">
-              <h4 class="info-subtitle">基本情况</h4>
-              <ul class="info-list">
-                <li><strong>地理位置：</strong>美国德克萨斯州休斯顿</li>
-                <li><strong>成立时间：</strong>2020年</li>
-                <li><strong>主要业务：</strong>北美市场开发和客户维护</li>
-                <li><strong>仓储面积：</strong>30,000平方米</li>
-              </ul>
-
-              <h4 class="info-subtitle">业务范围</h4>
-              <ul class="info-list">
-                <li>负责美国、加拿大、墨西哥等北美国家的业务</li>
-                <li>提供符合美国标准的产品和服务</li>
-                <li>建立本地的技术支持和售后服务团队</li>
-                <li>与北美当地钢铁企业合作，拓展业务渠道</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 基地建设与发展规划 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">基地建设与发展规划</h2>
-
-          <div class="base-info">
-            <h3 class="subsection-title">已完成的基地建设项目</h3>
-            <ul class="info-list">
-              <li><strong>南京总部生产基地三期扩建（2018年）：</strong>增加了高线钢管和万向管的产能，提高了产品质量和生产效率。</li>
-              <li><strong>唐山钢铁生产基地二期扩建（2017年）：</strong>增加了热轧带钢和冷轧带钢的产能，优化了产品结构。</li>
-              <li><strong>上海国际物流中心二期扩建（2016年）：</strong>增加了保税仓面积，提升了国际物流服务能力。</li>
-              <li><strong>南京总部研发中心扩建（2020年）：</strong>增加了研发人员和设备，提升了研发能力和水平。</li>
-            </ul>
-
-            <h3 class="subsection-title">正在建设的基地建设项目</h3>
-            <ul class="info-list">
-              <li><strong>越南生产基地建设（预计2024年投产）：</strong>位于越南海防市，占地面积100,000平方米，主要生产高线钢管和万向管，年产能30万吨。</li>
-              <li><strong>西安区域物流中心（预计2023年年底投入使用）：</strong>位于陕西省西安市国际港务区，占地面积60,000平方米，仓储面积40,000平方米。</li>
-              <li><strong>西南智能钢铁制造基地（预计2024年建设）：</strong>位于重庆市万州经济技术开发区，总投资25亿元，将建设智能化生产线和数字化管理系统。</li>
-            </ul>
-
-            <h3 class="subsection-title">未来发展规划</h3>
-            <ul class="info-list">
-              <li><strong>东南亚生产基地筹建：</strong>计划在印尼或泰国、越南等地建设生产基地，拓展东南亚市场。</li>
-              <li><strong>欧洲仓储物流筹建：</strong>计划在波兰、西班牙等地建设仓储物流中心，完善欧洲物流网络。</li>
-              <li><strong>数字化转型：</strong>推进所有基地的数字化、智能化改造，提升管理效率和服务水平。</li>
-              <li><strong>绿色低碳发展：</strong>实施节能减排工程，降低能耗和排放，推动企业可持续发展。</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <!-- 基地管理与运营 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">基地管理与运营</h2>
-
-          <div class="base-info">
-            <h3 class="subsection-title">质量管理体系</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司建立了完善的质量管理体系，通过ISO 9001质量管理体系认证，确保产品质量符合国际标准。各生产基地配备了先进的检测设备和专业的质量管理人员，从原材料采购到产品出厂的全过程进行质量控制。
-            </p>
-
-            <h3 class="subsection-title">安全生产管理</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司高度重视安全生产工作，建立了严格的安全生产管理体系，通过ISO 45001职业健康安全管理体系认证。各基地配备了完善的安全设施和专业的安全管理人员，定期进行安全培训和演练，确保安全生产。
-            </p>
-
-            <h3 class="subsection-title">环境保护措施</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司积极履行企业社会责任，注重环境保护工作，通过ISO 14001环境管理体系认证。各基地采用环保型生产工艺，实施清洁生产，减少污染物排放。加强废弃物处理和资源回收利用，推进绿色发展。
-            </p>
-
-            <h3 class="subsection-title">数字化管理系统</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司推进了基地的数字化、智能化建设，建立了ERP系统、MES系统、WMS系统等数字化管理平台，实现了生产、仓储、物流、销售等全过程的数字化管理和监控，提高了管理效率和服务水平。
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- 基地成就与展望 -->
-      <section class="base-section">
-        <div class="content-container">
-          <h2 class="section-title">基地成就与展望</h2>
-
-          <div class="base-info">
-            <h3 class="subsection-title">基地建设成就</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司通过多年的发展，已建立了完善的产业链布局，形成了覆盖国内外的业务网络。各基地的建设和运营取得了显著成就：
-            </p>
-            <ul class="info-list">
-              <li>国内生产加工基地年产能达到200万吨以上</li>
-              <li>仓储物流基地总仓储面积超过35万平方米</li>
-              <li>研发中心拥有专业技术人员近200人</li>
-              <li>海外分支机构覆盖东南亚、欧洲、中东、北美等地区</li>
-            </ul>
-
-            <h3 class="subsection-title">未来展望</h3>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司将继续加大基地建设投入，完善产业布局，提升综合实力，致力于：
-            </p>
-            <ul class="info-list">
-              <li>加快推进数字化、智能化转型，提高生产效率和管理水平</li>
-              <li>加强研发投入，开发更多高附加值产品，提升产品竞争力</li>
-              <li>完善全球网络布局，提高国际市场竞争能力</li>
-              <li>推进绿色低碳发展，履行企业社会责任</li>
-              <li>加强人才培养和引进，为企业发展提供人才支持</li>
-            </ul>
-            <p class="content-text">
-              首达特科技工程（山东）有限公司将以完善的基地网络为基础，不断提升自身实力和国际竞争力，努力实现"成为全球领先的钢铁制品贸易服务商"的企业愿景！
-            </p>
-          </div>
-        </div>
-      </section>
+      <div class="html-block" v-html="bodyHtml" />
     </main>
 
     <!-- 底部 Footer -->
@@ -591,6 +14,11 @@
 <script setup lang="ts">
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { useLocaleBlockHtml } from '@/composables/useLocaleBlockHtml'
+import blockZh from '@/locales/html/production.zh.html?raw'
+import blockEn from '@/locales/html/production.en.html?raw'
+
+const bodyHtml = useLocaleBlockHtml(blockZh, blockEn)
 </script>
 
 <style scoped lang="less">

demo-vue/src/views/ProductsDetail.vue

@@ -9,9 +9,9 @@
       <!-- 头部 Banner 区域 -->
       <section class="products-banner">
         <div class="banner-wrapper">
-          <h1 class="banner-title">多元布局，科技赋能，满足全行业设备与材料供应需求</h1>
+          <h1 class="banner-title">{{ t('productsPage.bannerTitle') }}</h1>
           <p class="banner-description">
-            依托多元业务矩阵与合规经营体系，我们以专业品质保障产品与服务的可靠、适配与高效。从设备研发制造到材料加工销售，从智能化设计到全球贸易，覆盖多场景需求，提供一站式解决方案。
+            {{ t('productsPage.bannerSub') }}
           </p>
         </div>
       </section>
@@ -19,15 +19,15 @@
       <!-- 产品分类筛选 -->
       <section class="category-filter">
         <div class="filter-wrapper">
-          <span class="filter-label">按分类筛选</span>
+          <span class="filter-label">{{ t('productsPage.filterLabel') }}</span>
           <div class="filter-tags">
             <span
-              v-for="(category, index) in categories"
-              :key="index"
-              :class="['filter-tag', { active: currentCategory === category }]"
-              @click="selectCategory(category)"
+              v-for="catKey in categoryKeys"
+              :key="catKey"
+              :class="['filter-tag', { active: currentCategoryKey === catKey }]"
+              @click="selectCategory(catKey)"
             >
-              {{ category }}
+              {{ t('catalog.categoryLabels.' + catKey) }}
             </span>
           </div>
         </div>
@@ -36,7 +36,7 @@
       <!-- 产品展示区域 -->
       <section class="products-grid">
         <div class="products-wrapper">
-          <div class="product-card" v-for="(product, index) in filteredProducts" :key="product.name">
+          <div class="product-card" v-for="product in filteredProducts" :key="product.id">
             <div class="product-image-section">
               <el-carousel
                 height="340px"
@@ -63,18 +63,18 @@
 
               <div class="product-specs">
                 <div class="specs-header">
-                  <span class="specs-title">基础配置</span>
-                  <span class="specs-subtitle">BASIC CONFIGURATION</span>
+                  <span class="specs-title">{{ t('common.specBasicCn') }}</span>
+                  <span class="specs-subtitle">{{ t('common.specBasicEn') }}</span>
                 </div>
-                <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.name)" :key="specIndex">
+                <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.id)" :key="specIndex">
                   <div class="spec-label-cn">{{ spec.label }}</div>
                   <div class="spec-label-en">{{ spec.enLabel }}</div>
                   <div class="spec-value-cn">{{ spec.value }}</div>
                   <div class="spec-value-en">{{ spec.valueEn || '' }}</div>
                 </div>
-                <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.name)">
-                  <span>{{ expandedIndices.has(product.name) ? '收起' : '查看更多' }}</span>
-                  <el-icon><ArrowDown v-if="!expandedIndices.has(product.name)" /><ArrowUp v-else /></el-icon>
+                <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.id)">
+                  <span>{{ expandedIndices.has(product.id) ? t('common.collapse') : t('common.more') }}</span>
+                  <el-icon><ArrowDown v-if="!expandedIndices.has(product.id)" /><ArrowUp v-else /></el-icon>
                 </div>
               </div>
             </div>
@@ -90,289 +90,57 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { productImagesById } from '@/data/productImages'
+import type { ProductItemText } from '@/locales/types'
 
-import productImg1 from '@/assets/images/img1-1.png'
-import productImg2 from '@/assets/images/img1-2.png'
-import productImg3 from '@/assets/images/img2-1.png'
-import productImg4 from '@/assets/images/img2-2.png'
-import productImg5 from '@/assets/images/img3-1.png'
-import productImg6 from '@/assets/images/img3-2.jpg'
-import productImg7 from '@/assets/images/img4-1.png'
-import productImg8 from '@/assets/images/img4-2.png'
-import productImg9 from '@/assets/images/img5-1.png'
-import productImg10 from '@/assets/images/img5-2.png'
-import productImg11 from '@/assets/images/img6-1.png'
-import productImg12 from '@/assets/images/img6-2.png'
-import productImg13 from '@/assets/images/img7-1.png'
-import productImg14 from '@/assets/images/img7-2.png'
-import productImg15 from '@/assets/images/img8-1.png'
-import productImg16 from '@/assets/images/img8-2.png'
-import productImg17 from '@/assets/images/img9-1.png'
-import productImg18 from '@/assets/images/img9-2.png'
-import productImg19 from '@/assets/images/img10-1.png'
-import productImg20 from '@/assets/images/img11-1.png'
-import productImg21 from '@/assets/images/img12-1.png'
+const { t, tm } = useI18n()
 
-const categories = [
-  '全部产品',
-  '电动自行车系列',
-  '电动摩托车系列',
-  '民用三轮车系列',
-  '小型农机车系列',
-]
+const categoryKeys = ['all', 'ebike', 'emoto', 'trike', 'tractor'] as const
+type CategoryKey = (typeof categoryKeys)[number]
+const currentCategoryKey = ref<CategoryKey>('all')
 
-const currentCategory = ref('全部产品')
-
-const selectCategory = (category: string) => {
-  currentCategory.value = category
+const selectCategory = (key: CategoryKey) => {
+  currentCategoryKey.value = key
 }
 
 const expandedIndices = ref<Set<string>>(new Set())
 
-const getVisibleSpecs = (product: any, productName: string) => {
-  if (expandedIndices.value.has(productName)) {
+type ProductView = ProductItemText & { images: string[] }
+
+const products = computed((): ProductView[] => {
+  const list = tm('catalog.products') as ProductItemText[]
+  return list.map((p) => ({
+    ...p,
+    images: (productImagesById[p.id] as string[] | undefined) || []
+  }))
+})
+
+const getVisibleSpecs = (product: ProductView, productId: string) => {
+  if (expandedIndices.value.has(productId)) {
     return product.specs
   }
   return product.specs.slice(0, 3)
 }
 
-const toggleSpecs = (productName: string) => {
-  if (expandedIndices.value.has(productName)) {
-    expandedIndices.value.delete(productName)
+const toggleSpecs = (productId: string) => {
+  if (expandedIndices.value.has(productId)) {
+    expandedIndices.value.delete(productId)
   } else {
-    expandedIndices.value.add(productName)
+    expandedIndices.value.add(productId)
   }
 }
 
-const products = ref([
-  {
-    name: '长虹',
-    category: '电动自行车系列',
-    images: [productImg1, productImg2],
-    tags: [ '锂电铅酸', '长续航'],
-    description: '长虹智能电动车 | 双电池可选 液压减震 碟刹安全。',
-    specs: [
-      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
-      { value: '3.0-10, 铁轮真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
-      { value: '液压前叉、7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
-      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '透镜大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1790*680*1060mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1790*680*1060mm' }
-    ]
-  },
-  {
-    name: 'MU5PRO',
-    category: '电动自行车系列',
-    images: [productImg3, productImg4],
-    tags: [ '锂电铅酸','大容量电池'],
-    description: 'MU5PRO 长续航电动车 | 1000W 动力 90-100KM 续航。',
-    specs: [
-      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
-      { value: '3.0-12中颗粒, 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
-      { value: '液压前叉，莲花座7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
-      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1940*670*1130mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1940*670*1130mm' }
-    ]
-  },
-  {
-    name: '超级骑士',
-    category: '电动自行车系列',
-    images: [productImg5, productImg6],
-    tags: ['独立大容量电池', '前后碟刹', '智能解锁'],
-    description: '超级骑士 通勤电动车 | 1200W 动力 NFC 智能解锁。',
-    specs: [
-      { value: '锂电60V24AH', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1200W', label: '电机', enLabel: 'MOTOR', valueEn: '800W sine wave motor' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: 'Dual 18-channel controller' },
-      { value: '轮胎90/90-12CY610 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: 'Front and rear 400-10 vacuum tires' },
-      { value: '液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Independent suspension' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front and rear disc brakes' },
-      { value: 'NFC', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '凸镜大灯;尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1850*670*1150mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1850*670*1150mm' }
-    ]
-  },
-  {
-    name: '儿童载1.8',
-    category: '民用三轮车系列',
-    images: [productImg7, productImg8],
-    tags: ['民用三轮', '重载', '嘉陵电控', '短途运输'],
-    description: 'JL重载1.8民用三轮车，载重能力强，配备嘉陵磁浮电控系统，适合短途运输。',
-    specs: [
-      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '3300*1380*1415', valueEn: '3300*1380*1415mm' },
-      { label: '动力系统', enLabel: 'POWER SYSTEM', value: '嘉陵磁浮电控系统1200W方壳', valueEn: 'Jialing maglev electronic control system 1200W' },
-      { label: '轮胎规格', enLabel: 'TIRE SPEC', value: '前400-12后450-12钢丝胎', valueEn: 'Front 400-12 Rear 450-12 steel wire tire' },
-      { label: '减震系统', enLabel: 'SHOCK SYSTEM', value: '43外簧减震', valueEn: '43 external spring shock absorber' },
-      { label: '后桥规格', enLabel: 'REAR AXLE', value: '全悬浮变档180', valueEn: 'Full floating gear shift 180' }
-    ]
-  },
-  {
-    name: '茉莉V1',
-    category: '民用三轮车系列',
-    images: [productImg9, productImg10],
-    tags: ['民用三轮', '独立悬挂', '前后碟刹', '倒车影像'],
-    description: '茉莉V1民用三轮车，时尚设计，独立悬挂，前后碟刹，配备倒车影像和暖风，驾乘舒适。',
-    specs: [
-      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2750X1225X1670mm', valueEn: '2750X1225X1670mm' },
-      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
-      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
-      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
-      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
-      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
-      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
-    ]
-  },
-  {
-    name: '茉莉V2',
-    category: '民用三轮车系列',
-    images: [productImg11, productImg12],
-    tags: ['民用三轮', '小巧', '独立悬挂', '城市代步'],
-    description: '茉莉V2民用三轮车，小巧灵活，同样配备独立悬挂和暖风，适合城市代步。',
-    specs: [
-      { label: '整车尺寸', enLabel: 'DIMENSIONS', value: '2410X1225X1670mm', valueEn: '2410X1225X1670mm' },
-      { label: '制动方式', enLabel: 'BRAKE MODE', value: '独立悬挂前后碟刹', valueEn: 'Independent suspension front and rear disc brake' },
-      { label: '轮胎尺寸', enLabel: 'TIRE SIZE', value: '前后400-10真空胎', valueEn: 'Front and rear 400-10 vacuum tire' },
-      { label: '电机', enLabel: 'MOTOR', value: '800W正弦波', valueEn: '800W sine wave motor' },
-      { label: '控制器', enLabel: 'CONTROLLER', value: '双18管控制器', valueEn: 'Dual 18-channel controller' },
-      { label: '额定电压', enLabel: 'RATED VOLTAGE', value: '48V/60V', valueEn: '48V/60V' },
-      { label: '标配', enLabel: 'STANDARD', value: '倒车影像、天窗、暖风、前后碟刹、后悬挂', valueEn: 'Reverse image, sunroof, heating, disc brakes, rear suspension' }
-    ]
-  },
-  {
-    name: '雅迪冠能 IF8',
-    category: '电动摩托车系列',
-    images: [productImg13, productImg14],
-    tags: ['石墨烯电池', '无刷电机', '前后碟刹', '长续航'],
-    description: '雅迪冠能 IF8 电动摩托车 | 石墨烯三代 PLUS 电池 1200W 无刷电机 续航约 85km。',
-    specs: [
-      { label: '电池', enLabel: 'BATTERY', value: 'TTFAR 石墨烯三代 PLUS 铅酸电池 72V23Ah（可选锂电版本）', valueEn: 'TTFAR Graphene 3rd PLUS lead-acid battery 72V23Ah (lithium version optional)' },
-      { label: '电机', enLabel: 'MOTOR', value: '1200W 直流无刷电机', valueEn: '1200W DC brushless motor' },
-      { label: '控制器', enLabel: 'CONTROLLER', value: '雅迪 TTFAR 智能控制器', valueEn: 'Yadea TTFAR intelligent controller' },
-      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
-      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉 + 后置双减震', valueEn: 'Hydraulic front fork + rear dual shock absorber' },
-      { label: '刹车', enLabel: 'BRAKE', value: '前后双碟刹', valueEn: 'Front and rear disc brakes' },
-      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航约 85km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage about 85km' },
-      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '高亮透镜大灯 + LED 尾灯 + 转向灯', valueEn: 'High-brightness lens headlights + LED taillights + turn signals' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
-    ]
-  },
-  {
-    name: '锋速幻影',
-    category: '电动摩托车系列',
-    images: [productImg15, productImg16],
-    tags: ['双电池可选', '高性能电机', '前后碟刹', '长续航'],
-    description: '锋速幻影 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
-    specs: [
-      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah（可选）', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah (optional)' },
-      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能直流无刷电机', valueEn: '1000W high-performance DC brushless motor' },
-      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
-      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 真空胎', valueEn: '3.0-10 vacuum tire' },
-      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、后置液压减震', valueEn: 'Hydraulic front fork + rear hydraulic shock absorber' },
-      { label: '刹车', enLabel: 'BRAKE', value: '前 / 后碟刹', valueEn: 'Front and rear disc brakes' },
-      { label: '仪表', enLabel: 'DASHBOARD', value: '高清液晶仪表，中速平路续航 90-100Km', valueEn: 'High-definition LCD dashboard, medium-speed flat road mileage 90-100Km' },
-      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、LED 转向灯', valueEn: 'Lens headlights, LED taillights, LED turn signals' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
-    ]
-  },
-  {
-    name: '暗影骑士',
-    category: '电动摩托车系列',
-    images: [productImg17, productImg18],
-    tags: ['双电池可选', '无刷电机', '前后碟刹', '长续航'],
-    description: '暗影骑士 高性能电动摩托车 | 1000W 无刷电机 双电池可选 续航 90-100km。',
-    specs: [
-      { label: '电池', enLabel: 'BATTERY', value: '锂电 60V45AH / 铅酸 72V/20Ah', valueEn: 'Lithium battery 60V45AH / Lead-acid 72V/20Ah' },
-      { label: '电机', enLabel: 'MOTOR', value: '1000W 高性能无刷电机', valueEn: '1000W high-performance brushless motor' },
-      { label: '控制器', enLabel: 'CONTROLLER', value: '12 管智能控制器', valueEn: '12-channel intelligent controller' },
-      { label: '轮胎', enLabel: 'TIRES', value: '3.0-10 铁轮真空胎', valueEn: '3.0-10 Iron Wheel Vacuum Tire' },
-      { label: '减震', enLabel: 'SHOCK ABSORBER', value: '液压前叉、7.0*290 液压减震', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
-      { label: '刹车', enLabel: 'BRAKE', value: '前/后碟刹', valueEn: 'Front and rear disc brakes' },
-      { label: '仪表', enLabel: 'DASHBOARD', value: '中速平表里程 90-100Km', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { label: '灯具', enLabel: 'LIGHTING SYSTEM', value: '透镜大灯、LED 尾灯、动态流光转向灯', valueEn: 'Lens headlights, LED taillights, dynamic flow turn signals' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '1790*680*1060mm', valueEn: '1790*680*1060mm' }
-    ]
-  },
-  {
-    name: '动力王 6090 拖拉机',
-    category: '小型农机车系列',
-    images: [productImg19],
-    tags: ['300 马力', '四驱动力', '液压系统', '智能导航'],
-    description: '动力王 6090 拖拉机 | 300HP 六缸涡轮增压发动机 PowerShift 变速箱 全液压制动。',
-    specs: [
-      { label: '发动机', enLabel: 'ENGINE', value: 'PowerTech™ PVS 6090 6 缸 9.0L 增压式帕四发动机', valueEn: '6-cylinder 9.0L H pressure Commc Engine' },
-      { label: '标定功率', enLabel: 'POWER RATING', value: '300HP / 220.5kW', valueEn: '300HP / 220.5kW' },
-      { label: '净功率', enLabel: 'NET POWER', value: '326.3HP / 240kW', valueEn: '326.3HP / 240kW' },
-      { label: '变速箱', enLabel: 'TRANSMISSION', value: '16×4 全动力换挡（PowerShift）', valueEn: '16×4 Full PowerShift Transmission' },
-      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速；187.5kW 输出功率', valueEn: '1000r/min Stand 187.5kW Output' },
-      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '4 组电控液压输出阀；最大提升力 288.3kN', valueEn: '4 Electro-Hydraulic Valves; Max. Lift 288.3kN' },
-      { label: '轮胎', enLabel: 'TIRES', value: '标配：600/70R30（前）/650/85R38（后）选装：420/85R34/480/80R50 双后轮', valueEn: 'Standard: 600/70 (R) 650/85R38 (R) Optional: 420/85R34/480/80 Rear' },
-      { label: '悬挂', enLabel: 'HITCH', value: '后置 3 类 / 4N 三点悬挂', valueEn: 'Category 3/4N R point Hitch' },
-      { label: '制动', enLabel: 'BRAKE', value: '全液压湿式制动系统', valueEn: 'Full Hydraulic Wet System' },
-      { label: '驾驶室', enLabel: 'CAB', value: '1750 系列豪华空气悬浮驾驶，冷暖空调', valueEn: '1750 Series Air S Premium Cab, Air Conditioning' },
-      { label: '导航', enLabel: 'NAVIGATION', value: 'CommandCenter 中文触屏显示；ATI 自动驾驶', valueEn: 'CommandCenter Display, ATI Auto' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '6613×3012-3351×3403mm', valueEn: '6613×3012-3351×3403mm' }
-    ]
-  },
-  {
-    name: '挑战者 MT665D 拖拉机',
-    category: '小型农机车系列',
-    images: [productImg20],
-    tags: ['340 马力', '无级变速', '全液压制动', '全景驾驶室'],
-    description: '挑战者 MT665D 农用拖拉机 | 340HP 六缸柴油发动机 CVT 无级变速 全液压湿式制动。',
-    specs: [
-      { label: '发动机', enLabel: 'ENGINE', value: 'AGCO Power 8.4L 直列 6 缸柴油发动机', valueEn: 'AGCO Power 8.4L Inline 6-cylinder Diesel Engine' },
-      { label: '额定功率', enLabel: 'POWER RATING', value: '340HP / 253.5kW（发动机总功率）', valueEn: '340HP / 253.5kW (Engine Gross Power)' },
-      { label: '动力输出轴功率', enLabel: 'PTO POWER', value: '290HP / 216.3kW', valueEn: '290HP / 216.3kW' },
-      { label: '变速箱', enLabel: 'TRANSMISSION', value: '无级变速（CVT）双机械挡位', valueEn: 'Continuously Variable Transmission (CVT) with 2 Mechanical Ranges' },
-      { label: '动力输出轴', enLabel: 'PTO', value: '标准 1000r/min，支持双速调节', valueEn: 'Standard 1000r/min, with two-speed adjustment' },
-      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '中心闭心式液压系统，流量 160L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate 160L/min' },
-      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 480/70R34，后 520/85R46 支持双轮胎选装', valueEn: 'Standard: Front 480/70R34, Rear 520/85R46 Dual Rear Wheels Optional' },
-      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥85kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥85kN' },
-      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
-      { label: '驾驶室', enLabel: 'CAB', value: '全景玻璃悬浮驾驶室，配备冷暖空调', valueEn: 'Panoramic Glass Suspended Cab with Air Conditioning System' },
-      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 632L 大容量油箱', valueEn: '632L Large Capacity Fuel Tank' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 5500×2700×3200mm', valueEn: 'Approx. 5500×2700×3200mm' },
-      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 11500kg', valueEn: 'Approx. 11500kg Operating Weight' }
-    ]
-  },
-  {
-    name: '雷霆 300HP 拖拉机',
-    category: '小型农机车系列',
-    images: [productImg21],
-    tags: ['300 马力', '六缸发动机', '全动力换挡', '全液压制动'],
-    description: '雷霆 300HP 拖拉机 | 六缸高压共轨柴油发动机 全动力换挡变速箱 全液压湿式制动。',
-    specs: [
-      { label: '发动机', enLabel: 'ENGINE', value: '直列六缸高压共轨柴油发动机', valueEn: 'Inline 6-cylinder High-pressure Common Rail Diesel Engine' },
-      { label: '额定功率', enLabel: 'POWER RATING', value: '220kW / 约 300HP', valueEn: '220kW / Approx. 300HP Rated Power' },
-      { label: '变速箱', enLabel: 'TRANSMISSION', value: '全动力换挡变速箱', valueEn: 'Full PowerShift Transmission' },
-      { label: '动力输出轴', enLabel: 'PTO', value: '1000r/min 标准转速', valueEn: '1000r/min Standard Speed PTO' },
-      { label: '液压系统', enLabel: 'HYDRAULIC SYSTEM', value: '闭心式液压系统，流量 ≥150L/min', valueEn: 'Closed-center Hydraulic System, Flow Rate ≥150L/min' },
-      { label: '轮胎', enLabel: 'TIRES', value: '标配：前 540/65R30，后 650/85R38，支持双后轮', valueEn: 'Standard: Front 540/65R30, Rear 650/85R38, Dual Rear Wheels Optional' },
-      { label: '悬挂系统', enLabel: 'HITCH', value: 'Ⅲ类三点悬挂，最大提升力 ≥90kN', valueEn: 'Category III Three-point Hitch, Max. Lift Force ≥90kN' },
-      { label: '制动系统', enLabel: 'BRAKE', value: '全液压湿式制动', valueEn: 'Full Hydraulic Wet Brake System' },
-      { label: '驾驶室', enLabel: 'CAB', value: '全景悬浮驾驶室，配备冷暖空调与减震座椅', valueEn: 'Panoramic Suspended Cab with Air Conditioning and Air Seat' },
-      { label: '燃油箱', enLabel: 'FUEL TANK', value: '约 500L 大容量油箱', valueEn: 'Approx. 500L Large Capacity Fuel Tank' },
-      { label: '外形尺寸', enLabel: 'OVERALL DIMENSION', value: '约 6200×3000×3300mm', valueEn: 'Approx. 6200×3000×3300mm' },
-      { label: '整机重量', enLabel: 'OPERATING WEIGHT', value: '约 10500kg', valueEn: 'Approx. 10500kg Operating Weight' }
-    ]
-  },
-])
-
 const filteredProducts = computed(() => {
-  if (currentCategory.value === '全部产品') {
+  if (currentCategoryKey.value === 'all') {
     return products.value
   }
-  return products.value.filter(product => product.category === currentCategory.value)
+  return products.value.filter(
+    (product) => product.categoryKey === currentCategoryKey.value
+  )
 })
 </script>
 

demo-vue/src/views/ServicesDetail.vue

@@ -7,35 +7,29 @@
     <!-- 页面标题区域 -->
     <section class="page-header">
       <div class="header-content">
-        <h1 class="page-title">我们的服务</h1>
-        <p class="page-subtitle">
-          持一级资质，拥四大工艺，年产40万台，为您提供从设计到交付的全链条智能搬运解决方案，助力客户提升运营效率。
-        </p>
+        <h1 class="page-title">{{ t('services.pageTitle') }}</h1>
+        <p class="page-subtitle">{{ t('services.pageSub') }}</p>
       </div>
     </section>
 
     <!-- 全方位解决方案 -->
     <section class="solutions-section">
       <div class="solutions-container">
-        <h2 class="section-title">全方位解决方案</h2>
-        <p class="section-subtitle">
-          从深度定制到全球交付，从品质控制到营销赋能，我们构建了覆盖产品全生命周期的服务体系。
-        </p>
+        <h2 class="section-title">{{ t('services.s1') }}</h2>
+        <p class="section-subtitle">{{ t('services.s1d') }}</p>
 
         <div class="solutions-grid">
           <div class="solution-card">
             <div class="card-icon">
               <el-icon :size="24"><EditPen /></el-icon>
             </div>
-            <h3 class="card-title">OEM/ODM 定制</h3>
-            <p class="card-desc">
-              依托强大的研发与制造实力，提供灵活的个性化定制服务。
-            </p>
+            <h3 class="card-title">{{ t('services.c1t') }}</h3>
+            <p class="card-desc">{{ t('services.c1d') }}</p>
             <ul class="card-list">
-              <li>产品配置灵活调整，满足不同工况需求</li>
-              <li>专属色彩与品牌标识设计</li>
-              <li>个性化包装方案</li>
-              <li>从概念到量产的全程技术支持</li>
+              <li>{{ t('services.c1a') }}</li>
+              <li>{{ t('services.c1b') }}</li>
+              <li>{{ t('services.c1c') }}</li>
+              <li>{{ t('services.c1e') }}</li>
             </ul>
           </div>
 
@@ -43,15 +37,13 @@
             <div class="card-icon">
               <el-icon :size="24"><Tools /></el-icon>
             </div>
-            <h3 class="card-title">精密制造</h3>
-            <p class="card-desc">
-              现代化生产基地与四大工艺，确保高效生产与品质一致性。
-            </p>
+            <h3 class="card-title">{{ t('services.c2t') }}</h3>
+            <p class="card-desc">{{ t('services.c2d') }}</p>
             <ul class="card-list">
-              <li>四大完整工艺（冲压、焊接、涂装、总装）</li>
-              <li>自动化生产线，保障精度与效率</li>
-              <li>年产40万台产能，快速响应市场需求</li>
-              <li>绿色环保制造，践行可持续发展</li>
+              <li>{{ t('services.c2a') }}</li>
+              <li>{{ t('services.c2b') }}</li>
+              <li>{{ t('services.c2c') }}</li>
+              <li>{{ t('services.c2e') }}</li>
             </ul>
           </div>
 
@@ -59,15 +51,13 @@
             <div class="card-icon">
               <el-icon :size="24"><CircleCheck /></el-icon>
             </div>
-            <h3 class="card-title">质量控制</h3>
-            <p class="card-desc">
-              严控五关，匠心打造安全耐用的物料搬运设备。
-            </p>
+            <h3 class="card-title">{{ t('services.c3t') }}</h3>
+            <p class="card-desc">{{ t('services.c3d') }}</p>
             <ul class="card-list">
-              <li>原材料源头检验，杜绝不良流入</li>
-              <li>生产过程全检，实时监控品质</li>
-              <li>成品严格路试与性能检测</li>
-              <li>产品通过CE等国际认证</li>
+              <li>{{ t('services.c3L1') }}</li>
+              <li>{{ t('services.c3L2') }}</li>
+              <li>{{ t('services.c3L3') }}</li>
+              <li>{{ t('services.c3L4') }}</li>
             </ul>
           </div>
 
@@ -75,15 +65,13 @@
             <div class="card-icon">
               <el-icon :size="24"><Van /></el-icon>
             </div>
-            <h3 class="card-title">全球交付</h3>
-            <p class="card-desc">
-              完善的物流体系，实现高效安全的全球运输。
-            </p>
+            <h3 class="card-title">{{ t('services.c4t') }}</h3>
+            <p class="card-desc">{{ t('services.c4d') }}</p>
             <ul class="card-list">
-              <li>一站式出口认证办理，简化流程</li>
-              <li>海陆空多式联运，灵活选择</li>
-              <li>专业防护包装，确保运输安全</li>
-              <li>全程可视化追踪，信息透明</li>
+              <li>{{ t('services.c4L1') }}</li>
+              <li>{{ t('services.c4L2') }}</li>
+              <li>{{ t('services.c4L3') }}</li>
+              <li>{{ t('services.c4L4') }}</li>
             </ul>
           </div>
 
@@ -91,15 +79,13 @@
             <div class="card-icon">
               <el-icon :size="24"><Headset /></el-icon>
             </div>
-            <h3 class="card-title">售后支持</h3>
-            <p class="card-desc">
-              快速响应的全球服务网络，让您无后顾之忧。
-            </p>
+            <h3 class="card-title">{{ t('services.c5t') }}</h3>
+            <p class="card-desc">{{ t('services.c5d') }}</p>
             <ul class="card-list">
-              <li>专业支持团队，提供技术保障</li>
-              <li>完善质保体系，原厂备件直供</li>
-              <li>远程技术指导，即时解决问题</li>
-              <li>24小时快速响应，全球服务覆盖</li>
+              <li>{{ t('services.c5L1') }}</li>
+              <li>{{ t('services.c5L2') }}</li>
+              <li>{{ t('services.c5L3') }}</li>
+              <li>{{ t('services.c5L4') }}</li>
             </ul>
           </div>
 
@@ -107,15 +93,13 @@
             <div class="card-icon">
               <el-icon :size="24"><TrendCharts /></el-icon>
             </div>
-            <h3 class="card-title">营销赋能</h3>
-            <p class="card-desc">
-              全方位市场支持，助力合作伙伴开拓增长。
-            </p>
+            <h3 class="card-title">{{ t('services.c6t') }}</h3>
+            <p class="card-desc">{{ t('services.c6d') }}</p>
             <ul class="card-list">
-              <li>专业产品素材库与整合营销物料</li>
-              <li>市场趋势分析与销售策略建议</li>
-              <li>销售技能培训，提升团队能力</li>
-              <li>品牌建设支持，共创价值</li>
+              <li>{{ t('services.c6L1') }}</li>
+              <li>{{ t('services.c6L2') }}</li>
+              <li>{{ t('services.c6L3') }}</li>
+              <li>{{ t('services.c6L4') }}</li>
             </ul>
           </div>
         </div>
@@ -125,10 +109,8 @@
     <!-- 合作流程 -->
     <section class="process-section">
       <div class="process-container">
-        <h2 class="section-title">合作流程</h2>
-        <p class="section-subtitle">
-          清晰、高效的四步合作路径，确保每一个项目都能精准落地，创造价值。
-        </p>
+        <h2 class="section-title">{{ t('services.procTitle') }}</h2>
+        <p class="section-subtitle">{{ t('services.procSub') }}</p>
 
         <div class="process-steps">
           <div class="step-item">
@@ -136,10 +118,8 @@
             <div class="step-icon">
               <el-icon :size="24"><ChatDotRound /></el-icon>
             </div>
-            <h3 class="step-title">需求对接</h3>
-            <p class="step-desc">
-              深入了解您的市场定位、应用场景与产品需求，专业团队一对一沟通，确保精准把握每一个细节。
-            </p>
+            <h3 class="step-title">{{ t('services.p1t') }}</h3>
+            <p class="step-desc">{{ t('services.p1d') }}</p>
           </div>
 
           <div class="step-item">
@@ -147,10 +127,8 @@
             <div class="step-icon">
               <el-icon :size="24"><Setting /></el-icon>
             </div>
-            <h3 class="step-title">方案定制</h3>
-            <p class="step-desc">
-              依托四大工艺与研发实力，提供最优产品配置与可行性方案，量身打造符合您需求的个性化解决方案。
-            </p>
+            <h3 class="step-title">{{ t('services.p2t') }}</h3>
+            <p class="step-desc">{{ t('services.p2d') }}</p>
           </div>
 
           <div class="step-item">
@@ -158,10 +136,8 @@
             <div class="step-icon">
               <el-icon :size="24"><Tools /></el-icon>
             </div>
-            <h3 class="step-title">智造生产</h3>
-            <p class="step-desc">
-              在现代化生产基地启动生产，严格执行严控五关品控体系，确保每一台设备都符合品质标准与交期要求。
-            </p>
+            <h3 class="step-title">{{ t('services.p3t') }}</h3>
+            <p class="step-desc">{{ t('services.p3d') }}</p>
           </div>
 
           <div class="step-item">
@@ -169,10 +145,8 @@
             <div class="step-icon">
               <el-icon :size="24"><Van /></el-icon>
             </div>
-            <h3 class="step-title">全球交付</h3>
-            <p class="step-desc">
-              安排高效物流，提供一站式出口服务，确保产品安全、准时送达全球客户手中。
-            </p>
+            <h3 class="step-title">{{ t('services.p4t') }}</h3>
+            <p class="step-desc">{{ t('services.p4d') }}</p>
           </div>
         </div>
       </div>
@@ -182,52 +156,42 @@
     <section class="faq-section">
       <div class="faq-container">
         <div class="faq-header">
-          <h2 class="section-title">常见问题</h2>
-          <p class="section-desc">
-            以下是我们合作伙伴最关心的问题解答。如需更多信息，欢迎随时联系我们。
-          </p>
-          <a href="#" class="contact-link">联系我们的支持团队 <el-icon><ArrowRight /></el-icon></a>
+          <h2 class="section-title">{{ t('services.faqTitle') }}</h2>
+          <p class="section-desc">{{ t('services.faqSub') }}</p>
+          <a href="#" class="contact-link">{{ t('services.faqContact') }} <el-icon><ArrowRight /></el-icon></a>
         </div>
 
         <div class="faq-list">
           <div class="faq-item">
             <div class="faq-question">
               <el-icon><QuestionFilled /></el-icon>
-              <span>最小起订量（MOQ）是多少？</span>
+              <span>{{ t('services.fq1') }}</span>
             </div>
-            <p class="faq-answer">
-              我们重视长期合作，可为新伙伴提供灵活起订量支持。标准订单建议以整柜为单位，具体可根据产品型号与需求协商确定。
-            </p>
+            <p class="faq-answer">{{ t('services.fa1') }}</p>
           </div>
 
           <div class="faq-item">
             <div class="faq-question">
               <el-icon><QuestionFilled /></el-icon>
-              <span>是否支持品牌定制？</span>
+              <span>{{ t('services.fq2') }}</span>
             </div>
-            <p class="faq-answer">
-              完全支持。我们提供从产品配置、品牌标识、外观色彩到包装设计的全方位OEM/ODM服务，确保产品完美契合您的品牌形象。
-            </p>
+            <p class="faq-answer">{{ t('services.fa2') }}</p>
           </div>
 
           <div class="faq-item">
             <div class="faq-question">
               <el-icon><QuestionFilled /></el-icon>
-              <span>生产与交付周期是多久？</span>
+              <span>{{ t('services.fq3') }}</span>
             </div>
-            <p class="faq-answer">
-              生产周期通常为15-25个工作日，具体视订单量而定。全球运输时间视目的地而定，一般为15-45天。我们可根据项目需求提供加急服务选项。
-            </p>
+            <p class="faq-answer">{{ t('services.fa3') }}</p>
           </div>
 
           <div class="faq-item">
             <div class="faq-question">
               <el-icon><QuestionFilled /></el-icon>
-              <span>是否提供备件支持？</span>
+              <span>{{ t('services.fq4') }}</span>
             </div>
-            <p class="faq-answer">
-              是的。每个订单标配1%免费易损件，并建立完善的备件供应体系，可快速供应全系列原厂备件，确保设备长期稳定运行。
-            </p>
+            <p class="faq-answer">{{ t('services.fa4') }}</p>
           </div>
         </div>
       </div>
@@ -236,13 +200,11 @@
     <!-- 开启合作 -->
     <section class="cta-section">
       <div class="cta-container">
-        <h2 class="cta-title">开启合作新篇章</h2>
-        <p class="cta-desc">
-          持一级资质，拥四大工艺，年产40万台——让我们基于完整的产业实力，共同打造符合您市场需求的智能搬运解决方案。
-        </p>
+        <h2 class="cta-title">{{ t('services.ctaTitle') }}</h2>
+        <p class="cta-desc">{{ t('services.ctaSub') }}</p>
         <div class="cta-buttons">
-          <el-button class="btn-primary" size="large">获取报价</el-button>
-          <el-button class="btn-secondary" size="large">查看产品</el-button>
+          <el-button class="btn-primary" size="large">{{ t('services.ctaQuote') }}</el-button>
+          <el-button class="btn-secondary" size="large" @click="$router.push('/products')">{{ t('services.ctaView') }}</el-button>
         </div>
       </div>
     </section>
@@ -253,6 +215,7 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 import {
@@ -267,6 +230,8 @@ import {
   ArrowRight,
   QuestionFilled
 } from '@element-plus/icons-vue'
+
+const { t } = useI18n()
 </script>
 
 <style scoped lang="less">

demo-vue/src/views/TermsOfService.vue

@@ -5,45 +5,41 @@
     <main class="terms-of-service">
       <section class="page-header">
         <div class="header-content">
-          <h1 class="page-title">服务条款</h1>
-          <p class="update-date">更新日期：2025年2月19日</p>
-          <p class="intro-text">欢迎使用我们的服务。使用本网站即表示您同意以下条款。</p>
+          <h1 class="page-title">{{ t('terms.title') }}</h1>
+          <p class="update-date">{{ t('terms.updated') }}</p>
+          <p class="intro-text">{{ t('terms.intro') }}</p>
         </div>
       </section>
 
       <section class="content-sections">
         <div class="content-wrapper">
           <div class="terms-item">
-            <h3 class="subsection-title">1. 条款接受</h3>
-            <p class="content-text">
-              访问和使用本网站即表示您接受并同意受本协议条款和条件的约束。
-            </p>
+            <h3 class="subsection-title">{{ t('terms.t1') }}</h3>
+            <p class="content-text">{{ t('terms.t1p') }}</p>
           </div>
 
           <div class="terms-item">
-            <h3 class="subsection-title">2. 用户责任</h3>
-            <p class="content-text">您同意：</p>
+            <h3 class="subsection-title">{{ t('terms.t2') }}</h3>
+            <p class="content-text">{{ t('terms.t2p') }}</p>
             <ul class="bullet-list">
-              <li class="bullet-item">提供准确信息</li>
-              <li class="bullet-item">维护账户安全</li>
-              <li class="bullet-item">遵守所有适用法律</li>
+              <li class="bullet-item">{{ t('terms.t2a') }}</li>
+              <li class="bullet-item">{{ t('terms.t2b') }}</li>
+              <li class="bullet-item">{{ t('terms.t2c') }}</li>
             </ul>
           </div>
 
           <div class="terms-item">
-            <h3 class="subsection-title">3. 服务变更</h3>
-            <p class="content-text">我们保留以下权利：</p>
+            <h3 class="subsection-title">{{ t('terms.t3') }}</h3>
+            <p class="content-text">{{ t('terms.t3p') }}</p>
             <ul class="bullet-list">
-              <li class="bullet-item">修改或终止服务</li>
-              <li class="bullet-item">随时更新这些条款</li>
+              <li class="bullet-item">{{ t('terms.t3a') }}</li>
+              <li class="bullet-item">{{ t('terms.t3b') }}</li>
             </ul>
           </div>
 
           <div class="terms-item">
-            <h3 class="subsection-title">联系我们</h3>
-            <p class="content-text">
-              如果您对这些条款有任何疑问，请与我们联系。
-            </p>
+            <h3 class="subsection-title">{{ t('terms.t4') }}</h3>
+            <p class="content-text">{{ t('terms.t4p') }}</p>
           </div>
         </div>
       </section>
@@ -54,8 +50,10 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+const { t } = useI18n()
 </script>
 
 <style scoped lang="less">

demo-vue/src/views/WelcomeVue.vue

@@ -8,14 +8,14 @@
       <div class="banner-overlay"></div>
       <div class="banner-content">
         <div class="text-content">
-          <h1 class="main-title">以诚信铸就品质，以智<br />能赢领市场</h1>
-          <p class="subtitle">专注智能搬运，助力全球物流高效升级</p>
+          <h1 class="main-title"><span>{{ t('home.heroTitle1') }}</span><br /><span>{{ t('home.heroTitle2') }}</span></h1>
+          <p class="subtitle">{{ t('home.heroSub') }}</p>
           <div class="action-buttons">
             <el-button class="btn-primary" size="large" @click="goToProducts">
-              查看产品
+              {{ t('home.btnProducts') }}
               <el-icon class="el-icon--right"><ArrowRight /></el-icon>
             </el-button>
-            <el-button class="btn-secondary" size="large">联系我们</el-button>
+            <el-button class="btn-secondary" size="large">{{ t('home.btnContact') }}</el-button>
           </div>
         </div>
       </div>
@@ -25,17 +25,13 @@
     <section class="about-us">
       <div class="about-content">
         <div class="left-section">
-          <h2 class="section-title">关于我们</h2>
+          <h2 class="section-title">{{ t('home.aboutTitle') }}</h2>
           <div class="description">
-            <p class="paragraph">
-              山东首达特科技工程有限公司成立于 2024 年 8 月 7 日，是一家集研发、制造、销售、服务于一体的综合性科技企业。公司专注于机电装备、智能控制系统及工业配套产品的集成供应与技术服务，业务涵盖机械设备研发与销售、工业自动化控制、计算机软硬件开发、金属材料及制品、建筑建材、五金机电、化工产品、汽车及农机配件、进出口贸易等多元领域。
-            </p>
-            <p class="paragraph">
-              我们依托完善的供应链体系与专业技术团队，为建筑工程、工业制造、物流仓储、农业生产等行业客户提供一站式配套解决方案，产品与服务覆盖全国并远销海外，以稳定品质与高效服务满足各领域多元化、高品质需求。
-            </p>
+            <p class="paragraph">{{ t('home.aboutP1') }}</p>
+            <p class="paragraph">{{ t('home.aboutP2') }}</p>
           </div>
           <el-button class="more-btn" type="primary" plain @click="goToAbout">
-            了解更多
+            {{ t('home.more') }}
             <el-icon class="el-icon--right"><ArrowRight /></el-icon>
           </el-button>
         </div>
@@ -54,18 +50,18 @@
     <!-- 产品展示区域 -->
     <section class="product-showcase">
       <div class="product-header">
-        <h2 class="section-title">产品展示</h2>
+        <h2 class="section-title">{{ t('home.showcaseTitle') }}</h2>
         <div class="header-desc-wrapper">
-          <p class="section-subtitle">全系列智能搬运设备，以一级资质与四大工艺，满足您多样化的物料搬运需求。</p>
+          <p class="section-subtitle">{{ t('home.showcaseSub') }}</p>
           <a href="javascript:void(0)" class="view-all-btn" @click="goToProducts">
-            查看所有产品
+            {{ t('home.viewAll') }}
             <el-icon><ArrowRight /></el-icon>
           </a>
         </div>
       </div>
 
       <div class="product-grid">
-        <div class="product-card" v-for="(product, index) in products" :key="index">
+        <div class="product-card" v-for="(product, index) in homeProducts" :key="product.id">
           <div class="product-image-section">
             <el-carousel height="240px" indicator-position="inside" :autoplay="false" trigger="hover">
               <el-carousel-item v-for="(img, imgIndex) in product.images" :key="imgIndex">
@@ -85,18 +81,18 @@
 
             <div class="product-specs">
               <div class="specs-header">
-                <span class="specs-title">基础配置</span>
-                <span class="specs-subtitle">BASIC CONFIGURATION</span>
+                <span class="specs-title">{{ t('common.specBasicCn') }}</span>
+                <span class="specs-subtitle">{{ t('common.specBasicEn') }}</span>
               </div>
-              <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, index)" :key="specIndex">
+              <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.id)" :key="specIndex">
                 <div class="spec-label-cn">{{ spec.label }}</div>
                 <div class="spec-label-en">{{ spec.enLabel }}</div>
                 <div class="spec-value-cn">{{ spec.value }}</div>
                 <div class="spec-value-en">{{ spec.valueEn || '' }}</div>
               </div>
-              <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(index)">
-                <span>{{ expandedIndices.includes(index) ? '收起' : '查看更多' }}</span>
-                <el-icon><ArrowDown v-if="!expandedIndices.includes(index)" /><ArrowUp v-else /></el-icon>
+              <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.id)">
+                <span>{{ expandedSpecIds.has(product.id) ? t('common.collapse') : t('common.more') }}</span>
+                <el-icon><ArrowDown v-if="!expandedSpecIds.has(product.id)" /><ArrowUp v-else /></el-icon>
               </div>
             </div>
           </div>
@@ -110,28 +106,21 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ArrowRight,
-  More,
-  ArrowDown,
-  ArrowUp
-} from '@element-plus/icons-vue'
-import { ref } from 'vue'
+import { ArrowRight, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
+import { productImagesById, homeFeaturedProductIds } from '@/data/productImages'
+import type { ProductItemText } from '@/locales/types'
 
 import factory1 from '@/assets/images/factory-1.jpg'
 import factory2 from '@/assets/images/factory-2.jpg'
 import factory3 from '@/assets/images/factory-3.jpg'
-import productImg1 from '@/assets/images/img1-1.png'
-import productImg2 from '@/assets/images/img1-2.png'
-import productImg3 from '@/assets/images/img2-1.png'
-import productImg4 from '@/assets/images/img2-2.png'
-import productImg5 from '@/assets/images/img3-1.png'
-import productImg6 from '@/assets/images/img3-2.jpg'
 
 const router = useRouter()
+const { t, tm } = useI18n()
 
 const goToAbout = () => {
   router.push('/about')
@@ -141,92 +130,42 @@ const goToProducts = () => {
   router.push('/products')
 }
 
-const carouselImages = ref([
-  {
-    url: factory1,
-    alt: '生产基地鸟瞰图1'
-  },
-  {
-    url: factory2,
-    alt: '生产基地鸟瞰图2'
-  },
-  {
-    url: factory3,
-    alt: '生产基地鸟瞰图3'
-  }
+const carouselImages = computed(() => [
+  { url: factory1, alt: t('home.carouselAlt1') },
+  { url: factory2, alt: t('home.carouselAlt2') },
+  { url: factory3, alt: t('home.carouselAlt3') }
 ])
 
-const expandedIndices = ref<number[]>([])
+type HomeProduct = ProductItemText & { images: string[] }
 
-const getVisibleSpecs = (product: any, index: number) => {
-  if (expandedIndices.value.includes(index)) {
+const homeProducts = computed((): HomeProduct[] => {
+  const all = tm('catalog.products') as ProductItemText[]
+  return homeFeaturedProductIds
+    .map((id) => {
+      const p = all.find((x) => x.id === id)
+      if (!p) return null
+      return { ...p, images: (productImagesById[id] as string[] | undefined) || [] } as HomeProduct
+    })
+    .filter((x): x is HomeProduct => x !== null)
+})
+
+const expandedSpecIds = ref<Set<string>>(new Set())
+
+const getVisibleSpecs = (product: HomeProduct, productId: string) => {
+  if (expandedSpecIds.value.has(productId)) {
     return product.specs
   }
   return product.specs.slice(0, 3)
 }
 
-const toggleSpecs = (index: number) => {
-  const idx = expandedIndices.value.indexOf(index)
-  if (idx > -1) {
-    expandedIndices.value.splice(idx, 1)
+const toggleSpecs = (productId: string) => {
+  const s = expandedSpecIds.value
+  if (s.has(productId)) {
+    s.delete(productId)
   } else {
-    expandedIndices.value.push(index)
+    s.add(productId)
   }
 }
-
-const products = ref([
-  {
-    name: '长虹',
-    images: [productImg1, productImg2],
-    tags: [ '锂电铅酸', '长续航'],
-    description: '长虹智能电动车 | 双电池可选 液压减震 碟刹安全。',
-    specs: [
-      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
-      { value: '3.0-10, 铁轮真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
-      { value: '液压前叉、7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
-      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '透镜大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1790*680*1060mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1790*680*1060mm' }
-    ]
-  },
-  {
-    name: 'MU5PRO',
-    images: [productImg3, productImg4],
-    tags: [ '锂电铅酸','大容量电池'],
-    description: 'MU5PRO 长续航电动车 | 1000W 动力 90-100KM 续航。',
-    specs: [
-      { value: '锂电60V45AH铅酸72V/20ah', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1000W', label: '电机', enLabel: 'MOTOR', valueEn: '1000W' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: '12-channel controller' },
-      { value: '3.0-12中颗粒, 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: '3.0-10, Iron Wheel Vacuum Tire' },
-      { value: '液压前叉，莲花座7.0*290液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Hydraulic fork, 7.0*290 hydraulic shock absorber' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front' },
-      { value: '中速平表里程90-100Km', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '大灯、尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1940*670*1130mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1940*670*1130mm' }
-    ]
-  },
-  {
-    name: '超级骑士',
-    images: [productImg5, productImg6],
-    tags: ['独立大容量电池', '前后碟刹', '智能解锁'],
-    description: '超级骑士 通勤电动车 | 1200W 动力 NFC 智能解锁。',
-    specs: [
-      { value: '锂电60V24AH', label: '电池', enLabel: 'BATTERY', valueEn: 'Lithium battery 60V45AH lead-acid 72V/20Ah' },
-      { value: '1200W', label: '电机', enLabel: 'MOTOR', valueEn: '800W sine wave motor' },
-      { value: '12管控制器', label: '控制器', enLabel: 'CONTROLLER', valueEn: 'Dual 18-channel controller' },
-      { value: '轮胎90/90-12CY610 真空胎', label: '轮胎', enLabel: 'TIRES', valueEn: 'Front and rear 400-10 vacuum tires' },
-      { value: '液压减震', label: '减震', enLabel: 'SHOCK ABSORBER', valueEn: 'Independent suspension' },
-      { value: '前/后碟刹', label: '刹车', enLabel: 'BRAKE', valueEn: 'Front and rear disc brakes' },
-      { value: 'NFC', label: '仪表', enLabel: 'DASHBOARD', valueEn: 'Medium speed flat road mileage 90-100km' },
-      { value: '凸镜大灯;尾灯', label: '灯具', enLabel: 'LIGHTING SYSTEM', valueEn: 'Lens headlights, taillights' },
-      { value: '1850*670*1150mm', label: '外形尺寸', enLabel: 'OVERALL DIMENSION', valueEn: '1850*670*1150mm' }
-    ]
-  }
-])
 </script>
 
 <style scoped lang="less">

demo-vue/src/views/admin/Addorupdate.vue

@@ -1,89 +1,75 @@
 <template>
-  <!--新增或修改管理员信息表单-->
-  <el-dialog :title="!form.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
+  <el-dialog :title="!form.id ? t('common.addShort') : t('common.edit')" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
              width="40%">
     <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
-      <el-form-item label="用户名" prop="username">
+      <el-form-item :label="t('common.username')" prop="username">
         <el-input v-model="form.username" :readonly="ureadonly"  style="width:50%" clearable />
       </el-form-item>
-      <el-form-item label="密码" prop="userpwd">
+      <el-form-item :label="t('common.password')" prop="userpwd">
         <el-input v-model="form.userpwd" type="password" style="width:50%" clearable />
       </el-form-item>
-      <el-form-item label="姓名" prop="name">
+      <el-form-item :label="t('common.name')" prop="name">
         <el-input v-model="form.name" style="width:50%" clearable />
       </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="form.sex" placeholder="请选择" style="width: 50%">
-          <el-option label="男" value="男"> </el-option>
-          <el-option label="女" value="女"> </el-option>
+      <el-form-item :label="t('common.sex')" prop="sex">
+        <el-select v-model="form.sex" :placeholder="t('common.selectPlaceholder')" style="width: 50%">
+          <el-option :label="t('common.male')" value="男"> </el-option>
+          <el-option :label="t('common.female')" value="女"> </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="电话" prop="tel">
+      <el-form-item :label="t('common.phone')" prop="tel">
         <el-input v-model="form.tel" style="width:50%" clearable />
       </el-form-item>
-      <el-form-item label="头像" prop="headurl">
+      <el-form-item :label="t('admin.avatar')" prop="headurl">
         <el-input v-model="form.headurl" style="width:50%" clearable />
       </el-form-item>
     </el-form>
     <template #footer>
             <span class="dialog-footer">
-                <el-button @click="visible = false">取消</el-button>
-                <el-button type="primary" :loading="btnLoading" @click="onSubmit">确定</el-button>
+                <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+                <el-button type="primary" :loading="btnLoading" @click="onSubmit">{{ t('common.confirm') }}</el-button>
             </span>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-//导入文件
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { reactive, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { adminApi } from '@/api/admin-api';
 
+const { t } = useI18n();
 
-// 定义公开父组件调用的方法
 defineExpose({
   showModal,
 });
 
-//定义发射给父组件的方法
 const emit = defineEmits(['refresh']);
-// 是否显示新增修改窗口
 const visible = ref(false);
-//保存按钮加载中显示状态
 const btnLoading = ref(false);
-
-//控制用户名控件只读
 const ureadonly = ref(false);
+const ruleMode = ref<'add' | 'edit'>('add');
 
-//显示窗口
 function showModal(row: any) {
   if (row) {
     ureadonly.value = true;
-    rules.value = updaterules;
+    ruleMode.value = 'edit';
     Object.assign(form, row);
   } else {
     ureadonly.value = false;
-    rules.value = addrules;
+    ruleMode.value = 'add';
     Object.assign(form, formDefault);
   }
   visible.value = true;
 }
 
-//关闭窗口
 function onClose() {
   Object.assign(form, formDefault);
   visible.value = false;
 }
 
-
-
-
-// --------------------- 表单 ---------------------
-
-// 表单组件
 const formRef = ref();
-//表单初始值
 const formDefault = {
   id: undefined,
   username: undefined,
@@ -93,93 +79,79 @@ const formDefault = {
   tel: undefined,
   headurl: undefined,
 };
-//表单
 let form = reactive({ ...formDefault });
-//验证规则
-const rules = ref({});
 
-//验证用户名是否唯一
 const checkUsername = async (rule: any, value: any, callback: any) => {
   try {
-    const resp: any = await adminApi.checkUsername({ 'username': value });
+    await adminApi.checkUsername({ 'username': value });
     callback();
   } catch (e: any) {
-    callback(new Error(e.data.message));
+    callback(new Error(e.data?.message || 'check failed'));
   }
 };
 
-//手机号格式验证
-var checkPhone = (rule: any, value: any, callback: any) => {
+const checkPhone = (rule: any, value: any, callback: any) => {
   const phoneReg = /^1[34578]\d{9}$/;
   if (!value) {
-    return callback(new Error('手机号不能为空'))
+    return callback(new Error(t('formRules.phoneEmpty')))
   }
   setTimeout(() => {
     if (!Number.isInteger(+value)) {
-      callback(new Error('请输入数字值'))
+      callback(new Error(t('formRules.phoneDigits')))
     } else {
       if (phoneReg.test(value)) {
         callback()
       } else {
-        callback(new Error('手机号格式不正确'))
+        callback(new Error(t('formRules.phoneInvalid')))
       }
     }
   }, 100);
 };
 
-
-//新增时表单验证规则
-const addrules = {
-  username: [{ required: true, message: '请输入用户名', trigger: "blur" },
+const rules = computed(() => {
+  const add = {
+    username: [{ required: true, message: t('formRules.userRequired'), trigger: "blur" },
       { validator: checkUsername, trigger: 'blur' }
     ],
-  userpwd: [{ required: true, message: '请输入密码', trigger: "blur" }],
-  name: [{ required: true, message: '请输入姓名', trigger: "blur" }],
-  sex: [{ required: true, message: '请选择性别', trigger: "blur" }],
-  tel: [{ required: true, message: '请输入电话', trigger: "blur" },
+    userpwd: [{ required: true, message: t('formRules.pwdRequired'), trigger: "blur" }],
+    name: [{ required: true, message: t('formRules.nameRequired'), trigger: "blur" }],
+    sex: [{ required: true, message: t('formRules.sexRequired'), trigger: "blur" }],
+    tel: [{ required: true, message: t('formRules.telRequired'), trigger: "blur" },
       { validator: checkPhone, trigger: 'blur' }
     ]
   };
-//修改时表单验证规则
-const updaterules = {
-  username: [{ required: true, message: '请输入用户名', trigger: "blur" }],
-  userpwd: [{ required: true, message: '请输入密码', trigger: "blur" }],
-  name: [{ required: true, message: '请输入姓名', trigger: "blur" }],
-  sex: [{ required: true, message: '请选择性别', trigger: "blur" }],
-  tel: [{ required: true, message: '请输入电话', trigger: "blur" },
+  const update = {
+    username: [{ required: true, message: t('formRules.userRequired'), trigger: "blur" }],
+    userpwd: [{ required: true, message: t('formRules.pwdRequired'), trigger: "blur" }],
+    name: [{ required: true, message: t('formRules.nameRequired'), trigger: "blur" }],
+    sex: [{ required: true, message: t('formRules.sexRequired'), trigger: "blur" }],
+    tel: [{ required: true, message: t('formRules.telRequired'), trigger: "blur" },
       { validator: checkPhone, trigger: 'blur' }
     ]
   };
-//保存表单
+  return ruleMode.value === 'add' ? add : update;
+});
+
 const onSubmit = () => {
   formRef.value
       .validate()
       .then(async () => {
-        //显示按钮加载状态
         btnLoading.value = true;
         try {
-          //如果存在id 就修改，没有id 就是新增
           if (form.id) {
-            //调用修改管理员接口修改管理员信息
             await adminApi.update(form);
           } else {
-            //调用新增管理员接口修改管理员信息
             await adminApi.add(form);
           }
-          ElMessage.success(`${form.id ? '修改' : '添加'}成功`);
-          //触发父组件中的 refresh 事件
+          ElMessage.success(form.id ? t('news.saveOkEdit') : t('news.saveOkAdd'));
           emit('refresh');
-          //关闭窗口
           onClose();
         } catch (error: any) {
           ElMessage.error(error.toString());
         } finally {
-          //隐藏按钮加载状态
           btnLoading.value = false;
         }
       })
-      .catch((error: any) => {
-        //ElMessage.error('表单验证错误，请仔细填写表单数据!');
-      });
+      .catch(() => {});
 }
 </script>

demo-vue/src/views/admin/List.vue

@@ -2,18 +2,18 @@
   <div>
     <el-form :inline="true" ref="dataForm">
       <el-form-item prop="name">
-        <el-input placeholder="姓名" v-model="queryForm.name" class="input" clearable="clearable" />
+        <el-input :placeholder="t('common.name')" v-model="queryForm.name" class="input" clearable="clearable" />
       </el-form-item>
       <el-form-item prop="tel">
-        <el-input placeholder="电话" v-model="queryForm.tel" class="input" clearable="clearable" />
+        <el-input :placeholder="t('common.phone')" v-model="queryForm.tel" class="input" clearable="clearable" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSearch()">查询</el-button>
+        <el-button type="primary" @click="onSearch()">{{ t('common.search') }}</el-button>
         <el-button type="primary" @click="add()">
-          新增
+          {{ t('common.add') }}
         </el-button>
         <el-button type="danger" @click="confirmDelete()">
-          批量删除
+          {{ t('common.batchDelete') }}
         </el-button>
       </el-form-item>
     </el-form>
@@ -21,24 +21,24 @@
     <el-table @selection-change="handleSelectionChange" :data="datalist" v-loading="listLoading" border :header-cell-style="{ 'background-color': '#f5f7fa' }"
               style="width: 100%;">
       <el-table-column type="selection" header-align="center" align="center" width="50" />
-      <el-table-column prop="username" header-align="center" align="center" label="用户名" />
-      <el-table-column prop="name" header-align="center" align="center" label="姓名" />
-      <el-table-column prop="sex" header-align="center" align="center" label="性别" />
-      <el-table-column prop="tel" header-align="center" align="center" label="电话" />
-      <el-table-column header-align="center" align="center" width="150" label="操作">
+      <el-table-column prop="username" header-align="center" align="center" :label="t('common.username')" />
+      <el-table-column prop="name" header-align="center" align="center" :label="t('common.name')" />
+      <el-table-column prop="sex" header-align="center" align="center" :label="t('common.sex')" />
+      <el-table-column prop="tel" header-align="center" align="center" :label="t('common.phone')" />
+      <el-table-column header-align="center" align="center" width="150" :label="t('common.operation')">
         <template #default="scope">
           <el-button type="text" @click="update(scope.row)">
-            修改
+            {{ t('common.edit') }}
           </el-button>
           <el-button type="text" @click="confirmDelete(scope.row.id)">
-            删除
+            {{ t('common.delete') }}
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <el-pagination @current-change="handleCurrentChange" :current-page="queryForm.pagenum"
-                   :page-size="queryForm.PAGE_SIZE" background layout="total, prev, pager, next, jumper" :total="total"
+                   :page-size="queryForm.pagesize" background layout="total, prev, pager, next, jumper" :total="total"
                    style="float:right;margin:10px 20px 20px 0;">
     </el-pagination>
     <AddorUpdate ref="operateRef" @refresh="getlist" />
@@ -46,92 +46,67 @@
 </template>
 
 <script setup>
-//导入需要的功能或数据
 import { reactive, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { adminApi } from '@/api/admin-api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import Constants from '@/utils/constants';
 import AddorUpdate from './Addorupdate.vue';
-//定义相关变量
-//列表加载状态
+
+const { t } = useI18n();
+
 const listLoading = ref(false);
-//列表数据
 const datalist = ref([]);
-//记录总条数
 const total = ref(0);
-//选择的记录
 const multipleSelection = ref([])
-//查询表单初始值
 const queryFormState = {
   name: '',
   tel: '',
   pagenum: 1,
   pagesize: Constants.PAGE_SIZE,
 };
-//查询表单
 const queryForm = reactive({ ...queryFormState });
-//调用后台接口查询列表数据
+
 async function getlist() {
   try {
-    //先将加载状态设置为 true  页面变成加载中状态
     listLoading.value = true;
-    //调用后台查询管理员列表接口
     let responseModel = await adminApi.queryPageList(queryForm, queryForm.pagenum, queryForm.pagesize);
-    //定义 list 变量接收 后台返回的管理员 list数据
     const list = responseModel.data.list;
-    //设置记录总条数
     total.value = responseModel.data.total;
-    //设置列表数据
     datalist.value = list;
   } catch (e) {
-    // ElMessage.error(e.toString());
+    console.error('getlist failed', e);
   } finally {
-    //将加载状态设置为 false  将页面的加载中隐藏
     listLoading.value = false;
   }
 }
 
-// 点击查询
 function onSearch() {
-  //设置当前页码为1
-  queryForm.pageNum = 1;
-  //调用后台接口查询列表数据
+  queryForm.pagenum = 1;
   getlist();
 }
 
-//点击分页查询
 function handleCurrentChange(val) {
-  //设置当前页码为点击的页码
   queryForm.pagenum = val;
-  //调用后台接口查询列表数据
   getlist();
 }
 
-//组件渲染完成后立即调用一次查询列表
 onMounted(getlist);
-// 定义引用新增修改组件的响应式变量
 const operateRef = ref();
-//新增
 function add() {
-  //调用组件的 showModal 方法
   operateRef.value.showModal();
 }
-//修改
 function update(row) {
-  //调用组件的 showModal 方法
   operateRef.value.showModal(row);
 }
-//多选框 状态改变时调用本方法
 function handleSelectionChange(val) {
   multipleSelection.value = val
 }
 
-
-// --------------------------- 删除 ---------------------------
 function confirmDelete(id) {
-  ElMessageBox.confirm('确定要删除吗？', '确定删除', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(t('admin.delConfirm'), t('admin.delTitle'), {
+    confirmButtonText: t('common.confirm'),
+    cancelButtonText: t('common.cancel'),
     type: 'warning'
   }).then(() => {
     del(id)
@@ -143,15 +118,15 @@ async function del(id) {
     listLoading.value = true;
     let ids = id ? [id] : multipleSelection.value.map(item => item.id);
     if (ids.length == 0) {
-      ElMessage.warning('请选择需要删除的记录');
+      ElMessage.warning(t('admin.delWarn'));
     } else {
       await adminApi.delete(ids.toString());
-      ElMessage.success('删除成功');
+      ElMessage.success(t('admin.delOk'));
       getlist();
     }
 
   } catch (e) {
-
+    console.error('delete failed', e);
   } finally {
     listLoading.value = false;
   }

demo-vue/src/views/admin/Login.vue

@@ -8,7 +8,7 @@
             <div style="text-align: center; padding-bottom: 25px;">
               <img alt="logo" class="login-logo" src="@/assets/images/bg2.jpg">
             </div>
-            <span class="login-title"> 首达特后台管理系统 </span>
+            <span class="login-title"> {{ t('admin.loginTitle') }} </span>
           </div>
         </div>
 
@@ -22,7 +22,7 @@
                   v-model="form.username"
                   :prefix-icon="User"
                   style="width: 368px; height: 40px; font-size: 16px;"
-                  placeholder="请输入用户名"
+                  :placeholder="t('admin.plUser')"
               />
             </el-form-item>
 
@@ -32,7 +32,7 @@
                   v-model="form.userpwd"
                   :prefix-icon="Lock"
                   style="width: 368px; height: 40px; font-size: 16px;"
-                  placeholder="请输入密码"
+                  :placeholder="t('admin.plPwd')"
                   show-password
                   type="password"
               />
@@ -45,7 +45,7 @@
                   :loading="btnLoading"
                   @click="onSubmit"
               >
-                登 录
+                {{ t('admin.login') }}
               </el-button>
             </el-form-item>
 
@@ -57,14 +57,16 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { User, Lock } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { adminApi } from '@/api/admin-api';
 import { useAdminStore } from '@/stores/admin';
 
 const router = useRouter();
+const { t } = useI18n();
 const formRef = ref();
 const btnLoading = ref(false);
 
@@ -75,11 +77,10 @@ const form = reactive({
   captchaCode: ''
 });
 
-// 6. 定义验证规则
-const rules = {
-  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  userpwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-};
+const rules = computed(() => ({
+  username: [{ required: true, message: t('formRules.userRequired'), trigger: 'blur' }],
+  userpwd: [{ required: true, message: t('formRules.pwdRequired'), trigger: 'blur' }],
+}));
 
 // 7. 登录提交方法
 const onSubmit = () => {
@@ -99,13 +100,13 @@ const onSubmit = () => {
           localStorage.setItem('pdmtoken', res.data.token);
         }
 
-        ElMessage.success('登录成功');
+        ElMessage.success(t('admin.ok'));
         //更新用户信息到pinia
         useAdminStore().setAdminLoginInfo(res.data);
         // 登录成功后跳转到 index 页面
         router.push('/index');
       } catch (error: any) {
-        ElMessage.error(error.message || '登录失败');
+        ElMessage.error(error.message || t('admin.fail'));
       } finally {
         btnLoading.value = false;
       }

demo-vue/src/views/admin/WelcomeView.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="welcome-view">
-    欢迎使用首达特后台管理系统
+    {{ t('admin.welcome') }}
   </div>
 </template>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+</script>
 <style lang="less" scoped>
 .welcome-view {
   display: flex;

demo-vue/src/views/industry/IndustryAddorUpdate.vue

@@ -1,81 +1,70 @@
 <template>
-  <!--新增或修改行业动态信息表单-->
-  <el-dialog :title="!form.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
+  <el-dialog :title="!form.id ? t('common.addShort') : t('common.edit')" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
              width="60%">
     <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
-      <el-form-item label="动态标题" prop="title">
-        <el-input v-model="form.title" style="width:80%" clearable placeholder="请输入动态标题" />
+      <el-form-item :label="t('industry.colTitle')" prop="title">
+        <el-input v-model="form.title" style="width:80%" clearable :placeholder="t('industry.plTitle')" />
       </el-form-item>
-      <el-form-item label="动态内容" prop="content">
-        <el-input v-model="form.content" type="textarea" :rows="8" style="width:80%" clearable placeholder="请输入动态内容" />
+      <el-form-item :label="t('industry.content')" prop="content">
+        <el-input v-model="form.content" type="textarea" :rows="8" style="width:80%" clearable :placeholder="t('industry.plContent')" />
       </el-form-item>
-      <el-form-item label="发布日期" prop="publishDate">
+      <el-form-item :label="t('industry.labelPublishDate')" prop="publishDate">
         <el-date-picker
             v-model="form.publishDate"
             type="date"
-            placeholder="选择日期"
+            :placeholder="t('news.selectDate')"
             style="width: 80%"
             value-format="YYYY-MM-DD"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="form.status" placeholder="请选择" style="width: 80%">
-          <el-option label="启用" :value="1"> </el-option>
-          <el-option label="禁用" :value="0"> </el-option>
+      <el-form-item :label="t('common.status')" prop="status">
+        <el-select v-model="form.status" :placeholder="t('common.selectPlaceholder')" style="width: 80%">
+          <el-option :label="t('common.enable')" :value="1"> </el-option>
+          <el-option :label="t('common.disable')" :value="0"> </el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" :loading="btnLoading" @click="onSubmit">确定</el-button>
+        <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="btnLoading" @click="onSubmit">{{ t('common.confirm') }}</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-//导入文件
 import { ElMessage } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { industryApi } from '@/api/industry-api.ts';
 
-// 定义公开父组件调用的方法
+const { t } = useI18n();
+
 defineExpose({
   showModal,
 });
 
-//定义发射给父组件的方法
 const emit = defineEmits(['refresh']);
-// 是否显示新增修改窗口
 const visible = ref(false);
-//保存按钮加载中显示状态
 const btnLoading = ref(false);
 
-//显示窗口
 function showModal(row: any) {
   if (row) {
-    rules.value = updaterules;
     Object.assign(form, row);
   } else {
-    rules.value = addrules;
     Object.assign(form, formDefault);
-    form.status = 1; // 默认启用状态
+    form.status = 1;
   }
   visible.value = true;
 }
 
-//关闭窗口
 function onClose() {
   Object.assign(form, formDefault);
   visible.value = false;
 }
 
-// --------------------- 表单 ---------------------
-
-// 表单组件
 const formRef = ref();
-//表单初始值
 const formDefault = {
   id: undefined,
   title: undefined,
@@ -83,56 +72,35 @@ const formDefault = {
   publishDate: undefined,
   status: 1,
 };
-//表单
 let form = reactive({ ...formDefault });
-//验证规则
-const rules = ref({});
 
-//新增时表单验证规则
-const addrules = {
-  title: [{ required: true, message: '请输入动态标题', trigger: "blur" }],
-  content: [{ required: true, message: '请输入动态内容', trigger: "blur" }],
-  publishDate: [{ required: true, message: '请选择发布日期', trigger: "change" }],
-  status: [{ required: true, message: '请选择状态', trigger: "change" }]
-};
-//修改时表单验证规则
-const updaterules = {
-  title: [{ required: true, message: '请输入动态标题', trigger: "blur" }],
-  content: [{ required: true, message: '请输入动态内容', trigger: "blur" }],
-  publishDate: [{ required: true, message: '请选择发布日期', trigger: "change" }],
-  status: [{ required: true, message: '请选择状态', trigger: "change" }]
-};
+const rules = computed(() => ({
+  title: [{ required: true, message: t('industry.plTitle'), trigger: "blur" }],
+  content: [{ required: true, message: t('industry.plContent'), trigger: "blur" }],
+  publishDate: [{ required: true, message: t('news.pickDate'), trigger: "change" }],
+  status: [{ required: true, message: t('news.pickStatus'), trigger: "change" }]
+}));
 
-//保存表单
 const onSubmit = () => {
   formRef.value
       .validate()
       .then(async () => {
-        //显示按钮加载状态
         btnLoading.value = true;
         try {
-          //如果存在id 就修改，没有id 就是新增
           if (form.id) {
-            //调用修改行业动态接口修改动态信息
             await industryApi.update(form);
           } else {
-            //调用新增行业动态接口修改动态信息
             await industryApi.add(form);
           }
-          ElMessage.success(`${form.id ? '修改' : '添加'}成功`);
-          //触发父组件中的 refresh 事件
+          ElMessage.success(form.id ? t('news.saveOkEdit') : t('news.saveOkAdd'));
           emit('refresh');
-          //关闭窗口
           onClose();
         } catch (error: any) {
           ElMessage.error(error.toString());
         } finally {
-          //隐藏按钮加载状态
           btnLoading.value = false;
         }
       })
-      .catch((error: any) => {
-        //ElMessage.error('表单验证错误，请仔细填写表单数据!');
-      });
+      .catch(() => {});
 }
 </script>

demo-vue/src/views/industry/IndustryDetail.vue

@@ -1,5 +1,3 @@
-NEW_FILE_CODE
-
 <template>
   <div class="industry-detail-page">
     <HeaderComponent />
@@ -8,19 +6,19 @@ NEW_FILE_CODE
       <section class="detail-banner">
         <div class="banner-overlay">
           <div class="banner-wrapper">
-            <h1 class="banner-title">行业动态详情</h1>
-            <p class="banner-subtitle">Industry News Detail</p>
+            <h1 class="banner-title">{{ t('industry.detailTitle') }}</h1>
+            <p class="banner-subtitle">{{ t('industry.detailTitleSub') }}</p>
           </div>
         </div>
       </section>
 
       <section class="breadcrumb-section">
         <div class="breadcrumb-wrapper">
-          <span class="breadcrumb-item" @click="goHome">首页</span>
+          <span class="breadcrumb-item" @click="goHome">{{ t('nav.home') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item" @click="goBack">行业动态</span>
+          <span class="breadcrumb-item" @click="goBack">{{ t('industry.listBanner') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item active">详情</span>
+          <span class="breadcrumb-item active">{{ t('industry.breadcrumbDetail') }}</span>
         </div>
       </section>
 
@@ -31,11 +29,11 @@ NEW_FILE_CODE
             <div class="article-meta">
               <span class="meta-item">
                 <el-icon><Calendar /></el-icon>
-                发布时间：{{ formatDate(industryDetail.publishDate) }}
+                {{ t('industry.publicTime') }}{{ formatDate(industryDetail.publishDate) }}
               </span>
               <span class="meta-item">
                 <el-icon><View /></el-icon>
-                访问量：{{ industryDetail.views }}
+                {{ t('common.viewsLabel') }}{{ industryDetail.views }}
               </span>
             </div>
             <div class="article-body" v-html="industryDetail.content"></div>
@@ -44,7 +42,7 @@ NEW_FILE_CODE
           <div class="back-button">
             <el-button type="primary" @click="goBack">
               <el-icon><Back /></el-icon>
-              返回列表
+              {{ t('industry.returnList') }}
             </el-button>
           </div>
         </div>
@@ -58,6 +56,7 @@ NEW_FILE_CODE
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { Calendar, View, Back } from '@element-plus/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
@@ -66,6 +65,7 @@ import { industryApi } from '@/api/industry-api.ts'
 
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 
 // 行业动态详情数据
 const industryDetail = ref<any>({
@@ -94,7 +94,7 @@ const getIndustryDetail = async (id: any) => {
       industryDetail.value = response.data.list[0]
     }
   } catch (error: any) {
-    console.error('获取行业动态详情失败:', error)
+    console.error(t('industry.fetchDetailFail'), error)
   } finally {
     loading.value = false
   }

demo-vue/src/views/industry/IndustryList.vue

@@ -1,25 +1,23 @@
 <template>
   <div>
-    <!-- 查询表单 -->
     <el-form :inline="true" ref="dataForm">
       <el-form-item prop="title">
-        <el-input placeholder="行业动态标题" v-model="queryForm.title" class="input" clearable />
+        <el-input :placeholder="t('industry.listTitle')" v-model="queryForm.title" class="input" clearable />
       </el-form-item>
       <el-form-item prop="status">
-        <el-select v-model="queryForm.status" placeholder="状态" class="input" clearable>
-          <el-option label="启用" :value="1" />
-          <el-option label="禁用" :value="0" />
+        <el-select v-model="queryForm.status" :placeholder="t('common.status')" class="input" clearable>
+          <el-option :label="t('common.enable')" :value="1" />
+          <el-option :label="t('common.disable')" :value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSearch()">查询</el-button>
-        <el-button type="primary" @click="add()">新增</el-button>
-        <el-button type="danger" @click="confirmDelete()">批量删除</el-button>
+        <el-button type="primary" @click="onSearch()">{{ t('common.search') }}</el-button>
+        <el-button type="primary" @click="add()">{{ t('common.add') }}</el-button>
+        <el-button type="danger" @click="confirmDelete()">{{ t('common.batchDelete') }}</el-button>
       </el-form-item>
     </el-form>
     <el-divider border-style="dashed" />
 
-    <!-- 表格 -->
     <el-table
         @selection-change="handleSelectionChange"
         :data="datalist"
@@ -29,27 +27,26 @@
         style="width: 100%;"
     >
       <el-table-column type="selection" header-align="center" align="center" width="50" />
-      <el-table-column prop="title" header-align="center" align="center" label="动态标题" width="200" />
-      <el-table-column prop="content" header-align="center" align="center" label="动态内容" show-overflow-tooltip />
-      <el-table-column prop="views" header-align="center" align="center" label="浏览量" width="80" />
-      <el-table-column prop="publishDate" header-align="center" align="center" label="发布日期" width="120" />
-      <el-table-column prop="status" header-align="center" align="center" label="状态" width="80">
+      <el-table-column prop="title" header-align="center" align="center" :label="t('industry.colTitle')" width="200" />
+      <el-table-column prop="content" header-align="center" align="center" :label="t('industry.content')" show-overflow-tooltip />
+      <el-table-column prop="views" header-align="center" align="center" :label="t('news.views')" width="80" />
+      <el-table-column prop="publishDate" header-align="center" align="center" :label="t('industry.labelPublishDate')" width="120" />
+      <el-table-column prop="status" header-align="center" align="center" :label="t('common.status')" width="80">
         <template #default="scope">
           <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-            {{ scope.row.status === 1 ? '启用' : '禁用' }}
+            {{ scope.row.status === 1 ? t('common.enable') : t('common.disable') }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" width="160" />
-      <el-table-column header-align="center" align="center" width="150" label="操作">
+      <el-table-column prop="createTime" header-align="center" align="center" :label="t('common.createTime')" width="160" />
+      <el-table-column header-align="center" align="center" width="150" :label="t('common.operation')">
         <template #default="scope">
-          <el-button type="text" @click="update(scope.row)">修改</el-button>
-          <el-button type="text" @click="confirmDelete(scope.row.id)">删除</el-button>
+          <el-button type="text" @click="update(scope.row)">{{ t('common.edit') }}</el-button>
+          <el-button type="text" @click="confirmDelete(scope.row.id)">{{ t('common.delete') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- 分页 -->
     <el-pagination
         @current-change="handleCurrentChange"
         :current-page="queryForm.pagenum"
@@ -64,124 +61,93 @@
   </div>
 </template>
 
-<script setup>
-//导入需要的功能或数据
+<script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
-import { industryApi } from '@/api/industry-api';
+import { useI18n } from 'vue-i18n';
+import { industryApi } from '@/api/industry-api.ts';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import Constants from '@/utils/constants.ts';
 import AddorUpdate from './IndustryAddorUpdate.vue';
 
-//定义相关变量
-//列表加载状态
-const listLoading = ref(false);
-//列表数据
-const datalist = ref([]);
-//记录总条数
-const total = ref(0);
-//选择的记录
-const multipleSelection = ref([])
+const { t } = useI18n();
+
+const listLoading = ref(false);
+const datalist = ref<any[]>([]);
+const total = ref(0);
+const multipleSelection = ref<any[]>([]);
 
-//查询表单初始值
 const queryFormState = {
   title: '',
   status: undefined,
   pagenum: 1,
   pagesize: Constants.PAGE_SIZE,
 };
-//查询表单
 const queryForm = reactive({ ...queryFormState });
 
-//调用后台接口查询列表数据
 async function getlist() {
   try {
-    //先将加载状态设置为 true  页面变成加载中状态
     listLoading.value = true;
-    //调用后台查询行业动态列表接口
-    let responseModel = await industryApi.queryPageList(queryForm, queryForm.pagenum, queryForm.pagesize);
-    //定义 list 变量接收 后台返回的动态 list数据
+    const responseModel = await industryApi.queryPageList(queryForm, queryForm.pagenum, queryForm.pagesize);
     const list = responseModel.data.list;
-    //设置记录总条数
     total.value = responseModel.data.total;
-    //设置列表数据
     datalist.value = list;
-  } catch (e) {
+  } catch (e: any) {
     ElMessage.error(e.toString());
   } finally {
-    //将加载状态设置为 false  将页面的加载中隐藏
     listLoading.value = false;
   }
 }
 
-// 点击查询
 function onSearch() {
-  //设置当前页码为1
   queryForm.pagenum = 1;
-  //调用后台接口查询列表数据
   getlist();
 }
 
-//点击分页查询
-function handleCurrentChange(val) {
-  //设置当前页码为点击的页码
+function handleCurrentChange(val: number) {
   queryForm.pagenum = val;
-  //调用后台接口查询列表数据
   getlist();
 }
 
-//组件渲染完成后立即调用一次查询列表
 onMounted(getlist);
 
-// 定义引用新增修改组件的响应式变量
-const operateRef = ref();
+const operateRef = ref<InstanceType<typeof AddorUpdate> | null>(null);
 
-//新增
 function add() {
-  //调用组件的 showModal 方法
-  operateRef.value.showModal();
+  operateRef.value?.showModal();
 }
 
-//修改
-function update(row) {
-  //调用组件的 showModal 方法
-  operateRef.value.showModal(row);
+function update(row: any) {
+  operateRef.value?.showModal(row);
 }
 
-//多选框 状态改变时调用本方法
-function handleSelectionChange(val) {
-  multipleSelection.value = val
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val;
 }
 
-// --------------------------- 删除 ---------------------------
-function confirmDelete(id) {
-  ElMessageBox.confirm('确定要删除吗？', '确定删除', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+function confirmDelete(id?: number) {
+  ElMessageBox.confirm(t('admin.delConfirm'), t('admin.delTitle'), {
+    confirmButtonText: t('common.confirm'),
+    cancelButtonText: t('common.cancel'),
     type: 'warning'
   }).then(() => {
-    del(id)
-  })
+    void del(id);
+  }).catch(() => {});
 }
 
-async function del(id) {
+async function del(id?: number) {
   try {
     listLoading.value = true;
-    let ids = id ? id : multipleSelection.value.map(item => item.id);
+    const ids = id !== undefined && id !== null ? [id] : multipleSelection.value.map((item: any) => item.id);
     if (ids.length == 0) {
-      ElMessage.warning('请选择需要删除的记录');
+      ElMessage.warning(t('admin.delWarn'));
     } else {
-      // 动态删除接口只支持单条删除
-      if (Array.isArray(ids)) {
-        for (let id of ids) {
-          await industryApi.delete(id);
+      for (const delId of ids) {
+        await industryApi.delete(delId);
       }
-      } else {
-        await industryApi.delete(ids);
-      }
-      ElMessage.success('删除成功');
+      ElMessage.success(t('admin.delOk'));
       getlist();
     }
-  } catch (e) {
+  } catch (e: any) {
     ElMessage.error(e.toString());
   } finally {
     listLoading.value = false;

demo-vue/src/views/industry/IndustryPage.vue

@@ -1,5 +1,3 @@
-NEW_FILE_CODE
-
 <template>
   <div class="industry-page">
     <HeaderComponent />
@@ -8,17 +6,17 @@ NEW_FILE_CODE
       <section class="industry-banner">
         <div class="banner-overlay">
           <div class="banner-wrapper">
-            <h1 class="banner-title">行业动态</h1>
-            <p class="banner-subtitle">Industry News</p>
+            <h1 class="banner-title">{{ t('industry.listBanner') }}</h1>
+            <p class="banner-subtitle">{{ t('industry.listBannerSub') }}</p>
           </div>
         </div>
       </section>
 
       <section class="breadcrumb-section">
         <div class="breadcrumb-wrapper">
-          <span class="breadcrumb-item">首页</span>
+          <span class="breadcrumb-item">{{ t('nav.home') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item active">行业动态</span>
+          <span class="breadcrumb-item active">{{ t('nav.industryNews') }}</span>
         </div>
       </section>
 
@@ -30,7 +28,7 @@ NEW_FILE_CODE
               <div class="industry-meta">
                 <span class="meta-item">
                   <el-icon><View /></el-icon>
-                  访问量：{{ item.views }}
+                  {{ t('common.viewsLabel') }}{{ item.views }}
                 </span>
               </div>
             </div>
@@ -49,10 +47,10 @@ NEW_FILE_CODE
               <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">
                 <el-icon><ArrowRight /></el-icon>
               </button>
-              <span class="jump-text">跳往</span>
+              <span class="jump-text">{{ t('common.goTo') }}</span>
               <input type="number" class="page-input" v-model.number="jumpPage" @keyup.enter="jumpToPage" min="1" :max="totalPages" />
-              <span class="jump-text">前往</span>
-              <span class="page-info">页</span>
+              <span class="jump-text">{{ t('common.toPage') }}</span>
+              <span class="page-info">{{ t('common.pageUnit') }}</span>
             </div>
           </div>
         </div>
@@ -66,12 +64,14 @@ NEW_FILE_CODE
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { View, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 import { post } from '@/utils/request'
 
 const router = useRouter()
+const { t } = useI18n()
 
 // 行业动态列表数据
 const industryList = ref<any[]>([])
@@ -124,7 +124,7 @@ const getIndustryList = async (page: number = 1) => {
     // 设置总页数
     totalPages.value = Math.ceil(response.data.total / pageSize)
   } catch (error: any) {
-    console.error('获取行业动态列表失败:', error)
+    console.error(t('industry.fetchFail'), error)
     industryList.value = []
   }
 }

demo-vue/src/views/news/ NewsDetail.vue

@@ -7,8 +7,8 @@
       <section class="news-banner">
         <div class="banner-overlay">
           <div class="banner-wrapper">
-            <h1 class="banner-title">新闻详情</h1>
-            <p class="banner-subtitle">News Detail</p>
+            <h1 class="banner-title">{{ t('news.newsDetail') }}</h1>
+            <p class="banner-subtitle">{{ t('news.detailBannerSub') }}</p>
           </div>
         </div>
       </section>
@@ -16,11 +16,11 @@
       <!-- 面包屑导航 -->
       <section class="breadcrumb-section">
         <div class="breadcrumb-wrapper">
-          <span class="breadcrumb-item clickable" @click="$router.push('/')">首页</span>
+          <span class="breadcrumb-item clickable" @click="$router.push('/')">{{ t('nav.home') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item clickable" @click="$router.push('/news')">新闻中心</span>
+          <span class="breadcrumb-item clickable" @click="$router.push('/news')">{{ t('nav.newsHub') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item active">新闻详情</span>
+          <span class="breadcrumb-item active">{{ t('news.newsDetail') }}</span>
         </div>
       </section>
 
@@ -34,11 +34,11 @@
           <div class="detail-meta">
             <span class="meta-item">
               <el-icon><Calendar /></el-icon>
-              发布日期：{{ formatDate(newsDetail.publishDate || newsDetail.createTime) }}
+              {{ t('news.metaDateLabel') }}{{ formatDate(newsDetail.publishDate || newsDetail.createTime) }}
             </span>
             <span class="meta-item">
               <el-icon><View /></el-icon>
-              访问量：{{ newsDetail.views || 0 }}
+              {{ t('common.viewsLabel') }}{{ newsDetail.views || 0 }}
             </span>
           </div>
 
@@ -53,7 +53,7 @@
           <div class="back-section">
             <el-button type="primary" @click="$router.push('/news')">
               <el-icon><Back /></el-icon>
-              返回新闻列表
+              {{ t('news.backList') }}
             </el-button>
           </div>
         </div>
@@ -67,12 +67,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { View, Calendar, Back } from '@element-plus/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 import { post } from '@/utils/request'
 
 const route = useRoute()
+const { t } = useI18n()
 const newsDetail = ref<any>({
   title: '',
   content: '',
@@ -85,7 +87,7 @@ const newsDetail = ref<any>({
 const getNewsDetail = async () => {
   const id = route.query.id
   if (!id) {
-    console.error('未找到新闻ID')
+    console.error(t('news.noId'))
     return
   }
 
@@ -102,7 +104,7 @@ const getNewsDetail = async () => {
       await increaseViews(id)
     }
   } catch (error: any) {
-    console.error('获取新闻详情失败:', error)
+    console.error(t('news.fetchDetailFail'), error)
   }
 }
 
@@ -115,7 +117,7 @@ const increaseViews = async (id: any) => {
     // 前端同步更新访问量显示
     newsDetail.value.views = (newsDetail.value.views || 0) + 1
   } catch (error: any) {
-    console.error('增加访问量失败:', error)
+    console.error(t('news.viewsIncrFail'), error)
   }
 }
 

demo-vue/src/views/news/NewsAddorUpdate.vue

@@ -1,81 +1,70 @@
 <template>
-  <!--新增或修改新闻信息表单-->
-  <el-dialog :title="!form.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
+  <el-dialog :title="!form.id ? t('common.addShort') : t('common.edit')" :close-on-click-modal="false" v-model="visible" :destroy-on-close="true"
              width="60%">
     <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
-      <el-form-item label="新闻标题" prop="title">
-        <el-input v-model="form.title" style="width:80%" clearable placeholder="请输入新闻标题" />
+      <el-form-item :label="t('news.listTitle')" prop="title">
+        <el-input v-model="form.title" style="width:80%" clearable :placeholder="t('news.enterTitle')" />
       </el-form-item>
-      <el-form-item label="新闻内容" prop="content">
-        <el-input v-model="form.content" type="textarea" :rows="8" style="width:80%" clearable placeholder="请输入新闻内容" />
+      <el-form-item :label="t('news.content')" prop="content">
+        <el-input v-model="form.content" type="textarea" :rows="8" style="width:80%" clearable :placeholder="t('news.enterContent')" />
       </el-form-item>
-      <el-form-item label="发布日期" prop="publishDate">
+      <el-form-item :label="t('news.labelPublishDate')" prop="publishDate">
         <el-date-picker
             v-model="form.publishDate"
             type="date"
-            placeholder="选择日期"
+            :placeholder="t('news.selectDate')"
             style="width: 80%"
             value-format="YYYY-MM-DD"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="form.status" placeholder="请选择" style="width: 80%">
-          <el-option label="启用" :value="1"> </el-option>
-          <el-option label="禁用" :value="0"> </el-option>
+      <el-form-item :label="t('common.status')" prop="status">
+        <el-select v-model="form.status" :placeholder="t('common.selectPlaceholder')" style="width: 80%">
+          <el-option :label="t('common.enable')" :value="1"> </el-option>
+          <el-option :label="t('common.disable')" :value="0"> </el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" :loading="btnLoading" @click="onSubmit">确定</el-button>
+        <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="btnLoading" @click="onSubmit">{{ t('common.confirm') }}</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-//导入文件
 import { ElMessage } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { newsApi } from '@/api/news-api';
 
-// 定义公开父组件调用的方法
+const { t } = useI18n();
+
 defineExpose({
   showModal,
 });
 
-//定义发射给父组件的方法
 const emit = defineEmits(['refresh']);
-// 是否显示新增修改窗口
 const visible = ref(false);
-//保存按钮加载中显示状态
 const btnLoading = ref(false);
 
-//显示窗口
 function showModal(row: any) {
   if (row) {
-    rules.value = updaterules;
     Object.assign(form, row);
   } else {
-    rules.value = addrules;
     Object.assign(form, formDefault);
-    form.status = 1; // 默认启用状态
+    form.status = 1;
   }
   visible.value = true;
 }
 
-//关闭窗口
 function onClose() {
   Object.assign(form, formDefault);
   visible.value = false;
 }
 
-// --------------------- 表单 ---------------------
-
-// 表单组件
 const formRef = ref();
-//表单初始值
 const formDefault = {
   id: undefined,
   title: undefined,
@@ -83,56 +72,35 @@ const formDefault = {
   publishDate: undefined,
   status: 1,
 };
-//表单
 let form = reactive({ ...formDefault });
-//验证规则
-const rules = ref({});
 
-//新增时表单验证规则
-const addrules = {
-  title: [{ required: true, message: '请输入新闻标题', trigger: "blur" }],
-  content: [{ required: true, message: '请输入新闻内容', trigger: "blur" }],
-  publishDate: [{ required: true, message: '请选择发布日期', trigger: "change" }],
-  status: [{ required: true, message: '请选择状态', trigger: "change" }]
-};
-//修改时表单验证规则
-const updaterules = {
-  title: [{ required: true, message: '请输入新闻标题', trigger: "blur" }],
-  content: [{ required: true, message: '请输入新闻内容', trigger: "blur" }],
-  publishDate: [{ required: true, message: '请选择发布日期', trigger: "change" }],
-  status: [{ required: true, message: '请选择状态', trigger: "change" }]
-};
+const rules = computed(() => ({
+  title: [{ required: true, message: t('news.enterTitle'), trigger: "blur" }],
+  content: [{ required: true, message: t('news.enterContent'), trigger: "blur" }],
+  publishDate: [{ required: true, message: t('news.pickDate'), trigger: "change" }],
+  status: [{ required: true, message: t('news.pickStatus'), trigger: "change" }]
+}));
 
-//保存表单
 const onSubmit = () => {
   formRef.value
       .validate()
       .then(async () => {
-        //显示按钮加载状态
         btnLoading.value = true;
         try {
-          //如果存在id 就修改，没有id 就是新增
           if (form.id) {
-            //调用修改新闻接口修改新闻信息
             await newsApi.update(form);
           } else {
-            //调用新增新闻接口修改新闻信息
             await newsApi.add(form);
           }
-          ElMessage.success(`${form.id ? '修改' : '添加'}成功`);
-          //触发父组件中的 refresh 事件
+          ElMessage.success(form.id ? t('news.saveOkEdit') : t('news.saveOkAdd'));
           emit('refresh');
-          //关闭窗口
           onClose();
         } catch (error: any) {
           ElMessage.error(error.toString());
         } finally {
-          //隐藏按钮加载状态
           btnLoading.value = false;
         }
       })
-      .catch((error: any) => {
-        //ElMessage.error('表单验证错误，请仔细填写表单数据!');
-      });
+      .catch(() => {});
 }
 </script>

demo-vue/src/views/news/NewsList.vue

@@ -1,25 +1,23 @@
 <template>
   <div>
-    <!-- 查询表单 -->
     <el-form :inline="true" ref="dataForm">
       <el-form-item prop="title">
-        <el-input placeholder="新闻标题" v-model="queryForm.title" class="input" clearable />
+        <el-input :placeholder="t('news.listTitle')" v-model="queryForm.title" class="input" clearable />
       </el-form-item>
       <el-form-item prop="status">
-        <el-select v-model="queryForm.status" placeholder="状态" class="input" clearable>
-          <el-option label="启用" :value="1" />
-          <el-option label="禁用" :value="0" />
+        <el-select v-model="queryForm.status" :placeholder="t('common.status')" class="input" clearable>
+          <el-option :label="t('common.enable')" :value="1" />
+          <el-option :label="t('common.disable')" :value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSearch()">查询</el-button>
-        <el-button type="primary" @click="add()">新增</el-button>
-        <el-button type="danger" @click="confirmDelete()">批量删除</el-button>
+        <el-button type="primary" @click="onSearch()">{{ t('common.search') }}</el-button>
+        <el-button type="primary" @click="add()">{{ t('common.add') }}</el-button>
+        <el-button type="danger" @click="confirmDelete()">{{ t('common.batchDelete') }}</el-button>
       </el-form-item>
     </el-form>
     <el-divider border-style="dashed" />
 
-    <!-- 表格 -->
     <el-table
         @selection-change="handleSelectionChange"
         :data="datalist"
@@ -29,27 +27,26 @@
         style="width: 100%;"
     >
       <el-table-column type="selection" header-align="center" align="center" width="50" />
-      <el-table-column prop="title" header-align="center" align="center" label="新闻标题" width="200" />
-      <el-table-column prop="content" header-align="center" align="center" label="新闻内容" show-overflow-tooltip />
-      <el-table-column prop="views" header-align="center" align="center" label="浏览量" width="80" />
-      <el-table-column prop="publishDate" header-align="center" align="center" label="发布日期" width="120" />
-      <el-table-column prop="status" header-align="center" align="center" label="状态" width="80">
+      <el-table-column prop="title" header-align="center" align="center" :label="t('news.listTitle')" width="200" />
+      <el-table-column prop="content" header-align="center" align="center" :label="t('news.content')" show-overflow-tooltip />
+      <el-table-column prop="views" header-align="center" align="center" :label="t('news.views')" width="80" />
+      <el-table-column prop="publishDate" header-align="center" align="center" :label="t('news.labelPublishDate')" width="120" />
+      <el-table-column prop="status" header-align="center" align="center" :label="t('common.status')" width="80">
         <template #default="scope">
           <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-            {{ scope.row.status === 1 ? '启用' : '禁用' }}
+            {{ scope.row.status === 1 ? t('common.enable') : t('common.disable') }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" width="160" />
-      <el-table-column header-align="center" align="center" width="150" label="操作">
+      <el-table-column prop="createTime" header-align="center" align="center" :label="t('common.createTime')" width="160" />
+      <el-table-column header-align="center" align="center" width="150" :label="t('common.operation')">
         <template #default="scope">
-          <el-button type="text" @click="update(scope.row)">修改</el-button>
-          <el-button type="text" @click="confirmDelete(scope.row.id)">删除</el-button>
+          <el-button type="text" @click="update(scope.row)">{{ t('common.edit') }}</el-button>
+          <el-button type="text" @click="confirmDelete(scope.row.id)">{{ t('common.delete') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- 分页 -->
     <el-pagination
         @current-change="handleCurrentChange"
         :current-page="queryForm.pagenum"
@@ -64,124 +61,93 @@
   </div>
 </template>
 
-<script setup>
-//导入需要的功能或数据
+<script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { newsApi } from '@/api/news-api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import Constants from '@/utils/constants';
 import AddorUpdate from './NewsAddorUpdate.vue';
 
-//定义相关变量
-//列表加载状态
-const listLoading = ref(false);
-//列表数据
-const datalist = ref([]);
-//记录总条数
-const total = ref(0);
-//选择的记录
-const multipleSelection = ref([])
+const { t } = useI18n();
+
+const listLoading = ref(false);
+const datalist = ref<any[]>([]);
+const total = ref(0);
+const multipleSelection = ref<any[]>([]);
 
-//查询表单初始值
 const queryFormState = {
   title: '',
   status: undefined,
   pagenum: 1,
   pagesize: Constants.PAGE_SIZE,
 };
-//查询表单
 const queryForm = reactive({ ...queryFormState });
 
-//调用后台接口查询列表数据
 async function getlist() {
   try {
-    //先将加载状态设置为 true  页面变成加载中状态
     listLoading.value = true;
-    //调用后台查询新闻列表接口
-    let responseModel = await newsApi.queryPageList(queryForm, queryForm.pagenum, queryForm.pagesize);
-    //定义 list 变量接收 后台返回的新闻 list数据
+    const responseModel = await newsApi.queryPageList(queryForm, queryForm.pagenum, queryForm.pagesize);
     const list = responseModel.data.list;
-    //设置记录总条数
     total.value = responseModel.data.total;
-    //设置列表数据
     datalist.value = list;
-  } catch (e) {
+  } catch (e: any) {
     ElMessage.error(e.toString());
   } finally {
-    //将加载状态设置为 false  将页面的加载中隐藏
     listLoading.value = false;
   }
 }
 
-// 点击查询
 function onSearch() {
-  //设置当前页码为1
   queryForm.pagenum = 1;
-  //调用后台接口查询列表数据
   getlist();
 }
 
-//点击分页查询
-function handleCurrentChange(val) {
-  //设置当前页码为点击的页码
+function handleCurrentChange(val: number) {
   queryForm.pagenum = val;
-  //调用后台接口查询列表数据
   getlist();
 }
 
-//组件渲染完成后立即调用一次查询列表
 onMounted(getlist);
 
-// 定义引用新增修改组件的响应式变量
-const operateRef = ref();
+const operateRef = ref<InstanceType<typeof AddorUpdate> | null>(null);
 
-//新增
 function add() {
-  //调用组件的 showModal 方法
-  operateRef.value.showModal();
+  operateRef.value?.showModal();
 }
 
-//修改
-function update(row) {
-  //调用组件的 showModal 方法
-  operateRef.value.showModal(row);
+function update(row: any) {
+  operateRef.value?.showModal(row);
 }
 
-//多选框 状态改变时调用本方法
-function handleSelectionChange(val) {
-  multipleSelection.value = val
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val;
 }
 
-// --------------------------- 删除 ---------------------------
-function confirmDelete(id) {
-  ElMessageBox.confirm('确定要删除吗？', '确定删除', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+function confirmDelete(id?: number) {
+  ElMessageBox.confirm(t('admin.delConfirm'), t('admin.delTitle'), {
+    confirmButtonText: t('common.confirm'),
+    cancelButtonText: t('common.cancel'),
     type: 'warning'
   }).then(() => {
-    del(id)
-  })
+    void del(id);
+  }).catch(() => {});
 }
 
-async function del(id) {
+async function del(id?: number) {
   try {
     listLoading.value = true;
-    let ids = id ? id : multipleSelection.value.map(item => item.id);
+    const ids = id !== undefined && id !== null ? [id] : multipleSelection.value.map((item: any) => item.id);
     if (ids.length == 0) {
-      ElMessage.warning('请选择需要删除的记录');
+      ElMessage.warning(t('admin.delWarn'));
     } else {
-      // 新闻删除接口只支持单条删除
-      if (Array.isArray(ids)) {
-        for (let id of ids) {
-          await newsApi.delete(id);
+      for (const delId of ids) {
+        await newsApi.delete(delId);
       }
-      } else {
-        await newsApi.delete(ids);
-      }
-      ElMessage.success('删除成功');
+      ElMessage.success(t('admin.delOk'));
       getlist();
     }
-  } catch (e) {
+  } catch (e: any) {
     ElMessage.error(e.toString());
   } finally {
     listLoading.value = false;

demo-vue/src/views/news/NewsPage.vue

@@ -7,17 +7,17 @@
       <section class="news-banner">
         <div class="banner-overlay">
           <div class="banner-wrapper">
-            <h1 class="banner-title">公司新闻</h1>
-            <p class="banner-subtitle">News</p>
+            <h1 class="banner-title">{{ t('news.publicBanner') }}</h1>
+            <p class="banner-subtitle">{{ t('news.listBannerSub') }}</p>
           </div>
         </div>
       </section>
 
       <section class="breadcrumb-section">
         <div class="breadcrumb-wrapper">
-          <span class="breadcrumb-item">首页</span>
+          <span class="breadcrumb-item">{{ t('nav.home') }}</span>
           <span class="breadcrumb-separator">/</span>
-          <span class="breadcrumb-item active">新闻中心</span>
+          <span class="breadcrumb-item active">{{ t('nav.newsHub') }}</span>
         </div>
       </section>
 
@@ -29,7 +29,7 @@
               <div class="news-meta">
                 <span class="meta-item">
                   <el-icon><View /></el-icon>
-                  访问量：{{ news.views }}
+                  {{ t('common.viewsLabel') }}{{ news.views }}
                 </span>
               </div>
             </div>
@@ -48,10 +48,10 @@
               <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">
                 <el-icon><ArrowRight /></el-icon>
               </button>
-              <span class="jump-text">跳往</span>
+              <span class="jump-text">{{ t('common.goTo') }}</span>
               <input type="number" class="page-input" v-model.number="jumpPage" @keyup.enter="jumpToPage" min="1" :max="totalPages" />
-              <span class="jump-text">前往</span>
-              <span class="page-info">页</span>
+              <span class="jump-text">{{ t('common.toPage') }}</span>
+              <span class="page-info">{{ t('common.pageUnit') }}</span>
             </div>
           </div>
         </div>
@@ -65,12 +65,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { View, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import HeaderComponent from '@/components/HeaderComponent.vue'
 import FooterComponent from '@/components/FooterComponent.vue'
 import { post } from '@/utils/request'
 
 const router = useRouter()
+const { t } = useI18n()
 
 // 新闻列表数据
 const newsList = ref<any[]>([])
@@ -123,7 +125,7 @@ const getNewsList = async (page: number = 1) => {
     // 设置总页数
     totalPages.value = Math.ceil(response.data.total / pageSize)
   } catch (error: any) {
-    console.error('获取新闻列表失败:', error)
+    console.error(t('news.fetchFail'), error)
     newsList.value = []
   }
 }