style(权限管理): 交互优化

2022-07-26 20:36:46 +08:00 · 2022-07-26 20:36:46 +08:00 · c96c84e0c4
commit c96c84e0c4
parent 553c46c583
17 changed files with 58 additions and 22 deletions
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@ -4,7 +4,7 @@
      <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
      <span>{{ routeTitle }}</span>
    </p>
-    <div class="container-wrapper" :class="[isDept ? 'dept-padding' : '']">
+    <div class="container-wrapper" :class="[needInnerPadding ? 'layout-inner-padding' : '']">
      <slot />
    </div>
  </div>
@ -33,8 +33,8 @@ export default {
    showBack({ backPath, backName, backTo }) {
      return backPath || backName || backTo
    },
-    isDept() {
-      return ['system-dept', 'system-dept-form'].includes(this.$route.name)
+    needInnerPadding() {
+      return ['system-dept', 'system-dept-form', 'system-auth'].includes(this.$route.name)
    }
  }
 }
@ -74,7 +74,7 @@ export default {
    flex: 1;
  }

-  .dept-padding {
+  .layout-inner-padding {
    padding: 0;
    margin-top: 16px;
  }
--- a/frontend/src/icons/svg/none_select.svg
+++ b/frontend/src/icons/svg/none_select.svg
@ -1,5 +1,5 @@
 <svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="125" height="125" rx="62.5" fill="#EFF0F1"/>
-<path d="M68.6525 91.3927C67.7195 93.8379 64.2695 93.8652 63.2978 91.4358L47.0339 50.7747C46.0952 48.4287 48.424 46.0985 50.7714 47.0372L91.4296 63.3011C93.8547 64.2714 93.8346 67.7113 91.398 68.6529L74.8998 75.0253L68.6525 91.3942V91.3927ZM65.904 82.4702L69.9836 71.7809C70.1273 71.4047 70.3485 71.0629 70.6328 70.7776C70.9171 70.4923 71.2581 70.27 71.6338 70.1249L82.5042 65.926L54.864 54.8702L65.904 82.4702Z" fill="#BBBFC4"/>
-<path d="M48.125 32.3125C56.7026 32.3125 63.6859 39.1421 63.9303 47.6607L57.7534 45.1896C57.2462 43.5293 56.3182 42.0284 55.0594 40.8329C53.8006 39.6373 52.2538 38.7878 50.5696 38.3669C48.8853 37.9459 47.1208 37.9679 45.4476 38.4307C43.7743 38.8934 42.2493 39.7812 41.0206 41.0077C39.792 42.2343 38.9016 43.7578 38.436 45.4302C37.9703 47.1027 37.9453 48.8672 38.3634 50.5521C38.7814 52.2371 39.6283 53.7853 40.8217 55.0461C42.0151 56.307 43.5143 57.2376 45.1738 57.7476L47.6463 63.9303C39.1334 63.6773 32.3125 56.6982 32.3125 48.125C32.3125 39.3922 39.3922 32.3125 48.125 32.3125Z" fill="#BBBFC4"/>
+<rect width="125" height="125" rx="62.5" fill="#EBEBEB"/>
+<path d="M68.6525 91.3927C67.7195 93.8379 64.2695 93.8652 63.2978 91.4358L47.0339 50.7747C46.0952 48.4287 48.424 46.0985 50.7714 47.0372L91.4296 63.3011C93.8547 64.2714 93.8346 67.7113 91.398 68.6529L74.8998 75.0253L68.6525 91.3942V91.3927ZM65.904 82.4702L69.9836 71.7809C70.1273 71.4047 70.3485 71.0629 70.6328 70.7776C70.9171 70.4923 71.2581 70.27 71.6338 70.1249L82.5042 65.926L54.864 54.8702L65.904 82.4702Z" fill="#8F959E"/>
+<path d="M48.125 32.3125C56.7026 32.3125 63.6859 39.1421 63.9303 47.6607L57.7534 45.1896C57.2462 43.5293 56.3182 42.0284 55.0594 40.8329C53.8006 39.6373 52.2538 38.7878 50.5696 38.3669C48.8853 37.9459 47.1208 37.9679 45.4476 38.4307C43.7743 38.8934 42.2493 39.7812 41.0206 41.0077C39.792 42.2343 38.9016 43.7578 38.436 45.4302C37.9703 47.1027 37.9453 48.8672 38.3634 50.5521C38.7814 52.2371 39.6283 53.7853 40.8217 55.0461C42.0151 56.307 43.5143 57.2376 45.1738 57.7476L47.6463 63.9303C39.1334 63.6773 32.3125 56.6982 32.3125 48.125C32.3125 39.3922 39.3922 32.3125 48.125 32.3125Z" fill="#8F959E"/>
 </svg>
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1880,6 +1880,9 @@ export default {

  },
  auth: {
+    no_item_selected: 'Please select resources on the left',
+    search_pre: 'Search by ',
+    search_suf: ' name',
    separate_auth: 'Separate Authorization',
    auth_extent_tips: 'Permissions Inherited From The Following Organizations Or Roles:',
    authConfig: 'Configure Permissions By User',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1889,6 +1889,9 @@ export default {

  },
  auth: {
+    no_item_selected: '请在左侧选择资源',
+    search_pre: '通过',
+    search_suf: '名称来搜索',
    separate_auth: '单独授权',
    auth_extent_tips: '继承自以下组织或角色的权限:',
    authConfig: '按用戶配置權限',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1898,6 +1898,9 @@ export default {

  },
  auth: {
+    no_item_selected: '请在左侧选择资源',
+    search_pre: '通过',
+    search_suf: '名称来搜索',
    separate_auth: '单独授权',
    auth_extent_tips: '继承自以下组织或角色的权限:',
    authConfig: '按用户配置权限',
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
@ -54,6 +54,12 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">None_Select</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">button_right</div>
@ -762,9 +768,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1658301977080') format('woff2'),
-       url('iconfont.woff?t=1658301977080') format('woff'),
-       url('iconfont.ttf?t=1658301977080') format('truetype');
+  src: url('iconfont.woff2?t=1658831065507') format('woff2'),
+       url('iconfont.woff?t=1658831065507') format('woff'),
+       url('iconfont.ttf?t=1658831065507') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -790,6 +796,15 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont icon-None_Select"></span>
+            <div class="name">
+              None_Select
+            </div>
+            <div class="code-name">.icon-None_Select
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont icon-button_right"></span>
            <div class="name">
@ -1852,6 +1867,14 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-None_Select"></use>
+                </svg>
+                <div class="name">None_Select</div>
+                <div class="code-name">#icon-None_Select</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-button_right"></use>
--- a/frontend/src/styles/deicon/iconfont.css
+++ b/frontend/src/styles/deicon/iconfont.css
@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1658301977080') format('woff2'),
-       url('iconfont.woff?t=1658301977080') format('woff'),
-       url('iconfont.ttf?t=1658301977080') format('truetype');
+  src: url('iconfont.woff2?t=1658831065507') format('woff2'),
+       url('iconfont.woff?t=1658831065507') format('woff'),
+       url('iconfont.ttf?t=1658831065507') format('truetype');
 }

 .iconfont {
@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-None_Select:before {
+  content: "\e638";
+}
+
 .icon-button_right:before {
  content: "\e635";
 }
--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
--- a/frontend/src/styles/deicon/iconfont.json
+++ b/frontend/src/styles/deicon/iconfont.json
@ -5,6 +5,13 @@
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
+    {
+      "icon_id": "30874154",
+      "name": "None_Select",
+      "font_class": "None_Select",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
    {
      "icon_id": "30729285",
      "name": "button_right",
--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2
--- a/frontend/src/views/dataset/data/components/LazyTree.vue
+++ b/frontend/src/views/dataset/data/components/LazyTree.vue
@ -336,8 +336,6 @@ export default {
    padding-left: 8px;
  }
  .tree-main{
-    height:  calc(100vh - 210px);
-    border: 1px solid #e6e6e6;
    overflow-y: auto;
  }
  .blackTheme .tree-main {
--- a/frontend/src/views/msg/setting.vue
+++ b/frontend/src/views/msg/setting.vue
@ -229,8 +229,6 @@ export default {
    padding-left: 8px;
  }
  .tree-main{
-    height:  calc(100vh - 210px);
-    border: 1px solid #e6e6e6;
    overflow-y: auto;
  }
  .tree-head{
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@ -251,7 +251,6 @@ export default {
  }
  .tree-main{
    height:  calc(100vh - 210px);
-    border: 1px solid #e6e6e6;
    overflow-y: auto;
  }
  /* .tree-head{
--- a/frontend/src/views/system/authority/components/LazyTree.vue
+++ b/frontend/src/views/system/authority/components/LazyTree.vue
@ -296,8 +296,6 @@ export default {
    padding-left: 8px;
  }
  .tree-main{
-    height:  calc(100vh - 210px);
-    border: 1px solid #e6e6e6;
    overflow-y: auto!important;
  }
  /* .tree-head{
--- a/frontend/src/views/system/plugin/dynamic.vue
+++ b/frontend/src/views/system/plugin/dynamic.vue
@ -47,7 +47,7 @@ export default {
      backName: null,
      baseUrl: '/api/pluginCommon/async/',
      url: null,
-      innerLoadingNames: ['SystemDept', 'SystemRole']
+      innerLoadingNames: ['SystemDept', 'SystemRole', 'SystemAuth']
    }
  },
  created() {