lix/mnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对齐 Wolai 侧栏体验并收拢设计入库

Browse Source
This commit is contained in:
lix-2026
2026-04-30 16:18:54 +08:00
parent 8c895b3dc0
commit afb2a5b8a0
89 changed files with 23188 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design/stitch/260429/DESIGN.md
+92
View File
@@ -0,0 +1,92 @@
# Design System Strategy: The Digital Atelier
## 1. Overview & Creative North Star
**Creative North Star: "The Digital Atelier"**
The objective of this design system is to transform a functional workspace into a curated sanctuary for thought. Unlike standard "SaaS-blue" interfaces that feel industrial and rigid, "The Digital Atelier" treats the screen as a high-end editorial canvas. We lean into **Organic Minimalism**—where the architecture of the page is defined by light and space rather than lines and boxes.
The system breaks the "template" look by utilizing intentional asymmetry in the sidebar, generous breathing room (white space) that prioritizes focus, and a sophisticated layering of tones that mimics the physical stacking of fine vellum paper.
---
## 2. Colors & Surface Philosophy
The palette is rooted in a "High-Value Neutral" philosophy, using green as a surgical strike of intent rather than a blunt instrument.
### The Palette
- **Primary (Action):** `#31AA4D` (The Signature Green) — Used exclusively for intentional actions and progress.
- **Secondary (Utility):** `#2367F6` — Reserved for links and specific collaborative indicators.
- **Surface (Background):** `#FAF9F9` (Surface) to `#FFFFFF` (Lowest).
- **Tonal Greys:** `#F7F7F7` (Container Low), `#EAEAEA` (Outline Variant).
### The "No-Line" Rule
Traditional 1px borders are strictly prohibited for sectioning. Boundaries between the navigation sidebar and the main editor must be defined solely by the shift from `surface-container-low` (`#F4F3F3`) to `surface-container-lowest` (`#FFFFFF`).
### Surface Hierarchy & Nesting
Treat the UI as a series of physical layers.
- **Layer 0 (Canvas):** `surface` (`#FAF9F9`).
- **Layer 1 (Sidebar/Navigation):** `surface-container-low` (`#F4F3F3`).
- **Layer 2 (The Document):** `surface-container-lowest` (`#FFFFFF`).
- **Layer 3 (Modals/Popovers):** `surface-container-highest` (`#E3E2E2`) with Glassmorphism.
### The "Glass & Gradient" Rule
For floating elements (AI Assistant, Help), use `surface-container-lowest` at 80% opacity with a `24px` backdrop-blur. Apply a subtle linear gradient to the Primary CTA (from `primary` `#006E28` to `primary-container` `#31AA4D`) to provide a "soulful" depth that flat colors lack.
---
## 3. Typography: The Editorial Scale
We use **Inter** for its precision. The hierarchy is designed to favor document readability and rhythmic flow.
| Level | Size | Weight | Tracking | Line Height | Usage |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Display-LG** | 3.5rem | 700 | -0.02em | 1.1 | Hero Document Titles |
| **Headline-LG** | 2.0rem | 600 | -0.01em | 1.2 | Heading 1 (H1) |
| **Title-MD** | 1.125rem | 600 | 0 | 1.4 | Heading 2 (H2) |
| **Body-LG** | 1.0rem | 400 | 0 | 1.6 | Primary Reading Text |
| **Label-MD** | 0.75rem | 500 | +0.02em | 1.0 | Sidebar Labels / Metadata |
*Director’s Note: The 1.6 line-height for Body-LG is non-negotiable. It creates the "Vertical Rhythm" necessary for deep work.*
---
## 4. Elevation & Depth
Depth is achieved through **Tonal Layering** rather than structural shadows.
- **The Layering Principle:** A block-level "Callout" should not have a border. It should be a `surface-container-high` (`#E9E8E8`) shape with a `sm` (`0.125rem`) rounded corner, nestled within the `surface-container-lowest` page.
- **Ambient Shadows:** Only for floating context menus. Use `on-surface` (`#1B1C1C`) at 4% opacity with a `32px` blur and `16px` Y-offset. It should feel like a soft glow, not a drop shadow.
- **The "Ghost Border":** If a table cell requires definition, use `outline-variant` at 15% opacity. Never 100%.
---
## 5. Components & Block System
### The Block System (The Core Experience)
- **Text Blocks:** Standard Inter 1rem. Use a `24px` margin-bottom to ensure "breathable" paragraphs.
- **Heading Blocks:** H1-H3 use a tighter line-height (1.2) to feel like a "unit."
- **Callouts:** Icons should use the `secondary` (`#2367F6`) color at 10% opacity for the background "pill" and 100% for the icon itself.
- **Drag Handles:** Six-dot pattern. Appear at 20% opacity on block hover; 60% opacity on grab.
### Navigation (Sidebar & Breadcrumbs)
- **Sidebar:** Use `surface-container-low`. Indentation for nested pages must be exactly `12px` per level to create a clear visual "tree" without lines.
- **Hover States:** Instead of a highlight box, use a "soft-bleed" background: `surface-container-high` with a `4px` corner radius, inset by `4px` from the sidebar edge.
- **Breadcrumbs:** Use `label-md`. The current page is `on-surface`; parent pages are `on-surface-variant`.
### Primitive Components
- **Buttons:**
- **Primary:** Gradient (`primary` to `primary-container`), white text, `md` (`0.375rem`) radius.
- **Tertiary:** No background. Text color is `on-surface-variant`. Hover state triggers a `surface-container-high` background.
- **Cards & Lists:** **Prohibit divider lines.** Use vertical whitespace (16px, 24px, or 32px from the spacing scale) to separate thoughts.
- **Checkboxes:** When checked, use `primary` (`#31AA4D`). When unchecked, use a `Ghost Border` of `outline`.
---
## 6. Do’s and Don’ts
### Do
- **Do** use `surface-container` shifts to define functional zones (Sidebar vs. Editor).
- **Do** use asymmetrical padding. Give the document more space on the left (the "margin of thought") than the right.
- **Do** use `SFMono-Regular` for code blocks and inline technical terms to provide a structural contrast to the organic Inter font.
### Don't
- **Don't** use 1px black or grey borders to separate sections.
- **Don't** use pure black (`#000000`) for text. Use `on-surface` (`#1B1C1C`) for a softer, premium editorial feel.
- **Don't** use sharp corners. Everything must have at least a `sm` (`0.125rem`) or `md` (`0.375rem`) radius to maintain the "Organic" North Star.
- **Don't** crowd the UI. If a user can't see the "paper" behind the content, the layout is too dense.
design/design/stitch/260429/code.html
+399
View File
@@ -0,0 +1,399 @@
<!DOCTYPE html>
<html class="light" lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>个人 | The Digital Atelier</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-fixed-variant": "#003ea7",
"on-surface": "#2d2e2e",
"surface-tint": "#006e28",
"primary": "#006e28",
"on-secondary-container": "#fefcff",
"inverse-surface": "#2f3031",
"surface-container-high": "#f5f5f5",
"on-surface-variant": "#5a5a5a",
"on-tertiary": "#ffffff",
"on-background": "#1b1c1c",
"on-tertiary-container": "#2d2e2e",
"surface-container-low": "#fafafa",
"on-primary": "#ffffff",
"surface": "#ffffff",
"primary-container": "#31aa4d",
"tertiary-fixed-dim": "#c7c6c6",
"error-container": "#ffdad6",
"secondary-container": "#286af9",
"surface-bright": "#faf9f9",
"surface-container-highest": "#e3e2e2",
"on-secondary": "#ffffff",
"on-primary-fixed": "#002107",
"secondary": "#0051d5",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"error": "#ba1a1a",
"on-primary-fixed-variant": "#00531c",
"tertiary": "#5e5e5e",
"on-primary-container": "#003610",
"on-secondary-fixed": "#00174b",
"secondary-fixed": "#dbe1ff",
"inverse-on-surface": "#f2f0f0",
"tertiary-fixed": "#e3e2e2",
"outline": "#d1d5db",
"surface-container": "#f7f7f7",
"on-error": "#ffffff",
"inverse-primary": "#69de7a",
"background": "#ffffff",
"surface-variant": "#f3f4f6",
"primary-fixed-dim": "#69de7a",
"surface-dim": "#dbdad9",
"tertiary-container": "#959595",
"secondary-fixed-dim": "#b4c5ff",
"on-tertiary-fixed": "#1b1c1c",
"on-tertiary-fixed-variant": "#464747",
"primary-fixed": "#86fb93",
"outline-variant": "#bdcab9",
"wolai-selected": "#fce4e4"
},
"borderRadius": {
"DEFAULT": "4px",
"lg": "6px",
"xl": "8px",
"full": "9999px"
},
"fontFamily": {
"headline": ["Inter", "sans-serif"],
"body": ["Inter", "sans-serif"],
"label": ["Inter", "sans-serif"]
}
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; color: #37352f; }
.material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.sidebar-item:hover .item-actions { opacity: 1; }
.triangle-toggle { transition: transform 0.2s; cursor: pointer; font-size: 14px !important; }
.triangle-toggle.open { transform: rotate(90deg); }
.block-spacing { margin-bottom: 2px; }
/* Sidebar View Switching */
.view-content { display: none; }
.view-active { display: block; }
.tab-active { color: #2d2e2e; font-weight: 600; border-bottom: 2px solid #006e28; }
</style>
</head>
<body class="bg-white text-on-surface font-body">
<div class="flex h-screen overflow-hidden">
<!-- SideNavBar -->
<aside class="flex flex-col h-full bg-[#f7f7f5] dark:bg-stone-950 w-60 border-r border-stone-200/50 z-30 select-none">
<!-- Header -->
<div class="flex items-center gap-2 mb-2 cursor-pointer transition-colors pt-2"><div class="flex flex-col w-full">
<!-- Workspace Header -->
<div class="flex items-center gap-2 px-3 py-2 cursor-pointer group">
<div class="w-8 h-8 rounded bg-[#d3544e] flex items-center justify-center shrink-0 text-white font-medium text-lg">L</div>
<span class="text-[17px] font-bold text-stone-800 truncate">liaibo的个人空间</span>
<span class="material-symbols-outlined text-stone-600 text-[20px] ml-auto">expand_more</span>
</div>
<!-- Toolbar Icons -->
<div class="flex items-center px-4 py-3 text-stone-600 w-full bg-[#f7f7f5]">
<div class="flex items-center justify-between w-full">
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">search</span>
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">account_tree</span>
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">bolt</span>
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">help</span>
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">inventory_2</span>
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">more_horiz</span>
</div>
</div>
</div></div>
<!-- Main Tabs -->
<nav class="flex-1 overflow-y-auto no-scrollbar px-2 space-y-0.5">
<div class="mt-2">
<!-- Starred Section -->
<div class="flex items-center gap-1 px-3 py-1 text-stone-400 group cursor-pointer hover:bg-stone-200/50">
<span class="material-symbols-outlined text-[16px] text-orange-400">star</span>
<span class="text-[13px] font-medium text-stone-500">星标置顶</span>
<span class="material-symbols-outlined text-[16px] ml-0.5">expand_more</span>
</div>
<div class="px-1 space-y-[1px] mt-1 mb-6">
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="text-stone-300 font-bold ml-1">·</span>
<span class="material-symbols-outlined text-stone-500 text-[18px]">sticky_note_2</span>
<span class="text-[14px]">记录</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPgwtm4gouecfvHJ5gaIuLbl9hm82rutzZUhlxiM8_jyV_QiMLixw_ZWHlStFPooQgE6NpMVdOKuuV3LrNJbAuLGA_WBjHnfhP0NhZxpuysUjt_unG-_rzrfEWr-kspQ2pzJqK9nROJOz0DkSHoP6F-Y5y94TegpSKGg8Q3sWp-g3qDNQzBV5pK7h6jU26EIY9UtZDzCOM0Vel8YpfBIRKt-BbyFvvaJiITXMNKHJNHr2bf6Ciry1Ms1mj-mdZ18bjVgp7eojOfyc"/>
</span>
<span class="text-[14px]">日报</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-green-600 text-[20px]">account_balance_wallet</span>
<span class="text-[14px]">阳阳钱包</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_jLmyrcqa9V9ShAaaFQtg4-H2_dirQ6z7nw_0a0sJvU8dbeLxV1uHAlwUxg8cyvojv7beX8Y9faeT4SOHn0EBMsv5XUiOsAh735lJcVuY-Tlkwv3zH8BavU-fEnHpCvtSounrGJ1uooJInzjY37ypbdeHhkQbeGMBbzupSc_dQXzISN2XG31ug4s3_9u4fDfVxKg0J92Ap-50Kc7STQgQDe5m1rZo71_1I7oP5en9N3gLgWlaRCtq5o7dHzwB5WbZpJhYVTQZC4M"/>
</span>
<span class="text-[14px]">My LifeOS</span>
</a>
</div>
<!-- Section with Tabs Toggle -->
<div class="flex items-center justify-between px-3 py-1 mt-4">
<div class="flex gap-4">
<button class="text-[13px] font-medium text-stone-400 hover:text-stone-700 transition-colors tab-active cursor-pointer pb-0.5" id="tab-pages" onclick="switchSidebarView('pages')">我的页面</button>
<button class="flex items-center gap-1 text-[13px] font-medium text-stone-400 hover:text-stone-700 transition-colors cursor-pointer pb-0.5" id="tab-files" onclick="switchSidebarView('files')">
<span class="material-symbols-outlined text-[16px]">folder_open</span>
Explorer
</button>
</div>
<span class="material-symbols-outlined text-[16px] text-stone-400 ml-0.5 cursor-pointer">expand_more</span>
</div>
<!-- View: Page View (Default Wolai) -->
<div class="view-content view-active px-1 space-y-[1px] mt-2" id="view-pages">
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-stone-800 text-[20px] font-bold">content_cut</span>
<span class="text-[14px]">剪藏</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-stone-800 text-[20px] font-variation-fill">home</span>
<span class="text-[14px]">个人</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-stone-800 text-[20px]">domain</span>
<span class="text-[14px]">知识</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-stone-800 text-[20px]">grid_view</span>
<span class="text-[14px]">项目</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="material-symbols-outlined text-stone-800 text-[20px] font-variation-fill">book</span>
<span class="text-[14px]">工作资料</span>
</a>
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPR9Mr19xWn9DuKwKZpoJ1tqeR0Y4FE1fMyBlvjZEYCkYOh1NowiLbxo7fSRF1cQBgV51cEwjMIB3HrjmsNtmvzYRdtnHDOse0Z77UzXg7ksBGpKrzJ48KxQ5wi-IKKzzqmc19EDDYRU997VaWrFWJdS2hI5MXjDqAOW9W1d8UfA2QRBmTtYhPfZr9dQb6jSnVaMxjNTchVEKJic6g8FSLbirEusH-O88rEdVehgQiLSu0NtV_QusN_BD98oEBqQt9L6VAiVy0byc"/>
</span>
<span class="text-[14px]">日常</span>
</a>
</div>
<!-- View: File View (VS Code Style) -->
<div class="view-content px-1 mt-2 mb-4" id="view-files">
<!-- Folder: Public -->
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[16px] text-stone-400">expand_more</span>
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
<span class="text-[13px] font-medium">public</span>
</div>
<div class="ml-4 border-l border-stone-200 pl-1">
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[18px] text-blue-400">html</span>
<span class="text-[13px]">index.html</span>
</div>
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[18px] text-indigo-400">image</span>
<span class="text-[13px]">favicon.ico</span>
</div>
</div>
<!-- Folder: Src -->
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600 mt-1">
<span class="material-symbols-outlined text-[16px] text-stone-400">expand_more</span>
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
<span class="text-[13px] font-medium">src</span>
</div>
<div class="ml-4 border-l border-stone-200 pl-1">
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[18px] text-sky-500">javascript</span>
<span class="text-[13px]">App.js</span>
</div>
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[18px] text-blue-500">css</span>
<span class="text-[13px]">styles.css</span>
</div>
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[16px] text-stone-400">chevron_right</span>
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
<span class="text-[13px]">assets</span>
</div>
</div>
<!-- Root Files -->
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600 mt-1">
<span class="material-symbols-outlined text-[18px] text-stone-400">description</span>
<span class="text-[13px]">README.md</span>
</div>
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
<span class="material-symbols-outlined text-[18px] text-amber-600">settings</span>
<span class="text-[13px]">package.json</span>
</div>
</div>
</div>
</nav>
<!-- Footer -->
<div class="mt-auto border-t border-stone-200">
<div class="flex w-full border-t border-stone-200 bg-[#f7f7f5]">
<button class="flex-1 flex items-center justify-center gap-2 py-3 border-r border-stone-200 hover:bg-stone-200/30 text-stone-600 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
<span class="text-[14px]">垃圾箱</span>
</button>
<button class="flex-1 flex items-center justify-center gap-2 py-3 hover:bg-stone-200/30 text-stone-600 transition-colors">
<span class="w-4 h-4">
<svg fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L3 7V17L12 22L21 17V7L12 2Z" fill="#fcd34d" fill-opacity="0.6" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M3 7L12 12L21 7" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M12 22V12" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</span>
<span class="text-[14px]">模板中心</span>
</button>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto bg-white relative">
<!-- TopAppBar -->
<header class="flex justify-between items-center px-4 h-[44px] w-full sticky top-0 bg-white/90 backdrop-blur-sm z-40">
<div class="flex items-center gap-1.5 text-stone-500">
<span class="material-symbols-outlined hover:bg-stone-100 p-1 rounded cursor-pointer" data-icon="menu">menu</span>
<div class="flex items-center text-[13px] font-normal px-1">
<span class="hover:bg-stone-100 px-1.5 py-0.5 rounded cursor-pointer">The Digital Atelier</span>
<span class="mx-0.5 text-stone-300">/</span>
<span class="hover:bg-stone-100 px-1.5 py-0.5 rounded cursor-pointer text-stone-900 font-medium flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]" data-icon="home">home</span>
个人
</span>
</div>
</div>
<div class="flex items-center gap-0.5">
<div class="flex items-center px-2 py-1 bg-green-50 text-green-700 rounded-full text-[11px] font-medium mr-2 gap-1 border border-green-100">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
Public
</div>
<div class="flex items-center gap-0.5 text-stone-500">
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="star">star</span>
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="history">history</span>
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer text-green-600" data-icon="auto_awesome">auto_awesome</span>
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="search">search</span>
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="more_horiz">more_horiz</span>
</div>
</div>
</header>
<!-- Document Canvas -->
<article class="max-w-4xl mx-auto pt-[80px] pb-40 px-12 md:px-24">
<!-- Page Icon & Title -->
<div class="mb-8">
<div class="group relative inline-block mb-4">
<span class="material-symbols-outlined text-[72px] text-stone-800 cursor-default" data-icon="home">home</span>
</div>
<h1 class="text-4xl font-bold text-stone-900 tracking-tight leading-tight mb-2">个人</h1>
<div class="flex items-center gap-4 text-stone-400 text-[13px] border-b border-stone-100 pb-6 mb-8">
<span class="flex items-center gap-1.5 hover:text-stone-600 cursor-pointer"><span class="material-symbols-outlined text-[16px]" data-icon="face">face</span> 个人空间</span>
<span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[16px]" data-icon="calendar_today">calendar_today</span> 2024年5月20日</span>
</div>
</div>
<!-- Vertical Sub-page Links with Wolai Spacing -->
<section class="mb-10 space-y-[2px]">
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-stone-400 group-hover:text-primary" data-icon="description">description</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">我的文件</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-red-400" data-icon="filter_vintage">filter_vintage</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">灵感库</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-amber-500" data-icon="sensor_door">sensor_door</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">工作台</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-blue-500" data-icon="lock">lock</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">私人保险箱</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-green-500" data-icon="book">book</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">阅读清单</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-rose-500" data-icon="favorite">favorite</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">健康追踪</span>
</a>
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
<span class="material-symbols-outlined text-indigo-400" data-icon="laptop_mac">laptop_mac</span>
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">项目管理</span>
</a>
</section>
<!-- Editorial Content Blocks -->
<div class="space-y-6">
<p class="text-[16px] text-stone-800 leading-[1.8]">
欢迎来到你的数字工作室。这里是你整理思绪、捕获灵感并将其转化为现实的私人圣殿。每一个方块都承载着无限的可能性。
</p>
<div class="p-6 bg-[#f7f7f5] rounded-lg border-l-4 border-stone-300">
<div class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary mt-0.5" data-icon="lightbulb">lightbulb</span>
<div class="space-y-2">
<h3 class="font-bold text-stone-800 text-[15px]">设计原则</h3>
<p class="text-[14px] text-stone-600 leading-relaxed">
我们追求的是“垂直节奏”。在你的数字化工坊中，呼吸感和平衡比任何繁杂的装饰都更为重要。请在此处记录你的第一条笔记。
</p>
</div>
</div>
</div>
<div class="pt-4 border-t border-stone-100">
<div class="text-stone-300 text-[15px] cursor-text select-none py-1 hover:bg-stone-50 rounded px-1 -mx-1">
输入 '/' 以插入块
</div>
</div>
</div>
</article>
<!-- Floating Action Buttons -->
<div class="fixed bottom-6 right-6 flex flex-col gap-2 z-50">
<button class="bg-white border border-stone-200 text-stone-500 rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-stone-50 transition-all">
<span class="material-symbols-outlined" data-icon="help">help</span>
</button>
<button class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:opacity-90 transition-all scale-100 active:scale-95">
<span class="material-symbols-outlined" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
</button>
</div>
</main>
</div>
<script>
function switchSidebarView(view) {
const pagesView = document.getElementById('view-pages');
const filesView = document.getElementById('view-files');
const pagesTab = document.getElementById('tab-pages');
const filesTab = document.getElementById('tab-files');
if (view === 'pages') {
pagesView.classList.add('view-active');
filesView.classList.remove('view-active');
pagesTab.classList.add('tab-active');
filesTab.classList.remove('tab-active');
} else {
filesView.classList.add('view-active');
pagesView.classList.remove('view-active');
filesTab.classList.add('tab-active');
pagesTab.classList.remove('tab-active');
}
}
</script>
</body></html>
design/design/stitch/260429/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB