@jx3box/jx3box-vue3-ui 0.0.3

package/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_size = 4
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.env

@@ -0,0 +1 @@
+STATIC_PATH=https://cdn.jx3box.com

package/.eslintrc

@@ -0,0 +1,9 @@
+{
+    "root": true,
+    "env": {
+        "node": true
+    },
+    "parser": "vue-eslint-parser",
+    "extends": ["plugin:vue/vue3-essential", "eslint:recommended"],
+    "rules": {}
+}

package/.prettierrc

@@ -0,0 +1,21 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "endOfLine": "lf",
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": false,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always",
+    "requirePragma": false,
+    "insertPragma": false,
+    "proseWrap": "preserve",
+    "htmlWhitespaceSensitivity": "css",
+    "vueIndentScriptAndStyle": false,
+    "embeddedLanguageFormatting": "auto"
+}

package/README.md

@@ -0,0 +1 @@
+# jx3box-vue3-ui

package/assets/css/admin.less

@@ -0,0 +1,83 @@
+.c-admin {
+    top: @header-height + @bread-height !important;
+    position: fixed;
+    right: 0;
+    overflow-y: hidden;
+    margin: 0;
+
+    *:focus {
+        outline: none !important;
+        box-shadow: none !important;
+    }
+
+    .el-drawer {
+        .size(100%);
+        overflow-y: auto;
+    }
+}
+
+.c-admin-mark {
+    .el-radio {
+        .mb(10px);
+    }
+}
+
+.c-admin-wrapper {
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.c-admin-highlight-checkbox {
+    .mr(10px) !important;
+}
+.c-admin-highlight-block {
+    .y;
+}
+.c-admin-highlight-preview {
+    .fz(14px);
+    .bold;
+    .ml(10px);
+}
+
+.c-admin-banner {
+    .u-banner {
+        .mt(5px);
+    }
+    .u-btn {
+        .pointer;
+    }
+}
+.c-admin-upload {
+    .w(100%) !important;
+    .x;
+
+    .el-upload {
+        .size(100%);
+        box-sizing: border-box;
+    }
+    overflow: hidden;
+}
+
+.c-admin-info {
+    display: flex;
+}
+.c-admin-type {
+    .w(200px);
+    .mr(10px);
+}
+.c-admin-author {
+    flex: 1;
+}
+
+.c-admin-buttons {
+    .mt(20px);
+    .x;
+}
+
+@media screen and (max-width: @ipad) {
+    .c-admin {
+        .el-drawer {
+            .w(100%) !important;
+        }
+    }
+}

package/assets/css/author.less

@@ -0,0 +1,86 @@
+.c-author {
+    .u-tips {
+        .db;
+        color: #555;
+        font-size: 12px;
+    }
+
+    .u-label {
+        padding: 10px 0;
+        .flex;
+        align-items: center;
+        i,
+        svg {
+            .size(16px);
+            .mr(5px);
+        }
+        span {
+            .fz(12px);
+            .bold;
+        }
+        // border-bottom: 1px solid @border;
+    }
+    .u-more {
+        fill: #aaa;
+    }
+
+    @keyframes living-icon-ani {
+        0% {
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+        }
+        50% {
+            -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+        }
+        to {
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+        }
+    }
+
+    .u-tv-living {
+        .dbi;
+        .ml(10px);
+    }
+
+    .u-tv-living-icon {
+        .h(10px);
+    }
+
+    .u-tv-living-icon-col {
+        .dbi;
+        transform-origin: bottom;
+        width: 2px;
+        height: 100%;
+        margin: 0 1px;
+        background-color: #fb7299;
+        border-radius: 2px;
+        animation: living-icon-ani 0.6s linear infinite;
+    }
+    .u-tv-living-icon-col.first {
+        animation-delay: -0.2s;
+    }
+    .u-tv-living-icon-col.last {
+        animation-delay: 0.2s;
+    }
+
+    .u-interact {
+        .mt(5px);
+        display: flex;
+    }
+    .u-links {
+        .mt(15px);
+    }
+    .u-block {
+        .mt(20px);
+    }
+}
+
+.c-sidebar-left .c-author {
+    margin: 10px;
+}
+
+.c-sidebar-right .c-author {
+    margin: 15px;
+}

package/assets/css/bottom.less

@@ -0,0 +1,21 @@
+@gray: #888;
+@space: 20px;
+@pink: #f39;
+
+.m-bottom {
+    font-size: 12px;
+    color: @gray;
+    margin-top: @space;
+    font-family: verdana, "Trebuchet MS", Tahoma;
+
+    a {
+        color: @gray;
+        &:hover {
+            color: @pink;
+        }
+    }
+
+    .u-feedback {
+        float: right;
+    }
+}

package/assets/css/box.less

@@ -0,0 +1,180 @@
+.c-header-jx3box {
+    background-color: @bg-black;
+    .z(800);
+    overflow-y: auto;
+    overflow-x: hidden;
+    .w(100%);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+    transition: 0.5s ease-in-out;
+    .clearfix;
+    // .pa;
+
+    .none;
+    &.on {
+        .db;
+    }
+
+    // transition:0.5s ease-in-out;
+    // transform: translateY(-100%);
+    // .pr;top:-@header-height;
+    // &.on{
+    //     transform: translateY(0);
+    //     top:0;
+    // }
+
+    ul {
+        margin: 0 -20px 0 0;
+        padding: 10px 0 10px 20px;
+        list-style: none;
+        .clearfix;
+    }
+
+    li {
+        .fl;
+        .db;
+        .mr(20px);
+        .mb(20px);
+    }
+    .u-item {
+        .db;
+        .size(74px);
+        box-sizing: border-box;
+        .x;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #eee;
+        background-color: #fff;
+        transition: all 0.1s ease-in;
+        background-color: @bg-light;
+        .pr;
+        overflow: hidden;
+        .u-pic-hover {
+            .none;
+        }
+    }
+    .u-item:not(.u-doing) {
+        &:hover {
+            border-color: #111;
+            // .u-pic {
+            //     .none;
+            // }
+            // .u-pic-hover{
+            //     .db;
+            // }
+        }
+    }
+    .u-pic,
+    .u-pic-hover {
+        .size(32px);
+        .db;
+        .auto(x);
+        fill: @color;
+        .tm(0.7);
+    }
+    .u-txt {
+        .fz(12px, 2);
+        color: #666;
+        .db;
+        white-space: nowrap;
+    }
+    .u-mark {
+        color: #fff;
+        font-size: 12px;
+        line-height: 16px;
+        transform: rotate(45deg) scale(0.8);
+        position: absolute;
+        right: -20px;
+        top: 0;
+        padding: 0 15px 0 25px;
+        font-style: normal;
+
+        &.ishot {
+            background-color: #c00;
+        }
+        &.isnew {
+            background-color: #2fcb53;
+        }
+    }
+    .u-app-start {
+        .clear(left);
+    }
+    .u-doing {
+        .tm(0.5);
+        cursor: default;
+    }
+
+    // .pr;
+    .u-close {
+        // .pa;.rb(0);
+        .fr;
+        background-color: @color;
+        .fz(13px);
+        padding: 5px 10px;
+        i {
+            .mr(3px);
+        }
+        .pointer;
+    }
+}
+.c-header-jx3box.isOverlay {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+@media screen and (max-width: @ipad-y) {
+    .c-jx3box {
+        .u-list {
+            .flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 20px;
+            border-top: 1px solid @color;
+        }
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .c-jx3box {
+        height: calc(100vh - @header-height);
+        .u-list {
+            border-top: none;
+            padding: 0 20px;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            justify-content: center;
+            .w(100%);
+            box-sizing: border-box;
+            gap: 10px;
+            margin: 0 !important;
+            &::after {
+                flex: 1;
+            }
+            li {
+                padding: 5px;
+                .mr(0);
+                .mb(0);
+            }
+        }
+        .u-item {
+            .size(68px);
+            .auto(x);
+            .u-pic {
+                .size(28px);
+            }
+        }
+        .u-app-start {
+            clear: none;
+        }
+    }
+}
+@media screen and (max-width: @ip5) {
+    .c-jx3box {
+        .u-list {
+            gap: 5px;
+        }
+        .u-item {
+            .size(60px);
+            .u-pic {
+                .size(22px);
+            }
+        }
+    }
+}

package/assets/css/box2.less

@@ -0,0 +1,150 @@
+@import "./mixin.less";
+.c-header-jx3box {
+    background-color: @bg-black;
+    .z(800);
+    .w(100%);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+    transition: 0.5s ease-in-out;
+    .clearfix;
+
+    .none;
+    &.on {
+        .db;
+    }
+    .pf;
+    .u-close {
+        // .pa;.rb(0);
+        .fr;
+        background-color: @color;
+        .fz(13px);
+        padding: 5px 10px;
+        i {
+            .mr(3px);
+        }
+        .pointer;
+    }
+
+    .c-header-search {
+        float: none;
+        .w(auto);
+        margin: 0 20px 10px 20px;
+        box-sizing: border-box;
+        padding: 0;
+        .none;
+    }
+
+    .u-list {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        height: 520px;
+        padding: 20px;
+        .clearfix;
+        overflow: auto;
+
+        .scrollbar(4px, #555);
+    }
+
+    .u-list__item {
+        .fl;
+        .mb(10px);
+        width: 160px;
+        padding: 0 20px;
+        flex-grow: 0;
+    }
+
+    .u-group {
+        margin-bottom: 5px;
+        .pr;
+    }
+
+    .u-group-icon {
+        .size(18px, 18px);
+        .pa;
+        left: -25px;
+    }
+
+    .u-group-name {
+        .fz(14px,1.8);
+        .bold;
+        color: #59a5fc;
+        padding: 0 10px;
+    }
+
+    .u-subtitle {
+        .fz(12px,2);
+        color: #9b9b9b;
+        padding: 0 10px;
+    }
+
+    .u-content__item {
+        padding: 5px 0;
+    }
+    .u-link {
+        .db;
+        .r(2px);
+        padding: 0 10px;
+        // .mb(3px);
+        .u-txt {
+            .fz(13px,2);
+            color: #eee;
+        }
+        &:hover {
+            background-color: #3b4044;
+            .u-txt {
+                color: #fff;
+            }
+        }
+
+        &.not-client {
+            .none;
+        }
+    }
+    @media screen and (max-width: @ipad-y) {
+        .c-header-search {
+            .db;
+        }
+    }
+}
+.c-header-jx3box.isOverlay {
+    background-color: rgba(0, 0, 0, 0.85);
+}
+
+.c-jx3box-top {
+    display: flex;
+    padding: 0 10px;
+    gap: 10px;
+    .u-home {
+        background-color: #3d4044;
+        .size(30px,30px);
+        .r(50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #eee;
+        .none;
+    }
+    .c-header-search {
+        margin: 0;
+        flex: 1;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .c-header-jx3box {
+        .u-close {
+            .pa;
+            .rb(0);
+        }
+        .u-list {
+            padding-left: 0;
+            padding-right: 0;
+        }
+        height: calc(100vh - @header-height);
+    }
+    .c-jx3box-top {
+        .u-home {
+            display: flex;
+        }
+    }
+}

package/assets/css/breadcrumb.less

@@ -0,0 +1,155 @@
+.c-breadcrumb {
+    .pf;
+    top: @header-height;
+    .z(499);
+    .w(100%);
+    .h(@bread-height);
+    background-color: #fff;
+    padding: 10px;
+    box-sizing: border-box;
+    .lh(28px);
+    border-bottom: 1px solid @border-hr;
+    transition: 0.5s ease-in-out;
+
+    .u-channel {
+        .fl;
+        span {
+            .bold;
+            color: @color;
+        }
+        .mr(22px);
+        // padding:10px;
+    }
+    .u-channel-logo {
+        .fl;
+        .size(28px);
+        .mr(10px);
+        box-sizing: border-box;
+        svg {
+            .size(100%);
+            fill: @bg-black;
+            box-sizing: border-box;
+        }
+    }
+
+    .u-channel:hover {
+        .u-title {
+            color: @darkblue;
+        }
+        .u-channel-logo svg {
+            fill: @darkblue;
+        }
+    }
+
+    .c-crumb {
+        .fl;
+        .mr(20px);
+    }
+
+    .el-tabs {
+        position: absolute;
+        left: 140px;
+        top: 0;
+        right: 220px;
+        bottom: 0;
+
+        .el-tabs__header {
+            margin: 0;
+        }
+
+        .el-tabs__item {
+            .h(48px);
+            .lh(48px);
+        }
+
+        .el-tabs__nav-wrap::after {
+            .none;
+        }
+    }
+
+    .u-publish,
+    .u-admin,
+    .u-feedback {
+        .fr;
+        // .pa;.rt(8px,8px);
+        padding: 8px 18px;
+        margin-top: -2px;
+    }
+
+    .u-admin,
+    .u-feedback {
+        .mr(10px);
+        .ml(0);
+    }
+
+    .u-menu {
+        .pa;
+        .lt(0);
+        .h(28px);
+        padding: 10px;
+        .none;
+        .pointer;
+
+        svg {
+            .h(29px);
+            fill: @color;
+        }
+
+        .on {
+            fill: @primary;
+        }
+    }
+
+    .u-op {
+        .pa;
+        .rt(10px);
+    }
+}
+.c-breadcrumb.isOverlay {
+    background-color: rgba(255, 255, 255, 0.85);
+}
+
+@media screen and (max-width: @ipad) {
+    .c-breadcrumb {
+        padding-left: 40px;
+
+        &.withoutLeft {
+            padding-left: 10px;
+        }
+        .u-menu {
+            .db;
+        }
+        .u-channel-logo {
+            .none;
+        }
+        .u-channel.on {
+            .u-channel-logo {
+                .db;
+            }
+        }
+        .u-op-public {
+            .none;
+        }
+        .el-tabs {
+            right: 0;
+        }
+        .c-crumb {
+            float: none;
+            white-space: nowrap;
+            overflow: auto;
+        }
+    }
+}
+@media print {
+    .c-breadcrumb {
+        .none;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .env-app {
+        .c-breadcrumb {
+            .none;
+        }
+    }
+}