/* screens-channels.jsx — 桌面端「设置 → 消息渠道」交互稿
* 视觉对齐 officev3 桌面端 SettingModal（Tailwind + Shadcn）：
* - 外壳 880×620 / 16px 圆角 / 纯白底 / 50% 黑遮罩
* - 左导航 #F7F7F7 / 选中态紫色 #8E6BF2
* - 卡片 rounded-2xl + 1px 边框 + 16px 内边距
* - 主按钮紫底白字 / 次按钮白底灰边 / 危险红
* - 字体沿用项目 Inter + PingFang SC
* 飞书图标取自 officev3/public/onboarding/feishu_2x.png
* 微信图标采用经典「双气泡」微信 Logo（区别于微信支付的单气泡）
*/
/* global React */
const C = {
brand: '#8E6BF2',
brandSoft: '#F3EFFD',
ok: '#56D9B6',
okSoft: 'rgba(86,217,182,0.16)',
danger: '#FF4F61',
ink: '#0A0A06',
ink2: '#333329',
ink3: '#57574A',
mute: '#808080',
border: '#ECECEC',
borderSoft: '#F2F2F0',
navBg: '#F7F7F7',
panel: '#FFFFFF',
font: '"Inter","PingFang SC",-apple-system,BlinkMacSystemFont,system-ui,sans-serif',
};
/* ---------- 品牌 / 通用 icon ---------- */
function FeishuIcon({ size = 40 }) {
return (
);
}
function WechatIcon({ size = 40 }) {
return (
);
}
function RaccoonChannelIcon({ size = 40 }) {
return (
);
}
function MiniAppIcon({ size = 20 }) {
return (
浣
);
}
/* ---------- 通用控件 ---------- */
function Badge({ kind = 'gray', children }) {
const map = {
gray: { bg: '#F2F2F0', fg: C.ink2 },
green: { bg: C.okSoft, fg: '#1E9C7E' },
red: { bg: 'rgba(255,79,97,0.12)', fg: C.danger },
mute: { bg: '#F2F2F0', fg: C.mute },
};
const s = map[kind];
return (
{kind === 'green' && }
{children}
);
}
function Btn({ kind = 'secondary', children, disabled, loading, w }) {
const base = {
height: 32, padding: '0 14px', borderRadius: 6,
fontSize: 13, fontWeight: 500, lineHeight: 1,
fontFamily: 'inherit',
cursor: disabled ? 'not-allowed' : 'pointer',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
border: '1px solid transparent', whiteSpace: 'nowrap',
width: w,
opacity: disabled ? 0.5 : 1,
transition: 'all .12s',
};
const styles = {
primary: { background: C.brand, color: '#fff' },
secondary: { background: '#fff', color: C.ink2, borderColor: '#E6E6E6' },
ghost: { background: 'transparent', color: C.ink3 },
danger: { background: C.danger, color: '#fff' },
dangerGhost: { background: '#fff', color: C.danger, borderColor: 'rgba(255,79,97,0.3)' },
};
return ;
}
function Input({ value, placeholder, type = 'text' }) {
return (
{value ? (type === 'password' ? '•'.repeat(20) : value) : placeholder}
);
}
/* ---------- 设置 Modal 左导航 · 真实图标（来源：officev3/public/svgs/setting） ---------- */
function NavIcon({ kind, active }) {
const stroke = active ? '#8E6BF2' : '#57574A';
const accent = active ? '#8E6BF2' : stroke;
const common = { width: 16, height: 16, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' };
if (kind === 'account') return (
);
if (kind === 'shortcut') return (
);
if (kind === 'guide') return (
);
if (kind === 'plugin') return (
);
if (kind === 'storage') return (
);
if (kind === 'channels') return (
/* Lucide Database：沿用桌面端「连接数据源」入口图标 */
);
if (kind === 'about') return (
);
return null;
}
function SettingsShell({ children, active = 'channels', dim }) {
const navItems = [
{ id: 'account', label: '我的账号' },
{ id: 'shortcut', label: '快捷键' },
{ id: 'guide', label: '新手引导' },
{ id: 'plugin', label: '插件' },
{ id: 'storage', label: '存储管理' },
{ id: 'channels', label: '消息渠道' },
{ id: 'about', label: '关于我们' },
];
return (
{/* 左导航 */}
设置
{navItems.map((n) => {
const on = active === n.id;
return (
{n.label}
);
})}
{/* 主内容区 */}
{children}
{/* 右上角关闭 */}
×
消息渠道
让常用的 IM 工具直接连上本地 AI，外部消息会转发到桌面端 local-agent 执行。
);
}
/* ---------- 飞书卡片 ---------- */
function FeishuCard({ state = 'none' }) {
const connected = state === 'connected';
return (
注册飞书应用以通过飞书接收和回复消息。
{connected ? (
办公小浣熊助手
· cli_a92360••••9bb4
) : (
配置指南 →
)}
{connected && 解绑}
配置
);
}
/* ---------- 微信卡片 ---------- */
function WechatCard({ state = 'none' }) {
const connected = state === 'connected';
return (
微信 ClawBot
{connected &&
已连接}
扫码授权微信 ClawBot 以接收和回复消息。
{connected ? (
Bot ID：wxbot_3f9a••••e21c
) : null}
{connected && 解绑}
配置
);
}
/* ---------- 自家移动端 · 敬请期待 ---------- */
function MobileCard() {
return (
将支持在手机办公小浣熊 App 内随时唤起本地 AI。
敬请期待
);
}
function Card({ children, disabled }) {
return (
{children}
);
}
/* ===========================================================
* 弹窗：飞书注册 / 微信注册 / 解绑确认
* 每个弹窗都画在画板内：底层 Settings 面板被遮罩，弹窗居中
* =========================================================== */
function ModalLayer({ children, w = 480 }) {
return (
);
}
function ModalHeader({ title, onClose = true }) {
return (
);
}
/* ---------- 飞书注册弹窗 · 空 / 错误 ---------- */
function FeishuModal({ variant = 'empty' }) {
const error = variant === 'error';
return (
取消
{error ? '重试' : '注册'}
);
}
/* ---------- 微信注册弹窗 · 等待扫码 / 已扫码 / 已过期 ---------- */
function WechatModal({ variant = 'waiting' }) {
return (
使用个人微信扫码授权 ClawBot 接入本机。
登录态由本地保管，不上传服务器。
{variant === 'waiting' && '⟳ 请使用微信扫描二维码'}
{variant === 'scanned' && '✓ 请在手机上点击「确认」'}
{variant === 'expired' && (
)}
取消
);
}
function QrBox({ variant }) {
const size = 168;
if (variant === 'scanned') {
return (
);
}
if (variant === 'expired') {
return (
);
}
// waiting: 伪二维码（CSS 矩阵）
return (
);
}
function FakeQr() {
// 14×14 网格的伪二维码
const N = 14;
const seed = [
'11111110011111',
'10000010111001',
'10111010001101',
'10111011110001',
'10111010011011',
'10000011001101',
'11111110101011',
'00000001100100',
'11011110011011',
'01000011101101',
'11101010010011',
'00100110110101',
'11011011001011',
'10110110100111',
];
return (
{seed.map((row, r) => row.split('').map((b, c) => (
)))}
{txt.body}
取消
解绑
);
}
/* ===========================================================
* 画板导出（每个画板就是一张设置 Modal，单独或叠加弹窗）
* 画板宽度 = 880（Modal 宽度），高度 = 620（Modal 高度）
* =========================================================== */
function CH_Default() { return ; }
function CH_FeishuConnected() { return ; }
function CH_BothConnected() { return ; }
function CH_FeishuModalEmpty() {
return ;
}
function CH_FeishuModalError() {
return ;
}
function CH_WechatWaiting() {
return ;
}
function CH_WechatScanned() {
return ;
}
function CH_WechatExpired() {
return ;
}
function CH_UnbindFeishu() {
return ;
}
function CH_UnbindWechat() {
return ;
}
Object.assign(window, {
CH_Default, CH_FeishuConnected, CH_BothConnected,
CH_FeishuModalEmpty, CH_FeishuModalError,
CH_WechatWaiting, CH_WechatScanned, CH_WechatExpired,
CH_UnbindFeishu, CH_UnbindWechat,
});
