YiLin/phone-app------test1-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

部分优化

Browse Source
This commit is contained in:
YiLin
2026-07-07 18:02:55 +08:00
parent b8af01cc69
commit bf5203b081
48 changed files with 3228 additions and 1755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
components/ChatSidebar.vue
View File

@@ -334,32 +334,39 @@
align-items: center;
width: 100%;
height: 100%;
background-color: #f8f8f8;
background: linear-gradient(180deg, #faf9ff 0%, #f3f2f8 50%, #eeeef5 100%);
color: black;
box-sizing: border-box;
}
.sidebar-header {
padding: 40rpx;
padding: 40rpx 30rpx 30rpx;
width: 100%;
box-sizing: border-box;
display: flex;
flex-shrink: 0;
justify-content: center;
flex-direction: column;
border-bottom: 1rpx solid #bbbbbb;
border-bottom: 1rpx solid rgba(170, 170, 255, 0.18);
}
.user-profile-card {
padding: 10rpx 20rpx;
padding: 16rpx 24rpx;
width: 100%;
display: flex;
align-items: center;
background-color: #ffffff;
background: linear-gradient(135deg, #ffffff, #faf9ff);
box-sizing: border-box;
border-radius: 30rpx;
box-shadow: 0 0 8rpx #cccccc;
border-radius: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(100, 100, 150, 0.08);
border: 1rpx solid rgba(170, 170, 255, 0.12);
transition: all 0.2s ease;
}
.user-profile-card:active {
transform: scale(0.98);
box-shadow: 0 2rpx 10rpx rgba(100, 100, 150, 0.12);
}
.user-profile-card .left {
@@ -367,16 +374,18 @@
display: flex;
justify-content: center;
align-items: center;
margin-right: 10rpx;
margin-right: 16rpx;
.avatar-preview {
display: flex;
justify-content: center;
align-items: center;
width: 120rpx;
height: 120rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
border: 3rpx solid rgba(170, 170, 255, 0.3);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
image {
width: 100%;
@@ -391,8 +400,9 @@
align-items: center;
box-sizing: border-box;
border-radius: 50%;
width: 120rpx;
height: 120rpx;
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}
}
@@ -403,54 +413,80 @@
flex-direction: column;
align-items: start;
justify-content: center;
text:first-child {
font-size: 22rpx;
color: #999;
margin-bottom: 2rpx;
}
text:last-child {
font-size: 30rpx;
font-weight: 600;
color: #1a1a2e;
}
}
.user-profile-card .right {
flex-shrink: 0;
margin-left: 6rpx;
margin-left: 10rpx;
display: flex;
align-items: center;
background: rgba(16, 185, 129, 0.06);
padding: 8rpx 16rpx;
border-radius: 20rpx;
.status-dot {
width: 10rpx;
height: 10rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #10B981;
margin-right: 16rpx;
margin-right: 10rpx;
box-shadow: 0 0 8rpx rgba(16, 185, 129, 0.5);
animation: statusDotPulse 2s ease-in-out infinite;
}
@keyframes statusDotPulse {
0%,
100% {
box-shadow: 0 0 15rpx rgba(59, 130, 246, 0.8);
0%, 100% {
box-shadow: 0 0 8rpx rgba(16, 185, 129, 0.5);
transform: scale(1);
}
50% {
box-shadow: 0 0 30rpx rgba(59, 130, 246, 0.7);
transform: scale(1.1);
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.6);
transform: scale(1.15);
}
}
.status-text text {
font-size: 22rpx;
color: #059669;
font-weight: 500;
}
}
.new-chat-btn {
margin-top: 20rpx;
margin-top: 24rpx;
width: 100%;
padding: 30rpx;
padding: 26rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #3b86ff, #2463df);
border-radius: 30rpx;
box-shadow: 0 0 8rpx rgba(59, 134, 255, 0.6);
background: linear-gradient(135deg, #6c63ff, #4a45d1);
border-radius: 24rpx;
box-shadow: 0 6rpx 20rpx rgba(108, 99, 255, 0.3);
transition: all 0.2s ease;
&:active {
transform: scale(0.97);
box-shadow: 0 3rpx 10rpx rgba(108, 99, 255, 0.2);
}
text {
font-size: 28rpx;
font-weight: bold;
font-weight: 600;
color: #ffffff;
letter-spacing: 1rpx;
}
}
@@ -464,11 +500,11 @@
overflow-x: hidden;
&::-webkit-scrollbar {
width: 8rpx;
width: 6rpx;
}
&::-webkit-scrollbar-thumb {
background: rgba(59, 134, 255, 0.4);
background: rgba(108, 99, 255, 0.25);
border-radius: 3rpx;
}
@@ -479,9 +515,9 @@
.history-header {
width: 100%;
padding: 30rpx;
padding: 20rpx 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #bbbbbb;
border-bottom: 1rpx solid rgba(170, 170, 255, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
@@ -490,27 +526,43 @@
display: flex;
flex-direction: column;
text:first-child {
font-size: 32rpx;
font-weight: 700;
color: #1a1a2e;
}
text:last-child {
font-size: 22rpx;
color: #999;
margin-top: 2rpx;
}
}
.history-management {
display: flex;
.history-management-btn {
margin-left: 20rpx;
width: 60rpx;
height: 60rpx;
margin-left: 16rpx;
width: 56rpx;
height: 56rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
background-color: rgba(221, 221, 221, 0.5);
border-radius: 10rpx;
background-color: rgba(221, 221, 221, 0.4);
border-radius: 14rpx;
transition: all 0.15s ease;
&:active {
transform: scale(0.9);
}
}
.icon-jia-style {
background-color: rgba(16, 185, 129, 0.2);
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
@@ -519,12 +571,11 @@
}
.icon-saochu-style {
color: red;
color: #ff4d4f;
}
.icon-quxiao-style {
color: #3b86ff;
// border: 1rpx solid #3b86ff;
color: #6c63ff;
box-sizing: border-box;
}
@@ -533,12 +584,12 @@
}
.icon-total_selection-style.active {
color: #2463df;
background: rgba(59, 134, 255, 0.2);
color: #6c63ff;
background: rgba(108, 99, 255, 0.12);
}
.icon-shanchu-style {
color: red;
color: #ff4d4f;
}
}
}
@@ -547,40 +598,48 @@
display: flex;
flex-direction: column;
width: 100%;
padding: 20rpx 30rpx 6rpx 30rpx;
padding: 16rpx 30rpx 6rpx 30rpx;
box-sizing: border-box;
.history-search-inner {
display: flex;
width: 100%;
padding: 10rpx 20rpx;
padding: 12rpx 22rpx;
box-sizing: border-box;
align-items: center;
background-color: rgba(194, 191, 211, 0.1);
border-radius: 30rpx;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 28rpx;
border: 2rpx solid transparent;
transition: all 0.25s ease;
.search-icon {
color: #666666 !important;
color: #999 !important;
font-weight: bold;
font-size: 36rpx !important;
font-size: 32rpx !important;
}
.chat-search-icon {
color: #aaaaff !important;
color: #6c63ff !important;
font-weight: bold;
font-size: 36rpx !important;
font-size: 32rpx !important;
}
input {
margin-left: 10rpx;
margin-left: 12rpx;
box-sizing: border-box;
font-size: 26rpx;
color: #333;
}
input::placeholder {
color: #c0c0d0;
}
}
.history-search-inner.has-value {
background-color: #ffffff;
border: 2rpx solid #aaaaff;
box-shadow: 0 0 15rpx #aaaaff;
border-color: #6c63ff;
box-shadow: 0 0 0 3rpx rgba(108, 99, 255, 0.08);
}
}
@@ -590,47 +649,56 @@
.chat-history-card {
display: flex;
align-items: center;
border: 1rpx solid #3b86ff;
background-color: #ffffff;
border-radius: 30rpx;
padding: 30rpx;
margin-top: 10rpx;
border: 1.5rpx solid rgba(108, 99, 255, 0.25);
background: linear-gradient(135deg, #ffffff, #faf9ff);
border-radius: 24rpx;
padding: 24rpx 24rpx;
margin-top: 12rpx;
box-sizing: border-box;
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
}
}
.is-select-chat {
box-shadow: 0 0 5rpx #2463df;
background-color: rgba(59, 134, 255, 0.1);
border-color: #6c63ff;
box-shadow: 0 4rpx 16rpx rgba(108, 99, 255, 0.15);
background: linear-gradient(135deg, rgba(108, 99, 255, 0.06), rgba(108, 99, 255, 0.02));
}
.history-chat-checkbox {
width: 30rpx;
height: 30rpx;
width: 36rpx;
height: 36rpx;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
border: 1rpx solid #3b86ff;
border: 2rpx solid rgba(108, 99, 255, 0.5);
margin-right: 12rpx;
flex-shrink: 0;
}
.history-chat-avatar {
width: 66rpx;
height: 66rpx;
border-radius: 20rpx;
width: 64rpx;
height: 64rpx;
border-radius: 18rpx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(59, 134, 255, 0.4);
margin-left: 20rpx;
background: linear-gradient(135deg, rgba(108, 99, 255, 0.3), rgba(108, 99, 255, 0.15));
margin-left: 0;
margin-right: 16rpx;
box-sizing: border-box;
flex-shrink: 0;
}
.friend-avatar {
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
border-radius: 18rpx;
width: 100%;
height: 100%;
overflow: hidden;