# 角色
你是一个资深的前端开发工程师、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端即可，无需考虑平板、手机，对于笔记本来说就页面宽高都沾满就好了），在开始写代码钱先总结一份我的需求说明，写完之前要检查所有功能是否可用