|
|
@@ -0,0 +1,153 @@
|
|
|
+<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>
|