hongshu-web v1.0
This commit is contained in:
mayongjian
51
.gitignore
vendored
Normal file
51
.gitignore
vendored
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
######################################################################
|
||||||
|
# Build Tools
|
||||||
|
|
||||||
|
.gradle
|
||||||
|
/build/
|
||||||
|
!gradle/wrapper/gradle-wrapper.jar
|
||||||
|
|
||||||
|
target/
|
||||||
|
!.mvn/wrapper/maven-wrapper.jar
|
||||||
|
|
||||||
|
######################################################################
|
||||||
|
# IDE
|
||||||
|
|
||||||
|
### STS ###
|
||||||
|
.apt_generated
|
||||||
|
.classpath
|
||||||
|
.factorypath
|
||||||
|
.project
|
||||||
|
.settings
|
||||||
|
.springBeans
|
||||||
|
|
||||||
|
### IntelliJ IDEA ###
|
||||||
|
.idea
|
||||||
|
*.iws
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
|
||||||
|
### JRebel ###
|
||||||
|
rebel.xml
|
||||||
|
|
||||||
|
### NetBeans ###
|
||||||
|
nbproject/private/
|
||||||
|
build/*
|
||||||
|
nbbuild/
|
||||||
|
dist/
|
||||||
|
nbdist/
|
||||||
|
.nb-gradle/
|
||||||
|
|
||||||
|
######################################################################
|
||||||
|
# Others
|
||||||
|
*.log
|
||||||
|
*.xml.versionsBackup
|
||||||
|
*.swp
|
||||||
|
|
||||||
|
!*/build/*.java
|
||||||
|
!*/build/*.html
|
||||||
|
!*/build/*.xml
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
*.idea
|
||||||
|
|
||||||
36
README.en.md
36
README.en.md
@@ -1,36 +0,0 @@
|
|||||||
# HongShu-Web
|
|
||||||
|
|
||||||
#### Description
|
|
||||||
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
|
|
||||||
|
|
||||||
#### Software Architecture
|
|
||||||
Software architecture description
|
|
||||||
|
|
||||||
#### Installation
|
|
||||||
|
|
||||||
1. xxxx
|
|
||||||
2. xxxx
|
|
||||||
3. xxxx
|
|
||||||
|
|
||||||
#### Instructions
|
|
||||||
|
|
||||||
1. xxxx
|
|
||||||
2. xxxx
|
|
||||||
3. xxxx
|
|
||||||
|
|
||||||
#### Contribution
|
|
||||||
|
|
||||||
1. Fork the repository
|
|
||||||
2. Create Feat_xxx branch
|
|
||||||
3. Commit your code
|
|
||||||
4. Create Pull Request
|
|
||||||
|
|
||||||
|
|
||||||
#### Gitee Feature
|
|
||||||
|
|
||||||
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
|
||||||
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
|
||||||
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
|
||||||
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
|
||||||
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
|
||||||
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
|
||||||
158
README.md
Normal file → Executable file
158
README.md
Normal file → Executable file
@@ -1,39 +1,127 @@
|
|||||||
# HongShu-Web
|
<p align="center">
|
||||||
|
<img alt="logo" src="https://image.mayongjian.cn/2024/07/03/1de3ee08e0a34ab6bf9a163d380fb596.png" style="width: 100px">
|
||||||
|
</p>
|
||||||
|
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">HongShu v1.0</h1>
|
||||||
|
<h4 align="center">基于SpringBoot+Vue前后端分离仿小红书项目</h4>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://gitee.com/Maverick_Ma/hongshu-web/stargazers">
|
||||||
|
<img src="https://gitee.com/Maverick_Ma/hongshu-web/badge/star.svg?theme=dark"></a>
|
||||||
|
<a href="https://gitee.com/Maverick_Ma/hongshu-web">
|
||||||
|
<img src="https://img.shields.io/badge/HongShu-v1.0-brightgreen.svg"></a>
|
||||||
|
<a href="https://gitee.com/Maverick_Ma/hongshu-web/blob/master/LICENSE">
|
||||||
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
#### 介绍
|
## 平台简介
|
||||||
{**以下是 Gitee 平台说明，您可以替换此简介**
|
* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [ts](https://www.tslang.cn) 版本。
|
||||||
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
|
* 配套后端代码仓库地址[HongShu](https://gitee.com/Maverick_Ma/hongshu.git)
|
||||||
无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
|
|
||||||
|
|
||||||
#### 软件架构
|
* 阿里云优惠券：[点我领取](https://www.aliyun.com/minisite/goods?source=5176.11533457&userCode=ojvsntx1)
|
||||||
软件架构说明
|
* 腾讯云优惠券：[点我领取](https://curl.qcloud.com/efTJbNyi)
|
||||||
|
|
||||||
|
## 前端运行
|
||||||
|
```bash
|
||||||
|
# 克隆项目
|
||||||
|
git clone https://gitee.com/Maverick_Ma/hongshu-web.git
|
||||||
|
|
||||||
|
# 进入项目目录
|
||||||
|
cd HongShu-Web
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
yarn --registry=https://registry.npmmirror.com
|
||||||
|
|
||||||
|
# 启动服务
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# 构建测试环境 yarn build:stage
|
||||||
|
# 构建生产环境 yarn build:prod
|
||||||
|
# 前端访问地址 http://localhost:80
|
||||||
|
```
|
||||||
|
|
||||||
|
## 用户端内置功能
|
||||||
|
1. 瀑布流展示笔记，懒加载笔记图片
|
||||||
|
2. 笔记分类查询，使用elastcsearch做关键词搜索查询笔记
|
||||||
|
3. 关键词使用elastcsearch做高亮查询
|
||||||
|
4. 动态展示，展示个人和好友动态
|
||||||
|
5. 支持私信聊天，关注用户，评论笔记，点赞笔记和点赞图片功能，收藏笔记功能
|
||||||
|
6. 使用websocket消息通知，用户发送的消息会实时通知，消息页面会实时收到当前用户未读消息数量
|
||||||
|
7. 双token登陆，使用redis做对象缓存
|
||||||
|
8. 发布和修改笔记功能，使用七牛云oss对象存储图片
|
||||||
|
9. 个人信息展示，展示当前用户发布的笔记和点赞收藏的笔记
|
||||||
|
|
||||||
|
## 管理端内置功能
|
||||||
|
1. 用户管理：用户是系统操作者，该功能主要完成系统用户配置。
|
||||||
|
2. 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
|
||||||
|
3. 岗位管理：配置系统用户所属担任职务。
|
||||||
|
4. 菜单管理：配置系统菜单，操作权限，按钮权限标识等。
|
||||||
|
5. 角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
|
||||||
|
6. 字典管理：对系统中经常使用的一些较为固定的数据进行维护。
|
||||||
|
7. 参数管理：对系统动态配置常用参数。
|
||||||
|
8. 通知公告：系统通知公告信息发布维护。
|
||||||
|
9. 操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
|
||||||
|
10. 登录日志：系统登录日志记录查询包含登录异常。
|
||||||
|
11. 在线用户：当前系统中活跃用户状态监控。
|
||||||
|
12. 定时任务：在线（添加、修改、删除）任务调度包含执行结果日志。
|
||||||
|
13. 系统接口：根据业务代码自动生成相关的api接口文档。
|
||||||
|
14. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
|
||||||
|
15. 缓存监控：对系统的缓存信息查询，命令统计等。
|
||||||
|
16. 在线构建器：拖动表单元素生成相应的HTML代码。
|
||||||
|
17. 连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。
|
||||||
|
|
||||||
|
## 2.0版本实现中⚠️
|
||||||
|
1. 添加移动端版本
|
||||||
|
2. 重构实现 SpringCloud 微服务架构版本
|
||||||
|
3. 加入商城购物功能
|
||||||
|
4. 加入协同过滤算法优化优化页面推荐功能
|
||||||
|
5. 使用 MQ+Redis 优化点赞、收藏、浏览功能
|
||||||
|
|
||||||
|
- 如有项目运行问题、部署问题可联系
|
||||||
|
|
||||||
|
<img src="src/assets/images/wx.png" style="width: 150px"/>
|
||||||
|
|
||||||
|
## 在线体验
|
||||||
|
* 因无服务器暂无体验地址，后续会采购演示服务器，也感谢小伙伴打赏支持❤️。
|
||||||
|
|
||||||
|
<img src="src/assets/images/pay.png" style="width: 300px"/>
|
||||||
|
|
||||||
|
* 文档及资料会暂时放到我的个人博客：[点我进入](https://mayongjian.cn)
|
||||||
|
|
||||||
|
## 视频演示
|
||||||
|
[点击查看](https://www.bilibili.com/video/BV1QP8dekEGq/?spm_id_from=333.999.list.card_archive.click&vd_source=ec9224821314432ac6e12dc7d500d74b)
|
||||||
|
|
||||||
|
|
||||||
#### 安装教程
|
## 演示图
|
||||||
|
<table>
|
||||||
1. xxxx
|
<tr>
|
||||||
2. xxxx
|
<td><img src="src/assets/images/login.png"/></td>
|
||||||
3. xxxx
|
<td><img src="src/assets/images/dashboard.png"/></td>
|
||||||
|
</tr>
|
||||||
#### 使用说明
|
<tr>
|
||||||
|
<td><img src="src/assets/images/search.png"/></td>
|
||||||
1. xxxx
|
<td><img src="src/assets/images/message.png"/></td>
|
||||||
2. xxxx
|
</tr>
|
||||||
3. xxxx
|
<tr>
|
||||||
|
<td><img src="src/assets/images/follow.png"/></td>
|
||||||
#### 参与贡献
|
<td><img src="src/assets/images/trends.png"/></td>
|
||||||
|
</tr>
|
||||||
1. Fork 本仓库
|
<tr>
|
||||||
2. 新建 Feat_xxx 分支
|
<td><img src="src/assets/images/publish.png"/></td>
|
||||||
3. 提交代码
|
<td><img src="src/assets/images/user.png"/></td>
|
||||||
4. 新建 Pull Request
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="src/assets/images/admin-login.png"/></td>
|
||||||
#### 特技
|
<td><img src="src/assets/images/data.png"/></td>
|
||||||
|
</tr>
|
||||||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
|
<tr>
|
||||||
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
|
<td><img src="src/assets/images/category.png"/></td>
|
||||||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
|
<td><img src="src/assets/images/member.png"/></td>
|
||||||
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
|
</tr>
|
||||||
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
|
<tr>
|
||||||
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
<td><img src="src/assets/images/note.png"/></td>
|
||||||
|
<td><img src="src/assets/images/album.png"/></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="src/assets/images/comment.png"/></td>
|
||||||
|
<td><img src="src/assets/images/log.png"/></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>红薯</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13428
package-lock.json
generated
Normal file
13428
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
49
package.json
Normal file
49
package.json
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "vite-project",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint:eslint": "eslint \"src/**/*.{vue,ts,js}\" --fix",
|
||||||
|
"lint:prettier": "prettier --write \"**/*.{js,ts,json,css,less,scss,vue,html,md}\""
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@lhlyu/vue-virtual-waterfall": "^1.0.2",
|
||||||
|
"@opentiny/vue": "3",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
|
"async-validator": "^4.2.5",
|
||||||
|
"axios": "^1.5.1",
|
||||||
|
"element-plus": "^2.4.1",
|
||||||
|
"goeasy": "2.10.14",
|
||||||
|
"lwaterfall": "^1.0.6",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"pinia-plugin-persistedstate": "^3.2.0",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-masonry": "^0.16.0",
|
||||||
|
"vue-picture-cropper": "^0.7.0",
|
||||||
|
"vue-router": "^4.2.5",
|
||||||
|
"vue-stick": "^1.0.7",
|
||||||
|
"vue-waterfall-plugin-next": "^2.2.4",
|
||||||
|
"vue3-lazy": "^1.0.0-alpha.1",
|
||||||
|
"vue3-plock": "^0.0.2",
|
||||||
|
"zego-zim-web": "^2.12.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.8.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.8.0",
|
||||||
|
"@typescript-eslint/parser": "^6.8.0",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"eslint": "^8.51.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"less": "^4.2.0",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"sass": "^1.77.1",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.5",
|
||||||
|
"vue-tsc": "^1.8.5",
|
||||||
|
"water-fall3": "^0.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
14
src/App.vue
Normal file
14
src/App.vue
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<router-view :key="routerKey"></router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { computed } from "vue";
|
||||||
|
const route = useRoute();
|
||||||
|
const routerKey = computed(() => {
|
||||||
|
return route.path + Math.random();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
11
src/api/category.ts
Normal file
11
src/api/category.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
/**
|
||||||
|
* 获取树形分类数据
|
||||||
|
* @returns 分类数据
|
||||||
|
*/
|
||||||
|
export const getCategoryTreeData = () => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/category/getCategoryTreeData",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
86
src/api/comment.ts
Normal file
86
src/api/comment.ts
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
import type { CommentDTO } from "@/type/comment";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到所有的一级评论并携带二级评论
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @param noteId 笔记id
|
||||||
|
* @returns 评论结果集
|
||||||
|
*/
|
||||||
|
export const getCommentWithCommentByNoteId = (
|
||||||
|
currentPage: number,
|
||||||
|
pageSize: number,
|
||||||
|
noteId: string
|
||||||
|
) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/comment/getCommentWithCommentByNoteId/${currentPage}/${pageSize}`,
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
noteId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存评论
|
||||||
|
* @param data 评论实体
|
||||||
|
* @returns 增加后的评论实体
|
||||||
|
*/
|
||||||
|
export const saveCommentByDTO = (data: CommentDTO) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/comment/saveCommentByDTO`,
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据评论id同步评论集
|
||||||
|
* @param data 评论id数据集
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const syncCommentByIds = (data: Array<string>) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/comment/syncCommentByIds`,
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据一级评论id获取所有的二级评论
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @param oneCommentId 一级评论id
|
||||||
|
* @returns 评论结果集
|
||||||
|
*/
|
||||||
|
export const getTwoCommentPageByOneCommentId = (
|
||||||
|
currentPage: number,
|
||||||
|
pageSize: number,
|
||||||
|
oneCommentId: string
|
||||||
|
) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/comment/getTwoCommentPageByOneCommentId/${currentPage}/${pageSize}`,
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
oneCommentId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前用户通知的评论集
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @returns 评论结果集
|
||||||
|
*/
|
||||||
|
export const getNoticeComment = (
|
||||||
|
currentPage: number,
|
||||||
|
pageSize: number,
|
||||||
|
) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/comment/getNoticeComment/${currentPage}/${pageSize}`,
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
57
src/api/follower.ts
Normal file
57
src/api/follower.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到关注用户的所有动态
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getFollowTrend = (currentPage: number, pageSize: number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/follower/getFollowTrend/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关注用户
|
||||||
|
* @param followerId 关注用户id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const followById = (followerId: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/follower/followById`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
followerId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前用户是否关注
|
||||||
|
* @param followerId 关注的用户id
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const isFollow = (followerId: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/follower/isFollow`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
followerId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到当前用户的最新关注信息
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @returns FollowerVo
|
||||||
|
*/
|
||||||
|
export const getNoticeFollower = (currentPage: number, pageSize: number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/follower/getNoticeFollower/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
74
src/api/im.ts
Normal file
74
src/api/im.ts
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到所有聊天的记录数量
|
||||||
|
* @returns 聊天数量
|
||||||
|
*/
|
||||||
|
export const getCountMessage = () => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/im/chat/getCountMessage", // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前用户下所有聊天的用户信息
|
||||||
|
* @returns 聊天的用户信息
|
||||||
|
*/
|
||||||
|
export const getChatUserList = () => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/im/chat/getChatUserList", // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清除聊天数量
|
||||||
|
* @param sendUid 发送方的用户id
|
||||||
|
* @param type 类型
|
||||||
|
* @returns success
|
||||||
|
*/
|
||||||
|
export const clearMessageCount = (sendUid:string,type:number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/im/chat/clearMessageCount", // mock接口
|
||||||
|
method: "get",
|
||||||
|
params:{
|
||||||
|
sendUid,
|
||||||
|
type
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有的聊天记录
|
||||||
|
* @param currentPage 分页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @param acceptUid 接收方的用户id
|
||||||
|
* @returns 聊天记录
|
||||||
|
*/
|
||||||
|
export const getAllChatRecord = (
|
||||||
|
currentPage: number,
|
||||||
|
pageSize: number,
|
||||||
|
acceptUid: string
|
||||||
|
) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/im/chat/getAllChatRecord/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
acceptUid,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送消息
|
||||||
|
* @param data 消息实体
|
||||||
|
* @returns success
|
||||||
|
*/
|
||||||
|
export const sendMsg = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/im/chat/sendMsg", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
42
src/api/likeOrCollection.ts
Normal file
42
src/api/likeOrCollection.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
import type { LikeOrCollectionDTO } from "@/type/likeOrCollection";
|
||||||
|
/**
|
||||||
|
* 点赞或收藏
|
||||||
|
* @param data 点赞收藏实体
|
||||||
|
* @returns success
|
||||||
|
*/
|
||||||
|
export const likeOrCollectionByDTO = (data: LikeOrCollectionDTO) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/likeOrCollection/likeOrCollectionByDTO`, // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否点赞或收藏
|
||||||
|
* @param data 点赞收藏实体
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const isLikeOrCollection = (data: LikeOrCollectionDTO) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/likeOrCollection/isLikeOrCollection`, // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到当前用户最新的点赞和收藏信息
|
||||||
|
* @param currentPage 当前页
|
||||||
|
* @param pageSize 分页数
|
||||||
|
* @returns page
|
||||||
|
*/
|
||||||
|
export const getNoticeLikeOrCollection = (currentPage: number, pageSize: number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/likeOrCollection/getNoticeLikeOrCollection/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
72
src/api/note.ts
Normal file
72
src/api/note.ts
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据笔记id获取笔记
|
||||||
|
* @param noteId 笔记id
|
||||||
|
* @returns 笔记
|
||||||
|
*/
|
||||||
|
export const getNoteById = (noteId: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/note/getNoteById", // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
noteId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存笔记
|
||||||
|
* @param data 笔记实体
|
||||||
|
* @returns 笔记id
|
||||||
|
*/
|
||||||
|
export const saveNoteByDTO = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/note/saveNoteByDTO", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
headers: { "Content-Type": "multipart/form-data;boundary=----WebKitFormBoundaryk4ZvuPo6pkphe7Pl" },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新笔记
|
||||||
|
* @param data 笔记实体
|
||||||
|
* @returns 笔记id
|
||||||
|
*/
|
||||||
|
export const updateNoteByDTO = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/note/updateNoteByDTO", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
headers: { "Content-Type": "multipart/form-data;boundary=----WebKitFormBoundaryk4ZvuPo6pkphe7Pl" },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 置顶笔记
|
||||||
|
* @param noteId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const pinnedNote = (noteId: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/note/pinnedNote", // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
noteId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除笔记
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const deleteNoteByIds = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/note/deleteNoteByIds", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
};
|
||||||
79
src/api/search.ts
Normal file
79
src/api/search.ts
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
import { NoteDTO } from "@/type/note"
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param currentPage
|
||||||
|
* @param pageSize
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getRecommendNote = (currentPage: number, pageSize: number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/es/note/getRecommendNote/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param currentPage
|
||||||
|
* @param pageSize
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getNoteByDTO = (currentPage: number, pageSize: number, data: NoteDTO) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/es/note/getNoteByDTO/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCategoryAgg = (data: NoteDTO) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/es/note/getCategoryAgg`, // mock接口
|
||||||
|
method: "post",
|
||||||
|
data: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param keyword
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getRecordByKeyWord = (keyword: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/es/record/getRecordByKeyWord`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
keyword
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getHotRecord = () => {
|
||||||
|
return request<any>({
|
||||||
|
url: `web/es/record/getHotRecord`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param keyword
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const addRecord = (keyword: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/es/record/addRecord`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
keyword
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
18
src/api/tag.ts
Normal file
18
src/api/tag.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param currentPage
|
||||||
|
* @param pageSize
|
||||||
|
* @param keyword
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getTagByKeyword = (currentPage: number, pageSize: number,keyword:string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/tag/getTagByKeyword/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params:{
|
||||||
|
keyword
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
146
src/api/user.ts
Normal file
146
src/api/user.ts
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
import type { UserLogin } from "@/type/user";
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const login = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/auth/login", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param deptId
|
||||||
|
* @param file
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function importFile(deptId: number, file: File) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
return request({
|
||||||
|
url: "/api/v1/users/_import",
|
||||||
|
method: "post",
|
||||||
|
params: { deptId: deptId },
|
||||||
|
data: formData,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param accessToken
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getUserInfoByToken = (accessToken: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/auth/getUserInfoByToken", // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
accessToken,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param refreshToken
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const refreshToken = (refreshToken: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/auth/refreshToken`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
refreshToken,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const loginByCode = (data: UserLogin) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/auth/loginByCode", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param currentPage
|
||||||
|
* @param pageSize
|
||||||
|
* @param userId
|
||||||
|
* @param type
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getTrendByUser = (currentPage:number,pageSize:number,userId:string,type:number) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/user/getTrendByUser/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
userId,
|
||||||
|
type
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param userId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getUserById = (userId:string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/user/getUserById`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
userId
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param userId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const loginOut = (userId:string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/auth/loginOut`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
userId
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateUser = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/web/user/updateUser", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getUserByKeyword = (currentPage: number, pageSize: number, keyword: string) => {
|
||||||
|
return request<any>({
|
||||||
|
url: `/web/user/getUserByKeyword/${currentPage}/${pageSize}`, // mock接口
|
||||||
|
method: "get",
|
||||||
|
params: {
|
||||||
|
keyword
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
10
src/api/util.ts
Executable file
10
src/api/util.ts
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
|
||||||
|
export const toUp = (data: any) => {
|
||||||
|
return request<any>({
|
||||||
|
url: "/util/dm/toUp", // mock接口
|
||||||
|
method: "post",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
BIN
src/assets/error.png
Normal file
BIN
src/assets/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
539
src/assets/font_4394635_lwuldvb474/demo.css
Normal file
539
src/assets/font_4394635_lwuldvb474/demo.css
Normal file
@@ -0,0 +1,539 @@
|
|||||||
|
/* Logo 字体 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#tabs .active {
|
||||||
|
border-bottom-color: #f00;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-container .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面布局 */
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -50px;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps pre {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border: solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists {
|
||||||
|
width: 100% !important;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li {
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon {
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon:hover {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .name,
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* markdown 样式 */
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>p,
|
||||||
|
.markdown>blockquote,
|
||||||
|
.markdown>.highlight,
|
||||||
|
.markdown>ol,
|
||||||
|
.markdown>ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul>li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li,
|
||||||
|
.markdown blockquote ul>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li p,
|
||||||
|
.markdown>ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol>li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ol li,
|
||||||
|
.markdown blockquote ol>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th,
|
||||||
|
.markdown>table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>br,
|
||||||
|
.markdown>p>br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码高亮 */
|
||||||
|
/* PrismJS 1.15.0
|
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f5f2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
234
src/assets/font_4394635_lwuldvb474/demo_index.html
Normal file
234
src/assets/font_4394635_lwuldvb474/demo_index.html
Normal file
@@ -0,0 +1,234 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>iconfont Demo</title>
|
||||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||||
|
<!-- 代码高亮 -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||||
|
|
||||||
|
</a></h1>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<li class="dib"><span>Symbol</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4394635" target="_blank" class="nav-more">查看项目</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block;">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">follow</div>
|
||||||
|
<div class="code-name">&#xe83b;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">follow-fill</div>
|
||||||
|
<div class="code-name">&#xe83c;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
src: url('iconfont.woff2?t=1704005455654') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1704005455654') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1704005455654') format('truetype');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content font-class">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-follow"></span>
|
||||||
|
<div class="name">
|
||||||
|
follow
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-follow
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-follow-fill"></span>
|
||||||
|
<div class="name">
|
||||||
|
follow-fill
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-follow-fill
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"
|
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content symbol">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-follow"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">follow</div>
|
||||||
|
<div class="code-name">#icon-follow</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-follow-fill"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">follow-fill</div>
|
||||||
|
<div class="code-name">#icon-follow-fill</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="symbol-">Symbol 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show()
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content')
|
||||||
|
var index = $(this).index()
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active')
|
||||||
|
$(this).addClass('active')
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
src/assets/font_4394635_lwuldvb474/iconfont.css
Normal file
23
src/assets/font_4394635_lwuldvb474/iconfont.css
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 4394635 */
|
||||||
|
src: url('iconfont.woff2?t=1704005455654') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1704005455654') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1704005455654') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-follow:before {
|
||||||
|
content: "\e83b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-follow-fill:before {
|
||||||
|
content: "\e83c";
|
||||||
|
}
|
||||||
|
|
||||||
1
src/assets/font_4394635_lwuldvb474/iconfont.js
Normal file
1
src/assets/font_4394635_lwuldvb474/iconfont.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
window._iconfont_svg_string_4394635='<svg><symbol id="icon-follow" viewBox="0 0 1024 1024"><path d="M480.304762 237.738667l7.582476 7.68c6.826667 6.826667 14.872381 14.677333 24.112762 23.576381l10.50819-10.191238c8.289524-8.045714 15.36-15.067429 21.211429-21.065143a220.891429 220.891429 0 0 1 317.074286 0c86.747429 88.600381 87.576381 231.765333 2.438095 321.365333L512 902.095238 160.768 559.128381c-85.113905-89.624381-84.309333-232.789333 2.438095-321.389714a220.891429 220.891429 0 0 1 317.074286 0z m335.043048 265.313523c52.882286-61.44 50.492952-155.599238-6.826667-214.137904a147.748571 147.748571 0 0 0-212.553143 0l-17.286095 17.261714a1928.289524 1928.289524 0 0 1-5.022476 4.924952L512 370.492952l-56.32-54.223238-15.11619-14.774857-12.53181-12.580571a147.748571 147.748571 0 0 0-212.577524 0c-58.806857 60.074667-59.782095 157.671619-2.511238 218.940952L512 799.865905l299.056762-292.035048 4.291048-4.778667z" ></path></symbol><symbol id="icon-follow-fill" viewBox="0 0 1024 1024"><path d="M480.304762 237.738667l7.582476 7.68c6.826667 6.826667 14.872381 14.677333 24.112762 23.576381l10.50819-10.191238c8.289524-8.045714 15.36-15.067429 21.211429-21.065143a220.891429 220.891429 0 0 1 317.074286 0c86.747429 88.600381 87.576381 231.765333 2.438095 321.365333L512 902.095238 160.768 559.128381c-85.113905-89.624381-84.309333-232.789333 2.438095-321.389714a220.891429 220.891429 0 0 1 317.074286 0z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4394635,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,l=n.document,a=!1,r(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,c())}function r(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window);
|
||||||
23
src/assets/font_4394635_lwuldvb474/iconfont.json
Normal file
23
src/assets/font_4394635_lwuldvb474/iconfont.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"id": "4394635",
|
||||||
|
"name": "yanhuo",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "34453000",
|
||||||
|
"name": "follow",
|
||||||
|
"font_class": "follow",
|
||||||
|
"unicode": "e83b",
|
||||||
|
"unicode_decimal": 59451
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34453001",
|
||||||
|
"name": "follow-fill",
|
||||||
|
"font_class": "follow-fill",
|
||||||
|
"unicode": "e83c",
|
||||||
|
"unicode_decimal": 59452
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/assets/font_4394635_lwuldvb474/iconfont.ttf
Normal file
BIN
src/assets/font_4394635_lwuldvb474/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/font_4394635_lwuldvb474/iconfont.woff
Normal file
BIN
src/assets/font_4394635_lwuldvb474/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/font_4394635_lwuldvb474/iconfont.woff2
Normal file
BIN
src/assets/font_4394635_lwuldvb474/iconfont.woff2
Normal file
Binary file not shown.
BIN
src/assets/images/1.png
Executable file
BIN
src/assets/images/1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/images/2.png
Executable file
BIN
src/assets/images/2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/images/3.png
Normal file
BIN
src/assets/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/images/admin-login.png
Normal file
BIN
src/assets/images/admin-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/album.png
Normal file
BIN
src/assets/images/album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/images/category.png
Normal file
BIN
src/assets/images/category.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 KiB |
BIN
src/assets/images/comment.png
Normal file
BIN
src/assets/images/comment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 440 KiB |
BIN
src/assets/images/dashboard.png
Normal file
BIN
src/assets/images/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
BIN
src/assets/images/data.png
Normal file
BIN
src/assets/images/data.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
src/assets/images/follow.png
Normal file
BIN
src/assets/images/follow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 467 KiB |
BIN
src/assets/images/log.png
Normal file
BIN
src/assets/images/log.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 635 KiB |
BIN
src/assets/images/login.png
Normal file
BIN
src/assets/images/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
src/assets/images/member.png
Normal file
BIN
src/assets/images/member.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 853 KiB |
BIN
src/assets/images/message.png
Normal file
BIN
src/assets/images/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
src/assets/images/note.png
Normal file
BIN
src/assets/images/note.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 862 KiB |
BIN
src/assets/images/pay.png
Normal file
BIN
src/assets/images/pay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 731 KiB |
BIN
src/assets/images/publish.png
Normal file
BIN
src/assets/images/publish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
BIN
src/assets/images/search.png
Normal file
BIN
src/assets/images/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
src/assets/images/trends.png
Normal file
BIN
src/assets/images/trends.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 KiB |
BIN
src/assets/images/user.png
Normal file
BIN
src/assets/images/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
src/assets/images/wx.png
Normal file
BIN
src/assets/images/wx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
src/assets/loading.png
Normal file
BIN
src/assets/loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
451
src/components/Chat.vue
Executable file
451
src/components/Chat.vue
Executable file
@@ -0,0 +1,451 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="container"
|
||||||
|
style="transition: background-color 0.4s ease 0s;
|
||||||
|
hsla(0,0%,100%,0.98)"
|
||||||
|
>
|
||||||
|
<div class="chat-container">
|
||||||
|
<header class="chat-header">
|
||||||
|
<div class="header-left"></div>
|
||||||
|
<div class="header-user">
|
||||||
|
<el-avatar :src="acceptUser.avatar" />
|
||||||
|
<span style="margin-left: 0.3125rem">{{ acceptUser.username }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="header-tool">
|
||||||
|
<More class="icon-item"></More>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<hr color="#f4f4f4" />
|
||||||
|
<main class="chat-main">
|
||||||
|
<div class="chat-record" ref="ChatRef" @scroll="showScroll()">
|
||||||
|
<div v-for="(item, index) in dataList" :key="index">
|
||||||
|
<div class="message-my-item" v-if="item.acceptUid === acceptUser.id">
|
||||||
|
<Loading v-show="item.isLoading" style="width: 0.8em; height: 0.8em; margin-right: 0.5rem" />
|
||||||
|
<div class="message-my-conent" v-if="item.msgType == 1">{{ item.content }}</div>
|
||||||
|
<img :src="item.content" class="message-img" v-if="item.msgType == 2" />
|
||||||
|
<div class="user-avatar">
|
||||||
|
<el-avatar :src="currentUser.avatar" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message-item" v-else>
|
||||||
|
<div class="user-avatar">
|
||||||
|
<el-avatar :src="acceptUser.avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="message-conent" v-if="item.msgType == 1">{{ item.content }}</div>
|
||||||
|
<img :src="item.content" class="message-img" v-if="item.msgType == 2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr color="#f4f4f4" />
|
||||||
|
<div class="chat-input">
|
||||||
|
<div class="input-tool">
|
||||||
|
<div class="tool-left">
|
||||||
|
<PieChart class="icon-item"></PieChart>
|
||||||
|
<el-upload :auto-upload="false" :show-file-list="false" :on-change="handleChange">
|
||||||
|
<Picture class="icon-item"></Picture>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
<div class="tool-history">
|
||||||
|
<Clock class="icon-item"></Clock>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <textarea type="textarea" v-model="content" class="input-content" rows="15" @keyup.enter="submit" /> -->
|
||||||
|
<div class="input-content">
|
||||||
|
<p
|
||||||
|
id="post-textarea"
|
||||||
|
ref="postContent"
|
||||||
|
class="post-content"
|
||||||
|
contenteditable="true"
|
||||||
|
data-tribute="true"
|
||||||
|
placeholder="请输入消息，支持发送图片哦～"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
></p>
|
||||||
|
<div class="input-btn">
|
||||||
|
<div></div>
|
||||||
|
<el-button type="primary" round style="width: 5.55rem" @click="submit">发送</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<div class="close-cricle" @click="close">
|
||||||
|
<div class="close close-mask-white">
|
||||||
|
<Close style="width: 1.2em; height: 1.2em; color: rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { More, PieChart, Picture, Clock, Close, Loading } from "@element-plus/icons-vue";
|
||||||
|
import { ref, onMounted, watch, nextTick } from "vue";
|
||||||
|
import { getUserById } from "@/api/user";
|
||||||
|
import { getAllChatRecord, sendMsg } from "@/api/im";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import { useImStore } from "@/store/imStore";
|
||||||
|
import type { UploadProps } from "element-plus";
|
||||||
|
import { convertImgToBase64 } from "@/utils/util";
|
||||||
|
import { getRandomString } from "@/utils/util";
|
||||||
|
|
||||||
|
const imStore = useImStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const props = defineProps({
|
||||||
|
acceptUid: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const ChatRef = ref();
|
||||||
|
const currentUser = ref<any>({});
|
||||||
|
const acceptUser = ref<any>({});
|
||||||
|
const dataList = ref<any>();
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 15;
|
||||||
|
const messageTotal = ref(0);
|
||||||
|
const postContent = ref(null);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => imStore.message,
|
||||||
|
(newVal) => {
|
||||||
|
if (newVal.sendUid === acceptUser.value.id) {
|
||||||
|
insertMessage(newVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const insertMessage = async (message: any) => {
|
||||||
|
dataList.value?.push(message);
|
||||||
|
await nextTick();
|
||||||
|
// 滚动到最底部
|
||||||
|
ChatRef.value.lastElementChild.scrollIntoView({
|
||||||
|
block: "start",
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickChat"]);
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit("clickChat", props.acceptUid);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择图片
|
||||||
|
const handleChange: UploadProps["onChange"] = (uploadFile) => {
|
||||||
|
const imgSrc = URL.createObjectURL(uploadFile.raw!);
|
||||||
|
convertImgToBase64(
|
||||||
|
uploadFile.raw!,
|
||||||
|
(data: any) => {
|
||||||
|
document.getElementById("post-textarea")!.innerHTML +=
|
||||||
|
`<img src='${imgSrc}' text='${data}' style='width:3.75rem;height:3.75rem;object-fit: cover;'></img>`;
|
||||||
|
},
|
||||||
|
(error: any) => {
|
||||||
|
console.log("error", error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = (message: any) => {
|
||||||
|
new Promise((res) => {
|
||||||
|
insertMessage(message);
|
||||||
|
res(message);
|
||||||
|
}).then((_message: any) => {
|
||||||
|
sendMsg(_message).then(() => {
|
||||||
|
const data = dataList.value.filter((item: any) => item.id === _message.id);
|
||||||
|
data[0].isLoading = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
let htmlContent = document.getElementById("post-textarea")!.innerHTML;
|
||||||
|
|
||||||
|
if (htmlContent === "") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgReg = /<img.*?(?:>|\/>)/gi;
|
||||||
|
const srcReg = /text=[\'\"]?([^\'\"]*)[\'\"]?/i;
|
||||||
|
// let params = new FormData();
|
||||||
|
// //注意此处对文件数组进行了参数循环添加
|
||||||
|
const _contentImg = htmlContent.match(imgReg);
|
||||||
|
|
||||||
|
const replaceContent = htmlContent.replaceAll(imgReg, "#").replace(/<[^>]*>[^<]*(<[^>]*>)?/gi, "");
|
||||||
|
// 内容分割
|
||||||
|
const _splitContent = replaceContent.split("#");
|
||||||
|
|
||||||
|
_splitContent.forEach((item: string) => {
|
||||||
|
if (item === null || item === "") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//发送文字消息
|
||||||
|
const message = {} as any;
|
||||||
|
message.id = getRandomString(12);
|
||||||
|
message.sendUid = currentUser.value.id;
|
||||||
|
message.acceptUid = acceptUser.value.id;
|
||||||
|
message.content = item;
|
||||||
|
message.msgType = 1;
|
||||||
|
message.chatType = 0;
|
||||||
|
message.isLoading = true;
|
||||||
|
sendMessage(message);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 图片分割
|
||||||
|
_contentImg?.forEach((item: any) => {
|
||||||
|
const src = item.match(srcReg);
|
||||||
|
const message = {} as any;
|
||||||
|
message.id = getRandomString(12);
|
||||||
|
message.sendUid = currentUser.value.id;
|
||||||
|
message.acceptUid = acceptUser.value.id;
|
||||||
|
message.content = src[1];
|
||||||
|
message.msgType = 2;
|
||||||
|
message.chatType = 0;
|
||||||
|
message.isLoading = true;
|
||||||
|
sendMessage(message);
|
||||||
|
});
|
||||||
|
// const content = htmlContent.replace(/<[^>]*>[^<]*(<[^>]*>)?/gi, "");
|
||||||
|
document.getElementById("post-textarea")!.innerHTML = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const showScroll = () => {
|
||||||
|
const topval = ChatRef.value.scrollTop;
|
||||||
|
if (topval === 0) {
|
||||||
|
loadMoreData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
currentPage.value++;
|
||||||
|
getAllChatRecordMethod();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAllChatRecordMethod = () => {
|
||||||
|
getAllChatRecord(currentPage.value, pageSize, props.acceptUid).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
messageTotal.value = total;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
dataList.value?.splice(0, 0, item);
|
||||||
|
});
|
||||||
|
if (dataList.value.length >= total) {
|
||||||
|
ChatRef.value.scrollTop = 0;
|
||||||
|
} else {
|
||||||
|
ChatRef.value.scrollTop += ChatRef.value.clientHeight;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
currentUser.value = userStore.getUserInfo();
|
||||||
|
getUserById(props.acceptUid).then((res) => {
|
||||||
|
acceptUser.value = res.data;
|
||||||
|
});
|
||||||
|
dataList.value = [];
|
||||||
|
getAllChatRecord(currentPage.value, pageSize, props.acceptUid).then(async (res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
messageTotal.value = total;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
dataList.value.splice(0, 0, item);
|
||||||
|
});
|
||||||
|
await nextTick();
|
||||||
|
// 滚动到最底部
|
||||||
|
ChatRef.value.lastElementChild.scrollIntoView({
|
||||||
|
block: "start",
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.icon-item {
|
||||||
|
width: 1.2em;
|
||||||
|
height: 1.2em;
|
||||||
|
margin-right: 0.3125rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: fixed;
|
||||||
|
left: 45%;
|
||||||
|
top: 50%;
|
||||||
|
width: 90vw;
|
||||||
|
height: 85vh;
|
||||||
|
z-index: 20;
|
||||||
|
overflow: auto;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 10px; /* 可选：为容器添加圆角 */
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
width: 65%;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 90%;
|
||||||
|
min-width: 50rem;
|
||||||
|
transition:
|
||||||
|
transform 0.4s ease 0s,
|
||||||
|
width 0.4s ease 0s;
|
||||||
|
transform: translate(6.5rem, 2rem) scale(1);
|
||||||
|
overflow: visible;
|
||||||
|
box-shadow:
|
||||||
|
0 0.5rem 4rem 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
background-color: #fff;
|
||||||
|
transform-origin: left top;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
height: 3.75rem;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header-user {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-main {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.message-img {
|
||||||
|
width: 15rem;
|
||||||
|
height: 18.75rem;
|
||||||
|
object-fit: cover;
|
||||||
|
margin: 0 0.3125rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record {
|
||||||
|
height: 60%;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1.25rem 0;
|
||||||
|
|
||||||
|
.message-conent {
|
||||||
|
margin-left: 0.3125rem;
|
||||||
|
padding: 0.25rem 0.625rem;
|
||||||
|
border: 0.0625rem solid #f4f4f4;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-my-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1.25rem 0;
|
||||||
|
|
||||||
|
.message-my-conent {
|
||||||
|
margin-right: 0.3125rem;
|
||||||
|
padding: 0.25rem 0.625rem;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgb(0, 170, 255);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
height: 25%;
|
||||||
|
|
||||||
|
.input-tool {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 1.25rem;
|
||||||
|
padding: 0 0.3125rem;
|
||||||
|
|
||||||
|
.tool-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
resize: none;
|
||||||
|
border: 0rem;
|
||||||
|
outline: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.input-btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content:empty::before {
|
||||||
|
content: attr(placeholder);
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
cursor: text;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 60%;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0rem 0.75rem 1.375rem;
|
||||||
|
outline: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-cricle {
|
||||||
|
left: 18vw;
|
||||||
|
top: 1.3vw;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
z-index: 100;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.close-mask-white {
|
||||||
|
box-shadow:
|
||||||
|
0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.2); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
411
src/components/Comment.vue
Normal file
411
src/components/Comment.vue
Normal file
@@ -0,0 +1,411 @@
|
|||||||
|
<template>
|
||||||
|
<div class="comments-container">
|
||||||
|
<div class="total">共{{ computedTotal }}条评论</div>
|
||||||
|
<div class="list-container">
|
||||||
|
<div class="parent-comment" v-for="(oneComment, oneIndex) in dataList" :key="oneIndex">
|
||||||
|
<div class="comment-item">
|
||||||
|
<div class="comment-inner-container">
|
||||||
|
<div class="avatar">
|
||||||
|
<img class="avatar-item" :src="oneComment.avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="author-wrapper">
|
||||||
|
<div class="author">
|
||||||
|
<a class="name">{{ oneComment.username }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">{{ oneComment.content }}</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="date">
|
||||||
|
<span>{{ oneComment.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="interactions">
|
||||||
|
<div class="like">
|
||||||
|
<span
|
||||||
|
class="like-wrapper"
|
||||||
|
v-if="oneComment.isLike"
|
||||||
|
@click="likeComment(oneComment, -1, oneIndex, -1)"
|
||||||
|
>
|
||||||
|
<i class="iconfont icon-follow-fill" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ oneComment.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="like-wrapper" v-else @click="likeComment(oneComment, 1, oneIndex, -1)">
|
||||||
|
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ oneComment.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="reply" @click="saveComment(oneComment, oneIndex, 0)">
|
||||||
|
<span class="like-wrapper">
|
||||||
|
<ChatRound style="width: 1.2em; height: 1.2em" />
|
||||||
|
<span class="count">{{ oneComment.twoCommentCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reply-container">
|
||||||
|
<div class="list-container">
|
||||||
|
<div class="comment-item" v-for="(twoComment, twoIndex) in oneComment.children" :key="twoIndex">
|
||||||
|
<div class="comment-inner-container">
|
||||||
|
<div class="avatar">
|
||||||
|
<img class="avatar-item" :src="twoComment.avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="author-wrapper">
|
||||||
|
<div class="author">
|
||||||
|
<a class="name">{{ twoComment.username }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
回复<span style="color: rgba(61, 61, 61, 0.8)">{{ twoComment.replyUsername }}: </span
|
||||||
|
>{{ twoComment.content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="date">
|
||||||
|
<span>{{ twoComment.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="interactions">
|
||||||
|
<div class="like">
|
||||||
|
<span
|
||||||
|
class="like-wrapper"
|
||||||
|
v-if="twoComment.isLike"
|
||||||
|
@click="likeComment(twoComment, -1, oneIndex, twoIndex)"
|
||||||
|
>
|
||||||
|
<i class="iconfont icon-follow-fill" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ twoComment.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="like-wrapper" @click="likeComment(twoComment, 1, oneIndex, twoIndex)" v-else>
|
||||||
|
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ twoComment.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="reply" @click="saveComment(twoComment, oneIndex, twoIndex)">
|
||||||
|
<span class="like-wrapper">
|
||||||
|
<ChatRound style="width: 1.2em; height: 1.2em" />
|
||||||
|
<span class="count">回复</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="show-more"
|
||||||
|
v-if="
|
||||||
|
oneComment.twoCommentCount >= commentTotalMap.get(oneComment.id) &&
|
||||||
|
oneComment.twoCommentCount > showTwoCommentCount
|
||||||
|
"
|
||||||
|
@click="loadTwoMore(oneComment.id, oneIndex)"
|
||||||
|
>
|
||||||
|
展开更多的回复
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="show-more"
|
||||||
|
v-if="
|
||||||
|
oneComment.twoCommentCount < commentTotalMap.get(oneComment.id) &&
|
||||||
|
oneComment.twoCommentCount > showTwoCommentCount
|
||||||
|
"
|
||||||
|
@click="reback(oneComment.id, oneIndex)"
|
||||||
|
>
|
||||||
|
收起所有回复
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="padding-bottom: 100px"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ChatRound } from "@element-plus/icons-vue";
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { getCommentWithCommentByNoteId, getTwoCommentPageByOneCommentId } from "@/api/comment";
|
||||||
|
import { likeOrCollectionByDTO } from "@/api/likeOrCollection";
|
||||||
|
import type { LikeOrCollectionDTO } from "@/type/likeOrCollection";
|
||||||
|
import { formateTime } from "@/utils/util";
|
||||||
|
const props = defineProps({
|
||||||
|
nid: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
replyComment: {
|
||||||
|
type: Object,
|
||||||
|
// eslint-disable-next-line vue/require-valid-default-prop
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
currentPage: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
seed: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(["clickComment"]);
|
||||||
|
|
||||||
|
// const currentPage = ref(1);
|
||||||
|
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
const commentTotal = ref(0);
|
||||||
|
const computedTotal = ref(0);
|
||||||
|
const oneIndex = ref(-1);
|
||||||
|
const twoIndex = ref(-1);
|
||||||
|
|
||||||
|
const pageSize = 7;
|
||||||
|
const twoPageSize = 10;
|
||||||
|
const showTwoCommentCount = 3;
|
||||||
|
const commentMap = new Map();
|
||||||
|
const commentTotalMap = new Map();
|
||||||
|
|
||||||
|
const likeComment = (comment: any, status: number, one: number, two: number) => {
|
||||||
|
const data = {} as LikeOrCollectionDTO;
|
||||||
|
data.likeOrCollectionId = comment.id;
|
||||||
|
data.publishUid = comment.uid;
|
||||||
|
data.type = 2;
|
||||||
|
likeOrCollectionByDTO(data).then(() => {
|
||||||
|
if (two === -1) {
|
||||||
|
dataList.value[one].isLike = status == 1;
|
||||||
|
dataList.value[one].likeCount += status;
|
||||||
|
} else {
|
||||||
|
dataList.value[one].children[two].isLike = status == 1;
|
||||||
|
dataList.value[one].children[two].likeCount += status;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveComment = (comment: any, one: number, two: number) => {
|
||||||
|
oneIndex.value = one;
|
||||||
|
twoIndex.value = two;
|
||||||
|
emit("clickComment", comment);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addComment = () => {
|
||||||
|
// if (props.replyComment.pid === undefined) return;
|
||||||
|
|
||||||
|
let comment = props.replyComment;
|
||||||
|
console.log("comment", comment);
|
||||||
|
comment.likeCount = 0;
|
||||||
|
comment.twoCommentCount = 0;
|
||||||
|
comment.time = formateTime(new Date().getTime());
|
||||||
|
if (comment.pid === "0") {
|
||||||
|
dataList.value.splice(0, 0, comment);
|
||||||
|
} else {
|
||||||
|
if (dataList.value[oneIndex.value].children == null) {
|
||||||
|
dataList.value[oneIndex.value].children = [];
|
||||||
|
}
|
||||||
|
dataList.value[oneIndex.value].children.splice(twoIndex.value + 1, 0, comment);
|
||||||
|
}
|
||||||
|
computedTotal.value += 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadTwoMore = (oneCommentId: string, index: number) => {
|
||||||
|
let page = commentMap.get(oneCommentId);
|
||||||
|
page += 1;
|
||||||
|
getTwoCommentPageByOneCommentId(page, twoPageSize, oneCommentId).then((res) => {
|
||||||
|
const { records } = res.data;
|
||||||
|
if (page === 1) {
|
||||||
|
const spliceData = records.splice(showTwoCommentCount, records.length);
|
||||||
|
spliceData.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
dataList.value[index].children.push(item);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
dataList.value[index].children.push(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
commentTotalMap.set(oneCommentId, commentTotalMap.get(oneCommentId) + twoPageSize);
|
||||||
|
commentMap.set(oneCommentId, page);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const reback = (oneCommentId: string, index: number) => {
|
||||||
|
commentTotalMap.set(oneCommentId, 0);
|
||||||
|
commentMap.set(oneCommentId, 0);
|
||||||
|
const twoSpliceComment = dataList.value[index].children.splice(0, showTwoCommentCount);
|
||||||
|
dataList.value[index].children = twoSpliceComment;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCommentData = () => {
|
||||||
|
computedTotal.value = 0;
|
||||||
|
getCommentWithCommentByNoteId(props.currentPage, pageSize, props.nid).then((res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
const twoComments = item.children;
|
||||||
|
// 设置每一个一级评论的集合
|
||||||
|
commentMap.set(item.id, 0);
|
||||||
|
commentTotalMap.set(item.id, 0);
|
||||||
|
if (twoComments != null) {
|
||||||
|
const twoData = [] as Array<any>;
|
||||||
|
twoComments.forEach((element: any) => {
|
||||||
|
element.time = formateTime(element.time);
|
||||||
|
twoData.push(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
item.children = twoData;
|
||||||
|
}
|
||||||
|
computedTotal.value += item.twoCommentCount + 1;
|
||||||
|
dataList.value.push(item);
|
||||||
|
});
|
||||||
|
console.log("---所有评论", dataList.value);
|
||||||
|
commentTotal.value = total;
|
||||||
|
if (pageSize * props.currentPage >= commentTotal.value) return;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.nid, props.seed, props.currentPage],
|
||||||
|
([newNid, newSeed], [oldNid, oldSeed]) => {
|
||||||
|
console.log("评论功能", newNid, oldNid, props.currentPage);
|
||||||
|
if (newNid !== oldNid) {
|
||||||
|
dataList.value = [];
|
||||||
|
getCommentData();
|
||||||
|
}
|
||||||
|
if (newSeed !== oldSeed) {
|
||||||
|
addComment();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.comments-container {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.total {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.parent-comment {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.comment-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.comment-inner-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
margin-left: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 14px;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 4px;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
|
||||||
|
.date {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interactions {
|
||||||
|
display: flex;
|
||||||
|
margin-left: -2px;
|
||||||
|
|
||||||
|
.like-wrapper {
|
||||||
|
padding: 0 4px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.like-lottie {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 2px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-container {
|
||||||
|
margin-left: 52px;
|
||||||
|
|
||||||
|
.show-more {
|
||||||
|
margin-left: 44px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #13386c;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
src/components/FloatingBtn.vue
Normal file
64
src/components/FloatingBtn.vue
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="floating-btn-sets">
|
||||||
|
<el-backtop :bottom="80" :right="24">
|
||||||
|
<div class="back-top">
|
||||||
|
<Top style="width: 1.2em; height: 1.2em" color="rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</el-backtop>
|
||||||
|
|
||||||
|
<div class="reload" @click="refresh">
|
||||||
|
<Refresh style="width: 1.2em; height: 1.2em" color="rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Refresh, Top } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickRefresh"]);
|
||||||
|
const refresh = () => {
|
||||||
|
emit("clickRefresh", true);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.floating-btn-sets {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 40px;
|
||||||
|
grid-gap: 8px;
|
||||||
|
gap: 8px;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 24px;
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reload {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow:
|
||||||
|
0 2px 8px 0 rgba(0, 0, 0, 0.1),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
265
src/components/Loading.vue
Normal file
265
src/components/Loading.vue
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<div class="com__box">
|
||||||
|
<!-- loading -->
|
||||||
|
<div class="loading">
|
||||||
|
<div class="shape shape-4">
|
||||||
|
<div class="shape-4-top"></div>
|
||||||
|
<div class="shape-4-bottom"></div>
|
||||||
|
<div class="shape-4-eye"></div>
|
||||||
|
</div>
|
||||||
|
<div class="shape shape-1"></div>
|
||||||
|
<div class="shape shape-2"></div>
|
||||||
|
<div class="shape shape-3"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 说明：组件名 -->
|
||||||
|
<!-- <h4 class="explain">L75.vue</h4> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.com__box {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-1 {
|
||||||
|
background-color: #1875e5;
|
||||||
|
left: -5px;
|
||||||
|
animation: animationShape1 7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-2 {
|
||||||
|
background-color: #c5523f;
|
||||||
|
left: 15px;
|
||||||
|
animation: animationShape2 7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-3 {
|
||||||
|
background-color: #499255;
|
||||||
|
left: 35px;
|
||||||
|
animation: animationShape3 7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-4 {
|
||||||
|
background-color: #f2b736;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
left: -40px;
|
||||||
|
background-color: transparent !important;
|
||||||
|
z-index: 2;
|
||||||
|
animation: animationShape4 7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-4 > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-4 .shape-4-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #fbbc05;
|
||||||
|
clip: rect(0 30px 15px 0);
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
animation: animationShape4Top 0.4s ease infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-4 .shape-4-bottom {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #fbbc05;
|
||||||
|
clip: rect(15px 30px 30px 0);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
animation: animationShape4Bottom 0.4s ease infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-4 .shape-4-eye {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape4Top {
|
||||||
|
0% {
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape4Bottom {
|
||||||
|
0% {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape1 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
17% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
19% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
85% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape2 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
22% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape3 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
27% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
29% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
64% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animationShape4 {
|
||||||
|
0% {
|
||||||
|
left: -40px;
|
||||||
|
transform: rotateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
left: 50px;
|
||||||
|
transform: rotateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
left: 50px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
left: -40px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
left: -40px;
|
||||||
|
transform: rotateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
298
src/components/Note.vue
Normal file
298
src/components/Note.vue
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
<template>
|
||||||
|
<div class="feeds-container" v-infinite-scroll="loadMoreData" :infinite-scroll-distance="50">
|
||||||
|
<Waterfall
|
||||||
|
:list="noteList"
|
||||||
|
:width="options.width"
|
||||||
|
:gutter="options.gutter"
|
||||||
|
:hasAroundGutter="options.hasAroundGutter"
|
||||||
|
:animation-effect="options.animationEffect"
|
||||||
|
:animation-duration="options.animationDuration"
|
||||||
|
:animation-delay="options.animationDelay"
|
||||||
|
:breakpoints="options.breakpoints"
|
||||||
|
style="min-width: 740px"
|
||||||
|
>
|
||||||
|
<template #item="{ item }">
|
||||||
|
<el-skeleton style="width: 240px" :loading="!item.isLoading" animated>
|
||||||
|
<template #template>
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '240px',
|
||||||
|
maxHeight: '300px',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}"
|
||||||
|
@load="handleLoad(item)"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
|
||||||
|
<div style="padding: 14px">
|
||||||
|
<el-skeleton-item variant="h3" style="width: 100%" />
|
||||||
|
<div style="display: flex; align-items: center; margin-top: 2px; height: 16px">
|
||||||
|
<el-skeleton style="--el-skeleton-circle-size: 20px">
|
||||||
|
<template #template>
|
||||||
|
<el-skeleton-item variant="circle" />
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
<el-skeleton-item variant="text" style="margin-left: 10px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #default>
|
||||||
|
<div class="card" style="max-width: 240px">
|
||||||
|
<div class="image-container">
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '240px',
|
||||||
|
maxHeight: '300px',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}"
|
||||||
|
fit="cover"
|
||||||
|
@click="toMain(item.id)"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
<div v-if="item.auditStatus === '0'" class="overlay">审核中</div>
|
||||||
|
<div v-if="item.auditStatus === '2'" class="overlay not-passed">未通过⚠️</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<a class="title">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</a>
|
||||||
|
<div class="author-wrapper">
|
||||||
|
<a class="author">
|
||||||
|
<img class="author-avatar" :src="item.avatar" />
|
||||||
|
<span class="name">{{ item.username }}</span>
|
||||||
|
</a>
|
||||||
|
<span class="like-wrapper like-active">
|
||||||
|
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ item.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top-tag-area" v-show="type === 1 && item.pinned === '1'">
|
||||||
|
<div class="top-wrapper">置顶</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
</template>
|
||||||
|
</Waterfall>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Main
|
||||||
|
v-show="mainShow"
|
||||||
|
:nid="nid"
|
||||||
|
:nowTime="new Date()"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-main="close"
|
||||||
|
></Main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Waterfall } from "vue-waterfall-plugin-next";
|
||||||
|
import "vue-waterfall-plugin-next/dist/style.css";
|
||||||
|
import { ref, onMounted, watch } from "vue";
|
||||||
|
import { getTrendByUser } from "@/api/user";
|
||||||
|
import Main from "@/pages/main/main.vue";
|
||||||
|
import { options } from "@/constant/constant";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.type],
|
||||||
|
([newType]) => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
getNoteList(newType);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const noteList = ref<Array<any>>([]);
|
||||||
|
const noteTotal = ref(0);
|
||||||
|
const uid = route.query.uid as string;
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 10;
|
||||||
|
const nid = ref("");
|
||||||
|
const mainShow = ref(false);
|
||||||
|
const isCurrentUser = ref(false);
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const currentUid = userStore.getUserInfo().id;
|
||||||
|
|
||||||
|
const handleLoad = (item: any) => {
|
||||||
|
item.isLoading = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
mainShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toMain = (noteId: string) => {
|
||||||
|
// router.push({ name: "main", state: { nid: nid } });
|
||||||
|
nid.value = noteId;
|
||||||
|
mainShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setData = (res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
noteTotal.value = total;
|
||||||
|
// 过滤掉不是当前用户且状态“审核中”或“未通过”的记录
|
||||||
|
const filteredRecords = records.filter((item: any) => {
|
||||||
|
return item.uid === currentUid || (item.auditStatus !== "0" && item.auditStatus !== "2");
|
||||||
|
});
|
||||||
|
noteList.value.push(...filteredRecords);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteList = (type: number) => {
|
||||||
|
getTrendByUser(currentPage.value, pageSize, uid, type).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
currentPage.value += 1;
|
||||||
|
getNoteList(props.type);
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
getNoteList(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.image-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.overlay.not-passed {
|
||||||
|
color: red; /* 设置未通过状态的字体颜色为红色 */
|
||||||
|
}
|
||||||
|
.feeds-container {
|
||||||
|
position: relative;
|
||||||
|
transition: width 0.5s;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.noteImg {
|
||||||
|
width: 240px;
|
||||||
|
max-height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.top-tag-area {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
z-index: 4;
|
||||||
|
|
||||||
|
.top-wrapper {
|
||||||
|
background: #ff2442;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 120%;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 20px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-size: 12px;
|
||||||
|
transition: color 1s;
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
.author-avatar {
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-wrapper {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
88
src/components/SearchContainer.vue
Normal file
88
src/components/SearchContainer.vue
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sug-container-wrapper sug-pad">
|
||||||
|
<div class="sug-container">
|
||||||
|
<!---->
|
||||||
|
<div class="sug-box">
|
||||||
|
<!---->
|
||||||
|
<div class="sug-wrapper">
|
||||||
|
<div class="sug-item" v-for="(item, index) in dataList" :key="index" @click="searchPage(item.content)">
|
||||||
|
<!---->
|
||||||
|
<span v-html="item.highlightContent"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, watchEffect } from "vue";
|
||||||
|
import { getRandomString } from "@/utils/util";
|
||||||
|
import { useSearchStore } from "@/store/searchStore";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { addRecord } from "@/api/search";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const searchStore = useSearchStore();
|
||||||
|
const props = defineProps({
|
||||||
|
recordList: {
|
||||||
|
type: Array<any>,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
|
||||||
|
const searchPage = (keyword: string) => {
|
||||||
|
addRecord(keyword);
|
||||||
|
searchStore.setKeyword(keyword);
|
||||||
|
searchStore.pushRecord(keyword);
|
||||||
|
const seed = getRandomString(12);
|
||||||
|
searchStore.setSeed(seed);
|
||||||
|
router.push({ name: "search", query: { keyword: keyword } });
|
||||||
|
};
|
||||||
|
watchEffect(() => {
|
||||||
|
dataList.value = [];
|
||||||
|
if (props.recordList.length > 0) {
|
||||||
|
dataList.value = props.recordList;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.sug-container-wrapper::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-container-wrapper {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow:
|
||||||
|
0 0.25rem 2rem 0 rgba(0, 0, 0, 0.08),
|
||||||
|
0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
overflow: scroll;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
.sug-container {
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
|
||||||
|
.sug-item {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
line-height: 120%;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-item:hover {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
385
src/components/SujContainer.vue
Normal file
385
src/components/SujContainer.vue
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sug-container-wrapper query-trending sug-pad">
|
||||||
|
<div class="sug-container query-trending">
|
||||||
|
<div class="history" v-show="historyRecordList != null && historyRecordList.length > 0">
|
||||||
|
<div class="header">
|
||||||
|
<span> 历史记录 </span>
|
||||||
|
<div class="icon-group">
|
||||||
|
<div class="icon-box" @click="showDeleteTag">
|
||||||
|
<Delete style="width: 1.2em; height: 1.2em"></Delete>
|
||||||
|
</div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="history-list">
|
||||||
|
<div v-for="(item, index) in historyRecordList" :key="index">
|
||||||
|
<div class="history-item">
|
||||||
|
<span @click="searchPage(item)">{{ item }}</span>
|
||||||
|
<!---->
|
||||||
|
<span class="close-tag" v-show="showTagState" @click="deleteRecord(index)">X</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sug-box">
|
||||||
|
<div class="header">猜你想搜</div>
|
||||||
|
<div class="sug-wrapper">
|
||||||
|
<div
|
||||||
|
class="sug-item query-trending query-trending hotspot"
|
||||||
|
v-for="(item, index) in recommendRecords"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="sug-text" @click="searchPage(item)">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="hotspots">
|
||||||
|
<div class="header">
|
||||||
|
<span style="color: #888888">热点</span>
|
||||||
|
<img src="@/assets/images/3.png" class="redian" crossorigin="anonymous" />
|
||||||
|
</div>
|
||||||
|
<div class="hotspot-list">
|
||||||
|
<div class="hotspot-item" v-for="(item, index) in hotList" :key="index">
|
||||||
|
<p class="hotspot-index">{{ index + 1 }}</p>
|
||||||
|
<div class="hotspot-title" @click="searchPage(item.content)">
|
||||||
|
<span class="text">{{ item.content }}</span>
|
||||||
|
<img src="@/assets/images/1.png" crossorigin="anonymous" />
|
||||||
|
<img v-show="item.searchCount > 10" src="@/assets/images/2.png" crossorigin="anonymous" />
|
||||||
|
</div>
|
||||||
|
<span class="hotspot-score">{{ item.searchCount }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Delete } from "@element-plus/icons-vue";
|
||||||
|
import { ref, onMounted, watch } from "vue";
|
||||||
|
import { useSearchStore } from "@/store/searchStore";
|
||||||
|
import { getHotRecord, addRecord } from "@/api/search";
|
||||||
|
import { getRandomString } from "@/utils/util";
|
||||||
|
import { storage } from "@/utils/storage";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const searchStore = useSearchStore();
|
||||||
|
|
||||||
|
const historyRecordList = ref<Array<string>>([]);
|
||||||
|
const hotList = ref<Array<any>>([]);
|
||||||
|
const showTagState = ref(false);
|
||||||
|
const recommendRecords = ["壁纸", "风景", "情侣", "头像", "动漫", "动物"];
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
closeHistoryRecord: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const showDeleteTag = () => {
|
||||||
|
showTagState.value = !showTagState.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteRecord = (index: number) => {
|
||||||
|
historyRecordList.value.splice(index, 1);
|
||||||
|
// 使用store失效
|
||||||
|
storage.set("historyRecords", historyRecordList.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [searchStore.seed, props.closeHistoryRecord],
|
||||||
|
() => {
|
||||||
|
showTagState.value = false;
|
||||||
|
historyRecordList.value = searchStore.getRecords();
|
||||||
|
getHotRecord().then((res) => {
|
||||||
|
hotList.value = res.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const searchPage = (keyword: string) => {
|
||||||
|
addRecord(keyword);
|
||||||
|
searchStore.setKeyword(keyword);
|
||||||
|
searchStore.pushRecord(keyword);
|
||||||
|
const seed = getRandomString(12);
|
||||||
|
searchStore.setSeed(seed);
|
||||||
|
router.push({ name: "search", query: { keyword: keyword } });
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
historyRecordList.value = searchStore.getRecords();
|
||||||
|
getHotRecord().then((res) => {
|
||||||
|
hotList.value = res.data;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.redian {
|
||||||
|
width: 90px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
//隐藏滚动条
|
||||||
|
.sug-container-wrapper::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-container-wrapper.query-trending {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-container-wrapper {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow:
|
||||||
|
0 0.25rem 2rem 0 rgba(0, 0, 0, 0.08),
|
||||||
|
0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
overflow: scroll;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-container.query-trending {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
.history {
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 0.25rem 0 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
height: 2rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 120%;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
|
||||||
|
.icon-group {
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
grid-gap: 0.25rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
grid-gap: 0.25rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.5rem 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
grid-gap: 0.5rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
.close-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: -0.5rem;
|
||||||
|
right: 0;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1rem;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #888888;
|
||||||
|
border: 0.0625rem solid #f4f4f4;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 2rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 120%;
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 62.4375rem;
|
||||||
|
border: 0.0625rem solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.1); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-box {
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
padding: 0.6563rem 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
height: 2rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 120%;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.query-trending.hotspot:nth-child(odd) {
|
||||||
|
margin-right: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-trending.hotspot {
|
||||||
|
width: calc(50% - 0.125rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-trending {
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-item {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
line-height: 120%;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 1.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.1); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
transform-origin: left center; /* 调整缩放基点为左边中心 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspots {
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-item:first-child {
|
||||||
|
color: #ff2442;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-item:nth-child(2) {
|
||||||
|
color: rgb(128, 0, 94);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-item:nth-child(3) {
|
||||||
|
color: #ff24a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-item {
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
|
||||||
|
.hotspot-index {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 120%;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-title {
|
||||||
|
margin: 0 0.375rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 120%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-left: 0.375rem;
|
||||||
|
height: 0.975rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.1); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
transform-origin: left center; /* 调整缩放基点为左边中心 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hotspot-score {
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
margin-left: auto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sug-container.query-trending {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
src/constant/constant.ts
Normal file
57
src/constant/constant.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import loading from "@/assets/loading.png";
|
||||||
|
import error from "@/assets/error.png";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
// websocket地址
|
||||||
|
// export const wsKey = "ws://www.ccimgvideo.top/ws/";
|
||||||
|
// // 项目url地址
|
||||||
|
// export const baseURL = "http://www.ccimgvideo.top/api";
|
||||||
|
|
||||||
|
// 本地项目websocket地址
|
||||||
|
export const wsKey = "ws://localhost:8080/web/ws/";
|
||||||
|
// 本地项目url地址
|
||||||
|
export const baseURL = "http://localhost:8080/";
|
||||||
|
|
||||||
|
// 图片必须保持在336和186之间
|
||||||
|
|
||||||
|
export const options = reactive({
|
||||||
|
// 唯一key值
|
||||||
|
rowKey: "id",
|
||||||
|
// 卡片之间的间隙
|
||||||
|
gutter: 10,
|
||||||
|
// 是否有周围的gutter
|
||||||
|
hasAroundGutter: false,
|
||||||
|
// 卡片在PC上的宽度
|
||||||
|
width: 240,
|
||||||
|
// 自定义行显示个数，主要用于对移动端的适配
|
||||||
|
breakpoints: {
|
||||||
|
2000: {
|
||||||
|
// 当屏幕宽度小于等于1200
|
||||||
|
rowPerView: 5,
|
||||||
|
},
|
||||||
|
1200: {
|
||||||
|
// 当屏幕宽度小于等于1200
|
||||||
|
rowPerView: 4,
|
||||||
|
},
|
||||||
|
1000: {
|
||||||
|
// 当屏幕宽度小于等于800
|
||||||
|
rowPerView: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 动画效果
|
||||||
|
animationEffect: "animate__zoomIn",
|
||||||
|
// 动画时间
|
||||||
|
animationDuration: 2000,
|
||||||
|
// 动画延迟
|
||||||
|
animationDelay: 300,
|
||||||
|
// 背景色
|
||||||
|
backgroundColor: "#2C2E3A",
|
||||||
|
// imgSelector
|
||||||
|
imgSelector: "src.original",
|
||||||
|
// 加载配置
|
||||||
|
loadProps: {
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
},
|
||||||
|
// 是否懒加载
|
||||||
|
lazyload: true,
|
||||||
|
});
|
||||||
19
src/main.ts
Normal file
19
src/main.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import "./style.css";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
import router from "./router/index";
|
||||||
|
|
||||||
|
import ElementPlus from "element-plus";
|
||||||
|
import "element-plus/dist/index.css";
|
||||||
|
|
||||||
|
// 引入动画
|
||||||
|
import 'animate.css';
|
||||||
|
import "@/assets/font_4394635_lwuldvb474/iconfont.css";
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
|
app.use(ElementPlus);
|
||||||
|
app.mount("#app");
|
||||||
|
|
||||||
456
src/pages/dashboard/dashboard.vue
Normal file
456
src/pages/dashboard/dashboard.vue
Normal file
@@ -0,0 +1,456 @@
|
|||||||
|
<template>
|
||||||
|
<div class="feeds-page">
|
||||||
|
<div class="channel-container">
|
||||||
|
<div class="scroll-container channel-scroll-container">
|
||||||
|
<div class="content-container">
|
||||||
|
<div :class="categoryClass == '0' ? 'channel active' : 'channel'" @click="getNoteList">推荐</div>
|
||||||
|
<div
|
||||||
|
:class="categoryClass == item.id ? 'channel active' : 'channel'"
|
||||||
|
v-for="item in categoryList"
|
||||||
|
:key="item.id"
|
||||||
|
@click="getNoteListByCategory(item.id)"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loading-container"></div>
|
||||||
|
<div class="feeds-container" v-infinite-scroll="loadMoreData" :infinite-scroll-distance="50">
|
||||||
|
<div class="feeds-loading-top animate__animated animate__zoomIn animate__delay-0.5s" v-show="topLoading">
|
||||||
|
<Loading style="width: 1.2em; height: 1.2em"></Loading>
|
||||||
|
</div>
|
||||||
|
<Waterfall
|
||||||
|
:list="noteList"
|
||||||
|
:width="options.width"
|
||||||
|
:gutter="options.gutter"
|
||||||
|
:hasAroundGutter="options.hasAroundGutter"
|
||||||
|
:animation-effect="options.animationEffect"
|
||||||
|
:animation-duration="options.animationDuration"
|
||||||
|
:animation-delay="options.animationDelay"
|
||||||
|
:breakpoints="options.breakpoints"
|
||||||
|
style="min-width: 740px"
|
||||||
|
>
|
||||||
|
<template #item="{ item }">
|
||||||
|
<el-skeleton style="width: 240px" :loading="!item.isLoading" animated>
|
||||||
|
<template #template>
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '240px',
|
||||||
|
maxHeight: '300px',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}"
|
||||||
|
@load="handleLoad(item)"
|
||||||
|
></el-image>
|
||||||
|
<div style="padding: 14px">
|
||||||
|
<el-skeleton-item variant="h3" style="width: 100%" />
|
||||||
|
<div style="display: flex; align-items: center; margin-top: 2px; height: 16px">
|
||||||
|
<el-skeleton style="--el-skeleton-circle-size: 20px">
|
||||||
|
<template #template>
|
||||||
|
<el-skeleton-item variant="circle" />
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
<el-skeleton-item variant="text" style="margin-left: 10px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #default>
|
||||||
|
<div class="card" style="max-width: 240px">
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '240px',
|
||||||
|
maxHeight: '300px',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}"
|
||||||
|
fit="cover"
|
||||||
|
@click="toMain(item.id)"
|
||||||
|
></el-image>
|
||||||
|
<div class="footer">
|
||||||
|
<a class="title">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</a>
|
||||||
|
<div class="author-wrapper">
|
||||||
|
<a class="author">
|
||||||
|
<img class="author-avatar" :src="item.avatar" />
|
||||||
|
<span class="name">{{ item.username }}</span>
|
||||||
|
</a>
|
||||||
|
<span class="like-wrapper like-active">
|
||||||
|
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ item.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
</template>
|
||||||
|
</Waterfall>
|
||||||
|
|
||||||
|
<div class="feeds-loading" v-show="!isEnd">
|
||||||
|
<Loading style="width: 1.2em; height: 1.2em"></Loading>
|
||||||
|
</div>
|
||||||
|
<div class="feeds-end" v-show="isEnd">······ 已经到底了 ·····</div>
|
||||||
|
</div>
|
||||||
|
<FloatingBtn @click-refresh="refresh"></FloatingBtn>
|
||||||
|
<Main
|
||||||
|
v-show="mainShow"
|
||||||
|
:nid="nid"
|
||||||
|
:nowTime="new Date()"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-main="close"
|
||||||
|
></Main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Waterfall } from "vue-waterfall-plugin-next";
|
||||||
|
import "vue-waterfall-plugin-next/dist/style.css";
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { getRecommendNote, getNoteByDTO, addRecord } from "@/api/search";
|
||||||
|
import { getCategoryTreeData } from "@/api/category";
|
||||||
|
import type { NoteDTO, NoteSearch } from "@/type/note";
|
||||||
|
import type { Category } from "@/type/category";
|
||||||
|
import Main from "@/pages/main/main.vue";
|
||||||
|
import FloatingBtn from "@/components/FloatingBtn.vue";
|
||||||
|
import { options } from "@/constant/constant";
|
||||||
|
import { useSearchStore } from "@/store/searchStore";
|
||||||
|
import Loading from "@/components/Loading.vue";
|
||||||
|
import { refreshTab } from "@/utils/util";
|
||||||
|
const searchStore = useSearchStore();
|
||||||
|
const topLoading = ref(false);
|
||||||
|
const noteList = ref<Array<NoteSearch>>([]);
|
||||||
|
const categoryList = ref<Array<Category>>([]);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 20;
|
||||||
|
const noteTotal = ref(0);
|
||||||
|
const categoryClass = ref("0");
|
||||||
|
const mainShow = ref(false);
|
||||||
|
const nid = ref("");
|
||||||
|
const isEnd = ref(false);
|
||||||
|
const noteDTO = ref<NoteDTO>({
|
||||||
|
keyword: "",
|
||||||
|
type: 0,
|
||||||
|
cid: "",
|
||||||
|
cpid: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [searchStore.seed],
|
||||||
|
() => {
|
||||||
|
noteDTO.value.keyword = searchStore.keyWord;
|
||||||
|
noteDTO.value.cpid = "";
|
||||||
|
categoryClass.value = "0";
|
||||||
|
getNoteListByKeyword();
|
||||||
|
addRecord(searchStore.keyWord);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const toMain = (noteId: string) => {
|
||||||
|
// router.push({ name: "main", state: { nid: nid } });
|
||||||
|
nid.value = noteId;
|
||||||
|
mainShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
mainShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoad = (item: any) => {
|
||||||
|
item.isLoading = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const refresh = () => {
|
||||||
|
// 使用回调函数优化代码
|
||||||
|
refreshTab(() => {
|
||||||
|
topLoading.value = true;
|
||||||
|
console.log(111);
|
||||||
|
setTimeout(() => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
noteList.value = [];
|
||||||
|
getNoteList();
|
||||||
|
topLoading.value = false;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
if (noteList.value.length >= noteTotal.value) {
|
||||||
|
isEnd.value = true;
|
||||||
|
return; // 如果已经加载完所有数据，则不再请求
|
||||||
|
}
|
||||||
|
currentPage.value += 1;
|
||||||
|
if (noteDTO.value.cpid === "" && noteDTO.value.keyword == "") {
|
||||||
|
getRecommendNote(currentPage.value, pageSize).then((res: any) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setData = (res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
noteTotal.value = total;
|
||||||
|
if (records.length === 0) {
|
||||||
|
isEnd.value = true;
|
||||||
|
} else {
|
||||||
|
noteList.value.push(...records);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteList = async () => {
|
||||||
|
categoryClass.value = "0";
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getRecommendNote(currentPage.value, pageSize).then((res: any) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteListByCategory = (id: string) => {
|
||||||
|
categoryClass.value = id;
|
||||||
|
noteDTO.value.cpid = id;
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteListByKeyword = () => {
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryData = () => {
|
||||||
|
getCategoryTreeData().then((res: any) => {
|
||||||
|
categoryList.value = res.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
getCategoryData();
|
||||||
|
getNoteList();
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.feeds-page {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 24px;
|
||||||
|
padding-top: 72px;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.channel-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
|
||||||
|
.channel-scroll-container {
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100vw - 24px);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
height: 40px;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 72px;
|
||||||
|
|
||||||
|
.content-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.2); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeds-container {
|
||||||
|
position: relative;
|
||||||
|
transition: width 0.5s;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.feeds-loading {
|
||||||
|
margin: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeds-loading-top {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 6vh;
|
||||||
|
height: 6vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteImg {
|
||||||
|
width: 240px;
|
||||||
|
max-height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 20px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-size: 12px;
|
||||||
|
transition: color 1s;
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
.author-avatar {
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-wrapper {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-btn-sets {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 40px;
|
||||||
|
grid-gap: 8px;
|
||||||
|
gap: 8px;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 24px;
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reload {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow:
|
||||||
|
0 2px 8px 0 rgba(0, 0, 0, 0.1),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feeds-end {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
314
src/pages/follow-trend/follow-trend.vue
Normal file
314
src/pages/follow-trend/follow-trend.vue
Normal file
@@ -0,0 +1,314 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container" v-infinite-scroll="loadMoreData" :infinite-scroll-distance="50">
|
||||||
|
<div v-if="isLogin">
|
||||||
|
<ul class="trend-container">
|
||||||
|
<li class="trend-item" v-for="(item, index) in trendData" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.uid)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-content" @click="toMain(item.nid)">
|
||||||
|
{{ item.content }}
|
||||||
|
</div>
|
||||||
|
<div class="interaction-imgs" @click="toMain(item.nid)">
|
||||||
|
<div class="details-box" v-for="(url, index) in item.imgUrls" :key="index">
|
||||||
|
<el-image
|
||||||
|
v-if="!item.isLoading"
|
||||||
|
:src="url"
|
||||||
|
@load="handleLoad(item)"
|
||||||
|
style="height: 230px; width: 100%"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
<el-image
|
||||||
|
v-else
|
||||||
|
:src="url"
|
||||||
|
class="note-img animate__animated animate__fadeIn animate__delay-0.5s"
|
||||||
|
fit="cover"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-footer">
|
||||||
|
<div class="icon-item">
|
||||||
|
<i
|
||||||
|
class="iconfont icon-follow-fill"
|
||||||
|
style="width: 1em; height: 1em"
|
||||||
|
@click="like(item.nid, item.uid, index, -1)"
|
||||||
|
v-if="item.isLike"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
<i
|
||||||
|
class="iconfont icon-follow"
|
||||||
|
style="width: 1em; height: 1em"
|
||||||
|
@click="like(item.nid, item.uid, index, 1)"
|
||||||
|
v-else
|
||||||
|
></i
|
||||||
|
><span class="count">{{ item.likeCount }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-item">
|
||||||
|
<ChatRound style="width: 0.9em; height: 0.9em" /><span class="count">{{ item.commentCount }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-item">
|
||||||
|
<More style="width: 1em; height: 1em" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<FloatingBtn @click-refresh="refresh"></FloatingBtn>
|
||||||
|
<Main
|
||||||
|
v-show="mainShow"
|
||||||
|
:nid="nid"
|
||||||
|
:nowTime="new Date()"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-main="close"
|
||||||
|
></Main>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty description="用户未登录" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ChatRound, More, Refresh } from "@element-plus/icons-vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { getFollowTrend } from "@/api/follower";
|
||||||
|
import { formateTime, refreshTab } from "@/utils/util";
|
||||||
|
import FloatingBtn from "@/components/FloatingBtn.vue";
|
||||||
|
import Main from "@/pages/main/main.vue";
|
||||||
|
import type { LikeOrCollectionDTO } from "@/type/likeOrCollection";
|
||||||
|
import { likeOrCollectionByDTO } from "@/api/likeOrCollection";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = ref(5);
|
||||||
|
const trendData = ref<Array<any>>([]);
|
||||||
|
const trendTotal = ref(0);
|
||||||
|
const topLoading = ref(false);
|
||||||
|
const mainShow = ref(false);
|
||||||
|
const nid = ref("");
|
||||||
|
const likeOrCollectionDTO = ref<LikeOrCollectionDTO>({
|
||||||
|
likeOrCollectionId: "",
|
||||||
|
publishUid: "",
|
||||||
|
type: 0,
|
||||||
|
});
|
||||||
|
const isLogin = ref(false);
|
||||||
|
|
||||||
|
const handleLoad = (item: any) => {
|
||||||
|
item.isLoading = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
//router.push({ name: "user", state: { uid: uid } });
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFollowTrends = () => {
|
||||||
|
getFollowTrend(currentPage.value, pageSize.value).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
console.log(records, total);
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
trendData.value.push(item);
|
||||||
|
});
|
||||||
|
trendTotal.value = total;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
currentPage.value += 1;
|
||||||
|
getFollowTrends();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toMain = (noteId: string) => {
|
||||||
|
nid.value = noteId;
|
||||||
|
mainShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = (nid: string, val: any) => {
|
||||||
|
const index = trendData.value.findIndex((item) => item.nid === nid);
|
||||||
|
console.log("---val", val, index);
|
||||||
|
const _data = trendData.value[index];
|
||||||
|
if (_data.isLike != val.isLike) {
|
||||||
|
_data.isLike = val.isLike;
|
||||||
|
_data.likeCount += val.isLike ? 1 : -1;
|
||||||
|
}
|
||||||
|
if (val.isComment) {
|
||||||
|
_data.commentCount += 1;
|
||||||
|
}
|
||||||
|
mainShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const refresh = () => {
|
||||||
|
refreshTab(() => {
|
||||||
|
topLoading.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
trendData.value = [];
|
||||||
|
getFollowTrends();
|
||||||
|
topLoading.value = false;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const like = (nid: string, uid: string, index: number, val: number) => {
|
||||||
|
likeOrCollectionDTO.value.likeOrCollectionId = nid;
|
||||||
|
likeOrCollectionDTO.value.publishUid = uid;
|
||||||
|
likeOrCollectionDTO.value.type = 1;
|
||||||
|
likeOrCollectionByDTO(likeOrCollectionDTO.value).then(() => {
|
||||||
|
if (val < 0 && trendData.value[index].likeCount == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
trendData.value[index].isLike = val == 1;
|
||||||
|
trendData.value[index].likeCount += val;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
isLogin.value = userStore.isLogin();
|
||||||
|
getFollowTrends();
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 24px;
|
||||||
|
padding-top: 72px;
|
||||||
|
width: 67%;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.feeds-loading {
|
||||||
|
margin: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-container {
|
||||||
|
.trend-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 24px;
|
||||||
|
max-width: 100vw;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-imgs {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.details-box {
|
||||||
|
width: 25%;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 8px 12px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.note-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 230px;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 4px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-footer {
|
||||||
|
margin: 8px 12px 0 0;
|
||||||
|
padding: 0 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(51, 51, 51, 0.929);
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.2); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
928
src/pages/index.vue
Normal file
928
src/pages/index.vue
Normal file
@@ -0,0 +1,928 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container" id="container">
|
||||||
|
<div class="top">
|
||||||
|
<header class="mask-paper">
|
||||||
|
<a style="display: flex">
|
||||||
|
<img src="@/assets/logo.png" style="width: 80px" />
|
||||||
|
</a>
|
||||||
|
<div class="tool-box"></div>
|
||||||
|
<div class="input-box" id="sujContainer">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="keyword"
|
||||||
|
class="search-input"
|
||||||
|
placeholder="搜索小红书"
|
||||||
|
@input="changeInput"
|
||||||
|
@focus="focusInput"
|
||||||
|
@keyup.enter="searchPage"
|
||||||
|
ref="SearchInput"
|
||||||
|
/>
|
||||||
|
<div class="input-button">
|
||||||
|
<div class="close-icon" v-show="showClose" @click="clearInput">
|
||||||
|
<Close style="width: 1.2em; height: 1.2em; margin-right: 20px; margin-top: 5px" />
|
||||||
|
</div>
|
||||||
|
<div class="search-icon" @click="searchPage">
|
||||||
|
<a href="#">
|
||||||
|
<Search style="width: 1.2em; height: 1.2em; margin-right: 20px; margin-top: 5px" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<SearchContainer v-show="showSearch" :recordList="recordList"></SearchContainer>
|
||||||
|
<SujContainer v-show="showHistory" :closeHistoryRecord="showHistory"></SujContainer>
|
||||||
|
</div>
|
||||||
|
<div class="right"></div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="side-bar">
|
||||||
|
<ul class="channel-list">
|
||||||
|
<li :class="activeLink == 0 ? 'active-channel' : ''" @click="toLink(0)">
|
||||||
|
<a class="link-wrapper">
|
||||||
|
<House style="width: 1em; height: 1em; margin-right: 8px" /><span class="channel">发现</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li :class="activeLink == 1 ? 'active-channel' : ''" @click="toLink(1)">
|
||||||
|
<Star style="width: 1em; height: 1em; margin-right: 8px" /><span class="channel"> 动态</span>
|
||||||
|
</li>
|
||||||
|
<li :class="activeLink == 2 ? 'active-channel' : ''" @click="toLink(2)">
|
||||||
|
<Bell style="width: 1em; height: 1em; margin-right: 8px" />
|
||||||
|
|
||||||
|
<el-badge is-dot class="item" v-if="messageCount > 0 && userInfo != null">
|
||||||
|
<span class="channel"> 消息</span></el-badge
|
||||||
|
>
|
||||||
|
<span class="channel" v-else>消息</span>
|
||||||
|
</li>
|
||||||
|
<li :class="activeLink == 3 ? 'active-channel' : ''" @click="toLink(3)">
|
||||||
|
<CirclePlus style="width: 1em; height: 1em; margin-right: 8px" /><span class="channel"> 发布</span>
|
||||||
|
</li>
|
||||||
|
<div v-if="userInfo == null">
|
||||||
|
<el-button type="danger" round @click="login" class="custom-button">登录</el-button>
|
||||||
|
</div>
|
||||||
|
<li v-else :class="activeLink == 4 ? 'active-channel' : ''" @click="toLink(4)">
|
||||||
|
<el-avatar :src="userInfo.avatar" :size="22" />
|
||||||
|
<span class="channel">我</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div v-if="userInfo == null">
|
||||||
|
<div data-v-6432121e="" data-v-7d49aed8="" class="floating-box visible">
|
||||||
|
<div data-v-6432121e="" class="title">马上登录即可</div>
|
||||||
|
<div data-v-6432121e="" class="line-container">
|
||||||
|
<svg data-v-23d27ada="" data-v-6432121e="" class="reds-icon icon" width="16" height="16">
|
||||||
|
<use data-v-23d27ada="" xlink:href="#thumbUp"></use>
|
||||||
|
</svg>
|
||||||
|
<span data-v-6432121e="" class="desc">刷到更懂你的优质内容</span>
|
||||||
|
</div>
|
||||||
|
<div data-v-6432121e="" class="line-container">
|
||||||
|
<svg data-v-23d27ada="" data-v-6432121e="" class="reds-icon icon" width="16" height="16">
|
||||||
|
<use data-v-23d27ada="" xlink:href="#convention_b"></use>
|
||||||
|
</svg>
|
||||||
|
<span data-v-6432121e="" class="desc">搜索最新种草、拔草信息</span>
|
||||||
|
</div>
|
||||||
|
<div data-v-6432121e="" class="line-container">
|
||||||
|
<svg data-v-23d27ada="" data-v-6432121e="" class="reds-icon icon" width="16" height="16">
|
||||||
|
<use data-v-23d27ada="" xlink:href="#collect"></use>
|
||||||
|
</svg>
|
||||||
|
<span data-v-6432121e="" class="desc">查看收藏、点赞的笔记</span>
|
||||||
|
</div>
|
||||||
|
<div data-v-6432121e="" class="line-container">
|
||||||
|
<svg data-v-23d27ada="" data-v-6432121e="" class="reds-icon icon" width="16" height="16">
|
||||||
|
<use data-v-23d27ada="" xlink:href="#chat"></use>
|
||||||
|
</svg>
|
||||||
|
<span data-v-6432121e="" class="desc">与他人更好地互动、交流</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 嵌入 SVG 图标定义 -->
|
||||||
|
<svg style="display: none">
|
||||||
|
<symbol id="thumbUp" viewBox="0 0 24 24">
|
||||||
|
<!-- SVG 路径数据 -->
|
||||||
|
<path
|
||||||
|
d="M1 21h4V9H1v12zM23 10h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L16.17 3 9.59 9.59C9.21 9.95 9 10.45 9 11v8c0 .55.45 1 1 1h6c.38 0 .72-.21.89-.55l3.66-7.33c.08-.14.13-.3.13-.46V11c0-.55-.45-1-1-1zm-2 7h-4v-6h4v6z"
|
||||||
|
/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="convention_b" viewBox="0 0 24 24">
|
||||||
|
<!-- SVG 路径数据 -->
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
|
||||||
|
/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="collect" viewBox="0 0 24 24">
|
||||||
|
<!-- SVG 路径数据 -->
|
||||||
|
<path
|
||||||
|
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
|
||||||
|
/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="chat" viewBox="0 0 24 24">
|
||||||
|
<!-- SVG 路径数据 -->
|
||||||
|
<path d="M20 2H4c-1.1 0-2 .9-2 2v14l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9H6V9h12v2zm0-3H6V6h12v2z" />
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="information-container" id="informationContainer">
|
||||||
|
<div class="information-pad" v-show="padShow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="group-wrapper">
|
||||||
|
<a
|
||||||
|
class="menu-item hover-effect links"
|
||||||
|
target="_blank"
|
||||||
|
href="https://agree.xiaohongshu.com/h5/terms/ZXXY20220331001/-1"
|
||||||
|
>
|
||||||
|
<span>关于小红书</span>
|
||||||
|
<div class="icon">
|
||||||
|
<ArrowRight style="width: 1em; height: 1em; margin-right: 8px" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="menu-item hover-effect links"
|
||||||
|
target="_blank"
|
||||||
|
href="https://agree.xiaohongshu.com/h5/terms/ZXXY20220509001/-1"
|
||||||
|
>
|
||||||
|
<span>隐私，协议</span>
|
||||||
|
<div class="icon">
|
||||||
|
<ArrowRight style="width: 1em; height: 1em; margin-right: 8px" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="menu-item hover-effect">
|
||||||
|
<a href="#" @click="toUpshow = true">
|
||||||
|
<span> 帮助与客服 </span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="group-wrapper">
|
||||||
|
<div class="group-header">设置</div>
|
||||||
|
<div class="menu-item hover-effect">
|
||||||
|
<span>深色模式</span>
|
||||||
|
<div class="multistage-toggle component">
|
||||||
|
<button class="toggle-item active">
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<Sunny style="width: 1em; height: 1em" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="toggle-item">
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<Moon style="width: 1em; height: 1em" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="userInfo != null">
|
||||||
|
<div class="menu-item hover-effect" @click="logout">
|
||||||
|
<a href="#"><span>退出登录</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="information-wrapper" @click="loadPad">
|
||||||
|
<!-- <More style="width: 1em; height: 1em; margin-right: 8px" /> -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M19.75 12a.75.75 0 0 0-.75-.75H5a.75.75 0 0 0 0 1.5h14a.75.75 0 0 0 .75-.75m0-5a.75.75 0 0 0-.75-.75H5a.75.75 0 0 0 0 1.5h14a.75.75 0 0 0 .75-.75m0 10a.75.75 0 0 0-.75-.75H5a.75.75 0 0 0 0 1.5h14a.75.75 0 0 0 .75-.75"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="channel">更多</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-content with-side-bar">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Login v-show="loginShow" @click-child="close"></Login>
|
||||||
|
<ToUP v-show="toUpshow" @click-to-up="toUpshow = false"></ToUP>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Search, Sunny, Moon, Close, House, Star, Bell, ArrowRight, More, CirclePlus } from "@element-plus/icons-vue";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import Login from "@/pages/login.vue";
|
||||||
|
import { ref, watch, onMounted, computed, watchEffect } from "vue";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import { useSearchStore } from "@/store/searchStore";
|
||||||
|
import SujContainer from "@/components/SujContainer.vue";
|
||||||
|
import SearchContainer from "@/components/SearchContainer.vue";
|
||||||
|
import { addRecord, getRecordByKeyWord } from "@/api/search";
|
||||||
|
import { getRandomString } from "@/utils/util";
|
||||||
|
import { getChatUserList, getCountMessage } from "@/api/im";
|
||||||
|
import { useImStore } from "@/store/imStore";
|
||||||
|
import { loginOut } from "@/api/user";
|
||||||
|
import { wsKey } from "@/constant/constant";
|
||||||
|
import ToUP from "@/pages/to-up/index.vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const searchStore = useSearchStore();
|
||||||
|
const imStore = useImStore();
|
||||||
|
const loginShow = ref(true);
|
||||||
|
const userInfo = ref<any>({});
|
||||||
|
const showHistory = ref(false);
|
||||||
|
const showSearch = ref(false);
|
||||||
|
const keyword = ref("");
|
||||||
|
const showClose = ref(false);
|
||||||
|
const SearchInput = ref();
|
||||||
|
const recordList = ref<Array<string>>([]);
|
||||||
|
const activeLink = ref(1);
|
||||||
|
const padShow = ref(false);
|
||||||
|
const ws = ref();
|
||||||
|
const toUpshow = ref(false);
|
||||||
|
const isShowDot = ref(false);
|
||||||
|
|
||||||
|
const routerList = ["/dashboard", "/followTrend", "/notice", "/push", "/user", "/search"];
|
||||||
|
|
||||||
|
// 监听外部点击
|
||||||
|
onMounted(() => {
|
||||||
|
document.getElementById("container")!.addEventListener("click", function (e) {
|
||||||
|
let event = e || window.event;
|
||||||
|
let target = event.target || (event.srcElement as any);
|
||||||
|
isInDiv("sujContainer", target).then((data) => {
|
||||||
|
if (!data) {
|
||||||
|
showHistory.value = false;
|
||||||
|
showSearch.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
isInDiv("informationContainer", target).then((data) => {
|
||||||
|
if (!data) {
|
||||||
|
padShow.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const isInDiv = (dom: string, target: any) => {
|
||||||
|
return new Promise((res) => {
|
||||||
|
const data = document.getElementById(dom)!.contains(target);
|
||||||
|
res(data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchPage = () => {
|
||||||
|
// 1.storage中添加搜索记录
|
||||||
|
searchStore.setKeyword(keyword.value);
|
||||||
|
if (keyword.value.length > 0) {
|
||||||
|
addRecord(keyword.value);
|
||||||
|
searchStore.pushRecord(keyword.value);
|
||||||
|
searchStore.setSeed(getRandomString(12));
|
||||||
|
}
|
||||||
|
showSearch.value = false;
|
||||||
|
|
||||||
|
router.push({ name: "search", query: { keyword: keyword.value } });
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [searchStore.seed, route.query.date],
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if (newVal[0] != oldVal[0]) {
|
||||||
|
keyword.value = searchStore.keyWord;
|
||||||
|
showHistory.value = false;
|
||||||
|
showSearch.value = false;
|
||||||
|
}
|
||||||
|
if (newVal[1] != oldVal[1]) {
|
||||||
|
initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [imStore.countMessage],
|
||||||
|
(val) => {
|
||||||
|
const allCount = val[0].chatCount + val[0].likeOrCollectionCount + val[0].commentCount + val[0].followCount;
|
||||||
|
if (allCount === 0) {
|
||||||
|
isShowDot.value = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const messageCount = computed({
|
||||||
|
get: () => {
|
||||||
|
return (
|
||||||
|
imStore.countMessage.chatCount +
|
||||||
|
imStore.countMessage.likeOrCollectionCount +
|
||||||
|
imStore.countMessage.commentCount +
|
||||||
|
imStore.countMessage.followCount
|
||||||
|
);
|
||||||
|
},
|
||||||
|
set: (val) => {
|
||||||
|
imStore.setCountMessage(val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const url = window.location.href;
|
||||||
|
const _keyword = "keyword";
|
||||||
|
if (url.indexOf("?") != -1 && url.indexOf(_keyword) != -1) {
|
||||||
|
const val = url.substring(url.lastIndexOf(_keyword) + _keyword.length + 1, url.length);
|
||||||
|
keyword.value = decodeURI(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const changeInput = (e: any) => {
|
||||||
|
const { value } = e.target;
|
||||||
|
keyword.value = value;
|
||||||
|
showClose.value = keyword.value == "" ? false : true;
|
||||||
|
showSearch.value = keyword.value.length == 0 ? false : true;
|
||||||
|
showHistory.value = keyword.value.length > 0 ? false : true;
|
||||||
|
if (keyword.value.length > 0) {
|
||||||
|
getRecordByKeyWord(keyword.value).then((res) => {
|
||||||
|
recordList.value = res.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const focusInput = () => {
|
||||||
|
showClose.value = keyword.value == "" ? false : true;
|
||||||
|
showSearch.value = keyword.value.length == 0 ? false : true;
|
||||||
|
showHistory.value = keyword.value.length > 0 ? false : true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearInput = () => {
|
||||||
|
keyword.value = "";
|
||||||
|
showClose.value = false;
|
||||||
|
showHistory.value = true;
|
||||||
|
showSearch.value = false;
|
||||||
|
SearchInput.value.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toLink = (num: number) => {
|
||||||
|
activeLink.value = num;
|
||||||
|
const url = routerList[num];
|
||||||
|
if (url === "/user") {
|
||||||
|
router.push({ name: "user", query: { uid: userInfo.value.id } });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push({ path: url });
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = (val: boolean) => {
|
||||||
|
loginShow.value = val;
|
||||||
|
userInfo.value = userStore.getUserInfo();
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPad = () => {
|
||||||
|
padShow.value = !padShow.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const maxRetries = 5; // 最大重试次数
|
||||||
|
let retryCount = 0; // 当前重试次数
|
||||||
|
|
||||||
|
const connectWs = (uid: string) => {
|
||||||
|
ws.value = new WebSocket(wsKey + uid);
|
||||||
|
ws.value.onopen = () => {
|
||||||
|
console.log("连接成功");
|
||||||
|
retryCount = 0; // 重置重试计数
|
||||||
|
};
|
||||||
|
ws.value.onclose = () => {
|
||||||
|
console.log("连接断开");
|
||||||
|
if (userInfo.value != null && userInfo.value != undefined) {
|
||||||
|
if (retryCount < maxRetries) {
|
||||||
|
retryCount++;
|
||||||
|
const retryDelay = Math.min(1000 * retryCount, 5000); // 延迟时间（1秒，2秒，3秒，最多5秒）
|
||||||
|
console.log(`尝试重新连接，第 ${retryCount} 次重试，将在 ${retryDelay} 毫秒后重试`);
|
||||||
|
setTimeout(() => connectWs(userInfo.value.id), retryDelay);
|
||||||
|
} else {
|
||||||
|
console.log("已达到最大重试次数，停止重连");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.value.onmessage = (e: any) => {
|
||||||
|
const message = JSON.parse(e.data);
|
||||||
|
console.log("收到消息", message);
|
||||||
|
|
||||||
|
if (message.msgType === 0) {
|
||||||
|
const content = message.content;
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
_countMessage.likeOrCollectionCount = content.likeOrCollectionCount;
|
||||||
|
_countMessage.commentCount = content.commentCount;
|
||||||
|
_countMessage.followCount = content.followCount;
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
}
|
||||||
|
if (message.msgType === 1) {
|
||||||
|
imStore.setMessage(message);
|
||||||
|
}
|
||||||
|
if (message.msgType === 5) {
|
||||||
|
const userList = message.content;
|
||||||
|
imStore.setUserList(userList);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getChatUserListMethod = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
getChatUserList().then((res: any) => {
|
||||||
|
const data = res.data;
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
_countMessage.chatCount += item.count;
|
||||||
|
});
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
imStore.setUserList(data);
|
||||||
|
resolve(_countMessage.chatCount);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCountMessageMethod = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
getCountMessage().then((res: any) => {
|
||||||
|
const data = res.data;
|
||||||
|
imStore.setCountMessage(data);
|
||||||
|
resolve(data);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const login = () => {
|
||||||
|
loginShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
loginOut(userInfo.value.id).then(() => {
|
||||||
|
userStore.loginOut();
|
||||||
|
userInfo.value = null;
|
||||||
|
loginShow.value = true;
|
||||||
|
activeLink.value = 0;
|
||||||
|
ws.value.onclose();
|
||||||
|
router.push({ path: "/" });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getWsMessage = async () => {
|
||||||
|
if (userInfo.value === null || userInfo.value === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loginShow.value = false;
|
||||||
|
connectWs(userInfo.value.id);
|
||||||
|
const p = await getChatUserListMethod();
|
||||||
|
const q = (await getCountMessageMethod()) as any;
|
||||||
|
|
||||||
|
// TODO: 需要修复显示数量bug
|
||||||
|
const _countMessage = {} as any;
|
||||||
|
_countMessage.chatCount = p;
|
||||||
|
_countMessage.likeOrCollectionCount = q.likeOrCollectionCount;
|
||||||
|
_countMessage.commentCount = q.commentCount;
|
||||||
|
_countMessage.followCount = q.followCount;
|
||||||
|
|
||||||
|
messageCount.value = _countMessage;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPath = () => {
|
||||||
|
const url = window.location.href;
|
||||||
|
let path = "";
|
||||||
|
if (url.indexOf("?") != -1) {
|
||||||
|
const index = url.indexOf("?");
|
||||||
|
path = url.substring(url.lastIndexOf("/"), index);
|
||||||
|
} else {
|
||||||
|
path = url.substring(url.lastIndexOf("/"), url.length);
|
||||||
|
}
|
||||||
|
return path;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
userInfo.value = userStore.getUserInfo();
|
||||||
|
const path = getPath();
|
||||||
|
activeLink.value = path === "/search" ? 0 : routerList.findIndex((item) => item === path);
|
||||||
|
getWsMessage();
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加选中标签的效果 */
|
||||||
|
.channel-list li:hover {
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 激活的选中标签样式 */
|
||||||
|
.active-channel {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浮动框容器 */
|
||||||
|
.floating-box {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px; /* 调整内边距 */
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||||
|
max-width: 300px; /* 调整宽度 */
|
||||||
|
margin: 0 auto; /* 使浮动框居中 */
|
||||||
|
margin-left: -2px; /* 向左移动 2px */
|
||||||
|
cursor: pointer;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式 */
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 行容器样式 */
|
||||||
|
.line-container {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标样式 */
|
||||||
|
.reds-icon {
|
||||||
|
fill: #ff2442; /* 图标颜色 */
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 描述文本样式 */
|
||||||
|
.desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: -2px;
|
||||||
|
height: 48px;
|
||||||
|
background: #ff2442;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1728px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100vw;
|
||||||
|
height: 72px;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1728px;
|
||||||
|
height: 72px;
|
||||||
|
padding: 0 16px 0 24px;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
.tool-box {
|
||||||
|
width: 24px;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box {
|
||||||
|
height: 40px;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
|
||||||
|
@media screen and (max-width: 695px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 960px) and (max-width: 1191px) {
|
||||||
|
width: calc(-36px + 50vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1192px) and (max-width: 1423px) {
|
||||||
|
width: calc(-33.6px + 40vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1424px) and (max-width: 1727px) {
|
||||||
|
width: calc(-42.66667px + 33.33333vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1728px) {
|
||||||
|
width: 533.33333px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
padding: 0 84px 0 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: #333;
|
||||||
|
caret-color: #ff2442;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.close-icon .search-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.15); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.side-bar {
|
||||||
|
@media screen and (max-width: 695px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 696px) and (max-width: 959px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 960px) and (max-width: 1191px) {
|
||||||
|
width: calc(-18px + 25vw);
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1192px) and (max-width: 1423px) {
|
||||||
|
width: calc(-16.8px + 20vw);
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1424px) and (max-width: 1727px) {
|
||||||
|
width: calc(-21.33333px + 16.66667vw);
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1728px) {
|
||||||
|
width: 266.66667px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
height: calc(100vh - 72px);
|
||||||
|
overflow-y: scroll;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-top: 16px;
|
||||||
|
margin-top: 72px;
|
||||||
|
position: fixed;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
.channel-list {
|
||||||
|
min-height: auto;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.active-channel {
|
||||||
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: #333;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-left: 16px;
|
||||||
|
min-height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
|
||||||
|
.link-wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-count {
|
||||||
|
margin-left: 7rem;
|
||||||
|
background-color: red;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.information-container {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin-left: -6px;
|
||||||
|
|
||||||
|
.information-pad {
|
||||||
|
z-index: 16;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow:
|
||||||
|
0 4px 32px 0 rgba(0, 0, 0, 0.08),
|
||||||
|
0 1px 4px 0 rgba(0, 0, 0, 0.04);
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0px 12px;
|
||||||
|
list-style: none;
|
||||||
|
height: 0;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-width: 1px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-wrapper {
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 32px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
height: 40px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multistage-toggle {
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
display: flex();
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow:
|
||||||
|
0 2px 8px 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-item {
|
||||||
|
border-radius: 999px;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 添加选中标签的效果 */
|
||||||
|
.menu-item:hover {
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.information-wrapper {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
height: 48px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 600;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加选中标签的效果 */
|
||||||
|
.information-wrapper:hover {
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
@media screen and (min-width: 960px) and (max-width: 1191px) {
|
||||||
|
padding-left: calc(-6px + 25vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1192px) and (max-width: 1423px) {
|
||||||
|
padding-left: calc(-4.8px + 20vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1424px) and (max-width: 1727px) {
|
||||||
|
padding-left: calc(-5.33333px + 16.66667vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1728px) {
|
||||||
|
padding-left: 282.66667px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
596
src/pages/login.vue
Normal file
596
src/pages/login.vue
Normal file
File diff suppressed because one or more lines are too long
748
src/pages/main/main.vue
Normal file
748
src/pages/main/main.vue
Normal file
@@ -0,0 +1,748 @@
|
|||||||
|
<template>
|
||||||
|
<div class="note-detail-mask" style="transition: background-color 0.4s ease 0s;hsla(0,0%,100%,0.98)">
|
||||||
|
<div class="note-container">
|
||||||
|
<div class="media-container">
|
||||||
|
<el-carousel height="90vh" :autoplay="false">
|
||||||
|
<el-carousel-item v-for="(item, index) in noteInfo.imgList" :key="index">
|
||||||
|
<el-image
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
:src="item"
|
||||||
|
fit="contain"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
/>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="interaction-container">
|
||||||
|
<div class="author-container">
|
||||||
|
<div class="author-me">
|
||||||
|
<div class="info" @click="toUser(noteInfo.uid)">
|
||||||
|
<img class="avatar-item" style="width: 40px; height: 40px" :src="noteInfo.avatar" />
|
||||||
|
<span class="name">{{ noteInfo.username }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="follow-btn" v-if="currentUid !== noteInfo.uid">
|
||||||
|
<el-button type="info" size="large" round v-if="noteInfo.isFollow" @click="follow(noteInfo.uid, 1)"
|
||||||
|
>已关注</el-button
|
||||||
|
>
|
||||||
|
<el-button type="danger" size="large" round v-else @click="follow(noteInfo.uid, 0)">关注</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="follow-btn" v-else>
|
||||||
|
<el-dropdown>
|
||||||
|
<el-button type="danger" size="large" round>
|
||||||
|
编辑
|
||||||
|
<el-icon class="el-icon--right">
|
||||||
|
<arrow-down />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item v-if="noteInfo.pinned === '0'" @click="pinned(noteInfo.id, '1')"
|
||||||
|
>置顶</el-dropdown-item
|
||||||
|
>
|
||||||
|
<el-dropdown-item v-else @click="pinned(noteInfo.id, '0')">取消置顶</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="deleteNote(noteInfo.id)">删除</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="toEdit(noteInfo.id)">编辑</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="note-scroller" ref="noteScroller" @scroll="loadMoreData">
|
||||||
|
<div class="note-content">
|
||||||
|
<div class="title">{{ noteInfo.title }}</div>
|
||||||
|
<div class="desc">
|
||||||
|
<span>{{ noteInfo.content }} <br /></span>
|
||||||
|
<a class="tag tag-search" v-for="(item, index) in noteInfo.tagList" :key="index">#{{ item.title }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-container">
|
||||||
|
<span class="date">{{ noteInfo.time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider interaction-divider"></div>
|
||||||
|
|
||||||
|
<!-- 评论 -->
|
||||||
|
<div class="comments-el">
|
||||||
|
<Comment
|
||||||
|
:nid="props.nid"
|
||||||
|
:currentPage="currentPage"
|
||||||
|
:replyComment="replyComment"
|
||||||
|
:seed="seed"
|
||||||
|
@click-comment="clickComment"
|
||||||
|
>
|
||||||
|
</Comment>
|
||||||
|
</div>
|
||||||
|
<!-- -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="interactions-footer">
|
||||||
|
<div class="buttons">
|
||||||
|
<div class="left">
|
||||||
|
<span class="like-wrapper"
|
||||||
|
><span class="like-lottie" v-if="noteInfo.isCollection" @click="likeOrCollection(3, -1)">
|
||||||
|
<StarFilled style="width: 0.9em; height: 0.9em; color: #333" />
|
||||||
|
</span>
|
||||||
|
<span class="like-lottie" v-else @click="likeOrCollection(3, 1)">
|
||||||
|
<Star style="width: 0.8em; height: 0.8em; color: #333" />
|
||||||
|
</span>
|
||||||
|
<span class="count">{{ noteInfo.collectionCount }}</span></span
|
||||||
|
>
|
||||||
|
<span class="collect-wrapper">
|
||||||
|
<span class="like-lottie" v-if="noteInfo.isLike" @click="likeOrCollection(1, -1)">
|
||||||
|
<i class="iconfont icon-follow-fill" style="width: 0.8em; height: 0.8em; color: #333"></i>
|
||||||
|
</span>
|
||||||
|
<span class="like-lottie" v-else @click="likeOrCollection(1, 1)">
|
||||||
|
<i class="iconfont icon-follow" style="width: 0.8em; height: 0.8em; color: #333"></i>
|
||||||
|
</span>
|
||||||
|
<span class="count">{{ noteInfo.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-wrapper">
|
||||||
|
<span class="like-lottie">
|
||||||
|
<ChatRound style="width: 0.8em; height: 0.8em; color: #333" />
|
||||||
|
</span>
|
||||||
|
<span class="count">
|
||||||
|
{{ noteInfo.commentCount }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="share-wrapper"></div>
|
||||||
|
</div>
|
||||||
|
<div :class="showSaveBtn ? 'comment-wrapper active comment-comp ' : 'comment-wrapper comment-comp '">
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<input
|
||||||
|
class="comment-input"
|
||||||
|
v-model="commentValue"
|
||||||
|
type="text"
|
||||||
|
:placeholder="commentPlaceVal"
|
||||||
|
@input="commenInput"
|
||||||
|
@keyup.enter="saveComment"
|
||||||
|
/>
|
||||||
|
<div class="input-buttons" @click="clearCommeent" v-show="showSaveBtn">
|
||||||
|
<Close style="width: 1.2em; height: 1.2em" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="submit" @click="saveComment">发送</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="close-cricle" @click="close">
|
||||||
|
<div class="close close-mask-white">
|
||||||
|
<Close style="width: 1.2em; height: 1.2em; color: rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="back-desk"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Close, Star, ChatRound, StarFilled, ArrowDown } from "@element-plus/icons-vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { getNoteById, pinnedNote, deleteNoteByIds } from "@/api/note";
|
||||||
|
import { likeOrCollectionByDTO } from "@/api/likeOrCollection";
|
||||||
|
import type { NoteInfo } from "@/type/note";
|
||||||
|
import type { LikeOrCollectionDTO } from "@/type/likeOrCollection";
|
||||||
|
import { formateTime, getRandomString } from "@/utils/util";
|
||||||
|
import { followById } from "@/api/follower";
|
||||||
|
import Comment from "@/components/Comment.vue";
|
||||||
|
import type { CommentDTO } from "@/type/comment";
|
||||||
|
import { saveCommentByDTO, syncCommentByIds } from "@/api/comment";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// 这是路由传参
|
||||||
|
// nid.value = history.state.nid;
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickMain"]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
nid: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
nowTime: {
|
||||||
|
type: Date,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentUid = ref("");
|
||||||
|
const noteInfo = ref<NoteInfo>({
|
||||||
|
id: "",
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
noteCover: "",
|
||||||
|
uid: "",
|
||||||
|
username: "",
|
||||||
|
avatar: "",
|
||||||
|
imgList: [],
|
||||||
|
type: -1,
|
||||||
|
likeCount: 0,
|
||||||
|
collectionCount: 0,
|
||||||
|
commentCount: 0,
|
||||||
|
tagList: [],
|
||||||
|
time: "",
|
||||||
|
isFollow: false,
|
||||||
|
isLike: false,
|
||||||
|
isCollection: false,
|
||||||
|
pinned: "0",
|
||||||
|
});
|
||||||
|
const commentValue = ref("");
|
||||||
|
const commentPlaceVal = ref("请输入内容");
|
||||||
|
const commentObject = ref<any>({});
|
||||||
|
const replyComment = ref<any>({});
|
||||||
|
const showSaveBtn = ref(false);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const seed = ref("");
|
||||||
|
const commentIds = ref<Array<string>>([]);
|
||||||
|
const noteScroller = ref(null);
|
||||||
|
const isLogin = ref(false);
|
||||||
|
const likeOrComment = ref({
|
||||||
|
isLike: false,
|
||||||
|
isComment: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.nowTime],
|
||||||
|
() => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
if (props.nid !== null && props.nid !== "") {
|
||||||
|
getNoteById(props.nid).then((res: any) => {
|
||||||
|
console.log("---note", res.data);
|
||||||
|
noteInfo.value = res.data;
|
||||||
|
noteInfo.value.imgList = JSON.parse(res.data.urls);
|
||||||
|
noteInfo.value.time = formateTime(res.data.time);
|
||||||
|
likeOrComment.value.isLike = noteInfo.value.isLike;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const noLoginNotice = () => {
|
||||||
|
if (!isLogin.value) {
|
||||||
|
ElMessage.warning("用户未登录");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
const _login = noLoginNotice();
|
||||||
|
if (!_login) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
if (isLogin.value) {
|
||||||
|
syncCommentByIds(commentIds.value).then(() => {
|
||||||
|
commentIds.value = [];
|
||||||
|
emit("clickMain", props.nid, likeOrComment.value);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
emit("clickMain");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const follow = (fid: string, type: number) => {
|
||||||
|
const _login = noLoginNotice();
|
||||||
|
if (!_login) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
followById(fid).then(() => {
|
||||||
|
noteInfo.value.isFollow = type == 0;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const likeOrCollection = (type: number, val: number) => {
|
||||||
|
const _login = noLoginNotice();
|
||||||
|
if (!_login) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const likeOrCollectionDTO = {} as LikeOrCollectionDTO;
|
||||||
|
likeOrCollectionDTO.likeOrCollectionId = noteInfo.value.id;
|
||||||
|
likeOrCollectionDTO.publishUid = noteInfo.value.uid;
|
||||||
|
likeOrCollectionDTO.type = type == 1 ? 1 : 3;
|
||||||
|
likeOrCollectionByDTO(likeOrCollectionDTO).then(() => {
|
||||||
|
if (type == 1) {
|
||||||
|
noteInfo.value.isLike = val == 1;
|
||||||
|
noteInfo.value.likeCount += val;
|
||||||
|
likeOrComment.value.isLike = val == 1;
|
||||||
|
} else {
|
||||||
|
noteInfo.value.isCollection = val == 1;
|
||||||
|
noteInfo.value.collectionCount += val;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const pinned = (noteId: string, type: string) => {
|
||||||
|
pinnedNote(noteId)
|
||||||
|
.then((res: any) => {
|
||||||
|
if (res.data) {
|
||||||
|
noteInfo.value.pinned = type;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage.warning("最多只能置顶3个笔记");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteNote = (noteId: string) => {
|
||||||
|
const data = [] as Array<string>;
|
||||||
|
data.push(noteId);
|
||||||
|
deleteNoteByIds(data).then(() => {
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
emit("clickMain");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toEdit = (noteId: string) => {
|
||||||
|
router.push({ path: "/push", query: { date: Date.now(), noteId: noteId } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const clickComment = (comment: any) => {
|
||||||
|
commentObject.value = comment;
|
||||||
|
commentPlaceVal.value = "回复" + comment.username;
|
||||||
|
};
|
||||||
|
|
||||||
|
const commenInput = (e: any) => {
|
||||||
|
const { value } = e.target;
|
||||||
|
commentValue.value = value;
|
||||||
|
showSaveBtn.value = commentValue.value.length > 0 || commentObject.value.pid !== undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveComment = () => {
|
||||||
|
const _login = noLoginNotice();
|
||||||
|
if (!_login) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const comment = {} as CommentDTO;
|
||||||
|
comment.nid = props.nid;
|
||||||
|
comment.noteUid = noteInfo.value.uid;
|
||||||
|
if (commentObject.value.pid === undefined) {
|
||||||
|
comment.pid = "0";
|
||||||
|
comment.replyId = "0";
|
||||||
|
comment.replyUid = noteInfo.value.uid;
|
||||||
|
comment.level = 1;
|
||||||
|
} else if (commentObject.value.pid == "0") {
|
||||||
|
comment.pid = commentObject.value.id;
|
||||||
|
comment.replyId = commentObject.value.id;
|
||||||
|
comment.replyUid = commentObject.value.uid;
|
||||||
|
comment.level = 2;
|
||||||
|
} else {
|
||||||
|
comment.pid = commentObject.value.pid;
|
||||||
|
comment.replyId = commentObject.value.id;
|
||||||
|
comment.replyUid = commentObject.value.uid;
|
||||||
|
comment.level = 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
comment.content = commentValue.value;
|
||||||
|
saveCommentByDTO(comment).then((res: any) => {
|
||||||
|
replyComment.value = res.data;
|
||||||
|
replyComment.value.replyUsername = commentObject.value.username;
|
||||||
|
commentValue.value = "";
|
||||||
|
commentObject.value = {};
|
||||||
|
commentPlaceVal.value = "请输入内容";
|
||||||
|
showSaveBtn.value = false;
|
||||||
|
seed.value = getRandomString(12);
|
||||||
|
commentIds.value.push(res.data.id);
|
||||||
|
likeOrComment.value.isComment = true;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearCommeent = () => {
|
||||||
|
commentValue.value = "";
|
||||||
|
commentObject.value = {};
|
||||||
|
commentPlaceVal.value = "请输入内容";
|
||||||
|
showSaveBtn.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
console.log("main加载更多");
|
||||||
|
const container = noteScroller.value as any;
|
||||||
|
if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
|
||||||
|
currentPage.value += 1;
|
||||||
|
console.log("到底了");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
isLogin.value = userStore.isLogin();
|
||||||
|
if (isLogin.value) {
|
||||||
|
currentUid.value = userStore.getUserInfo().id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-detail-mask {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 20;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.back-desk {
|
||||||
|
position: fixed;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
opacity: 0.5;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-cricle {
|
||||||
|
left: 1.3vw;
|
||||||
|
top: 1.3vw;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
z-index: 100;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.close-mask-white {
|
||||||
|
box-shadow:
|
||||||
|
0 2px 8px 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.2); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-container {
|
||||||
|
width: 65%;
|
||||||
|
height: 86%;
|
||||||
|
transition:
|
||||||
|
transform 0.4s ease 0s,
|
||||||
|
width 0.4s ease 0s;
|
||||||
|
transform: translate(280px, 60px) scale(1);
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 64px 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 1px 4px 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 20px;
|
||||||
|
background: #f8f8f8;
|
||||||
|
transform-origin: left top;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.media-container {
|
||||||
|
width: 65%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 20px 0 0 20px;
|
||||||
|
transform: translateZ(0);
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
min-width: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-container {
|
||||||
|
width: 35%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 0 20px 20px 0;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.author-me {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-scroller::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-scroller {
|
||||||
|
transition: scroll 0.4s;
|
||||||
|
overflow-y: scroll;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 80vh;
|
||||||
|
|
||||||
|
.note-content {
|
||||||
|
padding: 0 24px 24px;
|
||||||
|
color: var(--color-primary-label);
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 140%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 150%;
|
||||||
|
color: #333;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
|
.tag-search {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-right: 2px;
|
||||||
|
color: #13386c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-divider {
|
||||||
|
margin: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 4px 8px;
|
||||||
|
list-style: none;
|
||||||
|
height: 0;
|
||||||
|
border: solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-width: 1px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-el {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interactions-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
background: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 12px 24px 24px;
|
||||||
|
height: 130px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
flex-basis: 130px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-right: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.like-wrapper {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-right: 5px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.like-lottie {
|
||||||
|
transform: scale(1.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collect-wrapper {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-right: 5px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.like-lottie {
|
||||||
|
transform: scale(1.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.15); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-wrapper {
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.like-lottie {
|
||||||
|
transform: scale(1.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-wrapper {
|
||||||
|
&.active {
|
||||||
|
.input-wrapper {
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-wrapper {
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: flex 0.3s;
|
||||||
|
|
||||||
|
.comment-input:placeholder-shown {
|
||||||
|
background-image: none;
|
||||||
|
padding: 12px 92px 12px 36px;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEUAAAA0NDQyMjIzMzM2NjY2NjYyMjI0NDQ1NTU1NTUzMzM1NTU1NTUzMzM1NTUzMzM1NTU1NTVl84gVAAAAEnRSTlMAmUyGEzlgc2AmfRx9aToKQzCSoXt+AAAAhElEQVRIx+3Uuw6DMAyF4XOcBOdCafv+L9vQkQFyJBak/JOHT7K8GLM7epuHusRhHwP/mejJ77i32CpZh33aD+lDFDzgZFE8+tgUv5BB9NxEb9NPL3i46JvoUUhXPBKZFQ/rTPHI3ZXt8xr12KX055LoAVtXz9kKHprxNMMxXqRvmAn9ACQ7A/tTXYAxAAAAAElFTkSuQmCC);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
background-position: 16px 12px;
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
padding: 12px 92px 12px 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 16px;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
caret-color: rgba(51, 51, 51, 0.3);
|
||||||
|
border-radius: 22px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-buttons {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 92px;
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
margin-left: 8px;
|
||||||
|
width: 60px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #3d8af5;
|
||||||
|
border-radius: 44px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-comp {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
382
src/pages/message/children/comment.vue
Normal file
382
src/pages/message/children/comment.vue
Normal file
@@ -0,0 +1,382 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="message-container" v-infinite-scroll="loadMore">
|
||||||
|
<li class="message-item" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<!-- https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png -->
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.uid)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span v-if="item.pid === '0'">评论了您的笔记</span>
|
||||||
|
<span v-if="item.replyUid === currentUid && item.pid !== '0'">回复了您的评论</span>
|
||||||
|
<span v-if="item.replyUid !== currentUid && item.pid !== '0'">回复了{{ item.replyUsername }}的评论</span>
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-content">
|
||||||
|
<span>{{ item.content }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="quote-info" v-show="item.replyContent !== null">
|
||||||
|
{{ item.replyContent }}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="action">
|
||||||
|
<div class="action-reply">
|
||||||
|
<ChatRound style="width: 1.2em; height: 1.2em" />
|
||||||
|
<div class="action-text">回复</div>
|
||||||
|
</div>
|
||||||
|
<div class="action-like">
|
||||||
|
<i class="iconfont icon-follow" style="color: #333"></i>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="extra" @click="toMain(item.nid)">
|
||||||
|
<img class="extra-image" :src="item.noteCover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- <li class="message-item">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<img
|
||||||
|
class="avatar-item"
|
||||||
|
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>这是名词</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span>评论了您的笔记 </span><span>2021-10-9</span>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-content">
|
||||||
|
<span>这是具体内容</span>
|
||||||
|
</div>
|
||||||
|
<div class="action">
|
||||||
|
<div class="comment-wrapper action-comment">
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<textarea
|
||||||
|
rows="1"
|
||||||
|
class="comment-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="回复 你好"
|
||||||
|
style="height: 40px"
|
||||||
|
></textarea>
|
||||||
|
<div class="input-buttons">
|
||||||
|
<Star style="width: 1.2em; height: 1.2em; margin: 0 6px" />
|
||||||
|
<Star style="width: 1.2em; height: 1.2em; margin: 0 6px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="submit">发送</button>
|
||||||
|
</div>
|
||||||
|
<div class="action-cancel">取消</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra">
|
||||||
|
<img
|
||||||
|
class="extra-image"
|
||||||
|
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// import { ChatRound, Star } from "@element-plus/icons-vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { formateTime } from "@/utils/util";
|
||||||
|
import { getNoticeComment } from "@/api/comment";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 12;
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
const dataTotal = ref(0);
|
||||||
|
const currentUid = ref("");
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickMain"]);
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
currentPage.value += 1;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toMain = (nid: string) => {
|
||||||
|
emit("clickMain", nid);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPageData = () => {
|
||||||
|
getNoticeComment(currentPage.value, pageSize).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
dataTotal.value = total;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
dataList.value.push(item);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
currentUid.value = userStore.getUserInfo().id;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-container {
|
||||||
|
width: 40rem;
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.msg-count {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 4px;
|
||||||
|
height: 17px;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
display: flex;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.action-reply {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 88px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-like {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 12px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-comment {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 70px);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: flex 0.3s;
|
||||||
|
|
||||||
|
.comment-input:placeholder-shown {
|
||||||
|
background-image: none;
|
||||||
|
padding: 12px 92px 12px 36px;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEUAAAA0NDQyMjIzMzM2NjY2NjYyMjI0NDQ1NTU1NTUzMzM1NTU1NTUzMzM1NTUzMzM1NTU1NTVl84gVAAAAEnRSTlMAmUyGEzlgc2AmfRx9aToKQzCSoXt+AAAAhElEQVRIx+3Uuw6DMAyF4XOcBOdCafv+L9vQkQFyJBak/JOHT7K8GLM7epuHusRhHwP/mejJ77i32CpZh33aD+lDFDzgZFE8+tgUv5BB9NxEb9NPL3i46JvoUUhXPBKZFQ/rTPHI3ZXt8xr12KX055LoAVtXz9kKHprxNMMxXqRvmAn9ACQ7A/tTXYAxAAAAAElFTkSuQmCC);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
background-position: 16px 12px;
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
padding: 12px 92px 12px 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 16px;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
caret-color: rgba(51, 51, 51, 0.3);
|
||||||
|
border-radius: 22px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-buttons {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 92px;
|
||||||
|
color: rgba(51, 51, 51, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
margin-left: 8px;
|
||||||
|
width: 60px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #3d8af5;
|
||||||
|
border-radius: 44px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-cancel {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-wrapper {
|
||||||
|
display: flex;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra {
|
||||||
|
min-width: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
.extra-image {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
220
src/pages/message/children/follower.vue
Normal file
220
src/pages/message/children/follower.vue
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="agree-container" v-infinite-scroll="loadMore">
|
||||||
|
<li class="agree-item" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<!-- https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png -->
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.uid)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span>开始关注您了 </span><span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra">
|
||||||
|
<el-button type="info" round size="large" v-if="item.isFollow" @click="follow(item.uid, index, 1)"
|
||||||
|
>互相关注</el-button
|
||||||
|
>
|
||||||
|
<el-button type="danger" round size="large" v-else @click="follow(item.uid, index, -1)">回关</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { getNoticeFollower } from "@/api/follower";
|
||||||
|
import { formateTime } from "@/utils/util";
|
||||||
|
import { followById } from "@/api/follower";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 12;
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
const dataTotal = ref(0);
|
||||||
|
|
||||||
|
const getPageData = () => {
|
||||||
|
getNoticeFollower(currentPage.value, pageSize).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
dataTotal.value = total;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
dataList.value.push(item);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const follow = (fid: string, index: number, type: number) => {
|
||||||
|
followById(fid).then(() => {
|
||||||
|
dataList.value[index].isFollow = type == -1;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
currentPage.value += 1;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree-container {
|
||||||
|
width: 40rem;
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
.agree-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.msg-count {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 4px;
|
||||||
|
height: 17px;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra {
|
||||||
|
min-width: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
.follow-button {
|
||||||
|
width: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new.large {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 0 24px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new.primary {
|
||||||
|
background-color: #ff2e4d;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
200
src/pages/message/children/like-collection.vue
Normal file
200
src/pages/message/children/like-collection.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="agree-container" v-infinite-scroll="loadMore">
|
||||||
|
<li class="agree-item" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<!-- https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png -->
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.uid)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span v-if="item.type == 1">赞了您的笔记</span>
|
||||||
|
<span v-if="item.type == 2">赞了您的评论</span>
|
||||||
|
<span v-if="item.type == 3">收藏您的笔记</span>
|
||||||
|
<span v-if="item.type == 4">赞了您的{{ item.content }}专辑</span>
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="interaction-content">
|
||||||
|
<span>这是具体内容</span>
|
||||||
|
</div> -->
|
||||||
|
<div class="quote-info" v-if="item.type == 2">{{ item.content }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra" @click="toPage(item.itemId)">
|
||||||
|
<img class="extra-image" :src="item.itemCover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { getNoticeLikeOrCollection } from "@/api/likeOrCollection";
|
||||||
|
import { formateTime } from "@/utils/util";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickMain"]);
|
||||||
|
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 12;
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
const dataTotal = ref(0);
|
||||||
|
|
||||||
|
const toPage = (nid: string) => {
|
||||||
|
emit("clickMain", nid);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPageData = () => {
|
||||||
|
getNoticeLikeOrCollection(currentPage.value, pageSize).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
dataTotal.value = total;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
item.time = formateTime(item.time);
|
||||||
|
dataList.value.push(item);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
currentPage.value += 1;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree-container {
|
||||||
|
width: 40rem;
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
.agree-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.msg-count {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 4px;
|
||||||
|
height: 17px;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra {
|
||||||
|
min-width: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
.extra-image {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
171
src/pages/message/children/message.vue
Normal file
171
src/pages/message/children/message.vue
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="message-container">
|
||||||
|
<li class="message-item" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<!-- https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png -->
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.uid)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span>{{ item.time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="interaction-content" @click="toChat(item.uid, index)">
|
||||||
|
<span>{{ item.content }}</span>
|
||||||
|
<div class="msg-count" v-show="item.count > 0">{{ item.count }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<Chat
|
||||||
|
v-if="chatShow"
|
||||||
|
:acceptUid="acceptUid"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-chat="close"
|
||||||
|
></Chat>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useImStore } from "@/store/imStore";
|
||||||
|
import { ref, watchEffect } from "vue";
|
||||||
|
import { formateTime } from "@/utils/util";
|
||||||
|
import Chat from "@/components/Chat.vue";
|
||||||
|
import { clearMessageCount } from "@/api/im";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const imStore = useImStore();
|
||||||
|
const dataList = ref<Array<any>>([]);
|
||||||
|
const chatShow = ref(false);
|
||||||
|
const acceptUid = ref("");
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
dataList.value = [];
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
_countMessage.chatCount = 0;
|
||||||
|
imStore.userList.forEach((item) => {
|
||||||
|
item.time = formateTime(item.timestamp);
|
||||||
|
_countMessage.chatCount += item.count;
|
||||||
|
dataList.value.push(item);
|
||||||
|
});
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
});
|
||||||
|
|
||||||
|
const toChat = (uid: string, index: number) => {
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
clearMessageCount(uid, 3).then(() => {
|
||||||
|
const chatCount = dataList.value[index].count;
|
||||||
|
_countMessage.chatCount -= chatCount;
|
||||||
|
dataList.value[index].count = 0;
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
acceptUid.value = uid;
|
||||||
|
chatShow.value = true;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = (uid: string) => {
|
||||||
|
const index = dataList.value.findIndex((item) => item.uid === uid);
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
clearMessageCount(uid, 3).then(() => {
|
||||||
|
const chatCount = dataList.value[index].count;
|
||||||
|
_countMessage.chatCount -= chatCount;
|
||||||
|
dataList.value[index].count = 0;
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
chatShow.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.message-container {
|
||||||
|
width: 40rem;
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.msg-count {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
212
src/pages/message/index.vue
Normal file
212
src/pages/message/index.vue
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div v-if="isLogin">
|
||||||
|
<div class style="height: 72px">
|
||||||
|
<div class="reds-sticky">
|
||||||
|
<div class="reds-tabs-list">
|
||||||
|
<el-badge :value="_countMessage.chatCount" :max="99" :hidden="_countMessage.chatCount == 0">
|
||||||
|
<div :class="type === 3 ? 'reds-tab-item active tab-item' : 'reds-tab-item tab-item'">
|
||||||
|
<div class="badge-container" @click="toPage(3)">
|
||||||
|
<span>我的消息</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="_countMessage.commentCount" :max="99" :hidden="_countMessage.commentCount == 0">
|
||||||
|
<div :class="type === 1 ? 'reds-tab-item active tab-item' : 'reds-tab-item tab-item'">
|
||||||
|
<div class="badge-container" @click="toPage(1)">
|
||||||
|
<span>评论和@</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge
|
||||||
|
:value="_countMessage.likeOrCollectionCount"
|
||||||
|
:max="99"
|
||||||
|
:hidden="_countMessage.likeOrCollectionCount == 0"
|
||||||
|
>
|
||||||
|
<div :class="type === 0 ? 'reds-tab-item active tab-item' : 'reds-tab-item tab-item'">
|
||||||
|
<div class="badge-container" @click="toPage(0)">
|
||||||
|
<span>赞和收藏</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="_countMessage.followCount" :max="99" :hidden="_countMessage.followCount == 0">
|
||||||
|
<div :class="type === 2 ? 'reds-tab-item active tab-item' : 'reds-tab-item tab-item'">
|
||||||
|
<div class="badge-container" @click="toPage(2)">
|
||||||
|
<span>新增关注</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-badge>
|
||||||
|
</div>
|
||||||
|
<div class="divider" style="margin: 16px 32px 0px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Message v-if="type == 3"></Message>
|
||||||
|
<Comment v-if="type == 1" @click-main="toMain"></Comment>
|
||||||
|
<LikeCollection v-if="type == 0" @click-main="toMain"></LikeCollection>
|
||||||
|
<Follower v-if="type == 2"></Follower>
|
||||||
|
<!-- <router-view /> -->
|
||||||
|
|
||||||
|
<Main
|
||||||
|
v-show="mainShow"
|
||||||
|
:nid="nid"
|
||||||
|
:nowTime="new Date()"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-main="close"
|
||||||
|
></Main>
|
||||||
|
|
||||||
|
<el-backtop :bottom="80" :right="24">
|
||||||
|
<div class="back-top">
|
||||||
|
<Top style="width: 1.2em; height: 1.2em" color="rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</el-backtop>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty description="用户未登录" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Top } from "@element-plus/icons-vue";
|
||||||
|
import { ref, watchEffect } from "vue";
|
||||||
|
import Message from "@/pages/message/children/message.vue";
|
||||||
|
import LikeCollection from "@/pages/message/children/like-collection.vue";
|
||||||
|
import Follower from "@/pages/message/children/follower.vue";
|
||||||
|
import Comment from "@/pages/message/children/comment.vue";
|
||||||
|
import Main from "@/pages/main/main.vue";
|
||||||
|
import { useImStore } from "@/store/imStore";
|
||||||
|
import { clearMessageCount } from "@/api/im";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
const imStore = useImStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const type = ref(3);
|
||||||
|
const nid = ref("");
|
||||||
|
const currentUid = ref("");
|
||||||
|
const mainShow = ref(false);
|
||||||
|
const _countMessage = ref({
|
||||||
|
chatCount: 0,
|
||||||
|
likeOrCollectionCount: 0,
|
||||||
|
commentCount: 0,
|
||||||
|
followCount: 0,
|
||||||
|
});
|
||||||
|
const isLogin = ref(false);
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
_countMessage.value = imStore.countMessage;
|
||||||
|
});
|
||||||
|
|
||||||
|
const toPage = (val: number) => {
|
||||||
|
const _countMessage = imStore.countMessage;
|
||||||
|
clearMessageCount(currentUid.value, val).then(() => {
|
||||||
|
switch (val) {
|
||||||
|
case 0:
|
||||||
|
_countMessage.likeOrCollectionCount = 0;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
_countMessage.commentCount = 0;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
_countMessage.followCount = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
imStore.setCountMessage(_countMessage);
|
||||||
|
type.value = val;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
mainShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toMain = (val: string) => {
|
||||||
|
nid.value = val;
|
||||||
|
mainShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
isLogin.value = userStore.isLogin();
|
||||||
|
if (isLogin.value) {
|
||||||
|
currentUid.value = userStore.getUserInfo().id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 24px;
|
||||||
|
padding-top: 72px;
|
||||||
|
width: 67%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.reds-sticky {
|
||||||
|
top: 72px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
width: 40rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 72px;
|
||||||
|
padding-top: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.reds-tabs-list {
|
||||||
|
justify-content: flex-start;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0 32px;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-tab-item {
|
||||||
|
padding: 0px 16px;
|
||||||
|
margin-right: 0px;
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.2, 0, 0.25, 1);
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.badge-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 4px 8px;
|
||||||
|
list-style: none;
|
||||||
|
height: 0;
|
||||||
|
border: solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-width: 1px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
607
src/pages/push/index.vue
Normal file
607
src/pages/push/index.vue
Normal file
@@ -0,0 +1,607 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container" id="container">
|
||||||
|
<div v-if="isLogin" class="push-container">
|
||||||
|
<div class="header"><span class="header-icon"></span><span class="header-title">发布图文</span></div>
|
||||||
|
<div class="img-list">
|
||||||
|
<el-upload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
action="http://localhost:88/api/util/oss/saveBatch/0"
|
||||||
|
list-type="picture-card"
|
||||||
|
multiple
|
||||||
|
:limit="9"
|
||||||
|
:headers="uploadHeader"
|
||||||
|
:auto-upload="false"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible">
|
||||||
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
<el-divider style="margin: 0.75rem; width: 96%" />
|
||||||
|
<div class="push-content">
|
||||||
|
<el-input
|
||||||
|
v-model="note.title"
|
||||||
|
maxlength="20"
|
||||||
|
show-word-limit
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入标题"
|
||||||
|
class="input-title"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-model="note.content"
|
||||||
|
maxlength="250"
|
||||||
|
show-word-limit
|
||||||
|
:autosize="{ minRows: 4, maxRows: 5 }"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="填写更全面的描述信息，让更多的人看到你吧❤️"
|
||||||
|
/>
|
||||||
|
<div class="tag-list">
|
||||||
|
<el-tag
|
||||||
|
v-for="tag in dynamicTags"
|
||||||
|
:key="tag"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(tag)"
|
||||||
|
class="tag-item"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
v-if="inputVisible"
|
||||||
|
ref="InputRef"
|
||||||
|
v-model="inputValue"
|
||||||
|
style="width: 3.125rem"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter="handleInputConfirm"
|
||||||
|
@blur="handleInputBlur"
|
||||||
|
/>
|
||||||
|
<el-button v-else type="warning" size="small" @click="showInput" plain id="tagContainer"> + 标签 </el-button>
|
||||||
|
</div>
|
||||||
|
<!-- <div
|
||||||
|
v-infinite-scroll="loadMoreData"
|
||||||
|
class="scroll-tag-container"
|
||||||
|
v-show="showTagState"
|
||||||
|
:infinite-scroll-distance="50"
|
||||||
|
>
|
||||||
|
<p v-for="(item, index) in selectTagList" :key="index" class="scrollbar-tag-item" @click="selectTag(item)">
|
||||||
|
{{ item.title }}
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
<div class="hot-tag">
|
||||||
|
<span class="tag-title-text">推荐标签：</span>
|
||||||
|
<el-tag v-for="tag in hotTags" :key="tag" class="hot-tag-item" type="danger" @click="selectHotTag(tag)">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-divider style="margin: 0.75rem; width: 96%" />
|
||||||
|
<div class="categorys">
|
||||||
|
<el-cascader
|
||||||
|
ref="CascaderRef"
|
||||||
|
v-model="categoryList"
|
||||||
|
:options="options"
|
||||||
|
@change="handleChange"
|
||||||
|
:props="props"
|
||||||
|
placeholder="请选择分类"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="btns">
|
||||||
|
<button class="css-fm44j css-osq2ks dyn">
|
||||||
|
<span class="btn-content" @click="addTag"># 话题</span></button
|
||||||
|
><button class="css-fm44j css-osq2ks dyn">
|
||||||
|
<span class="btn-content"><span>@</span> 用户</span></button
|
||||||
|
><button class="css-fm44j css-osq2ks dyn">
|
||||||
|
<span class="btn-content">
|
||||||
|
<div class="smile"></div>
|
||||||
|
表情
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="submit">
|
||||||
|
<el-button type="danger" loading :disabled="true" v-if="pushLoading">发布</el-button>
|
||||||
|
<button class="publishBtn" @click="pubslish()" v-else>
|
||||||
|
<span class="btn-content">发布</span>
|
||||||
|
</button>
|
||||||
|
<button class="clearBtn">
|
||||||
|
<span class="btn-content" @click="resetData">取消</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty description="用户未登录" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, watch, nextTick, onMounted } from "vue";
|
||||||
|
import { Plus } from "@element-plus/icons-vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import type { UploadUserFile, CascaderProps, ElInput } from "element-plus";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import { getCategoryTreeData } from "@/api/category";
|
||||||
|
import { saveNoteByDTO, getNoteById, updateNoteByDTO } from "@/api/note";
|
||||||
|
import { getTagByKeyword } from "@/api/tag";
|
||||||
|
import { getFileFromUrl } from "@/utils/util";
|
||||||
|
// import Schema from "async-validator";
|
||||||
|
// import Crop from "@/components/Crop.vue";
|
||||||
|
const props: CascaderProps = {
|
||||||
|
label: "title",
|
||||||
|
value: "id",
|
||||||
|
checkStrictly: true, // 允许选择父级节点
|
||||||
|
};
|
||||||
|
const CascaderRef = ref<any>(null);
|
||||||
|
|
||||||
|
// const rules = {
|
||||||
|
// title: { required: true, message: "标题不能为空" },
|
||||||
|
// content: { required: true, message: "内容不能为空" },
|
||||||
|
// category: { required: true, message: "分类不能为空" },
|
||||||
|
// };
|
||||||
|
// const validator = new Schema(rules);
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const fileList = ref<UploadUserFile[]>([]);
|
||||||
|
|
||||||
|
const dialogImageUrl = ref("");
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const uploadHeader = ref({
|
||||||
|
accessToken: userStore.getToken(),
|
||||||
|
});
|
||||||
|
const categoryList = ref<Array<any>>([]);
|
||||||
|
const options = ref([]);
|
||||||
|
const note = ref<any>({});
|
||||||
|
const showTagState = ref(false);
|
||||||
|
const selectTagList = ref<Array<any>>([]);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 10;
|
||||||
|
const tagTotal = ref(0);
|
||||||
|
const pushLoading = ref(false);
|
||||||
|
const isLogin = ref(false);
|
||||||
|
const inputValue = ref("");
|
||||||
|
const dynamicTags = ref<Array<string>>([]);
|
||||||
|
const inputVisible = ref(false);
|
||||||
|
const InputRef = ref<InstanceType<typeof ElInput>>();
|
||||||
|
const hotTags = ref<Array<string>>([]);
|
||||||
|
|
||||||
|
const handleClose = (tag: string) => {
|
||||||
|
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputBlur = () => {
|
||||||
|
inputVisible.value = false;
|
||||||
|
// showTagState.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const showInput = () => {
|
||||||
|
inputVisible.value = true;
|
||||||
|
nextTick(() => {
|
||||||
|
InputRef.value!.input!.focus();
|
||||||
|
addTag();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputConfirm = () => {
|
||||||
|
if (inputValue.value) {
|
||||||
|
dynamicTags.value.push(inputValue.value);
|
||||||
|
}
|
||||||
|
inputVisible.value = false;
|
||||||
|
inputValue.value = "";
|
||||||
|
showTagState.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => inputValue.value,
|
||||||
|
() => {
|
||||||
|
addTag();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听外部点击
|
||||||
|
onMounted(() => {
|
||||||
|
if (!isLogin.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.getElementById("container")!.addEventListener("click", function (e) {
|
||||||
|
var event = e || window.event;
|
||||||
|
var target = event.target || (event.srcElement as any);
|
||||||
|
// if(target.id == "name") {
|
||||||
|
const tagContainer = document.getElementById("tagContainer");
|
||||||
|
if (tagContainer == null) return;
|
||||||
|
|
||||||
|
if (tagContainer.contains(target)) {
|
||||||
|
console.log("in");
|
||||||
|
} else {
|
||||||
|
showTagState.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const addTag = () => {
|
||||||
|
selectTagList.value = [];
|
||||||
|
currentPage.value = 1;
|
||||||
|
setData();
|
||||||
|
showTagState.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setData = () => {
|
||||||
|
getTagByKeyword(currentPage.value, pageSize, inputValue.value).then((res) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
selectTagList.value.push(...records);
|
||||||
|
tagTotal.value = total;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// const selectTag = (val: any) => {
|
||||||
|
// dynamicTags.value.push(val.title);
|
||||||
|
// showTagState.value = false;
|
||||||
|
// inputVisible.value = false;
|
||||||
|
// inputValue.value = "";
|
||||||
|
// };
|
||||||
|
|
||||||
|
const selectHotTag = (val: string) => {
|
||||||
|
dynamicTags.value.push(val);
|
||||||
|
};
|
||||||
|
|
||||||
|
// const loadMoreData = () => {
|
||||||
|
// currentPage.value += 1;
|
||||||
|
// setData();
|
||||||
|
// };
|
||||||
|
|
||||||
|
const handleChange = (ids: Array<any>) => {
|
||||||
|
categoryList.value = ids;
|
||||||
|
// 选中后关闭下拉框
|
||||||
|
CascaderRef.value.togglePopperVisible();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHotTag = () => {
|
||||||
|
getTagByKeyword(1, pageSize, "").then((res) => {
|
||||||
|
const { records } = res.data;
|
||||||
|
records.forEach((item: any) => {
|
||||||
|
hotTags.value.push(item.title);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteByIdMethod = (noteId: string) => {
|
||||||
|
getNoteById(noteId).then((res) => {
|
||||||
|
const { data } = res;
|
||||||
|
note.value = data;
|
||||||
|
const urls = JSON.parse(data.urls);
|
||||||
|
urls.forEach((item: string) => {
|
||||||
|
const fileName = item.substring(item.lastIndexOf("/") + 1);
|
||||||
|
|
||||||
|
getFileFromUrl(item, fileName).then((res: any) => {
|
||||||
|
fileList.value.push({ name: fileName, url: item, raw: res });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
categoryList.value.push(data.cpid);
|
||||||
|
categoryList.value.push(data.cid);
|
||||||
|
|
||||||
|
data.tagList.forEach((item: any) => {
|
||||||
|
dynamicTags.value.push(item.title);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上传图片功能
|
||||||
|
const pubslish = () => {
|
||||||
|
//验证
|
||||||
|
if (fileList.value.length <= 0 || note.value.title === null || categoryList.value.length <= 0) {
|
||||||
|
ElMessage.error("请选择图片，标签，分类～");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pushLoading.value = true;
|
||||||
|
let params = new FormData();
|
||||||
|
//注意此处对文件数组进行了参数循环添加
|
||||||
|
|
||||||
|
fileList.value.forEach((file: any) => {
|
||||||
|
params.append("uploadFiles", file.raw);
|
||||||
|
});
|
||||||
|
|
||||||
|
note.value.count = fileList.value.length;
|
||||||
|
note.value.type = 1;
|
||||||
|
// note.value.content = document.getElementById("post-textarea")!.innerHTML.replace(/<[^>]*>[^<]*(<[^>]*>)?/gi, "");
|
||||||
|
note.value.cpid = categoryList.value[0];
|
||||||
|
note.value.cid = categoryList.value[1];
|
||||||
|
note.value.tagList = dynamicTags.value;
|
||||||
|
const coverImage = new Image();
|
||||||
|
coverImage.src = fileList.value[0].url!;
|
||||||
|
coverImage.onload = () => {
|
||||||
|
const size = coverImage.width / coverImage.height;
|
||||||
|
note.value.noteCoverHeight = size >= 1.3 ? 200 : 300;
|
||||||
|
const noteData = JSON.stringify(note.value);
|
||||||
|
params.append("noteData", noteData);
|
||||||
|
if (note.value.id !== null && note.value.id !== undefined) {
|
||||||
|
updateNote(params);
|
||||||
|
} else {
|
||||||
|
saveNote(params);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateNote = (params: FormData) => {
|
||||||
|
updateNoteByDTO(params)
|
||||||
|
.then(() => {
|
||||||
|
resetData();
|
||||||
|
ElMessage.success("修改成功");
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage.error("修改失败");
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
pushLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveNote = (params: FormData) => {
|
||||||
|
saveNoteByDTO(params)
|
||||||
|
.then(() => {
|
||||||
|
resetData();
|
||||||
|
ElMessage.success("发布成功,请等待审核结果");
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage.error("发布失败");
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
pushLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetData = () => {
|
||||||
|
note.value = {};
|
||||||
|
categoryList.value = [];
|
||||||
|
fileList.value = [];
|
||||||
|
pushLoading.value = false;
|
||||||
|
dynamicTags.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
isLogin.value = userStore.isLogin();
|
||||||
|
if (isLogin.value) {
|
||||||
|
const noteId = route.query.noteId as string;
|
||||||
|
if (noteId !== "" && noteId !== undefined) {
|
||||||
|
getNoteByIdMethod(noteId);
|
||||||
|
}
|
||||||
|
getCategoryTreeData().then((res) => {
|
||||||
|
options.value = res.data;
|
||||||
|
});
|
||||||
|
getHotTag();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:deep(.el-upload-list--picture-card .el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item.is-success .el-upload-list__item-status-label) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 72px;
|
||||||
|
|
||||||
|
.push-container {
|
||||||
|
margin-left: 11vw;
|
||||||
|
margin-top: 1vw;
|
||||||
|
width: 720px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: var(--el-box-shadow-lighter);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 15px 20px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
.header-icon {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 6px;
|
||||||
|
height: 16px;
|
||||||
|
background: #3a64ff;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-list {
|
||||||
|
width: 650px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 6px 6px 6px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-content {
|
||||||
|
padding: 6px 12px 6px 12px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.hot-tag {
|
||||||
|
.tag-title-text {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #484848;
|
||||||
|
margin: 0.125rem 0;
|
||||||
|
}
|
||||||
|
.hot-tag-item {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0.3125rem 0.3125rem 0 0.3125rem;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
transform: scale(1.2); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-list {
|
||||||
|
margin: 0.825rem 0;
|
||||||
|
.tag-item {
|
||||||
|
margin-right: 0.3125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-tag-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 98%;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 99999;
|
||||||
|
border: 1px solid #f4f4f4;
|
||||||
|
height: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.scrollbar-tag-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding-left: 2px;
|
||||||
|
color: #484848;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-tag-item:hover {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-content {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content:empty::before {
|
||||||
|
content: attr(placeholder);
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
cursor: text;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 90px;
|
||||||
|
max-height: 300px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 12px 22px;
|
||||||
|
outline: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content:focus,
|
||||||
|
.post-content:hover {
|
||||||
|
border: 1px solid #3a64ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
padding: 0 12px 10px 12px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 62px;
|
||||||
|
width: 62px;
|
||||||
|
margin: 0 6px 0 0;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.css-fm44j {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
appearance: none;
|
||||||
|
font-family:
|
||||||
|
RedNum,
|
||||||
|
RedZh,
|
||||||
|
RedEn,
|
||||||
|
-apple-system;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid rgb(217, 217, 217);
|
||||||
|
outline: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: white;
|
||||||
|
color: rgb(38, 38, 38);
|
||||||
|
height: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.categorys {
|
||||||
|
padding: 0 12px 10px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
padding: 10px 12px 10px 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 250px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transition:
|
||||||
|
background-color 0.3s,
|
||||||
|
color 0.3s; /* 添加过渡效果 */
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
transform: scale(1.05); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.publishBtn {
|
||||||
|
background-color: #ff2442;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearBtn {
|
||||||
|
border-radius: 24px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border: 1px solid rgb(217, 217, 217);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
781
src/pages/search/index.vue
Executable file
781
src/pages/search/index.vue
Executable file
@@ -0,0 +1,781 @@
|
|||||||
|
<template>
|
||||||
|
<div class="feeds-page">
|
||||||
|
<div class="middle">
|
||||||
|
<div id="search-type">
|
||||||
|
<div data-v-7f9e6aac="" class="scroll-container channel-scroll-container">
|
||||||
|
<div class="content-container">
|
||||||
|
<div :class="typeClass == 0 ? 'channel active' : 'channel'" @click="getNoteByType(0)">全部</div>
|
||||||
|
<div :class="typeClass == 1 ? 'channel active' : 'channel'" @click="getNoteByType(1)">最热</div>
|
||||||
|
<div :class="typeClass == 2 ? 'channel active' : 'channel'" @click="getNoteByType(2)">最新</div>
|
||||||
|
<div style="line-height: 40px">|</div>
|
||||||
|
<div :class="typeClass == 3 ? 'channel active' : 'channel'" @click="getUserData">用户</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-box">
|
||||||
|
<div>
|
||||||
|
<div class="filter">
|
||||||
|
<!-- <span>综合</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="divider rec-filter"></div>
|
||||||
|
<div class="note-container" v-if="!isShowUser">
|
||||||
|
<div class="channel-container">
|
||||||
|
<div class="scroll-container channel-scroll-container">
|
||||||
|
<div class="content-container">
|
||||||
|
<div :class="categoryClass == '0' ? 'channel active' : 'channel'" @click="getNoteList">推荐</div>
|
||||||
|
<div
|
||||||
|
:class="categoryClass == item.id ? 'channel active' : 'channel'"
|
||||||
|
v-for="item in categoryList"
|
||||||
|
:key="item.id"
|
||||||
|
@click="getNoteListByCategory(item.id)"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loading-container"></div>
|
||||||
|
<div
|
||||||
|
class="feeds-container"
|
||||||
|
v-infinite-scroll="loadMoreData"
|
||||||
|
:infinite-scroll-distance="50"
|
||||||
|
:infinite-scroll-disabled="mainShow || loadingMore"
|
||||||
|
>
|
||||||
|
<div class="feeds-loading-top animate__animated animate__zoomIn animate__delay-0.5s" v-show="topLoading">
|
||||||
|
<Loading style="width: 1.2em; height: 1.2em"></Loading>
|
||||||
|
</div>
|
||||||
|
<Waterfall
|
||||||
|
:list="noteList"
|
||||||
|
:width="options.width"
|
||||||
|
:gutter="options.gutter"
|
||||||
|
:hasAroundGutter="options.hasAroundGutter"
|
||||||
|
:animation-effect="options.animationEffect"
|
||||||
|
:animation-duration="options.animationDuration"
|
||||||
|
:animation-delay="options.animationDelay"
|
||||||
|
:breakpoints="options.breakpoints"
|
||||||
|
style="min-width: 46.25rem"
|
||||||
|
>
|
||||||
|
<template #item="{ item }">
|
||||||
|
<el-skeleton style="width: 15rem" :loading="!item.isLoading" animated>
|
||||||
|
<template #template>
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '15rem',
|
||||||
|
maxHeight: '18.75rem',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '.5rem',
|
||||||
|
}"
|
||||||
|
@load="handleLoad(item)"
|
||||||
|
></el-image>
|
||||||
|
<div style="padding: 0.875rem">
|
||||||
|
<el-skeleton-item variant="h3" style="width: 100%" />
|
||||||
|
<div style="display: flex; align-items: center; margin-top: 0.125rem; height: 1rem">
|
||||||
|
<el-skeleton style="--el-skeleton-circle-size: 1.25rem">
|
||||||
|
<template #template>
|
||||||
|
<el-skeleton-item variant="circle" />
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
<el-skeleton-item variant="text" style="margin-left: 0.625rem" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #default>
|
||||||
|
<div class="card" style="max-width: 15rem">
|
||||||
|
<el-image
|
||||||
|
:src="item.noteCover"
|
||||||
|
:style="{
|
||||||
|
width: '15rem',
|
||||||
|
maxHeight: '18.75rem',
|
||||||
|
height: item.noteCoverHeight + 'px',
|
||||||
|
borderRadius: '.5rem',
|
||||||
|
}"
|
||||||
|
fit="cover"
|
||||||
|
@click="toMain(item.id)"
|
||||||
|
></el-image>
|
||||||
|
<div class="footer">
|
||||||
|
<a class="title">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</a>
|
||||||
|
<div class="author-wrapper">
|
||||||
|
<a class="author">
|
||||||
|
<img class="author-avatar" :src="item.avatar" />
|
||||||
|
<span class="name">{{ item.username }}</span>
|
||||||
|
</a>
|
||||||
|
<span class="like-wrapper like-active">
|
||||||
|
<i class="iconfont icon-follow" style="width: 1em; height: 1em"></i>
|
||||||
|
<span class="count">{{ item.likeCount }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
</template>
|
||||||
|
</Waterfall>
|
||||||
|
|
||||||
|
<div class="feeds-loading">
|
||||||
|
<Loading style="width: 1.2em; height: 1.2em" v-show="botLoading"></Loading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="user-container" v-else>
|
||||||
|
<ul class="agree-container" v-infinite-scroll="loadMoreUser" :infinite-scroll-distance="20">
|
||||||
|
<li class="agree-item" v-for="(item, index) in userDataList" :key="index">
|
||||||
|
<a class="user-avatar">
|
||||||
|
<img class="avatar-item" :src="item.avatar" @click="toUser(item.id)" />
|
||||||
|
</a>
|
||||||
|
<div class="main">
|
||||||
|
<div class="info">
|
||||||
|
<div class="user-info">
|
||||||
|
<a class>{{ item.username }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="interaction-hint">
|
||||||
|
<span>粉丝:</span><span>{{ item.fanCount }}</span
|
||||||
|
> | <span>关注: </span><span>{{ item.followerCount }}</span
|
||||||
|
> | <span>作品: </span><span>{{ item.trendCount }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra">
|
||||||
|
<el-button type="info" round size="large" v-if="item.isFollow" @click="follow(item.uid, index, 1)"
|
||||||
|
>已关注</el-button
|
||||||
|
>
|
||||||
|
<el-button type="danger" round size="large" v-else @click="follow(item.uid, index, -1)">回关</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FloatingBtn @click-refresh="refresh"></FloatingBtn>
|
||||||
|
<Main
|
||||||
|
v-show="mainShow"
|
||||||
|
:nid="nid"
|
||||||
|
:nowTime="new Date()"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-main="close"
|
||||||
|
>
|
||||||
|
</Main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Waterfall } from "vue-waterfall-plugin-next";
|
||||||
|
import "vue-waterfall-plugin-next/dist/style.css";
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { getNoteByDTO, getCategoryAgg } from "@/api/search";
|
||||||
|
import type { NoteDTO, NoteSearch } from "@/type/note";
|
||||||
|
import type { Category } from "@/type/category";
|
||||||
|
import Main from "@/pages/main/main.vue";
|
||||||
|
import FloatingBtn from "@/components/FloatingBtn.vue";
|
||||||
|
import { options } from "@/constant/constant";
|
||||||
|
import Loading from "@/components/Loading.vue";
|
||||||
|
import { refreshTab } from "@/utils/util";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { getUserByKeyword } from "@/api/user";
|
||||||
|
import { followById } from "@/api/follower";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const topLoading = ref(false);
|
||||||
|
const botLoading = ref(false);
|
||||||
|
const noteList = ref<Array<NoteSearch>>([]);
|
||||||
|
const categoryList = ref<Array<Category>>([]);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = 20;
|
||||||
|
const noteTotal = ref(0);
|
||||||
|
const currentUserPage = ref(1);
|
||||||
|
const userPageSize = 15;
|
||||||
|
const categoryClass = ref("0");
|
||||||
|
const typeClass = ref(0);
|
||||||
|
const mainShow = ref(false);
|
||||||
|
const nid = ref("");
|
||||||
|
const noteDTO = ref<NoteDTO>({
|
||||||
|
keyword: "",
|
||||||
|
type: 0,
|
||||||
|
cid: "",
|
||||||
|
cpid: "",
|
||||||
|
});
|
||||||
|
const loadingMore = ref(false);
|
||||||
|
const isShowUser = ref(false);
|
||||||
|
const userDataList = ref<Array<any>>([]);
|
||||||
|
const userTotal = ref(0);
|
||||||
|
|
||||||
|
const getUserData = () => {
|
||||||
|
typeClass.value = 3;
|
||||||
|
isShowUser.value = true;
|
||||||
|
currentUserPage.value = 1;
|
||||||
|
userDataList.value = [];
|
||||||
|
getUserByKeyword(currentUserPage.value, userPageSize, noteDTO.value.keyword).then((res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
userDataList.value.push(...records);
|
||||||
|
userTotal.value = total;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const follow = (fid: string, index: number, type: number) => {
|
||||||
|
followById(fid).then(() => {
|
||||||
|
userDataList.value[index].isFollow = type == -1;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreUser = () => {
|
||||||
|
botLoading.value = true;
|
||||||
|
loadingMore.value = true;
|
||||||
|
currentUserPage.value += 1;
|
||||||
|
new Promise((resolve) => {
|
||||||
|
getUserByKeyword(currentUserPage.value, userPageSize, noteDTO.value.keyword).then((res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
userDataList.value.push(...records);
|
||||||
|
userTotal.value = total;
|
||||||
|
resolve(false);
|
||||||
|
});
|
||||||
|
}).then((data) => {
|
||||||
|
loadingMore.value = data as boolean;
|
||||||
|
setTimeout(() => {
|
||||||
|
botLoading.value = false;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [route.query.keyword],
|
||||||
|
(newVal) => {
|
||||||
|
noteDTO.value.keyword = newVal[0] as string;
|
||||||
|
noteDTO.value.cid = "";
|
||||||
|
noteDTO.value.type = 0;
|
||||||
|
categoryClass.value = "0";
|
||||||
|
isShowUser.value = false;
|
||||||
|
typeClass.value = 0;
|
||||||
|
getNoteListByKeyword();
|
||||||
|
getCategoryData();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const getNoteByType = (type: number) => {
|
||||||
|
isShowUser.value = false;
|
||||||
|
noteDTO.value.type = type;
|
||||||
|
typeClass.value = type;
|
||||||
|
getNoteListByKeyword();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toMain = (noteId: string) => {
|
||||||
|
// router.push({ name: "main", state: { nid: nid } });
|
||||||
|
nid.value = noteId;
|
||||||
|
mainShow.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
mainShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoad = (item: any) => {
|
||||||
|
item.isLoading = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUser = (uid: string) => {
|
||||||
|
router.push({ name: "user", query: { uid: uid } });
|
||||||
|
};
|
||||||
|
|
||||||
|
const refresh = () => {
|
||||||
|
// 使用回调函数优化代码
|
||||||
|
refreshTab(() => {
|
||||||
|
topLoading.value = true;
|
||||||
|
isShowUser.value = false;
|
||||||
|
typeClass.value = 0;
|
||||||
|
currentPage.value = 1;
|
||||||
|
currentUserPage.value = 1;
|
||||||
|
noteList.value = [];
|
||||||
|
userDataList.value = [];
|
||||||
|
setTimeout(() => {
|
||||||
|
getNoteList();
|
||||||
|
topLoading.value = false;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreData = () => {
|
||||||
|
botLoading.value = true;
|
||||||
|
loadingMore.value = true;
|
||||||
|
currentPage.value += 1;
|
||||||
|
new Promise((resolve) => {
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
resolve(false);
|
||||||
|
});
|
||||||
|
}).then((data) => {
|
||||||
|
loadingMore.value = data as boolean;
|
||||||
|
setTimeout(() => {
|
||||||
|
botLoading.value = false;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const setData = (res: any) => {
|
||||||
|
const { records, total } = res.data;
|
||||||
|
noteTotal.value = total;
|
||||||
|
noteList.value.push(...records);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteList = () => {
|
||||||
|
noteDTO.value.type = 0;
|
||||||
|
noteDTO.value.cid = "";
|
||||||
|
categoryClass.value = "0";
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteListByCategory = (id: string) => {
|
||||||
|
categoryClass.value = id;
|
||||||
|
noteDTO.value.cid = id;
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNoteListByKeyword = () => {
|
||||||
|
noteList.value = [] as Array<any>;
|
||||||
|
currentPage.value = 1;
|
||||||
|
getNoteByDTO(currentPage.value, pageSize, noteDTO.value).then((res) => {
|
||||||
|
setData(res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryData = () => {
|
||||||
|
getCategoryAgg(noteDTO.value).then((res: any) => {
|
||||||
|
categoryList.value = res.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
const keyword = route.query.keyword as string;
|
||||||
|
if (keyword.trim().length > 0) {
|
||||||
|
noteDTO.value.keyword = keyword as string;
|
||||||
|
noteDTO.value.cid = "";
|
||||||
|
categoryClass.value = "0";
|
||||||
|
getNoteListByKeyword();
|
||||||
|
getCategoryData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.feeds-page {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
padding-top: 4.5rem;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.channel-scroll-container {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
height: 2.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 4.5rem;
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
height: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active,
|
||||||
|
.channel:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 62.4375rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
height: 2.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 120%;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider.rec-filter {
|
||||||
|
height: 0.0625rem;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
|
||||||
|
.channel-scroll-container {
|
||||||
|
backdrop-filter: blur(1.25rem);
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100vw - 1.5rem);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
height: 2.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 4.5rem;
|
||||||
|
|
||||||
|
.content-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
background: rgba(226, 86, 105, 0.06);
|
||||||
|
color: #ff2442;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel {
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
//background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeds-container {
|
||||||
|
position: relative;
|
||||||
|
transition: width 0.5s;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.feeds-loading {
|
||||||
|
margin: 3vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeds-loading-top {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 6vh;
|
||||||
|
height: 6vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteImg {
|
||||||
|
width: 15rem;
|
||||||
|
max-height: 18.75rem;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 0.75rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 1.25rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
transition: color 1s;
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
|
||||||
|
.author-avatar {
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-wrapper {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 0.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-btn-sets {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 2.5rem;
|
||||||
|
grid-gap: 0.5rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
bottom: 1.5rem;
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background: #fff;
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 6.25rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reload {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background: #fff;
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow:
|
||||||
|
0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1),
|
||||||
|
0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 6.25rem;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//transition: background 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.agree-container {
|
||||||
|
.agree-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.avatar-item {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-hint {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-content {
|
||||||
|
display: flex;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #333;
|
||||||
|
line-height: 140%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
|
||||||
|
.msg-count {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #fff;
|
||||||
|
background-color: red;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-info::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 1.0625rem;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra {
|
||||||
|
min-width: 3rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
|
||||||
|
.follow-button {
|
||||||
|
width: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new.large {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new.primary {
|
||||||
|
background-color: #ff2e4d;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-button-new {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 6.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
145
src/pages/to-up/index.vue
Executable file
145
src/pages/to-up/index.vue
Executable file
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="note-detail-mask"
|
||||||
|
style="transition: background-color 0.4s ease 0s;
|
||||||
|
hsla(0,0%,100%,0.98)"
|
||||||
|
>
|
||||||
|
<div class="note-container">
|
||||||
|
<div class="bug-info">
|
||||||
|
<el-input v-model="emailVal" placeholder="请输入邮箱" style="margin-bottom: 0.625rem" />
|
||||||
|
<el-input
|
||||||
|
v-model="content"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="有什么想对博主说"
|
||||||
|
:autosize="{ minRows: 5, maxRows: 8 }"
|
||||||
|
style="margin-bottom: 1.25rem"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" @click="submit" style="width: 6.25rem"> 发送 </el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="close-cricle" @click="close">
|
||||||
|
<div class="close close-mask-white">
|
||||||
|
<Close style="width: 1.2em; height: 1.2em; color: rgba(51, 51, 51, 0.8)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="back-desk"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { Close } from "@element-plus/icons-vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { toUp } from "@/api/util";
|
||||||
|
|
||||||
|
const emailVal = ref("");
|
||||||
|
const content = ref("");
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickToUp"]);
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit("clickToUp");
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
const reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
|
||||||
|
if (!reg.test(emailVal.value)) {
|
||||||
|
ElMessage.warning("请输入正确的邮箱");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (content.value === "") {
|
||||||
|
ElMessage.warning("请输入内容");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dto = {} as any;
|
||||||
|
dto.email = emailVal.value;
|
||||||
|
dto.content = content.value;
|
||||||
|
toUp(dto).then(() => {
|
||||||
|
content.value = "";
|
||||||
|
ElMessage.success("发送成功");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.note-detail-mask {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 20;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.back-desk {
|
||||||
|
position: fixed;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
opacity: 0.5;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-cricle {
|
||||||
|
left: 40vw;
|
||||||
|
top: 1.3vw;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
z-index: 100;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.close-mask-white {
|
||||||
|
box-shadow:
|
||||||
|
0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-container {
|
||||||
|
margin-left: 38vw;
|
||||||
|
width: 20%;
|
||||||
|
height: 50%;
|
||||||
|
transition:
|
||||||
|
transform 0.4s ease 0s,
|
||||||
|
width 0.4s ease 0s;
|
||||||
|
transform: translate(6.5rem, 2rem) scale(1);
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
box-shadow:
|
||||||
|
0 0.5rem 4rem 0 rgba(0, 0, 0, 0.04),
|
||||||
|
0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
background: #f8f8f8;
|
||||||
|
transform-origin: left top;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.bug-info {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
557
src/pages/user/index.vue
Executable file
557
src/pages/user/index.vue
Executable file
@@ -0,0 +1,557 @@
|
|||||||
|
<template>
|
||||||
|
<div class="user-page">
|
||||||
|
<div class="user">
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="avatar">
|
||||||
|
<div class="avatar-wrapper">
|
||||||
|
<img :src="userInfo.avatar" class="user-image" style="border: 0.0625rem solid rgba(0, 0, 0, 0.08)" />
|
||||||
|
<div class="img-edit">
|
||||||
|
<el-upload
|
||||||
|
v-show="uid === currentUid"
|
||||||
|
class="upload-demo"
|
||||||
|
:action="fileAction"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess"
|
||||||
|
:headers="uploadHeader"
|
||||||
|
>
|
||||||
|
<button class="btn-avatr">更换</button>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-part">
|
||||||
|
<div class="info">
|
||||||
|
<div class="basic-info">
|
||||||
|
<div class="user-basic">
|
||||||
|
<div class="user-nickname">
|
||||||
|
<div class="user-name" v-if="uid === currentUid">
|
||||||
|
<span v-if="!_isEditInfo"> {{ userInfo.username }}</span>
|
||||||
|
<el-input
|
||||||
|
v-else
|
||||||
|
v-model="userInfo.username"
|
||||||
|
style="width: 15rem"
|
||||||
|
maxlength="10"
|
||||||
|
placeholder="Please input"
|
||||||
|
show-word-limit
|
||||||
|
@keyup.enter="confirmUserInfo"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
:icon="Edit"
|
||||||
|
v-show="!_isEditInfo"
|
||||||
|
@click="_isEditInfo = true"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
style="margin-left: 0.3125rem"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="user-name" v-else>
|
||||||
|
{{ userInfo.username }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-content">
|
||||||
|
<span class="user-redId">小红书号：{{ userInfo.hsId }}</span
|
||||||
|
><span class="user-IP"> IP属地：{{ userInfo.address }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-desc">
|
||||||
|
<div v-if="!_isEditInfo">
|
||||||
|
<span v-if="userInfo.description === null">这个人什么都没有写～</span>
|
||||||
|
<span v-else>{{ userInfo.description }}</span>
|
||||||
|
</div>
|
||||||
|
<el-input
|
||||||
|
v-else
|
||||||
|
v-model="userInfo.description"
|
||||||
|
maxlength="250"
|
||||||
|
placeholder="Please input"
|
||||||
|
@keyup.enter="confirmUserInfo"
|
||||||
|
show-word-limit
|
||||||
|
:autosize="true"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="user-tags">
|
||||||
|
<el-tag
|
||||||
|
style="margin-left: 0.3125rem"
|
||||||
|
v-for="tag in tagList"
|
||||||
|
:key="tag"
|
||||||
|
:closable="uid === currentUid"
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(tag)"
|
||||||
|
effect="light"
|
||||||
|
type="info"
|
||||||
|
round
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
v-if="inputVisible"
|
||||||
|
ref="InputRef"
|
||||||
|
v-model="inputTagValue"
|
||||||
|
style="width: 3.125rem; margin-left: 0.3125rem"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter="handleInputConfirm"
|
||||||
|
@blur="handleInputConfirm"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
style="margin-left: 0.3125rem"
|
||||||
|
v-else
|
||||||
|
class="button-new-tag"
|
||||||
|
size="small"
|
||||||
|
@click="showInput"
|
||||||
|
round
|
||||||
|
v-show="uid === currentUid"
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="data-info">
|
||||||
|
<div class="user-interactions">
|
||||||
|
<div>
|
||||||
|
<span class="count">{{ userInfo.trendCount }}</span
|
||||||
|
><span class="shows">作品</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="count">{{ userInfo.followerCount }}</span
|
||||||
|
><span class="shows">关注</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="count">{{ userInfo.fanCount }}</span
|
||||||
|
><span class="shows">粉丝</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="follow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tool-btn" v-show="uid !== currentUid">
|
||||||
|
<el-button :icon="ChatLineRound" circle @click="chatShow = true" />
|
||||||
|
<el-button type="info" round v-if="_isFollow" @click="follow(uid, 1)">已关注</el-button>
|
||||||
|
<el-button type="danger" round v-else @click="follow(uid, 0)">关注</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reds-sticky-box user-page-sticky" style="--1ee3a37c: all 0.4s cubic-bezier(0.2, 0, 0.25, 1) 0s">
|
||||||
|
<div class="reds-sticky" style="">
|
||||||
|
<div class="tertiary center reds-tabs-list" style="padding: 0rem 0.75rem">
|
||||||
|
<div
|
||||||
|
:class="type == 1 ? 'reds-tab-item active' : 'reds-tab-item'"
|
||||||
|
style="padding: 0rem 1rem; margin-right: 0rem; font-size: 1rem"
|
||||||
|
>
|
||||||
|
<span @click="toPage(1)">笔记</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="type == 2 ? 'reds-tab-item active' : 'reds-tab-item'"
|
||||||
|
style="padding: 0rem 1rem; margin-right: 0rem; font-size: 1rem"
|
||||||
|
>
|
||||||
|
<span @click="toPage(2)">点赞</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="type == 3 ? 'reds-tab-item active' : 'reds-tab-item'"
|
||||||
|
style="padding: 0rem 1rem; margin-right: 0rem; font-size: 1rem"
|
||||||
|
>
|
||||||
|
<span @click="toPage(3)">收藏</span>
|
||||||
|
</div>
|
||||||
|
<div class="active-tag" style="width: 4rem; left: 39.1875rem"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feeds-tab-container" style="--1ee3a37c: all 0.4s cubic-bezier(0.2, 0, 0.25, 1) 0s">
|
||||||
|
<Chat
|
||||||
|
v-if="chatShow"
|
||||||
|
:acceptUid="uid"
|
||||||
|
class="animate__animated animate__zoomIn animate__delay-0.5s"
|
||||||
|
@click-chat="chatShow = false"
|
||||||
|
>
|
||||||
|
</Chat>
|
||||||
|
<Note :type="type"> </Note>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ChatLineRound, Edit } from "@element-plus/icons-vue";
|
||||||
|
import { ref, nextTick } from "vue";
|
||||||
|
import { getUserById, updateUser } from "@/api/user";
|
||||||
|
import Note from "@/components/Note.vue";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import Chat from "@/components/Chat.vue";
|
||||||
|
import { followById, isFollow } from "@/api/follower";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { ElInput, ElMessage, UploadProps } from "element-plus";
|
||||||
|
import { baseURL } from "@/constant/constant";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const uploadHeader = ref({
|
||||||
|
accessToken: userStore.getToken(),
|
||||||
|
});
|
||||||
|
const currentUid = userStore.getUserInfo().id;
|
||||||
|
const userInfo = ref<any>({});
|
||||||
|
//const uid = history.state.uid;
|
||||||
|
const uid = route.query.uid as string;
|
||||||
|
const type = ref(1);
|
||||||
|
const chatShow = ref(false);
|
||||||
|
const _isFollow = ref(false);
|
||||||
|
const _isEditInfo = ref(false);
|
||||||
|
const tagList = ref<string[]>([]);
|
||||||
|
const inputVisible = ref(false);
|
||||||
|
const InputRef = ref<InstanceType<typeof ElInput>>();
|
||||||
|
const inputTagValue = ref("");
|
||||||
|
const fileAction = baseURL + "web/oss/save/1";
|
||||||
|
|
||||||
|
const showInput = () => {
|
||||||
|
inputVisible.value = true;
|
||||||
|
nextTick(() => {
|
||||||
|
InputRef.value!.input!.focus();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = (tag: string) => {
|
||||||
|
tagList.value.splice(tagList.value.indexOf(tag), 1);
|
||||||
|
commonUpdateUser();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputConfirm = () => {
|
||||||
|
if (inputTagValue.value) {
|
||||||
|
tagList.value.push(inputTagValue.value);
|
||||||
|
commonUpdateUser();
|
||||||
|
}
|
||||||
|
// _isClosable.value = false;
|
||||||
|
inputVisible.value = false;
|
||||||
|
inputTagValue.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
const commonUpdateUser = () => {
|
||||||
|
// 检查标签数量并处理
|
||||||
|
if (tagList.value.length > 4) {
|
||||||
|
tagList.value.splice(4);
|
||||||
|
ElMessage.warning("最多支持4个标签!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 创建用户DTO对象并赋值
|
||||||
|
let userDTO = {
|
||||||
|
id: userInfo.value.id,
|
||||||
|
avatar: userInfo.value.avatar,
|
||||||
|
username: userInfo.value.username,
|
||||||
|
description: userInfo.value.description,
|
||||||
|
tags: JSON.stringify(tagList.value),
|
||||||
|
};
|
||||||
|
updateUser(userDTO)
|
||||||
|
.then(() => {
|
||||||
|
// 更新用户存储信息
|
||||||
|
ElMessage.success("修改成功～");
|
||||||
|
const user = userStore.getUserInfo();
|
||||||
|
user.avatar = userInfo.value.avatar;
|
||||||
|
userStore.setUserInfo(user);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage.error("更新失败，请稍后再试!");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmUserInfo = () => {
|
||||||
|
_isEditInfo.value = false;
|
||||||
|
commonUpdateUser();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toPage = (val: number) => {
|
||||||
|
type.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
|
||||||
|
userInfo.value.avatar = response.data;
|
||||||
|
commonUpdateUser();
|
||||||
|
};
|
||||||
|
|
||||||
|
const follow = (fid: string, type: number) => {
|
||||||
|
followById(fid).then(() => {
|
||||||
|
_isFollow.value = type == 0;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
getUserById(uid).then((res) => {
|
||||||
|
userInfo.value = res.data;
|
||||||
|
if (res.data.tags != null) {
|
||||||
|
tagList.value = JSON.parse(res.data.tags);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
isFollow(uid).then((res) => {
|
||||||
|
_isFollow.value = res.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
initData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:deep(.el-button:hover) {
|
||||||
|
background-color: #fff;
|
||||||
|
color: black;
|
||||||
|
border-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tag) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-page {
|
||||||
|
background: #fff;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.user {
|
||||||
|
padding-top: 4.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
.avatar-wrapper {
|
||||||
|
text-align: center;
|
||||||
|
width: 15.6667rem;
|
||||||
|
height: 10.9667rem;
|
||||||
|
|
||||||
|
.user-image {
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-avatr {
|
||||||
|
border: 0.0625rem solid #f4f4f4;
|
||||||
|
width: 2.875rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
height: 1.75rem;
|
||||||
|
color: #1f1e1e;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
.btn-avatr:hover {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-part {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
@media screen and (min-width: 108rem) {
|
||||||
|
width: 33.3333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-left: 2rem;
|
||||||
|
|
||||||
|
.basic-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.user-basic {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.user-nickname {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
max-width: calc(100% - 6rem);
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 120%;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-content {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 120%;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
|
||||||
|
.user-redId {
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-desc {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 1rem;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-tags {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 120%;
|
||||||
|
|
||||||
|
.tag-item :first-child {
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
grid-gap: 0.25rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
border-radius: 2.5625rem;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
height: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.15); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
|
||||||
|
.user-interactions {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.count {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shows {
|
||||||
|
color: rgba(51, 51, 51, 0.6);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-interactions > div {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: auto;
|
||||||
|
display: block;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 10%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.tool-btn {
|
||||||
|
@media screen and (min-width: 108rem) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-btn {
|
||||||
|
@media screen and (min-width: 90.3958rem) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-btn {
|
||||||
|
@media screen and (min-width: 109.375rem) {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-sticky {
|
||||||
|
padding: 1rem 0;
|
||||||
|
z-index: 5 !important;
|
||||||
|
background: hsla(0, 0%, 100%, 0.98);
|
||||||
|
|
||||||
|
.reds-tabs-list {
|
||||||
|
@media screen and (min-width: 108rem) {
|
||||||
|
width: 90.3333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
position: relative;
|
||||||
|
font-size: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.reds-tab-item {
|
||||||
|
padding: 0rem 1rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.2, 0, 0.25, 1);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
:hover {
|
||||||
|
cursor: pointer; /* 显示小手指针 */
|
||||||
|
transform: scale(1.15); /* 鼠标移入时按钮稍微放大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.reds-tab-item.active {
|
||||||
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feeds-tab-container {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
62
src/router/index.ts
Normal file
62
src/router/index.ts
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
|
import Login from "@/pages/login.vue";
|
||||||
|
import Dashboard from "@/pages/dashboard/dashboard.vue";
|
||||||
|
|
||||||
|
export const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
redirect: "/index",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "login",
|
||||||
|
path: "/login",
|
||||||
|
component: Login,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "index",
|
||||||
|
path: "/index",
|
||||||
|
component: () => import("@/pages/index.vue"),
|
||||||
|
redirect: "/dashboard",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/dashboard",
|
||||||
|
component: Dashboard,
|
||||||
|
name: "dashboard",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/followTrend",
|
||||||
|
component: () => import("@/pages/follow-trend/follow-trend.vue"),
|
||||||
|
name: "followTrend",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/notice",
|
||||||
|
component: () => import("@/pages/message/index.vue"),
|
||||||
|
name: "notice",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/user",
|
||||||
|
component: () => import("@/pages/user/index.vue"),
|
||||||
|
name: "user",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/push",
|
||||||
|
component: () => import("@/pages/push/index.vue"),
|
||||||
|
name: "push",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/search",
|
||||||
|
component: () => import("@/pages/search/index.vue"),
|
||||||
|
name: "search",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const router = createRouter({
|
||||||
|
scrollBehavior: () => ({ left: 0, top: 0 }),
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
export default router;
|
||||||
36
src/store/imStore.ts
Normal file
36
src/store/imStore.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { store } from "@/store";
|
||||||
|
|
||||||
|
// 使用setup模式定义
|
||||||
|
export const imStore = defineStore("imStore", () => {
|
||||||
|
const userList = ref<Array<any>>([]);
|
||||||
|
|
||||||
|
const message = ref<any>({});
|
||||||
|
|
||||||
|
const countMessage = ref({
|
||||||
|
chatCount: 0,
|
||||||
|
likeOrCollectionCount: 0,
|
||||||
|
commentCount: 0,
|
||||||
|
followCount: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const setUserList = (data: Array<any>) => {
|
||||||
|
userList.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCountMessage = (data: any) => {
|
||||||
|
countMessage.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setMessage = (data: any) => {
|
||||||
|
message.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
return { userList, countMessage, message, setUserList, setCountMessage, setMessage };
|
||||||
|
});
|
||||||
|
|
||||||
|
export function useImStore() {
|
||||||
|
return imStore(store);
|
||||||
|
}
|
||||||
11
src/store/index.ts
Normal file
11
src/store/index.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import type { App } from "vue";
|
||||||
|
import { createPinia } from "pinia";
|
||||||
|
|
||||||
|
const store = createPinia();
|
||||||
|
|
||||||
|
// 全局注册 store
|
||||||
|
export function setupStore(app: App<Element>) {
|
||||||
|
app.use(store);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { store };
|
||||||
69
src/store/searchStore.ts
Normal file
69
src/store/searchStore.ts
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { storage } from "@/utils/storage";
|
||||||
|
import { store } from "@/store";
|
||||||
|
|
||||||
|
// 使用setup模式定义
|
||||||
|
export const searchStore = defineStore("searchStore", () => {
|
||||||
|
const keyWord = ref("");
|
||||||
|
const seed = ref("");
|
||||||
|
const historyRecords = ref<Array<string>>([]);
|
||||||
|
|
||||||
|
const setKeyword = (val: string) => {
|
||||||
|
keyWord.value = val;
|
||||||
|
storage.set("keyword", val);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSeed = (val: string) => {
|
||||||
|
seed.value = val;
|
||||||
|
storage.set("seed", val);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pushRecord = (val: string) => {
|
||||||
|
if (storage.get("historyRecords") == null) {
|
||||||
|
storage.set("historyRecords", []);
|
||||||
|
}
|
||||||
|
let data = storage.get("historyRecords") as Array<string>;
|
||||||
|
data = data.filter((item) => item != val);
|
||||||
|
data.splice(0, 0, val);
|
||||||
|
if (data.length > 10) {
|
||||||
|
data = data.slice(0, data.length - 1);
|
||||||
|
}
|
||||||
|
storage.set("historyRecords", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setRecords = (val: Array<string>) => {
|
||||||
|
storage.set("historyRecords", val);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRecords = () => {
|
||||||
|
return storage.get("historyRecords") as Array<string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearAllRecord = () => {
|
||||||
|
storage.set("historyRecords", []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteRecord = (index: number) => {
|
||||||
|
historyRecords.value = storage.get("historyRecords") as Array<string>;
|
||||||
|
historyRecords.value.splice(index, 1);
|
||||||
|
console.log(historyRecords.value);
|
||||||
|
storage.set("historyRecords", historyRecords.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
keyWord,
|
||||||
|
seed,
|
||||||
|
setKeyword,
|
||||||
|
pushRecord,
|
||||||
|
deleteRecord,
|
||||||
|
clearAllRecord,
|
||||||
|
getRecords,
|
||||||
|
setSeed,
|
||||||
|
setRecords,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export function useSearchStore() {
|
||||||
|
return searchStore(store);
|
||||||
|
}
|
||||||
50
src/store/userStore.ts
Normal file
50
src/store/userStore.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { storage } from "@/utils/storage";
|
||||||
|
import { refreshToken } from "@/api/user";
|
||||||
|
import { store } from "@/store";
|
||||||
|
import type { User } from "@/type/user";
|
||||||
|
|
||||||
|
// 使用setup模式定义
|
||||||
|
export const userStore = defineStore("userStore", () => {
|
||||||
|
const token = ref("");
|
||||||
|
|
||||||
|
const getToken = () => {
|
||||||
|
return storage.get("accessToken");
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUserInfo = (): User => {
|
||||||
|
return storage.get("userInfo") as User;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setUserInfo = (data: User) => {
|
||||||
|
storage.set("userInfo", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isLogin = () => {
|
||||||
|
const user = storage.get("userInfo") as User;
|
||||||
|
return user != null && user != undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNewToken = (token: string) => {
|
||||||
|
return new Promise<any>((resolve, reject) => {
|
||||||
|
refreshToken(token)
|
||||||
|
.then((res) => {
|
||||||
|
resolve(res);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
reject(error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loginOut = () => {
|
||||||
|
window.localStorage.clear();
|
||||||
|
};
|
||||||
|
|
||||||
|
return { token, getToken, getNewToken, getUserInfo, setUserInfo, loginOut, isLogin };
|
||||||
|
});
|
||||||
|
|
||||||
|
export function useUserStore() {
|
||||||
|
return userStore(store);
|
||||||
|
}
|
||||||
39
src/style.css
Normal file
39
src/style.css
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-user-select: auto;
|
||||||
|
user-select: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
button, input, optgroup, select, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
button, input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
6
src/type/category.ts
Normal file
6
src/type/category.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export interface Category {
|
||||||
|
id: string,
|
||||||
|
title: string,
|
||||||
|
pid: string,
|
||||||
|
likeCount: number;
|
||||||
|
}
|
||||||
30
src/type/comment.ts
Normal file
30
src/type/comment.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
export interface CommentDTO {
|
||||||
|
nid: string;
|
||||||
|
noteUid: string;
|
||||||
|
pid: string;
|
||||||
|
replyId: string;
|
||||||
|
replyUid: string;
|
||||||
|
replyUsername: string;
|
||||||
|
level: number;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Comment {
|
||||||
|
id: string;
|
||||||
|
pid: string;
|
||||||
|
nid: string;
|
||||||
|
noteCover: string;
|
||||||
|
uid: string;
|
||||||
|
username: string;
|
||||||
|
avatar: string;
|
||||||
|
replyId: string;
|
||||||
|
replyUid: string;
|
||||||
|
replyUsername: string;
|
||||||
|
content: string;
|
||||||
|
replyContent: string;
|
||||||
|
time: number;
|
||||||
|
likeCount: number;
|
||||||
|
isLike: boolean;
|
||||||
|
twoCommentCount: number;
|
||||||
|
children: Array<Comment>;
|
||||||
|
}
|
||||||
5
src/type/likeOrCollection.ts
Normal file
5
src/type/likeOrCollection.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export interface LikeOrCollectionDTO {
|
||||||
|
likeOrCollectionId: string;
|
||||||
|
publishUid: string;
|
||||||
|
type: number;
|
||||||
|
}
|
||||||
43
src/type/note.ts
Normal file
43
src/type/note.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
export interface NoteSearch {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
src: string;
|
||||||
|
uid: string;
|
||||||
|
username: string;
|
||||||
|
avatar: string;
|
||||||
|
cid: string;
|
||||||
|
cpid: string;
|
||||||
|
urls: string;
|
||||||
|
count: number;
|
||||||
|
type: number;
|
||||||
|
likeCount: number;
|
||||||
|
time: number | string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NoteInfo {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
noteCover: string;
|
||||||
|
uid: string;
|
||||||
|
username: string;
|
||||||
|
avatar: string;
|
||||||
|
imgList: Array<string>;
|
||||||
|
type: number;
|
||||||
|
likeCount: number;
|
||||||
|
collectionCount: number;
|
||||||
|
commentCount: number;
|
||||||
|
tagList: Array<any>;
|
||||||
|
time: string;
|
||||||
|
isFollow: boolean,
|
||||||
|
isLike: boolean,
|
||||||
|
isCollection: boolean,
|
||||||
|
pinned: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NoteDTO {
|
||||||
|
keyword: string;
|
||||||
|
type: number;
|
||||||
|
cid: string;
|
||||||
|
cpid: string;
|
||||||
|
}
|
||||||
22
src/type/user.ts
Normal file
22
src/type/user.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
export interface UserLogin {
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
code: string;
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
yxId: string;
|
||||||
|
username: string;
|
||||||
|
avatar: string;
|
||||||
|
gender: number;
|
||||||
|
description: string;
|
||||||
|
birthday: string;
|
||||||
|
address: string;
|
||||||
|
userCover: string;
|
||||||
|
trendCount: number;
|
||||||
|
followerCount: number;
|
||||||
|
fanCount: number;
|
||||||
|
}
|
||||||
97
src/utils/request.ts
Normal file
97
src/utils/request.ts
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
|
||||||
|
import { useUserStore } from "@/store/userStore";
|
||||||
|
import { storage } from "./storage";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { baseURL } from "@/constant/constant";
|
||||||
|
// 刷新 token 后, 将缓存的接口重新请求一次
|
||||||
|
// 是否正在刷新 token
|
||||||
|
let isRefreshing: boolean = false;
|
||||||
|
|
||||||
|
// 存储待重发的请求
|
||||||
|
let requestsQueue: ((token: string) => any)[] = [];
|
||||||
|
|
||||||
|
// 创建 axios 实例
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
|
// baseURL: baseURL,
|
||||||
|
timeout: 50000,
|
||||||
|
headers: { "Content-Type": "application/json;charset=utf-8" },
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
(config: InternalAxiosRequestConfig) => {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
if (userStore.getToken()) {
|
||||||
|
config.headers.accessToken = userStore.getToken();
|
||||||
|
config.headers.userId = userStore.getUserInfo().id;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error: any) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
(response: AxiosResponse) => {
|
||||||
|
const { code } = response.data;
|
||||||
|
if (code === 200) {
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// 响应数据为二进制流处理(Excel导出)
|
||||||
|
// if (response.data instanceof ArrayBuffer) {
|
||||||
|
// return response;
|
||||||
|
// }
|
||||||
|
const config = response.config;
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
if (code === 501) {
|
||||||
|
// 无感刷新Token
|
||||||
|
if (!isRefreshing) {
|
||||||
|
isRefreshing = true;
|
||||||
|
storage.set("accessToken", "");
|
||||||
|
const refreshToken = storage.get("refreshToken") as string;
|
||||||
|
console.log("refreshToken", refreshToken);
|
||||||
|
return userStore
|
||||||
|
.getNewToken(refreshToken)
|
||||||
|
.then(async (rftRes) => {
|
||||||
|
console.log("rftRes", rftRes);
|
||||||
|
const { accessToken, refreshToken } = rftRes.data;
|
||||||
|
storage.set("accessToken", accessToken);
|
||||||
|
storage.set("refreshToken", refreshToken);
|
||||||
|
config.headers.accessToken = accessToken;
|
||||||
|
// 重新请求一下第一个 501 的接口
|
||||||
|
const firstReqRes = await service.request(config);
|
||||||
|
// token 刷新后将数组的方法重新执行
|
||||||
|
requestsQueue.forEach((cb: any) => cb(accessToken));
|
||||||
|
// 队列中的请求执行完毕后，清空数组
|
||||||
|
requestsQueue = [];
|
||||||
|
return firstReqRes;
|
||||||
|
}).finally(() => {
|
||||||
|
isRefreshing = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 如果正在 refreshToken
|
||||||
|
|
||||||
|
// 如果有多个请求同时发起，第一个请求 401 了，refreshToken 又正在进行中
|
||||||
|
// 那么把第一个以外的请求暂存起来
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
// 用函数形式将 resolve 存入，等待 refreshToken 完成后再执行
|
||||||
|
requestsQueue.push((token: string) => {
|
||||||
|
config.headers.Authorization = token;
|
||||||
|
resolve(service.request(config));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (code == 401) {
|
||||||
|
ElMessage.error("登录过期，请重新登录");
|
||||||
|
window.localStorage.clear();
|
||||||
|
}
|
||||||
|
return Promise.reject(response.data);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 导出 axios 实例
|
||||||
|
export default service;
|
||||||
42
src/utils/storage.ts
Normal file
42
src/utils/storage.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* 封装操作localstorage本地存储的方法
|
||||||
|
*/
|
||||||
|
export const storage = {
|
||||||
|
//存储
|
||||||
|
set(key: string, value: any) {
|
||||||
|
localStorage.setItem(key, JSON.stringify(value));
|
||||||
|
},
|
||||||
|
//取出数据
|
||||||
|
get<T>(key: string) {
|
||||||
|
const value = localStorage.getItem(key);
|
||||||
|
if (value && value != "undefined" && value != "null") {
|
||||||
|
return <T>JSON.parse(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除数据
|
||||||
|
remove(key: string) {
|
||||||
|
localStorage.removeItem(key);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封装操作sessionStorage本地存储的方法
|
||||||
|
*/
|
||||||
|
export const sessionStorage = {
|
||||||
|
//存储
|
||||||
|
set(key: string, value: any) {
|
||||||
|
window.sessionStorage.setItem(key, JSON.stringify(value));
|
||||||
|
},
|
||||||
|
//取出数据
|
||||||
|
get(key: string) {
|
||||||
|
const value = window.sessionStorage.getItem(key);
|
||||||
|
if (value && value != "undefined" && value != "null") {
|
||||||
|
return JSON.parse(value);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
// 删除数据
|
||||||
|
remove(key: string) {
|
||||||
|
window.sessionStorage.removeItem(key);
|
||||||
|
},
|
||||||
|
};
|
||||||
167
src/utils/util.ts
Normal file
167
src/utils/util.ts
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
|
||||||
|
|
||||||
|
import axios from 'axios'
|
||||||
|
export const formatDate = (t: number): string => {
|
||||||
|
t = t || Date.now();
|
||||||
|
const time = new Date(t);
|
||||||
|
let str = time.getFullYear() as any;
|
||||||
|
str += "-";
|
||||||
|
str = time.getMonth() < 9 ? "0" + (time.getMonth() + 1) : (time.getMonth() + 1);
|
||||||
|
str += "-";
|
||||||
|
str += time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
|
||||||
|
str += " ";
|
||||||
|
str += time.getHours();
|
||||||
|
str += ":";
|
||||||
|
str += time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 距当前时间点的时长
|
||||||
|
* @prama time 13位时间戳
|
||||||
|
* @return str x秒 / x分钟 / x小时
|
||||||
|
*/
|
||||||
|
export const formateTime = (time: number): string => {
|
||||||
|
const second = 1000;
|
||||||
|
const minute = second * 60;
|
||||||
|
const hour = minute * 60;
|
||||||
|
const day = hour * 24;
|
||||||
|
const month = day * 30;
|
||||||
|
const now = new Date().getTime();
|
||||||
|
const diffValue = now - time;
|
||||||
|
|
||||||
|
// 计算差异时间的量级
|
||||||
|
const secondC = diffValue / second;
|
||||||
|
const minC = diffValue / minute;
|
||||||
|
const hourC = diffValue / hour;
|
||||||
|
const dayC = diffValue / day;
|
||||||
|
const monthC = diffValue / month;
|
||||||
|
|
||||||
|
if (monthC > 3) {
|
||||||
|
return formatDate(time);
|
||||||
|
} else if (monthC >= 1 && monthC <= 3) {
|
||||||
|
return parseInt(monthC.toString()) + "月前";
|
||||||
|
} else if (dayC >= 1) {
|
||||||
|
return parseInt(dayC.toString()) + "天前";
|
||||||
|
} else if (hourC >= 1) {
|
||||||
|
return parseInt(hourC.toString()) + "小时前";
|
||||||
|
} else if (minC >= 1) {
|
||||||
|
return parseInt(minC.toString()) + "分钟前";
|
||||||
|
} else if (secondC >= 1) {
|
||||||
|
return parseInt(secondC.toString()) + "秒前";
|
||||||
|
} else {
|
||||||
|
return "刚刚";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 随机生成字符串
|
||||||
|
* @param len 指定生成字符串长度
|
||||||
|
*/
|
||||||
|
export const getRandomString = (len: number) => {
|
||||||
|
const _charStr = "abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789",
|
||||||
|
min = 0,
|
||||||
|
max = _charStr.length - 1;
|
||||||
|
let _str = ""; //定义随机字符串 变量
|
||||||
|
//判断是否指定长度，否则默认长度为15
|
||||||
|
len = len || 15;
|
||||||
|
//循环生成字符串
|
||||||
|
for (let i = 0, index; i < len; i++) {
|
||||||
|
index = (function (randomIndexFunc, i) {
|
||||||
|
return randomIndexFunc(min, max, i, randomIndexFunc);
|
||||||
|
})(function (min: any, max: any, i: any, _self: any) {
|
||||||
|
let indexTemp = Math.floor(Math.random() * (max - min + 1) + min);
|
||||||
|
const numStart = _charStr.length - 10;
|
||||||
|
if (i == 0 && indexTemp >= numStart) {
|
||||||
|
indexTemp = _self(min, max, i, _self);
|
||||||
|
}
|
||||||
|
return indexTemp;
|
||||||
|
}, i);
|
||||||
|
_str += _charStr[index];
|
||||||
|
}
|
||||||
|
return _str;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const getFileFromUrl = async (url: string, fileName: string) => {
|
||||||
|
try {
|
||||||
|
// 第一步：使用axios获取网络图片数据
|
||||||
|
const response = await axios.get(url, { responseType: 'arraybuffer' })
|
||||||
|
// 第二步：将图片数据转换为Blob对象
|
||||||
|
const blob = new Blob([response.data], {
|
||||||
|
type: response.headers['content-type']
|
||||||
|
})
|
||||||
|
// 第三步：创建一个新的File对象
|
||||||
|
const file = new File([blob], fileName, {
|
||||||
|
type: response.headers['content-type']
|
||||||
|
})
|
||||||
|
return file
|
||||||
|
} catch (error) {
|
||||||
|
console.error('将图片转换为File对象时发生错误:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 得到html标签中的内容
|
||||||
|
* @param content
|
||||||
|
*/
|
||||||
|
export const getHtmlContent = (html: string) => {
|
||||||
|
const pattern = /<[a-z]+[1-6]?\b[^>]*>(.*?)<\/[a-z]+[1-6]?>/g;
|
||||||
|
const res = [];
|
||||||
|
let match;
|
||||||
|
while ((match = pattern.exec(html)) !== null) {
|
||||||
|
const content = match[1].trim();
|
||||||
|
res.push(content);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滚动平滑导航栏
|
||||||
|
*/
|
||||||
|
export const refreshTab = (f: any) => {
|
||||||
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
const clientHeight =
|
||||||
|
window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
|
||||||
|
|
||||||
|
if (scrollTop <= clientHeight * 2) {
|
||||||
|
const timeTop = setInterval(() => {
|
||||||
|
document.documentElement.scrollTop = document.body.scrollTop = scrollTop -= 100;
|
||||||
|
if (scrollTop <= 0) {
|
||||||
|
clearInterval(timeTop);
|
||||||
|
f();
|
||||||
|
}
|
||||||
|
}, 10); //定时调用函数使其更顺滑
|
||||||
|
} else {
|
||||||
|
document.documentElement.scrollTop = 0;
|
||||||
|
f();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将图片转成base64格式
|
||||||
|
*
|
||||||
|
* @param imageFile 图片文件
|
||||||
|
* @param callback 转成成功函数回调（这里是接收转换成功结果的函数）
|
||||||
|
* @param errorCallback 转成失败函数回调（这里是接收转换失败结果的函数）
|
||||||
|
*/
|
||||||
|
export const convertImgToBase64 = (imageFile: any, callback: any, errorCallback: any) => {
|
||||||
|
try {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(imageFile);
|
||||||
|
reader.onload = function (e) {
|
||||||
|
if (callback) {
|
||||||
|
const base64Str = e.target!.result;
|
||||||
|
callback(base64Str);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
if (errorCallback) {
|
||||||
|
errorCallback(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
6
src/vite-env.d.ts
vendored
Normal file
6
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
declare module "*.vue" {
|
||||||
|
import type { DefineComponent } from "vue";
|
||||||
|
const vueComponent: DefineComponent<{}, {}, any>;
|
||||||
|
export default vueComponent;
|
||||||
|
}
|
||||||
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
49
vite.config.ts
Normal file
49
vite.config.ts
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
import { resolve } from "path";
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
//extensions: [".ts", ".js", ".vue", ".json", ".mjs"],
|
||||||
|
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
|
||||||
|
},
|
||||||
|
// server: {
|
||||||
|
// port: 3000,
|
||||||
|
// open: true,
|
||||||
|
// // 配置代理
|
||||||
|
// proxy: {
|
||||||
|
// // 请求的路径前缀只要是 /testaxios 就会被拦截走这个代理
|
||||||
|
// '/oss': {
|
||||||
|
// /**
|
||||||
|
// * 请求的目标资源再经过替换成 /httphwm/getList 后，
|
||||||
|
// * 会加上 http://127.0.0.1:9693 这个前缀，
|
||||||
|
// * 最后请求的URL为: http://127.0.0.1:9693/httphwm/getList
|
||||||
|
// */
|
||||||
|
// target: 'http://localhost:8080/',
|
||||||
|
// ws: true,
|
||||||
|
// changeOrigin: true,
|
||||||
|
// // 拦截到的请求路径 testaxios/httphwm/getList，/testaxios会被替换成空
|
||||||
|
// rewrite: (path) => path.replace(/^\/oss/, 'oss'),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
|
||||||
|
server: {
|
||||||
|
port: 80,
|
||||||
|
host: true,
|
||||||
|
open: true,
|
||||||
|
proxy: {
|
||||||
|
// https://cn.vitejs.dev/config/#server-proxy
|
||||||
|
'/dev-api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user