feat(gui-v2): mark open table & view

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -185,7 +185,11 @@ const addTableTab = (table: TableType) => {
                 v-for="table of tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="[{ hidden: !filteredTables?.includes(table) }, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
+                :class="[
+                  { hidden: !filteredTables?.includes(table) },
+                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                  route.params.title.includes(table.title) ? 'bg-blue-500/15' : '',
+                ]"
                 class="pl-5 pr-3 py-2 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
@@ -199,7 +203,11 @@ const addTableTab = (table: TableType) => {
                       @click.stop.prevent
                     />
 
-                    <component :is="icon(table)" class="nc-view-icon group-hover:hidden text-xs text-pink-500" />
+                    <component
+                      :is="icon(table)"
+                      :class="route.params.title.includes(table.title) ? 'text-pink-500' : 'text-gray-500'"
+                      class="nc-view-icon group-hover:hidden text-xs"
+                    />
                   </div>
 
                   <div class="nc-tbl-title text-xs flex-1">{{ table.title }}</div>

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -6,7 +6,7 @@ import { notification } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { inject, onMounted, ref, useApi, useRouter, watch } from '#imports'
+import { inject, onMounted, ref, useApi, useRoute, useRouter, watch } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 import { ActiveViewInj, ViewListInj } from '~/context'
 
@@ -26,6 +26,8 @@ const { api } = useApi()
 
 const router = useRouter()
 
+const route = useRoute()
+
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
@@ -192,7 +194,7 @@ function onDeleted() {
       :key="view.id"
       :view="view"
       class="transition-all ease-in duration-300"
-      :class="[isMarked === view.id ? 'bg-gray-200' : '']"
+      :class="[isMarked === view.id ? 'bg-gray-200' : '', route.params.viewTitle.includes(view.title) ? 'bg-blue-500/15' : '']"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
       @delete="onDelete"