Skip to content

C
corporate-culture-qd
Commit dd781b5e by lijiabin
Options

Merge branch 'master' into feature/20520-【YAYA文化岛】新增转盘抽奖模块

parents 6f7a565b c31d6dcb
Showing with 1024 additions and 348 deletions
README.md
# .
# 企业文化平台前端
基于 `Vue 3 + Vite + TypeScript` 的企业文化平台前端项目，包含前台内容展示、用户中心、内容发布、积分商城、限时竞拍等，以及后台内容与配置管理。
## 项目概览
- 前台业务：
- 首页内容流
- YA 文化 / 问吧等频道页
- 帖子、视频、专栏、专访、问吧、实践、案例详情
- 用户中心、他人主页、我的互动内容
- 视频/长文/案例发布
- 积分商城、竞拍、私信等功能页
- 后台业务：
- 标签、轮播图、案例库管理
- 内容管理：专栏 / 专访 / 视频 / 问吧
- 配置管理：商城、竞拍、每日抽奖
## 技术栈
- 框架：`Vue 3`
- 构建工具：`Vite`
- 语言：`TypeScript`
- 路由：`vue-router`
- 状态管理：`Pinia`
- UI 组件：`Element Plus`
- 原子化样式：`UnoCSS`
- 组合式工具：`VueUse`
- 富文本编辑：`WangEditor`
- HTTP 请求：`Axios`
- 提示通知：`Notivue`
- SVG 图标：`vite-plugin-svg-icons`
- 自动导入：`unplugin-auto-import`、`unplugin-vue-components`
## 运行环境
- Node.js：`^20.19.0 || >=22.12.0`
- 包管理器：推荐 `pnpm`
## 安装依赖
```bash
pnpm install
```
This template should help get you started developing with Vue 3 in Vite.
## 本地开发
## Recommended IDE Setup
```bash
pnpm dev
```
默认开发端口：
```bash
http://localhost:3000
```
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## 常用脚本
## Recommended Browser Setup
### 启动开发环境
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
```bash
pnpm dev
```
## Type Support for `.vue` Imports in TS
### 类型检查
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
```bash
pnpm type-check
```
## Customize configuration
### 代码检查并自动修复
See [Vite Configuration Reference](https://vite.dev/config/).
```bash
pnpm lint
```
## Project Setup
### 代码格式化
```sh
pnpm install
```bash
pnpm format
```
### Compile and Hot-Reload for Development
### 本地预览构建结果
```sh
pnpm dev
```bash
pnpm preview
```
### Type-Check, Compile and Minify for Production
### 默认构建
```sh
```bash
pnpm build
```
### Lint with [ESLint](https://eslint.org/)
### 按环境构建
```sh
pnpm lint
```bash
pnpm build:dev
pnpm build:test
pnpm build:prod
```
### 发布脚本
```bash
pnpm deploy:test
pnpm deploy:prod
pnpm deploy:prod:update-info
```
## 环境变量
项目使用 `.env.local` 管理本地环境变量。常见变量如下：
```bash
VITE_AI_API_URL=
MY_OPENAI_API_KEY=
MY_OPENAI_BASE_URL=
BACKEND_API_URL=
DEPLOY_PROD_HOST=
DEPLOY_PROD_PORT=
DEPLOY_PROD_USERNAME=
DEPLOY_PROD_PASSWORD=
DEPLOY_TEST_HOST=
DEPLOY_TEST_PORT=
DEPLOY_TEST_USERNAME=
DEPLOY_TEST_PASSWORD=
```
说明：
- `VITE_` 前缀变量会注入前端运行时。
- `BACKEND_API_URL` 用于业务接口请求地址。
- `MY_OPENAI_*` 用于本地 AI 代理 / OpenAI 兼容接口。
- `DEPLOY_*` 用于部署脚本连接服务器。
建议：
- 不要在 README 中记录真实密钥和密码。
- 团队协作时建议补一个 `.env.example` 作为示例模板。
## 目录结构
```text
.
├─ deploy/ # 测试 / 正式环境部署脚本
├─ public/ # 公共静态资源
├─ server/ # 本地服务或辅助服务代码
├─ src/
│ ├─ api/ # 接口定义与请求封装
│ ├─ assets/ # 图片、SVG、基础样式
│ ├─ components/ # 通用组件
│ ├─ constants/ # 常量、枚举、选项配置
│ ├─ hooks/ # 组合式 hooks
│ ├─ layoutCulture/ # 前台整体布局
│ ├─ plugins/ # Vite / 业务插件
│ ├─ router/ # 路由与守卫
│ ├─ stores/ # Pinia stores
│ ├─ style/ # 全局样式
│ ├─ utils/ # 工具函数、请求、存储、版本检测等
│ ├─ views/ # 页面级视图
│ ├─ App.vue
│ ├─ config.ts
│ └─ main.ts
├─ vite.config.ts # Vite 配置
├─ uno.config.ts # UnoCSS 配置
├─ tsconfig*.json # TypeScript 配置
└─ package.json
```
## 路由结构
### 前台主路由
- `/homePage/homeTab`
- `/homePage/yaTab`
- `/homePage/askTab`
- `/userPage/*`
- `/videoDetail/:id`
- `/articleDetail/:id`
- `/questionDetail/:id`
- `/publishVideo`
- `/publishCase`
- `/publishLongArticle/:type`
- `/pointsStore`
- `/auction`
### 后台路由
- `/backend/tags`
- `/backend/carousel`
- `/backend/caseManage`
- `/backend/goodsDistribution`
- `/backend/contentsMenu/*`
- `/backend/settingsMenu/*`
- `/backend/columnsMenu/*`
## 工程特性
- 基于 `Element Plus` 组件体系构建
- 使用 `UnoCSS` 进行原子化样式开发
- 使用 `AutoImport` 与 `Components` 自动导入 Vue / Element Plus 能力
- 支持 SVG 图标自动注册
- 构建阶段按依赖进行 `manualChunks` 拆包
- 生产环境启用版本轮询更新逻辑
## 开发建议
### 推荐编辑器
- `VS Code`
- 安装插件：
- `Vue - Official`
- `ESLint`
- `Prettier`
- `UnoCSS`
### 样式建议
- 优先使用 `UnoCSS`
- 页面结构复杂时再配合少量 `scoped style`
- 公共视觉元素优先沉淀到 `src/components/common`
### 代码组织建议
- 页面接口统一放在 `src/api`
- 复用逻辑统一抽到 `src/hooks`
- 通用方法放在 `src/utils`
- 状态共享走 `Pinia`
## 构建与部署说明
- `pnpm build:*` 用于不同环境构建
- `deploy/` 目录中维护测试与正式环境发布脚本
- 发布前请确认：
- 环境变量配置正确
- 当前分支代码已通过基本功能验证
- 需要的服务器连接信息已更新
package.json
......@@ -24,6 +24,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
"@lucky-canvas/vue": "^0.1.11",
"@types/crypto-js": "^4.2.2",
"@vueuse/components": "^14.0.0",
"@vueuse/core": "^14.0.0",
"@wangeditor/editor": "^5.1.23",
......@@ -31,6 +32,7 @@
"@wecom/jssdk": "^2.3.3",
"archiver": "^7.0.1",
"axios": "^1.13.0",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.19",
"element-plus": "^2.11.5",
"gsap": "^3.14.2",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/article/types.ts
......@@ -40,6 +40,8 @@ export interface AddOrUpdatePostDto {
imgUrl?: string
sendTime?: string
type?: ArticleTypeEnum.POST
// 1是隐藏
regionHide?: BooleanFlag
}
interface AddOrUpdateColumnBase {
......@@ -205,6 +207,7 @@ export interface ArticleItemDto {
videoLocation: VideoPositionEnum
articleVideoUrl: string
region: string
regionHide: BooleanFlag
recommendSort: number
isOfficialAccount: BooleanFlag
}
......
src/api/backend/case/types.ts
import type { TagItemDto } from '@/api/case/types'
import type { TagItemDto } from '@/api/tag/types'
import { UsageStatusEnum, AuditStatusEnum } from '@/constants'
import type { PageSearchParams } from '@/utils/request/types'
......
src/api/backend/shop/types.ts
......@@ -9,7 +9,7 @@ export interface BackendShopListSearchParams extends PageSearchParams {
export interface BackendShopItemDto {
createTime: number
deliveryInfo: string
id: number
id?: number
imageUrl: string
isDelete: null
issueTime: number
......
src/api/common/index.ts
// 常规的接口
// import service from '@/utils/request/index'
// import type { FielItemDto } from './types'
/**
* 获取常规的接口
*/
// export const uploadFile = (file: File, onProgress?: (progress: number) => void) => {
// const formData = new FormData()
// formData.append('file', file)
// return service.request<FielItemDto>({
// url: '/mobiles/file-upload/singleUpload',
// method: 'POST',
// data: formData,
// onUploadProgress: (progressEvent) => {
// const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1))
// onProgress?.(percentCompleted)
// },
// })
// }
import axios, { type AxiosRequestConfig } from 'axios'
import CryptoJS from 'crypto-js'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import type { UploadFileResponseItem, ChunkCheckResponse } from './types'
const OA_UPLOAD_CHUNK_BASE_URL = 'https://oa.yswg.com.cn:8085'
const OA_UPLOAD_COMMON_BASE_URL = 'http://47.112.96.71:8082'
const CHUNK_UPLOAD_THRESHOLD = 10 * 1024 * 1024
const CHUNK_SIZE = 5 * 1024 * 1024
const MAX_CONCURRENT_UPLOADS = 3
const CHUNK_API_AUTH_SECRET = '4821-7395-1642-8053-2971-5604-9182-4307'
function hashBufferMD5(buffer: ArrayBuffer): string {
const wordArray = CryptoJS.lib.WordArray.create(new Uint8Array(buffer))
return CryptoJS.MD5(wordArray).toString(CryptoJS.enc.Hex)
}
function readSlice(file: File, start: number, end: number): Promise<ArrayBuffer> {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = (event) => resolve(event.target?.result as ArrayBuffer)
reader.onerror = () => reject(reader.error ?? new Error('读取文件分片失败'))
reader.readAsArrayBuffer(file.slice(start, end))
})
}
// 返回一个由文件名 + 头部 + 尾部 + 中间抽样共同生成的综合指纹 用于检查文件是否存在 hash不耗事件 主要等待异步io耗时间
// 4GB的视频耗时30s大概
async function fileHashHeadTailMiddle(file: File, chunkSize = 1024 * 1024) {
const fileSize = file.size
const finalHashes: string[] = []
// 对文件名做md5加密
const fileName = file.name.split('_').slice(0, -1).join('_') || file.name
finalHashes.push(CryptoJS.MD5(fileName).toString(CryptoJS.enc.Hex))
// 读取文件头做md5加密
const headBuffer = await readSlice(file, 0, Math.min(chunkSize, fileSize))
finalHashes.push(hashBufferMD5(headBuffer))
// 读取文件尾做md5加密
const tailSize = Math.min(chunkSize, fileSize)
const tailBuffer = await readSlice(file, fileSize - tailSize, fileSize)
finalHashes.push(hashBufferMD5(tailBuffer))
// 循环读取文件中间的部分 然后部分做md5加密
if (fileSize > 2 * chunkSize) {
let offset = chunkSize
while (offset < fileSize - chunkSize) {
const size = Math.min(chunkSize, fileSize - chunkSize - offset)
const buffer = await readSlice(file, offset, offset + size)
const u8 = new Uint8Array(buffer)
const piece = new Uint8Array(10)
// 取前5个字节和后5个字节做md5加密 计算时间比较短
piece.set(u8.slice(0, Math.min(5, u8.length)), 0)
piece.set(u8.slice(Math.max(u8.length - 5, 0)), 5)
finalHashes.push(hashBufferMD5(piece.buffer))
offset += size
}
}
// 将所有md5加密后的结果拼接起来 然后做md5加密
return CryptoJS.MD5(finalHashes.join('')).toString(CryptoJS.enc.Hex)
}
// 将文件进行分片 返回一个Blob数组
function createChunks(file: File, chunkSize: number) {
const chunks: Blob[] = []
let start = 0
while (start < file.size) {
const end = Math.min(start + chunkSize, file.size)
chunks.push(file.slice(start, end))
start = end
}
return chunks
}
// 分片上传文件
/**
* 暂时调用oa正式接口
* 第 1 步：给文件生成一个 hash
* 第 2 步：调用 check 询问服务端当前状态
* 第 3 步：根据 check 结果决定是否秒传 或者 断点续传 或者 正常分片上传
* 第 4 步：把大文件切成多个分片
* 第 5 步：创建多个并发 worker，每个 worker 循环领取分片任务 进行分片上传
* 第 6 步：所有分片都上传完成后，通知服务端合并
* 第 7 步：如果文件存在，则合并文件
*/
import axios, { type AxiosRequestConfig } from 'axios'
type UploadFileResponseItem = {
createTime: string
createUser: number
fileBucket: string
fileId: string
fileName: string
filePath: string
fileSizeKb: number
fileSuffix: string
finalName: string
realPath: string
updateTime: string
updateUser: string
async function uploadFileByChunks(
file: File,
options: {
onProgress?: (progress: number) => void
},
signal: AbortSignal,
): Promise<UploadFileResponseItem> {
const userStore = useUserStore()
const { chunkApiAuthToken } = storeToRefs(userStore)
const { onProgress } = options
const fileHash = await fileHashHeadTailMiddle(file)
const fileSuffix = file.name.includes('.') ? file.name.slice(file.name.lastIndexOf('.')) : ''
const checkResponse = await axios.post<{ data: ChunkCheckResponse }>(
`${OA_UPLOAD_CHUNK_BASE_URL}/mobiles/file-upload/check`,
{
hash: fileHash,
fileName: file.name,
fileSize: file.size,
fileSuffx: fileSuffix,
},
{ signal, headers: { authorization: chunkApiAuthToken.value } },
)
// 秒传服务检查文件是否存在
const checkData = checkResponse.data.data
if (checkData.status === 200 && checkData.fileUrl) {
onProgress?.(100)
return {
fileId: fileHash,
fileName: file.name,
filePath: checkData.fileUrl,
finalName: file.name,
} as UploadFileResponseItem
}
const chunks = createChunks(file, CHUNK_SIZE)
const totalChunks = chunks.length
// 断点续传 记录已经上传的片数
const uploadedSet = new Set<number>(
Array.isArray(checkData.chunkNumbers)
? checkData.chunkNumbers
.map((item) => Number(item))
.filter((item) => Number.isInteger(item) && item >= 0)
: [],
)
const updateProgress = () => {
const progress = totalChunks > 0 ? Math.floor((uploadedSet.size / totalChunks) * 100) : 0
onProgress?.(progress)
}
// 有可能部分已经上传过了直接更新一次上传进度
updateProgress()
// 上传单个分片
const uploadChunk = async (chunk: Blob, index: number) => {
const formData = new FormData()
formData.append('fileId', fileHash)
formData.append('filePart', chunk, file.name)
formData.append('chunkNumber', String(index))
await axios.post(`${OA_UPLOAD_CHUNK_BASE_URL}/mobiles/file-upload/chunk`, formData, {
signal,
headers: {
'Content-Type': 'multipart/form-data',
authorization: chunkApiAuthToken.value,
},
})
uploadedSet.add(index)
updateProgress()
}
let nextIndex = 0
const worker = async () => {
// 遍历所有分片 如果已经上传过了就跳过 否则上传
// 相当于开了 3个while死循环 同时上传文件 只有等3个线程都上传完了 才结束
// 总有某个 worker 在自己的异步任务完成后恢复执行，然后继续进入下一轮 while，领取新的分片任务。
while (nextIndex < totalChunks) {
const currentIndex = nextIndex
nextIndex += 1
if (uploadedSet.has(currentIndex)) continue
await uploadChunk(chunks[currentIndex]!, currentIndex)
}
}
// 同时开了 3 个异步 worker，每个 worker 里面都有一个 while 循环，不断去“领取下一个还没处理的分片”。
await Promise.all(
Array.from({ length: Math.min(MAX_CONCURRENT_UPLOADS, totalChunks) }, () => worker()),
)
const finishFormData = new FormData()
finishFormData.set('fileName', file.name)
finishFormData.set('fileId', fileHash)
finishFormData.set('chunkTotalCount', String(totalChunks))
// 上传完成 通知后端文件上传完成
const finishResponse = await axios.post<{ data: { fileUrl: string } }>(
`${OA_UPLOAD_CHUNK_BASE_URL}/mobiles/file-upload/finish`,
finishFormData,
{
signal,
headers: {
'Content-Type': 'multipart/form-data',
authorization: chunkApiAuthToken.value,
},
},
)
onProgress?.(100)
return {
fileId: fileHash,
fileName: file.name,
filePath: finishResponse.data.data.fileUrl,
finalName: file.name,
} as UploadFileResponseItem
}
// 单个文件上传
// 上传文件 10mb以上用nas分片 10mb以下正常上传
export const uploadFile = (
file: File,
options: {
......@@ -47,29 +225,60 @@ export const uploadFile = (
cancel: () => void
promise: Promise<UploadFileResponseItem>
} => {
const formData = new FormData()
formData.append('fileList', file)
const { onProgress } = options
const controller = new AbortController()
const axiosOptions: AxiosRequestConfig = {
signal: controller.signal,
}
const isChunkUpload = file.size > CHUNK_UPLOAD_THRESHOLD
if (onProgress) {
axiosOptions.onUploadProgress = (progressEvent) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1))
onProgress?.(percentCompleted)
}
}
const promise = isChunkUpload
? uploadFileByChunks(file, options, controller.signal)
: (() => {
// 用IIFE包裹直接返回promise
const formData = new FormData()
formData.append('fileList', file)
const axiosOptions: AxiosRequestConfig<FormData> = {
signal: controller.signal,
}
if (onProgress) {
axiosOptions.onUploadProgress = (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / (progressEvent.total || 1),
)
onProgress(percentCompleted)
}
}
return axios
.post(`${OA_UPLOAD_COMMON_BASE_URL}/mobiles/uploadFile`, formData, axiosOptions)
.then((data) => data.data.data[0] as UploadFileResponseItem)
})()
return {
cancel: () => {
controller.abort()
},
promise: axios
.post('http://47.112.96.71:8082/mobiles/uploadFile', formData, axiosOptions)
.then((data) => data.data.data[0] as UploadFileResponseItem),
promise,
}
}
export const getTimestamp = async () => {
const {
data: { data: timestamp },
} = await axios.get(`${OA_UPLOAD_CHUNK_BASE_URL}/api/auth/getTime`)
return timestamp
}
export const getChunkApiAuthToken = async (weChatId: string) => {
const timestamp = await getTimestamp()
const rawStr = CHUNK_API_AUTH_SECRET + timestamp
const {
data: { data },
} = await axios.post(`${OA_UPLOAD_CHUNK_BASE_URL}/api/auth/getToken`, {
timestamp,
weChatId,
secret: CryptoJS.MD5(rawStr).toString(),
})
return data.token as string
}
src/api/common/types.ts
......@@ -6,3 +6,24 @@ export interface FielItemDto {
msg: string
status: number
}
export interface UploadFileResponseItem {
createTime: string
createUser: number
fileBucket: string
fileId: string
fileName: string
filePath: string
fileSizeKb: number
fileSuffix: string
finalName: string
realPath: string
updateTime: string
updateUser: string
}
export interface ChunkCheckResponse {
status: number
fileUrl?: string
chunkNumbers?: number[]
}
src/components/common/ArticleContent/index.vue
......@@ -116,9 +116,7 @@
<p class="text-sm text-gray-500 mt-1">
{{ dayjs((articleDetail?.createTime || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}
· {{ articleDetail?.viewCount || 0 }} 阅读
<span v-if="!articleDetail?.isOfficialAccount"
>· {{ articleDetail?.region || 0 }}</span
>
<span v-if="articleDetail?.region">· {{ articleDetail?.region }}</span>
</p>
</div>
<!-- 再次编辑按钮 -->
......
src/components/common/Comment/index.vue
......@@ -174,8 +174,7 @@
<span
>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<span>·</span>
<span class="text-gray-500">{{ item.region }}</span>
<span v-if="item.region" class="text-gray-500">·{{ item.region }}</span>
</span>
<div class="flex gap-2 items-center hover:text-blue-500 transition-colors">
<div
......@@ -253,8 +252,9 @@
dayjs(child.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}}
</span>
<span>·</span>
<span class="text-gray-500">{{ child.region }}</span>
<span v-if="child.region" class="text-gray-500"
>·{{ child.region }}</span
>
</span>
<div class="flex gap-2 items-center hover:text-blue-500">
<div
......
src/components/common/CommentListDialog/index.vue
......@@ -73,8 +73,10 @@
</div>
<div class="text-sm text-gray-500 flex items-center gap-2">
<span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ parentComment.region }}</span>
<span>{{ dayjs(parentComment.createTime * 1000).format('MM-DD HH:mm') }}</span>
<span v-if="parentComment.region" class="text-xs text-gray-500"
>·{{ parentComment.region }}</span
>
</div>
</div>
</div>
......@@ -145,8 +147,8 @@
</div>
<div class="text-[14px] text-gray-500 flex items-center gap-2">
<span>{{ dayjs(item.createTime * 1000).format('MM-DD HH:mm') }}</span> ·
<span class="text-xs text-gray-500">{{ item.region }}</span>
<span>{{ dayjs(item.createTime * 1000).format('MM-DD HH:mm') }}</span>
<span v-if="item.region" class="text-xs text-gray-500">·{{ item.region }}</span>
</div>
<!-- 内嵌回复框 -->
......@@ -250,7 +252,7 @@ const emit = defineEmits<{
// Store
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const currentUserAvatar = computed(() => userInfo.value.hiddenAvatar)
const currentUserAvatar = computed(() => userInfo.value.avatar)
// State
const visible = ref(false)
......
src/components/common/UploadEmojiIcon/index.vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import emojis from '@/utils/emoji/face.json'
import yayas from '@/utils/emoji/yaya.json'
import type { IEmoji } from '@/utils/emoji/type'
const emit = defineEmits<{
selectEmoji: [emoji: IEmoji]
}>()
type EmojiTab = 'face' | 'yaya'
const activeTab = ref<EmojiTab>('face')
const transitionName = ref('emoji-slide-left')
const emojiTabs: Array<{
key: EmojiTab
label: string
list: Array<Pick<IEmoji, 'name' | 'url' | 'group'>>
}> = [
{
key: 'face',
label: '默认表情',
list: emojis,
},
{
key: 'yaya',
label: 'YAYA表情',
list: yayas,
},
]
const currentEmojiList = computed(() => {
return emojiTabs.find((tab) => tab.key === activeTab.value)?.list ?? []
})
const switchTab = (nextTab: EmojiTab) => {
if (nextTab === activeTab.value) return
const currentIndex = emojiTabs.findIndex((tab) => tab.key === activeTab.value)
const nextIndex = emojiTabs.findIndex((tab) => tab.key === nextTab)
transitionName.value = nextIndex > currentIndex ? 'emoji-slide-left' : 'emoji-slide-right'
activeTab.value = nextTab
}
</script>
<template>
<div
class="w-8 h-8 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg flex items-center justify-center"
class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-all hover:bg-orange-50 hover:text-orange-500"
>
<el-popover placement="bottom" trigger="click" width="384">
<el-popover placement="bottom" trigger="click" :width="384" popper-class="emoji-popover">
<template #reference>
<el-icon size="20" @mousedown.prevent>
<svg-icon name="icon_face" class="cursor-pointer"
/></el-icon>
<svg-icon name="icon_face" class="cursor-pointer" />
</el-icon>
</template>
<!-- 表情面板 -->
<el-scrollbar class="h-50">
<div class="flex flex-wrap">
<span
v-for="item in emojis"
:key="item.name"
class="cursor-pointer hover:bg-gray-100 rounded p-1 flex items-center justify-center"
@click="emit('selectEmoji', item)"
<div class="emoji-panel">
<div class="emoji-tabs">
<button
v-for="tab in emojiTabs"
:key="tab.key"
type="button"
class="emoji-tab"
:class="{ 'emoji-tab--active': activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<img :src="item.url" alt="" class="w-6 h-6" />
</span>
{{ tab.label }}
</button>
</div>
</el-scrollbar>
<el-scrollbar class="emoji-scrollbar">
<transition :name="transitionName" mode="out-in">
<div :key="activeTab" class="emoji-grid">
<div v-for="item in currentEmojiList" :key="item.name">
<el-popover
v-if="item.group === 'yaya'"
placement="top"
trigger="hover"
:offset="10"
:show-arrow="false"
:popper-style="{
height: '150px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}"
>
<el-image :src="item.url" :alt="item.name" class="h-full w-full object-contain" />
<template #reference>
<button
type="button"
class="emoji-item"
:title="item.name"
@click="emit('selectEmoji', item as IEmoji)"
>
<img
:src="item.url"
:alt="item.name"
class="h-6 w-6 object-contain"
:class="{ 'h-8 w-8': item.group === 'yaya' }"
/>
</button>
</template>
</el-popover>
<button
v-else
type="button"
class="emoji-item"
:title="item.name"
@click="emit('selectEmoji', item as IEmoji)"
>
<img
:src="item.url"
:alt="item.name"
class="h-6 w-6 object-contain"
:class="{ 'h-8 w-8': item.group === 'yaya' }"
/>
</button>
</div>
</div>
</transition>
</el-scrollbar>
</div>
</el-popover>
</div>
</template>
<style scoped></style>
<style scoped>
.emoji-tabs {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
padding: 0 6px 8px;
border-bottom: 1px solid #f5f5f5;
}
.emoji-tab {
position: relative;
border: 0;
background: transparent;
color: #9ca3af;
border-radius: 0;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.emoji-tab:hover {
color: #f97316;
}
.emoji-tab--active {
color: #ea580c;
transform: none;
}
.emoji-tab--active::after {
content: '';
position: absolute;
left: 0;
bottom: -9px;
width: 100%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}
.emoji-scrollbar {
height: 188px;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
padding: 2px 4px 10px;
}
.emoji-slide-left-enter-active,
.emoji-slide-left-leave-active,
.emoji-slide-right-enter-active,
.emoji-slide-right-leave-active {
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.emoji-slide-left-enter-from,
.emoji-slide-right-leave-to {
opacity: 0;
transform: translateX(18px);
}
.emoji-slide-left-leave-to,
.emoji-slide-right-enter-from {
opacity: 0;
transform: translateX(-18px);
}
.emoji-slide-left-enter-to,
.emoji-slide-left-leave-from,
.emoji-slide-right-enter-to,
.emoji-slide-right-leave-from {
opacity: 1;
transform: translateX(0);
}
.emoji-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34px;
border: 0;
border-radius: 10px;
background: #fff;
cursor: pointer;
transition:
transform 0.18s ease,
background-color 0.18s ease,
box-shadow 0.18s ease;
}
.emoji-item:hover {
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
box-shadow: 0 6px 14px rgb(251 146 60 / 16%);
transform: translateY(-1px);
}
</style>
src/components/common/UploadVideo/index.vue
......@@ -157,18 +157,17 @@ const startUpload = async () => {
uploadError.value = ''
uploadProgress.value = 0
// 调用你的上传方法
// 先提案获取视频的原信息 用本地blob
const blob = URL.createObjectURL(currentFile.value)
const metadataPromise = getVideoMetadata(blob)
const { promise, cancel } = uploadFileApi(currentFile.value, {
onProgress: (progress) => {
uploadProgress.value = progress
},
})
cancelUploadController = cancel
const data = await promise
// 获取视频元数据
const metadata = await getVideoMetadata(data.filePath)
// 并行等待
const [data, metadata] = await Promise.all([promise, metadataPromise])
// 根据你的 API 返回结构调整
const videoData: VideoInfo = {
......
src/stores/user.ts
import { defineStore } from 'pinia'
import { loginByCode, loginByEmail, refreshTokenApi } from '@/api/login'
import { loginByCode, loginByEmail, refreshTokenApi, getChunkApiAuthToken } from '@/api'
import type { LoginResponseDto } from '@/api/login/types'
import { useStorage } from '@vueuse/core'
/**
* 关于用户的store
*/
export const useUserStore = defineStore('user', () => {
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}') as LoginResponseDto)
const token = ref(localStorage.getItem('token') || '')
const refreshToken = ref(localStorage.getItem('refreshToken') || '')
const userInfo = useStorage<LoginResponseDto>('userInfo', {} as LoginResponseDto)
const token = useStorage<string>('token', '')
const refreshToken = useStorage<string>('refreshToken', '')
const chunkApiAuthToken = useStorage<string>('chunkApiAuthToken', '')
// 获取用户信息
const fetchUserInfo = async () => {
// {
......@@ -42,6 +44,10 @@ export const useUserStore = defineStore('user', () => {
const { data } = await loginByCode({ code, isCodeLogin, cutEmail })
console.log(data)
setUserInfoAndToken(data)
// 同时获取关于分片的token
const token = await getChunkApiAuthToken(data.account)
setChunkApiAuthToken(token)
}
const getNewToken = async () => {
const { data } = await refreshTokenApi(refreshToken.value)
......@@ -72,6 +78,10 @@ export const useUserStore = defineStore('user', () => {
// session存一份
localStorage.setItem('token', str)
}
const setChunkApiAuthToken = (str: string) => {
chunkApiAuthToken.value = str
localStorage.setItem('chunkApiAuthToken', str)
}
const setRefreshToken = (str: string) => {
refreshToken.value = str
localStorage.setItem('refreshToken', str)
......@@ -83,10 +93,12 @@ export const useUserStore = defineStore('user', () => {
return {
userInfo,
token,
chunkApiAuthToken,
fetchUserInfo,
setUserInfo,
setToken,
getUserInfoByCode,
setChunkApiAuthToken,
refreshToken,
getNewToken,
clearAllUserInfo,
......
src/utils/emoji/face.json
......@@ -2,601 +2,501 @@
{
"url": "https://www.emojiall.com/images/60/skype/1f600.png",
"name": "[face_嘿嘿]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f603.png",
"name": "[face_哈哈]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f604.png",
"name": "[face_大笑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f601.png",
"name": "[face_嘻嘻]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f606.png",
"name": "[face_斜眼笑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f605.png",
"name": "[face_苦笑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f923.png",
"name": "[face_笑得满地打滚]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f602.png",
"name": "[face_笑哭了]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f642.png",
"name": "[face_呵呵]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f643.png",
"name": "[face_倒脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f609.png",
"name": "[face_眨眼]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60a.png",
"name": "[face_羞涩微笑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f607.png",
"name": "[face_微笑天使]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f970.png",
"name": "[face_喜笑颜开]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60d.png",
"name": "[face_花痴]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f929.png",
"name": "[face_好崇拜哦]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f617.png",
"name": "[face_亲亲]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f61a.png",
"name": "[face_羞涩亲亲]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f619.png",
"name": "[face_微笑亲亲]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60b.png",
"name": "[face_好吃]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f61b.png",
"name": "[face_吐舌]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f61c.png",
"name": "[face_单眼吐舌]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92a.png",
"name": "[face_滑稽]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f911.png",
"name": "[face_发财]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f917.png",
"name": "[face_抱抱]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92d.png",
"name": "[face_不说]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92b.png",
"name": "[face_安静的脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f914.png",
"name": "[face_想一想]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f910.png",
"name": "[face_闭嘴]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f928.png",
"name": "[face_挑眉]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f610.png",
"name": "[face_冷漠]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f611.png",
"name": "[face_无语]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f636.png",
"name": "[face_沉默]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60f.png",
"name": "[face_得意]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f612.png",
"name": "[face_不高兴]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f644.png",
"name": "[face_翻白眼]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f62c.png",
"name": "[face_龇牙咧嘴]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f925.png",
"name": "[face_说谎]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60c.png",
"name": "[face_松了口气]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f614.png",
"name": "[face_沉思]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f62a.png",
"name": "[face_困]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f634.png",
"name": "[face_睡着了]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f637.png",
"name": "[face_感冒]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f912.png",
"name": "[face_发烧]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f915.png",
"name": "[face_受伤]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f922.png",
"name": "[face_恶心]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92e.png",
"name": "[face_呕吐]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f975.png",
"name": "[face_脸发烧]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f976.png",
"name": "[face_冷脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f974.png",
"name": "[face_头昏眼花]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92f.png",
"name": "[face_爆炸头]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f920.png",
"name": "[face_牛仔帽脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f973.png",
"name": "[face_聚会笑脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f60e.png",
"name": "[face_墨镜笑脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f913.png",
"name": "[face_书呆子脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f9d0.png",
"name": "[face_带单片眼镜的脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f615.png",
"name": "[face_困扰]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f641.png",
"name": "[face_微微不满]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/2639-fe0f.png",
"name": "[face_不满]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f62f.png",
"name": "[face_缄默]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f632.png",
"name": "[face_震惊]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f633.png",
"name": "[face_脸红]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f97a.png",
"name": "[face_恳求的脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f626.png",
"name": "[face_啊]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f627.png",
"name": "[face_极度痛苦]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f628.png",
"name": "[face_害怕]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f630.png",
"name": "[face_冷汗]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f625.png",
"name": "[face_失望但如释重负]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f622.png",
"name": "[face_哭]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f62d.png",
"name": "[face_放声大哭]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f631.png",
"name": "[face_吓死了]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f616.png",
"name": "[face_困惑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f61e.png",
"name": "[face_失望]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f613.png",
"name": "[face_汗]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f629.png",
"name": "[face_累死了]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f62b.png",
"name": "[face_累]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f971.png",
"name": "[face_打呵欠]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f624.png",
"name": "[face_傲慢]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f621.png",
"name": "[face_怒火中烧]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f620.png",
"name": "[face_生气]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f92c.png",
"name": "[face_嘴上有符号的脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f608.png",
"name": "[face_恶魔微笑]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f47f.png",
"name": "[face_生气的恶魔]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f480.png",
"name": "[face_头骨]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/2620-fe0f.png",
"name": "[face_骷髅]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f4a9.png",
"name": "[face_大便]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f921.png",
"name": "[face_小丑脸]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f479.png",
"name": "[face_食人魔]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f47a.png",
"name": "[face_小妖精]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f47b.png",
"name": "[face_鬼]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f47d.png",
"name": "[face_外星人]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f47e.png",
"name": "[face_外星怪物]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f916.png",
"name": "[face_机器人]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f63a.png",
"name": "[face_大笑的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f639.png",
"name": "[face_笑出眼泪的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f63b.png",
"name": "[face_花痴的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f63c.png",
"name": "[face_奸笑的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f63d.png",
"name": "[face_亲亲猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f640.png",
"name": "[face_疲倦的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
},
{
"url": "https://www.emojiall.com/images/60/skype/1f63f.png",
"name": "[face_哭泣的猫]",
"group": "face",
"className": "emoji_small"
"group": "face"
}
]
src/utils/emoji/index.ts
import emojis from './face.json'
import yayas from './yaya.json'
type EmojiAsset = {
name: string
url: string
group: string
}
const emojiList: EmojiAsset[] = [...emojis, ...yayas]
function escapeHTML(str: string) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
......@@ -9,18 +18,19 @@ export const parseEmoji = (content: string) => {
let html = escapeHTML(content)
emojis.forEach((item) => {
emojiList.forEach((item) => {
const escapedName = item.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const reg = new RegExp(escapedName, 'g')
console.log(item.group)
html = html.replace(
reg,
`<img
src="${item.url}"
alt="${item.name}"
class="${item.className || 'emoji_small'} inline-block align-text-bottom w-6 h-6"
/>`,
class="${item.group === 'yaya' ? 'w-8 h-8' : 'w-6 h-6'}"
/>`,
)
})
......
src/utils/emoji/yaya.json 0 → 100644
[
{
"name": "[YAYA_OK]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842153149.png",
"group": "yaya"
},
{
"name": "[YAYA_OK1]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842183051.png",
"group": "yaya"
},
{
"name": "[YAYA_OKK]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842204358.png",
"group": "yaya"
},
{
"name": "[YAYA_拜托]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842337245.png",
"group": "yaya"
},
{
"name": "[YAYA_点赞]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842370496.png",
"group": "yaya"
},
{
"name": "[YAYA_非常感谢]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842403468.png",
"group": "yaya"
},
{
"name": "[YAYA_恭喜]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842433720.png",
"group": "yaya"
},
{
"name": "[YAYA_恭喜1]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842456906.png",
"group": "yaya"
},
{
"name": "[YAYA_好滴]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842482423.png",
"group": "yaya"
},
{
"name": "[YAYA_加油]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842512339.png",
"group": "yaya"
},
{
"name": "[YAYA_焦急]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842540763.png",
"group": "yaya"
},
{
"name": "[YAYA_开心]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842564724.png",
"group": "yaya"
},
{
"name": "[YAYA_哭泣]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842593525.png",
"group": "yaya"
},
{
"name": "[YAYA_努力]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842629597.png",
"group": "yaya"
},
{
"name": "[YAYA_谢谢]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842649971.png",
"group": "yaya"
},
{
"name": "[YAYA_亚声人]",
"url": "https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/png/2026/03/30/Common/1774842693166.png",
"group": "yaya"
}
]
src/views/homePage/askTab/index.vue
......@@ -49,6 +49,7 @@
:ref="(e) => (contentRefList[index] = e as HTMLElement)"
class="text-gray-600 text-sm sm:text-base leading-relaxed transition-all duration-300"
:class="{ 'line-clamp-3': !item.isExpand }"
@click="openNewPage(`/questionDetail/${item.id}`)"
>
<template
v-if="
......@@ -83,9 +84,11 @@
<span class="text-xs text-gray-400 hidden sm:inline">{{
dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full mx--1"></div>
<!-- 地区 -->
<span class="text-xs text-gray-400 hidden sm:inline">{{ item.region }}</span>
<template v-if="item.region">
<div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full mx--1"></div>
<!-- 地区 -->
<span class="text-xs text-gray-400 hidden sm:inline">{{ item.region }}</span>
</template>
<div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full mx--1"></div>
<!-- 阅读量 -->
<span class="text-xs text-gray-400 hidden sm:inline">{{ item.viewCount }}阅读</span>
......
src/views/homePage/index.vue
......@@ -416,7 +416,7 @@ import type {
WheelConfigDto,
} from '@/api'
import { TABS_REF_KEY, levelListOptions } from '@/constants'
import { useScrollTop } from '@/hooks'
import { useScrollTop, useMessageBox } from '@/hooks'
import { useQuestionStore, useActivityStore, useYaBiStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { push } from 'notivue'
......@@ -429,6 +429,7 @@ import { useTourStore, useUserStore } from '@/stores'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const isWareHouse = userInfo.value.address.includes('仓库')
const { confirm } = useMessageBox()
const tourStore = useTourStore()
const { shouldShowAskTabTour } = storeToRefs(tourStore)
const breakpoints = useBreakpoints(breakpointsTailwind)
......@@ -551,6 +552,13 @@ const getLotteryPrizesDetail = async () => {
const handleLottery = async () => {
if (!lotteryPrizesDetail.value?.inRegistrationTime)
return push.error(`抽奖通道将于${lotteryPrizesDetail.value?.registrationTimeDesc}开启`)
// 二次确认
await confirm({
title: '提示',
message: '确定参与每日抽奖吗？',
type: 'primary',
})
await userJoinLottery()
getLotteryPrizesDetail()
refreshUserAccountData()
......
src/views/pointsStore/components/exchangeContent.tsx
......@@ -23,10 +23,15 @@ export default function ExchangeContent(
<div class="py-4">
{/* 商品信息卡片 */}
<div class="flex gap-4 p-4 bg-gray-50 rounded-xl mb-5">
<div class="w-24 h-24 bg-white rounded-xl overflow-hidden shadow-sm shrink-0
flex items-center justify-center p-2">
<img src={item.imageUrl} alt={item.name}
class="max-w-full max-h-full object-contain rounded-lg" />
<div
class="w-24 h-24 bg-white rounded-xl overflow-hidden shadow-sm shrink-0
flex items-center justify-center p-2"
>
<img
src={item.imageUrl}
alt={item.name}
class="max-w-full max-h-full object-contain rounded-lg"
/>
</div>
<div class="flex flex-col justify-center min-w-0 gap-1.5">
<div class="text-base font-semibold text-gray-800 line-clamp-2">{item.name}</div>
......@@ -82,7 +87,9 @@ export default function ExchangeContent(
<span class="text-sm text-gray-500">
合计扣除
{modelValue.num > 1 && (
<span class="text-gray-400 text-xs ml-1">({item.price} × {modelValue.num})</span>
<span class="text-gray-400 text-xs ml-1">
({item.price} × {modelValue.num})
</span>
)}
</span>
<div class="flex items-baseline gap-0.5">
......
src/views/publishLongArticle/index.vue
......@@ -302,6 +302,18 @@
/>
</el-form-item>
</div>
<!-- 针对官方账号新增是否显示ip -->
<template v-if="userInfo.isOfficialAccount">
<el-form-item label="IP信息" prop="regionHide">
<el-switch
v-model="form.regionHide"
:active-value="BooleanFlag.YES"
:inactive-value="BooleanFlag.NO"
active-text="隐藏地区"
inactive-text="显示地区"
/>
</el-form-item>
</template>
</el-form>
<!-- 抽屉底部按钮 -->
......@@ -389,7 +401,7 @@ const [form, resetForm] = useResetData({
sendType: SendTypeEnum.IMMEDIATE,
sendTime: '',
releaseStatus: ReleaseStatusTypeEnum.PUBLISH,
regionHide: BooleanFlag.NO,
isPushAll: BooleanFlag.YES,
// 推送设置
pushType: SendTypeEnum.IMMEDIATE,
......@@ -431,7 +443,7 @@ const rules: Record<string, FormItemRule[]> = {
isRecommend: [{ required: true, message: '是否推荐', trigger: 'trigger' }],
isRelateColleague: [{ required: true, message: '是否同步同事吧', trigger: 'trigger' }],
relateColumnId: [{ required: true, message: '请选择对应的栏目', trigger: 'trigger' }],
regionHide: [{ required: true, message: '请选择是否隐藏IP信息', trigger: 'trigger' }],
// 推送设置
pushType: [{ required: true, message: '请选择推送类型', trigger: 'trigger' }],
pushTime: [{ required: true, message: '请选择推送时间', trigger: 'trigger' }],
......@@ -587,6 +599,7 @@ onActivated(async () => {
sendTime,
tagIdList,
regionHide,
} = data
form.value = {
......@@ -599,6 +612,7 @@ onActivated(async () => {
sendType,
sendTime,
id,
regionHide,
}
// 2回显主副标签
......
src/views/publishVideo/index.vue
......@@ -136,6 +136,23 @@
<!-- 新增推送设置 -->
<template v-if="userInfo.isOfficialAccount">
<!-- 是否隐藏地区 -->
<div class="mb-8">
<el-form-item prop="regionHide">
<label class="block text-sm font-semibold text-gray-700 mb-3">
是否隐藏地区
</label>
<div class="w-full flex items-center gap-2">
<el-switch
v-model="form.regionHide"
:active-value="BooleanFlag.YES"
:inactive-value="BooleanFlag.NO"
active-text="隐藏地区"
inactive-text="显示地区"
/>
</div>
</el-form-item>
</div>
<div class="mb-8">
<el-form-item>
<label class="block text-sm font-semibold text-gray-700 mb-3"> 推送对象 </label>
......@@ -292,11 +309,12 @@
width="800px"
:close-on-click-modal="false"
>
<!-- 这个用blob是因为 转为canvas 防止跨域污染 -->
<!-- 转为canvas 防止跨域污染 crossorigin="anonymous" -->
<div v-if="locationVideoBlolUrl" class="space-y-6">
<!-- 视频预览 -->
<div class="relative">
<video
crossorigin="anonymous"
ref="videoRef"
:src="locationVideoBlolUrl"
class="w-full max-h-96 rounded-lg bg-black"
......@@ -372,7 +390,7 @@ import SelectTags from '@/components/common/SelectTags/index.vue'
import type { TagItemDto, AddOrUpdateVideoDto } from '@/api'
import { useVideoStore, useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { selectDepOrUser, fetchOssBlob } from '@/utils'
import { selectDepOrUser } from '@/utils'
import BackButton from '@/components/common/BackButton/index.vue'
import { push } from 'notivue'
......@@ -404,7 +422,7 @@ const [form, resetData] = useResetData({
faceUrl: '', // 封面URL
videoDuration: '',
relateColumnId: '' as string | number,
regionHide: BooleanFlag.NO,
isPushAll: BooleanFlag.YES,
// 推送设置
pushType: SendTypeEnum.IMMEDIATE,
......@@ -542,7 +560,7 @@ const rules = {
mainTagId: [{ required: true, message: '请选择主标签', trigger: 'change' }],
faceUrl: [{ required: true, message: '请选择视频封面', trigger: 'change' }],
relateColumnId: [{ required: true, message: '请选择视频栏目', trigger: 'change' }],
regionHide: [{ required: true, message: '请选择是否隐藏地区', trigger: 'trigger' }],
// 推送设置
pushType: [{ required: true, message: '请选择推送类型', trigger: 'trigger' }],
pushTime: [{ required: true, message: '请选择推送时间', trigger: 'trigger' }],
......@@ -610,19 +628,13 @@ const handleSubmit = async (releaseStatus: ReleaseStatusTypeEnum) => {
}
const handleVideoChange = ({
file,
videoDuration,
}: {
file: File
url: string
videoDuration: string
}) => {
if (locationVideoBlolUrl.value) {
URL.revokeObjectURL(locationVideoBlolUrl.value)
}
if (file) {
locationVideoBlolUrl.value = URL.createObjectURL(file)
}
locationVideoBlolUrl.value = form.value.videoUrl
form.value.videoDuration = videoDuration
}
......@@ -645,8 +657,9 @@ onDeactivated(() => {
onActivated(async () => {
if (route.query.id) {
const { data } = await getArticleDetail(route.query.id as string)
const blobUrl = await fetchOssBlob(data.videoUrl)
locationVideoBlolUrl.value = blobUrl
locationVideoBlolUrl.value = data.videoUrl
form.value = {
...form.value,
...data,
......
src/views/questionDetail/index.vue
......@@ -123,8 +123,8 @@
<span class="text-sm text-slate-500 flex items-center gap-1">
{{ dayjs(questionDetail.createTime * 1000).format('YYYY-MM-DD HH:mm') }} ·
<span
v-if="questionDetail?.region"
class="text-sm text-slate-500 flex items-center gap-1"
v-if="!questionDetail?.isOfficialAccount"
>
{{ questionDetail.region }}
·
......@@ -332,8 +332,8 @@
</div>
<div class="text-[14px] text-slate-500 mb-3 flex items-center gap-3">
发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }} ·
{{ answer.region }}
发布于 {{ dayjs(answer.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
<span v-if="answer.region">·{{ answer.region }}</span>
</div>
<!-- 底 部吸附操作栏 -->
......
src/views/videoDetail/index.vue
......@@ -82,7 +82,7 @@
<span class="flex items-center">
{{ formatNumber(videoDetail?.playCount) }}播放
</span>
<span v-if="!videoDetail?.isOfficialAccount" class="flex items-center">
<span v-if="videoDetail?.region" class="flex items-center">
·{{ videoDetail?.region }}
</span>
</div>
......@@ -96,6 +96,7 @@
:src="videoDetail?.videoUrl"
class="aspect-video w-100%"
controls
controlsList="nodownload"
@play="handlePlay"
@pause="handlePause"
@timeupdate="handleTimeUpdate"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment