2025年山东大学软件学院创新项目实训博客(七)

原创已于 2025-06-14 23:03:48 修改 · 298 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#团队开发 #vue.js #前端

于 2025-05-25 00:00:02 首次发布

时间

第十四十五周

工作进展

这段时间主要增加了系统首页的前端页面和收藏夹功能，首页集成了系统的三大核心功能的按钮，使用户可以快速访问；收藏夹功能允许用户收藏自己心仪的或者比较重要的ai回答，以及保存和管理有价值的法律知识和文章等。

详细内容

一、系统首页页面：

入口首页作为法律AI助手的门户，能引导用户进入核心功能，可以看到这里提供了几个核心功能的按钮，用户通过点击就能直接进入页面，确保用户能够快速访问所有功能。

实现思路：

1、主要区域：

采用醒目的大标题传达核心价值，简洁的副标题说明产品定位，突出的蓝色按钮引导用户进入系统

<section class="hero">
  <div class="container">
    <h1 class="hero-title">深度求索AI助手</h1>
    <p class="hero-subtitle">
      illegal Chat 是一款强大的 AI 助手，能够回答你的问题、协助创作，并帮助你更高效地工作
    </p>
  </div>
  <div class="hero-cta" @click="tt">
    点击进入
  </div>
</section>

<section class="features">
  <div class="container">
    <h2 class="section-title">为什么选择 illegal</h2>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">💡</div>
        <h3 class="feature-title">强大的知识库</h3>
        <p class="feature-desc">
          基于海量数据训练，覆盖广泛领域，提供准确、全面的回答
        </p>
      </div>
    </div>
  </div>
</section>

2、入口跳转功能

methods: {
  tt() {
    this.$router.push("/wenshu"); // 跳转到文书摘要功能
  }
}

3、响应式设计实现

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr; /* 移动端单列布局 */
  }
  
  .footer-content {
    grid-template-columns: repeat(2, 1fr); /* 移动端两列布局 */
  }
}

二、收藏夹功能

采用卡片式布局展示收藏内容，初始只加载部分文章（标题带图标标识，内容智能截断（3行省略）），按需加载更多内容。用户通过点击卡片查看详情："阅读更多"按钮快速访问全文，分页加载更多文章。

实现思路：

1、文章列表渲染

<div v-for="item in displayedItems" :key="item.id" 
     class="article-card" 
     @click="showDetail(item)">
  <div class="flex items-center mb-4">
    <div class="icon-container">
      <i class="fa fa-file-text-o"></i>
    </div>
    <h2 class="text-xl font-semibold">{{ item.title }}</h2>
  </div>
  <p class="text-gray-600 line-clamp-3">
    {{ item.content }}
  </p>
  <button @click.stop="showFullContent(item)" class="read-more-btn">
    阅读更多 <i class="fa fa-long-arrow-right"></i>
  </button>
</div>

2、“加载更多”功能

<button @click="loadMore" class="load-more-btn">
  <i class="fa fa-plus-circle"></i>加载更多文章
</button>

methods: {
  loadMore() {
    this.displayCount = Math.min(this.displayCount + 3, this.items.length);
  }
}

3、文章详情弹窗：点击卡片弹出详情对话框

<el-dialog :title="currentItem ? currentItem.title : ''" 
           :visible.sync="showModal"
           width="40%">
  <div class="article-title">标题：{{ currentItem ? currentItem.title : "" }}</div>
  <div class="article-content">
    {{ currentItem ? currentItem.content : "" }}
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="printToPDF" type="primary">
      <i class="fa fa-file-pdf-o"></i>打印为PDF
    </el-button>
    <el-button @click="closeModal">关闭</el-button>
  </div>
</el-dialog>

4、文章卡片组件

<div class="article-card">
  <!-- 标题区域 -->
  <div class="flex items-center mb-4">
    <div class="icon-container">
      <i class="fa fa-file-text-o"></i>
    </div>
    <h2 class="text-xl font-semibold">{{ item.title }}</h2>
  </div>
  
  <!-- 内容预览 -->
  <p class="text-gray-600 line-clamp-3">
    {{ item.content }}
  </p>
  
  <!-- 操作按钮 -->
  <button class="read-more-btn">
    阅读更多 <i class="fa fa-long-arrow-right"></i>
  </button>
</div>

总结

首页提供了清晰的功能导航，收藏夹则成为用户的知识宝库，两者共同构建了系统的使用基础。

这些功能的设计体现了"以用户为中心"的设计理念，将复杂的法律AI功能通过直观的界面呈现，使

技术真正服务于法律工作实践。未来可能的优化方向：

1、视觉反馈优化：

卡片悬停动画(-translate-y-1和阴影变化)
按钮渐变色彩和悬停效果
图标与色彩的情感化设计

2、性能优化

分页加载避免一次性渲染大量内容
智能内容截断减少DOM渲染压力
异步加载详情内容

3、无障碍设计

足够的对比度确保可读性
明确的焦点状态
语义化HTML结构