Skip to content

F
flow
Commit 237d7019 authored by zhangwei's avatar zhangwei
Browse files
Options

Initial commit

parents
Pipeline #41 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 1945 additions and 0 deletions
      .editorconfig 0 → 100644
      View file @ 237d7019
      [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
      charset = utf-8
      indent_size = 2
      indent_style = space
      insert_final_newline = true
      trim_trailing_whitespace = true
      end_of_line = lf
      max_line_length = 100
      .gitattributes 0 → 100644
      View file @ 237d7019
      * text=auto eol=lf
      .gitignore 0 → 100644
      View file @ 237d7019
      # Logs
      logs
      *.log
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      pnpm-debug.log*
      lerna-debug.log*
      node_modules
      .DS_Store
      dist
      dist-ssr
      coverage
      *.local
      /cypress/videos/
      /cypress/screenshots/
      # Editor directories and files
      .vscode/*
      !.vscode/extensions.json
      .idea
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw?
      *.tsbuildinfo
      .prettierrc.json 0 → 100644
      View file @ 237d7019
      {
      "$schema": "https://json.schemastore.org/prettierrc",
      "semi": false,
      "singleQuote": true,
      "printWidth": 100
      }
      .vscode/extensions.json 0 → 100644
      View file @ 237d7019
      {
      "recommendations": [
      "Vue.volar",
      "dbaeumer.vscode-eslint",
      "EditorConfig.EditorConfig",
      "esbenp.prettier-vscode"
      ]
      }
      README.md 0 → 100644
      View file @ 237d7019
      # vue-project
      This template should help get you started developing with Vue 3 in Vite.
      ## Recommended IDE Setup
      [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
      ## Customize configuration
      See [Vite Configuration Reference](https://vite.dev/config/).
      ## Project Setup
      ```sh
      npm install
      ```
      ### Compile and Hot-Reload for Development
      ```sh
      npm run dev
      ```
      ### Compile and Minify for Production
      ```sh
      npm run build
      ```
      ### Lint with [ESLint](https://eslint.org/)
      ```sh
      npm run lint
      ```
      dist.7z 0 → 100644
      View file @ 237d7019
      File added
      eslint.config.js 0 → 100644
      View file @ 237d7019
      import js from '@eslint/js'
      import pluginVue from 'eslint-plugin-vue'
      import globals from 'globals'
      import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
      export default [
      {
      name: 'app/files-to-lint',
      files: ['**/*.{js,mjs,jsx,vue}'],
      },
      {
      name: 'app/files-to-ignore',
      ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
      },
      {
      languageOptions: {
      globals: {
      ...globals.browser,
      },
      },
      },
      js.configs.recommended,
      ...pluginVue.configs['flat/essential'],
      skipFormatting,
      ]
      index.html 0 → 100644
      View file @ 237d7019
      <!DOCTYPE html>
      <html lang="">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>流程编辑器</title>
      <link rel="icon" href="./favicon.ico" />
      </head>
      <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
      </body>
      </html>
      \ No newline at end of file
      jsconfig.json 0 → 100644
      View file @ 237d7019
      {
      "compilerOptions": {
      "paths": {
      "@/*": ["./src/*"]
      }
      },
      "exclude": ["node_modules", "dist"]
      }
      package-lock.json 0 → 100644
      View file @ 237d7019
      This diff is collapsed.
      package.json 0 → 100644
      View file @ 237d7019
      {
      "name": "vue-project",
      "version": "0.0.0",
      "private": true,
      "type": "module",
      "scripts": {
      "dev": "vite",
      "build": "vite build",
      "preview": "vite preview",
      "lint": "eslint . --fix",
      "format": "prettier --write src/"
      },
      "dependencies": {
      "@antv/x6": "^2.18.1",
      "@antv/x6-plugin-clipboard": "^2.1.6",
      "@antv/x6-plugin-history": "^2.2.4",
      "@antv/x6-plugin-keyboard": "^2.2.3",
      "@antv/x6-plugin-selection": "^2.2.2",
      "@antv/x6-plugin-snapline": "^2.1.7",
      "@antv/x6-plugin-stencil": "^2.1.5",
      "@antv/x6-plugin-transform": "^2.1.8",
      "@antv/x6-vue-shape": "^2.1.2",
      "axios": "^1.8.3",
      "element-plus": "^2.9.6",
      "pinia": "^3.0.1",
      "vue": "^3.5.13",
      "vue-router": "^4.5.0"
      },
      "devDependencies": {
      "@babel/core": "^7.26.10",
      "@babel/preset-env": "^7.26.9",
      "@eslint/js": "^9.21.0",
      "@vitejs/plugin-legacy": "^6.0.2",
      "@vitejs/plugin-vue": "^5.2.1",
      "@vue/eslint-config-prettier": "^10.2.0",
      "eslint": "^9.21.0",
      "eslint-plugin-vue": "~10.0.0",
      "globals": "^16.0.0",
      "prettier": "3.5.3",
      "sass-embedded": "^1.85.1",
      "vite": "^6.2.1",
      "vite-plugin-vue-devtools": "^7.7.2"
      }
      }
      src/App.vue 0 → 100644
      View file @ 237d7019
      <script setup>
      import { RouterView } from 'vue-router'
      </script>
      <template>
      <RouterView />
      </template>
      <style scoped></style>
      src/api/flow.js 0 → 100644
      View file @ 237d7019
      import request from '@/utils/request'
      export function fetchFlow(query) {
      return request({
      url: '/dx_server_web_war_exploded/api/process/wfw/graphic/detail/a740944e-eb76-45fa-ac19-720981971a6e',
      method: 'get',
      params: query,
      })
      }
      export function flowSave(data) {
      return request({
      url: '/dx_server_web_war_exploded/api/process/wfw/graphic/save',
      method: 'post',
      data: data,
      })
      }
      src/assets/base.css 0 → 100644
      View file @ 237d7019
      /* color palette from <https://github.com/vuejs/theme> */
      :root {
      --vt-c-white: #ffffff;
      --vt-c-white-soft: #f8f8f8;
      --vt-c-white-mute: #f2f2f2;
      --vt-c-black: #181818;
      --vt-c-black-soft: #222222;
      --vt-c-black-mute: #282828;
      --vt-c-indigo: #2c3e50;
      --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
      --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
      --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
      --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
      --vt-c-text-light-1: var(--vt-c-indigo);
      --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
      --vt-c-text-dark-1: var(--vt-c-white);
      --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
      }
      /* semantic color variables for this project */
      :root {
      --color-background: var(--vt-c-white);
      --color-background-soft: var(--vt-c-white-soft);
      --color-background-mute: var(--vt-c-white-mute);
      --color-border: var(--vt-c-divider-light-2);
      --color-border-hover: var(--vt-c-divider-light-1);
      --color-heading: var(--vt-c-text-light-1);
      --color-text: var(--vt-c-text-light-1);
      --section-gap: 160px;
      }
      @media (prefers-color-scheme: dark) {
      :root {
      --color-background: var(--vt-c-black);
      --color-background-soft: var(--vt-c-black-soft);
      --color-background-mute: var(--vt-c-black-mute);
      --color-border: var(--vt-c-divider-dark-2);
      --color-border-hover: var(--vt-c-divider-dark-1);
      --color-heading: var(--vt-c-text-dark-1);
      --color-text: var(--vt-c-text-dark-2);
      }
      }
      *,
      *::before,
      *::after {
      box-sizing: border-box;
      margin: 0;
      font-weight: normal;
      }
      body {
      width: 100%;
      height: 100%;
      color: var(--color-text);
      background: var(--color-background);
      transition:
      color 0.5s,
      background-color 0.5s;
      line-height: 1.6;
      font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Fira Sans',
      'Droid Sans',
      'Helvetica Neue',
      sans-serif;
      font-size: 15px;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      user-select: none;
      }
      src/assets/logo.svg 0 → 100644
      View file @ 237d7019
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
      src/assets/main.css 0 → 100644
      View file @ 237d7019
      @import './base.css';
      #app {
      width: 100%;
      height: 100vh;
      }
      src/components/HelloWorld.vue 0 → 100644
      View file @ 237d7019
      <script setup>
      defineProps({
      msg: {
      type: String,
      required: true,
      },
      })
      </script>
      <template>
      <div class="greetings">
      <h1 class="green">{{ msg }}</h1>
      </div>
      </template>
      <style scoped></style>
      src/components/TheWelcome.vue 0 → 100644
      View file @ 237d7019
      <script setup>
      import WelcomeItem from './WelcomeItem.vue'
      import DocumentationIcon from './icons/IconDocumentation.vue'
      import ToolingIcon from './icons/IconTooling.vue'
      import EcosystemIcon from './icons/IconEcosystem.vue'
      import CommunityIcon from './icons/IconCommunity.vue'
      import SupportIcon from './icons/IconSupport.vue'
      const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
      </script>
      <template>
      <WelcomeItem>
      <template #icon>
      <DocumentationIcon />
      </template>
      <template #heading>Documentation</template>
      Vue’s
      <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
      provides you with all information you need to get started.
      </WelcomeItem>
      <WelcomeItem>
      <template #icon>
      <ToolingIcon />
      </template>
      <template #heading>Tooling</template>
      This project is served and bundled with
      <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
      recommended IDE setup is
      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
      +
      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
      you need to test your components and web pages, check out
      <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
      and
      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
      /
      <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
      <br />
      More instructions are available in
      <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
      >.
      </WelcomeItem>
      <WelcomeItem>
      <template #icon>
      <EcosystemIcon />
      </template>
      <template #heading>Ecosystem</template>
      Get official tools and libraries for your project:
      <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
      <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
      you need more resources, we suggest paying
      <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
      a visit.
      </WelcomeItem>
      <WelcomeItem>
      <template #icon>
      <CommunityIcon />
      </template>
      <template #heading>Community</template>
      Got stuck? Ask your question on
      <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
      (our official Discord server), or
      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
      >StackOverflow</a
      >. You should also follow the official
      <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
      Bluesky account or the
      <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
      X account for latest news in the Vue world.
      </WelcomeItem>
      <WelcomeItem>
      <template #icon>
      <SupportIcon />
      </template>
      <template #heading>Support Vue</template>
      As an independent project, Vue relies on community backing for its sustainability. You can help
      us by
      <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
      </WelcomeItem>
      </template>
      src/components/WelcomeItem.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div class="item">
      <i>
      <slot name="icon"></slot>
      </i>
      <div class="details">
      <h3>
      <slot name="heading"></slot>
      </h3>
      <slot></slot>
      </div>
      </div>
      </template>
      <style scoped>
      .item {
      margin-top: 2rem;
      display: flex;
      position: relative;
      }
      .details {
      flex: 1;
      margin-left: 1rem;
      }
      i {
      display: flex;
      place-items: center;
      place-content: center;
      width: 32px;
      height: 32px;
      color: var(--color-text);
      }
      h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 0.4rem;
      color: var(--color-heading);
      }
      @media (min-width: 1024px) {
      .item {
      margin-top: 0;
      padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
      }
      i {
      top: calc(50% - 25px);
      left: -26px;
      position: absolute;
      border: 1px solid var(--color-border);
      background: var(--color-background);
      border-radius: 8px;
      width: 50px;
      height: 50px;
      }
      .item:before {
      content: ' ';
      border-left: 1px solid var(--color-border);
      position: absolute;
      left: 0;
      bottom: calc(50% + 25px);
      height: calc(50% - 25px);
      }
      .item:after {
      content: ' ';
      border-left: 1px solid var(--color-border);
      position: absolute;
      left: 0;
      top: calc(50% + 25px);
      height: calc(50% - 25px);
      }
      .item:first-of-type:before {
      display: none;
      }
      .item:last-of-type:after {
      display: none;
      }
      }
      </style>
      src/components/flow/FlowChart.vue 0 → 100644
      View file @ 237d7019
      This diff is collapsed.
      src/components/flow/components/AttrbutePanel.vue 0 → 100644
      View file @ 237d7019
      <template>
      <el-drawer
      @close="onClose"
      :size="300"
      v-model="visible"
      :modal="false"
      modal-class="abc"
      :direction="direction"
      >
      <template #header>
      <h3>属性设置</h3>
      </template>
      <template #default>
      <el-form :model="form" label-width="60px">
      <el-form-item label="宽度">
      <el-input v-model="form.width" />
      </el-form-item>
      <el-form-item label="高度">
      <el-input v-model="form.height" />
      </el-form-item>
      <el-form-item label="背景色">
      <el-color-picker v-model="form.bgColor" />
      </el-form-item>
      </el-form>
      </template>
      <template #footer>
      <div style="flex: auto">
      <el-button>取消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      </div>
      </template>
      </el-drawer>
      </template>
      <script setup>
      import { ref, reactive, watchEffect } from 'vue'
      const direction = ref('rtl')
      const visible = defineModel()
      const props = defineProps({
      node: {
      type: Object,
      default: () => {},
      },
      })
      const form = reactive({
      width: null,
      height: null,
      bgColor: '',
      })
      watchEffect(() => {
      try {
      form.width = props.node.size.width
      form.height = props.node.size.height
      form.bgColor = props.node.attrs.body.fill
      } catch (error) {}
      })
      const emits = defineEmits(['submit'])
      const onSubmit = () => {
      emits('submit', form)
      }
      const onClose = () => {
      form.width = null
      form.height = null
      }
      </script>
      <style lang="scss" scoped></style>
      src/components/flow/components/ComNode.vue 0 → 100644
      View file @ 237d7019
      <template>
      <el-tooltip :visible="visible" effect="light" content="2025-12-12" placement="left">
      <div
      class="button-container"
      :style="{
      backgroundImage: `linear-gradient(to bottom,${buttonBgColor[0]}, ${buttonBgColor[1]})`,
      borderColor: buttonBorderColor,
      }"
      >
      <div class="button-icon">
      <img :src="buttonIcon" alt="" />
      </div>
      <div class="button-label" :style="{ backgroundColor: buttonLabelBgColor }">
      {{ buttonLabel }}
      </div>
      </div>
      </el-tooltip>
      </template>
      <script setup>
      import { ElTooltip } from 'element-plus'
      import { ref, shallowRef } from 'vue'
      import { inject, onMounted } from 'vue'
      import File from '@/assets/icons/file.png'
      import Database from '@/assets/icons/database.png'
      import Api from '@/assets/icons/api.png'
      import Field from '@/assets/icons/field.png'
      let visible = ref(false)
      const buttonIcon = shallowRef(null)
      const buttonLabel = shallowRef('')
      const buttonBgColor = shallowRef([])
      const buttonBorderColor = shallowRef('')
      const buttonLabelBgColor = shallowRef('')
      const getNode = inject('getNode')
      function generateIcon(icon) {
      if (icon == 'document') return File
      if (icon == 'database') return Database
      if (icon == 'api') return Api
      if (icon == 'field') return Field
      }
      function generateNode(data) {
      const { icon, label, bgColor, borderColor, labelBgColor, date } = data
      return { icon: generateIcon(icon), label, bgColor, borderColor, labelBgColor, date }
      }
      onMounted(() => {
      const node = getNode()
      const { icon, label, bgColor, borderColor, labelBgColor, date } = generateNode(node.data)
      buttonIcon.value = icon
      buttonLabel.value = label
      buttonBgColor.value = bgColor
      buttonBorderColor.value = borderColor
      buttonLabelBgColor.value = labelBgColor
      visible.value = date ? true : false
      })
      </script>
      <style lang="scss" scoped>
      .button-container {
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      border-width: 1px;
      border-style: solid;
      .button-icon,
      .button-label {
      display: flex;
      align-items: center;
      }
      .button-icon {
      width: 30px;
      justify-content: center;
      color: #fff;
      }
      .button-label {
      flex: 1;
      color: #646f80;
      justify-content: start;
      padding: 0 5px;
      }
      }
      </style>
      src/components/flow/components/StartEndNode.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div class="button-con">
      <img :src="buttonIcon" alt="" />
      <span>{{ buttonLabel }}</span>
      </div>
      </template>
      <script setup>
      import { shallowRef, inject, onMounted } from 'vue'
      import Start from '@/assets/icons/start.png'
      import End from '@/assets/icons/end.png'
      const buttonIcon = shallowRef(null)
      const buttonLabel = shallowRef('')
      const getNode = inject('getNode')
      function generateIcon(icon) {
      if (icon == 'start') return Start
      if (icon == 'end') return End
      }
      function generateNode(data) {
      const { icon, label, bgColor, borderColor, labelBgColor } = data
      return { icon: generateIcon(icon), label, bgColor, borderColor, labelBgColor }
      }
      onMounted(() => {
      const node = getNode()
      const { icon, label } = generateNode(node.data)
      buttonIcon.value = icon
      buttonLabel.value = label
      })
      </script>
      <style lang="scss" scoped>
      .button-con {
      background-color: #2a6bd9;
      height: 100%;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 14px;
      img {
      margin-right: 5px;
      }
      }
      </style>
      src/components/flow/components/Stencil.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div></div>
      </template>
      <script setup></script>
      <style lang="scss" scoped></style>
      src/components/icons/IconCommunity.vue 0 → 100644
      View file @ 237d7019
      <template>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
      <path
      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
      />
      </svg>
      </template>
      src/components/icons/IconDocumentation.vue 0 → 100644
      View file @ 237d7019
      <template>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
      <path
      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
      />
      </svg>
      </template>
      src/components/icons/IconEcosystem.vue 0 → 100644
      View file @ 237d7019
      <template>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
      <path
      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
      />
      </svg>
      </template>
      src/components/icons/IconSupport.vue 0 → 100644
      View file @ 237d7019
      <template>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
      <path
      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
      />
      </svg>
      </template>
      src/components/icons/IconTooling.vue 0 → 100644
      View file @ 237d7019
      <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
      <template>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      aria-hidden="true"
      role="img"
      class="iconify iconify--mdi"
      width="24"
      height="24"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 24 24"
      >
      <path
      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
      fill="currentColor"
      ></path>
      </svg>
      </template>
      src/main.js 0 → 100644
      View file @ 237d7019
      import './assets/main.css'
      import { createApp } from 'vue'
      import { createPinia } from 'pinia'
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      import App from './App.vue'
      import router from './router'
      // 如果您正在使用CDN引入，请删除下面一行。
      import * as ElementPlusIconsVue from '@element-plus/icons-vue'
      const app = createApp(App)
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
      }
      app.use(createPinia())
      app.use(router)
      app.use(ElementPlus)
      app.mount('#app')
      src/router/index.js 0 → 100644
      View file @ 237d7019
      import { createRouter, createWebHistory } from 'vue-router'
      const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: [
      {
      path: '/',
      name: 'home',
      redirect: '/process/index',
      },
      {
      path: '/process',
      name: 'Flow',
      redirect: '/process/index',
      children: [
      {
      path: 'index',
      name: 'ProcessIndex',
      component: () => import('@/views/Flow/process/index.vue'),
      },
      ],
      },
      {
      path: '/approve',
      name: 'Approve',
      redirect: '/approve/index',
      children: [
      {
      path: 'index',
      name: 'ApproveIndex',
      component: () => import('@/views/Flow/approve/index.vue'),
      },
      ],
      },
      ],
      })
      export default router
      src/stores/counter.js 0 → 100644
      View file @ 237d7019
      import { ref, computed } from 'vue'
      import { defineStore } from 'pinia'
      export const useCounterStore = defineStore('counter', () => {
      const count = ref(0)
      const doubleCount = computed(() => count.value * 2)
      function increment() {
      count.value++
      }
      return { count, doubleCount, increment }
      })
      src/utils/request.js 0 → 100644
      View file @ 237d7019
      import axios from 'axios'
      const service = axios.create({
      withCredentials: true,
      timeout: 5000,
      })
      service.interceptors.request.use(
      (config) => {
      // config.headers['nssoticket'] = 'system-a6c1d3f4-038b-4a04-9e13-c6b227e77715'
      return config
      },
      (error) => {
      console.log(error)
      return Promise.reject(error)
      },
      )
      service.interceptors.response.use(
      (response) => {
      const res = response.data
      if (res.code !== 200) {
      return Promise.reject(new Error(res.message || 'Error'))
      } else {
      return res
      }
      },
      (error) => {
      console.log('err' + error)
      return Promise.reject(error)
      },
      )
      export default service
      src/views/AboutView.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div class="about">
      <h1>This is an about page</h1>
      </div>
      </template>
      <style>
      @media (min-width: 1024px) {
      .about {
      min-height: 100vh;
      display: flex;
      align-items: center;
      }
      }
      </style>
      src/views/Flow/approve/index.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div ref="flow" class="content-container">
      <div class="stencil-container" ref="stencilRef"></div>
      <div class="graph-container" ref="graphRef"></div>
      <div class="tools-container">
      <el-button type="primary" @click="handleSave" size="large" color="#235DC8">
      <el-space>
      <el-icon><Files /></el-icon><span>保存 Ctrl+S</span>
      </el-space>
      </el-button>
      <el-button type="primary" size="large" color="#235DC8">
      <el-space>
      <el-icon><WindPower /></el-icon><span>测试</span>
      </el-space>
      </el-button>
      <el-button type="primary" size="large" color="#235DC8">
      <el-space>
      <el-icon><VideoPlay /></el-icon><span>执行</span>
      </el-space>
      </el-button>
      </div>
      <AttrbutePanel v-show="attributeVisible" @close="handleAttrPanelClose">
      <template #title>
      <span>节点-选择审批人</span>
      </template>
      <StaffTree />
      </AttrbutePanel>
      </div>
      </template>
      <script setup>
      import { onMounted, ref } from 'vue'
      import AttrbutePanel from '../components/AttrbutePanel.vue'
      import StaffTree from '../components/StaffTree.vue'
      import { fetchFlow, flowSave } from '@/api/flow'
      import { useGraph } from '../hooks/use-graph'
      import { usePortsConfig } from '../hooks/use-ports-config'
      import { useStencil } from '../hooks/use-stencil'
      import { usePortsEvent } from '../hooks/use-ports-event'
      import { useVueRegister } from '../hooks/use-vue-register'
      import { useHotKey } from '../hooks/use-hot-key'
      import { useStencilGroup } from '../hooks/use-stencil-groups'
      let graph = null
      let stencil = null
      let portsCfg = null
      const stencilRef = ref(null)
      const graphRef = ref(null)
      const attributeVisible = ref(false)
      const stencilList = [
      {
      title: '组件列表',
      children: [
      { shape: 'common-node', icon: 'start', text: '开始', className: 'start' },
      { shape: 'common-node', icon: 'end', text: '结束', className: 'end' },
      { shape: 'common-node', label: '发起人', className: 'promoter' },
      { shape: 'common-node', label: '审批人', className: 'approver' },
      { shape: 'common-node', label: '条件', className: 'condition' },
      ],
      },
      ]
      function handleSave() {
      // fetchFlow()
      // graph.fromJSON(flowData)
      // console.log('result: ', result.cells)
      // flowSave()
      }
      function handleAttrSave(option) {
      // currentNode.value.prop('size', { width: +option.width, height: +option.height })
      // currentNode.value.attr('body/fill', option.bgColor)
      // visible.value = false
      }
      function handleAttrPanelClose() {
      attributeVisible.value = false
      }
      onMounted(() => {
      portsCfg = usePortsConfig()
      graph = useGraph({ container: graphRef.value })
      graph.on('node:click', ({ e, x, y, node, view }) => {
      attributeVisible.value = true
      })
      useVueRegister()
      useHotKey(graph)
      stencil = useStencil({ target: graph })
      useStencilGroup(stencil, portsCfg, stencilList)
      stencilRef.value.appendChild(stencil.container)
      usePortsEvent(graph, graphRef.value)
      })
      </script>
      <style lang="scss" scoped>
      .content-container {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
      .stencil-container {
      width: 320px;
      position: relative;
      :deep(.x6-widget-stencil-title),
      :deep(.x6-widget-stencil-content),
      :deep(.x6-widget-stencil-group > .x6-widget-stencil-group-title),
      :deep(.x6-graph-svg) {
      background-color: #fff;
      }
      :deep(.x6-widget-stencil-content) {
      top: 32px;
      }
      }
      .graph-container {
      flex: 1;
      height: 100% !important;
      background-color: #f1f1f1;
      }
      }
      .tools-container {
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      padding: 20px;
      text-align: right;
      }
      .attribute-panel {
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 0;
      width: 400px;
      padding: 20px;
      .attribute-container {
      background-color: #fff;
      height: 100%;
      overflow: auto;
      padding: 20px;
      .attribute-container-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;
      .close {
      cursor: pointer;
      }
      }
      }
      }
      .button-block {
      :deep(.el-button) {
      display: block;
      width: 100%;
      }
      }
      </style>
      src/views/Flow/components/AttrbutePanel.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div class="attribute-panel">
      <div class="attribute-container">
      <div class="attribute-container-title">
      <slot name="title">
      <span>标题</span>
      </slot>
      <div class="close" @click="handleAttrPanelClose">
      <el-icon><Close /></el-icon>
      </div>
      </div>
      <slot></slot>
      <el-row :gutter="10" class="button-block">
      <el-col :span="12">
      <el-button color="#235DC8" type="primary" plain>重置</el-button>
      </el-col>
      <el-col :span="12"><el-button color="#235DC8" type="primary">保存</el-button></el-col>
      </el-row>
      </div>
      </div>
      </template>
      <script setup>
      const emits = defineEmits(['close'])
      function handleAttrPanelClose() {
      emits('close')
      }
      </script>
      <style lang="scss" scoped>
      .attribute-panel {
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 0;
      width: 400px;
      padding: 20px;
      .attribute-container {
      background-color: #fff;
      height: 100%;
      overflow: auto;
      padding: 20px;
      .attribute-container-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;
      .close {
      cursor: pointer;
      }
      }
      }
      }
      .button-block {
      position: absolute;
      padding: 20px;
      bottom: 20px;
      left: 20px;
      right: 20px;
      :deep(.el-button) {
      display: block;
      width: 100%;
      }
      }
      </style>
      src/views/Flow/components/ComNode.vue 0 → 100644
      View file @ 237d7019
      <template>
      <el-tooltip :visible="visible" effect="light" content="2025-12-12 09:58:06" placement="left">
      <div class="button-container" :class="buttonClassName">
      <div class="button-icon" v-if="buttonIcon">
      <img :src="buttonIcon" alt="" />
      </div>
      <div class="button-label" v-if="buttonLabel">{{ buttonLabel }}</div>
      <div class="button-text">
      {{ buttonText }}
      </div>
      </div>
      </el-tooltip>
      </template>
      <script setup>
      import { ElTooltip } from 'element-plus'
      import { ref, shallowRef } from 'vue'
      import { inject } from 'vue'
      let visible = ref(false)
      const buttonClassName = ref('default')
      const buttonIcon = shallowRef(null)
      const buttonLabel = shallowRef('')
      const buttonText = shallowRef('')
      const getNode = inject('getNode')
      const node = getNode()
      const { icon, label, text, className } = node.data
      buttonIcon.value = icon && new URL(`../../../assets/icons/${icon}.png`, import.meta.url).href
      buttonLabel.value = label
      buttonText.value = text
      buttonClassName.value = className
      </script>
      <style lang="scss" scoped>
      .button-container {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      border-width: 1px;
      border-style: solid;
      overflow: hidden;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      .button-icon,
      .button-label,
      .button-text {
      display: flex;
      align-items: center;
      }
      .button-icon {
      width: 30px;
      justify-content: center;
      color: #fff;
      }
      .button-label {
      width: 50px;
      color: #fff;
      justify-content: center;
      font-size: 12px;
      }
      .button-text {
      flex: 1;
      color: #646f80;
      justify-content: start;
      padding: 0 5px;
      white-space: nowrap;
      }
      }
      .button-container {
      &.input {
      background-image: linear-gradient(to bottom, #b9c9ff, #3666bb);
      border-color: #92aceb;
      .button-text {
      background-color: #e3ecff;
      }
      }
      &.convert {
      background-image: linear-gradient(to bottom, #b9eeff, #0c75d6);
      border-color: #569fd9;
      .button-text {
      background-color: #edfcfb;
      }
      }
      &.output {
      background-image: linear-gradient(to bottom, #8cfad4, #14a2a7);
      border-color: #8aeeeb;
      .button-text {
      background-color: #edfcf9;
      }
      }
      &.function {
      background-image: linear-gradient(to bottom, #d5ffb9, #2fa45a);
      border-color: #2fa45a;
      .button-text {
      background-color: #edfcfb;
      }
      }
      &.secure {
      background-image: linear-gradient(to bottom, #cbb9ff, #5b62e4);
      border-color: #8488da;
      .button-text {
      background-color: #efedfc;
      }
      }
      &.start,
      &.end {
      justify-content: center;
      background-color: #2a6bd9;
      border-color: #2a6bd9;
      .button-text {
      // background-color: #efedfc;
      color: #fff;
      flex: 0;
      }
      }
      &.promoter {
      background-image: linear-gradient(135deg, #b9c9ff 2%, #3666bb);
      border-color: #aabef7;
      .button-text {
      background-color: #e3ecff;
      }
      }
      &.approver {
      background-image: linear-gradient(135deg, #ffaf7c 2%, #d65a0c);
      border-color: #ffaf7c;
      .button-text {
      background-color: #fff5e5;
      }
      }
      &.condition {
      border-radius: 17px;
      background-image: linear-gradient(135deg, #8cfad4 2%, #14a2a7);
      border-color: #a2edea;
      .button-text {
      background-color: #edfcf9;
      }
      }
      }
      </style>
      src/views/Flow/components/StaffTree.vue 0 → 100644
      View file @ 237d7019
      <template>
      <el-input v-model="filterText" placeholder="请输入姓名" style="margin-bottom: 20px" />
      <el-tree
      ref="treeRef"
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      show-checkbox
      />
      </template>
      <script setup>
      import { ref, watch } from 'vue'
      import { ElTree } from 'element-plus'
      const filterText = ref('')
      const treeRef = ref()
      const defaultProps = {
      children: 'children',
      label: 'label',
      }
      watch(filterText, (val) => {
      treeRef.value.filter(val)
      })
      const filterNode = (value, data) => {
      if (!value) return true
      return data.label.includes(value)
      }
      const data = [
      {
      id: 1,
      label: '部门名称一',
      children: [
      {
      id: 4,
      label: '人员1',
      },
      {
      id: 9,
      label: '人员2',
      },
      {
      id: 10,
      label: '人员3',
      },
      ],
      },
      {
      id: 2,
      label: '部门名称二',
      children: [
      {
      id: 5,
      label: '人员1',
      },
      {
      id: 6,
      label: '人员2',
      },
      ],
      },
      {
      id: 3,
      label: '部门名称三',
      children: [
      {
      id: 7,
      label: '人员1',
      },
      {
      id: 8,
      label: '人员2',
      },
      {
      id: 11,
      label: '人员3',
      },
      {
      id: 12,
      label: '人员4',
      },
      {
      id: 13,
      label: '人员5',
      },
      {
      id: 14,
      label: '人员6',
      },
      {
      id: 15,
      label: '人员7',
      },
      ],
      },
      ]
      </script>
      <style lang="scss" scoped></style>
      src/views/Flow/components/processUpload.vue 0 → 100644
      View file @ 237d7019
      <template>
      <el-upload drag action="/" multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
      将文件拖拽至该窗口 或 <em> 点击上传</em>
      <div class="el-upload__tip" style="color: #f36868">支持文件格式：xls、xlsx、sql、txt</div>
      </div>
      </el-upload>
      </template>
      <script setup></script>
      <style lang="scss" scoped></style>
      src/views/Flow/hooks/use-graph.js 0 → 100644
      View file @ 237d7019
      import { Graph, Shape } from '@antv/x6'
      export function useGraph({ container }) {
      const graph = new Graph({
      container,
      panning: true,
      grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
      {
      color: '#ECECEC', // 主网格线颜色
      thickness: 1, // 主网格线宽度
      },
      {
      color: '#ECECEC', // 次网格线颜色
      thickness: 1, // 次网格线宽度
      factor: 1, // 主次网格线间隔
      },
      ],
      },
      mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: 'ctrl',
      minScale: 0.5,
      maxScale: 3,
      },
      connecting: {
      router: 'manhattan',
      connector: {
      name: 'rounded',
      args: {
      radius: 8,
      },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      snap: {
      radius: 20,
      },
      createEdge() {
      return new Shape.Edge({
      attrs: {
      line: {
      stroke: '#A1A7B0',
      strokeWidth: 1,
      targetMarker: {
      name: 'block',
      width: 10,
      height: 6,
      },
      },
      },
      zIndex: 0,
      })
      },
      validateConnection({ targetMagnet }) {
      return !!targetMagnet
      },
      },
      highlighting: {
      magnetAdsorbed: {
      name: 'stroke',
      args: {
      attrs: {
      fill: '#5F95FF',
      stroke: '#5F95FF',
      },
      },
      },
      },
      })
      return graph
      }
      src/views/Flow/hooks/use-hot-key.js 0 → 100644
      View file @ 237d7019
      import { Transform } from '@antv/x6-plugin-transform'
      import { Selection } from '@antv/x6-plugin-selection'
      import { Snapline } from '@antv/x6-plugin-snapline'
      import { Keyboard } from '@antv/x6-plugin-keyboard'
      import { Clipboard } from '@antv/x6-plugin-clipboard'
      import { History } from '@antv/x6-plugin-history'
      export function useHotKey(graph) {
      // #region 使用插件
      graph
      .use(
      new Transform({
      resizing: false,
      rotating: false,
      }),
      )
      .use(
      new Selection({
      rubberband: true,
      showNodeSelectionBox: true,
      multiple: true,
      rubberEdge: true,
      rubberNode: true,
      modifiers: 'shift',
      }),
      )
      .use(new Snapline())
      .use(new Keyboard())
      .use(new Clipboard())
      .use(new History())
      // #endregion
      // #region 快捷键与事件
      graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
      graph.copy(cells)
      }
      return false
      })
      graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
      graph.cut(cells)
      }
      return false
      })
      graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 })
      graph.cleanSelection()
      graph.select(cells)
      }
      return false
      })
      // undo redo
      graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.canUndo()) {
      graph.undo()
      }
      return false
      })
      graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
      if (graph.canRedo()) {
      graph.redo()
      }
      return false
      })
      // select all
      graph.bindKey(['meta+a', 'ctrl+a'], () => {
      const nodes = graph.getNodes()
      if (nodes) {
      graph.select(nodes)
      }
      })
      // delete
      graph.bindKey('backspace', () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
      if (cells[0].shape == 'start-end-node') return
      graph.removeCells(cells)
      }
      })
      // zoom
      graph.bindKey(['ctrl+1', 'meta+1'], () => {
      const zoom = graph.zoom()
      if (zoom < 1.5) {
      graph.zoom(0.1)
      }
      })
      graph.bindKey(['ctrl+2', 'meta+2'], () => {
      const zoom = graph.zoom()
      if (zoom > 0.5) {
      graph.zoom(-0.1)
      }
      })
      }
      src/views/Flow/hooks/use-ports-config.js 0 → 100644
      View file @ 237d7019
      export function usePortsConfig() {
      return {
      groups: {
      top: {
      position: 'top',
      attrs: {
      circle: {
      r: 4,
      magnet: true,
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
      style: {
      visibility: 'hidden',
      },
      },
      },
      },
      right: {
      position: 'right',
      attrs: {
      circle: {
      r: 4,
      magnet: true,
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
      style: {
      visibility: 'hidden',
      },
      },
      },
      },
      bottom: {
      position: 'bottom',
      attrs: {
      circle: {
      r: 4,
      magnet: true,
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
      style: {
      visibility: 'hidden',
      },
      },
      },
      },
      left: {
      position: 'left',
      attrs: {
      circle: {
      r: 4,
      magnet: true,
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
      style: {
      visibility: 'hidden',
      },
      },
      },
      },
      },
      items: [
      {
      group: 'top',
      },
      {
      group: 'right',
      },
      {
      group: 'bottom',
      },
      {
      group: 'left',
      },
      ],
      }
      }
      src/views/Flow/hooks/use-ports-event.js 0 → 100644
      View file @ 237d7019
      export function usePortsEvent(graph, target) {
      const showPorts = (ports, show) => {
      for (let i = 0, len = ports.length; i < len; i += 1) {
      ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
      }
      graph.on('node:mouseenter', () => {
      const ports = target.querySelectorAll('.x6-port-body')
      showPorts(ports, true)
      })
      graph.on('node:mouseleave', () => {
      const ports = target.querySelectorAll('.x6-port-body')
      showPorts(ports, false)
      })
      }
      src/views/Flow/hooks/use-stencil-groups.js 0 → 100644
      View file @ 237d7019
      export function useStencilGroup(stencil, portsCfg, stencilList) {
      for (let i = 0; i < stencilList.length; i++) {
      let stencilGroupChildren = []
      const name = 'group' + i
      stencil.addGroup({
      title: stencilList[i].title,
      name,
      })
      for (let j = 0; j < stencilList[i].children.length; j++) {
      stencilGroupChildren.push({
      shape: stencilList[i].children[j].shape,
      ports: { ...portsCfg },
      data: { ...stencilList[i].children[j] },
      })
      }
      stencil.load(stencilGroupChildren, name)
      }
      }
      src/views/Flow/hooks/use-stencil.js 0 → 100644
      View file @ 237d7019
      import { Stencil } from '@antv/x6-plugin-stencil'
      export function useStencil(optCfg) {
      const defaultCfg = {
      title: '',
      target: '',
      stencilGraphWidth: 320,
      stencilGraphHeight: 0,
      collapsable: false,
      groups: [
      // {
      // title: '输入组件',
      // name: 'group1',
      // },
      // {
      // title: '转换组件',
      // name: 'group2',
      // },
      // {
      // title: '输出组件',
      // name: 'group3',
      // },
      // {
      // title: '功能组件',
      // name: 'group4',
      // },
      // {
      // title: '安全组件',
      // name: 'group5',
      // },
      ],
      layoutOptions: {
      columns: 2,
      columnWidth: 140,
      rowHeight: 40,
      },
      }
      const stencilCfg = Object.assign({}, defaultCfg, optCfg)
      const stencil = new Stencil(stencilCfg)
      return stencil
      }
      src/views/Flow/hooks/use-vue-register.js 0 → 100644
      View file @ 237d7019
      import { register } from '@antv/x6-vue-shape'
      import ComNode from '../components/ComNode.vue'
      export function useVueRegister() {
      register({
      shape: 'common-node',
      component: ComNode,
      width: 128,
      height: 34,
      })
      }
      src/views/Flow/process/index.vue 0 → 100644
      View file @ 237d7019
      <template>
      <div class="content-container">
      <div class="stencil-container" ref="stencilRef"></div>
      <div class="graph-container" ref="graphRef"></div>
      <div class="tools-container">
      <el-button type="primary" @click="handleSave" size="large" color="#235DC8">
      <el-space>
      <el-icon><Files /></el-icon><span>保存 Ctrl+S</span>
      </el-space>
      </el-button>
      <el-button type="primary" size="large" color="#235DC8">
      <el-space>
      <el-icon><WindPower /></el-icon><span>测试</span>
      </el-space>
      </el-button>
      <el-button type="primary" size="large" color="#235DC8">
      <el-space>
      <el-icon><VideoPlay /></el-icon><span>执行</span>
      </el-space>
      </el-button>
      </div>
      <AttrbutePanel v-show="attributeVisible" @close="handleAttrPanelClose">
      <template #title>
      <span>节点配置-文件输入</span>
      </template>
      <processUpload />
      </AttrbutePanel>
      </div>
      </template>
      <script setup>
      import { onMounted, ref } from 'vue'
      import AttrbutePanel from '../components/AttrbutePanel.vue'
      import processUpload from '../components/processUpload.vue'
      import { fetchFlow, flowSave } from '@/api/flow'
      import { useGraph } from '../hooks/use-graph'
      import { usePortsConfig } from '../hooks/use-ports-config'
      import { useStencil } from '../hooks/use-stencil'
      import { usePortsEvent } from '../hooks/use-ports-event'
      import { useVueRegister } from '../hooks/use-vue-register'
      import { useHotKey } from '../hooks/use-hot-key'
      import { useStencilGroup } from '../hooks/use-stencil-groups'
      let graph = null
      let stencil = null
      let portsCfg = null
      const stencilRef = ref(null)
      const graphRef = ref(null)
      const attributeVisible = ref(false)
      const stencilList = [
      {
      title: '初始组件',
      children: [
      { shape: 'common-node', icon: 'start', text: '开始', className: 'start' },
      { shape: 'common-node', icon: 'end', text: '结束', className: 'end' },
      ],
      },
      {
      title: '输入组件',
      children: [
      { shape: 'common-node', icon: 'file', text: '文件输入', className: 'input' },
      { shape: 'common-node', icon: 'database', text: '数据库输入', className: 'input' },
      { shape: 'common-node', icon: 'api', text: 'API输入', className: 'input' },
      ],
      },
      {
      title: '转换组件',
      children: [
      { shape: 'common-node', icon: 'field', text: '字段映射', className: 'convert' },
      { shape: 'common-node', icon: 'filter', text: '数据过滤', className: 'convert' },
      { shape: 'common-node', icon: 'convert', text: '数据转换', className: 'convert' },
      { shape: 'common-node', icon: 'sql', text: 'SQL脚本', className: 'convert' },
      { shape: 'common-node', icon: 'sql', text: 'Python脚本', className: 'convert' },
      { shape: 'common-node', icon: 'sql', text: 'Shell脚本', className: 'convert' },
      ],
      },
      {
      title: '输出组件',
      children: [
      { shape: 'common-node', icon: 'file-out', text: '文件输出', className: 'output' },
      { shape: 'common-node', icon: 'db-out', text: '数据库输出', className: 'output' },
      { shape: 'common-node', icon: 'api-out', text: 'API输出', className: 'output' },
      ],
      },
      {
      title: '功能组件',
      children: [
      { shape: 'common-node', icon: 'data-qc', text: '数据去重', className: 'function' },
      { shape: 'common-node', icon: 'data-concat', text: '数据合并', className: 'function' },
      { shape: 'common-node', icon: 'data-split', text: '数据拆分', className: 'function' },
      ],
      },
      {
      title: '安全组件',
      children: [
      { shape: 'common-node', icon: 'data-desen', text: '数据脱敏', className: 'secure' },
      { shape: 'common-node', icon: 'data-encry', text: '数据加密', className: 'secure' },
      ],
      },
      ]
      function handleSave() {
      const data1 = {
      id: '1',
      nodes: [
      { id: '1', name: '名称1', type: 1, model: 0 },
      { id: '2', name: '名称2', type: 1, model: 0, condition: ['{{days}}<=1'] },
      { id: '3', name: '名称3', type: 1, model: 0 },
      { id: '4', name: '名称4', type: 1, model: 0, condition: ['{{days}}>1'] },
      { id: '5', name: '名称5', type: 1, model: 0 },
      ],
      links: [
      { id: '1', name: '线1', from: '1', to: '2' },
      { id: '2', name: '线2', from: '1', to: '4' },
      { id: '3', name: '线3', from: '2', to: '3' },
      { id: '4', name: '线4', from: '2', to: '5' },
      { id: '5', name: '线5', from: '3', to: '5' },
      { id: '6', name: '线6', from: '3', to: '5' },
      { id: '7', name: '线7', from: '4', to: '5' },
      { id: '8', name: '线8', from: '4', to: '5' },
      ],
      }
      // fetchFlow()
      const result = graph.toJSON()
      console.log('result: ', result)
      // console.log('result: ', result.cells)
      // flowSave({
      // dm: 'a740944e-eb76-45fa-ac19-720981971a6e',
      // content: JSON.stringify(data1),
      // }).then((res) => {
      // console.log(res)
      // })
      }
      function handleAttrPanelClose() {
      attributeVisible.value = false
      }
      onMounted(() => {
      portsCfg = usePortsConfig()
      graph = useGraph({ container: graphRef.value })
      graph.on('node:click', () => {
      attributeVisible.value = true
      })
      useVueRegister()
      useHotKey(graph)
      stencil = useStencil({ target: graph })
      useStencilGroup(stencil, portsCfg, stencilList)
      stencilRef.value.appendChild(stencil.container)
      usePortsEvent(graph, graphRef.value)
      })
      </script>
      <style lang="scss" scoped>
      .content-container {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
      .stencil-container {
      width: 320px;
      position: relative;
      :deep(.x6-widget-stencil-title),
      :deep(.x6-widget-stencil-content),
      :deep(.x6-widget-stencil-group > .x6-widget-stencil-group-title),
      :deep(.x6-graph-svg) {
      background-color: #fff;
      }
      :deep(.x6-widget-stencil-content) {
      top: 32px;
      }
      }
      .graph-container {
      flex: 1;
      height: 100% !important;
      background-color: #f1f1f1;
      }
      }
      .tools-container {
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      padding: 20px;
      text-align: right;
      }
      </style>
      src/views/HomeView.vue 0 → 100644
      View file @ 237d7019
      <script setup></script>
      <template>
      <h1>首页</h1>
      </template>
      vite.config.js 0 → 100644
      View file @ 237d7019
      import { fileURLToPath, URL } from 'node:url'
      import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      import vueDevTools from 'vite-plugin-vue-devtools'
      // https://vite.dev/config/
      export default defineConfig({
      base: './',
      plugins: [vue(), vueDevTools()],
      resolve: {
      alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
      },
      server: {
      proxy: {
      '/dx_server_web_war_exploded': {
      changeOrigin: true,
      target: 'http://localhost:8080/',
      ws: true,
      },
      },
      },
      })
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment