朋友圈

src/api/index.ts

@@ -179,3 +179,10 @@ export function fetchGetMask<T>(id: any) {
         url: `/admin/mask/get/${id}`
     })
 }
+
+export function fetchGetMoments<T>(data: any) {
+    return post<T>({
+        url: `/moments`,
+        data: data
+    })
+}

src/components/common/AgentPannel.vue

@@ -1,5 +1,23 @@
 <template>
     <div>
-        
+        <div class="px-5">
+            <div class="bg-white mt-[12px] p-4 rounded-lg">
+                <moment-info></moment-info>
+            </div>
+        </div>
+
+        <div class="title px-5 py-4 flex items-center relative">
+            <span class="text-base font-medium">全部评论</span>
+            <span class="text-xs text-[#797A8A] ml-[2px]">(1356)</span>
+            <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
+        </div>
+
+        <div>
+            <comment-info v-for="i in 10" :key="i"></comment-info>
+        </div>
     </div>
-</template>
+</template>
+
+<script setup lang="ts">
+import { MomentInfo, CommentInfo } from '@/components/common'
+</script>

src/components/common/CommentInfo.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="px-5 py-2">
+        <n-thing>
+            <template #avatar>
+                <n-avatar class="!block" round :size="40"> 醉 </n-avatar>
+            </template>
+            <template #header-extra>
+                <div class="text-xs text-[#797A8A]">晋思宁</div>
+            </template>
+            <template #description>
+                <div class="text-sm">新角色聊天感觉还不错，很有趣，新角色聊天感觉还不错，很有趣</div>
+                <div class="flex mt-1 items-center">
+                    <span class="text-xs text-[#797A8A]">16:00</span>
+                    <span class="flex-1"></span>
+                    <img src="@/assets/icon_pingjia.png" class="w-[24px]" alt="" />
+                    <like-btn class="ml-[10px]"></like-btn>
+                </div>
+            </template>
+        </n-thing>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NThing, NAvatar } from 'naive-ui'
+import { LikeBtn } from '@/components/common'
+</script>

src/components/common/LikeBtn.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="flex items-center">
+        <img class="w-[24px]" src="@/assets/icon_dianzhan.png" alt="" />
+        <span class="text-[#797A8A] text-xs">1</span>
+    </div>
+</template>

src/components/common/MomentInfo.vue

@@ -0,0 +1,90 @@
+<template>
+    <n-thing @click="goDetail">
+        <template #avatar>
+            <n-avatar class="!block" round :size="88"> 醉 </n-avatar>
+        </template>
+        <template #header>
+            <div class="text-lg font-semibold">{{ chatRole.name }}</div>
+        </template>
+        <template #header-extra> </template>
+        <template #description>
+            <div class="text-xs text-[#797A8A]">1.5w+人聊过｜20个动态</div>
+            <n-space size="small" class="mt-2">
+                <n-tag
+                    :bordered="false"
+                    :color="{
+                        color: '#D0FEFF',
+                        textColor: '#000'
+                    }"
+                    round
+                    size="small"
+                    v-for="(item, index) in labels"
+                    :key="index"
+                >
+                    {{ item }}
+                </n-tag>
+            </n-space>
+        </template>
+        {{ info.content }}
+        <!-- <template #footer>
+            <n-image
+                width="200"
+                object-fit="scale-down"
+                class="rounded-lg"
+                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                :show-toolbar="false"
+            />
+        </template> -->
+        <template #action>
+            <div class="flex text-[#939599] text-xs">
+                <div>{{ timeStr }}</div>
+                <div class="flex1"></div>
+                <div></div>
+            </div>
+        </template>
+    </n-thing>
+</template>
+
+<script setup lang="ts">
+import { NAvatar, NThing, NSpace, NTag, NImage } from 'naive-ui'
+import { computed } from 'vue'
+import { formatDistanceToNow, isToday, format } from 'date-fns'
+import zhCN from 'date-fns/locale/zh-CN'
+
+interface Emit {
+    (ev: 'goDetail', id: number | null): void
+}
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+const emit = defineEmits<Emit>()
+
+const labels = computed(() => {
+    return props.info.chatRole?.labels || []
+})
+
+const chatRole = computed(() => {
+    return props.info.chatRole || {}
+})
+const timeStr = computed(() => {
+    if (props.info.createdAt) {
+        if (isToday(new Date(props.info.createdAt))) {
+            return formatDistanceToNow(new Date(props.info.createdAt), { addSuffix: true, locale: zhCN })
+        } else {
+            return format(new Date(props.info.createdAt), 'yyyy-MM-dd HH:mm')
+        }
+    }
+    return ''
+})
+
+function goDetail() {
+    emit('goDetail', props.info.id)
+}
+</script>

src/components/common/MomentsDetailPannel.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <div class="px-5">
+            <div class="bg-white mt-[12px] p-4 rounded-lg">
+                <moment-info></moment-info>
+            </div>
+        </div>
+
+        <div class="title px-5 py-4 flex items-center relative">
+            <span class="text-base font-medium">全部评论</span>
+            <span class="text-xs text-[#797A8A] ml-[2px]">(1356)</span>
+            <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
+        </div>
+
+        <div>
+            <comment-info v-for="i in 10" :key="i"></comment-info>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { MomentInfo, CommentInfo } from '@/components/common'
+</script>

src/components/common/MomentsPannel.vue

@@ -1,41 +1,53 @@
 <template>
-    <n-list hoverable clickable>
-        <n-list-item @click="goAgent()">
-            <n-thing title="相见恨晚" content-style="margin-top: 10px;">
-                <template #description>
-                    <n-space size="small" style="margin-top: 4px">
-                        <n-tag :bordered="false" type="info" size="small"> 暑夜 </n-tag>
-                        <n-tag :bordered="false" type="info" size="small"> 晚春 </n-tag>
-                    </n-space>
-                </template>
-                奋勇呀然后休息呀<br />
-                完成你伟大的人生
-            </n-thing>
-        </n-list-item>
-        <n-list-item>
-            <n-thing title="他在时间门外" content-style="margin-top: 10px;">
-                <template #description>
-                    <n-space size="small" style="margin-top: 4px">
-                        <n-tag :bordered="false" type="info" size="small"> 环形公路 </n-tag>
-                        <n-tag :bordered="false" type="info" size="small"> 潜水艇司机 </n-tag>
-                    </n-space>
-                </template>
-                最新的打印机<br />
-                复制着彩色傀儡<br />
-                早上好我的罐头先生<br />
-                让他带你去被工厂敲击
-            </n-thing>
-        </n-list-item>
-    </n-list>
+    <div>
+        <n-scrollbar x-scrollable>
+            <div class="flex">
+                <div class="flex flex-col items-center p-[10px]" v-for="i in 20" :key="i">
+                    <n-avatar round :size="60"> 醉 </n-avatar>
+                    <div class="text-xs leading-6 mt-1">醉汉</div>
+                </div>
+            </div>
+        </n-scrollbar>
+    </div>
+    <div class="px-5">
+        <div v-for="(item, index) in list" :key="index" class="bg-white mt-[12px] p-4 rounded-lg">
+            <moment-info @goDetail="goDetail" :info="item"></moment-info>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { NList, NListItem, NThing, NSpace, NTag } from 'naive-ui'
-import { useRouter } from 'vue-router';
-
+import { NScrollbar, NAvatar, NList, NListItem, NThing, NSpace, NTag, NIcon, NImage } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { MomentInfo } from '@/components/common'
+import { fetchGetMoments } from '@/api'
+import { ref } from 'vue'
 
+const router = useRouter()
+function goDetail(id: any) {
+    router.push({
+        path: '/momentsDetail',
+        query: {
+            id: id
+        }
+    })
+}
+getMoments()
 
-function goAgent(){
-    
+const list = ref([])
+function getMoments() {
+    fetchGetMoments({
+        page: {
+            page: 1,
+            limit: 20
+        },
+        search: {
+            order: {
+                createdAt: 'DESC'
+            }
+        }
+    }).then((res: any) => {
+        list.value = res.items
+    })
 }
 </script>

src/components/common/index.ts

@@ -10,6 +10,7 @@ import LoginForm from './LoginForm.vue'
 import MinePannel from './minePannel.vue'
 import MaskPannel from './MaskPannel.vue'
 import MomentsPannel from './MomentsPannel.vue'
+import MomentsDetailPannel from './MomentsDetailPannel.vue'
 import AgentPannel from './AgentPannel.vue'
 import VipPannel from './VipPannel.vue'
 import BalancePannel from './BalancePannel.vue'
@@ -17,6 +18,9 @@ import CommissionPannel from './CommissionPannel.vue'
 import OfficalAccount from './OfficalAccount.vue'
 import VipModal from './VipModal.vue'
 import RuleContent from './RuleContent.vue'
+import MomentInfo from './MomentInfo.vue'
+import CommentInfo from './CommentInfo.vue'
+import LikeBtn from './LikeBtn.vue'
 
 export {
     HoverButton,
@@ -37,5 +41,9 @@ export {
     RuleContent,
     OfficalAccount,
     MomentsPannel,
-    AgentPannel
+    MomentsDetailPannel,
+    AgentPannel,
+    MomentInfo,
+    CommentInfo,
+    LikeBtn
 }

src/router/index.ts

@@ -102,6 +102,11 @@ const routes: RouteRecordRaw[] = [
         name: 'moments',
         component: () => import('@/views/page/MomentsView.vue')
     },
+    {
+        path: '/momentsDetail',
+        name: 'momentsDetail',
+        component: () => import('@/views/page/MomentsDetailView.vue')
+    },
     {
         path: '/agent',
         name: 'agent',

src/views/page/AgentView.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="page h-full flex flex-col">
-        <n-page-header title="智能体" @back="handleBack">
+    <div class="page flex min-h-full flex-col bg-contain bg-no-repeat bg-[#F5F6F8]" :style="{ backgroundImage: `url(${bgImg})` }">
+        <n-page-header
+            class="header"
+            :class="[scrollY ? 'bg-white dark:bg-black' : '']"
+            title="智能体"
+            @back="handleBack"
+        >
             <template #extra>
                 <div class="w-[22px]"></div>
             </template>
@@ -13,11 +18,19 @@
 import { NPageHeader } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { AgentPannel } from '@/components/common'
+import bgImg from '@/assets/png-beij.png'
+import { useWindowScroll } from '@vueuse/core'
+import { computed } from 'vue'
 
 const router = useRouter()
 function handleBack() {
     router.back()
 }
+const { y } = useWindowScroll()
+
+const scrollY = computed(() => {
+    return y.value
+})
 </script>
 
 <style lang="less" scoped>
@@ -36,4 +49,10 @@ function handleBack() {
         }
     }
 }
+
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+}
 </style>

src/views/page/MomentsDetailView.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="page flex min-h-full flex-col bg-contain bg-no-repeat bg-[#F5F6F8]" :style="{ backgroundImage: `url(${bgImg})` }">
+        <n-page-header
+            class="header"
+            :class="[scrollY ? 'bg-white dark:bg-black' : '']"
+            title="智能体"
+            @back="handleBack"
+        >
+            <template #extra>
+                <div class="w-[22px]"></div>
+            </template>
+        </n-page-header>
+        <moments-detail-pannel></moments-detail-pannel>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NPageHeader } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { MomentsDetailPannel } from '@/components/common'
+import bgImg from '@/assets/png-beij.png'
+import { useWindowScroll } from '@vueuse/core'
+import { computed } from 'vue'
+
+const router = useRouter()
+function handleBack() {
+    router.back()
+}
+const { y } = useWindowScroll()
+
+const scrollY = computed(() => {
+    return y.value
+})
+</script>
+
+<style lang="less" scoped>
+.page {
+    color: var(--n-text-color);
+}
+
+:deep(.n-page-header) {
+    height: 50px;
+    padding: 0 22px;
+    .n-page-header__main {
+        flex-grow: 1;
+        .n-page-header__title {
+            flex-grow: 1;
+            text-align: center;
+        }
+    }
+}
+
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+}
+</style>

src/views/page/MomentsView.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="page h-full flex flex-col">
-        <n-page-header title="朋友圈" @back="handleBack">
+    <div class="page flex flex-col bg-contain bg-no-repeat bg-[#F5F6F8]" :style="{ backgroundImage: `url(${bgImg})` }">
+        <n-page-header
+            class="header"
+            :class="[scrollY ? 'bg-white dark:bg-black' : '']"
+            title="角色动态"
+            @back="handleBack"
+        >
             <template #extra>
                 <div class="w-[22px]"></div>
             </template>
@@ -13,12 +18,20 @@
 import { NPageHeader } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { MomentsPannel } from '@/components/common'
-
+import bgImg from '@/assets/png-beij.png'
+import { useWindowScroll } from '@vueuse/core'
+import { computed } from 'vue'
 
 const router = useRouter()
 function handleBack() {
     router.back()
 }
+
+const { y } = useWindowScroll()
+
+const scrollY = computed(() => {
+    return y.value
+})
 </script>
 
 <style lang="less" scoped>
@@ -37,4 +50,9 @@ function handleBack() {
         }
     }
 }
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+}
 </style>