Function renderSourceAssets

src/components/TemplateEditor.jsx:276–356

()

    // 辅助组件：渲染参考素材区域
    const renderSourceAssets = () => (
      <div className="flex flex-col gap-1">
        <label className={`text-[10px] font-black uppercase tracking-widest opacity-40 ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>
          {language === 'cn' ? '参考素材' : 'Sources'}
        </label>
        <HScrollArea isDarkMode={isDarkMode}>
          {(activeTemplate.source || []).map((src, sIdx) => (
            <div key={sIdx}
              className={`flex-shrink-0 relative group/source rounded-lg border-2 transition-all cursor-zoom-in hover:scale-[1.03] ${isDarkMode ? 'border-white/5 bg-white/5' : 'border-gray-100 bg-gray-50'}`}
              onClick={() => {
                if (src.templateId) {
                  // 关联模式：跳转到模版
                  if (templates && templates.some(t => t.id === src.templateId)) {
                    setActiveTemplateId(src.templateId);
                  } else {
                    alert(language === 'cn' ? `关联的模版「${src.templateName || '未知'}」已不存在` : `Linked template "${src.templateName || 'Unknown'}" no longer exists`);
                  }
                } else {
                  setSourceZoomedItem(src);
                }
              }}>
              <div className={`${isMobileDevice ? 'w-[140px] h-[140px]' : 'w-[210px] h-[210px]'} overflow-hidden rounded-lg flex items-center justify-center`}>
                {src.type === 'video' ? (
                  getVideoEmbedInfo(src.url)?.platform === 'video' || isFolderMediaPath(src.url) ? (
                    <EditorSourceThumbVideo
                      src={src.url}
                      className="w-full h-full object-cover"
                      playIconSize={isMobileDevice ? 18 : 24}
                      onMouseEnter={(e) => e.target.play()}
                      onMouseLeave={(e) => {
                        e.target.pause();
                        e.target.currentTime = 0;
                      }}
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center bg-black/20">
                      <Play size={isMobileDevice ? 18 : 24} className="text-white/60" fill="currentColor" />
                    </div>
                  )
                ) : (
                  <OptimizedImage
                    src={src.url}
                    alt={`Source ${src.id || sIdx + 1}`}
                    className="w-full h-full object-cover"
                    isDarkMode={isDarkMode}
                    priority={10}
                  />
                )}
              </div>

              {/* 关联角标 */}
              {src.templateId && (
                <div className="absolute top-1.5 left-1.5 z-10 bg-orange-500 text-white rounded-md px-1 py-0.5 flex items-center gap-1 shadow-lg">
                  <Link size={10} />
                  <span className="text-[9px] font-black">{language === 'cn' ? '关联' : 'LINK'}</span>
                </div>
              )}