From 3d9622978dc234ef12dbce63e18caf3440563aa0 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sun, 17 Oct 2021 17:01:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 17 +- package.json | 6 +- src/App.vue | 5 +- src/assets/img/avatar.png | Bin 0 -> 4097 bytes src/components/CountTo/index.vue | 4 +- src/components/Dialog/index.vue | 193 +++++++++++ src/components/Editor/index.vue | 215 ++++++++++++ src/components/Editor/types.ts | 13 + src/components/Qrcode/index.vue | 267 +++++++++++++++ src/components/Qrcode/types.ts | 9 + src/components/Search/index.vue | 337 +++++++++++++++++++ src/components/index.ts | 4 + src/directives/clipboard/index.ts | 71 ++++ src/directives/index.ts | 7 + src/layout/components/UserInfo/index.vue | 2 +- src/main.ts | 8 + src/plugins/element-plus/element.config.ts | 18 + src/plugins/element-plus/index.ts | 23 ++ src/plugins/element-plus/types.ts | 7 + src/router/index.ts | 122 +++---- src/views/components-demo/count-to/index.vue | 111 ++++++ src/views/components-demo/dialog/index.vue | 27 ++ src/views/components-demo/editor/index.vue | 45 +++ src/views/components-demo/message/index.vue | 24 ++ src/views/components-demo/qrcode/index.vue | 89 +++++ src/views/components-demo/search/data.ts | 149 ++++++++ src/views/components-demo/search/index.vue | 95 ++++++ 27 files changed, 1790 insertions(+), 78 deletions(-) create mode 100644 src/assets/img/avatar.png create mode 100644 src/components/Dialog/index.vue create mode 100644 src/components/Editor/index.vue create mode 100644 src/components/Editor/types.ts create mode 100644 src/components/Qrcode/index.vue create mode 100644 src/components/Qrcode/types.ts create mode 100644 src/components/Search/index.vue create mode 100644 src/directives/clipboard/index.ts create mode 100644 src/directives/index.ts create mode 100644 src/plugins/element-plus/element.config.ts create mode 100644 src/plugins/element-plus/index.ts create mode 100644 src/plugins/element-plus/types.ts create mode 100644 src/views/components-demo/count-to/index.vue create mode 100644 src/views/components-demo/dialog/index.vue create mode 100644 src/views/components-demo/editor/index.vue create mode 100644 src/views/components-demo/message/index.vue create mode 100644 src/views/components-demo/qrcode/index.vue create mode 100644 src/views/components-demo/search/data.ts create mode 100644 src/views/components-demo/search/index.vue diff --git a/components.d.ts b/components.d.ts index 2b4a381..cb95b2d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -6,12 +6,17 @@ declare module 'vue' { export interface GlobalComponents { 404: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Error/404.vue')['default'] CountTo: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/CountTo/index.vue')['default'] + Dialog: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Dialog/index.vue')['default'] Echart: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Echart/index.vue')['default'] + Editor: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Editor/index.vue')['default'] ElAlert: typeof import('element-plus/es')['ElAlert'] ElBacktop: typeof import('element-plus/es')['ElBacktop'] ElButton: typeof import('element-plus/es')['ElButton'] ElCard: typeof import('element-plus/es')['ElCard'] ElCol: typeof import('element-plus/es')['ElCol'] + ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElDialog: typeof import('element-plus/es')['ElDialog'] ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] @@ -19,21 +24,31 @@ declare module 'vue' { ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] + ElOption: typeof import('element-plus/es')['ElOption'] + ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] + ElTimePicker: typeof import('element-plus/es')['ElTimePicker'] + ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] HelloWorld: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/HelloWorld.vue')['default'] ParentView: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/ParentView/index.vue')['default'] Preview: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Preview/index.vue')['default'] + Qrcode: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Qrcode/index.vue')['default'] Redirect: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Redirect/index.vue')['default'] + Search: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Search/index.vue')['default'] SvgIcon: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/SvgIcon/index.vue')['default'] } } -export {} +export { } diff --git a/package.json b/package.json index 6369855..933a1f4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-element-plus-admin", "version": "1.0.0", - "description": "一套基于vue3、element-plus、typesScript、vite的后台集成方案", + "description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案", "author": "Archer <502431556@qq.com>", "private": false, "scripts": { @@ -26,9 +26,11 @@ "@element-plus/icons": "^0.0.11", "@vueuse/core": "^6.5.3", "axios": "^0.22.0", + "clipboard": "^2.0.8", "echarts": "^5.2.1", "echarts-wordcloud": "^2.0.0", "element-plus": "1.1.0-beta.20", + "highlight.js": "^11.2.0", "intro.js": "^4.2.2", "lodash-es": "^4.17.21", "mockjs": "^1.1.0", @@ -36,9 +38,11 @@ "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.0", "pinia": "^2.0.0-rc.13", + "qrcode": "^1.4.4", "qs": "^6.10.1", "vue": "^3.2.16", "vue-router": "^4.0.11", + "wangeditor": "^4.7.9", "web-storage-cache": "^1.1.1" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index f1d3a5c..5af12d1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,14 @@ diff --git a/src/assets/img/avatar.png b/src/assets/img/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..e16488e4534d25626ac002e04ce9c64cd834ade2 GIT binary patch literal 4097 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 + + + + + +
+ +
+ + + + + + + + + diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue new file mode 100644 index 0000000..6648f19 --- /dev/null +++ b/src/components/Editor/index.vue @@ -0,0 +1,215 @@ + + + diff --git a/src/components/Editor/types.ts b/src/components/Editor/types.ts new file mode 100644 index 0000000..260669d --- /dev/null +++ b/src/components/Editor/types.ts @@ -0,0 +1,13 @@ +export interface EditorConfig { + height?: number // 富文本高度 + zIndex?: number // 层级 + placeholder?: string // 提示文字 + focus?: boolean // 是否聚焦 + onchangeTimeout?: number // 几秒监听一次变化 + customAlert?: (s: string, t: string) => {} // 自定义提示 + menus?: string[] // 按钮菜单 + colors?: string[] // 颜色 + fontNames?: string[] // 字体 + lineHeights?: string[] // 行间距 + showFullScreen?: boolean // 是否全屏 +} diff --git a/src/components/Qrcode/index.vue b/src/components/Qrcode/index.vue new file mode 100644 index 0000000..09f6a6a --- /dev/null +++ b/src/components/Qrcode/index.vue @@ -0,0 +1,267 @@ + + + + + diff --git a/src/components/Qrcode/types.ts b/src/components/Qrcode/types.ts new file mode 100644 index 0000000..86edb6f --- /dev/null +++ b/src/components/Qrcode/types.ts @@ -0,0 +1,9 @@ +export interface LogoTypes { + src?: string + logoSize?: number + bgColor?: string + borderSize?: number + crossOrigin?: string + borderRadius?: number + logoRadius?: number +} diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue new file mode 100644 index 0000000..1a27387 --- /dev/null +++ b/src/components/Search/index.vue @@ -0,0 +1,337 @@ + + + + + diff --git a/src/components/index.ts b/src/components/index.ts index bf18304..c99ec5a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,10 @@ import type { App } from 'vue' import SvgIcon from './SvgIcon/index.vue' // svg组件 +import ComSearch from './Search/index.vue' // search组件 +import ComDialog from './Dialog/index.vue' // dialog组件 export function setupGlobCom(app: App): void { app.component('SvgIcon', SvgIcon) + app.component('ComSearch', ComSearch) + app.component('ComDialog', ComDialog) } diff --git a/src/directives/clipboard/index.ts b/src/directives/clipboard/index.ts new file mode 100644 index 0000000..c502937 --- /dev/null +++ b/src/directives/clipboard/index.ts @@ -0,0 +1,71 @@ +import Clipboard from 'clipboard' +import { Directive, DirectiveBinding } from 'vue' +import { Message } from '_c/Message' + +if (!Clipboard) { + throw new Error('you should npm install `clipboard` --save at first ') +} + +export const clipboard: Directive = { + beforeMount(el: HTMLElement, binding: DirectiveBinding) { + createdClipboard(el, binding.arg, binding.value) + }, + updated(el: HTMLElement | any, binding: DirectiveBinding) { + if (binding.arg === 'success') { + el._v_clipboard_success = binding.value + } else if (binding.arg === 'error') { + el._v_clipboard_error = binding.value + } else { + el._v_clipboard.text = function () { + return binding.value + } + el._v_clipboard.action = function () { + return 'copy' + } + } + }, + unmounted(el: HTMLElement | any, binding: DirectiveBinding) { + if (binding.arg === 'success') { + delete el._v_clipboard_success + } else if (binding.arg === 'error') { + delete el._v_clipboard_error + } else { + el._v_clipboard.destroy() + delete el._v_clipboard + } + } +} + +function createdClipboard(el: HTMLElement | any, arg: string | undefined, value: any) { + if (arg === 'success') { + el._v_clipboard_success = value + } else if (arg === 'error') { + el._v_clipboard_error = value + } else { + const clipboard = new Clipboard(el, { + text() { + return value + }, + action() { + return 'copy' + } + }) + clipboard.on('success', (e) => { + const callback = el._v_clipboard_success + if (callback) { + callback(e) + } else { + Message.success('复制成功') + } + }) + clipboard.on('error', (e) => { + const callback = el._v_clipboard_error + if (callback) { + callback(e) + } else { + Message.success('复制失败') + } + }) + el._v_clipboard = clipboard + } +} diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 0000000..9fb6f77 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1,7 @@ +import type { App } from 'vue' + +import { clipboard } from './clipboard' + +export function setupDirectives(app: App) { + app.directive('clipboard', clipboard) +} diff --git a/src/layout/components/UserInfo/index.vue b/src/layout/components/UserInfo/index.vue index 2660983..3513a4b 100644 --- a/src/layout/components/UserInfo/index.vue +++ b/src/layout/components/UserInfo/index.vue @@ -27,7 +27,7 @@ const tagsViewStore = useTagsViewStore() import { useCache } from '@/hooks/web/useCache' const { wsCache } = useCache() // @ts-ignore -import avatarImg from '@/assets/img/avatar.gif' +import avatarImg from '@/assets/img/avatar.png' const { replace, push } = useRouter() async function loginOut(): Promise { diff --git a/src/main.ts b/src/main.ts index 0ed35bb..33f09e3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,8 +6,12 @@ import router, { setupRouter } from './router' // 路由 import { setupStore } from './store' // 状态管理 +import { setupDirectives } from '@/directives' // 自定义指令 + import { setupGlobCom } from './components' +import { setupElement } from '@/plugins/element-plus' + import '@/styles/index.less' import 'virtual:svg-icons-register' @@ -23,6 +27,10 @@ setupStore(app) // 引入状态管理 setupRouter(app) // 引入路由 +setupDirectives(app) + +setupElement(app) + setupGlobCom(app) // 引入全局组件 router.isReady().then(() => { diff --git a/src/plugins/element-plus/element.config.ts b/src/plugins/element-plus/element.config.ts new file mode 100644 index 0000000..595193c --- /dev/null +++ b/src/plugins/element-plus/element.config.ts @@ -0,0 +1,18 @@ +/** + * 为了保持多页element组件的样式统一，提供全局配置的方法。 + */ +import { ConfigElement } from './types' + +const elementConfig: ConfigElement = { + /** + * 尺寸 + */ + size: 'medium', + + /** + * 层级 + */ + zIndex: 2000 +} + +export default elementConfig diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts new file mode 100644 index 0000000..26c5e48 --- /dev/null +++ b/src/plugins/element-plus/index.ts @@ -0,0 +1,23 @@ +// 按需加载element +// 目前需要手动引入loading等插件，无法自动导入 +// size和zIndex也需要这样设置，暂时还无法在全局配置组件中去设置 +// 需要看看后面官方是不是能优化这点 +import type { App } from 'vue' + +import ElementConfig from './element.config' + +// element全局配置项 +const { size, zIndex } = ElementConfig + +import { ElLoading } from 'element-plus' + +const plugins = [ElLoading] + +export function setupElement(app: App): void { + plugins.forEach((plugin: any) => { + app.use(plugin) + }) + + // 全局配置 + app.config.globalProperties.$ELEMENT = { size: size, zIndex: zIndex } +} diff --git a/src/plugins/element-plus/types.ts b/src/plugins/element-plus/types.ts new file mode 100644 index 0000000..807725a --- /dev/null +++ b/src/plugins/element-plus/types.ts @@ -0,0 +1,7 @@ +/** + * element配置 + */ +export interface ConfigElement { + zIndex: number + size: 'medium' | 'small' | 'mini' +} diff --git a/src/router/index.ts b/src/router/index.ts index 377fd79..ed9dcbe 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -144,71 +144,47 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ meta: { title: '图片预览' } - } - // { - // path: 'button', - // component: () => import('_v/components-demo/button/index.vue'), - // name: 'ButtonDemo', - // meta: { - // title: '按钮' - // } - // }, - // { - // path: 'message', - // component: () => import('_v/components-demo/message/index.vue'), - // name: 'MessageDemo', - // meta: { - // title: '消息提示' - // } - // }, - // { - // path: 'count-to', - // component: () => import('_v/components-demo/count-to/index.vue'), - // name: 'CountToDemo', - // meta: { - // title: '数字动画' - // } - // }, - // { - // path: 'search', - // component: () => import('_v/components-demo/search/index.vue'), - // name: 'SearchDemo', - // meta: { - // title: '查询' - // } - // }, - // { - // path: 'editor', - // component: () => import('_v/components-demo/editor/index.vue'), - // name: 'EditorDemo', - // meta: { - // title: '富文本编辑器' - // } - // }, - // { - // path: 'markdown', - // component: () => import('_v/components-demo/markdown/index.vue'), - // name: 'MarkdownDemo', - // meta: { - // title: 'markdown编辑器' - // } - // }, - // { - // path: 'dialog', - // component: () => import('_v/components-demo/dialog/index.vue'), - // name: 'DialogDemo', - // meta: { - // title: '弹窗' - // } - // }, - // { - // path: 'more', - // component: () => import('_v/components-demo/more/index.vue'), - // name: 'MoreDemo', - // meta: { - // title: '显示更多' - // } - // }, + }, + { + path: 'message', + component: () => import('_v/components-demo/message/index.vue'), + name: 'MessageDemo', + meta: { + title: '消息提示' + } + }, + { + path: 'count-to', + component: () => import('_v/components-demo/count-to/index.vue'), + name: 'CountToDemo', + meta: { + title: '数字动画' + } + }, + { + path: 'search', + component: () => import('_v/components-demo/search/index.vue'), + name: 'SearchDemo', + meta: { + title: '查询' + } + }, + { + path: 'editor', + component: () => import('_v/components-demo/editor/index.vue'), + name: 'EditorDemo', + meta: { + title: '富文本编辑器' + } + }, + { + path: 'dialog', + component: () => import('_v/components-demo/dialog/index.vue'), + name: 'DialogDemo', + meta: { + title: '弹窗' + } + }, // { // path: 'detail', // component: () => import('_v/components-demo/detail/index.vue'), @@ -217,14 +193,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ // title: '详情组件' // } // }, - // { - // path: 'qrcode', - // component: () => import('_v/components-demo/qrcode/index.vue'), - // name: 'QrcodeDemo', - // meta: { - // title: '二维码组件' - // } - // }, + { + path: 'qrcode', + component: () => import('_v/components-demo/qrcode/index.vue'), + name: 'QrcodeDemo', + meta: { + title: '二维码' + } + } // { // path: 'avatars', // component: () => import('_v/components-demo/avatars/index.vue'), diff --git a/src/views/components-demo/count-to/index.vue b/src/views/components-demo/count-to/index.vue new file mode 100644 index 0000000..d2be3ec --- /dev/null +++ b/src/views/components-demo/count-to/index.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/views/components-demo/dialog/index.vue b/src/views/components-demo/dialog/index.vue new file mode 100644 index 0000000..b3f833c --- /dev/null +++ b/src/views/components-demo/dialog/index.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/views/components-demo/editor/index.vue b/src/views/components-demo/editor/index.vue new file mode 100644 index 0000000..39c5a2a --- /dev/null +++ b/src/views/components-demo/editor/index.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/views/components-demo/message/index.vue b/src/views/components-demo/message/index.vue new file mode 100644 index 0000000..f1584c2 --- /dev/null +++ b/src/views/components-demo/message/index.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/views/components-demo/qrcode/index.vue b/src/views/components-demo/qrcode/index.vue new file mode 100644 index 0000000..b8133a6 --- /dev/null +++ b/src/views/components-demo/qrcode/index.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/views/components-demo/search/data.ts b/src/views/components-demo/search/data.ts new file mode 100644 index 0000000..f67fb9b --- /dev/null +++ b/src/views/components-demo/search/data.ts @@ -0,0 +1,149 @@ +export const classicData = [ + { + label: '即时配送', + value: true, + itemType: 'switch', + field: 'delivery' + }, + { + label: '活动名称', + value: '', + itemType: 'input', + field: 'name', + placeholder: '活动名称', + clearable: true, + rules: [ + { + required: true, + message: '请输入活动名称' + } + ] + }, + { + label: '活动区域', + value: '', + itemType: 'select', + placeholder: '活动区域', + clearable: true, + field: 'region', + options: [ + { + title: '区域一', + value: 'fujian' + }, + { + title: '区域二', + value: 'beijing' + } + ], + rules: [ + { + itemType: 'string', + required: true, + message: '请选择活动区域' + } + ] + }, + { + label: '特殊资源', + value: '2', + itemType: 'radio', + field: 'resource', + radioType: 'button', // button or radio + options: [ + { + label: '线上品牌商赞助', + value: '1' + }, + { + label: '线下场地免费', + value: '2' + } + ] + }, + // { + // label: '组织机构', + // value: [], + // itemType: 'treeSelect', + // field: 'company', + // allowClear: true, + // placeholder: '请选择组织机构', + // treeCheckable: false, + // maxTagCount: 2, + // options: [ + // { + // title: 'Node1', + // value: '0-0', + // key: '0-0', + // children: [ + // { + // title: 'Child Node1', + // value: '0-0-0', + // key: '0-0-0' + // } + // ] + // }, + // { + // title: 'Node2', + // value: '0-1', + // key: '0-1', + // children: [ + // { + // title: 'Child Node3', + // value: '0-1-0', + // key: '0-1-0', + // disabled: true + // }, + // { + // title: 'Child Node4', + // value: '0-1-1', + // key: '0-1-1' + // }, + // { + // title: 'Child Node5', + // value: '0-1-2', + // key: '0-1-2' + // } + // ] + // } + // ] + // }, + { + label: '日选择器', + value: '', + itemType: 'datePicker', + field: 'date1', + clearable: true, + format: 'YYYY-MM-DD', + placeholder: '请选择日期' + }, + { + label: '月选择器', + value: '', + itemType: 'datePicker', + field: 'date2', + clearable: true, + format: 'YYYY-MM', + placeholder: '请选择日期' + }, + { + label: '范围选择器', + value: [], + itemType: 'datePicker', + field: 'date3', + clearable: true, + type: 'daterange', + rangeSeparator: '至', + startPlaceholder: '开始日期', + endPlaceholder: '结束日期' + }, + { + label: '周选择器', + value: '', + itemType: 'datePicker', + field: 'date4', + type: 'week', + clearable: true, + placeholder: '请选择日期' + } +] diff --git a/src/views/components-demo/search/index.vue b/src/views/components-demo/search/index.vue new file mode 100644 index 0000000..77413ef --- /dev/null +++ b/src/views/components-demo/search/index.vue @@ -0,0 +1,95 @@ + + + + +