山东大学-创新实训-易学探索助手-个人报告（五）

2301_79615731

已于 2025-04-27 16:19:45 修改

阅读量640

点赞数 11

文章标签： java vue.js 前端

于 2025-04-27 16:16:03 首次发布

本文链接：https://blog.csdn.net/2301_79615731/article/details/147539211

版权

本阶段，我完成了对易学探索助手翻译界面的进一步改进与完善，完善之前句读方面未详细实现的细节，改善用户体验，使用户使用起来更得心应手。改善ui界面。

一、句读处理结果逻辑的完善：修改之前句读结果的状态管理逻辑

二、句子详情弹窗定位的技术实现

1.精准位置获取：

使用原生textarea的selectionStart属性，直接获取textarea的光标位置，比选区计算更准确

2.带标点分割重组：

通过正则表达式捕获组保留标点符号，得到交替出现的[句子, 标点]数组

3.动态构建位置映射表：

为每个完整句子（包含结尾标点）记录：

文本内容
在原文中的起始位置
在原文中的结束位置

4.精准范围匹配：

通过光标位置与句子位置范围的精确比对，确保准确找到对应句子

效果验证示例：
假设原文为："天地不仁，以万物为刍狗；圣人不仁，以百姓为刍狗。"

构建的sentenceMap将为：

[
  { text: "天地不仁，", start: 0, end: 5 },
  { text: "以万物为刍狗；", start: 5, end: 12 },
  { text: "圣人不仁，", start: 12, end: 17 },
  { text: "以百姓为刍狗。", start: 17, end: 24 }
]

当点击位置为：

点击位置3（"地"字）：匹配第一个句子
点击位置10（"刍"字）：匹配第二个句子
点击位置15（"仁"字）：匹配第三个句子

5.使呈现的句子详情不带符号

 if (matched) {
    // 修改点：展示时过滤末尾标点
    selectedSentence.value = matched.text
      .replace(/↵/g, '\n')        // 步骤1：还原换行符
      .replace(/[，。！？；]+$/, '') // 步骤2：去除末尾断句标点
    
    showDetailDialog.value = true
  }

其中.replace(/[，。！？；]+$/, '') 可匹配末尾连续出现的标点处理多标点场景

效果示例：

原始句子	处理后结果
"天地不仁，"	"天地不仁"
"以万物为刍狗；"	"以万物为刍狗"
"上善若水。。。"	"上善若水"
"道可道，非常道。"	"道可道，非常道"

三、句读弹窗界面的迭代改进

从以下几个方面进行优化：

背景设计：
- 主背景使用渐变颜色（linear-gradient）
- 每个信息区块添加毛玻璃效果（backdrop-filter: blur()）
- 区块间用柔和阴影分隔
字体优化：
- 短句内容使用衬线字体（font-serif）
- 标题添加装饰性左侧边框
- 文字颜色采用多级灰度
交互增强：
- 按钮添加缩放动画
- 字词卡片悬停上浮效果
- 图标与文字混排提升可读性
布局改进：
- 字词解释使用响应式网格布局
- 区块间保持合理间距
- 统一圆角设计（12px/8px）
视觉层次：
- 重要内容放大字号
- 辅助信息使用灰色

初始版本：

改进版本：

实现效果：

内容区有朦胧的磨砂玻璃效果
字词卡片会自动排列并响应式布局
鼠标悬停元素会有动态反馈
整体呈现现代感的设计风格

四、总结

在本次技术实践中，我深刻体会到：代码不仅是功能的载体，更是设计思想的具象化表达。每一次精准的定位计算背后，是对用户认知路径的深度解构；每一处优雅的样式呈现之下，是数学理性与艺术感知的微妙平衡。技术细节的打磨如同雕琢玉器——既要追求功能性的锋利，也要保持体验的温润。下一阶段的工作将围绕知识图谱的前端展示，以及句子详情注释部分的实现进行展开。