mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pk 重构ui风格

Browse Source
This commit is contained in:
没复习
2026-02-08 20:53:39 +08:00
parent 9f2b9a1997
commit 658f50cc51
7 changed files with 106 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/pk-mini/PkAppaside.vue
View File

@@ -55,7 +55,7 @@ const activeId = ref('pk')
const navigationModule = [
{ id: 'pk', name: 'PK', icon: 'sports_esports' },
{ id: 'forum', name: '站内信', icon: 'mail' },
// { id: 'forum', name: '站内信', icon: 'mail' },
{ id: 'message', name: '消息', icon: 'chat' },
{ id: 'mine', name: '我的', icon: 'person' }
]
@@ -121,11 +121,11 @@ onMounted(() => {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #4fcacd, #03aba8);
background: linear-gradient(135deg, #3b82f6, #2563eb); // from-blue-500 to-blue-600
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(79, 202, 205, 0.4);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); // shadow-blue-500/40
}
.logo-icon {
@@ -154,36 +154,36 @@ onMounted(() => {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
background-color: #f8fafc; // slate-50
}
.nav-card:hover {
background: rgba(255, 255, 255, 0.9);
background-color: #ffffff;
transform: scale(1.05);
}
.nav-card.active {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // shadow-md
}
.nav-icon {
font-size: 24px;
color: #666;
color: #64748b; // slate-500
}
.nav-card.active .nav-icon {
color: #03aba8;
color: #2563eb; // blue-600
}
.nav-name {
font-size: 10px;
color: #666;
color: #64748b; // slate-500
margin-top: 4px;
}
.nav-card.active .nav-name {
color: #03aba8;
color: #2563eb; // blue-600
}
.red-dot {
@@ -194,7 +194,7 @@ onMounted(() => {
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: #ff4444;
background-color: #ef4444; // red-500
color: white;
font-size: 10px;
text-align: center;
@@ -215,22 +215,23 @@ onMounted(() => {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
background-color: #f8fafc; // slate-50
}
.sign-in-btn:hover {
background: rgba(255, 255, 255, 0.9);
background-color: #ffffff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
transform: scale(1.05);
}
.sign-icon {
font-size: 24px;
color: #03aba8;
color: #2563eb; // blue-600
}
.sign-text {
font-size: 10px;
color: #03aba8;
color: #2563eb; // blue-600
margin-top: 4px;
font-weight: bold;
}

2
src/config/pk-mini.js
View File

@@ -6,7 +6,7 @@
export const PK_MINI_CONFIG = {
// GoEasy 开关 - 续费后改为 true
GOEASY_ENABLED: true,
GOEASY_ENABLED: false,
// GoEasy 配置
GOEASY: {

46
src/layout/WorkbenchLayout.vue
View File

@@ -10,27 +10,6 @@
</div>
<div class="flex-1 flex flex-col gap-4 w-full px-2">
<!-- Auto DM Workbench Tab -->
<button @click="currentView = 'auto_dm'"
class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
:class="currentView === 'auto_dm' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
<span class="material-icons-round text-2xl">chat</span>
<div
class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
自动私信工作台
</div>
</button>
<!-- Fan Workbench Tab -->
<button @click="currentView = 'FanWorkbench'"
class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
:class="currentView === 'FanWorkbench' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
<span class="material-icons-round text-2xl">supervised_user_circle</span>
<div
class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
大哥工作台
</div>
</button>
<!-- TK Workbench Tab -->
<button @click="currentView = 'tk'"
@@ -54,6 +33,29 @@
</div>
</button>
<!-- Auto DM Workbench Tab -->
<button @click="currentView = 'auto_dm'"
class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
:class="currentView === 'auto_dm' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
<span class="material-icons-round text-2xl">chat</span>
<div
class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
自动私信工作台
</div>
</button>
<!-- Fan Workbench Tab -->
<button @click="currentView = 'FanWorkbench'"
class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
:class="currentView === 'FanWorkbench' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
<span class="material-icons-round text-2xl">supervised_user_circle</span>
<div
class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
大哥工作台
</div>
</button>
<!-- PK 工作台 Tab -->
<button @click="currentView = 'pk_mini'"
class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
@@ -165,7 +167,7 @@ import placeholderBigBrother from '@/assets/placeholder-bigbrother.png'
const emit = defineEmits(['logout', 'go-back', 'stop-all'])
const currentView = ref('auto_dm') // Default Tab
const currentView = ref('tk') // Default Tab
const autoDmMode = ref('config') // Default Sub-state: 'config' or 'browser'
const handleGoToBrowser = async () => {

34
src/views/pk-mini/Message.vue
View File

@@ -261,8 +261,10 @@ onUnmounted(() => {
.message-page {
width: 100%;
height: 100%;
background: white;
border-radius: 16px;
background-color: #ffffff;
border: 1px solid #f1f5f9; // slate-100
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
overflow: hidden;
}
@@ -273,7 +275,7 @@ onUnmounted(() => {
.conversation-list {
height: 100%;
overflow: auto;
background: #fafafa;
background-color: #f9fafb; // gray-50
}
.conversation-item {
@@ -281,11 +283,11 @@ onUnmounted(() => {
padding: 15px;
cursor: pointer;
transition: background 0.2s;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #f1f5f9; // slate-100
}
.conversation-item:hover, .conversation-item.active {
background: #f0f0f0;
background-color: #eff6ff; // blue-50
}
.conv-avatar {
@@ -315,17 +317,17 @@ onUnmounted(() => {
.conv-name {
font-weight: bold;
color: #333;
color: #0f172a; // slate-900
}
.conv-time {
font-size: 12px;
color: #999;
color: #94a3b8; // slate-400
}
.conv-preview {
font-size: 13px;
color: #666;
color: #64748b; // slate-500
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -373,24 +375,24 @@ onUnmounted(() => {
.text-message {
padding: 12px 16px;
background: #f5f5f5;
background-color: #f1f5f9; // slate-100
border-radius: 12px;
font-size: 15px;
line-height: 1.5;
}
.message-item.mine .text-message {
background: #7bbd0093;
background-color: #dbeafe; // blue-100
}
.chat-input-area {
border-top: 1px solid #eee;
border-top: 1px solid #f1f5f9; // slate-100
}
.input-toolbar {
display: flex;
padding: 10px 15px;
background: #e4f9f9;
background-color: #eff6ff; // blue-50
}
.toolbar-btn {
@@ -405,11 +407,11 @@ onUnmounted(() => {
}
.toolbar-btn:hover {
background: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.toolbar-btn .material-icons-round {
color: #03aba8;
color: #2563eb; // blue-600
}
.input-box {
@@ -434,7 +436,7 @@ onUnmounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
color: #03aba8;
color: #2563eb; // blue-600
}
.placeholder-icon {
@@ -446,6 +448,6 @@ onUnmounted(() => {
.empty-tip {
text-align: center;
padding: 50px;
color: #999;
color: #94a3b8; // slate-400
}
</style>

12
src/views/pk-mini/Mine.vue
View File

@@ -88,7 +88,7 @@ const tabs = [
height: 90px;
margin: 0 10px;
border-radius: 24px;
background-color: #cef1eb;
background-color: #f1f5f9; // slate-100
border: 2px solid transparent;
display: flex;
align-items: center;
@@ -102,8 +102,8 @@ const tabs = [
}
.tab-item.active {
background: linear-gradient(90deg, #e4ffff, #ffffff);
border-color: #03aba8;
background: linear-gradient(90deg, #eff6ff, #ffffff); // from-blue-50 to-white
border-color: #2563eb; // blue-600
}
.tab-icon {
@@ -124,11 +124,11 @@ const tabs = [
.tab-label {
font-size: 24px;
color: #636363;
color: #64748b; // slate-500
}
.tab-item.active .tab-label {
color: #03aba8;
color: #2563eb; // blue-600
font-weight: bold;
}
@@ -136,7 +136,7 @@ const tabs = [
flex: 1;
height: calc(100% - 110px);
background-color: #ffffff;
border-radius: 16px;
border-radius: 12px;
overflow: hidden;
}
</style>

70
src/views/pk-mini/PkHall.vue
View File

@@ -621,8 +621,10 @@ onUnmounted(() => {
.pk-hall {
width: 100%;
height: 100%;
background: white;
border-radius: 16px;
background-color: #ffffff;
border: 1px solid #f1f5f9; // slate-100
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
overflow: hidden;
display: flex;
flex-direction: column;
@@ -638,8 +640,8 @@ onUnmounted(() => {
align-items: center;
justify-content: space-around;
padding: 0 20px;
background: linear-gradient(180deg, #f0fffe, #ffffff);
border-bottom: 1px solid #e0f0f0;
background: linear-gradient(180deg, #eff6ff, #ffffff); // from-blue-50 to-white
border-bottom: 1px solid #f1f5f9; // slate-100
}
.pk-splitter {
@@ -652,9 +654,9 @@ onUnmounted(() => {
position: relative;
width: 280px;
height: 50px;
background-color: #4fcacd;
background-color: #3b82f6; // blue-500
border-radius: 25px;
box-shadow: -3px 3px 4px #45aaac inset;
box-shadow: -3px 3px 4px rgba(37, 99, 235, 0.3) inset;
display: flex;
align-items: center;
}
@@ -678,12 +680,12 @@ onUnmounted(() => {
width: 140px;
height: 50px;
border-radius: 25px;
color: #03aba8;
color: #2563eb; // blue-600
text-align: center;
line-height: 50px;
font-size: 18px;
font-weight: bold;
background: linear-gradient(180deg, #e4ffff, #ffffff);
background: linear-gradient(180deg, #eff6ff, #ffffff); // from-blue-50 to-white
transition: left 0.3s ease;
z-index: 2;
}
@@ -745,14 +747,14 @@ onUnmounted(() => {
}
.search-btn {
background: linear-gradient(0deg, #4FCACD, #5FDBDE);
background: linear-gradient(0deg, #2563eb, #3b82f6); // from-blue-600 to-blue-500
color: white;
}
.reset-btn {
background: white;
border: 1px solid #03aba8;
color: #03aba8;
border: 1px solid #2563eb; // blue-600
color: #2563eb; // blue-600
}
.search-btn:hover, .reset-btn:hover {
@@ -775,7 +777,7 @@ onUnmounted(() => {
height: 100%;
overflow: auto;
padding: 15px;
background: white;
background-color: #ffffff;
border-radius: 16px 0 0 16px;
}
@@ -783,20 +785,22 @@ onUnmounted(() => {
display: flex;
padding: 20px;
margin-bottom: 15px;
background: url('https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/PKbackground.png') no-repeat center/cover;
background-color: #ffffff;
border: 1px solid #f1f5f9; // slate-100
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
cursor: pointer;
transition: all 0.3s;
}
.pk-card:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.2);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // shadow-md
transform: scale(1.02);
}
.pk-card.selected {
background-color: #fffbfa;
border: 1px solid #f4d0c9;
background-color: rgba(239, 246, 255, 0.3); // blue-50/30
border-color: #bfdbfe; // blue-200
}
.pk-avatar {
@@ -840,19 +844,19 @@ onUnmounted(() => {
}
.pk-gender.male {
background: #59d8db;
background-color: #60a5fa; // blue-400
}
.pk-gender.female {
background: #f3876f;
background-color: #f472b6; // pink-400
}
.pk-country {
padding: 2px 10px;
background: #e4f9f9;
background-color: #eff6ff; // blue-50
border-radius: 10px;
font-size: 12px;
color: #03aba8;
color: #2563eb; // blue-600
}
.pk-time {
@@ -884,15 +888,15 @@ onUnmounted(() => {
.empty-tip {
text-align: center;
padding: 50px;
color: #03aba8;
color: #2563eb; // blue-600
font-size: 16px;
}
// 聊天面板
.chat-panel {
height: 100%;
border-left: 1px solid #03aba82f;
background: white;
border-left: 1px solid #f1f5f9; // slate-100
background-color: #ffffff;
}
.chat-container {
@@ -980,7 +984,7 @@ onUnmounted(() => {
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #e4f9f9;
background-color: #eff6ff; // blue-50
}
.control-btns {
@@ -1011,14 +1015,14 @@ onUnmounted(() => {
.send-btn {
padding: 8px 20px;
color: #03aba8;
color: #2563eb; // blue-600
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
}
.send-btn:hover {
background: #03aba82d;
background-color: #dbeafe; // blue-100
}
.input-box {
@@ -1039,7 +1043,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
color: #03aba8;
color: #2563eb; // blue-600
font-size: 18px;
font-weight: bold;
}
@@ -1086,13 +1090,13 @@ onUnmounted(() => {
}
.anchor-item:hover {
border-color: #4fcacd;
background: #f8ffff;
border-color: #60a5fa; // blue-400
background-color: rgba(239, 246, 255, 0.5); // blue-50/50
}
.anchor-item.selected {
border-color: #03aba8;
background: #e4f9f9;
border-color: #2563eb; // blue-600
background-color: #eff6ff; // blue-50
}
.anchor-avatar {
@@ -1128,11 +1132,11 @@ onUnmounted(() => {
}
.anchor-gender.male {
background: #59d8db;
background-color: #60a5fa; // blue-400
}
.anchor-gender.female {
background: #f3876f;
background-color: #f472b6; // pink-400
}
.anchor-coin {

7
src/views/pk-mini/PkMiniWorkbench.vue
View File

@@ -84,9 +84,7 @@ onUnmounted(() => {
.pk-mini-workbench {
width: 100%;
height: 100%;
background-image: url(@/assets/pk-mini/bg.png);
background-size: cover;
background-position: center;
background-color: #f9fafb; // gray-50
}
.pk-container {
@@ -96,7 +94,8 @@ onUnmounted(() => {
.pk-aside {
height: 100%;
background: transparent;
background-color: #ffffff;
border-right: 1px solid #f1f5f9; // slate-100
}
.pk-main {