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
|
prisma/SQLite
|
||||||
# Node dependencies
|
# Node dependencies
|
||||||
node_modules
|
node_modules
|
||||||
|
sms.ts
|
||||||
# Logs
|
# Logs
|
||||||
logs
|
logs
|
||||||
*.log
|
*.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>
|
||||||
<el-table-column label="操作">
|
<el-table-column label="操作">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
|
<AdminApplicationChange :data="scope.row" />
|
||||||
<AdminApplicationShow :desc="scope.row.desc" :name="scope.row.name" />
|
<AdminApplicationShow :desc="scope.row.desc" :name="scope.row.name" />
|
||||||
<el-button
|
<el-button
|
||||||
size="small"
|
size="small"
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
<el-container>
|
<el-container>
|
||||||
<el-aside width="64px">
|
<el-aside width="64px">
|
||||||
<el-menu
|
<el-menu
|
||||||
default-active="2"
|
default-active="1"
|
||||||
class="el-menu-vertical-demo"
|
class="el-menu-vertical-demo"
|
||||||
collapse
|
collapse
|
||||||
>
|
>
|
||||||
@ -56,4 +56,7 @@ import { House, Setting, Stamp, TakeawayBox } from "@element-plus/icons-vue";
|
|||||||
useHead({
|
useHead({
|
||||||
meta: [{ property: "title", content: `管理页面 - ${route.meta.title}` }],
|
meta: [{ property: "title", content: `管理页面 - ${route.meta.title}` }],
|
||||||
});
|
});
|
||||||
|
definePageMeta({
|
||||||
|
middleware: ["auth"],
|
||||||
|
});
|
||||||
</script>
|
</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) => {
|
export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||||
const auth = useCookie("auth");
|
const auth = useCookie("auth");
|
||||||
/* if (auth.value === undefined) {
|
if (auth.value === undefined) {
|
||||||
ElMessage("未登录或cookie未开启");
|
ElMessage("未登录或cookie未开启");
|
||||||
return navigateTo("/user/login", { replace: true });
|
return navigateTo("/user/login", { replace: true });
|
||||||
} else {
|
} else {
|
||||||
@ -23,5 +23,5 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
|
|||||||
} else {
|
} else {
|
||||||
//console.log(auth.value);
|
//console.log(auth.value);
|
||||||
}
|
}
|
||||||
} */
|
}
|
||||||
});
|
});
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "nuxt build",
|
"build": "nuxt build",
|
||||||
"dev": "nuxt dev",
|
"dev": "nuxt dev --dotenv .env",
|
||||||
"generate": "nuxt generate",
|
"generate": "nuxt generate",
|
||||||
"preview": "nuxt preview",
|
"preview": "nuxt preview",
|
||||||
"postinstall": "nuxt prepare"
|
"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" />
|
<Meta name="description" />
|
||||||
</Head>
|
</Head>
|
||||||
<client-only>
|
<client-only>
|
||||||
<el-table
|
<AdminApplicationDataTable />
|
||||||
: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>
|
|
||||||
</client-only>
|
</client-only>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { LoginLog } from "~/types/Log";
|
|
||||||
const data: LoginLog[] = await $fetch("/api/admin/loginlogs");
|
|
||||||
const tableData = ref(data);
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "admin",
|
layout: "admin",
|
||||||
});
|
});
|
||||||
|
@ -1,18 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<Head>
|
<Head>
|
||||||
<Title>管理界面</Title>
|
<Title>管理界面</Title>
|
||||||
<Meta name="description" />
|
<Meta name="description" /> </Head
|
||||||
</Head>
|
><client-only>
|
||||||
<el-row :gutter="12">
|
<el-row :gutter="24">
|
||||||
<el-col :span="3"></el-col>
|
<el-col :span="6"></el-col>
|
||||||
<el-col :span="3"
|
<el-col :span="4"
|
||||||
><el-icon :size="128" color="#fbda41"
|
><el-icon :size="128" color="#fbda41"
|
||||||
><Stamp /><el-text type="warning">{{}}</el-text></el-icon
|
><Stamp /><el-text type="warning">{{}}</el-text></el-icon
|
||||||
></el-col
|
></el-col
|
||||||
>
|
>
|
||||||
<el-col :span="3"><el-progress type="circle" :percentage="25" /> </el-col>
|
<el-col :span="4"><el-progress type="circle" :percentage="25" /> </el-col>
|
||||||
<el-col :span="3"></el-col>
|
<el-col :span="4">
|
||||||
</el-row>
|
<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>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Stamp } from "@element-plus/icons-vue";
|
import { Stamp } from "@element-plus/icons-vue";
|
||||||
|
@ -11,6 +11,13 @@ datasource db {
|
|||||||
url = env("DATABASE_URL")
|
url = env("DATABASE_URL")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
model Setting {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
name String
|
||||||
|
value String
|
||||||
|
url String
|
||||||
|
des String
|
||||||
|
}
|
||||||
model User {
|
model User {
|
||||||
id Int @id @default(autoincrement())
|
id Int @id @default(autoincrement())
|
||||||
phone String @unique
|
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