feat: 增加dify功能

1.  增加 dify 的 /app 和 /_next 代理，允许跨域请求
2. 增加 dify 的路由  /dify
3.  增加 dify 的可以隐藏侧边栏和导航栏

src/router/generatedRouter/index.js

@@ -135,6 +135,28 @@ export default [
             }
           }
         ]
+      },
+    ]
+  },
+  {
+    path: '/dify',
+    name: 'dify',
+    component: layout,
+    redirect: '/dify/workflow',
+    meta: {
+      title: 'Dify',
+      icon: 'el-icon-home',
+      affix: true
+    },
+    children: [
+      {
+        path: '/dify/workflow',
+        name: 'dify-workflow',
+        component: () => import('@/views/dify/views/workflow/index.vue'),
+        meta: {
+          title: 'Dify',
+          icon: 'el-icon-home'
+        }
       }
     ]
   }

src/views/dify/index.vue

@@ -0,0 +1,21 @@
+<script>
+
+export default {
+  name: 'dify',
+  data() {
+    return {
+      dify: {
+        src: '/dify'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/dify/views/workflow/index.vue

@@ -0,0 +1,72 @@
+<script>
+import { computed } from 'vue'
+
+export default {
+  name: 'workflow',
+  data() {
+    return {
+      dify: {
+        // 默认不展示 header 和 sidebar
+        params: {
+          sidebar: '0',
+          header: '0'
+        },
+        isVisible: false,
+        // dify 的 workflow 地址格式 http://localhost:3000/dify/app/235427ea-803b-482b-bdff-dd717801ca76/workflow
+        //  app 是展示所有的内容
+        src: `/`
+      }
+    }
+  },
+  computed: {
+    params() {
+      const _params = []
+      Object.keys(this.dify.params).forEach(key => {
+        _params.push(`${key}=${this.dify.params[key]}`)
+      })
+      return _params.join('&')
+    }
+  },
+  // http://192.168.3.229:3000/apps
+  created() {
+    // 检测是否存在 workflow id ， 如果不存在则不展示内容
+    const { id, header, sidebar } = this.$route.query
+    if (id) {
+      this.dify.src = `/app/${id}/workflow?${this.params}`
+      this.dify.isVisible = true
+    }
+
+    // 获取 header 和 sidebar 的内容, 重置参数状态
+    this.dify.params.header = header || '0'
+    this.dify.params.sidebar = sidebar || '0'
+  },
+  watch: {
+    '$route.query': {
+      handler() {
+        // 获取 header 和 sidebar 的内容, 重置参数状态
+        const { id, header, sidebar } = this.$route.query
+        this.dify.params.header = header || '0'
+        this.dify.params.sidebar = sidebar || '0'
+
+        // 当路由参数 id 变化时，更新 dify 的 src
+        if (id) {
+          this.dify.src = `/app/${id}/workflow?${this.params}`
+          this.dify.isVisible = true
+        } else {
+          this.dify.isVisible = false
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <el-card :body-style="{ padding: 0 }" shadow="hover">
+      <iframe v-if="dify.isVisible" ref="dify" :src="dify.src" frameborder="0" style="width: 100%; height: 85vh;" />
+      <el-empty v-else />
+    </el-card>
+  </div>
+</template>

vue.config.js

@@ -34,6 +34,28 @@ module.exports = {
       errors: true
     },
     proxy: {
+      '/app': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        onProxyRes: (proxyRes, req, res) => {
+          delete proxyRes.headers['x-frame-options'];
+        },
+        pathRewrite: {
+          // '^/app': '/'
+        },
+        logLevel: 'debug'
+      },
+      '/_next': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        onProxyRes: (proxyRes, req, res) => {
+          delete proxyRes.headers['x-frame-options'];
+        },
+        pathRewrite: {
+          // '^/_next': '/'
+        },
+        logLevel: 'debug'
+      },
       '/api': {
         target: process.env.VUE_APP_ADMIN,
         changeOrigin: true,