@shwfed/config 3.0.12 → 3.0.13

package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.digital/config.vue

@@ -1,10 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
-import { Icon } from "@iconify/vue";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { InputGroup, InputGroupInput } from "../../../../ui/input-group";
+import {
+  InvoiceConfigShell,
+  InvoiceExprField,
+  InvoiceJsonScope,
+  InvoiceRowScope
+} from "../../../../ui/invoice-config";
 import { Markdown } from "../../../../ui/markdown";
-import { ScrollArea } from "../../../../ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -12,9 +16,6 @@ import {
   SelectTrigger,
   SelectValue
 } from "../../../../ui/select";
-import ExprField from "./expr-field.vue";
-import JsonScopeProvider from "./json-scope-provider.vue";
-import RowScopeProvider from "./row-scope-provider.vue";
 import {
   getStructFieldDescription,
   getStructFieldTitle,
@@ -88,311 +89,288 @@ const kindValue = computed(() => block.value.kind ?? "special");
 </script>
 
 <template>
-  <div class="flex min-w-0 gap-2 min-h-128">
-    <!-- 左栏：票面分区 -->
-    <div class="flex w-44 shrink-0 flex-col">
-      <ScrollArea class="flex-1">
-        <div
-          v-for="s in SECTIONS"
-          :key="s.key"
-          class="row"
-          :class="section === s.key ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-700 hover:bg-zinc-50'"
-          @click="section = s.key"
-        >
-          <Icon
-            :icon="s.icon"
-            class="size-4 shrink-0"
+  <InvoiceConfigShell
+    v-model:section="section"
+    :sections="SECTIONS"
+  >
+    <template v-if="section === 'general'">
+      <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"
           />
-          <span class="flex-1 truncate">{{ s.label }}</span>
+        </InputGroup>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('kind')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('kind')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("kind") }}
+        </FieldLabel>
+        <Select
+          :model-value="kindValue"
+          @update:model-value="setKind"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="k in INVOICE_KINDS"
+              :key="k"
+              :value="k"
+            >
+              {{ INVOICE_KIND_LABELS[k] }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+
+      <!-- 「请求」在 InvoiceJsonScope 之外 —— 它是产出 `json` 的表达式，自己看不到
+           `json`（schema 侧的 `bodyConfigure` 同样不给它注册）。 -->
+      <InvoiceExprField
+        :label="fieldTitle('request')"
+        :description="fieldDescription('request')"
+        :model-value="block.request ?? ''"
+        placeholder="可选；如 http.get('/api/invoice/' + item.id)"
+        multiline
+        @update:model-value="(v) => setOptional('request', v)"
+      />
+    </template>
+
+    <!-- 除「通用配置」外的每个分区都在 `json` 作用域内 —— `请求` 的响应体票面各栏
+         都能读。Provider 本身不渲染元素，所以外层 flex 布局不受影响。 -->
+    <InvoiceJsonScope v-else>
+      <template v-if="section === 'head'">
+        <InvoiceExprField
+          :label="fieldTitle('invoiceNumber')"
+          :description="fieldDescription('invoiceNumber')"
+          :model-value="block.invoiceNumber"
+          placeholder="如 json.fphm"
+          @update:model-value="(v) => setRequired('invoiceNumber', v)"
+        />
+        <InvoiceExprField
+          :label="fieldTitle('issueDate')"
+          :description="fieldDescription('issueDate')"
+          :model-value="block.issueDate"
+          placeholder="如 json.kprq"
+          @update:model-value="(v) => setRequired('issueDate', v)"
+        />
+      </template>
+
+      <template v-else-if="section === 'parties'">
+        <div class="text-xs font-medium text-zinc-500">
+          购买方信息
         </div>
-      </ScrollArea>
-    </div>
+        <InvoiceExprField
+          :label="buyerTitle('name')"
+          :description="buyerDescription('name')"
+          :model-value="block.buyer.name"
+          placeholder="如 json.gf.mc"
+          @update:model-value="(v) => setParty('buyer', 'name', v)"
+        />
+        <InvoiceExprField
+          :label="buyerTitle('taxId')"
+          :description="buyerDescription('taxId')"
+          :model-value="block.buyer.taxId"
+          placeholder="如 json.gf.nsrsbh"
+          @update:model-value="(v) => setParty('buyer', 'taxId', v)"
+        />
+
+        <div class="mt-2 text-xs font-medium text-zinc-500">
+          销售方信息
+        </div>
+        <InvoiceExprField
+          :label="sellerTitle('name')"
+          :description="sellerDescription('name')"
+          :model-value="block.seller.name"
+          placeholder="如 json.xf.mc"
+          @update:model-value="(v) => setParty('seller', 'name', v)"
+        />
+        <InvoiceExprField
+          :label="sellerTitle('taxId')"
+          :description="sellerDescription('taxId')"
+          :model-value="block.seller.taxId"
+          placeholder="如 json.xf.nsrsbh"
+          @update:model-value="(v) => setParty('seller', 'taxId', v)"
+        />
+      </template>
 
-    <!-- 右栏 -->
-    <div class="flex min-w-0 flex-1 flex-col gap-3">
-      <template v-if="section === 'general'">
+      <template v-else-if="section === 'items'">
         <Field orientation="vertical">
           <FieldLabel class="text-xs text-zinc-500">
             <template
-              v-if="fieldDescription('displayName')"
+              v-if="fieldDescription('itemsMaxHeight')"
               #tooltip
             >
               <Markdown
-                :source="fieldDescription('displayName')"
+                :source="fieldDescription('itemsMaxHeight')"
                 block
                 class="prose prose-sm prose-zinc"
               />
             </template>
-            {{ fieldTitle("displayName") }}
+            {{ fieldTitle("itemsMaxHeight") }}
           </FieldLabel>
           <InputGroup>
             <InputGroupInput
-              :model-value="block.displayName ?? ''"
-              placeholder="例：进项发票预览"
-              @update:model-value="setDisplayName"
+              :model-value="block.itemsMaxHeight ?? ''"
+              placeholder="可选；如 24rem。留空则明细区随行数增长"
+              @update:model-value="setItemsMaxHeight"
             />
           </InputGroup>
         </Field>
 
-        <Field orientation="vertical">
-          <FieldLabel class="text-xs text-zinc-500">
-            <template
-              v-if="fieldDescription('kind')"
-              #tooltip
-            >
-              <Markdown
-                :source="fieldDescription('kind')"
-                block
-                class="prose prose-sm prose-zinc"
-              />
-            </template>
-            {{ fieldTitle("kind") }}
-          </FieldLabel>
-          <Select
-            :model-value="kindValue"
-            @update:model-value="setKind"
-          >
-            <SelectTrigger class="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem
-                v-for="k in INVOICE_KINDS"
-                :key="k"
-                :value="k"
-              >
-                {{ INVOICE_KIND_LABELS[k] }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </Field>
-
-        <!-- 「请求」在 JsonScopeProvider 之外 —— 它是产出 `json` 的表达式，自己看不到
-             `json`（schema 侧的 `bodyConfigure` 同样不给它注册）。 -->
-        <ExprField
-          :label="fieldTitle('request')"
-          :description="fieldDescription('request')"
-          :model-value="block.request ?? ''"
-          placeholder="可选；如 http.get('/api/invoice/' + item.id)"
+        <!-- `明细列表` 在页面作用域求值（没有「当前行」），故在 InvoiceRowScope 之外 -->
+        <InvoiceExprField
+          :label="fieldTitle('items')"
+          :description="fieldDescription('items')"
+          :model-value="block.items"
+          placeholder="返回明细列表的表达式，如 json.mxList"
           multiline
-          @update:model-value="(v) => setOptional('request', v)"
+          @update:model-value="(v) => setRequired('items', v)"
         />
-      </template>
-
-      <!-- 除「通用配置」外的每个分区都在 `json` 作用域内 —— `请求` 的响应体票面各栏
-           都能读。Provider 本身不渲染元素，所以外层 flex 布局不受影响。 -->
-      <JsonScopeProvider v-else>
-        <template v-if="section === 'head'">
-          <ExprField
-            :label="fieldTitle('invoiceNumber')"
-            :description="fieldDescription('invoiceNumber')"
-            :model-value="block.invoiceNumber"
-            placeholder="如 json.fphm"
-            @update:model-value="(v) => setRequired('invoiceNumber', v)"
-          />
-          <ExprField
-            :label="fieldTitle('issueDate')"
-            :description="fieldDescription('issueDate')"
-            :model-value="block.issueDate"
-            placeholder="如 json.kprq"
-            @update:model-value="(v) => setRequired('issueDate', v)"
-          />
-        </template>
-
-        <template v-else-if="section === 'parties'">
-          <div class="text-xs font-medium text-zinc-500">
-            购买方信息
-          </div>
-          <ExprField
-            :label="buyerTitle('name')"
-            :description="buyerDescription('name')"
-            :model-value="block.buyer.name"
-            placeholder="如 json.gf.mc"
-            @update:model-value="(v) => setParty('buyer', 'name', v)"
-          />
-          <ExprField
-            :label="buyerTitle('taxId')"
-            :description="buyerDescription('taxId')"
-            :model-value="block.buyer.taxId"
-            placeholder="如 json.gf.nsrsbh"
-            @update:model-value="(v) => setParty('buyer', 'taxId', v)"
-          />
-
-          <div class="mt-2 text-xs font-medium text-zinc-500">
-            销售方信息
-          </div>
-          <ExprField
-            :label="sellerTitle('name')"
-            :description="sellerDescription('name')"
-            :model-value="block.seller.name"
-            placeholder="如 json.xf.mc"
-            @update:model-value="(v) => setParty('seller', 'name', v)"
-          />
-          <ExprField
-            :label="sellerTitle('taxId')"
-            :description="sellerDescription('taxId')"
-            :model-value="block.seller.taxId"
-            placeholder="如 json.xf.nsrsbh"
-            @update:model-value="(v) => setParty('seller', 'taxId', v)"
-          />
-        </template>
 
-        <template v-else-if="section === 'items'">
-          <Field orientation="vertical">
-            <FieldLabel class="text-xs text-zinc-500">
-              <template
-                v-if="fieldDescription('itemsMaxHeight')"
-                #tooltip
-              >
-                <Markdown
-                  :source="fieldDescription('itemsMaxHeight')"
-                  block
-                  class="prose prose-sm prose-zinc"
-                />
-              </template>
-              {{ fieldTitle("itemsMaxHeight") }}
-            </FieldLabel>
-            <InputGroup>
-              <InputGroupInput
-                :model-value="block.itemsMaxHeight ?? ''"
-                placeholder="可选；如 24rem。留空则明细区随行数增长"
-                @update:model-value="setItemsMaxHeight"
-              />
-            </InputGroup>
-          </Field>
-
-          <!-- `明细列表` 在页面作用域求值（没有「当前行」），故在 RowScopeProvider 之外 -->
-          <ExprField
-            :label="fieldTitle('items')"
-            :description="fieldDescription('items')"
-            :model-value="block.items"
-            placeholder="返回明细列表的表达式，如 json.mxList"
-            multiline
-            @update:model-value="(v) => setRequired('items', v)"
-          />
-
-          <!-- 行内栏位可见 item / index；广告作用域与 schema 的 lineSchema 一致 -->
-          <RowScopeProvider>
-            <div class="flex flex-col gap-3">
-              <div class="text-xs font-medium text-zinc-500">
-                明细行
-              </div>
-              <ExprField
-                :label="lineTitle('name')"
-                :description="lineDescription('name')"
-                :model-value="block.line.name"
-                placeholder="如 item.xmmc"
-                @update:model-value="(v) => setLineRequired('name', v)"
-              />
-              <ExprField
-                :label="lineTitle('spec')"
-                :description="lineDescription('spec')"
-                :model-value="block.line.spec ?? ''"
-                placeholder="可选；如 item.ggxh"
-                @update:model-value="(v) => setLineOptional('spec', v)"
-              />
-              <ExprField
-                :label="lineTitle('unit')"
-                :description="lineDescription('unit')"
-                :model-value="block.line.unit ?? ''"
-                placeholder="可选；如 item.dw"
-                @update:model-value="(v) => setLineOptional('unit', v)"
-              />
-              <ExprField
-                :label="lineTitle('quantity')"
-                :description="lineDescription('quantity')"
-                :model-value="block.line.quantity ?? ''"
-                placeholder="可选；如 item.sl"
-                @update:model-value="(v) => setLineOptional('quantity', v)"
-              />
-              <ExprField
-                :label="lineTitle('unitPrice')"
-                :description="lineDescription('unitPrice')"
-                :model-value="block.line.unitPrice ?? ''"
-                placeholder="可选；如 item.dj"
-                @update:model-value="(v) => setLineOptional('unitPrice', v)"
-              />
-              <ExprField
-                :label="lineTitle('amount')"
-                :description="lineDescription('amount')"
-                :model-value="block.line.amount"
-                placeholder="如 item.je"
-                @update:model-value="(v) => setLineRequired('amount', v)"
-              />
-              <ExprField
-                :label="lineTitle('taxRate')"
-                :description="lineDescription('taxRate')"
-                :model-value="block.line.taxRate ?? ''"
-                placeholder="可选；如 item.slv（原样打印，可为「免税」）"
-                @update:model-value="(v) => setLineOptional('taxRate', v)"
-              />
-              <ExprField
-                :label="lineTitle('taxAmount')"
-                :description="lineDescription('taxAmount')"
-                :model-value="block.line.taxAmount ?? ''"
-                placeholder="可选；如 item.se"
-                @update:model-value="(v) => setLineOptional('taxAmount', v)"
-              />
+        <!-- 行内栏位可见 item / index；广告作用域与 schema 的 lineSchema 一致 -->
+        <InvoiceRowScope>
+          <div class="flex flex-col gap-3">
+            <div class="text-xs font-medium text-zinc-500">
+              明细行
             </div>
-          </RowScopeProvider>
-        </template>
+            <InvoiceExprField
+              :label="lineTitle('name')"
+              :description="lineDescription('name')"
+              :model-value="block.line.name"
+              placeholder="如 item.xmmc"
+              @update:model-value="(v) => setLineRequired('name', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('spec')"
+              :description="lineDescription('spec')"
+              :model-value="block.line.spec ?? ''"
+              placeholder="可选；如 item.ggxh"
+              @update:model-value="(v) => setLineOptional('spec', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('unit')"
+              :description="lineDescription('unit')"
+              :model-value="block.line.unit ?? ''"
+              placeholder="可选；如 item.dw"
+              @update:model-value="(v) => setLineOptional('unit', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('quantity')"
+              :description="lineDescription('quantity')"
+              :model-value="block.line.quantity ?? ''"
+              placeholder="可选；如 item.sl"
+              @update:model-value="(v) => setLineOptional('quantity', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('unitPrice')"
+              :description="lineDescription('unitPrice')"
+              :model-value="block.line.unitPrice ?? ''"
+              placeholder="可选；如 item.dj"
+              @update:model-value="(v) => setLineOptional('unitPrice', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('amount')"
+              :description="lineDescription('amount')"
+              :model-value="block.line.amount"
+              placeholder="如 item.je"
+              @update:model-value="(v) => setLineRequired('amount', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('taxRate')"
+              :description="lineDescription('taxRate')"
+              :model-value="block.line.taxRate ?? ''"
+              placeholder="可选；如 item.slv（原样打印，可为「免税」）"
+              @update:model-value="(v) => setLineOptional('taxRate', v)"
+            />
+            <InvoiceExprField
+              :label="lineTitle('taxAmount')"
+              :description="lineDescription('taxAmount')"
+              :model-value="block.line.taxAmount ?? ''"
+              placeholder="可选；如 item.se"
+              @update:model-value="(v) => setLineOptional('taxAmount', v)"
+            />
+          </div>
+        </InvoiceRowScope>
+      </template>
 
-        <template v-else-if="section === 'totals'">
-          <ExprField
-            :label="fieldTitle('totalAmount')"
-            :description="fieldDescription('totalAmount')"
-            :model-value="block.totalAmount"
-            placeholder="如 json.hjje"
-            @update:model-value="(v) => setRequired('totalAmount', v)"
-          />
-          <ExprField
-            :label="fieldTitle('totalTax')"
-            :description="fieldDescription('totalTax')"
-            :model-value="block.totalTax"
-            placeholder="如 json.hjse"
-            @update:model-value="(v) => setRequired('totalTax', v)"
-          />
-          <ExprField
-            :label="fieldTitle('grandTotal')"
-            :description="fieldDescription('grandTotal')"
-            :model-value="block.grandTotal"
-            placeholder="如 json.jshj"
-            @update:model-value="(v) => setRequired('grandTotal', v)"
-          />
-          <p class="text-xs text-zinc-400">
-            大写栏由「价税合计」本地推导，无需配置。
-          </p>
-        </template>
+      <template v-else-if="section === 'totals'">
+        <InvoiceExprField
+          :label="fieldTitle('totalAmount')"
+          :description="fieldDescription('totalAmount')"
+          :model-value="block.totalAmount"
+          placeholder="如 json.hjje"
+          @update:model-value="(v) => setRequired('totalAmount', v)"
+        />
+        <InvoiceExprField
+          :label="fieldTitle('totalTax')"
+          :description="fieldDescription('totalTax')"
+          :model-value="block.totalTax"
+          placeholder="如 json.hjse"
+          @update:model-value="(v) => setRequired('totalTax', v)"
+        />
+        <InvoiceExprField
+          :label="fieldTitle('grandTotal')"
+          :description="fieldDescription('grandTotal')"
+          :model-value="block.grandTotal"
+          placeholder="如 json.jshj"
+          @update:model-value="(v) => setRequired('grandTotal', v)"
+        />
+        <p class="text-xs text-zinc-400">
+          大写栏由「价税合计」本地推导，无需配置。
+        </p>
+      </template>
 
-        <template v-else-if="section === 'remark'">
-          <ExprField
-            :label="fieldTitle('remark')"
-            :description="fieldDescription('remark')"
-            :model-value="block.remark ?? ''"
-            placeholder="可选；如 json.bz。开户行、账号、红字确认单编号均属此栏"
-            multiline
-            @update:model-value="(v) => setOptional('remark', v)"
-          />
-          <ExprField
-            :label="fieldTitle('issuer')"
-            :description="fieldDescription('issuer')"
-            :model-value="block.issuer ?? ''"
-            placeholder="可选；如 json.kpr"
-            @update:model-value="(v) => setOptional('issuer', v)"
-          />
-          <ExprField
-            :label="fieldTitle('redLetter')"
-            :description="fieldDescription('redLetter')"
-            :model-value="block.redLetter ?? ''"
-            placeholder="可选；返回 bool，如 json.jshj < 0.0"
-            @update:model-value="(v) => setOptional('redLetter', v)"
-          />
-        </template>
-      </JsonScopeProvider>
-    </div>
-  </div>
+      <template v-else-if="section === 'remark'">
+        <InvoiceExprField
+          :label="fieldTitle('remark')"
+          :description="fieldDescription('remark')"
+          :model-value="block.remark ?? ''"
+          placeholder="可选；如 json.bz。开户行、账号、红字确认单编号均属此栏"
+          multiline
+          @update:model-value="(v) => setOptional('remark', v)"
+        />
+        <InvoiceExprField
+          :label="fieldTitle('issuer')"
+          :description="fieldDescription('issuer')"
+          :model-value="block.issuer ?? ''"
+          placeholder="可选；如 json.kpr"
+          @update:model-value="(v) => setOptional('issuer', v)"
+        />
+        <InvoiceExprField
+          :label="fieldTitle('redLetter')"
+          :description="fieldDescription('redLetter')"
+          :model-value="block.redLetter ?? ''"
+          placeholder="可选；返回 bool，如 json.jshj < 0.0"
+          @update:model-value="(v) => setOptional('redLetter', v)"
+        />
+      </template>
+    </InvoiceJsonScope>
+  </InvoiceConfigShell>
 </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/blocks/2026-07-17/com.shwfed.block.invoice.digital/config.vue.d.ts

@@ -26,7 +26,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         readonly compatibilityDate: "2026-07-17";
         readonly items: string;
         readonly request?: string | undefined;
-        readonly itemsMaxHeight?: string | undefined;
         readonly invoiceNumber: string;
         readonly issueDate: string;
         readonly buyer: {
@@ -37,12 +36,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             readonly name: string;
             readonly taxId: string;
         };
-        readonly totalAmount: string;
-        readonly totalTax: string;
         readonly grandTotal: string;
-        readonly remark?: string | undefined;
         readonly issuer?: string | undefined;
         readonly redLetter?: string | undefined;
+        readonly itemsMaxHeight?: string | undefined;
+        readonly remark?: string | undefined;
+        readonly totalAmount: string;
+        readonly totalTax: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -63,7 +63,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         readonly compatibilityDate: "2026-07-17";
         readonly items: string;
         readonly request?: string | undefined;
-        readonly itemsMaxHeight?: string | undefined;
         readonly invoiceNumber: string;
         readonly issueDate: string;
         readonly buyer: {
@@ -74,12 +73,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             readonly name: string;
             readonly taxId: string;
         };
-        readonly totalAmount: string;
-        readonly totalTax: string;
         readonly grandTotal: string;
-        readonly remark?: string | undefined;
         readonly issuer?: string | undefined;
         readonly redLetter?: string | undefined;
+        readonly itemsMaxHeight?: string | undefined;
+        readonly remark?: string | undefined;
+        readonly totalAmount: string;
+        readonly totalTax: string;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;