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

购买功能fix组件样式

Browse Source
This commit is contained in:
18278715334
2025-12-22 18:32:34 +08:00
parent 734e71976e
commit df4cdb24b3
11 changed files with 2917 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

680
src/pages/admin/ui-components/index.vue
View File

@@ -1,126 +1,328 @@
<template>
<div class="ui-components-page">
<el-card class="filter-card">
<el-form :model="filterForm" inline>
<el-form-item label="关键词">
<el-input
v-model="filterForm.keyword"
placeholder="请输入关键词搜索"
clearable
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filterForm.is_active" placeholder="请选择状态" clearable>
<el-option label="启用" :value="true" />
<el-option label="禁用" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
<el-button type="success" @click="handleCreate">新增UI组件</el-button>
</el-form-item>
</el-form>
</el-card>
<ListPageLayout
title="UI组件管理"
subtitle="管理系统中的UI组件和文件资源"
>
<!-- 筛选区域 -->
<template #filters>
<FilterSection>
<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="关键词">
<el-input
v-model="filterForm.keyword"
placeholder="请输入关键词搜索"
clearable
@input="handleFilterChange"
class="w-full"
/>
</FilterItem>
<el-card class="table-card">
<el-table
v-loading="loading"
:data="componentList"
stripe
border
>
<el-table-column prop="component_code" label="组件编码" width="150" />
<el-table-column prop="component_name" label="组件名称" width="200" />
<el-table-column prop="description" label="描述" show-overflow-tooltip />
<el-table-column prop="version" label="版本" width="100" />
<el-table-column label="文件状态" width="120">
<template #default="{ row }">
<el-tag v-if="row.is_extracted" type="success">已解压</el-tag>
<el-tag v-else-if="row.file_path" type="warning">已上传</el-tag>
<el-tag v-else type="info">未上传</el-tag>
</template>
</el-table-column>
<el-table-column label="文件大小" width="120">
<template #default="{ row }">
<span v-if="row.file_size">{{ formatFileSize(row.file_size) }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.is_active ? 'success' : 'danger'">
{{ row.is_active ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort_order" label="排序" width="80" />
<el-table-column prop="created_at" label="创建时间" width="180">
<template #default="{ row }">
{{ formatDateTime(row.created_at) }}
</template>
</el-table-column>
<el-table-column label="操作" width="320" fixed="right">
<template #default="{ row }">
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button
v-if="!row.file_path"
size="small"
type="primary"
@click="handleUpload(row)"
<FilterItem label="状态">
<el-select
v-model="filterForm.is_active"
placeholder="请选择状态"
clearable
@change="handleFilterChange"
class="w-full"
>
上传文件
</el-button>
<el-button
v-if="row.file_path && !row.is_extracted && isZipFileFromPath(row.file_path)"
size="small"
type="warning"
@click="handleUploadExtract(row)"
>
上传并解压
</el-button>
<el-button
v-if="row.is_extracted"
size="small"
type="success"
@click="handleViewFolder(row)"
>
查看文件夹
</el-button>
<el-button
v-if="row.file_path"
size="small"
type="info"
@click="handleDownload(row)"
>
下载文件
</el-button>
<el-button
v-if="row.is_extracted"
size="small"
type="danger"
@click="handleDeleteFolder(row)"
>
删除文件夹
</el-button>
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-option label="启用" :value="true" />
<el-option label="禁用" :value="false" />
</el-select>
</FilterItem>
</div>
<div class="pagination-container">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<template #stats>
共找到 {{ pagination.total }} 个UI组件
</template>
<template #buttons>
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
<el-button :size="isMobile ? 'small' : 'default'" @click="handleReset" :class="isMobile ? 'flex-1' : ''">
重置筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="handleSearch" :class="isMobile ? 'flex-1' : ''">
应用筛选
</el-button>
<el-button :size="isMobile ? 'small' : 'default'" type="success" @click="handleCreate" :class="isMobile ? 'w-full' : ''">
<Plus class="w-4 h-4 mr-1" />
<span :class="isMobile ? 'hidden sm:inline' : ''">新增UI组件</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>
</el-card>
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && componentList.length > 0" class="component-cards">
<div
v-for="component in componentList"
:key="component.id"
class="component-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">{{ component.component_name || '未知组件' }}</span>
<el-tag
:type="component.is_active ? 'success' : 'danger'"
size="small"
effect="light"
>
{{ component.is_active ? '启用' : '禁用' }}
</el-tag>
</div>
<div class="text-xs text-gray-500 font-mono">编码: {{ component.component_code }}</div>
</div>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">描述</span>
<span class="card-value">{{ component.description || '-' }}</span>
</div>
<div class="card-row">
<span class="card-label">版本</span>
<span class="card-value">{{ component.version || '-' }}</span>
</div>
<div class="card-row">
<span class="card-label">文件状态</span>
<span class="card-value">
<el-tag v-if="component.is_extracted" type="success" size="small">已解压</el-tag>
<el-tag v-else-if="component.file_path" type="warning" size="small">已上传</el-tag>
<el-tag v-else type="info" size="small">未上传</el-tag>
</span>
</div>
<div class="card-row">
<span class="card-label">文件大小</span>
<span class="card-value">{{ component.file_size ? formatFileSize(component.file_size) : '-' }}</span>
</div>
<div class="card-row">
<span class="card-label">排序</span>
<span class="card-value">{{ component.sort_order || '-' }}</span>
</div>
<div class="card-row">
<span class="card-label">创建时间</span>
<span class="card-value text-sm">{{ formatDateTime(component.created_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="flex flex-wrap gap-2">
<el-button
size="small"
type="primary"
@click="handleEdit(component)"
class="flex-1"
>
编辑
</el-button>
<el-button
v-if="!component.file_path"
size="small"
type="primary"
@click="handleUpload(component)"
class="flex-1"
>
上传文件
</el-button>
<el-button
v-if="component.file_path && !component.is_extracted && isZipFileFromPath(component.file_path)"
size="small"
type="warning"
@click="handleUploadExtract(component)"
class="flex-1"
>
上传并解压
</el-button>
<el-button
v-if="component.is_extracted"
size="small"
type="success"
@click="handleViewFolder(component)"
class="flex-1"
>
查看文件夹
</el-button>
<el-button
v-if="component.file_path"
size="small"
type="info"
@click="handleDownload(component)"
class="flex-1"
>
下载文件
</el-button>
<el-button
v-if="component.is_extracted"
size="small"
type="danger"
@click="handleDeleteFolder(component)"
class="flex-1"
>
删除文件夹
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(component)"
class="flex-1"
>
删除
</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
v-loading="loading"
:data="componentList"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column prop="component_code" label="组件编码" width="150">
<template #default="{ row }">
<span class="font-mono text-sm text-gray-600">{{ row.component_code }}</span>
</template>
</el-table-column>
<el-table-column prop="component_name" label="组件名称" min-width="200">
<template #default="{ row }">
<div class="font-medium text-blue-600">{{ row.component_name || '未知组件' }}</div>
</template>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
<el-table-column prop="version" label="版本" width="100" />
<el-table-column label="文件状态" width="120">
<template #default="{ row }">
<el-tag v-if="row.is_extracted" type="success" size="small">已解压</el-tag>
<el-tag v-else-if="row.file_path" type="warning" size="small">已上传</el-tag>
<el-tag v-else type="info" size="small">未上传</el-tag>
</template>
</el-table-column>
<el-table-column label="文件大小" width="120">
<template #default="{ row }">
<span v-if="row.file_size">{{ formatFileSize(row.file_size) }}</span>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100">
<template #default="{ row }">
<el-tag :type="row.is_active ? 'success' : 'danger'" size="small">
{{ row.is_active ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort_order" label="排序" width="80" />
<el-table-column prop="created_at" label="创建时间" width="180">
<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="340" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button
v-if="!row.file_path"
size="small"
type="primary"
@click="handleUpload(row)"
>
上传文件
</el-button>
<el-button
v-if="row.file_path && !row.is_extracted && isZipFileFromPath(row.file_path)"
size="small"
type="warning"
@click="handleUploadExtract(row)"
>
上传并解压
</el-button>
<el-button
v-if="row.is_extracted"
size="small"
type="success"
@click="handleViewFolder(row)"
>
查看文件夹
</el-button>
<el-dropdown v-if="row.file_path || row.is_extracted">
<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 v-if="row.file_path" @click="handleDownload(row)">
下载文件
</el-dropdown-item>
<el-dropdown-item v-if="row.is_extracted" @click="handleDeleteFolder(row)">
删除文件夹
</el-dropdown-item>
<el-dropdown-item @click="handleDelete(row)" divided>
删除组件
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button v-else size="small" type="danger" @click="handleDelete(row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && componentList.length === 0" class="text-center py-12">
<el-empty description="暂无UI组件" />
</div>
</template>
<!-- 分页 -->
<template #pagination>
<el-pagination
v-if="pagination.total > 0"
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="pagination.total"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
</ListPageLayout>
<!-- 创建/编辑对话框 -->
<el-dialog
@@ -187,7 +389,7 @@
可以上传多个文件，每个文件不超过100MB。ZIP文件可以自动解压，其他文件类型仅保存。
</div>
<div class="el-upload__tip" v-else>
可以上传整个文件夹，保持原有目录结构。ZIP文件可以自动解压，每个文件不超过100MB。
。ZIP文件可以自动解压，每个文件不超过100MB。
</div>
</template>
</el-upload>
@@ -272,15 +474,20 @@
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { uiComponentApi } from '@/api/ui-component'
import { Document, Folder, UploadFilled } from '@element-plus/icons-vue'
import FilterItem from '@/components/common/FilterItem.vue'
import FilterSection from '@/components/common/FilterSection.vue'
import ListPageLayout from '@/components/common/ListPageLayout.vue'
import { ArrowDown, Document, Folder, Plus, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const componentList = ref([])
@@ -366,6 +573,27 @@ const fetchComponentList = async () => {
}
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return new Date(date).toLocaleDateString('zh-CN')
}
// 格式化时间
const formatTime = (date) => {
if (!date) return '-'
return new Date(date).toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit'
})
}
// 处理筛选变化
const handleFilterChange = () => {
pagination.page = 1
fetchComponentList()
}
const handleSearch = () => {
pagination.page = 1
fetchComponentList()
@@ -726,24 +954,7 @@ onMounted(() => {
</script>
<style scoped>
.ui-components-page {
padding: 20px;
}
.filter-card {
margin-bottom: 20px;
}
.table-card {
margin-bottom: 20px;
}
.pagination-container {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
/* 对话框样式 */
.dialog-footer {
display: flex;
justify-content: flex-end;
@@ -762,4 +973,195 @@ onMounted(() => {
color: #999;
font-size: 12px;
}
/* 移动端卡片布局 */
.component-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.component-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;
}
/* 表格样式优化 */
:deep(.el-table) {
border-radius: 8px;
overflow: hidden;
}
:deep(.el-table th) {
background: #f8fafc !important;
border-bottom: 1px solid #e2e8f0;
}
:deep(.el-table td) {
border-bottom: 1px solid #f1f5f9;
}
:deep(.el-table tr:hover > td) {
background: #f8fafc !important;
}
/* 对话框样式优化 */
:deep(.el-dialog) {
border-radius: 16px;
overflow: hidden;
}
:deep(.el-dialog__header) {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
padding: 20px 24px;
}
:deep(.el-dialog__title) {
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
:deep(.el-dialog__body) {
padding: 24px;
max-height: 70vh;
overflow-y: auto;
}
/* 响应式设计 */
@media (max-width: 768px) {
.card-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.card-value {
text-align: left;
}
/* 表格在移动端优化 */
.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(.el-dialog__body) {
padding: 16px;
max-height: 80vh;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.component-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;
}
}
</style>