7 |
17 | );
18 | };
19 |
20 | export default AvatarData;
21 |
--------------------------------------------------------------------------------
/src/components/D3/Collision/index.tsx:
--------------------------------------------------------------------------------
1 | import * as d3 from "d3";
2 | import { useEffect, useRef } from "react";
3 |
4 | const width = 600;
5 | const height = 300;
6 |
7 | const createData = () => {
8 | const k = width / 200;
9 | const r = d3.randomUniform(k, k * 4);
10 | const n = 4;
11 | return Array.from({ length: 200 }, (_, i) => ({
12 | r: r(),
13 | group: i && (i % n) + 1
14 | }));
15 | };
16 | const data = createData();
17 | const nodes = data.map(Object.create);
18 |
19 | const Collision = () => {
20 | const svgRef = useRef
8 |
10 |
11 |
16 |
12 | {info?.nick}
13 |
14 | {info?.signature}
15 |
6 |
44 | );
45 | };
46 |
47 | export default FineDay;
48 |
--------------------------------------------------------------------------------
/src/components/Footer/Copyright/index.module.scss:
--------------------------------------------------------------------------------
1 | .copyright {
2 | height: 20px;
3 | padding-right: 12px;
4 | text-align: right;
5 | }
6 |
7 | .link {
8 | color: #1677ff;
9 | &:active {
10 | color: #1677ff;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Footer/Copyright/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./index.module.scss";
3 | import { Link } from "react-router-dom";
4 |
5 | const Copyright = () => {
6 | return (
7 |
7 |
43 |
8 |
27 |
28 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
42 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
8 |
9 | 京ICP备17023235号
10 |
11 |
12 | );
13 | };
14 |
15 | export default Copyright;
16 |
--------------------------------------------------------------------------------
/src/components/Forms/LoginForm/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | user-select: none;
3 | width: 324px;
4 | min-height: 366px;
5 | padding: 40px;
6 | position: relative;
7 | background: rgba(164, 203, 200, 0.3);
8 | border-radius: 8px;
9 | &:hover {
10 | box-shadow: -4px 4px 16px 1px rgba(0, 0, 0, 0.15);
11 | background: rgba(164, 203, 200, 1);
12 | transition:
13 | box-shadow 1s,
14 | background 1s,
15 | transform 2s;
16 | }
17 | }
18 |
19 | .title {
20 | text-align: center;
21 | padding: 0px;
22 | margin: 0 0 20px 0;
23 | }
24 |
25 | .forgetPassword {
26 | float: right;
27 | padding-right: 12px;
28 | cursor: pointer;
29 | color: #1890ff;
30 | }
31 |
32 | .other {
33 | padding-bottom: 24px;
34 | }
35 |
36 | .submit {
37 | text-align: center;
38 | }
39 |
40 | .captchaLogin {
41 | margin-top: -11px;
42 | }
43 |
44 | .captchaContainer {
45 | position: absolute;
46 | top: 50%;
47 | right: 2px;
48 | width: calc(50% - 10px);
49 | transform: translateY(-50%);
50 | height: 32px;
51 | border-radius: 6px;
52 | }
53 |
54 | .captchaInput {
55 | width: calc(50%);
56 | }
57 |
58 | .ohter {
59 | display: flex;
60 | justify-content: center;
61 | gap: 15px;
62 | // justify-content: center;
63 |
64 | &:first-child {
65 | margin-left: auto;
66 | }
67 |
68 | &:last-child {
69 | margin-right: auto;
70 | }
71 | }
72 |
73 | .type {
74 | display: block;
75 | }
76 |
77 | .changeQR {
78 | cursor: pointer;
79 | position: absolute;
80 | width: 0;
81 | height: 0;
82 | top: 0px;
83 | right: 0px;
84 | border-top-left-radius: 8px;
85 | border-bottom: 30px solid transparent;
86 | border-right: 30px solid transparent;
87 | border-top: 30px solid rgba(7, 67, 36, 0.8);
88 | border-left: 30px solid rgba(7, 67, 36, 0.8);
89 | transform: rotate(90deg);
90 | }
91 |
92 | .code {
93 | float: right;
94 | margin-top: -22px;
95 | margin-right: -10px;
96 | width: 30px;
97 | height: 30px;
98 | background: url("/src/assets/qrcode-mini.png") no-repeat;
99 | background-size: 100%;
100 | }
101 |
102 | .card {
103 | text-align: center;
104 | margin-top: 45px;
105 | }
106 |
107 | .register {
108 | cursor: pointer;
109 | color: #1677ff;
110 | }
111 |
--------------------------------------------------------------------------------
/src/components/Forms/RegisterForm/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | user-select: none;
3 | padding: 40px;
4 | min-width: 324px;
5 | position: relative;
6 | background: rgba(164, 203, 200, 1);
7 |
8 | }
9 |
10 | .title {
11 | text-align: center;
12 | padding: 0px;
13 | margin: 0px 0px 12px 0px;
14 | }
15 |
16 | .forgetPassword {
17 | float: right;
18 | padding-right: 12px;
19 | cursor: pointer;
20 | color: #1890ff;
21 | }
22 |
23 | .other {
24 | padding-bottom: 24px;
25 | }
26 |
27 | .submit {
28 | text-align: center;
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Header/DefaultLayoutHeader/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "@/styles/themeMixin";
2 |
3 | .layoutHeader {
4 | height: 50px;
5 | line-height: 50px;
6 | overflow: hidden;
7 | @include get-class-from-key("background-color");
8 | @include get-class-from-key("color", "color-head");
9 | .user {
10 | float: right;
11 | cursor: pointer;
12 | user-select: none;
13 | @include get-class-from-key("background-color");
14 | @include get-class-from-key("color", "head-icon-color");
15 | &:hover {
16 | @include get-class-from-key("background-color", "head-icon-bg");
17 | @include get-class-from-key("color", "head-icon-bg-hover");
18 | }
19 | }
20 |
21 | .nameContainer {
22 | padding: 0 12px;
23 | }
24 |
25 | .name {
26 | margin-left: 6px;
27 | }
28 |
29 | .logo {
30 | float: left;
31 | cursor: pointer;
32 | user-select: none;
33 | width: 200px;
34 | text-align: center;
35 | font-size: 30px;
36 | font-weight: bold;
37 | }
38 |
39 | .title {
40 | /*渐变背景*/
41 | background-image: -webkit-linear-gradient(
42 | left,
43 | #3498db,
44 | #f47920 10%,
45 | #d71345 20%,
46 | #f7acbc 30%,
47 | #ffd400 40%,
48 | #3498db 50%,
49 | #f47920 60%,
50 | #d71345 70%,
51 | #f7acbc 80%,
52 | #ffd400 90%,
53 | #3498db
54 | );
55 | color: transparent; /*文字填充色为透明*/
56 | -webkit-text-fill-color: transparent;
57 | -webkit-background-clip: text;
58 | background-clip: text;
59 | background-size: 200% 100%;
60 | /* 动画 */
61 | animation: masked-animation 4s infinite linear;
62 | }
63 | }
64 |
65 | @keyframes masked-animation {
66 | 0% {
67 | background-position: 0 0;
68 | }
69 | 100% {
70 | background-position: -100% 0;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/Header/HeaderNotice/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "@/styles/themeMixin";
2 | .notice {
3 | float: right;
4 | user-select: none;
5 | cursor: pointer;
6 | margin-right: 20px;
7 |
8 | .icon {
9 | font-size: 22px;
10 | @include get-class-from-key("color", "head-icon-color");
11 | &:hover {
12 | @include get-class-from-key("background-color", "head-icon-bg");
13 | @include get-class-from-key("color", "head-icon-bg-hover");
14 | }
15 | }
16 | }
17 |
18 | .container {
19 | :global {
20 | .ant-tabs-tab {
21 | width: 130px;
22 | .ant-tabs-tab-btn {
23 | margin: 0 auto;
24 | }
25 | }
26 | }
27 | }
28 |
29 | .bottomBar {
30 | width: 100%;
31 | border-top: 1px solid #f0f0f0;
32 | border-radius: 0 0 2px 2px;
33 | transition: all 0.3s;
34 | }
35 |
36 | .dobtn {
37 | width: 49%;
38 | padding: 12px 0;
39 | float: left;
40 | cursor: pointer;
41 | text-align: center;
42 | }
43 |
44 | .doLeftBtn {
45 | @extend .dobtn;
46 | border-right: 1px solid #f0f0f0;
47 | }
48 |
49 | .tab {
50 | padding: 0 12px;
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/Header/ThemeColor/index.module.scss:
--------------------------------------------------------------------------------
1 | @import "@/styles/themeMixin";
2 |
3 | .ThemeColor {
4 | float: right;
5 | cursor: pointer;
6 | user-select: none;
7 | margin-right: 10px;
8 | font-size: 22px;
9 | padding: 0 12px;
10 | @include get-class-from-key("color", "head-icon-color");
11 | &:hover {
12 | @include get-class-from-key("background-color", "head-icon-bg");
13 | @include get-class-from-key("color", "head-icon-bg-hover");
14 | }
15 | }
16 |
17 | .themetooltip {
18 | @include get-class-from-key("color", "head-icon-color");
19 | &:hover {
20 | @include get-class-from-key("background-color", "head-icon-bg");
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Header/ThemeColor/index.tsx:
--------------------------------------------------------------------------------
1 | import { SunOutlined } from "@ant-design/icons";
2 | import styles from "./index.module.scss";
3 | import { useContext, useState } from "react";
4 | import { Tooltip } from "antd";
5 | import ProjectContext from "@/contexts/ProjectContext";
6 |
7 | const ThemeColor = () => {
8 | const { theme, setTheme } = useContext
69 |
85 | );
86 | };
87 |
88 | export default LoginLog;
89 |
--------------------------------------------------------------------------------
/src/components/Menu/WebMenu/hack.ts:
--------------------------------------------------------------------------------
1 | const menuItems: any = [
2 | {
3 | alwaysShow: true,
4 | component: "Layout",
5 | hidden: false,
6 | meta: { icon: "system", noCache: true, title: "统计面板" },
7 | name: "dashboard",
8 | path: "/dashboard"
9 | },
10 | {
11 | alwaysShow: true,
12 | children: [
13 | {
14 | component: "system/user/index",
15 | hidden: false,
16 | meta: { icon: "peoples", noCache: true, title: "后台用户管理" },
17 | name: "User",
18 | path: "user"
19 | }
20 | ],
21 | component: "Layout",
22 | hidden: false,
23 | meta: { icon: "system", noCache: true, title: "系统管理" },
24 | name: "system",
25 | path: "/system",
26 | redirect: "noredirect"
27 | },
28 | {
29 | alwaysShow: true,
30 | children: [
31 | {
32 | component: "weapp/periodical/index",
33 | hidden: false,
34 | meta: { icon: "peoples", noCache: true, title: "期刊管理" },
35 | name: "Periodical",
36 | path: "periodical"
37 | },
38 | {
39 | component: "weapp/weappuser/index",
40 | hidden: false,
41 | meta: { icon: "peoples", noCache: true, title: "用户管理" },
42 | name: "weappuser",
43 | path: "weappuser"
44 | },
45 | {
46 | component: "weapp/banner/index",
47 | hidden: false,
48 | meta: { icon: "peoples", noCache: true, title: "轮播图管理" },
49 | name: "banner",
50 | path: "banner"
51 | },
52 | {
53 | component: "weapp/article/index",
54 | hidden: false,
55 | meta: { icon: "peoples", noCache: true, title: "文章管理" },
56 | name: "article",
57 | path: "article"
58 | },
59 | {
60 | component: "weapp/redeemcode/index",
61 | hidden: false,
62 | meta: { icon: "peoples", noCache: true, title: "兑换码管理" },
63 | name: "redeemcode",
64 | path: "redeemcode"
65 | },
66 | {
67 | component: "weapp/articleinfo/index",
68 | hidden: true,
69 | meta: { icon: "peoples", noCache: true, title: "文章详情" },
70 | name: "articleinfo",
71 | path: "articleinfo"
72 | }
73 | ],
74 | component: "Layout",
75 | hidden: false,
76 | meta: { icon: "monitor", noCache: true, title: "小程序内容管理" },
77 | name: "weapp",
78 | path: "/weapp",
79 | redirect: "noredirect"
80 | }
81 | ];
82 |
83 | const creteMenu = (items: any, list: any[]) => {
84 | const parentPath: any = list?.length > 0 ? `${list.join("/")}/` : "";
85 | for (let i = 0; i < items.length; i++) {
86 | const element = items[i];
87 | element.label = element?.meta?.title;
88 | element.key = `${parentPath}${element.path}`;
89 | delete element.alwaysShow;
90 | if (element.children) {
91 | // 需要过滤掉不该显示的菜单
92 | const showChildrens = element?.children.filter(v => !v?.hidden);
93 | element.children = creteMenu(showChildrens, [...list, element.path]);
94 | }
95 | }
96 |
97 | return items;
98 | };
99 |
100 | export const menus = creteMenu(menuItems, []);
101 |
--------------------------------------------------------------------------------
/src/components/Menu/WebMenu/index.module.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weiqinke/react-admin-nest/36c1cf592208959d9c3a771797b706018bcf06b9/src/components/Menu/WebMenu/index.module.scss
--------------------------------------------------------------------------------
/src/components/Menu/WebMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import IconFont from "@/components/IconFont";
2 | import MenuTagContext from "@/contexts/MenuTagContext";
3 | import { formatURL, getLocalStorageMenus, getMenus, getOpenKeysByUrls, setLocalStorage } from "@/utils/menuUtils";
4 | import { AppstoreOutlined } from "@ant-design/icons";
5 | import { Menu } from "antd";
6 | import { toNumber } from "lodash-es";
7 | import { useContext, useLayoutEffect, useState } from "react";
8 | import { useLocation, useNavigate } from "react-router-dom";
9 |
10 | const createMenuIcon = item => {
11 | return item.map(v => {
12 | v.icon = v.icon ?
74 |
75 |
76 |
82 |
84 |
73 |
83 |
84 | );
85 | };
86 |
87 | export default WebMenu;
88 |
--------------------------------------------------------------------------------
/src/components/Modals/MenuEditModal.tsx:
--------------------------------------------------------------------------------
1 | import { createMenuItem, updateMenuItem } from "@/api/microservice/menu";
2 | import { Col, Form, Input, Modal, Row, Select, message } from "antd";
3 | import { FC, useEffect } from "react";
4 |
5 | const layout = {
6 | labelCol: { span: 8 },
7 | wrapperCol: { span: 16 }
8 | };
9 |
10 | const { Option } = Select;
11 | const { TextArea } = Input;
12 |
13 | const MenuEditModal: FC{content}
17 |
24 |
62 | {userInfo.name}
26 | {userInfo.signature}
27 |
28 |
29 |
32 |
33 |
35 |
36 |
37 |
40 |
41 |
42 |
45 |
46 |
49 |
50 |
53 |
54 |
57 |
58 |
61 | {content}
47 |
47 |
60 |
33 | setSelectedKeys(v)}
41 | onCheck={onCheck}
42 | selectedKeys={selectedKeys}
43 | treeData={treeData}
44 | />
45 |
46 |
6 |
16 | );
17 | };
18 |
19 | export default Owl;
20 |
--------------------------------------------------------------------------------
/src/components/PageIntroduction/index.module.scss:
--------------------------------------------------------------------------------
1 | .container{
2 | background-color: #fff;
3 | padding: 12px;
4 | user-select: none;
5 | }
6 | .introduction{
7 | margin-top: 12px;
8 | }
--------------------------------------------------------------------------------
/src/components/PageIntroduction/index.tsx:
--------------------------------------------------------------------------------
1 | import { Breadcrumb } from "antd";
2 | import TypingCard from "../TypingCard";
3 |
4 | import styles from "./index.module.scss";
5 | const PageIntroduction = ({ infos, introduction }) => {
6 | return (
7 |
7 |
15 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
8 |
13 | );
14 | };
15 |
16 | export default PageIntroduction;
17 |
--------------------------------------------------------------------------------
/src/components/SocketCard/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | margin-top: 54px;
3 | position: relative;
4 | width: 270px;
5 | height: 100px;
6 | background-color: #ccc;
7 | border-radius: 20px;
8 | box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
9 | transition: 0.5s linear;
10 | user-select: none;
11 | cursor: pointer;
12 | &:hover {
13 | height: 150px;
14 | .imgbox {
15 | width: 100px;
16 | height: 100px;
17 | }
18 | .content {
19 | .details {
20 | transform: translateY(0px);
21 | }
22 | }
23 | }
24 | }
25 |
26 | .imgbox {
27 | width: 80px;
28 | height: 80px;
29 | position: absolute;
30 | top: -50px;
31 | left: 50%;
32 | transform: translateX(-50%);
33 | border-radius: 20px;
34 | box-shadow: 0 35px 80px rgba(0, 0, 0, 0.35);
35 | background-color: #000;
36 | overflow: hidden;
37 | transition: 0.5s linear;
38 | &:hover {
39 | width: 130px;
40 | height: 130px;
41 | }
42 | }
43 |
44 | .img {
45 | position: absolute;
46 | top: 0;
47 | left: 0;
48 | width: 100%;
49 | height: 100%;
50 | object-fit: cover;
51 | background: url("/src/assets/header/user-poster.png") no-repeat;
52 | background-size: 100% 100%;
53 | }
54 |
55 | .content {
56 | position: absolute;
57 | width: 100%;
58 | height: 100%;
59 | display: flex;
60 | justify-content: center;
61 | align-items: flex-end;
62 | overflow: hidden;
63 | }
64 |
65 | .details {
66 | padding: 0px 40px 10px 40px;
67 | text-align: center;
68 | width: 100%;
69 | transition: 0.5s linear;
70 | transform: translateY(35px);
71 | & {
72 | h2 {
73 | font-size: 1.25em;
74 | font-weight: 600;
75 | color: #555;
76 | line-height: 1.2em;
77 | span {
78 | font-size: 0.75em;
79 | font-size: 500;
80 | opacity: 0.5;
81 | }
82 | }
83 | }
84 | }
85 |
86 | .data {
87 | display: flex;
88 | justify-content: space-between;
89 | margin: 20px 0;
90 |
91 | & {
92 | h3 {
93 | font-size: 1em;
94 | font-weight: 600;
95 | color: #555;
96 | line-height: 1.2em;
97 | span {
98 | font-size: 0.85em;
99 | font-size: 400;
100 | opacity: 0.5;
101 | }
102 | }
103 | }
104 | }
105 |
106 | .actionBtn {
107 | display: flex;
108 | justify-content: center;
109 | gap: 6px;
110 | }
111 |
112 | .btn {
113 | align-self: center; /* 子元素自身在交叉轴上居中对齐 */
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/SocketCard/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "antd";
2 |
3 | import styles from "./index.module.scss";
4 | import { webSocketManager } from "@/utils/ws";
5 |
6 | const SocketCard = ({ userInfo, loadUserInfo, getUserView, ForcedOffline }) => {
7 | const isMe = webSocketManager.MySocketID === userInfo.id;
8 |
9 | return (
10 |
10 |
12 |
11 |
38 | );
39 | };
40 |
41 | export default SocketCard;
42 |
--------------------------------------------------------------------------------
/src/components/StarrySky/index.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./index.module.scss";
2 | const StarrySky = () => {
3 | return (
4 |
12 |
13 |
14 |
15 |
37 |
16 |
17 | {userInfo?.nick || userInfo?.name}
18 | {isMe ? "(自己)" : ""}
19 |
22 |
36 |
17 | {userInfo?.nick || userInfo?.name}
18 | {isMe ? "(自己)" : ""}
19 |
20 | Web Front-end developer
21 |
22 |
23 |
26 |
29 | {!isMe && (
30 |
33 | )}
34 |
35 |
5 |
25 | );
26 | };
27 |
28 | export default StarrySky;
29 |
--------------------------------------------------------------------------------
/src/components/SuspendFallback/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 100%;
3 | .maxheight {
4 | height: 100vh;
5 | }
6 | .loadingText {
7 | width: 100%;
8 | height: calc(100vh - 288px);
9 | background-color: transparent;
10 | position: relative;
11 | .title {
12 | font-size: 32px;
13 | text-align: center;
14 | position: absolute;
15 | left: 50%;
16 | top: 50%;
17 | transform: translate(-50%, -50%);
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/SuspendFallback/index.tsx:
--------------------------------------------------------------------------------
1 | import { Spin } from "antd";
2 | import styles from "./index.module.scss";
3 |
4 | const SuspendFallback = () => {
5 | return (
6 |
6 |
24 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
7 |
8 |
12 |
13 | );
14 | };
15 |
16 | export default SuspendFallback;
17 |
--------------------------------------------------------------------------------
/src/components/SystemInfo/index.module.scss:
--------------------------------------------------------------------------------
1 | .itemText {
2 | white-space: nowrap;
3 | text-overflow: ellipsis;
4 | overflow: hidden;
5 | font-size: 14px;
6 | color: #000;
7 | height: 30px;
8 | line-height: 30px;
9 |
10 | em {
11 | color: #000;
12 | font-weight: 500;
13 | font-style: normal;
14 | }
15 | }
16 |
17 | .mem {
18 | text-align: center;
19 | }
20 |
21 | .surplus {
22 | margin-top: 8px;
23 | }
24 |
25 | .cardContainer {
26 | border: 12px;
27 | background-color: #41b3a3;
28 | border-radius: 8px;
29 | border: 2px solid #41b3a3;
30 | &.fense {
31 | background-color: #f8c0cb;
32 | border: 2px solid #f8c0cb;
33 | }
34 |
35 | &.zise {
36 | background-color: #ccbce1;
37 | border: 2px solid #ccbce1;
38 | }
39 |
40 | .header {
41 | width: 70%;
42 | overflow: hidden;
43 | border-radius: 8px 0px 0px 0px;
44 | position: relative;
45 | .tab {
46 | height: 20px;
47 | background-color: #fff;
48 | border-radius: 0px 10px 0px 0px;
49 | transform: perspective(18px) rotateX(12deg) rotateY(0deg);
50 | position: relative;
51 | top: -1px;
52 | left: -15px;
53 | }
54 | .roundNode {
55 | position: absolute;
56 | bottom: 0px;
57 | right: 0px;
58 | width: 10px;
59 | height: 10px;
60 | background: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #000 10px, #000);
61 | }
62 | }
63 | .body {
64 | min-height: 120px;
65 | border-radius: 0px 8px 8px 8px;
66 | background-color: #fff;
67 | padding: 0px 20px 20px 20px;
68 | .title {
69 | padding: 0px 0px 12px 0px;
70 | font-size: 14px;
71 | font-weight: bold;
72 | }
73 | }
74 | }
75 |
76 | .Gcontainer {
77 | position: relative;
78 | height: 48px;
79 | overflow: hidden;
80 | border-radius: 8px 0px 0 0px;
81 | }
82 | .Ginner {
83 | position: absolute;
84 | user-select: none;
85 | width: 50%;
86 | height: 50px;
87 | background: #fff;
88 | bottom: 0;
89 | border-radius: 0 20px 0 20px;
90 | transform: perspective(40px) scaleX(1.4) scaleY(1.5) rotateX(20deg) translate(-10px, 0);
91 | transform-origin: 50% 100%;
92 | }
93 | .Ginner::before {
94 | content: "";
95 | position: absolute;
96 | right: -10px;
97 | width: 10px;
98 | height: 10px;
99 | top: 40px;
100 | background: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #fff 10px, #fff);
101 | }
102 | .Gafter {
103 | position: absolute;
104 | width: 150px;
105 | height: 50px;
106 | background: transparent;
107 | bottom: 49px;
108 | right: 0;
109 | border-radius: 20px 0 20px 0;
110 | transform: perspective(40px) scaleX(1.4) scaleY(-1.5) rotateX(20deg) translate(14px, 0);
111 | transform-origin: 53% 100%;
112 | }
113 | .Gafter::before {
114 | content: "";
115 | position: absolute;
116 | left: -10px;
117 | top: 40px;
118 | width: 10px;
119 | height: 10px;
120 | background: radial-gradient(circle at 0 0, transparent, transparent 9.5px, transparent 10px, transparent);
121 | }
122 | .GinnerText,
123 | .GafterText {
124 | user-select: none;
125 | cursor: pointer;
126 | position: absolute;
127 | height: 50px;
128 | line-height: 50px;
129 | text-align: center;
130 | }
131 | .GinnerText {
132 | top: 50%;
133 | transform: translateY(-50%);
134 | }
135 | .GafterText {
136 | top: 50%;
137 | }
138 |
--------------------------------------------------------------------------------
/src/components/TagsView/Contextmenu/index.module.scss:
--------------------------------------------------------------------------------
1 | .contextmenuDom {
2 | user-select: none;
3 | position: fixed;
4 | // 用了wangeditor 需要比编辑器更高层级
5 | z-index: 20000;
6 | list-style: none;
7 | padding: 0px;
8 | margin: 0px;
9 | width: 112px;
10 | background-color: #fff;
11 | border-radius: 8px;
12 | box-shadow: -4px 4px 16px 1px rgba(0, 0, 0, 0.15);
13 | cursor: pointer;
14 |
15 | li:first-child {
16 | border-radius: 8px 8px 0px 0px;
17 | }
18 |
19 | li {
20 | &:first-of-type {
21 | border-radius: 8px 8px 0px 0px;
22 | }
23 | width: 100%;
24 | text-align: center;
25 | font-size: 14px;
26 | height: 40px;
27 | line-height: 40px;
28 | &:hover {
29 | background-color: #41b3a3;
30 | color: #313653;
31 | transition:
32 | opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
33 | width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
34 | }
35 | }
36 | li:last-child {
37 | border-radius: 0px 0px 8px 8px;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/TagsView/Contextmenu/index.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./index.module.scss";
2 |
3 | const Contextmenu = ({ pageclientX, pageclientY, handleCloseLeftTags, handleCloseRightTags, handleCloseOtherTags, contextMenuTag, refreshPage }) => {
4 | return (
5 |
9 |
11 | 正在加载中，不会太久，请稍等。
10 | -
6 |
- 关闭左侧 7 |
- 关闭右侧 8 |
- 关闭其他 9 | {contextMenuTag?.active ?
- 刷新页面 : ""} 10 |
7 |
8 | {tag.name}
9 | onClose(e, tag)}>
10 |
11 | );
12 | };
13 |
14 | export default MenuTag;
15 |
--------------------------------------------------------------------------------
/src/components/TagsView/index.module.scss:
--------------------------------------------------------------------------------
1 | .contextb {
2 | z-index: -1;
3 | position: absolute;
4 | width: calc(100% + 5px);
5 | height: 100%;
6 | top: 0px;
7 | left: -5px;
8 | }
9 |
10 | :global {
11 | .anticon.anticon-close {
12 | color: #000;
13 | }
14 | }
15 |
16 | .contextmenuDom {
17 | user-select: none;
18 | position: fixed;
19 | // 用了wangeditor 需要比编辑器更高层级
20 | z-index: 20000;
21 | list-style: none;
22 | padding: 0px;
23 | margin: 0px;
24 | width: 112px;
25 | background-color: #fff;
26 | border-radius: 8px;
27 | box-shadow: -4px 4px 16px 1px rgba(0, 0, 0, 0.15);
28 | cursor: pointer;
29 |
30 | li:first-child {
31 | border-radius: 8px 8px 0px 0px;
32 | }
33 |
34 | li {
35 | &:first-of-type {
36 | border-radius: 8px 8px 0px 0px;
37 | }
38 | width: 100%;
39 | text-align: center;
40 | font-size: 14px;
41 | height: 40px;
42 | line-height: 40px;
43 | &:hover {
44 | background-color: #41b3a3;
45 | color: #313653;
46 | transition:
47 | opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
48 | width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
49 | }
50 | }
51 | li:last-child {
52 | border-radius: 0px 0px 8px 8px;
53 | }
54 | }
55 |
56 | .tagsdiv {
57 | background: #fff;
58 | padding: 6px 4px 0px 4px;
59 | :global {
60 | .ant-tabs-nav-list {
61 | padding: 0;
62 |
63 | &:last-child{
64 | margin-right: auto;
65 | }
66 | .ant-tabs-tab {
67 | background: #fafafa;
68 | border: 1px solid #e8e8e8;
69 | padding: 0px;
70 | margin: 0px;
71 | margin-right: 2px;
72 | }
73 | .ant-tabs-tab-active.ant-tabs-tab {
74 | .anticon.anticon-close {
75 | &:hover {
76 | color: #1890ff;
77 | }
78 | }
79 | }
80 | .ant-tabs-ink-bar {
81 | background: transparent;
82 | }
83 | }
84 | }
85 | }
86 |
87 | .DropChild {
88 | white-space: nowrap;
89 | overflow-x: scroll;
90 | &::-webkit-scrollbar {
91 | /*滚动条整体样式*/
92 | height: 5px;
93 | }
94 | &::-webkit-scrollbar-thumb {
95 | /*滚动条里面小方块*/
96 | border-radius: 10px;
97 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
98 | background: #aeaeae;
99 | }
100 | &::-webkit-scrollbar-track {
101 | /*滚动条里面轨道*/
102 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
103 | border-radius: 10px;
104 | background: #ededed;
105 | }
106 |
107 | &::after {
108 | content: "";
109 | display: table;
110 | clear: both;
111 | }
112 | }
113 | .tagitem {
114 | margin: 0px;
115 | padding: 0px;
116 | background: transparent;
117 | .tagChildDiv {
118 | padding: 10px 0px 10px 16px;
119 | margin: 0px;
120 | margin-right: 2px;
121 | border: 1px solid #000;
122 | border-bottom: 2px solid #000;
123 | border-radius: 2px;
124 | background: #fafafa;
125 | line-height: 22px;
126 | white-space: nowrap;
127 | b.round {
128 | float: left;
129 | width: 9px;
130 | height: 9px;
131 | background: #ccc;
132 | border-radius: 50%;
133 | margin-top: 7px;
134 | margin-left: 0px;
135 | margin-right: 5px;
136 | }
137 | b.name {
138 | color: #575757;
139 | &:hover {
140 | color: #313653;
141 | opacity: 0.85;
142 | }
143 | }
144 | .bottomline {
145 | width: 100%;
146 | height: 4px;
147 | background: #fafafa;
148 | border-radius: 0px 0px 100px 100px;
149 | }
150 | .close {
151 | color: #898989;
152 | margin-left: 12px;
153 | margin-top: 5px;
154 | margin-right: 12px;
155 | &:hover {
156 | color: #313653;
157 | }
158 | }
159 | }
160 | }
161 |
162 | .ant-tabs-nav-list {
163 | background-color: #000;
164 | }
165 |
--------------------------------------------------------------------------------
/src/components/Translatex/index.tsx:
--------------------------------------------------------------------------------
1 | import { animated, useSpring } from "@react-spring/web";
2 | import React, { useEffect } from "react";
3 |
4 | const Translatex = props => {
5 | const [animate, setAnimate] = React.useState(false);
6 | const {
7 | children,
8 | direction = "left",
9 | delay = 3000,
10 | run = false,
11 | config = {
12 | tension: 100,
13 | friction: 26
14 | }
15 | } = props;
16 |
17 | const animateStyles = useSpring({
18 | opacity: animate ? 1 : 0,
19 | transform: animate
20 | ? `${direction === "left" ? "translateX(0px) scale(1) rotateY(0deg)" : "translateY(0px) scale(1) rotateY(0deg)"}`
21 | : `${direction === "left" ? "translateX(80px) scale(1) rotateY(10deg)" : "translateY(80px) scale(0.9) rotateY(10deg)"}`,
22 | delay,
23 | config: { ...config },
24 | onRest: () => {}
25 | });
26 |
27 | useEffect(() => {
28 | setAnimate(run);
29 | }, [run]);
30 |
31 | return (
32 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default TypingCard;
27 |
--------------------------------------------------------------------------------
/src/components/UserCard/index.module.scss:
--------------------------------------------------------------------------------
1 | $base-url: "@/assets/header/user-poster.png";
2 | $avatarbg: "@/assets/user/avatarbg.png";
3 |
4 | .usercard {
5 | width: 100%;
6 | .antskeleton {
7 | width: 100% !important;
8 | }
9 | .antskeletonimage {
10 | width: 100% !important;
11 | }
12 | .antcardcover {
13 | max-height: 200px;
14 | overflow: hidden;
15 | }
16 | }
17 |
18 | .userCardBg {
19 | width: 100%;
20 | min-height: 100px;
21 | position: relative;
22 | // background-image: url($base-url);
23 | background: linear-gradient(135deg, #292a3a, #536976);
24 | }
25 |
26 | .avatarbg {
27 | width: 150px;
28 | height: 150px;
29 | position: absolute;
30 | top: -50px;
31 | transform: translateX(-50%);
32 | left: 50%;
33 | background: url($avatarbg) no-repeat;
34 | background-size: 100% 100%;
35 | }
36 |
37 | .avatar {
38 | position: absolute;
39 | top: -50px;
40 | transform: translateX(-50%);
41 | left: 50%;
42 | }
43 |
44 | .img {
45 | width: 84px;
46 | height: 84px;
47 | border-radius: 50%;
48 | overflow: hidden;
49 | position: absolute;
50 | transform: translate(-50%, -9%);
51 | left: 50%;
52 | }
53 |
54 | .cover {
55 | position: relative;
56 | background: #fff;
57 | &:before {
58 | content: "";
59 | top: 0;
60 | left: 0;
61 | width: 100%;
62 | height: 100%;
63 | z-index: 1;
64 | position: absolute;
65 | }
66 | }
67 |
68 | .userinfo {
69 | position: relative;
70 | padding-top: 38px;
71 | &::after {
72 | content: "";
73 | display: table;
74 | clear: both;
75 | }
76 | .info {
77 | display: flex;
78 | flex-direction: column;
79 | align-items: center;
80 | justify-content: center;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/UserCard/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Flex, Typography } from "antd";
2 | import React, { useEffect, useState } from "react";
3 | import type { CardProps } from "antd/es/card";
4 | import CountUp from "react-countup";
5 | import { GithubOutlined, LikeOutlined, MailOutlined } from "@ant-design/icons";
6 | import Translatex from "../Translatex";
7 | import avatar from "@/assets/user/defaultAvatar.jpg";
8 |
9 | import styles from "./index.module.scss";
10 |
11 | const { Text, Title } = Typography;
12 |
13 | export interface UserCardProp extends CardProps {
14 | children?: React.ReactNode;
15 | info?: any;
16 | index?: number;
17 | }
18 |
19 | export const UserFooter: React.FC<{ name: string; count: number }> = ({ name, count }) => (
20 |
21 | {name}
22 |
23 | <CountUp end={count} start={0} duration={1.75} />
24 |
25 |
26 | );
27 |
28 | const UserCard: React.FC
61 |
77 |
78 |
62 | 
63 |
64 |
65 |
66 |
67 | {info.name}
68 |
69 | {info.description}
70 |
71 | } />
72 | } />
73 | } />
74 |
75 |
76 |
58 |
74 |
75 |
59 |
72 |
60 |
62 |
63 |
64 |
65 |
69 |
70 |
71 |
66 |
68 |
82 |
84 |
29 |
78 | );
79 | };
80 |
81 | export default About;
82 |
--------------------------------------------------------------------------------
/src/pages/Account/AccountBind/AccountBind.tsx:
--------------------------------------------------------------------------------
1 | import { AlipayCircleOutlined, DingdingOutlined, TaobaoCircleOutlined } from "@ant-design/icons";
2 | import { Divider, List } from "antd";
3 | import React, { useEffect } from "react";
4 |
5 | const AccountBind: React.FC = function () {
6 | useEffect(() => {}, []);
7 | return (
8 |
30 |
37 |
38 |
39 |
56 | 仓库地址
57 |
58 | )
59 | },
60 | {
61 | label: "预览地址",
62 | children: (
63 |
64 | 预览地址
65 |
66 | )
67 | }
68 | ]}
69 | />
70 |
71 |
72 |
74 |
75 |
77 |
9 |
10 | 账号设置
11 |
12 |
36 | );
37 | };
38 |
39 | export default AccountBind;
40 |
--------------------------------------------------------------------------------
/src/pages/Account/AccountBind/index.module.scss:
--------------------------------------------------------------------------------
1 | .AccountBind {
2 | .bangdinghao {
3 | padding-right: 12px;
4 | font-size: 17px;
5 | .font17 {
6 | font-size: 17px;
7 | }
8 | .playicon {
9 | font-size: 40px;
10 | margin-top: 12px;
11 | }
12 | .ant-list-item-action {
13 | li {
14 | a {
15 | font-size: 17px;
16 | }
17 | }
18 | }
19 | }
20 | .list {
21 | margin-bottom: 10px;
22 | display: flex;
23 | border-bottom: 1px solid #e6e6e6;
24 | font-size: 17px;
25 | .left {
26 | flex: 1;
27 | }
28 | .xiugaitype {
29 | font-size: 17px;
30 | line-height: 70px;
31 | margin-right: 12px;
32 | }
33 | .offstate {
34 | color: #999;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/Account/AccountPage/accountpage.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useEffect } from "react";
2 | import { Form, Input, Button, Divider } from "antd";
3 | const AccountPage: FC = () => {
4 | const [form] = Form.useForm();
5 | const handleUpdateUser = () => {};
6 | const userInfo: any = {
7 | loginName: ""
8 | };
9 | useEffect(() => {}, []);
10 |
11 | return (
12 | -
13 |
13 |
14 | 修改密码
15 |
16 |
50 |
51 | );
52 | };
53 |
54 | export default AccountPage;
55 |
--------------------------------------------------------------------------------
/src/pages/Account/AccountSetting/AccountSetting.tsx:
--------------------------------------------------------------------------------
1 | import { Divider, Tag } from "antd";
2 | import React, { useEffect } from "react";
3 |
4 | const AccountSetting: React.FC = function () {
5 | useEffect(() => {}, []);
6 | return (
7 |
8 |
9 | 账号设置
10 |
11 |
76 | );
77 | };
78 |
79 | export default AccountSetting;
80 |
--------------------------------------------------------------------------------
/src/pages/Account/AccountSetting/index.module.scss:
--------------------------------------------------------------------------------
1 | .AccountSetting {
2 | .list {
3 | margin-bottom: 10px;
4 | display: flex;
5 | border-bottom: 1px solid #e6e6e6;
6 | font-size: 17px;
7 | .left {
8 | flex: 1;
9 | }
10 | .xiugaitype {
11 | color: #0095ff;
12 | font-size: 17px;
13 | line-height: 70px;
14 | margin-right: 12px;
15 | }
16 | .offstate {
17 | color: #999;
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/Account/Base/BaseSetting.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * 个人中心
3 | */
4 | import React, { FC, useEffect, useState } from "react";
5 | import { Avatar, Card, Col, Divider, Row } from "antd";
6 | import { getmyuserinfo, updateMyinfo } from "@/api/caravan/User";
7 | import userPoster from "@/assets/header/user-poster.png";
8 | import MetaDesc from "./MetaDesc";
9 | import BaseFrom from "./basefrom";
10 |
11 | import "./style.scss";
12 |
13 | const { Meta } = Card;
14 |
15 | const BaseSetting: FC = function () {
16 | const [initFormItem, setInitFormItem] = useState
12 |
22 |
13 |
18 |
19 | 修改
20 |
21 | 账户密码
14 |
15 | 当前强度：
23 |
37 |
24 |
30 |
31 | 验证
32 |
33 |
34 | 换绑
35 |
36 | 密保手机
25 |26 | 已绑定手机： 27 | 138****8293 28 |
29 |
38 |
48 |
39 |
44 |
45 | 修改
46 |
47 | 密保问题
40 |41 | 未设置密保问题，密保问题可有效保护账户安全 42 |
43 |
49 |
60 |
50 |
56 |
57 | 修改
58 |
59 | 备用邮箱
51 |52 | 已绑定邮箱： 53 | ant***sign.com 54 |
55 |
61 |
75 |
62 |
68 |
69 | 绑定
70 |
71 |
72 | 启用
73 |
74 | 备用邮箱
63 |64 | MFA 设备： 65 | 未绑定 MFA 设备，绑定后，可以进行二次确认 66 |
67 |
44 |
51 |
52 |
9 |
19 | );
20 | };
21 |
22 | export default MetaDesc;
23 |
--------------------------------------------------------------------------------
/src/pages/Account/Base/basefrom.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useEffect, useState } from "react";
2 | import { Button, Col, Form, Input } from "antd";
3 | const { TextArea } = Input;
4 | const layout = {
5 | labelCol: { span: 6 },
6 | wrapperCol: { span: 18 }
7 | };
8 | const tailLayout = {
9 | wrapperCol: { offset: 6, span: 16 }
10 | };
11 | const BaseFrom: FC{userInfo.loginName}
10 |
11 | 账号：
12 | {userInfo.name}
13 |
14 | 简介：{userInfo.signature}
15 | 邮箱：{userInfo.email}
16 | 地区：{userInfo.address}
17 | 注册时间：{dayjs(userInfo.created).format("YYYY-MM-DD HH:mm")}
18 |
24 |
26 | 消息中心
27 |
28 |
29 | setSelectedRowKeys(selectedKeys)
34 | }}
35 | rowKey={(record: any) => record.uid}
36 | />
37 |
18 |
35 | );
36 | };
37 |
38 | export default Login;
39 |
--------------------------------------------------------------------------------
/src/pages/Login/snowflake.tsx:
--------------------------------------------------------------------------------
1 | import snowflake_png from "@/assets/snowflake.png";
2 | import sakura_png from "@/assets/sakura.png";
3 | import { useEffect, useRef } from "react";
4 | import { getRandom } from "@/utils/core";
5 | import { Sakura, SakuraList } from "@/utils/Sakura";
6 | let stopFun: any;
7 | const Snowflake = ({ rdm }) => {
8 | const ref: any = useRef();
9 |
10 | useEffect(() => {
11 | const onresize = () => {
12 | const dom = ref.current;
13 | if (dom) {
14 | const clientHeight = document.body.clientHeight;
15 | const clientWidth = document.body.clientWidth;
16 | const canvasSnow: any = ref.current?.firstChild;
17 | canvasSnow.width = clientWidth;
18 | canvasSnow.height = clientHeight;
19 | }
20 | };
21 | //樱花
22 | const img = new Image();
23 | img.src = rdm < 0.45 ? sakura_png : snowflake_png;
24 |
25 | function startSakura() {
26 | if (ref.current?.firstChild) {
27 | ref.current?.removeChild(ref.current?.firstChild);
28 | }
29 | const canvas = document.createElement("canvas");
30 | canvas.height = document.body.clientHeight;
31 | canvas.width = document.body.clientWidth;
32 | canvas.setAttribute("style", "position: absolute;left: 0;top: 0;pointer-events: none;object-fit:cover;");
33 | ref.current!.appendChild(canvas);
34 | const cxt = canvas.getContext("2d");
35 | const sakuraList = new SakuraList();
36 | for (let i = 0; i < 100; i++) {
37 | const randomX = getRandom("x");
38 | const randomY = getRandom("y");
39 | const randomR = getRandom("r");
40 | const randomS = getRandom("s");
41 | const randomFnx = getRandom("fnx");
42 | const randomFny = getRandom("fny");
43 | const randomFnR = getRandom("fnr");
44 | const sakura = new Sakura(img, randomX, randomY, randomS, randomR, {
45 | x: randomFnx,
46 | y: randomFny,
47 | r: randomFnR
48 | });
49 | sakura.draw(cxt);
50 | sakuraList.push(sakura);
51 | }
52 |
53 | stopFun = function () {
54 | cxt.clearRect(0, 0, canvas.width, canvas.height);
55 | sakuraList.update();
56 | sakuraList.draw(cxt);
57 | requestAnimationFrame(stopFun);
58 | };
59 |
60 | requestAnimationFrame(stopFun);
61 | }
62 |
63 | img.onload = function () {
64 | startSakura();
65 | };
66 |
67 | window.addEventListener("resize", onresize);
68 | return () => {
69 | window.removeEventListener("resize", onresize);
70 | window.cancelAnimationFrame(stopFun);
71 | const child = ref.current?.firstChild;
72 | child?.parentNode?.removeChild(child);
73 | };
74 | }, [rdm]);
75 |
76 | return ;
77 | };
78 |
79 | export default Snowflake;
80 |
--------------------------------------------------------------------------------
/src/pages/MenuAdmin/index.module.scss:
--------------------------------------------------------------------------------
1 | .menusAdminContainer {
2 | padding: 12px;
3 | }
4 |
5 | .header {
6 | margin: 12px 0;
7 | }
8 |
9 | .tableContainer{
10 | background-color: #fff;;
11 | padding: 0px 12px;
12 | margin-top: 12px;
13 | }
--------------------------------------------------------------------------------
/src/pages/MusicChart/index.module.scss:
--------------------------------------------------------------------------------
1 | .MusicChart{
2 | margin: 12px;
3 | padding: 12px;
4 | background-color: #fff;
5 | .musicContainer{
6 | display: inline-block;
7 | .musicItem{
8 | font-size: 16px;
9 | padding: 12px;
10 | cursor: pointer;
11 | user-select: none;
12 | &:hover{
13 | background: #DDD;
14 | }
15 | .title{
16 | text-align: center;
17 | }
18 | .user{
19 | font-size: 12px;
20 | color: #333;
21 | }
22 | .playIconNode{
23 | margin: 0 auto;
24 | text-align: center;
25 | display: inline-block;
26 | margin: 6px 0px;
27 | .playIcon{
28 | border: 12px solid #ccc;
29 | border-radius: 50%;
30 | background-color: #ccc;
31 | transform: scale(0.5);
32 | }
33 | }
34 | .share{
35 | margin:0px 12px;
36 | }
37 | .btns{
38 | margin:0px 6px;
39 | }
40 | }
41 | }
42 | }
--------------------------------------------------------------------------------
/src/pages/MusicChart/musicItem.tsx:
--------------------------------------------------------------------------------
1 | import { DownloadOutlined, LikeFilled, LikeOutlined, PlayCircleFilled, ShareAltOutlined } from "@ant-design/icons";
2 | import { Tooltip } from "antd";
3 | import { useState } from "react";
4 | import styles from "./index.module.scss";
5 | const MusicItem = ({ data }) => {
6 | const [music, setMusic] = useState(data);
7 |
8 | const like = () => {
9 | setMusic({ ...music, action: 1 });
10 | };
11 |
12 | return (
13 |
19 |
23 |
24 | {register % 2 ? setRegister(0)} setCloseEyes={setCloseEyes} /> :
26 |
27 |
28 |
20 |
22 |
29 |
31 |
32 |
34 |
14 |
41 | );
42 | };
43 |
44 | export default MusicItem;
45 |
--------------------------------------------------------------------------------
/src/pages/PlacardAdmin/index.module.scss:
--------------------------------------------------------------------------------
1 | .placard {
2 | padding: 12px;
3 | }
4 |
5 | .header {
6 | margin: 12px 0;
7 | }
8 |
9 | .tableContainer {
10 | background-color: #fff;
11 | padding: 0px 12px;
12 | margin-top: 12px;
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/RoleAdmin/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 12px;
3 | }
4 |
5 | .tipContainer{
6 | margin-bottom: 12px;
7 | }
8 |
9 | .tip {
10 | font-size: 1em;
11 | }
12 |
13 | .weightFont {
14 | font-size: 15px;
15 | color: #f00;
16 | padding:0 6px;
17 | }
18 |
19 | .header {
20 | margin: 12px 0;
21 | }
22 |
23 | .tableContainer{
24 | background-color: #fff;;
25 | padding: 0px 12px;
26 | margin-top: 12px;
27 | }
--------------------------------------------------------------------------------
/src/pages/Root/index.module.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | border-radius: 0;
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/Root/index.scss:
--------------------------------------------------------------------------------
1 | .root {
2 | border-radius: 0;
3 | }
4 |
5 | .fade-enter {
6 | opacity: 1;
7 | transform: translateX(100%);
8 | }
9 |
10 | .fade-enter-active {
11 | opacity: 1;
12 | transition: transform 1s ease-in-out;
13 | transform: translateX(0px);
14 | }
15 |
16 | .fade-exit {
17 | opacity: 0;
18 | }
19 |
20 | .fade-exit-active {
21 | opacity: 0;
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/Root/index.tsx:
--------------------------------------------------------------------------------
1 | import ProjectRouter from "@/router";
2 | import { RouterProvider } from "react-router-dom";
3 | import { ProjectContextProvider } from "@/contexts/ProjectContext";
4 | import { MenuTagContextProvider } from "@/contexts/MenuTagContext";
5 |
6 | import "./index.scss";
7 | import { ConfigProvider } from "antd";
8 | import { webSocketManager } from "@/utils/ws";
9 | import { useEffect } from "react";
10 |
11 | const Root = () => {
12 | const router = ProjectRouter();
13 |
14 | useEffect(() => {
15 | webSocketManager.create();
16 | return () => {
17 | webSocketManager.postMessage({
18 | name: "qkstartCar",
19 | type: "123",
20 | message: "",
21 | data: []
22 | });
23 | webSocketManager.socket.disconnect();
24 | webSocketManager.close();
25 | };
26 | }, []);
27 |
28 | return (
29 | {music.name}
15 | 演唱者: 未知
16 |
17 |
21 |
18 |
20 |
22 |
23 |
24 | {music?.action ?
28 |
29 |
30 |
33 |
34 |
35 |
36 |
39 |
40 |
38 |
41 |
44 |
45 | );
46 | }
47 | }
48 | ];
49 | return
69 | findAll()} onCancel={() => setUser(null)} />}
95 |
96 | );
97 | };
98 |
99 | export default UserAdmin;
100 |
--------------------------------------------------------------------------------
/src/pages/UserProfile/index.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 12px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/UserProfile/index.tsx:
--------------------------------------------------------------------------------
1 | import UserInfoCard from "@/components/UserInfoCard";
2 | import styles from "./index.module.scss";
3 |
4 | const UserProfile = () => {
5 | return (
6 |
71 |
88 |
89 |
90 |
91 |
93 |
94 | {user &&
7 |
9 | );
10 | };
11 |
12 | export default UserProfile;
13 |
--------------------------------------------------------------------------------
/src/pages/WebsocketAdmin/index.module.scss:
--------------------------------------------------------------------------------
1 | .websocketAdmin {
2 | padding: 12px;
3 | }
4 |
5 | .imgbg {
6 | width: 300px;
7 | height: 140px;
8 | user-select: none;
9 | margin-bottom: 12px;
10 | }
11 |
--------------------------------------------------------------------------------
/src/pages/Workbench/index.module.scss:
--------------------------------------------------------------------------------
1 | .workbench {
2 | padding: 12px;
3 | }
4 |
5 | .info {
6 | margin-bottom: 12px;
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/Workbench/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 |
3 | import styles from "./index.module.scss";
4 | import SystemInfo from "@/components/SystemInfo";
5 | import LoginLog from "@/components/LoginLog";
6 |
7 | const Workbench: FC = () => {
8 | return (
9 |
10 |
15 | );
16 | };
17 |
18 | export default Workbench;
19 |
--------------------------------------------------------------------------------
/src/pages/Workplace/index.module.scss:
--------------------------------------------------------------------------------
1 | $fork-me: "@/assets/github/fork.png";
2 | .baseStyle {
3 | display: flex;
4 | padding: 1rem;
5 | border-radius: 5px;
6 | font-size: 2em;
7 | }
8 |
9 | .wechat {
10 | @extend .baseStyle;
11 | background-color: #70ca63;
12 | }
13 |
14 | .qq {
15 | @extend .baseStyle;
16 | background-color: #12b7f5;
17 | }
18 |
19 | .dingding {
20 | @extend .baseStyle;
21 | background-color: #0089ff;
22 | }
23 |
24 | .weibo {
25 | @extend .baseStyle;
26 | background-color: #fb452d;
27 | }
28 |
29 | .iconStyle {
30 | color: #fbfbf4b3;
31 | font-size: 5rem;
32 | padding-right: 1rem;
33 | }
34 |
35 | .baseTitle {
36 | font-size: 2rem;
37 | }
38 |
39 | .githubCorner {
40 | position: absolute;
41 | top: 0;
42 | right: 6px;
43 | background-image: url($fork-me);
44 | background-size: 100% 100%;
45 | width: 120px;
46 | height: 120px;
47 | z-index: 2;
48 | cursor: pointer;
49 | }
50 |
51 | .header {
52 | color: #fff;
53 | }
54 |
55 | .container {
56 | padding: 1rem;
57 | }
58 |
59 | .baseChart {
60 | margin-top: 12px;
61 | border-radius: 5px;
62 | overflow: hidden;
63 | background-color: #fff;
64 | .imgbg{
65 | background-repeat: no-repeat;
66 | background-size: cover;
67 | background-position: center;
68 | height: 400px;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/pages/Workplace/index.tsx:
--------------------------------------------------------------------------------
1 | import { PieBorderRadius } from "@/components/Echarts";
2 | import { DingdingOutlined, QqOutlined, WechatOutlined, WeiboOutlined } from "@ant-design/icons";
3 | import { Col, Row } from "antd";
4 | import CountUp from "react-countup";
5 |
6 | import styles from "./index.module.scss";
7 | import Round from "@/components/Echarts/Round";
8 |
9 | const Workplace = () => {
10 | const toMygit = () => window.open("https://github.com/weiqinke/react-admin-nest", "topFrame");
11 | const src = "https://dr.cdnux.com/18510675/i/2024/12/31/7xt4r.webp";
12 | return (
13 |
11 |
13 |
14 |
15 |
53 |
54 |
65 |
66 |
77 |
78 | );
79 | };
80 |
81 | export default Workplace;
82 |
--------------------------------------------------------------------------------
/src/router/index.tsx:
--------------------------------------------------------------------------------
1 | import ProjectContext from "@/contexts/ProjectContext";
2 | import NeedLogin from "@/pages/FailPage/NeedLogin";
3 | import RouterPages from "@/router/router";
4 | import React, { useContext } from "react";
5 | import { createBrowserRouter } from "react-router-dom";
6 |
7 | const WrapperRoute = (props: any) => {
8 | const { component, title = "welcome", auth } = props;
9 | document.title = title;
10 | const { value: data }: any = useContext(ProjectContext);
11 | const { uid, exp } = data;
12 | const value = new Date().valueOf();
13 | const authEndTime = new Date(exp * 1000).valueOf();
14 | // 权限到期了，就跳转到 login
15 | if (authEndTime <= value) return
17 |
23 |
24 |
19 |
22 | 微信
21 |
26 |
32 |
33 |
28 |
31 | QQ
30 |
35 |
41 |
42 |
37 |
40 | 微博
39 |
44 |
51 |
52 |
46 |
49 |
50 | 钉钉
48 |
56 |
57 |
58 |
59 |
61 |
63 |
64 |
68 |
70 |
71 |
73 |
74 |
75 |
76 |