@bytechain.cn/colamd 1.5.0 → 1.5.1-beta.2

package/src/renderer/editor/plugins/themes/foundation.css

@@ -0,0 +1,143 @@
+/*
+ * ColaMD 主题系统：Foundation (基础层)
+ * 职责：全局 CSS 变量定义 + Mermaid 变量抽象 + 排版/颜色/间距语义化
+ * 版本：v2.0 (模块化架构)
+ */
+
+/* ================================================================
+   1. 全局 CSS Reset
+   ================================================================ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ================================================================
+   2. CSS 变量系统 (语义化命名空间)
+   命名规则：
+   --color-*    颜色
+   --font-*     字体
+   --space-*    间距
+   --radius-*   圆角
+   --mermaid-*  Mermaid 图表的变量抽象 (core 20 variables)
+   ================================================================ */
+:root {
+  /* ---- 2.1 基础排版 ---- */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  --font-family-heading: var(--font-family-base);
+  --font-family-code: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
+  --font-family-math: var(--font-family-base);
+  --font-size-root: 16px;
+  --line-height-base: 1.75;
+  --font-weight-bold: 600;
+
+  /* ---- 2.2 语义化颜色 ---- */
+  --color-bg: #ffffff;
+  --color-text: #24292f;
+  --color-text-muted: #656d76;
+  --color-border: #d0d7de;
+  --color-link: #0969da;
+  --color-accent: #6366f1;
+  --color-accent-dark: #4f46e5;
+  --color-accent-light: #eef2ff;
+  --color-selection-bg: rgba(9, 105, 218, 0.15);
+
+  /* ---- 2.3 代码块 ---- */
+  --code-bg: rgba(175, 184, 193, 0.2);
+  --code-color: var(--color-accent);
+  --code-block-bg: #f6f8fa;
+  --code-block-text: var(--color-text);
+  --code-block-color: var(--code-block-text);
+
+  /* ---- 2.4 引用块 ---- */
+  --blockquote-bg: transparent;
+  --blockquote-border: var(--color-border);
+  --blockquote-color: var(--color-text-muted);
+
+  /* ---- 2.5 表格 ---- */
+  --table-header-bg: #f6f8fa;
+  --table-border: var(--color-border);
+  --table-stripe: rgba(0, 0, 0, 0.03);
+  --table-hover-bg: transparent;
+
+  /* ---- 2.6 分割线 ---- */
+  --hr-color: var(--color-border);
+
+  /* ---- 2.7 滚动条 ---- */
+  --scrollbar-width: 6px;
+  --scrollbar-thumb: #d1d5db;
+  --scrollbar-thumb-hover: #9ca3af;
+
+  /* ---- 2.8 圆角系统 ---- */
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 16px;
+
+  /* ================================================================
+     2.9 Mermaid 图表变量抽象 (核心 20 变量体系)
+     每个变量都对应 Mermaid SVG 中的具体视觉属性
+     修改配色只需覆盖这些变量即可
+     ================================================================ */
+
+  /* -- 容器 -- */
+  --mermaid-background: var(--code-block-bg);
+  --mermaid-border-color: var(--color-border);
+  --mermaid-border-radius: var(--radius-md);
+  --mermaid-padding: 20px;
+
+  /* -- 字体 -- */
+  --mermaid-font-family: var(--font-family-base);
+  --mermaid-font-size: 14px;
+
+  /* -- 节点 (Node) -- */
+  --mermaid-node-stroke: var(--color-border);
+  --mermaid-node-fill: var(--code-bg);
+  --mermaid-node-text: var(--color-text);
+  --mermaid-node-stroke-width: 1.5px;
+
+  /* -- 连线 (Edge) -- */
+  --mermaid-edge-stroke: var(--color-border);
+  --mermaid-edge-stroke-width: 1.5px;
+
+  /* -- 聚类 (Cluster / Subgraph) -- */
+  --mermaid-cluster-stroke: var(--color-accent);
+  --mermaid-cluster-fill: rgba(99, 102, 241, 0.06);
+  --mermaid-cluster-dasharray: 4,4;
+
+  /* -- 标签 (Labels) -- */
+  --mermaid-label-text: var(--color-text);
+  --mermaid-label-bg: var(--mermaid-background);
+  --mermaid-edge-label-bg: var(--mermaid-background);
+  --mermaid-edge-label-text: var(--color-text-muted);
+  --mermaid-title-text: var(--color-text);
+  --mermaid-axis-text: var(--color-text-muted);
+
+  /* -- 特殊状态 -- */
+  --mermaid-highlight: var(--color-accent);
+  --mermaid-person-stroke: var(--color-text);
+  --mermaid-person-fill: var(--mermaid-node-fill);
+
+  /* -- 色板 (Color Scale: 用于 Pie/Gantt/Quadrant 等多色场景) -- */
+  --mermaid-cscale0: #6366f1;
+  --mermaid-cscale1: #ec4899;
+  --mermaid-cscale2: #06b6d4;
+  --mermaid-cscale3: #10b981;
+  --mermaid-cscale4: #f59e0b;
+  --mermaid-cscale5: #f43f5e;
+  --mermaid-cscale6: #3b82f6;
+  --mermaid-cscale7: #8b5cf6;
+  --mermaid-cscale8: #14b8a6;
+  --mermaid-cscale9: #eab308;
+  --mermaid-cscale10: #84cc16;
+  --mermaid-cscale11: #f97316;
+
+  /* -- 文本偏移 (跨主题通用) -- */
+  --mermaid-label-offset-y: -3px;
+}

package/src/renderer/editor/plugins/themes/theme-manager.ts

@@ -0,0 +1,92 @@
+const themes: Record<string, string> = {
+  light: 'theme-light',
+  dark: 'theme-dark',
+  elegant: 'theme-elegant',
+  newsprint: 'theme-newsprint'
+}
+
+let customStyleEl: HTMLStyleElement | null = null
+
+/** 已导入的自定义主题缓存：name → { css, template } */
+const customThemeCache = new Map<string, { css: string; template: string | null }>()
+
+/**
+ * 从 CSS 中解析 `/* @template: <name> *​/` 指令
+ * @param css 导入的自定义 CSS 内容
+ * @returns 模版名称（light/dark/elegant/newsprint），无指令返回 null
+ */
+function parseTemplateDirective(css: string): string | null {
+  const match = css.match(/\/\*\s*@template:\s*(\w+)\s*\*\//)
+  return match && themes[match[1]] ? match[1] : null
+}
+
+/**
+ * 缓存导入的自定义主题 CSS 和模版引用
+ * @param name 主题文件名（不含 custom: 前缀）
+ * @param css  自定义 CSS 内容
+ */
+export function setCachedCustomTheme(name: string, css: string): void {
+  const template = parseTemplateDirective(css)
+  customThemeCache.set(name, { css, template })
+}
+
+/**
+ * 获取已缓存的自定义主题信息
+ * @param name 主题文件名
+ */
+export function getCachedCustomTheme(name: string): { css: string; template: string | null } | undefined {
+  return customThemeCache.get(name)
+}
+
+/**
+ * 应用主题：内建主题添加对应 class，自定义主题注入 CSS 并叠加模版
+ * @param name      主题名称（light/dark/elegant/newsprint 或 custom:<name>）
+ * @param customCSS 自定义 CSS 内容（可选，导入时传入；切换时从缓存恢复）
+ */
+export function applyTheme(name: string, customCSS?: string): void {
+  const body = document.body
+
+  // 移除所有主题 class
+  Object.values(themes).forEach(cls => body.classList.remove(cls))
+  body.classList.remove('theme-custom')
+
+  // 移除自定义主题 <style>
+  if (customStyleEl) {
+    customStyleEl.remove()
+    customStyleEl = null
+  }
+
+  if (customCSS || name.startsWith('custom:')) {
+    const key = name.startsWith('custom:') ? name.slice(7) : name
+
+    // 如果传入了新 CSS，更新缓存
+    if (customCSS) {
+      setCachedCustomTheme(key, customCSS)
+    }
+
+    const cached = customThemeCache.get(key)
+
+    // 注入自定义 CSS
+    if (cached) {
+      customStyleEl = document.createElement('style')
+      customStyleEl.textContent = cached.css
+      document.head.appendChild(customStyleEl)
+
+      // 如果声明了模版引用，叠加模版 class 作为变量基础
+      if (cached.template && themes[cached.template]) {
+        body.classList.add(themes[cached.template])
+      }
+    }
+
+    body.classList.add('theme-custom')
+  } else if (themes[name]) {
+    body.classList.add(themes[name])
+  }
+
+  // 持久化主题选择
+  localStorage.setItem('colamd-theme', name)
+}
+
+export function loadSavedTheme(): string {
+  return localStorage.getItem('colamd-theme') || 'elegant'
+}

package/src/renderer/env.d.ts

@@ -1,7 +1,10 @@
+/// <reference types="vite/client" />
 import type { ElectronAPI } from '../preload/index'
+import type { CapacitorBridgeAPI } from './capacitor-api'
 
 declare global {
   interface Window {
-    electronAPI: ElectronAPI
+    electronAPI?: ElectronAPI
+    capacitorAPI?: CapacitorBridgeAPI
   }
 }

package/src/renderer/index.html

@@ -3,14 +3,72 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self' data: https:; img-src 'self' data: blob: https: http: file:; connect-src 'self';">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:*; style-src 'self' 'unsafe-inline' http://localhost:*; font-src 'self' data: https:; img-src 'self' data: blob: https: http: file:; connect-src 'self' ws://localhost:* http://localhost:*;">
   <title>ColaMD</title>
+  <style>
+    #menu-btn, #mobile-menu { display: none; }
+  </style>
 </head>
 <body>
   <div id="titlebar">
+    <button id="menu-btn" title="Menu">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect y="3" width="20" height="2" rx="1" fill="currentColor"/>
+        <rect y="9" width="20" height="2" rx="1" fill="currentColor"/>
+        <rect y="15" width="20" height="2" rx="1" fill="currentColor"/>
+      </svg>
+    </button>
     <div id="agent-dot"></div>
     <button id="slides-btn" title="Open as Slides">&#9654;</button>
   </div>
+  <nav id="mobile-menu">
+    <div id="menu-overlay"></div>
+    <div id="menu-panel">
+      <div id="menu-header">
+        <span id="menu-title">ColaMD</span>
+        <button id="menu-close-btn" title="Close">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="5" y1="5" x2="15" y2="15"/>
+            <line x1="15" y1="5" x2="5" y2="15"/>
+          </svg>
+        </button>
+      </div>
+      <div id="menu-body">
+        <div class="menu-section">
+          <div class="menu-section-title">File</div>
+          <button class="menu-item" data-action="new">New</button>
+          <button class="menu-item" data-action="open">Open...</button>
+          <button class="menu-item" data-action="save">Save</button>
+          <button class="menu-item" data-action="save-as">Save As...</button>
+        </div>
+        <div class="menu-section">
+          <div class="menu-section-title">Export</div>
+          <button class="menu-item" data-action="export-pdf">Export PDF</button>
+          <button class="menu-item" data-action="export-html">Export HTML</button>
+          <button class="menu-item" data-action="export-slides">Export Slides</button>
+        </div>
+        <div class="menu-section">
+          <div class="menu-section-title">Slides</div>
+          <button class="menu-item" data-action="new-slides">New Slides</button>
+          <button class="menu-item" data-action="open-as-slides">Open as Slides</button>
+        </div>
+        <div class="menu-section">
+          <div class="menu-section-title">Theme</div>
+          <div id="menu-theme-list"></div>
+          <button class="menu-item" data-action="import-theme">Import Theme...</button>
+        </div>
+        <div class="menu-section" id="menu-plugins-section" style="display:none">
+          <div class="menu-section-title">Plugins</div>
+          <div id="menu-plugin-list"></div>
+        </div>
+        <div class="menu-section">
+          <div class="menu-section-title">About</div>
+          <button class="menu-item" data-action="about">About ColaMD</button>
+          <button class="menu-item" data-action="exit">Exit</button>
+        </div>
+      </div>
+    </div>
+  </nav>
   <div id="editor"></div>
   <textarea id="source-editor" spellcheck="false"></textarea>
   <script type="module" src="./main.ts"></script>