refactor(console): show default api tag

packages/console/src/pages/ApiResourceDetails/index.module.scss

@@ -33,7 +33,7 @@
       object-fit: cover;
     }
 
-    .meta {
+    .metadata {
       margin-left: _.unit(6);
       display: flex;
       flex-direction: column;
@@ -43,6 +43,23 @@
         font: var(--font-title-1);
         color: var(--color-text);
       }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: _.unit(1);
+      }
+
+      .text {
+        font: var(--font-label-2);
+        color: var(--color-text-secondary);
+      }
+
+      .verticalBar {
+        @include _.vertical-bar;
+        height: 12px;
+        margin: 0 _.unit(2);
+      }
     }
   }
 

packages/console/src/pages/ApiResourceDetails/index.tsx

@@ -19,6 +19,7 @@ import DeleteConfirmModal from '@/components/DeleteConfirmModal';
 import DetailsPage from '@/components/DetailsPage';
 import PageMeta from '@/components/PageMeta';
 import TabNav, { TabNavItem } from '@/components/TabNav';
+import Tag from '@/components/Tag';
 import { ApiResourceDetailsTabs } from '@/consts/page-tabs';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
@@ -81,9 +82,18 @@ function ApiResourceDetails() {
           <Card className={styles.header}>
             <div className={styles.info}>
               <Icon className={styles.icon} />
-              <div className={styles.meta}>
+              <div className={styles.metadata}>
                 <div className={styles.name}>{data.name}</div>
-                <CopyToClipboard size="small" value={data.indicator} />
+                <div className={styles.row}>
+                  {data.isDefault && (
+                    <>
+                      <Tag>{t('api_resources.default_api')}</Tag>
+                      <div className={styles.verticalBar} />
+                    </>
+                  )}
+                  <div className={styles.text}>API Identifier</div>
+                  <CopyToClipboard size="small" value={data.indicator} />
+                </div>
               </div>
             </div>
             {!isLogtoManagementApiResource && (

packages/console/src/pages/ApiResources/index.tsx

@@ -13,6 +13,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
+import Tag from '@/components/Tag';
 import { defaultPageSize } from '@/consts';
 import { ApiResourceDetailsTabs } from '@/consts/page-tabs';
 import type { RequestError } from '@/hooks/use-api';
@@ -79,11 +80,12 @@ function ApiResources() {
             title: t('api_resources.api_name'),
             dataIndex: 'name',
             colSpan: 6,
-            render: ({ id, name }) => (
+            render: ({ id, name, isDefault }) => (
               <ItemPreview
                 title={name}
                 icon={<ResourceIcon className={styles.icon} />}
                 to={buildDetailsPathname(id)}
+                suffix={isDefault && <Tag>{t('api_resources.default_api')}</Tag>}
               />
             ),
           },

packages/console/src/pages/ApplicationDetails/index.module.scss

@@ -56,7 +56,7 @@
       color: var(--color-text);
     }
 
-    .details {
+    .row {
       white-space: nowrap;
 
       > * {