willa-workspace 0.0.3-alpha.2739b3e

package/example/src/docs/Watermark.demo.tsx

@@ -0,0 +1,352 @@
+import { Badge } from "willa/Badge";
+import { Card } from "willa/Card";
+import { Group } from "willa/Group";
+import { Stack } from "willa/Stack";
+import { Watermark } from "willa/Watermark";
+import "willa/Badge.css";
+import "willa/Card.css";
+import "willa/Group.css";
+import "willa/Stack.css";
+import "willa/Watermark.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const brandMark =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="18" fill="%2382A3EC"/><path d="M20 18h9.4l7.1 19.8L43.6 18H52l-12.6 28h-6.6L20 18Z" fill="white"/></svg>';
+
+const previewCardStyle = {
+  width: "min(100%, 56rem)",
+  minHeight: "18rem",
+} as const;
+
+const denseCardStyle = {
+  width: "min(100%, 44rem)",
+  minHeight: "14rem",
+} as const;
+
+const fullAreaStyle = {
+  width: "min(100%, 56rem)",
+  minHeight: "22rem",
+  padding: "1.75rem",
+} as const;
+
+export default defineDoc({
+  id: "watermark",
+  name: "Watermark",
+  category: "content",
+  packageName: "willa/Watermark",
+  description: "用于页面、卡片、预览区和导出区域的文本或图片水印覆盖层。",
+  imports: [{ name: "Watermark", from: "willa/Watermark" }],
+  css: "willa/Watermark.css",
+  demo: {
+    name: "Watermark",
+    component: Watermark,
+    props: {
+      content: ["Willa Components", "Internal Preview"],
+      gap: [88, 72],
+      offset: [16, 20],
+      children: (
+        <Card variant="outline" style={previewCardStyle}>
+          <Stack gap="sm">
+            <Group justify="between" align="center">
+              <Stack gap="xs">
+                <strong>组件预览草稿</strong>
+                <span
+                  style={{
+                    color: "var(--willa-text-soft)",
+                    fontSize: "0.92rem",
+                  }}
+                >
+                  当前页面包含未发布的布局和样式调整。
+                </span>
+              </Stack>
+              <Badge tone="info">仅内部可见</Badge>
+            </Group>
+            <p style={{ margin: 0, color: "var(--willa-text)" }}>
+              这里适合放卡片、表格、文章内容或图片预览区。
+            </p>
+          </Stack>
+        </Card>
+      ),
+    },
+  },
+  code: `
+    import { Badge } from "willa/Badge";
+    import { Card } from "willa/Card";
+    import { Group } from "willa/Group";
+    import { Stack } from "willa/Stack";
+    import { Watermark } from "willa/Watermark";
+    import "willa/Badge.css";
+    import "willa/Card.css";
+    import "willa/Group.css";
+    import "willa/Stack.css";
+    import "willa/Watermark.css";
+
+    <Watermark content={["Willa Components", "Internal Preview"]} gap={[88, 72]} offset={[16, 20]}>
+      <Card style={{ width: "min(100%, 56rem)", minHeight: "18rem" }}>
+        <Stack gap="sm">
+          <Group justify="between" align="center">
+            <Stack gap="xs">
+              <strong>组件预览草稿</strong>
+              <span style={{ color: "var(--willa-text-soft)", fontSize: "0.92rem" }}>
+                当前页面包含未发布的布局和样式调整。
+              </span>
+            </Stack>
+            <Badge tone="info">仅内部可见</Badge>
+          </Group>
+          <p style={{ margin: 0, color: "var(--willa-text)" }}>
+            这里适合放卡片、表格、文章内容或图片预览区。
+          </p>
+        </Stack>
+      </Card>
+    </Watermark>;
+  `,
+  sections: [
+    {
+      title: "文字样式与密度",
+      code: `
+        <Watermark
+          content={["Design Review", "Preview Only"]}
+          width={184}
+          height={96}
+          gap={[56, 48]}
+          rotate={-16}
+          font={{
+            color: "rgba(79, 117, 214, 0.18)",
+            fontSize: 17,
+            fontWeight: 640,
+            letterSpacing: 1,
+          }}
+        >
+          <Card variant="outline" style={{ width: "min(100%, 44rem)", minHeight: "14rem" }}>
+            <Stack gap="xs">
+              <strong>更高密度的审批面板</strong>
+              <span style={{ color: "var(--willa-text-soft)", fontSize: "0.9rem" }}>
+                适合评审区、导出预览区和二次确认面板。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>;
+      `,
+      content: (
+        <Watermark
+          content={["Design Review", "Preview Only"]}
+          width={184}
+          height={96}
+          gap={[56, 48]}
+          rotate={-16}
+          font={{
+            color: "rgba(79, 117, 214, 0.18)",
+            fontSize: 17,
+            fontWeight: 640,
+            letterSpacing: 1,
+          }}
+        >
+          <Card variant="outline" style={denseCardStyle}>
+            <Stack gap="xs">
+              <strong>更高密度的审批面板</strong>
+              <span
+                style={{ color: "var(--willa-text-soft)", fontSize: "0.9rem" }}
+              >
+                适合评审区、导出预览区和二次确认面板。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>
+      ),
+    },
+    {
+      title: "自定义字体颜色",
+      code: `
+        <Watermark
+          content={["Internal", "Only"]}
+          width={168}
+          height={92}
+          gap={[72, 60]}
+          rotate={-18}
+          font={{
+            color: "rgba(34, 197, 94, 0.18)",
+            fontSize: 16,
+            fontWeight: 620,
+            letterSpacing: 0.8,
+          }}
+        >
+          <Card style={{ width: "min(100%, 44rem)", minHeight: "14rem" }}>
+            <Stack gap="xs">
+              <strong>可调色的文字水印</strong>
+              <span style={{ color: "var(--willa-text-soft)", fontSize: "0.9rem" }}>
+                适合内部预览、评审稿和半透明提示层。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>;
+      `,
+      content: (
+        <Watermark
+          content={["Internal", "Only"]}
+          width={168}
+          height={92}
+          gap={[72, 60]}
+          rotate={-18}
+          font={{
+            color: "rgba(34, 197, 94, 0.18)",
+            fontSize: 16,
+            fontWeight: 620,
+            letterSpacing: 0.8,
+          }}
+        >
+          <Card variant="outline" style={denseCardStyle}>
+            <Stack gap="xs">
+              <strong>可调色的文字水印</strong>
+              <span
+                style={{ color: "var(--willa-text-soft)", fontSize: "0.9rem" }}
+              >
+                适合内部预览、评审稿和半透明提示层。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>
+      ),
+    },
+    {
+      title: "图片水印",
+      code: `
+        const brandMark =
+          'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="4" y="4" width="56" height="56" rx="18" fill="%2382A3EC"/><path d="M20 18h9.4l7.1 19.8L43.6 18H52l-12.6 28h-6.6L20 18Z" fill="white"/></svg>';
+
+        <Watermark
+          image={brandMark}
+          content="Willa Brand"
+          width={180}
+          height={104}
+          gap={[64, 52]}
+          font={{ color: "rgba(15, 23, 42, 0.14)", fontSize: 15, fontWeight: 620 }}
+        >
+          <Card style={{ width: "min(100%, 56rem)", minHeight: "22rem", padding: "1.75rem" }}>
+            <Stack gap="sm">
+              <strong>图片或品牌型水印</strong>
+              <span style={{ color: "var(--willa-text-soft)", fontSize: "0.92rem" }}>
+                适合媒体资产、截图、分享面板和品牌物料区。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>;
+      `,
+      content: (
+        <Watermark
+          image={brandMark}
+          content="Willa Brand"
+          width={180}
+          height={104}
+          gap={[64, 52]}
+          font={{
+            color: "rgba(15, 23, 42, 0.14)",
+            fontSize: 15,
+            fontWeight: 620,
+          }}
+        >
+          <Card variant="outline" style={fullAreaStyle}>
+            <Stack gap="sm">
+              <strong>图片或品牌型水印</strong>
+              <span
+                style={{ color: "var(--willa-text-soft)", fontSize: "0.92rem" }}
+              >
+                适合媒体资产、截图、分享面板和品牌物料区。
+              </span>
+            </Stack>
+          </Card>
+        </Watermark>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "作为水印底层内容区域渲染的子节点。",
+    },
+    {
+      name: "content",
+      type: "string | Array<string>",
+      description: "水印文字内容。传数组时会按多行渲染。",
+    },
+    {
+      name: "image",
+      type: "string",
+      description: "水印图片地址，适合品牌标识或图形水印。",
+    },
+    {
+      name: "width",
+      type: "number",
+      defaultValue: "152",
+      description: "单个水印块的宽度，单位为 px。",
+    },
+    {
+      name: "height",
+      type: "number",
+      defaultValue: "84",
+      description: "单个水印块的高度，单位为 px。",
+    },
+    {
+      name: "gap",
+      type: "[number, number]",
+      defaultValue: "[96, 88]",
+      description: "水印块横向和纵向的重复间距。",
+    },
+    {
+      name: "offset",
+      type: "[number, number]",
+      defaultValue: "[24, 12]",
+      description: "水印背景起始偏移，用于微调排布位置。",
+    },
+    {
+      name: "rotate",
+      type: "number",
+      defaultValue: "-22",
+      description: "单个水印块的旋转角度。",
+    },
+    {
+      name: "opacity",
+      type: "number",
+      defaultValue: "1",
+      description: "整个水印层的透明度。",
+    },
+    {
+      name: "zIndex",
+      type: "number",
+      defaultValue: "1",
+      description: "水印层相对内容区域的层级。",
+    },
+    {
+      name: "fixed",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否以 fixed 形式覆盖当前视口。",
+    },
+    {
+      name: "font",
+      type: "WatermarkFont",
+      description: "文字水印的颜色、字号、字重和字距配置。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "根节点自定义类名。",
+    },
+    {
+      name: "style",
+      type: "CSSProperties",
+      description: "根节点自定义样式。",
+    },
+    {
+      name: "articleSourcePath",
+      type: "string",
+      description: "水印资源配置。",
+    },
+    {
+      name: "resolveAssetUrl",
+      type: "ResolveAssetUrl",
+      description: "水印资源配置。",
+    },
+  ],
+});

package/example/src/docs/WebEmbed.demo.tsx

@@ -0,0 +1,96 @@
+import { WebEmbed } from "willa/WebEmbed";
+import "willa/WebEmbed.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const previewStyle = {
+  width: "min(100%, 58rem)",
+  margin: "0 auto",
+} as const;
+
+const WebEmbedPreview = () => (
+  <div style={previewStyle}>
+    <WebEmbed
+      src="https://example.com"
+      title="示例网站"
+      description="一个简单的 iframe 嵌入示例。"
+      provider="示例"
+      height={360}
+    />
+  </div>
+);
+
+export default defineDoc({
+  id: "web-embed",
+  name: "WebEmbed",
+  category: "widgets",
+  packageName: "willa/WebEmbed",
+  description: "带来源信息和降级文案的 iframe 嵌入组件。",
+  imports: [{ name: "WebEmbed", from: "willa/WebEmbed" }],
+  css: "willa/WebEmbed.css",
+  demo: {
+    name: "WebEmbedPreview",
+    component: WebEmbedPreview,
+  },
+  code: `
+    import { WebEmbed } from "willa/WebEmbed";
+    import "willa/WebEmbed.css";
+
+    <WebEmbed
+      src="https://example.com"
+      title="示例网站"
+      description="一个简单的 iframe 嵌入示例。"
+      provider="示例"
+      height={360}
+    />;
+  `,
+  props: [
+    {
+      name: "src",
+      type: "string",
+      required: true,
+      description: "iframe 加载的页面地址。",
+    },
+    {
+      name: "title",
+      type: "string",
+      required: true,
+      description: "用于无障碍访问的 iframe 标题。",
+    },
+    {
+      name: "href",
+      type: "string",
+      description: "标题和外链按钮跳转地址，未传时使用 src。",
+    },
+    {
+      name: "description",
+      type: "string",
+      description: "嵌入标题下方的辅助说明。",
+    },
+    {
+      name: "provider",
+      type: "string",
+      description: "展示在嵌入标题上方的来源标签。",
+    },
+    {
+      name: "height",
+      type: "number | string",
+      description: "嵌入区域高度，数字会按像素处理。",
+    },
+    {
+      name: "allow",
+      type: "string",
+      description: "透传给 iframe 的 allow 属性。",
+    },
+    {
+      name: "allowFullScreen",
+      type: "boolean",
+      description: "是否允许 iframe 全屏。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "传给网页嵌入根节点的 className。",
+    },
+  ],
+});

package/example/src/docs/XPostEmbed.demo.tsx

@@ -0,0 +1,57 @@
+import { XPostEmbed } from "willa/XPostEmbed";
+import "willa/XPostEmbed.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const previewStyle = {
+  width: "min(100%, 35rem)",
+  margin: "0 auto",
+} as const;
+
+const XPostEmbedPreview = () => (
+  <div style={previewStyle}>
+    <XPostEmbed id="20" title="Twitter 账号的第一条公开帖子" />
+  </div>
+);
+
+export default defineDoc({
+  id: "x-post-embed",
+  name: "XPostEmbed",
+  category: "widgets",
+  packageName: "willa/XPostEmbed",
+  description: "带加载和错误状态的 X 帖子嵌入组件。",
+  imports: [{ name: "XPostEmbed", from: "willa/XPostEmbed" }],
+  css: "willa/XPostEmbed.css",
+  demo: {
+    name: "XPostEmbedPreview",
+    component: XPostEmbedPreview,
+  },
+  code: `
+    import { XPostEmbed } from "willa/XPostEmbed";
+    import "willa/XPostEmbed.css";
+
+    <XPostEmbed id="20" title="Twitter 账号的第一条公开帖子" />;
+  `,
+  props: [
+    {
+      name: "id",
+      type: "string",
+      description: "X 帖子 id，未提供 url 时使用。",
+    },
+    {
+      name: "url",
+      type: "string",
+      description: "完整的 X 帖子链接，组件会从中提取状态 id。",
+    },
+    {
+      name: "title",
+      type: "string",
+      description: "嵌入帖子的无障碍标签。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "传给 X 内容嵌入根节点的 className。",
+    },
+  ],
+});

package/example/src/main.tsx

@@ -0,0 +1,36 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { App } from "#example/App";
+import "willa/external.css";
+import "willa/themes/light.css";
+import "willa/themes/dark.css";
+import "./styles.css";
+
+type VitePreloadErrorEvent = Event & {
+  payload?: unknown;
+};
+
+const preloadReloadKey = "willa:preload-reload-at";
+const preloadReloadWindow = 30_000;
+
+window.addEventListener("vite:preloadError", (event: VitePreloadErrorEvent) => {
+  event.preventDefault();
+
+  const lastReloadAt = Number(sessionStorage.getItem(preloadReloadKey));
+  if (
+    Number.isFinite(lastReloadAt) &&
+    Date.now() - lastReloadAt < preloadReloadWindow
+  ) {
+    throw event.payload;
+  }
+
+  sessionStorage.setItem(preloadReloadKey, String(Date.now()));
+  window.location.reload();
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);