From b180cd8900bc9e5c50c4713670f0208610622c40 Mon Sep 17 00:00:00 2001
From: Kirk Lin <linkirk@163.com>
Date: Mon, 8 Jan 2024 01:10:54 +0800
Subject: [PATCH] feat: add search anywhere

---
 apps/admin/autoResolver/auto-imports.d.ts     |   3 +
 apps/admin/autoResolver/components.d.ts       |   5 +-
 apps/admin/package.json                       |   1 +
 .../admin/src/component/SearchDialog/index.ts |   4 +
 .../SearchDialog/src/SearchDialog.vue         | 304 ++++++++++++++++++
 .../src/component/SearchDialog/src/types.ts   |  15 +
 apps/admin/src/composables/useSearchDialog.ts |  16 +
 .../header/components/SearchAnyWhere.vue      |  70 ++++
 apps/admin/src/layouts/header/index.vue       |  24 +-
 apps/admin/src/layouts/index.vue              |   2 +
 apps/admin/src/locales/en.json                |  11 +
 apps/admin/src/locales/zh.json                |  11 +
 apps/admin/src/store/modules/design/index.ts  |   6 +-
 .../src/store/modules/design/themeUtils.ts    |   3 +
 packages/web/styles/src/index.css             |   2 +
 packages/web/styles/src/mark.css              |   6 +
 packages/web/styles/src/naive-override.css    |  21 ++
 packages/web/utils/src/color/utils.ts         |   5 +
 pnpm-lock.yaml                                |  16 +
 19 files changed, 508 insertions(+), 17 deletions(-)
 create mode 100644 apps/admin/src/component/SearchDialog/index.ts
 create mode 100644 apps/admin/src/component/SearchDialog/src/SearchDialog.vue
 create mode 100644 apps/admin/src/component/SearchDialog/src/types.ts
 create mode 100644 apps/admin/src/composables/useSearchDialog.ts
 create mode 100644 apps/admin/src/layouts/header/components/SearchAnyWhere.vue
 create mode 100644 packages/web/styles/src/mark.css
 create mode 100644 packages/web/styles/src/naive-override.css

diff --git a/apps/admin/autoResolver/auto-imports.d.ts b/apps/admin/autoResolver/auto-imports.d.ts
index b4a9edf..116de8c 100644
--- a/apps/admin/autoResolver/auto-imports.d.ts
+++ b/apps/admin/autoResolver/auto-imports.d.ts
@@ -248,6 +248,7 @@ declare global {
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSearchDialog: typeof import('../src/composables/useSearchDialog')['useSearchDialog']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
@@ -558,6 +559,7 @@ declare module 'vue' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSearchDialog: UnwrapRef<typeof import('../src/composables/useSearchDialog')['useSearchDialog']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
@@ -861,6 +863,7 @@ declare module '@vue/runtime-core' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSearchDialog: UnwrapRef<typeof import('../src/composables/useSearchDialog')['useSearchDialog']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
diff --git a/apps/admin/autoResolver/components.d.ts b/apps/admin/autoResolver/components.d.ts
index 8d0550f..3ddcc28 100644
--- a/apps/admin/autoResolver/components.d.ts
+++ b/apps/admin/autoResolver/components.d.ts
@@ -31,26 +31,25 @@ declare module 'vue' {
     NGrid: typeof import('@celeris/ca-components')['NGrid']
     NGridItem: typeof import('@celeris/ca-components')['NGridItem']
     NInput: typeof import('@celeris/ca-components')['NInput']
-    NInputGroup: typeof import('@celeris/ca-components')['NInputGroup']
     NLayout: typeof import('@celeris/ca-components')['NLayout']
     NLayoutContent: typeof import('@celeris/ca-components')['NLayoutContent']
     NLayoutSider: typeof import('@celeris/ca-components')['NLayoutSider']
     NLoadingBarProvider: typeof import('@celeris/ca-components')['NLoadingBarProvider']
     NMenu: typeof import('@celeris/ca-components')['NMenu']
     NMessageProvider: typeof import('@celeris/ca-components')['NMessageProvider']
+    NModal: typeof import('@celeris/ca-components')['NModal']
     NNotificationProvider: typeof import('@celeris/ca-components')['NNotificationProvider']
-    NPopconfirm: typeof import('@celeris/ca-components')['NPopconfirm']
     NPopover: typeof import('@celeris/ca-components')['NPopover']
     NResult: typeof import('@celeris/ca-components')['NResult']
     NScrollbar: typeof import('@celeris/ca-components')['NScrollbar']
     NSelect: typeof import('@celeris/ca-components')['NSelect']
     NSpace: typeof import('@celeris/ca-components')['NSpace']
-    NSpin: typeof import('@celeris/ca-components')['NSpin']
     NSplit: typeof import('@celeris/ca-components')['NSplit']
     NStep: typeof import('@celeris/ca-components')['NStep']
     NSteps: typeof import('@celeris/ca-components')['NSteps']
     NSwitch: typeof import('@celeris/ca-components')['NSwitch']
     NTable: typeof import('@celeris/ca-components')['NTable']
+    NText: typeof import('@celeris/ca-components')['NText']
     NTooltip: typeof import('@celeris/ca-components')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 29a24c1..c40a8d5 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -44,6 +44,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "pkg-types": "^1.0.3",
     "vue": "^3.4.5",
+    "vue-highlight-words": "^3.0.1",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5"
   },
diff --git a/apps/admin/src/component/SearchDialog/index.ts b/apps/admin/src/component/SearchDialog/index.ts
new file mode 100644
index 0000000..765e943
--- /dev/null
+++ b/apps/admin/src/component/SearchDialog/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@celeris/utils";
+import searchDialog from "./src/SearchDialog.vue";
+
+export const SearchDialog = withInstall(searchDialog);
diff --git a/apps/admin/src/component/SearchDialog/src/SearchDialog.vue b/apps/admin/src/component/SearchDialog/src/SearchDialog.vue
new file mode 100644
index 0000000..07e3e36
--- /dev/null
+++ b/apps/admin/src/component/SearchDialog/src/SearchDialog.vue
@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import type { ScrollbarInst } from "naive-ui";
+import { isWindows } from "@celeris/utils";
+import Highlighter from "vue-highlight-words";
+import { useSearchDialog } from "~/composables/useSearchDialog";
+import type { SearchGroupItem, SearchGroups } from "~/component/SearchDialog/src/types";
+
+const SearchIcon = "tabler:search";
+const ArrowEnterIcon = "fluent:arrow-enter-left-24-regular";
+const ArrowSortIcon = "fluent:arrow-sort-24-regular";
+const FullScreenIcon = "tabler:maximize";
+const CloseIcon = "tabler:x";
+const { toggle: toggleFullScreen } = useFullscreen();
+
+const router = useRouter();
+const { t } = useI18n();
+const isDialogVisible = ref(false);
+const search = ref("");
+const activeItem = ref<null | string | number>(null);
+const scrollContent = ref<(ScrollbarInst & { $el: any }) | null>(null);
+// TODO 根据路由、ChatBot 的角色和系统行为自动生成数据。
+const groups = ref<SearchGroups>([
+  {
+    name: t("searchDialog.applications"),
+    items: [
+      {
+        iconName: "tabler:home",
+        iconImage: null,
+        key: 1,
+        title: "回到首页",
+        label: t("searchDialog.shortcut"),
+        action() {
+          router.push({ path: "/" });
+        },
+      },
+    ],
+  },
+  {
+    name: t("searchDialog.chatBot"),
+    items: [
+      {
+        iconName: null,
+        iconImage: "https://avatars.githubusercontent.com/u/17453452",
+        key: 4,
+        title: "产品经理",
+        label: "负责产品规划和功能开发的专业人员",
+        action() {
+          router.push({ path: "/chat" });
+        },
+      },
+    ],
+  },
+  {
+    name: t("searchDialog.actions"),
+    items: [
+      {
+        iconName: FullScreenIcon,
+        iconImage: null,
+        key: 7,
+        title: "Toggle fullscreen",
+        label: t("searchDialog.action"),
+        action() {
+          toggleFullScreen();
+        },
+      },
+    ],
+  },
+]);
+
+const keywords = computed<string[]>(() => {
+  return search.value.length > 1 ? search.value.split(" ").filter(k => k) : [];
+});
+
+const filteredGroups = computed<SearchGroups>(() => {
+  if (keywords.value.length === 0) {
+    return groups.value;
+  }
+
+  const newGroups: SearchGroups = groups.value.map((group) => {
+    const items = group.items.filter((item) => {
+      const titleMatch = keywords.value.some(k => item.title.toLowerCase().includes(k.toLowerCase()));
+      const tagsMatch = item.tags && keywords.value.some(k => item.tags?.toLowerCase().includes(k.toLowerCase()));
+      return titleMatch || tagsMatch;
+    });
+
+    return items.length ? { ...group, items } : null;
+  }).filter(Boolean) as SearchGroups;
+
+  return newGroups;
+});
+
+const filteredFlattenItems = computed<SearchGroupItem[]>(() => {
+  return filteredGroups.value.flatMap(group => group.items);
+});
+
+function resetValues() {
+  search.value = "";
+  activeItem.value = null;
+}
+function openDialog(e?: MouseEvent) {
+  if (!isDialogVisible.value) {
+    isDialogVisible.value = true;
+    setTimeout(resetValues, 100);
+  }
+  return e;
+}
+
+function closeDialog() {
+  isDialogVisible.value = false;
+  resetValues();
+}
+function executeAction(action: () => void) {
+  action();
+  closeDialog();
+}
+function updateActiveItem(increment: number) {
+  const currentIndex = filteredFlattenItems.value.findIndex(item => item.key === activeItem.value);
+  const lastIndex = filteredFlattenItems.value.length - 1;
+
+  if (activeItem.value === null) {
+    activeItem.value = filteredFlattenItems.value[0].key;
+  } else if (currentIndex === 0 && increment === -1) {
+    activeItem.value = filteredFlattenItems.value[lastIndex].key;
+  } else if (currentIndex === lastIndex && increment === 1) {
+    activeItem.value = filteredFlattenItems.value[0].key;
+  } else {
+    activeItem.value = filteredFlattenItems.value[currentIndex + increment].key;
+  }
+  centerActiveItem();
+}
+
+function moveNextItem() {
+  updateActiveItem(1);
+}
+
+function movePrevItem() {
+  updateActiveItem(-1);
+}
+
+function performAction() {
+  const item = filteredFlattenItems.value.find(item => item.key === activeItem.value);
+  if (item) {
+    executeAction(item.action);
+  }
+}
+function centerActiveItem() {
+  const element = document.getElementById(activeItem.value?.toString() || "");
+  if (element && scrollContent.value) {
+    element.scrollIntoView({ block: "nearest" });
+  }
+}
+
+onMounted(() => {
+  const keys = useMagicKeys();
+  const ActiveCMD = isWindows() ? keys["ctrl+k"] : keys["cmd+k"];
+  const Enter = keys.enter;
+
+  useSearchDialog().trigger(openDialog);
+
+  whenever(ActiveCMD, () => {
+    openDialog();
+  });
+
+  whenever(Enter, () => {
+    if (isDialogVisible.value) {
+      performAction();
+    }
+  });
+});
+</script>
+
+<template>
+  <NModal v-model:show="isDialogVisible" class="search-dialog">
+    <NCard
+      class="w-1/4"
+      content-style="padding: 0;"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="search-dialog-action-bar rounded-2xl" @keydown.up="movePrevItem()" @keydown.down="moveNextItem()">
+        <div class="search-input flex items-center gap-5 px-5 h-12">
+          <CAIcon :name="SearchIcon" :size="16" />
+          <input v-model="search" :placeholder="t('searchDialog.searchPlaceholder')" class="grow bg-transparent outline-none border-none">
+          <NText code>
+            ESC
+          </NText>
+          <CAIcon :name="CloseIcon" :size="20" class="cursor-pointer" @click="closeDialog()" />
+        </div>
+        <NDivider />
+        <NScrollbar ref="scrollContent" style="height: 400px">
+          <div class="content-wrap">
+            <div v-for="group of filteredGroups" :key="group.name" class="group">
+              <div class="group-title">
+                {{ group.name }}
+              </div>
+              <NEl class="group-list">
+                <NEl
+                  v-for="item of group.items"
+                  :id="item.key.toString()"
+                  :key="item.key"
+                  tag="button"
+                  class="item flex items-center bg-[var(--modal-color)] my-2"
+                  :class="{ active: item.key === activeItem }"
+                  @click="executeAction(item.action)"
+                >
+                  <NEl class="icon">
+                    <NAvatar v-if="item.iconImage" round :size="28" :src="item.iconImage" />
+                    <CAIcon v-if="item.iconName" :name="item.iconName" :size="18" />
+                  </NEl>
+                  <div class="title grow">
+                    <Highlighter
+                      highlight-class-name="highlight"
+                      :search-words="keywords"
+                      :auto-escape="true"
+                      :text-to-highlight="item.title"
+                    />
+                  </div>
+                  <div class="label">
+                    {{ item.label }}
+                  </div>
+                </NEl>
+              </NEl>
+            </div>
+            <div v-if="!filteredGroups.length" class="group-empty">
+              {{ t('searchDialog.noResultsFound', { search }) }}
+            </div>
+          </div>
+        </NScrollbar>
+        <NDivider />
+        <NEl class="flex items-center justify-center space-x-4 py-2 text-xs">
+          <div class="flex items-center space-x-1">
+            <NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
+              <CAIcon :name="ArrowEnterIcon" :size="12" />
+            </NEl>
+            <span class="opacity-70">{{ t('searchDialog.toSelectTooltip') }}</span>
+          </div>
+          <div class="flex items-center space-x-1">
+            <NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
+              <CAIcon :name="ArrowSortIcon" :size="12" />
+            </NEl>
+            <span class="opacity-70">{{ t('searchDialog.toNavigateTooltip') }}</span>
+          </div>
+        </NEl>
+      </div>
+    </NCard>
+  </NModal>
+</template>
+
+<style scoped>
+.search-dialog .search-dialog-action-bar .search-input .ca-text--code {
+  white-space: nowrap;
+}
+.search-dialog .search-dialog-action-bar .ca-divider {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.search-dialog .search-dialog-action-bar .content-wrap {
+  padding-bottom: 30px;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group-empty {
+  text-align: center;
+  padding: 30px 0 40px 0;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group {
+  padding: 0 10px;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-title {
+  opacity: 0.6;
+  margin-bottom: 5px;
+  padding: 20px 10px 5px;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item {
+  padding: 7px 10px;
+  gap: 10px;
+  cursor: pointer;
+  border-radius: 10px;
+  width: 100%;
+  text-align: left;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: var(--primary-color5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .title {
+  font-weight: bold;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .label {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item.active {
+  background-color: var(--primary-color-hover);
+}
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item:hover {
+  box-shadow: 0 0 0 1px var(--primary-color-hover) inset;
+}
+</style>
diff --git a/apps/admin/src/component/SearchDialog/src/types.ts b/apps/admin/src/component/SearchDialog/src/types.ts
new file mode 100644
index 0000000..77014ae
--- /dev/null
+++ b/apps/admin/src/component/SearchDialog/src/types.ts
@@ -0,0 +1,15 @@
+export interface SearchGroupItem {
+  iconName: string | null;
+  iconImage: string | null;
+  key: number | string;
+  title: string;
+  label: string;
+  tags?: string;
+  action: () => void;
+}
+
+export interface SearchGroup {
+  name: string;
+  items: SearchGroupItem[];
+}
+export type SearchGroups = SearchGroup[];
diff --git a/apps/admin/src/composables/useSearchDialog.ts b/apps/admin/src/composables/useSearchDialog.ts
new file mode 100644
index 0000000..8548148
--- /dev/null
+++ b/apps/admin/src/composables/useSearchDialog.ts
@@ -0,0 +1,16 @@
+import { ref } from "vue";
+import { isWindows } from "@celeris/utils";
+
+const listener = ref();
+export function useSearchDialog() {
+  const commandIcon = ref(isWindows() ? "CTRL" : "⌘");
+  return {
+    commandIcon,
+    trigger: (cb: () => void): void => {
+      listener.value = cb;
+    },
+    open: (): void => {
+      listener.value && listener.value();
+    },
+  };
+}
diff --git a/apps/admin/src/layouts/header/components/SearchAnyWhere.vue b/apps/admin/src/layouts/header/components/SearchAnyWhere.vue
new file mode 100644
index 0000000..2ce05b3
--- /dev/null
+++ b/apps/admin/src/layouts/header/components/SearchAnyWhere.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { NText } from "naive-ui";
+
+const { commandIcon, open } = useSearchDialog();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <NEl class="flex items-center rounded-2xl h-8 outline-none border-none search-btn" @click="open">
+    <CAIcon name="tabler:search" :size="16" />
+    <span>{{ t('searchDialog.searchPlaceholder') }}</span>
+    <NText code class="search-command">
+      <span :class="{ win: commandIcon === 'CTRL' }">{{ commandIcon }}</span>
+      K
+    </NText>
+  </NEl>
+</template>
+
+<style scoped>
+.search-btn {
+  background-color: var(--action-color);
+  gap: 10px;
+  cursor: pointer;
+  padding: 4px 5px 4px 10px;
+}
+.search-btn .search-command span {
+  line-height: 0;
+  position: relative;
+  top: 1px;
+  font-size: 16px;
+}
+.search-btn .search-command span.win {
+  font-size: inherit;
+  top: 0;
+}
+.search-btn  > .ca-icon {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}
+.search-btn > span {
+  opacity: 0.5;
+  padding-right: 2px;
+  font-size: 14px;
+  transition: opacity 0.3s;
+}
+.search-btn  > code {
+  background-color: var(--hover-color);
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding-right: 10px;
+}
+.search-btn:hover  > .ca-icon {
+  opacity: 0.9;
+}
+.search-btn:hover > span {
+  opacity: 0.9;
+}
+@media (max-width: 1000px) {
+  .search-btn {
+    padding-right: 10px;
+  }
+  .search-btn > span {
+    display: none;
+  }
+  .search-btn > .ca-text--code {
+    display: none;
+  }
+}
+</style>
diff --git a/apps/admin/src/layouts/header/index.vue b/apps/admin/src/layouts/header/index.vue
index 2411a15..95fae0e 100644
--- a/apps/admin/src/layouts/header/index.vue
+++ b/apps/admin/src/layouts/header/index.vue
@@ -5,6 +5,7 @@ import LocaleSwitcher from "~/layouts/header/components/LocaleSwitcher.vue";
 import UserInfoButton from "~/layouts/header/components/UserInfoButton.vue";
 import SettingButton from "~/layouts/setting/index.vue";
 import Breadcrumb from "~/layouts/header/components/Breadcrumb.vue";
+import SearchAnyWhere from "~/layouts/header/components/SearchAnyWhere.vue";
 
 defineOptions({
   name: "HeaderLayout",
@@ -13,24 +14,25 @@ defineOptions({
 
 <template>
   <div class="flex h-16 items-center">
-    <div class="hidden md:block px-4">
+    <div class="md:block px-4">
       <CollapseButton />
     </div>
     <div class="flex-grow-1">
       <Breadcrumb />
     </div>
     <div class="flex">
-      <div class="flex items-center justify-center">
-        <div class="px-2">
-          <FullScreenButton />
-        </div>
-        <div class="px-2">
-          <LocaleSwitcher />
+      <NSpace>
+        <SearchAnyWhere />
+        <div class="flex items-center justify-center">
+          <NSpace>
+            <FullScreenButton />
+
+            <LocaleSwitcher />
+
+            <SettingButton />
+          </NSpace>
         </div>
-      </div>
-    </div>
-    <div class="hidden md:block px-4">
-      <SettingButton />
+      </NSpace>
     </div>
     <div class="px-4">
       <UserInfoButton />
diff --git a/apps/admin/src/layouts/index.vue b/apps/admin/src/layouts/index.vue
index 4f7390b..64c3fa2 100644
--- a/apps/admin/src/layouts/index.vue
+++ b/apps/admin/src/layouts/index.vue
@@ -3,6 +3,7 @@ import Menu from "./menu/index.vue";
 import Footer from "./footer/index.vue";
 import Header from "./header/index.vue";
 import Content from "./content/index.vue";
+import SearchDialog from "~/component/SearchDialog/src/SearchDialog.vue";
 
 defineOptions({
   name: "Layout",
@@ -27,6 +28,7 @@ defineOptions({
         <Footer />
       </footer>
     </div>
+    <SearchDialog />
   </NEl>
 </template>
 
diff --git a/apps/admin/src/locales/en.json b/apps/admin/src/locales/en.json
index c003fa3..f94c02d 100644
--- a/apps/admin/src/locales/en.json
+++ b/apps/admin/src/locales/en.json
@@ -89,6 +89,17 @@
       "onPositiveClickMessage": "Logout successful"
     }
   },
+  "searchDialog": {
+    "searchPlaceholder": "Search",
+    "noResultsFound": "Sorry, no results found for { search }",
+    "toSelectTooltip": "to select",
+    "toNavigateTooltip": "to navigate",
+    "applications": "Applications",
+    "chatBot": "ChatBot",
+    "action": "Action",
+    "actions": "Actions",
+    "shortcut": "Shortcut"
+  },
   "page": {
     "login": {
       "title": "Login",
diff --git a/apps/admin/src/locales/zh.json b/apps/admin/src/locales/zh.json
index faad357..0472c45 100644
--- a/apps/admin/src/locales/zh.json
+++ b/apps/admin/src/locales/zh.json
@@ -89,6 +89,17 @@
       "onPositiveClickMessage": "退出登录成功"
     }
   },
+  "searchDialog": {
+    "searchPlaceholder": "搜索",
+    "noResultsFound": "抱歉，未找到符合 { search } 的结果",
+    "toSelectTooltip": "选择",
+    "toNavigateTooltip": "导航",
+    "applications": "应用程序",
+    "chatBot": "ChatBot",
+    "actions": "操作列表",
+    "action": "操作",
+    "shortcut": "快捷方式"
+  },
   "page": {
     "login": {
       "title": "登录",
diff --git a/apps/admin/src/store/modules/design/index.ts b/apps/admin/src/store/modules/design/index.ts
index 4526ed1..112f166 100644
--- a/apps/admin/src/store/modules/design/index.ts
+++ b/apps/admin/src/store/modules/design/index.ts
@@ -3,7 +3,7 @@ import { deepMerge } from "@celeris/utils";
 import { defineStore } from "pinia";
 import { APP_DESIGN_STORE_ID } from "@celeris/constants";
 import type { GlobalTheme, GlobalThemeOverrides } from "naive-ui";
-import { darkTheme } from "naive-ui";
+import { darkTheme, lightTheme } from "naive-ui";
 import { getNaiveUICustomTheme } from "./themeUtils";
 import { DEFAULT_THEME_SETTING } from "~/setting/themeSetting";
 
@@ -28,8 +28,8 @@ export const useDesignStore = defineStore({
       return state.themeSetting;
     },
     //   获取Naive UI 预设主题
-    getNaiveUIPresetTheme(): GlobalTheme | null {
-      return this.getDarkMode ? darkTheme : null;
+    getNaiveUIPresetTheme(): GlobalTheme {
+      return this.getDarkMode ? darkTheme : lightTheme;
     },
     // 获取Naive UI 自定义主题
     getNaiveUICustomTheme(state): GlobalThemeOverrides | null {
diff --git a/apps/admin/src/store/modules/design/themeUtils.ts b/apps/admin/src/store/modules/design/themeUtils.ts
index 2c18bc7..21c1514 100644
--- a/apps/admin/src/store/modules/design/themeUtils.ts
+++ b/apps/admin/src/store/modules/design/themeUtils.ts
@@ -117,12 +117,15 @@ function getTextColor(darkMode: boolean): string {
   return darkMode ? commonDark.textColor2 : commonLight.baseColor;
 }
 function getOtherTheme(_darkMode: boolean): GlobalThemeOverrides {
+  const naiveTheme = useThemeSetting().getNaiveUIPresetTheme.value;
   return {
     common: {
       borderRadius: "0.5rem",
+      borderRadiusSmall: "0.25rem",
       cubicBezierEaseInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
       cubicBezierEaseOut: "cubic-bezier(0.33, 1, 0.68, 1)",
       cubicBezierEaseIn: "cubic-bezier(0.32, 0, 0.67, 0)",
+      modalColor: naiveTheme?.common?.modalColor,
     },
     Card: {
       borderRadius: "1rem",
diff --git a/packages/web/styles/src/index.css b/packages/web/styles/src/index.css
index db423d4..cc82006 100644
--- a/packages/web/styles/src/index.css
+++ b/packages/web/styles/src/index.css
@@ -1,3 +1,5 @@
+@import "naive-override.css";
+@import "mark.css";
 @import "transition.css";
 
 html{
diff --git a/packages/web/styles/src/mark.css b/packages/web/styles/src/mark.css
new file mode 100644
index 0000000..8c25b43
--- /dev/null
+++ b/packages/web/styles/src/mark.css
@@ -0,0 +1,6 @@
+mark {
+  padding: 2px 0px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--primary-color);
+  color: var(--text-color-base);
+}
diff --git a/packages/web/styles/src/naive-override.css b/packages/web/styles/src/naive-override.css
new file mode 100644
index 0000000..b678ad9
--- /dev/null
+++ b/packages/web/styles/src/naive-override.css
@@ -0,0 +1,21 @@
+.ca-modal-mask {
+	backdrop-filter: blur(5px);
+}
+.ca-modal,
+.ca-card.ca-modal[role] {
+	background-color: rgba(var(--modal-color), 0.6);
+	backdrop-filter: blur(20px);
+	max-width: 90%;
+	margin: 10vh auto;
+}
+
+.ca-image-preview-overlay {
+	backdrop-filter: blur(5px);
+}
+
+.ca-slider {
+	box-sizing: content-box;
+}
+.ca-calendar * {
+	box-sizing: content-box;
+}
diff --git a/packages/web/utils/src/color/utils.ts b/packages/web/utils/src/color/utils.ts
index cab5235..47e7176 100644
--- a/packages/web/utils/src/color/utils.ts
+++ b/packages/web/utils/src/color/utils.ts
@@ -12,3 +12,8 @@ export function isBlackColor(color: string) {
 export function colorToRgb(color: string): RgbaColor {
   return colord(color).toRgb();
 }
+
+export function colorToRgbString(color: string) {
+  const rgba = colord(color).toRgb();
+  return [rgba.r, rgba.g, rgba.b].join(", ");
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05cbc33..b6fbbf7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,6 +149,9 @@ importers:
       vue:
         specifier: ^3.4.5
         version: 3.4.5(typescript@5.3.3)
+      vue-highlight-words:
+        specifier: ^3.0.1
+        version: 3.0.1(vue@3.4.5)
       vue-i18n:
         specifier: ^9.8.0
         version: 9.8.0(vue@3.4.5)
@@ -8059,6 +8062,10 @@ packages:
     hasBin: true
     dev: true
 
+  /highlight-words-core@1.2.2:
+    resolution: {integrity: sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==}
+    dev: false
+
   /highlight.js@11.8.0:
     resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
     engines: {node: '>=12.0.0'}
@@ -12794,6 +12801,15 @@ packages:
       vue: 3.4.5(typescript@5.3.3)
     dev: false
 
+  /vue-highlight-words@3.0.1(vue@3.4.5):
+    resolution: {integrity: sha512-t6L0+KRaMzX5RVubWl6Sog+Aa+U0kHsbUlDIrln1VfajR2SEg+zQYfXov8UmX3MLNOfd6cv7MCM6LclqNlW4ww==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      highlight-words-core: 1.2.2
+      vue: 3.4.5(typescript@5.3.3)
+    dev: false
+
   /vue-i18n@9.8.0(vue@3.4.5):
     resolution: {integrity: sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==}
     engines: {node: '>= 16'}