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 模式）
494 lines
36 KiB
HTML
494 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>浏览器首页 - 设置</title>
|
|
<style id="theme-vars">
|
|
/* ===== Browser Homepage - Brand CSS ===== */
|
|
/* Dark theme with glassmorphism, inspired by gaming browser start pages */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
/* ---- Brand Colors ---- */
|
|
--color-bg-primary: #0d0d12;
|
|
--color-bg-secondary: #16161e;
|
|
--color-bg-tertiary: #1e1e2a;
|
|
--color-bg-card: rgba(30, 30, 42, 0.65);
|
|
--color-bg-card-hover: rgba(40, 40, 56, 0.75);
|
|
--color-bg-sidebar: rgba(13, 13, 18, 0.85);
|
|
--color-bg-search: rgba(22, 22, 30, 0.8);
|
|
--color-bg-input: rgba(30, 30, 42, 0.5);
|
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Text */
|
|
--color-text-primary: #e8e8f0;
|
|
--color-text-secondary: #9494a8;
|
|
--color-text-muted: #5e5e72;
|
|
--color-text-inverse: #0d0d12;
|
|
|
|
/* Brand accent */
|
|
--color-brand: #6c5ce7;
|
|
--color-brand-light: #a29bfe;
|
|
--color-brand-hover: #7d6ff0;
|
|
|
|
/* Border */
|
|
--color-border: rgba(255, 255, 255, 0.06);
|
|
--color-border-hover: rgba(255, 255, 255, 0.12);
|
|
--color-border-active: rgba(108, 92, 231, 0.5);
|
|
|
|
/* State colors */
|
|
--state-success: #00b894;
|
|
--state-warning: #fdcb6e;
|
|
--state-error: #e17055;
|
|
--state-info: #74b9ff;
|
|
|
|
/* ---- Typography ---- */
|
|
--font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-heading: 'Inter', 'Noto Sans SC', sans-serif;
|
|
|
|
--text-xs: 11px;
|
|
--text-sm: 13px;
|
|
--text-base: 14px;
|
|
--text-lg: 16px;
|
|
--text-xl: 20px;
|
|
--text-2xl: 24px;
|
|
--text-3xl: 32px;
|
|
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0em;
|
|
|
|
/* ---- Spacing ---- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
|
|
/* ---- Radius ---- */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ---- Shadows ---- */
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--shadow-float: 0 8px 32px rgba(0, 0, 0, 0.25);
|
|
--shadow-dropdown: 0 12px 48px rgba(0, 0, 0, 0.35);
|
|
|
|
/* ---- Glassmorphism ---- */
|
|
--glass-bg: rgba(30, 30, 42, 0.65);
|
|
--glass-blur: 12px;
|
|
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
|
/* ---- Transitions ---- */
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 250ms ease;
|
|
--transition-slow: 400ms ease;
|
|
|
|
/* ---- Sidebar ---- */
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed-width: 64px;
|
|
|
|
/* ---- Z-index ---- */
|
|
--z-sidebar: 100;
|
|
--z-dropdown: 200;
|
|
--z-modal: 300;
|
|
--z-tooltip: 400;
|
|
}
|
|
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
|
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
|
<style type="text/tailwindcss">
|
|
@theme inline {
|
|
--color-border: var(--color-border);
|
|
}
|
|
@layer base {
|
|
body { background: var(--color-bg-primary); color: var(--color-text-primary); }
|
|
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
|
th { @apply whitespace-nowrap; }
|
|
}
|
|
</style>
|
|
<style>
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
[data-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
background-color: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen font-sans antialiased" style="font-family: var(--font-sans);">
|
|
<main class="flex min-h-screen relative">
|
|
<!-- ===== SOURCE PAGE (DIMMED) ===== -->
|
|
<div class="source-page relative w-full" style="filter: brightness(0.55); pointer-events: none;">
|
|
<!-- LEFT SIDEBAR -->
|
|
<aside class="fixed left-0 top-0 bottom-0 z-[var(--z-sidebar)] flex flex-col" style="width: var(--sidebar-width); background: var(--color-bg-sidebar); border-right: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));">
|
|
<!-- User avatar area -->
|
|
<div class="flex items-center gap-3 px-5 py-5" style="border-bottom: var(--glass-border);">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" style="background: var(--color-brand); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: 600;">U</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate" style="font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary);">User</p>
|
|
<p class="truncate" style="font-size: 11px; color: var(--color-text-muted);">myhomepage</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation tree -->
|
|
<nav class="flex-1 overflow-y-auto py-3 px-3 no-scrollbar" aria-label="Category navigation">
|
|
<a href="#" class="nav-item active flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors duration-150" data-dom-id="nav-home" style="color: var(--color-brand); background: rgba(108, 92, 231, 0.12);" data-nav-key="home" data-active="true">
|
|
<i data-lucide="home" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">主页</span>
|
|
</a>
|
|
<div class="mb-1">
|
|
<button class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg w-full transition-colors duration-150 cursor-pointer" style="color: var(--color-text-secondary); background: transparent;" aria-expanded="true">
|
|
<i data-lucide="wrench" class="w-5 h-5 shrink-0"></i>
|
|
<span class="flex-1 text-left" style="font-size: var(--text-base); font-weight: 500;">常用工具</span>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 shrink-0"></i>
|
|
</button>
|
|
<div class="sub-nav ml-5 mt-1 space-y-0.5">
|
|
<a href="#" class="sub-nav-item flex items-center gap-3 px-3 py-1.5 rounded-md transition-colors duration-150" style="color: var(--color-text-muted); background: transparent;">
|
|
<i data-lucide="search" class="w-4 h-4 shrink-0"></i>
|
|
<span style="font-size: var(--text-sm);">搜索引擎</span>
|
|
</a>
|
|
<a href="#" class="sub-nav-item flex items-center gap-3 px-3 py-1.5 rounded-md transition-colors duration-150" style="color: var(--color-text-muted); background: transparent;">
|
|
<i data-lucide="bot" class="w-4 h-4 shrink-0"></i>
|
|
<span style="font-size: var(--text-sm);">AI工具</span>
|
|
</a>
|
|
<a href="#" class="sub-nav-item flex items-center gap-3 px-3 py-1.5 rounded-md transition-colors duration-150" style="color: var(--color-text-muted); background: transparent;">
|
|
<i data-lucide="code-2" class="w-4 h-4 shrink-0"></i>
|
|
<span style="font-size: var(--text-sm);">开发工具</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors duration-150" style="color: var(--color-text-secondary); background: transparent;">
|
|
<i data-lucide="shopping-bag" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">购物</span>
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors duration-150" style="color: var(--color-text-secondary); background: transparent;">
|
|
<i data-lucide="play-circle" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">视频</span>
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors duration-150" style="color: var(--color-text-secondary); background: transparent;">
|
|
<i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">资讯</span>
|
|
</a>
|
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors duration-150" style="color: var(--color-text-secondary); background: transparent;">
|
|
<i data-lucide="message-circle" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">社交</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Settings at bottom (ACTIVE STATE) -->
|
|
<div class="px-3 pb-4" style="border-top: var(--glass-border);">
|
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg mt-3 transition-colors duration-150" data-dom-id="nav-settings-active" style="color: var(--color-brand); background: rgba(108, 92, 231, 0.18);" data-nav-key="settings" data-active="true">
|
|
<i data-lucide="settings" class="w-5 h-5 shrink-0"></i>
|
|
<span style="font-size: var(--text-base); font-weight: 500;">设置</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- RIGHT MAIN AREA -->
|
|
<div class="flex-1 flex flex-col min-h-screen" style="margin-left: var(--sidebar-width);">
|
|
<section class="flex items-center justify-center px-8 pt-10 pb-6" aria-label="Search">
|
|
<div class="relative w-full" style="max-width: 640px;">
|
|
<div class="flex items-center rounded-lg overflow-hidden" style="background: var(--color-bg-search); border: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); height: 46px;">
|
|
<button class="flex items-center gap-2 px-3 h-full shrink-0" style="border-right: var(--glass-border); color: var(--color-text-secondary); background: transparent;">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: var(--color-brand);">
|
|
<circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M12 8V4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span style="font-size: var(--text-sm); font-weight: 500;">百度</span>
|
|
<i data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<input type="text" placeholder="搜索或输入网址" class="flex-1 h-full bg-transparent outline-none px-4" style="color: var(--color-text-primary); font-size: var(--text-base);">
|
|
<button class="flex items-center justify-center w-10 h-full shrink-0" style="color: var(--color-text-muted); background: transparent;" aria-label="Search">
|
|
<i data-lucide="search" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex-1 overflow-y-auto px-8 pb-8" aria-label="Link cards">
|
|
<div class="flex items-center justify-between mb-5" style="max-width: 1120px; margin-left: auto; margin-right: auto;">
|
|
<h1 style="font-size: var(--text-xl); font-weight: 600; color: var(--color-text-primary); text-wrap: balance; word-break: keep-all;">常用工具</h1>
|
|
<span style="font-size: var(--text-sm); color: var(--color-text-muted);">8 个链接</span>
|
|
</div>
|
|
<div class="grid gap-4" style="grid-template-columns: repeat(4, 1fr); max-width: 1120px; margin-left: auto; margin-right: auto;">
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(16, 163, 127, 0.15);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: #10a37f;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">ChatGPT</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">AI对话助手，智能问答</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(230, 230, 230, 0.1);">
|
|
<i data-lucide="github" class="w-5 h-5" style="color: var(--color-text-primary);"></i>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">GitHub</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">代码托管与协作平台</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(244, 128, 36, 0.12);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: #f48024;"><path d="M15.73 21.02l-.6-2.35h-6.26l-.6 2.35H4.67L8.2 7h7.6l3.53 14.02h-3.6zm-1.33-5.33l-2.2-8.52h-.2l-2.2 8.52h4.6zM2 22h20v2H2v-2z" fill="currentColor"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">Stack Overflow</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">开发者问答社区</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(121, 79, 169, 0.15);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: #794fa9;"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">MDN Web Docs</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">Web 技术文档参考</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(0, 122, 204, 0.15);">
|
|
<i data-lucide="code-2" class="w-5 h-5" style="color: #007ac1;"></i>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">VS Code</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">轻量级代码编辑器</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(230, 230, 230, 0.08);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: var(--color-text-primary);"><path d="M4.5 4.5h15v15h-15z" stroke="currentColor" stroke-width="1.5" rx="2"/><path d="M8 9h8M8 12h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">Notion</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">笔记与协作空间</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(242, 78, 30, 0.12);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: #f24e1e;"><path d="M8 2a3 3 0 100 6 3 3 0 000-6zm0 8a3 3 0 100 6 3 3 0 000-6zm0 8a3 3 0 100 6 3 3 0 000-6zm8-8a3 3 0 100 6 3 3 0 000-6z" stroke="currentColor" stroke-width="1.5"/><path d="M16 2a3 3 0 110 6V2z" fill="currentColor"/><path d="M16 8a3 3 0 110 6V8z" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">Figma</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">在线设计协作工具</p>
|
|
</a>
|
|
<a href="#" class="link-card group flex flex-col gap-3 rounded-lg p-4 transition-all duration-150" style="background: var(--color-bg-card); border: var(--glass-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: rgba(140, 103, 255, 0.12);">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" style="color: #8c67ff;"><circle cx="12" cy="12" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M12 9v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<h3 style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">Canva</h3>
|
|
</div>
|
|
<p style="font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal);">在线平面设计平台</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== DIM BACKDROP (covers source page, clickable to close) ===== -->
|
|
<div class="fixed inset-0 z-[var(--z-modal)]" data-dom-id="settings-backdrop" aria-label="Close settings" role="button" tabindex="0" style="background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer;"></div>
|
|
|
|
<!-- ===== SETTINGS POPOVER (OPEN STATE) ===== -->
|
|
<div class="settings-popover fixed z-[calc(var(--z-modal)+1)] flex flex-col" data-dom-id="settings-popover" role="dialog" aria-modal="true" aria-labelledby="settings-title"
|
|
style="left: calc(var(--sidebar-width) + 8px); bottom: 80px; width: 360px; max-height: calc(100vh - 100px);
|
|
background: rgba(22, 22, 30, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-dropdown); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
|
overflow: hidden;">
|
|
|
|
<!-- Popover Header -->
|
|
<header class="flex items-center justify-between px-5 py-4 shrink-0" style="border-bottom: 1px solid var(--color-border);">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="settings" class="w-4 h-4" style="color: var(--color-brand);"></i>
|
|
<h2 id="settings-title" style="font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary);">设置</h2>
|
|
</div>
|
|
<button class="settings-close flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-150" data-dom-id="settings-close-btn" aria-label="Close settings"
|
|
style="color: var(--color-text-secondary); background: transparent;">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Popover Body (scrollable) -->
|
|
<div class="flex-1 overflow-y-auto px-5 py-5 no-scrollbar" style="scrollbar-width: thin;">
|
|
|
|
<!-- SECTION: Theme Mode -->
|
|
<section class="mb-6" aria-label="Theme mode">
|
|
<h3 class="uppercase mb-3" style="font-size: 11px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.08em;">主题模式</h3>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<!-- Dark (selected) -->
|
|
<button class="theme-card selected flex flex-col items-center justify-center gap-2 py-3 rounded-lg transition-all duration-150" data-theme="dark" aria-pressed="true" data-dom-id="theme-dark"
|
|
style="background: rgba(108, 92, 231, 0.10); border: 1.5px solid var(--color-brand);">
|
|
<i data-lucide="moon" class="w-5 h-5" style="color: var(--color-brand);"></i>
|
|
<span style="font-size: var(--text-sm); font-weight: 500; color: var(--color-brand);">暗色</span>
|
|
</button>
|
|
<!-- Light -->
|
|
<button class="theme-card flex flex-col items-center justify-center gap-2 py-3 rounded-lg transition-all duration-150" data-theme="light" aria-pressed="false" data-dom-id="theme-light"
|
|
style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--color-border);">
|
|
<i data-lucide="sun" class="w-5 h-5" style="color: var(--color-text-secondary);"></i>
|
|
<span style="font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);">亮色</span>
|
|
</button>
|
|
<!-- Auto -->
|
|
<button class="theme-card flex flex-col items-center justify-center gap-2 py-3 rounded-lg transition-all duration-150" data-theme="auto" aria-pressed="false" data-dom-id="theme-auto"
|
|
style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--color-border);">
|
|
<i data-lucide="monitor" class="w-5 h-5" style="color: var(--color-text-secondary);"></i>
|
|
<span style="font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);">跟随系统</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION: Accent Color -->
|
|
<section class="mb-6" aria-label="Accent color">
|
|
<h3 class="uppercase mb-3" style="font-size: 11px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.08em;">主色调</h3>
|
|
<div class="flex items-center gap-4 px-1 py-1">
|
|
<!-- Purple (selected) -->
|
|
<button class="color-swatch selected relative w-8 h-8 rounded-full transition-all duration-150" data-color="#6c5ce7" aria-label="Purple accent" aria-pressed="true" data-dom-id="color-purple"
|
|
style="background: #6c5ce7; box-shadow: 0 0 0 2px var(--color-bg-tertiary), 0 0 0 4px #6c5ce7; outline: 2px solid #6c5ce7; outline-offset: -1px;">
|
|
<i data-lucide="check" class="w-4 h-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" style="color: #ffffff;"></i>
|
|
</button>
|
|
<!-- Blue -->
|
|
<button class="color-swatch relative w-8 h-8 rounded-full transition-all duration-150" data-color="#0984e3" aria-label="Blue accent" aria-pressed="false" data-dom-id="color-blue"
|
|
style="background: #0984e3;"></button>
|
|
<!-- Green -->
|
|
<button class="color-swatch relative w-8 h-8 rounded-full transition-all duration-150" data-color="#00b894" aria-label="Green accent" aria-pressed="false" data-dom-id="color-green"
|
|
style="background: #00b894;"></button>
|
|
<!-- Orange -->
|
|
<button class="color-swatch relative w-8 h-8 rounded-full transition-all duration-150" data-color="#e17055" aria-label="Orange accent" aria-pressed="false" data-dom-id="color-orange"
|
|
style="background: #e17055;"></button>
|
|
<!-- Pink -->
|
|
<button class="color-swatch relative w-8 h-8 rounded-full transition-all duration-150" data-color="#e84393" aria-label="Pink accent" aria-pressed="false" data-dom-id="color-pink"
|
|
style="background: #e84393;"></button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION: Background Image -->
|
|
<section aria-label="Background image">
|
|
<h3 class="uppercase mb-3" style="font-size: 11px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.08em;">背景图</h3>
|
|
|
|
<!-- Wallpaper Grid (3 cols x 2 rows) -->
|
|
<div class="grid grid-cols-3 gap-2 mb-3">
|
|
<!-- WP1: Radial purple -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp1" aria-label="Wallpaper 1"
|
|
style="aspect-ratio: 16/10; background: radial-gradient(circle at 30% 30%, #6c5ce7 0%, #2d1b69 60%, #0d0d12 100%); border: 1.5px solid var(--color-brand);">
|
|
<span class="absolute top-1 right-1 flex items-center justify-center w-4 h-4 rounded-full" style="background: var(--color-brand);">
|
|
<i data-lucide="check" class="w-2.5 h-2.5" style="color: #ffffff;"></i>
|
|
</span>
|
|
</button>
|
|
<!-- WP2: Linear teal/blue -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp2" aria-label="Wallpaper 2"
|
|
style="aspect-ratio: 16/10; background: linear-gradient(135deg, #0984e3 0%, #74b9ff 50%, #0d0d12 100%); border: 1px solid var(--color-border);"></button>
|
|
<!-- WP3: Conic green/purple -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp3" aria-label="Wallpaper 3"
|
|
style="aspect-ratio: 16/10; background: conic-gradient(from 45deg at 50% 50%, #00b894 0deg, #6c5ce7 180deg, #0d0d12 360deg); border: 1px solid var(--color-border);"></button>
|
|
<!-- WP4: Sunset orange -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp4" aria-label="Wallpaper 4"
|
|
style="aspect-ratio: 16/10; background: linear-gradient(180deg, #e17055 0%, #fdcb6e 50%, #2d1b69 100%); border: 1px solid var(--color-border);"></button>
|
|
<!-- WP5: Pink mesh -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp5" aria-label="Wallpaper 5"
|
|
style="aspect-ratio: 16/10; background: radial-gradient(circle at 70% 80%, #e84393 0%, #6c5ce7 50%, #0d0d12 100%); border: 1px solid var(--color-border);"></button>
|
|
<!-- WP6: Deep blue radial -->
|
|
<button class="wallpaper-thumb relative w-full rounded-md overflow-hidden transition-all duration-150 cursor-pointer" data-wp="wp6" aria-label="Wallpaper 6"
|
|
style="aspect-ratio: 16/10; background: radial-gradient(ellipse at 50% 0%, #4834d4 0%, #19196e 50%, #0d0d12 100%); border: 1px solid var(--color-border);"></button>
|
|
<!-- Upload Custom (spans 2 cols) -->
|
|
<button class="wallpaper-upload col-span-2 flex items-center justify-center gap-2 rounded-md transition-colors duration-150 cursor-pointer" data-wp="upload" aria-label="Upload custom wallpaper" data-dom-id="upload-wallpaper"
|
|
style="aspect-ratio: 16/10; background: rgba(255, 255, 255, 0.03); border: 1.5px dashed var(--color-border-hover);">
|
|
<i data-lucide="upload-cloud" class="w-4 h-4" style="color: var(--color-text-muted);"></i>
|
|
<span style="font-size: var(--text-sm); color: var(--color-text-muted);">上传自定义</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Clear wallpaper button -->
|
|
<button class="clear-wallpaper flex items-center justify-center gap-2 w-full py-2 rounded-md transition-colors duration-150 cursor-pointer" data-dom-id="clear-wallpaper-btn" aria-label="Clear wallpaper (solid color)"
|
|
style="background: transparent; border: 1px solid var(--color-border);">
|
|
<i data-lucide="image-off" class="w-4 h-4" style="color: var(--color-text-secondary);"></i>
|
|
<span style="font-size: var(--text-sm); color: var(--color-text-secondary);">纯色背景</span>
|
|
</button>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
<script>
|
|
// Theme mode switching
|
|
document.querySelectorAll('.theme-card').forEach(function(card) {
|
|
card.addEventListener('click', function() {
|
|
document.querySelectorAll('.theme-card').forEach(function(c) {
|
|
c.classList.remove('selected');
|
|
c.setAttribute('aria-pressed', 'false');
|
|
c.style.background = 'rgba(255, 255, 255, 0.03)';
|
|
c.style.border = '1px solid var(--color-border)';
|
|
var icon = c.querySelector('i[data-lucide]');
|
|
var span = c.querySelector('span');
|
|
if (icon) icon.style.color = 'var(--color-text-secondary)';
|
|
if (span) span.style.color = 'var(--color-text-secondary)';
|
|
});
|
|
this.classList.add('selected');
|
|
this.setAttribute('aria-pressed', 'true');
|
|
this.style.background = 'rgba(108, 92, 231, 0.10)';
|
|
this.style.border = '1.5px solid var(--color-brand)';
|
|
var icon = this.querySelector('i[data-lucide]');
|
|
var span = this.querySelector('span');
|
|
if (icon) icon.style.color = 'var(--color-brand)';
|
|
if (span) span.style.color = 'var(--color-brand)';
|
|
});
|
|
});
|
|
|
|
// Color swatch selection
|
|
document.querySelectorAll('.color-swatch').forEach(function(sw) {
|
|
sw.addEventListener('click', function() {
|
|
document.querySelectorAll('.color-swatch').forEach(function(s) {
|
|
s.classList.remove('selected');
|
|
s.setAttribute('aria-pressed', 'false');
|
|
s.style.boxShadow = 'none';
|
|
s.style.outline = 'none';
|
|
});
|
|
this.classList.add('selected');
|
|
this.setAttribute('aria-pressed', 'true');
|
|
var color = this.getAttribute('data-color');
|
|
this.style.boxShadow = '0 0 0 2px var(--color-bg-tertiary), 0 0 0 4px ' + color;
|
|
this.style.outline = '2px solid ' + color;
|
|
this.style.outlineOffset = '-1px';
|
|
});
|
|
});
|
|
|
|
// Wallpaper thumbnail selection
|
|
document.querySelectorAll('.wallpaper-thumb').forEach(function(wp) {
|
|
wp.addEventListener('click', function() {
|
|
document.querySelectorAll('.wallpaper-thumb').forEach(function(w) {
|
|
w.style.border = '1px solid var(--color-border)';
|
|
var check = w.querySelector('span');
|
|
if (check) check.style.display = 'none';
|
|
});
|
|
this.style.border = '1.5px solid var(--color-brand)';
|
|
var check = this.querySelector('span');
|
|
if (check) check.style.display = 'flex';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|