schoolNews/schoolNewsWeb/src/views/admin/manage/system/SystemConfigView.vue

<template>
  <AdminLayout title="系统配置" subtitle="系统参数配置管理">
    <div class="system-config">
      <!-- 配置分类标签 - 动态生成 -->
      <el-tabs v-model="activeTab" type="border-card" v-loading="loading">
        <el-tab-pane
          v-for="group in configGroups"
          :key="group.groupKey"
          :label="group.groupName"
          :name="group.groupKey"
        >
          <el-form
            :model="configData[group.groupKey]"
            label-width="140px"
            class="config-form"
          >
            <!-- 动态渲染配置项 -->
            <template v-for="item in group.items" :key="item.configKey">
              <!-- 文本输入框 -->
              <el-form-item
                v-if="getRenderType(item) === 'input'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-input
                  v-model="configData[group.groupKey][item.configKey]"
                  :placeholder="item.placeholder || `请输入${item.configName || item.configKey}`"
                />
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 多行文本框 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'textarea'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-input
                  v-model="configData[group.groupKey][item.configKey]"
                  type="textarea"
                  :rows="item.rows || 3"
                  :placeholder="item.placeholder || `请输入${item.configName || item.configKey}`"
                />
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 数字输入框 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'number'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-input-number
                  v-model="configData[group.groupKey][item.configKey]"
                  :min="item.minValue"
                  :max="item.maxValue"
                  :placeholder="item.placeholder"
                />
                <span v-if="item.unit" class="form-item-unit">{{ item.unit }}</span>
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 开关 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'switch'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-switch v-model="configData[group.groupKey][item.configKey]" />
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 下拉选择 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'select'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-select
                  v-model="configData[group.groupKey][item.configKey]"
                  :placeholder="item.placeholder || `请选择${item.configName || item.configKey}`"
                >
                  <el-option
                    v-for="option in parseOptions(item.options)"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 密码输入框 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'password'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <el-input
                  v-model="configData[group.groupKey][item.configKey]"
                  type="password"
                  show-password
                  :placeholder="item.placeholder || `请输入${item.configName || item.configKey}`"
                />
                <span v-if="item.remark" class="form-item-remark">{{ item.remark }}</span>
              </el-form-item>

              <!-- 图片上传 -->
              <el-form-item
                v-else-if="getRenderType(item) === 'imgupload'"
                :label="item.configName || item.configKey"
                :prop="item.configKey"
              >
                <FileUpload
                  list-type="cover"
                  :cover-url="configData[group.groupKey][item.configKey]"
                  @update:cover-url="(url) => handleCoverUpdate(url, group.groupKey, item.configKey)"
                  accept="image/*"
                  :max-size="5"
                  module="system"
                  :as-dialog="false"
                  :tip="item.remark || '点击上传图片，支持jpg、png格式'"
                />
              </el-form-item>
            </template>

            <!-- 操作按钮 -->
            <el-form-item>
              <el-button
                type="primary"
                @click="saveConfig(group.groupKey)"
                :loading="saving"
              >
                保存配置
              </el-button>
              <el-button @click="loadConfigs">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </AdminLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AdminLayout } from '@/views/admin';
import { ElMessage } from 'element-plus';
import { configApi } from '@/apis/system';
import type { ConfigItem } from '@/types/system/config';
import FileUpload from '@/components/file/FileUpload.vue';

defineOptions({
  name: 'SystemConfigView'
});

// 配置分组接口定义
interface ConfigGroup {
  groupKey: string;
  groupName: string;
  orderNum: number;
  items: ConfigItem[];
}

const loading = ref(false);
const saving = ref(false);
const activeTab = ref('');

// 配置分组列表
const configGroups = ref<ConfigGroup[]>([]);

// 配置数据对象，按分组存储
const configData = reactive<Record<string, Record<string, any>>>({});

onMounted(() => {
  loadConfigs();
});

/**
 * 获取配置项的渲染类型
 * @param item 配置项
 * @returns 渲染类型：input/textarea/number/switch/select/password
 */
function getRenderType(item: ConfigItem): string {
  // 如果明确指定了 renderType，直接使用
  if (item.renderType) {
    return item.renderType;
  }
  
  // 根据 configType 自动推断渲染类型
  switch (item.configType?.toLowerCase()) {
    case 'boolean':
      return 'switch';
    case 'number':
    case 'integer':
    case 'long':
    case 'double':
    case 'float':
      return 'number';
    case 'json':
      return 'textarea';
    case 'string':
    default:
      // String 类型根据其他属性进一步判断
      if (item.options) {
        return 'select';
      }
      if (item.rows && item.rows > 1) {
        return 'textarea';
      }
      if (item.configKey?.includes('password') || item.configKey?.includes('secret')) {
        return 'password';
      }
      return 'input';
  }
}

/**
 * 解析 options 字符串（支持JSON数组和逗号分隔字符串）
 * @param optionsStr JSON 字符串或逗号分隔的字符串
 * @returns 选项数组
 */
function parseOptions(optionsStr?: string): Array<{ label: string; value: any }> {
  if (!optionsStr) {
    return [];
  }
  
  try {
    // 尝试解析为JSON
    const parsed = JSON.parse(optionsStr);
    if (Array.isArray(parsed)) {
      return parsed;
    }
    return [];
  } catch (error) {
    // 如果JSON解析失败，尝试作为逗号分隔的字符串处理
    // 格式：'aliyun,tencent' 或 'aliyun:阿里云,tencent:腾讯云'
    const items = optionsStr.split(',').map(item => item.trim()).filter(item => item);
    
    return items.map(item => {
      // 检查是否包含冒号分隔符 (value:label 格式)
      const parts = item.split(':');
      if (parts.length === 2) {
        return {
          value: parts[0].trim(),
          label: parts[1].trim()
        };
      }
      // 如果没有冒号，value和label相同
      return {
        value: item,
        label: item
      };
    });
  }
}

/**
 * 加载配置数据
 */
async function loadConfigs() {
  try {
    loading.value = true;
    
    // 调用API获取配置
    const result = await configApi.getConfigs();
    
    if (!result.success) {
      ElMessage.error(result.message || '加载配置失败');
      return;
    }
    
    // 后端返回的列表数据在 dataList 字段中
    const configItems: ConfigItem[] = (result.dataList || []) as unknown as ConfigItem[];
    
    // 定义分组名称映射
    const groupNames: Record<string, string> = {
      '基础配置': '基础配置',
      '爬虫配置': '爬虫配置',
      'Dify配置': 'Dify配置',
      '邮件配置': '邮件配置',
      '短信配置': '短信配置',
      '存储配置': '存储配置',
      '系统参数': '系统参数'
    };
    
    // 按分组组织配置
    const groupMap = new Map<string, ConfigGroup>();
    
    configItems.forEach((item: ConfigItem) => {
      if (!groupMap.has(item.configGroup)) {
        groupMap.set(item.configGroup, {
          groupKey: item.configGroup,
          groupName: groupNames[item.configGroup] || item.configGroup,
          orderNum: Object.keys(groupNames).indexOf(item.configGroup),
          items: []
        });
        configData[item.configGroup] = {};
      }
      
      const group = groupMap.get(item.configGroup)!;
      group.items.push(item);
      
      // 初始化配置值，根据 configType 转换数据类型
      let value: any = item.configValue;
      switch (item.configType?.toLowerCase()) {
        case 'number':
        case 'integer':
        case 'long':
        case 'double':
        case 'float':
          value = Number(value);
          break;
        case 'boolean':
          value = value === 'true' || value === true || value === 1;
          break;
        case 'json':
          try {
            value = JSON.parse(value);
          } catch {
            value = value;
          }
          break;
        default:
          // string 类型保持原样
          break;
      }
      configData[item.configGroup][item.configKey] = value;
    });
    
    // 转换为数组并排序
    configGroups.value = Array.from(groupMap.values()).sort(
      (a, b) => a.orderNum - b.orderNum
    );
    
    // 每个分组内的配置项也排序
    configGroups.value.forEach(group => {
      group.items.sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0));
    });
    
    // 设置默认激活的标签页
    if (configGroups.value.length > 0) {
      activeTab.value = configGroups.value[0].groupKey;
    }
    
  } catch (error) {
    console.error('加载配置失败:', error);
    ElMessage.error('加载配置失败');
  } finally {
    loading.value = false;
  }
}

/**
 * 处理封面URL更新
 */
function handleCoverUpdate(url: string, groupKey: string, configKey: string) {
  configData[groupKey][configKey] = url;
}

/**
 * 保存指定分组的配置
 */
async function saveConfig(groupKey: string) {
  try {
    saving.value = true;
    
    const groupData = configData[groupKey];
    const configItems = configGroups.value
      .find(g => g.groupKey === groupKey)
      ?.items || [];
    
    // 构建保存数据
    const saveData = configItems.map(item => ({
      configKey: item.configKey,
      configValue: String(groupData[item.configKey]),
      configGroup: groupKey
    }));
    
    // 调用API保存配置
    const result = await configApi.saveConfigs(saveData);
    
    if (!result.success) {
      ElMessage.error(result.message || '配置保存失败');
      return;
    }
    
    ElMessage.success('配置保存成功');
  } catch (error) {
    console.error('保存配置失败:', error);
    ElMessage.error('保存配置失败');
  } finally {
    saving.value = false;
  }
}
</script>

<style lang="scss" scoped>
.system-config {
  background-color: #FFFFFF;
  padding: 20px;
  
  :deep(.el-tabs--border-card) {
    border: none;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  :deep(.el-tabs__content) {
    padding: 24px;
  }
}

.config-form {
  max-width: 800px;
  
  :deep(.el-form-item__label) {
    font-weight: 500;
  }
  
  :deep(.el-input),
  :deep(.el-select),
  :deep(.el-input-number) {
    width: 100%;
  }
  
  :deep(.el-textarea__inner) {
    font-family: inherit;
  }
  
  .form-item-remark {
    display: inline-block;
    margin-left: 10px;
    color: #909399;
    font-size: 13px;
  }
  
  .form-item-unit {
    display: inline-block;
    margin-left: 10px;
    color: #606266;
    font-size: 14px;
  }
}
</style>