主要更新uniapp相关功能
This commit is contained in:
hero920103 committed
1 parent
aa92ca40a2
commit
5b4dbb2b46
65 files changed
+8532
-1921
No files matched your search
@@ -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>
|
||||
@@ -1,21 +1,16 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="toolbar">
|
||||
<view class="search-bar">
|
||||
<FaIcon name="magnifying-glass" color="#909399" :size="16" />
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
placeholder="搜索笔记标题或内容"
|
||||
placeholder-class="search-placeholder"
|
||||
confirm-type="search"
|
||||
@confirm="loadNotes"
|
||||
/>
|
||||
<view v-if="keyword" class="search-clear" @tap="clearSearch">
|
||||
<FaIcon name="circle-xmark" color="#c0c4cc" :size="16" />
|
||||
</view>
|
||||
</view>
|
||||
<u-search
|
||||
v-model="keyword"
|
||||
placeholder="搜索笔记标题或内容"
|
||||
:show-action="false"
|
||||
shape="round"
|
||||
bg-color="#f1f5f9"
|
||||
color="#0f172a"
|
||||
@search="loadNotes"
|
||||
@clear="clearSearch"
|
||||
/>
|
||||
<view class="stats-row">
|
||||
<text class="stats-text">共 {{ total }} 条</text>
|
||||
<text v-if="pinnedCount" class="stats-text">置顶 {{ pinnedCount }} 条</text>
|
||||
@@ -26,10 +21,12 @@
|
||||
<view v-if="loading" class="state-box">
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="notes.length === 0" class="state-box">
|
||||
<FaIcon name="note-sticky" color="#c0c4cc" :size="40" />
|
||||
<text class="state-text">{{ keyword ? '未找到相关笔记' : '暂无笔记，点击右下角新建' }}</text>
|
||||
</view>
|
||||
<u-empty
|
||||
v-else-if="notes.length === 0"
|
||||
mode="list"
|
||||
:icon-size="80"
|
||||
:text="keyword ? '未找到相关笔记' : '暂无笔记，点击右下角新建'"
|
||||
/>
|
||||
<view v-else class="note-list">
|
||||
<view
|
||||
v-for="item in notes"
|
||||
@@ -39,7 +36,7 @@
|
||||
>
|
||||
<view class="note-head">
|
||||
<view class="note-title-row">
|
||||
<text v-if="item.pinned" class="pin-tag">置顶</text>
|
||||
<u-tag v-if="item.pinned" text="置顶" type="primary" size="mini" plain class="pin-tag" />
|
||||
<text class="note-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="note-time">{{ formatRelativeTime(item.updatedAt) }}</text>
|
||||
@@ -182,33 +179,6 @@ function onDelete(item) {
|
||||
box-shadow: $shadow-header;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 24rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: $color-text-muted;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
display: flex;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
@@ -258,11 +228,6 @@ function onDelete(item) {
|
||||
|
||||
.pin-tag {
|
||||
flex-shrink: 0;
|
||||
font-size: 20rpx;
|
||||
color: $color-primary;
|
||||
background: $color-primary-bg;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
|
||||
.note-title {
|
||||
|
||||
Reference in new issue
Block a user