@shwfed/config 2.6.0 → 2.7.0

package/dist/runtime/components/config/blocks/2026-06-01/com.shwfed.block.animated.number/config.vue

@@ -0,0 +1,452 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Icon } from "@iconify/vue";
+import { Button } from "../../../../ui/button";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { InputGroup, InputGroupInput, InputGroupNumberField } from "../../../../ui/input-group";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import { Locale as LocaleField } from "../../../../ui/locale";
+import { Markdown } from "../../../../ui/markdown";
+import { ScrollArea } from "../../../../ui/scroll-area";
+import { Separator } from "../../../../ui/separator";
+import {
+  useTreeDnd
+} from "../../../../../composables/useTreeDnd";
+import {
+  dataSourceSchema,
+  getStructFieldDescription,
+  getStructFieldTitle,
+  itemSchema,
+  schema
+} from "./schema";
+defineOptions({ name: "ShwfedBlockAnimatedNumberConfig" });
+const block = defineModel({ type: null, ...{ required: true } });
+const blockSchema = schema(() => {
+});
+const itemSchemaObj = itemSchema(() => {
+});
+const dsSchema = dataSourceSchema(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(blockSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(blockSchema, f);
+const itemTitle = (f) => getStructFieldTitle(itemSchemaObj, f) ?? f;
+const itemDescription = (f) => getStructFieldDescription(itemSchemaObj, f);
+const dsTitle = (f) => getStructFieldTitle(dsSchema, f) ?? f;
+const dsDescription = (f) => getStructFieldDescription(dsSchema, f);
+const JSON_VAR = {
+  json: { type: "optional<dyn>", label: "HTTP \u54CD\u5E94\u4F53\uFF08\u914D\u7F6E\u4E86\u8BF7\u6C42\u65F6\u53EF\u7528\uFF09" }
+};
+const viewMode = ref("item");
+const selectedId = ref(block.value.items[0]?.id ?? "");
+const selectedItem = computed(
+  () => block.value.items.find((i) => i.id === selectedId.value) ?? null
+);
+function selectGeneral() {
+  viewMode.value = "general";
+}
+function selectItem(id) {
+  viewMode.value = "item";
+  selectedId.value = id;
+}
+function itemLabel(it, i) {
+  const name = it.name?.trim();
+  return name && name.length > 0 ? name : `\u6570\u5B57 ${i + 1}`;
+}
+function setDisplayName(v) {
+  const s = String(v ?? "");
+  block.value = { ...block.value, displayName: s.length > 0 ? s : void 0 };
+}
+function setLocale(v) {
+  block.value = { ...block.value, locale: v };
+}
+function writeItems(next) {
+  block.value = { ...block.value, items: next };
+}
+function addItem() {
+  const it = { id: crypto.randomUUID(), dataSource: { value: "0" } };
+  writeItems([...block.value.items, it]);
+  selectItem(it.id);
+}
+function removeItem(id) {
+  if (block.value.items.length <= 1) return;
+  const i = block.value.items.findIndex((x) => x.id === id);
+  if (i < 0) return;
+  const next = block.value.items.filter((x) => x.id !== id);
+  writeItems(next);
+  if (selectedId.value === id) {
+    selectedId.value = next[Math.max(0, i - 1)]?.id ?? "";
+  }
+}
+function patchItem(id, patch) {
+  writeItems(block.value.items.map((i) => i.id === id ? { ...i, ...patch } : i));
+}
+function setName(id, v) {
+  const s = String(v ?? "");
+  patchItem(id, { name: s.length > 0 ? s : void 0 });
+}
+function patchDataSource(id, patch) {
+  const it = block.value.items.find((x) => x.id === id);
+  if (!it) return;
+  patchItem(id, { dataSource: { ...it.dataSource, ...patch } });
+}
+function setRequest(id, v) {
+  const it = block.value.items.find((x) => x.id === id);
+  if (!it) return;
+  if (v.trim() === "") {
+    patchItem(id, { dataSource: { value: it.dataSource.value } });
+    return;
+  }
+  patchDataSource(id, { request: v });
+}
+function setValue(id, v) {
+  patchDataSource(id, { value: v });
+}
+function setInterval(id, v) {
+  patchItem(id, { pollingInterval: typeof v === "number" && v > 0 ? Math.round(v) : void 0 });
+}
+function setPrefix(id, v) {
+  patchItem(id, { prefix: v.length > 0 ? v : void 0 });
+}
+function setSuffix(id, v) {
+  patchItem(id, { suffix: v.length > 0 ? v : void 0 });
+}
+function setStyle(id, v) {
+  patchItem(id, { style: v.trim().length > 0 ? v : void 0 });
+}
+const ROW_KIND = "animated-number-item-row";
+function rowId(i) {
+  return `item-${i}`;
+}
+function moveItem(from, to) {
+  if (from === to || from < 0 || to < 0) return;
+  if (from >= block.value.items.length || to >= block.value.items.length) return;
+  const next = [...block.value.items];
+  const [moved] = next.splice(from, 1);
+  if (!moved) return;
+  next.splice(to, 0, moved);
+  writeItems(next);
+}
+function onRowDrop(e) {
+  if (e.source.kind !== ROW_KIND || e.target.kind !== ROW_KIND) return;
+  const from = block.value.items.findIndex((_, i) => rowId(i) === e.source.id);
+  const to = block.value.items.findIndex((_, i) => rowId(i) === e.target.id);
+  if (from < 0 || to < 0) return;
+  if (e.instruction === "reorder-above") moveItem(from, from < to ? to - 1 : to);
+  else if (e.instruction === "reorder-below") moveItem(from, from <= to ? to : to + 1);
+}
+const dnd = useTreeDnd({ onRowDrop });
+const pickDragHandle = (el) => el.querySelector(".drag-handle");
+function rowConfig(i) {
+  return {
+    kind: ROW_KIND,
+    canDrop: (src) => src.kind === ROW_KIND,
+    blockInstructions: (src) => {
+      const blocked = ["make-child", "reparent"];
+      if (src.id === rowId(i)) blocked.push("reorder-above", "reorder-below");
+      return blocked;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+</script>
+
+<template>
+  <div class="flex min-w-0 gap-3 min-h-96">
+    <!-- Left rail: general config + reorderable items -->
+    <div class="flex w-52 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">
+        <div class="flex flex-col gap-0.5">
+          <div
+            v-for="(it, i) in block.items"
+            :key="it.id"
+            :ref="dnd.rowRef(rowId(i), rowConfig(i))"
+            class="row group"
+            :class="viewMode === 'item' && selectedId === it.id ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-700 hover:bg-zinc-50'"
+            :data-instruction="dnd.instructionFor(rowId(i)) ?? void 0"
+            @click="selectItem(it.id)"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-regular"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-400"
+            />
+            <span class="flex-1 truncate">{{ itemLabel(it, i) }}</span>
+            <button
+              type="button"
+              class="ml-auto inline-flex size-5 shrink-0 items-center justify-center rounded text-zinc-300 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-50 hover:text-red-500 disabled:opacity-0"
+              :disabled="block.items.length <= 1"
+              aria-label="删除数字项"
+              @click.stop="removeItem(it.id)"
+            >
+              <Icon
+                icon="fluent:delete-20-regular"
+                class="size-3.5"
+              />
+            </button>
+          </div>
+        </div>
+      </ScrollArea>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="mt-1 w-full justify-center"
+        @click="addItem()"
+      >
+        <Icon
+          icon="fluent:add-20-regular"
+          class="size-4"
+        />
+        <span>新增数字</span>
+      </Button>
+    </div>
+
+    <Separator orientation="vertical" />
+
+    <!-- Right pane -->
+    <div class="min-w-0 flex-1">
+      <!-- General -->
+      <div
+        v-if="viewMode === 'general'"
+        class="flex flex-col gap-4"
+      >
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('displayName')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('displayName')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("displayName") }}
+          </FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              :model-value="block.displayName ?? ''"
+              placeholder="例：核心指标"
+              @update:model-value="setDisplayName"
+            />
+          </InputGroup>
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="fieldDescription('locale')"
+              #tooltip
+            >
+              <Markdown
+                :source="fieldDescription('locale')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ fieldTitle("locale") }}
+          </FieldLabel>
+          <LocaleField
+            markdown
+            translate-hint="animated number caption"
+            :model-value="block.locale"
+            @update:model-value="setLocale"
+          />
+        </Field>
+      </div>
+
+      <!-- Item editor -->
+      <div
+        v-else-if="selectedItem"
+        class="flex flex-col gap-4"
+      >
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="itemDescription('name')"
+              #tooltip
+            >
+              <Markdown
+                :source="itemDescription('name')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ itemTitle("name") }}
+          </FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              :model-value="selectedItem.name ?? ''"
+              placeholder="例：在线人数"
+              @update:model-value="(v) => setName(selectedItem.id, v)"
+            />
+          </InputGroup>
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="dsDescription('request')"
+              #tooltip
+            >
+              <Markdown
+                :source="dsDescription('request')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ dsTitle("request") }}
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="selectedItem.dataSource.request ?? ''"
+            placeholder="可选；如 http.get('/api/online')"
+            result-type="HttpRequest"
+            multiline
+            class="min-h-20"
+            @update:model-value="(v) => setRequest(selectedItem.id, v)"
+          />
+        </Field>
+
+        <div class="grid grid-cols-2 gap-3">
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="dsDescription('value')"
+                #tooltip
+              >
+                <Markdown
+                  :source="dsDescription('value')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ dsTitle("value") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="selectedItem.dataSource.value"
+              placeholder="返回数字的表达式，如 json.count"
+              result-type="number"
+              :extra-vars="JSON_VAR"
+              @update:model-value="(v) => setValue(selectedItem.id, v)"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemDescription('pollingInterval')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemDescription('pollingInterval')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemTitle("pollingInterval") }}
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupNumberField
+                :model-value="selectedItem.pollingInterval"
+                :min="1"
+                @update:model-value="(v) => setInterval(selectedItem.id, v)"
+              />
+            </InputGroup>
+          </Field>
+        </div>
+
+        <Separator />
+
+        <div class="grid grid-cols-2 gap-3">
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemDescription('prefix')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemDescription('prefix')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemTitle("prefix") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="selectedItem.prefix ?? ''"
+              placeholder="如 '¥'"
+              result-type="string"
+              :extra-vars="JSON_VAR"
+              @update:model-value="(v) => setPrefix(selectedItem.id, v)"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemDescription('suffix')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemDescription('suffix')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemTitle("suffix") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="selectedItem.suffix ?? ''"
+              placeholder="如 ' 人'"
+              result-type="string"
+              :extra-vars="JSON_VAR"
+              @update:model-value="(v) => setSuffix(selectedItem.id, v)"
+            />
+          </Field>
+        </div>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template
+              v-if="itemDescription('style')"
+              #tooltip
+            >
+              <Markdown
+                :source="itemDescription('style')"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            {{ itemTitle("style") }}
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="selectedItem.style ?? ''"
+            placeholder="返回 CSS 字符串或样式对象的表达式，如 'font-size: 3rem'"
+            :extra-vars="JSON_VAR"
+            multiline
+            class="min-h-16"
+            @update:model-value="(v) => setStyle(selectedItem.id, v)"
+          />
+        </Field>
+      </div>
+    </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}[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:.5rem;pointer-events:none;position:absolute;right:.5rem;z-index:1}[data-instruction=reorder-above]:before{top:-1px}[data-instruction=reorder-below]:after{bottom:-1px}
+</style>

package/dist/runtime/components/config/blocks/2026-06-01/com.shwfed.block.animated.number/config.vue.d.ts

@@ -0,0 +1,59 @@
+import { type Value } from './schema.js';
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly type: "com.shwfed.block.animated.number";
+        readonly id: string;
+        readonly locale?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-01";
+        readonly items: readonly {
+            readonly name?: string | undefined;
+            readonly style?: string | undefined;
+            readonly id: string;
+            readonly prefix?: string | undefined;
+            readonly dataSource: {
+                readonly value: string;
+                readonly request?: string | undefined;
+            };
+            readonly pollingInterval?: number | undefined;
+            readonly suffix?: string | undefined;
+        }[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly type: "com.shwfed.block.animated.number";
+        readonly id: string;
+        readonly locale?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-06-01";
+        readonly items: readonly {
+            readonly name?: string | undefined;
+            readonly style?: string | undefined;
+            readonly id: string;
+            readonly prefix?: string | undefined;
+            readonly dataSource: {
+                readonly value: string;
+                readonly request?: string | undefined;
+            };
+            readonly pollingInterval?: number | undefined;
+            readonly suffix?: string | undefined;
+        }[];
+    }) => 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-01/com.shwfed.block.animated.number/item.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ItemValue } from './schema.js';
+type __VLS_Props = {
+    item: ItemValue;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/config/blocks/2026-06-01/com.shwfed.block.animated.number/item.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { Effect, Option } from "effect";
+import { Fetch } from "fx-fetch";
+import { useIntervalFn, useWindowFocus } from "@vueuse/core";
+import NumberFlow from "@number-flow/vue";
+import { cel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+defineOptions({ name: "ShwfedBlockAnimatedNumberItem" });
+const props = defineProps({
+  item: { type: null, required: true }
+});
+const inheritedContext = injectCELContext();
+const json = ref(void 0);
+const numberValue = ref(0);
+function baseContext() {
+  return celBindings(inheritedContext);
+}
+function toFiniteNumber(v) {
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  if (typeof v === "string" && v.trim() !== "") {
+    const n = Number(v);
+    return Number.isFinite(n) ? n : 0;
+  }
+  return 0;
+}
+const jsonOption = computed(
+  () => json.value === void 0 ? Option.none() : Option.some(json.value)
+);
+function evalString(expression) {
+  if (!expression) return "";
+  try {
+    const r = Effect.runSync(cel(expression, { ...baseContext(), json: jsonOption.value }));
+    return r === null || r === void 0 ? "" : String(r);
+  } catch {
+    return "";
+  }
+}
+const prefixText = computed(() => evalString(props.item.prefix));
+const suffixText = computed(() => evalString(props.item.suffix));
+function evalStyle(expression) {
+  if (!expression) return void 0;
+  try {
+    const r = Effect.runSync(cel(expression, { ...baseContext(), json: jsonOption.value }));
+    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 styleValue = computed(() => evalStyle(props.item.style));
+async function refresh() {
+  const ds = props.item.dataSource;
+  const ctx = baseContext();
+  const program = Effect.gen(function* () {
+    let jsonOpt = Option.none();
+    if (ds.request) {
+      const builder = yield* cel(ds.request, ctx);
+      jsonOpt = Option.some(yield* builder.json());
+    }
+    const value = yield* cel(ds.value, { ...ctx, json: jsonOpt });
+    return { json: Option.getOrUndefined(jsonOpt), value };
+  });
+  try {
+    const result = await Effect.runPromise(Effect.provide(program, Fetch.layer));
+    json.value = result.json;
+    numberValue.value = toFiniteNumber(result.value);
+  } catch (e) {
+    console.warn("[shwfed-animated-number] fetch failed", e);
+  }
+}
+const pollingEnabled = computed(() => (props.item.pollingInterval ?? 0) > 0);
+const intervalMs = computed(() => Math.max(1, props.item.pollingInterval ?? 1) * 1e3);
+const focused = useWindowFocus();
+const { pause, resume } = useIntervalFn(() => void refresh(), intervalMs, { immediate: false });
+onMounted(() => {
+  void refresh();
+  if (pollingEnabled.value && focused.value) resume();
+});
+watch(focused, (isFocused) => {
+  if (!pollingEnabled.value) return;
+  if (isFocused) {
+    void refresh();
+    resume();
+  } else {
+    pause();
+  }
+});
+watch(
+  () => [
+    props.item.dataSource.request ?? "",
+    props.item.dataSource.value,
+    props.item.pollingInterval ?? 0
+  ].join("|"),
+  () => {
+    void refresh();
+    if (pollingEnabled.value && focused.value) resume();
+    else pause();
+  }
+);
+</script>
+
+<template>
+  <NumberFlow
+    :value="numberValue"
+    :prefix="prefixText"
+    :suffix="suffixText"
+    :style="styleValue"
+  />
+</template>

package/dist/runtime/components/config/blocks/2026-06-01/com.shwfed.block.animated.number/item.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ItemValue } from './schema.js';
+type __VLS_Props = {
+    item: ItemValue;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;