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

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

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

Write Preview
Loading…
Cancel
Save