product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

优化 时间显示格式调整

Browse Source
This commit is contained in:
袁涛
2025-10-12 23:39:28 +08:00
parent b2fda14451
commit 27133aa107
9 changed files with 208 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/NoteItem.vue
View File

@@ -30,6 +30,7 @@
<script setup>
import { computed, ref } from 'vue'
import { formatDateTime } from '../utils/dateUtils'
const props = defineProps({
content: {
@@ -77,7 +78,7 @@ const isSliding = ref(false)
const isSlided = ref(false) // 是否已经滑动到阈值
const formattedDate = computed(() => {
// 简单的日期格式化，实际项目中可能需要更复杂的处理
// 直接返回已经格式化的日期字符串
return props.date
})

20
src/pages/NoteEditorPage.vue
View File

@@ -43,6 +43,7 @@ import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useAppStore } from '../stores/useAppStore'
import Header from '../components/Header.vue'
import RichTextEditor from '../components/RichTextEditor.vue'
import { formatNoteEditorDate } from '../utils/dateUtils'
const props = defineProps({
id: {
@@ -158,23 +159,10 @@ const handleContentChange = (newContent) => {
// 计算属性
const formattedTime = computed(() => {
const now = new Date()
const date = existingNote?.updatedAt ? new Date(existingNote.updatedAt) : now
// 如果是今天
if (date.toDateString() === now.toDateString()) {
return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
if (existingNote?.updatedAt) {
return formatNoteEditorDate(existingNote.updatedAt)
}
// 如果是昨天
const yesterday = new Date(now)
yesterday.setDate(yesterday.getDate() - 1)
if (date.toDateString() === yesterday.toDateString()) {
return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
// 其他情况显示月日
return `${date.getMonth() + 1}月${date.getDate()}日`
return formatNoteEditorDate(new Date())
})
const wordCount = computed(() => {

27
src/pages/NoteListPage.vue
View File

@@ -65,6 +65,7 @@ import NoteItem from '../components/NoteItem.vue'
import Header from '../components/Header.vue'
import FolderManage from '../components/FolderManage.vue'
import SearchBar from '../components/SearchBar.vue'
import { formatNoteListDate } from '../utils/dateUtils'
const store = useAppStore()
@@ -318,31 +319,7 @@ const debouncedHandleSearch = debounceSearch((query) => {
// 改进的日期格式化函数
const formatDate = dateString => {
const date = new Date(dateString)
const now = new Date()
// 计算日期差
const diffTime = now - date
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
// 今天的便签显示时间
if (diffDays === 0) {
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
// 昨天的便签显示"昨天"
if (diffDays === 1) {
return '昨天'
}
// 一周内的便签显示星期几
if (diffDays < 7) {
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
return weekdays[date.getDay()]
}
// 超过一周的便签显示月日
return `${date.getMonth() + 1}/${date.getDate()}`
return formatNoteListDate(dateString)
}
const setCurrentFolder = folder => {

46
src/stores/useAppStore.js
View File

@@ -1,5 +1,6 @@
import { defineStore } from 'pinia'
import * as storage from '../utils/storage'
import { getCurrentDateTime, getPastDate } from '../utils/dateUtils'
export const useAppStore = defineStore('app', {
state: () => ({
@@ -41,14 +42,21 @@ export const useAppStore = defineStore('app', {
// 加载mock数据
async loadMockData() {
// Mock notes
// Mock notes - 使用固定的日期值以避免每次运行时变化
const fixedCurrentDate = '2025-10-12T10:00:00.000Z';
const fixedYesterday = '2025-10-11T10:00:00.000Z';
const fixedTwoDaysAgo = '2025-10-10T10:00:00.000Z';
const fixedThreeDaysAgo = '2025-10-09T10:00:00.000Z';
const fixedFourDaysAgo = '2025-10-08T10:00:00.000Z';
const fixedFiveDaysAgo = '2025-10-07T10:00:00.000Z';
const mockNotes = [
{
id: '1',
title: '欢迎使用锤子便签',
content: '这是一个功能强大的便签应用，您可以在这里记录您的想法、待办事项等。',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
createdAt: fixedCurrentDate,
updatedAt: fixedCurrentDate,
folderId: null,
isStarred: true,
isTop: true,
@@ -60,8 +68,8 @@ export const useAppStore = defineStore('app', {
id: '2',
title: '待办事项',
content: '1. 完成项目报告\n2. 购买 groceries\n3. 预约医生\n4. 给朋友打电话',
createdAt: new Date(Date.now() - 86400000).toISOString(), // 昨天
updatedAt: new Date(Date.now() - 86400000).toISOString(),
createdAt: fixedYesterday,
updatedAt: fixedYesterday,
folderId: null,
isStarred: true,
isTop: false,
@@ -73,8 +81,8 @@ export const useAppStore = defineStore('app', {
id: '3',
title: '购物清单',
content: '苹果\n牛奶\n面包\n鸡蛋\n西红柿\n咖啡',
createdAt: new Date(Date.now() - 172800000).toISOString(), // 前天
updatedAt: new Date(Date.now() - 172800000).toISOString(),
createdAt: fixedTwoDaysAgo,
updatedAt: fixedTwoDaysAgo,
folderId: null,
isStarred: false,
isTop: false,
@@ -86,8 +94,8 @@ export const useAppStore = defineStore('app', {
id: '4',
title: '项目想法',
content: '1. 实现云同步功能\n2. 添加深色模式\n3. 支持Markdown语法\n4. 添加标签功能',
createdAt: new Date(Date.now() - 259200000).toISOString(), // 3天前
updatedAt: new Date(Date.now() - 259200000).toISOString(),
createdAt: fixedThreeDaysAgo,
updatedAt: fixedThreeDaysAgo,
folderId: null,
isStarred: false,
isTop: false,
@@ -99,8 +107,8 @@ export const useAppStore = defineStore('app', {
id: '5',
title: '读书笔记',
content: '《Vue.js实战》\n- 组件化思想是Vue的核心\n- 理解响应式原理很重要\n- Pinia是Vue 3的推荐状态管理库',
createdAt: new Date(Date.now() - 345600000).toISOString(), // 4天前
updatedAt: new Date(Date.now() - 345600000).toISOString(),
createdAt: fixedFourDaysAgo,
updatedAt: fixedFourDaysAgo,
folderId: null,
isStarred: false,
isTop: false,
@@ -112,33 +120,33 @@ export const useAppStore = defineStore('app', {
id: '6',
title: '已删除的便签',
content: '这是一条已删除的便签示例，应该只在回收站中显示。',
createdAt: new Date(Date.now() - 432000000).toISOString(), // 5天前
updatedAt: new Date(Date.now() - 432000000).toISOString(),
createdAt: fixedFiveDaysAgo,
updatedAt: fixedFiveDaysAgo,
folderId: null,
isStarred: false,
isTop: false,
hasImage: false,
isDeleted: true,
deletedAt: new Date(Date.now() - 86400000).toISOString(), // 1天前删除
deletedAt: fixedYesterday,
},
]
// Mock folders
// Mock folders - 使用固定的日期值
const mockFolders = [
{
id: 'folder1',
name: '工作',
createdAt: new Date().toISOString(),
createdAt: '2025-10-12T10:00:00.000Z',
},
{
id: 'folder2',
name: '个人',
createdAt: new Date().toISOString(),
createdAt: '2025-10-12T10:00:00.000Z',
},
{
id: 'folder3',
name: '学习',
createdAt: new Date().toISOString(),
createdAt: '2025-10-12T10:00:00.000Z',
},
]
@@ -229,7 +237,7 @@ export const useAppStore = defineStore('app', {
// 将便签移至回收站
async moveToTrash(id) {
try {
const updatedNote = await storage.updateNote(id, { isDeleted: true, deletedAt: new Date().toISOString() })
const updatedNote = await storage.updateNote(id, { isDeleted: true, deletedAt: getCurrentDateTime() })
if (updatedNote) {
const index = this.notes.findIndex(note => note.id === id)
if (index !== -1) {

124
src/utils/dateUtils.js Normal file
View File

@@ -0,0 +1,124 @@
import moment from 'moment'
// 设置中文语言包
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
/**
* 格式化日期时间
* @param {string|Date} date - 日期对象或日期字符串
* @param {string} format - 格式化字符串，默认为 'YYYY-MM-DD HH:mm'
* @returns {string} 格式化后的日期时间字符串
*/
export const formatDateTime = (date, format = 'YYYY-MM-DD HH:mm') => {
return moment(date).format(format)
}
/**
* 格式化相对时间（如：5分钟前，2小时前等）
* @param {string|Date} date - 日期对象或日期字符串
* @returns {string} 相对时间字符串
*/
export const formatRelativeTime = (date) => {
return moment(date).fromNow()
}
/**
* 格式化便签列表时间
* @param {string|Date} date - 日期对象或日期字符串
* @returns {string} 格式化后的日期时间字符串
*/
export const formatNoteListDate = (date) => {
const momentDate = moment(date)
const now = moment()
const diffDays = now.diff(momentDate, 'days')
// 今天
if (diffDays === 0) {
return momentDate.format('[今天] A h:mm').replace('AM', '上午').replace('PM', '下午')
}
// 昨天
if (diffDays === 1) {
return momentDate.format('[昨天] A h:mm').replace('AM', '上午').replace('PM', '下午')
}
// 超过两天但小于一周
if (diffDays > 1 && diffDays < 7) {
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return momentDate.format(`[${weekdays[momentDate.day()]}] M/D A h:mm`).replace('AM', '上午').replace('PM', '下午')
}
// 超过一周但小于一年
if (diffDays >= 7 && diffDays < 365) {
return momentDate.format(`[${diffDays}天前] M/D A h:mm`).replace('AM', '上午').replace('PM', '下午')
}
// 超过一年
return momentDate.format(`[${diffDays}天前] YYYY/M/D A h:mm`).replace('AM', '上午').replace('PM', '下午')
}
/**
* 格式化便签编辑页时间
* @param {string|Date} date - 日期对象或日期字符串
* @returns {string} 格式化后的日期时间字符串
*/
export const formatNoteEditorDate = (date) => {
const momentDate = moment(date)
const now = moment()
const diffDays = now.diff(momentDate, 'days')
// 今天
if (diffDays === 0) {
return momentDate.format('[今天] A h:mm').replace('AM', '上午').replace('PM', '下午')
}
// 昨天
if (diffDays === 1) {
return momentDate.format('[昨天] A h:mm').replace('AM', '上午').replace('PM', '下午')
}
// 超过两天但小于一个月
if (diffDays > 1 && diffDays < 30) {
return momentDate.format('M/D A h:mm').replace('AM', '上午').replace('PM', '下午')
}
// 超过一个月
return momentDate.format('YYYY/M/D A h:mm').replace('AM', '上午').replace('PM', '下午')
}
/**
* 获取过去的日期
* @param {number} amount - 数量
* @param {string} unit - 单位（days, weeks, months, years等）
* @returns {string} ISO格式的日期字符串
*/
export const getPastDate = (amount, unit) => {
return moment().subtract(amount, unit).toISOString()
}
/**
* 获取当前日期时间
* @returns {string} ISO格式的日期字符串
*/
export const getCurrentDateTime = () => {
return moment().toISOString()
}
/**
* 获取时间戳
* @returns {number} 时间戳
*/
export const getTimestamp = () => {
return moment().valueOf()
}
export default {
formatDateTime,
formatRelativeTime,
formatNoteListDate,
formatNoteEditorDate,
getPastDate,
getCurrentDateTime,
getTimestamp
}

14
src/utils/storage.js
View File

@@ -1,3 +1,5 @@
import { getCurrentDateTime, getTimestamp } from './dateUtils'
// Storage keys
const NOTES_KEY = 'notes';
const FOLDERS_KEY = 'folders';
@@ -25,9 +27,9 @@ export const saveNotes = async (notes) => {
export const addNote = async (note) => {
const newNote = {
...note,
id: Date.now().toString(),
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
id: getTimestamp().toString(),
createdAt: getCurrentDateTime(),
updatedAt: getCurrentDateTime(),
isStarred: note.isStarred || false,
isTop: note.isTop || false,
hasImage: note.hasImage || false,
@@ -51,7 +53,7 @@ export const updateNote = async (id, updates) => {
const updatedNote = {
...notes[index],
...updates,
updatedAt: new Date().toISOString(),
updatedAt: getCurrentDateTime(),
};
notes[index] = updatedNote;
@@ -92,8 +94,8 @@ export const saveFolders = async (folders) => {
export const addFolder = async (folder) => {
const newFolder = {
...folder,
id: Date.now().toString(),
createdAt: new Date().toISOString(),
id: getTimestamp().toString(),
createdAt: getCurrentDateTime(),
};
const folders = await getFolders();