0904
This commit is contained in:
tamakyi
@@ -0,0 +1,195 @@
|
||||
{{template "base/header" .}}
|
||||
<style>
|
||||
/* 自定义灯箱样式 */
|
||||
.custom-lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.85);
|
||||
z-index: 9999;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.custom-lightbox.active {
|
||||
display: flex;
|
||||
}
|
||||
.custom-lightbox img {
|
||||
max-width: 90%;
|
||||
max-height: 80%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
}
|
||||
.custom-lightbox .close-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-lightbox .caption {
|
||||
color: #ccc;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="uk-container uk-container-small uk-margin-top">
|
||||
<h2 class="uk-text-center">
|
||||
{{ if .IsOwner }}{{t .LangCode "chat.withAsker"}}{{ else }}{{t .LangCode "chat.withUser" .PageUser.Name}}{{ end }}
|
||||
</h2>
|
||||
<p class="uk-text-center uk-text-meta">
|
||||
{{ if .Conversation.IsClosed }}
|
||||
<span class="uk-label uk-label-danger">{{t .LangCode "chat.closed"}}</span>
|
||||
{{ else }}
|
||||
{{t .LangCode "chat.remaining" (sub .Conversation.MaxMessages .Conversation.MessageCount) .Conversation.MaxMessages}}
|
||||
{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="uk-card uk-card-default uk-card-body uk-margin uk-padding-small">
|
||||
<ul class="uk-list uk-list-divider">
|
||||
{{ range .Messages }}
|
||||
{{ $isMyMessage := eq .SenderID $.LoggedUser.ID }}
|
||||
<li class="uk-margin-small-bottom">
|
||||
<div class="uk-flex {{ if $isMyMessage }}uk-flex-right{{ else }}uk-flex-left{{ end }}">
|
||||
<div class="uk-card uk-card-hover uk-card-body uk-padding-small uk-margin-small-left uk-margin-small-right"
|
||||
style="max-width: 75%; border-radius: 12px; background-color: {{ if $isMyMessage }}#e6ffe6{{ else }}#f0f8ff{{ end }};">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-small-bottom">
|
||||
<span class="uk-icon" uk-icon="user"></span>
|
||||
<strong class="uk-margin-small-left">
|
||||
{{ if $isMyMessage }}{{t $.LangCode "chat.me"}}{{ else }}{{t $.LangCode "chat.other"}}{{ end }}
|
||||
</strong>
|
||||
<span class="uk-text-meta uk-margin-small-left" style="font-size: 0.75rem;">
|
||||
{{ .CreatedAt.Format "01-02 15:04" }}
|
||||
</span>
|
||||
</div>
|
||||
{{ if and $.IsOwner $.IsBlocked (eq .SenderID $.Conversation.AskerID) }}
|
||||
<p class="uk-margin-remove"><span class="uk-text-muted uk-text-italic">{{t $.LangCode "chat.userBlocked"}}</span></p>
|
||||
{{ else }}
|
||||
{{ if .Content }}
|
||||
<p class="uk-margin-remove">{{ .Content }}</p>
|
||||
{{ end }}
|
||||
{{ range (index $.MessageImages .ID) }}
|
||||
<div class="uk-margin-small-top">
|
||||
<img src="{{ .URL }}" alt="{{ .FileName }}"
|
||||
style="max-width: 200px; max-height: 200px; border-radius: 8px; cursor: pointer;"
|
||||
onclick="openLightbox('{{ .URL }}', '{{ .FileName }}')" />
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ if .CanSend }}
|
||||
<div class="uk-card uk-card-default uk-card-body uk-margin-top">
|
||||
<form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/send" enctype="multipart/form-data">
|
||||
{{ .CSRFTokenHTML }}
|
||||
<textarea name="content" class="uk-textarea" rows="3" placeholder="{{t .LangCode "chat.input"}}" maxlength="{{ .ChatMessageLimit }}"></textarea>
|
||||
|
||||
<div class="uk-margin-small-top" style="display: flex; align-items: center; gap: 10px;">
|
||||
<div uk-form-custom>
|
||||
<a href="#" class="uk-icon-link" uk-icon="image"></a>
|
||||
<span style="font-size: 13px; color: #666;">{{t .LangCode "chat.addImage"}}</span>
|
||||
<input type="file" name="image" accept="image/*">
|
||||
</div>
|
||||
<span class="uk-text-meta" id="file-name"></span>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small-top uk-text-right">
|
||||
<button type="submit" class="uk-button uk-button-primary">{{t .LangCode "chat.send"}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="uk-text-center uk-margin-top">
|
||||
<p class="uk-text-warning">{{t .LangCode "chat.closedNoSend"}}</p>
|
||||
<a href="/_/{{.PageUser.Domain}}" class="uk-button uk-button-default">{{t .LangCode "common.backHome"}}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .IsOwner }}
|
||||
<div class="uk-margin-top uk-text-center">
|
||||
<a class="uk-button uk-button-{{ if .IsBlocked }}default{{ else }}warning{{ end }} uk-button-small" href="#">
|
||||
{{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}
|
||||
</a>
|
||||
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<h3 class="uk-card-title">{{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}？</h3>
|
||||
<p>{{ if .IsBlocked }}{{t .LangCode "chat.confirmUnblock"}}{{ else }}{{t .LangCode "chat.confirmBlock"}}{{ end }}</p>
|
||||
<form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/block">
|
||||
{{ .CSRFTokenHTML }}
|
||||
<button type="submit" class="uk-button uk-button-{{ if .IsBlocked }}primary{{ else }}danger{{ end }}">
|
||||
{{t .LangCode "chat.confirm"}}{{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="uk-button uk-button-danger uk-button-small" href="#">{{t .LangCode "chat.delete"}}</a>
|
||||
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<h3 class="uk-card-title">{{t .LangCode "qitem.danger"}}</h3>
|
||||
<p>{{t .LangCode "chat.deleteConfirm"}}</p>
|
||||
<form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/delete">
|
||||
{{ .CSRFTokenHTML }}
|
||||
<button type="submit" class="uk-button uk-button-danger">{{t .LangCode "qitem.deleteConfirmBtn"}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 自定义灯箱结构 -->
|
||||
<div id="customLightbox" class="custom-lightbox" onclick="closeLightbox()">
|
||||
<span class="close-btn" onclick="closeLightbox()">×</span>
|
||||
<img id="lightboxImg" src="" alt="" />
|
||||
<div id="lightboxCaption" class="caption"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 显示已选文件名
|
||||
var fileInput = document.querySelector('input[name="image"]');
|
||||
var fileNameSpan = document.getElementById('file-name');
|
||||
if (fileInput && fileNameSpan) {
|
||||
fileInput.addEventListener('change', function() {
|
||||
if (fileInput.files.length > 0) {
|
||||
fileNameSpan.textContent = fileInput.files[0].name;
|
||||
} else {
|
||||
fileNameSpan.textContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 自定义灯箱函数
|
||||
function openLightbox(src, caption) {
|
||||
document.getElementById('lightboxImg').src = src;
|
||||
document.getElementById('lightboxCaption').textContent = caption || '';
|
||||
document.getElementById('customLightbox').classList.add('active');
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
document.getElementById('customLightbox').classList.remove('active');
|
||||
// 清空图片避免后台加载消耗
|
||||
document.getElementById('lightboxImg').src = '';
|
||||
}
|
||||
|
||||
// ESC 关闭
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeLightbox();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{{template "base/footer" .}}
|
||||
Reference in New Issue
Block a user