vdesign-ui 0.1.18 → 0.1.20

package/dist/components/activityviews/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <transition name="vd-fade">
-            <div class="vd-overlay" v-if="overlay && visible" @click="handleMaskClick"></div>
+        <transition name="vd-activityviews-fade">
+            <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
         </transition>
-        <transition name="vd-slide-up">
+        <transition name="vd-activityviews-slide-up">
             <div class="vd-activityviews" v-if="visible">
                 <div class="vd-activityviews__header" v-if="withHeader">
                     <div class="vd-activityviews__wrapper">
@@ -21,17 +21,17 @@
                 <div v-if="withBar" class="vd-activityviews__bar"></div>
                 <div :class="['vd-activityviews__body', { 'vd-activityviews__body--action': actionSheet }]">
                     <div v-if="actionSheet" class="vd-activityviews__action">
-                        <p v-if="title" class="vd-activityviews__action-title">{{ title }}</p>
+                        <p v-if="title" class="vd-activityviews__action-title vd-hairline--bottom">{{ title }}</p>
                         <div class="vd-activityviews__actions">
-                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"
-                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
+                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"         :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
+                                :disabled="item.disabled" @click.stop="onSelect(item)" >{{ item.name }}</vd-button>
                         </div>
                         <div v-if="cancelText" class="vd-activityviews__gap"></div>
                         <div v-if="cancelText" class="vd-activityviews__cancel" @click="onCancel">
                             <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
                         </div>
                     </div>
-                    <slot></slot>
+                    <slot v-else></slot>
                 </div>
             </div>
         </transition>
@@ -104,7 +104,7 @@ export default {
                 this.$emit('select', item);
             }
         },
-        handleMaskClick() {
+        handleOverlayClick() {
             if (this.closeOnOverlay) {
                 this.closeActivity();
             }
@@ -119,21 +119,22 @@ export default {
 <style lang="less">
 @import './style.less';
 
-.vd-fade-enter-active,
-.vd-fade-leave-active {
+.vd-activityviews-fade-enter-active,
+.vd-activityviews-fade-leave-active {
   transition: opacity 0.3s;
 }
-.vd-fade-enter,
-.vd-fade-leave-to {
+.vd-activityviews-fade-enter,
+.vd-activityviews-fade-leave-to {
   opacity: 0;
 }
 
-.vd-slide-up-enter-active,
-.vd-slide-up-leave-active {
+.vd-activityviews-slide-up-enter-active,
+.vd-activityviews-slide-up-leave-active {
   transition: transform 0.3s;
 }
-.vd-slide-up-enter,
-.vd-slide-up-leave-to {
+.vd-activityviews-slide-up-enter,
+.vd-activityviews-slide-up-leave-to {
   transform: translateY(100%);
 }
+
 </style>

package/dist/components/activityviews/style.less

@@ -112,6 +112,8 @@
         .vd-btn{
             border-radius: 0;
             background-color: var(--color-activityviews-bg);
+            height: calc(var(--height-activityviews-actionsheet) * 1px);
+
         }
     }
 
@@ -131,20 +133,6 @@
             background-color: var(--color-activityviews-bg);
             height: calc(var(--height-activityviews-actionsheet) * 1px);
             border-radius: 0;
-
-            &::before{
-                position: absolute;
-                box-sizing: border-box;
-                content: ' ';
-                pointer-events: none;
-                top: -50%;
-                right: -50%;
-                bottom: -50%;
-                left: -50%;
-                border: 0 solid var(--divider-color-default-1);
-                transform: scale(0.5);
-                border-top-width: 1px;
-            }
         }
     }
 }

package/dist/components/dialog/index.vue

@@ -1,57 +1,63 @@
 <template>
-    <div class="vd-dialog-wrap" v-if="visible">
-        <div class="vd-overlay" v-if="visible && overlay" @click="close()"></div>
-        <div class="vd-dialog" :class="className ? `vd-dialog--${className}` : ''">
-            <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
-                <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
-                    <slot name="imgs"></slot>
-                </div>
-                <div class="vd-dialog__title">{{ title }}</div>
-            </header>
-            <div class="vd-dialog__content">
-                <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
-                    v-if="message || $slots.content">
-                    <slot name="content">{{
-                        message
-                        }}</slot>
+    <div class="vd-dialog-wrap">
+        <div class="vd-overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
+        @click="handleOverlayClick()"></div>
+        <transition name="vd-dialog-fade">
+            <div class="vd-dialog"  v-if="visible" :class="className ? `vd-dialog--${className}` : ''" :style="{width : width, zIndex: overlayZIndex + 1}">
+                <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
+                    <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
+                        <slot name="imgs"></slot>
+                    </div>
+                    <div class="vd-dialog__title">{{ title }}</div>
+                </header>
+                <div class="vd-dialog__content">
+                    <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
+                        v-if="message || $slots.content">
+                        <slot name="content">{{
+                            message
+                            }}</slot>
+                    </div>
                 </div>
+                <footer class="vd-dialog__footer">
+                    <div class="vd-dialog__btns" v-if="btns">
+                        <vd-button type="tertiary_grey" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                        <vd-button type="large" @click="confirm">{{ confirmButtonText || $t("alert.confirm") }} </vd-button>
+                    </div>
+                    <div class="vd-dialog__btn" v-if="btn">
+                        <vd-button type="large" @click="confirm" block>{{ confirmButtonText || $t("alert.confirm")
+                            }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="btnsText">
+                        <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel")
+                            }}</vd-button>
+                        <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btn--text-block" v-if="btnTextBlock">
+                        <vd-button type="primary_text" size="large" block @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns-block" v-if="btnsBlock">
+                        <vd-button type="primary" block size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                        <vd-button type="primary_text" block size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="$slots['extra-btn']">
+                        <slot name="extra-btn"></slot>
+                    </div>
+                </footer>
             </div>
-            <footer class="vd-dialog__footer">
-                <div class="vd-dialog__btns" v-if="btns">
-                    <vd-button type="tertiary_grey" size="large" @click="cancel">{{ cancelButtonText ||
-                        $t("alert.cancel") }}</vd-button>
-                    <vd-button type="large" @click="confirm">{{ confirmButtonText || $t("alert.confirm") }} </vd-button>
-                </div>
-                <div class="vd-dialog__btn" v-if="btn">
-                    <vd-button type="large" @click="confirm" block>{{ confirmButtonText || $t("alert.confirm")
-                        }}</vd-button>
-                </div>
-                <div class="vd-dialog__btns--text" v-if="btnsText">
-                    <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
-                        $t("alert.cancel")
-                        }}</vd-button>
-                    <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
-                        $t("alert.confirm") }}</vd-button>
-                </div>
-                <div class="vd-dialog__btn--text-block" v-if="btnTextBlock">
-                    <vd-button type="primary_text" size="large" block @click="confirm">{{ confirmButtonText ||
-                        $t("alert.confirm") }}</vd-button>
-                </div>
-                <div class="vd-dialog__btns-block" v-if="btnsBlock">
-                    <vd-button type="primary" block size="large" @click="confirm">{{ confirmButtonText ||
-                        $t("alert.confirm") }}</vd-button>
-                    <vd-button type="primary_text" block size="large" @click="cancel">{{ cancelButtonText ||
-                        $t("alert.cancel") }}</vd-button>
-                </div>
-                <div class="vd-dialog__btns--text" v-if="$slots['extra-btn']">
-                    <slot name="extra-btn"></slot>
-                </div>
-            </footer>
-        </div>
+        </transition>
     </div>
 </template>
 
 <script>
+
+import { OverlayManager } from './overlay-manager.js';
+
 export default {
     name: 'vd-dialog',
     props: {
@@ -74,14 +80,22 @@ export default {
             type: Boolean,
             default: true
         },
+        width: [Number, String],
     },
     data() {
         return {
-
+            isOverlayVisible: false,
+            overlayZIndex: 2000
         }
     },
     watch: {
-
+        visible(val) {
+            if (val) {
+                this.showOverlayLayer();
+            } else {
+                this.hideOverlayLayer();
+            }
+        }
     },
     computed: {
         visible() {
@@ -89,23 +103,60 @@ export default {
         }
     },
     methods: {
-        close(force = false) {
-            if (force || this.closeOnOverlay) {
-                this.$emit('input', false);
+        showOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.increment();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex();
             }
         },
+        hideOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.decrement();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex(); // 更新 z-index，以便其他遮罩正确显示
+            }
+        },
+        handleOverlayClick() {
+            if (this.closeOnOverlay) {
+                this.closeDialog();
+            }
+        },
+        closeDialog() {
+            this.$emit('input', false);
+        },
         cancel() {
-            this.close(true); // 调用 close 方法关闭对话框
-            // 触发取消事件，让父组件知道用户点击了取消
+            this.closeDialog();
             this.$emit('cancel');
         },
         confirm() {
+            this.closeDialog();
             this.$emit('confirm');
         },
+    },
+    mounted() {
+        if (this.visible) {
+            this.showOverlayLayer();
+        }
+    },
+    beforeDestroy() {
+        if (this.visible) {
+            this.hideOverlayLayer();
+        }
     }
 }
 </script>
 
 <style lang="less">
 @import './style.less';
+
+.vd-dialog-fade-enter-active,
+.vd-dialog-fade-leave-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+.vd-dialog-fade-enter,
+.vd-dialog-fade-leave-to {
+  transform: translate(-50%, -50%) scale(.8);
+  opacity: 0;
+}
 </style>

package/dist/components/dialog/overlay-manager.js

@@ -0,0 +1,18 @@
+
+let overlayCount = 0;
+
+export const OverlayManager = {
+  increment() {
+    overlayCount += 1;
+  },
+  decrement() {
+    overlayCount -= 1;
+    if (overlayCount < 0) overlayCount = 0;
+  },
+  isOverlayVisible() {
+    return overlayCount > 0;
+  },
+  getZIndex() {
+    return 2000 + overlayCount; // 每个遮罩层递增的 z-index
+  }
+};

package/dist/components/dialog/style.less

@@ -1,7 +1,7 @@
 @dialog-prefix-cls: vd-dialog;
 
 .@{dialog-prefix-cls} {
-    position: absolute;
+    position: fixed;
     left: 50%;
     top: 50%;
     z-index: 2111;

package/dist/components/empty/index.vue

@@ -9,31 +9,48 @@
 </template>
 
 <script>
+import { themeMixin } from '@p/components/mixins/themeMixin';
+
 const prefixCls = 'vd-empty';
 
 export default {
     name: 'vd-empty',
+    mixins: [themeMixin],  // 引入混入
     props: {
         imgs: String,
         description: String,
         size: String,
         type: {
             type: String,
-            default: 'default'  // 默认类型
+            default: 'nodata',  // 默认类型
+            validator(value) {
+                // 只接受以下类型值
+                return ['nodata', 'network', 'not-found'].includes(value);
+            }
         },
     },
     data() {
         return {
             defaultImgs: {
-                default: require('./empty-img.png'),
-                network: require('./empty-network.png'),
-                'not-found': require('./empty-404.png'),
+                nodata: {
+                    light: require('./nodata.png'),
+                    dark: require('./nodata-dark.png')
+                },
+                network: {
+                    light: require('./network.png'),
+                    dark: require('./network-dark.png')
+                },
+                'not-found': {
+                    light: require('./404.png'),
+                    dark: require('./404-dark.png')
+                }
             }
         }
     },
     computed: {
         currentImg() {
-            return this.imgs || this.defaultImgs[this.type];
+            if (this.imgs) return this.imgs;
+            return this.defaultImgs[this.type][this.theme];
         },
         wrapClasses() {
             return [
@@ -56,7 +73,20 @@ export default {
                 }
             ]
         }
-    }
+    },
+    methods: {
+        preloadImages() {
+            Object.values(this.defaultImgs).forEach((modes) => {
+                Object.values(modes).forEach((src) => {
+                    const img = new Image();
+                    img.src = src;
+                });
+            });
+        }
+    },
+    mounted() {
+        this.preloadImages();
+    },
 }
 </script>
 

package/dist/components/empty/style.less

@@ -9,6 +9,13 @@
     flex-direction: column;
     justify-content: center;
 
+    &-img{
+        width: 164px;
+        height: 118px;
+        margin: 0 auto;
+    }
+
+
     &-txt{
         margin-block-start: calc(var(--spacing-empty-large-text-margin_top) * 1px);
         font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);

package/dist/components/footnav/index.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="vd-foot-nav"
-    :class="{ 'vd-foot-nav--fixed': fixed, 'vd-hairline--top': border, 'vd-foot-nav--unfit': !this.fit }"
-    :style="style">
-    <slot></slot>
+  <div class="vd-foot-nav--placeholder" :style="{height:height + 'px'}">
+    <div class="vd-foot-nav" ref="footNav"
+      :class="{ 'vd-foot-nav--fixed': fixed, 'vd-hairline--top': border, 'vd-foot-nav--unfit': !this.fit }"
+      :style="style">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -24,6 +26,7 @@ export default {
       type: Boolean,
       default: null,
     },
+    placeholder: Boolean,
   },
   computed: {
     fit() {
@@ -42,7 +45,8 @@ export default {
   data() {
     return {
       // active: 0,
-      items: []
+      items: [],
+      height: null,
     }
   },
   watch: {
@@ -73,7 +77,18 @@ export default {
     // handleClick() {
     //   this.$emit('click',this.active)
     // }
+  },
+  mounted() {
+    if (this.placeholder && this.fixed) {
+      const setHeight = () => {
+        this.height = this.$refs.footNav.getBoundingClientRect().height;
+      };
+
+      setHeight();
+      setTimeout(setHeight, 100);
+    }
   }
+
 }
 </script>
 

package/dist/components/footnav/style.less

@@ -3,7 +3,6 @@
 
 .@{footnav-prefix-cls}{
     width: 100%;
-    z-index: 1;
     display: flex;
     padding: 4px calc(var(--spacing-footnav-icon-margin_bottom) * 1px);
     height: calc(var(--height-footnav-content) * 1px);
@@ -15,6 +14,8 @@
         position: fixed;
         bottom: 0;
         left: 0;
+        width: 100%;
+        z-index: 1;
     }
     &--unfit {
         padding-bottom: 0;