fix(web): add missing token hints and existing channel badge to AddChannelModal

- Display accounts that have model availability but lack tokens,
  with a "create token" action button for each
- Mark already-added channel accounts with a badge
- Improve empty state message to guide users on next steps
- Search now filters both available accounts and missing-token accounts

src/web/pages/token-routes/AddChannelModal.tsx

@@ -5,6 +5,7 @@ import { api } from '../../api.js';
 import { useToast } from '../../components/Toast.js';
 import { tr } from '../../i18n.js';
 import type { RouteCandidateView, RouteAccountOption, RouteTokenOption } from '../helpers/routeModelCandidatesIndex.js';
+import type { RouteMissingTokenHint } from '../helpers/routeMissingTokenHints.js';
 
 type ChannelSelection = {
   accountId: number;
@@ -19,6 +20,9 @@ type AddChannelModalProps = {
   routeTitle: string;
   candidateView: RouteCandidateView;
   onSuccess: () => void;
+  missingTokenHints?: RouteMissingTokenHint[];
+  onCreateTokenForMissing?: (accountId: number, modelName: string) => void;
+  existingChannelAccountIds?: Set<number>;
 };
 
 export default function AddChannelModal({
@@ -28,6 +32,9 @@ export default function AddChannelModal({
   routeTitle,
   candidateView,
   onSuccess,
+  missingTokenHints,
+  onCreateTokenForMissing,
+  existingChannelAccountIds,
 }: AddChannelModalProps) {
   const toast = useToast();
   const [searchQuery, setSearchQuery] = useState('');
@@ -42,6 +49,26 @@ export default function AddChannelModal({
     );
   }, [candidateView.accountOptions, searchQuery]);
 
+  const missingAccounts = useMemo(() => {
+    if (!missingTokenHints || missingTokenHints.length === 0) return [];
+    const seen = new Map<number, { accountId: number; label: string; modelName: string }>();
+    for (const hint of missingTokenHints) {
+      for (const account of hint.accounts) {
+        if (!seen.has(account.accountId)) {
+          const label = `${account.username || `account-${account.accountId}`} @ ${account.siteName}`;
+          seen.set(account.accountId, { accountId: account.accountId, label, modelName: hint.modelName });
+        }
+      }
+    }
+    return Array.from(seen.values());
+  }, [missingTokenHints]);
+
+  const filteredMissingAccounts = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return missingAccounts;
+    return missingAccounts.filter((item) => item.label.toLowerCase().includes(q));
+  }, [missingAccounts, searchQuery]);
+
   const selectedCount = Object.keys(selectedAccounts).length;
 
   const toggleAccount = (account: RouteAccountOption) => {
@@ -151,15 +178,19 @@ export default function AddChannelModal({
         </div>
 
         <div style={{ maxHeight: 360, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 4 }}>
-          {filteredAccounts.length === 0 ? (
+          {filteredAccounts.length === 0 && filteredMissingAccounts.length === 0 ? (
             <div style={{ fontSize: 13, color: 'var(--color-text-muted)', padding: '12px 0', textAlign: 'center' }}>
-              {candidateView.accountOptions.length === 0 ? tr('当前没有可用的账号') : tr('没有匹配的账号')}
+              {candidateView.accountOptions.length === 0 && missingAccounts.length === 0
+                ? tr('当前没有可用的账号，请确认已有账号的令牌支持调用此模型')
+                : tr('没有匹配的账号')}
             </div>
           ) : (
-            filteredAccounts.map((account) => {
+            <>
+              {filteredAccounts.map((account) => {
                 const isSelected = !!selectedAccounts[account.id];
                 const tokens = candidateView.tokenOptionsByAccountId[account.id] || [];
                 const selection = selectedAccounts[account.id];
+                const isExisting = existingChannelAccountIds?.has(account.id);
 
                 return (
                   <div
@@ -183,6 +214,9 @@ export default function AddChannelModal({
                         style={{ cursor: 'pointer' }}
                       />
                       <span style={{ fontSize: 13, fontWeight: 500 }}>{account.label}</span>
+                      {isExisting && (
+                        <span className="badge badge-muted" style={{ fontSize: 10 }}>{tr('已添加')}</span>
+                      )}
                     </div>
 
                     {isSelected && tokens.length > 0 && (
@@ -215,7 +249,39 @@ export default function AddChannelModal({
                     )}
                   </div>
                 );
-            })
+              })}
+
+              {/* Missing token hints */}
+              {filteredMissingAccounts.length > 0 && (
+                <div style={{ borderTop: '1px dashed var(--color-border)', paddingTop: 8, marginTop: 4, display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 2 }}>
+                    {tr('以下账号可用此模型但缺少令牌')}:
+                  </div>
+                  {filteredMissingAccounts.map((item) => (
+                    <div
+                      key={item.accountId}
+                      style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                        padding: '6px 10px', borderRadius: 'var(--radius-sm)',
+                        border: '1px dashed var(--color-border)', background: 'var(--color-bg)',
+                      }}
+                    >
+                      <span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>{item.label}</span>
+                      {onCreateTokenForMissing && (
+                        <button
+                          type="button"
+                          className="btn btn-link"
+                          style={{ fontSize: 11, padding: '2px 6px' }}
+                          onClick={() => onCreateTokenForMissing(item.accountId, item.modelName)}
+                        >
+                          {tr('创建令牌')}
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>