李金
7 months ago
12 changed files with 588 additions and 405 deletions
-
38src/components/glass/index.tsx
-
29src/components/glass/style.ts
-
2src/i18n.ts
-
26src/locales/lang/en-US.ts
-
31src/locales/lang/pages/system/menus/en-US.ts
-
8src/locales/lang/pages/system/menus/zh-CN.ts
-
19src/locales/lang/zh-CN.ts
-
21src/pages/system/menus/components/MenuTree.tsx
-
32src/pages/system/menus/index.tsx
-
39src/pages/system/menus/store.ts
-
9src/pages/system/menus/style.ts
-
3src/theme/themes/token.ts
@ -0,0 +1,38 @@ |
|||||
|
import { Flex } from 'antd' |
||||
|
import { useStyle } from './style.ts' |
||||
|
import React from 'react' |
||||
|
|
||||
|
export interface IClassProps { |
||||
|
enabled: boolean |
||||
|
className?: string |
||||
|
description?: JSX.Element | React.ReactNode |
||||
|
children?: JSX.Element | React.ReactNode |
||||
|
} |
||||
|
|
||||
|
const Glass = (props: IClassProps) => { |
||||
|
const { styles } = useStyle(props) |
||||
|
|
||||
|
if (!props.enabled) { |
||||
|
return props.children |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className={styles.container}> |
||||
|
<Flex justify={'center'} align={'center'} className={styles.description}> |
||||
|
{props.description} |
||||
|
</Flex> |
||||
|
<div className={styles.glass}/> |
||||
|
{props.children} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export const withGlass = (Component: React.Component | React.FC | JSX.Element | React.ReactNode) => (props) => { |
||||
|
return ( |
||||
|
<Glass enabled={props.enabled}> |
||||
|
<Component {...props} /> |
||||
|
</Glass> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default Glass |
@ -0,0 +1,29 @@ |
|||||
|
import { createStyles } from '@/theme' |
||||
|
|
||||
|
export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => { |
||||
|
const prefix = `${prefixCls}-${token?.proPrefix}-glass-wrap` |
||||
|
|
||||
|
const container = css`
|
||||
|
position: relative; |
||||
|
`
|
||||
|
|
||||
|
const glass = css`
|
||||
|
background-color: transparent; |
||||
|
backdrop-filter: blur(6px); |
||||
|
z-index: 100; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
`
|
||||
|
const description = css`
|
||||
|
position: absolute; |
||||
|
top: 20%; |
||||
|
width: 100%; |
||||
|
z-index: 101; |
||||
|
`
|
||||
|
return { |
||||
|
container: cx(prefix, props.className, container), |
||||
|
glass, |
||||
|
description, |
||||
|
} |
||||
|
}) |
@ -1,3 +1,32 @@ |
|||||
export default { |
export default { |
||||
|
|
||||
|
title: 'Menu', |
||||
|
setting: 'Configuration', |
||||
|
saveSuccess: 'Save successfully', |
||||
|
form: { |
||||
|
title: 'Menu name', |
||||
|
parent: 'Upper-level menu', |
||||
|
type: 'Type', |
||||
|
typeOptions: { |
||||
|
menu: 'Menu', |
||||
|
iframe: 'Iframe', |
||||
|
link: 'External link', |
||||
|
button: 'Button', |
||||
|
}, |
||||
|
name: 'Alias', |
||||
|
icon: 'Icon', |
||||
|
sort: 'Sorting', |
||||
|
path: 'Route', |
||||
|
component: 'View', |
||||
|
componentHelp: 'View path, relative to src/pages, menu groups can be left blank', |
||||
|
save: 'Save', |
||||
|
empty: 'Please select a row of data from the left for operation', |
||||
|
table: { |
||||
|
columns: { |
||||
|
name: 'Name', |
||||
|
code: 'Code', |
||||
|
option: 'Option', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
button: 'Buttons' |
||||
} |
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue