feat: 完成 #1 项目初始化和基础框架搭建
This commit is contained in:
root
+16
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
import request from '../utils/request'
|
||||
|
||||
/**
|
||||
* 管理员登录
|
||||
*/
|
||||
export function login(username, password) {
|
||||
return request({
|
||||
url: '/api/admin/login',
|
||||
method: 'post',
|
||||
data: { username, password }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取管理员信息
|
||||
*/
|
||||
export function getProfile() {
|
||||
return request({
|
||||
url: '/api/admin/profile',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/api/admin/logout',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import request from '../utils/request'
|
||||
|
||||
export function getMiniPrograms(params) {
|
||||
return request({
|
||||
url: '/api/admin/mini-programs',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getMiniProgramById(id) {
|
||||
return request({
|
||||
url: `/api/admin/mini-programs/${id}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getMiniProgramStatsById(id) {
|
||||
return request({
|
||||
url: `/api/admin/mini-programs/${id}/stats`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function createMiniProgram(data) {
|
||||
return request({
|
||||
url: '/api/admin/mini-programs',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateMiniProgram(id, data) {
|
||||
return request({
|
||||
url: `/api/admin/mini-programs/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteMiniProgram(id) {
|
||||
return request({
|
||||
url: `/api/admin/mini-programs/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import request from '../utils/request'
|
||||
|
||||
export function getOverviewStats() {
|
||||
return request({
|
||||
url: '/api/admin/stats/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getMiniProgramStats() {
|
||||
return request({
|
||||
url: '/api/admin/stats/mini-programs',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserGrowth(days = 7) {
|
||||
return request({
|
||||
url: '/api/admin/stats/user-growth',
|
||||
method: 'get',
|
||||
params: { days }
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-container class="layout-container">
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
|
||||
<div class="logo">
|
||||
<span v-if="!isCollapse">管理后台</span>
|
||||
<span v-else>后台</span>
|
||||
</div>
|
||||
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:unique-opened="true"
|
||||
router
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="route in menuRoutes"
|
||||
:key="route.path"
|
||||
:index="route.path"
|
||||
>
|
||||
<el-icon><component :is="route.meta.icon" /></el-icon>
|
||||
<template #title>{{ route.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<el-container>
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-icon" @click="toggleCollapse">
|
||||
<Fold v-if="!isCollapse" />
|
||||
<Expand v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="user-info">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>{{ userStore.userInfo?.username || 'Admin' }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="profile">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<el-main class="main-content">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { Fold, Expand, User, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '../stores/user'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const isCollapse = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.token && !userStore.userInfo) {
|
||||
try {
|
||||
await userStore.fetchUserInfo()
|
||||
} catch (error) {
|
||||
// token 失效时，store 内会自动登出
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 获取菜单路由（过滤掉隐藏的路由）
|
||||
const menuRoutes = computed(() => {
|
||||
const routes = router.getRoutes()
|
||||
const mainRoute = routes.find(r => r.path === '/')
|
||||
if (!mainRoute || !mainRoute.children) return []
|
||||
|
||||
return mainRoute.children.filter(r => !r.meta?.hidden)
|
||||
})
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const { path } = route
|
||||
// 如果是子路由，返回父路由路径
|
||||
if (path.includes('/create') || path.includes('/edit') || /\/\d+$/.test(path)) {
|
||||
return '/' + path.split('/')[1]
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
// 切换侧边栏折叠状态
|
||||
const toggleCollapse = () => {
|
||||
isCollapse.value = !isCollapse.value
|
||||
}
|
||||
|
||||
// 处理下拉菜单命令
|
||||
const handleCommand = async (command) => {
|
||||
if (command === 'logout') {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
userStore.logout()
|
||||
ElMessage.success('已退出登录')
|
||||
router.push('/login')
|
||||
} catch (error) {
|
||||
// 用户取消
|
||||
}
|
||||
} else if (command === 'profile') {
|
||||
ElMessage.info('个人信息功能开发中...')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #304156;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background: #2b3a4b;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
background: #304156;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
color: #bfcbd9;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover) {
|
||||
background: #263445 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
background: #409eff !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.collapse-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: #f0f2f5;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
// 注册所有 Element Plus 图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,92 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('../views/login/index.vue'),
|
||||
meta: { title: '登录', requiresAuth: false }
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
component: () => import('../layouts/MainLayout.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('../views/dashboard/index.vue'),
|
||||
meta: { title: '数据看板', icon: 'DataLine' }
|
||||
},
|
||||
{
|
||||
path: 'mini-programs',
|
||||
name: 'MiniPrograms',
|
||||
component: () => import('../views/mini-programs/index.vue'),
|
||||
meta: { title: '小程序管理', icon: 'Iphone' }
|
||||
},
|
||||
{
|
||||
path: 'mini-programs/create',
|
||||
name: 'MiniProgramCreate',
|
||||
component: () => import('../views/mini-programs/create.vue'),
|
||||
meta: { title: '添加小程序', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'mini-programs/:id/edit',
|
||||
name: 'MiniProgramEdit',
|
||||
component: () => import('../views/mini-programs/edit.vue'),
|
||||
meta: { title: '编辑小程序', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'users',
|
||||
name: 'Users',
|
||||
component: () => import('../views/users/index.vue'),
|
||||
meta: { title: '用户管理', icon: 'User' }
|
||||
},
|
||||
{
|
||||
path: 'users/:id',
|
||||
name: 'UserDetail',
|
||||
component: () => import('../views/users/detail.vue'),
|
||||
meta: { title: '用户详情', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'memberships',
|
||||
name: 'Memberships',
|
||||
component: () => import('../views/memberships/index.vue'),
|
||||
meta: { title: '会员管理', icon: 'Medal' }
|
||||
},
|
||||
{
|
||||
path: 'expiry',
|
||||
name: 'Expiry',
|
||||
component: () => import('../views/expiry/index.vue'),
|
||||
meta: { title: '保质期管理', icon: 'Box' }
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'Settings',
|
||||
component: () => import('../views/settings/index.vue'),
|
||||
meta: { title: '系统设置', icon: 'Setting' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
|
||||
if (to.meta.requiresAuth && !token) {
|
||||
next('/login')
|
||||
} else if (to.path === '/login' && token) {
|
||||
next('/')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,44 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { login as loginApi, getProfile } from '../api/auth'
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
token: localStorage.getItem('admin_token') || '',
|
||||
userInfo: null
|
||||
}),
|
||||
|
||||
getters: {
|
||||
isLoggedIn: (state) => !!state.token
|
||||
},
|
||||
|
||||
actions: {
|
||||
async login(username, password) {
|
||||
try {
|
||||
const res = await loginApi(username, password)
|
||||
this.token = res.data.token
|
||||
this.userInfo = res.data.admin
|
||||
localStorage.setItem('admin_token', this.token)
|
||||
return res
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
async fetchUserInfo() {
|
||||
try {
|
||||
const res = await getProfile()
|
||||
this.userInfo = res.data
|
||||
return res
|
||||
} catch (error) {
|
||||
this.logout()
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.token = ''
|
||||
this.userInfo = null
|
||||
localStorage.removeItem('admin_token')
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 创建 axios 实例
|
||||
const request = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = localStorage.getItem('admin_token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
const res = response.data
|
||||
|
||||
// 兼容后端 code=200（当前）和 code=0（旧约定）
|
||||
if (res.code !== 200 && res.code !== 0) {
|
||||
ElMessage.error(res.message || '请求失败')
|
||||
|
||||
// 401: 未登录
|
||||
if (res.code === 401) {
|
||||
localStorage.removeItem('admin_token')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
|
||||
return Promise.reject(new Error(res.message || '请求失败'))
|
||||
}
|
||||
|
||||
return res
|
||||
},
|
||||
(error) => {
|
||||
console.error('请求错误:', error)
|
||||
|
||||
if (error.response) {
|
||||
const { status, data } = error.response
|
||||
|
||||
if (status === 401) {
|
||||
ElMessage.error('登录已过期，请重新登录')
|
||||
localStorage.removeItem('admin_token')
|
||||
window.location.href = '/login'
|
||||
} else if (status === 403) {
|
||||
ElMessage.error('没有权限访问')
|
||||
} else if (status === 404) {
|
||||
ElMessage.error('请求的资源不存在')
|
||||
} else if (status === 500) {
|
||||
ElMessage.error('服务器错误')
|
||||
} else {
|
||||
ElMessage.error(data?.message || '请求失败')
|
||||
}
|
||||
} else if (error.request) {
|
||||
ElMessage.error('网络错误，请检查网络连接')
|
||||
} else {
|
||||
ElMessage.error(error.message || '请求失败')
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="dashboard-page">
|
||||
<el-row :gutter="16" class="cards">
|
||||
<el-col :xs="12" :sm="12" :md="6">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-value">{{ overview.total_mini_programs }}</div>
|
||||
<div class="card-label">小程序总数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-value">{{ overview.total_users }}</div>
|
||||
<div class="card-label">用户总数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-value">{{ overview.total_members }}</div>
|
||||
<div class="card-label">会员总数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-value">{{ overview.today_new_users }}</div>
|
||||
<div class="card-label">今日新增用户</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card class="section-card">
|
||||
<template #header>
|
||||
<span>小程序统计</span>
|
||||
</template>
|
||||
<el-table v-loading="tableLoading" :data="miniProgramStats" stripe>
|
||||
<el-table-column prop="mini_program_id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="小程序" min-width="160" />
|
||||
<el-table-column prop="user_count" label="用户数" width="100" />
|
||||
<el-table-column prop="member_count" label="会员数" width="100" />
|
||||
<el-table-column prop="data_count" label="数据量" width="100" />
|
||||
<el-table-column prop="today_active" label="今日新增" width="100" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card">
|
||||
<template #header>
|
||||
<div class="growth-header">
|
||||
<span>用户增长趋势</span>
|
||||
<el-radio-group v-model="growthDays" size="small" @change="loadGrowth">
|
||||
<el-radio-button :value="7">近7天</el-radio-button>
|
||||
<el-radio-button :value="30">近30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
<el-table v-loading="growthLoading" :data="userGrowth" stripe>
|
||||
<el-table-column prop="date" label="日期" width="160" />
|
||||
<el-table-column prop="count" label="新增用户数" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { getMiniProgramStats, getOverviewStats, getUserGrowth } from '../../api/stats'
|
||||
|
||||
const overview = reactive({
|
||||
total_mini_programs: 0,
|
||||
total_users: 0,
|
||||
total_members: 0,
|
||||
today_new_users: 0
|
||||
})
|
||||
|
||||
const miniProgramStats = ref([])
|
||||
const userGrowth = ref([])
|
||||
const growthDays = ref(7)
|
||||
|
||||
const tableLoading = ref(false)
|
||||
const growthLoading = ref(false)
|
||||
|
||||
const loadOverview = async () => {
|
||||
const res = await getOverviewStats()
|
||||
Object.assign(overview, res.data || {})
|
||||
}
|
||||
|
||||
const loadMiniProgramStats = async () => {
|
||||
tableLoading.value = true
|
||||
try {
|
||||
const res = await getMiniProgramStats()
|
||||
miniProgramStats.value = res.data || []
|
||||
} finally {
|
||||
tableLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadGrowth = async () => {
|
||||
growthLoading.value = true
|
||||
try {
|
||||
const res = await getUserGrowth(growthDays.value)
|
||||
userGrowth.value = res.data || []
|
||||
} finally {
|
||||
growthLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadAll = async () => {
|
||||
await Promise.all([loadOverview(), loadMiniProgramStats(), loadGrowth()])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadAll()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
margin-top: 8px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.growth-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>保质期管理</span>
|
||||
</template>
|
||||
<el-empty description="开发中，下一步对接保质期后台接口" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-card class="login-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h2>多小程序管理后台</h2>
|
||||
<p>Admin Management System</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
:prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
style="width: 100%"
|
||||
@click="handleLogin"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="login-tips">
|
||||
<p>默认账号: admin</p>
|
||||
<p>默认密码: admin123</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const loginFormRef = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const loginRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return
|
||||
|
||||
await loginFormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await userStore.login(loginForm.username, loginForm.password)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 420px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-header p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
background: #f4f4f5;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-tips p {
|
||||
margin: 4px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>会员管理</span>
|
||||
</template>
|
||||
<el-empty description="开发中，下一步对接会员管理接口" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>添加小程序</span>
|
||||
</template>
|
||||
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" style="max-width: 680px">
|
||||
<el-form-item label="小程序名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入小程序名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="AppID" prop="app_id">
|
||||
<el-input v-model="form.app_id" placeholder="请输入小程序 AppID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="AppSecret" prop="app_secret">
|
||||
<el-input v-model="form.app_secret" type="password" show-password placeholder="请输入小程序 AppSecret" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="可选描述" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="goBack">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { createMiniProgram } from '../../api/miniProgram'
|
||||
|
||||
const router = useRouter()
|
||||
const formRef = ref(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
app_id: '',
|
||||
app_secret: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
|
||||
app_id: [{ required: true, message: '请输入 AppID', trigger: 'blur' }],
|
||||
app_secret: [{ required: true, message: '请输入 AppSecret', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/mini-programs')
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await createMiniProgram(form)
|
||||
ElMessage.success('创建成功')
|
||||
goBack()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>编辑小程序</span>
|
||||
</template>
|
||||
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="130px" style="max-width: 680px">
|
||||
<el-form-item label="小程序名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入小程序名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="AppID" prop="app_id">
|
||||
<el-input v-model="form.app_id" placeholder="请输入小程序 AppID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新 AppSecret">
|
||||
<el-input
|
||||
v-model="form.app_secret"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="留空则不修改"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="可选描述" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="goBack">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getMiniProgramById, updateMiniProgram } from '../../api/miniProgram'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const formRef = ref(null)
|
||||
const submitting = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
const miniProgramId = route.params.id
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
app_id: '',
|
||||
app_secret: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
|
||||
app_id: [{ required: true, message: '请输入 AppID', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/mini-programs')
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getMiniProgramById(miniProgramId)
|
||||
const data = res.data || {}
|
||||
form.name = data.name || ''
|
||||
form.app_id = data.app_id || ''
|
||||
form.description = data.description || ''
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await updateMiniProgram(miniProgramId, {
|
||||
name: form.name,
|
||||
app_id: form.app_id,
|
||||
app_secret: form.app_secret || undefined,
|
||||
description: form.description
|
||||
})
|
||||
ElMessage.success('更新成功')
|
||||
goBack()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="header-row">
|
||||
<div class="left">
|
||||
<el-input
|
||||
v-model="query.keyword"
|
||||
placeholder="按小程序名称/AppID搜索"
|
||||
clearable
|
||||
style="width: 260px"
|
||||
@keyup.enter="loadData"
|
||||
@clear="loadData"
|
||||
/>
|
||||
<el-button type="primary" @click="loadData">搜索</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="goCreate">添加小程序</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="list" stripe>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="小程序名称" min-width="180" />
|
||||
<el-table-column prop="app_id" label="AppID" min-width="220" />
|
||||
<el-table-column prop="description" label="描述" min-width="180" />
|
||||
<el-table-column prop="user_count" label="用户数" width="90" />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="goEdit(row.id)">编辑</el-button>
|
||||
<el-button link type="primary" @click="showStats(row)">统计</el-button>
|
||||
<el-popconfirm title="确认删除该小程序？" @confirm="handleDelete(row.id)">
|
||||
<template #reference>
|
||||
<el-button link type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="query.page"
|
||||
v-model:page-size="query.page_size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="loadData"
|
||||
@size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { deleteMiniProgram, getMiniProgramStatsById, getMiniPrograms } from '../../api/miniProgram'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
keyword: ''
|
||||
})
|
||||
|
||||
const formatDateTime = (value) => {
|
||||
if (!value) return '-'
|
||||
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getMiniPrograms(query)
|
||||
const payload = res.data || {}
|
||||
list.value = payload.list || []
|
||||
total.value = payload.total || 0
|
||||
query.page = payload.page || query.page
|
||||
query.page_size = payload.page_size || query.page_size
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageSizeChange = () => {
|
||||
query.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const goCreate = () => {
|
||||
router.push('/mini-programs/create')
|
||||
}
|
||||
|
||||
const goEdit = (id) => {
|
||||
router.push(`/mini-programs/${id}/edit`)
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
await deleteMiniProgram(id)
|
||||
ElMessage.success('删除成功')
|
||||
loadData()
|
||||
}
|
||||
|
||||
const showStats = async (row) => {
|
||||
const res = await getMiniProgramStatsById(row.id)
|
||||
const stats = res.data || {}
|
||||
await ElMessageBox.alert(
|
||||
`用户数：${stats.user_count || 0}\n数据量：${stats.data_count || 0}`,
|
||||
`${row.name} - 统计`,
|
||||
{ confirmButtonText: '确定' }
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>系统设置</span>
|
||||
</template>
|
||||
<el-empty description="开发中，下一步补充密码修改和日志查询" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>用户详情</span>
|
||||
</template>
|
||||
<el-empty description="开发中，下一步对接 /api/admin/users/:id" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>用户管理</span>
|
||||
</template>
|
||||
<el-empty description="开发中，下一步对接 /api/admin/users" />
|
||||
</el-card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user