xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-18 01:06:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor login dialog for front page

Browse Source
This commit is contained in:
RockYang 2024-05-18 00:27:32 +08:00
parent cac3194d5b
commit bcadee7290
16 changed files with 277 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.vue
View File

@ -41,6 +41,8 @@ html, body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
--primary-color: #21aa93
} }
.el-overlay-dialog { .el-overlay-dialog {

97
web/src/assets/css/chat-app.styl
View File

@ -2,15 +2,6 @@
background-color: #282c34; background-color: #282c34;
height 100% height 100%
.title {
text-align center
background-color #25272d
font-size 24px
color #ffffff
padding 10px
border-bottom 1px solid #3c3c3c
}
.inner { .inner {
display flex display flex
color #ffffff color #ffffff
@ -19,51 +10,71 @@
overflow-x hidden overflow-x hidden
.list-box { .list-box {
.app-item { .item {
border 1px solid #666666 display flex
border-radius 6px flex-flow row
overflow hidden border 1px solid #3c3c3c
transition: all 0.3s ease; /* 添加过渡效果 */ padding 10px
.el-image { .image {
padding 6px width 80px
height 80px
.el-image__inner { min-width 80px
border-radius 10px border-radius 5px
} overflow hidden
} }
.title { .inner {
display flex display flex
padding 10px flex-flow column
padding 0 0 0 10px
width 100%
.name { .info {
width 100%
text-align left text-align left
font-size 16px
font-weight bold .info-title {
color #47fff1 color var(--el-text-color)
font-size 1.25rem
line-height 1.75rem
letter-spacing: .025em;
font-weight: 600;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.info-text {
padding 8px 0
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
height 34px
font-size: .875rem;
color #999999
}
} }
.opt { .btn {
position: relative; margin-top 10px
width 100% display flex
top -5px justify-content right
.el-button {
margin-left 10px
.el-icon {
margin-right 5px
}
}
} }
} }
.hello-msg {
height 60px
padding 10px
font-size 14px
color #999999
}
&:hover {
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
} }
} }
} }

1
web/src/assets/css/home.styl
View File

@ -140,6 +140,7 @@
.content { .content {
width: 100% width: 100%
overflow auto
box-sizing: border-box box-sizing: border-box
background-color #282c34 background-color #282c34
} }

8
web/src/assets/css/member.styl
View File

@ -65,9 +65,12 @@
padding 15px 0 15px 15px; padding 15px 0 15px 15px;
overflow-x hidden overflow-x hidden
overflow-y visible overflow-y visible
display flex
flex-flow row
.user-profile { .user-profile {
padding 10px 20px 20px 20px padding 10px 20px 20px 20px
width 300px
background-color #393F4A background-color #393F4A
color #ffffff color #ffffff
border-radius 10px border-radius 10px
@ -91,12 +94,15 @@
.product-box { .product-box {
padding 0 20px
width 100%
.info { .info {
.el-alert__description { .el-alert__description {
font-size 14px !important font-size 14px !important
margin 0 margin 0
} }
padding 10px 20px 20px 0 padding 0 0 20px 0
} }
.list-box { .list-box {

71
web/src/components/ItemList.vue
View File

@ -1,19 +1,10 @@
<template> <template>
<div class="list-box" ref="container"> <div class="list-box" ref="containerRef">
<div class="list-inner"> <el-row :gutter="gap">
<div <el-col v-for="item in items" :key="item.id" :span="span" :style="{marginBottom:gap+'px'} ">
class="list-item" <slot :item="item"></slot>
v-for="(item, index) in items" </el-col>
:key="index" </el-row>
:style="{width:itemWidth + 'px'}"
>
<div class="item-inner" :style="{padding: gap/2+'px'}">
<div class="item-wrapper">
<slot :item="item" :index="index" :width="itemWidth"></slot>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -29,7 +20,7 @@ const props = defineProps({
}, },
gap: { gap: {
type: Number, type: Number,
default: 12 default: 10
}, },
width: { width: {
type: Number, type: Number,
@ -37,45 +28,35 @@ const props = defineProps({
} }
}); });
const container = ref(null) const containerRef = ref(null)
const itemWidth = ref(props.width) const span = ref(12)
onMounted(() => { onMounted(() => {
computeSize() calcSpan()
}) })
const computeSize = () => { const calcSpan = () => {
const w = container.value.offsetWidth - 10 // 减去滚动条的宽度 let cols = Math.floor(containerRef.value.offsetWidth / props.width)
let cols = Math.floor(w / props.width) if (cols >= 12) {
itemWidth.value = Math.floor(w / cols) span.value = 1
} return
}
window.onresize = () => { console.log(cols)
computeSize() while (cols > 1) {
if (24 % cols === 0) {
span.value = 24 / cols
return
}
cols -= 1
}
span.value = 12
} }
window.onresize = () => calcSpan()
</script> </script>
<style scoped lang="stylus"> <style scoped lang="stylus">
.list-box { .list-box {
.list-inner {
display flex
flex-wrap wrap
.list-item {
.item-inner {
display flex
.item-wrapper {
height 100%
width 100%
display flex
justify-content center
}
}
}
}
} }
</style> </style>

62
web/src/views/ChatApps.vue
View File

@ -2,15 +2,21 @@
<div> <div>
<div class="page-apps custom-scroll"> <div class="page-apps custom-scroll">
<div class="inner" :style="{height: listBoxHeight + 'px'}"> <div class="inner" :style="{height: listBoxHeight + 'px'}">
<ItemList :items="list" v-if="list.length > 0" :gap="20" :width="250"> <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
<template #default="scope"> <template #default="scope">
<div class="app-item" :style="{width: scope.width+'px'}"> <div class="item">
<el-image :src="scope.item.icon" fit="cover" :style="{height: scope.width+'px'}"/> <div class="image">
<div class="title"> <el-image :src="scope.item.icon" fit="cover"/>
<span class="name">{{ scope.item.name }}</span> </div>
<div class="opt">
<div class="inner">
<div class="info">
<div class="info-title">{{ scope.item.name }}</div>
<div class="info-text">{{ scope.item.hello_msg }}</div>
</div>
<div class="btn">
<div v-if="hasRole(scope.item.key)"> <div v-if="hasRole(scope.item.key)">
<el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button> <el-button size="small" color="#21aa93" @click="useRole(scope.item)">使用</el-button>
<el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button> <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>
</div> </div>
<el-button v-else size="small" <el-button v-else size="small"
@ -23,15 +29,34 @@
</el-button> </el-button>
</div> </div>
</div> </div>
<div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>
</div> </div>
<!-- <div class="app-item">-->
<!-- <el-image :src="scope.item.icon" fit="cover"/>-->
<!-- <div class="title">-->
<!-- <span class="name">{{ scope.item.name }}</span>-->
<!-- <div class="opt">-->
<!-- <div v-if="hasRole(scope.item.key)">-->
<!-- <el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>-->
<!-- <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>-->
<!-- </div>-->
<!-- <el-button v-else size="small"-->
<!-- style="&#45;&#45;el-color-primary:#009999"-->
<!-- @click="updateRole(scope.item, 'add')">-->
<!-- <el-icon>-->
<!-- <Plus/>-->
<!-- </el-icon>-->
<!-- <span>添加应用</span>-->
<!-- </el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>-->
<!-- </div>-->
</template> </template>
</ItemList> </ItemList>
</div> </div>
</div> </div>
<login-dialog :show="showLoginDialog" @hide="getRoles" @success=""/>
</div> </div>
</template> </template>
@ -39,18 +64,18 @@
import {onMounted, ref} from "vue" import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http"; import {httpGet, httpPost} from "@/utils/http";
import ItemList from "@/components/ItemList.vue";
import {Plus} from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import {arrayContains, removeArrayItem, substr} from "@/utils/libs"; import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {useSharedStore} from "@/store/sharedata";
import ItemList from "@/components/ItemList.vue";
import {Plus} from "@element-plus/icons-vue";
const listBoxHeight = window.innerHeight - 147 const listBoxHeight = window.innerHeight - 87
const list = ref([]) const list = ref([])
const showLoginDialog = ref(false)
const roles = ref([]) const roles = ref([])
const elements = ref(null) const store = useSharedStore();
onMounted(() => { onMounted(() => {
httpGet("/api/role/list?all=true").then((res) => { httpGet("/api/role/list?all=true").then((res) => {
const items = res.data const items = res.data
@ -67,7 +92,6 @@ onMounted(() => {
}) })
const getRoles = () => { const getRoles = () => {
showLoginDialog.value = false
checkSession().then(user => { checkSession().then(user => {
roles.value = user.chat_roles roles.value = user.chat_roles
}).catch(() => { }).catch(() => {
@ -98,7 +122,7 @@ const updateRole = (row, opt) => {
ElMessage.error(title.value + "失败：" + e.message) ElMessage.error(title.value + "失败：" + e.message)
}) })
}).catch(() => { }).catch(() => {
showLoginDialog.value = true store.setShowLoginDialog(true)
}) })
} }

11
web/src/views/ChatPlus.vue
View File

@ -99,7 +99,7 @@
<template #default> <template #default>
<div class="chat-config"> <div class="chat-config">
<el-select v-model="roleId" filterable placeholder="角色" @change="newChat" <el-select v-model="roleId" filterable placeholder="角色" @change="_newChat"
class="role-select" class="role-select"
style="width:150px"> style="width:150px">
<el-option <el-option
@ -115,7 +115,7 @@
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="modelID" filterable placeholder="模型" @change="newChat" <el-select v-model="modelID" filterable placeholder="模型" @change="_newChat"
:disabled="disableModel" :disabled="disableModel"
style="width:150px"> style="width:150px">
<el-option <el-option
@ -144,7 +144,7 @@
</el-tooltip> </el-tooltip>
</span> </span>
<span class="tool-item"> <span class="tool-item" v-if="isLogin">
<el-tooltip class="box-item" effect="dark" content="上传附件"> <el-tooltip class="box-item" effect="dark" content="上传附件">
<file-select v-if="isLogin" :user-id="loginUser.id" @selected="insertURL"/> <file-select v-if="isLogin" :user-id="loginUser.id" @selected="insertURL"/>
</el-tooltip> </el-tooltip>
@ -378,6 +378,11 @@ const resizeElement = function () {
leftBoxHeight.value = window.innerHeight - 90 - 45 - 82; leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
}; };
const _newChat = () => {
if (isLogin.value) {
newChat()
}
}
const disableModel = ref(false) const disableModel = ref(false)
// 新建会话 // 新建会话
const newChat = () => { const newChat = () => {

9
web/src/views/Dalle.vue
View File

@ -221,7 +221,6 @@
</div> </div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
<el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/> <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
</div> </div>
</template> </template>
@ -233,16 +232,16 @@ import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus"; import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import LoginDialog from "@/components/LoginDialog.vue"; import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0) const listBoxHeight = ref(0)
const paramBoxHeight = ref(0) const paramBoxHeight = ref(0)
const showLoginDialog = ref(false)
const isLogin = ref(false) const isLogin = ref(false)
const loading = ref(true) const loading = ref(true)
const colWidth = ref(240) const colWidth = ref(220)
const isOver = ref(false) const isOver = ref(false)
const previewURL = ref("") const previewURL = ref("")
const store = useSharedStore();
const resizeElement = function () { const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 90 listBoxHeight.value = window.innerHeight - 90
@ -438,7 +437,7 @@ const generate = () => {
} }
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }
httpPost("/api/dall/image", params.value).then(() => { httpPost("/api/dall/image", params.value).then(() => {

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

@ -14,7 +14,7 @@
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="light"
content="部署文档" content="部署文档"
placement="bottom"> placement="bottom">
<a href="https://ai.r9it.com/docs/install/" class="link-button" target="_blank"> <a href="https://ai.r9it.com/docs/install/" class="link-button" target="_blank">
@ -24,7 +24,7 @@
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="light"
content="项目源码" content="项目源码"
placement="bottom"> placement="bottom">
<a href="https://github.com/yangjian102621/chatgpt-plus" class="link-button" target="_blank"> <a href="https://github.com/yangjian102621/chatgpt-plus" class="link-button" target="_blank">
@ -68,7 +68,7 @@
</el-dropdown> </el-dropdown>
<div v-else> <div v-else>
<el-button size="small" color="#21aa93" @click="show = true" round>登录</el-button> <el-button size="small" color="#21aa93" @click="store.setShowLoginDialog(true)" round>登录</el-button>
<el-button size="small" @click="router.push('/register')" round>注册</el-button> <el-button size="small" @click="router.push('/register')" round>注册</el-button>
</div> </div>
</div> </div>
@ -113,7 +113,7 @@
</ul> </ul>
</div> </div>
<div class="content" :style="{height: mainWinHeight+'px'}"> <div class="content custom-scroll" :style="{height: mainWinHeight+'px'}">
<router-view :key="routerViewKey" v-slot="{ Component }"> <router-view :key="routerViewKey" v-slot="{ Component }">
<transition name="move" mode="out-in"> <transition name="move" mode="out-in">
<component :is="Component"></component> <component :is="Component"></component>
@ -220,5 +220,6 @@ const loginCallback = () => {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import "@/assets/css/custom-scroll.styl"
@import "@/assets/css/home.styl" @import "@/assets/css/home.styl"
</style> </style>

12
web/src/views/ImageMj.vue
View File

@ -600,8 +600,6 @@
</div> </div>
<el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/> <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''" :url-list="[previewURL]"/>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div> </div>
</template> </template>
@ -616,14 +614,14 @@ import {checkSession} from "@/action/session";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session"; import {getSessionId} from "@/store/session";
import {copyObj, removeArrayItem} from "@/utils/libs"; import {copyObj, removeArrayItem} from "@/utils/libs";
import LoginDialog from "@/components/LoginDialog.vue"; import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0) const listBoxHeight = ref(0)
const paramBoxHeight = ref(0) const paramBoxHeight = ref(0)
const showLoginDialog = ref(false)
const loading = ref(true) const loading = ref(true)
const colWidth = ref(240) const colWidth = ref(220)
const previewURL = ref("") const previewURL = ref("")
const store = useSharedStore();
const resizeElement = function () { const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 80 listBoxHeight.value = window.innerHeight - 80
@ -903,7 +901,7 @@ const beforeUpload = (key) => {
// 图片上传 // 图片上传
const uploadImg = (file) => { const uploadImg = (file) => {
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }
@ -936,7 +934,7 @@ const uploadImg = (file) => {
const promptRef = ref(null) const promptRef = ref(null)
const generate = () => { const generate = () => {
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }

10
web/src/views/ImageSd.vue
View File

@ -497,8 +497,6 @@
</el-dialog> </el-dialog>
</div> </div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div> </div>
</template> </template>
@ -511,17 +509,17 @@ import Clipboard from "clipboard";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session"; import {getSessionId} from "@/store/session";
import LoginDialog from "@/components/LoginDialog.vue"; import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(0) const listBoxHeight = ref(0)
const paramBoxHeight = ref(0) const paramBoxHeight = ref(0)
const fullImgHeight = ref(window.innerHeight - 60) const fullImgHeight = ref(window.innerHeight - 60)
const showTaskDialog = ref(false) const showTaskDialog = ref(false)
const item = ref({}) const item = ref({})
const showLoginDialog = ref(false)
const isLogin = ref(false) const isLogin = ref(false)
const loading = ref(true) const loading = ref(true)
const colWidth = ref(240) const colWidth = ref(220)
const store = useSharedStore();
const resizeElement = function () { const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 80 listBoxHeight.value = window.innerHeight - 80
@ -730,7 +728,7 @@ const generate = () => {
} }
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }

2
web/src/views/ImagesWall.vue
View File

@ -311,7 +311,7 @@ const loading = ref(true)
const isOver = ref(false) const isOver = ref(false)
const imgType = ref("mj") // 图片类别 const imgType = ref("mj") // 图片类别
const listBoxHeight = window.innerHeight - 124 const listBoxHeight = window.innerHeight - 124
const colWidth = ref(240) const colWidth = ref(220)
const fullImgHeight = ref(window.innerHeight - 60) const fullImgHeight = ref(window.innerHeight - 60)
const showTaskDialog = ref(false) const showTaskDialog = ref(false)
const item = ref({}) const item = ref({})

10
web/src/views/Invitation.vue
View File

@ -84,8 +84,6 @@
</div> </div>
</div> </div>
</div> </div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div> </div>
</template> </template>
@ -97,17 +95,17 @@ import {ElMessage} from "element-plus";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import InviteList from "@/components/InviteList.vue"; import InviteList from "@/components/InviteList.vue";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import LoginDialog from "@/components/LoginDialog.vue"; import {useSharedStore} from "@/store/sharedata";
const inviteURL = ref("") const inviteURL = ref("")
const qrImg = ref("") const qrImg = ref("/images/wx.png")
const inviteChatCalls = ref(0) const inviteChatCalls = ref(0)
const inviteImgCalls = ref(0) const inviteImgCalls = ref(0)
const hits = ref(0) const hits = ref(0)
const regNum = ref(0) const regNum = ref(0)
const rate = ref(0) const rate = ref(0)
const isLogin = ref(false) const isLogin = ref(false)
const showLoginDialog = ref(false) const store = useSharedStore()
onMounted(() => { onMounted(() => {
initData() initData()
@ -152,7 +150,7 @@ const initData = () => {
ElMessage.error("获取系统配置失败：" + e.message) ElMessage.error("获取系统配置失败：" + e.message)
}) })
}).catch(() => { }).catch(() => {
showLoginDialog.value = true store.setShowLoginDialog(true)
}); });
} }
</script> </script>

34
web/src/views/MarkMap.vue
View File

@ -90,13 +90,10 @@
</div> </div>
</div> </div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="initData"/>
</div> </div>
</template> </template>
<script setup> <script setup>
import LoginDialog from "@/components/LoginDialog.vue";
import {nextTick, onMounted, onUnmounted, ref} from 'vue'; import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import {Markmap} from 'markmap-view'; import {Markmap} from 'markmap-view';
import {Transformer} from 'markmap-lib'; import {Transformer} from 'markmap-lib';
@ -105,6 +102,7 @@ import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {Download} from "@element-plus/icons-vue"; import {Download} from "@element-plus/icons-vue";
import {Toolbar} from 'markmap-toolbar'; import {Toolbar} from 'markmap-toolbar';
import {useSharedStore} from "@/store/sharedata";
const leftBoxHeight = ref(window.innerHeight - 105) const leftBoxHeight = ref(window.innerHeight - 105)
const rightBoxHeight = ref(window.innerHeight - 115) const rightBoxHeight = ref(window.innerHeight - 115)
@ -125,10 +123,10 @@ const md = require('markdown-it')({breaks: true});
const content = ref(text.value) const content = ref(text.value)
const html = ref("") const html = ref("")
const showLoginDialog = ref(false)
const isLogin = ref(false) const isLogin = ref(false)
const loginUser = ref({power: 0}) const loginUser = ref({power: 0})
const transformer = new Transformer(); const transformer = new Transformer();
const store = useSharedStore();
const svgRef = ref(null) const svgRef = ref(null)
@ -150,21 +148,21 @@ onMounted(() => {
}); });
const initData = () => { const initData = () => {
httpGet("/api/model/list").then(res => {
for (let v of res.data) {
if (v.platform === "OpenAI" && v.value.indexOf("gpt-4-gizmo") === -1) {
models.value.push(v)
}
}
modelID.value = models.value[0].id
}).catch(e => {
ElMessage.error("获取模型失败：" + e.message)
})
checkSession().then(user => { checkSession().then(user => {
loginUser.value = user loginUser.value = user
isLogin.value = true isLogin.value = true
connect(user.id)
httpGet("/api/model/list").then(res => {
for (let v of res.data) {
if (v.platform === "OpenAI" && v.value.indexOf("gpt-4-gizmo") === -1) {
models.value.push(v)
}
}
modelID.value = models.value[0].id
connect(user.id)
}).catch(e => {
ElMessage.error("获取模型失败：" + e.message)
})
}).catch(() => { }).catch(() => {
}); });
} }
@ -205,7 +203,7 @@ window.onresize = () => {
} }
const socket = ref(null) const socket = ref(null)
const heartbeatHandle = ref(null) const heartbeatHandle = ref(0)
const connect = (userId) => { const connect = (userId) => {
if (socket.value !== null) { if (socket.value !== null) {
socket.value.close() socket.value.close()
@ -292,7 +290,7 @@ const generateAI = () => {
return ElMessage.error("请输入你的需求") return ElMessage.error("请输入你的需求")
} }
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }
loading.value = true loading.value = true

173
web/src/views/Member.vue
View File

@ -2,98 +2,92 @@
<div> <div>
<div class="member custom-scroll"> <div class="member custom-scroll">
<div class="inner" :style="{height: listBoxHeight + 'px'}"> <div class="inner" :style="{height: listBoxHeight + 'px'}">
<el-row :gutter="20"> <div class="user-profile">
<el-col :span="7"> <user-profile/>
<div class="user-profile">
<user-profile/>
<el-row class="user-opt" :gutter="20"> <el-row class="user-opt" :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button> <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button> <el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button> <el-button type="primary" v-if="enableReward" @click="showRewardDialog = true">加入众筹</el-button>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销 <el-button type="primary" v-if="enableReward" @click="showRewardVerifyDialog = true">众筹核销
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="24" style="padding-top: 30px" v-if="isLogin"> <el-col :span="24" style="padding-top: 30px" v-if="isLogin">
<el-button type="danger" round @click="logout">退出登录</el-button> <el-button type="danger" round @click="logout">退出登录</el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-col>
<el-col :span="17"> <div class="product-box">
<div class="product-box"> <div class="info" v-if="orderPayInfoText !== ''">
<div class="info" v-if="orderPayInfoText !== ''"> <el-alert type="success" show-icon :closable="false" effect="dark">
<el-alert type="success" show-icon :closable="false" effect="dark"> <strong>说明:</strong> {{ vipInfoText }}
<strong>说明:</strong> {{ vipInfoText }} </el-alert>
</el-alert> </div>
</div>
<ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240"> <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="240">
<template #default="scope"> <template #default="scope">
<div class="product-item" :style="{width: scope.width+'px'}"> <div class="product-item">
<div class="image-container"> <div class="image-container">
<el-image :src="vipImg" fit="cover"/> <el-image :src="vipImg" fit="cover"/>
</div> </div>
<div class="product-title"> <div class="product-title">
<span class="name">{{ scope.item.name }}</span> <span class="name">{{ scope.item.name }}</span>
</div> </div>
<div class="product-info"> <div class="product-info">
<div class="info-line"> <div class="info-line">
<span class="label">商品原价：</span> <span class="label">商品原价：</span>
<span class="price">￥{{ scope.item.price }}</span> <span class="price">￥{{ scope.item.price }}</span>
</div> </div>
<div class="info-line"> <div class="info-line">
<span class="label">促销立减：</span> <span class="label">促销立减：</span>
<span class="price">￥{{ scope.item.discount }}</span> <span class="price">￥{{ scope.item.discount }}</span>
</div> </div>
<div class="info-line"> <div class="info-line">
<span class="label">有效期：</span> <span class="label">有效期：</span>
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span> <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
<span class="expire" v-else>长期有效</span> <span class="expire" v-else>长期有效</span>
</div>
<div class="info-line">
<span class="label">算力值：</span>
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
<span class="power" v-else>{{ vipMonthPower }}</span>
</div>
<div class="pay-way">
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</el-button>
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</el-button>
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</el-button>
</div>
</div>
</div> </div>
</template>
</ItemList>
<h2 class="headline">消费账单</h2> <div class="info-line">
<span class="label">算力值：</span>
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
<span class="power" v-else>{{ vipMonthPower }}</span>
</div>
<div class="user-order"> <div class="pay-way">
<user-order v-if="isLogin"/> <el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</el-button>
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i
class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</el-button>
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</el-button>
</div>
</div>
</div> </div>
</div> </template>
</el-col> </ItemList>
</el-row>
<h2 class="headline">消费账单</h2>
<div class="user-order">
<user-order v-if="isLogin"/>
</div>
</div>
</div> </div>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false" <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
@ -154,7 +148,6 @@
</el-dialog> </el-dialog>
</div> </div>
<login-dialog :show="showLoginDialog" @hide="showLoginDialog = false" @success="loginSuccess"/>
</div> </div>
</template> </template>
@ -164,7 +157,6 @@ import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http"; import {httpGet, httpPost} from "@/utils/http";
import ItemList from "@/components/ItemList.vue"; import ItemList from "@/components/ItemList.vue";
import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue"; import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import UserProfile from "@/components/UserProfile.vue"; import UserProfile from "@/components/UserProfile.vue";
import PasswordDialog from "@/components/PasswordDialog.vue"; import PasswordDialog from "@/components/PasswordDialog.vue";
@ -174,10 +166,10 @@ import {useRouter} from "vue-router";
import {removeUserToken} from "@/store/session"; import {removeUserToken} from "@/store/session";
import UserOrder from "@/components/UserOrder.vue"; import UserOrder from "@/components/UserOrder.vue";
import CountDown from "@/components/CountDown.vue"; import CountDown from "@/components/CountDown.vue";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = window.innerHeight - 97 const listBoxHeight = window.innerHeight - 97
const list = ref([]) const list = ref([])
const showLoginDialog = ref(false)
const showPayDialog = ref(false) const showPayDialog = ref(false)
const vipImg = ref("/images/vip.png") const vipImg = ref("/images/vip.png")
const enableReward = ref(false) // 是否启用众筹功能 const enableReward = ref(false) // 是否启用众筹功能
@ -205,6 +197,7 @@ const amount = ref(0)
const payName = ref("支付宝") const payName = ref("支付宝")
const curPay = ref("alipay") // 当前支付方式 const curPay = ref("alipay") // 当前支付方式
const vipInfoText = ref("") const vipInfoText = ref("")
const store = useSharedStore()
onMounted(() => { onMounted(() => {
@ -212,7 +205,7 @@ onMounted(() => {
user.value = _user user.value = _user
isLogin.value = true isLogin.value = true
}).catch(() => { }).catch(() => {
showLoginDialog.value = true store.setShowLoginDialog(true)
}) })
httpGet("/api/product/list").then((res) => { httpGet("/api/product/list").then((res) => {
@ -278,7 +271,7 @@ const alipay = (row) => {
curPay.value = "alipay" curPay.value = "alipay"
amount.value = (row.price - row.discount).toFixed(2) amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }
@ -294,7 +287,7 @@ const huPiPay = (row) => {
curPay.value = "hupi" curPay.value = "hupi"
amount.value = (row.price - row.discount).toFixed(2) amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }
@ -310,7 +303,7 @@ const PayJs = (row) => {
curPay.value = "payjs" curPay.value = "payjs"
amount.value = (row.price - row.discount).toFixed(2) amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) { if (!isLogin.value) {
showLoginDialog.value = true store.setShowLoginDialog(true)
return return
} }

45
web/src/views/PowerLog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="power-log" v-loading="loading"> <div class="power-log custom-scroll" v-loading="loading">
<div class="inner"> <div class="inner" :style="{height: listBoxHeight + 'px'}">
<div class="list-box" :style="{height: listBoxHeight + 'px'}"> <div class="list-box">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input> <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
<el-date-picker <el-date-picker
@ -11,9 +11,9 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin: 0 10px;width: 200px; position: relative;top:3px;" style="margin: 0 10px;width: 200px;"
/> />
<el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button> <el-button color="#21aa93" :icon="Search" @click="fetchData">搜索</el-button>
</div> </div>
<el-row v-if="items.length > 0"> <el-row v-if="items.length > 0">
@ -71,21 +71,25 @@ import {Search} from "@element-plus/icons-vue";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {httpPost} from "@/utils/http"; import {httpPost} from "@/utils/http";
import {checkSession} from "@/action/session";
const items = ref([]) const items = ref([])
const total = ref(0) const total = ref(0)
const page = ref(1) const page = ref(1)
const pageSize = ref(20) const pageSize = ref(20)
const loading = ref(false) const loading = ref(false)
const listBoxHeight = window.innerHeight - 117 const listBoxHeight = window.innerHeight - 87
const query = ref({ const query = ref({
model: "", model: "",
date: [] date: []
}) })
const tagColors = ref(["", "success", "", "danger", "info", "warning"]) const tagColors = ref(["primary", "success", "primary", "danger", "info", "warning"])
onMounted(() => { onMounted(() => {
fetchData() checkSession().then(() => {
fetchData()
}).catch(() => {
})
const clipboard = new Clipboard('.copy-order-no'); const clipboard = new Clipboard('.copy-order-no');
clipboard.on('success', () => { clipboard.on('success', () => {
ElMessage.success("复制成功！"); ElMessage.success("复制成功！");
@ -121,33 +125,12 @@ const fetchData = () => {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import "@/assets/css/custom-scroll.styl"
.power-log { .power-log {
color #ffffff color #ffffff
.inner { .inner {
padding 0 20px 20px 20px padding 0 20px 20px 20px
overflow auto
::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
background-color: #ffffff;
}
/* 修改滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius 8px
}
/* 修改滚动条的滑块的悬停颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}
.list-box { .list-box {
overflow-x hidden overflow-x hidden