refactor login dialog for front page

This commit is contained in:
RockYang
2024-05-18 00:27:32 +08:00
parent dad9254128
commit 45d6579fb6
16 changed files with 277 additions and 279 deletions

View File

@@ -2,15 +2,21 @@
<div>
<div class="page-apps custom-scroll">
<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">
<div class="app-item" :style="{width: scope.width+'px'}">
<el-image :src="scope.item.icon" fit="cover" :style="{height: scope.width+'px'}"/>
<div class="title">
<span class="name">{{ scope.item.name }}</span>
<div class="opt">
<div class="item">
<div class="image">
<el-image :src="scope.item.icon" fit="cover"/>
</div>
<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)">
<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>
</div>
<el-button v-else size="small"
@@ -23,15 +29,34 @@
</el-button>
</div>
</div>
<div class="hello-msg" ref="elements">{{ scope.item.intro }}</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>
</ItemList>
</div>
</div>
<login-dialog :show="showLoginDialog" @hide="getRoles" @success=""/>
</div>
</template>
@@ -39,18 +64,18 @@
import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus";
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 {arrayContains, removeArrayItem, substr} from "@/utils/libs";
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 showLoginDialog = ref(false)
const roles = ref([])
const elements = ref(null)
const store = useSharedStore();
onMounted(() => {
httpGet("/api/role/list?all=true").then((res) => {
const items = res.data
@@ -67,7 +92,6 @@ onMounted(() => {
})
const getRoles = () => {
showLoginDialog.value = false
checkSession().then(user => {
roles.value = user.chat_roles
}).catch(() => {
@@ -98,7 +122,7 @@ const updateRole = (row, opt) => {
ElMessage.error(title.value + "失败:" + e.message)
})
}).catch(() => {
showLoginDialog.value = true
store.setShowLoginDialog(true)
})
}