Merge branch 'feature-user-page' of http://gogs.seec.seecoder.cn/HuangYuLin/BlueWhale-Frontend into feature-user-page

# Conflicts:
#	components.d.ts
#	src/components/Header.vue
#	src/components/Login.vue

components.d.ts

@@ -6,20 +6,26 @@
 export {}
 
 declare module 'vue' {
-  export interface GlobalComponents {
-    Dashboard: typeof import('./src/components/Dashboard.vue')['default']
-    DropFile: typeof import('./src/components/DropFile.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
-    Header: typeof import('./src/components/Header.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    Login: typeof import('./src/components/Login.vue')['default']
-    Register: typeof import('./src/components/Register.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
+    export interface GlobalComponents {
+        Dashboard: typeof import('./src/components/Dashboard.vue')['default']
+        ElAside: typeof import('element-plus/es')['ElAside']
+        ElAvatar: typeof import('element-plus/es')['ElAvatar']
+        ElCard: typeof import('element-plus/es')['ElCard']
+        ElCol: typeof import('element-plus/es')['ElCol']
+        ElContainer: typeof import('element-plus/es')['ElContainer']
+        ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+        ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+        ElForm: typeof import('element-plus/es')['ElForm']
+        ElFormItem: typeof import('element-plus/es')['ElFormItem']
+        ElIcon: typeof import('element-plus/es')['ElIcon']
+        ElMain: typeof import('element-plus/es')['ElMain']
+        ElRow: typeof import('element-plus/es')['ElRow']
+        Footer: typeof import('./src/components/Footer.vue')['default']
+        Header: typeof import('./src/components/Header.vue')['default']
+        HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+        Login: typeof import('./src/components/Login.vue')['default']
+        Register: typeof import('./src/components/Register.vue')['default']
+        RouterLink: typeof import('vue-router')['RouterLink']
+        RouterView: typeof import('vue-router')['RouterView']
+    }
 }

src/components/Dashboard.vue

@@ -1,47 +1,209 @@
 <script setup lang="ts">
+  import { ref } from 'vue';
+  import {onMounted} from "vue";
+  import axios from 'axios';
+
+  const name = ref('haha')
+  const tel = ref('')
+  const address = ref('这里做的时候本来想放个表格的，结果发现一个用户其实只有一个地址，但这个已经改成了一个这么大的布局所以先这样吧')
+
+  const isCustomer = true
+  const isStaff = ''
+
+  onMounted(() => {
+    const res = axios.get('/user')
+
+    name.value = res.data.name
+    tel.value = res.data.phone
+    address.value = res.data.address
+
+    const isCustomer = (res.data.role == 'CUSTOMER')
+    const isStaff = (res.data.role == 'STAFF')
+  })
 
 </script>
 
 <template>
 
-<!--  <div class="full-height flex items-center justify-center p-8">-->
-<!--    <el-card class="w-full h-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">-->
-
-<!--    </el-card>-->
-<!--  </div>-->
-
-  <div class="flex items-center justify-center p-8 full-height">
-        <el-container  class="flex flex-col min-w-0 bg-gray-50 h-full w-full shadow-md rounded-lg">
-            <el-aside width="200px" class="bg-gray-200 rounded-l-lg flex flex-col items-center justify-between p-8">
-              <el-avatar :size="120">
-                头像
-              </el-avatar>
-
-              <el-descriptions :column="1" border class="">
-
-                <el-descriptions-item>
-                  <template #label>
-                    <div class="flex items-center">
-                      Username
-                    </div>
-                  </template>
-                  kooriookami
-                </el-descriptions-item>
-
-              </el-descriptions>
-            </el-aside>
-
-            <el-main class="p-8">
-              <span class="text-3xl font-semibold">修改信息</span>
-            </el-main>
-        </el-container>
+  <div id="updateSuccess" class="hidden overflow-y-auto overflow-x-hidden absolute justify-center items-center w-full h-full">
+    这个是一个弹窗，还没有写好
+  </div>
+
+  <div class="flex items-center justify-center p-8 h-full overflow-y-clip space-x-5">
+    <el-aside width="20%" class="h-full bg-gray-100  rounded-lg flex flex-col items-center justify-between">
+
+      <div class="py-6 h-1/2 w-full flex flex-col space-y-6 items-center justify-center border-b-2 border-gray-200">
+        <el-avatar :size="150" class="block">
+          <span class="text-3xl"> 头像 </span>
+        </el-avatar>
+
+        <label v-if="isCustomer"
+            class="w-2/5 px-3 py-2 text-center bg-primary-400 rounded-3xl text-white">顾客</label>
+        <label v-else-if="isStaff"
+               class="w-3/5 px-3 py-2 text-center bg-amber-500 rounded-3xl text-white">工作人员</label>
+
+      </div>
+
+
+      <div class="bg-gray-50 px-3 py-4 overflow-y-auto h-full w-full flex flex-col items-center justify-center shadow-md space-y-20">
+
+          <ul class="space-y-3 font-medium">
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">私聊信箱</span>
+<!--                <span class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">-->
+<!--                  3-->
+<!--                </span>-->
+              </router-link>
+            </li>
+
+
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                  <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">已收藏商品</span>
+              </router-link>
+            </li>
+
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">关注店铺</span>
+              </router-link>
+            </li>
+
+          </ul>
+
+
+          <ul class="pt-4 mt-4 space-y-3 font-medium border-t border-gray-200">
+
+
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                  <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"/>
+                </svg>
+                <span class="ms-3">使用帮助</span>
+              </router-link>
+            </li>
+
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 21">
+                  <path d="m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"/>
+                </svg>
+                <span class="ms-3">建议与反馈</span>
+              </router-link>
+            </li>
+
+            <li>
+              <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                  <path d="M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"/>
+                  <path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z"/>
+                </svg>
+                <span class="ms-3">关于我们</span>
+              </router-link>
+            </li>
+
+          </ul>
+
+      </div>
+
+    </el-aside>
+
+
+    <div  class="flex flex-col h-full w-full  rounded-lg space-y-4">
+
+      <div class="h-auto bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">个人信息</span>
+          <button type="submit"
+                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-2xl text-xs px-4 py-2 text-center">更新</button>
+        </div>
+
+        <form class="m-3">
+          <div class="grid gap-6 mb-6 grid-cols-2 mx-4">
+            <div>
+              <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
+              <input type="text" id="name" v-model="name"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+
+            <div>
+              <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">手机号</label>
+              <input type="tel" id="phone" v-model="tel"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            </div>
+
+<!--            <div>-->
+<!--              <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>-->
+<!--              <input type="email" id="email" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">-->
+<!--            </div>-->
+          </div>
+        </form>
+      </div>
+
+      <div class="h-auto bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">密码</span>
+          <button type="submit"
+                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl  text-xs px-4 py-2 text-center">更新</button>
+        </div>
+
+        <form class="m-3">
+          <div class="grid grid-cols-2 gap-10 mb-6 mx-4">
+            <div>
+              <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
+              <input type="password" id="password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+            </div>
+            <div>
+              <label for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
+              <input type="password" id="confirm_password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+            </div>
+          </div>
+        </form>
+
+      </div>
+
+      <div class="h-full bg-gray-50 rounded-2xl">
+
+        <div class="flex flex-row justify-between px-3 py-2 rounded-t-2xl bg-gray-100 border-b-2 border-gray-200">
+          <span class="text-2xl font-semibold text-center">地址信息</span>
+          <button id="updateProductButton" data-modal-target="updateProductModal" data-modal-toggle="updateProductModal"
+                  class="block text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-3xl text-xs px-4 py-2 text-center" type="button">
+            添加地址
+          </button>
+        </div>
+
+        <div class="p-5 flex flex-col">
+<!--          <label for="address" class="block mt-2 mb-2 text-sm font-medium text-gray-900">默认地址</label>-->
+          <textarea id="address" rows="7"
+                    v-model="address"
+                    class="overflow-auto block p-3 w-full text-xl text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="中华门"></textarea>
+
+        </div>
+
+
+
+      </div>
+
+
+    </div>
   </div>
 
 
 </template>
 
 <style scoped>
-.full-height{
-  min-height: calc(100vh - 68.5px);
-}
+
 </style>

src/components/Footer.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="bg-gray-50 min-w-full bottom-0 shadow">
+    <span class="text-sm px-5">
+      蓝鲸购物系统
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/Header.vue

@@ -1,22 +1,53 @@
 <script setup lang="ts">
 import {UserFilled, SwitchButton} from "@element-plus/icons-vue";
+import {ref} from 'vue';
+
+const searchContent = ref('')
+
+function search() {
+  //todo: search
+
+
+}
 
 </script>
 
 <template>
   <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0 rounded-b-xl">
 
-    <div class="mx-auto p-4">
-      <div class="flex items-center justify-between">
+    <div class="mx-4 p-4">
+
+      <div class="flex items-center justify-between space-x-4">
 
-        <div class="flex items-center space-x-4">
+        <div class="flex items-center">
           <router-link to="/home" v-slot="{navigate}">
-            <h1 @click="navigate" class="text-xl text-white"> Blue Whale Shopping Online </h1>
+            <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
           </router-link>
+        </div>
+
+        <div class="w-3/4">
+          <form>
+            <div class="relative">
+
+              <!--网上抄的logo-->
+              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+                </svg>
+              </div>
 
+              <input type="search" id="search"
+                     v-model="searchContent"
+                     class="block w-full p-4 ps-10 text-gray-900 border border-gray-300 rounded-3xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="国货好物" required>
+              <button type="submit" @click="search"
+                      class="text-white absolute end-5 bottom-2.5 bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-sm px-4 py-2">搜索商品</button>
+            </div>
+          </form>
         </div>
 
-        <div class="flex items-center space-x-4">
+
+
+        <div class="flex items-center space-x-4 mx-3">
           <router-link to="/dashboard" v-slot="{navigate}">
             <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
           </router-link>

src/components/Login.vue

@@ -2,11 +2,11 @@
   import {ElForm, ElFormItem} from "element-plus";
   import { ref, computed } from 'vue';
   import axios from "axios";
-  import {router} from '../router';
+  import {router} from '../router'
 
   // 输入框值
-  const tel = ref('');
-  const password = ref('');
+  const tel = ref('')
+  const password = ref('')
 
   // 用于前端阻拦不合法输入
   // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -34,10 +34,10 @@
 
     try {
       const response = await axios.post(`api/user/login?phone=123&&password=123`,
-        // params: {
-        //   phone: tel.value,
-        //   password: password.value,
-        // }
+          // params: {
+          //   phone: tel.value,
+          //   password: password.value,
+          // }
       )
       console.log(response)
       // token塞入饼干中

src/components/Register.vue

@@ -3,18 +3,24 @@
   import axios from "axios";
   import {router} from '../router'
 
+
   const name = ref('')
+  const identity = ref('')
   const tel = ref('')
+  const address = ref('')
   const password = ref('')
   const confirmPassword = ref('')
 
 
+
   // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const chinaMobileRegex = /^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[189])\d{8}$/;
 
   const hasTelInput = computed(() => tel.value != '');
   const hasPasswordInput = computed(() => password.value != '');
   const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
+  const hasAddressInput = computed(() => address.value != '');
+  const hasIdentityChosen = computed(() => identity.value != '')
 
 
   const telLegal = computed(() => chinaMobileRegex.test(tel.value));
@@ -22,10 +28,10 @@
 
 
   const registerDisabled = computed(() => {
-
-    return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value)
+    return !(telLegal.value && hasPasswordInput.value && isPasswordIdentical.value && hasAddressInput.value && hasIdentityChosen.value)
   });
 
+
   // POST /api/user/register
   // body
   //    id
@@ -39,12 +45,15 @@
   // response
   //    success: boolean
   async function handleRegister() {
+
     try{
       const res = axios.post('/user/register', {
+        role: identity.value,
         name: name.value,
         phone: tel.value,
         password: password.value,
-        time: new Date().getTime()
+        address: address.value,
+        createTime: new Date().getTime()
       }, {
         headers: {
           'Content-Type': 'application/json'
@@ -56,8 +65,9 @@
     } catch (e) {
       console.log(e)
     }
-
   }
+
+
 </script>
 
 <template>
@@ -67,7 +77,7 @@
       Blue Whale Shopping Online
     </span>
 
-    <el-card class="w-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">
+    <el-card class="w-2/3 bg-white rounded-lg shadow-md md:mt-0  xl:p-0">
 
 
       <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
@@ -76,36 +86,80 @@
           创建一个新的账户
         </h1>
 
-        <el-form class="space-y-4 md:space-y-6">
+        <el-form class="space-y-6">
+
+          <el-row class="flex flex-row justify-between">
+
+            <el-col :span="15">
+              <el-form-item>
+                <label for="name" class="block mb-2 text-sm font-medium text-gray-900">昵称</label>
+                <input id="name"
+                       v-model="name"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       placeholder="小明">
+              </el-form-item>
+            </el-col>
+
+
+            <el-col :span="8">
+              <el-form-item>
+                <label for="identity" class="block mb-2 text-sm font-medium text-gray-900">身份</label>
+                <select id="identity"
+                        v-model="identity"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                  <option disabled value="" selected>请选择</option>
+                  <option value="CUSTOMER">顾客</option>
+                  <option value="STAFF">商家</option>
+                </select>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+
+          <el-row class="flex justify-between">
+            <el-col :span="8">
+              <el-form-item>
+                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
+
+                <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  注册手机号
+                </label>
+                <label v-else-if="!telLegal" for="tel"
+                       class="inline-block mb-2 font-medium text-red-500 text-sm">
+                  手机号不合法
+                </label>
+                <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  注册手机号
+                </label>
+
+                <input type="tel" id="tel"
+                       v-model="tel"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
+                       placeholder="请输入中国大陆手机号">
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="15">
+              <el-form-item>
+                <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
+
+                <label for="address" class="inline-block mb-2 text-sm font-medium text-gray-900">
+                  地址
+                </label>
+
+                <input id="address"
+                       v-model="address"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       placeholder="请输入地址">
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
 
-          <el-form-item>
-            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
-            <input id="name"
-                   v-model="name"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   placeholder="小明">
-          </el-form-item>
 
-          <el-form-item>
-<!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
-
-            <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
-              注册手机号
-            </label>
-            <label v-else-if="!telLegal" for="tel"
-                   class="inline-block mb-2 font-medium text-red-500 text-sm">
-              手机号不合法
-            </label>
-            <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
-              注册手机号
-            </label>
-
-            <input type="tel" id="tel"
-                   v-model="tel"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
-                   :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                   placeholder="请输入中国大陆手机号">
-          </el-form-item>
 
           <el-form-item>
             <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>

src/style.css

@@ -12,13 +12,14 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
-  flex: auto;
 }
 
 #app {
   margin: 0;
   padding: 0;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 @layer components {

src/views/Home.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import Header from "../components/Header.vue"
+  // import Footer from "../components/Footer.vue";
 </script>
 
 <template>
 
   <Header/>
   <router-view />
+<!--  <Footer />-->
 
 </template>