mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<div class="flex justify-between">
|
|
<h1 class="page-h1">我的应用</h1>
|
|
<div class="my-5 mr-10">
|
|
<div @click="new_flag = true" v-if="store.auth.Get(R.App, '').CanCreate()">创建应用</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center"
|
|
>
|
|
<div v-for="(item, k) in ofApps" class="flex items-center justify-center" :key="k">
|
|
<AppCard :core="item"></AppCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-20" v-if="apps.length > 0">
|
|
<h1 class="page-h1">应用中心</h1>
|
|
<div
|
|
class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center"
|
|
>
|
|
<div v-for="(item, k) in apps" class="flex items-center justify-center" :key="k">
|
|
<AppCard :core="item"></AppCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<vmodal v-model="new_flag">
|
|
<div class="h-full w-full flex py-8 px-4 flex-col">
|
|
<div>
|
|
<span>应用名</span>
|
|
<myinput v-model="temp_app.name" />
|
|
</div>
|
|
<div>
|
|
<span>头像</span>
|
|
<uploader
|
|
url="test.ico"
|
|
@success="
|
|
(e) => {
|
|
temp_app.icon = e
|
|
}
|
|
"
|
|
>
|
|
<vavator size="3rem" round :src="temp_app.icon"></vavator>
|
|
</uploader>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<div class="flex justify-end">
|
|
<div class="mx-3" @click="new_flag = false">取消</div>
|
|
<div @click="create_new">创建</div>
|
|
</div>
|
|
</div>
|
|
</vmodal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import api from '@/api'
|
|
import AppCard from '@/components/app.vue'
|
|
import { R } from '@/auth'
|
|
import { modelsApp } from '@/models'
|
|
import Uploader from '@/components/uploader'
|
|
import { useUserStore } from '@/store/user'
|
|
import msg from '@/msg'
|
|
import vmodal from '@/components/vmodal'
|
|
import myinput from '@/components/myinput'
|
|
import vavator from '@/components/vavator'
|
|
|
|
let store = useUserStore()
|
|
let apps = ref<modelsApp[]>([])
|
|
let ofApps = ref<modelsApp[]>([])
|
|
|
|
function getApps() {
|
|
api.app.list().Start((e) => {
|
|
apps.value = e
|
|
api.app
|
|
.user('')
|
|
.list(store.id)
|
|
.Start(
|
|
(e) => {
|
|
ofApps.value = []
|
|
for (let i in e) {
|
|
let ai = apps.value.findIndex((a) => a.UUID === e[i].AppUUID)
|
|
if (ai >= 0) {
|
|
apps.value[ai].UserStatus = e[i].Status
|
|
if (e[i].Status === 'ok') {
|
|
ofApps.value.push(apps.value[ai])
|
|
apps.value.splice(ai, 1)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
() => {},
|
|
)
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getApps()
|
|
})
|
|
|
|
let new_flag = ref(false)
|
|
let temp_app = ref({
|
|
name: '',
|
|
icon: '',
|
|
})
|
|
let form_ref = ref(null)
|
|
let rules = {
|
|
name: [
|
|
{
|
|
required: true,
|
|
validator(r: any, v: any) {
|
|
return (v && v.length >= 2 && v.length <= 16) || new Error('长度要求2~16')
|
|
},
|
|
trigger: ['input', 'blur'],
|
|
},
|
|
],
|
|
}
|
|
|
|
function create_new() {
|
|
// @ts-ignore
|
|
form_ref.value.validate((e: any) => {
|
|
if (!e) {
|
|
api.app.create(temp_app.value.name, temp_app.value.icon).Start(
|
|
(e) => {
|
|
e.Status = 'ok'
|
|
ofApps.value.push(e)
|
|
msg.Info('创建成功')
|
|
new_flag.value = false
|
|
},
|
|
(e) => {
|
|
msg.Warn('创建失败: ' + e)
|
|
},
|
|
)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|