哈哈二维码｜批量二维码生成器

{
                                  updateQrCode(qr.id, { url: e.target.value });
                                  // 自动调整高度
                                  adjustTextareaHeight(e.target);
                                }}
                                onInput={(e) => {
                                  // 自动调整高度
                                  adjustTextareaHeight(e.target);
                                }}
                                onClick={(e) => e.stopPropagation()}
                                placeholder="输入网址或文本内容"
                                style={{ minHeight: '40px' }}
                              />
                            
                          
                        
                      
                    );
                  })
                )}

{/* 右侧预览面板 */}
            <div className="right-panel">
              <div className="header">
                <div className="header-content">
                  <h2 className="header-title">
                    二维码预览
                  
                  <div className="header-actions">
                    {viewMode === "all" && (
                      <button
                        className="btn btn-icon"
                        onClick={() => refreshQrCode()}
                        title="刷新所有二维码"
                      >
                        <i className="fas fa-sync-alt">
                      
                    )}

<button
                      className="btn btn-view-mode"
                      onClick={() =>
                        setViewMode(viewMode === "single" ? "all" : "single")
                      }
                      title={viewMode === "single" ? "多码预览" : "单码预览"}
                    >
                      {viewMode === "single" ? "多码预览" : "单码预览"}

<div className="preview-container">
                {qrCodes.length === 0 ? (
                  <div className="empty-state" style={{ height: '100%' }}>
                    <div className="empty-icon">
                      <i className="fas fa-qrcode">
                    
                    <h3 className="empty-title">暂无二维码配置
                    <p>
                      请在左侧面板点击"+"按钮开始创建
                    
                  
                ) : viewMode === "single" && selectedQrCode ? (
                  <div className="preview-single">
                    <div className="flex justify-center mb-6">
                      <canvas
                        id="main-qr-canvas"
                        width="350"
                        height="350"
                        className="qr-canvas"
                        onClick={() => openQrCodeModal(selectedQrCode)}
                        title="点击放大查看"
                      >
                    
                    <div className="text-center">
                      <div className="text-lg font-semibold mb-2 break-all" style={{ color: 'var(--neutral-800)' }}>
                        {selectedQrCode.name}
                      
                      <div className="qr-url mb-2">
                        {selectedQrCode.url}
                      
                      <div className="qr-time mb-6">
                        <i className="fas fa-clock">
                        <span>{formatTime(selectedQrCode.updatedAt)}更新
                      
                      <div className="flex gap-3 justify-center">
                        <button
                          className="btn btn-secondary"
                          onClick={() => refreshQrCode(selectedQrCode.id)}
                          style={{ padding: '12px 24px', borderRadius: '50px' }}
                        >
                          <i className="fas fa-sync-alt">
                        
                        <button
                          className="btn btn-info"
                          onClick={() => copyQrCode(selectedQrCode.id)}
                          style={{ padding: '12px 24px', borderRadius: '50px' }}
                        >
                          <i className="fas fa-copy">
                        
                        <button
                          className="btn btn-primary"
                          onClick={() => downloadQrCode(selectedQrCode.id)}
                          style={{ padding: '12px 24px', borderRadius: '50px' }}
                        >
                          <i className="fas fa-download">
                        
                      
                    
                  
                ) : (
                  <div className="preview-grid">
                    {qrCodes.map((qr) => (
                      <div
                        key={qr.id}
                        className={`preview-card ${selectedId === qr.id ? 'selected' : ''}`}
                        onClick={() => setSelectedId(qr.id)}
                      >
                        <div className="flex justify-center" style={{ marginBottom: '16px' }}>
                          <canvas
                            id={`qr-canvas-${qr.id}`}
                            width="250"
                            height="250"
                            className="qr-canvas"
                            onClick={(e) => {
                              e.stopPropagation();
                              openQrCodeModal(qr);
                            }}
                            title="点击放大查看"
                          >
                        
                        <div className="qr-name overflow-ellipsis-line-1">
                          {qr.name}
                        
                        <div className="qr-time" style={{ margin: '10px' }}>
                          <i className="fas fa-clock">
                          <span>{formatTime(qr.updatedAt)}
                        
                        <div className="qr-actions">
                          <button
                            className="btn btn-secondary btn-round"
                            onClick={(e) => {
                              e.stopPropagation();
                              refreshQrCode(qr.id);
                            }}
                            title="刷新二维码"
                          >
                            <i className="fas fa-sync-alt" style={{ fontSize: '12px' }}>
                          
                          <button
                            className="btn btn-info btn-round"
                            onClick={(e) => {
                              e.stopPropagation();
                              copyQrCode(qr.id);
                            }}
                            title="复制二维码"
                          >
                            <i className="fas fa-copy" style={{ fontSize: '12px' }}>
                          
                          <button
                            className="btn btn-primary btn-round"
                            onClick={(e) => {
                              e.stopPropagation();
                              downloadQrCode(qr.id);
                            }}
                            title="下载二维码"
                          >
                            <i className="fas fa-download" style={{ fontSize: '12px' }}>
                          
                        
                      
                    ))}
                  
                )}

{/* 二维码放大查看模态框 */}
            {enlargedQrCode && (
              <div
                className="modal"
                onClick={closeQrCodeModal}
              >
                <div
                  className="modal-content"
                  onClick={(e) => e.stopPropagation()}
                >
                  <div className="modal-header">
                    <h3 className="modal-title">
                      {enlargedQrCode.name}
                    
                    <button
                      className="modal-close"
                      onClick={closeQrCodeModal}
                    >
                      <i className="fas fa-times" style={{ fontSize: '18px' }}>

<div className="text-center mb-6">
                    <div className="url-display">
                      {enlargedQrCode.url}
                    
                    <div className="qr-time">
                      <i className="fas fa-clock">
                      <span>{formatTime(enlargedQrCode.updatedAt)}更新

<div className="flex gap-3 justify-center">
                    <button
                      className="btn btn-secondary"
                      onClick={() => refreshQrCode(enlargedQrCode.id)}
                      style={{ padding: '12px 24px' }}
                    >
                      <i className="fas fa-sync-alt"> 刷新二维码
                    
                    <button
                      className="btn btn-info"
                      onClick={() => copyQrCode(enlargedQrCode.id)}
                      style={{ padding: '12px 24px' }}
                    >
                      <i className="fas fa-copy"> 复制二维码
                    
                    <button
                      className="btn btn-primary"
                      onClick={() => downloadQrCode(enlargedQrCode.id)}
                      style={{ padding: '12px 24px' }}
                    >
                      <i className="fas fa-download"> 下载二维码
                    
                  
                
              
            )}

{/* 删除确认弹窗 */}
            {deleteConfirm.show && (
              <div className="delete-confirm-overlay" onClick={cancelDelete}>
                <div className="delete-confirm-modal" onClick={(e) => e.stopPropagation()}>
                  <div className="delete-confirm-title">
                    <i className="fas fa-exclamation-triangle"> 确认删除
                  
                  <div className="delete-confirm-message">
                    确定要删除配置
                    <span className="delete-confirm-qr-name">{deleteConfirm.qrCode?.name}
                    吗？此操作无法撤销。
                  
                  <div className="delete-confirm-actions">
                    <button className="delete-confirm-btn cancel" onClick={cancelDelete}>
                      取消
                    
                    <button className="delete-confirm-btn confirm" onClick={confirmDelete}>
                      删除
                    
                  
                
              
            )}

{/* 通知组件 */}
            {notification.show && (
              <div
                className={`notification ${notification.type}`}
              >
                <i
                  className={
                    notification.type === "success"
                      ? "fas fa-check-circle"
                      : notification.type === "error"
                        ? "fas fa-exclamation-circle"
                        : "fas fa-info-circle"
                  }
                >
                <span>{notification.message}
              
            )}
          
        
      );
    };

// 渲染应用
    ReactDOM.render(<App />, document.getElementById("root"));
  </script>
</body>

</html>