john
ec38ee086d
Centralize whitelist and channel toggles away from the WeChat page so Cursor stays an opt-in path for selected users only. Co-authored-by: Cursor <cursoragent@cursor.com>
541 lines
19 KiB
TypeScript
541 lines
19 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import {
|
||
getWechatCursorExecutorConfig,
|
||
getWechatCursorExecutorRuntime,
|
||
listAdminUsers,
|
||
patchWechatCursorExecutorConfig,
|
||
} from '../../api/client';
|
||
import type {
|
||
AdminUserRow,
|
||
WechatCursorExecutorAdminConfig,
|
||
WechatCursorExecutorRuntimeState,
|
||
} from '../../types';
|
||
import { formatTime } from '../utils/format';
|
||
|
||
type CursorChannelForm = {
|
||
enabled: boolean;
|
||
h5Enabled: boolean;
|
||
wechatEnabled: boolean;
|
||
selectedUserIds: string[];
|
||
manualAllowlistEntries: string[];
|
||
intentAllowlist: string;
|
||
fallbackToDeepseek: boolean;
|
||
};
|
||
|
||
const USER_ID_PATTERN =
|
||
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
||
|
||
function userMatchesAllowlistToken(user: AdminUserRow, token: string) {
|
||
const normalized = token.trim().toLowerCase();
|
||
if (!normalized) return false;
|
||
const identities = [user.id, user.username, user.slug, user.publishSlug, user.displayName]
|
||
.map((value) => String(value ?? '').trim().toLowerCase())
|
||
.filter(Boolean);
|
||
return identities.includes(normalized);
|
||
}
|
||
|
||
function resolveAllowlistTokens(tokens: string[], users: AdminUserRow[]) {
|
||
const selectedUserIds: string[] = [];
|
||
const manualAllowlistEntries: string[] = [];
|
||
const seenIds = new Set<string>();
|
||
|
||
for (const rawToken of tokens) {
|
||
const token = String(rawToken ?? '').trim();
|
||
if (!token) continue;
|
||
const matchedUser = users.find((user) => userMatchesAllowlistToken(user, token));
|
||
if (matchedUser) {
|
||
if (!seenIds.has(matchedUser.id)) {
|
||
seenIds.add(matchedUser.id);
|
||
selectedUserIds.push(matchedUser.id);
|
||
}
|
||
continue;
|
||
}
|
||
if (USER_ID_PATTERN.test(token)) {
|
||
if (!seenIds.has(token)) {
|
||
seenIds.add(token);
|
||
selectedUserIds.push(token);
|
||
}
|
||
continue;
|
||
}
|
||
manualAllowlistEntries.push(token);
|
||
}
|
||
|
||
return { selectedUserIds, manualAllowlistEntries };
|
||
}
|
||
|
||
function configToForm(
|
||
config: WechatCursorExecutorAdminConfig | undefined,
|
||
users: AdminUserRow[] = [],
|
||
): CursorChannelForm {
|
||
const tokens = Array.isArray(config?.userAllowlist) ? config.userAllowlist : [];
|
||
const channels = Array.isArray(config?.channelAllowlist) ? config.channelAllowlist : ['h5', 'wechat_mp'];
|
||
const { selectedUserIds, manualAllowlistEntries } = resolveAllowlistTokens(tokens, users);
|
||
return {
|
||
enabled: Boolean(config?.enabled),
|
||
h5Enabled: channels.includes('h5'),
|
||
wechatEnabled: channels.includes('wechat_mp'),
|
||
selectedUserIds,
|
||
manualAllowlistEntries,
|
||
intentAllowlist: Array.isArray(config?.intentAllowlist)
|
||
? config.intentAllowlist.join('\n')
|
||
: 'page.generate',
|
||
fallbackToDeepseek: config?.fallbackToDeepseek !== false,
|
||
};
|
||
}
|
||
|
||
function formToAllowlist(form: CursorChannelForm) {
|
||
const manual = form.manualAllowlistEntries.map((item) => item.trim()).filter(Boolean);
|
||
return [...new Set([...form.selectedUserIds, ...manual])];
|
||
}
|
||
|
||
function formToChannelAllowlist(form: CursorChannelForm) {
|
||
const channels: string[] = [];
|
||
if (form.h5Enabled) channels.push('h5');
|
||
if (form.wechatEnabled) channels.push('wechat_mp');
|
||
return channels;
|
||
}
|
||
|
||
function CursorAllowlistPickerModal({
|
||
open,
|
||
users,
|
||
selectedUserIds,
|
||
busy,
|
||
onClose,
|
||
onConfirm,
|
||
}: {
|
||
open: boolean;
|
||
users: AdminUserRow[];
|
||
selectedUserIds: string[];
|
||
busy?: boolean;
|
||
onClose: () => void;
|
||
onConfirm: (nextIds: string[]) => void;
|
||
}) {
|
||
const [search, setSearch] = useState('');
|
||
const [draftIds, setDraftIds] = useState<string[]>(selectedUserIds);
|
||
const [pickerUsers, setPickerUsers] = useState<AdminUserRow[]>(users);
|
||
const [loadingUsers, setLoadingUsers] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
setDraftIds(selectedUserIds);
|
||
setSearch('');
|
||
setPickerUsers(users);
|
||
}, [open, selectedUserIds, users]);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const timer = window.setTimeout(() => {
|
||
void (async () => {
|
||
setLoadingUsers(true);
|
||
try {
|
||
const result = await listAdminUsers({
|
||
page: 1,
|
||
pageSize: 500,
|
||
status: 'active',
|
||
search: search.trim() || undefined,
|
||
});
|
||
setPickerUsers(result.items);
|
||
} catch {
|
||
setPickerUsers(users);
|
||
} finally {
|
||
setLoadingUsers(false);
|
||
}
|
||
})();
|
||
}, search.trim() ? 250 : 0);
|
||
return () => window.clearTimeout(timer);
|
||
}, [open, search, users]);
|
||
|
||
if (!open) return null;
|
||
|
||
const visibleIds = pickerUsers.map((user) => user.id);
|
||
const allVisibleSelected =
|
||
visibleIds.length > 0 && visibleIds.every((id) => draftIds.includes(id));
|
||
|
||
return (
|
||
<div
|
||
className="modal-backdrop"
|
||
role="presentation"
|
||
onMouseDown={(event) => {
|
||
if (event.target === event.currentTarget) onClose();
|
||
}}
|
||
>
|
||
<div
|
||
className="modal-box"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="cursor-allowlist-picker-title"
|
||
style={{ maxWidth: 720, width: 'min(720px, calc(100vw - 32px))' }}
|
||
onMouseDown={(event) => event.stopPropagation()}
|
||
>
|
||
<div className="modal-head">
|
||
<div>
|
||
<h3 id="cursor-allowlist-picker-title">选择体验通道用户</h3>
|
||
<p className="muted" style={{ margin: '6px 0 0', fontSize: 13 }}>
|
||
仅勾选用户会进入 TKMind 智趣独立通道；其余用户完全不受影响，仍走原有 DeepSeek/Goose 链路。
|
||
</p>
|
||
</div>
|
||
<button type="button" className="modal-close" onClick={onClose} aria-label="关闭">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="wechat-toolbar" style={{ marginBottom: 12 }}>
|
||
<input
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
placeholder="搜索用户名、昵称或 userId"
|
||
style={{ flex: 1, minWidth: 220 }}
|
||
autoFocus
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="ghost-btn"
|
||
disabled={loadingUsers || pickerUsers.length === 0}
|
||
onClick={() => {
|
||
setDraftIds((current) => {
|
||
if (allVisibleSelected) {
|
||
return current.filter((id) => !visibleIds.includes(id));
|
||
}
|
||
return [...new Set([...current, ...visibleIds])];
|
||
});
|
||
}}
|
||
>
|
||
{allVisibleSelected ? '取消全选当前列表' : '全选当前列表'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="cursor-allowlist-picker-list">
|
||
{loadingUsers ? <p className="muted">加载用户…</p> : null}
|
||
{!loadingUsers && pickerUsers.length === 0 ? (
|
||
<p className="muted">没有匹配的用户</p>
|
||
) : null}
|
||
{pickerUsers.map((user) => (
|
||
<label key={user.id} className="cursor-allowlist-picker-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={draftIds.includes(user.id)}
|
||
onChange={() => {
|
||
setDraftIds((current) =>
|
||
current.includes(user.id)
|
||
? current.filter((id) => id !== user.id)
|
||
: [...current, user.id],
|
||
);
|
||
}}
|
||
/>
|
||
<span>
|
||
{user.displayName || user.username}
|
||
<span className="muted"> @{user.username}</span>
|
||
</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
|
||
<div className="modal-actions">
|
||
<button type="button" className="ghost-btn" onClick={onClose} disabled={busy}>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="primary-btn"
|
||
disabled={busy}
|
||
onClick={() => onConfirm(draftIds)}
|
||
>
|
||
确认选择 ({draftIds.length})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function CursorChannelPage() {
|
||
const [users, setUsers] = useState<AdminUserRow[]>([]);
|
||
const [form, setForm] = useState<CursorChannelForm | null>(null);
|
||
const [savedForm, setSavedForm] = useState<CursorChannelForm | null>(null);
|
||
const [runtime, setRuntime] = useState<WechatCursorExecutorRuntimeState | null>(null);
|
||
const [pickerOpen, setPickerOpen] = useState(false);
|
||
const [loading, setLoading] = useState(true);
|
||
const [saving, setSaving] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [notice, setNotice] = useState<string | null>(null);
|
||
|
||
const dirty = useMemo(() => {
|
||
if (!form || !savedForm) return false;
|
||
return JSON.stringify(form) !== JSON.stringify(savedForm);
|
||
}, [form, savedForm]);
|
||
|
||
const selectedUsers = useMemo(() => {
|
||
if (!form) return [];
|
||
const byId = new Map(users.map((user) => [user.id, user]));
|
||
return form.selectedUserIds.map((userId) => ({
|
||
userId,
|
||
user: byId.get(userId) ?? null,
|
||
}));
|
||
}, [form, users]);
|
||
|
||
const load = useCallback(async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const [nextUsers, nextConfig, nextRuntime] = await Promise.all([
|
||
listAdminUsers({ page: 1, pageSize: 200, status: 'active' }),
|
||
getWechatCursorExecutorConfig().catch(() => null),
|
||
getWechatCursorExecutorRuntime().catch(() => null),
|
||
]);
|
||
setUsers(nextUsers.items);
|
||
const nextForm = configToForm(nextConfig?.config, nextUsers.items);
|
||
setForm(nextForm);
|
||
setSavedForm(nextForm);
|
||
setRuntime(nextRuntime);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : '加载失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
void load();
|
||
}, [load]);
|
||
|
||
const handleSave = async () => {
|
||
if (!form) return;
|
||
setSaving(true);
|
||
setError(null);
|
||
setNotice(null);
|
||
try {
|
||
const channelAllowlist = formToChannelAllowlist(form);
|
||
if (form.enabled && channelAllowlist.length === 0) {
|
||
throw new Error('启用体验通道时，至少选择一个接入渠道（H5 或服务号）');
|
||
}
|
||
if (form.enabled && formToAllowlist(form).length === 0) {
|
||
throw new Error('启用体验通道时，至少选择一名白名单用户');
|
||
}
|
||
const result = await patchWechatCursorExecutorConfig({
|
||
enabled: form.enabled,
|
||
userAllowlist: formToAllowlist(form),
|
||
channelAllowlist,
|
||
intentAllowlist: form.intentAllowlist
|
||
.split(/[\s,]+/u)
|
||
.map((item) => item.trim())
|
||
.filter(Boolean),
|
||
fallbackToDeepseek: form.fallbackToDeepseek,
|
||
});
|
||
const nextForm = configToForm(result.config, users);
|
||
setForm(nextForm);
|
||
setSavedForm(nextForm);
|
||
setRuntime(await getWechatCursorExecutorRuntime().catch(() => null));
|
||
setNotice('TKMind 智趣体验通道已保存。未在白名单内的用户不受影响。');
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : '保存失败');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="admin-page">
|
||
<div className="admin-page-head">
|
||
<h2>TKMind 智趣体验通道</h2>
|
||
<p className="muted">
|
||
独立于现有 DeepSeek/Goose 链路的 Cursor 执行通道。仅对白名单用户生效，支持 H5 与服务号；其余用户完全不受影响。
|
||
</p>
|
||
</div>
|
||
|
||
{error && <p className="banner banner-error">{error}</p>}
|
||
{notice && <p className="banner banner-info">{notice}</p>}
|
||
|
||
<section className="admin-card">
|
||
<h3>通道说明</h3>
|
||
<ul className="muted" style={{ margin: '8px 0 0', paddingLeft: 20, lineHeight: 1.7 }}>
|
||
<li>
|
||
<strong>H5</strong>：白名单用户在页面生成、问卷(Page Data)、Excel 分析等任务时，走 Cursor 独立执行。
|
||
</li>
|
||
<li>
|
||
<strong>服务号</strong>：白名单用户在指定意图（默认 page.generate）下走 Cursor；其余意图仍走原有链路。
|
||
</li>
|
||
<li>非白名单用户：H5 与服务号均保持原有 DeepSeek/Goose 行为，不会被 Cursor 路由影响。</li>
|
||
</ul>
|
||
<p className="muted" style={{ marginTop: 12 }}>
|
||
服务端需开启 <code>MEMIND_CURSOR_EXECUTOR_ENABLED=1</code> 与 Tool Gateway；详见 Memind{' '}
|
||
<code>.env.example</code>。
|
||
</p>
|
||
</section>
|
||
|
||
{form ? (
|
||
<section className="admin-card">
|
||
<div className="admin-card-head">
|
||
<div>
|
||
<h2>通道配置</h2>
|
||
<p className="muted" style={{ marginTop: 6 }}>
|
||
默认关闭。开启后仅白名单用户进入智趣通道，不影响其他用户。
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ghost-btn"
|
||
onClick={() => void handleSave()}
|
||
disabled={loading || saving || !dirty}
|
||
>
|
||
{saving ? '保存中…' : dirty ? '保存配置' : '已保存'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="admin-form" style={{ marginTop: 16 }}>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
checked={form.enabled}
|
||
disabled={loading || saving}
|
||
onChange={(event) =>
|
||
setForm((current) => current && { ...current, enabled: event.target.checked })
|
||
}
|
||
/>{' '}
|
||
启用智趣体验通道
|
||
</label>
|
||
<fieldset style={{ border: 'none', padding: 0, margin: '12px 0' }}>
|
||
<legend className="muted" style={{ marginBottom: 8 }}>
|
||
接入渠道
|
||
</legend>
|
||
<label style={{ display: 'block', marginBottom: 8 }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={form.h5Enabled}
|
||
disabled={loading || saving}
|
||
onChange={(event) =>
|
||
setForm((current) => current && { ...current, h5Enabled: event.target.checked })
|
||
}
|
||
/>{' '}
|
||
H5 聊天
|
||
</label>
|
||
<label style={{ display: 'block' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={form.wechatEnabled}
|
||
disabled={loading || saving}
|
||
onChange={(event) =>
|
||
setForm((current) => current && { ...current, wechatEnabled: event.target.checked })
|
||
}
|
||
/>{' '}
|
||
微信服务号
|
||
</label>
|
||
</fieldset>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
checked={form.fallbackToDeepseek}
|
||
disabled={loading || saving}
|
||
onChange={(event) =>
|
||
setForm((current) =>
|
||
current && { ...current, fallbackToDeepseek: event.target.checked },
|
||
)
|
||
}
|
||
/>{' '}
|
||
Cursor 失败时自动回退 DeepSeek
|
||
</label>
|
||
<label>
|
||
体验用户白名单
|
||
<div className="wechat-toolbar" style={{ marginTop: 8, marginBottom: 8 }}>
|
||
<button
|
||
type="button"
|
||
className="ghost-btn"
|
||
disabled={loading || saving}
|
||
onClick={() => setPickerOpen(true)}
|
||
>
|
||
从用户列表选择…
|
||
</button>
|
||
{form.selectedUserIds.length > 0 ? (
|
||
<button
|
||
type="button"
|
||
className="ghost-btn"
|
||
disabled={loading || saving}
|
||
onClick={() =>
|
||
setForm((current) => current && { ...current, selectedUserIds: [] })
|
||
}
|
||
>
|
||
清空已选
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
{selectedUsers.length > 0 ? (
|
||
<div className="cursor-allowlist-chips">
|
||
{selectedUsers.map(({ userId, user }) => (
|
||
<span key={userId} className="cursor-allowlist-chip">
|
||
<span>
|
||
{user ? user.displayName || user.username : userId}
|
||
{user ? <span className="muted"> @{user.username}</span> : null}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="cursor-allowlist-chip-remove"
|
||
aria-label="移出白名单"
|
||
disabled={loading || saving}
|
||
onClick={() =>
|
||
setForm((current) =>
|
||
current
|
||
? {
|
||
...current,
|
||
selectedUserIds: current.selectedUserIds.filter((id) => id !== userId),
|
||
}
|
||
: current,
|
||
)
|
||
}
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="muted" style={{ margin: 0 }}>
|
||
尚未选择用户。可在 <Link to="/users">用户管理</Link> 中查找账号后在此勾选。
|
||
</p>
|
||
)}
|
||
</label>
|
||
<label>
|
||
服务号启用意图（H5 不受此限制，默认 page.generate）
|
||
<textarea
|
||
value={form.intentAllowlist}
|
||
disabled={loading || saving}
|
||
rows={2}
|
||
placeholder="page.generate"
|
||
onChange={(event) =>
|
||
setForm((current) => current && { ...current, intentAllowlist: event.target.value })
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
{runtime ? (
|
||
<p className="muted" style={{ marginTop: 12 }}>
|
||
运行时：{runtime.policy.enabled ? '已开启' : '已关闭'}
|
||
{' · '}
|
||
白名单 {runtime.policy.userAllowlist.length} 人
|
||
{' · '}
|
||
渠道 {(runtime.policy.channelAllowlist ?? []).join('、') || '无'}
|
||
{' · '}
|
||
来源 {runtime.source}
|
||
{runtime.updatedAt ? ` · 更新 ${formatTime(runtime.updatedAt)}` : ''}
|
||
</p>
|
||
) : null}
|
||
</section>
|
||
) : null}
|
||
|
||
{form ? (
|
||
<CursorAllowlistPickerModal
|
||
open={pickerOpen}
|
||
users={users}
|
||
selectedUserIds={form.selectedUserIds}
|
||
busy={loading || saving}
|
||
onClose={() => setPickerOpen(false)}
|
||
onConfirm={(nextIds) => {
|
||
setForm((current) => current && { ...current, selectedUserIds: nextIds });
|
||
setPickerOpen(false);
|
||
}}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|