#设计工作室

在设计列表点击「编辑」、「新建设计」或任意起点，就会进入设计工作室。左侧是编辑面板，右侧是实时预览，修改会立即反映到预览中。

#界面总览

页面顶部会显示「有未保存的修改」或「已保存」。有未保存的修改时离开页面，浏览器会提示确认。

#外观

外观面板从上到下依次是：

• 布局：居中卡片、左图右表、左表右图、全屏侧栏。
• 配色：明暗模式（浅色、深色、跟随系统），以及主色、主色上的文字、卡片背景、文字、次要文字、边框、输入框背景。
• 页面背景：纯色、渐变、弥散、极光或图片；图片背景可调遮罩和模糊。
• 品牌面板：分栏布局时生效，可设置面板颜色、面板图片和装饰动效（环形、网格、波浪）。
• 形状与排版：圆角、表单宽度、阴影和字体。

#动效

访客在系统中开启「减少动态效果」时，所有动画会自动关闭。

#内容

• 文案：登录页标语与注册页标语，分栏布局时显示在品牌面板上。
• 自定义区块：品牌面板 HTML（仅分栏布局）、表单上方、表单下方。片段按钮可以插入标题、亮点列表、数据、引言、图片、标签、提示、协议、联系等内容。

自定义区块可以使用内置样式类 auth-chip、auth-features、auth-quote、auth-stats、auth-big、auth-gradient-text。给元素加上 data-animate="rise|fade|zoom|slide|float" 和 data-delay="毫秒"，即可添加入场动画。脚本和事件属性会被移除。

#代码

用 [data-view=login]、[data-embedded=true] 等属性选择器，可以为不同页面或弹窗单独写样式。