Skip to content

Commit 8294c33

Browse files
committed
feat(MarkdownEditor): 添加上传 API 地址配置功能
新增上传 API 地址的配置选项,允许用户自定义上传 API 的地址。同时,将 API 地址保存到本地存储,以便在页面刷新后保持配置
1 parent c2f8461 commit 8294c33

File tree

1 file changed

+41
-14
lines changed

1 file changed

+41
-14
lines changed

blog-web/src/components/solid/MarkdownEditor.tsx

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,15 @@ export default function MarkdownEditor() {
3737
const [isUploading, setIsUploading] = createSignal<boolean>(false);
3838
// 上传token
3939
const [uploadToken, setUploadToken] = createSignal<string>("");
40+
// 自定义上传 API 地址
41+
const [uploadApiUrl, setUploadApiUrl] = createSignal<string>("http://121.62.28.11:40027/api/v1");
4042
// 设置弹窗显示状态
4143
const [showSettingsModal, setShowSettingsModal] = createSignal<boolean>(false);
4244
// 编辑器引用
4345
let editorRef: HTMLTextAreaElement | undefined;
4446
// 封面图片上传区域引用
4547
let coverDropzoneRef: HTMLDivElement | undefined;
48+
let apiUrlInputRef: HTMLInputElement | undefined; // 新增 API URL 输入框的引用
4649

4750
// 获取所有标签
4851
const fetchLabels = async () => {
@@ -81,8 +84,9 @@ export default function MarkdownEditor() {
8184
if (uploadToken()) {
8285
headers['Authorization'] = `Bearer ${uploadToken()}`;
8386
}
87+
const baseUrl = uploadApiUrl() || 'http://121.62.28.11:40027/api/v1';
8488
const response = await http.post('/upload', formData, {
85-
baseURL: 'http://121.62.28.11:40027/api/v1',
89+
baseURL: baseUrl,
8690
headers: headers
8791
});
8892

@@ -194,8 +198,9 @@ export default function MarkdownEditor() {
194198
if (uploadToken()) {
195199
headers['Authorization'] = `Bearer ${uploadToken()}`;
196200
}
201+
const baseUrl = uploadApiUrl() || 'http://121.62.28.11:40027/api/v1';
197202
const response = await http.post('/upload', formData, {
198-
baseURL: 'http://121.62.28.11:40027/api/v1',
203+
baseURL: baseUrl,
199204
headers: headers
200205
});
201206

@@ -245,6 +250,10 @@ export default function MarkdownEditor() {
245250
if (savedToken) {
246251
setUploadToken(savedToken);
247252
}
253+
const savedApiUrl = localStorage.getItem("uploadApiUrl");
254+
if (savedApiUrl) {
255+
setUploadApiUrl(savedApiUrl);
256+
}
248257
setIsMounted(true);
249258
fetchLabels();
250259

@@ -279,9 +288,11 @@ export default function MarkdownEditor() {
279288
};
280289

281290
// 保存设置
282-
const handleSaveSettings = (newToken: string) => {
291+
const handleSaveSettings = (newToken: string, newApiUrl: string) => {
283292
setUploadToken(newToken);
284293
localStorage.setItem("uploadToken", newToken);
294+
setUploadApiUrl(newApiUrl);
295+
localStorage.setItem("uploadApiUrl", newApiUrl);
285296
setShowSettingsModal(false);
286297
};
287298

@@ -496,17 +507,34 @@ export default function MarkdownEditor() {
496507
<Show when={showSettingsModal()}>
497508
<div class="modal modal-open">
498509
<div class="modal-box">
499-
<h3 class="font-bold text-lg">设置上传Token</h3>
500-
<input
501-
ref={tokenInputRef}
502-
type="text"
503-
placeholder="在此输入Token"
504-
class="input input-bordered w-full mt-4"
505-
value={uploadToken()}
506-
/>
507-
<div class="modal-action">
510+
<h3 class="font-bold text-lg">设置上传参数</h3>
511+
<label class="form-control w-full mt-4">
512+
<div class="label">
513+
<span class="label-text">上传 Token</span>
514+
</div>
515+
<input
516+
ref={tokenInputRef}
517+
type="text"
518+
placeholder="在此输入Token"
519+
class="input input-bordered w-full"
520+
value={uploadToken()}
521+
/>
522+
</label>
523+
<label class="form-control w-full mt-2">
524+
<div class="label">
525+
<span class="label-text">上传 API 地址</span>
526+
</div>
527+
<input
528+
ref={apiUrlInputRef}
529+
type="text"
530+
placeholder="例如: http://121.62.28.11:40027/api/v1"
531+
class="input input-bordered w-full"
532+
value={uploadApiUrl()}
533+
/>
534+
</label>
535+
<div class="modal-action mt-6">
508536
<button class="btn" onClick={handleCloseSettingsModal}>取消</button>
509-
<button class="btn btn-primary" onClick={() => handleSaveSettings(tokenInputRef?.value ?? "")}>保存</button>
537+
<button class="btn btn-primary" onClick={() => handleSaveSettings(tokenInputRef?.value ?? "", apiUrlInputRef?.value ?? "")}>保存</button>
510538
</div>
511539
</div>
512540
</div>
@@ -551,7 +579,6 @@ export default function MarkdownEditor() {
551579
ref={editorRef}
552580
value={text()}
553581
onInput={(e) => setText(e.target.value)}
554-
onPaste={handleEditorPaste}
555582
onDrop={handleEditorDrop}
556583
onDragOver={handleEditorDragOver}
557584
class="h-[calc(100vh-300px)] w-full p-4 focus:outline-none border border-base-200 rounded-md"

0 commit comments

Comments
 (0)