更新界面
This commit is contained in:
parent
c448046229
commit
c6dedb9167
|
|
@ -4,7 +4,7 @@
|
|||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<router-link to="/document-generation" class="back-button">
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回文档生成
|
||||
</router-link>
|
||||
<h1>文档续写与版本控制</h1>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
</div>
|
||||
|
||||
<div v-if="versionHistory.length === 0" class="empty-history">
|
||||
<i class="el-icon-document"></i>
|
||||
<el-icon><Document /></el-icon>
|
||||
<p>暂无版本历史</p>
|
||||
<p>保存版本后会显示在这里</p>
|
||||
</div>
|
||||
|
|
@ -305,6 +305,7 @@
|
|||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft, Document } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<el-button link @click="goBack" class="back-button">
|
||||
<router-link to="/document-generation" class="back-button">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
返回文档生成
|
||||
</router-link>
|
||||
<h2>技术文件生成</h2>
|
||||
<div class="header-buttons">
|
||||
<el-button @click="loadSampleData" type="success" plain size="small">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<!-- 步骤指示器 -->
|
||||
<div class="steps-container">
|
||||
<el-steps :active="currentStep" align-center finish-status="success">
|
||||
<el-steps :active="currentStep" align-center>
|
||||
<el-step title="标题及要点" />
|
||||
<el-step title="全文要点" />
|
||||
<el-step title="提纲" />
|
||||
|
|
@ -395,6 +395,7 @@
|
|||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { marked } from 'marked'
|
||||
|
||||
// 路由导航
|
||||
|
|
@ -1008,11 +1009,6 @@ onMounted(() => {
|
|||
}
|
||||
})
|
||||
|
||||
// 路由导航方法
|
||||
const goBack = () => {
|
||||
router.push('/document-generation')
|
||||
}
|
||||
|
||||
// 新增步骤5的功能
|
||||
const generateContinuation = async () => {
|
||||
loading.value = true
|
||||
|
|
@ -1239,8 +1235,19 @@ const loadSampleData = () => {
|
|||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f0f9ff;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
|
|
@ -1252,113 +1259,64 @@ const loadSampleData = () => {
|
|||
|
||||
.steps-container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
padding: 16px 20px;
|
||||
margin: 0 20px 16px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
min-height: 80px;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
/* 步骤组件样式修复 */
|
||||
.steps-container :deep(.el-steps) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__head) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__line) {
|
||||
right: 0;
|
||||
left: 50%;
|
||||
width: calc(100% - 20px);
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
background: #e4e7ed;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__line-inner) {
|
||||
display: block;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-process .el-step__line-inner) {
|
||||
border-color: #409eff;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-finish .el-step__line-inner) {
|
||||
border-color: #67c23a;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-wait .el-step__line-inner) {
|
||||
border-color: #e4e7ed;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__icon) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-process .el-step__icon) {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
border: 2px solid #409eff;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-finish .el-step__icon) {
|
||||
background: #67c23a;
|
||||
color: white;
|
||||
border: 2px solid #67c23a;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-wait .el-step__icon) {
|
||||
background: white;
|
||||
color: #c0c4cc;
|
||||
border: 2px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__title) {
|
||||
/* Element Plus 样式覆盖 */
|
||||
:deep(.el-step__title) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-top: 8px;
|
||||
line-height: 1.2;
|
||||
overflow: visible !important;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-process .el-step__title) {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
:deep(.el-step__description) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-finish .el-step__title) {
|
||||
color: #67c23a;
|
||||
font-weight: 600;
|
||||
:deep(.el-step__main) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step.is-wait .el-step__title) {
|
||||
color: #c0c4cc;
|
||||
:deep(.el-step__head) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.el-steps) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.el-step) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.el-step__line) {
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* 确保步骤连接线正确显示 */
|
||||
:deep(.el-step__line-inner) {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
:deep(.el-steps--horizontal .el-step__line) {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
|
|
@ -1541,16 +1499,6 @@ const loadSampleData = () => {
|
|||
margin: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__title) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.steps-container :deep(.el-step__icon) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<router-link to="/" class="back-button">
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回主页
|
||||
</router-link>
|
||||
<div class="page-title">
|
||||
<i class="el-icon-document title-icon"></i>
|
||||
<el-icon class="title-icon"><Document /></el-icon>
|
||||
<h1>文档生成</h1>
|
||||
</div>
|
||||
<div></div> <!-- 占位元素保持布局平衡 -->
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
>
|
||||
<div class="feature-content">
|
||||
<div class="feature-icon">
|
||||
<i :class="item.icon"></i>
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.description }}</p>
|
||||
<div class="feature-action">
|
||||
<el-button type="primary">
|
||||
开始使用
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,6 +46,15 @@
|
|||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Document,
|
||||
Microphone,
|
||||
Edit,
|
||||
List,
|
||||
Switch
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -54,42 +63,42 @@ const documentFeatures = [
|
|||
id: 'technical-document',
|
||||
title: '技术文件生成',
|
||||
description: '根据技术要求，智能生成标准化的技术文件',
|
||||
icon: 'el-icon-document',
|
||||
icon: Document,
|
||||
route: '/document-generation/technical-document'
|
||||
},
|
||||
{
|
||||
id: 'speech-generation',
|
||||
title: '讲话稿生成',
|
||||
description: '根据主题和要求，快速生成高质量的讲话稿',
|
||||
icon: 'el-icon-microphone',
|
||||
icon: Microphone,
|
||||
route: '/document-generation/speech-generation'
|
||||
},
|
||||
{
|
||||
id: 'document-continuation',
|
||||
title: '文档续写',
|
||||
description: '基于现有文档内容，智能延续和扩展文档',
|
||||
icon: 'el-icon-edit',
|
||||
icon: Edit,
|
||||
route: '/document-generation/document-continuation'
|
||||
},
|
||||
{
|
||||
id: 'work-summary',
|
||||
title: '工作总结',
|
||||
description: '根据工作内容和成果，智能生成工作总结报告',
|
||||
icon: 'el-icon-s-order',
|
||||
icon: List,
|
||||
route: '/document-generation/work-summary'
|
||||
},
|
||||
{
|
||||
id: 'key-info-extraction',
|
||||
title: '关键信息提取',
|
||||
description: '从音频文件中提取关键信息和内容摘要',
|
||||
icon: 'el-icon-microphone',
|
||||
icon: Microphone,
|
||||
route: '/document-generation/key-info-extraction'
|
||||
},
|
||||
{
|
||||
id: 'multilingual-processing',
|
||||
title: '文档多语种处理',
|
||||
description: '将文档内容翻译成多种语言，支持批量处理',
|
||||
icon: 'el-icon-switch-button',
|
||||
icon: Switch,
|
||||
route: '/document-generation/multilingual-processing'
|
||||
}
|
||||
]
|
||||
|
|
@ -126,9 +135,12 @@ const navigateToFeature = (feature) => {
|
|||
font-size: 64px;
|
||||
color: #409EFF;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-icon i {
|
||||
.feature-icon .el-icon {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +176,7 @@ p {
|
|||
font-size: 48px;
|
||||
}
|
||||
|
||||
.feature-icon i {
|
||||
.feature-icon .el-icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@click="navigateToFeature(feature)"
|
||||
>
|
||||
<div class="feature-icon">
|
||||
<i :class="feature.icon"></i>
|
||||
<el-icon><component :is="feature.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h3>{{ feature.title }}</h3>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="feature-action">
|
||||
<el-button type="primary" size="large">
|
||||
开始使用
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,6 +54,13 @@
|
|||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
ArrowRight,
|
||||
Document,
|
||||
Service,
|
||||
ChatLineSquare,
|
||||
User
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -62,7 +69,7 @@ const features = [
|
|||
id: 'document-generation',
|
||||
title: '文档生成',
|
||||
description: '智能生成各类办公文档，包括技术文件、讲话稿等',
|
||||
icon: 'el-icon-document',
|
||||
icon: Document,
|
||||
route: '/document-generation',
|
||||
details: [
|
||||
'技术文件智能生成',
|
||||
|
|
@ -75,7 +82,7 @@ const features = [
|
|||
id: 'office-assistant',
|
||||
title: '办公助手',
|
||||
description: '多功能办公辅助工具，提升工作效率',
|
||||
icon: 'el-icon-service',
|
||||
icon: Service,
|
||||
route: '/office-assistant',
|
||||
details: [
|
||||
'文档错误智能纠正',
|
||||
|
|
@ -88,7 +95,7 @@ const features = [
|
|||
id: 'knowledge-qa',
|
||||
title: '知识问答',
|
||||
description: '基于知识库的智能问答系统',
|
||||
icon: 'el-icon-chat-line-square',
|
||||
icon: ChatLineSquare,
|
||||
route: '/knowledge-qa',
|
||||
details: [
|
||||
'知识库智能检索',
|
||||
|
|
@ -101,7 +108,7 @@ const features = [
|
|||
id: 'office-agent',
|
||||
title: '办公智能体',
|
||||
description: '专业的AI助手，协助完成各类办公任务',
|
||||
icon: 'el-icon-user',
|
||||
icon: User,
|
||||
route: '/office-agent',
|
||||
details: [
|
||||
'多专业领域智能体',
|
||||
|
|
@ -212,7 +219,7 @@ const navigateToFeature = (feature) => {
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.feature-icon i {
|
||||
.feature-icon .el-icon {
|
||||
font-size: 48px;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -313,7 +320,7 @@ const navigateToFeature = (feature) => {
|
|||
height: 80px;
|
||||
}
|
||||
|
||||
.feature-icon i {
|
||||
.feature-icon .el-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue