Mesop DuoChat Codelab 第 2 篇用 Mesop 组件与样式系统构建聊天应用基础 UI【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop本教程是 Mesop DuoChat Codelab 系列的第二部分将手把手带你完成 DuoChat 应用的页面骨架包括页面整体布局header、聊天输入区、自定义样式与外部字体加载以及基于状态管理的输入交互。读完本文你将掌握 Mesop 的box组件布局技巧、Python 化的样式系统Style/Margin/Padding/Border以及me.stateclass状态管理的基本用法并为后续的模型选择对话框、多模型对话功能打下基础。整个 Codelab 系列的入口与前置准备虚拟环境、requirements.txt、运行mesop main.py见 docs/codelab/index.md。1. 本阶段的总体目标在第一部分中我们的main.py只是一个打印 Welcome to DuoChat! 的极简页面。本阶段要做三件事重构主布局用 Mesop 的box组件组织页面结构加入 header、聊天输入区并定义统一的根样式引入样式体系通过me.Style以 Python 类的方式声明 CSS 属性加载 Inter 外部字体添加基础交互用me.stateclass定义应用状态让文本框失焦时保存输入、点击发送按钮时清空输入。每一步修改之后都可以用mesop main.py启动应用并在http://localhost:32123实时查看效果Mesop 支持热重载。2. 重构主布局从单行文本到结构化页面2.1 完整的main.py布局代码将main.py的内容整体替换为以下代码import mesop as me ROOT_BOX_STYLE me.Style( background#e7f2ff, height100%, font_familyInter, displayflex, flex_directioncolumn, ) me.page( path/, stylesheets[ https://fonts.googleapis.com/css2?familyInter:wght100..900displayswap ], ) def page(): with me.box(styleROOT_BOX_STYLE): header() with me.box( styleme.Style( widthmin(680px, 100%), marginme.Margin.symmetric( horizontalauto, vertical36, ), ) ): me.text( Chat with multiple models at once, styleme.Style( font_size20, marginme.Margin(bottom24), ), ) chat_input() def header(): with me.box( styleme.Style( paddingme.Padding.all(16), ), ): me.text( DuoChat, styleme.Style( font_weight500, font_size24, color#3D3929, letter_spacing0.3px, ), ) def chat_input(): with me.box( styleme.Style( border_radius16, paddingme.Padding.all(8), backgroundwhite, displayflex, width100%, ) ): with me.box(styleme.Style(flex_grow1)): me.native_textarea( placeholderEnter a prompt, styleme.Style( paddingme.Padding(top16, left16), outlinenone, width100%, borderme.Border.all(me.BorderSide(stylenone)), ), ) with me.content_button(typeicon): me.icon(send)运行并观察效果mesop main.py2.2 布局要点逐条拆解对照代码本阶段的四个关键设计点ROOT_BOX_STYLE定义整体基调设置浅蓝背景#e7f2ff、占满全高height100%、指定 Inter 字体族并用displayflexflex_directioncolumn让页面内容沿纵向排列为 header 与主体内容提供纵向弹性布局基础。me.page的stylesheets参数加载外部字体将 Google Fonts 的 Inter 字体样式表地址传入stylesheets列表页面加载时即会拉取字体资源保证font_familyInter全局生效。组件函数化拆分将header和chat_input从page中拆成独立函数页面主体通过嵌套的box组装职责清晰、便于后续扩展例如第 3 篇中的模型选择对话框、第 4 篇中的对话展示区都会挂到同样的骨架上。居中且自适应的内容列widthmin(680px, 100%)让内容列在窄屏时收缩、宽屏时封顶 680pxme.Margin.symmetric(horizontalauto, vertical36)使水平方向auto边距实现水平居中同时保留上下 36px 的垂直间距。2.3 从源码看box与me.pagebox是 Mesop 中最基础的容器组件。查看 mesop/components/box/box.py 可以看到它通过insert_composite_component注册为原生组件接受style、on_click、on_right_click、classes、key等参数style参数直接对应 HTML 元素的行内样式 API最终会被转换为对应的 style proto 下发给前端渲染。而me.page装饰器实现见 mesop/features/page.py会调用runtime().register_page把页面函数、title默认生成Mesop: {path}、stylesheets、security_policy、on_load等配置注册到运行时。也就是说stylesheets并不只是示例代码里的魔法参数而是页面配置的一等公民——它与security_policy默认使用严格安全策略等共同构成一个PageConfig。title参数同样在此配置若需要自定义浏览器标签页标题可参考 docs/api/config.md 与 docs/api/page.md。3. 深入理解 Mesop 的 Python 化样式系统3.1 样式即 Python 类Mesop 的样式系统是基于 Python 类对浏览器原生 CSS 样式 API 的封装完整定义见 mesop/component_helpers/style.py官方 API 文档见 docs/api/style.md。核心思想是每个 CSS 属性对应Styledataclass 的一个字段字段名采用 snake_case例如CSS 属性Style 字段示例取值backgroundbackground#e7f2ff、whitedisplaydisplayflex、block、grid、noneflex-directionflex_directionrow、columnflex-growflex_grow1font-familyfont_familyInterfont-sizefont_size20整数自动转20pxfont-weightfont_weight500、bold、mediumletter-spacingletter_spacing0.3pxwidth / heightwidth/heightmin(680px, 100%)、100%border-radiusborder_radius16outlineoutlinenoneoverflow-x / overflow-yoverflow_x/overflow_yautopositionpositionfixed、absolute、stickyz-indexz_index1000box-shadowbox_shadow标准 CSS 阴影字符串cursorcursorpointer从源码看Style的字段类型大多做了Literal 类型收窄例如display只接受block | inline | inline-flex | flex | grid | none | contents等预置值flex_direction限定为row | row-reverse | column | column-reversefont_weight限定为bold | normal | medium或 100900 的整数。这种设计让非法值在类型检查阶段如 Pyright就被拦截而非等到运行时出错。除预置取值外background、width、box_shadow等字段则接受任意合法 CSS 字符串保持了 CSS 的灵活性。3.2 辅助类Margin、Padding、Border 与 BorderSideStyle中的margin、padding、border不是普通字符串而是由专门的数据类描述Margin/Padding都继承自_EdgeInsets包含top/right/bottom/left四个方向字段并提供两个静态工厂方法all(value)四方向统一取值如me.Padding.all(8)、me.Padding.all(16)symmetric(vertical..., horizontal...)垂直top/bottom与水平left/right对称取值如me.Margin.symmetric(horizontalauto, vertical36)、me.Padding.symmetric(horizontal16)。也可以直接指定单边如me.Padding(top16, left16)、me.Margin(bottom24)。Border/BorderSideBorder同样支持all(...)与symmetric(...)工厂方法BorderSide描述单条边的width整数表示像素、color任意合法 CSS 颜色与stylenone | solid | dashed | dotted | double | ...。本阶段示例中me.Border.all(me.BorderSide(stylenone))即表示四条边都无边框样式用于去掉native_textarea的默认边框第 5 篇还会见到me.BorderSide(width1, colorblue, stylenone)的用法。3.3 数值自动转像素_px_str一个值得注意的底层细节在 style.py 的to_style_proto中几乎所有尺寸字段都会经过_px_str处理——当传入 Python 整数时会自动追加px单位例如font_size20会被转换为20px而传入字符串如min(680px, 100%)、100%则原样透传。这就是为什么本阶段代码里整数与字符串可以混用而不必担心单位问题。同理_map_font_weight会把medium映射为500Margin/Padding/Border也会被分别映射为对应的 proto 结构最终通过pb.Style下发给前端。4. 添加交互状态管理让输入活起来静态界面只是第一步。接下来为聊天输入区加入基本交互保存用户输入、响应发送按钮点击。4.1 完整的交互版chat_inputme.stateclass class State: input: str def on_blur(e: me.InputBlurEvent): state me.state(State) state.input e.value def chat_input(): state me.state(State) with me.box( styleme.Style( border_radius16, paddingme.Padding.all(8), backgroundwhite, displayflex, width100%, ) ): with me.box(styleme.Style(flex_grow1)): me.native_textarea( valuestate.input, placeholderEnter a prompt, on_bluron_blur, styleme.Style( paddingme.Padding(top16, left16), outlinenone, width100%, borderme.Border.all(me.BorderSide(stylenone)), ), ) with me.content_button(typeicon, on_clicksend_prompt): me.icon(send) def send_prompt(e: me.ClickEvent): state me.state(State) print(fSending prompt: {state.input}) state.input 4.2 三处新增内容说明State类管理应用状态用me.stateclass装饰器声明字段即状态本阶段只有一个input: str 。me.state(State)在任意组件函数或事件处理器中都能取到当前页面会话对应的状态实例其底层实现在 mesop/runtime/context.py 的state方法中。第 3 篇会将其扩展为包含对话列表、模型列表、API Key 等字段的完整状态模型。on_blur失焦保存输入me.native_textarea的on_blur回调接收me.InputBlurEvent定义见 mesop/components/input/input.py事件对象的value字段携带当前输入内容写入state.input。注意native_textarea通过valuestate.input与状态双向绑定保证界面与状态一致。send_prompt发送处理发送按钮me.content_button(typeicon)的on_click接收me.ClickEvent定义见 mesop/events/events.py当前实现只是打印输入并清空状态第 4 篇会在此基础上用 Python 生成器yield编排流式输出同时调用多个 AI 模型并实时渲染。一个关键的 Mesop 模型值得强调事件处理器修改state字段后Mesop 会自动重跑页面渲染函数因此只要把状态读写在事件与组件函数之间打通UI 就会自动刷新——这正是on_blur里改state.input、chat_input里读state.input形成闭环的原因。事件与状态管理更完整的介绍参见 docs/guides/state-management.md 与 docs/guides/event-handlers.md。5. 运行与验证再次启动应用mesop main.py浏览器访问http://localhost:32123应能看到顶部 DuoChat 标题栏Inter 字体、500 字重、24px 字号、深色文字居中的内容列与 Chat with multiple models at once 说明文字白色圆角输入框16px 圆角与右侧发送图标按钮在文本框中输入内容后失焦点击其他区域或按 Tab点击发送按钮终端会打印Sending prompt: ...同时输入框被清空。若需在部署或生产环境运行可参考 docs/guides/deployment.mdMesop 开发模式的更多调试技巧见 docs/guides/debugging.md。6. 常见问题排查字体没有生效确认me.page中stylesheets列表包含 Inter 的 Google Fonts 地址且ROOT_BOX_STYLE里font_familyInter写对Mesop 在渲染时会将其映射为 CSS 的font-family。布局没有居中确认内容列的margin使用了me.Margin.symmetric(horizontalauto, ...)水平auto边距是 Flex/块级布局中实现居中的关键。点击发送无反应检查on_clicksend_prompt是否传入函数引用而不是调用它并确认me.state(State)与me.stateclass装饰的类名一致。输入框出现浏览器默认边框本示例通过borderme.Border.all(me.BorderSide(stylenone))与outlinenone去除默认样式可对照检查这两处是否被遗漏。Codelab 每个阶段都有对应的完成版代码分支若代码对比有困难可回到 docs/codelab/index.md 查看各阶段分支的说明。7. 下一步本阶段完成了 DuoChat 的页面骨架、样式系统应用与基础输入交互。下一节将扩展状态管理并实现模型选择对话框定义更完整的data_model.py对话、消息、模型枚举、API Key并用me.content_component封装可复用的dialog组件让用户在多模型对话框中勾选模型、填写 Gemini/Claude 的 API Key——这正是 DuoChat同时与多个 AI 模型对话能力的起点详见 docs/codelab/3.md。【免费下载链接】mesopRapidly build AI apps in Python项目地址: https://gitcode.com/GitHub_Trending/me/mesop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考