From cbc4d0396ffac73be06b90327f12ede5dd328cf5 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 28 Aug 2026 17:38:29 +0800
Subject: [PATCH] fix media popup style

---
 .../tiptap-editor/TiptapMediaButton.vue       | 117 +++++++++++++-----
 1 file changed, 89 insertions(+), 28 deletions(-)

diff --git a/src/components/tiptap-editor/TiptapMediaButton.vue b/src/components/tiptap-editor/TiptapMediaButton.vue
index 0c1c40e..24f0493 100644
--- a/src/components/tiptap-editor/TiptapMediaButton.vue
+++ b/src/components/tiptap-editor/TiptapMediaButton.vue
@@ -20,29 +20,70 @@
 				:loading="uploading"
 				:disabled="uploading"
 				@click="onClick"
-			>
-				插入
-			</t-button>
+				content="插入"
+			/>
 		</template>
-		<div class="form-popup">
-			<t-form class="form-content" label-align="left" label-width="auto">
-				<t-form-item label="文件">
-					<t-button size="small" variant="outline" @click="pickFile">
+		<t-form class="popup" label-align="left" label-width="auto">
+			<t-form-item label="文件">
+				<div class="field">
+					<t-input
+						:value="selectedFile?.name || `未选择${typeLabel}文件`"
+						readonly
+						borderless
+					/>
+					<t-button
+						size="extra-small"
+						variant="outline"
+						@click="pickFile"
+					>
 						<span v-text="selectedFile ? '重新选择' : `选择${typeLabel}`" />
 					</t-button>
-					<span class="word-space gray" v-text="selectedFile?.name || `未选择${typeLabel}文件`" />
-				</t-form-item>
-				<t-form-item label="标题">
-					<t-input v-model="mediaForm.title" :placeholder="`请输入${typeLabel}标题，可留空`" />
-				</t-form-item>
-				<t-form-item label="宽度">
-					<t-input v-model="mediaForm.width" placeholder="请输入宽度，默认 100%" />
-				</t-form-item>
-				<t-form-item label="高度">
-					<t-input v-model="mediaForm.height" placeholder="请输入高度，默认 auto" />
-				</t-form-item>
-			</t-form>
-		</div>
+				</div>
+			</t-form-item>
+			<t-form-item label="标题">
+				<t-input
+					v-model="mediaForm.title"
+					:placeholder="`请输入${typeLabel}标题，可留空`"
+					borderless
+				/>
+			</t-form-item>
+			<t-form-item label="宽度">
+				<div class="field">
+					<t-input
+						v-model="mediaForm.width"
+						placeholder="请输入宽度，默认 100%"
+						borderless
+					/>
+					<t-button
+						size="extra-small"
+						variant="outline"
+						@click="setWidth('auto')"
+						content="自动"
+					/>
+					<t-button
+						size="extra-small"
+						variant="outline"
+						@click="setWidth('100%')"
+						content="铺满"
+					/>
+				</div>
+			</t-form-item>
+			<t-form-item label="高度">
+				<div class="field">
+					<t-input
+						v-model="mediaForm.height"
+						placeholder="请输入高度，默认 auto"
+						borderless
+					/>
+					<t-button
+						size="extra-small"
+						variant="outline"
+						@click="setHeight"
+						content="自动"
+					/>
+				</div>
+			</t-form-item>
+		</t-form>
 	</bottom-popup>
 	<input ref="fileInputRef" class="file-input" type="file" :accept="accept" @change="onFileChange" />
 </template>
@@ -89,6 +130,14 @@ function buildDefaultHeight() {
 	return "auto";
 }
 
+function setWidth(width: "auto" | "100%") {
+	mediaForm.width = width;
+}
+
+function setHeight() {
+	mediaForm.height = buildDefaultHeight();
+}
+
 function pickFile(event?: MouseEvent) {
 	event?.stopPropagation();
 	fileInputRef.value?.click();
@@ -180,20 +229,32 @@ 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;
+.popup {
+	margin: 0;
+	padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
 	overflow-y: auto;
 	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;
 		}
 	}
 
+	.selector {
+		--td-button-extra-small-height: 24px;
+
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 }
 
 .file-input {