refactor: improve ui (#113)

Author: webfansplz

src/client/components/ComponentTreeNode.vue

@@ -26,7 +26,7 @@ const { isSelected, select, isExpanded, toggleExpand } = useComponent(props.data
           isSelected ? 'vue-tag-symbol-active' : 'vue-tag-symbol',
         ]"
       >&lt;</span>
-      <span :class="[isSelected ? 'text-white' : 'vue-block-text']">
+      <span :class="[isSelected && 'text-white']">
         {{ data.name }}
       </span>
       <span

src/client/logic/routes.ts

@@ -27,7 +27,7 @@ type RouteRecordTags = {
 const CYAN_400 = 0x22D3EE
 const ORANGE_400 = 0xFB923C
 // const GRAY_100 = 0xf4f4f5
-const DARK = 0x666666
+const GRAY_300 = 0xC4C4C4
 
 const LAYER_ID = 'router'
 // export const router = ref<Router>()
@@ -52,7 +52,7 @@ export const activeRouteRecordMatcherState = computed(() => {
   const state = routeRecordMatcherState.value?.[activeRouteRecordIndex.value]?.state
   return {
     key: 'options',
-    value: state,
+    value: state!,
   }
 })
 
@@ -112,7 +112,7 @@ function formatRouteRecordForInspector(
         typeof record.redirect === 'string'
           ? `redirect: ${record.redirect}`
           : 'redirects',
-      bgColor: DARK,
+      bgColor: GRAY_300,
     })
   }
 

src/client/pages/pinia.vue

@@ -31,21 +31,21 @@ const data = computed(() => {
 <template>
   <div h-screen n-panel-grids>
     <Splitpanes>
-      <Pane border="r base">
+      <Pane border="r base" :size="40">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <div
             v-for="(item, index) in piniaStoresCategory" :key="index" vue-block
             :class="[activeIndex === index ? 'vue-block-active' : 'vue-block-hover']" @click="select(index)"
           >
             <h3 vue-block-title>
-              <span :class="[activeIndex === index ? 'text-white' : 'vue-block-text']">
+              <span :class="[activeIndex === index && 'text-white']">
                 {{ item }}
               </span>
             </h3>
           </div>
         </div>
       </Pane>
-      <Pane>
+      <Pane :size="60">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <StateFields v-for="(item, index) in data" :id="index" :key="index" :data="item" />
         </div>

src/client/pages/routes.vue

@@ -7,7 +7,7 @@ import { activeRouteRecordIndex, activeRouteRecordMatcherState, routeRecordMatch
 <template>
   <div v-if="router" h-screen n-panel-grids>
     <Splitpanes>
-      <Pane border="r base">
+      <Pane border="r base" size="40">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <div
             v-for="(item, index) in routeRecordMatcherState"
@@ -17,15 +17,15 @@ import { activeRouteRecordIndex, activeRouteRecordMatcherState, routeRecordMatch
             @click="toggleRouteRecordMatcher(index)"
           >
             <h3 vue-block-title>
-              <span :class="[activeRouteRecordIndex === index ? 'text-white' : 'vue-block-text']">
+              <span :class="[activeRouteRecordIndex === index && 'text-white']">
                 {{ item.path }}
                 <template
                   v-for="(tag, childIndex) in item.tags"
                 >
                   <VBadge
                     v-if="tag.label"
                     :key="childIndex"
-                    text-black
+                    color="white/90 dark:black/90"
                     :style="{
                       backgroundColor: `#${tag.bgColor.toString(16)}`,
                     }"
@@ -38,7 +38,7 @@ import { activeRouteRecordIndex, activeRouteRecordMatcherState, routeRecordMatch
           </div>
         </div>
       </Pane>
-      <Pane>
+      <Pane size="60">
         <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <StateFields :data="activeRouteRecordMatcherState" />
         </div>

src/client/pages/timeline.vue

@@ -26,7 +26,7 @@ import {
             @click="toggleTimelineLayer(item.id)"
           >
             <h3 vue-block-title>
-              <span truncate :class="[activeLayerId === item.id ? 'text-white' : 'vue-block-text']">
+              <span truncate :class="[activeLayerId === item.id && 'text-white']">
                 {{ item.label }}
               </span>
             </h3>

src/client/uno.config.ts

@@ -29,8 +29,8 @@ export default defineConfig({
       'vue-block-hover': 'hover:dark:bg-[#2c3e50] hover:bg-[#c2e9d7]',
       'vue-block-active': 'bg-[#3ba776] text-white',
       'vue-block-text': 'text-#42b983',
-      'vue-block-title': 'flex items-center pl-2 text-sm font-400 h-8 lh-8',
-      'vue-block': 'mb-2 max-w-90% cursor-pointer rounded',
+      'vue-block-title': 'flex items-center pl-2 text-sm font-400 lh-8',
+      'vue-block': 'mb-2 cursor-pointer',
 
       // Vue tag
       'vue-tag-symbol': 'text-gray-400 dark:text-gray-600',