workspace/code/file-preview/index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>G3File 基础示例</title>
  
  <script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.min.js"></script>
  
  <script type="text/javascript" src="./g3-file/language.js"></script>
  <script type="text/javascript" src="./g3-file/icon.js"></script>
  <script type="text/javascript" src="./g3-file/common.js"></script>
  <script type="text/javascript" src="./g3-file/index.js"></script>
  
  <link rel="stylesheet" href="./g3-file/index.css" />
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f7fa;
      min-height: 100vh;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      margin-bottom: 20px;
    }
    
    .header h1 {
      font-size: 20px;
      color: #1f2329;
      font-weight: 600;
    }
    
    .header p {
      font-size: 14px;
      color: #646a73;
      margin-top: 5px;
    }
    
    .file-container {
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <h1>G3File 文件管理组件</h1>
      <p>基础示例 - 支持文件上传、预览、下载、删除等功能</p>
    </div>
    <div id="fileContainer" class="file-container"></div>
  </div>

  <script>
    $(function() {
      $('#fileContainer').G3File({
        language: 'zh-CN',
        previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
        data: [
          {
            name: '项目需求文档.pdf',
            size: 2048000,
            uploadDate: '2024-01-15T10:30:00',
            url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg'
          },
          {
            name: '设计稿.png',
            size: 1536000,
            uploadDate: '2024-01-16T14:20:00',
            url: ''
          },
          {
            name: '数据报表.xlsx',
            size: 1024000,
            uploadDate: '2024-01-17T09:15:00',
            url: ''
          },
          {
            name: '会议记录.docx',
            size: 512000,
            uploadDate: '2024-01-18T16:45:00',
            url: 'http://118.89.70.199:9000/test/report.docx'
          }
        ],
        uploadConfig: {
          aliyun: {
            getAliyunKey: function() {
              return new Promise((resolve) => {
                setTimeout(() => {
                  resolve({
                    accessid: 'test-access-key',
                    callback: '',
                    dir: 'test/',
                    expire: Math.floor(Date.now() / 1000) + 3600,
                    host: 'http://example.com',
                    policy: 'test-policy',
                    signature: 'test-signature'
                  });
                }, 500);
              });
            }
          }
        },
        onUploadBefore: function(pendingFiles) {
          return new Promise((resolve) => {
            if (confirm('确定上传 ' + pendingFiles.length + ' 个文件吗？')) {
              resolve(true);
            } else {
              resolve(false);
            }
          });
        },
        onDeleteBefore: function(files) {
          return new Promise((resolve) => {
            if (confirm('确定删除 ' + files.length + ' 个文件吗？')) {
              resolve(true);
            } else {
              resolve(false);
            }
          });
        },
        customActionMenu: function(file) {
          return [
            {
              title: '审核',
              onClick: function(f) {
                alert('审核文件: ' + f.name);
              }
            },
            {
              title: '编辑',
              onClick: function(f) {
                alert('编辑文件: ' + f.name);
              }
            }
          ];
        }
      });
    });
  </script>
</body>

</html>