open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-07-27 14:46:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复日志手机的样式

Browse Source
This commit is contained in:
周腾 2021-06-03 19:57:24 +08:00
parent 2538595ef2
commit e6acbbfd3f
3 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/layouts/index.less
View File

@ -12,7 +12,7 @@ body {
position: absolute; position: absolute;
height: calc(100vh - 128px); height: calc(100vh - 128px);
height: calc(100vh - var(--vh-offset, 0px) - 128px); height: calc(100vh - var(--vh-offset, 0px) - 128px);
width: calc(100% - 32px - @tree-width); width: calc(100% - 32px);
} }
} }
@ -56,10 +56,13 @@ body {
.ant-pro-grid-content.wide .ant-pro-page-container-children-content { .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
height: calc(100vh - 184px); height: calc(100vh - 184px);
height: calc(100vh - var(--vh-offset, 0px) - 184px); height: calc(100vh - var(--vh-offset, 0px) - 184px);
margin-left: 0;
margin-right: 0;
} }
.CodeMirror { .CodeMirror {
height: calc(100vh - 216px); height: calc(100vh - 216px);
height: calc(100vh - var(--vh-offset, 0px) - 216px); height: calc(100vh - var(--vh-offset, 0px) - 216px);
width: calc(100vw - 32px);
} }
} }
.CodeMirror { .CodeMirror {

4
src/pages/log/index.module.less
View File

@ -35,5 +35,9 @@
padding: 0; padding: 0;
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.CodeMirror {
width: calc(100% - 32px - @tree-width);
}
} }
} }

57
src/pages/log/index.tsx
View File

@ -45,6 +45,7 @@ const Log = () => {
const [data, setData] = useState<any[]>([]); const [data, setData] = useState<any[]>([]);
const [filterData, setFilterData] = useState<any[]>([]); const [filterData, setFilterData] = useState<any[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [isPhone, setIsPhone] = useState(false);
const getConfig = () => { const getConfig = () => {
request.get(`${config.apiPrefix}logs`).then((data) => { request.get(`${config.apiPrefix}logs`).then((data) => {
@ -105,10 +106,12 @@ const Log = () => {
setWdith('auto'); setWdith('auto');
setMarginLeft(0); setMarginLeft(0);
setMarginTop(0); setMarginTop(0);
setIsPhone(true);
} else { } else {
setWdith('100%'); setWdith('100%');
setMarginLeft(0); setMarginLeft(0);
setMarginTop(-72); setMarginTop(-72);
setIsPhone(false);
} }
getConfig(); getConfig();
}, []); }, []);
@ -117,18 +120,20 @@ const Log = () => {
<PageContainer <PageContainer
className="ql-container-wrapper log-wrapper" className="ql-container-wrapper log-wrapper"
title={title} title={title}
extra={[ extra={
<TreeSelect isPhone && [
className="log-select" <TreeSelect
value={select} className="log-select"
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} value={select}
treeData={data} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择日志文件" treeData={data}
showSearch placeholder="请选择日志文件"
key="value" showSearch
onSelect={onSelect} key="value"
/>, onSelect={onSelect}
]} />,
]
}
header={{ header={{
style: { style: {
padding: '4px 16px 4px 15px', padding: '4px 16px 4px 15px',
@ -142,20 +147,22 @@ const Log = () => {
}, },
}} }}
> >
<div className={styles['log-container']}> <div className={`${styles['log-container']}`}>
<div className={styles['left-tree-container']}> {!isPhone && (
<Input.Search <div className={styles['left-tree-container']}>
className={styles['left-tree-search']} <Input.Search
onChange={onSearch} className={styles['left-tree-search']}
></Input.Search> onChange={onSearch}
<div className={styles['left-tree-scroller']}> ></Input.Search>
<Tree <div className={styles['left-tree-scroller']}>
className={styles['left-tree']} <Tree
treeData={filterData} className={styles['left-tree']}
onSelect={onTreeSelect} treeData={filterData}
></Tree> onSelect={onTreeSelect}
></Tree>
</div>
</div> </div>
</div> )}
<CodeMirror <CodeMirror
value={value} value={value}
options={{ options={{