fix(Modal): 修复关闭按钮与内容重叠问题&圆角阴影等样式调整 (DevCloudFE#540)

* fix(Modal): 修复关闭按钮与内容重叠问题&圆角阴影等样式调整

Author: xingyan95

packages/devui-theme/src/theme/theme-data.ts

@@ -37,8 +37,8 @@ export const devuiLightTheme: Theme = new Theme({
  'devui-info': '#5e7ce0',
  'devui-initial': '#e9edfa',
  'devui-unavailable': '#f5f5f6',
- 'devui-shadow': 'rgba(0, 0, 0, 0.2)',
- 'devui-light-shadow': 'rgba(0, 0, 0, 0.1)',
+ 'devui-shadow': 'rgba(37, 43, 58, 0.2)',
+ 'devui-light-shadow': 'rgba(37, 43, 58, 0.1)',
  // 图标
  'devui-icon-text': '#252b3a',
  'devui-icon-bg': '#ffffff',
@@ -140,17 +140,19 @@ export const devuiLightTheme: Theme = new Theme({
 
  // Menu
  'devui-menu-item': '#252b3a',
- 'devui-menu-item-sub':'#6C6C6C',
+ 'devui-menu-item-sub': '#6C6C6C',
  'devui-menu-item-hover': '#0f0f0f',
- 'devui-menu-disabled': '#919191'
+ 'devui-menu-disabled': '#919191',
  },
  isDark: false,
 });
 export const devuiGreenTheme: Theme = new Theme({
  id: 'devui-green-theme',
  name: 'Green - Light Mode',
  cnName: '绿色主题',
- data: { ...devuiLightTheme.data, 'devui-global-bg': '#f3f8f7',
+ data: {
+ ...devuiLightTheme.data,
+ 'devui-global-bg': '#f3f8f7',
  'devui-brand': '#3DCCA6',
  'devui-brand-foil': '#7fdac1',
  'devui-brand-hover': '#6DDEBB',
@@ -188,7 +190,8 @@ export const devuiGreenTheme: Theme = new Theme({
  'devui-default-bg': '#f3f8f7',
  'devui-primary-disabled': '#c5f0e5',
  'devui-icon-fill-active-disabled': '#c5f0e5',
- 'devui-range-item-hover-bg': '#d8f9ea',},
+ 'devui-range-item-hover-bg': '#d8f9ea',
+ },
  extends: 'devui-light-theme',
  isDark: false,
 });
@@ -290,9 +293,9 @@ export const devuiDarkTheme: Theme = new Theme({
 
  // Menu
  'devui-menu-item': '#dcdcdc',
- 'devui-menu-item-sub':'#c6c6c6',
+ 'devui-menu-item-sub': '#c6c6c6',
  'devui-menu-item-hover': '#fff',
- 'devui-menu-disabled': '#919191'
+ 'devui-menu-disabled': '#919191',
  },
  extends: 'devui-light-theme',
  isDark: true,
@@ -301,7 +304,9 @@ export const devuiGreenDarkTheme: Theme = new Theme({
  id: 'devui-green-dark-theme',
  name: 'Green - Dark Mode',
  cnName: '绿色深色主题',
- data: { ...devuiDarkTheme.data, 'devui-brand': '#3DCCA6',
+ data: {
+ ...devuiDarkTheme.data,
+ 'devui-brand': '#3DCCA6',
  'devui-brand-foil': '#395e54',
  'devui-brand-hover': '#4c9780',
  'devui-brand-active': '#07c693',
@@ -330,7 +335,8 @@ export const devuiGreenDarkTheme: Theme = new Theme({
  'devui-default-line': '#3DCCA6',
  'devui-default-bg': '#383838',
  'devui-primary-disabled': '#28544B',
- 'devui-icon-fill-active-disabled': '#28544B',},
+ 'devui-icon-fill-active-disabled': '#28544B',
+ },
  extends: 'devui-dark-theme',
  isDark: true,
 });

packages/devui-vue/devui/modal/src/modal.scss

@@ -9,12 +9,17 @@
 .devui-modal {
  position: relative;
  width: 300px;
- background-color: $devui-global-bg-normal;
+ border-radius: $devui-border-radius;
+ border: none;
+ background-color: $devui-fullscreen-overlay-bg;
+ background-clip: padding-box;
+ outline: 0;
+ box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
 
  .btn-close {
  position: absolute;
- right: 20px;
- top: 20px;
+ right: 16px;
+ top: 16px;
  width: 20px;
  height: 20px;
  line-height: 20px;

packages/devui-vue/devui/style/theme/_color.scss

@@ -37,8 +37,8 @@ $devui-success-active-focus: var(--devui-success, #50d4ab);
 $devui-info: var(--devui-info, #5e7ce0); // 通知、一般提示、执行中
 $devui-initial: var(--devui-initial, #e9edfa); // 初始化、未执行
 $devui-unavailable: var(--devui-unavailable, #f5f5f6); // 不可用、禁用状态
-$devui-shadow: var(--devui-shadow, rgba(0, 0, 0, 0.2)); // 阴影色
-$devui-light-shadow: var(--devui-light-shadow, rgba(0, 0, 0, 0.1)); // 弱化阴影色
+$devui-shadow: var(--devui-shadow, rgba(#252b3a, 0.2)); // 阴影色
+$devui-light-shadow: var(--devui-light-shadow, rgba(#252b3a, 0.1)); // 弱化阴影色
 
 // 图标
 $devui-icon-text: var(--devui-icon-text, #252b3a); // 文字图标颜色，同 正文颜色

packages/devui-vue/docs/.vitepress/devui-theme/components/PageContributorConfig.ts

@@ -174,6 +174,10 @@ export const CONTRIBUTORS_MAP: IContributingMap = {
  avatar: 'https://avatars.githubusercontent.com/u/13329558?v=4',
  homepage: 'https://github.com/Zcating'
  },
+ {
+ avatar: 'https://avatars.githubusercontent.com/u/11143986?v=4',
+ homepage: 'https://github.com/xingyan95'
+ },
  ],
  notification: [
  {