-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 时光胶囊
- 收件箱
- 发件箱
- 个人中心
-
+
-
+
@@ -112,13 +82,18 @@ import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showFailToast } from 'vant'
import { userState, mailState, capsuleState, mailActions, capsuleActions } from '../store'
+import SearchComponent from '@/components/SearchComponent.vue'
+import BottomTabbar from '@/components/BottomTabbar.vue'
export default {
+ components: {
+ SearchComponent,
+ BottomTabbar
+ },
name: 'Home',
setup() {
const router = useRouter()
const active = ref(0)
- const stars = ref(null)
const capsulesSpace = ref(null)
const showSearch = ref(false)
const showNotifications = ref(false)
@@ -139,37 +114,6 @@ export default {
return '晚上好，今天过得怎么样'
})
- // 生成星空背景
- const generateStars = () => {
- if (!stars.value) return
-
- const starsContainer = stars.value
- const starCount = 150
-
- for (let i = 0; i < starCount; i++) {
- const star = document.createElement('div')
- star.className = 'star'
-
- // 随机位置
- const left = Math.random() * 100
- const top = Math.random() * 100
-
- // 随机大小
- const size = Math.random() * 3 + 1
-
- // 随机动画延迟
- const delay = Math.random() * 4
-
- star.style.left = `${left}%`
- star.style.top = `${top}%`
- star.style.width = `${size}px`
- star.style.height = `${size}px`
- star.style.animationDelay = `${delay}s`
-
- starsContainer.appendChild(star)
- }
- }
-
// 获取胶囊样式
const getCapsuleStyle = (capsule, index) => {
// 添加基于索引的延迟动画
@@ -262,24 +206,14 @@ export default {
router.push(`/capsule/${capsule.mailId || capsule.capsuleId || capsule.id}`)
}
- // 跳转到撰写页面
- const goToCompose = () => {
- router.push('/compose')
- }
-
// 搜索处理
- const onSearch = (value) => {
- if (!value) {
+ const onSearch = () => {
+ if (!searchValue.value.trim()) {
showFailToast('请输入搜索内容')
return
}
-
- // 暂时显示提示，因为搜索页面尚未实现
- showFailToast(`搜索功能开发中，您搜索了: ${value}`)
- showSearch.value = false
-
- // TODO: 实现搜索功能后，可以跳转到搜索页面
- // router.push(`/search?q=${encodeURIComponent(value)}`)
+ showFailToast(`搜索: ${searchValue.value}`)
+ // TODO: 实现搜索功能
}
// 获取时光胶囊数据
@@ -314,7 +248,6 @@ export default {
}
onMounted(async () => {
- generateStars()
await fetchCapsules()
await fetchNotifications()
})
@@ -323,12 +256,10 @@ export default {
active,
userName,
greetingText,
- stars,
capsulesSpace,
capsules,
showSearch,
showNotifications,
- searchValue,
notifications,
activeCapsule,
getCapsuleStyle,
@@ -341,7 +272,6 @@ export default {
formatDate,
formatTime,
openCapsule,
- goToCompose,
onSearch
}
}
@@ -538,30 +468,6 @@ export default {
}
}
-.fab-container {
- position: absolute;
- bottom: 80px;
- right: 20px;
- z-index: 10;
-}
-
-.fab-button {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- border: none;
- font-size: 14px;
- min-height: 44px;
- min-width: 44px;
- -webkit-tap-highlight-color: transparent;
- transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.fab-button:active {
- transform: scale(0.95);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
.search-popup {
padding: 20px;
}
@@ -599,7 +505,7 @@ export default {
}
.notification-time {
- font-size: 12px;
- color: var(--text-secondary);
-}
+ font-size: 12px;
+ color: var(--text-secondary);
+ }
\ No newline at end of file
diff --git a/src/views/Inbox.vue b/src/views/Inbox.vue
index f538440..b266399 100644
--- a/src/views/Inbox.vue
+++ b/src/views/Inbox.vue
@@ -1,10 +1,5 @@
-
-
-
@@ -54,36 +49,11 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -37,6 +32,10 @@
登录
+
+
测试账号：test@example.com / testuser
+密码：任意密码
+
还没有账号？立即注册
@@ -59,38 +58,6 @@ export default {
const router = useRouter()
const email = ref('')
const password = ref('')
- const stars = ref(null)
-
- // 生成星空背景
- const generateStars = () => {
- if (!stars.value) return
-
- const starsContainer = stars.value
- const starCount = 100
-
- for (let i = 0; i < starCount; i++) {
- const star = document.createElement('div')
- star.className = 'star'
-
- // 随机位置
- const left = Math.random() * 100
- const top = Math.random() * 100
-
- // 随机大小
- const size = Math.random() * 3 + 1
-
- // 随机动画延迟
- const delay = Math.random() * 4
-
- star.style.left = `${left}%`
- star.style.top = `${top}%`
- star.style.width = `${size}px`
- star.style.height = `${size}px`
- star.style.animationDelay = `${delay}s`
-
- starsContainer.appendChild(star)
- }
- }
// 登录处理
const onSubmit = async () => {
@@ -124,13 +91,12 @@ export default {
}
onMounted(() => {
- generateStars()
+ // 组件挂载后的初始化代码
})
return {
email,
password,
- stars,
onSubmit,
goToRegister
}
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 21a97a5..dc33a95 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -1,10 +1,5 @@
-
-
-
-
-
-
-
-
-
-
@@ -85,38 +80,6 @@ export default {
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
- const stars = ref(null)
-
- // 生成星空背景
- const generateStars = () => {
- if (!stars.value) return
-
- const starsContainer = stars.value
- const starCount = 100
-
- for (let i = 0; i < starCount; i++) {
- const star = document.createElement('div')
- star.className = 'star'
-
- // 随机位置
- const left = Math.random() * 100
- const top = Math.random() * 100
-
- // 随机大小
- const size = Math.random() * 3 + 1
-
- // 随机动画延迟
- const delay = Math.random() * 4
-
- star.style.left = `${left}%`
- star.style.top = `${top}%`
- star.style.width = `${size}px`
- star.style.height = `${size}px`
- star.style.animationDelay = `${delay}s`
-
- starsContainer.appendChild(star)
- }
- }
// 验证密码
const validatePassword = () => {
@@ -159,7 +122,7 @@ export default {
}
onMounted(() => {
- generateStars()
+ // 组件挂载后的初始化代码
})
return {
@@ -167,7 +130,6 @@ export default {
email,
password,
confirmPassword,
- stars,
validatePassword,
onSubmit,
goToLogin
diff --git a/src/views/Sent.vue b/src/views/Sent.vue
index 28d905e..0c656b8 100644
--- a/src/views/Sent.vue
+++ b/src/views/Sent.vue
@@ -1,10 +1,5 @@
-
-
-
-
-
-
-
-
-
-