fix code block popup style

src/components/bottom-popup/index.vue

@@ -9,7 +9,7 @@
 						</t-button>
 					</slot>
 				</div>
-				<div class="title">
+				<div class="title text-bold">
 					<slot name="title">
 						<span v-text="title" />
 					</slot>

src/components/tiptap-editor/TiptapCodeBlockButton.vue

@@ -2,23 +2,26 @@
 	<t-button v-popup="'代码块'" :variant="active ? 'base' : 'text'" :theme="active ? 'light' : 'default'" @click="openDialog">
 		<t-icon name="code" />
 	</t-button>
-	<bottom-popup
+	<t-popup
 		v-model="visible"
 		placement="bottom"
-		title="插入代码块"
+		height="30vh"
-		left-button-text="取消"
-		right-button-text="插入"
-		@left-button-click="visible = false"
-		@right-button-click="onConfirm"
 		destroy-on-close
 	>
-		<div class="form-popup">
+		<t-picker
-			<t-input v-model="codeLanguage" placeholder="代码语言，可留空" />
+			title="插入代码块"
-		</div>
+			:model-value="pickerValue"
-	</bottom-popup>
+			:columns="pickerColumns"
+			@confirm="onConfirm"
+			@cancel="visible = false"
+			@pick="handlePickerPick"
+		/>
+	</t-popup>
 </template>
 
 <script lang="ts" setup>
+import type { PickerValue } from "tdesign-mobile-vue";
+import { supportedCodeLanguages } from "timi-web/editor";
 import type { TiptapEditorInstance } from "timi-web/editor";
 import BottomPopup from "../bottom-popup/index.vue";
 
@@ -31,8 +34,17 @@ const props = defineProps<{
 	active: boolean;
 }>();
 
+// markup-templating 仅作为内部依赖语法，不作为独立选项。
+const OTHER_LANGUAGE_VALUE = "other";
+const codeLanguageOptions = [
+	...supportedCodeLanguages,
+	{ label: "其他", value: OTHER_LANGUAGE_VALUE }
+];
+
 const visible = ref(false);
 const codeLanguage = ref("");
+const pickerValue = computed<PickerValue[]>(() => [codeLanguage.value || OTHER_LANGUAGE_VALUE]);
+const pickerColumns = [codeLanguageOptions];
 
 function openDialog() {
 	if (!props.editor) {
@@ -42,6 +54,11 @@ function openDialog() {
 	visible.value = true;
 }
 
+function handlePickerPick(values: PickerValue[]) {
+	const language = String(values[0] ?? OTHER_LANGUAGE_VALUE);
+	codeLanguage.value = language === OTHER_LANGUAGE_VALUE ? "" : language;
+}
+
 function onConfirm() {
 	if (!props.editor) {
 		return;
@@ -55,15 +72,3 @@ function onConfirm() {
 	visible.value = false;
 }
 </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;
-	background: var(--td-bg-color-container);
-
-}
-</style>