feat: add useDesign

src/hooks/core/useContext.ts

@@ -1,21 +1,54 @@
-import { InjectionKey, provide, inject, reactive, readonly } from 'vue';
+import {
+  InjectionKey,
+  provide,
+  inject,
+  reactive,
+  readonly as defineReadonly,
+  defineComponent,
+  UnwrapRef,
+} from 'vue';
 
-export const createContext = <T>(
-  context: any,
-  contextInjectKey: InjectionKey<T> = Symbol(),
-  _readonly = true
-) => {
-  const state = reactive({ ...context });
+export interface CreateContextOptions {
+  readonly?: boolean;
+  createProvider?: boolean;
+}
 
-  const provideData = _readonly ? readonly(state) : state;
-  provide(contextInjectKey, provideData);
+type ShallowUnwrap<T> = {
+  [P in keyof T]: UnwrapRef<T[P]>;
 };
 
+export function createContext<T>(
+  context: any,
+  key: InjectionKey<T> = Symbol(),
+  options: CreateContextOptions = {}
+) {
+  const { readonly = true, createProvider = false } = options;
+
+  const state = reactive(context);
+
+  const provideData = readonly ? defineReadonly(state) : state;
+  !createProvider && provide(key, provideData);
+
+  const Provider = createProvider
+    ? defineComponent({
+        name: 'Provider',
+        inheritAttrs: false,
+        setup(_, { slots }) {
+          provide(key, provideData);
+          return () => slots.default?.();
+        },
+      })
+    : null;
+
+  return { Provider, state };
+}
+
 export const useContext = <T>(
-  contextInjectKey: InjectionKey<T> = Symbol(),
+  key: InjectionKey<T> = Symbol(),
   defaultValue?: any,
-  _readonly = true
-): T => {
-  const state = inject(contextInjectKey, defaultValue || {});
-  return _readonly ? readonly(state) : state;
+  readonly = false
+): ShallowUnwrap<T> => {
+  const state = inject(key, defaultValue || {});
+
+  return readonly ? defineReadonly(state) : state;
 };

src/hooks/setting/useMenuSetting.ts

@@ -39,8 +39,6 @@ export function useMenuSetting() {
 
   const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
 
-  const getCollapsedShowSearch = computed(() => unref(getMenuSetting).collapsedShowSearch);
-
   const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
 
   const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
@@ -63,13 +61,6 @@ export function useMenuSetting() {
     return unref(getTrigger) === TriggerEnum.HEADER;
   });
 
-  const getShowSearch = computed(() => {
-    return (
-      unref(getMenuSetting).showSearch &&
-      !(unref(getMenuType) === MenuTypeEnum.MIX && unref(getMenuMode) === MenuModeEnum.HORIZONTAL)
-    );
-  });
-
   const getIsHorizontal = computed(() => {
     return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
   });
@@ -119,9 +110,7 @@ export function useMenuSetting() {
     getMenuTheme,
     getCanDrag,
     getIsHorizontal,
-    getShowSearch,
     getCollapsedShowTitle,
-    getCollapsedShowSearch,
     getIsSidebarType,
     getAccordion,
     getShowTopMenu,

src/hooks/web/useDesign.ts

@@ -0,0 +1,19 @@
+import { useAppProviderContext } from '/@/components/Application';
+import { computed } from 'vue';
+// import { useCssModule, reactive } from 'vue';
+export function useDesign(scope: string) {
+  const values = useAppProviderContext();
+  // const style = cssModule ? useCssModule() : {};
+
+  // if (cssModule) {
+  //   Object.keys(style).forEach((key) => {
+  //     const moduleCls = style[key];
+  //     style[key] = `${cls}-${moduleCls}`;
+  //   });
+  // }
+  return {
+    prefixCls: computed(() => `${values.prefixCls}-${scope}`),
+    prefixVar: values.prefixCls,
+    // style,
+  };
+}

src/hooks/web/useLocale.ts

@@ -27,7 +27,6 @@ export function useLocale() {
     setLocalSetting({ lang });
     // i18n.global.setLocaleMessage(locale, messages);
 
-    antConfigLocaleRef.value = { a: 1 };
     switch (lang) {
       // Simplified Chinese
       case 'zh_CN':