|
|
@@ -1,597 +1,285 @@
|
|
|
<template>
|
|
|
- <headerBar
|
|
|
- >
|
|
|
- <template #title><div @click="handleSettingClick" v-log="{ describe: { action: '点击设置标题' } }">设置</div></template>
|
|
|
+ <headerBar :title="$t('router.setting')">
|
|
|
+ <template #title><div @click="handleSettingClick" v-log="{ describe: { action: '点击设置标题' } }">{{ $t('router.setting') }}</div></template>
|
|
|
</headerBar>
|
|
|
<div class="container setting-wrap">
|
|
|
<nav class="settings-nav">
|
|
|
<div class="nav-item" :class="{'active': activeIndex === 0}" @click="toggleTab(0)" v-log="{ describe: { action: '点击切换设置Tab', tab: '基础配置' } }">
|
|
|
<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>
|
|
|
+ <span>{{ $t('setting.basicConfig') }}</span>
|
|
|
</div>
|
|
|
<div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 3}" @click="toggleTab(3)" v-log="{ describe: { action: '点击切换设置Tab', tab: '相机配置' } }">
|
|
|
<img src="@/assets/images/setting/icon2.png" class="nav-icon" v-if="activeIndex !== 3"/>
|
|
|
<img src="@/assets/images/setting/icon2a.png" class="nav-icon" v-else/>
|
|
|
- <span>相机配置</span>
|
|
|
+ <span>{{ $t('setting.cameraConfig') }}</span>
|
|
|
</div>
|
|
|
<div class="nav-item" :class="{'active': activeIndex === 2}" @click="toggleTab(2)" v-log="{ describe: { action: '点击切换设置Tab', tab: '其他设置' } }">
|
|
|
<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>
|
|
|
+ <span>{{ $t('setting.otherConfig') }}</span>
|
|
|
</div>
|
|
|
<div class="nav-item" v-if="configInfoStore.appModel === 1" :class="{'active': activeIndex === 4}" @click="toggleTab(4)" v-log="{ describe: { action: '点击切换设置Tab', tab: '左右脚程序设置' } }">
|
|
|
<img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 4"/>
|
|
|
<img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
|
|
|
- <span>左右脚程序设置</span>
|
|
|
+ <span>{{ $t('setting.leftRightConfig') }}</span>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<div class="form-container">
|
|
|
- <!--基础配置-->
|
|
|
- <div class="selectBox" v-if="activeIndex === 0">
|
|
|
- <div class="form-item">
|
|
|
- <label>主图尺寸:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-select multiple
|
|
|
- collapse-tags
|
|
|
- multiple-limit="3"
|
|
|
- v-model="formData.basic_configs.main_image_size" 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" v-if="formData.basic_configs.main_image_size.includes('custom')">
|
|
|
- <label>自定义尺寸:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-input
|
|
|
- type="text"
|
|
|
- v-model.number="customInput"
|
|
|
- maxlength="4"
|
|
|
- placeholder="请输入1-3000的尺寸值"
|
|
|
- class="w-full px-3 py-2 border rounded-md"
|
|
|
- @keypress="handleKeyPress"
|
|
|
- @input="handleInput"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-item">
|
|
|
- <label>图片输出格式:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-select v-model="formData.basic_configs.image_out_format" placeholder="请选择">
|
|
|
- <el-option v-for="item in imageFormatList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <div class="selectBox" v-if="activeIndex === 0">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.mainImageSize') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select multiple collapse-tags multiple-limit="3" v-model="formData.basic_configs.main_image_size" :placeholder="$t('validation.pleaseSelect')">
|
|
|
+ <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" v-if="formData.basic_configs.main_image_size.includes('custom')">
|
|
|
+ <label>{{ $t('setting.customSize') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input type="text" v-model.number="customInput" maxlength="4" :placeholder="$t('setting.inputSizeTip')" class="w-full px-3 py-2 border rounded-md" @keypress="handleKeyPress" @input="handleInput" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.imageFormat') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.basic_configs.image_out_format" :placeholder="$t('validation.pleaseSelect')">
|
|
|
+ <el-option v-for="item in imageFormatList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div class="form-item">
|
|
|
- <label>图片锐化:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-input-number
|
|
|
- v-model="formData.basic_configs.image_sharpening"
|
|
|
- :min="1"
|
|
|
- :max="5"
|
|
|
- style="width: 200px"
|
|
|
- :step="0.1"
|
|
|
- controls-position="right"
|
|
|
- placeholder="请输入1-5之间的值"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="tips fs-12 c-999 mar-left-10">数值1-5,值为1则代表不处理</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.imageSharpen') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input-number v-model="formData.basic_configs.image_sharpening" :min="1" :max="5" style="width: 200px" :step="0.1" controls-position="right" :placeholder="$t('setting.inputSizeTip')" />
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="form-item">
|
|
|
- <label>阴影处理模式:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-select v-model.number="formData.basic_configs.image_mask_config.mode" placeholder="请选择">
|
|
|
- <el-option label="默认模式" :value="0"></el-option>
|
|
|
- <el-option label="自定义模式" :value="1"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <div class="tips fs-12 c-999 mar-left-10">{{ $t('setting.sharpenTip') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.shadowMode') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model.number="formData.basic_configs.image_mask_config.mode" :placeholder="$t('validation.pleaseSelect')">
|
|
|
+ <el-option :label="$t('setting.shadowDefault')" :value="0"></el-option>
|
|
|
+ <el-option :label="$t('setting.shadowCustom')" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
-
|
|
|
- <template v-if="formData.basic_configs.image_mask_config.mode === 1">
|
|
|
- <div class="form-item">
|
|
|
- <label>透明度:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-input-number
|
|
|
- v-model="formData.basic_configs.image_mask_config.opacity"
|
|
|
- :min="0.5"
|
|
|
- :max="1"
|
|
|
- style="width: 200px"
|
|
|
- :step="0.01"
|
|
|
- controls-position="right"
|
|
|
- placeholder="请输入0.5-1之间的值"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="formData.basic_configs.image_mask_config.mode === 1">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.opacity') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input-number v-model="formData.basic_configs.image_mask_config.opacity" :min="0.5" :max="1" style="width: 200px" :step="0.01" controls-position="right" :placeholder="$t('setting.inputOpacityTip')" />
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="form-item">
|
|
|
- <label>亮度范围:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-input-number
|
|
|
- v-model="formData.basic_configs.image_mask_config.grenerate_main_pic_brightness"
|
|
|
- :min="200"
|
|
|
- :max="255"
|
|
|
- style="width: 200px"
|
|
|
- :step="1"
|
|
|
- controls-position="right"
|
|
|
- placeholder="请输入200-255之间的值"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.brightnessRange') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input-number v-model="formData.basic_configs.image_mask_config.grenerate_main_pic_brightness" :min="200" :max="255" style="width: 200px" :step="1" controls-position="right" :placeholder="$t('setting.inputBrightnessTip')" />
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <div class="form-item">
|
|
|
- <label>800图自定义边距:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-input
|
|
|
- type="number"
|
|
|
- v-model.number="formData.basic_configs.padding_800image"
|
|
|
- :min="0"
|
|
|
- :max="500"
|
|
|
- placeholder="请输入0-500的整数"
|
|
|
- @keypress="handlePaddingKeyPress"
|
|
|
- @input="handlePaddingInput"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.customPadding800') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input type="number" v-model.number="formData.basic_configs.padding_800image" :min="0" :max="500" :placeholder="$t('setting.inputPaddingTip')" @keypress="handlePaddingKeyPress" @input="handlePaddingInput" />
|
|
|
</div>
|
|
|
- <div class="form-item">
|
|
|
- <label>800图是否翻转:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-select v-model.number="formData.basic_configs.is_flip_800image" placeholder="请选择">
|
|
|
- <el-option v-for="item in isFlip800ImageList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.flip800') }}</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model.number="formData.basic_configs.is_flip_800image" :placeholder="$t('validation.pleaseSelect')">
|
|
|
+ <el-option :label="$t('common.yes')" :value="1"></el-option>
|
|
|
+ <el-option :label="$t('common.no')" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div class="form-item">
|
|
|
- <label>800图颜色配置:</label>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>{{ $t('setting.color800') }}</label>
|
|
|
<div class="select-wrapper flex left">
|
|
|
<ColorPickerWithRecent v-model="formData.basic_configs.color_800image" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <DebugPanel ref="debugPanel" />
|
|
|
+ </div>
|
|
|
|
|
|
- <DebugPanel ref="debugPanel" />
|
|
|
- </div>
|
|
|
- <!--基础配置-->
|
|
|
- <!--相机配置-->
|
|
|
<template v-if="activeIndex === 3">
|
|
|
<CameraConfig ref="cameraConfigRef" :key="activeIndex" :camera_configs="formData.camera_configs" @update:camera_configs="updateCameraConfigs"/>
|
|
|
-
|
|
|
</template>
|
|
|
- <!--相机配置-->
|
|
|
- <!--其他设置-->
|
|
|
- <template v-if="activeIndex === 2">
|
|
|
|
|
|
+ <template v-if="activeIndex === 2">
|
|
|
<div class="selectBox" style="padding-top: 0px" >
|
|
|
<div class="form-item">
|
|
|
- <label>产品类型:</label>
|
|
|
+ <label>{{ $t('setting.productType') }}</label>
|
|
|
<div class="select-wrapper">
|
|
|
- <el-select v-model="formData.other_configs.product_type" placeholder="请选择">
|
|
|
+ <el-select v-model="formData.other_configs.product_type" :placeholder="$t('validation.pleaseSelect')">
|
|
|
<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>
|
|
|
+ <label>{{ $t('setting.defaultCutout') }}</label>
|
|
|
<div class="select-wrapper">
|
|
|
- <el-select v-model="formData.other_configs.cutout_mode" placeholder="请选择">
|
|
|
+ <el-select v-model="formData.other_configs.cutout_mode" :placeholder="$t('validation.pleaseSelect')">
|
|
|
<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>
|
|
|
+ <label>{{ $t('setting.deviceSpeed') }}</label>
|
|
|
<div class="select-wrapper">
|
|
|
- <el-select v-model="formData.other_configs.device_speed" placeholder="请选择">
|
|
|
- <el-option v-for="item in deviceSpeedList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ <el-select v-model="formData.other_configs.device_speed" :placeholder="$t('validation.pleaseSelect')">
|
|
|
+ <el-option :label="$t('setting.speedFast')" :value="'一档'"></el-option>
|
|
|
+ <el-option :label="$t('setting.speedMedium')" :value="'二档'"></el-option>
|
|
|
+ <el-option :label="$t('setting.speedSlow')" :value="'三档'"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<other-config/>
|
|
|
- <!-- <div class="form-item">
|
|
|
- <label>运行模式:</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <el-select v-model="formData.other_configs.running_mode" placeholder="请选择">
|
|
|
- <el-option v-for="item in runModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>-->
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
- <!--其他设置-->
|
|
|
- <div class="selectBox" style="padding-top: 0px;padding-left: 0;" v-if="activeIndex === 4">
|
|
|
- <actionConfig/>
|
|
|
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="text-center mt-8">
|
|
|
- <button class="bg-gradient-to-r from-primary" @click="onSava(activeIndex)" v-if="activeIndex !== 4" v-log="{ describe: { action: '点击保存设置', tabIndex: activeIndex } }">
|
|
|
- 保存
|
|
|
- </button>
|
|
|
+ <div class="selectBox" style="padding-top: 0px;padding-left: 0;" v-if="activeIndex === 4">
|
|
|
+ <actionConfig/>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <div class="text-center mt-8">
|
|
|
+ <button class="bg-gradient-to-r from-primary" @click="onSave(activeIndex)" v-if="activeIndex !== 4" v-log="{ describe: { action: '点击保存设置', tabIndex: activeIndex } }">
|
|
|
+ {{ $t('common.save') }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-/**
|
|
|
- * Vue组件逻辑部分,包含与设备配置相关的功能。
|
|
|
- * 主要功能包括:表单数据管理、设备配置列表获取、新增/编辑/删除步骤、保存配置等。
|
|
|
- */
|
|
|
-
|
|
|
-// 引入Vue相关功能和第三方库
|
|
|
import { ref, reactive } from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { onMounted, watch } from 'vue';
|
|
|
-import { getAllUserConfigs, setAllUserConfigs } from '@/apis/setting'
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import { getAllUserConfigs, setAllUserConfigs } from '@/apis/setting'
|
|
|
import socket from "@/stores/modules/socket";
|
|
|
import headerBar from '@/components/header-bar/index.vue';
|
|
|
import ColorPickerWithRecent from '@/views/components/common/ColorPickerWithRecent.vue'
|
|
|
import client from "@/stores/modules/client";
|
|
|
import icpList from '@/utils/ipc';
|
|
|
-const clientStore = client();
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
-import { digiCamControlWEB } from '@/utils/appconfig'
|
|
|
-import { useCheckInfo } from '@/composables/userCheck';
|
|
|
-import { preview } from '@planckdev/element-plus/utils'
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
import actionConfig from './components/action_config.vue'
|
|
|
import otherConfig from './components/otherConfig'
|
|
|
import CameraConfig from './components/CameraConfig';
|
|
|
+import DebugPanel from './components/DebugPanel.vue';
|
|
|
+import { useCheckInfo } from '@/composables/userCheck';
|
|
|
useCheckInfo();
|
|
|
|
|
|
-//点击三次 打开资源目录
|
|
|
-
|
|
|
-import DebugPanel from './components/DebugPanel.vue';
|
|
|
-// 在setup函数中创建调试面板实例
|
|
|
+const { t } = useI18n()
|
|
|
const debugPanel = ref(null);
|
|
|
const cameraConfigRef = ref(null);
|
|
|
-// 添加设置点击计数器
|
|
|
const settingClickCount = ref(0);
|
|
|
|
|
|
-// 修改headerBar的点击处理函数
|
|
|
function handleSettingClick() {
|
|
|
- console.log('handleSettingClickhandleSettingClick')
|
|
|
settingClickCount.value++;
|
|
|
-
|
|
|
if (settingClickCount.value >= 3) {
|
|
|
- if (debugPanel.value) {
|
|
|
- debugPanel.value.showDebugPanel();
|
|
|
- }
|
|
|
+ if (debugPanel.value) debugPanel.value.showDebugPanel();
|
|
|
settingClickCount.value = 0;
|
|
|
}
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- settingClickCount.value = 0;
|
|
|
- }, 3000); // 3秒内未再次点击则重置计数器
|
|
|
+ setTimeout(() => { settingClickCount.value = 0; }, 3000);
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// 路由和状态管理初始化
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
-
|
|
|
-// 定义响应式变量
|
|
|
-const folderPath = ref(''); // 文件夹路径
|
|
|
-const activeIndex = ref(0); // 当前激活的索引
|
|
|
-const socketStore = socket(); // WebSocket状态管理实例
|
|
|
-
|
|
|
-
|
|
|
-import configInfo from '@/stores/modules/config';
|
|
|
+const activeIndex = ref(0);
|
|
|
+const socketStore = socket();
|
|
|
+import configInfo from '@/stores/modules/config';
|
|
|
const configInfoStore = configInfo();
|
|
|
|
|
|
-/**
|
|
|
- * 表单数据对象,用于存储设备配置信息。
|
|
|
- */
|
|
|
const formData = reactive({
|
|
|
- //基础配置
|
|
|
- basic_configs:{
|
|
|
- "main_image_size": [],//主图尺寸
|
|
|
- "image_out_format": "",//图片输出格式
|
|
|
- "image_sharpening": 1, //图片锐化(默认值改为1)
|
|
|
- "padding_800image": 100, //800图自定义边距
|
|
|
- "is_flip_800image": 1, //800图是否翻转
|
|
|
- "color_800image": '#ffffff', //800图颜色配置
|
|
|
- "image_mask_config": { //阴影处理配置
|
|
|
- "mode": 0, //阴影处理模式:0默认模式,1自定义模式
|
|
|
- "opacity": 0.5, //透明度,默认0.5,范围0.5-1
|
|
|
- "grenerate_main_pic_brightness": 254 //亮度范围,默认254,范围200-255
|
|
|
- }
|
|
|
- },
|
|
|
- //拍照配置
|
|
|
- take_photo_configs:{
|
|
|
- "repart_take_photo_warning": false,//重复拍摄警告
|
|
|
- "single_photo_warning": "",//单次张数警告
|
|
|
- "total_photo_warning": "",//累计拍照警告
|
|
|
- "camera_delay": ""//拍照停留
|
|
|
- },
|
|
|
- other_configs:{
|
|
|
- "product_type": "",//产品类型
|
|
|
- "cutout_mode": "",//默认抠图模式
|
|
|
- "device_speed": "",//设备运动速度
|
|
|
- "running_mode": "" //运行模式
|
|
|
- },
|
|
|
-/* captureOneFolder: '', // Capture One文件夹路径
|
|
|
- mainImageSize: '', // 主图尺寸
|
|
|
- imageFormat: '', // 图片格式
|
|
|
- imageSharpening: '', // 图片锐化
|
|
|
- repeatWarning: '', // 重复警告
|
|
|
- singleWarning: '', // 单次警告
|
|
|
- totalWarning: '', // 总警告
|
|
|
- focusTime: '', // 对焦时间
|
|
|
- photoTime: '', // 拍照时间
|
|
|
- productType: '', // 产品类型
|
|
|
- defaultCutoutMode: '', // 默认抠图模式
|
|
|
- deviceSpeed: '', // 设备速度
|
|
|
- runMode: '', // 运行模式
|
|
|
- receiver: '', // 接收器类型
|
|
|
- left: '', // 左脚配置
|
|
|
- right: '', // 右脚配置
|
|
|
- up: '', // 上移配置
|
|
|
- down: '', // 下移配置*/
|
|
|
+ basic_configs: { main_image_size: [], image_out_format: "", image_sharpening: 1, padding_800image: 100, is_flip_800image: 1, color_800image: '#ffffff', image_mask_config: { mode: 0, opacity: 0.5, grenerate_main_pic_brightness: 254 } },
|
|
|
+ take_photo_configs: { repart_take_photo_warning: false, single_photo_warning: "", total_photo_warning: "", camera_delay: "" },
|
|
|
+ other_configs: { product_type: "", cutout_mode: "", device_speed: "", running_mode: "" },
|
|
|
});
|
|
|
|
|
|
-// 配置选项列表
|
|
|
const mainImageSizeList = ref([
|
|
|
- { label: '320*320', value: 320 },
|
|
|
- { label: '512*512', value: 512 },
|
|
|
- { label: '768*768', value: 768 },
|
|
|
- { label: '800*800', value: 800 },
|
|
|
- { label: '1024*1024', value: 1024 },
|
|
|
- { label: '1200*1200', value: 1200 },
|
|
|
- { label: '1400*1400', value: 1400 },
|
|
|
- { label: '1600*1600', value: 1600 },
|
|
|
- { label: '自定义', value: 'custom' } // 新增自定义选项
|
|
|
+ { label: '320*320', value: 320 }, { label: '512*512', value: 512 }, { label: '768*768', value: 768 },
|
|
|
+ { label: '800*800', value: 800 }, { label: '1024*1024', value: 1024 }, { label: '1200*1200', value: 1200 },
|
|
|
+ { label: '1400*1400', value: 1400 }, { label: '1600*1600', value: 1600 }, { label: '自定义', value: 'custom' }
|
|
|
]);
|
|
|
|
|
|
-const customInput = ref(null); // 新增自定义输入值
|
|
|
+const customInput = ref(null);
|
|
|
|
|
|
const imageFormatList = ref([
|
|
|
- { label: 'jpg', value: 'jpg' },
|
|
|
- { label: 'png', value: 'png' },
|
|
|
- { label: 'jpeg', value: 'jpeg' },
|
|
|
- { label: 'webp', value: 'webp' },
|
|
|
- { label: 'avif', value: 'avif' },
|
|
|
-]);
|
|
|
-// 图片锐化列表已移除,改为输入框
|
|
|
-const isFlip800ImageList = ref([
|
|
|
- { label: '是', value: 1 },
|
|
|
- { label: '否', value: 0 },
|
|
|
-]);
|
|
|
-const repeatWarningList = ref([
|
|
|
- { label: '关闭', value: false },
|
|
|
- { label: '开启', value: true },
|
|
|
-]);
|
|
|
-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' },
|
|
|
+ { label: 'jpg', value: 'jpg' }, { label: 'png', value: 'png' }, { label: 'jpeg', value: 'jpeg' },
|
|
|
+ { label: 'webp', value: 'webp' }, { label: 'avif', value: 'avif' },
|
|
|
]);
|
|
|
+
|
|
|
+const isFlip800ImageList = ref([{ label: '是', value: 1 }, { label: '否', value: 0 }]);
|
|
|
const productTypeList = ref([
|
|
|
- { label: '鞋类', value: '鞋类' },
|
|
|
- { label: '服装', value: '服装' },
|
|
|
- { label: '箱包', value: '箱包' },
|
|
|
+ { label: '鞋类', value: '鞋类' }, { label: '服装', value: '服装' }, { label: '箱包', value: '箱包' },
|
|
|
]);
|
|
|
const defaultCutoutModeList = ref([
|
|
|
- { label: '普通抠图', value: '普通抠图' },
|
|
|
- { label: '精细化抠图', value: '精细化抠图' },
|
|
|
-]);
|
|
|
-const deviceSpeedList = ref([
|
|
|
- { label: '快', value: '一档' },
|
|
|
- { label: '中', value: '二档' },
|
|
|
- { label: '慢', value: '三档' },
|
|
|
-]);
|
|
|
-/*
|
|
|
-const runModeList = ref([
|
|
|
- { label: '普通模式', value: '普通模式' },
|
|
|
- { label: '待用户确认模式', value: '待用户确认模式' }
|
|
|
-]);
|
|
|
-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' },
|
|
|
+ { label: '普通抠图', value: '普通抠图' }, { label: '精细化抠图', value: '精细化抠图' },
|
|
|
]);
|
|
|
-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 indexKey ={
|
|
|
- 0:"basic_configs",
|
|
|
- 1:"take_photo_configs",
|
|
|
- 2:"other_configs",
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/**
|
|
|
- * 监听路由参数变化,更新activeIndex和activeTab。
|
|
|
- */
|
|
|
-watch(() => route.query.type, async (newType,oldType) => {
|
|
|
- const typeValue = parseInt(newType) || 0;
|
|
|
- getConfig()
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
|
|
|
-/**
|
|
|
- * 监听activeIndex变化,更新URL中的查询参数。
|
|
|
- */
|
|
|
+watch(() => route.query.type, async (newType) => { getConfig() });
|
|
|
watch(() => activeIndex.value, (newIndex) => {
|
|
|
- router.push({
|
|
|
- query: {
|
|
|
- ...route.query,
|
|
|
- type: newIndex.toString()
|
|
|
- }
|
|
|
- });
|
|
|
+ router.push({ query: { ...route.query, type: newIndex.toString() } });
|
|
|
});
|
|
|
|
|
|
-const getConfig = async (typeValue)=>{
|
|
|
-
|
|
|
+const getConfig = async () => {
|
|
|
const resultPHP = await getAllUserConfigs();
|
|
|
- if(resultPHP.code == 0 && resultPHP.data.configs ){
|
|
|
- Object.keys(resultPHP.data.configs).map(item=>{
|
|
|
- formData[item] = resultPHP.data.configs[item]
|
|
|
- })
|
|
|
-
|
|
|
+ if(resultPHP.code == 0 && resultPHP.data.configs) {
|
|
|
+ Object.keys(resultPHP.data.configs).map(item=>{ formData[item] = resultPHP.data.configs[item] })
|
|
|
const presetSizes = mainImageSizeList.value.map(item => item.value);
|
|
|
const receivedSizes = formData.basic_configs.main_image_size ? [...formData.basic_configs.main_image_size] : [];
|
|
|
-
|
|
|
- // 分离自定义值
|
|
|
const customValues = receivedSizes.filter(v => !presetSizes.includes(v));
|
|
|
if (customValues.length > 0 && activeIndex.value == 0) {
|
|
|
- customInput.value = customValues[0]; // 保留第一个自定义值
|
|
|
- // 更新选中状态
|
|
|
- console.log('111')
|
|
|
- formData.basic_configs.main_image_size = receivedSizes
|
|
|
- .filter(v => presetSizes.includes(v))
|
|
|
- .concat('custom');
|
|
|
+ customInput.value = customValues[0];
|
|
|
+ formData.basic_configs.main_image_size = receivedSizes.filter(v => presetSizes.includes(v)).concat('custom');
|
|
|
} else {
|
|
|
- console.log('222')
|
|
|
formData.basic_configs.main_image_size = receivedSizes;
|
|
|
}
|
|
|
- console.log(formData.basic_configs.main_image_size);
|
|
|
-
|
|
|
- // 确保新字段有默认值(如果服务器没有返回)
|
|
|
- if (formData.basic_configs.padding_800image === undefined || formData.basic_configs.padding_800image === null) {
|
|
|
- formData.basic_configs.padding_800image = 100;
|
|
|
- }
|
|
|
- if (formData.basic_configs.is_flip_800image === undefined || formData.basic_configs.is_flip_800image === null) {
|
|
|
- formData.basic_configs.is_flip_800image = 0;
|
|
|
- }
|
|
|
- if (formData.basic_configs.color_800image === undefined || formData.basic_configs.color_800image === null) {
|
|
|
- formData.basic_configs.color_800image = '#ffffff';
|
|
|
- }
|
|
|
-
|
|
|
- // 确保图片锐化有默认值
|
|
|
- if (formData.basic_configs.image_sharpening === undefined || formData.basic_configs.image_sharpening === null) {
|
|
|
- formData.basic_configs.image_sharpening = 1;
|
|
|
- }
|
|
|
-
|
|
|
- // 确保阴影处理配置有默认值
|
|
|
+ if (formData.basic_configs.padding_800image === undefined || formData.basic_configs.padding_800image === null) formData.basic_configs.padding_800image = 100;
|
|
|
+ if (formData.basic_configs.is_flip_800image === undefined || formData.basic_configs.is_flip_800image === null) formData.basic_configs.is_flip_800image = 0;
|
|
|
+ if (formData.basic_configs.color_800image === undefined) formData.basic_configs.color_800image = '#ffffff';
|
|
|
+ if (formData.basic_configs.image_sharpening === undefined) formData.basic_configs.image_sharpening = 1;
|
|
|
if (!formData.basic_configs.image_mask_config) {
|
|
|
- formData.basic_configs.image_mask_config = {
|
|
|
- mode: 0,
|
|
|
- opacity: 0.5,
|
|
|
- grenerate_main_pic_brightness: 254
|
|
|
- };
|
|
|
+ formData.basic_configs.image_mask_config = { mode: 0, opacity: 0.5, grenerate_main_pic_brightness: 254 };
|
|
|
} else {
|
|
|
- // 确保每个字段都有默认值
|
|
|
- if (formData.basic_configs.image_mask_config.mode === undefined || formData.basic_configs.image_mask_config.mode === null) {
|
|
|
- formData.basic_configs.image_mask_config.mode = 0;
|
|
|
- }
|
|
|
- if (formData.basic_configs.image_mask_config.opacity === undefined || formData.basic_configs.image_mask_config.opacity === null) {
|
|
|
- formData.basic_configs.image_mask_config.opacity = 0.5;
|
|
|
- }
|
|
|
- if (formData.basic_configs.image_mask_config.grenerate_main_pic_brightness === undefined || formData.basic_configs.image_mask_config.grenerate_main_pic_brightness === null) {
|
|
|
- formData.basic_configs.image_mask_config.grenerate_main_pic_brightness = 254;
|
|
|
- }
|
|
|
+ if (formData.basic_configs.image_mask_config.mode === undefined) formData.basic_configs.image_mask_config.mode = 0;
|
|
|
+ if (formData.basic_configs.image_mask_config.opacity === undefined) formData.basic_configs.image_mask_config.opacity = 0.5;
|
|
|
+ if (formData.basic_configs.image_mask_config.grenerate_main_pic_brightness === undefined) formData.basic_configs.image_mask_config.grenerate_main_pic_brightness = 254;
|
|
|
}
|
|
|
-
|
|
|
- // 处理图片锐化:如果值为0或小于1,自动改为1
|
|
|
const sharpeningValue = parseFloat(formData.basic_configs.image_sharpening);
|
|
|
- if (isNaN(sharpeningValue) || sharpeningValue < 1) {
|
|
|
- formData.basic_configs.image_sharpening = 1;
|
|
|
- }
|
|
|
+ if (isNaN(sharpeningValue) || sharpeningValue < 1) formData.basic_configs.image_sharpening = 1;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-/**
|
|
|
- * 组件挂载时初始化activeIndex。
|
|
|
- */
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
getConfig()
|
|
|
-
|
|
|
- let type = 0 ;
|
|
|
if (route.query.type) {
|
|
|
const typeValue = parseInt(route.query.type);
|
|
|
- type = typeValue
|
|
|
- if (!isNaN(typeValue) && typeValue >= 0 && typeValue <= 3) {
|
|
|
- activeIndex.value = typeValue;
|
|
|
- }
|
|
|
+ if (!isNaN(typeValue) && typeValue >= 0 && typeValue <= 4) activeIndex.value = typeValue;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-const handleKeyPress = (event) => {
|
|
|
- const char = event.key;
|
|
|
- // 只允许输入数字字符
|
|
|
- if (!/^\d+$/.test(char)) {
|
|
|
- event.preventDefault(); // 阻止非数字输入
|
|
|
- }
|
|
|
-};
|
|
|
+const handleKeyPress = (event) => { if (!/^\d+$/.test(event.key)) event.preventDefault(); };
|
|
|
const handleInput = (value) => {
|
|
|
- if (value > 3000) {
|
|
|
- customInput.value = 3000;
|
|
|
- } else if (value < 1) {
|
|
|
- customInput.value = 1;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 处理800图边距输入
|
|
|
-const handlePaddingKeyPress = (event) => {
|
|
|
- const char = event.key;
|
|
|
- // 只允许输入数字字符
|
|
|
- if (!/^\d+$/.test(char)) {
|
|
|
- event.preventDefault(); // 阻止非数字输入
|
|
|
- }
|
|
|
+ if (value > 3000) customInput.value = 3000;
|
|
|
+ else if (value < 1) customInput.value = 1;
|
|
|
};
|
|
|
-
|
|
|
+const handlePaddingKeyPress = (event) => { if (!/^\d+$/.test(event.key)) event.preventDefault(); };
|
|
|
const handlePaddingInput = () => {
|
|
|
let value = formData.basic_configs.padding_800image;
|
|
|
- // 处理空值或无效值
|
|
|
- if (value === null || value === undefined || value === '' || isNaN(value)) {
|
|
|
- formData.basic_configs.padding_800image = 0;
|
|
|
- return;
|
|
|
- }
|
|
|
- // 转换为数字并确保是整数
|
|
|
- value = Number(value);
|
|
|
- value = Math.floor(value);
|
|
|
-
|
|
|
- // 限制范围
|
|
|
- if (value > 500) {
|
|
|
- formData.basic_configs.padding_800image = 500;
|
|
|
- } else if (value < 0) {
|
|
|
- formData.basic_configs.padding_800image = 0;
|
|
|
- } else {
|
|
|
- formData.basic_configs.padding_800image = value;
|
|
|
- }
|
|
|
+ if (value === null || value === undefined || value === '' || isNaN(value)) { formData.basic_configs.padding_800image = 0; return; }
|
|
|
+ value = Math.floor(Number(value));
|
|
|
+ if (value > 500) formData.basic_configs.padding_800image = 500;
|
|
|
+ else if (value < 0) formData.basic_configs.padding_800image = 0;
|
|
|
+ else formData.basic_configs.padding_800image = value;
|
|
|
};
|
|
|
|
|
|
-// 添加更新camera_configs的方法
|
|
|
-const updateCameraConfigs = (configs) => {
|
|
|
- formData.camera_configs = configs;
|
|
|
-};
|
|
|
+const updateCameraConfigs = (configs) => { formData.camera_configs = configs; };
|
|
|
|
|
|
const toggleTab = async (item) => {
|
|
|
const oldType = activeIndex.value;
|
|
|
- // 切换前保存当前 Tab 配置(包含相机配置 3)
|
|
|
if ([0,1,2,3].includes(oldType)) {
|
|
|
const next = await saveSetting(oldType);
|
|
|
if (next === false) return false;
|
|
|
@@ -600,20 +288,12 @@ const toggleTab = async (item) => {
|
|
|
return true;
|
|
|
};
|
|
|
|
|
|
-const onSava = async (index)=>{
|
|
|
- const next = await saveSetting(index)
|
|
|
-
|
|
|
- if(next !== false){
|
|
|
- ElMessage.success('保存成功')
|
|
|
- }
|
|
|
-
|
|
|
+const onSave = async (index) => {
|
|
|
+ const next = await saveSetting(index)
|
|
|
+ if(next !== false) ElMessage.success(t('message.saveSuccess'))
|
|
|
}
|
|
|
|
|
|
-/**
|
|
|
- * 保存当前表单配置。
|
|
|
- */
|
|
|
const saveSetting = async (index) => {
|
|
|
- // 构建临时提交数据
|
|
|
if(index === 3) {
|
|
|
if (cameraConfigRef.value && typeof cameraConfigRef.value.save === 'function') {
|
|
|
if(! cameraConfigRef.value.save()) return false;
|
|
|
@@ -621,337 +301,54 @@ const saveSetting = async (index) => {
|
|
|
}
|
|
|
const submitData = JSON.parse(JSON.stringify(formData));
|
|
|
if(index === 0) {
|
|
|
- if (formData.basic_configs.main_image_size.length === 0) {
|
|
|
- ElMessage.error('请选择主图尺寸!');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- // 处理自定义尺寸逻辑
|
|
|
- const selectedSizes = [...formData.basic_configs.main_image_size]; // 创建副本避免修改原始数据
|
|
|
-
|
|
|
+ if (formData.basic_configs.main_image_size.length === 0) { ElMessage.error(t('validation.selectMainImageSize')); return false; }
|
|
|
+ const selectedSizes = [...formData.basic_configs.main_image_size];
|
|
|
if (selectedSizes.includes('custom')) {
|
|
|
- if (!customInput.value || isNaN(customInput.value) ||
|
|
|
- customInput.value < 1 || customInput.value > 3000) {
|
|
|
- ElMessage.error('请输入1-3000之间的有效数值');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- // 创建新数组用于提交
|
|
|
- const submitSizes = selectedSizes
|
|
|
- .filter(v => v !== 'custom')
|
|
|
- .concat(parseInt(customInput.value));
|
|
|
-
|
|
|
- submitData.basic_configs.main_image_size = submitSizes
|
|
|
+ if (!customInput.value || isNaN(customInput.value) || customInput.value < 1 || customInput.value > 3000) { ElMessage.error(t('validation.inputValidSize')); return false; }
|
|
|
+ submitData.basic_configs.main_image_size = selectedSizes.filter(v => v !== 'custom').concat(parseInt(customInput.value));
|
|
|
}
|
|
|
-
|
|
|
- // 验证800图自定义边距
|
|
|
const paddingValue = formData.basic_configs.padding_800image;
|
|
|
- if (paddingValue === undefined || paddingValue === null || isNaN(paddingValue) ||
|
|
|
- paddingValue < 0 || paddingValue > 500) {
|
|
|
- ElMessage.error('800图自定义边距必须在0-500之间');
|
|
|
- return false;
|
|
|
- }
|
|
|
- // 确保是整数
|
|
|
+ if (paddingValue === undefined || paddingValue === null || isNaN(paddingValue) || paddingValue < 0 || paddingValue > 500) { ElMessage.error(t('validation.paddingRange')); return false; }
|
|
|
submitData.basic_configs.padding_800image = Math.floor(paddingValue);
|
|
|
-
|
|
|
- // 验证图片锐化
|
|
|
const sharpeningValue = parseFloat(formData.basic_configs.image_sharpening);
|
|
|
- if (isNaN(sharpeningValue) || sharpeningValue < 1 || sharpeningValue > 5) {
|
|
|
- ElMessage.error('图片锐化必须在1-5之间');
|
|
|
- return false;
|
|
|
- }
|
|
|
+ if (isNaN(sharpeningValue) || sharpeningValue < 1 || sharpeningValue > 5) { ElMessage.error(t('validation.sharpenRange')); return false; }
|
|
|
submitData.basic_configs.image_sharpening = sharpeningValue;
|
|
|
-
|
|
|
- // 验证阴影处理配置
|
|
|
const maskConfig = formData.basic_configs.image_mask_config;
|
|
|
- if (!maskConfig || typeof maskConfig.mode !== 'number' || (maskConfig.mode !== 0 && maskConfig.mode !== 1)) {
|
|
|
- ElMessage.error('请选择有效的阴影处理模式');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果是自定义模式,验证透明度和亮度
|
|
|
+ if (!maskConfig || typeof maskConfig.mode !== 'number' || (maskConfig.mode !== 0 && maskConfig.mode !== 1)) { ElMessage.error(t('validation.selectMaskMode')); return false; }
|
|
|
if (maskConfig.mode === 1) {
|
|
|
- const opacity = parseFloat(maskConfig.opacity);
|
|
|
- const brightness = parseInt(maskConfig.grenerate_main_pic_brightness);
|
|
|
-
|
|
|
- if (isNaN(opacity) || opacity < 0.5 || opacity > 1) {
|
|
|
- ElMessage.error('透明度必须在0.5-1之间');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- if (isNaN(brightness) || brightness < 200 || brightness > 255) {
|
|
|
- ElMessage.error('亮度范围必须在200-255之间');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
+ const opacity = parseFloat(maskConfig.opacity); const brightness = parseInt(maskConfig.grenerate_main_pic_brightness);
|
|
|
+ if (isNaN(opacity) || opacity < 0.5 || opacity > 1) { ElMessage.error(t('validation.opacityRange')); return false; }
|
|
|
+ if (isNaN(brightness) || brightness < 200 || brightness > 255) { ElMessage.error(t('validation.brightnessRange')); return false; }
|
|
|
submitData.basic_configs.image_mask_config.opacity = opacity;
|
|
|
submitData.basic_configs.image_mask_config.grenerate_main_pic_brightness = brightness;
|
|
|
}
|
|
|
-
|
|
|
- // 验证800图是否翻转
|
|
|
const flipValue = formData.basic_configs.is_flip_800image;
|
|
|
- if (flipValue === undefined || flipValue === null || (flipValue !== 0 && flipValue !== 1)) {
|
|
|
- ElMessage.error('请选择800图是否翻转');
|
|
|
- return false;
|
|
|
- }
|
|
|
+ if (flipValue === undefined || flipValue === null || (flipValue !== 0 && flipValue !== 1)) { ElMessage.error(t('validation.selectFlip')); return false; }
|
|
|
submitData.basic_configs.is_flip_800image = flipValue;
|
|
|
-
|
|
|
}
|
|
|
- const params = JSON.parse(JSON.stringify({
|
|
|
- configs:submitData
|
|
|
- }))
|
|
|
+ const params = JSON.parse(JSON.stringify({ configs: submitData }))
|
|
|
const result = await setAllUserConfigs(params)
|
|
|
- if(result.code != 0) return false;
|
|
|
- return true;
|
|
|
-
|
|
|
+ if(result.code != 0) return false;
|
|
|
+ return true;
|
|
|
};
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.el-image-viewer__wrapper{
|
|
|
- z-index: 9999 !important;
|
|
|
-}
|
|
|
+.el-image-viewer__wrapper{ z-index: 9999 !important; }
|
|
|
.setting-wrap {
|
|
|
-
|
|
|
- .selectBox{
|
|
|
- padding-top: 30px;
|
|
|
- padding-left: 100px;
|
|
|
- border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
- ::v-deep(.el-tabs__header){
|
|
|
- padding-left: 0;
|
|
|
- }
|
|
|
- ::v-deep(.el-tabs--card>.el-tabs__header){
|
|
|
- border-bottom: 1px solid #CCCCCC;
|
|
|
- }
|
|
|
- ::v-deep(.el-tabs__item){
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
- ::v-deep(.el-tabs__nav-wrap){
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- ::v-deep(.el-tabs__item.is-active){
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .form-item {
|
|
|
- margin-bottom: 24px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .form-item label {
|
|
|
- display: block;
|
|
|
- width: 140px;
|
|
|
- flex-shrink: 0;
|
|
|
- text-align: right;
|
|
|
- font-size: 14px;
|
|
|
- color: #1A1A1A;
|
|
|
- padding-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .select-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 200px;
|
|
|
- ::v-deep(.el-input__inner){
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .selectBox{ padding-top: 30px; padding-left: 100px; border-bottom: 1px solid rgba(0,0,0,0.1); }
|
|
|
+ .form-item { margin-bottom: 24px; display: flex; align-items: center; }
|
|
|
+ .form-item label { display: block; width: 140px; flex-shrink: 0; text-align: right; font-size: 14px; color: #1A1A1A; padding-right: 12px; }
|
|
|
+ .select-wrapper { position: relative; width: 200px; ::v-deep(.el-input__inner){ border-radius: 6px; } }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-body {
|
|
|
- background: #EAECED;
|
|
|
-}
|
|
|
-.container {
|
|
|
- margin: 0 auto;
|
|
|
- min-height: calc(100vh - 30px);
|
|
|
- background: #EAECED;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
-}
|
|
|
-.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;
|
|
|
- padding-top: 10px;
|
|
|
- padding-bottom: 40px;
|
|
|
- width: 800px;
|
|
|
- margin: 0 auto;
|
|
|
- min-height: 400px;
|
|
|
-}
|
|
|
-.input-group {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
-}
|
|
|
-.input-group input {
|
|
|
- flex: 1;
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 8px 12px;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.error-text {
|
|
|
- color: #dc2626;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-.from-primary{
|
|
|
- width: 150px;
|
|
|
- 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);
|
|
|
-}
|
|
|
-.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;
|
|
|
- }
|
|
|
-}
|
|
|
-.mt-8{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 30px 0;
|
|
|
- height: 100px;
|
|
|
-}
|
|
|
- .config-type{
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 10px 0;
|
|
|
- .el-checkbox{
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-.editForm{
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 0;
|
|
|
- .flex-row{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- ::v-deep(.el-radio){
|
|
|
- margin-right: 6px !important;
|
|
|
- }
|
|
|
- ::v-deep(.el-radio__label){
|
|
|
- padding-left: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- ::v-deep(.el-form-item) {
|
|
|
- margin-bottom: 0;
|
|
|
- .el-form-item__label {
|
|
|
- width: 120px !important;
|
|
|
- padding-right: 0 !important;
|
|
|
- background: #FBFCFF;
|
|
|
- border: 1px solid #EEEEEE;
|
|
|
- height: 41px;
|
|
|
- line-height: 41px;
|
|
|
- padding-left: 5px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .el-form-item__content {
|
|
|
- width: 190px;
|
|
|
- position: relative;
|
|
|
- height: 41px;
|
|
|
- background: #FFFFFF;
|
|
|
- padding-left: 7px;
|
|
|
- border: 1px solid #EEEEEE;
|
|
|
- .el-input__wrapper {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
- .error-msg{
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- top: 41px;
|
|
|
- top: 28px;
|
|
|
- left: 8px;
|
|
|
- z-index: 22;
|
|
|
- color: #dc2626;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- .error-msg{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 确保number类型输入框的上下箭头始终显示
|
|
|
- input[type="number"]::-webkit-inner-spin-button,
|
|
|
- input[type="number"]::-webkit-outer-spin-button {
|
|
|
- opacity: 1;
|
|
|
- height: 28px;
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- right: 2px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- input[type="number"] {
|
|
|
- -moz-appearance: textfield; /* Firefox */
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+.container { margin: 0 auto; min-height: calc(100vh - 30px); background: #EAECED; display: flex; flex-direction: column; justify-content: flex-start; }
|
|
|
+.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-icon{ width: 32px; height: 32px; }
|
|
|
+.form-container { border-radius: 12px; padding: 30px; padding-bottom: 40px; width: 800px; margin: 0 auto; min-height: 400px; }
|
|
|
+.mt-8{ display: flex; align-items: center; justify-content: center; padding: 30px 0; height: 100px; }
|
|
|
+.bg-gradient-to-r.from-primary{ width: 150px; height: 40px; color: #FFFFFF; background: linear-gradient(135deg, #2FB0FF 0%, #B863FB 100%); border-radius: 8px; font-size: 14px; cursor: pointer; border: none; }
|
|
|
</style>
|