Skip to content

Commit 737eaf0

Browse files
Deali-AxyDeali-Axy
committed
refactor(account): 重构账户侧边栏布局和样式
- 重新设计用户信息展示区域，改为水平布局 - 将导航菜单分组为"主要功能"和"账户管理" - 优化图标大小和间距，增加圆角效果 - 添加版权信息和设置按钮 - 改进退出登录按钮的交互效果
1 parent 16656c3 commit 737eaf0

1 file changed

Lines changed: 91 additions & 69 deletions

File tree

‎src/apps/account/templates/account/_account_shell.html‎

Lines changed: 91 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -38,90 +38,112 @@
3838

3939
<div class="drawer-side z-40 h-full">
4040
<label for="account-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
41-
<aside class="bg-base-100 h-full w-80 p-4 border-l border-base-200 flex flex-col overflow-y-auto custom-scrollbar">
42-
<!-- Sidebar Header / User Info -->
43-
<div class="flex flex-col items-center justify-center py-6 border-b border-base-200/50 mb-4">
44-
<div class="avatar placeholder mb-3">
45-
<div class="bg-neutral text-neutral-content rounded-full w-20 ring ring-primary ring-offset-base-100 ring-offset-2">
41+
<aside class="bg-base-100 h-full w-80 p-6 border-l border-base-200 flex flex-col overflow-y-auto custom-scrollbar shadow-sm">
42+
<!-- User Mini Profile -->
43+
<div class="flex items-center gap-4 mb-8">
44+
<div class="avatar placeholder">
45+
<div class="bg-neutral text-neutral-content rounded-xl w-12 h-12 ring ring-base-200 ring-offset-2">
4646
{% if user.profile.avatar %}
4747
<img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}" />
4848
{% else %}
4949
<img src="https://ui-avatars.com/api/?name={{ user.username }}&background=random&color=fff&size=128" alt="{{ user.username }}" />
5050
{% endif %}
5151
</div>
5252
</div>
53-
<h3 class="font-bold text-lg">{{ user.username }}</h3>
54-
<p class="text-xs text-base-content/60">{{ user.email }}</p>
53+
<div class="flex-1 min-w-0">
54+
<h3 class="font-bold text-base truncate">{{ user.username }}</h3>
55+
<p class="text-xs text-base-content/60 truncate">{{ user.email }}</p>
56+
</div>
57+
<a href="{% url 'account:settings' %}" class="btn btn-ghost btn-xs btn-square" title="设置">
58+
<i class="fa-solid fa-gear"></i>
59+
</a>
5560
</div>
5661

57-
<!-- Navigation Menu -->
58-
<ul class="menu menu-lg gap-2 w-full">
59-
<li>
60-
<a href="{% url 'account:index' %}"
61-
hx-get="{% url 'account:index' %}"
62-
hx-target="#account-main"
63-
hx-push-url="true"
64-
hx-swap="innerHTML transition:true"
65-
class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
66-
<i class="fa-solid fa-house w-6 text-center"></i>
67-
概览
68-
</a>
69-
</li>
70-
<li>
71-
<a href="{% url 'account:dashboard' %}"
72-
hx-get="{% url 'account:dashboard' %}"
73-
hx-target="#account-main"
74-
hx-push-url="true"
75-
hx-swap="innerHTML transition:true"
76-
class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
77-
<i class="fa-solid fa-chart-line w-6 text-center"></i>
78-
仪表盘
79-
</a>
80-
</li>
81-
<li>
82-
<a href="{% url 'account:profile' %}"
83-
hx-get="{% url 'account:profile' %}"
84-
hx-target="#account-main"
85-
hx-push-url="true"
86-
hx-swap="innerHTML transition:true"
87-
class="{% if request.resolver_match.url_name == 'profile' %}active{% endif %}">
88-
<i class="fa-solid fa-user-pen w-6 text-center"></i>
89-
个人资料
90-
</a>
91-
</li>
92-
<li>
93-
<a href="{% url 'account:settings' %}"
94-
hx-get="{% url 'account:settings' %}"
95-
hx-target="#account-main"
96-
hx-push-url="true"
97-
hx-swap="innerHTML transition:true"
98-
class="{% if 'settings' in request.resolver_match.url_name %}active{% endif %}">
99-
<i class="fa-solid fa-shield-halved w-6 text-center"></i>
100-
账户设置
101-
</a>
102-
</li>
103-
<li>
104-
<a href="{% url 'account:charge' %}"
105-
hx-get="{% url 'account:charge' %}"
106-
hx-target="#account-main"
107-
hx-push-url="true"
108-
hx-swap="innerHTML transition:true"
109-
class="{% if request.resolver_match.url_name == 'charge' %}active{% endif %}">
110-
<i class="fa-solid fa-wallet w-6 text-center"></i>
111-
充值中心
112-
</a>
113-
</li>
114-
</ul>
62+
<!-- Navigation Groups -->
63+
<nav class="flex-1 space-y-6">
64+
<!-- Main Group -->
65+
<div>
66+
<div class="text-xs font-bold text-base-content/40 uppercase tracking-wider mb-2 px-2">主要功能</div>
67+
<ul class="menu menu-md w-full p-0 gap-1">
68+
<li>
69+
<a href="{% url 'account:index' %}"
70+
hx-get="{% url 'account:index' %}"
71+
hx-target="#account-main"
72+
hx-push-url="true"
73+
hx-swap="innerHTML transition:true"
74+
class="{% if request.resolver_match.url_name == 'index' %}active{% endif %} rounded-lg">
75+
<i class="fa-solid fa-house w-5 opacity-70"></i>
76+
概览
77+
</a>
78+
</li>
79+
<li>
80+
<a href="{% url 'account:dashboard' %}"
81+
hx-get="{% url 'account:dashboard' %}"
82+
hx-target="#account-main"
83+
hx-push-url="true"
84+
hx-swap="innerHTML transition:true"
85+
class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %} rounded-lg">
86+
<i class="fa-solid fa-chart-line w-5 opacity-70"></i>
87+
仪表盘
88+
</a>
89+
</li>
90+
</ul>
91+
</div>
92+
93+
<!-- Account Group -->
94+
<div>
95+
<div class="text-xs font-bold text-base-content/40 uppercase tracking-wider mb-2 px-2">账户管理</div>
96+
<ul class="menu menu-md w-full p-0 gap-1">
97+
<li>
98+
<a href="{% url 'account:profile' %}"
99+
hx-get="{% url 'account:profile' %}"
100+
hx-target="#account-main"
101+
hx-push-url="true"
102+
hx-swap="innerHTML transition:true"
103+
class="{% if request.resolver_match.url_name == 'profile' %}active{% endif %} rounded-lg">
104+
<i class="fa-solid fa-user-pen w-5 opacity-70"></i>
105+
个人资料
106+
</a>
107+
</li>
108+
<li>
109+
<a href="{% url 'account:settings' %}"
110+
hx-get="{% url 'account:settings' %}"
111+
hx-target="#account-main"
112+
hx-push-url="true"
113+
hx-swap="innerHTML transition:true"
114+
class="{% if 'settings' in request.resolver_match.url_name %}active{% endif %} rounded-lg">
115+
<i class="fa-solid fa-shield-halved w-5 opacity-70"></i>
116+
安全设置
117+
</a>
118+
</li>
119+
<li>
120+
<a href="{% url 'account:charge' %}"
121+
hx-get="{% url 'account:charge' %}"
122+
hx-target="#account-main"
123+
hx-push-url="true"
124+
hx-swap="innerHTML transition:true"
125+
class="{% if request.resolver_match.url_name == 'charge' %}active{% endif %} rounded-lg">
126+
<i class="fa-solid fa-wallet w-5 opacity-70"></i>
127+
充值中心
128+
</a>
129+
</li>
130+
</ul>
131+
</div>
132+
</nav>
115133

116-
<div class="mt-auto pt-4 border-t border-base-200/50">
117-
<ul class="menu w-full">
134+
<!-- Footer Actions -->
135+
<div class="mt-auto pt-6 border-t border-base-200/50">
136+
<ul class="menu w-full p-0">
118137
<li>
119-
<a href="{% url 'account:logout' %}" class="text-error hover:bg-error/10">
120-
<i class="fa-solid fa-arrow-right-from-bracket w-6 text-center"></i>
138+
<a href="{% url 'account:logout' %}" class="text-error hover:bg-error/10 rounded-lg group">
139+
<i class="fa-solid fa-arrow-right-from-bracket w-5 group-hover:translate-x-1 transition-transform"></i>
121140
退出登录
122141
</a>
123142
</li>
124143
</ul>
144+
<div class="text-xs text-center mt-4 text-base-content/30">
145+
&copy; {% now "Y" %} DjangoStarter
146+
</div>
125147
</div>
126148
</aside>
127149
</div>

0 commit comments

Comments
 (0)