Merge branch 'dev-frontend' of http://gitlab.pubdata.cn/liangyibo/CameraMachine into dev-frontend

frontend/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "22.13.5",
+    "@types/crypto-js": "4.1.1",
     "@vitejs/plugin-vue": "5.2.1",
     "@types/crypto-js": "^4.1.1",
     "@vue/tsconfig": "0.7.0",

frontend/src/App.vue

@@ -1,11 +1,34 @@
-<script setup lang="ts">
-</script>
 
 <template>
-  <router-view
-  >
-  </router-view>
+  <div id="app">
+
+    <router-view v-slot="{ Component }">
+      <keep-alive :include="keepAliveIncludes">
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
+
+
+  </div>
 </template>
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import Login from '@/components/login/index.vue';
+import useUserInfo from "@/stores/modules/user";
+const useUserInfoStore = useUserInfo();
+
+const router = useRouter()
+const route = useRoute()
+/* keep alive 的路由名称 */
+const keepAliveIncludes = router
+    .getRoutes()
+    .filter((router) => router.meta?.keepAlive)
+    .map((router) => router.name as string)
+
+
+
+</script>
+
 
 <style scoped>
 .logo {

frontend/src/components/login/index.vue

@@ -5,7 +5,7 @@
       width="354px"
       custom-class="login-dialog"
       :close-on-click-modal="false"
-      :show-close="true"
+      :show-close="false"
       @close="emit('update:dialogVisible',false)"
     >
     <div class="login-box">
@@ -56,7 +56,7 @@
               v-model="loginForm.password"
               placeholder="请输入密码"
               type="password"
-            style="width: 270px;"
+               style="width: 270px;"
               show-password
               maxlength="30"
               tabindex="2"
@@ -84,8 +84,8 @@
               autocomplete="off"
             >
               <template #append>
-                <el-button 
-                  :disabled="isCodeSending" 
+                <el-button
+                  :disabled="isCodeSending"
                   @click="sendVerificationCode"
                 >
                   {{ codeButtonText }}
@@ -179,16 +179,16 @@ const sendVerificationCode = () => {
     ElMessage.warning('请先输入手机号')
     return
   }
-  
+
   sendCode({
     phone: loginForm.username
   }).then(() => {
     isCodeSending.value = true
     countdown.value = 60
-    
+
   // 这里应该调用发送验证码API
   // await sendCode(loginForm.username)
-  
+
   const timer = setInterval(() => {
     countdown.value--
     if (countdown.value <= 0) {
@@ -265,7 +265,7 @@ const sendVerificationCode = () => {
     width: 100%;
     margin-top: 10px;
     background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
-    
+
   }
   :deep(.el-form-item) + .login-button {
     margin-top: 20px;
@@ -377,4 +377,4 @@ const sendVerificationCode = () => {
       color: #2FB0FF;
     }
 }
-</style>
+</style>

frontend/src/router/index.ts

@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
+import { authGuard } from './plugins/authGuard'
+
 
 const routes: RouteRecordRaw[] = [
     {
@@ -10,6 +12,9 @@ const routes: RouteRecordRaw[] = [
         path: "/home",
         name: "home",
         component: () => import("@/views/Home/index.vue"),
+        meta: {
+            noAuth: true,
+        },
     },
     {
         path: "/setting",
@@ -52,5 +57,6 @@ const router = createRouter({
     routes
 });
 
+authGuard(router)
 
 export default router;

frontend/src/router/plugins/authGuard.ts

@@ -0,0 +1,26 @@
+import { Router, useRoute } from 'vue-router'
+import useUserInfo from "@/stores/modules/user";
+const route = useRoute()
+/**
+ * 除了注册页，当没有 token 则跳转至注册页
+ * @param router
+ */
+
+
+export function authGuard(router: Router) {
+  router.beforeEach((to, from, next) => {
+    /* 跳过路由守卫 */
+
+    const useUserInfoStore = useUserInfo();
+    if (useUserInfoStore.token /* 已登录 */) {
+      return next()
+    } else {
+      if(to.meta.noAuth)  return next()
+      useUserInfoStore.updateLoginShow(true)
+    }
+
+
+
+    return next()
+  })
+}

frontend/src/stores/modules/user.ts

@@ -4,16 +4,18 @@ import { defineStore } from 'pinia';
 
 const useUserInfo = defineStore('userInfo', {
     state: () => ({
-        userInfo: {
-            account_name: 'John Doe',
-            phone:"18679381234"
-        },
+        token: '',
+        loginShow:false,
+        userInfo: {},
     }),
     actions: {
         // 添加必要的 actions
         updateUserInfo(data: any ) {
             this.userInfo = data;
-        }
+        },
+        updateLoginShow(data: boolean) {
+            this.loginShow = data;
+        },
     },
     getters: {
         // 添加必要的 getters
@@ -24,7 +26,7 @@ const useUserInfo = defineStore('userInfo', {
     persist: {
         key: 'user-info',
         storage: localStorage,
-        paths: ['userInfo',]
+        paths: ['userInfo','token']
     }
 });
 

frontend/src/utils/oss.ts

@@ -1,7 +1,7 @@
 /**
  * oss resize 参数
  * 详情见 https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.751.7434663c1Ne07e
- *
+ *     ,/
  * oss watermark 参数
  * 详情见 https://help.aliyun.com/document_detail/44957.html
  *

frontend/src/views/Home/index.vue

@@ -23,7 +23,14 @@
     <el-button type="primary" @click="loginIn">登录成功</el-button>
     <el-button type="success" @click="showLoginDialog">登录</el-button>
     <el-button type="info" @click="checkVisible = true">软件检查</el-button>
-    <el-button type="warning">Warning</el-button>
+    <router-link
+      :to="{
+          name:'PhotographyCheck'
+      }"
+    >
+      <el-button type="warning">拍摄物体</el-button>
+    </router-link>
+
     <el-button type="danger">Danger</el-button>
     <hardware-check v-model="checkVisible" @confirm="onCheckComplete"></hardware-check>
     <Login v-model:dialogVisible="dialogVisible" @login-success="handleLoginSuccess"/>
@@ -187,7 +194,6 @@ function socketConnect(){
     })
 
     clientStore.ipc.on(icpList.socket.message, async (event, result) => {
-      console.log('message');
       console.log(result);
     })
   }

frontend/src/views/Photography/check.vue

@@ -17,12 +17,12 @@
         <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
       </div>
       <div v-if="!imageUrl" class="action-button flex cente">
-        <div @click="toPhoto" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
+        <div @click="takePictures" class="check-button  button--primary1 flex-col"><span class="button-text">拍照检查</span>
         </div>
       </div>
 
       <div v-else class="action-button flex center">
-        <div @click="imageUrl = ''" class="check-button  button--white flex-col">
+        <div @click="takePictures" class="check-button  button--white flex-col">
           <span class="button-text">重新拍照检查</span>
         </div>
         <router-link class="mar-left-20 " :to="{
@@ -37,22 +37,30 @@
     </div>
   </div>
 </template>
-<script>
-const url = 'https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png'
-export default {
-  data() {
-    return {
-      imageUrl: '',
-
-    };
-  },
-  methods: {
-    toPhoto() {
-      this.imageUrl = url
-    }
-
+<script setup lang="ts">
+import client from "@/stores/modules/client";
+import icpList from '@/utils/ipc'
+const clientStore = client();
+console.log(icpList);
+import { ref } from 'vue'
+const url = ref('https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png')
+const imageUrl = ref('')
+const previewKey = ref(0)
+const preview = ref('http://localhost:5513/preview.jpg')
+
+
+function takePictures() {
+  if (clientStore.isClient) {
+    clientStore.ipc.removeAllListeners(icpList.camera.takePictures);
+    clientStore.ipc.send(icpList.camera.takePictures);
+    clientStore.ipc.on(icpList.camera.takePictures, async (event, result) => {
+      setTimeout(() => {
+        previewKey.value++;
+        preview.value = `http://localhost:5513/preview.jpg?key=${previewKey.value}`
+      }, 1000)
+    })
   }
-};
+}
 </script>
 <style scoped lang="scss">
 .check-page {
@@ -117,7 +125,8 @@ export default {
           width: 600px;
           margin: 4px 0 0 16px;
           position: relative;
-          .camera-description{
+
+          .camera-description {
             position: absolute;
             bottom: 20px;
             width: 60%;

frontend/src/views/Photography/shot.vue

@@ -402,12 +402,10 @@ const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9c
               margin: 7px 0 42px 83px;
 
               .input-item {
-                ::v-deep {
-                  .el-input__inner {
+                :deep(.el-input__inner){ 
                     height: 36px;
                     line-height: 36px;
                   }
-                }
               }
 
             }

frontend/src/views/Setting/index.vue

@@ -443,7 +443,7 @@ body {
 .select-wrapper {
   position: relative;
   width: 200px;
-  ::v-deep(.el-input__inner){ 
+  :deep(.el-input__inner){ 
     border-radius: 6px;
   }
 }