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

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>