fix(ui): Fixed menu layout anomaly (#906)

devlive-community · Jan 22, 2025 · 424192e · 424192e
2 parents 7f7d0c8 + 88f4373
commit 424192e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 12 deletions.
diff --git a/core/datacap-ui/package.json b/core/datacap-ui/package.json
@@ -27,7 +27,7 @@
     "lodash": "^4.17.21",
     "md-editor-v3": "^4.12.1",
     "uuid": "^9.0.1",
-    "view-shadcn-ui": "^2025.1.1",
+    "view-shadcn-ui": "^2025.1.2",
     "vue": "^3.4.21",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.10.1",

diff --git a/core/datacap-ui/pnpm-lock.yaml b/core/datacap-ui/pnpm-lock.yaml
diff --git a/core/datacap-ui/src/views/layouts/common/components/LayoutHeader.vue b/core/datacap-ui/src/views/layouts/common/components/LayoutHeader.vue
@@ -28,6 +28,7 @@
                 </template>
 
                 <ShadcnMenuItem v-for="children in item.children"
+                                class="w-full"
                                 :name="children.id"
                                 :active="$route.path === children.url"
                                 :to="children.url">
@@ -38,6 +39,7 @@
                 </ShadcnMenuItem>
               </ShadcnMenuSub>
               <ShadcnMenuItem v-else
+                              class="w-full"
                               :name="item.id"
                               :active="$route.path === item.url"
                               :to="item.url">
@@ -50,16 +52,16 @@
           </ShadcnMenu>
         </ShadcnLayoutHeader>
 
-        <ShadcnSpace>
+        <ShadcnSpace size="large">
           <!-- Language Switcher -->
-          <div class="mr-3 mt-2.5 items-center">
+          <div class="mt-2.5 items-center">
             <ShadcnTooltip :content="$t('common.feedback')">
               <ShadcnLink link="https://github.com/devlive-community/datacap" external target="_blank">
                 <ShadcnIcon icon="CircleHelp" :size="20"/>
               </ShadcnLink>
             </ShadcnTooltip>
           </div>
-          <div class="ml-3 mr-5 mt-1">
+          <div class="mt-1">
             <LanguageSwitcher @changeLanguage="onChangeLanguage($event)"/>
           </div>
           <!-- User Info -->
@@ -74,7 +76,11 @@
           <div v-else>
             <ShadcnDropdown position="right">
               <template #trigger>
-                <ShadcnAvatar :src="userInfo.avatar" :alt="userInfo.username"/>
+                <ShadcnAvatar class="mt-1"
+                              style="width: 2rem;"
+                              :src="userInfo.avatar"
+                              :alt="userInfo.username">
+                </ShadcnAvatar>
               </template>
 
               <ShadcnDropdownItem>

diff --git a/core/datacap-ui/src/views/layouts/profile/LayoutContainer.vue b/core/datacap-ui/src/views/layouts/profile/LayoutContainer.vue
@@ -7,7 +7,7 @@
           <ShadcnLayoutSider class="mr-4">
             <LayoutSidebar/>
           </ShadcnLayoutSider>
-          <ShadcnLayoutMain class="ml-2">
+          <ShadcnLayoutMain class="ml-20">
             <ShadcnLayoutContent>
               <RouterView/>
             </ShadcnLayoutContent>

diff --git a/core/datacap-ui/src/views/layouts/profile/components/LayoutSidebar.vue b/core/datacap-ui/src/views/layouts/profile/components/LayoutSidebar.vue
@@ -1,6 +1,7 @@
 <template>
   <ShadcnMenu>
     <ShadcnMenuItem v-for="item in items"
+                    class="w-full"
                     :name="item.title"
                     :to="item.href"
                     :active="$route.path === `${item.href}`">

diff --git a/core/datacap-ui/src/views/pages/admin/query/QueryHome.vue b/core/datacap-ui/src/views/pages/admin/query/QueryHome.vue
@@ -106,7 +106,7 @@
                                       trigger: ['.', '@'],
                                       headers: { 'Authorization': auth?.type + ' ' + auth?.token },
                                       transform: (response: any) => {
-                                        return response.data.columns.map((item: any) => ({
+                                        return response[0].data.columns.map((item: any) => ({
                                           label: item.object_name,
                                           insertText: item.object_name,
                                           detail: item.object_name,