@shwfed/config 2.10.4 → 2.10.5

package/dist/runtime/components/config/blocks/2026-06-17/com.shwfed.block.tree.single/config.vue

@@ -0,0 +1,496 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
+import { Icon } from "@iconify/vue";
+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 { Switch } from "../../../../ui/switch";
+import { DataSource } from "../../../../table/schema";
+import ActionsConfigEditor from "../../../../actions/config.vue";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../../actions/schema";
+import { registerNodeVariableIfAbsent } from "../../../../../share/tree-node-var";
+import { provideEventAncestor } from "../../../../../share/event-bus";
+import { BREADCRUMB_EXTENSION_KEY } from "../../../breadcrumb-extension";
+import { metadata, schema } from "./schema";
+defineOptions({ name: "ShwfedBlockTreeSingleConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const blockSchema = schema(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(blockSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(blockSchema, f);
+const dataSourceSchema = DataSource(() => {
+});
+const dataSourceFieldTitle = (f) => getStructFieldTitle(dataSourceSchema, f) ?? f;
+const dataSourceFieldDescription = (f) => getStructFieldDescription(dataSourceSchema, f);
+const filterSchema = blockSchema.fields.filter.from;
+const filterFieldTitle = (f) => getStructFieldTitle(filterSchema, f) ?? f;
+const filterFieldDescription = (f) => getStructFieldDescription(filterSchema, f);
+const nodeExtraVars = {
+  node: {
+    type: "dyn",
+    label: "\u5F53\u524D\u8282\u70B9",
+    description: "\u7531 `\u6570\u636E` \u8868\u8FBE\u5F0F\u8FD4\u56DE\u7684\u6BCF\u4E00\u9879\uFF1B\u7C7B\u578B\u5728\u914D\u7F6E\u65F6\u672A\u77E5\uFF08`dyn`\uFF09"
+  }
+};
+const jsonExtraVars = {
+  json: {
+    type: "optional<dyn>",
+    label: "HTTP \u54CD\u5E94\u4F53",
+    description: "\u5DF2\u89E3\u6790\u7684 JSON \u54CD\u5E94\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`"
+  }
+};
+const nodeActionsConfigure = (env) => {
+  registerNodeVariableIfAbsent(env, { label: "\u5F53\u524D\u8282\u70B9", description: "\u5F53\u524D\u6811\u8282\u70B9\u7684\u5B8C\u6574\u6570\u636E" });
+};
+function setDataSourceData(next) {
+  value.value = {
+    ...value.value,
+    dataSource: { ...value.value.dataSource, data: next }
+  };
+}
+function setDataSourceRequest(next) {
+  const trimmed = next.trim();
+  if (trimmed.length === 0) {
+    const { request: _omit, ...rest } = value.value.dataSource;
+    value.value = { ...value.value, dataSource: rest };
+  } else {
+    value.value = {
+      ...value.value,
+      dataSource: { ...value.value.dataSource, request: next }
+    };
+  }
+}
+function setOptionalExpression(key, next) {
+  if (next.length === 0) {
+    const { [key]: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, [key]: next };
+  }
+}
+const filter = computed(() => value.value.filter);
+function setFilterEnabled(next) {
+  if (next) {
+    value.value = {
+      ...value.value,
+      filter: { ...value.value.filter ?? {}, enabled: true }
+    };
+  } else {
+    const { filter: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
+function setFilterLabel(label) {
+  const cur = value.value.filter;
+  if (!cur) return;
+  const isEmpty = !label || label.every((l) => l.message.trim().length === 0);
+  if (isEmpty) {
+    const { label: _omit, ...rest } = cur;
+    value.value = { ...value.value, filter: rest };
+  } else {
+    value.value = { ...value.value, filter: { ...cur, label } };
+  }
+}
+function setFilterKeywords(next) {
+  const cur = value.value.filter;
+  if (!cur) return;
+  if (next.length === 0) {
+    const { keywords: _omit, ...rest } = cur;
+    value.value = { ...value.value, filter: rest };
+  } else {
+    value.value = { ...value.value, filter: { ...cur, keywords: next } };
+  }
+}
+const nodeActions = computed({
+  get: () => value.value.nodeActions,
+  set: (next) => {
+    value.value = { ...value.value, nodeActions: next };
+  }
+});
+const treeEventAncestor = computed(() => ({
+  instanceId: value.value.id,
+  typeName: metadata.name,
+  typeIcon: metadata.icon,
+  operations: metadata.operations
+}));
+provideEventAncestor(treeEventAncestor);
+const selected = ref("general");
+const isDrilled = computed(() => selected.value === "actions");
+function selectGeneral() {
+  selected.value = "general";
+}
+function selectActions() {
+  selected.value = "actions";
+}
+const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
+if (breadcrumbExt) {
+  const crumb = breadcrumbExt.add();
+  watch(
+    selected,
+    (s) => {
+      if (s === "actions") {
+        crumb.label.value = "\u8282\u70B9\u64CD\u4F5C";
+        crumb.back.value = selectGeneral;
+      } else {
+        crumb.label.value = null;
+        crumb.back.value = null;
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => crumb.dispose());
+}
+</script>
+
+<template>
+  <div class="flex min-h-128 gap-6">
+    <div
+      v-if="!isDrilled"
+      class="flex w-48 shrink-0 flex-col"
+    >
+      <div class="flex flex-col gap-1">
+        <div
+          class="row pl-2"
+          :class="[
+  selected === 'general' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
+]"
+          @click.stop="selectGeneral()"
+        >
+          <Icon
+            icon="fluent:settings-20-regular"
+            class="size-4 shrink-0"
+          />
+          <span class="flex-1 truncate">通用配置</span>
+        </div>
+
+        <div
+          class="row pl-2"
+          :class="[
+  selected === 'actions' ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
+]"
+          @click.stop="selectActions()"
+        >
+          <Icon
+            icon="fluent:cursor-click-20-regular"
+            class="size-4 shrink-0"
+          />
+          <span class="flex-1 truncate">节点操作</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-1 flex-col">
+      <ScrollArea class="flex-1">
+        <div
+          v-if="selected === 'general'"
+          class="flex flex-col gap-3"
+        >
+          <!-- 数据源: request (optional) + data -->
+          <h3 class="text-xs font-medium text-zinc-500">
+            {{ fieldTitle("dataSource") }}
+          </h3>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="dataSourceFieldDescription('request')"
+                #tooltip
+              >
+                <Markdown
+                  :source="dataSourceFieldDescription('request')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ dataSourceFieldTitle("request") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="value.dataSource.request ?? ''"
+              placeholder="如 http.get('/api/departments/tree')"
+              result-type="HttpRequest"
+              multiline
+              class="min-h-20"
+              @update:model-value="setDataSourceRequest"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="dataSourceFieldDescription('data')"
+                #tooltip
+              >
+                <Markdown
+                  :source="dataSourceFieldDescription('data')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ dataSourceFieldTitle("data") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="value.dataSource.data"
+              placeholder="如 json.?value.roots.orValue([])"
+              result-type="list"
+              :extra-vars="jsonExtraVars"
+              @update:model-value="setDataSourceData"
+            />
+          </Field>
+
+          <!-- 节点表达式 -->
+          <h3 class="text-xs font-medium text-zinc-500">
+            节点
+          </h3>
+
+          <div class="grid grid-cols-2 gap-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('nodeKey')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('nodeKey')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("nodeKey") }}
+              </FieldLabel>
+              <ExpressionEditor
+                :model-value="value.nodeKey"
+                placeholder="例：string(node.id)"
+                :result-type="['string', 'number', 'dyn']"
+                :extra-vars="nodeExtraVars"
+                class="min-h-10"
+                @update:model-value="(v) => value = { ...value, nodeKey: v }"
+              />
+            </Field>
+
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('nodeChildren')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('nodeChildren')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("nodeChildren") }}
+              </FieldLabel>
+              <ExpressionEditor
+                :model-value="value.nodeChildren"
+                placeholder="例：has(node.children) ? node.children : null"
+                result-type="list"
+                :extra-vars="nodeExtraVars"
+                class="min-h-10"
+                @update:model-value="(v) => value = { ...value, nodeChildren: v }"
+              />
+            </Field>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('nodeLabel')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('nodeLabel')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("nodeLabel") }}
+              </FieldLabel>
+              <LocaleField
+                markdown
+                translate-hint="tree node label"
+                :model-value="value.nodeLabel"
+                @update:model-value="(v) => value = { ...value, nodeLabel: v }"
+              />
+            </Field>
+
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('nodeTooltip')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('nodeTooltip')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("nodeTooltip") }}
+              </FieldLabel>
+              <LocaleField
+                markdown
+                translate-hint="tree node tooltip"
+                :model-value="value.nodeTooltip"
+                @update:model-value="(v) => value = { ...value, nodeTooltip: v }"
+              />
+            </Field>
+          </div>
+
+          <!-- 行为: 节点可选条件 + 默认全部展开 -->
+          <div class="grid grid-cols-2 gap-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('nodeSelectable')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('nodeSelectable')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("nodeSelectable") }}
+              </FieldLabel>
+              <ExpressionEditor
+                :model-value="value.nodeSelectable ?? ''"
+                placeholder="例：node.kind == 'leaf'"
+                result-type="bool"
+                :extra-vars="nodeExtraVars"
+                class="min-h-10"
+                @update:model-value="(v) => setOptionalExpression('nodeSelectable', v)"
+              />
+            </Field>
+
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="fieldDescription('expandAll')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="fieldDescription('expandAll')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ fieldTitle("expandAll") }}
+              </FieldLabel>
+              <div>
+                <Switch
+                  :model-value="value.expandAll ?? false"
+                  @update:model-value="(v) => value = { ...value, expandAll: v }"
+                />
+              </div>
+            </Field>
+          </div>
+
+          <!-- 外观: 块级样式表达式 -->
+          <h3 class="text-xs font-medium text-zinc-500">
+            外观
+          </h3>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="fieldDescription('style')"
+                #tooltip
+              >
+                <Markdown
+                  :source="fieldDescription('style')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ fieldTitle("style") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="value.style ?? ''"
+              placeholder="返回 CSS 字符串或样式对象的表达式，如 'max-height: 24rem'"
+              multiline
+              class="min-h-16"
+              @update:model-value="(v) => setOptionalExpression('style', v)"
+            />
+          </Field>
+
+          <!-- 过滤 (collapsible optional) -->
+          <div class="flex items-center gap-2">
+            <h3 class="text-xs font-medium text-zinc-500">
+              {{ fieldTitle("filter") }}
+            </h3>
+            <Switch
+              size="sm"
+              :model-value="filter?.enabled ?? false"
+              :aria-label="filterFieldTitle('enabled')"
+              @update:model-value="setFilterEnabled"
+            />
+          </div>
+
+          <div
+            v-if="filter?.enabled"
+            class="grid grid-cols-2 gap-3"
+          >
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="filterFieldDescription('label')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="filterFieldDescription('label')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ filterFieldTitle("label") }}
+              </FieldLabel>
+              <LocaleField
+                translate-hint="tree filter input label"
+                :model-value="filter.label"
+                @update:model-value="setFilterLabel"
+              />
+            </Field>
+
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="filterFieldDescription('keywords')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="filterFieldDescription('keywords')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ filterFieldTitle("keywords") }}
+              </FieldLabel>
+              <ExpressionEditor
+                :model-value="filter.keywords ?? ''"
+                placeholder="例：[node.code, node.alias]"
+                result-type="list"
+                :extra-vars="nodeExtraVars"
+                class="min-h-10"
+                @update:model-value="setFilterKeywords"
+              />
+            </Field>
+          </div>
+        </div>
+
+        <ActionsConfigEditor
+          v-else
+          v-model="nodeActions"
+          :configure="nodeActionsConfigure"
+        />
+      </ScrollArea>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.row{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.375rem;padding-block:.375rem;padding-right:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>