Skip to content

Commit b3f3571

Browse files
imzybimzyb
committed
小改一下公开页
1 parent 3df0739 commit b3f3571

File tree

4 files changed

+275
-259
lines changed

4 files changed

+275
-259
lines changed

‎src/components/public/HeroProfileCard.vue‎

Lines changed: 60 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -57,93 +57,87 @@ const ICONS = {
5757

5858
<template>
5959
<div class="relative w-full">
60-
<!-- 背景装饰 -->
60+
<!-- Background Decoration -->
6161
<div
62-
class="absolute inset-0 bg-gradient-to-br from-primary-50 via-white to-purple-50 dark:from-primary-900/20 dark:via-white/5 dark:to-purple-900/20 rounded-[2.5rem]">
62+
class="absolute inset-0 bg-gradient-to-r from-primary-50 via-white to-purple-50 dark:from-primary-900/10 dark:via-[#1a1d29] dark:to-purple-900/10 rounded-[2.5rem]">
6363
</div>
6464
<div
65-
class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-primary-200/40 to-transparent dark:from-primary-600/10 rounded-full blur-3xl animate-pulse-slow">
65+
class="absolute top-0 right-0 w-96 h-96 bg-primary-200/20 dark:bg-primary-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none">
6666
</div>
67+
68+
<!-- Main Card Content -->
6769
<div
68-
class="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-purple-200/40 to-transparent dark:from-purple-600/10 rounded-full blur-3xl animate-pulse-slow delay-700">
69-
</div>
70-
71-
<!-- 主卡片 -->
72-
<div
73-
class="relative glass-panel dark:bg-white/5 backdrop-blur-2xl rounded-[2rem] p-8 md:p-12 shadow-2xl shadow-primary-500/10 border-white/40 dark:border-white/10 hover:shadow-primary-500/20 transition-all duration-500">
74-
75-
<!-- 精选标签 -->
76-
<div class="flex justify-center mb-8">
77-
<div
78-
class="inline-flex items-center gap-2 px-4 py-1.5 bg-gradient-to-r from-primary-500 to-purple-600 rounded-full shadow-lg shadow-primary-500/25 ring-1 ring-white/20">
79-
<span class="text-white text-sm font-bold tracking-wide">✨ 精选订阅推荐</span>
80-
</div>
81-
</div>
82-
83-
<!-- 内容区域 -->
84-
<div class="flex flex-col xl:flex-row items-center gap-8 xl:gap-16">
85-
86-
<!-- 左侧信息 -->
87-
<div class="flex-1 text-center xl:text-left">
88-
<!-- 图标和标题 -->
89-
<div class="flex flex-col xl:flex-row items-center xl:items-start gap-6 mb-8">
90-
<div
91-
class="h-20 w-20 rounded-2xl bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center shadow-lg shadow-primary-500/30 shrink-0 transform hover:scale-105 transition-transform duration-500">
92-
<span class="text-4xl drop-shadow-md">🚀</span>
70+
class="relative glass-panel dark:bg-white/5 backdrop-blur-2xl rounded-[2rem] p-8 lg:p-10 shadow-xl border border-white/40 dark:border-white/5">
71+
72+
<div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
73+
74+
<!-- 1. Brand / Header Column -->
75+
<div class="flex-shrink-0 flex flex-col items-center lg:items-start text-center lg:text-left space-y-4">
76+
<div class="inline-flex items-center gap-2 px-3 py-1 bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300 rounded-full text-xs font-bold tracking-wide uppercase">
77+
<span>✨ Featured</span>
78+
</div>
79+
80+
<div class="flex items-center gap-4">
81+
<div class="h-16 w-16 rounded-2xl bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center shadow-lg shadow-primary-500/20 text-3xl">
82+
🚀
9383
</div>
9484
<div>
95-
<h3 class="text-3xl md:text-4xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-primary-800 to-gray-900 dark:from-white dark:via-primary-200 dark:to-white">
85+
<h3 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white leading-tight">
9686
{{ profile.name }}
9787
</h3>
98-
<p class="mt-3 text-lg text-gray-500 dark:text-gray-400 max-w-lg leading-relaxed">
99-
{{ profile.description || '暂无简介' }}
100-
</p>
88+
<div class="flex items-center gap-1 mt-1">
89+
<span class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
90+
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Online & Stable</span>
91+
</div>
10192
</div>
10293
</div>
94+
</div>
10395

96+
<!-- 2. Description Column (Middle) -->
97+
<div class="flex-1 border-t lg:border-t-0 lg:border-l border-gray-100 dark:border-white/5 pt-6 lg:pt-0 lg:pl-12 w-full lg:w-auto text-center lg:text-left">
98+
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed max-w-2xl mx-auto lg:mx-0">
99+
{{ profile.description || 'This subscription group provides high-speed, stable nodes optimized for various network environments. Ideal for streaming, gaming, and secure browsing.' }}
100+
</p>
101+
<div class="mt-4 flex flex-wrap justify-center lg:justify-start gap-2">
102+
<span class="px-2 py-1 bg-gray-100 dark:bg-white/5 rounded text-xs text-gray-500 dark:text-gray-400">#HighSpeed</span>
103+
<span class="px-2 py-1 bg-gray-100 dark:bg-white/5 rounded text-xs text-gray-500 dark:text-gray-400">#LowLatency</span>
104+
<span class="px-2 py-1 bg-gray-100 dark:bg-white/5 rounded text-xs text-gray-500 dark:text-gray-400">#Secure</span>
105+
</div>
106+
</div>
104107

105-
106-
<!-- 操作按钮 -->
107-
<div class="flex flex-wrap justify-center xl:justify-start gap-4">
108-
<button @click="emit('quick-import', profile)"
109-
class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-primary-600 to-purple-600 hover:from-primary-500 hover:to-purple-500 text-white font-bold rounded-2xl shadow-xl shadow-primary-500/30 transition-all hover:-translate-y-1 hover:scale-105 active:scale-95">
110-
<BaseIcon :path="ICONS.import" className="w-5 h-5 mr-2" />
111-
一键导入
112-
</button>
108+
<!-- 3. Action Column (Right) -->
109+
<div class="flex-shrink-0 w-full lg:w-auto flex flex-col gap-3 min-w-[200px]">
110+
<button @click="emit('quick-import', profile)"
111+
class="w-full flex items-center justify-center px-6 py-3.5 bg-gray-900 dark:bg-white hover:bg-gray-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 font-bold rounded-xl shadow-xl transition-transform active:scale-95 group">
112+
<BaseIcon :path="ICONS.import" className="w-5 h-5 mr-2 group-hover:animate-bounce" />
113+
一键导入
114+
</button>
115+
116+
<div class="grid grid-cols-2 gap-3">
113117
<button @click="emit('preview', profile)"
114-
class="inline-flex items-center px-6 py-3.5 bg-white/80 dark:bg-white/10 border border-gray-200 dark:border-white/10 text-gray-700 dark:text-gray-200 font-bold rounded-2xl hover:bg-white dark:hover:bg-white/20 transition-all hover:-translate-y-0.5 active:scale-95 backdrop-blur-sm">
115-
<BaseIcon :path="ICONS.preview" className="w-5 h-5 mr-2" />
116-
预览节点
118+
class="flex items-center justify-center px-4 py-3 bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-white/10 text-gray-700 dark:text-gray-200 font-medium rounded-xl transition-colors text-sm">
119+
<BaseIcon :path="ICONS.preview" className="w-4 h-4 mr-1" />
120+
预览
117121
</button>
118-
<button @click="emit('copy-link', profile)"
119-
class="inline-flex items-center px-6 py-3.5 bg-white/80 dark:bg-white/10 border border-gray-200 dark:border-white/10 text-gray-700 dark:text-gray-200 font-bold rounded-2xl hover:bg-white dark:hover:bg-white/20 transition-all hover:-translate-y-0.5 active:scale-95 backdrop-blur-sm">
120-
<BaseIcon :path="ICONS.link" className="w-5 h-5 mr-2" />
121-
复制链接
122+
<button @click="emit('copy-link', profile)"
123+
class="flex items-center justify-center px-4 py-3 bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-white/10 text-gray-700 dark:text-gray-200 font-medium rounded-xl transition-colors text-sm">
124+
<BaseIcon :path="ICONS.link" className="w-4 h-4 mr-1" />
125+
复制
122126
</button>
123127
</div>
124-
</div>
125128

126-
<!-- 右侧二维码区域 -->
127-
<div class="flex flex-col items-center">
128-
<div @click="toggleQR"
129-
class="relative w-56 h-56 bg-white/50 dark:bg-gray-800/50 rounded-3xl shadow-lg border-2 border-dashed border-gray-200 dark:border-gray-600 flex items-center justify-center cursor-pointer hover:border-primary-400 dark:hover:border-primary-500 hover:bg-white/80 dark:hover:bg-gray-800/80 transition-all group backdrop-blur-sm">
130-
131-
<!-- 未展开状态 -->
132-
<div v-if="!showQR" class="text-center">
133-
<div
134-
class="w-20 h-20 mx-auto mb-4 bg-primary-50 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
135-
<BaseIcon :path="ICONS.qr" className="w-10 h-10 text-primary-600 dark:text-primary-400" />
136-
</div>
137-
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">点击显示二维码</span>
138-
</div>
129+
<div @click="toggleQR" class="mt-1 flex items-center justify-center gap-2 cursor-pointer text-xs text-gray-400 hover:text-primary-500 transition-colors">
130+
<BaseIcon :path="ICONS.qr" className="w-4 h-4" />
131+
<span>{{ showQR ? '隐藏二维码' : '显示二维码' }}</span>
132+
</div>
139133

140-
<!-- 二维码展示 -->
141-
<canvas v-show="showQR" ref="qrCanvas" class="rounded-xl shadow-sm"></canvas>
134+
<!-- QR Dropdown/Expand -->
135+
<div v-if="showQR" class="absolute top-full right-0 mt-4 p-4 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-gray-700 z-50 animate-fade-in-up">
136+
<canvas ref="qrCanvas" class="rounded-lg"></canvas>
137+
<p class="text-center text-xs text-gray-400 mt-2">Scan to Import</p>
142138
</div>
143-
<p class="mt-4 text-xs font-medium text-gray-400 dark:text-gray-500 text-center uppercase tracking-wider">
144-
扫码快速导入
145-
</p>
146139
</div>
140+
147141
</div>
148142
</div>
149143
</div>

‎src/components/public/ProfileCard.vue‎

Lines changed: 51 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -33,82 +33,71 @@ const ICONS = {
3333

3434
<template>
3535
<div
36-
class="group relative glass-panel dark:bg-white/5 backdrop-blur-xl rounded-3xl p-8 hover:shadow-2xl hover:border-primary-500/30 transition-all duration-500 transform hover:-translate-y-2 hover:scale-[1.01]"
36+
class="group relative h-full flex flex-col bg-white dark:bg-[#1a1d29] border border-gray-100 dark:border-white/5 rounded-3xl p-6 transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/5 hover:border-primary-500/30 hover:-translate-y-1"
3737
>
38-
<!-- Top Right Buttons: Quick Import & QR Code -->
39-
<div class="absolute top-5 right-5 flex gap-2">
40-
<!-- Quick Import Button -->
41-
<button
42-
@click="emit('quick-import', profile)"
43-
class="w-10 h-10 flex items-center justify-center rounded-xl bg-primary-50 dark:bg-primary-500/10 border border-primary-100 dark:border-primary-500/20 text-primary-600 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-500/30 transition-all hover:scale-110 group/import"
44-
title="一键导入"
45-
>
46-
<BaseIcon :path="ICONS.import" className="w-5 h-5" />
47-
<span
48-
class="absolute -bottom-8 right-0 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover/import:opacity-100 transition-opacity whitespace-nowrap pointer-events-none"
38+
<!-- Header: Icon & Title -->
39+
<div class="flex items-start justify-between mb-4">
40+
<div class="flex items-center gap-4">
41+
<div
42+
class="h-12 w-12 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/5 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300"
4943
>
50-
一键导入
51-
</span>
52-
</button>
53-
54-
<!-- QR Code Button -->
44+
<span class="text-2xl drop-shadow-sm">🚀</span>
45+
</div>
46+
<h3
47+
class="text-lg font-bold text-gray-900 dark:text-white line-clamp-1"
48+
:title="profile.name"
49+
>
50+
{{ profile.name }}
51+
</h3>
52+
</div>
53+
54+
<!-- QR Toggle (Small Top Right) -->
5555
<button
56-
@click="emit('toggle-qr', profile)"
57-
class="w-10 h-10 flex items-center justify-center rounded-xl bg-teal-50 dark:bg-teal-500/10 border border-teal-100 dark:border-teal-500/20 text-teal-600 dark:text-teal-400 hover:bg-teal-100 dark:hover:bg-teal-500/30 transition-all hover:scale-110 group/qr"
58-
:class="{ 'bg-teal-100 dark:bg-teal-500/30': isQrExpanded }"
59-
title="查看二维码"
56+
@click.stop="emit('toggle-qr', profile)"
57+
class="p-2 rounded-xl text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-500/10 transition-colors"
58+
title="显示二维码"
59+
:class="{ 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400': isQrExpanded }"
6060
>
6161
<BaseIcon :path="ICONS.qr" className="w-5 h-5" />
62-
<span
63-
class="absolute -bottom-8 right-0 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover/qr:opacity-100 transition-opacity whitespace-nowrap pointer-events-none"
64-
>
65-
{{ isQrExpanded ? '收起二维码' : '扫码导入' }}
66-
</span>
6762
</button>
6863
</div>
6964

70-
<!-- Emoji / Icon Placeholder -->
71-
<div class="mb-6">
72-
<div
73-
class="h-14 w-14 rounded-2xl bg-gradient-to-br from-primary-100 to-indigo-50 dark:from-primary-900/40 dark:to-indigo-900/20 flex items-center justify-center shadow-inner group-hover:scale-110 transition-transform duration-500"
74-
>
75-
<span class="text-3xl drop-shadow-sm">🚀</span>
76-
</div>
65+
<!-- Body: Description -->
66+
<div class="flex-1 mb-6">
67+
<p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed line-clamp-3">
68+
{{ profile.description || '暂无简介' }}
69+
</p>
7770
</div>
7871

79-
<h3
80-
class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300 mb-3"
81-
>
82-
{{ profile.name }}
83-
</h3>
84-
85-
<p class="text-gray-500 dark:text-gray-400 text-sm mb-6 line-clamp-3 min-h-[3.75rem] leading-relaxed">
86-
{{ profile.description || '暂无简介' }}
87-
</p>
88-
72+
<!-- Footer: Action Bar -->
73+
<div class="mt-auto pt-4 border-t border-gray-100 dark:border-white/5 flex items-center gap-3">
74+
<!-- Primary Action: Import -->
75+
<button
76+
@click="emit('quick-import', profile)"
77+
class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-primary-600 hover:bg-primary-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-primary-600/20 transition-all active:scale-95"
78+
>
79+
<BaseIcon :path="ICONS.import" className="w-4 h-4" />
80+
一键导入
81+
</button>
8982

83+
<!-- Secondary Actions -->
84+
<button
85+
@click="emit('preview', profile)"
86+
class="p-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
87+
title="预览节点"
88+
>
89+
<BaseIcon :path="ICONS.preview" className="w-5 h-5" />
90+
</button>
9091

91-
<div class="grid grid-cols-2 gap-3">
92-
<button
93-
@click="emit('preview', profile)"
94-
class="flex items-center justify-center px-4 py-3 border border-primary-200 dark:border-primary-500/30 text-sm font-bold rounded-xl text-primary-700 dark:text-primary-300 bg-primary-50 dark:bg-primary-500/10 hover:bg-primary-100 dark:hover:bg-primary-500/20 transition-all active:scale-95"
95-
>
96-
<BaseIcon :path="ICONS.preview" className="w-5 h-5 mr-1.5" />
97-
预览节点
98-
</button>
99-
<button
100-
@click="emit('copy-link', profile)"
101-
class="flex items-center justify-center px-4 py-3 border border-transparent text-sm font-bold rounded-xl text-white bg-gradient-to-r from-primary-600 to-indigo-600 hover:from-primary-500 hover:to-indigo-500 shadow-lg shadow-primary-500/30 transition-all hover:-translate-y-0.5 active:scale-95"
102-
>
103-
<BaseIcon :path="ICONS.link" className="w-5 h-5 mr-1.5" />
104-
复制链接
105-
</button>
92+
<button
93+
@click="emit('copy-link', profile)"
94+
class="p-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
95+
title="复制链接"
96+
>
97+
<BaseIcon :path="ICONS.link" className="w-5 h-5" />
98+
</button>
10699
</div>
107100

108-
<p class="mt-4 text-center text-xs text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
109-
点击右上角一键导入或查看二维码
110-
</p>
111-
112101
<QRCodeOverlay
113102
:profile="profile"
114103
:is-expanded="isQrExpanded"

0 commit comments

Comments
 (0)