fix: 优化分组选择与创建房间体验

Author: Open-Pixel-AI

backend/cmd/server/VERSION

@@ -1 +1 @@
-1.2.70
+1.2.71

frontend/src/components/account-share/CreateRoomDialog.vue

@@ -65,18 +65,27 @@ const emit = defineEmits<Emits>()
 
 <style>
 .create-room-dialog-panel {
-  width: min(60rem, calc(100vw - 1rem));
-  max-height: calc(100dvh - 1rem);
+  width: min(84rem, calc(100vw - 2rem));
+  max-width: min(84rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
 }
 
 .create-room-dialog-body {
+  display: flex;
+  min-height: 0;
   padding: 0;
+  overflow: hidden;
   overscroll-behavior: contain;
 }
 
 .create-room-dialog-shell {
-  min-height: calc(100dvh - 8rem);
+  display: flex;
+  min-height: 0;
+  max-height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
   background: rgb(248 250 252);
+  overflow-y: auto;
 }
 
 .create-room-dialog-intro {
@@ -97,9 +106,18 @@ const emit = defineEmits<Emits>()
   background: rgb(24 24 27);
 }
 
+@media (max-width: 1023px) {
+  .create-room-dialog-shell .create-room-submit-stage {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    box-shadow: 0 -0.5rem 1.25rem rgb(15 23 42 / 0.08);
+  }
+}
+
 @media (min-width: 640px) {
   .create-room-dialog-panel {
-    max-height: 90dvh;
+    max-height: 94dvh;
   }
 
   .create-room-dialog-shell {
@@ -113,4 +131,56 @@ const emit = defineEmits<Emits>()
     padding: 1rem 1.5rem;
   }
 }
+
+/* Keep the primary action in view on wide screens while the form scrolls. */
+@media (min-width: 1024px) {
+  .create-room-dialog-shell .create-room-workspace {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
+    align-items: start;
+    gap: 1rem;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .create-room-dialog-shell .create-room-form-flow,
+  .create-room-dialog-shell .create-room-submit-stage {
+    padding: 0;
+  }
+
+  .create-room-dialog-shell .create-room-submit-stage {
+    position: sticky;
+    top: 0;
+    border-top: 0;
+    border-left: 1px solid rgb(226 232 240);
+    background: transparent;
+    padding-left: 1rem;
+  }
+
+  .create-room-dialog-shell .create-room-submit-content {
+    position: sticky;
+    top: 0;
+    grid-template-columns: minmax(0, 1fr);
+    border: 1px solid rgb(191 219 254);
+    border-radius: 0.875rem;
+    background: rgb(239 246 255 / 0.72);
+    padding: 1rem;
+  }
+
+  .create-room-dialog-shell .create-room-submit-content > :not(.create-room-stage-heading):not(.create-room-submit-button) {
+    grid-column: auto;
+  }
+
+  .create-room-dialog-shell .create-room-submit-button {
+    width: 100%;
+  }
+
+  .dark .create-room-dialog-shell .create-room-submit-stage {
+    border-left-color: rgb(63 63 70);
+  }
+
+  .dark .create-room-dialog-shell .create-room-submit-content {
+    border-color: rgb(30 64 175);
+    background: rgb(30 64 175 / 0.14);
+  }
+}
 </style>

frontend/src/components/common/GroupBadge.vue

@@ -8,7 +8,7 @@
     <!-- Platform logo -->
     <PlatformIcon v-if="platform" :platform="platform" size="sm" class="flex-shrink-0" />
     <!-- Group name -->
-    <span class="min-w-0 truncate">{{ name }}</span>
+    <span class="min-w-0 truncate">{{ displayName }}</span>
     <span v-if="isPrivateScope" :class="['flex-shrink-0', scopeLabelClass]">
       {{ t('groups.private') }}
     </span>
@@ -31,6 +31,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { SubscriptionType, GroupPlatform, GroupScope } from '@/types'
+import { displayText } from '@/utils/displayText'
 import PlatformIcon from './PlatformIcon.vue'
 
 interface Props {
@@ -62,6 +63,8 @@ const props = withDefaults(defineProps<Props>(), {
   alwaysShowRate: false
 })
 
+const displayName = computed(() => displayText(props.name))
+
 const { t } = useI18n()
 
 const isSubscription = computed(() => props.subscriptionType === 'subscription')

frontend/src/components/common/GroupOptionItem.vue

@@ -26,7 +26,7 @@
         v-if="description"
         class="mt-1.5 w-full text-left text-xs leading-relaxed text-gray-500 dark:text-gray-400 line-clamp-2"
       >
-        {{ description }}
+        {{ displayDescription }}
       </span>
     </div>
 
@@ -69,6 +69,7 @@ import type {
   GroupPlatform,
   GroupScope
 } from '@/types'
+import { displayText } from '@/utils/displayText'
 
 interface Props {
   name: string
@@ -98,6 +99,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const { t } = useI18n()
 
+const displayDescription = computed(() => displayText(props.description))
+
 const effectiveDisplayRate = computed(() => props.effectiveRateMultiplier ?? props.userRateMultiplier ?? null)
 
 // Whether user has an effective rate different from default

frontend/src/utils/displayText.ts

@@ -0,0 +1,19 @@
+/** Repair UTF-8 text that was accidentally decoded as Latin-1. */
+const mojibakeMarkers = /[ÃÂÆÇÐÑØÙÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ锟�]/g
+
+const markerScore = (value: string): number =>
+  (value.match(mojibakeMarkers)?.length ?? 0) + (value.match(/�/g)?.length ?? 0) * 3
+
+export function displayText(value: string | null | undefined): string {
+  if (!value || markerScore(value) === 0) return value ?? ''
+  try {
+    const bytes = Uint8Array.from(value, (character) => {
+      const code = character.codePointAt(0) ?? 0
+      return code <= 0xff ? code : 0x3f
+    })
+    const decoded = new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+    return markerScore(decoded) < markerScore(value) ? decoded : value
+  } catch {
+    return value
+  }
+}

frontend/src/views/admin/GroupsView.vue

@@ -130,7 +130,7 @@
           <template #cell-name="{ value, row }">
             <div class="flex min-w-0 items-center gap-2">
               <span class="truncate font-medium text-gray-900 dark:text-white">{{
-                value
+                displayText(String(value ?? ""))
               }}</span>
               <span
                 v-if="row.scope === 'user_private'"
@@ -3217,7 +3217,7 @@
             </div>
             <div class="flex-1">
               <div class="font-medium text-gray-900 dark:text-white">
-                {{ group.name }}
+                {{ displayText(group.name) }}
               </div>
               <div class="text-xs text-gray-500 dark:text-gray-400">
                 <span
@@ -3499,6 +3499,7 @@ import GroupCapacityBadge from "@/components/common/GroupCapacityBadge.vue";
 import { VueDraggable } from "vue-draggable-plus";
 import { createStableObjectKeyResolver } from "@/utils/stableObjectKey";
 import { extractApiErrorMessage } from "@/utils/apiError";
+import { displayText } from "@/utils/displayText";
 import { useKeyedDebouncedSearch } from "@/composables/useKeyedDebouncedSearch";
 import { getPersistedPageSize } from "@/composables/usePersistedPageSize";
 import {

frontend/src/views/user/KeysView.vue

@@ -1422,7 +1422,7 @@
         :id="getGroupSelectorPopoverId(groupSelectorKeyId)"
         ref="dropdownRef"
         :data-ui-skin="uiSkin"
-        class="data-teleport-panel animate-in fade-in slide-in-from-top-2 fixed z-[100000020] flex max-h-[calc(100dvh-2rem)] min-w-0 w-[calc(100vw-2rem)] max-w-[380px] flex-col duration-200"
+        class="data-teleport-panel animate-in fade-in slide-in-from-top-2 fixed z-[100000020] flex max-h-[calc(100dvh-2rem)] min-w-0 w-[min(34rem,calc(100vw-2rem))] flex-col duration-200"
         style="pointer-events: auto !important;"
         role="dialog"
         :aria-label="t('keys.groupSelectorLabel')"
@@ -1452,6 +1452,26 @@
               @click.stop
             />
           </div>
+          <div class="mt-2 flex items-center gap-1 overflow-x-auto pb-0.5" role="tablist" :aria-label="t('keys.groupSelectorLabel')">
+            <button
+              v-for="platform in groupPlatforms"
+              :key="platform.value || 'all'"
+              type="button"
+              role="tab"
+              :aria-selected="activeGroupPlatform === platform.value"
+              :class="[
+                'inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-colors',
+                activeGroupPlatform === platform.value
+                  ? 'bg-brand-soft text-brand'
+                  : 'text-content-muted hover:bg-surface-muted hover:text-content'
+              ]"
+              @click="activeGroupPlatform = platform.value"
+            >
+              <PlatformIcon v-if="platform.value" :platform="platform.value" size="xs" />
+              <span>{{ platform.label }}</span>
+              <span class="rounded-full bg-black/5 px-1.5 py-0.5 text-[10px] dark:bg-white/10">{{ platform.count }}</span>
+            </button>
+          </div>
         </div>
         <!-- Group list -->
         <div
@@ -1536,6 +1556,7 @@ import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 	import GroupBadge from '@/components/common/GroupBadge.vue'
 	import GroupApiKeyBadge from '@/components/common/GroupApiKeyBadge.vue'
 	import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
+	import PlatformIcon from '@/components/common/PlatformIcon.vue'
 	import type {
 	  ApiKey,
 	  ApiKeyGroupBadgeType,
@@ -1551,6 +1572,7 @@ import type { BatchApiKeyUsageStats } from '@/api/usage'
 import type { AccountShareAPIKeyBindingStatus } from '@/api/accountShare'
 import { formatDateTime } from '@/utils/format'
 import { maskApiKey } from '@/utils/maskApiKey'
+import { displayText } from '@/utils/displayText'
 import { buildCcSwitchImportDeeplink } from '@/utils/ccswitchImport'
 import { buildImagePlaygroundImportUrl } from '@/utils/imagePlaygroundImport'
 import { extractApiErrorCode, extractApiErrorMessage, isAbortError } from '@/utils/apiError'
@@ -2012,8 +2034,8 @@ const groupOptions = computed<GroupOption[]>(() =>
       const fallbackUserRate = userGroupRates.value[group.id] ?? null
       return {
         value: group.id,
-        label: group.name,
-        description: group.description,
+        label: displayText(group.name),
+        description: displayText(group.description),
         rate: group.rate_multiplier,
         userRate: fallbackUserRate,
         effectiveRate: group.effective_rate_multiplier ?? fallbackUserRate,
@@ -2176,11 +2198,29 @@ const groupRoutingChanged = (
 
 // Group dropdown search
 const groupSearchQuery = ref('')
+const activeGroupPlatform = ref<GroupPlatform | null>(null)
+const groupPlatforms = computed(() => {
+  const platforms = Array.from(new Set(groupOptions.value.map((option) => option.platform)))
+  return [
+    {
+      value: null as GroupPlatform | null,
+      label: t('admin.groups.platforms.all'),
+      count: groupOptions.value.length
+    },
+    ...platforms.map((platform) => ({
+      value: platform,
+      label: t(`admin.groups.platforms.${platform}`),
+      count: groupOptions.value.filter((option) => option.platform === platform).length
+    }))
+  ]
+})
 const filteredGroupOptions = computed(() => {
   const query = groupSearchQuery.value.trim().toLowerCase()
-  if (!query) return groupOptions.value
+  const platform = activeGroupPlatform.value
+  if (!query && !platform) return groupOptions.value
   return groupOptions.value.filter((opt) => {
-    return opt.label.toLowerCase().includes(query) ||
+    if (platform && opt.platform !== platform) return false
+    return !query || opt.label.toLowerCase().includes(query) ||
       (opt.description && opt.description.toLowerCase().includes(query))
   })
 })
@@ -2350,6 +2390,7 @@ const closeGroupSelectorPopover = (restoreFocus: boolean) => {
   groupSelectorKeyId.value = null
   dropdownPosition.value = null
   groupSearchQuery.value = ''
+  activeGroupPlatform.value = null
   if (restoreFocus) {
     void nextTick(() => groupButtonRefs.value.get(keyId)?.focus())
   }
@@ -2367,7 +2408,7 @@ const updateGroupSelectorPosition = (): boolean => {
   const dropdownHeight = Math.min(dropdownRef.value?.offsetHeight || 400, maxDropdownHeight)
   const spaceBelow = window.innerHeight - rect.bottom - viewportPadding
   const spaceAbove = rect.top - viewportPadding
-  const dropdownWidth = Math.min(380, Math.max(0, window.innerWidth - viewportPadding * 2))
+  const dropdownWidth = Math.min(544, Math.max(0, window.innerWidth - viewportPadding * 2))
   const maxLeft = Math.max(viewportPadding, window.innerWidth - dropdownWidth - viewportPadding)
   const clampedLeft = Math.min(Math.max(rect.left, viewportPadding), maxLeft)
   const preferredTop = spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove
@@ -2395,6 +2436,7 @@ const openGroupSelector = async (key: ApiKey) => {
 
   groupSelectorKeyId.value = key.id
   groupSearchQuery.value = ''
+  activeGroupPlatform.value = null
   if (!updateGroupSelectorPosition()) {
     closeGroupSelectorPopover(false)
     return