云存储管理

云存储管理模板用于管理云开发的云存储文件，支持筛选、上传、下载等操作。

# 功能特性

• 开箱即用：开箱即用，简单配置即可与已有业务对接。
• 网页 Web 端：以网页 Web 形式呈现，可交付给团队运营人员、第三方商家登录使用。
• 多账号登录：支持分配和管理账号，供多人团队使用。
• 低代码定制：内置低代码开发工具，可根据自身需求任意修改管理后台应用。
• 微信生态友好：内置小程序、微信支付、公众号、企业微信等多种 API 连接器，减轻接口对接的开发工作量。

# 快速上手

# 第 1 步：安装云模板

在云模板详情中点击 安装 按钮，等待安装完成

# 第 2 步：进入应用详情页操作

生成应用后，进入应用详情页，在详情页可以进行应用编辑等业务操作

# 模板概览

模板具有以下实体：

• 变量 3 个：
  • filterPath：当前的筛选条件
  • selectedFile：当前选中文件
  • toUploadFiles：将要上传的文件数组

# 读取文件列表的实现

前端使用「数据表格」组件，进行了简易的样式配置。

表格的数据源由自定义代码实现，使用了内置的 @cloudbase/manager-node ，代码如下：

'use strict';

const CloudBase = require('@cloudbase/manager-node');

module.exports = async (event, context) => {
  let { pageNo, pageSize, filterPath = '/' } = event;

  const app = CloudBase.init({
    envId: context.vars.TARGET_ENV, // 环境ID，
  });

  // 获取各功能模块
  const { storage } = app;

  // 列出当前环境云存储内的所有文件
  const res = await storage.listDirectoryFiles(filterPath);

  // 按页切分
  const records = res.slice((pageNo - 1) * pageSize, pageNo * pageSize);

  // 如果为空，直接返回
  if (records.length === 0) {
    return {
      records: [],
      total: 0,
    };
  }

  // 获取每个文件的临时链接
  const urls = await storage.getTemporaryUrl(records.map((item) => item.Key));
  records.forEach((item, index) => {
    item.Url = urls[index].url;
  });

  return {
    records: records,
    total: res.length,
  };
};

# 数据筛选的实现

1. 用户在文本框中输入筛选条件后，点击“筛选”按钮，筛选按钮将页面内的 filterPath 变量设置为文本框“input1”的输入值（$w.input1.value）。
2. 数据表格组件绑定了查询方法，把数据源入参 filterPath 设为了页面内变量 filterPath（$page.dataset.state.filterPath），因为变量发生变化，自动触发表格的查询。
3. 表格组件调用数据源“查询文件列表”方法，将最终的数据展示到页面上。

# 文件详情的实现

1. 用户点击表格中的“查看”按钮，将当前行记录的 Key 值，赋值到页面内变量 selectedFileKey 中
2. 页面右侧的数据详情组件，绑定了“查询文件信息”的方法，将数据源入参 key 设置为页面内变量 selectedFileKey（$page.dataset.state.selectedFileKey）。因为变量发生变化，自动触发数据详情组件的查询。