完善uniapp

uniapp/pages/tools/notepad/edit.vue

@@ -15,16 +15,29 @@
 
 			<view class="field content-field">
 				<text class="field-label">内容</text>
-				<textarea
-					class="field-textarea"
-					v-model="form.content"
-					placeholder="记录你的想法..."
-					placeholder-class="placeholder"
-					:auto-height="false"
-					maxlength="5000"
-					:show-confirm-bar="false"
-				/>
-				<text class="char-count">{{ form.content.length }}/5000</text>
+				<view class="editor-wrap">
+					<editor
+						id="noteEditor"
+						class="note-editor"
+						:placeholder="'记录你的想法...'"
+						:value="form.content"
+						@ready="onEditorReady"
+						@input="onEditorInput"
+						@focus="editorFocused = true"
+						@blur="editorFocused = false"
+					/>
+					<view class="editor-toolbar">
+						<view
+							v-for="btn in toolbarBtns"
+							:key="btn.name"
+							class="toolbar-btn"
+							:class="{ active: btn.active }"
+							@tap="execCommand(btn)"
+						>
+							<text>{{ btn.label }}</text>
+						</view>
+					</view>
+				</view>
 			</view>
 
 			<view class="switch-row" @tap="form.pinned = !form.pinned">
@@ -57,6 +70,8 @@ import { formatDate } from '@/utils/date.js'
 
 const noteId = ref('')
 const saving = ref(false)
+const editorCtx = ref(null)
+const editorFocused = ref(false)
 const form = reactive({
 	title: '',
 	content: '',
@@ -66,6 +81,18 @@ const meta = reactive({
 	updatedAt: 0
 })
 
+const toolbarBtns = reactive([
+	{ name: 'bold', label: 'B', active: false, value: 'bold' },
+	{ name: 'italic', label: 'I', active: false, value: 'italic' },
+	{ name: 'underline', label: 'U', active: false, value: 'underline' },
+	{ name: 'strike', label: 'S', active: false, value: 'strikeThrough' },
+	{ name: 'header', label: 'H', active: false, value: 'header' },
+	{ name: 'list', label: '•', active: false, value: 'insertUnorderedList' },
+	{ name: 'indent', label: '→', active: false, value: 'indent' },
+	{ name: 'outdent', label: '←', active: false, value: 'outdent' },
+	{ name: 'divider', label: '—', active: false, value: 'insertHorizontalRule' },
+])
+
 onLoad(async (query) => {
 	if (query?.id) {
 		noteId.value = query.id
@@ -76,6 +103,30 @@ onLoad(async (query) => {
 	}
 })
 
+function onEditorReady() {
+	uni.createSelectorQuery().select('#noteEditor').context((res) => {
+		if (res && res.context) {
+			editorCtx.value = res.context
+			if (form.content) {
+				editorCtx.value.setContents({ html: form.content })
+			}
+		}
+	}).exec()
+}
+
+function onEditorInput(e) {
+	form.content = e.detail.html || ''
+}
+
+function execCommand(btn) {
+	if (!editorCtx.value) return
+	if (btn.name === 'header') {
+		editorCtx.value.format('header', 'H2')
+	} else {
+		editorCtx.value.format(btn.value)
+	}
+}
+
 async function loadNote(id) {
 	try {
 		const note = await getNote(id)
@@ -88,6 +139,9 @@ async function loadNote(id) {
 		form.content = note.content
 		form.pinned = !!note.pinned
 		meta.updatedAt = note.updatedAt
+		if (editorCtx.value && note.content) {
+			editorCtx.value.setContents({ html: note.content })
+		}
 	} catch (e) {
 		uni.showToast({ title: '加载失败', icon: 'none' })
 	}
@@ -147,13 +201,19 @@ function onDelete() {
 .page {
 	min-height: 100vh;
 	background: $color-bg-page;
-	padding: 24rpx $page-padding-x;
-	padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
+	display: flex;
+	flex-direction: column;
+	padding: 24rpx $page-padding-x 0;
+	padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
 }
 
 .form-card {
 	@include card;
 	padding: 8rpx 0;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 }
 
 .field {
@@ -183,12 +243,57 @@ function onDelete() {
 }
 
 .content-field {
-	position: relative;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 0;
+	overflow: hidden;
 }
 
-.field-textarea {
-	height: 480rpx;
-	line-height: 1.7;
+.editor-wrap {
+	background: $color-bg-page;
+	border-radius: $radius-md;
+	overflow: hidden;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.note-editor {
+	width: 100%;
+	flex: 1;
+	min-height: 0;
+	padding: 20rpx;
+	font-size: 28rpx;
+	color: $color-text;
+	box-sizing: border-box;
+	overflow-y: auto;
+}
+
+.editor-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8rpx;
+	padding: 16rpx 20rpx;
+	border-top: 1rpx solid $color-divider;
+	background: $color-card;
+}
+
+.toolbar-btn {
+	padding: 10rpx 20rpx;
+	border-radius: $radius-sm;
+	font-size: 24rpx;
+	color: $color-text-secondary;
+	background: $color-bg-page;
+
+	&.active {
+		color: $color-primary;
+		background: $color-primary-bg;
+	}
+
+	&:active {
+		opacity: 0.7;
+	}
 }
 
 .placeholder {
@@ -237,7 +342,7 @@ function onDelete() {
 }
 
 .meta {
-	margin-top: 20rpx;
+	margin: 20rpx 0;
 	padding: 0 8rpx;
 	font-size: 24rpx;
 	color: $color-text-muted;
@@ -255,6 +360,7 @@ function onDelete() {
 	background: $color-card;
 	border-top: 1rpx solid $color-border;
 	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.04);
+	z-index: 10;
 }
 
 .btn-primary,