linweidong
/
csg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构规则编辑页面布局为左右分栏

Browse Source
master^2
๏ 2 days ago
parent 616e5bf891
commit 46f5d318bd
1 changed files with 126 additions and 105 deletions
Show Stats Download Patch File Download Diff File

231
src/views/module_rule/rule_list/RuleEdit.vue
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save