处理偶尔循环登录问题

src/api/adminRequest.js

@@ -1,13 +1,13 @@
 import axios from "axios";
-import { useRoute, useRouter } from "vue-router";
+import {useRoute, useRouter} from "vue-router";
-import { useStore } from "vuex";
+import {useStore} from "vuex";
-import { Toast, Dialog } from "vant";
+import {Toast, Dialog} from "vant";
 // import { getItem, setItem, removeItem, dalert } from '@/com/index'
 const errorCode = {
-  401: "登录状态已过期,即将返回首页重新登录",
+    401: "登录状态已过期,即将返回首页重新登录",
-  403: "当前操作没有权限",
+    403: "当前操作没有权限",
-  404: "访问资源不存在",
+    404: "访问资源不存在",
-  default: "系统未知错误，请反馈给管理员",
+    default: "系统未知错误，请反馈给管理员",
 };
 const route = useRoute();
 const router = useRouter();
@@ -18,89 +18,91 @@ const loadNoCloseArr = ["/upload/face"];
 // isDev 为假 非开发环境（测试环境，生产环境）- npm run build
 const isDev = process.env.NODE_ENV === "development";
 const request = axios.create({
-  // 根据环境 设置不同的baseURL
+    // 根据环境 设置不同的baseURL
-  // 如果配置了单个的反向代理 --- 字符串模式
+    // 如果配置了单个的反向代理 --- 字符串模式
-  // 如果配置了多个的反向代理 --- 对象模式
+    // 如果配置了多个的反向代理 --- 对象模式
-  baseURL: isDev
+    baseURL: isDev
-    ? "https://visitor.scdswj.cn/prod-api"
+        ? "/dev-api"
-    : "https://visitor.scdswj.cn/prod-api",
+        : "/prod-api",
-  // baseURL: isDev ? 'http://192.168.31.118:8195' : 'https://visitor.scdswj.cn/prod-api'
+    // baseURL: isDev ? 'http://192.168.31.118:8195' : 'https://visitor.scdswj.cn/prod-api'
 });
 // 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
 
 // 请求拦截器 - 所有的请求开始之前先到此处
 request.interceptors.request.use(
-  (config) => {
+    (config) => {
-    // 可以设置 加载的动画效果 的展示
+        // 可以设置 加载的动画效果 的展示
-    // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
+        // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
-    console.log(config);
+        console.log(config);
-    return config;
+        return config;
-  },
+    },
-  (error) => {
+    (error) => {
-    return Promise.reject(error);
+        return Promise.reject(error);
-  }
+    }
 );
 
 // 响应拦截器 --- 所有请求的相应先到此处
 request.interceptors.response.use(
-  (response) => {
+    (response) => {
-    // 可以设置 加载的动画效果 的隐藏
+        // 可以设置 加载的动画效果 的隐藏
-    const code = response.data.code || 200;
+        const code = response.data.code || 200;
-    const message =
+        const message =
-      errorCode[code] || response.data.msg || errorCode["default"];
+            errorCode[code] || response.data.msg || errorCode["default"];
-    if (code === 200) {
+        if (code === 200) {
-      if (loadNoCloseArr.includes(response.config.url)) {
+            if (loadNoCloseArr.includes(response.config.url)) {
-        // 设置请求不关闭加载动画接口
+                // 设置请求不关闭加载动画接口
-      } else {
+            } else {
-        Toast.clear();
+                Toast.clear();
-      }
+            }
-    } else {
-      Toast.clear();
-    }
-    if (code === 401) {
-      console.log("进了");
-      Toast.fail(message);
-      setTimeout(() => {
-        localStorage.removeItem("token");
-        localStorage.removeItem("user");
-        const redirectUrl = localStorage.getItem("redirect");
-        if (redirectUrl) {
-          window.location.href = redirectUrl;
         } else {
-          window.location.href = "/adminHome";
+            Toast.clear();
         }
-      }, 2000);
+        if (code === 401) {
-      return Promise.reject("登录状态已过期,即将返回首页重新登录。");
+            console.log("调试：401 登录状态已过期！");
-    } else if (code === 500) {
+            localStorage.removeItem("token");
-      // Message({ message: msg, type: 'error' })
+            localStorage.removeItem("user");
-      Toast.fail(message);
+            Toast.fail(message);
-      return Promise.reject(response.data);
+            setTimeout(() => {
-    } else if (code === 601) {
+                // const redirectUrl = localStorage.getItem("redirect");
-      // Message({ message: msg, type: 'warning' })
+                // if (redirectUrl) {
-      Toast.fail(message);
+                //     window.location.href = redirectUrl;
-      return Promise.reject("error");
+                // } else {
-    } else if (code !== 200) {
+                //     window.location.href = "/adminHome";
-      Toast.fail(message);
+                // }
-      return Promise.reject("error");
+                // 使用 router 而不是直接修改 window.location
-    } else {
+                router.push("/adminHome");
-      return response.data;
+            }, 2000);
+            return Promise.reject("登录状态已过期,即将返回首页重新登录。");
+        } else if (code === 500) {
+            // Message({ message: msg, type: 'error' })
+            Toast.fail(message);
+            return Promise.reject(response.data);
+        } else if (code === 601) {
+            // Message({ message: msg, type: 'warning' })
+            Toast.fail(message);
+            return Promise.reject("error");
+        } else if (code !== 200) {
+            Toast.fail(message);
+            return Promise.reject("error");
+        } else {
+            return response.data;
+        }
+    },
+    (error) => {
+        Toast.clear();
+        console.log(error.message);
+        let {message} = error;
+        if (message === "Network Error") {
+            message = "后端接口连接异常(" + window.location.href + ")";
+        } else if (message.includes("timeout")) {
+            message = "系统接口请求超时";
+        } else if (message.includes("Request failed with status code")) {
+            message = "系统管理接口 " + message.substr(message.length - 3) + " 异常！";
+        }
+        console.log(message);
+        Toast.fail(message);
+        return Promise.reject(error.response);
     }
-  },
-  (error) => {
-    Toast.clear();
-    console.log(error.message);
-    let { message } = error;
-    if (message === "Network Error") {
-      message = "后端接口连接异常";
-    } else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
-    }
-    console.log(message);
-    Toast.fail(message);
-    return Promise.reject(error.response);
-  }
 );
 
 export default request;

src/api/index.js

@@ -18,12 +18,12 @@ const loadNoCloseArr = ["/upload/face"];
 // isDev 为假 非开发环境（测试环境，生产环境）- npm run build
 const isDev = process.env.NODE_ENV === "development";
 const request = axios.create({
-  // 根据环境 设置不同的baseURL
+  // 根据环境 设置不同的baseURL      https://visitor.scdswj.cn/prod-api
   // 如果配置了单个的反向代理 --- 字符串模式
   // 如果配置了多个的反向代理 --- 对象模式
   baseURL: isDev
-    ? "https://visitor.scdswj.cn/prod-api"
+    ? "/dev-api"
-    : "https://visitor.scdswj.cn/prod-api",
+    : "/prod-api",
   // baseURL: isDev ? "http://192.168.31.124:8195" : "http://192.168.31.124:8195",
 });
 // 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
@@ -58,11 +58,11 @@ request.interceptors.response.use(
       Toast.clear();
     }
     if (code === 401) {
-      Toast.fail(message);
-      setTimeout(() => {
         localStorage.removeItem("token");
         localStorage.removeItem("user");
         localStorage.removeItem("userToken");
+      Toast.fail(message);
+      setTimeout(() => {
 
         const redirectUrl = localStorage.getItem("redirect");
         if (redirectUrl) {
@@ -96,7 +96,7 @@ request.interceptors.response.use(
     } else if (message.includes("timeout")) {
       message = "系统接口请求超时";
     } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
+      message = "系统后台接口" + message.substr(message.length - 3) + "异常";
     }
     console.log(message);
     Toast.fail(message);

src/api/upload.js

@@ -1,5 +1,5 @@
 import request from "./index";
-// 来访预约接口
+// 内部人员头像上传接口
 export function uploadApi(data){
   return request({
     url: '/upload/face',
@@ -8,7 +8,7 @@ export function uploadApi(data){
   })
 }
 
-// 来访人头像上传接口
+// 访客头像上传接口
 export function uploadGuestFaceApi(data){
   return request({
     url: '/upload/guestFace',

src/assets/style/index.scss

@@ -8,3 +8,50 @@ $size30: .4rem /* 30/75 */;
 $lg-size: .4267rem /* 32/75 */;
 // 颜色
 $white: #ffffff;
+
+/* PC端适配 - 使用缩放保持比例 */
+@media screen and (min-width: 769px) {
+  body {
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+  }
+
+  #app {
+    // 假设设计稿是750px宽度，我们可以按比例缩放
+    width: 750px;
+    height: 100vh;
+    transform-origin: center top;
+
+    // 计算缩放比例，假设PC端最小宽度为1200px
+    // 可以根据实际需要调整这个值
+    transform: scale(0.8); // 例如缩放到80%
+
+    // 或者根据实际视口宽度动态计算
+    // transform: scale(calc(100vw / 750));
+
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+
+  // 为特定高度的屏幕调整缩放
+  @media screen and (min-width: 1200px) {
+    #app {
+      transform: scale(1);
+    }
+  }
+
+  @media screen and (min-width: 1000px) and (max-width: 1199px) {
+    #app {
+      transform: scale(0.9);
+    }
+  }
+
+  @media screen and (min-width: 769px) and (max-width: 999px) {
+    #app {
+      transform: scale(0.8);
+    }
+  }
+}

src/components/face-model.vue

@@ -12,149 +12,195 @@
       </header>
       <p class="tips">注：点击照片框进行人脸照片上传</p>
       <div class="button-box">
-          <div @click="onClickCancel" class="cancel-button">取消</div>
+        <div @click="onClickCancel" class="cancel-button">取消</div>
-          <div @click="onClickSave" class="save-button">保存</div>
+        <div @click="onClickSave" class="save-button" :class="{ disabled: !file }" :style="{ pointerEvents: file ? 'auto' : 'none' }">保存</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import {ref} from 'vue'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
-import { useStore } from 'vuex'
+import {useStore} from 'vuex'
-import { rulesForm, resetForm, rulesPhone } from '@/com/index'
+import {rulesForm, resetForm, rulesPhone} from '@/com/index'
 
 /* @data */
-  const router = useRouter()
+const router = useRouter()
-  const store = useStore()
+const store = useStore()
-  const emits = defineEmits(['change', 'cancel', 'save'])
+const emits = defineEmits(['change', 'cancel', 'save'])
 
-  const props = defineProps({
+const props = defineProps({
-    faceImg: {
+  faceImg: {
-      default: ''
+    default: ''
-    },
+  },
-  })
+})
-  const file = ref()
+const file = ref()
 
 /* @setup */
 
 /* @method */
-  // 上传图片
+// 上传图片
-  const onChangeFile = (e) =>{
+const onChangeFile = (e) => {
-    file.value = e.target.files[0]
+  file.value = e.target.files[0]
-    emits('change', e.target.files[0])
+  emits('change', e.target.files[0])
+}
+const onClickCancel = () => {
+  emits('cancel')
+}
+const onClickSave = () => {
+  // 如果既没有新文件也没有原始图片，则不允许保存
+  if (!file.value && !props.faceImg) {
+    return;
   }
-  const onClickCancel = () =>{
+  emits('save', file.value)
-    emits('cancel')
+}
-  }
-  const onClickSave = () =>{
-    emits('save', file.value)
-  }
-  
 
 </script>
 
 <style lang='scss' scoped>
-.fixed-model{
+.fixed-model {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(60,60,67,0.6);
+  background: rgba(60, 60, 67, 0.6);
-  .model{
+
+  .model {
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translateX(-50%) translateY(-65%) ;
+    transform: translateX(-50%) translateY(-65%);
-    width: 8.1867rem /* 614/75 */;
+    width: 8.1867rem /* 614/75 */
+  ;
     // height: 394px;
     background: #FFFFFF;
-    border-radius: .5333rem /* 40/75 */;
+    border-radius: .5333rem /* 40/75 */
-    padding:  0 0 .7733rem /* 58/75 */;
+  ;
+    padding: 0 0 .7733rem /* 58/75 */
+  ;
     box-sizing: border-box;
-    header{
+
+    header {
       width: 100%;
-      height: 10.5333rem /* 790/75 */;
+      height: 10.5333rem /* 790/75 */
+    ;
       background: #FFFFFF;
-      border-radius: .5333rem /* 40/75 */;
+      border-radius: .5333rem /* 40/75 */
+    ;
       background: url('../assets/img/renlianbeijing.png') left top/100% 100% no-repeat;
-      h3{
+
-        line-height: .7733rem /* 58/75 */;
+      h3 {
-        font-size: .5333rem /* 40/75 */;
+        line-height: .7733rem /* 58/75 */
-        font-family: Source Han Sans CN, Source Han Sans CN;
+      ;
+        font-size: .5333rem /* 40/75 */
+      ;
+        font-family: Source Han Sans CN, serif;
         font-weight: 500;
         color: #222222;
-        padding: .8533rem /* 64/75 */ 0 0 ;
+        padding: .8533rem /* 64/75 */
+        0 0;
         text-align: center;
         box-sizing: border-box;
       }
-      .upload-box{
+
+      .upload-box {
         position: relative;
-        width: 4.4rem /* 330/75 */;
+        width: 4.4rem /* 330/75 */
-        height: 4.4rem /* 330/75 */;
+      ;
+        height: 4.4rem /* 330/75 */
+      ;
         background: #FFFFFF;
-        box-shadow: 0px .1067rem /* 8/75 */ .8rem /* 60/75 */ .2667rem /* 20/75 */ rgba(68,140,247,0.4);
+        box-shadow: 0px .1067rem /* 8/75 */
-        border-radius: .2667rem /* 20/75 */;
+        .8rem /* 60/75 */
-        margin: 1.28rem /* 96/75 */ auto 0;
+        .2667rem /* 20/75 */
+        rgba(68, 140, 247, 0.4);
+        border-radius: .2667rem /* 20/75 */
+      ;
+        margin: 1.28rem /* 96/75 */
+        auto 0;
         overflow: hidden;
-        .span{
+
+        .span {
           text-align: center;
-          line-height: 4.4rem /* 330/75 */;
+          line-height: 4.4rem /* 330/75 */
+        ;
           font-size: $size30;
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family: Source Han Sans CN, serif;
           font-weight: 400;
           color: #999999;
 
         }
+
         // display: flex;
-        .face-img, input{
+        .face-img, input {
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
-          border-radius: .2667rem /* 20/75 */;
+          border-radius: .2667rem /* 20/75 */
+        ;
           opacity: 0;
         }
-        .face-img{
+
+        .face-img {
           opacity: 1;
         }
 
       }
     }
-    .tips{
+
-      line-height: .5333rem /* 40/75 */;
+    .tips {
+      line-height: .5333rem /* 40/75 */
+    ;
       font-size: $md-size;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-family: Source Han Sans CN, serif;
       font-weight: 400;
       color: #5F6583;
       text-align: center;
-      margin-top: -1.6rem /* 120/75 */;
+      margin-top: -1.6rem /* 120/75 */
+    ;
     }
-    .button-box{
+
+    .button-box {
       // margin-top: 1.1467rem /* 86/75 */;
       display: flex;
-      padding: 0 .7733rem /* 58/75 */;
+      padding: 0 .7733rem /* 58/75 */
+    ;
       box-sizing: border-box;
-      margin-top: .6133rem /* 46/75 */;
+      margin-top: .6133rem /* 46/75 */
-      div{
+    ;
+
+      div {
         // width: 240px;
         flex: 1;
-        height: 1.0667rem /* 80/75 */;
+        height: 1.0667rem /* 80/75 */
-        line-height: 1.0667rem /* 80/75 */;
+      ;
+        line-height: 1.0667rem /* 80/75 */
+      ;
         background: #448CF7;
-        border-radius: 1.3333rem /* 100/75 */;
+        border-radius: 1.3333rem /* 100/75 */
+      ;
         text-align: center;
         font-size: $md-size;
         color: #FFFFFF;
       }
-      .cancel-button{
-        margin-right: .2667rem /* 20/75 */;
-        background: #D9D9D9;
-        color: #999999;
 
+      .cancel-button {
+        margin-right: .2667rem /* 20/75 */
+      ;
+        background: #448CF7; // #D9D9D9;
+        color: #FFFFFF; // #999999;
+
+      }
+
+      .save-button {
+        &.disabled {
+          background: #D9D9D9;
+          color: #999999;
+        }
       }
     }
   }

src/views/adminHome.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="true" class='box'>
     <header>
-      <h3>Hello~{{userName}}</h3>
+      <h3>Hello~{{ userName }}</h3>
       <h4>呀 你又来审批预约了啊ㄟ( ▔, ▔ )ㄏ</h4>
       <div class="plate-box">
 
@@ -43,275 +43,400 @@
           <div class="status" :class="stateEnum[item.status].className">{{ stateEnum[item.status].statusName }}</div>
         </div>
       </div>
-      <div v-if="isLoading && recordArr.length == 0" class="no-have">
+      <div v-if="isLoading && isDataLoaded && recordArr.length === 0" class="no-have">
         <img class="" src="../assets/nodata.png" alt="">
         <p>暂无待审批数据</p>
       </div>
+      <div v-else-if="isLoading && !isDataLoaded" class="no-have">
+        <img class="" src="../assets/nodata.png" alt="">
+        <p>待审批数据加载中...</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
+import {reactive, ref, onMounted} from 'vue'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
-import { useStore } from 'vuex'
+import {useStore} from 'vuex'
-import { Toast, ImagePreview  } from 'vant';
+import {Toast, ImagePreview} from 'vant';
 import dd from 'dingtalk-jsapi'
-import { rulesForm, resetForm, rulesPhone } from '@/com/index'
+import {rulesForm, resetForm, rulesPhone} from '@/com/index'
-import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
+import {getToken, getVisitorRecord, getWhiteCode} from '@/api/admin.js'
 
 /* @data */
-  const router = useRouter()
+const router = useRouter()
-  const store = useStore()
+const store = useStore()
-  const isLoading = ref(false)
+const isLoading = ref(false)
+const isDataLoaded = ref(false)
+// 已经在登录处理中
+const isLoginInProgress = ref(false);
 
-  const token = ref('')
+const token = ref('')
-  const userName = ref('')
+const userName = ref('')
 
-  const query = reactive({
+const query = reactive({
-    status: 0,
+  status: 0,
-    size: 2,
+  size: 2,
-    current: 1,
+  current: 1,
-  })
+})
-  const recordArr = ref([])
+const recordArr = ref([])
-  const stateEnum = store.state.stateEnum
+const stateEnum = store.state.stateEnum
-  token.value = localStorage.getItem('token')
+token.value = localStorage.getItem('token')
-  localStorage.setItem('redirect', '/adminHome')
+localStorage.setItem('redirect', '/adminHome')
 
 /* @setup */
-  const login = () =>{
+const login = () => {
-    Toast.loading({ duration: 0, forbidClick: true, message: '登录中', });
+  // 防止重复登录
-    dd.getAuthCode({
+  if (isLoginInProgress.value) {
-      corpId: 'ding03f8e88dde9b426835c2f4657eb6378f',
+    return;
-      success: (res) => {
-        const { code } = res;
-        localStorage.removeItem('token');
-				localStorage.removeItem('user');
-				getToken(code).then(data =>{
-          localStorage.setItem('user', JSON.stringify(data.data) )
-          localStorage.setItem('token', data.data.authorization)
-          userName.value = data.data.name
-          
-          Toast.clear()
-          Toast.success('登录成功')
-          visitorList()
-        })
-
-      },
-      fail: (err) => {
-
-      },
-      complete: () => {},
-    });
   }
-  // login()
+  isLoginInProgress.value = true;
+
+  Toast.loading({duration: 0, forbidClick: true, message: '登录中',});
+  dd.getAuthCode({
+    corpId: 'ding03f8e88dde9b426835c2f4657eb6378f',
+    success: (res) => {
+      const {code} = res;
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      getToken(code).then(data => {
+        // 验证返回的数据
+        if (data && data.data && data.data.authorization) {
+          localStorage.setItem('user', JSON.stringify(data.data));
+          localStorage.setItem('token', data.data.authorization);
+          userName.value = data.data.name;
+
+          Toast.clear();
+          Toast.success('登录成功');
+          visitorList();
+        } else {
+          throw new Error('登录数据异常');
+        }
+      }).catch(err => {
+        Toast.clear();
+        Toast.fail('登录失败');
+        console.error('登录失败:', err);
+      }).finally(() => {
+        isLoginInProgress.value = false;
+      });
+
+    },
+    fail: (err) => {
+
+    },
+    complete: () => {
+    },
+  });
+}
+// login()
+
+const visitorList = () => {
+  isDataLoaded.value = false
+  Toast.loading({duration: 0, forbidClick: true, message: '加载中',});
+  getVisitorRecord(query).then(res => {
+    isLoading.value = true
+    isDataLoaded.value = true
+    recordArr.value = res.data
+  }).catch(err => {
+    isLoading.value = true
+    isDataLoaded.value = true
+    recordArr.value = []
+  })
+}
 
-  const visitorList = () =>{
-    Toast.loading({ duration: 0, forbidClick: true, message: '加载中', });
-    getVisitorRecord(query).then(res =>{
-      isLoading.value = true
-      recordArr.value = res.data
-    }).catch(err=>{
-      isLoading.value = true
-    })
-  }
-  // visitorList()
-  if(token.value){
-    visitorList()
-    console.log((JSON.parse(localStorage.getItem('user'))).name )
-    userName.value = JSON.parse(localStorage.getItem('user')).name 
-   }else{
-    login()
-   }
 
 /* @method */
-  const onClickGo = (url = '/adminHome') =>{
+const onClickGo = (url = '/adminHome') => {
-    router.push(url)
+  router.push(url)
+}
+// 改进页面加载时的初始化逻辑
+const initializeApp = () => {
+  const token = localStorage.getItem('token');
+  const userStr = localStorage.getItem('user');
+
+  if (token && userStr) {
+    try {
+      const user = JSON.parse(userStr);
+      if (user && user.name) {
+        userName.value = user.name;
+        visitorList();
+      } else {
+        // 用户数据不完整，重新登录
+        login();
+      }
+    } catch (e) {
+      // 用户数据解析失败，重新登录
+      console.error('用户数据解析失败:', e);
+      login();
+    }
+  } else {
+    // 没有token或用户数据，需要登录
+    login();
   }
+};
+
+// 在组件挂载时调用
+onMounted(() => {
+  initializeApp();
+});
 
 </script>
 
 <style lang='scss' scoped>
-.box{
+.box {
   background-color: #F9FBFC;
   display: flex;
   flex-direction: column;
-  header{
+
+  header {
     position: relative;
     width: 100%;
-    height: 10.4rem /* 780/75 */;
+    height: 10.4rem /* 780/75 */
+  ;
     background: url('../assets/guanlibeijing.png') left top/100% 100% no-repeat;
     box-sizing: border-box;
-    h3{
+
-      padding: 1.0933rem /* 82/75 */ .6933rem /* 52/75 */ .1067rem /* 8/75 */;
+    h3 {
+      padding: 1.0933rem /* 82/75 */
+      .6933rem /* 52/75 */
+      .1067rem /* 8/75 */
+    ;
       box-sizing: border-box;
-      line-height: .72rem /* 54/75 */;
+      line-height: .72rem /* 54/75 */
-      font-size: .48rem /* 36/75 */;
+    ;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-size: .48rem /* 36/75 */
+    ;
+      font-family: Source Han Sans CN, serif;
       font-weight: 500;
       color: #222222;
     }
-    h4{
+
-      line-height: .48rem /* 36/75 */;
+    h4 {
+      line-height: .48rem /* 36/75 */
+    ;
       font-size: $sm-size;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-family: Source Han Sans CN, serif;
       font-weight: 400;
       color: #FFFFFF;
-      padding: 0 .6933rem /* 52/75 */ 1.12rem /* 84/75 */;
+      padding: 0 .6933rem /* 52/75 */
+      1.12rem /* 84/75 */
+    ;
       box-sizing: border-box;
 
     }
-    .position-img{
+
+    .position-img {
       position: absolute;
-      right: .4267rem /* 32/75 */;
+      right: .4267rem /* 32/75 */
-      top: .2933rem /* 22/75 */;
+    ;
-      width: 3.6267rem /* 272/75 */;
+      top: .2933rem /* 22/75 */
-      height: 2.96rem /* 222/75 */;
+    ;
-      img{
+      width: 3.6267rem /* 272/75 */
+    ;
+      height: 2.96rem /* 222/75 */
+    ;
+
+      img {
         width: 100%;
         height: 100%;
       }
     }
-    .plate-box{
+
+    .plate-box {
       width: 100%;
-      padding: 0 .4rem /* 30/75 */;
+      padding: 0 .4rem /* 30/75 */
+    ;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
-      .plate-button{
+
-        width: 4.4rem /* 330/75 */;
+      .plate-button {
-        height: 1.92rem /* 144/75 */;
+        width: 4.4rem /* 330/75 */
-        background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.6) 48%);
+      ;
-        border-radius: .2667rem /* 20/75 */;
+        height: 1.92rem /* 144/75 */
-        border: .0267rem /* 2/75 */ solid #FFFFFF;
+      ;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 48%);
+        border-radius: .2667rem /* 20/75 */
+      ;
+        border: .0267rem /* 2/75 */
+        solid #FFFFFF;
         display: flex;
         align-items: center;
-        img{
+
-          width: .9867rem /* 74/75 */;
+        img {
-          height: .9867rem /* 74/75 */;
+          width: .9867rem /* 74/75 */
-          margin-left: .32rem /* 24/75 */;
+        ;
+          height: .9867rem /* 74/75 */
+        ;
+          margin-left: .32rem /* 24/75 */
+        ;
         }
-        .right{
+
-          margin-left: .3467rem /* 26/75 */;
+        .right {
-          div{
+          margin-left: .3467rem /* 26/75 */
-            line-height: .64rem /* 48/75 */;
+        ;
+
+          div {
+            line-height: .64rem /* 48/75 */
+          ;
             font-size: $lg-size;
-            font-family: Source Han Sans CN, Source Han Sans CN;
+            font-family: Source Han Sans CN, serif;
             font-weight: 500;
             color: #222222;
           }
-          P{
+
-            line-height: .4rem /* 30/75 */;
+          P {
-            font-size: .2667rem /* 20/75 */;
+            line-height: .4rem /* 30/75 */
-            font-family: Source Han Sans CN, Source Han Sans CN;
+          ;
+            font-size: .2667rem /* 20/75 */
+          ;
+            font-family: Source Han Sans CN, serif;
             font-weight: 400;
             color: #5F6583;
-            margin-top: .1067rem /* 8/75 */;
+            margin-top: .1067rem /* 8/75 */
+          ;
           }
         }
       }
     }
   }
-  .content{
+
+  .content {
     flex: 1;
     overflow: auto;
 
     position: relative;
     // top: 5.8667rem /* 440/75 */;
-    margin-top: -4.5333rem /* 340/75 */;
+    margin-top: -4.5333rem /* 340/75 */
+  ;
     width: 100%;
-    padding: 0 .4rem /* 30/75 */;
+    padding: 0 .4rem /* 30/75 */
+  ;
     box-sizing: border-box;
-    h2{
+
+    h2 {
       width: 100%;
-      padding: .2667rem /* 20/75 */ .32rem /* 24/75 */;
+      padding: .2667rem /* 20/75 */
+      .32rem /* 24/75 */
+    ;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
-      line-height: .72rem /* 54/75 */;
+      line-height: .72rem /* 54/75 */
-      font-size: .48rem /* 36/75 */;
+    ;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-size: .48rem /* 36/75 */
+    ;
+      font-family: Source Han Sans CN, serif;
       font-weight: 500;
       color: #222222;
-      span{
+
+      span {
         // line-height: 36px;
         font-size: $sm-size;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family: Source Han Sans CN, serif;
         font-weight: 400;
         color: #999999;
       }
     }
-    .content-ul{
+
-      .wait-list{
+    .content-ul {
+      .wait-list {
         position: relative;
-        width: 9.2rem /* 690/75 */;
+        width: 9.2rem /* 690/75 */
+      ;
         // height: 470px;
         background: #FFFFFF;
-        border-radius: .2667rem /* 20/75 */;
+        border-radius: .2667rem /* 20/75 */
-        padding: .48rem /* 36/75 */;
+      ;
+        padding: .48rem /* 36/75 */
+      ;
         box-sizing: border-box;
-        margin-bottom: .2667rem /* 20/75 */;
+        margin-bottom: .2667rem /* 20/75 */
-        h5{
+      ;
-          height: .6667rem /* 50/75 */;
+
+        h5 {
+          height: .6667rem /* 50/75 */
+        ;
           font-size: $md-size;
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family: Source Han Sans CN, serif;
           font-weight: 400;
           color: #222222;
         }
-        .apply-box{
+
+        .apply-box {
 
           width: 100%;
-          padding: .4rem /* 30/75 */ .3733rem /* 28/75 */ .5067rem /* 38/75 */;
+          padding: .4rem /* 30/75 */
+          .3733rem /* 28/75 */
+          .5067rem /* 38/75 */
+        ;
           box-sizing: border-box;
-          border-radius: .1333rem /* 10/75 */;
+          border-radius: .1333rem /* 10/75 */
+        ;
           font-size: $md-size;
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family: Source Han Sans CN, serif;
           font-weight: 400;
           color: #999999;
-          line-height: .72rem /* 54/75 */;
+          line-height: .72rem /* 54/75 */
+        ;
           background: #F5F7F9;
-          span:last-child{
+
+          span:last-child {
             color: #5F6583;
           }
         }
-        .status{
+
+        .status {
           position: absolute;
           top: 0;
           right: 0;
-          width: 1.52rem /* 114/75 */;
+          width: 1.52rem /* 114/75 */
-          height: .6667rem /* 50/75 */;
+        ;
-          line-height: .6667rem /* 50/75 */;
+          height: .6667rem /* 50/75 */
+        ;
+          line-height: .6667rem /* 50/75 */
+        ;
           background: #FFE9E4;
-          border-radius: 0px .2667rem /* 20/75 */ 0px .1333rem /* 10/75 */;
+          border-radius: 0 .2667rem /* 20/75 */
+          0 .1333rem /* 10/75 */
+        ;
           color: #FF6643;
           font-size: $sm-size;
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family: Source Han Sans CN, serif;
           font-weight: 400;
-          color: #FF6643;
           text-align: center;
 
         }
-        .refuse{
+
+        .refuse {
           color: #5F6583;
           background: #EAEEF6;
         }
-        .pass{
+
+        .pass {
           color: #30BF78;
           background: #E7F8F5;
         }
       }
     }
-    .no-have{
+
+    .no-have {
       // display: block;
-      width: 7.4667rem /* 560/75 */;
+      width: 7.4667rem /* 560/75 */
-      height: 5.3867rem /* 404/75 */;
+    ;
-      margin: .8rem /* 60/75 */ auto;
+      height: 5.3867rem /* 404/75 */
-      img{
+    ;
+      margin: .8rem /* 60/75 */
+      auto;
+
+      img {
         width: 100%;
         height: 100%;
       }
+
       // font-size: 15px;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-family: Source Han Sans CN, serif;
       font-weight: 400;
       color: #999999;
       text-align: center;

src/views/home.vue

@@ -2,7 +2,7 @@
   <div class="box">
     <header>
       <h2>门禁人脸信息</h2>
-      <h3> <img src="../assets/img/dunpai.png" alt=""> 公司门禁系统人脸上传和查看 </h3>
+      <h3><img src="../assets/img/dunpai.png" alt=""> 公司门禁系统人脸上传和查看 </h3>
       <div class="entering-box">
         <img src="../assets/img/shenfenzheng.png" alt="">
         <div class="entering-center">
@@ -13,10 +13,13 @@
       </div>
     </header>
     <div class="content">
-      <h2>通讯录</h2><button @click="handleSync" class="entering-button">同步人员信息</button>
+      <h2>通讯录</h2>
-      <div class="content-box" >
+      <button @click="handleSync" class="entering-button">同步人员信息</button>
+      <div class="content-box">
         <div class="nav">
-          <div @click="onClickDept(item.deptId)" v-for="item in deptArr" class="li" :class="item.deptId == deptId ? 'active' : ''" :style=" item.name.length >= 6 ? 'padding-right: 0.28rem;' : '' " :key="item.userId">
+          <div @click="onClickDept(item.deptId)" v-for="item in deptArr" class="li"
+               :class="item.deptId === deptId ? 'active' : ''"
+               :style=" item.name.length >= 6 ? 'padding-right: 0.28rem;' : '' " :key="item.userId">
             {{ item.name }}
           </div>
         </div>
@@ -24,11 +27,11 @@
           <div class="user-scroll">
             <div v-for="item in userArr" class="user-list">
               <div @click="onClickPreviewImg(item.img)" class="img-box">
-                <img v-if="item.img"  :src="item.img" alt="">
+                <img v-if="item.img" :src="item.img" alt="">
               </div>
               <div class="name">{{ item.name }}</div>
-              <div @click="onClcikUser(item)" v-if="item.img" class="button">查看</div>
+              <div @click="onClickUser(item)" v-if="item.img" class="button">查看</div>
-              <div @click="onClcikUser(item)" v-else class="button active-button">上传</div>
+              <div @click="onClickUser(item)" v-else class="button active-button">上传</div>
             </div>
 
           </div>
@@ -37,370 +40,452 @@
     </div>
   </div>
 
-  <Facemodel @change="onChangeFile" @cancel="isFace = false; form.face =''" @save="onClciksave" v-if="isFace" :faceImg="form.face" />
+  <Facemodel @change="onChangeFile" @cancel="isFace = false; form.face =''" @save="onClickSave" v-if="isFace"
+             :faceImg="form.face"/>
 
 </template>
 <script setup>
-  import { rulesPhone, compareTime, timeDiff,formatDate } from '../com/index.js'
+import {rulesPhone, compareTime, timeDiff, formatDate} from '@/com'
-  // getShop, getKind
+// getShop, getKind
-  import { syncDeptUsers } from '../api/user.js'
+import {syncDeptUsers} from '@/api/user'
-  import { reactive, ref } from 'vue'
+import {reactive, ref} from 'vue'
-  import { Toast, ImagePreview, Skeleton  } from 'vant';
+import {Toast, ImagePreview, Skeleton} from 'vant';
-  import dd from 'dingtalk-jsapi'
+import dd from 'dingtalk-jsapi'
-  import { getToken, getDept, getUserListByDept, putUserId } from '@/api/doorAdmin.js'
+import {getToken, getDept, getUserListByDept, putUserId} from '@/api/doorAdmin.js'
-  import Facemodel from '@/components/face-model.vue'
+import Facemodel from '@/components/face-model.vue'
-  import { uploadApi } from '@/api/upload'
+import {uploadApi} from '@/api/upload'
-  import { useRouter } from 'vue-router';
+import {useRouter} from 'vue-router';
 
 
-  const router = useRouter()
+const router = useRouter()
-  const deptArr = ref([])  // 部门数据
+const deptArr = ref([])  // 部门数据
-  const userArr = ref([]) // 用户
+const userArr = ref([]) // 用户
-  const deptId = ref('') // 选中的部门Id
+const deptId = ref('') // 选中的部门Id
-  const isFace = ref(false)
+const isFace = ref(false)
-  const form = reactive({ // 
+const form = reactive({ //
-    face: '',
+  face: '',
-    userId: '',
+  userId: '',
-    name: ''
+  name: ''
-  })
+})
-  const token = ref('')
+const token = ref('')
-  const isLoading = ref(false)
+const isLoading = ref(false)
-  localStorage.setItem('redirect', '/home')
+localStorage.setItem('redirect', '/home')
-  token.value = localStorage.getItem('token')
+token.value = localStorage.getItem('token')
 
-  // setTimeout( ()=>{
+// setTimeout( ()=>{
-  //   form.face = 'https://img0.baidu.com/it/u=3229206321,1418550973&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
+//   form.face = 'https://img0.baidu.com/it/u=3229206321,1418550973&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
-  // }, 2000)
+// }, 2000)
 
 // method
-  // 点击预栏图片
+// 点击预栏图片
-  const onClickPreviewImg = (img) =>{
+const onClickPreviewImg = (img) => {
-    dd.previewImage({
+  dd.previewImage({
-      urls: [img
+    urls: [img
-      ],
+    ],
-      current: 1,
+    current: 1,
-      success: () => {},
+    success: () => {
-      fail: () => {},
+    },
-      complete: () => {},
+    fail: () => {
-    });
+    },
+    complete: () => {
+    },
+  });
+}
+// 点击切换部门
+const onClickDept = (Id) => {
+  if (deptId.value !== Id) {
+    deptId.value = Id
+    userList()
   }
-  // 点击切换部门
+}
-  const onClickDept = (Id) =>{
+// 点击上传了文件
-    if(deptId.value != Id){
+const onChangeFile = (file) => {
-      deptId.value = Id
+  console.log(file)
-      userList()
+  if (file) {
+    let reader = new FileReader()
+    reader.readAsDataURL(file) // 转base64
+    reader.onload = () => {   // 简化代码 - 转换完成
+      form.face = reader.result
     }
   }
-  // 点击上传了文件
-  const onChangeFile = (file) =>{
-    console.log(file)
-    if(file){
-      let reader = new FileReader()
-      reader.readAsDataURL(file) // 转base64
-      reader.onload =  () =>{   // 简化代码 - 转换完成
-        form.face = reader.result 
-      }
-    }
 
+}
+// 点击保存
+const onClickSave = (file) => {
+  if (form.face && file) {
+    // 有新图片需要上传
+    let formData = new FormData()
+    formData.append('file', file)
+    formData.append('userId', form.userId)
+    formData.append('name', form.name)
+    Toast.loading({duration: 0, forbidClick: true, message: '上传中',});
+    uploadApi(formData).then(res => {
+      form.face = res.data
+      let obj = {userId: form.userId, img: form.face}
+      putUserId(obj).then(response => {
+        userList()
+        isFace.value = false
+        Toast.success(response.msg);
+      })
+    }).catch(err => {
+      Toast.fail('上传失败，请重试');
+      console.error('上传失败:', err);
+    })
+  } else if (form.face && !file) { // 说明之前有数据现在没传
+    isFace.value = false
+  } else if (!form.face && !file) {
+    Toast.fail('请先上传照片！');
   }
-  // 点击保存
+  // if(file){ // 文件是否上传了
-  const onClciksave = (file) =>{
+  //   let formData = new FormData()
-    if(form.face && file){ 
+  //   formData.append('face', file)
-      let formData = new FormData()
+  //   formData.append('userId', form.userId)
-      formData.append('file', file)
+  //   formData.append('name', form.name)
-      formData.append('userId', form.userId)
+  //   Toast.loading({ duration: 0, forbidClick: true, message: '保存中', });
-      formData.append('name', form.name)
+  //   uploadApi(formData).then(res =>{
-      Toast.loading({ duration: 0, forbidClick: true, message: '上传中', });
+  //     Toast.success(res.msg);
-      uploadApi(formData).then(res =>{
+  //     form.img = res.data
-        form.face = res.data
+
-        let obj = { userId: form.userId, img: form.face }
+  //   })
-        putUserId(obj).then(response =>{
+  // }else{
-          userList()
+  //   Toast.fail('请先上传照片！');
-          isFace.value = false
+  // }
-          Toast.success(response.msg);
+
-        })
+}
+// 点击用户上传照片或查看
+const onClickUser = (item) => {
+  console.log(item)
+  isFace.value = true
+  form.face = item.img
+  form.userId = item.userId
+  form.name = item.name
+}
+const login = () => {
+  Toast.loading({duration: 0, forbidClick: true, message: '登录中',});
+  dd.getAuthCode({
+    corpId: 'ding03f8e88dde9b426835c2f4657eb6378f',
+    success: (res) => {
+      const {code} = res;
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      getToken(code).then(res => {
+        localStorage.setItem('user', res.data)
+        localStorage.setItem('token', res.data.authorization)
+        Toast.clear()
+        Toast.success('登录成功')
+        deptList()
       })
-    }else if(form.face && !file ){ // 说明之前有数据现在没传
-      isFace.value = false
-    }else if(!form.face && !file){
-      Toast.fail('请先上传照片！');
     }
-    // if(file){ // 文件是否上传了
+  });
-    //   let formData = new FormData()
+}
-    //   formData.append('face', file)
+// 获取部门用户
-    //   formData.append('userId', form.userId)
+const userList = () => {
-    //   formData.append('name', form.name)
+  isLoading.value = false
-    //   Toast.loading({ duration: 0, forbidClick: true, message: '保存中', });
+  getUserListByDept(deptId.value).then(res => {
-    //   uploadApi(formData).then(res =>{
+    isLoading.value = true
-    //     Toast.success(res.msg);
+    userArr.value = res.data
-    //     form.img = res.data
 
-    //   })
+  })
-    // }else{
+}
-    //   Toast.fail('请先上传照片！');
+// 获取部门列表
-    // }
+const deptList = () => {
+  getDept().then(res => {
+    deptArr.value = res.data
+    deptId.value = res.data[0].deptId
+    userList()
+  })
+}
+// 跳转特殊人员
+const onClickGoSpecialCrowd = () => {
+  router.push('/specialCrowd')
+}
 
-  }
+// 同步钉钉用户信息
-  // 点击用户上传照片或查看
+const handleSync = () => {
-  const onClcikUser = (item) =>{
+  syncDeptUsers().then(res => {
-    console.log(item)
+    Toast.success(res.msg)
-    isFace.value = true
+  })
-    form.face = item.img
+}
-    form.userId = item.userId
-    form.name = item.name
-  }
-  const login = () =>{
-    Toast.loading({ duration: 0, forbidClick: true, message: '登录中', });
-    dd.getAuthCode({
-      corpId: 'ding03f8e88dde9b426835c2f4657eb6378f',
-      success: (res) => {
-        const { code } = res;
-        localStorage.removeItem('token');
-				localStorage.removeItem('user');
-				getToken(code).then(data =>{
-          localStorage.setItem('user', data.data)
-          localStorage.setItem('token', data.data.authorization)
-          alert("登录成功："+data.data.authorization)
-          Toast.clear()
-          Toast.success('登录成功')
-          deptList()
-        })
-      }
-    });
-  }
-  // 获取部门用户
-  const userList = () =>{
-    isLoading.value = false
-    getUserListByDept(deptId.value).then(res =>{
-        isLoading.value = true
-        userArr.value = res.data
 
-    })
+if (token.value) {
-  }
+  // localStorage.setItem('token', 123)
-  // 获取部门列表
+  deptList()
-  const deptList = () =>{
+} else {
-    getDept().then(res =>{
+  login()
-      deptArr.value = res.data
+}
-      deptId.value = res.data[0].deptId
-      userList()
-    })
-  }
-  // 跳转特殊人员
-  const onClickGoSpecialCrowd = () =>{
-    router.push('/specialCrowd')
-  }
-
-  // 同步钉钉用户信息
-  const handleSync = () =>{
-    syncDeptUsers().then(res =>{
-      Toast.success(res.msg)
-    })
-  }
-  
-  if(token.value){
-    // localStorage.setItem('token', 123)
-    deptList()
-   }else{
-    login()
-  }
 
 </script>
 
 <style lang="scss" scoped>
-.box{
+.box {
   display: flex;
-  flex-direction:column ;
+  flex-direction: column;
-  header{
+
+  header {
     width: 100%;
-    height: 5.8933rem /* 442/75 */;
+    height: 5.8933rem /* 442/75 */
+  ;
     background: url('../assets/img/shouyebeijing.png') left top/100% 100% no-repeat;
-    h2{
+
-      line-height: 1.12rem /* 84/75 */;
+    h2 {
-      font-size: .7467rem /* 56/75 */;
+      line-height: 1.12rem /* 84/75 */
-      font-family: Source Han Sans CN, Source Han Sans CN;
+    ;
+      font-size: .7467rem /* 56/75 */
+    ;
+      font-family: Source Han Sans CN, serif;
       font-weight: 500;
       color: #FFFFFF;
-      padding: .8533rem /* 64/75 */ 0 0 .64rem /* 48/75 */;
+      padding: .8533rem /* 64/75 */
+      0 0 .64rem /* 48/75 */
+    ;
       box-sizing: border-box;
     }
-    h3{
+
+    h3 {
       display: flex;
-      padding: .32rem /* 24/75 */ 0 0 .7467rem /* 56/75 */;
+      padding: .32rem /* 24/75 */
+      0 0 .7467rem /* 56/75 */
+    ;
       box-sizing: border-box;
-      line-height: .5333rem /* 40/75 */;
+      line-height: .5333rem /* 40/75 */
+    ;
       font-size: $sm-size;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-family: Source Han Sans CN, serif;
       font-weight: 400;
       color: #FFFFFF;
-      img{
+
-        width: .5333rem /* 40/75 */;
+      img {
-        height: .5333rem /* 40/75 */;
+        width: .5333rem /* 40/75 */
-        margin-right: .1067rem /* 8/75 */;
+      ;
+        height: .5333rem /* 40/75 */
+      ;
+        margin-right: .1067rem /* 8/75 */
+      ;
 
       }
     }
-    .entering-box{
+
-      width: 8rem /* 600/75 */;
+    .entering-box {
-      height: 1.6rem /* 120/75 */;
+      width: 8rem /* 600/75 */
-      margin: .6667rem /* 50/75 */ auto 0;
+    ;
+      height: 1.6rem /* 120/75 */
+    ;
+      margin: .6667rem /* 50/75 */
+      auto 0;
       background: #202F44;
-      border-radius: .5333rem /* 40/75 */ .5333rem /* 40/75 */ 0px 0px;
+      border-radius: .5333rem /* 40/75 */
-      padding: 0 .4rem /* 30/75 */  .8rem /* 60/75 */ .4533rem /* 34/75 */;
+      .5333rem /* 40/75 */
+      0 0;
+      padding: 0 .4rem /* 30/75 */
+      .8rem /* 60/75 */
+      .4533rem /* 34/75 */
+    ;
       display: flex;
       align-items: center;
-      img{
+
-        width: .6133rem /* 46/75 */;
+      img {
-        height: .48rem /* 36/75 */;
+        width: .6133rem /* 46/75 */
-        margin-right: .2933rem /* 22/75 */;
+      ;
+        height: .48rem /* 36/75 */
+      ;
+        margin-right: .2933rem /* 22/75 */
+      ;
       }
-      .entering-center{
+
+      .entering-center {
         flex: 1;
         font-size: $md-size;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family: Source Han Sans CN, serif;
         font-weight: 500;
         color: #FFFFFF;
-        p:nth-child(1){
+
-          line-height: .56rem /* 42/75 */;
+        p:nth-child(1) {
-          padding: .2933rem /* 22/75 */ 0 0;
+          line-height: .56rem /* 42/75 */
+        ;
+          padding: .2933rem /* 22/75 */
+          0 0;
         }
-        p:nth-child(2){
+
-          line-height: .4533rem /* 34/75 */;
+        p:nth-child(2) {
+          line-height: .4533rem /* 34/75 */
+        ;
           font-size: $sm-size;
           font-weight: 400;
           color: #B6B7B8;
         }
       }
-      .entering-button{
+
-        width: 1.4667rem /* 110/75 */;
+      .entering-button {
-        height: .6933rem /* 52/75 */;
+        width: 1.4667rem /* 110/75 */
+      ;
+        height: .6933rem /* 52/75 */
+      ;
         background: #F6C976;
-        border-radius: .5333rem /* 40/75 */;
+        border-radius: .5333rem /* 40/75 */
+      ;
         outline: none;
         font-size: $size26;
-        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-family: Source Han Sans CN, serif;
         font-weight: 500;
         color: #202F44;
         border: none;
       }
     }
   }
-  .content{
+
+  .content {
     width: 100%;
     background: #FFFFFF;
-    border-radius:  .5333rem /* 40/75 */ .5333rem /* 40/75 */ 0px 0px;
+    border-radius: .5333rem /* 40/75 */
+    .5333rem /* 40/75 */
+    0 0;
     margin-top: -20px;
     overflow: auto;
     flex: 1;
     display: flex;
-    flex-direction: column ;
+    flex-direction: column;
-    h2{
+
-      padding: .4267rem /* 32/75 */ .48rem /* 36/75 */;
+    h2 {
+      padding: .4267rem /* 32/75 */
+      .48rem /* 36/75 */
+    ;
       box-sizing: border-box;
-      line-height: .8rem /* 60/75 */;
+      line-height: .8rem /* 60/75 */
-      font-size: .5333rem /* 40/75 */;
+    ;
-      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-size: .5333rem /* 40/75 */
+    ;
+      font-family: Source Han Sans CN, serif;
       font-weight: 500;
       color: #222222;
     }
-    .content-box{
+
+    .content-box {
       overflow: auto;
       display: flex;
       flex: 1;
-      .nav{
+
-        width: 3.6533rem /* 274/75 */;
+      .nav {
+        width: 3.6533rem /* 274/75 */
+      ;
         height: 100%;
         // width: 360px;
-        padding: 0 0 0 .4rem /* 30/75 */;
+        padding: 0 0 0 .4rem /* 30/75 */
+      ;
         box-sizing: border-box;
         display: flex;
         align-content: flex-start;
         // flex-direction: column;
         flex-wrap: wrap;
 
-        border-right: .0267rem /* 2/75 */  dashed #D9D9D9;
+        border-right: .0267rem /* 2/75 */
+        dashed #D9D9D9;
 
-        .li{
+        .li {
-          display:block;
+          display: block;
 
           box-sizing: border-box;
-          height: .9067rem /* 68/75 */;
+          height: .9067rem /* 68/75 */
-          line-height: .9067rem /* 68/75 */;
+        ;
-          border-radius: 0px .8rem /* 60/75 */ .8rem /* 60/75 */ 0px ;
+          line-height: .9067rem /* 68/75 */
-          padding: 0  .48rem /* 36/75 */ 0 .24rem /* 18/75 */;
+        ;
+          border-radius: 0 .8rem /* 60/75 */
+          .8rem /* 60/75 */
+          0;
+          padding: 0 .48rem /* 36/75 */
+          0 .24rem /* 18/75 */
+        ;
 
-          box-sizing: border-box;
-          box-sizing: border-box;
           font-size: $md-size;
-          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-family: Source Han Sans CN, serif;
           font-weight: 400;
           color: #5F6583;
-          margin-bottom: .28rem /* 21/75 */;
+          margin-bottom: .28rem /* 21/75 */
+        ;
         }
-        .active{
+
+        .active {
           color: #FFFFFF;
           background: #448CF7;
 
         }
       }
-      .user-content{
+
+      .user-content {
         flex: 1;
         height: 100%;
         overflow: auto;
 
-        .user-scroll{
+        .user-scroll {
           width: 100%;
           // height: 100%;
         }
 
-        .user-list{
+        .user-list {
           display: flex;
           align-items: center;
-          padding: 0 .4rem /* 30/75 */;
+          padding: 0 .4rem /* 30/75 */
+        ;
           box-sizing: border-box;
-          margin-bottom: .5333rem /* 40/75 */;
+          margin-bottom: .5333rem /* 40/75 */
-          .img-box{
+        ;
-            width: .9867rem /* 74/75 */;
+
-            height: .9867rem /* 74/75 */;
+          .img-box {
-            border-radius:.1333rem /* 10/75 */;
+            width: .9867rem /* 74/75 */
+          ;
+            height: .9867rem /* 74/75 */
+          ;
+            border-radius: .1333rem /* 10/75 */
+          ;
 
             background: #D9D9D9;
-            img{
+
+            img {
               display: block;
               width: 100%;
               height: 100%;
-              border-radius:.1333rem /* 10/75 */;
+              border-radius: .1333rem /* 10/75 */
+            ;
             }
 
           }
 
-          .name{
+          .name {
-            padding: 0 0 0 .2933rem /* 22/75 */;
+            padding: 0 0 0 .2933rem /* 22/75 */
+          ;
             box-sizing: border-box;
             flex: 1;
-            line-height: .9867rem /* 74/75 */;
+            line-height: .9867rem /* 74/75 */
+          ;
             font-size: $size30;
-            font-family: Source Han Sans CN, Source Han Sans CN;
+            font-family: Source Han Sans CN, serif;
             font-weight: 400;
             color: #4B4C4E;
           }
-          .button{
+
-            width: 1.2267rem /* 92/75 */;
+          .button {
-            height: .6667rem /* 50/75 */;
+            width: 1.2267rem /* 92/75 */
+          ;
+            height: .6667rem /* 50/75 */
+          ;
             background: #EDEDED;
-            border-radius:.1333rem /* 10/75 */;
+            border-radius: .1333rem /* 10/75 */
+          ;
             border: none;
             outline: none;
             font-size: $sm-size;
-            font-family: Source Han Sans CN, Source Han Sans CN;
+            font-family: Source Han Sans CN, serif;
             font-weight: 400;
             color: #999999;
             box-sizing: border-box;
             text-align: center;
-            line-height: .6667rem /* 50/75 */;
+            line-height: .6667rem /* 50/75 */
+          ;
           }
-          .active-button{
+
+          .active-button {
             background: #EBFCF4;
-            border: .0267rem /* 2/75 */ solid #30BF78;
+            border: .0267rem /* 2/75 */
+            solid #30BF78;
             color: #30BF78;
 
           }

vite.config.js

@@ -23,17 +23,17 @@ export default defineConfig({
     host: "0.0.0.0", //设置地址：http://localhost
     port: 4000, // 设置服务启动端口号
     hmr: false, // 关闭热更新
-    // open: true, // 设置服务启动时是否自动打开浏览器
+    open: true, // 设置服务启动时是否自动打开浏览器
-    // cors: true, // 允许跨域
+    cors: true, // 允许跨域
-    // proxy: {
+    proxy: {
-    //   '/api': {
+      '/dev-api': {
-    //     target: 'http://dining.lzyyj.com/prod-api',//代理的地址
+        target: 'http://localhost:8195',//代理的地址
-    //     changeOrigin: true,
+        changeOrigin: true,
-    //     // 路径重写 pathRewrite无效使用rewrite
+        // 路径重写 pathRewrite无效使用rewrite
-    //     // pathRewrite: { '/api': '' // 用'/api'代替target里面的地址 },
+        // pathRewrite: { '/api': '' // 用'/api'代替target里面的地址 },
-    //     rewrite: path => path.replace(/^\/api/, '')
+        rewrite: path => path.replace(/^\/dev-api/, '')
-    //   }
+      }
-    // }
+    }
   },
   resolve: {
     alias: {