@gadmin2n/schematics 0.0.72 → 0.0.74

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

@@ -1,8 +1,6 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Button, Tooltip, Popover } from 'antd';
 import {
-  DownOutlined,
-  UpOutlined,
   SaveOutlined,
   ArrowLeftOutlined,
   RocketOutlined,
@@ -36,15 +34,6 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
   onPreview,
 }) => {
   const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(true);
-  const [everExpanded, setEverExpanded] = useState(true);
-
-  const handleToggle = useCallback(() => {
-    setExpanded((prev) => {
-      if (!prev) setEverExpanded(true);
-      return !prev;
-    });
-  }, []);
 
   const handleVariantDragStart = useCallback(
     (e: React.DragEvent, componentType: string, variantCode: string) => {
@@ -110,7 +99,7 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
           </span>
         </div>
 
-        {/* 中间: 组件库按钮 */}
+        {/* 中间: 组件库标题 */}
         <div
           style={{
             display: 'flex',
@@ -121,27 +110,18 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
           <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',
+              background: '#4361ee',
+              color: '#fff',
+              boxShadow: '0 2px 8px rgba(67,97,238,0.3)',
+              cursor: 'default',
             }}
           >
-            {t('canvas.componentLib')}{' '}
-            {expanded ? <UpOutlined /> : <DownOutlined />}
+            {t('canvas.componentLib')}
           </Button>
         </div>
 
@@ -220,163 +200,155 @@ const CanvasToolbar: React.FC<CanvasToolbarProps> = ({
         </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>
-            );
+      {/* ── Thumbnail row (always visible) ── */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 24,
+          padding: '16px 24px 20px',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+          borderTop: '1px solid #f0f0f0',
+        }}
+      >
+        {CANVAS_COMPONENTS.map((type) => {
+          const def = CANVAS_DEFAULTS[type];
+          const variants = def?.variants ?? [];
 
-            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}
-              >
+          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: 8,
+                    gap: 6,
                     cursor: 'grab',
                     userSelect: 'none',
                     flexShrink: 0,
-                    width: 140,
                   }}
                 >
                   <div
                     style={{
-                      border: '1px solid #eaeaea',
-                      borderRadius: 10,
+                      border: '1px solid #e8e8e8',
+                      borderRadius: 8,
                       overflow: 'hidden',
                       background: '#fff',
-                      transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+                      transition: 'all 180ms ease',
                     }}
                     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)';
+                      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 = '#eaeaea';
+                      el.style.borderColor = '#e8e8e8';
                       el.style.boxShadow = 'none';
                       el.style.transform = 'translateY(0) scale(1)';
                     }}
                   >
-                    <ComponentThumbnail componentType={type} width={140} />
+                    <ComponentThumbnail
+                      componentType={type}
+                      code={v.code}
+                      width={124}
+                    />
                   </div>
                   <span
                     style={{
-                      fontSize: 11,
-                      color: '#888',
+                      fontSize: 10,
+                      color: '#666',
                       fontWeight: 500,
-                      letterSpacing: '0.3px',
                       textAlign: 'center',
                       pointerEvents: 'none',
                     }}
                   >
-                    {getComponentLabel(type, t)}
+                    {getVariantLabel(v.label, t)}
                   </span>
                 </div>
-              </Popover>
-            );
-          })}
-        </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>
   );
 };