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

28
src/components/admin/ProductFormDialog.vue
View File

@@ -315,6 +315,7 @@ import { productAdminApi } from '@/api'
import RichTextEditor from '@/components/common/RichTextEditor.vue'
import { Rank, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import draggable from 'vuedraggable'
const props = defineProps({
@@ -864,28 +865,39 @@ const handlePackageItemsUpdate = async (packageId) => {
min-width: 80px;
}
.selected-products-section {
margin-top: 20px;
display: block;
visibility: visible;
}
.selected-products-list {
border: 1px solid #d1d5db;
border-radius: 6px;
background-color: white;
min-height: 100px;
max-height: 400px;
overflow-y: auto;
padding: 8px;
display: block;
visibility: visible;
opacity: 1;
}
.selected-product-item {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f3f4f6;
background-color: white;
transition: background-color 0.2s;
padding: 12px 16px;
margin-bottom: 8px;
border: 1px solid #e5e7eb;
border-radius: 6px;
background-color: #ffffff;
transition: background-color 0.2s, box-shadow 0.2s;
}
.selected-product-item:hover {
background-color: #f9fafb;
}
.selected-product-item:last-child {
border-bottom: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.drag-handle {

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;
}
}
/* 禁用按钮样式优化 */

2
src/pages/api/Usage.vue
View File

@@ -7,7 +7,7 @@
<template #actions>
<div class="flex gap-4">
<div class="stat-item">
<div class="stat-value">{{ stats.total_calls || 0 }}</div>
<div class="stat-value">{{ total}}</div>
<div class="stat-label">总调用次数</div>
</div>
</div>

310
src/pages/api/WhiteList.vue
View File

@@ -4,9 +4,14 @@
subtitle="管理您的API访问IP白名单，最多可添加10个IP地址"
>
<template #actions>
<el-button type="primary" @click="showAddForm = true">
<el-button
type="primary"
:size="isMobile ? 'small' : 'default'"
@click="showAddForm = true"
>
<PlusIcon class="w-4 h-4 mr-1" />
添加IP地址
<span :class="isMobile ? 'hidden sm:inline' : ''">添加IP地址</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">添加</span>
</el-button>
</template>
@@ -69,54 +74,104 @@
</el-empty>
</div>
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile" class="white-list-cards">
<div
v-for="item in whiteListData"
:key="item.ip_address"
class="white-list-card"
>
<div class="card-header">
<div class="flex items-center gap-2">
<ComputerDesktopIcon class="w-5 h-5 text-blue-500" />
<span class="font-mono font-semibold text-base">{{ item.ip_address }}</span>
</div>
<el-tag type="success" size="small">
<span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
</el-tag>
</div>
<div class="card-body">
<div class="card-item">
<div class="card-label">
<CalendarIcon class="w-4 h-4 mr-1" />
添加时间
</div>
<div class="card-value">{{ formatDate(item.created_at) }}</div>
</div>
<div v-if="item.remark" class="card-item">
<div class="card-label">
<DocumentTextIcon class="w-4 h-4 mr-1" />
备注
</div>
<div class="card-value">{{ item.remark }}</div>
</div>
</div>
<div class="card-footer">
<el-button
type="danger"
size="small"
@click="handleDeleteIP(item.ip_address)"
:loading="deleteLoading === item.ip_address"
class="w-full"
>
<TrashIcon class="w-4 h-4 mr-1" />
删除
</el-button>
</div>
</div>
</div>
<!-- 桌面端表格布局 -->
<div v-else class="white-list-table">
<el-table :data="whiteListData" stripe>
<el-table-column prop="ip_address" label="IP地址" min-width="200">
<template #default="{ row }">
<div class="flex items-center">
<ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
<span class="font-mono text-sm">{{ row.ip_address }}</span>
</div>
</template>
</el-table-column>
<div class="table-container">
<el-table :data="whiteListData" stripe>
<el-table-column prop="ip_address" label="IP地址" min-width="200">
<template #default="{ row }">
<div class="flex items-center">
<ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
<span class="font-mono text-sm">{{ row.ip_address }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="created_at" label="添加时间" min-width="180">
<template #default="{ row }">
<div class="flex items-center">
<CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
<span class="text-sm">{{ formatDate(row.created_at) }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="created_at" label="添加时间" min-width="180">
<template #default="{ row }">
<div class="flex items-center">
<CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
<span class="text-sm">{{ formatDate(row.created_at) }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150">
<template #default="{ row }">
<span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150">
<template #default="{ row }">
<span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="120">
<template #default>
<el-tag type="success" size="small">
<span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="120">
<template #default>
<el-tag type="success" size="small">
<span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
type="danger"
size="small"
@click="handleDeleteIP(row.ip_address)"
:loading="deleteLoading === row.ip_address"
>
<TrashIcon class="w-3 h-3 mr-1" />
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
type="danger"
size="small"
@click="handleDeleteIP(row.ip_address)"
:loading="deleteLoading === row.ip_address"
>
<TrashIcon class="w-3 h-3 mr-1" />
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
@@ -125,8 +180,9 @@
<el-dialog
v-model="showAddForm"
title="添加IP地址"
width="500px"
:width="isMobile ? '90%' : '500px'"
:close-on-click-modal="false"
class="add-ip-dialog"
>
<el-form
ref="addFormRef"
@@ -173,10 +229,16 @@
</el-form>
<template #footer>
<div class="flex justify-end gap-2">
<el-button @click="showAddForm = false">取消</el-button>
<div :class="['flex', 'gap-2', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="showAddForm = false"
>
取消
</el-button>
<el-button
type="primary"
:class="isMobile ? 'w-full' : ''"
@click="handleAddIP"
:loading="addLoading"
:disabled="whiteListData.length >= 10"
@@ -238,6 +300,7 @@ import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { useCertification } from '@/composables/useCertification'
import { useMobileTable } from '@/composables/useMobileTable'
import {
CalendarIcon,
ComputerDesktopIcon,
@@ -258,6 +321,9 @@ const {
canCallAPI
} = useCertification()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const addLoading = ref(false)
@@ -419,6 +485,69 @@ const formatDate = (dateString) => {
</script>
<style scoped>
/* 表格容器 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 移动端卡片布局 */
.white-list-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.white-list-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: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}
.card-body {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.card-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-label {
display: flex;
align-items: center;
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
.card-value {
font-size: 14px;
color: #1f2937;
word-break: break-word;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
/* 使用说明 */
.help-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -444,10 +573,93 @@ const formatDate = (dateString) => {
margin: 0;
}
/* 响应式设计 */
/* 移动端响应式设计 */
@media (max-width: 768px) {
.help-content {
grid-template-columns: 1fr;
gap: 16px;
}
.help-item {
padding: 12px;
}
.help-title {
font-size: 14px;
margin-bottom: 6px;
}
.help-text {
font-size: 13px;
}
/* 表格在移动端优化 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:deep(.white-list-table .el-table) {
font-size: 12px;
min-width: 600px;
}
:deep(.white-list-table .el-table th),
:deep(.white-list-table .el-table td) {
padding: 8px 4px;
}
:deep(.white-list-table .el-table .cell) {
padding: 0 4px;
word-break: break-word;
line-height: 1.4;
}
/* 对话框在移动端优化 */
:deep(.add-ip-dialog .el-dialog__body) {
padding: 16px;
}
:deep(.add-ip-dialog .el-form-item) {
margin-bottom: 16px;
}
:deep(.add-ip-dialog .el-form-item__label) {
font-size: 14px;
padding-bottom: 4px;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.white-list-card {
padding: 12px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.card-body {
gap: 10px;
}
.card-label {
font-size: 11px;
}
.card-value {
font-size: 13px;
}
.help-item {
padding: 10px;
}
:deep(.add-ip-dialog .el-dialog__body) {
padding: 12px;
}
}
</style>

309
src/pages/finance/Invoice.vue
View File

@@ -66,27 +66,29 @@
<!-- 开票信息管理 -->
<div v-if="activeTab === 'info'" class="info-form-section">
<div class="info-header">
<div class="info-header" :class="{ 'mobile-header': isMobile }">
<h3 class="section-title">开票信息管理</h3>
<div class="info-actions">
<div class="info-actions" :class="{ 'mobile-actions': isMobile }">
<el-button
v-if="!isEditing"
type="primary"
size="large"
:size="isMobile ? 'default' : 'large'"
@click="startEdit"
class="edit-btn"
>
<i class="el-icon-edit"></i>
编辑信息
<span v-if="!isMobile">编辑信息</span>
<span v-else>编辑</span>
</el-button>
<el-button
type="primary"
size="large"
:size="isMobile ? 'default' : 'large'"
@click="showApplyDialog = true"
class="apply-btn"
>
<i class="el-icon-plus"></i>
申请开票
<span v-if="!isMobile">申请开票</span>
<span v-else>申请</span>
</el-button>
</div>
</div>
@@ -94,7 +96,7 @@
<!-- 只读信息显示 -->
<div v-if="!isEditing" class="info-display">
<div class="info-card">
<div class="info-row">
<div class="info-row" :class="{ 'mobile-info-row': isMobile }">
<div class="info-item">
<span class="info-label">公司名称：</span>
<span class="info-value">{{ invoiceInfo.company_name || '未填写' }}</span>
@@ -104,7 +106,7 @@
<span class="info-value">{{ invoiceInfo.taxpayer_id || '未填写' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-row" :class="{ 'mobile-info-row': isMobile }">
<div class="info-item">
<span class="info-label">开户银行：</span>
<span class="info-value">{{ invoiceInfo.bank_name || '未填写' }}</span>
@@ -114,7 +116,7 @@
<span class="info-value">{{ invoiceInfo.bank_account || '未填写' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-row" :class="{ 'mobile-info-row': isMobile }">
<div class="info-item">
<span class="info-label">企业地址：</span>
<span class="info-value">{{ invoiceInfo.company_address || '未填写' }}</span>
@@ -124,7 +126,7 @@
<span class="info-value">{{ invoiceInfo.company_phone || '未填写' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-row" :class="{ 'mobile-info-row': isMobile }">
<div class="info-item">
<span class="info-label">接收邮箱：</span>
<span class="info-value">{{ invoiceInfo.receiving_email || '未填写' }}</span>
@@ -139,10 +141,10 @@
ref="infoFormRef"
:model="editingInfo"
:rules="infoRules"
label-width="120px"
:label-width="isMobile ? '100px' : '120px'"
class="invoice-form"
>
<div class="form-row">
<div class="form-row" :class="{ 'mobile-form-row': isMobile }">
<el-form-item label="公司名称" prop="company_name">
<el-input
v-model="editingInfo.company_name"
@@ -170,7 +172,7 @@
</el-form-item>
</div>
<div class="form-row">
<div class="form-row" :class="{ 'mobile-form-row': isMobile }">
<el-form-item label="开户银行" prop="bank_name">
<el-input v-model="editingInfo.bank_name" placeholder="请输入开户银行" />
</el-form-item>
@@ -180,7 +182,7 @@
</el-form-item>
</div>
<div class="form-row">
<div class="form-row" :class="{ 'mobile-form-row': isMobile }">
<el-form-item label="企业地址" prop="company_address">
<el-input v-model="editingInfo.company_address" placeholder="请输入企业注册地址" />
</el-form-item>
@@ -190,7 +192,7 @@
</el-form-item>
</div>
<div class="form-row">
<div class="form-row" :class="{ 'mobile-form-row': isMobile }">
<el-form-item label="接收邮箱" prop="receiving_email">
<el-input v-model="editingInfo.receiving_email" placeholder="请输入发票接收邮箱" />
</el-form-item>
@@ -287,8 +289,8 @@
<div v-else class="records-list">
<div v-for="record in records" :key="record.id" class="record-item">
<div class="record-header">
<div class="record-info">
<div class="record-header" :class="{ 'mobile-record-header': isMobile }">
<div class="record-info" :class="{ 'mobile-record-info': isMobile }">
<div class="record-id">申请编号：{{ record.id }}</div>
<div class="record-status" :class="getStatusClass(record.status)">
{{ getStatusText(record.status) }}
@@ -298,19 +300,19 @@
</div>
<div class="record-details">
<div class="detail-row">
<div class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
<span class="detail-label">发票类型：</span>
<span class="detail-value">{{ getInvoiceTypeText(record.invoice_type) }}</span>
</div>
<div class="detail-row">
<div class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
<span class="detail-label">申请时间：</span>
<span class="detail-value">{{ formatDateTime(record.created_at) }}</span>
</div>
<div v-if="record.processed_at" class="detail-row">
<div v-if="record.processed_at" class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
<span class="detail-label">处理时间：</span>
<span class="detail-value">{{ formatDateTime(record.processed_at) }}</span>
</div>
<div v-if="record.reject_reason" class="detail-row">
<div v-if="record.reject_reason" class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
<span class="detail-label">拒绝原因：</span>
<span class="detail-value reject-reason">{{ record.reject_reason }}</span>
</div>
@@ -319,7 +321,7 @@
<!-- 开票信息详情 -->
<div class="invoice-info-details">
<div class="info-section-title">开票信息</div>
<div class="info-grid">
<div class="info-grid" :class="{ 'mobile-info-grid': isMobile }">
<div class="info-item">
<span class="info-label">公司名称：</span>
<span class="info-value">{{ record.company_name || '未填写' }}</span>
@@ -383,11 +385,17 @@
<el-dialog
v-model="showApplyDialog"
title="申请开票"
width="600px"
:width="isMobile ? '95%' : '600px'"
:close-on-click-modal="false"
:close-on-press-escape="false"
class="apply-dialog"
>
<el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="120px">
<el-form
ref="applyFormRef"
:model="applyForm"
:rules="applyRules"
:label-width="isMobile ? '100px' : '120px'"
>
<el-form-item label="发票类型" prop="invoice_type">
<el-radio-group v-model="applyForm.invoice_type" class="w-full">
<el-radio label="general">增值税普通发票（普票）</el-radio>
@@ -489,11 +497,13 @@
<script setup>
import { invoiceApi } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import { useMobileTable } from '@/composables/useMobileTable'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const { isMobile } = useMobileTable()
// 响应式数据
const activeTab = ref('info')
@@ -1523,6 +1533,60 @@ const resetFilters = () => {
font-weight: 600;
}
/* 移动端样式 */
.mobile-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mobile-actions {
width: 100%;
display: flex;
gap: 8px;
}
.mobile-actions .el-button {
flex: 1;
}
.mobile-info-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.mobile-form-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.mobile-info-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.mobile-record-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.mobile-record-info {
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
}
.mobile-detail-row {
flex-direction: column;
gap: 3px;
}
.mobile-detail-row .detail-label {
width: auto;
}
/* 响应式设计 */
@media (max-width: 768px) {
.invoice-balance-card {
@@ -1544,7 +1608,66 @@ const resetFilters = () => {
}
.invoice-tabs {
padding: 2px;
}
.tab-item {
padding: 6px 12px;
font-size: 13px;
}
.tab-item i {
font-size: 14px;
}
.section-title {
font-size: 16px;
}
.info-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.info-actions {
width: 100%;
display: flex;
gap: 8px;
}
.info-actions .el-button {
flex: 1;
font-size: 13px;
}
.info-card {
padding: 16px;
}
.info-row {
grid-template-columns: 1fr;
gap: 12px;
}
.info-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.info-label {
width: auto;
font-size: 13px;
}
.info-value {
font-size: 13px;
word-break: break-word;
}
.invoice-form {
padding: 12px;
}
.form-row {
@@ -1552,6 +1675,19 @@ const resetFilters = () => {
gap: 12px;
}
.form-actions {
flex-direction: column;
width: 100%;
}
.form-actions .el-button {
width: 100%;
}
.record-item {
padding: 12px;
}
.record-header {
flex-direction: column;
align-items: flex-start;
@@ -1562,6 +1698,17 @@ const resetFilters = () => {
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
}
.record-id {
font-size: 12px;
}
.record-amount {
font-size: 16px;
width: 100%;
text-align: left;
}
.detail-row {
@@ -1571,6 +1718,118 @@ const resetFilters = () => {
.detail-label {
width: auto;
font-size: 12px;
}
.detail-value {
font-size: 12px;
word-break: break-word;
}
.invoice-info-details {
padding: 12px;
}
.info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.info-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.info-label {
width: auto;
font-size: 12px;
}
.info-value {
font-size: 12px;
word-break: break-word;
}
.record-actions {
width: 100%;
}
.record-actions .el-button {
width: 100%;
}
/* 弹窗样式 */
.apply-dialog :deep(.el-dialog) {
margin: 5vh auto;
max-height: 90vh;
overflow-y: auto;
}
.apply-dialog :deep(.el-dialog__body) {
padding: 16px;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
.preview-content {
gap: 6px;
}
.preview-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.preview-label {
width: auto;
font-size: 12px;
}
.preview-value {
font-size: 12px;
word-break: break-word;
}
.dialog-footer {
flex-direction: column;
width: 100%;
}
.dialog-footer .el-button {
width: 100%;
}
}
@media (max-width: 480px) {
.tab-item {
padding: 5px 8px;
font-size: 12px;
}
.tab-item i {
font-size: 12px;
}
.section-title {
font-size: 15px;
}
.info-card {
padding: 12px;
}
.invoice-form {
padding: 10px;
}
.record-item {
padding: 10px;
}
.invoice-info-details {
padding: 10px;
}
}
</style>

242
src/pages/subscriptions/index.vue
View File

@@ -74,20 +74,21 @@
</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'
}"
>
<div :class="['table-container', { 'mobile-table-container': isMobile }]">
<el-table
:data="subscriptions"
:style="isMobile ? { width: '100%', minWidth: '600px' } : { width: '100%' }"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: isMobile ? '12px' : '14px'
}"
:cell-style="{
fontSize: isMobile ? '12px' : '14px',
color: '#1e293b'
}"
>
<el-table-column prop="product.name" label="产品名称" min-width="200">
<template #default="{ row }">
<div>
@@ -96,7 +97,12 @@
</template>
</el-table-column>
<el-table-column prop="product.category.name" label="产品分类" width="120">
<el-table-column
v-if="!isMobile"
prop="product.category.name"
label="产品分类"
width="120"
>
<template #default="{ row }">
<el-tag size="small" type="info" effect="light">
{{ row.product?.category?.name || '未分类' }}
@@ -104,13 +110,22 @@
</template>
</el-table-column>
<el-table-column prop="product.code" label="产品编码" width="120">
<el-table-column
v-if="!isMobile"
prop="product.code"
label="产品编码"
width="120"
>
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.product?.code || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="订阅价格" width="120">
<el-table-column
prop="price"
label="订阅价格"
:width="isMobile ? 100 : 120"
>
<template #default="{ row }">
<span class="font-semibold text-green-600">¥{{ formatPrice(row.price) }}</span>
</template>
@@ -122,18 +137,28 @@
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="订阅时间" width="160">
<el-table-column
prop="created_at"
label="订阅时间"
:width="isMobile ? 120 : 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 v-if="!isMobile" class="text-gray-500">{{ formatTime(row.created_at) }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="400" fixed="right">
<el-table-column
label="操作"
:width="isMobile ? 120 : 400"
:fixed="isMobile ? false : 'right'"
class-name="action-column"
>
<template #default="{ row }">
<div class="flex items-center space-x-2">
<!-- 桌面端：显示所有按钮 -->
<div v-if="!isMobile" class="flex items-center space-x-2 action-buttons-desktop">
<el-button
size="small"
type="primary"
@@ -163,9 +188,43 @@
取消订阅
</el-button>
</div>
<!-- 移动端：主要操作 + 下拉菜单 -->
<div v-else class="action-buttons-mobile">
<el-button
size="small"
type="primary"
@click="handleViewProduct(row.product)"
class="mobile-primary-btn"
>
查看
</el-button>
<el-dropdown @command="(cmd) => handleMobileAction(cmd, row)" trigger="click" placement="bottom-end">
<el-button size="small" type="info" class="mobile-more-btn">
更多
<el-icon class="el-icon--right">
<ArrowDown />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="usage">
使用情况
</el-dropdown-item>
<el-dropdown-item command="debug">
在线调试
</el-dropdown-item>
<el-dropdown-item command="cancel" divided>
取消订阅
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
@@ -226,9 +285,12 @@ import { subscriptionApi } 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 } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const { isMobile } = useMobileTable()
// 响应式数据
const loading = ref(false)
@@ -411,6 +473,21 @@ const goToApiDebugger = (product) => {
}
}
// 处理移动端操作
const handleMobileAction = (command, row) => {
switch (command) {
case 'usage':
handleViewUsage(row)
break
case 'debug':
goToApiDebugger(row.product)
break
case 'cancel':
handleCancelSubscription(row)
break
}
}
// 取消订阅
const handleCancelSubscription = async (subscription) => {
if (!subscription || !subscription.id) {
@@ -574,6 +651,30 @@ const handleCancelSubscription = async (subscription) => {
font-weight: 600;
}
/* 表格容器 */
.table-container {
width: 100%;
overflow-x: auto;
}
.mobile-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-table-container::-webkit-scrollbar {
height: 6px;
}
.mobile-table-container::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.mobile-table-container::-webkit-scrollbar-track {
background: #f1f5f9;
}
/* 表格样式优化 */
:deep(.el-table) {
border-radius: 8px;
@@ -593,7 +694,33 @@ const handleCancelSubscription = async (subscription) => {
background: #f8fafc !important;
}
/* 响应式设计 */
/* 操作列样式 */
.action-buttons-desktop {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.action-buttons-mobile {
display: flex;
align-items: center;
gap: 4px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.mobile-primary-btn,
.mobile-more-btn {
flex: 1;
min-width: 50px;
padding: 6px 8px;
font-size: 12px;
white-space: nowrap;
}
/* 移动端表格优化 */
@media (max-width: 768px) {
.stat-item {
padding: 12px 16px;
@@ -619,5 +746,76 @@ const handleCancelSubscription = async (subscription) => {
.usage-stat-label {
font-size: 13px;
}
/* 移动端表格样式 */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
: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-column[prop='product.name']) {
min-width: 150px;
}
/* 移动端操作列 */
.action-buttons-mobile {
gap: 4px;
flex-direction: row;
width: 100%;
}
.mobile-primary-btn,
.mobile-more-btn {
padding: 4px 6px;
font-size: 11px;
min-width: 45px;
flex: 1;
}
/* 移动端隐藏固定列阴影 */
:deep(.el-table__fixed-right) {
box-shadow: none !important;
}
}
@media (max-width: 480px) {
.action-buttons-mobile {
gap: 3px;
flex-direction: row;
}
.mobile-primary-btn,
.mobile-more-btn {
padding: 3px 4px;
font-size: 10px;
min-width: 40px;
flex: 1;
}
:deep(.el-table th),
:deep(.el-table td) {
padding: 6px 2px;
}
:deep(.el-table .cell) {
padding: 0 2px;
}
}
</style>