Browse Source

feat: scaffold admin traffic ops page

Add /traffic-ops route, menu entry, urls, and tabbed page shell.
main
xiaosi 3 weeks ago
parent
commit
c761b57e93
  1. 7
      src/config/urls.js
  2. 7
      src/layout/components/SideMenu.vue
  3. 1
      src/layout/components/TopBar.vue
  4. 1
      src/router/index.js
  5. 33
      src/views/TrafficOpsView/TrafficOpsView.vue

7
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'

7
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>

1
src/layout/components/TopBar.vue

@ -17,6 +17,7 @@ const titles = {
account: '账户中心',
users: '用户列表',
firmwares: '固件管理',
'traffic-ops': '流量运营',
system: '系统管理',
logs: '操作日志',
}

1
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') }

33
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>
Loading…
Cancel
Save