@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Tools/Preferences/PreferencesContent.vue

@@ -0,0 +1,722 @@
+<script setup lang="ts">
+import { themes } 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 { useContext } from '../../../composables/useContext';
+/* =============================================
+=               Vue SFC Options 配置           =
+============================================= */
+defineOptions({
+  name: 'PreferenceContent',
+});
+/* =============================================
+=                   逻辑代码                   =
+============================================= */
+
+const { settingsStore } = useContext();
+
+/**
+ * 提供用户可配置的选项
+ * 不需要配置的选项，可以在这里删除或注释掉，页面上会自动隐藏
+ * 需注意，boolean 类型的选项，会先判断系统是否开启了该功能，如果系统没有开启，那即便在这里允许配置，页面上也不会显示
+ */
+const preferences = ref<Settings.all>({
+  app: pick(
+    settingsStore.settings.app,
+    [
+      'colorScheme',
+      'lightTheme',
+      'darkTheme',
+      'enableProgress',
+      'enableUserPreferences',
+    ],
+  ),
+  menu: pick(
+    settingsStore.settings.menu,
+    [
+      'menuMode',
+      'isRounded',
+      'menuActiveStyle',
+      'subMenuUniqueOpened',
+      'subMenuCollapse',
+      'enableSubMenuCollapseButton',
+    ],
+  ),
+  layout: pick(settingsStore.settings.layout,
+    [
+      'widthMode',
+    ],
+  ),
+  mainPage: pick(settingsStore.settings.mainPage,
+    [
+      'enableTransition',
+      'transitionMode',
+    ],
+  ),
+  topbar: pick(settingsStore.settings.topbar,
+    [
+      'mode',
+      'switchTabbarAndToolbar',
+    ],
+  ),
+  tabbar: pick(settingsStore.settings.tabbar,
+    [
+      'enable',
+      'style',
+      'enableIcon',
+      'mergeTabsBy',
+      'enableMemory',
+    ],
+  ),
+  breadcrumb: pick(settingsStore.settings.breadcrumb,
+    [
+      'enable',
+      'style',
+      'enableMainMenu',
+    ],
+  ),
+});
+
+const isDark = computed({
+  get() {
+    return preferences.value.app?.colorScheme === 'dark';
+  },
+  set(value) {
+    if (preferences.value.app?.colorScheme) {
+      preferences.value.app.colorScheme = value ? 'dark' : 'light';
+    }
+  },
+});
+
+const themeList = computed(() => {
+  return Object.keys(themes).map((key) => {
+    return {
+      label: key,
+      value: (themes as any)[key],
+    };
+  }).filter((item) => {
+    return item.value['color-scheme'] === preferences.value.app?.colorScheme;
+  });
+});
+
+watchDiffObject(() => preferences.value, async (val) => {
+  // 更新用户偏好设置
+  settingsStore.updateSettings(cloneDeep(val), false);
+  await settingsStore.setPreferencesSetting(val);
+  message.success('个人偏好设置成功');
+}, {
+  deep: true,
+});
+
+async function resetSetting() {
+  await settingsStore.resetSettings();
+}
+</script>
+
+<template>
+  <div>
+    <a-alert
+      message="提示"
+      description="个人偏好设置将覆盖系统默认设置。若需恢复至系统默认配置，请滚动至底部并点击“还原系统设置”按钮。"
+      type="info"
+    />
+    <div v-if="preferences.app?.hasOwnProperty('colorScheme') || (preferences.app?.hasOwnProperty('lightTheme') && preferences.app?.hasOwnProperty('darkTheme'))" class="divider">
+      颜色主题风格
+    </div>
+    <div v-if="preferences.app?.hasOwnProperty('colorScheme')" class="flex items-center justify-center pb-4">
+      <HToggle v-model="isDark" on-icon="i-ri-sun-line" off-icon="i-ri-moon-line" />
+    </div>
+    <div v-if="preferences.app?.hasOwnProperty('lightTheme') && preferences.app?.hasOwnProperty('darkTheme')" class="themes">
+      <div
+        v-for="item in themeList"
+        :key="item.label"
+        class="theme"
+        :class="{ active: isDark ? preferences.app.darkTheme === item.label : preferences.app.lightTheme === item.label }"
+        @click="isDark ? preferences.app?.hasOwnProperty('darkTheme') && (preferences.app.darkTheme = item.label) : preferences.app?.hasOwnProperty('lightTheme') && (preferences.app.lightTheme = item.label)"
+      >
+        <div class="content" :style="`background-color: rgb(${item.value['--ui-primary']});`" />
+      </div>
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && preferences.menu?.hasOwnProperty('menuMode')" class="divider">
+      导航栏模式
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && preferences.menu?.hasOwnProperty('menuMode')" class="menu-mode">
+      <HTooltip text="侧边栏模式 (含主导航)" placement="bottom" :delay="500">
+        <div class="mode mode-side" :class="{ active: preferences.menu.menuMode === 'side' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'side')">
+          <div class="mode-container" />
+        </div>
+      </HTooltip>
+      <HTooltip text="顶部模式" placement="bottom" :delay="500">
+        <div class="mode mode-head" :class="{ active: preferences.menu.menuMode === 'head' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'head')">
+          <div class="mode-container" />
+        </div>
+      </HTooltip>
+      <HTooltip
+        text="侧边栏模式 (不含主导航)"
+        placement="bottom"
+        :delay="500"
+      >
+        <div class="mode mode-single" :class="{ active: preferences.menu.menuMode === 'single' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'single')">
+          <div class="mode-container" />
+        </div>
+      </HTooltip>
+      <HTooltip text="侧边栏精简模式" placement="bottom" :delay="500">
+        <div class="mode mode-only-side" :class="{ active: preferences.menu.menuMode === 'only-side' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'only-side')">
+          <div class="mode-container" />
+        </div>
+      </HTooltip>
+      <HTooltip text="顶部精简模式" placement="bottom" :delay="500">
+        <div class="mode mode-only-head" :class="{ active: preferences.menu.menuMode === 'only-head' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'only-head')">
+          <div class="mode-container" />
+        </div>
+      </HTooltip>
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && preferences.layout?.hasOwnProperty('widthMode')" class="divider">
+      页宽模式
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && preferences.layout?.hasOwnProperty('widthMode')" class="app-width-mode">
+      <HTooltip text="自适应" placement="bottom" :delay="500">
+        <div class="mode mode-adaption" :class="{ active: preferences.layout.widthMode === 'adaption' }" @click="preferences.layout?.hasOwnProperty('widthMode') && (preferences.layout.widthMode = 'adaption')">
+          <EpBack class="left" />
+          <EpRight class="right" />
+        </div>
+      </HTooltip>
+      <HTooltip text="自适应 (有最小宽度)" placement="bottom" :delay="500">
+        <div class="mode mode-adaption-min-width" :class="{ active: preferences.layout.widthMode === 'adaption-min-width' }" @click="preferences.layout?.hasOwnProperty('widthMode') && (preferences.layout.widthMode = 'adaption-min-width')">
+          <EpBack class="left" />
+          <EpRight class="right" />
+        </div>
+      </HTooltip>
+      <HTooltip text="定宽居中" placement="bottom" :delay="500">
+        <div class="mode mode-center" :class="{ active: preferences.layout.widthMode === 'center' }" @click="preferences.layout?.widthMode && (preferences.layout.widthMode = 'center')" />
+      </HTooltip>
+      <HTooltip text="定宽居中 (有最大宽度)" placement="bottom" :delay="500">
+        <div class="mode mode-center-max-width" :class="{ active: preferences.layout.widthMode === 'center-max-width' }" @click="preferences.layout?.widthMode && (preferences.layout.widthMode = 'center-max-width')">
+          <EpBack class="left" />
+          <EpRight class="right" />
+        </div>
+      </HTooltip>
+    </div>
+    <div v-if="settingsStore.settings.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('enableTransition')" class="divider">
+      页面切换动画
+    </div>
+    <div v-if="settingsStore.settings.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('enableTransition')" class="flex items-center justify-center pb-4">
+      <HToggle v-model="preferences.mainPage.enableTransition" />
+    </div>
+    <div v-if="settingsStore.settings.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('transitionMode')" class="transition-mode">
+      <HTooltip text="淡入淡出" placement="bottom" :delay="500">
+        <div class="mode mode-fade" :class="{ active: preferences.mainPage.transitionMode === 'fade' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'fade')" />
+      </HTooltip>
+      <HTooltip text="向左滑动" placement="bottom" :delay="500">
+        <div class="mode mode-slide-left" :class="{ active: preferences.mainPage.transitionMode === 'slide-left' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-left')" />
+      </HTooltip>
+      <HTooltip text="向右滑动" placement="bottom" :delay="500">
+        <div class="mode mode-slide-right" :class="{ active: preferences.mainPage.transitionMode === 'slide-right' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-right')" />
+      </HTooltip>
+      <HTooltip text="向上滑动" placement="bottom" :delay="500">
+        <div class="mode mode-slide-top" :class="{ active: preferences.mainPage.transitionMode === 'slide-top' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-top')" />
+      </HTooltip>
+      <HTooltip text="向下滑动" placement="bottom" :delay="500">
+        <div class="mode mode-slide-bottom" :class="{ active: preferences.mainPage.transitionMode === 'slide-bottom' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-bottom')" />
+      </HTooltip>
+    </div>
+    <div v-if="preferences.menu?.hasOwnProperty('switchMainMenuAndPageJump') || preferences.menu?.hasOwnProperty('subMenuOnlyOneHide') || preferences.menu?.hasOwnProperty('subMenuUniqueOpened') || preferences.menu?.hasOwnProperty('subMenuCollapse') || preferences.menu?.hasOwnProperty('enableSubMenuCollapseButton')" class="divider">
+      导航栏
+    </div>
+    <div v-if="preferences.menu?.hasOwnProperty('subMenuUniqueOpened')" class="setting-item">
+      <div class="label">
+        次导航保持展开一个
+        <HTooltip text="开启该功能后，次导航只保持单个菜单的展开">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="preferences.menu.subMenuUniqueOpened" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode)" />
+    </div>
+    <div v-if="preferences.menu?.hasOwnProperty('subMenuCollapse')" class="setting-item">
+      <div class="label">
+        次导航是否折叠
+      </div>
+      <HToggle v-model="preferences.menu.subMenuCollapse" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode)" />
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.enableSubMenuCollapseButton && preferences.menu?.hasOwnProperty('enableSubMenuCollapseButton')" class="setting-item">
+      <div class="label">
+        显示次导航折叠按钮
+      </div>
+      <HToggle v-model="preferences.menu.enableSubMenuCollapseButton" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode)" />
+    </div>
+    <div v-if="preferences.menu?.hasOwnProperty('isRounded')" class="setting-item">
+      <div class="label">
+        是否圆角
+      </div>
+      <HToggle v-model="preferences.menu.isRounded" />
+    </div>
+    <div v-if="(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode) !== 'single' && preferences.menu?.hasOwnProperty('menuActiveStyle')" class="setting-item">
+      <div class="label">
+        激活风格
+      </div>
+      <HCheckList
+        v-model="preferences.menu.menuActiveStyle"
+        :options="[
+          { icon: 'i-jam-stop-sign', value: '' },
+          { icon: ['head', 'only-head'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode) ? 'i-ep-caret-top' : 'i-ep-caret-left', value: 'arrow' },
+          { icon: ['side', 'only-side'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode) ? 'i-tabler-minus-vertical' : 'i-tabler-minus', value: 'line' },
+          { icon: 'i-icon-park-outline-dot', value: 'dot' },
+        ]"
+      />
+    </div>
+    <div v-if="preferences.topbar?.hasOwnProperty('mode') || preferences.topbar?.hasOwnProperty('switchTabbarAndToolbar')" class="divider">
+      顶栏
+    </div>
+    <div v-if="preferences.topbar?.hasOwnProperty('switchTabbarAndToolbar')" class="setting-item">
+      <div class="label">
+        展示切换
+        <HTooltip text="切换标签栏和工具栏的展示顺序">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="preferences.topbar.switchTabbarAndToolbar" :disabled="!preferences.tabbar?.enable" />
+    </div>
+    <div v-if="settingsStore.settings.tabbar.enable && preferences.tabbar?.hasOwnProperty('enable') || preferences.tabbar?.hasOwnProperty('style') || preferences.tabbar?.hasOwnProperty('enableIcon') || preferences.tabbar?.hasOwnProperty('mergeTabsBy')" class="divider">
+      标签栏
+    </div>
+    <div v-if="settingsStore.settings.tabbar.enable && preferences.tabbar?.hasOwnProperty('enable')" class="setting-item">
+      <div class="label">
+        是否启用
+      </div>
+      <HToggle v-model="preferences.tabbar.enable" />
+    </div>
+    <div v-if="settingsStore.settings.tabbar.enable && preferences.tabbar?.hasOwnProperty('style')" class="setting-item">
+      <div class="label">
+        风格
+      </div>
+      <HCheckList
+        v-model="preferences.tabbar.style"
+        :options="[
+          { label: '时尚', value: 'fashion' },
+          { label: '卡片', value: 'card' },
+          { label: '方块', value: 'square' },
+        ]"
+        :disabled="!(preferences.tabbar?.enable ?? settingsStore.settings.tabbar.enable)"
+      />
+    </div>
+    <div v-if="settingsStore.settings.tabbar.enable && preferences.tabbar?.hasOwnProperty('enableIcon')" class="setting-item">
+      <div class="label">
+        是否显示图标
+      </div>
+      <HToggle v-model="preferences.tabbar.enableIcon" :disabled="!(preferences.tabbar?.enable ?? settingsStore.settings.tabbar.enable)" />
+    </div>
+    <div v-if="settingsStore.settings.tabbar.enable && preferences.tabbar?.hasOwnProperty('enableMemory')" class="setting-item">
+      <div class="label">
+        是否启用记忆功能
+        <HTooltip text="开启该功能后，非固定和非常驻的标签页将在本次会话窗口中始终存在，刷新浏览器或重新登录时不会丢失">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="preferences.tabbar.enableMemory" :disabled="!(preferences.tabbar?.enable ?? settingsStore.settings.tabbar.enable)" />
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && (preferences.breadcrumb?.hasOwnProperty('enable') || preferences.breadcrumb?.hasOwnProperty('style') || preferences.breadcrumb?.hasOwnProperty('enableMainMenu'))" class="divider">
+      面包屑导航
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && preferences.breadcrumb?.hasOwnProperty('enable')" class="setting-item">
+      <div class="label">
+        是否启用
+      </div>
+      <HToggle v-model="preferences.breadcrumb.enable" />
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && preferences.breadcrumb?.hasOwnProperty('style')" class="setting-item">
+      <div class="label">
+        风格
+      </div>
+      <HCheckList
+        v-model="preferences.breadcrumb.style"
+        :options="[
+          { label: '默认', value: '' },
+          { label: '现代', value: 'modern' },
+        ]"
+        :disabled="!(preferences.breadcrumb?.enable ?? settingsStore.settings.breadcrumb.enable)"
+      />
+    </div>
+    <div v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && settingsStore.settings.breadcrumb.enableMainMenu && preferences.breadcrumb?.hasOwnProperty('enableMainMenu')" class="setting-item">
+      <div class="label">
+        是否显示主导航
+      </div>
+      <HToggle v-model="preferences.breadcrumb.enableMainMenu" :disabled="['single'].includes(preferences.menu?.menuMode ?? settingsStore.settings.menu.menuMode)" />
+    </div>
+    <div v-if="preferences.app?.hasOwnProperty('enableProgress')" class="divider">
+      其它
+    </div>
+    <div v-if="settingsStore.settings.app.enableProgress && preferences.app?.hasOwnProperty('enableProgress')" class="setting-item">
+      <div class="label">
+        载入进度条
+        <HTooltip text="该功能开启时，跳转路由会看到页面顶部有进度条">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="preferences.app.enableProgress" />
+    </div>
+    <div w-full h-100px flex="~ center">
+      <a-button
+        w-full
+        type="primary"
+        size="large"
+        @click="resetSetting"
+      >
+        还原系统设置
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" 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;
+  }
+}
+
+.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;
+
+    &.active {
+      --at-apply: ring-ui-primary ring-2;
+
+      .content {
+        --at-apply: rotate-0;
+      }
+    }
+
+    .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;
+
+    &.active {
+      --at-apply: ring-ui-primary ring-2;
+    }
+
+    &::before,
+    &::after,
+    .mode-container {
+      --at-apply: absolute pointer-events-none;
+    }
+
+    &::before {
+      --at-apply: content-empty bg-ui-primary;
+    }
+
+    &::after {
+      --at-apply: content-empty bg-ui-primary/60;
+    }
+
+    .mode-container {
+      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+
+      &::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;
+      }
+
+      &::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;
+      }
+    }
+
+    &-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-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-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-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-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;
+
+    &.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;
+      }
+
+      .left,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-1;
+      }
+
+      .right {
+        --at-apply: right-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;
+      }
+
+      .left,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-0.5;
+      }
+
+      .right {
+        --at-apply: right-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;
+      }
+    }
+
+    &-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,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-2.5;
+      }
+
+      .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;
+    }
+
+    &::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-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;
+        }
+      }
+    }
+
+    &.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-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;
+
+    i {
+      --at-apply: text-xl text-orange cursor-help;
+    }
+  }
+}
+</style>