feat:搭建基本框架

2025-06-23 19:39:45 +08:00
parent de5537ee1b
commit e09aed87d1
38 changed files with 2106 additions and 83 deletions
--- a/src/components/Moment/MomentCard.vue
+++ b/src/components/Moment/MomentCard.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="moment-card card-item">
+    <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+
+    <div class="moment-content">
+      <span class="username">Cxx0822</span>
+      <p>今天烧了个红烧鱼 非常不错！</p>
+
+      <el-image style="width: 200px; height: 200px"
+                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
+
+      <p>1小时前</p>
+
+      <div class="button-container">
+        <el-button circle size="small">
+          <i class="fa-regular fa-thumbs-up"></i>
+        </el-button>
+        <el-button circle size="small"
+                   @click="momentInfo.isShowComment = !momentInfo.isShowComment">
+          <i class="fa-regular fa-comment"></i>
+        </el-button>
+      </div>
+
+      <div v-if="momentInfo.isShowComment" class="moment-comment">
+        <el-input
+            v-model="momentInfo.comment"
+            maxlength="100" placeholder="平等表达 友善交流"
+            show-word-limit type="textarea" :rows="3"
+            @blur="momentInfo.isShowComment = false"
+        />
+
+        <el-popover ref="emojiPopoverRef" placement="bottom" :width="300" trigger="click">
+          <template #default>
+            <div class="emoji-panel">
+              <EmojiPicker :native="true" @select="onSelectEmoji" />
+            </div>
+          </template>
+          <template #reference>
+            <el-button circle>
+              <i class="fa-regular fa-face-smile"></i>
+            </el-button>
+          </template>
+        </el-popover>
+
+        <el-button type="primary"
+                   :disabled="momentInfo.comment.length === 0"
+                   @click="sendCommentClick"
+                   class="send-button">发送</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EmojiPicker from 'vue3-emoji-picker'
+import 'vue3-emoji-picker/css'
+import { Edit } from '@element-plus/icons-vue'
+import { reactive } from 'vue'
+
+const momentInfo = reactive({
+  isShowComment: false,
+  comment: ''
+})
+
+const onSelectEmoji = (emoji) => {
+
+}
+
+const sendCommentClick = async () => {
+  momentInfo.comment = ''
+  momentInfo.isShowComment = false
+}
+</script>
+
+<style lang="scss">
+.moment-card {
+  padding: 10px;
+
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  gap: 10px;
+
+  .moment-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    p {
+      margin: 0;
+    }
+
+    .username {
+      font-weight: bold;
+      font-size: larger;
+    }
+
+    .moment-comment {
+      display: grid;
+      grid-template-columns: 1fr 40px 60px;
+      justify-items: center;
+      gap: 5px;
+    }
+  }
+}
+</style>