open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2026-06-30 20:35:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化面板样式

Browse Source
This commit is contained in:
hanhh
2021-07-17 22:20:08 +08:00
parent 20ddb5a3cf
commit ecdfdff50d
9 changed files with 80 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+2 -2
View File
@@ -8,9 +8,9 @@ const titleMap: any = {
'/crontab': '定时任务',
'/env': '环境变量',
'/config': '配置文件',
'/script': '查看脚本',
'/script': '脚本管理',
'/diff': '对比工具',
'/log': '日志',
'/log': '任务日志',
'/setting': '系统设置',
};
src/layouts/defaultProps.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ export default {
},
{
path: '/script',
name: '查看脚本',
name: '脚本管理',
icon: <FormOutlined />,
component: '@/pages/script/index',
},
@@ -50,7 +50,7 @@ export default {
},
{
path: '/log',
name: '日志',
name: '任务日志',
icon: <FolderOutlined />,
component: '@/pages/log/index',
},
src/layouts/index.less
+39 -4
View File
@@ -71,6 +71,34 @@ body {
}
}
.ant-tree {
.ant-tree-treenode {
width: 100%;
padding-right: 8px !important;
}
.ant-tree-node-content-wrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
}
.ant-select-tree {
.ant-select-tree-treenode {
width: 100%;
padding-right: 8px !important;
}
.ant-select-tree-node-content-wrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
@@ -91,17 +119,17 @@ input:-webkit-autofill:active {
.ql-container-wrapper {
&.crontab-wrapper,
&.log-wrapper {
&.log-wrapper,
&.env-wrapper,
&.config-wrapper {
.ant-pro-grid-content.wide .ant-pro-page-container-children-content {
height: calc(100vh - 184px);
height: calc(100vh - var(--vh-offset, 0px) - 184px);
margin-left: 0;
margin-right: 0;
}
.CodeMirror {
height: calc(100vh - 216px);
height: calc(100vh - var(--vh-offset, 0px) - 216px);
width: calc(100vw - 32px);
width: calc(100vw - 80px);
}
}
.CodeMirror {
@@ -114,3 +142,10 @@ input:-webkit-autofill:active {
max-width: 250px !important;
}
}
@media (min-width: 768px) {
.ant-layout-content.ant-pro-basicLayout-content.ant-pro-basicLayout-has-header {
min-height: calc(100vh - 72px);
min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
}
}
src/pages/crontab/index.tsx
+1
View File
@@ -101,6 +101,7 @@ const Crontab = () => {
key: 'status',
dataIndex: 'status',
align: 'center' as const,
width: 60,
render: (text: string, record: any) => (
<>
{(!record.isDisabled || record.status !== CrontabStatus.idle) && (
src/pages/env/index.tsx
Vendored
+3 -2
View File
@@ -108,6 +108,7 @@ const Env = () => {
{
title: '序号',
align: 'center' as const,
width: 50,
render: (text: string, record: any, index: number) => {
return <span style={{ cursor: 'text' }}>{index + 1} </span>;
},
@@ -123,7 +124,7 @@ const Env = () => {
dataIndex: 'value',
key: 'value',
align: 'center' as const,
width: '40%',
width: '44%',
ellipsis: {
showTitle: false,
},
@@ -436,7 +437,7 @@ const Env = () => {
return (
<PageContainer
className="env-wrapper"
className="ql-container-wrapper env-wrapper"
title="环境变量"
extra={[
<Search
src/pages/log/index.module.less
+1 -1
View File
@@ -16,7 +16,7 @@
overflow: auto;
}
&-search {
margin-bottom: 16px;
margin-bottom: 8px;
}
}
src/pages/log/index.tsx
+23 -16
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, Key } from 'react';
import { useState, useEffect, useCallback, Key, useRef } from 'react';
import { TreeSelect, Tree, Input } from 'antd';
import config from '@/utils/config';
import { PageContainer } from '@ant-design/pro-layout';
@@ -46,13 +46,19 @@ const Log = () => {
const [filterData, setFilterData] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const [isPhone, setIsPhone] = useState(false);
const [height, setHeight] = useState<number>();
const treeDom = useRef<any>();
const getConfig = () => {
request.get(`${config.apiPrefix}logs`).then((data) => {
const result = formatData(data.dirs) as any;
setData(result);
setFilterData(result);
});
const getLogs = () => {
setLoading(true);
request
.get(`${config.apiPrefix}logs`)
.then((data) => {
const result = formatData(data.dirs) as any;
setData(result);
setFilterData(result);
})
.finally(() => setLoading(false));
};
const formatData = (tree: any[]) => {
@@ -73,13 +79,9 @@ const Log = () => {
};
const getLog = (node: any) => {
setLoading(true);
request
.get(`${config.apiPrefix}logs/${node.value}`)
.then((data) => {
setValue(data.data);
})
.finally(() => setLoading(false));
request.get(`${config.apiPrefix}logs/${node.value}`).then((data) => {
setValue(data.data);
});
};
const onSelect = (value: any, node: any) => {
@@ -113,13 +115,15 @@ const Log = () => {
setMarginTop(-72);
setIsPhone(false);
}
getConfig();
getLogs();
setHeight(treeDom.current.clientHeight);
}, []);
return (
<PageContainer
className="ql-container-wrapper log-wrapper"
title={title}
loading={loading}
extra={
isPhone && [
<TreeSelect
@@ -154,10 +158,13 @@ const Log = () => {
className={styles['left-tree-search']}
onChange={onSearch}
></Input.Search>
<div className={styles['left-tree-scroller']}>
<div className={styles['left-tree-scroller']} ref={treeDom}>
<Tree
className={styles['left-tree']}
treeData={filterData}
showIcon={true}
height={height}
showLine={{ showLeafIcon: true }}
onSelect={onTreeSelect}
></Tree>
</div>
src/pages/script/index.module.less
+1 -1
View File
@@ -16,7 +16,7 @@
overflow: auto;
}
&-search {
margin-bottom: 16px;
margin-bottom: 8px;
}
}
src/pages/script/index.tsx
+8 -2
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, Key } from 'react';
import { useState, useEffect, useCallback, Key, useRef } from 'react';
import { TreeSelect, Tree, Input } from 'antd';
import config from '@/utils/config';
import { PageContainer } from '@ant-design/pro-layout';
@@ -37,6 +37,8 @@ const Script = () => {
const [loading, setLoading] = useState(false);
const [isPhone, setIsPhone] = useState(false);
const [mode, setMode] = useState('');
const [height, setHeight] = useState<number>();
const treeDom = useRef<any>();
const getScripts = () => {
setLoading(true);
@@ -89,6 +91,7 @@ const Script = () => {
setIsPhone(false);
}
getScripts();
setHeight(treeDom.current.clientHeight);
}, []);
return (
@@ -130,10 +133,13 @@ const Script = () => {
className={styles['left-tree-search']}
onChange={onSearch}
></Input.Search>
<div className={styles['left-tree-scroller']}>
<div className={styles['left-tree-scroller']} ref={treeDom}>
<Tree
className={styles['left-tree']}
treeData={filterData}
showIcon={true}
height={height}
showLine={{ showLeafIcon: true }}
onSelect={onTreeSelect}
></Tree>
</div>