From 64fad01bf063dd9bf5213a5bb8e20a398e61df92 Mon Sep 17 00:00:00 2001 From: meifakun Date: Thu, 21 Feb 2019 19:05:50 +0800 Subject: [PATCH] add complexTable, i18n, charts, errorlog, share, svgicon, sticky, sizeselect and scrollplane --- .eslintignore | 6 + .eslintrc | 12 - .eslintrc.js | 23 + .gitignore | 2 + jest.config.js | 30 - mock/article.ts | 78 + mock/index.ts | 18 + mock/remoteSearch.ts | 24 + mock/transaction.ts | 25 + package.json | 32 +- src/App.vue | 2 +- src/api/article.ts | 36 + src/api/login.ts | 2 +- src/api/qiniu.ts | 7 + src/api/remoteSearch.ts | 8 + src/api/transaction.ts | 8 + src/components/BackToTop/index.vue | 115 ++ src/components/Charts/keyboard.vue | 146 ++ src/components/Charts/lineMarker.vue | 218 +++ src/components/Charts/mixChart.vue | 261 +++ src/components/Charts/mixins/resize.ts | 32 + src/components/DndList/index.vue | 157 ++ src/components/DragSelect/index.vue | 61 + src/components/Dropzone/index.vue | 297 ++++ src/components/ErrorLog/index.vue | 60 + src/components/GithubCorner/index.vue | 51 + src/components/HeaderSearch/index.vue | 187 +++ src/components/ImageCropper/index.vue | 1420 +++++++++++++++++ .../ImageCropper/utils/data2blob.js | 19 + .../ImageCropper/utils/effectRipple.js | 39 + src/components/ImageCropper/utils/language.js | 232 +++ src/components/ImageCropper/utils/mimes.js | 7 + src/components/JsonEditor/index.vue | 72 + src/components/Kanban/index.vue | 89 ++ src/components/LangSelect/index.vue | 32 + src/components/MDinput/index.vue | 354 ++++ .../MarkdownEditor/defaultOptions.js | 31 + src/components/MarkdownEditor/index.vue | 118 ++ src/components/Pagination/index.vue | 80 + src/components/PanThumb/index.vue | 140 ++ src/components/Screenfull/index.vue | 51 + src/components/ScrollPane/index.vue | 78 + src/components/Share/dropdownMenu.vue | 91 ++ src/components/SizeSelect/index.vue | 52 + src/components/Sticky/index.vue | 81 + src/components/SvgIcon/index.vue | 39 + src/components/TextHoverEffect/Mallki.vue | 113 ++ src/components/ThemePicker/index.vue | 153 ++ .../Tinymce/components/editorImage.vue | 103 ++ src/components/Tinymce/index.vue | 210 +++ src/components/Tinymce/plugins.js | 7 + src/components/Tinymce/toolbar.js | 6 + src/components/TreeTable/eval.ts | 31 + src/components/TreeTable/index.vue | 126 ++ src/components/TreeTable/readme.md | 89 ++ src/components/Upload/singleImage.vue | 132 ++ src/components/Upload/singleImage2.vue | 127 ++ src/components/Upload/singleImage3.vue | 154 ++ src/components/UploadExcel/index.vue | 136 ++ src/directive/clipboard/clipboard.js | 49 + src/directive/clipboard/index.js | 13 + src/directive/el-dragDialog/drag.js | 77 + src/directive/el-dragDialog/index.js | 13 + src/directive/permission/index.js | 13 + src/directive/permission/permission.js | 23 + src/directive/sticky.ts | 93 ++ src/directive/waves/index.ts | 16 + src/directive/waves/waves.css | 26 + src/directive/waves/waves.ts | 42 + src/filters/index.js | 42 + src/icons/components/example.ts | 1 + src/icons/components/eye-open.ts | 10 + src/icons/components/eye.ts | 10 + src/icons/components/form.ts | 1 + src/icons/components/link.ts | 1 + src/icons/components/nested.ts | 1 + src/icons/components/password.ts | 1 + src/icons/components/table.ts | 1 + src/icons/components/tree.ts | 1 + src/icons/components/user.ts | 1 + src/lang/en.ts | 160 ++ src/lang/es.ts | 160 ++ src/lang/index.ts | 39 + src/lang/zh.ts | 160 ++ src/main.ts | 11 +- src/router.ts | 12 + src/shims-vue.d.ts | 20 + src/store/modules/user.ts | 8 +- src/styles/btn.scss | 99 ++ src/styles/element-ui.scss | 85 + src/styles/index.scss | 98 ++ src/styles/mixin.scss | 1 + src/styles/sidebar.scss | 196 +++ src/styles/transition.scss | 6 +- src/utils/calendarType.ts | 12 + src/utils/index.ts | 311 ++++ src/utils/request.ts | 2 +- src/utils/scrollTo.ts | 50 + src/utils/validate.ts | 6 + src/vendor/Export2Excel.ts | 206 +++ src/vendor/Export2Zip.ts | 24 + src/views/form/index.vue | 1 - src/views/layout/components/Navbar.vue | 1 - src/views/layout/components/Sidebar/Item.vue | 22 + src/views/layout/mixin/ResizeHandler.ts | 3 +- src/views/login/index.vue | 55 +- src/views/table/complexTable.vue | 357 +++++ src/views/table/treeTable/customEval.ts | 50 + src/views/table/treeTable/customTreeTable.vue | 138 ++ src/views/table/treeTable/treeTable.vue | 134 ++ src/views/tree/index.vue | 1 - tsconfig.json | 7 +- tslint.json | 20 - vue.config.js | 18 +- 114 files changed, 9111 insertions(+), 107 deletions(-) create mode 100644 .eslintignore delete mode 100644 .eslintrc create mode 100644 .eslintrc.js delete mode 100644 jest.config.js create mode 100644 mock/article.ts create mode 100644 mock/remoteSearch.ts create mode 100644 mock/transaction.ts create mode 100644 src/api/article.ts create mode 100644 src/api/qiniu.ts create mode 100644 src/api/remoteSearch.ts create mode 100644 src/api/transaction.ts create mode 100644 src/components/BackToTop/index.vue create mode 100644 src/components/Charts/keyboard.vue create mode 100644 src/components/Charts/lineMarker.vue create mode 100644 src/components/Charts/mixChart.vue create mode 100644 src/components/Charts/mixins/resize.ts create mode 100644 src/components/DndList/index.vue create mode 100644 src/components/DragSelect/index.vue create mode 100644 src/components/Dropzone/index.vue create mode 100644 src/components/ErrorLog/index.vue create mode 100644 src/components/GithubCorner/index.vue create mode 100644 src/components/HeaderSearch/index.vue create mode 100644 src/components/ImageCropper/index.vue create mode 100644 src/components/ImageCropper/utils/data2blob.js create mode 100644 src/components/ImageCropper/utils/effectRipple.js create mode 100644 src/components/ImageCropper/utils/language.js create mode 100644 src/components/ImageCropper/utils/mimes.js create mode 100644 src/components/JsonEditor/index.vue create mode 100644 src/components/Kanban/index.vue create mode 100644 src/components/LangSelect/index.vue create mode 100644 src/components/MDinput/index.vue create mode 100644 src/components/MarkdownEditor/defaultOptions.js create mode 100644 src/components/MarkdownEditor/index.vue create mode 100644 src/components/Pagination/index.vue create mode 100644 src/components/PanThumb/index.vue create mode 100644 src/components/Screenfull/index.vue create mode 100644 src/components/ScrollPane/index.vue create mode 100644 src/components/Share/dropdownMenu.vue create mode 100644 src/components/SizeSelect/index.vue create mode 100644 src/components/Sticky/index.vue create mode 100644 src/components/SvgIcon/index.vue create mode 100644 src/components/TextHoverEffect/Mallki.vue create mode 100644 src/components/ThemePicker/index.vue create mode 100644 src/components/Tinymce/components/editorImage.vue create mode 100644 src/components/Tinymce/index.vue create mode 100644 src/components/Tinymce/plugins.js create mode 100644 src/components/Tinymce/toolbar.js create mode 100644 src/components/TreeTable/eval.ts create mode 100644 src/components/TreeTable/index.vue create mode 100644 src/components/TreeTable/readme.md create mode 100644 src/components/Upload/singleImage.vue create mode 100644 src/components/Upload/singleImage2.vue create mode 100644 src/components/Upload/singleImage3.vue create mode 100644 src/components/UploadExcel/index.vue create mode 100644 src/directive/clipboard/clipboard.js create mode 100644 src/directive/clipboard/index.js create mode 100644 src/directive/el-dragDialog/drag.js create mode 100644 src/directive/el-dragDialog/index.js create mode 100644 src/directive/permission/index.js create mode 100644 src/directive/permission/permission.js create mode 100644 src/directive/sticky.ts create mode 100644 src/directive/waves/index.ts create mode 100644 src/directive/waves/waves.css create mode 100644 src/directive/waves/waves.ts create mode 100644 src/filters/index.js create mode 100644 src/icons/components/eye-open.ts create mode 100644 src/icons/components/eye.ts create mode 100644 src/lang/en.ts create mode 100644 src/lang/es.ts create mode 100644 src/lang/index.ts create mode 100644 src/lang/zh.ts create mode 100644 src/styles/btn.scss create mode 100644 src/styles/element-ui.scss create mode 100644 src/styles/sidebar.scss create mode 100644 src/utils/calendarType.ts create mode 100644 src/utils/index.ts create mode 100644 src/utils/scrollTo.ts create mode 100644 src/vendor/Export2Excel.ts create mode 100644 src/vendor/Export2Zip.ts create mode 100644 src/views/layout/components/Sidebar/Item.vue create mode 100644 src/views/table/complexTable.vue create mode 100644 src/views/table/treeTable/customEval.ts create mode 100644 src/views/table/treeTable/customTreeTable.vue create mode 100644 src/views/table/treeTable/treeTable.vue delete mode 100644 tslint.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..03369cb25 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,6 @@ +build/*.js +config/*.js +src/assets +.eslintrc.js +vue.config.js +babel.config.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 33f62bb84..000000000 --- a/.eslintrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "eslint:recommended", - "parserOptions": { - "ecmaVersion": 6 - }, - "env": { - "node": true - }, - "rules": { - "comma-dangle": 2 - } -} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..e648ba06c --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,23 @@ +module.exports = { + root: true, + env: { + browser: true, + node: true, + es6: true + }, + parserOptions: { + parser: '@typescript-eslint/parser', + sourceType: 'module' + }, + 'extends': [ + 'eslint:recommended', + 'plugin:vue/strongly-recommended', + '@vue/standard', + '@vue/typescript' + ], + rules: { + 'comma-dangle': 2, + 'no-console': 'off', + 'no-debugger': 'off' + } +} diff --git a/.gitignore b/.gitignore index f18849874..71c9d9162 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ yarn-error.log* *.njsproj *.sln *.sw* +*.code-workspace +package-lock.json \ No newline at end of file diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 47a555eea..000000000 --- a/jest.config.js +++ /dev/null @@ -1,30 +0,0 @@ -module.exports = { - moduleFileExtensions: [ - 'js', - 'jsx', - 'json', - 'vue', - 'ts', - 'tsx' - ], - transform: { - '^.+\\.vue$': 'vue-jest', - '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', - '^.+\\.tsx?$': 'ts-jest' - }, - moduleNameMapper: { - '^@/(.*)$': '/src/$1' - }, - snapshotSerializers: [ - 'jest-serializer-vue' - ], - testMatch: [ - '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' - ], - testURL: 'http://localhost/', - globals: { - 'ts-jest': { - babelConfig: true - } - } -} diff --git a/mock/article.ts b/mock/article.ts new file mode 100644 index 000000000..2bf62b421 --- /dev/null +++ b/mock/article.ts @@ -0,0 +1,78 @@ +import Mock from 'mockjs' +import { param2Obj } from '@/utils' + +const List: any[] = [] +const count = 100 + +const baseContent = '

我是测试数据我是测试数据

' +const imageURI = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3' + +for (let i = 0; i < count; i++) { + List.push(Mock.mock({ + id: '@increment', + timestamp: +Mock.Random.date('T'), + author: '@first', + reviewer: '@first', + title: '@title(5, 10)', + content_short: '我是测试数据', + content: baseContent, + forecast: '@float(0, 100, 2, 2)', + importance: '@integer(1, 3)', + 'type|1': ['CN', 'US', 'JP', 'EU'], + 'status|1': ['published', 'draft', 'deleted'], + display_time: '@datetime', + comment_disabled: true, + pageviews: '@integer(300, 5000)', + image_uri: imageURI, + platforms: ['a-platform'] + })) +} + +export default { + getList: (config: {url: string}) => { + const { importance, type, title, page = 1, limit = 20, sort } = param2Obj(config.url) as any + + let mockList = List.filter(item => { + if (importance && item.importance !== +importance) return false + if (type && item.type !== type) return false + if (title && item.title.indexOf(title) < 0) return false + return true + }) + + if (sort === '-id') { + mockList = mockList.reverse() + } + + const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1)) + + return { code: 20000, + data: { + total: mockList.length, + items: pageList + } + } + }, + getPv: () => ({ code: 20000, + data: { + pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] + } + }), + getArticle: (config: {url: string}) => { + const { id } = param2Obj(config.url) as any + for (const article of List) { + if (article.id === +id) { + return { code: 20000, data: article } + } + } + }, + createArticle: () => ({ code: 20000, + data: { + data: 'success' + } + }), + updateArticle: () => ({ code: 20000, + data: { + data: 'success' + } + }) +} diff --git a/mock/index.ts b/mock/index.ts index bac97a812..4c574beb2 100644 --- a/mock/index.ts +++ b/mock/index.ts @@ -1,6 +1,9 @@ import Mock from 'mockjs'; import userAPI from './user'; import tableAPI from './table'; +import articleAPI from './article' +import remoteSearchAPI from './remoteSearch'; +import transactionAPI from './transaction'; // User Mock.mock(/\/user\/login/, 'post', userAPI.login); @@ -10,4 +13,19 @@ Mock.mock(/\/user\/logout/, 'post', userAPI.logout); // Table Mock.mock(/\/table\/list/, 'get', tableAPI.list); + + +// 文章相关 +Mock.mock(/\/article\/list/, 'get', articleAPI.getList); +Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle); +Mock.mock(/\/article\/pv/, 'get', articleAPI.getPv); +Mock.mock(/\/article\/create/, 'post', articleAPI.createArticle); +Mock.mock(/\/article\/update/, 'post', articleAPI.updateArticle); + +// 搜索相关 +Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser); + +// 账单相关 +Mock.mock(/\/transaction\/list/, 'get', transactionAPI.getList); + export default Mock; diff --git a/mock/remoteSearch.ts b/mock/remoteSearch.ts new file mode 100644 index 000000000..00d2b8c65 --- /dev/null +++ b/mock/remoteSearch.ts @@ -0,0 +1,24 @@ +import Mock from 'mockjs' +import { param2Obj } from '@/utils' + +const NameList: any[] = [] +const count = 100 + +for (let i = 0; i < count; i++) { + NameList.push(Mock.mock({ + name: '@first' + })) +} +NameList.push({ name: 'mockPan' }) + +export default { + searchUser: (config: {url: string}) => { + const { name } = param2Obj(config.url) as any + const mockNameList = NameList.filter(item => { + const lowerCaseName = item.name.toLowerCase() + if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false + return true + }) + return { items: mockNameList } + } +} diff --git a/mock/transaction.ts b/mock/transaction.ts new file mode 100644 index 000000000..9dd31d531 --- /dev/null +++ b/mock/transaction.ts @@ -0,0 +1,25 @@ +import Mock from 'mockjs' + +const List: any[] = []; +const count = 20; + +for (let i = 0; i < count; i++) { + List.push(Mock.mock({ + order_no: '@guid()', + timestamp: +Mock.Random.date('T'), + username: '@name()', + price: '@float(1000, 15000, 0, 2)', + 'status|1': ['success', 'pending'] + })) +} + +export default { + getList: () => { + return { code: 20000, + data: { + total: List.length, + items: List + }, + }; + }, +} diff --git a/package.json b/package.json index 1d4b5154f..02c2c4033 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "test": "yarn test:unit && yarn test:e2e", + "test": "npm run test:unit && npm run test:e2e", "lint": "vue-cli-service lint", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" @@ -25,32 +25,48 @@ "register-service-worker": "^1.6.2", "vue": "^2.6.7", "vue-class-component": "^7.0.1", + "vue-count-to": "1.0.13", + "vue-i18n": "8.8.2", "vue-property-decorator": "^7.3.0", + "vue-mixin-decorator": "^1.1.0", "vue-router": "^3.0.2", + "vue-splitpane": "1.0.2", "vue-svgicon": "^3.2.2", + "vuedraggable": "^2.16.0", "vuex": "^3.1.0", "vuex-class": "^0.3.1", "vuex-module-decorators": "^0.9.8", - "webpack": "^4.29.6" + "xlsx": "^0.14.1", + "echarts": "^4.1.0" }, "devDependencies": { - "@types/jest": "^24.0.9", + "@types/chai": "^4.1.0", + "@types/mocha": "^5.2.4", + "@types/node": "^11.9.4", + "@types/webpack-env": "^1.13.6", + "@types/echarts": "^4.1.0", + "@typescript-eslint/parser": "^1.4.0", "@vue/cli-plugin-babel": "^3.4.1", "@vue/cli-plugin-e2e-cypress": "^3.4.1", + "@vue/cli-plugin-eslint": "^3.4.1", "@vue/cli-plugin-pwa": "^3.4.1", "@vue/cli-plugin-typescript": "^3.4.1", - "@vue/cli-plugin-unit-jest": "^3.4.1", + "@vue/cli-plugin-unit-mocha": "^3.4.1", "@vue/cli-service": "^3.4.1", + "@vue/eslint-config-standard": "^4.0.0", + "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", + "babel-eslint": "^10.0.1", + "chai": "^4.1.2", "babel-core": "7.0.0-bridge.0", "eslint": "^5.14.1", + "eslint-plugin-vue": "^5.0.0", "fibers": "^3.1.1", - "jest": "^24.1.0", - "sass": "^1.17.2", + "node-sass": "^4.11.0", "sass-loader": "^7.1.0", - "ts-jest": "^24.0.0", "typescript": "3.3.3333", "vue-cli-plugin-element": "^1.0.1", - "vue-template-compiler": "^2.6.7" + "vue-template-compiler": "^2.6.7", + "webpack": "^4.29.6" } } diff --git a/src/App.vue b/src/App.vue index 5685bad8f..1850a4672 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@ diff --git a/src/api/article.ts b/src/api/article.ts new file mode 100644 index 000000000..8b55f99c2 --- /dev/null +++ b/src/api/article.ts @@ -0,0 +1,36 @@ +import request from '@/utils/request'; + +export const fetchList = (query: any): any => + request({ + url: '/article/list', + method: 'get', + params: query, + }); + +export const fetchArticle = (id: string): any => + request({ + url: '/article/detail', + method: 'get', + params: { id }, + }); + +export const fetchPv = (pv: any): any => + request({ + url: '/article/pv', + method: 'get', + params: { pv }, + }); + +export const createArticle = (data: any): any => + request({ + url: '/article/create', + method: 'post', + data, + }); + +export const updateArticle = (data: any): any => + request({ + url: '/article/update', + method: 'post', + data, + }); \ No newline at end of file diff --git a/src/api/login.ts b/src/api/login.ts index 40924166b..e4c1d68ac 100644 --- a/src/api/login.ts +++ b/src/api/login.ts @@ -10,7 +10,7 @@ export const login = (username: string, password: string) => }, }); -export const getInfo = (token: string) => +export const getUserInfo = (token: string) => request({ url: '/user/info', method: 'get', diff --git a/src/api/qiniu.ts b/src/api/qiniu.ts new file mode 100644 index 000000000..392c66f33 --- /dev/null +++ b/src/api/qiniu.ts @@ -0,0 +1,7 @@ +import request from '@/utils/request'; + +export const getToken = (): any => + request({ + url: '/qiniu/upload/token', // 假地址 自行替换 + method: 'get' + }); diff --git a/src/api/remoteSearch.ts b/src/api/remoteSearch.ts new file mode 100644 index 000000000..114755e71 --- /dev/null +++ b/src/api/remoteSearch.ts @@ -0,0 +1,8 @@ +import request from '@/utils/request' + +export const userSearch = (name: string): any => + request({ + url: '/search/user', + method: 'get', + params: { name } + }); diff --git a/src/api/transaction.ts b/src/api/transaction.ts new file mode 100644 index 000000000..267892038 --- /dev/null +++ b/src/api/transaction.ts @@ -0,0 +1,8 @@ +import request from '@/utils/request'; + +export const fetchList = (query: any): any => + request({ + url: '/transaction/list', + method: 'get', + params: query + }); diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue new file mode 100644 index 000000000..727958e0f --- /dev/null +++ b/src/components/BackToTop/index.vue @@ -0,0 +1,115 @@ + + + + + + diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue new file mode 100644 index 000000000..7c12cc1ce --- /dev/null +++ b/src/components/Charts/keyboard.vue @@ -0,0 +1,146 @@ + + + diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue new file mode 100644 index 000000000..b4fd7e579 --- /dev/null +++ b/src/components/Charts/lineMarker.vue @@ -0,0 +1,218 @@ + + + diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue new file mode 100644 index 000000000..8e50518dd --- /dev/null +++ b/src/components/Charts/mixChart.vue @@ -0,0 +1,261 @@ + + + diff --git a/src/components/Charts/mixins/resize.ts b/src/components/Charts/mixins/resize.ts new file mode 100644 index 000000000..572f51f4d --- /dev/null +++ b/src/components/Charts/mixins/resize.ts @@ -0,0 +1,32 @@ +import { debounce } from '@/utils' +import Vue from 'vue' +import { Component, Mixin, Mixins } from 'vue-mixin-decorator' + +@Mixin +export default class Resize extends Vue { + private sidebarElm: any = null + + mounted() { + (this as any).__resizeHandler = debounce(() => { + if ((this as any).chart) { + (this as any).chart.resize() + } + }, 100) + window.addEventListener('resize', (this as any).__resizeHandler) + + this.sidebarElm = document.getElementsByClassName('sidebar-container')[0] + this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) + } + + beforeDestroy() { + window.removeEventListener('resize', (this as any).__resizeHandler) + + this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + } + + sidebarResizeHandler(e: TransitionEvent) { + if (e.propertyName === 'width') { + (this as any).__resizeHandler() + } + } +} diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue new file mode 100644 index 000000000..7587daa77 --- /dev/null +++ b/src/components/DndList/index.vue @@ -0,0 +1,157 @@ + + + + + diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue new file mode 100644 index 000000000..513be0068 --- /dev/null +++ b/src/components/DragSelect/index.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/components/Dropzone/index.vue b/src/components/Dropzone/index.vue new file mode 100644 index 000000000..15d811d93 --- /dev/null +++ b/src/components/Dropzone/index.vue @@ -0,0 +1,297 @@ + + + + + diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue new file mode 100644 index 000000000..1834b578a --- /dev/null +++ b/src/components/ErrorLog/index.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue new file mode 100644 index 000000000..b5da8874e --- /dev/null +++ b/src/components/GithubCorner/index.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue new file mode 100644 index 000000000..ab0d556a7 --- /dev/null +++ b/src/components/HeaderSearch/index.vue @@ -0,0 +1,187 @@ + + + + + diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue new file mode 100644 index 000000000..04b1ede91 --- /dev/null +++ b/src/components/ImageCropper/index.vue @@ -0,0 +1,1420 @@ + + + + + + + diff --git a/src/components/ImageCropper/utils/data2blob.js b/src/components/ImageCropper/utils/data2blob.js new file mode 100644 index 000000000..9c47f8af5 --- /dev/null +++ b/src/components/ImageCropper/utils/data2blob.js @@ -0,0 +1,19 @@ +/** + * database64文件格式转换为2进制 + * + * @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了 + * @param {[String]} mime [description] + * @return {[blob]} [description] + */ +export default function(data, mime) { + data = data.split(',')[1] + data = window.atob(data) + var ia = new Uint8Array(data.length) + for (var i = 0; i < data.length; i++) { + ia[i] = data.charCodeAt(i) + } + // canvas.toDataURL 返回的默认格式就是 image/png + return new Blob([ia], { + type: mime + }) +} diff --git a/src/components/ImageCropper/utils/effectRipple.js b/src/components/ImageCropper/utils/effectRipple.js new file mode 100644 index 000000000..46a01640a --- /dev/null +++ b/src/components/ImageCropper/utils/effectRipple.js @@ -0,0 +1,39 @@ +/** + * 点击波纹效果 + * + * @param {[event]} e [description] + * @param {[Object]} arg_opts [description] + * @return {[bollean]} [description] + */ +export default function(e, arg_opts) { + var opts = Object.assign({ + ele: e.target, // 波纹作用元素 + type: 'hit', // hit点击位置扩散center中心点扩展 + bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 + }, arg_opts) + var target = opts.ele + if (target) { + var rect = target.getBoundingClientRect() + var ripple = target.querySelector('.e-ripple') + if (!ripple) { + ripple = document.createElement('span') + ripple.className = 'e-ripple' + ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' + target.appendChild(ripple) + } else { + ripple.className = 'e-ripple' + } + switch (opts.type) { + case 'center': + ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px' + ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px' + break + default: + ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px' + ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px' + } + ripple.style.backgroundColor = opts.bgc + ripple.className = 'e-ripple z-active' + return false + } +} diff --git a/src/components/ImageCropper/utils/language.js b/src/components/ImageCropper/utils/language.js new file mode 100644 index 000000000..727872d96 --- /dev/null +++ b/src/components/ImageCropper/utils/language.js @@ -0,0 +1,232 @@ +export default { + zh: { + hint: '点击，或拖动图片至此处', + loading: '正在上传……', + noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！', + success: '上传成功', + fail: '图片上传失败', + preview: '头像预览', + btn: { + off: '取消', + close: '关闭', + back: '上一步', + save: '保存' + }, + error: { + onlyImg: '仅限图片格式', + outOfSize: '单文件大小不能超过 ', + lowestPx: '图片最低像素为（宽*高）：' + } + }, + 'zh-tw': { + hint: '點擊，或拖動圖片至此處', + loading: '正在上傳……', + noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！', + success: '上傳成功', + fail: '圖片上傳失敗', + preview: '頭像預覽', + btn: { + off: '取消', + close: '關閉', + back: '上一步', + save: '保存' + }, + error: { + onlyImg: '僅限圖片格式', + outOfSize: '單文件大小不能超過 ', + lowestPx: '圖片最低像素為（寬*高）：' + } + }, + en: { + hint: 'Click or drag the file here to upload', + loading: 'Uploading…', + noSupported: 'Browser is not supported, please use IE10+ or other browsers', + success: 'Upload success', + fail: 'Upload failed', + preview: 'Preview', + btn: { + off: 'Cancel', + close: 'Close', + back: 'Back', + save: 'Save' + }, + error: { + onlyImg: 'Image only', + outOfSize: 'Image exceeds size limit: ', + lowestPx: 'Image\'s size is too low. Expected at least: ' + } + }, + ro: { + hint: 'Atinge sau trage fișierul aici', + loading: 'Se încarcă', + noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.', + success: 'S-a încărcat cu succes', + fail: 'A apărut o problemă la încărcare', + preview: 'Previzualizează', + + btn: { + off: 'Anulează', + close: 'Închide', + back: 'Înapoi', + save: 'Salvează' + }, + + error: { + onlyImg: 'Doar imagini', + outOfSize: 'Imaginea depășește limita de: ', + loewstPx: 'Imaginea este prea mică; Minim: ' + } + }, + ru: { + hint: 'Нажмите, или перетащите файл в это окно', + loading: 'Загружаю……', + noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры', + success: 'Загрузка выполнена успешно', + fail: 'Ошибка загрузки', + preview: 'Предпросмотр', + btn: { + off: 'Отменить', + close: 'Закрыть', + back: 'Назад', + save: 'Сохранить' + }, + error: { + onlyImg: 'Только изображения', + outOfSize: 'Изображение превышает предельный размер: ', + lowestPx: 'Минимальный размер изображения: ' + } + }, + 'pt-br': { + hint: 'Clique ou arraste o arquivo aqui para carregar', + loading: 'Carregando…', + noSupported: 'Browser não suportado, use o IE10+ ou outro browser', + success: 'Sucesso ao carregar imagem', + fail: 'Falha ao carregar imagem', + preview: 'Pré-visualizar', + btn: { + off: 'Cancelar', + close: 'Fechar', + back: 'Voltar', + save: 'Salvar' + }, + error: { + onlyImg: 'Apenas imagens', + outOfSize: 'A imagem excede o limite de tamanho: ', + lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: ' + } + }, + fr: { + hint: 'Cliquez ou glissez le fichier ici.', + loading: 'Téléchargement…', + noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.', + success: 'Téléchargement réussit', + fail: 'Téléchargement echoué', + preview: 'Aperçu', + btn: { + off: 'Annuler', + close: 'Fermer', + back: 'Retour', + save: 'Enregistrer' + }, + error: { + onlyImg: 'Image uniquement', + outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ', + lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: ' + } + }, + nl: { + hint: 'Klik hier of sleep een afbeelding in dit vlak', + loading: 'Uploaden…', + noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.', + success: 'Upload succesvol', + fail: 'Upload mislukt', + preview: 'Voorbeeld', + btn: { + off: 'Annuleren', + close: 'Sluiten', + back: 'Terug', + save: 'Opslaan' + }, + error: { + onlyImg: 'Alleen afbeeldingen', + outOfSize: 'De afbeelding is groter dan: ', + lowestPx: 'De afbeelding is te klein! Minimale afmetingen: ' + } + }, + tr: { + hint: 'Tıkla veya yüklemek istediğini buraya sürükle', + loading: 'Yükleniyor…', + noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın', + success: 'Yükleme başarılı', + fail: 'Yüklemede hata oluştu', + preview: 'Önizle', + btn: { + off: 'İptal', + close: 'Kapat', + back: 'Geri', + save: 'Kaydet' + }, + error: { + onlyImg: 'Sadece resim', + outOfSize: 'Resim yükleme limitini aşıyor: ', + lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: ' + } + }, + 'es-MX': { + hint: 'Selecciona o arrastra una imagen', + loading: 'Subiendo...', + noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes', + success: 'Subido exitosamente', + fail: 'Sucedió un error', + preview: 'Vista previa', + btn: { + off: 'Cancelar', + close: 'Cerrar', + back: 'Atras', + save: 'Guardar' + }, + error: { + onlyImg: 'Unicamente imagenes', + outOfSize: 'La imagen excede el tamaño maximo:', + lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:' + } + }, + de: { + hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen', + loading: 'Hochladen…', + noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser', + success: 'Upload erfolgreich', + fail: 'Upload fehlgeschlagen', + preview: 'Vorschau', + btn: { + off: 'Abbrechen', + close: 'Schließen', + back: 'Zurück', + save: 'Speichern' + }, + error: { + onlyImg: 'Nur Bilder', + outOfSize: 'Das Bild ist zu groß: ', + lowestPx: 'Das Bild ist zu klein. Mindestens: ' + } + }, + ja: { + hint: 'クリック・ドラッグしてファイルをアップロード', + loading: 'アップロード中...', + noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。', + success: 'アップロード成功', + fail: 'アップロード失敗', + preview: 'プレビュー', + btn: { + off: 'キャンセル', + close: '閉じる', + back: '戻る', + save: '保存' + }, + error: { + onlyImg: '画像のみ', + outOfSize: '画像サイズが上限を超えています。上限: ', + lowestPx: '画像が小さすぎます。最小サイズ: ' + } + } +} diff --git a/src/components/ImageCropper/utils/mimes.js b/src/components/ImageCropper/utils/mimes.js new file mode 100644 index 000000000..e20c085ca --- /dev/null +++ b/src/components/ImageCropper/utils/mimes.js @@ -0,0 +1,7 @@ +export default { + 'jpg': 'image/jpeg', + 'png': 'image/png', + 'gif': 'image/gif', + 'svg': 'image/svg+xml', + 'psd': 'image/photoshop' +} diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue new file mode 100644 index 000000000..d68b8c05b --- /dev/null +++ b/src/components/JsonEditor/index.vue @@ -0,0 +1,72 @@ +