feat(community): improve styling and layout (#1271)

* feat(community): improve styling and layout

* feat(community): improve styling and layout

---------

Co-authored-by: 申永范-UX <[email protected]>

Author: youngbeom-shin

frontend/src/components/community/CommunityMDTextarea.vue

@@ -2,15 +2,15 @@
   <div class="border border-gray-200 rounded-lg bg-gray-100">
     <div class="flex text-sm rounded-t-lg leading-[22px]">
       <div
-        class="px-5 py-2 rounded-tl-lg whitespace-nowrap border-r"
-        :class="activeTab == 'Edit' ? 'bg-white' : 'border-b'"
+        class="px-5 py-2 rounded-tl-lg whitespace-nowrap border-r text-sm font-medium"
+        :class="activeTab == 'Edit' ? 'bg-white text-brand-700' : 'border-b text-gray-700'"
         @click="activeTab = 'Edit'"
       >
         {{ $t('community.MD.edit') }}
       </div>
       <div
-        class="px-5 py-2 whitespace-nowrap border-r"
-        :class="activeTab == 'Preview' ? 'bg-white' : 'border-b'"
+        class="px-5 py-2 whitespace-nowrap border-r text-sm font-medium"
+        :class="activeTab == 'Preview' ? 'bg-white text-brand-700' : 'border-b text-gray-700'"
         @click="activeTab = 'Preview'"
       >
       {{ $t('community.MD.preview') }}
@@ -28,7 +28,7 @@
                 cols="10"
                 @input="handleInput"
                 v-model="theDesc"
-                class="w-full text-gray-500 text-md mb-2 p-2 border border-gray-300 shadow-xs rounded-md focus:outline-none focus:ring-0.5 focus:border-brand-300"
+                class="w-full text-gray-500 text-sm mb-2 p-2 border border-gray200 rounded-sm focus:outline-none focus:ring-0.5 focus:border-brand-300"
                 :placeholder="placeholder || $t('community.MD.default')"
       ></textarea>
       <div class="flex items-center gap-2 text-gray-500 text-sm leading-5">

frontend/src/components/shared/CodeEditor.vue

@@ -86,10 +86,72 @@ const changeTab = (tabName) => {
   }
 
   :deep(.el-tabs__header) {
-    background-color: #F5F7FA !important;
+    background-color: #F2F4F7 !important;
+    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
   }
 
   :deep(.d2h-file-header) {
-    background-color: #F5F7FA !important;
+    background-color: #F2F4F7 !important;
+  }
+
+  :deep(.el-tabs__nav-scroll) {
+    background-color: #F2F4F7 !important;
+    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
+  }
+
+  :deep(.el-tabs) {
+    border-radius: var(--border-radius-md) !important;
+    border: 1px solid #EAECF0 !important;
+    overflow: hidden !important;
+  }
+
+  /* 确保内容区域也有正确的圆角 */
+  :deep(.el-tabs__content) {
+    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md) !important;
+    background-color: white !important;
+  }
+
+  /* 使用伪元素创建更精确的边框效果 */
+  :deep(.el-tabs) {
+    position: relative !important;
+  }
+
+  :deep(.el-tabs::before) {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid #EAECF0;
+    border-radius: var(--border-radius-md);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /* 确保内部元素不会覆盖边框 */
+  :deep(.el-tabs__header),
+  :deep(.el-tabs__content) {
+    position: relative;
+    z-index: 2;
+  }
+
+  /* 设置标签页字体颜色 */
+  :deep(.el-tabs__item.is-top) {
+    color: #344054 !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+  }
+
+  :deep(.el-tabs__item.is-top:hover) {
+    color: #344054 !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+  }
+
+  :deep(.el-tabs__item.is-top.is-active) {
+    color: #3250BD !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
   }
 </style>

frontend/src/components/shared/EditFile.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-4 my-[30px] md:px-5">
-    <div class="flex items-center gap-[10px]">
-      <div class="whitespace-nowrap">{{ repoName }}</div>
+  <div class="flex flex-col gap-4 my-8 md:px-5">
+    <div class="flex items-center gap-3">
+      <div class="whitespace-nowrap ">{{ repoName }}</div>
       <div class="text-gray-500">/</div>
       <el-input
         v-model="fileName"
@@ -10,7 +10,7 @@
         clearable
         :placeholder="$t('repo.edit.fileName')"
         @input="handleFileNameChange"
-        class="w-full h-[40px] text-gray-500"
+        class="w-full h-10 text-gray-500"
       />
     </div>
     <code-editor
@@ -36,7 +36,7 @@
         show-word-limit
         clearable
         :placeholder="commitTitlePlaceholder"
-        class="w-full h-[40px] text-gray-500"
+        class="w-full h-10 text-gray-500"
       />
     </div>
     <CommunityMDTextarea
@@ -45,13 +45,19 @@
       @inputChange="handleCommentInputChange"
     ></CommunityMDTextarea>
     <div>
-      <el-button
-        type="primary"
-        @click="updateFile"
+      <div class="flex items-center gap-2">
+        <CsgButton
+        class="btn btn-primary btn-md"
+        :name="$t('repo.edit.update')"
         :disabled="!commitValid || submiting"
-        >{{ $t('repo.edit.update') }}</el-button
-      >
-      <el-button @click="cancel">{{ $t('repo.edit.cancel') }}</el-button>
+        @click="updateFile"
+        />
+        <CsgButton
+          class="btn btn-secondary-gray btn-md"
+          :name="$t('repo.edit.cancel')"
+          @click="cancel"
+        />
+      </div>
     </div>
   </div>
 </template>