@qxs-bns/components 0.0.1

package/theme-chalk/index.css

@@ -0,0 +1,499 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+/* stylelint-disable no-duplicate-selectors */
+:root {
+  --qxs-color-white: #fff;
+  --qxs-color-black: #000;
+  --qxs-color-primary-rgb: 255;
+  --qxs-color-success-rgb: 58;
+  --qxs-color-warning-rgb: 60;
+  --qxs-color-danger-rgb: 108;
+  --qxs-color-error-rgb: 108;
+  --qxs-color-info-rgb: 153;
+  --qxs-font-size-extra-large: 20px;
+  --qxs-font-size-large: 18px;
+  --qxs-font-size-medium: 16px;
+  --qxs-font-size-base: 14px;
+  --qxs-font-size-small: 13px;
+  --qxs-font-size-extra-small: 12px;
+  --qxs-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  --qxs-font-weight-primary: 500;
+  --qxs-font-line-height-primary: 24px;
+  --qxs-index-normal: 1;
+  --qxs-index-top: 1000;
+  --qxs-index-popper: 2000;
+  --qxs-border-radius-base: 4px;
+  --qxs-border-radius-small: 2px;
+  --qxs-border-radius-round: 20px;
+  --qxs-border-radius-circle: 100%;
+  --qxs-transition-duration: 0.3s;
+  --qxs-transition-duration-fast: 0.2s;
+  --qxs-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --qxs-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+  --qxs-transition-all: all var(--qxs-transition-duration) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-fade: opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-md-fade: transform var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier), opacity var(--qxs-transition-duration) var(--qxs-transition-function-fast-bezier);
+  --qxs-transition-fade-linear: opacity var(--qxs-transition-duration-fast) linear;
+  --qxs-transition-border: border-color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-box-shadow: box-shadow var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-transition-color: color var(--qxs-transition-duration-fast) var(--qxs-transition-function-ease-in-out-bezier);
+  --qxs-component-size-large: 40px;
+  --qxs-component-size: 32px;
+  --qxs-component-size-small: 24px;
+}
+
+:root {
+  color-scheme: light;
+  --qxs-color-primary: #409eff;
+  --qxs-color-primary-light-3: rgb(121.3, 187.1, 255);
+  --qxs-color-primary-light-5: rgb(159.5, 206.5, 255);
+  --qxs-color-primary-light-7: rgb(197.7, 225.9, 255);
+  --qxs-color-primary-light-8: rgb(216.8, 235.6, 255);
+  --qxs-color-primary-light-9: rgb(235.9, 245.3, 255);
+  --qxs-color-primary-dark-2: rgb(51.2, 126.4, 204);
+  --qxs-color-success: #67c23a;
+  --qxs-color-success-light-3: rgb(148.6, 212.3, 117.1);
+  --qxs-color-success-light-5: rgb(179, 224.5, 156.5);
+  --qxs-color-success-light-7: rgb(209.4, 236.7, 195.9);
+  --qxs-color-success-light-8: rgb(224.6, 242.8, 215.6);
+  --qxs-color-success-light-9: rgb(239.8, 248.9, 235.3);
+  --qxs-color-success-dark-2: rgb(82.4, 155.2, 46.4);
+  --qxs-color-warning: #e6a23c;
+  --qxs-color-warning-light-3: rgb(237.5, 189.9, 118.5);
+  --qxs-color-warning-light-5: rgb(242.5, 208.5, 157.5);
+  --qxs-color-warning-light-7: rgb(247.5, 227.1, 196.5);
+  --qxs-color-warning-light-8: rgb(250, 236.4, 216);
+  --qxs-color-warning-light-9: rgb(252.5, 245.7, 235.5);
+  --qxs-color-warning-dark-2: rgb(184, 129.6, 48);
+  --qxs-color-danger: #f56c6c;
+  --qxs-color-danger-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-danger-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-danger-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-danger-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-danger-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-danger-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-error: #f56c6c;
+  --qxs-color-error-light-3: rgb(248, 152.1, 152.1);
+  --qxs-color-error-light-5: rgb(250, 181.5, 181.5);
+  --qxs-color-error-light-7: rgb(252, 210.9, 210.9);
+  --qxs-color-error-light-8: rgb(253, 225.6, 225.6);
+  --qxs-color-error-light-9: rgb(254, 240.3, 240.3);
+  --qxs-color-error-dark-2: rgb(196, 86.4, 86.4);
+  --qxs-color-info: #909399;
+  --qxs-color-info-light-3: rgb(177.3, 179.4, 183.6);
+  --qxs-color-info-light-5: rgb(199.5, 201, 204);
+  --qxs-color-info-light-7: rgb(221.7, 222.6, 224.4);
+  --qxs-color-info-light-8: rgb(232.8, 233.4, 234.6);
+  --qxs-color-info-light-9: rgb(243.9, 244.2, 244.8);
+  --qxs-color-info-dark-2: rgb(115.2, 117.6, 122.4);
+  --qxs-bg-color: #fff;
+  --qxs-bg-color-page: #f2f3f5;
+  --qxs-bg-color-overlay: #fff;
+  --qxs-text-color-primary: #303133;
+  --qxs-text-color-regular: #606266;
+  --qxs-text-color-secondary: #909399;
+  --qxs-text-color-placeholder: #a8abb2;
+  --qxs-text-color-disabled: #c0c4cc;
+  --qxs-border-color: #dcdfe6;
+  --qxs-border-color-light: #e4e7ed;
+  --qxs-border-color-lighter: #ebeef5;
+  --qxs-border-color-extra-light: #f2f6fc;
+  --qxs-border-color-dark: #d4d7de;
+  --qxs-border-color-darker: #cdd0d6;
+  --qxs-fill-color: #f0f2f5;
+  --qxs-fill-color-light: #f5f7fa;
+  --qxs-fill-color-lighter: #fafafa;
+  --qxs-fill-color-extra-light: #fafcff;
+  --qxs-fill-color-dark: #ebedf0;
+  --qxs-fill-color-darker: #e6e8eb;
+  --qxs-fill-color-blank: #fff;
+  --qxs-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
+  --qxs-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.12);
+  --qxs-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.16);
+  --qxs-disabled-bg-color: var(--qxs-fill-color-light);
+  --qxs-disabled-text-color: var(--qxs-text-color-placeholder);
+  --qxs-disabled-border-color: var(--qxs-border-color-light);
+  --qxs-overlay-color: rgba(0, 0, 0, 0.8);
+  --qxs-overlay-color-light: rgba(0, 0, 0, 0.7);
+  --qxs-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+  --qxs-mask-color: rgba(255, 255, 255, 0.9);
+  --qxs-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+  --qxs-border-width: 1px;
+  --qxs-border-style: solid;
+  --qxs-border-color-hover: var(--qxs-text-color-disabled);
+  --qxs-border: var(--qxs-border-width) var(--qxs-border-style) var(--qxs-border-color);
+  --qxs-svg-monochrome-grey: var(--qxs-border-color);
+}
+
+/* stylelint-enable no-duplicate-selectors */
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: var(--qxs-transition-fade-linear);
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.qxs-fade-in-linear-enter-active,
+.qxs-fade-in-linear-leave-active {
+  transition: var(--qxs-transition-fade-linear);
+}
+
+.qxs-fade-in-linear-enter-from,
+.qxs-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.qxs-fade-in-enter-active,
+.qxs-fade-in-leave-active {
+  transition: all var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.qxs-fade-in-enter-from,
+.qxs-fade-in-leave-active {
+  opacity: 0;
+}
+
+.qxs-zoom-in-center-enter-active,
+.qxs-zoom-in-center-leave-active {
+  transition: all var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.qxs-zoom-in-center-enter-from,
+.qxs-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.qxs-zoom-in-top-enter-active,
+.qxs-zoom-in-top-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scaleY(1);
+  transform-origin: center top;
+}
+.qxs-zoom-in-top-enter-active[data-popper-placement^=top],
+.qxs-zoom-in-top-leave-active[data-popper-placement^=top] {
+  transform-origin: center bottom;
+}
+
+.qxs-zoom-in-top-enter-from,
+.qxs-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.qxs-zoom-in-bottom-enter-active,
+.qxs-zoom-in-bottom-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scaleY(1);
+  transform-origin: center bottom;
+}
+
+.qxs-zoom-in-bottom-enter-from,
+.qxs-zoom-in-bottom-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.qxs-zoom-in-left-enter-active,
+.qxs-zoom-in-left-leave-active {
+  opacity: 1;
+  transition: var(--qxs-transition-md-fade);
+  transform: scale(1, 1);
+  transform-origin: top left;
+}
+
+.qxs-zoom-in-left-enter-from,
+.qxs-zoom-in-left-leave-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+  transition: var(--qxs-transition-duration) height ease-in-out, var(--qxs-transition-duration) padding-top ease-in-out, var(--qxs-transition-duration) padding-bottom ease-in-out;
+}
+
+.qxs-collapse-transition-leave-active,
+.qxs-collapse-transition-enter-active {
+  transition: var(--qxs-transition-duration) max-height ease-in-out, var(--qxs-transition-duration) padding-top ease-in-out, var(--qxs-transition-duration) padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+  transition: var(--qxs-transition-duration) width ease-in-out, var(--qxs-transition-duration) padding-left ease-in-out, var(--qxs-transition-duration) padding-right ease-in-out;
+}
+
+.qxs-list-enter-active,
+.qxs-list-leave-active {
+  transition: all 1s;
+}
+
+.qxs-list-enter-from,
+.qxs-list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.qxs-list-leave-active {
+  position: absolute !important;
+}
+
+.qxs-opacity-transition {
+  transition: opacity var(--qxs-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+:root [data-fixed-calc-width] {
+  position: fixed;
+  right: 0;
+  left: 0%;
+}
+:root [data-mode=mobile] [data-fixed-calc-width] {
+  width: 100% !important;
+}
+
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) {
+  border-width: 1px;
+  border-radius: var(--qxs-border-radius-base);
+}
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 4px 4px -4px rgba(34, 47, 62, 0.07);
+}
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) .tox-sidebar-wrap {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.qxs-rich-editor__tiny-mce .tox-tinymce-aux {
+  z-index: 2500 !important;
+}
+
+.qxs-fixed-action-bar__actionbar {
+  bottom: 0;
+  z-index: 10;
+  padding: var(--qxs-fixed-action-bar-actionbar-padding);
+  text-align: center;
+  background-color: var(--qxs-bg-color, #fff);
+  box-shadow: 0 0 1px 0 var(--qxs-border-color, #f3f3f2);
+  transition: box-shadow 0.3s, var(--qxs-transition-box-shadow, #f3f3f2);
+}
+.qxs-fixed-action-bar__actionbar.is-shadow {
+  box-shadow: 0 -10px 10px -10px var(--qxs-border-color, #fff);
+}
+
+.qxs-photo-crop-tool__img-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #fafafa;
+}
+.qxs-photo-crop-tool__error-message {
+  color: red;
+}
+
+.qxs-photo-crop-tool__image {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  user-select: none;
+  object-fit: contain;
+  -webkit-user-drag: none;
+}
+
+.qxs-photo-crop-tool__crop-tool-box {
+  position: absolute;
+  width: calc(var(--qxs-photo-crop-tool-width) * 1px);
+  max-width: 100%;
+  height: calc(var(--qxs-photo-crop-tool-height) * 1px);
+  max-height: 100%;
+  aspect-ratio: var(--qxs-photo-crop-tool-aspect-ratio);
+  overflow: hidden;
+  cursor: move;
+  border: 1px dashed #fff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4); /* 扩展阴影以覆盖周围区域 */
+}
+.qxs-photo-crop-tool__crop-tool-box > div {
+  position: absolute;
+  z-index: 3;
+  width: 30%;
+  aspect-ratio: 1/1;
+  background-color: rgba(2, 2, 2, 0.01);
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+.qxs-photo-crop-tool__crop-tool-box > div:hover, .qxs-photo-crop-tool__crop-tool-box > div:active {
+  background-color: rgba(2, 2, 2, 0.5);
+}
+.qxs-photo-crop-tool__top-left {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.qxs-photo-crop-tool__top-right {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate3d(50%, -50%, 0);
+}
+
+.qxs-photo-crop-tool__bottom-right {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate3d(50%, 50%, 0);
+}
+
+.qxs-photo-crop-tool__bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+  transform: translate3d(-50%, 50%, 0);
+}
+
+.qxs-image-upload__upload-container {
+  line-height: initial;
+}
+.qxs-image-upload__upload-container .el-upload__tip-text {
+  font-size: 14px;
+  line-height: 32px;
+  color: #c8c8c8;
+}
+.qxs-image-upload__upload-container .el-image {
+  display: block;
+}
+.qxs-image-upload__upload-container .image {
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+}
+.qxs-image-upload__upload-container .image .mask {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--el-overlay-color-lighter);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.qxs-image-upload__upload-container .image .mask .actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.qxs-image-upload__upload-container .image .mask .actions span {
+  width: 50%;
+  color: var(--el-color-white);
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.1s, transform 0.1s;
+}
+.qxs-image-upload__upload-container .image .mask .actions span:hover {
+  transform: scale(1.5);
+}
+.qxs-image-upload__upload-container .image .mask .actions span .el-icon {
+  font-size: 24px;
+}
+.qxs-image-upload__upload-container .image:hover .mask {
+  opacity: 1;
+}
+.qxs-image-upload__image-upload {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.qxs-image-upload__upload-container .el-upload {
+  font-size: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger {
+  display: inline-block;
+  padding: 0;
+  font-size: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger.is-dragover {
+  border-width: 1px;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  color: var(--el-text-color-placeholder);
+  background-color: #f5f5f5;
+  transition: all 0.3s;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot:hover {
+  background-color: #eee;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot .el-icon {
+  font-size: 28px;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .image-slot p {
+  margin-top: 10px;
+  margin-bottom: 0;
+  line-height: 1em;
+  color: #5a5a5a;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress {
+  position: absolute;
+  top: 0;
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--el-overlay-color-lighter);
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress .el-progress {
+  z-index: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.qxs-image-upload__upload-container .el-upload .el-upload-dragger .progress .el-progress .el-progress__text {
+  color: var(--el-text-color-placeholder);
+}
+
+.qxs-file-upload__control .el-upload.is-drag {
+  display: inline-block;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger {
+  padding: 0;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger .el-icon--upload {
+  margin-bottom: 0;
+  font-size: 40px;
+}
+.qxs-file-upload__control .el-upload.is-drag .el-upload-dragger .el-upload__text {
+  padding: 0 6px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.qxs-file-upload__control .el-upload.is-drag.is-dragover {
+  border-width: 1px;
+}
+.qxs-file-upload__control .el-upload.is-drag .slot {
+  width: 160px;
+  height: 90px;
+}

package/theme-chalk/photo-crop-tool.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/* Element Chalk Variables */
+.qxs-photo-crop-tool__img-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #fafafa;
+}
+.qxs-photo-crop-tool__error-message {
+  color: red;
+}
+
+.qxs-photo-crop-tool__image {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  user-select: none;
+  object-fit: contain;
+  -webkit-user-drag: none;
+}
+
+.qxs-photo-crop-tool__crop-tool-box {
+  position: absolute;
+  width: calc(var(--qxs-photo-crop-tool-width) * 1px);
+  max-width: 100%;
+  height: calc(var(--qxs-photo-crop-tool-height) * 1px);
+  max-height: 100%;
+  aspect-ratio: var(--qxs-photo-crop-tool-aspect-ratio);
+  overflow: hidden;
+  cursor: move;
+  border: 1px dashed #fff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4); /* 扩展阴影以覆盖周围区域 */
+}
+.qxs-photo-crop-tool__crop-tool-box > div {
+  position: absolute;
+  z-index: 3;
+  width: 30%;
+  aspect-ratio: 1/1;
+  background-color: rgba(2, 2, 2, 0.01);
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+.qxs-photo-crop-tool__crop-tool-box > div:hover, .qxs-photo-crop-tool__crop-tool-box > div:active {
+  background-color: rgba(2, 2, 2, 0.5);
+}
+.qxs-photo-crop-tool__top-left {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.qxs-photo-crop-tool__top-right {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate3d(50%, -50%, 0);
+}
+
+.qxs-photo-crop-tool__bottom-right {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate3d(50%, 50%, 0);
+}
+
+.qxs-photo-crop-tool__bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+  transform: translate3d(-50%, 50%, 0);
+}

package/theme-chalk/rich-editor.css

@@ -0,0 +1,15 @@
+/* Element Chalk Variables */
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) {
+  border-width: 1px;
+  border-radius: var(--qxs-border-radius-base);
+}
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 4px 4px -4px rgba(34, 47, 62, 0.07);
+}
+.qxs-rich-editor__tiny-mce .tox:not(.tox-tinymce-inline) .tox-sidebar-wrap {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.qxs-rich-editor__tiny-mce .tox-tinymce-aux {
+  z-index: 2500 !important;
+}