{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(item => )}
- 自由者模式
+ 宫格模式
- 版本号:{version}
+ V{version}-
+ {buildTime}
+
{update ? new : null}
{update ?
diff --git a/src/page/Login/index.module.scss b/src/page/Login/index.module.scss
index df56c51..e6c1305 100644
--- a/src/page/Login/index.module.scss
+++ b/src/page/Login/index.module.scss
@@ -129,7 +129,7 @@
flex-shrink: 0;
color: #ccc;
text-align: right;
- font-size: 16px;
+ font-size: 14px;
}
}
}
diff --git a/src/page/Login/index.tsx b/src/page/Login/index.tsx
index 03d9011..92dd562 100644
--- a/src/page/Login/index.tsx
+++ b/src/page/Login/index.tsx
@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from 'uuid';
import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Index';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { isVersion } from '@/utils/package/public';
+import dayjs from 'dayjs';
const { confirm } = Modal;
const Login: React.FC = () => {
const navigate = useNavigate();
@@ -39,6 +40,7 @@ const Login: React.FC = () => {
nickName: '',
roomNum: '',
})
+ const [buildTime, setBuildTime] = useState('0')
const [nameModal, setNameModal] = useState(false)
const [env, setEnv] = useState('')
useEffect(() => {
@@ -50,6 +52,13 @@ const Login: React.FC = () => {
window.electron.getEnv().then(res => {
setEnv(res)
})
+ try {
+ const buildStr = document.getElementById('build-time')?.getAttribute('content');
+ const formattedTime = dayjs(Number(buildStr)).format('YYYYMMDDHHmm');
+ setBuildTime(formattedTime)
+ } catch {
+
+ }
if (storage.getItem('login')) {
const login = JSON.parse(storage.getItem('login') as string);
const data = {
@@ -319,7 +328,8 @@ const Login: React.FC = () => {
>
- 版本号：{version}
+ V{version}-
+ {buildTime}
diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index d3f1e92..4b7c01c 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -10,7 +10,7 @@
.meetingContentUserName {
display: flex;
align-items: center;
- background-color: #0000009E;
+ background-color: rgba(0, 0, 0, 0.62);
border-radius: 6px;
height: 24px;
padding: 0 4px;
@@ -285,14 +285,126 @@
}
}
+ // 宫格模式
+ // 1
+ .meetingContentBodyLeftFreedomModeOne {
+ width: 100%;
+ height: 100%;
- // 自由者模式
- .meetingContentBodyLeftFreedomMode {
+ .meetingContentSwiperCard {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ // 2
+ .meetingContentBodyLeftFreedomModeTwo {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ .meetingContentSwiperCard {
+ width: 50%;
+ height: 100%;
+ }
+ }
+
+ // 3 4
+ .meetingContentBodyLeftFreedomModeThree {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
- overflow-y: auto;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: 50%;
+ height: 50%;
+ }
+ }
+
+ //5 6
+ .meetingContentBodyLeftFreedomModeFour {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 3);
+ height: 50%;
+ }
+ }
+
+ // 7
+ .meetingContentBodyLeftFreedomModeFive {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 4);
+ height: 50%;
+ }
+ }
+
+ //8 9
+ .meetingContentBodyLeftFreedomModeSix {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 3);
+ height: calc(100% / 3);
+ }
+ }
+
+ // 10 11 12
+ .meetingContentBodyLeftFreedomModeSeven {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 4);
+ height: calc(100% / 3);
+ }
+ }
+
+ // 13 14 15 16
+ .meetingContentBodyLeftFreedomModeEight {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 4);
+ height: calc(100% / 4);
+ }
+ }
+
+ // 17 18 19 20
+ .meetingContentBodyLeftFreedomModeNine {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .meetingContentSwiperCard {
+ width: calc(100% / 5);
+ height: calc(100% / 4);
+ }
}
// 标准模式
@@ -309,9 +421,6 @@
.meetingContentSwiperCard {
width: 100%;
- }
-
- .meetingContentSwiperCard {
height: 160px;
}
}
@@ -927,40 +1036,72 @@
}
.modePopover {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
>div {
- width: 140px;
- height: 30px;
- line-height: 30px;
- border-radius: 5px;
- margin-bottom: 8px;
- cursor: pointer;
display: flex;
align-items: center;
- justify-content: center;
- >span {
- color: #EEEEEE;
+ >div {
+ width: 100px;
+ padding: 10px 0;
+ line-height: 30px;
+ border-radius: 5px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ margin-right: 20px;
+
+ >span {
+ color: #EEEEEE;
+ }
+
+ >img {
+ height: 30px;
+ margin-bottom: 4px;
+ }
}
- >img {
- height: 16px;
- margin-right: 10px;
+ >div {
+ background-color: #101418;
+
+ &:hover {
+ background-color: lighten(#101418, 4%);
+ }
+
+ &:active {
+ background-color: darken(#101418, 4%);
+ }
}
- &:last-child {
- margin: 0;
+ .active {
+ background-color: lighten(#101418, 8%);
+ cursor: not-allowed;
+
+ &:hover {
+ background-color: lighten(#101418, 8%);
+ }
+
+ &:active {
+ background-color: lighten(#101418, 8%);
+ }
+ }
+
+ :last-child {
+ margin-right: 0px;
}
}
- >div {
- background-color: #101418;
+ >span {
+ margin-top: 4px;
+ color: white;
- &:hover {
- background-color: lighten(#101418, 4%);
- }
-
- &:active {
- background-color: darken(#101418, 4%);
+ >span {
+ margin-left: 4px;
}
}
}
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 23d798d..549bb41 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -184,7 +184,7 @@ const Meeting: React.FC = () => {
const [isClickLock, setIsClickLock] = useState(false)
const [open, setOpen] = useState(false)
const [modeOpen, setModeOpen] = useState(false)
- const [meetingMode, setMeetingMode] = useState('')
+ const [meetingMode, setMeetingMode] = useState('FreedomMode')
const [userSearchValue, setUserSearchValue] = useState('')
const [noViewChatList, setNoViewChatList] = useState(0)
const [currentLookUserAccount, setCurrentLookUserAccount] = useState {
setContextMenu('')
+ if (modeOpen) {
+ setModeOpen(false)
+ }
setIsNetworkQuality(false)
}}>
{isScreenCapture ?
@@ -2814,7 +2916,7 @@ const Meeting: React.FC = () => {
@@ -2773,28 +2866,33 @@ const Meeting: React.FC = () => {
-
-
+ : null}
{
- setModeOpen(false)
- storage.setItem('meetingMode', 'StandardMode')
- }}>
- 
- 标准模式
-
- {
- setModeOpen(false)
- storage.setItem('meetingMode', 'SpeakerMode')
- }}>
- 
- 演讲模式
-
- {
- setModeOpen(false)
- }}>
- 取消
+
}
title=""
@@ -2803,10 +2901,14 @@ const Meeting: React.FC = () => {
onOpenChange={() => setModeOpen(true)}
>
+
+
+ {
+ setSyncView('FreedomMode')
+ }}>
+ 
+ 宫格模式
+
+ {
+ setSyncView('StandardMode')
+ }}>
+
+ 标准模式
+
+ {
+ setSyncView('SpeakerMode')
+ }}>
+
+ 演讲模式
+
- {meetingMode === 'StandardMode' ? : }
+ {meetingMode === 'StandardMode' ?
+ :
+ meetingMode === 'FreedomMode' ?
+ :
+ }
{getMeetingContentBodyLeftModeText()}
-
{isAdmin && currentLookUserAccount ? getSettingIcon() : null}
-
+
{roomUserList.map((item: any, index: number) => {
return (item.isRoom && item.isAdmin ?
{
: null)
}
)}
- {hasScrollbar() ?
+ {/*
+
*/}
+ {meetingMode !== "FreedomMode" && hasScrollbar() ?
+
+
+
+
{meetingMode === "StandardMode" ?
: null}
- {currentLookUserStatus === 0 ?
+ {meetingMode !== "FreedomMode" && currentLookUserStatus === 0 ?
{
const container = document.getElementById('videoView') as HTMLElement;
container.scrollLeft -= 100
@@ -2963,7 +3071,7 @@ const Meeting: React.FC = () => {
}
{
@@ -2974,7 +3082,7 @@ const Meeting: React.FC = () => {
setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)}
: null}
- {currentLookUserStatus === 1 ?
+ {meetingMode !== "FreedomMode" && currentLookUserStatus === 1 ?
{
@@ -2986,7 +3094,7 @@ const Meeting: React.FC = () => {
{meetingContentUser(currentLookUserAccount, true)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
: null}
- {currentLookUserStatus === 2 ?
+ {meetingMode !== "FreedomMode" && currentLookUserStatus === 2 ?
@@ -2997,7 +3105,7 @@ const Meeting: React.FC = () => {
setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)}
: null}
- {currentLookUserStatus === 3 ?
+ {meetingMode !== "FreedomMode" && currentLookUserStatus === 3 ?
@@ -3008,7 +3116,7 @@ const Meeting: React.FC = () => {
setIsVideoFullScreen(true)} />}
{meetingContentUser(currentLookUserAccount, true)}
: null}
- {currentLookUserStatus === 4 ?
+ {meetingMode !== "FreedomMode" && currentLookUserStatus === 4 ?
diff --git a/src/utils/package/imageUrl.ts b/src/utils/package/imageUrl.ts
index 2c349a4..7cbd15c 100644
--- a/src/utils/package/imageUrl.ts
+++ b/src/utils/package/imageUrl.ts
@@ -86,6 +86,7 @@ import icon54 from '@/assets/icon54.png'
import icon55 from '@/assets/icon55.png'
import icon56 from '@/assets/icon56.png'
import icon56Active from '@/assets/icon56-active.png'
+import icon57 from '@/assets/icon57.png'
export default {
loading,
icon,
@@ -174,5 +175,6 @@ export default {
icon54,
icon55,
icon56,
- icon56Active
+ icon56Active,
+ icon57,
}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c700f85..3d499eb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
import pxtovw from 'postcss-px-to-viewport-8-plugin'
import { resolve as resolvePath } from 'path'
import resolve from 'vite-plugin-resolve';
+import { createHtmlPlugin } from 'vite-plugin-html';
const loder_pxtovw = pxtovw({
viewportWidth: 1900,
viewportUnit: 'vw',
@@ -51,6 +52,20 @@ export default defineConfig({
base: './', // 这里更改打包相对绝对路径
plugins: [
react(),
+ createHtmlPlugin({
+ minify: false,
+ pages: [
+ {
+ template: 'index.html',
+ filename: 'index.html',
+ injectOptions: {
+ data: {
+ buildTime: +new Date()
+ }
+ }
+ }
+ ]
+ }),
resolve({
'agora-electron-sdk': `
const {