@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

package/src/{layout → built-in/layout-component}/components/Tools/index.vue

@@ -8,14 +8,12 @@ import FluentFullScreenMinimize16Filled from '~icons/fluent/full-screen-minimize
 import IconamoonSearch from '~icons/iconamoon/search';
 import MaterialSymbolsExpandMoreRounded from '~icons/material-symbols/expand-more-rounded';
 import PhLineVerticalThin from '~icons/ph/line-vertical-thin';
-// import RiTranslate from '~icons/ri/translate';
 
 import { useContext } from '../../composables/useContext';
 import useMainPage from '../../composables/useMainPage';
 import useViewTransition from '../../composables/useViewTransition';
 import DayNightSwitch from './DayNightSwitch.vue';
 import HotkeysIntro from './HotkeysIntro.vue';
-// import I18nSelector from './I18nSelector.vue';
 import Preferences from './Preferences/index.vue';
 import Search from './Search.vue';
 
@@ -39,6 +37,7 @@ const userMenu = computed(() => [
   [
     {
       label: generateI18nTitle('route.home', settingsStore.settings.home.title),
+      icon: 'i-ant-design:home-twotone',
       handle: () => router.push({ name: 'Home' }),
       hide: !settingsStore.settings.home.enable,
     },
@@ -63,16 +62,14 @@ const userMenu = computed(() => [
       icon: 'i-iconamoon-synchronize-duotone',
       handle: () => router.push({
         name: 'ChangeOrganization',
-        params: { orgId: userStore.orgId },
+        params: { orgId: userStore.user.orgId },
       }),
-      hide: userStore.orgList.length <= 1,
+      hide: userStore.user.orgList.length <= 1,
     },
     {
       label: t('route.personal.profile'),
       icon: 'i-iconamoon-profile-duotone',
-      handle: () => router.push({
-        name: 'Profile',
-      }),
+      handle: () => router.push({ name: 'Profile' }),
     },
     {
       label: t('app.changePassword'),
@@ -129,7 +126,7 @@ function toggleColorScheme(event: MouseEvent) {
 
 const avatarError = ref(false);
 
-watch(() => userStore.avatar, () => {
+watch(() => userStore.user.avatar, () => {
   if (avatarError.value) {
     avatarError.value = false;
   }
@@ -171,9 +168,6 @@ const searchComponentsClass = computed(() => {
       >
         <IconamoonSearch text="14px" />
       </span>
-      <!-- <I18nSelector class="item">
-        <RiTranslate text="15px" />
-      </I18nSelector> -->
       <span
         v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen"
         class="item"
@@ -193,8 +187,8 @@ const searchComponentsClass = computed(() => {
     </div>
     <div flex-center cursor-pointer gap-1>
       <img
-        v-if="userStore.avatar && !avatarError"
-        :src="userStore.avatar"
+        v-if="userStore.user.avatar && !avatarError"
+        :src="userStore.user.avatar"
         :onerror="() => (avatarError = true)"
         class="h-[24px] w-[24px] rounded-full"
       >
@@ -205,7 +199,7 @@ const searchComponentsClass = computed(() => {
       <PhLineVerticalThin />
       <HDropdownMenu :items="userMenu">
         <div flex-center cursor-pointer gap-1>
-          {{ userStore.account }}
+          {{ userStore.user.account }}
           <MaterialSymbolsExpandMoreRounded ml="5px" mr="10px" />
         </div>
       </HDropdownMenu>
@@ -217,7 +211,7 @@ const searchComponentsClass = computed(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .item {
   --at-apply: flex px-2 py-1 cursor-pointer;
 }

package/src/{layout → built-in/layout-component}/components/Topbar/Tabbar/MoreAction.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Tabbar } from '#/tabbar';
-import { PubinfoIcon } from '@/components';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
 import { useI18n } from 'vue-i18n';
@@ -11,6 +10,7 @@ import PhArrowLineRight from '~icons/ph/arrow-line-right';
 import RiArrowDownSFill from '~icons/ri/arrow-down-s-fill';
 import RiCloseFill from '~icons/ri/close-fill';
 import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
 import useTabbar from '../../../composables/useTabbar';
 import Search from '../../Tools/Search.vue';
@@ -146,159 +146,112 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
   </div>
 </template>
 
-<style lang="scss">
-.tabbar-dropdown {
-  .quick-button {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 15px 15px 10px;
-
-    .button {
-      --at-apply: transition-colors;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-      background-color: var(--g-bg);
-      border: none;
-      border-radius: 5px;
-      outline: none;
-
-      &:hover:not(:disabled) {
-        --at-apply: text-ui-primary;
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-      }
-
-      i {
-        font-size: 16px !important;
-      }
-    }
-  }
+<style>
+.tabbar-dropdown .quick-button {
+  --at-apply: flex items-center justify-between pt-[15px] pb-2.5 px-[15px];
+}
 
-  .tabs {
-    width: 200px;
-    padding: 0 0 10px;
+.tabbar-dropdown .quick-button .button {
+  --at-apply: flex items-center justify-center w-8 h-8 cursor-pointer bg-[--g-bg]
+  transition-[colors] duration-[0.3s] rounded-[5px] border-[none] [outline:none];
+}
 
-    &:not(.dragging) {
-      .tab:hover {
-        &:not(.actived) {
-          background-color: var(--g-bg);
-        }
+.tabbar-dropdown .quick-button .button:hover:not(:disabled) {
+  --at-apply: text-ui-primary;
+}
 
-        .action-icon {
-          opacity: 1;
-        }
-      }
-    }
-
-    .tab {
-      position: relative;
-      width: calc(100% - 30px);
-      height: 30px;
-      padding: 0 5px;
-      margin: 0 15px;
-      background-color: var(--g-container-bg);
-      border-radius: 5px;
-      transition: background-color 0.3s;
-
-      &.actived {
-        background-color: var(--g-bg);
-      }
-
-      &.ghost {
-        opacity: 0;
-      }
-
-      &:hover {
-        .title {
-          --at-apply: opacity-100;
-
-          margin-inline-end: 20px;
-          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
-        }
-      }
-
-      * {
-        user-select: none;
-      }
-
-      .title {
-        --at-apply: opacity-70 transition;
-
-        position: relative;
-        display: flex;
-        gap: 5px;
-        align-items: center;
-        height: 100%;
-        overflow: hidden;
-        font-size: 14px;
-        white-space: nowrap;
-        cursor: pointer;
-        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
-
-        [dir="rtl"] & {
-          mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
-        }
+.tabbar-dropdown .quick-button .button:disabled {
+  --at-apply: cursor-not-allowed;
+}
 
-        i {
-          flex-shrink: 0;
-          font-size: 16px;
-        }
-      }
-
-      .action-icon {
-        --at-apply: transition;
-
-        position: absolute;
-        inset-inline-end: 6px;
-        top: 50%;
-        z-index: 10;
-        width: 1.5em;
-        height: 1.5em;
-        margin-top: -6px;
-        font-size: 8px;
-        color: var(--g-tabbar-tab-color);
-        pointer-events: all;
-        border-radius: 50%;
-        opacity: 0;
-
-        &:hover {
-          --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
-
-          background-color: var(--g-bg);
-        }
-      }
-    }
-  }
+.tabbar-dropdown .quick-button .button i {
+  font-size: 16px !important;
+}
+
+.tabbar-dropdown .tabs {
+  --at-apply: w-200px pt-0 pb-2.5 px-0;
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover:not(.actived) {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover .action-icon {
+  --at-apply: op-100;
+}
+
+.tabbar-dropdown .tabs .tab {
+  --at-apply: relative h-[30px] bg-[--g-container-bg] mx-[15px] my-0 px-[5px] py-0 rounded-[5px];
+  width: calc(100% - 30px);
+  transition: background-color 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab.actived {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs .tab.ghost {
+  --at-apply: op-0;
+}
+
+.tabbar-dropdown .tabs .tab:hover .title {
+  opacity: 1;
+  margin-inline-end: 20px;
+  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
+  transition: all 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab * {
+  user-select: none;
+}
+
+.tabbar-dropdown .tabs .tab .title {
+  --at-apply: relative flex gap-[5px] items-center
+  h-full overflow-hidden text-sm whitespace-nowrap cursor-pointer opacity-70;
+
+  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+  transition: all 0.3s;
+}
+
+[dir="rtl"] .tabbar-dropdown .tabs .tab .title {
+  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
+}
+
+.tabbar-dropdown .tabs .tab .title i {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon {
+  --at-apply: absolute z-10 w-[1.5em] h-[1.5em] text-[8px] text-[--g-tabbar-tab-color]
+  opacity-0 transition-all duration-[0.3s] -mt-1.5 rounded-[50%] top-2/4;
+  inset-inline-end: 6px;
+  pointer-events: all;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon:hover {
+  background-color: var(--g-bg);
+  box-shadow: 0 0 0 1px var(--g-border-color);
 }
 </style>
 
-<style lang="scss" scoped>
-.tabbar-dropdown {
-  .dropdown-tab-enter-from,
-  .dropdown-tab-leave-to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
+<style scoped>
+.dropdown-tab-enter-from,
+.dropdown-tab-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
 
-  .dropdown-tab-enter-active {
-    transition: all 0.3s;
-  }
+.dropdown-tab-enter-active {
+  transition: all 0.3s;
+}
 
-  .dropdown-tab-leave-active {
-    position: absolute !important;
-    transition: all 0.3s;
-  }
+.dropdown-tab-leave-active {
+  position: absolute !important;
+  transition: all 0.3s;
+}
 
-  .dropdown-tab-move {
-    transition: transform 0.3s;
-  }
+.dropdown-tab-move {
+  transition: transform 0.3s;
 }
 </style>