CameraMachine/frontend/src/views/Setting/index.vue

<template>
  <div class="container">
    <nav class="settings-nav">
      <div class="nav-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">
        <img src="@/assets/images/setting/icon1.png" class="nav-icon" v-if="activeIndex !== 0"/>
        <img src="@/assets/images/setting/icon1a.png" class="nav-icon" v-else/>
        <span>基础配置</span>
      </div>
      <div class="nav-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">
        <img src="@/assets/images/setting/icon2.png" class="nav-icon" v-if="activeIndex !== 1"/>
        <img src="@/assets/images/setting/icon2a.png" class="nav-icon" v-else/>
        <span>拍照设置</span>
      </div>
      <div class="nav-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">
        <img src="@/assets/images/setting/icon3.png" class="nav-icon" v-if="activeIndex !== 2"/>
        <img src="@/assets/images/setting/icon3a.png" class="nav-icon" v-else/>
        <span>其他设置</span>
      </div>
      <div class="nav-item" :class="{'active': activeIndex === 3}" @click="activeIndex = 3">
        <img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 3"/>
        <img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
        <span>遥控器设置</span>
      </div>
    </nav>

    <div class="form-container">
        <div class="captureBox" v-if="activeIndex === 0">
            <div class="form-item">
                <label>canpture_one图片输出文件夹：</label>
                <div class="input-group">
                  <el-input style="width: 430px;" type="textarea" :rows="2" v-model="formData.captureOneFolder" readonly></el-input>
                  <div class="select-btn" @click="selectFolder">
                   <img src="@/assets/images/setting/folder.png" /> 选择文件夹
                  </div>
                </div>
            </div>
            <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>
          </div>
          <div class="selectBox" v-if="activeIndex === 0">
                <div class="form-item">
                    <label>主图尺寸：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.mainImageSize" placeholder="请选择">
                      <el-option v-for="item in mainImageSizeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>图片输出格式：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.imageFormat" placeholder="请选择">
                      <el-option v-for="item in imageFormatList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>图片锐化：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.imageSharpening" placeholder="请选择">
                      <el-option v-for="item in imageSharpeningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
        </div>
          <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 1">
                <div class="form-item">
                    <label>重复拍摄警告：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.repeatWarning" placeholder="请选择">
                      <el-option v-for="item in repeatWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>单次张数警告：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.singleWarning" placeholder="请选择">
                      <el-option v-for="item in singleWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>累计拍照警告：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.totalWarning" placeholder="请选择">
                      <el-option v-for="item in totalWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>对焦时间：</label>
                    <div class="select-wrapper">
                      <el-input v-model="formData.focusTime" placeholder="请输入">
                        <template #append>秒</template>
                      </el-input>
                    </div>
                </div>
                <div class="form-item">
                    <label>拍照停留：</label>
                    <div class="select-wrapper">
                      <el-input v-model="formData.photoTime" placeholder="请输入">
                        <template #append>秒</template>
                      </el-input>
                    </div>
                </div>
        </div>
          <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 2">
                <div class="form-item">
                    <label>产品类型：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.productType" placeholder="请选择">
                      <el-option v-for="item in productTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>默认抠图模式：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.defaultCutoutMode" placeholder="请选择">
                      <el-option v-for="item in defaultCutoutModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>设备运动速度：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.deviceSpeed" placeholder="请选择">
                      <el-option v-for="item in deviceSpeedList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>运行模式：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.runMode" placeholder="请选择">
                      <el-option v-for="item in runModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
          </div>
          <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 3">
                <div class="form-item">
                    <label>接收器：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.receiver" placeholder="请选择">
                      <el-option v-for="item in receiverList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>左：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.left" placeholder="请选择">
                      <el-option v-for="item in leftList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>右：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.right" placeholder="请选择">
                      <el-option v-for="item in rightList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>上：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.up" placeholder="请选择">
                      <el-option v-for="item in upList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <label>下：</label>
                    <div class="select-wrapper">
                    <el-select v-model="formData.down" placeholder="请选择">
                      <el-option v-for="item in downList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    </div>
                </div>
          </div>
      <div class="text-center mt-8">
        <button class="bg-gradient-to-r from-primary" @click="saveSetting">
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加Vue组件的逻辑
import { ref } from 'vue';

const folderPath = ref('');
const activeIndex = ref(0);
const formData = ref({
  captureOneFolder: '',
  mainImageSize: '',
  imageFormat: '',
  imageSharpening: '',
  repeatWarning: '',
  singleWarning: '',
  totalWarning: '',
  focusTime: '',
  photoTime: '',
  productType: '',
  defaultCutoutMode: '',
  deviceSpeed: '',
  runMode: '',
  receiver: '',
  left: '',
  right: '',
  up: '',
  down: '',
});
const mainImageSizeList = ref([
  { label: '1600', value: '1600' },
  { label: '1200', value: '1200' },
  { label: '1024', value: '1024' },
  { label: '800', value: '800' },
]);
const imageFormatList = ref([
  { label: 'jpg', value: 'jpg' },
  { label: 'png', value: 'png' },
  { label: 'jpeg', value: 'jpeg' },
]);
const imageSharpeningList = ref([
  { label: '0', value: '0' },
  { label: '1', value: '1' },
  { label: '2', value: '2' },
  { label: '3', value: '3' },
]);
const repeatWarningList = ref([
  { label: '关闭', value: '0' },
  { label: '开启', value: '1' },
]);
const singleWarningList = ref([
  { label: '11', value: '11' },
  { label: '12', value: '12' },
  { label: '13', value: '13' },
]);
const totalWarningList = ref([
  { label: '1.0', value: '1.0' },
  { label: '1.5', value: '1.5' },
  { label: '2.0', value: '2.0' },
]);
const productTypeList = ref([
  { label: '鞋类', value: '1' },
  { label: '服装', value: '2' },
  { label: '箱包', value: '3' },
]);
const defaultCutoutModeList = ref([
  { label: '普通抠图', value: '1' },
  { label: '智能抠图', value: '2' },
  { label: '手动抠图', value: '3' },
]);
const deviceSpeedList = ref([
  { label: '一档', value: '1' },
  { label: '二档', value: '2' },
  { label: '三档', value: '3' },
]);
const runModeList = ref([
  { label: '普通模式', value: '1' },
  { label: '自动模式', value: '2' },
  { label: '手动模式', value: '3' },
]);
const receiverList = ref([
  { label: '蓝牙', value: '1' },
  { label: '2.4G', value: '2' },
  { label: '5.8G', value: '3' },
]);
const leftList = ref([
  { label: '左脚', value: '1' },
  { label: '右脚', value: '2' },
  { label: '左右脚', value: '3' },
]);
const rightList = ref([
  { label: '左脚', value: '1' },
  { label: '右脚', value: '2' },
  { label: '左右脚', value: '3' },
]);
const upList = ref([
  { label: '上移', value: '1' },
  { label: '下移', value: '2' },
  { label: '左右移', value: '3' },
]);
const downList = ref([
  { label: '上移', value: '1' },
  { label: '下移', value: '2' },
  { label: '左右移', value: '3' },
]);

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();
}
const saveSetting = () => {
  console.log(formData.value);
}
</script>

<style lang="scss" 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;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
  width: 100px;
  justify-content: center;
  height: 70px;
  font-size: 14px;
}
.nav-item.active {
    background: #DFE2E3;
    border-radius: 10px;
    color: #2957FF;
}
.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;
}
.form-container {
  border-radius: 12px;
  padding: 30px;
  width: 800px;
  margin: 0 auto;
}
.form-item {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}
.form-item label {
  display: block;
  min-width: 98px;
  text-align: right;
  font-size: 14px;
  color: #1A1A1A;
}
.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;
  ::v-deep(.el-input__inner){ 
    border-radius: 6px;
  }
}
.error-text {
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}
.from-primary{
    width: 150px;
    margin-top: 30px;
    height: 40px;
    color: #FFFFFF;
    background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
}
.nav-icon{
    width: 32px;
    height: 32px;
}
.captureBox{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.selectBox{
    padding-top: 30px;
    padding-left: 100px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.select-btn{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 120px;
  height: 30px;
  background: #DFE2E3;
  border-radius: 6px;
  justify-content: center;
  font-size: 14px;
  color: #2957FF;
  gap: 5px;
  img{
    width: 16px;
    height: 16px;
  }
}
</style>