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

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { themes } from '@pubinfo/config/themes';
+import { getThemes } from '@pubinfo/config/themes';
 import { message } from 'ant-design-vue';
 import { cloneDeep, pick } from 'lodash-es';
 import EpBack from '~icons/ep/back';
 import EpRight from '~icons/ep/right';
 import RiQuestionLine from '~icons/ri/question-line';
+import { watchDiffObject } from '@/features/composables/watchDiff';
 import { useContext } from '../../../composables/useContext';
+
 /* =============================================
 =               Vue SFC Options 配置           =
 ============================================= */
@@ -92,6 +94,7 @@ const isDark = computed({
 });
 
 const themeList = computed(() => {
+  const themes = getThemes();
   return Object.keys(themes).map((key) => {
     return {
       label: key,
@@ -370,353 +373,286 @@ async function resetSetting() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
 .divider {
   --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
+}
 
-  &::before,
-  &::after {
-    --at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
-  }
+.divider::before,
+.divider::after {
+  --at-apply: content-empty w-full h-1px bg-stone-2 dark:bg-stone-6;
 }
 
 .themes {
   --at-apply: flex flex-wrap items-center justify-center gap-4 pb-4;
+}
 
-  .theme {
-    --at-apply: flex items-center justify-center w-12 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+.theme {
+  --at-apply: flex items-center justify-center w-12 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+}
 
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
+.theme.active {
+  --at-apply: ring-ui-primary ring-2;
+}
 
-      .content {
-        --at-apply: rotate-0;
-      }
-    }
+.theme.active .content {
+  --at-apply: rotate-0;
+}
 
-    .content {
-      --at-apply: w-6 h-4 rounded-50% -rotate-45 transition;
-    }
-  }
+.theme .content {
+  --at-apply: w-6 h-4 rounded-50% -rotate-45 transition;
 }
 
 .menu-mode {
   --at-apply: flex items-center justify-center gap-4 pb-4;
+}
 
-  .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+.mode {
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+}
 
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
+.mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
 
-    &::before,
-    &::after,
-    .mode-container {
-      --at-apply: absolute pointer-events-none;
-    }
+.mode::before,
+.mode::after,
+.mode .mode-container {
+  --at-apply: absolute pointer-events-none;
+}
 
-    &::before {
-      --at-apply: content-empty bg-ui-primary;
-    }
+.mode::before {
+  --at-apply: content-empty bg-ui-primary;
+}
 
-    &::after {
-      --at-apply: content-empty bg-ui-primary/60;
-    }
+.mode::after {
+  --at-apply: content-empty bg-ui-primary/60;
+}
 
-    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+.mode .mode-container {
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+}
 
-      &::before {
-        --at-apply: content-empty absolute w-full h-full;
-      }
-    }
+.mode .mode-container::before {
+  --at-apply: content-empty absolute w-full h-full;
+}
 
-    &-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
+.mode-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
 
-      &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
-      }
+.mode-side::after {
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
+}
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
-      }
-    }
+.mode-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+}
 
-    &-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
+.mode-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
 
-      &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
-      }
+.mode-head::after {
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
-      }
-    }
+.mode-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+}
 
-    &-single {
-      &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
-      }
+.mode-single::after {
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
-      }
-    }
+.mode-single .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+}
 
-    &-only-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
+.mode-only-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
-      }
-    }
+}
 
-    &-only-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
+.mode-only-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
-      }
-    }
-  }
+.mode-only-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.mode-only-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
 }
 
 .app-width-mode {
   --at-apply: flex items-center justify-center gap-4 pb-4;
+}
 
-  .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
+.app-width-mode .mode {
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
+}
 
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
+.app-width-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
 
-    &-adaption {
-      &::before {
-        --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
-      }
+.mode-adaption::before {
+  --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
+}
 
-      .left,
-      .right {
-        --at-apply: absolute top-1/2 -translate-y-1/2;
-      }
+@media (prefers-color-scheme: dark) {
+  .mode-adaption::before {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+}
 
-      .left {
-        --at-apply: left-1;
-      }
+.mode-adaption .left,
+.mode-adaption .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
 
-      .right {
-        --at-apply: right-1;
-      }
-    }
+.mode-adaption .left {
+  --at-apply: left-1;
+}
 
-    &-adaption-min-width {
-      &::before {
-        --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
-      }
+.mode-adaption .right {
+  --at-apply: right-1;
+}
 
-      .left,
-      .right {
-        --at-apply: absolute top-1/2 -translate-y-1/2;
-      }
+.mode-adaption-min-width::before {
+  --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
 
-      .left {
-        --at-apply: left-0.5;
-      }
+.mode-adaption-min-width .left,
+.mode-adaption-min-width .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
 
-      .right {
-        --at-apply: right-0.5;
-      }
-    }
+.mode-adaption-min-width .left {
+  --at-apply: left-0.5;
+}
 
-    &-center {
-      &::before {
-        --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
-      }
-    }
+.mode-adaption-min-width .right {
+  --at-apply: right-0.5;
+}
 
-    &-center-max-width {
-      &::before {
-        --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
-      }
+.mode-center::before {
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
 
-      .left,
-      .right {
-        --at-apply: absolute top-1/2 -translate-y-1/2;
-      }
+.mode-center-max-width::before {
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
 
-      .left {
-        --at-apply: left-2.5;
-      }
+.mode-center-max-width .left,
+.mode-center-max-width .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
 
-      .right {
-        --at-apply: right-2.5;
-      }
-    }
-  }
+.mode-center-max-width .left {
+  --at-apply: left-2.5;
+}
+
+.mode-center-max-width .right {
+  --at-apply: right-2.5;
 }
 
 .transition-mode {
   --at-apply: flex items-center justify-center gap-4 pb-4;
+}
 
-  .mode {
-    --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
-
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
+.transition-mode .mode {
+  --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
+}
 
-    &::after {
-      --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
-    }
+.transition-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
 
-    &.mode-fade {
-      &::after {
-        animation: transition-mode-fade-after 1.5s infinite;
-      }
-
-      @keyframes transition-mode-fade-after {
-        0% {
-          opacity: 1;
-        }
-
-        30%,
-        35% {
-          opacity: 0;
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
+.transition-mode .mode::after {
+  --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
+}
 
-    &.mode-slide-left {
-      &::after {
-        animation: transition-mode-slide-left 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-left {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
+.mode-fade::after {
+  animation: transition-mode-fade-after 1.5s infinite;
+}
 
-    &.mode-slide-right {
-      &::after {
-        animation: transition-mode-slide-right 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-right {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
+@keyframes transition-mode-fade-after {
+  0% {
+    opacity: 1;
+  }
+  30%,
+  35% {
+    opacity: 0;
+  }
+  65% {
+    opacity: 1;
+  }
+}
 
-    &.mode-slide-top {
-      &::after {
-        animation: transition-mode-slide-top 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-top {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
+.mode-slide-left::after {
+  animation: transition-mode-slide-left 1.5s infinite;
+}
 
-    &.mode-slide-bottom {
-      &::after {
-        animation: transition-mode-slide-bottom 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-bottom {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
+@keyframes transition-mode-slide-left {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0; transform: translate(-30%, 0);
   }
+  35% {
+    opacity: 0; transform: translate(30%, 0);
+  }
+  65% {
+    opacity: 1;
+  }
+}
+
+.mode-slide-right::after {
+  animation: transition-mode-slide-right 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-right {
+  0% { opacity: 1; }
+  30% { opacity: 0; transform: translate(30%, 0); }
+  35% { opacity: 0; transform: translate(-30%, 0); }
+  100% { opacity: 1; }
+}
+
+.mode-slide-top::after {
+  animation: transition-mode-slide-top 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-top {
+  0% { opacity: 1; }
+  30% { opacity: 0; transform: translate(0, -30%); }
+  35% { opacity: 0; transform: translate(0, 30%); }
+  100% { opacity: 1; }
+}
+
+.mode-slide-bottom::after {
+  animation: transition-mode-slide-bottom 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-bottom {
+  0% { opacity: 1; }
+  30% { opacity: 0; transform: translate(0, 30%); }
+  35% { opacity: 0; transform: translate(0, -30%); }
+  100% { opacity: 1; }
 }
 
 .setting-item {
   --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover:bg-stone-1 dark:hover:bg-stone-9;
+}
 
-  .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+.setting-item .label {
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+}
 
-    i {
-      --at-apply: text-xl text-orange cursor-help;
-    }
-  }
+.setting-item .label i {
+  --at-apply: text-xl text-orange cursor-help;
 }
 </style>

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

@@ -2,26 +2,26 @@
 import type { Tabbar } from '#/tabbar';
 import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue';
 import type { RouteRecordRaw } from 'vue-router';
-import { PubinfoIcon } from '@/components';
-import { resolveRoutePath } from '@/utils';
 import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import hotkeys from 'hotkeys-js';
 import { cloneDeep } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import { useI18n } from 'vue-i18n';
-
 import AntDesignCaretDownFilled from '~icons/ant-design/caret-down-filled';
-
 import AntDesignCaretUpFilled from '~icons/ant-design/caret-up-filled';
+
 import EpSearch from '~icons/ep/search';
+
 import IonMdReturnLeft from '~icons/ion/md-return-left';
 import TablerMoodEmpty from '~icons/tabler/mood-empty';
+import { PubinfoIcon } from '@/features/components';
+import { resolveRoutePath } from '@/utils';
 import { useContext } from '../../composables/useContext';
 import Breadcrumb from './Breadcrumb/index.vue';
 import BreadcrumbItem from './Breadcrumb/item.vue';
 
 defineOptions({
-  name: 'Search',
+  name: 'ToolsSearch',
 });
 
 const overlayTransitionClass = ref({