From 023560c5781557f4ca410bcc2a06e7e8cd75a264 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 4 Jan 2022 14:44:30 +0800
Subject: [PATCH] build: update cache type to filesystem

---
 package.json                                  |   3 +-
 src/components/basic/context-menu/index.ts    |   3 +
 src/components/basic/context-menu/index.vue   | 157 -------------
 src/components/basic/context-menu/props.ts    |  40 ----
 .../basic/context-menu/src/ContextMenu.vue    | 207 ++++++++++++++++++
 .../context-menu/src/createContextMenu.ts     |  75 +++++++
 .../context-menu/{types.ts => src/typing.ts}  |  28 +--
 src/hooks/functions/useContextMenu.ts         |  49 +----
 src/views/demos/tables/lol-table/index.vue    |  31 +++
 types/utils.d.ts                              |   1 +
 vue.config.js                                 |   9 +-
 11 files changed, 350 insertions(+), 253 deletions(-)
 create mode 100644 src/components/basic/context-menu/index.ts
 delete mode 100644 src/components/basic/context-menu/index.vue
 delete mode 100644 src/components/basic/context-menu/props.ts
 create mode 100644 src/components/basic/context-menu/src/ContextMenu.vue
 create mode 100644 src/components/basic/context-menu/src/createContextMenu.ts
 rename src/components/basic/context-menu/{types.ts => src/typing.ts} (55%)

diff --git a/package.json b/package.json
index 3b7ab37ce..f60ca7ecd 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,5 @@
     "*.md": [
       "prettier --write"
     ]
-  },
-  "target": "web"
+  }
 }
diff --git a/src/components/basic/context-menu/index.ts b/src/components/basic/context-menu/index.ts
new file mode 100644
index 000000000..ed294d7bb
--- /dev/null
+++ b/src/components/basic/context-menu/index.ts
@@ -0,0 +1,3 @@
+export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
+
+export * from './src/typing';
diff --git a/src/components/basic/context-menu/index.vue b/src/components/basic/context-menu/index.vue
deleted file mode 100644
index 213c6bbf9..000000000
--- a/src/components/basic/context-menu/index.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script lang="tsx">
-  import {
-    defineComponent,
-    nextTick,
-    onMounted,
-    reactive,
-    computed,
-    ref,
-    unref,
-    onUnmounted,
-  } from 'vue';
-  import { Menu, Divider } from 'ant-design-vue';
-  import { props } from './props';
-  import { ContextMenuItem } from './types';
-
-  export default defineComponent({
-    name: 'ContextMenu',
-    props,
-    setup(props) {
-      const selectedKeys = ref([]);
-      const prefixCls = 'content-menu';
-      const wrapRef = ref<HTMLDivElement | null>(null);
-      const state = reactive({
-        show: false,
-      });
-      onMounted(() => {
-        nextTick(() => {
-          state.show = true;
-        });
-      });
-      onUnmounted(() => {
-        const el = unref(wrapRef);
-        el && document.body.removeChild(el);
-      });
-      const getStyle = computed(() => {
-        const { axis, items, styles, width } = props;
-        const { x, y } = axis || { x: 0, y: 0 };
-        const menuHeight = (items || []).length * 40;
-        const menuWidth = width;
-        const body = document.body;
-        return {
-          ...styles,
-          width: `${width}px`,
-          left: (body.clientWidth < x + menuWidth ? x - menuWidth : x) + 'px',
-          top: (body.clientHeight < y + menuHeight ? y - menuHeight : y) + 'px',
-        };
-      });
-      function handleAction(item: ContextMenuItem, e: MouseEvent) {
-        // e.stopPropagation();
-        const { handler, disabled, children } = item;
-        if (disabled || children) {
-          e.preventDefault();
-          e.stopPropagation();
-          return;
-        }
-        state.show = true;
-        handler && handler(item);
-      }
-      function renderContent(item: ContextMenuItem) {
-        const { icon, label } = item;
-
-        const { showIcon } = props;
-        return (
-          <span style="display: inline-block; width: 100%;" onClick={handleAction.bind(null, item)}>
-            {showIcon && icon && <div class="mr-2" />}
-            <span>{label}</span>
-          </span>
-        );
-      }
-      function renderMenuItem(items: ContextMenuItem[]) {
-        return items.map((item, index) => {
-          const { disabled, label, children, divider = true } = item;
-
-          const DividerComp = divider ? <Divider key={`d-${index}`} /> : null;
-          if (!children || children.length === 0) {
-            return [
-              <Menu.Item disabled={disabled} key={label}>
-                {renderContent(item)}
-              </Menu.Item>,
-              DividerComp,
-            ];
-          }
-          return [
-            <Menu.SubMenu key={label} title={item.label} popupClassName={`${prefixCls}__sub_menu`}>
-              {renderMenuItem(children)}
-            </Menu.SubMenu>,
-            DividerComp,
-          ];
-        });
-      }
-      return () => {
-        const { items } = props;
-        return (
-          <div ref={wrapRef} class="content-menu">
-            <Menu
-              v-model_selectedKeys={selectedKeys}
-              inlineIndent={12}
-              mode="vertical"
-              v-show={state.show}
-              style={unref(getStyle)}
-            >
-              {renderMenuItem(items as ContextMenuItem[])}
-            </Menu>
-          </div>
-        );
-      };
-    },
-  });
-</script>
-<style lang="less">
-  .content-menu {
-    .ant-menu {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 300;
-      display: block;
-      width: 156px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
-      user-select: none;
-
-      .ant-menu-item {
-        height: 36px;
-        margin-bottom: 0 !important;
-        line-height: 36px;
-
-        &:hover:not(.ant-menu-item-disabled) {
-          color: inherit;
-          cursor: pointer;
-          background: fade-in(#e6f7ff, 0.5%);
-        }
-      }
-    }
-
-    .ant-divider {
-      margin: 0 0;
-
-      &:last-of-type {
-        height: 0;
-      }
-    }
-
-    &__sub_menu {
-      .ant-menu-item {
-        margin-bottom: 4px !important;
-      }
-
-      .ant-divider {
-        margin: 0 0;
-
-        &:last-of-type {
-          height: 0;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/components/basic/context-menu/props.ts b/src/components/basic/context-menu/props.ts
deleted file mode 100644
index 6f66c2db1..000000000
--- a/src/components/basic/context-menu/props.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Prop } from 'vue';
-import { Axis, ContextMenuItem } from './types';
-export const props = {
-  width: {
-    type: Number,
-    default: 180,
-  },
-  customEvent: {
-    type: Object,
-    default: null,
-  } as Prop<Event>,
-  // 样式
-  styles: {
-    type: Object,
-    default: null,
-  } as Prop<any>,
-  showIcon: {
-    // 是否显示icon
-    type: Boolean,
-    default: true,
-  } as Prop<boolean>,
-  axis: {
-    // 鼠标右键点击的位置
-    type: Object,
-    default() {
-      return { x: 0, y: 0 };
-    },
-  } as Prop<Axis>,
-  items: {
-    // 最重要的列表，没有的话直接不显示
-    type: Array,
-    default() {
-      return [];
-    },
-  } as Prop<ContextMenuItem[]>,
-  resolve: {
-    type: Function,
-    default: null,
-  } as Prop<any>,
-};
diff --git a/src/components/basic/context-menu/src/ContextMenu.vue b/src/components/basic/context-menu/src/ContextMenu.vue
new file mode 100644
index 000000000..4c181f3ed
--- /dev/null
+++ b/src/components/basic/context-menu/src/ContextMenu.vue
@@ -0,0 +1,207 @@
+<script lang="tsx">
+  import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
+  import type { FunctionalComponent, CSSProperties } from 'vue';
+  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
+  import { IconFont } from '@/components/basic/iconfont';
+  import { Menu, Divider } from 'ant-design-vue';
+
+  const prefixCls = 'context-menu';
+
+  const props = {
+    width: { type: Number, default: 156 },
+    customEvent: { type: Object as PropType<Event>, default: null },
+    styles: { type: Object as PropType<CSSProperties> },
+    showIcon: { type: Boolean, default: true },
+    axis: {
+      // The position of the right mouse button click
+      type: Object as PropType<Axis>,
+      default() {
+        return { x: 0, y: 0 };
+      },
+    },
+    items: {
+      // The most important list, if not, will not be displayed
+      type: Array as PropType<ContextMenuItem[]>,
+      default() {
+        return [];
+      },
+    },
+  };
+
+  const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
+    const { item } = props;
+    return (
+      <span
+        style="display: inline-block; width: 100%; "
+        class="px-4"
+        onClick={props.handler.bind(null, item)}
+      >
+        {props.showIcon && item.icon && <IconFont class="mr-2" type={item.icon} />}
+        <span>{item.label}</span>
+      </span>
+    );
+  };
+
+  export default defineComponent({
+    name: 'ContextMenu',
+    props,
+    setup(props) {
+      const wrapRef = ref(null);
+      const showRef = ref(false);
+
+      const getStyle = computed((): CSSProperties => {
+        const { axis, items, styles, width } = props;
+        const { x, y } = axis || { x: 0, y: 0 };
+        const menuHeight = (items || []).length * 40;
+        const menuWidth = width;
+        const body = document.body;
+
+        const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+        const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+        return {
+          ...styles,
+          position: 'absolute',
+          width: `${width}px`,
+          left: `${left + 1}px`,
+          top: `${top + 1}px`,
+        };
+      });
+
+      onMounted(() => {
+        nextTick(() => (showRef.value = true));
+      });
+
+      onUnmounted(() => {
+        const el = unref(wrapRef);
+        el && document.body.removeChild(el);
+      });
+
+      function handleAction(item: ContextMenuItem, e: MouseEvent) {
+        const { handler, disabled } = item;
+        if (disabled) {
+          return;
+        }
+        showRef.value = false;
+        e?.stopPropagation();
+        e?.preventDefault();
+        handler?.();
+      }
+
+      function renderMenuItem(items: ContextMenuItem[]) {
+        return items.map((item) => {
+          const { disabled, label, children, divider = false } = item;
+
+          const contentProps = {
+            item,
+            handler: handleAction,
+            showIcon: props.showIcon,
+          };
+
+          if (!children || children.length === 0) {
+            return (
+              <>
+                <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
+                  <ItemContent {...contentProps} />
+                </Menu.Item>
+                {divider ? <Divider key={`d-${label}`} /> : null}
+              </>
+            );
+          }
+          if (!unref(showRef)) return null;
+
+          return (
+            <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
+              {{
+                title: () => <ItemContent {...contentProps} />,
+                default: () => renderMenuItem(children),
+              }}
+            </Menu.SubMenu>
+          );
+        });
+      }
+      return () => {
+        if (!unref(showRef)) {
+          return null;
+        }
+        const { items } = props;
+        return (
+          <div class={prefixCls}>
+            <Menu inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
+              {renderMenuItem(items)}
+            </Menu>
+          </div>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @default-height: 42px !important;
+
+  @small-height: 36px !important;
+
+  @large-height: 36px !important;
+
+  .item-style() {
+    li {
+      display: inline-block;
+      width: 100%;
+      height: @default-height;
+      margin: 0 !important;
+      line-height: @default-height;
+
+      span {
+        line-height: @default-height;
+      }
+
+      > div {
+        margin: 0 !important;
+      }
+
+      &:not(.ant-menu-item-disabled):hover {
+        color: #c9d1d9;
+        background-color: #f5f5f5;
+      }
+    }
+  }
+
+  .context-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    display: block;
+    width: 156px;
+    margin: 0;
+    list-style: none;
+    background-color: #151515;
+    border: 1px solid rgb(0 0 0 / 8%);
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+      0 1px 5px 0 rgb(0 0 0 / 6%);
+    background-clip: padding-box;
+    user-select: none;
+
+    &__item {
+      margin: 0 !important;
+    }
+    .item-style();
+
+    .ant-divider {
+      margin: 0;
+    }
+
+    &__popup {
+      .ant-divider {
+        margin: 0;
+      }
+
+      .item-style();
+    }
+
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+      padding: 0 !important;
+    }
+  }
+</style>
diff --git a/src/components/basic/context-menu/src/createContextMenu.ts b/src/components/basic/context-menu/src/createContextMenu.ts
new file mode 100644
index 000000000..b9b10e7ab
--- /dev/null
+++ b/src/components/basic/context-menu/src/createContextMenu.ts
@@ -0,0 +1,75 @@
+import contextMenuVue from './ContextMenu.vue';
+import { isClient } from '@/utils/is';
+import { CreateContextOptions, ContextMenuProps } from './typing';
+import { createVNode, render } from 'vue';
+
+const menuManager: {
+  domList: Element[];
+  resolve: Fn;
+} = {
+  domList: [],
+  resolve: () => {},
+};
+
+export const createContextMenu = function (options: CreateContextOptions) {
+  const { event } = options || {};
+
+  event && event?.preventDefault();
+
+  if (!isClient) {
+    return;
+  }
+  return new Promise((resolve) => {
+    const body = document.body;
+
+    const container = document.createElement('div');
+    const propsData: Partial<ContextMenuProps> = {};
+    if (options.styles) {
+      propsData.styles = options.styles;
+    }
+
+    if (options.items) {
+      propsData.items = options.items;
+    }
+
+    if (options.event) {
+      propsData.customEvent = event;
+      propsData.axis = { x: event.clientX, y: event.clientY };
+    }
+
+    const vm = createVNode(contextMenuVue, propsData);
+    render(vm, container);
+
+    const handleClick = function () {
+      menuManager.resolve('');
+    };
+
+    menuManager.domList.push(container);
+
+    const remove = function () {
+      menuManager.domList.forEach((dom: Element) => {
+        try {
+          dom && body.removeChild(dom);
+        } catch (error) {}
+      });
+      body.removeEventListener('click', handleClick);
+      body.removeEventListener('scroll', handleClick);
+    };
+
+    menuManager.resolve = function (arg) {
+      remove();
+      resolve(arg);
+    };
+    remove();
+    body.appendChild(container);
+    body.addEventListener('click', handleClick);
+    body.addEventListener('scroll', handleClick);
+  });
+};
+
+export const destroyContextMenu = function () {
+  if (menuManager) {
+    menuManager.resolve('');
+    menuManager.domList = [];
+  }
+};
diff --git a/src/components/basic/context-menu/types.ts b/src/components/basic/context-menu/src/typing.ts
similarity index 55%
rename from src/components/basic/context-menu/types.ts
rename to src/components/basic/context-menu/src/typing.ts
index 5da6bc1cd..899d36b26 100644
--- a/src/components/basic/context-menu/types.ts
+++ b/src/components/basic/context-menu/src/typing.ts
@@ -7,29 +7,29 @@ export interface ContextMenuItem {
   label: string;
   icon?: string;
   disabled?: boolean;
-  handler?: (...arg: any) => any;
+  handler?: Fn;
   divider?: boolean;
   children?: ContextMenuItem[];
 }
-export interface Options {
+export interface CreateContextOptions {
   event: MouseEvent;
   icon?: string;
   styles?: any;
   items?: ContextMenuItem[];
 }
 
-export interface Instance extends Props {
-  $el: HTMLDivElement;
-}
-
-export type Props = {
-  resolve: (...arg: any) => void;
-  event: MouseEvent;
-  icon?: string;
+export interface ContextMenuProps {
+  event?: MouseEvent;
   styles?: any;
   items: ContextMenuItem[];
-  customEvent: MouseEvent;
-  axis: Axis;
-  width: number;
+  customEvent?: MouseEvent;
+  axis?: Axis;
+  width?: number;
   showIcon?: boolean;
-};
+}
+
+export interface ItemContentProps {
+  showIcon: boolean | undefined;
+  item: ContextMenuItem;
+  handler: Fn;
+}
diff --git a/src/hooks/functions/useContextMenu.ts b/src/hooks/functions/useContextMenu.ts
index ec0d11000..9e369b698 100644
--- a/src/hooks/functions/useContextMenu.ts
+++ b/src/hooks/functions/useContextMenu.ts
@@ -1,41 +1,12 @@
-import { createApp, h, App } from 'vue';
-
-import { Props } from '@/components/basic/context-menu/types';
-
-import ContentMenu from '@/components/basic/context-menu/index.vue';
-
-let ContentMenuInstance: App<Element> | null = null;
-let wrapperEl: HTMLElement | null = null;
-
-export const useContextMenu = (props: Props) => {
-  const { event } = props;
-  props.customEvent = event;
-  props.axis = { x: event.clientX, y: event.clientY };
-
-  const bodyClick = () => {
-    ContentMenuInstance &&
-      wrapperEl &&
-      ContentMenuInstance.unmount() &&
-      document.body.removeChild(wrapperEl) &&
-      wrapperEl.remove();
-    document.body.removeEventListener('click', bodyClick);
-    document.body.removeEventListener('scroll', bodyClick);
-    ContentMenuInstance = null;
-  };
-
-  bodyClick();
-
-  if (!ContentMenuInstance) {
-    ContentMenuInstance = createApp({
-      render() {
-        return h(ContentMenu, props);
-      },
+import { onUnmounted, getCurrentInstance } from 'vue';
+import { createContextMenu, destroyContextMenu } from '@/components/basic/context-menu';
+import type { ContextMenuItem } from '@/components/basic/context-menu';
+export type { ContextMenuItem };
+export function useContextMenu(authRemove = true) {
+  if (getCurrentInstance() && authRemove) {
+    onUnmounted(() => {
+      destroyContextMenu();
     });
-    wrapperEl = document.createElement('div');
-    document.body.appendChild(wrapperEl);
-    ContentMenuInstance.mount(wrapperEl);
   }
-
-  document.body.addEventListener('click', bodyClick);
-  document.body.addEventListener('scroll', bodyClick);
-};
+  return [createContextMenu, destroyContextMenu];
+}
diff --git a/src/views/demos/tables/lol-table/index.vue b/src/views/demos/tables/lol-table/index.vue
index 84ed6bfba..d6d1177ad 100644
--- a/src/views/demos/tables/lol-table/index.vue
+++ b/src/views/demos/tables/lol-table/index.vue
@@ -10,6 +10,7 @@
         :data-request="loadData"
         :columns="columns"
         rowKey="heroid"
+        :customRow="customRow"
       />
     </Card>
   </div>
@@ -26,6 +27,36 @@
   import { DynamicTable } from '@/components/core/dynamic-table';
   import { getLolHeroList } from '@/api/demos/hero';
   import { columns } from './columns';
+  import { useContextMenu } from '@/hooks/functions/useContextMenu';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const [createContextMenu] = useContextMenu();
+
+  const customRow = (record) => {
+    return {
+      onContextmenu: (e: MouseEvent) => {
+        createContextMenu({
+          event: e,
+          items: [
+            {
+              label: '查看',
+              handler: () => {
+                console.log('record', record);
+                router.push({ name: 'demos-table-lol-info', params: { id: record.heroId } });
+              },
+            },
+            {
+              label: '编辑',
+              handler: () => {
+                console.log('record', record);
+              },
+            },
+          ],
+        });
+      },
+    };
+  };
 
   const loadData = async (params) => {
     const { data } = await getLolHeroList(params);
diff --git a/types/utils.d.ts b/types/utils.d.ts
index 91b893133..0f0e11eed 100644
--- a/types/utils.d.ts
+++ b/types/utils.d.ts
@@ -1 +1,2 @@
+/** 提取Promise返回值 */
 type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
diff --git a/vue.config.js b/vue.config.js
index 89680d610..9caef5904 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -135,6 +135,14 @@ module.exports = defineConfig({
           },
         },
       });
+      config.cache({
+        // 将缓存类型设置为文件系统,默认是memory
+        type: 'filesystem',
+        buildDependencies: {
+          // 更改配置文件时，重新缓存
+          config: [__filename],
+        },
+      });
       // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
       config.optimization.runtimeChunk('single');
     });
@@ -144,7 +152,6 @@ module.exports = defineConfig({
     config.experiments = {
       topLevelAwait: true,
     };
-
     config.resolve.fallback = { path: require.resolve('path-browserify') };
 
     if (IS_PROD) {