From b4d5340630e135a5dccc88cc287e55447033deaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= <lzi.love@icloud.com>
Date: Wed, 23 Jun 2021 13:51:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20css=E6=A1=86=E6=9E=B6=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=EF=BC=8C=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   3 +
 package.json                                  |   2 +
 src/components/index.js                       |   3 +
 src/components/page/PageHeader.vue            |  69 +--
 src/components/table/index.vue                | 121 +++++
 src/main.js                                   |   1 +
 src/mock/frame/tableDataMock.js               |  58 +++
 src/pages/frame/layouts/PageLayout.vue        |  27 +-
 src/pages/system/view/user/UserManagement.vue |  46 +-
 src/pages/xunjian/view/area/index.vue         |  25 +
 src/plugins/index.js                          |  20 +-
 src/utils/baseUrlUtil.js                      |   2 +-
 tailwind.config.js                            |  16 +
 vue.config.js                                 | 490 +++++++++---------
 14 files changed, 554 insertions(+), 329 deletions(-)
 create mode 100644 src/components/index.js
 create mode 100644 src/components/table/index.vue
 create mode 100644 src/mock/frame/tableDataMock.js
 create mode 100644 src/pages/xunjian/view/area/index.vue
 create mode 100644 tailwind.config.js

diff --git a/README.md b/README.md
index 2684560..7344e31 100644
--- a/README.md
+++ b/README.md
@@ -27,3 +27,6 @@ $ npm run serve
  ### 说明
 
  用户名/密码:admin/666666
+
+ css 工具函数 地址
+ https://www.tailwindcss.cn/docs/installation#post-css-7
diff --git a/package.json b/package.json
index 6fa200d..ed7ffba 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.11.4",
+    "@tailwindcss/postcss7-compat": "^2.2.2",
     "animate.css": "^4.1.0",
     "ant-design-vue": "1.7.2",
     "axios": "^0.19.2",
@@ -26,6 +27,7 @@
     "js-cookie": "^2.2.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.2",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..f49b5a1
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+import Table from './table/index.vue';
+
+export { Table };
diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
index ae2c4ba..85dc6d3 100644
--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -1,35 +1,10 @@
 <template>
     <div :class="['page-header', layout, pageWidth]">
-        <div class="page-header-wide">
-            <div class="breadcrumb">
-                <a-breadcrumb>
-                    <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
-                        <span>{{item}}</span>
-                    </a-breadcrumb-item>
-                </a-breadcrumb>
-            </div>
-            <div class="detail">
-                <div class="main">
-                    <div class="row">
-                        <h1 v-if="showPageTitle && title" class="title">{{title}}</h1>
-                        <div class="action">
-                            <slot name="action"></slot>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div v-if="this.$slots.content" class="content">
-                            <div v-if="avatar" class="avatar">
-                                <a-avatar :src="avatar" :size="72" />
-                            </div>
-                            <slot name="content"></slot>
-                        </div>
-                        <div v-if="this.$slots.extra" class="extra">
-                            <slot name="extra"></slot>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <a-breadcrumb>
+            <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
+                <span>{{ item }}</span>
+            </a-breadcrumb-item>
+        </a-breadcrumb>
     </div>
 </template>
 
@@ -63,43 +38,11 @@ export default {
 
 <style lang="less" scoped>
 .page-header {
-    background: @base-bg-color;
     padding: 16px 24px;
+
     &.head.fixed {
         margin: auto;
         max-width: 1400px;
     }
-    .page-header-wide {
-        .breadcrumb {
-            margin-bottom: 20px;
-        }
-        .detail {
-            display: flex;
-            .row {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-            }
-            .avatar {
-                margin: 0 24px 0 0;
-            }
-            .main {
-                width: 100%;
-                .title {
-                    font-size: 20px;
-                    color: @title-color;
-                    margin-bottom: 16px;
-                }
-                .content {
-                    display: flex;
-                    flex-wrap: wrap;
-                    color: @text-color-second;
-                }
-                .extra {
-                    display: flex;
-                }
-            }
-        }
-    }
 }
 </style>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
new file mode 100644
index 0000000..7f6b4a9
--- /dev/null
+++ b/src/components/table/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <div :class="$style.card" v-if="$scopedSlots.search">
+            <a-form-model layout="inline" :model="queryForm">
+                <slot name="search" :query="queryForm" />
+            </a-form-model>
+
+            <div class="tw-text-right">
+                <a-space>
+                    <a-button @click="queryForm = {}">重置</a-button>
+                    <a-button type="primary" @click="getData">查询</a-button>
+                </a-space>
+            </div>
+        </div>
+
+        <div class="tw-mt-3" :class="$style.card">
+            <a-space class="tw-mb-2.5">
+                <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
+                    {{ addBtn.text || '新建' }}
+                </a-button>
+                <template v-for="btn of buttons">
+                    <a-button :type="btn.primary" :key="btn.text">{{ btn.text }}</a-button>
+                </template>
+            </a-space>
+
+            <a-table :data-source="data" :loading="loading" v-bind="$attrs">
+                <slot />
+            </a-table>
+        </div>
+
+        <!-- 新增 -->
+        <a-drawer
+            :title="addBtn.title || '新建'"
+            placement="right"
+            :visible="addVisible"
+            @close="addDrawerClose"
+            v-if="addBtn"
+            :maskClosable="addBtn.maskClosable"
+        >
+            <slot name="add" />
+        </a-drawer>
+    </div>
+</template>
+
+<script>
+import { request, METHOD } from '@/utils/requestUtil';
+import BASE_URL from '@/utils/baseUrlUtil';
+
+const data = [
+    {
+        key: '1',
+        name: 'John Brown',
+        age: 32,
+        address: 'New York No. 1 Lake Park',
+        tags: ['nice', 'developer'],
+    },
+    {
+        key: '2',
+        name: 'Jim Green',
+        age: 42,
+        address: 'London No. 1 Lake Park',
+        tags: ['loser'],
+    },
+    {
+        key: '3',
+        name: 'Joe Black',
+        age: 32,
+        address: 'Sidney No. 1 Lake Park',
+        tags: ['cool', 'teacher'],
+    },
+];
+
+export default {
+    props: {
+        url: String,
+        buttons: {
+            type: Array,
+            default: () => [],
+        },
+        addBtn: {
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            data: [],
+            queryForm: {},
+            loading: false,
+            addVisible: false,
+        };
+    },
+    mounted() {
+        this.getData();
+    },
+
+    methods: {
+        async getData() {
+            console.log('查询');
+            this.loading = true;
+            setTimeout(() => {
+                this.data = data;
+                this.loading = false;
+            }, 1000);
+            // const res = await request(`${BASE_URL}/${this.url}`, METHOD.GET);
+            // console.log(res);
+        },
+        add() {
+            this.addVisible = true;
+        },
+        addDrawerClose() {
+            this.addVisible = false;
+        },
+    },
+};
+</script>
+
+<style module>
+.card {
+    @apply tw-bg-white tw-rounded-md tw-p-2.5;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 6a586cd..1683c72 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import { initRouter } from './router';
 import VueI18n from 'vue-i18n';
 import {accountModule, settingModule} from './pages/frame/store';
 import App from './App.vue';
+import "tailwindcss/tailwind.css"
 
 import 'animate.css/source/animate.css';
 import './theme/index.less';
diff --git a/src/mock/frame/tableDataMock.js b/src/mock/frame/tableDataMock.js
new file mode 100644
index 0000000..c04b95a
--- /dev/null
+++ b/src/mock/frame/tableDataMock.js
@@ -0,0 +1,58 @@
+import Mock from 'mockjs';
+
+Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/table`, 'post', () => ({
+    data: {
+        pageNum: 1,
+        pageSize: 10,
+        records: [
+            {
+                regionId: 1403455275008032,
+                regionName: '陈浩玮',
+                organizationId: 146,
+                organizationName: '一级系统：巴基斯坦公司',
+                remark: '123',
+                editorId: 1,
+                editorName: '管理员',
+                editTime: '2021-03-16 22:20:25',
+            },
+            {
+                regionId: 1403455136596000,
+                regionName: '地点测试',
+                organizationId: 212,
+                organizationName: '吴国',
+                remark: '123',
+                editorId: 1,
+                editorName: '管理员',
+                editTime: '2021-03-16 22:19:19',
+            },
+            {
+                regionId: 1400871246102560,
+                regionName: '陈浩玮测试',
+                organizationId: 212,
+                organizationName: '吴国',
+                remark: '321',
+                editorId: 1,
+                editorName: '管理员',
+                editTime: '2021-03-02 16:04:25',
+            },
+            {
+                regionId: 1396338094768160,
+                regionName: '文件地区',
+                organizationId: 208,
+                organizationName: '扩普发展',
+                remark: '123213123123213213223123123',
+                editorId: 1,
+                editorName: '管理员',
+                editTime: '2021-03-02 15:37:11',
+            },
+        ],
+        total: 4,
+        size: 10,
+        current: 1,
+        pages: 1,
+    },
+    code: 'sys.success',
+    message: null,
+    traceId: '1805b654e82a4f2a8357d2f8922d9b19',
+    meta: null,
+}));
diff --git a/src/pages/frame/layouts/PageLayout.vue b/src/pages/frame/layouts/PageLayout.vue
index d059726..7b4df31 100644
--- a/src/pages/frame/layouts/PageLayout.vue
+++ b/src/pages/frame/layouts/PageLayout.vue
@@ -1,15 +1,20 @@
 <template>
     <div class="page-layout">
-        <page-header ref="pageHeader" :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
+        <page-header
+            ref="pageHeader"
+            :style="`margin-top: ${multiPage ? 0 : -24}px`"
+            :breadcrumb="breadcrumb"
+            :title="pageTitle"
+            :logo="logo"
+            :avatar="avatar"
+        >
             <slot name="action" slot="action"></slot>
             <slot slot="content" name="headerContent"></slot>
             <div slot="content" v-if="!this.$slots.headerContent && desc">
                 <p>{{ desc }}</p>
                 <div v-if="this.linkList" class="link">
                     <template v-for="(link, index) in linkList">
-                        <a :key="index" :href="link.href">
-                            <a-icon :type="link.icon" />{{ link.title }}
-                        </a>
+                        <a :key="index" :href="link.href"> <a-icon :type="link.icon" />{{ link.title }} </a>
                     </template>
                 </div>
             </div>
@@ -76,7 +81,7 @@ export default {
             let breadcrumb = page && page.breadcrumb;
             if (breadcrumb) {
                 let i18nBreadcrumb = [];
-                breadcrumb.forEach((item) => {
+                breadcrumb.forEach(item => {
                     i18nBreadcrumb.push(this.$t(item));
                 });
                 return i18nBreadcrumb;
@@ -95,8 +100,8 @@ export default {
             const path = this.$route.path;
             let breadcrumb = [];
             routes
-                .filter((item) => path.includes(item.path))
-                .forEach((route) => {
+                .filter(item => path.includes(item.path))
+                .forEach(route => {
                     const path = route.path.length === 0 ? '/home' : route.path;
                     breadcrumb.push(this.$t(getI18nKey(path)));
                 });
@@ -119,11 +124,7 @@ export default {
 </script>
 
 <style lang="less">
-.page-header {
-    margin: 0 -24px 0;
-}
 .link {
-    /*margin-top: 16px;*/
     line-height: 24px;
     a {
         font-size: 14px;
@@ -136,9 +137,7 @@ export default {
 }
 .page-content {
     position: relative;
-    padding: 24px 0 0;
-    &.side {
-    }
+
     &.head.fixed {
         margin: 0 auto;
         max-width: 1400px;
diff --git a/src/pages/system/view/user/UserManagement.vue b/src/pages/system/view/user/UserManagement.vue
index 1384fc2..b810432 100644
--- a/src/pages/system/view/user/UserManagement.vue
+++ b/src/pages/system/view/user/UserManagement.vue
@@ -1,4 +1,46 @@
 <template>
-  <h1>Menu Management</h1>
+    <my-table url="table" addBtn="addBtn">
+        <template #search="{query}">
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="所属组织">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+        </template>
+        <template #add>
+            <a-input v-model="add.name" />
+        </template>
+        <a-table-column title="姓名" data-index="name" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <span>
+                    <a> {{ row }}</a>
+                    <a-divider type="vertical" />
+                    <a>Delete</a>
+                </span>
+            </template>
+        </a-table-column>
+    </my-table>
 </template>
- 
\ No newline at end of file
+
+<script>
+export default {
+    data: () => ({
+        add: {},
+        addBtn: {},
+    }),
+};
+</script>
diff --git a/src/pages/xunjian/view/area/index.vue b/src/pages/xunjian/view/area/index.vue
new file mode 100644
index 0000000..db43332
--- /dev/null
+++ b/src/pages/xunjian/view/area/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <my-table url="table" :search="search" />
+</template>
+
+<script>
+export default {
+    data: () => ({
+        search: [
+            {
+                type: 'input',
+                key: 'name',
+                label: '所属组织',
+                options: {
+                    placeholder: '请选择所属组织',
+                },
+            },
+            {
+                type: 'input',
+                key: 'address',
+                label: '地区名称',
+            },
+        ],
+    }),
+};
+</script>
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 6b64138..984c40d 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,12 +1,14 @@
-import VueI18nPlugin from './vueI18nPlugin'
-import AuthorityPlugin from './authorityPlugin'
-import TabsPagePlugin from './tabsPagePlugin'
+import VueI18nPlugin from './vueI18nPlugin';
+import AuthorityPlugin from './authorityPlugin';
+import TabsPagePlugin from './tabsPagePlugin';
+import { Table } from '@/components';
 
 const Plugins = {
-  install: function (Vue) {
-    Vue.use(VueI18nPlugin)
-    Vue.use(AuthorityPlugin)
-    Vue.use(TabsPagePlugin)
-  }
-}
+    install: function(Vue) {
+        Vue.use(VueI18nPlugin);
+        Vue.use(AuthorityPlugin);
+        Vue.use(TabsPagePlugin);
+        Vue.component('my-table', Table);
+    },
+};
 export default Plugins;
diff --git a/src/utils/baseUrlUtil.js b/src/utils/baseUrlUtil.js
index 730fdc9..e2d3b5d 100644
--- a/src/utils/baseUrlUtil.js
+++ b/src/utils/baseUrlUtil.js
@@ -2,4 +2,4 @@
 //const API_PROXY_PREFIX='/api'
 //const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
 const BASE_URL = process.env.VUE_APP_API_BASE_URL;
-export default BASE_URL;
\ No newline at end of file
+export default BASE_URL;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..f5a3194
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+    purge: ['./src/*.vue'],
+    darkMode: false, // or 'media' or 'class'
+    theme: {
+        extend: {},
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+    prefix: 'tw-',
+    corePlugins: {
+        preflight: false,
+        fixed: false,
+    },
+};
diff --git a/vue.config.js b/vue.config.js
index d606386..c781060 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,139 +1,144 @@
-let path = require("path");
-const webpack = require("webpack");
-const ThemeColorReplacer = require("webpack-theme-color-replacer");
-const globalConfig = require("./src/config/global.config");
-const settingConfig = require("./src/config/setting.config");
-const cssResolverConfig = require("./src/config/cssResolver.config");
-const { getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors } = require('./src/utils/colorUtil');
- 
-const CompressionWebpackPlugin = require("compression-webpack-plugin");
+let path = require('path');
+const webpack = require('webpack');
+const ThemeColorReplacer = require('webpack-theme-color-replacer');
+const globalConfig = require('./src/config/global.config');
+const settingConfig = require('./src/config/setting.config');
+const cssResolverConfig = require('./src/config/cssResolver.config');
+const {
+    getMenuColors,
+    getAntdColors,
+    getThemeToggleColors,
+    getFunctionalColors,
+} = require('./src/utils/colorUtil');
 
-const productionGzipExtensions = ["js", "css"];
-const isProd = process.env.NODE_ENV === "production";
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
+
+const productionGzipExtensions = ['js', 'css'];
+const isProd = process.env.NODE_ENV === 'production';
 
 const theme = settingConfig.theme;
 
 function getThemeColors(color, $theme) {
-  const _color = color || theme.color
-  const mode = $theme || theme.mode
-  const replaceColors = getThemeToggleColors(_color, mode)
-  const themeColors = [
-    ...replaceColors.mainColors,
-    ...replaceColors.subColors,
-    ...replaceColors.menuColors,
-    ...replaceColors.contentColors,
-    ...replaceColors.rgbColors,
-    ...replaceColors.functionalColors.success,
-    ...replaceColors.functionalColors.warning,
-    ...replaceColors.functionalColors.error,
-  ]
-  return themeColors
+    const _color = color || theme.color;
+    const mode = $theme || theme.mode;
+    const replaceColors = getThemeToggleColors(_color, mode);
+    const themeColors = [
+        ...replaceColors.mainColors,
+        ...replaceColors.subColors,
+        ...replaceColors.menuColors,
+        ...replaceColors.contentColors,
+        ...replaceColors.rgbColors,
+        ...replaceColors.functionalColors.success,
+        ...replaceColors.functionalColors.warning,
+        ...replaceColors.functionalColors.error,
+    ];
+    return themeColors;
 }
 
 function modifyVars(color) {
-  let _color = color || theme.color
-  const palettes = getAntdColors(_color, theme.mode)
-  const menuColors = getMenuColors(_color, theme.mode)
-  const { success, warning, error } = getFunctionalColors(theme.mode)
-  const primary = palettes[5]
-  return {
-    'primary-color': primary,
-    'primary-1': palettes[0],
-    'primary-2': palettes[1],
-    'primary-3': palettes[2],
-    'primary-4': palettes[3],
-    'primary-5': palettes[4],
-    'primary-6': palettes[5],
-    'primary-7': palettes[6],
-    'primary-8': palettes[7],
-    'primary-9': palettes[8],
-    'primary-10': palettes[9],
-    'info-color': primary,
-    'success-color': success[5],
-    'warning-color': warning[5],
-    'error-color': error[5],
-    'alert-info-bg-color': palettes[0],
-    'alert-info-border-color': palettes[2],
-    'alert-success-bg-color': success[0],
-    'alert-success-border-color': success[2],
-    'alert-warning-bg-color': warning[0],
-    'alert-warning-border-color': warning[2],
-    'alert-error-bg-color': error[0],
-    'alert-error-border-color': error[2],
-    'processing-color': primary,
-    'menu-dark-submenu-bg': menuColors[0],
-    'layout-header-background': menuColors[1],
-    'layout-trigger-background': menuColors[2],
-    'btn-danger-bg': error[4],
-    'btn-danger-border': error[4],
-    ...globalConfig.theme[theme.mode]
-  }
+    let _color = color || theme.color;
+    const palettes = getAntdColors(_color, theme.mode);
+    const menuColors = getMenuColors(_color, theme.mode);
+    const { success, warning, error } = getFunctionalColors(theme.mode);
+    const primary = palettes[5];
+    return {
+        'primary-color': primary,
+        'primary-1': palettes[0],
+        'primary-2': palettes[1],
+        'primary-3': palettes[2],
+        'primary-4': palettes[3],
+        'primary-5': palettes[4],
+        'primary-6': palettes[5],
+        'primary-7': palettes[6],
+        'primary-8': palettes[7],
+        'primary-9': palettes[8],
+        'primary-10': palettes[9],
+        'info-color': primary,
+        'success-color': success[5],
+        'warning-color': warning[5],
+        'error-color': error[5],
+        'alert-info-bg-color': palettes[0],
+        'alert-info-border-color': palettes[2],
+        'alert-success-bg-color': success[0],
+        'alert-success-border-color': success[2],
+        'alert-warning-bg-color': warning[0],
+        'alert-warning-border-color': warning[2],
+        'alert-error-bg-color': error[0],
+        'alert-error-border-color': error[2],
+        'processing-color': primary,
+        'menu-dark-submenu-bg': menuColors[0],
+        'layout-header-background': menuColors[1],
+        'layout-trigger-background': menuColors[2],
+        'btn-danger-bg': error[4],
+        'btn-danger-border': error[4],
+        ...globalConfig.theme[theme.mode],
+    };
 }
 
 // 修正 webpack-theme-color-replacer 插件提取的 css 结果
 function resolveCss(output, srcArr) {
-  let regExps = []
-  // 提取 resolve 配置中所有的正则配置
-  Object.keys(cssResolverConfig).forEach(key => {
-    let isRegExp = false
-    let reg = {}
-    try {
-      reg = eval(key)
-      isRegExp = reg instanceof RegExp
-    } catch (e) {
-      isRegExp = false
-    }
-    if (isRegExp) {
-      regExps.push([reg, cssResolverConfig[key]])
-    }
-  })
+    let regExps = [];
+    // 提取 resolve 配置中所有的正则配置
+    Object.keys(cssResolverConfig).forEach(key => {
+        let isRegExp = false;
+        let reg = {};
+        try {
+            reg = eval(key);
+            isRegExp = reg instanceof RegExp;
+        } catch (e) {
+            isRegExp = false;
+        }
+        if (isRegExp) {
+            regExps.push([reg, cssResolverConfig[key]]);
+        }
+    });
 
-  // 去重
-  srcArr = dropDuplicate(srcArr)
+    // 去重
+    srcArr = dropDuplicate(srcArr);
 
-  // 处理 css
-  let outArr = []
-  srcArr.forEach(text => {
-    // 转换为 css 对象
-    let cssObj = parseCssObj(text)
-    // 根据selector匹配配置，匹配成功，则按配置处理 css
-    if (cssResolverConfig[cssObj.selector] != undefined) {
-      let cfg = cssResolverConfig[cssObj.selector]
-      if (cfg) {
-        outArr.push(cfg.resolve(text, cssObj))
-      }
-    } else {
-      let cssText = ''
-      // 匹配不成功，则测试是否有匹配的正则配置，有则按正则对应的配置处理
-      for (let regExp of regExps) {
-        if (regExp[0].test(cssObj.selector)) {
-          let cssCfg = regExp[1]
-          cssText = cssCfg ? cssCfg.resolve(text, cssObj) : ''
-          break
+    // 处理 css
+    let outArr = [];
+    srcArr.forEach(text => {
+        // 转换为 css 对象
+        let cssObj = parseCssObj(text);
+        // 根据selector匹配配置，匹配成功，则按配置处理 css
+        if (cssResolverConfig[cssObj.selector] != undefined) {
+            let cfg = cssResolverConfig[cssObj.selector];
+            if (cfg) {
+                outArr.push(cfg.resolve(text, cssObj));
+            }
+        } else {
+            let cssText = '';
+            // 匹配不成功，则测试是否有匹配的正则配置，有则按正则对应的配置处理
+            for (let regExp of regExps) {
+                if (regExp[0].test(cssObj.selector)) {
+                    let cssCfg = regExp[1];
+                    cssText = cssCfg ? cssCfg.resolve(text, cssObj) : '';
+                    break;
+                }
+                // 未匹配到正则，则设置 cssText 为默认的 css（即不处理）
+                cssText = text;
+            }
+            if (cssText != '') {
+                outArr.push(cssText);
+            }
         }
-        // 未匹配到正则，则设置 cssText 为默认的 css（即不处理）
-        cssText = text
-      }
-      if (cssText != '') {
-        outArr.push(cssText)
-      }
-    }
-  })
-  output = outArr.join('\n')
-  return output
+    });
+    output = outArr.join('\n');
+    return output;
 }
 
 // 数组去重
 function dropDuplicate(arr) {
-  let map = {}
-  let r = []
-  for (let s of arr) {
-    if (!map[s]) {
-      r.push(s)
-      map[s] = 1
+    let map = {};
+    let r = [];
+    for (let s of arr) {
+        if (!map[s]) {
+            r.push(s);
+            map[s] = 1;
+        }
     }
-  }
-  return r
+    return r;
 }
 
 /**
@@ -146,137 +151,142 @@ function dropDuplicate(arr) {
  * }}
  */
 function parseCssObj(cssText) {
-  let css = {}
-  const ruleIndex = cssText.indexOf('{')
-  css.selector = cssText.substring(0, ruleIndex)
-  const ruleBody = cssText.substring(ruleIndex + 1, cssText.length - 1)
-  const rules = ruleBody.split(';')
-  css.rules = rules
-  css.toText = function () {
-    let body = ''
-    this.rules.forEach(item => { body += item + ';' })
-    return `${this.selector}{${body}}`
-  }
-  return css
+    let css = {};
+    const ruleIndex = cssText.indexOf('{');
+    css.selector = cssText.substring(0, ruleIndex);
+    const ruleBody = cssText.substring(ruleIndex + 1, cssText.length - 1);
+    const rules = ruleBody.split(';');
+    css.rules = rules;
+    css.toText = function() {
+        let body = '';
+        this.rules.forEach(item => {
+            body += item + ';';
+        });
+        return `${this.selector}{${body}}`;
+    };
+    return css;
 }
 
 const assetsCDN = {
-  // webpack build externals cdn预加载使用
-  externals: {
-    vue: "Vue",
-    "vue-router": "VueRouter",
-    vuex: "Vuex",
-    axios: "axios",
-    nprogress: "NProgress",
-    clipboard: "ClipboardJS",
-    "@antv/data-set": "DataSet",
-    "js-cookie": "Cookies",
-  },
-  css: [],
-  js: [
-    "//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
-    "//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js",
-    "//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
-    "//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
-    "//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js",
-    "//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js",
-    "//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js",
-    "//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js",
-  ],
+    // webpack build externals cdn预加载使用
+    externals: {
+        vue: 'Vue',
+        'vue-router': 'VueRouter',
+        vuex: 'Vuex',
+        axios: 'axios',
+        nprogress: 'NProgress',
+        clipboard: 'ClipboardJS',
+        '@antv/data-set': 'DataSet',
+        'js-cookie': 'Cookies',
+    },
+    css: [],
+    js: [
+        '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+        '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
+        '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
+        '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+        '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
+        '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
+        '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
+        '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js',
+    ],
 };
 
 module.exports = {
-  devServer: {
-    // proxy: {
-    //   '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
-    //     target: process.env.VUE_APP_API_BASE_URL,
-    //     changeOrigin: true,
-    //     pathRewrite: {
-    //       '^/api': ''
-    //     }
-    //   }
-    // }
-  },
-  pluginOptions: {
-    /**
-     * 导入css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions，
-     * 避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用 变量。
-     *
-     * theme.less 定义的变量预先导入 直接使用
-     */
-    "style-resources-loader": {
-      preProcessor: "less",
-      //这个是绝对路径,不能使用 alias中配置的别名路径，如@表示的src
-      patterns: [path.resolve(__dirname, "./src/theme/default.less")],
+    devServer: {
+        // proxy: {
+        //   '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
+        //     target: process.env.VUE_APP_API_BASE_URL,
+        //     changeOrigin: true,
+        //     pathRewrite: {
+        //       '^/api': ''
+        //     }
+        //   }
+        // }
     },
-  },
-  configureWebpack: (config) => {
-    config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
-    config.performance = {
-      hints: false,
-    };
-    config.plugins.push(
-      new ThemeColorReplacer({
-        //Optional. output css file name, suport [contenthash] and [hash].
-        fileName: "css/theme-colors-[contenthash:8].css",
-        //matchColors: Array<string> Colors array for extracting css file. 
-        //Css rules which have any one of these colors will be extracted out.
-        //抽取所有相关颜色做替换
-        matchColors: getThemeColors(),
-        //injectCss: boolean Optional. Inject css text into js file, no need to download theme-colors-xxx.css any more.
-        injectCss: true,
-        //resolveCss: Function(resultCss : string) : string Optional. Resolve result css code as you wish.
-        //转换原有CSS中的特定样式为自定义样式
-        resolveCss,
-      })
-    );
-    // Ignore all locale files of moment.js
-    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
-    // 生产环境下将资源压缩成gzip格式
-    if (isProd) {
-      // add `CompressionWebpack` plugin to webpack plugins
-      config.plugins.push(
-        new CompressionWebpackPlugin({
-          algorithm: "gzip",
-          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
-          threshold: 10240,
-          minRatio: 0.8,
-        })
-      );
-    }
-    // if prod, add externals
-    if (isProd) {
-      config.externals = assetsCDN.externals;
-    }
-  },
-  chainWebpack: (config) => {
-    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
-    if (isProd) {
-      config.plugin("optimize-css").tap((args) => {
-        args[0].cssnanoOptions.preset[1].colormin = false;
-        return args;
-      });
-    }
-    // 生产环境下使用CDN
-    if (isProd) {
-      config.plugin("html").tap((args) => {
-        args[0].cdn = assetsCDN;
-        return args;
-      });
-    }
-  },
-  css: {
-    loaderOptions: {
-      less: {
-        lessOptions: {
-          modifyVars: modifyVars(),
-          javascriptEnabled: true,
+    pluginOptions: {
+        /**
+         * 导入css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions，
+         * 避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用 变量。
+         *
+         * theme.less 定义的变量预先导入 直接使用
+         */
+        'style-resources-loader': {
+            preProcessor: 'less',
+            //这个是绝对路径,不能使用 alias中配置的别名路径，如@表示的src
+            patterns: [path.resolve(__dirname, './src/theme/default.less')],
+        },
+    },
+    configureWebpack: config => {
+        config.entry.app = ['babel-polyfill', 'whatwg-fetch', './src/main.js'];
+        config.performance = {
+            hints: false,
+        };
+        config.plugins.push(
+            new ThemeColorReplacer({
+                //Optional. output css file name, suport [contenthash] and [hash].
+                fileName: 'css/theme-colors-[contenthash:8].css',
+                //matchColors: Array<string> Colors array for extracting css file.
+                //Css rules which have any one of these colors will be extracted out.
+                //抽取所有相关颜色做替换
+                matchColors: getThemeColors(),
+                //injectCss: boolean Optional. Inject css text into js file, no need to download theme-colors-xxx.css any more.
+                injectCss: true,
+                //resolveCss: Function(resultCss : string) : string Optional. Resolve result css code as you wish.
+                //转换原有CSS中的特定样式为自定义样式
+                resolveCss,
+            }),
+        );
+        // Ignore all locale files of moment.js
+        config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
+        // 生产环境下将资源压缩成gzip格式
+        if (isProd) {
+            // add `CompressionWebpack` plugin to webpack plugins
+            config.plugins.push(
+                new CompressionWebpackPlugin({
+                    algorithm: 'gzip',
+                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+                    threshold: 10240,
+                    minRatio: 0.8,
+                }),
+            );
+        }
+        // if prod, add externals
+        if (isProd) {
+            config.externals = assetsCDN.externals;
+        }
+    },
+    chainWebpack: config => {
+        // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
+        if (isProd) {
+            config.plugin('optimize-css').tap(args => {
+                args[0].cssnanoOptions.preset[1].colormin = false;
+                return args;
+            });
+        }
+        // 生产环境下使用CDN
+        if (isProd) {
+            config.plugin('html').tap(args => {
+                args[0].cdn = assetsCDN;
+                return args;
+            });
+        }
+    },
+    css: {
+        loaderOptions: {
+            less: {
+                lessOptions: {
+                    modifyVars: modifyVars(),
+                    javascriptEnabled: true,
+                },
+            },
+            postcss: {
+                plugins: [require('tailwindcss')],
+            },
         },
-      },
     },
-  },
-  publicPath: process.env.VUE_APP_PUBLIC_PATH,
-  outputDir: "dist",
-  assetsDir: "static",
-  productionSourceMap: false,
+    publicPath: process.env.VUE_APP_PUBLIC_PATH,
+    outputDir: 'dist',
+    assetsDir: 'static',
+    productionSourceMap: false,
 };
-- 
GitLab