feat(pwl):优化报告界面交互与视觉效果

- 主要按钮添加类型和样式类以增强视觉层次- 将“生成文件”按钮文案改为“下载文件”,并调整为危险类型- 更新子章节按钮样式,从文本类型改为主要类型- 移除描述区域注释,待后续重新启用- 修改文本域占位符提示文字,引导用户使用AI生成功能
- 在主内容及子内容区域增加AI助手输入框和发送按钮
- 新增内嵌按钮样式以改善AI助手输入框的布局与交互
- 添加“生成全部方案”按钮的自定义橙色主题样式- 调整章节描述文字颜色并移除左侧边框线样式
This commit is contained in:
2025-09-28 12:10:38 +08:00
parent fc7b582aec
commit 26859ac169

View File

@@ -37,7 +37,7 @@
<a-card style="margin-bottom: 20px; text-align: center; background: transparent" :bordered="false">
<a-space>
<a-button size="large" @click="handleGenerateAll" :loading="generatingAll">
<a-button size="large" type="primary" @click="handleGenerateAll" :loading="generatingAll" class="generate-all-button">
<template #icon>
<UngroupOutlined/>
</template>
@@ -55,11 +55,11 @@
</template>
加载草稿
</a-button>
<a-button size="large" @click="handleExport">
<a-button size="large" type="danger" class="export-button" @click="handleExport">
<template #icon>
<UploadOutlined/>
</template>
生成文件
下载文件
</a-button>
</a-space>
</a-card>
@@ -121,8 +121,7 @@
>
<template #extra>
<a-button
type="text"
size="small"
type="primary"
@click="generateContent(index)"
:loading="item.generating"
>
@@ -133,36 +132,35 @@
</a-button>
</template>
<div v-if="item.description" class="section-description">
{{ item.description }}
</div>
<!-- <div v-if="item.description" class="section-description">-->
<!-- {{ item.description }}-->
<!-- </div>-->
<!-- 单内容部分 -->
<template v-if="!item.children">
<a-textarea
v-model:value="item.content"
:rows="item.rows || 8"
:placeholder="item.placeholder"
:placeholder="'点击(AI生成)按钮让AI为您生成该部分内容或直接填入'"
class="content-textarea"
style="margin-top: 16px; background-color: #f0fdf4"
/>
<div style="margin-top: 12px">
<div style="margin-top: 12px;">
<div class="question-prompt">AI小助手</div>
<div class="flex flex-col gap-2 justify-center items-start">
<div class="textarea-with-button" style="width: 600px">
<a-textarea
v-model:value="item.suggestion"
:rows="3"
placeholder="请输入优化提示词并回车..."
class="suggestion-textarea"
style="flex: 1;"
placeholder="请输入您的要求并回车..."
class="suggestion-textarea-inner"
@pressEnter="generateContent(index)"
/>
<a-button
type="primary"
type="danger"
size="small"
@click="generateContent(index)"
:loading="item.generating"
style="align-self: flex-end; margin-bottom: 4px;"
class="send-button-inner"
>
<template #icon>
<RobotOutlined/>
@@ -198,6 +196,32 @@
class="content-textarea"
style="margin-top: 12px; background-color: #f0fdf4"
/>
<!-- AI小助手功能 -->
<div style="margin-top: 12px">
<div class="question-prompt">AI小助手</div>
<div class="textarea-with-button" style="width: 600px">
<a-textarea
v-model:value="child.suggestion"
:rows="3"
placeholder="请输入优化提示词并回车..."
class="suggestion-textarea-inner"
@pressEnter="generateContent(index, childIndex)"
/>
<a-button
type="danger"
size="small"
@click="generateContent(index, childIndex)"
:loading="child.generating"
class="send-button-inner"
>
<template #icon>
<RobotOutlined/>
</template>
发送
</a-button>
</div>
</div>
</div>
</template>
</a-card>
@@ -937,6 +961,40 @@ export default {
}
}
/* textarea内嵌按钮样式 */
.textarea-with-button {
position: relative;
.suggestion-textarea-inner {
padding-right: 70px !important;
border-radius: 6px;
&:focus {
border-color: #1677ff !important;
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1) !important;
}
&:hover {
border-color: #4096ff !important;
}
}
.send-button-inner {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 10;
padding: 4px 12px;
height: 28px;
font-size: 12px;
&:hover {
transform: none;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}
}
}
:deep(.export-button) {
border: 2px solid #ff4d4f !important;
border-radius: 20px !important;
@@ -968,6 +1026,24 @@ export default {
}
}
/* 生成全部方案按钮橙色样式 */
:deep(.generate-all-button) {
background-color: #ff7b00 !important;
border-color: #ff7b00 !important;
&:hover {
background-color: #e56500 !important;
border-color: #e56500 !important;
box-shadow: 0 4px 12px rgba(255, 123, 0, 0.4) !important;
}
&:focus {
background-color: #e56500 !important;
border-color: #e56500 !important;
box-shadow: 0 4px 12px rgba(255, 123, 0, 0.4) !important;
}
}
.navigation-container {
.nav-grid {
display: grid;
@@ -1041,13 +1117,12 @@ export default {
scroll-margin-top: 20px;
.section-description {
color: #666;
color: #999999;
font-size: 14px;
margin-bottom: 8px;
padding: 12px;
background: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #1890ff;
}
.child-section {