ibsp-fg-page 4.0.2

package/src/components/common/CascaderContextMenu.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, reactive, nextTick } from 'vue'
+const props = defineProps({
+  options: {
+    type: Array,
+    default: ()=>([])
+  },
+})
+const emit = defineEmits(['onChange'])
+const cascaderRef = ref(null)
+const state = reactive({
+  show: false,
+  position: {
+    left: 0,
+    top: 0,
+    width: 200,
+    height: 500
+  },
+})
+const value = ref('')
+const show = (event, options)=>{
+  state.show = true
+  state.position.left = event.clientX
+  state.position.top = event.clientY - 50
+  state.position.width = options?.width || 200
+  state.position.height = options?.height || 500
+  nextTick(()=>{
+    cascaderRef.value.togglePopperVisible()
+  })
+
+}
+
+defineExpose({
+  show,
+})
+
+const onChange = (val)=>{
+  emit('onChange', val)
+  value.value = ''
+  state.show = false
+}
+
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="cascader-context-menu"
+         v-if="state.show"
+         :style="{
+           left: state.position.left + 'px',
+           top: state.position.top + 'px',
+           width: state.position.width + 'px',
+           height: state.position.height + 'px',
+         }">
+      <el-cascader v-model="value"
+                   ref="cascaderRef"
+                   :options="options"
+                   @change="onChange" >
+        <template #default="{ node, data }">
+          <span>{{ data.label }}</span>
+          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+        </template>
+      </el-cascader>
+
+    </div>
+  </Teleport>
+</template>
+
+<style lang="less">
+.cascader-context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2999;
+  width: 200px;
+  height: 600px;
+//   background-color: var(--theme-bg);
+pointer-events: none;
+visibility: hidden;
+}
+</style>

package/src/components/common/ContextMenuPlus.vue

@@ -0,0 +1,103 @@
+<script setup >
+import { ref } from 'vue'
+// import ContextMenu from 'primevue/contextmenu';
+defineProps({
+  data: {
+    type: Array,
+    default: () => ([
+      {
+        label: 'Favorite',
+        icon: 'pi pi-star',
+        shortcut: '⌘+D'
+      },
+      {
+        label: 'Add',
+        icon: 'pi pi-shopping-cart',
+        shortcut: '⌘+A'
+      },
+      {
+        separator: true
+      },
+      {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+          {
+            label: 'Whatsapp',
+            icon: 'pi pi-whatsapp',
+            badge: 2,
+            items: [
+              {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp',
+                badge: 8
+              },
+              {
+                label: 'Facebook',
+                icon: 'pi pi-facebook',
+                badge: 5
+              }
+            ]
+          },
+          {
+            label: 'Instagram',
+            icon: 'pi pi-instagram',
+            badge: 3
+          }
+        ]
+      }
+    ])
+  }
+})
+
+const menuRef = ref();
+
+defineExpose({
+  menuRef
+})
+
+const onClick = (item) => {
+  console.log(item);
+}
+
+</script>
+
+<template>
+  <ContextMenu ref="menuRef"
+               :model="data"
+               class="context-menu-plus"
+               @click="handleClick"
+               appendTo="body">
+    <template #item="{item}">
+      <div @click="onClick(item)">
+        <span>{{ item.label }}</span>
+      </div>
+    </template>
+  </ContextMenu>
+</template>
+
+<style>
+.context-menu-plus{
+  z-index: 3001 !important;
+  background-color: var(--theme-bg);
+  padding: 5px;
+  border: 1px solid var(--theme-border-color);
+  .p-submenu-list{
+    padding: 5px;
+    background-color: var(--theme-bg);
+    border: 1px solid var(--theme-border-color);
+  }
+  .p-menuitem{
+    cursor: pointer;
+    .p-menuitem-content{
+      padding: 5px 10px;
+      color: var(--theme-font-color);
+    }
+    &:hover{
+      background-color: var(--theme-btn-hover-bg) !important;
+    }
+
+  }
+}
+</style>
+

package/src/components/common/DragNavMenu.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { inject, computed } from 'vue'
+
+import Draggable from '@/libs/vuedraggable/vuedraggable.js'
+
+const props = defineProps({
+  navListData: {
+    type: Array,
+    required: true,
+    default: () => ([])
+  },
+  currentActiveNavId: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  navPosition: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  group: {
+    type: String,
+    default: 'description'
+  }
+})
+
+const emit = defineEmits([
+  'selectNavMenu',
+  'onOtherDragEndId',
+  'update:currentActiveNavId',
+  'onOtherDragAddId',
+  'onDblclickNavMenu'
+]);
+
+const $bus = inject('$bus')
+
+
+/**
+ * 选择导航菜单
+ * @param item 选中的菜单项
+ */
+const onSelectNavMenu = (item) => {
+  emit('selectNavMenu', item);
+};
+
+
+/**
+ *  拖拽添加
+ * @param {*} param
+ */
+const onAdd = ({ item }) => {
+  const { id } = item.dataset
+  emit('onOtherDragAddId', id)
+};
+
+/**
+ *  拖拽开始
+ * @param {*} param0
+ */
+const start = (e) => {
+  $bus.emit('onMenuDragStart', e.item.dataset.id)
+};
+
+
+let dropState = false
+/**
+ *  拖拽结束
+ */
+const onDrop = () => {
+  dropState = true
+};
+
+/**
+ * 拖拽结束
+ * @param e
+ */
+const onEnd = (e) => {
+  if (e.item.dataset.type !== 'menu') return
+  const id = e.item.dataset.id
+  $bus.emit(
+    'onMenuDragOver',
+    {
+      id: e.item.dataset.id,
+      dropState,
+      navPosition: props.navPosition,
+      e
+    }
+  )
+
+  dropState = false
+  // 如果当前导航菜单已经存在，则不做任何操作
+  if (props.navListData.find(item => item.id === id)) {
+    emit('update:currentActiveNavId', id)
+    return
+  }
+  // 否则认为是上方导航栏或者下方导航栏拖拽过来的
+  emit('onOtherDragEndId', id)
+};
+
+/**
+ *  双击导航菜单
+ */
+const onDblclickNavMenu = (item)=>{
+  emit('onDblclickNavMenu', item)
+}
+
+// const renderList = computed(() => {
+//   return props.navListData.filter(item => {
+//     if (!('open' in item)) {
+//       return true
+//     }
+//     return item.open
+//   })
+// })
+/** */
+const getShow = (item)=>{
+  if (typeof item.show === 'boolean') {
+    return item.show
+  }
+  return true
+
+}
+
+</script>
+
+<template>
+  <div class="drag-nav-menu">
+    <Draggable
+      :animation="400"
+      :disabled="false"
+      :list="navListData"
+      class="nav-list"
+      ghostClass="ghost"
+      :group="group"
+      item-key="id"
+      @add="onAdd"
+      @drop="onDrop"
+      @end="onEnd"
+      @start="start"
+    >
+      <template #item="{element:item}">
+        <div
+          :key="item.id"
+          :class="{ 'is-active': currentActiveNavId === item.id,
+                    'nav-item':true
+          }"
+          v-show="getShow(item)"
+          :data-id="item.id"
+          data-type="menu"
+          @click="onSelectNavMenu(item)"
+          @dblclick="onDblclickNavMenu(item)"
+        >
+          <svg
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="4066"
+            width="200"
+            height="200"
+            v-if="item?.icon"
+            v-html="item?.icon?.path"
+          >
+          </svg>
+
+
+          <span>{{ item.label }}</span>
+        </div>
+      </template>
+    </Draggable>
+
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.drag-nav-menu {
+  width: 100%;
+  height: 40px;
+  background-color: var(--theme-block-bg);
+  border-bottom: 1px solid var(--theme-border-color);
+  flex-shrink: 0;
+  user-select: none;
+
+  .nav-list {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    .nav-item {
+      flex: 1;
+      text-align: center;
+      line-height: 40px;
+      cursor: pointer;
+      transition: background-color .3s;
+      svg{
+        vertical-align: middle;
+    margin-right: 3px;
+    margin-top: -2px;
+    width: 17px;
+    height: 17px;
+        fill: var(--theme-font-color);
+      }
+    }
+  }
+}
+
+.is-active {
+  background-color: var(--theme-btn-bg) !important;
+  color: var(--theme-btn-color) !important;
+  border-top: 2px solid var(--theme-gl-bg) !important;
+  svg{
+      fill: var(--theme-btn-color) !important;
+  }
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.list-group {
+  min-height: 20px;
+}
+
+.list-group-item {
+  cursor: move;
+}
+
+.list-group-item i {
+  cursor: pointer;
+}
+</style>

package/src/components/common/NavMenu.vue

@@ -0,0 +1,203 @@
+<script setup>
+
+import { ref } from 'vue'
+
+const props = defineProps({
+  navDataList: {
+    type: Array,
+    required: true,
+    default: () => ([])
+  },
+  mode: {
+    type: String,
+    default: 'horizontal' // horizontal / vertical
+  },
+  isDrag: {
+    type: Boolean,
+    default: false
+  },
+  currentActiveNav: {
+    type: Number,
+    default: 0
+  },
+  defaultActive: {
+    type: String,
+    default: '0'
+  },
+  isCollapse: {
+    type: Boolean,
+    default: true
+  },
+});
+const emit = defineEmits(['selectNavMenu']);
+
+const menuRef = ref(null);
+
+/**
+ *  选择导航菜单
+ * @param {Number} index  索引
+ */
+const onSelectNavMenu = (index) => {
+  const item = props.navDataList[Number(index)];
+  emit('selectNavMenu', Number(index), item);
+  props.currentActiveNav = Number(index);
+};
+
+/** */
+const getShow = (item)=>{
+  if (typeof item?.show === 'boolean') {
+    return item.show
+  }
+  return true
+}
+
+defineExpose({
+  // eslint-disable-next-line vue/no-ref-object-destructure
+  menuRef
+})
+</script>
+
+<template>
+  <nav>
+    <el-menu
+      ref="menuRef"
+      :class="{
+        'menu-flat':!isCollapse
+      }"
+      :default-active="defaultActive"
+      :ellipsis="false"
+      :mode="mode"
+      v-bind="$attrs"
+      @select="onSelectNavMenu"
+    >
+      <el-menu-item
+        v-for="(item,index) in navDataList"
+        :key="item.id"
+        :index="`${index}`"
+        v-show="getShow(item)"
+      >
+        <template v-if="item?.icon?.path">
+          <div class="svg-icon">
+            <svg
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="4066"
+              width="200"
+              height="200"
+              v-if="item?.icon"
+              v-html="item?.icon?.path"
+            >
+            </svg>
+          </div>
+
+        </template>
+        <el-icon v-else-if="item.icon">
+          <component :is="item?.icon?.value"></component>
+        </el-icon>
+
+        <template #title>
+          <span>{{ item.label }}</span>
+        </template>
+      </el-menu-item>
+
+    </el-menu>
+
+  </nav>
+</template>
+
+<style lang="less" scoped>
+nav {
+  height: 40px;
+  user-select: none;
+
+  .el-menu {
+    height: 100%;
+    justify-content: space-between;
+    background-color: var(--theme-block-bg);
+    border-bottom: 1px solid var(--theme-border-color);
+    transition: .4s;
+    border-bottom: none;
+    &.el-menu--vertical {
+      background-color: transparent;
+      border-bottom: none;
+      max-width: 42px;
+      border-right: none;
+
+
+      .el-menu-item {
+        background-color: var(--theme-block-bg);
+        color: var(--theme-color);
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid var(--theme-border-color);
+        font-size: 12px;
+        flex-direction: column;
+        :deep(i) {
+          top: 17px;
+          margin-right: 0;
+        }
+        &.is-active {
+        border-right: 2px solid var(--theme-gl-bg) !important;
+        border-top: none !important;
+        background-color: var(--theme-btn-bg) !important;
+        color: var(--theme-gl-bg) !important;
+      }
+
+
+      }
+
+
+    }
+
+    :deep(.is-active) {
+      background-color: var(--theme-btn-bg) !important;
+  color: var(--theme-btn-color) !important;
+  border-top: 2px solid var(--theme-gl-bg) !important;
+    }
+
+    :deep(.el-menu-item) {
+      color: var(--theme-text-color);
+      border-bottom: none;
+      flex: 1;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+  }
+
+  .menu-flat {
+
+    width: 70px !important;
+    max-width: 70px !important;
+
+
+    .el-menu-item {
+      width: 70px !important;
+      flex-direction: column !important;
+      justify-content: center !important;
+      .el-icon{
+      top: none !important;
+      }
+      span{
+        height: 100%;
+      }
+    }
+  }
+}
+.svg-icon{
+  width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        line-height: 48px;
+        top: 7px;
+    position: absolute;
+  svg{
+    width: 100%;
+    height: 100%;
+        fill: var(--theme-font-color);
+  }
+}
+</style>