feat(admin): add Vue3 admin frontend
This commit is contained in:
bwstudio
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>笑话大全 - 后台管理</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "joke-admin",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.0",
|
||||||
|
"vue-router": "^4.2.5",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"element-plus": "^2.5.0",
|
||||||
|
"axios": "^1.6.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.0",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<router-view />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
#app {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import request from './request'
|
||||||
|
|
||||||
|
export const login = data => request.post('/auth/login', data)
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import request from './request'
|
||||||
|
|
||||||
|
export const getTypes = () => request.get('/types')
|
||||||
|
export const getCrowds = () => request.get('/crowds')
|
||||||
|
export const createType = data => request.post('/admin/types', data)
|
||||||
|
export const updateType = (id, data) => request.put(`/admin/types/${id}`, data)
|
||||||
|
export const deleteType = id => request.delete(`/admin/types/${id}`)
|
||||||
|
export const createCrowd = data => request.post('/admin/crowds', data)
|
||||||
|
export const updateCrowd = (id, data) => request.put(`/admin/crowds/${id}`, data)
|
||||||
|
export const deleteCrowd = id => request.delete(`/admin/crowds/${id}`)
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import request from './request'
|
||||||
|
|
||||||
|
export const getJokes = params => request.get('/admin/jokes', { params })
|
||||||
|
export const getJoke = id => request.get(`/admin/jokes/${id}`)
|
||||||
|
export const createJoke = data => request.post('/admin/jokes', data)
|
||||||
|
export const updateJoke = (id, data) => request.put(`/admin/jokes/${id}`, data)
|
||||||
|
export const deleteJoke = id => request.delete(`/admin/jokes/${id}`)
|
||||||
|
export const batchApprove = ids => request.put('/admin/jokes/batch-approve', ids)
|
||||||
|
export const getStats = () => request.get('/admin/stats')
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: '/api',
|
||||||
|
timeout: 10000
|
||||||
|
})
|
||||||
|
|
||||||
|
request.interceptors.request.use(config => {
|
||||||
|
const token = localStorage.getItem('token')
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
})
|
||||||
|
|
||||||
|
request.interceptors.response.use({
|
||||||
|
successHandler: res => res.data,
|
||||||
|
errorHandler: err => {
|
||||||
|
if (err.response?.status === 401) {
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
|
return Promise.reject(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default request
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<el-container style="min-height: 100vh">
|
||||||
|
<el-aside width="200px" style="background: #304156">
|
||||||
|
<div class="logo">笑话管理后台</div>
|
||||||
|
<el-menu
|
||||||
|
:default-active="$route.path"
|
||||||
|
background-color="#304156"
|
||||||
|
text-color="#bfcbd9"
|
||||||
|
active-text-color="#409EFF"
|
||||||
|
router
|
||||||
|
>
|
||||||
|
<el-menu-item index="/dashboard">
|
||||||
|
<span>仪表盘</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/jokes">
|
||||||
|
<span>笑话管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/category/type">
|
||||||
|
<span>类型管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/category/crowd">
|
||||||
|
<span>人群管理</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
<el-container>
|
||||||
|
<el-header style="display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid #e6e6e6">
|
||||||
|
<el-button @click="handleLogout" size="small">退出登录</el-button>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<router-view />
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
authStore.logout()
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.logo {
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: #2b3a4a;
|
||||||
|
}
|
||||||
|
.el-aside {
|
||||||
|
background: #304156;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('@/views/login/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('@/layout/index.vue'),
|
||||||
|
children: [
|
||||||
|
{ path: '', redirect: '/dashboard' },
|
||||||
|
{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index.vue') },
|
||||||
|
{ path: 'jokes', name: 'JokeList', component: () => import('@/views/joke/List.vue') },
|
||||||
|
{ path: 'jokes/edit/:id?', name: 'JokeEdit', component: () => import('@/views/joke/Edit.vue') },
|
||||||
|
{ path: 'category/type', name: 'CategoryType', component: () => import('@/views/category/Type.vue') },
|
||||||
|
{ path: 'category/crowd', name: 'CategoryCrowd', component: () => import('@/views/category/Crowd.vue') },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const token = localStorage.getItem('token')
|
||||||
|
if (to.path !== '/login' && !token) {
|
||||||
|
next('/login')
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { login } from '@/api/auth'
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth', {
|
||||||
|
state: () => ({
|
||||||
|
token: localStorage.getItem('token') || ''
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
async login(username, password) {
|
||||||
|
const res = await login({ username, password })
|
||||||
|
this.token = res.access_token
|
||||||
|
localStorage.setItem('token', res.access_token)
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.token = ''
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { getJokes, createJoke, updateJoke, deleteJoke, batchApprove } from '@/api/joke'
|
||||||
|
|
||||||
|
export const useJokeStore = defineStore('joke', {
|
||||||
|
state: () => ({
|
||||||
|
jokes: [],
|
||||||
|
total: 0,
|
||||||
|
loading: false
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
async fetchJokes(params) {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const res = await getJokes(params)
|
||||||
|
this.jokes = res.items
|
||||||
|
this.total = res.total
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async create(data) {
|
||||||
|
return await createJoke(data)
|
||||||
|
},
|
||||||
|
async update(id, data) {
|
||||||
|
return await updateJoke(id, data)
|
||||||
|
},
|
||||||
|
async remove(id) {
|
||||||
|
return await deleteJoke(id)
|
||||||
|
},
|
||||||
|
async approve(ids) {
|
||||||
|
return await batchApprove(ids)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div class="category-crowd">
|
||||||
|
<div class="header">
|
||||||
|
<h2>人群管理</h2>
|
||||||
|
<el-button type="primary" @click="dialogVisible = true; form = {}">添加</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="crowds" style="margin-top: 20px">
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="名称" />
|
||||||
|
<el-table-column prop="sort_order" label="排序" width="100" />
|
||||||
|
<el-table-column label="操作" width="150">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="form.id ? '编辑人群' : '添加人群'">
|
||||||
|
<el-form :model="form" label-width="80px">
|
||||||
|
<el-form-item label="名称">
|
||||||
|
<el-input v-model="form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序">
|
||||||
|
<el-input-number v-model="form.sort_order" :min="0" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { getCrowds, createCrowd, updateCrowd, deleteCrowd } from '@/api/category'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
|
const crowds = ref([])
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const form = ref({})
|
||||||
|
|
||||||
|
const loadData = async () => { crowds.value = await getCrowds() }
|
||||||
|
const handleEdit = (row) => { form.value = { ...row }; dialogVisible.value = true }
|
||||||
|
const handleSave = async () => {
|
||||||
|
form.value.id ? await updateCrowd(form.value.id, form.value) : await createCrowd(form.value)
|
||||||
|
dialogVisible.value = false
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
await ElMessageBox.confirm('确定删除?')
|
||||||
|
await deleteCrowd(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
onMounted(() => loadData())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div class="category-type">
|
||||||
|
<div class="header">
|
||||||
|
<h2>类型管理</h2>
|
||||||
|
<el-button type="primary" @click="dialogVisible = true; form = {}">添加</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="types" style="margin-top: 20px">
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="名称" />
|
||||||
|
<el-table-column prop="sort_order" label="排序" width="100" />
|
||||||
|
<el-table-column label="操作" width="150">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" :title="form.id ? '编辑类型' : '添加类型'">
|
||||||
|
<el-form :model="form" label-width="80px">
|
||||||
|
<el-form-item label="名称">
|
||||||
|
<el-input v-model="form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序">
|
||||||
|
<el-input-number v-model="form.sort_order" :min="0" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { getTypes, createType, updateType, deleteType } from '@/api/category'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
|
const types = ref([])
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const form = ref({})
|
||||||
|
|
||||||
|
const loadData = async () => { types.value = await getTypes() }
|
||||||
|
const handleEdit = (row) => { form.value = { ...row }; dialogVisible.value = true }
|
||||||
|
const handleSave = async () => {
|
||||||
|
form.value.id ? await updateType(form.value.id, form.value) : await createType(form.value)
|
||||||
|
dialogVisible.value = false
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
await ElMessageBox.confirm('确定删除?')
|
||||||
|
await deleteType(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
onMounted(() => loadData())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard">
|
||||||
|
<h2>数据概览</h2>
|
||||||
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">{{ stats.total }}</div>
|
||||||
|
<div class="stat-label">笑话总数</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">{{ stats.pending }}</div>
|
||||||
|
<div class="stat-label">待审核</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">{{ stats.approved }}</div>
|
||||||
|
<div class="stat-label">已发布</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">{{ stats.views }}</div>
|
||||||
|
<div class="stat-label">总浏览</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { getStats } from '@/api/joke'
|
||||||
|
|
||||||
|
const stats = ref({ total: 0, pending: 0, approved: 0, views: 0 })
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const res = await getStats()
|
||||||
|
stats.value = res
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.stat-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
.stat-value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
.stat-label {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="joke-edit">
|
||||||
|
<h2>{{ isEdit ? '编辑笑话' : '添加笑话' }}</h2>
|
||||||
|
<el-form :model="form" ref="formRef" label-width="100px" style="margin-top: 20px; max-width: 600px">
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input v-model="form.title" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="内容" prop="content">
|
||||||
|
<el-input v-model="form.content" type="textarea" :rows="6" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型" prop="type_id">
|
||||||
|
<el-select v-model="form.type_id" placeholder="选择类型">
|
||||||
|
<el-option v-for="t in types" :key="t.id" :label="t.name" :value="t.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="人群" prop="crowd_id">
|
||||||
|
<el-select v-model="form.crowd_id" placeholder="选择人群">
|
||||||
|
<el-option v-for="c in crowds" :key="c.id" :label="c.name" :value="c.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="form.status">
|
||||||
|
<el-option label="待审核" value="pending" />
|
||||||
|
<el-option label="已发布" value="approved" />
|
||||||
|
<el-option label="已拒绝" value="rejected" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
|
<el-button @click="$router.back()">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { getJoke, createJoke, updateJoke } from '@/api/joke'
|
||||||
|
import { getTypes, getCrowds } from '@/api/category'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const formRef = ref()
|
||||||
|
const isEdit = ref(false)
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
title: '', content: '', type_id: null, crowd_id: null, status: 'pending'
|
||||||
|
})
|
||||||
|
|
||||||
|
const types = ref([])
|
||||||
|
const crowds = ref([])
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
types.value = await getTypes()
|
||||||
|
crowds.value = await getCrowds()
|
||||||
|
|
||||||
|
if (route.params.id) {
|
||||||
|
isEdit.value = true
|
||||||
|
const res = await getJoke(route.params.id)
|
||||||
|
Object.assign(form, res)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateJoke(route.params.id, form)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createJoke(form)
|
||||||
|
ElMessage.success('创建成功')
|
||||||
|
}
|
||||||
|
router.push('/jokes')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => loadData())
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="joke-list">
|
||||||
|
<div class="header">
|
||||||
|
<h2>笑话管理</h2>
|
||||||
|
<el-button type="primary" @click="$router.push('/jokes/edit')">添加笑话</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="jokeStore.jokes" v-loading="jokeStore.loading" style="margin-top: 20px">
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="title" label="标题" />
|
||||||
|
<el-table-column prop="type_name" label="类型" width="100" />
|
||||||
|
<el-table-column prop="crowd_name" label="人群" width="100" />
|
||||||
|
<el-table-column prop="status" label="状态" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status === 'approved' ? 'success' : row.status === 'pending' ? 'warning' : 'danger'">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="view_count" label="浏览" width="80" />
|
||||||
|
<el-table-column prop="like_count" label="点赞" width="80" />
|
||||||
|
<el-table-column label="操作" width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button size="small" @click="$router.push(`/jokes/edit/${row.id}`)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
style="margin-top: 20px"
|
||||||
|
:current-page="page"
|
||||||
|
:page-size="20"
|
||||||
|
:total="jokeStore.total"
|
||||||
|
layout="total, prev, pager, next"
|
||||||
|
@current-change="loadJokes"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useJokeStore } from '@/stores/joke'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
|
const jokeStore = useJokeStore()
|
||||||
|
const page = ref(1)
|
||||||
|
|
||||||
|
const loadJokes = (p = 1) => {
|
||||||
|
page.value = p
|
||||||
|
jokeStore.fetchJokes({ page: p, page_size: 20 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
await ElMessageBox.confirm('确定删除?')
|
||||||
|
await jokeStore.remove(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
loadJokes(page.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => loadJokes())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<el-card class="login-card">
|
||||||
|
<template #header>
|
||||||
|
<h2>笑话大全 - 后台管理</h2>
|
||||||
|
</template>
|
||||||
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
|
||||||
|
<el-form-item label="用户名" prop="username">
|
||||||
|
<el-input v-model="form.username" placeholder="请输入用户名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password">
|
||||||
|
<el-input v-model="form.password" type="password" placeholder="请输入密码" @keyup.enter="handleLogin" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :loading="loading" @click="handleLogin" style="width: 100%">
|
||||||
|
登录
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="tips">默认账号: admin / admin123</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const formRef = ref()
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogin = async () => {
|
||||||
|
const valid = await formRef.value.validate().catch(() => false)
|
||||||
|
if (!valid) return
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await authStore.login(form.username, form.password)
|
||||||
|
ElMessage.success('登录成功')
|
||||||
|
router.push('/dashboard')
|
||||||
|
} catch (err) {
|
||||||
|
ElMessage.error('登录失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
.login-card {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.login-card h2 {
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.tips {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3001,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8000',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user