fix

frontend/src/router/index.ts

@@ -10,6 +10,11 @@ const routes: RouteRecordRaw[] = [
         path: "/home",
         name: "home",
         component: () => import("@/views/Home/index.vue"),
+    },
+    {
+        path: "/setting",
+        name: "setting",
+        component: () => import("@/views/Setting/index.vue"),
     }
 ];
 

frontend/src/views/Setting/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="container">
+    <nav class="settings-nav">
+      <div class="nav-item active">
+        <i class="fas fa-cog"></i>
+        <span>基础配置</span>
+      </div>
+      <div class="nav-item">
+        <i class="fas fa-camera"></i>
+        <span>拍照设置</span>
+      </div>
+      <div class="nav-item">
+        <i class="fas fa-ellipsis-h"></i>
+        <span>其他设置</span>
+      </div>
+      <div class="nav-item">
+        <i class="fas fa-gamepad"></i>
+        <span>遥控器设置</span>
+      </div>
+    </nav>
+
+    <div class="form-container">
+      <div class="form-item">
+        <label>canpture_one图片输出文件夹：</label>
+        <div class="input-group">
+           <button class="bg-primary" @click="selectFolder">
+            选择文件夹
+          </button>
+        </div>
+      </div>
+      <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>
+
+      <div class="form-item">
+        <label>主图尺寸：</label>
+        <div class="select-wrapper">
+          <select>
+            <option>1600</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-item">
+        <label>图片输出格式：</label>
+        <div class="select-wrapper">
+          <select>
+            <option>png</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-item">
+        <label>图片锐化：</label>
+        <div class="select-wrapper">
+          <select>
+            <option>1.0</option>
+          </select>
+        </div>
+      </div>
+      <div class="text-center mt-8">
+        <button class="bg-gradient-to-r from-primary">
+          保存
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 这里可以添加Vue组件的逻辑
+import { ref } from 'vue';
+
+const folderPath = ref('');
+
+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;
+      
+      // 这里可以添加更新UI或发送到后端的逻辑
+      console.log('选择的文件夹:', path);
+      
+      // 如果需要，可以在这里添加API调用来保存路径到后端
+      // 例如：axios.post('/api/settings/folder', { path: folderPath.value });
+    }
+  };
+  
+  // 触发文件选择对话框
+  input.click();
+}
+
+</script>
+
+<style scoped>
+body {
+  min-height: 1024px;
+  background: #EAECED;
+}
+.container {
+  margin: 0 auto;
+  background: #EAECED;
+}
+.settings-nav {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  padding: 30px 0;
+  background: #EDEFF0;
+}
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  color: #666;
+  transition: all 0.3s;
+}
+.nav-item.active {
+  color: #4080ff;
+}
+.nav-item i {
+  font-size: 24px;
+  margin-bottom: 8px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 8px;
+}
+.nav-item.active i {
+  background: #edf2ff;
+}
+.form-container {
+  border-radius: 12px;
+  padding: 30px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+.form-item {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+}
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  color: #333;
+  font-weight: 500;
+}
+.input-group {
+  display: flex;
+  gap: 12px;
+}
+.input-group input {
+  flex: 1;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 14px;
+}
+.select-wrapper {
+  position: relative;
+  width: 200px;
+}
+.select-wrapper select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  appearance: none;
+  background: #DFE2E3;
+  font-size: 14px;
+}
+.select-wrapper::after {
+  content: '\f107';
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #666;
+}
+.error-text {
+  color: #dc2626;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.from-primary{
+    color: #FFFFFF;
+    background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
+}
+</style>