增加渠道信息
This commit is contained in:
yml2213
+77
-1
@@ -2,6 +2,8 @@ import './style.css';
|
||||
import { ClipboardGetText } from '../wailsjs/runtime/runtime.js';
|
||||
|
||||
const storageKey = 'hfb-upload-settings';
|
||||
const customChannelValue = '__custom__';
|
||||
const sourceChannelOptions = ['咸鱼', '淘宝', '京东', 'QQ', '微信'];
|
||||
|
||||
const app = document.querySelector('#app');
|
||||
|
||||
@@ -37,6 +39,26 @@ app.innerHTML = `
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<section class="channel-panel" aria-labelledby="sourceChannelTitle">
|
||||
<span class="channel-title" id="sourceChannelTitle">来源渠道</span>
|
||||
<div class="channel-options">
|
||||
${sourceChannelOptions
|
||||
.map(
|
||||
(item) => `
|
||||
<label class="channel-choice">
|
||||
<input type="radio" name="sourceChannelOption" value="${item}" />
|
||||
<span>${item}</span>
|
||||
</label>`
|
||||
)
|
||||
.join('')}
|
||||
<label class="channel-choice">
|
||||
<input type="radio" name="sourceChannelOption" value="${customChannelValue}" />
|
||||
<span>自定义</span>
|
||||
</label>
|
||||
<input id="customChannel" class="custom-channel" autocomplete="off" placeholder="输入自定义渠道" hidden />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="actions">
|
||||
<label class="button secondary">
|
||||
打开文件
|
||||
@@ -65,6 +87,8 @@ const elements = {
|
||||
status: document.querySelector('#status'),
|
||||
server: document.querySelector('#server'),
|
||||
uploader: document.querySelector('#uploader'),
|
||||
channelOptions: [...document.querySelectorAll('input[name="sourceChannelOption"]')],
|
||||
customChannel: document.querySelector('#customChannel'),
|
||||
secret: document.querySelector('#secret'),
|
||||
timeout: document.querySelector('#timeout'),
|
||||
data: document.querySelector('#data'),
|
||||
@@ -100,6 +124,7 @@ function currentSettings() {
|
||||
return {
|
||||
server: elements.server.value.trim(),
|
||||
uploader: elements.uploader.value.trim(),
|
||||
sourceChannel: selectedSourceChannel(),
|
||||
secret: elements.secret.value.trim(),
|
||||
timeout: elements.timeout.value.trim() || '15s',
|
||||
};
|
||||
@@ -116,6 +141,47 @@ function collectForm() {
|
||||
};
|
||||
}
|
||||
|
||||
function selectedSourceChannel() {
|
||||
const selected = elements.channelOptions.find((input) => input.checked);
|
||||
if (!selected) {
|
||||
return '';
|
||||
}
|
||||
if (selected.value === customChannelValue) {
|
||||
return elements.customChannel.value.trim();
|
||||
}
|
||||
return selected.value.trim();
|
||||
}
|
||||
|
||||
function applySourceChannelSetting(value) {
|
||||
const sourceChannel = String(value || '').trim();
|
||||
if (sourceChannelOptions.includes(sourceChannel)) {
|
||||
setSelectedChannelOption(sourceChannel);
|
||||
elements.customChannel.value = '';
|
||||
} else if (sourceChannel === '') {
|
||||
setSelectedChannelOption('');
|
||||
elements.customChannel.value = '';
|
||||
} else {
|
||||
setSelectedChannelOption(customChannelValue);
|
||||
elements.customChannel.value = sourceChannel;
|
||||
}
|
||||
syncCustomChannel();
|
||||
}
|
||||
|
||||
function setSelectedChannelOption(value) {
|
||||
elements.channelOptions.forEach((input) => {
|
||||
input.checked = input.value === value;
|
||||
});
|
||||
}
|
||||
|
||||
function syncCustomChannel() {
|
||||
const selected = elements.channelOptions.find((input) => input.checked);
|
||||
const isCustom = selected?.value === customChannelValue;
|
||||
elements.customChannel.hidden = !isCustom;
|
||||
if (!isCustom) {
|
||||
elements.customChannel.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function readClipboardText() {
|
||||
try {
|
||||
const text = await ClipboardGetText();
|
||||
@@ -142,13 +208,23 @@ async function init() {
|
||||
const settings = { ...defaults, ...saved };
|
||||
elements.server.value = settings.server || 'http://127.0.0.1:8080';
|
||||
elements.uploader.value = settings.uploader || '';
|
||||
applySourceChannelSetting(settings.sourceChannel || '');
|
||||
elements.secret.value = settings.secret || '';
|
||||
elements.timeout.value = settings.timeout || '15s';
|
||||
elements.data.placeholder = await api.SampleText();
|
||||
|
||||
[elements.server, elements.uploader, elements.secret, elements.timeout].forEach((input) => {
|
||||
[elements.server, elements.uploader, elements.secret, elements.timeout, elements.customChannel].forEach((input) => {
|
||||
input.addEventListener('input', saveSettings);
|
||||
});
|
||||
elements.channelOptions.forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
syncCustomChannel();
|
||||
saveSettings();
|
||||
if (input.value === customChannelValue) {
|
||||
elements.customChannel.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
elements.fileInput.addEventListener('change', async (event) => {
|
||||
|
||||
+97
-1
@@ -33,7 +33,7 @@ textarea {
|
||||
margin: 0 auto;
|
||||
padding: 22px 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
grid-template-rows: auto auto auto auto minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -131,6 +131,78 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.channel-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-title {
|
||||
flex: 0 0 auto;
|
||||
font-weight: 700;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.channel-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-choice {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.channel-choice input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.channel-choice span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 76px;
|
||||
height: 42px;
|
||||
margin: 0;
|
||||
padding: 0 18px;
|
||||
border: 1px solid #d7dce5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #374151;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.channel-choice input:checked + span {
|
||||
border-color: #2563eb;
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.channel-choice input:focus-visible + span {
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
|
||||
}
|
||||
|
||||
.custom-channel {
|
||||
width: min(220px, 100%);
|
||||
}
|
||||
|
||||
.custom-channel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -242,6 +314,30 @@ textarea:focus {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.channel-panel {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.channel-options {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-choice {
|
||||
flex: 1 1 calc(33.333% - 8px);
|
||||
}
|
||||
|
||||
.channel-choice span {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.custom-channel {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ export namespace main {
|
||||
uploader: string;
|
||||
secret: string;
|
||||
timeout: string;
|
||||
sourceChannel: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new DefaultSettings(source);
|
||||
@@ -16,6 +17,7 @@ export namespace main {
|
||||
this.uploader = source["uploader"];
|
||||
this.secret = source["secret"];
|
||||
this.timeout = source["timeout"];
|
||||
this.sourceChannel = source["sourceChannel"];
|
||||
}
|
||||
}
|
||||
export class UploadForm {
|
||||
@@ -23,6 +25,7 @@ export namespace main {
|
||||
uploader: string;
|
||||
secret: string;
|
||||
timeout: string;
|
||||
sourceChannel: string;
|
||||
data: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
@@ -35,6 +38,7 @@ export namespace main {
|
||||
this.uploader = source["uploader"];
|
||||
this.secret = source["secret"];
|
||||
this.timeout = source["timeout"];
|
||||
this.sourceChannel = source["sourceChannel"];
|
||||
this.data = source["data"];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user