3 |
8 |
9 |
10 |
13 |
--------------------------------------------------------------------------------
/src/views/externalLinks/iframe/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 | 欢迎大家加微信哈，共同讨论，学习
5 |
3 |
7 |
8 |
9 |
15 |
--------------------------------------------------------------------------------
/src/views/echarts/migrationMap/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
3 | Echarts 实现飞线图、地图增加图标、高亮
4 |
6 |
7 |
8 |
11 |
12 |
15 |
--------------------------------------------------------------------------------
/src/plugins/ElIcons.ts:
--------------------------------------------------------------------------------
1 | // 注册icon组件
2 | import * as ElIconsModules from '@element-plus/icons-vue'
3 |
4 | export const registerElIcons = (app) => {
5 | // 全局注册element-plus icon图标组件
6 | Object.keys(ElIconsModules).forEach((key) => {
7 | //循环遍历组件名称
8 | if ('Menu' !== key) {
9 | //如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
10 | app.component(key, ElIconsModules[key])
11 | } else {
12 | app.component(key + 'Icon', ElIconsModules[key])
13 | }
14 | })
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/PageWrapLayout/index.scss:
--------------------------------------------------------------------------------
1 | .m-container-layout {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | padding: 10px 12px;
6 | box-sizing: border-box;
7 | .m-container-layout-inner {
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
12 | background: white;
13 | padding: 20px;
14 | width: 100%;
15 | height: 100%;
16 | box-sizing: border-box;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/layout/components/Header/ToolLeft.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/src/icons/svg/example.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils/emojis.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | imgs: [
3 | '爱你',
4 | '爱情',
5 | '爱心',
6 | '傲慢',
7 | '白眼',
8 | '抱拳',
9 | '鄙视',
10 | '闭嘴',
11 | '便便',
12 | '擦汗',
13 | '菜刀',
14 | '差劲',
15 | '呲牙',
16 | '大哭',
17 | '蛋糕',
18 | '刀',
19 | '得意',
20 | '凋谢',
21 | '发呆',
22 | 'NO',
23 | 'OK',
24 | '发抖',
25 | '发怒',
26 | '饭',
27 | '飞吻',
28 | '奋斗',
29 | '疯了',
30 | '尴尬',
31 | '勾引',
32 | '鼓掌',
33 | '哈欠',
34 | ],
35 | }
36 |
--------------------------------------------------------------------------------
/src/layout/components/Footer/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
20 |
--------------------------------------------------------------------------------
/src/views/system/dictionary/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
19 |
20 |
23 |
--------------------------------------------------------------------------------
/src/icons/svg/table.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import { defineStore, createPinia } from 'pinia'
2 | // 引入持久化插件
3 | import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
4 |
5 | export const Store = defineStore({
6 | // id: 必须的，在所有 Store 中唯一
7 | id: 'globalState',
8 | // state: 返回对象的函数
9 | state: () => ({}),
10 | getters: {},
11 | actions: {},
12 | persist: {
13 | // 本地存储的名称
14 | key: 'globalState',
15 | //保存的位置
16 | storage: window.sessionStorage, //localstorage
17 | },
18 | })
19 |
20 | const pinia = createPinia()
21 | //pinia使用
22 | pinia.use(piniaPluginPersistedstate)
23 | export default pinia
24 |
--------------------------------------------------------------------------------
/src/utils/requestAnimationFrameThrottle.js:
--------------------------------------------------------------------------------
1 | import raf from 'raf'
2 |
3 | /**
4 | * requestAnimationFrame 节流
5 | * scroll 和 touchmove 等事件触发很频繁，比屏幕刷新频率更快，将导致无效的渲染和重绘
6 | * 这里使用 requestAnimationFrame 来优化滚动处理，在一帧中只进行一次有效重绘
7 | */
8 | export default function requestAnimationFrameThrottle(callback) {
9 | let id
10 |
11 | const factory = (args) => () => {
12 | id = null
13 | callback(...args)
14 | }
15 |
16 | const throttled = (...args) => {
17 | if (id == null) {
18 | id = raf(factory(args))
19 | }
20 | }
21 |
22 | throttled.cancel = () => raf.cancel(id)
23 |
24 | return throttled
25 | }
26 |
--------------------------------------------------------------------------------
/src/icons/svg/password.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/chat/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
13 |
14 |
24 |
--------------------------------------------------------------------------------
/src/hooks/useWrapComponents.ts:
--------------------------------------------------------------------------------
1 | // 自定义name的壳的集合
2 | import { h } from 'vue'
3 |
4 | const wrapperMap = new Map()
5 |
6 | export const useWrapComponents = (Component, route) => {
7 | let wrapper
8 | if (Component) {
9 | const wrapperName = route.name
10 | if (wrapperMap.has(wrapperName)) {
11 | wrapper = wrapperMap.get(wrapperName)
12 | } else {
13 | wrapper = {
14 | name: wrapperName,
15 | render() {
16 | return h('div', { className: 'app-main-inner' }, Component)
17 | },
18 | }
19 | wrapperMap.set(wrapperName, wrapper)
20 | }
21 | return h(wrapper)
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/layout/LayoutHorizontal/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 | 聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字
5 |
3 |
7 |
8 |
9 |
15 |
16 |
25 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
3 |
4 |
6 |
7 |
8 |
9 |
13 |
14 |
24 |
--------------------------------------------------------------------------------
/src/icons/svg/report-form.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/excel/exportExcel/index.scss:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | padding: 16px 16px 16px 16px;
4 | margin-bottom: 16px;
5 | border-radius: 4px;
6 | background: white;
7 | box-shadow: 0 0 12px rgb(0 0 0 / 5%);
8 | }
9 | .footer {
10 | flex: 1;
11 | display: flex;
12 | padding: 16px;
13 | flex-direction: column;
14 | border-radius: 4px;
15 | overflow: hidden;
16 | background: white;
17 | box-shadow: 0 0 12px rgb(0 0 0 / 5%);
18 | position: relative;
19 | box-sizing: border-box;
20 | .footer-inner {
21 | position: relative;
22 | width: 100%;
23 | height: 100%;
24 | }
25 | .table {
26 | position: absolute;
27 | left: 0;
28 | top: 0;
29 | width: 100%;
30 | height: 100%;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/utils/clipboard.ts:
--------------------------------------------------------------------------------
1 | import Clipboard from 'clipboard'
2 | import { ElMessage } from 'element-plus'
3 |
4 | function clipboardSuccess() {
5 | ElMessage({
6 | message: '复制成功',
7 | type: 'success',
8 | duration: 1500,
9 | })
10 | }
11 |
12 | function clipboardError() {
13 | ElMessage({
14 | message: '复制失败',
15 | type: 'error',
16 | })
17 | }
18 |
19 | export default function handleClipboard(text, event) {
20 | const clipboard: any = new Clipboard(event.target, {
21 | text: () => text,
22 | })
23 | clipboard.on('success', () => {
24 | clipboardSuccess()
25 | clipboard.destroy()
26 | })
27 | clipboard.on('error', () => {
28 | clipboardError()
29 | clipboard.destroy()
30 | })
31 | clipboard.onClick(event)
32 | }
33 |
--------------------------------------------------------------------------------
/src/icons/svg/task.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/u-container-layout/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
10 |
11 |
31 |
--------------------------------------------------------------------------------
/src/components/SwitchDark/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
3 |
13 |
14 |
27 |
28 |
35 |
--------------------------------------------------------------------------------
/src/icons/svg/eye.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/layout/components/Header/ToolRight.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
20 |
21 |
30 |
--------------------------------------------------------------------------------
/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
26 |
27 |
36 |
--------------------------------------------------------------------------------
/src/layout/components/SubMenu/MenuItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
16 |
31 |
--------------------------------------------------------------------------------
/src/styles/transition.scss:
--------------------------------------------------------------------------------
1 | // global transition css
2 |
3 | /* fade */
4 | .fade-enter-active,
5 | .fade-leave-active {
6 | transition: opacity 0.28s;
7 | }
8 |
9 | .fade-enter,
10 | .fade-leave-active {
11 | opacity: 0;
12 | }
13 |
14 | /* 路由 */
15 | .fade-slide-leave-active,
16 | .fade-slide-enter-active {
17 | transition: all 0.3s;
18 | }
19 |
20 | .fade-slide-enter-from {
21 | opacity: 0;
22 | transform: translateX(-30px);
23 | }
24 |
25 | .fade-slide-leave-to {
26 | opacity: 0;
27 | transform: translateX(30px);
28 | }
29 |
30 | // logo动画
31 | .sidebarLogoFade-enter-active {
32 | transition: opacity 1.5s;
33 | }
34 | .sidebarLogoFade-enter-from {
35 | opacity: 0;
36 | }
37 | .sidebarLogoFade-leave-to {
38 | opacity: 0;
39 | }
40 |
41 | // 面包屑动画 方案1
42 | .breadcrumb-enter-active {
43 | transition: all 0.25s;
44 | }
45 | .breadcrumb-enter-from,
46 | .breadcrumb-leave-active {
47 | opacity: 0;
48 | transform: translateX(10px) skewX(-10deg);
49 | }
50 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
20 |
21 |
44 |
--------------------------------------------------------------------------------
/src/views/other/textClamp/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
9 |
10 |
15 |
6 | 代码编辑器组件示例
7 |
8 |
4 |
5 |
6 | {{ expanded ? '收起' : '展开' }}
7 |
8 |
9 |
10 | {{ formValue }}
6 |
3 |
16 |
17 |
18 |
27 |
28 |
31 |
--------------------------------------------------------------------------------
/src/views/other/clipboard/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
15 |
5 | {{ isFullscreen ? '退出全屏' : '点击全屏' }}
7 |
8 | window切换全屏
6 |
9 |
14 | DOM元素切换全屏
10 |
11 | {{ isFullscreen ? '退出全屏' : '点击全屏' }}
12 |
13 |
3 |
17 |
18 |
28 |
--------------------------------------------------------------------------------
/src/layout/LayoutVertical/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
10 |
11 |
12 |
15 |
16 | 输入内容，并点击复制按钮
6 | 复制成功后可在这粘贴测试
13 |
5 |
9 |
10 |
11 |
17 |
18 |
47 |
--------------------------------------------------------------------------------
/src/views/login/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
19 |
32 |
35 |
--------------------------------------------------------------------------------
/src/views/other/markDown/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
16 |
6 | 
7 |
8 |
7 |
9 | 
11 |
12 |
15 | {{ accountLogin ? '扫码登录' : '账号登录' }}
10 |
11 |
12 |
9 |
11 |
12 | 提交
13 |
14 |
3 |
4 |
6 |
7 |
8 |
9 |
16 |
17 |
43 |
--------------------------------------------------------------------------------
/src/views/other/cardDrag/index.scss:
--------------------------------------------------------------------------------
1 | .m-card-drag {
2 | height: 100%;
3 | width: 100%;
4 | display: flex;
5 | flex-direction: column;
6 | .header {
7 | flex-shrink: 0;
8 | }
9 | }
10 | .footer {
11 | flex: 1;
12 | padding: 10px;
13 | box-sizing: border-box;
14 | overflow: hidden;
15 | }
16 | .card {
17 | display: flex;
18 | flex-wrap: wrap;
19 | justify-content: space-between;
20 | height: 100%;
21 | box-sizing: border-box;
22 | padding: 20px;
23 | overflow-x: hidden;
24 | background-color: var(--el-fill-color-blank);
25 | border: 1px solid var(--el-border-color-light);
26 | border-radius: 4px;
27 | box-shadow: 0 0 12px rgb(0 0 0 / 5%);
28 | }
29 | .item-group-item {
30 | position: relative;
31 | width: calc(100% / 5.3);
32 | margin-bottom: 10px;
33 | flex-direction: column;
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | min-height: 100px;
38 | cursor: move;
39 | font-weight: 500;
40 | border: 1px solid rgba(0, 0, 0, 0.125);
41 | }
42 | .chosenClass {
43 | opacity: 0.6;
44 | border: 1px solid rgba(64, 158, 255, 0.2);
45 | }
46 | .item-icon {
47 | width: 100%;
48 | display: flex;
49 | justify-content: center;
50 | }
51 |
--------------------------------------------------------------------------------
/src/layout/LayoutVertical/HeaderVertical/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
18 |
19 |
20 |
35 |
36 |
39 |
--------------------------------------------------------------------------------
/src/layout/components/Header/components/Hamburger.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
16 |
3 |
4 |
5 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
23 |
24 |
40 |
--------------------------------------------------------------------------------
/src/icons/svg/go-out.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/svg/put-in.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/layout/LayoutVertical/HeaderVertical/index.scss:
--------------------------------------------------------------------------------
1 | .mobile {
2 | .m-layout-header {
3 | left: 0 !important;
4 | width: 100% !important;
5 | }
6 | }
7 | .show-tag {
8 | height: 90px;
9 | }
10 |
11 | .zb-no-fixed-header {
12 | width: 100% !important;
13 | }
14 |
15 | .m-layout-header {
16 | width: 100%;
17 | background: white;
18 | transition: width 0.28s;
19 | flex-shrink: 0;
20 | box-sizing: border-box;
21 | box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
22 |
23 | .header-inner {
24 | height: 50px;
25 | width: 100%;
26 | border-bottom: 1px solid #eee;
27 | display: flex;
28 | align-items: center;
29 | padding: 0 10px 0 0;
30 | box-sizing: border-box;
31 | justify-content: space-between;
32 | }
33 | }
34 | .fixed-header {
35 | position: fixed;
36 | top: 0;
37 | right: 0;
38 | z-index: 9;
39 | }
40 | .collapse {
41 | width: calc(100% - 60px);
42 | }
43 | .no-collapse {
44 | width: calc(100% - 210px);
45 | }
46 |
47 | .el-dropdown {
48 | display: flex;
49 | height: 100%;
50 | align-items: center;
51 | }
52 |
53 | .transverseMenu {
54 | display: flex;
55 | .el-menu {
56 | overflow: hidden;
57 | }
58 | :deep(.el-menu-item) {
59 | height: 100% !important;
60 | }
61 | .tool-bar-right {
62 | display: flex;
63 | justify-content: flex-end;
64 | min-width: 300px;
65 | flex-shrink: 0;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/layout/components/Header/components/globalComSize.vue:
--------------------------------------------------------------------------------
1 |
2 | 部门列表
4 |
6 |
7 |
9 |
10 |
3 |
4 |
5 | 
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
58 |
--------------------------------------------------------------------------------
/src/utils/resize.js:
--------------------------------------------------------------------------------
1 | import { debounce } from '@/utils/index.js'
2 |
3 | export default {
4 | data() {
5 | return {
6 | $_sidebarElm: null,
7 | $_resizeHandler: null,
8 | }
9 | },
10 | mounted() {
11 | this.initListener()
12 | },
13 | activated() {
14 | if (!this.$_resizeHandler) {
15 | // avoid duplication init
16 | this.initListener()
17 | }
18 |
19 | // when keep-alive chart activated, auto resize
20 | this.resize()
21 | },
22 | beforeDestroy() {
23 | this.destroyListener()
24 | },
25 | deactivated() {
26 | this.destroyListener()
27 | },
28 | methods: {
29 | // use $_ for mixins properties
30 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
31 | $_sidebarResizeHandler(e) {
32 | if (e.propertyName === 'width') {
33 | this.$_resizeHandler()
34 | }
35 | },
36 | initListener() {
37 | this.$_resizeHandler = debounce(() => {
38 | this.resize()
39 | }, 100)
40 | window.addEventListener('resize', this.$_resizeHandler)
41 |
42 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
43 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
44 | },
45 | destroyListener() {
46 | window.removeEventListener('resize', this.$_resizeHandler)
47 | this.$_resizeHandler = null
48 |
49 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
50 | },
51 | resize() {
52 | const { chart } = this
53 | chart && chart.resize()
54 | },
55 | },
56 | }
57 |
--------------------------------------------------------------------------------
/src/store/modules/user.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 |
3 | export const useUserStore = defineStore({
4 | // id: 必须的，在所有 Store 中唯一
5 | id: 'userState',
6 | // state: 返回对象的函数
7 | state: () => ({
8 | // 登录token
9 | token: null,
10 | // 登录用户信息
11 | userInfo: {},
12 | // 角色
13 | roles: localStorage.roles ? JSON.parse(localStorage.roles) : [],
14 | }),
15 | getters: {},
16 | // 可以同步 也可以异步
17 | actions: {
18 | // 登录
19 | login(userInfo) {
20 | const { username, password } = userInfo
21 | return new Promise(async (resolve, reject) => {
22 | this.token = username
23 | this.userInfo = userInfo
24 | await this.getRoles()
25 | resolve(username)
26 | })
27 | },
28 | // 获取用户授权角色信息，实际应用中 可以通过token通过请求接口在这里获取用户信息
29 | getRoles() {
30 | return new Promise((resolve, reject) => {
31 | // 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
32 | this.roles = ['admin']
33 | localStorage.roles = JSON.stringify(this.roles)
34 | resolve(this.roles)
35 | })
36 | },
37 | // 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
38 | getInfo(roles) {
39 | return new Promise((resolve, reject) => {
40 | this.roles = roles
41 | resolve(roles)
42 | })
43 | },
44 | // 退出
45 | logout() {
46 | return new Promise((resolve, reject) => {
47 | this.token = null
48 | this.userInfo = {}
49 | this.roles = []
50 | resolve(null)
51 | })
52 | },
53 | },
54 | // 进行持久化存储
55 | persist: {
56 | // 本地存储的名称
57 | key: 'userState',
58 | //保存的位置
59 | storage: window.localStorage, //localstorage
60 | },
61 | })
62 |
--------------------------------------------------------------------------------
/src/routers/modules/form.ts:
--------------------------------------------------------------------------------
1 | /** When your routing table is too long, you can split it into small modules**/
2 |
3 | import Layout from '@/layout/index.vue'
4 |
5 | const formRouter = [
6 | {
7 | path: '/form',
8 | component: Layout,
9 | redirect: '/form/validateForm',
10 | name: 'form',
11 | alwaysShow: true,
12 | meta: {
13 | title: '超级表单',
14 | icon: 'Grape',
15 | },
16 | children: [
17 | {
18 | path: '/form/validateForm',
19 | component: () => import('@/views/form/validateForm/index.vue'),
20 | name: 'validateForm',
21 | meta: { title: '校验 Form', keepAlive: true, icon: 'MenuIcon' },
22 | },
23 | {
24 | path: '/form/advancedForm',
25 | component: () => import('@/views/form/advancedForm/index.vue'),
26 | name: 'advancedForm',
27 | meta: { title: '收缩 Form', icon: 'MenuIcon' },
28 | },
29 | {
30 | path: '/form/appendForm',
31 | component: () => import('@/views/form/appendForm/index.vue'),
32 | name: 'appendForm',
33 | meta: { title: '增删 Form', keepAlive: true, icon: 'MenuIcon' },
34 | },
35 | {
36 | path: '/form/moreForm',
37 | component: () => import('@/views/form/moreForm/index.vue'),
38 | name: 'moreForm',
39 | meta: { title: '多表单验证', keepAlive: true, icon: 'MenuIcon' },
40 | },
41 | {
42 | path: '/form/searchForm',
43 | component: () => import('@/views/form/searchForm/index.vue'),
44 | name: 'searchForm',
45 | meta: { title: '查询 Form', keepAlive: true, icon: 'MenuIcon' },
46 | },
47 | ],
48 | },
49 | ]
50 |
51 | export default formRouter
52 |
--------------------------------------------------------------------------------
/src/views/functionPage/informationList/components/SingleCheck.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
9 | Vue Admin Perfect
10 |
3 |
18 |
19 |
20 |
29 |
30 |
72 |
--------------------------------------------------------------------------------
/src/views/echarts/simple/components/candlestick.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
68 |
--------------------------------------------------------------------------------
/src/routers/modules/echarts.ts:
--------------------------------------------------------------------------------
1 | /** When your routing table is too long, you can split it into small modules**/
2 |
3 | import Layout from '@/layout/index.vue'
4 |
5 | const echartsRouter = [
6 | {
7 | path: '/echarts',
8 | component: Layout,
9 | redirect: '/echarts/migration',
10 | name: 'echarts',
11 | meta: {
12 | title: 'Echarts',
13 | icon: 'trend-charts',
14 | roles: ['other'],
15 | },
16 | children: [
17 | {
18 | path: '/echarts/migration',
19 | component: () => import('@/views/echarts/migrationMap/index.vue'),
20 | name: 'migration',
21 | meta: { title: '迁徙图', roles: ['other'], icon: 'MenuIcon' },
22 | },
23 |
24 | {
25 | path: '/echarts/bar',
26 | component: () => import('@/views/echarts/barEcharts/index.vue'),
27 | name: 'bar',
28 | meta: { title: '柱状图', roles: ['other'], icon: 'MenuIcon' },
29 | },
30 | {
31 | path: '/echarts/graph',
32 | component: () => import('@/views/echarts/graphEcharts/index.vue'),
33 | name: 'graph',
34 | meta: { title: '雷达图', roles: ['other'], icon: 'MenuIcon' },
35 | },
36 |
37 | {
38 | path: '/echarts/pie',
39 | component: () => import('@/views/echarts/pieEcharts/index.vue'),
40 | name: 'pie',
41 | meta: { title: '饼图', roles: ['other'], icon: 'MenuIcon' },
42 | },
43 | {
44 | path: '/echarts/simple',
45 | component: () => import('@/views/echarts/simple/index.vue'),
46 | name: 'echarts-simple',
47 | meta: { title: '简单图表', roles: ['other'], icon: 'MenuIcon' },
48 | },
49 | ],
50 | },
51 | ]
52 |
53 | export default echartsRouter
54 |
--------------------------------------------------------------------------------
/src/store/modules/permission.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 | import { asyncRoutes, constantRoutes, routerArray, notFoundRouter } from '@/routers/index'
3 | import { hasPermission, filterAsyncRoutes } from '@/utils/routers'
4 | import { filterKeepAlive, filterRoutes } from '@/utils/routers'
5 | export const usePermissionStore = defineStore({
6 | // id: 必须的，在所有 Store 中唯一
7 | id: 'permissionState',
8 | // state: 返回对象的函数
9 | state: () => ({
10 | // 路由
11 | routes: [],
12 | // 动态路由
13 | addRoutes: [],
14 | // 缓存路由
15 | cacheRoutes: {},
16 | }),
17 | getters: {
18 | permission_routes: (state) => {
19 | return state.routes
20 | },
21 | keepAliveRoutes: (state) => {
22 | return filterKeepAlive(asyncRoutes)
23 | },
24 | },
25 | // 可以同步 也可以异步
26 | actions: {
27 | // 生成路由
28 | generateRoutes(roles) {
29 | return new Promise((resolve) => {
30 | // 在这判断是否有权限，哪些角色拥有哪些权限
31 | let accessedRoutes
32 | if (roles && roles.length && !roles.includes('admin')) {
33 | accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
34 | } else {
35 | accessedRoutes = asyncRoutes || []
36 | }
37 | accessedRoutes = accessedRoutes.concat(notFoundRouter)
38 | this.routes = constantRoutes.concat(accessedRoutes)
39 | this.addRoutes = accessedRoutes
40 | resolve(accessedRoutes)
41 | })
42 | },
43 | // 清楚路由
44 | clearRoutes() {
45 | this.routes = []
46 | this.addRoutes = []
47 | this.cacheRoutes = []
48 | },
49 | getCacheRoutes() {
50 | this.cacheRoutes = filterKeepAlive(asyncRoutes)
51 | return this.cacheRoutes
52 | },
53 | },
54 | })
55 |
--------------------------------------------------------------------------------
/src/api/request.ts:
--------------------------------------------------------------------------------
1 | import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
2 | import { ElMessage } from 'element-plus'
3 | import { useUserStore } from '@/store/modules/user'
4 | // 创建axios实例 进行基本参数配置
5 | const service = axios.create({
6 | // 默认请求地址，根据环境的不同可在.env 文件中进行修改
7 | baseURL: import.meta.env.VITE_APP_BASE_API,
8 | // 设置接口访问超时时间
9 | timeout: 3000000, // request timeout，
10 | // 跨域时候允许携带凭证
11 | withCredentials: true,
12 | })
13 |
14 | // request interceptor 接口请求拦截
15 | service.interceptors.request.use(
16 | (config: AxiosRequestConfig) => {
17 | /**
18 | * 用户登录之后获取服务端返回的token,后面每次请求都在请求头中带上token进行JWT校验
19 | * token 存储在本地储存中（storage）、vuex、pinia
20 | */
21 | const userStore = useUserStore()
22 | const token: string = userStore.token
23 | // 自定义请求头
24 | if (token) {
25 | config.headers['Authorization'] = token
26 | }
27 | return config
28 | },
29 | (error: AxiosError) => {
30 | // 请求错误，这里可以用全局提示框进行提示
31 | return Promise.reject(error)
32 | },
33 | )
34 |
35 | // response interceptor 接口响应拦截
36 | service.interceptors.response.use(
37 | (response: AxiosResponse) => {
38 | // 直接返回res，当然你也可以只返回res.data
39 | // 系统如果有自定义code也可以在这里处理
40 | return response
41 | },
42 | (error: AxiosError) => {
43 | return Promise.reject(error)
44 | },
45 | )
46 |
47 | // /**
48 | // * @description 显示错误消息
49 | // * opt 传入参数
50 | // * err 错误信息
51 | // * type 消息类型
52 | // * duration 消息持续时间
53 | // */
54 | // function showErrMessage(opt, err, type: any = 'error', duration = 5000) {
55 | // ElMessage({
56 | // message: err.msg,
57 | // type: type,
58 | // duration: duration,
59 | // });
60 | // }
61 |
62 | export default service
63 |
--------------------------------------------------------------------------------
/src/components/CountTo/requestAnimationFrame.js:
--------------------------------------------------------------------------------
1 | let lastTime = 0
2 | const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
3 |
4 | let requestAnimationFrame
5 | let cancelAnimationFrame
6 |
7 | const isServer = typeof window === 'undefined'
8 | if (isServer) {
9 | requestAnimationFrame = function () {
10 | return
11 | }
12 | cancelAnimationFrame = function () {
13 | return
14 | }
15 | } else {
16 | requestAnimationFrame = window.requestAnimationFrame
17 | cancelAnimationFrame = window.cancelAnimationFrame
18 | let prefix
19 | // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
20 | for (let i = 0; i < prefixes.length; i++) {
21 | if (requestAnimationFrame && cancelAnimationFrame) {
22 | break
23 | }
24 | prefix = prefixes[i]
25 | requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
26 | cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
27 | }
28 |
29 | // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
30 | if (!requestAnimationFrame || !cancelAnimationFrame) {
31 | requestAnimationFrame = function (callback) {
32 | const currTime = new Date().getTime()
33 | // 为了使setTimteout的尽可能的接近每秒60帧的效果
34 | const timeToCall = Math.max(0, 16 - (currTime - lastTime))
35 | const id = window.setTimeout(() => {
36 | callback(currTime + timeToCall)
37 | }, timeToCall)
38 | lastTime = currTime + timeToCall
39 | return id
40 | }
41 |
42 | cancelAnimationFrame = function (id) {
43 | window.clearTimeout(id)
44 | }
45 | }
46 | }
47 |
48 | export { requestAnimationFrame, cancelAnimationFrame }
49 |
--------------------------------------------------------------------------------
/src/views/other/svgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
17 |
13 |
16 | 今日访问量
14 | 561
15 |
4 |
10 |
24 | 图标的名称，svg 图标必须存储在 src/icons 目录下
25 | 图标的前缀，默认为 "icon-class"
26 | 图标的样式，默认样式为 { width: "1em", height: " 1em" }
27 |
28 |
29 | 10 |
11 |
23 |
3 |
12 |
13 |
14 |
53 |
54 |
57 |
--------------------------------------------------------------------------------
/src/components/SearchForm/components/BaseFormItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
50 |
51 |
65 |
--------------------------------------------------------------------------------
/src/views/form/moreForm/components/FormThree.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
4 |
6 |
34 | 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
21 |
33 |
10 |
26 |
27 |
28 |
58 |
59 |
62 |
--------------------------------------------------------------------------------
/src/store/modules/setting.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 | import { PRIMARY_COLOR } from '../../config'
3 |
4 | export const useSettingStore = defineStore({
5 | // id: 必须的，在所有 Store 中唯一
6 | id: 'settingState',
7 | // state: 返回对象的函数
8 | state: () => ({
9 | // menu 是否收缩
10 | isCollapse: true,
11 | //
12 | withoutAnimation: false,
13 | device: 'desktop',
14 | // 刷新当前页
15 | isReload: true,
16 | // 主题设置
17 | themeConfig: {
18 | // 显示设置
19 | showSetting: false,
20 | // 菜单展示模式 默认 vertical horizontal / vertical /columns
21 | mode: 'vertical',
22 | // tagsView 是否展示 默认展示
23 | showTag: true,
24 | // 页脚
25 | footer: true,
26 | // 深色模式 切换暗黑模式
27 | isDark: false,
28 | // 显示侧边栏Logo
29 | showLogo: true,
30 | // 主题颜色
31 | primary: PRIMARY_COLOR,
32 | // element组件大小
33 | globalComSize: 'default',
34 | // 是否只保持一个子菜单的展开
35 | uniqueOpened: true,
36 | // 固定header
37 | fixedHeader: true,
38 | // 灰色模式
39 | gray: false,
40 | // 色弱模式
41 | weak: false,
42 | },
43 | }),
44 | getters: {},
45 | // 可以同步 也可以异步
46 | actions: {
47 | // 设置主题
48 | setThemeConfig({ key, val }) {
49 | this.themeConfig[key] = val
50 | },
51 | // 切换 Collapse
52 | setCollapse(value) {
53 | this.isCollapse = value
54 | this.withoutAnimation = false
55 | },
56 | // 关闭侧边栏
57 | closeSideBar({ withoutAnimation }) {
58 | this.isCollapse = false
59 | this.withoutAnimation = withoutAnimation
60 | },
61 | toggleDevice(device) {
62 | this.device = device
63 | },
64 | // 刷新
65 | setReload() {
66 | this.isReload = false
67 | setTimeout(() => {
68 | this.isReload = true
69 | }, 50)
70 | },
71 | },
72 | // 这部分数据不需要存储
73 | // persist: {
74 | // // 本地存储的名称
75 | // key: "settingState",
76 | // //保存的位置
77 | // storage: window.localStorage,//localstorage
78 | // },
79 | })
80 |
--------------------------------------------------------------------------------
/src/views/other/cardDrag/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
20 |
22 |
24 |
3 |
4 | 还原
5 | 获取数据
6 |
7 |
8 |
28 |
29 |
30 |
60 |
61 |
64 |
--------------------------------------------------------------------------------
/src/views/form/moreForm/components/FormOne.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
63 |
76 |
--------------------------------------------------------------------------------
/src/views/excel/exportExcel/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
26 |
27 |
28 |
57 |
58 |
61 |
--------------------------------------------------------------------------------
/src/layout/components/TagsView/components/MoreButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
13 |
15 |
16 |
25 |
6 |
7 |
8 |
11 |
12 |