@zhang_libo/resource-hub 1.0.2

package/public/components/ConfirmDialog.jsx

@@ -0,0 +1,78 @@
+// ConfirmDialog.jsx
+function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText = '确认删除', loading = false }) {
+  const { AlertTriangle, Loader } = lucide;
+  if (!isOpen) return null;
+
+  return React.createElement('div', {
+    style: {
+      position: 'fixed', inset: 0,
+      background: 'rgba(19,34,56,0.28)',
+      zIndex: 1001,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '16px',
+    }
+  },
+    React.createElement('div', {
+      style: {
+        width: '400px', maxWidth: '100%',
+        background: 'var(--surface-elevated)',
+        border: '1px solid var(--border)',
+        borderRadius: '16px',
+        boxShadow: 'var(--shadow-modal)',
+        padding: '24px',
+      }
+    },
+      React.createElement('div', { style: { display: 'flex', gap: '12px', marginBottom: '16px' } },
+        React.createElement('div', {
+          style: {
+            width: '40px', height: '40px', borderRadius: '50%',
+            background: 'color-mix(in srgb, var(--danger) 10%, var(--surface-elevated))',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+          }
+        }, React.createElement(AlertTriangle, { size: 20, style: { color: 'var(--danger)' } })),
+        React.createElement('div', null,
+          React.createElement('h3', {
+            style: { fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)', margin: '0 0 4px' }
+          }, title),
+          React.createElement('p', {
+            style: { fontSize: '14px', color: 'var(--text-secondary)', margin: 0, lineHeight: '1.5' }
+          }, message)
+        )
+      ),
+      React.createElement('div', { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' } },
+        React.createElement('button', {
+          onClick: onClose,
+          disabled: loading,
+          style: {
+            padding: '8px 16px', border: '1px solid var(--border)',
+            background: 'var(--surface-elevated)', color: 'var(--text-primary)',
+            borderRadius: '10px', cursor: 'pointer', fontSize: '14px',
+            boxShadow: 'var(--shadow-control)',
+          }
+        }, '取消'),
+        React.createElement('button', {
+          onClick: onConfirm,
+          disabled: loading,
+          style: {
+            padding: '8px 16px', border: 'none',
+            background: 'var(--danger)', color: '#fff',
+            borderRadius: '10px', cursor: loading ? 'not-allowed' : 'pointer',
+            fontSize: '14px', display: 'flex', alignItems: 'center', gap: '6px',
+            opacity: loading ? 0.7 : 1,
+            boxShadow: '0 10px 20px color-mix(in srgb, var(--danger) 16%, transparent)',
+          }
+        },
+          loading && React.createElement(Loader, {
+            size: 14,
+            style: { animation: 'spin 1s linear infinite' },
+          }),
+          confirmText
+        )
+      )
+    )
+  );
+}
+
+window.ConfirmDialog = ConfirmDialog;

package/public/components/DropdownSelect.jsx

@@ -0,0 +1,281 @@
+function DropdownSelect({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  placeholder = '请选择',
+  ariaLabel = '下拉选择',
+  variant = 'field',
+  align = 'left',
+  width = null,
+  minWidth = null,
+  maxWidth = null,
+  triggerProps = {},
+  menuProps = {},
+  renderValue = null,
+}) {
+  const { ChevronDown, Check } = lucide;
+  const [open, setOpen] = React.useState(false);
+  const [highlighted, setHighlighted] = React.useState(value);
+  const containerRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const optionRefs = React.useRef({});
+
+  const normalizedOptions = Array.isArray(options) ? options : [];
+  const selectedOption = normalizedOptions.find((option) => option.value === value) || null;
+
+  React.useEffect(() => {
+    setHighlighted(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (!open || disabled) return undefined;
+
+    const currentIndex = () => {
+      const index = normalizedOptions.findIndex((option) => option.value === highlighted);
+      return index >= 0 ? index : Math.max(normalizedOptions.findIndex((option) => option.value === value), 0);
+    };
+
+    const moveHighlight = (direction) => {
+      if (normalizedOptions.length === 0) return;
+      const nextIndex = (currentIndex() + direction + normalizedOptions.length) % normalizedOptions.length;
+      setHighlighted(normalizedOptions[nextIndex].value);
+    };
+
+    const handleMouseDown = (event) => {
+      if (containerRef.current?.contains(event.target)) return;
+      setOpen(false);
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+        return;
+      }
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        moveHighlight(1);
+        return;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        moveHighlight(-1);
+        return;
+      }
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        const nextOption = normalizedOptions.find((option) => option.value === highlighted);
+        if (nextOption) {
+          onChange(nextOption.value);
+          setOpen(false);
+          triggerRef.current?.focus();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    const frame = window.requestAnimationFrame(() => {
+      const targetValue = highlighted ?? value ?? normalizedOptions[0]?.value;
+      optionRefs.current[targetValue]?.focus();
+    });
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.cancelAnimationFrame(frame);
+    };
+  }, [disabled, highlighted, normalizedOptions, onChange, open, value]);
+
+  const triggerLabel = renderValue
+    ? renderValue(selectedOption)
+    : (selectedOption ? selectedOption.label : placeholder);
+  const { style: triggerStyleOverride, ...triggerPropsRest } = triggerProps || {};
+  const { style: menuStyleOverride, ...menuPropsRest } = menuProps || {};
+
+  const triggerBaseStyle = variant === 'pill'
+    ? {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '8px',
+        minHeight: '36px',
+        padding: '0 14px',
+        borderRadius: '999px',
+        border: open
+          ? '1px solid var(--brand)'
+          : '1px solid var(--control-border)',
+        background: open
+          ? 'color-mix(in srgb, var(--brand-soft) 82%, var(--control-bg))'
+          : 'color-mix(in srgb, var(--control-bg) 94%, var(--control-bg-muted))',
+        color: open ? 'var(--brand-strong)' : 'var(--text-primary)',
+        fontSize: '13px',
+        fontWeight: open ? 700 : 600,
+        boxShadow: open
+          ? '0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-control-hover)'
+          : 'var(--shadow-control)',
+      }
+    : {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '10px',
+        minHeight: '40px',
+        width: width || '100%',
+        padding: '0 12px',
+        borderRadius: '12px',
+        border: open
+          ? '1px solid var(--brand)'
+          : '1px solid var(--control-border)',
+        background: 'color-mix(in srgb, var(--surface-elevated) 96%, var(--control-bg-muted))',
+        color: 'var(--text-primary)',
+        fontSize: '14px',
+        fontWeight: 500,
+        boxShadow: open
+          ? '0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-control-hover)'
+          : 'var(--shadow-control)',
+      };
+
+  const menuWidth = width || (variant === 'field' ? '100%' : minWidth || '168px');
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        display: width || variant === 'field' ? 'block' : 'inline-flex',
+        width: width || null,
+        minWidth,
+        maxWidth,
+      }}
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={!disabled && open}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={() => {
+          if (disabled) return;
+          setOpen((current) => !current);
+        }}
+        onKeyDown={(event) => {
+          if (disabled) return;
+          if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setHighlighted(value ?? normalizedOptions[0]?.value);
+            setOpen(true);
+          }
+        }}
+        style={{
+          ...triggerBaseStyle,
+          width: triggerBaseStyle.width || width || null,
+          opacity: disabled ? 0.65 : 1,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          transition: 'border-color 150ms, background 150ms, color 150ms, box-shadow 150ms',
+          outline: 'none',
+          appearance: 'none',
+          WebkitAppearance: 'none',
+          ...(triggerStyleOverride || {}),
+        }}
+        {...triggerPropsRest}
+      >
+        <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
+          {triggerLabel}
+        </span>
+        <ChevronDown
+          size={14}
+          style={{
+            color: disabled ? 'var(--text-secondary)' : open ? 'var(--brand-strong)' : 'var(--text-secondary)',
+            transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 150ms, color 150ms',
+            flexShrink: 0,
+          }}
+        />
+      </button>
+
+      {!disabled && open && (
+        <div
+          role="listbox"
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 8px)',
+            left: align === 'left' ? 0 : 'auto',
+            right: align === 'right' ? 0 : 'auto',
+            width: menuWidth,
+            minWidth,
+            maxWidth,
+            padding: '6px',
+            borderRadius: '16px',
+            border: '1px solid var(--control-border)',
+            background: 'color-mix(in srgb, var(--surface-elevated) 96%, var(--control-bg-muted))',
+            boxShadow: 'var(--shadow-dropdown)',
+            display: 'grid',
+            gap: '4px',
+            zIndex: 120,
+            backdropFilter: 'blur(18px)',
+            ...(menuStyleOverride || {}),
+          }}
+          {...menuPropsRest}
+        >
+          {normalizedOptions.map((option) => {
+            const active = option.value === value;
+            const isHighlighted = option.value === highlighted;
+            return (
+              <button
+                key={option.value}
+                ref={(node) => {
+                  if (node) optionRefs.current[option.value] = node;
+                  else delete optionRefs.current[option.value];
+                }}
+                type="button"
+                role="option"
+                aria-selected={active}
+                tabIndex={active ? 0 : -1}
+                onMouseEnter={() => setHighlighted(option.value)}
+                onFocus={() => setHighlighted(option.value)}
+                onClick={() => {
+                  onChange(option.value);
+                  setOpen(false);
+                  triggerRef.current?.focus();
+                }}
+                {...(option.buttonProps || {})}
+                style={{
+                  minHeight: '38px',
+                  padding: '8px 12px',
+                  borderRadius: '12px',
+                  border: 'none',
+                  background: active
+                    ? 'color-mix(in srgb, var(--brand-soft) 84%, var(--control-bg))'
+                    : isHighlighted
+                      ? 'color-mix(in srgb, var(--surface-tint) 68%, var(--control-bg))'
+                      : 'transparent',
+                  color: active ? 'var(--brand-strong)' : 'var(--text-primary)',
+                  cursor: 'pointer',
+                  fontSize: variant === 'pill' ? '13px' : '14px',
+                  fontWeight: active ? 700 : isHighlighted ? 600 : 500,
+                  textAlign: 'left',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '12px',
+                  transition: 'background 150ms, color 150ms',
+                  appearance: 'none',
+                  ...(option.buttonProps?.style || {}),
+                }}
+              >
+                <span>{option.label}</span>
+                {active && <Check size={14} />}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+window.DropdownSelect = DropdownSelect;

package/public/components/EmailPreviewModal.jsx

@@ -0,0 +1,104 @@
+// EmailPreviewModal.jsx
+function EmailPreviewModal() {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  const { Mail } = lucide;
+
+  if (!state || !state.emailPreview) return null;
+  const { emailPreview } = state;
+
+  const close = () => dispatch({ type: 'SET_EMAIL_PREVIEW', emailPreview: null });
+
+  return React.createElement('div', {
+    style: {
+      position: 'fixed', inset: 0,
+      background: 'rgba(0,0,0,0.5)',
+      zIndex: 1002,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '16px',
+    }
+  },
+    React.createElement('div', {
+      style: {
+        width: '520px', maxWidth: '100%',
+        maxHeight: '90vh',
+        background: 'var(--bg-primary)',
+        border: '1px solid var(--border)',
+        borderRadius: '12px',
+        boxShadow: 'var(--shadow-modal)',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+      }
+    },
+      React.createElement('div', {
+        style: {
+          padding: '20px 24px 16px',
+          borderBottom: '1px solid var(--border)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+        }
+      },
+        React.createElement('div', {
+          style: {
+            width: '32px', height: '32px', borderRadius: '8px',
+            background: 'rgba(47,129,247,0.1)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }
+        }, React.createElement(Mail, { size: 16, style: { color: 'var(--brand)' } })),
+        React.createElement('h2', {
+          style: { fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', margin: 0 }
+        }, '模拟邮件（开发预览）')
+      ),
+      React.createElement('div', { style: { padding: '20px 24px', overflowY: 'auto', flex: 1 } },
+        React.createElement('div', { style: { marginBottom: '12px' } },
+          React.createElement('span', { style: { fontSize: '12px', color: 'var(--text-secondary)', fontWeight: 500 } }, '收件人：'),
+          React.createElement('span', { style: { fontSize: '14px', color: 'var(--text-primary)' } }, emailPreview.to)
+        ),
+        React.createElement('div', { style: { marginBottom: '12px' } },
+          React.createElement('span', { style: { fontSize: '12px', color: 'var(--text-secondary)', fontWeight: 500 } }, '主题：'),
+          React.createElement('span', { style: { fontSize: '14px', color: 'var(--text-primary)' } }, emailPreview.subject)
+        ),
+        React.createElement('div', null,
+          React.createElement('div', { style: { fontSize: '12px', color: 'var(--text-secondary)', fontWeight: 500, marginBottom: '8px' } }, '正文：'),
+          React.createElement('pre', {
+            style: {
+              background: 'var(--bg-secondary)',
+              border: '1px solid var(--border)',
+              borderRadius: '8px',
+              padding: '12px 16px',
+              fontSize: '13px',
+              color: 'var(--text-primary)',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              fontFamily: 'monospace',
+              margin: 0,
+            }
+          }, emailPreview.body)
+        )
+      ),
+      React.createElement('div', {
+        style: { padding: '16px 24px', borderTop: '1px solid var(--border)' }
+      },
+        React.createElement('button', {
+          onClick: close,
+          style: {
+            width: '100%', padding: '8px 16px',
+            border: '1px solid var(--border)',
+            background: 'var(--bg-secondary)',
+            color: 'var(--text-primary)',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: 500,
+          }
+        }, '关闭')
+      )
+    )
+  );
+}
+
+window.EmailPreviewModal = EmailPreviewModal;

package/public/components/EmptyState.jsx

@@ -0,0 +1,50 @@
+// EmptyState.jsx
+function EmptyState({ icon, title, description, action }) {
+  const IconComponent = typeof icon === 'string' ? lucide[icon] : null;
+
+  return React.createElement('div', {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '60px 24px',
+      textAlign: 'center',
+    }
+  },
+    React.createElement('div', {
+      style: {
+        width: '64px', height: '64px',
+        borderRadius: '16px',
+        background: 'var(--bg-tertiary)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        marginBottom: '16px',
+      }
+    },
+      typeof icon === 'string' && IconComponent
+        ? React.createElement(IconComponent, { size: 28, style: { color: 'var(--text-secondary)' } })
+        : icon
+    ),
+    React.createElement('h3', {
+      style: { fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)', margin: '0 0 8px' }
+    }, title),
+    description && React.createElement('p', {
+      style: { fontSize: '14px', color: 'var(--text-secondary)', margin: '0 0 16px', maxWidth: '280px', lineHeight: '1.5' }
+    }, description),
+    action && React.createElement('button', {
+      onClick: action.onClick,
+      style: {
+        padding: '8px 20px',
+        background: 'var(--brand)',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: 500,
+      }
+    }, action.label)
+  );
+}
+
+window.EmptyState = EmptyState;

package/public/components/Modal.jsx

@@ -0,0 +1,127 @@
+// Modal.jsx
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = '520px',
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  fullScreen = false,
+}) {
+  const { useEffect } = React;
+  const { X } = lucide;
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const modalLockCount = window.__rhModalLockCount || 0;
+    if (modalLockCount === 0) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      window.__rhModalBodyLockState = {
+        overflow: document.body.style.overflow,
+        paddingRight: document.body.style.paddingRight,
+      };
+      document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+        // 固定定位的 header 相对视口，不受 body padding 影响；滚动条消失后视口变宽会导致个人菜单右移，需同步补偿
+        const headerShell = document.querySelector('[data-rh-layout-header-shell]');
+        if (headerShell) {
+          window.__rhModalBodyLockState.headerPaddingRight = headerShell.style.paddingRight;
+          headerShell.style.paddingRight = `${scrollbarWidth}px`;
+        }
+      }
+    }
+    window.__rhModalLockCount = modalLockCount + 1;
+
+    const handler = (e) => {
+      if (e.key === 'Escape' && closeOnEscape) {
+        if (document.querySelector('[role="listbox"]')) return;
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handler);
+
+    return () => {
+      document.removeEventListener('keydown', handler);
+
+      const nextLockCount = Math.max((window.__rhModalLockCount || 1) - 1, 0);
+      window.__rhModalLockCount = nextLockCount;
+      if (nextLockCount === 0) {
+        const previousState = window.__rhModalBodyLockState || {};
+        document.body.style.overflow = previousState.overflow || '';
+        document.body.style.paddingRight = previousState.paddingRight || '';
+        const headerShell = document.querySelector('[data-rh-layout-header-shell]');
+        if (headerShell && previousState.headerPaddingRight !== undefined) {
+          headerShell.style.paddingRight = previousState.headerPaddingRight || '';
+        }
+        delete window.__rhModalBodyLockState;
+      }
+    };
+  }, [closeOnEscape, isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return React.createElement('div', {
+    style: {
+      position: 'fixed',
+      inset: 0,
+      background: 'rgba(19,34,56,0.28)',
+      zIndex: 1000,
+      display: 'flex',
+      alignItems: fullScreen ? 'stretch' : 'center',
+      justifyContent: fullScreen ? 'stretch' : 'center',
+      padding: fullScreen ? 0 : '16px',
+    },
+    onClick: (e) => {
+      if (!closeOnBackdrop) return;
+      if (e.target === e.currentTarget) onClose();
+    }
+  },
+    React.createElement('div', {
+      style: {
+        width: fullScreen ? '100%' : width,
+        maxWidth: '100%',
+        maxHeight: fullScreen ? '100vh' : '90vh',
+        background: 'var(--surface-elevated)',
+        border: '1px solid var(--border)',
+        borderRadius: fullScreen ? 0 : '16px',
+        boxShadow: 'var(--shadow-modal)',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      },
+    },
+      // Header
+      React.createElement('div', {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '18px 22px 14px',
+          borderBottom: '1px solid var(--border)',
+          flexShrink: 0,
+        }
+      },
+        React.createElement('h2', {
+          style: { fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', margin: 0 }
+        }, title),
+        React.createElement('button', {
+          onClick: onClose,
+          style: {
+            background: 'var(--surface-muted)', border: '1px solid color-mix(in srgb, var(--control-border) 72%, transparent)', cursor: 'pointer',
+            color: 'var(--text-secondary)', padding: '4px',
+            borderRadius: '10px', display: 'flex', alignItems: 'center',
+          }
+        }, React.createElement(X, { size: 18 }))
+      ),
+      // Content (scrollable)
+      React.createElement('div', {
+        style: { padding: '20px 22px 22px', overflowY: 'auto', flex: 1 }
+      }, children)
+    )
+  );
+}
+
+window.Modal = Modal;

package/public/components/PasswordStrength.jsx

@@ -0,0 +1,45 @@
+// PasswordStrength.jsx
+function PasswordStrength({ password }) {
+  if (!password) return null;
+
+  let strength = 0;
+  let label = '';
+  let color = '';
+
+  const hasLetters = /[a-zA-Z]/.test(password);
+  const hasDigits = /[0-9]/.test(password);
+  const hasSpecial = /[^a-zA-Z0-9]/.test(password);
+  const isLongEnough = password.length >= 8;
+
+  if (hasLetters && hasDigits && hasSpecial && isLongEnough) {
+    strength = 3; label = '强'; color = 'var(--success)';
+  } else if (hasLetters && hasDigits) {
+    strength = 2; label = '中'; color = '#FF9500';
+  } else {
+    strength = 1; label = '弱'; color = 'var(--danger)';
+  }
+
+  return React.createElement('div', {
+    style: { marginTop: '6px' }
+  },
+    React.createElement('div', {
+      style: { display: 'flex', gap: '4px', marginBottom: '4px' }
+    },
+      [1, 2, 3].map(i =>
+        React.createElement('div', {
+          key: i,
+          style: {
+            flex: 1, height: '3px', borderRadius: '2px',
+            background: i <= strength ? color : 'var(--bg-tertiary)',
+            transition: 'background 200ms',
+          }
+        })
+      )
+    ),
+    React.createElement('span', {
+      style: { fontSize: '12px', color }
+    }, `密码强度：${label}`)
+  );
+}
+
+window.PasswordStrength = PasswordStrength;