kate522
0e4e4670dd
The drawer only had a pay toggle and one bare price field, so several options from the front-submit pay card could not be set at all. - New PayPanel mirrors the front-submit card: cash / points segment (points only when the site has credits enabled), price or points with the currency suffix, and VIP prices. VIP fields render only when the site asks for manual VIP pricing and the level is enabled, and now submit vip1_points / vip2_points as well. - New ResourceDialog restores "添加资源": download URL with an attachment picker, resource note (extraction code), copy name / value, custom button label and button style swatches. Pasting a net-disk share link splits the URL and the extraction code. - pay.ts sends every download display field and tags net-disk links. - CreatorRest exposes vipManual / vip*Enabled / vip names / pointsEnabled / downloadClasses / currencySymbol, and the readback carries extractCode / copyKey / copyVal / class / attachmentId. - Fixes an existing data loss: snapshot_from_payload dropped copy_key, copy_val, class and attachment_id, so approving a revision erased them. Files split to stay within budget: publish-drawer 332 lines, pay-panel 343, resource-dialog 254. 886 widget-system tests pass.
514 lines
7.6 KiB
SCSS
514 lines
7.6 KiB
SCSS
@use './tokens' as *;
|
|
|
|
|
|
|
|
.jio-creator-drawer {
|
|
position: fixed;
|
|
z-index: 500;
|
|
inset: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.jio-creator-drawer__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 0;
|
|
background: rgba(23, 34, 31, 0.32);
|
|
cursor: default;
|
|
}
|
|
|
|
.jio-creator-drawer__panel {
|
|
position: relative;
|
|
display: flex;
|
|
width: min(460px, 100%);
|
|
height: 100%;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
box-shadow: -20px 0 60px rgba(20, 32, 28, 0.16);
|
|
}
|
|
|
|
.jio-creator-drawer__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid $line;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.jio-creator-drawer__close {
|
|
border: 0;
|
|
background: transparent;
|
|
color: $ink-soft;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.jio-creator-drawer__body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 24px 32px;
|
|
}
|
|
|
|
.jio-creator-drawer__note {
|
|
margin: 0 0 20px;
|
|
padding: 12px 14px;
|
|
border-left: 3px solid $accent;
|
|
background: #f2f7f4;
|
|
color: $ink-soft;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.jio-creator-drawer__foot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
|
|
border-top: 1px solid $line;
|
|
background: #fff;
|
|
|
|
.jio-creator-primary {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.jio-creator-drawer__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.jio-creator-drawer__captcha {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.jio-creator-field {
|
|
margin-bottom: 26px;
|
|
|
|
> h3 {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: $ink;
|
|
}
|
|
}
|
|
|
|
.jio-creator-muted {
|
|
margin: 0;
|
|
color: $ink-soft;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.jio-creator-error {
|
|
margin: 8px 0 0;
|
|
color: $warn;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.jio-creator-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.jio-creator-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid $line;
|
|
border-radius: 999px;
|
|
color: $ink-soft;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
&.is-active {
|
|
border-color: $accent;
|
|
background: #eef5f2;
|
|
color: $accent-strong;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.jio-creator-inline {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
|
|
input[type="text"],
|
|
input:not([type]) {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
input[type="text"],
|
|
input:not([type]) {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid $line;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.jio-creator-switch {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
|
|
h3 {
|
|
margin: 0 0 4px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.jio-creator-toggle {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
width: 42px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
background: #d6dfda;
|
|
transition: background 0.18s ease;
|
|
|
|
&::after {
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 3px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
content: "";
|
|
transition: transform 0.18s ease;
|
|
}
|
|
}
|
|
|
|
input:checked + span {
|
|
background: $accent;
|
|
}
|
|
|
|
input:checked + span::after {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
input:focus-visible + span {
|
|
outline: 2px solid $accent;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.jio-creator-pay {
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
border: 1px solid $line;
|
|
border-radius: 10px;
|
|
background: #fcfdfc;
|
|
}
|
|
|
|
.jio-creator-input {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
font-size: 13px;
|
|
|
|
input {
|
|
width: 140px;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid $line;
|
|
border-radius: 8px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* 价格输入：带货币 / 积分后缀，输入区仍保持右对齐的数字。 */
|
|
.jio-creator-price {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: $ink-soft;
|
|
|
|
em {
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
input {
|
|
width: 118px;
|
|
}
|
|
}
|
|
|
|
/* 现金 / 积分切换：分段控件，比原生 radio 更贴近前台投稿卡片。 */
|
|
.jio-creator-segment {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
padding: 3px;
|
|
border-radius: 9px;
|
|
background: #eef1f0;
|
|
|
|
button {
|
|
min-height: 30px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: $ink-soft;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
|
|
&:hover {
|
|
color: $accent-strong;
|
|
}
|
|
|
|
&.is-active {
|
|
background: #fff;
|
|
color: $accent-strong;
|
|
box-shadow: 0 1px 3px rgba(24, 39, 34, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.jio-creator-vip-prices {
|
|
margin-top: 4px;
|
|
padding-top: 6px;
|
|
border-top: 1px dashed $line;
|
|
}
|
|
|
|
.jio-creator-cover {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 2 / 1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.jio-creator-cover-empty {
|
|
display: flex;
|
|
min-height: 120px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
border: 1px dashed $line;
|
|
border-radius: 10px;
|
|
background: #fafcfb;
|
|
color: $ink-soft;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.jio-creator-attachments {
|
|
margin-top: 18px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid $line;
|
|
}
|
|
|
|
.jio-creator-attachments__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
|
|
h4 {
|
|
margin: 0 0 2px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.jio-creator-muted {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.jio-creator-attachments__actions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.jio-creator-upload {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid $line;
|
|
border-radius: 8px;
|
|
color: $accent-strong;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.jio-creator-files {
|
|
margin: 12px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f0f4f1;
|
|
font-size: 13px;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: $ink-soft;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* 资源名本身可点开编辑器，删除按钮单独占右侧。 */
|
|
.jio-creator-files__name {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: $accent-strong;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
i {
|
|
flex: 0 0 auto;
|
|
color: $accent;
|
|
}
|
|
}
|
|
|
|
.jio-creator-files__remove {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
color: #9aa2a0 !important;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: $warn !important;
|
|
}
|
|
}
|
|
|
|
.jio-creator-reuse {
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
color: $ink-soft;
|
|
}
|
|
|
|
ul {
|
|
margin: 10px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
button {
|
|
margin-left: auto;
|
|
border: 1px solid $line;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.jio-creator-link {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--jc-ink-soft, #{$ink-soft});
|
|
font-size: 13px;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|