fix: pk comment
This commit is contained in:
zzc
993
components/CommentSection/CommentSection.vue
Normal file
993
components/CommentSection/CommentSection.vue
Normal file
@@ -0,0 +1,993 @@
|
||||
<template>
|
||||
<view class="comment-section" :class="[`comment-section--${variant}`]">
|
||||
<view class="comment-header">
|
||||
<view v-if="showTabs" class="comment-tabs">
|
||||
<text
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="comment-tab"
|
||||
:class="{ active: currentTab === tab.value }"
|
||||
@tap="switchTab(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-else class="comment-title-wrap">
|
||||
<text class="comment-title">{{ sectionTitle }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="pillValue" class="header-pill" :class="pillTone ? `header-pill--${pillTone}` : ''">
|
||||
<text v-if="pillLabel" class="header-pill-label">{{ pillLabel }}</text>
|
||||
<text class="header-pill-value">{{ pillValue }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="allowCompose" class="compose-card">
|
||||
<view class="compose-tip">
|
||||
<text class="compose-title">{{ composeTitle }}</text>
|
||||
<text v-if="composeDesc" class="compose-desc">{{ composeDesc }}</text>
|
||||
</view>
|
||||
<view class="compose-box">
|
||||
<input
|
||||
class="compose-input"
|
||||
v-model="commentText"
|
||||
:disabled="sending"
|
||||
:placeholder="composePlaceholder"
|
||||
placeholder-class="compose-placeholder"
|
||||
confirm-type="send"
|
||||
@confirm="submitMainComment"
|
||||
/>
|
||||
<button
|
||||
class="compose-send"
|
||||
:class="{ disabled: sending || !commentText.trim() }"
|
||||
:disabled="sending || !commentText.trim()"
|
||||
@tap="submitMainComment"
|
||||
>
|
||||
{{ sending ? composeSendingText : composeButtonText }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="comment-list">
|
||||
<view v-if="loading && !comments.length" class="comment-state">
|
||||
<text class="comment-state-title">{{ loadingTitle }}</text>
|
||||
<text class="comment-state-desc">{{ loadingDesc }}</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError && !comments.length" class="comment-state">
|
||||
<text class="comment-state-title">{{ errorTitle }}</text>
|
||||
<text class="comment-state-desc">{{ loadError }}</text>
|
||||
<button class="comment-state-btn" @tap="refreshComments">重新加载</button>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!comments.length" class="comment-state comment-state--empty">
|
||||
<view v-if="showEmptyVisual" class="comment-empty-visual">
|
||||
<view class="comment-empty-orbit orbit-1"></view>
|
||||
<view class="comment-empty-orbit orbit-2"></view>
|
||||
<view class="comment-empty-core">
|
||||
<text class="comment-empty-emoji">{{ emptyEmoji }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="comment-state-title">{{ emptyTitle }}</text>
|
||||
<text class="comment-state-desc">{{ emptyDesc }}</text>
|
||||
<text v-if="emptyTip" class="comment-state-tip">{{ emptyTip }}</text>
|
||||
</view>
|
||||
|
||||
<CommentItem
|
||||
v-for="comment in comments"
|
||||
:key="comment.id"
|
||||
:comment="comment"
|
||||
:like-handler="likeHandler"
|
||||
:page-name="pageName"
|
||||
@need-login="emitNeedLogin"
|
||||
@like-change="handleCommentLikeChange"
|
||||
@reply="openReplyPopup"
|
||||
@toggle-replies="handleToggleReplies"
|
||||
@more-replies="handleLoadMoreReplies"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-if="comments.length" class="comment-footer">
|
||||
<text v-if="loading" class="comment-footer-text">{{ footerLoadingText }}</text>
|
||||
<text
|
||||
v-else-if="hasMore && loadMoreMode === 'click'"
|
||||
class="comment-footer-link"
|
||||
@tap="loadComments()"
|
||||
>
|
||||
{{ footerMoreText }}
|
||||
</text>
|
||||
<text v-else-if="loadMoreMode === 'scroll'" class="comment-footer-text">{{ footerHintText }}</text>
|
||||
<text v-else class="comment-footer-text">{{ footerDoneText }}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="replyPopupVisible"
|
||||
class="reply-popup-mask"
|
||||
@tap="closeReplyPopup"
|
||||
></view>
|
||||
<view
|
||||
v-if="replyPopupVisible"
|
||||
class="reply-popup"
|
||||
:style="{ bottom: `${replyKeyboardHeight}px` }"
|
||||
>
|
||||
<view class="reply-popup-header">
|
||||
<view class="reply-popup-user">
|
||||
<text class="reply-popup-label">回复</text>
|
||||
<text class="reply-popup-name">@{{ replyTarget?.replyToName || "Ta" }}</text>
|
||||
</view>
|
||||
<text class="reply-popup-close" @tap="closeReplyPopup">取消</text>
|
||||
</view>
|
||||
<view class="reply-popup-input-wrap">
|
||||
<input
|
||||
class="reply-popup-input"
|
||||
v-model="replyContent"
|
||||
:focus="replyInputFocus"
|
||||
:disabled="sendingReply"
|
||||
:adjust-position="false"
|
||||
confirm-type="send"
|
||||
:placeholder="replyPlaceholder"
|
||||
placeholder-class="reply-popup-placeholder"
|
||||
@confirm="submitReplyComment"
|
||||
/>
|
||||
<button
|
||||
class="reply-popup-send"
|
||||
:class="{ disabled: sendingReply || !replyContent.trim() }"
|
||||
:disabled="sendingReply || !replyContent.trim()"
|
||||
@tap="submitReplyComment"
|
||||
>
|
||||
{{ sendingReply ? replySendingText : replyButtonText }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, ref, watch } from "vue";
|
||||
import { onUnmounted } from "vue";
|
||||
import CommentItem from "@/components/CommentItem/CommentItem.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const defaultTabs = [
|
||||
{ label: "最热", value: "hot" },
|
||||
{ label: "最新", value: "new" },
|
||||
];
|
||||
|
||||
const props = defineProps({
|
||||
requestKey: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: "topic",
|
||||
},
|
||||
sectionTitle: {
|
||||
type: String,
|
||||
default: "评论区",
|
||||
},
|
||||
showTabs: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
tabs: {
|
||||
type: Array,
|
||||
default: () => defaultTabs,
|
||||
},
|
||||
allowCompose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
composeTitle: {
|
||||
type: String,
|
||||
default: "说说你的看法",
|
||||
},
|
||||
composeDesc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
composePlaceholder: {
|
||||
type: String,
|
||||
default: "写下你的观点...",
|
||||
},
|
||||
composeButtonText: {
|
||||
type: String,
|
||||
default: "发布",
|
||||
},
|
||||
composeSendingText: {
|
||||
type: String,
|
||||
default: "发送中",
|
||||
},
|
||||
replyButtonText: {
|
||||
type: String,
|
||||
default: "发送",
|
||||
},
|
||||
replySendingText: {
|
||||
type: String,
|
||||
default: "发送中",
|
||||
},
|
||||
pageName: {
|
||||
type: String,
|
||||
default: "rating_detail",
|
||||
},
|
||||
pillLabel: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
pillValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
pillTone: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
loadingTitle: {
|
||||
type: String,
|
||||
default: "评论加载中...",
|
||||
},
|
||||
loadingDesc: {
|
||||
type: String,
|
||||
default: "正在拉取大家的观点",
|
||||
},
|
||||
errorTitle: {
|
||||
type: String,
|
||||
default: "评论加载失败",
|
||||
},
|
||||
errorFallbackText: {
|
||||
type: String,
|
||||
default: "网络开了点小差，稍后重试",
|
||||
},
|
||||
emptyTitle: {
|
||||
type: String,
|
||||
default: "还没有评论",
|
||||
},
|
||||
emptyDesc: {
|
||||
type: String,
|
||||
default: "来发第一条评论，带动一下讨论气氛",
|
||||
},
|
||||
emptyTip: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
emptyEmoji: {
|
||||
type: String,
|
||||
default: "💬",
|
||||
},
|
||||
showEmptyVisual: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
footerLoadingText: {
|
||||
type: String,
|
||||
default: "加载中...",
|
||||
},
|
||||
footerMoreText: {
|
||||
type: String,
|
||||
default: "查看更多评论",
|
||||
},
|
||||
footerDoneText: {
|
||||
type: String,
|
||||
default: "没有更多评论了",
|
||||
},
|
||||
footerHintText: {
|
||||
type: String,
|
||||
default: "上拉加载更多",
|
||||
},
|
||||
loadMoreMode: {
|
||||
type: String,
|
||||
default: "click",
|
||||
},
|
||||
showSuccessToast: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mainSuccessText: {
|
||||
type: String,
|
||||
default: "评论已发布",
|
||||
},
|
||||
replySuccessText: {
|
||||
type: String,
|
||||
default: "回复已发送",
|
||||
},
|
||||
listHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
repliesHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
publishHandler: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
normalizeComment: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
likeHandler: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["need-login", "published"]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const comments = ref([]);
|
||||
const currentTab = ref(defaultTabs[0].value);
|
||||
const currentPage = ref(1);
|
||||
const hasMore = ref(true);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
const sendingReply = ref(false);
|
||||
const loadError = ref("");
|
||||
const commentText = ref("");
|
||||
const replyTarget = ref(null);
|
||||
const replyPopupVisible = ref(false);
|
||||
const replyInputFocus = ref(false);
|
||||
const replyContent = ref("");
|
||||
const replyKeyboardHeight = ref(0);
|
||||
|
||||
let keyboardHeightListener = null;
|
||||
|
||||
const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
|
||||
const replyPlaceholder = computed(() => {
|
||||
return replyTarget.value?.replyToName ? `回复 @${replyTarget.value.replyToName}...` : "写下你的回复";
|
||||
});
|
||||
|
||||
const parseListResponse = (res) => {
|
||||
const source = res?.data || res || {};
|
||||
const rawList =
|
||||
source.list ||
|
||||
source.records ||
|
||||
res?.list ||
|
||||
res?.records ||
|
||||
(Array.isArray(source) ? source : []);
|
||||
return Array.isArray(rawList) ? rawList : [];
|
||||
};
|
||||
|
||||
const resolveHasMore = (res, list, page) => {
|
||||
const data = res?.data || res || {};
|
||||
const hasNext = data?.hasNext ?? res?.hasNext;
|
||||
if (typeof hasNext === "boolean") return hasNext;
|
||||
|
||||
const total = Number(data?.totalCount ?? data?.total ?? res?.totalCount ?? res?.total ?? 0);
|
||||
if (total > 0) {
|
||||
const safeSize = Math.max(list.length, 1);
|
||||
return page * safeSize < total;
|
||||
}
|
||||
|
||||
const pages = Number(data?.pages || res?.pages || 0);
|
||||
if (pages > 0) return page < pages;
|
||||
|
||||
return list.length > 0;
|
||||
};
|
||||
|
||||
const emitNeedLogin = () => {
|
||||
emit("need-login");
|
||||
};
|
||||
|
||||
const ensureLogin = () => {
|
||||
if (isLoggedIn.value) return true;
|
||||
emitNeedLogin();
|
||||
return false;
|
||||
};
|
||||
|
||||
const resetState = () => {
|
||||
comments.value = [];
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
loading.value = false;
|
||||
sending.value = false;
|
||||
sendingReply.value = false;
|
||||
loadError.value = "";
|
||||
commentText.value = "";
|
||||
closeReplyPopup();
|
||||
};
|
||||
|
||||
const patchCommentItem = (commentId, updater) => {
|
||||
comments.value = comments.value.map((comment) => {
|
||||
if (comment.id !== commentId) return comment;
|
||||
return updater(comment);
|
||||
});
|
||||
};
|
||||
|
||||
const loadComments = async ({ reset = false } = {}) => {
|
||||
if (!props.visible || !props.requestKey || loading.value) return;
|
||||
if (!reset && !hasMore.value) return;
|
||||
|
||||
const page = reset ? 1 : currentPage.value;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
loadError.value = "";
|
||||
const res = await props.listHandler({
|
||||
page,
|
||||
orderBy: currentTab.value,
|
||||
});
|
||||
const list = parseListResponse(res);
|
||||
const normalized = list.map((item) => props.normalizeComment(item));
|
||||
|
||||
comments.value = reset ? normalized : [...comments.value, ...normalized];
|
||||
hasMore.value = resolveHasMore(res, list, page);
|
||||
currentPage.value = page + 1;
|
||||
} catch (error) {
|
||||
loadError.value = props.errorFallbackText;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshComments = async () => {
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
await loadComments({ reset: true });
|
||||
};
|
||||
|
||||
const loadMoreComments = async () => {
|
||||
if (loading.value || !hasMore.value) return;
|
||||
await loadComments();
|
||||
};
|
||||
|
||||
const switchTab = (tab) => {
|
||||
if (currentTab.value === tab) return;
|
||||
currentTab.value = tab;
|
||||
refreshComments();
|
||||
};
|
||||
|
||||
const submitMainComment = async () => {
|
||||
if (!ensureLogin()) return;
|
||||
const content = commentText.value.trim();
|
||||
if (!content || sending.value) return;
|
||||
|
||||
try {
|
||||
sending.value = true;
|
||||
await props.publishHandler({
|
||||
content,
|
||||
mode: "comment",
|
||||
replyTarget: null,
|
||||
});
|
||||
if (props.showSuccessToast) {
|
||||
uni.showToast({ title: props.mainSuccessText, icon: "none" });
|
||||
}
|
||||
commentText.value = "";
|
||||
emit("published", {
|
||||
mode: "comment",
|
||||
content,
|
||||
replyTarget: null,
|
||||
});
|
||||
await refreshComments();
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "发布失败", icon: "none" });
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openReplyPopup = async (payload) => {
|
||||
if (!ensureLogin()) return;
|
||||
replyTarget.value = payload;
|
||||
replyPopupVisible.value = true;
|
||||
await nextTick();
|
||||
replyInputFocus.value = false;
|
||||
await nextTick();
|
||||
replyInputFocus.value = true;
|
||||
};
|
||||
|
||||
const closeReplyPopup = () => {
|
||||
replyPopupVisible.value = false;
|
||||
replyInputFocus.value = false;
|
||||
replyContent.value = "";
|
||||
replyTarget.value = null;
|
||||
replyKeyboardHeight.value = 0;
|
||||
};
|
||||
|
||||
const submitReplyComment = async () => {
|
||||
if (!ensureLogin()) return;
|
||||
const content = replyContent.value.trim();
|
||||
if (!content || !replyTarget.value || sendingReply.value) return;
|
||||
|
||||
try {
|
||||
sendingReply.value = true;
|
||||
await props.publishHandler({
|
||||
content,
|
||||
mode: "reply",
|
||||
replyTarget: replyTarget.value,
|
||||
});
|
||||
if (props.showSuccessToast) {
|
||||
uni.showToast({ title: props.replySuccessText, icon: "none" });
|
||||
}
|
||||
const publishedReplyTarget = replyTarget.value;
|
||||
closeReplyPopup();
|
||||
emit("published", {
|
||||
mode: "reply",
|
||||
content,
|
||||
replyTarget: publishedReplyTarget,
|
||||
});
|
||||
await refreshComments();
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "回复失败", icon: "none" });
|
||||
} finally {
|
||||
sendingReply.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadReplies = async (comment, page = 1) => {
|
||||
if (!comment?.id) return;
|
||||
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: true,
|
||||
}));
|
||||
|
||||
try {
|
||||
const res = await props.repliesHandler({
|
||||
rootCommentId: comment.id,
|
||||
page,
|
||||
});
|
||||
const list = parseListResponse(res);
|
||||
const normalizedReplies = list.map((reply) => props.normalizeComment(reply, comment));
|
||||
const hasMoreReplies = resolveHasMore(res, list, page);
|
||||
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: false,
|
||||
repliesLoaded: true,
|
||||
repliesPage: page,
|
||||
repliesHasMore: hasMoreReplies,
|
||||
replies: page === 1 ? normalizedReplies : [...(item.replies || []), ...normalizedReplies],
|
||||
}));
|
||||
} catch (error) {
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: false,
|
||||
}));
|
||||
uni.showToast({ title: "加载回复失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleReplies = (comment) => {
|
||||
if (comment.repliesLoading || comment.repliesLoaded) return;
|
||||
loadReplies(comment, 1);
|
||||
};
|
||||
|
||||
const handleLoadMoreReplies = (comment) => {
|
||||
if (comment.repliesLoading || !comment.repliesHasMore) return;
|
||||
loadReplies(comment, Number(comment.repliesPage || 1) + 1);
|
||||
};
|
||||
|
||||
const handleCommentLikeChange = ({ id, parentId, isReply, isLiked, likes }) => {
|
||||
comments.value = comments.value.map((item) => {
|
||||
if (!isReply && item.id !== id) return item;
|
||||
if (isReply && item.id !== parentId) return item;
|
||||
|
||||
if (isReply) {
|
||||
return {
|
||||
...item,
|
||||
replies: (item.replies || []).map((reply) => {
|
||||
if (reply.id !== id) return reply;
|
||||
return {
|
||||
...reply,
|
||||
isLiked,
|
||||
likes,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
isLiked,
|
||||
likes,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.requestKey, props.visible],
|
||||
([requestKey, visible]) => {
|
||||
if (!requestKey || !visible) {
|
||||
resetState();
|
||||
return;
|
||||
}
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
comments.value = [];
|
||||
loadComments({ reset: true });
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
if (uni.onKeyboardHeightChange) {
|
||||
keyboardHeightListener = (res) => {
|
||||
replyKeyboardHeight.value = res?.height || 0;
|
||||
};
|
||||
uni.onKeyboardHeightChange(keyboardHeightListener);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (uni.offKeyboardHeightChange && keyboardHeightListener) {
|
||||
uni.offKeyboardHeightChange(keyboardHeightListener);
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
refreshComments,
|
||||
loadMoreComments,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comment-section {
|
||||
padding: 32rpx;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 2rpx solid rgba(229, 232, 246, 0.92);
|
||||
box-shadow: 0 18rpx 42rpx rgba(87, 92, 145, 0.08);
|
||||
}
|
||||
|
||||
.comment-section--topic {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.comment-section--pk {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.comment-tabs {
|
||||
display: flex;
|
||||
gap: 34rpx;
|
||||
}
|
||||
|
||||
.comment-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
color: #1f2432;
|
||||
}
|
||||
|
||||
.comment-tab {
|
||||
font-size: 30rpx;
|
||||
color: #8a90a0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-tab.active {
|
||||
color: #1f2432;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.comment-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 28rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #6557ff, #4d44f1);
|
||||
}
|
||||
|
||||
.header-pill {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(92, 67, 245, 0.1);
|
||||
}
|
||||
|
||||
.header-pill--right {
|
||||
background: rgba(255, 141, 95, 0.12);
|
||||
}
|
||||
|
||||
.header-pill-label {
|
||||
font-size: 22rpx;
|
||||
color: #8a90a0;
|
||||
}
|
||||
|
||||
.header-pill-value {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #4d44f1;
|
||||
}
|
||||
|
||||
.header-pill--right .header-pill-value {
|
||||
color: #ff7a45;
|
||||
}
|
||||
|
||||
.compose-card {
|
||||
margin-bottom: 28rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, rgba(92, 67, 245, 0.08), rgba(92, 67, 245, 0.03));
|
||||
}
|
||||
|
||||
.compose-tip {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.compose-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: #202433;
|
||||
}
|
||||
|
||||
.compose-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #7b8191;
|
||||
}
|
||||
|
||||
.compose-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.compose-input {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
padding: 0 26rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #ffffff;
|
||||
font-size: 28rpx;
|
||||
color: #1f2432;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.compose-placeholder {
|
||||
color: #a0a6b5;
|
||||
}
|
||||
|
||||
.compose-send {
|
||||
min-width: 132rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
margin: 0;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #6557ff, #4d44f1);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.compose-send.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.compose-send::after,
|
||||
.comment-state-btn::after,
|
||||
.reply-popup-send::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.comment-state {
|
||||
min-height: 260rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 36rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.comment-state--empty {
|
||||
background: linear-gradient(180deg, rgba(248, 249, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
|
||||
}
|
||||
|
||||
.comment-empty-visual {
|
||||
position: relative;
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.comment-empty-core {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
|
||||
box-shadow: 0 16rpx 34rpx rgba(99, 102, 241, 0.14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comment-empty-emoji {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.comment-empty-orbit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 2rpx dashed rgba(99, 102, 241, 0.16);
|
||||
}
|
||||
|
||||
.orbit-1 {
|
||||
inset: 12rpx;
|
||||
}
|
||||
|
||||
.orbit-2 {
|
||||
inset: 32rpx;
|
||||
border-style: solid;
|
||||
border-color: rgba(129, 140, 248, 0.12);
|
||||
}
|
||||
|
||||
.comment-state-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #232734;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.comment-state-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #8a90a0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.comment-state-tip {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #a0a6b5;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.comment-state-btn {
|
||||
margin-top: 22rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #111827;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
padding-top: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-footer-text {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.comment-footer-link {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.reply-popup-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.24);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.reply-popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx);
|
||||
background: #ffffff;
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
box-shadow: 0 -12rpx 36rpx rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.reply-popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reply-popup-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.reply-popup-label {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.reply-popup-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.reply-popup-close {
|
||||
font-size: 24rpx;
|
||||
color: #8b8f98;
|
||||
}
|
||||
|
||||
.reply-popup-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.reply-popup-input {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f4f6fb;
|
||||
font-size: 28rpx;
|
||||
color: #1f2937;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.reply-popup-placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.reply-popup-send {
|
||||
min-width: 132rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
margin: 0;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #111827 0%, #374151 100%);
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reply-popup-send.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user