udxcms 1.0.1

package/dist/components/basicComponents/PortfolioMenu.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="portfolio-menu">
+        <!-- <a-button
+            type="primary"
+            style="margin-bottom: 16px"
+            @click="toggleCollapsed"
+        >
+        :inline-collapsed="collapsed"
+            <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
+        </a-button> -->
+        <!-- <a-layout-sider  v-model:collapsed="isCollapse" collapsible> -->
+        <!-- :inline-collapsed="collapsed" -->
+        <a-menu
+            :mode="mode"
+            v-model="defaultSelectedKeys"
+            @click="onClickMenu"
+        >
+            <a-menu-item
+                v-for="item in menus"
+                :key="item.click_url"
+                :to="item.click_url"
+            >
+                <div class="menu-icon-wrapper">
+                    <SvgIcon
+                        :iconClass="item.icon"
+                        className="menu-icon"
+					    :stroke="null"
+                    />
+                </div>
+                <span :title="item.bar_name">{{ item.bar_name }}</span>
+            </a-menu-item>
+        </a-menu>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PortfolioMenu",
+
+    props: {
+        // 菜单类型：user,portfolio
+        menuType: {
+            type: String,
+            default: "user",
+        },
+        mode: {
+            type: String,
+            default: "vertical",
+        }
+    },
+    data() {
+        return {
+            defaultSelectedKeys: ["/wallet/overview"],
+            collapsed: false,
+        };
+    },
+    computed: {
+        account() {
+            return this.$store.getters.account || "";
+        },
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        allMenus() {
+            return this.menuType == 'user' ? this.$store.state.navigation[this.menuType].filter(v => v.client == 'WEB') : this.$store.state.navigation[this.menuType];
+        },
+        menus() {
+            // type
+            // COMMON("公共"),
+            // MANAGED("托管"),
+            // UNMANAGED("非托管"),
+            if (!this.account) return [];
+            let result = this.allMenus.filter((item) => item.type === "COMMON");
+            if (this.accountIsCustody) {
+                result = result.concat(
+                    this.allMenus.filter((item) => item.type === "MANAGED")
+                );
+            } else {
+                result = result.concat(
+                    this.allMenus.filter((item) => item.type === "UNMANAGED")
+                );
+            }
+            return result.sort((a, b) => a.sort - b.sort);
+        },
+    },
+    watch: {
+        $route: {
+            handler(val) {
+                console.log("val:", val);
+                this.defaultSelectedKeys.splice(0, 1, val.path);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        onClickMenu(options) {
+            console.log("onClickMenu options:", options);
+            sessionStorage.setItem('portfoilType', this.menuType)
+            this.$store.commit('setMenuChange')
+            this.$router.push(options.key);
+        },
+        toggleCollapsed() {
+            this.collapsed = !this.collapsed;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.portfolio-menu {
+    .ant-menu {
+        border-right: none;
+        //color: var(--text-color);
+    }
+    .ant-menu-item{
+        display: flex;
+        align-items: center;
+    }
+    .menu-icon-wrapper{
+        width: 24px;
+        height: 24px;
+        line-height: 1;
+        margin-right: 10px;
+        .menu-icon{
+            //color: var(--text-color-placeholder);
+        }
+    }
+    .ant-menu-item-selected {
+        //color: var(--text-color);
+    }
+    .ant-menu-item:hover,
+    .ant-menu-item-active {
+        //color: var(--text-color);
+    }
+    .ant-menu-vertical > .ant-menu-item {
+        height: 56px;
+        line-height: 56px;
+    }
+    .ant-menu-vertical .ant-menu-item::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        border-left: 3px solid var(--primary-color);
+        content: "";
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+    }
+    .ant-menu-vertical .ant-menu-item-selected:before {
+        opacity: 1;
+    }
+    .ant-menu-vertical .ant-menu-item::after {
+        display: none;
+    }
+}
+</style>

package/dist/components/basicComponents/PowxBread.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-04 21:10:32
+ * @LastEditTime: 2021-11-15 19:42:58
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+	<div class="breadcrumb-container">
+		<a-breadcrumb separator=" ">
+			<a-breadcrumb-item
+				v-for="(item, index) in list"
+				:key="index"
+				>
+                <a :class="[item.path && 'link']" @click='goPath(item.path, index, item)'>{{ item.name }}</a>
+            </a-breadcrumb-item>
+		</a-breadcrumb>
+		<div class="layou-export">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		list: {
+			type: Array,
+			default: function() {
+				return {};
+			},
+		},
+        callOutSelf: {
+            type: Boolean,
+            default: false
+        }
+	},
+    methods: {
+        goPath(path, index, item) {
+            if (this.callOutSelf) {
+                this.$emit('breadClick', {index, item})
+            } else {
+                if (path) {
+                    this.$router.push({
+                        path
+                    })
+                }
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.breadcrumb-container {
+	position: relative;
+	/deep/ .ant-breadcrumb {
+		padding: 14px 10px;
+		span {
+			line-height: 32px;
+            &.link {
+                cursor: pointer;
+            }
+		}
+	}
+	/deep/ .ant-breadcrumb > span:last-child {
+		font-weight: 500;
+	}
+	/deep/ .ant-breadcrumb-link {
+		width: 54px;
+		height: 32px;
+		font-family: FontMedium;
+		text-align: center;
+		color: var(--text-color-secondary);
+		line-height: 32px;
+        font-size: 24px;
+	}
+	/deep/ .ant-breadcrumb-separator {
+		position: relative;
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		vertical-align: middle;
+		margin: 0 15px;
+	}
+	/deep/ .ant-breadcrumb-separator::after {
+		content: "";
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		background-size: contain;
+		background-image: url("../../assets/img/bread.png");
+	}
+	.layou-export {
+		position: absolute;
+		top: 0;
+		right: 10px;
+		padding: 13px 10px 15px;
+		span {
+			font-size: 18px;
+			line-height: 32px;
+			font-family: Font;
+			text-align: left;
+			color: var(--text-color-placeholder);
+		}
+	}
+	.ant-breadcrumb > span {
+		color: #515a6e;
+	}
+}
+</style>

package/dist/components/basicComponents/SelectPop.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: 
+ * @Date: 2020-12-15 11:46:36
+ * @LastEditTime: 2020-12-21 12:11:34
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <transition name='fade'>
+        <div class='select-pop' v-if='value || isStatic'>
+            <slot></slot>
+        </div>
+    </transition>
+</template>
+
+<script>
+    var closeFn;
+    export default {
+        name: 'selectpop',
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            targetId: {
+                type: String,
+                default: ''
+            },
+            isStatic: {
+                type: Boolean,
+                default: false
+            }
+        },
+        watch: {
+            value: function(val,oldValue) {
+                if (!val) {
+                    document.removeEventListener('click',closeFn)
+                }
+                let clickCount = 0
+                closeFn = (e)=>{
+                    if(!this.$el.contains(e.target) && (e.target.id !== this.targetId) || (e.target.id === this.targetId && clickCount % 2)) {
+                        this.$emit('input', false)
+                    }
+                    clickCount++
+                }
+                this.$nextTick(()=>{
+                    if(val) {
+                        document.addEventListener('click',closeFn)
+                    }else {
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            },
+        },
+        beforeDestroy() {
+            document.removeEventListener('click',closeFn)
+        }      
+    }
+</script>
+
+<style lang="less" scoped>
+    .select-pop {
+        background: #ffffff;
+        border-radius: 6px 6px 6px 6px;
+        box-shadow: 0px 4px 12px 0px rgba(17,51,83,0.2); 
+    }
+    .fade-enter-active, .fade-leave-active {
+        transition: all .5s ease-in-out;
+    }
+    .fade-enter {
+        transform: translateY(10%);
+        opacity: 1;
+    }
+    .fade-leave {
+        transform: translateY(0%);
+        opacity: 0;
+    }
+</style>

package/dist/components/basicComponents/SubComfirm.vue

@@ -0,0 +1,153 @@
+<!--
+ * @Author:
+ * @Date: 2020-12-14 19:41:50
+ * @LastEditTime: 2022-08-06 18:33:56
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class='sub-confim'>
+        <div class='title'>{{title || innerTitle}}</div>
+        <div class='flex-v sub-conts'>
+            <div class='loading' v-if='loading'>
+                <img src="../../assets/img/loading.png" alt="">
+            </div>
+            <div class='title content' v-html="content"></div>
+            <div class='sub-btns'>
+                <button :class="['sub-btn opcHover', !btnShow[1] ? 'one-btn' : '']" @click='sureFunc(0)' v-if='btnShow[0]'>{{cancelText || innerCancel}}</button>
+                <button :class="['sub-btn active', !btnShow[0] ? 'one-btn' : '']" @click='sureFunc(1)' v-if='btnShow[1]'>{{sureText || innerSure}}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'SubComfirm',
+        props: {
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            content: {
+                type: String,
+                default: ''
+            },
+            sureText: {
+                type: String,
+                default: ''
+            },
+            cancelText: {
+                type: String,
+                default: ''
+            },
+            btnShow: {
+                type: Array,
+                default: function() {
+                    return [1, 1]
+                }
+            }
+        },
+        data() {
+            return {
+                innerTitle: this.$t('common_base_confirmation'),
+                innerSure: this.$t('user_common_sure'),
+                innerCancel: this.$t('user_common_cancel')
+            }
+        },
+        methods: {
+            sureFunc(val) {
+                this.$emit('callFunc', val)
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .sub-confim {
+        margin-top: -10px;
+        width: 100%;
+        min-height: 220px;
+        .loading {
+            text-align: center;
+            padding-bottom: 6px;
+            img {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+                animation:around 1s  step-start infinite;
+            }
+        }
+        .title {
+            font-size: 24px;
+            font-family: Font;
+            text-align: center;
+            color: var(--text-color-secondary);
+            line-height: 24px;
+        }
+        .sub-conts {
+            margin: 28px 0 0px 0;
+            height: 100%;
+            min-height: 160px;
+        }
+        .content {
+            font-size: 16px;
+            line-height: 24px;
+            margin-bottom: 20px;
+            text-align: left;
+            flex: 1;
+            overflow: auto;
+        }
+        .sub-btn {
+            width: 124px;
+            height: 48px;
+            border: 1px solid var(--border-color-base);
+            border-radius: 6px;
+            text-align: center;
+            line-height: 48px;
+            font-size: 16px;
+            color: var(--text-color);
+        }
+        .sub-btn.active {
+            color: white;
+            background: var(--primary-bg-color);
+            margin-left: 24px;
+        }
+        .sub-btn.one-btn {
+            width: 100%;
+            margin-left: 0;
+            border: none;
+        }
+    }
+    @keyframes around {
+        0% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(90deg);
+        }
+        50% {
+            transform: rotate(180deg);
+        }
+        75% {
+            transform: rotate(270deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    @media screen and (min-width: 768px) {
+        .sub-confim {
+            width:360px;
+        }
+    }
+    @media screen and (min-width: 1200px) {
+        .sub-confim {
+            width:360px;
+        }
+    }
+</style>

package/dist/components/basicComponents/SvgIcon.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-10-28 14:54:57
+ * @LastEditTime: 2020-12-25 12:19:54
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <svg :class="svgClass" aria-hidden="true" v-on="$listeners" :style='{stroke: stroke, fill: fill}'>
+        <use :xlink:href="iconName" />
+    </svg>
+</template>
+<script>
+export default {
+    name: "SvgIcon",
+    props: {
+        iconClass: {
+            type: String | Object,
+            required: true,
+        },
+        className: {
+            type: String,
+            default: "",
+        },
+        stroke: {
+            type: String,
+            default: 'currentColor'
+        },
+        fill: {
+            type: String,
+            default: 'currentColor'
+        }
+    },
+    computed: {
+        iconName() {
+            return `#icon-${this.iconClass}`;
+        },
+        svgClass() {
+            if (this.className) {
+                return 'svg-icon ' + this.className;
+            } else {
+                return 'svg-icon';
+            }
+        },
+    },
+}
+</script>
+<style scoped>
+.svg-icon {
+    /* width: 14px; */
+    /* height: 14px; */
+    width: 100%;
+    height: 100%;
+    fill: var(--primary-color);
+    overflow: hidden;
+    cursor: pointer;
+    /* 禁止鼠标悬停提示文案 */
+    /* pointer-events: none; */
+}
+</style>