From e569bafd3d7a3c1b937d2e82547886ce0ae1f112 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Fri, 19 Jan 2024 19:51:23 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E7=A7=BB=E5=85=A5?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/snippet/snippet-drawer.vue     | 73 ++++++++++++++-----
 1 file changed, 54 insertions(+), 19 deletions(-)

diff --git a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
index 5353f4cc..e7ebded6 100644
--- a/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <a-drawer v-model:visible="visible"
-            :width="368"
+            :width="388"
             :footer="false">
     <!-- 表头 -->
     <template #title>
@@ -15,7 +15,7 @@
       <div class="snippet-header-container">
         <!-- 头部操作 -->
         <div class="snippet-header">
-          <a-button>新建</a-button>
+          <a-button @click="toggle">新建</a-button>
           <a-button>搜索</a-button>
         </div>
         <!-- 提示 -->
@@ -43,9 +43,9 @@
         <div>
           <div v-for="item in snippet.snippets"
                :key="item.id"
-               class="snippet-item-wrapper">
+               class="snippet-item-wrapper"
+               :class="[loading&&item.id===3 ? 'snippet-item-wrapper-expand' : '']">
             <div class="snippet-item">
-
             <span class="snippet-item-title">
               {{ item.name }}
             </span>
@@ -89,8 +89,10 @@
   import { useTipsStore } from '@/store';
   import useVisible from '@/hooks/visible';
   import { snippetTipsKey } from '../../types/terminal.const';
+  import useLoading from '@/hooks/loading';
 
   const { isNotTipped, setTipped } = useTipsStore();
+  const { loading, toggle } = useLoading();
   const { visible, setVisible } = useVisible(true);
   const snippet = ref<SnippetGroupResponse>({
     groups: [{
@@ -105,27 +107,27 @@
     snippets: [{
       id: 1,
       name: 'command1command1command1command1command1command1command1command1command1command1command1command1command1command1command1',
-      command: 'echo 123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123'
+      command: 'echo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquid, atque cupiditate doloribus eligendi enim fugiat itaque iusto laborum magnam maiores natus nemo, neque quae, reprehenderit sed ullam voluptatem?'
     }, {
       id: 2,
       name: 'command2',
-      command: 'echo 123123123123123123123123123123123123123123'
+      command: 'echo Lorem'
     }, {
       id: 3,
       name: 'command3',
-      command: 'echo 123123123123123123123123123123123123123123'
+      command: 'echo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquid, atque cupiditate doloribus eligendi enim fugiat itaque iusto laborum magnam maiores natus nemo, neque quae, reprehenderit sed ullam voluptatem?'
     }, {
       id: 4,
       name: 'command4',
-      command: 'echo 123123123123123123123123123123123123123123'
+      command: 'echo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquid, atque cupiditate doloribus eligendi enim fugiat itaque iusto laborum magnam maiores natus nemo, neque quae, reprehenderit sed ullam voluptatem?'
     }, {
       id: 5,
       name: 'command5',
-      command: 'echo 123123123123123123123123123123123123123123'
+      command: 'echo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquid, atque cupiditate doloribus eligendi enim fugiat itaque iusto laborum magnam maiores natus nemo, neque quae, reprehenderit sed ullam voluptatem?'
     }, {
       id: 6,
       name: 'command6',
-      command: 'echo 123123123123123123123123123123123123123123'
+      command: 'echo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquid, atque cupiditate doloribus eligendi enim fugiat itaque iusto laborum magnam maiores natus nemo, neque quae, reprehenderit sed ullam voluptatem?'
     }]
   });
 
@@ -144,13 +146,24 @@
 
 </script>
 
+
 <style lang="less" scoped>
+  @transform-x: 8px;
+  @drawer-width: 388px;
+  @item-wrapper-p-y: 4px;
+  @item-wrapper-p-x: 12px;
+  @item-p: 8px;
+  @item-width: @drawer-width - @item-wrapper-p-x * 2;
+  @item-width-transform: @item-width + @transform-x;
+  @item-inline-width: @item-width - @item-p * 2;
+
   .snippet-drawer-title {
     font-size: 14px;
   }
 
   .snippet-container {
     position: relative;
+    background: var(--color-bg-2);
     height: 100%;
 
     .snippet-header-container {
@@ -173,21 +186,43 @@
   }
 
   .snippet-item-wrapper {
-    padding: 4px 12px;
+    padding: @item-wrapper-p-y 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    &-expand {
+
+      .snippet-item {
+        width: @item-width-transform !important;
+        background: var(--color-fill-3) !important;
+
+        :hover {
+        }
+
+        .snippet-item-command {
+          color: var(--color-text-1);
+          text-overflow: unset;
+          word-break: break-all;
+          white-space: unset;
+        }
+      }
+    }
 
     .snippet-item {
       display: flex;
       flex-direction: column;
-      padding: 8px;
-      background: var(--color-fill-1);
+      padding: @item-p;
+      background: var(--color-fill-2);
       border-radius: 4px;
       cursor: pointer;
-      transition: transform 0.3s ease;
-      will-change: transform;
+      transition: all 0.2s;
+      width: @item-width;
 
       &:hover {
-        transform: scale(1.02);
-        background: var(--color-fill-2);
+        width: @item-width-transform;
+        background: var(--color-fill-3);
       }
 
       &-title {
@@ -195,6 +230,7 @@
         margin-bottom: 8px;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: @item-inline-width;
       }
 
       &-command {
@@ -203,9 +239,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: pre;
-        word-break: break-all;
+        width: @item-inline-width;
       }
-
     }
   }