feat: add useDesign

src/components/Application/index.ts

@@ -1,6 +1,10 @@
-import AppLocalePickerLib from './src/AppLocalePicker.vue';
-import AppLogoLib from './src/AppLogo.vue';
+import AppLocalePicker from './src/AppLocalePicker.vue';
+import AppLogo from './src/AppLogo.vue';
+import AppProvider from './src/AppProvider.vue';
 import { withInstall } from '../util';
 
-export const AppLocalePicker = withInstall(AppLocalePickerLib);
-export const AppLogo = withInstall(AppLogoLib);
+withInstall(AppLocalePicker, AppLogo, AppProvider);
+
+export { useAppProviderContext } from './src/useAppContext';
+
+export { AppLocalePicker, AppLogo, AppProvider };

src/components/Application/src/AppLocalePicker.vue

@@ -69,8 +69,8 @@
   });
 </script>
 
-<style lang="less">
-  .app-locale-picker-overlay {
+<style lang="less" scoped>
+  :global(.app-locale-picker-overlay) {
     .ant-dropdown-menu-item {
       min-width: 160px;
     }

src/components/Application/src/AppLogo.vue

@@ -4,12 +4,14 @@
 -->
 <template>
   <div
-    class="app-logo anticon"
-    :class="{ theme, 'collapsed-show-title': getCollapsedShowTitle }"
+    class="anticon"
+    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
     @click="handleGoHome"
   >
     <img src="/@/assets/images/logo.png" />
-    <div class="app-logo__title ml-2 ellipsis" v-show="showTitle">{{ globSetting.title }}</div>
+    <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
+      {{ globSetting.title }}
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -23,6 +25,8 @@
 
   import { propTypes } from '/@/utils/propTypes';
 
+  import { useDesign } from '/@/hooks/web/useDesign';
+
   export default defineComponent({
     name: 'AppLogo',
     props: {
@@ -34,6 +38,8 @@
       showTitle: propTypes.bool.def(true),
     },
     setup() {
+      const { prefixCls } = useDesign('app-logo');
+
       const { getCollapsedShowTitle } = useMenuSetting();
 
       const globSetting = useGlobSetting();
@@ -48,17 +54,19 @@
         handleGoHome,
         globSetting,
         getCollapsedShowTitle,
+        prefixCls,
       };
     },
   });
 </script>
 <style lang="less" scoped>
   @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-app-logo';
 
-  .app-logo {
+  .@{prefix-cls} {
     display: flex;
     align-items: center;
-    padding-left: 10px;
+    padding-left: 12px;
     cursor: pointer;
 
     &.collapsed-show-title {

src/components/Application/src/AppProvider.vue

@@ -0,0 +1,24 @@
+<template>
+  <slot />
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, toRefs } from 'vue';
+
+  import { createAppProviderContext } from './useAppContext';
+  export default defineComponent({
+    name: 'AppProvider',
+    inheritAttrs: false,
+    props: {
+      prefixCls: {
+        type: String as PropType<string>,
+        default: 'vben',
+      },
+    },
+    setup(props) {
+      const { prefixCls } = toRefs(props);
+      createAppProviderContext({ prefixCls });
+      return {};
+    },
+  });
+</script>

src/components/Application/src/useAppContext.ts

@@ -0,0 +1,16 @@
+import { InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface AppProviderContextProps {
+  prefixCls: Ref<string>;
+}
+
+const key: InjectionKey<AppProviderContextProps> = Symbol();
+
+export function createAppProviderContext(context: AppProviderContextProps) {
+  return createContext<AppProviderContextProps>(context, key);
+}
+
+export function useAppProviderContext() {
+  return useContext<AppProviderContextProps>(key);
+}