@shwfed/config 2.12.5 → 2.12.7

package/dist/runtime/components/sidebar/node.d.vue.ts

@@ -1,4 +1,4 @@
-import type { NavNode } from './types.js';
+import { type NavNode } from './types.js';
 import type { SidebarFavorites } from './favorites.js';
 type __VLS_Props = {
     node: NavNode;

package/dist/runtime/components/sidebar/node.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed, inject } from "vue";
 import { Icon } from "@iconify/vue";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible";
 import {
@@ -7,35 +8,52 @@ import {
   SidebarMenuItem,
   SidebarMenuSub
 } from "../ui/sidebar";
+import { SIDEBAR_ACTIVE_KEYS } from "./types";
 defineOptions({ name: "ShwfedSidebarNode" });
 const props = defineProps({
   node: { type: Object, required: true },
   favorites: { type: null, required: true }
 });
+const activeKeys = inject(SIDEBAR_ACTIVE_KEYS, void 0);
+const isActive = computed(() => {
+  const keys = activeKeys?.value;
+  if (!keys) return false;
+  if (keys.has(props.node.key)) return true;
+  const stack = [...props.node.children];
+  while (stack.length) {
+    const n = stack.pop();
+    if (keys.has(n.key)) return true;
+    for (const c of n.children) stack.push(c);
+  }
+  return false;
+});
+const isLeaf = computed(() => props.node.children.length === 0 && !!props.node.route);
 function onOpenUpdate(open) {
   props.favorites.setOpen(props.node.key, open);
 }
 </script>
 
 <template>
-  <SidebarMenuItem>
+  <SidebarMenuItem :class="isLeaf ? 'group/nav-leaf' : void 0">
     <!-- Group: collapsible, recurses into a sub-menu -->
     <Collapsible
       v-if="node.children.length"
-      class="group/collapsible"
-      :open="favorites.isOpen(node.key, true)"
+      :open="favorites.isOpen(node.key, false)"
       @update:open="onOpenUpdate"
     >
       <CollapsibleTrigger as-child>
-        <SidebarMenuButton>
+        <SidebarMenuButton
+          :is-active="isActive"
+          :data-nav-key="node.key"
+        >
           <Icon
             v-if="node.icon"
             :icon="node.icon"
           />
-          <span>{{ node.label }}</span>
+          <span class="truncate">{{ node.label }}</span>
           <Icon
-            icon="fluent:chevron-right-20-regular"
-            class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
+            icon="fluent:chevron-down-20-regular"
+            class="ml-auto shrink-0 text-zinc-400"
           />
         </SidebarMenuButton>
       </CollapsibleTrigger>
@@ -57,28 +75,30 @@ function onOpenUpdate(open) {
         :to="node.route"
         custom
       >
-        <template #default="{ navigate, isExactActive }">
+        <template #default="{ navigate }">
           <SidebarMenuButton
             as-child
-            :is-active="isExactActive"
+            :is-active="isActive"
+            :class="isActive ? void 0 : 'group-hover/nav-leaf:bg-zinc-100 group-hover/nav-leaf:text-zinc-900'"
           >
             <button
               type="button"
+              :data-nav-key="node.key"
               @click="navigate"
             >
               <Icon
                 v-if="node.icon"
                 :icon="node.icon"
               />
-              <span>{{ node.label }}</span>
+              <span class="truncate">{{ node.label }}</span>
             </button>
           </SidebarMenuButton>
         </template>
       </NuxtLink>
       <SidebarMenuAction
         v-if="node.favoritable"
-        :show-on-hover="!favorites.isFavorite(node.key)"
-        class="text-yellow-500!"
+        class="text-yellow-500! transition-opacity"
+        :class="favorites.isFavorite(node.key) ? 'opacity-100' : 'md:opacity-0 group-hover/nav-leaf:opacity-100 group-focus-within/nav-leaf:opacity-100'"
         @click.stop="favorites.toggleFavorite(node.key)"
       >
         <Icon :icon="favorites.isFavorite(node.key) ? 'fluent:star-20-filled' : 'fluent:star-20-regular'" />
@@ -95,7 +115,7 @@ function onOpenUpdate(open) {
           v-if="node.icon"
           :icon="node.icon"
         />
-        <span>{{ node.label }}</span>
+        <span class="truncate">{{ node.label }}</span>
       </span>
     </SidebarMenuButton>
   </SidebarMenuItem>

package/dist/runtime/components/sidebar/node.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NavNode } from './types.js';
+import { type NavNode } from './types.js';
 import type { SidebarFavorites } from './favorites.js';
 type __VLS_Props = {
     node: NavNode;

package/dist/runtime/components/sidebar/tree.vue

@@ -1,19 +1,21 @@
 <script setup>
-import { Icon } from "@iconify/vue";
 import { Effect, Fiber, Option } from "effect";
 import { Fetch } from "fx-fetch";
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "#app";
+import { clearNavLabels, publishNavLabels } from "../../utils/nav-registry";
 import { fetchJsonOption } from "../../share/request";
 import { cel as _rawCel } from "../../utils/cel";
 import { celBindings, injectCELContext } from "../../utils/cel-context";
 import { getLocalizedText } from "../../share/locale";
 import { interpolateMarkdown } from "../table/utils/runtime";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible";
-import { SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from "../ui/sidebar";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from "../ui/sidebar";
+import { ScrollArea } from "../ui/scroll-area";
 import { Skeleton } from "../ui/skeleton";
 import SidebarNode from "./node.vue";
 import { useSidebarFavorites } from "./favorites";
+import { SIDEBAR_ACTIVE_KEYS } from "./types";
 defineOptions({ name: "ShwfedSidebarTree" });
 const props = defineProps({
   config: { type: Object, required: true },
@@ -24,10 +26,10 @@ const { locale, t } = useI18n({
   inheritLocale: true,
   useScope: "global",
   messages: {
-    zh: { "sidebar-favorites": "\u6536\u85CF" },
-    en: { "sidebar-favorites": "Favorites" },
-    ja: { "sidebar-favorites": "\u304A\u6C17\u306B\u5165\u308A" },
-    ko: { "sidebar-favorites": "\uC990\uACA8\uCC3E\uAE30" }
+    zh: { "sidebar-favorites": "\u6536\u85CF", "sidebar-menu": "\u83DC\u5355" },
+    en: { "sidebar-favorites": "Favorites", "sidebar-menu": "Menu" },
+    ja: { "sidebar-favorites": "\u304A\u6C17\u306B\u5165\u308A", "sidebar-menu": "\u30E1\u30CB\u30E5\u30FC" },
+    ko: { "sidebar-favorites": "\uC990\uACA8\uCC3E\uAE30", "sidebar-menu": "\uBA54\uB274" }
   }
 });
 const favorites = useSidebarFavorites(props.storageKey);
@@ -143,13 +145,13 @@ function nodeLabelText(node) {
 function buildNode(raw) {
   if (!nodeVisible(raw)) return null;
   const children = getChildren(raw).map(buildNode).filter((n) => n !== null);
-  const route = getOptionalString(props.config.nodeRoute, raw);
+  const route2 = getOptionalString(props.config.nodeRoute, raw);
   return {
     key: getKey(raw),
     label: nodeLabelText(raw),
     icon: getOptionalString(props.config.nodeIcon, raw),
-    route,
-    favoritable: children.length === 0 && !!route,
+    route: route2,
+    favoritable: children.length === 0 && !!route2,
     children
   };
 }
@@ -167,87 +169,115 @@ const favoriteNodes = computed(() => {
   walk(tree.value);
   return out;
 });
+const route = useRoute();
+function nodePath(r) {
+  if (!r) return void 0;
+  return r.split(/[?#]/, 1)[0];
+}
+function nodeFull(r) {
+  if (!r) return void 0;
+  return r.split("#")[0];
+}
+const routedNodes = computed(() => {
+  const out = [];
+  const walk = (ns) => {
+    for (const n of ns) {
+      if (n.route) out.push(n);
+      if (n.children.length) walk(n.children);
+    }
+  };
+  walk(tree.value);
+  return out;
+});
+watch(routedNodes, (nodes) => {
+  const full = /* @__PURE__ */ new Map();
+  const path = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const f = nodeFull(n.route);
+    const p = nodePath(n.route);
+    if (f && !full.has(f)) full.set(f, { label: n.label, icon: n.icon });
+    if (p && !path.has(p)) path.set(p, { label: n.label, icon: n.icon });
+  }
+  publishNavLabels(full, path);
+}, { immediate: true });
+onBeforeUnmount(() => clearNavLabels());
+const activeKeys = computed(() => {
+  const full = nodeFull(route.fullPath);
+  const path = nodePath(route.fullPath);
+  const exact = routedNodes.value.filter((n) => nodeFull(n.route) === full);
+  if (exact.length > 0) return new Set(exact.map((n) => n.key));
+  return new Set(routedNodes.value.filter((n) => nodePath(n.route) === path).map((n) => n.key));
+});
+provide(SIDEBAR_ACTIVE_KEYS, activeKeys);
+function findTrail(nodes, key) {
+  for (const n of nodes) {
+    if (n.key === key) return [n.key];
+    const sub = findTrail(n.children, key);
+    if (sub) return [n.key, ...sub];
+  }
+  return null;
+}
+watch(activeKeys, (keys) => {
+  const first = keys.values().next().value;
+  if (!first) return;
+  const trail = findTrail(tree.value, first);
+  if (!trail) return;
+  for (const key of trail.slice(0, -1)) favorites.setOpen(key, true);
+  void nextTick(() => {
+    for (let i = trail.length - 1; i >= 0; i--) {
+      const key = trail[i];
+      if (!key) continue;
+      const el = document.querySelector(`[data-nav-key="${key.replace(/["\\]/g, "\\$&")}"]`);
+      if (el) {
+        el.scrollIntoView({ block: "nearest" });
+        break;
+      }
+    }
+  });
+}, { immediate: true });
 </script>
 
 <template>
-  <SidebarContent
-    class="gap-2 py-1"
-    :style="styleValue"
-  >
+  <ScrollArea class="min-h-0 w-full flex-1">
     <div
-      v-if="loading && roots.length === 0"
-      class="flex flex-col gap-1.5 px-2 py-1"
-      aria-busy="true"
+      class="flex flex-col gap-2 py-1"
+      :style="styleValue"
     >
-      <Skeleton class="h-6 w-2/3" />
-      <Skeleton class="h-6 w-1/2" />
-      <Skeleton class="h-6 w-3/5" />
-    </div>
-
-    <template v-else>
-      <SidebarGroup v-if="favoriteNodes.length">
-        <SidebarGroupLabel class="text-sm text-zinc-700">
-          {{ t("sidebar-favorites") }}
-        </SidebarGroupLabel>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            <SidebarNode
-              v-for="n in favoriteNodes"
-              :key="`fav-${n.key}`"
-              :node="n"
-              :favorites="favorites"
-            />
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-
-      <template
-        v-for="n in tree"
-        :key="n.key"
+      <div
+        v-if="loading && roots.length === 0"
+        class="flex flex-col gap-1.5 px-2 py-1"
+        aria-busy="true"
       >
-        <!-- Top-level group: the group label IS the collapsible trigger -->
-        <SidebarGroup v-if="n.children.length">
-          <Collapsible
-            class="group/collapsible"
-            :open="favorites.isOpen(n.key, true)"
-            @update:open="(v) => favorites.setOpen(n.key, v)"
-          >
-            <SidebarGroupLabel
-              as-child
-              class="group/label w-full cursor-pointer text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"
-            >
-              <CollapsibleTrigger class="w-full">
-                <Icon
-                  v-if="n.icon"
-                  :icon="n.icon"
-                />
-                {{ n.label }}
-                <Icon
-                  icon="fluent:chevron-right-20-regular"
-                  class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
-                />
-              </CollapsibleTrigger>
-            </SidebarGroupLabel>
-            <CollapsibleContent class="overflow-hidden data-[state=open]:overflow-visible">
-              <SidebarGroupContent>
-                <SidebarMenu class="pl-4">
-                  <SidebarNode
-                    v-for="child in n.children"
-                    :key="child.key"
-                    :node="child"
-                    :favorites="favorites"
-                  />
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </CollapsibleContent>
-          </Collapsible>
+        <Skeleton class="h-6 w-2/3" />
+        <Skeleton class="h-6 w-1/2" />
+        <Skeleton class="h-6 w-3/5" />
+      </div>
+
+      <template v-else>
+        <!-- User favorites -->
+        <SidebarGroup v-if="favoriteNodes.length">
+          <SidebarGroupLabel>{{ t("sidebar-favorites") }}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarNode
+                v-for="n in favoriteNodes"
+                :key="`fav-${n.key}`"
+                :node="n"
+                :favorites="favorites"
+              />
+            </SidebarMenu>
+          </SidebarGroupContent>
         </SidebarGroup>
 
-        <!-- Top-level direct link -->
-        <SidebarGroup v-else>
+        <!-- System menu — top-level items render inline (collapsible); deeper
+             nesting cascades in a flyout (see node.vue). -->
+        <SidebarGroup v-if="tree.length">
+          <SidebarGroupLabel>{{ t("sidebar-menu") }}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               <SidebarNode
+                v-for="n in tree"
+                :key="n.key"
                 :node="n"
                 :favorites="favorites"
               />
@@ -255,6 +285,6 @@ const favoriteNodes = computed(() => {
           </SidebarGroupContent>
         </SidebarGroup>
       </template>
-    </template>
-  </SidebarContent>
+    </div>
+  </ScrollArea>
 </template>

package/dist/runtime/components/sidebar/types.d.ts

@@ -1,3 +1,11 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * The set of node keys that are "active" for the current location, computed once
+ * in `tree.vue` (query-aware — exact full-route match wins, path match is the
+ * fallback) and injected into every `node.vue` so highlighting is consistent and
+ * a query variant lights up only its own node.
+ */
+export declare const SIDEBAR_ACTIVE_KEYS: InjectionKey<ComputedRef<Set<string>>>;
 /**
  * A normalized navigation node — the product of walking the raw `DataSource`
  * payload and evaluating every per-node CEL expression once. The recursive

package/dist/runtime/components/sidebar/types.js

@@ -0,0 +1 @@
+export const SIDEBAR_ACTIVE_KEYS = Symbol("shwfed-sidebar-active-keys");

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/runtime.vue

@@ -1,84 +1,17 @@
 <script setup>
 import { computed } from "vue";
 import { JUSTIFY_CLASS } from "../../../utils/runtime";
+import { formatNumberDisplay } from "../../../../../share/number-format";
 defineOptions({ name: "ShwfedTableNumberRendererRuntime" });
 const props = defineProps({
   column: { type: null, required: true },
   ctx: { type: Object, required: true }
 });
-const CHINESE_DIGITS = ["\u96F6", "\u58F9", "\u8D30", "\u53C1", "\u8086", "\u4F0D", "\u9646", "\u67D2", "\u634C", "\u7396"];
-const CHINESE_UNITS = ["", "\u62FE", "\u4F70", "\u4EDF"];
-const CHINESE_GROUP_UNITS = ["", "\u4E07", "\u4EBF", "\u5146"];
-function toChineseUppercase(n) {
-  if (Number.isNaN(n)) return "-";
-  if (n === 0) return "\u96F6";
-  const isNegative = n < 0;
-  const absN = Math.abs(n);
-  const [intPart, decPart] = String(absN).split(".");
-  let result = "";
-  const digits = intPart.split("").reverse();
-  let zeroFlag = false;
-  for (let i = 0; i < digits.length; i++) {
-    const d = Number(digits[i]);
-    const groupIndex = Math.floor(i / 4);
-    const posInGroup = i % 4;
-    if (d === 0) {
-      zeroFlag = true;
-    } else {
-      if (zeroFlag) {
-        result = CHINESE_DIGITS[0] + result;
-        zeroFlag = false;
-      }
-      result = CHINESE_DIGITS[d] + CHINESE_UNITS[posInGroup] + result;
-    }
-    if (posInGroup === 0 && groupIndex > 0 && !zeroFlag) {
-      result = (CHINESE_GROUP_UNITS[groupIndex] ?? "") + result;
-    }
-  }
-  if (decPart) {
-    result += "\u70B9";
-    for (const ch of decPart) {
-      result += CHINESE_DIGITS[Number(ch)];
-    }
-  }
-  return isNegative ? `\u8D1F${result}` : result;
-}
-function formatNumber(value, column) {
-  if (value === void 0 || value === null) return "-";
-  const n = Number(value);
-  if (Number.isNaN(n)) return "-";
-  const displayMode = column.displayMode ?? "plain";
-  if (displayMode === "uppercaseChinese") {
-    return toChineseUppercase(n);
-  }
-  let result;
-  if (column.preserveDigits !== void 0) {
-    const mode = column.preserveMode ?? "round";
-    const digits = column.preserveDigits;
-    const factor = 10 ** digits;
-    let processed;
-    switch (mode) {
-      case "floor":
-        processed = Math.floor(n * factor) / factor;
-        break;
-      case "ceil":
-        processed = Math.ceil(n * factor) / factor;
-        break;
-      default:
-        processed = Math.round(n * factor) / factor;
-    }
-    result = processed.toFixed(digits);
-  } else {
-    result = String(n);
-  }
-  if (displayMode === "monoThousand") {
-    const [integer, decimal] = result.split(".");
-    const formattedInt = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    result = decimal !== void 0 ? `${formattedInt}.${decimal}` : formattedInt;
-  }
-  return result;
-}
-const formatted = computed(() => formatNumber(props.ctx.cell.getValue(), props.column));
+const formatted = computed(() => formatNumberDisplay(props.ctx.cell.getValue(), {
+  displayMode: props.column.displayMode,
+  precision: props.column.preserveDigits,
+  roundingMode: props.column.preserveMode
+}));
 const isNan = computed(() => formatted.value === "-");
 const align = computed(() => isNan.value ? "center" : props.column.align ?? "right");
 const justifyClass = computed(() => JUSTIFY_CLASS[align.value] ?? JUSTIFY_CLASS.right);

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.combobox-single/config.d.vue.ts

@@ -58,12 +58,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly message: string;
         }[]] | undefined;
         readonly readonly?: string | undefined;
-        readonly enableSorting?: boolean | undefined;
         readonly binding: string;
         readonly derived?: {
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
+        readonly enableSorting?: boolean | undefined;
         readonly sortKey?: string | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
@@ -122,12 +122,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly message: string;
         }[]] | undefined;
         readonly readonly?: string | undefined;
-        readonly enableSorting?: boolean | undefined;
         readonly binding: string;
         readonly derived?: {
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
+        readonly enableSorting?: boolean | undefined;
         readonly sortKey?: string | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.combobox-single/config.vue.d.ts

@@ -58,12 +58,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly message: string;
         }[]] | undefined;
         readonly readonly?: string | undefined;
-        readonly enableSorting?: boolean | undefined;
         readonly binding: string;
         readonly derived?: {
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
+        readonly enableSorting?: boolean | undefined;
         readonly sortKey?: string | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
@@ -122,12 +122,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly message: string;
         }[]] | undefined;
         readonly readonly?: string | undefined;
-        readonly enableSorting?: boolean | undefined;
         readonly binding: string;
         readonly derived?: {
             readonly mode: "formula" | "prefill";
             readonly expression: string;
         } | undefined;
+        readonly enableSorting?: boolean | undefined;
         readonly sortKey?: string | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-input/config.vue

@@ -19,6 +19,13 @@ import {
   InputGroupInput,
   InputGroupNumberField
 } from "../../../../ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../ui/select";
 import ActionsConfigEditor from "../../../../actions/config.vue";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
 import { Markdown } from "../../../../ui/markdown";
@@ -92,6 +99,11 @@ const ROUNDING_MODE_OPTIONS = [
   { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
   { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" }
 ];
+const DISPLAY_MODE_OPTIONS = [
+  { value: "plain", label: "\u6570\u503C" },
+  { value: "uppercaseChinese", label: "\u4E2D\u6587\u5927\u5199" },
+  { value: "monoThousand", label: "\u7B49\u5BBD\u5B57\u4F53\u52A0\u5343\u5206\u4F4D" }
+];
 const bindingText = computed({
   get: () => value.value.binding ?? "",
   set: (v) => {
@@ -439,6 +451,38 @@ function onMaxChange(v) {
           />
         </div>
       </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('displayMode')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('displayMode')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("displayMode") }}
+        </FieldLabel>
+        <Select
+          :model-value="value.displayMode ?? 'plain'"
+          @update:model-value="(v) => value = { ...value, displayMode: v }"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in DISPLAY_MODE_OPTIONS"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
     </div>
     <div class="grid grid-cols-2 gap-x-6 gap-y-4">
       <Field orientation="vertical">

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-input/runtime.vue

@@ -7,6 +7,7 @@ import { cel as _rawCel } from "../../../../../utils/cel";
 import { celScope, injectCELContext } from "../../../../../utils/cel-context";
 import { useFormReadonly } from "../../../../form/utils/readonly";
 import { getLocalizedText } from "../../../../../share/locale";
+import { formatNumberDisplay } from "../../../../../share/number-format";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupNumberField } from "../../../../ui/input-group";
 import ShwfedActions from "../../../../actions/components/group.vue";
 import { useFieldValue } from "../../../../form/utils/field-value";
@@ -70,6 +71,11 @@ const { draft, commit } = useFieldValue({
     return props.column.valueAsString ? String(next) : next;
   }
 });
+const readonlyDisplay = computed(() => formatNumberDisplay(draft.value, {
+  displayMode: props.column.displayMode,
+  precision: props.column.precision,
+  roundingMode: props.column.roundingMode
+}));
 function applyRounding(n, precision, mode) {
   const factor = 10 ** precision;
   switch (mode) {
@@ -133,10 +139,10 @@ async function onBlur() {
       v-if="effectiveReadonly"
       :class="[
   'flex items-center h-7 w-full px-2 text-[0.75rem] truncate',
-  draft !== void 0 ? ['text-zinc-700', justifyClass] : 'justify-center font-mono text-zinc-300 select-none'
+  draft !== void 0 ? ['text-zinc-700', justifyClass, column.displayMode === 'monoThousand' && 'font-mono'] : 'justify-center font-mono text-zinc-300 select-none'
 ]"
     >
-      {{ draft ?? "-" }}
+      {{ readonlyDisplay }}
     </span>
     <InputGroup
       v-else

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-input/schema.d.ts

@@ -33,6 +33,9 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     valueAsString: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     min: Schema.optional<Schema.Schema<string, string, never>>;
     max: Schema.optional<Schema.Schema<string, string, never>>;
+    displayMode: Schema.optionalWith<Schema.Literal<["plain", "uppercaseChinese", "monoThousand"]>, {
+        default: () => "plain";
+    }>;
     derived: Schema.optional<Schema.Struct<{
         mode: Schema.Literal<["formula", "prefill"]>;
         expression: Schema.Schema<string, string, never>;

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-input/schema.js

@@ -68,6 +68,13 @@ export function schema(configure) {
       title: "\u6700\u5927\u503C",
       description: "\u5141\u8BB8\u8F93\u5165\u7684\u6700\u5927\u503C\u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `row` / `index` \u548C `form`\uFF1B\u7559\u7A7A\u65F6\u4E0D\u9650\u5236\u4E0A\u9650"
     })),
+    displayMode: Schema.optionalWith(
+      Schema.Literal("plain", "uppercaseChinese", "monoThousand").annotations({
+        title: "\u6A21\u5F0F",
+        description: "\u53EA\u8BFB\u5C55\u793A\u65F6\u7684\u6A21\u5F0F\uFF1A\u6570\u503C\uFF08\u539F\u6837\uFF09\u3001\u4E2D\u6587\u5927\u5199\uFF08\u5982 4200 \u2192 `\u8086\u4EDF\u8D30\u4F70\u96F6\u62FE`\uFF09\u3001\u7B49\u5BBD\u5B57\u4F53\u52A0\u5343\u5206\u4F4D\uFF08\u5982 `4,200`\uFF09\uFF1B\u7F16\u8F91\u6001\u4E0D\u53D7\u5F71\u54CD"
+      }),
+      { default: () => "plain" }
+    ),
     derived: derivedRowField(configure, "number"),
     // `Schema.optional` rebuilds the struct's union member, and because the
     // `optionalWith`-default fields make `AddonActions` a `Transformation`, the