Initial commit of akmon project

This commit is contained in:
2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions

118
pages/admins/admintypes.uts Normal file
View File

@@ -0,0 +1,118 @@
// 用户类型
export type User = {
id: string
username: string
email: string
avatar_url?: string
role: string
}
// 通知类型
export type Notification = {
id: string
user_id: string
title: string
content: string
status: string
created_at: string
}
// 修改密码表单类型
export type PasswordForm = {
oldPassword: string
newPassword: string
confirmPassword: string
}
// 用户详情页相关类型
export type UserDetail = {
id: string
name?: string
username: string
email?: string
phone?: string
is_active: boolean
created_at: string
last_login?: string
}
export type UserRole = {
id: string
user_id: string
role_id: string
role_name: string
level: number
scope_type?: string
scope_id?: string
scope_name?: string
}
export type EditForm = {
name?: string
email?: string
phone?: string
is_active: boolean
}
// 角色类型
export type Role = {
id: string
name: string
description?: string
level: number
is_system: boolean
created_at: string
}
// 角色表单类型
export type RoleForm = {
id?: string
name: string
description?: string
level: number
is_system?: boolean
scope_type?: string
scope_id?: string
role_id?: string
role_name?: string
}
export type RoleOption = {
id: string
name: string
level: number
requires_scope: boolean
}
export type RegionOption = {
id: string
name: string
}
export type SchoolOption = {
id: string
name: string
region_id: string
}
export type GradeOption = {
id: string
name: string
school_id: string
}
export type ClassOption = {
id: string
name: string
grade_id: string
}
export type Permission = {
id: string;
code: string;
name: string;
description?: string;
resource_type?: string;
action?: string;
is_system?: boolean;
}

908
pages/admins/layout.uvue Normal file
View File

@@ -0,0 +1,908 @@
<template>
<view class="admin-layout">
<view class="admin-sidebar" :class="{ collapsed: sidebarCollapsed }">
<view class="sidebar-header">
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<text v-if="!sidebarCollapsed" class="logo-text">智跑后台管理</text>
<text class="toggle-btn" @click="toggleSidebar">{{ sidebarCollapsed ? '<27>? : '<27>? }}</text>
</view>
<scroll-view scroll-y class="menu-container">
<view class="menu-section">
<view class="menu-header" v-if="!sidebarCollapsed">
<text>数据中心</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/index') }"
@click="navigateTo('/pages/admin/index')"
>
<text class="menu-icon">📊</text>
<text v-if="!sidebarCollapsed" class="menu-text">总览</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/analytics') }"
@click="navigateTo('/pages/admin/analytics')"
>
<text class="menu-icon">📈</text>
<text v-if="!sidebarCollapsed" class="menu-text">数据分析</text>
</view>
</view>
<view class="menu-section">
<view class="menu-header" v-if="!sidebarCollapsed">
<text>学校管理</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/schools') }"
@click="navigateTo('/pages/admin/schools/index')"
v-if="canViewSchools"
>
<text class="menu-icon">🏫</text>
<text v-if="!sidebarCollapsed" class="menu-text">学校列表</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/classes') }"
@click="navigateTo('/pages/admin/classes/index')"
v-if="canManageClass"
>
<text class="menu-icon">👨‍></text>
<text v-if="!sidebarCollapsed" class="menu-text">班级管理</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/teachers') }"
@click="navigateTo('/pages/admin/teachers/index')"
v-if="canManageTeachers"
>
<text class="menu-icon">👨‍></text>
<text v-if="!sidebarCollapsed" class="menu-text">教师管理</text>
</view>
</view>
<view class="menu-section">
<view class="menu-header" v-if="!sidebarCollapsed">
<text>训练管理</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/training') }"
@click="navigateTo('/pages/admin/training/index')"
>
<text class="menu-icon">🏃</text>
<text v-if="!sidebarCollapsed" class="menu-text">训练计划</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/assignments') }"
@click="navigateTo('/pages/admin/assignments/index')"
>
<text class="menu-icon">📝</text>
<text v-if="!sidebarCollapsed" class="menu-text">作业管理</text>
</view>
</view>
<view class="menu-section">
<view class="menu-header" v-if="!sidebarCollapsed">
<text>系统设置</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/roles') }"
@click="navigateTo('/pages/admin/roles/index')"
v-if="canManageRoles"
>
<text class="menu-icon">🔑</text>
<text v-if="!sidebarCollapsed" class="menu-text">角色权限</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/users') }"
@click="navigateTo('/pages/admin/users/index')"
v-if="canManageUsers"
>
<text class="menu-icon">👤</text>
<text v-if="!sidebarCollapsed" class="menu-text">用户管理</text>
</view>
<view
class="menu-item"
:class="{ active: isActive('/pages/admin/settings') }"
@click="navigateTo('/pages/admin/settings/index')"
>
<text class="menu-icon">⚙️</text>
<text v-if="!sidebarCollapsed" class="menu-text">系统设置</text>
</view>
</view>
</scroll-view>
</view>
<view class="admin-main" :style="{ marginLeft: sidebarCollapsed ? '60px' : '240px' }">
<view class="admin-header">
<view class="header-left">
<view class="header-title">{{ pageTitle }}</view>
</view>
<view class="header-right">
<view class="notification-btn" @click="showNotifications">
<text class="notification-icon">🔔</text>
<view v-if="unreadCount > 0" class="badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
</view>
<view class="user-dropdown" @click="toggleUserMenu">
<image class="avatar" :src="currentUser.avatar_url ?? '/static/avatar-default.png'" mode="aspectFill"></image>
<text v-if="!sidebarCollapsed" class="username">{{ currentUser.username }}</text>
<text class="dropdown-icon">></text>
<view class="dropdown-menu" v-if="showUserMenu">
<view class="dropdown-item" @click="navigateTo('/pages/user/profile')">
<text>个人信息</text>
</view>
<view class="dropdown-item" @click="changePassword">
<text>修改密码</text>
</view>
<view class="dropdown-item logout" @click="logout">
<text>退出登></text>
</view>
</view>
</view>
</view>
</view>
<view class="admin-content">
<slot></slot>
</view>
</view>
<!-- 通知抽屉 -->
<view class="notification-drawer" v-if="showNotificationDrawer" @click.stop>
<view class="drawer-content" @click.stop>
<view class="drawer-header">
<text class="drawer-title">消息通知</text>
<text class="close-btn" @click="showNotificationDrawer = false">×</text>
</view>
<view class="drawer-tabs">
<view
class="drawer-tab"
:class="{ active: notificationTab === 'unread' }"
@click="notificationTab = 'unread'"
>
未读 ({{ unreadCount }})
</view>
<view
class="drawer-tab"
:class="{ active: notificationTab === 'all' }"
@click="notificationTab = 'all'"
>
全部
</view>
</view>
<view class="drawer-body">
<view v-if="loadingNotifications" class="loading-state">
<text>加载<E58AA0>?..</text>
</view>
<view v-else-if="notifications.length === 0" class="empty-state">
<text>暂无通知</text>
</view>
<view v-else class="notification-list">
<view
v-for="(notification, index) in (filteredNotifications as UTSJSONObject[] ?? [])"
:key="notification.get('id')"
class="notification-item"
:class="{ unread: notification.get('status') === 'unread' }"
@click="readNotification(notification)"
>
<text class="notification-title">{{ notification.get('title') }}</text>
<text class="notification-content">{{ notification.get('content') }}</text>
<text class="notification-time">{{ formatNotificationTime(`${notification.get('created_at') ?? ''}`) }}</text>
</view>
</view>
</view>
<view class="drawer-footer">
<button v-if="unreadCount > 0" class="mark-all-read" @click="markAllAsRead">
全部标为已读
</button>
</view>
</view>
</view>
<!-- 修改密码模态框 -->
<view class="modal" v-if="showPasswordModal">
<view class="modal-content">
<view class="modal-header">
<text class="modal-title">修改密码</text>
<text class="close-btn" @click="showPasswordModal = false">×</text>
</view>
<view class="modal-body">
<view class="form-group">
<text class="form-label">当前密码:</text>
<input type="password" v-model="passwordForm.oldPassword" placeholder="请输入当前密<E5898D>? />
</view>
<view class="form-group">
<text class="form-label">新密<E696B0>?</text>
<input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" />
</view>
<view class="form-group">
<text class="form-label">确认密码:</text>
<input type="password" v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
</view>
</view>
<view class="modal-footer">
<button class="cancel-btn" @click="showPasswordModal = false">取消</button>
<button class="submit-btn" @click="updatePassword">确定</button>
</view>
</view>
</view>
<!-- 遮罩<E981AE>?-->
<view
class="overlay"
v-if="showUserMenu || showNotificationDrawer"
@click="closeAllPopups"
></view>
</view>
</template>
<script setup lang="uts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { hasPermission, getUserPermissions } from '@/utils/permissionService.uts'
import { state as userStore, getCurrentUser, logout as doLogout } from '../../utils/store.uts'
import { User, Notification, PasswordForm } from './admintypes.uts'
import db from '@/components/supadb/aksupainstance.uts'
// 侧边栏状<E6A08F>?
const sidebarCollapsed = ref(false)
// 用户相关
const currentUser = reactive<User>({
id: '', username: '', email: '', avatar_url: '', role: ''
})
const showUserMenu = ref(false)
// 权限状<E99990>?
const canManageRoles = ref(false)
const canManageUsers = ref(false)
const canViewSchools = ref(false)
const canManageClass = ref(false)
const canManageTeachers = ref(false)
// 页面标题
const pageTitle = ref('后台管理')
// 通知相关
const notifications = ref<UTSJSONObject[]>([])
const unreadCount = ref(0)
const showNotificationDrawer = ref(false)
const notificationTab = ref('unread')
const loadingNotifications = ref(false)
// 修改密码相关
const showPasswordModal = ref(false)
const passwordForm = reactive<PasswordForm>({
oldPassword: '', newPassword: '', confirmPassword: ''
})
// 计算属性:根据当前选项卡过滤通知
const filteredNotifications = computed<UTSJSONObject[]>(() => {
if (notificationTab.value === 'unread') {
// Replace filter with for loop for UTS compatibility
const unreadNotifications: UTSJSONObject[] = []
for (let i = 0; i < notifications.value.length; i++) {
const n = notifications.value[i]
if (n.get('status') === 'unread') {
unreadNotifications.push(n)
}
}
return unreadNotifications
}
return notifications.value
})
// 获取当前用户信息
// 检查各项权<E9A1B9>?
const checkPermissions = async () => {
const userId = currentUser.id
canManageRoles.value = await hasPermission({ userId, permissionCode: 'admin.roles.manage' })
canManageUsers.value = await hasPermission({ userId, permissionCode: 'admin.users.manage' })
canViewSchools.value = await hasPermission({ userId, permissionCode: 'school_admin.class.manage' }) ||
await hasPermission({ userId, permissionCode: 'admin.system.manage' })
canManageClass.value = await hasPermission({ userId, permissionCode: 'school_admin.class.manage' })
canManageTeachers.value = await hasPermission({ userId, permissionCode: 'school_admin.teacher.manage' })
}
// 设置页面标题根据当前路<E5898D>?
const setPageTitle = () => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
// @ts-ignore
const route = currentPage?.route ?? ''
if (route.includes('/admin/index')) pageTitle.value = '后台首页'
else if (route.includes('/admin/schools')) pageTitle.value = '学校管理'
else if (route.includes('/admin/classes')) pageTitle.value = '班级管理'
else if (route.includes('/admin/teachers')) pageTitle.value = '教师管理'
else if (route.includes('/admin/users')) pageTitle.value = '用户管理'
else if (route.includes('/admin/roles')) pageTitle.value = '角色权限管理'
else if (route.includes('/admin/settings')) pageTitle.value = '系统设置'
else if (route.includes('/admin/training')) pageTitle.value = '训练计划'
else if (route.includes('/admin/assignments')) pageTitle.value = '作业管理'
else if (route.includes('/admin/analytics')) pageTitle.value = '数据分析'
else pageTitle.value = '后台管理'
}
// 获取通知列表
const fetchNotifications = async () => {
loadingNotifications.value = true
try {
const { data, error } = await db.from('ak_notifications')
.select('*', {})
.eq('user_id', currentUser.id)
.order('created_at', { ascending: false })
.limit(50)
.execute()
if (error != null) return if (Array.isArray(data)) {
notifications.value = data as UTSJSONObject[]
// Replace filter with for loop for UTS compatibility
let unreadCountValue = 0
for (let i = 0; i < data.length; i++) {
const n = data[i] as UTSJSONObject
if (n.get('status') === 'unread') {
unreadCountValue++
}
}
unreadCount.value = unreadCountValue
} else {
notifications.value = []
unreadCount.value = 0
}
} catch (error) {
} finally {
loadingNotifications.value = false
}
}
// 阅读通知
const readNotification = async (notification: UTSJSONObject) => {
if (notification.get('status') === 'unread') {
try {
const result = await db.from('ak_notifications')
.update({ status: 'read' })
.eq('id', `${notification.get('id') ?? ''}`)
.execute()
const error = result.error
if (error == null) {
notification.set('status', 'read')
unreadCount.value--
}
} catch (error) {}
}
}
// 标记所有为已读
const markAllAsRead = async () => {
try {
const result = await db.from('ak_notifications')
.update({ status: 'read' })
.eq('user_id', currentUser.id)
.eq('status', 'unread')
.execute()
const error = result.error if (error == null) {
// Replace map with for loop for UTS compatibility
for (let i = 0; i < notifications.value.length; i++) {
const n = notifications.value[i]
n.set('status', 'read')
}
unreadCount.value = 0
}
} catch (error) {}
}
const padZero = (num: number): string => num < 10 ? `0${num}` : `${num}`
const formatNotificationTime = (timeStr: string): string => {
const date = new Date(timeStr)
const now = new Date()
const diffMs = now.getTime() - date.getTime()
const diffMins = Math.floor(diffMs / 60000)
const diffHours = Math.floor(diffMins / 60)
const diffDays = Math.floor(diffHours / 24)
if (diffMins < 1) return '刚刚'
else if (diffMins < 60) return `${diffMins}分钟前`
else if (diffHours < 24) return `${diffHours}小时前`
else if (diffDays < 30) return `${diffDays}天前`
else return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`
}
const toggleSidebar = () => { sidebarCollapsed.value = !sidebarCollapsed.value }
const toggleUserMenu = (e: Event) => { e.stopPropagation(); showUserMenu.value = !showUserMenu.value }
const closeAllPopups = () => { showUserMenu.value = false; showNotificationDrawer.value = false }
const showNotifications = () => { showNotificationDrawer.value = true; fetchNotifications() }
const updatePassword = async () => {
if (passwordForm.oldPassword == null || passwordForm.oldPassword == '') { uni.showToast({ title: '请输入当前密<E5898D>?, icon: 'none' }); return }
if (passwordForm.newPassword == null || passwordForm.newPassword == '') { uni.showToast({ title: '请输入新密码', icon: 'none' }); return }
if (passwordForm.newPassword !== passwordForm.confirmPassword) { uni.showToast({ title: '两次输入的密码不一<E4B88D>?, icon: 'none' }); return }
try {
const { error } = await db.rpc('change_user_password', {
p_old_password: passwordForm.oldPassword,
p_new_password: passwordForm.newPassword
})
if (error != null) {
uni.showToast({ title: '更新密码失败: ' + (error?.message ?? ''), icon: 'none' }); return
}
uni.showToast({ title: '密码更新成功', icon: 'success' })
showPasswordModal.value = false
passwordForm.oldPassword = ''
passwordForm.newPassword = ''
passwordForm.confirmPassword = ''
} catch (error) {
uni.showToast({ title: '更新密码失败', icon: 'none' })
}
}
const changePassword = () => { showUserMenu.value = false; showPasswordModal.value = true }
const logout = async () => {
try {
await doLogout()
uni.reLaunch({ url: '/pages/user/login' })
} catch (error) {}
}
const isActive = (route: string): boolean => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
let currentRoute = ''
if (currentPage != null && typeof currentPage.route === 'string') {
currentRoute = currentPage.route ?? ''
}
return currentRoute.indexOf(route) !== -1
}
const navigateTo = (url: string) => { uni.navigateTo({ url }) }
const init = async () => {
// 检查是否已登录未登录直接跳转登录<E799BB>?
console.log('layout init')
const userData = await getCurrentUser()
console.log('layout getcurrentuser',userData)
if (userData == null || userData.id==null) {
uni.redirectTo({ url: '/pages/user/login' })
return
}
else
{
currentUser.id = userData.id??""
currentUser.username = userData.username??""
currentUser.email = userData.email??""
currentUser.avatar_url = userData.avatar_url
currentUser.role = userData.role??"anon"
}
await checkPermissions()
fetchNotifications()
setPageTitle()
}
onMounted(() => { init() })
onUnmounted(() => {})
</script>
<style>
.admin-layout {
display: flex;
width: 100%; }
/* 侧边栏样<E6A08F>?*/
.admin-sidebar {
width: 240px; background-color: #001529;
color: rgba(255, 255, 255, 0.65);
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1000;
transition: width 0.2s;
overflow: hidden;
}
.admin-sidebar.collapsed {
width: 60px;
}
.sidebar-header {
height: 60px;
display: flex;
align-items: center;
padding: 0 16px;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
position: relative;
}
.logo {
width: 30px;
height: 30px;
}
.logo-text {
margin-left: 10px;
font-size: 16px;
font-weight: bold;
color: #fff;
white-space: nowrap;
}
.toggle-btn {
position: absolute;
right: 10px;
top: 18px;
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
}
.menu-container {
height: calc(100% - 60px);
overflow-y: auto;
}
.menu-section {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-section:last-child {
border-bottom: none;
}
.menu-header {
padding: 8px 16px;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.menu-item {
padding: 8px 16px;
display: flex; align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.menu-item.active {
background-color: #1890ff;
color: #fff;
}
.menu-icon {
font-size: 18px;
margin-right: 12px;
}
.menu-text {
font-size: 14px;
white-space: nowrap;
}
/* 主内容区样式 */
.admin-main {
flex: 1;
margin-left: 240px; transition: margin-left 0.2s;
display: flex;
flex-direction: column; }
.admin-header {
height: 60px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
}
.header-title {
font-size: 18px;
font-weight: bold;
}
.header-right {
display: flex;
flex-direction: row;
align-items: center;
}
.notification-btn {
position: relative;
margin-right: 20px;
cursor: pointer;
}
.notification-icon {
font-size: 20px;
}
.badge {
position: absolute;
top: -5px;
right: -8px;
min-width: 16px;
height: 16px;
line-height: 16px;
padding: 0 4px;
border-radius: 8px;
background-color: #f5222d;
color: white;
font-size: 12px;
text-align: center;
}
.user-dropdown {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
cursor: pointer;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 16px;
margin-right: 10px;
}
.username {
font-size: 14px;
margin-right: 5px;
}
.dropdown-icon {
font-size: 12px;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
min-width: 120px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
overflow: hidden;
z-index: 1000;
}
.dropdown-item {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
.dropdown-item.logout {
color: #f5222d;
}
.admin-content {
flex: 1;
padding: 20px;
background-color: #f0f2f5;
overflow-y: auto;
}
/* 通知抽屉样式 */
.notification-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
z-index: 1001;
background-color: rgba(0, 0, 0, 0.5);
}
.drawer-content {
width: 100%; background-color: #fff;
display: flex;
flex-direction: column;
}
.drawer-header {
padding: 16px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
}
.drawer-title {
font-size: 16px;
font-weight: bold;
}
.close-btn {
font-size: 20px;
cursor: pointer;
}
.drawer-tabs {
display: flex;
border-bottom: 1px solid #e8e8e8;
}
.drawer-tab {
flex: 1;
text-align: center;
padding: 10px 0;
font-size: 14px;
cursor: pointer;
position: relative;
}
.drawer-tab.active {
color: #1890ff;
font-weight: bold;
}
.drawer-tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #1890ff;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.loading-state, .empty-state {
padding: 20px;
text-align: center;
color: #999;
}
.notification-list {
display: flex;
flex-direction: column;
}
.notification-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
.notification-item.unread {
background-color: #e6f7ff;
}
.notification-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 4px;
display: block;
}
.notification-content {
font-size: 12px;
color: #666;
margin-bottom: 4px;
display: block;
}
.notification-time {
font-size: 12px;
color: #999;
display: block;
}
.drawer-footer {
padding: 16px;
border-top: 1px solid #e8e8e8;
text-align: center;
}
.mark-all-read {
width: 100%;
height: 36px;
line-height: 36px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
}
/* 修改密码模态框 */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1002;
}
.modal-content {
background-color: white;
width: 400px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #ebeef5;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: 18px;
font-weight: bold;
}
.modal-body {
padding: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-label {
display: block;
margin-bottom: 5px;
}
.modal-body input {
width: 100%;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 10px;
}
.modal-footer {
padding: 10px 15px;
border-top: 1px solid #ebeef5;
display: flex;
justify-content: flex-end;
}
.cancel-btn, .submit-btn {
padding: 8px 15px;
border-radius: 4px;
margin-left: 10px;
}
.cancel-btn {
border: 1px solid #dcdfe6;
background-color: white;
}
.submit-btn {
background-color: #1890ff;
color: white;
border: none;
}
/* 遮罩<E981AE>?*/
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
z-index: 999;
}
</style>

View File

@@ -0,0 +1,77 @@
<template>
<view class="permission-management-page">
<text class="page-title">{{ $t('perm_mgmt.title') }}</text>
<supadb
ref="permdb"
:collection="'ak_roles'"
:field="'*'"
:where="where"
:orderby="'level desc'"
:page-size="pageSize"
:page-current="pageCurrent"
getcount="exact"
loadtime="manual"
v-slot:default="{ data, pagination, loading, error }"
@load="onRoleLoad"
>
<view v-if="loading">{{ $t('common.loading') }}</view>
<view v-else-if="error">{{ error }}</view>
<view v-else>
<view class="table-header">
<text>{{ $t('role.name') }}</text>
<text>{{ $t('role.level') }}</text>
<text>{{ $t('role.description') }}</text>
<text>{{ $t('common.action') }}</text>
</view>
<view v-for="role in data" :key="role.get('id')" class="table-row">
<text>{{ role.get('name') }}</text>
<text>{{ role.get('level') }}</text>
<text>{{ role.get('description') }}</text>
<button @click="editRole(role)">{{ $t('common.edit') }}</button>
<button @click="deleteRole(role)">{{ $t('common.delete') }}</button>
</view>
<view class="pagination">
<button @click="prevPage(pagination)" :disabled="pagination.current <= 1">{{ $t('common.prev') }}</button>
<span>{{ pagination.current }}/{{ pagination.total }}</span>
<button @click="nextPage(pagination)" :disabled="pagination.current >= pagination.total">{{ $t('common.next') }}</button>
</view>
</view>
</supadb>
<!-- 权限分配、编辑弹窗等可后续补<E7BBAD>?-->
</view>
</template>
<script lang="uts">
export default {
name: 'PermissionManagement',
data() {
return {
where: {},
pageSize: 10,
pageCurrent: 1
}
},
methods: {
onRoleLoad(data: any[]) {
// 可处理数<E79086>?
},
prevPage(pagination: any) {
if (pagination.current > 1) this.pageCurrent--;
},
nextPage(pagination: any) {
if (pagination.current < pagination.total) this.pageCurrent++;
},
editRole(role: any) {
// 编辑逻辑
},
deleteRole(role: any) {
// 删除逻辑
}
}
}
</script>
<style scoped>
.permission-management-page { padding: 20px; }
.table-header, .table-row { display: flex; padding: 16px; align-items: center; }
.table-header { font-weight: bold; }
.pagination { margin-top: 16px; }
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,143 @@
<template>
<view class="sports-admin-page">
<admin-layout>
<view class="container">
<view class="page-header">
<text class="page-title">运动管理</text>
</view>
<!-- Tabs -->
<view class="swiper-tabs">
<scroll-view direction="horizontal" :show-scrollbar="false">
<view class="flex-row">
<text v-for="(tab, idx) in tabList" :key="tab.key" class="swiper-tabs-item"
:class="swiperIndex == idx ? 'swiper-tabs-item-active' : ''" @click="onTabClick(idx)">
{{ tab.name }}
</text>
</view>
</scroll-view>
<view class="swiper-tabs-indicator" :style="indicatorStyle ?? {}"></view>
</view>
<!-- Swiper Content -->
<swiper class="swiper-view" :current="swiperIndex" @change="onSwiperChange">
<swiper-item class="swiper-item">
<sports-stats />
</swiper-item>
<swiper-item class="swiper-item">
<sports-notifications />
</swiper-item>
</swiper>
</view>
</admin-layout>
</view>
</template>
<script lang="uts">
import { ref, computed } from 'vue'
import SportsStats from './stats.uvue'
import SportsNotifications from './notifications.uvue'
export default {
components: {
SportsStats,
SportsNotifications
},
setup() {
const swiperIndex = ref(0)
const tabList = [
{ key: 'stats', name: '运动统计' },
{ key: 'notifications', name: '通知管理' }
]
const indicatorStyle = computed(() => {
const tabWidth = 100 / tabList.length
const left = swiperIndex.value * tabWidth
return {
width: `${tabWidth}%`,
left: `${left}%`
}
})
const onTabClick = (index: number) => {
swiperIndex.value = index
}
const onSwiperChange = (e: any) => {
swiperIndex.value = e.detail.current
}
return {
swiperIndex,
tabList,
indicatorStyle,
onTabClick,
onSwiperChange
}
}
}
</script>
<style>
.sports-admin-page {
background-color: #f5f5f5;
min-height: 100vh;
}
.container {
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 16px;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-title {
font-size: 24px;
font-weight: bold;
color: #333;
}
.swiper-tabs {
position: relative;
background-color: #FFF;
border-bottom: 1px solid #ddd;
margin-bottom: 16px;
}
.swiper-tabs-item {
padding: 10px 20px;
font-size: 16px;
color: #555;
cursor: pointer;
text-align: center;
}
.swiper-tabs-item-active {
color: #007aff;
font-weight: bold;
}
.swiper-tabs-indicator {
position: absolute;
bottom: 0;
height: 3px;
background-color: #007aff;
transition: left 0.2s ease-in-out;
}
.swiper-view {
height: 600px; /* Adjust based on content */
}
.swiper-item {
overflow-y: auto;
}
</style>

View File

@@ -0,0 +1,161 @@
<template>
<view class="notifications-page">
<view class="notification-form">
<textarea class="textarea" :value="notificationMessage" @input="notificationMessage = $event.detail.value" placeholder="输入通知内容..."></textarea>
<button class="send-button" @click="sendNotification">发送通知</button>
</view>
<view class="history-section">
<text class="history-title">发送历史</text>
<scroll-view class="history-list" direction="vertical">
<view v-if="loading" class="loading-container">加载中...</view>
<view v-else-if="error" class="error-container">{{ error }}</view>
<view v-else-if="history.length === 0" class="empty-data">
<text>暂无历史记录</text>
</view>
<view v-else v-for="item in history" :key="item.id" class="history-item">
<text class="history-message">{{ item.message }}</text>
<text class="history-date">{{ new Date(item.created_at).toLocaleString() }}</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script lang="uts">
import { ref, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
type NotificationHistory = {
id: number
message: string
created_at: string
}
export default {
setup() {
const notificationMessage = ref('')
const history = ref<NotificationHistory[]>([])
const loading = ref(false)
const error = ref<string | null>(null)
const fetchHistory = async () => {
loading.value = true
error.value = null
const result = await supa.from('ak_sports_notifications').select('*').order('created_at', { ascending: false }).limit(50).execute()
if (result.error) {
error.value = `加载历史记录失败: ${result.error.message}`
} else {
history.value = result.data as NotificationHistory[]
}
loading.value = false
}
const sendNotification = async () => {
if (notificationMessage.value.trim() === '') {
uni.showToast({ title: '通知内容不能为空', icon: 'none' })
return
}
// In a real app, this would trigger a push notification service.
// Here, we just save it to the database as a record.
const insertResult = await supa.from('ak_sports_notifications').insert({ message: notificationMessage.value }).execute()
if (insertResult.error) {
uni.showToast({ title: `发送失败: ${insertResult.error.message}`, icon: 'none' })
} else {
uni.showToast({ title: '通知已记录', icon: 'success' })
notificationMessage.value = ''
fetchHistory() // Refresh history
}
}
onMounted(() => {
fetchHistory()
})
return {
notificationMessage,
history,
loading,
error,
sendNotification
}
}
}
</script>
<style>
.notifications-page {
padding: 15px;
}
.notification-form {
margin-bottom: 25px;
}
.textarea {
width: 100%;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
.send-button {
background-color: #007aff;
color: white;
border: none;
padding: 12px 15px;
border-radius: 5px;
width: 100%;
}
.history-section {
margin-top: 20px;
}
.history-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
display: block;
}
.history-list {
max-height: 400px;
border: 1px solid #eee;
border-radius: 5px;
}
.empty-data, .loading-container, .error-container {
text-align: center;
padding: 40px;
color: #888;
}
.history-item {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
.history-item:last-child {
border-bottom: none;
}
.history-message {
display: block;
color: #333;
font-size: 16px;
}
.history-date {
display: block;
color: #999;
font-size: 12px;
margin-top: 5px;
}
</style>

View File

@@ -0,0 +1,155 @@
<template>
<view class="sports-stats-page">
<view class="stats-controls">
<picker mode="date" :value="selectedDate" @change="onDateChange">
<view class="picker">
当前选择: {{ selectedDate }}
</view>
</picker>
<button @click="fetchStats">查询</button>
</view>
<view v-if="loading" class="loading-container">加载中...</view>
<view v-else-if="error" class="error-container">{{ error }}</view>
<view v-else class="stats-container">
<view class="stat-card">
<text class="stat-title">总步数</text>
<text class="stat-value">{{ summary.total_steps ?? 0 }}</text>
</view>
<view class="stat-card">
<text class="stat-title">总距离 (米)</text>
<text class="stat-value">{{ summary.total_distance?.toFixed(2) ?? 0 }}</text>
</view>
<view class="stat-card">
<text class="stat-title">平均心率</text>
<text class="stat-value">{{ summary.avg_heart_rate?.toFixed(1) ?? 0 }}</text>
</view>
<view class="stat-card">
<text class="stat-title">活跃用户</text>
<text class="stat-value">{{ summary.active_users ?? 0 }}</text>
</view>
</view>
<!-- Add charts here later -->
<view class="chart-container">
<text>图表区域</text>
</view>
</view>
</template>
<script lang="uts">
import { ref, reactive, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
type SportsSummary = {
total_steps: number
total_distance: number
avg_heart_rate: number
active_users: number
}
export default {
setup() {
const selectedDate = ref(new Date().toISOString().slice(0, 10))
const loading = ref(false)
const error = ref<string | null>(null)
const summary = reactive < SportsSummary > ({
total_steps: 0,
total_distance: 0,
avg_heart_rate: 0,
active_users: 0
})
const onDateChange = (e: any) => {
selectedDate.value = e.detail.value
}
const fetchStats = async () => {
loading.value = true
error.value = null
const date = selectedDate.value
const result = await supa.rpc('get_daily_sports_stats', { query_date: date })
if (result.error) {
error.value = `获取统计数据失败: ${result.error.message}`
console.error(result.error)
} else if (result.data) {
const stats = result.data[0]
summary.total_steps = stats.total_steps
summary.total_distance = stats.total_distance
summary.avg_heart_rate = stats.avg_heart_rate
summary.active_users = stats.active_users
}
loading.value = false
}
onMounted(() => {
fetchStats()
})
return {
selectedDate,
loading,
error,
summary,
onDateChange,
fetchStats
}
}
}
</script>
<style>
.sports-stats-page {
padding: 15px;
}
.stats-controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: center;
}
.stats-controls .picker {
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 5px;
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.stat-card {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
text-align: center;
}
.stat-title {
font-size: 14px;
color: #666;
display: block;
margin-bottom: 10px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #333;
}
.chart-container {
margin-top: 30px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
}
</style>

View File

@@ -0,0 +1,303 @@
<template>
<view class="user-management-page">
<text class="page-title">{{ $t('user_mgmt.title') }}</text>
<view class="search-bar">
<input class="searchinput" type="text" v-model="searchQuery" placeholder="Search users..." />
<button class="searchbutton" @click="searchUsers">{{ $t('common.search') }}</button>
</view>
<supadb
ref="userdb"
:collection="'ak_users'"
:field="'*'"
:filter="where"
:orderby="'id.desc'"
:page-size="pageSize"
:page-current="pageCurrent"
getcount="exact"
loadtime="manual"
v-slot:default="{ data, pagination, loading, current, total, error }"
@load="onUserLoad"
>
<view v-if="loading">{{ $t('common.loading') }}</view>
<view v-else-if="error">{{ error }}</view>
<view v-else>
<!-- Large Screen Layout (Table) -->
<view class="table-view">
<view class="table-header">
<text>{{ $t('user.username') }}</text>
<text>{{ $t('user.email') }}</text>
<text>{{ $t('user.role') }}</text>
<text>{{ $t('user.created_at') }}</text>
<text>{{ $t('common.action') }}</text>
</view>
<view v-for="(user, idx) in (data as Array<UTSJSONObject>)" :key="user.get('id')" :class="['table-row', idx % 2 === 0 ? 'row-even' : 'row-odd']">
<text>{{ user.get('username') }}</text>
<text>{{ user.get('email') }}</text>
<text>{{ user.get('role') }}</text>
<text>{{ user.get('created_at') }}</text>
<view class="action-buttons">
<button @click="editUser(user)">{{ $t('common.edit') }}</button>
<button @click="deleteUser(user)">{{ $t('common.delete') }}</button>
</view>
</view>
</view>
<!-- Small Screen Layout (Cards) -->
<view class="card-view">
<view v-for="(user, idx) in (data as Array<UTSJSONObject>)" :key="user.get('id')" :class="['user-card', idx % 2 === 0 ? 'row-even' : 'row-odd']">
<view class="card-row">
<text class="card-label">{{ $t('user.username') }}:</text>
<text class="card-value">{{ user.get('username') }}</text>
</view>
<view class="card-row">
<text class="card-label">{{ $t('user.email') }}:</text>
<text class="card-value">{{ user.get('email') }}</text>
</view>
<view class="card-row">
<text class="card-label">{{ $t('user.role') }}:</text>
<text class="card-value">{{ user.get('role') }}</text>
</view>
<view class="card-row">
<text class="card-label">{{ $t('user.created_at') }}:</text>
<text class="card-value">{{ user.get('created_at') }}</text>
</view>
<view class="card-actions">
<button @click="editUser(user)">{{ $t('common.edit') }}</button>
<button @click="deleteUser(user)">{{ $t('common.delete') }}</button>
</view>
</view>
</view>
<view class="pagination">
<button @click="prevPage(pagination!!)">{{ $t('common.prev') }}</button>
<text>{{ current}}/{{ total }}</text>
<button @click="nextPage(pagination!!)">{{ $t('common.next') }}</button>
<button v-if="hasMoreData" @click="continueIteration()">{{ $t('common.continueToIterate') }}</button>
</view>
</view>
</supadb>
<!-- 编辑/新增弹窗等可后续补充 -->
</view>
</template>
<script lang="uts">
import supa from '@/components/supadb/aksupainstance.uts';
export default {
name: 'UserManagement',
data() {
return {
supadb: null as SupadbComponentPublicInstance | null,
where: {},
pageSize: 10,
pageCurrent: 1,
searchQuery: '',
screenWidth: uni.getSystemInfoSync().windowWidth,
hasMoreData: false
}
},
onReady() {
this.supadb = this.$refs["userdb"] as SupadbComponentPublicInstance;
// supa.from('system_dept').select(*).or('"name.like.%20%,email.like.%202%");
this.supadb?.loadData?.({ clear: false })
},
methods: {
onUserLoad(data: any[]) {
// 可处理数<E79086>?
this.hasMoreData = data.length === this.pageSize;
},
async prevPage(pagination: any) {
this.pageCurrent--;
await nextTick();
this.supadb?.loadData?.({ clear: false })
},
async nextPage(pagination: any) {
this.pageCurrent++;
await nextTick();
this.supadb?.loadData?.({ clear: false })
},
editUser(user: UTSJSONObject) {
// 编辑逻辑
console.log(user)
uni.navigateTo({
url:'/pages/admins/users/detail?id='+ user.getString("id")
})
},
deleteUser(user: any) {
// 删除逻辑
},
async searchUsers() {
// Implement search logic
if (this.searchQuery!=null) {
// this.where = {
// text: this.searchQuery,
// column: ['username', 'email', 'role']
// };
// this.where = { email: { ilike: '%'+this.searchQuery+'%' }} as UTSJSONObject
this.where ={ or:"username.like.%"+this.searchQuery+"%,email.like.%"+this.searchQuery+"%"}
} else {
this.where = {};
}
console.log(this.where)
this.pageCurrent = 1;
await nextTick();
this.supadb?.loadData?.({ clear: true });
},
async continueIteration() {
this.pageCurrent++;
await nextTick();
this.supadb?.loadData?.({ clear: false })
}
},
onResize(size) {
// 这里处理页面尺寸变化
this.screenWidth = size.size.windowWidth;
}
}
</script>
<style scoped>
.user-management-page {
padding: 20px;
}
.search-bar {
display: flex;
margin-bottom: 16px;
padding: 8px;
}
/* Table View (Large Screens) */
.table-view {
display: flex;
flex-direction: column;
width: 100%;
}
.table-header, .table-row {
display: flex;
width: 100%;
padding: 16px;
align-items: center;
flex-direction: row;
}
.table-header {
font-weight: bold;
padding-bottom: 8px;
border-bottom: 1px solid #ccc;
}
.table-header text, .table-row text {
flex: 1;
padding: 8px 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-row {
border-bottom: 1px solid #eee;
padding: 8px 0;
}
.table-row:nth-child(even) {
background-color: #f7f7fa;
}
.table-row:nth-child(odd) {
background-color: #fff;
}
.action-buttons {
display: flex;
padding: 8px;
}
/* Card View (Small Screens) */
.card-view {
display: none;
flex-direction: column;
width: 100%;
padding: 16px;
}
.user-card {
border: 1px solid #eee;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-card:nth-child(even) {
background-color: #f7f7fa;
}
.user-card:nth-child(odd) {
background-color: #fff;
}
.card-row {
display: flex;
padding: 4px 0;
}
.card-label {
font-weight: bold;
width: 100px;
}
.card-value {
flex: 1;
}
.card-actions {
display: flex;
padding: 8px;
margin-top: 12px;
/* justify-content: flex-end; */
}
.pagination {
margin-top: 16px;
display: flex;
align-items: center;
padding: 16px;
justify-content: center;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.table-view {
display: none;
}
.card-view {
display: flex;
}
.search-bar {
flex-direction: row;
justify-content: flex-end;
}
}
@media screen and (min-width: 769px) {
.table-view {
display: flex;
}
.card-view {
display: none;
}
}
.row-even { background-color: #f7f7fa; }
.row-odd { background-color: #fff; }
.searchbutton{
width:200rpx;
height:80rpx;
}
.searchinput{
flex:1;
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff