feat(Auth): Compete auth-middleware

This commit is contained in:
漩葵 2024-07-14 15:52:30 +08:00
parent d167cb7265
commit 77ea907551
4 changed files with 117 additions and 45 deletions

View File

@ -0,0 +1,51 @@
<template>
<client-only>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="AppID" width="180" />
<el-table-column prop="applicant" label="申请人" width="180" />
<el-table-column prop="area" label="地区" width="180" />
<el-table-column label="配置" width="300">
<template #default="scope">
<el-icon color="blue"><ElIcon-Cpu /></el-icon>
{{ scope.row.cpu }} Core
<el-icon color="green"><ElIcon-Stopwatch /></el-icon
>{{ scope.row.ram }} GB
<el-icon color="gray"><ElIcon-Memo /></el-icon>
{{ scope.row.disk }} GB
</template>
</el-table-column>
<el-table-column label="状态" width="300">
<template #default="scope">
<el-icon :color="scope.row.deploy ? 'green' : 'orange'"
><ElIcon-Stamp
/></el-icon>
{{ scope.row.deploy ? "通过" : "待审核" }}
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<AdminApplicationShow :desc="scope.row.desc" :name="scope.row.name" />
<el-button
size="small"
type="success"
@click="ElMessage({ message: '同意', type: 'success' })"
>
同意
</el-button>
<el-button
size="small"
type="danger"
@click="ElMessage({ message: '拒绝', type: 'warning' })"
>
拒绝
</el-button>
</template>
</el-table-column>
</el-table>
</client-only>
</template>
<script lang="ts" setup>
import type { Application } from "~/types/Application";
const data: Application[] = await $fetch("/api/admin/applications");
const tableData = ref(data);
</script>

View File

@ -0,0 +1,22 @@
<template>
<el-button plain @click="open">查看</el-button>
</template>
<script setup lang="ts">
import type { Action } from "element-plus";
const props = defineProps(["desc", "name"]);
const open = () => {
ElMessageBox.alert(props.desc, props.name, {
// if you want to disable its autofocus
// autofocus: false,
dangerouslyUseHTMLString: true,
confirmButtonText: "OK",
callback: (action: Action) => {
/* ElMessage({
type: "info",
message: `action: ${action}`,
}); */
},
});
};
</script>

View File

@ -29,6 +29,7 @@
<div class="flex-grow" />
<el-menu-item v-if="auth" index="/user/login">登录</el-menu-item>
<el-menu-item v-if="auth" index="/user/register">注册</el-menu-item>
<el-menu-item v-if="!auth" index="/admin">管理界面</el-menu-item>
<el-menu-item v-if="!auth" @click="logoutNow">注销</el-menu-item>
</el-menu>
</client-only>

View File

@ -4,52 +4,50 @@
<Meta name="description" />
</Head>
<client-only>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="AppID" width="180" />
<el-table-column prop="applicant" label="申请人" width="180" />
<el-table-column prop="area" label="地区" width="180" />
<el-table-column label="配置" width="300">
<template #default="scope">
<el-icon color="blue"><ElIcon-Cpu /></el-icon>
{{ scope.row.cpu }} Core
<el-icon color="green"><ElIcon-Stopwatch /></el-icon
>{{ scope.row.ram }} GB
<el-icon color="gray"><ElIcon-Memo /></el-icon>
{{ scope.row.disk }} GB
<el-container>
<el-aside width="64px">
<el-menu default-active="2" class="el-menu-vertical-demo" collapse>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
</el-table-column>
<el-table-column prop="desc" label="用途" width="360" />
<el-table-column label="状态" width="300">
<template #default="scope">
<el-icon :color="scope.row.deploy ? 'green' : 'orange'"
><ElIcon-Stamp
/></el-icon>
{{ scope.row.deploy ? "通过" : "待审核" }}
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button
size="small"
type="success"
@click="ElMessage({ message: '同意', type: 'success' })"
>
同意
</el-button>
<el-button
size="small"
type="danger"
@click="ElMessage({ message: '拒绝', type: 'warning' })"
>
拒绝
</el-button>
</template>
</el-table-column>
</el-table>
<el-menu-item-group>
<template #title><span>Group One</span></template>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title><span>item four</span></template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><Stamp /></el-icon>
<template #title>申请审批</template>
</el-menu-item>
<el-menu-item index="3" @click="navigateTo('/admin/loginlogs')">
<el-icon><TakeawayBox /></el-icon>
<template #title>日志</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<template #title>Navigator Four</template>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<div class="area">
<AdminApplicationDataTable />
</div>
</el-main>
</el-container>
</client-only>
</template>
<script lang="ts" setup>
import type { Application } from "~/types/Application";
const data: Application[] = await $fetch("/api/admin/applications");
const tableData = ref(data);
import { Location, Setting, Stamp, TakeawayBox } from "@element-plus/icons-vue";
</script>
<style></style>