From 46f5d318bd0dde4157e65118d603729d7932aae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=B9=8F?= <oncwnuFqOPqVWu6cj8w0dEdl_qj0@git.weixin.qq.com>
Date: Thu, 9 Jul 2026 17:52:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E8=A7=84?=
 =?UTF-8?q?=E5=88=99=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=BA=E5=B7=A6=E5=8F=B3=E5=88=86=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/module_rule/rule_list/RuleEdit.vue | 231 ++++++++++---------
 1 file changed, 126 insertions(+), 105 deletions(-)

diff --git a/src/views/module_rule/rule_list/RuleEdit.vue b/src/views/module_rule/rule_list/RuleEdit.vue
index d8d18ab..629dcf2 100644
--- a/src/views/module_rule/rule_list/RuleEdit.vue
+++ b/src/views/module_rule/rule_list/RuleEdit.vue
@@ -6,112 +6,110 @@
       <span class="page-title">{{ isEdit ? "编辑规则" : "新建规则" }}</span>
     </div>
 
-    <!-- 基础信息 -->
-    <ElCard class="form-card" shadow="never">
-      <template #header>
-        <span class="section-title">基础信息</span>
-      </template>
-      <ElForm
-        ref="formRef"
-        :model="form"
-        :rules="rules"
-        label-width="110px"
-        label-position="right"
-      >
-        <ElRow :gutter="24">
-          <ElCol :span="12">
-            <ElFormItem label="规则名称" prop="name" required>
-              <ElInput
-                v-model="form.name"
-                placeholder="请输入规则名称"
-                :maxlength="50"
-                show-word-limit
-              />
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="12">
-            <ElFormItem label="规则分类" prop="category_id" required>
-              <ElTreeSelect
-                v-model="form.category_id"
-                :data="categoryTree"
-                :props="treeSelectProps"
-                node-key="id"
-                check-strictly
-                placeholder="请选择规则分类"
-                filterable
-                clearable
-                style="width: 100%"
-              />
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-
-        <ElFormItem label="规则描述" prop="description">
-          <ElInput
-            v-model="form.description"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入规则描述（可选）"
-            :maxlength="200"
-            show-word-limit
-          />
-        </ElFormItem>
-
-        <ElFormItem label="状态" prop="status" required>
-          <ElRadioGroup v-model="form.status">
-            <ElRadio :value="0">启用</ElRadio>
-            <ElRadio :value="1">停用</ElRadio>
-          </ElRadioGroup>
-        </ElFormItem>
-      </ElForm>
-    </ElCard>
-
-    <!-- 提示词模板 -->
-    <ElCard class="form-card" shadow="never">
-      <template #header>
-        <span class="section-title">提示词模板</span>
-      </template>
-      <div class="prompt-section">
-        <!-- 提示栏 -->
-        <div class="prompt-hint-bar">
-          <span class="hint-item">
-            变量格式：<code class="var-code">${'{变量名}'}</code>，如
-            <code class="var-code">${'{合同全文内容}'}</code>；
-          </span>
-          <span class="hint-item">
-            知识库引用：<code class="kb-code">@知识库/文档名称</code>，如
-            <code class="kb-code">@知识库/GB/T 50326-2018</code>
-          </span>
-        </div>
+    <!-- 左右布局：基础信息 + 提示词模板 -->
+    <div class="edit-body">
+      <!-- 基础信息 -->
+      <ElCard class="form-card form-card--left" shadow="never">
+        <template #header>
+          <span class="section-title">基础信息</span>
+        </template>
+        <ElForm
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          label-width="110px"
+          label-position="right"
+        >
+          <ElFormItem label="规则名称" prop="name" required>
+            <ElInput
+              v-model="form.name"
+              placeholder="请输入规则名称"
+              :maxlength="50"
+              show-word-limit
+            />
+          </ElFormItem>
+
+          <ElFormItem label="规则分类" prop="category_id" required>
+            <ElTreeSelect
+              v-model="form.category_id"
+              :data="categoryTree"
+              :props="treeSelectProps"
+              node-key="id"
+              check-strictly
+              placeholder="请选择规则分类"
+              filterable
+              clearable
+              style="width: 100%"
+            />
+          </ElFormItem>
+
+          <ElFormItem label="规则描述" prop="description">
+            <ElInput
+              v-model="form.description"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入规则描述（可选）"
+              :maxlength="200"
+              show-word-limit
+            />
+          </ElFormItem>
+
+          <ElFormItem label="状态" prop="status" required>
+            <ElRadioGroup v-model="form.status">
+              <ElRadio :value="0">启用</ElRadio>
+              <ElRadio :value="1">停用</ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+        </ElForm>
+      </ElCard>
+
+      <!-- 提示词模板 -->
+      <ElCard class="form-card form-card--right" shadow="never">
+        <template #header>
+          <span class="section-title">提示词模板</span>
+        </template>
+        <div class="prompt-section">
+          <!-- 提示栏 -->
+          <div class="prompt-hint-bar">
+            <span class="hint-item">
+              变量格式：<code class="var-code">${变量名}</code>，如
+              <code class="var-code">${合同全文内容}</code>；
+            </span>
+            <span class="hint-item">
+              知识库引用：<code class="kb-code">@知识库/文档名称</code>，如
+              <code class="kb-code">@知识库/GB/T 50326-2018</code>
+            </span>
+          </div>
 
-        <!-- 代码编辑器样式 textarea -->
-        <div class="code-editor" ref="editorRef">
-          <div class="line-numbers">
-            <span
-              v-for="n in lineCount"
-              :key="n"
-              class="line-num"
-            >{{ n }}</span>
+          <!-- 代码编辑器样式 textarea -->
+          <div class="code-editor" ref="editorRef">
+            <div class="line-numbers">
+              <span
+                v-for="n in lineCount"
+                :key="n"
+                class="line-num"
+              >{{ n }}</span>
+            </div>
+            <textarea
+              ref="textareaRef"
+              v-model="form.prompt_template"
+              class="code-textarea"
+              spellcheck="false"
+              placeholder="请输入提示词模板。输入 @ 可弹出知识库引用选择器"
+              @input="handlePromptInput"
+              @keydown="handlePromptKeydown"
+              @scroll="syncScroll"
+            />
           </div>
-          <textarea
-            ref="textareaRef"
-            v-model="form.prompt_template"
-            class="code-textarea"
-            spellcheck="false"
-            placeholder="请输入提示词模板。输入 @ 可弹出知识库引用选择器"
-            @input="handlePromptInput"
-            @keydown="handlePromptKeydown"
-            @scroll="syncScroll"
-          />
-        </div>
 
-        <!-- 底部状态栏 -->
-        <div class="editor-footer">
-          <span class="tab-hint">按 Tab 键插入缩进</span>
-          <span class="char-count">{{ form.prompt_template.length }} 字符</span>
+          <!-- 底部状态栏 -->
+          <div class="editor-footer">
+            <span class="tab-hint">按 Tab 键插入缩进</span>
+            <span class="char-count">{{ form.prompt_template.length }} 字符</span>
+          </div>
         </div>
-      </div>
-    </ElCard>
+      </ElCard>
+    </div>
 
     <div class="footer-actions">
       <ElButton @click="handleBack">取消</ElButton>
@@ -334,6 +332,7 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .page-title {
@@ -342,6 +341,16 @@ onMounted(async () => {
   color: #111827;
 }
 
+/* 左右布局主体 */
+.edit-body {
+  flex: 1;
+  display: flex;
+  gap: 12px;
+  min-height: 0;
+  align-items: flex-start;
+  overflow: hidden;
+}
+
 .form-card {
   border-radius: 8px;
   border: 1px solid #e5e7eb;
@@ -356,6 +365,18 @@ onMounted(async () => {
   }
 }
 
+.form-card--left {
+  width: 420px;
+  min-width: 420px;
+  flex-shrink: 0;
+}
+
+.form-card--right {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+
 .section-title {
   font-size: 15px;
   font-weight: 600;
@@ -367,6 +388,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   gap: 0;
+  height: 100%;
 }
 
 .prompt-hint-bar {
@@ -404,12 +426,11 @@ onMounted(async () => {
 
 /* 代码编辑器样式 */
 .code-editor {
+  flex: 1;
   display: flex;
   border: 1px solid #dcdfe6;
   border-radius: 0 0 6px 6px;
   background: #fff;
-  min-height: 360px;
-  max-height: 600px;
   overflow: hidden;
   position: relative;
 
@@ -449,7 +470,7 @@ onMounted(async () => {
   line-height: 20px;
   color: #1f2937;
   background: #fff;
-  min-height: 360px;
+  min-height: 400px;
   tab-size: 2;
   white-space: pre;
   overflow-wrap: normal;