aurora-admin/frameworks-mobile/Upload.jsx

import React from 'react';
import './Upload.css';

/* 上传（移动端）— 规格 §46。
   结构：header（标题 + 计数）> trigger（选择触发器）> list（文件行）+ empty。
   移动端没有拖拽：选择动作只能是点一下触发器（规格 §46.1），因此触发器是唯一入口。
   **本组件不发请求**：进度与成败全部由宿主回传（file.status / file.percent），
   组件只做四态呈现与删除 / 重试的动作回传（规格 §46.7）。
   file.status 取值：'pending'（待上传）/ 'uploading'（上传中）/ 'success'（成功）/ 'error'（失败）。 */

const STATUS_TEXT = {
  pending: '待上传',
  uploading: '上传中',
  success: '已上传',
  error: '上传失败',
};

function statusOf(file) {
  const s = file && file.status ? String(file.status) : 'pending';
  return STATUS_TEXT[s] ? s : 'pending';
}

function percentOf(file) {
  const n = file && typeof file.percent === 'number' ? file.percent : 0;
  return Math.max(0, Math.min(100, Math.round(n)));
}

function extOf(file) {
  const name = file && file.name ? String(file.name) : '';
  const hit = name.match(/\.([a-z0-9]+)$/i);
  return hit ? hit[1].toLowerCase() : 'file';
}

export default function Upload({
  files = [],
  maxCount = 9,
  disabled = false,
  variant = 'dashed',
  title = '附件',
  emptyText = '还没有上传文件',
  accept = '',
  onSelect,
  onRemove,
  onRetry,
  children = null,
}) {
  const full = files.length >= maxCount;
  const cls =
    'kole-m-upload' +
    ` kole-m-upload--${variant === 'button' ? 'button' : 'dashed'}` +
    (full ? ' kole-m-upload--full' : '') +
    (disabled ? ' is-disabled' : '');

  return (
    <div className={cls}>
      <div className="kole-m-upload__header">
        <span className="kole-m-upload__title">{title}</span>
        <span className="kole-m-upload__count">
          {files.length} / {maxCount}
        </span>
      </div>

      {/* 触发器：调起系统文件选择器（本端不绑定隐藏 input，由宿主套壳或在 onSelect 里自行取文件） */}
      <button
        className="kole-m-upload__trigger"
        type="button"
        disabled={disabled || full}
        aria-disabled={disabled || full ? 'true' : undefined}
        onClick={() => {
          if (disabled || full) return;
          if (onSelect) onSelect();
        }}
      >
        ＋ 选择文件
      </button>

      {files.length ? (
        <ul className="kole-m-upload__list">
          {files.map((file, i) => {
            const st = statusOf(file);
            const pct = percentOf(file);
            const name = file && file.name ? String(file.name) : '未命名文件';
            return (
              <li
                className={'kole-m-upload__item is-' + st}
                key={file && file.uid ? String(file.uid) : name + i}
                style={{ '--kole-m-upload-percent': pct + '%' }}
              >
                <span className="kole-m-upload__thumb" aria-hidden="true">
                  {extOf(file)}
                </span>
                <span className="kole-m-upload__body">
                  <span className="kole-m-upload__name">{name}</span>
                  <span className="kole-m-upload__meta">
                    <span
                      className="kole-m-upload__track"
                      role="progressbar"
                      aria-valuemin="0"
                      aria-valuemax="100"
                      aria-valuenow={pct}
                      aria-label={name + ' 上传进度'}
                    >
                      <span className="kole-m-upload__bar" />
                    </span>
                    <span className="kole-m-upload__status">
                      {st === 'uploading' ? pct + '%' : STATUS_TEXT[st]}
                    </span>
                  </span>
                </span>
                <span className="kole-m-upload__actions">
                  {st === 'error' ? (
                    <button
                      className="kole-m-upload__action"
                      type="button"
                      disabled={disabled}
                      aria-label={'重试 ' + name}
                      onClick={() => {
                        if (disabled) return;
                        if (onRetry) onRetry(i);
                      }}
                    >
                      重试
                    </button>
                  ) : null}
                  <button
                    className="kole-m-upload__action kole-m-upload__action--remove"
                    type="button"
                    disabled={disabled}
                    aria-label={'删除 ' + name}
                    onClick={() => {
                      if (disabled) return;
                      if (onRemove) onRemove(i);
                    }}
                  >
                    删除
                  </button>
                </span>
              </li>
            );
          })}
        </ul>
      ) : (
        <p className="kole-m-upload__empty">{emptyText}</p>
      )}

      {/* 隐藏的文件选择器（由宿主提供，这里用 accept 说明可选项） */}
      <input className="kole-m-upload__native" type="file" multiple accept={accept} tabIndex={-1} aria-hidden="true" />
      {children}
    </div>
  );
}