chore: update deps

src/components/Application/src/AppLocalePicker.vue

@@ -9,11 +9,11 @@
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
     @menuEvent="handleMenuEvent"
-    :overlayClassName="`${prefixCls}-overlay`"
+    overlayClassName="app-locale-picker-overlay"
   >
-    <span :class="prefixCls">
+    <span class="cursor-pointer flex items-center">
       <Icon icon="ion:language" />
-      <span v-if="showText" :class="`${prefixCls}__text`">{{ getLangText }}</span>
+      <span v-if="showText" class="ml-1">{{ getLangText }}</span>
     </span>
   </Dropdown>
 </template>
@@ -27,7 +27,6 @@
 
   import { useLocale } from '/@/locales/useLocale';
   import { localeList } from '/@/settings/localeSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
@@ -42,8 +41,6 @@
     setup(props) {
       const selectedKeys = ref<string[]>([]);
 
-      const { prefixCls } = useDesign('app-locale-picker');
-
       const { changeLocale, getLocale } = useLocale();
 
       const getLangText = computed(() => {
@@ -67,27 +64,15 @@
         toggleLocale(menu.event as string);
       }
 
-      return { localeList, handleMenuEvent, selectedKeys, getLangText, prefixCls };
+      return { localeList, handleMenuEvent, selectedKeys, getLangText };
     },
   });
 </script>
 
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-app-locale-picker';
-
-  :global(.@{prefix-cls}-overlay) {
+  :global(.app-locale-picker-overlay) {
     .ant-dropdown-menu-item {
       min-width: 160px;
     }
   }
-
-  .@{prefix-cls} {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &__text {
-      margin-left: 6px;
-    }
-  }
 </style>

src/components/Application/src/AppLogo.vue

@@ -48,9 +48,7 @@
     setup() {
       const { prefixCls } = useDesign('app-logo');
       const { getCollapsedShowTitle } = useMenuSetting();
-
       const { title } = useGlobSetting();
-
       const go = useGo();
 
       function handleGoHome(): void {

src/components/Application/src/AppProvider.vue

@@ -1,20 +1,17 @@
 <script lang="ts">
-  import type { PropType } from 'vue';
   import { defineComponent, toRefs, ref } from 'vue';
 
   import { createAppProviderContext } from './useAppContext';
 
   import designSetting from '/@/settings/designSetting';
   import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'AppProvider',
     inheritAttrs: false,
     props: {
-      prefixCls: {
-        type: String as PropType<string>,
-        default: designSetting.prefixCls,
-      },
+      prefixCls: propTypes.string.def(designSetting.prefixCls),
     },
     setup(props, { slots }) {
       const isMobileRef = ref(false);
@@ -28,6 +25,7 @@
 
       const { prefixCls } = toRefs(props);
       createAppProviderContext({ prefixCls, isMobile: isMobileRef });
+
       return () => slots.default?.();
     },
   });

src/components/Application/src/search/AppSearch.vue

@@ -1,10 +1,10 @@
 <script lang="tsx">
   import { defineComponent, ref, unref } from 'vue';
+
   import { Tooltip } from 'ant-design-vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchModal from './AppSearchModal.vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -13,41 +13,29 @@
     components: { AppSearchModal, Tooltip },
     setup() {
       const showModal = ref(false);
-      const { prefixCls } = useDesign('app-search');
       const { getShowSearch } = useHeaderSetting();
       const { t } = useI18n();
 
-      function handleSearch() {
-        showModal.value = true;
-      }
-
-      function handleClose() {
-        showModal.value = false;
+      function changeModal(show: boolean) {
+        showModal.value = show;
       }
 
       return () => {
-        if (!getShowSearch.value) {
+        if (!unref(getShowSearch)) {
           return null;
         }
         return (
-          <div class={prefixCls} onClick={handleSearch}>
+          <div class="p-1" onClick={changeModal.bind(null, true)}>
             <Tooltip>
               {{
                 title: () => t('common.searchText'),
                 default: () => <SearchOutlined />,
               }}
             </Tooltip>
-            <AppSearchModal onClose={handleClose} visible={unref(showModal)} />
+            <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
           </div>
         );
       };
     },
   });
 </script>
-<style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-app-search';
-
-  .@{prefix-cls} {
-    padding: 2px;
-  }
-</style>

src/components/Application/src/search/AppSearchFooter.vue

@@ -1,20 +1,13 @@
 <template>
   <div :class="`${prefixCls}`">
-    <span :class="`${prefixCls}__item`">
-      <Icon icon="ant-design:enter-outlined" />
-    </span>
+    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
     <span>{{ t('component.app.toSearch') }}</span>
 
-    <span :class="`${prefixCls}__item`">
-      <Icon icon="bi:arrow-up" />
-    </span>
-    <span :class="`${prefixCls}__item`">
-      <Icon icon="bi:arrow-down" />
-    </span>
+    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
+    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
     <span>{{ t('component.app.toNavigate') }}</span>
-    <span :class="`${prefixCls}__item`">
-      <Icon icon="mdi:keyboard-esc" />
-    </span>
+    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
+
     <span>{{ t('common.closeText') }}</span>
   </div>
 </template>
@@ -22,12 +15,13 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import Icon from '/@/components/Icon';
+  import AppSearchKeyItem from './AppSearchKeyItem.vue';
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   export default defineComponent({
     name: 'AppSearchFooter',
-    components: { Icon },
+    components: { Icon, AppSearchKeyItem },
     setup() {
       const { prefixCls } = useDesign('app-search-footer');
       const { t } = useI18n();

src/components/Application/src/search/AppSearchKeyItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <span :class="$attrs.class">
+    <Icon :icon="icon" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import Icon from '/@/components/Icon';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    components: { Icon },
+    props: {
+      icon: propTypes.string,
+    },
+  });
+</script>

src/components/Application/src/search/AppSearchModal.vue

@@ -11,6 +11,7 @@
               @change="handleSearch"
             >
               <template #prefix>
+                <!-- <Icon icon="ion:search"/> -->
                 <SearchOutlined />
               </template>
             </a-input>
@@ -22,6 +23,7 @@
           <div :class="`${prefixCls}-not-data`" v-show="getIsNotData">
             {{ t('component.app.searchNotData') }}
           </div>
+
           <ul :class="`${prefixCls}-list`" v-show="!getIsNotData" ref="scrollWrap">
             <li
               :ref="setRefs(index)"
@@ -56,6 +58,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref, ref } from 'vue';
+
   import { SearchOutlined } from '@ant-design/icons-vue';
   import { Input } from 'ant-design-vue';
   import AppSearchFooter from './AppSearchFooter.vue';
@@ -69,15 +72,16 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useAppInject } from '/@/hooks/web/useAppInject';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppSearchModal',
     components: { Icon, SearchOutlined, AppSearchFooter, [Input.name]: Input },
     directives: {
       clickOutside,
     },
-
     props: {
-      visible: Boolean,
+      visible: propTypes.bool,
     },
     emits: ['close'],
     setup(_, { emit }) {
@@ -143,10 +147,8 @@
     width: 100%;
     height: 100%;
     padding-top: 50px;
-    // background: #656c85cc;
     background: rgba(0, 0, 0, 0.25);
     justify-content: center;
-    // backdrop-filter: blur(2px);
 
     &--mobile {
       padding: 0;