Skip to content

S
szse
Commit bee1e5b5 by Your Name
Options

add tailwindcss

parent e16f50e0
Showing with 156 additions and 76 deletions
craco.config.js
......@@ -2,6 +2,14 @@ const CracoLessPlugin = require('craco-less');
const { name } = require('./package');
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
plugins: [
{
plugin: CracoLessPlugin,
......@@ -10,6 +18,8 @@ module.exports = {
lessOptions: {
modifyVars: {
'@ant-prefix': 'yy',
// '@border-color-split': 'hsv(0, 0, 85%)',
'@border-radius-base': '4px'
},
javascriptEnabled: true,
},
......
package.json
......@@ -58,5 +58,10 @@
]
},
"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 '~antd/dist/antd.less';
@import './mixins.less';
// @tailwind base;
@tailwind components;
@tailwind utilities;
//与center-home中的样式保持统一
body {
margin: 0;
......@@ -86,9 +89,9 @@ div[id^='__qiankun_microapp_wrapper_'] {
overflow: auto !important;
}
.yy-card-bordered {
border-color: #333333 !important;
}
// .yy-card-bordered {
// border-color: #333333 !important;
// }
.yy-table-cell{
word-break: break-all;
......
src/mixins.less
......@@ -54,7 +54,7 @@
.paddingNmargin(@iterator + 1);
}
.paddingNmargin();
// .paddingNmargin();
@colorArray: primary @primary-color, success @success-color, warning @warning-color, error @error-color,
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 {
.yy-list-item-action {
text-align: right;
......@@ -11,7 +13,7 @@
padding: 0 ;
}
.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;
}
.yy-divider-horizontal {
......
src/view/Manage/AssetManage/Component/AssetTree.less
@import '../../../../variables.less';
.asset-tree {
.yy-card-head-title {
......@@ -5,7 +7,7 @@
}
.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;
}
......@@ -16,7 +18,7 @@
.asset-tree-read-only {
.yy-tree-list {
height: calc(100vh - 64px - 30px - 20px - 42px) !important;;
height: calc(100vh - @header-height - @pm-4 - 20px - 42px) !important;;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/AssetRecycle/index.less
@import '../../../variables.less';
.asset-recycle {
.list {
height: calc(100vh - 64px - 30px - 53px) !important;
height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/DatasourceManage/index.less
@import '../../../variables.less';
.datasource-manage {
.list-container {
height: calc(100vh - 64px - 30px - 53px) !important;
height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px) !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';
import './SquareItem.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
// '#BDD2FD',
// '#C2C8D5',
// '#FBE5A2',
// '#F6C3B7',
// '#B6E3F5',
// '#D3C6EA',
// '#FFD8B8',
// '#AAD8D8',
// '#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 {
......@@ -21,13 +29,13 @@ class SquareItem extends React.Component {
onItemClick = () => {
const { item, onClick } = this.props;
if (onClick && item) {
if (item.dbType==='Dir') {
if (item.dbType === 'Dir') {
onClick(item);
} else {
//通过资产id跳转到资产详情页
// item.tableModelId
}
}
}
}
render() {
......@@ -35,10 +43,10 @@ class SquareItem extends React.Component {
let assetName = '', assetCnName = '';
if (item && item.dbType === 'Table') {
(item.elements||[]).forEach((element) => {
(item.elements || []).forEach((element) => {
if (element.name === '中文名称') {
assetCnName = element.value;
}
}
if (element.name === '英文名称') {
assetName = element.value;
}
......@@ -47,31 +55,42 @@ class SquareItem extends React.Component {
return (
<div className='map-square-item'>
{
item && (
item.dbType==='Dir' ? <Card
title={
<div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}>
<FolderAddOutlined className='mr-3' />
<span className='textOverflow' title={item.dirName||''}>{item.dirName||''}</span>
</div>
}
headStyle={{ backgroundColor: colors[index % colors.length] }}
>
<div className='text-center textOverflow' title={item.tableModelCount}>{item.tableModelCount}</div>
</Card> : <Card
title={
<div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }} onClick={this.onItemClick}>
<FileOutlined className='mr-3' />
<span>{assetCnName||''}</span>
</div>
}
headStyle={{ backgroundColor: colors[index % colors.length] }}
>
<div className='text-center textOverflow' title={assetName||''}>{assetName||''}</div>
</Card>
)
}
{
item && (
item.dbType === 'Dir' ? <Card hoverable onClick={this.onItemClick} bordered={false}
className="overflow-hidden"
// title={
// <div className='d-flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }}>
// <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 className='text-center textOverflow' title={item.tableModelCount}>{item.tableModelCount}</div>
</Card> : <Card hoverable onClick={this.onItemClick}
title={
<div className='flex pointer' style={{ justifyContent: 'center', alignItems: 'center' }}>
<FileOutlined className='mr-3' />
<span>{assetCnName || ''}</span>
</div>
}
// headStyle={{ backgroundColor: colors[index % colors.length] }}
>
<div className='text-center textOverflow' title={assetName || ''}>{assetName || ''}</div>
</Card>
)
}
</div>
);
}
......
src/view/Manage/Map/Component/SquareItem.less
......@@ -5,13 +5,13 @@
font-size: 20px !important;
font-weight: bold !important;
:hover {
color: #1890ff;
}
// :hover {
// color: #1890ff;
// }
}
.yy-card-body {
color: #1890ff !important;
// color: #1890ff !important;
font-size: 18px !important;
height: 76px !important;
}
......
src/view/Manage/Map/MapContent.jsx
......@@ -188,27 +188,33 @@ class MapContent extends React.Component {
if (type === 'square') {
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' && <>
<div className="text-right mb-3">{switchMode}</div>
{
breadcrumbContents && breadcrumbContents.length > 1 && <Breadcrumb className='mb-3'>
<div className="flex mb-3">
<div className='flex-auto'>
{
breadcrumbContents.map((content, index) => {
return (
<Breadcrumb.Item key={index}>
{
index === 0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index === breadcrumbContents.length - 1) ? <span>{content.name || ''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}>
{content.name || ''}
</span>)
}
</Breadcrumb.Item>
)
})
breadcrumbContents && breadcrumbContents.length > 0 && <Breadcrumb >
{
breadcrumbContents.map((content, index) => {
return (
<Breadcrumb.Item key={index}>
{
index === 0 ? <HomeOutlined onClick={() => { this.onBreadcrumbItemClick(content, index); }} /> : ((index === breadcrumbContents.length - 1) ? <span>{content.name || ''}</span> : <span className='pointer' onClick={() => { this.onBreadcrumbItemClick(content, index); }}>
{content.name || ''}
</span>)
}
</Breadcrumb.Item>
)
})
}
</Breadcrumb>
}
</Breadcrumb>
}
</div>
<div className="flex">
{switchMode}
</div>
</div>
{
groups && groups.map((group, index) => {
return (
......@@ -217,7 +223,8 @@ class MapContent extends React.Component {
{
group && group.map((item, _index) => {
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} />
</Col>
)
......
src/view/Manage/Map/index.jsx
......@@ -92,7 +92,7 @@ class Map extends React.Component {
{
loadingTopics ? <Spin /> : <>
{
topics && topics.length > 0 && <Tabs
topics && topics.length > 0 && <Tabs animated={false}
activeKey={tabKey}
size='large'
centered
......
src/view/Manage/Map/index.less
@import '../../../variables.less';
.asset-map {
height: calc(100vh - 64px - 30px);
height: calc(100vh - @header-height - @pm-4);
.yy-tabs-nav {
margin: 0 !important;
}
.map-container {
height: calc(100vh - 64px - 30px - 57px/* - 53px */) !important;
height: calc(100vh - @header-height - @pm-4 - 57px/* - 53px */) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.less
@import '../../../../variables.less';
.model-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;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ModelTree.less
@import '../../../../variables.less';
.model-tree {
.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;
}
}
\ 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