From 641c02c2fbe7ad4c1e1e6a8ffddf8aa0c7a14f37 Mon Sep 17 00:00:00 2001
From: brianling <brianling@qq.com>
Date: Tue, 10 Sep 2024 15:06:42 +0800
Subject: [PATCH] feat(admin):Set up the basic layout pages.

---
 .gitignore                                 |  2 +-
 components/Admin/Application/Change.vue    | 24 ++++++
 components/Admin/Application/DataTable.vue |  1 +
 layouts/admin.vue                          |  5 +-
 layouts/none.vue                           |  3 +
 middleware/auth.ts                         |  4 +-
 package.json                               |  2 +-
 pages/admin/applications/change.vue        | 91 ++++++++++++++++++++++
 pages/admin/applications/index.vue         | 14 +---
 pages/admin/index.vue                      | 70 ++++++++++++++---
 prisma/test.prisma                         |  7 ++
 server/api/application/change.post.ts      |  6 ++
 server/api/web/index.ts                    |  3 +
 13 files changed, 202 insertions(+), 30 deletions(-)
 create mode 100644 components/Admin/Application/Change.vue
 create mode 100644 layouts/none.vue
 create mode 100644 pages/admin/applications/change.vue
 create mode 100644 server/api/application/change.post.ts
 create mode 100644 server/api/web/index.ts

diff --git a/.gitignore b/.gitignore
index 5e3dd4c..76ac693 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,7 +13,7 @@ prisma/migrations
 prisma/SQLite
 # Node dependencies
 node_modules
-
+sms.ts
 # Logs
 logs
 *.log
diff --git a/components/Admin/Application/Change.vue b/components/Admin/Application/Change.vue
new file mode 100644
index 0000000..b24a3b8
--- /dev/null
+++ b/components/Admin/Application/Change.vue
@@ -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>
diff --git a/components/Admin/Application/DataTable.vue b/components/Admin/Application/DataTable.vue
index 95de6c3..2b6294a 100644
--- a/components/Admin/Application/DataTable.vue
+++ b/components/Admin/Application/DataTable.vue
@@ -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"
diff --git a/layouts/admin.vue b/layouts/admin.vue
index e39d935..a8ab5b3 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -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>
diff --git a/layouts/none.vue b/layouts/none.vue
new file mode 100644
index 0000000..ba4672f
--- /dev/null
+++ b/layouts/none.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 0235451..2de3f8b 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -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);
     }
-  } */
+  }
 });
diff --git a/package.json b/package.json
index 931bd05..69afe91 100644
--- a/package.json
+++ b/package.json
@@ -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"
diff --git a/pages/admin/applications/change.vue b/pages/admin/applications/change.vue
new file mode 100644
index 0000000..5204b6e
--- /dev/null
+++ b/pages/admin/applications/change.vue
@@ -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>
diff --git a/pages/admin/applications/index.vue b/pages/admin/applications/index.vue
index a953f9c..9ce672d 100644
--- a/pages/admin/applications/index.vue
+++ b/pages/admin/applications/index.vue
@@ -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",
 });
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index fa474b3..62f5568 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -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";
diff --git a/prisma/test.prisma b/prisma/test.prisma
index 0994f3a..26cf050 100644
--- a/prisma/test.prisma
+++ b/prisma/test.prisma
@@ -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
diff --git a/server/api/application/change.post.ts b/server/api/application/change.post.ts
new file mode 100644
index 0000000..b27a6f2
--- /dev/null
+++ b/server/api/application/change.post.ts
@@ -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;
+});
diff --git a/server/api/web/index.ts b/server/api/web/index.ts
new file mode 100644
index 0000000..629f723
--- /dev/null
+++ b/server/api/web/index.ts
@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return { image: ["", "", ""], data: [1, 2, 3] };
+});