im-admin/im-admin-ui/src/views/im/setting/indexSetting.vue

<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 总开关：是否使用默认配置 -->
      <el-form :model="defaultSettingData" label-width="150px" style="max-width: 600px; margin-bottom: 20px">
        <el-form-item label="是否使用默认配置">
          <el-switch v-model="defaultSettingData.useDefault" @change="handleDefaultChange" />
        </el-form-item>
      </el-form>

      <!-- 翻译配置选项卡（仅在不使用默认配置时显示） -->
      <div v-show="!defaultSettingData.useDefault">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="百度翻译" name="baidu" lazy>
            <el-form ref="baiduFormRef" :model="baiduSettingData" :rules="baiduRules" label-width="120px" style="max-width: 600px; margin-top: 20px">
              <el-form-item label="APP ID" prop="appId">
                <el-input v-model="baiduSettingData.appId" placeholder="请输入APP ID"></el-input>
              </el-form-item>
              <el-form-item label="密钥" prop="secretKey">
                <el-input v-model="baiduSettingData.secretKey" :rows="4" placeholder="请输入密钥"></el-input>
              </el-form-item>
              <el-form-item>
                <div style="margin-left: 130px; margin-top: 20px">
                  <el-button type="primary" @click="submitBaiduForm">保存配置</el-button>
                </div>
                <!-- <el-button @click="resetBaiduForm">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="有道翻译" name="youdao" lazy>
            <el-form
              ref="youdaoFormRef"
              :model="youdaoSettingData"
              :rules="youdaoRules"
              label-width="120px"
              style="max-width: 600px; margin-top: 20px"
            >
              <el-form-item label="App Key" prop="appKey">
                <el-input v-model="youdaoSettingData.appKey" placeholder="请输入App Key"></el-input>
              </el-form-item>
              <el-form-item label="密钥" prop="appSecret">
                <el-input v-model="youdaoSettingData.appSecret" :rows="4" placeholder="请输入密钥"></el-input>
              </el-form-item>
              <el-form-item>
                <div style="margin-left: 130px; margin-top: 20px">
                  <el-button type="primary" @click="submitYoudaoForm">保存配置</el-button>
                  <!-- <el-button @click="resetYoudaoForm">重置</el-button> -->
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup name="Setting" lang="ts">
import { listSetting, updateSetting } from '@/api/im/setting';
import { getCurrentInstance, ref, onMounted, ComponentInternalInstance, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const loading = ref(true);
const activeTab = ref('baidu'); // 默认显示百度翻译

// 默认配置数据
const defaultSettingData = ref({
  useDefault: false
});

// 存储初始获取的数据
const initialBaiduData = ref({});
const initialYoudaoData = ref({});

const baiduSettingData = ref({
  appId: '',
  secretKey: ''
});

const youdaoSettingData = ref({
  appKey: '',
  appSecret: ''
});

// 百度翻译配置验证规则
const baiduRules = {
  appId: [
    { required: true, message: '请输入APP ID', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  secretKey: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
    { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
  ]
};

// 有道翻译配置验证规则
const youdaoRules = {
  appKey: [
    { required: true, message: '请输入App Key', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  ],
  appSecret: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
    { min: 1, max: 200, message: '长度在 1 到 200 个', trigger: 'blur' }
  ]
};

/** 查询配置列表 */
const getList = async () => {
  loading.value = true;
  try {
    const res = await listSetting();
    //转为json对象
    // 更新翻译配置数据
    if (res.TRANSLATION_SETTING) {
      const parsedData = JSON.parse(res.TRANSLATION_SETTING);

      // 根据type判断是否使用默认配置
      if (parsedData.type === '0') {
        defaultSettingData.value.useDefault = true;
      } else {
        defaultSettingData.value.useDefault = false;

        // 初始化百度和有道的数据并保存初始值
        if (parsedData.type === '1') {
          Object.assign(baiduSettingData.value, parsedData);
          Object.assign(initialBaiduData.value, parsedData); // 保存初始数据
          activeTab.value = 'baidu';
        } else if (parsedData.type === '2') {
          Object.assign(youdaoSettingData.value, parsedData);
          Object.assign(initialYoudaoData.value, parsedData); // 保存初始数据
          activeTab.value = 'youdao';
        }

        // 如果两种配置都有数据，也保存下来
        if (parsedData.appId) {
          Object.assign(initialBaiduData.value, {
            appId: parsedData.appId,
            secretKey: parsedData.secretKey
          });
          // 如果当前不是百度配置，也要更新百度配置的数据
          if (parsedData.type !== '1') {
            Object.assign(baiduSettingData.value, {
              appId: parsedData.appId,
              secretKey: parsedData.secretKey
            });
          }
        }

        if (parsedData.appKey) {
          Object.assign(initialYoudaoData.value, {
            appKey: parsedData.appKey,
            appSecret: parsedData.appSecret
          });
          // 如果当前不是有道配置，也要更新有道配置的数据
          if (parsedData.type !== '2') {
            Object.assign(youdaoSettingData.value, {
              appKey: parsedData.appKey,
              appSecret: parsedData.appSecret
            });
          }
        }
      }
    }
    console.log('成功:', baiduSettingData.value, youdaoSettingData.value);
  } catch (error) {
    ElMessage.error('获取配置失败');
  } finally {
    loading.value = false;
  }
};

/** 处理默认配置开关变化 */
const handleDefaultChange = (value: boolean) => {
  if (value) {
    // 如果切换到默认配置，发送type为0的请求
    updateTranslationSetting({ type: '0' });
  } else {
    // 如果从默认配置切换到自定义配置，需要显示提示或让用户选择一种自定义配置
    ElMessage.info('已切换到自定义配置，请选择并填写翻译配置');
  }
};

/** 更新翻译设置 */
const updateTranslationSetting = async (params: any) => {
  try {
    buttonLoading.value = true;
    params.settingName = 'TRANSLATION_SETTING';

    await updateSetting(params);
    ElMessage.success('翻译配置更新成功');

    // 如果设置了默认配置，则更新状态
    if (params.type === '0') {
      defaultSettingData.value.useDefault = true;
    } else {
      defaultSettingData.value.useDefault = false;
    }
  } catch (error) {
    console.error('更新翻译配置失败:', error);
    ElMessage.error('更新翻译配置失败');
  } finally {
    buttonLoading.value = false;
  }
};

/** 提交百度翻译配置表单 */
const submitBaiduForm = async () => {
  const formRef = proxy.$refs.baiduFormRef as (typeof import('element-plus'))['ElForm'];
  const isValid = await formRef.validate().catch(() => false);

  if (!isValid) return;

  try {
    buttonLoading.value = true;
    const params = {
      settingName: 'TRANSLATION_SETTING',
      type: '1', // 百度翻译
      appId: baiduSettingData.value.appId,
      secretKey: baiduSettingData.value.secretKey,
      appKey: '', // 有道翻译相关的字段清空
      appSecret: ''
    };
    await updateSetting(params);
    ElMessage.success('百度翻译配置更新成功');

    // 更新初始数据
    Object.assign(initialBaiduData.value, {
      appId: baiduSettingData.value.appId,
      secretKey: baiduSettingData.value.secretKey
    });
  } catch (error) {
    console.error('更新百度翻译配置失败:', error);
    ElMessage.error('更新百度翻译配置失败');
  } finally {
    buttonLoading.value = false;
  }
};

/** 提交有道翻译配置表单 */
const submitYoudaoForm = async () => {
  const formRef = proxy.$refs.youdaoFormRef as (typeof import('element-plus'))['ElForm'];
  const isValid = await formRef.validate().catch(() => false);

  if (!isValid) return;

  try {
    buttonLoading.value = true;
    const params = {
      settingName: 'TRANSLATION_SETTING',
      type: '2', // 有道翻译
      appId: '', // 百度翻译相关的字段清空
      secretKey: '',
      appKey: youdaoSettingData.value.appKey,
      appSecret: youdaoSettingData.value.appSecret
    };
    await updateSetting(params);
    ElMessage.success('有道翻译配置更新成功');

    // 更新初始数据
    Object.assign(initialYoudaoData.value, {
      appKey: youdaoSettingData.value.appKey,
      appSecret: youdaoSettingData.value.appSecret
    });
  } catch (error) {
    console.error('更新有道翻译配置失败:', error);
    ElMessage.error('更新有道翻译配置失败');
  } finally {
    buttonLoading.value = false;
  }
};

/** 重置百度翻译配置表单 */
const resetBaiduForm = () => {
  const formRef = proxy.$refs.baiduFormRef as (typeof import('element-plus'))['ElForm'];

  // 重置为初始获取的数据
  if (initialBaiduData.value && Object.keys(initialBaiduData.value).length > 0) {
    Object.assign(baiduSettingData.value, {
      appId: initialBaiduData.value.appId || '',
      secretKey: initialBaiduData.value.secretKey || ''
    });
  } else {
    formRef.resetFields();
  }
};

/** 重置有道翻译配置表单 */
const resetYoudaoForm = () => {
  const formRef = proxy.$refs.youdaoFormRef as (typeof import('element-plus'))['ElForm'];

  // 重置为初始获取的数据
  if (initialYoudaoData.value && Object.keys(initialYoudaoData.value).length > 0) {
    Object.assign(youdaoSettingData.value, {
      appKey: initialYoudaoData.value.appKey || '',
      appSecret: initialYoudaoData.value.appSecret || ''
    });
  } else {
    formRef.resetFields();
  }
};

onMounted(() => {
  getList();
});
</script>