@gadmin2n/schematics 0.0.71 → 0.0.74

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CanvasToolbar.tsx

@@ -1,384 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Button, Tooltip, Popover } from 'antd';
-import {
-  DownOutlined,
-  UpOutlined,
-  SaveOutlined,
-  ArrowLeftOutlined,
-  RocketOutlined,
-  AppstoreOutlined,
-  EyeOutlined,
-} from '@ant-design/icons';
-import ComponentThumbnail from './ComponentThumbnail';
-import { CANVAS_COMPONENTS, CANVAS_DEFAULTS } from './canvasDefaults';
-import { useTranslation } from 'react-i18next';
-import { getComponentLabel, getVariantLabel } from './canvasI18n';
-
-interface CanvasToolbarProps {
-  isDirty: boolean;
-  canvasName: string;
-  isPublished: boolean;
-  onSave: () => void;
-  onBack: () => void;
-  onPublish: () => void;
-  onUnpublish: () => void;
-  onPreview: () => void;
-}
-
-const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
-  isDirty,
-  canvasName,
-  isPublished,
-  onSave,
-  onBack,
-  onPublish,
-  onUnpublish,
-  onPreview,
-}) => {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
-  const [everExpanded, setEverExpanded] = useState(false);
-
-  const handleToggle = useCallback(() => {
-    setExpanded((prev) => {
-      if (!prev) setEverExpanded(true);
-      return !prev;
-    });
-  }, []);
-
-  const handleVariantDragStart = useCallback(
-    (e: React.DragEvent, componentType: string, variantCode: string) => {
-      e.dataTransfer.setData('componentType', componentType);
-      e.dataTransfer.setData('variantCode', variantCode);
-      e.dataTransfer.setData(
-        `x-component-type/${componentType.toLowerCase()}`,
-        '',
-      );
-      e.dataTransfer.effectAllowed = 'copy';
-    },
-    [],
-  );
-
-  return (
-    <div
-      style={{
-        background: '#fff',
-        borderBottom: '1px solid #eaeaea',
-        flexShrink: 0,
-        boxShadow: '0 1px 8px rgba(0,0,0,0.04)',
-      }}
-    >
-      {/* ── Header row ── */}
-      <div
-        style={{
-          height: 52,
-          padding: '0 24px',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        {/* 左侧: 返回 + 名称 */}
-        <div
-          style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 14 }}
-        >
-          <Tooltip title={t('canvas.backToList')}>
-            <Button
-              size="small"
-              type="text"
-              icon={<ArrowLeftOutlined style={{ color: '#595959' }} />}
-              onClick={onBack}
-              style={{
-                borderRadius: '50%',
-                width: 32,
-                height: 32,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            />
-          </Tooltip>
-          <span
-            style={{
-              fontWeight: 600,
-              fontSize: 15,
-              color: '#1a1a1a',
-              letterSpacing: '0.2px',
-              padding: '4px 10px',
-            }}
-          >
-            {canvasName}
-          </span>
-        </div>
-
-        {/* 中间: 组件库按钮 */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Button
-            size="small"
-            icon={<AppstoreOutlined />}
-            onClick={handleToggle}
-            style={{
-              fontSize: 13,
-              fontWeight: 500,
-              borderRadius: 8,
-              border: 'none',
-              ...(expanded
-                ? {
-                    background: '#4361ee',
-                    color: '#fff',
-                    boxShadow: '0 2px 8px rgba(67,97,238,0.3)',
-                  }
-                : {
-                    background: '#f0f1f5',
-                    color: '#444',
-                  }),
-              transition: 'all 200ms ease',
-            }}
-          >
-            {t('canvas.componentLib')}{' '}
-            {expanded ? <UpOutlined /> : <DownOutlined />}
-          </Button>
-        </div>
-
-        {/* 右侧: 保存 + 发布 */}
-        <div
-          style={{
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            gap: 10,
-          }}
-        >
-          <Button
-            size="small"
-            icon={<SaveOutlined />}
-            onClick={onSave}
-            style={{
-              borderRadius: 8,
-              border: 'none',
-              fontWeight: 500,
-              ...(isDirty
-                ? {
-                    background: '#4361ee',
-                    color: '#fff',
-                    boxShadow: '0 2px 8px rgba(67,97,238,0.3)',
-                  }
-                : {
-                    background: '#f0f1f5',
-                    color: '#999',
-                  }),
-              transition: 'all 200ms ease',
-            }}
-          >
-            {isDirty ? t('canvas.saveDirty') : t('canvas.save')}
-          </Button>
-          <Button
-            size="small"
-            icon={<EyeOutlined />}
-            onClick={onPreview}
-            style={{
-              borderRadius: 8,
-              border: '1px solid #e0e0e0',
-              background: 'transparent',
-              color: '#555',
-              fontWeight: 500,
-              transition: 'all 200ms ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = '#f7f7f8';
-              e.currentTarget.style.borderColor = '#ccc';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'transparent';
-              e.currentTarget.style.borderColor = '#e0e0e0';
-            }}
-          >
-            {t('canvas.preview')}
-          </Button>
-          <Button
-            size="small"
-            icon={<RocketOutlined />}
-            onClick={isPublished ? onUnpublish : onPublish}
-            danger={isPublished}
-            style={{
-              borderRadius: 8,
-              border: isPublished ? '1px solid #ff4d4f' : '1px solid #e0e0e0',
-              background: isPublished ? '#fff2f0' : 'transparent',
-              color: isPublished ? '#ff4d4f' : '#555',
-              fontWeight: 500,
-              transition: 'all 200ms ease',
-            }}
-          >
-            {isPublished ? t('canvas.unpublish') : t('canvas.publish')}
-          </Button>
-        </div>
-      </div>
-
-      {/* ── Thumbnail row (collapsible, lazy-mounted) ── */}
-      {everExpanded && (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 24,
-            padding: expanded ? '16px 24px 20px' : '0 24px',
-            overflowX: expanded ? 'auto' : 'hidden',
-            overflowY: 'hidden',
-            borderTop: expanded ? '1px solid #f0f0f0' : 'none',
-            maxHeight: expanded ? 280 : 0,
-            opacity: expanded ? 1 : 0,
-            transition:
-              'max-height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, padding 250ms cubic-bezier(0.4, 0, 0.2, 1)',
-          }}
-        >
-          {CANVAS_COMPONENTS.map((type) => {
-            const def = CANVAS_DEFAULTS[type];
-            const variants = def?.variants ?? [];
-
-            const popoverContent = (
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 16,
-                  padding: 4,
-                }}
-              >
-                {variants.map((v) => (
-                  <div
-                    key={v.name}
-                    draggable
-                    onDragStart={(e) => handleVariantDragStart(e, type, v.code)}
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      gap: 6,
-                      cursor: 'grab',
-                      userSelect: 'none',
-                      flexShrink: 0,
-                    }}
-                  >
-                    <div
-                      style={{
-                        border: '1px solid #e8e8e8',
-                        borderRadius: 8,
-                        overflow: 'hidden',
-                        background: '#fff',
-                        transition: 'all 180ms ease',
-                      }}
-                      onMouseEnter={(e) => {
-                        const el = e.currentTarget;
-                        el.style.borderColor = '#4361ee';
-                        el.style.boxShadow = '0 4px 12px rgba(67,97,238,0.15)';
-                        el.style.transform = 'translateY(-3px) scale(1.02)';
-                      }}
-                      onMouseLeave={(e) => {
-                        const el = e.currentTarget;
-                        el.style.borderColor = '#e8e8e8';
-                        el.style.boxShadow = 'none';
-                        el.style.transform = 'translateY(0) scale(1)';
-                      }}
-                    >
-                      <ComponentThumbnail
-                        componentType={type}
-                        code={v.code}
-                        width={124}
-                      />
-                    </div>
-                    <span
-                      style={{
-                        fontSize: 10,
-                        color: '#666',
-                        fontWeight: 500,
-                        textAlign: 'center',
-                        pointerEvents: 'none',
-                      }}
-                    >
-                      {getVariantLabel(v.label, t)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            );
-
-            return (
-              <Popover
-                key={type}
-                content={popoverContent}
-                title={
-                  <span
-                    style={{ fontSize: 12, fontWeight: 600, color: '#333' }}
-                  >
-                    {getComponentLabel(type, t)}
-                  </span>
-                }
-                trigger="hover"
-                placement="bottomLeft"
-                mouseEnterDelay={0.2}
-                mouseLeaveDelay={0.3}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 8,
-                    cursor: 'grab',
-                    userSelect: 'none',
-                    flexShrink: 0,
-                    width: 140,
-                  }}
-                >
-                  <div
-                    style={{
-                      border: '1px solid #eaeaea',
-                      borderRadius: 10,
-                      overflow: 'hidden',
-                      background: '#fff',
-                      transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
-                    }}
-                    onMouseEnter={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#4361ee';
-                      el.style.boxShadow = '0 4px 16px rgba(67,97,238,0.12)';
-                      el.style.transform = 'translateY(-3px) scale(1.03)';
-                    }}
-                    onMouseLeave={(e) => {
-                      const el = e.currentTarget;
-                      el.style.borderColor = '#eaeaea';
-                      el.style.boxShadow = 'none';
-                      el.style.transform = 'translateY(0) scale(1)';
-                    }}
-                  >
-                    <ComponentThumbnail componentType={type} width={140} />
-                  </div>
-                  <span
-                    style={{
-                      fontSize: 11,
-                      color: '#888',
-                      fontWeight: 500,
-                      letterSpacing: '0.3px',
-                      textAlign: 'center',
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    {getComponentLabel(type, t)}
-                  </span>
-                </div>
-              </Popover>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CanvasToolbar;