解决标题栏宽度问题并将包管理器从npm改为yarn。

package.json

@@ -25,5 +25,6 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "esno": "^4.8.0",
     "vite": "^4.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

scripts/uploadAssets2volOSS.ts

@@ -74,7 +74,10 @@ async function getAllFiles(dirPath: string, fileList: string[] = []): Promise<st
 async function uploadFile(filePath: string, basePath: string): Promise<void> {
   try {
     // 计算相对路径作为对象键名
-    const key = filePath.replace(basePath, '').replace(/^\//, '');
+    let key = filePath.replace(basePath, '').replace(/^[\/\\]/, '');
+    // 将Windows路径分隔符转换为正斜杠
+    key = key.replace(/\\/g, '/');
+
     const contentType = getContentType(filePath);
     const fileContent = fs.readFileSync(filePath);
 

src/components/ExampleItem.vue

@@ -9,7 +9,8 @@ export default {
       psginfo:null,
       error:null,
       isLoading: false,
-      cmsroot: '${this.$axios.defaults.baseURL}'
+      // cmsroot: '${this.$axios.defaults.baseURL}'
+      cmsroot: 'https://cdn.kdesign.top'
     }
   },
   setup() {
@@ -54,6 +55,20 @@ export default {
       }else{
 
       }
+    },
+    getImageUrl(url) {
+      if (!url) return '';
+
+      // 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        // 提<EFBFBD><EFBFBD><EFBFBD>路径部分（去掉协议和域名）
+        const urlObj = new URL(url);
+        const relativePath = urlObj.pathname;
+        return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
+      } else {
+        // 如果是相对路径，直接拼接CDN URL
+        return `${this.$axios.defaults.baseCDNURL}${url}`;
+      }
     }
   },
   created() {
@@ -75,9 +90,9 @@ export default {
 <template>
   <div id="passageroot" class="pageroot" v-if="psginfo">
     <div id="passagebanner" class="pagebanner">
-      <img :src="`${this.$axios.defaults.baseURL}${psginfo.mobileheadimage.url}`"
+      <img :src="getImageUrl(psginfo.mobileheadimage?.url)"
            v-if="breakpoint==='xs'||breakpoint==='sm'"   alt="" id="bannerimg"/>
-      <img :src="`${this.$axios.defaults.baseURL}${psginfo.headimage.url}`"
+      <img :src="getImageUrl(psginfo.headimage?.url)"
            v-else  alt="" id="bannerimg"/>
       <div id="bannercontentfill"
            style="width: 100%;height: 100%;
@@ -119,11 +134,11 @@ export default {
       <div v-for="(item, index) in psginfo.images" :key="index"
            class="imglistitem"
            style="width: 100%; height: auto;">
-        <img :src="`${this.$axios.defaults.baseURL}${item.url}`" v-if="item.mime.startsWith('image',0)" alt="" />
+        <img :src="getImageUrl(item.url)" v-if="item.mime.startsWith('image',0)" alt="" />
         <video v-else-if="item.mime.startsWith('video',0)" controls="controls">
-          <source :src="`${this.$axios.defaults.baseURL}${item.url}`" type="video/mp4">
-          <source :src="`${this.$axios.defaults.baseURL}${item.url}`" type="video/ogg">
-          <source :src="`${this.$axios.defaults.baseURL}${item.url}`" type="video/webm">
+          <source :src="getImageUrl(item.url)" type="video/mp4">
+          <source :src="getImageUrl(item.url)" type="video/ogg">
+          <source :src="getImageUrl(item.url)" type="video/webm">
         </video>
       </div>
     </div>

src/components/ExamplesContent.vue

@@ -2,21 +2,6 @@
 <!--<div class="pageroot" style="background-color: white;">-->
   <div v-if="this.error==null" id="examplelist">
     <div id="typegrid">
-<!--      <a href="/Examples" style="text-decoration: none;">-->
-<!--        <div class="typebar"-->
-<!--             :class="{-->
-<!--                active: (!$route.query.type || $route.query.type === '')}">-->
-<!--          全部-->
-<!--        </div>-->
-<!--      </a>-->
-<!--      <a v-for="(item, index) in this.types"-->
-<!--                   :key="index":href="`/Examples?type=${item}`"-->
-<!--                   style="text-decoration: none;">-->
-<!--        <div class="typebar"-->
-<!--             :class="{ active: ($route.query.type === item)}">-->
-<!--          {{item}}-->
-<!--        </div>-->
-<!--      </a>-->
       <router-link to="/Examples" style="text-decoration: none;">
         <div class="typebar"
              :class="{
@@ -41,7 +26,13 @@
           :href="`/ExampleItem?createdAt=${item.createdAt}`"
       >
         <div class="listblock">
-          <img :src="`${this.$axios.defaults.baseURL}${item.headimage.formats.large.url}`" alt="" />
+            <img
+              :src="getImageUrl(item.headimage)"
+              alt=""
+              @error="handleImageError"
+            />
+
+          <div id="itemon">
             <div class="itemtext">
               <span class="upspan">
                 {{item.brandname_cn}}
@@ -51,6 +42,7 @@
               </span>
             </div>
           </div>
+        </div>
       </a>
     </div>
   </div>
@@ -80,10 +72,10 @@ export default {
             if (Array.isArray(resp)) {
               this.types = resp;
               if (this.types.length === 0) {
-                this.error = "返回的数组为空";
+                this.error = "返回的数组为<EFBFBD><EFBFBD><EFBFBD>";
               }
             } else {
-              this.error = "返回的数据不是数组";
+              this.error = "返回的<EFBFBD><EFBFBD><EFBFBD>据不是数组";
               this.types = [];
             }
           })
@@ -108,7 +100,7 @@ export default {
         reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&filters[example_type]='+type+'&sort=createdAt:desc';
       }
       if (this.$route.name != 'Examples'){
-        let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&pagination[page]=1&pagination[pageSize]=5&sort=createdAt:desc';
+        reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&pagination[page]=1&pagination[pageSize]=5&sort=createdAt:desc';
       }
       axios.get(reqarg)
           .then(response =>{
@@ -134,6 +126,24 @@ export default {
           .finally(() => {
             this.isLoading = false;
           });
+    },
+    getImageUrl(image) {
+      const url = image.url;
+
+      // 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        // 提取路径部分（去掉协议和域名）
+        const urlObj = new URL(url);
+        const relativePath = urlObj.pathname;
+        return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
+      } else {
+        // 如果是相对路径，直接拼接CDN URL
+        return `${this.$axios.defaults.baseCDNURL}${url}`;
+      }
+    },
+    handleImageError(event) {
+      // 处理图片加载错误的逻辑
+      event.target.src = 'path/to/default/image.jpg'; // 替换为默认图片的路径
     }
   },
   mounted() {
@@ -155,6 +165,16 @@ export default {
 
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
+#itemon{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+  z-index: 2;
+}
+
 #listmain{
   display: grid;
   @include media-breakpoint-between(xs, md) {
@@ -188,6 +208,9 @@ export default {
   }
 }
 .listblock img {
+  position: absolute;
+  top: 0;
+  left: 0;
   z-index: 0;
   @include media-breakpoint-between(xs, md){
     width: 100%;
@@ -230,7 +253,7 @@ export default {
   }
 
   @include media-breakpoint-up(md) {
-    grid-template-columns: repeat(4,minmax(0,300px)) !important;
+    grid-template-columns: repeat(4,1fr) !important;
     gap: 32px;
   }
 

src/components/Tools/Partners.vue

@@ -9,7 +9,7 @@
     <div v-for="item in logos"
         class="partneritempanel" id="ptn01">
       <div class="partnerlogodiv">
-        <img :src="`${this.$axios.defaults.baseURL}${item.url}`" alt="" />
+        <img :src="getImageUrl(item.url)" alt="" />
       </div>
     </div>
   </div>
@@ -44,6 +44,20 @@ export default {
           console.error(err);
           this.logos = [];
         });
+    },
+    getImageUrl(url) {
+      if (!url) return '';
+
+      // 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
+      if (url.startsWith('http://') || url.startsWith('https://')) {
+        // 提取路径部分（去掉协议和域名）
+        const urlObj = new URL(url);
+        const relativePath = urlObj.pathname;
+        return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
+      } else {
+        // 如果是相对路径，直接拼接CDN URL
+        return `${this.$axios.defaults.baseCDNURL}${url}`;
+      }
     }
   },
   mounted() {

src/main.js

@@ -11,6 +11,7 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
 const app = createApp(App)
 axios.defaults.baseURL = 'https://cms.kdesign.top'
+axios.defaults.baseCDNURL = 'https://cdn.kdesign.top'
 // axios.defaults.baseURL = 'http://localhost:8082'
 // 全局挂载 axios，所有组件都可以 this.$axios 访问
 app.config.globalProperties.$axios = axios