新增: u-ppt Vue 3 在线演示工具初始版本
- 核心架构: Vue 3 + Vite + TypeScript，零运行时依赖（仅 Vue） - 编辑器: 幻灯片增删排序、元素拖拽八向缩放、双击编辑、12 种元素类型 (标题/正文/列表/数据/金句/图片/形状/图表/卡片/表格/代码/公式) - 图表: 8 种 SVG 自绘（柱状/条形/折线/面积/饼图/环形/雷达/进度） - 富文本: 结构化 segments（加粗/斜体/颜色/高亮/上下标/代码/链接） - AI 能力: 对话编辑、生成整套、润色本页、大纲→逐页生成、一键美化、AI 配图 - 会话绑定: 每份 PPT 独立会话，切换 PPT 自动切换对话历史 - 模板系统: 7 个内置版式 + 用户自存模板 - 演示模式: 全屏播放、键盘/鼠标/滚轮导航、入场动画 - 持久化: localStorage 存 deck/文库/会话/模板/配置 - 支持多服务商: 智谱/DeepSeek/通义/Kimi/豆包/OpenAI/Anthropic/Gemini/Groq/Ollama
This commit is contained in:
126
src/styles/base.css
Normal file
126
src/styles/base.css
Normal file
@@ -0,0 +1,126 @@
|
||||
/* =====================================================================
|
||||
* base.css — CSS 变量、reset、公共组件（按钮/输入/弹窗/toast）
|
||||
* 编辑器 UI 用固定中性色；画布内元素配色由 JS 渲染时给 inline hex
|
||||
* ===================================================================== */
|
||||
:root {
|
||||
--ui-bg: #f1f5f9; /* 整体背景 */
|
||||
--ui-panel: #ffffff; /* 面板/卡片 */
|
||||
--ui-bar: #ffffff; /* 顶栏 */
|
||||
--ui-border: #e2e8f0; /* 分隔线/边框 */
|
||||
--ui-hover: #f1f5f9; /* 悬停 */
|
||||
--ui-text: #1e293b; /* 主文字 */
|
||||
--ui-muted: #64748b; /* 次要文字 */
|
||||
--ui-primary: #4f46e5; /* 主操作 */
|
||||
--ui-primary-soft: #eef2ff;
|
||||
--ui-danger: #e11d48;
|
||||
--ui-success: #059669;
|
||||
--radius: 10px;
|
||||
--radius-sm: 6px;
|
||||
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
|
||||
--shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
|
||||
--shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
|
||||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Roboto, Helvetica, Arial, sans-serif;
|
||||
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: var(--font);
|
||||
color: var(--ui-text);
|
||||
background: var(--ui-bg);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p { margin: 0; }
|
||||
button { font-family: inherit; cursor: pointer; }
|
||||
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
.muted { color: var(--ui-muted); }
|
||||
|
||||
/* ---------- 按钮 ---------- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
height: 32px; padding: 0 12px;
|
||||
border: 1px solid var(--ui-border);
|
||||
background: var(--ui-panel);
|
||||
color: var(--ui-text);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px; white-space: nowrap;
|
||||
transition: background .12s, border-color .12s, transform .05s;
|
||||
}
|
||||
.btn:hover { background: var(--ui-hover); }
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn.primary { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
|
||||
.btn.primary:hover { background: #4338ca; }
|
||||
.btn.ghost { background: transparent; border-color: transparent; color: var(--ui-muted); }
|
||||
.btn.ghost:hover { background: var(--ui-hover); color: var(--ui-text); }
|
||||
.btn.danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
|
||||
.btn.small { height: 26px; padding: 0 10px; font-size: 12px; }
|
||||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
/* ---------- 表单控件 ---------- */
|
||||
input[type="text"], input[type="password"], input[type="range"], select, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--ui-border);
|
||||
background: #fff;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
transition: border-color .12s, box-shadow .12s;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: var(--ui-primary);
|
||||
box-shadow: 0 0 0 3px var(--ui-primary-soft);
|
||||
}
|
||||
textarea { resize: vertical; line-height: 1.5; }
|
||||
input[type="range"] { padding: 0; height: 6px; -webkit-appearance: none; appearance: none; background: var(--ui-border); }
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; appearance: none;
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: var(--ui-primary); cursor: pointer; border: 2px solid #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ---------- toast ---------- */
|
||||
.toast {
|
||||
position: fixed; left: 50%; bottom: 32px;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
background: rgba(15, 23, 42, .92); color: #fff;
|
||||
padding: 10px 18px; border-radius: 8px;
|
||||
font-size: 13px; opacity: 0; pointer-events: none;
|
||||
transition: opacity .2s, transform .2s; z-index: 9999;
|
||||
box-shadow: var(--shadow-md); max-width: 80vw;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
/* ---------- 弹窗 ---------- */
|
||||
.modal-mask {
|
||||
position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 1000; backdrop-filter: blur(2px);
|
||||
}
|
||||
.modal {
|
||||
width: 460px; max-width: 92vw;
|
||||
background: var(--ui-panel); border-radius: var(--radius);
|
||||
padding: 22px 24px; box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.modal h3 { font-size: 17px; margin-bottom: 6px; }
|
||||
.modal-tip { color: var(--ui-muted); font-size: 12.5px; margin-bottom: 16px; }
|
||||
.form-row { margin-bottom: 14px; }
|
||||
.form-row label { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 5px; font-weight: 500; }
|
||||
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
|
||||
|
||||
/* ---------- 滚动条 ---------- */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* 尊重系统「减少动态」偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
||||
}
|
||||
105
src/styles/chat.css
Normal file
105
src/styles/chat.css
Normal file
@@ -0,0 +1,105 @@
|
||||
/* =====================================================================
|
||||
* chat.css — AI 聊天面板、消息气泡、设置相关
|
||||
* AiPanel 根元素为 .panel-pane.ai-pane，布局在 editor.css 定义
|
||||
* ===================================================================== */
|
||||
|
||||
/* 快捷操作工具条 */
|
||||
.ai-actions {
|
||||
display: flex; flex-wrap: wrap; gap: 6px;
|
||||
padding: 10px 12px; margin: 0;
|
||||
border-bottom: 1px solid var(--ui-border, #e2e8f0);
|
||||
flex-shrink: 0; background: var(--ui-panel, #f8fafc);
|
||||
}
|
||||
.ai-action {
|
||||
height: 28px; padding: 0 10px;
|
||||
border: 1px solid var(--ui-border, #e2e8f0); background: #fff;
|
||||
color: var(--ui-text, #1e293b); border-radius: 5px;
|
||||
font-size: 12px; font-weight: 500; line-height: 1;
|
||||
cursor: pointer; transition: all .12s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-action:hover {
|
||||
border-color: var(--ui-primary, #4f46e5);
|
||||
color: var(--ui-primary, #4f46e5);
|
||||
background: var(--ui-primary-soft, rgba(79,70,229,.06));
|
||||
}
|
||||
.ai-action:disabled { opacity: .45; cursor: not-allowed; }
|
||||
.ai-action:disabled:hover { border-color: var(--ui-border, #e2e8f0); color: var(--ui-text, #1e293b); background: #fff; }
|
||||
/* 破坏性操作（清空）再轻一点 */
|
||||
.ai-action.ghost {
|
||||
border-color: transparent; background: transparent;
|
||||
color: var(--ui-muted, #64748b);
|
||||
}
|
||||
.ai-action.ghost:hover {
|
||||
border-color: transparent; background: transparent;
|
||||
color: var(--ui-danger, #e11d48);
|
||||
}
|
||||
|
||||
/* 选中元素提示条 */
|
||||
.selected-hint {
|
||||
display: flex; align-items: center; gap: .45em;
|
||||
padding: 7px 10px; margin: 0 2px 8px;
|
||||
background: var(--ui-primary-soft, rgba(79,70,229,.08));
|
||||
border: 1px solid var(--ui-primary, #4f46e5); border-radius: 6px;
|
||||
font-size: 12px; color: var(--ui-text, #1e293b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.selected-hint-icon { color: var(--ui-primary, #4f46e5); font-weight: 700; }
|
||||
.selected-hint-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
|
||||
.selected-hint-flag { font-size: 11px; color: var(--ui-primary, #4f46e5); flex-shrink: 0; }
|
||||
|
||||
/* 消息列表 */
|
||||
.chat-messages {
|
||||
flex: 1; min-height: 0; overflow-y: auto;
|
||||
padding: 4px 2px; display: flex; flex-direction: column; gap: 12px;
|
||||
}
|
||||
.chat-empty {
|
||||
color: var(--ui-muted); font-size: 13px; text-align: center;
|
||||
padding: 28px 10px; line-height: 1.9;
|
||||
}
|
||||
.chat-empty b { color: var(--ui-text); }
|
||||
.msg { display: flex; }
|
||||
.msg.user { justify-content: flex-end; }
|
||||
.msg .bubble {
|
||||
max-width: 90%; padding: 9px 13px; border-radius: 14px;
|
||||
font-size: 13px; line-height: 1.65; word-break: break-word;
|
||||
}
|
||||
.msg.user .bubble { background: var(--ui-primary); color: #fff; border-bottom-right-radius: 4px; }
|
||||
.msg.ai .bubble { background: var(--ui-hover); color: var(--ui-text); border-bottom-left-radius: 4px; }
|
||||
.msg.system .bubble { background: transparent; color: var(--ui-muted); font-size: 12px; font-style: italic; }
|
||||
.msg.ai .bubble.error { background: #fff1f2; color: var(--ui-danger); }
|
||||
.msg.ai .bubble.success { background: #f0fdf4; color: var(--ui-success); }
|
||||
.msg .bubble .diff-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; margin-bottom: 6px; background: rgba(5,150,105,.12); color: var(--ui-success); font-weight: 600; }
|
||||
|
||||
.msg .bubble .stream-text { white-space: pre-wrap; }
|
||||
|
||||
/* 消息中的代码块 */
|
||||
.msg .msg-code {
|
||||
margin: 6px 0; padding: 10px 12px;
|
||||
background: rgba(15,23,42,.06); border-radius: 8px;
|
||||
overflow-x: auto; max-width: 100%;
|
||||
font-size: 12px; line-height: 1.5;
|
||||
font-family: 'Consolas','Monaco','Courier New',monospace;
|
||||
}
|
||||
.msg.user .msg-code { background: rgba(255,255,255,.15); }
|
||||
.msg .msg-code code { font-family: inherit; white-space: pre; }
|
||||
/* JSON 语法着色 */
|
||||
.msg .msg-code .jk { color: #4f46e5; font-weight: 600; } /* key */
|
||||
.msg .msg-code .js { color: #059669; } /* string value */
|
||||
.msg .msg-code .jn { color: #d97706; } /* number */
|
||||
.msg .msg-code .jb { color: #e11d48; font-weight: 600; } /* boolean/null */
|
||||
|
||||
.cursor {
|
||||
display: inline-block; width: 7px; height: 1em;
|
||||
background: currentColor; vertical-align: -2px; margin-left: 2px;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
}
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* 输入栏 */
|
||||
.chat-input-bar {
|
||||
border-top: 1px solid var(--ui-border); padding-top: 10px; margin-top: 4px;
|
||||
display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
|
||||
}
|
||||
#chatInput { resize: none; line-height: 1.5; }
|
||||
.chat-input-bar .btns { display: flex; gap: 8px; justify-content: flex-end; }
|
||||
354
src/styles/editor.css
Normal file
354
src/styles/editor.css
Normal file
@@ -0,0 +1,354 @@
|
||||
/* =====================================================================
|
||||
* editor.css — 编辑模式布局：工具栏 / 缩略图 / 画布 / 属性面板
|
||||
* ===================================================================== */
|
||||
|
||||
.app-editor { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
||||
|
||||
/* ---------- 顶部工具栏 ---------- */
|
||||
.toolbar {
|
||||
height: 54px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 16px; gap: 12px;
|
||||
background: var(--ui-bar);
|
||||
border-bottom: 1px solid var(--ui-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 10;
|
||||
}
|
||||
.brand { display: flex; align-items: baseline; gap: 6px; }
|
||||
.brand .logo { color: var(--ui-primary); font-size: 20px; font-weight: 800; }
|
||||
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
|
||||
.brand .sub { font-size: 12px; color: var(--ui-muted); }
|
||||
.tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.tools .sep { width: 1px; height: 22px; background: var(--ui-border); margin: 0 4px; }
|
||||
.theme-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-muted); }
|
||||
.theme-select select { width: auto; height: 30px; padding: 0 8px; }
|
||||
|
||||
/* ---------- 编辑区三栏 ---------- */
|
||||
.editor-body {
|
||||
flex: 1; min-height: 0;
|
||||
display: grid; grid-template-columns: 178px 1fr 304px;
|
||||
}
|
||||
|
||||
/* ---------- 左：缩略图 ---------- */
|
||||
.thumb-bar { border-right: 1px solid var(--ui-border); background: var(--ui-panel); overflow: hidden; display: flex; flex-direction: column; }
|
||||
.thumb-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.thumb-item { position: relative; cursor: pointer; }
|
||||
.thumb-num {
|
||||
position: absolute; top: -6px; left: -6px; z-index: 2;
|
||||
width: 18px; height: 18px; border-radius: 50%;
|
||||
background: var(--ui-text); color: #fff; font-size: 11px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.thumb-preview {
|
||||
position: relative; width: 100%; aspect-ratio: 16 / 9;
|
||||
border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
|
||||
overflow: hidden; background: #fff;
|
||||
box-shadow: var(--shadow-sm); transition: outline-color .12s, transform .1s;
|
||||
outline: 2px solid transparent; outline-offset: 1px;
|
||||
}
|
||||
.thumb-item:hover .thumb-preview { transform: translateY(-1px); }
|
||||
.thumb-item.active .thumb-preview { outline-color: var(--ui-primary); }
|
||||
.thumb-del {
|
||||
position: absolute; top: 2px; right: 2px; z-index: 3;
|
||||
width: 18px; height: 18px; border-radius: 4px; border: none;
|
||||
background: rgba(15,23,42,.6); color: #fff; font-size: 11px;
|
||||
opacity: 0; transition: opacity .12s; line-height: 1;
|
||||
}
|
||||
.thumb-item:hover .thumb-del { opacity: 1; }
|
||||
.thumb-del:hover { background: var(--ui-danger); }
|
||||
.thumb-add {
|
||||
border: 1.5px dashed var(--ui-border); border-radius: var(--radius-sm);
|
||||
height: 40px; background: transparent; color: var(--ui-muted);
|
||||
display: flex; align-items: center; justify-content: center; gap: 4px;
|
||||
}
|
||||
.thumb-add:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
|
||||
/* 缩略图内的迷你元素，统一缩小字号 */
|
||||
.thumb-preview .el { pointer-events: none; }
|
||||
|
||||
/* ---------- 中：画布 ---------- */
|
||||
.canvas-stage {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 28px; min-width: 0; overflow: hidden; position: relative;
|
||||
}
|
||||
.canvas-frame {
|
||||
position: relative;
|
||||
width: min(100%, calc((100vh - 54px - 56px) * 16 / 9));
|
||||
max-width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
box-shadow: var(--shadow-md); border-radius: 4px; overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.canvas {
|
||||
position: absolute; top: 0; left: 0;
|
||||
width: 1280px; height: 720px;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.canvas-status { margin-top: 10px; font-size: 12px; color: var(--ui-muted); }
|
||||
|
||||
/* ---------- 画布元素 ---------- */
|
||||
.el { position: absolute; overflow: hidden; }
|
||||
.el[data-type="title"], .el[data-type="text"], .el[data-type="list"],
|
||||
.el[data-type="stat"], .el[data-type="quote"] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.el[data-type="stat"] { align-items: center; justify-content: center; }
|
||||
.el[data-type="quote"] { align-items: center; justify-content: center; }
|
||||
.el[data-type="title"], .el[data-type="quote"] { font-weight: 700; }
|
||||
.el[data-type="quote"] { font-style: italic; }
|
||||
.el-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
|
||||
.el-list { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .3em; justify-content: center; }
|
||||
.el-list .li { position: relative; padding-left: 1.1em; }
|
||||
.el-list .li::before {
|
||||
content: ""; position: absolute; left: 0; top: .55em;
|
||||
width: .35em; height: .35em; border-radius: 50%; background: currentColor;
|
||||
}
|
||||
.el-stat { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.el-stat .num { font-weight: 800; line-height: 1; }
|
||||
.el-stat .label { margin-top: .35em; text-align: center; }
|
||||
.el-shape { width: 100%; height: 100%; }
|
||||
.el-image { width: 100%; height: 100%; object-fit: cover; }
|
||||
.el-chart { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .5em; }
|
||||
.el-chart .bar-row { display: flex; align-items: center; gap: .6em; font-size: 14px; }
|
||||
.el-chart .bar-label { width: 26%; flex-shrink: 0; }
|
||||
.el-chart .bar-track { flex: 1; height: .7em; background: rgba(100,116,139,.18); border-radius: 99px; overflow: hidden; }
|
||||
.el-chart .bar-fill { height: 100%; border-radius: 99px; }
|
||||
.el-chart .bar-val { width: 3em; text-align: right; flex-shrink: 0; }
|
||||
|
||||
/* ===== 图表 SVG 通用 ===== */
|
||||
.el-chart svg { width: 100%; height: 100%; }
|
||||
.el-chart .chart-text { fill: currentColor; font-family: inherit; }
|
||||
.el-chart.chart-pie { position: relative; display: flex; align-items: center; }
|
||||
.el-chart .pie-legend {
|
||||
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
|
||||
display: flex; flex-direction: column; gap: .3em; font-size: 13px;
|
||||
}
|
||||
.el-chart .pie-legend-item { display: flex; align-items: center; gap: .4em; }
|
||||
.el-chart .pie-legend-dot { width: .8em; height: .8em; border-radius: 2px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 表格 ===== */
|
||||
.el-table {
|
||||
width: 100%; height: 100%; border-collapse: collapse;
|
||||
font-size: inherit; table-layout: fixed;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: .55em .7em; text-align: left;
|
||||
border-bottom: 1px solid rgba(100,116,139,.25);
|
||||
overflow: hidden; word-break: break-word;
|
||||
}
|
||||
.el-table th {
|
||||
font-weight: 700; color: var(--ui-primary, #4f46e5);
|
||||
border-bottom: 2px solid rgba(100,116,139,.35);
|
||||
background: rgba(100,116,139,.06);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-table tbody tr:nth-child(even) { background: rgba(100,116,139,.04); }
|
||||
|
||||
/* ===== 代码 ===== */
|
||||
.el-code {
|
||||
width: 100%; height: 100%; margin: 0;
|
||||
padding: 1em 1.2em; box-sizing: border-box;
|
||||
background: rgba(15,23,42,.04);
|
||||
border-radius: 8px; border: 1px solid rgba(100,116,139,.2);
|
||||
overflow: auto; font-family: 'Consolas','Monaco','Courier New',monospace;
|
||||
font-size: inherit; line-height: 1.6; color: inherit;
|
||||
white-space: pre; position: relative;
|
||||
}
|
||||
.el-code code { font-family: inherit; }
|
||||
.el-code .code-lang {
|
||||
position: absolute; top: .4em; right: .8em;
|
||||
opacity: .45; font-size: 11px; font-family: inherit;
|
||||
text-transform: uppercase; letter-spacing: .05em;
|
||||
}
|
||||
|
||||
/* ===== 公式 ===== */
|
||||
.el-formula {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Cambria Math','STIX','Latin Modern Math',serif;
|
||||
font-size: inherit; line-height: 1.5;
|
||||
}
|
||||
.el-formula sup, .el-formula sub { font-size: .65em; }
|
||||
.el-formula .frac {
|
||||
display: inline-flex; flex-direction: column; align-items: center;
|
||||
vertical-align: middle; margin: 0 .2em;
|
||||
}
|
||||
.el-formula .frac .num { border-bottom: 1.5px solid currentColor; padding: 0 .3em; }
|
||||
.el-formula .frac .den { padding: 0 .3em; }
|
||||
.el-formula .sqrt { position: relative; padding-left: .3em; display: inline-flex; align-items: flex-end; }
|
||||
.el-formula .sqrt .rad { font-size: .6em; vertical-align: super; margin-right: .1em; }
|
||||
.el-formula .sqrt .overline { border-top: 1.5px solid currentColor; padding: 0 .2em; }
|
||||
|
||||
/* 选中态与手柄 */
|
||||
.el.selected { outline: 2px solid var(--ui-primary); outline-offset: 0; }
|
||||
.el.dragging { opacity: .85; }
|
||||
.handle {
|
||||
position: absolute; width: 10px; height: 10px;
|
||||
background: #fff; border: 1.5px solid var(--ui-primary);
|
||||
border-radius: 2px; z-index: 50;
|
||||
}
|
||||
.handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
|
||||
.handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
|
||||
.handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
|
||||
.handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
|
||||
.handle.tm { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
|
||||
.handle.bm { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
|
||||
.handle.lm { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
|
||||
.handle.rm { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
|
||||
|
||||
/* 元素文字可直接双击编辑 */
|
||||
.el [contenteditable="true"] { outline: none; cursor: text; }
|
||||
.el [contenteditable="true"]:focus { background: rgba(79,70,229,.06); border-radius: 2px; }
|
||||
|
||||
/* ---------- 右：侧栏 Tabs ---------- */
|
||||
.side-panel { border-left: 1px solid var(--ui-border); background: var(--ui-panel); display: flex; flex-direction: column; min-height: 0; }
|
||||
.panel-tabs { display: flex; border-bottom: 1px solid var(--ui-border); flex-shrink: 0; }
|
||||
.panel-tab {
|
||||
flex: 1; padding: 11px; border: none; background: transparent;
|
||||
font-size: 13px; color: var(--ui-muted); border-bottom: 2px solid transparent;
|
||||
}
|
||||
.panel-tab:hover { color: var(--ui-text); background: var(--ui-hover); }
|
||||
.panel-tab.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); font-weight: 600; }
|
||||
.panel-pane { flex: 1; overflow-y: auto; padding: 16px; }
|
||||
.panel-pane.active { display: block; }
|
||||
/* AI 面板需要纵向擞布局，且不滚动整块（输入框常驻底部） */
|
||||
.ai-pane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
|
||||
.ai-pane .chat-messages { flex: 1; overflow-y: auto; padding: 0 16px; }
|
||||
|
||||
/* ---------- 属性面板 ---------- */
|
||||
.prop-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
|
||||
.prop-section:last-child { border-bottom: none; margin-bottom: 0; }
|
||||
.prop-title { font-size: 12px; color: var(--ui-muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
|
||||
.prop-hint { font-size: 12.5px; color: var(--ui-muted); text-align: center; line-height: 1.8; margin-bottom: 16px; }
|
||||
.prop-row { margin-bottom: 14px; }
|
||||
.prop-row > label { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 6px; font-weight: 500; }
|
||||
.color-row { display: flex; gap: 6px; }
|
||||
.color-row select { flex: 1; }
|
||||
.color-row input[type="color"] { width: 38px; height: 32px; padding: 2px; flex-shrink: 0; }
|
||||
|
||||
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.add-grid button {
|
||||
height: 48px; border: 1px solid var(--ui-border); background: #fff;
|
||||
border-radius: var(--radius-sm); font-size: 12px; color: var(--ui-text);
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
||||
}
|
||||
.add-grid button:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
|
||||
.add-grid button .ic { font-size: 18px; }
|
||||
|
||||
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.bg-grid button { height: 36px; border: 1px solid var(--ui-border); background: #fff; border-radius: var(--radius-sm); font-size: 12px; }
|
||||
.bg-grid button.active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-soft); }
|
||||
|
||||
/* 分段按钮组 */
|
||||
.seg { display: flex; gap: 6px; }
|
||||
.seg button {
|
||||
flex: 1; height: 32px; border: 1px solid var(--ui-border); background: #fff;
|
||||
border-radius: var(--radius-sm); color: var(--ui-text); font-size: 13px;
|
||||
}
|
||||
.seg button:hover { background: var(--ui-hover); }
|
||||
.seg button.active { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
|
||||
.seg button.danger { color: var(--ui-danger); }
|
||||
.seg button.danger:hover { background: #fff1f2; }
|
||||
|
||||
/* ---------- 卡片元素 ---------- */
|
||||
.el[data-type="card"] {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, .12), 0 3px 8px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.el-card-bar { height: 6px; width: 100%; flex-shrink: 0; }
|
||||
.el-card { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; box-sizing: border-box; }
|
||||
.card-icon { font-size: 1.6em; line-height: 1; margin-bottom: .1em; }
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.15;
|
||||
color: var(--ui-text, #1e293b);
|
||||
display: flex; align-items: center; gap: .4em;
|
||||
}
|
||||
.card-body {
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: var(--ui-muted, #64748b);
|
||||
white-space: pre-wrap;
|
||||
flex: 1;
|
||||
}
|
||||
/* 兼容旧 class 名 */
|
||||
.el-card-title { font-weight: 700; font-size: 1.5em; line-height: 1.15; display: flex; align-items: center; gap: .45em; }
|
||||
.el-card-text { font-size: 1em; line-height: 1.5; opacity: .88; white-space: pre-wrap; }
|
||||
.el-card-body { padding: 1.1em 1.3em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .5em; justify-content: flex-start; }
|
||||
|
||||
/* 渐变形状由 renderElement 内联 backgroundImage；此处仅兜底圆角 */
|
||||
.el-shape.gradient { border-radius: var(--shape-radius, 0); }
|
||||
|
||||
/* 装饰圆/光晕（shape 配合） */
|
||||
.el[data-deco="glow"] { filter: blur(2px); opacity: .9; }
|
||||
|
||||
/* ---------- 文库弹窗 ---------- */
|
||||
.lib-modal { width: 580px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
|
||||
.lib-save-bar { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.lib-save-bar input { flex: 1; }
|
||||
.lib-list { flex: 1; overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--radius-sm); background: #fff; min-height: 140px; }
|
||||
.lib-list:empty::before {
|
||||
content: '文库为空 —— 在上方命名并存入你的第一份演示';
|
||||
display: block; padding: 32px; text-align: center; color: var(--ui-muted); font-size: 13px;
|
||||
}
|
||||
.lib-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
|
||||
.lib-item:last-child { border-bottom: none; }
|
||||
.lib-item.active { background: var(--ui-primary-soft); }
|
||||
.lib-thumb { width: 72px; height: 41px; border: 1px solid var(--ui-border); border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; background: #fff; }
|
||||
.lib-info { flex: 1; min-width: 0; }
|
||||
.lib-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.lib-meta { font-size: 12px; color: var(--ui-muted); margin-top: 2px; }
|
||||
.lib-ops { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
.lib-ops .btn { height: 28px; padding: 0 10px; font-size: 12px; }
|
||||
.lib-ops .btn.del { background: transparent; color: var(--ui-danger); border-color: var(--ui-border); }
|
||||
.lib-ops .btn.del:hover { background: #fff1f2; }
|
||||
.modal-actions .muted { margin-right: auto; font-size: 12px; }
|
||||
|
||||
/* 空页占位引导 */
|
||||
.canvas-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ui-muted); pointer-events: none; }
|
||||
.canvas-placeholder .ph-icon { font-size: 48px; font-weight: 200; color: var(--ui-border); }
|
||||
.canvas-placeholder .ph-sub { font-size: 14px; opacity: .8; }
|
||||
|
||||
/* 长内容溢出兆底 */
|
||||
.el-text, .el-card-title, .el-card-text { overflow: hidden; }
|
||||
.el-stat .num { overflow-wrap: anywhere; }
|
||||
.el-chart .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---------- 富文本提示 ---------- */
|
||||
.rich-hint { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
|
||||
.rich-syntax {
|
||||
font-size: 11px; color: var(--ui-muted); line-height: 1.7;
|
||||
background: var(--ui-hover, #f1f5f9); padding: 5px 8px; border-radius: 4px;
|
||||
white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
.rich-actions { display: flex; gap: 6px; }
|
||||
.rich-btn {
|
||||
height: 22px; padding: 0 8px; font-size: 11px;
|
||||
border: 1px solid var(--ui-border, #e2e8f0); background: #fff;
|
||||
color: var(--ui-text, #1e293b); border-radius: 4px; cursor: pointer;
|
||||
}
|
||||
.rich-btn:hover { border-color: var(--ui-primary, #4f46e5); color: var(--ui-primary, #4f46e5); }
|
||||
.rich-btn.danger { color: var(--ui-danger, #e11d48); border-color: transparent; }
|
||||
.rich-btn.danger:hover { color: var(--ui-danger, #e11d48); background: #fff1f2; }
|
||||
|
||||
/* ---------- 富文本渲染样式 ---------- */
|
||||
.el-text-rich strong, .el-list strong, .el-card strong { font-weight: 700; }
|
||||
.el-text-rich em, .el-list em, .el-card em { font-style: italic; }
|
||||
.el-text-rich del, .el-list del, .el-card del { text-decoration: line-through; opacity: .7; }
|
||||
.el-text-rich u, .el-list u, .el-card u { text-decoration: underline; text-underline-offset: 2px; }
|
||||
.el-text-rich mark, .el-list mark, .el-card mark { background: rgba(245,158,11,.25); padding: 0 .15em; border-radius: 2px; }
|
||||
.el-text-rich code, .el-list code, .el-card code {
|
||||
font-family: 'Consolas','Monaco','Courier New',monospace;
|
||||
background: rgba(100,116,139,.12); padding: .1em .3em; border-radius: 3px;
|
||||
font-size: .85em;
|
||||
}
|
||||
.el-text-rich sup, .el-list sup, .el-card sup { font-size: .65em; vertical-align: super; }
|
||||
.el-text-rich sub, .el-list sub, .el-card sub { font-size: .65em; vertical-align: sub; }
|
||||
.el-text-rich a, .el-list a, .el-card a { text-decoration: underline; text-underline-offset: 2px; }
|
||||
|
||||
/* 触屏设备（无 hover）缩略图删除按钮常驻 */
|
||||
@media (hover: none) { .thumb-del { opacity: 1 !important; } }
|
||||
123
src/styles/present.css
Normal file
123
src/styles/present.css
Normal file
@@ -0,0 +1,123 @@
|
||||
/* =====================================================================
|
||||
* present.css — 演示模式：全屏 / 过渡动画 / HUD（页码/进度/导航点）
|
||||
* 元素渲染复用 editor.css 的 .el 系列样式（present 模式不渲染手柄）
|
||||
* ===================================================================== */
|
||||
|
||||
.app-present {
|
||||
position: fixed; inset: 0; z-index: 500;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
.present-stage {
|
||||
width: 100vw; height: 100vh;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* slide-layer 由 JS 设置 transform: scale() 以适配屏幕；origin 居中 */
|
||||
.slide-layer {
|
||||
width: 1280px; height: 720px;
|
||||
transform-origin: center center;
|
||||
position: relative;
|
||||
box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
|
||||
}
|
||||
/* slide-inner 承载实际页面内容与切换动画（与外层 scale 互不冲突） */
|
||||
.slide-inner {
|
||||
position: relative; width: 100%; height: 100%;
|
||||
background: #fff; overflow: hidden;
|
||||
}
|
||||
.slide-inner.enter-next { animation: ppt-enter-next .38s cubic-bezier(.22, .61, .36, 1) both; }
|
||||
.slide-inner.enter-prev { animation: ppt-enter-prev .38s cubic-bezier(.22, .61, .36, 1) both; }
|
||||
@keyframes ppt-enter-next {
|
||||
from { opacity: 0; transform: translateX(48px) scale(.985); }
|
||||
to { opacity: 1; transform: translateX(0) scale(1); }
|
||||
}
|
||||
@keyframes ppt-enter-prev {
|
||||
from { opacity: 0; transform: translateX(-48px) scale(.985); }
|
||||
to { opacity: 1; transform: translateX(0) scale(1); }
|
||||
}
|
||||
|
||||
/* 黑屏（按 B） */
|
||||
.present-stage.black::after {
|
||||
content: ""; position: absolute; inset: 0; background: #000; z-index: 5;
|
||||
}
|
||||
|
||||
/* 演示模式下元素禁用编辑交互 */
|
||||
.present-stage .el { pointer-events: none; }
|
||||
|
||||
/* ---------- HUD ---------- */
|
||||
.present-hud {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
padding: 14px 28px 18px; color: #fff; z-index: 10;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
|
||||
transition: opacity .5s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.present-hud:hover { opacity: 1 !important; }
|
||||
.present-stage.idle .present-hud { opacity: 0; }
|
||||
.hud-progress { height: 3px; background: rgba(255, 255, 255, .22); border-radius: 2px; margin-bottom: 12px; }
|
||||
.hud-progress-bar { height: 100%; background: #fff; border-radius: 2px; width: 0; transition: width .35s ease; }
|
||||
.hud-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
|
||||
.hud-dots { display: flex; gap: 7px; }
|
||||
.hud-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .38); cursor: pointer; pointer-events: auto;
|
||||
transition: background .15s, transform .15s;
|
||||
}
|
||||
.hud-dot:hover { background: rgba(255, 255, 255, .7); }
|
||||
.hud-dot.active { background: #fff; transform: scale(1.25); }
|
||||
.hud-row .btn.ghost { color: rgba(255, 255, 255, .85); pointer-events: auto; }
|
||||
.hud-row .btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
|
||||
|
||||
/* 演示提示（首次进入） */
|
||||
.present-hint {
|
||||
position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, .7); font-size: 12.5px; z-index: 10;
|
||||
background: rgba(0, 0, 0, .4); padding: 6px 14px; border-radius: 99px;
|
||||
pointer-events: none; animation: ppt-hint-fade 3.5s ease forwards;
|
||||
}
|
||||
@keyframes ppt-hint-fade {
|
||||
0%, 70% { opacity: 1; } 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ============ 元素入场动画（仅演示模式，逐元素 stagger） ============
|
||||
* renderSlide 给 slide-inner 加 .animated，并按元素顺序设 animation-delay
|
||||
* data-anim 指定具体动效，未指定则默认 fade-up
|
||||
* ---------------------------------------------------------------------- */
|
||||
.present-stage .el { opacity: 0; }
|
||||
.present-stage .slide-inner.animated .el { will-change: transform, opacity; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="fade"] { animation: ppt-fade .5s ease both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="scale"] { animation: ppt-scale .6s cubic-bezier(.22,.61,.36,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="zoom"] { animation: ppt-scale .7s cubic-bezier(.22,.61,.36,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="slide-l"] { animation: ppt-slide-l .55s cubic-bezier(.22,.61,.36,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="slide-r"] { animation: ppt-slide-r .55s cubic-bezier(.22,.61,.36,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="pop"] { animation: ppt-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
|
||||
.present-stage .slide-inner.animated .el { animation: ppt-fade-up .55s cubic-bezier(.22,.61,.36,1) both; }
|
||||
|
||||
/* 列表逐条入场 */
|
||||
.present-stage .slide-inner.animated .el[data-type="list"] .li { opacity: 0; animation: ppt-fade-up .42s ease both; }
|
||||
|
||||
@keyframes ppt-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-fade { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes ppt-scale { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-slide-l { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-slide-r { from { opacity: 0; transform: translateX(52px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-pop { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: none; } }
|
||||
|
||||
/* 扩展特效 */
|
||||
.present-stage .slide-inner.animated .el[data-anim="rotate"] { animation: ppt-rotate .6s cubic-bezier(.22,.61,.36,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="bounce"] { animation: ppt-bounce .75s cubic-bezier(.34,1.56,.64,1) both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="flip"] { animation: ppt-flip .65s ease both; }
|
||||
.present-stage .slide-inner.animated .el[data-anim="blur"] { animation: ppt-blur .6s ease both; }
|
||||
|
||||
@keyframes ppt-rotate { from { opacity: 0; transform: rotate(-12deg) scale(.85); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-bounce { 0% { opacity: 0; transform: translateY(-50px); } 55% { opacity: 1; } 72% { transform: translateY(8px); } 100% { transform: none; } }
|
||||
@keyframes ppt-flip { from { opacity: 0; transform: perspective(900px) rotateY(75deg); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ppt-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: none; } }
|
||||
|
||||
/* 无障碍：尊重「减少动态」系统设置，避免元素永远透明 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.present-stage .el,
|
||||
.present-stage .slide-inner.animated .el[data-type="list"] .li { opacity: 1 !important; animation: none !important; }
|
||||
.slide-inner.enter-next, .slide-inner.enter-prev { animation: none !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user