feat: upload ui (#11)

* chore: basic upload

* chore: ui

* chore: copy

* fix: remove hard code

app/App.vue

@@ -1,21 +1,24 @@
 <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',
     primaryColorHover: '#2369f6ff',
     primaryColorPressed: '#1a49a0ff',
     primaryColorSuppl: '#283856ff',
   },
+
 }
 </script>
 
 <template>
   <NConfigProvider :theme-overrides="themeOverrides">
     <NThemeEditor>
-      <RouterView />
+      <NMessageProvider>
+        <RouterView />
+      </NMessageProvider>
     </NThemeEditor>
   </NConfigProvider>
 </template>

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>

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>

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",