mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-20 10:16:39 +08:00
feat: add ImageMj page view
This commit is contained in:
RockYang
parent
3daf2f7738
commit
382d7bfaa1
@ -110,8 +110,8 @@ func (s *MjService) Run() {
|
||||
continue
|
||||
}
|
||||
|
||||
// 锁定任务执行通道，直到任务超时（10分钟）
|
||||
s.redis.Set(ctx, MjRunningJobKey, utils.JsonEncode(task), time.Minute*10)
|
||||
// 锁定任务执行通道，直到任务超时（5分钟）
|
||||
s.redis.Set(ctx, MjRunningJobKey, utils.JsonEncode(task), time.Minute*5)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,8 +10,9 @@
|
||||
<div class="text" v-html="data.html"></div>
|
||||
<div class="images" v-if="data.image?.url !== ''">
|
||||
<el-image :src="data.image?.url"
|
||||
:zoom-rate="1.0"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="[data.image?.url]"
|
||||
fit="cover"
|
||||
:initial-index="0" loading="lazy">
|
||||
<template #placeholder>
|
||||
<div class="image-slot"
|
||||
|
||||
@ -4,7 +4,7 @@ const routes = [
|
||||
{
|
||||
name: 'home',
|
||||
path: '/',
|
||||
redirect: '/chat',
|
||||
redirect: '/mj',
|
||||
meta: {title: '首页'},
|
||||
component: () => import('@/views/Home.vue'),
|
||||
children: [
|
||||
@ -14,13 +14,6 @@ const routes = [
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
},
|
||||
{
|
||||
name: 'chat-id',
|
||||
path: '/chat/:id',
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
props: true // 将路由参数传递给组件的 props
|
||||
},
|
||||
{
|
||||
name: 'image-mj',
|
||||
path: '/mj',
|
||||
|
||||
@ -342,7 +342,7 @@ onMounted(() => {
|
||||
newChat();
|
||||
} else {
|
||||
// 加载对话
|
||||
changeChat(chat)
|
||||
loadChat(chat)
|
||||
}
|
||||
}).catch((e) => {
|
||||
ElMessage.error('获取聊天角色失败: ' + e.messages)
|
||||
@ -423,7 +423,6 @@ const newChat = function () {
|
||||
|
||||
// 切换会话
|
||||
const changeChat = (chat) => {
|
||||
router.push("/chat/" + chat.chat_id)
|
||||
localStorage.setItem("chat_id", chat.chat_id)
|
||||
loadChat(chat)
|
||||
}
|
||||
@ -880,6 +879,5 @@ const getModelValue = (model_id) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
@import '@/assets/iconfont/iconfont.css';
|
||||
@import "@/assets/css/chat-plus.styl"
|
||||
</style>
|
||||
@ -39,16 +39,6 @@ import {isMobile} from "@/utils/libs";
|
||||
import {ref} from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
checkSession().then(() => {
|
||||
if (isMobile()) {
|
||||
router.push("/mobile")
|
||||
} else {
|
||||
router.push("/chat")
|
||||
}
|
||||
}).catch(() => {
|
||||
router.push("/login")
|
||||
})
|
||||
|
||||
const logo = '/images/logo.png';
|
||||
const navs = ref([
|
||||
{path: "/chat", icon: "wechat", title: "对话聊天"},
|
||||
@ -60,7 +50,7 @@ const navs = ref([
|
||||
{path: "/member", icon: "vip-user", title: "会员计划"},
|
||||
{path: "/invite", icon: "share", title: "推广计划"},
|
||||
])
|
||||
const curPath = ref(navs.value[0].path)
|
||||
const curPath = ref(router.currentRoute.value.path)
|
||||
|
||||
const changeNav = (item) => {
|
||||
curPath.value = item.path
|
||||
@ -69,6 +59,7 @@ const changeNav = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '@/assets/iconfont/iconfont.css';
|
||||
.home {
|
||||
display: flex;
|
||||
background-color: #25272D;
|
||||
|
||||
@ -1,39 +1,158 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="page-mj">
|
||||
<div class="inner">
|
||||
<h1>MidJourney 绘画中心</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
<div class="mj-box">
|
||||
<h2>MidJourney 创作中心</h2>
|
||||
|
||||
<div class="mj-params">
|
||||
<div class="param-line">
|
||||
<span>图片比例：</span>
|
||||
<el-tooltip
|
||||
effect="light"
|
||||
content="生成图片的尺寸比例"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="param-line">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<div class="grid-content">
|
||||
<div class="shape vertical"></div>
|
||||
<div class="text">竖图</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-content">
|
||||
<div class="shape square"></div>
|
||||
<div class="text">方图</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-content">
|
||||
<div class="shape horizontal"></div>
|
||||
<div class="text">横图</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="param-line">
|
||||
<span>模型选择：</span>
|
||||
<el-tooltip
|
||||
effect="light"
|
||||
content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
|
||||
<h2>任务列表</h2>
|
||||
|
||||
<h2>创作记录</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
import {InfoFilled} from "@element-plus/icons-vue";
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
const listBoxHeight = window.innerHeight - 20
|
||||
const params = ref({
|
||||
rate: '16:9'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
.mj-box {
|
||||
margin 10px
|
||||
background-color #262626
|
||||
border 1px solid #454545
|
||||
min-width 300px
|
||||
padding 10px
|
||||
border-radius 10px
|
||||
color #ffffff;
|
||||
font-size 14px
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
font-size 20px
|
||||
text-align center
|
||||
color #47fff1
|
||||
}
|
||||
|
||||
.mj-params {
|
||||
margin-top 10px
|
||||
|
||||
.param-line {
|
||||
padding 6px 10px 6px 10px
|
||||
|
||||
.el-icon {
|
||||
position relative
|
||||
top 3px
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
background-color #383838
|
||||
border-radius 5px
|
||||
padding 5px 6px
|
||||
display flex
|
||||
cursor pointer
|
||||
|
||||
.shape {
|
||||
width 16px
|
||||
height 16px
|
||||
margin-right 5px
|
||||
border 1px solid #C4C4C4
|
||||
border-radius 3px
|
||||
}
|
||||
|
||||
.shape.vertical {
|
||||
width 12px
|
||||
height 20px
|
||||
}
|
||||
|
||||
.shape.horizontal {
|
||||
height 12px
|
||||
width 20px
|
||||
position relative
|
||||
top 3px
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.task-list-box {
|
||||
width 100%
|
||||
padding 10px
|
||||
color #ffffff
|
||||
overflow-x hidden
|
||||
overflow-y auto
|
||||
|
||||
h2 {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user