diff --git a/src/router/index.js b/src/router/index.js
index 4939c4f..9a7cada 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -79,6 +79,44 @@ const routes = [
                     }
                 ]
             },
+            // 金豆消耗
+            {
+                path: '/beanConsume',
+                name: "beanConsume",
+                component: () => import("../views/consume/beanConsume.vue"),
+                meta: {permissionId: 6},
+                children: [
+                    // 金豆新增消耗
+                    {
+                        path: 'add',
+                        name: "addBeanConsume",
+                        component: () => import("../views/consume/addBeanConsume.vue"),
+                        meta: {permissionId: 23} // 对应"提交金豆消耗"id=?
+                    },
+                    // 直播
+                    {
+                        path: 'live',
+                        name: "liveStream",
+                        component: () => import("../views/consume/liveStream.vue"),
+                        meta: {permissionId: 24} // 对应"直播"id=?
+                    },
+                    // 铁粉
+                    {
+                        path: 'fan',
+                        name: "dieHardFan",
+                        component: () => import("../views/consume/dieHardFan.vue"),
+                        meta: {permissionId: 25} // 对应"铁粉"id=?
+                    },
+                    // 文章视频
+                    {
+                        path: 'article',
+                        name: "articleVideo",
+                        component: () => import("../views/consume/articleVideo.vue"),
+                        meta: {permissionId: 26} // 对应"文章视频"id=?
+                    }
+                    
+                ]
+            },
 
             // 汇率管理
             {
diff --git a/src/views/consume/addBeanConsume.vue b/src/views/consume/addBeanConsume.vue
new file mode 100644
index 0000000..399ab7f
--- /dev/null
+++ b/src/views/consume/addBeanConsume.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>addBeanConsume</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/consume/articleVideo.vue b/src/views/consume/articleVideo.vue
new file mode 100644
index 0000000..2d36320
--- /dev/null
+++ b/src/views/consume/articleVideo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>article videos</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/consume/beanConsume.vue b/src/views/consume/beanConsume.vue
index 96c0baf..6a028e7 100644
--- a/src/views/consume/beanConsume.vue
+++ b/src/views/consume/beanConsume.vue
@@ -1,11 +1,137 @@
-<script setup lang="ts">
+<template>
+  <div>
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button
+          :type="activeTab === 'add' ? 'primary' : 'default'"
+          @click="goToAdd"
+          class="uniform-btn"
+      >
+        新增消耗
+      </el-button>
+      <el-button
+          :type="activeTab === 'live' ? 'primary' : 'default'"
+          @click="goToLive"
+          class="uniform-btn"
+      >
+        直播
+      </el-button>
+      <el-button
+          :type="activeTab === 'fan' ? 'primary' : 'default'"
+          @click="goToFan"
+          class="uniform-btn"
+      >
+        铁粉
+      </el-button>
+      <el-button
+          :type="activeTab === 'article' ? 'primary' : 'default'"
+          @click="goToArticle"
+          class="uniform-btn"
+      >
+        文章/视频
+      </el-button>
+    </el-button-group>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
+  </div>
+</template>
 
-</script>
+<script setup>
+import {onMounted, ref, watch} from 'vue';
+import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from "pinia";
+import {useAdminStore} from "@/store/index.js";
 
-<template>
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+// 定义响应式变量 activeTab 来跟踪当前激活的标签
+const activeTab = ref(route.name === 'liveStream' ? 'live' : 'add');
+//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
+//此时获取到的路由信息是coinConsume，所以默认是add
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
-</template>
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
+  activeTab.value = 'add';
+  router.push({name: 'addBeanConsume'});
+};
 
-<style scoped>
+const goToLive = () => {
+  // 点击按钮时更新 activeTab 为 live
+  activeTab.value = 'live';
+  router.push({name: 'liveStream'});
+};
+const goToFan = () => {
+  // 点击按钮时更新 activeTab 为 fan
+  activeTab.value = 'fan';
+  router.push({name: 'dieHardFan'});
+};
+const goToArticle = () => {
+  // 点击按钮时更新 activeTab 为 article
+  activeTab.value = 'article';
+  router.push({name: 'articleVideo'});
+};
+
+// 导航方法
+const navigateTo = (name) => {
+  activeTab.value = name;
+  if (name === 'add') {
+    router.push({name: 'addBeanConsume'});
+  } else if (name === 'live') {
+    router.push({name: 'liveStream'});
+  } else if (name === 'fan') {
+    router.push({name: 'dieHardFan'});
+  } else if (name === 'article') {
+    router.push({name: 'articleVideo'});
+  }
+};
+
+// 递归判断某个 menuName 是否存在
+const hasMenuPermission = (tree, targetName) => {
+  for (const node of tree) {
+    if (node.menuName === targetName) return true;
+    if (node.children && hasMenuPermission(node.children, targetName)) return true;
+  }
+  return false;
+};
 
+// 默认路由判断
+const getDefaultRoute = () => {
+  if (!menuTree.value) return 'add';
+  const hasRecharge = hasMenuPermission(menuTree.value, '提交金豆消耗');
+  return hasRecharge ? 'add' : 'live';
+};
+
+
+// 监听路由变化更新标签状态
+watch(() => route.name, (newName) => {
+  if (newName === 'add' || newName === 'live') {
+    activeTab.value = newName;
+  } else if (newName === 'beanConsume') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  }
+});
+
+// 初始化逻辑
+onMounted(() => {
+  if (route.name === 'beanConsume') {
+    const defaultRoute = getDefaultRoute();
+    navigateTo(defaultRoute);
+  } else {
+    // 非父路由初始化当前标签状态
+    if (route.name === 'add' || route.name === 'live') {
+      activeTab.value = route.name;
+    }
+  }
+});
+
+</script>
+
+<style scoped>
+.uniform-btn {
+  width: 120px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/consume/dieHardFan.vue b/src/views/consume/dieHardFan.vue
new file mode 100644
index 0000000..78d9704
--- /dev/null
+++ b/src/views/consume/dieHardFan.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>die-hard fans</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/consume/liveStream.vue b/src/views/consume/liveStream.vue
new file mode 100644
index 0000000..48e128f
--- /dev/null
+++ b/src/views/consume/liveStream.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>live stream</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file