@shwfed/config 2.7.1 → 2.7.3

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/config.vue.d.ts

@@ -0,0 +1,34 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import { type Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/runtime.d.vue.ts

@@ -0,0 +1,34 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    'block': Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:block": (value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/runtime.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+defineOptions({ name: "ShwfedBlockIconRuntime" });
+const block = defineModel("block", { type: null, ...{ required: true } });
+defineProps({
+  configure: { type: Function, required: false }
+});
+const DEFAULT_SIZE = 8;
+const iconSize = computed(() => block.value.size ?? DEFAULT_SIZE);
+const iconStyle = computed(() => {
+  const s = { fontSize: `calc(${iconSize.value} * 0.25rem)` };
+  if (block.value.color) s.color = block.value.color;
+  return s;
+});
+const circleStyle = computed(() => ({
+  padding: `calc(${iconSize.value} * 0.125rem)`,
+  backgroundColor: `color-mix(in srgb, ${block.value.color || "currentColor"} 20%, white)`
+}));
+</script>
+
+<template>
+  <div class="flex h-full w-full items-center justify-center">
+    <div
+      v-if="block.circle"
+      class="flex items-center justify-center rounded-full"
+      :style="circleStyle"
+    >
+      <Icon
+        v-if="block.icon"
+        :icon="block.icon"
+        :style="iconStyle"
+      />
+    </div>
+    <Icon
+      v-else-if="block.icon"
+      :icon="block.icon"
+      :style="iconStyle"
+    />
+  </div>
+</template>

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/runtime.vue.d.ts

@@ -0,0 +1,34 @@
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    configure?: (env: Environment) => void;
+};
+type __VLS_ModelProps = {
+    'block': Value;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:block": (value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:block"?: ((value: {
+        readonly size?: number | undefined;
+        readonly type: "com.shwfed.block.icon";
+        readonly id: string;
+        readonly icon: string;
+        readonly color?: string | undefined;
+        readonly circle?: boolean | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-02";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/schema.d.ts

@@ -0,0 +1,33 @@
+import { Schema } from 'effect';
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+export { getStructFieldDescription, getStructFieldTitle } from '../../../../table/utils/schema-meta.js';
+type AnySchema = Schema.Schema<any, any, never>;
+type Configure = (env: Environment) => void;
+export declare const type: "com.shwfed.block.icon";
+export declare const compatibilityDate: "2026-06-02";
+export declare const metadata: {
+    readonly name: "图标";
+    readonly icon: "fluent:emoji-20-regular";
+    readonly w: {
+        readonly initial: 4;
+        readonly min: 1;
+        readonly max: number;
+    };
+    readonly h: {
+        readonly initial: 4;
+        readonly min: 1;
+        readonly max: number;
+    };
+};
+export declare function schema(_configure: Configure, _blockRef?: AnySchema): Schema.Struct<{
+    id: Schema.refine<string, typeof Schema.String>;
+    type: Schema.tag<"com.shwfed.block.icon">;
+    compatibilityDate: Schema.tag<"2026-06-02">;
+    displayName: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    icon: Schema.refine<string, typeof Schema.String>;
+    color: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    size: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    circle: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+}>;
+export declare function defaultBody(): Record<string, unknown>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;

package/dist/runtime/components/config/blocks/2026-06-02/com.shwfed.block.icon/schema.js

@@ -0,0 +1,45 @@
+import { Schema } from "effect";
+export { getStructFieldDescription, getStructFieldTitle } from "../../../../table/utils/schema-meta.js";
+export const type = "com.shwfed.block.icon";
+export const compatibilityDate = "2026-06-02";
+export const metadata = {
+  name: "\u56FE\u6807",
+  icon: "fluent:emoji-20-regular",
+  w: { initial: 4, min: 1, max: Infinity },
+  h: { initial: 4, min: 1, max: Infinity }
+};
+export function schema(_configure, _blockRef) {
+  return Schema.Struct({
+    id: Schema.UUID.annotations({ description: "\u5757\u552F\u4E00\u6807\u8BC6" }),
+    type: Schema.tag(type),
+    compatibilityDate: Schema.tag(compatibilityDate),
+    displayName: Schema.optional(Schema.String.annotations({
+      title: "\u5185\u90E8\u540D\u79F0",
+      description: "\u4EC5\u5728\u7F16\u8F91\u5668\u5185\u53EF\u89C1\u7684\u5757\u540D\uFF0C\u7528\u4E8E\u5728\u4FA7\u8FB9\u680F\u548C\u5E03\u5C40\u7F16\u8F91\u5668\u4E2D\u8BC6\u522B\u5757\uFF1B\u8FD0\u884C\u65F6\u4E0D\u5C55\u793A"
+    })),
+    icon: Schema.String.pipe(Schema.minLength(1)).annotations({
+      title: "\u56FE\u6807",
+      description: "Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u5982 `fluent:add-20-regular`\uFF1B\u53EF\u5728\u56FE\u6807\u6D4F\u89C8\u5668\u4E2D\u67E5\u627E"
+    }),
+    color: Schema.optional(Schema.String.annotations({
+      title: "\u989C\u8272",
+      description: "\u56FE\u6807\u989C\u8272\uFF08\u4EFB\u610F CSS \u989C\u8272\uFF0C\u5982 `#4f46e5`\uFF09\uFF1B\u7559\u7A7A\u5219\u7EE7\u627F\u6587\u672C\u989C\u8272\u3002\u5F00\u542F\u5706\u73AF\u65F6\u5706\u73AF\u80CC\u666F\u4E3A\u8BE5\u989C\u8272\u4E0E\u767D\u8272\u6309 2:8 \u6DF7\u5408"
+    })),
+    size: Schema.optional(
+      Schema.Number.pipe(Schema.int(), Schema.positive()).annotations({
+        title: "\u5927\u5C0F",
+        description: "\u56FE\u6807\u5C3A\u5BF8\uFF0C\u5355\u4F4D\u4E3A `0.25rem`\uFF08\u540C Tailwind \u95F4\u8DDD\u523B\u5EA6\uFF0C\u5B9E\u9645\u5C3A\u5BF8\u4E3A `calc(n * 0.25rem)`\uFF09\uFF0C\u6B63\u6574\u6570\uFF1B\u7559\u7A7A\u5219\u4F7F\u7528\u9ED8\u8BA4 8\uFF08\u5373 `2rem`\uFF09"
+      })
+    ),
+    circle: Schema.optional(Schema.Boolean.annotations({
+      title: "\u5706\u73AF",
+      description: "\u5F00\u542F\u540E\u5C06\u56FE\u6807\u5305\u88F9\u5728\u4E00\u4E2A\u5706\u5F62\u80CC\u666F\u4E2D\uFF08\u80CC\u666F\u8272\u4E3A\u56FE\u6807\u989C\u8272\u4E0E\u767D\u8272\u6309 2:8 \u6DF7\u5408\uFF09"
+    }))
+  }).annotations({
+    title: "\u56FE\u6807\u5757",
+    description: "\u6E32\u67D3\u5355\u4E2A Iconify \u56FE\u6807\u4F5C\u4E3A\u9875\u9762\u5757"
+  });
+}
+export function defaultBody() {
+  return { icon: "" };
+}

package/dist/runtime/components/config/config.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, provide, toRef, useTemplateRef } from "vue";
+import { computed, provide, ref, toRef, useTemplateRef } from "vue";
 import { Icon } from "@iconify/vue";
 import { toast } from "vue-sonner";
 import { readClip, reidFragment, writeClip } from "../../share/clipboard";
@@ -7,12 +7,54 @@ import BlockLayoutEditor from "../block-layout-editor/index.vue";
 import LayoutsSidebar from "../block-layout-editor/sidebar.vue";
 import LayoutMetaStrip from "../block-layout-editor/meta-strip.vue";
 import { Button } from "../ui/button";
+import { ExpressionEditor } from "../ui/expression-editor";
+import { Field, FieldLabel } from "../ui/field";
+import { Locale as LocaleField } from "../ui/locale";
+import { Markdown } from "../ui/markdown";
 import { ScrollArea } from "../ui/scroll-area";
+import { Separator } from "../ui/separator";
 import { BREADCRUMB_EXTENSION_KEY } from "./breadcrumb-extension";
+import { PageConfig, getStructFieldDescription, getStructFieldTitle } from "./schema";
 defineOptions({ name: "ShwfedConfigConfig" });
 const props = defineProps({
   state: { type: Object, required: true }
 });
+const viewMode = ref("content");
+function selectGeneral() {
+  viewMode.value = "general";
+}
+function selectLayout(index) {
+  activeLayoutIndex.value = index;
+  viewMode.value = "content";
+}
+const pageSchema = PageConfig(() => {
+});
+const titleTitle = getStructFieldTitle(pageSchema, "title") ?? "\u6807\u9898";
+const titleDescription = getStructFieldDescription(pageSchema, "title");
+const styleTitle = getStructFieldTitle(pageSchema, "style") ?? "\u6837\u5F0F";
+const styleDescription = getStructFieldDescription(pageSchema, "style");
+function isLocaleBlank(v) {
+  return !v || v.every((item) => item.message.trim().length === 0);
+}
+const pageTitle = computed({
+  get: () => props.state.draft.value.title,
+  set: (v) => {
+    props.state.draft.value = {
+      ...props.state.draft.value,
+      title: isLocaleBlank(v) ? void 0 : v
+    };
+  }
+});
+const pageStyle = computed({
+  get: () => props.state.draft.value.style ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    props.state.draft.value = {
+      ...props.state.draft.value,
+      style: trimmed.length > 0 ? v : void 0
+    };
+  }
+});
 const layouts = computed({
   get: () => props.state.layouts.value,
   set: (next) => {
@@ -99,11 +141,27 @@ function findBlockMeta(type, compatibilityDate) {
       class="flex gap-2 min-h-128"
     >
       <div class="flex w-64 shrink-0 flex-col">
+        <div
+          class="row pl-2"
+          :class="viewMode === 'general' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-700 hover:bg-zinc-50'"
+          @click="selectGeneral()"
+        >
+          <Icon
+            icon="fluent:settings-20-regular"
+            class="size-4 shrink-0"
+          />
+          <span class="flex-1 truncate">通用配置</span>
+        </div>
+
+        <Separator class="my-2" />
+
         <ScrollArea class="flex-1">
           <LayoutsSidebar
             ref="sidebarRef"
             v-model="layouts"
             v-model:active-index="activeLayoutIndex"
+            :active="viewMode !== 'general'"
+            @select="selectLayout"
           />
         </ScrollArea>
         <Button
@@ -120,29 +178,80 @@ function findBlockMeta(type, compatibilityDate) {
       </div>
 
       <div class="flex flex-1 flex-col gap-2">
-        <LayoutMetaStrip
-          v-model="layouts"
-          :index="activeLayoutIndex"
-        />
-        <div class="flex-1">
-          <BlockLayoutEditor
+        <!-- Page-level general settings. -->
+        <template v-if="viewMode === 'general'">
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="titleDescription"
+                #tooltip
+              >
+                <Markdown
+                  :source="titleDescription"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ titleTitle }}
+            </FieldLabel>
+            <LocaleField
+              :model-value="pageTitle"
+              translate-hint="page tab title"
+              @update:model-value="(v) => {
+  pageTitle = v;
+}"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="styleDescription"
+                #tooltip
+              >
+                <Markdown
+                  :source="styleDescription"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ styleTitle }}
+            </FieldLabel>
+            <ExpressionEditor
+              v-model="pageStyle"
+              placeholder="返回 CSS 字符串或样式对象的表达式，如 'padding: 2rem'"
+              multiline
+              class="min-h-16"
+            />
+          </Field>
+        </template>
+
+        <!-- Per-layout meta + canvas. -->
+        <template v-else>
+          <LayoutMetaStrip
             v-model="layouts"
-            v-model:active-index="activeLayoutIndex"
-            v-model:selected-item-ids="selectedBlockIds"
-            :items="blocks"
-            :find-entry="findBlockMeta"
-            :get-item-label="getBlockLabel"
-            :picker-entries="pickerEntries"
-            :can-delete="true"
-            item-noun="块"
-            @add-new="addBlock"
-            @drill-down="onDrillDown"
-            @delete-item="(id) => props.state.removeBlock(id)"
-            @delete-items="(ids) => props.state.removeBlocks(ids)"
-            @copy-items="copyBlocks"
-            @paste="pasteBlocks"
+            :index="activeLayoutIndex"
           />
-        </div>
+          <div class="flex-1">
+            <BlockLayoutEditor
+              v-model="layouts"
+              v-model:active-index="activeLayoutIndex"
+              v-model:selected-item-ids="selectedBlockIds"
+              :items="blocks"
+              :find-entry="findBlockMeta"
+              :get-item-label="getBlockLabel"
+              :picker-entries="pickerEntries"
+              :can-delete="true"
+              item-noun="块"
+              @add-new="addBlock"
+              @drill-down="onDrillDown"
+              @delete-item="(id) => props.state.removeBlock(id)"
+              @delete-items="(ids) => props.state.removeBlocks(ids)"
+              @copy-items="copyBlocks"
+              @paste="pasteBlocks"
+            />
+          </div>
+        </template>
       </div>
     </div>
 
@@ -172,3 +281,7 @@ function findBlockMeta(type, compatibilityDate) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.row{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;font-size:.875rem;gap:.375rem;padding-block:.375rem;padding-left:.5rem;padding-right:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>

package/dist/runtime/components/config/index.d.vue.ts

@@ -11,6 +11,8 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (value: Readonly<{
         kind: "shwfed.component.page";
+        title?: import("../../share/locale.js").LocaleValue;
+        style?: string;
         slot: Readonly<{
             blocks: ReadonlyArray<import("./schema.js").BlockValue>;
             layouts: readonly Readonly<{
@@ -23,6 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:config"?: ((value: Readonly<{
         kind: "shwfed.component.page";
+        title?: import("../../share/locale.js").LocaleValue;
+        style?: string;
         slot: Readonly<{
             blocks: ReadonlyArray<import("./schema.js").BlockValue>;
             layouts: readonly Readonly<{

package/dist/runtime/components/config/index.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { injectCELContext } from "../../utils/cel-context";
+import { Effect } from "effect";
+import { useI18n } from "vue-i18n";
+import { useHead } from "#app";
+import { getLocalizedText } from "../../share/locale";
+import { cel } from "../../utils/cel";
+import { celBindings, injectCELContext } from "../../utils/cel-context";
 import SlotRenderer from "../../share/slot-renderer.vue";
 import ShwfedModal from "../modal.vue";
 import EditorBody from "./config.vue";
@@ -52,12 +57,31 @@ function onGridClick(event) {
 function updateSlot(next) {
   config.value = { ...config.value, slot: next };
 }
+const pageStyle = computed(() => {
+  const expression = config.value.style;
+  if (!expression) return void 0;
+  try {
+    const r = Effect.runSync(cel(expression, celBindings(inheritedCEL)));
+    if (r === null || r === void 0) return void 0;
+    if (typeof r === "string") return r;
+    if (typeof r === "object") return r;
+    return String(r);
+  } catch {
+    return void 0;
+  }
+});
+const { locale } = useI18n({ useScope: "global", inheritLocale: true });
+useHead(() => {
+  const title = getLocalizedText(config.value.title, locale.value);
+  return title ? { title } : {};
+});
 </script>
 
 <template>
   <ClientOnly>
     <div
-      class="contents"
+      :class="pageStyle ? '' : 'contents'"
+      :style="pageStyle"
       @click.capture="onGridClick"
     >
       <SlotRenderer

package/dist/runtime/components/config/index.vue.d.ts

@@ -11,6 +11,8 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (value: Readonly<{
         kind: "shwfed.component.page";
+        title?: import("../../share/locale.js").LocaleValue;
+        style?: string;
         slot: Readonly<{
             blocks: ReadonlyArray<import("./schema.js").BlockValue>;
             layouts: readonly Readonly<{
@@ -23,6 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:config"?: ((value: Readonly<{
         kind: "shwfed.component.page";
+        title?: import("../../share/locale.js").LocaleValue;
+        style?: string;
         slot: Readonly<{
             blocks: ReadonlyArray<import("./schema.js").BlockValue>;
             layouts: readonly Readonly<{

package/dist/runtime/components/config/schema.d.ts

@@ -1,8 +1,18 @@
 import { Schema } from 'effect';
 import type { Environment } from '../../vendor/cel-js/lib/index.js';
+import { type LocaleValue } from '../../share/locale.js';
+export { getStructFieldDescription, getStructFieldTitle } from '../table/utils/schema-meta.js';
 declare const KIND = "shwfed.component.page";
 export declare function PageConfig(configure: (env: Environment) => void): Schema.Struct<{
     kind: Schema.tag<"shwfed.component.page">;
+    title: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>>;
+    style: Schema.optional<Schema.Schema<string, string, never>>;
     slot: Schema.refine<{
         readonly blocks: readonly any[];
         readonly layouts: readonly {
@@ -65,6 +75,14 @@ export declare function PageConfig(configure: (env: Environment) => void): Schem
  */
 export declare function defaults(): Pick<PageConfigValue, 'slot'>;
 export declare function createPageConfig(body?: Partial<Omit<Schema.Schema.Type<ReturnType<typeof PageConfig>>, 'kind'>>): {
+    style?: string | undefined;
+    title?: readonly [{
+        readonly locale: "zh";
+        readonly message: string;
+    }, ...{
+        readonly locale: "en" | "ja" | "ko";
+        readonly message: string;
+    }[]] | undefined;
     slot: {
         readonly blocks: readonly any[];
         readonly layouts: readonly {
@@ -95,6 +113,8 @@ export type BlockValue = Readonly<{
 export type { LayoutSetValue } from '../../share/layout.js';
 export type PageConfigValue = Readonly<{
     kind: typeof KIND;
+    title?: LocaleValue;
+    style?: string;
     slot: Readonly<{
         blocks: ReadonlyArray<BlockValue>;
         layouts: ReadonlyArray<import('../../share/layout').LayoutSetValue>;

package/dist/runtime/components/config/schema.js

@@ -1,6 +1,8 @@
 import { Schema } from "effect";
-import { Slot, defaultSlot } from "../../share/layout.js";
+import { Expression, Slot, defaultSlot } from "../../share/layout.js";
+import { Locale } from "../../share/locale.js";
 import { blockRef } from "./utils/resolve.js";
+export { getStructFieldDescription, getStructFieldTitle } from "../table/utils/schema-meta.js";
 const KIND = "shwfed.component.page";
 export function PageConfig(configure) {
   const Block = blockRef(configure).annotations({
@@ -8,8 +10,20 @@ export function PageConfig(configure) {
     description: "\u9875\u9762\u5757\uFF0C\u7531 `type` \u5B57\u6BB5\u533A\u5206\u7C7B\u578B"
   });
   const PageSlot = Slot(Block, configure);
+  const CelStyle = Expression({
+    configure,
+    resultType: (t) => t === "string" || t === "dyn" || t.startsWith("map") || t.startsWith("optional")
+  });
   return Schema.Struct({
     kind: Schema.tag(KIND),
+    title: Schema.optional(Locale).annotations({
+      title: "\u6807\u9898",
+      description: "\u9875\u9762\u6807\u9898\uFF08\u5185\u8054\u672C\u5730\u5316\u6587\u672C\uFF0C\u65E0 Markdown\uFF09\uFF1B\u8BBE\u7F6E\u540E\u7528\u4E8E\u6D4F\u89C8\u5668\u6807\u7B7E\u9875\u6807\u9898\uFF0C\u6309\u5F53\u524D\u8BED\u8A00\u53D6\u5BF9\u5E94\u6587\u6848\uFF0C\u7559\u7A7A\u5219\u4E0D\u8BBE\u7F6E"
+    }),
+    style: Schema.optional(CelStyle).annotations({
+      title: "\u6837\u5F0F",
+      description: "\u8FD4\u56DE\u5E94\u7528\u5728\u9875\u9762\u6839\u5143\u7D20\u4E0A\u7684\u6837\u5F0F\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8FD4\u56DE CSS \u5B57\u7B26\u4E32\uFF08\u5982 `'padding: 2rem'`\uFF09\u6216\u6837\u5F0F\u5BF9\u8C61\uFF08\u5982 `{'padding': '2rem'}`\uFF09\uFF1B\u7559\u7A7A\u5219\u4E0D\u8BBE\u989D\u5916\u6837\u5F0F"
+    }),
     slot: PageSlot
   }).annotations({
     title: "PageConfig",

package/dist/runtime/components/form/config.vue

@@ -33,23 +33,15 @@ const EXTRAS = [
   { id: "general", label: "\u901A\u7528\u914D\u7F6E", icon: "fluent:settings-20-regular" }
 ];
 const selection = ref({ kind: "extras", id: "general" });
-function updateInitialData(value) {
-  const next = { ...config.value };
-  if (value.trim() === "") {
-    const { initial: _omit, ...rest } = next;
-    config.value = rest;
-  } else {
-    config.value = { ...next, initial: { ...next.initial, data: value } };
-  }
-}
-function updateInitialRequest(value) {
-  const current = config.value.initial;
-  if (!current) return;
-  if (value.trim() === "") {
-    const { request: _omit, ...rest } = current;
-    config.value = { ...config.value, initial: rest };
+function setInitialField(key, value) {
+  const current = config.value.initial ?? {};
+  const { [key]: _omit, ...rest } = current;
+  const next = value.trim() === "" ? rest : { ...rest, [key]: value };
+  if (Object.keys(next).length === 0) {
+    const { initial: _drop, ...cfg } = config.value;
+    config.value = cfg;
   } else {
-    config.value = { ...config.value, initial: { ...current, request: value } };
+    config.value = { ...config.value, initial: next };
   }
 }
 function updateReadonly(value) {
@@ -102,7 +94,7 @@ function updateStyle(value) {
             :extra-vars="{ json: { type: 'optional<dyn>', label: 'HTTP \u54CD\u5E94\u4F53', description: '\u300C\u8BF7\u6C42\u300D\u7684\u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09\uFF1B\u672A\u914D\u7F6E\u8BF7\u6C42\u65F6\u4E3A none' } }"
             multiline
             class="min-h-20"
-            @update:model-value="updateInitialData"
+            @update:model-value="(v) => setInitialField('data', v)"
           />
         </Field>
 
@@ -122,7 +114,7 @@ function updateStyle(value) {
             placeholder="如 http.get('https://api.example.com/record/1')"
             result-type="HttpRequest"
             class="min-h-10"
-            @update:model-value="updateInitialRequest"
+            @update:model-value="(v) => setInitialField('request', v)"
           />
         </Field>