ai-doc-template-system/frontend/src/components/TemplateEdit/ConfigPanel.vue

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { CloseOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

type RegionType = "ai_generate" | "manual" | "fixed" | "table";

const selectedBlock = ref({
  block_id: "block_003",
  text_preview: "一、经营概况",
});
const saving = ref(false);

const dataSourceOptions = [
  { code: "policy", name: "政策文件" },
  { code: "business_data", name: "业务数据" },
  { code: "research", name: "调研材料" },
];

const form = reactive({
  region_name: selectedBlock.value.text_preview,
  region_type: "ai_generate" as RegionType,
  data_sources: ["business_data"],
  prompt: "请基于业务数据生成经营概况，突出核心指标变化和原因。",
  output_format: "formal_paragraph",
  need_review: 1,
  remark: "",
  enabled: 1,
});

const promptCount = computed(() => form.prompt.length);
const remarkCount = computed(() => form.remark.length);

function addDataSource(code: string) {
  if (!form.data_sources.includes(code)) {
    form.data_sources.push(code);
  }
}

function removeDataSource(code: string) {
  form.data_sources = form.data_sources.filter((item) => item !== code);
}

function sourceName(code: string) {
  return dataSourceOptions.find((item) => item.code === code)?.name ?? code;
}

async function saveConfig() {
  saving.value = true;
  try {
    await new Promise((resolve) => window.setTimeout(resolve, 500));
    message.success("配置已保存");
  } catch {
    message.error("配置保存失败");
  } finally {
    saving.value = false;
  }
}
</script>

<template>
  <aside class="config-panel">
    <div class="panel-tabs">
      <button class="tab active" type="button">区域配置</button>
      <button class="tab" type="button">批量规则</button>
    </div>

    <div v-if="!selectedBlock" class="empty-state">
      <h2>未选择区域</h2>
      <p>请选择文档预览中的标题、段落或表格。</p>
    </div>

    <div v-else class="panel-body">
      <section class="section">
        <h2>基础信息</h2>
        <label>
          区域名称
          <a-input v-model:value="form.region_name" :placeholder="selectedBlock.text_preview" />
        </label>
        <label>
          区域类型
          <a-select v-model:value="form.region_type">
            <a-select-option value="ai_generate">AI 生成</a-select-option>
            <a-select-option value="manual">人工填写</a-select-option>
            <a-select-option value="fixed">固定内容</a-select-option>
            <a-select-option value="table">表格区域</a-select-option>
          </a-select>
        </label>
      </section>

      <section class="section">
        <h2>数据来源</h2>
        <div class="tag-list">
          <span v-for="code in form.data_sources" :key="code" class="source-chip">
            {{ sourceName(code) }}
            <button type="button" aria-label="移除数据源" @click="removeDataSource(code)">
              <CloseOutlined />
            </button>
          </span>
          <a-dropdown trigger="click">
            <button class="add-chip" type="button">
              <PlusOutlined />
              添加
            </button>
            <template #overlay>
              <a-menu>
                <a-menu-item
                  v-for="item in dataSourceOptions"
                  :key="item.code"
                  :disabled="form.data_sources.includes(item.code)"
                  @click="addDataSource(item.code)"
                >
                  {{ item.name }}
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </section>

      <section class="section">
        <h2>生成规则</h2>
        <label>
          提示词
          <a-textarea v-model:value="form.prompt" :rows="7" :maxlength="1000" />
          <span class="count">{{ promptCount }}/1000</span>
        </label>
        <label>
          输出格式
          <a-select v-model:value="form.output_format">
            <a-select-option value="formal_paragraph">正式段落</a-select-option>
            <a-select-option value="bullet_list">要点列表</a-select-option>
            <a-select-option value="table_summary">表格摘要</a-select-option>
          </a-select>
        </label>
        <div class="field">
          <span class="field-label">是否需要审核</span>
          <a-radio-group v-model:value="form.need_review">
            <a-radio :value="1">需要</a-radio>
            <a-radio :value="0">不需要</a-radio>
          </a-radio-group>
        </div>
      </section>

      <section class="section">
        <h2>备注</h2>
        <label>
          <a-textarea v-model:value="form.remark" :rows="4" :maxlength="300" />
          <span class="count">{{ remarkCount }}/300</span>
        </label>
      </section>

      <a-button block type="primary" :loading="saving" @click="saveConfig">
        <template #icon><SaveOutlined /></template>
        保存配置
      </a-button>
    </div>
  </aside>
</template>

<style scoped>
.config-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
}

.panel-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--c-border);
}

.tab {
  padding: 12px 16px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--c-text-secondary);
  background: transparent;
  cursor: pointer;
}

.tab.active {
  border-bottom-color: var(--c-primary);
  color: var(--c-primary);
  font-weight: 500;
}

.panel-body {
  min-height: 0;
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.section {
  margin-bottom: 18px;
}

.section h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
}

label,
.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--c-text-secondary);
  font-size: 12px;
}

.field-label {
  font-weight: 500;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-chip,
.add-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  gap: 5px;
  padding: 0 9px;
  border-radius: 13px;
  font-size: 12px;
}

.source-chip {
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

.source-chip button,
.add-chip {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.source-chip button {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  padding: 0;
  color: inherit;
  font-size: 10px;
}

.add-chip {
  border: 1px dashed var(--c-border);
  color: var(--c-text-muted);
}

.count {
  justify-self: end;
  color: var(--c-text-muted);
  font-size: 11px;
}

.empty-state {
  display: grid;
  flex: 1;
  place-content: center;
  padding: 32px;
  color: var(--c-text-muted);
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 6px;
  color: var(--c-text);
  font-size: 15px;
}

.empty-state p {
  margin: 0;
}
</style>