filer/frontend/src/views/UpyunView.vue

<template>
  <notifications />
  <div class="card w-full bg-base-100 shadow-xl mt-8 mx-8">
    <div class="card-body">
      <div class="card-title">
        <div class="join">
          <input class="input input-bordered join-item" v-model="current_prefix" />
          <button class="btn join-item btn-active rounded-r-full" @click="go_to">Go</button>
        </div>
        <button class="btn ml-2 btn-outline btn-accent" @click="go_back">返回上级</button>
        <button class="btn ml-2 btn-outline btn-success" @click="mkdir">创建目录</button>
        <button
          class="btn ml-2 join-item btn-active btn-secondary rounded-r-full"
          @click="on_file_upload"
        >
          上传文件
        </button>
      </div>
      <div class="divider"></div>
      <div class="overflow-x-auto">
        <table class="table">
          <tbody>
            <tr v-for="(file, index) in current_files.list" :key="index">
              <td>
                <div class="flex items-center space-x-3">
                  <div class="avatar">
                    <div class="mask mask-squircle w-8 h-8" v-if="file.is_dir">
                      <FolderPlusIcon class="h-8 w-8 text-blue-500" />
                    </div>
                    <div class="mask mask-squircle w-8 h-8" v-else>
                      <DocumentTextIcon class="h-8 w-8 text-orange-800" />
                    </div>
                  </div>
                  <div v-if="file.is_dir">
                    <a class="font-bold text-blue-300" @click="click_enter_to(file.filename!)">{{
                      file.filename
                    }}</a>
                  </div>
                  <div v-else>
                    <div class="font-bold">{{ file.filename }}</div>
                  </div>
                </div>
              </td>
              <td>
                {{ file.created_at }}
              </td>
              <th>
                <button
                  class="btn btn-ghost btn-outline btn-xs"
                  v-if="!file.is_dir"
                  @click="toClipboard(copy_link(file.filename!))"
                >
                  link
                </button>
                <button
                  class="btn btn-error btn-outline btn-xs ml-1"
                  @click="to_delete(file.filename!, file.is_dir!)"
                >
                  delete
                </button>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card-actions justify-end">
        <div>
          当前
          <div class="badge badge-accent">{{ current_files.list.length }}</div>
          个文件
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FolderPlusIcon, DocumentTextIcon } from '@heroicons/vue/24/solid'
import { toClipboard } from '@soerenmartius/vue3-clipboard'
import { notify } from '@kyvg/vue3-notification'
import { ref, reactive, onMounted } from 'vue'

import {
  GetConfig,
  UperList,
  UperUpload,
  UperDelete,
  UperCreateDirectory
} from '@/../wailsjs/go/controller/Storage'
import { controller } from '@/../wailsjs/go/models'

let current_config: controller.ServerConfig = new controller.ServerConfig()
current_config.upyun = new controller.UpyunConfig()
let allConfig = reactive({ config: current_config })

const current_prefix = ref('/')
let file_list_object: Array<controller.FileInfo> = []
let current_files = reactive({ list: file_list_object })

const on_file_upload = async () => {
  await UperUpload(current_prefix.value)

  notify({
    title: '文件上传成功',
    duration: 5000
  })

  await list(current_prefix.value)
}

const list = async (prefix: string) => {
  current_files.list = await UperList(prefix)
  console.log('get list: ', current_files.list)
}

const mkdir = async () => {
  if (current_prefix.value === '/') return
  await UperCreateDirectory(current_prefix.value)
  await list(current_prefix.value)

  notify({
    title: '创建目录成功',
    duration: 5000
  })
}

const go_to = async () => {
  await list(current_prefix.value)
}

const to_delete = async (filename: string, is_dir: boolean) => {
  let delete_filename = ''
  if (current_prefix.value == '/') {
    delete_filename = current_prefix.value + filename
  } else {
    delete_filename = current_prefix.value + '/' + filename
  }
  await UperDelete(delete_filename, is_dir)
  await list(current_prefix.value)

  notify({
    title: '删除成功',
    duration: 5000
  })
}

const click_enter_to = async (dir: string) => {
  if (current_prefix.value == '/') {
    current_prefix.value += dir
  } else {
    current_prefix.value += '/' + dir
  }
  await list(current_prefix.value)
}

const go_back = async () => {
  if (current_prefix.value === '/') return
  const lastIndex = current_prefix.value.lastIndexOf('/')
  current_prefix.value = current_prefix.value.substring(0, lastIndex)
  if (current_prefix.value === '') current_prefix.value = '/'
  await list(current_prefix.value)
}

const copy_link = (filename: string) => {
  let real_filename = ''
  if (current_prefix.value == '/') {
    real_filename = current_prefix.value + filename
  } else {
    real_filename = current_prefix.value + '/' + filename
  }
  notify({
    title: '已拷贝链接',
    duration: 5000
  })
  return allConfig.config.upyun.domain + real_filename
}

onMounted(async () => {
  allConfig.config = await GetConfig()
  await list(current_prefix.value)
})
</script>