feat: add template edit shell layout

2026-07-01 20:34:24 +08:00
parent 217af9bc99
commit b4e128c227
9 changed files with 579 additions and 6 deletions
@@ -0,0 +1,89 @@
+<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">
+      <section class="section">
+        <h2>基础信息</h2>
+        <label>
+          区域名称
+          <a-input placeholder="请选择预览区块" />
+        </label>
+        <label>
+          区域类型
+          <a-select value="ai_generate">
+            <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>
+        <a-textarea :rows="6" placeholder="选择区域后配置提示词" />
+      </section>
+      <a-button block type="primary">保存配置</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 {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 12px;
+  color: var(--c-text-secondary);
+  font-size: 12px;
+}
+</style>