实习记录
AI-Partner
web端和小程序,小程序只有剧场内容
主题切换
开发动态主题切换功能,利用 CSS 变量、SCSS 和 JavaScript 实现了用户在不同主题(如明暗模式)之间的无缝切换,确保跨设备和浏览器的兼容性,并通过性能优化提升了页面渲染速度,显著改善了用户体验。
主题切换的性能优化主要通过以下方式实现:
CSS 变量:使用 CSS 变量使主题切换更加高效,因为在切换主题时只需修改变量值,而无需重新加载或渲染整个样式表。这减少了样式应用的开销,提高了性能。
最小化重绘与重排:通过优化样式表的结构和避免不必要的 DOM 操作,减少了切换主题时的重绘和重排次数,从而提升了页面响应速度。
缓存机制:使用本地存储等方法保存用户的主题偏好,避免每次页面加载时都重新计算和渲染主题,进一步提升了加载速度。
这些方法共同作用,使得主题切换功能既快速又流畅。
谷歌登录+app.ts+user.ts
开发了一个 Vue 3 组件,实现了通过 Google 登录的功能。使用组合式 API 和 TypeScript,集成了 Google 的登录提示和回调处理。负责从 API 获取用户信息,使用 Vuex 管理状态,并根据 URL 参数实现用户重定向。该组件在用户点击 Google 登录按钮时触发登录过程,确保用户信息的安全存储和状态更新,并处理可能的登录错误。
- Vue.js 和 Pinia 状态管理:构建了一个基于 Vue 3 和 Pinia 的应用程序状态管理系统。实现了动态配置管理,包括过滤器、好感度、奖励、剧场信息等多个模块的状态管理,确保应用数据的一致性和高效性。
- 功能模块开发:
- 用户登录:实现了 Google 登录集成,允许用户通过 Google 账户注册和登录,使用 OAuth2.0 认证机制来保证用户的安全性和便捷性。
- 配置管理:设计并实现了
queryConfig
方法,能够从服务器获取并解析配置信息,包括标签、奖励、剧场信息等,动态更新应用状态。 - 环境配置:通过
getConfig
方法获取项目的环境配置信息,如服务器 URL 和 bucketId,支持占位符替换,确保配置的灵活性和适应性。 - 背景图片管理:开发了
getBgImgs
方法,异步获取并管理聊天背景图片列表,支持设置默认背景图,增强用户界面的个性化体验。 - 主题切换:实现了
changeTheme
方法,允许用户动态切换应用主题,提升用户体验。
- 系统初始化和异步处理:在应用初始化阶段,通过
init
方法获取系统信息和配置数据,处理异步操作,确保应用在启动时能够正确加载所有必要数据。 - 模块化结构:设计了
index.ts
文件,用于动态导入和初始化应用中的所有 store 模块,实现了模块的自动加载和状态管理,提升了代码的可维护性和扩展性。 - 数据持久化:集成了
uni.getStorageSync
来持久化用户主题设置,确保用户的主题偏好在页面刷新后仍然有效。 - 前端技术栈:使用 Vue.js、TypeScript、Pinia、Axios 和 Element Plus 进行开发,结合 Vite 作为构建工具,确保高效的开发和构建流程。
- Google 登录集成:
- Google OAuth 2.0 认证:实现了 Google 登录集成,允许用户通过 Google 账户进行注册和登录。使用 OAuth2.0 认证机制来确保用户安全性和便捷性。
- 自动登录功能:开发了
autoLogin
方法,支持自动登录功能,通过解析 URL 查询参数,进行验证码验证和用户信息获取,实现无缝登录体验。
- 用户认证与管理:
- 验证码登录:实现了
submitForm
和onVerifyCodeLogin
方法,用户通过输入邮箱获取验证码后进行登录。支持账号禁用和注销处理,提供用户友好的错误提示。 - 用户信息存储:在成功登录后,将用户信息存储到本地,使用
uni.setStorageSync
存储用户信息和令牌,并在登录后更新用户信息状态。
- 验证码登录:实现了
- 登录流程管理:
- 登录状态管理:通过
useLoginHooks
钩子管理登录流程状态,包括加载状态、是否显示验证码页面、账号是否被禁用等。 - 表单验证:使用
formRef
和rules
进行表单验证,确保用户输入的邮箱格式正确,增强表单提交的可靠性。
- 登录状态管理:通过
- 用户界面交互:
- 用户体验优化:开发了
toCheckUI
和toLoginUI
方法,控制登录和验证码页面的显示逻辑,提高用户界面交互体验。 - 错误处理与提示:在登录失败或验证码发送失败时,提供详细的错误信息和提示,使用
uni.showToast
提升用户体验。
- 用户体验优化:开发了
- 状态管理与 API 交互:
- 状态管理:在
store
中设置用户令牌和用户信息,通过store.user.setToken
和store.user.setUserInfo
方法更新用户状态。 - API 调用:集成了
login
、getVerifyCodeByLogin
和verifyCodeLogin
等 API 调用,处理用户登录和验证码验证的业务逻辑。
- 状态管理:在
ai聊天工具
有做一些埋点
任务成就系统
额外赠送Token
VIP等级:VIP期限,钻石数量,原价,折扣价,
每天免费消息条数
每条消息免费额度
每天对话图片张数
创建自定义角色
创建自定义游戏
高级模型
权限设置
已经登录的用户,被封号时需要被弹出
已被封号的用户无法登录
已被封号用户创键的npc角色可正常使用
已被封号用户的用户信息无法被查看
已被封号的用户会员权益被流结,解封后可继续使用
已被封号用户正常出现在别人的关注列表中,但用户信息无法被查看
左侧是目录,分为:home-主页展示用户创建的所有公开的npc角色,chat-选择npc聊天,create-创建npc角色,shop-商店购买钻石进行聊天,任务:任务和成就,任务负责完成每天的签到和分享任务获得钻石、日常对话的条数达到一定程度获得钻石,成就则是与npc角色对话达到一定的条数达到成就和用户创建的npc角色获得的点赞、npc一共有几个用户在和他聊天。
埋点
项目描述:在某某平台的前端开发中,通过埋点技术记录用户的关键操作行为,以便进行用户行为分析和产品优化。在项目中实现了前端埋点功能,通过 window.dotLog
方法记录用户在特定页面和组件上的交互行为,便于后续的数据分析和用户行为追踪。
- 具体埋点包括点击角色详情、点击返回按钮、点击分享按钮、点击复制 NPC ID、点击查看创建者详情、点击喜爱按钮和点击开始聊天按钮等。
主要职责:
- 设计和实现埋点方案,捕捉用户点击、页面跳转等行为事件。
- 使用
window.dotLog
方法记录用户行为数据,并将数据发送到分析服务器。 - 分析用户行为数据,为产品决策和优化提供数据支持。
前端埋点:熟练使用手动埋点技术,能够有效捕捉和分析用户行为数据。
每日签到
在项目中开发了一个包含每日签到、每日对话、每日分享和特别任务功能的模块,使用 Vue.js、Vue Composition API 和 Element Plus 实现动态任务管理和用户交互,显著提升了用户活跃度和任务完成效率。
项目描述: 开发和维护一个包括每日签到、每日对话、每日分享和特别任务功能的 Vue.js 应用。
职责:
每日签到功能:
- 实现用户每日签到界面,展示每日签到奖励和状态。
- 使用
v-for
动态生成签到天数组件,并根据签到状态动态更新样式。 - 集成签到按钮,用户可点击进行签到并更新签到状态。
每日对话功能:
- 开发每日对话任务模块,用户可查看任务描述并领取任务奖励。
- 实现任务领取按钮,用户完成任务后点击领取奖励,更新任务状态。
每日分享功能:
- 实现每日分享任务模块,用户可查看分享任务描述并领取奖励。
- 集成任务领取按钮,用户完成分享任务后点击领取奖励,更新任务状态。
特别任务功能:
- 开发特别任务模块,包括加入 Discord 任务。
- 实现任务按钮,用户可点击按钮打开相关链接并完成任务。
提高了用户的日常活跃度,通过签到和任务系统增加了用户粘性。
优化了任务管理界面,提高了用户完成任务的效率。
集成多种任务类型,丰富了用户的互动体验。
在前端项目中实现了多个功能模块,涉及聊天记录管理、用户角色卡管理、图片预览和保存等,具体包括:
聊天记录管理
- 编辑聊天记录:实现了编辑聊天记录的功能,用户可以修改消息内容并保存更改。
- 删除聊天记录:提供批量删除聊天记录的功能,包含确认对话框以防止误操作。
- 保存聊天记录:开发了将聊天记录保存为记忆的功能,支持不同的隐私设置,如公开、私密等。
- 组件使用:利用
Element Plus
的ElMessageBox
组件来实现弹窗功能。
用户角色卡管理
在用户角色卡管理模块中,实现了全面的角色卡管理功能,涉及角色卡的创建、编辑、删除、查询及头像上传等。具体功能包括:
- 角色卡创建与编辑:实现了创建和编辑用户角色卡的功能,支持上传头像、填写个人信息等。
- 角色卡删除与查询:实现了删除角色卡和根据 ID 查询角色卡的功能。
- 头像上传:支持上传头像图片,并进行本地图片处理和上传到服务器。
- 角色卡设置:提供将角色卡与 NPC 关联的功能。
- 数据操作:使用了
axios
进行数据交互,涉及角色卡的创建、编辑、删除操作。
图片预览组件
- 图片预览:开发了图片预览功能,支持图片的查看和显示创建时间。
- 删除和下载功能:实现了图片的删除和下载功能,用户可以通过操作按钮删除图片或下载图片到本地。
- 文件 ID 复制:提供了复制图片文件 ID 到剪贴板的功能。
- 图片有效性检查:在组件加载时检查图片的有效性,确保用户不会看到无效图片链接。
- 组件技术:使用
Vue 3
和Element Plus
,结合uni-app
进行多平台适配,提升用户体验。
动态菜单功能
- 菜单显示:实现了动态菜单的显示功能,根据用户的长按事件显示菜单。
- 位置计算:根据屏幕边界动态调整菜单位置,确保菜单在屏幕内可见。
- 组件技术:使用了 Vue 的事件处理和 DOM 操作来实现菜单的位置计算和显示。
这些模块展示了我在前端开发中的全面能力,包括组件开发、用户界面设计、数据处理和交互优化。
Axios封装
这段代码通过封装多种请求函数,提供了灵活和强大的请求处理能力,包括普通请求、流式请求、文件上传等。通过对不同 URL 和用户类型的处理,实现了请求头和 token 的灵活设置。同时,通过 Promise
的使用,使得请求处理过程变得更加简洁和易于维护。
请求处理模块开发
封装了 uni-app 的 HTTP 请求处理功能,包括 GET/POST 请求、流式请求和文件上传。实现了自动处理不同用户授权、登录过期、错误提示等功能,支持动态配置请求头和 URL。
在简历中描述 usePhantomMobilePayHooks
可以着重于以下几个方面:功能实现、技术栈、以及你在项目中的角色。以下是一个示例描述:
Phantom Mobile Payment Integration Hook
概述: 设计并实现了一个 Vue.js hook (
usePhantomMobilePayHooks
),用于在移动设备上集成 Phantom 钱包支付功能,处理加密数据的解密和加密,支持与 Phantom 钱包的无缝连接和交易签名。技术栈:
- 使用 tweetnacl 和 bs58 库进行数据加密与解密。
- 利用 Solana Web3.js 和 @solana/spl-token 处理 Solana 区块链上的代币交易。
- 与 Phantom 钱包 通过自定义 URL 构建进行连接和交易签名。
- 通过 Vue.js 和 uni-app 处理前端逻辑和生命周期管理。
功能实现:
- 连接建立: 实现了与 Phantom 钱包的连接功能,生成并管理加密密钥对,通过特定的 URL 构建与 Phantom 钱包建立连接。
- 交易创建: 创建并序列化 Solana 区块链上的转账交易,包括代币转账和附加备注。
- 交易签署与发送: 使用加密技术将交易数据安全传输至 Phantom 钱包进行签署,并处理签署后的交易发送。
- 密钥管理: 处理密钥对的本地存储和加载,确保在每次操作中使用一致的密钥对。
成果:
- 提供了一个易于使用的 API,简化了 Phantom 钱包集成过程,并提高了移动端支付体验的安全性。
- 通过在 Vue.js 组件中使用该 hook,成功将复杂的区块链支付逻辑封装在一个可重用的模块中,提高了代码的可维护性和复用性。
API请求管理优化
在项目中,通过自定义
request
函数替代了 Axios,优化了 API 请求管理和错误处理。该封装支持流式请求、文件上传与下载,并在uni-app
环境下处理了跨平台请求逻辑。通过统一的错误处理和简洁的接口设计,提升了请求处理的一致性和开发效率。
- 请求封装与管理:在
uni-app
项目中封装了自定义request
函数,替代了 Axios,实现了更高效的请求管理和错误处理。 - 平台适配:根据
uni-app
平台的特性,定制请求配置,处理不同平台的请求逻辑,提升了跨平台请求的一致性和稳定性。 - 流式请求支持:实现了流式请求处理,支持实时数据推送和大文件下载,满足了特定业务需求。
- 文件上传与下载:封装了文件上传和下载功能,提供了灵活的接口和配置选项,简化了文件处理的复杂性。
- 集中错误处理:统一处理了请求错误、登录过期等问题,确保了应用中的请求逻辑一致性,并减少了重复代码。
- 简化API调用:提供了简洁的函数接口,简化了 API 调用,提升了开发效率和代码可读性。
Usage Limitation Management Hook
概述: 开发了一个 Vue.js hook (
useLimit
) 用于管理用户在不同会员等级下的使用限制,包括消息条数、钻石余额和图片限制等。此 hook 结合了会员卡等级与用户当前的资源状态,提供了用户体验优化的功能和限制逻辑。技术栈:
- 使用 Vue.js 的
computed
和ref
实现响应式数据管理。 - 集成 Vuex 状态管理,依赖 store 中的用户数据和应用设置。
- 通过 localStorage 存储用户操作状态。
- 使用 Vue.js 的
功能实现:
- 会员等级: 根据用户的会员等级提供相应的免费消息条数和图片使用限制。
- 消息条数和钻石检查: 计算用户是否有足够的免费消息条数或钻石来执行特定操作。
- 动态限制计算: 动态计算当前模型的使用限制,并根据实际情况显示或隐藏相关提示。
- 提示逻辑: 提供用于显示用户限制提示的逻辑,包括是否展示限制弹窗和用户资源是否足够。
- 图片限制: 管理和展示用户图片使用的限制情况,包括每日免费图片数量和使用总量。
成果:
- 成功实现了复杂的用户使用限制逻辑,通过结合会员等级和当前资源状态,优化了用户体验。
- 提供了一套完整的限制检查和提示机制,有效防止了用户超出使用限制并提高了系统的可用性。
- 将业务逻辑封装在一个可重用的 hook 中,提升了代码的可维护性和模块化设计。
PAT2-client
user-客户端
客户端使用,可以选择不同的
设计自定义Hooks
这个自定义 Hook 主要用于处理音频播放的相关操作,比如从服务器获取音频数据、处理 PCM 数据、播放和暂停音频、以及处理组件的卸载和清理。它还支持重试机制,以确保在请求失败时能够进行重新尝试。
描述: 设计并实现了一个 Vue.js 自定义 Hook,用于音频的加载、播放、暂停及管理。包括 PCM 数据转换为 WAV 格式的支持,并实现了组件卸载时的清理逻辑。
策略执行的余额和预算检查,设计并实现了两个 Vue.js 组合式 API 函数,useBalanceProject
和 useBalanceInit
,用于在策略执行前检查项目的余额和预算情况。这些功能确保了策略的顺利执行,并提供用户友好的错误提示。
策略对话框
开发了一个功能完善的 Vue.js 组合函数
useDialogue
,用于管理对话系统中的消息处理、状态更新和对话存储。该函数支持动态策略更新、消息发送、历史记录管理,并优化了用户交互体验和系统响应能力。
在项目中开发了一个功能全面的 Vue.js 组合函数 useDialogue
,实现了以下关键功能:
对话管理:支持消息的实时处理与显示,包括消息的发送、接收、错误处理等。使用了
fetch-event-source
实现流式数据处理,确保对话的实时更新。状态与存储管理:集成了对话记录的本地存储与读取,通过
DB
模块实现对话数据的持久化。支持策略切换时自动加载历史对话,并在会话结束时保存对话记录。用户交互优化:实现了输入框的内容管理、自动滚动到底部、消息发送与重发等功能,提供了顺畅的用户体验。
错误处理与版本控制:在接收到错误信息或版本不匹配时,提供用户友好的错误提示,并重新加载策略。
状态管理与网络请求:使用
axios
进行网络请求,并结合流式传输与传统请求方式处理消息。通过 Pinia 进行状态管理,确保数据一致性。
该组合函数提升了对话系统的稳定性与用户体验,能够处理各种复杂场景下的消息交互与状态管理。
在简历中描述这段代码的工作经历时,重点应放在你使用的技术、实现的功能以及所解决的问题。以下是一个示例描述:
项目名称:聊天页面
职责:
- 开发环境: Vue 3、TypeScript、Element Plus、Watermark
- 实现功能:
- 策略数据加载: 通过自定义
useStrategy
钩子从后端 API 动态获取和管理策略数据,并在聊天界面中展示。 - 水印管理: 使用
Watermark
库在聊天页面上动态创建用户信息水印,并在用户离开页面时自动移除水印,确保页面显示的一致性和用户隐私。 - 路由监听: 实现路由路径变化的监听,当用户访问聊天页面时,创建水印;离开页面时清除水印,优化用户体验。
- 条件渲染: 依据策略数据的加载状态,动态显示加载提示,并在策略编译期间提供实时反馈。
- 策略数据加载: 通过自定义
技术细节:
- 路由处理: 使用
vue-router
的useRoute
和onBeforeRouteLeave
管理路由变化和页面生命周期。 - 样式管理: 应用局部样式表(
style.module.less
)来定义聊天页面的视觉效果。 - 组件交互: 设计并实现了
StrategyParams
和ChatWindow
组件,负责策略参数展示和聊天窗口功能。
成果:
- 提升了聊天页面的用户体验,通过实时加载提示和用户信息水印增加了页面的可用性和个性化。
- 优化了页面性能,确保了水印在页面生命周期中的正确显示与移除。
说明:
- 这段描述突出了你的技术栈和你在项目中承担的具体责任。
- 详细说明了实现的功能及其对用户体验的提升。
- 强调了技术实现细节和你解决的问题,展示了你的专业能力和对项目的贡献。
pinia状态管理
你的实现方法通过服务器端持久化和自动同步具有较好的数据一致性和安全性,尤其适合需要跨设备访问的应用场景。它能确保数据的一致性和安全性,但也需考虑网络延迟和服务器可用性的问题。如果你的应用需要在多个设备和浏览器之间保持一致的数据,且对安全性要求较高,那么这种方法通常是更好的选择。
优点:你的实现方法通过服务器端持久化和自动同步具有较好的数据一致性和安全性,尤其适合需要跨设备访问的应用场景。它能确保数据的一致性和安全性,但也需考虑网络延迟和服务器可用性的问题。如果你的应用需要在多个设备和浏览器之间保持一致的数据,且对安全性要求较高,那么这种方法通常是更好的选择。
backend-发布策略
使用 TypeScript 类型定义(如 AxiosInstance、AxiosRequestConfig),实现请求和响应拦截器处理复杂的业务逻辑(如 token 验证、错误处理),封装通用的 HTTP 请求方法(如 GET、POST、文件上传下载),并动态设置请求头和 Content-Type。封装的作用在于提供一个统一、灵活且可扩展的 HTTP 请求处理接口,简化应用中的网络请求管理,提高代码的可维护性和可读性。
admin-运营
AI-Square
接口描述-AI-Partner
项目概述
成果:
- 成功上线了互动剧场平台,用户可以与自己的虚拟NPC进行个性化对话。
- 实现了多种充值选项和优惠策略,提升了用户的充值率和平台收入。
- 优化了用户数据管理和对话记录功能,提高了系统的稳定性和用户体验。
技术栈
- 前端: 使用 Vue.js、TypeScript、Element Plus 和 Sass 进行前端开发,提供丰富的用户界面和交互功能。
- 后端: 使用 Express.js 处理 API 请求,并与数据库交互以支持用户数据和虚拟角色的数据管理。
项目名称: AI-Partner心动剧场
项目简介: AI-互动剧场是一个多功能的互动平台,结合了人工智能技术和用户社交互动,旨在提供个性化的虚拟角色体验、社交互动、任务管理以及在线购物等功能。用户可以在平台上创建和管理虚拟角色,进行对话互动,完成任务,获取奖励,并通过社交功能与其他用户进行互动。
核心功能模块
1. 用户认证与管理
- 用户登录: 用户可以通过用户名和密码、验证码或Google账号登录平台。提供了多种验证手段,包括登录验证码和注册验证码。
- 用户注册: 新用户可以注册账户,并在注册过程中获取验证码验证身份。
- 重置密码: 用户可以通过验证码重置密码。
- 删除账户: 用户可以请求删除自己的账户。
- 用户设置: 用户可以管理个人设置,包括关注列表、粉丝列表和个人信息等。
2. 用户互动与社交
- 关注与粉丝管理: 用户可以关注其他用户,也可以查看自己的粉丝和关注列表。
- 消息通知: 用户可以查看消息通知列表,标记消息为已读或删除消息,查询未读消息数量。
- 角色卡管理: 用户可以创建、编辑、删除角色卡,并上传头像。角色卡可以设置为虚拟角色的一部分,用于与其他用户互动。
3. 虚拟角色与对话
- 角色创建与管理: 用户可以创建和管理虚拟角色(NPC),包括设置角色的模板、参数和成本等。
- 对话管理: 用户可以与虚拟角色进行对话,查看对话记录,进行历史对话的管理。
- 角色对话: 提供虚拟角色对话的功能,支持角色背景、对话内容和图像等多种配置。
4. 任务与奖励
- 任务管理: 用户可以查看任务列表,完成任务后领取奖励。
- 签到功能: 用户可以进行签到,完成签到任务。
- 分享与邀请任务: 用户可以完成分享任务和邀请任务,并领取相应的奖励。
5. 在线购物与VIP功能
- 购物商城: 用户可以浏览和购买商品,包含商品的折扣和原价信息。
- VIP功能: 提供VIP会员特权,如创建自定义角色、每日图片生成等。
6. 角色卡设置与互动
- 角色卡设置: 用户可以为虚拟角色设置角色卡,并管理角色卡的各类信息。
- 角色卡头像: 用户可以上传角色卡头像,用于展示个人化的虚拟角色形象。
用户体验
- 个性化体验: 用户可以通过创建和管理虚拟角色,进行个性化的对话互动。
- 社交互动: 提供丰富的社交功能,包括关注、粉丝、消息通知等,增强用户之间的互动。
- 任务奖励: 用户可以通过完成任务获得奖励,增加用户的参与感和平台的粘性。
- 便捷购物: 提供在线购物功能,用户可以方便地购买商品,并享受折扣。
你可以这样描述在简历中实现 WebSocket 实时推送信息的经验:
基于WebSocket 实时推送功能开发
基于 WebSocket 的实时通知系统
设计并实现了 WebSocket 通信机制,实现客户端与服务器之间的双向实时通信,支持高效的消息推送。
在 Vue.js 项目中通过 WebSocket 协议建立长连接,服务器可以主动推送消息至客户端,提升了系统的实时性和响应速度。
实现了心跳检测与自动重连机制,保证 WebSocket 连接的稳定性,降低了断线重连的延迟。
利用 WebSocket 实现了用户任务状态、消息通知等实时更新,增强了用户交互体验。
在 Vue.js 应用中开发了实时通知系统,通过 WebSocket 推送未读消息和任务完成状态的更新到用户界面。
实现了 WebSocket 通信,自动刷新通知徽章,确保用户无需手动刷新即可即时接收更新。
实时信息推送与页面导航
实时信息推送:
- 实现了基于 WebSocket 的实时信息推送系统,能够在用户界面中实时更新任务完成状态和未读消息提醒。
- 通过 WebSocket 的事件回调机制,实现了对新消息 (
OP.NewMessage
) 和任务完成 (OP.TaskFinish
) 的实时处理,确保用户能够及时获得重要通知。 - 在 Vue.js 项目中集成了 WebSocket,使用
addSocketCallBack
方法注册事件处理回调,并在页面加载时设置相关状态,提升了用户交互体验。
路由与导航管理:
- 设计并实现了灵活的页面导航系统,支持多种导航动画效果和页面间通信。
- 使用
IPushOptions
接口定义了页面导航的选项,支持指定路径、查询参数、动画类型和回调函数,增强了导航的灵活性和用户体验。 - 实现了
EventChannel
机制用于页面间事件传递,支持事件触发、监听、取消和一次性监听,确保了组件之间的高效通信。 - 配置了
IBackOptions
和IRecirectOptions
接口,支持页面返回和重定向功能,允许自定义动画效果和回调函数,提升了页面切换的流畅性。
实现: 使用 Vue.js 和 TypeScript 完成实时信息推送系统,结合 WebSocket 技术处理实时事件,并通过 Uni-app 的导航功能管理页面切换和动画效果。
结合你提供的 index.ts
文件内容,这里是如何将其描述到简历中的一段内容:
路由管理系统
技术栈: Vue.js, TypeScript, Uni-app
项目经历:
动态路由管理与高阶组件封装
动态路由生成:
- 设计并实现了一个动态路由生成系统,利用
IPushOptions
接口定义了页面跳转的选项,包括路径、查询参数、事件处理和动画效果。 - 实现了
generateJumpParams
函数,自动生成带有动画效果的页面跳转参数,并支持动态设置 URL 和回调函数。
- 设计并实现了一个动态路由生成系统,利用
高阶组件封装:
- 开发了
higtRouterNavgation
高阶组件,用于处理 PC 端的菜单显示和跳转,增强了不同平台的适配性。 - 通过检查平台类型,确保在 PC 端跳转时更新菜单状态,并在移动端保持一致的跳转逻辑。
- 开发了
路由操作实现:
- 实现了包括
push
,switchTab
,back
, 和redirect
的路由操作方法,封装了uni.navigateTo
,uni.switchTab
,uni.navigateBack
, 和uni.redirectTo
的调用,简化了页面跳转和返回操作。 push
方法支持页面跳转和 Tab 页面切换,back
方法处理页面返回逻辑,并在没有历史页面时重定向到默认页面,redirect
方法实现页面重定向功能。
- 实现了包括
实现: 使用 TypeScript 和 Uni-app 实现了动态路由生成和高阶组件封装的路由管理系统。通过该系统支持了多平台的适配和丰富的路由操作选项,提升了项目的灵活性和用户体验。
动态路由管理与高阶组件封装
项目经历:
动态路由生成系统:
- 设计并实现了一个动态路由生成系统,使用
IPushOptions
接口定义了跳转参数,包括路径、查询参数、事件处理和动画效果。 - 开发了
generateJumpParams
函数,根据传入的选项动态生成带有动画效果的页面跳转参数,简化了页面导航逻辑。
- 设计并实现了一个动态路由生成系统,使用
高阶组件封装:
- 实现了
higtRouterNavgation
高阶组件,用于处理 PC 端的菜单显示和跳转逻辑,增强了不同平台的适配性。 - 确保在 PC 端跳转时更新菜单状态,并在移动端保持一致的跳转逻辑,提升了用户体验。
- 实现了
路由操作实现:
- 封装了
push
,switchTab
,back
, 和redirect
等路由操作方法,简化了页面跳转、Tab 页面切换和重定向操作。 push
方法支持根据平台选择跳转方式,back
方法处理页面返回逻辑,并在没有历史页面时重定向到默认页面。
- 封装了
成就:
- 实现了一个高效、灵活的路由管理系统,提升了项目的可维护性和用户体验。
- 通过高阶组件的封装,增强了跨平台适配能力,确保了在不同设备上的一致性和流畅性。
简历描述
项目名称: AI-互动剧场
职位: 前端开发工程师
工作职责:
- 开发与优化 Vue.js 组件: 设计并实现了一个包含“日常签到”、“日常对话”、“日常分享”和“特殊任务”功能的综合界面。
- 日常签到: 实现签到功能,动态显示签到奖励和状态,支持签到按钮的状态变化(“签到”或“已领取”)。
- 日常对话: 实现对话任务的展示,用户可以领取奖励,按钮状态动态显示(“领取”或“已领取”)。
- 日常分享: 实现分享任务的展示,用户可以领取奖励,按钮状态动态显示(“领取”或“已领取”)。
- 特殊任务: 实现特殊任务的展示,支持点击任务链接(如 Discord 任务),并根据任务状态更新按钮(“加入我们”或“领取”)。
- 数据处理与状态管理: 使用 Vue 3 的 Composition API 和 TypeScript 实现复杂的状态管理和任务处理逻辑,调用 API 更新用户数据并处理任务状态。
- UI/UX 设计: 利用 Element Plus 和自定义图标组件,设计并实现了响应式用户界面,确保良好的用户体验和界面一致性。
- 性能优化: 优化了视图渲染和数据处理,确保组件在高频操作下的流畅性和响应速度。
技术栈:
- 前端: Vue.js, TypeScript, Element Plus
- 工具与框架: Vite, Sass
- API: Axios, @dcloudio/uni-app
项目亮点:
- 动态任务状态管理: 实现了基于用户操作动态更新任务状态和奖励展示的功能。
- 界面响应式设计: 确保组件在不同设备和屏幕尺寸下的良好表现。
- 用户数据实时更新: 实现了任务数据和用户状态的实时同步,提升了用户交互体验。
根据你提供的代码,这是一份整合了日常签到、对话、分享和特殊任务功能的简历描述:
简历描述
项目名称: AI-互动剧场
职位: 前端开发工程师
工作职责:
日常签到功能:
- 设计并实现了日常签到的前端界面,支持用户签到并领取奖励。
- 动态显示签到状态,区分“签到”与“已领取”,并展示每个签到日的奖励。
- 处理签到按钮的点击事件,确保用户只能在未签到时进行签到操作。
- 利用 Vue.js 和 Element Plus 实现了交互式签到日历,显示签到的具体情况(“今天”或“dayX”)。
日常对话任务:
- 开发了日常对话任务的展示模块,用户可以查看任务描述和领取任务奖励。
- 实现了根据任务状态更新按钮文本(“领取”或“已领取”),确保用户操作反馈的准确性。
- 通过 Vue.js 实现了动态任务列表渲染和状态管理。
日常分享任务:
- 实现了日常分享任务的前端界面,支持用户查看分享任务并领取奖励。
- 按照任务状态动态更新按钮文本,确保任务完成状态的准确显示。
特殊任务功能:
- 开发了特殊任务(如 Discord 任务)的展示功能,用户可以通过点击按钮完成任务并打开外部链接。
- 实现了按钮状态的动态更新(“加入我们”或“领取”),并处理任务完成逻辑,包括 API 调用以更新任务数据和用户状态。
状态管理与数据处理:
- 使用 Vue 3 的 Composition API 和 TypeScript 实现了组件的状态管理和数据处理。
- 调用后端 API 更新用户数据,处理任务状态同步和奖励领取逻辑。
- 实现了任务状态的实时更新和动态显示,提升了用户体验。
UI/UX 设计:
- 设计并实现了响应式用户界面,确保在各种设备和屏幕尺寸下的良好表现。
- 使用自定义图标和 Element Plus 组件优化用户界面,提供了清晰直观的用户交互体验。
技术栈:
- 前端: Vue.js, TypeScript, Element Plus
- 工具与框架: Vite, Sass
- API: Axios, @dcloudio/uni-app
项目亮点:
- 多任务管理: 集成了日常签到、对话、分享和特殊任务的功能模块,支持任务的动态更新和用户交互。
- 用户体验优化: 提供了高效的任务管理界面,确保用户在完成任务和领取奖励时的顺畅体验。
- 动态状态更新: 实现了基于用户操作实时更新任务状态和奖励展示的功能,提高了系统的响应速度和用户满意度。
这份简历描述结合了代码中的主要功能模块和实现细节,展示了你的前端开发能力和在项目中的关键贡献。
总结
AI-互动剧场是一个集虚拟角色管理、社交互动、任务奖励和在线购物于一体的综合性平台,致力于为用户提供丰富的互动体验和个性化的虚拟角色服务。通过集成 AI 技术和社交功能,用户可以在平台上创建虚拟角色、完成任务、与其他用户互动,并享受在线购物的便利。