From 74e62cbc712bdd4d4826e5fe80f537d87e44ffce Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期一, 07 十二月 2020 22:38:44 +0800
Subject: [PATCH] feat: add useDesign
---
src/layouts/default/menu/index.tsx | 14 -
src/components/Menu/src/useOpenKeys.ts | 9
src/components/Markdown/index.ts | 6
.ls-lint.yml | 1
src/components/ClickOutSide/index.ts | 6
src/router/menus/index.ts | 7
src/design/var/index.less | 2
src/components/Form/index.ts | 6
src/components/CountTo/index.ts | 5
src/components/Modal/index.ts | 6
src/hooks/web/useDesign.ts | 19 ++
src/components/Upload/index.ts | 7
src/hooks/setting/useMenuSetting.ts | 11 -
src/components/Authority/index.ts | 6
src/components/Application/src/useAppContext.ts | 16 +
src/components/Menu/src/BasicMenu.tsx | 49 +----
src/components/Loading/index.ts | 5
src/layouts/default/header/LayoutHeader.tsx | 1
src/components/Description/index.ts | 7
src/components/StrengthMeter/index.tsx | 5
src/components/Page/index.ts | 5
src/components/Application/src/AppLocalePicker.vue | 4
src/components/Button/index.ts | 6
src/components/Menu/src/types.ts | 3
src/hooks/web/useLocale.ts | 1
src/components/Application/src/AppLogo.vue | 18 +
src/settings/colorSetting.ts | 2
src/components/Drawer/index.ts | 5
src/components/Application/index.ts | 12
src/components/Verify/index.ts | 9
src/hooks/core/useContext.ts | 61 +++++-
src/types/config.d.ts | 1
src/components/Tinymce/index.ts | 5
src/components/Container/index.ts | 12
src/layouts/default/sider/index.less | 1
src/components/VirtualScroll/index.ts | 5
src/components/Excel/index.ts | 9
src/components/Menu/src/BasicMenu.vue | 11 +
src/settings/projectSetting.ts | 2
src/router/constant.ts | 3
src/components/Menu/src/MenuContent.tsx | 25 --
src/layouts/default/setting/handler.ts | 3
src/components/Dropdown/index.ts | 5
/dev/null | 58 ------
src/components/util.ts | 14
src/layouts/default/setting/enum.ts | 1
src/components/Basic/index.ts | 12
src/components/Menu/index.ts | 5
src/App.vue | 8
src/components/Menu/src/props.ts | 11 -
src/components/Application/src/AppProvider.vue | 24 ++
51 files changed, 260 insertions(+), 269 deletions(-)
diff --git a/.ls-lint.yml b/.ls-lint.yml
index 3c3d990..d8bc94f 100644
--- a/.ls-lint.yml
+++ b/.ls-lint.yml
@@ -3,6 +3,7 @@
.js: kebab-case | PascalCase
.vue: PascalCase | regex:^index
.ts: camelCase | PascalCase
+ .tsx: camelCase | PascalCase
.d.ts: kebab-case
.mock.ts: kebab-case
.data.ts: camelCase | kebab-case
diff --git a/src/App.vue b/src/App.vue
index 3f1afeb..c54e55d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,9 @@
:locale="antConfigLocale"
:transform-cell-text="transformCellText"
>
- <router-view />
+ <AppProvider>
+ <router-view />
+ </AppProvider>
</ConfigProvider>
</template>
@@ -17,9 +19,11 @@
import { useLockPage } from '/@/hooks/web/useLockPage';
import { useLocale } from '/@/hooks/web/useLocale';
+ import { AppProvider } from '/@/components/Application';
+
export default defineComponent({
name: 'App',
- components: { ConfigProvider },
+ components: { ConfigProvider, AppProvider },
setup() {
// Initialize vuex internal system configuration
initAppConfigStore();
diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
index 252d1e8..f259990 100644
--- a/src/components/Application/index.ts
+++ b/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 };
diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
index 5ef9e78..3ea924f 100644
--- a/src/components/Application/src/AppLocalePicker.vue
+++ b/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;
}
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index 5763fe5..426cba0 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/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 {
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue
new file mode 100644
index 0000000..48edc9b
--- /dev/null
+++ b/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>
diff --git a/src/components/Application/src/useAppContext.ts b/src/components/Application/src/useAppContext.ts
new file mode 100644
index 0000000..58428d9
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/Authority/index.ts b/src/components/Authority/index.ts
index a67f631..2cad8e6 100644
--- a/src/components/Authority/index.ts
+++ b/src/components/Authority/index.ts
@@ -1,5 +1,7 @@
-import AuthorityLib from './src/index.vue';
+import Authority from './src/index.vue';
import { withInstall } from '../util';
-export const Authority = withInstall(AuthorityLib);
+withInstall(Authority);
+
+export { Authority };
diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts
index 4f1294c..5b88321 100644
--- a/src/components/Basic/index.ts
+++ b/src/components/Basic/index.ts
@@ -1,9 +1,9 @@
-import BasicArrowLib from './src/BasicArrow.vue';
-import BasicHelpLib from './src/BasicHelp.vue';
-import BasicTitleLib from './src/BasicTitle.vue';
+import BasicArrow from './src/BasicArrow.vue';
+import BasicHelp from './src/BasicHelp.vue';
+import BasicTitle from './src/BasicTitle.vue';
import { withInstall } from '../util';
-export const BasicArrow = withInstall(BasicArrowLib);
-export const BasicHelp = withInstall(BasicHelpLib);
-export const BasicTitle = withInstall(BasicTitleLib);
+withInstall(BasicArrow, BasicHelp, BasicTitle);
+
+export { BasicArrow, BasicHelp, BasicTitle };
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 3abdf33..57223d3 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,4 +1,6 @@
-import ButtonLib from './src/BasicButton.vue';
+import Button from './src/BasicButton.vue';
import { withInstall } from '../util';
-export const Button = withInstall(ButtonLib);
+withInstall(Button);
+
+export { Button };
diff --git a/src/components/ClickOutSide/index.ts b/src/components/ClickOutSide/index.ts
index 20e8d7b..682037c 100644
--- a/src/components/ClickOutSide/index.ts
+++ b/src/components/ClickOutSide/index.ts
@@ -1,4 +1,6 @@
-import ClickOutSideLib from './src/index.vue';
+import ClickOutSide from './src/index.vue';
import { withInstall } from '../util';
-export const ClickOutSide = withInstall(ClickOutSideLib);
+withInstall(ClickOutSide);
+
+export { ClickOutSide };
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
index 89fb077..eb4e8ff 100644
--- a/src/components/Container/index.ts
+++ b/src/components/Container/index.ts
@@ -1,10 +1,10 @@
-import ScrollContainerLib from './src/ScrollContainer.vue';
-import CollapseContainerLib from './src/collapse/CollapseContainer.vue';
-import LazyContainerLib from './src/LazyContainer.vue';
+import ScrollContainer from './src/ScrollContainer.vue';
+import CollapseContainer from './src/collapse/CollapseContainer.vue';
+import LazyContainer from './src/LazyContainer.vue';
import { withInstall } from '../util';
+
+withInstall(ScrollContainer, CollapseContainer, LazyContainer);
export * from './src/types';
-export const ScrollContainer = withInstall(ScrollContainerLib);
-export const CollapseContainer = withInstall(CollapseContainerLib);
-export const LazyContainer = withInstall(LazyContainerLib);
+export { ScrollContainer, CollapseContainer, LazyContainer };
diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts
index c41e9cc..ec705e1 100644
--- a/src/components/CountTo/index.ts
+++ b/src/components/CountTo/index.ts
@@ -1,6 +1,7 @@
// Transform vue-count-to to support vue3 version
-import CountToLib from './src/index.vue';
+import CountTo from './src/index.vue';
import { withInstall } from '../util';
-export const CountTo = withInstall(CountToLib);
+withInstall(CountTo);
+export { CountTo };
diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts
index ee9feb5..188e5b6 100644
--- a/src/components/Description/index.ts
+++ b/src/components/Description/index.ts
@@ -1,8 +1,9 @@
-import DescriptionLib from './src/index';
+import Description from './src/index';
import { withInstall } from '../util';
+withInstall(Description);
+
export * from './src/types';
export { useDescription } from './src/useDescription';
-
-export const Description = withInstall(DescriptionLib);
+export { Description };
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
index 4fa33a4..e05b056 100644
--- a/src/components/Drawer/index.ts
+++ b/src/components/Drawer/index.ts
@@ -1,6 +1,7 @@
-import BasicDrawerLib from './src/BasicDrawer';
+import BasicDrawer from './src/BasicDrawer';
import { withInstall } from '../util';
+withInstall(BasicDrawer);
export * from './src/types';
export { useDrawer, useDrawerInner } from './src/useDrawer';
-export const BasicDrawer = withInstall(BasicDrawerLib);
+export { BasicDrawer };
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 92b2970..8f193b3 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,6 +1,7 @@
-import DropdownLib from './src/Dropdown';
+import Dropdown from './src/Dropdown';
import { withInstall } from '../util';
+withInstall(Dropdown);
export * from './src/types';
-export const Dropdown = withInstall(DropdownLib);
+export { Dropdown };
diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts
index f2ddfd7..113066e 100644
--- a/src/components/Excel/index.ts
+++ b/src/components/Excel/index.ts
@@ -1,11 +1,12 @@
-import ImportExcelLib from './src/ImportExcel.vue';
-import ExportExcelModelLib from './src/ExportExcelModel.vue';
+import ImportExcel from './src/ImportExcel.vue';
+import ExportExcelModel from './src/ExportExcelModel.vue';
import { withInstall } from '../util';
+
+withInstall(ImportExcel, ExportExcelModel);
export * from './src/types';
export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
-export const ImportExcel = withInstall(ImportExcelLib);
-export const ExportExcelModel = withInstall(ExportExcelModelLib);
+export { ImportExcel, ExportExcelModel };
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index 1dc4f2b..fbbea27 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,5 +1,7 @@
-import BasicFormLib from './src/BasicForm.vue';
+import BasicForm from './src/BasicForm.vue';
import { withInstall } from '../util';
+
+withInstall(BasicForm);
export * from './src/types/form';
export * from './src/types/formItem';
@@ -7,4 +9,4 @@
export { useComponentRegister } from './src/hooks/useComponentRegister';
export { useForm } from './src/hooks/useForm';
-export const BasicForm = withInstall(BasicFormLib);
+export { BasicForm };
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
index f8e5845..91e62e0 100644
--- a/src/components/Loading/index.ts
+++ b/src/components/Loading/index.ts
@@ -1,8 +1,9 @@
import './src/indicator';
-import LoadingLib from './src/index.vue';
+import Loading from './src/index.vue';
import { withInstall } from '../util';
+withInstall(Loading);
export { useLoading } from './src/useLoading';
export { createLoading } from './src/createLoading';
-export const Loading = withInstall(LoadingLib);
+export { Loading };
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
index e18d7b0..bb061d4 100644
--- a/src/components/Markdown/index.ts
+++ b/src/components/Markdown/index.ts
@@ -1,7 +1,9 @@
-import MarkDownLib from './src/index.vue';
+import MarkDown from './src/index.vue';
import { withInstall } from '../util';
+withInstall(MarkDown);
+
export * from './src/types';
-export const MarkDown = withInstall(MarkDownLib);
+export { MarkDown };
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index ff3e1c2..97b884f 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1,4 +1,5 @@
-import BasicMenuLib from './src/BasicMenu';
+import BasicMenu from './src/BasicMenu';
import { withInstall } from '../util';
-export const BasicMenu = withInstall(BasicMenuLib);
+withInstall(BasicMenu);
+export { BasicMenu };
diff --git a/src/components/Menu/src/BasicMenu.tsx b/src/components/Menu/src/BasicMenu.tsx
index dd3283a..d262c27 100644
--- a/src/components/Menu/src/BasicMenu.tsx
+++ b/src/components/Menu/src/BasicMenu.tsx
@@ -15,7 +15,6 @@
ComputedRef,
} from 'vue';
import { Menu } from 'ant-design-vue';
-import SearchInput from './SearchInput.vue';
import MenuContent from './MenuContent';
// import { ScrollContainer } from '/@/components/Container';
@@ -24,8 +23,7 @@
import { appStore } from '/@/store/modules/app';
-import { useSearchInput } from './hooks/useSearchInput';
-import { useOpenKeys } from './hooks/useOpenKeys';
+import { useOpenKeys } from './useOpenKeys';
import { useRouter } from 'vue-router';
import { isFunction } from '/@/utils/is';
@@ -43,51 +41,39 @@
emits: ['menuClick'],
setup(props, { slots, emit }) {
const currentParentPath = ref('');
+
const menuState = reactive<MenuState>({
defaultSelectedKeys: [],
mode: props.mode,
theme: computed(() => props.theme) as ComputedRef<ThemeEnum>,
openKeys: [],
- searchValue: '',
selectedKeys: [],
collapsedOpenKeys: [],
});
const { getCollapsed } = useMenuSetting();
+
const { currentRoute } = useRouter();
- const { items, flatItems, isAppMenu, mode, accordion } = toRefs(props);
-
- const { handleInputChange, handleInputClick } = useSearchInput({
- flatMenusRef: flatItems,
- emit: emit,
- menuState,
- handleMenuChange,
- });
+ const { items, flatItems, mode, accordion } = toRefs(props);
const { handleOpenChange, resetKeys, setOpenKeys } = useOpenKeys(
menuState,
items,
flatItems,
- isAppMenu,
mode,
accordion
);
const getOpenKeys = computed(() => {
- if (props.isAppMenu) {
- return unref(getCollapsed) ? menuState.collapsedOpenKeys : menuState.openKeys;
- }
- return menuState.openKeys;
+ return unref(getCollapsed) ? menuState.collapsedOpenKeys : menuState.openKeys;
});
// menu澶栧眰鏍峰紡
const getMenuWrapStyle = computed((): any => {
- const { showLogo, search } = props;
+ const { showLogo } = props;
let offset = 0;
- if (search) {
- offset += 54;
- }
+
if (showLogo) {
offset += 46;
}
@@ -110,7 +96,7 @@
cls.push('basic-menu__sidebar-hor');
}
- if (!props.isHorizontal && props.isAppMenu && appStore.getProjectConfig.menuSetting.split) {
+ if (!props.isHorizontal && appStore.getProjectConfig.menuSetting.split) {
cls.push('basic-menu__second');
}
return cls;
@@ -197,7 +183,6 @@
level={index}
isHorizontal={props.isHorizontal}
showTitle={unref(showTitle)}
- searchValue={menuState.searchValue}
/>,
]}
</Menu.Item>
@@ -212,7 +197,6 @@
item={menu}
level={index}
isHorizontal={props.isHorizontal}
- searchValue={menuState.searchValue}
/>,
],
default: () => renderMenuItem(menu.children, index + 1),
@@ -227,11 +211,9 @@
const { selectedKeys, defaultSelectedKeys, mode, theme } = menuState;
const inlineCollapsedObj = isInline
- ? props.isAppMenu
- ? {
- inlineCollapsed: unref(getCollapsed),
- }
- : { inlineCollapsed: props.inlineCollapsed }
+ ? {
+ inlineCollapsed: unref(getCollapsed),
+ }
: {};
return (
<Menu
@@ -267,17 +249,8 @@
) : (
<section class={[`basic-menu-wrap`, !unref(showTitle) && 'hide-title']}>
{getSlot(slots, 'header')}
- <SearchInput
- class={!props.search ? 'hidden' : ''}
- theme={props.theme as ThemeEnum}
- onChange={handleInputChange}
- onClick={handleInputClick}
- collapsed={unref(getCollapsed)}
- />
- {/* <section style={unref(getMenuWrapStyle)}> */}
<section style={unref(getMenuWrapStyle)} class="basic-menu__content">
- {/* <ScrollContainer>{() => renderMenu()}</ScrollContainer> */}
{renderMenu()}
</section>
</section>
diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue
new file mode 100644
index 0000000..5af16fc
--- /dev/null
+++ b/src/components/Menu/src/BasicMenu.vue
@@ -0,0 +1,11 @@
+<template>
+ <div> </div>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+ export default defineComponent({
+ setup() {
+ return {};
+ },
+ });
+</script>
diff --git a/src/components/Menu/src/MenuContent.tsx b/src/components/Menu/src/MenuContent.tsx
index e5f9a2d..d46e7db 100644
--- a/src/components/Menu/src/MenuContent.tsx
+++ b/src/components/Menu/src/MenuContent.tsx
@@ -8,11 +8,6 @@
export default defineComponent({
name: 'MenuContent',
props: {
- searchValue: {
- type: String as PropType<string>,
- default: '',
- },
-
item: {
type: Object as PropType<MenuType>,
default: null,
@@ -35,11 +30,7 @@
setup(props) {
const { t } = useI18n();
- const getI18nName = computed(() => {
- const { name } = props.item;
-
- return t(name);
- });
+ const getI18nName = computed(() => t(props.item?.name));
/**
* @description: 娓叉煋鍥炬爣
*/
@@ -71,28 +62,18 @@
const { showTitle } = props;
const { icon } = props.item;
const name = unref(getI18nName);
- const searchValue = props.searchValue || '';
- const index = name.indexOf(searchValue);
- const beforeStr = name.substr(0, index);
- const afterStr = name.substr(index + searchValue.length);
const cls = showTitle ? ['show-title'] : ['basic-menu__name'];
return (
<>
{renderIcon(icon!)}
- {index > -1 && searchValue ? (
- <span class={cls}>
- {beforeStr}
- <span class={`basic-menu__keyword`}>{searchValue}</span>
- {afterStr}
- </span>
- ) : (
+ {
<span class={[cls]}>
{name}
{renderTag()}
</span>
- )}
+ }
</>
);
};
diff --git a/src/components/Menu/src/SearchInput.vue b/src/components/Menu/src/SearchInput.vue
deleted file mode 100644
index a402fcf..0000000
--- a/src/components/Menu/src/SearchInput.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
- <section class="menu-search-input" @Click="handleClick" :class="searchClass">
- <a-input-search
- :placeholder="t('component.menu.search')"
- class="menu-search-input__search"
- allowClear
- @change="handleChange"
- />
- </section>
-</template>
-<script lang="ts">
- import type { PropType } from 'vue';
- import { defineComponent, computed } from 'vue';
- import { ThemeEnum } from '/@/enums/appEnum';
- // hook
- import { useDebounce } from '/@/hooks/core/useDebounce';
- import { useI18n } from '/@/hooks/web/useI18n';
- //
- export default defineComponent({
- name: 'BasicMenuSearchInput',
- props: {
- // Whether to expand, used in the left menu
- collapsed: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
- theme: {
- type: String as PropType<ThemeEnum>,
- },
- },
- setup(props, { emit }) {
- const { t } = useI18n();
-
- const [debounceEmitChange] = useDebounce(emitChange, 200);
-
- function emitChange(value?: string): void {
- emit('change', value);
- }
-
- function handleChange(e: ChangeEvent): void {
- const { collapsed } = props;
- if (collapsed) return;
- debounceEmitChange(e.target.value);
- }
-
- function handleClick(): void {
- emit('click');
- }
-
- const searchClass = computed(() => {
- const cls: string[] = [];
- cls.push(props.theme ? `menu-search-input__search--${props.theme}` : '');
- cls.push(props.collapsed ? 'hide-search-icon' : '');
- return cls;
- });
-
- return { handleClick, searchClass, handleChange, t };
- },
- });
-</script>
-<style lang="less">
- @import (reference) '../../../design/index.less';
- // 杈撳叆妗嗚儗鏅鑹� 娣�
- @input-dark-bg-color: #516085;
-
- @icon-color: #c0c4cc;
-
- .menu-search-input {
- margin: 12px 8px;
-
- &.hide-search-icon {
- .ant-input,
- .ant-input-suffix {
- opacity: 0;
- transition: all 0.5s;
- }
- }
-
- &__search--dark {
- .ant-input-affix-wrapper,
- .ant-input {
- .set-bg();
- }
-
- .ant-input-search-icon,
- .ant-input-clear-icon {
- color: rgba(255, 255, 255, 0.4) !important;
- }
- }
-
- &__search--light {
- .ant-input-affix-wrapper,
- .ant-input {
- color: @text-color-base;
- background: #fff;
- outline: none;
- }
-
- .ant-input-search-icon {
- color: @icon-color;
- }
- }
- }
-
- .set-bg() {
- color: #fff;
- background: @sider-dark-lighten-1-bg-color;
- border: 0;
- outline: none;
- }
- .hide-outline() {
- border: none;
- outline: none;
- box-shadow: none;
- }
-</style>
diff --git a/src/components/Menu/src/hooks/useSearchInput.ts b/src/components/Menu/src/hooks/useSearchInput.ts
deleted file mode 100644
index 461130d..0000000
--- a/src/components/Menu/src/hooks/useSearchInput.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Menu as MenuType } from '/@/router/types';
-import type { MenuState } from '../types';
-import type { Ref } from 'vue';
-
-import { isString } from '/@/utils/is';
-import { unref } from 'vue';
-import { es6Unique } from '/@/utils';
-import { getAllParentPath } from '/@/router/helper/menuHelper';
-
-interface UseSearchInputOptions {
- menuState: MenuState;
- flatMenusRef: Ref<MenuType[]>;
- emit: EmitType;
- handleMenuChange: Fn;
-}
-export function useSearchInput({
- menuState,
- flatMenusRef,
- handleMenuChange,
- emit,
-}: UseSearchInputOptions) {
- /**
- * @description: 杈撳叆妗嗘悳绱�
- */
- function handleInputChange(value?: string): void {
- if (!isString(value)) {
- value = (value as any).target.value;
- }
- if (!value) {
- handleMenuChange && handleMenuChange();
- }
-
- menuState.searchValue = value || '';
- if (!value) {
- menuState.openKeys = [];
- return;
- }
-
- const flatMenus = unref(flatMenusRef);
- let openKeys: string[] = [];
- for (const menu of flatMenus) {
- const { name, path } = menu;
- if (!name.includes(value)) {
- continue;
- }
- openKeys = openKeys.concat(getAllParentPath(flatMenus, path));
- }
- openKeys = es6Unique(openKeys);
- menuState.openKeys = openKeys;
- }
-
- // 鎼滅储妗嗙偣鍑�
- function handleInputClick(e: any): void {
- emit('clickSearchInput', e);
- }
-
- return { handleInputChange, handleInputClick };
-}
diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts
index 4df3281..af488cd 100644
--- a/src/components/Menu/src/props.ts
+++ b/src/components/Menu/src/props.ts
@@ -20,11 +20,7 @@
type: Boolean as PropType<boolean>,
default: false,
},
- // 鏄惁鏄剧ず鎼滅储妗�
- search: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
+
// 鏈�濂芥槸4 鍊嶆暟
inlineIndent: {
type: Number as PropType<number>,
@@ -51,10 +47,7 @@
type: Boolean as PropType<boolean>,
default: false,
},
- isAppMenu: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
+
isHorizontal: {
type: Boolean as PropType<boolean>,
default: false,
diff --git a/src/components/Menu/src/types.ts b/src/components/Menu/src/types.ts
index 997120f..2415d39 100644
--- a/src/components/Menu/src/types.ts
+++ b/src/components/Menu/src/types.ts
@@ -17,9 +17,6 @@
// 灞曞紑鏁扮粍
openKeys: string[];
- // 鎼滅储鍊�
- searchValue: string;
-
// 褰撳墠閫変腑鐨勮彍鍗曢」 key 鏁扮粍
selectedKeys: string[];
diff --git a/src/components/Menu/src/hooks/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts
similarity index 91%
rename from src/components/Menu/src/hooks/useOpenKeys.ts
rename to src/components/Menu/src/useOpenKeys.ts
index cc78cc6..eaa28db 100644
--- a/src/components/Menu/src/hooks/useOpenKeys.ts
+++ b/src/components/Menu/src/useOpenKeys.ts
@@ -1,6 +1,6 @@
import { MenuModeEnum } from '/@/enums/menuEnum';
import type { Menu as MenuType } from '/@/router/types';
-import type { MenuState } from '../types';
+import type { MenuState } from './types';
import type { Ref } from 'vue';
import { unref } from 'vue';
@@ -12,14 +12,11 @@
menuState: MenuState,
menus: Ref<MenuType[]>,
flatMenusRef: Ref<MenuType[]>,
- isAppMenu: Ref<boolean>,
mode: Ref<MenuModeEnum>,
accordion: Ref<boolean>
) {
const { getCollapsed } = useMenuSetting();
- /**
- * @description:璁剧疆灞曞紑
- */
+
function setOpenKeys(menu: MenuType) {
const flatMenus = unref(flatMenusRef);
if (!unref(accordion)) {
@@ -50,7 +47,7 @@
rootSubMenuKeys.push(path);
}
}
- if (!unref(getCollapsed) || !unref(isAppMenu)) {
+ if (!unref(getCollapsed)) {
const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
menuState.openKeys = openKeys;
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index aecdf90..10b26ef 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,8 +1,10 @@
import './src/index.less';
-import BasicModalLib from './src/BasicModal';
+import BasicModal from './src/BasicModal';
import { withInstall } from '../util';
+
+withInstall(BasicModal);
export { useModalContext } from './src/useModalContext';
export { useModal, useModalInner } from './src/useModal';
export * from './src/types';
-export const BasicModal = withInstall(BasicModalLib);
+export { BasicModal };
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index 3a3a1e0..c46b7ee 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -1,4 +1,5 @@
-import PageFooterLib from './src/PageFooter.vue';
+import PageFooter from './src/PageFooter.vue';
import { withInstall } from '../util';
-export const PageFooter = withInstall(PageFooterLib);
+withInstall(PageFooter);
+export { PageFooter };
diff --git a/src/components/StrengthMeter/index.tsx b/src/components/StrengthMeter/index.tsx
index 93703be..80f7a33 100644
--- a/src/components/StrengthMeter/index.tsx
+++ b/src/components/StrengthMeter/index.tsx
@@ -1,4 +1,5 @@
-import StrengthMeterLib from './src/index';
+import StrengthMeter from './src/index';
import { withInstall } from '../util';
-export const StrengthMeter = withInstall(StrengthMeterLib);
+withInstall(StrengthMeter);
+export { StrengthMeter };
diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts
index 110cc60..3dd4e2b 100644
--- a/src/components/Tinymce/index.ts
+++ b/src/components/Tinymce/index.ts
@@ -1,4 +1,5 @@
-import TinymceLib from './src/Editor.vue';
+import Tinymce from './src/Editor.vue';
import { withInstall } from '../util';
-export const Tinymce = withInstall(TinymceLib);
+withInstall(Tinymce);
+export { Tinymce };
diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts
index 24feb31..8d7d804 100644
--- a/src/components/Upload/index.ts
+++ b/src/components/Upload/index.ts
@@ -1,8 +1,5 @@
-import type { App } from 'vue';
import BasicUpload from './src/BasicUpload.vue';
+import { withInstall } from '../util';
-export default (app: App): void => {
- app.component(BasicUpload.name, BasicUpload);
-};
-
+withInstall(BasicUpload);
export { BasicUpload };
diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts
index 8a46c57..cc7008c 100644
--- a/src/components/Verify/index.ts
+++ b/src/components/Verify/index.ts
@@ -1,8 +1,9 @@
-import BasicDragVerifyLib from './src/DragVerify';
-import RotateDragVerifyLib from './src/ImgRotate';
+import BasicDragVerify from './src/DragVerify';
+import RotateDragVerify from './src/ImgRotate';
import { withInstall } from '../util';
+
+withInstall(BasicDragVerify, RotateDragVerify);
export * from './src/types';
-export const RotateDragVerify = withInstall(RotateDragVerifyLib);
-export const BasicDragVerify = withInstall(BasicDragVerifyLib);
+export { BasicDragVerify, RotateDragVerify };
diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts
index 0ab61fd..a712e2b 100644
--- a/src/components/VirtualScroll/index.ts
+++ b/src/components/VirtualScroll/index.ts
@@ -1,4 +1,5 @@
-import VirtualScrollLib from './src/index';
+import VirtualScroll from './src/index';
import { withInstall } from '../util';
-export const VirtualScroll = withInstall(VirtualScrollLib);
+withInstall(VirtualScroll);
+export { VirtualScroll };
diff --git a/src/components/util.ts b/src/components/util.ts
index 1cd5aeb..c1d7a3c 100644
--- a/src/components/util.ts
+++ b/src/components/util.ts
@@ -1,12 +1,12 @@
-import type { VNodeChild, Plugin } from 'vue';
+import type { VNodeChild } from 'vue';
import type { App } from 'vue';
-export function withInstall<T>(component: T) {
- const comp = component as any;
- comp.install = (app: App) => {
- app.component(comp.displayName || comp.name, comp);
- };
- return comp as T & Plugin;
+export function withInstall(...components: any[]) {
+ components.forEach((comp) => {
+ comp.install = (app: App) => {
+ app.component(comp.displayName || comp.name, comp);
+ };
+ });
}
export function convertToUnit(
diff --git a/src/design/var/index.less b/src/design/var/index.less
index 20d21b9..0f656ee 100644
--- a/src/design/var/index.less
+++ b/src/design/var/index.less
@@ -2,6 +2,8 @@
@import 'easing';
@import 'breakpoint';
+@namespace: vben;
+
// tabs
@multiple-height: 30px;
diff --git a/src/hooks/core/useContext.ts b/src/hooks/core/useContext.ts
index 6edfba9..d2d8ce6 100644
--- a/src/hooks/core/useContext.ts
+++ b/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;
};
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index f66ef8a..4b18a86 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -39,8 +39,6 @@
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);
@@ -61,13 +59,6 @@
}
return unref(getTrigger) === TriggerEnum.HEADER;
- });
-
- const getShowSearch = computed(() => {
- return (
- unref(getMenuSetting).showSearch &&
- !(unref(getMenuType) === MenuTypeEnum.MIX && unref(getMenuMode) === MenuModeEnum.HORIZONTAL)
- );
});
const getIsHorizontal = computed(() => {
@@ -119,9 +110,7 @@
getMenuTheme,
getCanDrag,
getIsHorizontal,
- getShowSearch,
getCollapsedShowTitle,
- getCollapsedShowSearch,
getIsSidebarType,
getAccordion,
getShowTopMenu,
diff --git a/src/hooks/web/useDesign.ts b/src/hooks/web/useDesign.ts
new file mode 100644
index 0000000..c013124
--- /dev/null
+++ b/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,
+ };
+}
diff --git a/src/hooks/web/useLocale.ts b/src/hooks/web/useLocale.ts
index 29d2376..ceba9ad 100644
--- a/src/hooks/web/useLocale.ts
+++ b/src/hooks/web/useLocale.ts
@@ -27,7 +27,6 @@
setLocalSetting({ lang });
// i18n.global.setLocaleMessage(locale, messages);
- antConfigLocaleRef.value = { a: 1 };
switch (lang) {
// Simplified Chinese
case 'zh_CN':
diff --git a/src/layouts/default/header/LayoutHeader.tsx b/src/layouts/default/header/LayoutHeader.tsx
index 8586392..2a5c4c3 100644
--- a/src/layouts/default/header/LayoutHeader.tsx
+++ b/src/layouts/default/header/LayoutHeader.tsx
@@ -188,7 +188,6 @@
theme={unref(getHeaderTheme)}
splitType={unref(getSplitType)}
menuMode={unref(getMenuMode)}
- showSearch={false}
/>
</div>
)}
diff --git a/src/layouts/default/menu/index.tsx b/src/layouts/default/menu/index.tsx
index dd0612f..17e2793 100644
--- a/src/layouts/default/menu/index.tsx
+++ b/src/layouts/default/menu/index.tsx
@@ -27,9 +27,6 @@
default: MenuSplitTyeEnum.NONE,
},
- // Whether to show search box
- showSearch: propTypes.bool.def(true),
-
isHorizontal: propTypes.bool,
// menu Mode
menuMode: {
@@ -42,11 +39,9 @@
const {
setMenuSetting,
- getShowSearch,
getMenuMode,
getMenuType,
getCollapsedShowTitle,
- getCollapsedShowSearch,
getIsSidebarType,
getMenuTheme,
getCollapsed,
@@ -64,14 +59,6 @@
const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
const appendClass = computed(() => props.splitType === MenuSplitTyeEnum.TOP);
-
- const showSearch = computed(() => {
- return (
- unref(getShowSearch) &&
- props.showSearch &&
- (unref(getCollapsedShowSearch) ? true : !unref(getCollapsed))
- );
- });
/**
* click menu
@@ -122,7 +109,6 @@
collapsedShowTitle={unref(getCollapsedShowTitle)}
theme={unref(getComputedMenuTheme)}
showLogo={unref(showLogo)}
- search={unref(showSearch)}
items={unref(menusRef)}
flatItems={unref(flatMenusRef)}
accordion={unref(getAccordion)}
diff --git a/src/layouts/default/setting/enum.ts b/src/layouts/default/setting/enum.ts
index 4159e8c..87f52da 100644
--- a/src/layouts/default/setting/enum.ts
+++ b/src/layouts/default/setting/enum.ts
@@ -21,7 +21,6 @@
MENU_SHOW_SIDEBAR,
MENU_THEME,
MENU_SPLIT,
- MENU_SHOW_SEARCH,
MENU_FIXED,
// header
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
index 637ef2b..877b05a 100644
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -63,9 +63,6 @@
case HandlerEnum.MENU_FIXED:
return { menuSetting: { fixed: value } };
- case HandlerEnum.MENU_SHOW_SEARCH:
- return { menuSetting: { showSearch: value } };
-
// ============transition==================
case HandlerEnum.OPEN_PAGE_LOADING:
appStore.commitPageLoadingState(false);
diff --git a/src/layouts/default/sider/index.less b/src/layouts/default/sider/index.less
index 9ad26e2..6912c0e 100644
--- a/src/layouts/default/sider/index.less
+++ b/src/layouts/default/sider/index.less
@@ -15,7 +15,6 @@
}
&:not(.ant-layout-sider-dark) {
- // border-right: 1px solid @border-color-light;
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}
diff --git a/src/router/constant.ts b/src/router/constant.ts
index b22260a..11c45c0 100644
--- a/src/router/constant.ts
+++ b/src/router/constant.ts
@@ -25,7 +25,6 @@
export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
path: '/:path(.*)*',
name: 'ErrorPage',
- redirect: '/error/404',
component: LAYOUT,
meta: {
title: 'ErrorPage',
@@ -33,7 +32,7 @@
},
children: [
{
- path: '/error/404',
+ path: '/:path(.*)*',
name: 'ErrorPage',
component: EXCEPTION_COMPONENT,
meta: {
diff --git a/src/router/menus/index.ts b/src/router/menus/index.ts
index a305b0d..295bc40 100644
--- a/src/router/menus/index.ts
+++ b/src/router/menus/index.ts
@@ -21,6 +21,9 @@
// ===========================
// ==========Helper===========
// ===========================
+const isBackMode = () => {
+ return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+};
const staticMenus: Menu[] = [];
(() => {
@@ -32,10 +35,6 @@
staticMenus.push(transformMenuModule(menu));
}
})();
-
-const isBackMode = () => {
- return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
-};
async function getAsyncMenus() {
// 鍓嶇瑙掕壊鎺у埗鑿滃崟 鐩存帴鍙栬彍鍗曟枃浠�
diff --git a/src/settings/colorSetting.ts b/src/settings/colorSetting.ts
index d2a92d8..1f573e3 100644
--- a/src/settings/colorSetting.ts
+++ b/src/settings/colorSetting.ts
@@ -17,9 +17,11 @@
export const SIDE_BAR_BG_COLOR_LIST: string[] = [
'#273352',
'#ffffff',
+ '#191b24',
'#191a23',
'#001529',
'#304156',
+ '#001628',
'#28333E',
'#344058',
];
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 65c5c2d..0eea034 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -89,8 +89,6 @@
show: true,
// Whether to show dom
hidden: true,
- // Whether to show search box
- showSearch: true,
// Menu width
menuWidth: 210,
// Menu mode
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index da6e098..99e2080 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -9,7 +9,6 @@
collapsed: boolean;
collapsedShowTitle: boolean;
canDrag: boolean;
- showSearch: boolean;
show: boolean;
hidden: boolean;
split: boolean;
--
Gitblit v1.8.0