mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-12-27 18:45:59 +08:00
feat: add index page for mobile
This commit is contained in:
RockYang
234
web/src/views/mobile/Index.vue
Normal file
234
web/src/views/mobile/Index.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="index container">
|
||||
<h2 class="title">{{title}}</h2>
|
||||
<van-notice-bar left-icon="info-o" :scrollable="true">
|
||||
你有多少想象力，AI就有多大创造力。我辈之人，先干为敬，陪您先把 AI 用起来。
|
||||
</van-notice-bar>
|
||||
|
||||
<div class="content">
|
||||
<van-grid :column-num="3" :gutter="10" border>
|
||||
<van-grid-item @click="router.push('chat')">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-chat"></i>
|
||||
</template>
|
||||
<template #text>
|
||||
<div class="text">AI 对话</div>
|
||||
|
||||
</template>
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item @click="router.push('image')">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-mj"></i>
|
||||
</template>
|
||||
<template #text>
|
||||
<div class="text">AI 绘画</div>
|
||||
</template>
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item @click="router.push('imgWall')">
|
||||
<template #icon>
|
||||
<van-icon name="photo-o" />
|
||||
</template>
|
||||
<template #text>
|
||||
<div class="text">AI 画廊</div>
|
||||
</template>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
|
||||
<div class="app-list">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="true"
|
||||
finished-text=""
|
||||
@load="fetchApps"
|
||||
>
|
||||
<van-cell v-for="item in apps" :key="item.id">
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<van-image :src="item.icon" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-title">{{item.name}}{{item.name}}{{item.name}}{{item.name}}</div>
|
||||
<div class="info-text">{{item.hello_msg}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<div v-if="hasRole(item.key)">
|
||||
<van-button size="small" type="success" @click="useRole(item.id)">使用</van-button>
|
||||
<van-button size="small" type="danger" @click="updateRole(item,'remove')">移除</van-button>
|
||||
</div>
|
||||
<van-button v-else size="small"
|
||||
style="--el-color-primary:#009999"
|
||||
@click="updateRole(item, 'add')">
|
||||
<van-icon name="add-o" />
|
||||
<span>添加应用</span>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-cell>
|
||||
</van-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {checkSession} from "@/action/session";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {arrayContains, removeArrayItem, showLoginDialog, substr} from "@/utils/libs";
|
||||
import {showNotify} from "vant";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const title = ref(process.env.VUE_APP_TITLE)
|
||||
const router = useRouter()
|
||||
const isLogin = ref(false)
|
||||
const apps = ref([])
|
||||
const loading = ref(false)
|
||||
const roles = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
checkSession().then((user) => {
|
||||
isLogin.value = true
|
||||
roles.value = user.chat_roles
|
||||
})
|
||||
fetchApps()
|
||||
})
|
||||
|
||||
const fetchApps = () => {
|
||||
httpGet("/api/role/list?all=true").then((res) => {
|
||||
const items = res.data
|
||||
// 处理 hello message
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
items[i].intro = substr(items[i].hello_msg, 80)
|
||||
}
|
||||
apps.value = items
|
||||
}).catch(e => {
|
||||
showNotify({type:"danger", message:"获取应用失败：" + e.message})
|
||||
})
|
||||
}
|
||||
|
||||
const updateRole = (row, opt) => {
|
||||
if (!isLogin.value) {
|
||||
return showLoginDialog(router)
|
||||
}
|
||||
|
||||
const title = ref("")
|
||||
if (opt === "add") {
|
||||
title.value = "添加应用"
|
||||
const exists = arrayContains(roles.value, row.key)
|
||||
if (exists) {
|
||||
return
|
||||
}
|
||||
roles.value.push(row.key)
|
||||
} else {
|
||||
title.value = "移除应用"
|
||||
const exists = arrayContains(roles.value, row.key)
|
||||
if (!exists) {
|
||||
return
|
||||
}
|
||||
roles.value = removeArrayItem(roles.value, row.key)
|
||||
}
|
||||
httpPost("/api/role/update", {keys: roles.value}).then(() => {
|
||||
ElMessage.success({message: title.value + "成功！", duration: 1000})
|
||||
}).catch(e => {
|
||||
ElMessage.error(title.value + "失败：" + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const hasRole = (roleKey) => {
|
||||
return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2)
|
||||
}
|
||||
|
||||
const useRole = (roleId) => {
|
||||
if (!isLogin.value) {
|
||||
return showLoginDialog(router)
|
||||
}
|
||||
router.push(`/mobile/chat/session?role_id=${roleId}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
.index {
|
||||
color var(--van-text-color)
|
||||
.title {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
}
|
||||
--van-notice-bar-font-size: 16px
|
||||
|
||||
.content {
|
||||
padding 15px 0 60px 0
|
||||
.van-grid-item {
|
||||
.iconfont {
|
||||
font-size 20px
|
||||
}
|
||||
.text {
|
||||
display flex
|
||||
width 100%
|
||||
padding 10px
|
||||
justify-content center
|
||||
font-size 14px
|
||||
}
|
||||
}
|
||||
|
||||
.app-list {
|
||||
padding-top 10px
|
||||
|
||||
.item {
|
||||
display flex
|
||||
.image {
|
||||
width 80px
|
||||
height 80px
|
||||
min-width 80px
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align left
|
||||
padding 0 10px
|
||||
.info-title {
|
||||
color var(--van-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 5px 0
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding 5px 0
|
||||
.van-button {
|
||||
margin-right 10px
|
||||
|
||||
.van-icon {
|
||||
margin-right 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user