mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 04:33:42 +08:00
feat: new WebUI for the main page, add MJ and SD drawing function pages
This commit is contained in:
RockYang
@@ -3,7 +3,6 @@
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<div class="title-box">
|
||||
<el-image :src="logo" class="logo"/>
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<div class="chat-list">
|
||||
@@ -285,7 +284,6 @@ import Welcome from "@/components/Welcome.vue";
|
||||
import ChatMidJourney from "@/components/ChatMidJourney.vue";
|
||||
|
||||
const title = ref('ChatGPT-智能助手');
|
||||
const logo = '/images/logo.png';
|
||||
const rewardImg = ref('/images/reward.png')
|
||||
const models = ref([])
|
||||
const modelID = ref(0)
|
||||
@@ -359,6 +357,12 @@ onMounted(() => {
|
||||
router.push('/login')
|
||||
});
|
||||
|
||||
httpGet("/api/admin/config/get?key=system").then(res => {
|
||||
title.value = res.data.title
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
})
|
||||
|
||||
const clipboard = new Clipboard('.copy-reply');
|
||||
clipboard.on('success', () => {
|
||||
ElMessage.success('复制成功！');
|
||||
|
||||
41
web/src/views/ChatRoles.vue
Normal file
41
web/src/views/ChatRoles.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>MidJourney 绘画中心</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="navigator"></div>
|
||||
<div class="navigator">
|
||||
<div class="logo">
|
||||
<el-image :src="logo"/>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<ul class="nav-items">
|
||||
<li v-for="item in navs" :key="item.path">
|
||||
<el-tooltip
|
||||
effect="light"
|
||||
:content="item.title"
|
||||
placement="right"
|
||||
>
|
||||
<a @click="changeNav(item)" :class="item.path === curPath?'active':''">
|
||||
<i :class="'iconfont icon-'+item.icon"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="move" mode="out-in">
|
||||
@@ -13,30 +33,95 @@
|
||||
|
||||
<script setup>
|
||||
|
||||
// const router = useRouter();
|
||||
// checkSession().then(() => {
|
||||
// if (isMobile()) {
|
||||
// router.push("/mobile")
|
||||
// } else {
|
||||
// router.push("/chat")
|
||||
// }
|
||||
// }).catch(() => {
|
||||
// router.push("/login")
|
||||
// })
|
||||
import {useRouter} from "vue-router";
|
||||
import {checkSession} from "@/action/session";
|
||||
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: "对话聊天"},
|
||||
{path: "/mj", icon: "image", title: "MJ 绘画"},
|
||||
{path: "/sd", icon: "palette", title: "SD 绘画"},
|
||||
{path: "/apps", icon: "menu", title: "应用中心"},
|
||||
{path: "/images", icon: "image-list", title: "绘画社区"},
|
||||
{path: "/knowledge", icon: "book", title: "我的知识库"},
|
||||
{path: "/member", icon: "vip-user", title: "会员计划"},
|
||||
{path: "/invite", icon: "share", title: "推广计划"},
|
||||
])
|
||||
const curPath = ref(navs.value[0].path)
|
||||
|
||||
const changeNav = (item) => {
|
||||
curPath.value = item.path
|
||||
router.push(item.path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.home {
|
||||
display: flex;
|
||||
background-color: #343540;
|
||||
background-color: #25272D;
|
||||
height 100vh
|
||||
width 100%
|
||||
|
||||
.navigator {
|
||||
display flex
|
||||
width 30px
|
||||
flex-flow column
|
||||
width 48px
|
||||
padding 10px 6px
|
||||
border-right: 1px solid #3c3c3c
|
||||
|
||||
.logo {
|
||||
display flex
|
||||
flex-flow column
|
||||
align-items center
|
||||
height 60px
|
||||
|
||||
.divider {
|
||||
border-bottom 1px solid #4A4A4A
|
||||
width 80%
|
||||
height 10px
|
||||
}
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
margin-top 20px
|
||||
|
||||
li {
|
||||
margin-bottom 15px
|
||||
|
||||
a {
|
||||
color #DADBDC
|
||||
background-color #40444A
|
||||
border-radius 10px
|
||||
width 44px
|
||||
height 44px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
cursor pointer
|
||||
|
||||
.iconfont {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
|
||||
a:hover, a.active {
|
||||
color #58D3FF
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
41
web/src/views/ImageMj.vue
Normal file
41
web/src/views/ImageMj.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>MidJourney 绘画中心</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
41
web/src/views/ImageSd.vue
Normal file
41
web/src/views/ImageSd.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>Stable Diffusion 绘画中心</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
41
web/src/views/Images.vue
Normal file
41
web/src/views/Images.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>绘画作品广场</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
41
web/src/views/Invitation.vue
Normal file
41
web/src/views/Invitation.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>会员推广计划</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
41
web/src/views/Knowledge.vue
Normal file
41
web/src/views/Knowledge.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>会员知识库搜索</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
41
web/src/views/Member.vue
Normal file
41
web/src/views/Member.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="page-mj" :style="{ height: winHeight + 'px' }">
|
||||
<div class="inner">
|
||||
<h1>会员充值中心</h1>
|
||||
<h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.page-mj {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items center
|
||||
background-color: #282c34;
|
||||
|
||||
.inner {
|
||||
text-align center
|
||||
|
||||
h1 {
|
||||
color: #202020;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user