Update style

links/templates/links/link_form.html

@@ -3,40 +3,46 @@
 
 {% block content %}
 <div class="max-w-2xl mx-auto mt-8">
-  <div class="bg-white shadow-md rounded-lg overflow-hidden">
-    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
-      <h1 class="text-2xl font-bold text-gray-800">
-        {% if form.instance.pk %}{% trans "Edit Link" %}{% else %}{% trans "Create New Link" %}{% endif %}
-      </h1>
-    </div>
-    <div class="p-6">
-      <form method="post">
-        {% csrf_token %}
-        {% for field in form %}
-          <div class="mb-4">
-            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
-            {{ field.errors }}
-            <input type="{{ field.field.widget.input_type }}"
-                   name="{{ field.name }}"
-                   id="{{ field.id_for_label }}"
-                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                   {% if field.value %}value="{{ field.value }}"{% endif %}
-                   {% if field.field.required %}required{% endif %}>
-            {% if field.help_text %}
-              <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
-            {% endif %}
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+      <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
+        <h1 class="text-2xl font-bold text-gray-800">
+          {% if form.instance.pk %}{% trans "Edit Link" %}{% else %}{% trans "Create New Link" %}{% endif %}
+        </h1>
+      </div>
+      <div class="p-6">
+        <form method="post">
+          {% csrf_token %}
+          {% for field in form %}
+            <div class="mb-4">
+              <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
+              {% if field.errors %}
+                <ul class="errorlist mb-2">
+                  {% for error in field.errors %}
+                    <li class="text-red-500 text-sm">{{ error }}</li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+              <input type="{{ field.field.widget.input_type }}"
+                     name="{{ field.name }}"
+                     id="{{ field.id_for_label }}"
+                     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 {% if field.errors %}border-red-500{% endif %}"
+                     {% if field.value %}value="{{ field.value }}"{% endif %}
+                     {% if field.field.required %}required{% endif %}>
+              {% if field.help_text %}
+                <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+              {% endif %}
+            </div>
+          {% endfor %}
+          <div class="mt-6 flex items-center justify-end space-x-3">
+            <a href="{% url 'link_list' %}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">
+              {% trans "Cancel" %}
+            </a>
+            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+              {% trans "Save" %}
+            </button>
           </div>
-        {% endfor %}
-        <div class="mt-6 flex items-center justify-end space-x-3">
-          <a href="{% url 'link_list' %}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">
-            {% trans "Cancel" %}
-          </a>
-          <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
-            {% trans "Save" %}
-          </button>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   </div>
-</div>
 {% endblock %}

links/views.py

@@ -69,6 +69,13 @@ class LinkCreateView(CreateView):
     template_name = 'links/link_form.html'
     success_url = reverse_lazy('link_list')
 
+    def get_initial(self):
+        initial = super().get_initial()
+        alias = self.request.GET.get('alias')
+        if alias:
+            initial['alias'] = alias
+        return initial
+
 class LinkUpdateView(UpdateView):
     model = Link
     form_class = LinkForm
@@ -102,11 +109,15 @@ def delete_selected(request):
     return redirect('link_list')
 
 def redirect_to_original(request, alias):
-    link = get_object_or_404(Link, alias=alias)
-    link.click_count = F('click_count') + 1
-    link.save()
-    ClickLog.objects.create(link=link)  # 记录点击
-    return redirect(link.original_url)
+    try:
+        link = Link.objects.get(alias=alias)
+        link.click_count = F('click_count') + 1
+        link.save()
+        ClickLog.objects.create(link=link)  # 记录点击
+        return redirect(link.original_url)
+    except Link.DoesNotExist:
+        messages.warning(request, _("The alias '{}' doesn't exist. Do you want to create a new one?").format(alias))
+        return redirect(reverse('link_create') + f'?alias={alias}')
 
 class LinkDetailView(DetailView):
     model = Link

new_theme/static/css/dist/styles.css

@@ -721,6 +721,10 @@ video {
   display: block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -940,6 +944,10 @@ video {
   border-top-width: 1px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -950,6 +958,16 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -989,6 +1007,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1155,6 +1178,16 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-yellow-700 {
+  --tw-text-opacity: 1;
+  color: rgb(161 98 7 / var(--tw-text-opacity));
+}
+
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1225,6 +1258,11 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));

templates/base.html

@@ -99,7 +99,7 @@
     <div class="container mx-auto mt-20 p-4">
         {% if messages %}
             {% for message in messages %}
-                <div class="bg-{{ message.tags }}-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 px-4 py-3 rounded relative mb-4" role="alert">
+                <div class="bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4" role="alert">
                     <span class="block sm:inline">{{ message }}</span>
                 </div>
             {% endfor %}