后台配置页面调整

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

@@ -1,67 +1,93 @@
 <template>
   <div class="app-container">
-    <!-- <el-card class="box-card"> -->
+    <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="translation" lazy>
+          <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="translationFormRef"
+              ref="youdaoFormRef"
-          :model="translationSettingData"
+              :model="youdaoSettingData"
-          :rules="translationRules"
+              :rules="youdaoRules"
               label-width="120px"
               style="max-width: 600px; margin-top: 20px"
             >
-          <el-form-item label="翻译类型" prop="type">
+              <el-form-item label="App Key" prop="appKey">
-            <el-select v-model="translationSettingData.type" placeholder="请选择翻译类型">
+                <el-input v-model="youdaoSettingData.appKey" placeholder="请输入App Key"></el-input>
-              <el-option label="默认配置" value="0"></el-option>
-              <el-option label="百度翻译" value="1"></el-option>
-              <el-option label="有道翻译" value="2"></el-option>
-            </el-select>
               </el-form-item>
-          <el-form-item v-if="translationSettingData.type === '1'" label="APP ID" prop="appId">
+              <el-form-item label="密钥" prop="appSecret">
-            <el-input v-model="translationSettingData.appId" placeholder="请输入APP ID"></el-input>
+                <el-input v-model="youdaoSettingData.appSecret" :rows="4" placeholder="请输入密钥"></el-input>
-          </el-form-item>
-          <el-form-item v-if="translationSettingData.type === '1'" label="密钥" prop="secretKey">
-            <el-input v-model="translationSettingData.secretKey" :rows="4" placeholder="请输入密钥"></el-input>
-          </el-form-item>
-          <el-form-item v-if="translationSettingData.type === '2'" label="App Key" prop="appKey">
-            <el-input v-model="translationSettingData.appKey" placeholder="请输入App Key"></el-input>
-          </el-form-item>
-          <el-form-item v-if="translationSettingData.type === '2'" label="密钥" prop="appSecret">
-            <el-input v-model="translationSettingData.appSecret" :rows="4" placeholder="请输入密钥"></el-input>
               </el-form-item>
               <el-form-item>
-            <el-button type="primary" @click="submitTranslationForm">提交</el-button>
+                <div style="margin-left: 130px; margin-top: 20px">
-            <el-button @click="resetTranslationForm">重置</el-button>
+                  <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>
-    <!-- </el-card> -->
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="Setting" lang="ts">
 import { listSetting, updateSetting } from '@/api/im/setting';
-import { getCurrentInstance, ref, onMounted, ComponentInternalInstance } from 'vue';
+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('translation');
+const activeTab = ref('baidu'); // 默认显示百度翻译
 
-const translationSettingData = ref({
+// 默认配置数据
-  type: '',
+const defaultSettingData = ref({
+  useDefault: false
+});
+
+// 存储初始获取的数据
+const initialBaiduData = ref({});
+const initialYoudaoData = ref({});
+
+const baiduSettingData = ref({
   appId: '',
-  secretKey: '',
+  secretKey: ''
+});
+
+const youdaoSettingData = ref({
   appKey: '',
   appSecret: ''
 });
 
-// 翻译配置验证规则
+// 百度翻译配置验证规则
-const translationRules = {
+const baiduRules = {
-  type: [{ required: true, message: '请选择翻译类型', trigger: 'change' }],
   appId: [
     { required: true, message: '请输入APP ID', trigger: 'blur' },
     { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
@@ -69,7 +95,11 @@ const translationRules = {
   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' }
@@ -88,9 +118,56 @@ const getList = async () => {
     //转为json对象
     // 更新翻译配置数据
     if (res.TRANSLATION_SETTING) {
-      translationSettingData.value = JSON.parse(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
+            });
           }
-    console.log('成功:', translationSettingData.value);
+        }
+
+        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 {
@@ -98,9 +175,43 @@ const getList = async () => {
   }
 };
 
-/** 提交翻译配置表单 */
+/** 处理默认配置开关变化 */
-const submitTranslationForm = async () => {
+const handleDefaultChange = (value: boolean) => {
-  const formRef = proxy.$refs.translationFormRef as (typeof import('element-plus'))['ElForm'];
+  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;
@@ -109,26 +220,89 @@ const submitTranslationForm = async () => {
     buttonLoading.value = true;
     const params = {
       settingName: 'TRANSLATION_SETTING',
-      type: translationSettingData.value.type,
+      type: '1', // 百度翻译
-      appId: translationSettingData.value.appId,
+      appId: baiduSettingData.value.appId,
-      secretKey: translationSettingData.value.secretKey,
+      secretKey: baiduSettingData.value.secretKey,
-      appKey: translationSettingData.value.appKey,
+      appKey: '', // 有道翻译相关的字段清空
-      appSecret: translationSettingData.value.appSecret
+      appSecret: ''
     };
     await updateSetting(params);
-    ElMessage.success('翻译配置更新成功');
+    ElMessage.success('百度翻译配置更新成功');
+
+    // 更新初始数据
+    Object.assign(initialBaiduData.value, {
+      appId: baiduSettingData.value.appId,
+      secretKey: baiduSettingData.value.secretKey
+    });
   } catch (error) {
-    console.error('更新翻译配置失败:', error);
+    console.error('更新百度翻译配置失败:', error);
-    ElMessage.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 resetTranslationForm = () => {
+const resetBaiduForm = () => {
-  const formRef = proxy.$refs.translationFormRef as (typeof import('element-plus'))['ElForm'];
+  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(() => {

im-admin/ruoyi-im/src/main/java/org/dromara/im/service/impl/ImSettingServiceImpl.java

@@ -284,7 +284,7 @@ public class ImSettingServiceImpl implements IImSettingService {
                 return false;
             }
             origin.setType("2");
-            origin.setAppId(value.getStr("appKey"));
+            origin.setAppKey(value.getStr("appKey"));
             origin.setAppSecret(value.getStr("appSecret"));
         }