(
47 | url: string,
48 | params?: T,
49 | config?: PureHttpRequestConfig
50 | ): Promise;
51 | get(
52 | url: string,
53 | params?: T,
54 | config?: PureHttpRequestConfig
55 | ): Promise;
56 | }
57 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/utils/mitt.ts:
--------------------------------------------------------------------------------
1 | import type { Emitter } from "mitt";
2 | import mitt from "mitt";
3 |
4 | type Events = {
5 | resize: {
6 | detail: {
7 | width: number;
8 | height: number;
9 | };
10 | };
11 | openPanel: string;
12 | tagViewsChange: string;
13 | tagViewsShowModel: string;
14 | logoChange: boolean;
15 | changLayoutRoute: {
16 | indexPath: string;
17 | parentPath: string;
18 | };
19 | };
20 |
21 | export const emitter: Emitter = mitt();
22 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/utils/progress/index.ts:
--------------------------------------------------------------------------------
1 | import NProgress from "nprogress";
2 | import "nprogress/nprogress.css";
3 |
4 | NProgress.configure({
5 | // 动画方式
6 | easing: "ease",
7 | // 递增进度条的速度
8 | speed: 500,
9 | // 是否显示加载ico
10 | showSpinner: false,
11 | // 自动递增间隔
12 | trickleSpeed: 200,
13 | // 初始化时的最小百分比
14 | minimum: 0.3
15 | });
16 |
17 | export default NProgress;
18 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/utils/propTypes.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties, VNodeChild } from "vue";
2 | import { createTypes, VueTypeValidableDef, VueTypesInterface } from "vue-types";
3 |
4 | export type VueNode = VNodeChild | JSX.Element;
5 |
6 | type PropTypes = VueTypesInterface & {
7 | readonly style: VueTypeValidableDef;
8 | readonly VNodeChild: VueTypeValidableDef;
9 | };
10 |
11 | const propTypes = createTypes({
12 | func: undefined,
13 | bool: undefined,
14 | string: undefined,
15 | number: undefined,
16 | object: undefined,
17 | integer: undefined
18 | }) as PropTypes;
19 |
20 | propTypes.extend([
21 | {
22 | name: "style",
23 | getter: true,
24 | type: [String, Object],
25 | default: undefined
26 | },
27 | {
28 | name: "VNodeChild",
29 | getter: true,
30 | type: undefined
31 | }
32 | ]);
33 |
34 | export { propTypes };
35 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/utils/responsive.ts:
--------------------------------------------------------------------------------
1 | // 响应式storage
2 | import { App } from "vue";
3 | import Storage from "responsive-storage";
4 | import { routerArrays } from "@/layout/types";
5 |
6 | const nameSpace = "responsive-";
7 |
8 | export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
9 | const configObj = Object.assign(
10 | {
11 | // layout模式以及主题
12 | layout: Storage.getData("layout", nameSpace) ?? {
13 | layout: config.Layout ?? "vertical",
14 | theme: config.Theme ?? "default",
15 | darkMode: config.DarkMode ?? false,
16 | sidebarStatus: config.SidebarStatus ?? true,
17 | epThemeColor: config.EpThemeColor ?? "#409EFF"
18 | },
19 | configure: Storage.getData("configure", nameSpace) ?? {
20 | grey: config.Grey ?? false,
21 | weak: config.Weak ?? false,
22 | hideTabs: config.HideTabs ?? false,
23 | showLogo: config.ShowLogo ?? true,
24 | showModel: config.ShowModel ?? "smart",
25 | multiTagsCache: config.MultiTagsCache ?? false
26 | }
27 | },
28 | config.MultiTagsCache
29 | ? {
30 | // 默认显示首页tag
31 | tags: Storage.getData("tags", nameSpace) ?? routerArrays
32 | }
33 | : {}
34 | );
35 |
36 | app.use(Storage, { nameSpace, memory: configObj });
37 | };
38 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/utils/sso.ts:
--------------------------------------------------------------------------------
1 | import { removeToken, setToken, type DataInfo } from "./auth";
2 | import { subBefore, getQueryMap } from "@pureadmin/utils";
3 |
4 | /**
5 | * 简版前端单点登录，根据实际业务自行编写
6 | * 划重点：
7 | * 判断是否为单点登录，不为则直接返回不再进行任何逻辑处理，下面是单点登录后的逻辑处理
8 | * 1.清空本地旧信息；
9 | * 2.获取url中的重要参数信息，然后通过 setToken 保存在本地；
10 | * 3.删除不需要显示在 url 的参数
11 | * 4.使用 window.location.replace 跳转正确页面
12 | */
13 | (function () {
14 | // 获取 url 中的参数
15 | const params = getQueryMap(location.href) as DataInfo;
16 | const must = ["username", "roles", "accessToken"];
17 | const mustLength = must.length;
18 | if (Object.keys(params).length !== mustLength) return;
19 |
20 | // url 参数满足 must 里的全部值，才判定为单点登录，避免非单点登录时刷新页面无限循环
21 | let sso = [];
22 | let start = 0;
23 |
24 | while (start < mustLength) {
25 | if (Object.keys(params).includes(must[start]) && sso.length <= mustLength) {
26 | sso.push(must[start]);
27 | } else {
28 | sso = [];
29 | }
30 | start++;
31 | }
32 |
33 | if (sso.length === mustLength) {
34 | // 判定为单点登录
35 |
36 | // 清空本地旧信息
37 | removeToken();
38 |
39 | // 保存新信息到本地
40 | setToken(params);
41 |
42 | // 删除不需要显示在 url 的参数
43 | delete params["roles"];
44 | delete params["accessToken"];
45 |
46 | const newUrl = `${location.origin}${location.pathname}${subBefore(
47 | location.hash,
48 | "?"
49 | )}?${JSON.stringify(params)
50 | .replace(/["{}]/g, "")
51 | .replace(/:/g, "=")
52 | .replace(/,/g, "&")}`;
53 |
54 | // 替换历史记录项
55 | window.location.replace(newUrl);
56 | } else {
57 | return;
58 | }
59 | })();
60 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/views/article/add-edit-article/validator.ts:
--------------------------------------------------------------------------------
1 | export const tagV = (rule, value, cb) => {
2 | if (!value.length) {
3 | return cb(new Error("请选择标签"));
4 | }
5 | cb();
6 | };
7 |
8 | export const coverV = (rule, value, cb) => {
9 | if (!value.length) {
10 | return cb(new Error("请先上传封面"));
11 | }
12 | cb();
13 | };
14 |
--------------------------------------------------------------------------------
/blog-v3-admin/src/views/error/404.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
24 | 404
25 |
26 |
41 | 抱歉，你访问的页面不存在
42 |
43 |
59 | 返回首页
60 |
61 |
62 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/blog-v3/src/components/Layout/main/blog-main.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/blog-v3/src/components/Music/controls/components/blogAvatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrzym99/vue3-blog/42c6177d254d2760180d08b1d560d083642291ea/blog-v3/src/components/Music/controls/components/blogAvatar.png
--------------------------------------------------------------------------------
/blog-v3/src/components/Music/list/components/special-title.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
27 | {{ title }}
28 |
29 |
30 |
31 |
41 |
--------------------------------------------------------------------------------
/blog-v3/src/components/RightSide/components/item/right-side-item.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ props.title }}
5 |
6 |
7 |
8 |
28 |
40 |
--------------------------------------------------------------------------------
/blog-v3/src/components/RightSide/components/skeleton/mobile-top-skeleton.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/blog-v3/src/components/RightSide/components/skeleton/right-side-skeleton-item.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/blog-v3/src/components/RightSide/components/skeleton/right-side-top-skeleton.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/blog-v3/src/components/SkeletonItem/skeleton-item.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
29 |
--------------------------------------------------------------------------------
/blog-v3/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
39 |
40 |
47 |
48 |
49 |
56 |
--------------------------------------------------------------------------------
/blog-v3/src/components/SwitchTheme/index.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/blog-v3/src/config/config.js:
--------------------------------------------------------------------------------
1 | export const config = {
2 | ENCRYPTION: true,
3 | };
4 |
--------------------------------------------------------------------------------
/blog-v3/src/directives/copy.js:
--------------------------------------------------------------------------------
1 | import { ElMessage } from "element-plus";
2 |
3 | const vCopy = {
4 | beforeMount(el, binding) {
5 | el.targetContent = binding.value;
6 | el.addEventListener("click", () => {
7 | if (!el.targetContent) return console.warn("没有需要复制的目标内容");
8 | // 创建textarea标签
9 | const textarea = document.createElement("textarea");
10 | // 设置相关属性
11 | textarea.readOnly = "readonly";
12 | textarea.style.position = "fixed";
13 | textarea.style.top = "-99999px";
14 | // 把目标内容赋值给它的value属性
15 | textarea.value = el.targetContent;
16 | // 插入到页面
17 | document.body.appendChild(textarea);
18 | // 调用onselect()方法
19 | textarea.select();
20 | // 把目标内容复制进剪贴板, 该API会返回一个Boolean
21 | const res = document.execCommand("Copy");
22 | res && ElMessage.info("复制成功，剪贴板内容：" + el.targetContent);
23 | // 移除textarea标签
24 | document.body.removeChild(textarea);
25 | });
26 | },
27 | updated(el, binding) {
28 | // 实时更新最新的目标内容
29 | el.targetContent = binding.value;
30 | },
31 | unmounted(el) {
32 | el.removeEventListener("click", () => {});
33 | },
34 | };
35 |
36 | export default vCopy;
37 |
--------------------------------------------------------------------------------
/blog-v3/src/directives/imageLoading.js:
--------------------------------------------------------------------------------
1 | const image = {
2 | beforeMount(el, binding) {
3 | if (!binding.value) return;
4 | var img = new Image();
5 | img.src = binding.value;
6 | // 创建一个loading的img标签
7 | let cup = document.createElement("div");
8 | cup.classList.add("coffee_cup");
9 | el.appendChild(cup); // 插入dom
10 |
11 | img.onload = () => {
12 | el.removeChild(cup); // 加载成功移除loading
13 | };
14 |
15 | img.onerror = () => {
16 | el.removeChild(cup); // 加载失败移除loading 展示el自定义的错误
17 | };
18 | },
19 | };
20 | export default image;
21 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/comment.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/darkDisc.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/delete.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/lightDisc.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/lightRocket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/icons/svg/user.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/blog-v3/src/main.js:
--------------------------------------------------------------------------------
1 | import App from "./App.vue";
2 | import { createApp } from "vue";
3 | import router from "./router";
4 | import { createPinia } from "pinia"; //引入pinia
5 | import "./assets/css/iconFont/iconfont.css";
6 | import "element-plus/dist/index.css"; // 引入样式
7 | import "element-plus/theme-chalk/dark/css-vars.css";
8 | import piniaPluginPersist from "pinia-plugin-persist";
9 | // animate
10 | import "animate.css";
11 | // tailwind.css https://www.tailwindcss.cn/docs
12 | import "./styles/tailwind.css";
13 | // svg
14 | import "virtual:svg-icons-register";
15 | // 指令
16 | import vCopy from "./directives/copy";
17 | import image from "./directives/imageLoading";
18 |
19 | const app = createApp(App);
20 | app.directive("copy", vCopy);
21 | app.directive("image", image);
22 | app.use(router).use(createPinia().use(piniaPluginPersist)).mount("#app");
23 |
--------------------------------------------------------------------------------
/blog-v3/src/styles/markdown.scss:
--------------------------------------------------------------------------------
1 | // 对于markdown样式的调整
2 | .md-preview-v3 {
3 | background: rgba(255, 255, 255, 0.3);
4 | }
5 |
6 | .code-block::scrollbar-thumb {
7 | background-color: #efbcda !important;
8 | }
9 | .code-block::-webkit-scrollbar-thumb {
10 | background-color: #efbcda !important;
11 | }
12 |
--------------------------------------------------------------------------------
/blog-v3/src/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/blog-v3/src/styles/transition.scss:
--------------------------------------------------------------------------------
1 | // 进入前
2 | .component-enter-from,
3 | .component-leave-to {
4 | opacity: 0;
5 | }
6 | .component-enter-to,
7 | .component-leave-from {
8 | opacity: 1;
9 | }
10 |
11 | // 设置进入和离开过程中的动画时长0.5s
12 | .component-enter-active,
13 | .component-leave-active {
14 | transition: all 0.6s;
15 | }
16 |
17 | // 进入前
18 | .main-enter-from,
19 | .main-leave-to {
20 | transform: translateX(-10px);
21 | }
22 | .main-enter-to,
23 | .main-leave-from {
24 | transform: translateX(0);
25 | }
26 |
27 | // 设置进入和离开过程中的动画时长0.5s
28 | .main-enter-active,
29 | .main-leave-active {
30 | transition: all 0.6s;
31 | }
32 |
--------------------------------------------------------------------------------
/blog-v3/src/utils/encipher.js:
--------------------------------------------------------------------------------
1 | import CryptoJS from "crypto-js";
2 |
3 | // 十六位十六进制数作为密钥
4 | const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234567812345678");
5 | // 十六位十六进制数作为密钥偏移量
6 | const SECRET_IV = CryptoJS.enc.Utf8.parse("1234567812345678");
7 |
8 | /**
9 | * 加密方法
10 | * @param data
11 | * @returns {string}
12 | */
13 | export function _encrypt(data) {
14 | if (typeof data === "object") {
15 | try {
16 | // eslint-disable-next-line no-param-reassign
17 | data = JSON.stringify(data);
18 | } catch (error) {
19 | console.log("encrypt error:", error);
20 | }
21 | }
22 | const dataHex = CryptoJS.enc.Utf8.parse(data);
23 | const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
24 | iv: SECRET_IV,
25 | mode: CryptoJS.mode.CBC,
26 | padding: CryptoJS.pad.Pkcs7,
27 | });
28 | return encrypted.ciphertext.toString();
29 | }
30 |
31 | /**
32 | * 解密方法
33 | * @param data
34 | * @returns {string}
35 | */
36 | export function _decrypt(data) {
37 | const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
38 | const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
39 | const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
40 | iv: SECRET_IV,
41 | mode: CryptoJS.mode.CBC,
42 | padding: CryptoJS.pad.Pkcs7,
43 | });
44 | const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
45 | return decryptedStr.toString();
46 | }
47 |
--------------------------------------------------------------------------------
/blog-v3/src/utils/enum.js:
--------------------------------------------------------------------------------
1 | export const MODELLIST = [
2 | "RANDOM", // 随机
3 | "LISTLOOP", // 列表循环
4 | "SINGLECYCLE", // 单曲循环
5 | ];
6 |
7 | export const PLAYTYPE = {
8 | CUSTOM: "CUSTOM", // 播放用户添加的歌曲
9 | TOP: "TOP", // 当前歌曲排行榜列表歌曲
10 | };
11 |
12 | export const LYRICTYPE = {
13 | COMMON: "COMMON",
14 | SPECIAL: "SPECIAL",
15 | };
16 |
--------------------------------------------------------------------------------
/blog-v3/src/views/404/index.vue:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
27 |
28 | 返回上一页
29 | 返回首页
32 |
33 |
{{ 5 - time }} 秒后自动返回首页......
34 |
35 |
36 |
46 |
47 |
48 |
49 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
69 |
--------------------------------------------------------------------------------
/blog-v3/src/views/message/useMessage.js:
--------------------------------------------------------------------------------
1 | // 字体大小列表
2 | export const fontSizeList = [
3 | {
4 | key: 12,
5 | },
6 | {
7 | key: 14,
8 | },
9 | {
10 | key: 16,
11 | },
12 | {
13 | key: 18,
14 | },
15 | {
16 | key: 20,
17 | },
18 | {
19 | key: 22,
20 | },
21 | {
22 | key: 24,
23 | },
24 | {
25 | key: 28,
26 | },
27 | {
28 | key: 32,
29 | },
30 | {
31 | key: 36,
32 | },
33 | ];
34 | // 字体宽度
35 | export const fontWeightList = [
36 | {
37 | key: 400,
38 | },
39 | {
40 | key: 500,
41 | },
42 | {
43 | key: 600,
44 | },
45 | {
46 | key: 700,
47 | },
48 | {
49 | key: 800,
50 | },
51 | {
52 | key: 900,
53 | },
54 | ];
55 | // 背景色列表
56 | export const predefineColors = [
57 | "#ff4500",
58 | "#ff8c00",
59 | "#ffd700",
60 | "#90ee90",
61 | "#00ced1",
62 | "#1e90ff",
63 | "#c71585",
64 | "rgba(255, 69, 0, 0.68)",
65 | "rgb(255, 120, 0)",
66 | "hsv(51, 100, 98)",
67 | "hsva(120, 40, 94, 0.5)",
68 | "hsl(181, 100%, 37%)",
69 | "hsla(209, 100%, 56%, 0.73)",
70 | "#c7158577",
71 | ];
72 | // 选项
73 | export const opTabList = [
74 | {
75 | key: 0,
76 | label: "背景颜色",
77 | },
78 | {
79 | key: 1,
80 | label: "字体",
81 | },
82 | {
83 | key: 2,
84 | label: "背景图片",
85 | },
86 | {
87 | key: 3,
88 | label: "标签",
89 | },
90 | ];
91 | // 渐变色列表
92 | export const gradientList = [];
93 |
--------------------------------------------------------------------------------
/blog-v3/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
4 | theme: {
5 | extend: {},
6 | colors: {
7 | "primary-blue": "#5cbfef",
8 | },
9 | },
10 | corePlugins: {
11 | preflight: false,
12 | },
13 | plugins: [],
14 | };
15 |
--------------------------------------------------------------------------------
/zhifupay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrzym99/vue3-blog/42c6177d254d2760180d08b1d560d083642291ea/zhifupay.png
--------------------------------------------------------------------------------
36 | 
37 |