主要更新uniapp相关功能

uniapp/pages/tools/notepad/edit.vue

@@ -3,13 +3,15 @@
 		<view class="form-card">
 			<view class="field">
 				<text class="field-label">标题</text>
-				<input
-					class="field-input title-input"
+				<u-input
 					v-model="form.title"
-					type="text"
 					placeholder="输入标题"
-					placeholder-class="placeholder"
-					maxlength="80"
+					placeholder-style="color:#94a3b8"
+					:maxlength="80"
+					border="none"
+					:font-size="15"
+					color="#0f172a"
+					clearable
 				/>
 			</view>
 
@@ -22,13 +24,14 @@
 				/>
 			</view>
 
-			<view class="switch-row" @tap="form.pinned = !form.pinned">
-				<view class="switch-left">
-					<FaIcon name="thumbtack" :color="form.pinned ? '#3c9cff' : '#909399'" :size="16" />
-					<text class="switch-label">置顶笔记</text>
-				</view>
-				<view class="switch-dot" :class="{ on: form.pinned }" />
-			</view>
+			<u-cell class="switch-cell" :border="false" title="置顶笔记">
+				<template #icon>
+					<FaIcon name="thumbtack" :color="form.pinned ? '#2563eb' : '#909399'" :size="16" />
+				</template>
+				<template #value>
+					<u-switch v-model="form.pinned" active-color="#2563eb" size="20" />
+				</template>
+			</u-cell>
 		</view>
 
 		<view v-if="noteId && meta.updatedAt" class="meta">
@@ -36,9 +39,19 @@
 		</view>
 
 		<view class="footer">
-			<view v-if="noteId" class="btn-danger" @tap="onDelete">删除</view>
-			<view class="btn-primary" :class="{ disabled: saving }" @tap="onSave">
-				{{ saving ? '保存中...' : '保存' }}
+			<view v-if="noteId" class="footer-btn">
+				<u-button type="error" plain text="删除" @click="onDelete" />
+			</view>
+			<view class="footer-btn">
+				<u-button
+					type="primary"
+					color="#2563eb"
+					shape="circle"
+					:loading="saving"
+					loading-text="保存中..."
+					text="保存"
+					@click="onSave"
+				/>
 			</view>
 		</view>
 	</view>
@@ -175,17 +188,6 @@ function onDelete() {
 	margin-bottom: 12rpx;
 }
 
-.field-input,
-.field-textarea {
-	width: 100%;
-	font-size: 30rpx;
-	color: $color-text;
-}
-
-.title-input {
-	font-weight: 600;
-}
-
 .content-field {
 	flex: 1;
 	display: flex;
@@ -208,51 +210,10 @@ function onDelete() {
 	padding: 20rpx;
 }
 
-.placeholder {
-	color: $color-text-muted;
-}
-
-.char-count {
-	display: block;
-	text-align: right;
-	font-size: 22rpx;
-	color: $color-text-muted;
-	margin-top: 12rpx;
-}
-
-.switch-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 28rpx;
+.switch-cell {
 	border-top: 1rpx solid $color-divider;
 }
 
-.switch-left {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-}
-
-.switch-label {
-	font-size: 28rpx;
-	color: $color-text;
-}
-
-.switch-dot {
-	width: 44rpx;
-	height: 44rpx;
-	border-radius: 50%;
-	border: 1rpx solid $color-border;
-	background: $color-card;
-
-	&.on {
-		background: $color-primary;
-		border-color: $color-primary;
-		box-shadow: inset 0 0 0 6rpx #fff;
-	}
-}
-
 .meta {
 	margin: 20rpx 0;
 	padding: 0 8rpx;
@@ -275,34 +236,7 @@ function onDelete() {
 	z-index: 10;
 }
 
-.btn-primary,
-.btn-danger {
+.footer-btn {
 	flex: 1;
-	height: 88rpx;
-	border-radius: $radius-md;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 30rpx;
-	font-weight: 600;
-}
-
-.btn-primary {
-	background: $color-primary;
-	color: #fff;
-
-	&:active {
-		background: $color-primary-dark;
-	}
-
-	&.disabled {
-		opacity: 0.6;
-	}
-}
-
-.btn-danger {
-	background: $color-bg-page;
-	color: #f56c6c;
-	border: 1rpx solid #fde2e2;
 }
 </style>