From 2afa3db780f27b49dc086d779c4eaf1b06c77ba1 Mon Sep 17 00:00:00 2001
From: Therainclouds <245141853@qq.com>
Date: Sat, 14 Feb 2026 00:22:58 +0800
Subject: [PATCH] new

---
 backend/shop/admin.py | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/backend/shop/admin.py b/backend/shop/admin.py
index 46cc2af..3a7b23b 100644
--- a/backend/shop/admin.py
+++ b/backend/shop/admin.py
@@ -60,15 +60,32 @@ class OrderableAdminMixin:
         return redirect(request.META.get('HTTP_REFERER', '..'))
 
     def order_actions(self, obj):
+        # 使用 inline style 实现基本样式，hover 效果如果不能用 CSS 文件，就只能妥协或者用 onmouseover
+        btn_style = (
+            "display: inline-flex; align-items: center; justify-content: center; "
+            "width: 26px; height: 26px; border-radius: 6px; "
+            "background-color: #f3f4f6; color: #4b5563; text-decoration: none; "
+            "border: 1px solid #e5e7eb; transition: all 0.2s;"
+        )
+        # onmouseover js
+        hover_js = "this.style.backgroundColor='#dbeafe'; this.style.color='#2563eb'; this.style.borderColor='#bfdbfe';"
+        out_js = "this.style.backgroundColor='#f3f4f6'; this.style.color='#4b5563'; this.style.borderColor='#e5e7eb';"
+
         return format_html(
-            '<div style="display: flex; align-items: center; gap: 8px;">'
-            '<a href="{}" class="button" style="padding: 4px 8px; background-color: #f3f4f6; border-radius: 4px; text-decoration: none; color: #374151; font-size: 12px; border: 1px solid #d1d5db; transition: all 0.2s;" onmouseover="this.style.backgroundColor=\'#e5e7eb\'" onmouseout="this.style.backgroundColor=\'#f3f4f6\'" title="上移">⬆️ 上移</a>'
-            '<span style="font-weight: bold; font-family: monospace; min-width: 24px; text-align: center; color: #4b5563;">{}</span>'
-            '<a href="{}" class="button" style="padding: 4px 8px; background-color: #f3f4f6; border-radius: 4px; text-decoration: none; color: #374151; font-size: 12px; border: 1px solid #d1d5db; transition: all 0.2s;" onmouseover="this.style.backgroundColor=\'#e5e7eb\'" onmouseout="this.style.backgroundColor=\'#f3f4f6\'" title="下移">⬇️ 下移</a>'
+            '<div style="display: flex; align-items: center; gap: 6px;">'
+            '<a href="{}" title="上移" style="{}" onmouseover="{}" onmouseout="{}">'
+            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>'
+            '</a>'
+            '<span style="font-weight: 700; font-family: system-ui, -apple-system, sans-serif; min-width: 20px; text-align: center; color: #374151; font-size: 13px;">{}</span>'
+            '<a href="{}" title="下移" style="{}" onmouseover="{}" onmouseout="{}">'
+            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'
+            '</a>'
             '</div>',
             reverse(f'admin:{self.model._meta.app_label}_{self.model._meta.model_name}_move_up', args=[obj.pk]),
+            btn_style, hover_js, out_js,
             obj.order,
             reverse(f'admin:{self.model._meta.app_label}_{self.model._meta.model_name}_move_down', args=[obj.pk]),
+            btn_style, hover_js, out_js,
         )
     order_actions.short_description = "排序调节"
     order_actions.allow_tags = True