mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-24 03:54:26 +08:00
优化生成按钮 UI
This commit is contained in:
RockYang
@@ -85,24 +85,22 @@
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
type="textarea"
|
||||
ref="promptRef"
|
||||
maxlength="2000"
|
||||
maxlength="1024"
|
||||
show-word-limit
|
||||
placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
|
||||
v-loading="isGenerating"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
<div class="flex justify-end pt-2 pr-2">
|
||||
<el-button @click="generatePrompt" type="primary" :loading="isGenerating">
|
||||
<span v-if="!isGenerating">
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
生成专业绘画指令
|
||||
</span>
|
||||
<span v-else>生成中...</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="text-info">
|
||||
<el-row :gutter="10">
|
||||
@@ -117,8 +115,14 @@
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" round @click="generate"> 立即生成 </el-button>
|
||||
<div class="py-4">
|
||||
<button
|
||||
class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
|
||||
@click="generate"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<span>立即生成</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
|
||||
|
||||
@@ -217,7 +217,8 @@
|
||||
<el-input
|
||||
v-model="params.prompt"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
maxlength="2000"
|
||||
maxlength="1024"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
ref="promptRef"
|
||||
v-loading="isGenerating"
|
||||
@@ -225,18 +226,15 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
<div class="flex justify-end pt-2">
|
||||
<el-button @click="generatePrompt" type="primary" :loading="isGenerating">
|
||||
<span v-if="!isGenerating">
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
生成专业绘画指令
|
||||
</span>
|
||||
<span v-else>生成中...</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="param-line pt">
|
||||
<div class="flex-row justify-between items-center">
|
||||
@@ -613,7 +611,13 @@
|
||||
</el-row>
|
||||
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
|
||||
<button
|
||||
class="px-10 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
|
||||
@click="generate"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
<span>立即生成</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
@@ -254,24 +254,21 @@
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
type="textarea"
|
||||
ref="promptRef"
|
||||
maxlength="2000"
|
||||
maxlength="1024"
|
||||
show-word-limit
|
||||
placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
|
||||
v-loading="isGenerating"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
<div class="flex justify-end pt-2 pr-2">
|
||||
<el-button @click="generatePrompt" type="primary" :loading="isGenerating">
|
||||
<span v-if="!isGenerating">
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
生成专业绘画指令
|
||||
</span>
|
||||
<span v-else>生成中...</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="param-line pt">
|
||||
<span>反向提示词：</span>
|
||||
@@ -303,8 +300,14 @@
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" round @click="generate">立即生成</el-button>
|
||||
<div class="py-4">
|
||||
<button
|
||||
class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
|
||||
@click="generate"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<span>立即生成</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
|
||||
|
||||
@@ -3,11 +3,17 @@
|
||||
<div class="inner custom-scroll">
|
||||
<div class="header">
|
||||
<h2 class="text-xl pt-4 pb-4">AI 绘画作品墙</h2>
|
||||
<div class="settings pr-14">
|
||||
<div class="settings">
|
||||
<el-radio-group v-model="imgType" @change="changeImgType">
|
||||
<el-radio value="mj" size="large">MidJourney</el-radio>
|
||||
<el-radio value="sd" size="large">Stable Diffusion</el-radio>
|
||||
<el-radio value="dall" size="large">DALL-E</el-radio>
|
||||
<el-radio-button value="mj"
|
||||
><i class="iconfont icon-mj mr-1"></i>MidJourney</el-radio-button
|
||||
>
|
||||
<el-radio-button value="sd"
|
||||
><i class="iconfont icon-sd mr-1"></i>StableDiffusion</el-radio-button
|
||||
>
|
||||
<el-radio-button value="dall"
|
||||
><i class="iconfont icon-dalle mr-1"></i>Dalle</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,17 +43,14 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="submit-btn flex-center">
|
||||
<el-button
|
||||
style="width: 200px"
|
||||
type="primary"
|
||||
:dark="false"
|
||||
round
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
|
||||
@click="generateAI"
|
||||
:loading="loading"
|
||||
>
|
||||
生成思维导图
|
||||
</el-button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="param-line">使用已有内容生成？</div>
|
||||
@@ -66,15 +63,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="param-line flex-center">
|
||||
<el-button
|
||||
color="rgb(78, 51, 254)"
|
||||
style="width: 200px"
|
||||
:dark="false"
|
||||
round
|
||||
<div class="param-line">
|
||||
<button
|
||||
class="w-full py-3 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-green-500 hover:to-blue-600 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
|
||||
@click="generate"
|
||||
>直接生成（免费）</el-button
|
||||
>
|
||||
直接生成（免费）
|
||||
</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user