schoolNews/schoolNewsWeb/src/views/admin/manage/ai/AIConfigView.vue

<template>
  <AdminLayout title="AI配置" subtitle="AI配置">
    <div class="ai-config">
      <el-form :model="configForm" label-width="150px" class="config-form">
        <el-divider content-position="left">模型配置</el-divider>
        
        <el-form-item label="AI模型">
          <el-select v-model="configForm.model" placeholder="选择AI模型">
            <el-option label="GPT-3.5" value="gpt-3.5" />
            <el-option label="GPT-4" value="gpt-4" />
            <el-option label="Claude" value="claude" />
          </el-select>
        </el-form-item>

        <el-form-item label="API Key">
          <el-input v-model="configForm.apiKey" type="password" show-password />
        </el-form-item>

        <el-form-item label="API地址">
          <el-input v-model="configForm.apiUrl" />
        </el-form-item>

        <el-divider content-position="left">对话配置</el-divider>

        <el-form-item label="温度值">
          <el-slider v-model="configForm.temperature" :min="0" :max="2" :step="0.1" show-input />
          <span class="help-text">控制回答的随机性，值越大回答越随机</span>
        </el-form-item>

        <el-form-item label="最大token数">
          <el-input-number v-model="configForm.maxTokens" :min="100" :max="4000" />
        </el-form-item>

        <el-form-item label="历史对话轮数">
          <el-input-number v-model="configForm.historyTurns" :min="1" :max="20" />
        </el-form-item>

        <el-divider content-position="left">功能配置</el-divider>

        <el-form-item label="启用流式输出">
          <el-switch v-model="configForm.enableStreaming" />
        </el-form-item>

        <el-form-item label="启用文件解读">
          <el-switch v-model="configForm.enableFileInterpretation" />
        </el-form-item>

        <el-form-item label="启用知识库检索">
          <el-switch v-model="configForm.enableKnowledgeRetrieval" />
        </el-form-item>

        <el-form-item label="系统提示词">
          <el-input 
            v-model="configForm.systemPrompt" 
            type="textarea" 
            :rows="6"
            placeholder="设置AI助手的角色和行为..."
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave">保存配置</el-button>
          <el-button @click="handleTest">测试连接</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </AdminLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElSlider, ElInputNumber, ElSwitch, ElButton, ElDivider, ElMessage } from 'element-plus';
import { AdminLayout } from '@/views/admin';
defineOptions({
  name: 'AIConfigView'
});
const configForm = ref({
  model: 'gpt-3.5',
  apiKey: '',
  apiUrl: '',
  temperature: 0.7,
  maxTokens: 2000,
  historyTurns: 5,
  enableStreaming: true,
  enableFileInterpretation: true,
  enableKnowledgeRetrieval: true,
  systemPrompt: ''
});

onMounted(() => {
  loadConfig();
});

function loadConfig() {
  // TODO: 加载AI配置
}

function handleSave() {
  // TODO: 保存配置
  ElMessage.success('配置保存成功');
}

function handleTest() {
  // TODO: 测试API连接
  ElMessage.info('正在测试连接...');
}

function handleReset() {
  // TODO: 重置配置
}
</script>

<style lang="scss" scoped>
.ai-config {
  padding: 20px;
  max-width: 800px;
}

.config-form {
  .help-text {
    font-size: 12px;
    color: #999;
    margin-left: 12px;
  }
}
</style>