自定义位置

README.md

@@ -1,5 +1,7 @@
 # 极简朋友圈
 
+[在线DEMO](https://m.mblog.club),欢迎体验.
+
 - 支持匿名评论/点赞
 - 支持引入网易云音乐,b站视频
 - 支持自定义头图,个人头像,网站标题等
@@ -41,4 +43,12 @@ npm run build
 npm run preview
 ```
 
-[在线DEMO](https://m.mblog.club),欢迎体验.
+## 编辑SQLITE数据库
+
+```
+# 容器内部执行
+npx prisma studio
+```
+
+执行上面的命令会在容器内部暴露一个5555端口,暴露到主机后可以通过 `http://容器IP:5555` 访问数据库,直接修改/删除/新增数据.
+

components/FriendsMemo.vue

@@ -26,6 +26,7 @@
       </div>
       <div class="text-[#576b95] cursor-pointer" v-if="hh > 96 && !showAll" @click="showMore">全文</div>
       <div class="text-[#576b95] cursor-pointer " v-if="showAll" @click="showLess">收起</div>
+      <div class="text-[#576b95] font-medium text-xs mt-2 mb-1">{{props.memo.location?.split(/\s+/g).join(' · ')}}</div>
       <div class="relative flex flex-row justify-between select-none my-1">
         <div class="flex-1 text-gray text-xs text-[#9DA4B0] ">{{
           dayjs(props.memo.createdAt).locale('zh-cn').fromNow().replaceAll(/\s+/g,
@@ -77,7 +78,7 @@
       </div>
       <div class="rounded bottom-shadow bg-[#f7f7f7] dark:bg-slate-400 flex flex-col gap-1  ">
         <div class="flex flex-row py-2 px-4 gap-2 items-center text-sm" v-if="props.memo.favCount > 0">
-          <Heart :size=14 />
+          <Heart :size=14 color="#C64A4A"/>
           <div class="text-[#576b95]"><span class="mx-1">{{ props.memo.favCount }}</span>位访客赞过</div>
         </div>
         <template v-if="props.memo.comments.length > 0">
@@ -210,8 +211,6 @@ const toggleUserComment = (index: number) => {
   showCommentInput.value = false
 }
 
-const pin2Top = ()=>{}
-
 onClickOutside(toolbarRef, () => showToolbar.value = false)
 
 const showMore = () => {

components/HeaderImg.vue

@@ -41,7 +41,7 @@ const route = useRoute()
 const showBack = () => {
   return route.path.startsWith('/detail') || route.path.startsWith('/settings')
 }
-const { data: res, refresh } = await useFetch('/api/user/settings/get')
+const { data: res, refresh } = await useAsyncData('userinfo', async () => await $fetch('/api/user/settings/get'))
 
 settingsUpdateEvent.on(async () => {
   await refresh()

components/MemoInput.vue

@@ -100,9 +100,6 @@
 
     </div>
     <div class="relative">
-
-
-
       <Textarea @paste="pasteImg" autocomplete="new-text" v-model="content" rows="4" placeholder="今天发点什么呢?"
         class=" dark:bg-slate-500"></Textarea>
       <div class="absolute right-2 bottom-1 cursor-pointer text-xl" @click="toggleShowEmoji" ref="showEmojiRef">😊</div>
@@ -123,9 +120,20 @@
           @click="imgs.splice(index, 1)" />
       </div>
     </div>
-    <div class="flex flex-row justify-end mt-2 items-center gap-2">
-
-
+    <div class="flex flex-row justify-between mt-2 items-center gap-2 ">
+      <div class="text-sm flex flex-row gap-1 flex-1 items-center">
+        <Popover>
+          <PopoverTrigger>
+            <div class="text-[#576b95] text-sm cursor-pointer">{{ fmtLocation }}</div>
+          </PopoverTrigger>
+          <PopoverContent class="w-80">
+            <div class="flex flex-row gap-2 text-sm">
+              <Input v-model="location" placeholder="空格分割,火星都行!" />
+              <Button variant="outline" @click="location = ''">清空</Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
       <Button @click="submitMemo">提交</Button>
     </div>
   </div>
@@ -160,6 +168,13 @@ const toggleShowEmoji = () => {
   showEmoji.value = !showEmoji.value
   useAnimate(showEmojiRef.value, keyframes, { duration: 1000, easing: 'ease-in-out' })
 }
+const location = ref('')
+const fmtLocation = computed(() => {
+  if (location.value) {
+    return location.value.split(' ').join(' · ')
+  }
+  return '自定义位置?'
+})
 const content = ref('')
 const id = ref(-1)
 const music163Url = ref('')
@@ -170,7 +185,7 @@ const bilibiliUrl = ref('')
 const bilibiliIfrUrl = ref('')
 const bilibiliOpen = ref(false)
 
-// const music163Ifr = ref<HTMLIFrameElement>()
+
 const imgs = ref<string[]>([])
 const submitMemo = async () => {
   const res = await $fetch('/api/memo/save', {
@@ -180,7 +195,8 @@ const submitMemo = async () => {
       content: content.value,
       imgUrls: imgs.value,
       music163Url: music163IfrUrl.value,
-      bilibiliUrl: bilibiliIfrUrl.value
+      bilibiliUrl: bilibiliIfrUrl.value,
+      location: location.value
     })
   })
   if (res.success) {
@@ -192,6 +208,7 @@ const submitMemo = async () => {
     music163Url.value = ''
     bilibiliIfrUrl.value = ''
     bilibiliUrl.value = ''
+    location.value = ''
     emit('memoAdded')
   } else {
     toast.warning('提交失败')
@@ -272,6 +289,7 @@ memoUpdateEvent.on((event: Memo) => {
   if (event.imgs) {
     imgs.value = event.imgs?.split(',')
   }
+  location.value = event.location || ''
 })
 </script>
 

layouts/default.vue

@@ -14,15 +14,18 @@
 import { Toaster } from '@/components/ui/sonner';
 import type { User } from '~/lib/types';
 
-const { data: res } = await useFetch('/api/user/settings/get')
-useState<User>('userinfo', () => (res.value?.data as any as User))
+const userinfo = useState<User>('userinfo')
+await callOnce(async () => {
+  const { data: res } = await useAsyncData('userinfo', async () => await $fetch('/api/user/settings/get'))
+  userinfo.value = res.value?.data as any as User
+})
 
 useHead({
   link: [
     {
       rel: 'shortcut icon',
       type: 'image/png',
-      href: res.value?.data?.favicon || '/favicon.png',
+      href: userinfo.value?.favicon || '/favicon.png',
     },
   ],
 })

lib/types.ts

@@ -10,6 +10,7 @@ export type Memo = {
   user: User;
   music163Url?: string;
   bilibiliUrl?: string;
+  location?: string;
   comments: Array<Comment>;
   _count: {
     comments: number;

pages/detail/[id].vue

@@ -20,6 +20,7 @@ const id = route.params.id
 
 const memo = ref<Memo>()
 const {data} = await useFetch('/api/memo/detail', {
+  key:`memoDetail-${id}`,
   method: 'POST',
   body: JSON.stringify({ id: parseInt(id as string) })
 })

pages/index.vue

@@ -26,6 +26,7 @@ useHead({
 
 
 const { data, refresh } = await useFetch('/api/memo/list', {
+  key:'memoList',
   method: 'POST',
   body: JSON.stringify({
     page: 1,

pages/settings.vue

@@ -119,7 +119,7 @@ const state = reactive({
   favicon: "",
 })
 
-const { data: res } = await useFetch<{ data: typeof state }>('/api/user/settings/full')
+const { data: res } = await useFetch<{ data: typeof state }>('/api/user/settings/full',{key:'settings'})
 
 state.title = res.value?.data?.title || '极简朋友圈'
 state.favicon = res.value?.data?.favicon || '/avatar.webp'

prisma/migrations/20240411072905_/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Memo" ADD COLUMN "location" TEXT;

prisma/schema.prisma

@@ -34,6 +34,7 @@ model Memo {
   user         User?     @relation(fields: [userId], references: [id], onDelete: Cascade)
   music163Url  String?
   bilibiliUrl  String?
+  location     String?
 }
 
 model User {

server/api/memo/save.post.ts

@@ -6,6 +6,7 @@ type SaveMemoReq = {
   imgUrls?: string[];
   music163Url?: string;
   bilibiliUrl?: string;
+  location?: string;
 };
 
 export default defineEventHandler(async (event) => {
@@ -20,12 +21,14 @@ export default defineEventHandler(async (event) => {
       userId: event.context.userId,
       music163Url: body.music163Url,
       bilibiliUrl: body.bilibiliUrl,
+      location: body.location,
     },
     update: {
       imgs: body.imgUrls?.join(","),
       content: body.content,
       music163Url: body.music163Url,
-      bilibiliUrl: body.bilibiliUrl,      
+      bilibiliUrl: body.bilibiliUrl,
+      location: body.location,
     },
   });
   return {