mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 08:46:38 +08:00
feat: new WebUI for the main page, add MJ and SD drawing function pages
This commit is contained in:
RockYang
parent
327929243c
commit
f4c6ca4554
@ -13,11 +13,6 @@
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
#app .common-layout .el-aside .title-box .logo {
|
||||
border-radius: 8px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
#app .common-layout .el-aside .title-box span {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -17,14 +17,6 @@ $borderColor = #4676d0;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
|
||||
.logo {
|
||||
//background-color: #ffffff
|
||||
border-radius: 8px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4125778 */
|
||||
src: url('iconfont.woff2?t=1693316408040') format('woff2'),
|
||||
url('iconfont.woff?t=1693316408040') format('woff'),
|
||||
url('iconfont.ttf?t=1693316408040') format('truetype');
|
||||
src: url('iconfont.woff2?t=1694420182193') format('woff2'),
|
||||
url('iconfont.woff?t=1694420182193') format('woff'),
|
||||
url('iconfont.ttf?t=1694420182193') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,38 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-book:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-vip-user:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-vip:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.icon-cart:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-image-list:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-share:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-palette:before {
|
||||
content: "\e6da";
|
||||
}
|
||||
|
||||
.icon-palette-pen:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-image:before {
|
||||
content: "\e7de";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,62 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "11836501",
|
||||
"name": "知识库",
|
||||
"font_class": "book",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "1105",
|
||||
"name": "认证用户",
|
||||
"font_class": "vip-user",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "1473442",
|
||||
"name": "VIP",
|
||||
"font_class": "vip",
|
||||
"unicode": "e688",
|
||||
"unicode_decimal": 59016
|
||||
},
|
||||
{
|
||||
"icon_id": "1306",
|
||||
"name": "购物车空",
|
||||
"font_class": "cart",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "1210",
|
||||
"name": "多素材",
|
||||
"font_class": "image-list",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "6438267",
|
||||
"name": "分享",
|
||||
"font_class": "share",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "8361893",
|
||||
"name": "绘画",
|
||||
"font_class": "palette",
|
||||
"unicode": "e6da",
|
||||
"unicode_decimal": 59098
|
||||
},
|
||||
{
|
||||
"icon_id": "17832791",
|
||||
"name": "绘图、调色盘",
|
||||
"font_class": "palette-pen",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "4766917",
|
||||
"name": "image",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -55,9 +55,11 @@
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {ref} from "vue";
|
||||
import {onMounted, ref} from "vue";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const title = process.env.VUE_APP_TITLE
|
||||
const title = ref(process.env.VUE_APP_TITLE)
|
||||
|
||||
const samples = ref([
|
||||
"用小学生都能听懂的术语解释什么是量子纠缠",
|
||||
@ -95,6 +97,14 @@ const capabilities = ref([
|
||||
}
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
httpGet("/api/admin/config/get?key=system").then(res => {
|
||||
title.value = res.data.title
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
})
|
||||
})
|
||||
|
||||
const emits = defineEmits(['send']);
|
||||
const send = (text) => {
|
||||
emits('send', text)
|
||||
|
||||
@ -22,13 +22,55 @@ const routes = [
|
||||
props: true // 将路由参数传递给组件的 props
|
||||
},
|
||||
{
|
||||
name: 'chat-export',
|
||||
path: '/chat/export',
|
||||
meta: {title: '导出会话记录'},
|
||||
component: () => import('@/views/ChatExport.vue'),
|
||||
name: 'image-mj',
|
||||
path: '/mj',
|
||||
meta: {title: 'MidJourney 绘画中心'},
|
||||
component: () => import('@/views/ImageMj.vue'),
|
||||
},
|
||||
{
|
||||
name: 'image-sd',
|
||||
path: '/sd',
|
||||
meta: {title: 'Stable Diffusion 绘画中心'},
|
||||
component: () => import('@/views/ImageSd.vue'),
|
||||
},
|
||||
{
|
||||
name: 'member',
|
||||
path: '/member',
|
||||
meta: {title: '会员充值中心'},
|
||||
component: () => import('@/views/Member.vue'),
|
||||
},
|
||||
{
|
||||
name: 'chat-role',
|
||||
path: '/apps',
|
||||
meta: {title: '应用中心'},
|
||||
component: () => import('@/views/ChatRoles.vue'),
|
||||
},
|
||||
{
|
||||
name: 'images',
|
||||
path: '/images',
|
||||
meta: {title: '绘画社区'},
|
||||
component: () => import('@/views/Images.vue'),
|
||||
},
|
||||
{
|
||||
name: 'user-invitation',
|
||||
path: '/invite',
|
||||
meta: {title: '推广计划'},
|
||||
component: () => import('@/views/Invitation.vue'),
|
||||
},
|
||||
{
|
||||
name: 'knowledge',
|
||||
path: '/knowledge',
|
||||
meta: {title: '我的知识库'},
|
||||
component: () => import('@/views/Knowledge.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'chat-export',
|
||||
path: '/chat/export',
|
||||
meta: {title: '导出会话记录'},
|
||||
component: () => import('@/views/ChatExport.vue'),
|
||||
},
|
||||
{
|
||||
name: 'login',
|
||||
path: '/login',
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user