hypercore-cli 1.1.0

package/dist/web/static/onboard.css

@@ -0,0 +1,302 @@
+/* Onboarding — 暗色主题，复用 workspace CSS 变量 */
+
+:root {
+  --ob-bg: #0d1117;
+  --ob-surface: #161b22;
+  --ob-surface-hover: #1c2129;
+  --ob-border: #30363d;
+  --ob-text: #e6edf3;
+  --ob-text-dim: #8b949e;
+  --ob-accent: #58a6ff;
+  --ob-accent-dim: rgba(88, 166, 255, 0.15);
+  --ob-success: #3fb950;
+  --ob-error: #f85149;
+  --ob-radius: 8px;
+  --ob-radius-lg: 12px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background: var(--ob-bg);
+  color: var(--ob-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Container */
+.ob-container {
+  width: 100%;
+  max-width: 640px;
+  padding: 40px 24px;
+}
+
+/* Logo */
+.ob-logo {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 32px;
+  letter-spacing: -0.5px;
+}
+
+/* Progress */
+.ob-progress {
+  height: 3px;
+  background: var(--ob-border);
+  border-radius: 2px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.ob-progress-bar {
+  height: 100%;
+  background: var(--ob-accent);
+  border-radius: 2px;
+  transition: width 0.4s ease;
+  width: 14.28%;
+}
+
+.ob-step-label {
+  text-align: center;
+  font-size: 12px;
+  color: var(--ob-text-dim);
+  margin-bottom: 24px;
+}
+
+/* Card */
+.ob-card {
+  background: var(--ob-surface);
+  border: 1px solid var(--ob-border);
+  border-radius: var(--ob-radius-lg);
+  padding: 32px 28px;
+  min-height: 380px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Steps */
+.ob-step {
+  display: none;
+  animation: fadeIn 0.3s ease;
+}
+
+.ob-step.active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ob-step h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.ob-desc {
+  color: var(--ob-text-dim);
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+
+/* Options Grid */
+.ob-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.ob-option {
+  background: var(--ob-bg);
+  border: 1px solid var(--ob-border);
+  border-radius: var(--ob-radius);
+  padding: 12px 16px;
+  color: var(--ob-text);
+  font-size: 14px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.ob-option:hover {
+  background: var(--ob-surface-hover);
+  border-color: var(--ob-accent);
+  transform: scale(1.01);
+}
+
+.ob-option.selected {
+  background: var(--ob-accent-dim);
+  border-color: var(--ob-accent);
+  color: var(--ob-accent);
+}
+
+.ob-tag {
+  display: inline-block;
+  font-size: 10px;
+  color: var(--ob-success);
+  background: rgba(63, 185, 80, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+/* Input Groups */
+.ob-input-group {
+  margin-top: 16px;
+  position: relative;
+}
+
+.ob-input-group label {
+  display: block;
+  font-size: 13px;
+  color: var(--ob-text-dim);
+  margin-bottom: 6px;
+}
+
+.ob-optional {
+  font-size: 11px;
+  color: var(--ob-text-dim);
+  opacity: 0.6;
+}
+
+.ob-input {
+  width: 100%;
+  background: var(--ob-bg);
+  border: 1px solid var(--ob-border);
+  border-radius: var(--ob-radius);
+  padding: 10px 14px;
+  color: var(--ob-text);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.ob-input:focus {
+  border-color: var(--ob-accent);
+}
+
+.ob-toggle-pw {
+  position: absolute;
+  right: 10px;
+  top: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.5;
+}
+
+.ob-toggle-pw:hover { opacity: 1; }
+
+/* Textarea */
+.ob-textarea {
+  width: 100%;
+  background: var(--ob-bg);
+  border: 1px solid var(--ob-border);
+  border-radius: var(--ob-radius);
+  padding: 12px 14px;
+  color: var(--ob-text);
+  font-size: 14px;
+  outline: none;
+  resize: vertical;
+  min-height: 120px;
+  font-family: inherit;
+  transition: border-color 0.2s;
+}
+
+.ob-textarea:focus {
+  border-color: var(--ob-accent);
+}
+
+/* Navigation */
+.ob-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 12px;
+}
+
+.ob-btn {
+  padding: 10px 24px;
+  border-radius: var(--ob-radius);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.ob-btn-back {
+  background: transparent;
+  color: var(--ob-text-dim);
+  border: 1px solid var(--ob-border);
+}
+
+.ob-btn-back:hover {
+  color: var(--ob-text);
+  border-color: var(--ob-text-dim);
+}
+
+.ob-btn-next {
+  background: var(--ob-accent);
+  color: #fff;
+  margin-left: auto;
+}
+
+.ob-btn-next:hover {
+  filter: brightness(1.1);
+}
+
+.ob-btn-next:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ob-btn-next.loading {
+  pointer-events: none;
+}
+
+/* Error */
+.ob-error {
+  text-align: center;
+  color: var(--ob-error);
+  font-size: 13px;
+  margin-top: 12px;
+  min-height: 20px;
+}
+
+/* Responsive */
+@media (max-width: 520px) {
+  .ob-container { padding: 20px 16px; }
+  .ob-card { padding: 24px 20px; }
+  .ob-options { grid-template-columns: 1fr; }
+  .ob-step h2 { font-size: 18px; }
+}
+
+/* Loading spinner for submit */
+.ob-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: obSpin 0.6s linear infinite;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+
+@keyframes obSpin {
+  to { transform: rotate(360deg); }
+}

package/dist/web/static/onboard.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hypercore — 开始使用</title>
+  <link rel="stylesheet" href="onboard.css">
+</head>
+<body>
+  <div class="ob-container">
+    <!-- Logo -->
+    <div class="ob-logo">⚡ Hypercore</div>
+
+    <!-- Progress Bar -->
+    <div class="ob-progress">
+      <div class="ob-progress-bar" id="progressBar"></div>
+    </div>
+    <div class="ob-step-label" id="stepLabel">第 1 步，共 7 步</div>
+
+    <!-- Wizard Card -->
+    <div class="ob-card" id="wizardCard">
+
+      <!-- Step 1: Industry -->
+      <div class="ob-step active" data-step="1">
+        <h2>你所在的行业？</h2>
+        <p class="ob-desc">我们会根据行业推荐最合适的工具和模板</p>
+        <div class="ob-options" data-field="industry">
+          <button class="ob-option" data-value="marketing">📢 营销/广告</button>
+          <button class="ob-option" data-value="ecommerce">🛒 电商/零售</button>
+          <button class="ob-option" data-value="education">📚 教育/培训</button>
+          <button class="ob-option" data-value="tech">💻 科技/互联网</button>
+          <button class="ob-option" data-value="finance">💰 金融/财务</button>
+          <button class="ob-option" data-value="media">🎬 媒体/内容</button>
+          <button class="ob-option" data-value="consulting">🏢 咨询/服务</button>
+          <button class="ob-option" data-value="other">🎯 其他</button>
+        </div>
+      </div>
+
+      <!-- Step 2: Role -->
+      <div class="ob-step" data-step="2">
+        <h2>你的角色是？</h2>
+        <p class="ob-desc">不同角色有不同的工作重心</p>
+        <div class="ob-options" data-field="role">
+          <button class="ob-option" data-value="founder">🚀 创始人/CEO</button>
+          <button class="ob-option" data-value="marketer">📣 市场/营销</button>
+          <button class="ob-option" data-value="content-creator">✍️ 内容创作者</button>
+          <button class="ob-option" data-value="product-manager">📋 产品经理</button>
+          <button class="ob-option" data-value="researcher">🔬 研究/分析</button>
+          <button class="ob-option" data-value="operations">⚙️ 运营/管理</button>
+          <button class="ob-option" data-value="freelancer">🎯 自由职业者</button>
+        </div>
+      </div>
+
+      <!-- Step 3: Automation Needs (Multi-select) -->
+      <div class="ob-step" data-step="3">
+        <h2>最想自动化哪些工作？</h2>
+        <p class="ob-desc">可多选，我们会为你预装对应的生产线</p>
+        <div class="ob-options ob-multi" data-field="automationNeeds">
+          <button class="ob-option" data-value="content-writing">✍️ 内容写作</button>
+          <button class="ob-option" data-value="research">🔍 调研分析</button>
+          <button class="ob-option" data-value="reports">📊 报告/周报</button>
+          <button class="ob-option" data-value="social-media">📱 社交媒体</button>
+          <button class="ob-option" data-value="competitor-analysis">🏷️ 竞品分析</button>
+          <button class="ob-option" data-value="meeting-notes">📝 会议纪要</button>
+          <button class="ob-option" data-value="data-analysis">📈 数据分析</button>
+          <button class="ob-option" data-value="customer-outreach">🤝 客户触达</button>
+        </div>
+      </div>
+
+      <!-- Step 4: Team Size -->
+      <div class="ob-step" data-step="4">
+        <h2>团队规模？</h2>
+        <p class="ob-desc">这决定了是否开启协作功能</p>
+        <div class="ob-options" data-field="teamSize">
+          <button class="ob-option" data-value="solo">🧑 独立工作</button>
+          <button class="ob-option" data-value="2-5">👥 2-5 人</button>
+          <button class="ob-option" data-value="6-20">🏢 6-20 人</button>
+          <button class="ob-option" data-value="20+">🏛️ 20+ 人</button>
+        </div>
+      </div>
+
+      <!-- Step 5: Platforms (Multi-select) -->
+      <div class="ob-step" data-step="5">
+        <h2>主要发布平台？</h2>
+        <p class="ob-desc">可多选，帮你适配内容格式</p>
+        <div class="ob-options ob-multi" data-field="platforms">
+          <button class="ob-option" data-value="wechat">💬 微信公众号</button>
+          <button class="ob-option" data-value="xiaohongshu">📕 小红书</button>
+          <button class="ob-option" data-value="douyin">🎵 抖音</button>
+          <button class="ob-option" data-value="website">🌐 网站/博客</button>
+          <button class="ob-option" data-value="email">📧 邮件</button>
+          <button class="ob-option" data-value="linkedin">💼 LinkedIn</button>
+          <button class="ob-option" data-value="twitter">🐦 Twitter/X</button>
+          <button class="ob-option" data-value="none">➖ 暂无</button>
+        </div>
+      </div>
+
+      <!-- Step 6: AI Provider + Key -->
+      <div class="ob-step" data-step="6">
+        <h2>选择 AI 模型</h2>
+        <p class="ob-desc">API Key 仅存储在本地，不会上传</p>
+        <div class="ob-options" data-field="provider">
+          <button class="ob-option" data-value="gemini">✨ Google Gemini 2.5 Flash<span class="ob-tag">推荐·免费额度</span></button>
+          <button class="ob-option" data-value="minimax">🤖 MiniMax M2.5<span class="ob-tag">性价比高</span></button>
+          <button class="ob-option" data-value="deepseek">🧊 DeepSeek<span class="ob-tag">国产首选</span></button>
+          <button class="ob-option" data-value="anthropic">🧠 Anthropic Claude<span class="ob-tag">最强推理</span></button>
+        </div>
+        <div class="ob-input-group">
+          <label for="apiKeyInput">API Key</label>
+          <input type="password" id="apiKeyInput" class="ob-input" placeholder="粘贴你的 API Key…">
+          <button class="ob-toggle-pw" id="togglePw" title="显示/隐藏" aria-label="切换密码可见性" type="button">👁️</button>
+        </div>
+        <div class="ob-input-group">
+          <label for="tavilyKeyInput">Tavily API Key <span class="ob-optional">可选</span></label>
+          <input type="password" id="tavilyKeyInput" class="ob-input" placeholder="用于网络搜索（可跳过）">
+        </div>
+      </div>
+
+      <!-- Step 7: Free Description (Optional) -->
+      <div class="ob-step" data-step="7">
+        <h2>还有什么要补充的吗？</h2>
+        <p class="ob-desc">描述你的具体工作场景，帮助我们更好地定制（可跳过）</p>
+        <textarea id="freeDescription" class="ob-textarea" rows="5"
+          placeholder="例如：我是一个跨境电商卖家，主要在亚马逊和独立站销售家居产品，需要定期做竞品调研和写产品描述…"></textarea>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="ob-nav">
+      <button class="ob-btn ob-btn-back" id="btnBack" style="visibility:hidden">← 上一步</button>
+      <button class="ob-btn ob-btn-next" id="btnNext">下一步 →</button>
+    </div>
+
+    <!-- Error message -->
+    <div class="ob-error" id="errorMsg" role="alert" aria-live="polite"></div>
+  </div>
+
+  <script src="onboard.js"></script>
+</body>
+</html>

package/dist/web/static/onboard.js

@@ -0,0 +1,260 @@
+/**
+ * Onboarding Wizard — 6步卡片向导 + 可选自由描述
+ */
+
+class OnboardingWizard {
+  constructor() {
+    this.totalSteps = 7;
+    this.currentStep = 1;
+    this.isSubmitting = false;
+    this._navDebounce = false;
+    this.answers = {
+      industry: '',
+      role: '',
+      automationNeeds: [],
+      teamSize: '',
+      platforms: [],
+      provider: '',
+      apiKey: '',
+      tavilyKey: '',
+      freeDescription: '',
+    };
+
+    this.els = {
+      progressBar: document.getElementById('progressBar'),
+      stepLabel: document.getElementById('stepLabel'),
+      btnBack: document.getElementById('btnBack'),
+      btnNext: document.getElementById('btnNext'),
+      errorMsg: document.getElementById('errorMsg'),
+      apiKeyInput: document.getElementById('apiKeyInput'),
+      tavilyKeyInput: document.getElementById('tavilyKeyInput'),
+      freeDescription: document.getElementById('freeDescription'),
+      togglePw: document.getElementById('togglePw'),
+    };
+
+    this.init();
+  }
+
+  init() {
+    // Option click handlers
+    document.querySelectorAll('.ob-options').forEach(group => {
+      const isMulti = group.classList.contains('ob-multi');
+      group.querySelectorAll('.ob-option').forEach(btn => {
+        btn.addEventListener('click', () => {
+          if (isMulti) {
+            btn.classList.toggle('selected');
+          } else {
+            group.querySelectorAll('.ob-option').forEach(b => b.classList.remove('selected'));
+            btn.classList.add('selected');
+          }
+          this.clearError();
+        });
+      });
+    });
+
+    // Navigation
+    this.els.btnBack.addEventListener('click', () => this.prev());
+    this.els.btnNext.addEventListener('click', () => this.next());
+
+    // Password toggle
+    this.els.togglePw.addEventListener('click', () => {
+      const input = this.els.apiKeyInput;
+      input.type = input.type === 'password' ? 'text' : 'password';
+    });
+
+    // Keyboard shortcut
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this.next();
+      }
+    });
+
+    this.render();
+  }
+
+  render() {
+    // Progress
+    const pct = (this.currentStep / this.totalSteps) * 100;
+    this.els.progressBar.style.width = `${pct}%`;
+    this.els.stepLabel.textContent = `第 ${this.currentStep} 步，共 ${this.totalSteps} 步`;
+
+    // Show/hide steps
+    document.querySelectorAll('.ob-step').forEach(step => {
+      const stepNum = parseInt(step.dataset.step, 10);
+      step.classList.toggle('active', stepNum === this.currentStep);
+    });
+
+    // Back button visibility
+    this.els.btnBack.style.visibility = this.currentStep > 1 ? 'visible' : 'hidden';
+
+    // Next button text
+    if (this.currentStep === this.totalSteps) {
+      this.els.btnNext.textContent = '🚀 生成工作台';
+    } else if (this.currentStep === this.totalSteps - 1) {
+      // Step 6 (API key) — normal "next"
+      this.els.btnNext.textContent = '下一步 →';
+    } else {
+      this.els.btnNext.textContent = '下一步 →';
+    }
+
+    this.clearError();
+  }
+
+  getStepField(step) {
+    const fields = {
+      1: 'industry',
+      2: 'role',
+      3: 'automationNeeds',
+      4: 'teamSize',
+      5: 'platforms',
+      6: 'provider',
+    };
+    return fields[step] || null;
+  }
+
+  collectStepValue(step) {
+    const field = this.getStepField(step);
+    if (!field) return true; // step 7 (free text) always valid
+
+    const group = document.querySelector(`.ob-step[data-step="${step}"] .ob-options[data-field="${field}"]`);
+    if (!group) return true;
+
+    const isMulti = group.classList.contains('ob-multi');
+    const selected = group.querySelectorAll('.ob-option.selected');
+
+    if (isMulti) {
+      const values = [...selected].map(b => b.dataset.value);
+      this.answers[field] = values;
+      return values.length > 0;
+    } else {
+      if (selected.length === 0) return false;
+      this.answers[field] = selected[0].dataset.value;
+      return true;
+    }
+  }
+
+  validate() {
+    const step = this.currentStep;
+
+    // Steps 1-5: option selection
+    if (step >= 1 && step <= 5) {
+      if (!this.collectStepValue(step)) {
+        this.showError('请至少选择一个选项');
+        return false;
+      }
+      return true;
+    }
+
+    // Step 6: provider + API key
+    if (step === 6) {
+      if (!this.collectStepValue(6)) {
+        this.showError('请选择一个 AI 提供商');
+        return false;
+      }
+      const apiKey = this.els.apiKeyInput.value.trim();
+      if (!apiKey || apiKey.length < 10) {
+        this.showError('请输入有效的 API Key（至少 10 个字符）');
+        return false;
+      }
+      this.answers.apiKey = apiKey;
+      this.answers.tavilyKey = this.els.tavilyKeyInput.value.trim();
+      return true;
+    }
+
+    // Step 7: free description (always valid, optional)
+    if (step === 7) {
+      this.answers.freeDescription = this.els.freeDescription.value.trim();
+      return true;
+    }
+
+    return true;
+  }
+
+  next() {
+    if (this._navDebounce || this.isSubmitting) return;
+    this._navDebounce = true;
+    setTimeout(() => { this._navDebounce = false; }, 300);
+
+    if (!this.validate()) return;
+
+    if (this.currentStep === this.totalSteps) {
+      this.submit();
+      return;
+    }
+
+    this.currentStep++;
+    this.render();
+  }
+
+  prev() {
+    if (this._navDebounce || this.isSubmitting) return;
+    this._navDebounce = true;
+    setTimeout(() => { this._navDebounce = false; }, 300);
+
+    if (this.currentStep > 1) {
+      this.currentStep--;
+      this.render();
+    }
+  }
+
+  showError(msg) {
+    this.els.errorMsg.textContent = msg;
+    // 5秒后自动清除
+    clearTimeout(this._errorTimer);
+    this._errorTimer = setTimeout(() => this.clearError(), 5000);
+  }
+
+  clearError() {
+    this.els.errorMsg.textContent = '';
+    clearTimeout(this._errorTimer);
+  }
+
+  async submit() {
+    if (this.isSubmitting) return;
+    this.isSubmitting = true;
+
+    const btn = this.els.btnNext;
+    btn.innerHTML = '<span class="ob-spinner"></span>生成中…';
+    btn.classList.add('loading');
+    btn.disabled = true;
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 30000);
+
+    try {
+      const res = await fetch('/api/onboard', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(this.answers),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeout);
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || '初始化失败');
+      }
+
+      // Success — redirect to workspace
+      btn.innerHTML = '✅ 就绪！正在跳转…';
+      btn.style.background = '#3fb950';
+
+      setTimeout(() => {
+        window.location.href = '/workspace';
+      }, 800);
+
+    } catch (err) {
+      const msg = err.name === 'AbortError' ? '请求超时，请重试' : (err.message || '提交失败，请检查网络');
+      this.showError(msg);
+      btn.innerHTML = '🚀 生成工作台';
+      btn.classList.remove('loading');
+      btn.disabled = false;
+      this.isSubmitting = false;
+    }
+  }
+}
+
+// Boot
+const wizard = new OnboardingWizard();