team/tyapi-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端页面适配

Browse Source
This commit is contained in:
18278715334
2025-12-10 14:17:31 +08:00
parent 403e2c28c0
commit ffbdcb29c4
13 changed files with 3169 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/pages/admin/announcements/components/AnnouncementEditDialog.vue
View File

@@ -2,13 +2,14 @@
<el-dialog
v-model="dialogVisible"
:title="isEdit ? '编辑公告' : '新增公告'"
width="80%"
:width="isMobile ? '95%' : '80%'"
:close-on-click-modal="false"
@open="handleDialogOpen"
v-loading="loading"
@close="handleClose"
class="announcement-edit-dialog"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="space-y-6">
<el-form ref="formRef" :model="form" :rules="rules" :label-width="isMobile ? '80px' : '100px'" class="space-y-6">
<!-- 基本信息 -->
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
@@ -23,16 +24,20 @@
<h3 class="text-lg font-medium text-gray-900 mb-4">公告内容</h3>
<el-form-item label="公告内容" prop="content">
<Editor style="width: 100%;" v-model="form.content" :init="editorInit"
tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
<Editor
style="width: 100%;"
v-model="form.content"
:init="editorInitConfig"
tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js"
/>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="flex justify-end space-x-3">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleSubmit">
<div :class="['flex', isMobile ? 'flex-col gap-2' : 'justify-end space-x-3']">
<el-button :size="isMobile ? 'default' : 'default'" :class="isMobile ? 'w-full' : ''" @click="handleClose">取消</el-button>
<el-button :size="isMobile ? 'default' : 'default'" :class="isMobile ? 'w-full' : ''" type="primary" :loading="loading" @click="handleSubmit">
{{ isEdit ? '更新' : '创建' }}
</el-button>
</div>
@@ -42,6 +47,7 @@
<script setup>
import { announcementApi } from '@/api';
import { useMobileTable } from '@/composables/useMobileTable';
import Editor from '@tinymce/tinymce-vue';
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';
@@ -61,6 +67,9 @@ const props = defineProps({
// Emits
const emit = defineEmits(['update:modelValue', 'success'])
// 移动端适配
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const formRef = ref(null)
const loading = ref(false)
@@ -102,6 +111,27 @@ const editorInit = {
height: 400
}
// 响应式编辑器配置
const editorInitConfig = computed(() => {
const baseConfig = { ...editorInit }
if (isMobile.value) {
// 移动端优化配置
baseConfig.height = 300
baseConfig.toolbar_mode = 'wrap'
baseConfig.mobile = {
toolbar_mode: 'wrap',
toolbar_sticky: false
}
// 简化工具栏，移除部分功能以适应小屏幕
baseConfig.toolbar = [
'undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist | link'
]
}
return baseConfig
})
// 计算属性
const dialogVisible = computed({
get: () => props.modelValue,
@@ -210,3 +240,67 @@ const handleSubmit = async () => {
}
</script>
<style scoped>
/* 移动端响应式设计 */
@media (max-width: 768px) {
.announcement-edit-dialog :deep(.el-dialog__body) {
padding: 16px;
}
.announcement-edit-dialog :deep(.el-form-item) {
margin-bottom: 20px;
}
.announcement-edit-dialog :deep(.el-form-item__label) {
font-size: 14px;
padding-bottom: 4px;
}
.announcement-edit-dialog :deep(.bg-gray-50) {
padding: 12px;
}
.announcement-edit-dialog :deep(h3) {
font-size: 16px;
margin-bottom: 12px;
}
/* TinyMCE 编辑器移动端优化 */
.announcement-edit-dialog :deep(.tox-tinymce) {
border-radius: 4px;
}
.announcement-edit-dialog :deep(.tox-toolbar) {
flex-wrap: wrap;
}
.announcement-edit-dialog :deep(.tox-toolbar__group) {
margin: 2px;
}
}
@media (max-width: 480px) {
.announcement-edit-dialog :deep(.el-dialog__body) {
padding: 12px;
}
.announcement-edit-dialog :deep(.el-form-item) {
margin-bottom: 16px;
}
.announcement-edit-dialog :deep(.bg-gray-50) {
padding: 10px;
}
.announcement-edit-dialog :deep(h3) {
font-size: 14px;
margin-bottom: 10px;
}
/* 更小的编辑器高度 */
.announcement-edit-dialog :deep(.tox-tinymce) {
min-height: 250px;
}
}
</style>

351
src/pages/admin/announcements/index.vue
View File

@@ -4,9 +4,10 @@
subtitle="管理系统中的所有公告内容"
>
<template #actions>
<el-button type="primary" @click="handleCreateAnnouncement">
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="handleCreateAnnouncement">
<el-icon class="mr-1"><PlusIcon /></el-icon>
新增公告
<span :class="isMobile ? 'hidden sm:inline' : ''">新增公告</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
</el-button>
</template>
@@ -45,8 +46,10 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadAnnouncements">应用筛选</el-button>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">重置筛选</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadAnnouncements" :class="isMobile ? 'flex-1' : ''">应用筛选</el-button>
</div>
</template>
</FilterSection>
</template>
@@ -57,13 +60,142 @@
<AnnouncementStats :stats="stats" />
</div>
<!-- 公告列表表格 -->
<el-table
v-loading="loading"
:data="announcements"
stripe
class="w-full"
>
<!-- 移动端卡片布局 -->
<div v-if="isMobile && announcements.length > 0" class="announcement-cards">
<div
v-for="announcement in announcements"
:key="announcement.id"
class="announcement-card"
>
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1 flex-wrap">
<span class="font-semibold text-base text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewAnnouncement(announcement)">
{{ announcement.title }}
</span>
<el-tag
:type="getStatusType(announcement.status, announcement.scheduled_at)"
size="small"
>
{{ getStatusText(announcement.status, announcement.scheduled_at) }}
</el-tag>
</div>
</div>
</div>
<div class="card-body">
<div v-if="announcement.scheduled_at" class="card-row">
<span class="card-label">定时发布</span>
<span class="card-value text-sm">{{ formatDate(announcement.scheduled_at) }}</span>
</div>
<div class="card-row">
<span class="card-label">创建时间</span>
<span class="card-value text-sm">{{ formatDate(announcement.created_at) }}</span>
</div>
<div class="card-row">
<span class="card-label">更新时间</span>
<span class="card-value text-sm">{{ formatDate(announcement.updated_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
v-if="announcement.status === 'draft'"
type="success"
size="small"
@click="handlePublishAnnouncement(announcement)"
class="action-btn"
>
发布
</el-button>
<el-button
v-if="announcement.status === 'published'"
type="warning"
size="small"
@click="handleWithdrawAnnouncement(announcement)"
class="action-btn"
>
撤回
</el-button>
<el-button
v-if="announcement.status === 'published'"
type="info"
size="small"
@click="handleArchiveAnnouncement(announcement)"
class="action-btn"
>
归档
</el-button>
<el-button
type="primary"
size="small"
@click="handleEditAnnouncement(announcement)"
class="action-btn"
>
编辑
</el-button>
<el-dropdown @command="(command) => handleMoreAction(command, announcement)" trigger="click">
<el-button type="info" size="small" class="action-btn">
更多<el-icon class="ml-1"><ChevronDownIcon /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="announcement.status === 'draft' && !announcement.scheduled_at"
command="schedule-publish"
>
<div class="flex items-center gap-2">
<ClockIcon class="w-4 h-4" />
<span>定时发布</span>
</div>
</el-dropdown-item>
<el-dropdown-item
v-if="announcement.status === 'draft' && announcement.scheduled_at"
command="schedule-publish"
>
<div class="flex items-center gap-2">
<ClockIcon class="w-4 h-4" />
<span>修改时间</span>
</div>
</el-dropdown-item>
<el-dropdown-item
v-if="announcement.status === 'draft' && announcement.scheduled_at"
command="cancel-schedule"
divided
>
<div class="flex items-center gap-2">
<XMarkIcon class="w-4 h-4" />
<span>取消定时</span>
</div>
</el-dropdown-item>
<el-dropdown-item command="view">
<div class="flex items-center gap-2">
<EyeIcon class="w-4 h-4" />
<span>查看</span>
</div>
</el-dropdown-item>
<el-dropdown-item command="delete" divided>
<div class="flex items-center gap-2">
<TrashIcon class="w-4 h-4" />
<span>删除</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="table-container">
<el-table
v-loading="loading"
:data="announcements"
stripe
class="w-full"
>
<el-table-column prop="title" label="公告标题" min-width="200">
<template #default="{ row }">
<span class="font-medium text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewAnnouncement(row)">
@@ -194,7 +326,9 @@
</div>
</template>
</el-table-column>
</el-table>
</el-table>
</div>
</div>
</template>
<template #pagination>
@@ -204,7 +338,8 @@
v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -239,6 +374,7 @@ import { announcementApi } from '@/api'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { ChevronDownIcon, ClockIcon, EyeIcon, MagnifyingGlassIcon, PlusIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/outline'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
@@ -247,6 +383,9 @@ import AnnouncementEditDialog from './components/AnnouncementEditDialog.vue'
import AnnouncementStats from './components/AnnouncementStats.vue'
import SchedulePublishDialog from './components/SchedulePublishDialog.vue'
// 移动端适配
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const announcements = ref([])
@@ -543,3 +682,189 @@ onMounted(() => {
})
</script>
<style scoped>
/* 移动端卡片布局 */
.announcement-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.announcement-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.card-header {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
}
.card-label {
color: #6b7280;
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.card-value {
color: #111827;
flex: 1;
word-break: break-word;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 0;
}
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 移动端响应式设计 */
@media (max-width: 768px) {
.announcement-card {
padding: 12px;
}
.card-header {
margin-bottom: 10px;
padding-bottom: 10px;
}
.card-body {
gap: 6px;
margin-bottom: 10px;
}
.card-row {
font-size: 12px;
flex-direction: column;
gap: 4px;
}
.card-label {
min-width: auto;
font-size: 11px;
}
.card-value {
font-size: 12px;
}
.card-footer {
padding-top: 10px;
}
.action-buttons {
gap: 6px;
}
.action-btn {
flex: 1;
min-width: 60px;
}
/* 表格在移动端优化 */
:deep(.el-table) {
font-size: 12px;
min-width: 600px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 移动端隐藏固定列阴影 */
:deep(.el-table__fixed-right) {
box-shadow: none !important;
}
}
@media (max-width: 480px) {
.announcement-card {
padding: 10px;
}
.card-header {
margin-bottom: 8px;
padding-bottom: 8px;
}
.card-body {
gap: 4px;
margin-bottom: 8px;
}
.card-row {
font-size: 11px;
}
.card-label {
font-size: 10px;
}
.card-value {
font-size: 11px;
}
.action-buttons {
gap: 4px;
}
.action-btn {
padding: 4px 8px;
font-size: 11px;
min-width: 50px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 6px 2px;
}
:deep(.el-table .cell) {
padding: 0 2px;
}
}
</style>

528
src/pages/admin/api-calls/index.vue
View File

@@ -14,18 +14,19 @@
<!-- 单用户模式操作按钮 -->
<template #actions v-if="singleUserMode">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-sm text-gray-600">
<div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
<div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
<User class="w-4 h-4" />
<span>{{ currentUser?.company_name || currentUser?.phone }}</span>
<span :class="isMobile ? 'truncate flex-1' : ''">{{ currentUser?.company_name || currentUser?.phone }}</span>
</div>
<el-button size="small" @click="exitSingleUserMode">
<el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode">
<Close class="w-4 h-4 mr-1" />
取消
<span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
</el-button>
<el-button size="small" type="primary" @click="goBackToUsers">
<el-button :size="isMobile ? 'small' : 'small'" type="primary" @click="goBackToUsers">
<Back class="w-4 h-4 mr-1" />
返回用户管理
<span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
</el-button>
</div>
</template>
@@ -33,7 +34,7 @@
<!-- 筛选区域 -->
<template #filters>
<FilterSection>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4']">
<FilterItem label="企业名称" v-if="!singleUserMode">
<el-input
v-model="filters.company_name"
@@ -79,7 +80,7 @@
</el-select>
</FilterItem>
<FilterItem label="调用时间" class="md:col-span-2">
<FilterItem label="调用时间" :class="isMobile ? 'col-span-1' : 'md:col-span-2'">
<el-date-picker
v-model="dateRange"
type="datetimerange"
@@ -89,6 +90,7 @@
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleTimeRangeChange"
:size="isMobile ? 'small' : 'default'"
class="w-full"
/>
</FilterItem>
@@ -99,129 +101,209 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadApiCalls">应用筛选</el-button>
<el-button type="success" @click="showExportDialog">
<Download class="w-4 h-4 mr-1" />
导出数据
</el-button>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
重置筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadApiCalls" :class="isMobile ? 'flex-1' : ''">
应用筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="success" @click="showExportDialog" :class="isMobile ? 'w-full' : ''">
<Download class="w-4 h-4 mr-1" />
<span :class="isMobile ? 'hidden sm:inline' : ''">导出数据</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">导出</span>
</el-button>
</div>
</template>
</FilterSection>
</template>
<!-- 表格区域 -->
<template #table>
<!-- 加载状态 -->
<div v-if="loading" class="flex justify-center items-center py-12">
<el-loading size="large" />
</div>
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<el-table
:data="apiCalls"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && apiCalls.length > 0" class="api-call-cards">
<div
v-for="call in apiCalls"
:key="call.id"
class="api-call-card"
>
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
</template>
</el-table-column>
<el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
<template #default="{ row }">
<div>
<div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
<div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="product_name" label="接口名称" min-width="150">
<template #default="{ row }">
<div>
<div class="font-medium text-blue-600">{{ row.product_name || '未知接口' }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template #default="{ row }">
<el-tag
:type="getStatusType(row.status)"
size="small"
effect="light"
>
{{ getStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="error_msg" label="错误信息" min-width="200">
<template #default="{ row }">
<div v-if="row.translated_error_msg" class="error-info-cell">
<div class="translated-error">
{{ row.translated_error_msg }}
</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="cost" label="费用" width="100">
<template #default="{ row }">
<span v-if="row.cost" class="font-semibold text-red-600">¥{{ formatPrice(row.cost) }}</span>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="client_ip" label="客户端IP" width="140">
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.client_ip }}</span>
</template>
</el-table-column>
<el-table-column prop="start_at" label="调用时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.start_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.start_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="end_at" label="完成时间" width="160">
<template #default="{ row }">
<div v-if="row.end_at" class="text-sm">
<div class="text-gray-900">{{ formatDate(row.end_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.end_at) }}</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-semibold text-base text-blue-600">{{ call.product_name || '未知接口' }}</span>
<el-tag
:type="getStatusType(call.status)"
size="small"
type="primary"
@click="handleViewDetail(row)"
effect="light"
>
查看详情
</el-button>
{{ getStatusText(call.status) }}
</el-tag>
</div>
</template>
</el-table-column>
</el-table>
<div class="text-xs text-gray-500 font-mono">ID: {{ call.transaction_id }}</div>
</div>
</div>
<div class="card-body">
<div v-if="!singleUserMode" class="card-row">
<span class="card-label">企业名称</span>
<span class="card-value">{{ call.company_name || '未知企业' }}</span>
</div>
<div class="card-row">
<span class="card-label">费用</span>
<span class="card-value text-red-600 font-semibold">
<span v-if="call.cost">¥{{ formatPrice(call.cost) }}</span>
<span v-else class="text-gray-400">-</span>
</span>
</div>
<div class="card-row">
<span class="card-label">客户端IP</span>
<span class="card-value font-mono text-sm">{{ call.client_ip }}</span>
</div>
<div class="card-row">
<span class="card-label">调用时间</span>
<span class="card-value text-sm">{{ formatDateTime(call.start_at) }}</span>
</div>
<div v-if="call.end_at" class="card-row">
<span class="card-label">完成时间</span>
<span class="card-value text-sm">{{ formatDateTime(call.end_at) }}</span>
</div>
<div v-if="call.translated_error_msg" class="card-row">
<span class="card-label">错误信息</span>
<span class="card-value text-sm text-red-600">{{ call.translated_error_msg }}</span>
</div>
</div>
<div class="card-footer">
<el-button
type="primary"
size="small"
@click="handleViewDetail(call)"
class="w-full"
>
查看详情
</el-button>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="table-container">
<el-table
:data="apiCalls"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column prop="transaction_id" label="交易ID" min-width="180">
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
</template>
</el-table-column>
<el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
<template #default="{ row }">
<div>
<div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
<div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="product_name" label="接口名称" min-width="150">
<template #default="{ row }">
<div>
<div class="font-medium text-blue-600">{{ row.product_name || '未知接口' }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template #default="{ row }">
<el-tag
:type="getStatusType(row.status)"
size="small"
effect="light"
>
{{ getStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="error_msg" label="错误信息" min-width="200">
<template #default="{ row }">
<div v-if="row.translated_error_msg" class="error-info-cell">
<div class="translated-error">
{{ row.translated_error_msg }}
</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="cost" label="费用" width="100">
<template #default="{ row }">
<span v-if="row.cost" class="font-semibold text-red-600">¥{{ formatPrice(row.cost) }}</span>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="client_ip" label="客户端IP" width="140">
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.client_ip }}</span>
</template>
</el-table-column>
<el-table-column prop="start_at" label="调用时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.start_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.start_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="end_at" label="完成时间" width="160">
<template #default="{ row }">
<div v-if="row.end_at" class="text-sm">
<div class="text-gray-900">{{ formatDate(row.end_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.end_at) }}</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
size="small"
type="primary"
@click="handleViewDetail(row)"
>
查看详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && apiCalls.length === 0" class="text-center py-12">
<el-empty description="暂无API调用记录" />
</div>
</template>
@@ -233,7 +315,8 @@
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -243,14 +326,14 @@
<el-dialog
v-model="detailDialogVisible"
title="API调用详情"
width="800px"
:width="isMobile ? '90%' : '800px'"
class="api-call-detail-dialog"
>
<div v-if="selectedApiCall" class="space-y-6">
<!-- 基本信息 -->
<div class="info-section">
<h4 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h4>
<div class="grid grid-cols-2 gap-4">
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
<div class="info-item">
<span class="info-label">交易ID</span>
<span class="info-value font-mono">{{ selectedApiCall.transaction_id }}</span>
@@ -288,7 +371,7 @@
<!-- 时间信息 -->
<div class="info-section">
<h4 class="text-lg font-semibold text-gray-900 mb-4">时间信息</h4>
<div class="grid grid-cols-2 gap-4">
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
<div class="info-item">
<span class="info-label">调用时间</span>
<span class="info-value">{{ formatDateTime(selectedApiCall.start_at) }}</span>
@@ -322,7 +405,7 @@
<el-dialog
v-model="exportDialogVisible"
title="导出API调用记录"
width="600px"
:width="isMobile ? '90%' : '600px'"
:close-on-click-modal="false"
>
<div class="space-y-4">
@@ -395,6 +478,7 @@
end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
:size="isMobile ? 'small' : 'default'"
class="w-full"
/>
</div>
@@ -410,10 +494,18 @@
</div>
<template #footer>
<div class="flex justify-end gap-3">
<el-button @click="exportDialogVisible = false">取消</el-button>
<div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:size="isMobile ? 'default' : 'default'"
:class="isMobile ? 'w-full' : ''"
@click="exportDialogVisible = false"
>
取消
</el-button>
<el-button
:size="isMobile ? 'default' : 'default'"
type="primary"
:class="isMobile ? 'w-full' : ''"
:loading="exportLoading"
@click="handleExport"
>
@@ -429,6 +521,7 @@ import { apiCallApi, productApi, userApi } from '@/api'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { Back, Close, Download, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
@@ -437,6 +530,9 @@ import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const apiCalls = ref([])
@@ -835,7 +931,9 @@ const handleExport = async () => {
}
.error-content {
space-y: 2;
display: flex;
flex-direction: column;
gap: 8px;
}
.error-message {
@@ -904,6 +1002,71 @@ const handleExport = async () => {
background: #f8fafc !important;
}
/* 移动端卡片布局 */
.api-call-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.api-call-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.card-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.card-value {
font-size: 14px;
color: #1f2937;
text-align: right;
word-break: break-word;
flex: 1;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 响应式设计 */
@media (max-width: 768px) {
.info-item {
@@ -915,5 +1078,118 @@ const handleExport = async () => {
.info-label {
min-width: auto;
}
/* 表格在移动端优化 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:deep(.el-table) {
font-size: 12px;
min-width: 1000px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 分页组件在移动端优化 */
:deep(.el-pagination) {
justify-content: center;
}
:deep(.el-pagination .el-pagination__sizes) {
display: none;
}
:deep(.el-pagination .el-pagination__total) {
display: none;
}
:deep(.el-pagination .el-pagination__jump) {
display: none;
}
/* 对话框在移动端优化 */
:deep(.api-call-detail-dialog .el-dialog__body) {
padding: 16px;
max-height: 80vh;
}
/* 日期选择器在移动端优化 */
:deep(.el-date-editor) {
width: 100%;
}
:deep(.el-date-editor .el-input__wrapper) {
width: 100%;
}
/* 筛选区域在移动端优化 */
:deep(.filter-grid) {
gap: 12px;
}
/* 导出对话框在移动端优化 */
:deep(.el-dialog) {
margin: 20px auto;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.api-call-card {
padding: 12px;
}
.card-header {
flex-direction: column;
gap: 8px;
}
.card-body {
gap: 6px;
}
.card-label {
font-size: 11px;
min-width: 70px;
}
.card-value {
font-size: 13px;
}
.card-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.card-value {
text-align: left;
}
/* 日期选择器在超小屏幕优化 */
:deep(.el-date-editor) {
font-size: 12px;
}
:deep(.el-date-editor .el-input__inner) {
font-size: 12px;
}
/* 筛选区域在超小屏幕优化 */
:deep(.filter-grid) {
gap: 10px;
}
}
</style>

376
src/pages/admin/articles/index.vue
View File

@@ -4,17 +4,20 @@
subtitle="管理系统中的所有文章内容"
>
<template #actions>
<el-button @click="showCategoryDialog = true">
<el-button :size="isMobile ? 'small' : 'default'" @click="showCategoryDialog = true">
<el-icon class="mr-1"><TagIcon /></el-icon>
分类管理
<span :class="isMobile ? 'hidden sm:inline' : ''">分类管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">分类</span>
</el-button>
<el-button @click="showTagDialog = true">
<el-button :size="isMobile ? 'small' : 'default'" @click="showTagDialog = true">
<el-icon class="mr-1"><TagIcon /></el-icon>
标签管理
<span :class="isMobile ? 'hidden sm:inline' : ''">标签管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">标签</span>
</el-button>
<el-button type="primary" @click="handleCreateArticle">
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="handleCreateArticle">
<el-icon class="mr-1"><PlusIcon /></el-icon>
新增文章
<span :class="isMobile ? 'hidden sm:inline' : ''">新增文章</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
</el-button>
</template>
@@ -83,8 +86,10 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadArticles">应用筛选</el-button>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">重置筛选</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadArticles" :class="isMobile ? 'flex-1' : ''">应用筛选</el-button>
</div>
</template>
</FilterSection>
</template>
@@ -95,13 +100,151 @@
<ArticleStats :stats="stats" />
</div>
<!-- 文章列表表格 -->
<el-table
v-loading="loading"
:data="articles"
stripe
class="w-full"
>
<!-- 移动端卡片布局 -->
<div v-if="isMobile && articles.length > 0" class="article-cards">
<div
v-for="article in articles"
:key="article.id"
class="article-card"
>
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1 flex-wrap">
<span class="font-semibold text-base text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewArticle(article)">
{{ article.title }}
</span>
<el-tag v-if="article.is_featured" type="success" size="small">推荐</el-tag>
<el-tag
:type="getStatusType(article.status, article.scheduled_at)"
size="small"
>
{{ getStatusText(article.status, article.scheduled_at) }}
</el-tag>
</div>
<div v-if="article.category" class="text-xs text-gray-500">
分类: {{ article.category.name }}
</div>
</div>
</div>
<div class="card-body">
<div v-if="article.tags && article.tags.length > 0" class="card-row">
<span class="card-label">标签</span>
<div class="flex flex-wrap gap-1">
<el-tag
v-for="tag in article.tags"
:key="tag.id"
:color="tag.color"
size="small"
class="text-xs"
>
{{ tag.name }}
</el-tag>
</div>
</div>
<div v-if="article.scheduled_at" class="card-row">
<span class="card-label">定时发布</span>
<span class="card-value text-sm">{{ formatDate(article.scheduled_at) }}</span>
</div>
<div class="card-row">
<span class="card-label">创建时间</span>
<span class="card-value text-sm">{{ formatDate(article.created_at) }}</span>
</div>
<div v-if="article.published_at" class="card-row">
<span class="card-label">发布时间</span>
<span class="card-value text-sm">{{ formatDate(article.published_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
v-if="article.status === 'draft'"
type="success"
size="small"
@click="handlePublishArticle(article)"
class="action-btn"
>
发布
</el-button>
<el-button
v-if="article.status === 'published'"
type="warning"
size="small"
@click="handleArchiveArticle(article)"
class="action-btn"
>
归档
</el-button>
<el-button
type="primary"
size="small"
@click="handleEditArticle(article)"
class="action-btn"
>
编辑
</el-button>
<el-dropdown @command="(command) => handleMoreAction(command, article)" trigger="click">
<el-button type="info" size="small" class="action-btn">
更多<el-icon class="ml-1"><ChevronDownIcon /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="article.status === 'draft' && !article.scheduled_at"
command="schedule-publish"
>
<div class="flex items-center gap-2">
<ClockIcon class="w-4 h-4" />
<span>定时发布</span>
</div>
</el-dropdown-item>
<el-dropdown-item
v-if="article.status === 'draft' && article.scheduled_at"
command="schedule-publish"
>
<div class="flex items-center gap-2">
<ClockIcon class="w-4 h-4" />
<span>修改时间</span>
</div>
</el-dropdown-item>
<el-dropdown-item
v-if="article.status === 'draft' && article.scheduled_at"
command="cancel-schedule"
divided
>
<div class="flex items-center gap-2">
<XMarkIcon class="w-4 h-4" />
<span>取消定时</span>
</div>
</el-dropdown-item>
<el-dropdown-item command="view">
<div class="flex items-center gap-2">
<EyeIcon class="w-4 h-4" />
<span>查看</span>
</div>
</el-dropdown-item>
<el-dropdown-item command="delete" divided>
<div class="flex items-center gap-2">
<TrashIcon class="w-4 h-4" />
<span>删除</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="table-container">
<el-table
v-loading="loading"
:data="articles"
stripe
class="w-full"
>
<el-table-column prop="title" label="文章标题" min-width="200">
<template #default="{ row }">
<div class="flex items-center">
@@ -259,7 +402,9 @@
</div>
</template>
</el-table-column>
</el-table>
</el-table>
</div>
</div>
</template>
<template #pagination>
@@ -269,7 +414,8 @@
v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -302,7 +448,7 @@
<el-dialog
v-model="showCategoryDialog"
title="分类管理"
width="80%"
:width="isMobile ? '90%' : '80%'"
:close-on-click-modal="false"
@close="handleCategoryDialogClose"
>
@@ -313,7 +459,7 @@
<el-dialog
v-model="showTagDialog"
title="标签管理"
width="80%"
:width="isMobile ? '90%' : '80%'"
:close-on-click-modal="false"
@close="handleTagDialogClose"
>
@@ -328,6 +474,7 @@ import { articleApi } from '@/api'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { ChevronDownIcon, ClockIcon, EyeIcon, MagnifyingGlassIcon, PlusIcon, TagIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/outline'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
@@ -338,6 +485,9 @@ import ArticleStats from './components/ArticleStats.vue'
import SchedulePublishDialog from './components/SchedulePublishDialog.vue'
import Tags from './tags.vue'
// 移动端适配
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const articles = ref([])
@@ -642,8 +792,6 @@ const formatDate = (dateString) => {
return new Date(dateString).toLocaleString('zh-CN')
}
// 页面初始化
onMounted(() => {
loadArticles()
@@ -652,3 +800,189 @@ onMounted(() => {
loadTags()
})
</script>
<style scoped>
/* 移动端卡片布局 */
.article-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.card-header {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
}
.card-label {
color: #6b7280;
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.card-value {
color: #111827;
flex: 1;
word-break: break-word;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 0;
}
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 移动端响应式设计 */
@media (max-width: 768px) {
.article-card {
padding: 12px;
}
.card-header {
margin-bottom: 10px;
padding-bottom: 10px;
}
.card-body {
gap: 6px;
margin-bottom: 10px;
}
.card-row {
font-size: 12px;
flex-direction: column;
gap: 4px;
}
.card-label {
min-width: auto;
font-size: 11px;
}
.card-value {
font-size: 12px;
}
.card-footer {
padding-top: 10px;
}
.action-buttons {
gap: 6px;
}
.action-btn {
flex: 1;
min-width: 60px;
}
/* 表格在移动端优化 */
:deep(.el-table) {
font-size: 12px;
min-width: 600px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 移动端隐藏固定列阴影 */
:deep(.el-table__fixed-right) {
box-shadow: none !important;
}
}
@media (max-width: 480px) {
.article-card {
padding: 10px;
}
.card-header {
margin-bottom: 8px;
padding-bottom: 8px;
}
.card-body {
gap: 4px;
margin-bottom: 8px;
}
.card-row {
font-size: 11px;
}
.card-label {
font-size: 10px;
}
.card-value {
font-size: 11px;
}
.action-buttons {
gap: 4px;
}
.action-btn {
padding: 4px 8px;
font-size: 11px;
min-width: 50px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 6px 2px;
}
:deep(.el-table .cell) {
padding: 0 2px;
}
}
</style>

444
src/pages/admin/products/index.vue
View File

@@ -4,8 +4,13 @@
subtitle="管理系统中的所有数据产品"
>
<template #actions>
<el-button type="primary" @click="handleCreateProduct">
新增产品
<el-button
type="primary"
:size="isMobile ? 'small' : 'default'"
@click="handleCreateProduct"
>
<span :class="isMobile ? 'hidden sm:inline' : ''">新增产品</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
</el-button>
</template>
@@ -76,107 +81,201 @@
</template>
<template #table>
<el-table
v-loading="loading"
:data="products"
stripe
class="w-full"
>
<el-table-column prop="code" label="产品编号" width="120" />
<el-table-column prop="name" label="产品名称" min-width="150">
<template #default="{ row }">
<div class="flex items-center">
<span class="font-medium text-blue-600">{{ row.name }}</span>
<el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
<!-- 加载状态 -->
<div v-if="loading" class="flex justify-center items-center py-12">
<el-loading size="large" />
</div>
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && products.length > 0" class="product-cards">
<div
v-for="product in products"
:key="product.id"
class="product-card"
>
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-semibold text-base text-blue-600">{{ product.name }}</span>
<el-tag v-if="product.is_package" type="success" size="small">组合包</el-tag>
</div>
<div class="text-xs text-gray-500">编号: {{ product.code }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="category.name" label="分类" width="120">
<template #default="{ row }">
{{ row.category?.name || '未分类' }}
</template>
</el-table-column>
<el-table-column prop="price" label="价格" width="120">
<template #default="{ row }">
<span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
</template>
</el-table-column>
<el-table-column prop="cost_price" label="成本价" width="120">
<template #default="{ row }">
<span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
</template>
</el-table-column>
<el-table-column prop="is_enabled" label="启用状态" width="120">
<template #default="{ row }">
<el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
{{ row.is_enabled ? '已启用' : '已禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="is_visible" label="展示状态" width="120">
<template #default="{ row }">
<el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
{{ row.is_visible ? '已展示' : '已隐藏' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="350" fixed="right">
<template #default="{ row }">
<div class="flex gap-2">
<div class="flex flex-col gap-1">
<el-tag :type="product.is_enabled ? 'success' : 'danger'" size="small">
{{ product.is_enabled ? '已启用' : '已禁用' }}
</el-tag>
<el-tag :type="product.is_visible ? 'success' : 'warning'" size="small">
{{ product.is_visible ? '已展示' : '已隐藏' }}
</el-tag>
</div>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">分类</span>
<span class="card-value">{{ product.category?.name || '未分类' }}</span>
</div>
<div class="card-row">
<span class="card-label">价格</span>
<span class="card-value text-red-600 font-semibold">¥{{ formatPrice(product.price) }}</span>
</div>
<div class="card-row">
<span class="card-label">成本价</span>
<span class="card-value text-gray-600">¥{{ formatPrice(product.cost_price) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
type="primary"
size="small"
@click="handleEditProduct(row)"
@click="handleEditProduct(product)"
class="action-btn"
>
编辑
</el-button>
<el-button
type="info"
size="small"
@click="handleViewProduct(row)"
@click="handleViewProduct(product)"
class="action-btn"
>
查看
</el-button>
<el-button
type="success"
size="small"
@click="handleConfigDocumentation(row)"
>
配置文档
</el-button>
<el-button
v-if="row.is_enabled"
type="warning"
size="small"
@click="handleToggleEnabled(row, false)"
>
禁用
</el-button>
<el-button
v-else
type="success"
size="small"
@click="handleToggleEnabled(row, true)"
>
启用
</el-button>
<el-button
type="danger"
size="small"
@click="handleDeleteProduct(row)"
>
删除
</el-button>
<el-dropdown @command="(cmd) => handleMobileAction(cmd, product)" trigger="click">
<el-button type="default" size="small" class="action-btn">
更多<el-icon class="ml-1"><ArrowDown /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="config-doc">配置文档</el-dropdown-item>
<el-dropdown-item
:command="product.is_enabled ? 'disable' : 'enable'"
>
{{ product.is_enabled ? '禁用' : '启用' }}
</el-dropdown-item>
<el-dropdown-item command="delete" divided>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else>
<el-table
v-loading="loading"
:data="products"
stripe
class="w-full"
>
<el-table-column prop="code" label="产品编号" width="120" />
<el-table-column prop="name" label="产品名称" min-width="150">
<template #default="{ row }">
<div class="flex items-center">
<span class="font-medium text-blue-600">{{ row.name }}</span>
<el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="category.name" label="分类" width="120">
<template #default="{ row }">
{{ row.category?.name || '未分类' }}
</template>
</el-table-column>
<el-table-column prop="price" label="价格" width="120">
<template #default="{ row }">
<span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
</template>
</el-table-column>
<el-table-column prop="cost_price" label="成本价" width="120">
<template #default="{ row }">
<span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
</template>
</el-table-column>
<el-table-column prop="is_enabled" label="启用状态" width="120">
<template #default="{ row }">
<el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
{{ row.is_enabled ? '已启用' : '已禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="is_visible" label="展示状态" width="120">
<template #default="{ row }">
<el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
{{ row.is_visible ? '已展示' : '已隐藏' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="350" fixed="right">
<template #default="{ row }">
<div class="flex gap-2">
<el-button
type="primary"
size="small"
@click="handleEditProduct(row)"
>
编辑
</el-button>
<el-button
type="info"
size="small"
@click="handleViewProduct(row)"
>
查看
</el-button>
<el-button
type="success"
size="small"
@click="handleConfigDocumentation(row)"
>
配置文档
</el-button>
<el-button
v-if="row.is_enabled"
type="warning"
size="small"
@click="handleToggleEnabled(row, false)"
>
禁用
</el-button>
<el-button
v-else
type="success"
size="small"
@click="handleToggleEnabled(row, true)"
>
启用
</el-button>
<el-button
type="danger"
size="small"
@click="handleDeleteProduct(row)"
>
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 空状态 -->
<div v-if="!loading && products.length === 0" class="text-center py-12">
<el-empty description="暂无产品数据">
<el-button type="primary" @click="handleCreateProduct">
创建第一个产品
</el-button>
</el-empty>
</div>
</template>
<template #pagination>
@@ -186,7 +285,8 @@
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -226,10 +326,15 @@ import ProductFormDialog from '@/components/admin/ProductFormDialog.vue'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const products = ref([])
@@ -465,8 +570,165 @@ const handleFormSuccess = () => {
closeDialog('form')
loadProducts()
}
// 移动端操作处理
const handleMobileAction = (command, product) => {
switch (command) {
case 'config-doc':
handleConfigDocumentation(product)
break
case 'enable':
handleToggleEnabled(product, true)
break
case 'disable':
handleToggleEnabled(product, false)
break
case 'delete':
handleDeleteProduct(product)
break
}
}
</script>
<style scoped>
/* 页面特定样式可以在这里添加 */
/* 移动端卡片布局 */
.product-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.product-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
.card-value {
font-size: 14px;
color: #1f2937;
font-weight: 500;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 0;
}
/* 移动端响应式设计 */
@media (max-width: 768px) {
/* 表格在移动端优化 */
:deep(.el-table) {
font-size: 12px;
min-width: 800px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 操作按钮在移动端优化 */
:deep(.el-table .el-button--small) {
padding: 4px 8px;
font-size: 11px;
}
/* 分页组件在移动端优化 */
:deep(.el-pagination) {
justify-content: center;
}
:deep(.el-pagination .el-pagination__sizes) {
display: none;
}
:deep(.el-pagination .el-pagination__total) {
display: none;
}
:deep(.el-pagination .el-pagination__jump) {
display: none;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.product-card {
padding: 12px;
}
.card-header {
flex-direction: column;
gap: 8px;
}
.card-body {
gap: 6px;
}
.card-label {
font-size: 11px;
}
.card-value {
font-size: 13px;
}
.action-buttons {
gap: 6px;
}
.action-btn {
font-size: 12px;
padding: 6px 8px;
}
}
</style>

474
src/pages/admin/subscriptions/index.vue
View File

@@ -5,7 +5,7 @@
>
<!-- 单用户模式头部 -->
<template #actions v-if="singleUserMode">
<div class="single-user-header">
<div :class="['single-user-header', isMobile ? 'flex-col' : '']">
<div class="user-info">
<el-icon class="user-icon"><user /></el-icon>
<div class="user-details">
@@ -13,18 +13,20 @@
<div class="user-phone">{{ currentUser?.phone || '-' }}</div>
</div>
</div>
<div class="user-actions">
<el-button @click="showBatchPriceDialog" type="warning" size="small">
<div :class="['user-actions', isMobile ? 'w-full flex-wrap' : '']">
<el-button :size="isMobile ? 'small' : 'small'" @click="showBatchPriceDialog" type="warning">
<el-icon><edit /></el-icon>
一键改价
<span :class="isMobile ? 'hidden sm:inline' : ''">一键改价</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">改价</span>
</el-button>
<el-button @click="exitSingleUserMode" type="info" size="small">
<el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode" type="info">
<el-icon><close /></el-icon>
取消
<span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
</el-button>
<el-button @click="goBackToUsers" type="primary" size="small">
<el-button :size="isMobile ? 'small' : 'small'" @click="goBackToUsers" type="primary">
<el-icon><back /></el-icon>
返回用户管理
<span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
</el-button>
</div>
</div>
@@ -84,113 +86,186 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadSubscriptions">应用筛选</el-button>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
重置筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadSubscriptions" :class="isMobile ? 'flex-1' : ''">
应用筛选
</el-button>
</div>
</template>
</FilterSection>
</template>
<template #table>
<!-- 加载状态 -->
<div v-if="loading" class="flex justify-center items-center py-12">
<el-loading size="large" />
</div>
<div v-else-if="subscriptions.length === 0" class="text-center py-12">
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && subscriptions.length > 0" class="subscription-cards">
<div
v-for="subscription in subscriptions"
:key="subscription.id"
class="subscription-card"
>
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-semibold text-base text-blue-600">{{ subscription.product?.name || subscription.product_admin?.name || '未知产品' }}</span>
<el-tag v-if="subscription.product?.is_package || subscription.product_admin?.is_package" type="success" size="small">组合包</el-tag>
</div>
<div class="text-xs text-gray-500">编号: {{ subscription.product?.code || subscription.product_admin?.code || '-' }}</div>
<div v-if="!singleUserMode" class="text-xs text-gray-500 mt-1">公司: {{ subscription.user?.company_name || '未知公司' }}</div>
</div>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">订阅价格</span>
<span class="card-value text-red-600 font-semibold">¥{{ formatPrice(subscription.price) }}</span>
</div>
<div v-if="(subscription.product?.price || subscription.product_admin?.price) && (subscription.product?.price || subscription.product_admin?.price) !== subscription.price" class="card-row">
<span class="card-label">折扣</span>
<span class="card-value text-blue-600 text-sm">{{ calculateDiscount(subscription.product?.price || subscription.product_admin?.price, subscription.price) }}折</span>
</div>
<div class="card-row">
<span class="card-label">产品原价</span>
<span class="card-value text-gray-700">¥{{ formatPrice(subscription.product?.price || subscription.product_admin?.price) }}</span>
</div>
<div class="card-row">
<span class="card-label">成本价</span>
<span class="card-value text-gray-600">¥{{ formatPrice(subscription.product_admin?.cost_price) }}</span>
</div>
<div class="card-row">
<span class="card-label">订阅时间</span>
<span class="card-value text-sm">{{ formatDate(subscription.created_at) }} {{ formatTime(subscription.created_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
type="primary"
size="small"
@click="handleEditPrice(subscription)"
class="action-btn"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(subscription)"
class="action-btn"
>
查看详情
</el-button>
</div>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="table-container">
<el-table
:data="subscriptions"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column label="公司名称" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
<div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品信息" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
<div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
<el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="订阅价格" width="150">
<template #default="{ row }">
<div class="flex flex-col gap-1">
<span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
<div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品原价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
</template>
</el-table-column>
<el-table-column label="成本价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</span>
</template>
</el-table-column>
<el-table-column prop="created_at" label="订阅时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
type="primary"
size="small"
@click="handleEditPrice(row)"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(row)"
>
查看详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && subscriptions.length === 0" class="text-center py-12">
<el-empty description="暂无订阅数据">
<el-button type="primary" @click="loadSubscriptions">
重新加载
</el-button>
</el-empty>
</div>
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<el-table
:data="subscriptions"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column label="公司名称" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
<div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品信息" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
<div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
<el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="订阅价格" width="150">
<template #default="{ row }">
<div class="flex flex-col gap-1">
<span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
<div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品原价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
</template>
</el-table-column>
<el-table-column label="成本价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</span>
</template>
</el-table-column>
<el-table-column prop="created_at" label="订阅时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
type="primary"
size="small"
@click="handleEditPrice(row)"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(row)"
>
查看详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<template #pagination>
@@ -200,7 +275,8 @@
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -211,7 +287,7 @@
<el-dialog
v-model="priceDialogVisible"
title="调整订阅价格"
width="600px"
:width="isMobile ? '90%' : '600px'"
class="price-dialog"
>
<el-form
@@ -340,9 +416,19 @@
</el-form>
<template #footer>
<div class="flex justify-end gap-3">
<el-button @click="priceDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleUpdatePrice" :loading="updatingPrice">
<div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="priceDialogVisible = false"
>
取消
</el-button>
<el-button
type="primary"
:class="isMobile ? 'w-full' : ''"
@click="handleUpdatePrice"
:loading="updatingPrice"
>
确认调整
</el-button>
</div>
@@ -353,7 +439,7 @@
<el-dialog
v-model="batchPriceDialogVisible"
title="一键改价"
width="500px"
:width="isMobile ? '90%' : '500px'"
class="batch-price-dialog"
>
<el-form
@@ -433,10 +519,16 @@
</el-form>
<template #footer>
<div class="flex justify-end gap-3">
<el-button @click="batchPriceDialogVisible = false">取消</el-button>
<div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="batchPriceDialogVisible = false"
>
取消
</el-button>
<el-button
type="warning"
:class="isMobile ? 'w-full' : ''"
@click="handleBatchUpdatePrice"
:loading="updatingBatchPrice"
>
@@ -454,6 +546,7 @@ import { productAdminApi, userApi } from '@/api'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { Back, Close, Edit, QuestionFilled, User, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
@@ -462,6 +555,9 @@ import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const subscriptions = ref([])
@@ -1120,6 +1216,82 @@ const handleBatchUpdatePrice = async () => {
background: #f8fafc !important;
}
/* 移动端卡片布局 */
.subscription-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.subscription-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.card-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.card-value {
font-size: 14px;
color: #1f2937;
text-align: right;
word-break: break-word;
flex: 1;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 0;
}
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 响应式设计 */
@media (max-width: 768px) {
.single-user-header {
@@ -1133,9 +1305,93 @@ const handleBatchUpdatePrice = async () => {
justify-content: flex-end;
}
.price-dialog :deep(.el-dialog) {
.price-dialog :deep(.el-dialog),
.batch-price-dialog :deep(.el-dialog) {
margin: 20px;
width: calc(100% - 40px) !important;
}
/* 表格在移动端优化 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:deep(.el-table) {
font-size: 12px;
min-width: 1000px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 分页组件在移动端优化 */
:deep(.el-pagination) {
justify-content: center;
}
:deep(.el-pagination .el-pagination__sizes) {
display: none;
}
:deep(.el-pagination .el-pagination__total) {
display: none;
}
:deep(.el-pagination .el-pagination__jump) {
display: none;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.subscription-card {
padding: 12px;
}
.card-header {
flex-direction: column;
gap: 8px;
}
.card-body {
gap: 6px;
}
.card-label {
font-size: 11px;
min-width: 70px;
}
.card-value {
font-size: 13px;
}
.card-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.card-value {
text-align: left;
}
.action-buttons {
gap: 6px;
}
.action-btn {
font-size: 12px;
padding: 6px 8px;
}
}
</style>

19
src/pages/admin/usage/index.vue
View File

@@ -14,18 +14,19 @@
<!-- 单用户模式操作按钮 -->
<template #actions v-if="singleUserMode">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 text-sm text-gray-600">
<div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
<div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
<User class="w-4 h-4" />
<span>{{ currentUser?.company_name || currentUser?.phone }}</span>
<span :class="isMobile ? 'truncate flex-1' : ''">{{ currentUser?.company_name || currentUser?.phone }}</span>
</div>
<el-button size="small" @click="exitSingleUserMode">
<el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode">
<Close class="w-4 h-4 mr-1" />
取消
<span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
</el-button>
<el-button size="small" type="primary" @click="goBackToUsers">
<el-button :size="isMobile ? 'small' : 'small'" type="primary" @click="goBackToUsers">
<Back class="w-4 h-4 mr-1" />
返回用户管理
<span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
</el-button>
</div>
</template>
@@ -343,6 +344,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { Back, Close, Download, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
@@ -351,6 +353,9 @@ import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const apiCalls = ref([])

623
src/pages/admin/users/index.vue
View File

@@ -5,16 +5,16 @@
>
<!-- 统计信息 -->
<template #actions>
<div class="flex gap-4">
<div class="stat-item">
<div :class="['flex gap-4', isMobile ? 'flex-wrap justify-center' : '']">
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
<div class="stat-value">{{ stats.total_users || 0 }}</div>
<div class="stat-label">总用户数</div>
</div>
<div class="stat-item">
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
<div class="stat-value">{{ stats.certified_users || 0 }}</div>
<div class="stat-label">已认证用户</div>
</div>
<div class="stat-item">
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
<div class="stat-value">{{ stats.active_users || 0 }}</div>
<div class="stat-label">活跃用户</div>
</div>
@@ -74,150 +74,279 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadUsers">应用筛选</el-button>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
重置筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadUsers" :class="isMobile ? 'flex-1' : ''">
应用筛选
</el-button>
</div>
</template>
</FilterSection>
</template>
<template #table>
<!-- 加载状态 -->
<div v-if="loading" class="flex justify-center items-center py-12">
<el-loading size="large" />
</div>
<div v-else-if="users.length === 0" class="text-center py-12">
<el-empty description="暂无用户数据" />
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && users.length > 0" class="user-cards">
<div
v-for="user in users"
:key="user.id"
class="user-card"
>
<div class="card-header">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-semibold text-base text-blue-600 font-mono">{{ formatPhone(user.phone) }}</span>
<el-tag
:type="user.is_active ? 'success' : 'warning'"
size="small"
>
{{ user.is_active ? '已激活' : '未激活' }}
</el-tag>
<el-tag
:type="user.is_certified ? 'success' : 'info'"
size="small"
>
{{ user.is_certified ? '已认证' : '未认证' }}
</el-tag>
</div>
<div v-if="user.username" class="text-xs text-gray-500">用户名: {{ user.username }}</div>
</div>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">钱包余额</span>
<span class="card-value text-green-600 font-semibold">¥{{ formatMoney(user.wallet_balance || '0') }}</span>
</div>
<div v-if="user.enterprise_info" class="card-row">
<span class="card-label">企业名称</span>
<span class="card-value">{{ user.enterprise_info.company_name || '-' }}</span>
</div>
<div v-if="user.enterprise_info" class="card-row">
<span class="card-label">法人姓名</span>
<span class="card-value text-sm">{{ user.enterprise_info.legal_person_name || '-' }}</span>
</div>
<div class="card-row">
<span class="card-label">注册时间</span>
<span class="card-value text-sm">{{ formatDate(user.created_at) }} {{ formatTime(user.created_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
type="primary"
size="small"
@click="handleViewUser(user)"
class="action-btn"
>
查看详情
</el-button>
<el-button
type="warning"
size="small"
@click="handleRecharge(user)"
:disabled="!user.is_certified"
class="action-btn"
>
充值
</el-button>
<el-dropdown @command="handleMoreAction" trigger="click">
<el-button type="info" size="small" :disabled="!user.is_certified" class="action-btn">
更多<el-icon class="ml-1"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{ action: 'subscriptions', user }">
<el-icon><tickets /></el-icon>
订阅管理
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'api_calls', user }">
<el-icon><document /></el-icon>
调用记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'consumption', user }">
<el-icon><money /></el-icon>
消费记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'recharge_history', user }">
<el-icon><wallet /></el-icon>
充值记录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</div>
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<el-table
:data="users"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column prop="phone" label="手机号" width="140">
<template #default="{ row }">
<span class="font-mono text-sm">{{ formatPhone(row.phone) }}</span>
</template>
</el-table-column>
<!-- 桌面端表格布局 -->
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="table-container">
<el-table
:data="users"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column prop="phone" label="手机号" width="140">
<template #default="{ row }">
<span class="font-mono text-sm">{{ formatPhone(row.phone) }}</span>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="120">
<template #default="{ row }">
<span class="text-gray-600">{{ row.username || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="120">
<template #default="{ row }">
<span class="text-gray-600">{{ row.username || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="is_active" label="激活状态" width="120">
<template #default="{ row }">
<el-tag
:type="row.is_active ? 'success' : 'warning'"
size="small"
>
{{ row.is_active ? '已激活' : '未激活' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="is_certified" label="认证状态" width="120">
<template #default="{ row }">
<el-tag
:type="row.is_certified ? 'success' : 'info'"
size="small"
>
{{ row.is_certified ? '已认证' : '未认证' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="wallet_balance" label="钱包余额" width="120">
<template #default="{ row }">
<span class="font-medium text-green-600">
¥{{ formatMoney(row.wallet_balance || '0') }}
</span>
</template>
</el-table-column>
<el-table-column prop="enterprise_info.company_name" label="企业信息" min-width="200">
<template #default="{ row }">
<div v-if="row.enterprise_info" class="space-y-1">
<div class="flex items-center text-gray-900">
<span class="w-20 text-gray-500">企业名：</span>
<span class="font-medium">{{ row.enterprise_info.company_name || '-' }}</span>
</div>
<div class="flex items-center text-gray-900">
<span class="w-20 text-gray-500">法人姓名：</span>
<span class="text-sm">{{ row.enterprise_info.legal_person_name || '-' }}</span>
</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="created_at" label="注册时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="300" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
<el-table-column prop="is_active" label="激活状态" width="120">
<template #default="{ row }">
<el-tag
:type="row.is_active ? 'success' : 'warning'"
size="small"
type="primary"
@click="handleViewUser(row)"
>
查看详情
</el-button>
{{ row.is_active ? '已激活' : '未激活' }}
</el-tag>
</template>
</el-table-column>
<!-- 充值按钮 -->
<el-tooltip
v-if="!row.is_certified"
content="需要企业认证后才能进行充值操作"
placement="top"
<el-table-column prop="is_certified" label="认证状态" width="120">
<template #default="{ row }">
<el-tag
:type="row.is_certified ? 'success' : 'info'"
size="small"
>
{{ row.is_certified ? '已认证' : '未认证' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="wallet_balance" label="钱包余额" width="120">
<template #default="{ row }">
<span class="font-medium text-green-600">
¥{{ formatMoney(row.wallet_balance || '0') }}
</span>
</template>
</el-table-column>
<el-table-column prop="enterprise_info.company_name" label="企业信息" min-width="200">
<template #default="{ row }">
<div v-if="row.enterprise_info" class="space-y-1">
<div class="flex items-center text-gray-900">
<span class="w-20 text-gray-500">企业名：</span>
<span class="font-medium">{{ row.enterprise_info.company_name || '-' }}</span>
</div>
<div class="flex items-center text-gray-900">
<span class="w-20 text-gray-500">法人姓名：</span>
<span class="text-sm">{{ row.enterprise_info.legal_person_name || '-' }}</span>
</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column prop="created_at" label="注册时间" width="160">
<template #default="{ row }">
<div class="text-sm">
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="300" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
size="small"
type="primary"
@click="handleViewUser(row)"
>
查看详情
</el-button>
<!-- 充值按钮 -->
<el-tooltip
v-if="!row.is_certified"
content="需要企业认证后才能进行充值操作"
placement="top"
>
<el-button
size="small"
type="warning"
@click="handleRecharge(row)"
:disabled="!row.is_certified"
>
充值
</el-button>
</el-tooltip>
<el-button
v-else
size="small"
type="warning"
@click="handleRecharge(row)"
:disabled="!row.is_certified"
>
充值
</el-button>
</el-tooltip>
<el-button
v-else
size="small"
type="warning"
@click="handleRecharge(row)"
>
充值
</el-button>
<!-- 更多操作按钮 -->
<el-tooltip
v-if="!row.is_certified"
content="需要企业认证后才能查看更多操作"
placement="top"
>
<el-dropdown @command="handleMoreAction" trigger="click">
<el-button
size="small"
type="info"
:disabled="!row.is_certified"
>
<!-- 更多操作按钮 -->
<el-tooltip
v-if="!row.is_certified"
content="需要企业认证后才能查看更多操作"
placement="top"
>
<el-dropdown @command="handleMoreAction" trigger="click">
<el-button
size="small"
type="info"
:disabled="!row.is_certified"
>
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{ action: 'subscriptions', user: row }">
<el-icon><tickets /></el-icon>
订阅管理
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'api_calls', user: row }">
<el-icon><document /></el-icon>
调用记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'consumption', user: row }">
<el-icon><money /></el-icon>
消费记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'recharge_history', user: row }">
<el-icon><wallet /></el-icon>
充值记录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-dropdown
v-else
@command="handleMoreAction"
trigger="click"
>
<el-button size="small" type="info">
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
@@ -241,40 +370,16 @@
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-dropdown
v-else
@command="handleMoreAction"
trigger="click"
>
<el-button size="small" type="info">
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="{ action: 'subscriptions', user: row }">
<el-icon><tickets /></el-icon>
订阅管理
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'api_calls', user: row }">
<el-icon><document /></el-icon>
调用记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'consumption', user: row }">
<el-icon><money /></el-icon>
消费记录
</el-dropdown-item>
<el-dropdown-item :command="{ action: 'recharge_history', user: row }">
<el-icon><wallet /></el-icon>
充值记录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && users.length === 0" class="text-center py-12">
<el-empty description="暂无用户数据" />
</div>
</template>
@@ -285,7 +390,8 @@
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -296,12 +402,12 @@
<el-dialog
v-model="userDialogVisible"
title="用户详情"
width="800px"
:width="isMobile ? '90%' : '800px'"
class="user-dialog"
>
<div v-if="selectedUser" class="space-y-6">
<!-- 用户统计信息 -->
<div class="grid grid-cols-3 gap-6">
<div :class="['grid gap-6', isMobile ? 'grid-cols-1' : 'grid-cols-3']">
<div class="user-stat-card">
<div class="user-stat-value">{{ selectedUser.login_count || 0 }}</div>
<div class="user-stat-label">登录次数</div>
@@ -319,7 +425,7 @@
<!-- 基本信息 -->
<div class="user-info">
<h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
<div class="grid grid-cols-2 gap-4">
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
<div class="info-item">
<span class="info-label">手机号:</span>
<span class="info-value">{{ formatPhone(selectedUser.phone) }}</span>
@@ -358,7 +464,7 @@
<!-- 企业信息 -->
<div v-if="selectedUser.enterprise_info" class="enterprise-info">
<h3 class="text-lg font-semibold text-gray-900 mb-4">企业信息</h3>
<div class="grid grid-cols-2 gap-4">
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
<div class="info-item">
<span class="info-label">企业名称:</span>
<span class="info-value">{{ selectedUser.enterprise_info.company_name }}</span>
@@ -440,7 +546,7 @@
<el-dialog
v-model="rechargeDialogVisible"
title="用户充值"
width="500px"
:width="isMobile ? '90%' : '500px'"
class="recharge-dialog"
>
<div v-if="selectedUser" class="space-y-6">
@@ -509,9 +615,19 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="rechargeDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmitRecharge" :loading="rechargeLoading">
<div :class="['dialog-footer', isMobile ? 'flex-col' : '']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="rechargeDialogVisible = false"
>
取消
</el-button>
<el-button
type="primary"
:class="isMobile ? 'w-full' : ''"
@click="handleSubmitRecharge"
:loading="rechargeLoading"
>
确认充值
</el-button>
</div>
@@ -526,6 +642,7 @@ import { financeApi, userApi } from '@/api'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { ArrowDown, Document, Money, Tickets, Wallet, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
@@ -533,6 +650,9 @@ import { useRouter } from 'vue-router'
// 获取路由实例
const router = useRouter()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const users = ref([])
@@ -1037,6 +1157,82 @@ const handleMoreAction = (command) => {
background: #f8fafc !important;
}
/* 移动端卡片布局 */
.user-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.user-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.card-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
min-width: 80px;
flex-shrink: 0;
}
.card-value {
font-size: 14px;
color: #1f2937;
text-align: right;
word-break: break-word;
flex: 1;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 0;
}
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 响应式设计 */
@media (max-width: 768px) {
.stat-item {
@@ -1063,6 +1259,101 @@ const handleMoreAction = (command) => {
.user-stat-label {
font-size: 13px;
}
/* 表格在移动端优化 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:deep(.el-table) {
font-size: 12px;
min-width: 1000px;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 8px 4px;
}
:deep(.el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 分页组件在移动端优化 */
:deep(.el-pagination) {
justify-content: center;
}
:deep(.el-pagination .el-pagination__sizes) {
display: none;
}
:deep(.el-pagination .el-pagination__total) {
display: none;
}
:deep(.el-pagination .el-pagination__jump) {
display: none;
}
/* 对话框在移动端优化 */
:deep(.user-dialog .el-dialog__body),
:deep(.recharge-dialog .el-dialog__body) {
padding: 16px;
max-height: 80vh;
}
.dialog-footer {
flex-direction: column;
gap: 8px;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.user-card {
padding: 12px;
}
.card-header {
flex-direction: column;
gap: 8px;
}
.card-body {
gap: 6px;
}
.card-label {
font-size: 11px;
min-width: 70px;
}
.card-value {
font-size: 13px;
}
.card-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.card-value {
text-align: left;
}
.action-buttons {
gap: 6px;
}
.action-btn {
font-size: 12px;
padding: 6px 8px;
}
}
/* 禁用按钮样式优化 */