@fjyueke/arco-mcp 1.0.0

package/metaData/components/uploader/example/index.tsx

@@ -0,0 +1,208 @@
+import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { cls, defaultLocale, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Button from '../button';
+import { UploaderRef, UploaderProps, FileItem } from './type';
+import { useLatestRef } from '../_helpers';
+import { IconUpload, IconDelete, IconCheck, IconFile } from '../icon';
+import Loading from '../loading';
+import { Upload } from './upload';
+
+export * from './type';
+
+const Uploader = forwardRef((props: UploaderProps, ref: Ref<UploaderRef>) => {
+    const {
+        className = '',
+        style,
+        files = [],
+        accept = undefined,
+        multiple = false,
+        capture,
+        limit = 0,
+        hideStatus = false,
+        alwaysShowSelect = false,
+        disabled,
+        renderDeleteArea,
+        renderLoadedArea,
+        renderLoadingArea,
+        renderErrorArea,
+        renderFileIndexArea,
+        renderUploadArea,
+        renderFileList,
+    } = props;
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const fileRef = useRef<HTMLInputElement | null>(null);
+    const cacheRef = useLatestRef<FileItem[]>(files as FileItem[]);
+
+    const uploadFunc = new Upload(props, fileRef, cacheRef);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    const uploaderSelect = (prefixCls, locale) => {
+        const showSelect = files.length < (limit || Infinity);
+        return (
+            (showSelect || alwaysShowSelect) && (
+                <div className={`${prefixCls}-uploader-add`} onClick={uploadFunc.handleSelect}>
+                    <input
+                        type="file"
+                        accept={accept}
+                        capture={capture}
+                        onChange={e => uploadFunc.handleChange(e)}
+                        multiple={multiple}
+                        ref={fileRef}
+                    />
+                    {(renderUploadArea && renderUploadArea()) || (
+                        <Button
+                            className={`${prefixCls}-uploader-add-button`}
+                            size="medium"
+                            icon={<IconUpload />}
+                            disabled={disabled}
+                        >
+                            {locale.Uploader.uploadBtn}
+                        </Button>
+                    )}
+                </div>
+            )
+        );
+    };
+
+    const getUploadList = (prefixCls, locale) => {
+        const generateItemArea = (fileItem, index, render, part, defaultArea) => {
+            if (render) {
+                const node = render(fileItem, index);
+                return node ? (
+                    <div className={`${prefixCls}-uploader-list-item-${part}`}>{node}</div>
+                ) : (
+                    node
+                );
+            }
+            return <div className={`${prefixCls}-uploader-list-item-${part}`}>{defaultArea}</div>;
+        };
+
+        return (
+            (renderFileList &&
+                renderFileList({
+                    retryUpload: uploadFunc.retryUpload,
+                    deleteFile: uploadFunc.deleteFile,
+                })) || (
+                <div className={`${prefixCls}-uploader-list`}>
+                    {(
+                        (limit && limit < files.length
+                            ? files.slice(0, limit)
+                            : files) as FileItem[]
+                    ).map((fileItem, index) => {
+                        const { file, status } = fileItem;
+                        return (
+                            <div
+                                className={`${prefixCls}-uploader-list-item`}
+                                key={index}
+                                onClick={e => uploadFunc.handleClick(e, fileItem, index)}
+                            >
+                                <div className={`${prefixCls}-uploader-list-item-container`}>
+                                    <div className={`${prefixCls}-uploader-list-item-wrapper`}>
+                                        {generateItemArea(
+                                            fileItem,
+                                            index,
+                                            renderFileIndexArea,
+                                            'file',
+                                            <IconFile
+                                                className={`${prefixCls}-uploader-list-item-file-icon`}
+                                            />,
+                                        )}
+                                        <div
+                                            className={cls(`${prefixCls}-uploader-list-item-text`, {
+                                                [`${prefixCls}-uploader-list-item-text-error`]:
+                                                    status === 'error',
+                                            })}
+                                        >
+                                            {file.name}
+                                        </div>
+                                    </div>
+                                    {!hideStatus && (
+                                        <div className={`${prefixCls}-uploader-list-item-status`}>
+                                            {status === 'loaded' &&
+                                                generateItemArea(
+                                                    fileItem,
+                                                    index,
+                                                    renderLoadedArea,
+                                                    'loaded',
+                                                    <IconCheck />,
+                                                )}
+                                            {status === 'loading' &&
+                                                generateItemArea(
+                                                    fileItem,
+                                                    index,
+                                                    renderLoadingArea,
+                                                    'loading',
+                                                    <Loading type="circle" radius={7} />,
+                                                )}
+                                            {status === 'error' && (
+                                                <div onClick={() => uploadFunc.retryUpload(index)}>
+                                                    {generateItemArea(
+                                                        fileItem,
+                                                        index,
+                                                        renderErrorArea,
+                                                        'error',
+                                                        <span>{locale.Uploader.retryUpload}</span>,
+                                                    )}
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                                <div
+                                    className={`${prefixCls}-uploader-list-item-delete`}
+                                    onClick={() => uploadFunc.deleteFile(index)}
+                                >
+                                    {(renderDeleteArea && renderDeleteArea(fileItem, index)) || (
+                                        <IconDelete
+                                            className={cls(
+                                                `${prefixCls}-uploader-list-item-delete-icon`,
+                                                {
+                                                    [`${prefixCls}-uploader-list-item-delete-icon-disabled`]:
+                                                        disabled,
+                                                },
+                                            )}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )
+        );
+    };
+
+    return (
+        <ContextLayout>
+            {({ prefixCls, locale = defaultLocale }) => (
+                <div
+                    className={cls(`${prefixCls}-uploader`, className, {
+                        [`${prefixCls}-uploader-disabled`]: disabled,
+                    })}
+                    style={style}
+                    ref={domRef}
+                >
+                    <div className={`${prefixCls}-uploader-container`}>
+                        {uploaderSelect(prefixCls, locale)}
+                        {getUploadList(prefixCls, locale)}
+                    </div>
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+/**
+ * 文件上传组件
+ * @en Uploader Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 文件上传
+ * @name_en Uploader
+ * @displayName Uploader
+ */
+export default componentWrapper(Uploader, 'Uploader');

package/metaData/components-index.json

@@ -0,0 +1,242 @@
+[
+  {
+    "name": "ActionSheet",
+    "dirName": "action-sheet"
+  },
+  {
+    "name": "Avatar",
+    "dirName": "avatar"
+  },
+  {
+    "name": "Badge",
+    "dirName": "badge"
+  },
+  {
+    "name": "Button",
+    "dirName": "button"
+  },
+  {
+    "name": "Carousel",
+    "dirName": "carousel"
+  },
+  {
+    "name": "Cell",
+    "dirName": "cell"
+  },
+  {
+    "name": "Checkbox",
+    "dirName": "checkbox"
+  },
+  {
+    "name": "CircleProgress",
+    "dirName": "circle-progress"
+  },
+  {
+    "name": "Collapse",
+    "dirName": "collapse"
+  },
+  {
+    "name": "ContextProvider",
+    "dirName": "context-provider"
+  },
+  {
+    "name": "CountDown",
+    "dirName": "count-down"
+  },
+  {
+    "name": "DatePicker",
+    "dirName": "date-picker"
+  },
+  {
+    "name": "Dialog",
+    "dirName": "dialog"
+  },
+  {
+    "name": "Divider",
+    "dirName": "divider"
+  },
+  {
+    "name": "Dropdown",
+    "dirName": "dropdown"
+  },
+  {
+    "name": "DropdownMenu",
+    "dirName": "dropdown-menu"
+  },
+  {
+    "name": "Ellipsis",
+    "dirName": "ellipsis"
+  },
+  {
+    "name": "Form",
+    "dirName": "form"
+  },
+  {
+    "name": "Grid",
+    "dirName": "grid"
+  },
+  {
+    "name": "Icon",
+    "dirName": "icon"
+  },
+  {
+    "name": "Image",
+    "dirName": "image"
+  },
+  {
+    "name": "ImagePicker",
+    "dirName": "image-picker"
+  },
+  {
+    "name": "ImagePreview",
+    "dirName": "image-preview"
+  },
+  {
+    "name": "IndexBar",
+    "dirName": "index-bar"
+  },
+  {
+    "name": "Input",
+    "dirName": "input"
+  },
+  {
+    "name": "Keyboard",
+    "dirName": "keyboard"
+  },
+  {
+    "name": "LoadMore",
+    "dirName": "load-more"
+  },
+  {
+    "name": "Loading",
+    "dirName": "loading"
+  },
+  {
+    "name": "Masking",
+    "dirName": "masking"
+  },
+  {
+    "name": "NavBar",
+    "dirName": "nav-bar"
+  },
+  {
+    "name": "NoticeBar",
+    "dirName": "notice-bar"
+  },
+  {
+    "name": "Notify",
+    "dirName": "notify"
+  },
+  {
+    "name": "Pagination",
+    "dirName": "pagination"
+  },
+  {
+    "name": "Picker",
+    "dirName": "picker"
+  },
+  {
+    "name": "PickerView",
+    "dirName": "picker-view"
+  },
+  {
+    "name": "Popover",
+    "dirName": "popover"
+  },
+  {
+    "name": "Popup",
+    "dirName": "popup"
+  },
+  {
+    "name": "PopupSwiper",
+    "dirName": "popup-swiper"
+  },
+  {
+    "name": "Portal",
+    "dirName": "portal"
+  },
+  {
+    "name": "Progress",
+    "dirName": "progress"
+  },
+  {
+    "name": "PullRefresh",
+    "dirName": "pull-refresh"
+  },
+  {
+    "name": "Radio",
+    "dirName": "radio"
+  },
+  {
+    "name": "Rate",
+    "dirName": "rate"
+  },
+  {
+    "name": "SearchBar",
+    "dirName": "search-bar"
+  },
+  {
+    "name": "ShowMonitor",
+    "dirName": "show-monitor"
+  },
+  {
+    "name": "Skeleton",
+    "dirName": "skeleton"
+  },
+  {
+    "name": "Slider",
+    "dirName": "slider"
+  },
+  {
+    "name": "Stepper",
+    "dirName": "stepper"
+  },
+  {
+    "name": "Steps",
+    "dirName": "steps"
+  },
+  {
+    "name": "Sticky",
+    "dirName": "sticky"
+  },
+  {
+    "name": "SwipeAction",
+    "dirName": "swipe-action"
+  },
+  {
+    "name": "SwipeLoad",
+    "dirName": "swipe-load"
+  },
+  {
+    "name": "Switch",
+    "dirName": "switch"
+  },
+  {
+    "name": "TabBar",
+    "dirName": "tab-bar"
+  },
+  {
+    "name": "Tabs",
+    "dirName": "tabs"
+  },
+  {
+    "name": "Tag",
+    "dirName": "tag"
+  },
+  {
+    "name": "Textarea",
+    "dirName": "textarea"
+  },
+  {
+    "name": "Toast",
+    "dirName": "toast"
+  },
+  {
+    "name": "Transition",
+    "dirName": "transition"
+  },
+  {
+    "name": "Uploader",
+    "dirName": "uploader"
+  }
+]

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@fjyueke/arco-mcp",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "MCP UI builder by Arco Design Mobile",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "arco",
+    "arco-design",
+    "mobile"
+  ],
+  "homepage": "https://github.com/fjyueke/arco-mcp",
+  "main": "dist/index.js",
+  "bin": {
+    "mcp": "dist/index.js"
+  },
+  "repository": {
+    "type": "https",
+    "url": "git+https://github.com/fjyueke/arco-mcp.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fjyueke/arco-mcp/issues/new"
+  },
+  "scripts": {
+    "build": "tsup",
+    "download": "jiti scripts/downloadRepo",
+    "analyze": "jiti scripts/analyze-doc",
+    "sync": "jiti scripts/syncFromArco",
+    "sync:build": "jiti scripts/syncFromArco && tsup"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.9.0",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "giget": "^2.0.0",
+    "jiti": "^2.4.2",
+    "ora": "^8.2.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  },
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "strict": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*"
+  ]
+}