ui: 修复按钮变体使用不一致并统一图标按钮交互

assets/css/app.css

@@ -276,21 +276,12 @@
     }
 
     .btn {
-        @apply btn-sm;
         @apply transition-transform duration-200;
         border-radius: 0.75rem;
         border: none;
         box-shadow: none;
     }
 
-    .btn-ghost {
-        background: transparent !important;
-    }
-
-    .btn-ghost:hover {
-        background: color-mix(in oklch, var(--color-base-content) 6%, transparent) !important;
-    }
-
     .btn:hover:not(:disabled):not(.btn-ghost) {
         transform: scale(1.01);
     }

docs/guides/coding/uiux.md

@@ -28,6 +28,9 @@ Do not put framework-specific implementation details here.
   - default: `outline`
   - save/submit: `primary` or `accent`
   - destructive: `error`
+- `<.button>` variant is the semantic source of truth for button type (`submit` / `ghost` / `outline` / `danger`).
+- Do not mix conflicting semantic style classes on `<.button>` calls (for example `variant=\"ghost\"` with `btn-outline`, or `variant=\"outline\"` with `btn-ghost`).
+- Visual fine-tuning beyond semantic variant should use daisyUI utility classes/CSS (size, spacing, positioning, z-index, visibility, layout), not override semantic type.
 - `cancel` should use `ghost`.
 - `save/submit` should use `primary`.
 - Do not place destructive actions (for example `delete`) in the primary bottom action row.

lib/vmemo_web/components/core_components.ex

@@ -374,7 +374,7 @@ defmodule VmemoWeb.CoreComponents do
       <.button phx-click="go" class="ml-2">Send!</.button>
 
   """
-  attr :variant, :string, default: "submit", values: ~w(submit ghost danger outline)
+  attr :variant, :string, default: nil, values: [nil | ~w(submit ghost danger outline)]
   attr :size, :string, default: nil, values: [nil | ~w(xs sm lg)]
   attr :class, :string, default: nil
   attr :rest, :global, include: ~w(disabled form name value type  )

lib/vmemo_web/live/components/search_box.ex

@@ -210,7 +210,7 @@
         consume_uploaded_entry(socket, entry, fn %{path: path} ->
           filename = entry.uuid <> Path.extname(entry.client_name)
 
           with {:ok, dest} <- ImageStorage.cp_file(path, current_user.id, filename),
                {:ok, image} <-
                  Image.create_with_sync(
                    %{
@@ -350,11 +350,12 @@
                   <%= if entry.progress == 0 do %>
                     <.button
                       type="button"
+                      size="sm"
                       phx-target={@myself}
                       phx-click="cancel-image"
                       phx-value-ref={entry.ref}
                       aria-label="cancel"
-                      class="absolute top-2 right-2 btn btn-circle btn-sm btn-neutral z-10"
+                      class="absolute top-2 right-2 btn-circle z-10"
                     >
                       &times;
                     </.button>

lib/vmemo_web/live/image_id_live.ex

@@ -304,10 +304,10 @@ defmodule VmemoWeb.ImageIdLive do
                 </.link>
 
                 <.button
-                  variant="outline"
+                  size="sm"
                   phx-click="show-expanded"
                   aria-label={gettext("expand")}
-                  class="absolute top-2 right-2 btn-circle hidden group-hover:hidden sm:group-hover:flex items-center justify-center group-hover:bg-base-100"
+                  class="absolute top-3 right-3 btn-circle hidden group-hover:hidden sm:group-hover:inline-flex items-center justify-center"
                 >
                   <.icon name="hero-arrows-pointing-out" class="h-4 w-4" />
                 </.button>
@@ -378,7 +378,7 @@ defmodule VmemoWeb.ImageIdLive do
                         id={@form[:caption].id}
                         name={@form[:caption].name}
                         class={[
-                          "textarea textarea-bordered w-full rounded-lg pr-12",
+                          "textarea textarea-bordered w-full rounded-lg pr-14",
                           if(@latest_caption_request,
                             do:
                               @latest_caption_request.status == "pending" ||
@@ -394,10 +394,12 @@ defmodule VmemoWeb.ImageIdLive do
                             else: false
                         }
                       >{Phoenix.HTML.Form.normalize_value("textarea", @form[:caption].value)}</textarea>
-                      <button
+                      <.button
                         type="button"
+                        variant="ghost"
+                        size="sm"
                         phx-click="gen-description"
-                        class="btn btn-ghost btn-xs btn-circle absolute top-2 right-2 hidden group-focus-within/caption:inline-flex"
+                        class="btn-circle absolute top-2.5 right-2.5 hidden group-focus-within/caption:inline-flex"
                         aria-label={
                           if @image.caption && @image.caption != "",
                             do: gettext("Regenerate caption"),
@@ -417,7 +419,7 @@ defmodule VmemoWeb.ImageIdLive do
                         }
                       >
                         <.icon name="hero-sparkles" class="h-4 w-4" />
-                      </button>
+                      </.button>
                     </div>
                   </div>
                   <.error :for={msg <- @form[:caption].errors}>
@@ -521,7 +523,7 @@ defmodule VmemoWeb.ImageIdLive do
                   />
                   <.button
                     phx-click="rotate-image"
-                    class="btn btn-circle bg-white text-black hover:bg-white border border-zinc-200 !shadow-none"
+                    class="btn-circle bg-white text-black hover:bg-white border border-zinc-200 !shadow-none"
                     aria-label={gettext("Rotate and save")}
                     title={gettext("Rotate and save")}
                   >