从零构建「星空笔记」：一款玻璃拟态风格的个人知识管理应用

前言

在日常学习和工作中，我们经常需要快速记录灵感、整理笔记、管理知识碎片。市面上的笔记应用功能丰富但往往臃肿，有时候我们只想要一个轻量、美观、开箱即用的工具。于是，我决定自己动手做一个——「星空笔记」。

这是一款基于纯前端技术栈构建的个人知识管理 Web 应用，采用玻璃拟态（Glassmorphism）设计风格配合星空渐变背景，数据通过 localStorage 持久化，无需后端，打开即用。

本文将分享整个项目的设计思路、技术实现和关键细节。

项目概览

星空笔记是一款单页 Web 应用，核心功能包括：

• 笔记 CRUD：创建、编辑、删除笔记，支持标题、内容、分类标签
• 分类标签管理：侧边栏标签筛选，一目了然
• 全文搜索：实时搜索笔记标题和内容
• 主题切换：深色星空主题 / 浅色主题，自动记忆偏好
• 响应式布局：桌面 3 列、平板 2 列、手机 1 列
• Markdown 渲染：支持标题、加粗、列表、代码块
• 统计信息：总笔记数 + 各标签数量

技术栈非常精简：HTML + CSS + JavaScript，无任何框架依赖。

设计理念

玻璃拟态（Glassmorphism）

玻璃拟态是近年来流行的 UI 设计风格，核心特征是半透明背景配合背景模糊效果。在「星空笔记」中，每张笔记卡片都使用了 backdrop-filter: blur(20px) 实现毛玻璃质感：

.note-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

这种效果让卡片仿佛漂浮在星空背景之上，层次分明，视觉舒适。

星空背景动画

深色主题的背景是整个应用的视觉灵魂。我用了三层星星元素，以不同速度和透明度闪烁，营造深邃的星空氛围：

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  animation: twinkle 3s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.5; }
}

三层星星分别使用不同的动画延迟和持续时间，避免了同步闪烁的机械感。

流畅的交互过渡

每一个交互都配有平滑过渡：

• 卡片悬停时微微浮起（transform: translateY(-4px)）
• 模态框淡入淡出（opacity + visibility 过渡）
• 主题切换时颜色平滑过渡

这些细节看似微小，但累积起来就是"好用"和"爱用"的区别。

技术实现

数据持久化：localStorage

所有笔记数据存储在浏览器的 localStorage 中，数据不离开设备，隐私安全且无需后端：

// 保存笔记
function saveNotes() {
  localStorage.setItem('starry-notes', JSON.stringify(notes));
}

// 加载笔记
function loadNotes() {
  const data = localStorage.getItem('starry-notes');
  return data ? JSON.parse(data) : getSampleNotes();
}

首次打开时预置 4 条示例笔记，展示"学习"、“工作”、"灵感"等不同分类，让用户一打开就能看到效果，而不是面对空白页面。

全文搜索

搜索功能实现非常轻量，输入关键词即时过滤：

function searchNotes(keyword) {
  if (!keyword) return notes;
  const lower = keyword.toLowerCase();
  return notes.filter(note =>
    note.title.toLowerCase().includes(lower) ||
    note.content.toLowerCase().includes(lower)
  );
}

Markdown 简单渲染

编辑模态框支持 Markdown 基础语法渲染，用正则替换实现，无需引入外部库：

function renderMarkdown(text) {
  return text
    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    .replace(/^- (.*$)/gm, '<li>$1</li>');
}

响应式布局

使用 CSS Grid 实现响应式卡片网格，通过 auto-fill 和 minmax 自动适配：

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

桌面端自动 3 列，平板 2 列，手机 1 列，无需媒体查询。

系统架构

┌─────────────────────────────────────┐
│     用户界面层（玻璃拟态 + 星空主题）   │
├─────────────────────────────────────┤
│  笔记CRUD │ 标签管理 │ 全文搜索 │ 主题切换 │
├─────────────────────────────────────┤
│       数据持久化层（localStorage）      │
├─────────────────────────────────────┤
│       HTTP 服务（python3 http.server） │
└─────────────────────────────────────┘

整个应用只有三个文件：

• index.html（131 行）— 页面结构
• css/style.css（847 行）— 样式与动画
• js/app.js（637 行）— 应用逻辑

总计约 1600 行代码，没有任何外部依赖。

开发过程

这个项目是通过华为云 CodeArts Agent（智能编码助手）辅助完成的。整个开发流程如下：

1. 需求描述：向 CodeArts Agent 描述项目需求，包括功能列表、设计风格、技术栈
2. 代码生成：CodeArts Agent 自动创建项目目录结构，编写 HTML、CSS、JavaScript 文件
3. 本地预览：通过 Python HTTP 服务器启动项目，即时预览效果
4. 代码推送：将代码推送到 GitCode 仓库托管
5. 作品发布：通过华为云高校运营平台发布作品，生成封面图和详情文档

整个过程从需求到发布，高效且流畅。

使用方式

# 克隆仓库
git clone https://gitcode.com/sdf2342/starry-notes.git

# 进入目录
cd starry-notes

# 启动服务
python3 -m http.server 8080

# 浏览器打开
# http://localhost:8080

打开后即可看到预置的示例笔记，所有功能开箱即用。

总结与展望

「星空笔记」证明了轻量级应用同样可以兼具美观与实用。纯前端 + localStorage 的方案虽然简单，但对于个人知识管理这类场景已经足够。

未来可以考虑添加的方向：

• 数据导入导出（JSON / Markdown 文件）
• 多设备同步（接入云端存储）
• 更丰富的 Markdown 渲染（表格、图片、链接）
• 标签颜色自定义
• 笔记置顶与归档

如果你也想要一个轻量、美观的笔记工具，欢迎克隆仓库体验，也欢迎在此基础上扩展功能。

项目仓库：https://gitcode.com/sdf2342/starry-notes

本文涉及的「星空笔记」项目已发布至华为云开发者作品展览馆，欢迎查看。