first edition

1 year ago · 9a0a502de2
commit 9a0a502de2
114 changed files with 13391 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,11 @@
 root = true
 [*]
 charset = utf-8
 end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = false
 trim_trailing_whitespace = true
 max_line_length = 80
 tab_width = 2
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,3 @@
 {
  "singleAttributePerLine": true
 }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,18 @@
 # Vue 3 + TypeScript + Vite
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 ## Recommended IDE Setup
 - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 ## Type Support For `.vue` Imports in TS
 TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
--- a/demo.html
+++ b/demo.html
@ -0,0 +1,58 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <link href="/src/frontend/assets/logo.png" rel="icon" type="image/png"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>Vite + Vue + TS</title>
 </head>
 <body>
 <div id="app">
  <button id="btn">Show File Manager</button>
 </div>
 <script type="module">
  const apiUrl = 'https://wfs.yaojiankang.top'
  const artifact = 'genesis'
  import {showFileManager} from 'https://wfs.yaojiankang.top/wfs.js?t=12334'
  const show = (async () => {
    const response = await fetch(apiUrl + "/login", {
      method: "POST",
      body: new URLSearchParams({
        name: 'root',
        password: 'root',
        artifact
      }),
    })
    const res = await response.json();
    if (!res.ok) {
      throw new Error(res.msg);
    }
    const accessToken = res.data.token
    showFileManager({
      artifact,
      accessToken,
      apiUrl,
      select: 'single',
      onOpen() {
        console.log("open")
      },
      onError(error) {
        console.log('error', error)
      },
      onDismiss() {
        console.log('dismiss')
      },
      onConfirm(files) {
        console.log('files', files)
      }
    })
  })
  document.querySelector('#btn').addEventListener('click', show)
 </script>
 </body>
 </html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <link href="/src/frontend/assets/logo.png" rel="icon" type="image/png"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>Vite + Vue + TS</title>
 </head>
 <body>
 <div id="app"></div>
 <script src="/src/main.ts" type="module"></script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,32 @@
 {
  "name": "wfs",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vueuse/core": "^10.7.2",
    "dom-align": "^1.12.4",
    "hls.js": "^1.4.14",
    "viewerjs": "^1.11.6",
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
    "@tailwindcss/forms": "^0.5.7",
    "@types/node": "^20.10.4",
    "@vitejs/plugin-basic-ssl": "^1.0.2",
    "@vitejs/plugin-vue": "^4.5.0",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 };
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,64 @@
 <script lang="ts" setup>
 import {onMounted, ref} from 'vue'
 import {installIcons} from "./frontend/widgets/VIcons.ts";
 import UiContainer from "./frontend/widgets/UiContainer.vue";
 const loading = ref(false)
 const apiUrl = 'https://zmf.yaojiankang.top'
 const artifact = 'genesis'
 const login = async () => {
  loading.value = true
  const response = await fetch(apiUrl + "/login", {
    method: "POST",
    body: new URLSearchParams({
      name: 'root',
      password: 'root',
      artifact
    }),
  })
  const res = await response.json();
  if (!res.ok) {
    throw new Error(res.msg);
  }
  const accessToken = res.data.token
  import('./frontend').then(({showFileManager}) => {
    showFileManager({
      artifact,
      accessToken,
      apiUrl,
      select: 'multiple',
      onOpen() {
        loading.value = false
      },
      onSelect(files: CloudFile[]) {
        console.log(files)
      },
      onFail(error: string) {
        console.log(error)
      },
      onClose() {
        console.log("closed")
      }
    })
  })
  return {
    artifact,
    accessToken,
    apiUrl,
  }
 }
 onMounted(() => {
  login()
  installIcons(document.body)
 })
 </script>
 <template>
  <UiContainer v-if="0" :setup="login"/>
 </template>
--- a/src/backend/api.ts
+++ b/src/backend/api.ts
@ -0,0 +1,203 @@
 import {$on} from '../shared'
 import {useSocket} from './socket'
 let apiUrl: string | undefined;
 let accessToken: string | undefined;
 let artifact: string | undefined;
 export async function configApi(cfg: Partial<ApiConfig>) {
  if (
    cfg.accessToken !== accessToken ||
    cfg.apiUrl !== apiUrl ||
    cfg.artifact !== artifact
  ) {
    await ajax(cfg.apiUrl + "/" + cfg.artifact, {
      headers: {"Authorization": `Bearer ${cfg.accessToken}`}
    })
    accessToken = cfg.accessToken;
    artifact = cfg.artifact;
    apiUrl = cfg.apiUrl;
    useSocket(cfg)
  }
 }
 export async function ajax<T>(url: string, init: RequestInit = {}): Promise<T> {
  return new Promise<T>(async (resolve, reject) => {
    if (accessToken) {
      const headers = new Headers(init.headers);
      headers.set("Authorization", `Bearer ${accessToken}`);
      init.headers = headers;
    }
    try {
      const uri = (apiUrl ?? '') + url;
      const response = await fetch(uri, init);
      const res = await response.json();
      if (
        res != null &&
        typeof res === "object" &&
        !Array.isArray(res) &&
        "ok" in res &&
        "msg" in res &&
        typeof res.ok === "boolean" &&
        typeof res.msg === "string"
      ) {
        if (res.ok) {
          resolve(res.data);
        } else {
          reject(new Error(res.msg));
        }
      } else {
        reject(new Error("服务器异常"));
      }
    } catch (err) {
      // 服务器返回的有可能不是 JSON 数据
      if (err instanceof SyntaxError) {
        reject(new Error("服务器异常"));
      } else if (err instanceof Error && err.message === "Failed to fetch") {
        reject(new Error("服务器异常"));
      } else {
        reject(err);
      }
    }
  });
 }
 export interface UploadArgs {
  skip: false;
  token: string;
  key: string;
 }
 export interface UploadSkip {
  skip: true;
 }
 /**
 * 初始化任务
 */
 export function initiateUploadApi(
  fileMime: string,
  fileHash: string,
  signal: AbortSignal,
 ): Promise<UploadSkip | UploadArgs> {
  const url = `/${artifact}/objects/initiate`;
  const body = new URLSearchParams({fileMime, fileHash});
  const init = {method: "POST", body, signal};
  return ajax<UploadSkip | UploadArgs>(url, init);
 }
 export function completeUploadApi(
  fileHash: string,
  fileNames: string[],
  directories: number[],
  signal: AbortSignal,
 ) {
  const targets: Map<number, Set<string>> = new Map();
  for (let i = 0; i < directories.length; i++) {
    const dirid = directories[i];
    const dirs = targets.get(dirid) ?? new Set();
    if (!fileNames[i]) return Promise.reject("参数错误");
    dirs.add(fileNames[i]);
    targets.set(dirid, dirs);
  }
  const body = new URLSearchParams({fileHash});
  targets.forEach((names, dir) => {
    names.forEach((name) => {
      body.append("directoryId", `${dir}`);
      body.append("fileName", name);
    });
  });
  const url = `/${artifact}/objects/complete`;
  return ajax<
    Array<{
      id: TaskId;
      directoryId: number;
      fileName: string;
      fileHash: string;
      createdAt: string;
      updatedAt: string;
    }>
  >(url, {method: "POST", body, signal});
 }
 interface SimulateQiniuCallbackOptions {
  key: string;
  name: string;
  mime: string;
  md5: FileHash;
  size: number;
 }
 export function simulateQiniuCallback(
  data: SimulateQiniuCallbackOptions,
  signal: AbortSignal,
 ) {
  const url = `/${artifact}/objects/uploaded`;
  const body = JSON.stringify({...data, etag: "<etag>", bucket: "<bucket>"});
  return ajax<any>(url, {
    method: "POST",
    body,
    signal,
    headers: {"Content-Type": "application/json"},
  });
 }
 // 新建文件夹
 $on('dir', 'create', (data: NewDirEventData): Promise<CloudDirectory> => {
  const {title, pid = 0} = data
  const uri = `/${artifact}/directories`;
  const body = new URLSearchParams({title});
  if (pid > 0) body.set("parentId", `${pid}`);
  return ajax<CloudDirectory>(uri, {method: "POST", body});
 })
 // 所有文件夹
 $on('dir', 'all', (): Promise<CloudDirectory[]> => {
  return ajax<CloudDirectory[]>(`/${artifact}/directories`);
 })
 // 删除文件夹
 $on('dir', 'delete', (id: number): Promise<boolean> => {
  const url = `/${artifact}/directories/${id}`;
  return ajax<boolean>(url, {method: "DELETE"});
 })
 // 重命名文件夹
 $on('dir', 'rename', (data: RenameDirEventData): Promise<CloudDirectory> => {
  const url = `/${artifact}/directories/${data.id}`;
  const body = new URLSearchParams({title: data.title});
  return ajax<CloudDirectory>(url, {method: "PUT", body});
 })
 // 文件重命名
 $on('file', 'rename', async (data: RenameFileEventData): Promise<CloudFile> => {
  const url = `/${artifact}/files/${data.id}`;
  const body = new URLSearchParams({name: data.name});
  return await ajax(url, {method: "PUT", body});
 })
 // 删除文件
 $on('file', 'delete', (files: number[] | number) => {
  let url = `/${artifact}/files`;
  if (!Array.isArray(files)) {
    url += `/${files}`;
  } else {
    const body = new URLSearchParams();
    files.forEach((file) => body!.append("files", `${file}`));
    url += "?" + body
  }
  return ajax<void>(url, {method: "DELETE"});
 })
 // 文件列表（分页）
 $on('file', 'list', (data: FilesEventData) => {
  const url = `/${artifact}/files`;
  const query = new URLSearchParams();
  query.set("page", `${data.page}`)
  query.set("limit", `${data.limit}`)
  if (data.directoryId != null) query.set("directoryId", `${data.directoryId}`);
  if (data.mime != null) query.set("mime", data.mime);
  return ajax<FilesEventResult>(url + "?" + query.toString());
 })
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@ -0,0 +1,73 @@
 import {$on} from '../shared'
 import {configApi} from './api'
 import {
  cleanReadTasks,
  getReadTasks,
  pauseReadTask,
  Reader,
  removeReadTask,
  resumeReadTask,
 } from "./reader";
 import {handleNetworkEvent} from "./socket";
 import {
  cleanUploadTasks,
  getUploadTasks,
  pauseUploadTask,
  removeUploadTask,
  resumeUploadTask,
 } from "./uploader";
 // 取消前端任务
 async function cancel(data: TaskEventData): Promise<void> {
  const {fileHash, taskId} = data;
  await pauseReadTask(taskId);
  await pauseUploadTask(fileHash, taskId);
 }
 // 恢复任务
 async function resume(data: TaskEventData): Promise<void> {
  const {fileHash, taskId} = data;
  await resumeReadTask(taskId);
  await resumeUploadTask(fileHash, taskId);
 }
 // 清理任务
 async function cleanup() {
  await cleanReadTasks();
  await cleanUploadTasks();
 }
 // 创建任务
 function create(data: TaskCreateData) {
  Reader.create(data.file, data.dirid);
 }
 // 删除任务
 async function remove(data: TaskEventData): Promise<void> {
  const {fileHash, taskId} = data;
  await removeReadTask(taskId);
  await removeUploadTask(fileHash, taskId);
 }
 function allTasks(): Task[] {
  return [
    ...getReadTasks(),
    ...getUploadTasks(),
  ]
 }
 // 配置接口事件
 $on("cfg", "init", configApi);
 // 监听前端任务事件
 $on("task", "all", allTasks)
 $on("task", "cancel", cancel);
 $on("task", "cleanup", cleanup);
 $on("task", "create", create);
 $on("task", "remove", remove);
 $on("task", "resume", resume);
 // 网络变化事件
 $on("net", "status", handleNetworkEvent);
--- a/src/backend/qiniu/api/index.ts
+++ b/src/backend/qiniu/api/index.ts
@ -0,0 +1,173 @@
 import * as utils from '../utils'
 import {normalizeUploadConfig} from '../utils'
 import {Config, InternalConfig, UploadInfo} from '../upload'
 interface UpHosts {
  data: {
    up: {
      acc: {
        main: string[]
        backup: string[]
      }
    }
  }
 }
 export async function getUpHosts(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise<UpHosts> {
  const params = new URLSearchParams({ak: accessKey, bucket: bucketName})
  const url = `${protocol}://api.qiniu.com/v2/query?${params}`
  return utils.request(url, {method: 'GET'})
 }
 /**
 * @param bucket 空间名
 * @param key 目标文件名
 * @param uploadInfo 上传信息
 */
 function getBaseUrl(bucket: string, key: string | null | undefined, uploadInfo: UploadInfo) {
  const {url, id} = uploadInfo
  return `${url}/buckets/${bucket}/objects/${key != null ? utils.urlSafeBase64Encode(key) : '~'}/uploads/${id}`
 }
 export interface InitPartsData {
  /** 该文件的上传 id， 后续该文件其他各个块的上传，已上传块的废弃，已上传块的合成文件，都需要该 id */
  uploadId: string
  /** uploadId 的过期时间 */
  expireAt: number
 }
 /**
 * @param token 上传鉴权凭证
 * @param bucket 上传空间
 * @param key 目标文件名
 * @param uploadUrl 上传地址
 */
 export function initUploadParts(
  token: string,
  bucket: string,
  key: string | null | undefined,
  uploadUrl: string
 ): utils.Response<InitPartsData> {
  const url = `${uploadUrl}/buckets/${bucket}/objects/${key != null ? utils.urlSafeBase64Encode(key) : '~'}/uploads`
  return utils.request<InitPartsData>(
    url,
    {
      method: 'POST',
      headers: utils.getAuthHeaders(token)
    }
  )
 }
 export interface UploadChunkData {
  etag: string
  md5: string
 }
 /**
 * @param token 上传鉴权凭证
 * @param index 当前 chunk 的索引
 * @param uploadInfo 上传信息
 * @param options 请求参数
 */
 export function uploadChunk(
  token: string,
  key: string | null | undefined,
  index: number,
  uploadInfo: UploadInfo,
  options: Partial<utils.RequestOptions & { md5: string }>
 ): utils.Response<UploadChunkData> {
  const bucket = utils.getPutPolicy(token).bucketName
  const url = getBaseUrl(bucket, key, uploadInfo) + `/${index}`
  const headers = utils.getHeadersForChunkUpload(token)
  if (options.md5) headers['Content-MD5'] = options.md5
  return utils.request<UploadChunkData>(url, {
    ...options,
    method: 'PUT',
    headers
  })
 }
 export type UploadCompleteData = any
 /**
 * @param token 上传鉴权凭证
 * @param key 目标文件名
 * @param uploadInfo 上传信息
 * @param options 请求参数
 */
 export function uploadComplete(
  token: string,
  key: string | null | undefined,
  uploadInfo: UploadInfo,
  options: Partial<utils.RequestOptions>
 ): utils.Response<UploadCompleteData> {
  const bucket = utils.getPutPolicy(token).bucketName
  const url = getBaseUrl(bucket, key, uploadInfo)
  return utils.request<UploadCompleteData>(url, {
    ...options,
    method: 'POST',
    headers: utils.getHeadersForMkFile(token)
  })
 }
 /**
 * @param token 上传鉴权凭证
 * @param key 目标文件名
 * @param uploadInfo 上传信息
 */
 export function deleteUploadedChunks(
  token: string,
  key: string | null | undefined,
  uploadinfo: UploadInfo
 ): utils.Response<void> {
  const bucket = utils.getPutPolicy(token).bucketName
  const url = getBaseUrl(bucket, key, uploadinfo)
  return utils.request(
    url,
    {
      method: 'DELETE',
      headers: utils.getAuthHeaders(token)
    }
  )
 }
 /**
 * @param  {string} url
 * @param  {FormData} data
 * @param  {Partial<utils.RequestOptions>} options
 * @returns Promise
 * @description 直传接口
 */
 export function direct(
  url: string,
  data: FormData,
  options: Partial<utils.RequestOptions>
 ): Promise<UploadCompleteData> {
  return utils.request<UploadCompleteData>(url, {
    method: 'POST',
    body: data,
    ...options
  })
 }
 export type UploadUrlConfig = Partial<Pick<Config, 'upprotocol' | 'uphost' | 'region' | 'useCdnDomain'>>
 /**
 * @param  {UploadUrlConfig} config
 * @param  {string} token
 * @returns Promise
 * @description 获取上传 url
 */
 export async function getUploadUrl(_config: UploadUrlConfig, token: string): Promise<string> {
  const config = normalizeUploadConfig(_config)
  const protocol = config.upprotocol
  if (config.uphost.length > 0) {
    return `${protocol}://${config.uphost[0]}`
  }
  const putPolicy = utils.getPutPolicy(token)
  const res = await getUpHosts(putPolicy.assessKey, putPolicy.bucketName, protocol)
  const hosts = res.data.up.acc.main
  return `${protocol}://${hosts[0]}`
 }
--- a/src/backend/qiniu/config/index.ts
+++ b/src/backend/qiniu/config/index.ts
@ -0,0 +1 @@
 export * from './region'
--- a/src/backend/qiniu/config/region.ts
+++ b/src/backend/qiniu/config/region.ts
@ -0,0 +1,37 @@
 /** 上传区域 */
 export const region = {
  z0: 'z0',
  z1: 'z1',
  z2: 'z2',
  na0: 'na0',
  as0: 'as0',
  cnEast2: 'cn-east-2'
 } as const
 /** 上传区域对应的 host */
 export const regionUphostMap = {
  [region.z0]: {
    srcUphost: ['up.qiniup.com'],
    cdnUphost: ['upload.qiniup.com']
  },
  [region.z1]: {
    srcUphost: ['up-z1.qiniup.com'],
    cdnUphost: ['upload-z1.qiniup.com']
  },
  [region.z2]: {
    srcUphost: ['up-z2.qiniup.com'],
    cdnUphost: ['upload-z2.qiniup.com']
  },
  [region.na0]: {
    srcUphost: ['up-na0.qiniup.com'],
    cdnUphost: ['upload-na0.qiniup.com']
  },
  [region.as0]: {
    srcUphost: ['up-as0.qiniup.com'],
    cdnUphost: ['upload-as0.qiniup.com']
  },
  [region.cnEast2]: {
    srcUphost: ['up-cn-east-2.qiniup.com'],
    cdnUphost: ['upload-cn-east-2.qiniup.com']
  }
 } as const
--- a/src/backend/qiniu/errors/index.ts
+++ b/src/backend/qiniu/errors/index.ts
@ -0,0 +1,62 @@
 export enum QiniuErrorName {
  // 输入错误
  InvalidFile = 'InvalidFile',
  InvalidToken = 'InvalidToken',
  InvalidMetadata = 'InvalidMetadata',
  InvalidChunkSize = 'InvalidChunkSize',
  InvalidCustomVars = 'InvalidCustomVars',
  NotAvailableUploadHost = 'NotAvailableUploadHost',
  // 缓存相关
  ReadCacheFailed = 'ReadCacheFailed',
  InvalidCacheData = 'InvalidCacheData',
  WriteCacheFailed = 'WriteCacheFailed',
  RemoveCacheFailed = 'RemoveCacheFailed',
  // 图片压缩模块相关
  GetCanvasContextFailed = 'GetCanvasContextFailed',
  UnsupportedFileType = 'UnsupportedFileType',
  // 运行环境相关
  FileReaderReadFailed = 'FileReaderReadFailed',
  NotAvailableXMLHttpRequest = 'NotAvailableXMLHttpRequest',
  InvalidProgressEventTarget = 'InvalidProgressEventTarget',
  // 请求错误
  RequestError = 'RequestError'
 }
 export class QiniuError implements Error {
  public stack: string | undefined
  constructor(public name: QiniuErrorName, public message: string) {
    this.stack = new Error().stack
  }
 }
 export class QiniuRequestError extends QiniuError {
  /**
   * @description 标记当前的 error 类型是一个 QiniuRequestError
   * @deprecated 下一个大版本将会移除，不推荐使用，推荐直接使用 instanceof 进行判断
   */
  public isRequestError = true
  /**
   * @description 发生错误时服务端返回的错误信息，如果返回不是一个合法的 json、则该字段为 undefined
   */
  public data?: any
  constructor(public code: number, public reqId: string, message: string, data?: any) {
    super(QiniuErrorName.RequestError, message)
    this.data = data
  }
 }
 /**
 * @description 由于跨域、证书错误、断网、host 解析失败、系统拦截等原因导致的错误
 */
 export class QiniuNetworkError extends QiniuRequestError {
  constructor(message: string, reqId = '') {
    super(0, reqId, message)
  }
 }
--- a/src/backend/qiniu/image/index.ts
+++ b/src/backend/qiniu/image/index.ts
@ -0,0 +1,195 @@
 import { request, urlSafeBase64Encode } from '../utils'
 export interface ImageViewOptions {
  mode: number
  format?: string
  w?: number
  h?: number
  q?: number
 }
 export interface ImageWatermark {
  image: string
  mode: number
  fontsize?: number
  dissolve?: number
  dx?: number
  dy?: number
  gravity?: string
  text?: string
  font?: string
  fill?: string
 }
 export interface ImageMogr2 {
  'auto-orient'?: boolean
  strip?: boolean
  thumbnail?: number
  crop?: number
  gravity?: number
  format?: number
  blur?: number
  quality?: number
  rotate?: number
 }
 type Pipeline =
  | (ImageWatermark & { fop: 'watermark' })
  | (ImageViewOptions & { fop: 'imageView2' })
  | (ImageMogr2 & { fop: 'imageMogr2' })
 export interface Entry {
  domain: string
  key: string
 }
 function getImageUrl(key: string, domain: string) {
  key = encodeURIComponent(key)
  if (domain.slice(domain.length - 1) !== '/') {
    domain += '/'
  }
  return domain + key
 }
 export function imageView2(op: ImageViewOptions, key?: string, domain?: string) {
  if (!/^\d$/.test(String(op.mode))) {
    throw 'mode should be number in imageView2'
  }
  const { mode, w, h, q, format } = op
  if (!w && !h) {
    throw 'param w and h is empty in imageView2'
  }
  let imageUrl = 'imageView2/' + encodeURIComponent(mode)
  imageUrl += w ? '/w/' + encodeURIComponent(w) : ''
  imageUrl += h ? '/h/' + encodeURIComponent(h) : ''
  imageUrl += q ? '/q/' + encodeURIComponent(q) : ''
  imageUrl += format ? '/format/' + encodeURIComponent(format) : ''
  if (key && domain) {
    imageUrl = getImageUrl(key, domain) + '?' + imageUrl
  }
  return imageUrl
 }
 // invoke the imageMogr2 api of Qiniu
 export function imageMogr2(op: ImageMogr2, key?: string, domain?: string) {
  const autoOrient = op['auto-orient']
  const { thumbnail, strip, gravity, crop, quality, rotate, format, blur } = op
  let imageUrl = 'imageMogr2'
  imageUrl += autoOrient ? '/auto-orient' : ''
  imageUrl += thumbnail ? '/thumbnail/' + encodeURIComponent(thumbnail) : ''
  imageUrl += strip ? '/strip' : ''
  imageUrl += gravity ? '/gravity/' + encodeURIComponent(gravity) : ''
  imageUrl += quality ? '/quality/' + encodeURIComponent(quality) : ''
  imageUrl += crop ? '/crop/' + encodeURIComponent(crop) : ''
  imageUrl += rotate ? '/rotate/' + encodeURIComponent(rotate) : ''
  imageUrl += format ? '/format/' + encodeURIComponent(format) : ''
  imageUrl += blur ? '/blur/' + encodeURIComponent(blur) : ''
  if (key && domain) {
    imageUrl = getImageUrl(key, domain) + '?' + imageUrl
  }
  return imageUrl
 }
 // invoke the watermark api of Qiniu
 export function watermark(op: ImageWatermark, key?: string, domain?: string) {
  const mode = op.mode
  if (!mode) {
    throw "mode can't be empty in watermark"
  }
  let imageUrl = 'watermark/' + mode
  if (mode !== 1 && mode !== 2) {
    throw 'mode is wrong'
  }
  if (mode === 1) {
    const image = op.image
    if (!image) {
      throw "image can't be empty in watermark"
    }
    imageUrl += image ? '/image/' + urlSafeBase64Encode(image) : ''
  }
  if (mode === 2) {
    const { text, font, fontsize, fill } = op
    if (!text) {
      throw "text can't be empty in watermark"
    }
    imageUrl += text ? '/text/' + urlSafeBase64Encode(text) : ''
    imageUrl += font ? '/font/' + urlSafeBase64Encode(font) : ''
    imageUrl += fontsize ? '/fontsize/' + fontsize : ''
    imageUrl += fill ? '/fill/' + urlSafeBase64Encode(fill) : ''
  }
  const { dissolve, gravity, dx, dy } = op
  imageUrl += dissolve ? '/dissolve/' + encodeURIComponent(dissolve) : ''
  imageUrl += gravity ? '/gravity/' + encodeURIComponent(gravity) : ''
  imageUrl += dx ? '/dx/' + encodeURIComponent(dx) : ''
  imageUrl += dy ? '/dy/' + encodeURIComponent(dy) : ''
  if (key && domain) {
    imageUrl = getImageUrl(key, domain) + '?' + imageUrl
  }
  return imageUrl
 }
 // invoke the imageInfo api of Qiniu
 export function imageInfo(key: string, domain: string) {
  const url = getImageUrl(key, domain) + '?imageInfo'
  return request(url, { method: 'GET' })
 }
 // invoke the exif api of Qiniu
 export function exif(key: string, domain: string) {
  const url = getImageUrl(key, domain) + '?exif'
  return request(url, { method: 'GET' })
 }
 export function pipeline(arr: Pipeline[], key?: string, domain?: string) {
  const isArray = Object.prototype.toString.call(arr) === '[object Array]'
  let option: Pipeline
  let errOp = false
  let imageUrl = ''
  if (isArray) {
    for (let i = 0, len = arr.length; i < len; i++) {
      option = arr[i]
      if (!option.fop) {
        throw "fop can't be empty in pipeline"
      }
      switch (option.fop) {
        case 'watermark':
          imageUrl += watermark(option) + '|'
          break
        case 'imageView2':
          imageUrl += imageView2(option) + '|'
          break
        case 'imageMogr2':
          imageUrl += imageMogr2(option) + '|'
          break
        default:
          errOp = true
          break
      }
      if (errOp) {
        throw 'fop is wrong in pipeline'
      }
    }
    if (key && domain) {
      imageUrl = getImageUrl(key, domain) + '?' + imageUrl
      const length = imageUrl.length
      if (imageUrl.slice(length - 1) === '|') {
        imageUrl = imageUrl.slice(0, length - 1)
      }
    }
    return imageUrl
  }
  throw "pipeline's first param should be array"
 }
--- a/src/backend/qiniu/index.ts
+++ b/src/backend/qiniu/index.ts
@ -0,0 +1,22 @@
 export {
  QiniuErrorName,
  QiniuError,
  QiniuRequestError,
  QiniuNetworkError
 } from './errors'
 export {imageMogr2, watermark, imageInfo, exif, pipeline} from './image'
 export {deleteUploadedChunks, getUploadUrl} from './api'
 export {
  upload,
  type UploadProgress
 } from './upload'
 export {region} from './config'
 export {
  // compressImage,
  // type CompressResult,
  urlSafeBase64Encode,
  urlSafeBase64Decode,
  getHeadersForMkFile,
  getHeadersForChunkUpload
 } from './utils'
--- a/src/backend/qiniu/logger/index.ts
+++ b/src/backend/qiniu/logger/index.ts
@ -0,0 +1,73 @@
 import {reportV3, V3LogInfo} from './report-v3'
 export type LogLevel = 'INFO' | 'WARN' | 'ERROR' | 'OFF'
 export default class Logger {
  private static id = 0
  // 为每个类分配一个 id
  // 用以区分不同的上传任务
  private id = ++Logger.id
  constructor(
    private token: string,
    private disableReport = true,
    private level: LogLevel = 'OFF',
    private prefix = 'UPLOAD'
  ) {
  }
  /**
   * @param  {V3LogInfo} data 上报的数据。
   * @param  {boolean} retry 重试次数，可选，默认为 3。
   * @description 向服务端上报统计信息。
   */
  report(data: V3LogInfo, retry?: number) {
    if (this.disableReport) return
    try {
      reportV3(this.token, data, retry)
    } catch (error) {
      this.warn(error)
    }
  }
  /**
   * 输出 info 级别的调试信息。
   * @param  {unknown[]} args
   */
  info(...args: unknown[]) {
    const allowLevel: LogLevel[] = ['INFO']
    if (allowLevel.includes(this.level)) {
      // eslint-disable-next-line no-console
      console.log(this.getPrintPrefix('INFO'), ...args)
    }
  }
  /**
   * 输出 warn 级别的调试信息。
   * @param  {unknown[]} args
   */
  warn(...args: unknown[]) {
    const allowLevel: LogLevel[] = ['INFO', 'WARN']
    if (allowLevel.includes(this.level)) {
      // eslint-disable-next-line no-console
      console.warn(this.getPrintPrefix('WARN'), ...args)
    }
  }
  /**
   * 输出 error 级别的调试信息。
   * @param  {unknown[]} args
   */
  error(...args: unknown[]) {
    const allowLevel: LogLevel[] = ['INFO', 'WARN', 'ERROR']
    if (allowLevel.includes(this.level)) {
      // eslint-disable-next-line no-console
      console.error(this.getPrintPrefix('ERROR'), ...args)
    }
  }
  private getPrintPrefix(level: LogLevel) {
    return `Qiniu-JS-SDK [${level}][${this.prefix}#${this.id}]:`
  }
 }
--- a/src/backend/qiniu/logger/report-v3.ts
+++ b/src/backend/qiniu/logger/report-v3.ts
@ -0,0 +1,48 @@
 import { createXHR, getAuthHeaders } from '../utils'
 export interface V3LogInfo {
  code: number
  reqId: string
  host: string
  remoteIp: string
  port: string
  duration: number
  time: number
  bytesSent: number
  upType: 'jssdk-h5'
  size: number
 }
 /**
 * @param  {string} token 上传使用的 token
 * @param  {V3LogInfo} data 上报的统计数据
 * @param  {number} retry 重试的次数，默认值 3
 * @description v3 版本的日志上传接口，参考文档 https://github.com/qbox/product/blob/master/kodo/uplog.md#%E7%89%88%E6%9C%AC-3。
 */
 export function reportV3(token: string, data: V3LogInfo, retry = 3) {
  const xhr = createXHR()
  xhr.open('POST', 'https://uplog.qbox.me/log/3')
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
  xhr.setRequestHeader('Authorization', getAuthHeaders(token).Authorization)
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status !== 200 && retry > 0) {
      reportV3(token, data, retry - 1)
    }
  }
  // 顺序参考：https://github.com/qbox/product/blob/master/kodo/uplog.md#%E7%89%88%E6%9C%AC-3
  const stringifyData = [
    data.code || '',
    data.reqId || '',
    data.host || '',
    data.remoteIp || '',
    data.port || '',
    data.duration || '',
    data.time || '',
    data.bytesSent || '',
    data.upType || '',
    data.size || ''
  ].join(',')
  xhr.send(stringifyData)
 }
--- a/src/backend/qiniu/upload/base.ts
+++ b/src/backend/qiniu/upload/base.ts
@ -0,0 +1,340 @@
 import {QiniuError, QiniuErrorName, QiniuRequestError} from '../errors'
 import Logger, {LogLevel} from '../logger'
 import {region} from '../config'
 import * as utils from '../utils'
 import {Host, HostPool} from './hosts'
 export const DEFAULT_CHUNK_SIZE = 4 // 单位 MB
 // code 信息地址 https://developer.qiniu.com/kodo/3928/error-responses
 export const FREEZE_CODE_LIST = [0, 502, 503, 504, 599] // 将会冻结当前 host 的 code
 export const RETRY_CODE_LIST = [...FREEZE_CODE_LIST, 612] // 会进行重试的 code
 /** 上传文件的资源信息配置 */
 export interface Extra {
  /** 文件原文件名 */
  fname: string
  /** 用来放置自定义变量 */
  customVars?: { [key: string]: string }
  /** 自定义元信息 */
  metadata?: { [key: string]: string }
  /** 文件类型设置 */
  mimeType?: string //
 }
 export interface InternalConfig {
  /** 是否开启 cdn 加速 */
  useCdnDomain: boolean
  /** 是否开启服务端校验 */
  checkByServer: boolean
  /** 是否对分片进行 md5校验 */
  checkByMD5: boolean
  /** 强制直传 */
  forceDirect: boolean
  /** 上传失败后重试次数 */
  retryCount: number
  /** 自定义上传域名 */
  uphost: string[]
  /** 自定义分片上传并发请求量 */
  concurrentRequestLimit: number
  /** 分片大小，单位为 MB */
  chunkSize: number
  /** 上传域名协议 */
  upprotocol: 'https' | 'http'
  /** 上传区域 */
  region?: typeof region[keyof typeof region]
  /** 是否禁止统计日志上报 */
  disableStatisticsReport: boolean
  /** 设置调试日志输出模式，默认 `OFF`，不输出任何日志 */
  debugLogLevel?: LogLevel
 }
 /** 上传任务的配置信息 */
 export interface Config extends Partial<Omit<InternalConfig, 'upprotocol' | 'uphost'>> {
  /** 上传域名协议 */
  upprotocol?: InternalConfig['upprotocol'] | 'https:' | 'http:'
  /** 自定义上传域名 */
  uphost?: InternalConfig['uphost'] | string
 }
 export interface UploadOptions {
  file: File
  key: string | null | undefined
  token: string
  config: InternalConfig
  putExtra?: Partial<Extra>
 }
 export interface UploadInfo {
  id: string
  url: string
 }
 /** 传递给外部的上传进度信息 */
 export interface UploadProgress {
  total: ProgressCompose
  uploadInfo?: UploadInfo
  chunks?: ProgressCompose[]
 }
 export interface UploadHandlers {
  onData: (data: UploadProgress) => void
  onError: (err: QiniuError) => void
  onComplete: (res: any) => void
 }
 export interface Progress {
  total: number
  loaded: number
 }
 export interface ProgressCompose {
  size: number
  loaded: number
  percent: number
  fromCache?: boolean
 }
 export type XHRHandler = (xhr: XMLHttpRequest) => void
 const GB = 1024 ** 3
 export default abstract class Base {
  protected config: InternalConfig
  protected putExtra: Extra
  protected aborted = false
  protected retryCount = 0
  protected uploadHost?: Host
  protected xhrList: XMLHttpRequest[] = []
  protected file: File
  protected key: string | null | undefined
  protected token: string
  protected assessKey: string = ''
  protected bucketName: string = ''
  protected uploadAt?: number
  protected progress?: UploadProgress
  protected onData: (data: UploadProgress) => void
  protected onError: (err: QiniuError) => void
  protected onComplete: (res: any) => void
  constructor(
    options: UploadOptions,
    handlers: UploadHandlers,
    protected hostPool: HostPool,
    protected logger: Logger
  ) {
    this.config = options.config
    logger.info('config inited.', this.config)
    this.putExtra = {
      fname: '',
      ...options.putExtra
    }
    logger.info('putExtra inited.', this.putExtra)
    this.key = options.key
    this.file = options.file
    this.token = options.token
    this.onData = handlers.onData
    this.onError = handlers.onError
    this.onComplete = handlers.onComplete
    try {
      const putPolicy = utils.getPutPolicy(this.token)
      this.bucketName = putPolicy.bucketName
      this.assessKey = putPolicy.assessKey
    } catch (error) {
      logger.error('get putPolicy from token failed.', error)
      this.onError(error as QiniuError)
    }
  }
  /**
   * @returns Promise 返回结果与上传最终状态无关，状态信息请通过 [Subscriber] 获取。
   * @description 上传文件，状态信息请通过 [Subscriber] 获取。
   */
  public async putFile(): Promise<void> {
    this.aborted = false
    if (!this.putExtra.fname) {
      this.logger.info('use file.name as fname.')
      this.putExtra.fname = this.file.name
    }
    if (this.file.size > 10000 * GB) {
      this.handleError(new QiniuError(
        QiniuErrorName.InvalidFile,
        'file size exceed maximum value 10000G'
      ))
      return
    }
    if (this.putExtra.customVars) {
      if (!utils.isCustomVarsValid(this.putExtra.customVars)) {
        this.handleError(new QiniuError(
          QiniuErrorName.InvalidCustomVars,
          'customVars key should start with x:'
        ))
        return
      }
    }
    if (this.putExtra.metadata) {
      if (!utils.isMetaDataValid(this.putExtra.metadata)) {
        this.handleError(new QiniuError(
          QiniuErrorName.InvalidMetadata,
          'metadata key should start with x-qn-meta-'
        ))
        return
      }
    }
    try {
      this.uploadAt = new Date().getTime()
      await this.checkAndUpdateUploadHost()
      const result = await this.run()
      this.onComplete(result.data)
      this.checkAndUnfreezeHost()
      this.sendLog(result.reqId, 200)
      return
    } catch (err) {
      if (this.aborted) {
        this.logger.warn('upload is aborted.')
        this.sendLog('', -2)
        return
      }
      this.clear()
      this.logger.error(err)
      if (err instanceof QiniuRequestError) {
        this.sendLog(err.reqId, err.code)
        // 检查并冻结当前的 host
        this.checkAndFreezeHost(err)
        const notReachRetryCount = ++this.retryCount <= this.config.retryCount
        const needRetry = RETRY_CODE_LIST.includes(err.code)
        // 以下条件满足其中之一则会进行重新上传：
        // 1. 满足 needRetry 的条件且 retryCount 不为 0
        // 2. uploadId 无效时在 resume 里会清除本地数据，并且这里触发重新上传
        if (needRetry && notReachRetryCount) {
          this.logger.warn(`error auto retry: ${this.retryCount}/${this.config.retryCount}.`)
          this.putFile()
          return
        }
      }
      this.onError(err as QiniuError)
    }
  }
  public stop() {
    this.logger.info('aborted.')
    this.clear()
    this.aborted = true
  }
  public addXhr(xhr: XMLHttpRequest) {
    this.xhrList.push(xhr)
  }
  public getProgressInfoItem(loaded: number, size: number, fromCache?: boolean): ProgressCompose {
    return {
      size,
      loaded,
      percent: loaded / size * 100,
      ...(fromCache == null ? {} : {fromCache})
    }
  }
  /**
   * @returns utils.Response<any>
   * @description 子类通过该方法实现具体的任务处理
   */
  protected abstract run(): utils.Response<any>
  // 检查并更新 upload host
  protected async checkAndUpdateUploadHost() {
    // 从 hostPool 中获取一个可用的 host 挂载在 this
    this.logger.info('get available upload host.')
    const newHost = await this.hostPool.getUp(
      this.assessKey,
      this.bucketName,
      this.config.upprotocol
    )
    if (newHost == null) {
      throw new QiniuError(
        QiniuErrorName.NotAvailableUploadHost,
        'no available upload host.'
      )
    }
    if (this.uploadHost != null && this.uploadHost.host !== newHost.host) {
      this.logger.warn(`host switches from ${this.uploadHost.host} to ${newHost.host}.`)
    } else {
      this.logger.info(`use host ${newHost.host}.`)
    }
    this.uploadHost = newHost
  }
  // 检查并解冻当前的 host
  protected checkAndUnfreezeHost() {
    this.logger.info('check unfreeze host.')
    if (this.uploadHost != null && this.uploadHost.isFrozen()) {
      this.logger.warn(`${this.uploadHost.host} will be unfrozen.`)
      this.uploadHost.unfreeze()
    }
  }
  // 检查并更新冻结当前的 host
  private checkAndFreezeHost(error: QiniuError) {
    this.logger.info('check freeze host.')
    if (error instanceof QiniuRequestError && this.uploadHost != null) {
      if (FREEZE_CODE_LIST.includes(error.code)) {
        this.logger.warn(`${this.uploadHost.host} will be temporarily frozen.`)
        this.uploadHost.freeze()
      }
    }
  }
  private handleError(error: QiniuError) {
    this.logger.error(error.message)
    this.onError(error)
  }
  private clear() {
    this.xhrList.forEach(xhr => {
      xhr.onreadystatechange = null
      xhr.abort()
    })
    this.xhrList = []
    this.logger.info('cleanup uploading xhr.')
  }
  private sendLog(reqId: string, code: number) {
    this.logger.report({
      code,
      reqId,
      remoteIp: '',
      upType: 'jssdk-h5',
      size: this.file.size,
      time: Math.floor(this.uploadAt! / 1000),
      port: utils.getPortFromUrl(this.uploadHost?.getUrl()),
      host: utils.getDomainFromUrl(this.uploadHost?.getUrl()),
      bytesSent: this.progress ? this.progress.total.loaded : 0,
      duration: Math.floor((new Date().getTime() - this.uploadAt!) / 1000)
    })
  }
 }
--- a/src/backend/qiniu/upload/direct.ts
+++ b/src/backend/qiniu/upload/direct.ts
@ -0,0 +1,70 @@
 import { CRC32 } from '../utils/crc32'
 import { direct } from '../api'
 import Base from './base'
 export default class Direct extends Base {
  protected async run() {
    this.logger.info('start run Direct.')
    const formData = new FormData()
    formData.append('file', this.file)
    formData.append('token', this.token)
    if (this.key != null) {
      formData.append('key', this.key)
    }
    formData.append('fname', this.putExtra.fname)
    if (this.config.checkByServer) {
      const crcSign = await CRC32.file(this.file)
      formData.append('crc32', crcSign.toString())
    }
    if (this.putExtra.customVars) {
      this.logger.info('init customVars.')
      const { customVars } = this.putExtra
      Object.keys(customVars).forEach(key => formData.append(key, customVars[key].toString()))
      this.logger.info('customVars inited.')
    }
    if (this.putExtra.metadata) {
      this.logger.info('init metadata.')
      const { metadata } = this.putExtra
      Object.keys(metadata).forEach(key => formData.append(key, metadata[key].toString()))
    }
    this.logger.info('formData inited.')
    const result = await direct(this.uploadHost!.getUrl(), formData, {
      onProgress: data => {
        this.updateDirectProgress(data.loaded, data.total)
      },
      onCreate: xhr => this.addXhr(xhr)
    })
    this.logger.info('Direct progress finish.')
    this.finishDirectProgress()
    return result
  }
  private updateDirectProgress(loaded: number, total: number) {
    // 当请求未完成时可能进度会达到100，所以total + 1来防止这种情况出现
    this.progress = { total: this.getProgressInfoItem(loaded, total + 1) }
    this.onData(this.progress)
  }
  private finishDirectProgress() {
    // 在某些浏览器环境下，xhr 的 progress 事件无法被触发，progress 为 null，这里 fake 下
    if (!this.progress) {
      this.logger.warn('progress is null.')
      this.progress = { total: this.getProgressInfoItem(this.file.size, this.file.size) }
      this.onData(this.progress)
      return
    }
    const { total } = this.progress
    this.progress = { total: this.getProgressInfoItem(total.loaded + 1, total.size) }
    this.onData(this.progress)
  }
 }
--- a/src/backend/qiniu/upload/hosts.ts
+++ b/src/backend/qiniu/upload/hosts.ts
@ -0,0 +1,134 @@
 import {getUpHosts} from '../api'
 import {InternalConfig} from './base'
 /**
 * @description 解冻时间，key 是 host，value 为解冻时间
 */
 const unfreezeTimeMap = new Map<string, number>()
 export class Host {
  constructor(public host: string, public protocol: InternalConfig['upprotocol']) {
  }
  /**
   * @description 当前 host 是否为冻结状态
   */
  isFrozen() {
    const currentTime = new Date().getTime()
    const unfreezeTime = unfreezeTimeMap.get(this.host)
    return unfreezeTime != null && unfreezeTime >= currentTime
  }
  /**
   * @param  {number} time 单位秒，默认 20s
   * @description 冻结该 host 对象，该 host 将在指定时间内不可用
   */
  freeze(time = 20) {
    const unfreezeTime = new Date().getTime() + (time * 1000)
    unfreezeTimeMap.set(this.host, unfreezeTime)
  }
  /**
   * @description 解冻该 host
   */
  unfreeze() {
    unfreezeTimeMap.delete(this.host)
  }
  /**
   * @description 获取当前 host 的完整 url
   */
  getUrl() {
    return `${this.protocol}://${this.host}`
  }
  /**
   * @description 获取解冻时间
   */
  getUnfreezeTime() {
    return unfreezeTimeMap.get(this.host)
  }
 }
 export class HostPool {
  /**
   * @description 缓存的 host 表，以 bucket 和 accessKey 作为 key
   */
  private cachedHostsMap = new Map<string, Host[]>()
  /**
   * @param  {string[]} initHosts
   * @description 如果在构造时传入 initHosts，则该 host 池始终使用传入的 initHosts 做为可用的数据
   */
  constructor(private initHosts: string[] = []) {
  }
  /**
   * @param  {string} accessKey
   * @param  {string} bucketName
   * @param  {InternalConfig['upprotocol']} protocol
   * @returns  {Promise<Host | null>}
   * @description 获取一个可用的上传 Host，排除已冻结的
   */
  public async getUp(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise<Host | null> {
    await this.refresh(accessKey, bucketName, protocol)
    const cachedHostList = this.cachedHostsMap.get(`${accessKey}@${bucketName}`) || []
    if (cachedHostList.length === 0) {
      return null
    }
    const availableHostList = cachedHostList.filter(host => !host.isFrozen())
    if (availableHostList.length > 0) {
      return availableHostList[0]
    }
    // 无可用的，去取离解冻最近的 host
    const priorityQueue = cachedHostList
      .slice()
      .sort((hostA, hostB) => (hostA.getUnfreezeTime() || 0) - (hostB.getUnfreezeTime() || 0))
    return priorityQueue[0]
  }
  /**
   * @param  {string} accessKey
   * @param  {string} bucketName
   * @param  {string[]} hosts
   * @param  {InternalConfig['upprotocol']} protocol
   * @returns  {void}
   * @description 注册可用 host
   */
  private register(accessKey: string, bucketName: string, hosts: string[], protocol: InternalConfig['upprotocol']): void {
    this.cachedHostsMap.set(
      `${accessKey}@${bucketName}`,
      hosts.map(host => new Host(host, protocol))
    )
  }
  /**
   * @param  {string} accessKey
   * @param  {string} bucketName
   * @param  {InternalConfig['upprotocol']} protocol
   * @returns  {Promise<void>}
   * @description 刷新最新的 host 数据，如果用户在构造时该类时传入了 host 或者已经存在缓存则不会发起请求
   */
  private async refresh(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise<void> {
    const cachedHostList = this.cachedHostsMap.get(`${accessKey}@${bucketName}`) || []
    if (cachedHostList.length > 0) return
    if (this.initHosts.length > 0) {
      this.register(accessKey, bucketName, this.initHosts, protocol)
      return
    }
    const response = await getUpHosts(accessKey, bucketName, protocol)
    if (response?.data != null) {
      const stashHosts: string[] = [
        ...(response.data.up?.acc?.main || []),
        ...(response.data.up?.acc?.backup || [])
      ]
      this.register(accessKey, bucketName, stashHosts, protocol)
    }
  }
 }
--- a/src/backend/qiniu/upload/index.ts
+++ b/src/backend/qiniu/upload/index.ts
@ -0,0 +1,86 @@
 import Resume from './resume'
 import Direct from './direct'
 import Logger from '../logger'
 import {UploadCompleteData} from '../api'
 import {IObserver, MB, normalizeUploadConfig, Observable} from '../utils'
 import {QiniuError, QiniuNetworkError, QiniuRequestError} from '../errors'
 import {
  Config,
  Extra,
  UploadHandlers,
  UploadOptions,
  UploadProgress
 } from './base'
 import {HostPool} from './hosts'
 export * from './base'
 export * from './resume'
 export type {
  UploadProgress
 }
 export function createUploadManager(
  options: UploadOptions,
  handlers: UploadHandlers,
  hostPool: HostPool,
  logger: Logger
 ) {
  if (options.config && options.config.forceDirect) {
    logger.info('ues forceDirect mode.')
    return new Direct(options, handlers, hostPool, logger)
  }
  if (options.file.size > 4 * MB) {
    logger.info('file size over 4M, use Resume.')
    return new Resume(options, handlers, hostPool, logger)
  }
  logger.info('file size less or equal than 4M, use Direct.')
  return new Direct(options, handlers, hostPool, logger)
 }
 /**
 * @param file 上传文件
 * @param key 目标文件名
 * @param token 上传凭证
 * @param putExtra 上传文件的相关资源信息配置
 * @param config 上传任务的配置
 * @returns 返回用于上传任务的可观察对象
 */
 export function upload(
  file: File,
  key: string | null | undefined,
  token: string,
  putExtra?: Partial<Extra>,
  config?: Config
 ): Observable<UploadProgress, QiniuError | QiniuRequestError | QiniuNetworkError, UploadCompleteData> {
  // 为每个任务创建单独的 Logger
  const logger = new Logger(token, config?.disableStatisticsReport, config?.debugLogLevel, file.name)
  const options: UploadOptions = {
    file,
    key,
    token,
    putExtra,
    config: normalizeUploadConfig(config, logger)
  }
  // 创建 host 池
  const hostPool = new HostPool(options.config.uphost)
  return new Observable((observer: IObserver<
    UploadProgress,
    QiniuError | QiniuRequestError | QiniuNetworkError,
    UploadCompleteData
  >) => {
    const manager = createUploadManager(options, {
      onData: (data: UploadProgress) => observer.next(data),
      onError: (err: QiniuError) => observer.error(err),
      onComplete: (res: any) => observer.complete(res)
    }, hostPool, logger)
    manager.putFile()
    return manager.stop.bind(manager)
  })
 }
--- a/src/backend/qiniu/upload/resume.ts
+++ b/src/backend/qiniu/upload/resume.ts
@ -0,0 +1,314 @@
 import {
  initUploadParts,
  uploadChunk,
  UploadChunkData,
  uploadComplete
 } from '../api'
 import {QiniuError, QiniuErrorName, QiniuRequestError} from '../errors'
 import * as utils from '../utils'
 import Base, {Extra, Progress, UploadInfo} from './base'
 export interface UploadedChunkStorage extends UploadChunkData {
  size: number
 }
 export interface ChunkLoaded {
  mkFileProgress: 0 | 1
  chunks: number[]
 }
 export interface ChunkInfo {
  chunk: Blob
  index: number
 }
 export interface LocalInfo {
  data: UploadedChunkStorage[]
  id: string
 }
 export interface ChunkPart {
  etag: string
  partNumber: number
 }
 export interface UploadChunkBody extends Extra {
  parts: ChunkPart[]
 }
 /** 是否为正整数 */
 function isPositiveInteger(n: number) {
  const re = /^[1-9]\d*$/
  return re.test(String(n))
 }
 export default class Resume extends Base {
  /**
   * @description 文件的分片 chunks
   */
  private chunks: Blob[] = []
  /**
   * @description 使用缓存的 chunks
   */
  private usedCacheList: boolean[] = []
  /**
   * @description 来自缓存的上传信息
   */
  private cachedUploadedList: UploadedChunkStorage[] = []
  /**
   * @description 当前上传过程中已完成的上传信息
   */
  private uploadedList: UploadedChunkStorage[] = []
  /**
   * @description 当前上传片进度信息
   */
  private loaded?: ChunkLoaded
  /**
   * @description 当前上传任务的 id
   */
  private uploadId?: string
  /**
   * @returns  {Promise<ResponseSuccess<any>>}
   * @description 实现了 Base 的 run 接口，处理具体的分片上传事务，并抛出过程中的异常。
   */
  protected async run() {
    this.logger.info('start run Resume.')
    if (!this.config.chunkSize || !isPositiveInteger(this.config.chunkSize)) {
      throw new QiniuError(
        QiniuErrorName.InvalidChunkSize,
        'chunkSize must be a positive integer'
      )
    }
    if (this.config.chunkSize > 1024) {
      throw new QiniuError(
        QiniuErrorName.InvalidChunkSize,
        'chunkSize maximum value is 1024'
      )
    }
    await this.initBeforeUploadChunks()
    const pool = new utils.Pool(
      async (chunkInfo: ChunkInfo) => {
        if (this.aborted) {
          pool.abort()
          throw new Error('pool is aborted')
        }
        await this.uploadChunk(chunkInfo)
      },
      this.config.concurrentRequestLimit
    )
    let mkFileResponse = null
    const localKey = this.getLocalKey()
    const uploadChunks = this.chunks.map((chunk, index) => pool.enqueue({
      chunk,
      index
    }))
    try {
      await Promise.all(uploadChunks)
      mkFileResponse = await this.mkFileReq()
    } catch (error) {
      // uploadId 无效，上传参数有误（多由于本地存储信息的 uploadId 失效）
      if (error instanceof QiniuRequestError && (error.code === 612 || error.code === 400)) {
        utils.removeLocalFileInfo(localKey, this.logger)
      }
      throw error
    }
    // 上传成功，清理本地缓存数据
    utils.removeLocalFileInfo(localKey, this.logger)
    return mkFileResponse
  }
  private async uploadChunk(chunkInfo: ChunkInfo) {
    const {index, chunk} = chunkInfo
    const cachedInfo = this.cachedUploadedList[index]
    this.logger.info(`upload part ${index}, cache:`, cachedInfo)
    const shouldCheckMD5 = this.config.checkByMD5
    const reuseSaved = () => {
      this.usedCacheList[index] = true
      this.updateChunkProgress(chunk.size, index)
      this.uploadedList[index] = cachedInfo
      this.updateLocalCache()
    }
    // FIXME: 至少判断一下 size
    if (cachedInfo && !shouldCheckMD5) {
      reuseSaved()
      return
    }
    const md5 = await utils.computeMd5(chunk)
    this.logger.info('computed part md5.', md5)
    if (cachedInfo && md5 === cachedInfo.md5) {
      reuseSaved()
      return
    }
    // 没有使用缓存设置标记为 false
    this.usedCacheList[index] = false
    const onProgress = (data: Progress) => {
      this.updateChunkProgress(data.loaded, index)
    }
    const requestOptions = {
      body: chunk,
      md5: this.config.checkByServer ? md5 : undefined,
      onProgress,
      onCreate: (xhr: XMLHttpRequest) => this.addXhr(xhr)
    }
    this.logger.info(`part ${index} start uploading.`)
    const response = await uploadChunk(
      this.token,
      this.key,
      chunkInfo.index + 1,
      this.getUploadInfo(),
      requestOptions
    )
    this.logger.info(`part ${index} upload completed.`)
    // 在某些浏览器环境下，xhr 的 progress 事件无法被触发，progress 为 null，这里在每次分片上传完成后都手动更新下 progress
    onProgress({
      loaded: chunk.size,
      total: chunk.size
    })
    this.uploadedList[index] = {
      etag: response.data.etag,
      md5: response.data.md5,
      size: chunk.size
    }
    this.updateLocalCache()
  }
  private async mkFileReq() {
    const data: UploadChunkBody = {
      parts: this.uploadedList.map((value, index) => ({
        etag: value.etag,
        // 接口要求 index 需要从 1 开始，所以需要整体 + 1
        partNumber: index + 1
      })),
      fname: this.putExtra.fname,
      ...this.putExtra.mimeType && {mimeType: this.putExtra.mimeType},
      ...this.putExtra.customVars && {customVars: this.putExtra.customVars},
      ...this.putExtra.metadata && {metadata: this.putExtra.metadata}
    }
    this.logger.info('parts upload completed, make file.', data)
    const result = await uploadComplete(
      this.token,
      this.key,
      this.getUploadInfo(),
      {
        onCreate: xhr => this.addXhr(xhr),
        body: JSON.stringify(data)
      }
    )
    this.logger.info('finish Resume Progress.')
    this.updateMkFileProgress(1)
    return result
  }
  private async initBeforeUploadChunks() {
    this.uploadedList = []
    this.usedCacheList = []
    const cachedInfo = utils.getLocalFileInfo(this.getLocalKey(), this.logger)
    // 分片必须和当时使用的 uploadId 配套，所以断点续传需要把本地存储的 uploadId 拿出来
    // 假如没有 cachedInfo 本地信息并重新获取 uploadId
    if (!cachedInfo) {
      this.logger.info('init upload parts from api.')
      const res = await initUploadParts(
        this.token,
        this.bucketName,
        this.key,
        this.uploadHost!.getUrl()
      )
      this.logger.info(`initd upload parts of id: ${res.data.uploadId}.`)
      this.uploadId = res.data.uploadId
      this.cachedUploadedList = []
    } else {
      const infoMessage = [
        'resume upload parts from local cache,',
        `total ${cachedInfo.data.length} part,`,
        `id is ${cachedInfo.id}.`
      ]
      this.logger.info(infoMessage.join(' '))
      this.cachedUploadedList = cachedInfo.data
      this.uploadId = cachedInfo.id
    }
    this.chunks = utils.getChunks(this.file, this.config.chunkSize)
    this.loaded = {
      mkFileProgress: 0,
      chunks: this.chunks.map(_ => 0)
    }
    this.notifyResumeProgress()
  }
  private getUploadInfo(): UploadInfo {
    return {
      id: this.uploadId!,
      url: this.uploadHost!.getUrl()
    }
  }
  private getLocalKey() {
    return utils.createLocalKey(this.file.name, this.key, this.file.size)
  }
  private updateLocalCache() {
    utils.setLocalFileInfo(this.getLocalKey(), {
      id: this.uploadId!,
      data: this.uploadedList
    }, this.logger)
  }
  private updateChunkProgress(loaded: number, index: number) {
    this.loaded!.chunks[index] = loaded
    this.notifyResumeProgress()
  }
  private updateMkFileProgress(progress: 0 | 1) {
    this.loaded!.mkFileProgress = progress
    this.notifyResumeProgress()
  }
  private notifyResumeProgress() {
    this.progress = {
      total: this.getProgressInfoItem(
        utils.sum(this.loaded!.chunks) + this.loaded!.mkFileProgress,
        // FIXME: 不准确的 fileSize
        this.file.size + 1 // 防止在 complete 未调用的时候进度显示 100%
      ),
      chunks: this.chunks.map((chunk, index) => {
        const fromCache = this.usedCacheList[index]
        return this.getProgressInfoItem(this.loaded!.chunks[index], chunk.size, fromCache)
      }),
      uploadInfo: {
        id: this.uploadId!,
        url: this.uploadHost!.getUrl()
      }
    }
    this.onData(this.progress!)
  }
 }
--- a/src/backend/qiniu/utils/base64.ts
+++ b/src/backend/qiniu/utils/base64.ts
@ -0,0 +1,274 @@
 /* eslint-disable */
 // https://github.com/locutusjs/locutus/blob/master/src/php/xml/utf8_encode.js
 function utf8Encode(argString: string) {
  // http://kevin.vanzonneveld.net
  // +   original by: Webtoolkit.info (http://www.webtoolkit.info/)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: sowberry
  // +    tweaked by: Jack
  // +   bugfixed by: Onno Marsman
  // +   improved by: Yves Sucaet
  // +   bugfixed by: Onno Marsman
  // +   bugfixed by: Ulrich
  // +   bugfixed by: Rafal Kukawski
  // +   improved by: kirilloid
  // +   bugfixed by: kirilloid
  // *     example 1: this.utf8Encode('Kevin van Zonneveld')
  // *     returns 1: 'Kevin van Zonneveld'
  if (argString === null || typeof argString === 'undefined') {
    return ''
  }
  let string = argString + '' // .replace(/\r\n/g, '\n').replace(/\r/g, '\n')
  let utftext = '',
    start,
    end,
    stringl = 0
  start = end = 0
  stringl = string.length
  for (let n = 0; n < stringl; n++) {
    let c1 = string.charCodeAt(n)
    let enc = null
    if (c1 < 128) {
      end++
    } else if (c1 > 127 && c1 < 2048) {
      enc = String.fromCharCode((c1 >> 6) | 192, (c1 & 63) | 128)
    } else if ((c1 & 0xf800 ^ 0xd800) > 0) {
      enc = String.fromCharCode(
        (c1 >> 12) | 224,
        ((c1 >> 6) & 63) | 128,
        (c1 & 63) | 128
      )
    } else {
      // surrogate pairs
      if ((c1 & 0xfc00 ^ 0xd800) > 0) {
        throw new RangeError('Unmatched trail surrogate at ' + n)
      }
      let c2 = string.charCodeAt(++n)
      if ((c2 & 0xfc00 ^ 0xdc00) > 0) {
        throw new RangeError('Unmatched lead surrogate at ' + (n - 1))
      }
      c1 = ((c1 & 0x3ff) << 10) + (c2 & 0x3ff) + 0x10000
      enc = String.fromCharCode(
        (c1 >> 18) | 240,
        ((c1 >> 12) & 63) | 128,
        ((c1 >> 6) & 63) | 128,
        (c1 & 63) | 128
      )
    }
    if (enc !== null) {
      if (end > start) {
        utftext += string.slice(start, end)
      }
      utftext += enc
      start = end = n + 1
    }
  }
  if (end > start) {
    utftext += string.slice(start, stringl)
  }
  return utftext
 }
 // https://github.com/locutusjs/locutus/blob/master/src/php/xml/utf8_decode.js
 function utf8Decode(strData: string) {
  // eslint-disable-line camelcase
  //  discuss at: https://locutus.io/php/utf8_decode/
  // original by: Webtoolkit.info (https://www.webtoolkit.info/)
  //    input by: Aman Gupta
  //    input by: Brett Zamir (https://brett-zamir.me)
  // improved by: Kevin van Zonneveld (https://kvz.io)
  // improved by: Norman "zEh" Fuchs
  // bugfixed by: hitwork
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Kevin van Zonneveld (https://kvz.io)
  // bugfixed by: kirilloid
  // bugfixed by: w35l3y (https://www.wesley.eti.br)
  //   example 1: utf8_decode('Kevin van Zonneveld')
  //   returns 1: 'Kevin van Zonneveld'
  const tmpArr = []
  let i = 0
  let c1 = 0
  let seqlen = 0
  strData += ''
  while (i < strData.length) {
    c1 = strData.charCodeAt(i) & 0xFF
    seqlen = 0
    // https://en.wikipedia.org/wiki/UTF-8#Codepage_layout
    if (c1 <= 0xBF) {
      c1 = (c1 & 0x7F)
      seqlen = 1
    } else if (c1 <= 0xDF) {
      c1 = (c1 & 0x1F)
      seqlen = 2
    } else if (c1 <= 0xEF) {
      c1 = (c1 & 0x0F)
      seqlen = 3
    } else {
      c1 = (c1 & 0x07)
      seqlen = 4
    }
    for (let ai = 1; ai < seqlen; ++ai) {
      c1 = ((c1 << 0x06) | (strData.charCodeAt(ai + i) & 0x3F))
    }
    if (seqlen === 4) {
      c1 -= 0x10000
      tmpArr.push(String.fromCharCode(0xD800 | ((c1 >> 10) & 0x3FF)))
      tmpArr.push(String.fromCharCode(0xDC00 | (c1 & 0x3FF)))
    } else {
      tmpArr.push(String.fromCharCode(c1))
    }
    i += seqlen
  }
  return tmpArr.join('')
 }
 function base64Encode(data: any) {
  // http://kevin.vanzonneveld.net
  // +   original by: Tyler Akins (http://rumkin.com)
  // +   improved by: Bayron Guevara
  // +   improved by: Thunder.m
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Pellentesque Malesuada
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // -    depends on: this.utf8Encode
  // *     example 1: this.base64Encode('Kevin van Zonneveld')
  // *     returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
  // mozilla has this native
  // - but breaks in 2.0.0.12!
  // if (typeof this.window['atob'] == 'function') {
  //    return atob(data)
  // }
  let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
  let o1,
    o2,
    o3,
    h1,
    h2,
    h3,
    h4,
    bits,
    i = 0,
    ac = 0,
    enc = '',
    tmp_arr = []
  if (!data) {
    return data
  }
  data = utf8Encode(data + '')
  do {
    // pack three octets into four hexets
    o1 = data.charCodeAt(i++)
    o2 = data.charCodeAt(i++)
    o3 = data.charCodeAt(i++)
    bits = (o1 << 16) | (o2 << 8) | o3
    h1 = (bits >> 18) & 0x3f
    h2 = (bits >> 12) & 0x3f
    h3 = (bits >> 6) & 0x3f
    h4 = bits & 0x3f
    // use hexets to index into b64, and append result to encoded string
    tmp_arr[ac++] =
      b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4)
  } while (i < data.length)
  enc = tmp_arr.join('')
  switch (data.length % 3) {
    case 1:
      enc = enc.slice(0, -2) + '=='
      break
    case 2:
      enc = enc.slice(0, -1) + '='
      break
  }
  return enc
 }
 function base64Decode(data: string) {
  // http://kevin.vanzonneveld.net
  // +   original by: Tyler Akins (http://rumkin.com)
  // +   improved by: Thunder.m
  // +      input by: Aman Gupta
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Onno Marsman
  // +   bugfixed by: Pellentesque Malesuada
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // *     example 1: base64_decode('S2V2aW4gdmFuIFpvbm5ldmVsZA==')
  // *     returns 1: 'Kevin van Zonneveld'
  // mozilla has this native
  // - but breaks in 2.0.0.12!
  // if (typeof this.window['atob'] == 'function') {
  //    return atob(data)
  // }
  let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
  let o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
    ac = 0,
    dec = '',
    tmp_arr = []
  if (!data) {
    return data
  }
  data += ''
  do { // unpack four hexets into three octets using index points in b64
    h1 = b64.indexOf(data.charAt(i++))
    h2 = b64.indexOf(data.charAt(i++))
    h3 = b64.indexOf(data.charAt(i++))
    h4 = b64.indexOf(data.charAt(i++))
    bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
    o1 = bits >> 16 & 0xff
    o2 = bits >> 8 & 0xff
    o3 = bits & 0xff
    if (h3 === 64) {
      tmp_arr[ac++] = String.fromCharCode(o1)
    } else if (h4 === 64) {
      tmp_arr[ac++] = String.fromCharCode(o1, o2)
    } else {
      tmp_arr[ac++] = String.fromCharCode(o1, o2, o3)
    }
  } while (i < data.length)
  dec = tmp_arr.join('')
  return utf8Decode(dec)
 }
 export function urlSafeBase64Encode(v: any) {
  v = base64Encode(v)
  // 参考 https://tools.ietf.org/html/rfc4648#section-5
  return v.replace(/\//g, '_').replace(/\+/g, '-')
 }
 export function urlSafeBase64Decode(v: any) {
  v = v.replace(/_/g, '/').replace(/-/g, '+')
  return base64Decode(v)
 }
--- a/src/backend/qiniu/utils/compress.ts
+++ b/src/backend/qiniu/utils/compress.ts
@ -0,0 +1,218 @@
 // import {QiniuError, QiniuErrorName} from '../errors'
 //
 // import {createObjectURL} from './helper'
 //
 // export interface CompressOptions {
 //   quality?: number
 //   noCompressIfLarger?: boolean
 //   maxWidth?: number
 //   maxHeight?: number
 // }
 //
 // export interface Dimension {
 //   width?: number
 //   height?: number
 // }
 //
 // export interface CompressResult {
 //   dist: Blob | File
 //   width: number
 //   height: number
 // }
 //
 // const mimeTypes = {
 //   PNG: 'image/png',
 //   JPEG: 'image/jpeg',
 //   WEBP: 'image/webp',
 //   BMP: 'image/bmp'
 // } as const
 //
 // const maxSteps = 4
 // const scaleFactor = Math.log(2)
 // // @ts-ignore
 // const supportMimeTypes = Object.keys(mimeTypes).map(type => mimeTypes[type])
 // const defaultType = mimeTypes.JPEG
 //
 // type MimeKey = keyof typeof mimeTypes
 //
 // function isSupportedType(type: string): type is typeof mimeTypes[MimeKey] {
 //   return supportMimeTypes.includes(type)
 // }
 //
 // class Compress {
 //   private outputType: string
 //   private config: CompressOptions
 //
 //   constructor(private file: File, config: CompressOptions) {
 //     this.outputType = this.file.type
 //     this.config = {
 //       quality: 0.92,
 //       noCompressIfLarger: false,
 //       ...config
 //     }
 //   }
 //
 //   async process(): Promise<CompressResult> {
 //     this.outputType = this.file.type
 //     const srcDimension: Dimension = {}
 //     if (!isSupportedType(this.file.type)) {
 //       throw new QiniuError(
 //         QiniuErrorName.UnsupportedFileType,
 //         `unsupported file type: ${this.file.type}`
 //       )
 //     }
 //
 //     const originImage = await this.getOriginImage()
 //     const canvas = await this.getCanvas(originImage)
 //     let scale = 1
 //     if (this.config.maxWidth) {
 //       scale = Math.min(1, this.config.maxWidth / canvas.width)
 //     }
 //     if (this.config.maxHeight) {
 //       scale = Math.min(1, scale, this.config.maxHeight / canvas.height)
 //     }
 //     srcDimension.width = canvas.width
 //     srcDimension.height = canvas.height
 //
 //     const scaleCanvas = await this.doScale(canvas, scale)
 //     const distBlob = this.toBlob(scaleCanvas)
 //     if (distBlob.size > this.file.size && this.config.noCompressIfLarger) {
 //       return {
 //         dist: this.file,
 //         width: srcDimension.width,
 //         height: srcDimension.height
 //       }
 //     }
 //
 //     return {
 //       dist: distBlob,
 //       width: scaleCanvas.width,
 //       height: scaleCanvas.height
 //     }
 //   }
 //
 //   clear(ctx: CanvasRenderingContext2D, width: number, height: number) {
 //     // jpeg 没有 alpha 通道，透明区间会被填充成黑色，这里把透明区间填充为白色
 //     if (this.outputType === defaultType) {
 //       ctx.fillStyle = '#fff'
 //       ctx.fillRect(0, 0, width, height)
 //     } else {
 //       ctx.clearRect(0, 0, width, height)
 //     }
 //   }
 //
 //   /** 通过 file 初始化 image 对象 */
 //   getOriginImage(): Promise<HTMLImageElement> {
 //     return new Promise((resolve, reject) => {
 //       const url = createObjectURL(this.file)
 //       const img = new Image()
 //       img.onload = () => {
 //         resolve(img)
 //       }
 //       img.onerror = () => {
 //         reject('image load error')
 //       }
 //       img.src = url
 //     })
 //   }
 //
 //   getCanvas(img: HTMLImageElement): Promise<HTMLCanvasElement> {
 //     return new Promise((resolve, reject) => {
 //       const canvas = document.createElement('canvas')
 //       const context = canvas.getContext('2d')
 //
 //       if (!context) {
 //         reject(new QiniuError(
 //           QiniuErrorName.GetCanvasContextFailed,
 //           'context is null'
 //         ))
 //         return
 //       }
 //
 //       const {width, height} = img
 //       canvas.height = height
 //       canvas.width = width
 //
 //       this.clear(context, width, height)
 //       context.drawImage(img, 0, 0)
 //       resolve(canvas)
 //     })
 //   }
 //
 //   async doScale(source: HTMLCanvasElement, scale: number) {
 //     if (scale === 1) {
 //       return source
 //     }
 //     // 不要一次性画图，通过设定的 step 次数，渐进式的画图，这样可以增加图片的清晰度，防止一次性画图导致的像素丢失严重
 //     const sctx = source.getContext('2d')
 //     const steps = Math.min(maxSteps, Math.ceil((1 / scale) / scaleFactor))
 //
 //     const factor = scale ** (1 / steps)
 //
 //     const mirror = document.createElement('canvas')
 //     const mctx = mirror.getContext('2d')
 //
 //     let {width, height} = source
 //     const originWidth = width
 //     const originHeight = height
 //     mirror.width = width
 //     mirror.height = height
 //     if (!mctx || !sctx) {
 //       throw new QiniuError(
 //         QiniuErrorName.GetCanvasContextFailed,
 //         "mctx or sctx can't be null"
 //       )
 //     }
 //
 //     let src!: CanvasImageSource
 //     let context!: CanvasRenderingContext2D
 //     for (let i = 0; i < steps; i++) {
 //
 //       let dw = width * factor | 0 // eslint-disable-line no-bitwise
 //       let dh = height * factor | 0 // eslint-disable-line no-bitwise
 //       // 到最后一步的时候 dw, dh 用目标缩放尺寸，否则会出现最后尺寸偏小的情况
 //       if (i === steps - 1) {
 //         dw = originWidth * scale
 //         dh = originHeight * scale
 //       }
 //
 //       if (i % 2 === 0) {
 //         src = source
 //         context = mctx
 //       } else {
 //         src = mirror
 //         context = sctx
 //       }
 //       // 每次画前都清空，避免图像重叠
 //       this.clear(context, width, height)
 //       context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh)
 //       width = dw
 //       height = dh
 //     }
 //
 //     const canvas = src === source ? mirror : source
 //     // save data
 //     const data = context.getImageData(0, 0, width, height)
 //
 //     // resize
 //     canvas.width = width
 //     canvas.height = height
 //
 //     // store image data
 //     context.putImageData(data, 0, 0)
 //
 //     return canvas
 //   }
 //
 //   /** 这里把 base64 字符串转为 blob 对象 */
 //   toBlob(result: HTMLCanvasElement) {
 //     const dataURL = result.toDataURL(this.outputType, this.config.quality)
 //     const buffer = atob(dataURL.split(',')[1]).split('').map(char => char.charCodeAt(0))
 //     const blob = new Blob([new Uint8Array(buffer)], {type: this.outputType})
 //     return blob
 //   }
 // }
 //
 // const compressImage = (file: File, options: CompressOptions) => new Compress(file, options).process()
 //
 // export default compressImage
--- a/src/backend/qiniu/utils/config.ts
+++ b/src/backend/qiniu/utils/config.ts
@ -0,0 +1,61 @@
 import Logger from '../logger'
 import { regionUphostMap } from '../config'
 import { Config, DEFAULT_CHUNK_SIZE, InternalConfig } from '../upload'
 export function normalizeUploadConfig(config?: Partial<Config>, logger?: Logger): InternalConfig {
  const { upprotocol, uphost, ...otherConfig } = { ...config }
  const normalizeConfig: InternalConfig = {
    uphost: [],
    retryCount: 3,
    checkByMD5: false,
    forceDirect: false,
    useCdnDomain: true,
    checkByServer: false,
    concurrentRequestLimit: 3,
    chunkSize: DEFAULT_CHUNK_SIZE,
    upprotocol: 'https',
    debugLogLevel: 'OFF',
    disableStatisticsReport: false,
    ...otherConfig
  }
  // 兼容原来的 http: https: 的写法
  if (upprotocol) {
    normalizeConfig.upprotocol = upprotocol
      .replace(/:$/, '') as InternalConfig['upprotocol']
  }
  const hostList: string[] = []
  if (logger && config?.uphost != null && config?.region != null) {
    logger.warn('do not use both the uphost and region config.')
  }
  // 如果同时指定了 uphost 参数，添加到可用 host 列表
  if (uphost) {
    if (Array.isArray(uphost)) {
      hostList.push(...uphost)
    } else {
      hostList.push(uphost)
    }
    // 否则如果用户传了 region，添加指定 region 的 host 到可用 host 列表
  } else if (normalizeConfig?.region) {
    const hostMap = regionUphostMap[normalizeConfig?.region]
    if (normalizeConfig.useCdnDomain) {
      hostList.push(...hostMap.cdnUphost)
    } else {
      hostList.push(...hostMap.srcUphost)
    }
  }
  return {
    ...normalizeConfig,
    uphost: hostList.filter(Boolean)
  }
 }
--- a/src/backend/qiniu/utils/crc32.ts
+++ b/src/backend/qiniu/utils/crc32.ts
@ -0,0 +1,90 @@
 /* eslint-disable no-bitwise */
 import { MB } from './helper'
 /**
 * 以下 class 实现参考
 * https://github.com/Stuk/jszip/blob/d4702a70834bd953d4c2d0bc155fad795076631a/lib/crc32.js
 * 该实现主要针对大文件优化、对计算的值进行了 `>>> 0` 运算（为与服务端保持一致）
 */
 export class CRC32 {
  private crc = -1
  private table = this.makeTable()
  private makeTable() {
    const table = new Array<number>()
    for (let i = 0; i < 256; i++) {
      let t = i
      for (let j = 0; j < 8; j++) {
        if (t & 1) {
          // IEEE 标准
          t = (t >>> 1) ^ 0xEDB88320
        } else {
          t >>>= 1
        }
      }
      table[i] = t
    }
    return table
  }
  private append(data: Uint8Array) {
    let crc = this.crc
    for (let offset = 0; offset < data.byteLength; offset++) {
      crc = (crc >>> 8) ^ this.table[(crc ^ data[offset]) & 0xFF]
    }
    this.crc = crc
  }
  private compute() {
    return (this.crc ^ -1) >>> 0
  }
  private async readAsUint8Array(file: File | Blob): Promise<Uint8Array> {
    if (typeof file.arrayBuffer === 'function') {
      return new Uint8Array(await file.arrayBuffer())
    }
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = () => {
        if (reader.result == null) {
          reject()
          return
        }
        if (typeof reader.result === 'string') {
          reject()
          return
        }
        resolve(new Uint8Array(reader.result))
      }
      reader.readAsArrayBuffer(file)
    })
  }
  async file(file: File): Promise<number> {
    if (file.size <= MB) {
      this.append(await this.readAsUint8Array(file))
      return this.compute()
    }
    const count = Math.ceil(file.size / MB)
    for (let index = 0; index < count; index++) {
      const start = index * MB
      const end = index === (count - 1) ? file.size : start + MB
      // eslint-disable-next-line no-await-in-loop
      const chuck = await this.readAsUint8Array(file.slice(start, end))
      this.append(new Uint8Array(chuck))
    }
    return this.compute()
  }
  static file(file: File): Promise<number> {
    const crc = new CRC32()
    return crc.file(file)
  }
 }
--- a/src/backend/qiniu/utils/helper.ts
+++ b/src/backend/qiniu/utils/helper.ts
@ -0,0 +1,346 @@
 import {SparkMD5} from './spark-md5'
 import {
  QiniuError,
  QiniuErrorName,
  QiniuNetworkError,
  QiniuRequestError
 } from '../errors'
 import {LocalInfo, Progress} from '../upload'
 import Logger from '../logger'
 import {urlSafeBase64Decode} from './base64'
 export const MB = 1024 ** 2
 // 文件分块
 export function getChunks(file: File, blockSize: number): Blob[] {
  let chunkByteSize = blockSize * MB // 转换为字节
  // 如果 chunkByteSize 比文件大，则直接取文件的大小
  if (chunkByteSize > file.size) {
    chunkByteSize = file.size
  } else {
    // 因为最多 10000 chunk，所以如果 chunkSize 不符合则把每片 chunk 大小扩大两倍
    while (file.size > chunkByteSize * 10000) {
      chunkByteSize *= 2
    }
  }
  const chunks: Blob[] = []
  const count = Math.ceil(file.size / chunkByteSize)
  for (let i = 0; i < count; i++) {
    const chunk = file.slice(
      chunkByteSize * i,
      i === count - 1 ? file.size : chunkByteSize * (i + 1)
    )
    chunks.push(chunk)
  }
  return chunks
 }
 export function isMetaDataValid(params: { [key: string]: string }) {
  return Object.keys(params).every(key => key.indexOf('x-qn-meta-') === 0)
 }
 export function isCustomVarsValid(params: { [key: string]: string }) {
  return Object.keys(params).every(key => key.indexOf('x:') === 0)
 }
 export function sum(list: number[]) {
  return list.reduce((data, loaded) => data + loaded, 0)
 }
 export function setLocalFileInfo(localKey: string, info: LocalInfo, logger: Logger) {
  try {
    localStorage.setItem(localKey, JSON.stringify(info))
  } catch (err) {
    logger.warn(new QiniuError(
      QiniuErrorName.WriteCacheFailed,
      `setLocalFileInfo failed: ${localKey}`
    ))
  }
 }
 export function createLocalKey(name: string, key: string | null | undefined, size: number): string {
  const localKey = key == null ? '_' : `_key_${key}_`
  return `qiniu_js_sdk_upload_file_name_${name}${localKey}size_${size}`
 }
 export function removeLocalFileInfo(localKey: string, logger: Logger) {
  try {
    localStorage.removeItem(localKey)
  } catch (err) {
    logger.warn(new QiniuError(
      QiniuErrorName.RemoveCacheFailed,
      `removeLocalFileInfo failed. key: ${localKey}`
    ))
  }
 }
 export function getLocalFileInfo(localKey: string, logger: Logger): LocalInfo | null {
  let localInfoString: string | null = null
  try {
    localInfoString = localStorage.getItem(localKey)
  } catch {
    logger.warn(new QiniuError(
      QiniuErrorName.ReadCacheFailed,
      `getLocalFileInfo failed. key: ${localKey}`
    ))
  }
  if (localInfoString == null) {
    return null
  }
  let localInfo: LocalInfo | null = null
  try {
    localInfo = JSON.parse(localInfoString)
  } catch {
    // 本地信息已被破坏，直接删除
    removeLocalFileInfo(localKey, logger)
    logger.warn(new QiniuError(
      QiniuErrorName.InvalidCacheData,
      `getLocalFileInfo failed to parse. key: ${localKey}`
    ))
  }
  return localInfo
 }
 export function getAuthHeaders(token: string) {
  const auth = 'UpToken ' + token
  return {Authorization: auth}
 }
 export function getHeadersForChunkUpload(token: string): Record<string, string> {
  const header = getAuthHeaders(token)
  return {
    'content-type': 'application/octet-stream',
    ...header
  }
 }
 export function getHeadersForMkFile(token: string) {
  const header = getAuthHeaders(token)
  return {
    'content-type': 'application/json',
    ...header
  }
 }
 export function createXHR(): XMLHttpRequest {
  if (typeof XMLHttpRequest === "function") {
    return new XMLHttpRequest()
  }
  throw new QiniuError(
    QiniuErrorName.NotAvailableXMLHttpRequest,
    'the current environment does not support.'
  )
 }
 export async function computeMd5(data: Blob): Promise<string> {
  const buffer = await readAsArrayBuffer(data)
  const spark = new SparkMD5()
  spark.append(buffer)
  return spark.end()
 }
 export function readAsArrayBuffer(data: Blob): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    // evt 类型目前存在问题 https://github.com/Microsoft/TypeScript/issues/4163
    reader.onload = (evt: ProgressEvent<FileReader>) => {
      if (evt.target) {
        const body = evt.target.result
        resolve(body as ArrayBuffer)
      } else {
        reject(new QiniuError(
          QiniuErrorName.InvalidProgressEventTarget,
          'progress event target is undefined'
        ))
      }
    }
    reader.onerror = () => {
      reject(new QiniuError(
        QiniuErrorName.FileReaderReadFailed,
        'fileReader read failed'
      ))
    }
    reader.readAsArrayBuffer(data)
  })
 }
 export interface ResponseSuccess<T> {
  data: T
  reqId: string
 }
 export type XHRHandler = (xhr: XMLHttpRequest) => void
 export interface RequestOptions {
  method: string
  onProgress?: (data: Progress) => void
  onCreate?: XHRHandler
  body?: XMLHttpRequestBodyInit | null
  headers?: { [key: string]: string }
 }
 export type Response<T> = Promise<ResponseSuccess<T>>
 export function request<T>(url: string, options: RequestOptions): Response<T> {
  return new Promise((resolve, reject) => {
    const xhr = createXHR()
    xhr.open(options.method, url)
    if (options.onCreate) {
      options.onCreate(xhr)
    }
    if (options.headers) {
      const headers = options.headers
      Object.keys(headers).forEach(k => {
        xhr.setRequestHeader(k, headers[k])
      })
    }
    xhr.upload.addEventListener('progress', (evt: ProgressEvent) => {
      if (evt.lengthComputable && options.onProgress) {
        options.onProgress({
          loaded: evt.loaded,
          total: evt.total
        })
      }
    })
    xhr.onreadystatechange = () => {
      const responseText = xhr.responseText
      if (xhr.readyState !== 4) {
        return
      }
      const reqId = xhr.getResponseHeader('x-reqId') || ''
      if (xhr.status === 0) {
        // 发生 0 基本都是网络错误，常见的比如跨域、断网、host 解析失败、系统拦截等等
        reject(new QiniuNetworkError('network error.', reqId))
        return
      }
      if (xhr.status !== 200) {
        let message = `xhr request failed, code: ${xhr.status}`
        if (responseText) {
          message += ` response: ${responseText}`
        }
        let data
        try {
          data = JSON.parse(responseText)
        } catch {
          // 无需处理该错误、可能拿到非 json 格式的响应是预期的
        }
        reject(new QiniuRequestError(xhr.status, reqId, message, data))
        return
      }
      try {
        resolve({
          data: JSON.parse(responseText),
          reqId
        })
      } catch (err) {
        reject(err)
      }
    }
    xhr.send(options.body)
  })
 }
 export function getPortFromUrl(url: string | undefined) {
  if (url && url.match) {
    let groups = url.match(/(^https?)/)
    if (!groups) {
      return ''
    }
    const type = groups[1]
    groups = url.match(/^https?:\/\/([^:^/]*):(\d*)/)
    if (groups) {
      return groups[2]
    }
    if (type === 'http') {
      return '80'
    }
    return '443'
  }
  return ''
 }
 export function getDomainFromUrl(url: string | undefined): string {
  if (url && url.match) {
    const groups = url.match(/^https?:\/\/([^:^/]*)/)
    return groups ? groups[1] : ''
  }
  return ''
 }
 // 非标准的 PutPolicy
 interface PutPolicy {
  assessKey: string
  bucketName: string
  scope: string
 }
 /**
 * @param token
 * @throws {QiniuError}
 */
 export function getPutPolicy(token: string): PutPolicy {
  if (!token) throw new QiniuError(QiniuErrorName.InvalidToken, 'invalid token.')
  const segments = token.split(':')
  if (segments.length === 1) throw new QiniuError(QiniuErrorName.InvalidToken, 'invalid token segments.')
  // token 构造的差异参考：https://github.com/qbox/product/blob/master/kodo/auths/UpToken.md#admin-uptoken-authorization
  const assessKey = segments.length > 3 ? segments[1] : segments[0]
  if (!assessKey) throw new QiniuError(QiniuErrorName.InvalidToken, 'missing assess key field.')
  let putPolicy: PutPolicy | null = null
  try {
    putPolicy = JSON.parse(urlSafeBase64Decode(segments[segments.length - 1]))
  } catch (error) {
    throw new QiniuError(QiniuErrorName.InvalidToken, 'token parse failed.')
  }
  if (putPolicy == null) {
    throw new QiniuError(QiniuErrorName.InvalidToken, 'putPolicy is null.')
  }
  if (putPolicy.scope == null) {
    throw new QiniuError(QiniuErrorName.InvalidToken, 'scope field is null.')
  }
  const bucketName = putPolicy.scope.split(':')[0]
  if (!bucketName) {
    throw new QiniuError(QiniuErrorName.InvalidToken, 'resolve bucketName failed.')
  }
  return {assessKey, bucketName, scope: putPolicy.scope}
 }
 export function createObjectURL(file: File) {
  // @ts-ignore
  const URL = window.URL || window.webkitURL || window.mozURL
  // FIXME:  需要 revokeObjectURL
  return URL.createObjectURL(file)
 }
--- a/src/backend/qiniu/utils/index.ts
+++ b/src/backend/qiniu/utils/index.ts
@ -0,0 +1,8 @@
 export * from './pool'
 export * from './observable'
 export * from './base64'
 export * from './helper'
 export * from './config'
 // export {default as compressImage, type CompressResult} from './compress'
--- a/src/backend/qiniu/utils/observable.ts
+++ b/src/backend/qiniu/utils/observable.ts
@ -0,0 +1,151 @@
 /** 消费者接口 */
 export interface IObserver<T, E, C> {
  /** 用来接收 Observable 中的 next 类型通知 */
  next: (value: T) => void
  /** 用来接收 Observable 中的 error 类型通知 */
  error: (err: E) => void
  /** 用来接收 Observable 中的 complete 类型通知 */
  complete: (res: C) => void
 }
 export interface NextObserver<T, E, C> {
  next: (value: T) => void
  error?: (err: E) => void
  complete?: (res: C) => void
 }
 export interface ErrorObserver<T, E, C> {
  next?: (value: T) => void
  error: (err: E) => void
  complete?: (res: C) => void
 }
 export interface CompletionObserver<T, E, C> {
  next?: (value: T) => void
  error?: (err: E) => void
  complete: (res: C) => void
 }
 export type PartialObserver<T, E, C> = NextObserver<T, E, C> | ErrorObserver<T, E, C> | CompletionObserver<T, E, C>
 export interface IUnsubscribable {
  /** 取消 observer 的订阅 */
  unsubscribe(): void
 }
 /** Subscription 的接口 */
 export interface ISubscriptionLike extends IUnsubscribable {
  readonly closed: boolean
 }
 export type TeardownLogic = () => void
 export interface ISubscribable<T, E, C> {
  subscribe(
    observer?: PartialObserver<T, E, C> | ((value: T) => void),
    error?: (error: any) => void,
    complete?: () => void
  ): IUnsubscribable
 }
 /** 表示可清理的资源，比如 Observable 的执行 */
 class Subscription implements ISubscriptionLike {
  /** 用来标示该 Subscription 是否被取消订阅的标示位 */
  public closed = false
  /** 清理 subscription 持有的资源 */
  private _unsubscribe: TeardownLogic | undefined
  /** 取消 observer 的订阅 */
  unsubscribe() {
    if (this.closed) {
      return
    }
    this.closed = true
    if (this._unsubscribe) {
      this._unsubscribe()
    }
  }
  /** 添加一个 tear down 在该 Subscription 的 unsubscribe() 期间调用 */
  add(teardown: TeardownLogic) {
    this._unsubscribe = teardown
  }
 }
 /**
 * 实现 Observer 接口并且继承 Subscription 类，Observer 是消费 Observable 值的公有 API
 * 所有 Observers 都转化成了 Subscriber，以便提供类似 Subscription 的能力，比如 unsubscribe
 */
 export class Subscriber<T, E, C> extends Subscription implements IObserver<T, E, C> {
  protected isStopped = false
  protected destination: Partial<IObserver<T, E, C>>
  constructor(
    observerOrNext?: PartialObserver<T, E, C> | ((value: T) => void) | null,
    error?: ((err: E) => void) | null,
    complete?: ((res: C) => void) | null
  ) {
    super()
    if (observerOrNext && typeof observerOrNext === 'object') {
      this.destination = observerOrNext
    } else {
      this.destination = {
        ...observerOrNext && { next: observerOrNext },
        ...error && { error },
        ...complete && { complete }
      }
    }
  }
  unsubscribe(): void {
    if (this.closed) {
      return
    }
    this.isStopped = true
    super.unsubscribe()
  }
  next(value: T) {
    if (!this.isStopped && this.destination.next) {
      this.destination.next(value)
    }
  }
  error(err: E) {
    if (!this.isStopped && this.destination.error) {
      this.isStopped = true
      this.destination.error(err)
    }
  }
  complete(result: C) {
    if (!this.isStopped && this.destination.complete) {
      this.isStopped = true
      this.destination.complete(result)
    }
  }
 }
 /** 可观察对象，当前的上传事件的集合 */
 export class Observable<T, E, C> implements ISubscribable<T, E, C> {
  constructor(private _subscribe: (subscriber: Subscriber<T, E, C>) => TeardownLogic) {}
  subscribe(observer: PartialObserver<T, E, C>): Subscription
  subscribe(next: null | undefined, error: null | undefined, complete: (res: C) => void): Subscription
  subscribe(next: null | undefined, error: (error: E) => void, complete?: (res: C) => void): Subscription
  subscribe(next: (value: T) => void, error: null | undefined, complete: (res: C) => void): Subscription
  subscribe(
    observerOrNext?: PartialObserver<T, E, C> | ((value: T) => void) | null,
    error?: ((err: E) => void) | null,
    complete?: ((res: C) => void) | null
  ): Subscription {
    const sink = new Subscriber(observerOrNext, error, complete)
    sink.add(this._subscribe(sink))
    return sink
  }
 }
--- a/src/backend/qiniu/utils/pool.ts
+++ b/src/backend/qiniu/utils/pool.ts
@ -0,0 +1,53 @@
 export type RunTask<T> = (...args: T[]) => Promise<void>
 export interface QueueContent<T> {
  task: T
  resolve: () => void
  reject: (err?: any) => void
 }
 export class Pool<T> {
  aborted = false
  queue: Array<QueueContent<T>> = []
  processing: Array<QueueContent<T>> = []
  constructor(private runTask: RunTask<T>, private limit: number) {}
  enqueue(task: T) {
    return new Promise<void>((resolve, reject) => {
      this.queue.push({
        task,
        resolve,
        reject
      })
      this.check()
    })
  }
  private run(item: QueueContent<T>) {
    this.queue = this.queue.filter(v => v !== item)
    this.processing.push(item)
    this.runTask(item.task).then(
      () => {
        this.processing = this.processing.filter(v => v !== item)
        item.resolve()
        this.check()
      },
      err => item.reject(err)
    )
  }
  private check() {
    if (this.aborted) return
    const processingNum = this.processing.length
    const availableNum = this.limit - processingNum
    this.queue.slice(0, availableNum).forEach(item => {
      this.run(item)
    })
  }
  abort() {
    this.queue = []
    this.aborted = true
  }
 }
--- a/src/backend/qiniu/utils/spark-md5.ts
+++ b/src/backend/qiniu/utils/spark-md5.ts
@ -0,0 +1,348 @@
 // https://www.npmjs.com/package/spark-md5
 export interface State {
  buff: string;
  length: number;
  hash: number[];
 }
 /**
 * SparkMD5 OOP implementation for array buffers.
 *
 * Use this class to perform an incremental md5 ONLY for array buffers.
 */
 export class SparkMD5 {
  _buff: Uint8Array = new Uint8Array(0);
  _length: number = 0;
  _hash: number[] = [];
  constructor() {
    this.reset();
  }
  /**
   * Appends an array buffer.
   *
   * @param {ArrayBuffer} arr The array to be appended
   *
   * @return {SparkMD5.ArrayBuffer} The instance itself
   */
  append(arr: ArrayBufferLike) {
    const buff = concatenateArrayBuffers(this._buff.buffer, arr);
    const length = buff.length;
    this._length += arr.byteLength;
    let i;
    for (i = 64; i <= length; i += 64) {
      md5cycle(this._hash, md5blk_array(buff.subarray(i - 64, i)));
    }
    this._buff =
      i - 64 < length
        ? new Uint8Array(buff.buffer.slice(i - 64))
        : new Uint8Array(0);
    return this;
  }
  /**
   * Finishes the incremental computation, resetting the internal state and
   * returning the result.
   *
   * @param {Boolean} raw True to get the raw string, false to get the hex string
   *
   * @return {String} The result
   */
  end(raw?: boolean) {
    const buff = this._buff;
    const length = buff.length;
    const tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    for (let i = 0; i < length; i += 1) {
      tail[i >> 2] |= buff[i] << (i % 4 << 3);
    }
    this._finish(tail, length);
    let ret = hex(this._hash);
    if (raw) {
      ret = hexToBinaryString(ret);
    }
    this.reset();
    return ret;
  }
  /**
   * Resets the internal state of the computation.
   */
  reset() {
    this._buff = new Uint8Array(0);
    this._length = 0;
    this._hash = [1732584193, -271733879, -1732584194, 271733878];
  }
  /**
   * Gets the internal state of the computation.
   *
   * @return {Object} The state
   */
  getState(): State {
    return {
      buff: arrayBuffer2Utf8Str(this._buff), // Convert buffer to a string
      length: this._length,
      hash: this._hash.slice(),
    };
  }
  /**
   * Releases memory used by the incremental buffer and other additional
   * resources. If you plan to use the instance again, use reset instead.
   */
  destroy() {
    // delete this._hash;
    // delete this._buff;
    // delete this._length;
    this.reset();
  }
  /**
   * Finish the final calculation based on the tail.
   *
   * @param {Array}  tail   The tail (will be modified)
   * @param {Number} length The length of the remaining buffer
   */
  _finish(tail: number[], length: number) {
    let i = length;
    tail[i >> 2] |= 0x80 << (i % 4 << 3);
    if (i > 55) {
      md5cycle(this._hash, tail);
      for (i = 0; i < 16; i += 1) {
        tail[i] = 0;
      }
    }
    // Do the final computation based on the tail and length
    // Beware that the final length may not fit in 32 bits so we take care of that
    const tmp = this._length * 8;
    const arr = tmp.toString(16).match(/(.*?)(.{0,8})$/)!;
    const lo = parseInt(arr[2], 16);
    const hi = parseInt(arr[1], 16) || 0;
    tail[14] = lo;
    tail[15] = hi;
    md5cycle(this._hash, tail);
  }
 }
 function md5cycle(x: number[], k: number[]) {
  let a = x[0];
  let b = x[1];
  let c = x[2];
  let d = x[3];
  a += (((b & c) | (~b & d)) + k[0] - 680876936) | 0;
  a = (((a << 7) | (a >>> 25)) + b) | 0;
  d += (((a & b) | (~a & c)) + k[1] - 389564586) | 0;
  d = (((d << 12) | (d >>> 20)) + a) | 0;
  c += (((d & a) | (~d & b)) + k[2] + 606105819) | 0;
  c = (((c << 17) | (c >>> 15)) + d) | 0;
  b += (((c & d) | (~c & a)) + k[3] - 1044525330) | 0;
  b = (((b << 22) | (b >>> 10)) + c) | 0;
  a += (((b & c) | (~b & d)) + k[4] - 176418897) | 0;
  a = (((a << 7) | (a >>> 25)) + b) | 0;
  d += (((a & b) | (~a & c)) + k[5] + 1200080426) | 0;
  d = (((d << 12) | (d >>> 20)) + a) | 0;
  c += (((d & a) | (~d & b)) + k[6] - 1473231341) | 0;
  c = (((c << 17) | (c >>> 15)) + d) | 0;
  b += (((c & d) | (~c & a)) + k[7] - 45705983) | 0;
  b = (((b << 22) | (b >>> 10)) + c) | 0;
  a += (((b & c) | (~b & d)) + k[8] + 1770035416) | 0;
  a = (((a << 7) | (a >>> 25)) + b) | 0;
  d += (((a & b) | (~a & c)) + k[9] - 1958414417) | 0;
  d = (((d << 12) | (d >>> 20)) + a) | 0;
  c += (((d & a) | (~d & b)) + k[10] - 42063) | 0;
  c = (((c << 17) | (c >>> 15)) + d) | 0;
  b += (((c & d) | (~c & a)) + k[11] - 1990404162) | 0;
  b = (((b << 22) | (b >>> 10)) + c) | 0;
  a += (((b & c) | (~b & d)) + k[12] + 1804603682) | 0;
  a = (((a << 7) | (a >>> 25)) + b) | 0;
  d += (((a & b) | (~a & c)) + k[13] - 40341101) | 0;
  d = (((d << 12) | (d >>> 20)) + a) | 0;
  c += (((d & a) | (~d & b)) + k[14] - 1502002290) | 0;
  c = (((c << 17) | (c >>> 15)) + d) | 0;
  b += (((c & d) | (~c & a)) + k[15] + 1236535329) | 0;
  b = (((b << 22) | (b >>> 10)) + c) | 0;
  a += (((b & d) | (c & ~d)) + k[1] - 165796510) | 0;
  a = (((a << 5) | (a >>> 27)) + b) | 0;
  d += (((a & c) | (b & ~c)) + k[6] - 1069501632) | 0;
  d = (((d << 9) | (d >>> 23)) + a) | 0;
  c += (((d & b) | (a & ~b)) + k[11] + 643717713) | 0;
  c = (((c << 14) | (c >>> 18)) + d) | 0;
  b += (((c & a) | (d & ~a)) + k[0] - 373897302) | 0;
  b = (((b << 20) | (b >>> 12)) + c) | 0;
  a += (((b & d) | (c & ~d)) + k[5] - 701558691) | 0;
  a = (((a << 5) | (a >>> 27)) + b) | 0;
  d += (((a & c) | (b & ~c)) + k[10] + 38016083) | 0;
  d = (((d << 9) | (d >>> 23)) + a) | 0;
  c += (((d & b) | (a & ~b)) + k[15] - 660478335) | 0;
  c = (((c << 14) | (c >>> 18)) + d) | 0;
  b += (((c & a) | (d & ~a)) + k[4] - 405537848) | 0;
  b = (((b << 20) | (b >>> 12)) + c) | 0;
  a += (((b & d) | (c & ~d)) + k[9] + 568446438) | 0;
  a = (((a << 5) | (a >>> 27)) + b) | 0;
  d += (((a & c) | (b & ~c)) + k[14] - 1019803690) | 0;
  d = (((d << 9) | (d >>> 23)) + a) | 0;
  c += (((d & b) | (a & ~b)) + k[3] - 187363961) | 0;
  c = (((c << 14) | (c >>> 18)) + d) | 0;
  b += (((c & a) | (d & ~a)) + k[8] + 1163531501) | 0;
  b = (((b << 20) | (b >>> 12)) + c) | 0;
  a += (((b & d) | (c & ~d)) + k[13] - 1444681467) | 0;
  a = (((a << 5) | (a >>> 27)) + b) | 0;
  d += (((a & c) | (b & ~c)) + k[2] - 51403784) | 0;
  d = (((d << 9) | (d >>> 23)) + a) | 0;
  c += (((d & b) | (a & ~b)) + k[7] + 1735328473) | 0;
  c = (((c << 14) | (c >>> 18)) + d) | 0;
  b += (((c & a) | (d & ~a)) + k[12] - 1926607734) | 0;
  b = (((b << 20) | (b >>> 12)) + c) | 0;
  a += ((b ^ c ^ d) + k[5] - 378558) | 0;
  a = (((a << 4) | (a >>> 28)) + b) | 0;
  d += ((a ^ b ^ c) + k[8] - 2022574463) | 0;
  d = (((d << 11) | (d >>> 21)) + a) | 0;
  c += ((d ^ a ^ b) + k[11] + 1839030562) | 0;
  c = (((c << 16) | (c >>> 16)) + d) | 0;
  b += ((c ^ d ^ a) + k[14] - 35309556) | 0;
  b = (((b << 23) | (b >>> 9)) + c) | 0;
  a += ((b ^ c ^ d) + k[1] - 1530992060) | 0;
  a = (((a << 4) | (a >>> 28)) + b) | 0;
  d += ((a ^ b ^ c) + k[4] + 1272893353) | 0;
  d = (((d << 11) | (d >>> 21)) + a) | 0;
  c += ((d ^ a ^ b) + k[7] - 155497632) | 0;
  c = (((c << 16) | (c >>> 16)) + d) | 0;
  b += ((c ^ d ^ a) + k[10] - 1094730640) | 0;
  b = (((b << 23) | (b >>> 9)) + c) | 0;
  a += ((b ^ c ^ d) + k[13] + 681279174) | 0;
  a = (((a << 4) | (a >>> 28)) + b) | 0;
  d += ((a ^ b ^ c) + k[0] - 358537222) | 0;
  d = (((d << 11) | (d >>> 21)) + a) | 0;
  c += ((d ^ a ^ b) + k[3] - 722521979) | 0;
  c = (((c << 16) | (c >>> 16)) + d) | 0;
  b += ((c ^ d ^ a) + k[6] + 76029189) | 0;
  b = (((b << 23) | (b >>> 9)) + c) | 0;
  a += ((b ^ c ^ d) + k[9] - 640364487) | 0;
  a = (((a << 4) | (a >>> 28)) + b) | 0;
  d += ((a ^ b ^ c) + k[12] - 421815835) | 0;
  d = (((d << 11) | (d >>> 21)) + a) | 0;
  c += ((d ^ a ^ b) + k[15] + 530742520) | 0;
  c = (((c << 16) | (c >>> 16)) + d) | 0;
  b += ((c ^ d ^ a) + k[2] - 995338651) | 0;
  b = (((b << 23) | (b >>> 9)) + c) | 0;
  a += ((c ^ (b | ~d)) + k[0] - 198630844) | 0;
  a = (((a << 6) | (a >>> 26)) + b) | 0;
  d += ((b ^ (a | ~c)) + k[7] + 1126891415) | 0;
  d = (((d << 10) | (d >>> 22)) + a) | 0;
  c += ((a ^ (d | ~b)) + k[14] - 1416354905) | 0;
  c = (((c << 15) | (c >>> 17)) + d) | 0;
  b += ((d ^ (c | ~a)) + k[5] - 57434055) | 0;
  b = (((b << 21) | (b >>> 11)) + c) | 0;
  a += ((c ^ (b | ~d)) + k[12] + 1700485571) | 0;
  a = (((a << 6) | (a >>> 26)) + b) | 0;
  d += ((b ^ (a | ~c)) + k[3] - 1894986606) | 0;
  d = (((d << 10) | (d >>> 22)) + a) | 0;
  c += ((a ^ (d | ~b)) + k[10] - 1051523) | 0;
  c = (((c << 15) | (c >>> 17)) + d) | 0;
  b += ((d ^ (c | ~a)) + k[1] - 2054922799) | 0;
  b = (((b << 21) | (b >>> 11)) + c) | 0;
  a += ((c ^ (b | ~d)) + k[8] + 1873313359) | 0;
  a = (((a << 6) | (a >>> 26)) + b) | 0;
  d += ((b ^ (a | ~c)) + k[15] - 30611744) | 0;
  d = (((d << 10) | (d >>> 22)) + a) | 0;
  c += ((a ^ (d | ~b)) + k[6] - 1560198380) | 0;
  c = (((c << 15) | (c >>> 17)) + d) | 0;
  b += ((d ^ (c | ~a)) + k[13] + 1309151649) | 0;
  b = (((b << 21) | (b >>> 11)) + c) | 0;
  a += ((c ^ (b | ~d)) + k[4] - 145523070) | 0;
  a = (((a << 6) | (a >>> 26)) + b) | 0;
  d += ((b ^ (a | ~c)) + k[11] - 1120210379) | 0;
  d = (((d << 10) | (d >>> 22)) + a) | 0;
  c += ((a ^ (d | ~b)) + k[2] + 718787259) | 0;
  c = (((c << 15) | (c >>> 17)) + d) | 0;
  b += ((d ^ (c | ~a)) + k[9] - 343485551) | 0;
  b = (((b << 21) | (b >>> 11)) + c) | 0;
  x[0] = (a + x[0]) | 0;
  x[1] = (b + x[1]) | 0;
  x[2] = (c + x[2]) | 0;
  x[3] = (d + x[3]) | 0;
 }
 function md5blk_array(a: Uint8Array) {
  const md5blks: number[] = [];
  for (let i = 0; i < 64; i += 4) {
    md5blks[i >> 2] =
      a[i] + (a[i + 1] << 8) + (a[i + 2] << 16) + (a[i + 3] << 24);
  }
  return md5blks;
 }
 const hex_chr = [
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
 ];
 function rhex(n: number): string {
  let s = "";
  for (let j = 0; j < 4; j += 1) {
    s += hex_chr[(n >> (j * 8 + 4)) & 0x0f] + hex_chr[(n >> (j * 8)) & 0x0f];
  }
  return s;
 }
 function hex(x: number[]) {
  const r = new Array(x.length);
  for (let i = 0; i < x.length; i += 1) {
    r[i] = rhex(x[i]);
  }
  return r.join("");
 }
 function arrayBuffer2Utf8Str(buff: ArrayBufferLike) {
  // @ts-ignore
  return String.fromCharCode.apply(null, new Uint8Array(buff));
 }
 function concatenateArrayBuffers(
  first: ArrayBufferLike,
  second: ArrayBufferLike,
 ): Uint8Array {
  const result = new Uint8Array(first.byteLength + second.byteLength);
  result.set(new Uint8Array(first));
  result.set(new Uint8Array(second), first.byteLength);
  return result;
 }
 function hexToBinaryString(hex: string) {
  const bytes = [];
  const length = hex.length;
  for (let x = 0; x < length - 1; x += 2) {
    bytes.push(parseInt(hex.substring(x, 2), 16));
  }
  return String.fromCharCode.apply(String, bytes);
 }
--- a/src/backend/reader.ts
+++ b/src/backend/reader.ts
@ -0,0 +1,181 @@
 import {
  abortion,
  type AbortionContext,
  coerce,
  isInvalid,
  isValid,
  SparkMD5,
  uniqueId
 } from "../shared";
 import {report} from "./report";
 import {Uploader} from "./uploader";
 const registry: Map<TaskId, Reader> = new Map();
 export function getReadTasks(): Array<Task> {
  return Array.from(registry.values()).map((t) => ({...t.data}));
 }
 export async function pauseReadTask(id: TaskId, reason?: any): Promise<void> {
  return registry.get(id)?.pause(reason);
 }
 export async function resumeReadTask(id: TaskId): Promise<void> {
  return registry.get(id)?.resume();
 }
 export async function removeReadTask(id: TaskId): Promise<void> {
  return registry.get(id)?.destroy();
 }
 export async function cleanReadTasks(): Promise<void> {
  for (const task of registry.values()) {
    await task.cleanup();
  }
 }
 /**
 * 读取文件，有效的 5 种任务状态：
 * initial、reading、readend、failed、aborted
 */
 export class Reader implements AbortionContext {
  ctrl: AbortController;
  protected constructor(
    readonly file: File,
    readonly data: Task,
  ) {
    this.ctrl = abortion(this);
    this.file = file;
  }
  get id(): TaskId {
    return this.data.id;
  }
  get status(): TaskStatus {
    return this.data.status;
  }
  get signal(): AbortSignal {
    return this.ctrl.signal;
  }
  static create(file: File, dirid: number): void {
    if (!file.type) {
      // 有些文件是没有类型的
      // TODO 需要更加明确的信息来指明是哪一个文件
      void report("app", "error", "未知文件类型");
    } else if (!/^(image|video|audio)\//.test(file.type)) {
      // 仅支持图片、视频和音频这三种类型
      // TODO 需要更加明确的信息来指明是哪一个文件
      void report("app", "error", "不支持的文件类型");
    } else {
      const task = new Reader(file, {
        id: uniqueId(),
        dirid,
        name: file.name,
        path: URL.createObjectURL(file),
        hash: "<hash>",
        mime: file.type,
        size: file.size,
        status: "initial",
      });
      registry.set(task.id, task);
      queueMicrotask(task.start.bind(task));
    }
  }
  /** 暂停任务 */
  pause(reason?: any): void {
    if (isValid(this) && !this.signal.aborted) {
      this.ctrl.abort(reason ?? new Error("已暂停"));
    }
  }
  /** 恢复任务 */
  async resume(): Promise<void> {
    if (isInvalid(this)) {
      if (this.signal.aborted) {
        this.ctrl = abortion(this);
      }
      await this.start();
    }
  }
  /** 清理任务 */
  async cleanup(): Promise<void> {
    if (isInvalid(this)) {
      await this.destroy();
    }
  }
  /** 直接删除 */
  async destroy(): Promise<void> {
    registry.delete(this.id);
    if (!this.signal.aborted) {
      this.ctrl.abort(new Error("删除任务"));
    }
    if (this.status !== "readend") {
      // 如果任务已经完成，文件路径还会被继续使用，
      // 所以只有不在该状态下才能够释放内存。
      URL.revokeObjectURL(this.data.path);
    }
    await report("task", "delete", [this.id]);
  }
  async onabort(_: Event): Promise<void> {
    if (isValid(this)) {
      await this.report("aborted", {
        error: this.signal.reason,
      });
    }
  }
  /** 开始解析文件 */
  private async start(): Promise<void> {
    await this.report("initial");
    if (this.data.hash === "<hash>") {
      await this.report("reading", {progress: 0});
      const spark = new SparkMD5();
      let read = 0;
      try {
        await this.file.stream().pipeTo(
          new WritableStream<Uint8Array>({
            write: async (chunk) => {
              spark.append(chunk);
              read += chunk.length;
              await this.report("reading", {
                progress: Math.min(read / this.file.size, 1),
              });
            },
          }),
          {signal: this.signal},
        );
      } catch (error) {
        if (!this.signal.aborted && isValid(this)) {
          await this.report("failed", {error});
        }
        return;
      }
      this.data.hash = spark.end();
    }
    await this.report("readend", {progress: 1});
    Uploader.create(this.file, this.data, (duplicated: boolean) => {
      registry.delete(this.id);
      if (!duplicated) return;
      return report("app", "error", "任务已经存在了，切勿重复上传哦");
    });
  }
  private async report(
    status: TaskStatus,
    info?: { progress?: number; error?: any },
  ): Promise<void> {
    const error = coerce(info?.error);
    this.data.status = status;
    this.data.progress = info?.progress;
    this.data.error = error != null ? String(error) : undefined;
    await report("task", "sync", {...this.data});
  }
 }
--- a/src/backend/report.ts
+++ b/src/backend/report.ts
@ -0,0 +1,96 @@
 import {
  call,
  coerce,
  createReplier,
  emit,
  isRecvData,
  isSendData,
  on,
  once,
  uniqueId,
 } from "../shared";
 const ports: Array<MessagePort> = [];
 const resolvers: Map<number, VoidFunction> = new Map();
 let online = false
 // 处理来自客户端的数据
 // @ts-ignore
 self.onconnect = (evt: MessageEvent): void => {
  const port = evt.ports[0];
  // 客户端卸载事件，无需回复
  once("app:close", () => {
    const index = ports.findIndex((p) => p === port);
    index > -1 && ports.splice(index, 1);
  })
  // 接受客户端消息
  port.onmessage = (evt: MessageEvent): void => {
    if (isRecvData(evt.data)) {
      call(resolvers.get(evt.data.id)); // 忽略来自客户端的结果
    } else if (isSendData(evt.data)) {
      const {scope, action, data} = evt.data
      const reply = createReplier(port, evt.data)
      emit(`${scope}:${action}`, data, reply);
    } else {
      console.warn("[wfs] unknown message event", evt)
    }
  };
  ports.push(port);
  void report('app', 'status', online ? 'online' : 'offline')
 }
 // WebSocket 事件
 on("ws:open", () => {
  online = true
  void report("app", "status", "online")
 });
 on("ws:close", () => {
  online = false
  void report("app", "status", "offline")
 });
 on('ws:file:create', (data: CloudFile) => {
  void report('file', 'create', data);
 })
 on('ws:file:update', (data: CloudFile) => {
  void report('file', 'update', data);
 })
 export function report(scope: "app", action: "config", config: Partial<ApiConfig>): Promise<void>
 export function report(scope: "app", action: "status", data: "online" | "offline"): Promise<void>;
 export function report(scope: "app", action: "init", tasks: Array<Task>): Promise<void>;
 export function report(scope: "app", action: "error", error: any): Promise<void>;
 export function report(scope: "task", action: "sync", task: Task): Promise<void>;
 export function report(scope: "task", action: "delete", tasks: number[]): Promise<void>;
 export function report(scope: 'file', action: "create", file: CloudFile): Promise<void>
 export function report(scope: 'file', action: "update", file: CloudFile): Promise<void>
 export function report(scope: string, action: string, data?: any): Promise<void> {
  const id = uniqueId()
  if (scope === "app" && action === "error") {
    data = String(coerce(data));
  }
  return new Promise((resolve) => {
    let sends = 0; // 发送次数
    let count = 0; // 接收次数
    resolvers.set(id, () => {
      if (++count >= sends) {
        resolvers.delete(id);
        resolve();
      }
    });
    queueMicrotask(() => {
      for (const port of ports) {
        sends++
        port.postMessage({id, scope, action, data});
      }
    });
  });
 }
--- a/src/backend/socket.ts
+++ b/src/backend/socket.ts
@ -0,0 +1,275 @@
 // 参考文档链接
 // https://www.zhihu.com/tardis/zm/art/162808604?source_id=1003
 // https://www.ruanyifeng.com/blog/2017/05/websocket.html
 // https://web.dev/articles/websockets-basics?hl=zh-cn
 import {emit} from "../shared";
 const HEARTBEAT = "heartbeat";
 const CLOSE = "close";
 const closeTimeout = 5000; // 等待关闭超时
 const reconnectInterval = 3000; // 重连间隔
 const heartbeatInterval = 60000; // 心跳间隔
 const heartbeatTimeout = 50000; // 心跳超时
 // WebSocket 对象引用
 let socket: WebSocket | undefined;
 // 自动重连开关。
 //
 // 如果客户端网络不可用，我们就只能等到网络可用时
 // 才去连接服务器。所以该变量是用来配合网络变化事件，
 // 当连接不可用时能否自动重连。
 let isReconnect = navigator.onLine;
 // 心跳机制
 type Heartbeat = {
  boot: VoidFunction;
  next: VoidFunction;
  stop: VoidFunction;
 };
 let heartbeat: Heartbeat | undefined;
 /**
 * 用于监听网络状态编号时的回调函数
 */
 export function handleNetworkEvent(status: "on" | "off"): void {
  // 只有在网络可用的情况下才支持自动重连
  isReconnect = status === "on";
  if (status === "on") {
    // 理论上，切换成在线状态时，立即发送一个心跳包，
    // 这样就可以检测连接是否可以；但是当网络可用时，
    // 打开的连接可能还不能立即恢复，所以延迟发送。
    setTimeout(() => heartbeat?.boot(), reconnectInterval);
  } else {
    heartbeat?.stop();
  }
 }
 export function useSocket(cfg: Partial<ApiConfig>): void {
  if (cfg.apiUrl && cfg.artifact && cfg.accessToken) {
    const uri = new URL(cfg.apiUrl);
    uri.protocol = uri.protocol.replace(/^http/, "ws");
    uri.pathname = uri.pathname.replace(/\/+$/, "") + `/${cfg.artifact}/notifies`;
    openSocket(uri.toString(), cfg.accessToken);
  } else if (socket != null) {
    closeSocket(socket);
  }
 }
 function createHeartbeat(ws: WebSocket): Heartbeat {
  let timeoutTimer: ReturnType<typeof setTimeout> | undefined; // 心跳回复超时器
  let heartbeatTimer: ReturnType<typeof setTimeout> | undefined; // 心跳定时器
  const boot = () => {
    // 引用不存在或被重置
    if (socket !== ws) {
      closeSocket(ws);
      return;
    }
    // 如果还存在定时器，就说明没有收到心跳回复，
    // 我们就可以直接关闭连接。
    if (timeoutTimer != null) {
      closeSocket(ws);
      socket = undefined;
      return;
    }
    // 只有在连接可用时才能发送心跳包
    if (ws.readyState === ws.OPEN) {
      // 发送心跳包
      ws.send(HEARTBEAT);
      // 心跳回复超时检测
      timeoutTimer = setTimeout(() => {
        timeoutTimer = undefined;
        closeSocket(ws);
      }, heartbeatTimeout);
    }
  };
  const next = () => {
    // 引用不存在或被重置
    if (socket !== ws) {
      closeSocket(ws);
      return;
    }
    // 取消心跳回复超时事件
    if (timeoutTimer) {
      clearTimeout(timeoutTimer);
      timeoutTimer = undefined;
    }
    // 下次心跳
    heartbeatTimer = setTimeout(() => {
      heartbeatTimer = undefined;
      boot();
    }, heartbeatInterval);
  };
  const stop = () => {
    // 取消心跳回复超时事件
    if (timeoutTimer) {
      clearTimeout(timeoutTimer);
      timeoutTimer = undefined;
    }
    // 取消心跳事件
    if (heartbeatTimer) {
      clearTimeout(heartbeatTimer);
      heartbeatTimer = undefined;
    }
  };
  return {boot, next, stop};
 }
 // 关闭 WebSocket 连接
 function closeSocket(ws: WebSocket, force = false): void {
  console.log("closeSocket")
  switch (ws.readyState) {
    case WebSocket.CONNECTING:
      ws.close();
      return;
    case WebSocket.CLOSING:
    case WebSocket.CLOSED:
      return;
    case WebSocket.OPEN:
      if (force) {
        ws.close();
        return;
      }
      // 我们尝试通知服务器关闭，
      // 如果超过指定时限就强制关闭。
      ws.send(CLOSE);
      setTimeout(() => {
        closeSocket(ws, true);
      }, closeTimeout);
  }
 }
 interface NotifyData {
  scope: string;
  action: string;
  data: Record<string, any> | Array<any>;
 }
 function isNotifyData(v: any): v is NotifyData {
  return (
    typeof v === "object" &&
    !Array.isArray(v) &&
    v != null &&
    "scope" in v &&
    "action" in v &&
    "data" in v &&
    typeof v.scope === "string" &&
    typeof v.action === "string" &&
    typeof v.data === "object" &&
    v.data != null
  );
 }
 // 打开 WebSocket 连接
 function openSocket(url: string, protocol: string): void {
  if (socket != null) {
    if (
      socket.url === url &&
      socket.protocol === protocol &&
      socket.readyState < WebSocket.CLOSING
    ) {
      // 如果关键参数一致而且连接是可用的，
      // 我们就不需要重新创建连接。
      return;
    }
    // 关闭之前的连接
    closeSocket(socket);
    socket = undefined;
  }
  // 创建新的连接
  const ws = new WebSocket(url, protocol);
  const hb = createHeartbeat(ws);
  heartbeat = hb;
  // Event: WebSocket opened
  ws.onopen = (): void => {
    if (socket === ws) {
      emit("ws:open"); // 通知连接可用
      hb.boot(); // 启动心跳检测
    } else {
      // 运行到这里，说明在 ws 可用之前就被弃用了，
      // 我们就发送关闭事件通知服务器关闭这个连接。
      closeSocket(ws);
    }
  };
  // Event: WebSocket message received
  ws.onmessage = (evt: MessageEvent): void => {
    // 假定我们只接受字符串消息，服务器不会发送二进制数据
    const lines = (evt.data as string).split("\n");
    if (socket !== ws) {
      // 代码运行到这里，就说明 ws 被弃用了，此刻若收到关闭命令，
      // 我们就主动关闭客户端，相反则通知服务器关闭连接。
      if (lines.includes(CLOSE)) {
        ws.close();
      } else {
        closeSocket(ws);
      }
      return;
    }
    // 处理消息
    for (const line of lines) {
      if (line === CLOSE) {
        // 当我们收到的消息里面包含了关闭命令时，
        // 我们就主动关闭客户端并销毁连接引用。
        // 同时抛弃后续数据
        ws.close();
        socket = undefined;
        return;
      }
      if (line === HEARTBEAT) {
        hb.next();
        continue;
      }
      try {
        const item = JSON.parse(line);
        if (isNotifyData(item)) {
          // 派发事件
          const {scope, action, data} = item;
          emit(`ws:${scope}:${action}`, data);
        } else {
          emit("ws:message", item);
        }
      } catch {
        emit("ws:message", line);
      }
    }
  };
  // Event: WebSocket error
  ws.onerror = (error) => {
    console.error("WebSocket error:", error);
    socket === ws && emit("ws:error", error);
    closeSocket(ws); // Close the socket if an error occurs
  };
  // Event: WebSocket closed
  ws.onclose = () => {
    console.log("WebSocket connection is closed.");
    if (socket === ws) {
      emit("ws:close");
    }
    socket = undefined
    // 停止心跳
    hb.stop();
    // 断线后自动重连
    if (isReconnect) {
      console.log("Reconnecting...");
      setTimeout(function () {
        openSocket(url, protocol);
      }, reconnectInterval);
    }
  };
  socket = ws;
 }
--- a/src/backend/uploader.ts
+++ b/src/backend/uploader.ts
@ -0,0 +1,417 @@
 // import {QiniuNetworkError, QiniuRequestError, upload} from './qiniu-js';
 // import {type UploadProgress} from "./qiniu-js/upload";
 import {
  QiniuNetworkError,
  QiniuRequestError,
  upload,
  type UploadProgress,
 } from './qiniu'
 import {
  abortion,
  type AbortionContext,
  coerce,
  isInvalid,
  isSameTask,
  isValid,
  promisify,
 } from "../shared";
 import type {UploadArgs} from './api'
 import {
  completeUploadApi,
  initiateUploadApi,
  simulateQiniuCallback
 } from './api'
 import {report} from "./report";
 const registry: Map<FileHash, Uploader> = new Map();
 export function getUploadTasks(): Array<Task> {
  return Array.from(registry.values()).reduce<Task[]>(
    (l, u) => l.concat(...u.tasks.map((t) => ({...t}))),
    [],
  );
 }
 export async function pauseUploadTask(
  hash: FileHash,
  id: TaskId,
 ): Promise<void> {
  await registry.get(hash)?.pause(id);
 }
 export async function resumeUploadTask(
  hash: FileHash,
  id: TaskId,
 ): Promise<void> {
  await registry.get(hash)?.resume(id);
 }
 export async function removeUploadTask(
  hash: FileHash,
  id: TaskId,
 ): Promise<void> {
  await registry.get(hash)?.destroy(id);
 }
 export async function cleanUploadTasks(): Promise<void> {
  for (const tu of registry.values()) {
    await tu.cleanup();
  }
 }
 /**
 * 后端任务状态
 */
 type JobStatus =
  | "initial" // 初始化状态
  | "pending" // 等待上传
  | "uploading" // 正在上传
  | "uploaded" // 上传完成
  | "errored" // 上传失败
  | "aborted"; // 终止上传
 const statuses: Array<JobStatus> = [
  "initial", // 初始化状态
  "pending", // 等待上传
  "uploading", // 正在上传
  "uploaded", // 上传完成
  "errored", // 上传失败
  "aborted", // 终止上传
 ];
 export class Uploader implements AbortionContext {
  ctrl: AbortController;
  skipUpload?: boolean;
  uploadToken?: string;
  key?: string;
  status: JobStatus;
  protected constructor(
    readonly file: File,
    readonly hash: FileHash,
    readonly tasks: Array<Task>,
  ) {
    this.ctrl = abortion(this);
    this.status = "initial";
  }
  get signal(): AbortSignal {
    return this.ctrl.signal;
  }
  get isUploaded(): boolean {
    return this.status === "uploaded";
  }
  get isValid(): boolean {
    return statuses.indexOf(this.status) < statuses.indexOf("uploaded");
  }
  get isInvalid(): boolean {
    return statuses.indexOf(this.status) > statuses.indexOf("uploaded");
  }
  static create(
    file: File,
    task: Task,
    callback: (duplicated: boolean) => void,
  ): void {
    let job = registry.get(task.hash);
    if (job == null) {
      job = new Uploader(file, task.hash, [task]);
      registry.set(job.hash, job);
      callback(false);
      queueMicrotask(job.start.bind(job));
      return;
    }
    const exists = job.tasks.some((t) => isSameTask(t, task));
    if (exists) {
      callback(true); // 任务重复
      return;
    }
    job.tasks.push(task);
    callback(false);
    if (!job.isValid) {
      void job.resume(task.id);
    }
  }
  async pause(taskId: TaskId): Promise<void> {
    const task = this.tasks.find((t) => t.id === taskId);
    if (!task) {
      return;
    }
    // 只能中止状态正常的任务
    if (isValid(task)) {
      task.status = "aborted";
      task.error = "已暂停";
      await report("task", "sync", {...task});
    }
    // 如果没有正常的任务，就中止文件上传
    if (this.isValid && !this.signal.aborted && !this.tasks.some(isValid)) {
      this.ctrl.abort();
    }
  }
  // 恢复上传任务
  async resume(taskId: TaskId): Promise<void> {
    // 获取前端任务
    const task = this.tasks.find((t) => t.id === taskId);
    if (task == null) {
      return;
    }
    // 恢复任务
    if (isInvalid(task)) {
      task.status = "readend";
      task.error = undefined;
      task.progress = 1;
      await report("task", "sync", {...task});
    }
    // 确保中断器可用
    if (this.signal.aborted) {
      this.ctrl = abortion(this);
    }
    // 启动任务
    if (this.isInvalid) {
      await this.start();
    }
  }
  // 移除任务
  async destroy(taskId: TaskId): Promise<void> {
    const index = this.tasks.findIndex((t) => t.id === taskId);
    if (index > -1) {
      const task = this.tasks.splice(index, 1)[0];
      URL.revokeObjectURL(task.path); // 释放内存
      await report("task", "delete", [taskId]);
    }
    // 如果没有正常的任务，就中止文件上传
    if (!this.signal.aborted && !this.tasks.some(isValid)) {
      this.ctrl.abort();
    }
    // 若没有前端任务，我们就删除文件上传任务
    if (!this.tasks.length) {
      registry.delete(this.hash);
    }
  }
  async cleanup() {
    let hasValidTask = false;
    const deletes: Array<TaskId> = [];
    for (let i = this.tasks.length - 1; i >= 0; i--) {
      const task = this.tasks[i];
      if (!isValid(task)) {
        this.tasks.splice(i, 1); // 删除任务
        URL.revokeObjectURL(task.path); // 释放内存
        deletes.push(task.id);
      } else {
        hasValidTask = true;
      }
    }
    // 如果没有正常的前端任务，就中止后端任务
    if (!this.signal.aborted && !hasValidTask && !this.isInvalid) {
      this.ctrl.abort();
    }
    // 如果所有的前端任务都被删除了，就同时把后端任务也删除掉。
    if (!this.tasks.length) {
      registry.delete(this.hash);
    }
    // 广播：通知前端删除任务。
    await report("task", "delete", deletes);
  }
  async onabort(_?: Event): Promise<void> {
    await this.report("aborted", {
      status: "aborted",
      error: this.signal.reason || "已暂停",
    });
  }
  async report(
    status: JobStatus,
    info: { error?: any; progress?: number; status: TaskStatus },
  ): Promise<void> {
    this.status = status;
    let error = coerce(info.error);
    if (error != null) error = String(error);
    for (const task of this.tasks) {
      if (isValid(task)) {
        task.status = info.status;
        task.error = error;
        task.progress = info.progress;
        await report("task", "sync", task);
      }
    }
  }
  private async start(): Promise<void> {
    await this.report("initial", {status: "queuing"});
    await this.getUploadOptions();
    await this.startUpload();
    await this.completeUpload();
  }
  private async getUploadOptions(): Promise<void> {
    if (this.skipUpload || this.uploadToken || this.signal.aborted) {
      return;
    }
    try {
      const result = await initiateUploadApi(
        this.file.type,
        this.hash,
        this.signal,
      );
      this.skipUpload = result.skip;
      this.uploadToken = (result as UploadArgs).token;
      this.key = (result as UploadArgs).key;
      this.signal.throwIfAborted();
    } catch (error) {
      if (!this.signal.aborted) {
        await this.report("errored", {
          status: "failed",
          error,
        });
      }
    }
  }
  private async startUpload(): Promise<void> {
    // 任务被中止或者状态错误
    if (this.signal.aborted || this.isUploaded) {
      return;
    }
    // 跳过文件上传
    if (this.skipUpload) {
      await this.report("uploaded", {
        status: "uploaded",
        progress: 1,
      });
      return;
    }
    // 没有状态正常的任务，就不需要上传
    if (!this.tasks.some(isValid)) {
      return;
    }
    const {resolve, promise} = promisify<void>();
    const observable = upload(
      this.file,
      this.key,
      this.uploadToken!,
      {
        fname: this.file.name, // 文件原文件名
        customVars: {"x:md5": this.hash}, // 自定义变量
        mimeType: this.file.type, // 文件类型设置
      },
      {
        useCdnDomain: false,
        checkByServer: true,
        checkByMD5: true,
      },
    );
    const subscription = observable.subscribe({
      next: (res: UploadProgress) => {
        this.report("uploading", {
          status: "uploading",
          progress: res.total.percent / 100,
        });
      },
      error: async (error: any) => {
        if (this.signal.aborted) {
          resolve();
          return;
        }
        // 如果文件已经存在，则模拟七牛云回调，
        // 这样就可以保证文件被正确上传。
        if (
          error instanceof QiniuRequestError &&
          error.data?.error === "file exists"
        ) {
          try {
            await simulateQiniuCallback(
              {
                md5: this.hash,
                name: this.file.name,
                mime: this.file.type,
                size: this.file.size,
                key: this.key!,
              },
              this.signal,
            );
            this.signal.throwIfAborted();
            await this.report("uploaded", {
              status: "uploaded",
              progress: 1,
            });
            resolve();
            return;
          } catch (err) {
            error = err;
          }
        }
        if (!this.signal.aborted) {
          if (error instanceof QiniuNetworkError) {
            await this.report("errored", {
              status: "failed",
              error: "网络异常",
            });
          } else {
            await this.report("errored", {
              status: "failed",
              error
            });
          }
        }
        resolve();
      },
      complete: async (_: any) => {
        // 参数 _ 是七牛云返回我们服务器返回的结果
        await this.report("uploaded", {
          status: "uploaded",
          progress: 1,
        });
        resolve();
      },
    });
    const dispose = (): void => {
      if (!subscription.closed) {
        subscription.unsubscribe();
      }
    };
    // 当信号被中止时取消文件上传
    this.signal.addEventListener("abort", dispose);
    try {
      await promise;
    } finally {
      this.signal.removeEventListener("abort", dispose);
    }
  }
  private async completeUpload(): Promise<void> {
    if (this.signal.aborted || !this.isUploaded) {
      return;
    }
    try {
      const fileNames: Array<string> = [];
      const directories: Array<number> = [];
      // const removes: Array<TaskId> = [];
      for (const task of this.tasks) {
        fileNames.push(task.name);
        directories.push(task.dirid);
        // removes.push(task.id);
      }
      await completeUploadApi(this.hash, fileNames, directories, this.signal);
      await this.report("uploaded", {status: "completed"});
    } catch (error) {
      if (!this.signal.aborted) {
        await this.report("errored", {status: "failed", error});
      }
      return;
    }
    await this.report("uploaded", {
      status: "completed",
      progress: 1,
    });
  }
 }
--- a/src/frontend/assets/logo.png
+++ b/src/frontend/assets/logo.png
--- a/src/frontend/directives/index.ts
+++ b/src/frontend/directives/index.ts
@ -0,0 +1 @@
 export * from './vTooltip'
--- a/src/frontend/directives/vTooltip.ts
+++ b/src/frontend/directives/vTooltip.ts
@ -0,0 +1,69 @@
 import type {DirectiveBinding, ObjectDirective} from 'vue'
 import {alignWithElement} from '../utils'
 interface Elm extends Element {
  v$tooltip?: HTMLDivElement
 }
 const getTooltip = (el: Elm): HTMLDivElement => {
  if (el.v$tooltip != null) {
    return el.v$tooltip
  }
  const tooltip = document.createElement('div')
  tooltip.style.display = "none"
  tooltip.classList.add('tooltip')
  el.addEventListener("mouseenter", () => {
    if (tooltip.parentNode) {
      tooltip.style.display = "block"
      alignWithElement(el, tooltip, "top-center", [0, -6])
    }
  })
  el.addEventListener("mouseleave", () => {
    if (tooltip.parentNode) {
      tooltip.style.display = "none"
    }
  })
  el.v$tooltip = tooltip
  return tooltip
 }
 const stringify = (value: any) => {
  if (value == null) {
    return value
  } else if (typeof value === 'string') {
    return value.trim()
  } else {
    return value.toString().trim()
  }
 }
 function destroy(elm: Elm) {
  if (elm.v$tooltip) {
    elm.v$tooltip.remove()
    delete elm.v$tooltip
  }
 }
 function bind(el: Elm, {value}: DirectiveBinding) {
  const text = stringify(value)
  if (text) {
    const tooltip = getTooltip(el)
    if (!tooltip.parentNode) {
      el.closest('[data-ui-barrier]')?.appendChild(tooltip)
    }
    tooltip.innerHTML = text
  } else {
    destroy(el)
  }
 }
 export const vTooltip: ObjectDirective<Elm> = {
  mounted: bind,
  updated: bind,
  beforeUnmount: destroy,
 }
--- a/src/frontend/hooks/index.ts
+++ b/src/frontend/hooks/index.ts
@ -0,0 +1 @@
 export * from './useTheme'
--- a/src/frontend/hooks/useTheme.ts
+++ b/src/frontend/hooks/useTheme.ts
@ -0,0 +1,91 @@
 import {
  computed,
  ComputedRef,
  getCurrentInstance,
  getCurrentScope,
  inject,
  InjectionKey,
  onScopeDispose,
  provide,
  Ref,
  ref,
  watchEffect
 } from 'vue'
 export interface UseTheme {
  use: Ref<'dark' | 'light' | 'system'>
  dark: ComputedRef<boolean>
  light: ComputedRef<boolean>
 }
 const key: InjectionKey<UseTheme | undefined> = Symbol("useTheme")
 export function useTheme(): UseTheme {
  let instance = inject(key, undefined)
  if (instance != null) {
    return instance
  }
  const use = ref<'dark' | 'light' | 'system'>('light')
  const matches = ref(false)
  const dark = computed(() => {
    if (use.value === 'dark') return true
    if (use.value === 'light') return false
    return matches.value
  })
  const light = computed(() => {
    if (use.value === 'light') return true
    if (use.value === 'dark') return false
    return !matches.value
  })
  const handler = (event: MediaQueryListEvent) => {
    matches.value = event.matches
  }
  let mediaQuery: MediaQueryList | undefined
  const cleanup = () => {
    if (mediaQuery) {
      if ('removeEventListener' in mediaQuery) {
        mediaQuery.removeEventListener('change', handler)
      } else {
        // @ts-expect-error deprecated API
        mediaQuery.removeListener(handler)
      }
    }
  }
  const stopWatch = watchEffect(() => {
    if ('matchMedia' in window && typeof window.matchMedia === 'function') {
      cleanup()
      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
      if ('addEventListener' in mediaQuery) {
        mediaQuery.addEventListener('change', handler)
      } else {
        // @ts-expect-error deprecated API
        mediaQuery.addListener(handler)
      }
      matches.value = mediaQuery.matches
    }
  })
  if (getCurrentScope()) {
    onScopeDispose(() => {
      stopWatch()
      cleanup()
      mediaQuery = undefined
    })
  }
  instance = {use, dark, light}
  if (getCurrentInstance()) {
    provide(key, instance)
  }
  return instance
 }
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@ -0,0 +1,225 @@
 import {store} from './store'
 import {installIcons} from './widgets/VIcons'
 import UiContainer from './widgets/UiContainer.vue'
 import VDialog from './widgets/UiDialog.vue'
 import {
  type CSSProperties,
  defineCustomElement,
  getCurrentInstance,
  h,
  nextTick,
  onBeforeMount,
  onMounted,
  onUnmounted,
  type Prop,
  reactive,
  ref,
  type VNode,
  VueElementConstructor,
  watch
 } from 'vue'
 import style from './style.css?inline'
 let FileManager: VueElementConstructor
 if (!customElements.get("file-manager")) {
  FileManager = defineCustomElement({
    props: {
      select: {
        type: String,
        validator: v => v == null || v === 'single' || v === 'multiple',
      } as Prop<'single' | 'multiple'>,
      mime: {
        type: String,
        validator: v => v == null || v === 'image' || v === 'video' || v === 'all',
      } as Prop<FileMime>,
      apiUrl: {
        type: String,
        required: true,
      },
      artifact: {
        type: String,
        required: true,
      },
      accessToken: {
        type: String,
        required: true,
      },
      dialog: Boolean,
      width: Number,
      height: Number,
      zIndex: Number
    },
    emits: [
      'close',
      'select',
      'open',
      'fail',
    ],
    setup(props, ctx) {
      const shadowRoot = ref<ShadowRoot | null>(null)
      const visible = ref(false)
      const size = reactive<CSSProperties>({})
      watch(() => props.select, value => {
        store.mode = value ? 'select' : 'manage'
        store.multiple = value === 'multiple'
      }, {immediate: true})
      watch(() => props.mime, value => {
        store.mime = value ?? 'all'
        store.lockMime = value != null
      }, {immediate: true})
      const attachDialog = (root: ShadowRoot) => {
        if (!props.dialog) return
        const style = document.createElement('style')
        style.textContent = `:host{position:fixed;inset:0;z-index:${props.zIndex ?? 100}`
        root.insertBefore(style, root.firstChild)
      }
      const handleWindowResize = () => {
        let {width, height} = props
        if (width == null || width < 100) {
          width = window.innerWidth * 0.8
        }
        if (height == null || height < 100) {
          height = window.innerHeight * 0.8
        }
        size.width = `${Math.max(width, 875)}px`
        size.height = `${Math.max(height, 640)}px`
      }
      onBeforeMount(handleWindowResize)
      onMounted(() => {
        const el = getCurrentInstance()?.vnode.el as HTMLElement
        const root = el.parentNode as ShadowRoot
        installIcons(root)
        attachDialog(root)
        shadowRoot.value = root
        void nextTick(() => {
          visible.value = true
        })
        window.addEventListener('resize', handleWindowResize)
      })
      onUnmounted(() => {
        window.removeEventListener('resize', handleWindowResize)
      })
      const createManager = () => h(UiContainer, {
        setup() {
          return {
            apiUrl: props.apiUrl,
            accessToken: props.accessToken,
            artifact: props.artifact,
          }
        },
        onClose() {
          ctx.emit('close')
        },
        onSelect(files: CloudFile[]) {
          ctx.emit('select', files)
        },
        onFail(message: string) {
          ctx.emit('fail', message)
        }
      })
      return () => {
        let child: VNode
        if (props.dialog && shadowRoot.value) {
          child = h(VDialog, {
            barrier: shadowRoot.value as unknown as Element,
            visible: visible.value,
            class: 'shadow-2xl',
            style: size,
            rounded: false,
            outside: 'shake',
            onDismissed() {
              ctx.emit('close')
            },
            onCompleted() {
              ctx.emit('open')
            }
          }, {
            default: createManager,
          })
        } else {
          child = createManager()
        }
        return h('div', {
          ref: shadowRoot,
          class: ['size-full', {'fixed': props.dialog}]
        }, [child])
      }
    },
    styles: [style],
  })
  customElements.define("file-manager", FileManager)
 } else {
  FileManager = customElements.get('file-manager') as VueElementConstructor
 }
 export {
  FileManager
 }
 interface ShowFileManagerOptions {
  select?: 'single' | 'multiple',
  mime?: FileMime
  apiUrl: string
  accessToken: string
  artifact: string
  zIndex?: number // with dialog
  width?: number // with dialog
  height?: number // with dialog
  onClose?: VoidFunction // with dialog
  onSelect?: (files: CloudFile[]) => void // with dialog
  onOpen?: VoidFunction // with dialog
  onFail?: (error: string) => void
 }
 export function showFileManager(opts: ShowFileManagerOptions) {
  let elm: Element | null = new FileManager({
    select: opts.select,
    mime: opts.mime,
    apiUrl: opts.apiUrl,
    accessToken: opts.accessToken,
    artifact: opts.artifact,
    dialog: true,
    zIndex: opts.zIndex,
    width: opts.width,
    height: opts.height,
  })
  const dismiss = () => {
    if (elm != null) {
      elm.remove()
      elm = null
    }
  }
  elm.addEventListener('close', () => {
    opts.onClose?.()
    dismiss()
  })
  elm.addEventListener('select', evt => {
    opts.onSelect?.((evt as CustomEvent).detail as CloudFile[])
    dismiss()
  })
  elm.addEventListener('open', () => {
    opts.onOpen?.()
  })
  elm.addEventListener('fail', evt => {
    opts.onFail?.((evt as CustomEvent).detail)
  })
  document.body.appendChild(elm)
  return dismiss
 }
--- a/src/frontend/store/events.ts
+++ b/src/frontend/store/events.ts
@ -0,0 +1,38 @@
 import {$on} from '../../shared'
 import {useFile} from './handlers'
 import {store} from './store'
 import {toast} from "../widgets/UiToastController.ts";
 // 接收上传任务的信息同步命令
 $on("task", "sync", (task: Task): void => {
  const old = store.tasks.find((t) => t.id === task.id);
  if (old == null) {
    store.tasks.push(task);
  } else {
    Object.assign(old, task);
  }
 });
 // 接收上传任务的删除命令
 $on("task", "delete", (deletes: Array<TaskId>): void => {
  for (const id of deletes) {
    const i = store.tasks.findIndex((t) => t.id === id);
    i > -1 && store.tasks.splice(i, 1);
  }
 });
 $on('file', 'create', useFile)
 $on('file', 'update', useFile)
 let online = false
 $on('app', 'status', (status) => {
  if (status === 'online' && !online) {
    online = true
  } else if (status === 'offline' && online) {
    online = false
    toast('warn', '后台不在线，上传文件无法同步显示')
  }
 })
 export {}
--- a/src/frontend/store/filter.ts
+++ b/src/frontend/store/filter.ts
@ -0,0 +1,112 @@
 import {dispatch} from '../worker.ts'
 import {coerce, off, on, sleep} from '../../shared'
 import {getCurrentScope, nextTick, onScopeDispose, reactive, watch} from 'vue'
 import {store} from './store'
 export interface Filer {
  loading: boolean
  limit: number
  page: number
  total: number
  error?: string
  dirId: number
  view:
    | "error"
    | "files"
    | "empty"
    | "loader"
 }
 export function useFiler(directoryId: number): Filer {
  const filer = reactive<Filer>({
    loading: false,
    limit: 30,
    page: 0,
    total: 0,
    dirId: directoryId,
    error: undefined,
    view: "loader",
  })
  const jump = async (to: number) => {
    if (filer.total < 1 || filer.view === "error") {
      filer.view = "loader"
    }
    filer.loading = true
    filer.page = to
    filer.error = undefined
    const mime = store.mime === "all" ? undefined : store.mime
    const {limit, page} = filer
    try {
      const res = await dispatch('file', "list", {
        directoryId,
        page,
        limit,
        mime
      })
      if (filer.page === res.page && filer.limit === res.limit) {
        filer.loading = false
        filer.total = res.total
        filer.view = res.items?.length ? 'files' : 'empty'
        store.files[directoryId] = res.items ?? [] // 这里会不会是响应式的
      }
    } catch (error) {
      if (filer.page === page && filer.limit === limit) {
        filer.view = "error"
        filer.error = String(coerce(error))
        filer.loading = false
      }
    }
  }
  const refresh = async (): Promise<void> => {
    filer.loading = true
    if (filer.page == 0) {
      filer.page = 1
    }
    await sleep(300)
    await jump(filer.page)
  }
  const reload = async (): Promise<void> => {
    filer.loading = true
    filer.view = "loader"
    await sleep(300)
    await jump(filer.page)
  }
  const reset = async (): Promise<void> => {
    filer.page = 0
    filer.total = 0
    delete store.files[directoryId]
    await jump(1)
  }
  watch([
    () => filer.limit,
    () => store.mime,
  ], reset)
  if (getCurrentScope()) {
    on(`files:${directoryId}:refresh`, refresh)
    on(`files:${directoryId}:reload`, reload)
    on(`files:${directoryId}:reset`, reset)
    on(`files:${directoryId}:jump`, jump)
    on("mime:change", reset)
    void nextTick(reset)
    onScopeDispose(() => {
      off(`files:${directoryId}:refresh`, refresh)
      off(`files:${directoryId}:reload`, reload)
      off(`files:${directoryId}:reset`, reset)
      off(`files:${directoryId}:jump`, jump)
      off("mime:change", reset)
      delete store.files[directoryId]
    })
  }
  return filer
 }
--- a/src/frontend/store/handlers.ts
+++ b/src/frontend/store/handlers.ts
@ -0,0 +1,204 @@
 import {toast} from '../widgets/UiToastController'
 import {dispatch} from '../worker'
 import {store} from './store'
 export function getDirectoryEntry(id: number): CloudDirectory | undefined {
  if (id === 0) return store.rootDirectory;
  return store.directories.get(id);
 }
 export function hasChildDirectoryEntries(id: number) {
  return id > 0 && Array.from(store.directories.values()).some((d) => d.pid === id);
 }
 export async function refreshDirectories() {
  const dirs = await dispatch("dir", "all");
  const set = (dirs: CloudDirectory[] | undefined) => {
    if (dirs == null) return;
    for (const {children, ...dir} of dirs) {
      store.directories.set(dir.id, dir);
      set(children);
    }
  };
  store.directories.clear()
  set(dirs);
  if (store.activeDirectoryId > 0 && !store.directories.has(store.activeDirectoryId)) {
    store.activeDirectoryId = 0;
  }
 }
 export function reload(): Promise<void> {
  return new Promise<void>((resolve) => {
    store.activeDirectoryId = 0;
    store.files = {};
    store.directories.clear();
    queueMicrotask(() => {
      refreshDirectories()
        .catch(err => toast("error", err))
        .then(resolve)
    });
  });
 }
 export async function uploadFiles(dirid: number, files: FileList | File[] | File): Promise<void> {
  if (files instanceof File) {
    await dispatch('task', 'create', {dirid, file: files})
  } else {
    for (const file of files) {
      await dispatch('task', "create", {dirid, file})
    }
  }
 }
 export function deleteFile(file: CloudFile): void {
  const list = store.files[file.directoryId]
  const index = list?.findIndex(f => f.id === file.id)
  if (list && index != null && index > -1) {
    list.splice(index, 1)
  }
  removeSelected(file.id)
 }
 export function updateFile(file: CloudFile): void {
  const list = store.files[file.directoryId]
  const index = list?.findIndex(f => f.id === file.id)
  if (list && index != null && index > -1) {
    list.splice(index, 1, file)
  }
 }
 export function useFile(list: CloudFile | Array<CloudFile>) {
  if (!Array.isArray(list)) {
    list = [list]
  }
  for (let file of list) {
    console.log(file.id, file.object.status, file.name)
    const files = store.files[file.directoryId] ?? []
    const index = files.findIndex(f => f.id === file.id)
    if (index === -1) {
      files.push(file)
    } else if (files[index].object.status < file.object.status) {
      files.splice(index, 1, file)
    }
    store.files[file.directoryId] = files
  }
 }
 export function toggleSelect(file: CloudFile): void {
  if (store.mode === 'manage' || store.multiple) {
    if (!removeSelected(file.id)) {
      store.selected.push({...file})
    }
  } else if (store.selected.length && store.selected[0].id === file.id) {
    store.selected = []
  } else {
    store.selected = [file]
  }
 }
 export function removeSelected(id: number): boolean {
  const index = store.selected.findIndex(f => f.id === id)
  if (index > -1) {
    store.selected.splice(index, 1)
    return true
  }
  return false
 }
 // Feature detection. The API needs to be supported
 // and the app not run in an iframe.
 const supportsFileSystemAccess =
  "showOpenFilePicker" in window &&
  (() => {
    try {
      return window.self === window.top;
    } catch {
      return false;
    }
  })();
 export async function pickFiles(directoryId: number) {
  // If the File System Access API is supported…
  if (supportsFileSystemAccess) {
    try {
      // Show the file picker, optionally allowing multiple files.
      // @ts-ignore
      const handles = await self.showOpenFilePicker({
        multiple: true,
        excludeAcceptAllOption: true,
        types: [
          {
            description: "图片和视频",
            accept: {
              "image/*": [
                ".apng",
                ".avif",
                ".gif",
                ".jpeg", ".jpg", ".jfif", ".pjpeg", ".pjp",
                ".png",
                ".webp",
                ".bmp",
                ".ico", ".cur",
                ".tif", ".tiff",
              ],
              "video/*": [
                ".3gp",
                ".mpeg", ".mpg",
                ".mp4", ".m4v", ".m4p",
                ".ogv", ".ogg",
                ".mov", ".qt",
                ".webm",
                ".avi",
              ],
            }
          }
        ],
      });
      const files = await Promise.all(
        handles.map(async (handle: FileSystemFileHandle) => {
          const file = await handle.getFile();
          // Add the `FileSystemFileHandle` as `.handle`.
          // @ts-ignore
          file.handle = handle;
          return file;
        })
      );
      await uploadFiles(directoryId, files)
    } catch (err) {
      // Fail silently if the user has simply canceled the dialog.
      if ((err as Error).name !== 'AbortError') {
        // console.error(err.name, err.message);
        throw err
      }
    }
    return;
  }
  // Fallback if the File System Access API is not supported.
  return new Promise<void>((resolve) => {
    const input = document.createElement('input');
    input.style.display = 'none';
    input.type = 'file';
    input.accept = "image/*,video/*"
    document.body.append(input);
    input.multiple = true;
    input.addEventListener('change', () => {
      input.remove();
      if (!input.files) {
        return;
      }
      uploadFiles(directoryId, input.files)
      resolve()
    });
    // Show the picker.
    if ('showPicker' in HTMLInputElement.prototype) {
      input.showPicker();
    } else {
      input.click();
    }
  });
 }
--- a/src/frontend/store/index.ts
+++ b/src/frontend/store/index.ts
@ -0,0 +1,4 @@
 export * from './events'
 export * from './filter'
 export * from './handlers'
 export * from './store'
--- a/src/frontend/store/store.ts
+++ b/src/frontend/store/store.ts
@ -0,0 +1,52 @@
 import {computed, reactive} from 'vue'
 export interface Store {
  showSidebar: boolean;
  showTasksPanel: boolean;
  isDragging: boolean;
  mime: FileMime
  lockMime: boolean
  mode: FileMode
  multiple: boolean
  tasks: Array<Task>;
  rootDirectory: CloudDirectory;
  directories: Map<number, CloudDirectory>;
  activeDirectoryId: number;
  // files: Map<number, CloudFile[]>;
  files: Record<number, CloudFile[]>;
  selected: CloudFile[];
 }
 export const store = reactive<Store>({
  showSidebar: true,
  showTasksPanel: false,
  isDragging: false,
  mime: "all",
  lockMime: false,
  tasks: [],
  mode: 'manage',
  multiple: true,
  directories: new Map(),
  rootDirectory: rootDirectoryEntry(),
  activeDirectoryId: 0,
  files: {},
  selected: [],
 });
 /** 当前文件视图的关联目录 */
 export const activeDirectory = computed(() => {
  if (store.activeDirectoryId === 0) {
    return store.rootDirectory;
  }
  return store.directories.get(store.activeDirectoryId);
 });
 export function rootDirectoryEntry(): CloudDirectory {
  return {
    id: 0,
    pid: -1,
    title: "根目录",
    createdAt: "",
    sort: Number.MAX_SAFE_INTEGER,
  };
 }
--- a/src/frontend/style.css
+++ b/src/frontend/style.css
@ -0,0 +1,131 @@
 :host,
 :root {
  font-size: 14px;
 }
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
  .flex-center {
    @apply flex flex-col justify-center items-center ;
  }
  .shadow-pop {
    @apply shadow-[0_2px_11px_rgba(0,0,0,0.1),0_3px_6px_rgba(0,0,0,0.05)];
  }
  .pseudo-border {
    @apply before:absolute before:z-10 before:inset-0 ring-1 ring-gray-900/[0.18] before:rounded-2xl before:pointer-events-none;
  }
  .popup-panel {
    @apply rounded-lg overflow-hidden shadow-pop bg-[#f2f1f1]/[0.9] backdrop-blur-[8px] pseudo-border;
  }
  .tooltip {
    @apply text-xs bg-white px-1 py-0.5 fixed top-0 left-0 leading-tight transition-opacity pointer-events-none;
    @apply rounded overflow-hidden shadow-pop bg-[#fff]/[0.8] backdrop-blur-[8px] pseudo-border z-[1234];
  }
 }
 [hidden] {
  display: none;
 }
 .spinner {
  position: relative;
  transform: translate3d(50%, 50%, 0);
 }
@keyframes v-loading-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
 }
 .loading-bar {
  animation: v-loading-spin 1.2s linear infinite;
  border-radius: 6px;
  height: 8%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 24%;
 }
 .loading-bar:nth-child(1) {
  animation-delay: -1.2s;
  transform: rotate(0.0001deg) translate(146%);
 }
 .loading-bar:nth-child(2) {
  animation-delay: -1.1s;
  transform: rotate(30deg) translate(146%);
 }
 .loading-bar:nth-child(3) {
  animation-delay: -1s;
  transform: rotate(60deg) translate(146%);
 }
 .loading-bar:nth-child(4) {
  animation-delay: -0.9s;
  transform: rotate(90deg) translate(146%);
 }
 .loading-bar:nth-child(5) {
  animation-delay: -0.8s;
  transform: rotate(120deg) translate(146%);
 }
 .loading-bar:nth-child(6) {
  animation-delay: -0.7s;
  transform: rotate(150deg) translate(146%);
 }
 .loading-bar:nth-child(7) {
  animation-delay: -0.6s;
  transform: rotate(180deg) translate(146%);
 }
 .loading-bar:nth-child(8) {
  animation-delay: -0.5s;
  transform: rotate(210deg) translate(146%);
 }
 .loading-bar:nth-child(9) {
  animation-delay: -0.4s;
  transform: rotate(240deg) translate(146%);
 }
 .loading-bar:nth-child(10) {
  animation-delay: -0.3s;
  transform: rotate(270deg) translate(146%);
 }
 .loading-bar:nth-child(11) {
  animation-delay: -0.2s;
  transform: rotate(300deg) translate(146%);
 }
 .loading-bar:nth-child(12) {
  animation-delay: -0.1s;
  transform: rotate(330deg) translate(146%);
 }
 .v-snake {
  --v-snake: 102%;
  animation: v-snake 100ms ease-out normal;
 }
@keyframes v-snake {
  50% {
    transform: scale(var(--v-snake, 102%))
  }
 }
--- a/src/frontend/utils/align.ts
+++ b/src/frontend/utils/align.ts
@ -0,0 +1,105 @@
 import domAlign, {alignPoint} from "dom-align";
 export type Placement =
  | 'top-left'
  | 'top-center'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-center'
  | 'bottom-right'
  | 'left-top'
  | 'left-center'
  | 'left-bottom'
  | 'right-top'
  | 'right-center'
  | 'right-bottom'
 // position-align
 //
 //
 //              | top-left       top-center      top-right |
 // -------------+------------------------------------------+--------------
 //     left-top |                                          | right-top
 //              |                                          |
 //  left-center |                                          | right-center
 //              |                                          |
 //  left-bottom |                                          | right-bottom
 // -------------+------------------------------------------+--------------
 //              | bottom-left  bottom-center  bottom-right |
 //
 export const positions: Record<Placement, Placement> = {
  // trigger  => popup
  'top-left': 'bottom-left',
  'top-center': 'bottom-center',
  'top-right': 'bottom-right',
  'bottom-left': 'top-left',
  'bottom-center': 'top-center',
  'bottom-right': 'top-right',
  'left-top': 'right-top',
  'left-center': 'right-center',
  'left-bottom': 'right-bottom',
  'right-top': 'left-top',
  'right-center': 'left-center',
  'right-bottom': 'left-bottom',
 }
 export function alignWithElement(
  trigger: Element,
  popup: HTMLElement,
  placement: Placement,
  offset: [number, number]
 ) {
  let triggerPoints: string[] = placement.split('-')
  let popupPoints: string[] = positions[placement].split('-')
  switch (triggerPoints[0]) {
    case 'left':
    case 'right':
      triggerPoints = triggerPoints.reverse()
      popupPoints = popupPoints.reverse()
      break
  }
  domAlign(popup, trigger, {
    points: [
      popupPoints.map(c => c[0]).join(''),
      triggerPoints.map(c => c[0]).join(''),
    ],
    offset: offset,
    overflow: {
      adjustX: true,
      adjustY: true,
    },
    useCssTransform: true,
    ignoreShake: true,
  })
 }
 export function alignWithPoint(
  popup: HTMLElement,
  clientX: number,
  clientY: number,
  placement: Placement,
  offset: [number, number]
 ) {
  let triggerPoints: string[] = placement.split('-')
  let popupPoints: string[] = positions[placement].split('-')
  switch (triggerPoints[0]) {
    case 'left':
    case 'right':
      triggerPoints = triggerPoints.reverse()
      popupPoints = popupPoints.reverse()
      break
  }
  alignPoint(popup, {clientX, clientY}, {
    points: [
      popupPoints.map(c => c[0]).join(''),
      triggerPoints.map(c => c[0]).join(''),
    ],
    offset: offset,
    overflow: {
      adjustX: true,
      adjustY: true,
    },
    useCssTransform: true,
    ignoreShake: true,
  })
 }
--- a/src/frontend/utils/index.ts
+++ b/src/frontend/utils/index.ts
@ -0,0 +1,3 @@
 export * from './align'
 export * from './preview'
 export * from './scroll'
--- a/src/frontend/utils/preview.ts
+++ b/src/frontend/utils/preview.ts
@ -0,0 +1,106 @@
 import Hls from "hls.js"
 import Viewer from 'viewerjs'
 import viewerStyle from "viewerjs/dist/viewer.css?inline"
 const viewerStyleId = "wfs-viewer-style"
 let video: HTMLVideoElement | undefined
 interface PreviewOptions {
  path: string
  mime: string
  thumb: string
  name: string
 }
 // https://juejin.cn/post/7146947008015089672
 const startVideoPreview = (path: string, img: HTMLImageElement): VoidFunction => {
  video = document.createElement('video');
  video.controls = true
  video.className = img.className
  video.style.cssText = img.style.cssText
    .replace("relative", "absolute")
    .replace("margin-left", "left")
    .replace("margin-top", "top")
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(path);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      void video?.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata', function () {
      img.style.opacity = "0"
      void video?.play();
    });
  } else {
    alert("浏览器不支持该视频")
  }
  img.parentNode!.appendChild(video)
  const onResize = () => {
    if (video != null) {
      video.className = img.className
      video.style.cssText = img.style.cssText
        .replace("relative", "absolute")
        .replace("margin-left", "left")
        .replace("margin-top", "top")
    }
  }
  onResize()
  window.addEventListener("resize", onResize)
  return () => {
    video?.pause()
    video?.remove()
    video = undefined
    window.removeEventListener("resize", onResize)
  }
 }
 export function showPreview(opts: PreviewOptions): void {
  if (!document.querySelector(`#${viewerStyleId}`)) {
    const style = document.createElement("style")
    style.innerHTML = viewerStyle
    style.id = viewerStyleId
    document.head.appendChild(style)
  }
  const isVideo = opts.mime.startsWith("video/")
  const img = document.createElement("img")
  img.src = isVideo ? opts.thumb : opts.path
  let dispose: VoidFunction | undefined
  const viewer = new Viewer(img, {
    title: [4, (_: any, imageData: any) => `${opts.name} (${imageData.naturalWidth} × ${imageData.naturalHeight})`],
    navbar: false,
    zoomable: !isVideo,
    movable: !isVideo,
    backdrop: true,
    slideOnTouch: !isVideo,
    keyboard: !isVideo,
    toolbar: isVideo ? {} : {
      flipHorizontal: true,
      flipVertical: true,
      oneToOne: true,
      reset: true,
      rotateLeft: true,
      rotateRight: true,
      zoomIn: true,
      zoomOut: true,
    },
    viewed(event: CustomEvent) {
      const el = event.detail.image as HTMLImageElement
      isVideo && (dispose = startVideoPreview(opts.path, el))
    },
    hide() {
      dispose?.()
    },
  })
  viewer.show()
 }
--- a/src/frontend/utils/scroll.ts
+++ b/src/frontend/utils/scroll.ts
@ -0,0 +1,58 @@
 export function getScrollParent(el?: HTMLElement, includeHidden = false) {
  while (el) {
    if (includeHidden ? isPotentiallyScrollable(el) : hasScrollbar(el)) return el
    el = el.parentElement!
  }
  return document.scrollingElement as HTMLElement
 }
 export function getScrollParents(el?: Element | null, stopAt?: Element | null) {
  const elements: HTMLElement[] = []
  if (stopAt && el && !stopAt.contains(el)) return elements
  while (el) {
    if (hasScrollbar(el)) elements.push(el as HTMLElement)
    if (el === stopAt) break
    el = el.parentElement!
  }
  return elements
 }
 export function hasScrollbar(el?: Element | null) {
  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
  const style = window.getComputedStyle(el)
  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight)
 }
 function isPotentiallyScrollable(el?: Element | null) {
  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
  const style = window.getComputedStyle(el)
  return ['scroll', 'auto'].includes(style.overflowY)
 }
 export function getScrollBarWidth() {
  const outer = document.createElement('div');
  outer.style.overflow = 'scroll';
  outer.style.height = '200px';
  outer.style.width = '100px';
  outer.style.position = 'fixed'
  outer.style.opacity = '0'
  outer.style.pointerEvents = 'none'
  document.body.appendChild(outer);
  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);
  const widthNoScroll = outer.offsetWidth;
  const widthWithScroll = inner.offsetWidth;
  outer.remove()
  return widthNoScroll - widthWithScroll;
 }
--- a/src/frontend/widgets/UiBarrier.vue
+++ b/src/frontend/widgets/UiBarrier.vue
@ -0,0 +1,63 @@
 <script lang="ts" setup>
 import UiMistake from './UiMistake.vue'
 import VLoading from './VLoading.vue'
 import {coerce, sleep} from '../../shared'
 import {onMounted, ref} from 'vue'
 const props = defineProps<{
  setup: () => Promise<void>
 }>()
 const emit = defineEmits<{
  (ev: 'setup'): void
 }>()
 const rootElmRef = ref<HTMLDivElement | null>(null)
 const errorMessage = ref<string>()
 const isInitializing = ref(true)
 const initialize = async (): Promise<void> => {
  try {
    errorMessage.value = undefined
    await props.setup()
    emit('setup')
  } catch (error) {
    errorMessage.value = String(coerce(error))
  } finally {
    isInitializing.value = false
  }
 }
 const reinitialize = async () => {
  isInitializing.value = true
  await sleep(500)
  await initialize()
 }
 onMounted(initialize)
 </script>
 <template>
  <div
    ref="rootElmRef"
    class="relative size-full !min-w-[52rem] !min-h-[30rem] backdrop-blur-md rounded-lg"
    data-ui-barrier
  >
    <div
      class="relative z-0 size-full rounded-lg bg-gray-200/95 dark:bg-gray-700/95 overflow-hidden">
      <v-loading
        v-if="isInitializing"
        class="absolute inset-0"
      />
      <UiMistake
        v-else-if="errorMessage"
        :message="errorMessage"
        class="absolute inset-0"
        @refresh="reinitialize"
      />
      <div v-else class="absolute inset-0">
        <slot/>
      </div>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiContainer.vue
+++ b/src/frontend/widgets/UiContainer.vue
@ -0,0 +1,103 @@
 <script lang="ts" setup>
 import {useTheme} from '../hooks'
 import {reload, store, useFiler} from '../store'
 import UiBarrier from './UiBarrier.vue'
 import UiContextMenu from './UiContextMenu.vue'
 import {hideContextMenu, toggleContextMenu} from './UiContextMenuController'
 import UiDirectoryNaming from './UiDirectoryNaming.vue'
 import {hideDirectoryNaming} from './UiDirectoryNamingController'
 import UiDropFeedback from './UiDropFeedback.vue'
 import UiFileNaming from './UiFileNaming.vue'
 import {hideFileNaming} from './UiFileNamingController'
 import UiFiles from './UiFiles.vue'
 import UiNavbar from './UiNavbar.vue'
 import UiSidebar from './UiSidebar.vue'
 import UiSplitter from './UiSplitter.vue'
 import UiTasks from './UiTasks.vue'
 import {toast} from './UiToastController'
 import UiToaster from './UiToaster.vue'
 import {dispatch} from '../worker'
 import {$on, coerce} from '../../shared'
 import {onMounted, onUnmounted} from 'vue'
 const props = defineProps<{
  setup: () => Awaitable<ApiConfig>
 }>()
 const emit = defineEmits<{
  (ev: 'close'): void
  (ev: 'select', files: CloudFile[]): void
  (ev: 'fail', message: string): void
 }>()
 const {dark, light} = useTheme()
 const setup = async () => {
  try {
    const cfg = await props.setup()
    await dispatch("cfg", "init", cfg)
    await reload()
    useFiler(0)
  } catch (error) {
    emit('fail', String(coerce(error)))
  }
 }
 onMounted(() => {
  const dispose = $on('app', 'error', (error: string): void => {
    toast('error', error)
  })
  onUnmounted(() => {
    dispose()
    hideContextMenu()
    hideFileNaming()
    hideDirectoryNaming()
    store.selected = []
  })
 })
 </script>
 <template>
  <UiBarrier
    :class="{
      'ring-white/80': light,
      'ring-white/30': dark,
      'light': light,
      'dark': dark,
    }"
    :setup="setup"
    class="ring-1"
    @contextmenu.prevent="toggleContextMenu"
  >
    <UiSplitter :max="300" :min="162" :size="256">
      <template v-slot:secondary>
        <UiSidebar/>
      </template>
      <template v-slot:primary>
        <div
          class="size-full flex flex-col items-stretch bg-white dark:bg-black">
          <UiNavbar
            class="bg-gradient-to-b from-white to-gray-100 border-b border-gray-200"
            @confirm="$emit('select', store.selected.map(f => ({...f, object: {...f.object}})))"
            @dismiss="$emit('close')"
          />
          <UiTasks/>
          <UiToaster/>
          <div class="relative flex-1 overflow-hidden">
            <KeepAlive>
              <UiFiles
                :key="store.activeDirectoryId"
                :directory-id="store.activeDirectoryId"
                class="absolute inset-0"
              />
            </KeepAlive>
          </div>
        </div>
      </template>
    </UiSplitter>
    <UiContextMenu/>
    <UiDirectoryNaming/>
    <UiFileNaming/>
    <UiDropFeedback/>
  </UiBarrier>
 </template>
--- a/src/frontend/widgets/UiContextMenu.vue
+++ b/src/frontend/widgets/UiContextMenu.vue
@ -0,0 +1,275 @@
 <script lang="ts" setup>
 import {pickFiles} from '../store'
 import {emit, formatDate, humanSize} from '../../shared'
 import {onMounted, ref, watch} from 'vue'
 import {alignWithPoint, showPreview} from '../utils'
 import VButton from './VButton.vue'
 import {
  canShare,
  controller,
  copyDirName,
  copyFileName,
  copyFilePath,
  file,
  handleNewDir,
  hideContextMenu,
  isTarget,
  removeDir,
  removeFile,
  renameDir,
  share,
 } from './UiContextMenuController'
 import {showFileNaming} from './UiFileNamingController'
 import UiIconButton from './VIconButton.vue'
 import UiText from './VText.vue'
 import {getRootBarrier} from './utils'
 import {onClickOutside} from "@vueuse/core";
 type Status =
  | 'forward'   // 开始 -> 结束
  | 'completed' // 结束位置
  | 'reverse'   // 结束 -> 开始
  | 'dismissed' // 开始位置
 const barrier = ref<Node | null>()
 const menuElm = ref<HTMLElement | null>(null)
 const status = ref<Status>("dismissed")
 const visible = ref(controller.visible)
 const align = (): void => {
  if (menuElm.value) {
    alignWithPoint(
      menuElm.value,
      controller.x,
      controller.y,
      'bottom-left',
      [0, 0],
    )
  }
 }
 const handleForward = () => {
  emit('contextmenu:shown')
  status.value = 'forward'
 }
 const handleCompleted = () => {
  status.value = "completed"
 }
 const handleReverse = () => {
  status.value = "reverse"
 }
 const handleDismissed = () => {
  status.value = "dismissed"
  if (controller.visible) {
    visible.value = true
    align()
  } else {
    emit('contextmenu:hidden')
    hideContextMenu()
  }
 }
 watch(menuElm, align)
 watch([
  barrier,
  () => controller.x,
  () => controller.y,
 ], () => {
  // ??? 检测位置变化
  if (visible.value) {
    visible.value = false
  } else {
    align()
  }
 })
 watch(() => controller.visible, (value) => {
  visible.value = value
 })
 // 这里接收的参数实际上是为了忽略参数
 const handleClick = (_: any): void => {
  hideContextMenu()
 }
 onMounted(() => {
  barrier.value = getRootBarrier()
 })
 onClickOutside(menuElm, hideContextMenu)
 </script>
 <template>
  <Teleport v-if="barrier" :to="barrier">
    <div
      ref="menuElm"
      class="absolute z-[100] top-0 left-0 text-sm empty:hidden"
      data-role="contextmenu"
      role="menu"
    >
      <transition
        enter-from-class="duration-100 opacity-0 translate-y-4 scale-95 sm:translate-y-0"
        enter-to-class="duration-100 opacity-100 translate-y-0 scale-100"
        leave-from-class="duration-100 opacity-100 translate-y-0 scale-100"
        leave-to-class="duration-100 opacity-0 translate-y-4 scale-95 sm:translate-y-0"
        @enter="align"
        @before-enter="handleForward"
        @after-enter="handleCompleted"
        @before-leave="handleReverse"
        @after-leave="handleDismissed"
      >
        <div
          v-if="visible"
          class="transition-all origin-bottom-left min-w-36 popup-panel relative z-10 flex flex-col items-stretch gap-0.5 p-1.5"
        >
          <v-button
            v-if="isTarget('sidebar', 'directory')"
            class="hover:bg-indigo-500 hover:text-white"
            icon="ArrowClockwiseSolid"
            label="刷新"
            @click="handleClick(emit('dirs:refresh'))"
          />
          <v-button
            v-if="isTarget('content')"
            class="hover:bg-indigo-500 hover:text-white"
            icon="ArrowClockwiseSolid"
            label="刷新"
            @click="handleClick(emit(`files:${controller.directoryId ?? 0}:reload`))"
          />
          <div class="my-0.5 mx-2.5 border-t border-slate-300 first:hidden"/>
          <v-button
            v-if="isTarget('directory', 'content')"
            class="hover:bg-indigo-500 hover:text-white"
            icon="FileAdd"
            label="上传文件"
            @click="handleClick(pickFiles(controller.directoryId ?? 0))"
          />
          <v-button
            v-if="isTarget('sidebar')"
            class="hover:bg-indigo-500 hover:text-white"
            icon="FolderAdd"
            label="新建文件夹"
            @click="handleClick(handleNewDir(false))"
          />
          <!-- 与文件夹相关的选项 -->
          <template
            v-if="isTarget('directory') && (controller.directoryId ?? 0) > 0">
            <v-button
              class="hover:bg-indigo-500 hover:text-white"
              icon="FolderAdd"
              label="新建子文件夹"
              @click="handleClick(handleNewDir(true))"
            />
            <v-button
              class="hover:bg-indigo-500 hover:text-white"
              icon="Rename"
              label="重命名"
              @click="handleClick(renameDir())"
            />
            <v-button
              class="hover:bg-indigo-500 hover:text-white"
              icon="Copy"
              label="复制名称"
              @click="handleClick(copyDirName())"
            />
            <div class="my-0.5 mx-2.5 border-t border-slate-300"/>
            <v-button
              class="hover:bg-red-500 hover:text-white"
              icon="Delete"
              label="删除"
              @click="handleClick(removeDir())"
            />
          </template>
          <!-- 与文件相关的选项 -->
          <div
            v-if="isTarget('file', 'filename') && file"
            class="w-60 flex flex-col items-stretch"
          >
            <div class="flex items-center gap-1 p-1.5">
              <UiIconButton
                icon="Eye"
                primary
                tooltip="预览文件"
                @click="handleClick(showPreview({
                  name: file.name,
                  mime: file.mime,
                  path: file.object.path,
                  thumb: file.object.thumb,
                }))"
              />
              <UiIconButton
                icon="Rename"
                primary
                tooltip="重命名文件"
                @click="handleClick(showFileNaming({
                  dirId: file.directoryId,
                  id: file.id,
                }))"
              />
              <UiIconButton
                icon="Copy"
                primary
                tooltip="复制文件名称"
                @click="handleClick(copyFileName())"
              />
              <UiIconButton
                v-if="canShare()"
                icon="Share"
                primary
                tooltip="分享文件"
                @click="handleClick(share())"
              />
              <div class="flex-1"/>
              <UiIconButton
                class="text-red-500 hover:bg-red-500 hover:text-white"
                icon="Delete"
                tooltip="删除文件"
                @click="handleClick(removeFile())"
              />
            </div>
            <div class="mt-1 mb-3 mx-2 border-t border-slate-300"/>
            <div class="leading-tight mx-2.5">
              <div class="text-xs text-gray-500">名称：</div>
              <UiText
                :text="file.name"
                class="mt-1 break-all leading-tight"
                tag="div"
              />
            </div>
            <div class="my-3 mx-2 border-t border-slate-300"/>
            <div class="text-xs mx-2.5">
              <div class="text-xs text-gray-500">详情：</div>
              <div class="mt-1">
                <span class="inline-block w-16 text-right">大小：</span>
                <span>{{ humanSize(file.object.size) }}</span>
              </div>
              <div>
                <span class="inline-block w-16 text-right">尺寸：</span>
                <span>{{ file.object.width }}x{{ file.object.height }}</span>
              </div>
              <div>
                <span class="inline-block w-16 text-right">上传时间：</span>
                <span>{{ formatDate(file.createdAt) }}</span>
              </div>
              <div>
                <span class="inline-block w-16 text-right">修改时间：</span>
                <span>{{ formatDate(file.updatedAt) }}</span>
              </div>
            </div>
            <div class="my-3 mx-2 border-t border-slate-300"/>
            <div class="text-xs whitespace-pre-wrap mx-2.5 pb-2">
              <div class="flex items-center text-xs text-gray-500">链接：</div>
              <UiText
                :text="file.object.path"
                class="break-all rounded mt-1 leading-tight"
                tag="div"
                @dblclick="copyFilePath()"
              />
            </div>
          </div>
        </div>
      </transition>
    </div>
  </Teleport>
 </template>
--- a/src/frontend/widgets/UiContextMenuController.ts
+++ b/src/frontend/widgets/UiContextMenuController.ts
@ -0,0 +1,173 @@
 import {copyText} from '../../shared'
 import {computed, nextTick, reactive} from "vue";
 import {deleteFile, store} from "../store";
 import {dispatch} from "../worker.ts";
 import {showDirectoryNaming} from "./UiDirectoryNamingController";
 import {toast} from "./UiToastController";
 export type ContextmenuTarget =
  | "directory" // 作用在侧边栏文件夹按钮上
  | "file" // 作用在右侧文件图标上
  | "filename" // 作用在右侧文件标题图标上
  | "sidebar" // 作用在侧边栏上
  | "content"; // 作用在右侧文件容器上
 export interface ContextMenuOptions {
  x: number;
  y: number;
  directoryId?: number;
  fileId?: number;
  target?: ContextmenuTarget;
 }
 interface ContextMenuState extends ContextMenuOptions {
  visible: boolean;
 }
 export const controller = reactive<ContextMenuState>({
  x: 0,
  y: 0,
  directoryId: 0,
  fileId: undefined,
  visible: false,
 });
 export const file = computed((): CloudFile | undefined => {
  return controller.fileId
    ? store.files[controller.directoryId ?? 0]?.find(f => f.id === controller.fileId)
    : undefined
 })
 export const directory = computed(() => {
  const dirId = controller.directoryId
  return dirId == 0
    ? store.rootDirectory
    : dirId != null
      ? store.directories.get(dirId)
      : undefined
 })
 export function isTarget(...targets: ContextmenuTarget[]): boolean {
  return controller.target != null && targets.includes(controller.target);
 }
 export function showContextMenu(opts: ContextMenuOptions): void {
  if (opts.target && opts.directoryId != null) {
    controller.visible = true;
    void nextTick(() => {
      controller.x = opts.x;
      controller.y = opts.y;
      controller.fileId = opts.fileId;
      controller.directoryId = opts.directoryId;
      controller.target = opts.target;
    });
  } else {
    hideContextMenu();
  }
 }
 export function hideContextMenu() {
  if (controller.visible) {
    controller.visible = false;
    void nextTick(() => {
      if (!controller.visible) {
        controller.directoryId = undefined;
        controller.fileId = undefined;
        controller.target = undefined;
      }
    });
  }
 }
 export function toggleContextMenu(evt: MouseEvent): void {
  const elm = evt.target as HTMLElement;
  if (elm.closest('[data-role="contextmenu"]')) {
    return;
  }
  const dataset = elm.closest<HTMLElement>("[data-contextmenu]")?.dataset;
  if (dataset && dataset.target != null && dataset.directoryId != null) {
    showContextMenu({
      x: evt.clientX,
      y: evt.clientY,
      fileId: dataset.fileId ? Number(dataset.fileId) : undefined,
      directoryId: Number(dataset.directoryId),
      target: dataset.target as ContextmenuTarget,
    });
  } else {
    hideContextMenu();
  }
 }
 export function handleNewDir(child?: boolean) {
  showDirectoryNaming({
    action: "create",
    pid: child ? controller.directoryId : undefined,
  });
 }
 // 重命名文件或文件夹
 export function renameDir() {
  const {directoryId} = controller
  if (isTarget("directory") && directoryId) {
    showDirectoryNaming({
      id: directoryId,
      action: "rename",
    });
  }
 }
 export function copyDirName() {
  const text = directory.value?.title
  text?.length && copyText(text)
 }
 export function copyFileName() {
  const text = file.value?.name
  text?.length && copyText(text)
 }
 export function copyFilePath() {
  const text = file.value?.object.path
  text?.length && copyText(text)
 }
 export function removeDir() {
  const {directoryId} = controller
  if (isTarget("directory") && directoryId) {
    dispatch("dir", "delete", directoryId)
      .then(() => store.directories.delete(directoryId))
      .then(() => toast("success", "删除成功"))
      .catch((error) => toast("error", error));
  }
 }
 export function removeFile() {
  const f = file.value;
  if (isTarget("file", "filename") && f) {
    dispatch("file", "delete", f.id)
      .then(() => deleteFile(f))
      .then(() => toast("success", "删除成功"))
      .catch((error) => toast("error", error));
  }
 }
 export function canShare() {
  return typeof navigator.canShare === 'function' && navigator.canShare({
    title: "MDN",
    text: "Learn web development on MDN!",
    url: "https://developer.mozilla.org",
  })
 }
 export function share() {
  if (file.value) {
    navigator
      .share({
        title: file.value!.name,
        text: file.value!.object.path,
        url: file.value!.object.path,
      })
      .then(() => toast("success", "分享成功"))
      .catch((error) => toast("error", error));
  }
 }
--- a/src/frontend/widgets/UiDialog.vue
+++ b/src/frontend/widgets/UiDialog.vue
@ -0,0 +1,159 @@
 <script lang="ts" setup>
 import {getScrollParent} from '../utils'
 import {nextTick, ref, watch} from 'vue'
 import {onClickOutside, useEventListener} from "@vueuse/core";
 type Status =
  | 'forward'   // 开始 -> 结束
  | 'completed' // 结束位置
  | 'reverse'   // 结束 -> 开始
  | 'dismissed' // 开始位置
 defineOptions({
  inheritAttrs: false,
 })
 const props = withDefaults(defineProps<{
  barrier: Node
  visible?: boolean
  rounded?: boolean
  outside?: 'close' | 'shake' | 'none'
  zIndex?: number
 }>(), {
  rounded() {
    return true
  },
  outside() {
    return 'none'
  },
  zIndex() {
    return 100
  },
 })
 const emit = defineEmits<{
  (ev: Status): void
 }>()
 const panel = ref<HTMLElement | null>(null)
 const visible = ref(false)
 const isOpen = ref(false)
 const status = ref<Status>('dismissed')
 let resumeScrolling: VoidFunction | undefined
 const setStatus = (value: Status): void => {
  status.value = value
 }
 watch(() => props.visible, (value) => {
  if (value && !visible.value) {
    visible.value = true
    nextTick(() => {
      isOpen.value = value
    })
  } else {
    isOpen.value = value
  }
 })
 watch(status, (value) => {
  visible.value = value !== 'dismissed'
  emit(value)
  if (value === 'dismissed' && resumeScrolling) {
    resumeScrolling()
  }
 })
 watch(panel, el => {
  if (el) {
    const scroll = getScrollParent(el)
    // 检测是否存在滚动条
    const div = document.createElement('div')
    div.style.cssText = 'position:fixed;left:0;right:0'
    scroll.appendChild(div)
    const hasScroll = div.offsetWidth < scroll.offsetWidth
    div.remove()
    if (!hasScroll) {
      return
    }
    const {overflowY, position, inset} = scroll.style
    scroll.style.overflowY = 'scroll'
    scroll.style.position = 'fixed'
    scroll.style.inset = '0'
    const resume = () => {
      if (resume === resumeScrolling) {
        resumeScrolling = undefined
        scroll.style.inset = inset
        scroll.style.overflowY = overflowY
        scroll.style.position = position
      }
    }
    resumeScrolling = resume
  }
 })
 useEventListener(panel, 'animationend', () => {
  panel.value?.classList.remove('v-snake')
 })
 onClickOutside(panel, () => {
  if (props.outside === 'close') {
    isOpen.value = false
  } else if (props.outside === 'shake' && panel.value) {
    const w = panel.value.clientWidth
    const v = ((w + 10) / w).toFixed(4)
    panel.value.style.setProperty("--v-snake", v)
    panel.value.classList.add('v-snake')
  }
 })
 </script>
 <template>
  <Teleport :to="barrier">
    <div
      v-if="visible"
      :style="{zIndex}"
      class="absolute inset-0 flex-center"
    >
      <Transition
        enter-from-class="opacity-0"
        enter-to-class="backdrop-blur-[2px]"
        leave-from-class="backdrop-blur-[2px]"
        leave-to-class="opacity-0"
        @before-enter="setStatus('forward')"
        @after-enter="setStatus('completed')"
        @before-leave="setStatus('reverse')"
        @after-leave="setStatus('dismissed')"
      >
        <div
          v-if="isOpen"
          :class="{
            'backdrop-blur-sm': status === 'completed',
            'rounded-lg': rounded,
          }"
          class="transition-all ease-out absolute z-0 inset-0 bg-black/30"
        />
      </Transition>
      <Transition
        enter-from-class="opacity-0 scale-75"
        leave-to-class="opacity-0 scale-75"
      >
        <div
          v-if="isOpen"
          ref="panel"
          class="transition-all ease-out relative z-10"
          role="dialog"
          style="--v-snake:90%"
          v-bind="$attrs"
        >
          <slot/>
        </div>
      </Transition>
    </div>
  </Teleport>
 </template>
--- a/src/frontend/widgets/UiDirectoryButton.vue
+++ b/src/frontend/widgets/UiDirectoryButton.vue
@ -0,0 +1,85 @@
 <script lang="ts" setup>
 import {hideContextMenu} from './UiContextMenuController'
 import {once} from '../../shared'
 import {computed, inject, type Ref} from 'vue'
 import {getDirectoryEntry, hasChildDirectoryEntries, store} from '../store'
 import VIcon from "./VIcon.vue";
 const props = defineProps<{
  dir: number
  deep: number
 }>()
 const expandedItems = inject<Ref<number[]>>("expandedItems")!
 const highlighting = inject<Ref<number>>("highlighting")!
 const isExpanded = computed(() => expandedItems.value.includes(props.dir))
 const isSelected = computed(() => store.activeDirectoryId === props.dir)
 const hasIndicative = computed(() => hasChildDirectoryEntries(props.dir))
 const info = computed(() => getDirectoryEntry(props.dir))
 const handleIndicative = (): void => {
  hideContextMenu()
  const i = expandedItems.value.indexOf(props.dir)
  if (i > -1) expandedItems.value.splice(i, 1)
  else expandedItems.value.push(props.dir)
 }
 const handleClick = () => (store.activeDirectoryId = props.dir)
 const handleContextmenu = () => {
  once("contextmenu:shown", () => {
    highlighting.value = props.dir
  })
  once("contextmenu:hidden", () => {
    if (highlighting.value === props.dir) {
      highlighting.value = -1
    }
  })
 }
 </script>
 <template>
  <button
    v-if="info"
    :class="{
      'text-indigo-600': isSelected,
      'bg-black/10': isSelected,
      'bg-black/5': !isSelected && highlighting === dir,
    }"
    :data-directory-id="dir"
    class="w-full flex items-center py-1.5 px-1 text-left hover:bg-black/5 rounded-md"
    data-contextmenu="true"
    data-target="directory"
    @click="handleClick"
    @contextmenu="handleContextmenu"
  >
    <span
      v-if="deep > 0"
      :style="{ width: `${deep}em` }"
      class="block pointer-events-none"
    />
    <span class="size-[1em] scale-110">
      <span
        v-if="hasIndicative"
        class="size-full flex flex-col justify-center items-center group"
        @click.stop="handleIndicative"
      >
        <span
          :class='{ "rotate-90": isExpanded }'
          class="size-0 border-[3px] border-transparent border-l-gray-600 group-hover:border-l-gray-900 border-r-0 scale-x-125 origin-center"
        />
      </span>
    </span>
    <span class="flex pointer-events-none ml-1">
      <v-icon
        :name="dir === 0 ? 'FileBriefcase' : isExpanded ? 'FolderOpen' : 'Folder'"
        size="1.25em"
      />
    </span>
    <span
      class="flex-1 pointer-events-none line-clamp-1 ml-1"
      v-text="info.title"
    />
  </button>
 </template>
--- a/src/frontend/widgets/UiDirectoryNaming.vue
+++ b/src/frontend/widgets/UiDirectoryNaming.vue
@ -0,0 +1,199 @@
 <script lang="ts" setup>
 import {getRootBarrier} from './utils'
 import {dispatch} from '../worker'
 import {emit} from '../../shared'
 import {computed, nextTick, onMounted, ref, watch} from 'vue'
 import {store} from '../store'
 import UiDialog from './UiDialog.vue'
 import {controller} from './UiDirectoryNamingController'
 import {toast} from './UiToastController'
 const barrier = ref<Node | null>()
 const hasError = ref(false)
 const conformClicked = ref(false)
 const isSubmitting = ref(false)
 const content = ref('')
 const title = computed(() => {
  if (controller.action === 'rename') {
    return '重命名文件夹'
  } else if (controller.pid) {
    return "创建子文件夹"
  } else {
    return "创建文件夹"
  }
 })
 const parent = computed(() => {
  return controller.pid
    ? store.directories.get(controller.pid)
    : undefined
 })
 const directory = computed(() => {
  return controller.id
    ? store.directories.get(controller.id)
    : undefined
 })
 const handleCancel = (): void => {
  if (!isSubmitting.value) {
    controller.visible = false
    nextTick(() => {
      hasError.value = false
      conformClicked.value = false
      isSubmitting.value = false
      content.value = ''
    })
  }
 }
 const handleConfirm = (): void => {
  if (isSubmitting.value) {
    return;
  }
  if (content.value.trim().length < 2) {
    hasError.value = true
  }
  if (hasError.value) {
    return;
  }
  if (!conformClicked.value) {
    conformClicked.value = true
    return
  }
  isSubmitting.value = true
  requestAnimationFrame(async () => {
    try {
      const title = content.value.trim()
      switch (controller.action) {
        case "create": {
          const pid = parent.value?.id ?? 0
          const result = await dispatch("dir", "create", {title, pid});
          store.directories.set(result.id, result);
          toast("success", `成功创建文件夹 “${title}”`)
          if (pid && pid === controller.pid) {
            emit("directory:expanded", parent.value!.id)
          }
          break
        }
        case "rename": {
          const dir = store.directories.get(directory.value!.id);
          if (!dir) {
            toast("error", "文件夹不存在")
            break
          }
          const res = await dispatch("dir", "rename", {id: dir.id, title});
          Object.assign(dir, res);
          toast("success", `成功将文件夹 “${directory.value!.title}” 重命名为 “${title}”`)
          break
        }
      }
      isSubmitting.value = false
      handleCancel()
    } catch (err) {
      isSubmitting.value = false
      toast('error', err as any)
    }
  })
 }
 watch(() => controller.visible, (value) => {
  if (value && controller.action === 'rename') {
    content.value = directory.value?.title ?? ''
  }
 })
 watch(content, (value) => {
  conformClicked.value = false
  if (value.trim().length > 1) {
    hasError.value = false
  }
 })
 onMounted(() => {
  barrier.value = getRootBarrier()
 })
 </script>
 <template>
  <UiDialog
    v-if="barrier"
    :barrier="barrier"
    :visible="controller.visible"
    class="w-96 rounded-md overflow-hidden shadow-2xl"
    outside="shake"
    @dismissed="handleCancel"
  >
    <div class="bg-white p-6">
      <h3
        id="modal-title"
        class="text-base font-semibold leading-6 text-gray-900"
        v-text="title"
      />
      <p class="text-xs text-gray-500 mt-1">
        <template v-if="controller.action === 'rename'">
          您正在修改文件夹 “<b
          class="text-black align-baseline text-sm">{{ directory!.title }}</b>”；<br/>
        </template>
        <template v-else-if="controller.pid">
          您正在为 “<b
          class="text-black align-baseline text-sm">{{ parent!.title }}</b>”
          创建子文件夹；<br/>
        </template>
        <span :class="{ 'text-red-500': hasError }">
          文件夹的名称至少 2 个字符，请尽量不要超过 8 个汉字。
        </span>
      </p>
      <div class="mt-4">
        <input
          v-model="content"
          :disabled="isSubmitting" autocomplete="off"
          class="block w-full rounded-md border-0 px-4 py-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-gray-100 disabled:cursor-progress"
          maxlength="20" minlength="2"
          placeholder="请输入文件夹名称" required
          @blur="hasError = content.length < 2"/>
      </div>
    </div>
    <div
      class="bg-gray-50 px-6 py-3 flex justify-end gap-4 border-t border-t-slate-200 text-sm font-semibold">
      <button
        :disabled="isSubmitting"
        class="rounded-md px-4 py-2 select-none transition-all bg-white text-gray-900 shadow-sm hover:bg-gray-50 ring-1 ring-inset ring-gray-300 disabled:bg-gray-100 disabled:hover:bg-gray-100 disabled:cursor-progress"
        type="button"
        @click="handleCancel"
      >
        取消
      </button>
      <button
        :disabled="isSubmitting"
        class="inline-flex items-center gap-2 px-4 py-2 rounded-md transition-all select-none bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 disabled:bg-indigo-400 disabled:hover:bg-indigo-400 disabled:cursor-progress"
        type="button"
        @click="handleConfirm"
      >
        <svg
          v-if="isSubmitting"
          class="animate-spin h-3 w-3 text-white"
          fill="none"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            class="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
          />
          <path
            class="opacity-75"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            fill="currentColor"
          />
        </svg>
        {{ conformClicked ? "确定提交？" : "提交" }}
      </button>
    </div>
  </UiDialog>
 </template>
--- a/src/frontend/widgets/UiDirectoryNamingController.ts
+++ b/src/frontend/widgets/UiDirectoryNamingController.ts
@ -0,0 +1,29 @@
 import { reactive } from 'vue'
 interface DirectoryNamingOptions {
  pid?: number
  id?: number
  action: 'create' | 'rename'
 }
 interface DirectoryNamingState extends DirectoryNamingOptions {
  visible: boolean
 }
 export const controller = reactive<DirectoryNamingState>({
  visible: false,
  pid: undefined,
  id: undefined,
  action: 'create',
 })
 export function hideDirectoryNaming() {
  controller.visible = false
 }
 export function showDirectoryNaming(opts: DirectoryNamingOptions): void {
  controller.visible = true
  controller.action = opts.action
  controller.pid = opts.pid
  controller.id = opts.id
 }
--- a/src/frontend/widgets/UiDirectoryTree.vue
+++ b/src/frontend/widgets/UiDirectoryTree.vue
@ -0,0 +1,35 @@
 <script lang="ts" setup>
 import {timestamp} from '../../shared';
 import {computed, inject, type Ref} from 'vue'
 import {store} from '../store'
 import DirectoryTreeItem from './UiDirectoryTreeItem.vue'
 const props = defineProps<{
  pid: number
  deep: number
 }>()
 const expandedItems = inject<Ref<number[]>>("expandedItems")
 const isExpanded = computed(() => {
  return expandedItems?.value.includes(props.pid)
 })
 const children = computed(() => {
  return Array.from(store.directories.values()).filter(d => d.pid === props.pid).sort((a, b) => {
    if (a.sort != b.sort) return a.sort - b.sort
    return timestamp(a.createdAt) - timestamp(b.createdAt)
  });
 })
 </script>
 <template>
  <ul v-if="children.length && (pid === 0 || isExpanded)" class="w-full">
    <DirectoryTreeItem
      v-for="item in children"
      :key="item.id"
      :deep="deep"
      :dir="item.id"
    />
  </ul>
 </template>
--- a/src/frontend/widgets/UiDirectoryTreeItem.vue
+++ b/src/frontend/widgets/UiDirectoryTreeItem.vue
@ -0,0 +1,22 @@
 <script lang="ts" setup>
 import DirectoryButton from './UiDirectoryButton.vue'
 import DirectoryTree from './UiDirectoryTree.vue'
 defineProps<{
  dir: number
  deep: number
 }>()
 </script>
 <template>
  <li class="w-full my-0.5">
    <DirectoryButton
      :deep="deep"
      :dir="dir"
    />
    <DirectoryTree
      :deep="deep + 1"
      :pid="dir"
    />
  </li>
 </template>
--- a/src/frontend/widgets/UiDropFeedback.vue
+++ b/src/frontend/widgets/UiDropFeedback.vue
@ -0,0 +1,69 @@
 <script lang="ts" setup>
 import {store, uploadFiles} from '../store'
 import VIcon from './VIcon.vue'
 import {onBeforeUnmount, onMounted} from 'vue'
 const handleDragOver = (event: DragEvent) => {
  event.preventDefault();
  // const target = event.target as HTMLElement
  // store.isDragging = !!target.closest('[data-ui-barrier]');
  store.isDragging = event.composedPath().some(et => (et instanceof Element) ? et.closest('[data-ui-barrier]') : false)
 }
 const handleMouseout = () => {
  store.isDragging = false
 }
 const handleDrop = (ev: DragEvent): void => {
  // 阻止浏览器的默认释放行为
  // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
  ev.preventDefault();
  if (store.isDragging) {
    store.isDragging = false
    if (store.activeDirectoryId >= 0) {
      const directoryId = store.activeDirectoryId
      if (ev.dataTransfer?.items) {
        for (const item of ev.dataTransfer.items) {
          const file = item.getAsFile()
          file && uploadFiles(directoryId, file)
        }
      } else if (ev.dataTransfer?.files) {
        uploadFiles(directoryId, ev.dataTransfer.files)
      }
    }
  }
 }
 onMounted(() => {
  console.log("dragover drop mouseout")
  document.addEventListener('dragover', handleDragOver)
  document.addEventListener('drop', handleDrop)
  document.addEventListener('mouseout', handleMouseout)
 })
 onBeforeUnmount(() => {
  document.removeEventListener('dragover', handleDragOver)
  document.removeEventListener('drop', handleDrop)
  document.removeEventListener('mouseout', handleMouseout)
 })
 </script>
 <template>
  <Transition enter-from-class="opacity-0" leave-to-class="opacity-0">
    <div
      v-if="store.isDragging"
      class="absolute z-50 inset-0 overflow-hidden pointer-events-none
       flex flex-col justify-center items-center transition-opacity
       w-full h-full bg-black/30 backdrop-blur-sm"
      data-drop-feedback
    >
      <div
        class="p-3 rounded-md bg-gray-100/90 flex text-sm items-center gap-1">
        <VIcon name="InfoSolid" size="20"/>
        <span>释放鼠标开始上传文件</span>
      </div>
    </div>
  </Transition>
 </template>
--- a/src/frontend/widgets/UiFile.vue
+++ b/src/frontend/widgets/UiFile.vue
@ -0,0 +1,101 @@
 <script lang="ts" setup>
 import VText from './VText.vue'
 import {toast} from './UiToastController'
 import {once} from '../../shared'
 import {computed, inject, type Ref, ref} from 'vue'
 import {store, toggleSelect} from '../store'
 import VBadge from './VBadge.vue'
 import UiFileThumbnail from './UiFileThumbnail.vue'
 const props = defineProps<{
  file: CloudFile
 }>()
 const isSelected = computed((): boolean => {
  return store.selected.some(f => f.id === props.file.id)
 })
 const index = computed((): number => {
  const index = store.selected.findIndex(f => f.id === props.file.id)
  return index > -1 ? index + 1 : 0
 })
 const elmRef = ref<HTMLDivElement>()
 const scrollIntoView = () => {
  elmRef.value?.scrollIntoView({
    behavior: 'smooth',
    block: 'nearest',
  })
 }
 const handleClick = () => {
  const {status} = props.file.object
  if (status < 3) {
    toast("warn", "文件处理中，暂时不可选")
  } else if (status > 3) {
    toast("error", props.file.object.error ?? '文件错误，无法选择')
  } else {
    scrollIntoView()
    toggleSelect(props.file)
  }
 }
 const onNameClick = () => {
  scrollIntoView()
 }
 const highlighting = inject<Ref<number>>("highlighting")!
 const handleContextmenu = () => {
  once("contextmenu:shown", () => {
    highlighting.value = props.file.id
  })
  once("contextmenu:hidden", () => {
    if (highlighting.value === props.file.id) {
      highlighting.value = -1
    }
  })
 }
 </script>
 <template>
  <div ref="elmRef" class="relative w-32 p-2 z-0">
    <div class="w-28 h-28 p-1 relative rounded-lg">
      <template v-if="isSelected || highlighting === file.id">
        <div
          :class="{
            'ring-2': isSelected,
            'ring-inset': isSelected,
            'ring-indigo-600': isSelected,
          }"
          class="absolute left-0 right-0 top-0 bottom-0 bg-black bg-opacity-5 rounded-lg"
        />
        <v-badge
          v-if="index > 0 && isSelected && store.multiple"
          :value="index"
          class="bg-red-500 z-10"
        />
      </template>
      <div class="size-full flex-center p-0.5 select-none">
        <UiFileThumbnail
          :file="file"
          @click="handleClick"
          @contextmenu="handleContextmenu"
        />
      </div>
    </div>
    <div
      class="w-28 h-9 px-1 py-1 text-center line-clamp-2 text-ellipsis leading-4 text-xs">
      <v-text
        :data-directory-id="file.directoryId"
        :data-file-id="file.id"
        :text="file.name"
        data-contextmenu="true"
        data-target="file"
        @click="onNameClick"
        @contextmenu="handleContextmenu"
      />
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiFileNaming.vue
+++ b/src/frontend/widgets/UiFileNaming.vue
@ -0,0 +1,157 @@
 <script lang="ts" setup>
 import {store, updateFile} from '../store'
 import {getRootBarrier} from './utils'
 import {dispatch} from '../worker'
 import {computed, nextTick, onMounted, ref, watch} from 'vue'
 import UiDialog from './UiDialog.vue'
 import {controller} from './UiFileNamingController'
 import {toast} from './UiToastController'
 const barrier = ref<Node | null>()
 const hasError = ref(false)
 const conformClicked = ref(false)
 const isSubmitting = ref(false)
 const content = ref('')
 const file = computed(() => {
  return controller.dirId != null && controller.id
    ? store.files[controller.dirId]?.find((f: CloudFile) => f.id === controller.id)
    : undefined
 })
 const handleCancel = (): void => {
  if (!isSubmitting.value) {
    controller.visible = false
    nextTick(() => {
      hasError.value = false
      conformClicked.value = false
      isSubmitting.value = false
      content.value = ''
    })
  }
 }
 const handleConfirm = (): void => {
  if (isSubmitting.value) {
    return;
  }
  if (content.value.trim().length < 2) {
    hasError.value = true
  }
  if (hasError.value) {
    return;
  }
  if (!conformClicked.value) {
    conformClicked.value = true
    return
  }
  isSubmitting.value = true
  requestAnimationFrame(async () => {
    try {
      const id = controller.id!
      const name = content.value.trim()
      const res = await dispatch("file", "rename", {id, name})
      updateFile(res)
      isSubmitting.value = false
      handleCancel()
    } catch (err) {
      isSubmitting.value = false
      toast('error', err as any)
    }
  })
 }
 watch(() => controller.visible, (value) => {
  if (value) {
    content.value = file.value?.name ?? ''
  }
 })
 watch(content, (value) => {
  conformClicked.value = false
  if (value.trim().length > 1) {
    hasError.value = false
  }
 })
 onMounted(() => {
  barrier.value = getRootBarrier()
 })
 </script>
 <template>
  <UiDialog
    v-if="barrier"
    :barrier="barrier"
    :visible="controller.visible"
    class="w-96 rounded-md overflow-hidden shadow-2xl"
    outside="shake"
    @dismissed="handleCancel"
  >
    <div class="bg-white p-6">
      <h3 id="modal-title"
          class="text-base font-semibold leading-6 text-gray-900">
        文件重命名
      </h3>
      <p class="text-xs text-gray-500 mt-1">
        您正在重命名文件 “<b
        class="text-black align-baseline text-sm">{{ file!.name }}</b>”；<br/>
        <span :class="{'text-red-500': hasError}">
          文件夹的名称至少 2 个字符，请尽量不要超过 50 个汉字。
        </span>
      </p>
      <div class="mt-4">
        <input
          v-model="content"
          :disabled="isSubmitting"
          autocomplete="off"
          class="block w-full rounded-md border-0 px-4 py-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-gray-100 disabled:cursor-progress"
          maxlength="20"
          minlength="2"
          placeholder="请输入文件夹名称"
          required
        />
      </div>
    </div>
    <div
      class="bg-gray-50 px-6 py-3 flex justify-end gap-4 border-t border-t-slate-200 text-sm font-semibold">
      <button
        :disabled="isSubmitting"
        class="rounded-md px-4 py-2 select-none transition-all bg-white text-gray-900 shadow-sm hover:bg-gray-50 ring-1 ring-inset ring-gray-300 disabled:bg-gray-100 disabled:hover:bg-gray-100 disabled:cursor-progress"
        type="button"
        @click="handleCancel"
      >
        取消
      </button>
      <button
        :disabled="isSubmitting"
        class="inline-flex items-center gap-2 px-4 py-2 rounded-md transition-all select-none bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 disabled:bg-indigo-400 disabled:hover:bg-indigo-400 disabled:cursor-progress"
        type="button"
        @click="handleConfirm"
      >
        <svg
          v-if="isSubmitting"
          class="animate-spin h-3 w-3 text-white"
          fill="none"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            class="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
          />
          <path
            class="opacity-75"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            fill="currentColor"
          />
        </svg>
        {{ conformClicked ? "确定提交？" : "提交" }}
      </button>
    </div>
  </UiDialog>
 </template>
--- a/src/frontend/widgets/UiFileNamingController.ts
+++ b/src/frontend/widgets/UiFileNamingController.ts
@ -0,0 +1,25 @@
 import { reactive } from 'vue'
 interface FileNamingOptions {
  dirId?: number
  id?: number
 }
 interface FileNamingState extends FileNamingOptions {
  visible: boolean
 }
 export const controller = reactive<FileNamingState>({
  visible: false,
  dirId: undefined,
  id: undefined,
 })
 export function hideFileNaming(): void {
  controller.visible = false
 }
 export function showFileNaming(opts: Required<FileNamingOptions>): void {
  Object.assign(controller, opts)
  controller.visible = true
 }
--- a/src/frontend/widgets/UiFileThumbnail.vue
+++ b/src/frontend/widgets/UiFileThumbnail.vue
@ -0,0 +1,45 @@
 <script lang="ts" setup>
 import VIcon from './VIcon.vue'
 import {computed} from 'vue'
 const props = defineProps<{
  file: CloudFile
 }>()
 const classes = computed(() => {
  if (props.file.object.status !== 3) {
    return ["size-full", 'p-2']
  } else if (props.file.object.width < props.file.object.height) {
    return ["h-full", "w-auto", "min-w-[1em]"]
  } else {
    return ["w-full", "h-auto", "min-h-[1em]"]
  }
 })
 </script>
 <template>
  <div
    :class="classes"
    :data-directory-id="file.directoryId"
    :data-file-id="file.id"
    class="p-0.5 relative flex-center bg-white text-xs ring-2 ring-inset ring-white ring-offset-1 drop-shadow"
    data-contextmenu="true"
    data-target="file"
  >
    <template v-if="file.object.status < 3" class="flex items-center">
      <v-icon class="size-full text-gray-500" name="FileSync"/>
    </template>
    <template v-else-if="file.object.status > 3">
      <v-icon name="FileError" size="14"/>
      <span class="mt-1 text-gray-500">处理失败</span>
    </template>
    <img
      v-else
      :alt="file.name"
      :class="classes.join(' ')"
      :loading="'lazy'"
      :src="file.object.thumb"
      class="pointer-events-none"
    />
  </div>
 </template>
--- a/src/frontend/widgets/UiFiles.vue
+++ b/src/frontend/widgets/UiFiles.vue
@ -0,0 +1,83 @@
 <script lang="ts" setup>
 import {store, useFiler} from '../store'
 import UiFile from './UiFile.vue'
 import UiMistake from './UiMistake.vue'
 import UiNoData from './UiNoData.vue'
 import UiPagination from './UiPagination.vue'
 import VLoading from './VLoading.vue'
 import {emit, timestamp} from '../../shared'
 import {computed, provide, ref} from 'vue'
 const props = defineProps<{
  directoryId: number
 }>()
 const filer = useFiler(props.directoryId)
 const highlighting = ref(-1)
 const maxPage = computed(() => Math.ceil(filer.total / filer.limit))
 const list = computed(() => (store.files[props.directoryId] ?? [])
  .sort((a, b) => timestamp(a.createdAt) - timestamp(b.createdAt))
  .reverse())
 provide("highlighting", highlighting)
 const reload = (): void => emit(`files:${props.directoryId}:reload`)
 const jump = (to: number): void => emit(`files:${props.directoryId}:jump`, to)
 </script>
 <template>
  <VLoading
    v-if="filer.view === 'loader'"
    class="w-full h-full"
  />
  <UiMistake
    v-else-if="filer.view === 'error'"
    :message="filer.error"
    @refresh="reload"
  />
  <UiNoData
    v-else-if="filer.view === 'empty'"
    :data-directory-id="directoryId"
    data-contextmenu="true"
    data-target="content"
    subtitle="支持单次和批量上传，仅能够上传图片、视频和音频文件，严禁上传公司数据或其他违禁文件"
    title="拖拽文件至此处即可上传"
    @refresh="reload"
  />
  <div
    v-else
    :data-directory-id="directoryId"
    class="flex-1 flex flex-col items-stretch"
    data-contextmenu="true"
    data-target="content"
  >
    <div class="relative flex-1 overflow-y-auto">
      <div
        class="flex-1 flex flex-wrap items-start justify-start content-start p-4">
        <UiFile
          v-for="file in list"
          :key="file.id"
          :file="file"
        />
      </div>
    </div>
    <div
      class="border-t border-slate-200 w-full flex items-center leading-tight text-sm select-none">
      <span class="py-1 px-2">共 {{ filer.total }} 条记录</span>
      <span
        v-if="store.mode === 'select' && store.selected.length > 0"
        class="border-l py-1 px-2"
      >
        已选中 {{ store.selected.length }} 项
      </span>
      <div class="flex-1"/>
      <UiPagination
        v-if="maxPage > 1"
        :current="filer.page"
        :total="maxPage"
        class="mx-2"
        @change="jump"
      />
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiMimeSelect.vue
+++ b/src/frontend/widgets/UiMimeSelect.vue
@ -0,0 +1,64 @@
 <script lang="ts" setup>
 import type {IconName} from './VIcons'
 import UiButton from './VButton.vue'
 import {hideContextMenu} from './UiContextMenuController'
 import VDropdown from './VDropdown.vue'
 import {store} from '../store'
 const items: Array<{
  id: FileMime
  icon: IconName
  label: string
 }> = [
  {
    id: "image",
    icon: "Image",
    label: "只看图片"
  },
  {
    id: "video",
    icon: "Video",
    label: "只看视频",
  },
  {
    id: "all",
    icon: "FileMultiple",
    label: "图片和视频",
  }
 ]
 </script>
 <template>
  <v-dropdown
    :disabled="store.lockMime"
    :tooltip="store.lockMime ? null : '切换要显示的文件类型'"
    @open="hideContextMenu"
  >
    <template #default>
      <svg
        class="pointer-events-none size-5" viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5.5 5h13a1 1 0 0 1 .5 1.5L14 12v7l-4-3v-4L5 6.5A1 1 0 0 1 5.5 5"
          fill="none" stroke="currentColor"
          stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2"></path>
      </svg>
      {{ items.find(i => i!.id === store.mime)!.label }}
    </template>
    <template #content>
      <UiButton
        v-for="item in items"
        :key="item.id"
        :icon="item.icon"
        :label="item.label"
        class="flex items-center gap-2 px-3 py-1.5 rounded hover:bg-indigo-500 hover:text-white text-sm select-none"
        icon-size="1.5em"
        type="button"
        @click="store.mime = item.id"
      />
    </template>
  </v-dropdown>
 </template>
--- a/src/frontend/widgets/UiMistake.vue
+++ b/src/frontend/widgets/UiMistake.vue
@ -0,0 +1,30 @@
 <script lang="ts" setup>
 defineProps<{
  message?: string
 }>()
 defineEmits<{
  (type: "refresh"): void
 }>()
 </script>
 <template>
  <div class="size-full flex-center">
    <div class="text-sm font-semibold dark:text-white">
      <slot name="message">
        {{ message ?? '哦哦，我们遇到了一些问题!' }}
      </slot>
    </div>
    <slot name="button">
      <button
        class="
          mx-auto mt-4 px-4 py-2 rounded-lg transition-all text-sm font-semibold
          bg-gray-50 ring-1 ring-inset ring-gray-400/75 focus:ring-2 focus:ring-indigo-500
          shadow-sm dark:bg-transparent dark:text-white
        "
        @pointerup="$nextTick(() => $emit('refresh'))"
        v-text="'刷新'"
      />
    </slot>
  </div>
 </template>
--- a/src/frontend/widgets/UiModeTools.vue
+++ b/src/frontend/widgets/UiModeTools.vue
@ -0,0 +1,65 @@
 <script lang="ts" setup>
 import {deleteFile, store} from '../store'
 import VButton from './VButton.vue'
 import {toast} from './UiToastController'
 import {dispatch} from '../worker.ts'
 import {computed, ref} from 'vue'
 const emit = defineEmits<{
  (ev: 'confirm'): void
 }>()
 const isPending = ref(false)
 const hasSelected = computed(() => store.selected.length > 0)
 const isManageMode = computed(() => store.mode === 'manage')
 const handleConfirm = async () => {
  if (!hasSelected.value) {
    return
  }
  if (store.mode === 'select') {
    emit('confirm')
    return
  }
  isPending.value = true
  const files = store.selected.slice()
  const deletes = Array.from(new Set(files.map(f => f.id)))
  dispatch('file', "delete", deletes)
    .then(() => {
      store.selected = store.selected.filter(f => deletes.includes(f.id))
      files.forEach(deleteFile)
      toast('success', '操作成功')
    })
    .catch(error => toast('error', error))
    .finally(() => isPending.value = false)
 }
 </script>
 <template>
  <transition enter-from-class="opacity-0" leave-to-class="opacity-0">
    <div v-if="hasSelected" class="flex items-center transition-all gap-4">
      <v-button
        :disabled="isPending"
        class="bg-white border hover:bg-gray-50 text-sm font-semibold h-8 focus:ring-4 transition-all focus:ring-gray-100 shadow-sm"
        label="取消2"
        @click="store.selected = []"
      />
      <v-button
        :class="{
          'bg-red-500': isManageMode,
          'hover:bg-red-600': isManageMode,
          'focus:ring-red-200': isManageMode,
          'bg-indigo-500': !isManageMode,
          'hover:bg-indigo-600': !isManageMode,
          'focus:ring-indigo-200': !isManageMode,
        }"
        :disabled="isPending"
        :label="isManageMode ? '删除' : '确定'"
        class="text-sm font-semibold h-8 focus:ring-4 transition-all text-white shadow-sm"
        @click="handleConfirm"
      />
      <div class="w-[1px] h-4 bg-gray-100 mx-2 flex-shrink-0"/>
    </div>
  </transition>
 </template>
--- a/src/frontend/widgets/UiNavbar.vue
+++ b/src/frontend/widgets/UiNavbar.vue
@ -0,0 +1,54 @@
 <script lang="ts" setup>
 import {store} from '../store'
 import VBadge from './VBadge.vue'
 import VIconButton from './VIconButton.vue'
 import UiMimeSelect from './UiMimeSelect.vue'
 import UiModeTools from './UiModeTools.vue'
 import UiThemeSelect from './UiThemeSelect.vue'
 const emit = defineEmits<{
  (ev: 'dismiss'): void
  (ev: 'confirm'): void
 }>()
 const handleDismiss = () => {
  store.showTasksPanel = false
  emit('dismiss')
 }
 </script>
 <template>
  <div
    class="relative z-50 h-12 px-2 flex-shrink-0 flex gap-2 items-center content-center">
    <div class="flex-1"/>
    <UiModeTools @confirm="$emit('confirm')"/>
    <UiMimeSelect/>
    <UiThemeSelect/>
    <div/>
    <div class="flex relative">
      <v-icon-button
        :class="{
          'ring-2': store.showTasksPanel,
          'ring-indigo-500': store.showTasksPanel,
        }"
        data-tasks-trigger
        icon="TaskListSolid"
        tooltip="任务列表"
        @click="store.showTasksPanel = !store.showTasksPanel"
      />
      <v-badge
        v-if="store.tasks.length > 0"
        :value="store.tasks.length"
      />
    </div>
    <template v-if="store.mode === 'select'">
      <div class="w-[1px] h-4 bg-gray-100 mx-2 flex-shrink-0"/>
      <v-icon-button
        class="focus:ring-red-500 text-red-500"
        icon="DismissSolid"
        tooltip="关闭"
        @click="handleDismiss"
      />
    </template>
  </div>
 </template>
--- a/src/frontend/widgets/UiNoData.vue
+++ b/src/frontend/widgets/UiNoData.vue
@ -0,0 +1,40 @@
 <script lang="ts" setup>
 import VIcon from './VIcon.vue'
 defineProps<{
  title?: string
  subtitle?: string
 }>()
 defineEmits<{
  (ev: 'refresh'): void
 }>()
 </script>
 <template>
  <div class="w-full h-full flex-center select-none">
    <div class="max-w-96 text-center pointer-events-none">
      <v-icon
        class="text-gray-300 transition-colors"
        name="MailInbox"
        size="4em"
      />
      <h2 v-if="$slots.title || title" class="line-clamp-1 mt-4">
        <slot name="title">{{ title }}</slot>
      </h2>
      <p v-if="$slots.subtitle || subtitle" class="text-sm text-gray-500 mt-2">
        <slot name="subtitle">{{ subtitle }}</slot>
      </p>
    </div>
    <button
      class="
        flex items-center px-4 py-2 rounded-xl font-semibold mt-4 mx-auto bg-gray-100 text-sm
        hover:text-indigo-600 hover:bg-indigo-100 transition-colors ring-1 ring-inset ring-slate-300/50
        focus:ring-2 focus:ring-indigo-500
      "
      @click.stop="$emit('refresh')"
    >
      <span>点我刷新</span>
    </button>
  </div>
 </template>
--- a/src/frontend/widgets/UiPaginateEllipsis.vue
+++ b/src/frontend/widgets/UiPaginateEllipsis.vue
@ -0,0 +1,21 @@
 <script lang="ts" setup>
 import VIcon from './VIcon.vue'
 defineProps<{
  forward: boolean
 }>()
 </script>
 <template>
  <div>
    <span
      class="opacity-0 group-hover:opacity-100 transition-colors flex flex-col justify-center items-center absolute inset-0">
      <v-icon v-if="forward" class="scale-75" name="ChevronDoubleRight"/>
      <v-icon v-else class="scale-75" name="ChevronDoubleLeft"/>
    </span>
    <span
      class="opacity-100 group-hover:opacity-0 flex flex-col justify-center items-center">
      <v-icon name="MoreHorizontal"/>
    </span>
  </div>
 </template>
--- a/src/frontend/widgets/UiPaginateItem.vue
+++ b/src/frontend/widgets/UiPaginateItem.vue
@ -0,0 +1,32 @@
 <script lang="ts" setup>
 defineProps<{
  active?: boolean
  disabled?: boolean
 }>()
 </script>
 <template>
  <button
    :class='{
      "text-indigo-600": active,
      "cursor-default": active,
      "hover:bg-gray-100": !active,
      "hover:text-indigo-600": active,
    }'
    :disabled="disabled"
    class="
      relative inline-flex flex-col justify-center items-center leading-tight
      px-1 group
      text-sm font-semibold text-gray-900
      focus:outline-offset-0
      hover:text-indigo-600
      disabled:text-inherit disabled:bg-transparent disabled:opacity-40
      min-w-[2em] min-h-[2em]
    "
    type="button"
    @contextmenu.stop.prevent=""
  >
    <slot />
  </button>
 </template>
--- a/src/frontend/widgets/UiPagination.vue
+++ b/src/frontend/widgets/UiPagination.vue
@ -0,0 +1,83 @@
 <script lang="ts" setup>
 import {type Page, paginate} from '../../shared'
 import {computed} from 'vue'
 import UiPaginateEllipsis from './UiPaginateEllipsis.vue'
 import UiPaginateItem from './UiPaginateItem.vue'
 const props = defineProps<{
  total: number // 总页数
  current: number // 当前页数
 }>()
 const emit = defineEmits<{
  (ev: 'change', value: number): void
 }>()
 const pages = computed(() => paginate(props.current, props.total))
 const handleClick = (to: number) => {
  if (to !== props.current) {
    emit('change', to)
  }
 }
 const handlePage = (page: Page): void => {
  if (!page.ellipsis) {
    handleClick(page.value as number)
  } else if (page.forward) {
    handleClick(Math.min(props.current + 5, props.total))
  } else {
    handleClick(Math.min(props.current - 5, props.total))
  }
 }
 </script>
 <template>
  <nav
    aria-label="Pagination"
    class="isolate inline-flex -space-x-px gap-x-1.5"
  >
    <UiPaginateItem
      :disabled="current === 1"
      @click="handleClick(props.current - 1)"
    >
      <svg
        aria-hidden="true"
        class="h-5 w-5"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          clip-rule="evenodd"
          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
          fill-rule="evenodd"
        />
      </svg>
    </UiPaginateItem>
    <UiPaginateItem
      v-for="page in pages"
      :active="page.value === current"
      @click="handlePage(page)"
    >
      <UiPaginateEllipsis v-if="page.ellipsis" :forward="page.forward"/>
      <template v-else>{{ page.value }}</template>
    </UiPaginateItem>
    <UiPaginateItem
      :disabled="current === total"
      @click="handleClick(props.current + 1)"
    >
      <svg
        aria-hidden="true"
        class="size-5"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          clip-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          fill-rule="evenodd"
        />
      </svg>
    </UiPaginateItem>
  </nav>
 </template>
--- a/src/frontend/widgets/UiSidebar.vue
+++ b/src/frontend/widgets/UiSidebar.vue
@ -0,0 +1,90 @@
 <script lang="ts" setup>
 import logo from '../assets/logo.png'
 import {toast} from './UiToastController'
 import {getScrollBarWidth} from '../utils'
 import {coerce, off, on, sleep} from '../../shared'
 import {onBeforeUnmount, onMounted, provide, ref} from 'vue'
 import {refreshDirectories, store} from '../store'
 import DirectoryButton from './UiDirectoryButton.vue'
 import DirectoryTree from './UiDirectoryTree.vue'
 const isLoading = ref(false)
 const expandedItems = ref<number[]>([])
 const highlighting = ref(-1)
 const scrollWidth = ref(0)
 provide("expandedItems", expandedItems)
 provide("highlighting", highlighting)
 const refresh = async (): Promise<void> => {
  if (!isLoading.value) {
    isLoading.value = true
    await sleep(300)
    await refreshDirectories()
      .then(() => toast('success', "刷新侧边栏成功"))
      .catch((err) => toast('error', `刷新侧边栏失败，原因：${coerce(err)}`))
      .then(() => sleep(300))
      .finally(() => isLoading.value = false)
  }
 }
 const onContextmenuDismissed = () => (highlighting.value = -1);
 const onExpanded = (id: number): void => {
  while (id > 0) {
    const dir = store.directories.get(id)
    if (!dir) return
    if (!expandedItems.value.includes(id)) {
      expandedItems.value.push(id)
    }
    id = dir.pid
  }
 }
 onMounted(() => {
  on("contextmenu:dismissed", onContextmenuDismissed)
  on("dirs:refresh", refresh)
  on("directory:expanded", onExpanded)
  scrollWidth.value = getScrollBarWidth()
 })
 onBeforeUnmount(() => {
  off("contextmenu:dismissed", onContextmenuDismissed)
  off("dirs:refresh", refresh)
  off("directory:expanded", onExpanded)
 })
 </script>
 <template>
  <div
    class="relative h-full flex flex-col items-stretch"
    data-contextmenu="true"
    data-directory-id="0"
    data-target="sidebar"
  >
    <div class="flex content-center items-center px-2 h-12 gap-2 select-none">
      <span
        class="flex-center size-8 flex-shrink-0 pointer-events-none select-none">
        <img
          :src="logo"
          alt="资源管理器"
          class="size-8"
        />
      </span>
      <span class="flex-1">资源管理器</span>
      <span
        v-if="isLoading"
        class="block size-4 border-2 border-gray-300 rounded-full border-l-black animate-spin ease-in-out"
      />
    </div>
    <div
      :style="{marginRight: `${-scrollWidth}px`}"
      class="flex-1 text-sm overflow-y-scroll p-2"
    >
      <div class="mb-0.5">
        <DirectoryButton :deep="0" :dir="0"/>
      </div>
      <DirectoryTree :deep="0" :pid="0"/>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiSplitter.vue
+++ b/src/frontend/widgets/UiSplitter.vue
@ -0,0 +1,63 @@
 <script lang="ts" setup>
 import {ref} from 'vue'
 const props = defineProps<{
  size: number
  min: number
  max: number
  disabled?: boolean
 }>()
 const isDraggingRef = ref(false)
 const dragElmRef = ref<HTMLElement | null>(null)
 const currentSize = ref(256)
 const handleMouseMove = (evt: MouseEvent) => {
  evt.preventDefault()
  isDraggingRef.value = true
  const onMouseMove = (e: MouseEvent): void => {
    updateSize(e)
  }
  const onMouseUp = (): void => {
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
    isDraggingRef.value = false
    document.body.style.cursor = ''
  }
  document.body.style.cursor = 'col-resize'
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
  updateSize(evt)
 }
 const updateSize = (event: MouseEvent): void => {
  const parentRect = dragElmRef.value?.parentElement?.getBoundingClientRect()
  if (!parentRect) return
  let newSize = event.clientX - parentRect.left
  if (props.min > 0) newSize = Math.max(newSize, props.min)
  if (props.max > 0) newSize = Math.min(newSize, 356)
  currentSize.value = Math.max(newSize, 0)
 }
 </script>
 <template>
  <div class="flex items-stretch h-full w-full">
    <div :style="{flexBasis: `${currentSize}px`}" class="relative z-0">
      <slot name="secondary"/>
    </div>
    <div
      v-if="!disabled"
      ref="dragElmRef"
      :class="{'bg-green-700': isDraggingRef}"
      class="relative z-20 w-1 h-full -mx-0.5 hover:bg-green-700 transition-colors cursor-col-resize"
      @mousedown="handleMouseMove"
    />
    <div class="relative z-10 flex-1">
      <slot name="primary"/>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiTask.vue
+++ b/src/frontend/widgets/UiTask.vue
@ -0,0 +1,134 @@
 <script lang="ts" setup>
 import {dispatch} from '../worker'
 import {
  humanSize,
  isCompleted,
  isInvalid,
  isValid,
  sleep,
  statusIndex
 } from '../../shared'
 import {ref, watch} from 'vue'
 import {showPreview} from '../utils'
 import VIcon from './VIcon.vue'
 import UiTaskAction from './UiTaskAction.vue'
 import {toast} from './UiToastController'
 import VProgress from './VProgress.vue'
 import {vTooltip} from '../directives'
 const props = defineProps<{
  task: Task
 }>()
 const isActing = ref(false)
 const progress = ref(0)
 const handleAction = async (action: "cancel" | "remove" | "resume") => {
  const {hash: fileHash, id: taskId} = props.task
  try {
    isActing.value = true
    await sleep(300)
    await dispatch("task", action as "cancel", {fileHash, taskId})
  } catch (error) {
    toast('error', error as any)
  }
  isActing.value = false
 }
 const handlePreview = () => {
  showPreview({
    name: props.task.name,
    mime: props.task.mime,
    thumb: props.task.path, // todo first frame for video
    path: props.task.path,
  })
 }
 watch(props.task, (t) => {
  if (isInvalid(t)) {
    progress.value = 1
  } else if (statusIndex(t.status) <= statusIndex("readend")) {
    progress.value = (t.progress ?? 0) / 2
  } else if (!isCompleted(t)) {
    progress.value = ((t.progress ?? 0) + 1) / 2
  }
  progress.value = 0.678
 }, {immediate: true})
 </script>
 <template>
  <div class="relative w-full text-sm text-gray-500 py-2 px-3 group">
    <div
      :class="{'text-red-500': isInvalid(task)}"
      class="flex items-center gap-2 mb-1 text-sm"
    >
      <span v-if="isInvalid(task)" class="size-4 flex-center">
        <v-icon
          v-tooltip="task.error ?? '上传失败'"
          class="text-red-500"
          name="ErrorCircleSolid"
          size="1.5em"
        />
      </span>
      <span
        v-else-if="isValid(task)"
        class="size-4 border-2 border-gray-300 rounded-full border-l-black animate-spin ease-in-out"
      />
      <span v-else>
        <v-icon
          class="text-green-500"
          name="CheckmarkCircleSolid"
          size="1.5em"
        />
      </span>
      <span class="size-4 flex-center">
        <v-icon :name="task.mime.startsWith('image/') ? 'Image' : 'Video'"/>
      </span>
      <div class="line-clamp-1 flex-1 font-semibold break-all">
        {{ task.name }}
      </div>
      <v-progress
        :class="{hidden: !isValid(task)}"
        :label="progress.toString()"
        :value="progress"
        class="w-20"
      />
      <div
        class="w-16 text-right text-gray-600 select-none group-hover:opacity-0">
        {{ humanSize(task.size) }}
      </div>
    </div>
    <div
      class="absolute inset-y-0 right-0 flex gap-2 items-center opacity-0 group-hover:opacity-100">
      <div class="flex items-center gap-0.5">
        <UiTaskAction
          icon="Eye"
          tooltip="预览文件"
          @click="handlePreview"
        />
        <UiTaskAction
          v-if="isValid(task)"
          :disabled="isActing"
          icon="SyncOff"
          tooltip="取消"
          @click="handleAction('cancel')"
        />
        <UiTaskAction
          v-if="isInvalid(task)"
          :disabled="isActing"
          icon="Sync"
          tooltip="恢复"
          @click="handleAction('resume')"
        />
        <UiTaskAction
          :disabled="isActing"
          class="focus:text-red-600 hover:text-red-600"
          icon="Delete"
          tooltip="删除"
          @click="handleAction('remove')"
        />
      </div>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/UiTaskAction.vue
+++ b/src/frontend/widgets/UiTaskAction.vue
@ -0,0 +1,25 @@
 <script lang="ts" setup>
 import type {IconName} from './VIcons'
 import VIcon from './VIcon.vue'
 import {vTooltip} from '../directives'
 defineProps<{
  icon: IconName
  tooltip: string
  disabled?: boolean
 }>()
 </script>
 <template>
  <button
    v-tooltip="tooltip"
    :disabled="disabled"
    class="
      flex-shrink-0 inline-flex justify-center items-center text-gray-900 rounded text-xs size-6 opacity-65
      hover:text-indigo-600 focus:text-indigo-600 hover:opacity-100 focus:opacity-100
    "
    type="button"
  >
    <v-icon :name="icon"/>
  </button>
 </template>
--- a/src/frontend/widgets/UiTasks.vue
+++ b/src/frontend/widgets/UiTasks.vue
@ -0,0 +1,82 @@
 <script lang="ts" setup>
 import {store} from '../store'
 import UiTask from './UiTask.vue'
 import {dispatch} from '../worker'
 import {isCompleted, isInvalid, isValid} from '../../shared'
 import {computed, ref} from 'vue'
 import VIcon from './VIcon.vue'
 const tasks = computed(() => {
  const list = store.tasks.sort((a, b) => b.id - a.id)
  const completes = list.filter(isCompleted).length
  const invalids = list.filter(isInvalid).length
  const pends = list.filter(isValid).length
  return {
    list,
    completes,
    invalids,
    pends,
    length: completes + invalids + pends,
  }
 })
 const cleaning = ref(false)
 const clean = async () => {
  cleaning.value = true
  await dispatch('task', 'cleanup')
  cleaning.value = false
 }
 </script>
 <template>
  <Transition
    enter-from-class="-translate-y-1/3 opacity-0"
    leave-to-class="-translate-y-1/3 opacity-0"
  >
    <div
      v-show="store.showTasksPanel"
      class="
        transition-all
        absolute right-0 top-12 mt-2 mr-2 z-10
        max-h-[400px] w-[400px] min-w-[260px] bg-white text-sm rounded-lg overflow-hidden
        shadow-pop backdrop-blur-[8px] pseudo-border flex flex-col
      "
      data-tasks-panel
    >
      <div
        class="flex-shrink-0 bg-gray-50 border-b pl-2 flex items-center justify-between">
        <div class="py-1">任务列表</div>
        <button
          v-if="tasks.completes || tasks.invalids"
          :disabled="cleaning"
          class="hover:bg-gray-200 h-full p-1"
          @click="clean"
        >
          清空
        </button>
      </div>
      <div class="flex-1 overflow-y-auto overflow-hidden">
        <div
          v-if="!tasks.length"
          class="flex justify-center items-center gap-2 p-8 opacity-40 select-none"
        >
          <VIcon name="MailInbox"/>
          <div>没有上传任务</div>
        </div>
        <template v-for="(task, index) in tasks.list" v-else :key="task.id">
          <div v-if="index > 0" class="border-t border-slate-50"/>
          <UiTask :task="task"/>
        </template>
      </div>
      <div
        v-if="tasks.length"
        class="border-t px-2 py-1 text-center text-xs text-gray-500 select-none"
      >
        <span>共 {{ tasks.length }} 项</span>
        <span v-if="tasks.completes">，完成 {{ tasks.completes }} 项</span>
        <span v-if="tasks.invalids">，失败{{ tasks.invalids }}项</span>
        <span v-if="tasks.pends">，有 {{ tasks.pends }} 项正在进行中</span>
      </div>
    </div>
  </Transition>
 </template>
--- a/src/frontend/widgets/UiThemeSelect.vue
+++ b/src/frontend/widgets/UiThemeSelect.vue
@ -0,0 +1,40 @@
 <script lang="ts" setup>
 import {useTheme} from '../hooks'
 import {hideContextMenu} from './UiContextMenuController'
 import VDropdown from './VDropdown.vue'
 import VButton from "./VButton.vue";
 const {light, use} = useTheme()
 </script>
 <template>
  <v-dropdown
    :icon="light ? 'SunSolid' : 'MoonSolid'"
    tooltip="切换主题"
    @open="hideContextMenu"
  >
    <template #content>
      <v-button
        class="flex items-center gap-2 px-3 py-1.5 rounded hover:bg-indigo-500 hover:text-white text-sm select-none"
        icon="SunSolid"
        icon-size="1.5em"
        label="浅色"
        @click="use = 'light'"
      />
      <v-button
        class="flex items-center gap-2 px-3 py-1.5 rounded hover:bg-indigo-500 hover:text-white text-sm select-none"
        icon="MoonSolid"
        icon-size="1.5em"
        label="深色"
        @click="use = 'dark'"
      />
      <v-button
        class="flex items-center gap-2 px-3 py-1.5 rounded hover:bg-indigo-500 hover:text-white text-sm select-none"
        icon="DesktopSolid"
        icon-size="1.5em"
        label="自动"
        @click="use = 'system'"
      />
    </template>
  </v-dropdown>
 </template>
--- a/src/frontend/widgets/UiToast.vue
+++ b/src/frontend/widgets/UiToast.vue
@ -0,0 +1,85 @@
 <script lang="ts" setup>
 import type {ToastType} from './UiToastController'
 import type {IconName} from "./VIcons";
 import {computed, onMounted, onUnmounted, watch} from 'vue'
 import VIcon from "./VIcon.vue";
 const props = defineProps<{
  type?: ToastType,
  message: string
  duration?: number
  interact?: boolean
 }>()
 const emit = defineEmits<{
  (ev: 'dismiss'): void
  (ev: 'interact', value: boolean): void
 }>()
 type IconInfo = {
  class: string; name: IconName
 }
 const icon = computed((): IconInfo => {
  return ({
    'success': {name: 'CheckmarkCircleSolid', class: 'text-green-500'},
    'error': {name: 'DismissCircleSolid', class: 'text-red-500'},
    'warn': {name: 'ErrorCircleSolid', class: 'text-yellow-500'},
    'info': {name: 'InfoSolid', class: 'text-indigo-500'},
  } as Record<ToastType, IconInfo>)[props.type ?? 'info']
 })
 let timer: ReturnType<typeof setTimeout> | null = null
 const stop = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
 }
 const start = () => {
  const {duration = 3000} = props
  if (duration > 0) {
    timer = setTimeout(() => {
      emit('dismiss')
    }, duration)
  }
 }
 const handleMouseEnter = () => {
  emit('interact', true)
  stop()
 }
 const handleMouseLeave = () => {
  emit('interact', false)
  start()
 }
 watch(() => props.interact, value => {
  stop()
  if (!value) {
    start()
  }
 })
 onMounted(start)
 onUnmounted(stop)
 </script>
 <template>
  <div
    class="
      flex items-center max-w-96 cursor-pointer p-2 mb-2 rounded-lg shadow-lg
      select-none backdrop-blur-sm bg-white/90 ring-1 ring-black/10
    "
    role="alert"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @click.stop="$emit('dismiss')"
  >
    <VIcon size="1.5em" v-bind="icon"/>
    <div class="ms-1 text-sm font-normal" v-html="message"/>
  </div>
 </template>
--- a/src/frontend/widgets/UiToastController.ts
+++ b/src/frontend/widgets/UiToastController.ts
@ -0,0 +1,24 @@
 import {coerce} from "../../shared";
 import {ref} from "vue";
 export type ToastType = "success" | "error" | "warn" | "info";
 export interface Toast {
  key: number;
  type: ToastType;
  message: string;
  duration: number
 }
 export const items = ref<Array<Toast>>([]);
 let nextKey = 0;
 export function toast(type: ToastType, message: any, duration: number = 3000): void {
  items.value.unshift({
    key: ++nextKey,
    type,
    message: String(coerce(message)),
    duration
  });
 }
--- a/src/frontend/widgets/UiToaster.vue
+++ b/src/frontend/widgets/UiToaster.vue
@ -0,0 +1,39 @@
 <script lang="ts" setup>
 import {computed, ref} from 'vue'
 import UiToast from './UiToast.vue'
 import {items} from './UiToastController'
 const renders = computed(() => items.value.slice(0, 4))
 const interact = ref(false)
 const handleDismiss = (key: number): void => {
  const i = items.value.findIndex(i => i.key === key)
  i > -1 && items.value.splice(i, 1)
 }
 </script>
 <template>
  <div class="absolute top-0 left-0 right-0 mt-12 z-40">
    <div class="absolute left-2 top-2 flex flex-col items-center">
      <TransitionGroup
        appear
        enter-from-class="-translate-y-full opacity-0 -mb-8"
        leave-to-class="-translate-y-full opacity-0 -mb-8"
        move-class="transition-all"
      >
        <UiToast
          v-for="(item, index) in renders"
          :key="item.key"
          :duration="item.duration"
          :interact="interact"
          :message="item.message"
          :style="{zIndex: renders.length - index}"
          :type="item.type"
          class="transition-all duration-200 relative"
          @dismiss="handleDismiss(item.key)"
          @interact="interact = $event"
        />
      </TransitionGroup>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/VBadge.vue
+++ b/src/frontend/widgets/VBadge.vue
@ -0,0 +1,14 @@
 <script lang="ts" setup>
 defineProps<{
  value?: string | number
 }>()
 </script>
 <template>
 <span class="
  absolute top-0 right-0 inline-flex items-center justify-center rounded-full px-1 min-w-[1.325em] -translate-y-[45%] translate-x-[45%]
  select-none text-xs font-medium text-white bg-indigo-500 ring-2 ring-white ring-opacity-90 drop-shadow
 ">
  <slot>{{ value }}</slot>
 </span>
 </template>
--- a/src/frontend/widgets/VButton.vue
+++ b/src/frontend/widgets/VButton.vue
@ -0,0 +1,37 @@
 <script lang="ts" setup>
 import type {IconName} from './VIcons'
 import VIcon from "./VIcon.vue";
 import {vTooltip} from '../directives'
 defineProps<{
  type?: 'button' | 'submit' | 'reset'
  icon?: IconName
  label?: string
  iconSize?: number | string
  disabled?: boolean
  tooltip?: string | number
 }>()
 </script>
 <template>
  <button
    v-tooltip="tooltip"
    :disabled="disabled"
    :type="type"
    class="flex items-center flex-shrink-0 gap-2 py-1 px-3 hover:bg-gray-100 rounded"
  >
    <v-icon
      v-if="icon"
      :name="icon"
      :size="iconSize"
      class="pointer-events-none"
    />
    <slot>
      <span
        v-if="label != null"
        class="pointer-events-none"
        v-html="label"
      />
    </slot>
  </button>
 </template>
--- a/src/frontend/widgets/VDropdown.vue
+++ b/src/frontend/widgets/VDropdown.vue
@ -0,0 +1,124 @@
 <script lang="ts" setup>
 import {store} from '../store'
 import type {IconName} from './VIcons'
 import UiButton from './VButton.vue'
 import {getRootBarrier} from './utils'
 import {
  type ComponentPublicInstance,
  computed,
  onMounted,
  ref,
  watch
 } from 'vue'
 import UiIconButton from "./VIconButton.vue";
 import {onClickOutside, useEventListener} from "@vueuse/core";
 import type {Placement} from "../utils";
 import {alignWithElement} from "../utils";
 const props = defineProps<{
  offset?: [number, number],
  placement?: Placement
  disabled?: boolean
  icon?: IconName
  tooltip?: any
 }>()
 defineOptions({
  inheritAttrs: false,
 })
 const emit = defineEmits<{
  (ev: 'open'): void
  (ev: 'close'): void
 }>()
 defineSlots<{
  default(props: { open: boolean }): any
  content(): any
 }>()
 const barrier = ref<Node | null>()
 const trigger = ref<ComponentPublicInstance | null>(null)
 const panel = ref<HTMLElement | null>(null)
 const visible = ref(false)
 const button = computed(() => {
  return trigger.value != null
    ? trigger.value instanceof Node ? trigger.value : trigger.value.$el
    : null
 })
 const handlePanelClick = (evt: Event) => {
  const el = evt.target as HTMLElement
  if (el.tagName === 'BUTTON') {
    visible.value = false
    emit('close')
  }
 }
 watch(visible, () => {
  if (button.value && panel.value) {
    if (visible.value) {
      store.showTasksPanel = false
    }
    alignWithElement(
      button.value,
      panel.value,
      props.placement ?? 'bottom-left',
      props.offset ?? [0, 6]
    )
  }
 })
 useEventListener(
  computed(() => trigger.value?.$el),
  "click", () => {
    emit('open')
    visible.value = true
  },
 )
 onClickOutside(panel, () => {
  visible.value = false
  emit('close')
 }, {ignore: [trigger]})
 onMounted(() => {
  barrier.value = getRootBarrier()
 })
 </script>
 <template>
  <Component
    :is="!$slots.default ? UiIconButton : UiButton"
    ref="trigger"
    :class="{
      'ring-indigo-500': visible,
      'ring-2': visible,
    }"
    :disabled="disabled"
    :icon="icon"
    :tooltip="tooltip"
    class="h-8 text-sm font-semibold"
    v-bind="$attrs"
  >
    <slot :open="visible"/>
  </Component>
  <Teleport v-if="barrier" :to="barrier">
    <div ref="panel" class="absolute top-10 left-10 z-50">
      <transition
        enter-from-class="opacity-0 scale-95 -translate-y-[4px]"
        leave-to-class="opacity-0 scale-95 -translate-y-[4px]"
      >
        <div
          v-if="visible"
          class="transition-all origin-top-left ease-out flex flex-col items-stretch gap-0.5 p-1.5 popup-panel"
          @click="handlePanelClick"
        >
          <slot name="content"/>
        </div>
      </transition>
    </div>
  </Teleport>
 </template>
--- a/src/frontend/widgets/VIcon.vue
+++ b/src/frontend/widgets/VIcon.vue
@ -0,0 +1,21 @@
 <script lang="ts" setup>
 import {type IconName} from './VIcons'
 defineProps<{
  size?: string | number
  name: IconName
 }>()
 </script>
 <template>
  <svg
    :height="size ?? '1.25em'"
    :width="size ?? '1.25em'"
    class="inline-block"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <use :href="`#${name}`" class="pointer-events-none"/>
  </svg>
 </template>
--- a/src/frontend/widgets/VIconButton.vue
+++ b/src/frontend/widgets/VIconButton.vue
@ -0,0 +1,38 @@
 <script lang="ts" setup>
 import type {IconName} from './VIcons'
 import VIcon from "./VIcon.vue";
 import {vTooltip} from '../directives'
 defineProps<{
  icon: IconName
  iconSize?: number | string
  type?: "submit" | "reset" | "button" | undefined
  variant?: "square" | "circle"
  disabled?: boolean
  rounded?: boolean
  primary?: boolean
  tooltip?: string | number
 }>()
 defineEmits<{
  (ev: 'click'): void
 }>()
 </script>
 <template>
  <button
    v-tooltip="tooltip"
    :class="{
      'rounded-full': variant === 'circle',
      'rounded': variant == null,
      'hover:bg-indigo-500': primary,
      'hover:text-white': primary,
    }"
    :disabled="disabled"
    :type="type ?? 'button'"
    class="inline-flex justify-center items-center w-8 h-8 font-semibold leading-tight hover:bg-gray-100 disabled:bg-transparent disabled:cursor-not-allowed disabled:opacity-75 focus:ring-2 focus:ring-indigo-500"
    @click="$emit('click')"
  >
    <v-icon :name="icon" :size="iconSize"/>
  </button>
 </template>
--- a/src/frontend/widgets/VIcons.ts
+++ b/src/frontend/widgets/VIcons.ts
@ -0,0 +1,516 @@
 export const paths = {
  'Folder': 'M7.167 3c.27 0 .535.073.765.21l.135.09l1.6 1.2H15.5a2.5 2.5 0 0 1 2.479 2.174l.016.162L18 7v7.5a2.5 2.5 0 0 1-2.336 2.495L15.5 17h-11a2.5 2.5 0 0 1-2.495-2.336L2 14.5v-9a2.5 2.5 0 0 1 2.336-2.495L4.5 3h2.667zm.99 4.034a1.5 1.5 0 0 1-.933.458l-.153.008L3 7.499V14.5a1.5 1.5 0 0 0 1.356 1.493L4.5 16h11a1.5 1.5 0 0 0 1.493-1.355L17 14.5V7a1.5 1.5 0 0 0-1.355-1.493L15.5 5.5H9.617l-1.46 1.534zM7.168 4H4.5a1.5 1.5 0 0 0-1.493 1.356L3 5.5v.999l4.071.001a.5.5 0 0 0 .302-.101l.06-.054L8.694 5.02L7.467 4.1a.5.5 0 0 0-.22-.093L7.167 4z',
  'FolderSolid': 'M10.565 4.5H15.5a2.5 2.5 0 0 1 2.479 2.174l.016.162L18 7v7.5a2.5 2.5 0 0 1-2.336 2.495L15.5 17h-11a2.5 2.5 0 0 1-2.495-2.336L2 14.5v-7h5.07l.154-.008a1.5 1.5 0 0 0 .823-.353l.111-.106L10.565 4.5zM7.167 3c.27 0 .535.073.765.21l.135.09l1.318.989l-1.952 2.055l-.06.055a.5.5 0 0 1-.221.094l-.081.007H2v-1a2.5 2.5 0 0 1 2.336-2.495L4.5 3h2.667z',
  'FolderAdd': 'M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.465 5.465 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5v-7h4.071a1.5 1.5 0 0 0 1.087-.466L9.619 5.5H15.5A1.5 1.5 0 0 1 17 7v2.6c.358.183.693.404 1 .657V7a2.5 2.5 0 0 0-2.5-2.5H9.667l-1.6-1.2a1.5 1.5 0 0 0-.9-.3H4.5zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.667a.5.5 0 0 1 .3.1l1.227.92l-1.26 1.325a.5.5 0 0 1-.363.155H3v-1zm16 9a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15v-1.5z',
  'FolderAddSolid': 'M9.386 4.29l-1.32-.99a1.5 1.5 0 0 0-.9-.3H4.5A2.5 2.5 0 0 0 2 5.5v1h5.07a.5.5 0 0 0 .363-.156L9.386 4.29zm1.179.21L8.158 7.033a1.5 1.5 0 0 1-1.087.467H2v7A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1 8.4-6.743V7l-.005-.164A2.5 2.5 0 0 0 15.5 4.5h-4.935zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15v-1.5z',
  'FolderArrowRight': 'M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.465 5.465 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5v-7h4.071a1.5 1.5 0 0 0 1.087-.466L9.619 5.5H15.5A1.5 1.5 0 0 1 17 7v2.6c.358.183.693.404 1 .657V7a2.5 2.5 0 0 0-2.5-2.5H9.667l-1.6-1.2a1.5 1.5 0 0 0-.9-.3H4.5zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.667a.5.5 0 0 1 .3.1l1.227.92l-1.26 1.325a.5.5 0 0 1-.363.155H3v-1zM14.5 10a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9zm2.353 4.854l.003-.003a.499.499 0 0 0 .144-.348v-.006a.5.5 0 0 0-.146-.35l-2-2a.5.5 0 0 0-.708.707L15.293 14H12.5a.5.5 0 0 0 0 1h2.793l-1.147 1.146a.5.5 0 0 0 .708.708l2-2z',
  'FolderArrowRightSolid': 'M9.386 4.29l-1.32-.99a1.5 1.5 0 0 0-.9-.3H4.5A2.5 2.5 0 0 0 2 5.5v1h5.07a.5.5 0 0 0 .363-.156L9.386 4.29zm1.179.21L8.158 7.033a1.5 1.5 0 0 1-1.087.467H2v7A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1 8.4-6.743V7l-.005-.164A2.5 2.5 0 0 0 15.5 4.5h-4.935zM14.5 10a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9zm2.353 4.854l.003-.003a.499.499 0 0 0 .144-.348v-.006a.5.5 0 0 0-.146-.35l-2-2a.5.5 0 0 0-.708.707L15.293 14H12.5a.5.5 0 0 0 0 1h2.793l-1.147 1.146a.5.5 0 0 0 .708.708l2-2z',
  'FolderArrowUp': 'M4.5 3h2.667c.324 0 .64.105.9.3l1.6 1.2H15.5A2.5 2.5 0 0 1 18 7v3.257a5.503 5.503 0 0 0-1-.657V7a1.5 1.5 0 0 0-1.5-1.5H9.62L8.157 7.034A1.5 1.5 0 0 1 7.07 7.5H3v7A1.5 1.5 0 0 0 4.5 16h4.707c.099.349.23.683.393 1H4.5A2.5 2.5 0 0 1 2 14.5v-9A2.5 2.5 0 0 1 4.5 3zM3 5.5v1h4.071a.5.5 0 0 0 .363-.155l1.26-1.324L7.467 4.1a.5.5 0 0 0-.3-.1H4.5A1.5 1.5 0 0 0 3 5.5zm16 9a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4.146-2.353l-.003-.003a.497.497 0 0 0-.348-.144h-.006a.498.498 0 0 0-.35.146l-2 2a.5.5 0 0 0 .707.708L14 13.707V16.5a.5.5 0 1 0 1 0v-2.793l1.146 1.147a.5.5 0 1 0 .707-.707l-2-2z',
  'FolderArrowUpSolid': 'M8.067 3.3l1.319.99l-1.953 2.054a.5.5 0 0 1-.362.156H2v-1A2.5 2.5 0 0 1 4.5 3h2.667c.324 0 .64.105.9.3zm.091 3.733L10.565 4.5H15.5a2.5 2.5 0 0 1 2.495 2.336L18 7v3.257A5.5 5.5 0 0 0 9.6 17H4.5A2.5 2.5 0 0 1 2 14.5v-7h5.07a1.5 1.5 0 0 0 1.088-.467zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4.146-2.353l-.003-.003a.497.497 0 0 0-.348-.144h-.006a.498.498 0 0 0-.35.146l-2 2a.5.5 0 0 0 .707.708L14 13.707V16.5a.5.5 0 1 0 1 0v-2.793l1.146 1.147a.5.5 0 1 0 .707-.707l-2-2z',
  'FolderOpen': 'M16.996 7.073V7a2.5 2.5 0 0 0-2.5-2.5H9.664l-1.6-1.2a1.5 1.5 0 0 0-.9-.3H4.5A2.5 2.5 0 0 0 2 5.5l.001 8.998a2.5 2.5 0 0 0 2.201 2.482c.085.014.172.022.26.022H15.18a1.5 1.5 0 0 0 1.472-1.214l1.358-7a1.501 1.501 0 0 0-1.014-1.715zM4.5 4h2.664a.5.5 0 0 1 .3.1l1.734 1.3a.5.5 0 0 0 .3.1h4.998a1.5 1.5 0 0 1 1.5 1.5v.002H5.824a1.5 1.5 0 0 0-1.472 1.214l-1.298 6.676A1.502 1.502 0 0 1 3 14.498L3 5.5A1.5 1.5 0 0 1 4.5 4zm.833 4.407a.5.5 0 0 1 .491-.405h10.713a.5.5 0 0 1 .491.595l-1.357 7a.5.5 0 0 1-.491.405H4.463a.5.5 0 0 1-.49-.595l1.36-7z',
  'FolderOpenSolid': 'M2 5.5A2.5 2.5 0 0 1 4.5 3h2.664c.325 0 .64.105.9.3l1.6 1.2h4.832a2.5 2.5 0 0 1 2.5 2.5v.002H5.824A1.5 1.5 0 0 0 4.35 8.215l-1.577 8.09a2.493 2.493 0 0 1-.773-1.807L2 5.5zm1.773 10.907a.5.5 0 0 0 .491.595H15.18a1.5 1.5 0 0 0 1.472-1.214l1.395-7.19a.5.5 0 0 0-.491-.596H5.824a.5.5 0 0 0-.491.404l-1.56 8z',
  'FolderOpenVertical': 'M4 3.5A1.5 1.5 0 0 1 5.5 2h9A1.5 1.5 0 0 1 16 3.5v3.877c0 .123-.015.245-.045.364L15 11.56V14.5a1.5 1.5 0 0 1-1.5 1.5H12v.742a1.5 1.5 0 0 1-2.04 1.4L5.6 16.46A2.5 2.5 0 0 1 4 14.128V3.5zM7.186 3L10.4 4.24A2.5 2.5 0 0 1 12 6.572V15h1.5a.5.5 0 0 0 .5-.5v-3c0-.04.005-.082.015-.121l.97-3.88A.5.5 0 0 0 15 7.376V3.5a.5.5 0 0 0-.5-.5H7.186zM5 3.958v10.17a1.5 1.5 0 0 0 .96 1.4l4.36 1.681a.5.5 0 0 0 .68-.466V6.572a1.5 1.5 0 0 0-.96-1.4L5.68 3.49a.5.5 0 0 0-.68.467z',
  'FolderOpenVerticalSolid': 'M4.137 2.873C4.049 3.063 4 3.276 4 3.5v10.628a2.5 2.5 0 0 0 1.6 2.332l4.36 1.682c.355.137.72.13 1.04.015V6.568a1.5 1.5 0 0 0-.956-1.398L4.137 2.873zm.797-.763l5.472 2.128A2.5 2.5 0 0 1 12 6.568V16h1.5a1.5 1.5 0 0 0 1.5-1.5v-2.938l.955-3.821c.03-.12.045-.241.045-.364V3.5A1.5 1.5 0 0 0 14.5 2h-9c-.2 0-.391.04-.566.11z',
  'FolderProhibited': 'M2 5.5A2.5 2.5 0 0 1 4.5 3h2.667c.324 0 .64.105.9.3l1.6 1.2H15.5A2.5 2.5 0 0 1 18 7v3.257a5.503 5.503 0 0 0-1-.657V7a1.5 1.5 0 0 0-1.5-1.5H9.62L8.157 7.034A1.5 1.5 0 0 1 7.07 7.5H3v7A1.5 1.5 0 0 0 4.5 16h4.707c.099.349.23.683.393 1H4.5A2.5 2.5 0 0 1 2 14.5v-9zM4.5 4A1.5 1.5 0 0 0 3 5.5v1h4.071a.5.5 0 0 0 .363-.155l1.26-1.324L7.467 4.1a.5.5 0 0 0-.3-.1H4.5zM10 14.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0zm4.5-3.5a3.5 3.5 0 0 0-2.803 5.596l4.9-4.9A3.484 3.484 0 0 0 14.5 11zm2.803 1.404l-4.9 4.9a3.5 3.5 0 0 0 4.9-4.9z',
  'FolderProhibitedSolid': 'M9.386 4.29l-1.32-.99a1.5 1.5 0 0 0-.9-.3H4.5A2.5 2.5 0 0 0 2 5.5v1h5.07a.5.5 0 0 0 .363-.156L9.386 4.29zm1.179.21L8.158 7.033a1.5 1.5 0 0 1-1.087.467H2v7A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1 8.4-6.743V7l-.005-.164A2.5 2.5 0 0 0 15.5 4.5h-4.935zM10 14.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0zm4.5-3.5a3.5 3.5 0 0 0-2.803 5.596l4.9-4.9A3.484 3.484 0 0 0 14.5 11zm0 7a3.5 3.5 0 0 0 2.803-5.596l-4.9 4.9c.585.437 1.31.696 2.097.696z',
  'FolderSwap': 'M7.932 3.21A1.5 1.5 0 0 0 7.167 3H4.5l-.164.005A2.5 2.5 0 0 0 2 5.5v9l.005.164A2.5 2.5 0 0 0 4.5 17h4.377l-.436-.434A1.5 1.5 0 0 1 8.085 16H4.5l-.144-.007A1.5 1.5 0 0 1 3 14.5V7.499l4.071.001l.153-.008a1.5 1.5 0 0 0 .934-.458L9.617 5.5H15.5l.145.007A1.5 1.5 0 0 1 17 7v5.883l1 1V7l-.005-.164l-.016-.162A2.5 2.5 0 0 0 15.5 4.5H9.667l-1.6-1.2l-.135-.09zM4.5 4h2.667l.08.006a.5.5 0 0 1 .22.094l1.227.921l-1.26 1.324l-.061.054a.5.5 0 0 1-.302.101L3 6.499V5.5l.007-.144A1.5 1.5 0 0 1 4.5 4zm7.356 9.859a.5.5 0 0 0-.706-.708l-2.003 1.998a.5.5 0 0 0 0 .708l2.003 1.997a.5.5 0 1 0 .706-.708l-1.147-1.144h5.584l-1.146 1.144a.5.5 0 1 0 .706.708l2-1.996a.5.5 0 0 0 0-.708l-2-1.999a.5.5 0 1 0-.707.707l1.145 1.144H10.71l1.146-1.143z',
  'FolderSwapSolid': 'M10.565 4.5H15.5a2.5 2.5 0 0 1 2.479 2.174l.016.162L18 7v6.883l-1.44-1.44a1.5 1.5 0 0 0-2.475 1.56h-1.166a1.5 1.5 0 0 0-2.475-1.56L8.44 14.44a1.5 1.5 0 0 0 0 2.125l.436.434H4.5a2.5 2.5 0 0 1-2.495-2.336L2 14.5v-7h5.07l.154-.008a1.5 1.5 0 0 0 .823-.353l.111-.106L10.565 4.5zM7.167 3c.27 0 .535.073.765.21l.135.09l1.318.989l-1.952 2.055l-.06.055a.5.5 0 0 1-.221.094l-.081.007H2v-1a2.5 2.5 0 0 1 2.336-2.495L4.5 3h2.667zm4.69 10.859a.5.5 0 0 0-.707-.708l-2.003 1.998a.5.5 0 0 0 0 .708l2.003 1.997a.5.5 0 1 0 .706-.708l-1.147-1.144h5.584l-1.146 1.144a.5.5 0 1 0 .706.708l2-1.996a.5.5 0 0 0 0-.708l-2-1.999a.5.5 0 1 0-.707.707l1.145 1.144H10.71l1.146-1.143z',
  'FolderSync': 'M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.465 5.465 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5v-7h4.071a1.5 1.5 0 0 0 1.087-.466L9.619 5.5H15.5A1.5 1.5 0 0 1 17 7v2.6c.358.183.693.404 1 .657V7a2.5 2.5 0 0 0-2.5-2.5H9.667l-1.6-1.2a1.5 1.5 0 0 0-.9-.3H4.5zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.667a.5.5 0 0 1 .3.1l1.227.92l-1.26 1.325a.5.5 0 0 1-.363.155H3v-1zM14.5 19a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9zm1.5-7v.152a3.011 3.011 0 0 0-1.448-.401a2.999 2.999 0 0 0-2.173.878a.5.5 0 0 0 .707.707A2 2 0 0 1 15.468 13H15a.5.5 0 0 0 0 1h1.5a.5.5 0 0 0 .5-.5V12a.5.5 0 0 0-1 0zm-1.552 5.25a2.999 2.999 0 0 0 2.173-.879a.5.5 0 0 0-.707-.707a2 2 0 0 1-2.382.336H14a.5.5 0 0 0 0-1h-1.5a.5.5 0 0 0-.5.5V17a.5.5 0 0 0 1 0v-.152a3.011 3.011 0 0 0 1.448.402z',
  'FolderSyncSolid': 'M9.386 4.29l-1.32-.99a1.5 1.5 0 0 0-.9-.3H4.5A2.5 2.5 0 0 0 2 5.5v1h5.07a.5.5 0 0 0 .363-.156L9.386 4.29zm1.179.21L8.158 7.033a1.5 1.5 0 0 1-1.087.467H2v7A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1 8.4-6.743V7l-.005-.164A2.5 2.5 0 0 0 15.5 4.5h-4.935zM14.5 19a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9zm1.5-7v.152a3.011 3.011 0 0 0-1.448-.401a2.999 2.999 0 0 0-2.173.878a.5.5 0 0 0 .707.707A2 2 0 0 1 15.468 13H15a.5.5 0 0 0 0 1h1.5a.5.5 0 0 0 .5-.5V12a.5.5 0 0 0-1 0zm-1.552 5.25a2.999 2.999 0 0 0 2.173-.879a.5.5 0 0 0-.707-.707a2 2 0 0 1-2.382.336H14a.5.5 0 0 0 0-1h-1.5a.5.5 0 0 0-.5.5V17a.5.5 0 0 0 1 0v-.152a3.011 3.011 0 0 0 1.448.402z',
  'FolderZip': 'M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.465 5.465 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5v-7h4.071a1.5 1.5 0 0 0 1.087-.466L9.619 5.5H15.5A1.5 1.5 0 0 1 17 7v2.6c.358.183.693.404 1 .657V7a2.5 2.5 0 0 0-2.5-2.5H9.667l-1.6-1.2a1.5 1.5 0 0 0-.9-.3H4.5zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.667a.5.5 0 0 1 .3.1l1.227.92l-1.26 1.325a.5.5 0 0 1-.363.155H3v-1zM14.5 19a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9zm1.5-7v.152a3.011 3.011 0 0 0-1.448-.401a2.999 2.999 0 0 0-2.173.878a.5.5 0 0 0 .707.707A2 2 0 0 1 15.468 13H15a.5.5 0 0 0 0 1h1.5a.5.5 0 0 0 .5-.5V12a.5.5 0 0 0-1 0zm-1.552 5.25a2.999 2.999 0 0 0 2.173-.879a.5.5 0 0 0-.707-.707a2 2 0 0 1-2.382.336H14a.5.5 0 0 0 0-1h-1.5a.5.5 0 0 0-.5.5V17a.5.5 0 0 0 1 0v-.152a3.011 3.011 0 0 0 1.448.402z',
  'FolderZipSolid': 'M12.005 4.5h-1.44L8.158 7.033l-.111.106a1.5 1.5 0 0 1-.823.353L7.07 7.5H2v7l.005.164A2.5 2.5 0 0 0 4.5 17h8.504v-1.941a.515.515 0 0 1 0-.117L13.002 14h-.498a.5.5 0 0 1 0-1h.497v-2H12.5a.5.5 0 0 1 0-1h.5V9h-.495a.5.5 0 0 1-.5-.5v-4zm2 0h-1V8h1V4.5zm1 0h.495a2.5 2.5 0 0 1 2.479 2.174l.016.162L18 7v7.5a2.5 2.5 0 0 1-2.336 2.495L15.5 17h-1.496v-1.5h.496a.5.5 0 0 0 0-1h-.497v-.955a.478.478 0 0 0 0-.09V12.5h.502a.5.5 0 1 0 0-1h-.503L14 9h.505a.5.5 0 0 0 .5-.5v-4zM7.932 3.21A1.5 1.5 0 0 0 7.167 3H4.5l-.164.005A2.5 2.5 0 0 0 2 5.5v1h5.07l.082-.007a.5.5 0 0 0 .22-.094l.061-.055L9.385 4.29L8.067 3.3l-.135-.09z',
  'Checkmark': 'M3.374 10.168a.5.5 0 0 0-.748.664l4 4.5a.5.5 0 0 0 .728.022l10.5-10.5a.5.5 0 0 0-.707-.708L7.02 14.271l-3.647-4.103z',
  'CheckmarkSolid': 'M7.032 13.907l-3.471-3.905a.75.75 0 0 0-1.122.996l4 4.5a.75.75 0 0 0 1.091.032l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.938 9.937z',
  'CheckmarkCircle': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0z',
  'CheckmarkCircleSolid': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm3.358 5.646a.5.5 0 0 0-.637-.057l-.07.057L9 11.298L7.354 9.651l-.07-.058a.5.5 0 0 0-.695.696l.057.07l2 2l.07.057a.5.5 0 0 0 .568 0l.07-.058l4.004-4.004l.058-.07a.5.5 0 0 0-.058-.638z',
  'CheckmarkStarburst': 'M8.46 1.897l.99.39a1.5 1.5 0 0 0 1.099 0l.99-.39a2.418 2.418 0 0 1 3.102 1.285l.424.975a1.5 1.5 0 0 0 .777.777l.975.424a2.418 2.418 0 0 1 1.285 3.103l-.39.99a1.5 1.5 0 0 0 0 1.098l.39.99a2.418 2.418 0 0 1-1.285 3.102l-.975.424a1.499 1.499 0 0 0-.777.777l-.424.975a2.418 2.418 0 0 1-3.103 1.285l-.99-.39a1.5 1.5 0 0 0-1.098 0l-.99.39a2.418 2.418 0 0 1-3.102-1.285l-.424-.975a1.5 1.5 0 0 0-.777-.777l-.975-.424a2.418 2.418 0 0 1-1.285-3.103l.39-.99a1.5 1.5 0 0 0 0-1.098l-.39-.99a2.418 2.418 0 0 1 1.285-3.102l.975-.424a1.5 1.5 0 0 0 .777-.777l.424-.975a2.418 2.418 0 0 1 3.103-1.285zm3.445.93l-.99.39a2.5 2.5 0 0 1-1.831 0l-.99-.39a1.418 1.418 0 0 0-1.819.754l-.424.975a2.5 2.5 0 0 1-1.295 1.295l-.975.424a1.418 1.418 0 0 0-.753 1.82l.389.989a2.5 2.5 0 0 1 0 1.831l-.39.99c-.279.71.054 1.514.754 1.819l.975.424a2.5 2.5 0 0 1 1.295 1.295l.424.975a1.418 1.418 0 0 0 1.82.753l.989-.39a2.5 2.5 0 0 1 1.831 0l.99.39c.71.28 1.514-.053 1.819-.753l.424-.975a2.5 2.5 0 0 1 1.295-1.295l.975-.424a1.418 1.418 0 0 0 .753-1.82l-.39-.989a2.5 2.5 0 0 1 0-1.831l.39-.99a1.418 1.418 0 0 0-.753-1.819l-.975-.424a2.5 2.5 0 0 1-1.295-1.295l-.424-.975a1.418 1.418 0 0 0-1.82-.753zm-2.927 8.944l3.648-4.104a.5.5 0 0 1 .8.592l-.053.073l-4 4.5a.5.5 0 0 1-.655.081l-.072-.06l-2-2a.5.5 0 0 1 .638-.765l.069.058l1.625 1.625l3.648-4.104l-3.648 4.104z',
  'CheckmarkStarburstSolid': 'M8.46 1.897l.99.39a1.5 1.5 0 0 0 1.099 0l.99-.39a2.418 2.418 0 0 1 3.102 1.285l.424.975a1.5 1.5 0 0 0 .777.777l.975.424a2.418 2.418 0 0 1 1.285 3.103l-.39.99a1.5 1.5 0 0 0 0 1.098l.39.99a2.418 2.418 0 0 1-1.285 3.102l-.975.424a1.499 1.499 0 0 0-.777.777l-.424.975a2.418 2.418 0 0 1-3.103 1.285l-.99-.39a1.5 1.5 0 0 0-1.098 0l-.99.39a2.418 2.418 0 0 1-3.102-1.285l-.424-.975a1.5 1.5 0 0 0-.777-.777l-.975-.424a2.418 2.418 0 0 1-1.285-3.103l.39-.99a1.5 1.5 0 0 0 0-1.098l-.39-.99a2.418 2.418 0 0 1 1.285-3.102l.975-.424a1.5 1.5 0 0 0 .777-.777l.424-.975a2.418 2.418 0 0 1 3.103-1.285zm4.166 5.77l-3.648 4.104l-1.625-1.625a.5.5 0 0 0-.707.707l2 2a.5.5 0 0 0 .727-.021l4-4.5a.5.5 0 0 0-.747-.665z',
  'ArrowSyncCheckmark': 'M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8a6.5 6.5 0 0 1 5.29-11.554l.016-.017zM8.586 16.363l.016-.016c.408.09.831.14 1.264.15l-.006.006a.502.502 0 0 1 .074-.004a6.5 6.5 0 0 0 3.959-11.706a.5.5 0 1 1 .6-.8a7.5 7.5 0 0 1-4.075 13.495l.996.996a.5.5 0 1 1-.707.707l-2.121-2.12a.5.5 0 0 1 0-.708zm3.768-8.218a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L9 10.792l2.646-2.647a.5.5 0 0 1 .708 0zM5 10a5 5 0 1 1 10 0a5 5 0 0 1-10 0zm5-4a4 4 0 1 0 0 8a4 4 0 0 0 0-8z',
  'ArrowSyncCheckmarkSolid': 'M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8a6.5 6.5 0 0 1 5.29-11.554l.016-.017zM8.586 16.363l.016-.016c.408.09.831.14 1.264.15l-.006.006a.516.516 0 0 1 .074-.004a6.5 6.5 0 0 0 3.959-11.706a.5.5 0 1 1 .6-.8a7.5 7.5 0 0 1-4.075 13.495l.996.996a.5.5 0 1 1-.707.707l-2.121-2.12a.5.5 0 0 1 0-.708zM15 9.999a5 5 0 1 1-10 0a5 5 0 0 1 10 0zm-2.646-1.854a.5.5 0 0 0-.708 0L9 10.792L7.854 9.645a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'Image': 'M14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0zM3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm3-2a2 2 0 0 0-2 2v8c0 .373.102.722.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l4.67 4.588A1.99 1.99 0 0 0 16 14V6a2 2 0 0 0-2-2H6zm0 12h8c.37 0 .715-.1 1.012-.274l-4.662-4.58a.5.5 0 0 0-.7 0l-4.662 4.58A1.99 1.99 0 0 0 6 16z',
  'ImageSolid': 'M12.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1zM3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8c0 .65-.206 1.25-.557 1.742l-5.39-5.308a1.5 1.5 0 0 0-2.105 0l-5.39 5.308A2.986 2.986 0 0 1 3 14V6zm9.5 3a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3zm-8.235 7.448C4.755 16.796 5.354 17 6 17h8c.646 0 1.245-.204 1.735-.552l-5.384-5.3a.5.5 0 0 0-.702 0l-5.384 5.3z',
  'DrawImage': 'M14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0zM3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3.003c-.341.016-.68.092-1 .229V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8.826a.2.2 0 0 0 .34.142l.807-.796l-.002-.003l1.048-1.03l.206-.202l2.55-2.505a1.5 1.5 0 0 1 2.102 0l1.745 1.714l-.707.708l-1.739-1.709a.5.5 0 0 0-.7 0l-2.756 2.707l-1.851 1.828c-.758.748-2.043.21-2.043-.854V6zm.4 11.035c.369.184.83.335 1.217.25c.251-.056.577-.193.943-.347c.885-.373 2.003-.843 2.862-.497c.637.256.584.981.405 1.33c-.035.066-.008.16.065.177a4.6 4.6 0 0 0 1.112.088a.917.917 0 0 1 .023-.14l.375-1.498c.096-.386.296-.74.578-1.02l4.83-4.83a1.87 1.87 0 1 1 2.644 2.645l-4.83 4.829a2.197 2.197 0 0 1-1.02.578l-1.222.305c-1.121.328-2.794.222-3.313-.183c-.449-.35-.467-.887-.316-1.244c.034-.08-.026-.183-.111-.17c-.495.07-.9.25-1.3.427c-.585.26-1.156.513-1.976.411c-.711-.088-1.107-.459-1.325-.825c-.122-.204.147-.392.36-.286z',
  'DrawImageSolid': 'M6 3a3 3 0 0 0-3 3v9.076a.51.51 0 0 0 .868.363l1.342-1.325l3.738-3.68a1.5 1.5 0 0 1 2.104 0l1.742 1.715l2.308-2.308A2.86 2.86 0 0 1 17 9.003V6a3 3 0 0 0-3-3H6zm8 4.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0zm-2.727 7.17l1.813-1.814l-1.735-1.709a.5.5 0 0 0-.702 0l-4.224 4.159c-.22.236-.008.587.296.478l.327-.117c.705-.253 1.764-.55 2.747-.154c.286.115.512.28.684.472c.154-.495.426-.947.794-1.315zm.707.707l4.83-4.83a1.87 1.87 0 1 1 2.644 2.646l-4.83 4.829a2.197 2.197 0 0 1-1.02.578l-1.221.305c-1.122.328-2.795.222-3.314-.183c-.449-.35-.467-.887-.316-1.244c.034-.08-.026-.183-.111-.17c-.495.07-.9.25-1.3.427c-.584.26-1.156.513-1.976.411c-.711-.088-1.107-.459-1.325-.825c-.122-.204.147-.392.36-.286c.368.184.829.335 1.216.25c.251-.056.577-.193.943-.347c.885-.373 2.003-.843 2.863-.497c.636.256.583.981.404 1.33c-.035.066-.008.16.065.177a4.6 4.6 0 0 0 1.112.088a.917.917 0 0 1 .023-.14l.375-1.498c.096-.386.296-.74.578-1.02z',
  'ImageCopy': 'M8.498 7.497a.998.998 0 1 0 0-1.995a.998.998 0 0 0 0 1.995zM5 6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V6zm3-2a2 2 0 0 0-2 2v6c0 .37.101.718.277 1.016L9.79 9.502a1.71 1.71 0 0 1 2.418 0l3.514 3.514C15.9 12.718 16 12.371 16 12V6a2 2 0 0 0-2-2H8zm7.016 9.723l-3.514-3.514a.71.71 0 0 0-1.004 0l-3.514 3.514C7.282 13.9 7.629 14 8 14h6c.37 0 .718-.101 1.016-.277zM12 17c.889 0 1.687-.386 2.236-1H7.5A3.5 3.5 0 0 1 4 12.5V5.764C3.386 6.314 3 7.112 3 8v4.5A4.5 4.5 0 0 0 7.5 17H12z',
  'ImageCopySolid': 'M5 6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6c0 .648-.205 1.248-.555 1.738L12.21 9.502a1.71 1.71 0 0 0-2.418 0l-4.236 4.236A2.986 2.986 0 0 1 5 12V6zm3.498 1.497a.998.998 0 1 0 0-1.995a.998.998 0 0 0 0 1.995zm3.004 2.712l4.236 4.236c-.49.35-1.09.555-1.738.555H8a2.986 2.986 0 0 1-1.738-.555l4.236-4.236a.71.71 0 0 1 1.004 0zM14.236 16c-.55.614-1.348 1-2.236 1H7.5A4.5 4.5 0 0 1 3 12.5V8c0-.888.386-1.687 1-2.236V12.5A3.5 3.5 0 0 0 7.5 16h6.736z',
  'ImageEdit': 'M13.999 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0zM3 6a3 3 0 0 1 3-3h7.999a3 3 0 0 1 3 3v3.002a2.87 2.87 0 0 0-1 .229V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v7.999c0 .372.103.721.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l1.745 1.715l-.707.707l-1.738-1.709a.5.5 0 0 0-.701 0l-4.661 4.58A1.99 1.99 0 0 0 6 16h3.474c-.016.05-.03.103-.043.155l-.211.845H6a3 3 0 0 1-3-3v-8zm7.979 9.376l4.829-4.83a1.87 1.87 0 1 1 2.644 2.646l-4.829 4.828a2.197 2.197 0 0 1-1.02.578l-1.498.375a.89.89 0 0 1-1.078-1.079l.374-1.498c.097-.386.296-.739.578-1.02z',
  'ImageEditSolid': 'M12.499 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1zM3 6a3 3 0 0 1 3-3h7.999a3 3 0 0 1 3 3v3.002a2.86 2.86 0 0 0-1.898.838l-2.308 2.308l-1.741-1.714a1.5 1.5 0 0 0-2.105 0l-5.39 5.307A2.986 2.986 0 0 1 3 13.998v-8zm9.499 3a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3zm-2.227 5.669l1.813-1.814l-1.735-1.709a.5.5 0 0 0-.702 0l-5.383 5.3c.49.348 1.088.552 1.735.552h3.22l.21-.844c.141-.562.432-1.075.842-1.485zm.707.707l4.829-4.83a1.87 1.87 0 1 1 2.644 2.646l-4.829 4.828a2.197 2.197 0 0 1-1.02.578l-1.498.375a.89.89 0 0 1-1.078-1.079l.374-1.498c.097-.386.296-.739.578-1.02z',
  'ImageMultiple': 'M11.5 7.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2zM3 6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm3-2a2 2 0 0 0-2 2v6c0 .37.101.718.277 1.016l3.309-3.309a2 2 0 0 1 2.828 0l3.31 3.309c.175-.298.276-.645.276-1.016V6a2 2 0 0 0-2-2H6zm3.707 6.414a1 1 0 0 0-1.414 0l-3.309 3.31c.298.175.645.276 1.016.276h6c.37 0 .718-.101 1.016-.277l-3.309-3.309zM8 17a2.992 2.992 0 0 1-2.236-1H12.5a3.5 3.5 0 0 0 3.5-3.5V5.764c.614.55 1 1.348 1 2.236v4.5a4.5 4.5 0 0 1-4.5 4.5H8z',
  'ImageMultipleSolid': 'M6 3a3 3 0 0 0-3 3v6c0 .648.205 1.248.555 1.738l4.03-4.03a2 2 0 0 1 2.83 0l4.03 4.03c.35-.49.555-1.09.555-1.738V6a3 3 0 0 0-3-3H6zm6.5 3.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0zm1.238 7.945l-4.03-4.03a1 1 0 0 0-1.415 0l-4.031 4.03c.49.35 1.09.555 1.738.555h6c.648 0 1.248-.205 1.738-.555zM5.764 16c.55.614 1.348 1 2.236 1h4.5a4.5 4.5 0 0 0 4.5-4.5V8c0-.888-.386-1.687-1-2.236V12.5a3.5 3.5 0 0 1-3.5 3.5H5.764z',
  'ImageOff': 'M2.854 2.146a.5.5 0 1 0-.708.708l1.409 1.408C3.205 4.752 3 5.352 3 6v8a3 3 0 0 0 3 3h8c.648 0 1.248-.205 1.738-.555l1.408 1.409a.5.5 0 0 0 .708-.708l-15-15zm6.56 7.975a1.497 1.497 0 0 0-.465.311l-4.67 4.588A1.99 1.99 0 0 1 4 14V6c0-.37.101-.718.277-1.016l5.137 5.137zM6 16c-.37 0-.715-.1-1.012-.274l4.662-4.58a.5.5 0 0 1 .7 0l4.662 4.58A1.991 1.991 0 0 1 14 16H6zM16 6v7.879l.898.898c.067-.248.102-.508.102-.777V6a3 3 0 0 0-3-3H6c-.269 0-.53.035-.777.102L6.12 4H14a2 2 0 0 1 2 2zm-2 1.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0zm-1 0a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0z',
  'ImageOffSolid': 'M2.854 2.146a.5.5 0 1 0-.708.708l1.409 1.408C3.205 4.752 3 5.352 3 6v8c0 .65.206 1.25.557 1.742l5.39-5.308c.14-.136.298-.24.468-.312l.632.633l-.352.352a.51.51 0 0 0-.046.04l-5.384 5.301C4.755 16.796 5.354 17 6 17h8c.597 0 1.154-.174 1.622-.475l.01-.008c.035-.022.069-.045.103-.069l-.003-.003l.003-.003l1.411 1.412a.5.5 0 0 0 .708-.708l-15-15zM13 7.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0zM5.223 3.102l11.675 11.675c.067-.248.102-.508.102-.777V6a3 3 0 0 0-3-3H6c-.269 0-.53.035-.777.102zM14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0z',
  'ImageProhibited': 'M5.5 10a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm0-1c-.786 0-1.512-.26-2.096-.697l4.9-4.899A3.5 3.5 0 0 1 5.5 9zm2.096-6.303l-4.9 4.9a3.5 3.5 0 0 1 4.9-4.9zM3 10.4c.317.162.651.294 1 .393V14c0 .373.102.722.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l4.67 4.588A1.99 1.99 0 0 0 16 14V6a2 2 0 0 0-2-2h-3.207a5.466 5.466 0 0 0-.393-1H14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3.6zm1.988 5.326A1.99 1.99 0 0 0 6 16h8c.37 0 .715-.1 1.012-.274l-4.662-4.58a.5.5 0 0 0-.7 0l-4.662 4.58zM14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0z',
  'ImageProhibitedSolid': 'M5.5 10a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm0-1c-.786 0-1.512-.26-2.096-.697l4.9-4.899A3.5 3.5 0 0 1 5.5 9zM2.697 7.596a3.5 3.5 0 0 1 4.9-4.9l-4.9 4.9zM13 7.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0zM5.5 11a5.5 5.5 0 0 0 4.9-8H14a3 3 0 0 1 3 3v8c0 .65-.206 1.25-.557 1.742l-5.39-5.308a1.5 1.5 0 0 0-2.105 0l-5.39 5.308A2.986 2.986 0 0 1 3 14v-3.6c.75.384 1.6.6 2.5.6zM14 7.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0zM6 17a2.987 2.987 0 0 1-1.735-.552l5.384-5.3a.5.5 0 0 1 .702 0l5.384 5.3A2.987 2.987 0 0 1 14 17H6z',
  'ImageSearch': 'M6 3a3 3 0 0 0-3 3v2.758a4.484 4.484 0 0 1 1-.502V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8c0 .373-.102.722-.28 1.02l-4.669-4.588a1.5 1.5 0 0 0-1.71-.278c.173.283.316.587.424.907a.5.5 0 0 1 .585.084l4.662 4.58A1.991 1.991 0 0 1 14 16h-2.879l.44.44c.163.163.281.355.354.56H14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6zm6.5 6a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3zm0-1a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1zm-4.197 6.596a3.5 3.5 0 1 0-.707.707l2.55 2.55a.5.5 0 0 0 .708-.707l-2.55-2.55zM5.5 15a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5z',
  'ImageSearchSolid': 'M12.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1zM3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8c0 .65-.206 1.25-.557 1.742l-5.39-5.308a1.5 1.5 0 0 0-1.711-.279A4.497 4.497 0 0 0 3 8.758V6zm9.5 3a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3zm-.585 8H14c.646 0 1.245-.204 1.735-.552l-5.384-5.3a.5.5 0 0 0-.586-.086c.152.451.235.935.235 1.438c0 .694-.158 1.352-.439 1.94l2 2c.163.163.281.355.354.56zm-3.612-2.404a3.5 3.5 0 1 0-.707.707l2.55 2.55a.5.5 0 0 0 .708-.707l-2.55-2.55zM5.5 15a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5z',
  'Video': 'M4.5 4A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h7a2.5 2.5 0 0 0 2.5-2.5v-1l2.4 1.8a1 1 0 0 0 1.6-.8v-7a1 1 0 0 0-1.6-.8L14 7.5v-1A2.5 2.5 0 0 0 11.5 4h-7zM14 8.75l3-2.25v7l-3-2.25v-2.5zM13 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-7A1.5 1.5 0 0 1 4.5 5h7A1.5 1.5 0 0 1 13 6.5z',
  'VideoSolid': 'M13 6.5A2.5 2.5 0 0 0 10.5 4h-6A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h6a2.5 2.5 0 0 0 2.5-2.5v-7zm1 1.43v4.152l2.764 2.35A.75.75 0 0 0 18 13.86V6.193a.75.75 0 0 0-1.23-.575L14 7.93z',
  'VideoAdd': 'M4.5 4A2.5 2.5 0 0 0 2 6.5v3.757A5.504 5.504 0 0 1 3 9.6V6.5A1.5 1.5 0 0 1 4.5 5h7A1.5 1.5 0 0 1 13 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-.522a5.489 5.489 0 0 1-.185 1h.707a2.5 2.5 0 0 0 2.5-2.5v-1l2.4 1.8a1 1 0 0 0 1.6-.8v-7a1 1 0 0 0-1.6-.8L14 7.5v-1A2.5 2.5 0 0 0 11.5 4h-7zM14 8.75l3-2.25v7l-3-2.25v-2.5zm-4 5.75a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5z',
  'VideoAddSolid': 'M13 6.5A2.5 2.5 0 0 0 10.5 4h-6A2.5 2.5 0 0 0 2 6.5v3.757a5.5 5.5 0 0 1 8.798 5.725A2.5 2.5 0 0 0 13 13.5v-7zm1 1.43v4.152l2.764 2.35A.75.75 0 0 0 18 13.86V6.193a.75.75 0 0 0-1.23-.575L14 7.93zm-4 6.57a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5z',
  'VideoOff': 'M2.854 2.146a.5.5 0 1 0-.708.708l1.355 1.354A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h7a2.5 2.5 0 0 0 2.292-1.5l3.354 3.354a.5.5 0 0 0 .708-.708l-15-15zm10.133 11.549A1.5 1.5 0 0 1 11.5 15h-7A1.5 1.5 0 0 1 3 13.5v-7a1.5 1.5 0 0 1 1.305-1.488l8.683 8.683zM13 10.879l3.47 3.469A1 1 0 0 0 18 13.5v-7a1 1 0 0 0-1.6-.8L14 7.5v-1A2.5 2.5 0 0 0 11.5 4H6.121l1 1H11.5A1.5 1.5 0 0 1 13 6.5v4.379zm1-2.129l3-2.25v7l-3-2.25v-2.5z',
  'VideoOffSolid': 'M2.854 2.146a.5.5 0 1 0-.708.708l1.355 1.354A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h6a2.5 2.5 0 0 0 2.492-2.3l4.154 4.154a.5.5 0 0 0 .708-.708l-15-15zm13.91 12.286l-1.41-1.199L14 11.88V7.93l2.77-2.314a.75.75 0 0 1 1.23.576v7.667a.75.75 0 0 1-1.236.572zM13 10.879l-6.879-6.88H10.5A2.5 2.5 0 0 1 13 6.5v4.38z',
  'VideoProhibited': 'M2 6.5A2.5 2.5 0 0 1 4.5 4h7A2.5 2.5 0 0 1 14 6.5v1l2.4-1.8a1 1 0 0 1 1.6.8v3.757a5.503 5.503 0 0 0-1-.657V6.5l-3 2.25v.272a5.48 5.48 0 0 0-1 .185V6.5A1.5 1.5 0 0 0 11.5 5h-7A1.5 1.5 0 0 0 3 6.5v7A1.5 1.5 0 0 0 4.5 15h4.522c.031.343.094.678.185 1H4.5A2.5 2.5 0 0 1 2 13.5v-7zm8 8a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm2.404 2.803l4.9-4.9a3.5 3.5 0 0 1-4.9 4.9zm-.707-.707a3.5 3.5 0 0 1 4.9-4.9l-4.9 4.9z',
  'VideoProhibitedSolid': 'M13 6.5A2.5 2.5 0 0 0 10.5 4h-6A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h4.707A5.502 5.502 0 0 1 13 9.207V6.5zm5-.307v4.064a5.477 5.477 0 0 0-4-1.235V7.931l2.77-2.313a.75.75 0 0 1 1.23.575zM10 14.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm1 0a3.5 3.5 0 0 1 5.596-2.803l-4.9 4.9A3.484 3.484 0 0 1 11 14.5zm3.5 3.5c-.786 0-1.512-.26-2.096-.697l4.9-4.9A3.5 3.5 0 0 1 14.5 18z',
  'VideoSync': 'M4.5 4A2.5 2.5 0 0 0 2 6.5v3.757A5.504 5.504 0 0 1 3 9.6V6.5A1.5 1.5 0 0 1 4.5 5h7A1.5 1.5 0 0 1 13 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-.522a5.489 5.489 0 0 1-.185 1h.707a2.5 2.5 0 0 0 2.5-2.5v-1l2.4 1.8a1 1 0 0 0 1.6-.8v-7a1 1 0 0 0-1.6-.8L14 7.5v-1A2.5 2.5 0 0 0 11.5 4h-7zM14 8.75l3-2.25v7l-3-2.25v-2.5zM1 14.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h.468a1.99 1.99 0 0 0-.933-.25a2 2 0 0 0-1.45.586a.5.5 0 0 1-.706-.707A3 3 0 0 1 7 12.152V12a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 4 16.848V17a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 0 1h-.468a1.99 1.99 0 0 0 .933.25a2 2 0 0 0 1.45-.586a.5.5 0 0 1 .706.707a3 3 0 0 1-.997.66z',
  'VideoSyncSolid': 'M13 6.5A2.5 2.5 0 0 0 10.5 4h-6A2.5 2.5 0 0 0 2 6.5v3.757a5.5 5.5 0 0 1 8.798 5.725A2.5 2.5 0 0 0 13 13.5v-7zm1 1.43v4.152l2.764 2.35A.75.75 0 0 0 18 13.86V6.193a.75.75 0 0 0-1.23-.575L14 7.93zM1 14.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h.468a1.99 1.99 0 0 0-.933-.25a2 2 0 0 0-1.45.586a.5.5 0 0 1-.706-.707A3 3 0 0 1 7 12.152V12a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 4 16.848V17a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 0 1h-.468a1.99 1.99 0 0 0 .933.25a2 2 0 0 0 1.45-.586a.5.5 0 0 1 .706.707a3 3 0 0 1-.997.66z',
  'File': 'M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7z',
  'FileSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 16.5v-13A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25z',
  'FileAdd': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5z',
  'FileAddSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5z',
  'FileArrowDown': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm-2.354-4.146a.5.5 0 0 1 .708-.708L5 15.293V12.5a.5.5 0 0 1 1 0v2.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.351.146h-.006a.5.5 0 0 1-.348-.144l-.003-.003l-2-2z',
  'FileArrowDownSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm-2.354-4.146a.5.5 0 0 1 .708-.708L5 15.293V12.5a.5.5 0 0 1 1 0v2.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.351.146h-.006a.5.5 0 0 1-.348-.144l-.003-.003l-2-2z',
  'FileArrowUp': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2z',
  'FileArrowUpSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2z',
  'FileBulletList': 'M6 10.5a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm.5 1.5a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1zM6 14.5a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zM8.5 10a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM8 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm.5 1.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7z',
  'FileBulletListSolid': 'M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 10 6.5zm-4 4a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm0 2a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm0 2a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm2-4a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm3-8V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5z',
  'FileBulletListMultiple': 'M6.5 10a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1zM6 12.5a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm2-2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 1.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zM6 2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 9.586 2H6zM5 4a1 1 0 0 1 1-1h3v3.5A1.5 1.5 0 0 0 10.5 8H14v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zm5 2.5V3.207L13.793 7H10.5a.5.5 0 0 1-.5-.5zM16 8a1 1 0 0 1 1 1v5.06A3.94 3.94 0 0 1 13.06 18H7a1 1 0 0 1-1-1h7a3 3 0 0 0 3-3V8z',
  'FileBulletListMultipleSolid': 'M9 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v11A1.5 1.5 0 0 0 5.5 16H13a2 2 0 0 0 2-2V8h-4.5A1.5 1.5 0 0 1 9 6.5zm-3 4a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zm.5 2.5a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1zm2-2a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4zM8 12.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2-6V2.25L14.75 7H10.5a.5.5 0 0 1-.5-.5zM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9z',
  'FileBulletListOff': 'M4 4.707L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-1.241-1.242A2 2 0 0 1 14 18H6a2 2 0 0 1-2-2V4.707zm11 11l-1.032-1.032A.5.5 0 0 1 13.5 15h-5a.5.5 0 0 1 0-1h4.793l-1-1H8.5a.5.5 0 0 1 0-1h2.793l-1-1H8.5a.5.5 0 0 1 0-1h.793L5 5.707V16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-.293zM12.121 10l1 1h.379a.5.5 0 0 0 0-1h-1.379zM15 8v4.879l1 1V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6c-.521 0-.996.2-1.352.526l.708.709A.996.996 0 0 1 6 3h4v3.5A1.5 1.5 0 0 0 11.5 8H15zm-9 2.5a.5.5 0 1 0 1 0a.5.5 0 0 0-1 0zm.5 1.5a.5.5 0 1 0 0 1a.5.5 0 0 0 0-1zM6 14.5a.5.5 0 1 1 1 0a.5.5 0 0 1-1 0zM14.793 7H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7z',
  'FileBulletListOffSolid': 'M4 4.707L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-1.159-1.16A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5V4.707zM13.293 14H8.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .468-.325L13.293 14zm-1-1l-1-1H8.5a.5.5 0 0 0 0 1h3.793zm-2-2l-1-1H8.5a.5.5 0 0 0 0 1h1.793zm3.207 0h-.379L16 13.879V8h-4.5A1.5 1.5 0 0 1 10 6.5V2H5.5c-.383 0-.733.144-.998.38l7.62 7.62H13.5a.5.5 0 0 1 0 1zM6 10.5a.5.5 0 1 0 1 0a.5.5 0 0 0-1 0zm0 2a.5.5 0 1 0 1 0a.5.5 0 0 0-1 0zm0 2a.5.5 0 1 0 1 0a.5.5 0 0 0-1 0zm5-8V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5z',
  'FileCatchUp': 'M6 2a2 2 0 0 0-2 2v4.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3H4v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM7.462 8.308a.5.5 0 0 0-.91-.032L5.192 11H3.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .447-.276L6.96 9.7l2.08 4.991a.5.5 0 0 0 .908.032L11.31 12H12.5a.5.5 0 0 0 0-1H11a.5.5 0 0 0-.447.276L9.54 13.3l-2.08-4.991z',
  'FileCatchUpSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 16.5V13h1.5a1.5 1.5 0 0 0 1.342-.83l.034-.068l1.24 2.975a1.5 1.5 0 0 0 2.726.094L11.927 13h.573a1.5 1.5 0 0 0 0-3H11a1.5 1.5 0 0 0-1.342.83l-.034.068l-1.24-2.975a1.5 1.5 0 0 0-2.726-.094L4.573 10H4V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM7.462 8.308a.5.5 0 0 0-.91-.032L5.192 11H3.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .447-.276L6.96 9.7l2.08 4.991a.5.5 0 0 0 .908.032L11.31 12H12.5a.5.5 0 0 0 0-1H11a.5.5 0 0 0-.447.276L9.54 13.3l-2.08-4.991z',
  'FileCheckmark': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.146-1.854a.5.5 0 0 0-.708 0L4.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'FileCheckmarkSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.146-1.854a.5.5 0 0 0-.708 0L4.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'FileCopy': 'M6 4a2 2 0 0 1 2-2h3.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 17 7.414V14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 11 6.5V3H8zm4 .207V6.5a.5.5 0 0 0 .5.5h3.293L12 3.207zM4 5a1 1 0 0 1 1-1v10a3 3 0 0 0 3 3h7a1 1 0 0 1-1 1H7.94A3.94 3.94 0 0 1 4 14.06V5z',
  'FileCopySolid': 'M11 6.5V2H7.5A1.5 1.5 0 0 0 6 3.5v11A1.5 1.5 0 0 0 7.5 16h8a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 11 6.5zm1 0V2.25L16.75 7H12.5a.5.5 0 0 1-.5-.5zM4 5a1 1 0 0 1 1-1v10.5A2.5 2.5 0 0 0 7.5 17H15a1 1 0 0 1-1 1H7.548A3.548 3.548 0 0 1 4 14.452V5z',
  'FileDismiss': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM8.682 17.682a4.5 4.5 0 1 0-6.364-6.364a4.5 4.5 0 0 0 6.364 6.364zm-4.95-4.95a.5.5 0 0 1 .707 0l1.06 1.06l1.062-1.06a.5.5 0 1 1 .707.707L6.207 14.5l1.06 1.06a.5.5 0 1 1-.707.708l-1.06-1.06l-1.06 1.06a.5.5 0 1 1-.708-.708l1.06-1.06l-1.06-1.06a.5.5 0 0 1 0-.708z',
  'FileDismissSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM2.318 17.682a4.5 4.5 0 1 0 6.364-6.364a4.5 4.5 0 0 0-6.364 6.364zm1.414-4.95a.5.5 0 0 1 .707 0l1.06 1.06l1.062-1.06a.5.5 0 1 1 .707.707L6.207 14.5l1.06 1.06a.5.5 0 1 1-.707.708l-1.06-1.06l-1.06 1.06a.5.5 0 1 1-.708-.708l1.06-1.06l-1.06-1.06a.5.5 0 0 1 0-.708z',
  'FileEdit': 'M11.5 8H16v-.586a1.496 1.496 0 0 0-.057-.41L15.942 7a1.5 1.5 0 0 0-.381-.646l-3.915-3.915A1.5 1.5 0 0 0 10.586 2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2.221l-.013-.026A1.856 1.856 0 0 1 8.003 17H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8zm0-1a.5.5 0 0 1-.5-.5V3.207L14.793 7H11.5zm3.31 2.548a1.87 1.87 0 1 1 2.644 2.645l-4.83 4.829a2.197 2.197 0 0 1-1.02.578l-1.498.374a.89.89 0 0 1-1.079-1.078l.375-1.498c.096-.386.296-.74.578-1.02l4.83-4.83z',
  'FileEditSolid': 'M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h2.721c-.21-.39-.285-.86-.164-1.347l.375-1.498c.14-.562.43-1.075.84-1.485l4.83-4.83A2.86 2.86 0 0 1 16 8.004V8h-4.5A1.5 1.5 0 0 1 10 6.5zm1 0V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5zm6.454 3.048a1.87 1.87 0 0 0-2.645 0l-4.83 4.83a2.197 2.197 0 0 0-.577 1.02l-.375 1.498a.89.89 0 0 0 1.079 1.078l1.498-.374c.386-.097.739-.296 1.02-.578l4.83-4.83a1.87 1.87 0 0 0 0-2.644z',
  'FileError': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25z',
  'FileErrorSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zM5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25z',
  'FileLink': 'M6 2a2 2 0 0 0-2 2v7h1V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-2.256a4.483 4.483 0 0 1-.502 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM5 12.5a.5.5 0 0 0-.5-.5l-.192.005A3.5 3.5 0 0 0 4.5 19l.09-.008A.5.5 0 0 0 4.5 18l-.164-.005A2.5 2.5 0 0 1 4.5 13l.09-.008A.5.5 0 0 0 5 12.5zm6 3A3.5 3.5 0 0 0 7.5 12l-.09.008A.5.5 0 0 0 7.5 13l.164.005A2.5 2.5 0 0 1 7.5 18l-.002.005l-.09.008a.5.5 0 0 0 .094.992V19l.192-.005A3.5 3.5 0 0 0 11 15.5zm-3.5-.498L4.5 15l-.09.008A.5.5 0 0 0 4.5 16l3 .002l.09-.008a.5.5 0 0 0-.09-.992z',
  'FileLinkSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5h-3.258A4.5 4.5 0 0 0 7.5 11H4V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM5 12.5a.5.5 0 0 0-.5-.5l-.192.005A3.5 3.5 0 0 0 4.5 19l.09-.008A.5.5 0 0 0 4.5 18l-.164-.005A2.5 2.5 0 0 1 4.5 13l.09-.008A.5.5 0 0 0 5 12.5zm6 3A3.5 3.5 0 0 0 7.5 12l-.09.008A.5.5 0 0 0 7.5 13l.164.005A2.5 2.5 0 0 1 7.5 18l-.002.005l-.09.008a.5.5 0 0 0 .094.992V19l.192-.005A3.5 3.5 0 0 0 11 15.5zm-3.5-.498L4.5 15l-.09.008A.5.5 0 0 0 4.5 16l3 .002l.09-.008a.5.5 0 0 0-.09-.992z',
  'FileLock': 'M6 2a2 2 0 0 0-2 2v5.401a2.98 2.98 0 0 1 1-.36V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM3.5 12v1H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-.5v-1a2 2 0 1 0-4 0zm1 1v-1a1 1 0 1 1 2 0v1h-2zm1 2.25a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5z',
  'FileLockSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H10v-4a2 2 0 0 0-1.5-1.937V12A3 3 0 0 0 4 9.401V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM3.5 12v1H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-.5v-1a2 2 0 1 0-4 0zm1 1v-1a1 1 0 1 1 2 0v1h-2zm1 2.25a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5z',
  'FileMultiple': 'M4 4a2 2 0 0 1 2-2h3.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 15 7.414V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6zm4 .207V6.5a.5.5 0 0 0 .5.5h3.293L10 3.207zM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9z',
  'FileMultipleSolid': 'M9 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v11A1.5 1.5 0 0 0 5.5 16h8a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 9 6.5zm1 0V2.25L14.75 7H10.5a.5.5 0 0 1-.5-.5zM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9z',
  'FilePdf': 'M6.5 11a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-.166h.333a1.167 1.167 0 0 0 0-2.334H6.5zm.833 1.334H7V12h.333a.167.167 0 0 1 0 .334zM12 11.499a.5.5 0 0 1 .5-.499h.999a.5.5 0 0 1 0 1h-.5v.335h.5a.5.5 0 1 1 0 1h-.5l.001.164a.5.5 0 0 1-1 .002L12 12.834L12 11.499zM9.498 11a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5H10a1.5 1.5 0 0 0 0-3h-.502zm.5 2v-1H10a.5.5 0 0 1 0 1h-.002zM4 4a2 2 0 0 1 2-2h4.585a1.5 1.5 0 0 1 1.061.44l3.914 3.914a1.5 1.5 0 0 1 .44 1.06v1.668a1.5 1.5 0 0 1 .998 1.414v4.003A1.5 1.5 0 0 1 16 15.913V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-.087A1.5 1.5 0 0 1 3 14.5v-4.003A1.5 1.5 0 0 1 4 9.082V4zm11 4h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v4.996h10V8zM5 15.999A1 1 0 0 0 6 17h8a1 1 0 0 0 1-1.001H5zm6-12.792V6.5a.5.5 0 0 0 .5.5h3.293L11 3.207zM4.5 9.996a.5.5 0 0 0-.5.5v4.003a.5.5 0 0 0 .5.5h10.997a.5.5 0 0 0 .5-.5v-4.003a.5.5 0 0 0-.5-.5H4.501z',
  'FilePdfSolid': 'M6.5 11a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-.166h.334a1.167 1.167 0 0 0 0-2.334H6.5zm.834 1.334H7V12h.334a.167.167 0 0 1 0 .334zM12 11.499a.5.5 0 0 1 .5-.499h.998a.5.5 0 1 1 0 1h-.498v.335h.498a.5.5 0 1 1 0 1h-.498v.164a.5.5 0 1 1-1 .002L12 12.834l.002-1.335zM9.5 11a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h.502a1.5 1.5 0 0 0 0-3h-.502zm.5 2v-1h.002a.5.5 0 0 1 0 1h-.002zm.002-6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v5.582a1.5 1.5 0 0 0-1 1.414v4.003a1.5 1.5 0 0 0 1 1.414v.587A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-.587a1.5 1.5 0 0 0 .998-1.414v-4.003a1.5 1.5 0 0 0-.998-1.414V8h-4.5A1.5 1.5 0 0 1 10 6.5zM4.502 9.996h10.997a.5.5 0 0 1 .5.5v4.003a.5.5 0 0 1-.5.5H4.502a.5.5 0 0 1-.5-.5v-4.003a.5.5 0 0 1 .5-.5zM11 6.5V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5z',
  'FileProhibited': 'M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H9.743c.253-.307.474-.642.657-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v5.022a5.48 5.48 0 0 0-1 .185V4zm7-.793V6.5a.5.5 0 0 0 .5.5h3.293L11 3.207zM8.682 17.682a4.5 4.5 0 1 1-6.364-6.364a4.5 4.5 0 0 1 6.364 6.364zm-5.278-.379a3.5 3.5 0 0 0 4.9-4.9l-4.9 4.9zm-.707-.707l4.9-4.9a3.5 3.5 0 0 0-4.9 4.9z',
  'FileProhibitedSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zm-8.682 9.068a4.5 4.5 0 1 0 6.364 6.364a4.5 4.5 0 0 0-6.364-6.364zm5.657 5.657a3.5 3.5 0 0 1-4.571.328l4.9-4.9a3.5 3.5 0 0 1-.33 4.572zm-.379-5.278l-4.9 4.9a3.5 3.5 0 0 1 4.9-4.9z',
  'FileQuestionMark': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM10 14.5a4.5 4.5 0 1 0-9 0a4.5 4.5 0 0 0 9 0zm-4.5 1.88a.625.625 0 1 1 0 1.25a.625.625 0 0 1 0-1.25zm0-4.877c1.031 0 1.853.846 1.853 1.95c0 .586-.214.908-.727 1.319l-.277.214c-.246.194-.329.3-.346.448l-.011.156A.5.5 0 0 1 5 15.5c0-.57.21-.884.716-1.288l.278-.215c.288-.23.36-.342.36-.544c0-.558-.382-.95-.854-.95c-.494 0-.859.366-.853.945a.5.5 0 1 1-1 .01c-.011-1.137.805-1.955 1.853-1.955z',
  'FileQuestionMarkSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM10 14.5a4.5 4.5 0 1 0-9 0a4.5 4.5 0 0 0 9 0zm-4.5 1.88a.625.625 0 1 1 0 1.25a.625.625 0 0 1 0-1.25zm0-4.877c1.031 0 1.853.846 1.853 1.95c0 .586-.214.908-.727 1.319l-.277.214c-.246.194-.329.3-.346.448l-.011.156A.5.5 0 0 1 5 15.5c0-.57.21-.884.716-1.288l.278-.215c.288-.23.36-.342.36-.544c0-.558-.382-.95-.854-.95c-.494 0-.859.366-.853.945a.5.5 0 1 1-1 .01c-.011-1.137.805-1.955 1.853-1.955z',
  'FileSearch': 'M10 12c0 .924-.314 1.775-.84 2.453l3.691 3.692a.5.5 0 1 1-.707.707L8.453 15.16A4 4 0 1 1 10 12zm-4 3a3 3 0 1 0 0-6a3 3 0 0 0 0 6zM5.5 3a.5.5 0 0 0-.5.5v3.6c-.348.07-.683.177-1 .316V3.5A1.5 1.5 0 0 1 5.5 2h5.086a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16.5a1.5 1.5 0 0 1-1.5 1.5h-.587a1.494 1.494 0 0 0-.354-.563L13.12 17H14.5a.5.5 0 0 0 .5-.5V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H5.5zm5.5.207V6.5a.5.5 0 0 0 .5.5h3.293L11 3.207z',
  'FileSearchSolid': 'M5 2h5v4.5A1.5 1.5 0 0 0 11.5 8H16v9a1 1 0 0 1-1 1h-1.087a1.494 1.494 0 0 0-.354-.563l-3.125-3.124A5 5 0 0 0 4 7.416V3a1 1 0 0 1 1-1zm6 0l5 5h-4.5a.5.5 0 0 1-.5-.5V2zm-1 10c0 .924-.314 1.775-.84 2.453l3.691 3.692a.5.5 0 1 1-.707.707L8.453 15.16A4 4 0 1 1 10 12zm-4 3a3 3 0 1 0 0-6a3 3 0 0 0 0 6z',
  'FileSync': 'M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM1 14.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h.468a1.99 1.99 0 0 0-.933-.25a2 2 0 0 0-1.45.586a.5.5 0 0 1-.706-.707A3 3 0 0 1 7 12.152V12a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 4 16.848V17a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 0 1h-.468a1.99 1.99 0 0 0 .933.25a2 2 0 0 0 1.45-.586a.5.5 0 0 1 .706.707a3 3 0 0 1-.997.66z',
  'FileSyncSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H9.743A5.5 5.5 0 0 0 4 9.207V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM1 14.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h.468a1.99 1.99 0 0 0-.933-.25a2 2 0 0 0-1.45.586a.5.5 0 0 1-.706-.707A3 3 0 0 1 7 12.152V12a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 4 16.848V17a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 0 1h-.468a1.99 1.99 0 0 0 .933.25a2 2 0 0 0 1.45-.586a.5.5 0 0 1 .706.707a3 3 0 0 1-.997.66z',
  'FileText': 'M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5z',
  'FileTextSolid': 'M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 10 6.5zM6.5 10h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zm0 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zm0 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zM11 6.5V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5z',
  'FileJs': 'M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H8.5c.219-.29.375-.63.45-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v7.5c-.081.061-.16.127-.232.198A1.504 1.504 0 0 0 4 11.085V4zm7.5 3h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5zm-8 5a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0V16a.5.5 0 0 0-1 0v.5a1.5 1.5 0 0 0 3 0v-4a.5.5 0 0 0-.5-.5zM5 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 8 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 5 13.882V13.5z',
  'FileJsSolid': 'M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v7.585c.32.113.589.331.768.613A2.5 2.5 0 0 1 9 13.5c0 .444-.193.843-.5 1.118c.319.425.5.949.5 1.5v.382c0 .563-.186 1.082-.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 10 6.5zm1 0V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5zM3.5 12a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0V16a.5.5 0 0 0-1 0v.5a1.5 1.5 0 0 0 3 0v-4a.5.5 0 0 0-.5-.5zM5 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 8 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 5 13.882V13.5z',
  'FileCss': 'M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2h-.5c.219-.29.375-.63.45-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v7.764a2.997 2.997 0 0 0-1-.593V4zm7.5 3h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5zM3 12a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0a.5.5 0 0 0-1 0a1 1 0 1 1-2 0v-2a1 1 0 1 1 2 0a.5.5 0 0 0 1 0a2 2 0 0 0-2-2zm8.5 0a1.5 1.5 0 0 0-1.5 1.5v.382a1.5 1.5 0 0 0 .83 1.342l.894.447a.5.5 0 0 1 .276.447v.382a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0a1.5 1.5 0 0 0 3 0v-.382a1.5 1.5 0 0 0-.83-1.342l-.894-.447a.5.5 0 0 1-.276-.447V13.5a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0a1.5 1.5 0 0 0-1.5-1.5zM6 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 9 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 6 13.882V13.5z',
  'FileCssSolid': 'M10 6.5V2H5.5A1.5 1.5 0 0 0 4 3.5v7.67c.552.196 1.03.548 1.38 1.004A2.498 2.498 0 0 1 9.5 12a2.5 2.5 0 0 1 4.5 1.5c0 .444-.193.843-.5 1.118c.319.425.5.949.5 1.5v.382a2.49 2.49 0 0 1-.5 1.5h1a1.5 1.5 0 0 0 1.5-1.5V8h-4.5A1.5 1.5 0 0 1 10 6.5zm1 0V2.25L15.75 7H11.5a.5.5 0 0 1-.5-.5zM3 12a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0a.5.5 0 0 0-1 0a1 1 0 1 1-2 0v-2a1 1 0 1 1 2 0a.5.5 0 0 0 1 0a2 2 0 0 0-2-2zm8.5 0a1.5 1.5 0 0 0-1.5 1.5v.382a1.5 1.5 0 0 0 .83 1.342l.894.447a.5.5 0 0 1 .276.447v.382a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0a1.5 1.5 0 0 0 3 0v-.382a1.5 1.5 0 0 0-.83-1.342l-.894-.447a.5.5 0 0 1-.276-.447V13.5a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0a1.5 1.5 0 0 0-1.5-1.5zM6 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 9 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 6 13.882V13.5z',
  'ChevronDoubleRight': 'M8.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L13.812 10L8.647 4.854a.5.5 0 0 1-.001-.707zm-4 0a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L9.812 10L4.647 4.854a.5.5 0 0 1-.001-.707z',
  'ChevronDoubleRightSolid': 'M8.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L13.215 10L8.707 5.267a.75.75 0 0 1 .026-1.06zm-4 0a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L9.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z',
  'ChevronDoubleLeft': 'M11.353 15.854a.5.5 0 0 1-.707.001L5.162 10.39a.55.55 0 0 1 0-.78l5.484-5.464a.5.5 0 1 1 .706.708L6.188 10l5.164 5.147a.5.5 0 0 1 .001.707zm4 0a.5.5 0 0 1-.708.001L9.161 10.39a.55.55 0 0 1 0-.78l5.484-5.464a.5.5 0 1 1 .706.708L10.187 10l5.164 5.147a.5.5 0 0 1 .001.707z',
  'ChevronDoubleLeftSolid': 'M11.269 15.794a.75.75 0 0 1-1.06-.026l-5.002-5.25a.75.75 0 0 1 0-1.035l5.001-5.25a.75.75 0 1 1 1.086 1.034l-4.508 4.734l4.508 4.733a.75.75 0 0 1-.025 1.06zm4 .001a.75.75 0 0 1-1.06-.026l-5.001-5.25a.75.75 0 0 1 0-1.035l5.001-5.25a.75.75 0 1 1 1.086 1.034l-4.508 4.733l4.508 4.734a.75.75 0 0 1-.025 1.06z',
  'MoreHorizontal': 'M6.25 10a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0zm5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0zM15 11.25a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5z',
  'MoreHorizontalSolid': 'M6.75 10a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0zm5 0a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0zM15 11.75a1.75 1.75 0 1 0 0-3.5a1.75 1.75 0 0 0 0 3.5z',
  'MoreVertical': 'M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6zm0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5zm-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0z',
  'MoreVerticalSolid': 'M10 6.5A1.75 1.75 0 1 1 10 3a1.75 1.75 0 0 1 0 3.5zM10 17a1.75 1.75 0 1 1 0-3.5a1.75 1.75 0 0 1 0 3.5zm-1.75-7a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 0 0-3.5 0z',
  'Delete': 'M11.5 4a1.5 1.5 0 0 0-3 0h-1a2.5 2.5 0 0 1 5 0H17a.5.5 0 0 1 0 1h-.554L15.15 16.23A2 2 0 0 1 13.163 18H6.837a2 2 0 0 1-1.987-1.77L3.553 5H3a.5.5 0 0 1-.492-.41L2.5 4.5A.5.5 0 0 1 3 4h8.5zm3.938 1H4.561l1.282 11.115a1 1 0 0 0 .994.885h6.326a1 1 0 0 0 .993-.885L15.438 5zM8.5 7.5c.245 0 .45.155.492.359L9 7.938v6.125c0 .241-.224.437-.5.437c-.245 0-.45-.155-.492-.359L8 14.062V7.939c0-.242.224-.438.5-.438zm3 0c.245 0 .45.155.492.359l.008.079v6.125c0 .241-.224.437-.5.437c-.245 0-.45-.155-.492-.359L11 14.062V7.939c0-.242.224-.438.5-.438z',
  'DeleteSolid': 'M10 1.25a2.75 2.75 0 0 1 2.739 2.5H17a.75.75 0 0 1 .102 1.493L17 5.25h-.583L15.15 16.23A2 2 0 0 1 13.163 18H6.837a2 2 0 0 1-1.987-1.77L3.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h4.261A2.75 2.75 0 0 1 10 1.25zM8.5 7.5c-.245 0-.45.155-.492.359L8 7.938v6.125l.008.078c.042.204.247.359.492.359s.45-.155.492-.359L9 14.062V7.939l-.008-.08C8.95 7.656 8.745 7.5 8.5 7.5zm3 0c-.245 0-.45.155-.492.359L11 7.938v6.125l.008.078c.042.204.247.359.492.359s.45-.155.492-.359l.008-.079V7.939l-.008-.08c-.042-.203-.247-.358-.492-.358zM10 2.75c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1z',
  'DeleteDismiss': 'M11.5 4a1.5 1.5 0 0 0-3 0h3zm-4 0a2.5 2.5 0 0 1 5 0H17a.5.5 0 0 1 0 1h-.554l-.484 4.196a5.484 5.484 0 0 0-.987-.176L15.438 5H4.561l1.282 11.115a1 1 0 0 0 .994.885H9.6c.183.358.404.693.657 1h-3.42a2 2 0 0 1-1.987-1.77L3.553 5H3a.5.5 0 0 1-.492-.41L2.5 4.5A.5.5 0 0 1 3 4h4.5zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.646-1.146a.5.5 0 0 0-.708-.708L14.5 13.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708l1.146-1.147l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 14.5l1.147-1.146z',
  'DeleteDismissSolid': 'M10 1.25a2.75 2.75 0 0 1 2.739 2.5H17a.75.75 0 0 1 .102 1.493L17 5.25h-.583l-.455 3.946A5.5 5.5 0 0 0 10.258 18H6.836a2 2 0 0 1-1.987-1.77L3.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h4.261A2.75 2.75 0 0 1 10 1.25zm0 1.5c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1zm9 11.75a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.646-1.146a.5.5 0 0 0-.708-.708L14.5 13.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708l1.146-1.147l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 14.5l1.147-1.146z',
  'DeleteOff': 'M3 4h.293L2.146 2.854a.5.5 0 1 1 .708-.708L8.26 7.553l9.594 9.593a.5.5 0 0 1-.708.708l-1.958-1.958l-.038.333A2 2 0 0 1 13.163 18H6.837a2 2 0 0 1-1.987-1.77L3.553 5H3a.5.5 0 0 1-.492-.41L2.5 4.5A.5.5 0 0 1 3 4zm11.286 10.993L12 12.707v1.355c0 .242-.224.438-.5.438c-.245 0-.45-.155-.492-.359L11 14.062v-2.355l-2-2v4.355c0 .242-.224.438-.5.438c-.245 0-.45-.155-.492-.359L8 14.062V8.707L4.596 5.303l1.247 10.812a1 1 0 0 0 .994.885h6.326a1 1 0 0 0 .993-.885l.13-1.122zm1.195-1.633l-.903-.903l.86-7.457H7.121l-1-1H7.5a2.5 2.5 0 0 1 5 0H17a.5.5 0 0 1 0 1h-.554l-.965 8.36zM11.5 4a1.5 1.5 0 0 0-3 0h3zm.5 5.879l-1-1v-.941c0-.242.224-.438.5-.438c.245 0 .45.155.492.359l.008.079v1.94z',
  'DeleteOffSolid': 'M15.188 15.896l-.038.333A2 2 0 0 1 13.163 18H6.837a2 2 0 0 1-1.987-1.77L3.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h.043l-.897-.896a.5.5 0 1 1 .708-.708L8.26 7.553l9.594 9.593a.5.5 0 0 1-.708.708l-1.958-1.958zM8 8.707v5.355l.008.08c.042.203.247.358.492.358s.45-.155.492-.359L9 14.062V9.707l-1-1zm3 3v2.355l.008.08c.042.203.247.358.492.358s.45-.155.492-.359l.008-.079v-1.355l-1-1zm0-2.828L5.871 3.75h1.39a2.75 2.75 0 0 1 5.478 0H17a.75.75 0 0 1 .102 1.493L17 5.25h-.583l-.936 8.11L12 9.879V7.938l-.008-.08c-.042-.203-.247-.358-.492-.358s-.45.155-.492.359L11 7.938v.94zM10 2.75c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1z',
  'DeleteArrowBack': 'M11.5 4a1.5 1.5 0 0 0-3 0h3zm-4 0a2.5 2.5 0 0 1 5 0H17a.5.5 0 0 1 0 1h-.554l-.484 4.196a5.484 5.484 0 0 0-.987-.176L15.438 5H4.561l1.282 11.115a1 1 0 0 0 .994.885H9.6c.183.358.404.693.657 1h-3.42a2 2 0 0 1-1.987-1.77L3.553 5H3a.5.5 0 0 1-.492-.41L2.5 4.5A.5.5 0 0 1 3 4h4.5zm7 15a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm-.896-6.396l-.897.896h1.543A2.75 2.75 0 0 1 17 16.25v.25a.5.5 0 0 1-1 0v-.25a1.75 1.75 0 0 0-1.75-1.75h-1.543l.897.896a.5.5 0 0 1-.708.708l-1.752-1.753a.499.499 0 0 1 .002-.705l1.75-1.75a.5.5 0 0 1 .708.708z',
  'DeleteArrowBackSolid': 'M10 1.25a2.75 2.75 0 0 1 2.739 2.5H17a.75.75 0 0 1 .102 1.493L17 5.25h-.583l-.455 3.946A5.5 5.5 0 0 0 10.258 18H6.836a2 2 0 0 1-1.987-1.77L3.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h4.261A2.75 2.75 0 0 1 10 1.25zm0 1.5c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm-.896-6.396l-.897.896h1.543A2.75 2.75 0 0 1 17 16.25v.25a.5.5 0 0 1-1 0v-.25a1.75 1.75 0 0 0-1.75-1.75h-1.543l.897.896a.5.5 0 0 1-.708.708l-1.752-1.753a.499.499 0 0 1 .002-.705l1.75-1.75a.5.5 0 0 1 .708.708z',
  'DeleteLines': 'M7.5 4a2.5 2.5 0 0 1 5 0H17a.5.5 0 0 1 0 1h-.554l-.923 8h-1.007l.922-8H4.561l1.282 11.115a1 1 0 0 0 .994.885h5.248c.066.186.168.356.297.5c-.13.144-.23.314-.297.5H6.837a2 2 0 0 1-1.987-1.77L3.553 5H3a.5.5 0 0 1-.492-.41L2.5 4.5A.5.5 0 0 1 3 4h4.5zm4 0a1.5 1.5 0 0 0-3 0h3zm2 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0-2a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm-.5 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z',
  'DeleteLinesSolid': 'M10 1.25a2.75 2.75 0 0 1 2.739 2.5H17a.75.75 0 0 1 .102 1.493L17 5.25h-.583L15.523 13H13.5a1.5 1.5 0 0 0-1.118 2.5a1.494 1.494 0 0 0-.382 1c0 .384.144.735.382 1c-.13.144-.23.314-.297.5H6.837a2 2 0 0 1-1.987-1.77L3.582 5.25H3a.75.75 0 0 1-.743-.648L2.25 4.5a.75.75 0 0 1 .648-.743L3 3.75h4.261A2.75 2.75 0 0 1 10 1.25zm0 1.5c-.605 0-1.11.43-1.225 1h2.45c-.116-.57-.62-1-1.225-1zm3 11.75a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z',
  'Eye': 'M3.26 11.602C3.942 8.327 6.793 6 10 6c3.206 0 6.057 2.327 6.74 5.602a.5.5 0 0 0 .98-.204C16.943 7.673 13.693 5 10 5c-3.693 0-6.943 2.673-7.72 6.398a.5.5 0 0 0 .98.204zM10 8a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7zm-2.5 3.5a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0z',
  'EyeSolid': 'M3.26 11.602C3.942 8.327 6.793 6 10 6c3.206 0 6.057 2.327 6.74 5.602a.5.5 0 0 0 .98-.204C16.943 7.673 13.693 5 10 5c-3.693 0-6.943 2.673-7.72 6.398a.5.5 0 0 0 .98.204zM9.99 8a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7z',
  'EyeOff': 'M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.097 8.097 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.09 7.09 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708l-15-15zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38l3.446 3.447zm-1.995-4.824l3.374 3.374a3.5 3.5 0 0 0-3.374-3.374zM10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.648 7.648 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6z',
  'EyeOffSolid': 'M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.097 8.097 0 0 0-3.366 5.046a.5.5 0 1 0 .979.204a7.09 7.09 0 0 1 3.108-4.528L7.95 8.656a3.5 3.5 0 1 0 4.884 4.884l4.313 4.314a.5.5 0 0 0 .708-.708l-15-15zm7.27 5.857l3.363 3.363a3.5 3.5 0 0 0-3.363-3.363zM7.53 5.41l.803.803A6.632 6.632 0 0 1 10 6c3.206 0 6.057 2.327 6.74 5.602a.5.5 0 1 0 .98-.204C16.943 7.673 13.693 5 10 5c-.855 0-1.687.143-2.469.41z',
  'EyeTracking': 'M3 4.5A1.5 1.5 0 0 1 4.5 3h3a.5.5 0 0 0 0-1h-3A2.5 2.5 0 0 0 2 4.5v3a.5.5 0 0 0 1 0v-3zm0 11A1.5 1.5 0 0 0 4.5 17h3a.5.5 0 0 1 0 1h-3A2.5 2.5 0 0 1 2 15.5v-3a.5.5 0 0 1 1 0v3zM15.5 3A1.5 1.5 0 0 1 17 4.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 15.5 2h-3a.5.5 0 0 0 0 1h3zM17 15.5a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 0 0 1h3a2.5 2.5 0 0 0 2.5-2.5v-3a.5.5 0 0 0-1 0v3zm-10-4a3 3 0 1 1 6 0a3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm-5.052.223v.001a.5.5 0 0 1-.895-.448L4.5 9.5a24.558 24.558 0 0 1-.447-.225l.001-.001l.002-.004l.005-.01a2.106 2.106 0 0 1 .082-.145a5.14 5.14 0 0 1 .249-.377A6.49 6.49 0 0 1 5.425 7.62C6.375 6.805 7.863 6 10 6s3.624.805 4.575 1.62c.473.406.812.812 1.034 1.119a5.13 5.13 0 0 1 .33.521l.005.01l.002.004l.001.002l-.447.224l.447-.224a.5.5 0 0 1-.893.45v-.002l-.002-.001l-.009-.018a4.133 4.133 0 0 0-.245-.381a5.487 5.487 0 0 0-.873-.944C13.125 7.695 11.863 7 10 7s-3.125.695-3.924 1.38a5.49 5.49 0 0 0-.874.944a4.14 4.14 0 0 0-.245.381l-.01.018z',
  'EyeTrackingSolid': 'M4.5 3A1.5 1.5 0 0 0 3 4.5v3a.5.5 0 0 1-1 0v-3A2.5 2.5 0 0 1 4.5 2h3a.5.5 0 0 1 0 1h-3zm0 14A1.5 1.5 0 0 1 3 15.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 4.5 18h3a.5.5 0 0 0 0-1h-3zM17 4.5A1.5 1.5 0 0 0 15.5 3h-3a.5.5 0 0 1 0-1h3A2.5 2.5 0 0 1 18 4.5v3a.5.5 0 0 1-1 0v-3zM15.5 17a1.5 1.5 0 0 0 1.5-1.5v-3a.5.5 0 0 1 1 0v3a2.5 2.5 0 0 1-2.5 2.5h-3a.5.5 0 0 1 0-1h3zM7 11.5a3 3 0 1 1 6 0a3 3 0 0 1-6 0zM4.948 9.723v.001a.5.5 0 0 1-.895-.448L4.5 9.5a24.558 24.558 0 0 1-.447-.225l.001-.001l.002-.004l.005-.01a2.106 2.106 0 0 1 .082-.145a5.14 5.14 0 0 1 .249-.377A6.49 6.49 0 0 1 5.425 7.62C6.375 6.805 7.863 6 10 6s3.624.805 4.575 1.62c.473.406.812.812 1.034 1.119a5.13 5.13 0 0 1 .33.521l.005.01l.002.004l.001.002l-.447.224l.447-.224a.5.5 0 0 1-.893.45v-.002l-.002-.001l-.009-.018a4.133 4.133 0 0 0-.245-.381a5.487 5.487 0 0 0-.873-.944C13.125 7.695 11.863 7 10 7s-3.125.695-3.924 1.38a5.49 5.49 0 0 0-.874.944a4.14 4.14 0 0 0-.245.381l-.01.018z',
  'EyeTrackingOff': 'M2.414 3.121C2.152 3.517 2 3.991 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.232.052-.45.146-.647l3.141 3.141A6.592 6.592 0 0 0 4.392 8.74a5.14 5.14 0 0 0-.33.521l-.006.01l-.002.004v.001s-.001.001.446.225l-.447-.224a.5.5 0 0 0 .894.448v-.001l.01-.018l.045-.078a4.14 4.14 0 0 1 .2-.303A5.582 5.582 0 0 1 7.02 7.726l1.293 1.293a3 3 0 1 0 4.168 4.168l3.667 3.667A1.494 1.494 0 0 1 15.5 17h-3a.5.5 0 0 0 0 1h3c.51 0 .983-.152 1.379-.414l.267.268a.5.5 0 0 0 .708-.707l-.268-.268l-.732-.732l-3.938-3.938L9.29 8.584L8.007 7.3l-.78-.78l-3.374-3.374l-.732-.732l-.267-.268a.5.5 0 1 0-.708.708l.268.267zm9.34 9.34A2 2 0 1 1 9.04 9.746l2.715 2.715zm6.221 3.393c.016-.116.025-.234.025-.354v-3a.5.5 0 0 0-1 0v2.379l.975.975zM9.17 7.048C9.432 7.017 9.709 7 10 7c1.863 0 3.126.695 3.925 1.38c.402.344.688.688.873.944a4.133 4.133 0 0 1 .245.381l.01.018v.002a.5.5 0 0 0 .894-.449v-.002l-.003-.004l-.005-.01a5.13 5.13 0 0 0-.33-.522a6.491 6.491 0 0 0-1.034-1.118C13.626 6.805 12.137 6 10 6a7.68 7.68 0 0 0-1.695.183l.865.865zm6.777 2.228l-.058.03l-.387.193l.445-.223zM5.121 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.238.008-.354.025L5.121 3zM4.5 17A1.5 1.5 0 0 1 3 15.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 4.5 18h3a.5.5 0 0 0 0-1h-3zm11-14A1.5 1.5 0 0 1 17 4.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 15.5 2h-3a.5.5 0 0 0 0 1h3z',
  'EyeTrackingOffSolid': 'M2.414 3.121C2.152 3.517 2 3.991 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.232.052-.45.146-.647l3.141 3.141A6.592 6.592 0 0 0 4.392 8.74a5.14 5.14 0 0 0-.33.521l-.006.01l-.002.004v.001s-.001.001.446.225l-.447-.224a.5.5 0 0 0 .894.448v-.001l.01-.018l.045-.078a4.14 4.14 0 0 1 .2-.303A5.582 5.582 0 0 1 7.02 7.726l1.293 1.293a3 3 0 1 0 4.168 4.168l3.667 3.667A1.494 1.494 0 0 1 15.5 17h-3a.5.5 0 0 0 0 1h3c.51 0 .983-.152 1.379-.414l.267.268a.5.5 0 0 0 .708-.707l-.268-.268l-.732-.732l-3.938-3.938L9.29 8.584L8.007 7.3l-.78-.78l-3.374-3.374l-.732-.732l-.267-.268a.5.5 0 1 0-.708.708l.268.267zm15.561 12.733c.016-.116.025-.234.025-.354v-3a.5.5 0 0 0-1 0v2.379l.975.975zM9.17 7.048C9.432 7.017 9.709 7 10 7c1.863 0 3.126.695 3.925 1.38c.402.344.688.688.873.944a4.133 4.133 0 0 1 .245.381l.01.018v.002a.5.5 0 0 0 .894-.449v-.002l-.003-.004l-.005-.01a5.13 5.13 0 0 0-.33-.522a6.491 6.491 0 0 0-1.034-1.118C13.626 6.805 12.137 6 10 6a7.68 7.68 0 0 0-1.695.183l.865.865zm6.777 2.228l-.058.03l-.387.193l.445-.223zM5.121 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.238.008-.354.025L5.121 3zM3 15.5A1.5 1.5 0 0 0 4.5 17h3a.5.5 0 0 1 0 1h-3A2.5 2.5 0 0 1 2 15.5v-3a.5.5 0 0 1 1 0v3zm14-11A1.5 1.5 0 0 0 15.5 3h-3a.5.5 0 0 1 0-1h3A2.5 2.5 0 0 1 18 4.5v3a.5.5 0 0 1-1 0v-3z',
  'Share': 'M13.33 12.838l4.497-4.423l.057-.065a.587.587 0 0 0-.057-.767L13.33 3.162l-.062-.053c-.36-.27-.89-.01-.89.469v2.13l-.225.015c-3.563.282-5.65 2.537-6.148 6.627c-.064.525.538.854.928.506c1.431-1.278 2.91-2.072 4.445-2.39c.246-.051.493-.09.742-.117l.258-.023v2.096l.005.082c.06.453.609.666.947.334zM12.226 6.72l1.152-.077V4.61l3.446 3.388l-3.446 3.39V9.231l-1.356.122h-.008c-1.703.183-3.31.865-4.827 2.002c.298-1.339.807-2.346 1.476-3.067c.83-.895 1.99-1.443 3.563-1.569zM5.5 4A2.5 2.5 0 0 0 3 6.5v8A2.5 2.5 0 0 0 5.5 17h8a2.5 2.5 0 0 0 2.5-2.5v-1a.5.5 0 0 0-1 0v1a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 14.5v-8A1.5 1.5 0 0 1 5.5 5h3a.5.5 0 0 0 0-1h-3z',
  'ShareSolid': 'M12.378 5.708v-2.13c0-.48.53-.738.89-.47l.062.054l4.497 4.42c.21.207.229.539.057.768l-.057.065l-4.497 4.423c-.338.332-.887.119-.947-.334l-.005-.082v-2.096l-.258.023c-1.8.193-3.526 1.024-5.187 2.507c-.39.348-.992.02-.928-.506c.498-4.09 2.585-6.345 6.148-6.627l.225-.015zM5.5 4A2.5 2.5 0 0 0 3 6.5v8A2.5 2.5 0 0 0 5.5 17h8a2.5 2.5 0 0 0 2.5-2.5v-1a.5.5 0 0 0-1 0v1a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 14.5v-8A1.5 1.5 0 0 1 5.5 5h3a.5.5 0 0 0 0-1h-3z',
  'Alert': 'M9.998 2c3.149 0 5.744 2.335 5.984 5.355l.014.223l.004.224l-.001 3.596l.925 2.222c.023.054.04.11.053.167l.016.086l.008.132a1 1 0 0 1-.749.963l-.116.027l-.135.01l-3.501-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a.998.998 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793l.004-.225C4.127 4.451 6.771 2 9.998 2zM11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355l.007-.141zM9.998 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.964-2.313L15 11.5V7.812l-.004-.204C14.891 5.035 12.695 3 9.998 3z',
  'AlertSolid': 'M12.45 16.002a2.5 2.5 0 0 1-4.9 0h4.9zM9.998 2c3.149 0 5.744 2.335 5.984 5.355l.013.223l.005.224l-.001 3.606l.954 2.587l.025.085l.016.086l.005.089c0 .315-.196.59-.522.707l-.114.033l-.114.01H3.751a.75.75 0 0 1-.259-.047c-.287-.105-.476-.372-.482-.716l.004-.117l.034-.13l.95-2.584L4 7.793l.004-.225C4.127 4.451 6.771 2 9.998 2z',
  'AlertOff': 'M4.004 7.568a5.62 5.62 0 0 1 .58-2.277L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-2.849-2.85H12.5l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a.998.998 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793l.004-.225zm9.295 6.438l-7.96-7.96c-.171.42-.282.87-.322 1.339l-.013.212L5 7.802V11.5l-.038.192l-.963 2.313l9.3.001zm-1.8.998h-3l.008.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355l.007-.141zm3.54-3.312l.874 2.1l.852.852a.977.977 0 0 0 .236-.64l-.008-.13l-.016-.087a.996.996 0 0 0-.053-.167L16 11.398L16 7.802l-.005-.224l-.013-.223C15.742 4.335 13.147 2 9.998 2c-1.64 0-3.128.633-4.213 1.664l.707.707A5.1 5.1 0 0 1 9.998 3c2.697 0 4.893 2.035 4.998 4.608l.004.204V11.5l.038.192z',
  'AlertOffSolid': 'M4.004 7.568a5.62 5.62 0 0 1 .58-2.277L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-2.849-2.85H3.752a.75.75 0 0 1-.259-.046c-.287-.105-.476-.372-.482-.716l.004-.117l.034-.13l.95-2.584L4 7.793l.004-.225zM17 14.255a.72.72 0 0 1-.163.46L5.786 3.663A6.095 6.095 0 0 1 9.997 2c3.149 0 5.744 2.335 5.984 5.355l.013.223l.005.224l-.001 3.606l.954 2.587l.025.085l.016.086l.005.089zm-4.55 1.747a2.5 2.5 0 0 1-4.899 0h4.9z',
  'AlertOn': 'M1.796 2.098a.5.5 0 1 0-.6.8L3.198 4.4a.5.5 0 1 0 .6-.8L1.796 2.098zM1 7a.5.5 0 0 0 0 1h1.5a.5.5 0 0 0 0-1H1zm8.998-5c3.149 0 5.744 2.334 5.984 5.355l.014.222l.004.225l-.001 3.596l.925 2.222a1 1 0 0 1 .053.167l.016.086l.008.131a1 1 0 0 1-.749.963l-.116.027l-.135.01H12.5l-.005.16a2.5 2.5 0 0 1-4.99 0l-.005-.16H3.999c-.088 0-.175-.011-.26-.034l-.124-.043a1 1 0 0 1-.603-1.052l.021-.127l.043-.128l.923-2.22L4 7.793l.004-.224C4.127 4.45 6.771 2 9.998 2zM11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.356l.007-.14zM9.998 3c-2.623 0-4.77 1.923-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.312l11.958.002l.045-.002l-.964-2.312L15 11.5V7.812l-.004-.204C14.891 5.034 12.695 3 9.998 3zm8.906-.802a.5.5 0 0 0-.7-.1L16.202 3.6a.5.5 0 0 0 .6.8l2.002-1.502a.5.5 0 0 0 .1-.7zM19.5 7.5A.5.5 0 0 0 19 7h-1.5a.5.5 0 0 0 0 1H19a.5.5 0 0 0 .5-.5z',
  'AlertOnSolid': 'M1.796 2.098a.5.5 0 1 0-.6.8L3.198 4.4a.5.5 0 1 0 .6-.8L1.796 2.098zM1 7a.5.5 0 0 0 0 1h1.5a.5.5 0 0 0 0-1H1zM12.45 16a2.501 2.501 0 0 1-4.9 0h4.9zM9.998 2c3.149 0 5.744 2.334 5.984 5.355l.014.222l.004.225l-.001 3.606l.954 2.587l.025.084l.016.087l.005.088c0 .315-.196.59-.522.707l-.113.033l-.115.01H3.751a.75.75 0 0 1-.259-.046c-.287-.106-.476-.372-.482-.716l.004-.118l.034-.13l.951-2.583L4 7.792l.004-.224C4.127 4.45 6.771 2 9.998 2zm8.906.198a.5.5 0 0 0-.7-.1L16.202 3.6a.5.5 0 0 0 .6.8l2.002-1.502a.5.5 0 0 0 .1-.7zM19.5 7.5A.5.5 0 0 0 19 7h-1.5a.5.5 0 0 0 0 1H19a.5.5 0 0 0 .5-.5z',
  'AlertSnooze': 'M5 11.5V8.055A.505.505 0 0 0 5.003 8a5 5 0 0 1 6.36-4.813a.5.5 0 1 0 .272-.962A6 6 0 0 0 4.004 7.94A.504.504 0 0 0 4 7.998V11.4l-.923 2.216A1 1 0 0 0 4 15h3.5a2.5 2.5 0 0 0 5 0H16a1 1 0 0 0 .923-1.384L16 11.4V9.998a.5.5 0 0 0-1 0V11.5a.5.5 0 0 0 .039.192L16 14H4l.962-2.308A.5.5 0 0 0 5 11.5zM8.5 15h3a1.5 1.5 0 0 1-3 0zM14 2h3.5a.5.5 0 0 1 .452.714l-.043.073L14.96 7h2.54a.5.5 0 0 1 .09.992L17.5 8H14a.5.5 0 0 1-.452-.714l.042-.073L16.54 3H14a.5.5 0 0 1-.09-.992L14 2zM9.5 6h2.5a.5.5 0 0 1 .432.753l-.048.067L10.57 9H12a.5.5 0 0 1 .09.992L12 10h-2.5a.5.5 0 0 1-.432-.753l.048-.067L10.933 7H9.501a.5.5 0 0 1-.09-.992L9.501 6z',
  'AlertSnoozeOff': 'M9.998 2c.891 0 1.738.187 2.5.524A1.5 1.5 0 0 0 13.998 4h.627l-1.286 1.826A1.475 1.475 0 0 0 11.999 5H9.454l-.18.016l-.044.008a1.5 1.5 0 0 0-.33 2.852l-.578.694l-.094.131l-.02.034C7.63 9.705 8.305 11 9.498 11h2.546l.179-.016l.044-.008a1.5 1.5 0 0 0 1.088-2.117c.191.09.407.141.643.141H16v2.408l.953 2.587l.026.085l.015.086l.005.089c0 .315-.195.59-.522.707l-.113.033l-.115.01H3.752a.75.75 0 0 1-.26-.047c-.287-.105-.475-.372-.482-.716l.004-.117l.034-.13l.951-2.584L4 7.793l.005-.225C4.127 4.451 6.77 2 9.998 2zm2.452 14.002a2.501 2.501 0 0 1-4.9 0h4.9zM13.998 2h3.5a.5.5 0 0 1 .452.714l-.042.073L14.958 7h2.54a.5.5 0 0 1 .09.992l-.09.008h-3.5a.5.5 0 0 1-.452-.714l.042-.073L16.538 3h-2.54a.5.5 0 0 1-.09-.992l.09-.008zM9.499 6h2.5a.5.5 0 0 1 .432.753l-.048.067L10.567 9h1.432a.5.5 0 0 1 .09.992l-.09.008h-2.5a.5.5 0 0 1-.432-.753l.048-.067L10.93 7H9.5a.5.5 0 0 1-.09-.992L9.5 6z',
  'AlertUrgent': 'M13.264 2.078a.5.5 0 1 0-.523.852c2.258 1.384 4.12 3.414 4.26 7.09A.5.5 0 0 0 18 9.982c-.157-4.099-2.278-6.398-4.736-7.904zm-1.178 2.65a.5.5 0 0 1 .694-.134c1.607 1.085 2.715 2.638 2.888 4.424c.016.16.024.323.024.487a.5.5 0 0 1-1 0c0-.132-.007-.262-.02-.39c-.136-1.418-1.024-2.728-2.452-3.693a.5.5 0 0 1-.134-.694zm-7.006.71a5.158 5.158 0 0 0-2.614 6.811l1.223 2.749l.09 2.32a.75.75 0 0 0 1.054.656l9.727-4.33a.75.75 0 0 0 .218-1.223l-1.664-1.619l-1.224-2.749a5.158 5.158 0 0 0-6.81-2.614zm-1.7 6.404a4.158 4.158 0 0 1 7.596-3.382l1.302 2.925l1.538 1.495l-9.052 4.03l-.083-2.143l-1.302-2.925zm7.298 6.034a1.49 1.49 0 0 1-1.848-.54l2.685-1.194a1.49 1.49 0 0 1-.837 1.734z',
  'AlertUrgentSolid': 'M2.466 12.25a5.158 5.158 0 0 1 9.424-4.197l1.224 2.749l1.664 1.619a.75.75 0 0 1-.218 1.222l-9.727 4.331a.75.75 0 0 1-1.054-.656l-.09-2.32l-1.223-2.749zm6.364 5.087a1.49 1.49 0 0 0 2.685-1.195L8.83 17.337zm3.256-12.609a.5.5 0 0 1 .694-.134c1.607 1.085 2.715 2.638 2.888 4.424c.016.16.024.323.024.487a.5.5 0 1 1-1 0a4.04 4.04 0 0 0-.02-.39c-.136-1.418-1.024-2.728-2.452-3.693a.5.5 0 0 1-.134-.694zm.49-2.485a.5.5 0 0 1 .688-.165c2.458 1.506 4.58 3.805 4.736 7.904a.5.5 0 0 1-1 .038C16.86 6.344 15 4.314 12.741 2.93a.5.5 0 0 1-.165-.687z',
  'ArrowClockwise': 'M3.066 9.05a7 7 0 0 1 12.557-3.22l.126.17H12.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 .5-.5V2.502a.5.5 0 0 0-1 0v2.207a8 8 0 1 0 1.986 4.775a.5.5 0 0 0-.998.064A7 7 0 1 1 3.066 9.05z',
  'ArrowClockwiseSolid': 'M10.628 2.025a8 8 0 1 0 7.367 7.714a.75.75 0 1 0-1.5.045a6.5 6.5 0 1 1-1.573-4.029l.204.248h-2.379l-.101.008a.75.75 0 0 0 0 1.486l.101.007h4l.102-.007a.75.75 0 0 0 .641-.641l.007-.102v-4l-.007-.102a.75.75 0 0 0-.641-.641l-.102-.007l-.102.007a.75.75 0 0 0-.641.641l-.007.102l.001 1.953a7.977 7.977 0 0 0-5.37-2.682z',
  'ArrowClockwiseDashes': 'M8.132 2.22a8.02 8.02 0 0 1 3.736 0a.5.5 0 0 1-.233.972a7.02 7.02 0 0 0-3.27 0a.5.5 0 1 1-.233-.973zM6.507 3.342a.5.5 0 0 1-.165.687A7.039 7.039 0 0 0 4.03 6.342a.5.5 0 0 1-.852-.523A8.039 8.039 0 0 1 5.82 3.18a.5.5 0 0 1 .688.164zm7.674-.165a.5.5 0 1 0-.523.852A7.04 7.04 0 0 1 15.745 6H12.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-1 0v2.208a8.035 8.035 0 0 0-1.82-1.53zM2.822 7.762a.5.5 0 0 1 .37.603a7.02 7.02 0 0 0 0 3.27a.5.5 0 0 1-.973.233a8.02 8.02 0 0 1 0-3.736a.5.5 0 0 1 .603-.37zM18 10v-.5a.5.5 0 0 0-1 0v.5a7.02 7.02 0 0 1-.192 1.635a.5.5 0 1 0 .973.233c.143-.6.219-1.225.219-1.868zM3.343 13.493a.5.5 0 0 1 .687.165a7.038 7.038 0 0 0 2.312 2.312a.5.5 0 1 1-.523.852a8.038 8.038 0 0 1-2.64-2.641a.5.5 0 0 1 .164-.688zm13.479.688a.5.5 0 0 0-.852-.523a7.037 7.037 0 0 1-2.313 2.312a.5.5 0 0 0 .524.852a8.037 8.037 0 0 0 2.64-2.641zm-9.06 2.997a.5.5 0 0 1 .603-.37a7.02 7.02 0 0 0 3.27 0a.5.5 0 1 1 .233.973a8.02 8.02 0 0 1-3.736 0a.5.5 0 0 1-.37-.603z',
  'ArrowClockwiseDashesSolid': 'M8.44 2.152a8.035 8.035 0 0 1 3.12 0a.75.75 0 0 1-.29 1.472a6.536 6.536 0 0 0-2.54 0a.75.75 0 0 1-.29-1.472zm4.965 1.402a.75.75 0 0 1 1.04-.206A8.04 8.04 0 0 1 16 4.708V2.75a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h2.374a6.541 6.541 0 0 0-1.513-1.406a.75.75 0 0 1-.206-1.04zm-7.016 1.04a.75.75 0 0 0-.834-1.246a8.04 8.04 0 0 0-2.207 2.207a.75.75 0 0 0 1.246.834A6.54 6.54 0 0 1 6.39 4.594zM3.034 7.85a.75.75 0 0 1 .59.882a6.535 6.535 0 0 0 0 2.538a.75.75 0 0 1-1.472.291a8.035 8.035 0 0 1 0-3.12a.75.75 0 0 1 .882-.59zM18 10v-.25a.75.75 0 0 0-1.5 0V10c0 .435-.043.86-.124 1.27a.75.75 0 1 0 1.472.29c.1-.505.152-1.027.152-1.56zM3.554 13.405a.75.75 0 0 1 1.04.206a6.54 6.54 0 0 0 1.795 1.795a.75.75 0 0 1-.834 1.246a8.042 8.042 0 0 1-2.207-2.207a.75.75 0 0 1 .206-1.04zm13.098 1.04a.75.75 0 0 0-1.246-.834a6.54 6.54 0 0 1-1.795 1.795a.75.75 0 0 0 .834 1.246a8.043 8.043 0 0 0 2.207-2.207zM7.85 16.966a.75.75 0 0 1 .882-.59a6.535 6.535 0 0 0 2.538 0a.75.75 0 1 1 .291 1.472a8.033 8.033 0 0 1-3.12 0a.75.75 0 0 1-.59-.881z',
  'ArrowHookDownLeft': 'M6 4.5a.5.5 0 0 1 .5-.5H11c1.636 0 2.9.618 3.749 1.574C15.59 6.521 16 7.768 16 9c0 1.232-.41 2.48-1.251 3.426C13.899 13.382 12.636 14 11 14H5.707l2.647 2.646a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 1 1 .708.708L5.707 13H11c1.364 0 2.35-.507 3.001-1.238C14.66 11.02 15 10.018 15 9s-.34-2.02-.999-2.762C13.351 5.507 12.364 5 11 5H6.5a.5.5 0 0 1-.5-.5z',
  'ArrowHookDownLeftSolid': 'M6 4.75A.75.75 0 0 1 6.75 4h4.5c1.586 0 2.696.621 3.53 1.588C15.6 6.54 16 7.784 16 9c0 1.216-.3 2.46-1.12 3.412c-.834.967-2.044 1.588-3.63 1.588H6.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 .02-1.08l3.5-3.25a.75.75 0 0 1 1.02 1.1l-2.1 1.95h4.59c1.164 0 1.86-.441 2.4-1.068c.554-.642.85-1.523.85-2.432s-.296-1.79-.85-2.432c-.54-.627-1.236-1.068-2.4-1.068h-4.5A.75.75 0 0 1 6 4.75z',
  'ArrowHookDownRight': 'M4 9a5 5 0 0 1 5-5h4.5a.5.5 0 0 1 0 1H9a4 4 0 1 0 0 8h5.293l-2.7-2.7a.5.5 0 1 1 .708-.706l3.539 3.539a.5.5 0 0 1 .125.497a.499.499 0 0 1-.135.247l-3.533 3.533a.5.5 0 0 1-.707-.707L14.293 14H9a5 5 0 0 1-5-5z',
  'ArrowHookDownRightSolid': 'M9 14c.06 0-.06.002 0 0c.023.002.227 0 .25 0h4.393l-2.268 2.268a.75.75 0 1 0 1.061 1.06l3.353-3.352a.749.749 0 0 0 .212-.639a.747.747 0 0 0-.215-.444L12.54 9.646a.75.75 0 1 0-1.06 1.061L13.27 12.5H9a3.5 3.5 0 1 1 0-7h4.25a.75.75 0 0 0 0-1.5H9a5 5 0 0 0 0 10z',
  'Bookmark': 'M4 4.5A2.5 2.5 0 0 1 6.5 2h7A2.5 2.5 0 0 1 16 4.5v13a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13zM6.5 3A1.5 1.5 0 0 0 5 4.5v12.018l4.706-3.422a.5.5 0 0 1 .588 0L15 16.518V4.5A1.5 1.5 0 0 0 13.5 3h-7z',
  'BookmarkSolid': 'M4 4.5A2.5 2.5 0 0 1 6.5 2h7A2.5 2.5 0 0 1 16 4.5v13a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13z',
  'BookmarkAdd': 'M19 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V5h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V6h1.5a.5.5 0 0 0 0-1H15V3.5zm0 13.018v-5.54a5.489 5.489 0 0 0 1-.185V17.5a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13A2.5 2.5 0 0 1 6.5 2h3.757A5.504 5.504 0 0 0 9.6 3H6.5A1.5 1.5 0 0 0 5 4.5v12.018l4.706-3.422a.5.5 0 0 1 .588 0L15 16.518z',
  'BookmarkAddSolid': 'M19 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-4-2a.5.5 0 0 0-1 0V5h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V6h1.5a.5.5 0 0 0 0-1H15V3.5zm-.5 7.5c.52 0 1.023-.072 1.5-.207V17.5a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13A2.5 2.5 0 0 1 6.5 2h3.757a5.5 5.5 0 0 0 4.243 9z',
  'BookmarkMultiple': 'M6.268 3A2 2 0 0 1 8 2h4.5A3.5 3.5 0 0 1 16 5.5v10a.5.5 0 0 1-.777.416L15 15.768V5.5A2.5 2.5 0 0 0 12.5 3H6.268zM6 4a2 2 0 0 0-2 2v11.5a.5.5 0 0 0 .777.416L9 15.101l4.223 2.815A.5.5 0 0 0 14 17.5V6a2 2 0 0 0-2-2H6zM5 6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10.566l-3.723-2.482a.5.5 0 0 0-.554 0L5 16.566V6z',
  'BookmarkMultipleSolid': 'M6.268 3A2 2 0 0 1 8 2h4.5A3.5 3.5 0 0 1 16 5.5v10a.5.5 0 0 1-.777.416L15 15.768V5.5A2.5 2.5 0 0 0 12.5 3H6.268zM6 4a2 2 0 0 0-2 2v11.5a.5.5 0 0 0 .777.416L9 15.101l4.223 2.815A.5.5 0 0 0 14 17.5V6a2 2 0 0 0-2-2H6z',
  'BookmarkSearch': 'M15.596 7.303a3.5 3.5 0 1 1 .707-.707l2.55 2.55a.5.5 0 0 1-.707.708l-2.55-2.55zM16 4.5a2.5 2.5 0 1 0-5 0a2.5 2.5 0 0 0 5 0zm0 4.621V17.5a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13A2.5 2.5 0 0 1 6.5 2h3.258a4.484 4.484 0 0 0-.502 1H6.5A1.5 1.5 0 0 0 5 4.5v12.018l4.706-3.422a.5.5 0 0 1 .588 0L15 16.518V8.744c.15-.053.297-.114.44-.183l.56.56z',
  'BookmarkSearchSearch': 'M15.596 7.303a3.5 3.5 0 1 1 .707-.707l2.55 2.55a.5.5 0 0 1-.707.708l-2.55-2.55zM16 4.5a2.5 2.5 0 1 0-5 0a2.5 2.5 0 0 0 5 0zm0 4.621V17.5a.5.5 0 0 1-.794.404L10 14.118l-5.206 3.786A.5.5 0 0 1 4 17.5v-13A2.5 2.5 0 0 1 6.5 2h3.258a4.5 4.5 0 0 0 5.682 6.561l.56.56z',
  'Clipboard': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v12a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM7.085 4H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1z',
  'ClipboardSolid': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v12a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3z',
  'ClipboardCheckmark': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.48 5.48 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1c.183.358.404.693.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'ClipboardCheckmarkSolid': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707A5.5 5.5 0 0 0 10.257 18H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'ClipboardError': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.48 5.48 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1c.183.358.404.693.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zM14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25z',
  'ClipboardErrorSolid': 'M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707A5.5 5.5 0 0 0 10.257 18H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3h1.585zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zM14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5zm0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25z',
  'ClipboardText': 'M6.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm2-12a1.5 1.5 0 0 0-1.415 1H5.5A1.5 1.5 0 0 0 4 4.5v12A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 3h-1.585A1.5 1.5 0 0 0 11.5 2h-3zm3 1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h3zm-6 1h1.585A1.5 1.5 0 0 0 8.5 5h3a1.5 1.5 0 0 0 1.415-1H14.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5z',
  'ClipboardTextSolid': 'M8.5 2a1.5 1.5 0 0 0-1.415 1H5.5A1.5 1.5 0 0 0 4 4.5v12A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 3h-1.585A1.5 1.5 0 0 0 11.5 2h-3zm3 1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h3zm-5 5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1zm0 3h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zM6 14.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z',
  'Clock': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm-.5 2a.5.5 0 0 1 .492.41L10 5.5V10h2.5a.5.5 0 0 1 .09.992L12.5 11h-3a.5.5 0 0 1-.492-.41L9 10.5v-5a.5.5 0 0 1 .5-.5z',
  'ClockFill': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm-.5 3a.5.5 0 0 0-.5.5v5l.008.09A.5.5 0 0 0 9.5 11h3l.09-.008A.5.5 0 0 0 12.5 10H10V5.5l-.008-.09A.5.5 0 0 0 9.5 5z',
  'ClockAlarm': 'M10 6.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h3a.5.5 0 1 0 0-1H10V6.5zM3.353 7.8A3.19 3.19 0 0 1 2 5.187C2 3.431 3.414 2 5.166 2c1.077 0 2.026.542 2.597 1.365A6.992 6.992 0 0 1 10 3c.78 0 1.529.127 2.23.362A3.164 3.164 0 0 1 14.83 2A3.172 3.172 0 0 1 18 5.175c0 1.08-.538 2.033-1.359 2.607c.233.697.359 1.443.359 2.218a6.973 6.973 0 0 1-1.71 4.584l1.564 1.562a.5.5 0 0 1-.708.707l-1.562-1.562A6.973 6.973 0 0 1 10 17a6.973 6.973 0 0 1-4.584-1.71l-1.562 1.564a.5.5 0 1 1-.708-.707l1.563-1.563A6.973 6.973 0 0 1 3 10c0-.769.124-1.508.353-2.2zM3 5.187c0 .662.291 1.255.75 1.656a7.03 7.03 0 0 1 3.062-3.077A2.152 2.152 0 0 0 5.166 3A2.176 2.176 0 0 0 3 5.187zm13.242 1.64c.464-.399.758-.99.758-1.652A2.172 2.172 0 0 0 14.83 3c-.66 0-1.251.295-1.65.763a7.03 7.03 0 0 1 3.06 3.065zM4 10a6 6 0 1 0 12 0a6 6 0 0 0-12 0z',
  'ClockAlarmSolid': 'M7.763 3.365A3.156 3.156 0 0 0 5.166 2C3.414 2 2 3.43 2 5.187A3.19 3.19 0 0 0 3.353 7.8A6.993 6.993 0 0 0 3 10c0 1.753.644 3.356 1.71 4.584l-1.564 1.563a.5.5 0 0 0 .708.707l1.562-1.563A6.973 6.973 0 0 0 10 17a6.973 6.973 0 0 0 4.584-1.71l1.562 1.563a.5.5 0 0 0 .708-.707l-1.563-1.562A6.973 6.973 0 0 0 17 10c0-.775-.126-1.521-.359-2.218A3.174 3.174 0 0 0 18 5.175A3.172 3.172 0 0 0 14.83 2c-1.078 0-2.03.54-2.602 1.362A6.992 6.992 0 0 0 10 3c-.782 0-1.534.128-2.237.365zM5.166 3c.657 0 1.248.296 1.646.766a7.03 7.03 0 0 0-3.061 3.077A2.19 2.19 0 0 1 3 5.187C3 3.975 3.973 3 5.166 3zm8.015.763c.399-.468.99-.763 1.65-.763C16.028 3 17 3.973 17 5.175c0 .661-.294 1.253-.758 1.653a7.03 7.03 0 0 0-3.06-3.065zM9.5 6a.5.5 0 0 1 .5.5V10h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5z',
  'Cloud': 'M10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377C18 13.488 16.53 15 14.718 15H5.282C3.469 15 2 13.488 2 11.623C2 9.82 3.373 8.347 5.102 8.251l.251-.005C5.587 5.908 7.183 4 10 4zm0 1C7.886 5 6.551 6.316 6.348 8.345a1 1 0 0 1-.995.901h-.07C4.027 9.246 3 10.304 3 11.623C3 12.943 4.028 14 5.282 14h9.436C15.972 14 17 12.942 17 11.623c0-1.32-1.028-2.377-2.282-2.377h-.071a1 1 0 0 1-.995-.9C13.45 6.325 12.109 5 10 5z',
  'CloudSolid': 'M10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377C18 13.488 16.53 15 14.718 15H5.282C3.469 15 2 13.488 2 11.623c0-1.865 1.47-3.377 3.282-3.377h.071C5.587 5.908 7.183 4 10 4z',
  'CloudCheckmark': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283a5.782 5.782 0 0 0-1.114-1.062c-.31-.933-1.163-1.598-2.157-1.598h-.071a1 1 0 0 1-.995-.9C13.45 4.325 12.109 3 10 3C7.886 3 6.551 4.316 6.348 6.345a1 1 0 0 1-.995.901h-.07C4.027 7.246 3 8.304 3 9.623C3 10.943 4.028 12 5.282 12h2.666a5.733 5.733 0 0 0-.177 1H5.282C3.469 13 2 11.488 2 9.623C2 7.82 3.373 6.347 5.102 6.251l.251-.005C5.587 3.908 7.183 2 10 2zm8 11.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.854-1.854L12.5 14.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708z',
  'CloudCheckmarkSolid': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283A5.75 5.75 0 0 0 7.772 13h-2.49C3.469 13 2 11.488 2 9.623c0-1.865 1.47-3.377 3.282-3.377h.071C5.587 3.908 7.183 2 10 2zm8 11.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.146-1.854a.5.5 0 0 0-.708 0L12.5 14.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708z',
  'CloudAdd': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283a5.782 5.782 0 0 0-1.114-1.062c-.31-.933-1.163-1.598-2.157-1.598h-.071a1 1 0 0 1-.995-.9C13.45 4.325 12.109 3 10 3C7.886 3 6.551 4.316 6.348 6.345a1 1 0 0 1-.995.901h-.07C4.027 7.246 3 8.304 3 9.623C3 10.943 4.028 12 5.282 12h2.666a5.733 5.733 0 0 0-.177 1H5.282C3.469 13 2 11.488 2 9.623C2 7.82 3.373 6.347 5.102 6.251l.251-.005C5.587 3.908 7.183 2 10 2zm3.5 16a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm0-7a.5.5 0 0 1 .5.5V13h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V14h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z',
  'CloudAddSolid': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283A5.75 5.75 0 0 0 7.772 13h-2.49C3.469 13 2 11.488 2 9.623c0-1.865 1.47-3.377 3.282-3.377h.071C5.587 3.908 7.183 2 10 2zm3.5 16a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9zm0-7a.5.5 0 0 1 .5.5V13h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V14h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z',
  'CloudDismiss': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283a5.782 5.782 0 0 0-1.114-1.062c-.31-.933-1.163-1.598-2.157-1.598h-.071a1 1 0 0 1-.995-.9C13.45 4.325 12.109 3 10 3C7.886 3 6.551 4.316 6.348 6.345a1 1 0 0 1-.995.901h-.07C4.027 7.246 3 8.304 3 9.623C3 10.943 4.028 12 5.282 12h2.666a5.733 5.733 0 0 0-.177 1H5.282C3.469 13 2 11.488 2 9.623C2 7.82 3.373 6.347 5.102 6.251l.251-.005C5.587 3.908 7.183 2 10 2zm8 11.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-3.793 0l1.147-1.146a.5.5 0 0 0-.708-.708L13.5 12.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708l1.146-1.147l1.146 1.147a.5.5 0 0 0 .708-.708L14.207 13.5z',
  'CloudDismissSolid': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283A5.75 5.75 0 0 0 7.772 13h-2.49C3.469 13 2 11.488 2 9.623c0-1.865 1.47-3.377 3.282-3.377h.071C5.587 3.908 7.183 2 10 2zm8 11.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0zm-2.646-1.146a.5.5 0 0 0-.708-.708L13.5 12.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708l1.146-1.147l1.146 1.147a.5.5 0 0 0 .708-.708L14.207 13.5l1.147-1.146z',
  'CloudEdit': 'M14.647 8.246C14.415 5.923 12.817 4 10 4S5.587 5.908 5.353 8.246l-.251.005C3.373 8.347 2 9.821 2 11.623C2 13.488 3.47 15 5.282 15h3.193c.11-.361.283-.7.51-1H5.282C4.028 14 3 12.942 3 11.623c0-1.32 1.028-2.377 2.282-2.377h.071a1 1 0 0 0 .995-.9C6.551 6.315 7.886 5 10 5c2.108 0 3.45 1.325 3.652 3.346c.025.25.14.471.313.632l.137-.137c.252-.253.54-.448.847-.587a3.242 3.242 0 0 0-.231-.008h-.071zm.162 1.302l-4.83 4.83a2.197 2.197 0 0 0-.577 1.02l-.375 1.498a.89.89 0 0 0 1.079 1.078l1.498-.374c.386-.097.739-.296 1.02-.578l4.83-4.83a1.87 1.87 0 0 0-2.645-2.644z',
  'CloudEditSolid': 'M14.647 8.246C14.415 5.923 12.817 4 10 4S5.587 5.908 5.353 8.246h-.07C3.468 8.246 2 9.758 2 11.623C2 13.488 3.47 15 5.282 15h3.193c.152-.501.426-.958.798-1.33l4.829-4.83c.252-.252.54-.447.847-.586a3.242 3.242 0 0 0-.231-.008h-.071zm.162 1.302l-4.83 4.83a2.197 2.197 0 0 0-.577 1.02l-.375 1.498a.89.89 0 0 0 1.079 1.078l1.498-.374c.386-.097.739-.296 1.02-.578l4.83-4.83a1.87 1.87 0 0 0-2.645-2.644z',
  'CloudOff': 'M2.854 2.146a.5.5 0 1 0-.708.708l3.67 3.668a5.326 5.326 0 0 0-.463 1.724l-.251.005C3.373 8.347 2 9.821 2 11.623C2 13.488 3.47 15 5.282 15h9.01l2.854 2.854a.5.5 0 0 0 .708-.708l-15-15zM13.293 14h-8.01c-1.255 0-2.283-1.058-2.283-2.377c0-1.32 1.028-2.377 2.282-2.377h.071a1 1 0 0 0 .995-.9c.038-.38.116-.735.23-1.06L13.293 14zM17 11.623c0 .898-.477 1.675-1.176 2.08l.724.724A3.4 3.4 0 0 0 18 11.623c0-1.865-1.47-3.377-3.282-3.377h-.071C14.415 5.923 12.817 4 10 4c-1.209 0-2.193.352-2.941.938l.715.715C8.36 5.233 9.112 5 10 5c2.108 0 3.45 1.325 3.652 3.346a1 1 0 0 0 .995.9h.071c1.254 0 2.282 1.058 2.282 2.377z',
  'CloudOffSolid': 'M2.854 2.146a.5.5 0 1 0-.708.708l3.67 3.668a5.326 5.326 0 0 0-.463 1.724h-.07C3.468 8.246 2 9.758 2 11.623C2 13.488 3.47 15 5.282 15h9.01l2.854 2.854a.5.5 0 0 0 .708-.708l-15-15zM18 11.623a3.4 3.4 0 0 1-1.452 2.804l-9.49-9.49C7.808 4.353 8.792 4 10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377z',
  'CloudSync': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283a5.782 5.782 0 0 0-1.114-1.062c-.31-.933-1.163-1.598-2.157-1.598h-.071a1 1 0 0 1-.995-.9C13.45 4.325 12.109 3 10 3C7.886 3 6.551 4.316 6.348 6.345a1 1 0 0 1-.995.901h-.07C4.027 7.246 3 8.304 3 9.623C3 10.943 4.028 12 5.282 12h2.666a5.733 5.733 0 0 0-.177 1H5.282C3.469 13 2 11.488 2 9.623C2 7.82 3.373 6.347 5.102 6.251l.251-.005C5.587 3.908 7.183 2 10 2zM9 13.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H14a.5.5 0 0 1 0-1h.468a1.999 1.999 0 0 0-2.383.336a.5.5 0 0 1-.706-.707A3.001 3.001 0 0 1 15 11.152V11a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 12 15.848V16a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1h-.468a1.999 1.999 0 0 0 2.383-.336a.5.5 0 0 1 .706.707c-.285.285-.624.51-.997.66z',
  'CloudSyncSolid': 'M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623c0 .095-.004.19-.011.283A5.75 5.75 0 0 0 7.772 13h-2.49C3.469 13 2 11.488 2 9.623c0-1.865 1.47-3.377 3.282-3.377h.071C5.587 3.908 7.183 2 10 2zM9 13.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0zm6.5-3a.5.5 0 0 1 .5.5v1.5a.5.5 0 0 1-.5.5H14a.5.5 0 0 1 0-1h.468a1.999 1.999 0 0 0-2.383.336a.5.5 0 0 1-.706-.707A3.001 3.001 0 0 1 15 11.152V11a.5.5 0 0 1 .5-.5zm-.876 5.532A2.999 2.999 0 0 1 12 15.848V16a.5.5 0 0 1-1 0v-1.5a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1h-.468a1.999 1.999 0 0 0 2.383-.336a.5.5 0 0 1 .706.707c-.285.285-.624.51-.997.66z',
  'Copy': 'M8 2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8zM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4zM4 6a2 2 0 0 1 1-1.732V14.5A2.5 2.5 0 0 0 7.5 17h6.232A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6z',
  'CopySolid': 'M6 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4zM4 6a2 2 0 0 1 1-1.732V14.5A2.5 2.5 0 0 0 7.5 17h6.232A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6z',
  'Rename': 'M8.5 2a.5.5 0 0 0 0 1h1v14h-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-1V3h1a.5.5 0 0 0 0-1h-3zm-4 2h4v1h-4A1.5 1.5 0 0 0 3 6.5v7A1.5 1.5 0 0 0 4.5 15h4v1h-4A2.5 2.5 0 0 1 2 13.5v-7A2.5 2.5 0 0 1 4.5 4zm11 11h-4v1h4a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4h-4v1h4A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5z',
  'RenameSolid': 'M8.5 2a.5.5 0 0 0 0 1h1v14h-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-1V3h1a.5.5 0 0 0 0-1h-3zm-4 2h4v12h-4A2.5 2.5 0 0 1 2 13.5v-7A2.5 2.5 0 0 1 4.5 4zm11 12h-4V4h4A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5z',
  'Desktop': 'M4 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm8 13v2H8v-2h4zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z',
  'DesktopSolid': 'M3.5 2A1.5 1.5 0 0 0 2 3.5v10A1.5 1.5 0 0 0 3.5 15H7v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 16.5 2h-13zM12 15v2H8v-2h4z',
  'Dismiss': 'M4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07l-.057.07z',
  'DismissSolid': 'M3.897 4.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L10 8.939l4.97-4.97a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L11.061 10l4.97 4.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L10 11.061l-4.97 4.97a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L8.939 10l-4.97-4.97a.75.75 0 0 1-.072-.976l.073-.084l-.073.084z',
  'DismissCircle': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zM7.81 7.114l.069.058L10 9.292l2.121-2.12a.5.5 0 0 1 .638-.058l.07.058a.5.5 0 0 1 .057.637l-.058.07L10.708 10l2.12 2.121a.5.5 0 0 1 .058.638l-.058.07a.5.5 0 0 1-.637.057l-.07-.058L10 10.708l-2.121 2.12a.5.5 0 0 1-.638.058l-.07-.058a.5.5 0 0 1-.057-.637l.058-.07L9.292 10l-2.12-2.121a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057z',
  'DismissCircleSolid': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zM7.81 7.114a.5.5 0 0 0-.638.058l-.058.069a.5.5 0 0 0 .058.638L9.292 10l-2.12 2.121l-.058.07a.5.5 0 0 0 .058.637l.069.058a.5.5 0 0 0 .638-.058L10 10.708l2.121 2.12l.07.058a.5.5 0 0 0 .637-.058l.058-.069a.5.5 0 0 0-.058-.638L10.708 10l2.12-2.121l.058-.07a.5.5 0 0 0-.058-.637l-.069-.058a.5.5 0 0 0-.638.058L10 9.292l-2.121-2.12l-.07-.058z',
  'DismissSquare': 'M7.146 7.146a.5.5 0 0 1 .708 0L10 9.293l2.146-2.147a.5.5 0 0 1 .708.708L10.707 10l2.147 2.146a.5.5 0 0 1-.708.708L10 10.707l-2.146 2.147a.5.5 0 0 1-.708-.708L9.293 10L7.146 7.854a.5.5 0 0 1 0-.708zM3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm3-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6z',
  'DismissSquareSolid': 'M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm4.146 1.146a.5.5 0 0 0 0 .708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293L7.854 7.146a.5.5 0 0 0-.708 0z',
  'Edit': 'M13.245 2.817a2.783 2.783 0 0 1 4.066 3.796l-.13.14l-9.606 9.606a2.001 2.001 0 0 1-.723.462l-.165.053l-4.055 1.106a.5.5 0 0 1-.63-.535l.016-.08l1.106-4.054c.076-.28.212-.54.398-.76l.117-.128l9.606-9.606zm-.86 2.275L4.346 13.13a1 1 0 0 0-.215.321l-.042.123l-.877 3.21l3.212-.875a1 1 0 0 0 .239-.1l.107-.072l.098-.085l8.038-8.04l-2.521-2.52zm4.089-1.568a1.783 1.783 0 0 0-2.402-.11l-.12.11l-.86.86l2.52 2.522l.862-.86a1.783 1.783 0 0 0 .11-2.402l-.11-.12z',
  'EditSolid': 'M11.677 4.384l3.936 3.936l-8.038 8.039a2.001 2.001 0 0 1-.723.462l-.165.053l-4.055 1.106a.5.5 0 0 1-.63-.535l.016-.08l1.106-4.054c.076-.28.212-.54.398-.76l.117-.128l8.038-8.04zm1.568-1.567a2.783 2.783 0 0 1 4.066 3.796l-.13.14l-.861.86l-3.936-3.936l.861-.86z',
  'EditOff': 'M2.854 2.146a.5.5 0 1 0-.707.708l5.53 5.53l-4.038 4.04l-.117.127a2 2 0 0 0-.398.76l-1.106 4.055l-.015.08a.5.5 0 0 0 .63.534l4.054-1.106l.165-.053a2 2 0 0 0 .723-.462l4.038-4.039l5.534 5.534a.5.5 0 0 0 .707-.708l-15-15zm8.052 9.467l-4.038 4.039l-.098.086l-.107.072a1 1 0 0 1-.24.1l-3.21.875l.876-3.21l.042-.124a1 1 0 0 1 .215-.32l4.039-4.039l2.521 2.521zm4-4L12.32 10.2l.708.707l4.153-4.153l.13-.14a2.783 2.783 0 0 0-4.066-3.796L9.092 6.971l.707.707l2.586-2.586l2.52 2.521zm1.568-4.089l.11.12c.584.7.547 1.744-.11 2.402l-.861.86l-2.521-2.52l.86-.862l.12-.11a1.783 1.783 0 0 1 2.402.11z',
  'EditOffSolid': 'M2.854 2.146a.5.5 0 1 0-.707.708l5.53 5.53l-4.038 4.04l-.117.127a2 2 0 0 0-.398.76l-1.106 4.055l-.015.08a.5.5 0 0 0 .63.534l4.054-1.106l.165-.053a2 2 0 0 0 .723-.462l4.038-4.039l5.534 5.534a.5.5 0 0 0 .707-.708l-15-15zM15.613 8.32l-2.586 2.586L9.092 6.97l2.585-2.586l3.936 3.936zm-2.368-5.503a2.783 2.783 0 0 1 4.066 3.797l-.13.14l-.861.86l-3.936-3.937l.861-.86z',
  'ErrorCircle': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm0 9.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5zM10 6a.5.5 0 0 1 .492.41l.008.09V11a.5.5 0 0 1-.992.09L9.5 11V6.5A.5.5 0 0 1 10 6z',
  'ErrorCircleSolid': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 10.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zM10 6a.5.5 0 0 0-.492.41L9.5 6.5V11l.008.09a.5.5 0 0 0 .984 0L10.5 11V6.5l-.008-.09A.5.5 0 0 0 10 6z',
  'Info': 'M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9l-.008-.09zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0zM18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0zM3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0z',
  'InfoSolid': 'M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0zM9.508 8.91a.5.5 0 0 1 .984 0L10.5 9v4.502l-.008.09a.5.5 0 0 1-.984 0l-.008-.09V9l.008-.09zM9.25 6.75a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0z',
  'Link': 'M8 6a.5.5 0 0 1 .09.992L8 7H6a3 3 0 0 0-.197 5.994L6 13h2a.5.5 0 0 1 .09.992L8 14H6a4 4 0 0 1-.22-7.994L6 6h2zm6 0a4 4 0 0 1 .22 7.994L14 14h-2a.5.5 0 0 1-.09-.992L12 13h2a3 3 0 0 0 .197-5.994L14 7h-2a.5.5 0 0 1-.09-.992L12 6h2zM6 9.5h8a.5.5 0 0 1 .09.992L14 10.5H6a.5.5 0 0 1-.09-.992L6 9.5h8h-8z',
  'LinkSolid': 'M14 6a4 4 0 0 1 .2 7.995L14 14h-2a.75.75 0 0 1-.102-1.493L12 12.5h2a2.5 2.5 0 0 0 .164-4.995L14 7.5h-2a.75.75 0 0 1-.102-1.493L12 6h2zM8 6a.75.75 0 0 1 .102 1.493L8 7.5H6a2.5 2.5 0 0 0-.164 4.995L6 12.5h2a.75.75 0 0 1 .102 1.493L8 14H6a4 4 0 0 1-.2-7.995L6 6h2zM6.25 9.25h7.5a.75.75 0 0 1 .102 1.493l-.102.007h-7.5a.75.75 0 0 1-.102-1.493l.102-.007h7.5h-7.5z',
  'MailInbox': 'M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6zm10 7h-3.5a.5.5 0 0 0-.5.5v.011l-.004.06a2.57 2.57 0 0 1-.256.955a1.694 1.694 0 0 1-.572.667c-.26.174-.63.307-1.168.307c-.538 0-.907-.133-1.168-.307a1.694 1.694 0 0 1-.572-.667A2.572 2.572 0 0 1 8 10.511V10.5A.5.5 0 0 0 7.5 10H4V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4zM4 11h3.05c.047.264.137.616.315.974c.186.371.473.758.912 1.051c.443.295 1.01.475 1.723.475c.713 0 1.28-.18 1.723-.475c.44-.293.726-.68.912-1.051c.178-.358.268-.71.315-.974H16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3z',
  'MailInboxSolid': 'M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm1 4h3.5a.5.5 0 0 1 .5.5v.011l.004.06a2.572 2.572 0 0 0 .256.955c.126.254.308.492.572.667c.26.174.63.307 1.168.307c.537 0 .907-.133 1.168-.307c.264-.175.446-.413.572-.667a2.57 2.57 0 0 0 .26-1.015V10.498a.5.5 0 0 1 .5-.498H16V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4zm4 .5v-.002z',
  'Navigation': 'M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5zm.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-15z',
  'NavigationSolid': 'M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75zm0 5A.75.75 0 0 1 2.75 9h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 9.75zM2.75 14a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5H2.75z',
  'Open': 'M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2.5a.5.5 0 0 1 0 1H6zm5-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V4.707l-4.146 4.147a.5.5 0 0 1-.708-.708L15.293 4H11.5a.5.5 0 0 1-.5-.5z',
  'OpenSolid': 'M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v7.5c0 .966.784 1.75 1.75 1.75h7.5a1.75 1.75 0 0 0 1.75-1.75v-2a.75.75 0 0 1 1.5 0v2A3.25 3.25 0 0 1 13.75 17h-7.5A3.25 3.25 0 0 1 3 13.75v-7.5A3.25 3.25 0 0 1 6.25 3h2a.75.75 0 0 1 0 1.5h-2zm4.25-.75a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V5.56l-3.72 3.72a.75.75 0 1 1-1.06-1.06l3.72-3.72h-3.19a.75.75 0 0 1-.75-.75z',
  'Question': 'M10 3C7.794 3 6 4.794 6 7a.5.5 0 0 0 1 0c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.249-.692 1.863-1.575 2.62l-.032.027C10.534 10.384 9.5 11.27 9.5 13v.5a.5.5 0 0 0 1 0V13c0-1.249.692-1.863 1.575-2.62l.032-.027C12.966 9.615 14 8.731 14 7c0-2.206-1.794-4-4-4zm0 14a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5z',
  'QuestionSolid': 'M10 3C7.796 3 6 4.796 6 7a.75.75 0 0 0 1.5 0c0-1.376 1.124-2.5 2.5-2.5s2.5 1.124 2.5 2.5c0 .597-.156.975-.368 1.27c-.232.325-.547.58-.969.92l-.01.008c-.4.323-.893.724-1.27 1.288c-.391.588-.633 1.313-.633 2.264v.5a.75.75 0 0 0 1.5 0v-.5c0-.674.164-1.105.382-1.432c.233-.349.552-.62.964-.953l.068-.055c.374-.302.834-.672 1.188-1.167C13.75 8.588 14 7.903 14 7c0-2.204-1.796-4-4-4zm0 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2z',
  'QuestionCircle': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm0 10.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5zm0-8a2.5 2.5 0 0 1 1.651 4.377l-.154.125l-.219.163l-.087.072a1.968 1.968 0 0 0-.156.149c-.339.36-.535.856-.535 1.614a.5.5 0 0 1-1 0c0-1.012.293-1.752.805-2.298a3.11 3.11 0 0 1 .356-.323l.247-.185l.118-.1A1.5 1.5 0 1 0 8.5 8a.5.5 0 0 1-1 .001A2.5 2.5 0 0 1 10 5.5z',
  'QuestionCircleSolid': 'M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 11.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5zm0-8A2.5 2.5 0 0 0 7.5 8a.5.5 0 0 0 1 0a1.5 1.5 0 1 1 2.632.984l-.106.11l-.118.1l-.247.185a3.11 3.11 0 0 0-.356.323C9.793 10.248 9.5 10.988 9.5 12a.5.5 0 0 0 1 0c0-.758.196-1.254.535-1.614l.075-.076l.08-.073l.088-.072l.219-.163l.154-.125A2.5 2.5 0 0 0 10 5.5z',
  'Warning': 'M10 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 10 7zm0 7.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5zM8.686 2.852a1.5 1.5 0 0 1 2.628 0l6.56 11.925A1.5 1.5 0 0 1 16.558 17H3.44a1.5 1.5 0 0 1-1.314-2.223L8.686 2.852zm1.752.482a.5.5 0 0 0-.876 0L3.003 15.26a.5.5 0 0 0 .438.741H16.56a.5.5 0 0 0 .438-.74L10.438 3.333z',
  'WarningSolid': 'M8.686 2.852L2.127 14.777A1.5 1.5 0 0 0 3.441 17H16.56a1.5 1.5 0 0 0 1.314-2.223L11.314 2.852a1.5 1.5 0 0 0-2.628 0zM10 6.75a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75zm.75 7a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0z',
  'Moon': 'M15.493 13.497a6.981 6.981 0 0 1-11.483.892c2.831-1.087 4.558-2.42 5.593-4.397c1.048-2 1.337-4.16.76-6.909a6.981 6.981 0 0 1 5.13 10.414zM5.457 16.918A7.981 7.981 0 1 0 9.88 2.035a.599.599 0 0 0-.614.74c.688 2.819.434 4.876-.55 6.753c-.934 1.784-2.544 3.031-5.55 4.107a.599.599 0 0 0-.292.903a7.952 7.952 0 0 0 2.582 2.38z',
  'MoonSolid': 'M16.36 13.997a7.981 7.981 0 0 1-13.485.541a.599.599 0 0 1 .292-.903c3.006-1.076 4.616-2.323 5.55-4.107c.984-1.877 1.238-3.934.55-6.753a.599.599 0 0 1 .614-.74a7.981 7.981 0 0 1 6.478 11.962z',
  'Sun': 'M10 2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 10 2zm0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8zm0-1a3 3 0 1 1 0-6a3 3 0 0 1 0 6zm7.5-2.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1h1zM10 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-6.5-5.5a.5.5 0 0 0 0-1H2.463a.5.5 0 0 0 0 1H3.5zm.646-6.354a.5.5 0 0 1 .708 0l1 1a.5.5 0 1 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm.708 11.708a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708.708l-1 1zm11-11.708a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zm-.708 11.708a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 0 0-.708.708l1 1z',
  'SunSolid': 'M10 2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 10 2zm4 8a4 4 0 1 1-8 0a4 4 0 0 1 8 0zm3.5.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1h1zM10 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5zm-6.5-5.5a.5.5 0 0 0 0-1H2.463a.5.5 0 0 0 0 1H3.5zm.646-6.354a.5.5 0 0 1 .708 0l1 1a.5.5 0 1 1-.708.708l-1-1a.5.5 0 0 1 0-.708zm.708 11.708a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708.708l-1 1zm11-11.708a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708zm-.708 11.708a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 0 0-.708.708l1 1z',
  'TaskList': 'M5.854 4.354a.5.5 0 1 0-.708-.708L3.5 5.293l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2zM8.5 5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zM8 15.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM5.854 9.854a.5.5 0 1 0-.708-.708L3.5 10.793l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2zm0 4.292a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 .708-.708l.646.647l1.646-1.647a.5.5 0 0 1 .708 0z',
  'TaskListSolid': 'M5.854 4.354a.5.5 0 1 0-.708-.708L3.5 5.293l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2zM8.75 4.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5zm0 5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5zM8 15.25a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1-.75-.75zM5.854 9.854a.5.5 0 1 0-.708-.708L3.5 10.793l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l2-2zm0 4.292a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 .708-.708l.646.647l1.646-1.647a.5.5 0 0 1 .708 0z',
  'FileBriefcase': 'M6 2a2 2 0 0 0-2 2v5h1V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-2v1h2a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7zM4 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V12h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h1v-1.5zm3 .5H5v1h2v-1zm-4 2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z',
  'FileBriefcaseSolid': 'M10 2v4.5A1.5 1.5 0 0 0 11.5 8H16v8.5a1.5 1.5 0 0 1-1.5 1.5H12v-4.5A2.5 2.5 0 0 0 9.5 11H9v-1a1 1 0 0 0-1-1H4V3.5A1.5 1.5 0 0 1 5.5 2H10zm1 .25V6.5a.5.5 0 0 0 .5.5h4.25L11 2.25zM4 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V12h1a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h1v-1.5zm3 .5H5v1h2v-1zm-4 2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3z',
  'Sync': 'M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 10.066 3.5c.024 0 .05-.002.073-.005L8.586 5.049a.5.5 0 0 0 .707.707l2.121-2.121zM8.586 16.363a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.5 7.5 0 0 0 4.075-13.495a.5.5 0 1 0-.6.8a6.5 6.5 0 0 1-3.959 11.706a.502.502 0 0 0-.073.005l1.554-1.554a.5.5 0 1 0-.707-.707l-2.121 2.121z',
  'SyncSolid': 'M9.885 3.75a6.25 6.25 0 0 0-3.628 11.256a.75.75 0 0 1-.9 1.2a7.75 7.75 0 0 1 3.99-13.93l-.584-.586A.75.75 0 0 1 9.823.63l2.122 2.121a.75.75 0 0 1 0 1.06L9.823 5.934a.75.75 0 0 1-1.06-1.06L9.885 3.75zm.23 12.498a6.25 6.25 0 0 0 3.628-11.256a.75.75 0 0 1 .9-1.2a7.75 7.75 0 0 1-3.99 13.93l.584.585a.75.75 0 1 1-1.06 1.061l-2.122-2.121a.75.75 0 0 1 0-1.06l2.122-2.122a.75.75 0 1 1 1.06 1.06l-1.122 1.123z',
  'SyncOff': 'M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.48 7.48 0 0 0-3.72 1.23l.724.724a6.49 6.49 0 0 1 3.48-.966c.024 0 .05-.001.073-.004L8.586 5.049a.5.5 0 0 0 .707.707l2.121-2.121zm-7.06 1.426a7.5 7.5 0 0 0 1.154 10.945a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 5.063 5.77l9.165 9.165A6.479 6.479 0 0 1 9.934 16.5a.502.502 0 0 0-.074.004l1.554-1.554a.5.5 0 1 0-.707-.707l-2.121 2.121a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.471 7.471 0 0 0 4.521-1.843l2.208 2.209a.5.5 0 0 0 .708-.708l-15-15a.5.5 0 1 0-.708.708L4.355 5.06zm10.95-.365a7.503 7.503 0 0 1 .954 9.44l-.724-.724a6.503 6.503 0 0 0-1.641-8.62a.5.5 0 1 1 .6-.8c.282.212.553.447.81.704z',
  'SyncOffSolid': 'M9.885 3.75a6.236 6.236 0 0 0-3.116.897L5.683 3.56a7.725 7.725 0 0 1 3.665-1.285l-.585-.586A.75.75 0 0 1 9.823.63l2.122 2.121a.75.75 0 0 1 0 1.06L9.823 5.934a.75.75 0 0 1-1.06-1.06L9.885 3.75zM4.178 4.884a7.75 7.75 0 0 0 1.18 11.322a.75.75 0 1 0 .9-1.2a6.25 6.25 0 0 1-1.016-9.059l8.81 8.811a6.225 6.225 0 0 1-3.937 1.49l1.122-1.123a.75.75 0 0 0-1.06-1.06l-2.122 2.121a.75.75 0 0 0 0 1.06l2.122 2.122a.75.75 0 1 0 1.06-1.06l-.585-.586a7.718 7.718 0 0 0 4.463-1.9l2.031 2.03a.5.5 0 0 0 .708-.707l-15-15a.5.5 0 1 0-.708.708l2.032 2.03zm11.174 8.346l1.086 1.086a7.753 7.753 0 0 0-1.796-10.524a.75.75 0 0 0-.9 1.2a6.253 6.253 0 0 1 1.61 8.237z',
  'SyncCircle': 'M10 3a7 7 0 1 1 0 14a7 7 0 0 1 0-14zm8 7a8 8 0 1 0-16 0a8 8 0 0 0 16 0zm-8-2.5A2.5 2.5 0 0 1 12.292 9H11.5a.5.5 0 1 0 0 1h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v.696a3.498 3.498 0 0 0-5.609-.53a.5.5 0 0 0 .746.667A2.493 2.493 0 0 1 10 7.5zm-3 4.304v.696a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-.792a2.5 2.5 0 0 0 4.156.666a.5.5 0 0 1 .745.668A3.498 3.498 0 0 1 7 11.804z',
  'SyncCircleSolid': 'M10 18a8 8 0 1 1 0-16a8 8 0 0 1 0 16zm3.5-8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v.696a3.498 3.498 0 0 0-5.609-.53a.5.5 0 1 0 .746.667A2.5 2.5 0 0 1 12.293 9H11.5a.5.5 0 1 0 0 1h2zm-7.5.5v2a.5.5 0 0 0 1 0v-.696a3.498 3.498 0 0 0 5.609.53a.5.5 0 0 0-.745-.668A2.5 2.5 0 0 1 7.708 11H8.5a.5.5 0 0 0 0-1h-2a.5.5 0 0 0-.5.5z',
 }
 export type IconName =
  | 'Folder'
  // | 'FolderSolid'
  | 'FolderAdd'
  // | 'FolderAddSolid'
  // | 'FolderArrowRight'
  // | 'FolderArrowRightSolid'
  // | 'FolderArrowUp'
  // | 'FolderArrowUpSolid'
  | 'FolderOpen'
  // | 'FolderOpenSolid'
  // | 'FolderOpenVertical'
  // | 'FolderOpenVerticalSolid'
  // | 'FolderProhibited'
  // | 'FolderProhibitedSolid'
  // | 'FolderSwap'
  // | 'FolderSwapSolid'
  // | 'FolderSync'
  // | 'FolderSyncSolid'
  // | 'FolderZip'
  // | 'FolderZipSolid'
  // | 'Checkmark'
  // | 'CheckmarkSolid'
  // | 'CheckmarkCircle'
  | 'CheckmarkCircleSolid'
  // | 'CheckmarkStarburst'
  // | 'CheckmarkStarburstSolid'
  // | 'ArrowSyncCheckmark'
  // | 'ArrowSyncCheckmarkSolid'
  | 'Image'
  // | 'ImageSolid'
  // | 'DrawImage'
  // | 'DrawImageSolid'
  // | 'ImageCopy'
  // | 'ImageCopySolid'
  // | 'ImageEdit'
  // | 'ImageEditSolid'
  // | 'ImageMultiple'
  // | 'ImageMultipleSolid'
  // | 'ImageOff'
  // | 'ImageOffSolid'
  // | 'ImageProhibited'
  // | 'ImageProhibitedSolid'
  // | 'ImageSearch'
  // | 'ImageSearchSolid'
  | 'Video'
  // | 'VideoSolid'
  // | 'VideoAdd'
  // | 'VideoAddSolid'
  // | 'VideoOff'
  // | 'VideoOffSolid'
  // | 'VideoProhibited'
  // | 'VideoProhibitedSolid'
  // | 'VideoSync'
  // | 'VideoSyncSolid'
  // | 'File'
  // | 'FileSolid'
  | 'FileAdd'
  // | 'FileAddSolid'
  // | 'FileArrowDown'
  // | 'FileArrowDownSolid'
  // | 'FileArrowUp'
  // | 'FileArrowUpSolid'
  // | 'FileBulletList'
  // | 'FileBulletListSolid'
  // | 'FileBulletListMultiple'
  // | 'FileBulletListMultipleSolid'
  // | 'FileBulletListOff'
  // | 'FileBulletListOffSolid'
  // | 'FileCatchUp'
  // | 'FileCatchUpSolid'
  // | 'FileCheckmark'
  // | 'FileCheckmarkSolid'
  // | 'FileCopy'
  // | 'FileCopySolid'
  // | 'FileDismiss'
  // | 'FileDismissSolid'
  // | 'FileEdit'
  // | 'FileEditSolid'
  | 'FileError'
  // | 'FileErrorSolid'
  // | 'FileLink'
  // | 'FileLinkSolid'
  // | 'FileLock'
  // | 'FileLockSolid'
  | 'FileMultiple'
  // | 'FileMultipleSolid'
  // | 'FilePdf'
  // | 'FilePdfSolid'
  | 'FileProhibited'
  // | 'FileProhibitedSolid'
  // | 'FileQuestionMark'
  // | 'FileQuestionMarkSolid'
  // | 'FileSearch'
  // | 'FileSearchSolid'
  | 'FileSync'
  // | 'FileSyncSolid'
  // | 'FileText'
  // | 'FileTextSolid'
  // | 'FileJs'
  // | 'FileJsSolid'
  // | 'FileCss'
  // | 'FileCssSolid'
  | 'FileBriefcase'
  | 'FileBriefcaseSolid'
  | 'ChevronDoubleRight'
  // | 'ChevronDoubleRightSolid'
  | 'ChevronDoubleLeft'
  // | 'ChevronDoubleLeftSolid'
  | 'MoreHorizontal'
  // | 'MoreHorizontalSolid'
  // | 'MoreVertical'
  // | 'MoreVerticalSolid'
  | 'Delete'
  // | 'DeleteSolid'
  // | 'DeleteDismiss'
  // | 'DeleteDismissSolid'
  // | 'DeleteOff'
  // | 'DeleteOffSolid'
  // | 'DeleteArrowBack'
  // | 'DeleteArrowBackSolid'
  // | 'DeleteLines'
  // | 'DeleteLinesSolid'
  | 'Eye'
  // | 'EyeSolid'
  // | 'EyeOff'
  // | 'EyeOffSolid'
  // | 'EyeTracking'
  // | 'EyeTrackingSolid'
  // | 'EyeTrackingOff'
  // | 'EyeTrackingOffSolid'
  | 'Share'
  // | 'ShareSolid'
  // | 'Alert'
  // | 'AlertSolid'
  // | 'AlertOff'
  // | 'AlertOffSolid'
  // | 'AlertOn'
  // | 'AlertOnSolid'
  // | 'AlertSnooze'
  // | 'AlertSnoozeOff'
  // | 'AlertUrgent'
  // | 'AlertUrgentSolid'
  // | 'ArrowClockwise'
  | 'ArrowClockwiseSolid'
 // | 'ArrowClockwiseDashes'
 // | 'ArrowClockwiseDashesSolid'
 // | 'ArrowHookDownLeft'
 // | 'ArrowHookDownLeftSolid'
 // | 'ArrowHookDownRight'
 // | 'ArrowHookDownRightSolid'
 // | 'Bookmark'
 // | 'BookmarkSolid'
 // | 'BookmarkAdd'
 // | 'BookmarkAddSolid'
 // | 'BookmarkMultiple'
 // | 'BookmarkMultipleSolid'
 // | 'BookmarkSearch'
 // | 'BookmarkSearchSearch'
 // | 'Clipboard'
 // | 'ClipboardSolid'
 // | 'ClipboardCheckmark'
 // | 'ClipboardCheckmarkSolid'
 // | 'ClipboardError'
 // | 'ClipboardErrorSolid'
 // | 'ClipboardText'
 // | 'ClipboardTextSolid'
 // | 'Clock'
 // | 'ClockFill'
 // | 'ClockAlarm'
 // | 'ClockAlarmSolid'
 // | 'Cloud'
 // | 'CloudSolid'
 // | 'CloudCheckmark'
 // | 'CloudCheckmarkSolid'
 // | 'CloudAdd'
 // | 'CloudAddSolid'
 // | 'CloudDismiss'
 // | 'CloudDismissSolid'
 // | 'CloudEdit'
 // | 'CloudEditSolid'
 // | 'CloudOff'
 // | 'CloudOffSolid'
 // | 'CloudSync'
 // | 'CloudSyncSolid'
  | 'Copy'
 // | 'CopySolid'
  | 'Rename'
 // | 'RenameSolid'
 //     | 'Desktop'
  | 'DesktopSolid'
 // | 'Dismiss'
  | 'DismissSolid'
 // | 'DismissCircle'
  | 'DismissCircleSolid'
 // | 'DismissSquare'
 // | 'DismissSquareSolid'
 // | 'Edit'
 // | 'EditSolid'
 // | 'EditOff'
 // | 'EditOffSolid'
 // | 'ErrorCircle'
  | 'ErrorCircleSolid'
 // | 'Info'
  | 'InfoSolid'
 // | 'Link'
 // | 'LinkSolid'
  | 'MailInbox'
 // | 'MailInboxSolid'
 // | 'Navigation'
 // | 'NavigationSolid'
 // | 'Open'
 // | 'OpenSolid'
 // | 'Question'
 // | 'QuestionSolid'
 // | 'QuestionCircle'
 // | 'QuestionCircleSolid'
 // | 'Warning'
  | 'WarningSolid'
  // | 'Moon'
  | 'MoonSolid'
  // | 'Sun'
  | 'SunSolid'
 // | 'TaskList'
  | 'TaskListSolid'
  | 'Sync'
  | 'SyncSolid'
  | 'SyncOff'
  | 'SyncOffSolid'
  | 'SyncCircle'
  | 'SyncCircleSolid'
 export function installIcons(mount: ParentNode): void {
  if (mount.querySelector("#wfs-icon-symbols")) {
    return;
  }
  const symbols = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    ${Object.entries(paths).map(
    ([key, path]) => `
     <symbol id="${key}" viewBox="0 0 20 20">
      <path d="${path}" fill="currentColor" />
    </symbol>`,
  ).join('')}
  </svg>`;
  const temp = document.createElement("div");
  temp.innerHTML = symbols;
  const svgElm = temp.firstElementChild! as SVGElement;
  temp.innerHTML = "";
  svgElm.style.cssText = "display:none";
  svgElm.id = "wfs-icon-symbols";
  mount.insertBefore(svgElm, mount.firstChild);
 }
--- a/src/frontend/widgets/VImage.vue
+++ b/src/frontend/widgets/VImage.vue
@ -0,0 +1,35 @@
 <script lang="ts">
 import {defineComponent, h, Prop, reactive} from "vue";
 import {useImage, UseImageOptions} from "@vueuse/core";
 export default defineComponent({
  props: {
    src: {
      type: String,
      required: true,
    } as Prop<UseImageOptions['src']>,
    srcset: String as Prop<UseImageOptions['srcset']>,
    sizes: String as Prop<UseImageOptions['sizes']>,
    alt: String as Prop<UseImageOptions['alt']>,
    class: String as Prop<UseImageOptions['class']>,
    loading: String as Prop<UseImageOptions['loading']>,
    crossorigin: String as Prop<UseImageOptions['crossorigin']>,
    referrerPolicy: String as Prop<UseImageOptions['referrerPolicy']>
  },
  setup(props, {slots}) {
    const data = reactive(useImage(props as UseImageOptions))
    return () => {
      if (data.isLoading && slots.loading) {
        return slots.loading(data)
      } else if (data.error && slots.error) {
        return slots.error(data.error)
      } else if (slots.default) {
        return slots.default(data)
      } else {
        return h('img', props)
      }
    }
  },
 })
 </script>
--- a/src/frontend/widgets/VLoading.vue
+++ b/src/frontend/widgets/VLoading.vue
@ -0,0 +1,24 @@
 <script lang="ts" setup>
 defineProps<{ text?: string }>()
 const bars = Array(12).fill(0).map((_, i) => i)
 </script>
 <template>
  <div class="flex-center">
    <div class="
      flex items-center py-2 px-3 bg-gray-300/80 backdrop-blur-md rounded-lg pointer-events-none
      dark:bg-gray-700/80 dark:text-white ring-1 ring-white/10
    ">
      <div class="size-4 me-2 relative spinner">
        <div
          v-for="bar in bars"
          :key="bar"
          class="loading-bar bg-black dark:bg-white"
        />
      </div>
      <span class="select-none text-sm">
        {{ text ?? '正在加载...' }}
      </span>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/VProgress.vue
+++ b/src/frontend/widgets/VProgress.vue
@ -0,0 +1,24 @@
 <script lang="ts" setup>
 defineProps<{
  value?: number
  disabled?: boolean;
  label?: string;
 }>()
 </script>
 <template>
  <div>
    <div class="relative h-0.5 w-full bg-gray-300">
      <div
        v-if="value != null"
        :style="{ width: `${Math.min(Math.round(value! * 100), 100)}%` }"
        class="h-full overflow-hidden bg-indigo-500"
      >
        <div
          v-if="value != null && value < 1 && !disabled"
          class="animate-marquee h-full w-full bg-white opacity-50"
        />
      </div>
    </div>
  </div>
 </template>
--- a/src/frontend/widgets/VText.vue
+++ b/src/frontend/widgets/VText.vue
@ -0,0 +1,50 @@
 <script lang="ts" setup>
 import {ref, watch} from 'vue'
 const props = defineProps<{
  text: string | number
  tag?: string
  highlight?: boolean
 }>()
 const emit = defineEmits<{
  (ev: 'dblclick', event: Event): void
 }>()
 const el = ref<HTMLElement | null>(null)
 const select = (node: Node) => {
  const range = new Range()
  range.selectNode(node)
  const s = document.getSelection()!
  s.empty()
  s.addRange(range)
 }
 const dblclick = (evt: Event) => {
  select(evt.target as Node)
  emit('dblclick', evt)
 }
 watch(() => props.highlight, value => {
  if (value && el.value) {
    select(el.value)
  } else if (!value && el.value) {
    const range = new Range()
    range.selectNode(el.value)
    const s = document.getSelection()!
    s.removeRange(range)
  }
 })
 </script>
 <template>
  <component
    :is="tag ?? 'span'"
    ref="el"
    class="selection:bg-indigo-500 break-all selection:text-white"
    @dblclick="dblclick"
  >
    {{ text }}
  </component>
 </template>
--- a/src/frontend/widgets/utils.ts
+++ b/src/frontend/widgets/utils.ts
@ -0,0 +1,9 @@
 import {getCurrentInstance} from 'vue'
 export function getRootBarrier(): Node | undefined {
  let el = getCurrentInstance()!.vnode.el as Node
  while (el.nodeType === Node.TEXT_NODE || el.nodeType === Node.COMMENT_NODE) {
    el = el.parentNode!
  }
  return (el as Element).closest('[data-ui-barrier]') as Node
 }
--- a/src/frontend/worker.ts
+++ b/src/frontend/worker.ts
@ -0,0 +1,70 @@
 import BackendWorker from "../backend?sharedworker&inline";
 import {createReplier, emit, isRecvData, isSendData, uniqueId} from "../shared";
 type Resolver = (value: any) => void;
 type Rejecter = (value: any) => void;
 const resolvers: Map<number, [Resolver, Rejecter]> = new Map();
 const worker = new BackendWorker();
 // 接收来自后端的消息
 worker.port.onmessage = (evt) => {
  if (isSendData(evt.data)) {
    const reply = createReplier(worker.port, evt.data);
    const {scope, action, data} = evt.data;
    // console.log(scope, action, data)
    emit(`${scope}:${action}`, data, reply);
  } else if (!isRecvData(evt.data)) {
    console.warn("[wfs] unknown message event:", evt);
  } else if (resolvers.has(evt.data.id)) {
    const {id, error, data} = evt.data;
    const [resolve, reject] = resolvers.get(id)!;
    if (error != null) {
      reject(error);
    } else {
      resolve(data);
    }
  }
 };
 // 监听页面卸载，通知后端删除关联
 window.addEventListener("beforeunload", () => {
  void dispatch("app", "close");
 });
 window.addEventListener("online", () => {
  return dispatch("net", "status", "on");
 });
 window.addEventListener("offline", () => {
  return dispatch("net", "status", "off");
 });
 export function dispatch(scope: "cfg", action: "init", config: ApiConfig): Promise<void>;
 export function dispatch(scope: "app", action: "close"): Promise<void>;
 export function dispatch(scope: "net", action: "status", data: "on" | "off"): Promise<void>;
 export function dispatch(scope: "dir", action: "all"): Promise<Array<CloudDirectory>>;
 export function dispatch(scope: "dir", action: "create", data: NewDirEventData): Promise<CloudDirectory>;
 export function dispatch(scope: "dir", action: "delete", dir: number): Promise<boolean>;
 export function dispatch(scope: "dir", action: "rename", data: RenameDirEventData): Promise<CloudDirectory>;
 export function dispatch(scope: "file", action: "rename", data: RenameFileEventData): Promise<CloudFile>;
 export function dispatch(scope: "file", action: "delete", files: number[] | number): Promise<boolean>;
 export function dispatch(scope: "file", action: "list", data: FilesEventData): Promise<FilesEventResult>
 export function dispatch(scope: "task", action: "cleanup"): Promise<void>;
 export function dispatch(scope: "task", action: "cancel", data: TaskEventData): Promise<void>;
 export function dispatch(scope: "task", action: "create", data: TaskCreateData): Promise<void>;
 export function dispatch(scope: "task", action: "remove", data: TaskEventData): Promise<void>;
 export function dispatch(scope: "task", action: "resume", data: TaskEventData): Promise<void>;
 export function dispatch<T = any>(scope: string, action: string, data?: any): Promise<T> {
  const id = uniqueId();
  return new Promise<T>((resolve, reject) => {
    resolvers.set(id, [resolve, reject]);
    worker.port.postMessage({id, scope, action, data} as SendData);
  });
 }
--- a/Show More
+++ b/Show More