feat(img-crop): added img-crop demo

.env.development

@@ -17,6 +17,9 @@ VUE_APP_SUPPORT_IE=TRUE
 # Whether to open the mock TRUE or FALSE
 VUE_APP_USE_MOCK=TRUE
 
+# Use the theme switching function
+VUE_APP_USE_THEME_REPLACER=TRUE
+
 # Basic interface address SPA
 GLOB_API_URL=/app
 

.env.production

@@ -15,6 +15,9 @@ BUILD_ON_GZIP=FALSE
 # Production environment support ie environment TRUE or FALSE
 VUE_APP_SUPPORT_IE=TRUE
 
+# Use the theme switching function
+VUE_APP_USE_THEME_REPLACER=TRUE
+
 # Whether to open the mock TRUE or FALSE
 VUE_APP_USE_MOCK=TRUE
 

README.md

@@ -1,11 +1,26 @@
-### VUE-VBEN-ADMIN
+<p align="center">
+  <a href="https://github.com/anncwb/vue-vben-admin" target="_blank">
+    <img alt="VbenAdmin Logo" width="100" src="./src/assets/images/logo.png">
+  </a>
+</p>
+<h2 align="center">VUE VBEN ADMIN</h2>
 
 一个适合开发大型项目的基础框架，需要对`vue`,`typescript`有一定的了解，
 
 项目基于`ant-design-vue`,`typescript`,`vue-composition-api`,`TSX`实现的 vue3 风格的后台管理系统，用 vue3 的写法写 vue2
 
 兼容 vue2 的浏览器，一切免费，不收取任何费用，请放心使用。后续定期提供更新及维护，可供参考与学习
 
+### 在线示例
+
+### gitHub 地址
+
+[vue-vben-admin](https://github.com/anncwb/vue-vben-admin)
+
+### 文档
+
+由于写的时间比较短，文档暂时还在开发中，后续会陆续补全...
+
 ### 为什么写这个
 
 目前在网上暂时没有找到相关的使用 composition-api 写的后台系统，所以就把自己写的分享出来，后续会陆续加上新的功能，并且等`vue3`完全稳定的时候
@@ -238,10 +253,9 @@ yarn log # 生成CHANGELOG
 - [ ] 图片裁剪
 - [ ] 富文本组件
 - [ ] 上传组件
-- [ ] 常用页面实现及例子
 - [ ] vue3 一键切换
 - [ ] 黑暗主题
-- [ ] 更多组件/功能欢迎提交 pr
+- [ ] 更多组件/功能欢迎提交 pr 或者 issue
 
 ## 加入我们
 

config/glob/lessModifyVars.js

@@ -24,8 +24,8 @@ const modifyVars = {
 
   'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影 Floating shadow
 
-  'border-color-base': '#CECECE', // 边框色 Border color,
-  'border-color-split': '#CECECE', // 边框色 Border color,
+  'border-color-base': '#cececd', // 边框色 Border color,
+  'border-color-split': '#cececd', // 边框色 Border color,
   'border-radius-base': '2px', // 组件/浮层圆角 Component/float fillet
 };
 

config/vue/index.js

@@ -17,6 +17,7 @@ const { configVueLoader } = require('./loader/vue-loader');
 const { createSvgLoader } = require('./loader/svg-loader');
 const { createImageLoader } = require('./loader/image-webpack');
 const { createWorkerLoader } = require('./loader/worker-loader');
+const { configTsLoader } = require('./loader/ts-loader');
 
 const { createGzip } = require('./plugins/gzip');
 const { createHardSourcePlugin } = require('./plugins/hardSource');
@@ -51,6 +52,7 @@ function createVueConfig() {
       configIgnorePlugin(config);
       // alias
       configAlias(config);
+      configTsLoader(config);
       // sourceMap设置
       configSourceMap(config);
       // Performance

config/vue/loader/ts-loader.js

@@ -0,0 +1,9 @@
+const resolve = require('../../../build/getCwdPath');
+
+function configTsLoader(config) {
+  config.module.rule('ts').exclude.add(resolve('node_modules')).end();
+  config.module.rule('tsx').exclude.add(resolve('node_modules')).end();
+}
+module.exports = {
+  configTsLoader,
+};

config/vue/plugins/define.js

@@ -1,4 +1,5 @@
 const { merge } = require('webpack-merge');
+
 const configDefinePlugin = (config) => {
   config.plugin('define').tap((args) => {
     // Incorporate dynamic configuration into process.env

config/vue/plugins/theme.js

@@ -39,6 +39,9 @@ const themePluginOption = {
 };
 
 const createThemeColorReplacerPlugin = (config) => {
+  if (process.env.VUE_APP_USE_THEME_REPLACER !== 'TRUE') {
+    return;
+  }
   config.plugin('theme-color-replace').use(ThemeColorReplacer, [themePluginOption]);
 };
 

package.json

@@ -14,6 +14,7 @@
   ],
   "scripts": {
     "bootstrap": "yarn",
+    "inspect": "vue-cli-service inspect > output.js",
     "serve": "node ./build/task/serve",
     "build": "node ./build/task/build",
     "build:no-cache": "npm run clean:cache && npm run build",
@@ -32,8 +33,8 @@
     "postinstall": "node ./build/npm-hook/postinstall.js && npm run clean:cache"
   },
   "dependencies": {
-    "@vue/composition-api": "^1.0.0-beta.5",
-    "ant-design-vue": "^1.6.3",
+    "@vue/composition-api": "^1.0.0-beta.6",
+    "ant-design-vue": "^1.6.4",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "crypto-js": "^3.3.0",
@@ -48,6 +49,7 @@
     "vue-baidu-map": "^0.21.22",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.18.2",
+    "vue-image-crop-upload": "^2.5.0",
     "vue-router": "^3.3.4",
     "vuex": "^3.4.0",
     "vuex-module-decorators": "^0.17.0"
@@ -59,9 +61,9 @@
     "@gfx/zopfli": "^1.0.14",
     "@types/echarts": "^4.6.3",
     "@types/qrcode": "^1.3.4",
+    "@types/tinymce": "^4.5.24",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
-    "@types/tinymce": "^4.5.24",
     "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
     "@vue/cli-plugin-babel": "~4.4.6",
     "@vue/cli-plugin-eslint": "~4.4.6",
@@ -94,6 +96,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
+    "fork-ts-checker-webpack-plugin": "^5.0.9",
     "glob": "^7.1.6",
     "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-harddisk-plugin": "^1.0.1",

src/components/authority/index.ts

@@ -1,3 +1 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-export const Authority = getAsyncComponent(() => import('./src/index.vue'));
+export { default as Authority } from './src/index.vue';

src/components/base/index.ts

@@ -1,5 +1,3 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-export const BaseHelp = getAsyncComponent(() => import('./src/Help.vue'));
-export const BaseArrow = getAsyncComponent(() => import('./src/Arrow.vue'));
-export const BaseTitle = getAsyncComponent(() => import('./src/Title.vue'));
+export { default as BaseHelp } from './src/Help.vue';
+export { default as BaseArrow } from './src/Arrow.vue';
+export { default as BaseTitle } from './src/Title.vue';

src/components/base/src/Arrow.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import { defineComponent, computed, unref } from 'compatible-vue';
+  import { defineComponent, computed, unref, PropOptions } from 'compatible-vue';
 
   import { Icon } from '@/components/icon/index';
 
@@ -13,7 +13,7 @@
       expand: {
         type: Boolean,
         default: true,
-      },
+      } as PropOptions<boolean>,
     },
     setup(props, { emit }) {
       const { prefixCls } = useDesign('base-arrow');

src/components/base/src/Title.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
   import BaseHelp from './Help.vue';
-  import { defineComponent } from 'compatible-vue';
+  import { defineComponent, PropOptions } from 'compatible-vue';
 
   // hook
   import { useDesign } from '@/hooks/core/useDesign';
@@ -13,7 +13,7 @@
       helpMessage: {
         type: [String, Array],
         default: '',
-      },
+      } as PropOptions<string | string[]>,
     },
     setup(props, { slots }) {
       const { prefixCls } = useDesign('base-title');

src/components/container/index.ts

@@ -4,8 +4,4 @@ export { default as ScrollContainer } from './src/ScrollContainer.vue';
 export { default as CollapseContainer } from './src/CollapseContainer.vue';
 export { default as LazyContainer } from './src/LazyContainer.vue';
 
-// export const CollapseContainer = getAsyncComponent(() => import('./src/CollapseContainer.vue'));
-// export const ScrollContainer = getAsyncComponent(() => import('./src/ScrollContainer.vue'));
-// export const LazyContainer = getAsyncComponent(() => import('./src/LazyContainer.vue'));
-
 export * from './src/types';

src/components/countdown/index.ts

@@ -1,7 +1,2 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-// export { default as CodeCountdown } from './src/CodeCountdown.vue';
-// export { default as InputCountDown } from './src/InputCountDown.vue';
-
-export const CodeCountdown = getAsyncComponent(() => import('./src/CodeCountdown.vue'));
-export const InputCountDown = getAsyncComponent(() => import('./src/InputCountDown.vue'));
+export { default as CodeCountdown } from './src/CodeCountdown.vue';
+export { default as InputCountDown } from './src/InputCountDown.vue';

src/components/description/index.ts

@@ -1,7 +1,4 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-// export { default as Description } from './src/index.vue';
-export const Description = getAsyncComponent(() => import('./src/index.vue'));
+export { default as Description } from './src/index.vue';
 
 export * from './src/type';
 export { useDescription } from './src/useDescription';

src/components/description/src/props.ts

@@ -6,25 +6,25 @@ export default {
   title: {
     type: String,
     default: '',
-  },
+  } as PropOptions<string>,
   size: {
     type: String,
     default: 'small',
-  },
+  } as PropOptions<string>,
   bordered: {
     type: Boolean,
     default: true,
-  },
+  } as PropOptions<boolean>,
   column: {
     type: [Number, Object],
     default: () => {
       return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
     },
-  },
+  } as PropOptions<number | any>,
   collapseOptions: {
     type: Object,
     default: null,
-  },
+  } as PropOptions<any>,
   // as PropOptions<CollapseContainerOptions>,
   schema: {
     type: Array,
@@ -33,5 +33,5 @@ export default {
   data: {
     type: Object,
     default: null,
-  },
+  } as PropOptions<any>,
 };

src/components/icon/index.ts

@@ -1,8 +1,2 @@
-// import Vue, { VueConstructor } from 'compatible-vue';
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-// export { default as Icon } from './src/index.vue';
-// export { default as SvgIcon } from './src/SvgIcon.vue';
-
-export const Icon = getAsyncComponent(() => import('./src/index.vue'));
-export const SvgIcon = getAsyncComponent(() => import('./src/SvgIcon.vue'));
+export { default as Icon } from './src/index.vue';
+export { default as SvgIcon } from './src/SvgIcon.vue';

src/components/icon/src/SvgIcon.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import { defineComponent, computed, unref } from 'compatible-vue';
+  import { defineComponent, computed, unref, PropOptions } from 'compatible-vue';
 
   export default defineComponent({
     name: 'SvgIcon',
@@ -8,17 +8,17 @@
       type: {
         type: String,
         required: true,
-      },
+      } as PropOptions<string>,
 
       // 样式名
       className: {
         type: String,
-      },
+      } as PropOptions<string>,
 
       // 大小
       size: {
         type: String,
-      },
+      } as PropOptions<string>,
     },
     setup(props) {
       // svg样式

src/components/icon/src/index.vue

@@ -3,7 +3,7 @@
   import { Icon } from 'ant-design-vue';
   import { SvgIcon } from '@/components/icon/index';
 
-  import { defineComponent, computed, unref } from 'compatible-vue';
+  import { defineComponent, computed, unref, PropOptions } from 'compatible-vue';
 
   export default defineComponent({
     name: 'Icon',
@@ -12,13 +12,13 @@
       type: {
         type: String,
         required: true,
-      },
+      } as PropOptions<string>,
 
       // 是否是自定义的svg图标
       isSvg: {
         type: Boolean,
         default: false,
-      },
+      } as PropOptions<boolean>,
     },
     setup(props, { emit, attrs }) {
       // 是否未自定义的svg图标

src/components/loading/index.ts

@@ -1,7 +1,2 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-// export { default as BasicLoading } from './src/BasicLoading.vue';
-// export { default as FullLoading } from './src/FullLoading.vue';
-
-export const BasicLoading = getAsyncComponent(() => import('./src/BasicLoading.vue'));
-export const FullLoading = getAsyncComponent(() => import('./src/FullLoading.vue'));
+export { default as BasicLoading } from './src/BasicLoading.vue';
+export { default as FullLoading } from './src/FullLoading.vue';

src/components/loading/src/BasicLoading.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
   // components
-  import { defineComponent, computed, unref } from 'compatible-vue';
+  import { defineComponent, computed, unref, PropOptions } from 'compatible-vue';
 
   // hook
   import { useDesign } from '@/hooks/core/useDesign';
@@ -17,14 +17,14 @@
       tip: {
         type: String,
         default: '',
-      },
+      } as PropOptions<string>,
       size: {
         type: String,
         default: SizeEnum.DEFAULT,
         validator: (v: SizeEnum): boolean => {
           return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
         },
-      },
+      } as PropOptions<SizeEnum>,
     },
     setup(props: BasicLoadingProps) {
       const getLoadingIconSize = computed(() => {

src/components/loading/src/FullLoading.vue

@@ -1,6 +1,6 @@
 <script lang="tsx">
   // components
-  import { defineComponent, computed, unref } from 'compatible-vue';
+  import { defineComponent, computed, unref, PropOptions } from 'compatible-vue';
   import BasicLoading from './BasicLoading.vue';
 
   import { useDesign } from '@/hooks/core/useDesign';
@@ -13,8 +13,8 @@
       tip: {
         type: String,
         default: '',
-      },
-      absolute: Boolean,
+      } as PropOptions<string>,
+      absolute: Boolean as PropOptions<boolean>,
     },
     setup(props) {
       // 样式前缀

src/components/menu/index.ts

@@ -1,6 +1,4 @@
-import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
-
-export const BasicMenu = getAsyncComponent(() => import('./src/BasicMenu.vue'));
+export { default as BasicMenu } from './src/BasicMenu.vue';
 
 export { default as Sidebar } from './src/BasicMenu.vue';
 export * from './src/types';