新增: 飞书设置面板
This commit is contained in:
@@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<!-- ═══ 飞书集成(桌面端内置飞书渠道:WS 直连飞书开放平台,凭证在此配置) ═══ -->
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<h2>{{ $t('settings.panelFeishu') }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="feishu-settings">
|
||||||
|
<SettingRow :label="$t('settings.labelFeishuEnabled')" :desc="$t('settings.descFeishuEnabled')">
|
||||||
|
<label class="toggle">
|
||||||
|
<input type="checkbox" v-model="form.enabled" />
|
||||||
|
<span class="toggle-slider"></span>
|
||||||
|
</label>
|
||||||
|
</SettingRow>
|
||||||
|
|
||||||
|
<SettingRow :label="$t('settings.labelFeishuAppId')" :desc="$t('settings.descFeishuAppId')">
|
||||||
|
<input
|
||||||
|
v-model="form.app_id"
|
||||||
|
type="text"
|
||||||
|
class="setting-input feishu-input"
|
||||||
|
:placeholder="$t('settings.phFeishuAppId')"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</SettingRow>
|
||||||
|
|
||||||
|
<SettingRow :label="$t('settings.labelFeishuAppSecret')" :desc="$t('settings.descFeishuAppSecret')">
|
||||||
|
<input
|
||||||
|
v-model="form.app_secret"
|
||||||
|
:type="secretVisible ? 'text' : 'password'"
|
||||||
|
class="setting-input feishu-input"
|
||||||
|
autocomplete="new-password"
|
||||||
|
/>
|
||||||
|
<!-- 掩码显隐复用 Provider 密钥的「显示/隐藏」文案,语义一致不另造键 -->
|
||||||
|
<button class="btn btn-ghost btn-sm" type="button" @click="secretVisible = !secretVisible">
|
||||||
|
{{ secretVisible ? $t('settings.apiKeyHide') : $t('settings.apiKeyShow') }}
|
||||||
|
</button>
|
||||||
|
</SettingRow>
|
||||||
|
|
||||||
|
<SettingRow :label="$t('settings.labelFeishuWhitelist')" :desc="$t('settings.descFeishuWhitelist')">
|
||||||
|
<textarea
|
||||||
|
v-model="form.whitelist"
|
||||||
|
class="setting-input feishu-whitelist"
|
||||||
|
:placeholder="$t('settings.phFeishuWhitelist')"
|
||||||
|
></textarea>
|
||||||
|
</SettingRow>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button class="btn btn-primary btn-sm" :disabled="saving" @click="save">
|
||||||
|
{{ $t('settings.feishuSave') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useAppSettingsStore } from '@/stores/appSettings'
|
||||||
|
import SettingRow from './SettingRow.vue'
|
||||||
|
|
||||||
|
// ============================================================
|
||||||
|
// 飞书集成配置 — 桌面端内置飞书渠道(WS 直连飞书开放平台)的凭证表单
|
||||||
|
// ------------------------------------------------------------
|
||||||
|
// 持久化走 appSettings KV('feishu-config',store 层把对象 JSON.stringify 成
|
||||||
|
// JSON 字符串落 app_settings 表,与后端 'df-knowledge-config' 同一存法)。
|
||||||
|
// 四字段作为一份整体「保存」提交而非逐字段即时落库:WS 连接逻辑只认完整凭证,
|
||||||
|
// 半份配置(有 id 无 secret)落库会被连接方读到,故 enabled=true 时 id/secret
|
||||||
|
// 必填的校验拦在写库之前,校验不过不写。
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
/** app_settings KV 键(与后端渠道侧约定一致,勿单方改动) */
|
||||||
|
const FEISHU_CONFIG_KEY = 'feishu-config'
|
||||||
|
|
||||||
|
/** 飞书凭证形态(与后端字段契约对齐,snake_case 直存不转驼峰) */
|
||||||
|
interface FeishuConfig {
|
||||||
|
enabled: boolean
|
||||||
|
app_id: string
|
||||||
|
app_secret: string
|
||||||
|
/** 逗号分隔 open_id,空 = 放行所有 */
|
||||||
|
whitelist: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 接共享 toast 通道(Settings.vue showToast),与 AllowedDirsPanel 同范式
|
||||||
|
const emit = defineEmits<{ (e: 'toast', msg: string, type: 'error' | 'warning' | 'info' | 'success'): void }>()
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const appSettings = useAppSettingsStore()
|
||||||
|
|
||||||
|
const form = reactive<FeishuConfig>({ enabled: false, app_id: '', app_secret: '', whitelist: '' })
|
||||||
|
const secretVisible = ref(false)
|
||||||
|
const saving = ref(false)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// KV 值由 store 启动 loadAll 统一 JSON.parse 进缓存,此处同步读;
|
||||||
|
// 逐字段回退默认,防历史脏数据缺字段时 v-model 绑到 undefined
|
||||||
|
const saved = appSettings.get<Partial<FeishuConfig>>(FEISHU_CONFIG_KEY, {})
|
||||||
|
form.enabled = saved.enabled === true
|
||||||
|
form.app_id = typeof saved.app_id === 'string' ? saved.app_id : ''
|
||||||
|
form.app_secret = typeof saved.app_secret === 'string' ? saved.app_secret : ''
|
||||||
|
form.whitelist = typeof saved.whitelist === 'string' ? saved.whitelist : ''
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 保存:enabled=true 时 id/secret 必填,不过校验不落库;整体替换写单一 KV 键 */
|
||||||
|
async function save() {
|
||||||
|
if (form.enabled && (!form.app_id.trim() || !form.app_secret.trim())) {
|
||||||
|
emit('toast', t('settings.feishuValidateIncomplete'), 'warning')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
await appSettings.set(FEISHU_CONFIG_KEY, {
|
||||||
|
enabled: form.enabled,
|
||||||
|
app_id: form.app_id.trim(),
|
||||||
|
app_secret: form.app_secret.trim(),
|
||||||
|
whitelist: form.whitelist.trim(),
|
||||||
|
})
|
||||||
|
emit('toast', t('settings.feishuSaveOk'), 'success')
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[FEISHU-CONFIG] 保存失败:', e)
|
||||||
|
emit('toast', t('settings.toastSaveFail', { msg: String(e) }), 'error')
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* panel/panel-header/btn 系列/setting-input 均在 settings.css 全局,此处仅本面板特有样式 */
|
||||||
|
.feishu-settings { display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
.feishu-input { width: 280px; }
|
||||||
|
.feishu-whitelist {
|
||||||
|
width: 320px;
|
||||||
|
min-height: 64px;
|
||||||
|
resize: vertical;
|
||||||
|
font-family: var(--df-font-mono, monospace);
|
||||||
|
}
|
||||||
|
.actions { display: flex; gap: 8px; margin-top: 8px; }
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user