@pubinfo/core 2.0.0-beta.31 → 2.0.0-beta.32

package/src/layout/components/Header/index.vue

@@ -38,219 +38,131 @@ const { settingsStore } = useContext();
   </Transition>
 </template>
 
-<style lang="scss" scoped>
-[data-app-width-mode="center"],
-[data-app-width-mode="center-max-width"] {
-  header {
-    width: var(--g-app-width);
-    max-width: 100%;
-  }
+<style scoped>
+[data-app-width-mode="center"] header,
+[data-app-width-mode="center-max-width"] header {
+  --at-apply: w-[--g-app-width] max-w-full;
 }
 
 header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--g-header-height);
-  padding: 0 20px;
-  margin: 0 auto;
-  color: var(--g-header-color);
-  background-color: var(--g-header-bg);
-  // box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color), 0 1px 0 0 var(--g-border-color);
+  --at-apply: fixed top-0 right-0 left-0 z-1000 flex items-center w-full h-[--g-header-height] mx-auto my-0 px-5 py-0 text-[--g-header-color] bg-[--g-header-bg];
   transition: background-color 0.3s;
+}
+
+.header-container {
+  --at-apply: flex items-center justify-between w-[--g-header-width] h-full mx-auto my-0;
+}
+
+:deep(.main) {
+  --at-apply: flex flex-[auto] flex-nowrap items-center w-0 h-full;
+}
+
+:deep(.main .menu-active-arrow .item-container::before),
+:deep(.main .menu-active-arrow .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-0 content-empty border-b-[color:var(--g-header-bg)] opacity-0 transition-all duration-[0.3s] border-b-[5px] border-x-[5px] border-x-transparent border-solid left-2/4 bottom-0;
+}
+
+:deep(.main .menu-active-arrow .item-container.active::before),
+:deep(.main .menu-active-arrow .menu-item.active::before) {
+  --at-apply: bottom-2 op-100;
+}
+
+:deep(.main .menu-active-line .item-container::before),
+:deep(.main .menu-active-line .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-1 content-empty bg-[--g-header-menu-active-bg] opacity-0 transition-all duration-[0.3s] rounded-sm left-2/4 bottom-1.5;
+  box-shadow: 0 0 0 1px var(--g-header-bg);
+}
+
+:deep(.main .menu-active-line .item-container.active::before),
+:deep(.main .menu-active-line .menu-item.active::before) {
+  --at-apply: w-5 op-100;
+}
+
+:deep(.main .menu-active-dot .item-container::before),
+:deep(.main .menu-active-dot .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-2.5 h-2.5 content-empty bg-[--g-header-menu-active-bg]
+  opacity-0 transition-all duration-[0.3s] rounded-[50%] left-2/4 bottom-0;
+  box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+}
+
+:deep(.main .menu-active-dot .item-container.active::before),
+:deep(.main .menu-active-dot .menu-item.active::before) {
+  --at-apply: bottom-1 op-100;
+}
+
+:deep(.menu-container) {
+  --at-apply: flex-1 h-full overflow-x-auto mx-[30px] my-0 px-5 py-0;
+  scrollbar-width: none;
+  mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+}
+
+:deep(.menu-container::-webkit-scrollbar) {
+  --at-apply: hidden;
+}
+
+:deep(.menu-container.nothin) {
+  --at-apply: flex;
+}
+
+:deep(.menu-container .menu-item-container-layout) {
+  --at-apply: flex flex-row w-auto;
+}
 
-  .header-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: var(--g-header-width);
-    height: 100%;
-    margin: 0 auto;
-
-    :deep(.main) {
-      display: flex;
-      flex: auto;
-      flex-wrap: nowrap;
-      align-items: center;
-      width: 0;
-      height: 100%;
-
-      .menu-active {
-        &-arrow {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 0;
-            width: 0;
-            height: 0;
-            content: "";
-            border-right: 5px solid transparent;
-            border-bottom: 5px solid var(--g-header-bg);
-            border-left: 5px solid transparent;
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            bottom: 8px;
-            opacity: 1;
-          }
-        }
-
-        &-line {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 6px;
-            width: 0;
-            height: 4px;
-            content: "";
-            background-color: var(--g-header-menu-active-bg);
-            border-radius: 2px;
-            box-shadow: 0 0 0 1px var(--g-header-bg);
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            width: 20px;
-            opacity: 1;
-          }
-        }
-
-        &-dot {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 0;
-            width: 10px;
-            height: 10px;
-            content: "";
-            background-color: var(--g-header-menu-active-bg);
-            border-radius: 50%;
-            box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            bottom: 4px;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  // @media screen and (max-width: $g-header-width) {
-  //   .header-container {
-  //     width: 100%;
-  //   }
-  // }
-
-  :deep(.menu-container) {
-    flex: 1;
-    height: 100%;
-    padding: 0 20px;
-    margin: 0 30px;
-    overflow-x: auto;
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &.nothin {
-      display: flex;
-    }
-
-    .menu-item-container-layout {
-      display: flex;
-      flex-direction: row;
-      width: auto;
-    }
-  }
-
-  :deep(.menu) {
-    display: inline-flex;
-    height: 100%;
-    background-color: var(--g-header-bg);
-
-    .menu-item {
-      .v-popper--theme-not-cursor {
-        height: 100%;
-      }
-
-      .menu-item-container {
-        padding: 0 6px;
-        color: var(--g-header-menu-color);
-        background-color: var(--g-header-menu-bg);
-
-        &:hover {
-          color: var(--g-header-menu-hover-color);
-          background-color: var(--g-header-menu-hover-bg);
-        }
-
-        .menu-item-container-icon {
-          transform: scale(1);
-        }
-
-        svg {
-          color: transparent;
-        }
-      }
-
-      &.is-dev {
-        .menu-item-container {
-          cursor: not-allowed;
-
-          i {
-            filter: grayscale(100%);
-          }
-
-          span {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.active .menu-item-container {
-        color: var(--g-header-menu-active-color);
-        background-color: var(--g-header-menu-active-bg);
-      }
-    }
-  }
-
-  :deep(.tools) {
-    padding: 0;
-
-    .buttons .item .icon {
-      color: var(--g-header-color);
-    }
-
-    .user-container {
-      font-size: 16px;
-      color: var(--g-header-color);
-    }
-  }
+:deep(.menu) {
+  --at-apply: inline-flex h-full bg-[--g-header-bg];
+}
+
+:deep(.menu .menu-item .v-popper--theme-not-cursor) {
+  --at-apply: h-full;
+}
+
+:deep(.menu .menu-item .menu-item-container) {
+  --at-apply: px-1.5 py-0 text-[--g-header-menu-color] bg-[--g-header-menu-bg];
+}
+
+:deep(.menu .menu-item .menu-item-container:hover) {
+  color: var(--g-header-menu-hover-color);
+  background-color: var(--g-header-menu-hover-bg);
+}
+
+:deep(.menu .menu-item .menu-item-container .menu-item-container-icon) {
+  transform: scale(1);
+}
+
+:deep(.menu .menu-item .menu-item-container svg) {
+  --at-apply: text-transparent;
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container) {
+  --at-apply: cursor-not-allowed;
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container i) {
+  filter: grayscale(100%);
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container span) {
+  --at-apply: op-80;
+}
+
+:deep(.menu .menu-item.active .menu-item-container) {
+  color: var(--g-header-menu-active-color);
+  background-color: var(--g-header-menu-active-bg);
+}
+
+:deep(.tools) {
+  --at-apply: p-0;
+}
+
+:deep(.tools .buttons .item .icon) {
+  color: var(--g-header-color);
+}
+
+:deep(.tools .user-container) {
+  --at-apply: text-16px;
+  color: var(--g-header-color);
 }
 
-// 头部动画
 .header-enter-active,
 .header-leave-active {
   transition: transform 0.3s;

package/src/layout/components/Logo/index.vue

@@ -31,7 +31,7 @@ const to = computed(() => {
 <template>
   <RouterLink
     :to="to"
-    class="logo h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline"
+    class="relative w-max bg-inherit p-[inherit] h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline"
     :class="{ 'cursor-pointer': settingsStore.settings.home.enable }"
   >
     <PubinfoIcon
@@ -40,7 +40,7 @@ const to = computed(() => {
       :size="30"
       color="transparent"
     />
-    <span v-if="showTitle" class="title block truncate">
+    <span v-if="showTitle" class="text-19px font-semibold block truncate">
       <slot>
         {{ appTitle }}
       </slot>
@@ -48,23 +48,8 @@ const to = computed(() => {
   </RouterLink>
 </template>
 
-<style lang="scss" scoped>
-.title {
-  font-size: 19px;
-  font-weight: 600;
-}
-
-.logo {
-  position: relative;
-  width: max-content;
-  height: inherit;
-  padding: inherit;
-  background-color: inherit;
-}
-
+<style scoped>
 span {
-  font-size: 24px;
-  color: var(--g-header-color);
-  letter-spacing: 1px;
+  --at-apply: text-2xl text-[--g-header-color] tracking-px;
 }
 </style>

package/src/layout/components/Menu/item.vue

@@ -128,39 +128,30 @@ defineExpose({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.badge {
-  :deep(> span) {
-    right: 0;
-    left: initial !important;
-  }
+<style scoped>
+.badge :deep(> span) {
+  --at-apply: right-0;
+  left: initial !important;
 }
 
 .sharp-corner {
   --at-apply: relative ml-1 w-[10px];
+}
 
-  &::before {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::before {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+}
 
-  &::after {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::after {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
 }
 
-.sub-sidebar-container {
-  .menu-item-container-layout:has(.system-point) {
-    position: relative;
+.sub-sidebar-container .menu-item-container-layout:has(.system-point) {
+  --at-apply: relative;
+}
 
-    &::before {
-      position: absolute;
-      left: 12px;
-      width: 6px;
-      height: 6px;
-      content: "";
-      background: var(--g-sub-sidebar-menu-active-color);
-      border-radius: 50%;
-    }
-  }
+.sub-sidebar-container .menu-item-container-layout:has(.system-point)::before {
+  --at-apply: absolute w-1.5 h-1.5 content-empty rounded-[50%] left-3;
+  background: var(--g-sub-sidebar-menu-active-color);
 }
 </style>

package/src/layout/components/SettingBar/AppSetting.vue

@@ -119,8 +119,8 @@ function excludesComponents(all: string[], excludes: string[]) {
   </HSlideover>
 </template>
 
-<style lang="scss" scoped>
-.settong-warp :deep(.setting-item) {
+<style scoped>
+:deep(.setting-item) {
   --at-apply:
     flex
     items-center
@@ -130,17 +130,17 @@ function excludesComponents(all: string[], excludes: string[]) {
     py-2
     rounded-2
     transition;
+}
 
-  &:hover {
-    --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
-  }
+:deep(.setting-item:hover) {
+  --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
+}
 
-  .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+:deep(.setting-item .label) {
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+}
 
-    i {
-      --at-apply: text-xl text-orange cursor-help;
-    }
-  }
+:deep(.setting-item .label i) {
+  --at-apply: text-xl text-orange cursor-help;
 }
 </style>