mirror of
https://github.com/xiangshu233/vue3-vant4-mobile.git
synced 2026-04-29 15:08:11 +08:00
fbc12f02f9
升级核心依赖与构建链路（Vite/Vue/Pinia/VueUse/Vant 等）并完成兼容调整 Vibe Coding 了一个导航组件 FloatingNavBar 修复暗黑模式 switch 动画异常：统一 useDark 行为并设置 disableTransition: false，恢复 Vant Switch 过渡动画 调整亮色模式下页面背景与卡片层次（以边框+轻阴影为主），降低过强对比并提升一致性 我的页面入口 icon 统一为线性风格
47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<div class="example-page my-4 pb-24">
|
|
<van-cell-group inset>
|
|
<van-cell center title="🌓 暗黑模式">
|
|
<template #right-icon>
|
|
<i inline-block align-middle i="dark:carbon-moon carbon-sun" />
|
|
<span class="ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
|
|
<van-switch v-model="darkSwitch" size="22" />
|
|
</template>
|
|
</van-cell>
|
|
<template v-for="item in menuItems" :key="item.route">
|
|
<van-cell :title="item.title" :to="item.route" is-link />
|
|
</template>
|
|
</van-cell-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useDark } from '@vueuse/core'
|
|
import { useDesignSettingStore } from '@/store/modules/designSetting'
|
|
|
|
const designStore = useDesignSettingStore()
|
|
|
|
const isDark = useDark({
|
|
valueDark: 'dark',
|
|
valueLight: 'light',
|
|
disableTransition: false,
|
|
})
|
|
|
|
const darkSwitch = computed({
|
|
get: () => isDark.value,
|
|
set: (value: boolean) => {
|
|
isDark.value = value
|
|
designStore.setDarkMode(value ? 'dark' : 'light')
|
|
},
|
|
})
|
|
|
|
const menuItems = [
|
|
{ title: '🐗 keep-alive', route: '/editNickname' },
|
|
{ title: '🦘 404 页演示', route: '/404' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
</style>
|