g82tt
68be41e7a2
# 项目概述 个人浏览器首页导航应用，支持书签分类管理、搜索引擎快捷搜索、 必应每日壁纸轮播、前后端分离部署，适配 1Panel 服务器（Docker 模式）。 # 技术栈 - 前端：Vue 3 + TypeScript + Vite + Pinia + Capacitor（Android 打包） - 后端：.NET 8 + SqlSugar（多数据库） + SQLite/MySQL + Swashbuckle - 部署：1Panel 应用商店自定义应用（Docker Compose 模式） # 项目结构 - backend/ .NET 8 API 后端（8 个 Controller + 15 个 Service） - frontend/ Vue 3 前端（19 个组件 + 9 个 API 模块 + 5 个 Store） - docker/ Docker 部署文件（后端镜像 + Nginx 反代） - docs/ 部署手册（1Panel 实战版） - scripts/ E2E 测试脚本 # 已实现功能 - 书签管理：增删改查 + 树形分类 + 拖拽排序 + 主色自适应 - 搜索引擎：8 个内置引擎 + 自定义引擎 + favicon 自动抓取 - 必应壁纸：每日轮播 + 多分辨率自动选择 + 1.6MP 质量优先 - 全局设置：主题/行为/数据/工具 4 分类 + 跨设备同步 - 文件上传：图标/书签/通用（容器持久化 + 跨域 URL 拼接） - 同步：基于变更日志的设备间数据同步 - 跨域部署：前后端分离 + runtime config.json 无需重新编译 # 进度记录 - 已完成 P0~P52 共 53 个开发节点（详细见 说明文档.md） - 当前版本：v1.0 部署就绪 # 部署文档 - README.md：项目说明 + 快速开始 - 说明文档.md：完整开发进度（中文） - docs/DEPLOY.md：1Panel 部署手册（Docker 模式）
65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* Toast 通知宿主。
|
|
* 暴露一个全局 list，由 useToasts() 调用 pushToast 添加。
|
|
*/
|
|
import { useToasts } from '@/utils/toast';
|
|
import AppIcon from './AppIcon.vue';
|
|
|
|
const { list, removeToast } = useToasts();
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div class="toast-host">
|
|
<TransitionGroup name="toast">
|
|
<div v-for="t in list" :key="t.id" :class="['toast', `toast--${t.type}`]">
|
|
<span class="toast__msg">{{ t.message }}</span>
|
|
<button class="toast__close" @click="removeToast(t.id)">
|
|
<AppIcon name="x" :size="14" />
|
|
</button>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toast-host {
|
|
position: fixed;
|
|
right: 24px; bottom: 24px;
|
|
z-index: var(--z-toast);
|
|
display: flex; flex-direction: column; gap: 8px;
|
|
pointer-events: none;
|
|
}
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 10px 14px;
|
|
background: var(--glass-bg-strong);
|
|
border: 1px solid var(--color-border-strong);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-lg);
|
|
backdrop-filter: blur(20px);
|
|
min-width: 200px; max-width: 360px;
|
|
font-size: var(--font-sm);
|
|
}
|
|
.toast--success { border-left: 3px solid var(--color-success); }
|
|
.toast--error { border-left: 3px solid var(--color-danger); }
|
|
.toast--warning { border-left: 3px solid var(--color-warning); }
|
|
.toast--info { border-left: 3px solid var(--color-accent); }
|
|
|
|
.toast__msg { flex: 1; }
|
|
.toast__close {
|
|
width: 22px; height: 22px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.toast__close:hover { color: var(--color-text); background: var(--color-surface); }
|
|
|
|
.toast-enter-active, .toast-leave-active { transition: all var(--duration-base) var(--ease); }
|
|
.toast-enter-from { opacity: 0; transform: translateX(20px); }
|
|
.toast-leave-to { opacity: 0; transform: translateX(20px); }
|
|
</style>
|