feat(assets): configure centralized image URLs

public/index.html

@@ -12,6 +12,7 @@
     window.SITE_CONFIG['version'] = 'v2.5.0';
     window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
     window.SITE_CONFIG['apiURL'] = '';                      // api请求地址
+    window.SITE_CONFIG['assetURL'] = '';                    // 静态资源基础地址
     window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
     window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
       'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
@@ -37,6 +38,7 @@
     <script>
       // window.SITE_CONFIG['apiURL'] = 'https://transcend.ringzle.com/chuangheng-admin';
       window.SITE_CONFIG['apiURL'] = 'http://172.16.0.3:443/chuangheng-admin';//生产内网地址
+      window.SITE_CONFIG['assetURL'] = 'https://transcend.ringzle.com/web/assets';
       // window.SITE_CONFIG['apiURL'] = 'https://wxapp.transcend-intl.cn/chuangheng-admin';
       // window.SITE_CONFIG['apiURL'] = 'http://192.168.2.19:9021/chuangheng-admin';
       window.SITE_CONFIG['apiURL1'] = 'http://gpu.ringzle.com:8082/iot';
@@ -50,6 +52,7 @@
       <% if (process.env.VUE_APP_NODE_ENV==='prod:sit' ) { %>
         <script>
           window.SITE_CONFIG['apiURL'] = 'http://172.16.0.3:443/chuangheng-admin';
+          window.SITE_CONFIG['assetURL'] = 'https://transcend.ringzle.com/web/assets';
           // WebSocket地址
           window.SITE_CONFIG['socketURL'] = 'ws://gpu.ringzle.com/chuangheng-admin/websocket';
         </script>
@@ -58,6 +61,7 @@
           <% if (process.env.VUE_APP_NODE_ENV==='prod:uat' ) { %>
             <script>
               window.SITE_CONFIG['apiURL'] = 'http://172.16.0.3:443/chuangheng-admin';
+              window.SITE_CONFIG['assetURL'] = 'https://transcend.ringzle.com/web/assets';
               // WebSocket地址
               window.SITE_CONFIG['socketURL'] = 'ws://s.ringzle.com/chuangheng-admin/websocket';
             </script>
@@ -66,6 +70,7 @@
               <% if (process.env.VUE_APP_NODE_ENV==='prod' ) { %>
                 <script>
                   window.SITE_CONFIG['apiURL'] = '../chuangheng-admin';
+                  window.SITE_CONFIG['assetURL'] = 'https://transcend.ringzle.com/web/assets';
                   window.SITE_CONFIG['apiURL1'] = '../iot';
                   window.SITE_CONFIG['apiURL2'] = '../witcarbon-gica';
                   // WebSocket地址
@@ -78,4 +83,4 @@
   <div id="app"></div>
 </body>
 
-</html>
+</html>

src/components/reportPdf/pdf2.scss

@@ -7,7 +7,7 @@
     background-size: 100% 100%;
 
     &.fdy{
-        background: url('@/assets/images/versionTwo/fdy_bg.png') no-repeat;
+        background: var(--asset-fdy-bg) no-repeat;
         background-size: 100% 100%;
         position: relative;
 
@@ -123,7 +123,7 @@
         margin-top: 20px;
     }
     &.fm2{
-        background: url('@/assets/images/versionTwo/fm_bg.png') no-repeat;
+        background: var(--asset-fm-bg) no-repeat;
         background-size: 100% 100%;
         position: relative;
         justify-content: flex-end;
@@ -344,7 +344,7 @@
         .vsix-title{
             width: 234px;
             height: 42px;
-            background: url('@/assets/images/versionTwo/intro_box_title_bg.png') no-repeat;
+            background: var(--asset-intro-box-title-bg) no-repeat;
             background-size: 100% 100%;
             font-family: PingFangSC, PingFang SC;
             font-weight: 600;
@@ -912,4 +912,4 @@
     .lasttr div{
         border-bottom: none;
     }
-}
+}

src/components/reportPdf/pdf2.vue

@@ -1,10 +1,10 @@
 <template>
-    <div>
+    <div :style="assetStyleVars">
         <!-- 封面 -->
         <div class="cd_box fm2 adffc" style="border: none;margin-top: 20px;height: 868px;">
-            <img class="fm2-logo" src="@/assets/images/versionTwo/fm_logo.png">
-            <img class="fm2-logo2" src="@/assets/images/versionTwo/fm_logo2.png">
-            <img class="fm2-perill" src="@/assets/images/versionTwo/fm_perill.png">
+            <img class="fm2-logo" :src="assetUrl('fm_logo.png')">
+            <img class="fm2-logo2" :src="assetUrl('fm_logo2.png')">
+            <img class="fm2-perill" :src="assetUrl('fm_perill.png')">
             <div class="fm2-line"></div>
             <div class="fm2-p" style="margin-top: 4px;font-size: 38px;">团队发展动态评估报告(团队版)</div>
             <div class="fm2-texts adf">
@@ -37,12 +37,12 @@
         </div>
         <!-- 介绍 -->
         <div class="cd_box" style="border: none">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')','padding':'0 8px 0 24px'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_title_bg.png')})`,'padding':'0 8px 0 24px'}">
                 <div class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</div>
                 <div class="vt-right">团队发展动态评估报告(团队版) </div>
             </div>
             <div class="v2-box">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2-p">PERILL倍力企业六维评估源于团队教练辅导领域的先驱、管理思维与团队绩效领域的权威、全球顶尖团队教练David Clutterbuck教授及其团队通过深入研究，提炼出影响团队绩效的140多个基于实证的因素，整合而成的团队评估和提升工具-PERILL模型。</div>
                 <div class="v2-p" style="margin-top: 8px;">创衡国际基于10多年来在全球与200多家具有前瞻性的国际公司以及国内具有行业代表性公司的合作经验，结合CCMI的PERILL评估工具，在中国推出的团队发展动态评估系统，旨在帮助团队更全面、更有效地从六个维度评估团队的发展现状，为支持团队成为高价值创造团队提供全景式的客观评估。</div>
                 <div class="v2-p" style="margin-top: 8px;">PERILL倍力企业六维评估(团队版)的主体内容由<span>{{ reportData?.teamInfo?.questionCount }}</span>个关于团队的描述组成。</div>
@@ -66,12 +66,12 @@
         </div>
         <!-- 总体评估分析 -->
         <div class="cd_box adffc" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_top_title_bg2.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_top_title_bg2.png')})`}">
                 <div class="vt-left">总体评估分析</div>
                 <div class="vt-right">团队发展动态评估报告(团队版) </div>
             </div>
             <div class="v2-box" style="border: 1px solid #33A7A7;">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2-p2">报告的核心是PERILL评估分析下的整体团队表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</div>
                 <div class="v2-p2" style="margin-top: 2px;font-weight: 400;color: #002846;font-size: 10px;">下面图中的位置标记显示了团队按影响力划分的总分。</div>
                 <div class="vb-category">
@@ -135,12 +135,12 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         </div>
         <!-- 总体评估分析 评估建议-->
         <div class="cd_box adffc" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_top_title_bg2.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_top_title_bg2.png')})`}>
                 <div class="vt-left">总体评估分析</div>
                 <div class="vt-right">团队发展动态评估报告(团队版) </div>
             </div>
             <div class="v2-box" style="border: 1px solid #33A7A7;">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2b-title" style="margin-top: 0;">评估结果</div>
                 <div class="v2b-p" v-html="renderMarkdown(reportData?.totalDiagnosticOutput||'')"></div>
                 <div class="v2b-title" style="margin-top: 12px;">评估建议</div>
@@ -151,7 +151,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         <template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
             <block v-for="(item,index) in reportData?.dimensionAnalysis" :key="index">
                 <div class="cd_box adffc" style="border: none;">
-                    <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png')+')'}">
+                    <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png')+')'}">
                         <div class="vt-left" :class="{'black':['人际关系','学习'].includes(item.title)}">{{ item.title }}</div>
                         <div class="vt-right">团队发展动态评估报告(团队版) </div>
                     </div>
@@ -201,7 +201,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
                     </div>
                 </div>
                 <div class="cd_box adffc" style="border: none;">
-                    <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png')+')'}">
+                    <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png')+')'}">
                         <div class="vt-left" :class="{'black':['人际关系','学习'].includes(item.title)}">{{ item.title }}</div>
                         <div class="vt-right">团队发展动态评估报告(团队版) </div>
                     </div>
@@ -213,7 +213,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         </template>
         <!-- 封底页 -->
         <div class="cd_box fdy" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/fdy_title_bg.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('fdy_title_bg.png')})`}">
                 <div class="vt-left" style="color: #FFFFFF;">结言</div>
                 <div class="vt-right">团队发展动态评估报告(团队版)</div>
             </div>
@@ -245,7 +245,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
             <div class="fdy-p">PERILL不止于评估，更在于赋能。期待与您和团队同行，见证未来的更多可能。</div>
             <div class="fdy-p" style="margin-top: 8px;">具体需求可联系您的团队教练 或 扫码联系“⼤衡同学”。</div>
             <div class="fdy-code adffcac">
-                <img class="fdy-code-team" :src="require('@/assets/images/versionTwo/fdy_code.png')">
+                <img class="fdy-code-team" :src="assetUrl('fdy_code.png')">
                 <p style="margin-top: 0;font-size: 10px;color: #002846;line-height: 18px;">扫码联系大衡同学</p>
             </div>
             <div class="v2b-alert">注：团队发展本身就不是单一答案的过程，PERILL AI教练根据创衡独创团队教练方法论，可以从不同角度解读团队，发现那些隐藏的机会点。多元建议代表多元可能。您可以尝试再次生成评估报告，探索更多可能性。</div>
@@ -260,9 +260,15 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
             default: () => {}
         }
     })
-    import * as echarts from "echarts";
-    import { ref, onMounted, nextTick } from 'vue'
-    const reportData = ref(null);
+    import * as echarts from "echarts";
+    import { ref, onMounted, nextTick } from 'vue'
+    import { assetUrl } from '@/utils/assetUrl'
+    const reportData = ref(null);
+    const assetStyleVars = {
+        '--asset-fm-bg': `url(${assetUrl('fm_bg.png')})`,
+        '--asset-fdy-bg': `url(${assetUrl('fdy_bg.png')})`,
+        '--asset-intro-box-title-bg': `url(${assetUrl('intro_box_title_bg.png')})`
+    };
     const typeDict = {
         '宗旨与动机':'zzdj',
         '外部流程、系统与结构':'wbjg',
@@ -273,42 +279,42 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
     }
     const sixWd = ref([
         {
-            img:require('@/assets/images/versionTwo/intro_img_p.png'),
+            img:assetUrl('intro_img_p.png'),
             type:'P',
             title:'宗旨与动机',
             desc:'指团队共享的目的和存在的意义, 包含对共同的愿景，目标和优先级的清晰度。',
             color:'#761E6A'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_e.png'),
+            img:assetUrl('intro_img_e.png'),
             type:'E',
             title:'外部流程、系统与结构',
             desc:'指团队与其外部利益相关者 - 客户,供应商,股东,组织内的上级及其他团队的互动关系和协作机制。',
             color:'#009191'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_r.png'),
+            img:assetUrl('intro_img_r.png'),
             type:'R',
             title:'人际关系',
             desc:'指团队成员共同工作时的关系状态–他们是否相互尊重和信任对方的能力,是否足够心理安全以能够坦诚沟通,是否真正关心彼此的幸福感等。',
             color:'#FFD750'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_i.png'),
+            img:assetUrl('intro_img_i.png'),
             type:'I',
             title:'内部流程、系统与结构',
             desc:'指团队如何管理工作任务和流程(包括但不限于会议、任务分配和团队情绪等),互相支持以及高质量的沟通和决策。',
             color:'#4EB2B2'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_l.png'),
+            img:assetUrl('intro_img_l.png'),
             type:'L',
             title:'学习',
             desc:'指团队如何应对多变的环境和保持持续的进步和成⻓,能够从经验中反思、提炼并应用知识的能力。',
             color:'#AFCDF5'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_l2.png'),
+            img:assetUrl('intro_img_l2.png'),
             type:'L',
             title:'领导力',
             desc:'指团队认为需要怎样的领导行为能够让他们,作为个人或者团队做到最好。团队可以和他们的领导者讨论他们的责任及承担方式,以帮助领导者成为他们需要的领导者。',

src/components/reportPdf/pdfUser2.vue

@@ -1,10 +1,10 @@
 <template>
-    <div>
+    <div :style="assetStyleVars">
         <!-- 封面 -->
         <div class="cd_box fm2 adffc" style="border: none;margin-top: 20px;height: 868px;">
-            <img class="fm2-logo" src="@/assets/images/versionTwo/fm_logo.png">
-            <img class="fm2-logo2" src="@/assets/images/versionTwo/fm_logo2.png">
-            <img class="fm2-perill" src="@/assets/images/versionTwo/fm_perill.png">
+            <img class="fm2-logo" :src="assetUrl('fm_logo.png')">
+            <img class="fm2-logo2" :src="assetUrl('fm_logo2.png')">
+            <img class="fm2-perill" :src="assetUrl('fm_perill.png')">
             <div class="fm2-line"></div>
             <div class="fm2-p">团队发展动态评估报告(个人版)</div>
             <div class="fm2-texts adf">
@@ -17,12 +17,12 @@
         </div>
         <!-- 介绍 -->
         <div class="cd_box" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')','padding':'0 8px 0 24px'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_title_bg.png')})`,'padding':'0 8px 0 24px'}">
                 <div class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</div>
                 <div class="vt-right">团队发展动态评估报告(个人版)</div>
             </div>
             <div class="v2-box">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2-p">PERILL倍力企业六维评估源于团队教练辅导领域的先驱、管理思维与团队绩效领域的权威、全球顶尖团队教练David Clutterbuck教授及其团队通过深入研究，提炼出影响团队绩效的140多个基于实证的因素，整合而成的团队评估和提升工具-PERILL模型。</div>
                 <div class="v2-p" style="margin-top: 8px;">创衡国际基于10多年来在全球与200多家具有前瞻性的国际公司以及国内具有行业代表性公司的合作经验，结合CCMI的PERILL评估工具，在中国推出的团队发展动态评估系统，旨在帮助团队更全面、更有效地从六个维度评估团队的发展现状，为支持团队成为高价值创造团队提供全景式的客观评估。</div>
                 <div class="v2-p" style="margin-top: 8px;">PERILL倍力企业六维评估(个人版)的主体内容由<span>{{ reportData?.teamInfo?.questionCount||0 }}</span>个关于团队的描述组成。</div>
@@ -46,12 +46,12 @@
         </div>
         <!-- 总体评估分析 -->
         <div class="cd_box adffc" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_top_title_bg2.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_top_title_bg2.png')})`}">
                 <div class="vt-left">总体评估分析</div>
                 <div class="vt-right">团队发展动态评估报告(个人版)</div>
             </div>
             <div class="v2-box">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2-p2">报告的核心是PERILL评估分析下从评估发起者个人维度来看其所在整体团队当前状态下的表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</div>
                 <div class="v2-p2" style="margin-top: 6px;">下面的条形图上的位置标记显示了团队在各个维度上的影响力评分。</div>
                 <div id="ztzdfxRef" style="width: 100%; height: 200px;" class="pdfEchart"></div>
@@ -65,12 +65,12 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         </div>
         <!-- 总体评估分析 评估建议-->
         <div class="cd_box adffc" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_top_title_bg2.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_top_title_bg2.png')})`}">
                 <div class="vt-left">总体评估分析</div>
                 <div class="vt-right">团队发展动态评估报告(个人版)</div>
             </div>
             <div class="v2-box">
-                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <img class="vb-img1" :src="assetUrl('intro_box_img1.png')">
                 <div class="v2b-title" style="margin-top: 0;">评估建议</div>
                 <div class="v2b-p" v-html="renderMarkdown(reportData?.totalDiagnosisSuggest||'')"></div>
             </div>
@@ -78,7 +78,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         <!-- 多维度 -->
         <template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
             <div class="cd_box adffc" style="border: none;" v-for="(n,i) in [[0,2],[2,4],[4,6]]" :key="i">
-                <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')','padding':'0 8px 0 24px'}">
+                <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('intro_title_bg.png')})`,'padding':'0 8px 0 24px'}">
                     <div class="vt-left" style="color: #FFFFFF;">PERILL六大纬度</div>
                     <div class="vt-right">团队发展动态评估报告(个人版)</div>
                 </div>
@@ -131,7 +131,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
         </template>
         <!-- 封底页 -->
         <div class="cd_box fdy" style="border: none;">
-            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/fdy_title_bg.png')+')'}">
+            <div class="v2-top adfacjb" :style="{'background-image':`url(${assetUrl('fdy_title_bg.png')})`}">
                 <div class="vt-left" style="color: #FFFFFF;">结言</div>
                 <div class="vt-right">团队发展动态评估报告(个人版)</div>
             </div>
@@ -156,7 +156,7 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
             <div class="fdy-p">PERILL不止于评估，更在于赋能。期待与您和团队同行，见证未来的更多可能。</div>
             <div class="fdy-p">具体需求可联系您的团队教练或扫码联系“⼤衡同学”。</div>
             <div class="fdy-code adffcac" style="margin-top: 14px;">
-                <img :src="require('@/assets/images/versionTwo/fdy_code.png')">
+                <img :src="assetUrl('fdy_code.png')">
                 <p style="margin-top: 0;font-size: 10px;color: #002846;line-height: 18px;">扫码联系大衡同学</p>
             </div>
             <div class="v2b-alert" style="margin-top: 28px;">注：团队发展本身就不是单一答案的过程，PERILL AI教练根据创衡独创团队教练方法论，可以从不同角度解读团队，发现那些隐藏的机会点。多元建议代表多元可能。您可以尝试再次生成评估报告，探索更多可能性。</div>
@@ -171,47 +171,53 @@ c.“影响力分”，指标逻辑为综合团队全体对当前主题所对应
             default: () => {}
         }
     })
-    import * as echarts from "echarts";
-    import { ref, onMounted, nextTick } from 'vue'
-    const reportData = ref(null);
+    import * as echarts from "echarts";
+    import { ref, onMounted, nextTick } from 'vue'
+    import { assetUrl } from '@/utils/assetUrl'
+    const reportData = ref(null);
+    const assetStyleVars = {
+        '--asset-fm-bg': `url(${assetUrl('fm_bg.png')})`,
+        '--asset-fdy-bg': `url(${assetUrl('fdy_bg.png')})`,
+        '--asset-intro-box-title-bg': `url(${assetUrl('intro_box_title_bg.png')})`
+    };
     const sixWd = ref([
         {
-            img:require('@/assets/images/versionTwo/intro_img_p.png'),
+            img:assetUrl('intro_img_p.png'),
             type:'P',
             title:'宗旨与动机',
             desc:'指团队共享的目的和存在的意义, 包含对共同的愿景，目标和优先级的清晰度。',
             color:'#761E6A'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_e.png'),
+            img:assetUrl('intro_img_e.png'),
             type:'E',
             title:'外部流程、系统与结构',
             desc:'指团队与其外部利益相关者 - 客户,供应商,股东,组织内的上级及其他团队的互动关系和协作机制。',
             color:'#009191'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_r.png'),
+            img:assetUrl('intro_img_r.png'),
             type:'R',
             title:'人际关系',
             desc:'指团队成员共同工作时的关系状态–他们是否相互尊重和信任对方的能力,是否足够心理安全以能够坦诚沟通,是否真正关心彼此的幸福感等。',
             color:'#FFD750'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_i.png'),
+            img:assetUrl('intro_img_i.png'),
             type:'I',
             title:'内部流程、系统与结构',
             desc:'指团队如何管理工作任务和流程(包括但不限于会议、任务分配和团队情绪等),互相支持以及高质量的沟通和决策。',
             color:'#4EB2B2'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_l.png'),
+            img:assetUrl('intro_img_l.png'),
             type:'L',
             title:'学习',
             desc:'指团队如何应对多变的环境和保持持续的进步和成⻓,能够从经验中反思、提炼并应用知识的能力。',
             color:'#AFCDF5'
         },
         {
-            img:require('@/assets/images/versionTwo/intro_img_l2.png'),
+            img:assetUrl('intro_img_l2.png'),
             type:'L',
             title:'领导力',
             desc:'指团队认为需要怎样的领导行为能够让他们,作为个人或者团队做到最好。团队可以和他们的领导者讨论他们的责任及承担方式,以帮助领导者成为他们需要的领导者。',

src/utils/assetUrl.js

@@ -0,0 +1,11 @@
+const IMAGE_PATH = '/images/';
+
+export function assetUrl(filename) {
+  const siteConfig = typeof window !== 'undefined' && window.SITE_CONFIG
+    ? window.SITE_CONFIG
+    : {};
+  const baseUrl = String(siteConfig.assetURL || '').replace(/\/+$/, '');
+  const normalizedFilename = String(filename || '').replace(/^\/+/, '');
+
+  return `${baseUrl}${IMAGE_PATH}${encodeURIComponent(normalizedFilename)}`;
+}

tests/unit/assetUrl.spec.js

@@ -0,0 +1,25 @@
+import { assetUrl } from '@/utils/assetUrl';
+
+describe('assetUrl', () => {
+  const originalWindow = global.window;
+
+  afterEach(() => {
+    global.window = originalWindow;
+  });
+
+  test('combines the configured asset base with the public image path', () => {
+    global.window = { SITE_CONFIG: { assetURL: 'https://transcend.ringzle.com/web/assets' } };
+
+    expect(assetUrl('fm_logo.png')).toBe(
+      'https://transcend.ringzle.com/web/assets/images/fm_logo.png'
+    );
+  });
+
+  test('normalizes duplicate slashes in the configured base', () => {
+    global.window = { SITE_CONFIG: { assetURL: 'https://transcend.ringzle.com/web/assets/' } };
+
+    expect(assetUrl('/fm_logo.png')).toBe(
+      'https://transcend.ringzle.com/web/assets/images/fm_logo.png'
+    );
+  });
+});