部分优化

components.d.ts

@@ -7,42 +7,24 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     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']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElRate: typeof import('element-plus/es')['ElRate']
-    ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
-    Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

package-lock.json

@@ -18,7 +18,7 @@
         "typescript": "^5.2.2",
         "unplugin-auto-import": "^0.16.7",
         "unplugin-vue-components": "^0.25.2",
-        "vite": "^5.0.0",
+        "vite": "5.1.2",
         "vue-tsc": "^1.8.22"
       }
     },
@@ -1538,11 +1538,11 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.35",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.35.tgz",
+      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -1818,13 +1818,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.2.tgz",
-      "integrity": "sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.1.2.tgz",
+      "integrity": "sha512-uwiFebQbTWRIGbCaTEBVAfKqgqKNKMJ2uPXsXeLIZxM8MVMjoS3j0cG8NrPxdDIadaWnPSjrkLWffLSC+uiP3Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.35",
         "rollup": "^4.2.0"
       },
       "bin": {

package.json

@@ -19,7 +19,7 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^5.0.0",
+    "vite": "5.1.2",
     "vue-tsc": "^1.8.22"
   }
 }

src/api/_prefix.ts

@@ -1,3 +1,4 @@
+//总api
 export const API_MODULE = '/api'
 
 //用户模块

src/api/user.ts

@@ -1,8 +1,28 @@
 import {axios} from '../utils/request'
 import {USER_MODULE} from './_prefix'
 
+type loginInfo = {
+    phone: string,
+    password: string
+}
+
+type registerInfo = {
+    role: string,
+    name: string,
+    phone: string,
+    password: string,
+    address: string,
+    createTime: string
+}
+
+type updateInfo = {
+    name: string,
+    password: string,
+    address: string,
+}
+
 // 用户登录
-export const userLogin = payload => {
+export const userLogin = (payload: loginInfo) => {
     return axios.post(`${USER_MODULE}/login`,null, {params: payload})
         .then(res => {
             return res
@@ -10,7 +30,7 @@ export const userLogin = payload => {
 }
 
 // 用户注册
-export const userRegister = payload => {
+export const userRegister = (payload: registerInfo) => {
     return axios.post(`${USER_MODULE}/register`, payload,
                     {headers: {'Content-Type': 'application/json'}})
         .then(res => {
@@ -27,7 +47,7 @@ export const userInfo = () => {
 }
 
 // 更新用户信息
-export const userInfoUpdate = payload => {
+export const userInfoUpdate = (payload: updateInfo) => {
     return axios.post(`${USER_MODULE}`, payload, {headers: {'Content-Type': 'application/json'}})
         .then(res => {
             return res

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Footer.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <el-footer>
-    <span>
-      蓝鲸购物系统
-    </span>
-  </el-footer>
-</template>
-
-<style scoped>
-
-</style>

src/components/Header.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import {router} from '../router'
-import {User, SwitchButton} from "@element-plus/icons-vue"
+import {parseRole} from "../utils"
+import {User, SwitchButton} from "@element-plus/icons-vue"   //图标
 
-const role = sessionStorage.getItem('role')
+const role = sessionStorage.getItem('role')    //登录的时候插入的
 
+//退出登录
 function logout() {
   ElMessageBox.confirm(
       '是否要退出登录？',
@@ -22,18 +24,6 @@ function logout() {
     router.push({path: "/login"})
   })
 }
-
-function parseRole() {
-  if (role === 'MANAGER') {
-    return "管理员"
-  } else if (role === 'CUSTOMER') {
-    return "顾客"
-  } else if (role === 'STAFF') {
-    return "商家"
-  } else if (role === 'CEO') {
-    return "CEO"
-  }
-}
 </script>
 
 
@@ -48,7 +38,7 @@ function parseRole() {
       </el-col>
 
       <el-col :span="2">
-        <el-tag class="role-tag" size="large">{{ parseRole() }}版</el-tag>
+        <el-tag class="role-tag" size="large">{{ parseRole(role) }}版</el-tag>
       </el-col>
 
       <el-col :span="8">
@@ -66,7 +56,6 @@ function parseRole() {
         </a>
       </el-col>
     </el-row>
-
   </el-header>
 </template>
 

src/router/index.ts

@@ -8,6 +8,9 @@ const router = createRouter({
     }, {
         path: '/login',
         component: () => import('../views/user/Login.vue'),
+        meta: {
+            title: '登录'
+        }
     }, {
         path: '/register',
         component: () => import('../views/user/Register.vue'),
@@ -39,28 +42,26 @@ const router = createRouter({
 })
 
 router.beforeEach((to, _, next) => {
-    const token:string|null = sessionStorage.getItem('token');
-    const role:string|null = sessionStorage.getItem('role')
+    next()
+    const token: string | null = sessionStorage.getItem('token');
+    const role: string | null = sessionStorage.getItem('role')
 
     if (token) {
-        if(to.meta.permission) {
-            if(to.meta.permission.includes(role!)) {
+        if (to.meta.permission) {
+            if (to.meta.permission.includes(role!)) {
                 next();
-            }
-            else {
+            } else {
                 next('/404');
             }
         } else {
             next()
         }
     } else {
-        if(to.path === '/login') {
+        if (to.path === '/login') {
             next();
-        }
-        else if(to.path === '/register') {
+        } else if (to.path === '/register') {
             next();
-        }
-        else {
+        } else {
             next('/login');
         }
     }

src/utils/index.ts

@@ -0,0 +1,12 @@
+//将身份转化为中文显示
+export function parseRole(role: string) {
+    if (role === 'MANAGER') {
+        return "管理员"
+    } else if (role === 'CUSTOMER') {
+        return "顾客"
+    } else if (role === 'STAFF') {
+        return "商家"
+    } else if (role === 'CEO') {
+        return "CEO"
+    }
+}

src/views/Home.vue

@@ -2,10 +2,12 @@
 import Header from "../components/Header.vue"
 </script>
 
+
 <template>
   <Header/>
   <router-view />
 </template>
 
+
 <style scoped>
 </style>

src/views/NotFound.vue

@@ -2,6 +2,7 @@
 
 </script>
 
+
 <template>
   <el-main class="main-frame">
     <el-result
@@ -18,6 +19,7 @@
   </el-main>
 </template>
 
+
 <style scoped>
 .main-frame {
   width: 100%;
@@ -27,4 +29,4 @@
   align-items: center;
   justify-content: center;
 }
-</style>
+</style>

tailwind.config.ts

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-      './src/**/*.{vue,js,ts,jsx,tsx}',
-      "./index.html",
-  ],
-  theme: {
-      extend: {
-          colors: {
-              primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
-          }
-      },
-  },
-  plugins: [],
-}
-