fix: bug修改

.eslintrc.js

@@ -20,5 +20,7 @@ module.exports = {
     'linebreak-style': [0, 'error', 'windows'],
     'import/no-cycle': 0,
     '@typescript-eslint/no-this-alias': ['off'],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    '@typescript-eslint/no-var-requires': 0,
   },
 };

mock/index.js

@@ -30,6 +30,8 @@ app.use(`${prefix}/tree`, require('./routers/tree'));
 app.use(`${prefix}/bug_list`, require('./routers/buglist'));
 app.use(`${prefix}/stages`, require('./routers/stage'));
 app.use(`${prefix}/commits`, require('./routers/commits'));
+app.use(`${prefix}/test`, require('./routers/apitest'));
+app.use(`${prefix}/func_test`, require('./routers/functest'));
 
 app.listen(4000);
 

mock/routers/apitest.js

@@ -0,0 +1,121 @@
+const router = require('express').Router();
+
+const Mock = require();
+const wrapper = require('../wrapper');
+
+const { Random } = Mock;
+
+router.post('/create', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.get('/list', (req, res) => {
+  res.json(wrapper(
+    Mock.mock([
+      {
+        testId: 18,
+        testName: Random.csentence(5, 20),
+        projectId: 45,
+        createTime: Random.datetime(),
+        username: 'ZhaoXR',
+        url: 'https://zhidao.baidu.com/question/1899892881196615220.html',
+        params: [{}],
+        'method|1': ['get', 'post'],
+        qps: 150,
+      },
+      {
+        testId: 19,
+        testName: Random.csentence(5, 20),
+        projectId: 45,
+        createTime: Random.datetime(),
+        username: 'ZhaoXR',
+        url: 'http://localhost:3000',
+        params: [{}],
+        'method|1': ['get', 'post'],
+        qps: 30,
+      },
+      {
+        testId: 20,
+        testName: Random.csentence(5, 20),
+        projectId: 45,
+        createTime: Random.datetime(),
+        username: 'ZhaoXR',
+        url: 'http://localhost:3000/project/1/apitest',
+        params: [{}],
+        'method|1': ['get', 'post'],
+        qps: 10,
+      },
+      {
+        testId: 21,
+        testName: Random.csentence(5, 20),
+        projectId: 45,
+        createTime: Random.datetime(),
+        username: 'ZhaoXR',
+        url: 'localhost:3000',
+        params: [{}],
+        'method|1': ['get', 'post'],
+        qps: 20,
+      },
+    ]),
+  ));
+});
+
+router.get('/delete', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.get('/execute', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.get('/result', (req, res) => {
+  res.json(wrapper(
+    Mock.mock([
+      {
+        id: 11,
+        testId: 18,
+        executeTime: Random.datetime(),
+        success: 20,
+        failure: 0,
+        timeList: [3, 3, 4, 4, 5, 5, 5, 6, 6, 6, 2, 3, 3, 2, 4, 3, 2, 2, 4, 4],
+        maxTime: 6,
+        minTime: 2,
+        averageTime: 3,
+        pipelineRecordId: -1,
+      },
+      {
+        id: 12,
+        testId: 18,
+        executeTime: Random.datetime(),
+        success: 20,
+        failure: 0,
+        timeList: [2, 3, 3, 4, 4, 4, 5, 5, 5, 6, 4, 4, 5, 5, 6, 6, 7, 4, 5, 5],
+        maxTime: 7,
+        minTime: 2,
+        averageTime: 4,
+        pipelineRecordId: -1,
+      },
+    ]),
+  ));
+});
+
+router.get('/latest', (req, res) => {
+  res.json(wrapper(
+    Mock.mock([
+      {
+        id: 12,
+        testId: 18,
+        executeTime: Random.datetime(),
+        success: 20,
+        failure: 0,
+        timeList: [2, 3, 3, 4, 4, 4, 5, 5, 5, 6, 4, 4, 5, 5, 6, 6, 7, 4, 5, 5],
+        maxTime: 7,
+        minTime: 2,
+        averageTime: 4,
+        pipelineRecordId: -1,
+      },
+    ]),
+  ));
+});
+
+module.exports = router;

mock/routers/autotest.js

@@ -0,0 +1,27 @@
+const router = require('express').Router();
+
+const Mock = require();
+const wrapper = require('../wrapper');
+
+const { Random } = Mock;
+
+router.get('/list', (req, res) => {
+  res.json(wrapper(
+    Mock.mock({
+      'data|5-10': [{
+        'id|+1': 1,
+        testId: 18,
+        executeTime: Random.datetime(),
+        success: 20,
+        failure: 0,
+        timeList: [2, 3, 3, 4, 4, 4, 5, 5, 5, 6, 4, 4, 5, 5, 6, 6, 7, 4, 5, 5],
+        maxTime: 7,
+        minTime: 2,
+        averageTime: 4,
+        pipelineRecordId: -1,
+      }],
+    }).data,
+  ));
+});
+
+module.exports = router;

mock/routers/database.js

@@ -0,0 +1,23 @@
+const router = require('express').Router();
+
+const Mock = require();
+const wrapper = require('../wrapper');
+
+const { Random } = Mock;
+
+router.get('/instances', (req, res) => {
+  res.json(wrapper(
+    Mock.mock({
+      'data|5': [{
+        'id|+1': 1,
+        name: Random.csentence(2, 10),
+      }],
+    }).data,
+  ));
+});
+
+router.post('/exec', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+module.exports = router;

mock/routers/functest.js

@@ -0,0 +1,87 @@
+const router = require('express').Router();
+
+const Mock = require();
+const wrapper = require('../wrapper');
+
+const { Random } = Mock;
+
+router.get('', (req, res) => {
+  res.json(wrapper(
+    Mock.mock({
+      'data|5-10': [{
+        'id|+1': 1,
+        projectId: 101,
+        title: Random.csentence(5, 20),
+        'pass|1': [0, 1],
+      }],
+    }).data,
+  ));
+});
+
+router.get('/steps', (req, res) => {
+  res.json(wrapper(
+    Mock.mock({
+      'data|5-10': [{
+        'id|+1': 1,
+        testCaseId: 1,
+        description: Random.csentence(10, 30),
+        expectation: Random.csentence(10, 30),
+        'state|1': ['待测试', '已测试', '出现bug'],
+      }],
+    }).data,
+  ));
+});
+
+router.post('', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.put('', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.put('/finish', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.put('/reopen', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.delete('', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.post('/steps', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.put('/steps', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.delete('/steps', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.put('/steps/state', (req, res) => {
+  res.json(wrapper('success'));
+});
+
+router.get('/record/latest', (req, res) => {
+  res.json(wrapper(
+    Mock.mock(
+      {
+        'data|10': [{
+          'id|+1': 1,
+          pipelineId: 1,
+          timestamp: Random.datetime(),
+          'operationType|1': ['完成测试', '重新开放测试'],
+          pipelineRecordId: -1,
+        }],
+      },
+    ).data,
+  ));
+});
+
+module.exports = router;

src/assets/icon_new/bug-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268z" fill="#2c2c2c" /><path d="M304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" fill="#2c2c2c" /></svg>

src/assets/icon_new/bug-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268z" fill="#1296db" /><path d="M304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" fill="#1296db" /></svg>

src/assets/icon_new/bug.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5S460.5 960 512 960s99.8-13.9 141.3-38.2c41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM716 680c0 36.8-9.7 72-27.8 102.9-17.7 30.3-43 55.6-73.3 73.3-20.1 11.8-42 20-64.9 24.3V484c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v396.5c-22.9-4.3-44.8-12.5-64.9-24.3-30.3-17.7-55.6-43-73.3-73.3C317.7 752 308 716.8 308 680V412h408v268z" fill="#8a8a8a" /><path d="M304 280h56c4.4 0 8-3.6 8-8 0-28.3 5.9-53.2 17.1-73.5 10.6-19.4 26-34.8 45.4-45.4C450.9 142 475.7 136 504 136h16c28.3 0 53.2 5.9 73.5 17.1 19.4 10.6 34.8 26 45.4 45.4C650 218.9 656 243.7 656 272c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" fill="#8a8a8a" /></svg>

src/assets/icon_new/link-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M806.436327 515.549842l-60.954135-59.830547-40.278275 41.03859 60.954136 59.829524c21.571252 21.179326 33.479442 49.352936 33.479442 79.209881-0.056282 29.887644-11.90819 57.97632-33.479442 79.184299l-60.954136 59.8285c-33.706616 33.117192-88.536275 33.145845-122.301219 0L461.011824 655.152065c-21.571252-21.206955-33.453859-49.268002-33.453859-79.182252-0.028653-29.858992 11.882608-58.004973 33.031234-78.81898l42.374002-39.886349-39.451445-41.851093-42.781277 40.306927c-32.724244 32.078539-50.72928 74.80251-50.700627 120.250518 0 45.475637 18.005037 88.143327 50.700627 120.219818l121.892921 119.686677c27.977136 27.472647 64.717848 41.152177 101.401255 41.152177 36.740712 0 73.480401-13.67953 101.456514-41.152177l60.954135-59.856129c32.695591-32.078539 50.671975-74.745205 50.727233-120.221866 0.001023-45.448007-18.030619-88.170956-50.72621-120.249494z" fill="#2c2c2c" /><path d="M298.43233 257.439789c44.941472-44.100316 118.029948-44.100316 162.915138 0l101.612056 99.71485c21.573298 21.209002 33.427253 49.297678 33.483535 79.156669 0 29.886621-11.910237 58.030555-33.483535 79.239557l-60.968462 59.829524 40.295671 41.03859 60.951065-59.830547c32.695591-32.078539 50.731327-74.801487 50.731327-120.277124-0.060375-45.448007-18.035736-88.114674-50.731327-120.220842l-101.610009-99.715873c-67.047911-65.840413-176.314282-65.896694-243.47578 0l-40.614942 39.88635c-32.695591 32.106168-50.701651 74.773858-50.701651 120.220841-0.028653 45.475637 17.975361 88.199608 50.701651 120.278147l40.614942 39.887373 40.279298-41.039613-40.614942-39.88635c-21.574321-21.178303-33.483535-49.351913-33.45386-79.239557 0-29.857969 11.879538-57.946644 33.45386-79.155646l40.615965-39.886349z" fill="#2c2c2c" /></svg>

src/assets/icon_new/link-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M806.436327 515.549842l-60.954135-59.830547-40.278275 41.03859 60.954136 59.829524c21.571252 21.179326 33.479442 49.352936 33.479442 79.209881-0.056282 29.887644-11.90819 57.97632-33.479442 79.184299l-60.954136 59.8285c-33.706616 33.117192-88.536275 33.145845-122.301219 0L461.011824 655.152065c-21.571252-21.206955-33.453859-49.268002-33.453859-79.182252-0.028653-29.858992 11.882608-58.004973 33.031234-78.81898l42.374002-39.886349-39.451445-41.851093-42.781277 40.306927c-32.724244 32.078539-50.72928 74.80251-50.700627 120.250518 0 45.475637 18.005037 88.143327 50.700627 120.219818l121.892921 119.686677c27.977136 27.472647 64.717848 41.152177 101.401255 41.152177 36.740712 0 73.480401-13.67953 101.456514-41.152177l60.954135-59.856129c32.695591-32.078539 50.671975-74.745205 50.727233-120.221866 0.001023-45.448007-18.030619-88.170956-50.72621-120.249494z" fill="#1296db" /><path d="M298.43233 257.439789c44.941472-44.100316 118.029948-44.100316 162.915138 0l101.612056 99.71485c21.573298 21.209002 33.427253 49.297678 33.483535 79.156669 0 29.886621-11.910237 58.030555-33.483535 79.239557l-60.968462 59.829524 40.295671 41.03859 60.951065-59.830547c32.695591-32.078539 50.731327-74.801487 50.731327-120.277124-0.060375-45.448007-18.035736-88.114674-50.731327-120.220842l-101.610009-99.715873c-67.047911-65.840413-176.314282-65.896694-243.47578 0l-40.614942 39.88635c-32.695591 32.106168-50.701651 74.773858-50.701651 120.220841-0.028653 45.475637 17.975361 88.199608 50.701651 120.278147l40.614942 39.887373 40.279298-41.039613-40.614942-39.88635c-21.574321-21.178303-33.483535-49.351913-33.45386-79.239557 0-29.857969 11.879538-57.946644 33.45386-79.155646l40.615965-39.886349z" fill="#1296db" /></svg>

src/assets/icon_new/link.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M806.436327 515.549842l-60.954135-59.830547-40.278275 41.03859 60.954136 59.829524c21.571252 21.179326 33.479442 49.352936 33.479442 79.209881-0.056282 29.887644-11.90819 57.97632-33.479442 79.184299l-60.954136 59.8285c-33.706616 33.117192-88.536275 33.145845-122.301219 0L461.011824 655.152065c-21.571252-21.206955-33.453859-49.268002-33.453859-79.182252-0.028653-29.858992 11.882608-58.004973 33.031234-78.81898l42.374002-39.886349-39.451445-41.851093-42.781277 40.306927c-32.724244 32.078539-50.72928 74.80251-50.700627 120.250518 0 45.475637 18.005037 88.143327 50.700627 120.219818l121.892921 119.686677c27.977136 27.472647 64.717848 41.152177 101.401255 41.152177 36.740712 0 73.480401-13.67953 101.456514-41.152177l60.954135-59.856129c32.695591-32.078539 50.671975-74.745205 50.727233-120.221866 0.001023-45.448007-18.030619-88.170956-50.72621-120.249494z" fill="#8a8a8a" /><path d="M298.43233 257.439789c44.941472-44.100316 118.029948-44.100316 162.915138 0l101.612056 99.71485c21.573298 21.209002 33.427253 49.297678 33.483535 79.156669 0 29.886621-11.910237 58.030555-33.483535 79.239557l-60.968462 59.829524 40.295671 41.03859 60.951065-59.830547c32.695591-32.078539 50.731327-74.801487 50.731327-120.277124-0.060375-45.448007-18.035736-88.114674-50.731327-120.220842l-101.610009-99.715873c-67.047911-65.840413-176.314282-65.896694-243.47578 0l-40.614942 39.88635c-32.695591 32.106168-50.701651 74.773858-50.701651 120.220841-0.028653 45.475637 17.975361 88.199608 50.701651 120.278147l40.614942 39.887373 40.279298-41.039613-40.614942-39.88635c-21.574321-21.178303-33.483535-49.351913-33.45386-79.239557 0-29.857969 11.879538-57.946644 33.45386-79.155646l40.615965-39.886349z" fill="#8a8a8a" /></svg>

src/assets/icon_new/pipeline-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M176 48c50.752 0 93.76 33.728 107.52 80h436.48a208 208 0 0 1 11.776 415.68l-11.776 0.32h-68.672a112 112 0 0 1-214.656 0.128L304 544a144 144 0 0 0-9.856 287.68L304 832h436.48a112.256 112.256 0 0 1 107.52-80 112 112 0 0 1 0 224A112.256 112.256 0 0 1 740.48 896H304a208 208 0 0 1-11.776-415.68L304 480h132.672a112 112 0 0 1 214.72 0h68.608a144 144 0 0 0 9.856-287.68L720 192H283.52a112.256 112.256 0 0 1-107.52 80 112 112 0 0 1 0-224z m672 768a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM544 464a48 48 0 0 0-40.704 22.592l-1.792 3.072a47.808 47.808 0 0 0-4.608 31.68l1.6 5.952 1.792 4.48 3.2 5.888 3.968 5.44-2.624-3.392a48 48 0 0 0 79.744-2.048l1.92-3.392 1.28-2.496 1.728-4.48a48 48 0 0 0-1.728-35.072l-1.28-2.56-1.792-3.072-1.6-2.432A48 48 0 0 0 544 464z m-368-352a48 48 0 1 0 0 96 48 48 0 0 0 0-96z" fill="#2c2c2c" /></svg>

src/assets/icon_new/pipeline-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M176 48c50.752 0 93.76 33.728 107.52 80h436.48a208 208 0 0 1 11.776 415.68l-11.776 0.32h-68.672a112 112 0 0 1-214.656 0.128L304 544a144 144 0 0 0-9.856 287.68L304 832h436.48a112.256 112.256 0 0 1 107.52-80 112 112 0 0 1 0 224A112.256 112.256 0 0 1 740.48 896H304a208 208 0 0 1-11.776-415.68L304 480h132.672a112 112 0 0 1 214.72 0h68.608a144 144 0 0 0 9.856-287.68L720 192H283.52a112.256 112.256 0 0 1-107.52 80 112 112 0 0 1 0-224z m672 768a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM544 464a48 48 0 0 0-40.704 22.592l-1.792 3.072a47.808 47.808 0 0 0-4.608 31.68l1.6 5.952 1.792 4.48 3.2 5.888 3.968 5.44-2.624-3.392a48 48 0 0 0 79.744-2.048l1.92-3.392 1.28-2.496 1.728-4.48a48 48 0 0 0-1.728-35.072l-1.28-2.56-1.792-3.072-1.6-2.432A48 48 0 0 0 544 464z m-368-352a48 48 0 1 0 0 96 48 48 0 0 0 0-96z" fill="#1296db" /></svg>

src/assets/icon_new/pipeline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M176 48c50.752 0 93.76 33.728 107.52 80h436.48a208 208 0 0 1 11.776 415.68l-11.776 0.32h-68.672a112 112 0 0 1-214.656 0.128L304 544a144 144 0 0 0-9.856 287.68L304 832h436.48a112.256 112.256 0 0 1 107.52-80 112 112 0 0 1 0 224A112.256 112.256 0 0 1 740.48 896H304a208 208 0 0 1-11.776-415.68L304 480h132.672a112 112 0 0 1 214.72 0h68.608a144 144 0 0 0 9.856-287.68L720 192H283.52a112.256 112.256 0 0 1-107.52 80 112 112 0 0 1 0-224z m672 768a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM544 464a48 48 0 0 0-40.704 22.592l-1.792 3.072a47.808 47.808 0 0 0-4.608 31.68l1.6 5.952 1.792 4.48 3.2 5.888 3.968 5.44-2.624-3.392a48 48 0 0 0 79.744-2.048l1.92-3.392 1.28-2.496 1.728-4.48a48 48 0 0 0-1.728-35.072l-1.28-2.56-1.792-3.072-1.6-2.432A48 48 0 0 0 544 464z m-368-352a48 48 0 1 0 0 96 48 48 0 0 0 0-96z" fill="#8a8a8a" /></svg>

src/assets/icon_new/schedule-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M946.176 173.056h-118.784V148.48a90.624 90.624 0 1 0-181.248 0v24.576H377.856V148.48a90.624 90.624 0 1 0-181.248 0v24.576H77.824a38.4 38.4 0 0 0-38.4 38.4v729.6a38.4 38.4 0 0 0 38.4 38.4h870.4a38.4 38.4 0 0 0 38.4-38.4V211.456a38.4 38.4 0 0 0-40.448-38.4z m-248.832-24.576a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m-449.536 0a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m659.968 754.176H116.224V249.856h80.384v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h268.288v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h80.384v652.8z" fill="#2c2c2c" /><path d="M662.528 446.464l-196.608 204.8-102.4-106.496a38.4 38.4 0 1 0-56.32 51.2l132.096 134.656a38.4 38.4 0 0 0 27.136 11.264 38.4 38.4 0 0 0 27.648-11.776L716.8 499.712a38.4 38.4 0 0 0-54.272-53.248z" fill="#2c2c2c" /></svg>

src/assets/icon_new/schedule-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M946.176 173.056h-118.784V148.48a90.624 90.624 0 1 0-181.248 0v24.576H377.856V148.48a90.624 90.624 0 1 0-181.248 0v24.576H77.824a38.4 38.4 0 0 0-38.4 38.4v729.6a38.4 38.4 0 0 0 38.4 38.4h870.4a38.4 38.4 0 0 0 38.4-38.4V211.456a38.4 38.4 0 0 0-40.448-38.4z m-248.832-24.576a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m-449.536 0a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m659.968 754.176H116.224V249.856h80.384v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h268.288v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h80.384v652.8z" fill="#1296db" /><path d="M662.528 446.464l-196.608 204.8-102.4-106.496a38.4 38.4 0 1 0-56.32 51.2l132.096 134.656a38.4 38.4 0 0 0 27.136 11.264 38.4 38.4 0 0 0 27.648-11.776L716.8 499.712a38.4 38.4 0 0 0-54.272-53.248z" fill="#1296db" /></svg>

src/assets/icon_new/schedule.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M946.176 173.056h-118.784V148.48a90.624 90.624 0 1 0-181.248 0v24.576H377.856V148.48a90.624 90.624 0 1 0-181.248 0v24.576H77.824a38.4 38.4 0 0 0-38.4 38.4v729.6a38.4 38.4 0 0 0 38.4 38.4h870.4a38.4 38.4 0 0 0 38.4-38.4V211.456a38.4 38.4 0 0 0-40.448-38.4z m-248.832-24.576a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m-449.536 0a39.424 39.424 0 1 1 78.848 0v121.344a39.424 39.424 0 0 1-78.848 0V148.48z m659.968 754.176H116.224V249.856h80.384v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h268.288v20.48a90.624 90.624 0 0 0 181.248 0v-20.48h80.384v652.8z" fill="#8a8a8a" /><path d="M662.528 446.464l-196.608 204.8-102.4-106.496a38.4 38.4 0 1 0-56.32 51.2l132.096 134.656a38.4 38.4 0 0 0 27.136 11.264 38.4 38.4 0 0 0 27.648-11.776L716.8 499.712a38.4 38.4 0 0 0-54.272-53.248z" fill="#8a8a8a" /></svg>

src/assets/icon_new/task-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M831.825 63.94H191.94c-70.692 0-128 57.308-128 128v639.885c0 70.692 57.308 128 128 128h639.885c70.692 0 128-57.308 128-128V191.94c0-70.692-57.308-128-128-128zM895.885 832a63.835 63.835 0 0 1-63.973 63.886H192.088c-17.112 0-33.27-6.575-45.372-18.676s-18.836-28.098-18.836-45.21V192a64.236 64.236 0 0 1 64.208-64.12h639.824A64.038 64.038 0 0 1 895.885 192V832z" fill="#2c2c2c" /><path d="M791.998 351.852H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m0 256.121H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m-447.996-79.975c-61.856 0-111.986 50.144-111.986 111.985S282.16 751.97 344.002 751.97s111.985-50.144 111.985-111.986-50.13-111.985-111.985-111.985z m33.982 145.982a48.045 48.045 0 1 1 14.088-33.982 47.746 47.746 0 0 1-14.088 33.986z m39.412-376.586L311.999 402.787l-41.391-41.395a31.97 31.97 0 1 0-45.213 45.213l63.997 64.002a31.97 31.97 0 0 0 45.214 0l128-128a31.97 31.97 0 0 0-45.21-45.213z" fill="#2c2c2c" /></svg>

src/assets/icon_new/task-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M831.825 63.94H191.94c-70.692 0-128 57.308-128 128v639.885c0 70.692 57.308 128 128 128h639.885c70.692 0 128-57.308 128-128V191.94c0-70.692-57.308-128-128-128zM895.885 832a63.835 63.835 0 0 1-63.973 63.886H192.088c-17.112 0-33.27-6.575-45.372-18.676s-18.836-28.098-18.836-45.21V192a64.236 64.236 0 0 1 64.208-64.12h639.824A64.038 64.038 0 0 1 895.885 192V832z" fill="#1296db" /><path d="M791.998 351.852H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m0 256.121H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m-447.996-79.975c-61.856 0-111.986 50.144-111.986 111.985S282.16 751.97 344.002 751.97s111.985-50.144 111.985-111.986-50.13-111.985-111.985-111.985z m33.982 145.982a48.045 48.045 0 1 1 14.088-33.982 47.746 47.746 0 0 1-14.088 33.986z m39.412-376.586L311.999 402.787l-41.391-41.395a31.97 31.97 0 1 0-45.213 45.213l63.997 64.002a31.97 31.97 0 0 0 45.214 0l128-128a31.97 31.97 0 0 0-45.21-45.213z" fill="#1296db" /></svg>

src/assets/icon_new/task.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M831.825 63.94H191.94c-70.692 0-128 57.308-128 128v639.885c0 70.692 57.308 128 128 128h639.885c70.692 0 128-57.308 128-128V191.94c0-70.692-57.308-128-128-128zM895.885 832a63.835 63.835 0 0 1-63.973 63.886H192.088c-17.112 0-33.27-6.575-45.372-18.676s-18.836-28.098-18.836-45.21V192a64.236 64.236 0 0 1 64.208-64.12h639.824A64.038 64.038 0 0 1 895.885 192V832z" fill="#8a8a8a" /><path d="M791.998 351.852H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m0 256.121H536a31.97 31.97 0 0 0 0 63.94h256a31.97 31.97 0 0 0 0-63.94z m-447.996-79.975c-61.856 0-111.986 50.144-111.986 111.985S282.16 751.97 344.002 751.97s111.985-50.144 111.985-111.986-50.13-111.985-111.985-111.985z m33.982 145.982a48.045 48.045 0 1 1 14.088-33.982 47.746 47.746 0 0 1-14.088 33.986z m39.412-376.586L311.999 402.787l-41.391-41.395a31.97 31.97 0 1 0-45.213 45.213l63.997 64.002a31.97 31.97 0 0 0 45.214 0l128-128a31.97 31.97 0 0 0-45.21-45.213z" fill="#8a8a8a" /></svg>

src/assets/icon_new/test-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.3 800H128.2V130.2h768.6L893.3 800z m-705.1-60h645.5l2.9-549.8H188.2V740zM219.1 834.7h586v60h-586z" fill="#2c2c2c" /><path d="M369.4 606.7L225.6 463.1l143.8-143.9 42.4 42.4L310.5 463l101.3 101.2zM657.2 606.7l-42.3-42.5L716.2 463 614.8 361.6l42.5-42.4L801 463.1zM494.7 612.6l-57.1-18.4c37.2-115.3 57.6-179.8 89.1-280.7l57.3 17.9c-31.6 101.1-52 165.7-89.3 281.2z" fill="#2c2c2c" /></svg>

src/assets/icon_new/test-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.3 800H128.2V130.2h768.6L893.3 800z m-705.1-60h645.5l2.9-549.8H188.2V740zM219.1 834.7h586v60h-586z" fill="#1296db" /><path d="M369.4 606.7L225.6 463.1l143.8-143.9 42.4 42.4L310.5 463l101.3 101.2zM657.2 606.7l-42.3-42.5L716.2 463 614.8 361.6l42.5-42.4L801 463.1zM494.7 612.6l-57.1-18.4c37.2-115.3 57.6-179.8 89.1-280.7l57.3 17.9c-31.6 101.1-52 165.7-89.3 281.2z" fill="#1296db" /></svg>

src/assets/icon_new/test.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M893.3 800H128.2V130.2h768.6L893.3 800z m-705.1-60h645.5l2.9-549.8H188.2V740zM219.1 834.7h586v60h-586z" fill="#8a8a8a" /><path d="M369.4 606.7L225.6 463.1l143.8-143.9 42.4 42.4L310.5 463l101.3 101.2zM657.2 606.7l-42.3-42.5L716.2 463 614.8 361.6l42.5-42.4L801 463.1zM494.7 612.6l-57.1-18.4c37.2-115.3 57.6-179.8 89.1-280.7l57.3 17.9c-31.6 101.1-52 165.7-89.3 281.2z" fill="#8a8a8a" /></svg>

src/components/CommonDrawer.vue

@@ -139,7 +139,7 @@
               </template>
               <template v-else>
                 <el-row style="margin: 0px 25px;">
-                  没有子需求
+                  没有子节点
                 </el-row>
               </template>
               </template>

src/components/RequirementDrawer.vue

@@ -8,7 +8,7 @@
     }">
     <template #title>
       <el-row class="entry-row">
-        <el-col :span="2">
+        <el-col :span="3">
           <div class="node-type">{{type}}</div>
         </el-col>
         <el-col :span="4">
@@ -48,7 +48,10 @@
           >
             <el-tab-pane label="基本信息" name="basic_info">
               <el-row class="entry-row" style="margin-top: 15px">
-                <h4>需求描述</h4>
+                <h4 v-if="type == '需求'">需求描述</h4>
+                <h4 v-else-if="type == '特性'">特性描述</h4>
+                <h4 v-else-if="type == '用户故事'">用户故事描述</h4>
+                <h4 v-else>任务描述</h4>
               </el-row>
               <el-row class="entry-row">
                 <div v-if="isEditing">
@@ -127,7 +130,7 @@
               <!-- 相关需求 -->
               <template v-if="showSons">
               <el-row class="entry-row" style="margin-top: 15px">
-                <h4>子需求</h4>
+                <h4>子节点</h4>
               </el-row>
               <template v-if="(childs && childs.length) || false">
                 <el-row style="margin: 10px 25px;" v-for="item in childs" :key="item.id">
@@ -136,7 +139,7 @@
               </template>
               <template v-else>
                 <el-row style="margin: 0px 25px;">
-                  没有子需求
+                  没有子节点
                 </el-row>
               </template>
               </template>

src/components/SideBar.vue

@@ -57,30 +57,30 @@ export default {
   }
 }
 .icon[target=schedule]{
-  background-image: url("../assets/icon/navigation.svg");
+  background-image: url("../assets/icon_new/schedule.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/navigation-hover.svg");
+    background-image: url("../assets/icon_new/schedule-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/navigation-using.svg");
+    background-image: url("../assets/icon_new/schedule-using.svg");
   }
 }
 .icon[target=taskList]{
-  background-image: url("../assets/icon/task.svg");
+  background-image: url("../assets/icon_new/task.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/task-hover.svg");
+    background-image: url("../assets/icon_new/task-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/task-using.svg");
+    background-image: url("../assets/icon_new/task-using.svg");
   }
 }
 .icon[target=bugList]{
-  background-image: url("../assets/icon/bug.svg");
+  background-image: url("../assets/icon_new/bug.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/bug-hover.svg");
+    background-image: url("../assets/icon_new/bug-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/bug-using.svg");
+    background-image: url("../assets/icon_new/bug-using.svg");
   }
 }
 .icon[target=statistics]{
@@ -93,39 +93,39 @@ export default {
   }
 }
 .icon[target=pipeline]{
-  background-image: url("../assets/icon/training.svg");
+  background-image: url("../assets/icon_new/pipeline.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/training-hover.svg");
+    background-image: url("../assets/icon_new/pipeline-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/training-using.svg");
+    background-image: url("../assets/icon_new/pipeline-using.svg");
   }
 }
 .icon[target=database]{
-  background-image: url("../assets/icon/database.svg");
+  background-image: url("../assets/icon_new/database.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/database-hover.svg");
+    background-image: url("../assets/icon_new/database-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/database-using.svg");
+    background-image: url("../assets/icon_new/database-using.svg");
   }
 }
 .icon[target=apitest]{
-   background-image: url("../assets/icon/test.svg");
+   background-image: url("../assets/icon_new/test.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/test-hover.svg");
+    background-image: url("../assets/icon_new/test-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/test-using.svg");
+    background-image: url("../assets/icon_new/test-using.svg");
   }
 }
 .icon[target=invite]{
-   background-image: url("../assets/icon/link.svg");
+   background-image: url("../assets/icon_new/link.svg");
   .el-menu-item:hover & {
-    background-image: url("../assets/icon/link-hover.svg");
+    background-image: url("../assets/icon_new/link-hover.svg");
   }
   .el-menu-item.is-active & {
-    background-image: url("../assets/icon/link-using.svg");
+    background-image: url("../assets/icon_new/link-using.svg");
   }
 }
 </style>

src/components/Tree.vue

@@ -118,7 +118,7 @@ export default {
       this.data.forEach((item) => {
         if (item.positionY && item.positionY > maxPositionY) maxPositionY = item.positionY;
       });
-      this.drawLine((maxPositionY * 140 + 100).toFixed(0));
+      this.drawLine((maxPositionY * 180 + 100).toFixed(0));
       // 返回col
       return colList;
     },

src/views/Project/Schedule.vue

@@ -38,6 +38,14 @@
   </el-card>
   <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
     <h4>项目规划</h4>
+    <ElTooltip
+      class="tooltip"
+      effect="dark"
+      :content="'点击查看需求规划四层说明'"
+      placement="right-end"
+    >
+      <i class="el-icon-question" @click="getDetails()" style="cursor: pointer"></i>
+    </ElTooltip>
   </el-row>
   <Tree
     :data="requirements"
@@ -52,6 +60,37 @@
     @change="handleDrawerContentChange"
     @requirement-update="getTreeData"
   ></RequirementDrawer>
+  <ElDrawer
+    v-model="detailDrawer"
+    :size="600">
+    <template #title>
+      <el-row>
+        <el-col :span="8">
+          <span style="font-weight: bold; font-size: 18px; color: black">需求规划四层说明</span>
+        </el-col>
+      </el-row>
+    </template>
+    <ElTable :data="details" width="100%">
+      <ElTableColumn
+        prop="type"
+        label="类型"
+        align="center"
+        width="150">
+      </ElTableColumn>
+      <ElTableColumn
+        prop="explain"
+        label="说明"
+        align="left"
+        header-align="center">
+      </ElTableColumn>
+    </ElTable>
+    <el-row>
+      <el-col :span="8">
+        <span style="font-weight: bold; font-size: 18px; color: black; padding: 20px 20px 20px; margin-top: 20px">举例</span>
+      </el-col>
+    </el-row>
+    <img src="@/assets/example.png" style="height: 400px; width: 100%">
+  </ElDrawer>
 </template>
 
 <script>
@@ -79,6 +118,31 @@ export default {
       addRequirementDrawer: false,
       parentOfAddingRequirement: null,
       requirementInDrawer: {},
+      detailDrawer: false,
+      details: [
+        {
+          type: '需求(Requirement)',
+          explain: '● 需求是⽤户的⼀种期望，是⽤户为了解决问题或达到某些目标所需要的条件或能力。\n'
+                    + '● 是系统或系统部件为了满⾜合同、标准、规范或其他正式⽂档所规定的要求⽽需要具备的条件或能⼒。\n'
+                    + '● 对上述中的一个条件或一种能⼒的⼀种⽂档化表述。\n'
+                    + '● 这里需求的粒度较大，需要继续分解为Feature；并通过Feature继续细化为Story来完成开发和迭代。',
+        },
+        {
+          type: '特性(Feature)',
+          explain: '● 特性是可以给用户带来价值的产品功能或者特性。\n'
+                    + '● 特性向上承接Feature，向下分解为Story。相比需求，Feature更加具体形象，用户更容易理解。\n',
+        },
+        {
+          type: '用户故事(Story)',
+          explain: '● 用户故事是从用户角度对产品需求的详细描述，具有更小的粒度。\n'
+                    + '● 一般是从不同用户出发，对同一个大粒度需求的不同希望。\n',
+        },
+        {
+          type: '任务(Task)',
+          explain: '● 在书写完用户故事后，需要将Story指派给具体成员，并分解为一个或多个任务(Task)。\n'
+                    + '● 需要填写预计工时',
+        },
+      ],
     };
   },
   computed: {
@@ -260,6 +324,9 @@ export default {
         ],
       });
     },
+    getDetails() {
+      this.detailDrawer = true;
+    },
   },
 };
 </script>
@@ -271,5 +338,10 @@ export default {
 .description-card-text{
   margin: 5px 0;
 }
-
+.el-drawer__body{
+  overflow: auto;
+}
+.el-table .cell{
+  white-space: pre-line;
+}
 </style>