From 3e1dd31babd0e4499d670c2a2af5d747971e91e3 Mon Sep 17 00:00:00 2001 From: OpenClaw Sub-agent Date: Sat, 1 Aug 2026 21:27:17 +1000 Subject: [PATCH] fix: hide template description on Action tab, Discord-style message preview - template-description box was shown on Action tab (JS never controlled it) - Message preview now renders as a Discord-style chat bubble (avatar, author, dark background) with {query} highlighted as a chip --- links/templates/links/link_form.html | 45 +++++++++++++++++++--------- 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/links/templates/links/link_form.html b/links/templates/links/link_form.html index 8092193..fb4d7f0 100644 --- a/links/templates/links/link_form.html +++ b/links/templates/links/link_form.html @@ -48,22 +48,29 @@ color: transparent; font-size: .8rem; transition: all .2s; } .action-card.selected .action-card-check { background: #8b5cf6; border-color: #8b5cf6; color: #fff; } - /* ── Message preview bubble ── */ + /* ── Message preview bubble (Discord-like) ── */ .msg-preview { margin-top: .6rem; border-radius: 14px; background: #f9fafb; border: 1px solid #e5e7eb; padding: .7rem .9rem; } - .msg-preview-label { font-size: .7rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; } - .msg-preview-bubble { - display: inline-block; background: #fff; border: 1px solid #e5e7eb; - border-radius: 12px; padding: .45rem .8rem; font-size: .85rem; color: #111827; - box-shadow: 0 1px 2px rgba(0,0,0,.04); + .msg-preview-label { font-size: .7rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem; } + .msg-preview-chat { + background: #313338; border-radius: 12px; padding: .6rem .8rem; + display: flex; gap: .6rem; align-items: flex-start; } - .msg-preview-bubble .qchip { + .msg-preview-avatar { + width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; + background: linear-gradient(135deg, #5865F2, #7c3aed); + display: flex; align-items: center; justify-content: center; + color: #fff; font-size: .9rem; font-weight: 700; + } + .msg-preview-author { font-size: .82rem; font-weight: 600; color: #e2e3e7; margin-bottom: 2px; } + .msg-preview-text { font-size: .85rem; color: #dcddde; line-height: 1.4; word-break: break-word; } + .msg-preview-text .qchip { background: #ede9fe; color: #6d28d9; border-radius: 6px; padding: 0 .3rem; font-weight: 600; } - .msg-preview-hint { font-size: .72rem; color: #9ca3af; margin-top: .4rem; } + .msg-preview-hint { font-size: .72rem; color: #9ca3af; margin-top: .45rem; } {% endblock %} @@ -102,7 +109,7 @@ {% trans "Custom type allows you to create a link with custom HTML content. Use this when you want to display a message or custom content instead of redirecting." %}

-
+

{% trans "Template type allows you to create dynamic URLs with parameters. Use {query, default=value} syntax in the URL." %}

@@ -176,8 +183,14 @@ {{ field }}
发送效果预览
-
{{ field.value|default:'@小黑 帮我看看 {query}' }}
-
打开 go/ask/今天天气 时，今天天气 会自动填入消息
+
+
黑
+
+
小黑
+
{{ field.value|default:'@小黑 帮我看看 {query}' }}
+
+
+
别人打开 go/ask/今天天气 时，消息里的 今天天气 会被自动替换成链接后面的字
{% endif %} {% elif field.name == 'alias' and form.instance.pk %} @@ -264,6 +277,7 @@ const actionFields = document.querySelectorAll('.action-field'); const linkDescription = document.getElementById('link-description'); const customDescription = document.getElementById('custom-description'); + const templateDescription = document.getElementById('template-description'); const actionDescription = document.getElementById('action-description'); const linkTypeInput = document.getElementById('id_link_type'); const textField = document.querySelector('.custom-field'); @@ -292,6 +306,7 @@ if (label) label.classList.add('hidden'); }); linkDescription.classList.remove('hidden'); + templateDescription.classList.remove('hidden'); customDescription.classList.add('hidden'); actionDescription.classList.add('hidden'); linkTypeInput.value = 'LINK'; @@ -321,6 +336,7 @@ if (label) label.classList.add('hidden'); }); customDescription.classList.remove('hidden'); + templateDescription.classList.add('hidden'); linkDescription.classList.add('hidden'); actionDescription.classList.add('hidden'); linkTypeInput.value = 'CUSTOM'; @@ -351,6 +367,7 @@ if (label) label.classList.add('hidden'); }); actionDescription.classList.remove('hidden'); + templateDescription.classList.add('hidden'); linkDescription.classList.add('hidden'); customDescription.classList.add('hidden'); linkTypeInput.value = 'ACTION'; @@ -429,10 +446,10 @@ }); // ── Live preview: {query} → highlight chip ── - const previewBubble = document.getElementById('msg-preview-bubble'); + const previewText = document.getElementById('msg-preview-text'); const msgInput = document.getElementById('id_action_message_template'); function renderPreview() { - if (!previewBubble || !msgInput) return; + if (!previewText || !msgInput) return; const sample = '今天天气'; const raw = msgInput.value || '@小黑 帮我看看 {query}'; const parts = raw.split('{query}'); @@ -441,7 +458,7 @@ html += part.replace(/&/g, '&').replace(/'; }); - previewBubble.innerHTML = html; + previewText.innerHTML = html; } if (msgInput) msgInput.addEventListener('input', renderPreview); renderPreview();