fix(register.vue): Make the register page

pages/apply/index.vue

@@ -5,14 +5,17 @@
       <Meta name="description"/>
     </Head>
     <div style="width:50%;margin:auto;" :style="{
-        boxShadow: `var(--el-box-shadow-dark)`,
+        boxShadow: `var(--el-box-shadow-light)`,
       }">
         <ClientOnly >
-            <Vueform view="tabs" style="padding:20px" >
+            <Vueform endpoint="/api/test" method="POST" view="tabs" style="padding:30px" >
-              <TextElement name="username" label="昵称" placeholder="昵称"  :columns="{ container: 4, label: 3, wrapper: 12 }"/>
+              <StaticElement tag="h4" align="center" content="个人信息" name="static" />
-              <PhoneElement name="phone" allow-incomplete unmask  default="+86" :include="['cn']" label="手机号" placeholder="+86"  :columns="{ container: 12, label: 1, wrapper: 3 }" />
+              <TextElement name="username" label="昵称" placeholder="昵称"  :columns="{ container: 4, label: 3, wrapper: 12 }"  rules="required|min:3"/>
-              <TextElement name="code" label="验证码" placeholder="xxxxxx"  :columns="{ container: 3, label: 4, wrapper: 12 }" /> 
+              <PhoneElement name="phone" allow-incomplete unmask  default="+86" :include="['cn']" label="手机号" placeholder="+86"  :columns="{ container: 12, label: 1, wrapper: 4 }"  rules="required"/>
-              <ButtonElement name="button"  :columns="{ container: 2, label: 3, wrapper: 12 }" button-label="发送验证码"/>
+              <TextElement name="code" label="验证码" placeholder="xxxxxx"  :columns="{ container: 4, label: 3, wrapper: 12 }"  rules="required"/> 
+              <ButtonElement name="button"  :columns="{ container: 8, label: 3, wrapper: 12 }" button-label="发送验证码"/>
+              <StaticElement tag="h4" align="center" content="项目详情" name="static" />
+              <TextElement name="name" label="项目名称" placeholder="项目名称"  :columns="{ container: 4, label: 4, wrapper: 12 }" rules="required"/>
               <SelectElement
               name="select"
               default="辽宁一区"
@@ -24,6 +27,7 @@
                 '江西一区',
               ]"
               :columns="{ container: 4, label: 3, wrapper: 12 }"
+              rules="required"
               />
             <RadiogroupElement
             default="2 Core"
@@ -41,7 +45,7 @@
         />
 
         <SliderElement
-        name="hhd"
+        name="disk"
         label="磁盘容量"
         :default="5"
         :min="1"
@@ -63,8 +67,10 @@
         <ButtonElement name="submit" button-label="提交申请"  align="center" size="lg"  submits/>
             </Vueform>
           </ClientOnly>
+          
     </div>
 </template>
 <script setup lang="ts">
 import PhoneElemen  from '@vueform/vueform'
+const form = ref()
 </script>

pages/register/index.vue

@@ -4,12 +4,31 @@
       <Title>注册页面</Title>
       <Meta name="description"/>
     </Head>
-    <div>
+        <div style="width:50%;margin:auto;" :style="{
-    <el-text class="mx-1" type="primary" >
+            boxShadow: `var(--el-box-shadow-light)`,
-        Primary
+          }">
-    </el-text>
+            <ClientOnly >
+                <Vueform endpoint="/api/test" method="POST" view="tabs" style="padding:30px" >
+                  <StaticElement tag="h4" align="center" content="个人信息" name="static" />
+                  <TextElement name="username" allow-incomplete label="昵称" placeholder="昵称"   :columns="{ container: 4, label: 3, wrapper: 8 }"  rules="required|min:3|max:64"/>
+                  <PhoneElement  input-type="number" name="phone" allow-incomplete unmask  default="+86" :include="['cn']" label="手机号" placeholder="+86"  :columns="{ container: 12, label: 1, wrapper: 4 }"  rules="required|max:6|min:6"/>
+                  <TextElement name="code" label="验证码" placeholder="xxxxxx"  :columns="{ container: 4, label: 3, wrapper: 12 }"  rules="required"/> 
+                  <ButtonElement name="button"  :columns="{ container: 8, label: 3, wrapper: 12 }" button-label="发送验证码"/>
+                  <TextElement input-type="password" name="password" label="密码"   rules="required|min:8|max:16|confirmed"/>
+                  <TextElement input-type="password" name="password_confirmation" label="确认密码" rules="required|min:8|max:16"/>
+                  <CheckboxElement name="policy" label="用户协议" rules="required" message="您必须同意用户政策才能继续">
+                    已阅读并同意<ElLink href="/" target="_blank">《用户协议》</ElLink>
+                  </CheckboxElement>
+                  <CheckboxElement name="news">
+                    希望获取最新资讯
+                  </CheckboxElement>
+            <ButtonElement name="submit" button-label="提交申请"  align="center" size="lg"  submits/>
+                </Vueform>
+              </ClientOnly>
+              
         </div>
     </template>
     <script setup lang="ts">
-
+    import PhoneElemen  from '@vueform/vueform'
+    const form = ref()
     </script>

server/api/test/index.ts

@@ -2,6 +2,8 @@ import { PrismaClient } from "@prisma/client"
 
 const db = new PrismaClient()
 
-export default defineEventHandler((event) => {
+export default defineEventHandler(async(event) => {
-    return 'Hello World!'
+    const body = await readBody(event)
+    console.info(body)
+    return body
 })

types/Application/Application.ts

@@ -1,3 +1,9 @@
 export type Application = {
-    
+    name: string
+    area: string
+    cpu: number
+    ram: number
+    disk: number
+    usage: string
+    applicantId: number
 }

vueform.config.ts

@@ -4,6 +4,7 @@ import en from '@vueform/vueform/locales/en'
 import zh_CN from '@vueform/vueform/locales/zh_CN'
 import vueform from '@vueform/vueform/dist/vueform'
 import { defineConfig } from '@vueform/vueform'
+import PluginMask from '@vueform/plugin-mask'
 import axios from 'axios'
 
 // You might place these anywhere else in your project
@@ -16,4 +17,7 @@ export default defineConfig({
   theme: vueform,
   locales: { zh_CN,en },
   locale: 'zh_CN',
+  plugins: [
+    PluginMask,
+  ]
 })