Add image upload in conversation

This commit is contained in:
Xin Wang
2026-06-02 08:24:53 +08:00
parent f22df60873
commit 21f6c17388
11 changed files with 622 additions and 8 deletions

View File

@@ -82,16 +82,65 @@
<span id="camera-state" class="camera-drawer__state">State -</span>
</div>
<div class="camera-drawer__preview" aria-hidden="true">
<div id="camera-preview" class="camera-drawer__preview">
<video
id="camera-video"
class="camera-drawer__video"
playsinline
muted
autoplay
></video>
<img
id="camera-photo"
class="camera-drawer__photo"
alt="Selected image preview"
/>
<span class="camera-drawer__corner camera-drawer__corner--tl"></span>
<span class="camera-drawer__corner camera-drawer__corner--tr"></span>
<span class="camera-drawer__corner camera-drawer__corner--bl"></span>
<span class="camera-drawer__corner camera-drawer__corner--br"></span>
<span class="camera-drawer__lens"></span>
<span class="camera-drawer__scan"></span>
<span id="camera-placeholder" class="camera-drawer__placeholder">
打开摄像头实时拍摄,或从下方选择 / 上传图片
</span>
</div>
<p id="camera-question" class="camera-drawer__question"></p>
<div class="camera-drawer__sources">
<button
id="camera-start-btn"
class="btn btn--ghost camera-drawer__source"
type="button"
>
使用摄像头
</button>
<button
id="camera-flip-btn"
class="btn btn--ghost camera-drawer__source"
type="button"
hidden
>
切换摄像头
</button>
<label class="btn btn--ghost camera-drawer__source">
上传图片
<input
id="camera-upload"
type="file"
accept="image/*"
hidden
/>
</label>
</div>
<div
id="camera-samples"
class="camera-drawer__samples"
aria-label="示例图片,点击选择"
></div>
<button
id="camera-done-btn"
class="btn btn--primary camera-drawer__button"
@@ -100,6 +149,7 @@
>
拍摄完成
</button>
<canvas id="camera-canvas" hidden></canvas>
</div>
</aside>