feat: 更新资源引用方式&构建上传 tos

2025-08-17 18:43:13 +08:00 · 2025-08-17 18:43:13 +08:00 · 74d299a8c3
commit 74d299a8c3
parent 613bd00f10
15 changed files with 2044 additions and 164 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,12 +2,15 @@
  "name": "kdoffical",
  "version": "0.0.0",
  "private": true,
+  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "upload-assets": "esno scripts/uploadAssets2volOSS.ts"
  },
  "dependencies": {
+    "@volcengine/tos-sdk": "^2.7.5",
    "axios": "^1.6.8",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "latest",
@ -20,6 +23,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
+    "esno": "^4.8.0",
    "vite": "^4.0.0"
  }
 }
--- a/scripts/uploadAssets2volOSS.ts
+++ b/scripts/uploadAssets2volOSS.ts
@ -0,0 +1,131 @@
+// Access Key ID	Secret Access Key
+// AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc	TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==
+
+// S3 endpoint：tos-cn-beijing.volces.com
+// 外网访问：tos-s3-cn-beijing.volces.com
+// Bucket 域名：kdesign-offical.tos-cn-beijing.volces.com
+
+import { TosClient } from '@volcengine/tos-sdk';
+import * as fs from 'fs';
+import * as path from 'path';
+
+
+// 配置信息
+const config = {
+  accessKeyId: 'AKLTZDY5ZjE0ZjMxODdiNDhjODkyYzhkODY2MmUwYmZlMzc',
+  secretAccessKey: 'TjJaak5XVTBOR0ZtTTJRek5HWTRPRGhoT0RBellXUTNORFV3WmpOa1pERQ==',
+  endpoint: 'tos-cn-beijing.volces.com',
+  region: 'cn-beijing',
+  bucket: 'kdesign-offical'
+};
+
+// 创建 TOS 客户端
+const client = new TosClient({
+  accessKeyId: config.accessKeyId,
+  accessKeySecret: config.secretAccessKey,
+  endpoint: config.endpoint,
+  region: config.region
+});
+
+// 获取文件的 Content-Type
+function getContentType(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+  const contentTypeMap: Record<string, string> = {
+    '.html': 'text/html',
+    '.css': 'text/css',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.mp4': 'video/mp4',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.txt': 'text/plain',
+    '.pdf': 'application/pdf',
+    '.zip': 'application/zip'
+  };
+
+  return contentTypeMap[ext] || 'application/octet-stream';
+}
+
+// 递归获取目录下所有文件
+async function getAllFiles(dirPath: string, fileList: string[] = []): Promise<string[]> {
+  const files = fs.readdirSync(dirPath);
+
+  for (const file of files) {
+    const filePath = path.join(dirPath, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      await getAllFiles(filePath, fileList);
+    } else {
+      fileList.push(filePath);
+    }
+  }
+
+  return fileList;
+}
+
+// 上传单个文件
+async function uploadFile(filePath: string, basePath: string): Promise<void> {
+  try {
+    // 计算相对路径作为对象键名
+    const key = filePath.replace(basePath, '').replace(/^\//, '');
+    const contentType = getContentType(filePath);
+    const fileContent = fs.readFileSync(filePath);
+
+    console.log(`上传文件: ${filePath} -> ${key}`);
+
+    const response = await client.putObject({
+      bucket: config.bucket,
+      key: key,
+      body: fileContent,
+      contentType: contentType
+    });
+
+    console.log(`上传成功: ${key}, 请求ID: ${response.requestId}`);
+  } catch (error) {
+    console.error(`上传文件 ${filePath} 失败:`, error);
+  }
+}
+
+// 上传目录下所有文件
+async function uploadDirectory(dirPath: string): Promise<void> {
+  try {
+    const basePath = path.resolve(dirPath, '..');
+    const allFiles = await getAllFiles(dirPath);
+    
+    console.log(`找到 ${allFiles.length} 个文件需要上传`);
+    
+    // 创建上传任务队列
+    const uploadTasks = allFiles.map(filePath => uploadFile(filePath, basePath));
+    
+    // 并发上传文件
+    await Promise.all(uploadTasks);
+    
+    console.log('所有文件上传完成');
+  } catch (error) {
+    console.error('上传目录失败:', error);
+  }
+}
+
+// 主函数
+async function main() {
+  // 使用 import.meta.url 替代 __dirname (ES 模块兼容)
+  const currentFileUrl = import.meta.url;
+  const currentFilePath = new URL(currentFileUrl).pathname;
+  const currentDir = path.dirname(currentFilePath);
+  const assetsDir = path.resolve(currentDir, '../dist/assets');
+  console.log(`开始上传目录: ${assetsDir}`);
+  await uploadDirectory(assetsDir);
+}
+
+// 执行主函数
+main().catch(error => {
+  console.error('程序执行失败:', error);
+  process.exit(1);
+});
+
--- a/src/components/Aboutus.vue
+++ b/src/components/Aboutus.vue
@ -1,6 +1,23 @@
 <script setup>
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
 import Wanted from "./Wanted.vue";
+import aboutusVideoGif from "@/assets/AboutusVideo.gif";
+import aboutusVideoPreload from "@/assets/AboutusVideoPreload.png";
+import aboutusVideoMp4 from "@/assets/AboutusVideo.mp4";
+import pcp1wep from "@/assets/AboutusRes/pcp1wep.png";
+import pcp2wep from "@/assets/AboutusRes/pcp2wep.png";
+import pcp3wep from "@/assets/AboutusRes/pcp3wep.png";
+import pcp4wep from "@/assets/AboutusRes/pcp4wep.png";
+import pcp5wep from "@/assets/AboutusRes/pcp5wep.png";
+import pcp6wep from "@/assets/AboutusRes/pcp6wep.png";
+import pcp7wep from "@/assets/AboutusRes/pcp7wep.png";
+import pcp1 from "@/assets/AboutusRes/pcp1.png";
+import pcp2 from "@/assets/AboutusRes/pcp2.png";
+import pcp3 from "@/assets/AboutusRes/pcp3.png";
+import pcp4 from "@/assets/AboutusRes/pcp4.png";
+import pcp5 from "@/assets/AboutusRes/pcp5.png";
+import pcp6 from "@/assets/AboutusRes/pcp6.png";
+import pcp7 from "@/assets/AboutusRes/pcp7.png";
 const { breakpoint } = useBootstrapBreakpoint();
 </script>

@ -8,27 +25,27 @@ const { breakpoint } = useBootstrapBreakpoint();
  <div class="pageroot" id="aboutusroot">
    <div id="aboutusbanner" class="videorootbanner">
 <!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-<!--           src="/AboutusVideo.gif"-->
+<!--           :src="aboutusVideoGif"-->
 <!--           class="videoimg"/>-->
      <img v-if="$isMobile.phone"
-           src="/AboutusVideo.gif"
+           :src="aboutusVideoGif"
           class="videoimg"/>
      <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-             poster="/AboutusVideoPreload.png"
+             :poster="aboutusVideoPreload"
             controls=""
             id="abtbannervideo"
             muted autoplay="autoplay"
             loop="loop" playsinline webkit-playsinline
             class="bannervideos">
-        <source src="/AboutusVideo.mp4" type="video/mp4"></source>
+        <source :src="aboutusVideoMp4" type="video/mp4"></source>
      </video>
      <video v-else
-             poster="/AboutusVideoPreload.png"
+             :poster="aboutusVideoPreload"
             id="abtbannervideo"
             muted autoplay="autoplay"
             loop="loop" playsinline webkit-playsinline
             class="bannervideos">
-        <source src="/AboutusVideo.mp4" type="video/mp4"></source>
+        <source :src="aboutusVideoMp4" type="video/mp4"></source>
      </video>
      <div id="abtbanner" class="bannerovervideo">
        <div class="bannercontent">
@ -74,44 +91,44 @@ const { breakpoint } = useBootstrapBreakpoint();
        <span class="normalcontenttitle" style="background-color: white;">设计瞬间</span>
      </div>
      <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="sjsjimgwep">
-        <img src="/AboutusRes/pcp1wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp2wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp3wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp4wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp5wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp6wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
-        <img src="/AboutusRes/pcp7wep.png"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp1wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp2wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp3wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp4wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp5wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp6wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
+        <img :src="pcp7wep"style="margin-top: 5px;width: 100%;object-fit: contain;"/>
      </div>
      <div v-else id="sjsjimg">
        <div class="imgrow" style="width: 100%; height: auto;">
          <div class="imageitem" style="width: 62.571428571428571428571428571429%;">
-            <img src="/AboutusRes/pcp1.png"/>
+            <img :src="pcp1"/>
          </div>
          <div class="imageitem" style="width:1.428571428571428571428571428571%;"></div>
          <div class="imageitem" style="width: 36%;background-color: black;">
-            <img src="/AboutusRes/pcp2.png"/>
+            <img :src="pcp2"/>
          </div>
        </div>
        <div  class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
          <div class="imageitem" style="width: 32.142857142857142857142857142857%">
-            <img class="sjsjpic" src="/AboutusRes/pcp3.png"/>
+            <img class="sjsjpic" :src="pcp3"/>
          </div>
          <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
          <div class="imageitem" style="width: 32.142857142857142857142857142857%">
-            <img src="/AboutusRes/pcp4.png"/>
+            <img :src="pcp4"/>
          </div>
          <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
          <div class="imageitem" style="width: 32.857142857142857142857142857143%">
-            <img src="/AboutusRes/pcp5.png"/>
+            <img :src="pcp5"/>
          </div>
        </div>
        <div  class="imgrow" style="width: 100%; height: auto; margin-top: 20px;">
          <div class="imageitem" style="width: 50%;">
-            <img src="/AboutusRes/pcp6.png"/>
+            <img :src="pcp6"/>
          </div>
          <div class="imageitem" style="width: 1.428571428571428571428571428571%;"></div>
          <div class="imageitem" style="width: 48.571428571428571428571428571429%;">
-            <img src="/AboutusRes/pcp7.png"/>
+            <img :src="pcp7"/>
          </div>
        </div>
      </div>
@ -162,11 +179,11 @@ export default {
  align-items: flex-start; /* 控制水平对齐 - 靠左 */
  justify-content: center;
  @include media-breakpoint-between(xs, md) {
-    background-image: url('/AboutusRes/aboutusbanner_wep.png');
+    background-image: url('@/assets/AboutusRes/aboutusbanner_wep.png');
  }

  @include media-breakpoint-up(md) {
-    background-image: url('/AboutusRes/aboutusbanner.png');
+    background-image: url('@/assets/AboutusRes/aboutusbanner.png');
  }
 }

@ -200,12 +217,12 @@ export default {
  @include media-breakpoint-between(xs, md) {
    background-size:100%;
    padding-bottom: 112px;
-    background-image: url('/AboutusRes/innerteamwep.png');
+    background-image: url('@/assets/AboutusRes/innerteamwep.png');
  }

  @include media-breakpoint-up(md) {
    padding-bottom: 164px;
-    background-image: url('/AboutusRes/innerteam.png');
+    background-image: url('@/assets/AboutusRes/innerteam.png');
  }

  @media (max-width: 375px) {
--- a/src/components/ContactUs.vue
+++ b/src/components/ContactUs.vue
@ -41,14 +41,14 @@ export default {
  justify-content: left;
  display: flex;
  @include media-breakpoint-between(xs, md) {
-    background-image: url('/bottom/bg_wep.png');
+    background-image: url('@/assets/bottom/bg_wep.png');
    padding-left: 32px;
    padding-right: 32px;
    margin-top: 120px;
  }

  @include media-breakpoint-up(md) {
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
    padding-left: 100px;
    padding-right: 100px;
  }
--- a/src/components/Examples.vue
+++ b/src/components/Examples.vue
@ -1,30 +1,34 @@
 <script setup>
 import ExamplesContent from './ExamplesContent.vue';
 import { useBootstrapBreakpoint } from './useBreakpoint.js'; // 假设 useBreakpoint.js 路径正确
+import ExpVideoPreload from "@/assets/ExpVideoPreload.png";
+import ExpVideo from "@/assets/ExpVideo.mp4";
+import Examplesbanner_wep from "@/assets/ExamplesRes/Examplesbanner_wep.png";
+import Examplesbanner from "@/assets/ExamplesRes/Examplesbanner.png";
 const { breakpoint } = useBootstrapBreakpoint();
 </script>

 <template>
  <div class="pageroot" id="examplesprocessroot">
    <div id="examplebanner" class="videorootbanner">
-<!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
-<!--           src="/ExpVideoPreload.png"-->
-<!--           class="videoimg"/>-->
+      <!--      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
+      <!--           src="/ExpVideoPreload.png"-->
+      <!--           class="videoimg"/>-->
      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
             controls=""
             id="expbannervideo"
             muted autoplay="autoplay"
             loop="loop" playsinline webkit-playsinline
             class="bannervideos">
-        <source src="/ExpVideo.mp4" type="video/mp4"></source>
+        <source :src="ExpVideo" type="video/mp4"></source>
      </video>
      <video v-else
-          poster="/ExpVideoPreload.png"
-          id="expbannervideo"
-          muted autoplay="autoplay"
-          loop="loop" playsinline webkit-playsinline
-          class="bannervideos">
-        <source src="/ExpVideo.mp4" type="video/mp4"></source>
+             :poster="ExpVideoPreload"
+             id="expbannervideo"
+             muted autoplay="autoplay"
+             loop="loop" playsinline webkit-playsinline
+             class="bannervideos">
+        <source :src="ExpVideo" type="video/mp4"></source>
      </video>
      <div id="expbanner" class="bannerovervideo">
        <div class="bannercontent">
@ -57,11 +61,11 @@ export default {

 #examplesprocessbanner{
  @include media-breakpoint-between(xs, md) {
-    background-image: url('/ExamplesRes/Examplesbanner_wep.png');
+    background-image: url('@/assets/ExamplesRes/Examplesbanner_wep.png');
  }

  @include media-breakpoint-up(md) {
-    background-image: url('/ExamplesRes/Examplesbanner.png');
+    background-image: url('@/assets/ExamplesRes/Examplesbanner.png');
  }
 }
 </style>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -28,7 +28,7 @@ export default {
  justify-content: left;

  @include media-breakpoint-between(xs, md) {
-    background-image: url('/bottom/bg_wep.png');
+    background-image: url('@/assets/bottom/bg_wep.png');
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 66px;
@ -37,7 +37,7 @@ export default {

  @include media-breakpoint-between(md,xxl){
    margin-top: 0px;
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 109px;
@ -47,7 +47,7 @@ export default {
  @include media-breakpoint-up(xxl) {
    min-height: 759px;
    margin-top: 0px;
-    background-image: url('/bottom/bg_pc.png');
+    background-image: url('@/assets/bottom/bg_pc.png');
    padding-left: 256px;
    padding-top: 109px;
    padding-bottom: 109px;
--- a/src/components/HeaderVideo.vue
+++ b/src/components/HeaderVideo.vue
@ -1,7 +1,11 @@
 <script>
 import { defineComponent } from 'vue';
-// import { useBootstrapBreakpoint } from './useBreakpoint.js'; // Kept as in original
-// const { breakpoint } = useBootstrapBreakpoint(); // Kept as in original
+import logobeginPCpld from '@/assets/logobeginPCpld.png';
+import logobeginPC from '@/assets/logobeginPC.mp4';
+import intopagedir from '@/assets/intopagedir.svg';
+
+const mobileFrames = import.meta.glob('@/assets/openvideo/*.jpg', { eager: true, as: 'url' });
+const tabletFrames = import.meta.glob('@/assets/openvideopad/*.jpg', { eager: true, as: 'url' });

 export default defineComponent({
  name: "HeaderVideo",
@ -22,28 +26,32 @@ export default defineComponent({
      isLoading: true, // True while loading initial frames needed for playback
      loadingProgress: 0, // Progress for loading initial frames (0-100%)
      preloadedImages: [], // Array to store preloaded Image objects
+      logobeginPCpld: logobeginPCpld,
+      logobeginPC: logobeginPC,
+      intopagedir: intopagedir
    };
  },
  computed: {
    frames() {
      const arr = [];
      if (this.$isMobile.phone) {
-        // 手机模式：使用 props 提供的 basePath 和 framesCount
-        // basePath 默认为 '/openvideo/', framesCount 默认为 82
        for (let i = 0; i <= this.framesCount; i++) {
          const name = String(i).padStart(2, '0') + '.jpg';
-          arr.push(this.basePath + name);
+          const path = `/src/assets/openvideo/${name}`;
+          if (mobileFrames[path]) {
+            arr.push(mobileFrames[path]);
+          }
        }
      } else if (this.$isMobile.tablet) {
-        // 平板模式：使用指定的 basePath 和 framesCount
-        const tabletBasePath = '/openvideopad/';
        const tabletFramesCount = 90;
        for (let i = 0; i <= tabletFramesCount; i++) {
-          const name = String(i).padStart(2, '0') + '.jpg'; // Pad to 3 digits for tablet
-          arr.push(tabletBasePath + name);
+          const name = String(i).padStart(2, '0') + '.jpg';
+          const path = `/src/assets/openvideopad/${name}`;
+          if (tabletFrames[path]) {
+            arr.push(tabletFrames[path]);
+          }
        }
      }
-      // 对于桌面设备，arr 将为空，因为它们使用 <video> 标签
      return arr;
    },
    // Number of frames that need to be loaded before playback can start
@ -249,12 +257,12 @@ export default defineComponent({
          :alt="alt"
          class="simple-frame-player"
      />
-      <video v-if="(!$isMobile.phone&&!$isMobile.tablet)" poster="/logobeginPCpld.png"
+      <video v-if="(!$isMobile.phone&&!$isMobile.tablet)" :poster="logobeginPCpld"
             id="pcstart" muted autoplay
             playsinline webkit-playsinline
             class="startvideo"
             x5-video-player-type="h5-page">
-        <source src="/logobeginPC.mp4" type="video/mp4"></source>
+        <source :src="logobeginPC" type="video/mp4"></source>
      </video>
    </div>
    <div id="beginbottom" v-if="false">
@ -262,7 +270,7 @@ export default defineComponent({
        <div class="normalcontentdiv" id="intovideoreq">
        <span class="normalcontenttitle" id="intoa">
          <u>进入kdesign.top</u>
-          <img src="/intopagedir.svg" id="intopagesvg"/>
+          <img :src="intopagedir" id="intopagesvg"/>
        </span>
        </div>
      </a>
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@ -2,48 +2,60 @@
 import ExamplesContent from './ExamplesContent.vue'
 import Partners from './Tools/Partners.vue'
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
+import bannervideopreload from "@/assets/bannervideopreload.png";
+import HpgVideo from "@/assets/HpgVideo.mp4";
+import kdesignblack from "@/assets/HomepageRes/kdesignblack.svg";
+import NewK from "@/assets/HomepageRes/NewK.png";
+import cptycx from "@/assets/HomepageRes/fwfw/cptycx.png";
+import ppty from "@/assets/HomepageRes/fwfw/ppty.png";
+import swdhcysj from "@/assets/HomepageRes/fwfw/swdhcysj.png";
+import qyszhzx from "@/assets/HomepageRes/fwfw/qyszhzx.png";
+import cytg from "@/assets/HomepageRes/fwfw/cytg.png";
+import ddx from "@/assets/HomepageRes/fwfw/2ddx.png";
+
 const { breakpoint } = useBootstrapBreakpoint();
 </script>
+
 <template>
-<div id="homepageroot" class="pageroot">
-  <div id="homepagebanner" class="videorootbanner">
+  <div id="homepageroot" class="pageroot">
+     <div id="homepagebanner" class="videorootbanner">
 <!--    <img v-if="$isMobile.android.phone||$isMobile.android.tablet"-->
 <!--         src="/bannervideopreload.png"-->
 <!--         class="videoimg"/>-->
-    <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
-           poster="/bannervideopreload.png" controls=""
-           id="bannervideo" muted autoplay="autoplay" loop="loop"
-           playsinline webkit-playsinline
-           class="bannervideos"
-           x5-video-player-type="h5-page">
-      <source src="/HpgVideo.mp4" type="video/mp4"></source>
-    </video>
-    <video v-else poster="/bannervideopreload.png"
-           id="bannervideo" muted autoplay="autoplay" loop="loop"
-           playsinline webkit-playsinline
-           class="bannervideos"
-           x5-video-player-type="h5-page">
-      <source src="/HpgVideo.mp4" type="video/mp4"></source>
-    </video>
-    <div id="hpbanner" class="bannerovervideo">
-      <div class="bannercontent">
-        <span class="banner1">为用户创造美好体验<br /></span>
-        <span class="banner2">驱动商业可持续增长</span>
+      <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+             :poster="bannervideopreload" controls=""
+             id="bannervideo" muted autoplay="autoplay" loop="loop"
+             playsinline webkit-playsinline
+             class="bannervideos"
+             x5-video-player-type="h5-page">
+        <source :src="HpgVideo" type="video/mp4"></source>
+      </video>
+      <video v-else :poster="bannervideopreload"
+             id="bannervideo" muted autoplay="autoplay" loop="loop"
+             playsinline webkit-playsinline
+             class="bannervideos"
+             x5-video-player-type="h5-page">
+        <source :src="HpgVideo" type="video/mp4"></source>
+      </video>
+      <div id="hpbanner" class="bannerovervideo">
+        <div class="bannercontent">
+          <span class="banner1">为用户创造美好体验<br /></span>
+          <span class="banner2">驱动商业可持续增长</span>
+        </div>
      </div>
    </div>
-  </div>
-  <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
-    <div id="hpbanner2" style="z-index: 0;">
-      <div class="bannercontent">
-        <span class="banner1" style="color: black;">为用户创造美好体验<br /></span>
-        <span class="banner2" style="color: black;">驱动商业可持续增长</span>
+    <div v-if="$isMobile.android.phone||$isMobile.android.tablet" id="adbannertxt" class="pageroot">
+      <div id="hpbanner2" style="z-index: 0;">
+        <div class="bannercontent">
+          <span class="banner1" style="color: black;">为用户创造美好体验<br /></span>
+          <span class="banner2" style="color: black;">驱动商业可持续增长</span>
+        </div>
      </div>
    </div>
-  </div>
  <div id="secondwhite" class="pageroot">
    <div id="whiteK" class="normalcontentdiv">
      <span class="normalcontenttitle">
-        <img src="/HomepageRes/kdesignblack.svg" id="logoblack"/>
+        <img :src="kdesignblack" id="logoblack"/>
      </span>
      <span class="normalcontenttext">
        一家涵盖<b>品牌创新/产品设计/新媒体制作</b>的一站式综合服务体<br />我们致力于聚焦数字时代的人文体验，整合各领域专业与优势，构建用户与产品/品牌的新型关系
@ -51,11 +63,11 @@ const { breakpoint } = useBootstrapBreakpoint();
    </div>
    <div id="bigKlogomobile" v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'||breakpoint==='lg'">
      <div id="bigKlogo">
-        <img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
+        <img :src="NewK" width="100%" height="100%"/>
      </div>
    </div>
    <div id="bigKlogo" v-else>
-      <img src="/HomepageRes/NewK.png" width="100%" height="100%"/>
+      <img :src="NewK" width="100%" height="100%"/>
    </div>
  </div>
  <div class="pageroot" id="fwfw" style="background-color: black;">
@ -70,7 +82,7 @@ const { breakpoint } = useBootstrapBreakpoint();
    <div id="fwfwlogos">
      <div class="fwfwlogodiv" id="fwfwlogo01">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/cptycx.png"/>
+          <img :src="cptycx"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -83,7 +95,7 @@ const { breakpoint } = useBootstrapBreakpoint();
      </div>
      <div class="fwfwlogodiv" id="fwfwlogo02">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/ppty.png"/>
+          <img :src="ppty"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -96,7 +108,7 @@ const { breakpoint } = useBootstrapBreakpoint();
      </div>
      <div class="fwfwlogodiv" id="fwfwlogo03">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/swdhcysj.png"/>
+          <img :src="swdhcysj"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -109,7 +121,7 @@ const { breakpoint } = useBootstrapBreakpoint();
      </div>
      <div class="fwfwlogodiv" id="fwfwlogo04">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/qyszhzx.png"/>
+          <img :src="qyszhzx"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -122,7 +134,7 @@ const { breakpoint } = useBootstrapBreakpoint();
      </div>
      <div class="fwfwlogodiv" id="fwfwlogo05">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/cytg.png"/>
+          <img :src="cytg"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -135,7 +147,7 @@ const { breakpoint } = useBootstrapBreakpoint();
      </div>
      <div class="fwfwlogodiv" id="fwfwlogo06">
        <div class="fwfwlogoimdiv">
-          <img src="/HomepageRes/fwfw/2ddx.png"/>
+          <img :src="ddx"/>
        </div>
        <div class="fwfwitemcontent">
          <span class="fwfwitemcn">
@ -145,20 +157,20 @@ const { breakpoint } = useBootstrapBreakpoint();
            Digital&nbsp;Video&nbsp;Creative&nbsp;Design
          </span>
        </div>
+        </div>
      </div>
    </div>
-  </div>
-  <ExamplesContent></ExamplesContent>
-  <a href="/Examples" style="text-decoration: none;">
+    <ExamplesContent></ExamplesContent>
+    <a href="/Examples" style="text-decoration: none;">
    <div style="display: flex;justify-content: center;
        width: 100%;background-color: white;">
      <div id="seemorebutton">
        查看更多
      </div>
-    </div>
-  </a>
-  <Partners></Partners>
-</div>
+      </div>
+    </a>
+    <Partners></Partners>
+  </div>
 </template>

 <script>
--- a/src/components/ServiceProcess.vue
+++ b/src/components/ServiceProcess.vue
@ -1,12 +1,17 @@
 <script setup>
 import { useBootstrapBreakpoint } from './useBreakpoint.js';
+import Newbanner from '@/assets/ServiceProcessRes/Newbanner.png';
+import designopinionwep from '@/assets/ServiceProcessRes/designopinionwep.png';
+import designopinion from '@/assets/ServiceProcessRes/designopinion.png';
+import designprocedurewep from '@/assets/ServiceProcessRes/designprocedurewep.png';
+import designprocedure from '@/assets/ServiceProcessRes/designprocedure.png';
 const { breakpoint } = useBootstrapBreakpoint();
 </script>

 <template>
  <div class="pageroot" id="serviceprocessroot">
    <div id="serviceprocessbanner" class="videorootbanner">
-      <img class="videoimg" src="/ServiceProcessRes/Newbanner.png"/>
+      <img class="videoimg" :src="Newbanner"/>
      <div id="expbanner" class="bannerovervideo">
        <div class="bannercontent">
          <span class="banner1">以体验设计重构用户关系<br /></span>
@ -30,7 +35,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 20px;
                  margin-bottom: 41px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinionwep.png"
+        <img :src="designopinionwep"
             width="100%" height="100%"/>
      </div>
      <div v-if="breakpoint==='md'||breakpoint==='lg'"
@ -39,7 +44,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 79px;
                  margin-bottom: 95px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinion.png"
+        <img :src="designopinion"
             width="100%" height="100%"/>
      </div>
      <div v-if="breakpoint==='xl'||breakpoint==='xxl'"
@ -48,7 +53,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 79px;
                  margin-bottom: 95px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designopinion.png"
+        <img :src="designopinion"
             width="100%" height="100%"/>
      </div>
    </div>
@ -64,7 +69,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 20px;
                  margin-bottom: 41px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedurewep.png"
+        <img :src="designprocedurewep"
             width="100%" height="100%"/>
      </div>
      <div v-if="breakpoint==='md'||breakpoint==='lg'"
@ -73,7 +78,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 121px;
                  margin-bottom: 95px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedure.png"
+        <img :src="designprocedure"
             width="100%" height="100%"/>
      </div>
      <div v-if="breakpoint==='xl'||breakpoint==='xxl'"
@ -82,7 +87,7 @@ const { breakpoint } = useBootstrapBreakpoint();
                  margin-top: 121px;
                  margin-bottom: 95px;
                  max-width:100%;height:auto;">
-        <img src="/ServiceProcessRes/designprocedure.png"
+        <img :src="designprocedure"
             width="100%" height="100%"/>
      </div>
    </div>
@ -108,11 +113,11 @@ export default {
  width:100%;
  background-size: 100% 100%;
  @include media-breakpoint-between(xs, md) {
-    background-image: url('/ServiceProcessRes/blackbgwep.png');
+    background-image: url('@/assets/ServiceProcessRes/blackbgwep.png');
  }

  @include media-breakpoint-up(md) {
-    background-image: url('/ServiceProcessRes/blackbgpc.png');
+    background-image: url('@/assets/ServiceProcessRes/blackbgpc.png');
  }
 }

--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@ -2,56 +2,52 @@
  <div id="toproot">
    <MobileToolbar></MobileToolbar>
    <div id="topbar">
-      <a href="/">
+      <router-link to="/">
        <img
            id="toplogo"
            referrerpolicy="no-referrer"
-            src="/KDESIGNlogo.svg"/>
-      </a>
+            :src="KDESIGNlogo"/>
+      </router-link>
      <img
          id="topcode"
          class="label_1"
          referrerpolicy="no-referrer"
-          src="/topcode.png"/>
+          :src="topcode"/>
      <a href="javascript:;" @click="show_weptoolbar">
        <img
            id="wepmenubutton"
            class="label_1"
            referrerpolicy="no-referrer"
-            src="/waptoptoolbarbutton.png"/>
+            :src="waptoptoolbarbutton"/>
      </a>
      <span id="rightcontent">
        <span class="toptext" id="hyal"
              :class="{
                curpagetoptext: this.isActiveRoute('Examples')}">
-          <a href="/Examples"
-             style="text-decoration: none; color: inherit;">
+          <router-link to="/Examples">
            行业案例
-          </a>
+          </router-link>
        </span>
        <span class="toptext" id="fwlc"
              :class="{
                curpagetoptext: this.isActiveRoute('ServiceProcess')}">
-          <a href="/ServiceProcess"
-             style="text-decoration: none; color: inherit;">
+          <router-link to="/ServiceProcess">
            服务流程
-          </a>
+          </router-link>
        </span>
        <span class="toptext" id="gywm"
              :class="{
                curpagetoptext: this.isActiveRoute('Aboutus')}">
-          <a href="/Aboutus"
-             style="text-decoration: none; color: inherit;">
+          <router-link to="/Aboutus">
            关于我们
-          </a>
+          </router-link>
        </span>
        <span class="toptext" id="lxwm"
              :class="{
                curpagetoptext: this.isActiveRoute('ContactUs')}">
-          <a href="/ContactUs"
-             style="text-decoration: none; color: inherit;">
+          <router-link to="/ContactUs">
            联系我们
-          </a>
+          </router-link>
        </span>
      </span>
    </div>
@ -60,11 +56,21 @@

 <script>
 import MobileToolbar from "./Tools/MobileToolbar.vue";
+import KDESIGNlogo from "@/assets/toolbar/KDESIGNlogo.svg";
+import topcode from "@/assets/toolbar/topcode.png";
+import waptoptoolbarbutton from "@/assets/toolbar/waptoptoolbarbutton.png";
 export default {
  name: "Toolbar",
  components: {
    MobileToolbar
  },
+  data() {
+    return {
+      KDESIGNlogo,
+      topcode,
+      waptoptoolbarbutton
+    };
+  },
  mounted() {
    this.$nextTick(function() {
      this.contain_toolbar();
@ -113,11 +119,14 @@ export default {
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

-.toptext
-{
+.toptext {
  @include media-breakpoint-between(xs, md) {
  }
  @include media-breakpoint-up(md){
+    a, .router-link-active {
+      text-decoration: none;
+      color: inherit;
+    }
    width: 99px;
    height: 28px;
    overflow-wrap: break-word;
--- a/src/components/Tools/FooterContent.vue
+++ b/src/components/Tools/FooterContent.vue
@ -9,13 +9,13 @@
        <br/>
        <div style="display: flex; flex-direction: row;">
          <div class="qritem">
-            <img src="/bottom/qrwecom01.png" class="qrcodeimg">
+            <img :src="qrwecom01" class="qrcodeimg">
            <span class="itemcontent">
                项目经理
              </span>
          </div>
          <div class="qritem" style="margin-right: 0px;margin-left: auto;">
-            <img src="/bottom/qrwecom02.png" class="qrcodeimg">
+            <img :src="qrwecom02" class="qrcodeimg">
            <span class="itemcontent">
                商务经理
              </span>
@ -26,7 +26,7 @@
        <span class="itemtitle">WECHAT / 公众号</span>
        <div style="display: flex; flex-direction: row;">
          <div class="qritem" id="wechatpublic">
-            <img src="/bottom/qrwecom03.png" class="qrcodeimg">
+            <img :src="qrwecom03" class="qrcodeimg">
            <span class="itemcontent">
              K DESIGN Lab
            </span>
@ -60,8 +60,18 @@
 </template>

 <script>
+import qrwecom01 from "@/assets/bottom/qrwecom01.png";
+import qrwecom02 from "@/assets/bottom/qrwecom02.png";
+import qrwecom03 from "@/assets/bottom/qrwecom03.png";
 export default {
-  name: "FooterContent"
+  name: "FooterContent",
+  data() {
+    return {
+      qrwecom01,
+      qrwecom02,
+      qrwecom03
+    };
+  }
 }
 </script>

--- a/src/components/Tools/MobileToolbar.vue
+++ b/src/components/Tools/MobileToolbar.vue
@ -1,5 +1,7 @@
 <script setup>
 import FooterContent from './FooterContent.vue'
+import weptoolbarlogo from "@/assets/MobileToolbar/weptoolbarlogo.png";
+import closeweptoolbar from "@/assets/MobileToolbar/closeweptoolbar.png";
 </script>

 <template>
@ -10,7 +12,7 @@ import FooterContent from './FooterContent.vue'
          <img
              id="image_1"
              referrerpolicy="no-referrer"
-              src="/MobileToolbar/weptoolbarlogo.png"
+              :src="weptoolbarlogo"
          />
        </a>
        <span style="width: 100%;"></span>
@ -18,7 +20,7 @@ import FooterContent from './FooterContent.vue'
          <img
              id="thumbnail_1"
              referrerpolicy="no-referrer"
-              src="/MobileToolbar/closeweptoolbar.png"
+              :src="closeweptoolbar"
          />
        </a>
      </div>
--- a/src/router.js
+++ b/src/router.js
@ -62,7 +62,7 @@ const routes= [
 ]

 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHistory('/'),
    routes,
    scrollBehavior(to, from, savedPosition) {
        // 如果有保存的滚动位置 (例如，当用户点击浏览器的后退/前进按钮时)，则恢复该位置
--- a/vite.config.js
+++ b/vite.config.js
@ -4,6 +4,7 @@ import { fileURLToPath, URL } from 'node:url'
 import fs from 'fs'

 export default defineConfig({
+  base: process.env.NODE_ENV === 'production' ? 'https://cdn.kdesign.top/' : '/',
  plugins: [
    vue(),
    // 添加自定义中间件来处理根路径