xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-13 12:43:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor midjourney image creating page

Browse Source
This commit is contained in:
RockYang
2023-12-06 18:54:30 +08:00
parent aa65f49190
commit 149765764e
25 changed files with 895 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
web/src/views/Home.vue
View File

@@ -1,58 +1,59 @@
<template>
<div class="home">
<div class="navigator">
<div class="logo">
<el-link href="/">
<el-image :src="logo" />
</el-link>
<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' : ''">
<el-image :src="item.icon_path" :width="20" v-if="item.icon_path" />
<i :class="'iconfont icon-' + item.icon" v-else></i>
</a>
</el-tooltip>
<div :class="item.path === curPath ? 'title active' : 'title'">{{ item.title }}</div>
</li>
</ul>
</div>
<div class="content">
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</div>
</div>
<div class="home">
<div class="navigator">
<div class="logo">
<el-link href="/">
<el-image :src="logo"/>
</el-link>
<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">-->
<!-- -->
<!-- </el-tooltip>-->
<a @click="changeNav(item)" :class="item.path === curPath ? 'active' : ''">
<el-image :src="item.icon_path" :width="20" v-if="item.icon_path"/>
<i :class="'iconfont icon-' + item.icon" v-else></i>
</a>
<div :class="item.path === curPath ? 'title active' : 'title'">{{ item.title }}</div>
</li>
</ul>
</div>
<div class="content">
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { checkSession } from "@/action/session";
import { isMobile } from "@/utils/libs";
import { ref } from "vue";
import {useRouter} from "vue-router";
import {checkSession} from "@/action/session";
import {isMobile} from "@/utils/libs";
import {ref} from "vue";
const router = useRouter();
const logo = '/images/icon-logo.png';
const logo = '/images/logo.png';
const navs = ref([
{path: "/chat", icon_path: "/images/chat.png", title: "对话聊天"},
{path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
{path: "/sd", icon_path: "/images/sd.png", title: "SD 绘画"},
{path: "/apps", icon: "menu", title: "应用中心"},
{path: "/images-wall", icon: "image-list", title: "作品展示"},
{path: "/knowledge", icon: "book", title: "我的知识库"},
{path: "/knowledge", icon: "book", title: "知识库"},
{path: "/member", icon: "vip-user", title: "会员计划"},
{path: "/invite", icon: "share", title: "推广计划"},
])
const curPath = ref(router.currentRoute.value.path)
const changeNav = (item) => {
curPath.value = item.path
router.push(item.path)
curPath.value = item.path
router.push(item.path)
}
</script>
@@ -85,9 +86,9 @@ const changeNav = (item) => {
}
.nav-items {
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
li {
margin-bottom 15px
@@ -116,13 +117,14 @@ const changeNav = (item) => {
color #47fff1
}
.title{
font-size: 12px
padding-top: 5px
color: #e5e7eb;
text-align: center;
}
.active {
.title {
font-size: 12px
padding-top: 5px
color: #e5e7eb;
text-align: center;
}
.active {
color #47fff1
}
}