+ {
+ operationList.map((item: OperationType, index: number) => {
+ return (item.show ?
+
+
+ )
+}
+export default Operation
\ No newline at end of file
diff --git a/1.txt b/src/components/TldrawView/index.scss
similarity index 100%
rename from 1.txt
rename to src/components/TldrawView/index.scss
diff --git a/src/components/TldrawView/index.tsx b/src/components/TldrawView/index.tsx
new file mode 100644
index 0000000..0ffd680
--- /dev/null
+++ b/src/components/TldrawView/index.tsx
@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import '@/components/TldrawView/index.scss'
+import {
+ Tldraw,
+ createShapeId,
+ Editor,
+} from 'tldraw'
+import 'tldraw/tldraw.css'
+const TldrawView: React.FC = () => {
+ useEffect(() => {
+
+ });
+ return (
+ <>
+ item.onClick(item.key)}>
+ 
+
: null
+ )
+ })
+ }
+
+
+
+ )
+}
+
+export default Index
diff --git a/src/page/Home/User/index.module.scss b/src/page/Home/User/index.module.scss
new file mode 100644
index 0000000..4631c29
--- /dev/null
+++ b/src/page/Home/User/index.module.scss
@@ -0,0 +1,69 @@
+.user {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .userOperation {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .userBtns {
+ padding: 10px 0 30px;
+ margin: 0 30px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .userBtnsLeft {
+ display: flex;
+ align-items: center;
+
+ .userBtnsDel {
+ background-color: #FFCFEB;
+ color: red;
+ margin-left: 22px;
+
+ &:hover {
+ background-color: lighten(#FFCFEB, 5%) !important;
+ color: red;
+ }
+
+ &:active {
+ background-color: darken(#FFCFEB, 5%) !important;
+ color: red;
+ }
+ }
+ }
+
+ .userBtnsRight {
+ display: flex;
+ align-items: center;
+
+ >button {
+ margin-left: 20px;
+ }
+ }
+ }
+
+ .userContent {
+ flex-grow: 1;
+ padding: 30px 20px 30px 30px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ .userContentPagination {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-shrink: 0;
+
+ >span {
+ color: #8B8787;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/page/Home/User/index.tsx b/src/page/Home/User/index.tsx
new file mode 100644
index 0000000..af8ff85
--- /dev/null
+++ b/src/page/Home/User/index.tsx
@@ -0,0 +1,96 @@
+import styles from '@/page/Home/User/index.module.scss'
+import { useEffect, useState } from "react";
+import Operation from '@/components/Operation';
+import { Button, Input, Table, Pagination } from "antd";
+import { SearchOutlined } from '@ant-design/icons';
+import type { TableColumnsType } from 'antd';
+const columns: TableColumnsType = [
+ {
+ title: '姓名',
+ dataIndex: 'name',
+ },
+ {
+ title: '账号',
+ dataIndex: 'account',
+ },
+ {
+ title: '角色',
+ dataIndex: 'role',
+ },
+ {
+ title: '账号状态',
+ dataIndex: 'status',
+ render: (text) => {
+ return (
+
+
+
+ }
+ className='m-ant-btn drag'>
+ 新建会议室
+
+ }
+ className={`${styles.indexBtnsJoin} drag`}>
+ 加入会议
+
+
+
+
+
+ 会议室列表
+
+
+ {list.map((_item, index: number) => {
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+ 奉节中学期末考分析总结会议
+
+ 
+ 2人
+
+
+ 2人
+
+
+
+ 252535356565
+ 
+
+
+
+
+
+
+ {text}
+ )
+ },
+ },
+];
+
+const data = [] as any;
+for (let i = 0; i < 46; i++) {
+ data.push({
+ key: i,
+ name: `潇潇`,
+ account: 5256589545,
+ role: `教师`,
+ status: `在线`,
+ });
+}
+const User: React.FC = () => {
+ const [selectedRowKeys, setSelectedRowKeys] = useState
+
+
+ )
+}
+
+export default User
diff --git a/src/page/Home/index.module.scss b/src/page/Home/index.module.scss
new file mode 100644
index 0000000..9c0d514
--- /dev/null
+++ b/src/page/Home/index.module.scss
@@ -0,0 +1,191 @@
+.home {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ .homeLeft {
+ width: 300px;
+ background-color: rgb(31, 33, 37);
+ flex-shrink: 0;
+ padding: 20px 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ @for $i from 1 through 4 {
+ >div:nth-child(#{$i}) {
+ @if $i ==1 {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ cursor: pointer;
+
+ >div {
+ height: 50px;
+ width: 50px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 16px;
+ flex-shrink: 0;
+
+ >img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ >span {
+ color: white;
+ font-size: 16px;
+ }
+ }
+
+ @else if $i ==2 {
+ display: flex;
+ align-items: center;
+ margin: 20px 0 20px;
+ flex-shrink: 0;
+
+ >img {
+ width: 82px;
+ margin-right: 12px;
+ }
+
+ >div {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+
+ >span:nth-child(1) {
+ font-size: 36px;
+ color: white;
+ }
+
+ >span:nth-child(2) {
+ font-size: 16px;
+ color: #979797;
+ width: 16px;
+ margin-left: 10px;
+ }
+ }
+
+ >div:nth-child(2) {
+ font-size: 16px;
+ color: #979797;
+ }
+ }
+ }
+
+ @else if $i ==3 {
+ flex-grow: 1;
+ overflow-y: auto;
+
+ @for $i from 1 through 20 {
+ >div:nth-child(#{$i}) {
+ display: flex;
+ align-items: center;
+ height: 48px;
+ cursor: pointer;
+ padding: 0px 10px;
+ box-sizing: border-box;
+ border-radius: 10px;
+ margin-bottom: 10px;
+
+ >div {
+ >img {
+ width: 24px;
+ }
+ }
+
+ >span {
+ font-size: 16px;
+ color: #98989A;
+ margin-left: 20px;
+ }
+
+ &:hover {
+ background-color: rgb(47, 48, 50);
+
+ >span {
+ color: white;
+ }
+ }
+
+ }
+
+ .active {
+ background-color: #5575F2 !important;
+
+ >span {
+ color: white !important;
+ }
+ }
+ }
+ }
+
+ @else if $i ==4 {
+ border-top: #565656 solid 1px;
+ padding-top: 10px;
+ margin-top: 10px;
+
+ @for $i from 1 through 2 {
+ >div:nth-child(#{$i}) {
+ display: flex;
+ align-items: center;
+ height: 48px;
+ cursor: pointer;
+ padding: 0px 10px;
+ box-sizing: border-box;
+
+ >div {
+ width: 24px;
+ height: 24px;
+
+ @if $i ==1 {
+ background: url('/src/assets/icon16.png') no-repeat center/cover;
+ }
+
+ @else if $i ==2 {
+ background: url('/src/assets/icon15.png') no-repeat center/cover;
+ }
+
+ }
+
+ >span {
+ font-size: 16px;
+ color: #98989A;
+ margin-left: 20px;
+ }
+
+ &:hover {
+ >div {
+ @if $i ==1 {
+ background: url('/src/assets/icon16-active.png') no-repeat center/cover;
+ }
+
+ @else if $i ==2 {
+ background: url('/src/assets/icon15-active.png') no-repeat center/cover;
+ }
+ }
+
+ >span {
+ color: white;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .homeRight {
+ flex-grow: 1;
+ background-color: rgb(22, 25, 30);
+ }
+}
\ No newline at end of file
diff --git a/src/page/Home/index.tsx b/src/page/Home/index.tsx
new file mode 100644
index 0000000..d20404c
--- /dev/null
+++ b/src/page/Home/index.tsx
@@ -0,0 +1,147 @@
+import styles from '@/page/Home/index.module.scss'
+import { useEffect, useState } from "react";
+import { Outlet, useNavigate } from 'react-router-dom';
+import { Popconfirm } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn'
+dayjs.locale('zh-cn');
+type navListType = {
+ title: string;
+ icon: string;
+ path: string;
+ isHover: boolean;
+ isActive: boolean;
+}
+
+const Home: React.FC = () => {
+ const navigate = useNavigate();
+ const [navList, setNavList] = useState
+
+
+
+
+ }
+ className='m-ant-btn'>
+ 添加用户
+
+ }
+ className={styles.userBtnsDel}>
+ 删除用户
+
+
+
+ } />
+
+
+
+
+
+
+ 共653项数据
+
+
+
+
+ )
+}
+export default Home
\ No newline at end of file
diff --git a/src/page/Login/index.module.scss b/src/page/Login/index.module.scss
new file mode 100644
index 0000000..5ef2f2a
--- /dev/null
+++ b/src/page/Login/index.module.scss
@@ -0,0 +1,150 @@
+.login {
+ width: 100%;
+ height: 100%;
+ background-color: #16191E;
+ display: flex;
+
+ .loginBg {
+ flex-shrink: 0;
+ width: 370px;
+ height: 100%;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .loginContent {
+ flex-grow: 1;
+ padding: 20px 30px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+
+ @for $i from 1 through 3 {
+ >div:nth-child(#{$i}) {
+ @if $i ==1 {
+ flex-shrink: 0;
+
+ .quit {
+ display: flex;
+ justify-content: flex-end;
+
+ >img {
+ font-size: 16px;
+ cursor: pointer;
+ }
+ }
+
+ .logo {
+ margin-top: 40px;
+
+ >img {
+ width: 126px;
+ }
+ }
+ }
+
+ @else if $i ==2 {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .operation {
+ margin-top: 10px;
+
+ :global {
+ .ant-checkbox-group {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+ }
+ }
+
+ @else if $i ==3 {
+ flex-shrink: 0;
+
+ .footer {
+ display: flex;
+ align-items: center;
+
+ >div {
+ flex-grow: 1;
+ height: 1px;
+ background-color: #3F3F3F;
+ }
+
+ >span {
+ flex-shrink: 0;
+ margin: 0 4px;
+ color: #7A7A7A;
+ font-size: 12px;
+ }
+ }
+
+ .code {
+ display: flex;
+ align-items: center;
+ margin-top: 34px;
+
+ @for $i from 1 through 2 {
+ >div:nth-child(#{$i}) {
+ @if $i ==1 {
+ flex-grow: 1;
+ }
+
+ @else if $i ==2 {
+
+ flex-shrink: 0;
+ cursor: pointer;
+ height: 44px;
+ line-height: 44px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #FFCFEB;
+ border-radius: 10px;
+ width: 56px;
+ margin-left: 4px;
+ transition: 0.3s;
+
+ &:hover {
+ background-color: lighten(#FFCFEB, 5%) !important;
+ }
+
+ &:active {
+ background-color: darken(#FFCFEB, 5%) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // 登录页固定大小不允许放大缩小，固需要单独写样式~！
+ .loginInput {
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .loginInputIcon {
+ :global {
+ .ant-input {
+ height: 34px;
+ line-height: 34px;
+ }
+ }
+ }
+
+ .loginButton {
+ height: 44px;
+ line-height: 44px;
+ }
+}
\ No newline at end of file
diff --git a/src/page/Login/index.tsx b/src/page/Login/index.tsx
new file mode 100644
index 0000000..67fa65a
--- /dev/null
+++ b/src/page/Login/index.tsx
@@ -0,0 +1,192 @@
+
+import styles from '@/page/Login/index.module.scss'
+import { useEffect, useState } from "react";
+import { useNavigate } from 'react-router-dom';
+import { Input, Button, Checkbox } from "antd"
+import { storage } from '@/utils'
+const Login: React.FC = () => {
+ const navigate = useNavigate();
+ const [accountPasswordStatus, setAccountPasswordStatus] = useState
+
+
+
+
+ 
+
+ 欢迎您，u0001
+
+
+ 
+
+
+
+
+
+ {dateInfo.time}
+ {dateInfo.work}
+
+ {dateInfo.specific}
+
+ {navList.map((item: navListType, index: number) => {
+ return (
+
+ changtNavList(index, false)}
+ onMouseEnter={() => changtNavList(index, true)}
+ onClick={() => changtNavList(index)}>
+
+ )
+ })}
+
+ {item.isHover || item.isActive ?
+ 
:
+ }
+
+ {item.title}
+
+ {
+ window.electron.setMainWindowSize({
+ width: 752,
+ height: 520,
+ key: 'login'
+ })
+ navigate('/login')
+ }}
+ onCancel={() => {
+
+ }}
+ okText="确认"
+ cancelText="取消"
+ >
+
+
+
+
+ 设置
+
+
+
+ 退出
+
+
+
+
+
+
+ )
+}
+
+export default Login
diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
new file mode 100644
index 0000000..4e7fda1
--- /dev/null
+++ b/src/page/Meeting/index.module.scss
@@ -0,0 +1,579 @@
+.meeting {
+ width: 100%;
+ height: 100%;
+ background-color: rgba(16, 19, 23);
+ display: flex;
+ flex-direction: column;
+
+ .meetingHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #2C2C2C;
+ padding: 10px 0 10px 52px;
+ box-sizing: border-box;
+ flex-shrink: 0;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+
+ >div:nth-child(1) {
+ margin-right: 20px;
+ display: flex;
+ transform: rotate(180deg) scaleX(-1);
+
+ >span {
+ background-color: #02B188;
+ width: 4px;
+ margin-right: 4px;
+ }
+
+ @for $i from 1 through 4 {
+ >span:nth-child(#{$i}) {
+ height: calc(6px * #{$i} + 2px)
+ }
+ }
+ }
+
+ >div:nth-child(2) {
+ font-size: 20px;
+ color: #EEEEEE;
+ }
+ }
+
+ >div:nth-child(2) {
+ color: #EEEEEE;
+ font-size: 20px;
+ }
+
+ >div:nth-child(3) {
+ display: flex;
+ align-items: center;
+
+ .meetingGrayButton {
+ cursor: pointer;
+ background-color: #31353A;
+ color: #EEEEEE;
+ width: 154px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border-radius: 5px;
+ margin-right: 20px;
+
+ &:hover {
+ background-color: lighten(#31353A, 4%);
+ }
+
+ &:active {
+ background-color: darken(#31353A, 4%);
+ }
+ }
+
+ >div:nth-child(2) {
+ margin: -10px 0 0;
+ }
+ }
+ }
+
+ .meetingContent {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+
+ .meetingContentBody {
+ flex-grow: 1;
+ display: flex;
+
+ .meetingContentBodyLeft {
+ height: 100%;
+ width: 0px;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 18px;
+ box-sizing: border-box;
+
+ .meetingContentSwiper {
+ margin: 20px 0 12px;
+ flex-shrink: 0;
+
+ :global {
+ .swiper-slide-active {
+ border: 1px solid #EBEBEB;
+ box-sizing: border-box;
+ }
+ }
+
+ .meetingContentSwiperCard {
+ height: 196px;
+ border-radius: 10px;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+ margin: 0 auto;
+
+ .meetingContentSwiperCardVdeio {
+ width: 100%;
+ height: 100%;
+ background:black url('/src/assets/error.png') no-repeat center/30%;
+ }
+ }
+ }
+
+ .meetingContentVideo {
+ flex-grow: 1;
+ position: relative;
+ width: 1378px;
+ margin: 0 auto;
+ height: 0px;
+ display: flex;
+ .meetingContentVideoDom {
+ border: 1px red solid;
+ width: 50%;
+ height: 100%;
+ background:black url('/src/assets/error.png') no-repeat center/30%;
+ }
+ }
+
+ .meetingContentUser {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+ display: flex;
+ align-items: center;
+
+ .meetingContentUserRole {
+ background: #FDC229;
+ border-radius: 6px;
+ width: 44px;
+ height: 34px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 6px;
+
+ >img {
+ width: 20px;
+ }
+ }
+
+ .meetingContentUserName {
+ display: flex;
+ align-items: center;
+ background-color: #0000009E;
+ border-radius: 6px;
+ height: 34px;
+ padding: 0 4px;
+
+ >img {
+ width: 28px;
+ }
+
+ >span {
+ color: #EEEEEE;
+ margin-left: 4px;
+ }
+ }
+ }
+ }
+
+ .meetingContentBodyRight {
+ width: 374px;
+ flex-shrink: 0;
+ height: 100%;
+
+ .meetingUserList {
+ height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background-color: #16191E;
+ display: flex;
+ flex-direction: column;
+
+ .meetingUserListTitle {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+
+ >span {
+ color: #EEEEEE;
+ font-size: 20px;
+ }
+
+ >img {
+ cursor: pointer;
+ }
+ }
+
+ .meetingUserListContent {
+ flex-grow: 1;
+ height: 0px;
+ overflow-y: auto;
+ margin: 20px 0;
+
+ >div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-bottom: 20px;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+
+ >span {
+ font-size: 14px;
+ color: #F3F3F5;
+ margin-left: 4px;
+ }
+
+ >div {
+ width: 36px;
+ height: 36px;
+ overflow: hidden;
+ border-radius: 50%;
+
+ >img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+
+ >div:nth-child(2) {
+ display: flex;
+ align-items: center;
+
+ >img {
+ width: 17px;
+ margin-left: 4px;
+ }
+ }
+ }
+ }
+
+ .meetingUserListFooter {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ >div {
+ cursor: pointer;
+ background-color: #31353A;
+ color: #EEEEEE;
+ width: 154px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border-radius: 5px;
+
+ &:hover {
+ background-color: lighten(#31353A, 4%);
+ }
+
+ &:active {
+ background-color: darken(#31353A, 4%);
+ }
+ }
+ }
+ }
+
+ .meetingUserChat {
+ height: 100%;
+ background-color: #16191E;
+ display: flex;
+ flex-direction: column;
+
+ .meetingUserChatTitle {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #23272E;
+
+ >span {
+ color: #EEEEEE;
+ font-size: 20px;
+ }
+
+ >img {
+ cursor: pointer;
+ }
+ }
+
+ .meetingUserChatContent {
+ flex-grow: 1;
+ height: 0px;
+ overflow-y: auto;
+ padding: 20px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #23272E;
+
+ .meetingUserChatContentLeft {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+
+ >span {
+ font-size: 14px;
+ color: #F3F3F5;
+ margin-left: 4px;
+ }
+
+ >div {
+ width: 36px;
+ height: 36px;
+ overflow: hidden;
+ border-radius: 50%;
+
+ >img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+
+ >div:nth-child(2) {
+ background-color: #5575F2;
+ color: #F3F3F5;
+ max-width: 266px;
+ padding: 10px;
+ box-sizing: border-box;
+ border-radius: 0 25px 25px 25px;
+ margin: 10px 0 10px 40px;
+ }
+ }
+
+ .meetingUserChatContentRight {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+
+ >span {
+ font-size: 14px;
+ color: #F3F3F5;
+ }
+
+ >div {
+ margin-left: 4px;
+ width: 36px;
+ height: 36px;
+ overflow: hidden;
+ border-radius: 50%;
+
+ >img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+
+ >div:nth-child(2) {
+ background-color: #464E6B;
+ color: #F3F3F5;
+ max-width: 266px;
+ padding: 10px;
+ box-sizing: border-box;
+ border-radius: 25px 0 25px 25px;
+ margin: 10px 40px 10px 0;
+ }
+ }
+
+ }
+
+ .meetingUserChatInput {
+ flex-shrink: 0;
+ padding: 20px;
+ box-sizing: border-box;
+ height: 220px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ }
+ }
+ }
+ }
+
+ .meetingContentFooter {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #07090B;
+ padding: 10px 50px;
+ box-sizing: border-box;
+
+ >div {
+ display: flex;
+ align-items: center;
+
+ >div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 30px;
+ cursor: pointer;
+
+ &:last-child {
+ margin: 0;
+ }
+
+ >img {
+ height: 50px;
+ }
+
+ >span {
+ color: #EEEEEE;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+
+ }
+}
+
+:global {
+ .meetingContentFooterPopover {
+ >div {
+ width: 220px;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 5px;
+ color: #EEEEEE;
+ text-align: center;
+ margin-bottom: 16px;
+ cursor: pointer;
+
+ &:last-child {
+ margin: 0;
+ }
+ }
+
+ >div:nth-child(1) {
+ background-color: #FF5219;
+
+ &:hover {
+ background-color: lighten(#FF5219, 4%);
+ }
+
+ &:active {
+ background-color: darken(#FF5219, 4%);
+ }
+ }
+
+ >div:nth-child(2) {
+ background-color: #31353A;
+
+ &:hover {
+ background-color: lighten(#31353A, 4%);
+ }
+
+ &:active {
+ background-color: darken(#31353A, 4%);
+ }
+ }
+
+ >div:nth-child(3) {
+ background-color: #101418;
+
+ &:hover {
+ background-color: lighten(#101418, 4%);
+ }
+
+ &:active {
+ background-color: darken(#101418, 4%);
+ }
+ }
+ }
+}
+
+.sharedScreenModal {
+ display: flex;
+ flex-direction: column;
+
+ >div:nth-child(1) {
+ display: flex;
+ flex-wrap: wrap;
+ max-height: 50vh;
+ overflow-y: auto;
+ align-content: flex-start;
+ padding: 50px 0 0;
+
+ >div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: calc(100% / 4);
+ box-sizing: border-box;
+ margin-bottom: 20px;
+ cursor: pointer;
+ position: relative;
+
+ >span {
+ color: #EEEEEE;
+ font-size: 14px;
+ margin-top: 4px;
+ width: 144px;
+ text-align: center;
+ }
+
+ >div {
+ width: 144px;
+ height: 94px;
+ box-sizing: border-box;
+
+ >img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ >img {
+ position: absolute;
+ top: -20px;
+ left: 0;
+ width: 40px;
+ }
+
+ &:hover {
+ >div {
+ border: 1px solid #EBEBEB;
+ }
+ }
+ }
+
+ .active {
+ >div {
+ border: 1px solid #EBEBEB;
+ }
+ }
+ }
+
+ >div:nth-child(2) {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
new file mode 100644
index 0000000..b8b7d68
--- /dev/null
+++ b/src/page/Meeting/index.tsx
@@ -0,0 +1,355 @@
+import styles from '@/page/Meeting/index.module.scss'
+import { useEffect, useState } from "react";
+import Operation from '@/components/Operation';
+import { Navigation, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { Button, Input, Popover, Modal, Checkbox, message } from "antd";
+import { SearchOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { thumbImageBufferToBase64 } from '@/utils/package/base64'
+const Meeting: React.FC = () => {
+ const navigate = useNavigate();
+ const [statusList, setStatusList] = useState({
+ userList: false,
+ userChatList: false,
+ })
+ const [isSharedScreenModal, setIsSharedScreenModal] = useState(false);
+ const [sharedScreenList, setSharedScreenList] = useState
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ {
+ setOperation({
+ ...operation,
+ account: e.target.value
+ })
+ }}
+ className={`${styles.loginInputIcon} drag`}
+ style={{ marginBottom: '12px' }}
+ placeholder="请输入账号"
+ prefix={
}
+ suffix={
+ 重置
+
+ }
+ />
+
+ {operation.account && !accountPasswordStatus ?
+ }
+ suffix={
+ 重置
+
+ }
+ />
+
+ {operation.account && !accountPasswordStatus ?
+
+
: null}
+ {accountPasswordStatus ?
+ {
+ setOperation({
+ ...operation,
+ password: e.target.value
+ })
+ }}
+ className={`${styles.loginInputIcon} drag`}
+ style={{ marginBottom: '36px' }}
+ placeholder="请输入密码"
+ prefix={
}
+ />
+
+
: null}
+ }
+ />
+
+
+
+
+
+
+
+ or
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 00:13:45
+ 会议号：2323235
+
+
+ 演讲者模式
+
+
+
+
+
+
+ {
+ (statusList.userList || statusList.userChatList) ? (
+
+ {
+ swiper.on('click', (e: any) => {
+ swiper.slideTo(e.clickedIndex)
+ })
+ }}
+ onSlideChange={() => { }}
+ >
+ {list.map((item) =>
+
+
+ )}
+
+
+
+
+
+ {item}
+ {meetingContentUser()}
+
+
+
+ {/* */}
+ {/* {meetingContentUser()} */}
+
+
+ {statusList.userList ?
+
+ ) : null
+ }
+
+
+ :
+
+ 成员列表
+ 
{
+ setStatusList({
+ userList: false,
+ userChatList: false,
+ })
+ }} />
+
+ } />
+ {
+ setStatusList({
+ userList: false,
+ userChatList: false,
+ })
+ }} />
+
+ {list.map((item: number) =>
+
+
+
+ )}
+
+
+ 潇潇主持人
+
+
+ 
+ 
+
+
+
+
+
+ 邀请
+ 全员静音
+
+
+ }
+
+ 聊天
+ {
+ setStatusList({
+ userList: false,
+ userChatList: false,
+ })
+ }} />
+
+ {
+ setStatusList({
+ userList: false,
+ userChatList: false,
+ })
+ }} />
+
+ {list.map((item: number) =>
+
+
+
+ )}
+
+
+ 潇潇
+
+ 哈哈哈哈
+
+
+
+ {footerList.map((item, itemIndex) => {
+ return (
+
+ )
+ })}
+
+ {item.map((row, rowIndex) => {
+ return (
+ row.title === '结束' ?
+
+
+ }
+ title=""
+ trigger="click"
+ open={open}
+ onOpenChange={() => setOpen(true)}
+ >
+ {
+ navigate(-1)
+ }}>全员结束会议
+ { navigate(-1) }}>仅自己离开
+ { setOpen(false) }}>取消
+
+ 
+ {row.title}
+
+ :
+ changeStatusList(row)} key={rowIndex}>
+
+ {row.title}
+
+ )
+ })}
+
+
+
+ {sharedScreenList.map((item: any, index: number) => {
+ return (
+
+ {
+ setSharedScreenItem(item)
+ }}>
+ {item.iconDataUrl ? 
: ''}
+ 
+ {item.sourceTitle}
+
+ )
+ })}
+
+ {
+
+ }}>共享电脑音频
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Meeting
diff --git a/src/page/NotFound/index.tsx b/src/page/NotFound/index.tsx
new file mode 100644
index 0000000..f92cc77
--- /dev/null
+++ b/src/page/NotFound/index.tsx
@@ -0,0 +1,15 @@
+
+import { useEffect } from "react";
+
+const NotFound: React.FC = () => {
+ useEffect(() => {
+
+ });
+ return (
+ <>
+
+
+ )
+}
+
+export default NotFound
diff --git a/src/render.d.ts b/src/render.d.ts
new file mode 100644
index 0000000..b09e7c1
--- /dev/null
+++ b/src/render.d.ts
@@ -0,0 +1,17 @@
+// electron-env.d.ts
+export interface IElectronAPI {
+ getDesktopCapturerVideo: () => Promise
+ 
+
+
+
+
+ 张大龙
+
+
+ 张大龙
+