14 changed files with 1355 additions and 93 deletions
--- a/build.js
+++ b/build.js
@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+
+const indexPath = path.resolve(__dirname, 'dist/index.html');
+let indexHtml = fs.readFileSync(indexPath, 'utf-8');
+const timestamp = new Date().getTime();
+
+// 正则表达式匹配JS文件引用并添加时间戳
+indexHtml = indexHtml.replace(/<script type="module" crossorigin src="([^"]+)">/g, (match, p1) => {
+  if (p1.endsWith('.js')) {
+    return `<script type="module" crossorigin src="${p1}?t=${timestamp}"></script>`;
+  }
+  return match;
+});
+fs.writeFileSync(indexPath, indexHtml);
--- a/index.html
+++ b/index.html
@ -6,6 +6,10 @@
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
+  <meta name="build-time" content="<%- buildTime%>" id="build-time">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
  <!-- <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' https://www.google-analytics.com; style-src 'self' https://animate.style"> -->
  <title></title>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,9 +9,9 @@
    "dev": "concurrently \"electron .\" \"cross-env BROWSER=none vite\"",
    "build": "vite build",
    "preview": "vite preview",
-    "build:dev": "vite build & electron-builder -w --config=./config/development.json",
-    "build:prod": "vite build & electron-builder -w --config=./config/production.json",
-    "build:xy": "vite build & electron-builder -w --config=./config/xy.json"
+    "build:dev": "vite build & node build.js & electron-builder -w --config=./config/development.json",
+    "build:prod": "vite build & node build.js & electron-builder -w --config=./config/production.json",
+    "build:xy": "vite build & node build.js & electron-builder -w --config=./config/xy.json"
  },
  "agora_electron": {
    "platform": "win32",
@ -53,6 +53,7 @@
    "electron-builder": "^23.1.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
+    "vite-plugin-html": "^3.2.2",
    "vite-plugin-resolve": "^2.5.1"
  }
 }
--- a/src/assets/icon57.png
+++ b/src/assets/icon57.png
--- a/src/components/SpeakerModeModal/index.tsx
+++ b/src/components/SpeakerModeModal/index.tsx
@ -53,14 +53,14 @@ const SpeakerModeModal = forwardRef((props: any, ref: any) => {
 })

 const FreedomMode: React.FC<Props> = ({ onClick, meetingMode }) => {
-  // 自由者模式
+  // 宫格模式
  return (
    <>
      <div className={styles.freedomMode} onClick={onClick}>
        <div className={`${meetingMode === 'FreedomMode' ? styles.active : ''}`}>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(item => <div key={item}></div>)}
        </div>
-        <span>自由者模式</span>
+        <span>宫格模式</span>
      </div>
    </>
  )
--- a/src/page/Home/index.module.scss
+++ b/src/page/Home/index.module.scss
@ -123,7 +123,7 @@

          >div:nth-child(1) {
            color: #ccc;
-            font-size: 16px;
+            font-size: 14px;
            display: flex;
            align-items: center;

--- a/src/page/Home/index.tsx
+++ b/src/page/Home/index.tsx
@ -45,6 +45,7 @@ const Home: React.FC = () => {
  ]);
  const [userInfo, setUserInfo] = useState<any>({})
  const [version, setVersion] = useState<string>('')
+  const [buildTime, setBuildTime] = useState<string>('0')
  const [update, setUpdate] = useState(false)
  const [dateInfo, setDateInfo] = useState<{
    work: string;
@ -60,6 +61,13 @@ const Home: React.FC = () => {
    window.electron.getVersion().then(res => {
      setVersion(res)
    })
+    try {
+      const buildStr = document.getElementById('build-time')?.getAttribute('content');
+      const formattedTime = dayjs(Number(buildStr)).format('YYYYMMDDHHmm');
+      setBuildTime(formattedTime)
+    } catch {
+
+    }
    const updateTime = () => {
      setDateInfo({
        work: dayjs().format('ddd'),
@ -136,7 +144,9 @@ const Home: React.FC = () => {
          </div>
          <div className='drag'>
            <div>
-              <span>版本号:{version}</span>
+              <span>V{version}-
+                <span style={{ fontSize: '12px', color: 'gray' }}>{buildTime}</span>
+              </span>
              {update ? <span>new</span> : null}
            </div>
            {update ? <div>
--- 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;
        }
      }
    }
--- 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<string>('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 = () => {
            ><img src={ImageUrl.icon3} alt="" /></div>
          </div>
          <div>
-            版本号：{version}
+            V{version}-
+            <span style={{ fontSize: '12px', color: 'gray' }}>{buildTime}</span>
          </div>
        </div>
      </div>
--- 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,28 +1036,33 @@
  }

  .modePopover {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
    >div {
-      width: 140px;
-      height: 30px;
+      display: flex;
+      align-items: center;
+
+      >div {
+        width: 100px;
+        padding: 10px 0;
        line-height: 30px;
        border-radius: 5px;
-      margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
+        flex-direction: column;
        justify-content: center;
+        margin-right: 20px;

        >span {
          color: #EEEEEE;
        }

        >img {
-        height: 16px;
-        margin-right: 10px;
-      }
-
-      &:last-child {
-        margin: 0;
+          height: 30px;
+          margin-bottom: 4px;
        }
      }

@ -963,6 +1077,33 @@
          background-color: darken(#101418, 4%);
        }
      }
+
+      .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;
+      }
+    }
+
+    >span {
+      margin-top: 4px;
+      color: white;
+
+      >span {
+        margin-left: 4px;
+      }
+    }
  }

 }
--- 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<any>('')
@ -217,6 +217,7 @@ const Meeting: React.FC = () => {
    }
  });
  const [isVideoFullScreen, setIsVideoFullScreen] = useState<boolean>(false)
+  const [_freedomModeStatus, setFreedomModeStatus] = useState<boolean>(false)
  const [observer, setObserver] = useState<IntersectionObserver>()
  const [_activeSpeaker, setActiveSpeaker] = useState('')
  let userInfo = JSON.parse(storage.getItem('user') as string)
@ -235,7 +236,6 @@ const Meeting: React.FC = () => {
      }
    })
    setKeyOpenChildWindow('shareScreenWindow', false)
-    setMeetingMode('StandardMode');
    agoraInit()
    storage.setItem('noViewChatList', 0)
    window.addEventListener('customStorageChange', handleCustomStorageChange);
@ -639,18 +639,36 @@ const Meeting: React.FC = () => {
    if (isShare) {
      const item = roomUserList.find((item: any) => item.screenShareId === String(isShare))
      setIsShareUser(item || null)
+      setMeetingMode('StandardMode')
    }
  }, [isShare, roomUserList]);

+  useEffect(() => {
+    setFreedomModeStatus((res: boolean) => {
+      if (meetingMode === 'FreedomMode') {
+        return true
+      } else {
+        if (res) {
+          getShowUser(true)
+        }
+        return false
+      }
+    })
+  }, [meetingMode]);
+
  useEffect(() => {
    roomUserList.forEach(async (item: any) => {
+      if (meetingMode === "FreedomMode") {
+        await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamHigh, true)
+      } else {
        if (item.uid === currentVideoId) {
          await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamHigh, true)
        } else {
          await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamLow, true)
        }
+      }
    });
-  }, [currentVideoId, roomUserList]);
+  }, [currentVideoId, roomUserList, meetingMode]);

  useEffect(() => {
    let item = roomUserList.find((item: any) => currentVideoId == item.uid)
@ -723,7 +741,13 @@ const Meeting: React.FC = () => {
          break;
        // 扩展操作
        case 'Operation':
-          switch (item.contentString) {
+          try {
+            const temp = JSON.parse(item.contentString)
+            if (temp.type === 'mode') {
+              temp.msg ? message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`) : null;
+              setMeetingMode(temp.mode)
+            }
+          } catch (error) {

          }
          break;
@ -739,7 +763,7 @@ const Meeting: React.FC = () => {
          break;
        // 更新视图模式
        case 'RefreshView':
-          setMeetingMode(item.type)
+
          break;
        // 全员看他
        case 'ShowUser':
@ -990,7 +1014,7 @@ const Meeting: React.FC = () => {
                uid: temp.uid,
                enableMicr: temp.enableMicr
              })
-            } else {
+            } else if (temp.type === 'video') {
              await PostOpenCamera({
                roomNum: temp.roomNum,
                uid: temp.uid,
@ -1581,7 +1605,11 @@ const Meeting: React.FC = () => {
          item.isShow = true;
        }
      });
-      setIsAdmin(res.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length)
+      const peoPleLength = res.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length
+      setIsAdmin(peoPleLength)
+      if (peoPleLength > 6) {
+        setMeetingMode('StandardMode')
+      }
      return res
    })
  }
@ -1713,7 +1741,8 @@ const Meeting: React.FC = () => {
    })
  }
  // 渲染视频
-  const renderVideo = async (uid: string = ''): Promise<void> => {
+  const renderVideo = async (uid: string = '', bool: boolean = false): Promise<void> => {
+    if (!bool) {
      if (isClickLock) {
        return
      }
@ -1724,6 +1753,7 @@ const Meeting: React.FC = () => {
      } else {
        uid = userInfo.uid
      }
+    }
    await agora.destroyRendererByView(`video-source-camera-primary`)
    await agora.destroyRendererByView(`video-source-screen`)
    await agora.destroyRendererByView(`video-source-remote-screen`)
@ -1760,11 +1790,11 @@ const Meeting: React.FC = () => {
    }, 500);
  }
  // 全员观看
-  const getShowUser = async (): Promise<void> => {
+  const getShowUser = async (bool: boolean = false): Promise<void> => {
    if (location.href.indexOf('/meeting') !== -1) {
      await GetShowUser(state.channelId).then(async (res) => {
        if (res.code === 200 && res.data) {
-          renderVideo(res.data)
+          renderVideo(res.data, bool)
        }
      })
    }
@ -2144,6 +2174,14 @@ const Meeting: React.FC = () => {
      await PostStopSharedScreen(state.channelId)
    } else {
      await PostShowUser(state.channelId, uid, name)
+      await window.electron.onInvoke('sendOper', {
+        roomNum: state.channelId,
+        contentString: JSON.stringify({
+          mode: 'StandardMode',
+          type: 'mode',
+          msg: false
+        })
+      })
    }
  }
  // 设置发言人
@ -2456,10 +2494,37 @@ const Meeting: React.FC = () => {
    })
  }
  // 获取当前模式样式
-  const getMeetingContentBodyLeftModeClass = (): string => {
+  const getMeetingContentBodyLeftModeClass = (people: Number): string => {
    switch (meetingMode) {
      case 'FreedomMode':
-        return styles.meetingContentBodyLeftFreedomMode
+        switch (people) {
+          case 1:
+            return styles.meetingContentBodyLeftFreedomModeOne;
+          case 2:
+            return styles.meetingContentBodyLeftFreedomModeTwo;
+          case 3:
+          case 4:
+            return styles.meetingContentBodyLeftFreedomModeThree;
+          case 5:
+          case 6:
+            return styles.meetingContentBodyLeftFreedomModeFour;
+          case 7:
+            return styles.meetingContentBodyLeftFreedomModeFive;
+          case 8:
+          case 9:
+            return styles.meetingContentBodyLeftFreedomModeSix;
+          case 10:
+          case 11:
+          case 12:
+            return styles.meetingContentBodyLeftFreedomModeSeven;
+          case 13:
+          case 14:
+          case 15:
+          case 16:
+            return styles.meetingContentBodyLeftFreedomModeEight;
+          default:
+            return styles.meetingContentBodyLeftFreedomModeNine;
+        }
      case 'StandardMode':
        return styles.meetingContentBodyLeftStandardMode
      case 'SpeakerMode':
@ -2474,10 +2539,10 @@ const Meeting: React.FC = () => {
    return ''
  }
  // 获取当前模式文字
-  const getMeetingContentBodyLeftModeText = (): string => {
-    switch (meetingMode) {
+  const getMeetingContentBodyLeftModeText = (mode?: string): string => {
+    switch (mode || meetingMode) {
      case 'FreedomMode':
-        return '自由者模式'
+        return '宫格模式'
      case 'StandardMode':
        return '标准模式'
      case 'SpeakerMode':
@ -2575,6 +2640,31 @@ const Meeting: React.FC = () => {
    }
    message.success('操作成功')
  }
+  // 设置模式
+  const setSyncView = (mode: string) => {
+    if (meetingMode === mode) {
+      setModeOpen(false)
+      return message.error(`${getMeetingContentBodyLeftModeText(mode)}已开启，请勿重复操作!`)
+    }
+    if (isAdmin > 6 && mode === 'FreedomMode') {
+      setModeOpen(false)
+      return message.error('发言人数超过6人,无法使用宫格模式!')
+    }
+    if (isShare && mode === 'FreedomMode') {
+      setModeOpen(false)
+      return message.error('共享中，无法切换模式')
+    }
+    window.electron.onInvoke('sendOper', {
+      roomNum: state.channelId,
+      contentString: JSON.stringify({
+        mode,
+        type: 'mode',
+        msg: true,
+      })
+    })
+    setModeOpen(false)
+    storage.setItem('meetingMode', mode)
+  }
  // 判断是否出现滚动条
  const hasScrollbar = () => {
    let element = document.getElementById('videoView') as HTMLDivElement
@ -2604,6 +2694,9 @@ const Meeting: React.FC = () => {
    <>
      <div className={styles.meeting} onClick={() => {
        setContextMenu('')
+        if (modeOpen) {
+          setModeOpen(false)
+        }
        setIsNetworkQuality(false)
      }}>
        {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
@ -2773,28 +2866,33 @@ const Meeting: React.FC = () => {
            <span className='drag' style={{ marginTop: '2px', marginLeft: '4px' }}><Code roomNum={state.channelId}></Code></span>
          </div>
          <div className='drag'>
-            <Popover
+            {role.ID.includes(userInfo.roleId) ? <Popover
              content={
                <div className='modePopover'>
-                  <div onClick={() => {
-                    setModeOpen(false)
-                    storage.setItem('meetingMode', 'StandardMode')
+                  <div>
+                    <div className={meetingMode === 'FreedomMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('FreedomMode')
+                    }}>
+                      <img src={ImageUrl.icon57} alt="" />
+                      <span>宫格模式</span>
+                    </div>
+                    <div className={meetingMode === 'StandardMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('StandardMode')
                    }}>
                      <img src={ImageUrl.icon43} alt="" />
                      <span>标准模式</span>
                    </div>
-                  <div onClick={() => {
-                    setModeOpen(false)
-                    storage.setItem('meetingMode', 'SpeakerMode')
+                    <div className={meetingMode === 'SpeakerMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('SpeakerMode')
                    }}>
                      <img src={ImageUrl.icon44} alt="" />
                      <span>演讲模式</span>
                    </div>
-                  <div onClick={() => {
-                    setModeOpen(false)
-                  }}>
-                    <span>取消</span>
                  </div>
+                  <span>
+                    <ExclamationCircleFilled />
+                    <span>改变布局将对所有成员生效</span>
+                  </span>
                </div>
              }
              title=""
@ -2803,10 +2901,14 @@ const Meeting: React.FC = () => {
              onOpenChange={() => setModeOpen(true)}
            >
              <div className={styles.meetingGrayButton}>
-                {meetingMode === 'StandardMode' ? <img src={ImageUrl.icon43} alt="" /> : <img src={ImageUrl.icon44} alt="" />}
+                {meetingMode === 'StandardMode' ?
+                  <img src={ImageUrl.icon43} alt="" /> :
+                  meetingMode === 'FreedomMode' ?
+                    <img src={ImageUrl.icon57} alt="" /> :
+                    <img src={ImageUrl.icon44} alt="" />}
                <span>{getMeetingContentBodyLeftModeText()}</span>
              </div>
-            </Popover>
+            </Popover> : null}
            <Operation></Operation>
          </div>
        </div>
@ -2814,7 +2916,7 @@ const Meeting: React.FC = () => {
          <div className={styles.meetingContentBody}>
            <div className={`${styles.meetingContentBodyLeft} drag`}>
              {isAdmin && currentLookUserAccount ? getSettingIcon() : null}
-              <div className={getMeetingContentBodyLeftModeClass()} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
+              <div className={getMeetingContentBodyLeftModeClass(isAdmin)} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
                {roomUserList.map((item: any, index: number) => {
                  return (item.isRoom && item.isAdmin ? <div
                    id={item.uid}
@ -2939,7 +3041,13 @@ const Meeting: React.FC = () => {
                  </div> : null)
                }
                )}
-                {hasScrollbar() ? <div>
+                {/* <div className={`${styles.meetingContentSwiperCard}`}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                    </div>
+                  </div>
+                </div> */}
+                {meetingMode !== "FreedomMode" && hasScrollbar() ? <div>
                  {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
                    const container = document.getElementById('videoView') as HTMLElement;
                    container.scrollLeft -= 100
@ -2963,7 +3071,7 @@ const Meeting: React.FC = () => {
                    <CaretDownOutlined />
                  </div>}
                </div> : null}
-                {currentLookUserStatus === 0 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 0 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                      {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2974,7 +3082,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 1 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 1 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                      {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2986,7 +3094,7 @@ const Meeting: React.FC = () => {
                    {meetingContentUser(currentLookUserAccount, true)}
                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
                  </div> : null}
-                {currentLookUserStatus === 2 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 2 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2997,7 +3105,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 3 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 3 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -3008,7 +3116,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 4 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 4 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
--- 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,
 }
--- 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 {