style(projects): perf layout card style

soybeanjs · Nov 11, 2023 · fc409db · fc409db
1 parent 93f1806
commit fc409db
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
@@ -30,14 +30,26 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
+  class: 'h-36px text-icon',
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
   triggerParent: false
 });
 
-const cls = computed(() => props.class);
+const cls = computed(() => {
+  let clsStr = props.class;
+
+  if (!clsStr.includes('h-')) {
+    clsStr += ' h-36px';
+  }
+
+  if (!clsStr.includes('text-')) {
+    clsStr += ' text-icon';
+  }
+
+  return clsStr;
+});
 
 function getPopupContainer(triggerNode: HTMLElement) {
   return props.triggerParent ? triggerNode.parentElement! : document.body;
@@ -51,15 +63,15 @@ function getPopupContainer(triggerNode: HTMLElement) {
     :get-popup-container="getPopupContainer"
     :title="tooltipContent"
   >
-    <AButton type="text" class="h-36px text-icon" :class="cls">
+    <AButton type="text" :class="cls">
       <div class="flex-center gap-8px">
         <slot>
           <SvgIcon :icon="icon" />
         </slot>
       </div>
     </AButton>
   </ATooltip>
-  <AButton v-else type="text" class="h-36px text-icon" :class="cls">
+  <AButton v-else type="text" :class="cls">
     <div class="flex-center gap-8px">
       <slot>
         <SvgIcon :icon="icon" />

diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -78,7 +78,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
     >
       <ATooltip :placement="item.placement" :title="$t(themeLayoutModeRecord[mode])">
         <div
-          class="layout-card__shadow gap-6px w-96px h-64px p-6px rd-4px"
+          class="gap-6px w-96px h-64px p-6px rd-4px shadow dark:shadow-coolGray-5"
           :class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
         >
           <slot :name="key"></slot>
@@ -88,8 +88,4 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
   </div>
 </template>
 
-<style scoped>
-.layout-card__shadow {
-  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
-}
-</style>
+<style scoped></style>