generated from duanshuwen/webapp-vue-frontend
feat: 完成生成等界面的编码
This commit is contained in:
260
src/views/history/index.vue
Normal file
260
src/views/history/index.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<!-- Header -->
|
||||
<NavBar title="最近任务" color="white" :showHistory="false" @back="onBack" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<div class="list">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="card"
|
||||
>
|
||||
<!-- 生成中 -->
|
||||
<template v-if="item.status === 'processing'">
|
||||
<div class="left processing-box">
|
||||
生成中
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
|
||||
<div class="progress">
|
||||
<div
|
||||
class="bar"
|
||||
:style="{ width: item.progress + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="status-text">生成中</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 已完成 -->
|
||||
<template v-else>
|
||||
<img class="thumb" :src="item.cover" />
|
||||
|
||||
<div class="right">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="time">{{ item.time }}</div>
|
||||
</div>
|
||||
|
||||
<button class="view-btn" @click="lookPicture(item)">查看</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tip">仅保留最近20天生成记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import NavBar from '../components/navBar.vue';
|
||||
|
||||
interface TaskItem {
|
||||
id: number
|
||||
name: string
|
||||
status: 'processing' | 'done'
|
||||
progress?: number
|
||||
cover?: string
|
||||
time?: string
|
||||
}
|
||||
|
||||
const list: TaskItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: '冬日情书',
|
||||
status: 'processing',
|
||||
progress: 40,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: '无边戏水',
|
||||
status: 'done',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg',
|
||||
time: '2026-02-23 16:27:35',
|
||||
},
|
||||
]
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const onBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const lookPicture = (item: TaskItem) => {
|
||||
console.log('查看图片');
|
||||
const encoded = encodeURIComponent(JSON.stringify(item));
|
||||
router.push({ path: '/prepicture', query: { data: encoded } });
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 列表（放在 NavBar 下面并可滚动） */
|
||||
.list {
|
||||
padding: 16px;
|
||||
margin-top: 72px; /* 留出 NavBar 空间（56px header + 24px margin） */
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #1a1a1a;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 左侧生成中 */
|
||||
.processing-box {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 12px;
|
||||
background: #1f2a36;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 已完成缩略图 */
|
||||
.thumb {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 右侧 */
|
||||
.right {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
.progress {
|
||||
height: 4px;
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6ec1ff, #b7f8c8);
|
||||
}
|
||||
|
||||
/* 状态 */
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 时间 */
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 查看按钮 */
|
||||
.view-btn {
|
||||
background: #2a2a2a;
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 底部提示 */
|
||||
.tip {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user