commit

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+assets/upload

app.vue

@@ -1,5 +1,9 @@
 <template>
   <NuxtLayout>
-    <NuxtPage />
+    <NuxtPage />    
   </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+
+</script>

assets/css/index.css

@@ -14,7 +14,6 @@
 
 html,
 body {
-  background-color: rgb(241 245 249);
   /* font-family: "MiSans", sans-serif, "微软雅黑"; */
   font-family: sans-serif;
 }

components/Emoji.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex flex-wrap gap-0.5 text-lg bg-white rounded border p-2 shadow-lg">
+    <div v-for="(item,index) in emoji" :key="index" class="cursor-pointer" @click="emit('emojiSelected',item)">{{ item }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emoji = ['🤔', '😐', '😑', '😶', '🙄', '😣', '😏', '😥', '😮', '🤐', '😪', '😯', '😫', '😴', '😌', '🤓', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '🤗', '🙂', '😚', '😙', '😗', '😘', '😍', '😎', '😋', '😊', '😉', '😆', '😅', '😄', '😃', '🤣', '😂', '😁', '😀', '😷', '🤒', '🤕', '🤢', '🤧', '😇', '🤠', '🤡', '🤥', '😈', '👿', '👹', '👺', '💀', '☠️', '👻', '👽', '💩']
+
+
+const emit = defineEmits(['emojiSelected'])
+</script>
+
+<style scoped></style>

components/FancyBox.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { Fancybox } from '@fancyapps/ui';
+import '@fancyapps/ui/dist/fancybox/fancybox.css';
+
+const props = defineProps({
+  options: Object,
+});
+const container = ref(null);
+
+onMounted(() => {
+  console.log(container.value.children)
+  Array.from(container.value.children).map((el) => {
+    el.setAttribute('data-fancybox', 'gallery');
+  });
+  Fancybox.bind(container.value, '[data-fancybox]', {
+    ...(props.options || {}),
+  });
+});
+
+onUpdated(() => {
+  Fancybox.unbind(container.value);
+  Fancybox.close();
+
+  Fancybox.bind(container.value, '[data-fancybox]', {
+    ...(props.options || {}),
+  });
+});
+
+onUnmounted(() => {
+  Fancybox.destroy();
+});
+
+</script>
+
+<template>
+  <div ref="container">
+    <slot></slot>
+  </div>
+</template>
+
+<style></style>

components/Footer.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="p-4 flex justify-center items-center text-xs">
+    <div class="flex flex-row gap-1">
+      <NuxtLink to="https://github.com/kingwrcy/moments">
+        <img src="~/assets/img/github-mark.svg" class="w-4 h-4 inline-block mr-1" alt="github" />
+        <span>moments</span>
+      </NuxtLink>    
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+
+</style>

components/FriendsCommentInput.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="p-2 rounded text-sm">
-    <Textarea rows="3" class="border bg-white" :placeholder="placeholder"</Textarea>
+  <div class="p-2 rounded text-sm ">
+    <div class="relative">
+      <Textarea autocomplete="new-text" rows="3" v-model="content" class="border bg-white" :placeholder="placeholder" </Textarea>
+      <div class="absolute right-2 bottom-1 cursor-pointer text-xl" @click="toggleShowEmoji" ref="showEmojiRef">😊</div>
+    </div>
+    <Emoji v-if="showEmoji" class="mt-2" @emoji-selected="emojiSelected"/>
     <div class="flex flex-row items-center justify-end mt-2 gap-2 ">
-      <Input placeholder="昵称"  v-model:value="username" class="bg-white"></Input>
-      <Input placeholder="主页"  v-model:value="link" class="bg-white"> </Input>
-      <Input placeholder="邮箱"  v-model:value="email" class="bg-white"></Input>
+      <Input placeholder="昵称,必填" type="text"  v-model="info.username" class="bg-white py-0.5"></Input>
+      <Input placeholder="主页,可空" type="text" v-model="info.website" class="bg-white py-0.5"> </Input>
+      <Input placeholder="邮箱,可空" type="text" v-model="info.email" class="bg-white py-0.5"></Input>
       <Button size="sm" @click="saveComment">发表评论</Button>
     </div>
   </div>
@@ -15,34 +19,58 @@ import { toast } from 'vue-sonner';
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
+import {useAnimate, useStorage} from '@vueuse/core'
 
 const content = ref('')
-const username = ref('')
-const email = ref('')
-const link = ref('')
 const placeholder = ref('发表评论')
-
+const emit = defineEmits(['commentAdded'])
+const showEmoji = ref(false)
+const keyframes = { transform: 'rotate(360deg)' }
 const props = defineProps<{ memoId: number, reply?: string }>()
+const showEmojiRef = ref<HTMLElement>()
+const token =  useCookie('token')
+const info = useStorage('anonymous', {
+  email:'',
+  website:'',
+  username:''
+})
+
+const toggleShowEmoji = ()=>{
+  showEmoji.value = !showEmoji.value
+  useAnimate(showEmojiRef.value, keyframes, { duration: 1000, easing: 'ease-in-out' })
+}
+const emojiSelected = (emoji: string) => {
+  content.value += emoji
+  showEmoji.value = false
+}
 
 const saveComment = async () => {
 
   if (!content.value) {
     toast.warning('先填写评论')
     return
   }
+  if (!info.value.username) {
+    toast.warning('用户名必填')
+    return
+  }
   const res = await $fetch('/api/comment/save', {
     method: 'POST',
     body: JSON.stringify({
       content: content.value,
-      memoId: props.memoId,
-      username: username.value || '匿名',
-      link: link.value,
-      email: email.value,
+      memoId: props.memoId,      
+      replyTo: props.reply,
+      author:token.value != '',
+      email:info.value.email,
+      website:info.value.website,
+      username:info.value.username
     })
   })
 
   if (res.success) {
     toast.success('评论成功')
+    content.value=''
+    emit('commentAdded')
   } else {
     toast.warning('评论失败')
   }