mod:设置和主图设置

electron/controller/socket.js

@@ -19,29 +19,20 @@ class SocketController extends Controller {
     const win = CoreWindow.getMainWindow()
     // 监听连接成功事件
     socket.on('open', () => {
-      console.log('socket open')
-   //   this.sendPing(); // 连接成功后发送 ping
-    //  win.webContents.send('controller.socket.connect', true);
       return true;
     });
 
     // 监听消息事件
     socket.on('message', (data) => {
-      console.log('socket message')
-      Log.info('Received:', data.toString());
       win.webContents.send('controller.socket.message', data.toString());
     });
 
     // 监听连接关闭事件
     socket.on('close', () => {
-      console.log('socket close')
-      Log.info('Disconnected from socket server');
     });
 
     // 监听错误事件
     socket.on('error', (err) => {
-      console.log('socket error')
-      Log.error('socketError:', err);
     });
 
   }
@@ -60,13 +51,9 @@ class SocketController extends Controller {
    */
   sendMessage(message) {
     // 检查连接状态
-    console.log('sendMessage');
-    console.log(message);
-    console.log(typeof socket);
     if (socket?.readyState === WebSocket.OPEN) {
       socket.send(message); // 使用 send() 发送
     } else {
-      Log.error('socket未连接或未就绪');
     }
   }
 
@@ -74,7 +61,6 @@ class SocketController extends Controller {
    * 断开连接
    */
   disconnect() {
-    console.log('disconnect');
     if (socket) {
       socket.close(); // 使用 close() 方法
       socket = null;

electron/controller/utils.js

@@ -0,0 +1,135 @@
+'use strict';
+
+const { Controller } = require('ee-core');
+const { shell  } = require('electron');
+const { dialog } = require('electron');
+const fs = require('fs');
+const path = require('path');
+const CoreWindow = require('ee-core/electron/window');
+const { BrowserWindow, Menu } = require('electron');
+const errData = {
+  msg :'请求失败，请联系管理员',
+  code:999
+}
+
+
+/**
+ * example
+ * @class
+ */
+class UtilsController extends Controller {
+
+  constructor(ctx) {
+    super(ctx);
+  }
+
+
+  /**
+   * 所有方法接收两个参数
+   * @param args 前端传的参数
+   * @param event - ipc通信时才有值。详情见：控制器文档
+   */
+
+  /**
+   * upload
+   */
+  async shellFun (params) {
+    shell[params.action](params.params)
+  }
+
+
+  async openMain (config) {
+    if( this.app.electron[config.id]) return;
+    const win = new BrowserWindow(config);
+    win.loadURL(config.url); // 设置窗口的 URL
+    // 监听窗口关闭事件
+    win.on('close', () => {
+      delete this.app.electron[config.id]; // 删除窗口引用
+    });
+
+    this.app.electron[config.id] = win ;
+
+  }
+
+  async openDirectory(optiops={
+    title:"选择文件夹"
+    }){
+    const filePaths = dialog.showOpenDialogSync({
+      title:optiops.title || '选择文件夹',
+      properties: ['openDirectory']
+    })
+    if(filePaths[0]) return filePaths[0];
+    return filePaths
+  }
+
+  async openImage(
+      optiops= {
+        title:"选择图片",
+        filters:[
+          { name: '支持JPG,png,gif', extensions: ['jpg','jpeg','png'] },
+        ],
+      }
+   ){
+
+        const filePaths = dialog.showOpenDialogSync({
+          title:optiops.title || '选择图片',
+          properties:['openFile'],
+          filters:optiops.filters || [
+            { name: '支持JPG,png,gif', extensions: ['jpg','jpeg','png'] },
+          ]
+        })
+        const filePath = filePaths[0];
+        const fileBuffer = fs.readFileSync(filePath);
+        const base64Image = fileBuffer.toString('base64');
+    // 获取文件扩展名
+    const extension = path.extname(filePath).toLowerCase().replace('.', '');
+
+    // 根据扩展名确定 MIME 类型
+    let mimeType = '';
+    switch (extension) {
+      case 'jpg':
+      case 'jpeg':
+        mimeType = 'image/jpeg';
+        break;
+      case 'png':
+        mimeType = 'image/png';
+        break;
+      case 'gif':
+        mimeType = 'image/gif';
+        break;
+      default:
+        mimeType = 'application/octet-stream'; // 默认 MIME 类型
+        break;
+    }
+
+    // 构建 data URL
+    const dataUrl = `data:${mimeType};base64,${base64Image}`;
+        return {
+          filePath:filePath,
+          base64Image:dataUrl
+        };
+  }
+  async openFile(optiops= {
+    title:"选择文件",
+    filters:[
+      { name: '支持JPG', extensions: ['jpg','jpeg'] },
+    ],
+  }){
+
+    const filePaths = dialog.showOpenDialogSync({
+      title:optiops.title || '选择文件',
+      properties: ['openFile'],
+      filters: optiops.filters || [
+        { name: '选择文件' },
+      ]
+    })
+    if(filePaths[0]) return filePaths[0];
+    return filePaths
+
+  }
+
+
+}
+
+UtilsController.toString = () => '[class ExampleController]';
+module.exports = UtilsController;

frontend/src/components/upload/index.vue

@@ -1,4 +1,15 @@
 <template>
+
+  <div class="flex col">
+    <el-icon>
+      <Plus />
+    </el-icon>
+    <div class="add-text" @click="openImage">添加</div>
+  </div>
+  <img v-if="base64Image" :src="base64Image">
+  <div class="input" v-if="filePath">{{filePath}}</div>
+
+<!--
   <el-upload class="upload-warp" action="#" list-type="picture-card" :http-request="upload">
 
     <div class="flex col">
@@ -31,7 +42,7 @@
 
   <el-dialog v-model="dialogVisible">
     <img w-full :src="dialogImageUrl" alt="Preview Image" />
-  </el-dialog>
+  </el-dialog>-->
 </template>
 <script lang="ts" setup>
 import { ref, defineEmits } from 'vue'
@@ -41,6 +52,9 @@ import { imagesUpload } from '@/utils/appconfig'
 import { ElMessage } from 'element-plus'
 import * as  userApi from '@/apis/user'
 
+import client from "@/stores/modules/client";
+import icpList from '@/utils/ipc'
+const clientStore = client();
 // 定义自定义事件
 const emit = defineEmits(['input']);
 
@@ -103,6 +117,21 @@ const upload = async (params) => {
   }
   emit('input', res.data.url)
 }
+
+
+const base64Image = ref('')
+const filePath = ref('')
+function openImage(){
+
+  clientStore.ipc.removeAllListeners(icpList.utils.openImage);
+  clientStore.ipc.send(icpList.utils.openImage);
+  clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
+    console.log(result.base64Image);
+    filePath.value = result.filePath
+    base64Image.value = result.base64Image
+    clientStore.ipc.removeAllListeners(icpList.utils.openImage);
+  })
+}
 </script>
 
 

frontend/src/router/index.ts

@@ -6,7 +6,7 @@ import { authGuard } from './plugins/authGuard'
 const routes: RouteRecordRaw[] = [
     {
         path: "/",
-        redirect: "/photography/check"
+        redirect: "/home"
     },
     {
         path: "/home",

frontend/src/utils/ipc.ts

@@ -17,7 +17,14 @@ const icpList = {
             camControl: 'controller.socket.check.camControl',
             camera: 'controller.socket.check.camera',
         }
-    }
+    },
+    utils:{
+        openMain: 'controller.utils.openMain',
+        shellFun: 'controller.utils.shellFun',
+        openDirectory:"controller.utils.openDirectory",
+        openImage:"controller.utils.openImage",
+        openFile:"controller.utils.openFile"
+    },
 }
 
 

frontend/src/views/Home/index.vue

@@ -12,6 +12,7 @@
       <img :src="preview" width="500px" height="500px"/>
   </template>
 
+<!--
     <el-button @click="showVideo">实时预览</el-button>
     <el-button @click="hideVideo">关闭预览</el-button>
     <el-button @click="takePictures">拍照</el-button>
@@ -19,12 +20,16 @@
     <el-button @click="connect_mcu">发送设备连接检测请求</el-button>
     <el-button @click="connect_bluetooth">发送遥控器请求</el-button>
     <el-button @click="socketDisconnect">socket 断开</el-button>
-
-
     <el-button @click="loginError">登录失败</el-button>
     <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="info"  @click="openSeeting">打开设置</el-button>
+    <el-button type="info"  @click="openTplSeeting">打开主图和详情设置</el-button>
     <router-link
       :to="{
           name:'PhotographyCheck'
@@ -63,7 +68,6 @@ import client from "@/stores/modules/client";
 import  icpList from '@/utils/ipc'
 import socket from "@/stores/modules/socket";
 const clientStore = client();
-console.log(icpList);
 
 function showLoginDialog() {
   dialogVisible.value = true;
@@ -232,6 +236,33 @@ function socketDisconnect(){
     socketStore.disconnectSocket()
   }
 }
+
+
+
+function openSeeting(){
+  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
+  let params = {
+    title: '设置',
+    width: 900,
+    height: 630,
+    frame: true,
+    id:"seeting",
+    url:"http://localhost:3000/setting"
+  }
+  clientStore.ipc.send(icpList.utils.openMain,params);
+}
+function openTplSeeting(){
+  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
+  let params = {
+    title: '主图和详情设置',
+    width: 900,
+    height: 650,
+    frame: true,
+    id:"photographyDetail",
+    url:"http://localhost:3000/photography/detail"
+  }
+  clientStore.ipc.send(icpList.utils.openMain,params);
+}
 </script>
 
 <style scoped>

frontend/src/views/Photography/detail.vue

@@ -47,10 +47,12 @@
         <el-row :gutter="20">
           <el-col :span="1"></el-col>
           <el-col :span="4">商品基础资料EXCEL文件选择：</el-col>
-          <el-col :span="18">
+          <el-col :span="15">
             <el-input type="textarea" v-model="excelFilePath" />
           </el-col>
-          <el-col :span="1"></el-col>
+          <el-col :span="3">
+            <el-button class="generate-button button--primary1" type="primary" @click="selectExcel">选择文件夹</el-button>
+          </el-col>
 
         </el-row>
       </div>
@@ -70,6 +72,12 @@ import { Select } from '@element-plus/icons-vue'
 
 import upload from '@/components/upload'
 
+
+import client from "@/stores/modules/client";
+import icpList from '@/utils/ipc'
+const clientStore = client();
+
+
 // 模拟数据
 const templates = [
   { id: 1101, templateId: '某某模版编号1', preview: '...' },
@@ -124,6 +132,20 @@ const generate = () => {
   console.log('开始生成');
   // 这里添加实际生成主图和详情的逻辑
 };
+
+function selectExcel(){
+  clientStore.ipc.removeAllListeners(icpList.utils.openFile);
+  clientStore.ipc.send(icpList.utils.openFile,{
+    filters: [
+      { name: '支持xls,xlsx', extensions: ['xlsx','xls'] }
+    ],
+    title:"选择基础文件资料"
+  });
+  clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
+    excelFilePath.value = result
+    clientStore.ipc.removeAllListeners(icpList.utils.openFile);
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -237,4 +259,4 @@ const generate = () => {
     background-color: #1677FF;
   }
 }
-</style>
+</style>

frontend/src/views/Setting/index.vue

@@ -34,7 +34,7 @@
                   </div>
                 </div>
             </div>
-            <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>
+<!--            <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>-->
           </div>
           <div class="selectBox" v-if="activeIndex === 0">
                 <div class="form-item">
@@ -191,15 +191,19 @@
 
 <script setup>
 // 这里可以添加Vue组件的逻辑
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { onMounted, watch } from 'vue';
 
+import client from "@/stores/modules/client";
+import icpList from '@/utils/ipc'
+const clientStore = client();
+
 const route = useRoute();
 const router = useRouter();
 const folderPath = ref('');
 const activeIndex = ref(0);
-const formData = ref({
+const formData = reactive({
   captureOneFolder: '',
   mainImageSize: '',
   imageFormat: '',
@@ -328,37 +332,12 @@ onMounted(() => {
 });
 
 const selectFolder = () => {
-  // 这里可以添加选择文件夹的逻辑
-  // 由于浏览器安全限制，网页应用无法直接访问本地文件系统
-  // 这里我们可以使用一个模拟的文件选择对话框
-  
-  // 创建一个隐藏的input元素用于选择文件夹
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.webkitdirectory = true; // 允许选择文件夹而不是文件
-  input.directory = true; // 非标准属性，某些浏览器支持
-  
-  // 监听文件选择事件
-  input.onchange = (event) => {
-    const files = event.target.files;
-    if (files && files.length > 0) {
-      // 获取选择的文件夹路径（仅显示第一个文件的目录）
-      const path = files[0].webkitRelativePath.split('/')[0];
-      folderPath.value = path;
-      
-      // 更新表单数据中的captureOneFolder字段
-      formData.value.captureOneFolder = path;
-      
-      // 这里可以添加更新UI或发送到后端的逻辑
-      console.log('选择的文件夹:', path);
-      
-      // 如果需要，可以在这里添加API调用来保存路径到后端
-      // 例如：axios.post('/api/settings/folder', { path: folderPath.value });
-    }
-  };
-  
-  // 触发文件选择对话框
-  input.click();
+  clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
+  clientStore.ipc.send(icpList.utils.openDirectory);
+  clientStore.ipc.on(icpList.utils.openDirectory, async (event, result) => {
+    formData.captureOneFolder = result
+    clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
+  })
 }
 const saveSetting = () => {
   console.log(formData.value);
@@ -443,7 +422,7 @@ body {
 .select-wrapper {
   position: relative;
   width: 200px;
-  :deep(.el-input__inner){ 
+  :deep(.el-input__inner){
     border-radius: 6px;
   }
 }
@@ -493,4 +472,4 @@ body {
   justify-content: center;
   padding-bottom: 30px;
 }
-</style>
+</style>