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

本阶段，我对系统首页界面进行了迭代美化，使其看起来更像一个大型软件系统应该具有的界面样样式，同时使界面更符合中式古典风；同时，一个好的系统应该有一个详细的使用说明，方便用户用起来得心应手，因此还实现了易学探索助手的使用说明界面。

一、易学首页的更新换代

1. 新增导航栏设计：实现了顶部导航栏，包含 Logo、使用说明、资源库和易学社区链接。导航栏采用固定定位，确保用户在浏览过程中始终可访问导航选项。用户认证状态通过计算属性动态管理，未登录时显示登录和注册按钮，登录后显示用户头像和下拉菜单，下拉菜单可进行个人信息修改。

2. 主展示区开发：创建了主展示区，左侧展示欢迎信息和快速访问按钮，右侧提供 AI 对话助手和古籍辅助阅读入口。左侧部分包含标题、标语和三个快速访问按钮，右侧部分以卡片形式展示两个主要功能入口。

3. 特色功能展示：开发了特色功能展示区域，以卡片形式展示 AI 对话助手、古籍分析工具和学术研究工具。每个卡片包含图标、标题、描述和操作按钮。使用了轮播效果，使功能卡片可以横向滚动。

4. 功能特点介绍：优化了功能特点展示区域，以网格布局展示六个功能特点。每个功能特点包含图标、标题和描述，使用图标字体增强视觉效果。

5. 精选内容推荐：创建了精选内容推荐区域，以卡片形式展示精选文章和活动信息。卡片包含图片、标题、描述和操作按钮。使用了轮播效果，使内容卡片可以横向滚动。

6. 页脚设计：设计了页脚区域，包含关于我们、联系方式、关注我们和法律信息四个部分。页脚提供了网站的基本信息和链接。

经过上述实现易学探索助手首页更新实现效果如图：

 

二、编写使用说明

为了提高易学探索助手项目的实用性，考虑到后期要投入使用，为了便于研究易学的人士快速上手熟练使用我们的易学探索助手，特编写使用说明界面，可通过首页、易问大模型、古籍翻译助手界面实现轻松跳转，无论何时均可通过点击使用说明按钮查看具体如何使用，使用说明界面如下：

三、技术实现

1. Vue.js：作为前端框架，用于构建用户界面和管理组件状态。通过组件化开发提高代码的可维护性和复用性。

2. Vue Router：用于实现页面路由切换。定义了多个路由，包括首页、使用说明页、用户信息页和注册页等。实现多个界面的流畅跳转。

3. Axios：用于发送 HTTP 请求，调用后端接口获取数据。在用户登录和登出时，通过 Axios 发送请求并与后端交互。

4. SCSS：用于编写样式代码，提高样式的可读性和可维护性。通过定义变量、 mixins 和嵌套规则，实现样式的模块化和复用。

5. 媒体查询：使用媒体查询实现响应式布局，适配不同屏幕尺寸的设备。在小屏幕设备上调整布局和元素尺寸，确保良好的用户体验。

6. 弹性布局：采用弹性布局（Flexbox）和网格布局（Grid），使页面元素能够根据屏幕尺寸自动调整排列方式。

四、技术感悟

1.前端框架的优势

    Vue.js 的组件化开发模式提高了开发效率和代码的可维护性。通过将页面拆分为多个组件，可以独立开发和测试每个组件，然后组合成完整的页面。

2.状态管理的重要性

   在项目中，合理管理组件状态至关重要。通过使用 Vue 的响应式系统和计算属性，可以轻松实现组件之间的状态同步和数据共享。

3.响应式设计的挑战与解决方案

   响应式设计确保了网站在不同设备上的良好展示效果。通过使用媒体查询和弹性布局，可以有效解决不同屏幕尺寸下的布局问题。

4.性能优化的思考

   在项目开发过程中，始终关注性能优化。通过合理使用图片资源、减少不必要的 DOM 操作和优化 JavaScript 代码，提高页面的加载速度和渲染性能。

五、总结

     通过参与 ITAN 易学探索助手项目，我深刻体会到现代 Web 开发技术在传承和弘扬传统文化中的重要作用。该项目不仅提供了一个功能强大的易学研究平台，也让我在前端开发技术、响应式设计和性能优化等方面获得了宝贵的经验。未来，我将继续优化项目性能，增加新功能，提升用户体验，为易学文化的传播和发展贡献力量。