├── public
    └── favicon.ico
├── src
    ├── assets
    │   ├── logo.png
    │   └── docs
    │   │   └── log.json
    ├── main.scss
    ├── views
    │   ├── fatherContainer.vue
    │   ├── webData.vue
    │   ├── faq.vue
    │   ├── index.vue
    │   ├── about.vue
    │   ├── admin
    │   │   └── hideVideo.vue
    │   ├── log.vue
    │   ├── user
    │   │   ├── rank.vue
    │   │   ├── signin.vue
    │   │   ├── setting.vue
    │   │   └── signup.vue
    │   ├── space
    │   │   └── index.vue
    │   ├── video
    │   │   └── detail.vue
    │   └── member
    │   │   └── upload.vue
    ├── vite-env.d.ts
    ├── store
    │   ├── urlStore.ts
    │   └── userStore.ts
    ├── components
    │   ├── rzm
    │   │   ├── mmvCard.vue
    │   │   └── mmCard.vue
    │   ├── user
    │   │   └── avatar.vue
    │   ├── dataCount.vue
    │   ├── video
    │   │   ├── VideoList.vue
    │   │   ├── VideoGrid.vue
    │   │   └── player.vue
    │   ├── common
    │   │   └── comment.vue
    │   └── navBar.vue
    ├── composables
    │   └── useFormat.ts
    ├── main.ts
    ├── router
    │   └── index.ts
    └── App.vue
├── .prettierrc
├── tailwind.config.js
├── tsconfig.node.json
├── auto-imports.d.ts
├── .gitignore
├── README.md
├── vite.config.ts
├── tsconfig.json
├── .eslintrc.cjs
├── package.json
├── components.d.ts
└── index.html


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rzmaoo/maomao-frontend/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rzmaoo/maomao-frontend/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.scss:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss/base';
2 | @import 'tailwindcss/components';
3 | @import 'tailwindcss/utilities';
4 | 


--------------------------------------------------------------------------------
/src/views/fatherContainer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <router-view></router-view>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "es5",
5 |   "endOfLine": "crlf"
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: [],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/src/views/webData.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <dataCount />
 4 |     <comment type="webdata" class="mt-5"></comment>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | import dataCount from '@/components/dataCount.vue'
10 | </script>
11 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/ban-types */
 2 | /* eslint-disable @typescript-eslint/no-explicit-any */
 3 | /// <reference types="vite/client" />
 4 | 
 5 | declare module '*.vue' {
 6 |   import { DefineComponent } from 'vue'
 7 |   const component: DefineComponent<{}, {}, any>
 8 |   export default component
 9 | }
10 | 


--------------------------------------------------------------------------------
/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // noinspection JSUnusedGlobalSymbols
 5 | // Generated by unplugin-auto-import
 6 | export {}
 7 | declare global {
 8 |   const ElMessage: typeof import('element-plus/es')['ElMessage']
 9 |   const ElNotification: typeof import('element-plus/es')['ElNotification']
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | /yarn.lock
26 | /package-lock.json


--------------------------------------------------------------------------------
/src/store/urlStore.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useUrlStore = defineStore({
 4 |   id: 'urlStore',
 5 | 
 6 |   state: () => ({
 7 |     // apiUrl: 'http://localhost:5000',
 8 |     // cosUrl: 'https://cos.bilirz.com',
 9 |     apiUrl: `${window.location.protocol}//${window.location.host}`,
10 |     // apiUrl: 'https://v.bilirz.com',
11 |     cosUrl: `${window.location.protocol}//${window.location.host}/api/public/cos`,
12 |     faceUrl: `https://cos.bilirz.com`,
13 |   }),
14 | })
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 猫猫站
 2 | 
 3 | ### 写在前面
 4 | 
 5 | 本项目是B站UP主[认真猫](https://space.bilibili.com/256195234)使用Vue3开发的视频网站，仅供[认真猫](https://space.bilibili.com/256195234)学习编程使用。
 6 | 
 7 | 网站功能还非常简单，期待大家的丰富。
 8 | 
 9 | 欢迎加入猫猫站用户与技术QQ群：`542174643`
10 | 
11 | ### TODO
12 | 
13 | 目标
14 | 
15 | - [ ] 用户
16 | 
17 |   - [x] 注册
18 |   - [x] 登录
19 |   - [ ] 个人中心
20 | 
21 | - [ ] 视频
22 | 
23 |   - [x] m3u8
24 |   - [x] 播放量
25 |   - [x] 点赞
26 |   - [ ] 投币
27 |   - [ ] 收藏
28 |   - [x] 弹幕
29 |   - [x] 评论
30 |   - [ ] 转发
31 | 
32 | - [ ] 首页推荐
33 | - [ ] 热门
34 | - [ ] 热搜
35 | 


--------------------------------------------------------------------------------
/src/views/faq.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mmCard title="关于积分">
 4 |       <li>
 5 |         目前，已注册的用户每8小时签到可以获得10点积分和10经验值。消耗积分可以增加等量的经验。
 6 |       </li>
 7 |       <li>消耗积分可以评论、发布视频、修改头像等。</li>
 8 |       <li>
 9 |         发布评论消耗0.2积分，发送弹幕消耗0.2积分，发布视频消耗1积分，修改头像或名字消耗5积分。
10 |       </li>
11 |       <li>视频被点赞可增加10积分，在自己的视频下评论不增加积分。</li>
12 |     </mmCard>
13 |     <comment type="faq" class="mt-5"></comment>
14 |   </div>
15 | </template>
16 | 
17 | <script setup>
18 | import mmCard from '@/components/rzm/mmCard.vue'
19 | </script>
20 | 
21 | <style>
22 | li {
23 |   margin-bottom: 10px;
24 |   font-size: 16px;
25 |   color: #555;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/rzm/mmvCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-card v-ripple="showRipple" flat :style="cardStyle">
 4 |       <slot></slot>
 5 |     </v-card>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup>
10 | import { computed } from 'vue'
11 | 
12 | const props = defineProps({
13 |   showRipple: {
14 |     type: Boolean,
15 |     default: false,
16 |   },
17 |   enableShadow: {
18 |     type: Boolean,
19 |     default: true,
20 |   },
21 | })
22 | 
23 | const cardStyle = computed(() => {
24 |   let baseStyle = 'padding: 20px;'
25 |   if (props.enableShadow) {
26 |     baseStyle += 'box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);'
27 |   }
28 |   return baseStyle
29 | })
30 | </script>
31 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import AutoImport from 'unplugin-auto-import/vite'
 4 | import Components from 'unplugin-vue-components/vite'
 5 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 6 | import vuetify from 'vite-plugin-vuetify'
 7 | 
 8 | export default defineConfig({
 9 |   plugins: [
10 |     vue(),
11 |     vuetify(),
12 |     AutoImport({
13 |       resolvers: [ElementPlusResolver()],
14 |     }),
15 |     Components({
16 |       resolvers: [ElementPlusResolver()],
17 |     }),
18 |   ],
19 |   css: {
20 |     preprocessorOptions: {
21 |       scss: {
22 |         additionalData: `@import "./src/main.scss";`,
23 |       },
24 |     },
25 |   },
26 |   resolve: {
27 |     alias: {
28 |       '@': '/src',
29 |     },
30 |   },
31 | })
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 |     "allowJs": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "noEmit": true,
16 |     "jsx": "preserve",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 | 
24 |     "types": ["element-plus/global"]
25 |   },
26 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
27 |   "references": [{ "path": "./tsconfig.node.json" }]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/store/userStore.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-explicit-any */
 2 | import { defineStore } from 'pinia'
 3 | import axios from 'axios'
 4 | import { useUrlStore } from './urlStore'
 5 | 
 6 | export const useUserStore = defineStore({
 7 |   id: 'userStore',
 8 | 
 9 |   state: () => ({
10 |     sessionData: {
11 |       signin: null,
12 |       status: null,
13 |       isload: false,
14 |     },
15 |   }),
16 | 
17 |   actions: {
18 |     async fetchSessionData() {
19 |       const urlStore = useUrlStore()
20 | 
21 |       try {
22 |         const response = await axios.get(
23 |           `${urlStore.apiUrl}/api/user/session/get`
24 |         )
25 | 
26 |         this.setSessionData(response.data)
27 |       } catch (error) {
28 |         console.error('获取session数据出错：', error)
29 |       }
30 |     },
31 | 
32 |     setSessionData(data: any) {
33 |       this.sessionData = data
34 |     },
35 |   },
36 | })
37 | 


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <VideoList />
 4 | 
 5 |     <comment type="index"></comment>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup>
10 | import { ref, onMounted } from 'vue'
11 | import VideoList from '@/components/video/VideoList.vue'
12 | import comment from '@/components/common/comment.vue'
13 | 
14 | const showTencentTip = ref(true)
15 | const showQQTip = ref(true)
16 | 
17 | // 在组件加载时检查localStorage
18 | onMounted(() => {
19 |   const tencentCloseTime = localStorage.getItem('tencentTipCloseTime')
20 |   const qqCloseTime = localStorage.getItem('qqTipCloseTime')
21 |   const now = Date.now()
22 |   const twoDays = 72 * 60 * 60 * 1000 // 48小时
23 | 
24 |   if (tencentCloseTime && now - tencentCloseTime < twoDays) {
25 |     showTencentTip.value = false
26 |   }
27 |   if (qqCloseTime && now - qqCloseTime < twoDays) {
28 |     showQQTip.value = false
29 |   }
30 | })
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/rzm/mmCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-card flat class="rzm-card-title-card custom-shadow">
 4 |       <span>{{ title }}</span>
 5 |     </v-card>
 6 |     <div class="rzm-card-line"></div>
 7 |     <v-card flat style="padding: 15px" class="custom-shadow">
 8 |       <slot></slot>
 9 |     </v-card>
10 |   </div>
11 | </template>
12 | <script>
13 | export default {
14 |   props: {
15 |     title: {
16 |       type: String,
17 |       required: true,
18 |     },
19 |   },
20 | }
21 | </script>
22 | <style scoped>
23 | .rzm-card-title-card {
24 |   border-radius: 5px;
25 |   padding: 3px;
26 | }
27 | 
28 | .rzm-card-title-card span {
29 |   padding: 10px;
30 |   color: #61aefb;
31 |   font-weight: 600;
32 |   font-size: 20px;
33 | }
34 | 
35 | .rzm-card-line {
36 |   border: 2px solid #61aefb;
37 |   border-radius: 5px;
38 |   margin-top: 2px;
39 |   margin-bottom: 2px;
40 | }
41 | 
42 | .custom-shadow {
43 |   box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2021: true,
 5 |   },
 6 |   extends: [
 7 |     'eslint:recommended',
 8 |     'plugin:vue/recommended',
 9 |     'plugin:@typescript-eslint/recommended',
10 |     'plugin:prettier/recommended',
11 |   ],
12 |   overrides: [
13 |     {
14 |       env: {
15 |         node: true,
16 |       },
17 |       files: ['.eslintrc.{js,cjs}'],
18 |       parserOptions: {
19 |         sourceType: 'script',
20 |       },
21 |     },
22 |   ],
23 |   parser: 'vue-eslint-parser',
24 |   parserOptions: {
25 |     parser: '@typescript-eslint/parser', // TypeScript 解析器
26 |     ecmaVersion: 2020,
27 |     sourceType: 'module',
28 |     ecmaFeatures: {
29 |       jsx: true,
30 |     },
31 |   },
32 |   plugins: [
33 |     'vue',
34 |     '@typescript-eslint', // TypeScript
35 |     'prettier', // 启用 Prettier 插件
36 |   ],
37 |   rules: {
38 |     'vue/multi-word-component-names': 'off',
39 |     'prettier/prettier': 'error', // 确保代码风格一致性
40 |   },
41 |   globals: {
42 |     ElNotification: 'readonly',
43 |     ElMessage: 'readonly',
44 |   },
45 | }
46 | 


--------------------------------------------------------------------------------
/src/composables/useFormat.ts:
--------------------------------------------------------------------------------
 1 | type Categories = {
 2 |   [key: number]: string
 3 | }
 4 | 
 5 | // 将时间戳改为 2023-01-01 12:00:00 格式
 6 | export default function useFormat() {
 7 |   const formatTimestamp = (timestamp: number): string => {
 8 |     const date = new Date(timestamp * 1000)
 9 |     const year = date.getFullYear()
10 |     const month = (date.getMonth() + 1).toString().padStart(2, '0')
11 |     const day = date.getDate().toString().padStart(2, '0')
12 |     const hours = date.getHours().toString().padStart(2, '0')
13 |     const minutes = date.getMinutes().toString().padStart(2, '0')
14 |     const seconds = date.getSeconds().toString().padStart(2, '0')
15 |     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
16 |   }
17 | 
18 |   // 将分区ID展示成分区
19 |   const getCategoryByValue = (value: number): string => {
20 |     const categories: Categories = {
21 |       100: '游戏',
22 |       200: '生活',
23 |       300: '知识',
24 |       400: '科技',
25 |       500: '音乐',
26 |       600: '鬼畜',
27 |       700: '动画',
28 |       800: '时尚',
29 |       900: '舞蹈',
30 |       1000: '娱乐',
31 |       1100: '美食',
32 |       1200: '动物',
33 |     }
34 | 
35 |     return categories[value] || '未知'
36 |   }
37 | 
38 |   return { formatTimestamp, getCategoryByValue }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/user/avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-avatar :size="props.size">
 3 |     <img
 4 |       :src="imageSrc"
 5 |       alt="个人头像"
 6 |       class="avatar-image"
 7 |       @error="onImageError"
 8 |     />
 9 |   </v-avatar>
10 | </template>
11 | 
12 | <script setup>
13 | import { ref, onMounted, computed } from 'vue'
14 | import axios from 'axios'
15 | import { useUrlStore } from '@/store/urlStore'
16 | 
17 | const urlStore = useUrlStore()
18 | const faceUrl = computed(() => urlStore.faceUrl)
19 | 
20 | // 定义接收的 props
21 | const props = defineProps({
22 |   size: {
23 |     type: [String, Number],
24 |     default: '60',
25 |   },
26 |   uid: {
27 |     type: [String, Number],
28 |     required: true,
29 |   },
30 | })
31 | 
32 | const imageSrc = ref('')
33 | let avatarURL = `${faceUrl.value}/face/${props.uid}.jpg`
34 | let defaultAvatarURL = `${faceUrl.value}/public/default_avatar.png`
35 | 
36 | onMounted(async () => {
37 |   try {
38 |     // 使用HEAD请求方法仅检查资源是否存在，不实际下载整个资源
39 |     await axios.head(avatarURL)
40 |     imageSrc.value = avatarURL
41 |   } catch (error) {
42 |     imageSrc.value = defaultAvatarURL
43 |   }
44 | })
45 | 
46 | // 当图像加载失败时更改图像源为默认图像
47 | const onImageError = () => {
48 |   imageSrc.value = defaultAvatarURL
49 | }
50 | </script>
51 | 
52 | <style scoped>
53 | .avatar-image {
54 |   width: 100%;
55 |   height: 100%;
56 |   object-fit: cover;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import { createPinia } from 'pinia'
 5 | import { useUserStore } from './store/userStore'
 6 | import ElementPlus from 'element-plus'
 7 | import 'element-plus/dist/index.css'
 8 | import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 9 | import 'element-plus/theme-chalk/display.css'
10 | import axios from 'axios'
11 | 
12 | import 'vuetify/styles'
13 | import '@mdi/font/css/materialdesignicons.css'
14 | import { createVuetify } from 'vuetify'
15 | import * as components from 'vuetify/components'
16 | import * as directives from 'vuetify/directives'
17 | 
18 | const app = createApp(App)
19 | const pinia = createPinia()
20 | const vuetify = createVuetify({
21 |   components,
22 |   directives,
23 |   icons: {
24 |     defaultSet: 'mdi',
25 |   },
26 |   defaults: {
27 |     VBtn: {
28 |       color: '#61aefb',
29 |       variant: 'outlined',
30 |     },
31 |   },
32 | })
33 | 
34 | app.use(pinia)
35 | app.use(router)
36 | app.use(ElementPlus)
37 | app.use(vuetify)
38 | 
39 | // 全局注册element-plus icon
40 | for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
41 |   app.component(key, component)
42 | }
43 | 
44 | app.mount('#app')
45 | 
46 | const userStore = useUserStore()
47 | 
48 | userStore.fetchSessionData().then(() => {
49 |   // 移除加载器
50 |   const loader = document.getElementById('loader')
51 |   if (loader) {
52 |     loader.style.display = 'none'
53 |   }
54 | 
55 |   // 全局设置 withCredentials
56 |   axios.defaults.withCredentials = true
57 | })
58 | 


--------------------------------------------------------------------------------
/src/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mmCard title="关于本网站" class="mb-20">
 4 |       <li>本网站仅供B站UP主认真猫学习编程使用。</li>
 5 |       <li>
 6 |         前端设计和相关想法借鉴了我最喜欢的网站BiliOB观测者，这个网站也是我全栈开发的启蒙之地。
 7 |       </li>
 8 |     </mmCard>
 9 |     <mmCard title="联系我" class="mb-20">
10 |       <li>我的粉丝QQ群：883422705，这里也是网站讨论群。</li>
11 |       <li>我的技术交流群：542174643。</li>
12 |       <li>欢迎前往本网站github提issus和pr，也欢迎Star和Fork。</li>
13 |     </mmCard>
14 |     <mmCard title="本网站使用的技术架构">
15 |       <h4>友情赞助</h4>
16 |       <li>
17 |         感谢腾讯云轻量应用服务器赞助本网站，让我一个高一学生也有机会上线网站。
18 |       </li>
19 |       <h4>前端</h4>
20 |       <li>
21 |         使用Vue3.0进行开发，应用了Pinia前端状态管理与vue-router前端路由，使用vite搭建项目。
22 |       </li>
23 |       <li>
24 |         前端UI组件库大部分采用的是Vuetify.js，少部分使用Element-plus（完全重构后会移除）
25 |       </li>
26 |       <h4>后端</h4>
27 |       <li>后端采用Flask构建API。</li>
28 |       <h4>数据库</h4>
29 |       <li>数据库采用MongoDB存储文本数据。</li>
30 |       <h4>缓存</h4>
31 |       <li>缓存数据库采用的是Redis。未来会将热门视频加入Redis队列。</li>
32 |       <h4>存储</h4>
33 |       <li>使用了腾讯云对象存储COS存储媒体文件。</li>
34 |       <h4>CDN</h4>
35 |       <li>使用了Cloudflare CDN Free计划。</li>
36 |     </mmCard>
37 |     <comment type="about" class="mt-5"></comment>
38 |   </div>
39 | </template>
40 | <script setup>
41 | import mmCard from '@/components/rzm/mmCard.vue'
42 | </script>
43 | 
44 | <style scoped>
45 | .mb-20 {
46 |   margin-bottom: 20px;
47 | }
48 | 
49 | h4 {
50 |   font-size: 18px;
51 |   font-weight: 600;
52 |   padding-bottom: 10px;
53 |   color: #333;
54 | }
55 | 
56 | li {
57 |   margin-bottom: 10px;
58 |   font-size: 16px;
59 |   color: #555;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/views/admin/hideVideo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <mmCard title="隐藏一个视频">
 3 |     <el-form ref="form" :model="formData" label-width="100px">
 4 |       <el-form-item
 5 |         label="AID:"
 6 |         :rules="[{ required: true, message: 'AID为必填项。' }]"
 7 |       >
 8 |         <el-input v-model="formData.aid"></el-input>
 9 |       </el-form-item>
10 |       <el-form-item
11 |         label="封禁原因:"
12 |         :rules="[{ required: true, message: '原因为必填项。' }]"
13 |       >
14 |         <el-input v-model="formData.reason"></el-input>
15 |       </el-form-item>
16 |       <el-form-item>
17 |         <el-button type="primary" @click="hideVideo">隐藏视频</el-button>
18 |       </el-form-item>
19 |     </el-form>
20 |   </mmCard>
21 | </template>
22 | 
23 | <script setup>
24 | import { ref, computed } from 'vue'
25 | import { useUrlStore } from '@/store/urlStore'
26 | import axios from 'axios'
27 | import mmCard from '@/components/rzm/mmCard.vue'
28 | 
29 | const urlStore = useUrlStore()
30 | const apiUrl = computed(() => urlStore.apiUrl)
31 | 
32 | const formData = ref({
33 |   aid: '',
34 |   reason: '',
35 |   // grade: ''
36 | })
37 | 
38 | const hideVideo = async () => {
39 |   try {
40 |     const response = await axios.post(
41 |       `${apiUrl.value}/api/admin/hide_video/${formData.value.aid}`,
42 |       {
43 |         reason: formData.value.reason,
44 |         // grade: formData.value.grade
45 |       }
46 |     )
47 | 
48 |     if (response.status === 200) {
49 |       ElMessage.success('视频已隐藏')
50 |     } else {
51 |       ElMessage.error('隐藏视频失败')
52 |     }
53 |   } catch (error) {
54 |     ElMessage.error('隐藏视频失败: ' + error.message)
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "private": true,
 4 |   "version": "beta.1.2.1",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@element-plus/icons-vue": "^2.1.0",
13 |     "autoprefixer": "^10.4.16",
14 |     "axios": "^1.5.1",
15 |     "cropperjs": "^1.6.1",
16 |     "echarts": "^5.4.3",
17 |     "element-plus": "^2.4.1",
18 |     "hls.js": "^1.4.12",
19 |     "pinia": "^2.1.7",
20 |     "postcss": "^8.4.31",
21 |     "sass": "^1.69.4",
22 |     "socket.io-client": "^4.7.2",
23 |     "tailwindcss": "^3.3.4",
24 |     "uuid": "^9.0.1",
25 |     "video.js": "^8.6.1",
26 |     "videojs-hlsjs-plugin": "^1.0.5",
27 |     "vite-plugin-vuetify": "^1.0.2",
28 |     "vue": "^3.3.4",
29 |     "vue-cropperjs": "^5.0.0",
30 |     "vue-router": "^4.0.13",
31 |     "vuetify": "^3.3.23"
32 |   },
33 |   "devDependencies": {
34 |     "@mdi/font": "^7.3.67",
35 |     "@typescript-eslint/eslint-plugin": "^6.10.0",
36 |     "@typescript-eslint/parser": "^6.10.0",
37 |     "@vitejs/plugin-vue": "^4.2.3",
38 |     "eslint": "^8.53.0",
39 |     "eslint-config-prettier": "^9.0.0",
40 |     "eslint-config-standard-with-typescript": "^39.1.1",
41 |     "eslint-plugin-import": "^2.29.0",
42 |     "eslint-plugin-n": "^16.3.1",
43 |     "eslint-plugin-prettier": "^5.0.1",
44 |     "eslint-plugin-promise": "^6.1.1",
45 |     "eslint-plugin-vue": "^9.18.1",
46 |     "prettier": "^3.0.3",
47 |     "typescript": "^5.2.2",
48 |     "unplugin-auto-import": "^0.16.6",
49 |     "unplugin-vue-components": "^0.25.2",
50 |     "vite": "^4.4.5",
51 |     "vue-eslint-parser": "^9.3.2",
52 |     "vue-tsc": "^1.8.5"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/dataCount.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mmCard title="网站数据" class="mb-5">
 4 |       <h4 class="text-gray-700">每小时访问量统计</h4>
 5 |       <div ref="chart" class="w-full" style="height: 400px"></div>
 6 |     </mmCard>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script setup>
11 | import mmCard from '@/components/rzm/mmCard.vue'
12 | import { onMounted, ref, nextTick, computed } from 'vue'
13 | import * as echarts from 'echarts'
14 | import axios from 'axios'
15 | import { useUrlStore } from '@/store/urlStore'
16 | import useFormat from '@/composables/useFormat'
17 | const { formatTimestamp } = useFormat()
18 | 
19 | const urlStore = useUrlStore()
20 | const apiUrl = computed(() => urlStore.apiUrl)
21 | 
22 | // const onlineCount = ref(0)
23 | const chart = ref(null)
24 | let chartInstance = null
25 | 
26 | onMounted(async () => {
27 |   await nextTick()
28 |   chartInstance = echarts.init(chart.value)
29 |   const response = await axios.get(
30 |     `${apiUrl.value}/api/online/get_last_24h_visits`
31 |   )
32 |   const data = response.data
33 |   console.log(data)
34 | 
35 |   const hours = Object.keys(data).map((timestamp) => {
36 |     return formatTimestamp(parseFloat(timestamp)).slice(0, 16) // 截取到小时
37 |   })
38 | 
39 |   const counts = Object.values(data)
40 | 
41 |   const option = {
42 |     tooltip: {
43 |       trigger: 'axis',
44 |       axisPointer: {
45 |         type: 'cross',
46 |         label: {
47 |           backgroundColor: '#6a7985',
48 |         },
49 |       },
50 |       formatter: function (params) {
51 |         let item = params[0]
52 |         return `${hours[item.dataIndex]}<br/>访问量：${counts[item.dataIndex]}`
53 |       },
54 |     },
55 |     xAxis: {
56 |       type: 'category',
57 |       data: hours,
58 |     },
59 |     yAxis: {
60 |       type: 'value',
61 |     },
62 |     series: [
63 |       {
64 |         data: counts,
65 |         type: 'line',
66 |         lineStyle: {
67 |           color: '#ff6060',
68 |         },
69 |         itemStyle: {
70 |           color: '#ff6060',
71 |         },
72 |         symbol: 'none',
73 |         smooth: true,
74 |         areaStyle: {},
75 |       },
76 |     ],
77 |   }
78 | 
79 |   chartInstance.setOption(option)
80 | })
81 | </script>
82 | 


--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // Generated by unplugin-vue-components
 5 | // Read more: https://github.com/vuejs/core/pull/3399
 6 | export {}
 7 | 
 8 | declare module 'vue' {
 9 |   export interface GlobalComponents {
10 |     Avatar: typeof import('./src/components/user/avatar.vue')['default']
11 |     Comment: typeof import('./src/components/common/comment.vue')['default']
12 |     DataCount: typeof import('./src/components/dataCount.vue')['default']
13 |     ElButton: typeof import('element-plus/es')['ElButton']
14 |     ElCol: typeof import('element-plus/es')['ElCol']
15 |     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
16 |     ElDialog: typeof import('element-plus/es')['ElDialog']
17 |     ElForm: typeof import('element-plus/es')['ElForm']
18 |     ElFormItem: typeof import('element-plus/es')['ElFormItem']
19 |     ElIcon: typeof import('element-plus/es')['ElIcon']
20 |     ElInput: typeof import('element-plus/es')['ElInput']
21 |     ElLink: typeof import('element-plus/es')['ElLink']
22 |     ElOption: typeof import('element-plus/es')['ElOption']
23 |     ElPopover: typeof import('element-plus/es')['ElPopover']
24 |     ElProgress: typeof import('element-plus/es')['ElProgress']
25 |     ElRadio: typeof import('element-plus/es')['ElRadio']
26 |     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
27 |     ElResult: typeof import('element-plus/es')['ElResult']
28 |     ElSelect: typeof import('element-plus/es')['ElSelect']
29 |     ElTag: typeof import('element-plus/es')['ElTag']
30 |     ElUpload: typeof import('element-plus/es')['ElUpload']
31 |     MmCard: typeof import('./src/components/rzm/mmCard.vue')['default']
32 |     MmvCard: typeof import('./src/components/rzm/mmvCard.vue')['default']
33 |     NavBar: typeof import('./src/components/navBar.vue')['default']
34 |     Player: typeof import('./src/components/video/player.vue')['default']
35 |     RouterLink: typeof import('vue-router')['RouterLink']
36 |     RouterView: typeof import('vue-router')['RouterView']
37 |     VideoGrid: typeof import('./src/components/video/VideoGrid.vue')['default']
38 |     VideoList: typeof import('./src/components/video/VideoList.vue')['default']
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/views/log.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-timeline side="end" align="start">
 4 |       <!-- 代表一个版本的更新 -->
 5 |       <v-timeline-item
 6 |         v-for="update in updates"
 7 |         :key="update.version"
 8 |         :dot-color="update.dotColor"
 9 |         :size="update.size"
10 |         min-width="100%"
11 |       >
12 |         <div>
13 |           <strong class="text-gray-700"
14 |             >Ver.{{ update.stage }}.{{
15 |               update.version
16 |             }}&nbsp;&nbsp;&nbsp;&nbsp;{{ update.date }}</strong
17 |           >
18 | 
19 |           <mmvCard class="w-full max-w-full">
20 |             <template #default>
21 |               <div
22 |                 v-for="(contents, category) in update.changes"
23 |                 :key="category"
24 |               >
25 |                 <div
26 |                   class="mt-4 mb-4 ml-0 text-gray-500 text-sm flex items-center"
27 |                 >
28 |                   <v-icon :left="true" class="mr-2">{{
29 |                     categoryIconMap[category]
30 |                   }}</v-icon>
31 |                   <strong>{{ categoryMap[category] }}</strong>
32 |                 </div>
33 |                 <ul class="ml-8">
34 |                   <li
35 |                     v-for="content in contents"
36 |                     :key="content"
37 |                     class="text-gray-600"
38 |                   >
39 |                     {{ content }}
40 |                   </li>
41 |                 </ul>
42 |               </div>
43 |             </template>
44 |           </mmvCard>
45 |         </div>
46 |       </v-timeline-item>
47 |     </v-timeline>
48 |     <comment type="log" class="mt-5"></comment>
49 |   </div>
50 | </template>
51 | 
52 | <script setup>
53 | import { ref, computed } from 'vue'
54 | import mmvCard from '@/components/rzm/mmvCard.vue'
55 | import logs from '@/assets/docs/log.json'
56 | 
57 | const rawUpdates = ref(logs)
58 | const updates = computed(() => [...rawUpdates.value].reverse())
59 | 
60 | const categoryMap = {
61 |   milestone: '里程碑',
62 |   feature: '特性',
63 |   fix: '修复',
64 |   beautify: '美化',
65 |   architecture: '架构',
66 |   other: '其他',
67 | }
68 | 
69 | const categoryIconMap = {
70 |   milestone: 'mdi-trophy',
71 |   feature: 'mdi-star',
72 |   fix: 'mdi-wrench',
73 |   beautify: 'mdi-brush',
74 |   architecture: 'mdi-cube-outline',
75 |   other: 'mdi-dots-horizontal',
76 | }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="zh-cn">
  3 | <head>
  4 |   <meta charset="UTF-8" />
  5 |   <link rel="icon" href="/favicon.ico">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>猫猫站</title>
  8 |   <style>
  9 |     #loader {
 10 |       position: fixed;
 11 |       left: 0;
 12 |       top: 0;
 13 |       width: 100%;
 14 |       height: 100%;
 15 |       z-index: 9999;
 16 |       display: flex;
 17 |       flex-direction: column;
 18 |       align-items: center;
 19 |       justify-content: flex-start;
 20 |       padding-top: 50px;
 21 |       background: rgba(255, 255, 255, 0.8);
 22 |       color: #555;
 23 |     }
 24 |     
 25 |     #loader img {
 26 |       width: 20%;
 27 |       height: auto;
 28 |     }
 29 | 
 30 |     .loading-text {
 31 |       margin-top: 20px;
 32 |       font-size: 18px;
 33 |       position: relative;
 34 |     }
 35 |     .balls {
 36 |       margin-top: 10px;
 37 |       width: 4em;
 38 |       display: flex;
 39 |       flex-flow: row nowrap;
 40 |       align-items: center;
 41 |       justify-content: space-between;
 42 |     }
 43 | 
 44 |     .balls div {
 45 |       width: 0.8em;
 46 |       height: 0.8em;
 47 |       border-radius: 50%;
 48 |       background-color: #61aefb;
 49 |     }
 50 | 
 51 |     .balls div:nth-of-type(1) {
 52 |       transform: translateX(-100%);
 53 |       animation: left-swing 0.5s ease-in alternate infinite;
 54 |     }
 55 | 
 56 |     .balls div:nth-of-type(3) {
 57 |       transform: translateX(-95%);
 58 |       animation: right-swing 0.5s ease-out alternate infinite;
 59 |     }
 60 | 
 61 |     @keyframes left-swing {
 62 |       50%,
 63 |       100% {
 64 |         transform: translateX(95%);
 65 |       }
 66 |     }
 67 | 
 68 |     @keyframes right-swing {
 69 |       50% {
 70 |         transform: translateX(-95%);
 71 |       }
 72 |       100% {
 73 |         transform: translateX(100%);
 74 |       }
 75 |     }
 76 | 
 77 |     .box {
 78 |       perspective: 120px;
 79 |     }
 80 | 
 81 |     .plane {
 82 |       width: 6em;
 83 |       height: 6em;
 84 |       background-color: #61aefb;
 85 |       transform: rotate(0);
 86 |       animation: flip 1s infinite;
 87 |     }
 88 | 
 89 |     @keyframes flip {
 90 |       50% {
 91 |         transform: rotateY(180deg);
 92 |       }
 93 |       100% {
 94 |         transform: rotateY(180deg) rotateX(180deg);
 95 |       }
 96 |     }
 97 |   </style>
 98 | </head>
 99 | <body>
100 |   <div id="loader">
101 |     <div class="box">
102 |       <div class="plane"></div>
103 |     </div>
104 |     <div class="loading-text">正在加载</div>
105 |     <div class="balls">
106 |       <div></div>
107 |       <div></div>
108 |       <div></div>
109 |     </div>
110 |   </div>
111 |   <div id="app"></div>
112 |   <script type="module" src="/src/main.ts"></script>
113 | </body>
114 | </html>
115 | 


--------------------------------------------------------------------------------
/src/assets/docs/log.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "stage": "alpha",
  4 |     "version": "0.0.0",
  5 |     "dotColor": "red",
  6 |     "size": "large",
  7 |     "date": "2023-10-08",
  8 |     "changes": {
  9 |       "milestone": ["萌发了想制作视频网站的念头"]
 10 |     }
 11 |   },
 12 |   {
 13 |     "stage": "alpha",
 14 |     "version": "0.1.0",
 15 |     "dotColor": "blue",
 16 |     "date": "2023-10-14",
 17 |     "size": "small",
 18 |     "changes": {
 19 |       "feature": ["加入基本的用户注册与登录", "加入基本的发布与查看视频"],
 20 |       "fix": ["修复了已知bug"]
 21 |     }
 22 |   },
 23 |   {
 24 |     "stage": "alpha",
 25 |     "version": "0.2.0",
 26 |     "dotColor": "blue",
 27 |     "date": "2023-10-19",
 28 |     "size": "small",
 29 |     "changes": {
 30 |       "feature": ["加入了签到功能", "现在可以AI审核视频了"],
 31 |       "architecture": ["使用腾讯云对象存储"]
 32 |     }
 33 |   },
 34 |   {
 35 |     "stage": "alpha",
 36 |     "version": "0.2.1",
 37 |     "dotColor": "green",
 38 |     "date": "2023-10-21",
 39 |     "size": "small",
 40 |     "changes": {
 41 |       "feature": ["使用上传视频分片技术，可以上传更大的视频了"],
 42 |       "fix": ["修复了已知bug"]
 43 |     }
 44 |   },
 45 |   {
 46 |     "stage": "beta",
 47 |     "version": "1.0.0",
 48 |     "dotColor": "red",
 49 |     "date": "2023-10-28",
 50 |     "size": "large",
 51 |     "changes": {
 52 |       "feature": [
 53 |         "加入了更好看的导航栏与侧边栏",
 54 |         "加入了主页留言板",
 55 |         "加入了开发日志"
 56 |       ],
 57 |       "beautify": ["使用vuetify代替element-plus，全局美化"],
 58 |       "architecture": [
 59 |         "使用pinia代替vuex",
 60 |         "使用TypeScript代替JavaScript",
 61 |         "使用vite代替webpack"
 62 |       ]
 63 |     }
 64 |   },
 65 |   {
 66 |     "stage": "beta",
 67 |     "version": "1.0.1",
 68 |     "dotColor": "green",
 69 |     "date": "2023-10-29",
 70 |     "size": "small",
 71 |     "changes": {
 72 |       "feature": ["加入了关于本网站和FAQ页面"],
 73 |       "other": ["优化经验系统", "优化了session持续时间"]
 74 |     }
 75 |   },
 76 |   {
 77 |     "stage": "beta",
 78 |     "version": "1.1.0",
 79 |     "dotColor": "blue",
 80 |     "date": "2023-11-01",
 81 |     "size": "small",
 82 |     "changes": {
 83 |       "feature": [
 84 |         "加入了喜闻乐见的排行榜功能",
 85 |         "添加了网站访问量统计公共页面",
 86 |         "首页视频选择新增随机、入站必刷页面"
 87 |       ],
 88 |       "beautify": [
 89 |         "美化了首页视频卡片与导航栏",
 90 |         "美化了加载页面",
 91 |         "美化了广告内容"
 92 |       ],
 93 |       "fix": [
 94 |         "修复了部分页面不能评论的bug",
 95 |         "修复了经验精度错误",
 96 |         "修复了竖屏竖屏电脑端显示问题"
 97 |       ]
 98 |     }
 99 |   },
100 |   {
101 |     "stage": "beta",
102 |     "version": "1.2.0",
103 |     "dotColor": "blue",
104 |     "date": "2023-11-05",
105 |     "size": "small",
106 |     "changes": {
107 |       "feature": ["通宵12小时完成了弹幕功能", "编辑资料页面回归"],
108 |       "beautify": ["我会逐渐美化这个网站的"],
109 |       "fix": ["修复了不能上传视频的bug", "修复了不能修改头像的bug"]
110 |     }
111 |   },{
112 |     "stage": "beta",
113 |     "version": "1.2.1",
114 |     "dotColor": "green",
115 |     "date": "2023-11-11",
116 |     "size": "small",
117 |     "changes": {
118 |       "beautify": ["加了一些细节"],
119 |       "fix": ["修复了一些BUG"],
120 |       "architecture": ["重构前后端代码，更符合标准"]
121 |     }
122 |   }
123 | ]
124 | 


--------------------------------------------------------------------------------
/src/views/user/rank.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-row>
  4 |       <v-col
  5 |         v-for="user in users"
  6 |         :key="user.uid"
  7 |         xs="12"
  8 |         sm="6"
  9 |         md="4"
 10 |         lg="3"
 11 |         class="no-spacing-small-screens col-flex"
 12 |       >
 13 |         <div class="card-wrapper">
 14 |           <span class="user-rank">#{{ user.rank }}</span>
 15 |           <mmvCard>
 16 |             <div class="user-info">
 17 |               <h3 class="user-name">{{ user.name }}</h3>
 18 |               <p class="user-uid">ID: {{ user.uid }}</p>
 19 |               <p class="user-experience">{{ user.experience.toFixed(1) }}点</p>
 20 |               <p class="user-time">{{ formatTimestamp(user.time) }}</p>
 21 |             </div>
 22 |           </mmvCard>
 23 |         </div>
 24 |       </v-col>
 25 |     </v-row>
 26 |     <comment type="rank"></comment>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script setup>
 31 | import { ref, onMounted, computed } from 'vue'
 32 | import axios from 'axios'
 33 | import { useUrlStore } from '@/store/urlStore'
 34 | import mmvCard from '@/components/rzm/mmvCard.vue'
 35 | import useFormat from '@/composables/useFormat'
 36 | 
 37 | const urlStore = useUrlStore()
 38 | const apiUrl = computed(() => urlStore.apiUrl)
 39 | const { formatTimestamp } = useFormat()
 40 | const users = ref([]) // 用于存储API返回的用户数据
 41 | 
 42 | // 当组件加载时调用API
 43 | onMounted(async () => {
 44 |   try {
 45 |     const response = await axios.get(`${apiUrl.value}/api/user/rank`)
 46 |     if (response.data) {
 47 |       users.value = response.data
 48 |     }
 49 |   } catch (error) {
 50 |     console.error('获取用户列表错误:', error)
 51 |   }
 52 | })
 53 | </script>
 54 | 
 55 | <style scoped>
 56 | .user-rank {
 57 |   position: absolute;
 58 |   top: -10px;
 59 |   left: 15%;
 60 |   background-color: #61aefb;
 61 |   color: white;
 62 |   padding: 5px 10px;
 63 |   border-radius: 15px;
 64 |   font-weight: bold;
 65 |   z-index: 2;
 66 | }
 67 | 
 68 | /* 媒体查询，针对小屏幕调整排名的样式 */
 69 | @media (max-width: 600px) {
 70 |   .user-rank {
 71 |     padding: 4px 8px;
 72 |   }
 73 |   .no-spacing-small-screens {
 74 |     padding: 4px !important;
 75 |   }
 76 | }
 77 | 
 78 | /* 媒体查询，针对更小的屏幕调整排名的样式 */
 79 | @media (max-width: 400px) {
 80 |   .user-rank {
 81 |     padding: 3px 6px;
 82 |   }
 83 | }
 84 | 
 85 | .user-info {
 86 |   padding: 20px;
 87 |   display: flex;
 88 |   flex-direction: column;
 89 | }
 90 | 
 91 | .user-name {
 92 |   font-weight: bold;
 93 |   font-size: 1.5rem;
 94 |   color: #333;
 95 |   display: -webkit-box;
 96 |   -webkit-line-clamp: 2; /* 限制为2行 */
 97 |   -webkit-box-orient: vertical;
 98 |   overflow: hidden;
 99 |   text-overflow: ellipsis;
100 |   max-width: 90%;
101 | }
102 | 
103 | .user-uid {
104 |   font-size: 1rem;
105 |   color: #666;
106 |   margin-bottom: 2px;
107 | }
108 | 
109 | .user-experience {
110 |   color: #61aefb;
111 |   font-weight: bold;
112 |   margin-bottom: 10px;
113 | }
114 | 
115 | .user-time {
116 |   font-size: 0.9rem;
117 |   color: #777;
118 |   margin-bottom: 10px;
119 | }
120 | 
121 | .card-wrapper {
122 |   position: relative;
123 |   height: 250px; /* 你可以根据实际需求调整这个值 */
124 | }
125 | 
126 | .col-flex {
127 |   flex-basis: auto; /* 解决布局bug */
128 | }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
  1 | import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
  2 | 
  3 | const routes: RouteRecordRaw[] = [
  4 |   {
  5 |     path: '/',
  6 |     name: '主页',
  7 |     component: () => import('@/views/index.vue'),
  8 |   },
  9 |   {
 10 |     path: '/log',
 11 |     name: '开发日志',
 12 |     component: () => import('@/views/log.vue'),
 13 |   },
 14 |   {
 15 |     path: '/about',
 16 |     name: '关于本网站',
 17 |     component: () => import('@/views/about.vue'),
 18 |   },
 19 |   {
 20 |     path: '/faq',
 21 |     name: 'FAQ',
 22 |     component: () => import('@/views/faq.vue'),
 23 |   },
 24 |   {
 25 |     path: '/data',
 26 |     name: '网站可公开数据',
 27 |     component: () => import('@/views/webData.vue'),
 28 |   },
 29 |   {
 30 |     path: '/member',
 31 |     name: '创作中心',
 32 |     component: () => import('@/views/fatherContainer.vue'),
 33 |     children: [
 34 |       {
 35 |         path: 'upload',
 36 |         name: '上传',
 37 |         meta: { layout: 'form' },
 38 |         component: () => import('@/views/member/upload.vue'),
 39 |       },
 40 |     ],
 41 |   },
 42 |   {
 43 |     path: '/user',
 44 |     name: '我的信息',
 45 |     component: () => import('@/views/fatherContainer.vue'),
 46 |     children: [
 47 |       {
 48 |         path: 'signin',
 49 |         name: '登录',
 50 |         meta: { layout: 'form' },
 51 |         component: () => import('@/views/user/signin.vue'),
 52 |       },
 53 |       {
 54 |         path: 'signup',
 55 |         name: '注册',
 56 |         meta: { layout: 'form' },
 57 |         component: () => import('@/views/user/signup.vue'),
 58 |       },
 59 |       {
 60 |         path: 'setting',
 61 |         name: '修改个人信息',
 62 |         meta: { layout: 'form' },
 63 |         component: () => import('@/views/user/setting.vue'),
 64 |       },
 65 |       {
 66 |         path: 'rank',
 67 |         name: '喵绘者排行',
 68 |         component: () => import('@/views/user/rank.vue'),
 69 |       },
 70 |     ],
 71 |   },
 72 |   {
 73 |     path: '/video/:aid',
 74 |     component: () => import('@/views/video/detail.vue'),
 75 |   },
 76 |   {
 77 |     path: '/space/:uid',
 78 |     component: () => import('@/views/space/index.vue'),
 79 |   },
 80 |   {
 81 |     path: '/admin',
 82 |     name: '管理员',
 83 |     component: () => import('@/views/fatherContainer.vue'),
 84 |     children: [
 85 |       {
 86 |         path: 'hidevideo',
 87 |         name: '隐藏视频',
 88 |         meta: { layout: 'form' },
 89 |         component: () => import('@/views/admin/hideVideo.vue'),
 90 |       },
 91 |     ],
 92 |   },
 93 | ]
 94 | 
 95 | const router = createRouter({
 96 |   history: createWebHistory(),
 97 |   routes,
 98 | })
 99 | 
100 | import { useUserStore } from '../store/userStore'
101 | 
102 | router.beforeEach(async (to, _from, next) => {
103 |   document.title = `${String(
104 |     to.name || to.params.aid || to.params.uid
105 |   )} - 猫猫站`
106 | 
107 |   const userStore = useUserStore()
108 | 
109 |   if (userStore.sessionData.isload == false) {
110 |     await userStore.fetchSessionData()
111 |   }
112 | 
113 |   const { signin, status } = userStore.sessionData
114 | 
115 |   if (signin && (to.path === '/user/signup' || to.path === '/user/signin')) {
116 |     next('/')
117 |     return
118 |   }
119 | 
120 |   if (
121 |     !signin &&
122 |     (to.path === '/member/upload' || to.path === '/user/setting')
123 |   ) {
124 |     next('/user/signin')
125 |     return
126 |   }
127 |   // TODO: 这只是一个应急方式，后续需要改成动态路由
128 |   if (status !== 1 && to.path === '/admin/hidevideo') {
129 |     next('/')
130 |     return
131 |   }
132 | 
133 |   next()
134 | })
135 | 
136 | export default router
137 | 


--------------------------------------------------------------------------------
/src/views/user/signin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <mmCard title="登录">
  3 |     <el-form ref="signinForm" :model="formData" label-position="top">
  4 |       <el-form-item
  5 |         label="邮箱"
  6 |         prop="email"
  7 |         :rules="[
  8 |           {
  9 |             required: true,
 10 |             message: '邮箱为必填项。',
 11 |           },
 12 |         ]"
 13 |       >
 14 |         <el-input
 15 |           v-model="formData.email"
 16 |           placeholder="请输入您的邮箱..."
 17 |           prefix-icon="User"
 18 |           clearable
 19 |           type="email"
 20 |         />
 21 |       </el-form-item>
 22 |       <el-form-item
 23 |         label="密码"
 24 |         prop="password"
 25 |         :rules="[
 26 |           {
 27 |             required: true,
 28 |             message: '密码为必填项且至少输入6个字符。',
 29 |           },
 30 |         ]"
 31 |       >
 32 |         <el-input
 33 |           v-model="formData.password"
 34 |           placeholder="请输入您的密码..."
 35 |           show-password
 36 |           prefix-icon="Lock"
 37 |         />
 38 |       </el-form-item>
 39 |       <el-form-item>
 40 |         <el-button type="primary" @click="submitForm(signinForm)"
 41 |           >登录</el-button
 42 |         >
 43 |         <el-button @click="goToSignup">注册</el-button>
 44 |       </el-form-item>
 45 |     </el-form>
 46 |   </mmCard>
 47 | </template>
 48 | 
 49 | <script setup>
 50 | import { reactive, computed, ref } from 'vue'
 51 | import { useUrlStore } from '@/store/urlStore'
 52 | import { useRouter } from 'vue-router'
 53 | import axios from 'axios'
 54 | import mmCard from '@/components/rzm/mmCard.vue'
 55 | 
 56 | const urlStore = useUrlStore()
 57 | const apiUrl = computed(() => urlStore.apiUrl)
 58 | 
 59 | const urouter = useRouter()
 60 | const goToSignup = () => {
 61 |   urouter.replace('/user/signup')
 62 | }
 63 | 
 64 | const formData = reactive({
 65 |   email: '',
 66 |   password: '',
 67 | })
 68 | 
 69 | const signinForm = ref(null)
 70 | 
 71 | const isValidEmail = (email) => {
 72 |   let RegEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
 73 |   return RegEmail.test(email)
 74 | }
 75 | 
 76 | const isPasswordValid = (password) => {
 77 |   return password.length >= 6
 78 | }
 79 | 
 80 | const submitForm = (formEl) => {
 81 |   if (!formEl) return
 82 | 
 83 |   formEl.validate((valid) => {
 84 |     if (!valid) {
 85 |       ElMessage({
 86 |         message: '错误：请确保填写所有必要的信息。',
 87 |         type: 'warning',
 88 |       })
 89 |       return
 90 |     }
 91 | 
 92 |     if (!isValidEmail(formData.email)) {
 93 |       ElMessage({
 94 |         message: '错误：请输入一个有效的电子邮件地址。',
 95 |         type: 'warning',
 96 |       })
 97 |       return
 98 |     }
 99 | 
100 |     if (!isPasswordValid(formData.password)) {
101 |       ElMessage({
102 |         message: '错误：密码至少需要6个字符。',
103 |         type: 'warning',
104 |       })
105 |       return
106 |     }
107 | 
108 |     axios
109 |       .post(`${apiUrl.value}/api/user/signin`, {
110 |         email: formData.email,
111 |         password: formData.password,
112 |       })
113 |       .then((response) => {
114 |         let res = response.data
115 |         if (res['state'] === 'succeed') {
116 |           ElNotification({
117 |             title: '登录成功！',
118 |             message: '欢迎回来！',
119 |             type: 'success',
120 |           })
121 | 
122 |           location.reload(true)
123 |         } else {
124 |           ElMessage({
125 |             message: res['message'],
126 |             type: 'error',
127 |           })
128 |         }
129 |       })
130 |       .catch((error) => {
131 |         ElMessage({
132 |           message: error,
133 |           type: 'error',
134 |         })
135 |       })
136 |   })
137 | }
138 | </script>
139 | 


--------------------------------------------------------------------------------
/src/components/video/VideoList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-tabs v-model="tab" class="custom-tabs">
  4 |       <v-tab value="new">新发布</v-tab>
  5 |       <v-tab value="random">随机</v-tab>
  6 |       <v-tab value="hot">热门</v-tab>
  7 |       <v-tab value="must">入站必刷</v-tab>
  8 |     </v-tabs>
  9 |     <v-window v-model="tab">
 10 |       <v-window-item value="new">
 11 |         <VideoGrid
 12 |           :videos="videos"
 13 |           :has-more="hasMoreVideos"
 14 |           @load-more="() => loadMore('new')"
 15 |         />
 16 |       </v-window-item>
 17 |       <v-window-item value="random">
 18 |         <VideoGrid
 19 |           :videos="videos"
 20 |           :has-more="hasMoreVideos"
 21 |           @load-more="() => loadMore('random')"
 22 |         />
 23 |       </v-window-item>
 24 |       <v-window-item value="hot">
 25 |         <VideoGrid
 26 |           :videos="videos"
 27 |           :has-more="hasMoreVideos"
 28 |           @load-more="() => loadMore('hot')"
 29 |         />
 30 |       </v-window-item>
 31 |       <v-window-item value="must">
 32 |         <VideoGrid
 33 |           :videos="videos"
 34 |           :has-more="hasMoreVideos"
 35 |           @load-more="() => loadMore('must')"
 36 |         />
 37 |       </v-window-item>
 38 |     </v-window>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script setup>
 43 | import axios from 'axios'
 44 | import { ref, computed, watch } from 'vue'
 45 | import { useUrlStore } from '@/store/urlStore'
 46 | import VideoGrid from './VideoGrid.vue'
 47 | 
 48 | const urlStore = useUrlStore()
 49 | const apiUrl = computed(() => urlStore.apiUrl)
 50 | 
 51 | const hasMoreVideos = ref(true)
 52 | const videos = ref([])
 53 | const currentAid = ref(1)
 54 | const tab = ref('home')
 55 | let isLoading = false
 56 | const isAllDataLoaded = ref(false)
 57 | 
 58 | watch(tab, (newVal) => {
 59 |   resetVideosData()
 60 |   loadMore(newVal)
 61 | })
 62 | 
 63 | function resetVideosData() {
 64 |   videos.value = []
 65 |   currentAid.value = 1
 66 |   isAllDataLoaded.value = false
 67 |   hasMoreVideos.value = true
 68 | }
 69 | 
 70 | async function loadMore(type = 'new') {
 71 |   if (isLoading || isAllDataLoaded.value) return
 72 | 
 73 |   isLoading = true
 74 | 
 75 |   let endpoint = ''
 76 |   const params = { start: currentAid.value, count: 8 }
 77 | 
 78 |   switch (type) {
 79 |     case 'new':
 80 |       endpoint = '/api/video/list'
 81 |       params.sort_by = 'time'
 82 |       break
 83 |     case 'random':
 84 |       endpoint = '/api/video/list'
 85 |       params.sort_by = 'random'
 86 |       break
 87 |     case 'hot':
 88 |       endpoint = '/api/video/hot-list'
 89 |       params.within_two_weeks = true
 90 |       break
 91 |     case 'must':
 92 |       endpoint = '/api/video/hot-list'
 93 |       params.within_two_weeks = false
 94 |       break
 95 |     default:
 96 |       console.error(`Unknown type: ${type}`)
 97 |       isLoading = false
 98 |       return
 99 |   }
100 | 
101 |   try {
102 |     const response = await axios.get(`${apiUrl.value}${endpoint}`, {
103 |       params: params,
104 |     })
105 |     if (response.data.hasMore === false) {
106 |       hasMoreVideos.value = false
107 |     }
108 |     videos.value.push(...response.data.data)
109 |     if (response.data.length < 8) {
110 |       isAllDataLoaded.value = true
111 |     } else {
112 |       currentAid.value += 8
113 |     }
114 |   } catch (error) {
115 |     console.error('获取视频错误:', error)
116 |   } finally {
117 |     isLoading = false
118 |   }
119 | }
120 | 
121 | loadMore()
122 | </script>
123 | 
124 | <style scoped>
125 | .custom-tabs {
126 |   background-color: #ffffff;
127 |   border-radius: 5px;
128 |   box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <navBar>
  4 |       <v-container>
  5 |         <v-row justify="center">
  6 |           <v-col :cols="columnWidth">
  7 |             <div class="mt-9"></div>
  8 |             <router-view v-slot="{ Component }">
  9 |               <transition name="slide-x-transition" mode="out-in">
 10 |                 <component :is="Component" />
 11 |               </transition>
 12 |             </router-view>
 13 |           </v-col>
 14 |         </v-row>
 15 |       </v-container>
 16 |     </navBar>
 17 |     <v-dialog v-model="showUpdateLog" max-width="600px">
 18 |       <v-card>
 19 |         <v-card-title style="color: #61aefb; font-size: bold">
 20 |           最新更新 - {{ latestUpdate.stage }}{{ latestUpdate.version }}
 21 |         </v-card-title>
 22 |         <v-card-text>
 23 |           <template #default>
 24 |             <div
 25 |               v-for="(contents, category) in latestUpdate.changes"
 26 |               :key="category"
 27 |             >
 28 |               <div
 29 |                 class="mt-1 mb-1 ml-[-7px]"
 30 |                 style="color: #555; font-size: 13px"
 31 |               >
 32 |                 <v-icon :left="true" class="mr-1">{{
 33 |                   categoryIconMap[category]
 34 |                 }}</v-icon>
 35 |                 <strong>{{ categoryMap[category] }}</strong>
 36 |               </div>
 37 |               <ul class="mt-1">
 38 |                 <li
 39 |                   v-for="content in contents"
 40 |                   :key="content"
 41 |                   style="color: #777"
 42 |                 >
 43 |                   {{ content }}
 44 |                 </li>
 45 |               </ul>
 46 |             </div>
 47 |           </template>
 48 |         </v-card-text>
 49 |         <v-card-actions>
 50 |           <v-spacer></v-spacer>
 51 |           <v-btn @click="closeUpdateLog">关闭</v-btn>
 52 |         </v-card-actions>
 53 |       </v-card>
 54 |     </v-dialog>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script setup>
 59 | import axios from 'axios'
 60 | import { useRoute } from 'vue-router'
 61 | import { useUrlStore } from '@/store/urlStore'
 62 | import { ref, onMounted, computed } from 'vue'
 63 | import navBar from '@/components/navBar.vue'
 64 | import logs from '@/assets/docs/log.json'
 65 | 
 66 | const route = useRoute()
 67 | 
 68 | const urlStore = useUrlStore()
 69 | const apiUrl = computed(() => urlStore.apiUrl)
 70 | 
 71 | axios.defaults.withCredentials = true
 72 | 
 73 | const showUpdateLog = ref(false)
 74 | const latestUpdate = logs[logs.length - 1]
 75 | 
 76 | const columnWidth = computed(() => {
 77 |   return route.meta.layout === 'form' ? 8 : 20
 78 | })
 79 | 
 80 | const categoryMap = {
 81 |   milestone: '里程碑',
 82 |   feature: '特性',
 83 |   fix: '修复',
 84 |   beautify: '美化',
 85 |   architecture: '架构',
 86 |   other: '其他',
 87 | }
 88 | 
 89 | const categoryIconMap = {
 90 |   milestone: 'mdi-trophy',
 91 |   feature: 'mdi-star',
 92 |   fix: 'mdi-wrench',
 93 |   beautify: 'mdi-brush',
 94 |   architecture: 'mdi-cube-outline',
 95 |   other: 'mdi-dots-horizontal',
 96 | }
 97 | 
 98 | const closeUpdateLog = () => {
 99 |   showUpdateLog.value = false
100 |   localStorage.setItem('lastSeenUpdate', latestUpdate.version)
101 | }
102 | 
103 | onMounted(() => {
104 |   const lastSeenUpdate = localStorage.getItem('lastSeenUpdate')
105 |   if (!lastSeenUpdate || lastSeenUpdate !== latestUpdate.version) {
106 |     showUpdateLog.value = true
107 |   }
108 | 
109 |   axios
110 |     .post(`${apiUrl.value}/api/online/visited`)
111 |     .then((response) => {
112 |       console.log(response.data.message)
113 |     })
114 |     .catch((error) => {
115 |       console.error('统计访问错误:', error)
116 |     })
117 | })
118 | </script>
119 | 


--------------------------------------------------------------------------------
/src/components/video/VideoGrid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-row class="video-container d-flex mt-2 mb-2">
  3 |     <v-col
  4 |       v-for="video in videos"
  5 |       :key="video.aid"
  6 |       cols="6"
  7 |       md="3"
  8 |       lg="3"
  9 |       class="video-col"
 10 |     >
 11 |       <v-card class="video-card" @click="handleCardClick($event, video)">
 12 |         <div
 13 |           v-if="!video.hidden || !video.hidden.is_hidden"
 14 |           class="image-wrapper"
 15 |         >
 16 |           <v-img :src="getVideoCover(video.aid)" class="image" />
 17 |           <div class="video-overlay">
 18 |             <div class="video-info">
 19 |               <span class="white-text pr-5"
 20 |                 ><v-icon icon="mdi-play-box" class="icon" />{{
 21 |                   video.data.view || '0'
 22 |                 }}</span
 23 |               >
 24 |               <span class="white-text pr-5"
 25 |                 ><v-icon icon="mdi-thumb-up" class="icon" />{{
 26 |                   video.data.like || '0'
 27 |                 }}</span
 28 |               >
 29 |               <span class="white-text"
 30 |                 ><v-icon icon="mdi-account-box" class="icon" />{{
 31 |                   video.uploader_name
 32 |                 }}</span
 33 |               >
 34 |             </div>
 35 |           </div>
 36 |         </div>
 37 |         <div v-else class="banned-info">
 38 |           <p>很抱歉，{{ video.hidden.reason }}</p>
 39 |           <p>操作人：{{ video.hidden.operator_name }}</p>
 40 |         </div>
 41 |         <v-card-title class="multiline-title truncate-title">{{
 42 |           video.title
 43 |         }}</v-card-title>
 44 |       </v-card>
 45 |     </v-col>
 46 |     <v-col v-if="hasMore" cols="12" class="text-center">
 47 |       <v-btn @click="emitLoadMore">加载更多</v-btn>
 48 |     </v-col>
 49 |   </v-row>
 50 | </template>
 51 | 
 52 | <script setup>
 53 | import { computed } from 'vue'
 54 | import { useRouter } from 'vue-router'
 55 | import { useUrlStore } from '@/store/urlStore'
 56 | 
 57 | // 定义组件属性
 58 | const props = defineProps({
 59 |   videos: {
 60 |     type: Array,
 61 |     required: true,
 62 |   },
 63 |   hasMore: {
 64 |     type: Boolean,
 65 |     default: true,
 66 |   },
 67 | })
 68 | 
 69 | const router = useRouter()
 70 | const urlStore = useUrlStore()
 71 | const cosUrl = computed(() => urlStore.cosUrl)
 72 | 
 73 | // 根据aid获取视频封面
 74 | const getVideoCover = (aid) => `${cosUrl.value}/covers/${aid}.jpg`
 75 | 
 76 | // 处理视频卡片的点击事件
 77 | function handleCardClick(event, video) {
 78 |   if (!video.hidden || !video.hidden.is_hidden) {
 79 |     router.push(`/video/${video.aid}`)
 80 |   }
 81 | }
 82 | 
 83 | // 定义发射的事件
 84 | const emits = defineEmits(['load-more'])
 85 | 
 86 | function emitLoadMore() {
 87 |   if (props.hasMore) {
 88 |     emits('load-more')
 89 |   }
 90 | }
 91 | </script>
 92 | 
 93 | <style scoped>
 94 | .video-col {
 95 |   padding: 5px;
 96 | }
 97 | 
 98 | .video-card {
 99 |   position: relative;
100 |   cursor: pointer;
101 |   height: 300px;
102 |   display: flex;
103 |   flex-direction: column;
104 | }
105 | 
106 | .video-card > div {
107 |   flex: 1;
108 | }
109 | 
110 | .truncate-title {
111 |   white-space: nowrap;
112 |   overflow: hidden;
113 |   text-overflow: ellipsis;
114 |   max-width: 100%;
115 |   font-size: 15px;
116 |   color: #555;
117 | }
118 | 
119 | .image-wrapper {
120 |   position: relative;
121 |   padding-bottom: 56.25%; /* 16:9 */
122 |   overflow: hidden;
123 | }
124 | 
125 | .image {
126 |   position: absolute;
127 |   top: 0;
128 |   left: 0;
129 |   width: 100%;
130 |   height: 100%;
131 |   transition: all 0.3s ease;
132 | }
133 | 
134 | .video-card:hover .image {
135 |   transform: scale(1.05);
136 | }
137 | 
138 | .video-overlay {
139 |   position: absolute;
140 |   bottom: 0;
141 |   left: 0;
142 |   right: 0;
143 |   padding: 10px;
144 |   background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
145 | }
146 | 
147 | .white-text {
148 |   color: white;
149 |   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
150 | }
151 | 
152 | .icon {
153 |   margin-right: 5px;
154 | }
155 | 
156 | .video-info {
157 |   font-size: 12px;
158 | }
159 | 
160 | .banned-info {
161 |   position: absolute;
162 |   top: 50%;
163 |   left: 50%;
164 |   transform: translate(-50%, -50%);
165 |   background-color: rgba(176, 225, 255, 0.7);
166 |   color: white;
167 |   padding: 5px 10px;
168 |   border-radius: 4px;
169 |   text-align: center;
170 | }
171 | 
172 | @media (max-width: 600px) {
173 |   .no-spacing-small-screens {
174 |     padding: 4px !important;
175 |   }
176 |   .video-container * {
177 |     font-size: 14px;
178 |   }
179 | }
180 | 
181 | .multiline-title {
182 |   white-space: normal !important;
183 |   overflow: visible !important;
184 | }
185 | 
186 | .video-container {
187 |   display: flex;
188 |   flex-wrap: wrap;
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/views/space/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <mmCard v-if="userInfo" title="个人空间">
  4 |       <avatar :uid="route.params.uid" size="80"></avatar>
  5 |       <div class="user-details">
  6 |         <h2>#{{ userInfo.exp_rank }} / {{ userInfo.name }}</h2>
  7 |         <p class="timestamp">
  8 |           <v-icon>mdi-clock-outline</v-icon>
  9 |           {{ formatTimestamp(userInfo.registration_time) }}
 10 |         </p>
 11 |         <div class="follower-stats">
 12 |           <span>关注: {{ userInfo.following_count || '0' }}</span>
 13 |           <span>粉丝: {{ userInfo.followers_count || '0' }}</span>
 14 |           <span>经验: {{ (userInfo.experience || '0').toFixed(1) }}</span>
 15 |         </div>
 16 |         <v-btn
 17 |           v-if="route.params.uid != sessionData.uid"
 18 |           class="user-btn"
 19 |           @click="toggleFollow"
 20 |           >{{ isFollowing ? '取消关注' : '关注' }}</v-btn
 21 |         >
 22 |         <v-btn v-else class="user-btn" @click="goToSetting">编辑资料</v-btn>
 23 |       </div>
 24 |     </mmCard>
 25 |     <VideoGrid
 26 |       :videos="videos"
 27 |       :has-more="hasMoreVideos"
 28 |       @load-more="loadMore"
 29 |     />
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script setup>
 34 | import axios from 'axios'
 35 | import { ref, onMounted, computed } from 'vue'
 36 | import { useRoute, useRouter } from 'vue-router'
 37 | import { useUrlStore } from '@/store/urlStore'
 38 | import { useUserStore } from '@/store/userStore'
 39 | import useFormat from '@/composables/useFormat'
 40 | import mmCard from '@/components/rzm/mmCard.vue'
 41 | import VideoGrid from '@/components/video/VideoGrid.vue'
 42 | import avatar from '@/components/user/avatar.vue'
 43 | 
 44 | // 初始化URL存储和路由
 45 | const urlStore = useUrlStore()
 46 | const userStore = useUserStore()
 47 | const route = useRoute()
 48 | const router = useRouter()
 49 | const apiUrl = computed(() => urlStore.apiUrl)
 50 | const sessionData = computed(() => userStore.sessionData)
 51 | const { formatTimestamp } = useFormat()
 52 | 
 53 | // 定义相关的引用和变量
 54 | const userInfo = ref(null)
 55 | const hasMoreVideos = ref(true)
 56 | const videos = ref([])
 57 | const currentAid = ref(1)
 58 | let isLoading = false
 59 | const isAllDataLoaded = ref(false)
 60 | const isFollowing = ref(false)
 61 | 
 62 | // 前往编辑资料页面
 63 | const goToSetting = () => {
 64 |   router.replace('/user/setting')
 65 | }
 66 | 
 67 | // 前往编辑资料页面
 68 | const goToSetting = () => {
 69 |   router.replace('/user/setting')
 70 | }
 71 | 
 72 | // 切换关注状态的函数
 73 | async function toggleFollow() {
 74 |   try {
 75 |     const response = await axios.post(
 76 |       `${apiUrl.value}/api/space/follow/${route.params.uid}`
 77 |     )
 78 | 
 79 |     if (response.data) {
 80 |       if (response.data.state == 'succeed') {
 81 |         ElMessage({
 82 |           message: '关注成功',
 83 |           type: 'succeed',
 84 |         })
 85 |         isFollowing.value = !isFollowing.value
 86 |       } else {
 87 |         ElMessage({
 88 |           message: response.data.message,
 89 |           type: 'warning',
 90 |         })
 91 |       }
 92 |     }
 93 |   } catch (error) {
 94 |     ElMessage({
 95 |       message: error,
 96 |       type: 'error',
 97 |     })
 98 |   }
 99 | }
100 | 
101 | // 组件挂载后的操作
102 | onMounted(async () => {
103 |   const userResponse = await axios.get(
104 |     `${apiUrl.value}/api/space/${route.params.uid}`
105 |   )
106 |   userInfo.value = userResponse.data
107 | 
108 |   const response = await axios.get(
109 |     `${apiUrl.value}/api/space/is_following/${route.params.uid}`
110 |   )
111 |   isFollowing.value = response.data.isFollowing
112 | })
113 | 
114 | // 加载更多视频的函数
115 | async function loadMore() {
116 |   if (isLoading || isAllDataLoaded.value) return
117 | 
118 |   isLoading = true
119 | 
120 |   try {
121 |     const response = await axios.get(
122 |       `${apiUrl.value}/api/space/videos/${route.params.uid}`,
123 |       {
124 |         params: { start: currentAid.value, count: 8 },
125 |       }
126 |     )
127 |     if (response.data.hasMore === false) {
128 |       hasMoreVideos.value = false
129 |     }
130 |     videos.value.push(...response.data.data)
131 |     if (response.data.length < 8) {
132 |       isAllDataLoaded.value = true
133 |     } else {
134 |       currentAid.value += 8
135 |     }
136 |   } catch (error) {
137 |     ElMessage({
138 |       message: error,
139 |       type: 'error',
140 |     })
141 |   } finally {
142 |     isLoading = false
143 |   }
144 | }
145 | 
146 | // 默认加载一次视频数据
147 | loadMore()
148 | </script>
149 | 
150 | <style scoped>
151 | .user-details {
152 |   flex: 1;
153 | }
154 | 
155 | .user-details h2 {
156 |   margin: 0;
157 |   font-size: 1.5rem;
158 |   color: #333;
159 |   margin-bottom: 10px;
160 | }
161 | 
162 | .timestamp {
163 |   color: #999;
164 |   font-size: 0.9rem;
165 | }
166 | 
167 | .follower-stats {
168 |   margin: 10px 0;
169 |   color: #555;
170 | }
171 | 
172 | .follower-stats span {
173 |   margin-right: 15px;
174 | }
175 | 
176 | .user-btn {
177 |   margin-top: 10px;
178 | }
179 | </style>
180 | 


--------------------------------------------------------------------------------
/src/views/video/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="videoInfo" class="mb-3">
  4 |       <h2 style="color: #555">{{ videoInfo.title }}</h2>
  5 |       <div class="video-info">
  6 |         <div style="font-size: 13px; color: #888">
  7 |           <span class="mr-4"
  8 |             ><v-icon icon="mdi-play-box" class="mr-1" />{{
  9 |               videoInfo.data.view
 10 |             }}</span
 11 |           >
 12 |           <span class="mr-4"
 13 |             ><v-icon icon="mdi-message-reply-text" class="mr-1" />{{
 14 |               videoInfo.data.danmaku
 15 |             }}</span
 16 |           >
 17 |           <span
 18 |             ><v-icon icon="mdi-timer-outline" class="mr-1" />
 19 |             {{ formatTimestamp(videoInfo.time) }}</span
 20 |           >
 21 |         </div>
 22 |       </div>
 23 |     </div>
 24 |     <player
 25 |       v-if="videoInfo"
 26 |       :video-url="videoUrl"
 27 |       :aid="videoInfo.aid"
 28 |       :video-info="videoInfo"
 29 |       class="mb-3"
 30 |     />
 31 |     <mmvCard v-if="videoInfo" class="mb-3">
 32 |       <div class="video-info">
 33 |         <div>
 34 |           <div
 35 |             :style="
 36 |               videoInfo.is_liked ? { color: '#65A5EF' } : { color: '#555' }
 37 |             "
 38 |           >
 39 |             <v-icon
 40 |               :icon="
 41 |                 videoInfo.is_liked ? 'mdi-thumb-up' : 'mdi-thumb-up-outline'
 42 |               "
 43 |               class="mr-1"
 44 |               @click="toggleLike"
 45 |             ></v-icon>
 46 |             <span @click="toggleLike">{{ videoInfo.data.like || '0' }}</span>
 47 |           </div>
 48 |         </div>
 49 |         <div class="mt-3" style="color: #555">
 50 |           {{ videoInfo.description || '-' }}
 51 |         </div>
 52 |         <div v-if="videoInfo.origin" style="color: #555">
 53 |           <strong>搬运于:</strong> {{ videoInfo.origin }}
 54 |         </div>
 55 |         <div v-if="formattedTags.length" class="mt-3 -ml-2">
 56 |           <el-tag v-for="tag in formattedTags" :key="tag" class="ml-3">{{
 57 |             tag
 58 |           }}</el-tag>
 59 |         </div>
 60 |       </div>
 61 |     </mmvCard>
 62 |     <mmvCard v-if="videoInfo && upInfo" class="mb-3">
 63 |       <div class="video-info up-details">
 64 |         <avatar :uid="videoInfo.uid" class="mr-5"></avatar>
 65 |         <div class="up-info-details">
 66 |           <v-icon icon="mdi-account-circle" class="mr-3 mb-3" /><strong
 67 |             class="up-name"
 68 |             >#{{ upInfo.exp_rank }} / {{ upInfo.name }}</strong
 69 |           >
 70 |           <p>
 71 |             <v-icon icon="mdi-battery-plus-variant" class="mr-1.25 mb-3" />
 72 |             {{ (upInfo.experience || '0').toFixed(1) }} 点经验
 73 |           </p>
 74 |           <v-btn @click="$router.push(`/space/${videoInfo.uid}`)"
 75 |             >前往TA的空间</v-btn
 76 |           >
 77 |         </div>
 78 |       </div>
 79 |     </mmvCard>
 80 |     <comment :aid="+aid"></comment>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script setup>
 85 | import axios from 'axios'
 86 | import { ref, computed, watch } from 'vue'
 87 | import { useRoute } from 'vue-router'
 88 | import { useUrlStore } from '@/store/urlStore'
 89 | import mmvCard from '@/components/rzm/mmvCard.vue'
 90 | import avatar from '@/components/user/avatar.vue'
 91 | import comment from '@/components/common/comment.vue'
 92 | import player from '@/components/video/player.vue'
 93 | import useFormat from '@/composables/useFormat'
 94 | 
 95 | const route = useRoute()
 96 | const aid = route.params.aid
 97 | const urlStore = useUrlStore()
 98 | const apiUrl = computed(() => urlStore.apiUrl)
 99 | const cosUrl = computed(() => urlStore.cosUrl)
100 | 
101 | let videoUrl
102 | if (parseInt(aid) > 116) {
103 |   videoUrl = `${cosUrl.value}/videos/${aid}/${aid}.m3u8`
104 | } else {
105 |   videoUrl = `${cosUrl.value}/videos/${aid}/index.m3u8`
106 | }
107 | 
108 | const { formatTimestamp, getCategoryByValue } = useFormat()
109 | 
110 | const videoInfo = ref(null)
111 | const lastLikeClickTime = ref(0)
112 | 
113 | // 格式化视频标签
114 | const formattedTags = computed(() => {
115 |   if (videoInfo.value && videoInfo.value.tags) {
116 |     let newTags = []
117 | 
118 |     if (videoInfo.value.source) {
119 |       newTags.push(videoInfo.value.source)
120 |     }
121 |     if (getCategoryByValue(videoInfo.value.category)) {
122 |       newTags.push(getCategoryByValue(videoInfo.value.category))
123 |     }
124 | 
125 |     return [...newTags, ...videoInfo.value.tags]
126 |   }
127 |   return []
128 | })
129 | 
130 | // 获取视频信息
131 | axios.get(`${apiUrl.value}/api/video/get/${aid}`).then((response) => {
132 |   videoInfo.value = response.data
133 | })
134 | 
135 | const upInfo = ref(null)
136 | 
137 | // 当有videoInfo时，获取UP主信息
138 | watch(videoInfo, async () => {
139 |   if (videoInfo.value) {
140 |     const response = await axios.get(
141 |       `${apiUrl.value}/api/space/${videoInfo.value.uid}`
142 |     )
143 |     upInfo.value = response.data
144 |   }
145 | })
146 | 
147 | // 点赞功能，防止用户连续点击
148 | const toggleLike = async () => {
149 |   const currentTime = Date.now()
150 |   if (currentTime - lastLikeClickTime.value < 1000) {
151 |     ElMessage({
152 |       message: '请稍等一秒再点击！',
153 |       type: 'warning',
154 |     })
155 |     return
156 |   }
157 |   lastLikeClickTime.value = currentTime
158 |   try {
159 |     const response = await axios.post(
160 |       `${apiUrl.value}/api/video/toggle/like/${aid}`
161 |     )
162 |     // 切换点赞状态
163 |     videoInfo.value.data.like += response.data.likes
164 |     videoInfo.value.is_liked = !videoInfo.value.is_liked
165 |     ElMessage({
166 |       message: '操作成功',
167 |       type: 'success',
168 |     })
169 |   } catch (error) {
170 |     const errorMessage = error.response?.data?.message || '操作失败，请稍后再试'
171 |     ElMessage({
172 |       message: errorMessage,
173 |       type: 'error',
174 |     })
175 |   }
176 | }
177 | </script>
178 | 
179 | <style scoped>
180 | .video-info {
181 |   margin-bottom: 15px;
182 | }
183 | 
184 | .video-info h3 {
185 |   font-size: 1.4em;
186 |   font-weight: bold;
187 |   margin-bottom: 10px;
188 | }
189 | 
190 | .up-details {
191 |   display: flex;
192 |   align-items: center;
193 | }
194 | 
195 | .up-name {
196 |   font-size: 1.2em;
197 |   margin-bottom: 10px;
198 | }
199 | 
200 | .up-info-details {
201 |   flex-grow: 1;
202 |   color: #666;
203 | }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/components/common/comment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <mmCard title="留言板">
  3 |     <v-text-field
  4 |       v-model="newComment"
  5 |       label="添加评论..."
  6 |       maxlength="200"
  7 |       counter
  8 |     ></v-text-field>
  9 | 
 10 |     <v-btn @click="postComment">提交</v-btn>
 11 |     <div class="mt-2"></div>
 12 |     <v-list>
 13 |       <div v-for="comment in comments" :key="comment._id">
 14 |         <mmvCard
 15 |           style="margin: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2)"
 16 |           :enable-shadow="false"
 17 |         >
 18 |           <v-list-item>
 19 |             <v-list-item-title>
 20 |               <strong>#{{ comment.exp_rank }} / {{ comment.username }}</strong>
 21 |               <span class="ml-2" style="color: #777; font-size: 13px"
 22 |                 >{{ comment.floor }}楼</span
 23 |               >
 24 |             </v-list-item-title>
 25 |             <v-list-item-subtitle>{{
 26 |               formatTimestamp(comment.time)
 27 |             }}</v-list-item-subtitle>
 28 |             <p>{{ comment.content }}</p>
 29 |             <v-list-item-action>
 30 |               <v-btn
 31 |                 size="x-small"
 32 |                 icon="mdi-comment"
 33 |                 @click="showReplyBox(comment._id)"
 34 |               ></v-btn>
 35 |             </v-list-item-action>
 36 |           </v-list-item>
 37 |         </mmvCard>
 38 |         <div class="ml-9">
 39 |           <v-expand-transition>
 40 |             <mmvCard
 41 |               v-if="commentStates[comment._id]?.showReply"
 42 |               style="margin: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2)"
 43 |               :enable-shadow="false"
 44 |             >
 45 |               <v-list-item v-if="commentStates[comment._id]?.showReply">
 46 |                 <v-text-field
 47 |                   v-model="commentStates[comment._id].replyContent"
 48 |                   label="回复..."
 49 |                   maxlength="100"
 50 |                   counter
 51 |                 ></v-text-field>
 52 |                 <v-btn @click="postReply(comment._id)">提交回复</v-btn>
 53 |               </v-list-item>
 54 |             </mmvCard>
 55 |           </v-expand-transition>
 56 |           <mmvCard
 57 |             v-if="comment.replies.length > 0"
 58 |             style="margin: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2)"
 59 |             :enable-shadow="false"
 60 |           >
 61 |             <v-list-item v-for="reply in comment.replies" :key="reply._id">
 62 |               <v-list-item-title>
 63 |                 <strong>#{{ reply.exp_rank }} / {{ reply.username }}</strong>
 64 |                 <span class="ml-2" style="color: #777; font-size: 13px"
 65 |                   >{{ reply.floor }}楼</span
 66 |                 >
 67 |               </v-list-item-title>
 68 |               <v-list-item-subtitle>{{
 69 |                 formatTimestamp(reply.time)
 70 |               }}</v-list-item-subtitle>
 71 |               <p>{{ reply.content }}</p>
 72 |             </v-list-item>
 73 |           </mmvCard>
 74 |         </div>
 75 |       </div>
 76 |     </v-list>
 77 |   </mmCard>
 78 | </template>
 79 | 
 80 | <script setup>
 81 | import axios from 'axios'
 82 | import { useUrlStore } from '@/store/urlStore'
 83 | import { ref, onMounted, computed } from 'vue'
 84 | import mmCard from '@/components/rzm/mmCard.vue'
 85 | import mmvCard from '@/components/rzm/mmvCard.vue'
 86 | import useFormat from '@/composables/useFormat'
 87 | 
 88 | const urlStore = useUrlStore()
 89 | const apiUrl = computed(() => urlStore.apiUrl)
 90 | const { formatTimestamp } = useFormat()
 91 | 
 92 | const props = defineProps({
 93 |   aid: {
 94 |     type: Number,
 95 |     default: null,
 96 |   },
 97 |   type: {
 98 |     type: String,
 99 |     default: 'video',
100 |   },
101 | })
102 | 
103 | const newComment = ref('') // 用于保存新评论的内容
104 | const comments = ref([]) // 用于保存从服务器获取的评论列表
105 | 
106 | const loadComments = async () => {
107 |   const url =
108 |     props.type === 'video'
109 |       ? `${apiUrl.value}/api/comment/${props.type}/${props.aid}`
110 |       : `${apiUrl.value}/api/comment/${props.type}`
111 |   const response = await axios.get(url)
112 |   comments.value = response.data
113 | }
114 | 
115 | const lastCommentContent = ref('') // 上一次成功提交的评论内容
116 | const lastReplyContent = ref({}) // 键是commentId，值是上一次成功提交的回复内容
117 | 
118 | // 评论逻辑
119 | const postComment = async () => {
120 |   const content = newComment.value
121 | 
122 |   if (content === lastCommentContent.value) {
123 |     ElMessage({
124 |       message: '两次评论内容不能相同！',
125 |       type: 'warning',
126 |     })
127 |     return
128 |   }
129 | 
130 |   try {
131 |     const content = newComment.value
132 |     const url =
133 |       props.type === 'video'
134 |         ? `${apiUrl.value}/api/comment/${props.type}/${props.aid}`
135 |         : `${apiUrl.value}/api/comment/${props.type}`
136 |     await axios.post(url, { content })
137 |     lastCommentContent.value = content
138 |     loadComments()
139 |     ElMessage({
140 |       message: '评论发布成功',
141 |       type: 'success',
142 |     })
143 |   } catch (error) {
144 |     const errorMessage =
145 |       error.response?.data?.message || '评论发布失败，请稍后再试'
146 |     ElMessage({
147 |       message: errorMessage,
148 |       type: 'error',
149 |     })
150 |   }
151 | 
152 |   newComment.value = ''
153 | }
154 | 
155 | // 显示/隐藏回复框的逻辑
156 | const commentStates = ref({})
157 | 
158 | const showReplyBox = (commentId) => {
159 |   if (!commentStates.value[commentId]) {
160 |     commentStates.value = {
161 |       ...commentStates.value,
162 |       [commentId]: { showReply: true, replyContent: '' },
163 |     }
164 |   } else {
165 |     commentStates.value[commentId].showReply =
166 |       !commentStates.value[commentId].showReply
167 |   }
168 | }
169 | 
170 | const postReply = async (commentId) => {
171 |   const content = commentStates.value[commentId].replyContent
172 | 
173 |   if (content === lastReplyContent.value[commentId]) {
174 |     ElMessage({
175 |       message: '两次回复内容不能相同！',
176 |       type: 'warning',
177 |     })
178 |     return
179 |   }
180 | 
181 |   commentStates.value[commentId].replyContent = ''
182 |   commentStates.value[commentId].showReply = false
183 |   const url = `${apiUrl.value}/api/comment/${props.type}/reply/${commentId}`
184 |   try {
185 |     await axios.post(url, { content })
186 |     if (!lastReplyContent.value[commentId]) {
187 |       lastReplyContent.value[commentId] = '' // 如果不存在就初始化
188 |     }
189 |     lastReplyContent.value[commentId] = content // 更新为当前成功提交的回复内容
190 |     loadComments()
191 |     ElMessage({
192 |       message: '回复发布成功',
193 |       type: 'success',
194 |     })
195 |   } catch (error) {
196 |     const errorMessage =
197 |       error.response?.data?.message || '回复发布失败，请稍后再试'
198 |     ElMessage({
199 |       message: errorMessage,
200 |       type: 'error',
201 |     })
202 |   }
203 | }
204 | 
205 | onMounted(() => {
206 |   loadComments()
207 | })
208 | </script>
209 | 


--------------------------------------------------------------------------------
/src/components/navBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <!-- 顶部工具栏 -->
  4 |     <v-app-bar>
  5 |       <template #image>
  6 |         <v-img
  7 |           :style="{
  8 |             background: 'url(' + randomNavImage + ') no-repeat right center',
  9 |             opacity: '0.7',
 10 |           }"
 11 |         ></v-img>
 12 |       </template>
 13 |       <v-app-bar-nav-icon
 14 |         color="#333"
 15 |         @click="drawer = !drawer"
 16 |       ></v-app-bar-nav-icon>
 17 |       <v-btn color="#333" min-width="100" to="/"
 18 |         ><v-toolbar-title>猫猫站</v-toolbar-title></v-btn
 19 |       >
 20 | 
 21 |       <v-spacer></v-spacer>
 22 |       <!-- 将按钮推到工具栏的右侧 -->
 23 | 
 24 |       <v-btn
 25 |         v-if="sessionData.signin"
 26 |         color="#333"
 27 |         min-width="70"
 28 |         @click="checkIn"
 29 |         >{{ hasCheckedIn ? '已签到' : '签到' }}</v-btn
 30 |       >
 31 |       <v-btn color="#333" min-width="70" to="/member/upload"
 32 |         ><v-icon>mdi-upload</v-icon>投稿</v-btn
 33 |       >
 34 |     </v-app-bar>
 35 | 
 36 |     <!-- 导航栏 -->
 37 |     <v-navigation-drawer v-model="drawer" width="300">
 38 |       <mmvCard
 39 |         v-if="sessionData.signin"
 40 |         :show-ripple="true"
 41 |         class="mt-3"
 42 |         @click="goToProfile"
 43 |       >
 44 |         <v-row align="center">
 45 |           <v-col cols="auto">
 46 |             <avatar :uid="sessionData.uid"></avatar>
 47 |           </v-col>
 48 | 
 49 |           <v-col>
 50 |             <div class="user-name">{{ sessionData.name }}</div>
 51 |             <div class="user-uid">UID：{{ sessionData.uid }}</div>
 52 |           </v-col>
 53 |         </v-row>
 54 |         <v-row>
 55 |           <v-col>
 56 |             <div>
 57 |               经验：{{ (sessionData.checkin.experience || 0).toFixed(1) }} (#{{
 58 |                 sessionData.checkin.exp_rank
 59 |               }})
 60 |             </div>
 61 |             <div>积分：{{ (sessionData.checkin.points || 0).toFixed(1) }}</div>
 62 |           </v-col>
 63 |         </v-row>
 64 |       </mmvCard>
 65 |       <v-list @click="closeDrawer">
 66 |         <v-list-item
 67 |           v-for="(item, i) in items"
 68 |           :key="i"
 69 |           :value="item"
 70 |           :to="item.to"
 71 |         >
 72 |           <template #prepend>
 73 |             <v-icon :icon="item.icon"></v-icon>
 74 |           </template>
 75 | 
 76 |           <v-list-item-title>{{ item.text }}</v-list-item-title>
 77 |         </v-list-item>
 78 |       </v-list>
 79 |       <div class="footer-section">
 80 |         <div class="footer-content">
 81 |           技术交流群: 542174643<br />
 82 |           粉丝与网站讨论群: 883422705<br />
 83 |           <el-link
 84 |             type="primary"
 85 |             href="https://curl.qcloud.com/mzc5gXg0"
 86 |             target="_blank"
 87 |             >腾讯云轻量应用服务器真的非常好用</el-link
 88 |           ><br />
 89 |         </div>
 90 |       </div>
 91 |       <img :src="randomDrawerImage" alt="侧边栏图片" class="sidebar-image" />
 92 |     </v-navigation-drawer>
 93 |     <v-main>
 94 |       <slot></slot>
 95 |     </v-main>
 96 |   </v-app>
 97 | </template>
 98 | 
 99 | <script setup>
100 | import { useRouter } from 'vue-router'
101 | import { ref, computed, onMounted } from 'vue'
102 | import { useUrlStore } from '@/store/urlStore'
103 | import { useUserStore } from '@/store/userStore'
104 | import axios from 'axios'
105 | import avatar from '@/components/user/avatar.vue'
106 | import mmvCard from '@/components/rzm/mmvCard.vue'
107 | 
108 | const urlStore = useUrlStore()
109 | const userStore = useUserStore()
110 | const router = useRouter()
111 | 
112 | const apiUrl = computed(() => urlStore.apiUrl)
113 | const cosUrl = computed(() => urlStore.cosUrl)
114 | const sessionData = computed(() => userStore.sessionData)
115 | 
116 | const hasCheckedIn = ref(false)
117 | 
118 | const randomNavImage = computed(() => {
119 |   const randomNumber = Math.floor(Math.random() * 1) //随机0~1 png
120 |   return `${cosUrl.value}/nav/${randomNumber}.png`
121 | })
122 | 
123 | const randomDrawerImage = computed(() => {
124 |   const randomNumber = Math.floor(Math.random() * 2) + 5 // 随机5或6
125 |   return `${cosUrl.value}/nav/${randomNumber}.png`
126 | })
127 | 
128 | const drawer = ref(false)
129 | 
130 | const goToProfile = () => {
131 |   router.push(`/space/${sessionData.value.uid}`)
132 |   drawer.value = false
133 | }
134 | 
135 | const closeDrawer = () => {
136 |   drawer.value = false
137 | }
138 | 
139 | const items = computed(() => {
140 |   const baseItems = [
141 |     { text: '主页', icon: 'mdi-inbox', to: '/' },
142 |     { text: '喵绘者排行', icon: 'mdi-airplane', to: '/user/rank' },
143 |     { text: '关于本网站', icon: 'mdi-information', to: '/about' },
144 |     { text: 'FAQ', icon: 'mdi-frequently-asked-questions', to: '/faq' },
145 |     { text: '可公开数据', icon: 'mdi-chart-donut', to: '/data' },
146 |     { text: '开发日志', icon: 'mdi-timeline', to: '/log' },
147 |   ]
148 | 
149 |   if (!sessionData.value.signin) {
150 |     baseItems.unshift({ text: '登录', icon: 'mdi-account', to: '/user/signin' })
151 |     baseItems.unshift({ text: '注册', icon: 'mdi-account', to: '/user/signup' })
152 |   }
153 | 
154 |   return baseItems
155 | })
156 | 
157 | const fetchCheckInStatus = async () => {
158 |   try {
159 |     const response = await axios.get(`${apiUrl.value}/api/user/session/get`)
160 |     if (response.data && response.data.checkin.can_checkin !== undefined) {
161 |       hasCheckedIn.value = !response.data.checkin.can_checkin // 注意这里使用"!"，因为如果"can_checkin"是true，那么用户还没有签到
162 |     }
163 |   } catch (error) {
164 |     console.error('获取签到状态错误:', error)
165 |   }
166 | }
167 | 
168 | const checkIn = async () => {
169 |   try {
170 |     const response = await axios.post(`${apiUrl.value}/api/user/checkin`)
171 |     if (response.data.state == 'success') {
172 |       hasCheckedIn.value = true
173 |       const userDataResponse = await axios.get(
174 |         `${apiUrl.value}/api/user/session/get`
175 |       )
176 |       if (userDataResponse.data) {
177 |         userStore.setSessionData(userDataResponse.data)
178 |       }
179 |       ElNotification({
180 |         title: '签到成功',
181 |         message: response.data.message,
182 |         type: 'success',
183 |       })
184 |     } else {
185 |       ElNotification({
186 |         title: '签到失败',
187 |         message: response.data.message,
188 |         type: 'warning',
189 |       })
190 |     }
191 |   } catch (error) {
192 |     ElNotification({
193 |       title: '签到失败！',
194 |       message: error,
195 |       type: 'error',
196 |     })
197 |   }
198 | }
199 | 
200 | onMounted(fetchCheckInStatus)
201 | </script>
202 | 
203 | <style scoped>
204 | .user-name {
205 |   font-size: 18px;
206 |   font-weight: bold;
207 | }
208 | 
209 | .user-uid {
210 |   color: grey;
211 |   font-size: 14px;
212 | }
213 | 
214 | .footer-section {
215 |   position: absolute;
216 |   bottom: 0;
217 |   width: 100%;
218 |   z-index: 10;
219 |   color: #555;
220 |   font-size: 14px;
221 | }
222 | 
223 | .footer-content {
224 |   text-align: center;
225 | }
226 | 
227 | .sidebar-image {
228 |   position: absolute;
229 |   bottom: 10px;
230 |   left: 10px;
231 |   width: 200px;
232 |   height: auto;
233 |   z-index: -1;
234 |   opacity: 0.5;
235 | }
236 | </style>
237 | 


--------------------------------------------------------------------------------
/src/views/user/setting.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <mmCard v-if="!showSuccessResult" title="修改个人信息">
  4 |       <el-form ref="VideoForm" :model="formData" label-position="top">
  5 |         <el-form-item label="头像" prop="face">
  6 |           <el-upload
  7 |             class="face-uploader"
  8 |             :show-file-list="false"
  9 |             :before-upload="handlefaceSelection"
 10 |             accept="image/*"
 11 |           >
 12 |             <img
 13 |               v-if="finalfaceImage"
 14 |               class="face"
 15 |               :src="finalfaceImage"
 16 |               @error="(event) => (event.target.src = '/default_face.png')"
 17 |             />
 18 |             <el-icon v-else class="face-uploader-icon"><Plus /></el-icon>
 19 |           </el-upload>
 20 |           <el-dialog
 21 |             :model-value="cropperVisible"
 22 |             width="30%"
 23 |             @update:model-value="(val) => handleDialogClose(val)"
 24 |           >
 25 |             <vue-cropper
 26 |               ref="cropperRef"
 27 |               :key="cropperKey"
 28 |               :src="faceImagePreview"
 29 |               :aspect-ratio="1"
 30 |               :guides="true"
 31 |               :view-mode="1"
 32 |             />
 33 |             <span slot="footer" class="dialog-footer">
 34 |               <el-button @click="cropperVisible = false">取消</el-button>
 35 |               <el-button type="primary" @click="cropImage">裁剪</el-button>
 36 |             </span>
 37 |           </el-dialog>
 38 |         </el-form-item>
 39 |         <el-form-item
 40 |           label="昵称"
 41 |           prop="name"
 42 |           :rules="[
 43 |             {
 44 |               required: true,
 45 |               message: '昵称为必填项。',
 46 |             },
 47 |           ]"
 48 |         >
 49 |           <el-input
 50 |             v-model="formData.name"
 51 |             placeholder="这里可以修改昵称哦！"
 52 |             prefix-icon="User"
 53 |           />
 54 |         </el-form-item>
 55 |         <el-form-item>
 56 |           <el-button
 57 |             type="primary"
 58 |             :loading="isSubmitting"
 59 |             :disabled="isSubmitting"
 60 |             @click="updateProfile"
 61 |           >
 62 |             修改
 63 |           </el-button>
 64 |         </el-form-item>
 65 |       </el-form>
 66 |     </mmCard>
 67 |     <el-result
 68 |       v-if="showSuccessResult"
 69 |       icon="success"
 70 |       title="修改成功！"
 71 |       sub-title="头像将在压缩后显示"
 72 |     >
 73 |       <template #extra>
 74 |         <el-button type="primary" @click="goBack">返回到主页</el-button>
 75 |       </template>
 76 |     </el-result>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script setup>
 81 | import axios from 'axios'
 82 | import VueCropper from 'vue-cropperjs'
 83 | import 'cropperjs/dist/cropper.css'
 84 | import { ref, reactive, computed } from 'vue'
 85 | import { useUserStore } from '@/store/userStore'
 86 | import { useUrlStore } from '@/store/urlStore'
 87 | 
 88 | const cropperVisible = ref(false) // 控制裁剪器的显示状态
 89 | const finalfaceImage = ref(null) // 最终裁剪后的图像
 90 | 
 91 | const userStore = useUserStore()
 92 | const urlStore = useUrlStore()
 93 | const apiUrl = computed(() => urlStore.apiUrl)
 94 | const cosUrl = computed(() => urlStore.cosUrl)
 95 | const sessionData = computed(() => userStore.sessionData)
 96 | const cropperRef = ref()
 97 | const isSubmitting = ref(false) // 控制提交的状态，以便于显示提交过程中的动画或阻止多次点击
 98 | const showSuccessResult = ref(false) // 控制显示成功结果的状态
 99 | 
100 | const formData = reactive({
101 |   name: sessionData.value.name,
102 |   faceFile: null,
103 | })
104 | 
105 | // 计算默认的头像URL
106 | const defaultfaceUrl = computed(
107 |   () => `${cosUrl.value}/face/${sessionData.value.uid}.jpg`
108 | )
109 | if (!finalfaceImage.value) {
110 |   finalfaceImage.value = defaultfaceUrl.value
111 | }
112 | 
113 | // 预览用户选择的头像
114 | const faceImagePreview = ref(null)
115 | const handlefaceSelection = (file) => {
116 |   if (file.size / 1024 / 1024 > 5) {
117 |     ElMessage.error('图片大小不能超过5MB！')
118 |     return false
119 |   }
120 | 
121 |   // 使用 FileReader 将选中的文件转为 dataURL 供 vue-cropper 使用
122 |   const reader = new FileReader()
123 |   reader.onload = (e) => {
124 |     faceImagePreview.value = e.target.result
125 |     cropperVisible.value = true
126 |   }
127 |   reader.readAsDataURL(file)
128 | 
129 |   return false // 阻止自动上传
130 | }
131 | 
132 | // 裁剪图像的函数
133 | const cropImage = () => {
134 |   const cropper = cropperRef.value.cropper
135 |   const canvas = cropper.getCroppedCanvas()
136 | 
137 |   canvas.toBlob((blob) => {
138 |     formData.faceFile = new File([blob], 'cropped-image.jpg', {
139 |       type: 'image/jpeg',
140 |       lastModified: new Date().getTime(),
141 |     })
142 |   }, 'image/jpeg')
143 | 
144 |   finalfaceImage.value = canvas.toDataURL()
145 |   cropperVisible.value = false
146 |   faceImagePreview.value = null
147 | }
148 | 
149 | // 用于防止裁剪器缓存的Key
150 | const cropperKey = ref(0)
151 | 
152 | // 处理对话框关闭的函数
153 | const handleDialogClose = (val) => {
154 |   cropperVisible.value = val
155 |   if (!val) {
156 |     faceImagePreview.value = null
157 |     cropperKey.value++
158 |   }
159 | }
160 | 
161 | // 更新用户资料的函数
162 | const updateProfile = async () => {
163 |   isSubmitting.value = true
164 |   const formDataToSend = new FormData()
165 | 
166 |   formDataToSend.append('name', formData.name)
167 | 
168 |   if (formData.faceFile) {
169 |     formDataToSend.append('face', formData.faceFile)
170 |   }
171 | 
172 |   try {
173 |     const response = await axios.post(
174 |       `${apiUrl.value}/api/user/update`,
175 |       formDataToSend,
176 |       {
177 |         headers: {
178 |           'Content-Type': 'multipart/form-data',
179 |         },
180 |       }
181 |     )
182 | 
183 |     if (response.data && response.data.state == 'succeed') {
184 |       ElNotification({
185 |         title: '修改成功！',
186 |         message: response.data.message,
187 |         type: 'success',
188 |       })
189 |       showSuccessResult.value = true
190 |     } else {
191 |       ElNotification({
192 |         title: '修改失败！',
193 |         message: response.data.message,
194 |         type: 'warning',
195 |       })
196 |     }
197 |   } catch (error) {
198 |     // ElNotification({
199 |     //   title: '修改失败！',
200 |     //   message: error,
201 |     //   type: 'error',
202 |     // });
203 |   }
204 | }
205 | 
206 | // 返回主页的函数
207 | const goBack = () => {
208 |   location.reload(true)
209 |   window.location.href = '/'
210 | }
211 | </script>
212 | 
213 | <style>
214 | .face-uploader .face {
215 |   width: 100px;
216 |   height: 100px;
217 |   display: block;
218 |   object-fit: face; /* 保持图片的纵横比 */
219 |   border-radius: 6px; /* 圆角效果 */
220 | }
221 | 
222 | .face-uploader .el-upload {
223 |   border: 2px dashed var(--el-border-color);
224 |   border-radius: 8px;
225 |   cursor: pointer;
226 |   position: relative;
227 |   overflow: hidden;
228 |   transition: var(--el-transition-duration-fast);
229 |   padding: 10px; /* 内部留白，让整个区域更易点击 */
230 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
231 |   background-color: #fafafa; /* 背景颜色 */
232 | }
233 | 
234 | .face-uploader .el-upload:hover {
235 |   border-color: var(--el-color-primary);
236 |   background-color: #f5f5f5; /* 当悬停时深一点的背景颜色 */
237 | }
238 | 
239 | .el-icon.face-uploader-icon {
240 |   font-size: 32px; /* 稍大的图标 */
241 |   color: #8c939d;
242 |   width: 100px;
243 |   height: 100px;
244 |   text-align: center;
245 |   transition: color 0.3s; /* 颜色过渡效果 */
246 | }
247 | 
248 | .face-uploader .el-upload:hover .face-uploader-icon {
249 |   color: var(--el-color-primary); /* 当悬停时，使用主题颜色 */
250 | }
251 | </style>
252 | 


--------------------------------------------------------------------------------
/src/views/user/signup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <mmCard title="注册">
  3 |     <el-form ref="signupForm" :model="formData" label-position="top">
  4 |       <el-form-item
  5 |         label="邮箱"
  6 |         prop="email"
  7 |         :rules="[
  8 |           {
  9 |             required: true,
 10 |             message: '邮箱为必填项。',
 11 |           },
 12 |         ]"
 13 |       >
 14 |         <el-col :xs="24" :lg="18">
 15 |           <el-input
 16 |             v-model="formData.email"
 17 |             placeholder="请输入您的一个邮箱..."
 18 |           >
 19 |             <template #prefix>
 20 |               <svg
 21 |                 t="1681639108728"
 22 |                 class="icon"
 23 |                 viewBox="0 0 1024 1024"
 24 |                 version="1.1"
 25 |                 xmlns="http://www.w3.org/2000/svg"
 26 |                 p-id="2657"
 27 |                 width="15"
 28 |                 height="15"
 29 |               >
 30 |                 <path
 31 |                   d="M838.954667 234.666667H170.666667c-3.626667 0-7.168 0.448-10.56 1.322666l323.690666 323.669334a21.333333 21.333333 0 0 0 30.165334 0L838.954667 234.666667z m46.144 14.186666l-260.693334 260.693334 262.933334 262.912c5.44-7.168 8.661333-16.106667 8.661333-25.792V277.333333c0-10.944-4.117333-20.906667-10.88-28.48zM843.861333 789.333333l-249.6-249.621333-50.133333 50.133333a64 64 0 0 1-90.517333 0l-50.112-50.133333L156.373333 786.88c4.48 1.578667 9.28 2.453333 14.314667 2.453333h673.194667zM128.661333 754.218667L373.333333 509.525333 129.578667 265.813333A42.709333 42.709333 0 0 0 128 277.333333v469.333334c0 2.56 0.213333 5.098667 0.661333 7.552zM170.666667 192h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v469.333334a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V277.333333a85.333333 85.333333 0 0 1 85.333334-85.333333z"
 32 |                   fill="#A8ABB2"
 33 |                   p-id="2658"
 34 |                 ></path>
 35 |               </svg>
 36 |             </template>
 37 |           </el-input>
 38 |         </el-col>
 39 | 
 40 |         <el-col :lg="5" :offset="1" class="hidden-md-and-down">
 41 |           <el-button
 42 |             style="width: 100%"
 43 |             type="primary"
 44 |             :disabled="formData.btn.isDisabled"
 45 |             @click="getAuth"
 46 |           >
 47 |             {{ formData.btn.text }}
 48 |           </el-button>
 49 |         </el-col>
 50 | 
 51 |         <el-col :xs="24" class="hidden-lg-and-up">
 52 |           <el-button
 53 |             style="width: 100%"
 54 |             type="primary"
 55 |             :disabled="formData.btn.isDisabled"
 56 |             @click="getAuth"
 57 |           >
 58 |             {{ formData.btn.text }}
 59 |           </el-button>
 60 |         </el-col>
 61 |       </el-form-item>
 62 |       <el-form-item
 63 |         label="验证码"
 64 |         prop="auth"
 65 |         :rules="[
 66 |           {
 67 |             required: true,
 68 |             message: '验证码为必填项。',
 69 |           },
 70 |         ]"
 71 |       >
 72 |         <el-input
 73 |           v-model="formData.auth"
 74 |           placeholder="请输入您获取的验证码..."
 75 |           prefix-icon="ChatLineRound"
 76 |           :disabled="formData.btn.isInputDisabled"
 77 |           maxlength="6"
 78 |         />
 79 |       </el-form-item>
 80 |       <el-form-item
 81 |         label="昵称"
 82 |         prop="name"
 83 |         :rules="[
 84 |           {
 85 |             required: true,
 86 |             message: '昵称为必填项。',
 87 |           },
 88 |         ]"
 89 |       >
 90 |         <el-input
 91 |           v-model="formData.name"
 92 |           placeholder="请输入您的账号..."
 93 |           prefix-icon="User"
 94 |         />
 95 |       </el-form-item>
 96 |       <el-form-item
 97 |         label="密码"
 98 |         prop="password"
 99 |         :rules="[
100 |           {
101 |             required: true,
102 |             message: '密码为必填项。',
103 |           },
104 |         ]"
105 |       >
106 |         <el-input
107 |           v-model="formData.password"
108 |           placeholder="请输入您的密码..."
109 |           show-password
110 |           prefix-icon="Lock"
111 |         />
112 |       </el-form-item>
113 |       <el-form-item
114 |         label="重复密码"
115 |         prop="again_password"
116 |         :rules="[
117 |           {
118 |             required: true,
119 |             message: '重复密码为必填。',
120 |           },
121 |         ]"
122 |       >
123 |         <el-input
124 |           v-model="formData.again_password"
125 |           placeholder="请再次输入密码..."
126 |           show-password
127 |           prefix-icon="Lock"
128 |         />
129 |       </el-form-item>
130 |       <el-form-item>
131 |         <el-button type="primary" @click="submitForm(signupForm)"
132 |           >注册</el-button
133 |         >
134 |         <el-button @click="goToSignin">登录</el-button>
135 |       </el-form-item>
136 |     </el-form>
137 |   </mmCard>
138 | </template>
139 | 
140 | <script setup>
141 | import { reactive, computed, ref, watch } from 'vue'
142 | import { useRouter } from 'vue-router'
143 | import { useUrlStore } from '@/store/urlStore'
144 | import router from '@/router'
145 | import axios from 'axios'
146 | import mmCard from '@/components/rzm/mmCard.vue'
147 | 
148 | const urlStore = useUrlStore()
149 | const apiUrl = computed(() => urlStore.apiUrl)
150 | 
151 | const urouter = useRouter()
152 | const goToSignin = () => {
153 |   urouter.replace('/user/signin')
154 | }
155 | 
156 | const formData = reactive({
157 |   email: '',
158 |   btn: {
159 |     isDisabled: true,
160 |     isInputDisabled: true,
161 |     value: 60,
162 |     text: '获取验证代码',
163 |   },
164 |   auth: '',
165 |   name: '',
166 |   password: '',
167 |   again_password: '',
168 | })
169 | let RegEmail = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
170 | watch(
171 |   () => formData.email,
172 |   () => {
173 |     if (RegEmail.test(formData.email)) {
174 |       formData.btn.isDisabled = false
175 |       formData.btn.isInputDisabled = false
176 |     }
177 |   }
178 | )
179 | const signupForm = ref(null)
180 | 
181 | const getAuth = () => {
182 |   formData.btn.isDisabled = true
183 |   formData.btn.text = `重新发送：${formData.btn.value}秒`
184 |   axios.post(`${apiUrl.value}/api/user/signup/auth`, { email: formData.email })
185 |   const auth_timer = setInterval(() => {
186 |     formData.btn.value--
187 |     formData.btn.text = `重新发送：${formData.btn.value}秒`
188 |     if (formData.btn.value === 0) {
189 |       formData.btn.isDisabled = false
190 |       clearInterval(auth_timer)
191 |       formData.btn.value = 60
192 |       formData.btn.text = '获取验证代码'
193 |     }
194 |   }, 1000)
195 | }
196 | 
197 | const submitForm = (formEl) => {
198 |   if (!formEl) return
199 | 
200 |   const validatePasswordLength = (password) => {
201 |     return password.length >= 6
202 |   }
203 | 
204 |   const validatePasswordsMatch = (password, again_password) => {
205 |     return password === again_password
206 |   }
207 | 
208 |   const validateNameLength = (name) => {
209 |     return name.length >= 3 && name.length <= 10
210 |   }
211 | 
212 |   formEl.validate((valid) => {
213 |     if (!valid) {
214 |       ElMessage({
215 |         message: '错误：未填必填项',
216 |         type: 'warning',
217 |       })
218 |       return
219 |     }
220 | 
221 |     if (!validatePasswordLength(formData.password)) {
222 |       ElMessage({
223 |         message: '错误：密码不能小于6个字符。',
224 |         type: 'warning',
225 |       })
226 |       return
227 |     }
228 | 
229 |     if (!validatePasswordsMatch(formData.password, formData.again_password)) {
230 |       ElMessage({
231 |         message: '错误：两次密码输入不一致。',
232 |         type: 'warning',
233 |       })
234 |       return
235 |     }
236 | 
237 |     if (!validateNameLength(formData.name)) {
238 |       ElMessage({
239 |         message: '错误：昵称长度需要在3-10之间。',
240 |         type: 'warning',
241 |       })
242 |       return
243 |     }
244 | 
245 |     axios
246 |       .post(`${apiUrl.value}/api/user/signup`, {
247 |         email: formData.email,
248 |         name: formData.name,
249 |         auth: formData.auth,
250 |         password: formData.password,
251 |       })
252 |       .then((response) => {
253 |         let res = response.data
254 |         if (res['state'] === 'succeed') {
255 |           ElNotification({
256 |             // TODO: 发送验证链接而不是验证码
257 |             title: '注册成功',
258 |             message: '即将为您跳转到登录页面...',
259 |             type: 'success',
260 |           })
261 |           router.push('/user/signin')
262 |         } else if (res['state'] === 'error') {
263 |           ElMessage({
264 |             message: res['message'],
265 |             type: 'error',
266 |           })
267 |         }
268 |       })
269 |       .catch((error) => {
270 |         ElMessage({
271 |           message: error,
272 |           type: 'error',
273 |         })
274 |       })
275 |   })
276 | }
277 | </script>
278 | 


--------------------------------------------------------------------------------
/src/views/member/upload.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 视频上传器 -->
  4 |     <div v-if="showUploader">
  5 |       <mmCard title="投稿一个视频">
  6 |         <el-upload
  7 |           class="upload-demo"
  8 |           drag
  9 |           :action="apiUrl + '/api/upload/video'"
 10 |           :auto-upload="false"
 11 |           :show-file-list="false"
 12 |           accept="video/*"
 13 |           @change="onFileChange"
 14 |         >
 15 |           <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 16 |           <div class="el-upload__text">上传</div>
 17 |           <template #tip>
 18 |             <div class="el-upload__tip">文件大小不能超过500M。</div>
 19 |           </template>
 20 |         </el-upload>
 21 |         <el-progress
 22 |           v-if="isIndeterminateLoading"
 23 |           :percentage="uploadProgress"
 24 |         />
 25 |         <div v-if="uploadProgress === 100 && isIndeterminateLoading">
 26 |           正在加载...
 27 |         </div>
 28 |       </mmCard>
 29 |     </div>
 30 | 
 31 |     <!-- 视频信息填写 -->
 32 |     <div v-else-if="!showSuccessResult">
 33 |       <mmCard title="填写视频信息">
 34 |         <!-- 视频信息表单 -->
 35 |         <el-form ref="VideoForm" :model="formData" label-position="top">
 36 |           <el-form-item
 37 |             label="封面"
 38 |             prop="cover"
 39 |             :rules="[
 40 |               {
 41 |                 required: true,
 42 |                 message: '封面为必填项。',
 43 |               },
 44 |             ]"
 45 |           >
 46 |             <el-upload
 47 |               class="avatar-uploader"
 48 |               :show-file-list="false"
 49 |               :before-upload="handleCoverSelection"
 50 |               accept="image/*"
 51 |             >
 52 |               <!-- 图片预览 -->
 53 |               <img
 54 |                 v-if="coverImagePreview"
 55 |                 class="avatar"
 56 |                 :src="coverImagePreview"
 57 |               />
 58 |               <!-- 上传图标 -->
 59 |               <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
 60 |             </el-upload>
 61 |           </el-form-item>
 62 |           <el-form-item
 63 |             label="标题"
 64 |             prop="title"
 65 |             :rules="[
 66 |               {
 67 |                 required: true,
 68 |                 message: '标题为必填项。',
 69 |               },
 70 |             ]"
 71 |           >
 72 |             <el-input
 73 |               v-model="formData.title"
 74 |               placeholder="有趣的标题更容易被用户点击哦！"
 75 |               prefix-icon="User"
 76 |             />
 77 |           </el-form-item>
 78 |           <el-form-item
 79 |             label="分区"
 80 |             prop="category"
 81 |             :rules="[
 82 |               {
 83 |                 required: true,
 84 |                 message: '分区为必填项。',
 85 |               },
 86 |             ]"
 87 |           >
 88 |             <el-select v-model="formData.category" placeholder="选择一个分区">
 89 |               <el-option label="游戏" value="100"></el-option>
 90 |               <el-option label="生活" value="200"></el-option>
 91 |               <el-option label="知识" value="300"></el-option>
 92 |               <el-option label="科技" value="400"></el-option>
 93 |               <el-option label="音乐" value="500"></el-option>
 94 |               <el-option label="鬼畜" value="600"></el-option>
 95 |               <el-option label="动画" value="700"></el-option>
 96 |               <el-option label="时尚" value="800"></el-option>
 97 |               <el-option label="舞蹈" value="900"></el-option>
 98 |               <el-option label="娱乐" value="1000"></el-option>
 99 |               <el-option label="美食" value="1100"></el-option>
100 |               <el-option label="动物" value="1200"></el-option>
101 |             </el-select>
102 |           </el-form-item>
103 | 
104 |           <!-- 简介 -->
105 |           <el-form-item label="简介" prop="description">
106 |             <el-input
107 |               v-model="formData.description"
108 |               type="textarea"
109 |               placeholder="为你的视频添加简介"
110 |             ></el-input>
111 |           </el-form-item>
112 |           <!-- 自制和转载的单选框 -->
113 |           <el-form-item
114 |             label="视频来源"
115 |             prop="source"
116 |             :rules="[
117 |               {
118 |                 required: true,
119 |                 message: '视频来源为必填项。',
120 |               },
121 |             ]"
122 |           >
123 |             <el-radio-group
124 |               v-model="formData.source"
125 |               @change="handleSourceChange"
126 |             >
127 |               <el-radio label="自制">自制</el-radio>
128 |               <el-radio label="转载">转载</el-radio>
129 |             </el-radio-group>
130 |           </el-form-item>
131 | 
132 |           <!-- 如果选择了"转载"，则显示此文本框 -->
133 |           <el-form-item
134 |             v-if="formData.source === '转载'"
135 |             label="出处"
136 |             prop="origin"
137 |             :rules="[
138 |               {
139 |                 required: true,
140 |                 message: '转载必须填写出处。',
141 |               },
142 |             ]"
143 |           >
144 |             <el-input
145 |               v-model="formData.origin"
146 |               placeholder="请填写出处..."
147 |             ></el-input>
148 |           </el-form-item>
149 | 
150 |           <!-- 标签输入 -->
151 |           <el-form-item
152 |             :label="`视频标签 (${formData.tags.length}/12)`"
153 |             prop="tags"
154 |             :rules="[tagsRule]"
155 |           >
156 |             <div
157 |               v-for="(tag, index) in formData.tags"
158 |               :key="index"
159 |               class="tag-item"
160 |             >
161 |               <el-tag closable @close="handleTagClose(index)">{{ tag }}</el-tag>
162 |             </div>
163 |             <el-input
164 |               v-model="currentTag"
165 |               placeholder="输入标签后按回车确认"
166 |               @keyup.enter="handleTagEnter"
167 |             ></el-input>
168 |           </el-form-item>
169 |           <el-form-item>
170 |             <el-button
171 |               type="primary"
172 |               :loading="isSubmitting"
173 |               :disabled="isSubmitting"
174 |               @click="submitVideo"
175 |               >提交</el-button
176 |             >
177 |           </el-form-item>
178 |           <p v-if="isSubmitting">正在上传，请不要关闭此页面...</p>
179 |         </el-form>
180 |       </mmCard>
181 |     </div>
182 |     <el-result
183 |       v-if="showSuccessResult"
184 |       icon="success"
185 |       title="上传成功！"
186 |       sub-title="视频将在转码后显示"
187 |     >
188 |       <template #extra>
189 |         <el-button type="primary" @click="goBack">返回到主页</el-button>
190 |       </template>
191 |     </el-result>
192 |   </div>
193 | </template>
194 | 
195 | <script setup>
196 | import axios from 'axios'
197 | import { v4 as uuidv4 } from 'uuid'
198 | import { ref, watchEffect, reactive, toRaw, computed } from 'vue'
199 | import { useUrlStore } from '@/store/urlStore'
200 | 
201 | // 初始化URL存储
202 | const urlStore = useUrlStore()
203 | const apiUrl = computed(() => urlStore.apiUrl)
204 | 
205 | // 定义响应式数据和引用
206 | const showUploader = ref(true)
207 | const uploadProgress = ref(0)
208 | const isIndeterminateLoading = ref(false)
209 | const isSubmitting = ref(false)
210 | const showSuccessResult = ref(false)
211 | const uniqueId = uuidv4()
212 | const formData = reactive({
213 |   title: '',
214 |   filename: '',
215 |   coverFile: null,
216 |   category: '',
217 |   description: '',
218 |   source: '自制',
219 |   origin: '',
220 |   tags: [],
221 | })
222 | const currentTag = ref('')
223 | 
224 | // 处理视频来源变化
225 | const handleSourceChange = () => {
226 |   if (formData.source === '自制') {
227 |     formData.origin = ''
228 |   }
229 | }
230 | 
231 | // 定义标签验证规则
232 | const tagsRule = {
233 |   validator(_, value, callback) {
234 |     if (value.length < 3) {
235 |       callback(new Error('至少需要3个标签'))
236 |     } else {
237 |       callback()
238 |     }
239 |   },
240 |   trigger: 'blur',
241 | }
242 | 
243 | // 定义禁止的标签
244 | const forbiddenTags = [
245 |   '自制',
246 |   '转载',
247 |   '游戏',
248 |   '生活',
249 |   '知识',
250 |   '科技',
251 |   '音乐',
252 |   '鬼畜',
253 |   '动画',
254 |   '时尚',
255 |   '舞蹈',
256 |   '娱乐',
257 |   '美食',
258 |   '动物',
259 | ]
260 | const handleTagEnter = () => {
261 |   // 1. 检查currentTag是否为空
262 |   if (!currentTag.value) {
263 |     return
264 |   }
265 | 
266 |   // 2. 检查禁止的标签
267 |   if (forbiddenTags.includes(currentTag.value)) {
268 |     ElMessage.warning('您不能使用这个词语作为标签')
269 |     currentTag.value = ''
270 |     return
271 |   }
272 | 
273 |   // 2. 检查标签的长度
274 |   if (currentTag.value.length > 12) {
275 |     ElMessage.warning('每个标签的长度不能超过12个字符！')
276 |     currentTag.value = ''
277 |     return
278 |   }
279 | 
280 |   // 3. 检查重复的标签
281 |   if (formData.tags.includes(currentTag.value)) {
282 |     ElMessage.warning('该标签已经存在！')
283 |     currentTag.value = ''
284 |     return
285 |   }
286 | 
287 |   // 4. 检查标签总数是否已经是12
288 |   if (formData.tags.length >= 12) {
289 |     ElMessage.warning('只允许输入最多12个标签！')
290 |     return
291 |   }
292 | 
293 |   formData.tags.push(currentTag.value)
294 |   currentTag.value = ''
295 | }
296 | 
297 | // 处理标签关闭
298 | const handleTagClose = (index) => {
299 |   formData.tags.splice(index, 1)
300 | }
301 | 
302 | // 定义分块大小
303 | const CHUNK_SIZE = 90 * 1024 * 1024 // 90MB
304 | 
305 | // 处理视频分块
306 | const onFileChange = async (fileChangeEvent) => {
307 |   const file = fileChangeEvent.raw
308 | 
309 |   if (!file.type.startsWith('video/')) {
310 |     ElMessage.error('仅支持视频文件的上传')
311 |     return
312 |   }
313 | 
314 |   if (file.size / 1024 / 1024 > 500) {
315 |     ElMessage.error('只支持500M以下的文件')
316 |     return
317 |   }
318 | 
319 |   isIndeterminateLoading.value = true
320 | 
321 |   // 文件分片
322 |   const chunks = []
323 |   const chunkCount = Math.ceil(file.size / CHUNK_SIZE)
324 |   for (let i = 0; i < chunkCount; i++) {
325 |     const start = i * CHUNK_SIZE
326 |     const end = i === chunkCount - 1 ? file.size : start + CHUNK_SIZE
327 |     const chunk = file.slice(start, end)
328 |     chunks.push(chunk)
329 |   }
330 | 
331 |   // 上传片段
332 |   try {
333 |     for (let i = 0; i < chunks.length; i++) {
334 |       const formData = new FormData()
335 |       formData.append('file', chunks[i], `${file.name}.part${i + 1}`)
336 |       formData.append('unique_id', uniqueId) // 添加唯一ID到表单数据
337 |       formData.append('index', i.toString())
338 |       formData.append('total', chunks.length.toString())
339 | 
340 |       const response = await axios.post(
341 |         `${apiUrl.value}/api/upload/video/chunk`,
342 |         formData,
343 |         {
344 |           onUploadProgress: (progressEvent) => {
345 |             const totalUploaded = i * CHUNK_SIZE + progressEvent.loaded
346 |             uploadProgress.value = Math.round((totalUploaded * 100) / file.size)
347 |           },
348 |         }
349 |       )
350 | 
351 |       if (response.data.state !== 'success') {
352 |         ElMessage.error(response.data.message)
353 |         isIndeterminateLoading.value = false
354 |         return
355 |       }
356 |     }
357 |     // 通知服务器合并片段
358 |     const mergeResponse = await axios.post(
359 |       `${apiUrl.value}/api/upload/video/merge`,
360 |       {
361 |         unique_id: uniqueId, // 向合并请求添加唯一ID
362 |         total: chunks.length,
363 |       }
364 |     )
365 | 
366 |     if (mergeResponse.data.state === 'success') {
367 |       formData.filename = mergeResponse.data.filename
368 |       showUploader.value = false
369 |     } else {
370 |       ElMessage.error(mergeResponse.data.message)
371 |       isIndeterminateLoading.value = false
372 |     }
373 |   } catch (error) {
374 |     ElMessage.error('上传失败！请检查文件大小与后缀名')
375 |     isIndeterminateLoading.value = false
376 |   }
377 | }
378 | 
379 | const coverImagePreview = ref(null)
380 | const handleCoverSelection = (file) => {
381 |   if (file.size / 1024 / 1024 > 5) {
382 |     // 限制封面大小为5MB
383 |     ElMessage.error('图片大小不能超过5MB！')
384 |     return false
385 |   }
386 |   if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
387 |     ElMessage.error('只支持上传JPEG和PNG格式的图片！')
388 |     return false
389 |   }
390 | 
391 |   // 显示图片预览
392 |   const reader = new FileReader()
393 |   reader.onload = (e) => {
394 |     coverImagePreview.value = e.target.result
395 |   }
396 |   reader.readAsDataURL(file)
397 |   formData.coverFile = file
398 | 
399 |   return false // 阻止自动上传
400 | }
401 | 
402 | // 监听上传器的变化
403 | watchEffect(() => {
404 |   if (!showUploader.value) {
405 |     isIndeterminateLoading.value = false
406 |   }
407 | })
408 | 
409 | // 提交视频数据
410 | const submitVideo = async () => {
411 |   // 在提交前检查标签数量
412 |   if (formData.tags.length < 3) {
413 |     ElMessage.warning('标签至少需要3个！')
414 |     isSubmitting.value = false // 这里停止提交进程
415 |     return // 这里退出函数
416 |   }
417 | 
418 |   isSubmitting.value = true
419 |   const data = new FormData()
420 |   const rawFormData = toRaw(formData)
421 | 
422 |   // 这里添加每一个标签到FormData对象中
423 |   formData.tags.forEach((tag, idx) => {
424 |     data.append(`tag${idx}`, tag)
425 |   })
426 | 
427 |   data.append('title', rawFormData.title)
428 |   data.append('video', rawFormData.filename)
429 |   data.append('category', rawFormData.category)
430 |   data.append('description', rawFormData.description)
431 |   data.append('cover', rawFormData.coverFile)
432 |   data.append('source', rawFormData.source)
433 |   data.append('origin', rawFormData.origin)
434 |   data.append('tags', rawFormData.tags)
435 |   data.append('unique_id', uniqueId)
436 | 
437 |   try {
438 |     const response = await axios.post(`${apiUrl.value}/api/upload/submit`, data)
439 |     if (response.data.state === 'success') {
440 |       ElMessage.success('上传成功！')
441 |       showSuccessResult.value = true
442 |     } else {
443 |       ElMessage.error(response.data.message)
444 |     }
445 |   } catch (error) {
446 |     ElMessage.error('提交失败！')
447 |   }
448 |   isSubmitting.value = false // 提交结束，无论成功或失败
449 | }
450 | 
451 | // 返回主页函数
452 | const goBack = () => {
453 |   location.reload(true)
454 |   window.location.href = '/'
455 | }
456 | </script>
457 | 
458 | <style>
459 | .avatar-uploader .avatar {
460 |   width: 100px;
461 |   height: 100px;
462 |   display: block;
463 |   object-fit: cover; /* 保持图片的纵横比 */
464 |   border-radius: 6px; /* 圆角效果 */
465 | }
466 | 
467 | .avatar-uploader .el-upload {
468 |   border: 2px dashed var(--el-border-color);
469 |   border-radius: 8px;
470 |   cursor: pointer;
471 |   position: relative;
472 |   overflow: hidden;
473 |   transition: var(--el-transition-duration-fast);
474 |   padding: 10px; /* 内部留白，让整个区域更易点击 */
475 |   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
476 |   background-color: #fafafa; /* 背景颜色 */
477 | }
478 | 
479 | .avatar-uploader .el-upload:hover {
480 |   border-color: var(--el-color-primary);
481 |   background-color: #f5f5f5; /* 当悬停时深一点的背景颜色 */
482 | }
483 | 
484 | .el-icon.avatar-uploader-icon {
485 |   font-size: 32px; /* 稍大的图标 */
486 |   color: #8c939d;
487 |   width: 100px;
488 |   height: 100px;
489 |   text-align: center;
490 |   transition: color 0.3s; /* 颜色过渡效果 */
491 | }
492 | 
493 | .avatar-uploader .el-upload:hover .avatar-uploader-icon {
494 |   color: var(--el-color-primary); /* 当悬停时，使用主题颜色 */
495 | }
496 | 
497 | .tag-item {
498 |   display: inline-block;
499 |   margin-right: 10px;
500 |   margin-bottom: 10px;
501 | }
502 | </style>
503 | 


--------------------------------------------------------------------------------
/src/components/video/player.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="props.videoInfo">
  4 |       <div class="video-wrapper">
  5 |         <div class="danmaku-layer">
  6 |           <div
  7 |             v-for="danmaku in activeDanmakus"
  8 |             :key="danmaku.danmaku_id"
  9 |             :data-danmaku-id="danmaku.danmaku_id"
 10 |             class="danmaku-item"
 11 |             :class="danmaku.type"
 12 |             :style="{
 13 |               color: danmaku.color,
 14 |               top:
 15 |                 danmaku.type === 'scroll'
 16 |                   ? `${danmaku.position}px`
 17 |                   : danmaku.type === 'top'
 18 |                   ? `${danmaku.position * 25}px`
 19 |                   : 'auto',
 20 |               bottom:
 21 |                 danmaku.type === 'bottom'
 22 |                   ? `${danmaku.position * 25}px`
 23 |                   : 'auto',
 24 |             }"
 25 |           >
 26 |             {{ danmaku.content }}
 27 |           </div>
 28 |         </div>
 29 |         <video
 30 |           ref="videoElement"
 31 |           class="video-js vjs-default-skin"
 32 |           controls
 33 |           width="600"
 34 |         ></video>
 35 |       </div>
 36 |       <div class="danmaku-bar">
 37 |         <v-row>
 38 |           <v-col cols="4" class="hidden-sm-and-down">
 39 |             <span class="danmaku-info">弹幕BETA版测试</span>
 40 |           </v-col>
 41 |           <v-col cols="12" md="8">
 42 |             <div
 43 |               class="danmaku-controls"
 44 |               :class="{ 'input-focused': isInputFocused }"
 45 |             >
 46 |               <div class="input-wrapper">
 47 |                 <el-popover
 48 |                   class="blur-popover"
 49 |                   placement="top-start"
 50 |                   :width="popoverWidth"
 51 |                   trigger="hover"
 52 |                 >
 53 |                   <template #reference>
 54 |                     <div v-bind="props" class="danmaku-style-btn">A</div>
 55 |                   </template>
 56 |                   <v-row>
 57 |                     <v-col xs="12" md="6">
 58 |                       <div>样式</div>
 59 |                       <v-radio-group
 60 |                         v-model="selecteddanmakuType"
 61 |                         :inline="isInline"
 62 |                       >
 63 |                         <v-radio label="顶部" value="top"></v-radio>
 64 |                         <v-radio label="滚动" value="scroll"></v-radio>
 65 |                         <v-radio label="底部" value="bottom"></v-radio>
 66 |                       </v-radio-group>
 67 |                     </v-col>
 68 |                     <v-col xs="12" md="6">
 69 |                       <div>颜色</div>
 70 |                       <div class="color-selection">
 71 |                         <div
 72 |                           v-for="color in colors"
 73 |                           :key="color"
 74 |                           class="color-box"
 75 |                           :style="{ backgroundColor: color }"
 76 |                           :class="{ selected: selectedColor === color }"
 77 |                           @click="selectColor(color)"
 78 |                         ></div>
 79 |                       </div>
 80 |                     </v-col>
 81 |                   </v-row>
 82 |                 </el-popover>
 83 |                 <input
 84 |                   v-model="danmakuContent"
 85 |                   class="danmaku-input"
 86 |                   placeholder="输入弹幕内容..."
 87 |                   @focus="isInputFocused = true"
 88 |                   @blur="isInputFocused = false"
 89 |                 />
 90 |               </div>
 91 |               <div class="send-btn" @click="sendDanmaku">发送</div>
 92 |             </div>
 93 |           </v-col>
 94 |         </v-row>
 95 |       </div>
 96 |     </div>
 97 |   </div>
 98 | </template>
 99 | 
100 | <script setup>
101 | import axios from 'axios'
102 | import 'video.js/dist/video-js.css'
103 | import videojs from 'video.js'
104 | import { useUrlStore } from '@/store/urlStore'
105 | import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'
106 | // import mmCard from '@/components/rzm/mmCard.vue';
107 | 
108 | const urlStore = useUrlStore()
109 | const apiUrl = computed(() => urlStore.apiUrl)
110 | 
111 | const props = defineProps({
112 |   // eslint-disable-next-line vue/require-default-prop
113 |   videoUrl: String,
114 |   // eslint-disable-next-line vue/require-default-prop
115 |   videoInfo: Object,
116 | })
117 | 
118 | const videoElement = ref(null)
119 | let player
120 | 
121 | const incrementViewCount = async () => {
122 |   await axios.post(`${apiUrl.value}/api/video/add/view/${props.videoInfo.aid}`)
123 | }
124 | 
125 | const loadVideoAndCover = async () => {
126 |   try {
127 |     await axios.get(props.videoUrl)
128 |   } catch (error) {
129 |     if (error.response && error.response.status === 404) {
130 |       ElNotification({
131 |         title: '视频不存在！',
132 |         message: '即将为您跳转到首页...',
133 |         type: 'warning',
134 |       })
135 |       window.location.href = '/'
136 |     }
137 |   }
138 | }
139 | 
140 | onMounted(async () => {
141 |   await nextTick()
142 |   await fetchDanmakus()
143 |   loadVideoAndCover()
144 |   player = videojs(videoElement.value, {
145 |     controls: true,
146 |     autoplay: false,
147 |     preload: 'auto',
148 |     playbackRates: [0.25, 0.5, 1, 1.5, 2, 3],
149 |     fluid: true,
150 |     // 这里设置16:9
151 |     aspectRatio: '16:9',
152 |     controlBar: {
153 |       volumePanel: false,
154 |       pictureInPictureToggle: false,
155 |       playbackRateMenuButton: false,
156 |     },
157 |     sources: [
158 |       {
159 |         src: props.videoUrl,
160 |         type: 'application/x-mpegURL',
161 |       },
162 |     ],
163 |   })
164 |   player.on('play', incrementViewCount)
165 | 
166 |   // !!!下面是弹幕功能实现
167 | 
168 |   player.on('timeupdate', () => {
169 |     const currentTime = player.currentTime()
170 | 
171 |     // 获取与当前时间匹配的弹幕
172 |     const matchedDanmakus = danmakus.value.filter(
173 |       (danmaku) => Math.abs(currentTime - danmaku.video_time) < 0.5
174 |     )
175 | 
176 |     matchedDanmakus.forEach((danmaku) => {
177 |       if (!shownDanmakuIds.value.includes(danmaku.danmaku_id)) {
178 |         danmaku.displayStartTime = currentTime
179 |         danmaku.position = getPositionForDanmaku(danmaku.type)
180 |         activeDanmakus.value.push(danmaku)
181 |         shownDanmakuIds.value.push(danmaku.danmaku_id)
182 |       }
183 |     })
184 | 
185 |     // 删除已经过期的弹幕
186 |     activeDanmakus.value = activeDanmakus.value.filter((danmaku) => {
187 |       const displayTime = getDisplayTimeForType(danmaku.type)
188 |       const isExpired =
189 |         currentTime - (danmaku.displayStartTime || 0) > displayTime
190 |       if (isExpired && danmaku.type === 'scroll') {
191 |         occupiedRows.value = occupiedRows.value.filter(
192 |           (row) => row !== danmaku.position / 25
193 |         )
194 |       }
195 |       return !isExpired
196 |     })
197 |   })
198 | 
199 |   // 获取弹幕的显示时间
200 |   function getDisplayTimeForType(type) {
201 |     switch (type) {
202 |       case 'top':
203 |       case 'bottom':
204 |         return 5
205 |       case 'scroll':
206 |         return 15
207 |       default:
208 |         return 5
209 |     }
210 |   }
211 | 
212 |   // 获取弹幕的位置
213 |   player.on('play', () => {
214 |     const danmakuElements = document.querySelectorAll('.danmaku-item')
215 |     danmakuElements.forEach((element) => {
216 |       element.style.animationPlayState = 'running'
217 |     })
218 |   })
219 | 
220 |   player.on('pause', () => {
221 |     const danmakuElements = document.querySelectorAll('.danmaku-item')
222 |     danmakuElements.forEach((element) => {
223 |       element.style.animationPlayState = 'paused'
224 |     })
225 |   })
226 |   const playerElement = player.el()
227 |   const danmakuLayer = document.querySelector('.danmaku-layer')
228 | 
229 |   player.on('seeking', () => {
230 |     shownDanmakuIds.value = []
231 |     activeDanmakus.value = []
232 |   })
233 |   // 将danmakuLayer移动到vjs_video_3元素内，vjs_video_3是video.js全屏实际渲染的根元素
234 |   playerElement.appendChild(danmakuLayer)
235 | })
236 | 
237 | const danmakuContent = ref('')
238 | const isInputFocused = ref(false)
239 | const colors = [
240 |   '#fa4b4b',
241 |   '#ff8b3d',
242 |   '#eddd2b',
243 |   '#13d74e',
244 |   '#61aefb',
245 |   '#97aaff',
246 |   '#ff5dd9',
247 |   '#ffffff',
248 | ]
249 | const selecteddanmakuType = ref('scroll')
250 | const selectedColor = ref('#ffffff')
251 | const selectColor = (color) => {
252 |   selectedColor.value = color
253 | }
254 | 
255 | const popoverWidth = computed(() => {
256 |   return window.innerWidth <= 768 ? 300 : 500
257 | })
258 | const isInline = computed(() => {
259 |   return window.innerWidth <= 768
260 | })
261 | 
262 | const occupiedRows = ref([])
263 | 
264 | function getRightEdge(el) {
265 |   const rect = el.getBoundingClientRect()
266 |   return rect.right
267 | }
268 | 
269 | function getPositionForDanmaku(type) {
270 |   if (type !== 'scroll') {
271 |     const activeOfType = activeDanmakus.value.filter((d) => d.type === type)
272 |     let position = 0
273 |     while (activeOfType.some((d) => d.position === position)) {
274 |       position++
275 |     }
276 |     return position
277 |   } else {
278 |     // 获取所有活动的滚动弹幕元素
279 |     const danmakuElements = document.querySelectorAll('.danmaku-item.scroll')
280 | 
281 |     for (let i = 0; ; i++) {
282 |       let hasOverlap = false
283 |       for (let el of danmakuElements) {
284 |         // 仅仅对于相同行的弹幕进行检查
285 |         if (parseInt(el.style.top, 10) === i * 25) {
286 |           if (getRightEdge(el) > window.innerWidth * 0.8) {
287 |             // 如果弹幕的右边界还没有离开屏幕的80%位置，则认为与新弹幕有重叠
288 |             // TODO: 计算弹幕的宽度，而不是使用80%的屏幕宽度
289 |             hasOverlap = true
290 |             break
291 |           }
292 |         }
293 |       }
294 |       if (!hasOverlap) {
295 |         // 没有重叠的话，使用这一行
296 |         return i * 25
297 |       }
298 |     }
299 |   }
300 | }
301 | 
302 | const sendDanmaku = async () => {
303 |   if (!danmakuContent.value.trim()) return // 检查弹幕内容是否为空
304 | 
305 |   const currentdanmaku = {
306 |     content: danmakuContent.value,
307 |     type: selecteddanmakuType.value,
308 |     color: selectedColor.value,
309 |     video_time: player.currentTime(),
310 |     aid: props.videoInfo.aid,
311 |     position: getPositionForDanmaku(selecteddanmakuType.value),
312 |   }
313 | 
314 |   try {
315 |     const response = await axios.post(
316 |       `${apiUrl.value}/api/danmaku/send`,
317 |       currentdanmaku
318 |     )
319 | 
320 |     if (response.data && response.data.state == 'succeed') {
321 |       ElNotification({
322 |         title: '发送成功',
323 |         message: '弹幕发送成功!',
324 |         type: 'success',
325 |       })
326 |       currentdanmaku.displayStartTime = player.currentTime()
327 |       activeDanmakus.value.push(currentdanmaku)
328 | 
329 |       if (response.data.danmaku_id) {
330 |         shownDanmakuIds.value.push(response.data.danmaku_id)
331 |       }
332 |     } else {
333 |       ElNotification({
334 |         title: '发送失败',
335 |         message: response.data.message || '弹幕发送失败',
336 |         type: 'error',
337 |       })
338 |     }
339 |   } catch (error) {
340 |     ElNotification({
341 |       title: '错误',
342 |       message: error.message || '弹幕发送失败',
343 |       type: 'error',
344 |     })
345 |   }
346 | 
347 |   danmakuContent.value = '' // 清空输入框
348 | }
349 | 
350 | const danmakus = ref([])
351 | const activeDanmakus = ref([])
352 | const shownDanmakuIds = ref([])
353 | 
354 | const fetchDanmakus = async () => {
355 |   try {
356 |     const response = await axios.get(
357 |       `${apiUrl.value}/api/danmaku/${props.videoInfo.aid}`
358 |     )
359 |     danmakus.value = response.data.danmakus
360 |   } catch (error) {
361 |     console.error('获取danmakus时出错:', error)
362 |   }
363 | }
364 | 
365 | // 用于存储弹幕消失的定时器
366 | const danmakuTimeouts = ref([])
367 | 
368 | onUnmounted(() => {
369 |   // 当组件卸载时，清除所有的定时器
370 |   danmakuTimeouts.value.forEach(clearTimeout)
371 | })
372 | 
373 | // 加入模糊效果
374 | const style = document.createElement('style')
375 | style.innerHTML = `
376 |   .el-popper.is-light.el-popover {
377 |     backdrop-filter: blur(6px) !important;
378 |     background-color: rgba(255, 255, 255, 0.8) !important;
379 |   }
380 | `
381 | document.head.appendChild(style)
382 | </script>
383 | 
384 | <style scoped>
385 | .danmaku-bar {
386 |   background-color: #ffffff;
387 |   width: auto;
388 |   height: 50px;
389 |   border-top-left-radius: 0;
390 |   border-top-right-radius: 0;
391 |   border-bottom-left-radius: 8px;
392 |   border-bottom-right-radius: 8px;
393 |   padding: 5px 15px;
394 |   box-shadow: 0 0 8px rgba(0, 0, 0, 0.205);
395 | }
396 | 
397 | .danmaku-info {
398 |   line-height: 40px;
399 |   display: block;
400 |   color: #555;
401 |   font-size: 18px;
402 | }
403 | 
404 | .danmaku-controls {
405 |   display: flex;
406 |   align-items: center;
407 |   background-color: #f1f2f3;
408 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
409 |   border-radius: 8px;
410 | }
411 | 
412 | .danmaku-controls.input-focused {
413 |   border-color: #888;
414 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
415 | }
416 | 
417 | .input-wrapper {
418 |   display: flex;
419 |   align-items: center;
420 |   flex: 1;
421 | }
422 | 
423 | .danmaku-style-btn {
424 |   background-color: transparent;
425 |   border: none;
426 |   color: #333;
427 |   cursor: pointer;
428 |   margin-right: 5px;
429 |   margin-left: 15px;
430 | }
431 | 
432 | .danmaku-input {
433 |   width: 100%;
434 |   height: 30px;
435 |   background-color: #f1f2f3;
436 |   padding: 0 10px;
437 |   line-height: 30px;
438 |   transition: all 0.3s ease;
439 | 
440 |   &:focus {
441 |     outline: none; /* 去除默认的浏览器描边 */
442 |   }
443 | }
444 | 
445 | .send-btn {
446 |   background-color: #2d93ff;
447 |   color: #fff;
448 |   padding: 5px 10px;
449 |   margin-left: 10px;
450 |   border-radius: 0 8px 8px 0; /* 使左侧没有圆角 */
451 |   cursor: pointer;
452 |   display: flex;
453 |   align-items: center;
454 |   justify-content: center;
455 | }
456 | 
457 | .send-btn:hover {
458 |   background-color: #007ce9; /* 加深的颜色 */
459 | }
460 | 
461 | .color-selection {
462 |   display: flex;
463 |   gap: 10px;
464 | }
465 | 
466 | .color-box {
467 |   width: 25px;
468 |   height: 25px;
469 |   border-radius: 5px;
470 |   transition: border 0.3s;
471 | }
472 | 
473 | .color-box.selected {
474 |   border: 3px solid #000;
475 | }
476 | 
477 | @media only screen and (max-width: 600px) {
478 |   .blur-popover {
479 |     width: 300px !important;
480 |   }
481 | 
482 |   .el-popover,
483 |   .el-popover * {
484 |     transform: scale(0.98);
485 |   }
486 | }
487 | 
488 | .video-wrapper {
489 |   position: relative;
490 |   width: auto;
491 |   overflow: hidden;
492 | }
493 | 
494 | .danmaku-layer {
495 |   position: absolute;
496 |   top: 0;
497 |   left: 0;
498 |   right: 0;
499 |   bottom: 0;
500 |   pointer-events: none;
501 | }
502 | 
503 | .danmaku-item {
504 |   position: absolute;
505 |   white-space: nowrap;
506 |   font-size: 20px;
507 |   opacity: 0.8;
508 |   animation-fill-mode: forwards;
509 |   text-shadow:
510 |     0px 0px 1px black,
511 |     0px 0px 2px black,
512 |     0px 0px 3px black;
513 | }
514 | 
515 | .danmaku-item.scroll {
516 |   animation: scrollDanmaku 9s linear 1;
517 |   left: 100%;
518 | }
519 | 
520 | /* 顶部弹幕动画 */
521 | .danmaku-item.top {
522 |   top: 0;
523 |   left: 50%;
524 |   transform: translateX(-50%);
525 | }
526 | 
527 | /* 底部弹幕动画 */
528 | .danmaku-item.bottom {
529 |   bottom: 0;
530 |   left: 50%;
531 |   transform: translateX(-50%);
532 | }
533 | 
534 | @keyframes scrollDanmaku {
535 |   0% {
536 |     transform: translateX(100%);
537 |   }
538 |   100% {
539 |     transform: translateX(calc(-100% - 100vw));
540 |   }
541 | }
542 | </style>
543 | 


--------------------------------------------------------------------------------