From 56ea95150185870d216f1a661eddd2d899bac90d Mon Sep 17 00:00:00 2001
From: jishuai-cool <68739663+jishuai-cool@users.noreply.github.com>
Date: Mon, 4 Sep 2023 04:03:17 -0700
Subject: [PATCH] Dev js (#90)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 同步主题配置

* 控制菜单显隐属性添加

* 控制菜单显隐属性添加

* 菜单属性显隐控制

* 菜单属性显隐控制-优化

---------

Co-authored-by: wwj <664027523@qq.com>
---
 .../tinyvue/src/components/menu/index.vue     | 32 ++++++++++++++++---
 .../tinyvue/src/layout/default-layout.vue     |  6 ++--
 .../pro/template/tinyvue/src/locale/en-US.ts  |  2 +-
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
index bc0ab587..d165e950 100644
--- a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
@@ -2,7 +2,7 @@
   <div class="menu-router">
     <tiny-tree-menu
       ref="tree"
-      :data="treeData"
+      :data="treeDataFilter"
       :show-filter="false"
       node-key="id"
       wrap
@@ -37,6 +37,7 @@
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import router from '@/router';
   import { useUserStore } from '@/store';
+  import { TabItem } from '@opentiny/vue';
 
   // icon图标
   const iconDownloadCloud = IconDownloadCloud();
@@ -204,6 +205,18 @@
   const userStore = useUserStore();
   const role = computed(() => userStore.role);
   let treeData = ref(copyRouter);
+  const treeDataForEach = (arr: any[]) => {
+    return arr.filter((e: { children: any[]; meta: { hideInMenu: any } }) => {
+      if (e.children) {
+        e.children = e.children.filter((v: { meta: { hideInMenu: any } }) => {
+          return !v.meta.hideInMenu;
+        });
+        treeDataForEach(e.children);
+      }
+      return !e.meta.hideInMenu;
+    });
+  };
+  const treeDataFilter = treeDataForEach(treeData.value);
 
   watch(
     role,
@@ -255,7 +268,6 @@
 </script>
 
 <style lang="less" scoped>
-
   .main-title {
     height: 20px;
     font-size: 14px;
@@ -284,12 +296,22 @@
       height: 1.3em;
     }
   }
-  :deep(.tiny-tree-menu .tiny-tree .tiny-tree-node.is-current>.tiny-tree-node__content) {
+  :deep(.tiny-tree-node__wrapper > .is-current > .tiny-tree-node__content) {
+    background: var(--ti-tree-menu-node-hover-bg-color);
+    margin-left: 0 !important;
     &:hover {
-      background: var(--ti-tree-menu-node-hover-bg-color) !important;   
+      background: var(--ti-tree-menu-node-hover-bg-color) !important;
     }
   }
-  .tiny-tree-menu .tiny-tree .tiny-tree-node.is-current > .tiny-tree-node__content .tree-node-name .tiny-svg {
+  :deep(.tiny-tree-node > .tiny-tree-node__content) {
+    margin-left: 0 !important;
+  }
+  .tiny-tree-menu
+    .tiny-tree
+    .tiny-tree-node.is-current
+    > .tiny-tree-node__content
+    .tree-node-name
+    .tiny-svg {
     fill: var(--ti-base-icon-color);
   }
 </style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue b/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue
index f1bd7b95..d071648c 100644
--- a/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue
@@ -186,12 +186,14 @@
 
   // 路由子菜单选中后的样式
   :deep(.tiny-tree-node__children .tiny-tree-node__content) {
-    padding-left: 28px !important;
     .tree-node-name {
+      margin-left: 60px !important;
       padding-left: 6px !important;
     }
   }
-
+   :deep(.tiny-tree-node__children > .tree-node-body) {
+    padding-left: 50px;
+   }
   .theme-box {
     position: fixed;
     top: 88%;
diff --git a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
index cb31af78..723c8bc9 100644
--- a/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
+++ b/packages/toolkits/pro/template/tinyvue/src/locale/en-US.ts
@@ -46,7 +46,7 @@ export default {
   'messageBox.userCenter': 'User Center',
   'messageBox.userSettings': 'User Settings',
   'messageBox.logout': 'Logout',
-  'menu.cloud': 'Cloud service capability display',
+  'menu.cloud': 'Cloud service capability',
   ...localeTheme,
   ...localeSettings,
   ...localeLogin,