shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:将侧边栏兼容移动端

Browse Source
This commit is contained in:
2256907009
2026-01-20 17:54:45 +08:00
parent 0b57581799
commit e3e70114fb
18 changed files with 3059 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/user/UserDetail.vue
+130 -59
View File
@@ -44,24 +44,32 @@
</div>
</div>
</div>
<div class="profile-stats">
<div class="stat-item">
<div class="stat-label">实名状态</div>
<div class="stat-value">
<el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
{{ getRealNameStatusText(userInfo.RealName?.Status) }}
</el-tag>
</div>
</div>
<div class="stat-item">
<div class="stat-label">推荐人ID</div>
<div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
</div>
<div class="stat-item">
<div class="stat-label">用户组ID</div>
<div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
</div>
<!-- 统一的用户数据概览区域 -->
<div class="profile-stats-unified">
<!-- 余额数据 -->
<div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
<div class="stat-label">{{ balance.typeName }}</div>
<div class="stat-value" :style="{ color: balance.typeColor }">{{ formatBalance(balance.price) }}</div>
</div>
<!-- 分隔线 -->
<el-divider direction="vertical" v-if="userBalanceList.length > 0" class="stats-divider" />
<!-- 其他状态数据 -->
<div class="stat-item">
<div class="stat-label">实名状态</div>
<div class="stat-value">
<el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
{{ getRealNameStatusText(userInfo.RealName?.Status) }}
</el-tag>
</div>
</div>
<div class="stat-item">
<div class="stat-label">推荐人ID</div>
<div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
</div>
<div class="stat-item">
<div class="stat-label">用户组ID</div>
<div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
</div>
</div>
</div>
@@ -298,19 +306,34 @@
</el-select>
</el-form-item>
<el-form-item label="推荐人">
<div class="recommend-user-selector">
<div class="selected-user" v-if="recommendUserInfo.UserId">
<el-avatar :size="32" :src="recommendUserInfo.Avatar" />
<span class="user-name">{{ recommendUserInfo.UserName }}</span>
<span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
<el-button type="danger" link size="small" @click="clearRecommendUser">
<el-icon><Close /></el-icon>
<el-input
v-if="recommendUserInfo.UserId"
:model-value="`${recommendUserInfo.UserName} (ID: ${recommendUserInfo.UserId})`"
readonly
style="width: 100%"
>
<template #suffix>
<el-icon class="clear-icon" @click="clearRecommendUser"><Close /></el-icon>
</template>
<template #append>
<el-button @click="showUserSelectorDialog = true">
<el-icon><User /></el-icon>
</el-button>
</div>
<el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
<el-icon><User /></el-icon> 选择推荐人
</el-button>
</div>
</template>
</el-input>
<el-input
v-else
placeholder="请选择推荐人"
readonly
style="width: 100%"
@click="showUserSelectorDialog = true"
>
<template #append>
<el-button @click="showUserSelectorDialog = true">
<el-icon><User /></el-icon>
</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -559,6 +582,16 @@ const userBalance = ref({
total_consume: 0
})
// 用户余额列表（用于概览卡片展示）
const userBalanceList = ref([])
// 余额类型映射
const balanceTypeMap = {
entity: { name: '云钻', type: 'cloud_diamond', color: '#409EFF' },
general: { name: '云币', type: 'cloud_coin', color: '#67C23A' },
withdraw: { name: '云点', type: 'cloud_points', color: '#E6A23C' }
}
// 编辑用户相关
const editDialogVisible = ref(false)
const editForm = reactive({
@@ -684,6 +717,8 @@ const fetchUserInfo = async () => {
if (userInfo.value.CoverID) {
fetchCurrentAvatar(userInfo.value.CoverID)
}
// 获取用户余额列表
fetchUserBalanceList(userId)
}
} catch (error) {
ElMessage.error('获取用户信息失败')
@@ -692,6 +727,25 @@ const fetchUserInfo = async () => {
}
}
// 获取用户余额列表（用于概览卡片展示）
const fetchUserBalanceList = async (userId) => {
try {
const res = await getUserBalanceCount({ user_id: userId })
if (res.data.code === 200) {
// 只保留映射类型中存在的余额
userBalanceList.value = (res.data.data || []).filter(item => {
return balanceTypeMap[item.type]
}).map(item => ({
...item,
typeName: balanceTypeMap[item.type]?.name || item.type,
typeColor: '#000000'
}))
}
} catch (error) {
console.error('获取用户余额失败:', error)
}
}
// 刷新数据
const refreshData = () => {
fetchUserInfo()
@@ -1038,7 +1092,7 @@ const handleViewOrder = (row) => {
const handleViewTicket = (row) => {
router.push({
path: '/ticket/detail',
query: { work_id: row.work_id }
query: { id: row.work_id }
})
}
@@ -1286,6 +1340,12 @@ const formatDate = (dateString) => {
})
}
// 余额格式化（分转元，保留2位小数）
const formatBalance = (price) => {
if (price === undefined || price === null) return '0.00'
return (price / 100).toFixed(2)
}
const loadUserData = async () => {
if(!route.query.user_id){
ElMessage.error('缺少用户ID参数');
@@ -1375,6 +1435,7 @@ onActivated(() => {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
.avatar-wrapper {
@@ -1435,27 +1496,37 @@ onActivated(() => {
margin-left: 4px;
}
.profile-stats {
/* 统一的用户数据概览区域 */
.profile-stats-unified {
display: flex;
gap: 32px;
align-items: center;
gap: 24px;
margin-left: auto;
flex-wrap: wrap;
}
.stat-item {
.profile-stats-unified .stat-item {
text-align: center;
min-width: 70px;
}
.stat-label {
.profile-stats-unified .stat-label {
font-size: 12px;
color: #909399;
margin-bottom: 4px;
}
.stat-value {
.profile-stats-unified .stat-value {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.stats-divider {
height: 40px;
margin: 0 8px;
}
.action-divider {
margin: 0 0 20px 0;
}
@@ -1540,28 +1611,15 @@ onActivated(() => {
}
/* 推荐人选择器 */
.recommend-user-selector {
width: 100%;
}
.selected-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: #f5f7fa;
border-radius: 6px;
border: 1px solid #e4e7ed;
}
.selected-user .user-name {
font-weight: 500;
color: #303133;
}
.selected-user .user-id {
/* 推荐人选择器样式 */
.clear-icon {
cursor: pointer;
color: #909399;
font-size: 12px;
transition: color 0.2s;
}
.clear-icon:hover {
color: #f56c6c;
}
@@ -1671,12 +1729,17 @@ onActivated(() => {
gap: 20px;
}
.profile-stats {
.profile-stats-unified {
width: 100%;
justify-content: space-around;
justify-content: flex-start;
background: #f9fafc;
padding: 16px;
border-radius: 8px;
margin-left: 0;
}
.stats-divider {
display: none;
}
.balance-overview {
@@ -1688,5 +1751,13 @@ onActivated(() => {
.balance-overview {
grid-template-columns: 1fr;
}
.profile-stats-unified {
gap: 16px;
}
.profile-stats-unified .stat-item {
min-width: 60px;
}
}
</style>
src/views/user/UserGroup.vue
+34 -28
View File
@@ -141,20 +141,34 @@
<el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
</el-form-item>
<el-form-item label="下一级用户组ID">
<div class="selector-field">
<div class="selector-info" v-if="selectedHigherGroupInfo">
<el-tag type="primary" effect="plain">
ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
</el-tag>
</div>
<div class="selector-actions">
<el-button type="primary" @click="groupSelectorVisible = true">
<el-input
v-if="selectedHigherGroupInfo"
:model-value="`${selectedHigherGroupInfo.Name || selectedHigherGroupInfo.name} (ID: ${groupForm.higher_level_id})`"
readonly
style="width: 100%"
>
<template #suffix>
<el-icon class="clear-icon" @click="clearHigherGroup"><Close /></el-icon>
</template>
<template #append>
<el-button @click="groupSelectorVisible = true">
<el-icon><Connection /></el-icon>
{{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
</el-button>
<el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
</div>
</div>
</template>
</el-input>
<el-input
v-else
placeholder="请选择下一级用户组（可选）"
readonly
style="width: 100%"
@click="groupSelectorVisible = true"
>
<template #append>
<el-button @click="groupSelectorVisible = true">
<el-icon><Connection /></el-icon>
</el-button>
</template>
</el-input>
</el-form-item>
<!-- 用户组选择器 -->
@@ -274,7 +288,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
import { Plus, Refresh, Edit, User, Delete, Connection, Close } from '@element-plus/icons-vue'
import {
getUserGroupList,
getUserGroupMemberList,
@@ -747,22 +761,14 @@ onMounted(() => {
100% { background-position: -200% 0; }
}
/* 选择器字段样式 */
.selector-field {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
/* 选择器清除图标样式 */
.clear-icon {
cursor: pointer;
color: #909399;
transition: color 0.2s;
}
.selector-info {
display: flex;
align-items: center;
}
.selector-actions {
display: flex;
gap: 8px;
align-items: center;
.clear-icon:hover {
color: #f56c6c;
}
</style>
src/views/user/UserList.vue
+340 -52
View File
@@ -4,35 +4,42 @@
<el-card class="main-container" shadow="never">
<!-- 搜索和操作栏 -->
<div class="filter-section">
<div class="filter-content">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="关键字">
<el-input v-model="queryParams.key" placeholder="请输入用户名/邮箱" clearable style="width: 200px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<el-icon><Search /></el-icon>查询
</el-button>
<el-button @click="resetQuery">重置</el-button>
<el-button type="success" @click="fetchUserList">
<el-icon><Refresh /></el-icon>刷新
</el-button>
</el-form-item>
<el-form-item label="用户ID">
<el-input
v-model="jumpUserId"
placeholder="输入用户ID跳转"
clearable
style="width: 150px"
@keyup.enter="handleJumpToUser"
/>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="handleJumpToUser">
<el-icon><Position /></el-icon>跳转
</el-button>
</el-form-item>
</el-form>
<!-- 第一行：搜索区域 -->
<div class="filter-row search-row">
<div class="search-group">
<span class="search-label">关键字</span>
<el-input
v-model="queryParams.key"
placeholder="请输入用户名/邮箱"
clearable
class="search-input"
/>
</div>
<div class="search-group">
<span class="search-label">用户ID</span>
<el-input
v-model="jumpUserId"
placeholder="输入ID跳转"
clearable
class="search-input-small"
@keyup.enter="handleJumpToUser"
/>
</div>
<div class="search-buttons">
<el-button type="primary" @click="handleQuery">
<el-icon><Search /></el-icon><span class="btn-text">查询</span>
</el-button>
<el-button @click="resetQuery">重置</el-button>
<el-button type="success" @click="fetchUserList">
<el-icon><Refresh /></el-icon><span class="btn-text">刷新</span>
</el-button>
<el-button type="warning" @click="handleJumpToUser">
<el-icon><Position /></el-icon><span class="btn-text">跳转</span>
</el-button>
</div>
</div>
<!-- 第二行：操作栏 -->
<div class="filter-row action-row">
<div class="action-bar">
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>新增用户
@@ -70,12 +77,69 @@
<div class="skeleton-cell skeleton-action"></div>
</div>
</div>
<!-- 数据表格 -->
<!-- 移动端卡片列表 -->
<div v-else class="mobile-card-list">
<div v-for="row in userList" :key="row.UserId" class="user-card">
<div class="card-header">
<el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
<el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
<div class="card-user-info">
<div class="card-username">{{ row.UserName }}</div>
<div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
</div>
<el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
{{ row.IsDeleted ? '已删除' : '正常' }}
</el-tag>
</div>
<div class="card-body">
<div class="card-info-row">
<span class="card-label">用户ID:</span>
<span class="card-value">{{ row.UserId }}</span>
</div>
<div class="card-info-row">
<span class="card-label">手机号:</span>
<span class="card-value">{{ row.Phone || '未设置' }}</span>
</div>
<div class="card-info-row">
<span class="card-label">用户组:</span>
<span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
</div>
<div class="card-info-row">
<span class="card-label">实名:</span>
<span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
</div>
<div class="card-info-row">
<span class="card-label">注册时间:</span>
<span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
</div>
</div>
<div class="card-footer">
<el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
<el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
<el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="edit">编辑用户</el-dropdown-item>
<el-dropdown-item command="avatar">修改头像</el-dropdown-item>
<el-dropdown-item command="password">修改密码</el-dropdown-item>
<el-dropdown-item command="group">修改用户组</el-dropdown-item>
<el-dropdown-item command="realname">实名信息</el-dropdown-item>
<el-dropdown-item command="balance">余额管理</el-dropdown-item>
<el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
<!-- 数据表格（PC端） -->
<el-table
v-else
v-if="!loading"
:data="userList"
@selection-change="handleSelectionChange"
style="width: 100%"
class="desktop-table"
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
>
<el-table-column type="selection" width="55" />
@@ -969,52 +1033,276 @@ onMounted(() => {
background: #fafbfc;
}
.filter-content {
.filter-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
gap: 20px;
padding: 12px 20px;
gap: 16px;
flex-wrap: wrap;
}
.search-form {
margin: 0;
flex: 1;
.filter-row:not(:last-child) {
border-bottom: 1px solid #ebeef5;
}
.search-row {
padding: 16px 20px;
}
.action-row {
padding: 12px 20px;
background: #fff;
}
.search-group {
display: flex;
align-items: center;
gap: 12px;
min-width: 400px;
gap: 8px;
}
.search-form :deep(.el-form-item) {
margin-bottom: 0;
}
.search-form :deep(.el-form-item__label) {
margin-right: 8px;
.search-label {
font-size: 14px;
color: #606266;
white-space: nowrap;
flex-shrink: 0;
}
.search-input {
width: 200px;
}
.search-input-small {
width: 140px;
}
.search-buttons {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.btn-text {
margin-left: 4px;
}
.action-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* 移动端卡片列表样式 */
.mobile-card-list {
display: none;
padding: 16px;
gap: 16px;
}
.user-card {
background: #fff;
border: 1px solid #e1e8ed;
padding: 16px;
margin-bottom: 12px;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f2f5;
}
.card-avatar {
flex-shrink: 0;
}
@media (max-width: 768px) {
.filter-content {
.card-user-info {
flex: 1;
min-width: 0;
}
.card-username {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-email {
font-size: 12px;
color: #909399;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-body {
padding: 12px 0;
}
.card-info-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
}
.card-label {
color: #909399;
flex-shrink: 0;
}
.card-value {
color: #2c3e50;
text-align: right;
word-break: break-all;
}
.card-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 12px;
border-top: 1px solid #f0f2f5;
}
/* PC端表格显示 */
.desktop-table {
display: table;
width: 100%;
}
/* 平板适配 */
@media (max-width: 1024px) {
.search-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.search-form {
min-width: 100%;
.search-group {
width: 100%;
}
.search-input,
.search-input-small {
flex: 1;
width: auto !important;
}
.search-buttons {
width: 100%;
justify-content: flex-start;
}
}
/* 移动端适配 */
@media (max-width: 768px) {
.filter-row {
padding: 12px 16px;
}
.search-row {
padding: 12px 16px;
gap: 10px;
}
.action-row {
padding: 10px 16px;
}
.search-group {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.search-label {
font-size: 13px;
}
.search-input,
.search-input-small {
width: 100% !important;
}
.search-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
}
.search-buttons .el-button {
margin: 0;
width: 100%;
}
.btn-text {
display: none;
}
.action-bar {
width: 100%;
justify-content: flex-end;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.action-bar .el-button {
margin: 0;
width: 100%;
}
/* 移动端显示卡片，隐藏表格 */
.mobile-card-list {
display: block;
}
.desktop-table {
display: none !important;
}
/* 分页移动端样式 */
.pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 12px 16px;
}
.pagination :deep(.el-pagination__sizes),
.pagination :deep(.el-pagination__jump) {
display: none;
}
}
/* 超小屏幕适配 */
@media (max-width: 480px) {
.filter-row {
padding: 10px 12px;
}
.search-buttons {
grid-template-columns: repeat(4, 1fr);
}
.search-buttons .el-button {
padding: 8px 0;
font-size: 12px;
}
.action-bar {
grid-template-columns: 1fr 1fr;
}
.action-bar .el-button {
font-size: 13px;
padding: 8px 12px;
}
}