diff --git a/backend/internal/handler/available_channel_handler.go b/backend/internal/handler/available_channel_handler.go
index 8982b80defc..e15a742f818 100644
--- a/backend/internal/handler/available_channel_handler.go
+++ b/backend/internal/handler/available_channel_handler.go
@@ -53,12 +53,15 @@ func (h *AvailableChannelHandler) featureEnabled(c *gin.Context) bool {
 // 订阅视觉加深），并用 RateMultiplier 作为默认倍率；用户专属倍率前端走
 // /groups/rates，和 API 密钥页面保持一致。
 type userAvailableGroup struct {
-	ID               int64   `json:"id"`
-	Name             string  `json:"name"`
-	Platform         string  `json:"platform"`
-	SubscriptionType string  `json:"subscription_type"`
-	RateMultiplier   float64 `json:"rate_multiplier"`
-	IsExclusive      bool    `json:"is_exclusive"`
+	ID               int64    `json:"id"`
+	Name             string   `json:"name"`
+	Platform         string   `json:"platform"`
+	SubscriptionType string   `json:"subscription_type"`
+	RateMultiplier   float64  `json:"rate_multiplier"`
+	IsExclusive      bool     `json:"is_exclusive"`
+	ImagePrice1K     *float64 `json:"image_price_1k"`
+	ImagePrice2K     *float64 `json:"image_price_2k"`
+	ImagePrice4K     *float64 `json:"image_price_4k"`
 }
 
 // userSupportedModelPricing 用户可见的定价字段白名单。
@@ -219,6 +222,9 @@ func filterUserVisibleGroups(
 			SubscriptionType: g.SubscriptionType,
 			RateMultiplier:   g.RateMultiplier,
 			IsExclusive:      g.IsExclusive,
+			ImagePrice1K:     g.ImagePrice1K,
+			ImagePrice2K:     g.ImagePrice2K,
+			ImagePrice4K:     g.ImagePrice4K,
 		})
 	}
 	return visible
diff --git a/backend/internal/service/channel_available.go b/backend/internal/service/channel_available.go
index d2d24659a1a..86fd31d171b 100644
--- a/backend/internal/service/channel_available.go
+++ b/backend/internal/service/channel_available.go
@@ -19,6 +19,9 @@ type AvailableGroupRef struct {
 	SubscriptionType string
 	RateMultiplier   float64
 	IsExclusive      bool
+	ImagePrice1K     *float64
+	ImagePrice2K     *float64
+	ImagePrice4K     *float64
 }
 
 // AvailableChannel 可用渠道视图：用于「可用渠道」页面展示渠道基础信息 +
@@ -34,6 +37,10 @@ type AvailableChannel struct {
 	SupportedModels    []SupportedModel
 }
 
+type channelAccountMappingModelLister interface {
+	ListAccountMappingModelsByGroupIDs(ctx context.Context, groupIDs []int64) (map[int64][]string, error)
+}
+
 // ListAvailable 返回所有渠道的可用视图：每个渠道附带关联分组信息与支持模型列表。
 //
 // 支持模型通过 (*Channel).SupportedModels() 计算（mapping ∪ pricing 并联）。
@@ -56,6 +63,7 @@ func (s *ChannelService) ListAvailable(ctx context.Context) ([]AvailableChannel,
 		return nil, fmt.Errorf("list active groups: %w", err)
 	}
 	groupByID := make(map[int64]AvailableGroupRef, len(groups))
+	groupModelsListByID := make(map[int64]GroupModelsListConfig, len(groups))
 	for i := range groups {
 		g := groups[i]
 		groupByID[g.ID] = AvailableGroupRef{
@@ -65,15 +73,32 @@ func (s *ChannelService) ListAvailable(ctx context.Context) ([]AvailableChannel,
 			SubscriptionType: g.SubscriptionType,
 			RateMultiplier:   g.RateMultiplier,
 			IsExclusive:      g.IsExclusive,
+			ImagePrice1K:     g.ImagePrice1K,
+			ImagePrice2K:     g.ImagePrice2K,
+			ImagePrice4K:     g.ImagePrice4K,
+		}
+		groupModelsListByID[g.ID] = g.ModelsListConfig
+	}
+
+	accountMappedModelsByGroupID := map[int64][]string{}
+	if lister, ok := s.repo.(channelAccountMappingModelLister); ok {
+		groupIDs := collectActiveGroupIDs(groupByID)
+		if len(groupIDs) > 0 {
+			accountMappedModelsByGroupID, err = lister.ListAccountMappingModelsByGroupIDs(ctx, groupIDs)
+			if err != nil {
+				return nil, fmt.Errorf("list account mapping models: %w", err)
+			}
 		}
 	}
 
 	out := make([]AvailableChannel, 0, len(channels))
+	channelLinkedGroupIDs := make(map[int64]struct{}, len(groupByID))
 	for i := range channels {
 		ch := &channels[i]
 		groups := make([]AvailableGroupRef, 0, len(ch.GroupIDs))
 		for _, gid := range ch.GroupIDs {
 			if ref, ok := groupByID[gid]; ok {
+				channelLinkedGroupIDs[gid] = struct{}{}
 				groups = append(groups, ref)
 			}
 		}
@@ -82,6 +107,9 @@ func (s *ChannelService) ListAvailable(ctx context.Context) ([]AvailableChannel,
 		ch.normalizeBillingModelSource()
 
 		supported := ch.SupportedModels()
+		if !ch.RestrictModels {
+			supported = appendAccountMappedSupportedModels(supported, groups, accountMappedModelsByGroupID)
+		}
 		s.fillGlobalPricingFallback(supported)
 
 		out = append(out, AvailableChannel{
@@ -95,6 +123,7 @@ func (s *ChannelService) ListAvailable(ctx context.Context) ([]AvailableChannel,
 			SupportedModels:    supported,
 		})
 	}
+	out = append(out, s.buildDirectGroupAvailableChannels(groupByID, groupModelsListByID, channelLinkedGroupIDs, accountMappedModelsByGroupID)...)
 
 	sort.SliceStable(out, func(i, j int) bool {
 		return strings.ToLower(out[i].Name) < strings.ToLower(out[j].Name)
@@ -102,6 +131,106 @@ func (s *ChannelService) ListAvailable(ctx context.Context) ([]AvailableChannel,
 	return out, nil
 }
 
+func collectActiveGroupIDs(groupByID map[int64]AvailableGroupRef) []int64 {
+	groupIDs := make([]int64, 0, len(groupByID))
+	for id := range groupByID {
+		groupIDs = append(groupIDs, id)
+	}
+	sort.Slice(groupIDs, func(i, j int) bool { return groupIDs[i] < groupIDs[j] })
+	return groupIDs
+}
+
+func (s *ChannelService) buildDirectGroupAvailableChannels(
+	groupByID map[int64]AvailableGroupRef,
+	groupModelsListByID map[int64]GroupModelsListConfig,
+	channelLinkedGroupIDs map[int64]struct{},
+	mappedByGroupID map[int64][]string,
+) []AvailableChannel {
+	out := make([]AvailableChannel, 0)
+	groupIDs := collectActiveGroupIDs(groupByID)
+	for _, groupID := range groupIDs {
+		if _, linked := channelLinkedGroupIDs[groupID]; linked {
+			continue
+		}
+		group := groupByID[groupID]
+		models := directGroupSupportedModels(group, groupModelsListByID[groupID], mappedByGroupID[groupID])
+		if len(models) == 0 {
+			continue
+		}
+		s.fillGlobalPricingFallback(models)
+		out = append(out, AvailableChannel{
+			ID:              -groupID,
+			Name:            group.Name,
+			Description:     "分组直连",
+			Status:          StatusActive,
+			RestrictModels:  groupModelsListByID[groupID].Enabled,
+			Groups:          []AvailableGroupRef{group},
+			SupportedModels: models,
+		})
+	}
+	return out
+}
+
+func directGroupSupportedModels(group AvailableGroupRef, cfg GroupModelsListConfig, mappedModels []string) []SupportedModel {
+	modelNames := mappedModels
+	if cfg.Enabled && len(cfg.Models) > 0 {
+		modelNames = cfg.Models
+	}
+	seen := make(map[string]struct{}, len(modelNames))
+	out := make([]SupportedModel, 0, len(modelNames))
+	for _, model := range modelNames {
+		name := strings.TrimSpace(model)
+		if name == "" {
+			continue
+		}
+		key := strings.ToLower(name)
+		if _, ok := seen[key]; ok {
+			continue
+		}
+		seen[key] = struct{}{}
+		out = append(out, SupportedModel{Name: name, Platform: group.Platform})
+	}
+	sort.SliceStable(out, func(i, j int) bool { return strings.ToLower(out[i].Name) < strings.ToLower(out[j].Name) })
+	return out
+}
+
+func appendAccountMappedSupportedModels(supported []SupportedModel, groups []AvailableGroupRef, mappedByGroupID map[int64][]string) []SupportedModel {
+	if len(groups) == 0 || len(mappedByGroupID) == 0 {
+		return supported
+	}
+	type modelKey struct {
+		platform string
+		model    string
+	}
+	seen := make(map[modelKey]struct{}, len(supported))
+	for _, model := range supported {
+		seen[modelKey{platform: model.Platform, model: strings.ToLower(model.Name)}] = struct{}{}
+	}
+	out := append([]SupportedModel(nil), supported...)
+	for _, group := range groups {
+		models := mappedByGroupID[group.ID]
+		for _, model := range models {
+			name := strings.TrimSpace(model)
+			if name == "" {
+				continue
+			}
+			key := modelKey{platform: group.Platform, model: strings.ToLower(name)}
+			if _, ok := seen[key]; ok {
+				continue
+			}
+			seen[key] = struct{}{}
+			out = append(out, SupportedModel{Name: name, Platform: group.Platform})
+		}
+	}
+	sort.SliceStable(out, func(i, j int) bool {
+		if out[i].Platform != out[j].Platform {
+			return out[i].Platform < out[j].Platform
+		}
+		return strings.ToLower(out[i].Name) < strings.ToLower(out[j].Name)
+	})
+	return out
+}
+
 // fillGlobalPricingFallback 对未命中渠道定价的支持模型，从全局 LiteLLM 数据合成一份
 // 展示用定价。仅用于「可用渠道」展示，不影响真实计费链路。
 //
@@ -119,6 +248,10 @@ func (s *ChannelService) fillGlobalPricingFallback(models []SupportedModel) {
 			continue
 		}
 		lp := s.pricingService.GetModelPricing(models[i].Name)
+		if lp == nil && isOpenAIImageGenerationModel(models[i].Name) {
+			models[i].Pricing = synthesizeDefaultImagePricing(models[i].Pricing)
+			continue
+		}
 		if lp == nil {
 			continue
 		}
@@ -171,12 +304,17 @@ func synthesizePricingFromLiteLLM(lp *LiteLLMModelPricing, existing *ChannelMode
 	}
 
 	if mode == BillingModeImage || mode == BillingModePerRequest {
+		perRequestPrice := nonZeroPtr(lp.OutputCostPerImage)
+		if mode == BillingModeImage && perRequestPrice == nil {
+			perRequestPrice = availableFloat64Ptr(defaultImagePrice1K)
+		}
 		return &ChannelModelPricing{
 			BillingMode:      mode,
-			PerRequestPrice:  nonZeroPtr(lp.OutputCostPerImage),
+			PerRequestPrice:  perRequestPrice,
 			ImageOutputPrice: nonZeroPtr(lp.OutputCostPerImageToken),
 			InputPrice:       nonZeroPtr(lp.InputCostPerToken),
 			OutputPrice:      nonZeroPtr(lp.OutputCostPerToken),
+			Intervals:        synthesizeImagePriceTiers(mode, perRequestPrice),
 		}
 	}
 	return &ChannelModelPricing{
@@ -189,9 +327,42 @@ func synthesizePricingFromLiteLLM(lp *LiteLLMModelPricing, existing *ChannelMode
 	}
 }
 
+const defaultImagePrice1K = 0.134
+
+func synthesizeDefaultImagePricing(existing *ChannelModelPricing) *ChannelModelPricing {
+	mode := BillingModeImage
+	if existing != nil && existing.BillingMode != "" {
+		mode = existing.BillingMode
+	}
+	base := availableFloat64Ptr(defaultImagePrice1K)
+	return &ChannelModelPricing{
+		BillingMode:     mode,
+		PerRequestPrice: base,
+		Intervals:       synthesizeImagePriceTiers(mode, base),
+	}
+}
+
 func nonZeroPtr(v float64) *float64 {
 	if v == 0 {
 		return nil
 	}
 	return &v
 }
+
+func availableFloat64Ptr(v float64) *float64 {
+	return &v
+}
+
+func synthesizeImagePriceTiers(mode BillingMode, base *float64) []PricingInterval {
+	if mode != BillingModeImage || base == nil {
+		return nil
+	}
+	price1K := *base
+	price2K := price1K * 1.5
+	price4K := price1K * 2
+	return []PricingInterval{
+		{TierLabel: "1K", PerRequestPrice: &price1K, SortOrder: 1},
+		{TierLabel: "2K", PerRequestPrice: &price2K, SortOrder: 2},
+		{TierLabel: "4K", PerRequestPrice: &price4K, SortOrder: 3},
+	}
+}
diff --git a/backend/internal/service/channel_available_test.go b/backend/internal/service/channel_available_test.go
index d59e587ecd5..8f058382544 100644
--- a/backend/internal/service/channel_available_test.go
+++ b/backend/internal/service/channel_available_test.go
@@ -176,6 +176,80 @@ func TestListAvailable_DefaultsEmptyBillingModelSource(t *testing.T) {
 	require.Equal(t, BillingModelSourceUpstream, byName["explicit"])
 }
 
+func TestListAvailable_AppendsAccountMappedModelsWhenChannelIsUnrestricted(t *testing.T) {
+	channels := []Channel{{
+		ID:             1,
+		Name:           "open-channel",
+		Status:         StatusActive,
+		RestrictModels: false,
+		GroupIDs:       []int64{10},
+		ModelPricing: []ChannelModelPricing{{
+			Platform:    "anthropic",
+			Models:      []string{"claude-sonnet-4-6"},
+			BillingMode: BillingModeToken,
+			InputPrice:  testPtrFloat64(1e-6),
+		}},
+	}}
+	repo := &mockChannelRepository{
+		listAllFn: func(ctx context.Context) ([]Channel, error) { return channels, nil },
+		listAccountMappingModelsByGroupIDsFn: func(ctx context.Context, groupIDs []int64) (map[int64][]string, error) {
+			require.ElementsMatch(t, []int64{10}, groupIDs)
+			return map[int64][]string{
+				10: {"claude-opus-4-5", "claude-sonnet-4-6"},
+			}, nil
+		},
+	}
+	groupRepo := &stubGroupRepoForAvailable{
+		activeGroups: []Group{{ID: 10, Name: "anthropic-go", Platform: "anthropic"}},
+	}
+	svc := NewChannelService(repo, groupRepo, nil, nil)
+
+	out, err := svc.ListAvailable(context.Background())
+	require.NoError(t, err)
+	require.Len(t, out, 1)
+
+	byName := make(map[string]SupportedModel)
+	for _, model := range out[0].SupportedModels {
+		byName[model.Name] = model
+	}
+	require.Contains(t, byName, "claude-sonnet-4-6")
+	require.NotNil(t, byName["claude-sonnet-4-6"].Pricing, "channel pricing keeps priority")
+	require.Contains(t, byName, "claude-opus-4-5")
+	require.Equal(t, "anthropic", byName["claude-opus-4-5"].Platform)
+	require.Len(t, out[0].SupportedModels, 2, "mapped duplicate should not be added twice")
+}
+
+func TestListAvailable_DoesNotAppendAccountMappedModelsWhenChannelRestrictsModels(t *testing.T) {
+	channels := []Channel{{
+		ID:             1,
+		Name:           "restricted-channel",
+		Status:         StatusActive,
+		RestrictModels: true,
+		GroupIDs:       []int64{10},
+		ModelPricing: []ChannelModelPricing{{
+			Platform:    "anthropic",
+			Models:      []string{"claude-sonnet-4-6"},
+			BillingMode: BillingModeToken,
+		}},
+	}}
+	repo := &mockChannelRepository{
+		listAllFn: func(ctx context.Context) ([]Channel, error) { return channels, nil },
+		listAccountMappingModelsByGroupIDsFn: func(ctx context.Context, groupIDs []int64) (map[int64][]string, error) {
+			return map[int64][]string{10: {"claude-opus-4-5"}}, nil
+		},
+	}
+	groupRepo := &stubGroupRepoForAvailable{
+		activeGroups: []Group{{ID: 10, Name: "anthropic-go", Platform: "anthropic"}},
+	}
+	svc := NewChannelService(repo, groupRepo, nil, nil)
+
+	out, err := svc.ListAvailable(context.Background())
+	require.NoError(t, err)
+	require.Len(t, out, 1)
+	require.Len(t, out[0].SupportedModels, 1)
+	require.Equal(t, "claude-sonnet-4-6", out[0].SupportedModels[0].Name)
+}
+
 func TestPricingNeedsFallback(t *testing.T) {
 	tests := []struct {
 		name string
@@ -221,13 +295,19 @@ func TestSynthesizePricingFromLiteLLM_ImageGenerationMode(t *testing.T) {
 	// LiteLLM mode=image_generation 且渠道未声明模式时，按 image 合成。
 	lp := &LiteLLMModelPricing{
 		Mode:                    "image_generation",
+		OutputCostPerImage:      0.134,
 		OutputCostPerImageToken: 4e-5,
 	}
 	got := synthesizePricingFromLiteLLM(lp, nil)
 	require.NotNil(t, got)
 	require.Equal(t, BillingModeImage, got.BillingMode)
-	require.Nil(t, got.PerRequestPrice)
+	require.NotNil(t, got.PerRequestPrice)
+	require.InDelta(t, 0.134, *got.PerRequestPrice, 1e-12)
 	require.NotNil(t, got.ImageOutputPrice)
+	require.Len(t, got.Intervals, 3)
+	require.Equal(t, "2K", got.Intervals[1].TierLabel)
+	require.NotNil(t, got.Intervals[1].PerRequestPrice)
+	require.InDelta(t, 0.201, *got.Intervals[1].PerRequestPrice, 1e-12)
 }
 
 func TestSynthesizePricingFromLiteLLM_RespectsExistingChannelMode(t *testing.T) {
@@ -286,6 +366,34 @@ func TestFillGlobalPricingFallback_EmptyPricingFillsFromLiteLLM(t *testing.T) {
 	require.Equal(t, BillingModeImage, models[0].Pricing.BillingMode)
 	require.NotNil(t, models[0].Pricing.ImageOutputPrice)
 	require.InDelta(t, 4e-5, *models[0].Pricing.ImageOutputPrice, 1e-12)
+	require.NotNil(t, models[0].Pricing.PerRequestPrice)
+	require.InDelta(t, 0.134, *models[0].Pricing.PerRequestPrice, 1e-12)
+	require.Len(t, models[0].Pricing.Intervals, 3)
+	require.Equal(t, "4K", models[0].Pricing.Intervals[2].TierLabel)
+	require.NotNil(t, models[0].Pricing.Intervals[2].PerRequestPrice)
+	require.InDelta(t, 0.268, *models[0].Pricing.Intervals[2].PerRequestPrice, 1e-12)
+}
+
+func TestFillGlobalPricingFallback_OpenAIImageWithoutLiteLLMUsesDefaultImagePrice(t *testing.T) {
+	pricingSvc := newStubPricingServiceFromMap(map[string]*LiteLLMModelPricing{})
+	svc := &ChannelService{pricingService: pricingSvc}
+
+	models := []SupportedModel{
+		{
+			Name:     "gpt-image-2-2K",
+			Platform: "openai",
+			Pricing:  &ChannelModelPricing{BillingMode: BillingModeImage},
+		},
+	}
+	svc.fillGlobalPricingFallback(models)
+	require.NotNil(t, models[0].Pricing)
+	require.Equal(t, BillingModeImage, models[0].Pricing.BillingMode)
+	require.NotNil(t, models[0].Pricing.PerRequestPrice)
+	require.InDelta(t, 0.134, *models[0].Pricing.PerRequestPrice, 1e-12)
+	require.Len(t, models[0].Pricing.Intervals, 3)
+	require.Equal(t, "2K", models[0].Pricing.Intervals[1].TierLabel)
+	require.NotNil(t, models[0].Pricing.Intervals[1].PerRequestPrice)
+	require.InDelta(t, 0.201, *models[0].Pricing.Intervals[1].PerRequestPrice, 1e-12)
 }
 
 func TestFillGlobalPricingFallback_KeepsExistingPrice(t *testing.T) {
diff --git a/frontend/src/api/channels.ts b/frontend/src/api/channels.ts
index 8962af2c4d8..3aeeafe2d8e 100644
--- a/frontend/src/api/channels.ts
+++ b/frontend/src/api/channels.ts
@@ -16,6 +16,9 @@ export interface UserAvailableGroup {
   rate_multiplier: number
   /** true = 专属分组（小范围授权）；false = 公开分组。 */
   is_exclusive: boolean
+  image_price_1k?: number | null
+  image_price_2k?: number | null
+  image_price_4k?: number | null
 }
 
 export interface UserPricingInterval {
diff --git a/frontend/src/components/channels/AvailableChannelsTable.vue b/frontend/src/components/channels/AvailableChannelsTable.vue
index 5b9c0eba207..c9ad0fb3cd4 100644
--- a/frontend/src/components/channels/AvailableChannelsTable.vue
+++ b/frontend/src/components/channels/AvailableChannelsTable.vue
@@ -1,159 +1,296 @@
 <template>
-  <div class="card overflow-hidden">
-    <table class="w-full table-fixed border-collapse text-sm">
-      <thead>
-        <tr class="border-b border-gray-100 bg-gray-50/50 text-xs font-medium uppercase tracking-wide text-gray-500 dark:border-dark-700 dark:bg-dark-800/50 dark:text-gray-400">
-          <th class="w-[180px] px-4 py-3 text-center">{{ columns.name }}</th>
-          <th class="w-[200px] px-4 py-3 text-left">{{ columns.description }}</th>
-          <th class="w-[140px] px-4 py-3 text-left">{{ columns.platform }}</th>
-          <th class="px-4 py-3 text-left">{{ columns.groups }}</th>
-          <th class="px-4 py-3 text-left">{{ columns.supportedModels }}</th>
-        </tr>
-      </thead>
-      <tbody v-if="loading">
-        <tr>
-          <td colspan="5" class="py-10 text-center">
-            <Icon name="refresh" size="lg" class="inline-block animate-spin text-gray-400" />
-          </td>
-        </tr>
-      </tbody>
-      <tbody v-else-if="rows.length === 0">
-        <tr>
-          <td colspan="5" class="py-12 text-center">
-            <Icon name="inbox" size="xl" class="mx-auto mb-3 h-12 w-12 text-gray-400" />
-            <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
-          </td>
-        </tr>
-      </tbody>
-      <!-- 每个渠道一个 tbody：首行 td rowspan 渠道名，后续行只渲染其余三列。
-           tbody 之间强分隔线表达"渠道边界"，tbody 内部用淡分隔线区分平台。 -->
-      <tbody
-        v-else
-        v-for="(channel, chIdx) in rows"
-        :key="`${channel.name}-${chIdx}`"
-        class="border-b-2 border-gray-200 last:border-b-0 dark:border-dark-600"
-      >
-        <tr
-          v-for="(section, secIdx) in channel.platforms"
-          :key="`${channel.name}-${section.platform}`"
-          class="transition-colors hover:bg-gray-50/40 dark:hover:bg-dark-800/40"
-          :class="{ 'border-t border-gray-100/70 dark:border-dark-700/50': secIdx > 0 }"
+  <div class="available-models-shell">
+    <div v-if="loading" class="empty-state">
+      <Icon name="refresh" size="lg" class="inline-block animate-spin text-gray-400" />
+    </div>
+
+    <div v-else-if="rows.length === 0" class="empty-state">
+      <Icon name="inbox" size="xl" class="mx-auto mb-3 h-12 w-12 text-gray-400" />
+      <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
+    </div>
+
+    <div v-else class="model-page-grid">
+      <aside class="channel-tabs-shell">
+        <div class="section-eyebrow">{{ viewModeLabel }}</div>
+        <button
+          v-for="tabItem in sidebarTabs"
+          :key="tabItem.key"
+          type="button"
+          class="group-tab"
+          :class="{ active: tabItem.key === activeTabKey }"
+          @click="selectTab(tabItem.key)"
         >
-          <!-- 渠道名：只在第一行渲染并用 rowspan 纵向合并 -->
-          <td
-            v-if="secIdx === 0"
-            :rowspan="channel.platforms.length"
-            class="px-4 py-3 text-center align-middle font-medium text-gray-900 dark:text-white"
-          >
-            {{ channel.name }}
-          </td>
-
-          <!-- 描述：独立一列，同样用 rowspan 纵向合并 -->
-          <td
-            v-if="secIdx === 0"
-            :rowspan="channel.platforms.length"
-            class="px-4 py-3 align-middle text-xs text-gray-500 dark:text-gray-400"
-          >
-            <template v-if="channel.description">{{ channel.description }}</template>
-            <span v-else class="text-gray-400">-</span>
-          </td>
-
-          <!-- 平台徽章 -->
-          <td class="align-top px-4 py-3">
+          <span class="group-tab-top">
             <span
-              :class="[
-                'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium uppercase',
-                platformBadgeClass(section.platform),
-              ]"
+              class="group-name-pill"
+              :class="platformPillClass(tabItem.platform)"
             >
-              <PlatformIcon :platform="section.platform as GroupPlatform" size="xs" />
-              {{ section.platform }}
+              <PlatformIcon :platform="tabItem.platform as GroupPlatform" size="sm" />
+              <span class="truncate">{{ tabItem.name }}</span>
             </span>
-          </td>
-
-          <!-- 分组：专属分组在前（紫色 shield 行），公开分组在后（灰色 globe 行）。 -->
-          <td class="align-top px-4 py-3">
-            <div class="flex flex-col gap-1.5">
-              <div
-                v-if="exclusiveGroups(section).length > 0"
-                class="flex flex-wrap items-center gap-1.5"
-              >
-                <span
-                  class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-purple-600 dark:text-purple-400"
-                  :title="t('availableChannels.exclusiveTooltip')"
-                >
-                  <Icon name="shield" size="xs" class="h-3 w-3" />
-                  {{ t('availableChannels.exclusive') }}
-                </span>
-                <GroupBadge
-                  v-for="g in exclusiveGroups(section)"
-                  :key="`ex-${g.id}`"
-                  :name="g.name"
-                  :platform="g.platform as GroupPlatform"
-                  :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
-                  :rate-multiplier="g.rate_multiplier"
-                  :user-rate-multiplier="userGroupRates[g.id] ?? null"
-                  always-show-rate
-                />
+            <span class="rate-badge" :class="platformPillClass(tabItem.platform)">
+              {{ formatRate(tabItem.rateMultiplier) }} 倍率
+            </span>
+          </span>
+          <span class="group-desc">{{ tabItem.description }}</span>
+          <span class="group-tab-meta">
+            <span class="mini-badge">{{ tabItem.modelCount }} 模型</span>
+            <span class="mini-badge">{{ tabItem.accountCount }} 账号</span>
+            <span v-if="tabItem.channelCount > 0" class="mini-badge">{{ tabItem.channelCount }} 渠道</span>
+          </span>
+        </button>
+      </aside>
+
+      <section class="content-shell">
+        <div v-if="activeTab" class="content-head">
+          <div class="content-title-row">
+            <div class="content-icon" :class="platformPillClass(activeTab.platform)">
+              <PlatformIcon :platform="activeTab.platform as GroupPlatform" size="lg" />
+            </div>
+            <div class="content-title-copy">
+              <div class="content-heading-line">
+                <h2>{{ activeTab.name }}</h2>
+                <div class="mobile-group-filter">
+                  <button
+                    type="button"
+                    class="mobile-filter-btn"
+                    :aria-expanded="mobileGroupDropdownOpen"
+                    @click.stop="mobileGroupDropdownOpen = !mobileGroupDropdownOpen"
+                  >
+                    <Icon name="filter" size="sm" />
+                    <span>筛选</span>
+                    <Icon name="chevronDown" size="xs" />
+                  </button>
+                  <div v-if="mobileGroupDropdownOpen" class="mobile-filter-menu">
+                    <button
+                      v-for="tabItem in sidebarTabs"
+                      :key="`mobile-${tabItem.key}`"
+                      type="button"
+                      class="mobile-filter-item"
+                      :class="{ active: tabItem.key === activeTabKey }"
+                      @click="selectTab(tabItem.key)"
+                    >
+                      <span class="mobile-filter-item-main">
+                        <PlatformIcon :platform="tabItem.platform as GroupPlatform" size="xs" />
+                        <span>{{ tabItem.name }}</span>
+                      </span>
+                      <span class="mobile-filter-item-meta">
+                        {{ formatRate(tabItem.rateMultiplier) }} · {{ tabItem.modelCount }} 模型
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
-              <div
-                v-if="publicGroups(section).length > 0"
-                class="flex flex-wrap items-center gap-1.5"
-              >
-                <span
-                  class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-gray-500 dark:text-gray-400"
-                  :title="t('availableChannels.publicTooltip')"
-                >
-                  <Icon name="globe" size="xs" class="h-3 w-3" />
-                  {{ t('availableChannels.public') }}
+              <p class="content-meta-line">
+                {{ activeTab.platform }} · {{ activeTab.subscriptionType || 'standard' }} ·
+                {{ activeTab.isExclusive ? '专属' : '公开' }} · {{ formatRate(activeTab.rateMultiplier) }}
+              </p>
+              <p class="content-desc">
+                {{ activeTab.description }}
+              </p>
+              <div class="content-tags">
+                <span class="mini-badge">
+                  <PlatformIcon :platform="activeTab.platform as GroupPlatform" size="xs" />
+                  {{ activeTab.platform }}
+                </span>
+                <span class="mini-badge">
+                  <PlatformIcon :platform="activeTab.platform as GroupPlatform" size="xs" />
+                  {{ activeTab.subscriptionType || 'standard' }}
+                </span>
+                <span class="mini-badge">
+                  <PlatformIcon :platform="activeTab.platform as GroupPlatform" size="xs" />
+                  {{ activeTab.isExclusive ? '专属分组' : '公开分组' }}
                 </span>
-                <GroupBadge
-                  v-for="g in publicGroups(section)"
-                  :key="`pub-${g.id}`"
-                  :name="g.name"
-                  :platform="g.platform as GroupPlatform"
-                  :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
-                  :rate-multiplier="g.rate_multiplier"
-                  :user-rate-multiplier="userGroupRates[g.id] ?? null"
-                  always-show-rate
-                />
               </div>
-              <span v-if="section.groups.length === 0" class="text-xs text-gray-400">-</span>
             </div>
-          </td>
-
-          <!-- 支持模型 -->
-          <td class="align-top px-4 py-3">
-            <div class="flex flex-wrap gap-1">
-              <SupportedModelChip
-                v-for="m in section.supported_models"
-                :key="`${section.platform}-${m.name}`"
-                :model="m"
-                :pricing-key-prefix="pricingKeyPrefix"
-                :no-pricing-label="noPricingLabel"
-                :show-platform="false"
-                :platform-hint="section.platform"
-              />
-              <span v-if="section.supported_models.length === 0" class="text-xs text-gray-400">
-                {{ noModelsLabel }}
-              </span>
+          </div>
+          <div class="content-side">
+            <div class="kpi">
+              <div class="value">{{ activeTab.modelCount }}</div>
+              <div class="subvalue">模型</div>
+            </div>
+            <div class="kpi">
+              <div class="value">{{ activeTab.accountCount }}</div>
+              <div class="subvalue">账号</div>
             </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+          </div>
+        </div>
+
+        <template
+          v-for="section in activeTab?.sections || []"
+          :key="`${activeTab?.key}-${section.key}`"
+        >
+          <div class="section-title">
+            <span>{{ section.title }}</span>
+            <span>{{ section.supported_models.length }} models</span>
+          </div>
+          <div v-if="section.supported_models.length > 0" class="model-card-grid">
+            <article
+              v-for="m in section.supported_models"
+              :key="`${section.key}-${m.name}`"
+              class="model-card"
+              :class="{ 'unit-priced-model-card': isUnitPricedModel(m) }"
+            >
+              <div class="model-header">
+                <div class="model-title-row">
+                  <div class="model-avatar">
+                    <ModelIcon :model="m.name" size="26px" />
+                  </div>
+                  <div class="min-w-0">
+                    <h3 class="model-name">{{ m.name }}</h3>
+                    <div class="model-tags">
+                      <span class="mini-badge">{{ m.platform || section.platform }}</span>
+                      <span class="mini-badge">{{ m.pricing?.billing_mode || 'token' }}</span>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  class="copy-btn"
+                  type="button"
+                  :title="copiedModel === m.name ? '已复制' : '复制 ID'"
+                  :aria-label="copiedModel === m.name ? '已复制' : '复制 ID'"
+                  @click="copyModelId(m.name)"
+                >
+                  <Icon :name="copiedModel === m.name ? 'check' : 'copy'" size="sm" />
+                </button>
+              </div>
+              <div v-if="isUnitPricedModel(m)" class="price-grid unit-price-grid">
+                <div class="price-box unit-price-box">
+                  <div class="label unit-price-label">
+                    <span>{{ unitPriceTitle(m) }}</span>
+                    <span
+                      v-for="entry in unitPriceEntries(m)"
+                      :key="entry.label"
+                      class="tier-label"
+                    >
+                      {{ entry.label }}
+                    </span>
+                  </div>
+                  <div class="tier-price-list">
+                    <div
+                      v-for="entry in unitPriceEntries(m)"
+                      :key="entry.label"
+                      class="tier-price-row"
+                    >
+                      <div class="price-lines">
+                        <div class="price-line">
+                          <span>原始</span>
+                          <strong>{{ unitPriceDisplay(entry.value) }}</strong>
+                        </div>
+                        <div class="price-line actual">
+                          <span class="actual-label">
+                            实际
+                            <span
+                              class="price-help"
+                              :data-tooltip="effectiveUnitPriceTooltip(entry.value)"
+                              tabindex="0"
+                              aria-label="实际价格计算方式"
+                            >
+                              <Icon name="questionCircle" size="xs" />
+                            </span>
+                          </span>
+                          <strong>{{ cnyUnitPriceDisplay(effectiveUnitCnyPrice(entry.value)) }}</strong>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="price-grid">
+                <div class="price-box">
+                  <div class="label">输入价格 / 1M tokens</div>
+                  <div class="price-lines">
+                    <div class="price-line">
+                      <span>原始</span>
+                      <strong>{{ priceDisplay(averagePrice(m.pricing?.input_price ?? null, m.pricing?.intervals, 'input_price')) }}</strong>
+                    </div>
+                    <div class="price-line actual">
+                      <span class="actual-label">
+                        实际
+                        <span
+                          class="price-help"
+                          :data-tooltip="effectivePriceTooltip(m, 'input_price')"
+                          tabindex="0"
+                          aria-label="实际价格计算方式"
+                        >
+                          <Icon name="questionCircle" size="xs" />
+                        </span>
+                      </span>
+                      <strong>{{ effectiveCnyPriceDisplay(m, 'input_price') }}</strong>
+                    </div>
+                  </div>
+                </div>
+                <div class="price-box">
+                  <div class="label">输出价格 / 1M tokens</div>
+                  <div class="price-lines">
+                    <div class="price-line">
+                      <span>原始</span>
+                      <strong>{{ priceDisplay(averagePrice(m.pricing?.output_price ?? null, m.pricing?.intervals, 'output_price')) }}</strong>
+                    </div>
+                    <div class="price-line actual">
+                      <span class="actual-label">
+                        实际
+                        <span
+                          class="price-help"
+                          :data-tooltip="effectivePriceTooltip(m, 'output_price')"
+                          tabindex="0"
+                          aria-label="实际价格计算方式"
+                        >
+                          <Icon name="questionCircle" size="xs" />
+                        </span>
+                      </span>
+                      <strong>{{ effectiveCnyPriceDisplay(m, 'output_price') }}</strong>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-if="priceFoot(m)" class="price-foot">{{ priceFoot(m) }}</div>
+            </article>
+          </div>
+          <div v-else class="empty-state">{{ noModelsLabel }}</div>
+        </template>
+      </section>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
 import Icon from '@/components/icons/Icon.vue'
 import PlatformIcon from '@/components/common/PlatformIcon.vue'
-import GroupBadge from '@/components/common/GroupBadge.vue'
-import SupportedModelChip from './SupportedModelChip.vue'
-import type { UserAvailableChannel, UserAvailableGroup, UserChannelPlatformSection } from '@/api/channels'
-import type { GroupPlatform, SubscriptionType } from '@/types'
-import { platformBadgeClass } from '@/utils/platformColors'
+import ModelIcon from '@/components/common/ModelIcon.vue'
+import type { UserAvailableChannel, UserAvailableGroup, UserSupportedModel } from '@/api/channels'
+import type { Group, GroupPlatform } from '@/types'
+import { BILLING_MODE_IMAGE, BILLING_MODE_PER_REQUEST } from '@/constants/channel'
+import { useAppStore } from '@/stores/app'
+
+type ViewMode = 'channel' | 'group'
+
+interface ViewSection {
+  key: string
+  title: string
+  platform: string
+  channel_name: string
+  supported_models: UserSupportedModel[]
+}
+
+interface ViewTab {
+  id?: number
+  key: string
+  name: string
+  description: string
+  platform: string
+  rateMultiplier: number
+  subscriptionType: string
+  isExclusive: boolean
+  modelCount: number
+  accountCount: number
+  channelCount: number
+  imagePrice1K?: number | null
+  imagePrice2K?: number | null
+  imagePrice4K?: number | null
+  sections: ViewSection[]
+}
 
 const props = defineProps<{
   columns: {
@@ -169,21 +306,1345 @@ const props = defineProps<{
   noPricingLabel: string
   noModelsLabel: string
   emptyLabel: string
-  /** 用户专属倍率（group_id → multiplier）；无专属时由 GroupBadge 仅显示默认倍率。 */
   userGroupRates: Record<number, number>
+  viewMode: ViewMode
+  availableGroups: Group[]
 }>()
 
-// Suppress unused warning — props is accessed via template automatically but
-// the explicit reference here keeps the linter from flagging userGroupRates.
-void props.userGroupRates
+void props.pricingKeyPrefix
+
+const activeChannelName = ref('')
+const activeGroupId = ref<number | null>(null)
+const copiedModel = ref('')
+const appStore = useAppStore()
+const mobileGroupDropdownOpen = ref(false)
+
+const groupViewRows = computed(() => buildGroupViewRows(props.rows))
+
+const sidebarTabs = computed(() => {
+  return props.viewMode === 'group'
+    ? groupViewRows.value
+    : props.rows.map((channel) => buildChannelTab(channel))
+})
+
+const activeTabKey = computed({
+  get() {
+    return props.viewMode === 'group'
+      ? (activeGroupId.value == null ? '' : `group-${activeGroupId.value}`)
+      : activeChannelName.value
+  },
+  set(value: string) {
+    if (props.viewMode === 'group') {
+      const parsed = Number(value.replace(/^group-/, ''))
+      activeGroupId.value = Number.isFinite(parsed) ? parsed : null
+      return
+    }
+    activeChannelName.value = value
+  },
+})
+
+const activeTab = computed(() => {
+  return props.viewMode === 'group'
+    ? groupViewRows.value.find((item) => item.key === activeTabKey.value) || groupViewRows.value[0] || null
+    : sidebarTabs.value.find((item) => item.key === activeTabKey.value) || sidebarTabs.value[0] || null
+})
+
+const viewModeLabel = computed(() => props.viewMode === 'group' ? '用户可用分组' : props.columns.name)
+
+function selectTab(key: string) {
+  activeTabKey.value = key
+  mobileGroupDropdownOpen.value = false
+}
+
+watch(
+  () => props.rows,
+  (rows) => {
+    if (!rows.some((channel) => channel.name === activeChannelName.value)) {
+      activeChannelName.value = rows[0]?.name || ''
+    }
+    if (!groupViewRows.value.some((row) => row.id === activeGroupId.value)) {
+      activeGroupId.value = groupViewRows.value[0]?.id ?? null
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.viewMode,
+  (mode) => {
+    if (mode === 'group' && activeGroupId.value == null) {
+      activeGroupId.value = groupViewRows.value[0]?.id ?? null
+    }
+    if (mode === 'channel' && !props.rows.some((channel) => channel.name === activeChannelName.value)) {
+      activeChannelName.value = props.rows[0]?.name || ''
+    }
+  },
+  { immediate: true },
+)
+
+function modelCount(channel: UserAvailableChannel): number {
+  return channel.platforms.reduce((sum, section) => sum + section.supported_models.length, 0)
+}
+
+function accountCount(channel: UserAvailableChannel): number {
+  return channel.platforms.reduce(
+    (sum, section) => sum + section.groups.reduce((groupSum, group) => groupSum + groupAccountCount(group), 0),
+    0,
+  )
+}
+
+function groupAccountCount(group: UserAvailableGroup): number {
+  const maybeCount = group as UserAvailableGroup & { account_count?: number; accounts_count?: number }
+  return maybeCount.account_count ?? maybeCount.accounts_count ?? 0
+}
+
+function buildChannelTab(channel: UserAvailableChannel): ViewTab {
+  const groups = channel.platforms.flatMap((section) => section.groups)
+  const firstGroup = groups[0]
+  return {
+    key: channel.name,
+    name: channel.name,
+    description: channel.description || props.columns.supportedModels,
+    platform: channel.platforms[0]?.platform || 'openai',
+    rateMultiplier: firstGroup ? effectiveGroupRate(firstGroup.id, firstGroup.rate_multiplier) : 1,
+    subscriptionType: firstGroup?.subscription_type || 'standard',
+    isExclusive: firstGroup?.is_exclusive || false,
+    modelCount: modelCount(channel),
+    accountCount: accountCount(channel),
+    channelCount: 1,
+    sections: channel.platforms.map((section) => ({
+      key: section.platform,
+      title: section.platform,
+      platform: section.platform,
+      channel_name: channel.name,
+      supported_models: section.supported_models,
+    })),
+  }
+}
+
+function buildGroupViewRows(rows: UserAvailableChannel[]): ViewTab[] {
+  const availableGroupMap = new Map(props.availableGroups.map((group) => [group.id, group]))
+  const map = new Map<number, {
+    id: number
+    name: string
+    platform: string
+    description: string
+    rateMultiplier: number
+    isExclusive: boolean
+    subscriptionType: string
+    accountCount: number
+    imagePrice1K: number | null
+    imagePrice2K: number | null
+    imagePrice4K: number | null
+    channelNames: Set<string>
+    sectionMap: Map<string, {
+      key: string
+      title: string
+      platform: string
+      channel_name: string
+      modelMap: Map<string, UserSupportedModel>
+    }>
+  }>()
+
+  for (const channel of rows) {
+    for (const section of channel.platforms) {
+      for (const group of section.groups) {
+        const groupId = group.id
+        const fullGroup = availableGroupMap.get(groupId)
+        const existing = map.get(groupId) || {
+          id: groupId,
+          name: fullGroup?.name || group.name,
+          platform: fullGroup?.platform || group.platform || section.platform,
+          description: fullGroup?.description || `${fullGroup?.name || group.name} 可用模型分组`,
+          rateMultiplier: effectiveGroupRate(groupId, fullGroup?.rate_multiplier ?? group.rate_multiplier),
+          isExclusive: fullGroup?.is_exclusive ?? group.is_exclusive,
+          subscriptionType: fullGroup?.subscription_type ?? group.subscription_type,
+          accountCount: groupAccountCount(group),
+          imagePrice1K: fullGroup?.image_price_1k ?? null,
+          imagePrice2K: fullGroup?.image_price_2k ?? null,
+          imagePrice4K: fullGroup?.image_price_4k ?? null,
+          channelNames: new Set<string>(),
+          sectionMap: new Map<string, {
+            key: string
+            title: string
+            platform: string
+            channel_name: string
+            modelMap: Map<string, UserSupportedModel>
+          }>(),
+        }
+        existing.channelNames.add(channel.name)
+        existing.accountCount = Math.max(existing.accountCount, groupAccountCount(group))
+        existing.platform = existing.platform || group.platform || section.platform
+        const sectionKey = `${channel.name}::${section.platform}`
+        if (!existing.sectionMap.has(sectionKey)) {
+          existing.sectionMap.set(sectionKey, {
+            key: sectionKey,
+            title: `${channel.name} / ${section.platform}`,
+            platform: section.platform,
+            channel_name: channel.name,
+            modelMap: new Map<string, UserSupportedModel>(),
+          })
+        }
+        const bucket = existing.sectionMap.get(sectionKey)!
+        for (const model of section.supported_models) {
+          if (!bucket.modelMap.has(model.name)) {
+            bucket.modelMap.set(model.name, model)
+          }
+        }
+        map.set(groupId, existing)
+      }
+    }
+  }
+
+  return Array.from(map.values())
+    .sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'))
+    .map((group) => {
+      const sections = Array.from(group.sectionMap.values())
+        .map((section) => ({
+          key: section.key,
+          title: section.title,
+          platform: section.platform,
+          channel_name: section.channel_name,
+          supported_models: Array.from(section.modelMap.values()),
+        }))
+        .sort((a, b) => a.title.localeCompare(b.title, 'zh-Hans-CN'))
+      const modelCountTotal = sections.reduce((sum, section) => sum + section.supported_models.length, 0)
+      return {
+        id: group.id,
+        key: `group-${group.id}`,
+        name: group.name,
+        description: group.description,
+        platform: group.platform,
+        rateMultiplier: group.rateMultiplier,
+        subscriptionType: group.subscriptionType,
+        isExclusive: group.isExclusive,
+        modelCount: modelCountTotal,
+        accountCount: group.accountCount,
+        channelCount: group.channelNames.size,
+        imagePrice1K: group.imagePrice1K,
+        imagePrice2K: group.imagePrice2K,
+        imagePrice4K: group.imagePrice4K,
+        sections,
+      }
+    })
+}
+
+function effectiveGroupRate(groupId: number, defaultRate: number): number {
+  return props.userGroupRates[groupId] ?? defaultRate ?? 1
+}
+
+function formatRate(value: number): string {
+  return Number.isInteger(value) ? value.toFixed(0) + 'x' : `${Number(value.toFixed(4))}x`
+}
+
+function platformPillClass(platform: string): string {
+  if (platform === 'anthropic') return 'anthropic'
+  if (platform === 'openai') return 'openai'
+  if (platform === 'gemini') return 'gemini'
+  return 'generic'
+}
+
+function formatCompactNumber(value: number): string {
+  return Number.isInteger(value)
+    ? value.toFixed(0)
+    : value.toFixed(4).replace(/0+$/, '').replace(/\.$/, '')
+}
+
+function priceDisplay(value: number | null): string {
+  if (value === null) return props.noPricingLabel || '-'
+  const perMillion = Math.abs(value) < 0.01 ? value * 1_000_000 : value
+  return `$${formatCompactNumber(perMillion)}`
+}
+
+function cnyPriceDisplay(value: number | null): string {
+  if (value === null) return props.noPricingLabel || '-'
+  const perMillion = Math.abs(value) < 0.01 ? value * 1_000_000 : value
+  return `¥${formatCompactNumber(perMillion)}`
+}
+
+function unitPriceDisplay(value: number | null): string {
+  if (value === null) return props.noPricingLabel || '-'
+  return `$${formatCompactNumber(value)}`
+}
+
+function cnyUnitPriceDisplay(value: number | null): string {
+  if (value === null) return props.noPricingLabel || '-'
+  return `￥${formatCompactNumber(value)}`
+}
+
+type PriceField = 'input_price' | 'output_price'
+type UnitPriceEntry = { label: string; value: number | null }
+
+function averagePrice(
+  fallback: number | null,
+  intervals: Array<Record<PriceField, number | null>> | undefined,
+  field: PriceField,
+): number | null {
+  const values = (intervals || [])
+    .map((interval) => interval[field])
+    .filter((value): value is number => typeof value === 'number')
+  if (values.length === 0) return fallback
+  return values.reduce((sum, value) => sum + value, 0) / values.length
+}
+
+function averageRechargeMultiplier(): number {
+  const settings = appStore.cachedPublicSettings
+  const tiers = (settings?.payment_balance_pricing_tiers || [])
+    .filter((tier) => tier.enabled !== false && Number.isFinite(tier.multiplier) && tier.multiplier > 0)
+  if (tiers.length > 0) {
+    return tiers.reduce((sum, tier) => sum + tier.multiplier, 0) / tiers.length
+  }
+  const fallback = settings?.payment_balance_recharge_multiplier
+  return typeof fallback === 'number' && Number.isFinite(fallback) && fallback > 0 ? fallback : 1
+}
+
+function effectiveCnyPrice(model: UserSupportedModel, field: PriceField): number | null {
+  const original = averagePrice(model.pricing?.[field] ?? null, model.pricing?.intervals, field)
+  if (original === null) return null
+  const rechargeMultiplier = averageRechargeMultiplier()
+  const channelMultiplier = activeTab.value?.rateMultiplier ?? 1
+  return original * channelMultiplier * rechargeMultiplier
+}
+
+function effectiveCnyPriceDisplay(model: UserSupportedModel, field: PriceField): string {
+  return cnyPriceDisplay(effectiveCnyPrice(model, field))
+}
+
+function effectivePriceTooltip(model: UserSupportedModel, field: PriceField): string {
+  const original = averagePrice(model.pricing?.[field] ?? null, model.pricing?.intervals, field)
+  if (original === null) return '暂无价格'
+  const rechargeMultiplier = averageRechargeMultiplier()
+  const channelMultiplier = activeTab.value?.rateMultiplier ?? 1
+  const actual = effectiveCnyPrice(model, field)
+  return [
+    '实际价格按人民币展示',
+    `${priceDisplay(original)} × 渠道倍率 ${formatRate(channelMultiplier)} × 充值倍率 ${formatCompactNumber(rechargeMultiplier)} USD/CNY`,
+    `= ${cnyPriceDisplay(actual)}`,
+  ].join('\n')
+}
+
+function isUnitPricedModel(model: UserSupportedModel): boolean {
+  const mode = model.pricing?.billing_mode
+  return mode === BILLING_MODE_IMAGE || mode === BILLING_MODE_PER_REQUEST
+}
+
+function unitPriceTitle(model: UserSupportedModel): string {
+  return model.pricing?.billing_mode === BILLING_MODE_IMAGE ? '图片价格 / 张' : '请求价格 / 次'
+}
+
+function unitPriceEntries(model: UserSupportedModel): UnitPriceEntry[] {
+  const groupEntries = groupImagePriceEntries(model)
+  if (groupEntries.length > 0) return groupEntries
+
+  const pricing = model.pricing
+  if (!pricing) return [{ label: '默认', value: null }]
+  const intervalEntries = (pricing.intervals || [])
+    .filter((interval) => typeof interval.per_request_price === 'number')
+    .map((interval) => ({
+      label: interval.tier_label || intervalLabel(interval.min_tokens, interval.max_tokens),
+      value: interval.per_request_price,
+    }))
+  if (intervalEntries.length > 0) {
+    const resolution = modelResolutionSuffix(model.name)
+    if (resolution) {
+      const matchedEntries = intervalEntries.filter((entry) => normalizeResolutionLabel(entry.label) === resolution)
+      if (matchedEntries.length > 0) return matchedEntries
+    }
+    return intervalEntries
+  }
+  if (pricing.per_request_price != null) {
+    return [{ label: pricing.billing_mode === BILLING_MODE_IMAGE ? '默认' : '每次', value: pricing.per_request_price }]
+  }
+  return [{ label: '默认', value: null }]
+}
+
+function groupImagePriceEntries(model: UserSupportedModel): UnitPriceEntry[] {
+  if (!isUnitPricedModel(model)) return []
+  const tab = activeTab.value
+  if (!tab) return []
+  const prices: Record<string, number | null | undefined> = {
+    '1K': tab.imagePrice1K,
+    '2K': tab.imagePrice2K,
+    '4K': tab.imagePrice4K,
+  }
+  const resolution = modelResolutionSuffix(model.name)
+  if (resolution) {
+    const value = prices[resolution]
+    return typeof value === 'number' ? [{ label: resolution, value }] : []
+  }
+  return Object.entries(prices)
+    .filter((entry): entry is [string, number] => typeof entry[1] === 'number')
+    .map(([label, value]) => ({ label, value }))
+}
+
+function intervalLabel(minTokens: number, maxTokens: number | null): string {
+  if (maxTokens == null) return `${minTokens}+`
+  return `${minTokens}-${maxTokens}`
+}
+
+function modelResolutionSuffix(modelName: string): string {
+  const match = modelName.trim().match(/-(1k|2k|4k)$/i)
+  if (match) return match[1].toUpperCase()
+  return isImageModelName(modelName) ? '1K' : ''
+}
+
+function normalizeResolutionLabel(label: string): string {
+  return label.trim().replace(/\s+/g, '').toUpperCase()
+}
+
+function isImageModelName(modelName: string): boolean {
+  return /^gpt-image-\d+(?:\.\d+)?$/i.test(modelName.trim())
+}
 
-const { t } = useI18n()
+function effectiveUnitCnyPrice(original: number | null): number | null {
+  if (original === null) return null
+  const rechargeMultiplier = averageRechargeMultiplier()
+  const channelMultiplier = activeTab.value?.rateMultiplier ?? 1
+  return original * channelMultiplier * rechargeMultiplier
+}
 
-function exclusiveGroups(section: UserChannelPlatformSection): UserAvailableGroup[] {
-  return section.groups.filter((g) => g.is_exclusive)
+function effectiveUnitPriceTooltip(original: number | null): string {
+  if (original === null) return '暂无价格'
+  const rechargeMultiplier = averageRechargeMultiplier()
+  const channelMultiplier = activeTab.value?.rateMultiplier ?? 1
+  const actual = effectiveUnitCnyPrice(original)
+  return [
+    '实际价格按人民币展示',
+    `${unitPriceDisplay(original)} × 渠道倍率 ${formatRate(channelMultiplier)} × 充值倍率 ${formatCompactNumber(rechargeMultiplier)} USD/CNY`,
+    `= ${cnyUnitPriceDisplay(actual)}`,
+  ].join('\n')
 }
 
-function publicGroups(section: UserChannelPlatformSection): UserAvailableGroup[] {
-  return section.groups.filter((g) => !g.is_exclusive)
+function priceFoot(model: UserSupportedModel): string {
+  const pricing = model.pricing
+  if (!pricing) return ''
+  if (pricing.billing_mode === BILLING_MODE_IMAGE || pricing.billing_mode === BILLING_MODE_PER_REQUEST) return ''
+  const parts: string[] = []
+  if (pricing.per_request_price != null) parts.push(`请求价 ${priceDisplay(pricing.per_request_price)}`)
+  if (pricing.image_output_price != null) parts.push(`图片输出 ${priceDisplay(pricing.image_output_price)}`)
+  return parts.join(' / ')
+}
+
+async function copyModelId(model: string) {
+  try {
+    await navigator.clipboard?.writeText(model)
+    copiedModel.value = model
+    window.setTimeout(() => {
+      if (copiedModel.value === model) copiedModel.value = ''
+    }, 1200)
+  } catch {
+    copiedModel.value = ''
+  }
 }
 </script>
+
+<style scoped>
+.available-models-shell {
+  --text: #0f172a;
+  --muted: #475569;
+  --shadow: 0 20px 50px rgba(15, 23, 42, .08);
+  --shadow-soft: 0 12px 30px rgba(20, 184, 166, .08);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 28px;
+  padding: 18px;
+  color: var(--text);
+  background-image:
+    radial-gradient(circle at 0% 0%, rgba(45,212,191,.16), transparent 24%),
+    radial-gradient(circle at 100% 0%, rgba(125,211,252,.14), transparent 22%),
+    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
+  background-size: auto, auto, 48px 48px, 48px 48px;
+}
+
+.model-page-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
+  gap: 22px;
+  align-items: start;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.channel-tabs-shell {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: 28px;
+  padding: 18px;
+  background: rgba(255,255,255,.55);
+  border: 1px solid rgba(255,255,255,.62);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(14px);
+}
+
+.section-eyebrow {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: -18px -18px 12px;
+  padding: 18px 18px 12px;
+  color: #0f766e;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  background: rgba(255,255,255,.78);
+  backdrop-filter: blur(14px);
+}
+
+.group-tab {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 10px;
+  border: 1px solid transparent;
+  border-radius: 16px;
+  padding: 14px 12px;
+  text-align: left;
+  background: transparent;
+  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+
+.group-tab:hover,
+.group-tab.active {
+  border-color: rgba(15,23,42,.04);
+  background: rgba(241,245,249,.82);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.54);
+}
+
+.group-tab-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.group-tab-meta,
+.model-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.group-desc {
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.group-name-pill {
+  display: inline-flex;
+  min-width: 0;
+  max-width: min(100%, 220px);
+  align-items: center;
+  gap: 7px;
+  border-radius: 9px;
+  padding: 4px 10px;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.group-name-pill.large {
+  font-size: 22px;
+  border-radius: 12px;
+  padding: 6px 12px;
+}
+
+.group-name-pill.anthropic {
+  color: #a85516;
+  background: #fff7ed;
+}
+
+.group-name-pill.openai {
+  color: #2f7d3f;
+  background: #f0fdf4;
+}
+
+.group-name-pill.gemini {
+  color: #2563a4;
+  background: #eff6ff;
+}
+
+.group-name-pill.generic {
+  color: #5b21b6;
+  background: #f5f3ff;
+}
+
+.rate-badge {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.rate-badge.anthropic {
+  color: #a85516;
+  background: #fff7ed;
+}
+
+.rate-badge.openai {
+  color: #2f7d3f;
+  background: #f0fdf4;
+}
+
+.rate-badge.gemini {
+  color: #2563a4;
+  background: #eff6ff;
+}
+
+.rate-badge.generic {
+  color: #5b21b6;
+  background: #f5f3ff;
+}
+
+.mini-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid rgba(15,23,42,.07);
+  border-radius: 999px;
+  padding: 5px 10px;
+  color: #475569;
+  background: rgba(255,255,255,.72);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.content-shell {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+  align-content: start;
+}
+
+.content-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  border: 1px solid rgba(226,232,240,.9);
+  border-radius: 28px;
+  padding: 28px 32px;
+  background: rgba(255,255,255,.82);
+  box-shadow: none;
+  backdrop-filter: blur(16px);
+}
+
+.content-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  min-width: 0;
+}
+
+.content-icon,
+.model-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  color: #fff;
+}
+
+.content-icon {
+  margin-top: 2px;
+}
+
+.content-icon.anthropic {
+  color: #a85516;
+  background: #fff7ed;
+  box-shadow: 0 18px 34px rgba(234, 88, 12, .16);
+}
+
+.content-icon.openai {
+  color: #2f7d3f;
+  background: #f0fdf4;
+  box-shadow: 0 18px 34px rgba(34, 197, 94, .16);
+}
+
+.content-icon.gemini {
+  color: #2563a4;
+  background: #eff6ff;
+  box-shadow: 0 18px 34px rgba(37, 99, 235, .16);
+}
+
+.content-icon.generic {
+  color: #5b21b6;
+  background: #f5f3ff;
+  box-shadow: 0 18px 34px rgba(124, 58, 237, .16);
+}
+
+.content-head h2 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 850;
+  letter-spacing: -.03em;
+}
+
+.content-title-copy {
+  min-width: 0;
+}
+
+.content-heading-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.mobile-group-filter {
+  display: none;
+}
+
+.mobile-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid rgba(15, 23, 42, .08);
+  border-radius: 9px;
+  padding: 6px 8px;
+  color: #0f172a;
+  background: rgba(255, 255, 255, .92);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.mobile-filter-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  display: grid;
+  width: min(280px, calc(100vw - 32px));
+  max-height: 340px;
+  overflow-y: auto;
+  border: 1px solid rgba(226, 232, 240, .95);
+  border-radius: 14px;
+  padding: 8px;
+  background: rgba(255, 255, 255, .98);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
+}
+
+.mobile-filter-item {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  padding: 9px;
+  text-align: left;
+  background: transparent;
+}
+
+.mobile-filter-item.active {
+  border-color: rgba(20, 184, 166, .24);
+  background: #f0fdfa;
+}
+
+.mobile-filter-item-main {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.mobile-filter-item-main span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-filter-item-meta {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.content-meta-line {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.content-desc {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.content-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.content-side {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.kpi,
+.price-box {
+  border: 1px solid rgba(226,232,240,.9);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(248,250,252,.72);
+}
+
+.kpi .value,
+.price-box .value {
+  font-size: clamp(18px, 2.4vw, 24px);
+  font-weight: 800;
+  letter-spacing: -.03em;
+}
+
+.price-lines {
+  display: grid;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.price-line {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.price-line strong {
+  color: #0f172a;
+  font-size: clamp(16px, 2vw, 20px);
+  font-weight: 800;
+  letter-spacing: -.03em;
+}
+
+.price-line:not(.actual) strong {
+  font-size: 24px;
+}
+
+.price-line.actual strong {
+  color: #34a780;
+  font-size: 16px;
+}
+
+.unit-price-grid {
+  grid-template-columns: 1fr;
+}
+
+.unit-price-box {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.tier-price-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.tier-price-row {
+  display: block;
+}
+
+.unit-price-label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.tier-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 38px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  color: #0f766e;
+  background: rgba(20, 184, 166, .12);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.actual-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.price-help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  color: #64748b;
+  cursor: help;
+  outline: none;
+}
+
+.price-help:hover,
+.price-help:focus-visible {
+  color: #0f766e;
+  background: rgba(15, 118, 110, .08);
+}
+
+.price-help::after {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  z-index: 999;
+  width: max-content;
+  max-width: 260px;
+  transform: translateX(-10px);
+  border: 1px solid rgba(15, 23, 42, .08);
+  border-radius: 10px;
+  padding: 8px 10px;
+  color: #0f172a;
+  background: rgba(255, 255, 255, .96);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
+  content: attr(data-tooltip);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.55;
+  opacity: 0;
+  pointer-events: none;
+  text-align: left;
+  white-space: pre-line;
+  transition: opacity .15s ease, transform .15s ease;
+}
+
+.price-help:hover::after,
+.price-help:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-10px) translateY(-2px);
+}
+
+.kpi .subvalue,
+.price-foot,
+.price-box .label {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0f766e;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.model-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 12px;
+}
+
+.model-card {
+  position: relative;
+  border: 1px solid rgba(226,232,240,.9);
+  border-radius: 16px;
+  padding: 16px 48px 16px 16px;
+  background: rgba(255,255,255,.88);
+  box-shadow: 0 1px 2px rgba(15,23,42,.04);
+  transition: border-color .18s ease, box-shadow .18s ease;
+}
+
+.model-card:hover {
+  border-color: rgba(20,184,166,.28);
+  box-shadow: 0 8px 22px rgba(15,23,42,.06);
+}
+
+.model-header,
+.model-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.model-header {
+  justify-content: space-between;
+}
+
+.model-title-row {
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 100%;
+}
+
+.model-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  flex: 0 0 36px;
+  background: #fff;
+  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
+}
+
+.model-name {
+  margin: 0 0 6px;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgba(15,23,42,.08);
+  border-radius: 10px;
+  padding: 0;
+  color: #475569;
+  background: rgba(255,255,255,.88);
+  box-shadow: none;
+  cursor: pointer;
+  transition: color .15s ease, transform .15s ease, box-shadow .15s ease;
+}
+
+.copy-btn:hover {
+  color: #0f766e;
+  box-shadow: 0 6px 14px rgba(20,184,166,.12);
+}
+
+.price-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.price-foot {
+  margin-top: 10px;
+}
+
+.empty-state {
+  border-radius: 24px;
+  padding: 48px 16px;
+  text-align: center;
+  background: rgba(255,255,255,.72);
+}
+
+@media (max-width: 1100px) {
+  .model-page-grid {
+    grid-template-columns: 1fr;
+    height: auto;
+    overflow: visible;
+  }
+
+  .channel-tabs-shell {
+    max-height: 260px;
+  }
+
+  .content-shell {
+    height: auto;
+    overflow: visible;
+  }
+
+  .model-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .available-models-shell {
+    border-radius: 18px;
+    padding: 10px;
+    overflow: visible;
+  }
+
+  .model-page-grid {
+    gap: 12px;
+  }
+
+  .channel-tabs-shell {
+    display: none;
+  }
+
+  .section-eyebrow {
+    position: static;
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 8px 4px;
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    background: transparent;
+    backdrop-filter: none;
+  }
+
+  .group-tab {
+    flex: 0 0 210px;
+    scroll-snap-align: start;
+    gap: 8px;
+    margin-bottom: 0;
+    border-radius: 14px;
+    padding: 10px;
+  }
+
+  .group-tab-top {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 7px;
+  }
+
+  .group-name-pill {
+    max-width: 100%;
+    padding: 4px 8px;
+    font-size: 14px;
+  }
+
+  .rate-badge,
+  .mini-badge {
+    padding: 3px 7px;
+    font-size: 10px;
+  }
+
+  .group-desc {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1.35;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .group-tab-meta {
+    gap: 5px;
+  }
+
+  .content-shell {
+    gap: 12px;
+    padding-right: 0;
+  }
+
+  .content-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    border-radius: 18px;
+    padding: 16px;
+  }
+
+  .content-title-row {
+    width: 100%;
+    gap: 10px;
+  }
+
+  .content-title-copy {
+    flex: 1 1 auto;
+  }
+
+  .content-heading-line {
+    position: relative;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .mobile-group-filter {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    padding-top: 1px;
+  }
+
+  .content-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+  }
+
+  .content-head h2 {
+    font-size: 20px;
+  }
+
+  .content-meta-line,
+  .content-desc {
+    font-size: 12px;
+  }
+
+  .content-tags,
+  .content-side {
+    gap: 6px;
+  }
+
+  .kpi {
+    padding: 8px 10px;
+  }
+
+  .kpi .value {
+    font-size: 18px;
+  }
+
+  .price-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .model-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .model-card {
+    border-radius: 14px;
+    padding: 12px 10px;
+  }
+
+  .model-header,
+  .model-title-row {
+    gap: 8px;
+  }
+
+  .model-avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    flex-basis: 30px;
+  }
+
+  .model-name {
+    margin-bottom: 5px;
+    font-size: 12px;
+    line-height: 1.25;
+  }
+
+  .model-tags {
+    gap: 4px;
+  }
+
+  .copy-btn {
+    top: 10px;
+    right: 10px;
+    width: 26px;
+    height: 26px;
+    border-radius: 9px;
+  }
+
+  .model-title-row {
+    padding-right: 28px;
+  }
+
+  .price-grid {
+    gap: 7px;
+    margin-top: 10px;
+  }
+
+  .price-box {
+    padding: 8px;
+  }
+
+  .price-box .label {
+    font-size: 10px;
+    line-height: 1.35;
+  }
+
+  .price-lines {
+    gap: 4px;
+  }
+
+  .price-line {
+    gap: 4px;
+    font-size: 10px;
+  }
+
+  .price-line:not(.actual) strong {
+    font-size: 17px;
+  }
+
+  .price-line.actual strong {
+    font-size: 16px;
+  }
+
+  .price-help::after {
+    right: 0;
+    left: auto;
+    max-width: min(240px, calc(100vw - 32px));
+    transform: translateX(0);
+  }
+
+  .price-help:hover::after,
+  .price-help:focus-visible::after {
+    transform: translateY(-2px);
+  }
+}
+
+@media (max-width: 420px) {
+  .model-card-grid {
+    gap: 7px;
+  }
+
+  .model-card {
+    padding: 10px 8px;
+  }
+
+  .model-avatar {
+    width: 28px;
+    height: 28px;
+    flex-basis: 28px;
+  }
+
+  .model-name {
+    font-size: 11px;
+  }
+
+  .price-line:not(.actual) strong {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/frontend/src/components/channels/SupportedModelChip.vue b/frontend/src/components/channels/SupportedModelChip.vue
index 3fe32e2f75b..de60a0bf2ff 100644
--- a/frontend/src/components/channels/SupportedModelChip.vue
+++ b/frontend/src/components/channels/SupportedModelChip.vue
@@ -14,11 +14,7 @@
       @focusout="onLeave"
       tabindex="0"
     >
-      <PlatformIcon
-        v-if="effectivePlatform"
-        :platform="effectivePlatform as GroupPlatform"
-        size="xs"
-      />
+      <ModelIcon :model="model.name" size="18px" />
       <span
         v-if="showPlatform && model.platform"
         class="rounded bg-gray-200/60 px-1 text-[10px] uppercase text-gray-600 dark:bg-dark-700 dark:text-gray-400"
@@ -113,10 +109,10 @@
             <PricingRow
               v-if="
                 model.pricing.billing_mode === BILLING_MODE_IMAGE &&
-                model.pricing.image_output_price != null
+                model.pricing.per_request_price != null
               "
-              :label="t(prefixKey('imageOutputPrice'))"
-              :value="model.pricing.image_output_price"
+              :label="t(prefixKey('perRequestPrice'))"
+              :value="model.pricing.per_request_price"
               :unit="t(prefixKey('unitPerRequest'))"
               :scale="1"
             />
@@ -164,8 +160,7 @@ import {
 // 复用 api/channels.ts 的用户侧最小形态 DTO。
 // admin 侧 ChannelModelPricing 字段更多，但结构上是用户 DTO 的超集，admin 视图传入可直接通过结构化子类型检查。
 import type { UserPricingInterval, UserSupportedModel } from '@/api/channels'
-import PlatformIcon from '@/components/common/PlatformIcon.vue'
-import type { GroupPlatform } from '@/types'
+import ModelIcon from '@/components/common/ModelIcon.vue'
 import { platformBadgeClass, platformBorderClass, platformBadgeLightClass } from '@/utils/platformColors'
 
 const props = withDefaults(
diff --git a/frontend/src/components/common/ModelIcon.vue b/frontend/src/components/common/ModelIcon.vue
index 2a05bf71fac..76b3b8b1d5c 100644
--- a/frontend/src/components/common/ModelIcon.vue
+++ b/frontend/src/components/common/ModelIcon.vue
@@ -19,18 +19,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+interface IconData {
+  color: string
+  paths: string[]
+}
+
 const props = withDefaults(defineProps<{
   model: string
   size?: string
+  preferFallback?: boolean
 }>(), {
-  size: '18px'
+  size: '20px',
+  preferFallback: false,
 })
 
-interface IconData {
-  color: string
-  paths: string[]
-}
-
 // SVG paths extracted from @lobehub/icons Mono.js files
 const iconData: Record<string, IconData> = {
   claude: {
@@ -258,7 +260,7 @@ const iconKey = computed(() => {
   return null
 })
 
-const iconInfo = computed(() => iconKey.value ? iconData[iconKey.value] : null)
+const iconInfo = computed(() => props.preferFallback ? null : (iconKey.value ? iconData[iconKey.value] : null))
 </script>
 
 <style scoped>
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 72d1db12d6e..872531253c4 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -331,11 +331,14 @@ export const useAppStore = defineStore('app', () => {
         site_logo: siteLogo.value,
         site_subtitle: '',
         api_base_url: apiBaseUrl.value,
+        image_generation_api_base_url: '',
         contact_info: contactInfo.value,
         doc_url: docUrl.value,
         home_content: '',
         hide_ccs_import_button: false,
         payment_enabled: false,
+        payment_balance_recharge_multiplier: 1,
+        payment_balance_pricing_tiers: [],
         table_default_page_size: 20,
         table_page_size_options: [10, 20, 50, 100],
         custom_menu_items: [],
@@ -357,6 +360,8 @@ export const useAppStore = defineStore('app', () => {
         channel_monitor_enabled: true,
         channel_monitor_default_interval_seconds: 60,
         available_channels_enabled: false,
+        ai_chat_enabled: false,
+        image_generation_enabled: false,
         risk_control_enabled: false,
         service_quota_enabled: false,
         affiliate_enabled: false,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 04ae60b8efb..63d5264770e 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -186,6 +186,15 @@ export interface LoginAgreementDocument {
   content_md: string
 }
 
+export interface BalancePricingTier {
+  min: number
+  max: number
+  multiplier: number
+  label: string
+  enabled: boolean
+  sortOrder: number
+}
+
 export interface PublicSettings {
   registration_enabled: boolean
   email_verify_enabled: boolean
@@ -205,11 +214,14 @@ export interface PublicSettings {
   site_logo: string
   site_subtitle: string
   api_base_url: string
+  image_generation_api_base_url: string
   contact_info: string
   doc_url: string
   home_content: string
   hide_ccs_import_button: boolean
   payment_enabled: boolean
+  payment_balance_recharge_multiplier?: number
+  payment_balance_pricing_tiers?: BalancePricingTier[]
   risk_control_enabled: boolean
   table_default_page_size: number
   table_page_size_options: number[]
@@ -233,6 +245,8 @@ export interface PublicSettings {
   channel_monitor_enabled: boolean
   channel_monitor_default_interval_seconds: number
   available_channels_enabled: boolean
+  ai_chat_enabled: boolean
+  image_generation_enabled: boolean
   service_quota_enabled: boolean
   affiliate_enabled: boolean
   allow_user_view_error_requests?: boolean
@@ -817,6 +831,12 @@ export interface TempUnschedulableStatus {
   state?: TempUnschedulableState
 }
 
+export interface AccountHealthBucket {
+  bucket_start: string
+  success_count: number
+  error_count: number
+}
+
 export interface Account {
   id: number
   name: string
@@ -918,6 +938,8 @@ export interface Account {
   current_window_cost?: number | null // 当前窗口费用
   active_sessions?: number | null // 当前活跃会话数
   current_rpm?: number | null // 当前分钟 RPM 计数
+  avg_first_token_ms?: number | null
+  health_buckets?: AccountHealthBucket[] | null
 }
 
 // Account Usage types
@@ -927,6 +949,8 @@ export interface WindowStats {
   cost: number // Account cost (account multiplier)
   standard_cost?: number
   user_cost?: number
+  success_count?: number
+  error_count?: number
 }
 
 export interface UsageProgress {
@@ -1337,7 +1361,8 @@ export interface RedeemCode {
   updated_at?: string
   notes?: string
   group_id?: number | null // 订阅类型专用
-  validity_days?: number // 订阅类型专用
+  validity_days?: number
+  validity_seconds?: number // 订阅类型专用
   user?: User
   group?: Group // 关联的分组
 }
@@ -1366,6 +1391,7 @@ export interface BatchUpdateRedeemCodesRequest {
 
 export interface RedeemCodeRequest {
   code: string
+  invitation_code?: string
 }
 
 // ==================== Dashboard & Statistics ====================
@@ -1598,6 +1624,7 @@ export interface AssignSubscriptionRequest {
   user_id: number
   group_id: number
   validity_days?: number
+  overwrite_existing?: boolean
 }
 
 export interface BulkAssignSubscriptionRequest {
diff --git a/frontend/src/views/user/AvailableChannelsView.vue b/frontend/src/views/user/AvailableChannelsView.vue
index a6c9ebc89b9..54cd2f6e090 100644
--- a/frontend/src/views/user/AvailableChannelsView.vue
+++ b/frontend/src/views/user/AvailableChannelsView.vue
@@ -20,6 +20,24 @@
           </div>
 
           <div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
+            <div class="inline-flex rounded-xl border border-gray-200 bg-white p-1 shadow-sm dark:border-dark-700 dark:bg-dark-800">
+              <button
+                type="button"
+                class="view-toggle-btn"
+                :class="{ active: viewMode === 'channel' }"
+                @click="viewMode = 'channel'"
+              >
+                渠道视图
+              </button>
+              <button
+                type="button"
+                class="view-toggle-btn"
+                :class="{ active: viewMode === 'group' }"
+                @click="viewMode = 'group'"
+              >
+                分组视图
+              </button>
+            </div>
             <button
               @click="loadChannels"
               :disabled="loading"
@@ -42,6 +60,8 @@
           :no-pricing-label="t('availableChannels.noPricing')"
           :no-models-label="t('availableChannels.noModels')"
           :empty-label="t('availableChannels.empty')"
+          :view-mode="viewMode"
+          :available-groups="availableGroups"
         />
       </template>
     </TablePageLayout>
@@ -57,6 +77,7 @@ import Icon from '@/components/icons/Icon.vue'
 import AvailableChannelsTable from '@/components/channels/AvailableChannelsTable.vue'
 import userChannelsAPI, { type UserAvailableChannel } from '@/api/channels'
 import userGroupsAPI from '@/api/groups'
+import type { Group } from '@/types'
 import { useAppStore } from '@/stores/app'
 import { extractApiErrorMessage } from '@/utils/apiError'
 
@@ -65,8 +86,10 @@ const appStore = useAppStore()
 
 const channels = ref<UserAvailableChannel[]>([])
 const userGroupRates = ref<Record<number, number>>({})
+const availableGroups = ref<Group[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
+const viewMode = ref<'channel' | 'group'>('group')
 
 const columnLabels = computed(() => ({
   name: t('availableChannels.columns.name'),
@@ -107,15 +130,20 @@ async function loadChannels() {
   try {
     // 渠道列表和用户专属倍率并发拉取。专属倍率失败不阻塞渠道展示——
     // 失败时只是无法渲染专属倍率角标，降级为仅显示默认倍率。
-    const [list, rates] = await Promise.all([
+    const [list, rates, groups] = await Promise.all([
       userChannelsAPI.getAvailable(),
       userGroupsAPI.getUserGroupRates().catch((err: unknown) => {
         console.error('Failed to load user group rates:', err)
         return {} as Record<number, number>
       }),
+      userGroupsAPI.getAvailable().catch((err: unknown) => {
+        console.error('Failed to load available groups:', err)
+        return [] as Group[]
+      }),
     ])
     channels.value = list
     userGroupRates.value = rates
+    availableGroups.value = groups
   } catch (err: unknown) {
     appStore.showError(extractApiErrorMessage(err, t('common.error')))
   } finally {
@@ -125,3 +153,29 @@ async function loadChannels() {
 
 onMounted(loadChannels)
 </script>
+
+<style scoped>
+.view-toggle-btn {
+  border-radius: .625rem;
+  padding: .5rem .875rem;
+  color: rgb(71 85 105);
+  font-size: .875rem;
+  font-weight: 600;
+  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
+}
+
+.view-toggle-btn.active {
+  color: rgb(15 118 110);
+  background: rgb(240 253 250);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
+}
+
+:global(.dark) .view-toggle-btn {
+  color: rgb(203 213 225);
+}
+
+:global(.dark) .view-toggle-btn.active {
+  color: rgb(94 234 212);
+  background: rgba(20, 184, 166, .16);
+}
+</style>