.storybook/preview.js

@@ -2,12 +2,10 @@ import Vue from "vue";
 import VueCompositionAPI from "@vue/composition-api";
 import Element from "element-ui";
 import "../src/theme-chalk/src/library/element-ui.scss";
-import 'ant-design-vue/dist/antd.less';
 
 import "../src/theme-chalk/lib/index.css";
 import "../src/plugins/tailwindcss/index.css";
 
-import AntDesignVue from '../src/plugins/ant-design-vue';
 import VXETable from '../src/plugins/vxe-table';
 
 import IconPark from '../src/plugins/icon-park';
@@ -21,10 +19,9 @@ import '@package/icon-park/styles/index.css';
 // 		return cellValue === true ? '正常' : '禁止'
 // 	}
 // })
-
+console.log('Element:', Element)
 Vue.use(VueCompositionAPI);
 Vue.use(Element);
-Vue.use(AntDesignVue);
 Vue.use(VXETable);
 Vue.component(IconPark.name, IconPark);
 

build/config.js

@@ -31,7 +31,6 @@ exports.externals = externals;
 exports.alias = {
 	"@": path.resolve(__dirname, "../src"),
 	"@package/lwc-ui-components": path.resolve(__dirname, "../"),
-	"@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/plugins/ant-design-vue/icons.js"),
 };
 
 exports.vue = {

package-lock.json

 {
 	"name": "@package/lwc-ui-components",
-	"version": "0.1.36",
+	"version": "0.1.37",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "private": false,
   "license": "UNLICENSED",
   "scripts": {
@@ -33,12 +33,11 @@
     "@mdx-js/vue-loader": "^1.6.22",
     "@package/icon-park": "^1.2.5",
     "@vue/composition-api": "^1.0.0-beta.19",
-    "ant-design-vue": "^1.7.2",
     "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "dayjs": "^1.9.6",
     "echarts": "^4.9.0",
-    "element-ui": "^2.13.2",
+    "element-ui": "^2.15.6",
     "jsbarcode": "^3.11.3",
     "lodash": "^4.17.20",
     "mockjs": "^1.1.0",

src/index.js

@@ -205,7 +205,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.35',
+  version: '0.1.36',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,

src/plugins/ant-design-vue/icons.js

-export { default as Down } from "@ant-design/icons/lib/outline/DownOutline";
-export { default as Loading } from "@ant-design/icons/lib/outline/LoadingOutline";
-export { default as Close } from "@ant-design/icons/lib/outline/CloseOutline";
-export { default as CloseCircle } from "@ant-design/icons/lib/outline/CloseCircleOutline";
-export { default as Check } from "@ant-design/icons/lib/outline/CheckOutline";
-export { default as Search } from "@ant-design/icons/lib/outline/SearchOutline";
-export { default as Redo } from "@ant-design/icons/lib/outline/RedoOutline";
-export { default as Right } from "@ant-design/icons/lib/outline/RightOutline";
-export { default as Left } from "@ant-design/icons/lib/outline/LeftOutline";
-export { default as Calendar } from "@ant-design/icons/lib/outline/CalendarOutline";
-export { default as Ellipsis } from "@ant-design/icons/lib/outline/EllipsisOutline";
-export { default as Up } from "@ant-design/icons/lib/outline/UpOutline";
-export { default as Bars } from "@ant-design/icons/lib/outline/BarsOutline";
-export { default as Delete } from "@ant-design/icons/lib/outline/DeleteOutline";
-export { default as File } from "@ant-design/icons/lib/outline/FileOutline";
-export { default as PaperClip } from "@ant-design/icons/lib/outline/PaperClipOutline";
-export { default as CaretDown } from "@ant-design/icons/lib/outline/CaretDownOutline";
-export { default as FolderOpen } from "@ant-design/icons/lib/outline/FolderOpenOutline";
-export { default as Folder } from "@ant-design/icons/lib/outline/FolderOutline";
-export { default as Plus } from "@ant-design/icons/lib/outline/PlusOutline";
-export { default as Sync } from "@ant-design/icons/lib/outline/SyncOutline";

src/plugins/ant-design-vue/index.js

-/* 引入部分ant-design-vue 组件 */
-import {
-	Empty,
-	Skeleton,
-	Result,
-	Calendar,
-	Badge,
-	Progress,
-	Steps,
-	Affix,
-	Icon,
-	Descriptions,
-} from "ant-design-vue";
-
-const install = function (Vue, opts = {}) {
-	Vue.use(Empty);
-	Vue.use(Skeleton);
-	Vue.use(Result);
-	Vue.use(Calendar);
-	Vue.use(Badge);
-	Vue.use(Progress);
-	Vue.use(Steps);
-	Vue.use(Steps.Step);
-	Vue.use(Affix);
-	Vue.use(Icon);
-	Vue.use(Descriptions);
-};
-
-export {
-	Empty,
-	Skeleton,
-	Result,
-	Calendar,
-	Badge,
-	Progress,
-	Steps,
-	Affix,
-	Icon,
-	Descriptions
-}
-
-export default {
-	install
-};

src/plugins/tailwindcss/index.js

@@ -29,4 +29,4 @@ export const padding = {
 
 export const margin = {
     ...theme.margin
-}
\ No newline at end of file
+}

src/stories/changelog.stories.mdx

@@ -8,6 +8,13 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v0.1.37 20210902**
+
+#### 优化
+
+- 优化部分组件样式，替换 `ant-design-vue` 组件为 `element-ui`，移除 ant-design-vue，减小打包/运行体积
+
 ---
 ### **v0.1.36 20210802**
 

src/stories/chart/bar/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/funnel/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/gauge/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/line/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/pie/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/report/src/index.vue

@@ -7,7 +7,7 @@
 				<el-row v-if="formConfig" class="overflow-hidden">
 					<vxe-form v-bind="formConfig"></vxe-form>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/chart/scatter/Index.vue

@@ -7,7 +7,7 @@
 				<el-row>
 					<slot></slot>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">

src/stories/custom-theme.stories.mdx

@@ -31,40 +31,6 @@ $--color-primary: #409EFF;
 @import "~lwc-ui-components/packages/theme-chalk/src/index";
 ```
 
-## 自定义AntDesign主题
-
-### 方法1: 自定义样式文件
-在项目中引入，与[官方文档](https://www.antdv.com/docs/vue/customize-theme-cn/)一致
-```js
-@import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
-@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
-```
-
-### 方法2: vue-cli3 config自定义配置
-在项目中只引入less样式文件
-```js
-@import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
-```
-
-在`vue-cli3`的`vue.config.js`中引入
-```js
-css: {
-  loaderOptions: {
-    less: {
-      lessOptions: {
-        modifyVars: {
-          "primary-color": "#1DA57A",
-          "link-color": "#1DA57A",
-          "border-radius-base": "2px",
-        },
-        javascriptEnabled: true,
-      },
-    },
-  },
-}
-```
-
-
 ## Resources
 
 [Element-UI 自定义主题](https://element.eleme.io/#/zh-CN/component/custom-theme)

src/stories/dashboard/current-situation/Index.vue

@@ -3,17 +3,12 @@
 			<!-- 顶部title -->
 			<el-row slot="header" class="flex flex-row items-center">
 				<el-col class="flex items-end">
-					<span class="font-bold">{{ title || "暂无标题" }}</span>
+					<span class="font-bold">{{ title || "" }}</span>
 					<span class="text-xs ml-2 text-color-secondary"
-						>更新时间: {{ refreshTime || "暂无更新时间" }}</span
+						>更新时间: {{ refreshTime || "" }}</span
 					>
 				</el-col>
-				<a-icon
-					@click="onRefresh"
-					class="text-color-secondary align-middle float-right"
-					type="sync"
-					:spin="spin"
-				/>
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-row>
 			<!-- 显示区域 -->
 			<el-row class="flex flex-wrap">
@@ -31,10 +26,7 @@
 								</p>
 								<p class="text-xl font-bold truncate my-1 flex items-center">
 									{{ formatNumber(item.today) }}
-									<a-icon
-										v-if="!item.hiddenYesterday"
-										:component="item.trend === 'rise' ? UpSvg : DownSvg"
-									/>
+									<span v-if="!item.hiddenYesterday" :class="item.trend === 'rise' ? 'el-icon-top text-theme-success' : 'el-icon-bottom text-theme-danger' " />
 								</p>
 								<p
 									class="text-sm text-color-secondary truncate my-1"
@@ -63,10 +55,8 @@
 								</p>
 								<p class="text-xl font-bold truncate my-2 flex items-center">
 									{{ formatNumber(item.today) }}
-									<a-icon
-										v-if="!item.hiddenYesterday"
-										:component="item.trend === 'rise' ? UpSvg : DownSvg"
-									/>
+									<span v-if="!item.hiddenYesterday" :class="item.trend === 'rise' ? 'el-icon-top text-theme-success' : 'el-icon-bottom text-theme-danger' " />
+
 								</p>
 								<p
 									class="text-sm text-color-secondary truncate my-2"

src/stories/dashboard/custom-card-default/Index.vue

@@ -7,7 +7,7 @@
 				<el-row v-if="formConfig" class="overflow-hidden">
 					<vxe-form v-bind="formConfig"></vxe-form>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="flex flex-row justify-center items-center pt-1 pb-2" :gutter="6">
@@ -18,7 +18,7 @@
 				<span class="text-color-primary text-lg mb-1">{{ item.data }}</span>
 				<span class="text-color-secondary text-sm">{{ item.label }}</span>
 			</el-col>
-			<a-empty v-show="data.length === 0"/>
+			<el-empty v-show="data.length === 0" :image-size="64"></el-empty>
 		</el-row>
 	</el-card>
 </template>

src/stories/dashboard/custom-ranking-default/Index.vue

@@ -7,7 +7,7 @@
 				<el-row v-if="formConfig" class="overflow-hidden">
 					<vxe-form v-bind="formConfig"></vxe-form>
 				</el-row>
-				<a-icon @click="onRefresh" class="text-color-secondary align-middle float-right ml-4" type="sync" :spin="spin" />
+				<span @click="onRefresh" class="text-color-secondary align-middle float-right ml-4 el-icon-refresh text-lg" :class="{ 'animate-spin': spin }" />
 			</el-col>
 		</el-row>
 		<el-row class="lwc-table-border-none flex flex-row justify-center items-center pt-1 pb-2">
@@ -41,7 +41,7 @@
 					</template>
 				</el-table-column>
 			</el-table>
-			<a-empty v-show="data.length === 0"/>
+			<el-empty v-show="data.length === 0" :image-size="64"></el-empty>
 		</el-row>
 	</el-card>
 </template>