feat: 图片广场优化
This commit is contained in:
Gsh
@@ -1,6 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import type { TaskItem, TaskListRequest } from '@/api/aiImage/types';
|
||||
import { CircleCloseFilled, CollectionTag, CopyDocument, Download, Filter, Loading, MagicStick, Picture, Refresh, Search, User, WarningFilled } from '@element-plus/icons-vue';
|
||||
import {
|
||||
CircleCloseFilled,
|
||||
CollectionTag,
|
||||
CopyDocument,
|
||||
Download,
|
||||
Filter,
|
||||
Loading,
|
||||
MagicStick,
|
||||
Picture,
|
||||
Refresh,
|
||||
Search,
|
||||
User,
|
||||
WarningFilled,
|
||||
} from '@element-plus/icons-vue';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { format } from 'date-fns';
|
||||
import { ElMessage } from 'element-plus';
|
||||
@@ -18,6 +31,9 @@ const noMore = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const currentTask = ref<TaskItem | null>(null);
|
||||
|
||||
// Mobile filter drawer
|
||||
const showMobileFilter = ref(false);
|
||||
|
||||
// Viewer State
|
||||
const showViewer = ref(false);
|
||||
const previewUrl = ref('');
|
||||
@@ -190,9 +206,22 @@ watch(dateRange, () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex bg-gray-50">
|
||||
<!-- Left Sidebar - Filters -->
|
||||
<div class="w-72 bg-white border-r border-gray-200 flex flex-col shadow-sm">
|
||||
<div class="h-full flex flex-col md:flex-row bg-gray-50">
|
||||
<!-- Mobile Filter Button -->
|
||||
<div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
图片广场
|
||||
</h2>
|
||||
<el-button type="primary" @click="showMobileFilter = true">
|
||||
<el-icon class="mr-1">
|
||||
<Filter />
|
||||
</el-icon>
|
||||
筛选
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Left Sidebar - Filters (Desktop) -->
|
||||
<div class="hidden md:flex w-72 bg-white border-r border-gray-200 flex-col shadow-sm">
|
||||
<div class="p-6 border-b border-gray-100">
|
||||
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
<el-icon><Filter /></el-icon>
|
||||
@@ -262,7 +291,7 @@ watch(dateRange, () => {
|
||||
</el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button class="w-full" @click="handleReset">
|
||||
<el-button class="w-full refresh-btn " @click="handleReset">
|
||||
<el-icon class="mr-1">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
@@ -271,15 +300,90 @@ watch(dateRange, () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Filter Drawer -->
|
||||
<el-drawer
|
||||
v-model="showMobileFilter"
|
||||
title="筛选条件"
|
||||
direction="ltr"
|
||||
size="80%"
|
||||
>
|
||||
<el-form :model="searchForm" label-position="top" class="space-y-4">
|
||||
<el-form-item label="提示词">
|
||||
<el-input
|
||||
v-model="searchForm.Prompt"
|
||||
placeholder="搜索提示词..."
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分类标签">
|
||||
<el-input
|
||||
v-model="searchForm.Categories"
|
||||
placeholder="搜索分类..."
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><CollectionTag /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="searchForm.UserName"
|
||||
placeholder="搜索用户..."
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="w-full"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="space-y-2">
|
||||
<el-button type="primary" class="w-full" @click="handleSearch(); showMobileFilter = false">
|
||||
<el-icon class="mr-1">
|
||||
<Search />
|
||||
</el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
|
||||
<el-icon class="mr-1">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<!-- Right Content Area -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div
|
||||
v-infinite-scroll="loadMore"
|
||||
class="flex-1 overflow-y-auto p-6 custom-scrollbar"
|
||||
class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
|
||||
:infinite-scroll-disabled="disabled"
|
||||
:infinite-scroll-distance="50"
|
||||
>
|
||||
<div v-if="taskList.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||
<div v-if="taskList.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||
<TaskCard
|
||||
v-for="task in taskList"
|
||||
:key="task.id"
|
||||
@@ -404,7 +508,7 @@ watch(dateRange, () => {
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 mt-2">
|
||||
<div class="grid grid-cols-1 gap-1 mt-2">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="MagicStick"
|
||||
@@ -413,6 +517,7 @@ watch(dateRange, () => {
|
||||
使用提示词
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="false"
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Picture"
|
||||
@@ -434,3 +539,9 @@ watch(dateRange, () => {
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.refresh-btn {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user