@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/FileExplorer.tsx

@@ -0,0 +1,441 @@
+/**
+ * 文件管理器
+ * 文件和目录管理
+ *
+ * @type Page
+ * @route /files
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  folderId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  files?: {
+    /* @example 1 */id?: number,
+    /* @example document.pdf */name?: string,
+    /* @example 2048576 */size?: number,
+    /* @example pdf */type?: string,
+    /* @example 2024-01-15 10:30 */createTime?: string,
+    /* @example 15 */downloadCount?: number,
+  }[];
+  folders?: {
+    /* @example 1 */id?: number,
+    /* @example 文档 */name?: string,
+    /* @example 15 */fileCount?: number,
+    /* @example 52428800 */size?: number,
+    /* @example 2024-01-01 */createTime?: string,
+  }[];
+  loading?: boolean;
+  selectedFile?: any;
+  searchKeyword?: string;
+  viewMode?: string;
+  uploadProgress?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    files: [
+      {
+        id: 1,
+        name: 'document.pdf',
+        size: 2048576,
+        type: 'pdf',
+        createTime: '2024-01-15 10:30',
+        downloadCount: 15,
+      },
+      {
+        id: 2,
+        name: 'image.png',
+        size: 1024000,
+        type: 'image',
+        createTime: '2024-01-14 15:20',
+        downloadCount: 23,
+      },
+      {
+        id: 3,
+        name: 'data.xlsx',
+        size: 512000,
+        type: 'excel',
+        createTime: '2024-01-13 09:00',
+        downloadCount: 8,
+      },
+      {
+        id: 4,
+        name: 'report.docx',
+        size: 1536000,
+        type: 'word',
+        createTime: '2024-01-12 16:45',
+        downloadCount: 12,
+      },
+      {
+        id: 5,
+        name: 'archive.zip',
+        size: 10485760,
+        type: 'archive',
+        createTime: '2024-01-11 11:30',
+        downloadCount: 5,
+      },
+    ],
+    folders: [
+      {
+        id: 1,
+        name: '文档',
+        fileCount: 15,
+        size: 52428800,
+        createTime: '2024-01-01',
+      },
+      {
+        id: 2,
+        name: '图片',
+        fileCount: 32,
+        size: 104857600,
+        createTime: '2024-01-01',
+      },
+      {
+        id: 3,
+        name: '音乐',
+        fileCount: 8,
+        size: 52428800,
+        createTime: '2024-01-05',
+      },
+    ],
+    loading: false,
+    selectedFile: null,
+    searchKeyword: '',
+    viewMode: 'grid',
+    uploadProgress: 0,
+  };
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  handleViewModeChange(mode) {
+    this.setState({
+      viewMode: mode,
+    });
+  }
+
+  handleFileClick(file) {
+    this.setState({
+      selectedFile: file,
+    });
+  }
+
+  handleFileDelete(fileId) {
+    this.setState({
+      files: this.state.files.filter(f => f.id !== fileId),
+    });
+  }
+
+  handleUpload(file) {
+    this.setState({
+      uploadProgress: 0,
+    });
+    const interval = setInterval(() => {
+      const progress = this.state.uploadProgress + 10;
+      if (progress >= 100) {
+        clearInterval(interval);
+        this.setState({
+          uploadProgress: 100,
+        });
+      } else {
+        this.setState({
+          uploadProgress: progress,
+        });
+      }
+    }, 200);
+  }
+
+  formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const {
+      files,
+      folders,
+      loading,
+      selectedFile,
+      searchKeyword,
+      viewMode,
+      uploadProgress,
+    } = this.state;
+
+    // 💀 死亡：变量声明 - 计算属性
+    // 💀 死亡：变量声明 - 计算属性
+    const totalFiles = files.length;
+    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const totalFolders = folders.length;
+    const avgFileSize = Math.round(totalSize / totalFiles);
+
+    // 💀 死亡：变量声明 - 过滤后的文件
+    // 💀 死亡：变量声明 - 过滤后的文件
+    const filteredFiles = files.filter(
+      file =>
+        file.name.includes(searchKeyword) || file.type.includes(searchKeyword)
+    );
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - 文件类型配置
+    // 💀 死亡：变量声明 - 文件类型配置
+    const fileTypeConfig = {
+      pdf: {
+        color: 'red',
+        icon: '📄',
+      },
+      image: {
+        color: 'green',
+        icon: '🖼️',
+      },
+      excel: {
+        color: 'green',
+        icon: '📊',
+      },
+      word: {
+        color: 'blue',
+        icon: '📝',
+      },
+      archive: {
+        color: 'orange',
+        icon: '📦',
+      },
+    };
+
+    // 💀 死亡：变量声明 - 树形数据
+    // 💀 死亡：变量声明 - 树形数据
+    const treeData = folders.map(folder => ({
+      key: folder.id,
+      title: folder.name,
+      children: [],
+    }));
+
+    // 💀 死亡：变量声明 - 表格列配置
+    // 💀 死亡：变量声明 - 表格列配置
+    const columns = [
+      {
+        title: '文件名',
+        dataIndex: 'name',
+        key: 'name',
+        render: text => <Text className="font-medium">{text}</Text>,
+      },
+      {
+        title: '大小',
+        dataIndex: 'size',
+        key: 'size',
+        render: size => <Text>{this.formatFileSize(size)}</Text>,
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        render: type => (
+          <Tag color={fileTypeConfig[type]?.color || 'gray'}>
+            {fileTypeConfig[type]?.icon || '📁'} {type}
+          </Tag>
+        ),
+      },
+      {
+        title: '下载次数',
+        dataIndex: 'downloadCount',
+        key: 'downloadCount',
+      },
+    ];
+
+    // 💀 死亡：变量声明 - JSX 片段函数
+    // 💀 死亡：变量声明 - JSX 片段函数
+    const fileCard = file => (
+      <Card
+        key={file.id}
+        className="hover:shadow-lg transition-shadow cursor-pointer"
+        onClick={() => this.handleFileClick(file)}
+      >
+        <View className="text-center">
+          <Text className="text-5xl mb-3 block">
+            {fileTypeConfig[file.type]?.icon || '📁'}
+          </Text>
+          <Text className="font-bold block truncate">{file.name}</Text>
+          <Text className="text-gray-500 text-sm block">
+            {this.formatFileSize(file.size)}
+          </Text>
+        </View>
+      </Card>
+    );
+
+    // 💀 死亡：变量声明 - 文件夹卡片
+    // 💀 死亡：变量声明 - 文件夹卡片
+    const folderCard = folder => (
+      <Card key={folder.id} className="hover:shadow-lg transition-shadow">
+        <View className="text-center">
+          <Text className="text-5xl mb-3 block">📁</Text>
+          <Text className="font-bold block">{folder.name}</Text>
+          <Text className="text-gray-500 text-sm block">
+            {folder.fileCount} 个文件
+          </Text>
+        </View>
+      </Card>
+    );
+
+    // 💀 死亡：变量声明 - 快捷操作
+    // 💀 死亡：变量声明 - 快捷操作
+    const quickActions = [
+      {
+        label: '上传',
+        icon: '📤',
+        action: () => this.handleUpload(null),
+      },
+      {
+        label: '新建文件夹',
+        icon: '📁+',
+        action: () => console.log('新建文件夹'),
+      },
+      {
+        label: '刷新',
+        icon: '🔄',
+        action: () => console.log('刷新'),
+      },
+    ];
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">文件管理器</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            文件和目录管理
+          </Text>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="gap-4 grid grid-cols-4">
+            <View className="text-[var(--center)] p-[16px] bg-[var(--blue-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--blue-600)]">
+                {totalFiles}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                文件总数
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--green-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--green-600)]">
+                {this.formatFileSize(totalSize)}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                总大小
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--orange-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--orange-600)]">
+                {totalFolders}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                文件夹
+              </Text>
+            </View>
+            <View className="text-[var(--center)] p-[16px] bg-[var(--purple-50)] rounded">
+              <Text className="text-3xl font-bold text-[var(--purple-600)]">
+                {this.formatFileSize(avgFileSize)}
+              </Text>
+              <Text className="block text-sm text-[#4b5563] mt-[4px]">
+                平均大小
+              </Text>
+            </View>
+          </View>
+        </Card>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Input
+                placeholder="搜索文件"
+                value={searchKeyword}
+                onChange={e => this.handleSearch(e.target.value)}
+                className=""
+              />
+              <View className="gap-2 flex">
+                <Button
+                  type={viewMode === 'grid' ? 'primary' : 'default'}
+                  onClick={() => this.handleViewModeChange('grid')}
+                >
+                  网格
+                </Button>
+                <Button
+                  type={viewMode === 'list' ? 'primary' : 'default'}
+                  onClick={() => this.handleViewModeChange('list')}
+                >
+                  列表
+                </Button>
+              </View>
+            </View>
+            <View className="gap-2 flex">
+              {quickActions.map((action, index) => (
+                <Button
+                  key={action.label}
+                  onClick={action.action}
+                >{`${action.icon}${action.label}`}</Button>
+              ))}
+            </View>
+          </View>
+        </Card>
+        {!!(viewMode === 'grid') && (
+          <Card className="mb-[24px]">
+            <Text className="block text-lg font-bold mb-[16px]">文件夹</Text>
+            <View className="gap-4 grid grid-cols-4">
+              {folders.map((folder, index) => (
+                <Text>{folderCard(folder)}</Text>
+              ))}
+            </View>
+          </Card>
+        )}
+        <Card>
+          <View className="flex items-center justify-between mb-[16px]">
+            <Text className="text-lg font-bold">文件列表</Text>
+            <Text className="text-[#6b7280]">
+              共{filteredFiles.length}个文件
+            </Text>
+          </View>
+          {!!(viewMode === 'grid') && (
+            <View className="gap-4 grid grid-cols-4">
+              {filteredFiles.map((file, index) => (
+                <Text>{fileCard(file)}</Text>
+              ))}
+            </View>
+          )}
+          {!(viewMode === 'grid') && (
+            <Table
+              columns={columns}
+              dataSource={filteredFiles}
+              rowKey="id"
+              onRow={record => ({
+                onClick: () => this.handleFileClick(record),
+              })}
+            />
+          )}
+        </Card>
+        {!!(uploadProgress > 0 && uploadProgress < 100) && (
+          <Card className="mt-[24px]">
+            <Text className="block mb-[8px]">上传中...</Text>
+            <Progress percent={uploadProgress} />
+          </Card>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;