marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

图片路径优化

This commit is contained in:
yj 2024-07-11 10:43:26 +08:00
parent 58d109069c
commit c5086bcf1a
12 changed files with 175 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -14,7 +14,6 @@
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="module" src="/src/utils/package/agora.js"></script>
</body>
</html>

24
main.js
View File

@ -138,21 +138,17 @@ app.on('ready', () => {
});
// 下载文件并放置选择的文件夹
ipcMain.handle('dwFile', (event, url) => {
// dialog.showOpenDialog(mainWindow, {
// properties: ['openDirectory']
// }).then(result => {
// if (!result.canceled) {
// const selectedPath = result.filePaths[0];
// win.webContents.on('will-download', (event, item, webContents) => {
// console.log('Selected download folder:', selectedPath);
// console.log(url);
// item.setSavePath(`${selectedPath}/${url}`);
// item.resume();
// });
// }
// }).catch(err => {
dialog.showOpenDialog(mainWindow, {
properties: ['openDirectory']
}).then(result => {
if (!result.canceled) {
const selectedPath = result.filePaths[0];
console.log('Selected download folder:', selectedPath);
console.log(url);
}
}).catch(err => {
// });
});
});
// 导出是否全屏
ipcMain.handle('getIsMaximized', () => {

2
src/App.tsx
View File

@ -63,10 +63,12 @@ const App: React.FC = () => {
width: window.innerWidth,
height: window.innerHeight,
});
try {
window.electron.getIsMaximized().then((res: boolean) => {
const dom = document.getElementById('root') as any;
dom.style.borderRadius = res ? '0px' : '10px'
})
} catch { }
};
const handleCustomStorageChange = (e: any): void => {
if (e.key === 'loading') {

BIN
src/assets/videoImg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 113 KiB

11
src/components/Operation/index.tsx
View File

@ -1,4 +1,5 @@
import styles from '@/components/Operation/index.module.scss'
import ImageUrl from '@/utils/package/imageUrl';
import { useEffect, useState } from "react";
type OperationKeyType = 'minimize' | 'quit' | 'maximize' | 'unmaximize';
type OperationType = {
@ -14,7 +15,7 @@ const Operation: React.FC = () => {
height: window.innerHeight,
});
const [operationList, setOperationList] = useState<OperationType[]>([{
icon: '/src/assets/icon17.png',
icon: ImageUrl.icon17,
key: 'minimize',
title: '最小化',
onClick: (key: OperationKeyType) => {
@ -23,7 +24,7 @@ const Operation: React.FC = () => {
show: true,
},
{
icon: '/src/assets/icon20.png',
icon: ImageUrl.icon20,
key: 'maximize',
title: '最大化',
onClick: (key: OperationKeyType) => {
@ -32,7 +33,7 @@ const Operation: React.FC = () => {
show: true,
},
{
icon: '/src/assets/icon19.png',
icon: ImageUrl.icon19,
key: 'unmaximize',
title: '还原大小',
onClick: (key: OperationKeyType) => {
@ -41,7 +42,7 @@ const Operation: React.FC = () => {
show: false,
},
{
icon: '/src/assets/icon18.png',
icon: ImageUrl.icon18,
key: 'quit',
title: '关闭',
onClick: (key: OperationKeyType) => {
@ -66,9 +67,11 @@ const Operation: React.FC = () => {
}, []);
const getIsMaximized = (): void => {
try {
window.electron.getIsMaximized().then((res: boolean) => {
changeOperationList(res ? 'maximize' : 'unmaximize')
})
} catch { }
}
const changeOperationList = (str: OperationKeyType): void => {

11
src/page/Home/Index/index.tsx
View File

@ -4,6 +4,7 @@ import Operation from '@/components/Operation';
import { useNavigate } from 'react-router-dom';
import { Button, Input, Modal, Pagination, Empty, message } from "antd";
import { GetRoom, PostRomm, GetCheckoutRoomNum, GetRoomRtcToken, GetRoomInfo } from '@/api/Home/Index';
import ImageUrl from '@/utils/package/imageUrl'
const Index: React.FC = () => {
const navigate = useNavigate();
const [list, setList] = useState({
@ -67,7 +68,7 @@ const Index: React.FC = () => {
</div>
<div className={styles.indexBtns}>
<Button type="primary"
icon={<img src="/src/assets/icon8.png" alt="" />}
icon={<img src={ImageUrl.icon8} alt="" />}
className='m-ant-btn drag'
onClick={() => {
setCreateRoomFrom({
@ -83,7 +84,7 @@ const Index: React.FC = () => {
setJoinRoomFrom('')
setJoinRoomModal(true)
}}
icon={<img src="/src/assets/icon7.png" alt="" />}
icon={<img src={ImageUrl.icon7} alt="" />}
className={`${styles.indexBtnsJoin} drag`}>
加入会议
</Button>
@ -99,14 +100,14 @@ const Index: React.FC = () => {
<div>
<div>{item.roomName}</div>
<div>
<img src="/src/assets/icon11.png" alt="" />
<img src={ImageUrl.icon11} alt="" />
<span>{item.onlineUserCount}人</span>
</div>
</div>
<div>
<div onClick={() => copyRoomNum(item.roomNum)} title='复制房间号'>
<span>{item.roomNum}</span>
<img src="/src/assets/icon10.png" alt="" />
<img src={ImageUrl.icon10} alt="" />
</div>
<div>
@ -126,7 +127,7 @@ const Index: React.FC = () => {
}
})
}}
icon={<img src="/src/assets/icon9.png" alt="" />}
icon={<img src={ImageUrl.icon9} alt="" />}
className='m-ant-btn'>
进入
</Button>

5
src/page/Home/User/index.tsx
View File

@ -5,6 +5,7 @@ import { Button, Input, Table, Pagination, Modal, message, Select } from "antd";
import { SearchOutlined } from '@ant-design/icons';
import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList } from '@/api/Home/User';
import * as CryptoJS from 'crypto-js';
import ImageUrl from '@/utils/package/imageUrl';
const { Column } = Table
const User: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@ -95,12 +96,12 @@ const User: React.FC = () => {
}
})
}}
icon={<img src="/src/assets/icon8.png" alt="" />}
icon={<img src={ImageUrl.icon8} alt="" />}
className='m-ant-btn'>
添加用户
</Button>
<Button type="primary"
icon={<img src="/src/assets/icon21.png" alt="" />}
icon={<img src={ImageUrl.icon21} alt="" />}
className={styles.userBtnsDel}
onClick={() => {
setDeleteUserPawModal(true)

16
src/page/Home/index.tsx
View File

@ -5,10 +5,12 @@ import { Popconfirm } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'
import { storage } from '@/utils';
import ImageUrl from '@/utils/package/imageUrl'
dayjs.locale('zh-cn');
type navListType = {
title: string;
icon: string;
iconActive: string;
path: string;
isHover: boolean;
isActive: boolean;
@ -19,14 +21,16 @@ const Home: React.FC = () => {
const [navList, setNavList] = useState<navListType[]>([
{
title: '首页',
icon: '/src/assets/icon12',
icon: ImageUrl.icon12,
iconActive: ImageUrl.icon12Active,
isHover: false,
isActive: true,
path: '/home/index'
},
{
title: '人员',
icon: '/src/assets/icon13',
icon: ImageUrl.icon13,
iconActive: ImageUrl.icon13Active,
isHover: false,
isActive: false,
path: '/home/user'
@ -80,12 +84,12 @@ const Home: React.FC = () => {
<div className={styles.homeLeft}>
<div className='drag'>
<div>
<img src="/src/assets/avatar.png" alt="" />
<img src={ImageUrl.avatar} alt="" />
</div>
<span>欢迎您，{userInfo?.userName}</span>
</div>
<div>
<img src="/src/assets/icon14.png" alt="" />
<img src={ImageUrl.icon14} alt="" />
<div>
<div>
<span>{dateInfo.time}</span>
@ -106,8 +110,8 @@ const Home: React.FC = () => {
onClick={() => changtNavList(index)}>
<div>
{item.isHover || item.isActive ?
<img src={item.icon + '-active.png'} alt="" /> :
<img src={item.icon + '.png'} alt="" />}
<img src={item.iconActive} alt="" /> :
<img src={item.icon} alt="" />}
</div>
<span>{item.title}</span>
</div>

14
src/page/Login/index.tsx
View File

@ -7,6 +7,8 @@ import { storage } from '@/utils'
import { GetCheckUser, PostLogin } from '@/api/Login'
import * as CryptoJS from 'crypto-js';
import { startSignalr } from '@/utils/package/signalr'
import ImageUrl from '@/utils/package/imageUrl'
const Login: React.FC = () => {
const navigate = useNavigate();
const [accountPasswordStatus, setAccountPasswordStatus] = useState<boolean>(false);
@ -136,15 +138,15 @@ const Login: React.FC = () => {
<>
<div className={styles.login}>
<div className={styles.loginBg}>
<img src="/src/assets/icon1.png" alt="" />
<img src={ImageUrl.icon1} alt="" />
</div>
<div className={styles.loginContent}>
<div>
<div className={styles.quit}>
<img src="/src/assets/icon2.png" alt="" title='退出' className='drag' onClick={quitClick} />
<img src={ImageUrl.icon2} alt="" title='退出' className='drag' onClick={quitClick} />
</div>
<div className={styles.logo}>
<img src="/src/assets/icon4.png" alt="" />
<img src={ImageUrl.icon4} alt="" />
</div>
</div>
<div>
@ -167,7 +169,7 @@ const Login: React.FC = () => {
className={`${styles.loginInputIcon} drag`}
style={{ marginBottom: '12px' }}
placeholder="请输入账号"
prefix={<img src="/src/assets/icon5.png" alt="" />}
prefix={<img src={ImageUrl.icon5} alt="" />}
suffix={
<span
style={{ color: '#47D3D0', cursor: 'pointer' }}
@ -196,7 +198,7 @@ const Login: React.FC = () => {
className={`${styles.loginInputIcon} drag`}
style={{ marginBottom: '36px' }}
placeholder="请输入密码"
prefix={<img src="/src/assets/icon6.png" alt="" />}
prefix={<img src={ImageUrl.icon6} alt="" />}
/>
<Button type="primary" className={`${styles.loginButton} drag m-ant-btn`} onClick={loginClick} style={{ width: '100%' }}>登录</Button>
<div className={`${styles.operation} drag`}>
@ -219,7 +221,7 @@ const Login: React.FC = () => {
<div>
<Input placeholder="输入会议号" className={`${styles.loginInput}`} />
</div>
<div><img src="/src/assets/icon3.png" alt="" /></div>
<div><img src={ImageUrl.icon3} alt="" /></div>
</div> */}
</div>
</div>

4
src/page/Meeting/index.module.scss
View File

@ -117,7 +117,7 @@
.meetingContentSwiperCardVdeio {
width: 100%;
height: 100%;
background: black url('/src/assets/error.png') no-repeat center/30%;
background: black;
}
}
}
@ -132,7 +132,7 @@
.meetingContentVideoDom {
width: 100%;
height: 100%;
background: black url('/src/assets/error.png') no-repeat center/30%;
background: black;
}
}

52
src/page/Meeting/index.tsx
View File

@ -13,6 +13,7 @@ import { thumbImageBufferToBase64 } from '@/utils/package/base64'
import { storage } from '@/utils';
import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting';
import axios from 'axios';
import ImageUrl from '@/utils/package/imageUrl'
const { Column } = Table
const Meeting: React.FC = () => {
const navigate = useNavigate();
@ -34,56 +35,59 @@ const Meeting: React.FC = () => {
[
{
title: '关闭声音',
icon: '/src/assets/icon22',
icon: ImageUrl.icon22,
iconActive: ImageUrl.icon22Active,
active: false,
},
{
title: '关闭视频',
icon: '/src/assets/icon23',
icon: ImageUrl.icon23,
iconActive: ImageUrl.icon23Active,
active: false,
},
],
[
{
title: '共享屏幕',
icon: '/src/assets/icon24',
icon: ImageUrl.icon24,
active: false,
},
{
title: '共享文件',
icon: '/src/assets/icon25',
icon: ImageUrl.icon25,
active: false,
},
{
title: '邀请人员',
icon: '/src/assets/icon26',
icon: ImageUrl.icon26,
active: false,
},
{
title: '录制',
icon: '/src/assets/icon27',
icon: ImageUrl.icon27,
iconActive: ImageUrl.icon27Active,
active: false,
},
{
title: '设置向导',
icon: '/src/assets/icon28',
icon: ImageUrl.icon28,
active: false,
},
{
title: '结束',
icon: '/src/assets/icon29',
icon: ImageUrl.icon29,
active: false,
},
],
[
{
title: '成员列表',
icon: '/src/assets/icon30',
icon: ImageUrl.icon30,
active: false,
},
{
title: '聊天',
icon: '/src/assets/icon31',
icon: ImageUrl.icon31,
active: false,
},
],
@ -330,7 +334,7 @@ const Meeting: React.FC = () => {
<div className={styles.meetingUserList}>
<div className={styles.meetingUserListTitle}>
<span>成员列表</span>
<img src="/src/assets/icon18.png" alt="" className='drag' onClick={() => {
<img src={ImageUrl.icon18} alt="" className='drag' onClick={() => {
setStatusList({
userList: false,
userChatList: false,
@ -342,12 +346,12 @@ const Meeting: React.FC = () => {
{list.map((item: number) =>
<div key={item} className='drag'>
<div>
<div><img src="/src/assets/avatar.png" alt="" /></div>
<div><img src={ImageUrl.avatar} alt="" /></div>
<span>潇潇<span style={{ color: '#02B188', marginLeft: '4px' }}>主持人</span></span>
</div>
<div>
<img src="/src/assets/icon22.png" alt="" />
<img src="/src/assets/icon23.png" alt="" />
<img src={ImageUrl.icon22} alt="" />
<img src={ImageUrl.icon23} alt="" />
</div>
</div>
)}
@ -361,7 +365,7 @@ const Meeting: React.FC = () => {
<div className={styles.meetingUserChat}>
<div className={styles.meetingUserChatTitle}>
<span>聊天</span>
<img src="/src/assets/icon18.png" alt="" className='drag' onClick={() => {
<img src={ImageUrl.icon18} alt="" className='drag' onClick={() => {
setStatusList({
userList: false,
userChatList: false,
@ -372,7 +376,7 @@ const Meeting: React.FC = () => {
{list.map((item: number) =>
<div key={item} className={`${styles.meetingUserChatContentLeft} drag`}>
<div>
<div><img src="/src/assets/avatar.png" alt="" /></div>
<div><img src={ImageUrl.avatar} alt="" /></div>
<span>潇潇</span>
</div>
<div>哈哈哈哈</div>
@ -418,12 +422,12 @@ const Meeting: React.FC = () => {
onOpenChange={() => setOpen(true)}
>
<div className='drag'>
<img src={row.active ? row.icon + '-active.png' : row.icon + '.png'} alt="" />
<img src={row.active ? row.iconActive : row.icon} alt="" />
<span>{row.title}</span>
</div>
</Popover> :
<div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
<img src={row.active ? row.icon + '-active.png' : row.icon + '.png'} alt="" />
<img src={row.active ? row.iconActive : row.icon} alt="" />
<span>{row.title}</span>
</div>
)
@ -495,7 +499,7 @@ const Meeting: React.FC = () => {
<div>
<span>视频预览：</span>
<video id='startPreview'
poster={'/src/assets/error.png'}
poster={ImageUrl.error}
style={{ width: '226px', height: '136px', backgroundColor: 'black' }}>
</video>
</div>
@ -504,11 +508,11 @@ const Meeting: React.FC = () => {
{stepsStatus ? <div>
<span>您可以对着麦克风说话，试听表克风的输入质量</span>
<div>
<img src="/src/assets/icon33.png" alt="" />
<img src={ImageUrl.icon33} alt="" />
<div>
<img src="/src/assets/icon34.png" alt="" />
<img src={ImageUrl.icon34} alt="" />
<div id='recordingDeviceTest'>
<img src="/src/assets/icon35.png" alt="" />
<img src={ImageUrl.icon35} alt="" />
</div>
</div>
</div>
@ -730,10 +734,10 @@ const meetingContentUser = () => {
<>
<div className={styles.meetingContentUser}>
<div className={styles.meetingContentUserRole}>
<img src="/src/assets/icon32.png" alt="" />
<img src={ImageUrl.icon32} alt="" />
</div>
<div className={styles.meetingContentUserName}>
<img src="/src/assets/icon22.png" alt="" />
<img src={ImageUrl.icon22} alt="" />
<span>张大龙</span>
</div>
</div>

92
src/utils/package/imageUrl.ts Normal file
View File

@ -0,0 +1,92 @@
import avatar from '@/assets/avatar.png'
import error from '@/assets/error.png'
import icon from '@/assets/icon.png'
import icon1 from '@/assets/icon1.png'
import icon2 from '@/assets/icon2.png'
import icon3 from '@/assets/icon3.png'
import icon4 from '@/assets/icon4.png'
import icon5 from '@/assets/icon5.png'
import icon6 from '@/assets/icon6.png'
import icon7 from '@/assets/icon7.png'
import icon8 from '@/assets/icon8.png'
import icon9 from '@/assets/icon9.png'
import icon10 from '@/assets/icon10.png'
import icon11 from '@/assets/icon11.png'
import icon12 from '@/assets/icon12.png'
import icon12Active from '@/assets/icon12-active.png'
import icon13 from '@/assets/icon13.png'
import icon13Active from '@/assets/icon13-active.png'
import icon14 from '@/assets/icon14.png'
import icon15 from '@/assets/icon15.png'
import icon15Active from '@/assets/icon15-active.png'
import icon16 from '@/assets/icon16.png'
import icon16Active from '@/assets/icon16-active.png'
import icon17 from '@/assets/icon17.png'
import icon18 from '@/assets/icon18.png'
import icon19 from '@/assets/icon19.png'
import icon20 from '@/assets/icon20.png'
import icon21 from '@/assets/icon21.png'
import icon22 from '@/assets/icon22.png'
import icon22Active from '@/assets/icon22-active.png'
import icon23 from '@/assets/icon23.png'
import icon23Active from '@/assets/icon23-active.png'
import icon24 from '@/assets/icon24.png'
import icon25 from '@/assets/icon25.png'
import icon26 from '@/assets/icon26.png'
import icon27 from '@/assets/icon27.png'
import icon27Active from '@/assets/icon27-active.png'
import icon28 from '@/assets/icon28.png'
import icon29 from '@/assets/icon29.png'
import icon30 from '@/assets/icon30.png'
import icon31 from '@/assets/icon31.png'
import icon32 from '@/assets/icon32.png'
import icon33 from '@/assets/icon33.png'
import icon34 from '@/assets/icon34.png'
import icon35 from '@/assets/icon35.png'
export default {
avatar,
error,
icon,
icon1,
icon2,
icon3,
icon4,
icon5,
icon6,
icon7,
icon8,
icon9,
icon10,
icon11,
icon12,
icon12Active,
icon13,
icon13Active,
icon14,
icon15,
icon15Active,
icon16,
icon16Active,
icon17,
icon18,
icon19,
icon20,
icon21,
icon22,
icon22Active,
icon23,
icon23Active,
icon24,
icon25,
icon26,
icon27,
icon27Active,
icon28,
icon29,
icon30,
icon31,
icon32,
icon33,
icon34,
icon35,
}