Merge pull request #664 from veops/dev_ui_241226

feat(ui): update relative views menu display
veops · Dec 26, 2024 · 25f6bbc · 25f6bbc
2 parents 89db5a0 + bc32016
commit 25f6bbc
Show file tree

Hide file tree

Showing 14 changed files with 915 additions and 444 deletions.
diff --git a/cmdb-ui/public/iconfont/demo_index.html b/cmdb-ui/public/iconfont/demo_index.html
@@ -54,6 +54,54 @@ <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" targ
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+              <span class="icon iconfont">&#xea0b;</span>
+                <div class="name">veops-servicetree</div>
+                <div class="code-name">&amp;#xea0b;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea0a;</span>
+                <div class="name">veops-switch (1)</div>
+                <div class="code-name">&amp;#xea0a;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea09;</span>
+                <div class="name">veops-label</div>
+                <div class="code-name">&amp;#xea09;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea08;</span>
+                <div class="name">top_acl</div>
+                <div class="code-name">&amp;#xea08;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea06;</span>
+                <div class="name">top_ticket</div>
+                <div class="code-name">&amp;#xea06;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea07;</span>
+                <div class="name">top_agent</div>
+                <div class="code-name">&amp;#xea07;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea05;</span>
+                <div class="name">itsm-table_download</div>
+                <div class="code-name">&amp;#xea05;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xea04;</span>
+                <div class="name">itsm-image_download</div>
+                <div class="code-name">&amp;#xea04;</div>
+              </li>
+
             <li class="dib">
               <span class="icon iconfont">&#xea02;</span>
                 <div class="name">veops-rear</div>
@@ -6162,9 +6210,9 @@ <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</co
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1732673294759') format('woff2'),
-       url('iconfont.woff?t=1732673294759') format('woff'),
-       url('iconfont.ttf?t=1732673294759') format('truetype');
+  src: url('iconfont.woff2?t=1735191938771') format('woff2'),
+       url('iconfont.woff?t=1735191938771') format('woff'),
+       url('iconfont.ttf?t=1735191938771') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -6190,6 +6238,78 @@ <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面
       <div class="content font-class">
         <ul class="icon_lists dib-box">
 
+          <li class="dib">
+            <span class="icon iconfont veops-servicetree"></span>
+            <div class="name">
+              veops-servicetree
+            </div>
+            <div class="code-name">.veops-servicetree
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont veops-switch1"></span>
+            <div class="name">
+              veops-switch (1)
+            </div>
+            <div class="code-name">.veops-switch1
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont veops-label"></span>
+            <div class="name">
+              veops-label
+            </div>
+            <div class="code-name">.veops-label
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont top_acl"></span>
+            <div class="name">
+              top_acl
+            </div>
+            <div class="code-name">.top_acl
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont top_ticket"></span>
+            <div class="name">
+              top_ticket
+            </div>
+            <div class="code-name">.top_ticket
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont top_agent"></span>
+            <div class="name">
+              top_agent
+            </div>
+            <div class="code-name">.top_agent
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont itsm-table_download"></span>
+            <div class="name">
+              itsm-table_download
+            </div>
+            <div class="code-name">.itsm-table_download
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont itsm-image_download"></span>
+            <div class="name">
+              itsm-image_download
+            </div>
+            <div class="code-name">.itsm-image_download
+            </div>
+          </li>
+
           <li class="dib">
             <span class="icon iconfont veops-rear"></span>
             <div class="name">
@@ -15352,6 +15472,70 @@ <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h
       <div class="content symbol">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-servicetree"></use>
+                </svg>
+                <div class="name">veops-servicetree</div>
+                <div class="code-name">#veops-servicetree</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-switch1"></use>
+                </svg>
+                <div class="name">veops-switch (1)</div>
+                <div class="code-name">#veops-switch1</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#veops-label"></use>
+                </svg>
+                <div class="name">veops-label</div>
+                <div class="code-name">#veops-label</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#top_acl"></use>
+                </svg>
+                <div class="name">top_acl</div>
+                <div class="code-name">#top_acl</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#top_ticket"></use>
+                </svg>
+                <div class="name">top_ticket</div>
+                <div class="code-name">#top_ticket</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#top_agent"></use>
+                </svg>
+                <div class="name">top_agent</div>
+                <div class="code-name">#top_agent</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#itsm-table_download"></use>
+                </svg>
+                <div class="name">itsm-table_download</div>
+                <div class="code-name">#itsm-table_download</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#itsm-image_download"></use>
+                </svg>
+                <div class="name">itsm-image_download</div>
+                <div class="code-name">#itsm-image_download</div>
+            </li>
+
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#veops-rear"></use>

diff --git a/cmdb-ui/public/iconfont/iconfont.css b/cmdb-ui/public/iconfont/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3857903 */
-  src: url('iconfont.woff2?t=1732673294759') format('woff2'),
-       url('iconfont.woff?t=1732673294759') format('woff'),
-       url('iconfont.ttf?t=1732673294759') format('truetype');
+  src: url('iconfont.woff2?t=1735191938771') format('woff2'),
+       url('iconfont.woff?t=1735191938771') format('woff'),
+       url('iconfont.ttf?t=1735191938771') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.veops-servicetree:before {
+  content: "\ea0b";
+}
+
+.veops-switch1:before {
+  content: "\ea0a";
+}
+
+.veops-label:before {
+  content: "\ea09";
+}
+
+.top_acl:before {
+  content: "\ea08";
+}
+
+.top_ticket:before {
+  content: "\ea06";
+}
+
+.top_agent:before {
+  content: "\ea07";
+}
+
+.itsm-table_download:before {
+  content: "\ea05";
+}
+
+.itsm-image_download:before {
+  content: "\ea04";
+}
+
 .veops-rear:before {
   content: "\ea02";
 }

diff --git a/cmdb-ui/public/iconfont/iconfont.js b/cmdb-ui/public/iconfont/iconfont.js
diff --git a/cmdb-ui/public/iconfont/iconfont.json b/cmdb-ui/public/iconfont/iconfont.json
@@ -5,6 +5,62 @@
   "css_prefix_text": "",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "42930714",
+      "name": "veops-servicetree",
+      "font_class": "veops-servicetree",
+      "unicode": "ea0b",
+      "unicode_decimal": 59915
+    },
+    {
+      "icon_id": "42921461",
+      "name": "veops-switch (1)",
+      "font_class": "veops-switch1",
+      "unicode": "ea0a",
+      "unicode_decimal": 59914
+    },
+    {
+      "icon_id": "42857659",
+      "name": "veops-label",
+      "font_class": "veops-label",
+      "unicode": "ea09",
+      "unicode_decimal": 59913
+    },
+    {
+      "icon_id": "42790685",
+      "name": "top_acl",
+      "font_class": "top_acl",
+      "unicode": "ea08",
+      "unicode_decimal": 59912
+    },
+    {
+      "icon_id": "42790687",
+      "name": "top_ticket",
+      "font_class": "top_ticket",
+      "unicode": "ea06",
+      "unicode_decimal": 59910
+    },
+    {
+      "icon_id": "42790686",
+      "name": "top_agent",
+      "font_class": "top_agent",
+      "unicode": "ea07",
+      "unicode_decimal": 59911
+    },
+    {
+      "icon_id": "42732510",
+      "name": "itsm-table_download",
+      "font_class": "itsm-table_download",
+      "unicode": "ea05",
+      "unicode_decimal": 59909
+    },
+    {
+      "icon_id": "42732515",
+      "name": "itsm-image_download",
+      "font_class": "itsm-image_download",
+      "unicode": "ea04",
+      "unicode_decimal": 59908
+    },
     {
       "icon_id": "42510712",
       "name": "veops-rear",

diff --git a/cmdb-ui/public/iconfont/iconfont.ttf b/cmdb-ui/public/iconfont/iconfont.ttf
diff --git a/cmdb-ui/public/iconfont/iconfont.woff b/cmdb-ui/public/iconfont/iconfont.woff
diff --git a/cmdb-ui/public/iconfont/iconfont.woff2 b/cmdb-ui/public/iconfont/iconfont.woff2
diff --git a/cmdb-ui/src/components/Menu/menu.js b/cmdb-ui/src/components/Menu/menu.js
@@ -171,7 +171,6 @@ export default {
     },
     renderMenuItem(menu) {
       const isShowDot = menu.path.substr(0, 22) === '/cmdb/instances/types/'
-      const isShowGrant = menu.path.substr(0, 20) === '/cmdb/relationviews/'
       const target = menu.meta.target || null
       const tag = target && 'a' || 'router-link'
       const props = { to: { name: menu.name } }
@@ -205,11 +204,9 @@ export default {
                   <a-icon type="menu" ref="extraEllipsis" class="custom-menu-extra-ellipsis"></a-icon>
                 </a-popover>
               }
-              {isShowGrant && <a-icon class="custom-menu-extra-ellipsis" onClick={e => this.handlePerm(e, menu, 'RelationView')} type="user-add" />}
             </span>
           </tag>
           {isShowDot && <CMDBGrant ref="cmdbGrantCIType" resourceType="CIType" app_id="cmdb" />}
-          {isShowGrant && <CMDBGrant ref="cmdbGrantRelationView" resourceType="RelationView" app_id="cmdb" />}
         </Item>
       )
     },

diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue b/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
@@ -88,6 +88,7 @@ import ReadGrantModal from './readGrantModal'
 import RelationViewGrant from './relationViewGrant.vue'
 import TopologyViewGrant from './topologyViewGrant.vue'
 import { getCITypeGroupById, ciTypeFilterPermissions } from '../../api/CIType'
+import { CI_DEFAULT_ATTR } from '@/modules/cmdb/utils/const.js'
 
 export default {
   name: 'GrantComp',
@@ -186,6 +187,13 @@ export default {
     },
     getFilterPermissions() {
       ciTypeFilterPermissions(this.CITypeId).then((res) => {
+        Object.keys(res).forEach((key) => {
+          const attr_filter = res?.[key]?.attr_filter
+          if (attr_filter?.length) {
+            res[key].attr_filter = attr_filter.filter((item) => ![CI_DEFAULT_ATTR.UPDATE_USER, CI_DEFAULT_ATTR.UPDATE_TIME].includes(item))
+          }
+        })
+
         this.filerPerimissions = res
       })
     },

diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -26,7 +26,8 @@ const cmdb_en = {
         ad: 'AutoDiscovery',
         cidetail: 'CI Detail',
         scene: 'Scene',
-        dcim: 'DCIM'
+        dcim: 'DCIM',
+        serviceTree: 'Service Tree'
     },
     ciType: {
         ciType: 'CIType',

diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -26,7 +26,8 @@ const cmdb_zh = {
         ad: '自动发现',
         cidetail: 'CI 详情',
         scene: '场景',
-        dcim: '数据中心'
+        dcim: '数据中心',
+        serviceTree: '服务树'
     },
     ciType: {
         ciType: '模型',