Commit cbc06c75 authored by rocosen's avatar rocosen

feat:基础功能

parent ca022326
......@@ -145,6 +145,7 @@
"chalk": "^4.1.2",
"concurrently": "^7.3.0",
"core-js": "^3.24.1",
"moment": "^2.22.2",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
......
<?xml version="1.0" encoding="UTF-8"?>
<svg width="192px" height="120px" viewBox="0 0 192 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 5</title>
<defs>
<linearGradient x1="33.6183035%" y1="100%" x2="33.6183035%" y2="5.98826544e-13%" id="linearGradient-1">
<stop stop-color="#EBEDF2" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#E5E8EF" offset="53.8662878%"></stop>
<stop stop-color="#D8DCE6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="95.5415697%" id="linearGradient-2">
<stop stop-color="#CDD3E1" offset="0%"></stop>
<stop stop-color="#CDD3E1" stop-opacity="0.397399476" offset="31.1672026%"></stop>
<stop stop-color="#CDD3E1" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="79.5210868%" y1="36.502654%" x2="43.538716%" y2="68.2268762%" id="linearGradient-3">
<stop stop-color="#F3F4F6" offset="0%"></stop>
<stop stop-color="#DEE2EB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="87.6946467%" y1="100%" x2="12.3053533%" y2="30.8681882%" id="linearGradient-4">
<stop stop-color="#D8DCE6" offset="0%"></stop>
<stop stop-color="#EDF0F5" offset="100%"></stop>
</linearGradient>
<linearGradient x1="79.6103369%" y1="25.4995301%" x2="13.5823999%" y2="81.9840829%" id="linearGradient-5">
<stop stop-color="#F5F7FA" offset="0%"></stop>
<stop stop-color="#F2F3F5" offset="100%"></stop>
</linearGradient>
<linearGradient x1="85.3345299%" y1="44.0928232%" x2="21.7248806%" y2="51.8002766%" id="linearGradient-6">
<stop stop-color="#E8EAEF" offset="0%"></stop>
<stop stop-color="#F2F4F7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="55.2719939%" y1="6.12010442e-13%" x2="45.6676211%" y2="95.6587127%" id="linearGradient-7">
<stop stop-color="#E8EBF2" offset="0%"></stop>
<stop stop-color="#D6DCEB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="98.3245421%" y1="-10.6552489%" x2="-32.0634654%" y2="161.063163%" id="linearGradient-8">
<stop stop-color="#F2F6FA" offset="0%"></stop>
<stop stop-color="#E8EAED" stop-opacity="0.946978802" offset="29.7382561%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="最新版本" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="消息与设置备份-2" transform="translate(-858.000000, -577.000000)">
<g id="编组-19备份" transform="translate(779.000000, 434.000000)">
<g id="编组-5" transform="translate(79.000000, 143.000000)">
<rect id="矩形" x="0" y="0" width="192" height="120"></rect>
<g id="编组-2" transform="translate(35.670000, 13.684411)">
<g id="编组-79" transform="translate(7.000000, 21.000000)">
<rect id="矩形" fill="url(#linearGradient-1)" x="52.90675" y="54.9146341" width="11.5437566" height="24.0853659"></rect>
<rect id="矩形" fill="url(#linearGradient-2)" x="58.678629" y="54.9146341" width="5.77187831" height="24.0853659"></rect>
<path d="M31.2036023,10.597561 L72.8036023,10.597561 C83.4074695,10.597561 92.0036023,19.1936938 92.0036023,29.797561 L92.0036023,52.9946341 C92.0036023,54.0550209 91.143989,54.9146341 90.0836023,54.9146341 L12.0036023,54.9146341 L12.0036023,54.9146341 L12.0036023,29.797561 C12.0036023,19.1936938 20.5997351,10.597561 31.2036023,10.597561 Z" id="矩形" fill="url(#linearGradient-3)"></path>
<path d="M31.2431966,10.597561 C41.8689312,10.597561 50.482791,19.2114208 50.482791,29.8371553 L50.482791,54.9146341 L50.482791,54.9146341 L12.0036023,54.9146341 L12.0036023,29.8371553 C12.0036023,19.2114208 20.6174621,10.597561 31.2431966,10.597561 Z" id="矩形" fill="url(#linearGradient-4)"></path>
<path d="M31.2431966,11.097561 C36.4179927,11.097561 41.1028913,13.1950615 44.4940909,16.5862611 C47.8852905,19.9774607 49.982791,24.6623592 49.982791,29.8371553 L49.982791,29.8371553 L49.982791,54.4146341 L12.5036023,54.4146341 L12.5036023,29.8371553 C12.5036023,24.6623592 14.6011028,19.9774607 17.9923024,16.5862611 C21.383502,13.1950615 26.0684006,11.097561 31.2431966,11.097561 Z" id="矩形" stroke="url(#linearGradient-5)"></path>
<path d="M12.0036023,54.9146341 L50.482791,54.9146341 L47.9266253,58.6097302 C42.0101161,67.1624115 32.2727367,72.2665862 21.8730521,72.2665862 L19.2395944,72.2665862 C13.6697585,72.2665862 9.15451443,67.7513421 9.15451443,62.1815062 C9.15451443,60.131401 9.77931307,58.1299822 10.9456433,56.4439795 L12.0036023,54.9146341 L12.0036023,54.9146341 Z" id="矩形" fill="url(#linearGradient-6)"></path>
<g id="编组-78" transform="translate(69.722385, 0.000000)">
<path d="M16.3536552,0 L12.5757118,4.81707317 L16.3536552,9.63414634 L4.04,9.634 L4.04089203,27.0528311 C5.57743267,27.4101434 6.73385803,28.9651341 6.73385803,30.8292683 C6.73385803,32.9575851 5.22643256,34.6829268 3.36692901,34.6829268 C1.50742547,34.6829268 0,32.9575851 0,30.8292683 C0,29.043411 1.06134547,27.5412798 2.50147148,27.1041124 L2.501,9.634 L1.92395944,9.63414634 L1.92395944,0 L16.3536552,0 Z" id="形状结合备份" fill="#CDD3E1"></path>
<path d="M17.3156349,0 L13.5376916,4.81707317 L17.3156349,9.63414634 L5.00197972,9.634 L5.00287174,27.0528311 C6.53941238,27.4101434 7.69583774,28.9651341 7.69583774,30.8292683 C7.69583774,32.9575851 6.18841228,34.6829268 4.32890873,34.6829268 C2.46940518,34.6829268 0.961979718,32.9575851 0.961979718,30.8292683 C0.961979718,29.043411 2.02332519,27.5412798 3.4634512,27.1041124 L3.46297972,9.634 L2.88593915,9.63414634 L2.88593915,0 L17.3156349,0 Z" id="形状结合" fill="url(#linearGradient-7)"></path>
</g>
</g>
<g id="编组" transform="translate(20.239203, 21.189052) scale(-1, 1) translate(-20.239203, -21.189052) ">
<path d="M35.6058653,4.23314168 C26.9123119,19.2246172 19.5240882,27.7403326 13.441194,29.7802879 C10.2433104,31.00036 4.95099184,29.2438597 8.28870142,24.819926 C10.0267969,22.4145379 13.4412504,23.7181562 13.4412205,26.925986 C13.4411907,30.1338158 13.7734299,36.1753923 4.87253976,38.1449626" id="路径-22备份-2" stroke="url(#linearGradient-8)" stroke-width="1.06" stroke-linecap="round" transform="translate(20.239203, 21.189052) scale(-1, 1) rotate(20.000000) translate(-20.239203, -21.189052) "></path>
<path d="M30.0861271,3.91792961 C29.2669238,6.00459208 28.857319,7.75580113 28.8573126,9.17155674 C28.8573031,11.2951902 26.2902016,15.6373612 18.9532695,14.8733441 C18.7711127,15.185291 20.6752726,13.0989907 21.1429743,11.1352899 C21.610676,9.17158915 24.8561334,8.07912635 26.4174296,7.70764118 C27.4582937,7.4599844 28.6811929,6.19674721 30.0861271,3.91792961 Z" id="路径-23备份-2" fill="#EBECED" transform="translate(24.513579, 9.440178) scale(-1, 1) rotate(9.000000) translate(-24.513579, -9.440178) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
import API from './api_manager';
import { getCurrentZone } from './publicMethod';
import { getCurrentZone, getUserInfo } from './publicMethod';
// 获取用户基础信息
export const userInfo = () => {
......@@ -30,3 +30,17 @@ export const getAccountBalance = () => {
actions: true,
};
};
//获取通知消息
export const messageData = (page, size) => {
return {
url:
API.API_USER_MESSAGEALL +
`?receiver=${
getUserInfo().name
}&msgType=USER&page=${page}&size=${size}`,
type: 'get',
param: {},
actions: true,
};
};
......@@ -4,5 +4,6 @@ const API = {
API_USER_CURRENT: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账号信息
API_USER_LOGOUT: `${BACKEND_API_URI_PREFIX}/uaa/users/token`, //退出登录
API_DASHBOARD_ACCOUNT: `${BACKEND_API_URI_PREFIX}/accounts/dashboard/account`, //获取余额
API_USER_MESSAGEALL: `${BACKEND_API_URI_PREFIX}/imapp/querymessage`, //查询全部信息
};
export default API;
import { Constants } from '../utils/constants';
import moment from 'moment';
export const getUserInfo = () => {
return (
......@@ -35,3 +36,7 @@ export const getCurrentZone = () => {
}
return timezone;
};
export const convert_timer = (item) => {
return moment(item).format('YYYY-MM-DD HH:mm:ss');
};
......@@ -35,8 +35,8 @@ ipcMain.on('createNewWindow-site', (event, arg) => {
return;
}
win = new BrowserWindow({
width: 546,
height: 298,
width: 620,
height: 482,
minWidth: 100,
minHeight: 100,
frame: true,
......
......@@ -6,6 +6,7 @@ body {
position: relative;
color: #1e2633;
height: 100vh;
margin: 0;
/* background: linear-gradient(
200.96deg,
#fedc2a -29.09%,
......
......@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => {
justifyContent: 'space-between',
width: '300px',
margin: '0 auto',
marginTop: '2%',
marginTop: '4%',
},
leftBox: {
display: 'flex',
......@@ -97,7 +97,6 @@ const list = [
];
export default (props) => {
console.log('props: ', props);
const { classes } = useStyles();
const { render, navigate } = public();
......
import React, { useEffect, useState, useRef } from 'react';
//ui
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import no_message from '../../commons/assets/img/no_message.svg';
import fileIcon from '../../commons/assets/img/fileData.svg';
import suc from '../../commons/assets/img/suc.svg';
import CloseIcon from '@mui/icons-material/Close';
import CircularProgress from '@mui/material/CircularProgress';
// js
import Axios from '../../commons/axios/Axios';
import API from '../../commons/utils/api_manager';
import { messageData } from '../../commons/utils/ajaxOption';
import { convert_timer } from '../../commons/utils/publicMethod';
const useStyles = makeStyles()((theme) => {
return {
no_data: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '30px',
},
listBox: {
display: 'flex',
flexDirection: 'column',
paddingTop: '16px',
overflow: 'auto',
overflowX: 'hidden',
height: '274px',
alignItems: 'center',
},
messageBox: {
width: '322px',
// height: '122px',
background: '#FFFFFF',
boxShadow: '0px 1px 5px 0px rgba(0,20,46,0.18)',
// border: '1px solid',
borderRadius: '8px',
padding: '16px 20px',
marginBottom: '16px',
// minHeight: '122px',
},
messageTitle: {
color: '#1E2633',
fontSize: '14px',
fontWeight: '600',
},
messageTime: {
fontSize: '12px',
color: '#C2C6CC',
marginRight: '18px',
},
boxHead: {
display: 'flex',
justifyContent: 'space-between',
},
boxBody: {
marginTop: '8px',
},
fold: {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
position: 'relative',
'-webkit-line-clamp': '3',
'-webkit-box-orient': 'vertical',
},
open: {
// overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
position: 'relative',
paddingBottom: '20px',
'-webkit-box-orient': 'vertical',
},
messageText: {
color: '#565C66',
fontSize: '12px',
lineHeight: '20px',
},
messageOpen: {
whiteSpace: 'nowrap',
color: '#1370FF',
fontSize: '12px',
cursor: 'pointer',
position: 'absolute',
bottom: '0px',
right: '0px',
lineHeight: '20px',
background:
'linear-gradient(90deg, transparent 10%, rgba(255, 255, 255) 70%)',
paddingLeft: '60px',
},
};
});
export default (props) => {
const { classes } = useStyles();
const refs = useRef([]);
const [domOver, setDomOver] = useState(false);
const [fold, isFold] = useState(true);
const [page, setPage] = useState(0);
const [list, setList] = useState([]);
useEffect(() => {
getMessage(0);
}, []);
useEffect(() => {
if (list.length > 0) {
setDomOver(true);
}
}, [list]);
const getMessage = async (page) => {
let data = await Axios.request(messageData(page, 10));
if (data && data.code === 200) {
let arr = [...list];
let newarr = [];
data.res.content.map((item, index) => {
newarr.push(Object.assign(item, { view: false }));
});
arr.push(...newarr);
setList(arr);
}
};
const isOverflow = (id) => {
let height = refs.current[id].scrollHeight;
if (height > 60) {
return true;
} else {
return false;
}
};
const viewCallBack = (e) => {
setList((p) => {
let prev = [...p];
prev.filter((item) => item.id === e.id)[0]['view'] = e.view
? false
: true;
return prev;
});
};
const scrollEvent = (e) => {
if (
e.target.clientHeight + e.target.scrollTop ===
e.target.scrollHeight
) {
setPage(page + 1);
getMessage(page + 1);
setDomOver(false);
}
};
return (
<Grid sx={{ width: '100%' }}>
{list.length === 0 && (
<Grid className={classes.no_data}>
<img src={no_message} alt="" />
<Grid sx={{ fontSize: '14px', color: '#B7B9BD' }}>
暂无消息
</Grid>
</Grid>
)}
<Grid className={classes.listBox} onScroll={scrollEvent}>
{list.map((e, key) => {
return (
<Grid
className={classes.messageBox}
key={key}
style={{
marginLeft: list.length > 3 ? '8px' : '0px',
}}
>
<Grid className={classes.boxHead}>
<Grid className={classes.messageTitle}>
{e.title}
</Grid>
<Grid
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<Grid className={classes.messageTime}>
{convert_timer(e.msgConsumerAt)}
</Grid>
<CloseIcon
style={{
color: '#979797',
fontSize: '20px',
cursor: 'pointer',
}}
/>
</Grid>
</Grid>
<Grid className={classes.boxBody}>
<Grid
className={
e.view ? classes.open : classes.fold
}
>
<Grid
className={classes.messageText}
ref={(element) => {
refs.current[key] = element;
}}
>
{e.text}
</Grid>
{domOver && isOverflow(key) && (
<span
className={classes.messageOpen}
onClick={() => {
viewCallBack(e);
}}
>
{e.view ? '收起' : '展开'}
</span>
)}
</Grid>
</Grid>
</Grid>
);
})}
<Grid
sx={{
padding: '4px 0px 20px 0px',
display: list.length > 0 ? 'flex' : 'none',
alignItems: 'center',
}}
>
<CircularProgress
style={{
color: '#1370FF',
width: '12px',
height: '12px',
}}
/>
<Grid
sx={{
fontSize: '12px',
color: '#565C66',
marginLeft: '4px',
}}
>
加载更多…
</Grid>
</Grid>
</Grid>
</Grid>
);
};
This diff is collapsed.
......@@ -18,9 +18,12 @@ const useStyles = makeStyles()((theme) => {
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
width: '300px',
marginTop: '1.5%',
width: '100%',
borderRadius: '4px',
border: '1px solid #EBEDF0',
marginLeft: '24px',
marginRight: '24px',
height: '100%',
},
title: {
fontSize: '16px',
......@@ -43,64 +46,23 @@ export default (props) => {
return (
<Grid className={classes.preferenceBody}>
<Grid className={classes.title}>偏好设置</Grid>
<Grid sx={{ padding: '16px 24px' }}>
<Grid className={classes.title}>偏好设置</Grid>
<FormControlLabel
control={
<Checkbox
checked={selfStart}
onChange={handleChange}
size="small"
/>
}
label={
<Grid sx={{ color: '#1E2633', fontSize: '14px' }}>
开机时运行北鲲云盘
</Grid>
}
/>
<Grid sx={{ marginTop: '8px' }}>
<Grid
sx={{
color: '#1E2633',
fontSize: '14px',
marginBottom: '10px',
}}
>
本地缓存的文件目录
</Grid>
<Grid
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<img src={file} alt="" />
<Grid
sx={{
color: '#8A9099',
fontSize: '14px',
marginLeft: '10px',
}}
>
C:\Users\…\Desktopopsjw
</Grid>
<Grid
sx={{
color: '#1370FF',
fontSize: '14px',
marginLeft: '16px',
cursor: 'pointer',
}}
onClick={(event) => {
event.stopPropagation();
console.log('222222222');
}}
>
更改
</Grid>
</Grid>
<FormControlLabel
control={
<Checkbox
checked={selfStart}
onChange={handleChange}
size="small"
/>
}
label={
<Grid sx={{ color: '#1E2633', fontSize: '14px' }}>
开机时运行北鲲云盘
</Grid>
}
/>
</Grid>
</Grid>
);
......
......@@ -4,6 +4,8 @@ import Head from '../components/head';
import Trans from '../components/trans';
import Tab from '../components/tab';
import BottomTip from '../components/buttomTip.jsx';
import Message from '../components/message.jsx';
import { Button, Grid } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
......@@ -20,7 +22,7 @@ const useStyles = makeStyles()((theme) => {
export default (props) => {
const { classes } = useStyles();
const { render, navigate } = public();
const [value, setValue] = useState('one');
const [value, setValue] = useState('two');
const handleChange = (event, newValue) => {
setValue(newValue);
......@@ -32,6 +34,7 @@ export default (props) => {
<Tab level={false} value={value} handleChange={handleChange} />
{value === 'one' && <Trans />}
{value === 'two' && <Message />}
<BottomTip />
</Grid>
......
......@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => {
siteBody: {
display: 'flex',
marginLeft: '-8px',
marginTop: '19px',
marginTop: '23px',
// flexDirection: 'column',
// alignItems: 'center',
},
......@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => {
display: 'flex',
alignItems: 'center',
color: '#1370FF',
width: '126px',
width: '138px',
height: '36px',
background: '#E8F0FE',
borderRadius: '0px 100px 100px 0px',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment