From 33f976b1eaa02e745438811b320ec790f5686123 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 28 Aug 2026 17:45:38 +0800
Subject: [PATCH] fix iframe style

---
 .../tiptap-editor/TiptapIframeButton.vue      | 91 +++++++++++++------
 .../tiptap-editor/TiptapLinkButton.vue        |  1 +
 2 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/src/components/tiptap-editor/TiptapIframeButton.vue b/src/components/tiptap-editor/TiptapIframeButton.vue
index 13d7fc2..54b4659 100644
--- a/src/components/tiptap-editor/TiptapIframeButton.vue
+++ b/src/components/tiptap-editor/TiptapIframeButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<t-button v-popup="'插入内嵌网页'" :variant="active ? 'base' : 'text'" :theme="active ? 'light' : 'default'" @click="openDialog">
+	<t-button :variant="active ? 'base' : 'text'" :theme="active ? 'light' : 'default'" @click="openDialog">
 		<t-icon name="web" />
 	</t-button>
 	<bottom-popup
@@ -12,22 +12,49 @@
 		@right-button-click="onConfirm"
 		destroy-on-close
 	>
-		<div class="form-popup">
-			<t-form class="form-content" label-align="left" label-width="auto">
-				<t-form-item label="网页地址">
-					<t-input v-model="iframeForm.src" placeholder="请输入网页地址" />
-				</t-form-item>
-				<t-form-item label="网页标题">
-					<t-input v-model="iframeForm.title" placeholder="请输入网页标题，可留空" />
-				</t-form-item>
-				<t-form-item label="宽度">
-					<t-input v-model="iframeForm.width" placeholder="请输入宽度，默认 100%" />
-				</t-form-item>
-				<t-form-item label="高度">
-					<t-input v-model="iframeForm.height" placeholder="请输入高度，默认 28rem" />
-				</t-form-item>
-			</t-form>
-		</div>
+		<t-form class="popup" label-align="left" label-width="auto">
+			<t-form-item label="网页地址">
+				<t-input
+					v-model="iframeForm.src"
+					placeholder="请输入网页地址"
+					borderless
+				/>
+			</t-form-item>
+			<t-form-item label="网页标题">
+				<t-input
+					v-model="iframeForm.title"
+					placeholder="请输入网页标题，可留空"
+					borderless
+				/>
+			</t-form-item>
+			<t-form-item label="宽度">
+				<div class="field">
+					<t-input
+						v-model="iframeForm.width"
+						placeholder="请输入宽度，默认 100%"
+						borderless
+					/>
+					<t-button size="extra-small" variant="outline" @click="setWidth('auto')">
+						自动
+					</t-button>
+					<t-button size="extra-small" variant="outline" @click="setWidth('100%')">
+						铺满
+					</t-button>
+				</div>
+			</t-form-item>
+			<t-form-item label="高度">
+				<div class="field">
+					<t-input
+						v-model="iframeForm.height"
+						placeholder="请输入高度，默认 28rem"
+						borderless
+					/>
+					<t-button size="extra-small" variant="outline" @click="setHeight">
+						自动
+					</t-button>
+				</div>
+			</t-form-item>
+		</t-form>
 	</bottom-popup>
 </template>
 
@@ -53,6 +80,14 @@ const iframeForm = reactive({
 	height: "28rem"
 });
 
+function setWidth(width: "auto" | "100%") {
+	iframeForm.width = width;
+}
+
+function setHeight() {
+	iframeForm.height = "auto";
+}
+
 function openDialog() {
 	if (!props.editor) {
 		return;
@@ -105,19 +140,21 @@ async function onConfirm() {
 </script>
 
 <style lang="less" scoped>
-.form-popup {
-	width: 100%;
-	max-height: 85vh;
-	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
-	box-sizing: border-box;
-	overflow-y: auto;
+.popup {
+	margin: 0;
+	padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
 	background: var(--td-bg-color-container);
 
-	.form-content {
-		:deep(.t-form__item) {
-			margin-bottom: .875rem;
+	.field {
+		gap: .5rem;
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		:deep(.t-input) {
+			min-width: 0;
+			flex: 1;
 		}
 	}
-
 }
 </style>
diff --git a/src/components/tiptap-editor/TiptapLinkButton.vue b/src/components/tiptap-editor/TiptapLinkButton.vue
index 3f6e422..d298993 100644
--- a/src/components/tiptap-editor/TiptapLinkButton.vue
+++ b/src/components/tiptap-editor/TiptapLinkButton.vue
@@ -101,6 +101,7 @@ function onConfirm() {
 <style lang="less" scoped>
 .link-form {
 	gap: .75rem;
+	padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
 	display: flex;
 	flex-direction: column;
 }