引入naive丰富页面和功能

package.json

@@ -20,6 +20,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.4.1",
+    "naive-ui": "^2.16.2",
     "prettier": "^2.2.1",
     "stylus": "^0.54.8",
     "vite": "^2.1.0"

src/App.vue

 <template>
-  <Main />
+  <n-dialog-provider>
+    <n-message-provider>
+      <Main />
+    </n-message-provider>
+  </n-dialog-provider>
 </template>
 
 <script>
@@ -15,9 +19,11 @@ html,
 body
   margin 0
   padding 0
+  overflow hidden
 #app
   font-family Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
   color #2c3e50
+  overflow hidden
 </style>

src/components/d3.vue

 <template>
-  <div ref="container" />
+  <div class="graph">
+    <div ref="container" style="width: 100%; height: 100%" />
+    <div class="legend">
+      <n-space>
+        <n-tag
+          v-for="n in nodeList"
+          :key="n.name"
+          size="small"
+          round
+          :color="n.color || defaultColor"
+        >
+          {{ `${n.name}（${n.val}）` }}
+        </n-tag>
+      </n-space>
+      <n-space>
+        <n-tag
+          v-for="n in linkList"
+          :key="n.name"
+          size="small"
+          :color="n.color || defaultColor"
+        >
+          {{ `${n.name}（${n.val}）` }}
+        </n-tag>
+      </n-space>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -23,16 +48,45 @@ export default {
       },
     },
   },
-  emits: ['more', 'add', 'del', 'branch'],
+  emits: ['more', 'add', 'del', 'branch', 'curNode'],
   setup(props, ctx) {
+    const colorList = {
+      default: 'skyblue',
+      System: '#58b2dc',
+      Property: '#ffb11b',
+      Subject: '#42b983',
+    }
     let instance = null
     const container = ref(null)
     const menuData = [
-      { icon: branch, action: (d) => ctx.emit('branch', d), title: '分支' },
-      { icon: more, action: (d) => ctx.emit('more', d), title: '更多' },
-      { icon: add, action: (d) => ctx.emit('add', d), title: '新增' },
-      { icon: del, action: (d) => ctx.emit('del', d), title: '删除' },
+      {
+        key: 'branch',
+        icon: branch,
+        action: (d) => ctx.emit('branch', d),
+        title: '分支',
+      },
+      {
+        key: 'more',
+        icon: more,
+        action: (d) => ctx.emit('more', d),
+        title: '更多',
+      },
+      {
+        key: 'add',
+        icon: add,
+        action: (d) => ctx.emit('add', d),
+        title: '新增',
+      },
+      {
+        key: 'del',
+        icon: del,
+        action: (d) => ctx.emit('del', d),
+        title: '删除',
+      },
     ]
+    const setCurNode = (type) => {
+      ctx.emit('curNode', type)
+    }
     function init() {
       if (!container.value) return
       if (instance) {
@@ -42,8 +96,11 @@ export default {
         container.value,
         props.data,
         props.config,
-        menuData
+        menuData,
+        colorList,
+        setCurNode
       )
+      setLegend()
     }
     function setKey(key) {
       instance.setKey(key)
@@ -53,13 +110,80 @@ export default {
       () => init(),
       { immediate: true }
     )
+
+    const nodeList = ref([])
+    const linkList = ref([])
+
+    function setLegend() {
+      const { nodes, links } = props.data
+      if (!nodes || !links) return
+      const nodeKey = {}
+      const linkKey = {}
+
+      nodes.forEach((node) => {
+        if (nodeKey.hasOwnProperty(node.nodeLabel)) {
+          nodeKey[node.nodeLabel] += 1
+        } else {
+          nodeKey[node.nodeLabel] = 1
+        }
+      })
+      links.forEach((link) => {
+        const key = `${link.source.nodeLabel}_${link.target.nodeLabel}`
+        if (linkKey.hasOwnProperty(key)) {
+          linkKey[key] += 1
+        } else {
+          linkKey[key] = 1
+        }
+      })
+      const nodeResult = []
+      for (const key in nodeKey) {
+        nodeResult.push({
+          name: key,
+          val: nodeKey[key],
+          color: {
+            color: colorList[key],
+            textColor: '#2c3e50',
+            borderColor: colorList[key],
+          },
+        })
+      }
+      const linkResult = []
+      for (const key in linkKey) {
+        linkResult.push({
+          name: key,
+          val: linkKey[key],
+        })
+      }
+
+      nodeList.value = nodeResult
+      linkList.value = linkResult
+    }
     return {
+      colorList,
       container,
       setKey,
+      nodeList,
+      linkList,
+      defaultColor: {
+        color: '#a5abb6',
+        textColor: '#fff',
+        borderColor: '#a5abb6',
+      },
     }
   },
 }
 </script>
+<style lang="stylus" scoped>
+.graph
+  background #f9fbfd
+  width 100%
+  height 100%
+  position relative
+.legend
+  position absolute
+  top 20px
+  left 20px
+</style>
 
 <style lang="stylus">
 .relation-tooltip

src/components/footer.vue

+<template>
+  <div class="footer">
+    <n-space>
+      <n-tag v-show="nodeVal" size="small" round :color="color">
+        {{ nodeVal && nodeVal.nodeLabel }}
+      </n-tag>
+      <n-button
+        v-for="name in list"
+        :key="name"
+        type="info"
+        :dashed="name !== curKey"
+        size="tiny"
+        @click="setKey(name)"
+      >
+        {{ name }}
+      </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  name: 'Footer',
+  props: {
+    node: {
+      type: Object,
+      default: () => ({
+        nodeLabel: 'Subject',
+      }),
+    },
+  },
+  emits: ['set'],
+  setup(props, ctx) {
+    const colorList = {
+      default: 'skyblue',
+      System: '#58b2dc',
+      Property: '#ffb11b',
+      Subject: '#42b983',
+    }
+    const nodeVal = computed(
+      () =>
+        props.node || {
+          nodeLabel: 'Subject',
+        }
+    )
+    const color = computed(() => {
+      if (!nodeVal.value) return {}
+      return {
+        color: colorList[nodeVal.value.nodeLabel],
+        textColor: '#fff',
+        borderColor: colorList[nodeVal.value.nodeLabel],
+      }
+    })
+    const curKey = ref('subjectName')
+    function setKey(key) {
+      curKey.value = key
+      ctx.emit('set', key)
+    }
+    const list = ref([
+      'subjectName',
+      'propertyName',
+      'systemName',
+      'nodeId',
+      'nodeLabel',
+    ])
+    return {
+      curKey,
+      setKey,
+      list,
+      color,
+      nodeVal,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.footer
+  display flex
+  align-items center
+  justify-content flex-end
+  padding 0 15px 8px
+  background #f8f9fb
+  box-shadow 10px 6px 10px 0 #000
+  margin-top 4px
+</style>

src/components/main.vue

 <template>
-  <D3
-    ref="d3Ref"
-    :data="data"
-    :config="config"
-    style="background: #fff; width: 100%; height: 100vh"
-    @branch="handleBranch"
-    @add="handleAdd"
-  />
-  <div class="btns">
-    <button @click="setKey('systemName')">systemName</button>
-    <button @click="setKey('propertyName')">propertyName</button>
-    <button @click="setKey('subjectName')">subjectName</button>
+  <div class="main">
+    <Nav style="grid-area: nav" />
+    <D3
+      ref="d3Ref"
+      style="grid-area: content"
+      class="graph"
+      :data="data"
+      @branch="handleBranch"
+      @add="handleAdd"
+      @curNode="curNode = $event"
+      @del="handleDelete"
+    />
+    <Side style="grid-area: side" />
+    <Footer style="grid-area: footer" :node="curNode" @set="setKey" />
   </div>
+  <n-drawer v-model:show="showDrawer" :width="400" placement="left">
+    <n-drawer-content title="新增节点">
+      <n-form ref="formRef" :model="formData" :rules="rules">
+        <n-form-item path="propertyName" label="节点名称">
+          <n-input
+            v-model:value="formData.propertyName"
+            placeholder="请输入"
+            @keydown.enter.prevent
+          />
+        </n-form-item>
+        <n-form-item label="关系" path="relationId">
+          <n-select
+            v-model:value="formData.relationId"
+            placeholder="请选择"
+            :options="relationOptions"
+          />
+        </n-form-item>
+        <n-form-item label="所属系统" path="systemId">
+          <n-select
+            v-model:value="formData.systemId"
+            placeholder="请选择"
+            :options="systemOptions"
+          />
+        </n-form-item>
+        <n-space justify="end">
+          <n-button :loading="isLoading" type="primary" @click="submit">
+            提交
+          </n-button>
+        </n-space>
+      </n-form>
+    </n-drawer-content>
+  </n-drawer>
 </template>
 
 <script>
 import D3 from './d3.vue'
+import Nav from './nav.vue'
+import Side from './side.vue'
+import Footer from './footer.vue'
 import mockData from '@/util/mock.js'
-import { ref, shallowRef } from 'vue'
+import { ref } from 'vue'
 import { ajax, api } from '@/ajax'
+import { useMessage, useDialog } from 'naive-ui'
 
 export default {
   name: 'Main',
-  components: { D3 },
+  components: { D3, Nav, Side, Footer },
   setup() {
+    const message = useMessage()
+    const dialog = useDialog()
+    const subjectId = ref(null)
+    const formRef = ref(null)
+    const formData = ref({
+      propertyName: null,
+      relationId: null,
+    })
+    const showDrawer = ref(false)
+    const isLoading = ref(false)
     const d3Ref = ref(null)
+    const relationOptions = ref([])
+    const systemOptions = ref([])
     const data = ref([])
+    function getData() {
+      ajax
+        .get({
+          url: api.GET_NODES,
+        })
+        .then((res) => {
+          console.log('nodes:', res)
+          data.value = res.data.content
+          systemOptions.value = data.value.nodes
+            .filter((node) => node.nodeLabel === 'System')
+            .map((node) => ({ label: node.systemName, value: node.nodeId }))
+        })
+    }
+    getData()
     ajax
       .get({
-        url: api.GET_NODES,
+        url: api.GET_RELATIONS,
       })
       .then((res) => {
-        console.log('nodes:', res)
-        data.value = res.data.content
+        if (!res.data || !res.data.content) return
+        relationOptions.value = res.data.content.map((item) => ({
+          label: item.relationName,
+          value: item.id,
+        }))
       })
-    const config = ref({
-      config: {
-        strokeColor: 'skyblue',
-      },
-    })
     function handleBranch({ nodeId }) {
       ajax
         .get({
@@ -50,37 +112,104 @@ export default {
           // data.value = res.data.content
         })
     }
-    function handleAdd() {
-      const { nodes, links } = data.value
-      data.value = {
-        nodes: nodes.slice(0, 2),
-        links: links.slice(0, 2),
-      }
-      console.log(data.value)
+    function handleAdd({ nodeId }) {
+      subjectId.value = nodeId
+      showDrawer.value = true
     }
     function setKey(key) {
       d3Ref.value.setKey(key)
     }
+    function submit(e) {
+      e.preventDefault()
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          isLoading.value = true
+          ajax
+            .post({
+              url: api.POST_NODE,
+              params: {
+                subjectId: subjectId.value,
+                ...formData.value,
+              },
+            })
+            .then(() => {
+              getData()
+              isLoading.value = false
+              showDrawer.value = false
+              message.success('提交成功')
+            })
+        }
+      })
+    }
+    const curNode = ref(null)
+    function handleDelete(data) {
+      dialog.error({
+        title: '删除节点',
+        content: `确定是否删除 '${
+          data[data.nodeLabel.toLowerCase() + 'Name']
+        }' 节点？`,
+        positiveText: '确定',
+        negativeText: '取消',
+        maskClosable: false,
+        onPositiveClick: () => {
+          console.log('delete', data)
+          message.success('删除成功！')
+        },
+      })
+    }
     return {
+      formRef,
+      formData,
+      showDrawer,
+      submit,
+      isLoading,
+      relationOptions,
+      systemOptions,
       data,
       mockData,
-      config,
       handleBranch,
       handleAdd,
       d3Ref,
       setKey,
+      rules: {
+        propertyName: [
+          {
+            required: true,
+            message: '请输入节点名称',
+            trigger: ['input', 'blur'],
+          },
+        ],
+        relationId: [
+          {
+            required: true,
+            message: '请选择从属类型',
+            trigger: ['input', 'blur'],
+          },
+        ],
+        systemId: [
+          {
+            required: true,
+            message: '请选择所属系统',
+            trigger: ['input', 'blur'],
+          },
+        ],
+      },
+      curNode,
+      handleDelete,
     }
   },
 }
 </script>
 
 <style lang="stylus" scoped>
-.btns
-  position fixed
-  top 10px
-  left 10px
-  z-index 100
-  >button
-    margin-right 10px
-    cursor pointer
+.main
+  width 100vw
+  height 100vh
+  display grid
+  overflow hidden
+  grid-template-areas 'nav nav' 'side content' 'side footer'
+  grid-template-columns 0px 1fr
+  grid-template-rows 0px 1fr 70px
+  padding 4px
+  font-weight bold !important
 </style>

src/components/nav.vue

+<template>
+  <div class="nav"></div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Nav',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped>
+.nav
+  background #f9fbfd
+  border-bottom 4px solid #fff
+</style>

src/components/side.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Side',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped></style>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import {
+  create,
+  NButton,
+  NTag,
+  NSpace,
+  NDrawer,
+  NDrawerContent,
+  NForm,
+  NFormItem,
+  NInput,
+  NSelect,
+  NMessageProvider,
+  NDialogProvider,
+} from 'naive-ui'
+
+const naive = create({
+  components: [
+    NButton,
+    NTag,
+    NSpace,
+    NDrawer,
+    NDrawerContent,
+    NForm,
+    NFormItem,
+    NInput,
+    NSelect,
+    NMessageProvider,
+    NDialogProvider,
+  ],
+})
+
+createApp(App).use(naive).mount('#app')

src/util/useD3.js

@@ -38,7 +38,7 @@ function textWrap(text, width) {
   text.each(function () {
     const text = d3.select(this),
       words = text.text().split('').reverse(),
-      lineHeight = 1.1, // ems
+      lineHeight = 1, // ems
       x = text.attr('x'),
       y = text.attr('y'),
       dy = 0
@@ -83,7 +83,7 @@ const defaultConfig = {
   alphaDecay: 0.0228, // 控制力学模拟衰减率
   r: 45, // 圈圈的半径 [30 - 45]
   nodeColor: 'skyblue', // 圈圈节点背景颜色
-  fontColor: '#000', // 圈圈内文字的颜色
+  fontColor: '#2c3e50', // 圈圈内文字的颜色
   linkSrc: 30, // 划线时候的弧度
   linkColor: 'gray', // 链接线默认的颜色
   strokeColor: 'gray', // 圈圈外围包裹的颜色
@@ -105,8 +105,10 @@ const defaultConfig = {
 let menu = null
 
 export default class RelationGraph {
-  constructor(selector, data, configs = {}, menuData) {
+  constructor(selector, data, configs = {}, menuData, colorList, setCurNode) {
     this.menuData = menuData
+    this.colorLIst = colorList
+    this.setCurNode = setCurNode
 
     const mapW = selector.offsetWidth
     const mapH = selector.offsetHeight
@@ -149,7 +151,8 @@ export default class RelationGraph {
 
   setKey(key) {
     d3.selectAll('.node-text')
-      .text((d) => (key && d[key]) || d[d.nodeLabel.toLowerCase() + 'Name'])
+      .text((d) => (key && d[key]) || '无')
+      // .text((d) => (key && d[key]) || d[d.nodeLabel.toLowerCase() + 'Name'])
       .call(textWrap, this.config.r * 1.8)
   }
   update(data) {
@@ -160,12 +163,17 @@ export default class RelationGraph {
     d3.selectAll('g.circle-wrapper').data(this.config.nodes)
     d3.selectAll('g.edge').data(this.config.links)
   }
-  openMenu(self, d) {
-    menu = new RadialMenu()
-      .radius(50)
-      .thickness(40)
-      .appendTo(self.parentNode)
-      .show(this.menuData, d)
+  openMenu(self, d, type) {
+    this.setCurNode(d)
+    menu = new RadialMenu().radius(50).thickness(40).appendTo(self.parentNode)
+    if (!type) {
+      menu.show(this.menuData, d)
+    } else {
+      menu.show(
+        this.menuData.filter((e) => e.key === type),
+        d
+      )
+    }
   }
   closeMenu() {
     if (menu) {
@@ -272,6 +280,7 @@ export default class RelationGraph {
       .attr('x', this.config.r)
       .attr('y', this.config.r) // edit
       .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'middle')
       .attr('fill', this.config.fontColor)
       .style('font-size', this.config.r / 3.8)
       .text((d) => d[d.nodeLabel.toLowerCase() + 'Name'])
@@ -330,7 +339,7 @@ export default class RelationGraph {
       .attr('y', -10)
       .attr('width', 40)
       .attr('height', 20)
-      .attr('fill', 'white')
+      .attr('fill', '#f9fbfd')
       .attr('stroke', 'transparent')
 
     // 5.5 文本标签  坐标（x,y）代表 文本的左下角的点
@@ -393,7 +402,11 @@ export default class RelationGraph {
           self.closeMenu()
         } else {
           self.closeMenu()
-          self.openMenu(this, d)
+          if (d.nodeLabel === 'Subject') {
+            self.openMenu(this, d)
+          } else {
+            self.openMenu(this, d, 'del')
+          }
         }
         //阻止事件冒泡  阻止事件默认行为
         e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)