Sfoglia il codice sorgente

编辑器相关组件

YaolongHan 4 anni fa
parent
commit
9e6ca00e75
68 ha cambiato i file con 1466 aggiunte e 10 eliminazioni
  1. 1 1
      babel.config.js
  2. BIN
      public/favicon.ico
  3. 1 1
      public/index.html
  4. 10 1
      src/App.vue
  5. 539 0
      src/assets/font/demo.css
  6. 285 0
      src/assets/font/demo_index.html
  7. 42 0
      src/assets/font/iconfont.css
  8. BIN
      src/assets/font/iconfont.eot
  9. 1 0
      src/assets/font/iconfont.js
  10. 44 0
      src/assets/font/iconfont.json
  11. 41 0
      src/assets/font/iconfont.svg
  12. BIN
      src/assets/font/iconfont.ttf
  13. BIN
      src/assets/font/iconfont.woff
  14. BIN
      src/assets/font/iconfont.woff2
  15. BIN
      src/assets/images/1pxline.jpg
  16. BIN
      src/assets/images/2pxline.jpg
  17. BIN
      src/assets/images/3pxline.jpg
  18. BIN
      src/assets/images/copy.png
  19. BIN
      src/assets/images/dashedLine.jpg
  20. BIN
      src/assets/images/dashedLine.png
  21. BIN
      src/assets/images/delete.png
  22. BIN
      src/assets/images/dotLine.jpg
  23. BIN
      src/assets/images/dotLine.png
  24. BIN
      src/assets/images/past.png
  25. BIN
      src/assets/images/redo.png
  26. BIN
      src/assets/images/solidLine.jpg
  27. BIN
      src/assets/images/solidLine.png
  28. BIN
      src/assets/images/t-bottom-d.png
  29. BIN
      src/assets/images/t-bottom.png
  30. BIN
      src/assets/images/t-center-d.png
  31. BIN
      src/assets/images/t-center.png
  32. BIN
      src/assets/images/t-equipment-hover.png
  33. BIN
      src/assets/images/t-equipment.png
  34. BIN
      src/assets/images/t-format.png
  35. BIN
      src/assets/images/t-img-hover.png
  36. BIN
      src/assets/images/t-img.png
  37. BIN
      src/assets/images/t-left-d.png
  38. BIN
      src/assets/images/t-left.png
  39. BIN
      src/assets/images/t-level-d.png
  40. BIN
      src/assets/images/t-level.png
  41. BIN
      src/assets/images/t-line-hover.png
  42. BIN
      src/assets/images/t-line.png
  43. BIN
      src/assets/images/t-lock.png
  44. BIN
      src/assets/images/t-papeline-hover.png
  45. BIN
      src/assets/images/t-papeline.png
  46. BIN
      src/assets/images/t-position-hover.png
  47. BIN
      src/assets/images/t-position.png
  48. BIN
      src/assets/images/t-right-d.png
  49. BIN
      src/assets/images/t-right.png
  50. BIN
      src/assets/images/t-save.png
  51. BIN
      src/assets/images/t-top-d.png
  52. BIN
      src/assets/images/t-top.png
  53. BIN
      src/assets/images/t-topandbottm-d.png
  54. BIN
      src/assets/images/t-topandbottm.png
  55. BIN
      src/assets/images/t-vertical-d.png
  56. BIN
      src/assets/images/t-vertical.png
  57. BIN
      src/assets/images/undo.png
  58. BIN
      src/assets/images/放大 amplification.png
  59. BIN
      src/assets/images/缩小.png
  60. 5 0
      src/components/editview/baseTopoEditer.vue
  61. 114 0
      src/components/editview/leftToolBar.vue
  62. 130 0
      src/components/editview/leftToolBar/legendList.vue
  63. 20 0
      src/components/editview/rightPropertyBar.vue
  64. 173 0
      src/components/editview/topToolBar.vue
  65. 46 5
      src/components/editview/topoEditer.vue
  66. 4 0
      src/main.ts
  67. 7 2
      src/views/editer.vue
  68. 3 0
      vue.config.ts

+ 1 - 1
babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
 }

BIN
public/favicon.ico


+ 1 - 1
public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>博锐尚格科技股份有限公司--拓扑图编辑器</title>
   </head>
   <body>
     <noscript>

+ 10 - 1
src/App.vue

@@ -1,10 +1,19 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="less">
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 #app {
+  width: 100%;
+  height: 100%;
 }
 </style>

+ 539 - 0
src/assets/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时,垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

+ 285 - 0
src/assets/font/demo_index.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2035940" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">工具</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">空间</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">管道</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">中心</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">楼梯</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
+          <ul>
+            <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
+            <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下:</p>
+          <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icongongju"></span>
+            <div class="name">
+              工具
+            </div>
+            <div class="code-name">.icongongju
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconkongjian"></span>
+            <div class="name">
+              空间
+            </div>
+            <div class="code-name">.iconkongjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconguandao"></span>
+            <div class="name">
+              管道
+            </div>
+            <div class="code-name">.iconguandao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhongxin"></span>
+            <div class="name">
+              中心
+            </div>
+            <div class="code-name">.iconzhongxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconlouti"></span>
+            <div class="name">
+              楼梯
+            </div>
+            <div class="code-name">.iconlouti
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比,具有如下特点:</p>
+        <ul>
+          <li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下:</p>
+        <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icongongju"></use>
+                </svg>
+                <div class="name">工具</div>
+                <div class="code-name">#icongongju</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconkongjian"></use>
+                </svg>
+                <div class="name">空间</div>
+                <div class="code-name">#iconkongjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconguandao"></use>
+                </svg>
+                <div class="name">管道</div>
+                <div class="code-name">#iconguandao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhongxin"></use>
+                </svg>
+                <div class="name">中心</div>
+                <div class="code-name">#iconzhongxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconlouti"></use>
+                </svg>
+                <div class="name">楼梯</div>
+                <div class="code-name">#iconlouti</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
+          <ul>
+            <li>支持多色图标了,不再受单色限制。</li>
+            <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
+          </ul>
+          <p>使用步骤如下:</p>
+          <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

File diff suppressed because it is too large
+ 42 - 0
src/assets/font/iconfont.css


BIN
src/assets/font/iconfont.eot


File diff suppressed because it is too large
+ 1 - 0
src/assets/font/iconfont.js


+ 44 - 0
src/assets/font/iconfont.json

@@ -0,0 +1,44 @@
+{
+  "id": "2035940",
+  "name": "拓扑图编辑器",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "博瑞拓扑图编辑去",
+  "glyphs": [
+    {
+      "icon_id": "7088035",
+      "name": "工具",
+      "font_class": "gongju",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "10749519",
+      "name": "空间",
+      "font_class": "kongjian",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "14402043",
+      "name": "管道",
+      "font_class": "guandao",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "14657079",
+      "name": "中心",
+      "font_class": "zhongxin",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "16452751",
+      "name": "楼梯",
+      "font_class": "louti",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    }
+  ]
+}

File diff suppressed because it is too large
+ 41 - 0
src/assets/font/iconfont.svg


BIN
src/assets/font/iconfont.ttf


BIN
src/assets/font/iconfont.woff


BIN
src/assets/font/iconfont.woff2


BIN
src/assets/images/1pxline.jpg


BIN
src/assets/images/2pxline.jpg


BIN
src/assets/images/3pxline.jpg


BIN
src/assets/images/copy.png


BIN
src/assets/images/dashedLine.jpg


BIN
src/assets/images/dashedLine.png


BIN
src/assets/images/delete.png


BIN
src/assets/images/dotLine.jpg


BIN
src/assets/images/dotLine.png


BIN
src/assets/images/past.png


BIN
src/assets/images/redo.png


BIN
src/assets/images/solidLine.jpg


BIN
src/assets/images/solidLine.png


BIN
src/assets/images/t-bottom-d.png


BIN
src/assets/images/t-bottom.png


BIN
src/assets/images/t-center-d.png


BIN
src/assets/images/t-center.png


BIN
src/assets/images/t-equipment-hover.png


BIN
src/assets/images/t-equipment.png


BIN
src/assets/images/t-format.png


BIN
src/assets/images/t-img-hover.png


BIN
src/assets/images/t-img.png


BIN
src/assets/images/t-left-d.png


BIN
src/assets/images/t-left.png


BIN
src/assets/images/t-level-d.png


BIN
src/assets/images/t-level.png


BIN
src/assets/images/t-line-hover.png


BIN
src/assets/images/t-line.png


BIN
src/assets/images/t-lock.png


BIN
src/assets/images/t-papeline-hover.png


BIN
src/assets/images/t-papeline.png


BIN
src/assets/images/t-position-hover.png


BIN
src/assets/images/t-position.png


BIN
src/assets/images/t-right-d.png


BIN
src/assets/images/t-right.png


BIN
src/assets/images/t-save.png


BIN
src/assets/images/t-top-d.png


BIN
src/assets/images/t-top.png


BIN
src/assets/images/t-topandbottm-d.png


BIN
src/assets/images/t-topandbottm.png


BIN
src/assets/images/t-vertical-d.png


BIN
src/assets/images/t-vertical.png


BIN
src/assets/images/undo.png


BIN
src/assets/images/放大 amplification.png


BIN
src/assets/images/缩小.png


+ 5 - 0
src/components/editview/baseTopoEditer.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        基础编辑组件
+    </div>
+</template>

+ 114 - 0
src/components/editview/leftToolBar.vue

@@ -0,0 +1,114 @@
+<!-- 左侧工具栏 -->
+<template>
+  <div class="left-tool-bar">
+    <div class="btn-list">
+      <ul>
+        <li :class="{ 'btn-active': chiceStatus==1 }" @click="openTool(1)">
+          <span class="icon iconfont iconzhongxin"></span>
+        </li>
+        <li :class="{ 'btn-active': chiceStatus==2 }" @click="openTool(2)">
+          <span class="icon iconfont icongongju"></span>
+        </li>
+        <li :class="{ 'btn-active': chiceStatus==3 }" @click="openTool(3)">
+          <span class="icon iconfont iconguandao"></span>
+        </li>
+        <li :class="{ 'btn-active': chiceStatus==4 }" @click="openTool(4)">
+          <span class="icon iconfont iconkongjian"></span>
+        </li>
+        <li :class="{ 'btn-active': chiceStatus==5 }" @click="openTool(5)">
+          <span class="icon iconfont iconlouti"></span>
+        </li>
+      </ul>
+    </div>
+    <el-drawer
+      size="240px"
+      :with-header="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :visible.sync="drawer"
+      :direction="direction"
+      :modal="false"
+      :show-close="true"
+      :before-close="handleClose"
+      :wrapperClosable="false"
+    >
+      <legendList></legendList>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import legendList from "./leftToolBar/legendList.vue";
+export default {
+  components: { legendList },
+  data() {
+    return {
+      drawer: true,
+      chiceStatus: 0, //选中按钮状态
+      direction: "ltr"
+    };
+  },
+  methods: {
+    handleClose() {
+      this.drawer = false;
+    },
+    openTool(val) {
+      if (val != this.chiceStatus) {
+        this.chiceStatus = val;
+        if (this.drawer) {
+          this.drawer = false;
+          setTimeout(() => {
+            this.drawer = true;
+          }, 300);
+        } else {
+          this.drawer = true;
+        }
+      } else {
+        this.drawer = !this.drawer;
+        this.chiceStatus = 0;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.left-tool-bar {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  height: calc(~"100% - 2px");
+  .btn-list {
+    height: 100%;
+    ul {
+      width: 60px;
+      height: 100%;
+      border-top: 1px solid #eee;
+      border-right: 1px solid #eee;
+      li {
+        width: 100%;
+        height: 60px;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+      li:hover {
+        background: #e1f2ff;
+      }
+      .btn-active {
+        background: #e1f2ff;
+      }
+    }
+  }
+}
+.el-drawer__wrapper {
+  left: 64px;
+  top: 50px;
+}
+</style>

+ 130 - 0
src/components/editview/leftToolBar/legendList.vue

@@ -0,0 +1,130 @@
+<!--左侧工具栏 -- 图例列表-->
+<template>
+  <div class="lengend-list">
+    <!-- 基础图例 -->
+    <div class="lengend-item">
+      <span class="legend-title">基础组件</span>
+      <div class="legend-content">
+        <div class="title">通用元素</div>
+        <ul>
+          <li>
+            <div class="icon"></div>
+            <span>线条</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>文本框</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>图片</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>批注</span>
+          </li>
+        </ul>
+      </div>
+      <div class="legend-content">
+        <div class="title">图形</div>
+        <ul>
+          <li>
+            <div class="icon"></div>
+            <span>矩形</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>三角形</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>圆形</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>箭头</span>
+          </li>
+        </ul>
+      </div>
+      <div class="legend-content">
+        <div class="title">图标</div>
+        <ul>
+          <li>
+            <div class="icon"></div>
+            <span>锚</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>矫正</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>面积</span>
+          </li>
+          <li>
+            <div class="icon"></div>
+            <span>箭头</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  }
+};
+</script>
+<style scoped lang="less">
+.lengend-list {
+  width: 100%;
+  .lengend-item {
+    width: 100%;
+    .legend-title {
+      display: block;
+      font-size: 20px;
+      font-weight: bold;
+      height: 40px;
+      line-height: 40px;
+      margin-left: 10px;
+    }
+    .legend-content {
+      padding: 0 10 10px 10px;
+      box-sizing: border-box;
+      .title {
+        margin-left: 10px;
+        font-weight: bold;
+        border-top: 1px solid #eee;
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+      ul {
+        display: flex;
+        justify-content: space-around;
+        li {
+          font-size: 12px;
+          width: 44px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          padding: 4px;
+          box-sizing: border-box;
+          .icon {
+            width: 22px;
+            height: 22px;
+            background: red;
+          }
+          cursor: pointer;
+        }
+        li:hover {
+          background: #e1f2ff;
+        }
+      }
+    }
+  }
+}
+</style>

+ 20 - 0
src/components/editview/rightPropertyBar.vue

@@ -0,0 +1,20 @@
+<!--右侧属性栏-->
+<template>
+  <div class="right-property-bar">右侧属性栏</div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  }
+};
+</script>
+<style lang="less" scoped>
+.right-property-bar {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  width: 240px;
+  height: calc(~"100% - 2px");
+}
+</style>

+ 173 - 0
src/components/editview/topToolBar.vue

@@ -0,0 +1,173 @@
+<template>
+  <div id="topToolBar">
+    <div class="left">
+      <ul>
+        <li class="zoom-window">
+          <div>
+            <img
+              class="lock"
+              :src="require(`./../../assets/images/缩小.png`)"
+              alt
+            />
+            <span class="percentage">{{scalePercent}}</span>
+            <img
+              class="lock"
+              :src="require(`./../../assets/images/放大 amplification.png`)"
+              alt
+            />
+          </div>
+          <span>缩放窗口</span>
+        </li>
+        <li >
+          <img class="lock" :src="require(`./../../assets/images/undo.png`)" alt />
+          <span>撤销</span>
+        </li>
+        <li >
+          <img class="lock" :src="require(`./../../assets/images/redo.png`)" alt />
+          <span>重做</span>
+        </li>
+        <li >
+          <img class="lock" :src="require(`./../../assets/images/copy.png`)" alt />
+          <span>复制</span>
+        </li>
+        <li>
+          <img class="lock" :src="require(`./../../assets/images/past.png`)" alt />
+          <span>粘贴</span>
+        </li>
+
+        <!-- <li>
+          <a-dropdown :trigger="['click']">
+            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
+              <div>
+                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
+                <div>图层</div>
+              </div>
+              <a-icon type="caret-down" class="down-icon" />
+            </div>
+            <a-menu slot="overlay">
+              <a-menu-item
+                :disabled="item.disable"
+                v-for="item in orderOptions"
+                :key="item.value"
+                @click="changeOrderItem(item.value)"
+              >
+                <img
+                  style="width: 16px;margin-right: 5px;"
+                  :src="require(`./../../assets/images/`+item.img+`.png`)"
+                  alt
+                />
+                <span>{{item.label}}</span>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </li> -->
+        <!-- <li>
+          <a-dropdown :trigger="['click']">
+            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
+              <div>
+                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
+                <div>对齐</div>
+              </div>
+              <a-icon type="caret-down" class="down-icon" />
+            </div>
+            <a-menu slot="overlay">
+              <a-menu-item
+                :disabled="item.disable"
+                v-for="item in alignmentOptions"
+                :key="item.value"
+                @click="changeAlignItem(item.value)"
+              >
+                <img
+                  style="width: 16px;margin-right: 5px;"
+                  :src="require(`./../../assets/images/`+item.img+`.png`)"
+                  alt
+                />
+                <span>{{item.label}}</span>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </li> -->
+        <!-- <li>
+          <a-icon type="edit" />
+          <span>图层</span>
+        </li>
+        <li>
+          <a-icon type="edit" />
+          <span>组合</span>
+        </li>
+        <li>
+          <a-icon type="edit" />
+          <span>打散</span>
+        </li>-->
+        <li>
+          <!-- <Icon color="#646A73" :name="isLock?'lock':'unlock'" /> -->
+          <span>{{!isLock?"解锁":"锁定"}}</span>
+        </li>
+        <li>
+          <img class="lock" :src="require(`./../../assets/images/delete.png`)" alt />
+          <span>删除</span>
+        </li>
+      </ul>
+    </div>
+    <div class="rght">
+      <!-- 待定 -->
+    </div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less">
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#topToolBar {
+  width: 100%;
+  height: 48px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px 0 24px;
+  box-sizing: border-box;
+  .left {
+    ul {
+      display: flex;
+      li {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        /*width: 62px;*/
+        padding: 0 7px;
+        margin-left: 7px;
+        font-size: 12px;
+        align-items: center;
+        text-align: center;
+        cursor: pointer;
+        img {
+          width: 16px;
+          height: 16px;
+        }
+        .percentage {
+          display: inline-block;
+          width: 35px;
+          border-bottom: 1px solid #c3c7cb;
+          margin: 0 13px;
+          font-size: 14px;
+        }
+        .dropdown-flex {
+          display: flex;
+          align-items: center;
+          .down-icon {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 46 - 5
src/components/editview/topoEditer.vue

@@ -1,12 +1,30 @@
 <template>
-  <div>
-    <canvas id="persagy_topo"></canvas>
+  <div class="topo-editer">
+    <div class="top-bar">
+      <topToolBar></topToolBar>
+    </div>
+    <div class="contents">
+      <div class="left-bar">
+        <leftToolBar></leftToolBar>
+      </div>
+      <div class="base-topo-editer">
+        <baseTopoEditer></baseTopoEditer>
+      </div>
+      <div class="right-bar">
+        <rightPropertyBar></rightPropertyBar>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { PTopoScene } from "@/components/editClass/persagy-edit";
 import { SGraphView } from "@persagy-web/graph";
+import leftToolBar from "./leftToolBar";
+import rightPropertyBar from "./rightPropertyBar";
+import baseTopoEditer from "./baseTopoEditer";
+import topToolBar from "./topToolBar";
 export default {
+  components: { leftToolBar, rightPropertyBar, topToolBar, baseTopoEditer },
   data() {
     return {
       view: null,
@@ -14,8 +32,31 @@ export default {
     };
   },
   mounted() {
-    this.scene = PTopoScene;
-    this.view = SGraphView;
+    // this.scene = new PTopoScene();
+    // this.view = new SGraphView("persagy_topo");
   }
 };
-</script>
+</script>
+<style lang="less">
+.topo-editer {
+  width: 100%;
+  height: 100%;
+  .top-bar {
+    width: 100%;
+  }
+  .contents {
+    width: 100%;
+    height: calc(~"100% - 48px");
+    display: flex;
+    justify-content: flex-start;
+    .right-bar {
+      width: 240px;
+      height: 100%;
+    }
+    .base-topo-editer {
+      flex: 1;
+      height: 100%;
+    }
+  }
+}
+</style>

+ 4 - 0
src/main.ts

@@ -2,7 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './assets/font/iconfont.css';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';;
 
+Vue.use(ElementUI);
 Vue.config.productionTip = false
 
 new Vue({

+ 7 - 2
src/views/editer.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="about">
-    编辑页面
+  <div class="editer">
     <topo-editer></topo-editer>
   </div>
 </template>
@@ -13,3 +12,9 @@ export default {
   }
 };
 </script>
+<style lang="less" scoped>
+  .editer{
+    width: 100%;
+    height: 100%;
+  }
+</style>

+ 3 - 0
vue.config.ts

@@ -0,0 +1,3 @@
+module.exports = {
+    lintOnSave: false,
+}