From 88b018b02485adc1d705e6d91cbd3dd9bf3ec52b Mon Sep 17 00:00:00 2001
From: winwin2011 <yjh2011@live.com>
Date: Sat, 11 Jun 2022 12:28:23 +0800
Subject: [PATCH] feat: upload ui (#11)

* chore: basic upload

* chore: ui

* chore: copy

* fix: remove hard code
---
 app/App.vue                     |  7 ++--
 app/components/ImageInfo.vue    | 42 +++++++++++++++++++++++
 app/components/ui/TextField.vue |  7 ----
 app/pages/index.vue             | 61 ++++++++++++++++++++++++++-------
 package.json                    |  1 +
 pnpm-lock.yaml                  |  6 ++++
 6 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 app/components/ImageInfo.vue
 delete mode 100644 app/components/ui/TextField.vue

diff --git a/app/App.vue b/app/App.vue
index 8db6aae..5f67608 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import type { GlobalThemeOverrides } from 'naive-ui'
-import { NConfigProvider, NThemeEditor } from 'naive-ui'
+import { NConfigProvider, NMessageProvider, NThemeEditor } from 'naive-ui'
 const themeOverrides: GlobalThemeOverrides = {
   common: {
     primaryColor: '#1b55c4ff',
@@ -9,13 +9,16 @@ const themeOverrides: GlobalThemeOverrides = {
     primaryColorPressed: '#1a49a0ff',
     primaryColorSuppl: '#283856ff',
   },
+
 }
 </script>
 
 <template>
   <NConfigProvider :theme-overrides="themeOverrides">
     <NThemeEditor>
-      <RouterView />
+      <NMessageProvider>
+        <RouterView />
+      </NMessageProvider>
     </NThemeEditor>
   </NConfigProvider>
 </template>
diff --git a/app/components/ImageInfo.vue b/app/components/ImageInfo.vue
new file mode 100644
index 0000000..1353836
--- /dev/null
+++ b/app/components/ImageInfo.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { NButton, NIcon, NImage, NText, useMessage } from 'naive-ui'
+import { LinkOutline, LogoMarkdown } from '@vicons/ionicons5'
+import { useClipboard } from '@vueuse/core'
+const props = defineProps<{
+  name: string
+  url: string
+}>()
+const { copy } = useClipboard()
+const message = useMessage()
+const onCopyUrl = () => {
+  copy(props.url)
+  message.success('URL copied!')
+}
+const onCopyMarkdown = () => {
+  copy(`![](${props.url})`)
+  message.success('markdown copied!')
+}
+</script>
+
+<template>
+  <div flex items-center gap-2 mt2>
+    <NImage :src="url" width="50" height="50" object-fit="cover" />
+    <NText flex-1>
+      {{ name }}
+    </NText>
+    <NButton @click="onCopyUrl">
+      <template #icon>
+        <NIcon>
+          <LinkOutline />
+        </NIcon>
+      </template>
+    </NButton>
+    <NButton @click="onCopyMarkdown">
+      <template #icon>
+        <NIcon>
+          <LogoMarkdown />
+        </NIcon>
+      </template>
+    </NButton>
+  </div>
+</template>
diff --git a/app/components/ui/TextField.vue b/app/components/ui/TextField.vue
deleted file mode 100644
index 81a45e3..0000000
--- a/app/components/ui/TextField.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>
-    TextField
-  </div>
-</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4b9b7d6..4e65bde 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,29 +1,64 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { NButton, NCard, NIcon, NText, NUpload, NUploadDragger, useThemeVars } from 'naive-ui'
+import { ImageOutline as UploadIcon } from '@vicons/ionicons5'
+import type { FileInfo } from 'naive-ui/es/upload/src/interface'
 import { signOut } from '~/api/auth'
 import { useOss } from '~/composables/oss'
+import ImageInfo from '~/components/ImageInfo.vue'
 const oss = useOss()
-const file = ref<HTMLInputElement>()
 const imgs = ref<{ name: string; url: string }[]>([])
+const vars = useThemeVars()
+const fileInfo = ref<FileInfo>()
+const onUploadChange = (options: { file: FileInfo }) => (fileInfo.value = options.file)
+const uploadEl = ref()
 const upload = () => {
-  const fileEl = file.value!
-  if (!fileEl.files)
+  const file = fileInfo.value?.file
+  if (!file)
     return
-  oss.upload(fileEl.files[0]).then(({ name, url }) => {
+  oss.upload(file).then(({ name, url }) => {
     imgs.value.push({ name, url })
+    uploadEl.value?.clear()
+    fileInfo.value = undefined
   })
 }
 </script>
 
 <template>
-  <div>
-    <button @click="signOut">
-      signout
-    </button>
-    <input ref="file" type="file">
-    <button @click="upload">
-      uplaod
-    </button>
-    <img v-for="item in imgs" :key="item.name" :src="item.url" :alt="item.name">
+  <div h-100vh w-100vw flex="~ col" :style="{ backgroundColor: vars.primaryColor }">
+    <nav flex="~" py2 px4>
+      <div flex-1 />
+      <NText secondary text text-white:50 hover:text-white cursor-pointer @click="signOut">
+        SignOff
+      </NText>
+    </nav>
+    <div flex-1 flex items-center pb-10>
+      <div max-h-80vh overflow-auto w150 mx-auto>
+        <NCard>
+          <NUpload ref="uploadEl" :max="1" :on-change="onUploadChange" list-type="image">
+            <NUploadDragger>
+              <div style="margin-bottom: 12px">
+                <NIcon size="48" :depth="3">
+                  <UploadIcon />
+                </NIcon>
+              </div>
+              <NText style="font-size: 16px">
+                Click our drag inside to upload.
+              </NText>
+            </NUploadDragger>
+          </NUpload>
+          <NButton block :disabled="!fileInfo" @click="upload">
+            upload
+          </NButton>
+          <ImageInfo v-for="item in imgs" :key="item.url" :name="item.name" :url="item.url" />
+        </NCard>
+      </div>
+    </div>
   </div>
 </template>
+
+<style>
+.n-upload-trigger{
+  display: block;
+}
+</style>
diff --git a/package.json b/package.json
index 00d729e..80e6d79 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@types/node": "^17.0.36",
     "@types/rollup-plugin-auto-external": "^2.0.2",
     "@unocss/reset": "^0.34.1",
+    "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "concurrently": "^7.2.0",
     "dotenv": "^16.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a4f1df..f6a3ef7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,7 @@ specifiers:
   '@types/node': ^17.0.36
   '@types/rollup-plugin-auto-external': ^2.0.2
   '@unocss/reset': ^0.34.1
+  '@vicons/ionicons5': ^0.12.0
   '@vitejs/plugin-vue': ^2.3.3
   '@vueuse/core': ^8.5.0
   '@vueuse/integrations': ^8.5.0
@@ -76,6 +77,7 @@ devDependencies:
   '@types/node': registry.npmmirror.com/@types/node/17.0.36
   '@types/rollup-plugin-auto-external': registry.npmmirror.com/@types/rollup-plugin-auto-external/2.0.2
   '@unocss/reset': registry.npmmirror.com/@unocss/reset/0.34.1
+  '@vicons/ionicons5': 0.12.0
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.3.3_vite@2.9.9+vue@3.2.36
   concurrently: registry.npmmirror.com/concurrently/7.2.0
   dotenv: registry.npmmirror.com/dotenv/16.0.1
@@ -128,6 +130,10 @@ packages:
     resolution: {integrity: sha512-LISYGoacASedVKV2XN4dYC46QpbrvUYq2X8NjAnAsxZEqdK5RPxr82WG5MW8j/7RSJv3k4flpXXf1kSSt1G4fQ==}
     dev: true
 
+  /@vicons/ionicons5/0.12.0:
+    resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
+    dev: true
+
   /acorn-walk/8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}