feat: complete config panel form

frontend/src/components/TemplateEdit/ConfigPanel.vue

@@ -1,19 +1,85 @@
+<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 class="panel-body">
+
+    <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 placeholder="请选择预览区块" />
+          <a-input v-model:value="form.region_name" :placeholder="selectedBlock.text_preview" />
         </label>
         <label>
           区域类型
-          <a-select value="ai_generate">
+          <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>
@@ -21,11 +87,73 @@
           </a-select>
         </label>
       </section>
+
       <section class="section">
-        <h2>提示词</h2>
-        <a-textarea :rows="6" placeholder="选择区域后配置提示词" />
+        <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>
-      <a-button block type="primary">保存配置</a-button>
+
+      <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>
@@ -79,11 +207,86 @@
   font-size: 14px;
 }
 
-label {
+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>