Skip to content

S
szse
Commit bee1e5b5 by Your Name
Options

add tailwindcss

parent e16f50e0
Showing with 126 additions and 46 deletions
craco.config.js
...@@ -2,6 +2,14 @@ const CracoLessPlugin = require('craco-less'); ...@@ -2,6 +2,14 @@ const CracoLessPlugin = require('craco-less');
const { name } = require('./package'); const { name } = require('./package');
module.exports = { module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
plugins: [ plugins: [
{ {
plugin: CracoLessPlugin, plugin: CracoLessPlugin,
...@@ -10,6 +18,8 @@ module.exports = { ...@@ -10,6 +18,8 @@ module.exports = {
lessOptions: { lessOptions: {
modifyVars: { modifyVars: {
'@ant-prefix': 'yy', '@ant-prefix': 'yy',
// '@border-color-split': 'hsv(0, 0, 85%)',
'@border-radius-base': '4px'
}, },
javascriptEnabled: true, javascriptEnabled: true,
}, },
......
package.json
...@@ -58,5 +58,10 @@ ...@@ -58,5 +58,10 @@
] ]
}, },
"proxy": "http://139.198.127.28:18762", "proxy": "http://139.198.127.28:18762",
"homepage": "http://myhost/data-govern" "homepage": "http://myhost/data-govern",
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4"
}
} }
src/index.less
@import './normalize.less'; @import './normalize.less';
@import '~antd/dist/antd.less'; @import '~antd/dist/antd.less';
@import './mixins.less'; @import './mixins.less';
// @tailwind base;
@tailwind components;
@tailwind utilities;
//与center-home中的样式保持统一 //与center-home中的样式保持统一
body { body {
margin: 0; margin: 0;
...@@ -86,9 +89,9 @@ div[id^='__qiankun_microapp_wrapper_'] { ...@@ -86,9 +89,9 @@ div[id^='__qiankun_microapp_wrapper_'] {
overflow: auto !important; overflow: auto !important;
} }
.yy-card-bordered { // .yy-card-bordered {
border-color: #333333 !important; // border-color: #333333 !important;
} // }
.yy-table-cell{ .yy-table-cell{
word-break: break-all; word-break: break-all;
......
src/mixins.less
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
.paddingNmargin(@iterator + 1); .paddingNmargin(@iterator + 1);
} }
.paddingNmargin(); // .paddingNmargin();
@colorArray: primary @primary-color, success @success-color, warning @warning-color, error @error-color, @colorArray: primary @primary-color, success @success-color, warning @warning-color, error @error-color,
muted @normal-color, white @white, transparent transparent; muted @normal-color, white @white, transparent transparent;
......
src/variables.less 0 → 100644
@header-height: 64px;
@pm-4: 2rem;
@pm-3: 1.5rem;
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetTable.less
@import '../../../../variables.less';
.asset-list { .asset-list {
.yy-list-item-action { .yy-list-item-action {
text-align: right; text-align: right;
...@@ -11,7 +13,7 @@ ...@@ -11,7 +13,7 @@
padding: 0 ; padding: 0 ;
} }
.yy-checkbox-group { .yy-checkbox-group {
height: calc(100vh - 64px - 30px - 53px - 53px - 5px) !important; height: calc(100vh - @header-height - @pm-4 - 53px - 57px) !important;
overflow: auto !important; overflow: auto !important;
} }
.yy-divider-horizontal { .yy-divider-horizontal {
......
src/view/Manage/AssetManage/Component/AssetTree.less
@import '../../../../variables.less';
.asset-tree { .asset-tree {
.yy-card-head-title { .yy-card-head-title {
...@@ -5,7 +7,7 @@ ...@@ -5,7 +7,7 @@
} }
.yy-tree-list { .yy-tree-list {
height: calc(100vh - 64px - 30px - 53px - 20px - 42px) !important; height: calc(100vh - @header-height - @pm-4 - @pm-3 -32px - 20px - 42px) !important;
overflow: auto !important; overflow: auto !important;
} }
...@@ -16,7 +18,7 @@ ...@@ -16,7 +18,7 @@
.asset-tree-read-only { .asset-tree-read-only {
.yy-tree-list { .yy-tree-list {
height: calc(100vh - 64px - 30px - 20px - 42px) !important;; height: calc(100vh - @header-height - @pm-4 - 20px - 42px) !important;;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
src/view/Manage/AssetRecycle/index.less
@import '../../../variables.less';
.asset-recycle { .asset-recycle {
.list { .list {
height: calc(100vh - 64px - 30px - 53px) !important; height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
src/view/Manage/DatasourceManage/index.less
@import '../../../variables.less';
.datasource-manage { .datasource-manage {
.list-container { .list-container {
height: calc(100vh - 64px - 30px - 53px) !important; height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
src/view/Manage/Map/Component/SquareItem.jsx
...@@ -5,15 +5,23 @@ import { FolderAddOutlined, FileOutlined } from '@ant-design/icons'; ...@@ -5,15 +5,23 @@ import { FolderAddOutlined, FileOutlined } from '@ant-design/icons';
import './SquareItem.less'; import './SquareItem.less';
const colors = [ const colors = [
'#BDD2FD', // '#BDD2FD',
'#C2C8D5', // '#C2C8D5',
'#FBE5A2', // '#FBE5A2',
'#F6C3B7', // '#F6C3B7',
'#B6E3F5', // '#B6E3F5',
'#D3C6EA', // '#D3C6EA',
'#FFD8B8', // '#FFD8B8',
'#AAD8D8', // '#AAD8D8',
'#FFD6E7', // '#FFD6E7',
'from-orange-400 to-pink-600',
'from-fuchsia-500 to-purple-600',
'from-purple-500 to-indigo-500',
'from-cyan-400 to-lightBlue-500',
'from-green-400 to-cyan-500',
'from-yellow-400 to-orange-500',
'from-light-blue-400 to-indigo-500',
]; ];
class SquareItem extends React.Component { class SquareItem extends React.Component {
...@@ -21,7 +29,7 @@ class SquareItem extends React.Component { ...@@ -21,7 +29,7 @@ class SquareItem extends React.Component {
onItemClick = () => { onItemClick = () => {
const { item, onClick } = this.props; const { item, onClick } = this.props;
if (onClick && item) { if (onClick && item) {
if (item.dbType==='Dir') { if (item.dbType === 'Dir') {
onClick(item); onClick(item);
} else { } else {
//通过资产id跳转到资产详情页 //通过资产id跳转到资产详情页
...@@ -35,7 +43,7 @@ class SquareItem extends React.Component { ...@@ -35,7 +43,7 @@ class SquareItem extends React.Component {
let assetName = '', assetCnName = ''; let assetName = '', assetCnName = '';
if (item && item.dbType === 'Table') { if (item && item.dbType === 'Table') {
(item.elements||[]).forEach((element) => { (item.elements || []).forEach((element) => {
if (element.name === '中文名称') { if (element.name === '中文名称') {
assetCnName = element.value; assetCnName = element.value;
} }
...@@ -49,26 +57,37 @@ class SquareItem extends React.Component { ...@@ -49,26 +57,37 @@ class SquareItem extends React.Component {
<div className='map-square-item'> <div className='map-square-item'>
{ {
item && ( item && (
item.dbType==='Dir' ? <Card item.dbType === 'Dir' ? <Card hoverable onClick={this.onItemClick} bordered={false}
title={ className="overflow-hidden"
<div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}> // title={
<FolderAddOutlined className='mr-3' /> // <div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }}>
<span className='textOverflow' title={item.dirName||''}>{item.dirName||''}</span> // <FolderAddOutlined className='mr-3' />
// <span className='textOverflow' title={item.dirName||''}>{item.dirName||''}</span>
// </div>
// }
// headStyle={{ backgroundColor: colors[index % colors.length] }}
cover={
<div className={'flex px-4 py-3 bg-gradient-to-br leading-6 font-semibold text-white ' + colors[index % colors.length]} style={{ justifyContent: 'center', alignItems: 'center' }}>
{/* <span className='flex-none w-8 h-8 rounded-full flex items-center justify-center'> </span> */}
<span className='flex-auto self-center textOverflow' title={item.dirName || ''}>{item.dirName || ''}</span>
<cite className='flex opacity-75 hover:opacity-100 transition-opacity duration-200'>
<FolderAddOutlined className='rounded-full' style={{ fontSize: '1.5em' }} />
</cite>
</div> </div>
} }
headStyle={{ backgroundColor: colors[index % colors.length] }}
> >
<div className='text-center textOverflow' title={item.tableModelCount}>{item.tableModelCount}</div> <div className='text-center textOverflow' title={item.tableModelCount}>{item.tableModelCount}</div>
</Card> : <Card </Card> : <Card hoverable onClick={this.onItemClick}
title={ title={
<div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}> <div className='flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }}>
<FileOutlined className='mr-3' /> <FileOutlined className='mr-3' />
<span>{assetCnName||''}</span> <span>{assetCnName || ''}</span>
</div> </div>
} }
headStyle={{ backgroundColor: colors[index % colors.length] }} // headStyle={{ backgroundColor: colors[index % colors.length] }}
> >
<div className='text-center textOverflow' title={assetName||''}>{assetName||''}</div> <div className='text-center textOverflow' title={assetName || ''}>{assetName || ''}</div>
</Card> </Card>
) )
} }
......
src/view/Manage/Map/Component/SquareItem.less
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
font-size: 20px !important; font-size: 20px !important;
font-weight: bold !important; font-weight: bold !important;
:hover { // :hover {
color: #1890ff; // color: #1890ff;
} // }
} }
.yy-card-body { .yy-card-body {
color: #1890ff !important; // color: #1890ff !important;
font-size: 18px !important; font-size: 18px !important;
height: 76px !important; height: 76px !important;
} }
......
src/view/Manage/Map/MapContent.jsx
...@@ -188,12 +188,13 @@ class MapContent extends React.Component { ...@@ -188,12 +188,13 @@ class MapContent extends React.Component {
if (type === 'square') { if (type === 'square') {
return ( return (
<div className='position-relative p-3' style={{ height: '100%' }}> <div className='position-relative p-3 from-blueGray-200 bg-gradient-to-b' style={{ height: '100%' }}>
{ {
type === 'square' && <> type === 'square' && <>
<div className="text-right mb-3">{switchMode}</div> <div className="flex mb-3">
<div className='flex-auto'>
{ {
breadcrumbContents && breadcrumbContents.length > 1 && <Breadcrumb className='mb-3'> breadcrumbContents && breadcrumbContents.length > 0 && <Breadcrumb >
{ {
breadcrumbContents.map((content, index) => { breadcrumbContents.map((content, index) => {
return ( return (
...@@ -209,6 +210,11 @@ class MapContent extends React.Component { ...@@ -209,6 +210,11 @@ class MapContent extends React.Component {
} }
</Breadcrumb> </Breadcrumb>
} }
</div>
<div className="flex">
{switchMode}
</div>
</div>
{ {
groups && groups.map((group, index) => { groups && groups.map((group, index) => {
return ( return (
...@@ -217,7 +223,8 @@ class MapContent extends React.Component { ...@@ -217,7 +223,8 @@ class MapContent extends React.Component {
{ {
group && group.map((item, _index) => { group && group.map((item, _index) => {
return ( return (
<Col key={_index} span={24 / column}> <Col key={_index} xs={24} md={8} lg={6} //span={24 / column}
>
<SquareItem item={item} index={(index * column + _index)} onClick={this.onSquareItemClick} {...this.props} /> <SquareItem item={item} index={(index * column + _index)} onClick={this.onSquareItemClick} {...this.props} />
</Col> </Col>
) )
......
src/view/Manage/Map/index.jsx
...@@ -92,7 +92,7 @@ class Map extends React.Component { ...@@ -92,7 +92,7 @@ class Map extends React.Component {
{ {
loadingTopics ? <Spin /> : <> loadingTopics ? <Spin /> : <>
{ {
topics && topics.length > 0 && <Tabs topics && topics.length > 0 && <Tabs animated={false}
activeKey={tabKey} activeKey={tabKey}
size='large' size='large'
centered centered
......
src/view/Manage/Map/index.less
@import '../../../variables.less';
.asset-map { .asset-map {
height: calc(100vh - 64px - 30px); height: calc(100vh - @header-height - @pm-4);
.yy-tabs-nav { .yy-tabs-nav {
margin: 0 !important; margin: 0 !important;
} }
.map-container { .map-container {
height: calc(100vh - 64px - 30px - 57px/* - 53px */) !important; height: calc(100vh - @header-height - @pm-4 - 57px/* - 53px */) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.less
@import '../../../../variables.less';
.model-table { .model-table {
.yy-table { .yy-table {
height: calc(100vh - 64px - 30px - 53px - 53px - 20px) !important; height: calc(100vh - @header-height - @pm-4 - @pm-3 - @pm-3 - 33px - 33px - @pm-3) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
src/view/Manage/Model/Component/ModelTree.less
@import '../../../../variables.less';
.model-tree { .model-tree {
.yy-tree-list { .yy-tree-list {
height: calc(100vh - 64px - 30px - 53px - 20px) !important; height: calc(100vh - @header-height - @pm-4 - @pm-3 - 32px - 1px - @pm-3) !important;
overflow: auto !important; overflow: auto !important;
} }
} }
\ No newline at end of file
tailwind.config.js 0 → 100644
const colors = require('tailwindcss/colors')
// console.log(colors)
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
colors,
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
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