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 模式）
108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* AppButton：玻璃拟态风格的按钮，支持 variant。
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'ghost' | 'danger' | 'text';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
iconOnly?: boolean;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
type?: 'button' | 'submit';
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'ghost',
|
|
size: 'md',
|
|
type: 'button',
|
|
disabled: false,
|
|
loading: false,
|
|
iconOnly: false
|
|
});
|
|
|
|
defineEmits<{ (e: 'click', ev: MouseEvent): void }>();
|
|
|
|
const classes = computed(() => [
|
|
'app-btn',
|
|
`app-btn--${props.variant}`,
|
|
`app-btn--${props.size}`,
|
|
props.iconOnly && 'app-btn--icon',
|
|
props.loading && 'is-loading'
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="classes"
|
|
:type="type"
|
|
:disabled="disabled || loading"
|
|
@click="$emit('click', $event)"
|
|
>
|
|
<span v-if="loading" class="app-btn__spinner" />
|
|
<slot v-else />
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
border-radius: var(--radius-md);
|
|
font-weight: var(--weight-medium);
|
|
transition: background var(--duration-fast) var(--ease),
|
|
color var(--duration-fast) var(--ease),
|
|
transform var(--duration-fast) var(--ease),
|
|
box-shadow var(--duration-fast) var(--ease);
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.app-btn:not(:disabled):active { transform: scale(0.97); }
|
|
|
|
.app-btn--sm { padding: 4px 10px; font-size: var(--font-sm); min-height: 28px; }
|
|
.app-btn--md { padding: 6px 14px; font-size: var(--font-base); min-height: 36px; }
|
|
.app-btn--lg { padding: 10px 20px; font-size: var(--font-md); min-height: 44px; }
|
|
|
|
.app-btn--icon.app-btn--sm { padding: 4px; min-width: 28px; }
|
|
.app-btn--icon.app-btn--md { padding: 6px; min-width: 36px; }
|
|
.app-btn--icon.app-btn--lg { padding: 10px; min-width: 44px; }
|
|
|
|
.app-btn--primary {
|
|
background: var(--color-accent);
|
|
color: white;
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
.app-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
|
|
|
|
.app-btn--ghost {
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.app-btn--ghost:hover:not(:disabled) { background: var(--color-surface-strong); border-color: var(--color-border-strong); }
|
|
|
|
.app-btn--text {
|
|
color: var(--color-text-muted);
|
|
}
|
|
.app-btn--text:hover:not(:disabled) { color: var(--color-text); background: var(--color-accent-soft); }
|
|
|
|
.app-btn--danger {
|
|
background: transparent;
|
|
color: var(--color-danger);
|
|
border: 1px solid transparent;
|
|
}
|
|
.app-btn--danger:hover:not(:disabled) { background: rgba(255,118,117,.12); }
|
|
|
|
.app-btn__spinner {
|
|
width: 14px; height: 14px;
|
|
border: 2px solid currentColor;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin .8s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|