fix(style): code viewer separator line

seal-io · Mar 6, 2024 · b0233e3 · b0233e3
1 parent 040e825
commit b0233e3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 53 deletions.
diff --git a/config/vite.config.dev.ts b/config/vite.config.dev.ts
@@ -19,7 +19,7 @@ export default mergeConfig(
       },
       https: true,
       port: 5050,
-      proxy: createProxyTable()
+      proxy: createProxyTable('https://lmkcc.site')
     },
     plugins: [
       basicSsl(),

diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
@@ -2,6 +2,7 @@ body {
   --color-white-1: #fff;
   --color-white-2: #fff;
   --color-white-3: #fff;
+  --color-seal-black-1: #000;
   --color-button-close: #fff;
   --color-border-input-disabled: #fff;
   --color-bg-input-disabled: var(--color-fill-1);
@@ -228,6 +229,7 @@ body[arco-theme='dark'] {
   --color-background-2: 21, 21, 21;
   --color-background-3: 52, 62, 76;
   --color-modal-bg: 21, 21, 21;
+  --color-seal-black-1: rgba(255, 255, 255, 0.7);
   --black-1: rgb(var(--color-background-1));
   --black-2: rgb(var(--color-background-2));
   --black-3: rgb(var(--color-background-3));

diff --git a/src/components/code-diff-view/index.vue b/src/components/code-diff-view/index.vue
@@ -71,39 +71,41 @@
                 }
               ]}
             >
-              <CodeChunk
-                class="left chunks"
-                chunks={leftChunks.value}
-                title={props.leftTitle}
-                onCollapse={(item) => {
-                  leftChunks.value[item.leftIndex].collapsed = false;
-                  rightChunks.value[item.rightIndex].collapsed = false;
-                }}
-                v-slots={{
-                  title: ctx.slots.leftTitle
-                    ? () => ctx.slots.leftTitle?.()
-                    : null
-                }}
-              ></CodeChunk>
-              {ctx.slots.sperator ? (
-                () => ctx.slots.sperator?.()
-              ) : (
-                <div class="line"></div>
-              )}
-              <CodeChunk
-                class="right chunks"
-                chunks={rightChunks.value}
-                title={props.leftTitle}
-                onCollapse={(item) => {
-                  leftChunks.value[item.leftIndex].collapsed = false;
-                  rightChunks.value[item.rightIndex].collapsed = false;
-                }}
-                v-slots={{
-                  title: ctx.slots.rightTitle
-                    ? () => ctx.slots.rightTitle?.()
-                    : null
-                }}
-              ></CodeChunk>
+              <div class="main">
+                <CodeChunk
+                  class="left chunks"
+                  chunks={leftChunks.value}
+                  title={props.leftTitle}
+                  onCollapse={(item) => {
+                    leftChunks.value[item.leftIndex].collapsed = false;
+                    rightChunks.value[item.rightIndex].collapsed = false;
+                  }}
+                  v-slots={{
+                    title: ctx.slots.leftTitle
+                      ? () => ctx.slots.leftTitle?.()
+                      : null
+                  }}
+                ></CodeChunk>
+                {ctx.slots.sperator ? (
+                  () => ctx.slots.sperator?.()
+                ) : (
+                  <div class="line"></div>
+                )}
+                <CodeChunk
+                  class="right chunks"
+                  chunks={rightChunks.value}
+                  title={props.leftTitle}
+                  onCollapse={(item) => {
+                    leftChunks.value[item.leftIndex].collapsed = false;
+                    rightChunks.value[item.rightIndex].collapsed = false;
+                  }}
+                  v-slots={{
+                    title: ctx.slots.rightTitle
+                      ? () => ctx.slots.rightTitle?.()
+                      : null
+                  }}
+                ></CodeChunk>
+              </div>
             </div>
           ) : null}
         </>
@@ -133,8 +135,6 @@
 
   .chunk-box {
     position: relative;
-    display: flex;
-    justify-content: space-between;
     overflow: hidden;
     overflow-y: auto;
     font-size: var(--font-size-small);
@@ -144,6 +144,12 @@
       border: 1px solid var(--color-border-2);
     }
 
+    .main {
+      display: flex;
+      justify-content: space-between;
+      height: max-content;
+    }
+
     .line {
       width: 1px;
       border-left: 1px solid var(--color-border-2);

diff --git a/src/views/cli-download/pages/index.vue b/src/views/cli-download/pages/index.vue
@@ -6,22 +6,6 @@
       ></Breadcrumb>
     </BreadWrapper>
     <ComCard>
-      <!-- <div class="wrap">
-        <div class="item" v-for="item in downloadConfig" :key="item.label">
-          <div class="img">
-            <img :src="item.img" alt="" />
-          </div>
-          <span class="type">
-            <span v-for="(val, index) in item.value" :key="val">
-              <a-link>{{ val }}</a-link>
-              <a-divider
-                direction="vertical"
-                v-if="index !== item.value.length - 1"
-              ></a-divider>
-            </span>
-          </span>
-        </div>
-      </div> -->
       <a-descriptions :data="downloadConfig" title="" bordered :column="1">
         <template #value="{ data, value }">
           <a-space :size="12">
@@ -38,7 +22,7 @@
             <span v-if="data.os === 'darwin'">
               <i
                 class="iconfont icon-macos mright-5 size-16"
-                style="color: #000"
+                style="color: var(--color-seal-black-1)"
               ></i>
             </span>
             <span v-if="data.os === 'windows'">