mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 12:43:43 +08:00
feat: refactor midjourney image creating page
This commit is contained in:
RockYang
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -57,7 +57,10 @@
|
||||
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
|
||||
<el-form-item label="所属平台：" prop="platform">
|
||||
<el-select v-model="item.platform" placeholder="请选择平台">
|
||||
<el-option v-for="item in platforms" :value="item.value" :key="item.value">{{ item.name }}</el-option>
|
||||
<el-option v-for="item in platforms" :value="item.value" :label="item.name" :key="item.value">{{
|
||||
item.name
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -66,7 +69,10 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="用途：" prop="type">
|
||||
<el-select v-model="item.type" placeholder="请选择用途">
|
||||
<el-option v-for="item in types" :value="item.value" :key="item.value">{{ item.name }}</el-option>
|
||||
<el-option v-for="item in types" :value="item.value" :label="item.name" :key="item.value">{{
|
||||
item.name
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
@@ -53,7 +53,10 @@
|
||||
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
|
||||
<el-form-item label="所属平台：" prop="platform">
|
||||
<el-select v-model="item.platform" placeholder="请选择平台">
|
||||
<el-option v-for="item in platforms" :value="item.value" :key="item.value">{{ item.name }}</el-option>
|
||||
<el-option v-for="item in platforms" :value="item.value" :label="item.name" :key="item.value">{{
|
||||
item.name
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user