@mindbase/mindbase 1.0.0

package/src/iconfont/frontend/src/views/IconEditor.vue

@@ -0,0 +1,819 @@
+<template>
+  <div
+    class="icon-editor"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop">
+
+    <!-- 全屏拖拽遮罩 -->
+    <div v-if="isDragging" class="drop-overlay">
+      <div class="drop-hint">
+        <el-icon :size="64"><Upload /></el-icon>
+        <p>释放以添加 SVG 图标</p>
+      </div>
+    </div>
+
+    <!-- 顶部工具栏 -->
+    <div class="toolbar">
+      <el-autocomplete
+        v-model="searchQuery"
+        :fetch-suggestions="querySearch"
+        placeholder="搜索图标名称或 class..."
+        clearable
+        style="width: 300px; margin-right: 16px"
+        @select="onSearchSelect" />
+      <div class="actions">
+        <el-button type="primary" @click="triggerFileUpload">
+          上传 SVG
+        </el-button>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".svg"
+          multiple
+          style="display: none"
+          @change="onFileSelected" />
+        <el-button type="success" @click="downloadCSS">
+          生成 CSS
+        </el-button>
+        <el-button type="warning" @click="saveToSource">
+          保存到源目录
+        </el-button>
+        <el-button
+          type="danger"
+          @click="confirmDelete"
+          :disabled="selectedIndices.size === 0">
+          删除图标
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 左侧图标网格 -->
+      <div class="icon-grid-container">
+        <div class="grid-header">
+          <span>图标列表 ({{ json.glyphs.length }})</span>
+          <span class="hint">Ctrl+V 粘贴 SVG | 拖拽 SVG 到页面 | 方向键选择 | Shift+方向键移动</span>
+        </div>
+        <div class="icon-grid" ref="gridRef">
+          <div
+            v-for="(glyph, index) in json.glyphs"
+            :key="glyph.icon_id"
+            :ref="(el: any) => setCardRef(el, index)"
+            :class="['icon-card', { selected: selectedIndices.has(index) }]"
+            @click="selectIndex(index, $event.ctrlKey)"
+            tabindex="0">
+            <div class="icon-preview">
+              <i :class="`${fontFamily} ${json.css_prefix_text}${glyph.font_class}`"></i>
+            </div>
+            <div class="icon-info">
+              <div class="icon-name" :title="glyph.name">{{ glyph.name }}</div>
+              <div class="icon-class">{{ glyph.font_class }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧编辑面板 -->
+      <div class="edit-panel">
+        <div class="panel-header">编辑图标</div>
+        <div class="panel-content" v-if="selectedGlyph">
+          <div class="preview-large">
+            <i :class="`${fontFamily} ${json.css_prefix_text}${selectedGlyph.font_class}`"></i>
+          </div>
+
+          <el-form label-width="80px">
+            <el-form-item label="名称">
+              <el-input v-model="selectedGlyph.name" />
+            </el-form-item>
+            <el-form-item label="Class">
+              <el-input v-model="selectedGlyph.font_class" />
+            </el-form-item>
+            <el-form-item label="Unicode">
+              <el-input :model-value="selectedGlyph.unicode" disabled />
+            </el-form-item>
+          </el-form>
+
+          <div class="panel-actions">
+            <el-button type="primary" @click="exportSvg" :loading="exportingSvg">
+              导出 SVG
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部状态栏 -->
+    <div class="status-bar">
+      <span>共 {{ json.glyphs.length }} 个图标</span>
+      <span v-if="hasChanges" class="modified">已修改</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Upload } from "@element-plus/icons-vue";
+
+interface Glyph {
+  icon_id: string;
+  name: string;
+  font_class: string;
+  unicode: string;
+  unicode_decimal: number;
+}
+
+interface IconfontJson {
+  id: string;
+  name: string;
+  font_family: string;
+  css_prefix_text: string;
+  description: string;
+  glyphs: Glyph[];
+}
+
+// 状态
+const json = ref<IconfontJson>({
+  id: "", name: "", font_family: "", css_prefix_text: "", description: "", glyphs: [],
+});
+const originalJson = ref("");
+const searchQuery = ref("");
+const selectedIndices = ref<Set<number>>(new Set());
+const gridRef = ref<HTMLElement | null>(null);
+const cardRefs = ref<Map<number, HTMLElement>>(new Map());
+const columnsPerRow = ref(1);
+const isDragging = ref(false);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const exportingSvg = ref(false);
+let resizeObserver: ResizeObserver | null = null;
+
+// 字体族名（从 json 动态读取）
+const fontFamily = computed(() => json.value.font_family || "iconfont");
+
+// 选中项
+const selectedIndex = computed(() => {
+  if (selectedIndices.value.size !== 1) return null;
+  return [...selectedIndices.value][0];
+});
+
+const selectedGlyph = computed(() => {
+  const idx = selectedIndex.value;
+  if (idx === null) return null;
+  return json.value.glyphs[idx];
+});
+
+const hasChanges = computed(() => JSON.stringify(json.value) !== originalJson.value);
+
+// ========== 选中/搜索 ==========
+function selectIndex(index: number, isCtrl: boolean) {
+  if (isCtrl) {
+    selectedIndices.value.has(index)
+      ? selectedIndices.value.delete(index)
+      : selectedIndices.value.add(index);
+  } else {
+    selectedIndices.value = new Set([index]);
+  }
+}
+
+function setCardRef(el: any, index: number) {
+  if (el) cardRefs.value.set(index, el as HTMLElement);
+}
+
+function querySearch(queryString: string, cb: any) {
+  const query = queryString.toLowerCase();
+  const results = json.value.glyphs
+    .filter((g) => g.name.toLowerCase().includes(query) || g.font_class.toLowerCase().includes(query))
+    .map((g) => ({ value: `${g.name} (${g.font_class})`, glyph: g }));
+  cb(results);
+}
+
+function onSearchSelect(item: any) {
+  const idx = json.value.glyphs.findIndex((g) => g.icon_id === item.glyph.icon_id);
+  if (idx === -1) return;
+  selectedIndices.value = new Set([idx]);
+  searchQuery.value = "";
+  requestAnimationFrame(() => {
+    cardRefs.value.get(idx)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  });
+}
+
+function scrollToSelected() {
+  if (selectedIndex.value === null) return;
+  requestAnimationFrame(() => {
+    cardRefs.value.get(selectedIndex.value!)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  });
+}
+
+// ========== 列数计算 ==========
+function calculateColumnsPerRow() {
+  if (!gridRef.value || json.value.glyphs.length === 0) {
+    columnsPerRow.value = 1;
+    return;
+  }
+  const containerWidth = gridRef.value.clientWidth;
+  const cardMinWidth = 120;
+  const gap = 12;
+  let estimated = Math.floor((containerWidth + gap) / (cardMinWidth + gap)) || 1;
+
+  const firstCard = cardRefs.value.get(0);
+  if (firstCard) {
+    const firstRect = firstCard.getBoundingClientRect();
+    const testCard = cardRefs.value.get(estimated);
+    if (testCard && Math.abs(testCard.getBoundingClientRect().top - firstRect.top) < 1) {
+      while (estimated < json.value.glyphs.length - 1) {
+        estimated++;
+        const nextCard = cardRefs.value.get(estimated);
+        if (nextCard && Math.abs(nextCard.getBoundingClientRect().top - firstRect.top) > 1) {
+          estimated--;
+          break;
+        }
+      }
+    }
+  }
+  columnsPerRow.value = Math.max(1, Math.min(estimated, json.value.glyphs.length));
+}
+
+// ========== CSS 生成/下载 ==========
+function generateCSS(data: IconfontJson): string {
+  const t = Date.now();
+  const ff = data.font_family || "iconfont";
+  const prefix = data.css_prefix_text || "icon-";
+  let css = `@font-face {\n  font-family: "${ff}";\n`;
+  css += `  src: url('iconfont.woff2?t=${t}') format('woff2'),\n`;
+  css += `    url('iconfont.woff?t=${t}') format('woff'),\n`;
+  css += `    url('iconfont.ttf?t=${t}') format('truetype');\n}\n\n`;
+  css += `.${ff} {\n  font-family: "${ff}" !important;\n  font-size: 16px;\n  font-style: normal;\n`;
+  css += `  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n`;
+  for (const g of data.glyphs) {
+    css += `.${prefix}${g.font_class}:before {\n  content: "\\${g.unicode}";\n}\n\n`;
+  }
+  return css;
+}
+
+function downloadCSS() {
+  const css = generateCSS(json.value);
+  const blob = new Blob([css], { type: "text/css" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "iconfont.css";
+  a.click();
+  URL.revokeObjectURL(url);
+  ElMessage.success("CSS 已生成");
+}
+
+// ========== 保存到源目录 ==========
+async function saveToSource() {
+  try {
+    const prevGlyphCount = JSON.parse(originalJson.value).glyphs.length;
+    const currGlyphCount = json.value.glyphs.length;
+    const needFont = currGlyphCount < prevGlyphCount;
+
+    const saveData = { ...json.value };
+
+    const response = await fetch("/api/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ json: saveData, generateFont: needFont }),
+    });
+
+    if (response.ok) {
+      originalJson.value = JSON.stringify(json.value);
+      ElMessage.success("保存成功！");
+    } else {
+      const err = await response.json();
+      throw new Error(err.error || "保存失败");
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || "保存失败");
+  }
+}
+
+// ========== 删除 ==========
+async function confirmDelete() {
+  if (selectedIndices.value.size === 0) return;
+  try {
+    const count = selectedIndices.value.size;
+    const msg = count === 1
+      ? `确定要删除图标 "${selectedGlyph.value?.name}" 吗？`
+      : `确定要删除选中的 ${count} 个图标吗？`;
+    await ElMessageBox.confirm(msg, "确认删除", {
+      confirmButtonText: "删除", cancelButtonText: "取消", type: "warning",
+    });
+    const sorted = [...selectedIndices.value].sort((a, b) => b - a);
+    for (const idx of sorted) {
+      json.value.glyphs.splice(idx, 1);
+    }
+    selectedIndices.value = new Set();
+    ElMessage.success(`已删除 ${count} 个图标`);
+  } catch { /* 取消 */ }
+}
+
+// ========== 导出单个 SVG ==========
+async function exportSvg() {
+  if (!selectedGlyph.value) return;
+  exportingSvg.value = true;
+  try {
+    const response = await fetch(`/api/export-svg/${selectedGlyph.value.unicode}`);
+    if (!response.ok) throw new Error("导出失败");
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${selectedGlyph.value.font_class}.svg`;
+    a.click();
+    URL.revokeObjectURL(url);
+    ElMessage.success("SVG 已导出");
+  } catch (error: any) {
+    ElMessage.error(error.message || "导出失败");
+  } finally {
+    exportingSvg.value = false;
+  }
+}
+
+// ========== SVG 上传 ==========
+function triggerFileUpload() {
+  fileInputRef.value?.click();
+}
+
+async function onFileSelected(e: Event) {
+  const input = e.target as HTMLInputElement;
+  if (!input.files?.length) return;
+  for (const file of Array.from(input.files)) {
+    const svg = await file.text();
+    await uploadSvg(svg, file.name.replace(/\.svg$/i, ""));
+  }
+  input.value = "";
+}
+
+// 拖拽
+function onDragOver() {
+  isDragging.value = true;
+}
+
+function onDragLeave(e: DragEvent) {
+  // 只有真正离开窗口才隐藏遮罩
+  if (!e.relatedTarget) isDragging.value = false;
+}
+
+async function onDrop(e: DragEvent) {
+  isDragging.value = false;
+  const files = e.dataTransfer?.files;
+  if (!files?.length) return;
+
+  for (const file of Array.from(files)) {
+    if (!file.name.endsWith(".svg")) {
+      ElMessage.warning(`跳过非 SVG 文件: ${file.name}`);
+      continue;
+    }
+    const svg = await file.text();
+    await uploadSvg(svg, file.name.replace(/\.svg$/i, ""));
+  }
+}
+
+// 粘贴
+async function onPaste(e: ClipboardEvent) {
+  // 如果焦点在输入框，不处理
+  if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+  // 检查是否有文件
+  const files = e.clipboardData?.files;
+  if (files?.length) {
+    for (const file of Array.from(files)) {
+      if (file.type === "image/svg+xml" || file.name.endsWith(".svg")) {
+        const svg = await file.text();
+        await uploadSvg(svg, file.name.replace(/\.svg$/i, ""));
+        e.preventDefault();
+        return;
+      }
+    }
+  }
+
+  // 检查文本中是否有 SVG
+  const text = e.clipboardData?.getData("text");
+  if (text?.includes("<svg")) {
+    e.preventDefault();
+    await uploadSvg(text, "");
+  }
+}
+
+// 上传 SVG 的核心逻辑
+async function uploadSvg(svgContent: string, suggestedName: string) {
+  try {
+    // 让用户确认名称和 class
+    const defaultName = suggestedName || "new-icon";
+    const { value: formValues } = await ElMessageBox.prompt(
+      `请确认图标信息（来源: ${defaultName}）`,
+      "添加 SVG 图标",
+      {
+        confirmButtonText: "添加",
+        cancelButtonText: "取消",
+        inputPlaceholder: "图标名称（同时作为 font_class）",
+        inputValue: defaultName,
+      }
+    );
+
+    const name = (formValues as string).trim();
+    if (!name) return;
+
+    const fontClass = name.replace(/\s+/g, "-").toLowerCase();
+
+    const response = await fetch("/api/upload-svg", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ svg: svgContent, name, fontClass }),
+    });
+
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.error || "上传失败");
+    }
+
+    const result = await response.json();
+
+    // 更新本地数据
+    json.value = result.json;
+    originalJson.value = JSON.stringify(result.json);
+
+    // 刷新字体（重新加载 @font-face）
+    await loadFontStyle();
+
+    // 选中新增的图标
+    const newIdx = json.value.glyphs.findIndex((g) => g.icon_id === result.glyph.icon_id);
+    if (newIdx !== -1) {
+      selectedIndices.value = new Set([newIdx]);
+      requestAnimationFrame(() => {
+        cardRefs.value.get(newIdx)?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }
+
+    ElMessage.success(`图标 "${name}" 添加成功`);
+  } catch (error: any) {
+    if (error !== "cancel" && error?.message !== "cancel") {
+      ElMessage.error(error.message || "上传失败");
+    }
+  }
+}
+
+// ========== 剪切/粘贴图标 ==========
+const clipboard = ref<Glyph[] | null>(null);
+
+function cutSelected() {
+  if (selectedIndices.value.size === 0) return;
+  const sorted = [...selectedIndices.value].sort((a, b) => a - b);
+  clipboard.value = sorted.map((i) => ({ ...json.value.glyphs[i] }));
+  for (const i of [...sorted].reverse()) {
+    json.value.glyphs.splice(i, 1);
+  }
+  selectedIndices.value = new Set();
+  ElMessage.info(`已剪切 ${sorted.length} 个图标`);
+}
+
+function pasteClipboard() {
+  if (!clipboard.value) return;
+  const insertAt = selectedIndices.value.size > 0
+    ? Math.min(...selectedIndices.value)
+    : json.value.glyphs.length;
+  json.value.glyphs.splice(insertAt, 0, ...clipboard.value);
+  const newIndices = new Set<number>();
+  for (let i = 0; i < clipboard.value.length; i++) {
+    newIndices.add(insertAt + i);
+  }
+  selectedIndices.value = newIndices;
+  clipboard.value = null;
+}
+
+function moveSelected(step: number, rowMode: boolean) {
+  const indices = [...selectedIndices.value].sort((a, b) => a - b);
+  if (indices.length === 0) return;
+  const arr = json.value.glyphs;
+
+  if (rowMode) {
+    for (const i of indices) {
+      if (i + step < 0 || i + step >= arr.length) return;
+    }
+  }
+
+  const ordered = step < 0 ? indices : [...indices].reverse();
+  const newSelected = new Set(selectedIndices.value);
+
+  for (const i of ordered) {
+    const target = i + step;
+    if (target < 0 || target >= arr.length) continue;
+    if (newSelected.has(target)) continue;
+    [arr[i], arr[target]] = [arr[target], arr[i]];
+    newSelected.delete(i);
+    newSelected.add(target);
+  }
+  selectedIndices.value = newSelected;
+}
+
+// ========== 键盘事件 ==========
+function handleKeydown(e: KeyboardEvent) {
+  if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+  if (e.key === "Delete") {
+    e.preventDefault();
+    confirmDelete();
+    return;
+  }
+  if (e.ctrlKey && e.key === "x") {
+    e.preventDefault();
+    cutSelected();
+    return;
+  }
+  if (e.ctrlKey && e.key === "v" && clipboard.value) {
+    e.preventDefault();
+    pasteClipboard();
+    return;
+  }
+
+  const directionMap: Record<string, { step: number; rowMode: boolean }> = {
+    ArrowLeft: { step: -1, rowMode: false },
+    ArrowRight: { step: 1, rowMode: false },
+    ArrowUp: { step: -1, rowMode: true },
+    ArrowDown: { step: 1, rowMode: true },
+  };
+
+  const config = directionMap[e.key];
+  if (!config) return;
+  e.preventDefault();
+
+  if (e.shiftKey) {
+    const step = (config.rowMode ? columnsPerRow.value : 1) * config.step;
+    if (selectedIndices.value.size === 1) {
+      const i = selectedIndex.value!;
+      const arr = json.value.glyphs;
+      const targetIndex = config.step < 0
+        ? Math.max(0, i + step)
+        : Math.min(arr.length - 1, i + step);
+      if (targetIndex === i) return;
+      const [item] = arr.splice(i, 1);
+      arr.splice(targetIndex, 0, item);
+      selectedIndices.value = new Set([targetIndex]);
+    } else if (selectedIndices.value.size > 1) {
+      moveSelected(step, config.rowMode);
+    }
+  } else {
+    if (selectedIndices.value.size !== 1 || json.value.glyphs.length === 0) return;
+    const i = selectedIndex.value!;
+    const step = config.rowMode ? columnsPerRow.value : 1;
+    const targetIndex = config.step < 0
+      ? Math.max(0, i + config.step * step)
+      : Math.min(json.value.glyphs.length - 1, i + config.step * step);
+    selectedIndices.value = new Set([targetIndex]);
+    scrollToSelected();
+  }
+}
+
+// ========== 加载数据 ==========
+async function loadFontStyle() {
+  // 移除旧的动态样式
+  const oldStyle = document.getElementById("dynamic-icon-font");
+  oldStyle?.remove();
+  const oldLink = document.getElementById("dynamic-icon-css");
+  oldLink?.remove();
+
+  // 动态加载 iconfont.css
+  const link = document.createElement("link");
+  link.id = "dynamic-icon-css";
+  link.rel = "stylesheet";
+  link.href = `/css?t=${Date.now()}`;
+  document.head.appendChild(link);
+}
+
+async function loadData() {
+  try {
+    const response = await fetch("/api/read");
+    if (!response.ok) throw new Error("加载失败");
+    const data = await response.json();
+    json.value = data;
+    originalJson.value = JSON.stringify(data);
+
+    await loadFontStyle();
+    await nextTick();
+    calculateColumnsPerRow();
+  } catch (error: any) {
+    ElMessage.error(error.message || "加载数据失败");
+  }
+}
+
+// ========== ResizeObserver ==========
+function setupResizeObserver() {
+  if (!gridRef.value) return;
+  resizeObserver = new ResizeObserver(() => calculateColumnsPerRow());
+  resizeObserver.observe(gridRef.value);
+}
+
+// ========== 生命周期 ==========
+onMounted(() => {
+  loadData();
+  document.addEventListener("keydown", handleKeydown);
+  document.addEventListener("paste", onPaste);
+  setupResizeObserver();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+  document.removeEventListener("paste", onPaste);
+  resizeObserver?.disconnect();
+});
+</script>
+
+<style scoped>
+.icon-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+}
+
+/* 拖拽遮罩 */
+.drop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(64, 158, 255, 0.15);
+  border: 3px dashed #409eff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.drop-hint {
+  text-align: center;
+  color: #409eff;
+  font-size: 20px;
+}
+
+.drop-hint p {
+  margin-top: 16px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.icon-grid-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.grid-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 500;
+}
+
+.hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.icon-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.icon-card:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+.icon-card.selected {
+  border-color: #409eff;
+  background: #ecf5ff;
+}
+
+.icon-preview {
+  font-size: 36px;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.icon-preview i {
+  font-size: 60px;
+}
+
+.icon-info {
+  text-align: center;
+  width: 100%;
+}
+
+.icon-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-class {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.edit-panel {
+  width: 320px;
+  background: white;
+  border-left: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 500;
+}
+
+.panel-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.preview-large {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 120px;
+  margin-bottom: 16px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.preview-large i {
+  font-size: 64px;
+  color: #333;
+}
+
+.panel-actions {
+  margin-top: 16px;
+}
+
+.panel-actions .el-button {
+  width: 100%;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: white;
+  border-top: 1px solid #e4e7ed;
+  font-size: 12px;
+  color: #909399;
+}
+
+.modified {
+  color: #e6a23c;
+  font-weight: 500;
+}
+</style>