diff --git a/App.vue b/App.vue index 5b24b0c..bbef642 100644 --- a/App.vue +++ b/App.vue @@ -20,56 +20,75 @@ .status-bar { height: var(--status-bar-height); width: 100%; + background: linear-gradient(180deg, #fafbff 0%, #f5f6fa 100%); } .page-container { width: 100%; height: calc(100vh - var(--status-bar-height)); + background: linear-gradient(180deg, #f0f2ff 0%, #f5f6fa 40%, #fafbfc 100%); } .solid-line { width: 100%; - border-bottom: 1rpx solid #999; + height: 1rpx; + background: linear-gradient(90deg, transparent, #d4d4f0, transparent); } .icon-btn { - padding: 10rpx; - border-radius: 20rpx; + padding: 12rpx; + border-radius: 16rpx; box-sizing: border-box; display: flex; justify-content: center; align-items: center; + transition: all 0.2s ease; + &:active { + background: rgba(170, 170, 255, 0.12); + transform: scale(0.95); + } } .text-btn { - padding: 10rpx; + padding: 12rpx 20rpx; border-radius: 20rpx; box-sizing: border-box; display: flex; justify-content: center; align-items: center; + transition: all 0.2s ease; + font-size: 26rpx; + font-weight: 500; + &:active { + opacity: 0.8; + transform: scale(0.97); + } } .switch-box { - width: 42px; - height: 20px; - background-color: #999; - border-radius: 10px; + width: 48px; + height: 26px; + background-color: #d4d4d8; + border-radius: 13px; display: flex; align-items: center; - padding: 1px; + padding: 2px; + transition: all 0.3s ease; } .switch-box.active { justify-content: flex-end; - background-color: #00aaff; + background: linear-gradient(135deg, #aaaaff, #3b86ff); + box-shadow: 0 0 12rpx rgba(170, 170, 255, 0.4); } .switch-track { - width: 20px; - height: 20px; + width: 22px; + height: 22px; background-color: #ffffff; border-radius: 50%; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; } .popup-overlay { @@ -81,29 +100,54 @@ display: flex; align-items: center; justify-content: center; - background-color: rgba(193, 193, 193, 0.4); + background-color: rgba(30, 30, 50, 0.35); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); z-index: 1000; + animation: fadeIn 0.25s ease; + } + + @keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes slideUp { + from { opacity: 0; transform: translateY(40rpx) scale(0.96); } + to { opacity: 1; transform: translateY(0) scale(1); } } .popup-card { width: 90%; height: auto; background-color: #ffffff; - border-radius: 50rpx; - padding: 50rpx; + border-radius: 40rpx; + padding: 48rpx 40rpx; box-sizing: border-box; display: flex; flex-direction: column; position: relative; + box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08); + animation: slideUp 0.3s ease; } .close-popup-card { position: absolute; - top: 10rpx; - right: 10rpx; - color: #ff0000; + top: 16rpx; + right: 16rpx; + color: #ff4d4f; padding: 10rpx; box-sizing: border-box; + width: 48rpx; + height: 48rpx; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all 0.2s ease; + &:active { + background: rgba(255, 77, 79, 0.1); + } } .popup-title { @@ -111,5 +155,9 @@ display: flex; justify-content: center; align-items: center; + font-size: 34rpx; + font-weight: 600; + color: #1a1a2e; + margin-bottom: 24rpx; } diff --git a/components/ChatSidebar.vue b/components/ChatSidebar.vue index 7e54771..e5fbaad 100644 --- a/components/ChatSidebar.vue +++ b/components/ChatSidebar.vue @@ -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; diff --git a/manifest.json b/manifest.json index e28db7a..2812c1e 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "appid" : "__UNI__923FD9E", "description" : "", "versionName" : "1.1.1", - "versionCode" : "1", + "versionCode" : 2, "transformPx" : false, /* 5+App特有相关 */ "app-plus" : { diff --git a/pages/Chat/Chat.css b/pages/Chat/Chat.css index 5b0998b..8ef03c6 100644 --- a/pages/Chat/Chat.css +++ b/pages/Chat/Chat.css @@ -1,5 +1,6 @@ .chat-page { position: relative; + background: linear-gradient(180deg, #f5f4ff 0%, #f8f7fc 50%, #faf9fe 100%); } /* 笼罩层样式 */ @@ -9,20 +10,16 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); z-index: 998; - animation: fadeIn 1s ease; + animation: fadeIn 0.3s ease; } -/* 自定义淡入动画 */ @keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } + from { opacity: 0; } + to { opacity: 1; } } /* ================会话侧边栏样式================== */ @@ -34,8 +31,9 @@ max-width: 680rpx; height: 100%; transform: translateX(-100%); - transition: transform 0.5s ease; + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; + box-shadow: 8rpx 0 30rpx rgba(0, 0, 0, 0.06); } .chat-sidebar.sidebar-show { @@ -53,34 +51,42 @@ display: flex; align-items: center; justify-content: center; - background-color: rgba(193, 193, 193, 0.4); + background-color: rgba(30, 30, 50, 0.35); z-index: 1000; - /* 毛玻璃核心代码 👇 */ backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(8px); + animation: fadeIn 0.25s ease; } .ncd-card { width: 90%; height: auto; background-color: #ffffff; - border-radius: 50rpx; - padding: 50rpx; + border-radius: 40rpx; + padding: 50rpx 40rpx; box-sizing: border-box; + box-shadow: 0 20rpx 60rpx rgba(100, 100, 200, 0.12); + animation: slideUp 0.35s ease; +} + +@keyframes slideUp { + from { opacity: 0; transform: translateY(40rpx) scale(0.96); } + to { opacity: 1; transform: translateY(0) scale(1); } } .ncd-header { display: flex; justify-content: center; + align-items: center; width: 100%; } .ncd-title-eng { display: flex; flex-shrink: 0; - background-color: #000; - padding: 5rpx 8rpx; - border-radius: 10rpx; + background: linear-gradient(135deg, #6c63ff, #4a45d1); + padding: 6rpx 14rpx; + border-radius: 12rpx; justify-content: center; align-items: center; } @@ -88,7 +94,7 @@ .ncd-title-eng text { color: #ffffff; font-weight: bold; - font-size: 30rpx; + font-size: 28rpx; } .ncd-title-zh { @@ -96,9 +102,9 @@ display: flex; flex: 1; height: 0; - font-size: 38rpx; - font-weight: bold; - color: #000; + font-size: 36rpx; + font-weight: 700; + color: #1a1a2e; } .ncd-header uni-icons { @@ -112,30 +118,41 @@ width: 100%; justify-content: center; align-items: center; - margin-top: 10rpx; + margin-top: 20rpx; box-sizing: border-box; } .ncd-option { width: 100%; background: #f8fafc; - padding: 50rpx 30rpx; + padding: 40rpx 30rpx; display: flex; - border-radius: 32rpx; + border-radius: 28rpx; margin-top: 20rpx; box-sizing: border-box; justify-content: center; align-items: center; + transition: all 0.2s ease; + border: 2rpx solid transparent; +} + +.ncd-option:active { + transform: scale(0.98); } .ncd-normal { - border: 1rpx solid #e8edf3; + border: 2rpx solid #e8edf3; +} + +.ncd-normal:active { + border-color: #c4c8d0; + background: #f0f3f7; } .ncd-opt-icon { width: 80rpx; height: 80rpx; - border-radius: 30rpx; + border-radius: 24rpx; padding: 10rpx; box-sizing: border-box; display: flex; @@ -145,7 +162,7 @@ } .ncd-normal .ncd-opt-icon { - background-color: #e2e8f0; + background: linear-gradient(135deg, #e2e8f0, #d9dfe8); } @@ -161,31 +178,36 @@ .ncd-opt-title-1 { font-size: 30rpx; - font-weight: bold; - color: #000000; + font-weight: 600; + color: #1a1a2e; } .ncd-opt-title-2 { - font-size: 26rpx; - color: #666666; + font-size: 24rpx; + color: #888; + margin-top: 4rpx; } .arrow-right-style { display: flex; flex-shrink: 0; font-weight: bold !important; - font-size: 30rpx !important; - color: #666666 !important; + font-size: 28rpx !important; + color: #999 !important; } .ncd-intelligence { - background: linear-gradient(to right, #f5f3ff, #ede9fe); - border: 1rpx solid #c4b5fd; + background: linear-gradient(135deg, #f8f5ff, #efe8ff); + border: 2rpx solid #c4b5fd; +} +.ncd-intelligence:active { + border-color: #a78bfa; + background: linear-gradient(135deg, #f3efff, #e8dcff); } .ncd-intelligence .ncd-opt-icon { - background-color: #8b5cf6; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); } /* ==========新建聊天列表相关====== */ @@ -196,7 +218,7 @@ } .close-option-card .iconfont { - color: #ff0000 !important; + color: #ff4d4f !important; } .chat-option-list { @@ -210,8 +232,14 @@ justify-content: flex-start; align-items: center; margin: 10rpx 0; + padding: 16rpx 20rpx; + border-radius: 20rpx; box-sizing: border-box; + transition: all 0.15s ease; +} +.chat-option:active { + background: rgba(170, 170, 255, 0.08); } .chat-option .iconfont { @@ -219,10 +247,11 @@ } .option-name { - font-size: 18px; - font-weight: 400; - margin-left: 10px; + font-size: 17px; + font-weight: 500; + margin-left: 12px; box-sizing: border-box; + color: #333; } /* ================聊天容器============== */ @@ -238,13 +267,16 @@ .chat-hearder { width: 100%; height: auto; - padding: 20rpx 10rpx; + padding: 16rpx 10rpx; box-sizing: border-box; display: flex; flex-shrink: 0; justify-content: flex-start; align-items: center; - border-bottom: 1rpx solid #ede9fe; + background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1rpx solid rgba(170, 170, 255, 0.15); } .chat-btn-group { @@ -256,26 +288,33 @@ } .head-btn { - padding: 10rpx; - border: 1rpx solid #ede9fe; - border-radius: 20rpx; + padding: 12rpx 14rpx; + border: 1.5rpx solid rgba(170, 170, 255, 0.3); + border-radius: 18rpx; margin: 0 10rpx; box-sizing: border-box; display: flex; justify-content: center; align-items: center; + background: rgba(255, 255, 255, 0.7); + transition: all 0.2s ease; +} + +.head-btn:active { + background: rgba(170, 170, 255, 0.1); + transform: scale(0.95); } .chat-btn-group .head-btn:nth-child(1) .iconfont { - color: #c4b5fd; + color: #a78bfa; } .chat-btn-group .head-btn:nth-child(2) .iconfont { - color: cornflowerblue; + color: #6495ed; } .head-btn .iconfont { - font-size: 50rpx; + font-size: 48rpx; } .log-out { @@ -283,7 +322,7 @@ } .log-out .iconfont { - color: #ff0000; + color: #ff4d4f; } /* ==========聊天主体部分========== */ @@ -293,7 +332,6 @@ height: 0; width: 100%; flex-direction: column; - } /* ==========聊天对话展示部分========== */ @@ -302,17 +340,36 @@ flex: 1; height: 0; width: 100%; - padding: 0rpx 20rpx; + padding: 20rpx 24rpx; box-sizing: border-box; flex-direction: column; overflow: auto; } +.chat-messages::-webkit-scrollbar { + width: 6rpx; +} + +.chat-messages::-webkit-scrollbar-thumb { + background: rgba(170, 170, 255, 0.3); + border-radius: 3rpx; +} + +.chat-messages::-webkit-scrollbar-track { + background: transparent; +} + .chat-message { display: flex; align-items: flex-start; - margin: 10rpx 0; + margin: 14rpx 0; box-sizing: border-box; + animation: msgFadeIn 0.3s ease; +} + +@keyframes msgFadeIn { + from { opacity: 0; transform: translateY(10rpx); } + to { opacity: 1; transform: translateY(0); } } .message-user { @@ -323,18 +380,19 @@ display: flex; justify-content: center; align-items: center; - width: 80rpx; - height: 80rpx; + width: 72rpx; + height: 72rpx; box-sizing: border-box; - border-radius: 10rpx; - margin-right: 10rpx; + border-radius: 16rpx; + margin-right: 12rpx; + flex-shrink: 0; } .friend-avatar { display: flex; justify-content: center; align-items: center; - border-radius: 20rpx; + border-radius: 16rpx; width: 100%; height: 100%; overflow: hidden; @@ -342,35 +400,47 @@ .chat-avatar-user { margin-right: 0; - margin-left: 10rpx; + margin-left: 12rpx; } .chat-content { width: auto; - max-width: calc(100% - 100rpx); + max-width: calc(100% - 120rpx); height: auto; - padding: 20rpx; + padding: 20rpx 24rpx; box-sizing: border-box; - border: 1rpx solid #999; + border-radius: 24rpx; overflow-x: auto; + font-size: 28rpx; + line-height: 1.65; + position: relative; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); + background: #ffffff; + border: 1rpx solid #eeeef5; } .chat-content-user { - background-color: #c4b5fd; + background: linear-gradient(135deg, #c4b5fd, #b8a5f0); color: #fff; - border-radius: 20rpx; + border: none; + box-shadow: 0 4rpx 12rpx rgba(170, 170, 255, 0.3); + border-bottom-right-radius: 8rpx; +} + +.chat-content:not(.chat-content-user) { + border-bottom-left-radius: 8rpx; } /* 图片消息 */ .message-image { max-width: 300rpx; - border-radius: 8rpx; - margin: 6rpx 0; + border-radius: 12rpx; + margin: 8rpx 0; } /* 文件列表 */ .message-file-list { - margin: 8rpx 0; + margin: 10rpx 0; } /* 文件项 */ @@ -382,10 +452,16 @@ .message-file { display: flex; align-items: center; - padding: 12rpx 16rpx; - background: #f7f8fa; - border-radius: 8rpx; + padding: 14rpx 18rpx; + background: rgba(255, 255, 255, 0.85); + border-radius: 12rpx; max-width: 350rpx; + border: 1rpx solid #eeeef5; +} + +.chat-content-user .message-file { + background: rgba(255, 255, 255, 0.25); + border-color: rgba(255, 255, 255, 0.3); } .file-icon { @@ -402,27 +478,39 @@ text-overflow: ellipsis; } +.chat-content-user .file-name { + color: #fff; +} + .file-size { font-size: 22rpx; color: #999; margin-left: 8rpx; } +.chat-content-user .file-size { + color: rgba(255, 255, 255, 0.7); +} + /* ==========聊天输入容器部分========== */ .chat-interactive-container { display: flex; flex-shrink: 0; width: 100%; - padding: 20rpx; + padding: 16rpx 24rpx 24rpx; box-sizing: border-box; flex-direction: column; + background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.95)); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-top: 1rpx solid rgba(170, 170, 255, 0.12); } .chat-interactive-group { display: flex; width: 100%; - padding: 20rpx; + padding: 12rpx 0; box-sizing: border-box; justify-content: flex-start; align-items: center; @@ -432,21 +520,47 @@ display: flex; align-items: center; justify-content: center; - border: 1rpx solid #000000; - border-radius: 10rpx; - padding: 10rpx 16rpx; - margin-right: 20rpx; + border: 1.5rpx solid #d4d4e0; + border-radius: 16rpx; + padding: 12rpx 20rpx; + margin-right: 16rpx; box-sizing: border-box; + font-size: 24rpx; + color: #666; + background: #ffffff; + transition: all 0.2s ease; +} + +.chat-interactive-btn:active { + border-color: #aaaaff; + background: rgba(170, 170, 255, 0.08); + transform: scale(0.96); +} + +/* 思考中禁用态 */ +.chat-interactive-btn.disabled { + opacity: 0.45; + pointer-events: none; + border-color: #e0dfe8; + color: #aaa; } .chat-input-container { display: flex; width: 100%; - padding: 20rpx; + padding: 8rpx 8rpx 8rpx 24rpx; box-sizing: border-box; - border: 1rpx solid #c4b5fd; + border: 2rpx solid #e0dff5; border-radius: 30rpx; align-items: flex-end; + background: #ffffff; + transition: all 0.25s ease; + box-shadow: 0 2rpx 12rpx rgba(100, 100, 150, 0.06); +} + +.chat-input-container:focus-within { + border-color: #aaaaff; + box-shadow: 0 0 0 4rpx rgba(170, 170, 255, 0.12), 0 4rpx 16rpx rgba(100, 100, 150, 0.08); } .message-input { @@ -454,8 +568,34 @@ max-height: 150rpx; min-height: 60rpx; overflow-y: auto; - margin: 10rpx; + margin: 4rpx 10rpx; box-sizing: border-box; + font-size: 28rpx; + color: #333; +} + +.message-input::placeholder { + color: #c0c0d0; +} + +/* 思考中:输入容器禁态 */ +.chat-input-container.input-disabled { + border-color: #eae9f2; + background: #f8f7fc; +} + +/* 思考中:文本域禁用 */ +.message-input[disabled] { + opacity: 0.5; + color: #bbb; +} + +/* 思考中:发送按钮禁用 */ +.input-btn-group.disabled { + opacity: 0.4; + pointer-events: none; + background: #c0c0d0; + box-shadow: none; } .input-btn-group { @@ -463,25 +603,32 @@ display: flex; justify-content: center; align-items: center; - padding: 16rpx; + padding: 14rpx; box-sizing: border-box; - background: #ffd4d4; - border: 1rpx solid #ff0000; - border-radius: 20rpx; - width: 80rpx; - height: 80rpx; + background: linear-gradient(135deg, #6c63ff, #8b7cfb); + border-radius: 22rpx; + width: 72rpx; + height: 72rpx; + box-shadow: 0 4rpx 12rpx rgba(108, 99, 255, 0.35); + transition: all 0.2s ease; +} + +.input-btn-group:active { + transform: scale(0.92); + box-shadow: 0 2rpx 6rpx rgba(108, 99, 255, 0.25); } .input-btn-group .iconfont { - color: #ff0000; - font-size: 40rpx; + color: #fff; + font-size: 36rpx; } /* ai思考弹窗卡片 */ .ai-card { width: auto; - border: 1rpx solid #409eff; - box-shadow: 0 0 20rpx #c4b5fd; + border: 2rpx solid rgba(64, 158, 255, 0.3); + box-shadow: 0 8rpx 30rpx rgba(170, 170, 255, 0.2); + border-radius: 32rpx !important; } /* 内容布局 */ @@ -501,41 +648,144 @@ } .dot { - width: 16rpx; - height: 16rpx; + width: 14rpx; + height: 14rpx; margin: 6rpx; border-radius: 50%; - background: #409eff; + background: linear-gradient(135deg, #409eff, #6db2ff); animation: dotBlink 1.2s infinite ease-in-out; } -/* 点点呼吸动画 */ @keyframes dotBlink { - - 0%, - 100% { + 0%, 100% { opacity: 0.3; - transform: scale(0.8); + transform: scale(0.7); } - 50% { opacity: 1; - transform: scale(1); + transform: scale(1.2); } } -.dot:nth-child(2) { - animation-delay: 0.2s; -} - -.dot:nth-child(3) { - animation-delay: 0.4s; -} +.dot:nth-child(2) { animation-delay: 0.25s; } +.dot:nth-child(3) { animation-delay: 0.5s; } /* 文字 */ .thinking-text { margin: 20rpx 0; - font-size: 22px; - font-weight: 500; + font-size: 20px; + font-weight: 600; color: #409eff; -} \ No newline at end of file +} + +/* 思考弹窗中的中断按钮 */ +.stop-thinking-btn { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 22rpx 0; + margin-top: 20rpx; + border-radius: 24rpx; + font-size: 28rpx; + font-weight: 600; + color: #ff4d4f; + background: linear-gradient(135deg, rgba(255, 77, 79, 0.06), rgba(255, 77, 79, 0.02)); + border: 2rpx solid rgba(255, 77, 79, 0.35); + transition: all 0.2s ease; + animation: pulseStop 2s ease-in-out infinite; +} + +.stop-thinking-btn:active { + background: rgba(255, 77, 79, 0.12); + border-color: #ff4d4f; + transform: scale(0.97); +} + +@keyframes pulseStop { + 0%, 100% { border-color: rgba(255, 77, 79, 0.35); } + 50% { border-color: rgba(255, 77, 79, 0.65); } +} + +/* ========== 文件预览标签列表 ========== */ +.image-list { + width: 100%; + padding: 8rpx 0 2rpx; + animation: fadeIn 0.25s ease; +} + +.image-tags { + display: flex; + flex-wrap: wrap; + gap: 10rpx; +} + +.image-tag { + display: flex; + align-items: center; + padding: 6rpx 8rpx 6rpx 16rpx; + background: linear-gradient(135deg, rgba(108, 99, 255, 0.07), rgba(108, 99, 255, 0.04)); + border: 1rpx solid rgba(108, 99, 255, 0.18); + border-radius: 20rpx; + max-width: 220rpx; + transition: all 0.2s ease; + box-shadow: 0 1rpx 4rpx rgba(108, 99, 255, 0.04); +} + +.image-tag:active { + transform: scale(0.96); + border-color: rgba(108, 99, 255, 0.4); + background: rgba(108, 99, 255, 0.1); +} + +.tag-name { + font-size: 22rpx; + color: #5a52d5; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + font-weight: 500; +} + +.tag-close { + flex-shrink: 0; + width: 32rpx; + height: 32rpx; + display: flex; + align-items: center; + justify-content: center; + font-size: 28rpx; + color: #bbb; + margin-left: 6rpx; + border-radius: 50%; + line-height: 1; + transition: all 0.15s ease; +} + +.tag-close:active { + color: #fff; + background: #ff4d4f; + transform: scale(1.1); +} + +/* 消息详情弹窗 */ +.message-detail-card { + width: 90%; + max-height: 80vh; + display: flex; + flex-direction: column; + border-radius: 40rpx; +} + +.message-detail-content { + flex: 1; + max-height: 60vh; + overflow-y: auto; + padding: 20rpx 0; + font-size: 28rpx; + line-height: 1.7; + color: #333333; + white-space: pre-wrap; + word-break: break-all; +} diff --git a/pages/Chat/Chat.vue b/pages/Chat/Chat.vue index 26a5bc3..8e6fc19 100644 --- a/pages/Chat/Chat.vue +++ b/pages/Chat/Chat.vue @@ -34,9 +34,9 @@ - - - + + + @@ -44,10 +44,26 @@ AI 正在思考中... + + ⏹ 中断对话 + + + + + + 消息详情 + + + + {{ detailMessageContent }} + + + + @@ -102,6 +118,7 @@ - + - 拍照上传 - 上传文件 + 拍照上传 + 上传文件 - 已选择: ({{ previewFileArray.length }}) - - - - {{ item.name }} - 删除 - + + + {{ item.name }} + × - - - - + + @@ -242,7 +256,8 @@ watch } from 'vue'; import { - onShow + onShow, + onUnload } from '@dcloudio/uni-app'; import ChatSidebar from '@/components/ChatSidebar.vue' import { @@ -570,19 +585,7 @@ } // 删除指定图片 const deleteImage = (index) => { - uni.showModal({ - title: '提示', - content: '确定要删除这张图片吗?', - success: (res) => { - if (res.confirm) { - previewFileArray.value.splice(index, 1); - uni.showToast({ - title: '删除成功', - icon: 'success' - }); - } - } - }); + previewFileArray.value.splice(index, 1); }; const fileList = ref([]) @@ -646,9 +649,22 @@ // }) const isThinking = ref(false) + const isSelfSent = ref(false) // 是否当前设备发起的 AI 对话(用于区分弹窗/仅锁输入) const isUploading = ref(false) const uploadedFiles = ref([]) + // 消息详情弹窗 + const showMessageModal = ref(false) + const detailMessageContent = ref('') + const showMessageDetail = (message) => { + detailMessageContent.value = message.content || '' + showMessageModal.value = true + } + const closeMessageDetail = () => { + showMessageModal.value = false + detailMessageContent.value = '' + } + const sendMessage = async () => { const message = textMessage.value.trim() if (!message && previewFileArray.value.length === 0) return @@ -811,16 +827,18 @@ } socketStore.send(data) isThinking.value = true - // 3分钟超时 + isSelfSent.value = true // 标记为当前设备发起 + // 10分钟超时 aiResponseTimer = setTimeout(() => { uni.showToast({ title: 'AI回复超时,请重试', icon: 'none' }) isThinking.value = false + isSelfSent.value = false textMessage.value = '' uploadedFiles.value = [] - }, 180000) + }, 600000) } catch (error) { isThinking.value = false uni.showToast({ @@ -830,21 +848,65 @@ } } - // 全局监听 socketStore.isThinking:true → false 时表示 AI 回复结束 + // 中断 AI 对话 + const stopConversation = async () => { + console.log('中断对话 - 当前会话ID:', currentSessionId.value) + try { + await socketStore.send({ + type: 'stop', + conversation_id: currentSessionId.value + }) + console.log('中断指令已发送成功') + } catch (err) { + console.error('中断指令发送失败:', err) + } + // 立即关闭弹窗,清除超时 + clearTimeout(aiResponseTimer) + isThinking.value = false + isSelfSent.value = false + textMessage.value = '' + uploadedFiles.value = [] + // socketStore.isThinking 和 takeConversationMessages 由后端中断确认驱动(见 handleBusinessMessage) + uni.showToast({ title: '已中断', icon: 'none', duration: 1500 }) + } + + // 全局监听 socketStore.isThinking:跨设备同步思考状态,锁/解锁输入框 watch(() => socketStore.isThinking, (newVal, oldVal) => { - console.log("isThinking 变化:", oldVal, "→", newVal); - // AI 回复结束:从 true 变为 false,且已有回复内容 - if (oldVal && !newVal && socketStore.messageString) { + console.log("isThinking 变化:", oldVal, "→", newVal, "messageString:", socketStore.messageString); + // false → true:后端开始回复(当前设备或其他设备触发),锁定输入框 + if (!oldVal && newVal) { + console.log('AI开始回复(跨设备同步),锁定输入框'); + isThinking.value = true + return + } + // true → false:AI 回复结束或中断,解锁输入框并刷新消息列表 + if (oldVal && !newVal) { clearTimeout(aiResponseTimer) - console.log("ai返回的消息:", socketStore.messageString); - console.log('AI回复结束,刷新消息列表'); + console.log('AI回复结束(正常/中断),解锁并刷新消息列表'); takeConversationMessages() isThinking.value = false + isSelfSent.value = false textMessage.value = '' uploadedFiles.value = [] } }) + // 监听 auth_fail,当 pc 端不在线时弹窗提示并取消思考状态 + watch(() => socketStore.authFailReason, (reason) => { + if (reason === 'pc offline') { + isThinking.value = false + socketStore.authFailReason = '' + nextTick(() => { + uni.showModal({ + title: '提示', + content: 'PC端不在线,不可聊天', + showCancel: false, + confirmText: '知道了' + }) + }) + } + }) + const textMessage = ref('') // 获取用户历史会话列表 @@ -1018,7 +1080,7 @@ const takeConversationMessages = async () => { try { allmessages.value = await getConversationMessages(userToken.value, currentSessionId.value) || []; - console.log("获取到的所有消息:", JSON.stringify(allmessages.value) ); + // console.log("获取到的所有消息:", JSON.stringify(allmessages.value) ); // currentMessages.value = allmessages.value.slice(-pageInfoNumber); // 数据获取后执行滚动 scrollToBottom(); @@ -1124,10 +1186,12 @@ watch(currentSessionId, (newId) => { if (newId) { uni.setStorageSync('currentSessionId', currentSessionId.value) - // takeConversationMessages(); switch (ChatType.value) { case 0: takeConversationMessages(); + // 切换 AI 会话时重新连接 socket(绑定新 conversationId) + socketStore.disconnect() + handleConnect() break; case 1: takeFriendMessages(); @@ -1135,7 +1199,6 @@ case 2: takeGroupMessages(); break; - // 可选:默认兜底 default: takeConversationMessages(); break; @@ -1167,6 +1230,10 @@ if (currentSessionId.value) { takeConversationMessages(); } + // AI 对话页面:主动建立 socket 连接,确保消息实时推送 + if (userToken.value && currentSessionId.value && !socketStore.isConnected) { + handleConnect() + } } else if (chatType === 1) { await takeFriendList() takeFriendMessages(); @@ -1177,6 +1244,11 @@ await takeGroupMessages() } }) + + // 离开 AI 对话页面时断开 socket + onUnload(() => { + socketStore.disconnect() + }) \ No newline at end of file diff --git a/pages/WorkSpace/WorkSpace.css b/pages/WorkSpace/WorkSpace.css index 175e0ed..20ce011 100644 --- a/pages/WorkSpace/WorkSpace.css +++ b/pages/WorkSpace/WorkSpace.css @@ -5,53 +5,57 @@ padding: 10rpx 20rpx; box-sizing: border-box; align-items: center; - background-color: rgba(194, 191, 211, 0.1); - border-radius: 10rpx; + background: rgba(108, 99, 255, 0.06); + border-radius: 14rpx; + border: 2rpx solid transparent; + transition: all 0.25s ease; } .create-folder-name input { box-sizing: border-box; width: 100%; + font-size: 28rpx; + color: #333; } .create-folder-name.has-value { background-color: #ffffff; - border: 2rpx solid #aaaaff; - box-shadow: 0 0 15rpx #aaaaff; + border-color: #6c63ff; + box-shadow: 0 0 0 4rpx rgba(108, 99, 255, 0.06); } /* 新建文件夹弹窗内部样式 */ .new-folder-name { font-size: 28rpx; - color: #666; + color: #555; margin-bottom: 12rpx; } .nf-path-label { - font-size: 26rpx; + font-size: 24rpx; color: #999; margin-top: 24rpx; margin-bottom: 8rpx; } .nf-path-display { - font-size: 28rpx; + font-size: 26rpx; color: #333; padding: 12rpx 20rpx; - background: #f5f5f5; - border-radius: 10rpx; + background: #f5f5f8; + border-radius: 12rpx; word-break: break-all; } .nf-path-preview { - font-size: 28rpx; - color: #0073ff; + font-size: 26rpx; + color: #6c63ff; padding: 12rpx 20rpx; - background: rgba(0, 115, 255, 0.05); - border: 2rpx dashed rgba(0, 115, 255, 0.3); - border-radius: 10rpx; + background: rgba(108, 99, 255, 0.05); + border: 2rpx dashed rgba(108, 99, 255, 0.25); + border-radius: 12rpx; word-break: break-all; } @@ -68,28 +72,35 @@ justify-content: center; align-items: center; padding: 24rpx 0; - border-radius: 12rpx; + border-radius: 16rpx; font-size: 30rpx; + font-weight: 500; + transition: all 0.2s ease; +} + +.opt-btn:active { + transform: scale(0.97); } .opt-cancel { - background: #f5f5f5; + background: #f0f1f5; color: #666; } .opt-confirm { - background: linear-gradient(135deg, #0073ff, #3ab0ff); + background: linear-gradient(135deg, #6c63ff, #4a45d1); color: #fff; + box-shadow: 0 4rpx 12rpx rgba(108, 99, 255, 0.25); } .workspace-container { display: flex; flex-direction: column; - background: rgba(140, 140, 140, 0.1); + background: linear-gradient(180deg, #f5f4f9 0%, #faf9fe 100%); } .workspace-text { - color: #0073ff; + color: #6c63ff; font-weight: bold; } @@ -99,9 +110,14 @@ flex-shrink: 0; flex-direction: column; align-items: center; - padding: 16rpx 0; + padding: 12rpx 0; box-sizing: border-box; - border-bottom: 1rpx solid #ddd; + position: relative; + z-index: 100; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1rpx solid rgba(170, 170, 255, 0.1); } .custom-navbar { @@ -109,7 +125,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 20rpx 10rpx; + padding: 16rpx 10rpx; box-sizing: border-box; position: relative; } @@ -125,6 +141,9 @@ justify-content: center; align-items: center; text-align: center; + font-size: 26rpx; + color: #6c63ff; + font-weight: 500; } .navbar-title { @@ -135,6 +154,9 @@ position: absolute; left: 50%; transform: translateX(-50%); + font-size: 32rpx; + font-weight: 700; + color: #1a1a2e; } .navbar-right { @@ -146,12 +168,12 @@ } .navbar-right .menu-open { - color: #3ab0ff !important; + color: #6c63ff !important; font-size: 40rpx !important; } .custom-navbar-icon { - color: #0073ff !important; + color: #6c63ff !important; font-size: 40rpx !important; } @@ -165,18 +187,28 @@ display: flex; flex: 1; align-items: center; - background: rgba(255, 255, 255, 1); - padding: 16rpx; + background: rgba(255, 255, 255, 0.9); + padding: 14rpx 24rpx; box-sizing: border-box; - border-radius: 30rpx; + border-radius: 28rpx; + border: 2rpx solid #e8e7f5; + transition: all 0.25s ease; +} + +.search-file:focus-within { + border-color: #6c63ff; + box-shadow: 0 0 0 4rpx rgba(108, 99, 255, 0.06); } .icon-sousuo { font-weight: bold; + color: #999; } .search-file-input { - margin-left: 20rpx; + margin-left: 16rpx; + font-size: 26rpx; + color: #333; } .cancel-search { @@ -184,7 +216,9 @@ flex-shrink: 0; padding: 0 0 0 20rpx; box-sizing: border-box; - color: #0073ff; + color: #6c63ff; + font-size: 28rpx; + font-weight: 500; } .workspace-content { @@ -201,20 +235,30 @@ position: absolute; top: 100%; right: 20rpx; - width: 300rpx; + width: 280rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff; - border-radius: 30rpx; - z-index: 1; + border-radius: 24rpx; + z-index: 999; + box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08); + padding: 8rpx 0; + overflow: hidden; } .menu-card-item { width: 100%; - padding: 20rpx; + padding: 22rpx 28rpx; box-sizing: border-box; + font-size: 28rpx; + color: #333; + transition: all 0.15s ease; +} + +.menu-card-item:active { + background: rgba(108, 99, 255, 0.06); } .folder-null { @@ -227,18 +271,20 @@ left: 50%; top: 30%; transform: translateX(-50%); - font-size: 32rpx; + font-size: 30rpx; + color: #bbb; } .folder-null .iconfont { font-size: 180rpx; + color: #ddd; } .folder-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); - padding: 20rpx; + padding: 24rpx; box-sizing: border-box; gap: 20rpx; align-items: start; @@ -251,51 +297,63 @@ align-items: center; position: relative; min-width: 0; + background: rgba(255, 255, 255, 0.7); + border-radius: 24rpx; + padding: 24rpx 8rpx 16rpx; + border: 2rpx solid transparent; + transition: all 0.2s ease; } .folder-item.select-folder { - border-radius: 30rpx; - background: rgba(9, 9, 9, 0.1); + border-color: rgba(108, 99, 255, 0.3); + background: rgba(108, 99, 255, 0.04); +} + +.folder-item:active { + transform: scale(0.96); + background: rgba(255, 255, 255, 0.95); } .folder-item .folder-name { - max-width: 150rpx; + max-width: 160rpx; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; - text-align: center; - line-height: 40rpx; + line-height: 44rpx; min-width: 0; + font-size: 26rpx; + color: #444; } .folder-item-style { - font-size: 160rpx !important; - font-weight: 10rpx !important; - color: #3ab0ff !important; + font-size: 110rpx !important; + color: #6c63ff !important; } .folder-checkbox { - width: 50rpx; - height: 50rpx; - border: 6rpx solid #fff; + width: 44rpx; + height: 44rpx; + border: 3rpx solid #fff; border-radius: 50%; - box-shadow: 0 2rpx 3rpx #333; - background: rgba(255, 255, 255, 0.2); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12); + background: rgba(255, 255, 255, 0.9); box-sizing: border-box; position: absolute; left: 50%; - top: 30%; + top: 25%; transform: translate(-50%); display: flex; justify-content: center; align-items: center; + transition: all 0.2s ease; } .folder-checkbox.select-folder { - background-color: #0073ff; + background: linear-gradient(135deg, #6c63ff, #4a45d1); + border-color: #6c63ff; } .workspace-footer { @@ -303,16 +361,22 @@ display: flex; flex-shrink: 0; justify-content: space-between; - padding: 30rpx; + padding: 24rpx 30rpx; box-sizing: border-box; - color: #999999; - background: #eeeeee; + color: #888; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-top: 1rpx solid rgba(170, 170, 255, 0.1); + font-size: 26rpx; + transition: all 0.2s ease; } .workspace-footer.folder-actions { - color: #0073ff; + color: #6c63ff; + font-weight: 500; } .workspace-footer .iconfont { font-size: 40rpx !important; -} \ No newline at end of file +} diff --git a/pages/WorkSpace/WorkSpace.vue b/pages/WorkSpace/WorkSpace.vue index da744aa..7b8ae29 100644 --- a/pages/WorkSpace/WorkSpace.vue +++ b/pages/WorkSpace/WorkSpace.vue @@ -621,14 +621,14 @@ '.wav': 'icon-wenjianyinpin', '.flac': 'icon-wenjianyinpin', '.aac': 'icon-wenjianyinpin', - '.pdf': 'icon-PDF', - '.doc': 'icon-DOC', - '.docx': 'icon-DOC', - '.xls': 'icon-XLS', - '.xlsx': 'icon-XLS', - '.ppt': 'icon-PPT', - '.pptx': 'icon-PPT', - '.txt': 'icon-TXT', + '.pdf': 'icon-PDF1', + '.doc': 'icon-word', + '.docx': 'icon-word', + '.xls': 'icon-execl', + '.xlsx': 'icon-execl', + '.ppt': 'icon-PPT1', + '.pptx': 'icon-PPT1', + '.txt': 'icon-TXT1', '.md': 'icon-file-markdown-fill', '.zip': 'icon-wenjianyasuo', '.rar': 'icon-wenjianyasuo', @@ -640,11 +640,11 @@ '.vue': 'icon-daimawenjia', '.html': 'icon-HTML', '.css': 'icon-CSS', - '.py': 'icon-daimawenjian', - '.java': 'icon-daimawenjian', + '.py': 'icon-daima', + '.java': 'icon-daima', '.json': 'icon-JSON', }; - return iconMap[ext?.toLowerCase()] || 'icon-qitawenjian'; + return iconMap[ext?.toLowerCase()] || 'icon-qitalingyu'; }; const allFoldersData = ref({}) diff --git a/static/iconfont/demo_index.html b/static/iconfont/demo_index.html index 3bfb318..76cc9de 100644 --- a/static/iconfont/demo_index.html +++ b/static/iconfont/demo_index.html @@ -54,6 +54,60 @@