feat(admin):Set up the basic layout pages.

.gitignore

@@ -13,7 +13,7 @@ prisma/migrations
 prisma/SQLite
 # Node dependencies
 node_modules
-
+sms.ts
 # Logs
 logs
 *.log

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>

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"

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>

layouts/none.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

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);
     }
-  } */
+  }
 });

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"

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>

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",
 });

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"
+    <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="3"><el-progress type="circle" :percentage="25" /> </el-col>
-    <el-col :span="3"></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";

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

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;
+});

server/api/web/index.ts

@@ -0,0 +1,3 @@
+export default defineEventHandler((event) => {
+  return { image: ["", "", ""], data: [1, 2, 3] };
+});