@yesdgq/claude-buddy 1.1.2000 → 1.1.3010

package/assets/editor.css

@@ -0,0 +1,219 @@
+.editor-page {
+  min-height: 100vh;
+  padding: var(--space-xl) var(--space-md);
+}
+
+.editor-shell {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.editor-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-lg);
+  margin-bottom: var(--space-lg);
+}
+
+.editor-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+  padding: 9px 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out-quart);
+}
+
+.editor-back-link:hover {
+  border-color: var(--accent-primary);
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.editor-heading {
+  min-width: 0;
+}
+
+.editor-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.editor-title-row h1 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  line-height: 1.3;
+}
+
+.editor-format {
+  padding: 3px 8px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.editor-path {
+  display: block;
+  margin-top: 4px;
+  padding: 0;
+  overflow-wrap: anywhere;
+  background: transparent;
+  color: var(--accent-primary);
+  font-size: 0.875rem;
+}
+
+.editor-panel {
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-md);
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.editor-state {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-width: 0;
+  color: var(--text-tertiary);
+  font-size: 0.8125rem;
+}
+
+.editor-state.is-dirty {
+  color: var(--accent-orange);
+}
+
+.editor-state.is-success {
+  color: var(--accent-success);
+}
+
+.editor-state.is-error {
+  color: var(--accent-danger);
+}
+
+.editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+}
+
+.editor-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 7px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-out-quart);
+}
+
+.editor-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.editor-button-secondary {
+  border-color: var(--border-default);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.editor-button-secondary:hover:not(:disabled) {
+  border-color: var(--accent-primary);
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.editor-button-primary {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.editor-button-primary:hover:not(:disabled) {
+  background: var(--accent-primary-hover);
+  transform: translateY(-1px);
+}
+
+.content-editor {
+  display: block;
+  width: 100%;
+  min-height: min(68vh, 720px);
+  padding: var(--space-lg);
+  resize: vertical;
+  border: 0;
+  outline: 0;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  tab-size: 2;
+}
+
+.content-editor:focus {
+  box-shadow: inset 0 0 0 2px var(--accent-primary-subtle);
+}
+
+.content-editor:disabled {
+  cursor: wait;
+  opacity: 0.75;
+}
+
+.editor-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: 9px var(--space-md);
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-tertiary);
+  font-size: 0.75rem;
+}
+
+@media (max-width: 640px) {
+  .editor-page {
+    padding: var(--space-md) var(--space-sm);
+  }
+
+  .editor-header,
+  .editor-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .editor-actions {
+    justify-content: stretch;
+  }
+
+  .editor-button {
+    flex: 1;
+  }
+
+  .content-editor {
+    min-height: 65vh;
+    padding: var(--space-md);
+  }
+}

package/assets/editor.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>配置文件编辑器</title>
+  <link rel="stylesheet" href="libs/font-awesome.min.css">
+  <link rel="stylesheet" href="libs/style.css">
+  <link rel="stylesheet" href="editor.css">
+</head>
+<body class="editor-page">
+  <main class="editor-shell">
+    <header class="editor-header">
+      <a href="/" class="editor-back-link">
+        <i class="fa fa-arrow-left"></i>
+        <span id="back-label">返回配置</span>
+      </a>
+      <div class="editor-heading">
+        <div class="editor-title-row">
+          <h1 id="file-title">配置文件</h1>
+          <span id="file-format" class="editor-format"></span>
+        </div>
+        <code id="file-path" class="editor-path"></code>
+      </div>
+    </header>
+
+    <section class="editor-panel">
+      <div class="editor-toolbar">
+        <div class="editor-state">
+          <i id="state-icon" class="fa fa-circle-o-notch fa-spin"></i>
+          <span id="state-label">加载中...</span>
+        </div>
+        <div class="editor-actions">
+          <button id="format-button" type="button" class="editor-button editor-button-secondary" hidden>
+            <i class="fa fa-indent"></i>
+            <span id="format-label">格式化 JSON</span>
+          </button>
+          <button id="reload-button" type="button" class="editor-button editor-button-secondary">
+            <i class="fa fa-refresh"></i>
+            <span id="reload-label">重新加载</span>
+          </button>
+          <button id="save-button" type="button" class="editor-button editor-button-primary" disabled>
+            <i class="fa fa-save"></i>
+            <span id="save-label">保存</span>
+          </button>
+        </div>
+      </div>
+
+      <textarea id="content-editor" class="content-editor" spellcheck="false" disabled></textarea>
+
+      <footer class="editor-footer">
+        <span id="file-state"></span>
+        <span id="line-count">0 行</span>
+      </footer>
+    </section>
+  </main>
+  <div id="toast-container"></div>
+  <script src="editor.js" defer></script>
+</body>
+</html>

package/assets/editor.js

@@ -0,0 +1,299 @@
+const FILE_DEFINITIONS = {
+  'claude-settings': {
+    title: { zh: 'Claude 配置', en: 'Claude Configuration' },
+    format: 'json'
+  },
+  'codex-config': {
+    title: { zh: 'Codex 配置', en: 'Codex Configuration' },
+    format: 'toml'
+  },
+  'workbuddy-models': {
+    title: { zh: 'WorkBuddy 配置', en: 'WorkBuddy Configuration' },
+    format: 'json'
+  }
+};
+const CONFIG_FILE_REFRESH_STORAGE_KEY = 'ccby-config-file-refresh';
+
+const translations = {
+  zh: {
+    back: '返回配置',
+    loading: '加载中...',
+    loaded: '已加载',
+    missing: '文件不存在，可保存创建',
+    unsaved: '有未保存的修改',
+    saved: '已保存',
+    saveSuccess: '配置文件保存成功！',
+    loadFailed: '加载失败',
+    saveFailed: '保存失败',
+    saving: '保存中...',
+    invalidJson: 'JSON 格式错误',
+    formatJson: '格式化 JSON',
+    reload: '重新加载',
+    save: '保存',
+    lines: '行',
+    confirmReload: '当前有未保存的修改，确定重新加载吗？',
+    openFailed: '无法打开文件编辑器'
+  },
+  en: {
+    back: 'Back to configuration',
+    loading: 'Loading...',
+    loaded: 'Loaded',
+    missing: 'File does not exist; save to create it',
+    unsaved: 'Unsaved changes',
+    saved: 'Saved',
+    saveSuccess: 'Configuration file saved successfully!',
+    loadFailed: 'Load failed',
+    saveFailed: 'Save failed',
+    saving: 'Saving...',
+    invalidJson: 'Invalid JSON',
+    formatJson: 'Format JSON',
+    reload: 'Reload',
+    save: 'Save',
+    lines: 'lines',
+    confirmReload: 'There are unsaved changes. Reload anyway?',
+    openFailed: 'Unable to open file editor'
+  }
+};
+
+const lang = localStorage.getItem('ccby-lang') === 'zh' ? 'zh' : 'en';
+const t = translations[lang];
+const params = new URLSearchParams(window.location.search);
+const fileKey = params.get('fileKey') || '';
+const fileDefinition = FILE_DEFINITIONS[fileKey];
+const elements = {
+  backLink: document.querySelector('.editor-back-link'),
+  backLabel: document.getElementById('back-label'),
+  fileTitle: document.getElementById('file-title'),
+  fileFormat: document.getElementById('file-format'),
+  filePath: document.getElementById('file-path'),
+  stateIcon: document.getElementById('state-icon'),
+  stateLabel: document.getElementById('state-label'),
+  formatButton: document.getElementById('format-button'),
+  formatLabel: document.getElementById('format-label'),
+  reloadButton: document.getElementById('reload-button'),
+  reloadLabel: document.getElementById('reload-label'),
+  saveButton: document.getElementById('save-button'),
+  saveLabel: document.getElementById('save-label'),
+  contentEditor: document.getElementById('content-editor'),
+  fileState: document.getElementById('file-state'),
+  lineCount: document.getElementById('line-count')
+};
+
+let originalContent = '';
+let fileExists = false;
+let hasSavedChanges = false;
+let refreshNoticeSent = false;
+
+function applyStoredTheme() {
+  const savedTheme = localStorage.getItem('ccby-theme');
+  document.documentElement.setAttribute('data-theme', savedTheme === 'light' ? 'light' : 'dark');
+}
+
+function setTextContent() {
+  elements.backLabel.textContent = t.back;
+  elements.formatLabel.textContent = t.formatJson;
+  elements.reloadLabel.textContent = t.reload;
+  elements.saveLabel.textContent = t.save;
+}
+
+function setState(message, type = '') {
+  elements.stateLabel.textContent = message;
+  elements.stateIcon.className = type === 'error'
+    ? 'fa fa-exclamation-circle'
+    : (type === 'success' ? 'fa fa-check-circle' : 'fa fa-circle-o-notch fa-spin');
+  elements.stateLabel.parentElement.className = `editor-state${type ? ` is-${type}` : ''}`;
+}
+
+function updateEditorMeta() {
+  const content = elements.contentEditor.value;
+  const lineCount = content ? content.split('\n').length : 0;
+  const isDirty = content !== originalContent;
+  elements.lineCount.textContent = `${lineCount} ${t.lines}`;
+  elements.saveButton.disabled = !fileDefinition || !isDirty;
+  elements.fileState.textContent = isDirty
+    ? t.unsaved
+    : (fileExists ? t.loaded : t.missing);
+  elements.fileState.className = isDirty ? 'editor-state is-dirty' : 'editor-state';
+}
+
+function getErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function showToast(message, type = 'success') {
+  const toastContainer = document.getElementById('toast-container');
+  if (!toastContainer) {
+    return;
+  }
+
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+
+  const icon = document.createElement('i');
+  icon.className = `fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}`;
+
+  const messageElement = document.createElement('span');
+  messageElement.className = 'flex-1';
+  messageElement.textContent = message;
+
+  const closeButton = document.createElement('i');
+  closeButton.className = 'fa fa-times toast-close';
+  closeButton.addEventListener('click', () => toast.remove());
+
+  toast.append(icon, messageElement, closeButton);
+  toastContainer.appendChild(toast);
+
+  setTimeout(() => {
+    if (!toast.isConnected) {
+      return;
+    }
+    toast.style.animation = 'slideOut 0.3s ease-out';
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+function notifyConfigPageToRefresh() {
+  if (!hasSavedChanges || refreshNoticeSent) {
+    return;
+  }
+
+  try {
+    localStorage.setItem(CONFIG_FILE_REFRESH_STORAGE_KEY, JSON.stringify({
+      fileKey,
+      timestamp: Date.now()
+    }));
+    refreshNoticeSent = true;
+  } catch {
+  }
+}
+
+async function loadFile() {
+  if (!fileDefinition) {
+    setState(t.loadFailed, 'error');
+    elements.fileState.textContent = 'Invalid file key';
+    elements.contentEditor.disabled = true;
+    elements.reloadButton.disabled = true;
+    elements.saveButton.disabled = true;
+    return;
+  }
+
+  setState(t.loading);
+  elements.contentEditor.disabled = true;
+  elements.reloadButton.disabled = true;
+  elements.saveButton.disabled = true;
+
+  try {
+    const response = await fetch(`/api/config-file?fileKey=${encodeURIComponent(fileKey)}`);
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || t.loadFailed);
+    }
+    originalContent = data.content;
+    fileExists = data.exists;
+    elements.contentEditor.value = data.content;
+    elements.filePath.textContent = data.path;
+    elements.fileFormat.textContent = data.format;
+    elements.contentEditor.disabled = false;
+    elements.reloadButton.disabled = false;
+    setState(fileExists ? t.loaded : t.missing, fileExists ? 'success' : '');
+    updateEditorMeta();
+  } catch (error) {
+    setState(`${t.loadFailed}: ${getErrorMessage(error)}`, 'error');
+    elements.reloadButton.disabled = false;
+  }
+}
+
+async function saveFile() {
+  const content = elements.contentEditor.value;
+  if (fileDefinition.format === 'json') {
+    try {
+      JSON.parse(content.replace(/^\uFEFF/, ''));
+    } catch (error) {
+      setState(`${t.invalidJson}: ${getErrorMessage(error)}`, 'error');
+      return;
+    }
+  }
+
+  elements.saveButton.disabled = true;
+  setState(t.saving);
+  try {
+    const response = await fetch('/api/config-file', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ fileKey, content })
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || t.saveFailed);
+    }
+    originalContent = content;
+    fileExists = true;
+    hasSavedChanges = true;
+    setState(t.saved, 'success');
+    showToast(t.saveSuccess, 'success');
+    updateEditorMeta();
+  } catch (error) {
+    setState(`${t.saveFailed}: ${getErrorMessage(error)}`, 'error');
+    showToast(`${t.saveFailed}: ${getErrorMessage(error)}`, 'error');
+    updateEditorMeta();
+  }
+}
+
+function formatJson() {
+  try {
+    const parsed = JSON.parse(elements.contentEditor.value.replace(/^\uFEFF/, ''));
+    elements.contentEditor.value = `${JSON.stringify(parsed, null, 2)}\n`;
+    updateEditorMeta();
+    elements.contentEditor.focus();
+  } catch (error) {
+    setState(`${t.invalidJson}: ${getErrorMessage(error)}`, 'error');
+  }
+}
+
+function closeEditor() {
+  notifyConfigPageToRefresh();
+  window.close();
+  setTimeout(() => {
+    if (!window.closed) {
+      window.location.replace('/');
+    }
+  }, 150);
+}
+
+window.addEventListener('beforeunload', notifyConfigPageToRefresh);
+window.addEventListener('storage', event => {
+  if (event.key === 'ccby-theme') {
+    applyStoredTheme();
+  }
+});
+
+applyStoredTheme();
+setTextContent();
+if (fileDefinition) {
+  elements.fileTitle.textContent = fileDefinition.title[lang];
+  elements.fileFormat.textContent = fileDefinition.format;
+  elements.formatButton.hidden = fileDefinition.format !== 'json';
+  document.title = `${fileDefinition.title[lang]} - Claude Buddy`;
+}
+elements.contentEditor.addEventListener('input', updateEditorMeta);
+elements.backLink.addEventListener('click', event => {
+  event.preventDefault();
+  closeEditor();
+});
+elements.reloadButton.addEventListener('click', () => {
+  if (elements.contentEditor.value !== originalContent && !window.confirm(t.confirmReload)) {
+    return;
+  }
+  loadFile();
+});
+elements.saveButton.addEventListener('click', saveFile);
+elements.formatButton.addEventListener('click', formatJson);
+window.addEventListener('keydown', event => {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+    event.preventDefault();
+    if (!elements.saveButton.disabled) {
+      saveFile();
+    }
+  }
+});
+loadFile();