系统上线运行问题修改

src/utils/aes_new.js

@@ -0,0 +1,36 @@
+// src/utils/aesUtil.js
+import CryptoJS from 'crypto-js'
+
+/**
+ * AES解密函数
+ * @param {string} word - 需要解密的字符串
+ * @returns {string} 解密后的明文
+ */
+export function bnsCloudDecrypt(word) {
+  const key = CryptoJS.enc.Utf8.parse("bonus@cloud@2025")
+  const decrypt = CryptoJS.AES.decrypt(word, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString()
+}
+
+/**
+ * AES加密函数
+ * @param {string} word - 需要加密的明文
+ * @returns {string} 加密后的字符串
+ */
+export function bnsCloudEncrypt(word) {
+  const key = CryptoJS.enc.Utf8.parse("bonus@cloud@2025")
+  const srcs = CryptoJS.enc.Utf8.parse(word)
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  })
+  return encrypted.toString()
+}
+
+export default {
+  bnsCloudDecrypt,
+  bnsCloudEncrypt
+}

src/views/dataManage/product-center/components/addAndEditForm.vue

@@ -40,6 +40,32 @@
           </el-form-item>
         </el-col>
       </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="账号" prop="linkUser">
+            <el-input
+              clearable
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入账号"
+              v-model="addAndEditForm.linkUser"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="密码" prop="linkPassword">
+            <el-input
+              clearable
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入密码"
+              v-model="addAndEditForm.linkPassword"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
       <el-row>
         <el-col :span="12">
           <el-form-item label="链接" prop="linkUrl">
@@ -215,6 +241,9 @@ import {
 } from '@/api/dataManage/product-center'
 import TitleTip from '@/components/TitleTip'
 import UploadImgFormData from '@/components/UploadImgFormData'
+// import { bnsCloudEncrypt, bnsCloudDecrypt } from '@/utils/aes_new'
+
+
 export default {
   name: 'AddAndEditForm',
   dicts: ['tb_product_type'],
@@ -241,12 +270,21 @@ export default {
         linkUrl: '', // 链接
         isAccess: '1', // 是否支持访问
         introduction: '', // 产品介绍
+        linkUser: '', // 用户名
+        linkPassword: '',// 密码（明文）
+        encryptedPassword: '' // 加密后的密码
       },
       // 基本信息表单校验规则
       addAndEditFormRules: {
         name: [
           {required: true, message: '请输入名称', trigger: 'blur'},
         ],
+        linkUser: [
+          {required: true, message: '请输入账号', trigger: 'blur'},
+        ],
+        linkPassword: [
+          {required: true, message: '请输入密码', trigger: 'blur'},
+        ],
         typeId: [
           {required: true, message: '请输入类型', trigger: 'blur'},
         ],
@@ -347,6 +385,19 @@ export default {
 
       this.$emit('closeDialog', false)
     },
+
+    // 密码加密方法
+    encryptPassword(password) {
+      // if (!password) return ''
+      // try {
+      //   // 使用AES加密
+      //   return bnsCloudEncrypt(password)
+      // } catch (error) {
+      //   console.error('密码加密失败:', error)
+      //   return password // 加密失败时返回原始密码
+      // }
+    },
+
     // 保存操作：校验所有表单
     async handleSave() {
       this.$message.closeAll()
@@ -434,6 +485,7 @@ export default {
         // 3. 所有校验通过，提交数据
         const submitData = {
           ...this.addAndEditForm,
+          linkPassword: this.encryptPassword(this.addAndEditForm.linkPassword), // 加密密码
           cases: this.editableTabs.map((tab) => tab.formInfo),
         }
         console.log('提交数据：', submitData)
@@ -449,6 +501,8 @@ export default {
           linkUrl, // 链接
           isAccess, // 是否支持访问
           introduction, // 产品介绍
+          linkUser,       // 账号
+          linkPassword    // 密码
         } = this.addAndEditForm
         cover.forEach((item) => {
           if (!item.id) {
@@ -464,6 +518,8 @@ export default {
           linkUrl, // 链接
           isAccess, // 是否支持访问
           introduction, // 产品介绍
+          linkUser,       // 账号
+          linkPassword    // 密码
         }
 
         for (const key in addAndEditFormParams) {
@@ -612,6 +668,8 @@ export default {
         introduction,
         isAccess,
         list,
+        linkUser,
+        linkPassword
       } = res?.data
 
       this.addAndEditForm = {
@@ -621,6 +679,8 @@ export default {
         linkUrl,
         introduction,
         isAccess,
+        linkUser,
+        linkPassword,
         cover: [
           {url: image.url, id: image.id, name: image.originalName},
         ],

src/views/dataManage/product-center/index.vue

@@ -114,7 +114,7 @@
                         <a
                             target="_blank"
                             class="link-text"
-                            :href="scope.row[column.prop]"
+                            :href="getEncryptedUrl(scope.row)"
                         >
                             {{ scope.row[column.prop] }}
                         </a>
@@ -179,6 +179,7 @@ import {
 } from '@/api/dataManage/product-center'
 import DialogModel from '@/components/DialogModel'
 import AddAndEditForm from './components/addAndEditForm.vue'
+import {bnsCloudEncrypt, bnsCloudDecrypt} from '@/utils/aes_new'
 export default {
     name: 'ProductCenter',
     dicts: ['tb_product_type'],
@@ -236,6 +237,30 @@ export default {
         }
     },
     methods: {
+
+        getEncryptedUrl(row) {
+          const { linkUrl, linkUser, linkPassword } = row;
+
+          // 如果没有链接，返回空字符串
+          if (!linkUrl) return '';
+
+          // 如果存在用户名和密码，则进行加密并拼接到URL中
+          if (linkUser && linkPassword) {
+            // 先拼接成 username=admin&password=123 这样的字符串
+            const authString = `username=${linkUser}&password=${linkPassword}`;
+
+            // 对拼接后的字符串进行加密
+            const encryptedParams = bnsCloudEncrypt(authString);
+
+            // 将加密后的参数拼接到URL中
+            const separator = linkUrl.includes('?') ? '&' : '?';
+            return `${linkUrl}${separator}params=${encodeURIComponent(encryptedParams)}`;
+          }
+
+          // 如果没有用户名和密码，直接返回原始链接
+          return linkUrl;
+        },
+
         // 获取列表
         async getProductCenterListFun() {
             const res = await getProductCenterListAPI(this.queryParams)

src/views/publicService/proMaterials/index.vue

@@ -195,7 +195,7 @@ export default {
 
     // 获取产品卡片宽度
     getItemWidth() {
-      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
+      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 280) / 4
     },
 
     // 初始化左侧菜单列表
@@ -481,6 +481,7 @@ export default {
 
     .services-grid {
       height: 240px; /* 给子元素设置固定高度以便测试滚动 */
+      width: 365px;
       display: flex;
       flex-direction: column;
       align-items: center;

src/views/publicService/productCenter/index.vue

@@ -55,6 +55,8 @@
 
 <script>
 import {getProductCenterListAPI} from '@/api/publicService/productCenter'
+import {bnsCloudEncrypt, bnsCloudDecrypt} from '@/utils/aes_new'
+
 export default {
   name: 'ProductCenter',
   dicts: ['tb_product_type'],
@@ -98,7 +100,7 @@ export default {
   methods: {
     // 获取产品卡片宽度
     getItemWidth() {
-      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 120) / 4
+      this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 280) / 4
     },
 
     // 初始化左侧菜单列表
@@ -117,7 +119,8 @@ export default {
             })
           })
         }
-      } catch (error) {}
+      } catch (error) {
+      }
     },
     // 访问演示地址
     handleDemo(service) {
@@ -126,8 +129,48 @@ export default {
         return
       }
 
-      // 确保 URL 是完整的绝对路径
+      // 获取用户名和密码
+      const {linkUser, linkPassword} = service
+
       let url = service.linkUrl
+      // 如果存在用户名和密码，则进行加密并拼接到URL中
+      if (linkUser && linkPassword) {
+        // 先拼接成 username=admin&password=123 这样的字符串
+        const authString = `username=${linkUser}&password=${linkPassword}`
+
+        // 对拼接后的字符串进行加密
+        const encryptedParams = bnsCloudEncrypt(authString)
+
+        // 将加密后的参数拼接到URL中
+        const separator = url.includes('?') ? '&' : '?'
+        url += `${separator}params=${encodeURIComponent(encryptedParams)}`
+      } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
+        if (url.startsWith('www.')) {
+          url = 'https://' + url
+        } else {
+          // 其他情况，添加 https://
+          url = 'https://' + url
+        }
+      }
+
+      // 确保 URL 是完整的绝对路径
+      /*
+      const authData = {
+        username: linkUser,
+        password: linkPassword
+      }
+      // 将对象转换为JSON字符串并加密
+      const authJson = JSON.stringify(authData)
+      console.log(authJson)
+      const encryptedParams = bnsCloudEncrypt(authJson)
+      console.log(encryptedParams)
+
+
+      // 将加密后的用户名和密码拼接到URL参数中
+      const separator = url.includes('?') ? '&' : '?'
+      url += `${separator}params=${encodeURIComponent(encryptedParams)}`
+
       // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
       if (!url.startsWith('http://') && !url.startsWith('https://')) {
         // 如果 URL 以 www. 开头，直接添加 https://
@@ -137,7 +180,7 @@ export default {
           // 其他情况，添加 https://
           url = 'https://' + url
         }
-      }
+      }*/
 
       window.open(url, '_blank')
     },
@@ -245,6 +288,7 @@ export default {
 
     .services-grid {
       height: 260px; /* 给子元素设置固定高度以便测试滚动 */
+      width: 365px;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -457,8 +501,7 @@ export default {
 
 .category-item.active {
   // background-color: #4a90e2;
-  background: url('../../../assets/images/publicService/btn-sel.png')
+  background: url('../../../assets/images/publicService/btn-sel.png') no-repeat center center;
-  no-repeat center center;
   background-size: 100% 100%;
   color: white;
 }