intelligent-etmf-system-web/src/views/setting/textin/index.vue

<template>
  <div class="p-4">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">TextIn 配置</span>
          <span class="card-subtitle">配置 TextIn API 的认证信息</span>
        </div>
      </template>

      <el-form
        ref="textinFormRef"
        :model="form"
        :rules="rules"
        label-width="150px"
        class="textin-form"
        v-loading="loading"
      >
        <el-form-item label="x-ti-app-id" prop="appId">
          <el-input
            v-model="form.appId"
            placeholder="请输入 x-ti-app-id"
            clearable
            maxlength="100"
            show-word-limit
          />
          <div class="form-tip">用于 TextIn API 认证的应用 ID</div>
        </el-form-item>

        <el-form-item label="x-ti-secret-code" prop="secretCode">
          <el-input
            v-model="form.secretCode"
            placeholder="请输入 x-ti-secret-code"
            clearable
            maxlength="100"
            show-word-limit
            type="password"
            show-password
          />
          <div class="form-tip">用于 TextIn API 认证的密钥</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="saving" v-hasPermi="['setting:textin:edit']">
            <el-icon><Check /></el-icon>
            保存配置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="Textin" lang="ts">
import { getTextinConfig, updateTextinConfig } from '@/api/setting/textin';
import { TextinForm } from '@/api/setting/textin/types';
import { Check } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const textinFormRef = ref<ElFormInstance>();
const loading = ref(false);
const saving = ref(false);

const initFormData: TextinForm = {
  id: undefined,
  appId: undefined,
  secretCode: undefined,
};

const form = ref<TextinForm>({ ...initFormData });

const rules = reactive({
  appId: [
    { required: true, message: '请输入 App ID', trigger: 'blur' }
  ],
  secretCode: [
    { required: true, message: '请输入 Secret Code', trigger: 'blur' }
  ]
});

/** 获取配置 */
const getConfig = async () => {
  loading.value = true;
  try {
    const res = await getTextinConfig();
    form.value = { ...res.data };
  } catch (error) {
    console.error('获取配置失败:', error);
    proxy?.$modal.msgError('获取配置失败');
  } finally {
    loading.value = false;
  }
};

/** 保存配置 */
const handleSave = () => {
  textinFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      saving.value = true;
      try {
        await updateTextinConfig(form.value);
        proxy?.$modal.msgSuccess('保存成功');
      } catch (error) {
        console.error('保存失败:', error);
        proxy?.$modal.msgError('保存失败');
      } finally {
        saving.value = false;
      }
    }
  });
};

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

<style scoped lang="scss">
.card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .card-subtitle {
    font-size: 13px;
    color: #909399;
  }
}

.textin-form {
  max-width: 800px;
  margin-top: 20px;

  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.5;
  }

  :deep(.el-form-item__content) {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>