@code2rich/jpage 1.5.0

package/public/js/pages/landing.js

@@ -0,0 +1,158 @@
+// 落地页：产品介绍、模板展示
+
+import { api } from '../api.js';
+import { state, navigate } from '../app.js';
+
+function renderLanding(container, openModal) {
+  if (state.currentUser) { navigate('/'); return; }
+  const tmpl = document.getElementById('landing-template');
+  container.innerHTML = '';
+  container.appendChild(tmpl.content.cloneNode(true));
+
+  const el = container.querySelector('.landing-page');
+
+  // 导航栏滚动吸顶效果
+  const nav = el.querySelector('.landing-nav');
+  const onScroll = () => {
+    if (window.scrollY > 40) {
+      nav.classList.add('scrolled');
+    } else {
+      nav.classList.remove('scrolled');
+    }
+  };
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+
+  // 模板展示（可选区块：若模板里已移除相关元素，则跳过，不影响落地页主体渲染）
+  const grid = el.querySelector('#landing-template-grid');
+  const emptyEl = el.querySelector('#landing-template-empty');
+  const filters = el.querySelectorAll('.scene-filter');
+  let currentScene = '';
+
+  // 关键元素缺失时优雅降级：不初始化模板展示功能
+  if (grid && emptyEl) {
+    filters.forEach(btn => {
+      btn.addEventListener('click', () => {
+        filters.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentScene = btn.dataset.scene;
+        loadTemplates();
+      });
+    });
+  }
+
+  async function loadTemplates() {
+    try {
+      const params = new URLSearchParams({ limit: '8' });
+      if (currentScene) params.set('scene', currentScene);
+      const data = await api('/api/content-templates/public?' + params);
+      renderTemplateGrid(data.templates);
+    } catch {
+      renderTemplateGrid([]);
+    }
+  }
+
+  function renderTemplateGrid(templates) {
+    if (!templates || templates.length === 0) {
+      grid.innerHTML = '';
+      emptyEl.hidden = false;
+      return;
+    }
+    emptyEl.hidden = true;
+    grid.innerHTML = templates.map(t => {
+      const sceneLabels = { dashboard: '仪表板', report: '报告', resume: '简历', landing: '落地页', note: '笔记', presentation: '演示', card: '卡片', email: '邮件', other: '其他' };
+      const sceneLabel = sceneLabels[t.scene] || t.scene;
+      return `
+        <div class="landing-template-card" data-id="${t.id}" data-file-type="${t.file_type}">
+          <div class="landing-template-thumb">
+            <div class="ct-card-thumb-wrap"><iframe class="ct-thumb-iframe" sandbox="allow-scripts"></iframe></div>
+            <div class="ct-card-thumb-loading"></div>
+            <div class="landing-template-thumb-placeholder">${t.title.charAt(0)}</div>
+          </div>
+          <div class="landing-template-info">
+            <h4>${escapeHtml(t.title)}</h4>
+            <div class="landing-template-meta">
+              <span class="ct-badge ct-badge-scene">${sceneLabel}</span>
+              <span class="ct-badge ct-badge-type">${t.file_type.toUpperCase()}</span>
+              ${t.use_count > 0 ? `<span class="landing-template-uses">${t.use_count} 次使用</span>` : ''}
+            </div>
+          </div>
+        </div>`;
+    }).join('');
+
+    const landingThumbObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+        const card = entry.target;
+        landingThumbObserver.unobserve(card);
+        loadLandingThumb(card);
+      });
+    }, { rootMargin: '200px' });
+
+    grid.querySelectorAll('.landing-template-card').forEach(card => {
+      card.addEventListener('click', () => openTemplatePreview(parseInt(card.dataset.id)));
+      landingThumbObserver.observe(card);
+    });
+  }
+
+  async function loadLandingThumb(card) {
+    const id = parseInt(card.dataset.id);
+    const loadingEl = card.querySelector('.ct-card-thumb-loading');
+    const placeholder = card.querySelector('.landing-template-thumb-placeholder');
+    const iframe = card.querySelector('.ct-thumb-iframe');
+    if (!iframe) return;
+    try {
+      const data = await api(`/api/content-templates/public/${id}/preview`);
+      if (data.file_type === 'markdown') {
+        iframe.srcdoc = `<pre style="padding:24px;font-size:14px;white-space:pre-wrap;word-break:break-word;margin:0">${escapeHtml(data.content)}</pre>`;
+      } else {
+        iframe.srcdoc = data.content;
+      }
+      iframe.onload = () => {
+        if (loadingEl) loadingEl.remove();
+        if (placeholder) placeholder.style.display = 'none';
+      };
+    } catch {
+      if (loadingEl) loadingEl.remove();
+    }
+  }
+
+  // 模板预览弹窗
+  const previewModal = el.querySelector('#template-preview-modal');
+  const previewTitle = el.querySelector('#template-preview-title');
+  const previewMeta = el.querySelector('#template-preview-meta');
+  const previewIframe = el.querySelector('#template-preview-iframe');
+
+  el.querySelector('#template-preview-close').addEventListener('click', () => { previewModal.hidden = true; });
+  previewModal.addEventListener('click', (e) => { if (e.target === previewModal) previewModal.hidden = true; });
+
+  async function openTemplatePreview(id) {
+    previewTitle.textContent = '加载中…';
+    previewMeta.innerHTML = '';
+    previewIframe.srcdoc = '';
+    previewModal.hidden = false;
+    try {
+      const data = await api(`/api/content-templates/public/${id}/preview`);
+      previewTitle.textContent = data.title;
+      previewMeta.innerHTML = `<span class="ct-badge ct-badge-type">${(data.file_type || 'html').toUpperCase()}</span>`;
+      if (data.file_type === 'markdown') {
+        previewIframe.srcdoc = `<pre style="padding:24px;font-size:14px;white-space:pre-wrap;">${escapeHtml(data.content)}</pre>`;
+      } else {
+        previewIframe.srcdoc = data.content;
+      }
+    } catch {
+      previewTitle.textContent = '加载失败';
+    }
+  }
+
+  // 初始加载模板（仅在模板展示区块存在时）
+  if (grid && emptyEl) loadTemplates();
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+export { renderLanding };

package/public/js/pages/login.js

@@ -0,0 +1,175 @@
+// 登录/注册页：全屏认证页面，tab 切换登录和注册
+
+import { api } from '../api.js';
+import { toast } from '../components/toast.js';
+import { state, navigate } from '../app.js';
+
+function renderLogin(container, openTab) {
+  if (state.currentUser) { navigate('/'); return; }
+  const tmpl = document.getElementById('login-template');
+  container.innerHTML = '';
+  container.appendChild(tmpl.content.cloneNode(true));
+
+  // 检查注册是否开放，动态隐藏注册 tab 和表单
+  const registerTab = container.querySelector('.auth-tab[data-tab="register"]');
+  const registerForm = container.querySelector('#register-form');
+
+  api('/api/auth/registration-status').then(data => {
+    if (!data.enabled && registerTab) registerTab.hidden = true;
+  }).catch(() => {});
+
+  const tabs = container.querySelectorAll('.auth-tab');
+  const loginForm = container.querySelector('#login-form');
+
+  function switchTab(tab) {
+    tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+    loginForm.classList.toggle('active', tab === 'login');
+    registerForm.classList.toggle('active', tab === 'register');
+  }
+
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      switchTab(tab.dataset.tab);
+      location.hash = '/' + tab.dataset.tab;
+    });
+  });
+
+  const initialTab = openTab || (location.hash === '#/register' ? 'register' : 'login');
+  switchTab(initialTab);
+
+  // 登录 — 统一入口，自动识别用户名或邮箱
+  const loginError = container.querySelector('#login-error');
+  const loginSubmit = container.querySelector('#login-submit');
+  loginForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const account = container.querySelector('#login-username').value.trim();
+    const password = container.querySelector('#login-password').value;
+    if (!account || !password) return;
+    loginError.hidden = true;
+    loginSubmit.disabled = true;
+    const origText = loginSubmit.textContent;
+    loginSubmit.textContent = '登录中…';
+    try {
+      const data = await api('/api/auth/login', {
+        method: 'POST',
+        body: { account, password }
+      });
+      state.currentUser = data;
+      toast('登录成功');
+      navigate('/');
+    } catch (e) {
+      loginError.textContent = e.message || '登录失败';
+      loginError.hidden = false;
+    } finally {
+      loginSubmit.disabled = false;
+      loginSubmit.textContent = origText;
+    }
+  });
+
+  // 注册 — 邮箱必填，验证码校验
+  const registerError = container.querySelector('#register-error');
+  const registerSubmit = container.querySelector('#register-submit');
+  const emailInput = container.querySelector('#register-email');
+  const usernameInput = container.querySelector('#register-username');
+  const usernameHint = container.querySelector('#register-username-hint');
+  const codeInput = container.querySelector('#register-code');
+  const sendCodeBtn = container.querySelector('#btn-send-code');
+  const codeTip = container.querySelector('#register-code-tip');
+  let codeTimer = null;
+  let tipTimer = null;
+
+  // 用户名实时校验
+  usernameInput.addEventListener('input', () => {
+    const val = usernameInput.value.trim();
+    if (!val) { usernameHint.hidden = true; usernameHint.textContent = ''; return; }
+    if (/[^a-zA-Z0-9_]/.test(val)) {
+      usernameHint.textContent = '用户名只能包含字母、数字和下划线';
+      usernameHint.hidden = false;
+    } else if (val.length < 2) {
+      usernameHint.textContent = '用户名至少 2 个字符';
+      usernameHint.hidden = false;
+    } else {
+      usernameHint.hidden = true;
+      usernameHint.textContent = '';
+    }
+  });
+
+  // 发送验证码
+  sendCodeBtn.addEventListener('click', async () => {
+    const email = emailInput.value.trim();
+    if (!email) { registerError.textContent = '请先填写邮箱'; registerError.hidden = false; return; }
+    registerError.hidden = true;
+    sendCodeBtn.disabled = true;
+    try {
+      await api('/api/auth/send-register-code', { method: 'POST', body: { email } });
+      toast('验证码已发送');
+      let remain = 60;
+      sendCodeBtn.textContent = remain + 's';
+      codeTimer = setInterval(() => {
+        remain--;
+        if (remain <= 0) {
+          clearInterval(codeTimer);
+          clearInterval(tipTimer);
+          sendCodeBtn.disabled = false;
+          sendCodeBtn.textContent = '发送验证码';
+          codeTip.hidden = true;
+        } else {
+          sendCodeBtn.textContent = remain + 's';
+        }
+      }, 1000);
+      // 剩余 30s 时开始轮转提示
+      setTimeout(() => {
+        if (remain <= 0) return;
+        const tips = ['还没收到？检查一下垃圾邮件', '邮件可能在垃圾箱里，去看看吧', '仍未收到？稍等片刻再查看'];
+        let tipIdx = 0;
+        function showTip() {
+          codeTip.textContent = tips[tipIdx % tips.length];
+          codeTip.hidden = false;
+          tipIdx++;
+        }
+        showTip();
+        tipTimer = setInterval(showTip, 5000);
+      }, 30000);
+    } catch (e) {
+      registerError.textContent = e.message || '发送失败';
+      registerError.hidden = false;
+      sendCodeBtn.disabled = false;
+    }
+  });
+
+  registerForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = emailInput.value.trim();
+    const code = codeInput.value.trim();
+    const username = usernameInput.value.trim();
+    const password = container.querySelector('#register-password').value;
+    const confirmPassword = container.querySelector('#register-confirm').value;
+    if (!email) { registerError.textContent = '请填写邮箱'; registerError.hidden = false; return; }
+    if (!code) { registerError.textContent = '请填写验证码'; registerError.hidden = false; return; }
+    if (username && !/^[a-zA-Z0-9_]{2,30}$/.test(username)) { registerError.textContent = '用户名只能包含字母、数字和下划线，2-30 位'; registerError.hidden = false; return; }
+    if (!password || !confirmPassword) return;
+    registerError.hidden = true;
+    registerSubmit.disabled = true;
+    const origText = registerSubmit.textContent;
+    registerSubmit.textContent = '注册中…';
+    try {
+      const body = { email, code, password, confirmPassword };
+      if (username) body.username = username;
+      const data = await api('/api/auth/register', {
+        method: 'POST',
+        body
+      });
+      state.currentUser = data;
+      toast('注册成功');
+      navigate('/');
+    } catch (e) {
+      registerError.textContent = e.message || '注册失败';
+      registerError.hidden = false;
+    } finally {
+      registerSubmit.disabled = false;
+      registerSubmit.textContent = origText;
+    }
+  });
+}
+
+export { renderLogin };