@zhang_libo/resource-hub 1.0.2

package/public/layout/Sidebar.jsx

@@ -0,0 +1,175 @@
+// Sidebar.jsx
+function Sidebar({ isCompact = false }) {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  const [showAllTags, setShowAllTags] = React.useState(false);
+  const { Heart, Clock, FileText } = lucide;
+
+  if (!state) return null;
+  const { categories, tags, selectedCategory, selectedTags, quickAccessFilter, currentUser } = state;
+  const displayedTags = showAllTags ? tags : tags.slice(0, 20);
+
+  const navItemStyle = (isSelected) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: '36px',
+    borderRadius: '8px',
+    padding: '8px 12px',
+    margin: isCompact ? 0 : '2px 8px',
+    cursor: 'pointer',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: '14px',
+    background: isSelected ? 'rgba(0,113,227,0.10)' : 'none',
+    color: isSelected ? 'var(--brand)' : 'var(--text-primary)',
+    fontWeight: isSelected ? 600 : 400,
+    transition: 'background 150ms',
+  });
+
+  const sectionTitleStyle = {
+    fontSize: '11px',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    color: 'var(--text-secondary)',
+    letterSpacing: '0.05em',
+    padding: isCompact ? '12px 12px 8px' : '16px 12px 8px',
+  };
+
+  const quickItems = [
+    { key: 'favorites', label: '我的收藏', Icon: Heart },
+    { key: 'history', label: '最近访问', Icon: Clock },
+    { key: 'mine', label: '我创建的', Icon: FileText },
+  ];
+
+  const totalCount = (categories || []).reduce((sum, category) => sum + (category.resourceCount || 0), 0);
+  const allCategory = { id: null, name: '全部', color: null, resourceCount: totalCount };
+  const categoryList = [allCategory, ...(categories || [])];
+  const listLayoutStyle = {
+    display: 'grid',
+    gridTemplateColumns: isCompact ? 'repeat(auto-fit, minmax(140px, 1fr))' : '1fr',
+    gap: isCompact ? '6px' : 0,
+    padding: isCompact ? '0 8px 8px' : 0,
+  };
+
+  return (
+    <div style={{
+      width: isCompact ? '100%' : '220px',
+      flexShrink: 0,
+      background: 'var(--bg-secondary)',
+      borderRight: isCompact ? 'none' : '1px solid var(--border)',
+      borderBottom: isCompact ? '1px solid var(--border)' : 'none',
+      position: isCompact ? 'static' : 'sticky',
+      top: isCompact ? 'auto' : '72px',
+      height: isCompact ? 'auto' : 'calc(100vh - 72px)',
+      overflowY: 'auto',
+    }}>
+      <div style={sectionTitleStyle}>类别</div>
+      <div style={listLayoutStyle}>
+        {categoryList.map((cat) => {
+          const isSelected = selectedCategory === cat.id && !quickAccessFilter;
+          return (
+            <button
+              key={cat.id || 'all'}
+              style={navItemStyle(isSelected)}
+              onClick={() => dispatch({ type: 'SET_CATEGORY', category: cat.id })}
+              onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-tertiary)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = isSelected ? 'rgba(0,113,227,0.10)' : 'none'; }}
+            >
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {cat.name}
+              </span>
+              {cat.resourceCount !== undefined && (
+                <span style={{
+                  fontSize: '11px',
+                  background: 'var(--bg-tertiary)',
+                  borderRadius: '10px',
+                  padding: '1px 6px',
+                  flexShrink: 0,
+                  marginLeft: '4px',
+                  color: 'var(--text-secondary)',
+                }}>
+                  {cat.resourceCount > 99 ? '99+' : cat.resourceCount}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <div style={{ height: '1px', background: 'var(--border)', margin: '8px 0' }} />
+
+      <div style={sectionTitleStyle}>标签</div>
+      <div style={{ padding: '0 8px 12px', display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+        {displayedTags.map((tag) => {
+          const isTagSelected = (selectedTags || []).includes(tag);
+          return (
+            <button
+              key={tag}
+              onClick={() => dispatch({ type: 'TOGGLE_TAG', tag })}
+              style={{
+                fontSize: '12px',
+                borderRadius: '4px',
+                padding: '4px 8px',
+                border: 'none',
+                cursor: 'pointer',
+                background: isTagSelected ? 'rgba(0,113,227,0.10)' : 'var(--bg-tertiary)',
+                color: isTagSelected ? 'var(--brand)' : 'var(--text-secondary)',
+                transition: 'background 150ms',
+              }}
+              onMouseEnter={(e) => { if (!isTagSelected) e.currentTarget.style.background = 'var(--bg-primary)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = isTagSelected ? 'rgba(0,113,227,0.10)' : 'var(--bg-tertiary)'; }}
+            >
+              {tag}
+            </button>
+          );
+        })}
+
+        {(tags || []).length > 20 && (
+          <button
+            onClick={() => setShowAllTags((value) => !value)}
+            style={{
+              fontSize: '12px',
+              color: 'var(--brand)',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px 6px',
+            }}
+          >
+            {showAllTags ? '收起' : `展开更多 (${tags.length - 20})`}
+          </button>
+        )}
+      </div>
+
+      {currentUser && (
+        <>
+          <div style={{ height: '1px', background: 'var(--border)', margin: '8px 0' }} />
+          <div style={sectionTitleStyle}>快速访问</div>
+          <div style={listLayoutStyle}>
+            {quickItems.map(({ key, label, Icon }) => {
+              const isSelected = quickAccessFilter === key;
+              return (
+                <button
+                  key={key}
+                  style={navItemStyle(isSelected)}
+                  onClick={() => dispatch({ type: 'SET_QUICK_ACCESS_FILTER', filter: isSelected ? null : key })}
+                  onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-tertiary)'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = isSelected ? 'rgba(0,113,227,0.10)' : 'none'; }}
+                >
+                  <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <Icon size={14} style={{ color: isSelected ? 'var(--brand)' : 'var(--text-secondary)' }} />
+                    {label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+window.Sidebar = Sidebar;

package/public/pages/AdminPage.jsx

@@ -0,0 +1,30 @@
+const ADMIN_TABS = ['categories', 'tags', 'users', 'config', 'email'];
+
+function AdminPage() {
+  const { route, navigate } = window.useRouter();
+  const path = route.path || '';
+  const subpath = path.replace(/^\/admin\/?/, '') || 'categories';
+  const activeTab = ADMIN_TABS.includes(subpath) ? subpath : 'categories';
+
+  React.useEffect(() => {
+    if (!ADMIN_TABS.includes(subpath)) {
+      navigate('#/admin/categories');
+    }
+  }, [subpath, navigate]);
+
+  const tabContent = {
+    categories: React.createElement(window.AdminCategories, null),
+    tags: React.createElement(window.AdminTags, null),
+    users: React.createElement(window.AdminUsers, null),
+    config: React.createElement(window.AdminConfig, null),
+    email: React.createElement(window.AdminEmail, null),
+  };
+
+  return (
+    <window.AdminLayout activeTab={activeTab}>
+      {tabContent[activeTab] || null}
+    </window.AdminLayout>
+  );
+}
+
+window.AdminPage = AdminPage;

package/public/pages/ForgotPasswordPage.jsx

@@ -0,0 +1,93 @@
+function ForgotPasswordPage() {
+  const dispatch = window.useAppDispatch();
+  const { navigate } = window.useRouter();
+  const { request } = window.useApi();
+  const { Loader, ArrowLeft } = lucide;
+
+  const [email, setEmail] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [emailError, setEmailError] = React.useState('');
+
+  const validate = () => {
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return '请输入有效的邮箱地址';
+    return '';
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const err = validate();
+    if (err) { setEmailError(err); return; }
+    setLoading(true);
+    try {
+      window.sessionStorage?.setItem('rh_reset_identifier', email.trim());
+      const { data } = await request('/api/auth/forgot-password', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+      });
+      dispatch({ type: 'ADD_TOAST', toastType: 'info', message: '若该邮箱已注册，重置链接已发送，请查收' });
+      if (data.emailPreview) dispatch({ type: 'SET_EMAIL_PREVIEW', emailPreview: data.emailPreview });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <window.AuthLayout>
+      <div style={{ width: '400px', maxWidth: '100%' }}>
+        <div style={{
+          background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))', border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+          borderRadius: '24px', padding: '36px', boxShadow: 'var(--shadow-modal)',
+        }}>
+          <div style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: '10px' }}>
+            账号恢复
+          </div>
+          <h1 style={{ fontSize: '20px', fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>忘记密码</h1>
+          <p style={{ fontSize: '14px', color: 'var(--text-secondary)', margin: '0 0 24px', lineHeight: '1.5' }}>
+            输入注册邮箱，系统将发送密码重置链接
+          </p>
+          <form onSubmit={handleSubmit} noValidate>
+            <div style={{ marginBottom: '16px' }}>
+              <label style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' }}>邮箱</label>
+              <input
+                className="rh-auth-input"
+                type="email" value={email} placeholder="your@example.com"
+                name="email"
+                autoComplete="email"
+                onChange={(e) => { setEmail(e.target.value); setEmailError(''); }}
+                onBlur={() => setEmailError(validate())}
+                disabled={loading}
+                style={{
+                  width: '100%', padding: '9px 12px',
+                  border: `1px solid ${emailError ? 'var(--danger)' : 'var(--border)'}`,
+                  borderRadius: '8px', background: 'var(--bg-secondary)',
+                  color: 'var(--text-primary)', fontSize: '14px',
+                  outline: 'none', boxSizing: 'border-box',
+                }}
+              />
+              {emailError && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{emailError}</div>}
+            </div>
+            <button type="submit" disabled={loading} style={{
+              width: '100%', padding: '10px',
+              background: 'var(--brand)', color: '#fff', border: 'none',
+              borderRadius: '8px', cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '14px', fontWeight: 600, marginBottom: '16px',
+              opacity: loading ? 0.8 : 1,
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
+            }}>
+              {loading && <Loader size={15} />}
+              发送重置链接
+            </button>
+            <div style={{ textAlign: 'center' }}>
+              <button type="button" onClick={() => navigate('#/login')}
+                style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', fontSize: '13px', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                <ArrowLeft size={13} /> 返回登录
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </window.AuthLayout>
+  );
+}
+
+window.ForgotPasswordPage = ForgotPasswordPage;