├── .github
    └── workflows
    │   ├── oss.yml
    │   └── oss_dev.yml
├── .gitignore
├── .vscode
    └── extensions.json
├── LICENSE
├── README.md
├── components.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
    ├── favicon.ico
    ├── pwa-192x192.png
    ├── pwa-512x512.png
    ├── pwa-96x96.png
    └── robots.txt
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.jpg
    │   ├── logo.png
    │   ├── logo_big.png
    │   └── vue_logo.png
    ├── components
    │   ├── Avatar.vue
    │   ├── Billboard.vue
    │   ├── Comment.vue
    │   ├── CommentEdit.vue
    │   ├── CommentList.vue
    │   ├── GlobalComponents.vue
    │   ├── ImageViewer
    │   │   ├── ImageBox.vue
    │   │   ├── ImageModal.css
    │   │   ├── ImageModal.vue
    │   │   └── ImageViewer.vue
    │   ├── MessageContent.d.ts
    │   ├── MessageContent.vue
    │   ├── PaperRender.vue
    │   ├── Posters.vue
    │   ├── RenderLink.vue
    │   └── Subscription.vue
    ├── env.d.ts
    ├── main.ts
    ├── router
    │   └── index.ts
    ├── sw.ts
    ├── utils
    │   ├── EncryptPassword.ts
    │   ├── naive-ui-dark-theme-overrides.json
    │   ├── naive-ui-light-theme-overrides.json
    │   ├── request.ts
    │   ├── store.ts
    │   ├── tools.ts
    │   └── types.ts
    └── views
    │   ├── 404.vue
    │   ├── About.vue
    │   ├── Course.vue
    │   ├── CourseShow.vue
    │   ├── CourseUpload.vue
    │   ├── Gallery.vue
    │   ├── GalleryEdit.vue
    │   ├── GalleryShow.vue
    │   ├── Home.vue
    │   ├── Intro.vue
    │   ├── Login.vue
    │   ├── Map.vue
    │   ├── Message.vue
    │   ├── Paper.vue
    │   ├── PaperEdit.vue
    │   ├── PaperShow.vue
    │   ├── Report.vue
    │   ├── Schedule.vue
    │   ├── Score.vue
    │   ├── Subscription.vue
    │   ├── User.vue
    │   └── admin
    │       ├── Billboard.vue
    │       └── Carousel.vue
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.github/workflows/oss.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to OSS
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main # 这里可以根据您的需要更改分支名称
 7 | 
 8 | jobs:
 9 |   sync:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout code
13 |         uses: actions/checkout@v2
14 |       # 安装Node.js
15 |       - name: Setup Node.js environment
16 |         uses: actions/setup-node@v3.8.1
17 |       # 安装pnpm
18 |       - name: Install pnpm
19 |         run: npm install -g pnpm
20 |       # 执行应用打包步骤
21 |       - name: Install dependencies and build
22 |         run: |
23 |           echo ${{ secrets.OSS_ACCESSKEY_ID }}
24 |           echo ${{ secrets.OSS_ACCESSKEY_SECRET }}
25 |           pnpm install
26 |           pnpm build
27 |       # 上传到OSS
28 |       - name: aliyun-oss-website-action
29 |         uses: fangbinwei/aliyun-oss-website-action@v1.4.0
30 |         with:
31 |           # Folder which contains the website files
32 |           folder: ./dist/
33 |           # Aliyun OSS accessKeyId.
34 |           accessKeyId: ${{ secrets.OSS_ACCESSKEY_ID }}
35 |           # Aliyun OSS accessKeySecret.
36 |           accessKeySecret: ${{ secrets.OSS_ACCESSKEY_SECRET }}
37 |           # Aliyun OSS bucket instance.
38 |           bucket: bit101-page
39 |           # OSS region domain
40 |           endpoint: oss-cn-hongkong.aliyuncs.com
41 |           # `true` to identify the endpoint is your custom domain.
42 |           cname: false # optional, default is false
43 |           # `true` to skip setting static pages related configuration. `indexPage`, `notFoundPage` will not be used.
44 |           skipSetting: true # optional, default is false
45 |           # Save info of uploaded files to increase next upload speed
46 |           incremental: true # optional, default is true
47 |           # index page
48 |           indexPage: index.html # optional, default is index.html
49 |           # not found page
50 |           notFoundPage: index.html # optional, default is 404.html
51 | 


--------------------------------------------------------------------------------
/.github/workflows/oss_dev.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to OSS
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - dev # 这里可以根据您的需要更改分支名称
 7 | 
 8 | jobs:
 9 |   sync:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout code
13 |         uses: actions/checkout@v2
14 |       # 安装Node.js
15 |       - name: Setup Node.js environment
16 |         uses: actions/setup-node@v3.8.1
17 |       # 安装pnpm
18 |       - name: Install pnpm
19 |         run: npm install -g pnpm
20 |       # 执行应用打包步骤
21 |       - name: Install dependencies and build
22 |         run: |
23 |           echo ${{ secrets.OSS_ACCESSKEY_ID }}
24 |           echo ${{ secrets.OSS_ACCESSKEY_SECRET }}
25 |           pnpm install
26 |           pnpm build
27 |       # 上传到OSS
28 |       - name: aliyun-oss-website-action
29 |         uses: fangbinwei/aliyun-oss-website-action@v1.4.0
30 |         with:
31 |           # Folder which contains the website files
32 |           folder: ./dist/
33 |           # Aliyun OSS accessKeyId.
34 |           accessKeyId: ${{ secrets.OSS_ACCESSKEY_ID }}
35 |           # Aliyun OSS accessKeySecret.
36 |           accessKeySecret: ${{ secrets.OSS_ACCESSKEY_SECRET }}
37 |           # Aliyun OSS bucket instance.
38 |           bucket: bit101-page-dev
39 |           # OSS region domain
40 |           endpoint: oss-cn-hongkong.aliyuncs.com
41 |           # `true` to identify the endpoint is your custom domain.
42 |           cname: false # optional, default is false
43 |           # `true` to skip setting static pages related configuration. `indexPage`, `notFoundPage` will not be used.
44 |           skipSetting: true # optional, default is false
45 |           # Save info of uploaded files to increase next upload speed
46 |           incremental: true # optional, default is true
47 |           # index page
48 |           indexPage: index.html # optional, default is index.html
49 |           # not found page
50 |           notFoundPage: index.html # optional, default is 404.html
51 | 


--------------------------------------------------------------------------------
/.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 | dev-dist
13 | dist-ssr
14 | *.local
15 | .history/
16 | 
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 
28 | /backend/__pycache__
29 | /backend/other/*.xlsx
30 | /backend/other/*.csv


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-27 16:44:47
 4 |  * @LastEditTime: 2023-10-16 22:22:30
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | 
 9 | ![p92oJjH.png](https://s1.ax1x.com/2023/05/16/p92oJjH.png)
10 | 
11 | <div align="center">
12 | 
13 | <h1 style="color:#FF9A57;text-decoration:underline;text-decoration-color:#00ABD6;">BIT101</h1>
14 | 
15 | [网站( bit101.cn )](https://bit101.cn) ｜ [API文档](https://bit101-api.apifox.cn)
16 | 
17 | [Go服务端](https://github.com/BIT101-dev/BIT101-GO) ｜ [Android客户端](https://github.com/BIT101-dev/BIT101-Android)
18 | 
19 | [了解BIT101](https://bit101-project.feishu.cn/wiki/W8TxwAs7rizGVEkONjAcvgvsnxe) ｜ [加入BIT101](https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc)
20 | 
21 | </div>
22 | 
23 | ---
24 | 
25 | `BIT101`企划旨在打造一个富于互联网精神的、开放共享的社区，打破校内信息壁垒，使同学们学习生活得更加优雅。现在包括由`Vue3`+`Naïve UI`构建的网站前端（本仓库）、基于`Gin`框架的[Go后端](https://github.com/BIT101-dev/BIT101-GO)和基于`Jetpack Compose`构建的[Android客户端](https://github.com/BIT101-dev/BIT101-Android)。
26 | 
27 | 如果有`Bug`提交、功能建议或其他任何问题，欢迎提交`issues`、加入交流QQ群[726965926](https://jq.qq.com/?_wv=1027&k=OTttwrzb)或邮件[admin@bit101.cn](mailto:admin@bit101.cn)提出。
28 | 
29 | 也希望你能把`BIT101`告诉更多的同学_(:з」∠)_
30 | 
31 | 🥳`BIT101`期待你的贡献！！
32 | 
33 | 
34 | ## 启动！
35 | 首先下载或克隆仓库：
36 | ```bash
37 | git clone https://github.com/BIT101-dev/BIT101.git
38 | ```
39 | 
40 | 然后配置好`pnpm`环境后即可启动：
41 | ```bash
42 | cd BIT101 #进入目录
43 | pnpm install #安装依赖
44 | pnpm dev #开发模式
45 | pnpm build #编译
46 | ```
47 | 
48 | ## 发行日志
49 | 
50 | * `2022-08-01`：`version:0.0.1`首次部署，撒花！完成了预想中的功能：用户系统（使用学校统一身份认证和邮箱辅助注册）、文章（校园维基）、课程评教和资料共享、成绩查询。
51 | 
52 | * `2022-08-14`：`version:0.0.2`1.完善成绩查询，由于挂科重修等规则复杂，添加支持手动选择计入GPA的课程。2.添加可信成绩单查询。3.添加教学大纲查询。
53 | 
54 | * `2023-05-16`：`version:0.1.0`1.迁移到`GO`后端。2.添加消息系统。3.添加地图。
55 | 
56 | 


--------------------------------------------------------------------------------
/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/Avatar.vue')['default']
11 |     Billboard: typeof import('./src/components/Billboard.vue')['default']
12 |     Comment: typeof import('./src/components/Comment.vue')['default']
13 |     CommentEdit: typeof import('./src/components/CommentEdit.vue')['default']
14 |     CommentList: typeof import('./src/components/CommentList.vue')['default']
15 |     GlobalComponents: typeof import('./src/components/GlobalComponents.vue')['default']
16 |     ImageBox: typeof import('./src/components/ImageViewer/ImageBox.vue')['default']
17 |     ImageModal: typeof import('./src/components/ImageViewer/ImageModal.vue')['default']
18 |     ImageViewer: typeof import('./src/components/ImageViewer/ImageViewer.vue')['default']
19 |     MessageContent: typeof import('./src/components/MessageContent.vue')['default']
20 |     NA: typeof import('naive-ui')['NA']
21 |     NAlert: typeof import('naive-ui')['NAlert']
22 |     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
23 |     NAvatar: typeof import('naive-ui')['NAvatar']
24 |     NBadge: typeof import('naive-ui')['NBadge']
25 |     NButton: typeof import('naive-ui')['NButton']
26 |     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
27 |     NCard: typeof import('naive-ui')['NCard']
28 |     NCarousel: typeof import('naive-ui')['NCarousel']
29 |     NCollapse: typeof import('naive-ui')['NCollapse']
30 |     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
31 |     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
32 |     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
33 |     NDataTable: typeof import('naive-ui')['NDataTable']
34 |     NDivider: typeof import('naive-ui')['NDivider']
35 |     NDrawer: typeof import('naive-ui')['NDrawer']
36 |     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
37 |     NDropdown: typeof import('naive-ui')['NDropdown']
38 |     NDynamicTags: typeof import('naive-ui')['NDynamicTags']
39 |     NEl: typeof import('naive-ui')['NEl']
40 |     NElement: typeof import('naive-ui')['NElement']
41 |     NEllipsis: typeof import('naive-ui')['NEllipsis']
42 |     NEmpty: typeof import('naive-ui')['NEmpty']
43 |     NForm: typeof import('naive-ui')['NForm']
44 |     NFormItem: typeof import('naive-ui')['NFormItem']
45 |     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
46 |     NGi: typeof import('naive-ui')['NGi']
47 |     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
48 |     NGrid: typeof import('naive-ui')['NGrid']
49 |     NH2: typeof import('naive-ui')['NH2']
50 |     NIcon: typeof import('naive-ui')['NIcon']
51 |     NImage: typeof import('naive-ui')['NImage']
52 |     NInput: typeof import('naive-ui')['NInput']
53 |     NInputGroup: typeof import('naive-ui')['NInputGroup']
54 |     NLayout: typeof import('naive-ui')['NLayout']
55 |     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
56 |     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
57 |     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
58 |     NMenu: typeof import('naive-ui')['NMenu']
59 |     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
60 |     NModal: typeof import('naive-ui')['NModal']
61 |     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
62 |     NRadio: typeof import('naive-ui')['NRadio']
63 |     NRadioButton: typeof import('naive-ui')['NRadioButton']
64 |     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
65 |     NRate: typeof import('naive-ui')['NRate']
66 |     NResult: typeof import('naive-ui')['NResult']
67 |     NScrollbar: typeof import('naive-ui')['NScrollbar']
68 |     NSelect: typeof import('naive-ui')['NSelect']
69 |     NSpace: typeof import('naive-ui')['NSpace']
70 |     NSpin: typeof import('naive-ui')['NSpin']
71 |     NSwitch: typeof import('naive-ui')['NSwitch']
72 |     NTable: typeof import('naive-ui')['NTable']
73 |     NTabPane: typeof import('naive-ui')['NTabPane']
74 |     NTabs: typeof import('naive-ui')['NTabs']
75 |     NTag: typeof import('naive-ui')['NTag']
76 |     NUpload: typeof import('naive-ui')['NUpload']
77 |     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
78 |     PaperRender: typeof import('./src/components/PaperRender.vue')['default']
79 |     Posters: typeof import('./src/components/Posters.vue')['default']
80 |     RenderLink: typeof import('./src/components/RenderLink.vue')['default']
81 |     RouterLink: typeof import('vue-router')['RouterLink']
82 |     RouterView: typeof import('vue-router')['RouterView']
83 |     Subscription: typeof import('./src/components/Subscription.vue')['default']
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 00:01:07
 4 |  * @LastEditTime: 2024-12-16 02:38:10
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <!DOCTYPE html>
 9 | <html lang="zh-CN">
10 | 
11 | <head>
12 |   <meta charset="UTF-8" />
13 |   <link rel="icon" href="/favicon.ico" />
14 |   <title>BIT101</title>
15 |   <meta name="description" content="BIT101校园社区">
16 |   <link rel="apple-touch-icon" href="/pwa-512x512.png" />
17 |   <meta name="theme-color" content="#FF9A57">
18 |   <meta name="viewport"
19 |     content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
20 |   <!--引入思源字体-->
21 |   <link rel="preload" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,500,700,900&display=swap"
22 |     crossorigin as="style" onload="this.onload=null;this.rel='stylesheet'">
23 | </head>
24 | 
25 | <!-- Google tag (gtag.js) -->
26 | <script async src="https://www.googletagmanager.com/gtag/js?id=G-1X4GFL2WXR"></script>
27 | <script>
28 |   window.dataLayer = window.dataLayer || [];
29 |   function gtag() {dataLayer.push(arguments);}
30 |   gtag('js', new Date());
31 | 
32 |   // User ID
33 |   let id = '';
34 |   let store = window.localStorage.getItem('store');
35 |   if (store && JSON.parse(store).fake_cookie) {
36 |     let fakeCookie = JSON.parse(store).fake_cookie;
37 |     let base64Url = fakeCookie.split('.')[1];
38 |     let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
39 |     let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
40 |       return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
41 |     }).join(''));
42 |     let payload = JSON.parse(jsonPayload);
43 |     id = payload.id;
44 |   }
45 |   gtag('config', 'G-1X4GFL2WXR', {'user_id': id});
46 | 
47 | </script>
48 | 
49 | <body>
50 |   <div id="app"></div>
51 |   <script type="module" src="/src/main.ts"></script>
52 | </body>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bit101",
 3 |   "private": true,
 4 |   "version": "1.1.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@editorjs/delimiter": "^1.3.0",
13 |     "@editorjs/editorjs": "^2.28.2",
14 |     "@editorjs/header": "^2.7.0",
15 |     "@editorjs/list": "^1.8.0",
16 |     "@editorjs/table": "^2.2.2",
17 |     "axios": "^1.6.0",
18 |     "crypto-js": "^4.2.0",
19 |     "echarts": "^5.4.3",
20 |     "editorjs-button": "^1.0.4",
21 |     "editorjs-undo": "^2.0.26",
22 |     "highlight.js": "^11.9.0",
23 |     "ts-md5": "^1.3.1",
24 |     "vue": "^3.3.7",
25 |     "vue-clipboard3": "^2.0.0",
26 |     "vue-echarts": "^6.6.1",
27 |     "vue-router": "^4.2.5"
28 |   },
29 |   "devDependencies": {
30 |     "@editorjs/code": "^2.8.0",
31 |     "@editorjs/image": "^2.8.2",
32 |     "@editorjs/inline-code": "^1.4.0",
33 |     "@editorjs/quote": "^2.5.0",
34 |     "@editorjs/raw": "^2.4.0",
35 |     "@types/crypto-js": "^4.2.2",
36 |     "@types/node": "^20.8.9",
37 |     "@vicons/antd": "^0.12.0",
38 |     "@vicons/material": "^0.12.0",
39 |     "@vitejs/plugin-vue": "^4.4.0",
40 |     "@vue-leaflet/vue-leaflet": "^0.10.1",
41 |     "leaflet": "^1.9.4",
42 |     "naive-ui": "^2.35.0",
43 |     "typescript": "^5.2.2",
44 |     "unplugin-vue-components": "^0.25.2",
45 |     "vite": "^4.5.0",
46 |     "vite-plugin-pwa": "^0.16.6",
47 |     "workbox-core": "^7.3.0",
48 |     "workbox-precaching": "^7.3.0"
49 |   },
50 |   "packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
51 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/public/favicon.ico


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/public/pwa-512x512.png


--------------------------------------------------------------------------------
/public/pwa-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/public/pwa-96x96.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-05-28 00:01:07
  4 |  * @LastEditTime: 2025-03-19 02:33:48
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import { NIcon, darkTheme, lightTheme, useOsTheme, useThemeVars } from 'naive-ui'
 10 | import LightThemeOverrides from '@/utils/naive-ui-light-theme-overrides.json';
 11 | import DarkThemeOverrides from '@/utils/naive-ui-dark-theme-overrides.json';
 12 | import { useRouter, useRoute } from 'vue-router';
 13 | import { h, ref, onMounted, computed } from 'vue';
 14 | import MenuRound from '@vicons/material/MenuRound'
 15 | import HomeOutlined from '@vicons/material/HomeOutlined'
 16 | import FingerprintOutlined from '@vicons/material/FingerprintOutlined'
 17 | import PersonOutlined from '@vicons/material/PersonOutlined'
 18 | import SchoolOutlined from '@vicons/material/SchoolOutlined'
 19 | import ArticleOutlined from '@vicons/material/ArticleOutlined'
 20 | import RefreshOutlined from '@vicons/material/RefreshOutlined'
 21 | import BookOutlined from '@vicons/material/BookOutlined'
 22 | import ArrowBackOutlined from '@vicons/material/ArrowBackOutlined'
 23 | import CalendarMonthOutlined from '@vicons/material/CalendarMonthOutlined'
 24 | import MailOutlined from '@vicons/material/MailOutlined'
 25 | import MapOutlined from '@vicons/material/MapOutlined'
 26 | import ForumOutlined from '@vicons/material/ForumOutlined'
 27 | import BrightnessAutoOutlined from '@vicons/material/BrightnessAutoOutlined'
 28 | import LightModeOutlined from '@vicons/material/LightModeOutlined'
 29 | import DarkModeOutlined from '@vicons/material/DarkModeOutlined'
 30 | import QuestionCircleOutlined from "@vicons/antd/QuestionCircleOutlined"
 31 | import BookmarkBorderOutlined from "@vicons/material/BookmarkBorderOutlined"
 32 | import GlobalComponents from './components/GlobalComponents.vue';
 33 | import { hitokoto, WatchNetwork } from './utils/tools';
 34 | import http from './utils/request';
 35 | import axios from 'axios';
 36 | 
 37 | import store from './utils/store';
 38 | 
 39 | const isDark = computed(() => {
 40 |   if (store.theme_mode === "auto") {
 41 |     return useOsTheme().value === "dark";
 42 |   } else {
 43 |     return store.theme_mode === "dark";
 44 |   }
 45 | })
 46 | const theme = computed(() => isDark.value ? darkTheme : lightTheme);
 47 | const themeOverrides = computed(() => isDark.value ? DarkThemeOverrides : LightThemeOverrides);
 48 | const themeVars = useThemeVars();
 49 | 
 50 | function ChangeTheme() {
 51 |   if (store.theme_mode === "auto") {
 52 |     store.theme_mode = "light";
 53 |   } else if (store.theme_mode === "light") {
 54 |     store.theme_mode = "dark";
 55 |   } else {
 56 |     store.theme_mode = "auto";
 57 |   }
 58 | }
 59 | 
 60 | const router = useRouter();
 61 | const route = useRoute();
 62 | 
 63 | const drawer_model = ref(false);
 64 | 
 65 | function renderIcon(icon: any) {
 66 |   return () => h(NIcon, null, { default: () => h(icon) })
 67 | }
 68 | const menu_options = computed(() => {
 69 |   const home = {
 70 |     label: "回家",
 71 |     key: '/home/',
 72 |     icon: renderIcon(HomeOutlined)
 73 |   }
 74 |   const login = {
 75 |     label: "登录",
 76 |     key: '/login/',
 77 |     icon: renderIcon(FingerprintOutlined)
 78 |   }
 79 |   const my = {
 80 |     label: "我的",
 81 |     key: '/user/0/',
 82 |     icon: renderIcon(PersonOutlined)
 83 |   }
 84 |   const gallery = {
 85 |     label: "话廊",
 86 |     key: '/gallery/',
 87 |     icon: renderIcon(ForumOutlined)
 88 |   }
 89 |   const paper = {
 90 |     label: "文章",
 91 |     key: '/paper/',
 92 |     icon: renderIcon(ArticleOutlined)
 93 |   }
 94 |   const course = {
 95 |     label: "课程",
 96 |     key: '/course/',
 97 |     icon: renderIcon(BookOutlined)
 98 |   }
 99 |   const subscription = {
100 |     label: "订阅",
101 |     key: '/subscription/',
102 |     icon: renderIcon(BookmarkBorderOutlined)
103 |   }
104 |   const score = {
105 |     label: "成绩",
106 |     key: '/score/',
107 |     icon: renderIcon(SchoolOutlined)
108 |   }
109 |   const schedule = {
110 |     label: "课表",
111 |     key: '/schedule/',
112 |     icon: renderIcon(CalendarMonthOutlined)
113 |   }
114 |   const map = {
115 |     label: "地图",
116 |     key: '/map/',
117 |     icon: renderIcon(MapOutlined)
118 |   }
119 |   const about = {
120 |     label: "关于",
121 |     key: '/about/',
122 |     icon: renderIcon(QuestionCircleOutlined)
123 |   }
124 | 
125 |   if (store.fake_cookie)
126 |     return [home, login, my, gallery, paper, course, subscription, score, schedule, map, about];
127 |   return [home, login, my, about];
128 | });
129 | 
130 | function MenuHandler(key: string) {
131 |   drawer_model.value = false;
132 |   router.push(key);
133 | }
134 | 
135 | function ToTop() {
136 |   window.scrollTo(0, 0);
137 | }
138 | 
139 | function Refresh() {
140 |   window.location.reload();
141 | }
142 | 
143 | const unread_num = ref(0);
144 | function LoadUnreadNum() {
145 |   http.get("/messages/unread_num").then(res => {
146 |     unread_num.value = res.data.unread_num;
147 |   })
148 | }
149 | 
150 | onMounted(() => {
151 |   // 自动升级到https
152 |   if (location.protocol == 'http:') {
153 |     axios.get(`https${location.href.substring(4)}`).then(() => {
154 |       location.protocol = 'https:';
155 |     })
156 |   };
157 | 
158 |   // 监测网络
159 |   WatchNetwork();
160 | 
161 |   LoadUnreadNum();
162 | })
163 | 
164 | </script>
165 | 
166 | <template>
167 |   <n-config-provider :theme-overrides="themeOverrides" :theme="theme">
168 |     <n-global-style />
169 |     <n-el>
170 |       <GlobalComponents></GlobalComponents>
171 |       <n-layout>
172 |         <n-layout-header bordered style="background-color:var(--primary-color)">
173 |           <n-space class="container" justify="space-between">
174 |             <div style="height:42px;display: flex;align-items: center;padding: 4px;">
175 |               <n-button @click="drawer_model = true" circle type="primary" text-color="#FFF"
176 |                 style="font-size: 33px;margin-top:3px;" size="large">
177 |                 <n-icon>
178 |                   <MenuRound />
179 |                 </n-icon>
180 |               </n-button>
181 |               <n-button @click="router.push('/home')" text style="font-size: 24px;color:#FFF">BIT101</n-button>
182 |             </div>
183 |             <div style="display:flex;align-items:center;height:100%;">
184 |               <n-button @click="router.go(-1)" quaternary circle size="large" color="white">
185 |                 <template #icon>
186 |                   <n-icon>
187 |                     <ArrowBackOutlined />
188 |                   </n-icon>
189 |                 </template>
190 |               </n-button>
191 |               <n-button @click="Refresh" quaternary circle size="large" color="white">
192 |                 <template #icon>
193 |                   <n-icon>
194 |                     <RefreshOutlined />
195 |                   </n-icon>
196 |                 </template>
197 |               </n-button>
198 |               <n-button @click="ChangeTheme" quaternary circle size="large" color="white">
199 |                 <template #icon>
200 |                   <n-icon>
201 |                     <LightModeOutlined v-if="store.theme_mode == 'light'" />
202 |                     <DarkModeOutlined v-else-if="store.theme_mode == 'dark'" />
203 |                     <BrightnessAutoOutlined v-else />
204 |                   </n-icon>
205 |                 </template>
206 |               </n-button>
207 |               <n-button @click="unread_num = 0, router.push('/message/')" quaternary circle size="large" color="white"
208 |                 style="margin-right:4px">
209 |                 <template #icon>
210 |                   <n-badge :value="unread_num" :max="99">
211 |                     <n-icon color="white">
212 |                       <MailOutlined />
213 |                     </n-icon>
214 |                   </n-badge>
215 |                 </template>
216 |               </n-button>
217 |             </div>
218 |           </n-space>
219 |         </n-layout-header>
220 | 
221 |         <n-drawer v-model:show="drawer_model" placement="left" :width="224">
222 |           <n-drawer-content title="BIT101" body-content-style="padding: 4px;">
223 |             <n-menu :options="menu_options" @update:value="MenuHandler" :indent="24"></n-menu>
224 |           </n-drawer-content>
225 |         </n-drawer>
226 | 
227 |         <n-layout-content justify="center" style="margin: 11px;min-height: 89vh;">
228 |           <router-view v-slot="{ Component }">
229 |             <keep-alive :max="42">
230 |               <component :is="Component" v-if="route.meta.keepAlive != false" :key="route.fullPath" />
231 |             </keep-alive>
232 |             <component :is="Component" v-if="route.meta.keepAlive == false" />
233 |           </router-view>
234 |         </n-layout-content>
235 | 
236 | 
237 |         <n-layout-footer style="text-align:center;min-height: 11vh;">
238 |           <h4 style="margin: auto;font-size: 14px;">{{ hitokoto }}</h4>
239 |           <div><n-button @click="ToTop" text size="large">👆回到顶部👆</n-button></div>
240 |           <div>
241 |             <n-a href="https://github.com/BIT101-dev" target="_blank">GitHub</n-a>
242 |             ｜
243 |             <n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入BIT101</n-a>
244 |           </div>
245 |           <div style="font-size: 14px;">Powered⚡ by BIT101 Project Team with 💖.</div>
246 | 
247 |         </n-layout-footer>
248 |       </n-layout>
249 |     </n-el>
250 |   </n-config-provider>
251 | </template>
252 | 
253 | <style>
254 | @font-face {
255 |   font-family: "Noto Serif";
256 |   src: local("Noto Serif SC Light"),
257 |     local("Noto Serif SC"),
258 |     local("Noto Serif CJK Light"),
259 |     local("Noto Serif CJK"),
260 |     local("Source Han Serif CN Light"),
261 |     local("Source Han Serif CN");
262 |   font-display: swap;
263 |   font-weight: 300;
264 | }
265 | 
266 | @font-face {
267 |   font-family: "Noto Serif";
268 |   src: local("Noto Serif SC Medium"),
269 |     local("Noto Serif SC"),
270 |     local("Noto Serif CJK Medium"),
271 |     local("Noto Serif CJK"),
272 |     local("Source Han Serif CN Medium"),
273 |     local("Source Han Serif CN");
274 |   font-display: swap;
275 |   font-weight: 500;
276 | }
277 | 
278 | @font-face {
279 |   font-family: "Noto Serif";
280 |   src: local("Noto Serif SC Bold"),
281 |     local("Noto Serif CJK Bold"),
282 |     local("Source Han Serif CN Bold");
283 |   font-display: swap;
284 |   font-weight: 700;
285 | }
286 | 
287 | @font-face {
288 |   font-family: "Noto Serif";
289 |   src: local("Noto Serif SC Heavy"),
290 |     local("Noto Serif CJK Heavy"),
291 |     local("Source Han Serif CN Heavy");
292 |   font-display: swap;
293 |   font-weight: 800;
294 | }
295 | 
296 | #app,
297 | body {
298 |   font-family: "Noto Serif", "Noto Serif SC", serif;
299 |   font-style: normal;
300 |   font-weight: 500;
301 |   font-size: 16px;
302 | }
303 | 
304 | .container {
305 |   max-width: 666px;
306 |   margin: auto;
307 | }
308 | 
309 | ::selection {
310 |   color: #fff;
311 |   background: #00bcd4;
312 | }
313 | </style>
314 | 


--------------------------------------------------------------------------------
/src/assets/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/src/assets/logo.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo_big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/src/assets/logo_big.png


--------------------------------------------------------------------------------
/src/assets/vue_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BIT101-dev/BIT101/8c7106c4b23e448c82f14ed1744507373dd251b5/src/assets/vue_logo.png


--------------------------------------------------------------------------------
/src/components/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-17 20:24:22
 4 |  * @LastEditTime: 2023-10-30 18:39:55
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import store from '@/utils/store';
 9 | import VerifiedFilled from '@vicons/material/VerifiedFilled';
10 | import { User } from '@/utils/types';
11 | import { PropType } from 'vue';
12 | 
13 | const props = defineProps({
14 |   user: {
15 |     type: Object as PropType<User>,
16 |     required: true
17 |   },
18 |   round: {
19 |     type: Boolean,
20 |     default: false
21 |   },
22 |   size: {
23 |     type: Number,
24 |     default: 42
25 |   },
26 |   preview: {
27 |     type: Boolean,
28 |     default: false
29 |   }
30 | })
31 | </script>
32 | 
33 | <template>
34 |   <div style="font-size:0;position:relative;">
35 |     <n-image :width="props.size" :height="props.size" :src="props.user.avatar.low_url" lazy object-fit="fill"
36 |       :img-props="{ style: props.round ? 'border-radius:50%;' : 'border-radius:5%;' }" :preview-disabled="!props.preview" />
37 |     <n-icon v-if="props.user.identity.color" :component="VerifiedFilled" :size="0.42 * props.size"
38 |       :color="props.user.identity.color" style="position:absolute;right:0;bottom:0;" />
39 |   </div>
40 | </template>


--------------------------------------------------------------------------------
/src/components/Billboard.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2024-02-26 15:06:00
 4 |  * @LastEditTime: 2024-02-26 16:24:20
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import { OpenLink, opacityColor } from '@/utils/tools';
 9 | import { useThemeVars } from 'naive-ui';
10 | import { computed } from 'vue';
11 | 
12 | const props = defineProps(['data'])
13 | 
14 | const themeVars = useThemeVars();
15 | 
16 | function RandColor() {
17 |     const low = 0.11;
18 |     const high = 0.24;
19 |     return opacityColor(themeVars.value.infoColor, low + Math.random() * (high - low));
20 | }
21 | 
22 | const billboard = computed(() => {
23 |     let l = [[] as any, [] as any];
24 |     for (let i = 0; i < props.data.length; i++) {
25 |         l[i % 2].push(props.data[i]);
26 |     }
27 |     return l
28 | })
29 | 
30 | </script>
31 | 
32 | <style scoped>
33 | h2 {
34 |     margin: 4px 0 4px 0;
35 |     text-decoration-line: underline;
36 |     text-decoration-color: var(--primary-color);
37 |     color: var(--text-color-2)
38 | }
39 | </style>
40 | 
41 | <template>
42 |     <n-grid x-gap="11" y-gap="11" :cols="2">
43 |         <n-gi>
44 |             <n-grid x-gap="11" y-gap="11" :cols="1">
45 |                 <n-gi v-for="i in billboard[0]">
46 |                     <n-card @click="OpenLink(i['url'])" :style="{
47 |                         'background-color': RandColor(),
48 |                         'cursor': i['url'] ? 'pointer' : 'auto'
49 |                     }" hoverable content-style="padding:0 11px 11px 11px;">
50 |                         <template #cover>
51 |                             <img :src="i['img']">
52 |                         </template>
53 |                         <h2>{{ i['title'] }}</h2>
54 |                         {{ i['text'] }}
55 |                     </n-card>
56 |                 </n-gi>
57 |             </n-grid>
58 |         </n-gi>
59 |         <n-gi>
60 |             <n-grid x-gap="11" y-gap="11" :cols="1">
61 |                 <n-gi v-for="i in billboard[1]">
62 |                     <n-card @click="OpenLink(i['url'])" :style="{
63 |                         'background-color': RandColor(),
64 |                         'cursor': i['url'] ? 'pointer' : 'auto'
65 |                     }" hoverable content-style="padding:0 11px 11px 11px;">
66 |                         <template #cover>
67 |                             <img :src="i['img']">
68 |                         </template>
69 |                         <h2>{{ i['title'] }}</h2>
70 |                         {{ i['text'] }}
71 |                     </n-card>
72 |                 </n-gi>
73 |             </n-grid>
74 |         </n-gi>
75 |     </n-grid>
76 | </template>
77 | 
78 | 
79 | 


--------------------------------------------------------------------------------
/src/components/Comment.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-07-17 01:40:53
  4 |  * @LastEditTime: 2024-02-26 16:54:04
  5 |  * @Description: 评论模块
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import http from '@/utils/request';
 10 | import { h, onMounted, reactive } from 'vue';
 11 | import { FormatTime } from '@/utils/tools';
 12 | import { onBeforeRouteLeave } from 'vue-router';
 13 | import { Comment, CommentList as ICommentList, User } from '@/utils/types';
 14 | import RenderLink from './RenderLink.vue';
 15 | import ImageViewer from "@/components/ImageViewer/ImageViewer.vue"
 16 | import CommentList from './CommentList.vue';
 17 | import CommentEdit from './CommentEdit.vue';
 18 | 
 19 | 
 20 | const props = defineProps(['obj', 'rate'])
 21 | 
 22 | // 回复评论
 23 | const sub_comment = reactive({
 24 |   modal: false,
 25 |   parent: {} as Comment,
 26 |   reply_user: {} as User,
 27 |   reply_obj: '',
 28 | })
 29 | 
 30 | const comments = reactive<ICommentList>({
 31 |   order: 'default',
 32 |   page: 0,
 33 |   end: false,
 34 |   list: [] as Comment[],
 35 |   loading: false,
 36 | })
 37 | 
 38 | const sub_comment_list = reactive<ICommentList>({
 39 |   modal: false,
 40 |   parent: {} as Comment,
 41 |   order: 'old',
 42 |   page: 0,
 43 |   end: false,
 44 |   list: [] as Comment[],
 45 |   loading: false,
 46 | })
 47 | 
 48 | function OpenReplyModal(parent: Comment, reply_user = { 'id': 0 } as User, reply_obj = '') {
 49 |   sub_comment.modal = true;
 50 |   sub_comment.parent = parent;
 51 |   sub_comment.reply_user = reply_user;
 52 |   sub_comment.reply_obj = reply_obj;
 53 | }
 54 | 
 55 | function LoadComments(obj: string, cmts: any) {
 56 |   cmts.loading = true;
 57 |   http.get('/reaction/comments', {
 58 |     params: {
 59 |       obj: obj,
 60 |       order: cmts.order,
 61 |       page: cmts.page,
 62 |     }
 63 |   }).then(res => {
 64 |     if (res.data.length == 0) cmts.end = true;
 65 |     else {
 66 |       cmts.list = cmts.list.concat(res.data);
 67 |       cmts.page++;
 68 |     }
 69 |     cmts.loading = false;
 70 |   }).catch(() => { cmts.loading = false; })
 71 | }
 72 | 
 73 | 
 74 | function OpenSubComments(parent: any) {
 75 |   sub_comment_list.parent = parent;
 76 |   sub_comment_list.page = 0;
 77 |   sub_comment_list.end = false;
 78 |   sub_comment_list.list = [];
 79 |   sub_comment_list.modal = true;
 80 |   LoadComments('comment' + parent.id, sub_comment_list);
 81 | }
 82 | 
 83 | onMounted(() => {
 84 |   LoadComments(props.obj, comments);
 85 | })
 86 | 
 87 | onBeforeRouteLeave((to, from) => {
 88 |   sub_comment_list.modal = false;
 89 |   sub_comment.modal = false;
 90 | })
 91 | </script>
 92 | 
 93 | <template>
 94 |   <CommentEdit :target="props.obj" :rate="props.rate" :parent_list="comments.list"
 95 |     @close-reply="() => sub_comment.modal = false" />
 96 | 
 97 |   <!-- 主评论列表 -->
 98 |   <CommentList :ctx="comments" :rate="props.rate" @open-reply="OpenReplyModal" @open-sub-comments="OpenSubComments" />
 99 |   <n-divider style="color:var(--text-color-3);font-size:14px;">
100 |     已加载{{ comments.list.length }}条
101 |   </n-divider>
102 |   <n-button block @click="LoadComments(props.obj, comments)" :disabled="comments.end" :loading="comments.loading">
103 |     {{ comments.end ? '木有更多了' : '加载更多' }}
104 |   </n-button>
105 | 
106 |   <!-- 回复模态框 -->
107 |   <n-modal v-model:show="sub_comment.modal" preset="card" style="width:624px"
108 |     :title="'回复' + (sub_comment.reply_user.id == 0 ? '' : '@' + sub_comment.reply_user.nickname)">
109 |     <CommentEdit :subcomment="true" :target="`comment${sub_comment.parent.id}`"
110 |       :parent_list="sub_comment.parent.sub"
111 |       :reply_uid="sub_comment.reply_user.id" :reply_obj="sub_comment.reply_obj"
112 |       @close-reply="() => sub_comment.modal = false"
113 |       @close-sub-comments="() => sub_comment_list.modal = false" />
114 |   </n-modal>
115 | 
116 |   <!-- 子评论模态框 -->
117 |   <n-modal v-model:show="sub_comment_list.modal" preset="card" style="width:624px">
118 |     <n-scrollbar style="max-height:84vh">
119 |       <div style="display: flex;align-items: top;">
120 | 
121 |         <!-- 子评论的父评论 -->
122 |         <div>
123 |           <router-link :to="'/user/' + sub_comment_list.parent!.user.id">
124 |             <Avatar :user="sub_comment_list.parent!.user" :size="36" round />
125 |           </router-link>
126 |         </div>
127 | 
128 |         <span style="margin-left: 4px;margin-top:-4px">
129 |           <div style="font-size: 16px;">{{ sub_comment_list.parent!.user.nickname }}</div>
130 |           <div style="margin-top: -4px;font-size:14px;">{{ FormatTime(sub_comment_list.parent!.create_time) }}</div>
131 |           <div style="white-space:pre-wrap;margin-top:4px;word-wrap:break-word;">
132 |             <RenderLink :value="sub_comment_list.parent!.text" />
133 |           </div>
134 |           <ImageViewer v-if="sub_comment_list.parent!.images.length > 0" :images="sub_comment_list.parent!.images" />
135 |         </span>
136 |       </div>
137 | 
138 |       <n-divider style="color:var(--text-color-3);font-size:14px;">
139 |         现有{{ sub_comment_list.list.length }}条评论
140 |       </n-divider>
141 | 
142 |       <!-- 子评论列表 -->
143 |       <CommentList :ctx="sub_comment_list" subcomment @open-reply="OpenReplyModal" />
144 |       <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ sub_comment_list.list.length }}条</n-divider>
145 |       <n-button block @click="LoadComments('comment' + sub_comment_list.parent!.id, sub_comment_list)"
146 |         :disabled="sub_comment_list.end" :loading="sub_comment_list.loading">
147 |         {{ sub_comment_list.end ? '木有更多了' : '加载更多' }}</n-button>
148 |     </n-scrollbar>
149 |   </n-modal>
150 | </template>


--------------------------------------------------------------------------------
/src/components/CommentEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <n-space vertical>
  3 |     <n-rate v-if="props.rate && !props.subcomment" v-model:value="now_comment.rate" allow-half size="large" />
  4 |     <n-input v-model:value="now_comment.text" type="textarea" placeholder="沉默不是金" :autosize="{ minRows: 3 }"
  5 |       maxlength="23333" show-count />
  6 |     <n-upload v-show="now_comment.with_image" list-type="image-card" :action="upload_url" :headers="upload_head"
  7 |       @finish="UploadHandler" @error="UploadErrorHandler" v-model:file-list="fileList"
  8 |       :on-remove="OnImageRemove" :max="1"/>
  9 |     <n-space justify="space-between">
 10 |       <n-space>
 11 |         <n-button @click="now_comment.with_image = !now_comment.with_image" ghost>
 12 |           附图:{{ now_comment.with_image ? '是' : '否' }}
 13 |         </n-button>
 14 |         <n-button @click="now_comment.anonymous = !now_comment.anonymous" ghost>
 15 |           匿名:{{ now_comment.anonymous ? '是' : '否' }}
 16 |         </n-button>
 17 |       </n-space>
 18 |       <n-space>
 19 |         <n-popconfirm v-if="hasDraft" @positive-click="DiscardDraft" positive-text="确定" negative-text="取消">
 20 |           <template #trigger>
 21 |             <n-button type="error" ghost>放弃草稿</n-button>
 22 |           </template>
 23 |           汝真放弃耶？放弃的草稿无法恢复。
 24 |         </n-popconfirm>
 25 |         <n-button @click="CommentPost(
 26 |           props.target,
 27 |           props.parent_list,
 28 |           props.reply_uid,
 29 |           props.reply_obj
 30 |         )" type="info" ghost :disabled="now_comment.loading" :loading="now_comment.loading" icon-placement="right">
 31 |           <template #icon>
 32 |             <n-icon>
 33 |               <MessageOutlined v-if="!props.subcomment" />
 34 |               <ReplyOutlined v-else />
 35 |             </n-icon>
 36 |           </template>
 37 |           {{ props.subcomment ? "回复" : "发表评论" }}
 38 |         </n-button>
 39 |       </n-space>
 40 |     </n-space>
 41 |   </n-space>
 42 | 
 43 |   <!-- 删除图片确认 -->
 44 |   <n-modal v-model:show="image_remove_modal" preset="dialog" title="汝真断舍离耶？" positive-text="确认" negative-text="取消"
 45 |     @positive-click="ConfirmRemoveImage(true)" @negative-click="ConfirmRemoveImage(false)" />
 46 | </template>
 47 | 
 48 | <script lang="ts" setup>
 49 | import http from '@/utils/request';
 50 | import store from '@/utils/store';
 51 | import { Comment } from '@/utils/types';
 52 | import { UploadFileInfo } from 'naive-ui';
 53 | import { onMounted, reactive, ref, watch } from 'vue';
 54 | import { useRouter } from 'vue-router';
 55 | 
 56 | import MessageOutlined from '@vicons/material/MessageOutlined';
 57 | import ReplyOutlined from '@vicons/material/ReplyOutlined';
 58 | import { FormatTime } from '@/utils/tools';
 59 | import { computed } from 'vue';
 60 | 
 61 | const router = useRouter();
 62 | 
 63 | const props = defineProps({
 64 |   subcomment: {
 65 |     type: Boolean,
 66 |     default: false
 67 |   },
 68 |   rate: {
 69 |     type: Boolean,
 70 |     default: false
 71 |   },
 72 |   target: {
 73 |     type: String,
 74 |     required: true
 75 |   },
 76 |   parent_list: {
 77 |     type: Array<Comment>,
 78 |     required: true
 79 |   },
 80 |   reply_uid: {
 81 |     type: Number,
 82 |     default: 0
 83 |   },
 84 |   reply_obj: {
 85 |     type: String,
 86 |     default: ''
 87 |   }
 88 | })
 89 | 
 90 | const emits = defineEmits<{
 91 |   closeReply: [],
 92 |   closeSubComments: [],
 93 | }>()
 94 | 
 95 | // 发表评论
 96 | const now_comment = reactive<{
 97 |   text: string,
 98 |   anonymous: boolean,
 99 |   loading: boolean,
100 |   with_image: boolean,
101 |   rate: number,
102 | }>(store.last_draft[router.currentRoute.value.fullPath] ?? {
103 |   text: '',
104 |   anonymous: false,
105 |   loading: false,
106 |   with_image: false,
107 |   rate: 5,
108 | })
109 | 
110 | // 上传图片
111 | const fileList = ref<UploadFileInfo[]>([])
112 | const upload_url = store.api_url + "/upload/image";
113 | const upload_head = {
114 |   'fake-cookie': store.fake_cookie
115 | }
116 | 
117 | const Check = () => {
118 |   if (now_comment.with_image == false && fileList.value.length == 0 && now_comment.text.length == 0) {
119 |     window.$message.error('评论不能为空Orz');
120 |     return false;
121 |   }
122 |   if (now_comment.with_image == false) {
123 |     fileList.value = [];
124 |   }
125 |   return true;
126 | }
127 | 
128 | const CommentPost = (obj: string, parent_list: Comment[], reply_uid = 0, reply_obj = '') => {
129 |   if (!Check()) return;
130 |   now_comment.loading = true;
131 |   http.post("/reaction/comments", {
132 |     obj: obj,
133 |     text: now_comment.text,
134 |     anonymous: now_comment.anonymous,
135 |     reply_uid: reply_uid,
136 |     reply_obj: reply_obj,
137 |     rate: props.rate ? Math.round(now_comment.rate * 2) : 0,
138 |     image_mids: fileList.value.map(i => i.name),
139 |   }).then(res => {
140 |     parent_list.unshift(res.data);
141 |     now_comment.text = "";
142 |     fileList.value = [];
143 |     now_comment.anonymous = false;
144 |     now_comment.with_image = false;
145 |     now_comment.loading = false;
146 |     now_comment.rate = 5;
147 |     emits("closeReply");
148 |     emits("closeSubComments");
149 |     window.$message.success('评论成功OvO');
150 |   }).catch(() => {
151 |     now_comment.loading = false;
152 |   })
153 | }
154 | 
155 | const UploadHandler = ({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) => {
156 |   let res = (event.target as XMLHttpRequest);
157 |   let data = JSON.parse(res.response);
158 |   file.name = data.mid;
159 |   window.$message.success("上传成功OvO");
160 | }
161 | 
162 | const UploadErrorHandler = ({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) => {
163 |   let res = JSON.parse((event.target as XMLHttpRequest).response);
164 |   if (res && res.msg) {
165 |     window.$message.error(res.msg);
166 |   }
167 | }
168 | 
169 | const image_remove_modal = ref(false);
170 | let ConfirmRemoveImage: (res: boolean) => void;
171 | const OnImageRemove = () => {
172 |   let promise = new Promise((resolve, reject) => {
173 |     ConfirmRemoveImage = (res) => {
174 |       if (res) resolve('');
175 |       else reject();
176 |       image_remove_modal.value = false
177 |     }
178 |   })
179 |   image_remove_modal.value = true;
180 |   return promise;
181 | }
182 | 
183 | watch(now_comment, () => {
184 |   if (now_comment.text.length) {
185 |     store.last_draft[props.target] = {
186 |       ...now_comment,
187 |       timestamp: Date.now()
188 |     }
189 |   }
190 |   else {
191 |     DiscardDraft();
192 |   }
193 | })
194 | 
195 | const DiscardDraft = () => {
196 |   now_comment.text = "";
197 |   if (store.last_draft[props.target])
198 |     delete store.last_draft[props.target];
199 | 
200 |   hasDraft.value = false;
201 | }
202 | 
203 | const draftComment = computed(() => {
204 |   return store.last_draft[props.target]
205 | })
206 | 
207 | const hasDraft = ref(!!draftComment.value);
208 | 
209 | onMounted(() => {
210 |   if (hasDraft.value) {
211 |     now_comment.text = draftComment.value.text;
212 |     now_comment.anonymous = draftComment.value.anonymous;
213 |     now_comment.with_image = draftComment.value.with_image;
214 |     now_comment.rate = draftComment.value.rate;
215 | 
216 |     window.$message.success(`已恢复 ${FormatTime(draftComment.value.timestamp / 1000)} 的草稿 OvO`);
217 |   }
218 | })
219 | </script>


--------------------------------------------------------------------------------
/src/components/CommentList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <template v-for="i in props.ctx.list" :key="i.id">
  3 |     <n-divider :style="`margin:${subcomment ? 11 : 24}px`"></n-divider>
  4 |     <div style="display: flex;align-items: top;">
  5 |       <div>
  6 |         <router-link :to="'/user/' + i.user.id">
  7 |           <Avatar :user="i.user" :size="36" round />
  8 |         </router-link>
  9 |       </div>
 10 |       <span style="margin-left: 4px;margin-top:-4px;flex:1">
 11 |         <div style="font-size: 16px;">{{ i.user.nickname }}</div>
 12 |         <div style="margin-top: -4px;font-size:14px;">{{ FormatTime(i.create_time) }}</div>
 13 |         <n-rate v-if="props.rate && !props.subcomment" :value="i.rate / 2" allow-half size="large" readonly />
 14 |         <div style="white-space: pre-wrap;margin-top:4px;word-wrap:break-word;">
 15 |           <n-a v-if="i.reply_user.id != 0" :href="'/user/' + i.reply_user.id" style="text-decoration:none;">
 16 |             @{{ i.reply_user.nickname + ' ' }}
 17 |           </n-a>
 18 |           <RenderLink :value="i.text" />
 19 |         </div>
 20 |         <ImageViewer v-if="i.images.length > 0" :images="i.images" />
 21 | 
 22 |         <n-space :align="'center'">
 23 |           <n-button @click="Like(i)" color="#fb7299" text :loading="like_loading.get(i.id)"
 24 |             :disabled="like_loading.get(i.id)">
 25 |             <template #icon>
 26 |               <n-icon>
 27 |                 <ThumbUpFilled v-if="i.like" />
 28 |                 <ThumbUpOutlined v-else />
 29 |               </n-icon>
 30 |             </template>
 31 |             {{ i.like_num }}赞同
 32 |           </n-button>
 33 | 
 34 |           <n-button text @click="() => (props.ctx.parent)
 35 |               ? OpenReplyModal(props.ctx.parent, i.user, 'comment' + i.id)
 36 |               : OpenReplyModal(i)">
 37 |             <template #icon>
 38 |               <n-icon>
 39 |                 <ReplyOutlined />
 40 |               </n-icon>
 41 |             </template>
 42 |             回复
 43 |           </n-button>
 44 | 
 45 |           <n-popconfirm @positive-click="Delete(i, props.ctx)" :show-icon="false" positive-text="确定"
 46 |             negative-text="取消">
 47 |             <template #trigger>
 48 |               <n-button v-show="i.own" text>
 49 |                 <template #icon>
 50 |                   <n-icon>
 51 |                     <DeleteOutlined />
 52 |                   </n-icon>
 53 |                 </template>
 54 |                 删除
 55 |               </n-button>
 56 |             </template>
 57 |             汝真断舍离耶？
 58 |           </n-popconfirm>
 59 | 
 60 |           <n-dropdown :options="dropdown.options" trigger="click">
 61 |             <div style="display:flex;align-items: center;">
 62 |               <n-button @click="dropdown.comment = i" text>
 63 |                 <template #icon>
 64 |                   <n-icon :component="MoreVertOutlined" />
 65 |                 </template>
 66 |               </n-button>
 67 |             </div>
 68 |           </n-dropdown>
 69 |         </n-space>
 70 | 
 71 |         <!-- 子评论预览 -->
 72 |         <div v-if="i.sub.length != 0" style="background-color:#CCCCCC22;padding:4px;border-radius: 4px;">
 73 |           <div v-for="j in i.sub.slice(0, 3)" :key="j.id" style="margin:4px;">
 74 |             {{ j.user.nickname }}：
 75 |             <span v-if="j.reply_user.id != 0">@{{ j.reply_user.nickname + ' ' }}</span>
 76 |             <span style="white-space:pre-wrap;margin-top:4px;word-wrap:break-word;">{{ (j.images.length ? '【图片】' : '') +
 77 |               j.text
 78 |               }}</span>
 79 |           </div>
 80 |           <n-button @click="OpenSubComments(i)" text>共{{ i.comment_num }}条回复>></n-button>
 81 |         </div>
 82 |       </span>
 83 |     </div>
 84 |   </template>
 85 | </template>
 86 | 
 87 | <script setup lang="tsx">
 88 | import { FormatTime } from '@/utils/tools';
 89 | import { PropType, reactive, ref } from 'vue';
 90 | import http from '@/utils/request';
 91 | import { Comment, CommentList, User } from '@/utils/types';
 92 | import { NIcon } from 'naive-ui';
 93 | import { h } from 'vue';
 94 | import { useRouter } from 'vue-router';
 95 | 
 96 | import MoreVertOutlined from '@vicons/material/MoreVertOutlined';
 97 | import FeedbackOutlined from '@vicons/material/FeedbackOutlined';
 98 | import ThumbUpOutlined from '@vicons/material/ThumbUpOutlined'
 99 | import ThumbUpFilled from '@vicons/material/ThumbUpFilled'
100 | import DeleteOutlined from '@vicons/material/DeleteOutlined'
101 | import ReplyOutlined from '@vicons/material/ReplyOutlined'
102 | 
103 | const router = useRouter();
104 | 
105 | const props = defineProps({
106 |   ctx: { type: Object as PropType<CommentList>, required: true },
107 |   rate: { type: Boolean, default: false },
108 |   subcomment: { type: Boolean, default: false },
109 | })
110 | 
111 | const emits = defineEmits<{
112 |   openReply: [parent: Comment, reply_user: User, reply_obj: string],
113 |   openSubComments: [comm: Comment],
114 | }>()
115 | 
116 | const like_loading = ref<Map<number, boolean>>(new Map());
117 | const Like = (comm: Comment) => {
118 |   like_loading.value.set(comm.id, true);
119 |   http.post("/reaction/like", { 'obj': 'comment' + comm.id })
120 |     .then(res => {
121 |       comm.like = res.data.like;
122 |       comm.like_num = res.data.like_num;
123 |       like_loading.value.set(comm.id, false);
124 |     }).catch(() => { like_loading.value.set(comm.id, false); })
125 | }
126 | 
127 | const Delete = (i: any, cmts: any) => {
128 |   http.delete("/reaction/comments/" + i.id)
129 |     .then(() => {
130 |       cmts.list = cmts.list.filter((x: any) => (x.id != i.id))
131 |     })
132 | }
133 | 
134 | const renderIcon = (icon: any) => {
135 |   return () => h(NIcon, null, { default: () => h(icon) })
136 | }
137 | 
138 | const dropdown = reactive({
139 |   comment: {} as Comment,
140 |   options: [
141 |     {
142 |       label: '举报',
143 |       key: 'report',
144 |       icon: renderIcon(FeedbackOutlined),
145 |       props: {
146 |         onClick: () => {
147 |           router.push('/report/comment' + dropdown.comment.id);
148 |         }
149 |       }
150 |     },
151 |   ]
152 | })
153 | 
154 | const OpenReplyModal = (parent: Comment, reply_user = { 'id': 0 } as User, reply_obj = '') => {
155 |   emits("openReply", parent, reply_user, reply_obj);
156 | }
157 | 
158 | const OpenSubComments = (comm: Comment) => {
159 |   emits("openSubComments", comm);
160 | }
161 | </script>
162 | 


--------------------------------------------------------------------------------
/src/components/GlobalComponents.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-06-26 17:48:33
 4 |  * @LastEditTime: 2022-07-17 13:35:07
 5 |  * @Description: 所有页面公用的全局组件
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import MessageContent from './MessageContent.vue';
10 | import {webvpn,WebvpnVerify2} from '@/utils/tools'
11 | 
12 | </script>
13 | 
14 | <template>
15 |   <n-message-provider>
16 |     <MessageContent />
17 |   </n-message-provider>
18 |   <n-modal v-model:show="webvpn.model" :mask-closable="false">
19 |     <n-card title="人 工 智 能 识 别" style="width: 224px;text-align: center;">
20 |       <p style="margin-top:0px;">越人工 越智能</p>
21 |       <n-image :src="webvpn.data.captcha" />
22 |       <n-input v-model:value="webvpn.data.captcha_text" placeholder="不会看不出来吧"></n-input>
23 |       <template #footer>
24 |         <n-button @click="WebvpnVerify2" :disabled="!webvpn.data.captcha_text">确认</n-button>
25 |       </template>
26 |     </n-card>
27 |   </n-modal>
28 | </template>


--------------------------------------------------------------------------------
/src/components/ImageViewer/ImageBox.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineProps, reactive, defineEmits } from 'vue';
 3 | import { useThemeVars } from 'naive-ui'
 4 | 
 5 | const props = defineProps({
 6 |   src: {
 7 |     type: String,
 8 |     required: true
 9 |   },
10 |   lazy: {
11 |     type: Boolean,
12 |     default: true
13 |   }
14 | })
15 | 
16 | const emits = defineEmits(["preview"])
17 | 
18 | const open = () => {
19 |   emits("preview")
20 | }
21 | 
22 | const containerStyle = reactive({
23 |   width: "100%",
24 |   height: "100%",
25 |   position: "absolute",
26 |   top: 0,
27 |   left: 0,
28 |   "object-fit": "contain",
29 |   background: useThemeVars().value.actionColor,
30 |   "aspect-radio": "1/1",
31 |   "border-radius": useThemeVars().value.borderRadius,
32 |   border: `1px solid ${useThemeVars().value.borderColor}`,
33 |   "box-sizing": "border-box"
34 | })
35 | 
36 | const picStyle = reactive({
37 |   width: "100%",
38 |   height: "100%",
39 |   "aspect-radio": "1/1",
40 |   "object-fit": "cover",
41 |   "user-drag": "none",
42 |   "user-select": "none",
43 |   "border-radius": useThemeVars().value.borderRadiusSmall,
44 | })
45 | </script>
46 | 
47 | <template>
48 |   <n-element :style="containerStyle" @click.stop="(e: MouseEvent) => {
49 |       e.preventDefault()
50 |       open()
51 |     }">
52 |     <!-- @vue-ignore-error -->
53 |     <img :src="props.src" :style="picStyle" :lazy="props.lazy" onerror="this.style.display = 'none'"/>
54 |   </n-element>
55 | </template>


--------------------------------------------------------------------------------
/src/components/ImageViewer/ImageModal.css:
--------------------------------------------------------------------------------
 1 | @keyframes fadeInRight {
 2 |   0% {
 3 |     transform: translateX(40%);
 4 |     opacity: 0
 5 |   }
 6 | 
 7 |   100% {
 8 |     opacity: 1
 9 |   }
10 | }
11 | 
12 | @keyframes fadeInLeft {
13 |   0% {
14 |     transform: translateX(-40%);
15 |     opacity: 0
16 |   }
17 | 
18 |   100% {
19 |     opacity: 1
20 |   }
21 | }
22 | 
23 | .slide-fade-left-enter-active {
24 |   animation: fadeInLeft 0.267s;
25 | }
26 | 
27 | .slide-fade-left-leave-active {
28 |   animation: unset;
29 | }
30 | 
31 | .slide-fade-right-enter-active {
32 |   animation: fadeInRight 0.267s
33 | }
34 | 
35 | .slide-fade-right-leave-active {
36 |   animation: unset;
37 | }


--------------------------------------------------------------------------------
/src/components/ImageViewer/ImageModal.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { defineProps, reactive, defineEmits, ref, watch, StyleValue, onUpdated } from 'vue';
  3 | import { onBeforeRouteLeave } from 'vue-router'
  4 | import ArrowForwardFilled from '@vicons/material/ArrowForwardFilled'
  5 | import ArrowBackFilled from '@vicons/material/ArrowBackFilled'
  6 | import BrokenImageFilled from '@vicons/material/BrokenImageFilled'
  7 | import CloseFilled from '@vicons/material/CloseFilled'
  8 | import DownloadFilled from '@vicons/material/DownloadFilled'
  9 | import { useThemeVars } from 'naive-ui'
 10 | import './ImageModal.css'
 11 | 
 12 | const props = defineProps({
 13 |   src: {
 14 |     type: String,
 15 |     required: true,
 16 |   },
 17 |   idx: {
 18 |     type: Number,
 19 |     default: 0
 20 |   },
 21 |   amount: {
 22 |     type: Number,
 23 |     default: 1
 24 |   }
 25 | })
 26 | 
 27 | const containerStyle = reactive({
 28 |   background: "transparent",
 29 |   position: "absolute",
 30 |   left: "0px",
 31 |   right: "0px",
 32 |   top: "0px",
 33 |   bottom: "0px",
 34 |   display: "flex",
 35 |   "align-self": "unset",
 36 |   "align-items": "center",
 37 |   "justify-content": "center",
 38 |   overflow: "hidden"
 39 | })
 40 | 
 41 | const baseStyle = reactive({
 42 |   "object-fit": "contain",
 43 |   "max-height": "100vh",
 44 |   "max-width": "100vw",
 45 |   "user-select": "none",
 46 |   "user-drag": "none"
 47 | })
 48 | 
 49 | const button = reactive({
 50 |   position: "absolute",
 51 |   color: useThemeVars().value.iconColor,
 52 |   background: "rgba(255, 255, 255, 0.2)"
 53 | })
 54 | const leftButton = reactive({
 55 |   left: "8px"
 56 | })
 57 | 
 58 | const rightButton = reactive({
 59 |   right: "8px"
 60 | })
 61 | 
 62 | const topButton = reactive({
 63 |   top: "8px"
 64 | })
 65 | 
 66 | const bottomButton = reactive({
 67 |   bottom: "8px"
 68 | })
 69 | 
 70 | const picStyle = ref<{ [k: string]: string }[]>([baseStyle])
 71 | 
 72 | const load = ref(false)
 73 | const loadError = ref(false)
 74 | 
 75 | const loadingStyle = ref([{ display: "none" }])
 76 | watch(load, () => {
 77 |   if (load.value && !loadError.value) {
 78 |     loadingStyle.value = [{ display: "block" }]
 79 |   }
 80 |   else {
 81 |     loadingStyle.value = [{ display: "none" }]
 82 |   }
 83 | })
 84 | 
 85 | const emits = defineEmits(["close", "prev", "next"])
 86 | const close = () => emits("close")
 87 | const prev = () => emits("prev")
 88 | const next = () => emits("next")
 89 | const download = async () => {
 90 |   if (load.value && !loadError.value) {
 91 |     window.$message.info("开始下载啦!")
 92 |     try {
 93 |       const pic = await (await fetch(props.src, { mode: 'no-cors' })).blob()
 94 |       const a = document.createElement("a")
 95 |       a.href = window.URL.createObjectURL(pic)
 96 |       a.download = props.src.match(/[^\/]*\.[^\/]{1,6}$/)![0]
 97 |       a.click()
 98 |       window.$message.success("下载成功\\^v^/")
 99 |     }
100 |     catch {
101 |       window.$message.error("下载出错qwq")
102 |     }
103 |   }
104 | }
105 | 
106 | let touch: TouchList
107 | let start = false
108 | let scale = false
109 | let thisTimeScaled = false
110 | let scaleCenter: { centerX: number, centerY: number, distance: number } = { centerX: 0, centerY: 0, distance: 0 }
111 | const distance = (a: Touch, b: Touch) => Math.sqrt((a.clientX - b.clientX) ** 2 + (a.clientY - b.clientY) ** 2)
112 | 
113 | const touchStart = (e: TouchEvent) => {
114 |   touch = e.touches
115 |   start = true
116 | 
117 |   if (touch.length === 2) {
118 |     scale = true
119 |     scaleCenter.centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2
120 |     scaleCenter.centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2
121 |     scaleCenter.distance = distance(e.touches[0], e.touches[1])
122 |   }
123 | }
124 | const touchEventHandler = (e: TouchEvent) => {
125 |   if (e.touches.length === 1) {
126 |     // 单点触控
127 |     let clientX = e.touches[0].clientX
128 |     let clientY = e.touches[0].clientY
129 | 
130 |     let { clientX: startX, clientY: startY } = touch[0]
131 | 
132 |     if (!scale) {
133 |       // 未缩放, 切换
134 |       switchPic(clientX, startX)
135 |       return
136 |     }
137 | 
138 |     else if (!thisTimeScaled) {
139 |       // 平移
140 |       movePic(clientX, clientY, startX, startY)
141 |     }
142 |   }
143 | 
144 |   if (e.touches.length === 2) {
145 |     // 这次缩放了 不能平移
146 |     thisTimeScaled = true
147 |     scalePic(distance(e.touches[0], e.touches[1]))
148 |   }
149 | }
150 | 
151 | const animation = ref<"slide-fade-left" | "slide-fade-right">("slide-fade-right")
152 | const switchPic = async (clientX: number, startX: number, distance: number = 50) => {
153 |   if (clientX - startX < -distance && props.idx + 1 !== props.amount && start)
154 |     next()
155 |   if (clientX - startX > distance && props.idx !== 0 && start)
156 |     prev()
157 | }
158 | 
159 | let offsetX = 0, offsetY = 0
160 | let displayOffsetX = 0, displayOffsetY = 0
161 | let reactiveOffsetX = ref("0")
162 | let reactiveOffsetY = ref("0")
163 | const movePic = (clientX: number, clientY: number, startX: number, startY: number) => {
164 |   offsetX = clientX - startX + displayOffsetX
165 |   offsetY = clientY - startY + displayOffsetY
166 | 
167 |   reactiveOffsetX.value = offsetX.toString() + "px"
168 |   reactiveOffsetY.value = offsetY.toString() + "px"
169 | }
170 | 
171 | let displayRatio = 100
172 | let ratio = 100
173 | let transform = ref("scale(100%)")
174 | const scalePic = (distance: number) => {
175 |   ratio = distance / scaleCenter.distance
176 | 
177 |   let vh = window.innerHeight / 100
178 |   let vw = window.innerWidth / 100
179 | 
180 |   // 玄学 缩放的时候进行偏移 让缩放后内容在手底下
181 |   offsetX = (50 * vw - scaleCenter.centerX) * (ratio - 1) + displayOffsetX
182 |   offsetY = (50 * vh - scaleCenter.centerY) * (ratio - 1) + displayOffsetY
183 | 
184 |   reactiveOffsetX.value = offsetX.toString() + "px"
185 |   reactiveOffsetY.value = offsetY.toString() + "px"
186 | 
187 |   ratio *= displayRatio;
188 |   ratio = ratio > 100 ? ratio : 100;
189 |   transform.value = `scale(${ratio}%)`
190 | }
191 | 
192 | const touchEndHandler = (e: TouchEvent) => {
193 |   thisTimeScaled = e.touches.length >= 1
194 |   operationCleanUp()
195 | }
196 | 
197 | const operationCleanUp = () => {
198 |   if (scale) {
199 |     displayRatio = ratio
200 |     displayOffsetX = offsetX
201 |     displayOffsetY = offsetY
202 | 
203 |     if (displayRatio === 100) {
204 |       scale = false
205 |       transform.value = ""
206 |       displayOffsetX = 0, displayOffsetY = 0
207 |       picStyle.value = [baseStyle, transition]
208 |       reactiveOffsetX.value = "0px"
209 |       reactiveOffsetY.value = "0px"
210 |       setTimeout(() => picStyle.value = [baseStyle], 133)
211 |     }
212 |   }
213 | }
214 | 
215 | const wheelEventHandler = (e: WheelEvent) => {
216 |   e.preventDefault()
217 |   if (e.deltaY !== 0) {
218 |     scale = true
219 | 
220 |     scaleCenter.centerX = e.clientX
221 |     scaleCenter.centerY = e.clientY
222 |     scaleCenter.distance = 1
223 | 
224 |     scalePic(-e.deltaY / 100 + 1)
225 | 
226 |     operationCleanUp()
227 |   }
228 | }
229 | 
230 | let drag: MouseEvent
231 | const dragStart = (e: MouseEvent) => {
232 |   start = true
233 |   drag = e
234 | }
235 | 
236 | const dragEventHandler = (e: MouseEvent) => {
237 |   if (start && scale) {
238 |     movePic(e.clientX, e.clientY, drag.clientX, drag.clientY)
239 |   }
240 |   if (start && !scale) {
241 |     switchPic(e.clientX, drag.clientX, 100)
242 |   }
243 | }
244 | 
245 | const dragEndHandler = () => {
246 |   start = false
247 |   operationCleanUp()
248 | }
249 | 
250 | const transition = {
251 |   transition: "0.133s ease-out"
252 | }
253 | 
254 | const transformStyle = reactive({
255 |   transform,
256 |   "position": "relative",
257 |   "top": reactiveOffsetY,
258 |   "left": reactiveOffsetX
259 | }) as StyleValue
260 | 
261 | onBeforeRouteLeave((to, from) => {
262 |   close()
263 |   return false
264 | })
265 | 
266 | const prevIdx = ref(0)
267 | onUpdated(() => {
268 |   // 重置加载状态
269 |   start = false
270 |   load.value = false
271 |   loadError.value = false
272 | 
273 |   // 动画
274 |   animation.value = props.idx < prevIdx.value ? "slide-fade-left" : "slide-fade-right"
275 |   prevIdx.value = props.idx
276 | })
277 | </script>
278 | 
279 | <template>
280 |   <n-element :style="containerStyle" @click="() => close()" @mousedown.stop="dragStart"
281 |     @mousemove.stop="dragEventHandler" @mouseup.stop="dragEndHandler" @touchstart.stop="touchStart"
282 |     @touchmove.stop="touchEventHandler" @touchend.stop="touchEndHandler" @wheel.stop="wheelEventHandler">
283 |     <div style="max-height: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center;">
284 |       <Transition :name="animation" mode="out-in">
285 |         <!-- @vue-ignore-error -->
286 |         <img :key="props.idx" :src="props.src" :style="[picStyle, transformStyle, loadingStyle]" draggable="false"
287 |           @error="() => { loadError = true; load = true }" @load="() => load = true" @click.stop />
288 |       </Transition>
289 |       <n-empty v-if="loadError" description="加载不出来了啦" style="--n-text-color: #ffffff">
290 |         <template #icon>
291 |           <n-icon>
292 |             <BrokenImageFilled style="color: #ffffff" />
293 |           </n-icon>
294 |         </template>
295 |         <template #extra>
296 |           <n-button style="color: #ffffff">再试试</n-button>
297 |         </template>
298 |       </n-empty>
299 |       <n-spin v-if="!load" />
300 |     </div>
301 |     <n-button @click.stop="prev()" circle v-if="props.amount > 1 && props.idx !== 0" :style="[button, leftButton]">
302 |       <template #icon>
303 |         <n-icon>
304 |           <ArrowBackFilled />
305 |         </n-icon>
306 |       </template>
307 |     </n-button>
308 |     <n-button @click.stop="next()" circle v-if="props.amount > 1 && props.idx + 1 !== props.amount"
309 |       :style="[button, rightButton]">
310 |       <template #icon>
311 |         <n-icon>
312 |           <ArrowForwardFilled />
313 |         </n-icon>
314 |       </template>
315 |     </n-button>
316 |     <n-button @click.stop="close()" circle :style="[button, rightButton, topButton]">
317 |       <template #icon>
318 |         <n-icon>
319 |           <CloseFilled />
320 |         </n-icon>
321 |       </template>
322 |     </n-button>
323 |     <n-button @click.stop="download()" circle :style="[button, rightButton, bottomButton]">
324 |       <template #icon>
325 |         <n-icon>
326 |           <DownloadFilled />
327 |         </n-icon>
328 |       </template>
329 |     </n-button>
330 |   </n-element>
331 | </template>


--------------------------------------------------------------------------------
/src/components/ImageViewer/ImageViewer.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref, PropType } from 'vue';
 3 | const openModal = ref(false)
 4 | const position = ref(0)
 5 | 
 6 | const props = defineProps({
 7 |   images: {
 8 |     type: Object as PropType<{
 9 |       low_url: string,
10 |       mid: string,
11 |       url: string
12 |     }[]>
13 |   },
14 |   lazy: {
15 |     type: Boolean,
16 |     default: true
17 |   },
18 |   previewDisabled: {
19 |     type: Boolean,
20 |     default: false
21 |   },
22 |   shrink: {
23 |     type: Boolean,
24 |     default: true
25 |   }
26 | })
27 | 
28 | const showModal = (idx: number) => {
29 |   if (props.previewDisabled) return;
30 |   position.value = idx
31 |   openModal.value = true
32 | }
33 | </script>
34 | 
35 | <template>
36 |   <n-grid x-gap="5" y-gap="5" :cols="3" style="max-width: 424px;">
37 |     <n-gi v-for="(image, idx) in props.images">
38 |       <div v-if="(props.shrink && idx <= 2) || !props.shrink" @click.stop="" style="height: 0; padding-bottom:  100%; position: relative;">
39 |         <ImageBox :src="image.low_url" lazy @preview="showModal(idx)" />
40 |         <div v-if="props.shrink && idx == 2 && props.images!.length > 3"
41 |           style="width: 100%; height: 100% ;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.5);display:flex; justify-content:center;align-items:center;pointer-events:none;">
42 |           <h2 style="color:#fff">+{{ props.images!.length - 2 }}</h2>
43 |         </div>
44 |       </div>
45 |     </n-gi>
46 |   </n-grid>
47 |   <n-modal :show="openModal" :auto-focus="false">
48 |     <ImageModal :src="props.images![position].url" :idx="position" :amount="props.images!.length"
49 |       @close="() => openModal = false" @prev="() => position -= 1" @next="() => position += 1" />
50 |   </n-modal>
51 | </template>
52 | 
53 | 


--------------------------------------------------------------------------------
/src/components/MessageContent.d.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-29 17:44:11
 4 |  * @LastEditTime: 2022-05-29 17:44:31
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 |  */
 8 | // 引入naive对应的定义类型
 9 | import type { DialogApiInjection } from "naive-ui/lib/dialog/src/DialogProvider";
10 | import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider";
11 | 
12 | declare global {
13 |     interface Window {
14 |         $message: MessageApiInjection;
15 |         $dialog: DialogApiInjection;
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/MessageContent.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-29 17:40:17
 4 |  * @LastEditTime: 2022-05-29 19:23:56
 5 |  * @Description: 规避Vue的Inject限制，给全局提供Message
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import { useMessage } from 'naive-ui';
10 | 
11 | window.$message=useMessage();
12 | </script>
13 | 
14 | <template></template>


--------------------------------------------------------------------------------
/src/components/PaperRender.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-06-29 22:48:31
  4 |  * @LastEditTime: 2024-02-26 17:07:46
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import hljs from "highlight.js"
 10 | import "highlight.js/styles/vs2015.css"
 11 | 
 12 | defineProps(['paper'])
 13 | 
 14 | </script>
 15 | 
 16 | <style>
 17 | a {
 18 |   color: var(--primary-color);
 19 | }
 20 | 
 21 | b {
 22 |   font-weight: 900;
 23 | }
 24 | 
 25 | .inline-code {
 26 |   background-color: #CCCCCC22;
 27 |   color: var(--primary-color);
 28 |   padding: 3px 4px;
 29 |   border-radius: 5px;
 30 |   margin: 0 1px;
 31 |   font-family: inherit;
 32 | }
 33 | </style>
 34 | 
 35 | <template>
 36 |   <div v-for="i in paper.data.blocks" style="word-wrap:break-word;">
 37 |     <!-- {{i.type}} -->
 38 |     <template v-if="i.type == 'paragraph'">
 39 |       <p v-html="i.data.text"></p>
 40 |     </template>
 41 | 
 42 |     <template v-else-if="i.type == 'header'">
 43 |       <component :is="'h' + i.data.level" style="color:var(--primary-color);margin-bottom: 0px;" v-html="i.data.text"></component>
 44 |     </template>
 45 | 
 46 |     <template v-else-if="i.type == 'image'">
 47 |       <div style="text-align:center;margin-top: 11px;margin-bottom: 11px;">
 48 |         <n-image :preview-src="i.data.file.url" :src="i.data.file.low_url?i.data.file.low_url:i.data.file.url" width="424"
 49 |           :img-props="{ 'style': 'max-width:100%;' }" :alt="i.data.caption" />
 50 |         <div style="color:var(--text-color-3)" v-html="i.data.caption"></div>
 51 |       </div>
 52 |     </template>
 53 | 
 54 |     <template v-else-if="i.type == 'list'">
 55 |       <ol v-if="i.data.style == 'ordered'">
 56 |         <li v-for="j in i.data.items" v-html="j"></li>
 57 |       </ol>
 58 |       <ul v-else>
 59 |         <li v-for="j in i.data.items" v-html="j"></li>
 60 |       </ul>
 61 |     </template>
 62 | 
 63 |     <template v-else-if="i.type == 'quote'">
 64 |       <n-alert :show-icon="false" style="margin-top:11px;margin-bottom:11px;">
 65 |         <div style="color:var(--text-color-3);font-size:42px;margin:-11px 0 0 -24px;">“</div>
 66 |         <div v-html="i.data.text" style="margin:-42px 24px 0 24px;"
 67 |           :style="'text-align:' + i.data.alignment"></div>
 68 |         <div style="color:var(--text-color-3);text-align: right;font-size:42px;margin:-24px -20px -24px 0;">”</div>
 69 |         <div v-html="'——' + i.data.caption" style="text-align:right;"></div>
 70 |       </n-alert>
 71 |     </template>
 72 | 
 73 |     <template v-else-if="i.type == 'code'">
 74 |       <pre><code v-html="hljs.highlightAuto(i.data.code).value" class="hljs" style="border-radius:11px"></code></pre>
 75 |     </template>
 76 | 
 77 |     <template v-else-if="i.type == 'AnyButton'">
 78 |       <a :href="i.data.link" target="_blank">
 79 |         <n-card size="small">
 80 |           {{ i.data.text }}
 81 |           <div style="color:var(--text-color-3);font-size: 11px;">{{ i.data.link }}</div>
 82 |         </n-card>
 83 |       </a>
 84 |     </template>
 85 | 
 86 |     <template v-else-if="i.type == 'delimiter'">
 87 |       <n-divider></n-divider>
 88 |     </template>
 89 | 
 90 |     <template v-else-if="i.type == 'table'">
 91 |       <n-table :single-line="false" striped size="small" style="margin-top:11px;margin-bottom:11px;">
 92 |         <tbody>
 93 |           <tr v-for="row in i.data.content">
 94 |             <td v-for="j in row" v-html="j"></td>
 95 |           </tr>
 96 |         </tbody>
 97 |       </n-table>
 98 |     </template>
 99 |   </div>
100 | </template>


--------------------------------------------------------------------------------
/src/components/Posters.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-10-20 13:25:20
  4 |  * @LastEditTime: 2025-06-04 01:55:01
  5 |  * @Description: _(:з」∠)_
  6 | -->
  7 | <script setup lang="ts">
  8 | import http from '@/utils/request';
  9 | import { PropType, onMounted, reactive, ref, watch } from 'vue';
 10 | import { Poster } from '@/utils/types';
 11 | import { FormatTime, OpenLink } from '@/utils/tools';
 12 | import ErrorOutlined from '@vicons/material/ErrorOutlined'
 13 | import Avatar from '@/components/Avatar.vue';
 14 | import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
 15 | 
 16 | export interface PostersStatus {
 17 |   mode: 'recommend' | 'search' | 'follow' | 'hot';
 18 |   search: string;
 19 |   order: 'new' | 'like' | 'comment';
 20 |   uid: number;
 21 |   hide_bot: boolean; // 是否隐藏机器人发布的内容
 22 | }
 23 | 
 24 | const props = defineProps({
 25 |   value: {
 26 |     type: Object as PropType<PostersStatus>,
 27 |     required: true
 28 |   },
 29 | })
 30 | 
 31 | const posters = reactive({
 32 |   page: 0,
 33 |   end: false,
 34 |   loading: false,
 35 |   list: [] as Poster[],
 36 |   refresh_time: 0
 37 | })
 38 | 
 39 | function LoadPosters() {
 40 |   if (posters.loading || posters.end) return;
 41 |   posters.loading = true;
 42 |   let refresh_time = posters.refresh_time;
 43 |   http.get("/posters", {
 44 |     params: {
 45 |       mode: props.value.mode,
 46 |       page: posters.page,
 47 |       search: props.value.search,
 48 |       order: props.value.order,
 49 |       uid: props.value.uid,
 50 |       hide_bot: props.value.mode == 'search' && props.value.hide_bot,
 51 |     }
 52 |   }).then(res => {
 53 |     // 状态更新后可能之前的请求还没完成 得加上时间戳保证更新的是最新的
 54 |     if (refresh_time != posters.refresh_time) return;
 55 |     if (res.data.length == 0) posters.end = true;
 56 |     else {
 57 |       posters.list = posters.list.concat(res.data);
 58 |       posters.page++;
 59 |     }
 60 |     posters.loading = false;
 61 |   }).catch(() => { posters.loading = false; })
 62 | }
 63 | 
 64 | const load_more_observer = ref(null as any);
 65 | onMounted(() => {
 66 |   LoadPosters();
 67 | 
 68 |   // 构建滚动观察器
 69 |   let observer = new IntersectionObserver(([entry]) => {
 70 |     if (posters.loading || posters.end) return;
 71 |     if (entry.isIntersecting) {
 72 |       LoadPosters();
 73 |     }
 74 |   });
 75 | 
 76 |   // 监听底部元素
 77 |   observer.observe(load_more_observer.value as Element);
 78 | })
 79 | 
 80 | watch(props, () => {
 81 |   posters.page = 0;
 82 |   posters.list = [];
 83 |   posters.loading = false;
 84 |   posters.end = false;
 85 |   posters.refresh_time++;
 86 |   LoadPosters();
 87 | })
 88 | </script>
 89 | 
 90 | <template>
 91 |   <router-link v-for="i in posters.list" :to="'/gallery/' + i['id']" style="text-decoration: none;">
 92 |     <n-card hoverable style="margin-bottom:11px;">
 93 |       <div>
 94 |         <n-ellipsis :line-clamp="2" :tooltip="false"
 95 |           style="color:var(--text-color-1);font-size:18px;font-weight:bold;margin:0;">{{ i.title }}</n-ellipsis>
 96 |       </div>
 97 | 
 98 |       <n-space v-if="i.claim.id != 0 || i.public == false">
 99 |         <n-tag v-if="i.public == false" round :bordered="false" type="warning" size="small">
100 |           仅自己可见
101 |           <template #icon>
102 |             <n-icon :component="ErrorOutlined" />
103 |           </template>
104 |         </n-tag>
105 |         <n-tag v-if="i.claim.id != 0" round :bordered="false" type="error" size="small">
106 |           {{ i.claim.text }}
107 |           <template #icon>
108 |             <n-icon :component="ErrorOutlined" />
109 |           </template>
110 |         </n-tag>
111 |         <br />
112 |       </n-space>
113 | 
114 |       <n-ellipsis :line-clamp="2" :tooltip="false">{{ i.text.substring(0, 2333) }}</n-ellipsis>
115 | 
116 |       <ImageViewer v-if="i.images.length" :images="i.images" />
117 | 
118 |       <div style="color:var(--text-color-3);font-size:14px;margin-top: 11px;display:flex;align-items:center;">
119 |         <div @click="(e: MouseEvent) => {
120 |           e.preventDefault()
121 |           OpenLink('/user/' + i.user.id)
122 |         }" style="display:flex;align-items: center;flex:1;">
123 |           <Avatar :user="i.user" :size="24" round />
124 | 
125 |           <div style="width:2em;flex:1;">
126 |             <n-ellipsis style="margin-left:2px;">{{ i.user.nickname }}</n-ellipsis>
127 |           </div>
128 |         </div>
129 |         <span style="color:var(--text-color-3);">
130 |           {{ i.like_num }}赞 | {{ i.comment_num }}评 | {{ FormatTime(i.create_time) }}
131 |         </span>
132 |       </div>
133 |     </n-card>
134 |   </router-link>
135 | 
136 |   <div ref="load_more_observer"></div>
137 | 
138 |   <n-divider style="font-size:14px;">已加载{{ posters.list.length }}条</n-divider>
139 | 
140 |   <n-button block @click="LoadPosters()" :disabled="posters.end || posters.loading" :loading="posters.loading">
141 |     {{ posters.end ? '去做点更有意思的事情吧' : '加载更多' }}
142 |   </n-button>
143 | </template>


--------------------------------------------------------------------------------
/src/components/RenderLink.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-24 11:52:42
 4 |  * @LastEditTime: 2024-02-26 17:02:09
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import { onMounted, reactive } from 'vue';
 9 | 
10 | const origin=window.location.origin;
11 | 
12 | const props = defineProps({
13 |   value: {
14 |     type: String,
15 |     required: true
16 |   },
17 | })
18 | 
19 | interface Node {
20 |   type: 'text' | 'link',
21 |   text: string
22 | }
23 | 
24 | const list = reactive([] as Node[])
25 | 
26 | onMounted(() => {
27 |   let rex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=\p{Unified_Ideograph}]*)/gu;
28 |   let matches = [...props.value.matchAll(rex)];
29 |   let last = 0;
30 |   if (matches.length) {
31 |     for (let match of matches) {
32 |       if (match.index!! > last) {
33 |         list.push({
34 |           type: 'text',
35 |           text: props.value.slice(last, match.index)
36 |         })
37 |       }
38 |       list.push({
39 |         type: 'link',
40 |         text: match[0]
41 |       })
42 |       last = match.index!! + match[0].length;
43 |     }
44 |     if (last < props.value.length) {
45 |       list.push({
46 |         type: 'text',
47 |         text: props.value.slice(last)
48 |       })
49 |     }
50 |   } else list.push({
51 |     type: 'text',
52 |     text: props.value
53 |   })
54 | })
55 | 
56 | </script>
57 | 
58 | <template>
59 |   <template v-for="i in list">
60 |     <template v-if="i.type == 'text'">
61 |       {{ i.text }}
62 |     </template>
63 |     <n-a v-if="i.type == 'link'" :href="i.text" :target="i.text.startsWith(origin)?'_self':'_blank'"
64 |       style="text-decoration:none;color:var(--n-text-color);overflow-wrap: anywhere;">
65 |       {{ i.text }}
66 |     </n-a>
67 |   </template>
68 | </template>


--------------------------------------------------------------------------------
/src/components/Subscription.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2025-03-19 01:10:21
 4 |  * @LastEditTime: 2025-03-19 02:20:32
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import http from '@/utils/request';
 9 | import { SubscriptionLevel } from '@/utils/types';
10 | import BookmarkFilled from '@vicons/material/BookmarkFilled';
11 | import BookmarkBorderFilled from '@vicons/material/BookmarkBorderFilled';
12 | import { computed, PropType, ref, watch } from 'vue';
13 | 
14 | 
15 | const props = defineProps({
16 |     obj: {
17 |         type: String,
18 |         required: true
19 |     },
20 |     level: {
21 |         type: Number,
22 |         required: true
23 |     }
24 | })
25 | 
26 | 
27 | const level = ref(props.level);
28 | watch(() => props.level, (v) => {
29 |     level.value = v;
30 | });
31 | const loading = ref(false);
32 | 
33 | const options = computed(() => [
34 |     {
35 |         key: SubscriptionLevel.None,
36 |         label: '取消订阅',
37 |         disabled: level.value == SubscriptionLevel.None
38 |     },
39 |     {
40 |         key: SubscriptionLevel.Silent,
41 |         label: '悄悄收藏',
42 |         disabled: level.value == SubscriptionLevel.Silent
43 |     },
44 |     {
45 |         key: SubscriptionLevel.Update,
46 |         label: '插个小眼',
47 |         disabled: level.value == SubscriptionLevel.Update
48 |     },
49 |     {
50 |         key: SubscriptionLevel.Comment,
51 |         label: '插个大眼',
52 |         disabled: level.value == SubscriptionLevel.Comment
53 |     }
54 | ]);
55 | 
56 | // 处理订阅切换
57 | const handleSubscription = (v: number) => {
58 |     loading.value = true;
59 |     http.post("/subscriptions", { obj: props.obj, level: v }).then(() => {
60 |         level.value = v;
61 |     }).finally(() => {
62 |         loading.value = false;
63 |     })
64 | };
65 | </script>
66 | 
67 | <template>
68 |     <n-dropdown trigger="hover" :options="options" @select="handleSubscription">
69 |         <n-button icon-placement="right" :ghost="!level" :loading="loading" :disabled="loading">
70 |             <template #icon>
71 |                 <n-icon>
72 |                     <BookmarkFilled v-if="level" color="#fb7299" />
73 |                     <BookmarkBorderFilled v-else />
74 |                 </n-icon>
75 |             </template>
76 |             插眼
77 |         </n-button>
78 |     </n-dropdown>
79 | </template>


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


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 00:01:07
 4 |  * @LastEditTime: 2024-12-15 14:45:43
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 |  */
 8 | import { createApp } from 'vue'
 9 | import App from './App.vue'
10 | import router from './router/index'
11 | 
12 | const app = createApp(App);
13 | app.use(router)
14 | app.mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-05-28 01:19:14
  4 |  * @LastEditTime: 2025-03-19 02:35:21
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 |  */
  8 | import { createRouter, createWebHistory } from 'vue-router'
  9 | import { setTitle } from '@/utils/tools'
 10 | 
 11 | const router = createRouter({
 12 |   history: createWebHistory(),
 13 |   routes: [
 14 |     {
 15 |       path: '/',
 16 |       name: 'intro',
 17 |       component: () => import('@/views/Intro.vue')
 18 |     },
 19 |     {
 20 |       path: '/home',
 21 |       name: 'home',
 22 |       component: () => import('@/views/Home.vue')
 23 |     },
 24 |     {
 25 |       path: '/login',
 26 |       name: 'login',
 27 |       component: () => import('@/views/Login.vue'),
 28 |       meta: { keepAlive: false }
 29 |     },
 30 |     {
 31 |       path: '/user/:id',
 32 |       name: 'user',
 33 |       component: () => import('@/views/User.vue'),
 34 |       meta: { login: true }
 35 |     },
 36 |     {
 37 |       path: '/score',
 38 |       name: 'score',
 39 |       component: () => import('@/views/Score.vue')
 40 |     },
 41 |     {
 42 |       path: '/paper',
 43 |       name: 'paper',
 44 |       component: () => import('@/views/Paper.vue')
 45 |     },
 46 |     {
 47 |       path: '/paper/edit/:id',
 48 |       name: 'paper_edit',
 49 |       component: () => import('@/views/PaperEdit.vue')
 50 |     },
 51 |     {
 52 |       path: '/paper/:id',
 53 |       name: 'paper_show',
 54 |       component: () => import('@/views/PaperShow.vue')
 55 |     },
 56 |     {
 57 |       path: '/course/:id',
 58 |       name: 'course_show',
 59 |       component: () => import('@/views/CourseShow.vue'),
 60 |       meta: { login: true }
 61 |     },
 62 |     {
 63 |       path: '/course',
 64 |       name: 'course',
 65 |       component: () => import('@/views/Course.vue'),
 66 |       meta: { login: true }
 67 |     },
 68 |     {
 69 |       path: '/course/upload/:id',
 70 |       name: 'course_upload',
 71 |       component: () => import('@/views/CourseUpload.vue'),
 72 |       meta: { keepAlive: false, login: true }
 73 |     },
 74 |     {
 75 |       path: '/about/',
 76 |       name: 'about',
 77 |       component: () => import('@/views/About.vue'),
 78 |       meta: { keepAlive: false }
 79 |     },
 80 |     {
 81 |       path: '/schedule/',
 82 |       name: 'schedule',
 83 |       component: () => import('@/views/Schedule.vue'),
 84 |       meta: { keepAlive: false }
 85 |     },
 86 |     {
 87 |       path: '/message/',
 88 |       name: 'message',
 89 |       component: () => import('@/views/Message.vue'),
 90 |       meta: { login: true }
 91 |     },
 92 |     {
 93 |       path: '/subscription/',
 94 |       name: 'subscription',
 95 |       component: () => import('@/views/Subscription.vue'),
 96 |       meta: { login: true }
 97 |     },
 98 |     {
 99 |       path: '/map/',
100 |       name: 'map',
101 |       component: () => import('@/views/Map.vue')
102 |     },
103 |     {
104 |       path: '/gallery/',
105 |       name: 'gallery',
106 |       component: () => import('@/views/Gallery.vue'),
107 |       meta: { login: true }
108 |     },
109 |     {
110 |       path: '/gallery/:id',
111 |       name: 'gallery_show',
112 |       component: () => import('@/views/GalleryShow.vue'),
113 |       meta: { login: true }
114 |     },
115 |     {
116 |       path: '/gallery/edit/:id',
117 |       name: 'gallery_edit',
118 |       component: () => import('@/views/GalleryEdit.vue'),
119 |       meta: { keepAlive: false, login: true }
120 |     },
121 |     {
122 |       path: '/report/:obj',
123 |       name: 'report',
124 |       component: () => import('@/views/Report.vue'),
125 |       meta: { login: true }
126 |     },
127 |     {
128 |       path: '/admin/carousel/',
129 |       name: 'admin_carousel',
130 |       component: () => import('@/views/admin/Carousel.vue')
131 |     },
132 |     {
133 |       path: '/admin/billboard/',
134 |       name: 'admin_billboard',
135 |       component: () => import('@/views/admin/Billboard.vue')
136 |     },
137 |     {
138 |       path: '/:pathMatch(.*)',
139 |       name: '404',
140 |       component: () => import('@/views/404.vue')
141 |     }
142 |   ],
143 |   // 保存滚动位置
144 |   scrollBehavior(to, from, savedPosition) {
145 |     if (savedPosition) return savedPosition
146 |     else return { top: 0 }
147 |   },
148 | });
149 | 
150 | router.beforeEach((to) => {
151 |   // 兼容旧hash模式的链接
152 |   // 例：/#/paper/show/15 👉 /paper/15
153 |   if (to.path === '/' && to.hash.startsWith('#/')) {
154 |     let path = to.hash.slice('#'.length)
155 |     path = path.replace(/^\/(paper|course)\/show\//, '/$1/')
156 |     return path
157 |   }
158 | 
159 | 
160 |   // 设置大类标题
161 |   // 此处只是尽快响应，之后各组件可以再覆盖。
162 | 
163 |   const titleMap: Record<string, string> = {
164 |     home: '主页',
165 |     login: '登录',
166 |     user: '我的',
167 |     paper: '文章',
168 |     course: '课程',
169 |     score: '成绩',
170 |     schedule: '课表',
171 |     about: '关于',
172 |     message: '消息',
173 |     map: '地图',
174 |     gallery: '话廊',
175 |     report: '举报',
176 |   }
177 |   const top = to.path.split('/').filter(piece => piece.length > 0)[0] ?? ''
178 |   const title = titleMap[top] ?? top
179 |   if (title) setTitle(title)
180 | })
181 | 
182 | export default router;
183 | 


--------------------------------------------------------------------------------
/src/sw.ts:
--------------------------------------------------------------------------------
 1 | declare let self: ServiceWorkerGlobalScope;
 2 | 
 3 | type PushMessage = {
 4 | 	data: string
 5 | 	badge: string
 6 | 	icon: string
 7 | 	timestamp: number
 8 | }
 9 | 
10 | type PushNotificationData = {
11 |   id: number
12 |   created_time: string
13 |   update_time: string
14 |   delete_time: string
15 |   uid: number
16 |   type: "comment" | "like" | "follow" | "system"
17 |   unread_num: number
18 |   last_time: string
19 |   content: string
20 | }
21 | 
22 | 
23 | 
24 | self.addEventListener('push', (event) => {
25 |   console.debug("[Service Worker] Push event received", event);
26 |   const data: PushMessage = event.data?.json();
27 |   console.debug("[Service Worker] Push event data", data);
28 | 
29 |   const msg : PushNotificationData = JSON.parse(atob(data.data));
30 | 
31 |   const title = "BIT101";
32 |   let body = "";
33 | 
34 |   if (msg.type === "comment") {
35 |     body = `你收到了 ${msg.unread_num} 条评论`;
36 |   } else if (msg.type === "like") {
37 |     body = `你收到了 ${msg.unread_num} 个赞`;
38 |   } else if (msg.type === "follow") {
39 |     body = `你有 ${msg.unread_num} 个新粉丝`;
40 |   } else if (msg.type === "system") {
41 |     body = `你有 ${msg.unread_num} 条系统消息`;
42 |   } else return ;
43 | 
44 |   event.waitUntil(
45 |     self.registration.showNotification(title, {
46 |       body: body,
47 |       badge: data.badge,
48 |       icon: data.icon,
49 |       // 好像是Workers Typing问题
50 |       //@ts-expect-error
51 |       timestamp: data.timestamp,
52 |       tag: msg.type,
53 |     })
54 |   );
55 | })
56 | 
57 | self.addEventListener('notificationclick', function (event) {
58 |   console.log('[Service Worker] Notification click Received.');
59 | 
60 |   let clients = new Clients();
61 | 
62 |   event.notification.close();
63 |   event.waitUntil(
64 |     clients
65 |       .matchAll({
66 |         type: "window",
67 |       })
68 |       .then((clientList) => {
69 |         for (const client of clientList) {
70 |           if (client.url === "/" && "focus" in client) return client.focus();
71 |         }
72 |         if (clients.openWindow) return clients.openWindow("/");
73 |       }),
74 |   );
75 | });
76 | 
77 | import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
78 | 
79 | cleanupOutdatedCaches();
80 | 
81 | precacheAndRoute(self.__WB_MANIFEST);
82 | 
83 | import { clientsClaim } from 'workbox-core';
84 | 
85 | self.skipWaiting();
86 | clientsClaim();


--------------------------------------------------------------------------------
/src/utils/EncryptPassword.ts:
--------------------------------------------------------------------------------
 1 | import CryptoJS from 'crypto-js';
 2 | 
 3 | export function encryptPassword(password: string, salt: string): string {
 4 |     const key = CryptoJS.enc.Base64.parse(salt);
 5 |     const encrypted = CryptoJS.AES.encrypt(password, key, {
 6 |         mode: CryptoJS.mode.ECB,
 7 |         padding: CryptoJS.pad.Pkcs7
 8 |     });
 9 |     return encrypted.toString();
10 | }


--------------------------------------------------------------------------------
/src/utils/naive-ui-dark-theme-overrides.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "common": {
 3 |     "primaryColor": "#FF9A57FF",
 4 |     "primaryColorHover": "#FFAB73FF",
 5 |     "primaryColorSuppl": "#FFAB73FF",
 6 |     "primaryColorPressed": "#EB8E50FF",
 7 |     "fontFamily": "Source Han Serif CN, Source Han Serif SC, Source Han Serif, Noto Serif CJK, Noto Serif SC, Noto Serif, serif",
 8 |     "fontWeight": "500",
 9 |     "fontWeightStrong": "700",
10 |     "borderRadius": "4px",
11 |     "infoColor": "#00ABD6FF",
12 |     "infoColorHover": "#00BCEBFF",
13 |     "infoColorSuppl": "#00BCEBFF",
14 |     "infoColorPressed": "#0087A8FF",
15 |     "warningColor": "#F0A020FF",
16 |     "textColor2": "#A3CCD6FF",
17 |     "textColor1": "#22B2D6FF",
18 |     "textColor3": "#809ba8FF",
19 |     "fontSize": "16px"
20 |   },
21 |   "Badge": {
22 |     "fontFamily": "Source Han Serif CN, Source Han Serif SC, Source Han Serif, Noto Serif CJK, Noto Serif SC, Noto Serif, serif"
23 |   },
24 |   "Divider": {
25 |     "textColor": "#809BA8FF"
26 |   }
27 | }


--------------------------------------------------------------------------------
/src/utils/naive-ui-light-theme-overrides.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "common": {
 3 |     "primaryColor": "#FF9A57FF",
 4 |     "primaryColorHover": "#FFAB73FF",
 5 |     "primaryColorSuppl": "#FFAB73FF",
 6 |     "primaryColorPressed": "#EB8E50FF",
 7 |     "fontFamily": "Source Han Serif CN, Source Han Serif SC, Source Han Serif, Noto Serif CJK, Noto Serif SC, Noto Serif, serif",
 8 |     "fontWeight": "500",
 9 |     "fontWeightStrong": "700",
10 |     "borderRadius": "4px",
11 |     "infoColor": "#00ABD6FF",
12 |     "infoColorHover": "#00BCEBFF",
13 |     "infoColorSuppl": "#00BCEBFF",
14 |     "infoColorPressed": "#0087A8FF",
15 |     "warningColor": "#F0A020FF",
16 |     "textColor2": "#245D6BFF",
17 |     "textColor1": "#027B99FF",
18 |     "textColor3": "#809ba8FF",
19 |     "fontSize": "16px"
20 |   },
21 |   "Badge": {
22 |     "fontFamily": "Source Han Serif CN, Source Han Serif SC, Source Han Serif, Noto Serif CJK, Noto Serif SC, Noto Serif, serif"
23 |   },
24 |   "Divider": {
25 |     "textColor": "#809BA8FF"
26 |   }
27 | }


--------------------------------------------------------------------------------
/src/utils/request.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 08:34:05
 4 |  * @LastEditTime: 2023-10-31 00:11:43
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 |  */
 8 | import axios from 'axios';
 9 | import store from './store';
10 | // import { useRouter, useRoute } from 'vue-router';
11 | import router from "../router/index";
12 | 
13 | const http = axios.create();
14 | 
15 | // 添加请求拦截器
16 | http.interceptors.request.use(
17 |   (config: any) => {
18 |     if (config.url[0] == '/') config.url = store.api_url + config.url;
19 |     config.headers['fake-cookie'] = store.fake_cookie;
20 |     return config;
21 |   },
22 |   (err) => {
23 |     return Promise.reject(err);
24 |   }
25 | );
26 | 
27 | // 添加响应拦截器
28 | http.interceptors.response.use(
29 |   (res) => {
30 |     if (res.data.msg) window.$message.success(res.data.msg);
31 |     return res;
32 |   },
33 |   (err) => {
34 |     if (err.request.status == 500) {
35 |       if (err.response.data.msg) window.$message.error(err.response.data.msg);
36 |       else window.$message.error('出错了Orz');
37 |     }
38 |     else if (err.request.status == 401) {
39 |       store.fake_cookie = "";
40 |       // 自动跳转
41 |       const route = router.currentRoute.value;
42 |       if (route.name != "login") {
43 |         window.$message.error(err.response.data.msg || '请先登录awa');
44 |       } else if (err.response.data.msg) {
45 |         window.$message.error(err.response.data.msg);
46 |       }
47 |       if (route.meta.login) {
48 |         router.push({ name: 'login', query: { redirect: encodeURIComponent(route.fullPath) } });
49 |       }
50 |     }
51 |     else if (err.request.status == 400) {
52 |       if (err.response.data.msg) window.$message.error(err.response.data.msg);
53 |       else window.$message.error('请检查请求参数awa');
54 |     }
55 |     return Promise.reject(err);
56 |   }
57 | );
58 | 
59 | export default http;


--------------------------------------------------------------------------------
/src/utils/store.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 09:18:09
 4 |  * @LastEditTime: 2025-06-04 02:14:51
 5 |  * @Description: 全局状态管理
 6 |  * _(:з」∠)_
 7 |  */
 8 | import { reactive, watch } from 'vue'
 9 | import package_json from '../../package.json'
10 | 
11 | let s = window.localStorage.getItem('store');
12 | let x: any = {};
13 | if (s) x = JSON.parse(s);
14 | else x = {};
15 | 
16 | const store = reactive({
17 |   version: package_json.version,
18 |   api_url: "https://bit101.flwfdd.xyz",
19 |   // api_url: "http://127.0.0.1:8080",
20 |   // api_url: "http://e5.flwfdd.xyz:8080",
21 |   // api_url:"http://127.0.0.1:4523/m1/2401657-0-default",
22 |   // api_url:"http://192.168.0.108:4523/m1/2401657-0-default",
23 |   fake_cookie: x.fake_cookie || "",
24 |   theme_mode: x.theme_mode || "auto", // auto dark light
25 |   grade_query: x.grade_query || {},
26 |   last_draft: x.last_draft ?? {},
27 |   hide_bot: x.hide_bot ?? false,
28 | })
29 | 
30 | watch(store, () => {
31 |   window.localStorage.setItem('store', JSON.stringify(store));
32 | })
33 | 
34 | // console.log(store);
35 | 
36 | export default store


--------------------------------------------------------------------------------
/src/utils/tools.ts:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-05-28 00:01:07
  4 |  * @LastEditTime: 2025-05-12 21:00:02
  5 |  * @Description: 一些全局使用的函数
  6 |  * _(:з」∠)_
  7 |  */
  8 | import { ref, reactive } from "vue";
  9 | import http from "@/utils/request";
 10 | import { encryptPassword } from "./EncryptPassword";
 11 | import useClipboard from "vue-clipboard3";
 12 | import router from "@/router";
 13 | 
 14 | //一言
 15 | const hitokoto = ref("");
 16 | function UpHitokoto() {
 17 |   http.get("https://international.v1.hitokoto.cn/").then((res) => {
 18 |     hitokoto.value = res.data.hitokoto + "  ——" + res.data.from;
 19 |   });
 20 | }
 21 | 
 22 | UpHitokoto();
 23 | setInterval(UpHitokoto, 10 * 1000);
 24 | 
 25 | //时间格式化
 26 | function FormatTime(t: number | Date | string) {
 27 |   if (!t) return "No Time";
 28 |   if (typeof t == "string") {
 29 |     //日期以GMT结尾时使用本地时区
 30 |     if (t.endsWith("GMT")) t = t.replace("GMT", "");
 31 |     t = new Date(t);
 32 |     t = t.getTime() / 1000;
 33 |   } else if (typeof t != "number") t = t.getTime() / 1000;
 34 |   let dt = new Date().getTime() / 1000 - t;
 35 |   if (dt < 60) return Math.round(dt) + "秒前";
 36 |   if (dt < 60 * 60) return Math.round(dt / 60) + "分钟前";
 37 |   if (dt < 12 * 60 * 60) return Math.round(dt / 60 / 60) + "小时前";
 38 | 
 39 |   let now = new Date(t * 1000);
 40 |   let year = now.getFullYear();
 41 |   let month = (now.getMonth() + 1).toString().padStart(2, "0");
 42 |   let date = now.getDate().toString().padStart(2, "0");
 43 |   let hour = now.getHours().toString().padStart(2, "0");
 44 |   let minute = now.getMinutes().toString().padStart(2, "0");
 45 |   let second = now.getSeconds().toString().padStart(2, "0");
 46 |   return (
 47 |     year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
 48 |   );
 49 | }
 50 | 
 51 | //Webvpn模块
 52 | const webvpn = reactive({
 53 |   model: false,
 54 |   loading: false,
 55 |   sid: "",
 56 |   password: "",
 57 |   verify_token: "", //用于注册
 58 |   verify_code: "", //用于注册
 59 |   cookie: "",
 60 |   data: {
 61 |     execution: "",
 62 |     cookie: "",
 63 |     salt: "",
 64 |     captcha: "",
 65 |     captcha_text: "",
 66 |     password: "",
 67 |   },
 68 | });
 69 | 
 70 | //webvpn验证初始化
 71 | function WebvpnVerify(sid: string, password: string) {
 72 |   webvpn.loading = true;
 73 |   webvpn.sid = sid;
 74 |   webvpn.password = password;
 75 |   http
 76 |     .post("/user/webvpn_verify_init", {
 77 |       sid: webvpn.sid,
 78 |     })
 79 |     .then((res) => {
 80 |       webvpn.data = res.data;
 81 |       webvpn.data.password = encryptPassword(webvpn.password, webvpn.data.salt);
 82 |       // TODO: real captcha
 83 |       // if (webvpn.data.captcha) {
 84 |       //   webvpn.data.captcha = webvpn.data.captcha;
 85 |       //   webvpn.data.captcha_text = "";
 86 |       //   webvpn.model = true;
 87 |       // } else WebvpnVerify2();
 88 |       webvpn.data.captcha_text = encryptPassword("{}", webvpn.data.salt);
 89 |       WebvpnVerify2();
 90 |     });
 91 | }
 92 | 
 93 | //webvpn验证后续步骤
 94 | function WebvpnVerify2() {
 95 |   webvpn.model = false;
 96 |   http
 97 |     .post("/user/webvpn_verify", {
 98 |       sid: webvpn.sid,
 99 |       salt: webvpn.data.salt,
100 |       password: webvpn.data.password,
101 |       execution: webvpn.data.execution,
102 |       cookie: webvpn.data.cookie,
103 |       captcha: webvpn.data.captcha_text,
104 |     })
105 |     .then((res) => {
106 |       webvpn.verify_code = res.data.code;
107 |       webvpn.verify_token = res.data.token;
108 |       webvpn.cookie = webvpn.data.cookie;
109 |       webvpn.loading = false;
110 |     })
111 |     .catch(() => {
112 |       webvpn.loading = false;
113 |     });
114 | }
115 | 
116 | //复制
117 | const { toClipboard } = useClipboard();
118 | async function Clip(s: string, msg = "已复制到剪贴板OvO") {
119 |   try {
120 |     await toClipboard(s);
121 |     window.$message.success(msg);
122 |   } catch (e) {
123 |     console.error(e);
124 |     window.$message.error("复制失败Orz");
125 |   }
126 | }
127 | 
128 | // 分享
129 | export function Share(title: string, text: string, url: string) {
130 |   if (navigator.share) {
131 |     navigator
132 |       .share({
133 |         title: title,
134 |         text: text,
135 |         url: url,
136 |       })
137 |       .then(() => {
138 |         window.$message.success("分享成功OvO");
139 |       })
140 |       .catch(() => {
141 |         window.$message.error("分享失败Orz");
142 |       });
143 |   } else {
144 |     Clip(url, "分享链接已复制OvO");
145 |   }
146 | }
147 | 
148 | // 打开链接
149 | export function OpenLink(url: string, blank = false) {
150 |   if (url) {
151 |     if (url.startsWith("/") && blank == false) router.push(url);
152 |     else
153 |       window.open(
154 |         url,
155 |         blank ? "_blank" : url.startsWith("/") ? "_self" : "_blank"
156 |       );
157 |   }
158 | }
159 | 
160 | // 监测网络情况
161 | const network = ref(true);
162 | export function WatchNetwork() {
163 |   window.addEventListener("offline", () => {
164 |     if (network.value == true) window.$message.error("网络已断开Orz");
165 |     network.value = false;
166 |   });
167 | 
168 |   window.addEventListener("online", () => {
169 |     if (network.value == false) window.$message.success("网络已连接OvO");
170 |     network.value = true;
171 |   });
172 | }
173 | 
174 | /** 设置页面标题 */
175 | export function setTitle(...titles: string[]): void {
176 |   if (titles.length === 0) {
177 |     document.title = "BIT101";
178 |     return;
179 |   }
180 |   document.title = `${titles.join(" - ")} | BIT101`;
181 | }
182 | 
183 | // 设置颜色透明度
184 | export function opacityColor(color: string, opacity: number): string {
185 |   if (color.startsWith("#")) {
186 |     let r = parseInt(color.slice(1, 2), 16);
187 |     r = r * 16 + r;
188 |     let g = parseInt(color.slice(2, 3), 16);
189 |     g = g * 16 + g;
190 |     let b = parseInt(color.slice(3, 4), 16);
191 |     b = b * 16 + b;
192 |     if (color.length > 5) {
193 |       r = parseInt(color.slice(1, 3), 16);
194 |       g = parseInt(color.slice(3, 5), 16);
195 |       b = parseInt(color.slice(5, 7), 16);
196 |     }
197 |     color = `rgba(${r}, ${g}, ${b}, ${opacity})`;
198 |   } else if (color.startsWith("rgb")) {
199 |     color = color.replace("rgb", "rgba").replace(")", `, ${opacity})`);
200 |   } else if (color.startsWith("rgba")) {
201 |     color = color.replace(/,\s*[\d.]+\)/, `, ${opacity})`);
202 |   }
203 |   return color;
204 | }
205 | 
206 | 
207 | function GetObjName(obj: string) {
208 |   if (obj.startsWith("like")) return "赞";
209 |   if (obj.startsWith("poster")) return "帖子";
210 |   if (obj.startsWith("comment")) return "评论";
211 |   if (obj.startsWith("course")) return "课程";
212 |   if (obj.startsWith("paper")) return "文章";
213 |   return "";
214 | }
215 | 
216 | function GetObjUrl(obj: string) {
217 |   if (obj.startsWith("paper")) return "/paper/" + obj.substring(5);
218 |   if (obj.startsWith("course")) return "/course/" + obj.substring(6);
219 |   if (obj.startsWith("poster")) return "/gallery/" + obj.substring(6);
220 |   return "";
221 | }
222 | 
223 | export { hitokoto, FormatTime, webvpn, WebvpnVerify, WebvpnVerify2, Clip, GetObjName, GetObjUrl };
224 | 


--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-17 13:28:48
 4 |  * @LastEditTime: 2025-03-19 01:21:23
 5 |  * @Description: _(:з」∠)_
 6 |  */
 7 | 
 8 | export enum SubscriptionLevel {
 9 |     None = 0,
10 |     Silent = 1,
11 |     Update = 2,
12 |     Comment = 3,
13 | }
14 | 
15 | 
16 | // 帖子
17 | export interface Poster {
18 |     anonymous: boolean; // 是否匿名
19 |     claim: {
20 |         id: number; // 声明id
21 |         text: string; // 声明内容
22 |     }
23 |     comment_num: number; // 评论数量
24 |     create_time: string; // 发布时间
25 |     edit_time: string; // 编辑时间
26 |     id: number;
27 |     images: Image[]; // 图片列表
28 |     like: boolean; // 是否赞过
29 |     like_num: number; // 点赞数量
30 |     own: boolean; // 是否可编辑
31 |     plugins: string; // 插件列表
32 |     public: boolean; // 是否公开
33 |     tags: string[]; // 标签列表
34 |     text: string; // 文本内容
35 |     title: string; // 标题
36 |     update_time: string; // 更新时间
37 |     user: User; // 发布用户
38 |     subscription: SubscriptionLevel; // 订阅状态
39 | }
40 | 
41 | // 声明
42 | export interface Claim {
43 |     id: number;
44 |     text: string;
45 | }
46 | 
47 | 
48 | // 用户
49 | export interface User {
50 |     avatar: Image; // 头像链接
51 |     create_time: string; // 注册时间
52 |     id: number;
53 |     level: number; // 等级
54 |     motto: string; // 格言 简介
55 |     nickname: string; // 昵称
56 |     identity: {
57 |         color: string; // 勾勾颜色
58 |         text: string; // 用户类型描述
59 |     }
60 | }
61 | 
62 | 
63 | // 图片
64 | export interface Image {
65 |     low_url: string; // 低分辨率图片链接
66 |     mid: string; // 图片唯一编码
67 |     url: string; // 原图链接
68 | }
69 | 
70 | // 评论
71 | export interface Comment {
72 |     id: number; // 评论id
73 |     obj: string; // 评论对象
74 |     text: string; // 评论内容
75 |     images: Image[]; // 图片列表
76 |     user: User; // 评论用户
77 |     anonymous: boolean; // 是否匿名
78 |     create_time: string; // 发布时间
79 |     update_time: string; // 更新时间
80 |     like: boolean; // 是否赞过
81 |     like_num: number; // 点赞数量
82 |     comment_num: number; // 评论数量
83 |     own: boolean; // 是否可删除
84 |     rate: number; // 评分
85 |     reply_user: User; // 回复用户
86 |     reply_obj: string; // 回复对象
87 |     sub: Comment[]; // 子评论
88 | }
89 | 
90 | export interface CommentList {
91 |     order: 'default' | 'old',
92 |     page: number,
93 |     end: boolean,
94 |     list: Comment[],
95 |     loading: boolean,
96 |     parent?: Comment,
97 |     modal?: boolean
98 | }


--------------------------------------------------------------------------------
/src/views/404.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-29 14:50:59
 4 |  * @LastEditTime: 2023-10-30 11:18:01
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import { OpenLink } from '@/utils/tools';
 9 | </script>
10 | 
11 | <template>
12 |   <n-result status="404" title="404 Not Found" description="当万木俱焚 别走近我" size="large" style="margin-top:11vh;">
13 |     <template #footer>
14 |       <n-button @click="OpenLink('/home')">溯洄</n-button>
15 |     </template>
16 |   </n-result>
17 | </template>


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-31 19:29:48
 4 |  * @LastEditTime: 2024-02-22 21:52:54
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | </script>
10 | 
11 | <style>
12 | li {
13 |   margin-bottom: 11px;
14 | }
15 | </style>
16 | 
17 | <template>
18 |   <div class="container">
19 |     <n-h2 style="text-align:center;">关于 | About</n-h2>
20 |     <ol style="padding-left: 24px;">
21 |       <li>如果有Bug、功能建议或任何问题可以通过issue、交流QQ群
22 |         <n-a href="https://jq.qq.com/?_wv=1027&k=OTttwrzb" target="_blank">726965926</n-a>
23 |         或邮件<n-a href="mailto:admin@bit101.cn">admin@bit101.cn</n-a>提出
24 |       </li>
25 |       <li>我们正在建立BIT101企划组，如果你感兴趣，欢迎<n-a href="https://bit101-project.feishu.cn/wiki/OY1Xw6y27iNZqgkSDCkc5Cfdnjc" target="_blank">加入我们</n-a></li>
26 |       <li>欢迎到<n-a href="https://github.com/BIT101-dev/BIT101" target="_blank">GitHub</n-a>来给上一颗可爱的Star⭐~</li>
27 |       <li>关于这个网站背后的故事可以康康<n-a href="/paper/1">这篇文章</n-a></li>
28 |       <li>希望你能喜欢这个网站</li>
29 |       <li>也请分享给更多人哦_(:з」∠)_</li>
30 |       <li>这个网站完完全全是用爱发电的</li>
31 |       <li>祝你天天开心万事如意！</li>
32 |       <li>Bang15便士</li>
33 |     </ol>
34 |   </div>
35 | </template>


--------------------------------------------------------------------------------
/src/views/Course.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-29 21:21:21
 4 |  * @LastEditTime: 2025-03-19 02:14:39
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import http from '@/utils/request';
10 | import { onMounted, reactive } from 'vue';
11 | import { useRoute } from 'vue-router';
12 | 
13 | const course = reactive({
14 |   search: "",
15 |   order: "new",
16 |   page: 0,
17 |   end: false,
18 |   loading: false,
19 |   list: [],
20 | })
21 | 
22 | function LoadCourses() {
23 |   course.loading = true;
24 |   http.get("/courses", {
25 |     params: {
26 |       search: course.search,
27 |       order: course.order,
28 |       page: course.page,
29 |     }
30 |   }).then(res => {
31 |     if (res.data.length == 0) course.end = true;
32 |     else {
33 |       course.list = course.list.concat(res.data);
34 |       course.page++;
35 |     }
36 |     course.loading = false;
37 |   }).catch(() => { course.loading = false; })
38 | }
39 | 
40 | const route = useRoute();
41 | course.search = route.query.search as string;
42 | onMounted(() => {
43 | 
44 |   LoadCourses();
45 | })
46 | 
47 | function Search() {
48 |   course.list = [];
49 |   course.page = 0;
50 |   course.end = false;
51 |   LoadCourses();
52 | }
53 | 
54 | </script>
55 | 
56 | <template>
57 |   <div class="container">
58 |     <n-card title="课程 | Course">
59 |       <n-collapse default-expanded-names="search">
60 |         <n-collapse-item title="课程检索" name="search">
61 |           <n-space vertical>
62 |             <div>搜索</div>
63 |             <n-input v-model:value="course.search" @keyup.enter="Search" placeholder="请输入关键词" maxlength="42"></n-input>
64 |             <div>排序方式</div>
65 |             <n-radio-group v-model:value="course.order" name="排序方式">
66 |               <n-space>
67 |                 <n-radio value="new">最新</n-radio>
68 |                 <n-radio value="rate">最高分</n-radio>
69 |                 <n-radio value="like">最多赞</n-radio>
70 |                 <n-radio value="comment">最多评</n-radio>
71 |               </n-space>
72 |             </n-radio-group>
73 |             <n-button @click="Search" ghost block>检索</n-button>
74 |             <div v-if="course.search && course.order != 'search'" style="font-size:14px;color:var(--text-color-3);">
75 |               结果不准确？试试相关搜索</div>
76 |           </n-space>
77 |         </n-collapse-item>
78 |       </n-collapse>
79 |     </n-card>
80 | 
81 |     <n-divider></n-divider>
82 | 
83 |     <router-link v-for="i in course.list" :to="'/course/' + i['id']" style="text-decoration: none;">
84 |       <n-card hoverable style="margin-bottom:11px;cursor:pointer;">
85 |         <h3 style="margin:0;color:var(--text-color-1);">{{ i['name'] }}</h3>
86 |         <n-rate :value="i['rate'] / 2" allow-half readonly />
87 |         <div>授课教师：{{ i['teachers_name'] }}</div>
88 |         <div style="color:var(--text-color-3);font-size:14px;">{{ i['like_num'] }}赞 | {{ i['comment_num'] }}评价 | {{
89 |           (i['rate'] /
90 |             2).toFixed(2)
91 |         }}分</div>
92 |       </n-card>
93 |     </router-link>
94 |     <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ course.list.length }}条</n-divider>
95 |     <n-button block @click="LoadCourses()" :disabled="course.end" :loading="course.loading">
96 |       {{ course.end ? '木有更多了' : '加载更多' }}</n-button>
97 |   </div>
98 | </template>


--------------------------------------------------------------------------------
/src/views/CourseShow.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import http from '@/utils/request';
  3 | import { OpenLink, Share, setTitle } from '@/utils/tools';
  4 | import { computed, onMounted, reactive } from 'vue';
  5 | import { useRoute } from 'vue-router';
  6 | import ThumbUpOutlined from '@vicons/material/ThumbUpOutlined'
  7 | import ThumbUpFilled from '@vicons/material/ThumbUpFilled'
  8 | import ShareOutlined from '@vicons/material/ShareOutlined'
  9 | import Comment from '@/components/Comment.vue';
 10 | import Subscription from '@/components/Subscription.vue';
 11 | import router from '@/router';
 12 | 
 13 | // 引入 ECharts
 14 | import VChart from 'vue-echarts';
 15 | import { use } from 'echarts/core'
 16 | import { LineChart } from 'echarts/charts'
 17 | import {
 18 |   TooltipComponent,
 19 |   DataZoomComponent,
 20 |   LegendComponent,
 21 |   GridComponent
 22 | } from 'echarts/components'
 23 | import { CanvasRenderer } from 'echarts/renderers'
 24 | import { SubscriptionLevel } from '@/utils/types';
 25 | 
 26 | use([
 27 |   TooltipComponent,
 28 |   DataZoomComponent,
 29 |   LegendComponent,
 30 |   GridComponent,
 31 |   LineChart,
 32 |   CanvasRenderer
 33 | ])
 34 | 
 35 | 
 36 | 
 37 | const course = reactive({
 38 |   id: "",
 39 |   comment_num: 0,
 40 |   like_num: 0,
 41 |   name: "",
 42 |   number: "",
 43 |   rate_sum: 0,
 44 |   rate: 0,
 45 |   teachers: [] as any[],
 46 |   like: false,
 47 |   like_loading: false,
 48 |   subscription: SubscriptionLevel.None,
 49 | })
 50 | 
 51 | // 课程历史
 52 | const history = reactive({
 53 |   show: false,
 54 |   loading: true,
 55 |   terms: [] as any[],
 56 |   avg_scores: [] as any[],
 57 |   max_scores: [] as any[],
 58 |   student_nums: [] as any[],
 59 | })
 60 | 
 61 | function GetCourseHistory() {
 62 |   history.loading = true;
 63 |   if (!course.number) return;
 64 |   history.show = true;
 65 |   http.get('/courses/histories/' + course.number)
 66 |     .then(res => {
 67 |       let data = res.data;
 68 |       // 根据学期排序
 69 |       data.sort((a: any, b: any) => a.term.localeCompare(b.term));
 70 |       // 填入数据
 71 |       history.terms = [];
 72 |       history.avg_scores = [];
 73 |       history.max_scores = [];
 74 |       history.student_nums = [];
 75 |       for (let i of data) {
 76 |         history.terms.push(i.term);
 77 |         history.avg_scores.push(i.avg_score);
 78 |         history.max_scores.push(i.max_score);
 79 |         history.student_nums.push(i.student_num);
 80 |       }
 81 |       if (!history.terms.length) {
 82 |         window.$message.error("没有历史数据Orz");
 83 |         history.show = false;
 84 |       } else {
 85 |         history.loading = false;
 86 |       }
 87 |     }).catch(() => {
 88 |       history.loading = false;
 89 |       history.show = false;
 90 |     })
 91 | }
 92 | 
 93 | const option = computed(() => {
 94 |   return {
 95 |     tooltip: {
 96 |       trigger: 'axis'
 97 |     },
 98 |     dataZoom: [
 99 |       {
100 |         type: 'inside',
101 |         start: 0,
102 |         end: 100
103 |       },
104 |       {
105 |         start: 0,
106 |         end: 100
107 |       }
108 |     ],
109 |     legend: {
110 |       data: ['平均分', '最高分', '学习人数']
111 |     },
112 |     xAxis: {
113 |       type: 'category',
114 |       boundaryGap: false,
115 |       data: history.terms
116 |     },
117 |     yAxis: [
118 |       {
119 |         name: '分数',
120 |         type: 'value'
121 |       },
122 |       {
123 |         name: '人数',
124 |         type: 'value'
125 |       }
126 |     ],
127 |     series: [
128 |       {
129 |         name: '平均分',
130 |         type: 'line',
131 |         yAxisIndex: 0,
132 |         data: history.avg_scores
133 |       },
134 |       {
135 |         name: '最高分',
136 |         type: 'line',
137 |         yAxisIndex: 0,
138 |         data: history.max_scores
139 |       },
140 |       {
141 |         name: '学习人数',
142 |         type: 'line',
143 |         yAxisIndex: 1,
144 |         data: history.student_nums
145 |       },
146 |     ]
147 |   }
148 | })
149 | 
150 | 
151 | function Like() {
152 |   course.like_loading = true;
153 |   http.post("/reaction/like", { 'obj': 'course' + course.id })
154 |     .then(res => {
155 |       course.like = res.data.like;
156 |       course.like_num = res.data.like_num;
157 |       course.like_loading = false;
158 |     }).catch(() => { course.like_loading = false; })
159 | }
160 | 
161 | function ShareCourse() {
162 |   let teachers_names = course.teachers.map(t => t.name);
163 |   let title = 'BIT101课程｜' + `${course.name}（${teachers_names.join(' ')}）`;
164 |   Share(title, title, window.location.href);
165 | }
166 | 
167 | function LoadCourse() {
168 |   return http.get('/courses/' + course.id).then(res => {
169 |     let data = res.data;
170 |     course.comment_num = data.comment_num;
171 |     course.like_num = data.like_num;
172 |     course.name = data.name;
173 |     course.number = data.number;
174 |     course.rate_sum = data.rate_sum;
175 |     course.rate = data.rate / 2;
176 |     course.like = data.like;
177 |     course.subscription = data.subscription;
178 |     let names = data.teachers_name.split(',');
179 |     let numbers = data.teachers_number.split(',');
180 |     for (let i in names) course.teachers.push({ 'name': names[i], 'number': numbers[i] })
181 |   })
182 | }
183 | 
184 | const route = useRoute();
185 | course.id = route.params.id as string;
186 | onMounted(async () => {
187 |   await LoadCourse()
188 |   const teachers_names = course.teachers.map(t => t.name)
189 |   setTitle(`${course.name}（${teachers_names.join('、')}）`, '课程')
190 | })
191 | 
192 | </script>
193 | 
194 | <template>
195 |   <div class="container">
196 |     <h1 style="color:var(--text-color-1);margin-bottom: 0px;">{{ course.name }}</h1>
197 | 
198 |     <span style="display:flex;">
199 |       <n-rate :value="course.rate" allow-half size="large" readonly />
200 |       <span style="margin-left:4px;color:var(--text-color-3);">{{ course.rate.toFixed(2) }}分（{{ course.comment_num
201 |         }}人评价）</span>
202 |     </span>
203 |     <div style="color:var(--text-color-3);font-size:12px;">课程编号：{{ course.number }}</div>
204 |     <br />
205 |     <n-space vertical>
206 | 
207 | 
208 |       <n-space>
209 |         授课教师：
210 |         <n-a :href="'/course/?search=' + i['number']" v-for="(i, ind) in course.teachers" style="text-decoration:none;">
211 |           {{ i['name'] }}</n-a>
212 |       </n-space>
213 |       <n-a :href="'/course/?search=' + course.number" style="text-decoration:none;">查找其他老师讲授的该课程
214 |       </n-a>
215 | 
216 |       <n-space style="margin-top:4px">
217 |         <n-button @click="Like" icon-placement="right" color="#fb7299" :ghost="!course.like"
218 |           :loading="course.like_loading" :disabled="course.like_loading">
219 |           <template #icon>
220 |             <n-icon>
221 |               <ThumbUpFilled v-if="course.like" />
222 |               <ThumbUpOutlined v-else />
223 |             </n-icon>
224 |           </template>
225 |           {{ course.like_num }}人点赞
226 |         </n-button>
227 |         <Subscription :obj="'course' + course.id" :level="course.subscription" />
228 |         <n-button @click="ShareCourse" icon-placement="right" ghost>
229 |           <template #icon>
230 |             <n-icon>
231 |               <ShareOutlined />
232 |             </n-icon>
233 |           </template>
234 |           分享
235 |         </n-button>
236 |         <n-button @click="OpenLink(`https://onedrive.bit101.cn/zh-CN/教学大纲/${course.name}-${course.number}/`)" ghost>
237 |           教学大纲
238 |         </n-button>
239 |         <n-button @click="OpenLink(`https://onedrive.bit101.cn/zh-CN/course/${course.name}-${course.number}`)" ghost>
240 |           共享资料
241 |         </n-button>
242 |         <n-button @click="router.push('/course/upload/' + course.id)" ghost>
243 |           上传资料
244 |         </n-button>
245 |         <n-button @click="GetCourseHistory" ghost>
246 |           历史记录
247 |         </n-button>
248 |       </n-space>
249 |     </n-space>
250 |     <n-divider style="color:var(--text-color-3);font-size:14px;">我的评价是</n-divider>
251 |     <n-alert closable :show-icon="false" style="margin-bottom:11px;">
252 |       <div style="font-size:14px;">评分请尽量客观，以授课质量为主要视角<br />可以谈谈上课风格、给分方式、作业情况、学习感想等</div>
253 |     </n-alert>
254 |     <Comment :obj='"course" + course.id' :rate="true"></Comment>
255 |     <br />
256 | 
257 |     <n-modal v-model:show="history.show" preset="card" style="width:624px" title="课程历史">
258 |       <n-spin v-if="history.loading" size="large" style="width:100%;text-align: center;" />
259 |       <div v-else>
260 |         <v-chart :option="option" style="height: 42vh;" autoresize />
261 |         <p style="font-size: small;">
262 |           注：数据仅供参考，不区分教学班。<br />
263 |           「如果一个人把政策评分作为自己的至高追求，那么他就是这个政策的牺牲品。」
264 |         <div style="text-align: right;">——《上海交通大学生存手册》</div>
265 |         </p>
266 |       </div>
267 |     </n-modal>
268 |   </div>
269 | </template>


--------------------------------------------------------------------------------
/src/views/CourseUpload.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-07-30 14:05:26
  4 |  * @LastEditTime: 2024-02-26 16:47:53
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import { reactive, onMounted, ref } from 'vue'
 10 | import { useRoute } from 'vue-router'
 11 | import { UploadCustomRequestOptions, UploadInst } from 'naive-ui'
 12 | import UploadRound from '@vicons/material/UploadRound'
 13 | import http from '@/utils/request'
 14 | import { OpenLink, setTitle } from '@/utils/tools'
 15 | import axios from 'axios'
 16 | 
 17 | const course = reactive({
 18 |   id: "",
 19 |   number: "",
 20 |   name: "",
 21 |   type: "other",
 22 |   msg: ""
 23 | })
 24 | 
 25 | const is_removed = {};
 26 | function customRequest({
 27 |   file,
 28 |   onFinish,
 29 |   onError,
 30 |   onProgress
 31 | }: UploadCustomRequestOptions) {
 32 |   http.get('/courses/upload/url', {
 33 |     params: {
 34 |       number: course.number,
 35 |       type: course.type,
 36 |       name: file.name
 37 |     }
 38 |   }).then(async res => {
 39 |     let url = res.data.url;
 40 |     let status = true;
 41 |     if (file.file) {
 42 |       let size = file.file.size;
 43 |       let chunk_size = 3276800;
 44 |       let uploaded_size = 0;
 45 |       let log_id = res.data.id;
 46 |       for (let i = 0; i < size; i += chunk_size) {
 47 |         if (is_removed[file.id]) {
 48 |           onError();
 49 |           status=false;
 50 |           break;
 51 |         }
 52 |         let chunk_data = file.file.slice(i, i + chunk_size);
 53 |         let head = {
 54 |           // 'Content-Length': chunk_data.size,
 55 |           'Content-Range': `bytes ${i}-${i + chunk_data.size - 1}/${size}`,
 56 |           'Content-Type': 'text/plain'
 57 |         }
 58 |         
 59 |         await axios.put(url, chunk_data, {
 60 |           headers: head,
 61 |           onUploadProgress: (progress) => {
 62 |             onProgress({ 'percent': (progress.loaded + uploaded_size) / size * 100 })
 63 |           }
 64 |         }).then(() => { uploaded_size += chunk_data.size })
 65 |           .catch(() => { status = false })
 66 |         if (!status) {
 67 |           onError();
 68 |           break;
 69 |         }
 70 |       }
 71 | 
 72 |       //上传记录
 73 |       if(status)http.post('/courses/upload/log', { 'id': log_id, 'msg': course.msg })
 74 |         .then(() => { onFinish() }).catch(() => { onError() })
 75 |     }
 76 |     else onError();
 77 |   }).catch(() => { onError() })
 78 | }
 79 | 
 80 | function removeHandler({
 81 |   file
 82 | }: UploadCustomRequestOptions) {
 83 |   is_removed[file.id] = true;
 84 | }
 85 | 
 86 | const uploadRef = ref<UploadInst | null>(null);
 87 | function Submit() {
 88 |   uploadRef.value?.submit()
 89 | }
 90 | 
 91 | function LoadCourse() {
 92 |   return http.get('/courses/' + course.id).then(res => {
 93 |     let data = res.data;
 94 |     course.name = data.name;
 95 |     course.number = data.number;
 96 |   })
 97 | }
 98 | 
 99 | const route = useRoute();
100 | course.id = route.params.id as string;
101 | onMounted(async () => {
102 |   await LoadCourse()
103 |   setTitle('上传资料', course.name, '课程')
104 | })
105 | </script>
106 | 
107 | <template>
108 |   <div class="container">
109 |     <h2 style="color:var(--text-color-1);">{{ course.name }} 共享资料上传</h2>
110 | 
111 |     <n-space vertical>
112 |       <n-alert type="info" title="Tips" closable>
113 |         上传前请先看看是否已经有相同资料了，有就不要重复上传啦QwQ<br />
114 |         非常感谢您的贡献_(:з」∠)_
115 |         <div style="font-size:14px;">
116 |           关于类别的说明：<br />
117 |           书籍：教科书、课程相关电子书等<br />
118 |           课件：PPT什么的<br />
119 |           考试：考试相关的往年题、复习资料等<br />
120 |           其他：兜底条款，比如作业资料....？<br />
121 |         </div>
122 |       </n-alert>
123 | 
124 |       <n-button @click="OpenLink(`https://onedrive.bit101.cn/zh-CN/course/${course.name}-${course.number}`)" block ghost>
125 |           查看课程资料
126 |         </n-button>
127 | 
128 |       <n-radio-group v-model:value="course.type">
129 |         <n-space>
130 |           类别：
131 |           <n-radio value="book">书籍</n-radio>
132 |           <n-radio value="ppt">课件</n-radio>
133 |           <n-radio value="exam">考试</n-radio>
134 |           <n-radio value="other">其他</n-radio>
135 |         </n-space>
136 |       </n-radio-group>
137 | 
138 |       <n-upload multiple :custom-request="customRequest" :on-remove="removeHandler" ref="uploadRef"
139 |         :default-upload="false">
140 |         <n-upload-dragger>
141 |           <div style="margin-bottom: 11px">
142 |             <n-icon size="48" :depth="3">
143 |               <UploadRound />
144 |             </n-icon>
145 |           </div>
146 |           <div>
147 |             点击或者拖动文件到该区域来选择文件
148 |           </div>
149 |         </n-upload-dragger>
150 |       </n-upload>
151 |       <n-input v-model:value="course.msg" type="textarea" maxlength="2244"
152 |         placeholder="你可以留下你的名字、关于资料的备注等，这段文字将会出现在共享资料网页中。"></n-input>
153 |       <n-button @click="Submit" block>上传</n-button>
154 |     </n-space>
155 |   </div>
156 | </template>


--------------------------------------------------------------------------------
/src/views/Gallery.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-10-17 08:17:11
  4 |  * @LastEditTime: 2025-06-04 01:51:53
  5 |  * @Description: _(:з」∠)_
  6 | -->
  7 | <script setup lang="ts">
  8 | import http from '@/utils/request';
  9 | import { onMounted, reactive, ref, watch } from 'vue';
 10 | import { OpenLink, opacityColor } from '@/utils/tools';
 11 | import RefreshRound from '@vicons/material/RefreshRound'
 12 | import AddRound from '@vicons/material/AddRound'
 13 | import Posters, { PostersStatus } from '@/components/Posters.vue';
 14 | import { useThemeVars } from 'naive-ui';
 15 | import store from '@/utils/store';
 16 | 
 17 | const themeVars = useThemeVars();
 18 | 
 19 | const posters = ref({
 20 |   mode: 'recommend',
 21 |   search: "",
 22 |   order: "new",
 23 |   uid: -1,
 24 |   hide_bot: store.hide_bot, // 是否隐藏机器人发布的内容
 25 | } as PostersStatus
 26 | );
 27 | 
 28 | const gallery = reactive({
 29 |   tab: "recommend",
 30 |   search: "",
 31 |   order: "new",
 32 | })
 33 | 
 34 | function Load(force = false) {
 35 |   if (gallery.tab == "follow") {
 36 |     posters.value.mode = "follow";
 37 |     posters.value.search = "";
 38 |     posters.value.order = "new";
 39 |   } else if (gallery.tab == "new") {
 40 |     posters.value.mode = "search";
 41 |     posters.value.search = "";
 42 |     posters.value.order = "new";
 43 |   } else if (gallery.tab == "recommend") {
 44 |     posters.value.mode = "recommend";
 45 |   } else if (gallery.tab == "hot") {
 46 |     posters.value.mode = "hot";
 47 |   } else if (gallery.tab == "search") {
 48 |     posters.value.mode = "search";
 49 |     posters.value.search = gallery.search;
 50 |     posters.value.order = gallery.order == "like" ? "like" : gallery.order == "comment" ? "comment" : "new";
 51 |   }
 52 |   if (force) posters.value = JSON.parse(JSON.stringify(posters.value));
 53 | }
 54 | 
 55 | // 隐藏机器人设置持久化
 56 | watch(() => posters.value.hide_bot, (val) => {
 57 |   store.hide_bot = val;
 58 | });
 59 | 
 60 | // 轮播图
 61 | const carousel_data = ref([])
 62 | function LoadCarousel() {
 63 |   http.get("/variables?obj=gallery_carousel").then((res) => {
 64 |     carousel_data.value = JSON.parse(res.data.data);
 65 |   })
 66 | }
 67 | 
 68 | function Refresh() {
 69 |   window.scrollTo(0, 0);
 70 |   Load(true);
 71 | }
 72 | 
 73 | watch(() => [gallery.tab, gallery.order], () => {
 74 |   Load();
 75 | })
 76 | 
 77 | onMounted(() => {
 78 |   LoadCarousel();
 79 | })
 80 | 
 81 | </script>
 82 | 
 83 | <template>
 84 |   <div class="container">
 85 |     <div style="text-align:center;">
 86 |       <n-h2 style="margin:4px;">话廊 | Gallery</n-h2>
 87 |       <n-carousel v-if="carousel_data.length" autoplay show-arrow style="border-radius:11px;margin-bottom:4px;">
 88 |         <img v-for="i in carousel_data" @click="OpenLink(i['url'])" :src="i['img']"
 89 |           style="width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;"
 90 |           :style="{ 'cursor': i['url'] ? 'pointer' : 'auto' }">
 91 |       </n-carousel>
 92 |     </div>
 93 | 
 94 |     <n-tabs type="segment" v-model:value="gallery.tab">
 95 |       <n-tab-pane name="follow" tab="关注">
 96 |       </n-tab-pane>
 97 | 
 98 |       <n-tab-pane name="new" tab="最新">
 99 |         <n-space style="margin-bottom: 11px;" justify="end">
100 |           <span style="font-size: 14px;">隐藏机器人</span>
101 |           <n-switch size="small" v-model:value="posters.hide_bot" />
102 |         </n-space>
103 |       </n-tab-pane>
104 | 
105 |       <n-tab-pane name="recommend" tab="推荐">
106 |       </n-tab-pane>
107 | 
108 |       <n-tab-pane name="hot" tab="热门">
109 |       </n-tab-pane>
110 | 
111 |       <n-tab-pane name="search" tab="搜索">
112 |         <n-space vertical style="margin-bottom: 11px;">
113 |           <n-input-group>
114 |             <n-input v-model:value="gallery.search" @keyup.enter="Refresh" placeholder="请输入关键词"
115 |               maxlength="42"></n-input>
116 |             <n-button type="default" @click="Refresh">搜索</n-button>
117 |           </n-input-group>
118 |           <n-radio-group v-model:value="gallery.order">
119 |             <n-space>
120 |               <n-radio value="new">最新</n-radio>
121 |               <n-radio value="like">最多赞</n-radio>
122 |               <n-radio value="comment">最多评</n-radio>
123 |             </n-space>
124 |           </n-radio-group>
125 |         </n-space>
126 |       </n-tab-pane>
127 |     </n-tabs>
128 | 
129 |     <Posters :value="posters" />
130 | 
131 |     <n-space vertical style="position:fixed;right:4.2vw;bottom:4.2vw;">
132 |       <n-button @click="Refresh()" circle :bordered="false"
133 |         :style="{ 'background-color': opacityColor(themeVars.baseColor, 0.84), 'width': '50px', 'height': '50px', 'box-shadow': '0 0 11px #CCCCCCCC' }">
134 |         <template #icon>
135 |           <n-icon :component="RefreshRound" size="24" />
136 |         </template>
137 |       </n-button>
138 |       <n-button @click="OpenLink('/gallery/edit/0')" circle :bordered="false"
139 |         :style="{ 'background-color': opacityColor(themeVars.baseColor, 0.84), 'width': '50px', 'height': '50px', 'box-shadow': '0 0 11px #CCCCCCCC' }">
140 |         <template #icon>
141 |           <n-icon :component="AddRound" size="24" />
142 |         </template>
143 |       </n-button>
144 |     </n-space>
145 | 
146 |   </div>
147 | </template>


--------------------------------------------------------------------------------
/src/views/GalleryEdit.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-10-20 21:27:17
  4 |  * @LastEditTime: 2024-02-26 16:36:33
  5 |  * @Description: _(:з」∠)_
  6 | -->
  7 | <script setup lang="ts">
  8 | import http from '@/utils/request';
  9 | import store from '@/utils/store';
 10 | import { onMounted, ref, watch, nextTick } from 'vue';
 11 | import { useRoute, useRouter } from 'vue-router';
 12 | import { FormatTime, setTitle } from '@/utils/tools';
 13 | import { Poster } from '@/utils/types';
 14 | import { UploadFileInfo, AutoCompleteInst, useMessage } from 'naive-ui';
 15 | 
 16 | const route = useRoute();
 17 | const router = useRouter();
 18 | 
 19 | // 初始化数据
 20 | const draftData = store.last_draft[router.currentRoute.value.fullPath]
 21 | console.debug(draftData)
 22 | const hasDraft = ref(!!draftData);
 23 | 
 24 | const BLANK_POSTER = JSON.stringify({
 25 |   id: 0,
 26 |   title: "",
 27 |   text: "",
 28 |   claim: {
 29 |     id: 0,
 30 |     text: "",
 31 |   },
 32 |   anonymous: false,
 33 |   public: true,
 34 |   plugins: "[]",
 35 |   tags: [] as string[],
 36 | } as Poster)
 37 | const poster = ref<Poster>(JSON.parse(BLANK_POSTER))
 38 | 
 39 | // 上传图片
 40 | const fileList = ref<UploadFileInfo[]>([])
 41 | const upload_url = store.api_url + "/upload/image";
 42 | const upload_head = {
 43 |   'fake-cookie': store.fake_cookie
 44 | }
 45 | 
 46 | function UploadHandler({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) {
 47 |   let res = (event.target as XMLHttpRequest);
 48 |   let data = JSON.parse(res.response);
 49 |   file.name = data.mid;
 50 |   window.$message.success("上传成功OvO");
 51 | }
 52 | 
 53 | function UploadErrorHandler({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) {
 54 |   let res = JSON.parse((event.target as XMLHttpRequest).response);
 55 |   if (res && res.msg) {
 56 |     window.$message.error(res.msg);
 57 |   }
 58 | }
 59 | 
 60 | const image_remove_modal = ref(false);
 61 | let ConfirmRemoveImage: (res: boolean) => void;
 62 | function OnImageRemove() {
 63 |   let promise = new Promise((resolve, reject) => {
 64 |     ConfirmRemoveImage = (res) => {
 65 |       if (res) resolve('');
 66 |       else reject();
 67 |       image_remove_modal.value = false
 68 |     }
 69 |   })
 70 |   image_remove_modal.value = true;
 71 |   return promise;
 72 | }
 73 | 
 74 | // 设置Tag
 75 | const autoCompleteInstRef = ref<AutoCompleteInst | null>(null)
 76 | watch(autoCompleteInstRef, (value) => {
 77 |   updateTag()
 78 |   if (value) nextTick(() => value.focus())
 79 | })
 80 | 
 81 | const rawTag = ref("")
 82 | const rawTagLengthLimit = ref("" as "error" | undefined)
 83 | const tags = ref([] as { label: string, value: string }[])
 84 | watch(rawTag, updateTag)
 85 | 
 86 | async function updateTag() {
 87 |   if (rawTag.value !== null && rawTag.value.length > 11) {
 88 |     rawTagLengthLimit.value = "error"
 89 |     return ;
 90 |   }
 91 |   rawTagLengthLimit.value = undefined
 92 |   
 93 |   if (rawTag.value === "" || rawTag.value === null) {
 94 |     // let { data } = await http.get<string[]>(**推荐tag api**)
 95 |     let data = ["水", "活动", "表白", "树洞", "求助", "聊天", "抽象"]
 96 |     tags.value = data.map((tag) => { return { label: tag, value: tag } })
 97 |     return ;
 98 |   }
 99 | 
100 |   let data = ["水", "活动", "表白", "树洞", "求助", "聊天", "抽象"]
101 |   // let { data } = await http.get<string[]>(**tag api**)
102 | 
103 |   let exactMatched = false
104 |   let matchedTags = data.map((tag) => {
105 |     if (tag === rawTag.value) exactMatched = true
106 |     if (tag.indexOf(rawTag.value) !== -1) return { label: tag, value: tag }
107 |   }).filter(item => item !== undefined) as { label: string, value: string }[]
108 | 
109 |   // 将用户输入项放在首位 方便直接选择
110 |   if (!exactMatched) matchedTags.unshift({ label: rawTag.value, value: rawTag.value })
111 |   tags.value = matchedTags
112 |   return
113 | }
114 | 
115 | // 声明
116 | const claims = ref([] as { label: number, value: string }[]);
117 | function LoadClaims() {
118 |   http.get("/posters/claims")
119 |     .then(res => {
120 |       claims.value = res.data.map((i: any) => { return { label: i.text, value: i.id } });
121 |     })
122 | }
123 | 
124 | //加载帖子
125 | function LoadPoster() {
126 |   return http.get("/posters/" + poster.value.id)
127 |     .then(res => {
128 |       poster.value = res.data;
129 |       fileList.value = poster.value.images.map(i => { return { id: i.mid, name: i.mid, status: 'finished', url: i.url } })
130 |     })
131 | }
132 | 
133 | 
134 | // 检查信息
135 | function Check() {
136 |   if (poster.value.title.length == 0) {
137 |     window.$message.error("标题不能为空Orz");
138 |     return false;
139 |   }
140 |   if (poster.value.text.length == 0) {
141 |     window.$message.error("内容不能为空Orz");
142 |     return false;
143 |   }
144 |   if (poster.value.tags.length < 2) {
145 |     window.$message.error("标签不能少于2个Orz");
146 |     return false;
147 |   }
148 |   let tags = new Set(poster.value.tags);
149 |   if (tags.size != poster.value.tags.length) {
150 |     window.$message.error("标签不能重复Orz");
151 |     return false;
152 |   }
153 |   return true;
154 | }
155 | 
156 | 
157 | // 发布帖子
158 | const posting = ref(false);
159 | function PostPoster() {
160 |   if (!Check()) return;
161 |   posting.value = true;
162 | 
163 |   let poster_data = {
164 |     title: poster.value.title,
165 |     text: poster.value.text,
166 |     image_mids: fileList.value.map(i => i.name),
167 |     plugins: poster.value.plugins,
168 |     anonymous: poster.value.anonymous,
169 |     tags: poster.value.tags,
170 |     claim_id: poster.value.claim.id,
171 |     public: poster.value.public,
172 |   }
173 | 
174 |   if (poster.value.id == 0) {
175 |     http.post("/posters", poster_data).then((res) => {
176 |       posting.value = false;
177 |       router.replace('/gallery/' + res.data.id);
178 |     }).catch(() => {
179 |       posting.value = false;
180 |     })
181 |   } else {
182 |     http.put("/posters/" + poster.value.id, poster_data).then(() => {
183 |       posting.value = false;
184 |       router.go(-1);
185 |     }).catch(() => {
186 |       posting.value = false;
187 |     })
188 |   }
189 | }
190 | 
191 | const draft_use_modal = ref(false);
192 | let ConfirmUseDraft: (res: boolean) => void;
193 | const OnUseDraft = () => {
194 |   draft_use_modal.value = true;
195 |   return new Promise<null>((resolve, reject) => {
196 |     ConfirmUseDraft = (res) => {
197 |       draft_use_modal.value = false;
198 |       if (res) resolve(null)
199 |       else reject()
200 |     }
201 |   })
202 | }
203 | 
204 | const original = ref<Poster>();
205 | const DiscardDraft = () => {
206 |   delete store.last_draft[router.currentRoute.value.fullPath];
207 |   if (original.value) {
208 |     poster.value = original.value;
209 |   }
210 |   else {
211 |     poster.value = JSON.parse(BLANK_POSTER);
212 |   }
213 |   hasDraft.value = false;
214 | }
215 | 
216 | watch(() => poster.value, () => {
217 |   if (JSON.stringify(poster.value) === BLANK_POSTER) return;
218 |   store.last_draft[router.currentRoute.value.fullPath] = {
219 |     poster: JSON.stringify(poster.value),
220 |     timestamp: Date.now()
221 |   };
222 | }, { deep: true })
223 | 
224 | onMounted(async () => {
225 |   LoadClaims();
226 |   poster.value.id = Number(route.params.id);
227 |   const isCreate = poster.value.id == 0;
228 |   if (isCreate) {
229 |     setTitle('发布', '话廊');
230 |     if (hasDraft.value) {
231 |       poster.value = JSON.parse(draftData.poster);
232 |       window.$message.success(`已恢复 ${FormatTime(draftData.timestamp / 1000)} 的草稿 OvO`);
233 |     }
234 |   }
235 |   else {
236 |     await LoadPoster()
237 |     if (hasDraft.value) {
238 |       original.value = poster.value;
239 |       OnUseDraft().then(() => {
240 |         poster.value = JSON.parse(draftData.poster);
241 |         window.$message.success(`已恢复 ${FormatTime(draftData.timestamp / 1000)} 的草稿 OvO`);
242 |       }).catch(() => {
243 |         DiscardDraft()
244 |       })
245 |     }
246 |     setTitle('编辑', '话廊');
247 |   }
248 | })
249 | 
250 | </script>
251 | 
252 | <template>
253 |   <div class="container">
254 |     <n-space vertical size="large">
255 |       <n-h2 style="margin-top:0px;margin-bottom:-6px;">🌟 {{ poster.id == 0 ? '发布 Poster' : '编辑 Poster ' }}</n-h2>
256 | 
257 |       <n-space vertical size="small">
258 |         <div>标题</div>
259 |         <n-input v-model:value="poster.title" placeholder="请输入标题" maxlength="42" show-count></n-input>
260 |       </n-space>
261 | 
262 |       <n-space vertical size="small">
263 |         <div>内容</div>
264 |         <n-input v-model:value="poster.text" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 6 }"
265 |           maxlength="23333" show-count />
266 |       </n-space>
267 | 
268 |       <n-space vertical size="small">
269 |         <div>图片</div>
270 |         <n-upload list-type="image-card" :action="upload_url" :headers="upload_head" @finish="UploadHandler"
271 |           @error="UploadErrorHandler" :max="9" v-model:file-list="fileList" :on-remove="OnImageRemove" />
272 |       </n-space>
273 | 
274 |       <n-space vertical size="small">
275 |         <div>标签</div>
276 |         <div style="color:var(--text-color-3);font-size:14px;margin-top:-6px;">请至少添加2个标签，合适的标签将有助于内容推荐。</div>
277 |         <n-dynamic-tags v-model:value="poster.tags">
278 |           <template #input="{ submit, deactivate }">
279 |             <n-auto-complete ref="autoCompleteInstRef" v-model:value="rawTag" size="small" :clear-after-select="true"
280 |               :options="tags" @select="($event: any) => { submit($event); deactivate() }"
281 |               @blur="() => { deactivate(); rawTag = ''; }" placeholder="选一个吧，或者输入你想要的" :get-show="() => true"
282 |               :status="rawTagLengthLimit" />
283 |           </template>
284 |         </n-dynamic-tags>
285 |       </n-space>
286 | 
287 |       <n-space vertical size="small">
288 |         <div>声明</div>
289 |         <div style="color:var(--text-color-3);font-size:14px;margin-top:-6px;">请根据社区公约选择合适的声明，否则可能会被制裁。</div>
290 |         <n-select v-model:value="poster.claim.id" :options="claims" />
291 |       </n-space>
292 | 
293 |       <n-space>
294 |         <n-button @click="poster.anonymous = !poster.anonymous" ghost>匿名:{{ poster.anonymous ? '是' : '否' }}</n-button>
295 |         <n-button @click="poster.public = !poster.public" ghost>公开:{{ poster.public ? '是' : '否' }}</n-button>
296 |       </n-space>
297 | 
298 |       <n-space justify="end">
299 |         <n-popconfirm v-if="hasDraft" @positive-click="DiscardDraft" positive-text="确定" negative-text="取消">
300 |           <template #trigger>
301 |             <n-button type="error" ghost>放弃草稿</n-button>
302 |           </template>
303 |           汝真放弃耶？放弃的草稿无法恢复。
304 |         </n-popconfirm>
305 |         <n-popconfirm @positive-click="PostPoster" :show-icon="false" positive-text="确定" negative-text="取消">
306 |           <template #trigger>
307 |             <n-button :disabled="posting" type="success" ghost>张贴Poster</n-button>
308 |           </template>
309 |           汝真发布耶？
310 |         </n-popconfirm>
311 |       </n-space>
312 | 
313 |     </n-space>
314 | 
315 |     <n-modal v-model:show="image_remove_modal" preset="dialog" title="汝真断舍离耶？" positive-text="确认" negative-text="取消"
316 |       @positive-click="ConfirmRemoveImage(true)" @negative-click="ConfirmRemoveImage(false)" />
317 | 
318 |     <n-modal v-if="hasDraft" v-model:show="draft_use_modal" preset="dialog" title="要对 话廊 使用 草稿 吗？"
319 |       :content="`现有一个 ${FormatTime(draftData.timestamp / 1000)} 的草稿, 放弃后无法恢复`"
320 |       positive-text="使用" negative-text="放弃" :closable="false" :closeOnEsc="false" :maskClosable="false"
321 |       @positive-click="ConfirmUseDraft(true)" @negative-click="ConfirmUseDraft(false)" />
322 |   </div>
323 | </template>


--------------------------------------------------------------------------------
/src/views/GalleryShow.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-10-20 17:39:36
  4 |  * @LastEditTime: 2025-03-19 02:24:29
  5 |  * @Description: _(:з」∠)_
  6 | -->
  7 | <script setup lang="ts">
  8 | import http from '@/utils/request';
  9 | import { onActivated, onDeactivated, onMounted, ref } from 'vue';
 10 | import { useRoute, useRouter } from 'vue-router';
 11 | import { FormatTime, setTitle, OpenLink, Share, opacityColor } from '@/utils/tools';
 12 | import MessageOutlined from '@vicons/material/MessageOutlined'
 13 | import EditOutlined from '@vicons/material/EditOutlined'
 14 | import ThumbUpOutlined from '@vicons/material/ThumbUpOutlined'
 15 | import ThumbUpFilled from '@vicons/material/ThumbUpFilled'
 16 | import ShareOutlined from '@vicons/material/ShareOutlined'
 17 | import ErrorOutlined from '@vicons/material/ErrorOutlined'
 18 | import DeleteOutlined from '@vicons/material/DeleteOutlined'
 19 | import FeedbackOutlined from '@vicons/material/FeedbackOutlined'
 20 | import Comment from '@/components/Comment.vue';
 21 | import { Poster } from '@/utils/types';
 22 | import Avatar from '@/components/Avatar.vue';
 23 | import RenderLink from '@/components/RenderLink.vue';
 24 | import { Md5 } from 'ts-md5';
 25 | import ImageViewer from '@/components/ImageViewer/ImageViewer.vue';
 26 | import Subscription from '@/components/Subscription.vue';
 27 | import { useThemeVars } from 'naive-ui';
 28 | 
 29 | const themeVars = useThemeVars();
 30 | 
 31 | //Poster数据
 32 | const poster = ref({} as Poster)
 33 | const actions = ref<HTMLDivElement>()
 34 | 
 35 | //加载Poster
 36 | function LoadPoster() {
 37 |   return http.get("/posters/" + poster.value.id)
 38 |     .then(res => {
 39 |       poster.value = res.data;
 40 |       // 设置页面标题
 41 |       setTitle(poster.value.title, '话廊')
 42 |     })
 43 | }
 44 | 
 45 | // 解析文字
 46 | function ParseText(text: string) {
 47 |   let l = [];
 48 |   let s = "";
 49 |   for (let i = 0; i < text.length; i++) {
 50 |     if (text[i] == '\n') {
 51 |       l.push(s);
 52 |       s = "";
 53 |     } else {
 54 |       s += text[i];
 55 |     }
 56 |   }
 57 |   if (s.length) l.push(s);
 58 |   return l;
 59 | }
 60 | 
 61 | // 点赞
 62 | const like_loading = ref(false);
 63 | function Like() {
 64 |   like_loading.value = true;
 65 |   http.post("/reaction/like", { 'obj': 'poster' + poster.value.id })
 66 |     .then(res => {
 67 |       poster.value.like = res.data.like;
 68 |       poster.value.like_num = res.data.like_num;
 69 |       like_loading.value = false;
 70 |     }).catch(() => { like_loading.value = false; })
 71 | }
 72 | 
 73 | // 上报
 74 | function Stay() {
 75 |   http.post("/reaction/stay", { obj: 'poster' + poster.value.id, time: 5 })
 76 | }
 77 | 
 78 | // 分享
 79 | function SharePoster() {
 80 |   let title = 'BIT101话廊｜' + poster.value.title;
 81 |   Share(title, title, window.location.href)
 82 | }
 83 | 
 84 | // 删除
 85 | function DeletePoster() {
 86 |   http.delete("/posters/" + poster.value.id).then(() => {
 87 |     router.go(-1);
 88 |   })
 89 | }
 90 | 
 91 | // 滚动到actions
 92 | function ScrollToActions() {
 93 |   actions.value!.scrollIntoView({
 94 |     behavior: "smooth",
 95 |     block: "center"
 96 |   })
 97 | }
 98 | 
 99 | const router = useRouter();
100 | const route = useRoute();
101 | let timer = null as any;
102 | onMounted(() => {
103 |   poster.value.id = Number(route.params.id);
104 |   LoadPoster();
105 | })
106 | 
107 | onActivated(() => {
108 |   // 设置页面标题
109 |   if (poster.value.title) setTitle(poster.value.title, '话廊');
110 | 
111 |   // 反馈停留
112 |   if (!timer) timer = setTimeout(() => {
113 |     Stay();
114 |   }, 5000);
115 | })
116 | 
117 | // 离开页面时清除反馈定时器
118 | onDeactivated(() => {
119 |   if (timer) {
120 |     clearTimeout(timer);
121 |     timer = null;
122 |   }
123 | })
124 | 
125 | // 编辑后刷新
126 | const path = ref(route.path);
127 | router.afterEach(async (to, from) => {
128 |   if (to.path != path.value) return;
129 |   if (from.name == "gallery_edit" && Number(from.params.id) == poster.value.id) {
130 |     LoadPoster();
131 |   }
132 | })
133 | 
134 | </script>
135 | 
136 | <template>
137 |   <div class="container" v-if="poster.user">
138 |     <n-h2 style="margin-top:0px;margin-bottom:11px;word-wrap:break-word;">{{ poster.title }}</n-h2>
139 | 
140 |     <div style="display:flex;align-items:center;margin-bottom:11px;">
141 |       <div @click="OpenLink('/user/' + poster.user.id)" @click.stop="" style="cursor:pointer;">
142 |         <Avatar :user="poster.user" :size="36" round />
143 |       </div>
144 |       <span style="margin-left:4px;">
145 |         <div style="font-size: 16px;">{{ poster.user.nickname }}</div>
146 |         <div style="margin-top: -4px;font-size:14px;">{{ poster.user.identity.text }}</div>
147 |       </span>
148 |     </div>
149 | 
150 |     <n-space v-if="poster.claim.id != 0 || poster.public == false" style="margin-bottom:11px;">
151 |       <n-tag v-if="poster.public == false" round :bordered="false" type="warning" size="small">
152 |         仅自己可见
153 |         <template #icon>
154 |           <n-icon :component="ErrorOutlined" />
155 |         </template>
156 |       </n-tag>
157 |       <n-tag v-if="poster.claim.id != 0" round :bordered="false" type="error" size="small">
158 |         {{ poster.claim.text }}
159 |         <template #icon>
160 |           <n-icon :component="ErrorOutlined" />
161 |         </template>
162 |       </n-tag>
163 |     </n-space>
164 | 
165 |     <ImageViewer v-if="poster.images.length" :images="poster.images" :shrink="false" />
166 | 
167 |     <div v-for="i in ParseText(poster.text)" :key="Md5.hashStr(i)" style="margin-bottom:4px;">
168 |       <br v-if="i == ''" />
169 |       <div v-else style="margin-top:0;word-wrap:break-word;white-space:pre-wrap;">
170 |         <RenderLink :value="i" />
171 |       </div>
172 |     </div>
173 |     <div style="height:11px;"></div>
174 | 
175 |     <n-space>
176 |       <n-tag v-for="i in poster.tags" :bordered="false" round
177 |         :color="{ color: opacityColor(themeVars.infoColor, 0.11), textColor: themeVars.primaryColor }">{{ i
178 |         }}</n-tag>
179 |     </n-space>
180 | 
181 |     <p style="font-size:14px;opacity: 0.66;">
182 |       首次发布于 {{ FormatTime(poster.create_time) }}
183 |       <br />
184 |       最后编辑于 {{ FormatTime(poster.edit_time) }}
185 |     </p>
186 | 
187 |     <!-- 套一个div 让ref类型是HTMLDivElement 方便用ScrollIntoView() -->
188 |     <div ref="actions">
189 |       <n-space style="margin-top:4px" justify="end">
190 |         <n-button v-if="poster.own" @click="OpenLink('/gallery/edit/' + poster.id)" icon-placement="right" ghost>
191 |           <template #icon>
192 |             <n-icon :component="EditOutlined" />
193 |           </template>
194 |           编辑
195 |         </n-button>
196 | 
197 |         <n-popconfirm v-if="poster.own" @positive-click="DeletePoster" :show-icon="false" positive-text="确定"
198 |           negative-text="取消">
199 |           <template #trigger>
200 |             <n-button icon-placement="right" ghost>
201 |               <template #icon>
202 |                 <n-icon :component="DeleteOutlined" />
203 |               </template>
204 |               删除
205 |             </n-button>
206 |           </template>
207 |           汝真断舍离耶？
208 |         </n-popconfirm>
209 | 
210 |         <n-button @click="router.push('/report/poster' + poster.id)" icon-placement="right" ghost>
211 |           <template #icon>
212 |             <n-icon :component="FeedbackOutlined" />
213 |           </template>
214 |           举报
215 |         </n-button>
216 | 
217 |         <n-button @click="SharePoster" icon-placement="right" ghost>
218 |           <template #icon>
219 |             <n-icon :component="ShareOutlined" />
220 |           </template>
221 |           分享
222 |         </n-button>
223 | 
224 |         <Subscription :obj="'poster' + poster.id" :level="poster.subscription" />
225 | 
226 |         <n-button @click="Like" icon-placement="right" color="#fb7299" :ghost="!poster.like" :loading="like_loading"
227 |           :disabled="like_loading">
228 |           <template #icon>
229 |             <n-icon :component="poster.like ? ThumbUpFilled : ThumbUpOutlined" />
230 |           </template>
231 |           {{ poster.like_num }}赞同
232 |         </n-button>
233 | 
234 |       </n-space>
235 |     </div>
236 |     <n-divider style="font-size:14px;">现有{{ poster.comment_num }}条评论</n-divider>
237 |     <Comment :obj='"poster" + poster.id'></Comment>
238 | 
239 |     <n-space vertical style="position:fixed;right:4.2vw;bottom:4.2vw;">
240 |       <n-button @click="ScrollToActions()" circle :bordered="false"
241 |         :style="{ 'background-color': opacityColor(themeVars.baseColor, 0.84), 'width': '50px', 'height': '50px', 'box-shadow': '0 0 11px #CCCCCCCC' }">
242 |         <template #icon>
243 |           <n-icon :component="MessageOutlined" size="24" />
244 |         </template>
245 |       </n-button>
246 |     </n-space>
247 | 
248 |   </div>
249 | </template>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 01:26:29
 4 |  * @LastEditTime: 2024-02-26 17:11:18
 5 |  * @Description: 主页
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import http from '@/utils/request';
10 | import { onMounted, ref } from 'vue';
11 | import Billboard from '@/components/Billboard.vue';
12 | import { OpenLink } from '@/utils/tools';
13 | 
14 | const carousel_data = ref([])
15 | function LoadCarousel() {
16 |   http.get("/variables?obj=carousel").then((res) => {
17 |     carousel_data.value = JSON.parse(res.data.data);
18 |   })
19 | }
20 | 
21 | const billboard_data = ref([])
22 | function LoadBillboard() {
23 |   http.get("/variables?obj=billboard").then((res) => {
24 |     billboard_data.value = JSON.parse(res.data.data);
25 |   })
26 | }
27 | 
28 | onMounted(() => {
29 |   LoadCarousel();
30 |   LoadBillboard();
31 | })
32 | </script>
33 | 
34 | <style scoped>
35 | a {
36 |   text-decoration: none;
37 | }
38 | 
39 | h2 {
40 |   margin: 4px 0 4px 0;
41 |   text-decoration: underline #FF8533;
42 | }
43 | </style>
44 | 
45 | <template>
46 |   <div class="container">
47 |     <n-space vertical>
48 |       <n-carousel autoplay show-arrow style="border-radius:11px;">
49 |         <img v-for="i in carousel_data" @click="OpenLink(i['url'])" :src="i['img']"
50 |           style="width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;"
51 |           :style="{ 'cursor': i['url'] ? 'pointer' : 'auto' }">
52 |       </n-carousel>
53 | 
54 |       <n-alert closable :show-icon="false">
55 |         <div style="font-size:14px;">Tips:点击左上角的≡可以打开菜单哟！</div>
56 |       </n-alert>
57 | 
58 |       <Billboard :data="billboard_data"></Billboard>
59 |     </n-space>
60 |     <br/>
61 |   </div>
62 | 
63 | </template>
64 | 
65 | 
66 | 


--------------------------------------------------------------------------------
/src/views/Intro.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-30 11:12:16
 4 |  * @LastEditTime: 2024-02-26 17:09:00
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import store from '@/utils/store';
 9 | import { useRouter } from 'vue-router';
10 | 
11 | const router=useRouter();
12 | 
13 | if (store.fake_cookie) {
14 |   router.replace('/gallery');
15 | } else {
16 |   router.replace('/home');
17 | }
18 | 
19 | </script>
20 | 
21 | <template>
22 | </template>


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-05-28 01:26:29
  4 |  * @LastEditTime: 2024-02-26 16:28:18
  5 |  * @Description: 用户登陆注册页面
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import { onMounted, reactive, ref, watch } from 'vue';
 10 | import { FormRules, FormItemRule, FormInst } from 'naive-ui';
 11 | import http from '@/utils/request';
 12 | import { Md5 } from "ts-md5"
 13 | import store from '@/utils/store';
 14 | import { webvpn, WebvpnVerify } from '@/utils/tools'
 15 | import { useRoute, useRouter } from 'vue-router';
 16 | 
 17 | const route = useRoute();
 18 | const router = useRouter();
 19 | 
 20 | const user = reactive({
 21 |   sid: "",
 22 |   password: "",
 23 |   repassword: "",
 24 |   verify_type: "webvpn",
 25 |   verify_code: "",
 26 |   verify_token: "",
 27 |   webvpn_password: "",
 28 | })
 29 | 
 30 | const form_ref = ref<FormInst | null>(null);
 31 | const rules: FormRules = {
 32 |   sid: [
 33 |     {
 34 |       required: true,
 35 |       validator(rule: FormItemRule, value: string) {
 36 |         if (!value) {
 37 |           return new Error('空空如也呢')
 38 |         }
 39 |         return true
 40 |       },
 41 |       trigger: ['input', 'blur']
 42 |     }
 43 |   ],
 44 |   password: [
 45 |     {
 46 |       required: true,
 47 |       validator(rule: FormItemRule, value: string) {
 48 |         if (value.length < 8) {
 49 |           return new Error('别那么小气嘛')
 50 |         }
 51 |         return true
 52 |       },
 53 |       trigger: ['input', 'blur']
 54 |     }
 55 |   ],
 56 |   repassword: [
 57 |     {
 58 |       required: true,
 59 |       validator(rule: FormItemRule, value: string) {
 60 |         if (value != user.password) {
 61 |           return new Error('出尔反尔可不好')
 62 |         }
 63 |         return true
 64 |       },
 65 |       trigger: ['input', 'blur']
 66 |     }
 67 |   ],
 68 |   verify_code: [
 69 |     {
 70 |       required: true,
 71 |       validator(rule: FormItemRule, value: string) {
 72 |         if ((!/^\d*$/.test(value)) || value.length != 6) {
 73 |           return new Error('我想应该是6位的')
 74 |         }
 75 |         return true
 76 |       },
 77 |       trigger: ['input', 'blur']
 78 |     }
 79 |   ],
 80 | }
 81 | 
 82 | // 登陆状态
 83 | const status = ref(false);
 84 | function CheckStatus() {
 85 |   http.get('/user/check')
 86 |     .then(() => {
 87 |       status.value = true;
 88 |       if (route.query.redirect) router.push(decodeURIComponent(route.query.redirect as string));
 89 |     })
 90 |     .catch(() => {
 91 |       status.value = false;
 92 |     })
 93 | }
 94 | 
 95 | const count_down = ref(0); //倒计时
 96 | function MailVerify() {
 97 |   http.post('/user/mail_verify', {
 98 |     sid: user.sid
 99 |   })
100 |     .then(res => {
101 |       user.verify_token = res.data.token;
102 |       count_down.value = 60;
103 |       let itv = setInterval(() => {
104 |         count_down.value--;
105 |         if (!count_down.value) clearInterval(itv);
106 |       }, 1000);
107 |     })
108 | }
109 | 
110 | watch(() => webvpn.verify_code, () => {
111 |   user.verify_code = webvpn.verify_code;
112 |   user.verify_token = webvpn.verify_token;
113 |   window.$message.info("验证成功后请点击「注册」");
114 | })
115 | 
116 | function Login() {
117 |   form_ref.value?.validate((err) => {
118 |     if (!err) {
119 |       http.post('/user/login', {
120 |         sid: user.sid,
121 |         password: Md5.hashStr(user.password)
122 |       }).then(res => {
123 |         store.fake_cookie = res.data.fake_cookie;
124 |         CheckStatus();
125 |       })
126 |     } else {
127 |       window.$message.error('请检查输入qwq')
128 |     }
129 |   })
130 | }
131 | 
132 | function Register() {
133 |   form_ref.value?.validate((err) => {
134 |     if (!err) {
135 |       http.post('/user/register', {
136 |         password: Md5.hashStr(user.password),
137 |         token: user.verify_token,
138 |         code: user.verify_code
139 |       }).then((res) => {
140 |         store.fake_cookie = res.data.fake_cookie;
141 |         CheckStatus();
142 |       })
143 |     } else {
144 |       window.$message.error('请检查输入qwq')
145 |     }
146 |   })
147 | }
148 | 
149 | onMounted(() => { CheckStatus(); })
150 | 
151 | function Logout() { store.fake_cookie = ""; CheckStatus(); }
152 | 
153 | </script>
154 | 
155 | <template>
156 |   <div class="container">
157 |     <n-card size="small">
158 |       <n-alert :show-icon="false" :type="status ? 'success' : 'error'" title="此时此刻">
159 |         <template v-if="status">
160 |           已登录<br />
161 |           抑或你想<n-button @click="Logout" text type="primary" style="margin:4px">注销</n-button>
162 |         </template>
163 |         <template v-else>
164 |           未登录
165 |         </template>
166 |       </n-alert>
167 |       <h3 v-if="status" style="text-align:center;">
168 |         人不能两次登入同一个账号<br />
169 |         你或许可以到<n-a href="/user/0/" style="text-decoration: none;">个人中心</n-a>康康
170 |       </h3>
171 |       <n-tabs v-else class="card-tabs" size="large" animated pane-style="box-sizing: border-box;">
172 |         <n-tab-pane name="登录" style="padding: 4px;">
173 |           <n-form ref="form_ref" :rules="rules" :model="user">
174 |             <n-form-item path="sid" label="学号">
175 |               <n-input v-model:value="user.sid" placeholder="请输入BIT学号" autofocus />
176 |             </n-form-item>
177 | 
178 |             <n-form-item path="password" label="密码">
179 |               <n-input v-model:value="user.password" type="password" show-password-on="click" placeholder="告诉我你的秘密" />
180 |             </n-form-item>
181 | 
182 |             <n-button @click="Login" block attr-type="submit">登录</n-button>
183 |           </n-form>
184 |         </n-tab-pane>
185 | 
186 |         <n-tab-pane name="注册或重置" style="padding: 4px;">
187 |           <n-alert title="Tips" :show-icon="false" :closable="true" type="info" style="margin-bottom: 11px;">
188 |             <p style="font-size: 11px;color: var(--text-color-3);">1. BIT101奉行「前端匿名」理念，不会主动公开任何个人信息，你在登录后可以设置供展示的头像、昵称等。
189 |             </p>
190 |             <p style="font-size: 11px;color: var(--text-color-3);">2. 密码将被不可逆加密后传输到服务器。</p>
191 |             <p style="font-size: 11px;color: var(--text-color-3);">3. 你需要选择统一身份认证或学校邮箱以证明自己的身份。</p>
192 |           </n-alert>
193 | 
194 |           <n-form ref="form_ref" :rules="rules" :model="user">
195 |             <n-form-item path="sid" label="学号">
196 |               <n-input v-model:value="user.sid" type="number" placeholder="请输入BIT学号" />
197 |             </n-form-item>
198 | 
199 |             <n-form-item path="password" label="设置密码">
200 |               <n-input v-model:value="user.password" type="password" show-password-on="click" placeholder="告诉我你的秘密" />
201 |             </n-form-item>
202 | 
203 |             <n-form-item path="repassword" label="再次输入密码">
204 |               <n-input v-model:value="user.repassword" :disabled="!user.password" type="password" show-password-on="click"
205 |                 placeholder="再次告诉我你的秘密" />
206 |             </n-form-item>
207 | 
208 |             <n-form-item label="验证方式">
209 |               <n-radio-group v-model:value="user.verify_type">
210 |                 <n-radio-button value="webvpn">
211 |                   统一身份认证
212 |                 </n-radio-button>
213 |                 <n-radio-button value="mail">
214 |                   @bit.edu.cn邮箱
215 |                 </n-radio-button>
216 | 
217 |               </n-radio-group>
218 |             </n-form-item>
219 | 
220 | 
221 |             <template v-if="user.verify_type == 'webvpn'">
222 |               <n-grid cols="12">
223 |                 <n-form-item-gi span="8" :show-label="false">
224 |                   <n-input v-model:value="user.webvpn_password" type="password" show-password-on="click"
225 |                     placeholder="学校统一身份认证密码" />
226 |                 </n-form-item-gi>
227 |                 <n-gi span="4">
228 |                   <n-button @click="WebvpnVerify(user.sid, user.webvpn_password)"
229 |                     :disabled="!user.webvpn_password || !user.sid" :loading="webvpn.loading" block>验证</n-button>
230 |                 </n-gi>
231 |               </n-grid>
232 |             </template>
233 |             <template v-else>
234 |               <n-grid cols="12">
235 |                 <n-form-item-gi path="verify_code" span="8" :show-label="false">
236 |                   <n-input v-model:value="user.verify_code" type="number" placeholder="收到的验证码" />
237 |                 </n-form-item-gi>
238 |                 <n-gi span="4">
239 |                   <n-button @click="MailVerify" :disabled="(!user.sid) || (count_down ? true : false)" block>{{ count_down
240 |                     ? count_down : '发送验证码' }}</n-button>
241 |                 </n-gi>
242 |               </n-grid>
243 |             </template>
244 | 
245 | 
246 | 
247 |             <n-button @click="Register" :disabled="!user.verify_code" block>注册</n-button>
248 |           </n-form>
249 |         </n-tab-pane>
250 |       </n-tabs>
251 |     </n-card>
252 |     <br />
253 |   </div>
254 | </template>
255 | 
256 | 
257 | 


--------------------------------------------------------------------------------
/src/views/Map.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-05-14 12:54:39
 4 |  * @LastEditTime: 2024-02-26 17:11:50
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup>
 8 | import "leaflet/dist/leaflet.css";
 9 | import { LMap, LTileLayer, LControl } from "@vue-leaflet/vue-leaflet";
10 | import { ref } from "vue";
11 | 
12 | const liang_xiang_center = [39.72978, 116.16659];
13 | const zhong_guan_cun_center = [39.95779, 116.30980];
14 | 
15 | const zoom = ref(16);
16 | const center = ref(liang_xiang_center);
17 | 
18 | function MoveTo(x) {
19 |     center.value = x;
20 | }
21 | 
22 | </script>
23 | 
24 | <template>
25 |     <div style="height:100vh; width:100%;">
26 |         <l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false">
27 |             <l-tile-layer url="https://map.bit101.flwfdd.xyz/tile/{z}/{x}/{y}.png"></l-tile-layer>
28 |             <l-control class="leaflet-control" position="topright">
29 |                 <n-button-group>
30 |                     <n-button @click="MoveTo(liang_xiang_center)" type="primary">乡</n-button>
31 |                     <n-button @click="MoveTo(zhong_guan_cun_center)" type="primary">村</n-button>
32 |                 </n-button-group>
33 | 
34 |             </l-control>
35 |         </l-map>
36 |     </div>
37 | </template>


--------------------------------------------------------------------------------
/src/views/Message.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-03-30 14:26:39
  4 |  * @LastEditTime: 2025-03-19 02:40:45
  5 |  * @Description: _(:з」∠)_
  6 | -->
  7 | <script setup lang="ts">
  8 | import router from '@/router';
  9 | import http from '@/utils/request';
 10 | import { FormatTime, GetObjName, GetObjUrl } from '@/utils/tools';
 11 | import { User } from '@/utils/types';
 12 | import ThumbUpFilled from '@vicons/material/ThumbUpFilled'
 13 | import TextsmsFilled from '@vicons/material/TextsmsFilled'
 14 | import PersonAddFilled from '@vicons/material/PersonAddFilled'
 15 | import NotificationsFilled from '@vicons/material/NotificationsFilled'
 16 | import BookmarkFilled from '@vicons/material/BookmarkFilled'
 17 | import { NA } from 'naive-ui';
 18 | import { PropType, defineComponent, h, onActivated, onDeactivated, reactive, ref } from 'vue';
 19 | 
 20 | interface Message {
 21 |   id: number;
 22 |   obj: string;
 23 |   text: string;
 24 |   link_obj: string;
 25 |   update_time: string;
 26 |   from_user: User;
 27 | }
 28 | 
 29 | const messages = reactive({
 30 |   type: "",
 31 |   last_id: 0,
 32 |   end: false,
 33 |   loading: false,
 34 |   list: [] as Message[],
 35 | })
 36 | 
 37 | const unread_nums = ref({
 38 |   like: 0,
 39 |   comment: 0,
 40 |   follow: 0,
 41 |   system: 0,
 42 |   subscription: 0,
 43 | });
 44 | function LoadUnreadNums() {
 45 |   http.get("/messages/unread_nums").then(res => {
 46 |     unread_nums.value = res.data;
 47 |   })
 48 | }
 49 | 
 50 | function LoadMessages() {
 51 |   if (messages.loading || messages.end) return;
 52 |   messages.loading = true;
 53 |   http.get("/messages", { params: { 'type': messages.type, 'last_id': messages.last_id } }).then(res => {
 54 |     messages.loading = false;
 55 | 
 56 |     if (res.data.length == 0) {
 57 |       messages.end = true;
 58 |     } else {
 59 |       messages.list = messages.list.concat(res.data);
 60 |       messages.last_id = messages.list[messages.list.length - 1].id;
 61 |     }
 62 |   }).catch(() => { messages.loading = false; })
 63 | }
 64 | 
 65 | function StartLoadMessages(type: 'like' | 'comment' | 'follow' | 'system' | 'subscription') {
 66 |   messages.type = type;
 67 |   messages.last_id = 0;
 68 |   messages.end = false;
 69 |   messages.list = [];
 70 |   unread_nums.value[type] = 0;
 71 |   LoadMessages();
 72 | }
 73 | 
 74 | 
 75 | const MessageContent = defineComponent({
 76 |   props: {
 77 |     message: {
 78 |       type: Object as PropType<Message>,
 79 |       required: true,
 80 |     }
 81 |   },
 82 |   setup(props) {
 83 |     return () => {
 84 |       let message = props.message;
 85 |       let l = [];
 86 |       let user_link = message.from_user.id != 0 ? h(NA, { href: "/user/" + props.message.from_user.id, style: { textDecoration: 'none' } }, '@' + props.message.from_user.nickname) : '';
 87 |       let obj_name = GetObjName(message.obj);
 88 |       if (messages.type == 'like') {
 89 |         l.push(user_link, ' 赞了你的 ', obj_name, ' ', message.text);
 90 |       } else if (messages.type == 'comment') {
 91 |         l.push(user_link, ' 评论了你的 ', obj_name, ' ', message.text);
 92 |       } else if (messages.type == 'follow') {
 93 |         l.push(user_link, ' 关注了你');
 94 |       } else if (messages.type == 'system') {
 95 |         if (message.from_user.id) l.push('关联用户：', user_link, ' ');
 96 |         if (message.obj) l.push('关联对象：', message.obj, ' ');
 97 |         l.push(message.text);
 98 |       } else if (messages.type == 'subscription') {
 99 |         l.push('你订阅的 ', obj_name, ' ', message.text);
100 |       }
101 |       return l;
102 |     }
103 |   }
104 | })
105 | 
106 | const modal = reactive({
107 |   show: false,
108 |   message: {} as Message,
109 | })
110 | function OpenModal(message: Message) {
111 |   modal.message = message;
112 |   modal.show = true;
113 | }
114 | 
115 | const canActivatePush = ref(false);
116 | const pushActivate = ref(false);
117 | const pushSubscription = ref<PushSubscription | null>(null)
118 | const pushLoading = ref(false);
119 | 
120 | const handlePushSwitchChange = async () => {
121 |   if (!pushActivate.value) {
122 |     pushLoading.value = true;
123 |     try {
124 |       await enablePush();
125 |       pushActivate.value = true;
126 |     }
127 |     catch (e) {
128 |       console.error(e);
129 |       window.$message.error('开启推送失败');
130 |       pushActivate.value = false;
131 |     }
132 |     finally {
133 |       pushLoading.value = false;
134 |     }
135 |   }
136 |   else {
137 |     pushLoading.value = true;
138 |     try {
139 |       await disablePush();
140 |       pushActivate.value = false;
141 |     }
142 |     catch (e) {
143 |       console.error(e);
144 |       window.$message.error('关闭推送失败');
145 |       pushActivate.value = true;
146 |     }
147 |     finally {
148 |       pushLoading.value = false;
149 |     }
150 |   }
151 | }
152 | 
153 | const enablePush = async () => {
154 |   if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
155 |     await Notification.requestPermission();
156 |   }
157 |   if (Notification.permission === 'granted') {
158 |     const swReg = await navigator.serviceWorker.ready;
159 |     const req = await http.get<{ about: string, publicKey: string }>('/messages/push');
160 |     if (!req.data.publicKey) throw new Error('No publicKey');
161 |     const { about, publicKey } = req.data;
162 |     const sub = await swReg.pushManager.subscribe({
163 |       userVisibleOnly: true,
164 |       applicationServerKey: publicKey
165 |     })
166 |     await http.post('/messages/push', sub);
167 |   } else {
168 |     throw new Error('Permission denied');
169 |   }
170 | }
171 | 
172 | const disablePush = async () => {
173 |   pushLoading.value = true;
174 |   if (pushSubscription.value) {
175 |     await pushSubscription.value.unsubscribe();
176 |     await http.delete('/messages/push', { data: pushSubscription.value });
177 |     pushActivate.value = false;
178 |   }
179 | }
180 | 
181 | 
182 | const ifCanActivate = async () => {
183 |   if (!('serviceWorker' in navigator)) canActivatePush.value = false;
184 |   if (!('Notification' in window)) canActivatePush.value = false;
185 |   if (!('PushManager' in window)) canActivatePush.value = false;
186 |   try {
187 |     const swReg = await navigator.serviceWorker.ready
188 |     canActivatePush.value = true;
189 |     const sub = await swReg.pushManager.getSubscription()
190 |     if (sub) pushSubscription.value = sub
191 |     pushActivate.value = !!sub;
192 |   }
193 |   catch {
194 |     canActivatePush.value = false;
195 |   }
196 | }
197 | 
198 | onActivated(async () => {
199 |   LoadUnreadNums();
200 |   await ifCanActivate();
201 | })
202 | 
203 | onDeactivated(() => {
204 |   modal.show = false;
205 | })
206 | 
207 | </script>
208 | 
209 | <template>
210 |   <div class="container">
211 |     <n-card title="消息 | Message">
212 |       <n-space>
213 |         <n-badge :value="unread_nums.like" :max="99">
214 |           <n-button @click="StartLoadMessages('like')">
215 |             <template #icon>
216 |               <n-icon color="#FB7299" :component="ThumbUpFilled" />
217 |             </template>
218 |             收到的赞
219 |           </n-button>
220 |         </n-badge>
221 | 
222 |         <n-badge :value="unread_nums.comment" :max="99">
223 |           <n-button @click="StartLoadMessages('comment')">
224 |             <template #icon>
225 |               <n-icon color="#FB7299" :component="TextsmsFilled" />
226 |             </template>
227 |             收到的评论
228 |           </n-button>
229 |         </n-badge>
230 | 
231 |         <n-badge :value="unread_nums.follow" :max="99">
232 |           <n-button @click="StartLoadMessages('follow')">
233 |             <template #icon>
234 |               <n-icon color="#FB7299" :component="PersonAddFilled" />
235 |             </template>
236 |             新增粉丝
237 |           </n-button>
238 |         </n-badge>
239 | 
240 |         <n-badge :value="unread_nums.subscription" :max="99">
241 |           <n-button @click="StartLoadMessages('subscription')">
242 |             <template #icon>
243 |               <n-icon color="#FB7299" :component="BookmarkFilled" />
244 |             </template>
245 |             插眼订阅
246 |           </n-button>
247 |         </n-badge>
248 | 
249 |         <n-badge :value="unread_nums.system" :max="99">
250 |           <n-button @click="StartLoadMessages('system')">
251 |             <template #icon>
252 |               <n-icon color="#FB7299" :component="NotificationsFilled" />
253 |             </template>
254 |             系统通知
255 |           </n-button>
256 |         </n-badge>
257 |       </n-space>
258 |     </n-card>
259 | 
260 |     <n-divider></n-divider>
261 | 
262 |     <template v-if="messages.type">
263 |       <n-card v-for="i in messages.list" hoverable style="margin-bottom:11px;background-color: var(--card-bg-color);">
264 |         <n-ellipsis :line-clamp="2" :tooltip="false" style="font-size:15px;">
265 |           <MessageContent :message="i"></MessageContent>
266 |         </n-ellipsis>
267 |         <n-space style="color:var(--text-color-3);font-size:14px;">
268 |           {{ FormatTime(i.update_time) }}
269 |           <n-button @click="OpenModal(i)" text>详情></n-button>
270 |           <n-button v-if="i.link_obj" @click="router.push(GetObjUrl(i.link_obj))" text>查看></n-button>
271 |         </n-space>
272 |       </n-card>
273 |       <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ messages.list.length }}条</n-divider>
274 |       <n-button block @click="LoadMessages()" :disabled="messages.end" :loading="messages.loading">
275 |         {{ messages.end ? '木有更多了' : '加载更多' }}</n-button>
276 |       <n-divider></n-divider>
277 |     </template>
278 | 
279 |     <n-card v-if="canActivatePush" title="消息推送设置">
280 |       <n-form-item label="推送服务" label-placement="left">
281 |         <n-switch :value="pushActivate" @update:value="handlePushSwitchChange" :loading="pushLoading"
282 |           :rubber-band="false" />
283 |       </n-form-item>
284 |       <n-collapse-transition :show="!pushActivate">
285 |         <n-alert :show-icon="false">
286 |           开启推送服务后，浏览器将会进行消息推送, 包括点赞、评论、关注、系统通知等.
287 |           但是由于网络问题, 推送可能比较玄乎 ()
288 |         </n-alert>
289 |       </n-collapse-transition>
290 |     </n-card>
291 | 
292 |     <n-modal v-model:show="modal.show" preset="card" title="消息详情" style="width:600px;">
293 |       <n-scrollbar style="max-height:75vh;">
294 |         <div style="white-space: pre-wrap;">
295 |           <MessageContent :message="modal.message"></MessageContent>
296 |         </div>
297 |       </n-scrollbar>
298 |     </n-modal>
299 |   </div>
300 | </template>


--------------------------------------------------------------------------------
/src/views/Paper.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-27 17:09:21
 4 |  * @LastEditTime: 2025-03-18 18:55:58
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import router from '@/router';
10 | import http from '@/utils/request';
11 | import { FormatTime } from '@/utils/tools';
12 | import { onMounted, reactive } from 'vue';
13 | 
14 | const papers = reactive({
15 |   search: "",
16 |   order: "new",
17 |   page: 0,
18 |   end: false,
19 |   loading: false,
20 |   list: [],
21 | })
22 | 
23 | function LoadPapers() {
24 |   papers.loading = true;
25 |   http.get("/papers", {
26 |     params: {
27 |       search: papers.search,
28 |       order: papers.order,
29 |       page: papers.page,
30 |     }
31 |   }).then(res => {
32 |     if (res.data.length == 0) papers.end = true;
33 |     else {
34 |       papers.list = papers.list.concat(res.data);
35 |       if (papers.order != 'rand') papers.page++;
36 |     }
37 |     papers.loading = false;
38 |   }).catch(() => { papers.loading = false; })
39 | }
40 | 
41 | onMounted(() => {
42 |   LoadPapers();
43 | })
44 | 
45 | function Search() {
46 |   papers.list = [];
47 |   papers.page = 0;
48 |   papers.end = false;
49 |   LoadPapers();
50 | }
51 | 
52 | </script>
53 | 
54 | <template>
55 |   <div class="container">
56 |     <n-card title="文章 | Paper">
57 |       <n-button @click="router.push('/paper/edit/0')" type="success" ghost style="margin-bottom:4px;margin-top: -11px;"
58 |         block>新建 Paper</n-button>
59 |       <n-collapse default-expanded-names="search">
60 |         <n-collapse-item title="Paper检索" name="search">
61 |           <n-space vertical>
62 |             <div>搜索</div>
63 |             <n-input v-model:value="papers.search" @keyup.enter="Search" placeholder="请输入关键词" maxlength="42"></n-input>
64 |             <n-radio-group v-model:value="papers.order" name="排序方式">
65 |               <n-space>
66 |                 排序方式
67 |                 <n-radio value="new"> 最新</n-radio>
68 |                 <n-radio value="like"> 最多赞</n-radio>
69 |                 <n-radio value="comment"> 最多评</n-radio>
70 |               </n-space>
71 |             </n-radio-group>
72 |             <n-button @click="Search" ghost block>检索</n-button>
73 |           </n-space>
74 |         </n-collapse-item>
75 |       </n-collapse>
76 |     </n-card>
77 | 
78 |     <n-divider></n-divider>
79 | 
80 |     <router-link v-for="i in papers.list" :to="'/paper/' + i['id']" style="text-decoration: none;">
81 |       <n-card hoverable style="margin-bottom:11px;cursor:pointer;">
82 |         <h3 style="margin:0;color:var(--text-color-1);">{{ i['title'] }}</h3>
83 |         <n-ellipsis :line-clamp="2" :tooltip="false" style="font-size:15px;">
84 |           {{ i['intro'] }}
85 |         </n-ellipsis>
86 |         <div style="color:var(--text-color-3);font-size:14px;">{{ i['like_num'] }}赞 | {{ i['comment_num'] }}评论 |
87 |           {{ FormatTime(i['update_time']) }}更新</div>
88 |       </n-card>
89 |     </router-link>
90 |     <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ papers.list.length }}条</n-divider>
91 |     <n-button block @click="LoadPapers()" :disabled="papers.end" :loading="papers.loading">
92 |       {{ papers.end ? '木有更多了' : '加载更多' }}</n-button>
93 |   </div>
94 | </template>


--------------------------------------------------------------------------------
/src/views/PaperEdit.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-06-28 20:46:23
  4 |  * @LastEditTime: 2023-11-01 22:51:08
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import EditorJS from '@editorjs/editorjs';
 10 | import Header from '@editorjs/header';
 11 | import Image from '@editorjs/image';
 12 | import List from '@editorjs/list';
 13 | import Code from '@editorjs/code';
 14 | import Quote from '@editorjs/quote';
 15 | import Delimiter from '@editorjs/delimiter';
 16 | import Table from '@editorjs/table';
 17 | import InlineCode from '@editorjs/inline-code'
 18 | import AnyButton from 'editorjs-button'
 19 | import Undo from 'editorjs-undo';
 20 | import http from '@/utils/request';
 21 | import store from '@/utils/store';
 22 | import { onMounted, reactive, ref } from 'vue';
 23 | import { useRoute, useRouter } from 'vue-router';
 24 | import PaperRender from '@/components/PaperRender.vue';
 25 | import { setTitle } from '@/utils/tools';
 26 | 
 27 | //文章数据
 28 | const paper = reactive({
 29 |   id: "",
 30 |   title: "俺是标题！",
 31 |   intro: "",
 32 |   data: {},
 33 |   last_time: 0,
 34 |   anonymous: false,
 35 |   public_edit: true,
 36 |   own: true,
 37 | })
 38 | 
 39 | //通过文件上传图片
 40 | function UploadFile(file: File) {
 41 |   let param = new FormData();
 42 |   param.append('file', file)
 43 |   let config = {
 44 |     headers: {
 45 |       'Content-Type': 'multipart/form-data',
 46 |       'fake-cookie': store.fake_cookie,
 47 |     }
 48 |   }
 49 |   return http.post('/upload/image', param, config)
 50 |     .then((res) => {
 51 |       return {
 52 |         success: true,
 53 |         file: {
 54 |           url: res.data.url,
 55 |           low_url: res.data.low_url,
 56 |         }
 57 |       }
 58 |     })
 59 | }
 60 | 
 61 | //通过url上传图片
 62 | function UploadUrl(url: string) {
 63 |   let param = { url: url };
 64 |   let config = {
 65 |     headers: {
 66 |       'fake-cookie': store.fake_cookie,
 67 |     }
 68 |   }
 69 |   return http.post('/upload/image/url', param, config)
 70 |     .then((res) => {
 71 |       return {
 72 |         success: true,
 73 |         file: {
 74 |           url: res.data.url,
 75 |           low_url: res.data.low_url,
 76 |         }
 77 |       }
 78 |     })
 79 | }
 80 | 
 81 | //实例化编辑器
 82 | let editor: EditorJS;
 83 | function InitEditor(init_paper = false) {
 84 |   editor = new EditorJS({
 85 |     holder: 'editorjs',
 86 |     tools: {
 87 |       header: Header,
 88 |       image: {
 89 |         class: Image,
 90 |         config: {
 91 |           uploader: {
 92 |             uploadByFile: UploadFile,
 93 |             uploadByUrl: UploadUrl,
 94 |           }
 95 |         }
 96 |       },
 97 |       list: List,
 98 |       quote: Quote,
 99 |       code: Code,
100 |       AnyButton: AnyButton,
101 |       delimiter: Delimiter,
102 |       table: Table,
103 |       inlineCode: {
104 |         class: InlineCode
105 |       },
106 |     },
107 |     i18n: { //翻译
108 |       messages: {
109 |         toolNames: {
110 |           Text: "文本",
111 |           Heading: "标题",
112 |           Image: "图片",
113 |           List: "列表",
114 |           Quote: "引言",
115 |           Code: "代码",
116 |           Button: "链接",
117 |           Delimiter: "分割",
118 |           Table: "表格"
119 |         }
120 |       },
121 |     },
122 |     onReady: () => {
123 |       let undo = new Undo({ editor });
124 |       if (init_paper && paper.data.blocks.length) {
125 |         editor.render(paper.data);
126 |         undo.initialize(paper.data);
127 |       }
128 |       editor.focus();
129 |     }
130 |   });
131 | }
132 | 
133 | //预览文章
134 | const modal = ref(false)
135 | function PreviewPaper() {
136 |   editor.save().then((out) => {
137 |     paper.data = out;
138 |     modal.value = true;
139 |   }).catch(err => {
140 |     window.$message.error("预览失败Orz");
141 |   })
142 | }
143 | 
144 | //加载文章
145 | function LoadPaper() {
146 |   paper.id = route.params.id as string;
147 |   if (paper.id == '0') InitEditor(false);
148 |   else return http.get("/papers/" + paper.id)
149 |     .then(res => {
150 |       paper.title = res.data.title;
151 |       paper.intro = res.data.intro;
152 |       paper.data = JSON.parse(res.data.content);
153 |       paper.last_time = new Date(res.data.update_time).getTime() / 1000;
154 |       paper.anonymous = res.data.anonymous;
155 |       paper.public_edit = res.data.public_edit;
156 |       paper.own = res.data.own;
157 |       InitEditor(true);
158 |     })
159 | }
160 | 
161 | const route = useRoute();
162 | const router = useRouter();
163 | onMounted(async () => {
164 |   await LoadPaper()
165 |   setTitle('编辑', paper.title, '文章')
166 | })
167 | 
168 | //发表文章
169 | const posting = ref(false);
170 | function PostPaper() {
171 |   posting.value = true;
172 |   editor.save().then((data) => {
173 |     //生成简介
174 |     if (!paper.intro) {
175 |       let max_lenth = 124;
176 |       for (let i of data.blocks) {
177 |         if (i.type == 'paragraph' || i.type == 'header' || i.type == 'quote') {
178 |           paper.intro += i.data.text.slice(0, max_lenth - paper.intro.length) + " ";
179 | 
180 |         }
181 |         else if (i.type == 'list') {
182 |           for (let j of i.data.items) paper.intro += j.slice(0, max_lenth - paper.intro.length) + " ";
183 |         }
184 |         if (paper.intro.length >= max_lenth) break;
185 |       }
186 |     }
187 | 
188 |     let paper_data = {
189 |       title: paper.title,
190 |       intro: paper.intro,
191 |       content: JSON.stringify(data),
192 |       last_time: paper.last_time,
193 |       anonymous: paper.anonymous,
194 |       public_edit: paper.public_edit,
195 |     }
196 | 
197 |     if (paper.id == '0') {
198 |       http.post("/papers", paper_data).then((res) => {
199 |         posting.value = false;
200 |         router.push('/paper/' + res.data.id);
201 |       }).catch(() => {
202 |         posting.value = false;
203 |       })
204 |     } else {
205 |       http.put("/papers/" + paper.id, paper_data).then(() => {
206 |         posting.value = false;
207 |         router.push('/paper/' + paper.id);
208 |       }).catch(() => {
209 |         posting.value = false;
210 |       })
211 |     }
212 |   })
213 | }
214 | 
215 | // 删除文章
216 | function DeletePaper() {
217 |   http.delete("/papers/" + paper.id).then(() => {
218 |     router.push('/paper/');
219 |   })
220 | }
221 | 
222 | </script>
223 | 
224 | <template>
225 |   <div class="container">
226 |     <n-card :title="paper.id == '0' ? '新建 Paper' : '编辑 Paper ' + paper.id">
227 |       <n-space vertical>
228 |         <div>标题</div>
229 |         <n-input v-model:value="paper.title" placeholder="请输入标题" maxlength="42" show-count size="large"></n-input>
230 |         <div>简介（为空则根据文章自动生成）</div>
231 |         <n-input v-model:value="paper.intro" placeholder="请输入简介" maxlength="101" show-count clearable></n-input>
232 |         <n-space>
233 |           <n-button @click="PreviewPaper" type="info" ghost>预览</n-button>
234 |           <n-popconfirm @positive-click="PostPaper" :show-icon="false" positive-text="确定" negative-text="取消">
235 |             <template #trigger>
236 |               <n-button :disabled="posting" type="success" ghost>发Paper</n-button>
237 |             </template>
238 |             汝真发表耶？
239 |           </n-popconfirm>
240 |           <n-button @click="paper.anonymous = !paper.anonymous" ghost>匿名:{{ paper.anonymous ? '是' : '否' }}</n-button>
241 |           <n-button v-if="paper.own" @click="paper.public_edit = !paper.public_edit" ghost>其他人可编辑:{{ paper.public_edit ?
242 |             '是' : '否' }}
243 |           </n-button>
244 |           <n-popconfirm v-if="paper.own" @positive-click="DeletePaper" :show-icon="false" positive-text="确定"
245 |             negative-text="取消">
246 |             <template #trigger>
247 |               <n-button :disabled="posting" type="error" ghost>删除</n-button>
248 |             </template>
249 |             汝真断舍离耶？
250 |           </n-popconfirm>
251 |         </n-space>
252 |       </n-space>
253 |     </n-card>
254 | 
255 |     <n-card style="margin: 11px 0 24px 0;">
256 |       <div id="editorjs"></div>
257 |     </n-card>
258 | 
259 |     <n-modal v-model:show="modal" preset="card" style="width:666px">
260 |       <n-scrollbar style="max-height:88vh;">
261 |         <PaperRender :paper="paper" />
262 |       </n-scrollbar>
263 |     </n-modal>
264 | 
265 |   </div>
266 | </template>


--------------------------------------------------------------------------------
/src/views/PaperShow.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-07-10 23:03:43
  4 |  * @LastEditTime: 2025-03-19 01:40:23
  5 |  * @Description: 显示文章
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import http from '@/utils/request';
 10 | import { onMounted, reactive } from 'vue';
 11 | import { useRoute, useRouter } from 'vue-router';
 12 | import PaperRender from '@/components/PaperRender.vue';
 13 | import { FormatTime, setTitle, Share } from '@/utils/tools';
 14 | import EditOutlined from '@vicons/material/EditOutlined'
 15 | import ThumbUpOutlined from '@vicons/material/ThumbUpOutlined'
 16 | import ThumbUpFilled from '@vicons/material/ThumbUpFilled'
 17 | import BookmarkFilled from '@vicons/material/BookmarkFilled'
 18 | import BookmarkOutlined from '@vicons/material/BookmarkOutlined'
 19 | import ShareOutlined from '@vicons/material/ShareOutlined'
 20 | import Comment from '@/components/Comment.vue';
 21 | import Avatar from '@/components/Avatar.vue';
 22 | import { SubscriptionLevel, User } from '@/utils/types';
 23 | import Subscription from '@/components/Subscription.vue';
 24 | 
 25 | //文章数据
 26 | const paper = reactive({
 27 |   id: "",
 28 |   title: "俺是标题！",
 29 |   intro: "",
 30 |   data: {},
 31 |   create_time: "",
 32 |   update_time: "",
 33 |   user: {} as User,
 34 |   like_num: 0,
 35 |   like: false,
 36 |   like_loading: false,
 37 |   comment_num: 0,
 38 |   public_edit: true,
 39 |   own: false,
 40 |   subscription: SubscriptionLevel.None,
 41 |   subscription_loading: false,
 42 | })
 43 | 
 44 | //加载文章
 45 | function LoadPaper() {
 46 |   return http.get("/papers/" + paper.id)
 47 |     .then(res => {
 48 |       paper.title = res.data.title;
 49 |       paper.intro = res.data.intro;
 50 |       paper.data = JSON.parse(res.data.content);
 51 |       paper.create_time = FormatTime(res.data.create_time);
 52 |       paper.update_time = FormatTime(res.data.update_time);
 53 |       paper.like_num = res.data.like_num;
 54 |       paper.comment_num = res.data.comment_num;
 55 |       paper.like = res.data.like;
 56 |       paper.user = res.data.update_user;
 57 |       paper.public_edit = res.data.public_edit;
 58 |       paper.own = res.data.own;
 59 |       paper.subscription = res.data.subscription;
 60 |     })
 61 | }
 62 | 
 63 | function Like() {
 64 |   paper.like_loading = true;
 65 |   http.post("/reaction/like", { 'obj': 'paper' + paper.id })
 66 |     .then(res => {
 67 |       paper.like = res.data.like;
 68 |       paper.like_num = res.data.like_num;
 69 |       paper.like_loading = false;
 70 |     }).catch(() => { paper.like_loading = false; })
 71 | }
 72 | 
 73 | function SharePaper() {
 74 |   let title = 'BIT101文章｜' + paper.title;
 75 |   Share(title, title, window.location.href)
 76 | }
 77 | 
 78 | const router = useRouter();
 79 | const route = useRoute();
 80 | paper.id = route.params.id as string;
 81 | onMounted(async () => {
 82 |   await LoadPaper()
 83 |   setTitle(paper.title, '文章')
 84 | })
 85 | </script>
 86 | 
 87 | <template>
 88 |   <div class="container" v-if="paper.user.id">
 89 |     <div style="text-align:center;">
 90 |       <n-h2>{{ paper.title }}</n-h2>
 91 |     </div>
 92 |     <n-divider></n-divider>
 93 |     <div style="display: flex;align-items: center;">
 94 |       <router-link :to="'/user/' + paper.user.id">
 95 |         <Avatar :user="paper.user" :size="36" />
 96 |       </router-link>
 97 |       <span style="margin-left: 4px;">
 98 |         <div style="font-size: 16px;">{{ paper.user.nickname }}</div>
 99 |         <div style="margin-top: -4px;font-size:14px;">最后编辑于{{ paper.update_time }}</div>
100 |       </span>
101 | 
102 |     </div>
103 | 
104 |     <n-space style="margin-top:4px">
105 |       <n-button @click="Like" icon-placement="right" color="#fb7299" :ghost="!paper.like" :loading="paper.like_loading"
106 |         :disabled="paper.like_loading">
107 |         <template #icon>
108 |           <n-icon>
109 |             <ThumbUpFilled v-if="paper.like" />
110 |             <ThumbUpOutlined v-else />
111 |           </n-icon>
112 |         </template>
113 |         {{ paper.like_num }}赞同
114 |       </n-button>
115 | 
116 |       <n-button @click="SharePaper" icon-placement="right" ghost>
117 |         <template #icon>
118 |           <n-icon>
119 |             <ShareOutlined />
120 |           </n-icon>
121 |         </template>
122 |         分享
123 |       </n-button>
124 | 
125 |     </n-space>
126 | 
127 |     <n-divider style="color:var(--text-color-3);font-size:14px;">首次编辑于{{ paper.create_time }}</n-divider>
128 |     <PaperRender :paper="paper" />
129 |     <n-divider style="color:var(--text-color-3);font-size:14px;">
130 |       <n-button v-if="(paper.public_edit || paper.own)" @click="router.push('/paper/edit/' + paper.id)"
131 |         icon-placement="right" text>
132 |         <template #icon>
133 |           <n-icon>
134 |             <EditOutlined />
135 |           </n-icon>
136 |         </template>
137 |         编辑此篇Paper
138 |       </n-button>
139 |       <template v-else>不允许编辑</template>
140 |     </n-divider>
141 |     <n-space style="margin-top:4px" justify="end">
142 |       <n-button @click="SharePaper" icon-placement="right" ghost>
143 |         <template #icon>
144 |           <n-icon>
145 |             <ShareOutlined />
146 |           </n-icon>
147 |         </template>
148 |         分享
149 |       </n-button>
150 | 
151 |       <Subscription :obj="'paper' + paper.id" :level="paper.subscription" />
152 | 
153 |       <n-button @click="Like" icon-placement="right" color="#fb7299" :ghost="!paper.like" :loading="paper.like_loading"
154 |         :disabled="paper.like_loading">
155 |         <template #icon>
156 |           <n-icon>
157 |             <ThumbUpFilled v-if="paper.like" />
158 |             <ThumbUpOutlined v-else />
159 |           </n-icon>
160 |         </template>
161 |         {{ paper.like_num }}赞同
162 |       </n-button>
163 | 
164 |     </n-space>
165 |     <n-divider style="color:var(--text-color-3);font-size:14px;">现有{{ paper.comment_num }}条评论</n-divider>
166 |     <Comment :obj='"paper" + paper.id'></Comment>
167 |   </div>
168 | </template>


--------------------------------------------------------------------------------
/src/views/Report.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2023-10-28 12:27:23
 4 |  * @LastEditTime: 2024-02-26 17:17:34
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import http from '@/utils/request';
 9 | import store from '@/utils/store';
10 | import { onMounted, reactive, ref } from 'vue';
11 | import { useRoute, useRouter } from 'vue-router';
12 | import { setTitle } from '@/utils/tools';
13 | import { Claim, Image, Poster } from '@/utils/types';
14 | import AddRound from '@vicons/material/AddRound';
15 | import { UploadFileInfo } from 'naive-ui';
16 | 
17 | const route = useRoute();
18 | const router = useRouter();
19 | 
20 | const report = reactive({
21 |   title: "",
22 |   text: "",
23 |   posting: false,
24 |   types: [] as { label: number, value: string }[],
25 |   type_id: null,
26 | })
27 | 
28 | function PostReport() {
29 |   if (report.type_id == null) {
30 |     window.$message.error("请选择举报类别Orz");
31 |     return;
32 |   }
33 |   if (report.text.length == 0) {
34 |     window.$message.error("请填写举报理由Orz");
35 |     return;
36 |   }
37 |   report.posting = true;
38 |   http.post("/manage/reports", {
39 |     obj: route.params.obj,
40 |     type_id: report.type_id,
41 |     text: report.text
42 |   }).then(() => {
43 |     router.go(-1);
44 |   }).finally(() => {
45 |     report.posting = false;
46 |   })
47 | }
48 | 
49 | function GetReportTypes() {
50 |   http.get("/manage/report_types").then((res) => {
51 |     report.types = res.data.map((i: any) => { return { label: i.text, value: i.id } });
52 |   })
53 | }
54 | 
55 | onMounted(() => {
56 |   GetReportTypes();
57 |   if (route.params.obj) {
58 |     let obj = route.params.obj.toString();
59 |     if (obj.startsWith("poster")) {
60 |       report.title = "举报Poster";
61 |     }
62 |     if (obj.startsWith("comment")) {
63 |       report.title = "举报评论";
64 |     }
65 |   }
66 | })
67 | 
68 | </script>
69 | 
70 | <template>
71 |   <div class="container">
72 |     <n-space vertical size="large">
73 |       <n-h2 style="margin-top:0px;margin-bottom:-6px;">{{ report.title }}</n-h2>
74 | 
75 |       <n-space vertical size="small">
76 |         <div>举报类别</div>
77 |         <n-select v-model:value="report.type_id" :options="report.types" />
78 |       </n-space>
79 | 
80 |       <n-space vertical size="small">
81 |         <div>举报理由</div>
82 |         <n-input v-model:value="report.text" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 6 }"
83 |           maxlength="23333" show-count />
84 |       </n-space>
85 | 
86 |       <n-space justify="end">
87 |         <n-popconfirm @positive-click="PostReport" :show-icon="false" positive-text="确定" negative-text="取消">
88 |           <template #trigger>
89 |             <n-button :disabled="report.posting" type="success" ghost>举报</n-button>
90 |           </template>
91 |           汝真举报耶？
92 |         </n-popconfirm>
93 |       </n-space>
94 |     </n-space>
95 | 
96 |   </div>
97 | </template>


--------------------------------------------------------------------------------
/src/views/Schedule.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2023-02-13 21:52:38
  4 |  * @LastEditTime: 2024-02-26 17:17:45
  5 |  * @Description: 课程表页面
  6 |  * _(:з」∠)_
  7 | -->
  8 | 
  9 | <script setup lang="ts">
 10 | import http from "@/utils/request";
 11 | import { OpenLink, WebvpnVerify, webvpn } from "@/utils/tools";
 12 | import { reactive, onMounted, watch } from "vue";
 13 | 
 14 | const user = reactive({
 15 |   sid: "",
 16 |   password: "",
 17 | });
 18 | 
 19 | const schedule = reactive({
 20 |   loading: false,
 21 |   term: "",
 22 |   url: "",
 23 |   msg: "",
 24 | });
 25 | 
 26 | function GetSchedule() {
 27 |   if (!webvpn.cookie) return;
 28 |   schedule.loading = true;
 29 |   http
 30 |     .get("/courses/schedule", {
 31 |       params: {
 32 |         term: schedule.term,
 33 |       },
 34 |       headers: {
 35 |         "webvpn-cookie": webvpn.cookie,
 36 |       },
 37 |     })
 38 |     .then((res) => {
 39 |       schedule.url = res.data.url;
 40 |       schedule.msg = res.data.note;
 41 |       schedule.loading = false;
 42 |     })
 43 |     .catch(() => {
 44 |       schedule.loading = false;
 45 |     });
 46 | }
 47 | 
 48 | onMounted(() => {
 49 |   GetSchedule();
 50 | });
 51 | 
 52 | watch(
 53 |   () => webvpn.cookie,
 54 |   () => {
 55 |     GetSchedule();
 56 |   }
 57 | );
 58 | </script>
 59 | 
 60 | <template>
 61 |   <div class="container">
 62 |     <n-card title="课程表">
 63 |       <n-space vertical v-if="!webvpn.cookie">
 64 |         <n-input v-model:value="user.sid" type="number" placeholder="学号" />
 65 |         <n-input
 66 |           v-model:value="user.password"
 67 |           type="password"
 68 |           show-password-on="click"
 69 |           placeholder="学校统一身份认证密码"
 70 |         />
 71 |         <n-collapse>
 72 |           <n-collapse-item title="指定学期">
 73 |             <n-input
 74 |               v-model:value="schedule.term"
 75 |               type="text"
 76 |               placeholder="如2023-2024-2 默认为当前学期"
 77 |             />
 78 |           </n-collapse-item>
 79 |         </n-collapse>
 80 | 
 81 |         <n-button
 82 |           @click="WebvpnVerify(user.sid, user.password)"
 83 |           :disabled="!user.sid || !user.password || webvpn.loading"
 84 |           block
 85 |           :loading="webvpn.loading"
 86 |         >
 87 |           查询
 88 |         </n-button>
 89 |       </n-space>
 90 | 
 91 |       <div v-if="schedule.loading" style="text-align: center">
 92 |         <n-spin size="large">
 93 |           <template #description> 正在获取课程表 </template>
 94 |         </n-spin>
 95 |       </div>
 96 |       <div v-if="schedule.url">
 97 |         <p style="margin-top: 0">{{ schedule.msg }}</p>
 98 |         <n-button @click="OpenLink(schedule.url)" block> 打开课程表 </n-button>
 99 |       </div>
100 |     </n-card>
101 |     <n-alert :show-icon="false" type="info">
102 |       导出的是当前学期的课表（.ics格式），iOS用户直接打开链接即可添加到日历，安卓用户可使用BIT101-Android
103 |       APP（或支持.ics格式的日历软件）,桌面端也有软件可以适配.ics格式。具体请见：
104 |       <n-a href="/paper/21">
105 |         使用攻略
106 |       </n-a>
107 |     </n-alert>
108 |   </div>
109 | </template>
110 | 


--------------------------------------------------------------------------------
/src/views/Score.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-06-26 18:52:08
  4 |  * @LastEditTime: 2024-02-26 17:20:06
  5 |  * @Description: 
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import router from '@/router';
 10 | import http from '@/utils/request';
 11 | import { WebvpnVerify, webvpn } from '@/utils/tools';
 12 | import store from '@/utils/store';
 13 | import { DataTableRowKey } from 'naive-ui';
 14 | import { RowData } from 'naive-ui/es/data-table/src/interface';
 15 | import { reactive, ref, onMounted, watch } from 'vue';
 16 | 
 17 | const user = reactive({
 18 |   sid: store.grade_query.sid,
 19 |   password: ""
 20 | })
 21 | 
 22 | //排序函数
 23 | function CustomSorter(k: string) {
 24 |   return (a: any, b: any) => {
 25 |     if (!a[k] || !b[k]) return 1;
 26 |     if (!isNaN(a[k])) {
 27 |       return a[k] - b[k];
 28 |     } else if (a[k].search("%") != -1) {
 29 |       return parseInt(a[k]) - parseInt(b[k]);
 30 |     } else {
 31 |       return a[k] < b[k] ? -1 : 1;
 32 |     }
 33 |   }
 34 | }
 35 | 
 36 | const columns = [
 37 |   {
 38 |     type: 'selection',
 39 |     fixed: 'left',
 40 |   },
 41 |   {
 42 |     title: '课程名称',
 43 |     key: '课程名称',
 44 |     fixed: 'left',
 45 |     width: 99,
 46 |     sorter: 'default',
 47 |     cellProps: (row: RowData) => {
 48 |       return {
 49 |         style: 'cursor: pointer;',
 50 |         onClick: () => {
 51 |           modal_data.value = row;
 52 |           modal.value = true;
 53 |         }
 54 |       }
 55 |     }
 56 |   },
 57 |   {
 58 |     title: '成绩',
 59 |     key: '成绩',
 60 |     width: 66,
 61 |     sorter: CustomSorter('成绩'),
 62 |   },
 63 |   {
 64 |     title: '平均分',
 65 |     key: '平均分',
 66 |     width: 88,
 67 |     sorter: CustomSorter('平均分'),
 68 |   },
 69 |   {
 70 |     title: '学分',
 71 |     key: '学分',
 72 |     width: 66,
 73 |     sorter: CustomSorter('学分'),
 74 |   },
 75 |   {
 76 |     title: '班级排名',
 77 |     key: '本人成绩在班级中占',
 78 |     width: 99,
 79 |     sorter: CustomSorter('本人成绩在班级中占'),
 80 |   },
 81 |   {
 82 |     title: '专业排名',
 83 |     key: '本人成绩在专业中占',
 84 |     width: 99,
 85 |     sorter: CustomSorter('本人成绩在专业中占'),
 86 |   },
 87 |   {
 88 |     title: '开课学期',
 89 |     key: '开课学期',
 90 |     width: 99,
 91 |     sorter: 'default',
 92 |   },
 93 |   {
 94 |     title: '课程性质',
 95 |     key: '课程性质',
 96 |     width: 99,
 97 |     sorter: 'default',
 98 |   },
 99 | ]
100 | 
101 | const ori_data = ref([] as any);
102 | const data = ref([] as any);
103 | const loading = ref(false);
104 | const detail = ref(false);
105 | const search = ref("");
106 | const course_type = reactive({
107 |   list: [] as any,
108 |   filter: store.grade_query.course_type_filter,
109 | });
110 | const course_time = reactive({
111 |   list: [] as any,
112 |   filter: store.grade_query.course_time_filter,
113 | });
114 | const stat = reactive({
115 |   credit: 0,
116 |   num: 0,
117 |   score: "",
118 |   gpa: "",
119 |   avg_score: "",
120 |   avg_gpa: "",
121 | })
122 | 
123 | // 生成选择行的key
124 | function rowKey(row: RowData) {
125 |   return row['序号']
126 | }
127 | 
128 | // 选择框
129 | const checkedRowKeys = ref<DataTableRowKey[]>([])
130 | watch(checkedRowKeys, () => {
131 |   Compute();
132 | })
133 | 
134 | function Score2Num(s: string) {
135 |   let ind = ["优秀", "良好", "中等", "及格", "不及格"].indexOf(s);
136 |   if (ind != -1) return [95, 85, 75, 65, 0][ind];
137 |   return Number(s);
138 | }
139 | 
140 | function Score2GPA(s: string) {
141 |   let ind = ["优秀", "良好", "中等", "及格", "不及格"].indexOf(s);
142 |   if (ind != -1) return [4.0, 3.6, 2.8, 1.7, 0][ind];
143 |   let x = Number(s);
144 |   if (x < 60) return 0;
145 |   return 4 - (3 * (100 - x) * (100 - x)) / 1600;
146 | }
147 | 
148 | // 计算成绩
149 | function Compute() {
150 |   let credit_sum = 0;
151 |   let score_sum = 0;
152 |   let gpa_sum = 0;
153 |   let avg_score_sum = 0;
154 |   let avg_gpa_sum = 0;
155 |   stat.num = 0;
156 |   for (let i of ori_data.value) {
157 |     if (checkedRowKeys.value.indexOf(i['序号']) != -1) {
158 |       let credit = Number(i["学分"]);
159 |       stat.num++;
160 |       if (isNaN(credit) || credit == 0) continue;
161 |       let score = Score2Num(i["成绩"]);
162 |       let avg_score = Score2Num(i["平均分"]);
163 |       let gpa = Score2GPA(i["成绩"]);
164 |       let avg_gpa = Score2GPA(i["平均分"]);
165 |       credit_sum += credit;
166 |       score_sum += score * credit;
167 |       gpa_sum += gpa * credit;
168 |       avg_score_sum += avg_score * credit;
169 |       avg_gpa_sum += avg_gpa * credit;
170 |     }
171 |   }
172 |   stat.credit = credit_sum;
173 |   stat.score = (score_sum / credit_sum).toFixed(4);
174 |   stat.avg_score = (avg_score_sum / credit_sum).toFixed(4);
175 |   stat.gpa = (gpa_sum / credit_sum).toFixed(4);
176 |   stat.avg_gpa = (avg_gpa_sum / credit_sum).toFixed(4);
177 | }
178 | 
179 | // 筛选
180 | function Filter() {
181 |   data.value = [];
182 |   checkedRowKeys.value = [];
183 |   let t = {};
184 |   for (let i of ori_data.value) {
185 |     if (
186 |       i["课程名称"].search(search.value) != -1 &&
187 |       course_type.filter.indexOf(i["课程性质"]) != -1 &&
188 |       course_time.filter.indexOf(i["开课学期"]) != -1
189 |     ) {
190 |       data.value.push(i);
191 |       let score = Score2Num(i["成绩"]);
192 |       if (score == 0) continue;
193 |       let x = t[i["课程编号"]];
194 |       if (x) { //已经添加过相同课程
195 |         if (Score2Num(x["成绩"]) < score) { //替换
196 |           checkedRowKeys.value.splice(checkedRowKeys.value.indexOf(x["序号"]), 1);
197 |           checkedRowKeys.value.push(i["序号"]);
198 |           t[i["课程编号"]] = i;
199 |         }
200 |       }
201 |       else {
202 |         t[i["课程编号"]] = i;
203 |         checkedRowKeys.value.push(i["序号"]);
204 |       }
205 |     }
206 |   }
207 | 
208 |   store.grade_query.course_type_filter = course_type.filter;
209 |   store.grade_query.course_time_filter = course_time.filter;
210 |   
211 |   Compute();
212 | }
213 | 
214 | 
215 | function GetList() {
216 |   if (!webvpn.cookie) return;
217 |   loading.value = true;
218 |   http
219 |     .get("/score", {
220 |       params: {
221 |         detail: detail.value ? true : '',
222 |       },
223 |       headers: {
224 |         "webvpn-cookie": webvpn.cookie,
225 |       },
226 |     })
227 |     .then((res) => {
228 |       store.grade_query.sid = user.sid;
229 |       loading.value = false;
230 |       let ori_table = res.data.data;
231 |       let ori_head = ori_table[0];
232 |       ori_data.value = [];
233 |       for (let i = 1; i < ori_table.length; i++) {
234 |         let row = {};
235 |         for (let j in ori_table[i]) {
236 |           row[ori_head[j]] = ori_table[i][j];
237 |         }
238 |         ori_data.value.push(row);
239 |       }
240 |       let s;
241 |       let course_type_tmp: string[] = [];
242 |       let course_time_tmp: string[] = [];
243 |       course_type.list = [];
244 |       course_time.list = [];
245 |       for (let i of ori_data.value) {
246 |         s = i["课程性质"];
247 |         if (course_type_tmp.indexOf(s) == -1) {
248 |           course_type_tmp.push(s);
249 |           course_type.list.push({ label: s, value: s });
250 |         }
251 | 
252 |         s = i["开课学期"];
253 |         if (course_time_tmp.indexOf(s) == -1) {
254 |           course_time_tmp.push(s);
255 |           course_time.list.push({ label: s, value: s });
256 |         }
257 | 
258 |       }
259 | 
260 |       // 保留之前的筛选
261 |       if(!course_type.filter || course_type.filter.length == 0)
262 |         course_type.filter = course_type_tmp.concat();
263 |       else
264 |         course_type.filter = course_type.filter.filter((s: string) => course_type_tmp.indexOf(s) != -1);
265 | 
266 |       if(!course_time.filter || course_time.filter.length == 0)
267 |         course_time.filter = course_time_tmp.concat();
268 |       else
269 |         course_time.filter = course_time.filter.filter((s: string) => course_time_tmp.indexOf(s) != -1);
270 |       
271 |       Filter();
272 |     })
273 | }
274 | 
275 | function downloadCsv() {
276 |   let csv = "课程名称,成绩,平均分,学分,本人成绩在班级中占,本人成绩在专业中占,开课学期,课程性质\n";
277 |   for (let i of data.value) {
278 |     csv += `${i["课程名称"]},${i["成绩"]},${i["平均分"]},${i["学分"]},${i["本人成绩在班级中占"]},${i["本人成绩在专业中占"]},${i["开课学期"]},${i["课程性质"]}\n`;
279 |   }
280 |   
281 |   // 为了 Excel 的兼容性，添加 BOM
282 |   const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
283 |   let blob = new Blob([bom, csv], { type: 'text/csv;charset=utf-8' });
284 |   let url = window.URL.createObjectURL(blob);
285 |   let a = document.createElement('a');
286 |   a.href = url;
287 |   a.download = `Scores-BIT101-${(new Date()).toISOString()}.csv`;
288 |   document.body.appendChild(a);
289 |   a.click();
290 |   document.body.removeChild(a);
291 |   window.URL.revokeObjectURL(url);
292 | }
293 | 
294 | // 课程详情
295 | const modal = ref(false);
296 | const modal_data = ref({});
297 | 
298 | const report = reactive({
299 |   loading: false,
300 |   modal: false,
301 |   list: [],
302 | })
303 | function GetReport() {
304 |   report.loading = true;
305 |   http.get('/score/report', {
306 |     headers: {
307 |       "webvpn-cookie": webvpn.cookie,
308 |     },
309 |   })
310 |     .then((res) => {
311 |       report.list = res.data.data;
312 |       report.loading = false;
313 |       report.modal = true;
314 |     }).catch(() => {
315 |       report.loading = false;
316 |     })
317 | }
318 | 
319 | onMounted(() => {
320 |   GetList();
321 | })
322 | 
323 | watch(() => webvpn.cookie, () => {
324 |   GetList();
325 | })
326 | 
327 | </script>
328 | 
329 | <template>
330 |   <div class="container">
331 |     <n-card title="成寄查询">
332 |       <n-space vertical v-if="!webvpn.cookie">
333 |         <n-input :input-props="{id:'sid'}" v-model:value="user.sid" type="number" placeholder="学号" />
334 |         <n-input :input-props="{id:'password'}" v-model:value="user.password" type="password" show-password-on="click" placeholder="学校统一身份认证密码" />
335 |         <n-button id="submit" attr-type="submit" @click="WebvpnVerify(user.sid, user.password)" :disabled="!user.sid || !user.password || webvpn.loading"
336 |           block :loading="webvpn.loading">
337 |           查询
338 |         </n-button>
339 |       </n-space>
340 |       <n-space vertical v-else>
341 |         <n-button v-show="!detail" @click="detail = true, GetList()" :disabled="loading || detail" block>
342 |           查询详细信息
343 |         </n-button>
344 |         <n-button @click="GetReport()" :disabled="loading || report.loading" :loading="report.loading" block>
345 |           获取可信成绩单
346 |         </n-button>
347 |         <n-select v-model:value="course_type.filter" multiple :options="course_type.list" max-tag-count="responsive" />
348 |         <n-select v-model:value="course_time.filter" multiple :options="course_time.list" max-tag-count="responsive" />
349 |         <n-button block @click="Filter" :disabled="loading">筛选</n-button>
350 |         <n-button block @click="downloadCsv" :disabled="loading || stat.num == 0">
351 |           导出为 CSV
352 |         </n-button>
353 |       </n-space>
354 | 
355 |     </n-card>
356 |     <n-alert :show-icon="false" type="info">
357 |       <p style="color:var(--text-color-3);font-size: 0.9em;line-height: 1.2em;margin-top: 0;">Tips:
358 |         学分绩根据筛选出的课程加权计算，估计平均绩使用各科平均分计算得出，4分制GPA采用
359 |         <n-a href="https://jwb.bit.edu.cn/tzgg/0fd24ee94b774575ba1a9a4485f45b6c.htm">官方公式</n-a>
360 |         计算。可手动勾选纳入计算的课程，点击课程名称可查看详情。更多说明请见：
361 |         <n-a href="/paper/20">BIT101常见问题解惑</n-a>
362 |       </p>
363 |       总学分：{{ stat.credit }}（{{ stat.num }}门）<br />
364 |       个人学分绩 | GPA：{{ stat.score }} | {{ stat.gpa }}<br />
365 |       <template v-if="detail">估计平均绩 | GPA：{{ stat.avg_score }} | {{ stat.avg_gpa }}<br /></template>
366 |     </n-alert>
367 | 
368 |     <n-data-table :columns="columns" :data="data" size="small" striped :scroll-x="777" :loading="loading"
369 |       :pagination="{ pageSlot: 7 }" :row-key="rowKey" v-model:checked-row-keys="checkedRowKeys" />
370 |     <br />
371 | 
372 |     <n-modal v-model:show="modal" preset="card" style="width: 424px;" :title="modal_data['课程名称'] + ' 详情'">
373 |       <n-scrollbar style="max-height:88vh;">
374 |         <n-button @click="modal = false, router.push('/course/?search=' + modal_data['课程编号'])">查找课程评价和资料</n-button>
375 |         <div v-for="(value, key, index) in modal_data">{{ key + ': ' + value }}</div>
376 |       </n-scrollbar>
377 |     </n-modal>
378 | 
379 |     <n-modal v-model:show="report.modal" preset="card" style="text-align:center;max-width: 666px;">
380 |       <n-scrollbar style="max-height:88vh;">
381 |         <n-image v-for="i in report.list" :src="i" :img-props="{ 'style': 'width:100%;' }"></n-image>
382 |       </n-scrollbar>
383 |     </n-modal>
384 |   </div>
385 | </template>
386 | 


--------------------------------------------------------------------------------
/src/views/Subscription.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2025-03-19 02:31:38
 4 |  * @LastEditTime: 2025-03-19 02:53:19
 5 |  * @Description: _(:з」∠)_
 6 | -->
 7 | <script setup lang="ts">
 8 | import router from '@/router';
 9 | import http from '@/utils/request';
10 | import { FormatTime, GetObjName, GetObjUrl } from '@/utils/tools';
11 | import { SubscriptionLevel } from '@/utils/types';
12 | import { onMounted, reactive } from 'vue';
13 | 
14 | interface Subscription {
15 |   id: number;
16 |   subscription_time: string;
17 |   obj: string;
18 |   level: SubscriptionLevel;
19 |   text: string;
20 | }
21 | 
22 | const subscriptions = reactive({
23 |   page: 0,
24 |   end: false,
25 |   loading: false,
26 |   list: [] as Subscription[],
27 | })
28 | 
29 | const subscriptionLevels = {
30 |   [SubscriptionLevel.None]: '取消订阅',
31 |   [SubscriptionLevel.Silent]: '仅收藏',
32 |   [SubscriptionLevel.Update]: '订阅更新',
33 |   [SubscriptionLevel.Comment]: '订阅更新及评论',
34 | }
35 | 
36 | function LoadSubscriptions() {
37 |   if (subscriptions.loading || subscriptions.end) return;
38 |   subscriptions.loading = true;
39 |   http.get("/subscriptions", { params: { 'page': subscriptions.page } }).then(res => {
40 |     if (res.data.length == 0) {
41 |       subscriptions.end = true;
42 |     } else {
43 |       subscriptions.list = subscriptions.list.concat(res.data);
44 |       subscriptions.page++;
45 |     }
46 |   }).finally(() => { subscriptions.loading = false; });
47 | }
48 | 
49 | onMounted(() => {
50 |   LoadSubscriptions();
51 | })
52 | </script>
53 | 
54 | <template>
55 |   <div class="container">
56 |     <n-card title="订阅 | Subscription">
57 |     </n-card>
58 | 
59 |     <n-divider></n-divider>
60 | 
61 |     <n-card v-for="i in subscriptions.list" hoverable
62 |       style="margin-bottom:11px;background-color: var(--card-bg-color);">
63 |       <n-ellipsis :line-clamp="2" :tooltip="false" style="font-size:15px;">
64 |         {{ GetObjName(i.obj) }}：{{ i.text }}
65 |       </n-ellipsis>
66 |       <n-space style="color:var(--text-color-3);font-size:14px;">
67 |         {{ subscriptionLevels[i.level] }} 于 {{ FormatTime(i.subscription_time) }}
68 |         <n-button v-if="i.obj" @click="router.push(GetObjUrl(i.obj))" text>查看></n-button>
69 |       </n-space>
70 |     </n-card>
71 |     <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ subscriptions.list.length }}条</n-divider>
72 |     <n-button block @click="LoadSubscriptions()" :disabled="subscriptions.end" :loading="subscriptions.loading">
73 |       {{ subscriptions.end ? '木有更多了' : '加载更多' }}</n-button>
74 |     <n-divider></n-divider>
75 |   </div>
76 | </template>


--------------------------------------------------------------------------------
/src/views/User.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Author: flwfdd
  3 |  * @Date: 2022-06-01 14:21:01
  4 |  * @LastEditTime: 2024-02-26 16:33:36
  5 |  * @Description: 用户中心
  6 |  * _(:з」∠)_
  7 | -->
  8 | <script setup lang="ts">
  9 | import { FormatTime, OpenLink, hitokoto, setTitle } from '@/utils/tools';
 10 | import http from '@/utils/request';
 11 | import { onActivated, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 12 | import { onBeforeRouteLeave, onBeforeRouteUpdate, routerKey, useRoute } from 'vue-router';
 13 | import store from '@/utils/store';
 14 | import { UploadFileInfo } from 'naive-ui';
 15 | import { User } from '@/utils/types';
 16 | import Avatar from '@/components/Avatar.vue';
 17 | import { PostersStatus } from '@/components/Posters.vue';
 18 | 
 19 | const route = useRoute();
 20 | 
 21 | interface UserInfo {
 22 |   user: User; // 用户
 23 |   following: boolean; // 我是否关注
 24 |   follower: boolean; // 是否关注我
 25 |   following_num: number; // 关注数量
 26 |   follower_num: number; // 粉丝数量
 27 |   own: boolean; // 是否是自己
 28 | }
 29 | 
 30 | const user_info = ref({} as UserInfo);
 31 | function GetInfo(uid: any) {
 32 |   http.get("/user/info/" + uid)
 33 |     .then(res => {
 34 |       user_info.value = res.data;
 35 |       if (user_info.value.user.id) setTitle(user_info.value.user.nickname, "用户");
 36 |     })
 37 | }
 38 | 
 39 | // 编辑信息
 40 | const edit_info = reactive({
 41 |   modal: false,
 42 |   avatar_mid: "",
 43 |   avatar_url: "",
 44 |   nickname: "",
 45 |   motto: ""
 46 | })
 47 | 
 48 | // 上传头像用
 49 | const upload_url = store.api_url + "/upload/image";
 50 | const upload_head = {
 51 |   'fake-cookie': store.fake_cookie
 52 | }
 53 | 
 54 | function UploadHandler({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) {
 55 |   let res = (event.target as XMLHttpRequest);
 56 |   let data = JSON.parse(res.response);
 57 |   edit_info.avatar_mid = data.mid;
 58 |   edit_info.avatar_url = data.low_url;
 59 |   window.$message.success("上传成功OvO");
 60 | }
 61 | 
 62 | function UploadErrorHandler({ file, event }: { file: UploadFileInfo, event: ProgressEvent }) {
 63 |   let res = JSON.parse((event.target as XMLHttpRequest).response);
 64 |   if (res && res.msg) {
 65 |     window.$message.error(res.msg);
 66 |   }
 67 | }
 68 | 
 69 | function OpenEditInfo() {
 70 |   edit_info.avatar_url = user_info.value.user.avatar.low_url;
 71 |   edit_info.nickname = user_info.value.user.nickname;
 72 |   edit_info.motto = user_info.value.user.motto;
 73 |   edit_info.modal = true;
 74 | }
 75 | 
 76 | function EditInfo() {
 77 |   http.put("/user/info", {
 78 |     avatar_mid: edit_info.avatar_mid,
 79 |     nickname: edit_info.nickname,
 80 |     motto: edit_info.motto
 81 |   }).then(() => {
 82 |     GetInfo(route.params.id);
 83 |     edit_info.modal = false;
 84 |   })
 85 | }
 86 | 
 87 | // 关注和取关操作
 88 | const follow_loading = ref(false);
 89 | function Follow() {
 90 |   if (follow_loading.value) return;
 91 |   follow_loading.value = true;
 92 |   http.post("/user/follow/" + user_info.value.user.id).then(res => {
 93 |     user_info.value.following = res.data.following;
 94 |     user_info.value.follower = res.data.follower;
 95 |     user_info.value.following_num = res.data.following_num;
 96 |     user_info.value.follower_num = res.data.follower_num;
 97 |     window.$message.success(res.data.following ? "关注成功OvO" : "取关成功OvO");
 98 |     follow_loading.value = false;
 99 |   }).catch(() => { follow_loading.value = false; })
100 | }
101 | 
102 | const follows = reactive({
103 |   type: "",
104 |   title: "",
105 |   modal: false,
106 |   loading: false,
107 |   end: false,
108 |   page: 0,
109 |   list: [] as User[]
110 | });
111 | 
112 | function GetFollowList() {
113 |   if (follows.loading) return;
114 |   follows.loading = true;
115 |   http.get("/user/" + follows.type, {
116 |     params: {
117 |       page: follows.page
118 |     }
119 |   }).then(res => {
120 |     if (res.data.length == 0) follows.end = true;
121 |     follows.list = follows.list.concat(res.data);
122 |     follows.page++;
123 |     follows.loading = false;
124 |   }).catch(() => { follows.loading = false; })
125 | }
126 | 
127 | function ShowFollowingList() {
128 |   if (route.params.id != '0') {
129 |     window.$message.error("只能查看自己的关注列表Orz");
130 |     return;
131 |   }
132 |   follows.type = "followings";
133 |   follows.title = "关注列表";
134 |   follows.page = 0;
135 |   follows.list = [];
136 |   follows.end = false;
137 |   GetFollowList();
138 |   follows.modal = true;
139 | }
140 | 
141 | const follower_list = ref([] as User[]);
142 | function ShowFollowerList() {
143 |   if (route.params.id != '0') {
144 |     window.$message.error("只能查看自己的粉丝列表Orz");
145 |     return;
146 |   }
147 |   follows.type = "followers";
148 |   follows.title = "粉丝列表";
149 |   follows.page = 0;
150 |   follows.list = [];
151 |   follows.end = false;
152 |   GetFollowList();
153 |   follows.modal = true;
154 | }
155 | 
156 | // 帖子
157 | const posters = ref({
158 |   mode: 'search',
159 |   search: "",
160 |   order: "new",
161 |   uid: -1
162 | } as PostersStatus
163 | );
164 | 
165 | 
166 | // 切换视角
167 | function Switch() {
168 |   if (route.params.id == '0') {
169 |     OpenLink('/user/' + user_info.value.user.id);
170 |     window.$message.success("已切换到访客视角OvO");
171 |   }
172 |   else {
173 |     OpenLink('/user/0');
174 |     window.$message.success("已切换到个人中心OvO");
175 |   }
176 | }
177 | 
178 | onMounted(() => {
179 |   GetInfo(route.params.id);
180 |   posters.value.uid = Number(route.params.id);
181 | })
182 | 
183 | 
184 | // 监听路由变化 重新加载数据
185 | const last_uid = ref(route.params.id);
186 | watch(() => route.params.id, () => {
187 |   if (!route.path.startsWith("/user/")) return;
188 |   if (last_uid.value == route.params.id && route.params.id != '0') return;
189 |   last_uid.value = route.params.id;
190 |   GetInfo(route.params.id);
191 |   posters.value.uid = Number(route.params.id);
192 | })
193 | 
194 | </script>
195 | 
196 | <template>
197 |   <div class="container">
198 |     <n-card title="你好鸭ヾ(´▽｀))" v-if="user_info.user">
199 |       <div style="display: flex;justify-content: space-between;align-items: center;">
200 |         <div style="display: flex;align-items: center;">
201 |           <div>
202 |             <Avatar :user="user_info.user" round :size="42" preview />
203 |           </div>
204 |           <span style="margin-left: 4px;">
205 |             <div style="font-size: 17px;">{{ user_info.user.nickname }}</div>
206 |             <div style="margin-top: -4px;">uid:{{ user_info.user.id }}</div>
207 |           </span>
208 |         </div>
209 | 
210 |         <n-popconfirm v-if="user_info.following" @positive-click="Follow" :show-icon="false" positive-text="确定"
211 |           negative-text="取消">
212 |           <template #trigger>
213 |             <n-button :loading="follow_loading" :disabled="follow_loading">
214 |               {{ user_info.following ? (user_info.follower ? '已互粉' : '已关注') : '关注' }}
215 |             </n-button>
216 |           </template>
217 |           汝真取关耶？
218 |         </n-popconfirm>
219 |         <n-button v-else @click="Follow" :loading="follow_loading" :disabled="follow_loading">
220 |           {{ user_info.following ? (user_info.follower ? '已互粉' : '已关注') : '关注' }}
221 |         </n-button>
222 |       </div>
223 | 
224 | 
225 |       <n-space>
226 |         <n-tag round :bordered="false" size="small"
227 |           :color="{ color: user_info.user.identity.color ? user_info.user.identity.color : 'var(--primary-color)', textColor: '#FFF' }">
228 |           {{ user_info.user.identity.text }}
229 |         </n-tag>
230 |         <n-tag @click="ShowFollowingList" round :bordered="false" size="small"
231 |           :color="{ color: 'var(--primary-color)', textColor: '#FFF' }" style="cursor:pointer">
232 |           {{ user_info.following_num }}关注
233 |         </n-tag>
234 |         <n-tag @click="ShowFollowerList" round :bordered="false" size="small"
235 |           :color="{ color: 'var(--primary-color)', textColor: '#FFF' }" style="cursor:pointer">
236 |           {{ user_info.follower_num }}粉丝
237 |         </n-tag>
238 |       </n-space>
239 | 
240 |       <n-alert title="格言/简介" type="info" :show-icon="false" style="white-space:pre-wrap;margin-top: 14px;">
241 |         {{ user_info.user.motto }}
242 |       </n-alert>
243 |       <p style="color:var(--text-color-3);font-size:14px;">于 {{ FormatTime(user_info.user.create_time) }} 来到BIT101</p>
244 |       <n-button v-if="route.params.id == '0'" @click="OpenEditInfo" block>编辑信息</n-button>
245 |       <n-button v-if="user_info.own" @click="Switch" block style="margin-top: 8px;">{{
246 |         route.params.id == '0' ? '切换到访客视角' : '切换到个人中心' }}</n-button>
247 |     </n-card>
248 | 
249 |     <br />
250 | 
251 |     <Posters v-if="posters.uid != -1" :value="posters" />
252 | 
253 |     <n-modal :show="edit_info.modal">
254 |       <n-card style="width: 600px" title="编辑信息">
255 |         <n-avatar size="large" round :src="edit_info.avatar_url" />
256 |         <n-upload :action="upload_url" :headers="upload_head" @finish="UploadHandler" @error="UploadErrorHandler"
257 |           :max="1">
258 |           <n-button block>上传头像</n-button>
259 |         </n-upload>
260 | 
261 |         <p style="margin-bottom: 0;">昵称</p>
262 |         <n-input v-model:value="edit_info.nickname" maxlength="24"></n-input>
263 | 
264 |         <p style="margin-bottom: 0;">格言/简介</p>
265 |         <n-input v-model:value="edit_info.motto" type="textarea" maxlength="23333" show-count></n-input>
266 | 
267 |         <template #footer>
268 |           <n-space>
269 |             <n-button @click="EditInfo" type="success" ghost>提交</n-button>
270 |             <n-button @click="edit_info.modal = false" type="error" ghost>取消</n-button>
271 |           </n-space>
272 |         </template>
273 |       </n-card>
274 |     </n-modal>
275 | 
276 |     <n-modal v-model:show="follows.modal" preset="card" :title="follows.title" style="width:600px;">
277 |       <n-scrollbar style="max-height:75vh">
278 |         <n-space vertical>
279 |           <template v-for="user in follows.list">
280 |             <div style="display:flex;align-items:center;cursor:pointer" @click="follows.modal=false;OpenLink('/user/' + user.id);">
281 |               <Avatar :user="user" :size="36" />
282 |               <div style="margin-left: 4px;">
283 |                 <div style="font-size: 16px;margin-top:-4px;">{{ user.nickname }}</div>
284 |                 <div style="margin-top: -4px;font-size:14px;">uid:{{ user.id }}</div>
285 |               </div>
286 |             </div>
287 |             <n-divider style="margin:0px;"></n-divider>
288 |           </template>
289 |         </n-space>
290 |         <n-divider style="color:var(--text-color-3);font-size:14px;">已加载{{ follows.list.length }}条</n-divider>
291 |         <n-button block @click="GetFollowList" :disabled="follows.end" :loading="follows.loading">
292 |           {{ follows.end ? '木有更多了' : '加载更多' }}</n-button>
293 |       </n-scrollbar>
294 |     </n-modal>
295 |   </div>
296 | </template>


--------------------------------------------------------------------------------
/src/views/admin/Billboard.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-31 22:43:32
 4 |  * @LastEditTime: 2024-02-26 17:09:08
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import http from '@/utils/request';
10 | import { onMounted, reactive } from 'vue';
11 | import Billboard from '@/components/Billboard.vue';
12 | 
13 | 
14 | const billboard_item_template = {
15 |   "title": "",
16 |   "text":"",
17 |   "url": "",
18 |   "img":"",
19 | }
20 | 
21 | const billboard = reactive({
22 |   input: "",
23 |   preview: [],
24 | })
25 | 
26 | function Add() {
27 |   let x = JSON.parse(billboard.input);
28 |   x.push(billboard_item_template);
29 |   billboard.input = JSON.stringify(x, null, 2);
30 | }
31 | 
32 | function Preview() {
33 |   billboard.preview=JSON.parse(billboard.input);
34 | }
35 | 
36 | function Load() {
37 |   http.get("/variables?obj=billboard").then((res) => {
38 |     billboard.preview = JSON.parse(res.data.data);
39 |     billboard.input = JSON.stringify(billboard.preview, null, 2);
40 |   })
41 | }
42 | 
43 | function Submit() {
44 |   http.post("/variables", {
45 |     obj: 'billboard',
46 |     data: JSON.stringify(billboard.preview),
47 |   })
48 | }
49 | 
50 | onMounted(() => { Load() })
51 | 
52 | </script>
53 | 
54 | <template>
55 |   <div class="container">
56 |     <n-space vertical>
57 |       <h2>橱窗设置</h2>
58 |       <Billboard :data="billboard.preview"></Billboard>
59 |       <n-input v-model:value="billboard.input" type="textarea" placeholder="JSON" rows="11" />
60 |       <n-button @click="Add" block>添加</n-button>
61 |       <n-button @click="Preview" block>预览</n-button>
62 |       <n-button @click="Submit" block>提交</n-button>
63 |     </n-space>
64 |   </div>
65 | 
66 | </template>


--------------------------------------------------------------------------------
/src/views/admin/Carousel.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-07-28 13:12:52
 4 |  * @LastEditTime: 2024-02-26 17:09:21
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 | -->
 8 | <script setup lang="ts">
 9 | import http from '@/utils/request';
10 | import { OpenLink } from '@/utils/tools';
11 | import { onMounted, reactive } from 'vue';
12 | 
13 | 
14 | const carousel_item_template = {
15 |   "img": "",
16 |   "url": "",
17 | }
18 | 
19 | const carousel = reactive({
20 |   input: "",
21 |   preview: [],
22 | })
23 | 
24 | function Add() {
25 |   let x = JSON.parse(carousel.input);
26 |   x.push(carousel_item_template);
27 |   carousel.input = JSON.stringify(x, null, 2);
28 | }
29 | 
30 | function Preview() {
31 |   carousel.preview = JSON.parse(carousel.input);
32 | }
33 | 
34 | function Load() {
35 |   http.get("/variables?obj=carousel").then((res) => {
36 |     carousel.preview = JSON.parse(res.data.data);
37 |     carousel.input = JSON.stringify(carousel.preview, null, 2);
38 |   })
39 | }
40 | 
41 | function Submit() {
42 |   http.post("/variables", {
43 |     obj: 'carousel',
44 |     data: JSON.stringify(carousel.preview),
45 |   })
46 | }
47 | 
48 | 
49 | onMounted(() => { Load() })
50 | 
51 | </script>
52 | 
53 | <template>
54 |   <div class="container">
55 |     <n-space vertical>
56 |       <h2>轮播图设置</h2>
57 |       <n-carousel autoplay show-arrow style="border-radius:11px;">
58 |         <img v-for="i in carousel.preview" @click="OpenLink(i['url'])" :src="i['img']"
59 |           style="width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;"
60 |           :style="{ 'cursor': i['url'] ? 'pointer' : 'auto' }">
61 |       </n-carousel>
62 |       <n-input v-model:value="carousel.input" type="textarea" placeholder="JSON" rows="11" />
63 |       <n-button @click="Add" block>添加</n-button>
64 |       <n-button @click="Preview" block>预览</n-button>
65 |       <n-button @click="Submit" block>提交</n-button>
66 |     </n-space>
67 |   </div>
68 | 
69 | </template>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": [
14 |       "esnext",
15 |       "dom",
16 |       "WebWorker"
17 |     ],
18 |     "skipLibCheck": true,
19 |     "baseUrl": ".",
20 |     "paths": {
21 |       "@/*": [
22 |         "src/*"
23 |       ]
24 |     },
25 |     "allowJs": true,
26 |   },
27 |   "include": [
28 |     "src/**/*.ts",
29 |     "src/**/*.d.ts",
30 |     "src/**/*.tsx",
31 |     "src/**/*.vue"
32 |   ],
33 |   "references": [
34 |     {
35 |       "path": "./tsconfig.node.json"
36 |     }
37 |   ],
38 | }


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


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: flwfdd
 3 |  * @Date: 2022-05-28 00:01:07
 4 |  * @LastEditTime: 2023-11-02 00:41:16
 5 |  * @Description: 
 6 |  * _(:з」∠)_
 7 |  */
 8 | import { defineConfig } from 'vite'
 9 | import vue from '@vitejs/plugin-vue'
10 | import Components from 'unplugin-vue-components/vite'
11 | import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
12 | import { resolve } from 'path'
13 | import { VitePWA } from 'vite-plugin-pwa'
14 | 
15 | // https://vitejs.dev/config/
16 | export default defineConfig({
17 |   plugins: [
18 |     vue(),
19 |     Components({
20 |       resolvers: [NaiveUiResolver()],
21 |     }),
22 |     VitePWA({
23 |       srcDir: 'src',
24 |       filename: 'sw.ts',
25 |       registerType: "autoUpdate",
26 |       strategies: 'injectManifest',
27 |       workbox: {
28 |         clientsClaim: true,
29 |         skipWaiting: true,
30 |         runtimeCaching: [
31 |           {
32 |             urlPattern: /(.*?)\.(js|css|ts)/, // js /css /ts静态资源缓存
33 |             handler: 'CacheFirst',
34 |             options: {
35 |               cacheName: 'js-css-cache',
36 |             },
37 |           },
38 |           {
39 |             urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps|avif)/, // 图片缓存
40 |             handler: 'CacheFirst',
41 |             options: {
42 |               cacheName: 'image-cache',
43 |             },
44 |           },
45 |         ],
46 |       },
47 |       includeAssets: ["favicon.ico", "pwa-192x192.png", "pwa-512x512.png"],
48 |       manifest: {
49 |         name: "BIT101",
50 |         short_name: "BIT101",
51 |         description: "BIT101校园社区",
52 |         theme_color: "#FF9A57",
53 |         icons: [
54 |           {
55 |             src: "pwa-96x96.png",
56 |             sizes: "96x96",
57 |             type: "image/png",
58 |           },
59 |           {
60 |             src: "pwa-192x192.png",
61 |             sizes: "192x192",
62 |             type: "image/png",
63 |           },
64 |           {
65 |             src: "pwa-512x512.png",
66 |             sizes: "512x512",
67 |             type: "image/png",
68 |           },
69 |           {
70 |             src: "pwa-512x512.png",
71 |             sizes: "512x512",
72 |             type: "image/png",
73 |             purpose: "maskable",
74 |           },
75 |           {
76 |             src: "pwa-512x512.png",
77 |             sizes: "512x512",
78 |             type: "image/png",
79 |             purpose: "any maskable",
80 |           },
81 |         ],
82 |       },
83 |       devOptions: {
84 |         enabled: true,
85 |         type: "module"
86 |       }
87 |     }),
88 |   ],
89 |   resolve: {
90 |     alias: {
91 |       "@": resolve(__dirname, "src"),
92 |     },
93 |   },
94 |   server: {
95 |     port: 3000,
96 |   },
97 | });
98 | 


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