@leeoohoo/ui-apps-devkit 0.1.0

package/templates/notepad/plugin/apps/app/styles.mjs

@@ -0,0 +1,355 @@
+import { DS_TREE_STYLES } from './ds-tree.mjs';
+
+export const NOTEPAD_MANAGER_STYLES = `
+${DS_TREE_STYLES}
+    .np-root {
+      height: 100%;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 12px;
+      box-sizing: border-box;
+    }
+    .np-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .np-title {
+      font-weight: 750;
+      letter-spacing: 0.2px;
+    }
+    .np-meta {
+      font-size: 12px;
+      opacity: 0.72;
+    }
+    .np-pill {
+      font-size: 12px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-subtle-bg);
+      white-space: nowrap;
+      user-select: none;
+    }
+    .np-pill[data-tone='ok'] { box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.12); }
+    .np-pill[data-tone='bad'] { box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.12); }
+    .np-btn {
+      border: 1px solid var(--ds-panel-border);
+      background: transparent;
+      border-radius: 10px;
+      padding: 6px 8px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 1.2;
+      white-space: nowrap;
+    }
+    .np-btn:hover { background: var(--ds-subtle-bg); }
+    .np-btn:focus-visible {
+      outline: 2px solid var(--ds-focus-ring, rgba(0, 212, 255, 0.32));
+      outline-offset: 1px;
+    }
+    .np-btn:disabled,
+    .np-btn[data-disabled='1'] {
+      opacity: 0.55;
+      cursor: not-allowed;
+      box-shadow: none !important;
+    }
+    .np-input, .np-select, .np-textarea {
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-subtle-bg);
+      color: inherit;
+      border-radius: 10px;
+      padding: 7px 9px;
+      outline: none;
+      box-sizing: border-box;
+    }
+    .np-input { width: 100%; }
+    .np-select { width: 100%; }
+    .np-textarea {
+      width: 100%;
+      height: 100%;
+      resize: none;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 13px;
+      line-height: 1.45;
+      background: var(--ds-code-bg);
+      border-color: var(--ds-code-border);
+    }
+    .np-grid {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      gap: 10px;
+    }
+    .np-card {
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-panel-bg);
+      border-radius: 12px;
+      overflow: hidden;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    .np-card-header {
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--ds-panel-border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      font-size: 12px;
+      font-weight: 650;
+    }
+    .np-card-body {
+      padding: 10px;
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .np-section-title {
+      font-size: 12px;
+      font-weight: 750;
+      opacity: 0.85;
+      margin-bottom: 6px;
+    }
+    .np-section-title-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .np-section-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .np-btn-icon {
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .np-btn-icon .ds-tree-icon {
+      opacity: 0.86;
+    }
+    .np-create-hint {
+      margin-top: 6px;
+    }
+    .np-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .np-item {
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-subtle-bg);
+      border-radius: 12px;
+      padding: 8px 10px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .np-item:hover { box-shadow: 0 0 0 3px var(--ds-focus-ring); }
+    .np-item[data-active='1'] {
+      border-color: rgba(46, 160, 67, 0.55);
+      box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.18);
+    }
+    .np-item-title { font-weight: 700; }
+    .np-item-meta { font-size: 12px; opacity: 0.72; }
+    .np-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
+    .np-chip {
+      font-size: 12px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-subtle-bg);
+      cursor: pointer;
+      user-select: none;
+    }
+    .np-chip:hover { box-shadow: 0 0 0 3px var(--ds-focus-ring); }
+    .np-chip[data-active='1'] {
+      border-color: rgba(46, 160, 67, 0.55);
+      box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.18);
+    }
+    .np-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    .np-row-compact {
+      flex-wrap: nowrap;
+    }
+    .np-row-compact > .np-input {
+      width: auto;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .np-editor-top {
+      display: grid;
+      grid-template-columns: 1fr 220px;
+      gap: 8px;
+    }
+    .np-editor-top-row {
+      display: grid;
+      grid-template-columns: 1fr 220px;
+      gap: 8px;
+      align-items: center;
+    }
+    .np-editor-split {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    .np-root[data-editor-mode='preview'] .np-textarea {
+      display: none;
+    }
+    .np-root[data-editor-mode='preview'] .np-editor-split {
+      grid-template-columns: 1fr;
+    }
+    .np-preview {
+      border: 1px solid var(--ds-code-border);
+      background: var(--ds-code-bg);
+      border-radius: 10px;
+      padding: 10px;
+      overflow: auto;
+      min-height: 0;
+      font-size: 13px;
+      line-height: 1.6;
+    }
+    .np-preview h1, .np-preview h2, .np-preview h3, .np-preview h4, .np-preview h5, .np-preview h6 {
+      margin: 12px 0 8px;
+      font-weight: 750;
+    }
+    .np-preview p { margin: 0 0 10px; }
+    .np-preview code {
+      padding: 2px 6px;
+      border-radius: 6px;
+      border: 1px solid var(--ds-code-border);
+      background: rgba(110, 118, 129, 0.18);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 12px;
+    }
+    .np-preview pre {
+      padding: 10px 12px;
+      border-radius: 10px;
+      border: 1px solid var(--ds-code-border);
+      overflow: auto;
+      background: rgba(110, 118, 129, 0.18);
+    }
+    .np-preview pre code { border: none; padding: 0; background: transparent; }
+    .np-preview blockquote {
+      margin: 0 0 10px;
+      padding: 8px 10px;
+      border-left: 3px solid var(--ds-panel-border);
+      background: rgba(110, 118, 129, 0.14);
+      border-radius: 10px;
+    }
+    .np-preview ul, .np-preview ol { margin: 0 0 10px 22px; }
+    .np-preview img { max-width: 100%; border-radius: 10px; border: 1px solid var(--ds-panel-border); }
+    .np-menu-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 999;
+    }
+    .np-menu {
+      position: absolute;
+      min-width: 220px;
+      background: var(--ds-panel-bg);
+      border: 1px solid var(--ds-panel-border);
+      border-radius: 12px;
+      padding: 6px;
+      box-shadow: 0 18px 48px rgba(0,0,0,0.22);
+    }
+    .np-menu-item {
+      width: 100%;
+      border: none;
+      background: transparent;
+      color: inherit;
+      text-align: left;
+      padding: 8px 10px;
+      border-radius: 10px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    .np-menu-item:hover { background: var(--ds-subtle-bg); }
+    .np-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
+    .np-menu-item[data-danger='1'] { color: #f85149; }
+    :root[data-theme='dark'] .np-menu-item[data-danger='1'] { color: #ff7b72; }
+    .np-modal-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 18px;
+      background: rgba(0,0,0,0.35);
+    }
+    .np-modal {
+      width: min(520px, 100%);
+      border: 1px solid var(--ds-panel-border);
+      background: var(--ds-panel-bg);
+      border-radius: 14px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 18px 48px rgba(0,0,0,0.25);
+    }
+    .np-modal-header {
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--ds-panel-border);
+      font-weight: 750;
+      font-size: 14px;
+    }
+    .np-modal-body {
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .np-modal-desc {
+      font-size: 13px;
+      opacity: 0.85;
+      white-space: pre-wrap;
+    }
+    .np-modal-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .np-modal-label {
+      font-size: 12px;
+      font-weight: 700;
+      opacity: 0.85;
+    }
+    .np-modal-error {
+      font-size: 12px;
+      color: #f85149;
+    }
+    :root[data-theme='dark'] .np-modal-error { color: #ff7b72; }
+    .np-modal-actions {
+      padding: 12px 14px;
+      border-top: 1px solid var(--ds-panel-border);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    .np-btn[data-variant='danger'] { border-color: rgba(248, 81, 73, 0.5); }
+    .np-btn[data-variant='danger']:hover { box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.24); }
+`;

package/templates/notepad/plugin/apps/app/tags.mjs

@@ -0,0 +1,21 @@
+export function tagsToText(tags) {
+  return (Array.isArray(tags) ? tags : []).join(', ');
+}
+
+export function parseTags(input) {
+  const raw = String(input ?? '');
+  const parts = raw
+    .split(',')
+    .map((p) => p.trim())
+    .filter(Boolean);
+  const out = [];
+  const seen = new Set();
+  for (const tag of parts) {
+    const key = tag.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(tag);
+  }
+  return out;
+}
+

package/templates/notepad/plugin/apps/app/ui.mjs

@@ -0,0 +1,280 @@
+import { isElement } from './dom.mjs';
+import { NOTEPAD_MANAGER_STYLES } from './styles.mjs';
+
+export function createNotepadManagerUi({ container, slots, ctx, bridgeEnabled }) {
+  if (!container) throw new Error('container is required');
+
+  const headerSlot = isElement(slots?.header) ? slots.header : null;
+
+  const style = document.createElement('style');
+  style.textContent = NOTEPAD_MANAGER_STYLES;
+
+  const root = document.createElement('div');
+  root.className = 'np-root';
+  root.dataset.editorMode = 'preview';
+  root.appendChild(style);
+
+  const header = document.createElement('div');
+  header.className = 'np-header';
+
+  const headerLeft = document.createElement('div');
+  headerLeft.style.display = 'flex';
+  headerLeft.style.flexDirection = 'column';
+  headerLeft.style.gap = '2px';
+
+  const title = document.createElement('div');
+  title.className = 'np-title';
+  title.textContent = '记事本';
+
+  const meta = document.createElement('div');
+  meta.className = 'np-meta';
+  meta.textContent = `${ctx?.pluginId || ''}:${ctx?.appId || ''} · bridge=${bridgeEnabled ? 'enabled' : 'disabled'}`;
+
+  headerLeft.appendChild(title);
+  headerLeft.appendChild(meta);
+
+  const headerRight = document.createElement('div');
+  headerRight.style.display = 'flex';
+  headerRight.style.alignItems = 'center';
+  headerRight.style.gap = '8px';
+  headerRight.style.flexWrap = 'wrap';
+
+  const btnNewFolder = document.createElement('button');
+  btnNewFolder.type = 'button';
+  btnNewFolder.className = 'np-btn np-btn-icon';
+  btnNewFolder.title = '新建文件夹';
+  btnNewFolder.setAttribute('aria-label', '新建文件夹');
+  const btnNewFolderIcon = document.createElement('span');
+  btnNewFolderIcon.className = 'ds-tree-icon ds-tree-icon-new-folder';
+  btnNewFolder.appendChild(btnNewFolderIcon);
+
+  const btnNewNote = document.createElement('button');
+  btnNewNote.type = 'button';
+  btnNewNote.className = 'np-btn np-btn-icon';
+  btnNewNote.title = '新建笔记';
+  btnNewNote.setAttribute('aria-label', '新建笔记');
+  const btnNewNoteIcon = document.createElement('span');
+  btnNewNoteIcon.className = 'ds-tree-icon ds-tree-icon-new-note';
+  btnNewNote.appendChild(btnNewNoteIcon);
+
+  const btnSave = document.createElement('button');
+  btnSave.type = 'button';
+  btnSave.className = 'np-btn';
+  btnSave.textContent = '保存';
+
+  const btnDelete = document.createElement('button');
+  btnDelete.type = 'button';
+  btnDelete.className = 'np-btn';
+  btnDelete.textContent = '删除';
+
+  const btnCopy = document.createElement('button');
+  btnCopy.type = 'button';
+  btnCopy.className = 'np-btn';
+  btnCopy.textContent = '复制';
+  btnCopy.title = '复制当前笔记内容';
+
+  const btnToggleEdit = document.createElement('button');
+  btnToggleEdit.type = 'button';
+  btnToggleEdit.className = 'np-btn';
+  btnToggleEdit.textContent = '编辑';
+  btnToggleEdit.title = '切换编辑/预览';
+
+  const statusPill = document.createElement('div');
+  statusPill.className = 'np-pill';
+  statusPill.dataset.tone = 'bad';
+  statusPill.textContent = 'Notes: initializing...';
+
+  headerRight.appendChild(statusPill);
+
+  header.appendChild(headerLeft);
+  header.appendChild(headerRight);
+
+  const grid = document.createElement('div');
+  grid.className = 'np-grid';
+
+  const leftCard = document.createElement('div');
+  leftCard.className = 'np-card';
+  const leftHeader = document.createElement('div');
+  leftHeader.className = 'np-card-header';
+  leftHeader.textContent = '分类与检索';
+  const leftBody = document.createElement('div');
+  leftBody.className = 'np-card-body';
+
+  const createHint = document.createElement('div');
+  createHint.className = 'np-meta np-create-hint';
+  createHint.textContent = '新笔记将创建在：根目录';
+
+  const searchInput = document.createElement('input');
+  searchInput.className = 'np-input';
+  searchInput.type = 'text';
+  searchInput.placeholder = '搜索标题/文件夹/内容…';
+
+  const btnClearSearch = document.createElement('button');
+  btnClearSearch.type = 'button';
+  btnClearSearch.className = 'np-btn np-btn-icon';
+  btnClearSearch.title = '清空搜索';
+  btnClearSearch.setAttribute('aria-label', '清空搜索');
+  btnClearSearch.textContent = '×';
+
+  const searchRow = document.createElement('div');
+  searchRow.className = 'np-row np-row-compact';
+  searchRow.appendChild(searchInput);
+  searchRow.appendChild(btnClearSearch);
+
+  const folderSection = document.createElement('div');
+  const folderTitle = document.createElement('div');
+  folderTitle.className = 'np-section-title np-section-title-row';
+  const folderTitleLabel = document.createElement('div');
+  folderTitleLabel.textContent = '笔记';
+  const folderTitleActions = document.createElement('div');
+  folderTitleActions.className = 'np-section-actions';
+  folderTitleActions.appendChild(btnNewNote);
+  folderTitleActions.appendChild(btnNewFolder);
+  folderTitle.appendChild(folderTitleLabel);
+  folderTitle.appendChild(folderTitleActions);
+  const folderList = document.createElement('div');
+  folderList.className = 'ds-tree';
+  folderSection.appendChild(folderTitle);
+  folderSection.appendChild(folderList);
+  folderSection.appendChild(createHint);
+
+  const tagSection = document.createElement('div');
+  const tagTitle = document.createElement('div');
+  tagTitle.className = 'np-section-title';
+  tagTitle.textContent = '标签过滤';
+  const tagRow = document.createElement('div');
+  tagRow.className = 'np-chip-row';
+  tagSection.appendChild(tagTitle);
+  tagSection.appendChild(tagRow);
+
+  leftBody.appendChild(searchRow);
+  leftBody.appendChild(folderSection);
+
+  leftCard.appendChild(leftHeader);
+  leftCard.appendChild(leftBody);
+
+  const rightCard = document.createElement('div');
+  rightCard.className = 'np-card';
+  const rightHeader = document.createElement('div');
+  rightHeader.className = 'np-card-header';
+  rightHeader.textContent = '';
+  const rightHeaderTitle = document.createElement('div');
+  rightHeaderTitle.textContent = '编辑与预览';
+  const rightHeaderActions = document.createElement('div');
+  rightHeaderActions.className = 'np-row';
+  rightHeaderActions.appendChild(btnToggleEdit);
+  rightHeaderActions.appendChild(btnCopy);
+  rightHeaderActions.appendChild(btnSave);
+  rightHeaderActions.appendChild(btnDelete);
+  rightHeader.appendChild(rightHeaderTitle);
+  rightHeader.appendChild(rightHeaderActions);
+  const rightBody = document.createElement('div');
+  rightBody.className = 'np-card-body';
+
+  const editorTop = document.createElement('div');
+  editorTop.className = 'np-editor-top';
+
+  const titleInput = document.createElement('input');
+  titleInput.className = 'np-input';
+  titleInput.type = 'text';
+  titleInput.placeholder = '标题';
+
+  const folderSelect = document.createElement('select');
+  folderSelect.className = 'np-select';
+  folderSelect.title = '选择文件夹';
+
+  editorTop.appendChild(titleInput);
+  editorTop.appendChild(folderSelect);
+
+  const editorTopRow = document.createElement('div');
+  editorTopRow.className = 'np-editor-top-row';
+
+  const tagsInput = document.createElement('input');
+  tagsInput.className = 'np-input';
+  tagsInput.type = 'text';
+  tagsInput.placeholder = '标签（逗号分隔）';
+
+  const infoBox = document.createElement('div');
+  infoBox.className = 'np-meta';
+  infoBox.style.alignSelf = 'center';
+  infoBox.textContent = '未选择笔记';
+
+  editorTopRow.appendChild(tagsInput);
+  editorTopRow.appendChild(infoBox);
+
+  const split = document.createElement('div');
+  split.className = 'np-editor-split';
+
+  const textarea = document.createElement('textarea');
+  textarea.className = 'np-textarea';
+  textarea.placeholder = '开始写 Markdown…';
+
+  const preview = document.createElement('div');
+  preview.className = 'np-preview';
+  preview.innerHTML = '<div class=\"np-meta\">预览区</div>';
+
+  split.appendChild(textarea);
+  split.appendChild(preview);
+
+  rightBody.appendChild(editorTop);
+  rightBody.appendChild(editorTopRow);
+  rightBody.appendChild(split);
+
+  rightCard.appendChild(rightHeader);
+  rightCard.appendChild(rightBody);
+
+  grid.appendChild(leftCard);
+  grid.appendChild(rightCard);
+
+  if (headerSlot) {
+    try {
+      headerSlot.textContent = '';
+    } catch {
+      // ignore
+    }
+    try {
+      headerSlot.appendChild(header);
+    } catch {
+      root.appendChild(header);
+    }
+  } else {
+    root.appendChild(header);
+  }
+  root.appendChild(grid);
+
+  try {
+    container.textContent = '';
+  } catch {
+    // ignore
+  }
+  container.appendChild(root);
+
+  const setStatus = (text, tone) => {
+    statusPill.textContent = text;
+    statusPill.dataset.tone = tone === 'ok' ? 'ok' : 'bad';
+  };
+
+  return {
+    root,
+    header,
+    btnNewFolder,
+    btnNewNote,
+    btnSave,
+    btnDelete,
+    btnCopy,
+    btnToggleEdit,
+    statusPill,
+    createHint,
+    searchInput,
+    btnClearSearch,
+    folderList,
+    tagRow,
+    titleInput,
+    folderSelect,
+    tagsInput,
+    infoBox,
+    textarea,
+    preview,
+    setStatus,
+  };
+}