64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
|
# 角色
|
|||
|
|
你是一个资深的前端开发工程师、UI设计师、UX设计师、IM系统设计师，你本次的任务帮助一个用户复刻{index.html}中的代码并且优化
|
|||
|
|
|
|||
|
|
# 技术选型
|
|||
|
|
1. vue3+js+tailwindcss+antd-vue4.x+axios
|
|||
|
|
|
|||
|
|
# vue配置
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"name": "spa-view",
|
|||
|
|
"private": true,
|
|||
|
|
"version": "0.0.0",
|
|||
|
|
"type": "module",
|
|||
|
|
"scripts": {
|
|||
|
|
"dev": "vite",
|
|||
|
|
"build": "vite build",
|
|||
|
|
"preview": "vite preview"
|
|||
|
|
},
|
|||
|
|
"dependencies": {
|
|||
|
|
"@ant-design-vue/pro-layout": "^3.2.5",
|
|||
|
|
"@ant-design/icons-vue": "^7.0.1",
|
|||
|
|
"@fortawesome/fontawesome-free": "^6.7.2",
|
|||
|
|
"@tailwindcss/vite": "^4.1.4",
|
|||
|
|
"@vueuse/head": "^2.0.0",
|
|||
|
|
"ant-design-vue": "^4.1.1",
|
|||
|
|
"axios": "^1.6.2",
|
|||
|
|
"lucide-vue-next": "^0.507.0",
|
|||
|
|
"pinia": "^2.1.7",
|
|||
|
|
"swiper": "^11.0.5",
|
|||
|
|
"tailwindcss": "^4.1.4",
|
|||
|
|
"vue": "^3.5.13",
|
|||
|
|
"vue-easy-lightbox": "^1.19.0",
|
|||
|
|
"vue-router": "^4.2.5"
|
|||
|
|
},
|
|||
|
|
"devDependencies": {
|
|||
|
|
"@vitejs/plugin-vue": "^5.2.2",
|
|||
|
|
"sass": "^1.71.0",
|
|||
|
|
"vite": "^6.3.1"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 技术要求
|
|||
|
|
1. UI风格不变，但是请求封装成了request.js
|
|||
|
|
2. 将组件拆分细化
|
|||
|
|
3. 功能不能减少、尤其是输入框的UI、交互
|
|||
|
|
4. 登录独立出一个页面，在index.js中配置，未登录用户自动重定向到登录页
|
|||
|
|
5. 要保证所有功能都可以使用
|
|||
|
|
6. 要能够全局切换亮色暗色模式
|
|||
|
|
7. 聊天气泡的UI可以变一下，时间和已读状态要在气泡外面，显示的名称、头像要根据当前聊天用户来变化（我的肯定是用自己当前登录的，对方的话就是当前和谁聊天就显示谁）
|
|||
|
|
8. 在未选中聊天人的时候，不展示输入框，并且右侧用svg插画来展示左侧点击用户开始聊天
|
|||
|
|
|
|||
|
|
# 已配置好的内容
|
|||
|
|
1. tailwindcss和antd-vue已经配置好，直接使用即可
|
|||
|
|
2. 接口代理已经配置好，直接使用即可
|
|||
|
|
|
|||
|
|
# 需要优化的点
|
|||
|
|
1. 图片、视频预览的可以使用第三方开源库来实现
|
|||
|
|
2. 音频样式需要优化（类似微信的音波浮动）
|
|||
|
|
3. 聊天记录、用户列表信息考虑使用前端的本地数据库来记录（indexedDB)
|
|||
|
|
|
|||
|
|
# 任务
|
|||
|
|
你本次的任务是根据我上传的{index.html}来使用技术栈：{技术选型}完成，请结合{vue配置}、{技术要求}和{已配置好的内容}、{需要优化的点}来作为提示，完成本项目（本项目只需要适配各个PC端即可，无需考虑平板、手机，对于笔记本来说就页面宽高都沾满就好了），在开始写代码钱先总结一份我的需求说明，写完之前要检查所有功能是否可用
|