@arkxos/arkos-system 0.1.0

package/src/assets/style/global/red.css

@@ -0,0 +1,83 @@
+:root {
+    /* 覆盖el样式 */
+    --el-color-primary: #dd4b39 !important;
+    --el-color-primary-light-1: #e05d4c !important;
+    --el-color-primary-light-2: #e36f60 !important;
+    --el-color-primary-light-3: #e78174 !important;
+    --el-color-primary-light-4: #ea9388 !important;
+    --el-color-primary-light-5: #eea59c !important;
+    --el-color-primary-light-6: #f1b7af !important;
+    --el-color-primary-light-7: #f4c9c3 !important;
+    --el-color-primary-light-8: #f8dbd7 !important;
+    --el-color-primary-light-9: #fbedeb !important;
+    --el-color-primary-dark-1: #c64333 !important;
+    --el-color-primary-dark-2: #b03c2d !important;
+    --el-color-primary-dark-3: #9a3427 !important;
+    --el-color-primary-dark-4: #842d22 !important;
+    --el-color-primary-dark-5: #6e251c !important;
+    --el-color-primary-dark-6: #581e16 !important;
+    --el-color-primary-dark-7: #421611 !important;
+    --el-color-primary-dark-8: #2c0e0b !important;
+    --el-color-primary-dark-9: #160705 !important;
+
+    /* 页面样式 */
+    --page-header: var(--el-color-primary);
+    --page-background: #ffffff;
+
+    /* 进度条样式 */
+    --nprogress-background: #07101a;
+
+    /* 加载中样式 */
+    --loading-border: #ebeef5;
+    --loading-background: rgba(0, 0, 0, 0);
+    --loading-spinner-background: #ffffff;
+    --loading-color: #767676;
+    --loading-text: #303133;
+
+    /* 头像颜色 */
+    --avatar-color: var(--el-color-primary);
+
+    /* 表单样式 */
+    --form-label-color: #333;
+    --select-tag-color: #606266;
+    --select-disabled-tag-background: #606266;
+    --radio-disabled-label-color: #606266;
+    --radio-disabled-checked-background: #333;
+    --checkbox-label-color: #606266;
+    --checkbox-disabled-checked-border: #333;
+    --input-disabled-color: #606266;
+    --textarea-disabled-shadow-color: #dcdfe6;
+
+    /* 表格样式 */
+    --table-color: #000;
+    --table-thead-color: #333;
+    --table-thead-background: var(--el-color-primary-light-8);
+    --table-tbody-hover-background: var(--el-color-primary-light-9);
+    --table-tbody-selected-background: var(--el-color-primary-light-9);
+    --table-border-color: #b4b4b4;
+    --table-setting-icon-color: var(--el-color-primary);
+    --table-fullscreen-icon-color: var(--el-color-primary);
+
+    /* 弹窗样式 */
+    --popper-shadow-color1: rgba(14, 30, 37, 0.12);
+    --popper-shadow-color2: rgba(14, 30, 37, 0.32);
+    --dialog-header-color: #ffffff;
+    --dialog-header-close-color: #ffffff;
+    --dialog-header-button-color: #ffffff;
+    --dialog-header-background: var(--el-color-primary);
+    --dialog-header-border-bottom: #e8e8e8;
+    --dialog-footer-border-top: #e8e8e8;
+    --drawer-header-color: #ffffff;
+    --drawer-header-close-color: #ffffff;
+    --drawer-header-button-color: #ffffff;
+    --drawer-header-background: var(--el-color-primary);
+    --drawer-header-border-bottom: #e8e8e8;
+    --drawer-footer-border-top: #e8e8e8;
+
+    /* 下拉菜单 */
+    --dropdown-menu-divided: #ebeef5;
+
+    /* 树箭头收缩样式 */
+    --caret-left-color: #ffffff;
+    --caret-right-color: #ffffff;
+}

package/src/assets/style/main.css

@@ -0,0 +1,608 @@
+i.fa {
+    min-width: 11px;
+    min-height: 11px;
+}
+
+#nprogress .bar {
+    background: var(--nprogress-background) !important;
+}
+
+.el-select .el-tag {
+    font-size: 14px;
+    color: var(--select-tag-color) !important;
+}
+.el-select .el-select__wrapper.is-disabled .el-tag {
+    color: white!important;
+    background-color: #909399;
+}
+.el-input.is-disabled,
+.el-input.is-disabled .el-input__inner,
+.el-select .el-select__wrapper.is-disabled,
+.el-select .el-select__wrapper.is-disabled .el-tag,
+.el-textarea.is-disabled .el-textarea__inner,
+.el-radio.is-disabled,
+.el-radio__input.is-disabled .el-radio__inner,
+.el-radio__input.is-disabled .el-radio__inner::after,
+.el-radio__input.is-disabled+span.el-radio__label,
+.el-checkbox.is-disabled,
+.el-checkbox__input.is-disabled .el-checkbox__inner,
+.el-checkbox__input.is-disabled .el-checkbox__inner::after,
+.el-checkbox__input.is-disabled+span.el-checkbox__label {
+    cursor: default!important;
+}
+.el-select__selected-item {
+    user-select: auto;
+}
+.el-button:focus-visible {
+    outline: unset!important;
+}
+.el-select__wrapper.is-disabled .el-select__selected-item,
+.el-select__wrapper.is-disabled .el-tag,
+.el-radio__input.is-disabled+span.el-radio__label {
+    color: var(--radio-disabled-label-color) !important;
+}
+
+.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+    background-color: var(--radio-disabled-checked-background) !important;
+}
+
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border-color: var(--checkbox-disabled-checked-border) !important;
+}
+
+.el-form-item__label {
+    color: var(--form-label-color) !important;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-checkbox,
+.el-checkbox__label {
+    color: var(--checkbox-label-color) !important;
+}
+
+.el-input.is-disabled .el-input__inner {
+    -webkit-text-fill-color: var(--input-disabled-color) !important;
+}
+
+.el-input--small .el-input__inner,
+.el-select--small .el-select__selected-item,
+.el-select--small .el-select__placeholder {
+    font-size: 13px;
+}
+
+.el-textarea.is-disabled .el-textarea__inner:hover {
+    box-shadow: 0 0 0 1px var(--textarea-disabled-shadow-color) inset!important;
+}
+
+.el-table {
+    color: var(--table-color) !important;
+}
+
+.el-table thead {
+    color: var(--table-thead-color) !important;
+}
+
+.el-table th.el-table__cell {
+    background-color: var(--table-thead-background) !important;
+}
+
+.el-table tr:hover td {
+    background: var(--table-tbody-hover-background) !important;
+}
+
+.el-table tr.is-selected td {
+    background: var(--table-tbody-selected-background) !important;
+}
+
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+    border-bottom-color: var(--table-border-color) !important;
+}
+
+.el-table--border .el-table__inner-wrapper::after,
+.el-table--border::after,
+.el-table--border::before,
+.el-table__inner-wrapper::before,
+.el-table__border-left-patch {
+    background-color: var(--table-border-color) !important;
+}
+
+.el-table--border .el-table__cell {
+    border-right-color: var(--table-border-color) !important;
+}
+
+.el-table .el-table__header th.el-table__cell .cell {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.el-table th.el-table__cell .cell {
+    font-weight: 800!important;
+    line-height: 16px !important;
+    padding: 10px 5px!important;
+}
+
+.el-table .el-table__cell {
+    padding: 5px 0!important;
+}
+
+.el-table .el-table__footer-wrapper tfoot td.el-table__cell {
+    color: var(--table-tfooter-color);
+}
+
+.el-table td .cell {
+    line-height: 32px!important;
+    display: flex;
+    align-items: center;
+}
+
+.el-table td .cell:has(.cc-affix) {
+    flex-direction: column;
+}
+
+.el-table td.is-left .cell {
+    justify-content: start;
+}
+
+.el-table td.is-center .cell {
+    justify-content: center;
+}
+
+.el-table td.is-right .cell {
+    justify-content: end;
+}
+
+.el-table .overflow-ellipsis {
+    height: 32px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    white-space: pre;
+}
+.el-table .el-scrollbar__view {
+    height: inherit;
+}
+.el-table .el-table__empty-block {
+    display: flex;
+    flex-direction: column;
+}
+.el-table .el-table__empty-block:has(img) {
+    min-height: 200px;
+}
+.el-row {
+    padding: 0!important;
+}
+
+.table-box {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+}
+
+.edit-data-table {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.edit-data-table .cell {
+    padding: 0!important;
+    line-height: 30px!important;
+}
+
+.edit-data-table .cell .el-form-item__content {
+    line-height: 30px!important;
+}
+
+.edit-data-table td.el-table__cell {
+    padding: 0!important;
+}
+
+.el-form .edit-data-table .el-form-item {
+    margin-bottom: 0!important;
+}
+
+.el-form .edit-data-table .el-form-item.is-error {
+    margin-bottom: 15px!important;
+}
+
+.el-popper.padding-10-15 {
+    padding: 10px 15px!important;
+    max-width: 700px!important;
+    font-size: 15px!important;
+    line-height: 1.5!important;
+    white-space: pre-wrap!important;
+    word-wrap: break-word!important;
+    box-shadow: var(--popper-shadow-color1) 0 2px 4px 0, var(--popper-shadow-color2) 0 2px 16px 0;
+}
+
+.el-popper.padding-10-15 div:not(.el-popper__arrow):first-child {
+    max-height: 400px;
+    overflow-x: auto;
+    display: block;
+}
+
+.el-popper.padding-10-15 span:not(.el-popper__arrow):first-child {
+    max-height: 400px;
+    overflow-x: auto;
+    display: block;
+}
+
+.el-overlay-dialog {
+    display: flex!important;
+    flex-direction: column!important;
+    justify-content: center!important;
+    vertical-align: middle!important;
+}
+
+.el-dialog {
+    margin-top: 0!important;
+    margin-bottom: 0!important;
+    max-height: calc(85vh)!important;
+    max-width: calc(100% - 30px)!important;
+    display: flex!important;
+    flex-direction: column!important;
+    display: -ms-flexbox!important;
+    box-sizing: border-box!important;
+}
+
+.el-dialog.is-fullscreen {
+    --el-dialog-width: 100%!important;
+    --el-dialog-margin-top: 0!important;
+    margin-bottom: 0!important;
+    height: 100%!important;
+    max-height: 100vh!important;
+    max-width: 100vw!important;
+    overflow: auto!important;
+}
+
+.el-dialog .el-dialog__header {
+    background-color: var(--dialog-header-background) !important;
+    border-bottom: 1px solid var(--dialog-header-border-bottom) !important;
+    padding: 15px 20px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin-right: 0 !important;
+}
+.el-dialog .el-dialog__header .el-dialog__title {
+    flex-grow: 1;
+    color: var(--dialog-header-color);
+}
+.el-dialog .el-dialog__header .el-dialog__headerbtn {
+    position: unset;
+    height: 16px!important;
+    width: 16px!important;
+}
+.el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
+    color: var(--dialog-header-close-color);
+}
+.el-dialog.no-header>.el-dialog__header {
+    display: none!important;
+}
+.el-dialog.no-scroll>.el-dialog__body {
+    overflow: hidden!important;
+}
+.el-dialog .el-dialog__body {
+    padding: 20px;
+    min-height: 20vh!important;
+    max-height: 85vh!important;
+    flex: 1!important;
+    -ms-flex: 1 1 auto!important;
+    overflow-y: auto!important;
+    overflow-x: hidden!important;
+}
+.el-dialog.is-fullscreen .el-dialog__body {
+    max-height: 100vh!important;
+}
+.el-dialog.no-padding .el-dialog__body {
+    padding: 0!important;
+}
+.el-dialog.padding-10 .el-dialog__body {
+    padding: 10px!important;
+}
+.el-dialog .el-dialog__body > .el-form, .el-dialog .el-dialog__body .data-form {
+    padding: 0 70px 0 0!important;
+}
+.el-dialog .el-dialog__body > .el-form.no-padding {
+    padding: 0!important;
+}
+.el-dialog.batch-dialog .el-dialog__body > .el-form {
+    padding: 0!important;
+}
+.el-dialog.batch-dialog .el-table th .cell {
+    padding: 10px 0!important;
+    line-height: 1.2!important;
+}
+.el-dialog.batch-dialog .el-table .cell {
+    padding: 0!important;
+    line-height: 30px!important;
+}
+.el-dialog.batch-dialog .el-table .el-table__cell {
+    padding: 0!important;
+}
+.el-dialog.batch-dialog .el-table .cell .el-form-item {
+    margin-bottom: 0!important;
+}
+.el-dialog.batch-dialog .el-table .cell .el-form-item.is-error {
+    margin-bottom: 15px!important;
+}
+.el-dialog .el-dialog__footer {
+    text-align: right!important;
+    padding: 12px 10px 10px 10px!important;
+    border-top: 1px solid var(--dialog-footer-border-top) !important;
+}
+.el-dialog .edit-table.el-table td .cell {
+    padding: 0!important;
+    line-height: 30px!important;
+}
+.el-dialog .edit-table.el-table td.el-table__cell {
+    padding: 0!important;
+}
+
+.el-dialog .edit-table.el-table .cell .el-form-item {
+    width: 100%;
+    margin-bottom: 0!important;
+}
+
+.el-dialog .edit-table.el-table .cell .el-form-item.is-error {
+    margin-bottom: 15px!important;
+}
+
+.edit-table.el-table td .cell {
+    padding: 0!important;
+    line-height: 30px!important;
+}
+.edit-table.el-table td.el-table__cell {
+    padding: 0!important;
+}
+
+.edit-table.el-table .cell .el-form-item {
+    width: 100%;
+    margin-bottom: 0!important;
+}
+
+.edit-table.el-table .cell .el-form-item.is-error {
+    margin-bottom: 15px!important;
+}
+.el-drawer.no-padding .el-drawer__body {
+    padding: 0!important;
+}
+.el-drawer .el-drawer__header {
+    background-color: var(--drawer-header-background) !important;
+    border-bottom: 1px solid var(--drawer-header-border-bottom) !important;
+    padding: 15px 20px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin-right: 0 !important;
+    margin-bottom: 0!important;
+}
+.el-drawer .el-drawer__header .el-drawer__close {
+    color: var(--drawer-header-close-color);
+}
+.el-drawer .el-drawer__footer {
+    text-align: right!important;
+    padding: 12px 10px 10px 10px!important;
+    border-top: 1px solid var(--drawer-footer-border-top) !important;
+}
+.clearfix:after {
+    content: '';
+    display: block;
+    height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.el-form .el-select {
+    width: 100%!important;
+}
+
+.el-form .el-form-item {
+    margin-bottom: 15px!important;
+}
+
+.el-form .el-date-editor.el-input {
+    display: flex!important;
+    width: 100%!important;
+}
+
+.form-tool .el-form .el-form-item {
+    margin-bottom: 5px!important;
+}
+
+.right-icon {
+    margin-right: 8px!important;
+}
+
+.el-dropdown-menu__item--divided {
+    border-color: var(--dropdown-menu-divided) !important;
+}
+
+.el-scrollbar__bar.is-vertical {
+    width: 9px!important;
+}
+
+.el-scrollbar__bar.is-horizontal {
+    height: 9px!important;
+    text-align: left!important;
+}
+
+::-webkit-scrollbar {
+    width: 9px!important;
+    height: 9px!important;
+}
+
+::-webkit-scrollbar-thumb {
+    width: 9px!important;
+    height: 9px!important;
+    border-radius: 9px!important;
+    visibility: hidden!important;
+    background-color: rgba(144, 147, 153, .1)!important;
+}
+
+:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, .3)!important;
+    visibility: visible!important;
+}
+
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active {
+    background-color: rgba(144, 147, 153, .5)!important;
+    visibility: visible!important;
+}
+
+.page-box {
+    height: 100%;
+}
+
+.page-box .el-main {
+    padding: 0!important;
+}
+
+.page-aside {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0 1px 1px 0;
+    border-right: 1px solid rgb(153, 153, 153);
+    background-color: #ffffff;
+    margin-right: 10px;
+}
+
+.page-aside-grow {
+    margin-top: 10px;
+    display: flex;
+    height: 100px;
+    flex-grow: 1;
+    overflow: scroll;
+}
+
+.page-aside-grow .el-tree {
+    flex-grow: 1!important;
+}
+
+.page-main {
+    display: flex;
+}
+
+.page-container {
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    padding: 10px!important;
+    flex-grow: 1;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    overflow: auto!important;
+}
+
+.page-container .el-main:has(.el-table) {
+    padding: 0!important;
+    display: flex;
+    flex-direction: column;
+}
+
+.page-container .table-box {
+    flex-grow: 1;
+}
+
+.fit-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.fit-box {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.fit-table {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.fit-table .el-table__inner-wrapper {
+    height: 100px;
+    flex-grow: 1;
+}
+
+.fit-form {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.fit-form-row {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.fit-form-col {
+    flex-grow: 1;
+    display: flex!important;
+    flex-direction: column;
+}
+
+.fit-form-item {
+    height: 1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.fit-tab .el-tabs__content {
+    height: 100px;
+    flex-grow: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.el-tree__empty-block {
+    text-wrap: unset;
+    white-space: nowrap;
+    min-width: 100px;
+}
+.full-height {
+    height: 100%;
+}
+.full-height .el-tabs__content {
+    height: 100%;
+}
+
+.spinner {
+    animation: spin 2s infinite linear;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.caret-left {
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid var(--caret-left-color);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+}
+
+.caret-right {
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--caret-right-color);
+    border-right: 6px solid transparent;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+}

package/src/assets/style/menu/black.css

@@ -0,0 +1,9 @@
+:root {
+    /* 菜单样式 */
+    --menu-background: #202c38;
+    --menu-item-background: #24323f;
+    --menu-item-color: #d4d7da;
+    --menu-item-hover: #141c23;
+    --menu-item-active: #141c23;
+    --menu-item-active-color: #ffff;
+}

package/src/assets/style/menu/default.css

@@ -0,0 +1,9 @@
+:root {
+    /* 菜单样式 */
+    --menu-background: #122A45;
+    --menu-item-background: #00305d;
+    --menu-item-color: #b8c7d6;
+    --menu-item-hover: #00417e;
+    --menu-item-active: #0085f6;
+    --menu-item-active-color: #ffff;
+}

package/src/assets/style/menu/grey.css

@@ -0,0 +1,9 @@
+:root {
+    /* 菜单样式 */
+    --menu-background: #f9fafc;
+    --menu-item-background: #f9fafc;
+    --menu-item-color: #777777;
+    --menu-item-hover: rgb(240, 245, 255);
+    --menu-item-active: var(--el-color-primary-light-9);
+    --menu-item-active-color: var(--el-color-primary-dark-1);
+}