From 92707a8eab926b805c1dfe9ed72882729f18b2e4 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Fri, 26 Sep 2025 15:50:33 +0800
Subject: [PATCH] uptada

---
 f/web-kboss/src/layout/components/Navbar.vue  |   4 +-
 .../src/layout/components/Sidebar/index.vue   |   1 -
 .../unsubscribe/BaiduNetdisk.vue/index.vue    | 102 +++-
 .../homePage/components/topBox/index.vue      | 504 ++++++++++--------
 4 files changed, 370 insertions(+), 241 deletions(-)

diff --git a/f/web-kboss/src/layout/components/Navbar.vue b/f/web-kboss/src/layout/components/Navbar.vue
index 0329e03..3b5681a 100644
--- a/f/web-kboss/src/layout/components/Navbar.vue
+++ b/f/web-kboss/src/layout/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar" style="height: 48px;background-color: white;color: white!important;">
+  <div class="navbar" style="background-color: white;color: white!important;">
     <div class="logo" v-if="isShowKbossCharge">
       <img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
       <span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
@@ -1413,7 +1413,7 @@ export default {
 
 
 .navbar {
-  height: 50px;
+
   overflow: hidden;
   position: relative;
   background: #fff;
diff --git a/f/web-kboss/src/layout/components/Sidebar/index.vue b/f/web-kboss/src/layout/components/Sidebar/index.vue
index 0bfec19..16bb303 100644
--- a/f/web-kboss/src/layout/components/Sidebar/index.vue
+++ b/f/web-kboss/src/layout/components/Sidebar/index.vue
@@ -6,7 +6,6 @@
       <Logo v-if="showLogo" :collapse="isCollapse" />
       <!-- 菜单 -->
       <happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
-
         <el-menu
           :collapse="isCollapse"
           :background-color="variables.menuBg"
diff --git a/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue b/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
index 675b64d..ad5f607 100644
--- a/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
+++ b/f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
@@ -1,12 +1,31 @@
 <template>
   <div class="box">
-    <!-- 添加全屏加载效果 -->
-    <div v-loading="loading" class="loading-container">
-      <iframe v-if="url" :src="url" frameborder="0" class="baidu-style">
+    <!-- 使用全屏加载效果 -->
+    <div v-loading="loading"
+         element-loading-text="页面加载中..."
+         element-loading-spinner="el-icon-loading"
+         element-loading-background="rgba(255, 255, 255, 0.8)"
+         class="loading-container">
+
+      <iframe
+        v-if="url && !loading"
+        :src="url"
+        frameborder="0"
+        class="baidu-style"
+        @load="onIframeLoad">
       </iframe>
-      <div v-else class="login-prompt">
-        <p>请先登录百度云账号</p>
-        <button @click="getToken">重试</button>
+
+      <div v-if="!url && !loading" class="login-prompt">
+        <el-alert
+          title="登录提示"
+          description="请先登录百度云账号"
+          type="warning"
+          show-icon
+          :closable="false">
+        </el-alert>
+        <el-button type="primary" @click="getToken" style="margin-top: 20px;">
+          重新获取登录信息
+        </el-button>
       </div>
     </div>
   </div>
@@ -24,6 +43,7 @@ export default {
       url: '',
       loading: true,
       userid: '',
+      iframeLoading: false // 单独控制iframe加载状态
     }
   },
   async created() {
@@ -40,8 +60,11 @@ export default {
     async getToken() {
       try {
         this.loading = true;
+        this.url = ''; // 清空url，避免显示旧的iframe
+
         const response = await baiducloudAPI();
         this.userToken = response.data;
+
         if (this.userToken) {
           const baseUrl = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken';
           const redirectUrl = encodeURIComponent('https://console.vcp.baidu.com/billing/#/refund/list');
@@ -55,64 +78,68 @@ export default {
         console.error('获取百度云Token失败:', error);
         this.$message.error('网络错误，获取登录信息失败');
       } finally {
-        this.loading = false;
+        // 这里不立即关闭loading，等待iframe加载
       }
     },
 
+    // iframe加载完成回调
+    onIframeLoad() {
+      console.log('iframe加载完成');
+      this.loading = false;
+      this.iframeLoading = false;
+    },
+
     receiveMessage(event) {
       console.log('接收到消息:', event);
       const data = event.data;
       console.log('接收到的 data 是:', data);
 
-      // 2. 检查是否存在 refundInfo 和 uuidList
       if (data && data.refundInfo && Array.isArray(data.refundInfo.uuidList) && data.refundInfo.uuidList.length > 0) {
-        const uuidListArray = data.refundInfo.uuidList; // 这是一个数组
+        const uuidListArray = data.refundInfo.uuidList;
 
         console.log('提取到的订单ID:', uuidListArray);
 
-        // 4. 获取用户ID
         this.userid = sessionStorage.getItem('userId');
         if (!this.userid) {
-          console.error('未获取到用户ID (sessionStorage 中缺少 userId)');
+          console.error('未获取到用户ID');
           this.$message.error('用户信息获取失败，请重新登录');
           return;
         }
 
-        // 5. 构造请求参数
         const payload = {
           order_id: uuidListArray,
           userid: this.userid
         };
 
-        // 6. 显示加载状态
-        this.loading = true;
+        // 显示退订操作的加载状态
+        const loadingInstance = this.$loading({
+          lock: true,
+          text: '退订处理中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
 
-        // 7. 调用退订API
         reqConfirmBtn(payload)
           .then((res) => {
-            console.log("调用 reqBaiduJudgePrice 接口返回:", res);
-            if (res.status) { // 假设 status 为 true 表示成功
+            console.log("退订接口返回:", res);
+            if (res.status) {
               this.$message.success('退订成功');
-              // 修复页面跳转 - 使用 path 而不是 url
               this.$router.push({
                 path: '/BaiduNetdisk',
               });
             } else {
-              // 显示后端返回的错误信息
               this.$message.error(res.msg || '退订失败，请稍后重试');
             }
           })
           .catch((error) => {
-            // 捕获网络错误或请求异常 (如超时、连接失败)
-            console.error("调用退订接口 reqBaiduJudgePrice 失败 (网络/请求错误):", error);
-            this.$message.error('网络请求失败或服务异常，请检查网络连接后重试');
+            console.error("退订接口调用失败:", error);
+            this.$message.error('网络请求失败，请检查网络连接后重试');
           })
           .finally(() => {
-            // 无论成功或失败，都结束加载状态
-            this.loading = false;
+            loadingInstance.close();
           });
       } else {
-        console.log('接收到的消息不包含有效的退款信息或 uuidList 为空');
+        console.log('接收到的消息不包含有效的退款信息');
       }
     }
   }
@@ -123,21 +150,44 @@ export default {
 .box {
   padding: 10px;
   height: 100%;
+  position: relative;
 }
 
 .loading-container {
   width: 100%;
   height: 100%;
   position: relative;
+  min-height: 400px;
 }
 
 .login-prompt {
   text-align: center;
   padding: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 .baidu-style {
   width: 100%;
   height: calc(100vh - 100px);
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
-</style>
\ No newline at end of file
+
+// 自定义加载样式
+::v-deep .el-loading-spinner {
+  .el-icon-loading {
+    color: #409EFF;
+    font-size: 40px;
+  }
+  .el-loading-text {
+    color: #409EFF;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue
index f67181c..4884262 100644
--- a/f/web-kboss/src/views/homePage/components/topBox/index.vue
+++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue
@@ -1,55 +1,77 @@
 <template>
   <div class="top-nav">
+    <!-- 顶部容器，根据homePath决定布局样式 -->
     <div id="topContainer" class="container" :class="{ 'ncmatch-layout': homePath === '/ncmatchHome/index' }">
       <!-- 当homePath不等于/ncmatchHome/index时显示logo和导航 -->
       <div class="logo" v-if="homePath !== '/ncmatchHome/index'">
-        <img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)"
-          style="cursor:pointer;margin-right: 71px" class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
+        <!-- Logo图片，点击跳转首页 -->
+        <img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)" style="cursor:pointer;"
+          class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
 
+        <!-- 主导航菜单 -->
         <nav class="main-nav" v-if="!isNcmatchHome">
-          <ul>
-            <li :class="{ active: $route.path.includes('/index') }">
-              <a @click="$router.push(homePath)">首页</a>
-            </li>
-            <li @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)"><a>产品与服务</a></li>
-            <!--            <li :class="{ active: $route.path.includes('/new') }" @mouseleave="sildeOut"-->
-            <!--            ><a-->
-            <!--            >政策解读</a></li>-->
-            <!--            <li :class="{ active: $route.path.includes('/sale') }" @mouseleave="sildeOut"-->
-            <!--            ><a-->
-            <!--            >促销活动</a></li>-->
-            <!--            <li @mouseleave="sildeOut"  @mouseenter="sildeIn(storageData())"><a href="#">解决方案</a></li>-->
-            <li :class="{ active: $route.path.includes('/about') }" @mouseleave="sildeOut"
-              @click="$router.push('/homePage/about')"><a>关于我们</a></li>
-
-
-          </ul>
+          <div class="nav-list">
+            <!-- 首页 -->
+            <p :class="{ active: $route.path.includes('/index') }">
+              <a @click="$router.push(homePath)">{{ translations[language].home }}</a>
+            </p>
+            <!-- 最新活动 -->
+            <p>
+              <a>{{ translations[language].latestActivity }}</a>
+            </p>
+            <!-- ai -->
+            <p>
+              <a>AI</a>
+            </p>
+            <!-- 融合云 -->
+            <p>
+              <a>{{ translations[language].fusionCloud }}</a>
+            </p>
+            <!-- 解决方案 -->
+            <p>
+              <a>{{ translations[language].solutions }}</a>
+            </p>
+            <!-- 生态与合作：鼠标移入显示子菜单 -->
+            <p @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)">
+              <a>{{ translations[language].ecosystem }}</a>
+            </p>
+            <!-- 关于我们 -->
+            <p :class="{ active: $route.path.includes('/about') }" @mouseleave="sildeOut"
+              @click="$router.push('/homePage/about')">
+              <a>{{ translations[language].aboutUs }}</a>
+            </p>
+          </div>
         </nav>
       </div>
 
       <!-- 当homePath等于/ncmatchHome/index时的布局 -->
       <div class="logo" v-else>
-        <!-- 登录状态：用户头像在最左侧 -->
+        <!-- 登录状态下，左侧显示用户信息下拉菜单 -->
         <el-dropdown v-if="loginState" @visible-change="handleShow"
           class="avatar-container left-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click">
           <div class="avatar-wrapper">
+            <!-- 显示用户名首字母头像和用户名 -->
             <i
               style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-start;align-items: center">
               <div class="imgUser">{{ nick_name.charAt(0) }}</div>
               {{ nick_name }}
+              <!-- 下拉箭头图标 -->
               <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
             </i>
           </div>
+          <!-- 用户信息下拉菜单内容 -->
           <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
+            <!-- 用户信息头部 -->
             <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
               <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
               <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
+                <!-- 用户ID，点击复制按钮可复制 -->
                 <span ref="contentToCopy">
                   {{
                     userId
                   }}
-
                 </span>
+                <!-- 复制按钮 -->
                 <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                   width="12" height="12" style="fill: #1019ab;">
                   <path
@@ -58,72 +80,97 @@
                 </svg>
               </span>
             </div>
+            <!-- 分割线 -->
             <el-divider style="margin: 0!important;"></el-divider>
+            <!-- 客户角色余额和充值按钮 -->
             <div v-if="role.includes('客户')"
               style="padding: 0 18px;  width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
-
               <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
-                  style="display: block;margin-bottom: 5px">余额</span>{{
+                  style="display: block;margin-bottom: 5px">{{ translations[language].balance }}</span>{{
                     mybalance ? mybalance : initMybalance()
-                }} ￥</span>
+                  }} ￥</span>
               <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
                 style="padding: 8px; ">
-                充值
+                {{ translations[language].recharge }}
               </el-button>
             </div>
+            <!-- 个人中心菜单项 -->
             <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
-              <span style="display: block">个人中心</span>
+              <span style="display: block">{{ translations[language].personalCenter }}</span>
             </el-dropdown-item>
+            <!-- 退出登录菜单项 -->
             <el-dropdown-item @click.native="logout">
-              <span style="display: block">退出登录</span>
+              <span style="display: block">{{ translations[language].logout }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 
-        <!-- 公司名称在中间 -->
+        <!-- 公司名称居中显示，点击跳转首页 -->
         <div class="company-name" @click="$router.push(homePath)"
           style="cursor:pointer;font-size: 24px;font-weight: bold;color: #222F60;margin: 0 auto;">
           {{ (logoInfoNew.home && logoInfoNew.home.orgName) || '' }}
         </div>
       </div>
 
-
+      <!-- 用户区域：登录/注册按钮和用户下拉菜单 -->
       <div class="user-area">
-        <a @click="goB" v-if="loginState" class="login-btn">控制台</a>
+        <!-- 搜索框 -->
+        <div class="search-box">
+          <i class="el-icon-search"></i>
+          <input type="text" :placeholder="translations[language].searchPlaceholder">
+        </div>
+        <!-- 中英互译 -->
+        <div class="language-toggle " @click="toggleLanguage">
+          <span class="language-text">{{ language === 'zh' ? 'English' : '中' }}</span>
+        </div>
+        <!-- AI -->
+        <i class="el-icon-s-promotion functions"></i>
+        <!-- 客服 -->
+        <i class="el-icon-headset functions"></i>
+        <!-- 控制台按钮（已登录） -->
+        <a @click="goB" v-if="loginState" class="login-btn">{{ translations[language].console }}</a>
+        <!-- 消息 -->
+        <i class="el-icon-message functions"></i>
+        <!-- 登录按钮（未登录） -->
         <a @click="$router.push({
           path: '/login',
           query: {
             fromPath: 'homePage'
           }
-        })" v-if="!loginState" class="login-btn">登录</a>
-        <a @click="$router.push('/registrationPage')" v-if="!loginState" class="register-btn">立即注册</a>
-        <!--        <span style="text-decoration: underline; text-decoration-color: #1b5bff" v-if="!showRegisterButton">{{-->
-        <!--            username-->
-        <!--          }}</span>-->
+        })" v-if="!loginState" class="login-btn">{{ translations[language].login }}</a>
+        <!-- 注册按钮（未登录） -->
+        <a @click="$router.push('/registrationPage')" v-if="!loginState" class="register-btn">{{
+          translations[language].register }}</a>
+
+        <!-- 用户名（注释掉） -->
+        <!-- <span style="text-decoration: underline; text-decoration-color: #1b5bff" v-if="!showRegisterButton">{{ username }}</span> -->
+
+        <!-- 用户下拉菜单（非ncmatchHome页面且已登录） -->
         <el-dropdown v-if="loginState && homePath !== '/ncmatchHome/index'" @visible-change="handleShow"
           class="avatar-container right-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click">
           <div class="avatar-wrapper">
-            <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
+            <!-- 显示用户名首字母头像和用户名 -->
             <i
               style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-end;align-items: center">
-              <div class="imgUser">{{ nick_name.charAt(0) }}</div>
+              <div class="imgUser"><img src="/static/img/user.png" alt=""></div>
               {{ nick_name }}
+              <!-- 下拉箭头图标 -->
               <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
-              <!--            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
-
             </i>
-            <!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
           </div>
+          <!-- 用户信息下拉菜单内容 -->
           <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
+            <!-- 用户信息头部 -->
             <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
               <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
               <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
+                <!-- 用户ID，点击复制按钮可复制 -->
                 <span ref="contentToCopy">
                   {{
                     userId
                   }}
-
                 </span>
+                <!-- 复制按钮 -->
                 <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                   width="12" height="12" style="fill: #1019ab;">
                   <path
@@ -132,97 +179,81 @@
                 </svg>
               </span>
             </div>
+            <!-- 分割线 -->
             <el-divider style="margin: 0!important;"></el-divider>
+            <!-- 客户角色余额和充值按钮 -->
             <div v-if="role.includes('客户')"
               style="padding: 0 18px;  width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
-
               <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
-                  style="display: block;margin-bottom: 5px">余额</span>{{
+                  style="display: block;margin-bottom: 5px">{{ translations[language].balance }}</span>{{
                     mybalance ? mybalance : initMybalance()
-                }} ￥</span>
+                  }} ￥</span>
               <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
                 style="padding: 8px; ">
-                充值
+                {{ translations[language].recharge }}
               </el-button>
             </div>
+            <!-- 个人中心菜单项 -->
             <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
-              <span style="display: block">个人中心</span>
+              <span style="display: block">{{ translations[language].personalCenter }}</span>
             </el-dropdown-item>
-            <!--           channelManagementShow=true-->
-            <!--          v-if="role.includes('客户')"-->
-            <!--            <el-dropdown-item v-if="role.includes('客户')"-->
-            <!--                              @click.native="channelFirstBtn">-->
-            <!--            <span style="display: block">渠道管理</span>-->
-            <!--            </el-dropdown-item>-->
-            <!--            <el-dropdown-item v-if="role.includes('客户')">-->
-            <!--            <span style="display: block" @click="showCode">促销邀请码</span>-->
-            <!--            </el-dropdown-item>-->
-            <!--            <el-dropdown-item @click.native="edituserPassword()">-->
-            <!--            <span style="display: block">修改密码</span>-->
-            <!--            </el-dropdown-item>-->
-
-            <!-- <el-dropdown-item @click.native="personalMessage" v-if="org_type == 2 || org_type == 3">
-              <span style="display: block">个人信息</span>
-            </el-dropdown-item> -->
+            <!-- 退出登录菜单项 -->
             <el-dropdown-item @click.native="logout">
-              <span style="display: block">退出登录</span>
+              <span style="display: block">{{ translations[language].logout }}</span>
             </el-dropdown-item>
-            <!--          <el-dropdown-item v-if="isLocalhost" @click.native="logout1">-->
-            <!--            <span style="display: block">退登</span>-->
-            <!--          </el-dropdown-item>-->
-
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
 
-    <!--    <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">-->
+    <!-- 悬浮面板：显示生态与合作的详细子菜单 -->
     <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">
       <div class="inPanel">
+        <!-- 左侧面板：一级和二级菜单 -->
         <div class="panelLeft">
           <ul class="outUl">
             <li style="cursor: default" class="outLi" v-for="item in showPanelData" :key="item.firTitle">
-              <!--              @mouseenter="sildeItemIn(item)"-->
               <span style="cursor: default!important;" :class="['tilte', 'activeFir']">
                 {{
-                  item.firTitle
+                  translations[language][item.firTitle] || item.firTitle
                 }}
               </span>
               <ul class="inUl">
                 <li class="inLi" v-for="i in item.secMenu" :key="i.id">
                   <span style="position: relative" @mouseenter="sildeSecMenu(i)"
-                    :class="['twoMenuStyle', secId === i.id ? 'activeSec' : '']">{{ i.secTitle }}</span>
+                    :class="['twoMenuStyle', secId === i.id ? 'activeSec' : '']">{{ translations[language][i.secTitle]
+                    || i.secTitle }}</span>
                 </li>
               </ul>
             </li>
           </ul>
         </div>
+        <!-- 分隔线 -->
         <span class="ge"></span>
+        <!-- 左侧面板：三级菜单（如果存在且不等于二级菜单标题） -->
         <div
           v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
           class="panelLeft">
           <ul>
             <li style="font-size: 14px!important;" @mouseenter="sildeThrMenu(thr)" v-for="(thr, index) in threeData"
               :key="index">
-              {{ thr.thrTitle }}
+              {{ translations[language][thr.thrTitle] || thr.thrTitle }}
             </li>
           </ul>
         </div>
+        <!-- 分隔线 -->
         <span
           v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
           class="ge"></span>
+        <!-- 右侧面板：最细粒度的菜单项 -->
         <div class="panelRight">
-          <!--          <span class="subTitle">{{ showPanelRightData[0].thrTitle }}</span>-->
           <ul class="leastMenu inBox">
-
             <li class="clickItem" style="font-size: 14px!important;margin: 8px 0;cursor: pointer"
               v-for="itemR in showPanelRightData[0].value" :key="itemR.id" @click="clickGo(itemR)">
-
-              {{ itemR.name }} <span v-if="itemR.discount" class="zhe">{{ itemR.discount }}折</span>
-
+              {{ translations[language][itemR.name] || itemR.name }} <span v-if="itemR.discount" class="zhe">{{
+                itemR.discount }}折</span>
             </li>
           </ul>
-
         </div>
       </div>
     </div>
@@ -231,48 +262,103 @@
 
 <script>
 import Vue from 'vue'
+// 导入测试数据（可能用于本地开发或模拟）
 import { computingData, networkData, storageData, testData } from "@/views/homePage/components/topBox/testData";
+// 导入API请求函数
 import { reqNavList, reqNewHomeFestival, reqNewHomeSync } from "@/api/newHome";
+// 导入Vuex辅助函数
 import { mapGetters, mapState } from "vuex";
+// 导入其他API函数
 import { getLogoAPI, getUserInfoAPI } from "@/api/login";
 import { reqApplyChannel } from "@/api/customer/channel";
+// 导入store实例
 import store from "@/store";
+// 导入工具函数
 import { getHomePath } from '@/views/setting/tools'
+
 export default Vue.extend({
   name: "TopBox",
   data() {
     return {
-      homePath: getHomePath(),
-      isShowKbossCharge: false,
-      role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
-      userId: sessionStorage.getItem("userId"),
-      firId: "",
-      secId: "",
-      nick_name: "", // 初始化为空字符串
-      showTimer: null,
-      hideTimer: null,
-      showPanelData: [],
-      secMenuData: [],
-      showPanelRightData: [],
-      threeData: [],
-      fourData: [],
-      product_service: []
+      homePath: getHomePath(), // 首页路径
+      isShowKbossCharge: false, // 是否显示Kboss充值按钮
+      role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"), // 用户角色
+      userId: sessionStorage.getItem("userId"), // 用户ID
+      firId: "", // 一级菜单ID
+      secId: "", // 二级菜单ID
+      nick_name: "", // 用户昵称
+      showTimer: null, // 显示面板的定时器
+      hideTimer: null, // 藏面板的定时器
+      showPanelData: [], // 展示的面板数据
+      secMenuData: [], // 二级菜单数据
+      showPanelRightData: [], // 展示的右侧面板数据
+      threeData: [], // 三级菜单数据
+      fourData: [], // 四级菜单数据（未使用）
+      product_service: [], // 产品服务数据
+      language: 'zh', // 默认语言
+      translations: {
+        zh: {
+          home: '首页',
+          latestActivity: '最新活动',
+          fusionCloud: '融合云',
+          solutions: '解决方案',
+          ecosystem: '生态与合作',
+          aboutUs: '关于我们',
+          balance: '余额',
+          recharge: '充值',
+          personalCenter: '个人中心',
+          logout: '退出登录',
+          searchPlaceholder: '搜索',
+          console: '控制台',
+          login: '登录',
+          register: '立即注册',
+          // 为菜单项添加中文翻译（如果需要）
+        },
+        en: {
+          home: 'Home',
+          latestActivity: 'Latest Activity',
+          fusionCloud: 'Fusion Cloud',
+          solutions: 'Solutions',
+          ecosystem: 'Ecosystem & Partnership',
+          aboutUs: 'About Us',
+          balance: 'Balance',
+          recharge: 'Recharge',
+          personalCenter: 'Personal Center',
+          logout: 'Logout',
+          searchPlaceholder: 'Search',
+          console: 'Console',
+          login: 'Login',
+          register: 'Register',
+          // 为菜单项添加英文翻译（如果需要）
+        }
+      }
     }
   },
   created() {
+    // 组件创建时初始化homePath
     this.homePath = getHomePath()
+    // 如果sessionStorage中有userId，则设置登录状态为true
     if (sessionStorage.getItem('userId')) {
       this.$store.commit('setLoginState', true); // 同步到 Vuex
     }
+    // 如果不需要显示注册按钮，则获取用户信息
     !this.showRegisterButton && this.getUserInfo();
 
-
+    // 初始化组件
     this.init()
+
+    // 尝试从本地存储获取语言设置
+    const savedLanguage = localStorage.getItem('language');
+    if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
+      this.language = savedLanguage;
+    }
   },
   mounted() {
+    // 组件挂载时，从sessionStorage获取用户名
     if (sessionStorage.getItem("username")) {
       this.nick_name = sessionStorage.getItem("username");
     }
+    // 滚动到顶部容器
     this.$nextTick(() => {
       const topContainer = document.getElementById('topContainer');
       if (topContainer) {
@@ -283,64 +369,45 @@ export default Vue.extend({
       }
     });
 
+    // 初始化导航数据
     this.initData()
-
-    // this.showPanelData = this.testData()
-    // this.secMenuData = this.testData()[0].secMenu || []
-    // this.threeData = this.secMenuData[0].thrMenu || []
-    // let res = []
-    // res.push(this.secMenuData[0].thrMenu[0])
-    // this.showPanelRightData = res || []
-
   },
-  watch: {},
   computed: {
+    // 判断当前是否为ncmatchHome页面
     isNcmatchHome() {
       return window.location.href.includes('ncmatchHome')
     },
+    // 映射Vuex中的getters
     ...mapGetters(["sidebar", "avatar", "device"]),
+    // 映射Vuex中的state
     ...mapState({
-      isShowPanel: (state) => state.product.showHomeNav,
-      navIndex: (state) => state.product.navIndex,
-      gridObj: state => state.operationAnalysis.gridObj,
-      mybalance: state => state.user.mybalance,
-      logoutUrl: state => state.login.logoutUrl,
-      loginStateVuex: state => state.login.loginState,
-      logoInfoNew: state => state.product.logoInfoNew,
-
-
+      isShowPanel: (state) => state.product.showHomeNav, // 是否显示导航面板
+      navIndex: (state) => state.product.navIndex, // 导航索引
+      gridObj: state => state.operationAnalysis.gridObj, // 未使用
+      mybalance: state => state.user.mybalance, // 用户余额
+      logoutUrl: state => state.login.logoutUrl, // 退出登录URL
+      loginStateVuex: state => state.login.loginState, // Vuex中的登录状态
+      logoInfoNew: state => state.product.logoInfoNew, // Logo信息
     }),
+    // 计算登录状态：基于Vuex状态或sessionStorage中的userId
     loginState() {
       const userId = sessionStorage.getItem('userId');
       return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
     },
+    // 计算是否显示注册按钮：基于组织类型和用户登录状态
     showRegisterButton() {
       const orgType = window.sessionStorage.getItem('org_type');
       const userId = window.sessionStorage.getItem('userId');
       console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
       return orgType !== '2' && orgType !== '3' && userId === null;
     },
+    // 计算用户名
     username() {
       return sessionStorage.getItem('username') || '';
     },
-
   },
-  // watch: {
-  //   navIndex: {
-  //     immediate: true, // Optional: if you want to run the handler immediately on component creation
-  //     handler(newVal, oldVal) {
-  //       console.log("newValue", newVal)
-  //       if (newVal === 0) {
-  //         this.secId = '10'
-  //       } else if (newVal === 1) {
-  //         this.secId = '12'
-  //       }
-  //       // this.changeData(this.product_service);
-  //     }
-  //   }
-  // },
-
   methods: {
+    // 控制台按钮点击事件：根据角色跳转不同页面
     goB() {
       if (sessionStorage.getItem('jueseNew').includes('客户')) {
         this.$router.push('/product/productHome')
@@ -348,11 +415,15 @@ export default Vue.extend({
         this.$router.push('/operation/supplierManagement')
       }
     },
+    // 切换语言
+    toggleLanguage() {
+      this.language = this.language === 'zh' ? 'en' : 'zh';
+      localStorage.setItem('language', this.language);
+    },
+    // 初始化Logo信息
     init() {
-      // let params = {
-      //   url_link: this.GetQueryString(window.location.href)
-      // }
       let remoteUrl = ''
+      // 根据环境设置API基础URL
       if (window.location.href.includes("dev")) {
         remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy'
       } else if (window.location.href.includes("localhost")) {
@@ -361,19 +432,14 @@ export default Vue.extend({
         remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy'
       }
 
-
       let params = {
-        url_link: window.location.href.split("#")[0]
-        // url_link: 'https://www.baidu.com'
+        url_link: window.location.href.split("#")[0] // 获取当前页面URL
       }
       getLogoAPI(params).then((res) => {
         console.log("获取接口触发了")
-        // if (res.data.status == true && res.data.data && res.data.data.length) {
-        //   this.photosUrl = res.data.data[0];
-
         if (res.status == true && res.data && res.data.length) {
           console.log("res.data[0].additional_msg", res.data[0].additional_msg)
-          // this.$store.commit('setLogoInfo', res.data[0]);
+          // 提交Logo信息到Vuex
           this.$store.commit('setLogoInfoNew', res.data[0].additional_msg);
           this.isShow = true
           if (res.data[0].orgname == '中关村数智人工智能产业联盟') {
@@ -399,32 +465,11 @@ export default Vue.extend({
         }
       });
     },
-    async logout() {//退出登录
-      this.$store.commit('setLoginState', false)
-      // logout() {
-      // await this.$store.dispatch('auth/removeToken')
-      // logoutAPI().then((res) => {
-      //   // console.log(res);
-      // });
+    // 退出登录
+    async logout() {
+      this.$store.commit('setLoginState', false) // 设置Vuex登录状态为false
 
-      //获取当前url
-      let url = window.location.href;
-      //判断url中是否包含domain_name字段
-      // if (!url.includes('domain_name')) {
-      //   //跳转到https://www.opencomputing.cn/
-      //   window.location.href = 'https://www.opencomputing.cn/';
-      //
-      // } else {
-      //   await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`);
-      // }
-
-      // this.showRegisterButton = fa
-
-      // if (this.logoutUrl) {
-      //   window.location.href = this.logoutUrl
-      // } else {mo
-      //   window.location.href = 'https://www.opencomputing.cn/';
-      // }
+      // 清除本地存储
       store.commit('tagsView/resetBreadcrumbState');
       sessionStorage.removeItem("auths");
       sessionStorage.removeItem("routes");
@@ -439,13 +484,16 @@ export default Vue.extend({
       localStorage.removeItem("org_type")
       localStorage.removeItem('userId')
 
+      // 如果当前页面不是首页，则跳转到首页
       if (!window.location.href.includes('homePage/index')) {
         await this.$router.push(getHomePath());
       }
     },
-    edituserPassword() {//修改密码
+    // 修改密码（未完全实现）
+    edituserPassword() {
       this.passwordDialog = true;
     },
+    // 申请渠道管理
     channelFirstBtn() {
       reqApplyChannel({ user_id: this.userId }).then(res => {
         if (res.code == "100" || res.code == "210") {
@@ -457,20 +505,21 @@ export default Vue.extend({
         }
       })
     },
+    // 初始化余额（从sessionStorage获取）
     initMybalance() {
       return sessionStorage.getItem('mybalance')
     },
-    copyBtn() {//个人信息复制id
+    // 复制用户ID
+    copyBtn() {
       const textToCopy = this.$refs.contentToCopy.innerText;
       navigator.clipboard.writeText(textToCopy).then(() => {
         this.$message.success('复制成功！')
-
       }).catch((error) => {
         console.error('复制失败', error);
       });
-
     },
-    async getUserInfo() {  //获取个人信息
+    // 获取用户信息
+    async getUserInfo() {
       getUserInfoAPI({ id: this.userId }).then((res) => {
         if (res.status) {
           // this.nick_name = res.data[0].nick_name;
@@ -484,28 +533,30 @@ export default Vue.extend({
         }
       });
     },
+    // 处理下拉菜单显示/隐藏时的图标旋转
     handleShow(isShow) {
-
       let resverNode = document.getElementById('resverIcon')
 
       if (isShow) {
         if (this.role.includes('客户')) {
-          this.$store.dispatch('user/getCustmoersMoney')
+          this.$store.dispatch('user/getCustmoersMoney') // 获取客户余额
         }
 
-        resverNode.style.transform = 'rotate(180deg)'
+        resverNode.style.transform = 'rotate(180deg)' // 旋转图标
       } else {
-        resverNode.style.transform = 'rotate(0)'
+        resverNode.style.transform = 'rotate(0)' // 恢复图标
       }
     },
+    // 鼠标进入三级菜单项
     sildeThrMenu(item) {
       console.log("it", item)
       let res = []
       res.push(item)
       this.showPanelRightData = res
     },
+    // 点击菜单项进行跳转或打开新窗口
     clickGo(item) {
-      this.$store.commit('setShowHomeNav', false)
+      this.$store.commit('setShowHomeNav', false) // 隐藏导航面板
       console.log("电机的item是", item)
       let userId = sessionStorage.getItem('userId')
       const orgType = window.sessionStorage.getItem('org_type');
@@ -513,6 +564,7 @@ export default Vue.extend({
       console.log("userId", userId)
       if (item.type === '百度云') {
         if (this.loginState) {
+          // 百度云产品跳转逻辑
           this.$store.commit('setRedirectUrl', item.url)
           localStorage.setItem('redirectUrl', item.url)
           localStorage.setItem('userRescourseUrl', item.listUrl)
@@ -536,21 +588,20 @@ export default Vue.extend({
         }
       } else if (item.type === '阿里云') {
         if (this.loginState) {
+          // 阿里云同步和节日活动逻辑
           reqNewHomeSync().then(response => {
             if (response.status) {
               reqNewHomeFestival().then(res => {
                 if (res.status) {
-                  window.open(res.data)
+                  window.open(res.data) // 打开阿里云页面
                 } else {
                   this.$message.warning(res.msg)
                 }
               })
-
             } else {
               this.$message.warning(response.msg)
             }
           })
-
         } else {
           this.$router.push({
             path: "/login",
@@ -581,13 +632,13 @@ export default Vue.extend({
             }
           })
         }
-
       } else if (item.name === '灵医智能体') {
         this.$router.push('/homePage/hospital')
       } else if (item.name === '客悦·智能客服') {
         this.$router.push('/homePage/customerService')
       }
     },
+    // 改变面板数据
     changeData(data) {
       this.showPanelData = data
 
@@ -616,11 +667,12 @@ export default Vue.extend({
         this.showPanelRightData = []
       }
     },
+    // 初始化导航数据
     initData() {
       reqNavList({ url_link: window.location.href }).then(res => {
         console.log("res", res.data.product_service)
         if (res.status) {
-          this.product_service = this.buildData(res.data.product_service)
+          this.product_service = this.buildData(res.data.product_service) // 构建数据结构
           this.changeData(this.product_service)
         }
       }).catch(error => {
@@ -628,6 +680,7 @@ export default Vue.extend({
         // 可以设置一些默认数据或显示错误信息
       })
     },
+    // 构建导航数据结构
     buildData(data) {
       let res = [];
       data.forEach(item => {
@@ -646,8 +699,8 @@ export default Vue.extend({
         }
       });
       return data; // 返回修改后的原始数据
-      // 或者如果你想返回新的res数组，可以根据需要调整
     },
+    // 鼠标进入二级菜单项
     sildeSecMenu(item) {
       console.log("获取的item时", item)
       this.secId = item.id
@@ -670,6 +723,7 @@ export default Vue.extend({
 
       this.showPanelRightData = this.threeData
     },
+    // 返回测试数据（未使用）
     networkData() {
       return networkData
     },
@@ -679,34 +733,31 @@ export default Vue.extend({
     testData() {
       return testData
     },
+    // 鼠标进入一级菜单项
     sildeItemIn(item) {
       this.firId = item.id
       this.secId = item.secMenu[0].id
       console.log("获取的item时", item)
       this.secMenuData = item.secMenu || []
       this.showPanelRightData = this.secMenuData[0].thrMenu || []
-
-
     },
     computingData() {
       return computingData
     },
+    // 鼠标进入生态与合作菜单
     sildeIn(item) {
       console.log("sildeIn", item)
       this.changeData(item)
-      // this.showPanelData = item
-      // this.showPanelRightData = item[0].subMenu || []
       if (this.hideTimer) {
         clearTimeout(this.hideTimer)
       }
       // 延时显示面板，避免鼠标快速移动时面板闪烁
       this.showTimer = setTimeout(() => {
-        // this.isShowPanel = true
         this.$store.commit('setShowHomeNav', true)
       }, 100)
     },
+    // 鼠标离开导航区域
     sildeOut() {
-      // return
       if (this.showTimer) {
         clearTimeout(this.showTimer)
       }
@@ -715,8 +766,8 @@ export default Vue.extend({
         this.$store.commit('setShowHomeNav', false)
       }, 200)
     },
+    // 鼠标进入面板区域，取消隐藏
     keepPanel() {
-      // 鼠标进入面板时取消隐藏
       if (this.hideTimer) {
         clearTimeout(this.hideTimer)
       }
@@ -725,7 +776,7 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .top-nav {
   font-size: 18px !important;
 
@@ -734,10 +785,8 @@ export default Vue.extend({
   }
 
   font-weight: 500;
-  /* 使用数字值代替bold更精确 */
   color: #222F60 !important;
   position: relative;
-  height: 84px;
   background-color: #fff;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
   width: 100%;
@@ -754,32 +803,36 @@ export default Vue.extend({
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 18px 30px;
+    padding: 10px 20px;
   }
 
   .logo {
     display: flex;
-    justify-content: flex-start;
     align-items: center;
+
+    .logoImg {
+      width: 148px;
+    }
   }
 
   .main-nav {
+    margin-left: 44px;
     z-index: 10000;
 
-    ul {
+    .nav-list {
       display: flex;
       list-style: none;
       margin: 0;
       padding: 0;
 
-      li {
+      p {
         height: 100%;
-        padding: 0 15px;
+        padding-right: 40px;
         position: relative;
 
         a {
           text-decoration: none;
-          font-size: 14px;
+          font-size: 18px !important;
           padding: 5px 0;
           transition: all 0.3s;
 
@@ -792,16 +845,6 @@ export default Vue.extend({
           color: #1E6FFF;
           font-weight: bold;
         }
-
-        //&.active:after {
-        //  content: '';
-        //  position: absolute;
-        //  bottom: -10px;
-        //  left: 0;
-        //  width: 100%;
-        //  height: 2px;
-        //  background: #1E6FFF;
-        //}
       }
     }
   }
@@ -810,16 +853,47 @@ export default Vue.extend({
     display: flex;
     align-items: center;
 
-    a {
-      padding: 8px 16px;
+    .search-box {
+      display: flex;
+      align-items: center;
+      border: 2px solid #d2d7e6;
+      border-radius: 8px;
+      padding: 8px;
+
+      input {
+        margin-left: 10px;
+        border: 0;
+        outline: none;
+      }
+    }
+
+    .language-toggle {
+      cursor: pointer;
+      margin:20px;
+      width: 60px;
+      text-align: center;
       border-radius: 4px;
       font-size: 14px;
       text-decoration: none;
-      margin-left: 10px;
+      transition: all 0.3s;
+      color: #333;
+
+      &:hover {
+        color: #1E6FFF;
+      }
+    }
+
+    a {
+      // padding: 8px 16px;
+      border-radius: 4px;
+      font-size: 14px;
+      text-decoration: none;
+      // margin-left: 10px;
       transition: all 0.3s;
     }
 
     .login-btn {
+      margin-right: 20px;
       color: #333;
 
       &:hover {
@@ -828,7 +902,7 @@ export default Vue.extend({
     }
 
     .register-btn {
-      height: 50px;
+      // height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -840,11 +914,18 @@ export default Vue.extend({
         opacity: 0.9;
       }
     }
+
+    .functions{
+      padding-right:20px;
+      &:hover{
+        color: #1E6FFF;
+      }
+    }
+
   }
 }
 
 .panel {
-
   .inPanel {
     padding: 20px;
     border-radius: 8px;
@@ -890,7 +971,7 @@ export default Vue.extend({
 
       &:hover {
         cursor: pointer;
-        color: blue;
+        color:#1E6FFF;
       }
     }
   }
@@ -944,7 +1025,6 @@ export default Vue.extend({
 }
 
 .leastMenu {
-
   overflow-y: auto;
 
   .inBox {