ocpview-plus 0.0.1

package/src/styles/components/tabs.less

@@ -0,0 +1,249 @@
+@tabs-prefix-cls: ~"@{css-prefix}tabs";
+
+.@{tabs-prefix-cls} {
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    color: @text-color;
+    .clearfix;
+
+    &-bar {
+        outline: none;
+    }
+
+    &-ink-bar {
+        height: 2px;
+        box-sizing: border-box;
+        background-color: @primary-color;
+        position: absolute;
+        left: 0;
+        bottom: 1px;
+        z-index: 1;
+        transition: transform .3s @ease-in-out;
+        transform-origin: 0 0;
+    }
+
+    &-bar {
+        border-bottom: 1px solid @border-color-base;
+        margin-bottom: @tab-bar-bottom;
+    }
+
+    &-nav-container {
+        margin-bottom: -1px;
+        line-height: @line-height-base;
+        font-size: @font-size-base;
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        position: relative;
+        .clearfix;
+    }
+
+    &-nav-container:focus {
+        outline: none;
+        .@{tabs-prefix-cls}-tab-focused {
+            border-color: @link-hover-color !important;
+        }
+    }
+
+    &-nav-container-scrolling {
+        padding-left: 32px;
+        padding-right: 32px;
+    }
+
+    &-nav-wrap {
+        overflow: hidden;
+        margin-bottom: -1px;
+    }
+
+    &-nav-scroll {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    &-nav-right{
+        float: right;
+        margin-left: 5px;
+    }
+
+    &-nav-prev, &-nav-next{
+        width: 32px;
+        text-align: center;
+        position: absolute;
+        line-height: 32px;
+        cursor: pointer;
+        i{
+            font-size: 16px;
+        }
+    }
+
+    &-nav-prev{
+        left: 0;
+    }
+
+    &-nav-next{
+        right: 0;
+    }
+
+    &-nav-scrollable{
+        padding: 0 32px;
+    }
+
+    &-nav-scroll-disabled{
+        display: none;
+    }
+
+    &-nav {
+        padding-left: 0;
+        margin: 0;
+        float: left;
+        list-style: none;
+        box-sizing: border-box;
+        position: relative;
+        transition: transform 0.5s @ease-in-out;
+
+        &:before,
+        &:after {
+            display: table;
+            content: " ";
+        }
+
+        &:after {
+            clear: both;
+        }
+
+        .@{tabs-prefix-cls}-tab-disabled {
+            pointer-events: none;
+            cursor: default;
+            color: #ccc;
+        }
+
+        .@{tabs-prefix-cls}-tab {
+            display: inline-block;
+            height: 100%;
+            padding: 8px 16px;
+            margin-right: 16px;
+            box-sizing: border-box;
+            cursor: pointer;
+            text-decoration: none;
+            position: relative;
+            transition: color .3s @ease-in-out;
+
+            &:hover {
+                color: @link-hover-color;
+            }
+
+            &:active {
+                color: @link-active-color;
+            }
+            .@{css-prefix-iconfont} {
+                width: 14px;
+                height: 14px;
+                margin-right: 8px;
+            }
+        }
+
+        .@{tabs-prefix-cls}-tab-active {
+            color: @primary-color;
+        }
+    }
+    &-mini &-nav-container {
+        font-size: @font-size-base;
+    }
+
+    &-mini &-tab {
+        margin-right: 0;
+        padding: 8px 16px;
+        font-size: @font-size-small;
+    }
+
+    & {
+        .@{tabs-prefix-cls}-content-animated {
+            display: flex;
+            flex-direction: row;
+            will-change: transform;
+            transition: transform .3s @ease-in-out;
+        }
+
+        .@{tabs-prefix-cls}-tabpane {
+            flex-shrink: 0;
+            width: 100%;
+            transition: opacity .3s;
+            opacity: 1;
+            outline: none;
+        }
+
+        .@{tabs-prefix-cls}-tabpane-inactive {
+            opacity: 0;
+            height: 0;
+        }
+    }
+
+    // card style
+    &&-card > &-bar &-nav-container {
+        height: 32px;
+    }
+    &&-card > &-bar &-ink-bar {
+        visibility: hidden;
+    }
+    &&-card > &-bar &-tab {
+        margin: 0;
+        margin-right: 4px;
+        height: 31px;
+        padding: 5px 16px 4px;
+        border: 1px solid @border-color-base;
+        border-bottom: 0;
+        border-radius: @btn-border-radius @btn-border-radius 0 0;
+        transition: all 0.3s @ease-in-out;
+        background: @table-thead-bg;
+    }
+    &&-card > &-bar &-tab-active {
+        height: 32px;
+        padding-bottom: 5px;
+        background: #fff;
+        transform: translateZ(0);
+        border-color: @border-color-base;
+        color: @primary-color;
+    }
+    &&-card > &-bar &-nav-wrap {
+        margin-bottom: 0;
+    }
+    &&-card > &-bar &-tab &-close {
+        width: 0;
+        height: 22px;
+        font-size: 22px;
+        margin-right: 0;
+        color: @legend-color;
+        text-align: right;
+        vertical-align: middle;
+        overflow: hidden;
+        position: relative;
+        top: -1px;
+        transform-origin: 100% 50%;
+        transition: all 0.3s @ease-in-out;
+        &:hover {
+            color: #444;
+        }
+    }
+
+    &&-card > &-bar &-tab-active &-close,
+    &&-card > &-bar &-tab:hover &-close {
+        width: 22px;
+        transform: translateZ(0);
+        margin-right: -6px;
+    }
+    
+    &-context-menu{
+        position: absolute;
+    }
+}
+
+.@{tabs-prefix-cls}-no-animation{
+    > .@{tabs-prefix-cls}-content {
+        transform: none!important;
+
+        > .@{tabs-prefix-cls}-tabpane-inactive {
+            display: none;
+        }
+    }
+}

package/src/styles/components/upload.less

@@ -0,0 +1,83 @@
+@upload-prefix-cls: ~"@{css-prefix}upload";
+
+.@{upload-prefix-cls} {
+    input[type="file"]{
+        display: none;
+    }
+
+    &-list{
+        margin-top: 8px;
+
+        &-file{
+            padding: 4px;
+            color: @text-color;
+            border-radius: @border-radius-small;
+            transition: background-color @transition-time @ease-in-out;
+            overflow: hidden;
+            position: relative;
+
+            & > span{
+                cursor: pointer;
+                transition: color @transition-time @ease-in-out;
+                i{
+                    display: inline-block;
+                    width: @font-size-small;
+                    height: @font-size-small;
+                    color: @text-color;
+                    text-align: center;
+                }
+            }
+
+            &:hover{
+                background: @input-disabled-bg;
+                & > span{
+                    color: @primary-color;
+                    i{
+                        color: @text-color;
+                    }
+                }
+                .@{upload-prefix-cls}-list-remove{
+                    opacity: 1;
+                }
+            }
+        }
+        &-remove{
+            opacity: 0;
+            font-size: 18px;
+            cursor: pointer;
+            float: right;
+            margin-right: 4px;
+            color: @legend-color;
+            transition: all @transition-time ease;
+            &:hover{
+                color: #444;
+            }
+        }
+    }
+
+     &-select {
+        display: inline-block;
+    }
+    
+    &-drag{
+        background: @upload-drag-bg;
+        border: 1px dashed @border-color-base;
+        border-radius: @border-radius-small;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: border-color @transition-time ease;
+
+        &:hover{
+            border: 1px dashed @primary-color;
+        }
+    }
+    &-dragOver{
+        border: 2px dashed @primary-color;
+    }
+    &-disabled {
+        .disabled();
+    }
+
+}

package/src/styles/custom.less

@@ -0,0 +1,67 @@
+// 自定义参数
+// 自定义 table
+@table-th-small-height: 32px;
+@table-th-default-height: 40px;
+@table-th-large-height: 48px;
+@table-td-small-height: 40px;
+@table-td-default-height: 48px;
+@table-td-large-height: 60px;
+@table-footer-small-height: 40px;
+@table-footer-default-height: 48px;
+@table-footer-large-height: 60px;
+@table-cell-padding:18px;
+@table-th-font-size:14px;
+@table-td-font-size:14px;
+@table-head-th-padding:5px 0px;
+
+@table-th-default-height:40px;
+@table-td-default-height:40px;
+@table-footer-default-height: 40px;
+@table-th-font-size:16px;
+@table-td-font-size:14px;
+@table-cell-padding:8px;
+@form-item-margin-bottom:24px;
+
+@page-font-hover-color:@primary-color;
+@page-border-radius:@btn-border-radius;
+@page-border-radius-small:@btn-border-radius-small;
+@tab-bar-bottom:16px;
+@table-border-width:1px;
+@modal-body-padding:16px;
+@modal-icon-size:31px;
+@modal-icon-top:8px;
+@modal-icon-right:8px;
+@modal-header-border:1px;
+@modal-header-color:#Fff;
+@modal-header-padding:14px 16px;
+@modal-top: 100px;
+@combox-bg:#Fff;
+@upload-drag-bg:#Fff;
+@card-header-border:1px;
+@card-header-padding:14px 16px;
+@steps-background-color:#fff;
+@page-background-color:#fff;
+@page-item-font-weight:500;
+@table-expended-cell-padding:20px 50px;
+
+@title-font-color:#464c5b;
+@title-font-weight:700;
+@title-font-size-1:16px;
+@title-font-size-2:14px;
+@title-font-size-3:12px;
+@table-border-width:0px;
+@input-disabled-bg:#f8f8f9;
+@table-td-hover-bg: #eaf4ff;
+@table-td-highlight-bg: #e0eeff;
+@form-item-margin-top:0px;
+@body-background: #eee;
+@input-disabled-font-color:#ccc;
+@btn-icon-size:16px;
+@efuture-checkbox-padding:6px;
+@efuture-radiogroupbox-padding:6px;
+@grid-head-required:@primary-color;
+@boder-color:#DCDFE6;
+@text-grey:#636569;
+@asterisk-color:@primary-color;
+@main-btn-disabled-color:#76b4f5;
+

package/src/styles/index.less

@@ -0,0 +1,6 @@
+//@import '../styles2/index.less';
+//@import "../node_modules/view-ui-plus/src/styles/index.less"; //打包发布
+@import 'view-ui-plus/src/styles/index.less'; //调试
+@import './components/index.less';
+@import './custom';
+@import './common';

package/src/styles/pack.less

@@ -0,0 +1,6 @@
+//@import '../styles2/index.less';
+@import "../node_modules/view-ui-plus/src/styles/index.less"; //打包发布
+//@import 'view-ui-plus/src/styles/index.less'; //调试
+@import './components/index.less';
+@import './custom';
+@import './common';

package/src/utils/EfuMessenger.js

@@ -0,0 +1,155 @@
+const supportPostMessage = 'postMessage' in window
+
+const serverMessageName = 'AMPframe'
+const serverProjectName = 'AMP'
+
+const clientMessageName = 'AMPclient'
+const clientProjectName = 'AMP'
+const clientTargetName = 'AMPframe'
+
+class Target {
+    constructor(target, name, prefix) {
+        let errMsg = ''
+        if (arguments.length < 2) {
+            errMsg = 'target error - target and name are both required'
+        } else if (typeof target !== 'object') {
+            errMsg = 'target error - target itself must be window object'
+        } else if (typeof name !== 'string') {
+            errMsg = 'target error - target name must be string type'
+        }
+        if (errMsg) {
+            throw new Error(errMsg)
+        }
+        this.target = target
+        this.name = name
+        this.prefix = prefix
+    }
+    send(msg) {
+        if (supportPostMessage) {
+            this.target.postMessage(`${this.prefix}|${this.name}__Messenger__${msg}`, '*')
+        } else {
+            const targetFunc = window.navigator[this.prefix + this.name]
+            if (typeof targetFunc === 'function') {
+                targetFunc(this.prefix + msg, window)
+            } else {
+                throw new Error('target callback function is not defined')
+            }
+        }
+    }
+}
+
+class EfuMessenger {
+    constructor(messengerName, projectName) {
+        this.targets = {}
+        this.name = messengerName
+        this.listenFunc = []
+        this.prefix = projectName
+        this.initListen()
+    }
+    addTarget(target, name) {
+        const targetObj = new Target(target, name, this.prefix)
+        this.targets[name] = targetObj
+    }
+    listen(callback) {
+        let i = 0
+        const len = this.listenFunc.length
+        let cbIsExist = false
+        for (; i < len; i++) {
+            // 增加多组件对象定义重复声明判断
+            let o_fn_str = this.listenFunc[i].toString()
+            let n_fn_str = callback.toString()
+            if (o_fn_str === n_fn_str) {
+                this.listenFunc[i] = callback
+                cbIsExist = true
+                break
+            }
+        }
+        if (!cbIsExist) {
+            this.listenFunc.push(callback)
+        }
+    }
+    clear() {
+        this.listenFunc = []
+    }
+    send(msg) {
+        const { targets } = this
+        let target
+        for (target in targets) {
+            if (targets.hasOwnProperty(target)) {
+                targets[target].send(msg)
+            }
+        }
+    }
+    initListen() {
+        const self = this
+        const generalCallback = function (msg) {
+            if (typeof msg === 'object' && msg.data) {
+                msg = msg.data
+            }
+            if (typeof msg === 'string') {
+                const msgPairs = msg.split('__Messenger__')
+                var msg = msgPairs[1]
+                const pairs = msgPairs[0].split('|')
+                const prefix = pairs[0]
+                const name = pairs[1]
+                for (let i = 0; i < self.listenFunc.length; i++) {
+                    if (prefix + name === self.prefix + self.name) {
+                        self.listenFunc[i](msg)
+                    }
+                }
+            }
+        }
+        if (supportPostMessage) {
+            if ('addEventListener' in document) {
+                window.addEventListener('message', generalCallback, false)
+            } else if ('attachEvent' in document) {
+                window.attachEvent('onmessage', generalCallback)
+            }
+        } else {
+            // 兼容IE 6/7
+            window.navigator[this.prefix + this.name] = generalCallback
+        }
+    }
+}
+
+class server {
+    constructor(messageName, projectName) {
+        this.messageName = messageName || serverMessageName
+        this.projectName = projectName || serverProjectName
+        return new EfuMessenger(this.messageName, this.projectName)
+    }
+}
+
+class client {
+    constructor(targetName, messageName, projectName) {
+        this.messengerOBJ = null
+        this.messageName = messageName || clientMessageName
+        this.targetName = targetName || clientTargetName
+        this.projectName = projectName || clientProjectName
+        this.init()
+    }
+    init() {
+        this.messengerOBJ = new EfuMessenger(this.messageName, this.projectName)
+        this.messengerOBJ.addTarget(window.parent, this.targetName)
+    }
+    openPortalTabPage(params) {
+        this.messengerOBJ.targets[this.targetName].send(
+            JSON.stringify({
+                name: this.messageName,
+                action: 'openPortalTabPage',
+                params: { ...params }
+            })
+        )
+    }
+    openPortalTabByModuleCode(params) {
+        this.messengerOBJ.targets[this.targetName].send(
+            JSON.stringify({
+                name: this.messageName,
+                action: 'openPortalTabByModuleCode',
+                params: { ...params }
+            })
+        )
+    }
+}
+
+export { EfuMessenger, server, client }