From c761b57e9337776fec7f0ad39e088645f9b4402a Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Tue, 1 Sep 2026 18:02:01 +0800
Subject: [PATCH] feat: scaffold admin traffic ops page

Add /traffic-ops route, menu entry, urls, and tabbed page shell.
---
 src/config/urls.js                          |  7 +++++
 src/layout/components/SideMenu.vue          |  7 +++++
 src/layout/components/TopBar.vue            |  1 +
 src/router/index.js                         |  1 +
 src/views/TrafficOpsView/TrafficOpsView.vue | 33 +++++++++++++++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 src/views/TrafficOpsView/TrafficOpsView.vue

diff --git a/src/config/urls.js b/src/config/urls.js
index c696988..d818f17 100644
--- a/src/config/urls.js
+++ b/src/config/urls.js
@@ -74,6 +74,13 @@ export const SIM_CARD_RECHARGE_ORDERS = (id) => `/v1/account/sim-cards/${id}/rec
 export const SIM_RECHARGE_ORDER = (id) => `/v1/account/sim-recharge-orders/${id}`
 export const SIM_RECHARGE_LOGS = '/v1/account/sim-recharge-logs'
 
+// Admin traffic ops
+export const ADMIN_TRAFFIC_POOL = '/v1/admin/traffic/pool'
+export const ADMIN_TRAFFIC_PURCHASES = '/v1/admin/traffic/purchases'
+export const ADMIN_TRAFFIC_PACKAGES = '/v1/admin/traffic/packages'
+export const ADMIN_TRAFFIC_PACKAGE = (id) => `/v1/admin/traffic/packages/${id}`
+export const ADMIN_TRAFFIC_LEDGER = '/v1/admin/traffic/ledger'
+
 // Users
 export const USERS = '/v1/users'
 
diff --git a/src/layout/components/SideMenu.vue b/src/layout/components/SideMenu.vue
index 1550f8a..b4c6300 100644
--- a/src/layout/components/SideMenu.vue
+++ b/src/layout/components/SideMenu.vue
@@ -163,6 +163,13 @@ async function logout() {
         固件管理
       </t-menu-item>
 
+      <t-menu-item v-if="isAdmin" value="traffic-ops">
+        <template #icon>
+          <svg :class="s.icon"><use href="#i-wallet" /></svg>
+        </template>
+        流量运营
+      </t-menu-item>
+
       <t-menu-item v-if="isAdmin" value="system">
         <template #icon>
           <svg :class="s.icon"><use href="#i-settings" /></svg>
diff --git a/src/layout/components/TopBar.vue b/src/layout/components/TopBar.vue
index 6f0b188..3e5d1de 100644
--- a/src/layout/components/TopBar.vue
+++ b/src/layout/components/TopBar.vue
@@ -17,6 +17,7 @@ const titles = {
   account: '账户中心',
   users: '用户列表',
   firmwares: '固件管理',
+  'traffic-ops': '流量运营',
   system: '系统管理',
   logs: '操作日志',
 }
diff --git a/src/router/index.js b/src/router/index.js
index 98eec07..ffd92d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,6 +19,7 @@ const routes = [
       { path: 'system', name: 'system', component: () => import('../views/SystemView/SystemView.vue'), meta: { admin: true } },
       { path: 'users', name: 'users', component: () => import('../views/UsersView/UsersView.vue'), meta: { admin: true } },
       { path: 'firmwares', name: 'firmwares', component: () => import('../views/FirmwaresView/FirmwaresView.vue'), meta: { admin: true } },
+      { path: 'traffic-ops', name: 'traffic-ops', component: () => import('../views/TrafficOpsView/TrafficOpsView.vue'), meta: { admin: true } },
       { path: 'control/:id?', name: 'control', component: () => import('../views/ControlView/ControlView.vue'), meta: { userOnly: true } },
       { path: 'logs', name: 'logs', component: () => import('../views/OperationLogsView/OperationLogsView.vue'), meta: { userOnly: true } },
       { path: 'device/:id', name: 'device-detail', component: () => import('../views/DeviceDetailView/DeviceDetailView.vue') }
diff --git a/src/views/TrafficOpsView/TrafficOpsView.vue b/src/views/TrafficOpsView/TrafficOpsView.vue
new file mode 100644
index 0000000..b85cdb7
--- /dev/null
+++ b/src/views/TrafficOpsView/TrafficOpsView.vue
@@ -0,0 +1,33 @@
+<template>
+  <section class="operation-page">
+    <header class="operation-page-header">
+      <div>
+        <h1>流量运营</h1>
+        <span>管理云媒体流量套餐、平台采购入池与账务流水</span>
+      </div>
+    </header>
+
+    <div class="business-workspace">
+      <t-tabs v-model="tab" class="business-tdesign-tabs">
+        <t-tab-panel value="packages" label="套餐管理" :destroy-on-hide="false" />
+        <t-tab-panel value="purchases" label="采购入池" :destroy-on-hide="false" />
+        <t-tab-panel value="ledger" label="账务流水" :destroy-on-hide="false" />
+      </t-tabs>
+
+      <div v-show="tab === 'packages'">套餐管理占位</div>
+      <div v-show="tab === 'purchases'">采购入池占位</div>
+      <div v-show="tab === 'ledger'">账务流水占位</div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const tab = ref('packages')
+
+watch(tab, (v) => {
+  // 后续各 Tab 按需懒加载
+  void v
+})
+</script>