20260920173439

code/one-designer/apps/demo/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>报表设计器 Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

code/one-designer/apps/demo/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@report/demo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@report/core": "workspace:*",
+    "@report/layout": "workspace:*",
+    "@report/designer": "workspace:*",
+    "@report/designer-vue": "workspace:*",
+    "@report/renderer": "workspace:*",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
+  }
+}

code/one-designer/apps/demo/src/App.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * Demo 宿主应用。
+ *
+ * 展示 @report/designer-vue 的用法：
+ * 1. 用 @report/core 创建一份示例报表文档。
+ * 2. 挂载 <ReportDesigner> 组件。
+ * 3. 演示亮/暗主题切换（通过 .dark 类 + CSS 变量，§14.4）。
+ */
+import { ref, onMounted } from "vue"
+import { createDocument, type ReportDocument } from "@report/core"
+import { ReportDesigner } from "@report/designer-vue"
+
+/** 构造示例文档：页眉标题 + 明细区若干元素。 */
+function sampleDocument(): ReportDocument {
+  const doc = createDocument({ name: "销售单示例" })
+
+  const detail = doc.sections.find((s) => s.kind === "detail")!
+  detail.children.push(
+    {
+      id: "title-1",
+      type: "text",
+      name: "单据标题",
+      frame: { x: 10, y: 6, width: 120, height: 12 },
+      props: { text: "销售出库单" },
+    },
+    {
+      id: "rect-1",
+      type: "rect",
+      name: "信息框",
+      frame: { x: 10, y: 24, width: 170, height: 26 },
+    },
+    {
+      id: "text-1",
+      type: "text",
+      name: "客户名称",
+      frame: { x: 14, y: 30, width: 60, height: 8 },
+      props: { text: "客户：示例公司" },
+    },
+    {
+      id: "text-2",
+      type: "text",
+      name: "日期",
+      frame: { x: 110, y: 30, width: 60, height: 8 },
+      props: { text: "日期：2025-01-01" },
+    },
+    {
+      id: "text-3",
+      type: "text",
+      name: "说明",
+      frame: { x: 10, y: 60, width: 170, height: 30 },
+      props: { text: "在左侧工具箱添加元素，点击画布元素可在右侧编辑属性，工具栏支持撤销/重做与缩放。" },
+    },
+  )
+
+  return doc
+}
+
+const document1 = sampleDocument()
+const isDark = ref(false)
+
+/** 切换亮/暗主题：把 .dark 类挂到根元素，CSS 变量（--rd-*）随之切换。 */
+function toggleTheme(): void {
+  isDark.value = !isDark.value
+  document.documentElement.classList.toggle("dark", isDark.value)
+}
+
+onMounted(() => {
+  document.documentElement.classList.toggle("dark", isDark.value)
+})
+</script>
+
+<template>
+  <div class="demo-shell">
+    <header class="demo-topbar">
+      <span class="demo-title">Web Report Designer · Demo</span>
+      <button class="demo-theme-btn" type="button" @click="toggleTheme">
+        {{ isDark ? "☀️ 亮色" : "🌙 暗色" }}
+      </button>
+    </header>
+    <main class="demo-main">
+      <ReportDesigner :document="document1" />
+    </main>
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+.demo-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.demo-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 16px;
+  border-bottom: 1px solid #ddd;
+  font: 13px/1.4 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.demo-title {
+  color: #555;
+}
+
+.demo-theme-btn {
+  height: 26px;
+  padding: 0 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.dark .demo-topbar {
+  border-bottom-color: #27272a;
+  background: #18181b;
+}
+
+.dark .demo-title {
+  color: #a1a1aa;
+}
+
+.dark .demo-theme-btn {
+  background: #27272a;
+  border-color: #3f3f46;
+  color: #e4e4e7;
+}
+
+.demo-main {
+  flex: 1;
+  min-height: 0;
+}
+</style>

code/one-designer/apps/demo/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from "vue"
+// 组件样式由库构建产出，宿主需显式引入（设计令牌由 injectThemeStyle 注入）。
+import "@report/designer-vue/style.css"
+import App from "./App.vue"
+
+createApp(App).mount("#app")

code/one-designer/apps/demo/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5180,
+    host: "127.0.0.1",
+  },
+})