当前位置：首页 > web >正文

山东大学软件学院创新项目实训开发日志——第十六周

web 2025/6/15 13:32:03

本周我所做的工作：

一、优化人脸识别前端界面展示

优化前：

优化后：

主要代码与逻辑更改：

视觉设计亮点

科技感UI设计：
- 使用深色渐变背景（#0f0c29到#302b63）营造科技感氛围
- 发光标题（text-shadow: 0 0 10px rgba(0,255,136,0.3)）增强视觉吸引力
- 按钮采用渐变设计（linear-gradient）提升视觉层次

动态扫描效果：

.scan-line {animation: scan 2s infinite linear;background: linear-gradient(to right, transparent, #00ff88, transparent);
}
@keyframes scan {0% { transform: translateY(-100%); }100% { transform: translateY(400%); }
}

扫描线动画提供了直观的识别状态反馈

加载状态指示器：
- 三点跳动动画（bounce）增强等待体验
- 状态文本颜色与主题色协调

交互体验优化

响应式设计：

@media (max-width: 768px) {/* 移动端优化 */.button-group { flex-direction: column; }.action-btn { width: 100%; }
}

确保在各种设备上都有良好的用户体验

结果卡片动画：

.slide-up-enter-active, .slide-up-leave-active {transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

使用贝塞尔曲线实现自然平滑的入场动画

按钮状态反馈：
- 悬停效果：transform: translateY(-2px)和box-shadow
- 禁用状态：opacity: 0.6和cursor: not-allowed

功能实现优化

摄像头处理：

// 正确释放摄像头资源
stopCapture() {mediaStream.value?.getTracks().forEach(track => track.stop())
}

超时处理机制：

let timeout = setTimeout(() => {showResult('识别超时，请重试！', false);stopCapture();
}, 10000);

结果展示：
- 使用<pre>标签保留换行格式
- 成功/失败状态使用不同颜色区分

二、优化知识图谱前端界面展示

优化前：

优化后：

主要代码与逻辑更改：

整体布局优化

清晰的三栏式结构：
- 左侧知识库管理区
- 中间顶部操作区
- 主体可视化区
- 布局层次分明，功能分区明确

响应式设计：

@media (max-width: 768px) {.el-container { flex-direction: column; }.el-aside { width: 100% !important; }
}

操作按钮自适应排列

知识库管理优化

视觉优化的菜单项：

/* 交替背景色 */
.kg-menu .el-menu-item:nth-child(odd) { background-color: #f0f7ff; }
.kg-menu .el-menu-item:nth-child(even) { background-color: #f8f9fa; }/* 图标设计 */
.library-icon {background-color: #FFE4E1;border-radius: 50%;width: 32px;height: 32px;
}

淡蓝/淡灰交替背景提高可读性
圆形图标容器增强视觉吸引力
激活状态左侧边框标识当前选中项

交互反馈优化：

.kg-menu .el-menu-item:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

悬停时轻微上移和阴影效果
平滑过渡动画增强用户体验

文件上传区域优化

直观的拖拽上传设计：

<el-upload drag><div class="upload-area"><i class="el-icon-upload"></i><p>拖放或<em>点击上传</em> PDF/Word/TXT 文件</p></div>
</el-upload>

大尺寸拖拽区域提高可用性
清晰的操作指引文本
上传后显示文件名反馈

状态反馈机制：
- 按钮加载状态：:loading="loading"
- 禁用状态：:disabled="!selectedFile"
- 悬停效果：按钮hover时上移和阴影

图谱展示优化

专业的数据可视化：

const renderGraph = (nodesData, edgesData) => {// 根据节点类型设置颜色const getNodeColor = (type) => {const colors = {Person: '#FF9F40',Organization: '#36B9CC',// ...其他类型}return colors[type] || colors.default;}
}

不同类型节点使用不同颜色区分
关系边箭头明确指示方向
悬停显示属性详情

自适应容器设计：
```
.graph-container {flex: 1; /* 填充可用空间 */min-height: 500px;
}
```
- 弹性布局充分利用空间
- 最小高度保证可视区域
- 响应式调整移动端高度

问答功能优化

一体化问题输入：

<el-input v-model="userQuestion"><template #prepend><i class="el-icon-question"></i></template><template #append><el-button icon="Search">提问</el-button></template>
</el-input>

图标+输入框+按钮组合设计
符合用户自然操作流程
回车键支持快速提交

答案展示卡片：
```
.answer-card {border-radius: 8px;max-height: 300px;overflow-y: auto;
}
```
- 独立卡片区分于图谱区域
- 滚动区域处理长文本答案
- 清晰标题标识内容类型

性能优化

资源管理：

const clearGraph = () => {if (graphNetwork.value) {graphNetwork.value.destroy();graphNetwork.value = null;}
}

切换知识库时销毁旧图谱实例
避免内存泄漏

状态管理：

watch(currentLibraryId, async (newId) => {if (newId) await loadGraphData();else clearGraph();userQuestion.value = '';answer.value = '';
});

使用watch自动响应知识库切换
自动重置相关问题状态

三、优化综合功能界面前端展示

优化前：

优化后：

主要处理逻辑：

1. 模块化与清晰的视觉层次

卡片式布局：使用el-card组件将不同功能模块（会议计划、AI助理、PPT生成）清晰分隔，每个卡片有明确的标题和图标（📅/🤖/📊），视觉辨识度高。
层级分明：通过背景色、阴影和间距创建了良好的视觉层次感，半透明卡片（background: rgba(255, 255, 255, 0.7)）和毛玻璃效果（backdrop-filter: blur(10px)）提升了现代感。