feat(admin):Set up the basic layout pages.
This commit is contained in:
parent
04b11841d7
commit
641c02c2fb
2
.gitignore
vendored
2
.gitignore
vendored
@ -13,7 +13,7 @@ prisma/migrations
|
||||
prisma/SQLite
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
sms.ts
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
24
components/Admin/Application/Change.vue
Normal file
24
components/Admin/Application/Change.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<el-button plain @click="open" type="info">修改</el-button>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(["data"]);
|
||||
const open = () => {
|
||||
// ElMessageBox.alert(props.data.cpu, props.data.name, {
|
||||
navigateTo(
|
||||
{
|
||||
path: "/admin/applications/change",
|
||||
query: props.data,
|
||||
},
|
||||
{
|
||||
open: {
|
||||
target: "_blank",
|
||||
windowFeatures: {
|
||||
width: 648,
|
||||
height: 648,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
</script>
|
||||
@ -24,6 +24,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<AdminApplicationChange :data="scope.row" />
|
||||
<AdminApplicationShow :desc="scope.row.desc" :name="scope.row.name" />
|
||||
<el-button
|
||||
size="small"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<el-container>
|
||||
<el-aside width="64px">
|
||||
<el-menu
|
||||
default-active="2"
|
||||
default-active="1"
|
||||
class="el-menu-vertical-demo"
|
||||
collapse
|
||||
>
|
||||
@ -56,4 +56,7 @@ import { House, Setting, Stamp, TakeawayBox } from "@element-plus/icons-vue";
|
||||
useHead({
|
||||
meta: [{ property: "title", content: `管理页面 - ${route.meta.title}` }],
|
||||
});
|
||||
definePageMeta({
|
||||
middleware: ["auth"],
|
||||
});
|
||||
</script>
|
||||
|
||||
3
layouts/none.vue
Normal file
3
layouts/none.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<slot />
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||
const auth = useCookie("auth");
|
||||
/* if (auth.value === undefined) {
|
||||
if (auth.value === undefined) {
|
||||
ElMessage("未登录或cookie未开启");
|
||||
return navigateTo("/user/login", { replace: true });
|
||||
} else {
|
||||
@ -23,5 +23,5 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||
} else {
|
||||
//console.log(auth.value);
|
||||
}
|
||||
} */
|
||||
}
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"dev": "nuxt dev --dotenv .env",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
|
||||
91
pages/admin/applications/change.vue
Normal file
91
pages/admin/applications/change.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{ query.name }}</h1>
|
||||
<form @submit.prevent="submitForm">
|
||||
<label for="nodeSelect">节点选择:</label>
|
||||
<select v-model="query.area" id="nodeSelect">
|
||||
<option value="1">辽宁一区</option>
|
||||
<option value="2">辽宁二区</option>
|
||||
<!-- 更多节点选项 -->
|
||||
</select>
|
||||
|
||||
<label for="cpu">CPU:</label>
|
||||
<input type="number" v-model.number="query.cpu" id="cpu" min="1" />
|
||||
|
||||
<label for="ram">RAM (GB):</label>
|
||||
<input type="number" v-model.number="query.ram" id="ram" min="1" />
|
||||
|
||||
<label for="disk">硬盘容量 (GB):</label>
|
||||
<input type="number" v-model.number="query.disk" id="disk" min="10" />
|
||||
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: "none",
|
||||
});
|
||||
const route = useRoute();
|
||||
const query = ref(route.query);
|
||||
const submitForm = () => {
|
||||
// 处理表单提交逻辑
|
||||
const { data: res } = useFetch("/api/application/change", {
|
||||
method: "POST",
|
||||
body: query.value,
|
||||
});
|
||||
console.info(res.value);
|
||||
// 例如，你可以在这里发送一个请求到服务器
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.form-container {
|
||||
max-width: 500px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="number"],
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
@ -4,22 +4,10 @@
|
||||
<Meta name="description" />
|
||||
</Head>
|
||||
<client-only>
|
||||
<el-table
|
||||
:default-sort="{ prop: 'id', order: 'descending' }"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="id" label="id" width="50" />
|
||||
<el-table-column prop="username" label="用户" width="180" />
|
||||
<el-table-column prop="date" label="登录时间" width="180" />
|
||||
<el-table-column prop="ip" label="登录ip" width="180" />
|
||||
</el-table>
|
||||
<AdminApplicationDataTable />
|
||||
</client-only>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { LoginLog } from "~/types/Log";
|
||||
const data: LoginLog[] = await $fetch("/api/admin/loginlogs");
|
||||
const tableData = ref(data);
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
@ -1,18 +1,64 @@
|
||||
<template>
|
||||
<Head>
|
||||
<Title>管理界面</Title>
|
||||
<Meta name="description" />
|
||||
</Head>
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="3"></el-col>
|
||||
<el-col :span="3"
|
||||
><el-icon :size="128" color="#fbda41"
|
||||
><Stamp /><el-text type="warning">{{}}</el-text></el-icon
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="3"><el-progress type="circle" :percentage="25" /> </el-col>
|
||||
<el-col :span="3"></el-col>
|
||||
</el-row>
|
||||
<Meta name="description" /> </Head
|
||||
><client-only>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6"></el-col>
|
||||
<el-col :span="4"
|
||||
><el-icon :size="128" color="#fbda41"
|
||||
><Stamp /><el-text type="warning">{{}}</el-text></el-icon
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="4"><el-progress type="circle" :percentage="25" /> </el-col>
|
||||
<el-col :span="4">
|
||||
<div class="demo-progress">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="26"
|
||||
:percentage="70"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="100"
|
||||
status="success"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="22"
|
||||
:percentage="80"
|
||||
status="warning"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6"></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6"></el-col>
|
||||
<el-col :span="4">
|
||||
<el-text style="margin-left: 10%" size="large"
|
||||
>{{ 1 + 2 }}待审批</el-text
|
||||
></el-col
|
||||
><el-col :span="4">
|
||||
<el-text style="margin-left: 10%" size="large"
|
||||
>{{ 3 + 22 }}%负载</el-text
|
||||
></el-col
|
||||
><el-col :span="4">
|
||||
<el-text style="margin-left: 10%" size="large"
|
||||
>{{ 4 }}资源占用</el-text
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="6"></el-col>
|
||||
</el-row>
|
||||
</client-only>
|
||||
<el-button type="primary">上班当牛马咯！</el-button>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Stamp } from "@element-plus/icons-vue";
|
||||
|
||||
@ -11,6 +11,13 @@ datasource db {
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model Setting {
|
||||
id Int @id @default(autoincrement())
|
||||
name String
|
||||
value String
|
||||
url String
|
||||
des String
|
||||
}
|
||||
model User {
|
||||
id Int @id @default(autoincrement())
|
||||
phone String @unique
|
||||
|
||||
6
server/api/application/change.post.ts
Normal file
6
server/api/application/change.post.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
const db = new PrismaClient();
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event);
|
||||
return body;
|
||||
});
|
||||
3
server/api/web/index.ts
Normal file
3
server/api/web/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default defineEventHandler((event) => {
|
||||
return { image: ["", "", ""], data: [1, 2, 3] };
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user