feat(endpoints): Optimize endpoint details page layout and styles (#939)

* feat(endpoints): Optimize endpoint details page layout and styles Added icons, adjusted text size and line height, made the model ID clickable for navigation, and unified container height to be adaptive. * fix(endpoints): Change router-link to anchor tag for model ID navigation * feat(endpoints): Enhance endpoint details page UI with improved icons and styling
OpenCSGs · Feb 12, 2025 · f9ad68b · f9ad68b
1 parent 1b11fd1
commit f9ad68b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/frontend/src/components/endpoints/EndpointPage.vue b/frontend/src/components/endpoints/EndpointPage.vue
@@ -1,53 +1,61 @@
 <template>
   <div class="grid grid-cols-2 md:grid-cols-1 gap-[10px] mt-[20px] md:px-[20px]">
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] h-fit focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
+      <p class="flex justify-start items-center text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        <svg-icon name="admin-menu-cloud" class="w-4 h-4 mr-2" />
         {{ $t('endpoints.detail.endpointUrl') }}
       </p>
-      <p class="w-[390px] lg:w-[370px] md:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <p class="w-[390px] lg:w-[370px] md:w-full h-fit leading-[18px] text-gray-600 text-sm overflow-hidden text-ellipsis line-clamp-1 text-left">
         {{ appEndpoint }}
       </p>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] h-fit focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
+      <p class="flex justify-start items-center text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        <svg-icon name="admin-menu-model" class="w-4 h-4 mr-2" />
         {{ $t('endpoints.detail.modelId') }}
       </p>
-      <p class="w-[390px] lg:w-[370px] md:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <a 
+        :href="`/models/${modelId}`"
+        class="w-[390px] lg:w-[370px] md:w-full h-fit leading-[18px] text-brand-600 hover:text-brand-700 hover:underline text-sm overflow-hidden text-ellipsis line-clamp-1 text-left"
+      >
         {{ modelId }}
-      </p>
+      </a>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] h-fit focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
+      <p class="flex justify-start items-center text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        <svg-icon name="admin-menu-settings" class="w-4 h-4 mr-2" />
         {{ $t('endpoints.detail.parameters') }}
       </p>
-      <div class="flex items-center gap-[8px] w-[390px] lg:w-[370px] md:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <div class="flex items-center gap-[8px] w-[390px] lg:w-[370px] md:w-full h-fit leading-[18px] text-gray-600 text-sm overflow-hidden text-ellipsis line-clamp-1 text-left">
         <div v-if="private" class="border border-gray-300 bg-white px-2 py-[3px] text-center text-xs font-normal text-gray-700 rounded-sm">
           {{ $t("all.private") }}
         </div>
-        <div class="flex gap-[4px]">
+        <div class="flex text-sm text-gray-600 gap-[4px]">
           <span>{{ $t('endpoints.detail.currentEndpointReplica')}}</span>
           <span>:</span>
           <span>{{ endpointReplica }}</span>
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
-        <span>{{ $t('endpoints.detail.cloudResource')}}</span>
+    <div class="flex flex-col gap-[8px] h-fit focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
+      <p class="flex justify-start items-center text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        <svg-icon name="finetune_cpu_icon" class="w-4 h-4 mr-2" />
+        {{ $t('endpoints.detail.cloudResource')}}
       </p>
-      <p class="w-[390px] lg:w-[370px] md:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <p class="w-[390px] lg:w-[370px] md:w-full h-fit leading-[18px] text-gray-600 text-sm overflow-hidden text-ellipsis line-clamp-1 text-left">
         {{ resource.name }}
       </p>
     </div>
 
-    <div v-if="replicaList?.length" class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div v-if="replicaList?.length" class="flex flex-col gap-[8px] h-fit focus:outline focus:outline-4 focus:outline-gray-200 p-4 md:w-full border border-gray-200 rounded-xl">
+      <p class="flex justify-start items-center text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+        <svg-icon name="evaluation_new" class="w-4 h-4 mr-2" />
         {{ $t('endpoints.detail.endpointStatus') }}
       </p>
       <p class="w-[420px] lg:w-[370px] md:w-full leading-[18px] text-gray-500 text-xs text-left">
         <p v-for="(replica, index) in replicaList" :key="index">
-          <span class="text-gray-700 font-medium mr-2">{{ replica.name }}:</span>
-          <span class="text-gray-500 font-medium">{{ replica.status }}</span>
+          <span class="text-gray-600 text-sm mr-2">{{ replica.name }}:</span>
+          <span class="text-gray-600 text-sm">{{ replica.status }}</span>
         </p>
       </p>
     </div>

diff --git a/frontend/src/locales/zh_js/endpoints.js b/frontend/src/locales/zh_js/endpoints.js
@@ -8,7 +8,7 @@ export const endpoints = {
     modelId: '模型 ID',
     parameters: '参数项',
     currentEndpointReplica: '当前弹性实例',
-    cloudResource: '资源',
+    cloudResource: '资源配置',
     endpointStatus: '实例状态'
   },
   new: {