nailaoyun/nl-im-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI设计

Browse Source
This commit is contained in:
liqi
2025-12-11 22:42:10 +08:00
parent 408fe9294a
commit ff0ba0d311
7 changed files with 222 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/chat/MessageInput.vue
View File

@@ -307,39 +307,45 @@ defineExpose({
</script>
<style lang="scss" scoped>
// ==========================================
// 与设计稿 聊天页面.html 第116-123行 完全一致
// ==========================================
.message-input {
--input-bg: #f1f1f1;
--input-text: #1f2937;
--placeholder-color: #9ca3af;
--icon-color: #6b7280;
--icon-hover: #4F46E5;
// 亮色模式颜色 (与设计稿一致)
--input-bg: #f3f4f6; // 设计稿: bg-gray-100
--input-text: #1f2937; // 设计稿: text-gray-800
--placeholder-color: #9ca3af; // 设计稿: placeholder-gray-400
--icon-color: #6b7280; // 设计稿: text-gray-500
--icon-hover: #4F46E5; // 设计稿: hover:text-indigo-600
--send-bg: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
--border-color: rgba(0, 0, 0, 0.05);
--bg-content: #ffffff;
--border-color: #f3f4f6; // 设计稿: border-gray-100
--bg-content: #ffffff; // 设计稿: bg-white
position: relative;
background: var(--bg-content);
border-top: 1rpx solid var(--border-color);
border-top: 2rpx solid var(--border-color);
transition: all 0.3s;
// 暗色模式 - Warm Stone (与设计稿一致)
&.theme-dark {
--input-bg: #292524;
--input-text: #f5f5f4;
--placeholder-color: #78716c;
--icon-color: #a8a29e;
--icon-hover: #f97316;
--input-bg: #292524; // 设计稿: dark:bg-warm-800
--input-text: #f5f5f4; // 设计稿: dark:text-warm-100
--placeholder-color: #78716c; // 设计稿: dark:placeholder-warm-500
--icon-color: #a8a29e; // 设计稿: dark:text-warm-400
--icon-hover: #f97316; // 设计稿: dark:hover:text-orange-400
--send-bg: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
--border-color: #44403c;
--bg-content: #1c1917;
--border-color: #292524; // 设计稿: dark:border-warm-800
--bg-content: #1c1917; // 设计稿: dark:bg-warm-900
}
}
// 底部输入栏
// 底部输入栏 - 设计稿: px-4 py-3 pb-8 flex items-end gap-3
.input-bar {
display: flex;
align-items: flex-end;
gap: 24rpx;
padding: 24rpx 32rpx;
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
align-items: flex-end; // 设计稿: items-end
gap: 24rpx; // 设计稿: gap-3 = 12px = 24rpx
padding: 24rpx 32rpx; // 设计稿: px-4 py-3 = 16px 12px = 32rpx 24rpx
padding-bottom: calc(64rpx + env(safe-area-inset-bottom)); // 设计稿: pb-8 = 32px = 64rpx
}
// 语音按钮
@@ -365,27 +371,32 @@ defineExpose({
}
}
// 输入框容器
// 输入框容器 - 与设计稿完全一致
// 设计稿: flex-1 bg-gray-100 dark:bg-warm-800 rounded-2xl px-4 py-2.5 min-h-[44px]
// border border-transparent dark:border-warm-700
.input-wrap {
flex: 1;
min-height: 88rpx;
min-height: 88rpx; // 设计稿: min-h-[44px] = 44px = 88rpx
background: var(--input-bg);
border-radius: 40rpx;
padding: 20rpx 28rpx;
border-radius: 32rpx; // 设计稿: rounded-2xl = 16px = 32rpx
padding: 20rpx 32rpx; // 设计稿: px-4 py-2.5 = 16px 10px = 32rpx 20rpx
display: flex;
align-items: center;
border: 2rpx solid transparent; // 设计稿: border border-transparent
transition: all 0.2s;
// 设计稿: dark:border-warm-700
.theme-dark & {
border: 1rpx solid var(--border-color);
border-color: #44403c; // warm-700
}
}
// 设计稿: text-sm text-gray-800 dark:text-warm-100 resize-none h-5
.text-input {
width: 100%;
min-height: 48rpx;
min-height: 40rpx; // 设计稿: h-5 = 20px = 40rpx
max-height: 200rpx;
font-size: 30rpx;
font-size: 28rpx; // 设计稿: text-sm = 14px = 28rpx
line-height: 1.5;
color: var(--input-text);
background: transparent;

14
src/components/common/AppNavBar.vue
View File

@@ -83,7 +83,9 @@ function handleClickRight() {
:deep(.app-nav-bar) {
// 适配暗黑模式的背景色和文字颜色
// 假设 src/uni.scss 或 variables.scss 中定义了这些 CSS 变量
background-color: var(--bg-content) !important;
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
.wd-navbar__title {
color: var(--text-primary) !important;
@@ -102,10 +104,16 @@ function handleClickRight() {
// 暗黑模式下的特殊覆盖（如果 CSS 变量不够用）
.dark {
:deep(.app-nav-bar) {
background-color: #1c1c1e !important; // 兜底暗色
background-color: rgba(28, 25, 23, 0.85) !important; // Warm Stone 900 with transparency
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
.wd-navbar__title {
color: #ffffff !important;
color: #f5f5f4 !important;
}
.wd-icon {
color: #e7e5e4 !important;
}
}
}

14
src/components/moment/MomentCard.vue
View File

@@ -193,6 +193,20 @@ function onAction() {
background: var(--bg-hover);
border-radius: 8rpx;
padding: 16rpx;
position: relative;
// 三角指示器
&::before {
content: '';
position: absolute;
top: -12rpx;
left: 24rpx;
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-bottom: 12rpx solid var(--bg-hover);
}
.likes-row {
display: flex;

4
src/pages/chat/index.vue
View File

@@ -840,12 +840,12 @@ async function sendVoiceMessage(filePath: string, duration: number) {
background: rgba(255, 255, 255, 0.9); // 设计稿 bg-white/90
backdrop-filter: blur(12px); // 设计稿 backdrop-blur-md
-webkit-backdrop-filter: blur(12px);
border-bottom: 2rpx solid #f3f4f6; // 设计稿 border-gray-100
border-bottom: 2rpx solid transparent; // 设计稿 border-transparent
transition: all 0.3s;
.theme-dark & {
background: rgba(28, 25, 23, 0.9); // 设计稿 dark:bg-warm-900/90
border-color: #292524; // 设计稿 dark:border-warm-800
border-color: rgba(68, 64, 60, 0.5); // 设计稿 dark:border-warm-800/50
}
}

11
src/pages/contact/add.vue
View File

@@ -618,6 +618,7 @@ function goUserDetail(user: User) {
border-radius: 40rpx;
transition: all 0.15s;
box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.05);
overflow: hidden;
.dark & {
box-shadow: none;
@@ -633,6 +634,7 @@ function goUserDetail(user: User) {
.user-info {
flex: 1;
min-width: 0;
margin-left: 24rpx;
.user-name {
@@ -640,6 +642,9 @@ function goUserDetail(user: User) {
font-weight: 700;
color: var(--text-main);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-id {
@@ -647,11 +652,15 @@ function goUserDetail(user: User) {
color: var(--text-sub);
margin-top: 4rpx;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.add-btn {
padding: 16rpx 40rpx;
flex-shrink: 0;
padding: 16rpx 32rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 700;

5
src/pages/group/info.vue
View File

@@ -446,7 +446,10 @@ async function loadGroupInfo() {
// 过滤可邀请的好友
const memberIds = new Set(memberList.map(m => m.user_id))
availableContacts.value = contacts.filter(c => !memberIds.has(c.user_id || c.id))
availableContacts.value = (contacts || []).filter(c => {
const contactUserId = c.user_id || c.contact_user_id || c.id
return contactUserId && !memberIds.has(contactUserId)
})
} catch (error) {
console.error('加载群信息失败:', error)
toast.error('加载失败')

14
src/pages/moment/index.vue
View File

@@ -620,11 +620,7 @@ function getImageSize(moment: Moment): string {
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-bottom: 12rpx solid #f3f4f6; // gray-100
.dark & {
border-bottom-color: #292524; // 设计稿: warm-800
}
border-bottom: 12rpx solid var(--bg-detail);
}
.likes-list {
@@ -671,6 +667,12 @@ function getImageSize(moment: Moment): string {
}
}
// FAB 脉冲动画
@keyframes fab-pulse {
0%, 100% { box-shadow: 0 10rpx 30rpx rgba(16, 185, 129, 0.3); }
50% { box-shadow: 0 10rpx 40rpx rgba(16, 185, 129, 0.5); }
}
// 悬浮发布按钮
.fab-btn {
position: fixed;
@@ -686,6 +688,7 @@ function getImageSize(moment: Moment): string {
justify-content: center;
z-index: 99;
transition: transform 0.2s;
animation: fab-pulse 2s ease-in-out infinite;
svg {
width: 52rpx;
@@ -694,6 +697,7 @@ function getImageSize(moment: Moment): string {
&:active {
transform: scale(0.95);
animation: none;
}
}
</style>