generated from duanshuwen/webapp-vue-frontend
feat: 警告处理
This commit is contained in:
@@ -18,6 +18,6 @@ module.exports = {
|
|||||||
// "parser": "babylon",
|
// "parser": "babylon",
|
||||||
|
|
||||||
// 开启 eslint 支持
|
// 开启 eslint 支持
|
||||||
eslintIntegration: true,
|
eslintIntegration: false,
|
||||||
autocrlf: false
|
autocrlf: false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,21 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="['top-nav', colorClass]">
|
<div :class="['top-nav', colorClass]">
|
||||||
<img
|
<img class="icon" :src="backSrc" alt="back" @click="emitBack" />
|
||||||
class="icon"
|
|
||||||
:src="backSrc"
|
|
||||||
alt="back"
|
|
||||||
@click="emitBack"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="nav-title">{{ title }}</div>
|
<div class="nav-title">{{ title }}</div>
|
||||||
|
|
||||||
<img
|
<img v-if="showHistory" class="icon-history" :src="historySrc" alt="history" @click="emitHistory" />
|
||||||
v-if="showHistory"
|
|
||||||
class="icon-history"
|
|
||||||
:src="historySrc"
|
|
||||||
alt="history"
|
|
||||||
@click="emitHistory"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -30,13 +30,14 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
// @ts-ignore
|
||||||
import NavBar from '../components/navBar.vue';
|
import NavBar from '../components/navBar.vue';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const handleGenerate = () => {
|
const handleGenerate = () => {
|
||||||
console.log('重新生成')
|
console.log('重新生成')
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleHistory = () => {
|
const handleHistory = () => {
|
||||||
@@ -84,10 +85,11 @@ const onHistory = () => {
|
|||||||
font-family: SF Pro, SF Pro;
|
font-family: SF Pro, SF Pro;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-stroke: 1px rgba(255,255,255,0.2);
|
text-stroke: 1px rgba(255, 255, 255, 0.2);
|
||||||
background: linear-gradient(45deg, #A6E0C6 0%, #7DBBF6 100%); -webkit-background-clip: text;
|
background: linear-gradient(45deg, #A6E0C6 0%, #7DBBF6 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
-webkit-text-stroke: 1px rgba(255,255,255,0.2);
|
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
|
||||||
animation: breathing 2s ease-in-out infinite;
|
animation: breathing 2s ease-in-out infinite;
|
||||||
/* text-shadow: 0 0 20px rgba(110, 193, 255, 0.5); */
|
/* text-shadow: 0 0 20px rgba(110, 193, 255, 0.5); */
|
||||||
}
|
}
|
||||||
@@ -97,10 +99,12 @@ const onHistory = () => {
|
|||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
@@ -159,7 +163,8 @@ const onHistory = () => {
|
|||||||
border-radius: 26px;
|
border-radius: 26px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #000; /* 页面背景色 */
|
background: #000;
|
||||||
|
/* 页面背景色 */
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -170,11 +175,12 @@ const onHistory = () => {
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: linear-gradient(90deg, #D9FBC8 0%, #8BE2FF 100%);
|
background: linear-gradient(90deg, #D9FBC8 0%, #8BE2FF 100%);
|
||||||
padding: 1.5px; /* 控制边框粗细 */
|
padding: 1.5px;
|
||||||
|
/* 控制边框粗细 */
|
||||||
|
|
||||||
/* 核心:挖空中间 */
|
/* 核心:挖空中间 */
|
||||||
-webkit-mask:
|
-webkit-mask:
|
||||||
linear-gradient(#fff 0 0) content-box,
|
linear-gradient(#fff 0 0) content-box,
|
||||||
linear-gradient(#fff 0 0);
|
linear-gradient(#fff 0 0);
|
||||||
-webkit-mask-composite: xor;
|
-webkit-mask-composite: xor;
|
||||||
mask-composite: exclude;
|
mask-composite: exclude;
|
||||||
|
|||||||
@@ -5,11 +5,7 @@
|
|||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div
|
<div v-for="item in list" :key="item.id" class="card">
|
||||||
v-for="item in list"
|
|
||||||
:key="item.id"
|
|
||||||
class="card"
|
|
||||||
>
|
|
||||||
<!-- 生成中 -->
|
<!-- 生成中 -->
|
||||||
<template v-if="item.status === 'processing'">
|
<template v-if="item.status === 'processing'">
|
||||||
<div class="left processing-box">
|
<div class="left processing-box">
|
||||||
@@ -20,10 +16,7 @@
|
|||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div
|
<div class="bar" :style="{ width: item.progress + '%' }"></div>
|
||||||
class="bar"
|
|
||||||
:style="{ width: item.progress + '%' }"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="status-text">生成中</div>
|
<div class="status-text">生成中</div>
|
||||||
@@ -49,6 +42,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
// @ts-ignore
|
||||||
import NavBar from '../components/navBar.vue';
|
import NavBar from '../components/navBar.vue';
|
||||||
|
|
||||||
interface TaskItem {
|
interface TaskItem {
|
||||||
@@ -167,7 +161,8 @@ const lookPicture = (item: TaskItem) => {
|
|||||||
/* 列表(放在 NavBar 下面并可滚动) */
|
/* 列表(放在 NavBar 下面并可滚动) */
|
||||||
.list {
|
.list {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-top: 72px; /* 留出 NavBar 空间(56px header + 24px margin) */
|
margin-top: 72px;
|
||||||
|
/* 留出 NavBar 空间(56px header + 24px margin) */
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,15 +3,8 @@
|
|||||||
<NavBar :title="title" color="white" :showHistory="false" @back="onBack" />
|
<NavBar :title="title" color="white" :showHistory="false" @back="onBack" />
|
||||||
|
|
||||||
<div class="image-area" v-if="sceneData">
|
<div class="image-area" v-if="sceneData">
|
||||||
<div
|
<div class="img-wrapper" @click="showLightbox = true">
|
||||||
class="img-wrapper"
|
<img :src="imageUrl" :alt="title" class="scene-img" />
|
||||||
@click="showLightbox = true"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="imageUrl"
|
|
||||||
:alt="title"
|
|
||||||
class="scene-img"
|
|
||||||
/>
|
|
||||||
<div class="zoom-hint">
|
<div class="zoom-hint">
|
||||||
<span>点击图片全屏预览</span>
|
<span>点击图片全屏预览</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -22,18 +15,13 @@
|
|||||||
<button class="save-btn" @click="handleSave">
|
<button class="save-btn" @click="handleSave">
|
||||||
保存
|
保存
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p class="disclaimer">
|
<p class="disclaimer">
|
||||||
{{ disclaimerText }}
|
{{ disclaimerText }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VueEasyLightbox
|
<VueEasyLightbox :visible="showLightbox" :imgs="[imageUrl]" :index="0" @hide="handleHide">
|
||||||
:visible="showLightbox"
|
|
||||||
:imgs="[imageUrl]"
|
|
||||||
:index="0"
|
|
||||||
@hide="handleHide"
|
|
||||||
>
|
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<div class="lightbox-close" @click="handleHide">×</div>
|
<div class="lightbox-close" @click="handleHide">×</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -43,9 +31,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
// @ts-ignore
|
||||||
import NavBar from '../components/navBar.vue';
|
import NavBar from '../components/navBar.vue';
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
|
// @ts-ignore
|
||||||
import VueEasyLightbox from 'vue-easy-lightbox';
|
import VueEasyLightbox from 'vue-easy-lightbox';
|
||||||
|
// @ts-ignore
|
||||||
import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.css'; // 导入其 CSS
|
import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.css'; // 导入其 CSS
|
||||||
|
|
||||||
const disclaimerText = ref('脑洞特效由 AI 随机生成,如未达预期敬请谅解。')
|
const disclaimerText = ref('脑洞特效由 AI 随机生成,如未达预期敬请谅解。')
|
||||||
@@ -107,13 +98,28 @@ const handleSave = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.top-nav .icon { font-size: 24px; font-weight: bold; cursor: pointer; }
|
|
||||||
.top-nav .title { font-size: 18px; font-weight: 500; }
|
.top-nav .icon {
|
||||||
.top-nav .right-placeholder { width: 24px; } /* 保持标题居中 */
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav .title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav .right-placeholder {
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 保持标题居中 */
|
||||||
|
|
||||||
/* --- 主预览区域 --- */
|
/* --- 主预览区域 --- */
|
||||||
.image-area {
|
.image-area {
|
||||||
flex: 1; /* 占据中间所有剩余空间 */
|
flex: 1;
|
||||||
|
/* 占据中间所有剩余空间 */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -126,14 +132,16 @@ const handleSave = () => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 450px; /* 在平板和桌面端限制最大宽度 */
|
max-width: 450px;
|
||||||
|
/* 在平板和桌面端限制最大宽度 */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scene-img {
|
.scene-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover; /* 裁剪填充,或 use contain to show whole image */
|
object-fit: cover;
|
||||||
|
/* 裁剪填充,或 use contain to show whole image */
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,7 +158,8 @@ const handleSave = () => {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
pointer-events: none; /* 穿透点击 */
|
pointer-events: none;
|
||||||
|
/* 穿透点击 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- 底部操作区域 --- */
|
/* --- 底部操作区域 --- */
|
||||||
@@ -159,10 +168,12 @@ const handleSave = () => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 200px; /* 固定高度 */
|
height: 200px;
|
||||||
|
/* 固定高度 */
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
padding-bottom: env(safe-area-inset-bottom, 20px); /* 处理 iOS Home Bar */
|
padding-bottom: env(safe-area-inset-bottom, 20px);
|
||||||
|
/* 处理 iOS Home Bar */
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn {
|
.save-btn {
|
||||||
@@ -179,7 +190,10 @@ const handleSave = () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.1s;
|
transition: transform 0.1s;
|
||||||
}
|
}
|
||||||
.save-btn:active { transform: scale(0.98); }
|
|
||||||
|
.save-btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
.disclaimer {
|
.disclaimer {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -199,7 +213,7 @@ const handleSave = () => {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 10001;
|
z-index: 10001;
|
||||||
background-color: rgba(0,0,0,0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user