From b4a60bcbe22381ea2eac84919c99ac56ad9d30f2 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Fri, 5 Dec 2025 20:49:40 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E4=BB=A5=E6=AD=A3=E7=A1=AE=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E7=BC=96=E5=86=99=20chat-file=20=E7=9A=84=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=85=83=E7=B4=A0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/custom-elements/chat-file.ts | 34 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/client/ui/custom-elements/chat-file.ts b/client/ui/custom-elements/chat-file.ts
index 6807b18..340885c 100644
--- a/client/ui/custom-elements/chat-file.ts
+++ b/client/ui/custom-elements/chat-file.ts
@@ -1,27 +1,39 @@
 import { $ } from 'mdui/jq'
 
 customElements.define('chat-file', class extends HTMLElement {
+    static observedAttributes = ['href', 'name']
+    declare anchor: HTMLAnchorElement
+    declare span: HTMLSpanElement
     constructor() {
         super()
+        this.attachShadow({ mode: 'open' })
+    }
+    update() {
+        if (this.anchor == null) return
+
+        this.anchor.href = $(this).attr('href') as string
+        this.anchor.download = $(this).attr('href') as string
+        this.span.textContent = $(this).attr("name") as string
+    }
+    attributeChangedCallback(_name: string, _oldValue: unknown, _newValue: unknown) {
+        this.update()
     }
     connectedCallback() {
-        const e = new DOMParser().parseFromString(`
+        this.anchor = new DOMParser().parseFromString(`
         <a style="width: 100%;height: 100%;">
             <mdui-card clickable style="display: flex;align-items: center;box-shadow: inherit;border-radius: inherit;">
                 <mdui-icon name="insert_drive_file" style="margin: 13px;font-size: 34px;"></mdui-icon>
                 <span style="margin-right: 13px; word-wrap: break-word; word-break:break-all;white-space:normal; max-width :100%;"></span>
             </mdui-card>
-        </a>`, 'text/html').body.firstChild as HTMLElement
-        $(e).find('span').text($(this).attr("name"))
-        const href = $(this).attr('href')
-        $(e).attr('href', href)
-        $(e).attr('target', '_blank')
-        $(e).attr('download', href)
-        e.style.textDecoration = 'none'
-        e.style.color = 'inherit'
-        e.onclick = (e) => {
+        </a>`, 'text/html').body.firstChild as HTMLAnchorElement
+        this.span = $(this.anchor).find('span').get(0)
+        this.anchor.style.textDecoration = 'none'
+        this.anchor.style.color = 'inherit'
+        this.anchor.onclick = (e) => {
             e.stopPropagation()
         }
-        this.appendChild(e)
+        this.shadowRoot!.appendChild(this.anchor)
+
+        this.update()
     }
 })