需求更改开发中

power_leasing/src/views/account/index.vue

@@ -13,67 +13,34 @@
               <div class="user-email" :title="userEmail || '未登录'">{{ userEmail || '未登录' }}</div>
             </div>
           </div>
-          <div class="user-role">
-            <button>买家相关</button>
-            <button>卖家相关</button>
+          <div class="user-role" role="group" aria-label="导航分组切换">
+            <button
+              class="role-button"
+              :class="{ active: activeRole === 'buyer' }"
+              @click="handleClickRole('buyer')"
+              @keydown.enter.prevent="handleClickRole('buyer')"
+              @keydown.space.prevent="handleClickRole('buyer')"
+              :aria-pressed="activeRole === 'buyer'"
+              tabindex="0"
+            >买家相关</button>
+            <button
+              class="role-button"
+              :class="{ active: activeRole === 'seller' }"
+              @click="handleClickRole('seller')"
+              @keydown.enter.prevent="handleClickRole('seller')"
+              @keydown.space.prevent="handleClickRole('seller')"
+              :aria-pressed="activeRole === 'seller'"
+              tabindex="0"
+            >卖家相关</button>
           </div>
+
           <router-link
-            to="/account/wallet"
+            v-for="item in displayedLinks"
+            :key="item.to"
+            :to="item.to"
             class="side-link"
             active-class="active"
-            >我的钱包</router-link
-          >
-          <!-- <router-link
-            to="/account/shop-new"
-            class="side-link"
-            active-class="active"
-            >新增店铺</router-link
-          > -->
-          <router-link
-            to="/account/shop-config"
-            class="side-link"
-            active-class="active"
-            >钱包绑定</router-link
-          >
-          <router-link
-            to="/account/shops"
-            class="side-link"
-            active-class="active"
-            >我的店铺</router-link
-          >
-          <router-link
-            to="/account/products"
-            class="side-link"
-            active-class="active"
-            >商品列表</router-link
-          >
-          <router-link
-            to="/account/purchased"
-            class="side-link"
-            active-class="active"
-            >已购商品</router-link
-          >
-          <router-link
-            to="/account/seller-orders"
-            class="side-link"
-            active-class="active"
-            >已售出订单</router-link>
-          <router-link
-            to="/account/orders"
-            class="side-link"
-            active-class="active"
-            >已购买订单列表</router-link>
-    
-        <router-link
-            to="/account/rechargeRecord"
-            class="side-link"
-            active-class="active"
-            >充值记录</router-link>
-        <router-link
-            to="/account/withdrawalHistory"
-            class="side-link"
-            active-class="active"
-            >提现记录</router-link>
+          >{{ item.label }}</router-link>
         </nav>
       </aside>
 
@@ -92,6 +59,26 @@ export default {
     return {
       activeIndex: '1',
       userEmail: '',
+      // 导航分组：buyer(买家) / seller(卖家)；默认卖家
+      activeRole: 'seller',
+      // 买家侧导航
+      buyerLinks: [
+        { label: '我的钱包', to: '/account/wallet' },
+        { label: '已购商品', to: '/account/purchased' },
+        { label: '订单列表', to: '/account/orders' },
+        // { label: '充值记录', to: '/account/rechargeRecord' },
+        // { label: '提现记录', to: '/account/withdrawalHistory' },
+        { label: '资金流水', to: '/account/funds-flow' },
+      ],
+      // 卖家侧导航
+      sellerLinks: [
+        // { label: '我的钱包', to: '/account/wallet' },
+        { label: '我的店铺', to: '/account/shops' },
+        { label: '商品列表', to: '/account/products' },
+        { label: '已售出订单', to: '/account/seller-orders' },
+        { label: '收款记录', to: '/account/receipt-record' },
+       
+      ],
     }
   },
   computed: {
@@ -103,6 +90,13 @@ export default {
       const email = (this.userEmail || '').trim()
       return email ? email[0].toUpperCase() : '?'
     },
+    /**
+     * 根据当前分组返回展示的导航链接
+     * @returns {{label:string,to:string}[]}
+     */
+    displayedLinks() {
+      return this.activeRole === 'buyer' ? this.buyerLinks : this.sellerLinks
+    },
   },
   mounted() {
     const getVal = (key) => {
@@ -112,6 +106,23 @@ export default {
     }
     const val = getVal('userName') || getVal('userEmail') || ''
     this.userEmail = typeof val === 'string' ? val : String(val)
+    // 恢复上次选择的导航分组（如无则默认 seller）
+    const savedRole = getVal('accountActiveRole')
+    if (savedRole === 'buyer' || savedRole === 'seller') {
+      this.activeRole = savedRole
+    }
+  },
+  methods: {
+    /**
+     * 点击切换导航分组
+     * @param {('buyer'|'seller')} role 要切换到的分组
+     * @returns {void}
+     */
+    handleClickRole(role) {
+      if (role !== 'buyer' && role !== 'seller') return
+      this.activeRole = role
+      try { localStorage.setItem('accountActiveRole', JSON.stringify(role)) } catch (e) {}
+    },
   },
 };
 </script>
@@ -156,6 +167,30 @@ export default {
   flex-direction: column;
   gap: 8px;
 }
+/* 分组切换按钮样式 */
+.user-role {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.role-button {
+  appearance: none;
+  background: #f6f8fa;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: #2c3e50;
+  cursor: pointer;
+}
+.role-button.active {
+  background: #42b983;
+  border-color: #42b983;
+  color: #fff;
+}
+.role-button:focus {
+  outline: 2px solid #42b98333;
+  outline-offset: 2px;
+}
 /* 用户信息卡片：置于导航最前，展示邮箱与首字母头像 */
 .user-info-card {
   display: flex;