Merge branch 'DevCloudFE:dev' into dev

Whbbit1999 · Aug 23, 2023 · 02bbcc3 · 02bbcc3
2 parents ddadbb0 + f0b5361
commit 02bbcc3
Show file tree

Hide file tree

Showing 210 changed files with 3,712 additions and 916 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -109,14 +109,12 @@ module.exports = {
     'max-depth': 'off',
     '@typescript-eslint/member-ordering': 'off',
     'array-callback-return': 'off',
+    'import/no-unresolved': 'off',
   },
-  "overrides": [
+  overrides: [
     {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
-      "parser": "@typescript-eslint/parser"
-    }
-  ]
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+    },
+  ],
 };
diff --git a/packages/devui-theme/scripts/release.js b/packages/devui-theme/scripts/release.js
@@ -27,8 +27,10 @@ async function copyStylesVar() {
 const extendThemePath = path.resolve(__dirname, '../src/theme-collection/extend-theme.scss');
 const extendThemeVuePath = path.resolve(__dirname, '../src/theme-collection/extend-theme-vue.scss');
 async function copyExtendTheme() {
-  await shelljs.cp('-R', extendThemePath, outputDir);
-  await shelljs.cp('-R', extendThemeVuePath, outputDir);
+  const extendThemeDir = path.resolve(__dirname, '../build/theme-collection');
+  await shelljs.mkdir(extendThemeDir);
+  await shelljs.cp('-R', extendThemePath, extendThemeDir);
+  await shelljs.cp('-R', extendThemeVuePath, extendThemeDir);
 }
 
 const typingsPath = path.resolve(__dirname, '../typings');

diff --git a/packages/devui-theme/src/styles-var/devui-var.scss b/packages/devui-theme/src/styles-var/devui-var.scss
@@ -1,9 +1,9 @@
-@import './private/basic';
+@import './private/animation';
 @import './private/color';
-@import './private/shadow';
 @import './private/corner';
-@import './private/font-size';
-@import './private/animation';
+@import './private/font';
+@import './private/shadow';
 @import './private/z-index';
+@import './private/size';
 
 $devui-prefix: devui;
diff --git a/packages/devui-theme/src/styles-var/private/_animation.scss b/packages/devui-theme/src/styles-var/private/_animation.scss
@@ -1,4 +1,6 @@
-$devui-animation-ease-in-smooth: var(--devui-animation-ease-in-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
+// Animation 动效
+
+$devui-animation-ease-in-smooth: var(--devui-animation-ease-in-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));// 命名与实际曲线不符，待废弃
 
 $devui-animation-duration-slow: var(--devui-animation-duration-slow, 300ms);
 $devui-animation-duration-base: var(--devui-animation-duration-base, 200ms);

diff --git a/packages/devui-theme/src/styles-var/private/_basic.scss b/packages/devui-theme/src/styles-var/private/_basic.scss
@@ -1,7 +1,7 @@
-// Color
+// 基础色值
+
 // 取色规则1： 所有使用颜色均需要在色板中选择
 // 取色规则2： 除标签等用于功能分类及black,white的取色可以增加透明度(eg: rgba($devui-white-5,0.3)，其余场景均不允许
-// need to run `node scripts/themeable/transfer-sass-var-to-theme-data.js ` when modified
 
 $devui-blue-5: #f2f5fc;
 $devui-blue-10: #e9edfa;
@@ -114,9 +114,9 @@ $devui-purple-100: #2a0c85;
 $devui-gray-5: #f5f5f5;
 $devui-gray-10: #ebebeb;
 $devui-gray-20: #e0e0e0;
-$devui-gray-30: #d1d1d1;
+$devui-gray-30:  #d1d1d1;
 $devui-gray-40: #bdbdbd;
-$devui-gray-50: #a1a1a1;
+$devui-gray-50: #8a8a8a;
 $devui-gray-60: #878787;
 $devui-gray-70: #707070;
 $devui-gray-80: #5c5c5c;
@@ -132,10 +132,10 @@ $devui-slate-50: #babbc0;
 $devui-slate-60: #9b9fa8;
 $devui-slate-70: #71757f;
 $devui-slate-80: #575d6c;
-$devui-slate-90: #383e4d;
+$devui-slate-90: #323745;
 $devui-slate-100: #252b3a;
 
-$devui-zinc-5: #f7f7f9;
+$devui-zinc-5: #f8f8fa;
 $devui-zinc-10: #f2f2f3;
 $devui-zinc-20: #e2e2e6;
 $devui-zinc-30: #d5d5db;

diff --git a/packages/devui-theme/src/styles-var/private/_color.scss b/packages/devui-theme/src/styles-var/private/_color.scss
@@ -106,6 +106,7 @@ $devui-primary-active: var(--devui-primary-active, $devui-blue-90); // 主要按
 
 $devui-contrast-hover: var(--devui-contrast-hover, #d64a52); // 突出按钮悬停
 $devui-contrast-active: var(--devui-contrast-active, #b12220); // 突出按钮激活
+$devui-contrast-disabled: var(--devui-contrast-disabled, #ffbcba); // 突出按钮禁用
 
 // 状态
 $devui-danger-line: var(--devui-danger-line, $devui-red-50); // 失败边框

diff --git a/packages/devui-theme/src/styles-var/private/_corner.scss b/packages/devui-theme/src/styles-var/private/_corner.scss
@@ -1,6 +1,6 @@
-//圆角变量
+// Border Radius 圆角
 
 $devui-border-radius: var(--devui-border-radius, 2px); //一般圆角
 $devui-border-radius-feedback: var(--devui-border-radius-feedback, 4px); //反馈类圆角
-$devui-border-radius-card: var(--devui-border-radius-card, 6px); //卡片圆角
-$devui-border-radius-full: var(--devui-border-radius-full, 100px);
+$devui-border-radius-card: var(--devui-border-radius-card, 8px); //卡片,弹窗圆角
+$devui-border-radius-full: var(--devui-border-radius-full, 100px); //暂不对外开放，用于开关，进度条等组件的圆角自适应宽高
diff --git a/packages/devui-theme/src/styles-var/private/_font.scss b/packages/devui-theme/src/styles-var/private/_font.scss
@@ -0,0 +1,24 @@
+// 字号大小变量
+
+$devui-font-size: var(--devui-font-size, 12px); //正文、卡片副标题
+$devui-font-size-card-title: var(--devui-font-size-card-title, 14px); //卡片标题
+$devui-font-size-page-title: var(--devui-font-size-page-title, 16px); //页面标题
+$devui-font-size-message: var(--devui-font-size-page-title, 16px); //页面标题
+$devui-font-size-modal-title: var(--devui-font-size-modal-title, 18px); //弹窗标题、数字
+$devui-font-size-price: var(--devui-font-size-price, 20px); //购买价格
+$devui-font-size-data-overview: var(--devui-font-size-data-overview, 24px); //数据总览
+
+$devui-font-size-h1-title: var(--devui-font-size-h1-title, 28px);
+$devui-font-size-h2-title: var(--devui-font-size-h2-title, 24px);
+$devui-font-size-h3-title: var(--devui-font-size-h3-title, 20px);
+$devui-font-size-h4-title: var(--devui-font-size-h4-title, 18px);
+$devui-font-size-h5-title: var(--devui-font-size-h5-title, 16px);
+
+$devui-font-size-icon: var(--devui-font-size-icon, 16px); //图标大小
+$devui-font-size-sm: var(--devui-font-size-sm, 12px); //当组件size为'sm'时使用此字号大小
+$devui-font-size-md: var(--devui-font-size-md, 12px); //当组件size为''时使用此字号大小
+$devui-font-size-lg: var(--devui-font-size-lg, 14px); //当组件size为'lg'时使用此字号大小
+
+$devui-font-title-weight: var(--devui-font-title-weight, bold); //标题文字粗细
+$devui-font-content-weight: var(--devui-font-content-weight, normal); //内容文字粗细
+$devui-line-height-base: var(--devui-line-height-base, 1.5); //规范行高
diff --git a/packages/devui-theme/src/styles-var/private/_size.scss b/packages/devui-theme/src/styles-var/private/_size.scss
@@ -0,0 +1,4 @@
+// 组件的size
+$devui-size-sm: 24px;
+$devui-size-md: 32px;
+$devui-size-lg: 40px;
diff --git a/packages/devui-theme/src/styles-var/private/_z-index.scss b/packages/devui-theme/src/styles-var/private/_z-index.scss
@@ -1,12 +1,10 @@
-// 临时层
-// 若存在遮罩，则遮罩基于对应z-index值-1
+// zIndex 层级
+
 $devui-z-index-full-page-overlay: var(--devui-z-index-full-page-overlay, 1080); // 全屏覆盖类元素
 $devui-z-index-pop-up: var(--devui-z-index-pop-up, 1060); // 提示类信息，popover，tooltip等
 $devui-z-index-dropdown: var(--devui-z-index-dropdown, 1052); // 下拉菜单，dropdown等, 兼容, 取值待重新定义
-$devui-z-index-modal: var(--devui-z-index-modal, 1050); // 弹窗,
-$devui-z-index-drawer: var(--devui-z-index-drawer, 1040); // 抽屉板
-$devui-z-index-framework: var(--devui-z-index-framework, 1000); // 框架类元素，header,sideMenu等
-
-// 内容层，根据需要设置，zIndex需小于临时层
-
-// 背景层，根据需要设置，zIndex需小于内容层
+$devui-z-index-modal: var(--devui-z-index-modal, 1050);// 弹窗,
+$devui-z-index-message: var(--devui-z-index-modal, 1079);// 全局消息,
+$devui-z-index-drawer: var(--devui-z-index-drawer, 1040);// 抽屉板
+$devui-z-index-framework: var(--devui-z-index-framework, 1000);// 框架类元素，header,sideMenu等
+$devui-z-index-function-widget: var(--devui-z-index-function-widget, 999); // 功能控件类（在一个组件中处于最上层）
diff --git a/packages/devui-vue/devui-cli/commands/build.js b/packages/devui-vue/devui-cli/commands/build.js
@@ -18,6 +18,13 @@ const baseConfig = defineConfig({
   configFile: false,
   publicDir: false,
   plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: [
+      { find: '@devui/theme', replacement: path.resolve(__dirname, '../../../devui-theme/src') },
+      { find: '@devui/shared/components', replacement: path.resolve(__dirname, '../../devui') },
+      { find: '@devui', replacement: path.resolve(__dirname, '../../devui') },
+    ]
+  }
 });
 
 const rollupOptions = {

diff --git a/packages/devui-vue/devui/accordion/src/accordion.scss b/packages/devui-vue/devui/accordion/src/accordion.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-accordion__menu {
   ol,

diff --git a/packages/devui-vue/devui/action-timeline/src/action-timeline.scss b/packages/devui-vue/devui/action-timeline/src/action-timeline.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .dp-action-timeline {
   background-color: $devui-base-bg;

diff --git a/packages/devui-vue/devui/alert/__tests__/alert.spec.ts b/packages/devui-vue/devui/alert/__tests__/alert.spec.ts
@@ -1,12 +1,13 @@
 import { mount } from '@vue/test-utils';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { h } from 'vue';
 import Alert from '../src/alert';
 
 const ns = useNamespace('alert', true);
+const close = useNamespace('close', true);
 
 const baseClass = ns.b();
-const closeClass = ns.e('close-icon');
+const closeClass = close.b();
 const iconClass = ns.e('icon');
 const successIconClass = ns.em('icon', 'success');
 const warningIconClass = ns.em('icon', 'warning');

diff --git a/packages/devui-vue/devui/alert/src/alert.scss b/packages/devui-vue/devui/alert/src/alert.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-alert {
   color: $devui-text;
@@ -18,7 +18,6 @@
   }
 
   .#{$devui-prefix}-alert__content {
-    display: flex;
     padding: 0 16px 0 4px;
     word-break: normal;
     word-wrap: break-word;
@@ -46,7 +45,6 @@
 
   &.#{$devui-prefix}-alert--success {
     background-color: $devui-success-bg;
-    border-color: $devui-success-line;
     color: $devui-text;
 
     .#{$devui-prefix}-alert__close-icon {
@@ -58,7 +56,6 @@
 
   &.#{$devui-prefix}-alert--info {
     background-color: $devui-info-bg;
-    border-color: $devui-info-line;
     color: $devui-text;
 
     .#{$devui-prefix}-alert__close-icon {
@@ -70,7 +67,6 @@
 
   &.#{$devui-prefix}-alert--warning {
     background-color: $devui-warning-bg;
-    border-color: $devui-warning-line;
     color: $devui-text;
 
     .#{$devui-prefix}-alert__close-icon {
@@ -82,7 +78,6 @@
 
   &.#{$devui-prefix}-alert--danger {
     background-color: $devui-danger-bg;
-    border-color: $devui-danger-line;
     color: $devui-text;
 
     .#{$devui-prefix}-alert__close-icon {
@@ -93,7 +88,6 @@
   }
 
   &.#{$devui-prefix}-alert--simple {
-    border-color: $devui-line;
     color: $devui-text;
 
     .#{$devui-prefix}-alert__close-icon {
@@ -167,7 +161,7 @@
   margin-right: 4px;
 }
 
-.#{$devui-prefix}-alter--close {
+.#{$devui-prefix}-alert--close {
   margin: 0;
   padding-top: 0;
   padding-bottom: 0;

diff --git a/packages/devui-vue/devui/alert/src/alert.tsx b/packages/devui-vue/devui/alert/src/alert.tsx
@@ -2,7 +2,7 @@ import { defineComponent, ref, Transition, onMounted } from 'vue';
 import AlertCloseIcon from './components/alert-close-icon';
 import AlertTypeIcon from './components/alert-type-icon';
 import { alertProps } from './alert-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './alert.scss';
 
 export default defineComponent({
@@ -47,14 +47,12 @@ export default defineComponent({
                 <AlertTypeIcon type={props.type} />
               </span>
             ) : null}
-            <div class={ns.e('content')}>
-              <span>{ctx.slots.default?.()}</span>
-              {props.closeable ? (
-                <div class={ns.e('close-icon')} onClick={close}>
-                  <AlertCloseIcon />
-                </div>
-              ) : null}
-            </div>
+            <div class={ns.e('content')}>{ctx.slots.default?.()} </div>
+            {props.closeable ? (
+              <div class={ns.e('close-icon')} onClick={close}>
+                <AlertCloseIcon />
+              </div>
+            ) : null}
           </div>
         </Transition>
       ) : null;

diff --git a/packages/devui-vue/devui/alert/src/components/alert-type-icon.tsx b/packages/devui-vue/devui/alert/src/components/alert-type-icon.tsx
@@ -1,5 +1,5 @@
 import type { AlertType } from '../alert-types';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const ns = useNamespace('alert');
 const AlertTypeIcon = (props: { type: AlertType }): JSX.Element => (

diff --git a/packages/devui-vue/devui/anchor/src/anchor.scss b/packages/devui-vue/devui/anchor/src/anchor.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .mysidebar {
   width: 240px;

diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-auto-complete,
 .#{$devui-prefix}-auto-complete__menu {

diff --git a/packages/devui-vue/devui/avatar/src/avatar.scss b/packages/devui-vue/devui/avatar/src/avatar.scss
@@ -1,10 +1,10 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-avatar {
   display: inline-block;
 }
 
-.#{$devui-prefix}-avatar__style {
+.#{$devui-prefix}-avatar--style {
   display: inline-block;
   text-align: center;
   color: $devui-light-text;

diff --git a/packages/devui-vue/devui/avatar/src/avatar.tsx b/packages/devui-vue/devui/avatar/src/avatar.tsx
@@ -2,13 +2,14 @@ import { defineComponent, watch, toRefs, ref, computed } from 'vue';
 import AvatarBodyIcon from './components/avatar-body-icon';
 import AvatarNoBodyIcon from './components/avatar-nobody-icon';
 import { AvatarProps, avatarProps } from './avatar-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './avatar.scss';
 
 export default defineComponent({
   name: 'DAvatar',
   props: avatarProps,
-  setup(props: AvatarProps) {
+  emits: ['loadError'],
+  setup(props: AvatarProps, ctx) {
     const { name, width, height, customText, gender, imgSrc, isRound } = toRefs(props);
     const isNobody = ref<boolean>(true);
     const isErrorImg = ref<boolean>(false);
@@ -17,7 +18,7 @@ export default defineComponent({
     const nameDisplay = ref<string>();
 
     const ns = useNamespace('avatar');
-    const styleNS = ns.e('style');
+    const styleNS = ns.m('style');
     const bgNS = computed(() => {
       return ns.m(`${'background-' + code.value}`);
     });
@@ -29,7 +30,7 @@ export default defineComponent({
         } else if (gender.value.toLowerCase() === 'female') {
           code.value = 0;
         } else {
-          console.warn('gender must be "Male" or "Female"');
+          throw new Error('gender must be "Male" or "Female"');
         }
         return;
       }
@@ -71,8 +72,9 @@ export default defineComponent({
       getBackgroundColor(nameValue.substr(0, 1));
     };
 
-    const showErrorAvatar = (): void => {
+    const showErrorAvatar = (e: Event): void => {
       isErrorImg.value = true;
+      ctx.emit('loadError', e);
     };
 
     const calcValues = (nameInput: string): void => {
@@ -113,7 +115,7 @@ export default defineComponent({
 
       const nameElement = (
         <span
-          class={[styleNS, bgNS.value]}
+          class={`${styleNS} ${bgNS.value}`}
           style={{
             height: `${height.value}px`,
             width: `${width.value}px`,
@@ -142,7 +144,7 @@ export default defineComponent({
           <AvatarNoBodyIcon width={width.value} height={height.value} />
         </span>
       );
-      const noBody = (!imgSrc.value && isNobody.value) || isErrorImg.value ? noBodyElement : null;
+      const noBody = (!imgSrc.value && isNobody.value) || (imgSrc.value && isErrorImg.value) ? noBodyElement : null;
       return (
         <span class={ns.b()}>
           {hasImgSrc}

diff --git a/packages/devui-vue/devui/back-top/src/back-top.scss b/packages/devui-vue/devui/back-top/src/back-top.scss
@@ -1,4 +1,4 @@
-@import '../../styles-var/devui-var.scss';
+@import '@devui/theme/styles-var/devui-var.scss';
 
 .#{$devui-prefix}-back-top {
   position: fixed;