fix: improve model list layout in ProviderCard (#311)

* fix: add LongCat provider, OpenRouter free models, model list in cards

- Add longcat to PROVIDER_ENV_MAP and PROVIDER_PRESETS
- Add freeOnly param to fetchProviderModels, use for OpenRouter
- Show model list in ProviderCard with count
- Fix qq.ts import.meta.url → __dirname for CJS compat
- Add zh/en i18n keys for model count display

* fix: improve model list layout in ProviderCard

- Change models-list from max-height to fixed height (100px)
- Add align-content: flex-start to prevent vertical spacing
- Optimize gap to 4px vertical, 6px horizontal
- Fix model-tag height to 20px to prevent background stretching
- Use inline-flex for better tag alignment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: idle888 <546806917@qq.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/client/src/components/hermes/models/ProviderCard.vue

@@ -91,6 +91,20 @@ async function handleDelete() {
         <span class="info-label">{{ t('models.baseUrl') }}</span>
         <code class="info-value mono">{{ provider.base_url }}</code>
       </div>
+      <div class="info-row models-row">
+        <span class="info-label">{{ t('models.models') }}</span>
+        <span class="info-value models-count">{{ provider.models.length }} {{ t('models.count') }}</span>
+      </div>
+      <div class="models-list">
+        <span
+          v-for="model in provider.models.slice(0, 20)"
+          :key="model"
+          class="model-tag"
+        >{{ model }}</span>
+        <span v-if="provider.models.length > 20" class="model-tag model-tag-more">
+          +{{ provider.models.length - 20 }} {{ t('models.more') }}
+        </span>
+      </div>
     </div>
 
     <div class="card-actions">
@@ -176,6 +190,47 @@ async function handleDelete() {
   font-size: 12px;
 }
 
+.models-row {
+  margin-top: 4px;
+}
+
+.models-count {
+  color: $text-muted;
+  font-size: 12px;
+}
+
+.models-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  margin-top: 6px;
+  height: 100px;
+  overflow-y: auto;
+  align-content: flex-start;
+}
+
+.model-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  font-size: 10px;
+  font-family: $font-code;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(var(--accent-primary-rgb), 0.08);
+  color: $text-secondary;
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &-more {
+    background: rgba(var(--accent-primary-rgb), 0.15);
+    color: $accent-primary;
+    font-weight: 500;
+  }
+}
+
 .card-actions {
   display: flex;
   gap: 8px;