@tbox.cn/app-template-agent 0.1.0

package/apps/client/src/components/MediaList/index.less

@@ -0,0 +1,241 @@
+.tbox-media-list {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  padding: 0 0 16px;
+  overflow: visible;
+}
+
+.tbox-media-list__scroll {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 16px;
+  -webkit-overflow-scrolling: touch;
+  min-width: 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tbox-media-item {
+  width: var(--tbox-media-item-size);
+  min-width: var(--tbox-media-item-size);
+  height: var(--tbox-media-item-size);
+  border-radius: var(--tbox-media-item-radius);
+  overflow: visible;
+  position: relative;
+  background: #f5f5f5;
+
+  &--image {
+    overflow: hidden;
+  }
+
+  &__thumb {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: var(--tbox-media-item-radius);
+    gap: 8px;
+  }
+
+  &__progress-ring {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+  }
+
+  &__progress-inner {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__progress-text {
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  &__status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__status-text {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 20px;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  &__remove {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    z-index: 2;
+  }
+}
+
+/* 非图片（视频/文件）卡片 */
+.tbox-file-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  min-width: 280px;
+  height: var(--tbox-media-item-size);
+  border-radius: var(--tbox-media-item-radius);
+  background: #fcfcfc;
+  padding: 16px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: visible;
+
+  &__icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 24px;
+    color: #333;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  &__meta {
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.25);
+    white-space: nowrap;
+
+    &--failed {
+      color: #ff4d4f;
+    }
+  }
+
+  .tbox-media-item__remove {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+}
+
+/* 末尾“加更多”按钮 */
+.tbox-media-add {
+  width: var(--tbox-media-item-size);
+  min-width: var(--tbox-media-item-size);
+  height: var(--tbox-media-item-size);
+  border-radius: var(--tbox-media-item-radius);
+  background: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+/* 加更多的二级 popover */
+.tbox-media-popover {
+  position: absolute;
+  bottom: calc(var(--tbox-media-item-size) + 8px);
+  right: 0;
+  width: var(--tbox-media-item-size);
+  background: #fff;
+  border-radius: 20px;
+  padding: 16px 0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+  pointer-events: none;
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 60px;
+    gap: 8px;
+    padding: 0 16px;
+
+    & + & {
+      margin-top: 8px;
+    }
+  }
+
+  &__icon-wrap {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  &__label {
+    font-size: 28px;
+    color: rgba(31, 59, 99, 0.88);
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}

package/apps/client/src/components/MediaList/index.tsx

@@ -0,0 +1,256 @@
+import { useCallback, useEffect, useState } from 'react';
+import { X, Warning, Prohibit, Plus, VideoCamera } from '@phosphor-icons/react';
+import { previewImages } from '@/utils/imagePreview';
+import { toast } from '@/utils/toast';
+import type { MediaItem } from '@/types/chat';
+import './index.less';
+
+/** 媒体选项图标（远程素材，对齐原模板）。 */
+const POPOVER_ICONS: Record<string, { icon: string; label: string; bg: string }> = {
+  image: {
+    icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*DfDhSYAMzoQAAAAAHiAAAAgAel-hAQ/original',
+    label: '相册',
+    bg: '#0000001a',
+  },
+  camera: {
+    icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original',
+    label: '拍摄',
+    bg: '#4f58ec26',
+  },
+  video: {
+    icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original',
+    label: '视频',
+    bg: '#4f58ec26',
+  },
+};
+
+function formatSize(bytes?: number): string {
+  if (!bytes) return '';
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+
+function ImageItemCard({
+  item,
+  allImages,
+  onRemove,
+  onRetry,
+}: {
+  item: MediaItem;
+  allImages: string[];
+  onRemove: (id: string) => void;
+  onRetry?: (id: string) => void;
+}) {
+  const isUploading = !!item.isUploading;
+  const isFailed = !!item.uploadFailed;
+  const isIllegal = !!item.illegal;
+  const progress = item.uploadProgress ?? 0;
+
+  const onClick = () => {
+    if (isUploading) return;
+    if (isFailed) return onRetry?.(item.id);
+    if (isIllegal) return void toast('内容未过审核');
+    previewImages(allImages, allImages.indexOf(item.src));
+  };
+
+  return (
+    <div className="tbox-media-item tbox-media-item--image" onClick={onClick}>
+      <img className="tbox-media-item__thumb" src={item.src} alt="" />
+
+      {isUploading && (
+        <div className="tbox-media-item__overlay">
+          <div
+            className="tbox-media-item__progress-ring"
+            style={{ background: `conic-gradient(#fff ${progress}%, rgba(255,255,255,0.25) ${progress}%)` }}
+          >
+            <div className="tbox-media-item__progress-inner">
+              <span className="tbox-media-item__progress-text">{progress}%</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {isFailed && (
+        <div className="tbox-media-item__overlay">
+          <div className="tbox-media-item__status-icon">
+            <Warning size={20} color="#fff" />
+          </div>
+          <span className="tbox-media-item__status-text">点击重试</span>
+        </div>
+      )}
+
+      {isIllegal && (
+        <div className="tbox-media-item__overlay">
+          <div className="tbox-media-item__status-icon">
+            <Prohibit size={20} color="#fff" />
+          </div>
+          <span className="tbox-media-item__status-text">未过审核</span>
+        </div>
+      )}
+
+      {!isUploading && (
+        <div className="tbox-media-item__remove" onClick={(e) => { e.stopPropagation(); onRemove(item.id); }}>
+          <X size={14} color="#fff" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FileItemCard({
+  item,
+  onRemove,
+  onRetry,
+}: {
+  item: MediaItem;
+  onRemove: (id: string) => void;
+  onRetry?: (id: string) => void;
+}) {
+  const isUploading = !!item.isUploading;
+  const isFailed = !!item.uploadFailed;
+
+  const meta = isUploading
+    ? `上传中...${item.uploadProgress ?? 0}%`
+    : isFailed
+      ? '上传失败'
+      : formatSize(item.size);
+
+  return (
+    <div className="tbox-file-item" onClick={() => isFailed && onRetry?.(item.id)}>
+      <div className="tbox-file-item__icon">
+        <VideoCamera size={28} color="#506fff" />
+      </div>
+      <div className="tbox-file-item__info">
+        <span className="tbox-file-item__name">{item.name ?? '未知文件'}</span>
+        <span className={`tbox-file-item__meta${isFailed ? ' tbox-file-item__meta--failed' : ''}`}>{meta}</span>
+      </div>
+      {!isUploading && (
+        <div className="tbox-media-item__remove" onClick={(e) => { e.stopPropagation(); onRemove(item.id); }}>
+          <X size={14} color="#fff" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MediaPopover({
+  visible,
+  options,
+  onSelect,
+}: {
+  visible: boolean;
+  options: { type: string; icon: string; label: string; bg: string }[];
+  onSelect: (type: string) => void;
+}) {
+  return (
+    <div className={`tbox-media-popover${visible ? ' tbox-media-popover--visible' : ''}`}>
+      {options.map((opt) => (
+        <div
+          key={opt.type}
+          className="tbox-media-popover__item"
+          onClick={(e) => { e.stopPropagation(); onSelect(opt.type); }}
+        >
+          <div className="tbox-media-popover__icon-wrap" style={{ background: opt.bg }}>
+            <img className="tbox-media-popover__icon" src={opt.icon} alt="" />
+          </div>
+          <span className="tbox-media-popover__label">{opt.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export interface MediaListProps {
+  items: MediaItem[];
+  onRemove: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onPickImage?: () => void;
+  onPickCamera?: () => void;
+  onPickVideo?: () => void;
+  enableImage?: boolean;
+  enableVideo?: boolean;
+  isWebPc?: boolean;
+}
+
+/** 已选媒体预览列表（对齐原模板：进度环 / 失败-未过审 overlay / 删除 / 末尾加号 popover）。 */
+export function MediaList({
+  items,
+  onRemove,
+  onRetry,
+  onPickImage,
+  onPickCamera,
+  onPickVideo,
+  enableImage,
+  enableVideo,
+  isWebPc,
+}: MediaListProps) {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+  const hasCamera = !!enableImage && !isWebPc;
+
+  const options = [
+    enableImage && { type: 'image', ...POPOVER_ICONS.image },
+    hasCamera && { type: 'camera', ...POPOVER_ICONS.camera },
+    enableVideo && { type: 'video', ...POPOVER_ICONS.video },
+  ].filter(Boolean) as { type: string; icon: string; label: string; bg: string }[];
+
+  const allImages = items
+    .filter((i) => i.type === 'image' && !i.isUploading && !i.uploadFailed && !i.illegal)
+    .map((i) => i.src);
+
+  const handleAddClick = useCallback(() => {
+    if (options.length <= 1) {
+      if (enableImage) onPickImage?.();
+      else if (enableVideo) onPickVideo?.();
+      return;
+    }
+    setPopoverVisible((v) => !v);
+  }, [options.length, enableImage, enableVideo, onPickImage, onPickVideo]);
+
+  const handleSelect = useCallback(
+    (type: string) => {
+      setPopoverVisible(false);
+      if (type === 'image') onPickImage?.();
+      else if (type === 'camera') onPickCamera?.();
+      else if (type === 'video') onPickVideo?.();
+    },
+    [onPickImage, onPickCamera, onPickVideo],
+  );
+
+  useEffect(() => {
+    if (!popoverVisible) return;
+    const onDown = (e: MouseEvent | TouchEvent) => {
+      const t = e.target as HTMLElement;
+      if (t && !t.closest('.tbox-media-add') && !t.closest('.tbox-media-popover')) setPopoverVisible(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('touchstart', onDown, { passive: true });
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('touchstart', onDown);
+    };
+  }, [popoverVisible]);
+
+  if (items.length === 0) return null;
+  const showAddButton = options.length > 0;
+
+  return (
+    <div className="tbox-media-list">
+      <div className="tbox-media-list__scroll">
+        {items.map((item) =>
+          item.type === 'image' ? (
+            <ImageItemCard key={item.id} item={item} allImages={allImages} onRemove={onRemove} onRetry={onRetry} />
+          ) : (
+            <FileItemCard key={item.id} item={item} onRemove={onRemove} onRetry={onRetry} />
+          ),
+        )}
+      </div>
+      {showAddButton && (
+        <div className="tbox-media-add" onClick={handleAddClick}>
+          <Plus size={22} color="rgba(0,0,0,0.65)" />
+          <MediaPopover visible={popoverVisible} options={options} onSelect={handleSelect} />
+        </div>
+      )}
+    </div>
+  );
+}