From c232cd698d49b043763e4e39ad97d76c3804824d Mon Sep 17 00:00:00 2001 From: sws <1141121512@qq.com> Date: Mon, 2 Sep 2024 18:16:16 +0800 Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=20sws=20?= =?UTF-8?q?2024-09-02?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/index.scss | 17 +++- src/views/layout/components/main/index.vue | 101 ++++++++++++--------- src/views/layout/index.vue | 37 ++++++-- 3 files changed, 98 insertions(+), 57 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 8913256a..b9e0292a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -187,12 +187,21 @@ p { } // 链接弹窗表格用到 ------ end - -.el-color-predefine__colors .el-color-predefine__color-selector{ +.el-color-predefine__colors .el-color-predefine__color-selector { box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1); } .el-color-picker .el-color-picker__trigger .el-color-picker__color { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size: 12px 12px; - background-position: 0 0, 6px 0, 6px -6px, 0 6px; -} \ No newline at end of file + background-position: + 0 0, + 6px 0, + 6px -6px, + 0 6px; +} + +// 全屏轮播大小调整 +.loading-custom { + --el-loading-spinner-size: 13rem; + --el-loading-fullscreen-spinner-size: 13rem; +} diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue index 68713c91..80876624 100644 --- a/src/views/layout/components/main/index.vue +++ b/src/views/layout/components/main/index.vue @@ -2,9 +2,9 @@
- - -
+ + +
释放鼠标将组件添加到此处
@@ -165,8 +165,9 @@ import { background_computer, get_math, gradient_computer, padding_computer, rad import { cloneDeep } from 'lodash'; import { SortableEvent, VueDraggable } from 'vue-draggable-plus'; import defaultSettings from './index'; -import { footerNavCounterStore } from '@/store'; +import { footerNavCounterStore, commonStore } from '@/store'; const footer_nav_counter_store = footerNavCounterStore(); +const common_store = commonStore(); const app = getCurrentInstance(); import { isEmpty } from 'lodash'; const props = defineProps({ @@ -252,45 +253,50 @@ watch( // 父组件调用的方法 const emits = defineEmits(['rightUpdate']); -const activeNames = reactive(['1', '2', '3']); -const components = reactive([ - { - title: '基础组件', - key: '1', - item: [ - { key: 'carousel', name: '轮播图' }, - { key: 'search', name: '搜索框' }, - { key: 'nav-group', name: '导航组' }, - { key: 'notice', name: '公告' }, - { key: 'video', name: '视频' }, - { key: 'user-info', name: '用户信息' }, - { key: 'tabs', name: '选项卡' }, - { key: 'article-tabs', name: '文章选项卡' }, - { key: 'shop-tabs', name: '商品选项卡' }, - { key: 'article-list', name: '文章列表' }, - { key: 'shop-list', name: '商品列表' }, - { key: 'img-magic', name: '图片魔方' }, - { key: 'data-magic', name: '数据魔方' }, - { key: 'hot-zone', name: '热区' }, - { key: 'custom', name: '自定义' }, - ], - }, - { - title: '营销组件', - key: '2', - item: [{ key: 'coupon', name: '优惠券' }], - }, - { - title: '工具组件', - key: '3', - item: [ - { key: 'float-window', name: '悬浮按钮' }, - { key: 'text-title', name: '文本标题' }, - { key: 'auxiliary-blank', name: '辅助空白' }, - { key: 'row-line', name: '横线' }, - { key: 'rich-text', name: '富文本' }, - ], - }, +const activeNames = reactive(['base', 'plugins', 'tool']); +interface componentsData { + name: string; + key: string; + data: componentsData[]; +} +const components = ref([ + // { + // name: '基础组件', + // key: 'base', + // data: [ + // { key: 'carousel', name: '轮播图' }, + // { key: 'search', name: '搜索框' }, + // { key: 'nav-group', name: '导航组' }, + // { key: 'notice', name: '公告' }, + // { key: 'video', name: '视频' }, + // { key: 'user-info', name: '用户信息' }, + // { key: 'tabs', name: '选项卡' }, + // { key: 'article-tabs', name: '文章选项卡' }, + // { key: 'shop-tabs', name: '商品选项卡' }, + // { key: 'article-list', name: '文章列表' }, + // { key: 'shop-list', name: '商品列表' }, + // { key: 'img-magic', name: '图片魔方' }, + // { key: 'data-magic', name: '数据魔方' }, + // { key: 'hot-zone', name: '热区' }, + // { key: 'custom', name: '自定义' }, + // ], + // }, + // { + // name: '营销组件', + // key: 'plugins', + // data: [{ key: 'coupon', name: '优惠券' }], + // }, + // { + // name: '工具组件', + // key: 'tool', + // data: [ + // { key: 'float-window', name: '悬浮按钮' }, + // { key: 'text-title', name: '文本标题' }, + // { key: 'auxiliary-blank', name: '辅助空白' }, + // { key: 'row-line', name: '横线' }, + // { key: 'rich-text', name: '富文本' }, + // ], + // }, ]); const url_computer = (name: string) => { const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value; @@ -549,6 +555,15 @@ const scroll = () => { // 在组件挂载时默认执行 onMounted(() => { page_settings(); + nextTick(() => { + const interval = setInterval(() => { + // 获取分类 + if (common_store.common.module_list.length > 0) { + components.value = common_store.common.module_list; + clearInterval(interval); + } + }, 1000); + }); }); //页面设置 const page_settings = () => { diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue index 43efe0a7..aab9c03c 100644 --- a/src/views/layout/index.vue +++ b/src/views/layout/index.vue @@ -1,5 +1,5 @@