Web/src/views/main/_layout/content.vue

@@ -0,0 +1,108 @@
+<template>
+  <a-layout-content>
+    <a-tabs @change="onChange" @edit="onClose" hide-add type="editable-card" v-model="actived">
+      <a-tab-pane
+        :closable="pane.closable"
+        :forceRender="true"
+        :key="pane.key"
+        v-for="pane in panes"
+      >
+        <a-dropdown :trigger="['contextmenu']" slot="tab">
+          <div>
+            <a-icon :type="pane.icon" v-if="pane.icon" />
+            {{ pane.title }}
+          </div>
+          <a-menu slot="overlay">
+            <template v-if="mode === 'development'">
+              <a-menu-item @click="onCopyComponent(pane)" key="-1">
+                复制组件地址
+                <a-tag color="red">dev</a-tag>
+              </a-menu-item>
+              <a-menu-divider />
+            </template>
+            <a-menu-item @click="onLoadContentWindow(pane.key)" key="0">重新加载</a-menu-item>
+            <a-menu-divider />
+            <a-menu-item :disabled="!pane.closable" @click="$emit('close', pane.key);" key="1">关闭</a-menu-item>
+            <a-menu-item @click="$emit('close-other', pane.key)" key="2">关闭其他标签页</a-menu-item>
+            <a-menu-item @click="$emit('close-right', pane.key)" key="3">关闭右侧标签页</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+        <component :is="pane.component" :key="pane.key" v-if="pane.loaded" />
+      </a-tab-pane>
+    </a-tabs>
+  </a-layout-content>
+</template>
+<script>
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+NProgress.configure({ parent: '.ant-layout-content > .ant-tabs > .ant-tabs-content' });
+
+export default {
+  props: {
+    panes: {
+      type: Array,
+    },
+    tabActived: {
+      type: [String, Number],
+    },
+  },
+  data() {
+    return {
+      mode: process.env.VUE_APP_NODE_ENV,
+      actived: '',
+    };
+  },
+  watch: {
+    tabActived() {
+      if (this.tabActived !== this.actived) {
+        this.actived = this.tabActived;
+      }
+    },
+  },
+  created() {
+    this.actived = this.tabActived;
+  },
+  methods: {
+    onLoadContentWindow(key) {
+      NProgress.start();
+      const pane = this.panes.find((p) => p.key === key);
+      const i = import(`@/pages${pane.path}`);
+      pane.component = () => i;
+      pane.loaded = false;
+      i.then(() => {
+        pane.loaded = true;
+        NProgress.done();
+      }).catch(() => {
+        pane.component = () => import('@/views/error/404');
+        pane.loaded = true;
+        NProgress.done();
+      });
+    },
+    onClose(targetKey, action) {
+      if (action === 'remove') {
+        this.$emit('close', targetKey);
+      }
+    },
+    onChange(activeKey) {
+      this.$emit('change', activeKey);
+    },
+
+    onCopyComponent(pane) {
+      try {
+        const copy = document.createElement('textarea');
+        document.body.append(copy);
+        copy.value = `/pages${pane.path}`;
+        copy.select();
+        setTimeout(() => {
+          document.execCommand('copy');
+          copy.remove();
+          this.$message.success('已复制到剪切板');
+        });
+      } catch {
+        this.$message.error('复制错误');
+      }
+    },
+  },
+};
+</script>