chore: update uikit -> ui-kit

packages/business/widgets/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@vben/widgets",
+  "version": "5.0.0",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/business/widgets"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@vben-core/design": "workspace:*"
+  },
+  "dependencies": {
+    "@vben-core/colorful": "workspace:*",
+    "@vben-core/design": "workspace:*",
+    "@vben-core/iconify": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/toolkit": "workspace:*",
+    "@vben/chart-ui": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/integrations": "^10.11.0",
+    "qrcode": "^1.5.3",
+    "vue": "^3.4.30",
+    "vue-router": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/qrcode": "^1.5.5",
+    "@vben/types": "workspace:*"
+  }
+}

packages/business/widgets/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';

packages/business/widgets/src/coze-assistant/assistant.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { useScriptTag } from '@vueuse/core';
+
+interface AssistantProps {
+  botIcon?: string;
+  botId?: string;
+  botTitle?: string;
+  isMobile?: boolean;
+}
+
+const props = withDefaults(defineProps<AssistantProps>(), {
+  botIcon:
+    'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.3/source/avatar-v1-transparent-bg.webp',
+  botId: '7374674983739621392',
+  botTitle: 'Vben Admin Assistant',
+  isMobile: false,
+});
+
+let client: any;
+const wrapperEl = ref();
+
+const { load, unload } = useScriptTag(
+  'https://sf-cdn.coze.com/obj/unpkg-va/flow-platform/chat-app-sdk/0.1.0-beta.4/libs/oversea/index.js',
+  () => {
+    client = new (window as any).CozeWebSDK.WebChatClient({
+      componentProps: {
+        icon: props.botIcon,
+        layout: props.isMobile ? 'mobile' : 'pc',
+        // lang: 'zh-CN',
+        title: props.botTitle,
+      },
+      config: {
+        bot_id: props.botId,
+      },
+      el: wrapperEl.value,
+    });
+  },
+  {
+    manual: true,
+  },
+);
+onMounted(() => {
+  load();
+});
+
+onUnmounted(() => {
+  unload();
+  client?.destroy();
+});
+</script>
+<template>
+  <div ref="wrapperEl" class="coze-assistant"></div>
+</template>
+
+<style>
+.coze-assistant {
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+  z-index: 1000;
+
+  img {
+    width: 42px !important;
+    height: 42px !important;
+    border-radius: 50%;
+  }
+}
+</style>

packages/business/widgets/src/coze-assistant/index.ts

@@ -0,0 +1 @@
+export { default as CozeAssistant } from './assistant.vue';

packages/business/widgets/src/global-provider/global-provider.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { preferences } from '@vben-core/preferences';
+import { Toaster } from '@vben-core/shadcn-ui';
+
+import { CozeAssistant } from '../coze-assistant';
+
+defineOptions({ name: 'GlobalProvider' });
+</script>
+<template>
+  <Toaster />
+  <CozeAssistant
+    v-if="preferences.app.aiAssistant"
+    :is-mobile="preferences.app.isMobile"
+  />
+  <slot></slot>
+</template>

packages/business/widgets/src/global-provider/index.ts

@@ -0,0 +1 @@
+export { default as GlobalProvider } from './global-provider.vue';

packages/business/widgets/src/global-search/global-search.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import {
+  IcRoundArrowDownward,
+  IcRoundArrowUpward,
+  IcRoundSearch,
+  IcRoundSubdirectoryArrowLeft,
+  MdiKeyboardEsc,
+} from '@vben-core/iconify';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@vben-core/shadcn-ui';
+import { isWindowsOs } from '@vben-core/toolkit';
+
+import { useMagicKeys, useToggle, whenever } from '@vueuse/core';
+
+import SearchPanel from './search-panel.vue';
+
+defineOptions({
+  name: 'GlobalSearch',
+});
+
+const props = withDefaults(
+  defineProps<{ enableShortcutKey?: boolean; menus: MenuRecordRaw[] }>(),
+  {
+    enableShortcutKey: true,
+    menus: () => [],
+  },
+);
+
+const [open, toggleOpen] = useToggle();
+const keyword = ref('');
+
+function handleClose() {
+  open.value = false;
+  keyword.value = '';
+}
+
+if (props.enableShortcutKey) {
+  const keys = useMagicKeys();
+  const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
+  whenever(cmd, () => {
+    if (props.enableShortcutKey) {
+      open.value = true;
+    }
+  });
+}
+</script>
+
+<template>
+  <div>
+    <Dialog :open="open">
+      <DialogTrigger as-child>
+        <div
+          class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+          @click="toggleOpen()"
+        >
+          <IcRoundSearch
+            class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+          />
+          <span
+            class="text-muted-foreground group-hover:text-foreground hidden text-sm duration-300 md:block"
+          >
+            {{ $t('search.search') }}
+          </span>
+          <span
+            v-if="enableShortcutKey"
+            class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+          >
+            {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+            <kbd>K</kbd>
+          </span>
+          <span v-else></span>
+        </div>
+      </DialogTrigger>
+      <DialogContent
+        class="top-0 h-full w-full -translate-y-0 border-none p-0 shadow-xl sm:top-[10%] sm:h-[unset] sm:w-[600px] sm:rounded-2xl"
+        @close="handleClose"
+      >
+        <DialogHeader>
+          <DialogTitle
+            class="border-border flex h-12 items-center gap-5 border-b px-5 font-normal"
+          >
+            <IcRoundSearch class="mt-1 size-4" />
+            <input
+              v-model="keyword"
+              :placeholder="$t('search.search-navigate')"
+              class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 text-sm outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
+            />
+          </DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+        <SearchPanel :keyword="keyword" :menus="menus" @close="handleClose" />
+        <DialogFooter
+          class="text-muted-foreground border-border hidden flex-row rounded-b-2xl border-t px-4 py-2 text-xs sm:flex sm:justify-start sm:gap-x-4"
+        >
+          <div class="flex items-center">
+            <IcRoundSubdirectoryArrowLeft class="mr-1" />
+            {{ $t('search.select') }}
+          </div>
+          <div class="flex items-center">
+            <IcRoundArrowUpward class="mr-2" />
+            <IcRoundArrowDownward class="mr-2" />
+            {{ $t('search.navigate') }}
+          </div>
+          <div class="flex items-center">
+            <MdiKeyboardEsc class="mr-1" />
+            {{ $t('search.close') }}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

packages/business/widgets/src/global-search/index.ts

@@ -0,0 +1 @@
+export { default as GlobalSearch } from './global-search.vue';

packages/business/widgets/src/global-search/search-panel.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import { IcRoundClose, IcRoundSearchOff } from '@vben-core/iconify';
+import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
+import { mapTree, traverseTreeValues } from '@vben-core/toolkit';
+
+import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
+
+defineOptions({
+  name: 'SearchPanel',
+});
+
+const props = withDefaults(
+  defineProps<{ keyword: string; menus: MenuRecordRaw[] }>(),
+  {
+    keyword: '',
+    menus: () => [],
+  },
+);
+const emit = defineEmits<{ close: [] }>();
+
+const router = useRouter();
+const searchHistory = useLocalStorage<MenuRecordRaw[]>(
+  `__search-history-${import.meta.env.PROD ? 'prod' : 'dev'}__`,
+  [],
+);
+const activeIndex = ref(-1);
+const searchItems = shallowRef<MenuRecordRaw[]>([]);
+const searchResults = ref<MenuRecordRaw[]>([]);
+
+const handleSearch = useThrottleFn(search, 200);
+
+// 搜索函数，用于根据搜索关键词查找匹配的菜单项
+function search(searchKey: string) {
+  // 去除搜索关键词的前后空格
+  searchKey = searchKey.trim();
+
+  // 如果搜索关键词为空，清空搜索结果并返回
+  if (!searchKey) {
+    searchResults.value = [];
+    return;
+  }
+
+  // 使用搜索关键词创建正则表达式
+  const reg = createSearchReg(searchKey);
+
+  // 初始化结果数组
+  const results: MenuRecordRaw[] = [];
+
+  // 遍历搜索项
+  traverseTreeValues(searchItems.value, (item) => {
+    // 如果菜单项的名称匹配正则表达式，将其添加到结果数组中
+    if (reg.test(item.name?.toLowerCase())) {
+      results.push(item);
+    }
+  });
+
+  // 更新搜索结果
+  searchResults.value = results;
+
+  // 如果有搜索结果，设置索引为 0
+  if (results.length > 0) {
+    activeIndex.value = 0;
+  }
+
+  // 赋值索引为 0
+  activeIndex.value = 0;
+}
+
+// When the keyboard up and down keys move to an invisible place
+// the scroll bar needs to scroll automatically
+function scrollIntoView() {
+  const element = document.querySelector(
+    `[data-search-item="${activeIndex.value}"`,
+  );
+
+  if (element) {
+    element.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+// enter keyboard event
+async function handleEnter() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  const result = searchResults.value;
+  const index = activeIndex.value;
+  if (result.length === 0 || index < 0) {
+    return;
+  }
+  const to = result[index];
+  searchHistory.value.push(to);
+  handleClose();
+  await nextTick();
+  router.push(to.path);
+}
+
+// Arrow key up
+function handleUp() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value--;
+  if (activeIndex.value < 0) {
+    activeIndex.value = searchResults.value.length - 1;
+  }
+  scrollIntoView();
+}
+
+// Arrow key down
+function handleDown() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value++;
+  if (activeIndex.value > searchResults.value.length - 1) {
+    activeIndex.value = 0;
+  }
+  scrollIntoView();
+}
+
+// close search modal
+function handleClose() {
+  searchResults.value = [];
+  emit('close');
+}
+
+// Activate when the mouse moves to a certain line
+function handleMouseenter(e: MouseEvent) {
+  const index = (e.target as HTMLElement)?.dataset.index;
+  activeIndex.value = Number(index);
+}
+
+function removeItem(index: number) {
+  if (props.keyword) {
+    searchResults.value.splice(index, 1);
+  } else {
+    searchHistory.value.splice(index, 1);
+  }
+  activeIndex.value = activeIndex.value - 1 >= 0 ? activeIndex.value - 1 : 0;
+  scrollIntoView();
+}
+
+// 存储所有需要转义的特殊字符
+const code = new Set([
+  '$',
+  '(',
+  ')',
+  '*',
+  '+',
+  '.',
+  '[',
+  ']',
+  '?',
+  '\\',
+  '^',
+  '{',
+  '}',
+  '|',
+]);
+
+// 转换函数，用于转义特殊字符
+function transform(c: string) {
+  // 如果字符在特殊字符列表中，返回转义后的字符
+  // 如果不在，返回字符本身
+  return code.has(c) ? `\\${c}` : c;
+}
+
+// 创建搜索正则表达式
+function createSearchReg(key: string) {
+  // 将输入的字符串拆分为单个字符
+  // 对每个字符进行转义
+  // 然后用'.*'连接所有字符，创建正则表达式
+  const keys = [...key].map((item) => transform(item)).join('.*');
+  // 返回创建的正则表达式
+  return new RegExp(`.*${keys}.*`);
+}
+
+watch(
+  () => props.keyword,
+  (val) => {
+    if (val) {
+      handleSearch(val);
+    } else {
+      searchResults.value = [...searchHistory.value];
+    }
+  },
+);
+
+onMounted(() => {
+  searchItems.value = mapTree(props.menus, (item) => {
+    return {
+      ...item,
+      name: $t(item?.name),
+    };
+  });
+  if (searchHistory.value.length > 0) {
+    searchResults.value = searchHistory.value;
+  }
+  // enter search
+  onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  // esc close
+  onKeyStroke('Escape', handleClose);
+});
+</script>
+
+<template>
+  <VbenScrollbar>
+    <div class="!flex h-full justify-center px-4 sm:max-h-[450px]">
+      <!-- 无搜索结果 -->
+      <div
+        v-if="keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <IcRoundSearchOff class="size-12" />
+        <p class="my-10 text-xs">
+          {{ $t('search.no-results') }}
+          <span class="text-foreground text-sm font-medium">
+            "{{ keyword }}"
+          </span>
+        </p>
+      </div>
+      <!-- 历史搜索记录 & 没有搜索结果 -->
+      <div
+        v-if="!keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <p class="my-10 text-xs">
+          {{ $t('search.no-recent') }}
+        </p>
+      </div>
+
+      <ul v-show="searchResults.length > 0" class="w-full">
+        <li
+          v-if="searchHistory.length > 0 && !keyword"
+          class="text-muted-foreground mb-2 text-xs"
+        >
+          {{ $t('search.recent') }}
+        </li>
+        <li
+          v-for="(item, index) in searchResults"
+          :key="item.path"
+          :class="
+            activeIndex === index
+              ? 'active bg-primary text-primary-foreground text-muted-foreground'
+              : ''
+          "
+          :data-index="index"
+          :data-search-item="index"
+          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
+          @mouseenter="handleMouseenter"
+        >
+          <VbenIcon
+            :icon="item.icon"
+            class="mr-2 size-5 flex-shrink-0"
+            fallback
+          />
+
+          <span class="flex-1">{{ item.name }}</span>
+          <div
+            class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
+            @click.stop="removeItem(index)"
+          >
+            <IcRoundClose />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </VbenScrollbar>
+</template>

packages/business/widgets/src/index.ts

@@ -0,0 +1,8 @@
+export * from './coze-assistant';
+export * from './global-provider';
+export * from './global-search';
+export * from './language-toggle';
+export * from './notification';
+export * from './preferences';
+export * from './theme-toggle';
+export * from './user-dropdown';

packages/business/widgets/src/language-toggle/index.ts

@@ -0,0 +1 @@
+export { default as LanguageToggle } from './language-toggle.vue';

packages/business/widgets/src/language-toggle/language-toggle.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SupportedLanguagesType } from '@vben/types';
+
+import { loadLocaleMessages } from '@vben/locales';
+import { IcBaselineLanguage } from '@vben-core/iconify';
+import {
+  SUPPORT_LANGUAGES,
+  preferences,
+  updatePreferences,
+} from '@vben-core/preferences';
+import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'LanguageToggle',
+});
+
+const menus = SUPPORT_LANGUAGES;
+
+async function handleUpdate(value: string) {
+  const locale = value as SupportedLanguagesType;
+  updatePreferences({
+    app: {
+      locale,
+    },
+  });
+  // 更改预览
+  await loadLocaleMessages(locale);
+}
+</script>
+
+<template>
+  <div>
+    <VbenDropdownRadioMenu
+      :menus="menus"
+      :model-value="preferences.app.locale"
+      @update:model-value="handleUpdate"
+    >
+      <VbenIconButton>
+        <IcBaselineLanguage class="size-5" />
+      </VbenIconButton>
+    </VbenDropdownRadioMenu>
+  </div>
+</template>

packages/business/widgets/src/notification/index.ts

@@ -0,0 +1,3 @@
+export type * from './interface';
+
+export { default as Notification } from './notification.vue';

packages/business/widgets/src/notification/interface.ts

@@ -0,0 +1,9 @@
+interface NotificationItem {
+  avatar: string;
+  date: string;
+  isRead?: boolean;
+  message: string;
+  title: string;
+}
+
+export type { NotificationItem };

packages/business/widgets/src/notification/notification.vue

@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { NotificationItem } from './interface';
+
+import { $t } from '@vben/locales';
+import {
+  IcRoundMarkEmailRead,
+  IcRoundNotificationsNone,
+} from '@vben-core/iconify';
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenPopover,
+  VbenScrollbar,
+} from '@vben-core/shadcn-ui';
+
+import { useToggle } from '@vueuse/core';
+
+interface Props {
+  /**
+   * 显示圆点
+   */
+  dot?: boolean;
+  /**
+   * 消息列表
+   */
+  notifications?: NotificationItem[];
+}
+
+defineOptions({ name: 'NotificationPopup' });
+
+withDefaults(defineProps<Props>(), {
+  dot: false,
+  notifications: () => [],
+});
+
+const emit = defineEmits<{
+  clear: [];
+  makeAll: [];
+  read: [NotificationItem];
+  viewAll: [];
+}>();
+
+const [open, toggle] = useToggle();
+
+function close() {
+  open.value = false;
+}
+
+function handleViewAll() {
+  emit('viewAll');
+  close();
+}
+
+function handleMakeAll() {
+  emit('makeAll');
+}
+
+function handleClear() {
+  emit('clear');
+}
+
+function handleClick(item: NotificationItem) {
+  emit('read', item);
+}
+</script>
+<template>
+  <VbenPopover
+    v-model:open="open"
+    content-class="relative right-2 w-[360px] p-0"
+  >
+    <template #trigger>
+      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
+        <VbenIconButton class="bell-button relative">
+          <span
+            v-if="dot"
+            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+          ></span>
+          <IcRoundNotificationsNone class="size-5" />
+        </VbenIconButton>
+      </div>
+    </template>
+
+    <div class="relative">
+      <div class="flex items-center justify-between p-4 py-3">
+        <div class="text-foreground">{{ $t('widgets.notifications') }}</div>
+        <VbenIconButton
+          :tooltip="$t('widgets.make-all-as-read')"
+          @click="handleMakeAll"
+        >
+          <IcRoundMarkEmailRead />
+        </VbenIconButton>
+      </div>
+      <VbenScrollbar v-if="notifications.length > 0">
+        <ul class="!flex max-h-[360px] w-full flex-col">
+          <template v-for="item in notifications" :key="item.title">
+            <li
+              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
+              @click="handleClick(item)"
+            >
+              <span
+                v-if="!item.isRead"
+                class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
+              ></span>
+
+              <span
+                class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+              >
+                <img
+                  :src="item.avatar"
+                  class="aspect-square h-full w-full object-cover"
+                  role="img"
+                />
+              </span>
+              <div class="flex flex-col gap-1 leading-none">
+                <p class="font-semibold">{{ item.title }}</p>
+                <p class="text-muted-foreground my-1 line-clamp-2 text-xs">
+                  {{ item.message }}
+                </p>
+                <p class="text-muted-foreground line-clamp-2 text-xs">
+                  {{ item.date }}
+                </p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </VbenScrollbar>
+
+      <template v-else>
+        <div class="flex-center text-muted-foreground min-h-[150px] w-full">
+          {{ $t('common.not-data') }}
+        </div>
+      </template>
+
+      <div
+        class="border-border flex items-center justify-between border-t px-4 py-3"
+      >
+        <VbenButton size="sm" variant="ghost" @click="handleClear">
+          {{ $t('widgets.clear-notifications') }}
+        </VbenButton>
+        <VbenButton size="sm" @click="handleViewAll">
+          {{ $t('widgets.view-all') }}
+        </VbenButton>
+      </div>
+    </div>
+  </VbenPopover>
+</template>
+
+<style scoped>
+:deep(.bell-button) {
+  &:hover {
+    svg {
+      animation: bell-ring 1s both;
+    }
+  }
+}
+
+@keyframes bell-ring {
+  0%,
+  100% {
+    transform-origin: top;
+  }
+
+  15% {
+    transform: rotateZ(10deg);
+  }
+
+  30% {
+    transform: rotateZ(-10deg);
+  }
+
+  45% {
+    transform: rotateZ(5deg);
+  }
+
+  60% {
+    transform: rotateZ(-5deg);
+  }
+
+  75% {
+    transform: rotateZ(2deg);
+  }
+}
+</style>

packages/business/widgets/src/preferences/blocks/block.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+}
+
+defineOptions({
+  name: 'PreferenceBlock',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+});
+</script>
+
+<template>
+  <div class="flex flex-col py-4">
+    <h3 class="mb-3 font-semibold leading-none tracking-tight">
+      {{ title }}
+    </h3>
+    <slot></slot>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/general/animation.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceAnimation',
+});
+
+const transitionProgress = defineModel<boolean>('transitionProgress', {
+  // 默认值
+  default: false,
+});
+const transitionName = defineModel<string>('transitionName');
+const transitionEnable = defineModel<boolean>('transitionEnable');
+const transitionLoading = defineModel<boolean>('transitionLoading');
+
+const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
+
+function handleClick(value: string) {
+  transitionName.value = value;
+}
+</script>
+
+<template>
+  <SwitchItem v-model="transitionProgress">
+    {{ $t('preferences.animation.progress') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionLoading">
+    {{ $t('preferences.animation.loading') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionEnable">
+    {{ $t('preferences.animation.transition') }}
+  </SwitchItem>
+  <div
+    v-if="transitionEnable"
+    class="mb-2 mt-3 flex justify-between gap-3 px-2"
+  >
+    <div
+      v-for="item in transitionPreset"
+      :key="item"
+      :class="{
+        'outline-box-active': transitionName === item,
+      }"
+      class="outline-box p-2"
+      @click="handleClick(item)"
+    >
+      <div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
+    </div>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/general/general.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const appLocale = defineModel<string>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const appAiAssistant = defineModel<boolean>('appAiAssistant');
+
+const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+  label: item.text,
+  value: item.key,
+}));
+</script>
+
+<template>
+  <SelectItem v-model="appLocale" :items="localeItems">
+    {{ $t('preferences.language') }}
+  </SelectItem>
+  <SwitchItem v-model="appDynamicTitle">
+    {{ $t('preferences.dynamic-title') }}
+  </SwitchItem>
+  <SwitchItem v-model="appAiAssistant">
+    {{ $t('preferences.ai-assistant') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/index.ts

@@ -0,0 +1,17 @@
+export { default as Block } from './block.vue';
+export { default as Animation } from './general/animation.vue';
+export { default as General } from './general/general.vue';
+export { default as Breadcrumb } from './layout/breadcrumb.vue';
+export { default as Content } from './layout/content.vue';
+export { default as Footer } from './layout/footer.vue';
+export { default as Header } from './layout/header.vue';
+export { default as Layout } from './layout/layout.vue';
+export { default as Navigation } from './layout/navigation.vue';
+export { default as Sidebar } from './layout/sidebar.vue';
+export { default as Tabbar } from './layout/tabbar.vue';
+export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
+export { default as SwitchItem } from './switch-item.vue';
+export { default as BuiltinTheme } from './theme/builtin.vue';
+export { default as ColorMode } from './theme/color-mode.vue';
+export { default as Radius } from './theme/radius.vue';
+export { default as Theme } from './theme/theme.vue';

packages/business/widgets/src/preferences/blocks/layout/breadcrumb.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const props = defineProps<{ disabled?: boolean }>();
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const typeItems: SelectListItem[] = [
+  { label: $t('preferences.normal'), value: 'normal' },
+  { label: $t('preferences.breadcrumb-background'), value: 'background' },
+];
+
+const disableItem = computed(() => {
+  return !breadcrumbEnable.value || props.disabled;
+});
+</script>
+
+<template>
+  <SwitchItem v-model="breadcrumbEnable" :disabled="disabled">
+    {{ $t('preferences.breadcrumb-enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbHideOnlyOne" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb-hide-only-one') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbShowHome" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb-home') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbShowIcon" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb-icon') }}
+  </SwitchItem>
+  <ToggleItem
+    v-model="breadcrumbStyleType"
+    :disabled="disableItem"
+    :items="typeItems"
+  >
+    {{ $t('preferences.breadcrumb-style') }}
+  </ToggleItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/content.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { type Component, computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ContentCompact, ContentWide } from '../../icons';
+
+defineOptions({
+  name: 'PreferenceLayoutContent',
+});
+
+const modelValue = defineModel<string>({ default: 'wide' });
+
+const components: Record<string, Component> = {
+  compact: ContentCompact,
+  wide: ContentWide,
+};
+
+const PRESET = computed(() => [
+  {
+    name: $t('preferences.wide'),
+    type: 'wide',
+  },
+  {
+    name: '定宽',
+    type: 'compact',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ theme.name }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/layout/footer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const footerEnable = defineModel<boolean>('footerEnable');
+const footerFixed = defineModel<boolean>('footerFixed');
+</script>
+
+<template>
+  <SwitchItem v-model="footerEnable">
+    {{ $t('preferences.footer.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="footerFixed" :disabled="!footerEnable">
+    {{ $t('preferences.footer.fixed') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/header.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+
+const localeItems: SelectListItem[] = [
+  {
+    label: $t('preferences.header.mode-static'),
+    value: 'static',
+  },
+  {
+    label: $t('preferences.header.mode-fixed'),
+    value: 'fixed',
+  },
+  {
+    label: $t('preferences.header.mode-auto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preferences.header.mode-auto-scroll'),
+    value: 'auto-scroll',
+  },
+];
+</script>
+
+<template>
+  <SwitchItem v-model="headerEnable" :disabled="disabled">
+    {{ $t('preferences.header-visible') }}
+  </SwitchItem>
+  <SelectItem
+    v-model="headerMode"
+    :disabled="!headerEnable"
+    :items="localeItems"
+  >
+    {{ $t('preferences.mode') }}
+  </SelectItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/interface-control.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceInterfaceControl',
+});
+
+const tabsVisible = defineModel<boolean>('tabsVisible');
+const logoVisible = defineModel<boolean>('logoVisible');
+</script>
+
+<template>
+  <SwitchItem v-model="tabsVisible">
+    {{ $t('preferences.tabs-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="logoVisible">
+    {{ $t('preferences.logo-visible') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/layout.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
+import { type Component, computed } from 'vue';
+
+import { $t } from '@vben/locales';
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import {
+  FullContent,
+  HeaderNav,
+  MixedNav,
+  SidebarMixedNav,
+  SidebarNav,
+} from '../../icons';
+
+interface PresetItem {
+  name: string;
+  tip: string;
+  type: LayoutType;
+}
+
+defineOptions({
+  name: 'PreferenceLayout',
+});
+
+const modelValue = defineModel<LayoutType>({ default: 'sidebar-nav' });
+
+const components: Record<LayoutType, Component> = {
+  'full-content': FullContent,
+  'header-nav': HeaderNav,
+  'mixed-nav': MixedNav,
+  'sidebar-mixed-nav': SidebarMixedNav,
+  'sidebar-nav': SidebarNav,
+};
+
+const PRESET = computed((): PresetItem[] => [
+  {
+    name: $t('preferences.vertical'),
+    tip: $t('preferences.vertical-tip'),
+    type: 'sidebar-nav',
+  },
+  {
+    name: $t('preferences.two-column'),
+    tip: $t('preferences.two-column-tip'),
+    type: 'sidebar-mixed-nav',
+  },
+  {
+    name: $t('preferences.horizontal'),
+    tip: $t('preferences.vertical-tip'),
+    type: 'header-nav',
+  },
+  {
+    name: $t('preferences.mixed-menu'),
+    tip: $t('preferences.mixed-menu-tip'),
+    type: 'mixed-nav',
+  },
+  {
+    name: $t('preferences.full-content'),
+    tip: $t('preferences.full-content-tip'),
+    type: 'full-content',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div
+          class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
+        >
+          {{ theme.name }}
+          <VbenTooltip v-if="theme.tip" side="bottom">
+            <template #trigger>
+              <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+            </template>
+            {{ theme.tip }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/layout/navigation.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceNavigationConfig',
+});
+
+defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
+
+const navigationStyleType = defineModel<string>('navigationStyleType');
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+const stylesItems: SelectListItem[] = [
+  { label: $t('preferences.rounded'), value: 'rounded' },
+  { label: $t('preferences.plain'), value: 'plain' },
+];
+</script>
+
+<template>
+  <ToggleItem
+    v-model="navigationStyleType"
+    :disabled="disabled"
+    :items="stylesItems"
+  >
+    {{ $t('preferences.navigation-style') }}
+  </ToggleItem>
+  <SwitchItem
+    v-model="navigationSplit"
+    :disabled="disabledNavigationSplit || disabled"
+  >
+    {{ $t('preferences.navigation-split') }}
+    <template #tip>
+      {{ $t('preferences.navigation-split-tip') }}
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="navigationAccordion" :disabled="disabled">
+    {{ $t('preferences.navigation-accordion') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/sidebar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+</script>
+
+<template>
+  <SwitchItem v-model="sidebarEnable" :disabled="disabled">
+    {{ $t('preferences.side-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
+    {{ $t('preferences.collapse') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarCollapsedShowTitle"
+    :disabled="!sidebarEnable || disabled"
+  >
+    {{ $t('preferences.collapse-show-title') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/layout/tabbar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTabsConfig',
+});
+
+defineProps<{ disabled?: boolean }>();
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+</script>
+
+<template>
+  <SwitchItem v-model="tabbarEnable" :disabled="disabled">
+    {{ $t('preferences.tabs-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabs-icon') }}
+  </SwitchItem>
+  <!-- <SwitchItem v-model="sideCollapseShowTitle" :disabled="!tabsVisible">
+    {{ $t('preferences.collapse-show-title') }}
+  </SwitchItem> -->
+</template>

packages/business/widgets/src/preferences/blocks/select-item.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectListItem[];
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+  },
+);
+
+const selectValue = defineModel<string>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <Select v-model="selectValue">
+      <SelectTrigger class="h-7 w-[140px]">
+        <SelectValue :placeholder="placeholder" />
+      </SelectTrigger>
+      <SelectContent>
+        <template v-for="item in items" :key="item.value">
+          <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+        </template>
+      </SelectContent>
+    </Select>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/shortcut-keys/global.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+import { isWindowsOs } from '@vben-core/toolkit';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+const shortcutKeysGlobalSearch = defineModel<boolean>(
+  'shortcutKeysGlobalSearch',
+);
+const shortcutKeysLogout = defineModel<boolean>('shortcutKeysLogout');
+const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
+
+const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+</script>
+
+<template>
+  <SwitchItem v-model="shortcutKeysEnable">
+    {{ $t('preferences.shortcut-keys.title') }}
+  </SwitchItem>
+  <SwitchItem v-if="shortcutKeysEnable" v-model="shortcutKeysGlobalSearch">
+    {{ $t('preferences.shortcut-keys.search') }}
+    <template #shortcut>
+      {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+      <kbd> K </kbd>
+    </template>
+  </SwitchItem>
+  <SwitchItem v-if="shortcutKeysEnable" v-model="shortcutKeysLogout">
+    {{ $t('preferences.shortcut-keys.logout') }}
+    <template #shortcut> {{ altView }} Q </template>
+  </SwitchItem>
+  <SwitchItem v-if="shortcutKeysEnable" v-model="shortcutKeysPreferences">
+    {{ $t('preferences.shortcut-keys.preferences') }}
+    <template #shortcut> {{ altView }} , </template>
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/switch-item.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import { Switch, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSwitchItem',
+});
+
+withDefaults(defineProps<{ disabled?: boolean }>(), {
+  disabled: false,
+});
+
+const checked = defineModel<boolean>();
+
+const slots = useSlots();
+
+function handleClick() {
+  checked.value = !checked.value;
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
+    @click="handleClick"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
+      <slot name="shortcut"></slot>
+    </span>
+    <Switch v-model:checked="checked" @click.stop />
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/theme/builtin.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { BuiltinThemeType } from '@vben/types';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { TinyColor, convertToHsl } from '@vben-core/colorful';
+import { MdiEditBoxOutline } from '@vben-core/iconify';
+import {
+  BUILT_IN_THEME_PRESETS,
+  type BuiltinThemePreset,
+} from '@vben-core/preferences';
+
+defineOptions({
+  name: 'PreferenceBuiltinTheme',
+});
+
+const props = defineProps<{ isDark: boolean }>();
+
+const colorInput = ref();
+const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+
+const inputValue = computed(() => {
+  return new TinyColor(themeColorPrimary.value).toHexString();
+});
+
+function typeView(name: BuiltinThemeType) {
+  switch (name) {
+    case 'default': {
+      return $t('preferences.theme.default');
+    }
+    case 'violet': {
+      return $t('preferences.theme.violet');
+    }
+    case 'pink': {
+      return $t('preferences.theme.pink');
+    }
+    case 'rose': {
+      return $t('preferences.theme.rose');
+    }
+    case 'sky-blue': {
+      return $t('preferences.theme.sky-blue');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.deep-blue');
+    }
+
+    case 'green': {
+      return $t('preferences.theme.green');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.deep-green');
+    }
+    case 'orange': {
+      return $t('preferences.theme.orange');
+    }
+    case 'yellow': {
+      return $t('preferences.theme.yellow');
+    }
+    case 'zinc': {
+      return $t('preferences.theme.zinc');
+    }
+    case 'neutral': {
+      return $t('preferences.theme.neutral');
+    }
+    case 'slate': {
+      return $t('preferences.theme.slate');
+    }
+    case 'gray': {
+      return $t('preferences.theme.gray');
+    }
+    case 'custom': {
+      return $t('preferences.theme.custom');
+    }
+  }
+}
+
+function handleSelect(theme: BuiltinThemePreset) {
+  modelValue.value = theme.type;
+  const primaryColor = props.isDark
+    ? theme.darkPrimaryColor || theme.primaryColor
+    : theme.primaryColor;
+
+  themeColorPrimary.value = primaryColor || theme.color;
+}
+
+function handleInputChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  themeColorPrimary.value = convertToHsl(target.value);
+}
+
+function selectColor() {
+  colorInput.value?.[0]?.click?.();
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in BUILT_IN_THEME_PRESETS" :key="theme.type">
+      <div class="flex cursor-pointer flex-col" @click="handleSelect(theme)">
+        <div
+          :class="{
+            'outline-box-active': theme.type === modelValue,
+          }"
+          class="outline-box flex-center group cursor-pointer"
+        >
+          <template v-if="theme.type !== 'custom'">
+            <div
+              :style="{ backgroundColor: theme.color }"
+              class="mx-10 my-2 size-5 rounded-md"
+            ></div>
+          </template>
+          <template v-else>
+            <div class="size-full px-10 py-2" @click.stop="selectColor">
+              <div class="flex-center relative size-5 rounded-sm">
+                <MdiEditBoxOutline
+                  class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
+                />
+                <input
+                  ref="colorInput"
+                  :value="inputValue"
+                  class="absolute inset-0 opacity-0"
+                  type="color"
+                  @input="handleInputChange"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="text-muted-foreground my-2 text-center text-xs">
+          {{ typeView(theme.type) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/theme/color-mode.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode', {
+  default: false,
+});
+
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode', {
+  default: false,
+});
+</script>
+
+<template>
+  <SwitchItem v-model="appColorWeakMode">
+    {{ $t('preferences.weak-mode') }}
+  </SwitchItem>
+  <SwitchItem v-model="appColorGrayMode">
+    {{ $t('preferences.gray-mode') }}
+  </SwitchItem>
+</template>

packages/business/widgets/src/preferences/blocks/theme/radius.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const modelValue = defineModel<string | undefined>('themeRadius', {
+  default: '0.5',
+});
+
+const items = [
+  { label: '0', value: '0' },
+  { label: '0.25', value: '0.25' },
+  { label: '0.5', value: '0.5' },
+  { label: '0.75', value: '0.75' },
+  { label: '1', value: '1' },
+];
+</script>
+
+<template>
+  <ToggleGroup
+    v-model="modelValue"
+    class="gap-2"
+    size="sm"
+    type="single"
+    variant="outline"
+  >
+    <template v-for="item in items" :key="item.value">
+      <ToggleGroupItem
+        :value="item.value"
+        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
+      >
+        {{ item.label }}
+      </ToggleGroupItem>
+    </template>
+  </ToggleGroup>
+</template>

packages/business/widgets/src/preferences/blocks/theme/theme.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ThemeModeType } from '@vben-core/preferences';
+
+import type { Component } from 'vue';
+
+import { $t } from '@vben/locales';
+import {
+  IcRoundMotionPhotosAuto,
+  IcRoundWbSunny,
+  MdiMoonAndStars,
+} from '@vben-core/iconify';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTheme',
+});
+
+const modelValue = defineModel<string>({ default: 'auto' });
+const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu', {
+  default: true,
+});
+
+const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
+  {
+    icon: IcRoundWbSunny,
+    name: 'light',
+  },
+  {
+    icon: MdiMoonAndStars,
+    name: 'dark',
+  },
+  {
+    icon: IcRoundMotionPhotosAuto,
+    name: 'auto',
+  },
+];
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+
+function nameView(name: string) {
+  switch (name) {
+    case 'light': {
+      return $t('preferences.light');
+    }
+    case 'dark': {
+      return $t('preferences.dark');
+    }
+    case 'auto': {
+      return $t('preferences.follow-system');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in THEME_PRESET" :key="theme.name">
+      <div
+        class="flex cursor-pointer flex-col"
+        @click="modelValue = theme.name"
+      >
+        <div
+          :class="activeClass(theme.name)"
+          class="outline-box flex-center py-4"
+        >
+          <component :is="theme.icon" class="mx-9 size-5" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ nameView(theme.name) }}
+        </div>
+      </div>
+    </template>
+
+    <SwitchItem
+      v-model="appSemiDarkMenu"
+      :disabled="modelValue !== 'light'"
+      class="mt-6"
+    >
+      {{ $t('preferences.dark-menu') }}
+    </SwitchItem>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/toggle-item.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceToggleItem',
+});
+
+withDefaults(defineProps<{ disabled?: boolean; items: SelectListItem[] }>(), {
+  disabled: false,
+  items: () => [],
+});
+
+const modelValue = defineModel<string>();
+</script>
+
+<template>
+  <div
+    :class="{
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
+    disabled
+  >
+    <span class="text-sm"><slot></slot></span>
+    <ToggleGroup
+      v-model="modelValue"
+      class="gap-2"
+      size="sm"
+      type="single"
+      variant="outline"
+    >
+      <template v-for="item in items" :key="item.value">
+        <ToggleGroupItem
+          :value="item.value"
+          class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
+        >
+          {{ item.label }}
+        </ToggleGroupItem>
+      </template>
+    </ToggleGroup>
+  </div>
+</template>

packages/business/widgets/src/preferences/icons/content-compact.vue

@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="41.98275"
+        x="45.37589"
+        y="13.53192"
+      />
+      <path
+        id="svg_14"
+        d="m16.4123,15.53192c0,-1.08676 0.74096,-2 1.62271,-2l21.74653,0c0.88175,0 1.62271,0.91324 1.62271,2l0,17.24865c0,1.08676 -0.74096,2 -1.62271,2l-21.74653,0c-0.88175,0 -1.62271,-0.91324 -1.62271,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="71.10636"
+        x="16.54743"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/full-content.vue

@@ -0,0 +1,50 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        id="svg_1"
+        d="m0.13514,4.13514c0,-2.17352 1.82648,-4 4,-4l96,0c2.17352,0 4,1.82648 4,4l0,58c0,2.17352 -1.82648,4 -4,4l-96,0c-2.17352,0 -4,-1.82648 -4,-4l0,-58z"
+        fill="currentColor"
+        fill-opacity="0.02"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="26.57155"
+        rx="2"
+        stroke="null"
+        width="53.18333"
+        x="45.79979"
+        y="3.77232"
+      />
+      <path
+        id="svg_14"
+        d="m4.28142,5.96169c0,-1.37748 1.06465,-2.53502 2.33158,-2.53502l31.2463,0c1.26693,0 2.33158,1.15754 2.33158,2.53502l0,21.86282c0,1.37748 -1.06465,2.53502 -2.33158,2.53502l-31.2463,0c-1.26693,0 -2.33158,-1.15754 -2.33158,-2.53502l0,-21.86282z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="25.02247"
+        rx="2"
+        stroke="null"
+        width="94.39371"
+        x="4.56735"
+        y="34.92584"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/header-nav.vue

@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="53.60438"
+        x="43.484"
+        y="13.66705"
+      />
+      <path
+        id="svg_14"
+        d="m3.43932,15.53192c0,-1.08676 1.03344,-2 2.26323,-2l30.33036,0c1.22979,0 2.26323,0.91324 2.26323,2l0,17.24865c0,1.08676 -1.03344,2 -2.26323,2l-30.33036,0c-1.22979,0 -2.26323,-0.91324 -2.26323,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="95.02528"
+        x="3.30419"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/index.ts

@@ -0,0 +1,10 @@
+import HeaderNav from './header-nav.vue';
+
+export { default as ContentCompact } from './content-compact.vue';
+export { default as FullContent } from './full-content.vue';
+export { default as MixedNav } from './mixed-nav.vue';
+export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
+export { default as SidebarNav } from './sidebar-nav.vue';
+
+const ContentWide = HeaderNav;
+export { ContentWide, HeaderNav };

packages/business/widgets/src/preferences/icons/mixed-nav.vue

@@ -0,0 +1,161 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="44.13071"
+        x="53.37873"
+        y="13.45652"
+      />
+      <path
+        id="svg_14"
+        d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="78.39372"
+        x="19.93575"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+      <rect
+        id="svg_5"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="56.81191"
+        stroke="null"
+        width="15.44642"
+        x="-0.06423"
+        y="9.03113"
+      />
+      <path
+        id="svg_2"
+        d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_6"
+        d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_7"
+        d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_9"
+        d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/setting.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9 12.66a1 1 0 0 1 0-1.32l1.28-1.44a1 1 0 0 0 .12-1.17l-2-3.46a1 1 0 0 0-1.07-.48l-1.88.38a1 1 0 0 1-1.15-.66l-.61-1.83a1 1 0 0 0-.95-.68h-4a1 1 0 0 0-1 .68l-.56 1.83a1 1 0 0 1-1.15.66L5 4.79a1 1 0 0 0-1 .48L2 8.73a1 1 0 0 0 .1 1.17l1.27 1.44a1 1 0 0 1 0 1.32L2.1 14.1a1 1 0 0 0-.1 1.17l2 3.46a1 1 0 0 0 1.07.48l1.88-.38a1 1 0 0 1 1.15.66l.61 1.83a1 1 0 0 0 1 .68h4a1 1 0 0 0 .95-.68l.61-1.83a1 1 0 0 1 1.15-.66l1.88.38a1 1 0 0 0 1.07-.48l2-3.46a1 1 0 0 0-.12-1.17ZM18.41 14l.8.9l-1.28 2.22l-1.18-.24a3 3 0 0 0-3.45 2L12.92 20h-2.56L10 18.86a3 3 0 0 0-3.45-2l-1.18.24l-1.3-2.21l.8-.9a3 3 0 0 0 0-4l-.8-.9l1.28-2.2l1.18.24a3 3 0 0 0 3.45-2L10.36 4h2.56l.38 1.14a3 3 0 0 0 3.45 2l1.18-.24l1.28 2.22l-.8.9a3 3 0 0 0 0 3.98m-6.77-6a4 4 0 1 0 4 4a4 4 0 0 0-4-4m0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2"
+    />
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/sidebar-mixed-nav.vue

@@ -0,0 +1,173 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="15.46086"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.67897"
+        rx="2"
+        stroke="null"
+        width="8.18938"
+        x="0.58676"
+        y="1.42154"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="75.91967"
+        x="25.38277"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="27.91529"
+        y="3.69284"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.78868"
+        y="3.69981"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="42.9287"
+        x="58.75427"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="28.36894"
+        x="26.14342"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="75.09493"
+        x="26.34264"
+        y="39.68822"
+      />
+      <rect
+        id="svg_5"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.79832"
+        y="28.39462"
+      />
+      <rect
+        id="svg_6"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="41.80156"
+      />
+      <rect
+        id="svg_7"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="55.36623"
+      />
+      <rect
+        id="svg_16"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="65.72065"
+        stroke="null"
+        width="12.49265"
+        x="9.85477"
+        y="-0.02618"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/icons/sidebar-nav.vue

@@ -0,0 +1,153 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.61916a4.4919,4.02457 0 0 1 4.4919,-4.02457l26.35848,0l0,66.40541l-26.35848,0a4.4919,4.02457 0 0 1 -4.4919,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="23.884"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="9.706"
+        rx="2"
+        width="9.811"
+        x="8.83"
+        y="5.881"
+      />
+      <path
+        id="svg_5"
+        d="m4.906,35.833c0,-0.75801 0.63699,-1.395 1.395,-1.395l14.87,0c0.75801,0 1.395,0.63699 1.395,1.395l0,-0.001c0,0.75801 -0.63699,1.395 -1.395,1.395l-14.87,0c-0.75801,0 -1.395,-0.63699 -1.395,-1.395l0,0.001z"
+        fill="#ffffff"
+        opacity="undefined"
+      />
+      <rect
+        id="svg_6"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="44.992"
+      />
+      <rect
+        id="svg_7"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="55.546"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="73.53879"
+        x="28.97986"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="32.039"
+        y="3.89903"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.58249"
+        y="3.49362"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="45.63141"
+        x="56.05157"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="22.82978"
+        x="29.38527"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="72.45771"
+        x="28.97986"
+        y="39.48203"
+      />
+    </g>
+  </svg>
+</template>

packages/business/widgets/src/preferences/index.ts

@@ -0,0 +1 @@
+export { default as PreferencesWidget } from './preferences-widget.vue';

packages/business/widgets/src/preferences/preferences-widget.vue

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { loadLocaleMessages } from '@vben/locales';
+import { preferences, updatePreferences } from '@vben-core/preferences';
+
+import Preferences from './preferences.vue';
+</script>
+<template>
+  <Preferences
+    :app-ai-assistant="preferences.app.aiAssistant"
+    :app-color-gray-mode="preferences.app.colorGrayMode"
+    :app-color-weak-mode="preferences.app.colorWeakMode"
+    :app-content-compact="preferences.app.contentCompact"
+    :app-dynamic-title="preferences.app.dynamicTitle"
+    :app-layout="preferences.app.layout"
+    :app-locale="preferences.app.locale"
+    :app-semi-dark-menu="preferences.app.semiDarkMenu"
+    :breadcrumb-enable="preferences.breadcrumb.enable"
+    :breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
+    :breadcrumb-home="preferences.breadcrumb.showHome"
+    :breadcrumb-icon="preferences.breadcrumb.showIcon"
+    :breadcrumb-style-type="preferences.breadcrumb.styleType"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :header-enable="preferences.header.enable"
+    :header-mode="preferences.header.mode"
+    :navigation-accordion="preferences.navigation.accordion"
+    :navigation-split="preferences.navigation.split"
+    :navigation-style-type="preferences.navigation.styleType"
+    :shortcut-keys-enable="preferences.shortcutKeys.enable"
+    :shortcut-keys-global-logout="preferences.shortcutKeys.globalLogout"
+    :shortcut-keys-global-preferences="
+      preferences.shortcutKeys.globalPreferences
+    "
+    :shortcut-keys-global-search="preferences.shortcutKeys.globalSearch"
+    :sidebar-collapsed="preferences.sidebar.collapsed"
+    :sidebar-collapsed-show-title="preferences.sidebar.collapsedShowTitle"
+    :sidebar-enable="preferences.sidebar.enable"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-show-icon="preferences.tabbar.showIcon"
+    :theme-builtin-type="preferences.theme.builtinType"
+    :theme-color-primary="preferences.theme.colorPrimary"
+    :theme-mode="preferences.theme.mode"
+    :theme-radius="preferences.theme.radius"
+    :transition-enable="preferences.transition.enable"
+    :transition-loading="preferences.transition.loading"
+    :transition-name="preferences.transition.name"
+    :transition-progress="preferences.transition.progress"
+    @update:app-ai-assistant="
+      (val) => updatePreferences({ app: { aiAssistant: val } })
+    "
+    @update:app-color-gray-mode="
+      (val) => updatePreferences({ app: { colorGrayMode: val } })
+    "
+    @update:app-color-weak-mode="
+      (val) => updatePreferences({ app: { colorWeakMode: val } })
+    "
+    @update:app-content-compact="
+      (val) => updatePreferences({ app: { contentCompact: val } })
+    "
+    @update:app-dynamic-title="
+      (val) => updatePreferences({ app: { dynamicTitle: val } })
+    "
+    @update:app-layout="(val) => updatePreferences({ app: { layout: val } })"
+    @update:app-locale="
+      (val) => {
+        updatePreferences({ app: { locale: val } });
+        loadLocaleMessages(val);
+      }
+    "
+    @update:app-semi-dark-menu="
+      (val) => updatePreferences({ app: { semiDarkMenu: val } })
+    "
+    @update:breadcrumb-enable="
+      (val) => updatePreferences({ breadcrumb: { enable: val } })
+    "
+    @update:breadcrumb-hide-only-one="
+      (val) => updatePreferences({ breadcrumb: { hideOnlyOne: val } })
+    "
+    @update:breadcrumb-show-home="
+      (val) => updatePreferences({ breadcrumb: { showHome: val } })
+    "
+    @update:breadcrumb-show-icon="
+      (val) => updatePreferences({ breadcrumb: { showIcon: val } })
+    "
+    @update:breadcrumb-style-type="
+      (val) => updatePreferences({ breadcrumb: { styleType: val } })
+    "
+    @update:footer-enable="
+      (val) => updatePreferences({ footer: { enable: val } })
+    "
+    @update:footer-fixed="
+      (val) => updatePreferences({ footer: { fixed: val } })
+    "
+    @update:header-enable="
+      (val) => updatePreferences({ header: { enable: val } })
+    "
+    @update:header-mode="(val) => updatePreferences({ header: { mode: val } })"
+    @update:navigation-accordion="
+      (val) => updatePreferences({ navigation: { accordion: val } })
+    "
+    @update:navigation-split="
+      (val) => updatePreferences({ navigation: { split: val } })
+    "
+    @update:navigation-style-type="
+      (val) => updatePreferences({ navigation: { styleType: val } })
+    "
+    @update:shortcut-keys-enable="
+      (val) => updatePreferences({ shortcutKeys: { enable: val } })
+    "
+    @update:shortcut-keys-global-logout="
+      (val) => updatePreferences({ shortcutKeys: { globalLogout: val } })
+    "
+    @update:shortcut-keys-global-preferences="
+      (val) => updatePreferences({ shortcutKeys: { globalPreferences: val } })
+    "
+    @update:shortcut-keys-global-search="
+      (val) => updatePreferences({ shortcutKeys: { globalSearch: val } })
+    "
+    @update:sidebar-collapsed="
+      (val) => updatePreferences({ sidebar: { collapsed: val } })
+    "
+    @update:sidebar-collapsed-show-title="
+      (val) => updatePreferences({ sidebar: { collapsedShowTitle: val } })
+    "
+    @update:sidebar-enable="
+      (val) => updatePreferences({ sidebar: { enable: val } })
+    "
+    @update:tabbar-enable="
+      (val) => updatePreferences({ tabbar: { enable: val } })
+    "
+    @update:tabbar-show-icon="
+      (val) => updatePreferences({ tabbar: { showIcon: val } })
+    "
+    @update:theme-builtin-type="
+      (val) => updatePreferences({ theme: { builtinType: val } })
+    "
+    @update:theme-color-primary="
+      (val) => updatePreferences({ theme: { colorPrimary: val } })
+    "
+    @update:theme-mode="(val) => updatePreferences({ theme: { mode: val } })"
+    @update:theme-radius="
+      (val) => updatePreferences({ theme: { radius: val } })
+    "
+    @update:transition-enable="
+      (val) => updatePreferences({ transition: { enable: val } })
+    "
+    @update:transition-loading="
+      (val) => updatePreferences({ transition: { loading: val } })
+    "
+    @update:transition-name="
+      (val) => updatePreferences({ transition: { name: val } })
+    "
+    @update:transition-progress="
+      (val) => updatePreferences({ transition: { progress: val } })
+    "
+  />
+</template>

packages/business/widgets/src/preferences/preferences.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import type {
+  BuiltinThemeType,
+  ContentCompactType,
+  LayoutHeaderModeType,
+  LayoutType,
+  SupportedLanguagesType,
+  ThemeModeType,
+} from '@vben/types';
+import type {
+  BreadcrumbStyleType,
+  NavigationStyleType,
+} from '@vben-core/preferences';
+import type { SegmentedItem } from '@vben-core/shadcn-ui';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
+import {
+  preferences,
+  resetPreferences,
+  usePreferences,
+} from '@vben-core/preferences';
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenSegmented,
+  VbenSheet,
+  toast,
+} from '@vben-core/shadcn-ui';
+
+import { useClipboard } from '@vueuse/core';
+
+import {
+  Animation,
+  Block,
+  Breadcrumb,
+  BuiltinTheme,
+  ColorMode,
+  Content,
+  Footer,
+  General,
+  GlobalShortcutKeys,
+  Header,
+  Layout,
+  Navigation,
+  Radius,
+  Sidebar,
+  Tabbar,
+  Theme,
+} from './blocks';
+import Trigger from './trigger.vue';
+import { useOpenPreferences } from './use-open-preferences';
+
+const appLocale = defineModel<SupportedLanguagesType>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const appAiAssistant = defineModel<boolean>('appAiAssistant');
+const appLayout = defineModel<LayoutType>('appLayout');
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
+const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu');
+const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
+
+const transitionProgress = defineModel<boolean>('transitionProgress');
+const transitionName = defineModel<string>('transitionName');
+const transitionLoading = defineModel<boolean>('transitionLoading');
+const transitionEnable = defineModel<boolean>('transitionEnable');
+
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
+const themeMode = defineModel<ThemeModeType>('themeMode');
+const themeRadius = defineModel<string>('themeRadius');
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbStyleType = defineModel<BreadcrumbStyleType>(
+  'breadcrumbStyleType',
+);
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+
+const navigationStyleType = defineModel<NavigationStyleType>(
+  'navigationStyleType',
+);
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+// const logoVisible = defineModel<boolean>('logoVisible');
+
+const footerEnable = defineModel<boolean>('footerEnable');
+const footerFixed = defineModel<boolean>('footerFixed');
+
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+const shortcutKeysGlobalSearch = defineModel<boolean>(
+  'shortcutKeysGlobalSearch',
+);
+const shortcutKeysGlobalLogout = defineModel<boolean>(
+  'shortcutKeysGlobalLogout',
+);
+const shortcutKeysGlobalPreferences = defineModel<boolean>(
+  'shortcutKeysGlobalPreferences',
+);
+
+const {
+  diffPreference,
+  isDark,
+  isFullContent,
+  isHeaderNav,
+  isMixedNav,
+  isSideMixedNav,
+  isSideMode,
+  isSideNav,
+} = usePreferences();
+const { copy } = useClipboard();
+
+const activeTab = ref('appearance');
+
+const tabs = computed((): SegmentedItem[] => {
+  return [
+    {
+      label: $t('preferences.appearance'),
+      value: 'appearance',
+    },
+    {
+      label: $t('preferences.layout'),
+      value: 'layout',
+    },
+    {
+      label: $t('preferences.shortcut-keys.title'),
+      value: 'shortcutKey',
+    },
+    {
+      label: $t('preferences.general'),
+      value: 'general',
+    },
+  ];
+});
+
+const showBreadcrumbConfig = computed(() => {
+  return (
+    !isFullContent.value &&
+    !isMixedNav.value &&
+    !isHeaderNav.value &&
+    preferences.header.enable
+  );
+});
+
+const { openPreferences } = useOpenPreferences();
+
+async function handleCopy() {
+  await copy(JSON.stringify(diffPreference.value, null, 2));
+
+  toast($t('preferences.copy-success'));
+}
+
+function handleReset() {
+  if (!diffPreference.value) {
+    return;
+  }
+  resetPreferences();
+  toast($t('preferences.reset-success'));
+}
+</script>
+
+<template>
+  <div class="z-100 fixed right-0 top-1/2">
+    <VbenSheet
+      v-model:open="openPreferences"
+      :description="$t('preferences.subtitle')"
+      :title="$t('preferences.name')"
+    >
+      <template #trigger>
+        <Trigger />
+      </template>
+      <template #extra>
+        <VbenIconButton
+          :disabled="!diffPreference"
+          :tooltip="$t('preferences.reset-tip')"
+          class="relative"
+        >
+          <span
+            v-if="diffPreference"
+            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+          ></span>
+          <IcRoundRestartAlt class="size-5" @click="handleReset" />
+        </VbenIconButton>
+      </template>
+
+      <div class="p-4 pt-4">
+        <VbenSegmented v-model="activeTab" :tabs="tabs">
+          <template #general>
+            <Block :title="$t('preferences.general')">
+              <General
+                v-model:app-ai-assistant="appAiAssistant"
+                v-model:app-dynamic-title="appDynamicTitle"
+                v-model:app-locale="appLocale"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.animation.name')">
+              <Animation
+                v-model:transition-enable="transitionEnable"
+                v-model:transition-loading="transitionLoading"
+                v-model:transition-name="transitionName"
+                v-model:transition-progress="transitionProgress"
+              />
+            </Block>
+          </template>
+          <template #appearance>
+            <Block :title="$t('preferences.theme.name')">
+              <Theme
+                v-model="themeMode"
+                v-model:app-semi-dark-menu="appSemiDarkMenu"
+              />
+            </Block>
+            <!-- <Block :title="$t('preferences.theme-color')">
+              <ThemeColor
+                v-model="themeColorPrimary"
+                :color-primary-presets="colorPrimaryPresets"
+              />
+            </Block> -->
+            <Block :title="$t('preferences.theme.builtin')">
+              <BuiltinTheme
+                v-model="themeBuiltinType"
+                v-model:theme-color-primary="themeColorPrimary"
+                :is-dark="isDark"
+              />
+            </Block>
+            <Block :title="$t('preferences.theme.radius')">
+              <Radius v-model="themeRadius" />
+            </Block>
+            <Block :title="$t('preferences.other')">
+              <ColorMode
+                v-model:app-color-gray-mode="appColorGrayMode"
+                v-model:app-color-weak-mode="appColorWeakMode"
+              />
+            </Block>
+          </template>
+          <template #layout>
+            <Block :title="$t('preferences.layout')">
+              <Layout v-model="appLayout" />
+            </Block>
+            <Block :title="$t('preferences.content')">
+              <Content v-model="appContentCompact" />
+            </Block>
+
+            <Block :title="$t('preferences.sidebar')">
+              <Sidebar
+                v-model:sidebar-collapsed="sidebarCollapsed"
+                v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
+                v-model:sidebar-enable="sidebarEnable"
+                :disabled="!isSideMode"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.header.name')">
+              <Header
+                v-model:headerEnable="headerEnable"
+                v-model:headerMode="headerMode"
+                :disabled="isFullContent"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.navigation-menu')">
+              <Navigation
+                v-model:navigation-accordion="navigationAccordion"
+                v-model:navigation-split="navigationSplit"
+                v-model:navigation-style-type="navigationStyleType"
+                :disabled="isFullContent"
+                :disabled-navigation-split="!isMixedNav"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.breadcrumb')">
+              <Breadcrumb
+                v-model:breadcrumb-enable="breadcrumbEnable"
+                v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
+                v-model:breadcrumb-show-home="breadcrumbShowHome"
+                v-model:breadcrumb-show-icon="breadcrumbShowIcon"
+                v-model:breadcrumb-style-type="breadcrumbStyleType"
+                :disabled="
+                  !showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
+                "
+              />
+            </Block>
+
+            <Block :title="$t('preferences.tabs')">
+              <Tabbar
+                v-model:tabbar-enable="tabbarEnable"
+                v-model:tabbar-show-icon="tabbarShowIcon"
+              />
+            </Block>
+            <Block :title="$t('preferences.footer.name')">
+              <Footer
+                v-model:footer-enable="footerEnable"
+                v-model:footer-fixed="footerFixed"
+              />
+            </Block>
+          </template>
+
+          <template #shortcutKey>
+            <Block :title="$t('preferences.shortcut-keys.global')">
+              <GlobalShortcutKeys
+                v-model:shortcut-keys-enable="shortcutKeysEnable"
+                v-model:shortcut-keys-global-search="shortcutKeysGlobalSearch"
+                v-model:shortcut-keys-logout="shortcutKeysGlobalLogout"
+                v-model:shortcut-keys-preferences="
+                  shortcutKeysGlobalPreferences
+                "
+              />
+            </Block>
+          </template>
+        </VbenSegmented>
+      </div>
+
+      <template #footer>
+        <VbenButton
+          :disabled="!diffPreference"
+          class="mx-6 w-full"
+          size="sm"
+          variant="default"
+          @click="handleCopy"
+        >
+          <IcRoundFolderCopy class="mr-2 size-3" />
+          {{ $t('preferences.copy') }}
+        </VbenButton>
+      </template>
+    </VbenSheet>
+  </div>
+</template>

packages/business/widgets/src/preferences/trigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import IconSetting from './icons/setting.vue';
+
+defineOptions({
+  name: 'PreferenceTrigger',
+});
+</script>
+
+<template>
+  <VbenButton
+    :title="$t('preferences.name')"
+    class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
+  >
+    <IconSetting
+      class="duration-3000 fill-primary-foreground animate-spin text-2xl"
+    />
+  </VbenButton>
+</template>

packages/business/widgets/src/preferences/use-open-preferences.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+const openPreferences = ref(false);
+
+function useOpenPreferences() {
+  function handleOpenPreference() {
+    openPreferences.value = true;
+  }
+
+  return {
+    handleOpenPreference,
+    openPreferences,
+  };
+}
+
+export { useOpenPreferences };

packages/business/widgets/src/theme-toggle/index.ts

@@ -0,0 +1 @@
+export { default as ThemeToggle } from './theme-toggle.vue';

packages/business/widgets/src/theme-toggle/theme-button.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import { computed, nextTick } from 'vue';
+
+import { VbenButton } from '@vben-core/shadcn-ui';
+import { useNamespace } from '@vben-core/toolkit';
+
+interface Props {
+  /**
+   * 类型
+   */
+  type?: 'icon' | 'normal';
+}
+
+defineOptions({
+  name: 'ThemeToggleButton',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'normal',
+});
+
+const isDark = defineModel<boolean>();
+
+const { b, e, is } = useNamespace('theme-toggle');
+
+const theme = computed(() => {
+  return isDark.value ? 'light' : 'dark';
+});
+
+const bindProps = computed(() => {
+  const type = props.type;
+
+  return type === 'normal'
+    ? {
+        variant: 'heavy' as const,
+      }
+    : {
+        class: 'rounded-full',
+        size: 'icon' as const,
+        style: { padding: '6px' },
+        variant: 'icon' as const,
+      };
+});
+
+function toggleTheme(event: MouseEvent) {
+  const isAppearanceTransition =
+    // @ts-expect-error
+    document.startViewTransition &&
+    !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value;
+    return;
+  }
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value;
+    await nextTick();
+  });
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ];
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
+      },
+      {
+        duration: 450,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    );
+  });
+}
+</script>
+
+<template>
+  <VbenButton
+    :aria-label="theme"
+    :class="[b(), is(theme)]"
+    aria-live="polite"
+    class="cursor-pointer border-none bg-none"
+    v-bind="bindProps"
+    @click.stop="toggleTheme"
+  >
+    <svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
+      <mask
+        id="theme-toggle-moon"
+        :class="e('moon')"
+        fill="hsl(var(--foreground)/80%)"
+        stroke="none"
+      >
+        <rect fill="white" height="100%" width="100%" x="0" y="0" />
+        <circle cx="40" cy="8" fill="black" r="11" />
+      </mask>
+      <circle
+        id="sun"
+        :class="e('sun')"
+        cx="12"
+        cy="12"
+        mask="url(#theme-toggle-moon)"
+        r="11"
+      />
+      <g :class="e('sun-beams')">
+        <line x1="12" x2="12" y1="1" y2="3" />
+        <line x1="12" x2="12" y1="21" y2="23" />
+        <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
+        <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
+        <line x1="1" x2="3" y1="12" y2="12" />
+        <line x1="21" x2="23" y1="12" y2="12" />
+        <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
+        <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
+      </g>
+    </svg>
+  </VbenButton>
+</template>
+
+<style lang="scss" scoped>
+@import '@vben-core/design/global';
+
+@include b('theme-toggle') {
+  @include e('moon') {
+    & > circle {
+      transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
+    }
+  }
+
+  @include e('sun') {
+    fill: hsl(var(--foreground) / 80%);
+    stroke: none;
+    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
+    transform-origin: center center;
+
+    &:hover > svg > & {
+      fill: hsl(var(--foreground));
+    }
+  }
+
+  @include e('sun-beams') {
+    stroke: hsl(var(--foreground) / 80%);
+    stroke-width: 2px;
+    transition:
+      transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+      opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
+    transform-origin: center center;
+
+    &:hover > svg > & {
+      stroke: hsl(var(--foreground));
+    }
+  }
+
+  @include is('light') {
+    @include b('theme-toggle') {
+      @include e('sun') {
+        transform: scale(0.5);
+      }
+
+      @include e('sun-beams') {
+        transform: rotateZ(0.25turn);
+      }
+    }
+  }
+
+  @include is('dark') {
+    @include b('theme-toggle') {
+      @include e('moon') {
+        & > circle {
+          transform: translateX(-20px);
+        }
+      }
+
+      @include e('sun-beams') {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:hover > svg {
+    @include b('theme-toggle') {
+      &__moon,
+      &__sun {
+        fill: hsl(var(--foreground));
+      }
+    }
+  }
+}
+</style>

packages/business/widgets/src/theme-toggle/theme-toggle.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { $t } from '@vben/locales';
+import {
+  IcRoundMotionPhotosAuto,
+  IcRoundWbSunny,
+  MdiMoonAndStars,
+} from '@vben-core/iconify';
+import {
+  type ThemeModeType,
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+import ThemeButton from './theme-button.vue';
+
+defineOptions({
+  name: 'ThemeToggle',
+});
+
+withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
+  shouldOnHover: false,
+});
+
+function handleChange(isDark: boolean) {
+  updatePreferences({
+    theme: { mode: isDark ? 'dark' : 'light' },
+  });
+}
+
+const { isDark } = usePreferences();
+
+const PRESETS = [
+  {
+    icon: IcRoundWbSunny,
+    name: 'light',
+    title: $t('preferences.light'),
+  },
+  {
+    icon: MdiMoonAndStars,
+    name: 'dark',
+    title: $t('preferences.dark'),
+  },
+  {
+    icon: IcRoundMotionPhotosAuto,
+    name: 'auto',
+    title: $t('preferences.follow-system'),
+  },
+];
+</script>
+<template>
+  <div>
+    <VbenTooltip :disabled="!shouldOnHover" side="bottom">
+      <template #trigger>
+        <ThemeButton
+          :model-value="isDark"
+          type="icon"
+          @update:model-value="handleChange"
+        />
+      </template>
+      <ToggleGroup
+        :model-value="preferences.theme.mode"
+        class="gap-2"
+        type="single"
+        variant="outline"
+        @update:model-value="
+          (val) => updatePreferences({ theme: { mode: val as ThemeModeType } })
+        "
+      >
+        <ToggleGroupItem
+          v-for="item in PRESETS"
+          :key="item.name"
+          :value="item.name"
+        >
+          <component :is="item.icon" class="size-5" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </VbenTooltip>
+  </div>
+</template>

packages/business/widgets/src/user-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as UserDropdown } from './user-dropdown.vue';

packages/business/widgets/src/user-dropdown/user-dropdown.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { AnyFunction } from '@vben/types';
+
+import type { Component } from 'vue';
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { IcRoundLogout, IcRoundSettingsSuggest } from '@vben-core/iconify';
+import { preferences, usePreferences } from '@vben-core/preferences';
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  VbenAlertDialog,
+  VbenAvatar,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+import { isWindowsOs } from '@vben-core/toolkit';
+
+import { useMagicKeys, whenever } from '@vueuse/core';
+
+import { useOpenPreferences } from '../preferences/use-open-preferences';
+
+interface Props {
+  /**
+   * 头像
+   */
+  avatar?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
+  /**
+   * 是否启用快捷键
+   */
+  enableShortcutKey?: boolean;
+  /**
+   * 菜单数组
+   */
+  menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
+
+  /**
+   * 标签文本
+   */
+  tagText?: string;
+  /**
+   * 文本
+   */
+  text?: string;
+}
+
+defineOptions({
+  name: 'UserDropdown',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  description: '',
+  enableShortcutKey: true,
+  menus: () => [],
+  showShortcutKey: true,
+  tagText: '',
+  text: '',
+});
+
+const emit = defineEmits<{ logout: [] }>();
+const openPopover = ref(false);
+const openDialog = ref(false);
+
+const { globalLogoutShortcutKey, globalPreferencesShortcutKey } =
+  usePreferences();
+const { handleOpenPreference } = useOpenPreferences();
+
+const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+
+const enableLogoutShortcutKey = computed(() => {
+  return props.enableShortcutKey && globalLogoutShortcutKey.value;
+});
+
+const enableShortcutKey = computed(() => {
+  return props.enableShortcutKey && preferences.shortcutKeys.enable;
+});
+
+const enablePreferencesShortcutKey = computed(() => {
+  return props.enableShortcutKey && globalPreferencesShortcutKey.value;
+});
+
+function handleLogout() {
+  // emit
+  openDialog.value = true;
+  openPopover.value = false;
+}
+
+function handleSubmitLogout() {
+  emit('logout');
+  openDialog.value = false;
+}
+
+if (enableShortcutKey.value) {
+  const keys = useMagicKeys();
+  whenever(keys['Alt+KeyQ'], () => {
+    if (enableLogoutShortcutKey.value) {
+      handleLogout();
+    }
+  });
+
+  whenever(keys['Alt+Comma'], () => {
+    if (enablePreferencesShortcutKey.value) {
+      handleOpenPreference();
+    }
+  });
+}
+</script>
+
+<template>
+  <VbenAlertDialog
+    v-model:open="openDialog"
+    :cancel-text="$t('common.cancel')"
+    :content="$t('widgets.logout-tip')"
+    :submit-text="$t('common.confirm')"
+    :title="$t('common.prompt')"
+    @submit="handleSubmitLogout"
+  />
+
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
+        <div class="hover:text-accent-foreground flex-center">
+          <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
+          <!-- <div v-if="text" class="ml-2 text-sm">{{ text }}</div> -->
+        </div>
+      </div>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
+      <DropdownMenuLabel class="flex items-center p-3">
+        <VbenAvatar
+          :alt="text"
+          :src="avatar"
+          class="size-12"
+          dot
+          dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+        />
+        <div class="ml-2 w-full">
+          <div
+            class="text-foreground mb-1 flex items-center text-sm font-medium"
+          >
+            {{ text }}
+            <Badge class="ml-2 text-green-400">
+              {{ tagText }}
+            </Badge>
+          </div>
+          <div class="text-muted-foreground text-xs font-normal">
+            {{ description }}
+          </div>
+        </div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        v-for="menu in menus"
+        :key="menu.text"
+        class="lineh mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+        @click="menu.handler"
+      >
+        <VbenIcon :icon="menu.icon" class="mr-2 size-5" />
+        {{ menu.text }}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+        @click="handleOpenPreference"
+      >
+        <IcRoundSettingsSuggest class="mr-2 size-5" />
+        {{ $t('preferences.name') }}
+        <DropdownMenuShortcut v-if="enablePreferencesShortcutKey">
+          {{ altView }} ,
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+        @click="handleLogout"
+      >
+        <IcRoundLogout class="mr-2 size-5" />
+        {{ $t('common.logout') }}
+        <DropdownMenuShortcut v-if="enableLogoutShortcutKey">
+          {{ altView }} Q
+        </DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

packages/business/widgets/tailwind.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';

packages/business/widgets/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/business/widgets/vite.config.mts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig();