1
This commit is contained in:
@@ -0,0 +1,332 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
getSettings,
|
||||
saveSettings,
|
||||
savePlatformSettings,
|
||||
type Platform,
|
||||
type PlatformExportSettings
|
||||
} from '../../utils/settings'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 平台配置
|
||||
const platforms = [
|
||||
{ key: 'amazon' as Platform, name: 'Amazon', icon: '🛒', color: '#FF9900' },
|
||||
{ key: 'rakuten' as Platform, name: 'Rakuten', icon: '🛍️', color: '#BF0000' },
|
||||
{ key: 'zebra' as Platform, name: 'Zebra', icon: '🦓', color: '#34495E' }
|
||||
]
|
||||
|
||||
// 设置项
|
||||
const platformSettings = ref<Record<Platform, PlatformExportSettings>>({
|
||||
amazon: { exportPath: '' },
|
||||
rakuten: { exportPath: '' },
|
||||
zebra: { exportPath: '' }
|
||||
})
|
||||
|
||||
const activeTab = ref<Platform>('amazon')
|
||||
|
||||
const show = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
// 选择导出路径
|
||||
async function selectExportPath(platform: Platform) {
|
||||
const result = await (window as any).electronAPI.showOpenDialog({
|
||||
title: `选择${platforms.find(p => p.key === platform)?.name}默认导出路径`,
|
||||
properties: ['openDirectory'],
|
||||
defaultPath: platformSettings.value[platform].exportPath
|
||||
})
|
||||
|
||||
if (!result.canceled && result.filePaths?.length > 0) {
|
||||
platformSettings.value[platform].exportPath = result.filePaths[0]
|
||||
}
|
||||
}
|
||||
|
||||
// 保存设置
|
||||
function saveAllSettings() {
|
||||
Object.keys(platformSettings.value).forEach(platformKey => {
|
||||
const platform = platformKey as Platform
|
||||
const platformConfig = platformSettings.value[platform]
|
||||
savePlatformSettings(platform, platformConfig)
|
||||
})
|
||||
|
||||
ElMessage({ message: '设置已保存', type: 'success' })
|
||||
show.value = false
|
||||
}
|
||||
|
||||
// 加载设置
|
||||
function loadAllSettings() {
|
||||
const settings = getSettings()
|
||||
platformSettings.value = {
|
||||
amazon: { ...settings.platforms.amazon },
|
||||
rakuten: { ...settings.platforms.rakuten },
|
||||
zebra: { ...settings.platforms.zebra }
|
||||
}
|
||||
}
|
||||
|
||||
// 重置单个平台设置
|
||||
function resetPlatformSettings(platform: Platform) {
|
||||
platformSettings.value[platform] = {
|
||||
exportPath: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 重置所有设置
|
||||
function resetAllSettings() {
|
||||
platforms.forEach(platform => {
|
||||
resetPlatformSettings(platform.key)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadAllSettings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
title="应用设置"
|
||||
width="480px"
|
||||
:close-on-click-modal="false"
|
||||
class="settings-dialog">
|
||||
|
||||
<div class="settings-content">
|
||||
<!-- 平台选择标签 -->
|
||||
<div class="platform-tabs">
|
||||
<div
|
||||
v-for="platform in platforms"
|
||||
:key="platform.key"
|
||||
:class="['platform-tab', { active: activeTab === platform.key }]"
|
||||
@click="activeTab = platform.key"
|
||||
:style="{ '--platform-color': platform.color }">
|
||||
<span class="platform-icon">{{ platform.icon }}</span>
|
||||
<span class="platform-name">{{ platform.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前平台设置 -->
|
||||
<div class="setting-section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">📁</span>
|
||||
<span>{{ platforms.find(p => p.key === activeTab)?.name }} 导出设置</span>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-label">默认导出路径</div>
|
||||
<div class="setting-desc">设置 {{ platforms.find(p => p.key === activeTab)?.name }} Excel文件的默认保存位置</div>
|
||||
<div class="path-input-group">
|
||||
<el-input
|
||||
v-model="platformSettings[activeTab].exportPath"
|
||||
placeholder="留空时自动弹出保存对话框"
|
||||
readonly
|
||||
class="path-input">
|
||||
<template #suffix>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="selectExportPath(activeTab)"
|
||||
class="select-btn">
|
||||
浏览
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="resetPlatformSettings(activeTab)">
|
||||
重置此平台
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetAllSettings">重置全部</el-button>
|
||||
<el-button @click="show = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveAllSettings">保存设置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-dialog :deep(.el-dialog__body) {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.platform-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 4px;
|
||||
background: #F8F9FA;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.platform-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.platform-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: var(--platform-color);
|
||||
}
|
||||
|
||||
.platform-tab.active {
|
||||
background: #fff;
|
||||
color: var(--platform-color);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.platform-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.platform-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.path-input-group {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.path-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.path-input :deep(.el-input__wrapper) {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.select-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
background: #F8F9FA;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.info-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-actions {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.settings-dialog :deep(.el-dialog__header) {
|
||||
text-align: center;
|
||||
padding-right: 40px; /* 为右侧关闭按钮留出空间 */
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SettingsDialog'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user