组件切换tabas

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/maskedbox/displayValue.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="same_row_in upAndDown_padding" @mousedown.stop>
+        <span class="title_12 w_60 default_size" style="flex: none;">显示数值</span>
+        <div @mousedown.stop>
+            <el-cascader v-model="value" :options="options" placement="left" @change="handleChange" @mousedown.stop
+                @visible-change="handleVisibleChange" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const value = ref([])
+const handleChange = (event) => {
+    console.log(event, 556)
+}
+
+const handleVisibleChange = async (visible: boolean) => {
+    if (visible) {
+        await nextTick(() => {
+            const cascaderPanel = document.querySelector('.el-cascader-panel');
+            if (cascaderPanel) {
+                cascaderPanel.addEventListener('mousedown', (event) => {
+                    event.stopPropagation();
+                }, { capture: true });
+            }
+        });
+    }
+};
+const options = [
+    {
+        value: 'guide',
+        label: 'Guide',
+        children: [
+            {
+                value: 'disciplines',
+                label: 'Disciplines',
+                children: [
+                    {
+                        value: 'consistency',
+                        label: 'Consistency',
+                    },
+                    {
+                        value: 'feedback',
+                        label: 'Feedback',
+                    },
+                    {
+                        value: 'efficiency',
+                        label: 'Efficiency',
+                    },
+                    {
+                        value: 'controllability',
+                        label: 'Controllability',
+                    },
+                ],
+            },
+            {
+                value: 'navigation',
+                label: 'Navigation',
+                children: [
+                    {
+                        value: 'side nav',
+                        label: 'Side Navigation',
+                    },
+                    {
+                        value: 'top nav',
+                        label: 'Top Navigation',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'component',
+        label: 'Component',
+        children: [
+            {
+                value: 'basic',
+                label: 'Basic',
+                children: [{
+                    value: 'layout',
+                    label: 'Layout',
+                },
+                {
+                    value: 'color',
+                    label: 'Color',
+                },
+                {
+                    value: 'typography',
+                    label: 'Typography',
+                }
+                ],
+            },
+            {
+                value: 'form',
+                label: 'Form',
+                children: [{
+                    value: 'radio',
+                    label: 'Radio',
+                },
+                {
+                    value: 'checkbox',
+                    label: 'Checkbox',
+                }
+                ],
+            },
+            {
+                value: 'data',
+                label: 'Data',
+                children: [{
+                    value: 'table',
+                    label: 'Table',
+                }, {
+                    value: 'tag',
+                    label: 'Tag',
+                }, {
+                    value: 'progress',
+                    label: 'Progress',
+                }, {
+                    value: 'tree',
+                    label: 'Tree',
+                }, {
+                    value: 'pagination',
+                    label: 'Pagination',
+                },
+                {
+                    value: 'badge',
+                    label: 'Badge',
+                },
+                ],
+            },
+            {
+                value: 'notice',
+                label: 'Notice',
+                children: [{
+                    value: 'alert',
+                    label: 'Alert',
+                },
+                {
+                    value: 'loading',
+                    label: 'Loading',
+                },
+                {
+                    value: 'message',
+                    label: 'Message',
+                },
+                {
+                    value: 'message-box',
+                    label: 'MessageBox',
+                },
+                {
+                    value: 'notification',
+                    label: 'Notification',
+                },
+                ],
+            },
+            {
+                value: 'others',
+                label: 'Others',
+                children: [{
+                    value: 'dialog',
+                    label: 'Dialog',
+                },
+                {
+                    value: 'tooltip',
+                    label: 'Tooltip',
+                },
+                {
+                    value: 'popover',
+                    label: 'Popover',
+                },
+                {
+                    value: 'collapse',
+                    label: 'Collapse',
+                },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'resource',
+        label: 'Resource',
+        children: [{
+            value: 'axure',
+            label: 'Axure Components',
+        },
+        {
+            value: 'sketch',
+            label: 'Sketch Templates',
+        },
+        {
+            value: 'docs',
+            label: 'Design Documentation',
+        },
+        ],
+    },
+]
+</script>
+
+<style lang="scss" scoped></style>

src/components/widgets/Icon.vue

@@ -44,6 +44,7 @@ watch(() => props.config, (newValue) => {
 .icon_card_btn {
   overflow: hidden;
   position: relative;
+  user-select: none;
 }
 
 .images_icon {

src/components/widgets/SceneButton.vue

@@ -37,6 +37,7 @@ watch(() => props.config, (newValue) => {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
+    user-select: none;
 }
 
 .bg_item_btn {
@@ -49,6 +50,7 @@ watch(() => props.config, (newValue) => {
 .icon_card_btn {
     overflow: hidden;
     position: relative;
+    user-select: none;
 }
 
 .images_icon {

src/components/widgets/Switch.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-switch style="width: 40px;height: 20px;pointer-events: none;"
-    :style="{ '--el-switch-on-color': activeColor, '--el-switch-off-color': inactiveColor }" v-model="value" />
+  <el-switch style="pointer-events: none;"
+    :style="{ width: width + 'px', height: height + 'px', '--el-switch-on-color': activeColor, '--el-switch-off-color': inactiveColor }"
+    v-model="value" />
 </template>
 
 <script setup lang="ts">
@@ -8,10 +9,15 @@ import { watch, ref } from "vue";
 const props = defineProps(["config"])
 
 const value = ref(false)
+const width = ref('')
+const height = ref('')
 const activeColor = ref('') //开
 const inactiveColor = ref('') //关
 watch(() => props.config, (newValue) => {
   if (newValue) {
+    width.value = newValue.css.width
+    height.value = newValue.css.height
+    console.log(newValue, 2556)
     activeColor.value = newValue.css.colorOpen
     inactiveColor.value = newValue.css.colorClose
   }

src/router/index.ts

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-// import Layout from '../components/HelloWorld.vue'
-
 const routes: Array<RouteRecordRaw> = [
   {
     //路由初始指向
@@ -14,6 +12,12 @@ const routes: Array<RouteRecordRaw> = [
     name: 'TestDrag',
     component: () => import('../views/TestDrag.vue'),
   },
+  {
+    //路由初始指向
+    path: '/dimensionsView',
+    name: 'dimensionsView',
+    component: () => import('../views/dimensionsView.vue'),
+  },
 ]
 
 const router = createRouter({

src/stores/index.ts

@@ -9,17 +9,17 @@ export const useUserStore = defineStore('user', {
             flag: true,
             visible: false,
             inputFlag: false,
-            name: '卡片',
-            icon: 'icon-kapian',
-            proportion: 1,
+            name: '首页',
+            icon: 'icon-shouye',
             viewData: [],
         }, {
             id: 2,
             flag: false,
             visible: false,
             inputFlag: false,
-            name: '首页',
-            icon: 'icon-shouye',
+            name: '卡片',
+            icon: 'icon-kapian',
+            proportion: 1,
             viewData: [],
         }] // 公斤
     }),
@@ -32,3 +32,17 @@ export const useUserStore = defineStore('user', {
         paths: ['id', 'name', 'viewList'] // 指定持久化的值
     }
 })
+
+export const moduleStore = defineStore('module', {
+    state: () => ({
+        moduleList: [] // 公斤
+    }),
+    getters: {},
+    actions: {},
+    // 持久化插件配置
+    persist: {
+        key: 'store-module', // 本地存储key名称
+        // storage: sessionStorage // 不设置默认存储localStorage
+        paths: ['moduleList'] // 指定持久化的值
+    }
+})

src/views/HomeView.vue

@@ -51,7 +51,7 @@
     <div class="part">
       <!-- 左侧 -->
       <div class="panel_left">
-        <div class="left_tabs_switch">
+        <!-- <div class="left_tabs_switch">
           <div class="card_tabs_view center_in" :class="tabsType == 'module' ? 'tabs_active' : ''"
             @click="getTabs('module')">
             <span class="iconfont tabs_icon_img icon-zujian" :color="tabsType == 'module' ? '#409EFF' : '#606266'"></span>
@@ -61,7 +61,7 @@
             <span class="iconfont tabs_icon_img icon-page" :color="tabsType == 'page' ? '#409EFF' : '#606266'"></span>
             <span>页面</span>
           </div>
-        </div>
+        </div> -->
         <div class="left_paneLeft"
           :style="{ boxShadow: (tabsType == 'module' ? 'rgba(0, 0, 0, 0.05) 3px 0px 5px' : '') }">
           <div class="pane_tabs" v-if="tabsType == 'module'">
@@ -74,9 +74,9 @@
               </el-tab-pane>
             </el-tabs>
           </div>
-          <div v-else>
+          <!-- <div v-else>
             <additionPage @switchPage="switchPage"></additionPage>
-          </div>
+          </div> -->
         </div>
         <div class="left_paneRight" v-if="tabsType == 'module'">
           <el-scrollbar style="width: 100%; height: 100%" class="component-list scrollbar-wrapper">
@@ -98,22 +98,25 @@
       </div>
       <!-- 中间 -->
       <div class="panel_center">
+        <div class="head_page_view">
+          <additionPage @switchPage="switchPage"></additionPage>
+        </div>
         <div class="card_selectSize" :style="{ width: (viewName == '卡片' ? cardWidth + 'px' : '375px') }">
           <div style="display: flex;" v-if="viewName == '卡片'">
-            <el-popover :visible="cardSizeVisible" popper-style="padding: 10px 0px;" :width="80" trigger="click">
-              <template #reference>
-                <div class="card_size_select" @click="cardSizeVisible = true">
-                  <span>选择卡片尺寸:</span>
+            <div class="card_size_select" @click="cardSizeVisible = true">
+              <span>选择卡片尺寸:</span>
+              <el-popover :visible="cardSizeVisible" popper-style="padding: 10px 0px;" :width="80" trigger="click">
+                <template #reference>
                   <div class="size_title_select">{{ currentCardName }}</div>
+                </template>
+                <div style="display: flex;flex-direction: column;" v-click-outside="onClickOutside">
+                  <div class="card_size_item" v-for="(item, index) in cardSizeData" :key="index"
+                    @click="changeCardSize(item)">
+                    <span :style="{ color: (item.flag ? '#409EFF' : '') }">{{ item.title }}</span>
+                  </div>
                 </div>
-              </template>
-              <div style="display: flex;flex-direction: column;" v-click-outside="onClickOutside">
-                <div class="card_size_item" v-for="(item, index) in cardSizeData" :key="index"
-                  @click="changeCardSize(item)">
-                  <span :style="{ color: (item.flag ? '#409EFF' : '') }">{{ item.title }}</span>
-                </div>
-              </div>
-            </el-popover>
+              </el-popover>
+            </div>
           </div>
         </div>
         <div class="card_home" :style="{ width: (viewName == '卡片' ? cardWidth + 'px' : '375px') }">
@@ -210,10 +213,14 @@ import { ref, computed } from "vue";
 import { useRouter } from 'vue-router'
 import { ElMessageBox, ClickOutside as vClickOutside } from 'element-plus'
 // 存储
-import { useUserStore } from '../stores/index'
+import { useUserStore, moduleStore } from '../stores/index'
 import { storeToRefs } from 'pinia';
 const storeUser = useUserStore()
 const { viewList } = storeToRefs(storeUser)
+// 组件存储数据
+const storeModule = moduleStore()
+const { moduleList } = storeToRefs(storeModule)
+const listmodule: any = ref(moduleList)
 
 //module、page、切换组件页面
 const tabsType = ref('module')
@@ -237,6 +244,8 @@ viewList.value.forEach(item => {
     extraImgs1.value = item.viewData
   }
 })
+
+listmodule.value = extraImgs1.value
 // 选择页面
 function switchPage() {
   viewList.value.forEach(item => {
@@ -447,9 +456,9 @@ const handleReceivedData = (num: any) => {
   componentLibrary.value = JSON.parse(JSON.stringify(extraImgs.value))
 }
 // 切换组件页面
-function getTabs(params: any) {
-  tabsType.value = params
-}
+// function getTabs(params: any) {
+//   tabsType.value = params
+// }
 // 切换tabs
 function handleClick(): void {
   console.log(24);
@@ -525,6 +534,10 @@ function announce() {
 // 预览
 function preview() {
   console.log(extraImgs1.value, '预览');
+  const { href }: any = router.resolve({
+    path: '/dimensionsView'
+  });
+  window.open(href, '_blank');
 }
 // 激活项索引
 function getId(params: any) {
@@ -894,6 +907,14 @@ function getIconSelection(params: any) {
   width: calc(100% - 380px);
 }
 
+.head_page_view {
+  // margin-left: 448px;
+  margin-left: 380px;
+  margin-right: 354px;
+  height: 50px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
 .card_selectSize {
   position: relative;
   // width: 375px;
@@ -918,6 +939,9 @@ function getIconSelection(params: any) {
   font-size: 17px;
   font-weight: 600;
   margin-right: 10px;
+  border-radius: 4px;
+  padding: 2px 10px;
+  border: 1px solid var(--el-border-color);
 }
 
 .card_size_item {

src/views/additionPage.vue

@@ -1,54 +1,55 @@
 <template>
-    <div style="padding: 22px 18px;">
-        <div class="space_between_in card_add_page_title" @click="addPage">
-            <span>页面</span>
-            <el-icon color="#337ecc">
-                <Plus />
-            </el-icon>
-        </div>
-        <div style="width: 100%;" v-for="(item, index) in listTabs" :key="index">
-            <el-popover :ref="setPopoverRef" :visible="item.visible" placement="right" :width="160"
-                @visible-change="handleVisibleChange">
-                <div class="card_right_click">
-                    <div class="title_right" @click.stop="editTitle(item)">
-                        <div class="icon_right_click">
-                            <el-icon>
-                                <EditPen />
-                            </el-icon>
+    <el-scrollbar noresize view-class="head_page_scrollber">
+        <div class="additionpage_head">
+            <div class="tabs_item_page" v-for="(item, index) in listTabs" :key="index">
+                <el-popover :ref="setPopoverRef" :visible="item.visible" placement="bottom" :width="160"
+                    @visible-change="handleVisibleChange">
+                    <div class="card_right_click">
+                        <div class="title_right" @click.stop="editTitle(item)">
+                            <div class="icon_right_click">
+                                <el-icon>
+                                    <EditPen />
+                                </el-icon>
+                            </div>
+                            <span>编辑标题</span>
                         </div>
-                        <span>编辑标题</span>
-                    </div>
-                    <div class="title_right" @click.stop="deletePage(item)" v-if="item.name != '首页' && item.name != '卡片'">
-                        <div class="icon_right_click">
-                            <el-icon>
-                                <Delete />
-                            </el-icon>
+                        <div class="title_right" @click.stop="deletePage(item)"
+                            v-if="item.name != '首页' && item.name != '卡片'">
+                            <div class="icon_right_click">
+                                <el-icon>
+                                    <Delete />
+                                </el-icon>
+                            </div>
+                            <span>删除</span>
                         </div>
-                        <span>删除</span>
                     </div>
-                </div>
-                <template #reference>
-                    <div :class="[item.flag ? 'active_card_page' : '', !item.inputFlag ? 'item_tabs_page' : 'edit_card_page']"
-                        @click="getTabs(item)" @contextmenu.stop="onContextMenu($event, item)">
-                        <div style="display: flex;align-items: center;" v-if="!item.inputFlag"
+                    <template #reference>
+                        <div :class="[item.flag ? 'active_card_page' : '', !item.inputFlag ? 'item_tabs_page' : 'edit_card_page']"
+                            @click="getTabs(item)" @contextmenu.stop="onContextMenu($event, item)"
                             @dblclick="handleDoubleClick(item)">
-                            <span class="iconfont page_icon_img" :style="{ color: (item.flag ? '#409EFF' : '') }"
-                                :class="item.icon" v-if="item.icon"></span>
-                            <span>{{ item.name }}</span>
+                            <div style="display: flex;align-items: center;" v-if="!item.inputFlag">
+                                <span class="iconfont page_icon_img" :style="{ color: (item.flag ? '#409EFF' : '') }"
+                                    :class="item.icon" v-if="item.icon"></span>
+                                <span>{{ item.name }}</span>
+                            </div>
+                            <input v-if="editIndex === index && item.inputFlag" :ref="setInputRef" class="title_input_edit"
+                                v-model="item.name" type="text" @input="handleInput" @blur="handleBlur">
                         </div>
-                        <input v-if="editIndex === index && item.inputFlag" :ref="setInputRef" class="title_input_edit"
-                            v-model="item.name" type="text" @input="handleInput" @blur="handleBlur">
-                    </div>
-                </template>
-            </el-popover>
+                    </template>
+                </el-popover>
+            </div>
+            <div class="space_between_in card_add_page_title" @click="addPage">
+                <el-icon color="#ffffff" size="22px">
+                    <Plus />
+                </el-icon>
+            </div>
         </div>
-    </div>
+    </el-scrollbar>
 </template>
 
 <script setup lang="ts">
 import { ElPopover, ElMessageBox } from 'element-plus';
 import { ref, onMounted, onBeforeUnmount } from "vue";
-
 import { useUserStore } from '../stores/index'
 import { storeToRefs } from 'pinia';
 const storeUser = useUserStore()
@@ -91,6 +92,7 @@ function handleDoubleClick(params: any) {
             setTimeout(() => {
                 if (inputRef.value) {
                     inputRef.value.focus();
+                    inputRef.value.select();
                 }
             });
         } else {
@@ -108,6 +110,7 @@ function editTitle(params: any) {
             setTimeout(() => {
                 if (inputRef.value) {
                     inputRef.value.focus();
+                    inputRef.value.select();
                 }
             });
         } else {
@@ -158,6 +161,7 @@ function addPage() {
         visible: false,
         inputFlag: false,
         name: '未命名 ' + (listTabs.value.length + 1),
+        viewData: [],
     }
     listTabs.value.push(arrList)
 }
@@ -199,10 +203,39 @@ const handleClickOutside = (event: MouseEvent) => {
 </script>
 
 <style lang="scss" scoped>
+.additionpage_head {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.scrollbar-flex-content {
+    display: flex;
+}
+
+:deep(.head_page_scrollber) {
+    height: 100% !important;
+}
+
+.additionpage_head {
+    padding: 0px 10px;
+}
+
+.tabs_item_page {
+    margin-right: 10px;
+    width: 100px;
+    flex: none;
+    flex-shrink: 0;
+    background-color: #fff;
+    border-radius: 5px;
+}
+
 .card_add_page_title {
     cursor: pointer;
-    padding: 0px 5px;
-    margin-bottom: 22px;
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid #CDD0D6;
+    background-color: #dedfe0;
 
     span {
         font-size: 14px;
@@ -210,6 +243,11 @@ const handleClickOutside = (event: MouseEvent) => {
     }
 }
 
+.card_add_page_title:hover {
+    border: 1px solid rgba(15, 115, 230, 0.08);
+    background-color: rgba(15, 115, 230, 0.08);
+}
+
 .card_right_click {
     display: flex;
     flex-direction: column;
@@ -283,8 +321,13 @@ const handleClickOutside = (event: MouseEvent) => {
 .page_icon_img {
     position: absolute;
     left: 5px;
-    font-size: 13px;
+    top: 0;
+    bottom: 0;
+    font-size: 15px;
     color: #606266;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .title_input_edit {

src/views/dimensionsView.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="card_dimensions">
+        <div class="card_module" :style="{ width: previewWidth + 'px', height: previewHeight + 'px', }">
+            <component class="absolute" :style="getStyle(item)" v-for="(item, index) in listmodule" :key="index"
+                :is="getWidget(item.type)" :config="item">
+            </component>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import getName from '../components/widgets/getWidget';
+
+import { ref, onMounted } from "vue";
+import { moduleStore } from '../stores/index'
+import { storeToRefs } from 'pinia';
+const storeModule = moduleStore()
+const { moduleList } = storeToRefs(storeModule)
+const listmodule: any = ref(moduleList)
+console.log(listmodule.value, 265);
+
+const previewWidth: any = ref(420)
+const previewHeight: any = ref(844)
+onMounted(() => {
+    document.title = '页面预览'
+})
+
+const getWidget = (name: string) => {
+    //组件名映射
+    return getName[name]
+}
+const getStyle = (event: any) => {
+    //组件名映射
+    return {
+        left: (event.css.left / 375) * previewWidth.value + 'px',
+        top: (event.css.top / 603) * previewHeight.value + 'px',
+        width: (event.css.width / 375) * previewWidth.value + 'px',
+        height: (event.css.height / 603) * previewHeight.value + 'px',
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.card_dimensions {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    background-color: #f4f4f4;
+}
+
+.card_module {
+    position: relative;
+    margin-top: 20px;
+    background-color: #fff;
+}
+
+.absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+</style>

src/views/maskedbox.vue

@@ -4,6 +4,15 @@
         v-model:cssData="config.css"></layout>
     <div class="box_padding" v-if="config.css">
         <div class="same_row_in">
+            <span class="default_size title_5">数据绑定</span>
+            <el-icon style="cursor: pointer;" :class="bindingFlag ? '' : 'putAway'" @click="getbasicSetting('bin')">
+                <ArrowDown />
+            </el-icon>
+        </div>
+        <div v-if="bindingFlag" class="card_second_level">
+            <displayValue></displayValue>
+        </div>
+        <div class="same_row_in">
             <span class="default_size title_5">基础设置</span>
             <el-icon style="cursor: pointer;" :class="basicFlag ? '' : 'putAway'" @click="getbasicSetting('basic')">
                 <ArrowDown />
@@ -74,6 +83,7 @@ import textAlignment from '../components/maskedbox/textAlignment.vue';
 import lineNumber from '../components/maskedbox/lineNumber.vue';
 import digitalSlider from '../components/maskedbox/digitalSlider.vue';
 import photoGallery from '../components/maskedbox/photoGallery.vue';
+import displayValue from '../components/maskedbox/displayValue.vue';
 
 const props = defineProps({
     config: {
@@ -81,10 +91,9 @@ const props = defineProps({
         required: true
     },
 })
-
+const bindingFlag = ref(true)
 const basicFlag = ref(true)
 const imgFlag = ref(true)
-const backgroundFlag = ref(true)
 function getbasicSetting(params: any) {
     if (params == 'basic') {
         if (basicFlag.value) {
@@ -98,11 +107,11 @@ function getbasicSetting(params: any) {
         } else {
             imgFlag.value = true
         }
-    } else if (params == 'background') {
-        if (backgroundFlag.value) {
-            backgroundFlag.value = false
+    } else if (params == 'bin') {
+        if (bindingFlag.value) {
+            bindingFlag.value = false
         } else {
-            backgroundFlag.value = true
+            bindingFlag.value = true
         }
     }
 }