From 93489c85fa9af29728523b087c0bfb202f18cd44 Mon Sep 17 00:00:00 2001
From: KOMATA <20227709+HynoR@users.noreply.github.com>
Date: Mon, 2 Mar 2026 13:43:34 +0800
Subject: [PATCH] feat: Enhance compose item interaction and styling (#12008)

- Updated the compose item to include a new class for active state, improving visual feedback.
- Refactored action buttons into a dedicated container for better organization and hover effects.
- Added CSS transitions for smoother interactions on hover and active states.
---
 .../src/layout/components/Sidebar/index.scss  |   4 +-
 .../src/views/container/compose/index.vue     | 126 +++++++++++-------
 2 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/frontend/src/layout/components/Sidebar/index.scss b/frontend/src/layout/components/Sidebar/index.scss
index c913d7360..3b1a302c9 100644
--- a/frontend/src/layout/components/Sidebar/index.scss
+++ b/frontend/src/layout/components/Sidebar/index.scss
@@ -23,9 +23,7 @@
         }
         &.is-active {
             background-color: var(--el-menu-item-bg-color-active);
-            box-shadow:
-                0px 0px 4px rgba(0, 94, 235, 0.1),
-                inset 0 0 0 2px var(--el-color-primary);
+            box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1), inset 0 0 0 2px var(--el-color-primary);
 
             &::before {
                 position: absolute;
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index e5d8639d6..b829556ad 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -30,8 +30,11 @@
                             >
                                 <el-table-column prop="name">
                                     <template #default="{ row }">
-                                        <div class="cursor-pointer">
-                                            <div class="font-medium text-base">
+                                        <div
+                                            class="compose-item"
+                                            :class="{ 'is-active': currentCompose?.name === row.name && !isOnCreate }"
+                                        >
+                                            <div class="font-medium text-base compose-title">
                                                 {{ row.name }}
                                             </div>
                                             <div class="mb-1">
@@ -64,52 +67,54 @@
                                                     }}
                                                 </el-text>
                                             </div>
-                                            <el-button
-                                                plain
-                                                round
-                                                size="small"
-                                                class="round-btn"
-                                                :disabled="!row?.workdir"
-                                                @click="openComposeFolder(row)"
-                                            >
-                                                {{ $t('home.dir') }}
-                                            </el-button>
-                                            <el-button
-                                                plain
-                                                round
-                                                size="small"
-                                                class="round-btn"
-                                                @click="handleComposeOperate('up', row)"
-                                            >
-                                                {{ $t('commons.operate.start') }}
-                                            </el-button>
-                                            <el-button
-                                                plain
-                                                round
-                                                size="small"
-                                                class="round-btn"
-                                                @click="handleComposeOperate('stop', row)"
-                                            >
-                                                {{ $t('commons.operate.stop') }}
-                                            </el-button>
-                                            <el-button
-                                                plain
-                                                round
-                                                size="small"
-                                                class="round-btn"
-                                                @click="handleComposeOperate('restart', row)"
-                                            >
-                                                {{ $t('commons.operate.restart') }}
-                                            </el-button>
-                                            <el-button
-                                                plain
-                                                round
-                                                size="small"
-                                                class="round-btn"
-                                                @click="onDelete(row)"
-                                            >
-                                                {{ $t('commons.operate.delete') }}
-                                            </el-button>
+                                            <div class="compose-actions">
+                                                <el-button
+                                                    plain
+                                                    round
+                                                    size="small"
+                                                    class="round-btn"
+                                                    :disabled="!row?.workdir"
+                                                    @click="openComposeFolder(row)"
+                                                >
+                                                    {{ $t('home.dir') }}
+                                                </el-button>
+                                                <el-button
+                                                    plain
+                                                    round
+                                                    size="small"
+                                                    class="round-btn"
+                                                    @click="handleComposeOperate('up', row)"
+                                                >
+                                                    {{ $t('commons.operate.start') }}
+                                                </el-button>
+                                                <el-button
+                                                    plain
+                                                    round
+                                                    size="small"
+                                                    class="round-btn"
+                                                    @click="handleComposeOperate('stop', row)"
+                                                >
+                                                    {{ $t('commons.operate.stop') }}
+                                                </el-button>
+                                                <el-button
+                                                    plain
+                                                    round
+                                                    size="small"
+                                                    class="round-btn"
+                                                    @click="handleComposeOperate('restart', row)"
+                                                >
+                                                    {{ $t('commons.operate.restart') }}
+                                                </el-button>
+                                                <el-button
+                                                    plain
+                                                    round
+                                                    size="small"
+                                                    class="round-btn"
+                                                    @click="onDelete(row)"
+                                                >
+                                                    {{ $t('commons.operate.delete') }}
+                                                </el-button>
+                                            </div>
                                         </div>
                                     </template>
                                 </el-table-column>
@@ -780,6 +785,31 @@ const onOpenLog = (row: any) => {
 </script>
 
 <style scoped lang="scss">
+.compose-item {
+    cursor: pointer;
+}
+
+.compose-title {
+    transition: color 0.15s;
+}
+
+.compose-item.is-active .compose-title {
+    color: var(--el-color-primary);
+}
+
+.compose-actions {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.2s, max-height 0.2s;
+}
+
+.compose-item:hover .compose-actions,
+.compose-item.is-active .compose-actions {
+    opacity: 1;
+    max-height: 40px;
+}
+
 .svg-icon {
     margin-top: -3px;
     font-size: 6px;