diff --git a/uniapp/youjiala/src/admin/admin-column.ts b/uniapp/youjiala/src/admin/admin-column.ts
new file mode 100644
index 0000000..db738b2
--- /dev/null
+++ b/uniapp/youjiala/src/admin/admin-column.ts
@@ -0,0 +1,80 @@
+/**
+ * 卡片一行的显示文本：format -> date -> 原值，三级兜底
+ *
+ * 单独成文件而不写进 admin-list.vue：这是纯展示换算，
+ * 放进组件里就没法在 node 下断言（本项目目前只有纯函数层可测）。
+ */
+import type { AdminColumn, AdminRow } from "@/admin/admin-types";
+import { formatDate } from "@/admin/admin-date";
+
+/** 空值统一显示成 "-"：移动端卡片上空白行会被误认为渲染坏了 */
+export const EMPTY_CELL_TEXT = "-";
+
+/**
+ * 取一行里某列的显示文本。
+ * @param row 后端返回的行对象
+ * @param column 列定义
+ */
+export function cellText(row: AdminRow, column: AdminColumn): string {
+  if (column.format) {
+    return column.format(row) || EMPTY_CELL_TEXT;
+  }
+  const raw = row?.[column.prop];
+  if (raw === null || raw === undefined || raw === "") {
+    return EMPTY_CELL_TEXT;
+  }
+  if (column.date) {
+    return formatDate(raw, column.date === "datetime") || EMPTY_CELL_TEXT;
+  }
+  return String(raw);
+}
+
+/** 卡片主标题用哪一列：页面没指定就拿第一列 */
+export function pickTitleColumn(
+  columns: AdminColumn[],
+  titleProp?: string,
+): AdminColumn | undefined {
+  if (!columns.length) {
+    return undefined;
+  }
+  if (!titleProp) {
+    return columns[0];
+  }
+  for (const column of columns) {
+    if (column.prop === titleProp) {
+      return column;
+    }
+  }
+  return columns[0];
+}
+
+/** 主标题之外的剩余列（卡片正文逐行显示） */
+export function restColumns(
+  columns: AdminColumn[],
+  titleProp?: string,
+): AdminColumn[] {
+  const title = pickTitleColumn(columns, titleProp);
+  if (!title) {
+    return [];
+  }
+  const rest: AdminColumn[] = [];
+  for (const column of columns) {
+    if (column !== title) {
+      rest.push(column);
+    }
+  }
+  return rest;
+}
+
+/** 行的稳定 key：优先页面指定的 rowKey，取不到就退回数组下标 */
+export function rowKeyOf(
+  row: AdminRow,
+  keyProp: string,
+  index: number,
+): string {
+  const raw = row?.[keyProp];
+  if (raw === null || raw === undefined || raw === "") {
+    return String(index);
+  }
+  return String(raw);
+}
diff --git a/uniapp/youjiala/src/admin/admin-date.ts b/uniapp/youjiala/src/admin/admin-date.ts
new file mode 100644
index 0000000..7e27fb5
--- /dev/null
+++ b/uniapp/youjiala/src/admin/admin-date.ts
@@ -0,0 +1,98 @@
+/**
+ * 管理端的日期取值与显示：不依赖 dayjs，纯函数（可在 node 下直接跑 spec）
+ *
+ * 为什么自己写：旧前端的筛选条件用 dayjs 存值（BindOption.DayjsValue），
+ * 再在提交时 format；移动端选用的原生 `<picker mode="date">` 产出的是
+ * **"yyyy-MM-dd" 字符串**（uview-pro 0.7.1 没有 u-datetime-picker，别去找），
+ * 中间那一层 dayjs 反而成了多余依赖。这里只保留真正需要的几种形态：
+ * 后端要的 "yyyy-MM-dd" / "yyyy-MM-dd HH:mm:ss" 字符串，以及列表上的一行显示文本。
+ */
+
+/** 宽松解析：Date / 时间戳 / ISO 字符串都能吃，无效值返回 null（不抛异常） */
+export function toDate(
+  value: Date | number | string | null | undefined,
+): Date | null {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+}
+
+function pad(value: number): string {
+  return value < 10 ? `0${value}` : String(value);
+}
+
+/**
+ * 格式化给后端或列表用。
+ * @param withTime true 时输出 yyyy-MM-dd HH:mm:ss（DateTime 型筛选项要这个形态）
+ */
+export function formatDate(
+  value: Date | number | string | null | undefined,
+  withTime = false,
+): string {
+  const date = toDate(value);
+  if (!date) {
+    return "";
+  }
+  const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+    date.getDate(),
+  )}`;
+  if (!withTime) {
+    return day;
+  }
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
+    date.getSeconds(),
+  )}`;
+  return `${day} ${time}`;
+}
+
+/** 区间取值（后端 date_between 要求 Value <= Value1） */
+export interface DateRange {
+  start: string;
+  end: string;
+}
+
+/**
+ * 最近 N 天的日期区间，供筛选抽屉里的快捷 chip 用。
+ * 端点取"今天"，不是"此刻"——date_between 在后端按日期比较，带时间会让边界日漏数据。
+ * @param days 含今天往前共几天；小于 1 按 1 处理
+ * @param today 可注入基准日，便于 spec 断言
+ */
+export function recentRange(days: number, today = new Date()): DateRange {
+  const base = toDate(today) ?? new Date();
+  const span = Math.max(1, Math.trunc(days));
+  const start = new Date(base.getTime());
+  start.setDate(start.getDate() - (span - 1));
+  return { start: formatDate(start), end: formatDate(base) };
+}
+
+/**
+ * 取日期部分（前 10 个字符）。
+ * 抽屉里的原生 picker 只认 yyyy-MM-dd，而 DateTime 型筛选项存的是带时间的整串，
+ * 直接把整串塞给 picker 会让它显示成"未选中"，用户以为没填。
+ */
+export function datePart(value: string): string {
+  return String(value ?? "")
+    .trim()
+    .slice(0, 10);
+}
+
+/** 区间下界：只有日期时补一天的起点 */
+export function dayStart(value: string): string {
+  const day = datePart(value);
+  return day ? `${day} 00:00:00` : "";
+}
+
+/**
+ * 区间上界：只有日期时补一天的终点。
+ * 漏掉这一步的后果是"创建日期在 X ~ Y 之间"查不到 Y 当天创建的人——
+ * 后端拿 created_datetime(带时分秒) 与 'Y'（等于 Y 00:00:00）比较。
+ */
+export function dayEnd(value: string): string {
+  const day = datePart(value);
+  return day ? `${day} 23:59:59` : "";
+}
diff --git a/uniapp/youjiala/src/admin/admin-filter.ts b/uniapp/youjiala/src/admin/admin-filter.ts
new file mode 100644
index 0000000..9eb90e8
--- /dev/null
+++ b/uniapp/youjiala/src/admin/admin-filter.ts
@@ -0,0 +1,440 @@
+/**
+ * 管理端筛选条件的纯函数层：BindOption[] -> SearchFilter[]
+ *
+ * 判定语义逐条对照旧 WebVue 的 `components/basic/SearchCriteria.vue:495-577`
+ * （getFilters），只做两处适配，都是移动端必须的：
+ * 1. 不再读 `BindOption.DayjsValue`：旧实现依赖 dayjs 再 format，这里约定
+ *    `Value` / `Value1` 直接放已格式化的字符串（yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss），
+ *    格式化由页面层用 @/admin/admin-date 或 uview 的日期选择器完成；
+ * 2. 不再读 `BindOption.NumberValue`：那是 a-input-number 的产物，
+ *    移动端的 u-input(type=number) 产出的就是字符串，统一按 `Value` 处理。
+ *
+ * 空条件不提交（与旧实现一致）：一条 Value 为空串的 equal_to / in_range 条件
+ * 发上去等于「字段 = ''」，会把结果集直接清零；旧前端能正常工作正是靠这条过滤。
+ */
+import type {
+  AdminFilterChoice,
+  AdminFilterDraftItem,
+  AdminFilterKind,
+} from "@/admin/admin-types";
+import type { AbstractSearchCriteria } from "@/data/auto/abstractSearchCriteria";
+import { dayEnd, dayStart, recentRange } from "@/admin/admin-date";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import { SelectOption } from "@/data/auto/selectOption";
+import { BindOption } from "@/data/custom/bindOption";
+import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
+import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
+
+/**
+ * 旧 SearchCriteria 支持、但 SearchFilterTypePolicy 没有收录的类型取值。
+ * 生成器只把常用的六种写进了 policy，这五种散落在组件的 v-if 里，
+ * 移植时必须原样保留字符串，否则后端按 Type 分支取值的逻辑会对不上。
+ */
+export const ADMIN_FILTER_TYPE = {
+  DATE_TIME: "DateTime",
+  CHECKBOX: "Checkbox",
+  RADIO_GROUP: "RadioGroup",
+  CHECKBOX_GROUP: "CheckboxGroup",
+  MENU_SINGLE: "MenuSingleSelection",
+} as const;
+
+/** policy 里缺失的运算符取值（同样来自旧组件的字面量） */
+export const ADMIN_FILTER_OPERATOR = {
+  DATETIME_BETWEEN: "datetime_between",
+} as const;
+
+/**
+ * 日期区间筛选项的快捷档：手机上敲两个日期太贵，
+ * 日常排查用到的其实只有"最近几天"这三档。
+ */
+export const ADMIN_FILTER_QUICK_DAYS = [7, 30, 90];
+
+/** 非空字符串判定：旧实现用的是 length > 0，这里额外 trim 掉纯空格 */
+function hasText(value?: string): boolean {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return value.trim().length > 0;
+}
+
+/** 区间型运算符：后端取 Value 作下界、Value1 作上界（抽屉也要用它决定渲染起止两个输入） */
+export function isBetweenOperator(operator: string): boolean {
+  if (operator === SearchFilterOperatorPolicy.BETWEEN) {
+    return true;
+  }
+  if (operator === SearchFilterOperatorPolicy.DATE_BETWEEN) {
+    return true;
+  }
+  return operator === ADMIN_FILTER_OPERATOR.DATETIME_BETWEEN;
+}
+
+/** 勾选框 / 单选组：取值落在 BooleanValue 上，而非 Value */
+export function isBooleanType(type: string): boolean {
+  if (type === ADMIN_FILTER_TYPE.CHECKBOX) {
+    return true;
+  }
+  return type === ADMIN_FILTER_TYPE.RADIO_GROUP;
+}
+
+/** 三种取值任一非空 */
+function hasAnyValue(filter: SearchFilter): boolean {
+  if (hasText(filter.Value) || hasText(filter.Value1)) {
+    return true;
+  }
+  return filter.Values.length > 0;
+}
+
+/** 按旧实现的字段映射产出一条筛选条件 */
+function toFilter(option: BindOption): SearchFilter {
+  const filter = new SearchFilter();
+  filter.Column = option.BindValue;
+  filter.Type = option.Type;
+  filter.Operator = option.Operator;
+  filter.Value = option.Value;
+  filter.Value1 = option.Value1;
+  filter.Values = option.Values;
+  return filter;
+}
+
+/**
+ * 单个 BindOption -> SearchFilter；返回 null 表示这条不该提交。
+ * 分支顺序与旧 getFilters 的 switch 完全一致，方便逐条比对着排错。
+ */
+export function buildFilter(option: BindOption): SearchFilter | null {
+  const filter = toFilter(option);
+  const between = isBetweenOperator(filter.Operator);
+
+  switch (filter.Type) {
+    case SearchFilterTypePolicy.TEXT:
+    case SearchFilterTypePolicy.TEXT_CONTAIN:
+      return hasText(filter.Value) ? filter : null;
+
+    case SearchFilterTypePolicy.NUMBER:
+    case SearchFilterTypePolicy.DATE:
+    case ADMIN_FILTER_TYPE.DATE_TIME:
+      // 区间型：只填了左边界也要发，后端把空 Value1 当"不封顶"
+      if (!between) {
+        return hasText(filter.Value) ? filter : null;
+      }
+      return hasAnyValue(filter) ? filter : null;
+
+    case ADMIN_FILTER_TYPE.CHECKBOX:
+    case ADMIN_FILTER_TYPE.RADIO_GROUP:
+      if (option.BooleanValue) {
+        filter.Value = String(option.BooleanValue);
+        return filter;
+      }
+      return null;
+
+    case ADMIN_FILTER_TYPE.CHECKBOX_GROUP:
+      if (option.BooleanValues.length > 0) {
+        filter.Values = [];
+        for (const value of option.BooleanValues) {
+          filter.Values.push(String(value));
+        }
+        return filter;
+      }
+      return null;
+
+    case ADMIN_FILTER_TYPE.MENU_SINGLE:
+      // 旧实现：级联菜单的值形如 "叶子 - 父级"，提交前只取叶子
+      if (hasText(filter.Value)) {
+        filter.Value = filter.Value.split(" - ")[0];
+        return filter;
+      }
+      return null;
+
+    default:
+      // SingleSelection / MultipleSelection 等走这里：三种值任一非空即提交
+      return hasAnyValue(filter) ? filter : null;
+  }
+}
+
+/** 整条筛选条 -> SearchFilter[]，顺序保持登记顺序（后端不依赖顺序，便于对比日志） */
+export function buildFilters(options: BindOption[]): SearchFilter[] {
+  const filters: SearchFilter[] = [];
+  for (const option of options) {
+    const filter = buildFilter(option);
+    if (filter) {
+      filters.push(filter);
+    }
+  }
+  return filters;
+}
+
+/** 已填写的条数：筛选按钮上的角标用，0 表示"没过滤，看到的是全量" */
+export function activeFilterCount(options: BindOption[]): number {
+  return buildFilters(options).length;
+}
+
+/** 清空一条筛选条件的所有取值（旧 SearchCriteria 的 onReset 同款） */
+export function clearFilterValue(option: BindOption): void {
+  option.Value = "";
+  option.Value1 = "";
+  option.Values = [];
+  option.NumberValue = null!;
+  option.NumberValue1 = null!;
+  option.NumberValues = [];
+  option.DayjsValue = null!;
+  option.DayjsValue1 = null!;
+  option.DayjsValues = [];
+  option.BooleanValue = false;
+  option.BooleanValue1 = false;
+  option.BooleanValues = [];
+}
+
+/** 整条筛选条清空，返回原数组便于链式调用 */
+export function clearFilters(options: BindOption[]): BindOption[] {
+  for (const option of options) {
+    clearFilterValue(option);
+  }
+  return options;
+}
+
+/** 分页与排序参数（旧页面的 pagingParams + orderby/orderbytag 归一成一个入参对象） */
+export interface AdminPageQuery {
+  page: number;
+  limit: number;
+  orderby?: string;
+  orderbytag?: string;
+}
+
+/**
+ * 把筛选条件与分页写进 criteria。
+ * criteria 由页面自己 new（各域的 SearchCriteria 子类不同），这里只碰
+ * AbstractSearchCriteria 上的公共字段，保持与旧实现一致的"每页重建 criteria"习惯。
+ */
+export function fillCriteria<T extends AbstractSearchCriteria>(
+  criteria: T,
+  filters: SearchFilter[],
+  query: AdminPageQuery,
+): T {
+  criteria.Filter = filters;
+  criteria.page = query.page;
+  criteria.limit = query.limit;
+  criteria.orderby = query.orderby ?? "";
+  criteria.orderbytag = query.orderbytag ?? "";
+  return criteria;
+}
+
+/** 该筛选项在抽屉里是否要渲染成"起止两个值" */
+export function isRangeOption(option: BindOption): boolean {
+  return isBetweenOperator(option.Operator);
+}
+
+function pickOption(
+  options: BindOption[],
+  key: string,
+): BindOption | undefined {
+  for (const option of options) {
+    if (option.BindValue === key) {
+      return option;
+    }
+  }
+  return undefined;
+}
+
+function toChoices(option: BindOption): AdminFilterChoice[] {
+  const choices: AdminFilterChoice[] = [];
+  for (const item of option.SelectOptions ?? []) {
+    choices.push({ label: item.DisplayName, value: item.BindValue });
+  }
+  return choices;
+}
+
+/**
+ * BindOption -> 抽屉草稿。
+ * 布尔型（Checkbox / RadioGroup / CheckboxGroup）在旧 UI 里是勾选框，
+ * 这里统一映射成"选中即字符串 'true'，未选即空串"，好让 buildFilter 不用改动。
+ */
+export function toDraftItem(option: BindOption): AdminFilterDraftItem {
+  const item: AdminFilterDraftItem = {
+    key: option.BindValue,
+    label: option.DisplayName,
+    type: option.Type,
+    operator: option.Operator,
+    value: option.Value ?? "",
+    value1: option.Value1 ?? "",
+    values: [...(option.Values ?? [])],
+    choices: toChoices(option),
+  };
+  if (isBooleanType(option.Type)) {
+    item.value = option.BooleanValue ? "true" : "";
+  }
+  if (option.Type === ADMIN_FILTER_TYPE.CHECKBOX_GROUP) {
+    item.values = [];
+    for (const value of option.BooleanValues ?? []) {
+      if (value) {
+        item.values.push(String(value));
+      }
+    }
+  }
+  return item;
+}
+
+/** 整条筛选条 -> 草稿数组（抽屉打开时调用） */
+export function toDraft(options: BindOption[]): AdminFilterDraftItem[] {
+  const draft: AdminFilterDraftItem[] = [];
+  for (const option of options) {
+    draft.push(toDraftItem(option));
+  }
+  return draft;
+}
+
+/** 草稿 -> 写回 BindOption（点"确定"时调用），未登记的 key 直接忽略 */
+export function applyDraft(
+  options: BindOption[],
+  draft: AdminFilterDraftItem[],
+): BindOption[] {
+  for (const item of draft) {
+    const option = pickOption(options, item.key);
+    if (!option) {
+      continue;
+    }
+    // DateTime 型统一补成整日的起止秒：原生 picker 只给到"日"，
+    // 而 datetime_between 的上界若不带时间会被当成 00:00:00，边界日整天漏数据
+    if (draftKind(item) === "datetime") {
+      item.value = dayStart(item.value);
+      item.value1 = dayEnd(item.value1);
+    }
+    option.Value = item.value;
+    option.Value1 = item.value1;
+    option.Values = [...item.values];
+    if (isBooleanType(item.type)) {
+      option.BooleanValue = item.value === "true";
+    }
+    if (item.type === ADMIN_FILTER_TYPE.CHECKBOX_GROUP) {
+      option.BooleanValues = [];
+      for (const value of item.values) {
+        option.BooleanValues.push(value === "true");
+      }
+    }
+  }
+  return options;
+}
+
+/**
+ * 抽屉里一条筛选项该渲染成哪种控件。
+ * 分类放在纯函数层而不是模板里，是因为模板里的 v-if 链一旦写错，
+ * 移动端上"看起来能填、提交上去条件丢了"这类问题极难发现。
+ * - switch：Checkbox / RadioGroup（布尔值）
+ * - single / multiple：有候选项的选择（MenuSingleSelection 与 SingleSelection 归 single）
+ * - date / datetime：走原生 picker，DateTime 额外补时分秒
+ * - number / text：其余都落到输入框
+ */
+export function draftKind(item: AdminFilterDraftItem): AdminFilterKind {
+  if (isBooleanType(item.type)) {
+    return "switch";
+  }
+  switch (item.type) {
+    case SearchFilterTypePolicy.NUMBER:
+      return "number";
+    case SearchFilterTypePolicy.DATE:
+      return "date";
+    case ADMIN_FILTER_TYPE.DATE_TIME:
+      return "datetime";
+    case ADMIN_FILTER_TYPE.CHECKBOX_GROUP:
+    case SearchFilterTypePolicy.MULTIPLE_SELECTION:
+      return "multiple";
+    case ADMIN_FILTER_TYPE.MENU_SINGLE:
+    case SearchFilterTypePolicy.SINGLE_SELECTION:
+      return "single";
+    default:
+      return item.choices.length > 0 ? "single" : "text";
+  }
+}
+
+/** 该草稿项是否需要"起止两个值" */
+export function isRangeDraft(item: AdminFilterDraftItem): boolean {
+  return isBetweenOperator(item.operator);
+}
+
+/** 多选候选项是否已勾选 */
+export function isDraftValueChecked(
+  item: AdminFilterDraftItem,
+  value: string,
+): boolean {
+  for (const existing of item.values) {
+    if (existing === value) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** 多选候选项取反（草稿是普通对象，直接改 items 即可被抽屉感知） */
+export function toggleDraftValue(
+  item: AdminFilterDraftItem,
+  value: string,
+): void {
+  const next: string[] = [];
+  let removed = false;
+  for (const existing of item.values) {
+    if (existing === value) {
+      removed = true;
+      continue;
+    }
+    next.push(existing);
+  }
+  if (!removed) {
+    next.push(value);
+  }
+  item.values = next;
+}
+
+/** 快捷区间：把日期型草稿项写成"最近 N 天"（含今天） */
+export function setDraftQuickRange(
+  item: AdminFilterDraftItem,
+  days: number,
+): void {
+  const range = recentRange(days);
+  item.value = range.start;
+  item.value1 = range.end;
+}
+
+/** 单项清空：抽屉里每条筛选项右侧的 x 按钮 */
+export function clearDraftItem(item: AdminFilterDraftItem): void {
+  item.value = "";
+  item.value1 = "";
+  item.values = [];
+}
+
+/** 草稿项是否已填写（决定 x 按钮和角标显不显示） */
+export function isDraftFilled(item: AdminFilterDraftItem): boolean {
+  if (hasText(item.value) || hasText(item.value1)) {
+    return true;
+  }
+  return item.values.length > 0;
+}
+
+/** 候选项 -> 后端 SelectOption（字段名不同：DisplayName / BindValue） */
+export function toSelectOption(choice: AdminFilterChoice): SelectOption {
+  const option = new SelectOption();
+  option.DisplayName = choice.label;
+  option.BindValue = choice.value;
+  return option;
+}
+
+/**
+ * 建一条筛选项，取代旧 hooks/useBindOption.ts 的 getBindOption。
+ * 不再搬 lg/sm：那是 a-row 栅格宽度，移动端抽屉是单列流，没有对应概念。
+ * displayName 必须由页面用 t() 传进来，这里不写死中文——旧页面直接写中文字面量，
+ * 是因为它只跑中文；本项目三端多语言，条件名漏翻会在英文环境下露出中文。
+ */
+export function makeFilterOption(
+  bindValue: string,
+  displayName: string,
+  type: string,
+  operator: string,
+  choices: AdminFilterChoice[] = [],
+): BindOption {
+  const option = new BindOption();
+  option.BindValue = bindValue;
+  option.DisplayName = displayName;
+  option.Type = type;
+  option.Operator = operator;
+  for (const choice of choices) {
+    option.SelectOptions.push(toSelectOption(choice));
+  }
+  return option;
+}
diff --git a/uniapp/youjiala/src/admin/admin-types.ts b/uniapp/youjiala/src/admin/admin-types.ts
new file mode 100644
index 0000000..028c1bc
--- /dev/null
+++ b/uniapp/youjiala/src/admin/admin-types.ts
@@ -0,0 +1,159 @@
+/**
+ * 管理端模板的公共形状定义
+ *
+ * 单列出来只为一个原因：admin-list / admin-form / useAdminList 三者要共享这些类型，
+ * 放进任何一个 .vue 里都会变成循环引用。
+ */
+import type { SearchFilter } from "@/data/auto/searchFilter";
+
+/** 后端返回的行对象（各域的 Entity 字段大小写不一，这里只能给宽松形状） */
+export type AdminRow = Record<string, any>;
+
+/**
+ * 卡片上的一行显示项。
+ * 取值顺序：format 有值用 format -> date 用 formatDate -> 否则直接读 row[prop]。
+ * 之所以要 prop 字符串而不是 getter：卡片列在模板里要参与 v-for key 与选中判定。
+ */
+export interface AdminColumn {
+  label: string;
+  prop: string;
+  /** 日期型字段：显示成 yyyy-MM-dd（true）或 yyyy-MM-dd HH:mm:ss（"datetime"） */
+  date?: boolean | "datetime";
+  format?: (row: AdminRow) => string;
+}
+
+/** 一次列表请求的入参 */
+export interface AdminQuery {
+  page: number;
+  limit: number;
+  filters: SearchFilter[];
+  orderby?: string;
+  orderbytag?: string;
+}
+
+/** 一次列表请求的出参：total 给分页用，rows 是当前页 */
+export interface AdminLoadResult<T = AdminRow> {
+  rows: T[];
+  total: number;
+}
+
+/** 选择型筛选项的一个候选（来自 BindOption.SelectOptions） */
+export interface AdminFilterChoice {
+  label: string;
+  value: string;
+}
+
+/**
+ * 抽屉里一条筛选项的渲染形态，由 admin-filter 的 draftKind 判定。
+ * 模板只按这个枚举分支，不再自己解析 Type/Operator，
+ * 免得"能填但条件丢"这种 bug 分散在模板和纯函数两处。
+ *
+ * 写成 const 对象 + keyof 而不是字面量联合：七个成员一行放不下，
+ * 而 Prettier 会把超长的联合折成前导竖线多行形式，
+ * 与 ESLint 的 operator-linebreak（要求 = 在行首）直接对撞，改一次撞一次。
+ */
+export const ADMIN_FILTER_KIND = {
+  TEXT: "text",
+  NUMBER: "number",
+  DATE: "date",
+  DATETIME: "datetime",
+  SWITCH: "switch",
+  SINGLE: "single",
+  MULTIPLE: "multiple",
+} as const;
+
+type FilterKinds = typeof ADMIN_FILTER_KIND;
+
+export type AdminFilterKind = FilterKinds[keyof FilterKinds];
+
+/**
+ * 一条筛选项在抽屉里的草稿。
+ * 存在的理由：抽屉是"编辑完点确定才生效"的交互，若直接改 BindOption，
+ * 用户点取消就留下半截条件；且 UI 只该看到它需要的那几个字段，
+ * 不必知道 dayjs / number / boolean 三套并存的取值历史。
+ */
+export interface AdminFilterDraftItem {
+  /** BindOption.BindValue，即后端列名，同时充当草稿的 key */
+  key: string;
+  label: string;
+  /** BindOption.Type：决定抽屉里渲染哪种控件 */
+  type: string;
+  operator: string;
+  value: string;
+  value1: string;
+  values: string[];
+  choices: AdminFilterChoice[];
+}
+
+/** 列表数据源：admin-list 只认这个函数形状，具体 service 由页面闭包进去 */
+export type AdminLoader<T = AdminRow> = (
+  query: AdminQuery,
+) => Promise<AdminLoadResult<T>>;
+
+/** 选择页回传给调用方的载荷 */
+export interface AdminPickPayload<T = AdminRow> {
+  /** 调用方指定的通道名，一个页面可以有多个选择通道 */
+  channel: string;
+  rows: T[];
+}
+
+/**
+ * 详情页编辑控件的种类。
+ * 同 AdminFilterKind：用 const 对象 + keyof，不写字面量联合，
+ * 免得 Prettier 折行与 ESLint operator-linebreak 对撞。
+ * - digit / number：uni 的 input type，digit 不带小数点，适合 Community / UserGrade
+ * - date：走原生 <picker mode="date">，产出 yyyy-MM-dd
+ */
+export const ADMIN_FORM_KIND = {
+  TEXT: "text",
+  PASSWORD: "password",
+  NUMBER: "number",
+  DIGIT: "digit",
+  TEXTAREA: "textarea",
+  SWITCH: "switch",
+  DATE: "date",
+} as const;
+
+type FormKinds = typeof ADMIN_FORM_KIND;
+
+export type AdminFormFieldKind = FormKinds[keyof FormKinds];
+
+/** 详情页的一个字段 */
+export interface AdminFormField {
+  label: string;
+  /** 实体上的属性名，编辑时读写 model[prop] */
+  prop: string;
+  /** 编辑控件种类，缺省 text */
+  type?: AdminFormFieldKind;
+  placeholder?: string;
+  required?: boolean;
+  /** 主键一类"编辑态也不许改"的字段：控件保持可见但锁死 */
+  lock?: boolean;
+  /** 只读模式下的显示换算；不给则直接读 model[prop]（date 为真时按日期格式化） */
+  display?: (model: AdminRow) => string;
+  /** 只读模式按日期显示：true 取 yyyy-MM-dd，"datetime" 带时分秒 */
+  date?: boolean | "datetime";
+  maxlength?: number;
+}
+
+/** 详情页的一张卡片（旧 ft-card 的等价物） */
+export interface AdminFormSection {
+  title: string;
+  fields: AdminFormField[];
+}
+
+/**
+ * 详情页底部按钮的描述。
+ * 组件不做权限判定：页面按 canAmend/canDelete/canCreate 组好数组传进来，
+ * 公共组件因此不需要知道任何域的权限名。
+ */
+export interface AdminFormAction {
+  key: string;
+  label: string;
+  /** primary 蓝、error 红（作废/删除），缺省 primary */
+  tone?: "primary" | "error";
+  /** 需要二次确认：走 uni.showModal，H5 与 App 都有原生观感 */
+  confirm?: boolean;
+  /** 只在某一态显示；缺省 both */
+  when?: "view" | "edit";
+}
diff --git a/uniapp/youjiala/src/admin/menu-map.ts b/uniapp/youjiala/src/admin/menu-map.ts
new file mode 100644
index 0000000..04e59f2
--- /dev/null
+++ b/uniapp/youjiala/src/admin/menu-map.ts
@@ -0,0 +1,122 @@
+/**
+ * 后端菜单 -> 本地页面的白名单映射
+ *
+ * 为什么必须有这张表：旧 WebVue 用后端返回的 PageUrl（形如
+ * `/src/views/security/UserEnquiry.vue`）配合 import.meta.glob **动态注册路由**，
+ * 而 uni-app 的页面必须在 pages.json 里静态登记，运行期造不出新页面。
+ * 所以菜单数据只能决定「哪个入口露出来、叫什么名、排第几」，
+ * 落地地址一律由这张白名单给出——白名单里没有的功能直接跳过，
+ * 绝不退化成"按 PageUrl 猜路径"（猜错就是 404，且会把没移植的功能暴露成坏入口）。
+ */
+import type { SecurityFunctionDisplayData } from "@/data/auto/securityFunctionDisplayData";
+import type { PageName } from "@/router/routes";
+
+/**
+ * 可在菜单里点击落地的功能名 -> 本项目页面名。
+ * key 必须逐字等于后端 security_function.function_name（实测取值见 src/md/admin-pages.md）。
+ * 只登记"入口型"功能（*Enquiry）：*Operation 是从列表进详情页，不是菜单入口，
+ * 它们的权限名照样登记进 PAGE_PERMISSIONS，只是不在这里出现。
+ */
+export const MENU_PAGE_MAP: Record<string, PageName> = {
+  UserEnquiry: "userEnquiry",
+  // 角色查询既能从菜单进，也被 user-operation 当选择器跳转（同一页面）
+  ActorEnquiry: "actorEnquiry",
+};
+
+/** u-icon 的图标名必须来自 uview-pro 的内置图标集，否则渲染成空白 */
+const MENU_ICON_MAP: Record<string, string> = {
+  wenjiansousuo: "search",
+  picture: "photo",
+  foldervideo: "play-circle",
+  foldermp3: "volume-up",
+  playmp3: "volume-up",
+  "mp3-play": "volume-up",
+  "rizhi-2": "file-text",
+  "shuazi-1": "reload",
+  yonghu1: "account",
+  fenzu: "tags",
+  dgroup: "grid",
+  anjianguanli: "lock",
+  dbank: "rmb",
+  zhanghuanquan: "integral",
+};
+
+/** 后端 icon 为空或映射不到时的兜底图标（实测 37 条功能里有 7 条 Icon 为空） */
+export const DEFAULT_MENU_ICON = "grid";
+
+/** 菜单图标：后端存的是旧项目 iconfont 的类名后缀，逐个翻译到 u-icon 命名 */
+export function menuIcon(icon: string | undefined): string {
+  const key = String(icon ?? "").trim();
+  return MENU_ICON_MAP[key] ?? DEFAULT_MENU_ICON;
+}
+
+/** 首页入口项（已过滤、已排序、已带落地页名） */
+export interface AdminMenuEntry {
+  /** 后端功能名，同时是排查权限时的关键字 */
+  function: string;
+  /** 落地页面名，交给 pageUrl() 拼地址 */
+  page: PageName;
+  /** 权限名（security_function.permission_name），按钮级判定用它 */
+  permission: string;
+  title: string;
+  icon: string;
+  orderby: number;
+}
+
+/** 中英双语取名：英文态优先 FunctionEngName，缺失时回落中文，两者都空则用功能名 */
+export function menuTitle(
+  row: Pick<
+    SecurityFunctionDisplayData,
+    "FunctionName" | "FunctionLocalName" | "FunctionEngName"
+  >,
+  english: boolean,
+): string {
+  const local = String(row.FunctionLocalName ?? "").trim();
+  const eng = String(row.FunctionEngName ?? "").trim();
+  if (english) {
+    return eng || local || row.FunctionName;
+  }
+  return local || eng || row.FunctionName;
+}
+
+/**
+ * 后端菜单行 -> 首页入口列表。
+ * 三道过滤：白名单认不出的跳过、PageName 没在 PAGE_PATHS 登记的跳过（由调用方判定，
+ * 见 composables/useAdminMenu）、同名功能去重（保留 orderby 更靠前的）。
+ * @param english 是否英文态标题
+ */
+export function mapMenuEntries(
+  rows: SecurityFunctionDisplayData[],
+  english: boolean,
+): AdminMenuEntry[] {
+  const picked = new Map<string, AdminMenuEntry>();
+  for (const row of rows ?? []) {
+    const page = MENU_PAGE_MAP[row.FunctionName];
+    if (!page) {
+      continue;
+    }
+    const entry: AdminMenuEntry = {
+      function: row.FunctionName,
+      page,
+      permission: row.PermissionName ?? "",
+      title: menuTitle(row, english),
+      icon: menuIcon(row.Icon),
+      orderby: Number(row.Orderby ?? 0) || 0,
+    };
+    const exists = picked.get(entry.function);
+    if (!exists || entry.orderby < exists.orderby) {
+      picked.set(entry.function, entry);
+    }
+  }
+  const list = [...picked.values()];
+  list.sort(compareEntry);
+  return list;
+}
+
+/** 排序：先按后端 Orderby（实测种子全是 0，此时等于按登记顺序稳定排列），再按功能名 */
+function compareEntry(a: AdminMenuEntry, b: AdminMenuEntry): number {
+  if (a.orderby !== b.orderby) {
+    return a.orderby - b.orderby;
+  }
+  return a.function.localeCompare(b.function);
+}
diff --git a/uniapp/youjiala/src/components/admin-filter-drawer/admin-filter-drawer.vue b/uniapp/youjiala/src/components/admin-filter-drawer/admin-filter-drawer.vue
new file mode 100644
index 0000000..2a555fa
--- /dev/null
+++ b/uniapp/youjiala/src/components/admin-filter-drawer/admin-filter-drawer.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+/**
+ * 管理端筛选抽屉：一条 BindOption 一行控件，点"确定"才把条件交回上层。
+ *
+ * 为什么不用 v-model 直接改上层数组：
+ * 抽屉里改的是 local（打开时从 items 拷一份），取消就整份丢掉。
+ * 旧 SearchCriteria 是改一下立即查询，手机上极易误触发请求。
+ *
+ * 为什么日期不用 uview 组件：
+ * uview-pro 0.7.1 没有 u-datetime-picker（只有 u-calendar / u-picker），
+ * 而原生 <picker mode="date|time"> 在 H5、App 两端都能用且零依赖，
+ * 所以这里直接用它，值形态由 @/admin/admin-date 补齐成后端要的字符串。
+ */
+import type { PropType } from "vue";
+import type { AdminFilterDraftItem } from "@/admin/admin-types";
+import { useLocale } from "uview-pro";
+import { ref, watch } from "vue";
+import { datePart } from "@/admin/admin-date";
+import {
+    ADMIN_FILTER_QUICK_DAYS,
+    clearDraftItem,
+    draftKind,
+    isDraftFilled,
+    isDraftValueChecked,
+    isRangeDraft,
+    setDraftQuickRange,
+    toggleDraftValue,
+} from "@/admin/admin-filter";
+
+const props = defineProps({
+    /** 抽屉是否展开：靠它触发"重新取快照"，不用 v-if 挂载（u-popup 自己要做进出动画） */
+    show: { type: Boolean, default: false },
+    /** 打开时的初始内容，来自 useAdminList().draft */
+    items: {
+        type: Array as PropType<AdminFilterDraftItem[]>,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits<{
+    (e: "apply", items: AdminFilterDraftItem[]): void;
+    (e: "clearAll"): void;
+    (e: "close"): void;
+}>();
+
+const { t } = useLocale();
+const local = ref<AdminFilterDraftItem[]>([]);
+
+/** 深拷一条：values 是数组，共享引用会让"取消"也污染上层 */
+function cloneItem(item: AdminFilterDraftItem): AdminFilterDraftItem {
+    return {
+        ...item,
+        values: [...item.values],
+        choices: item.choices.map(choice => ({ ...choice })),
+    };
+}
+
+watch(
+    () => props.show,
+    (visible: boolean) => {
+        if (visible) {
+            local.value = props.items.map(cloneItem);
+        }
+    },
+    { immediate: true },
+);
+
+function onDateChange(
+    item: AdminFilterDraftItem,
+    slot: "value" | "value1",
+    event: any,
+): void {
+    // 原生 picker 产出的就是 yyyy-MM-dd，直接存字符串；
+    // DateTime 型要补成当天的起止秒，那一步在 applyDraft 里做（判定层集中，模板不管口径）
+    item[slot] = String(event?.detail?.value ?? "");
+}
+
+/** 布尔型筛选项：草稿里用 "true" / "" 表示，u-switch 只认布尔 */
+function boolValue(item: AdminFilterDraftItem): boolean {
+    return item.value === "true";
+}
+
+function setBoolValue(item: AdminFilterDraftItem, checked: boolean): void {
+    item.value = checked ? "true" : "";
+}
+
+function isActive(item: AdminFilterDraftItem, choice: string): boolean {
+    if (draftKind(item) === "multiple") {
+        return isDraftValueChecked(item, choice);
+    }
+    return item.value === choice;
+}
+
+function pick(item: AdminFilterDraftItem, choice: string): void {
+    if (draftKind(item) === "multiple") {
+        toggleDraftValue(item, choice);
+        return;
+    }
+    // 单选再点一次取消：手机上没有"清除"按钮可点，只能靠再点一次
+    item.value = item.value === choice ? "" : choice;
+}
+
+function confirm(): void {
+    emit("apply", local.value);
+}
+</script>
+
+<template>
+    <u-popup :model-value="props.show" mode="bottom" length="86%" border-radius="20" :safe-area-inset-bottom="true"
+        :closeable="true" close-icon-pos="top-right" @close="emit('close')">
+        <view class="drawer">
+            <view class="drawer-title">
+                <text>
+                    {{ t("AdminPage.filterTitle") }}
+                </text>
+            </view>
+
+            <scroll-view class="drawer-body" scroll-y :show-scrollbar="false">
+                <view v-for="item in local" :key="item.key" class="field">
+                    <view class="field-head">
+                        <text class="field-label">
+                            {{ item.label }}
+                        </text>
+                        <text v-if="isDraftFilled(item)" class="field-clear" @click="clearDraftItem(item)">
+                            {{ t("AdminPage.clearBut") }}
+                        </text>
+                    </view>
+
+                    <!-- 文本 / 数字 -->
+                    <view v-if="draftKind(item) === 'text' || draftKind(item) === 'number'" class="line">
+                        <u-input v-model="item.value" :type="draftKind(item) === 'number' ? 'number' : 'text'"
+                            :placeholder="item.label" :border="true" clearable />
+                        <template v-if="isRangeDraft(item)">
+                            <text class="line-sep">
+                                ~
+                            </text>
+                            <u-input v-model="item.value1" type="number" :placeholder="t('AdminPage.endPlaceholder')"
+                                :border="true" />
+                        </template>
+                    </view>
+
+                    <!-- 日期 / 日期时间：原生 picker 的取值是字符串，不需要再格式化 -->
+                    <view v-else-if="draftKind(item) === 'date' || draftKind(item) === 'datetime'" class="dates">
+                        <view class="line">
+                            <picker mode="date" :value="datePart(item.value)"
+                                @change="onDateChange(item, 'value', $event)">
+                                <view class="picker-box">
+                                    <text :class="{ 'is-empty': !item.value }">
+                                        {{ item.value || t("AdminPage.startPlaceholder") }}
+                                    </text>
+                                </view>
+                            </picker>
+                            <template v-if="isRangeDraft(item)">
+                                <text class="line-sep">
+                                    ~
+                                </text>
+                                <picker mode="date" :value="datePart(item.value1)"
+                                    @change="onDateChange(item, 'value1', $event)">
+                                    <view class="picker-box">
+                                        <text :class="{ 'is-empty': !item.value1 }">
+                                            {{ item.value1 || t("AdminPage.endPlaceholder") }}
+                                        </text>
+                                    </view>
+                                </picker>
+                            </template>
+                        </view>
+                        <view v-if="isRangeDraft(item)" class="quick">
+                            <view v-for="days in ADMIN_FILTER_QUICK_DAYS" :key="days" class="choice"
+                                @click="setDraftQuickRange(item, days)">
+                                <text>
+                                    {{ t("AdminPage.quickDays", { days }) }}
+                                </text>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 布尔型 -->
+                    <view v-else-if="draftKind(item) === 'switch'" class="line">
+                        <u-switch :model-value="boolValue(item)" @change="setBoolValue(item, $event)" />
+                    </view>
+
+                    <!-- 候选项：单选与多选都用 chip，避免 u-radio/u-checkbox 的 name-value 歧义 -->
+                    <view v-else class="choices">
+                        <view v-for="choice in item.choices" :key="choice.value" class="choice"
+                            :class="{ 'is-active': isActive(item, choice.value) }" @click="pick(item, choice.value)">
+                            <text>
+                                {{ choice.label }}
+                            </text>
+                        </view>
+                        <view v-if="!item.choices.length" class="line">
+                            <u-input v-model="item.value" :placeholder="item.label" :border="true" clearable />
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+
+            <view class="drawer-foot">
+                <u-button shape="circle" :text="t('AdminPage.clearAllBut')" @click="emit('clearAll')" />
+                <u-button shape="circle" :text="t('AdminPage.cancelBut')" @click="emit('close')" />
+                <u-button type="primary" shape="circle" :text="t('AdminPage.confirmBut')" @click="confirm" />
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<style lang="scss" scoped>
+.drawer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0 28rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+}
+
+.drawer-title {
+    padding: 32rpx 0 12rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: $u-main-color;
+    text-align: center;
+}
+
+.drawer-body {
+    flex: 1;
+    min-height: 0;
+}
+
+.field {
+    padding: 20rpx 0 8rpx;
+    border-bottom: 1rpx solid $u-border-color;
+}
+
+.field-head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14rpx;
+}
+
+.field-label {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: $u-main-color;
+}
+
+.field-clear {
+    font-size: 24rpx;
+    color: $u-type-primary;
+}
+
+.line {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.line-sep {
+    margin: 0 12rpx;
+    color: $u-tips-color;
+}
+
+.dates {
+    padding-bottom: 8rpx;
+}
+
+.picker-box {
+    min-width: 240rpx;
+    padding: 14rpx 20rpx;
+    font-size: 26rpx;
+    color: $u-main-color;
+    background-color: $u-bg-color;
+    border-radius: 12rpx;
+
+    .is-empty {
+        color: $u-tips-color;
+    }
+}
+
+.quick,
+.choices {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 12rpx;
+}
+
+.choice {
+    padding: 12rpx 28rpx;
+    margin: 8rpx 14rpx 8rpx 0;
+    font-size: 24rpx;
+    color: $u-content-color;
+    background-color: $u-bg-color;
+    border: 1rpx solid transparent;
+    border-radius: 999rpx;
+
+    &.is-active {
+        color: $u-type-primary;
+        background-color: $u-type-primary-light;
+        border-color: $u-type-primary;
+    }
+}
+
+.drawer-foot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 0 16rpx;
+    gap: 20rpx;
+}
+</style>
diff --git a/uniapp/youjiala/src/components/admin-form/admin-form.vue b/uniapp/youjiala/src/components/admin-form/admin-form.vue
new file mode 100644
index 0000000..a5df7a1
--- /dev/null
+++ b/uniapp/youjiala/src/components/admin-form/admin-form.vue
@@ -0,0 +1,324 @@
+<script setup lang="ts">
+/**
+ * 管理端详情页模板：浅色英雄卡 + iOS 分组行 + 明细插槽 + 动作条
+ *
+ * 对应旧 WebVue 的 ft-page / ft-hero / ft-card / ft-field 一套 CSS 结构
+ * （GroupOperation、UserOperation 这些页面本来就已经是单列卡片流，
+ * 所以详情页属于"翻译"而不是"重写"，机械部分抽到这里）。
+ *
+ * 视觉走 iOS/微信「设置」式：分组卡片内一行一个字段，标签靠左、值靠右，
+ * 行间细线分隔；空值统一显示"暂无"而不是刺眼的"-"。
+ *
+ * 组件不判权限：按钮由页面按 canAmend/canDelete/canCreate 组好 actions 数组传进来。
+ * 这样公共组件不需要知道任何一个域的权限名，换域移植时零改动。
+ */
+import type { PropType } from "vue";
+import type {
+    AdminFormAction,
+    AdminFormField,
+    AdminFormSection,
+    AdminRow,
+} from "@/admin/admin-types";
+import { useLocale } from "uview-pro";
+import { computed } from "vue";
+import { EMPTY_CELL_TEXT } from "@/admin/admin-column";
+import { datePart, formatDate } from "@/admin/admin-date";
+
+const props = defineProps({
+    navTitle: { type: String, default: "" },
+    showNavBack: { type: Boolean, default: true },
+    /** 顶部卡的主标题（旧 ft-hero-name） */
+    heroTitle: { type: String, default: "" },
+    /** 顶部卡的副信息（旧 ft-chip），如"账号 xxx" */
+    heroChips: { type: Array as PropType<string[]>, default: () => [] },
+    sections: { type: Array as PropType<AdminFormSection[]>, default: () => [] },
+    /** 页面持有的数据对象（SecurityUserData.SecurityUser 之类），字段直接读写它 */
+    model: { type: Object as PropType<AdminRow>, default: () => ({}) },
+    readonly: { type: Boolean, default: true },
+    actions: { type: Array as PropType<AdminFormAction[]>, default: () => [] },
+});
+
+const emit = defineEmits<{
+    (e: "back"): void;
+    (e: "action", action: AdminFormAction): void;
+    /** 字段改写走事件回给页面：组件不 mutate props.model（vue/no-mutating-props） */
+    (e: "field-change", prop: string, value: unknown): void;
+}>();
+
+const { t } = useLocale();
+
+/** 只按当前态筛按钮：编辑态不该还能点"修改"，只读态不该还能点"保存" */
+function actionVisible(action: AdminFormAction): boolean {
+    if (!action.when) {
+        return true;
+    }
+    return action.when === (props.readonly ? "view" : "edit");
+}
+
+const visibleActions = computed(() => props.actions.filter(actionVisible));
+
+function rawValue(field: AdminFormField): unknown {
+    return props.model?.[field.prop];
+}
+
+/** 只读态的显示文本：display 优先，其次日期格式化，最后原值；空值统一"未设置" */
+function displayValue(field: AdminFormField): string {
+    const empty = t("AdminPage.notSetTip");
+    if (field.display) {
+        return field.display(props.model) || empty;
+    }
+    const raw = rawValue(field);
+    if (raw === null || raw === undefined || raw === "") {
+        return empty;
+    }
+    if (field.date) {
+        return formatDate(raw as Date, field.date === "datetime") || empty;
+    }
+    return String(raw);
+}
+
+/** 编辑态控件的值：统一成字符串，switch 例外（u-switch 只吃布尔） */
+function inputValue(field: AdminFormField): string {
+    const raw = rawValue(field);
+    if (raw === null || raw === undefined) {
+        return "";
+    }
+    return String(raw);
+}
+
+function switchValue(field: AdminFormField): boolean {
+    const raw = rawValue(field);
+    return raw === true || raw === "Y" || raw === "true" || raw === 1;
+}
+
+function setInputValue(field: AdminFormField, value: unknown): void {
+    emit("field-change", field.prop, value);
+}
+
+function onDateChange(field: AdminFormField, event: any): void {
+    setInputValue(field, String(event?.detail?.value ?? ""));
+}
+
+function onTapAction(action: AdminFormAction): void {
+    if (action.confirm) {
+        uni.showModal({
+            title: t("AdminPage.confirmDeleteTitle"),
+            success: (res: any) => {
+                if (res.confirm) {
+                    emit("action", action);
+                }
+            },
+        });
+        return;
+    }
+    emit("action", action);
+}
+</script>
+
+<template>
+    <view class="admin-form">
+        <u-navbar v-if="navTitle" :title="navTitle" :is-back="showNavBack" :is-fixed="false" :immersive="false"
+            back-icon-name="arrow-leftward" @left-click="emit('back')" />
+
+        <scroll-view class="form-body" scroll-y :show-scrollbar="false">
+            <view class="hero">
+                <text class="hero-title">
+                    {{ heroTitle || EMPTY_CELL_TEXT }}
+                </text>
+                <view v-if="heroChips.length" class="hero-chips">
+                    <text v-for="chip in heroChips" :key="chip" class="hero-chip">
+                        {{ chip }}
+                    </text>
+                </view>
+            </view>
+
+            <view v-for="section in sections" :key="section.title" class="group">
+                <text class="group-title">
+                    {{ section.title }}
+                </text>
+                <view class="group-card">
+                    <view v-for="field in section.fields" :key="field.prop" class="row">
+                        <view class="row-label">
+                            <text>
+                                {{ field.label }}
+                            </text>
+                            <text v-if="field.required && !readonly" class="row-required">
+                                *
+                            </text>
+                        </view>
+
+                        <!-- 只读：值右对齐，与标签同一行（iOS 设置式） -->
+                        <text v-if="readonly" class="row-value">
+                            {{ displayValue(field) }}
+                        </text>
+
+                        <!-- 编辑：控件右对齐占位 -->
+                        <view v-else class="row-control">
+                            <u-switch v-if="field.type === 'switch'" :model-value="switchValue(field)"
+                                :disabled="field.lock" @change="setInputValue(field, $event)" />
+                            <u-textarea v-else-if="field.type === 'textarea'" :model-value="inputValue(field)"
+                                :disabled="field.lock" :placeholder="field.placeholder || field.label"
+                                :maxlength="field.maxlength ?? 200" @input="setInputValue(field, $event)" />
+                            <picker v-else-if="field.type === 'date'" mode="date" :value="datePart(inputValue(field))"
+                                :disabled="field.lock" @change="onDateChange(field, $event)">
+                                <view class="picker-box" :class="{ 'is-empty': !inputValue(field) }">
+                                    <text>
+                                        {{ inputValue(field) || field.placeholder || t('AdminPage.notSetTip') }}
+                                    </text>
+                                    <u-icon name="arrow-right" size="24" color="#c4c8cf" />
+                                </view>
+                            </picker>
+                            <!-- uview-pro 的 u-input border 是布尔，不是旧 uview 的 'surround' 字符串 -->
+                            <u-input v-else :model-value="inputValue(field)" :type="field.type || 'text'"
+                                :disabled="field.lock" :border="false" input-align="right"
+                                :placeholder="field.placeholder || field.label" :maxlength="field.maxlength ?? -1"
+                                @input="setInputValue(field, $event)" />
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 明细区（角色、成员、附件等子表）由页面自己画 -->
+            <slot name="extra" :readonly="readonly" />
+        </scroll-view>
+
+        <view v-if="visibleActions.length" class="foot">
+            <u-button v-for="action in visibleActions" :key="action.key" shape="circle"
+                :type="action.tone === 'error' ? 'error' : 'primary'" :plain="action.tone !== 'error'"
+                :text="action.label" @click="onTapAction(action)" />
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.admin-form {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: $u-bg-color;
+}
+
+.form-body {
+    flex: 1;
+    min-height: 0;
+    padding: 24rpx;
+    box-sizing: border-box;
+}
+
+.hero {
+    padding: 32rpx 28rpx;
+    margin-bottom: 28rpx;
+    color: #ffffff;
+    background: linear-gradient(135deg, $u-type-primary-dark, $u-type-primary);
+    border-radius: 24rpx;
+    box-shadow: 0 8rpx 24rpx rgba(5, 150, 105, 0.22);
+}
+
+.hero-title {
+    font-size: 40rpx;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+
+.hero-chips {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 16rpx;
+}
+
+.hero-chip {
+    padding: 6rpx 18rpx;
+    margin: 8rpx 12rpx 0 0;
+    font-size: 22rpx;
+    background-color: rgba(255, 255, 255, 0.22);
+    border-radius: 20rpx;
+}
+
+.group {
+    margin-bottom: 28rpx;
+}
+
+.group-title {
+    padding: 0 12rpx 12rpx;
+    font-size: 24rpx;
+    color: $u-tips-color;
+}
+
+.group-card {
+    padding: 0 28rpx;
+    overflow: hidden;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+}
+
+/* 一行一字段：标签靠左、值靠右，行间细线（最后一条不画线） */
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 92rpx;
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid $u-border-color;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.row-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: 28rpx;
+    color: $u-main-color;
+}
+
+.row-required {
+    margin-left: 6rpx;
+    color: $u-type-error;
+}
+
+.row-value {
+    max-width: 60%;
+    font-size: 28rpx;
+    color: $u-content-color;
+    text-align: right;
+}
+
+.row-control {
+    flex: 1;
+    min-width: 0;
+    text-align: right;
+}
+
+.picker-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 28rpx;
+    color: $u-main-color;
+
+    &.is-empty {
+        color: $u-tips-color;
+    }
+
+    text {
+        margin-right: 8rpx;
+    }
+}
+
+.foot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 20rpx 28rpx;
+    background-color: #ffffff;
+    border-top: 1rpx solid $u-border-color;
+    gap: 20rpx;
+}
+</style>
diff --git a/uniapp/youjiala/src/components/admin-list/admin-list.vue b/uniapp/youjiala/src/components/admin-list/admin-list.vue
new file mode 100644
index 0000000..6b70c93
--- /dev/null
+++ b/uniapp/youjiala/src/components/admin-list/admin-list.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+/**
+ * 管理端列表页模板：z-paging + iOS/微信设置式卡片 + 筛选入口 + 长按多选
+ *
+ * 这是"移植模式不移植框架"的主要落点：旧 WebVue 的 SearchCard(876 行)
+ * 面向桌面多列网格，列配置、打印、排序表头、行选择一整套；
+ * 手机上真正要保留的只有三件事——分页取数、条件筛选、选中若干条做动作。
+ *
+ * 视觉走 iOS/微信「设置」式：白卡片 + 左固定标签列右跟值，
+ * 不再用「标签靠左 / 值靠右」两端对齐（那会在中间拉出一大片空白，很廉价）。
+ *
+ * 与 useAdminList 的分工：
+ * - useAdminList 管"条件与请求"（纯判定，node 下可测）；
+ * - 本组件管"翻页、下拉、渲染、选中"，不认识 service，也不认识权限；
+ * - 权限按钮一律由页面通过插槽给，组件内不做任何 canXxx 判定，
+ *   否则每个域都要改一遍这个公共组件。
+ */
+import type { PropType } from "vue";
+import type {
+    AdminColumn,
+    AdminFilterDraftItem,
+    AdminLoadResult,
+    AdminRow,
+} from "@/admin/admin-types";
+import { useLocale } from "uview-pro";
+import { computed, ref, watch } from "vue";
+import {
+    cellText,
+    pickTitleColumn,
+    restColumns,
+    rowKeyOf,
+} from "@/admin/admin-column";
+
+/** 列表取数：只给页码与每页条数，条件由上层闭包注入（见 useAdminList.query） */
+type AdminListLoader = (page: number, pageSize: number) => Promise<AdminLoadResult>;
+
+const props = defineProps({
+    /** 顶栏标题；空字符串表示页面自己画头部 */
+    navTitle: { type: String, default: "" },
+    showNavBack: { type: Boolean, default: true },
+    /** 卡片显示项（旧表格列的等价物） */
+    columns: { type: Array as PropType<AdminColumn[]>, required: true },
+    loader: { type: Function as PropType<AdminListLoader>, required: true },
+    pageSize: { type: Number, default: 20 },
+    /** 行唯一标识的字段名；留空取 columns[0].prop，再取不到就用下标 */
+    rowKey: { type: String, default: "" },
+    /** 卡片主标题字段名；留空取 columns[0] */
+    titleKey: { type: String, default: "" },
+    keyword: { type: String, default: "" },
+    filterCount: { type: Number, default: 0 },
+    filterVisible: { type: Boolean, default: false },
+    filterItems: {
+        type: Array as PropType<AdminFilterDraftItem[]>,
+        default: () => [],
+    },
+    /** 开启后长按卡片进入多选，底部出现操作条（操作条内容走 actions 插槽） */
+    selectable: { type: Boolean, default: false },
+    /** 页面每变一次就重新拉第一页（筛选生效、删除/保存后的刷新都走这里） */
+    searchToken: { type: Number, default: 0 },
+    /**
+     * 是否在挂载时自动查询。默认 false：
+     * 列表页的取数要排在登录守卫之后（见 useAuthGuard 的 onAuthorized），
+     * 否则未登录时会先打一发必然 401 的请求，错误弹窗和跳转一起出现。
+     */
+    auto: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+    (e: "update:keyword", value: string): void;
+    (e: "search"): void;
+    (e: "open-filter"): void;
+    (e: "close-filter"): void;
+    (e: "apply-filter", items: AdminFilterDraftItem[]): void;
+    (e: "clear-filter"): void;
+    (e: "row-tap", row: AdminRow): void;
+    (e: "selection-change", rows: AdminRow[]): void;
+}>();
+
+const { t } = useLocale();
+const paging = ref<any>(null);
+const rows = ref<AdminRow[]>([]);
+const selectedKeys = ref<string[]>([]);
+const selectMode = ref(false);
+
+const keywordModel = computed({
+    get: () => props.keyword,
+    set: (value: string) => emit("update:keyword", value),
+});
+
+const titleColumn = computed(() => pickTitleColumn(props.columns, props.titleKey));
+const bodyColumns = computed(() => restColumns(props.columns, props.titleKey));
+
+function keyOf(row: AdminRow): string {
+    const fallback = props.columns.length ? props.columns[0].prop : "";
+    return rowKeyOf(row, props.rowKey || fallback, rows.value.indexOf(row));
+}
+
+function isSelected(row: AdminRow): boolean {
+    return selectedKeys.value.includes(keyOf(row));
+}
+
+const selectedRows = computed(() =>
+    rows.value.filter(row => selectedKeys.value.includes(keyOf(row))),
+);
+
+const allSelected = computed(
+    () => rows.value.length > 0 && selectedRows.value.length === rows.value.length,
+);
+
+function clearSelection(): void {
+    selectedKeys.value = [];
+    selectMode.value = false;
+    emit("selection-change", []);
+}
+
+function toggleSelect(row: AdminRow): void {
+    const key = keyOf(row);
+    const next = selectedKeys.value.filter(item => item !== key);
+    // filter 后长度没变说明原本没选中，那就加上
+    if (next.length === selectedKeys.value.length) {
+        next.push(key);
+    }
+    selectedKeys.value = next;
+    emit("selection-change", rows.value.filter(item => next.includes(keyOf(item))));
+}
+
+function toggleSelectAll(): void {
+    if (allSelected.value) {
+        clearSelection();
+        return;
+    }
+    selectedKeys.value = rows.value.map(row => keyOf(row));
+    emit("selection-change", [...rows.value]);
+}
+
+function onLongPress(row: AdminRow): void {
+    if (!props.selectable) {
+        return;
+    }
+    selectMode.value = true;
+    toggleSelect(row);
+}
+
+async function onQuery(page: number, pageSize: number): Promise<void> {
+    try {
+        const result = await props.loader(page, pageSize);
+        if (page === 1) {
+            clearSelection();
+        }
+        paging.value?.completeByTotal(result.rows, result.total);
+    }
+    catch {
+        // 提示已由 http.interceptor 与全局错误边界统一弹过，这里只需让 z-paging 结束转圈
+        paging.value?.complete(false);
+    }
+}
+
+// 条件变了 / 数据变更后刷新：reload 会回到第 1 页并重新触发 @query
+watch(
+    () => props.searchToken,
+    () => {
+        paging.value?.reload();
+    },
+);
+
+function refresh(): void {
+    paging.value?.reload();
+}
+
+defineExpose({ refresh, clearSelection, selectedRows });
+</script>
+
+<template>
+    <view class="admin-list">
+        <z-paging ref="paging" v-model="rows" :auto="auto" :default-page-size="pageSize" :refresher-enabled="true"
+            :loading-more-enabled="true" :empty-view-text="t('AdminPage.emptyText')" @query="onQuery">
+            <template #top>
+                <u-navbar v-if="navTitle" :title="navTitle" :is-back="showNavBack" :is-fixed="false" :immersive="false"
+                    back-icon-name="arrow-leftward" />
+                <view class="toolbar">
+                    <view class="toolbar-search">
+                        <u-search v-model="keywordModel" :placeholder="t('AdminPage.searchPlaceholder')"
+                            :show-action="false" :animation="false" @search="emit('search')" @clear="emit('search')" />
+                    </view>
+                    <view class="filter-entry" :class="{ 'is-active': filterCount }" @click="emit('open-filter')">
+                        <u-icon name="list" size="40" />
+                        <text v-if="filterCount" class="filter-badge">
+                            {{ filterCount }}
+                        </text>
+                    </view>
+                </view>
+                <view v-if="$slots.toolbar" class="toolbar-extra">
+                    <slot name="toolbar" />
+                </view>
+            </template>
+
+            <view v-for="row in rows" :key="keyOf(row)" class="card"
+                :class="{ 'is-picking': selectMode, 'is-selected': isSelected(row) }"
+                @click="selectMode ? toggleSelect(row) : emit('row-tap', row)" @longpress="onLongPress(row)">
+                <view v-if="selectMode" class="card-check" :class="{ 'is-on': isSelected(row) }">
+                    <u-icon v-if="isSelected(row)" name="checkbox-mark" size="24" color="#ffffff" />
+                </view>
+                <view class="card-main">
+                    <view class="card-head">
+                        <text class="card-title">
+                            {{ cellText(row, titleColumn as AdminColumn) }}
+                        </text>
+                        <u-icon v-if="!selectMode" name="arrow-right" size="24" color="#c4c8cf" />
+                    </view>
+                    <slot name="card" :row="row">
+                        <view class="card-meta">
+                            <view v-for="column in bodyColumns" :key="column.prop" class="meta-line">
+                                <text class="meta-label">
+                                    {{ column.label }}
+                                </text>
+                                <text class="meta-value">
+                                    {{ cellText(row, column) }}
+                                </text>
+                            </view>
+                        </view>
+                    </slot>
+                </view>
+            </view>
+
+            <template #bottom>
+                <view v-if="selectMode && selectable" class="action-bar">
+                    <view class="action-info" @click="toggleSelectAll">
+                        <text class="action-toggle">
+                            {{ allSelected ? t("AdminPage.unselectAllBut") : t("AdminPage.selectAllBut") }}
+                        </text>
+                        <text class="action-count">
+                            {{ t("AdminPage.selectedText", { count: selectedRows.length }) }}
+                        </text>
+                    </view>
+                    <slot name="actions" :rows="selectedRows" />
+                    <view class="action-cancel" @click="clearSelection">
+                        <text>
+                            {{ t("AdminPage.cancelBut") }}
+                        </text>
+                    </view>
+                </view>
+            </template>
+        </z-paging>
+
+        <admin-filter-drawer :show="filterVisible" :items="filterItems"
+            @apply="(items: AdminFilterDraftItem[]) => emit('apply-filter', items)" @close="emit('close-filter')"
+            @clear-all="emit('clear-filter')" />
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.admin-list {
+    width: 100%;
+    height: 100vh;
+    background-color: $u-bg-color;
+}
+
+.toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background-color: #ffffff;
+}
+
+.toolbar-search {
+    flex: 1;
+    min-width: 0;
+}
+
+.filter-entry {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 64rpx;
+    height: 64rpx;
+    margin-left: 12rpx;
+    color: $u-tips-color;
+    background-color: $u-bg-color;
+    border-radius: 16rpx;
+
+    &.is-active {
+        color: $u-type-primary;
+        background-color: $u-type-primary-light;
+    }
+}
+
+.filter-badge {
+    position: absolute;
+    top: -6rpx;
+    right: -6rpx;
+    min-width: 30rpx;
+    height: 30rpx;
+    padding: 0 6rpx;
+    font-size: 20rpx;
+    line-height: 30rpx;
+    color: #ffffff;
+    text-align: center;
+    background-color: $u-type-error;
+    border-radius: 16rpx;
+}
+
+/* 页面自定义的次级工具（如"新增"）走白底一行，与搜索栏区分 */
+.toolbar-extra {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 4rpx 24rpx 16rpx;
+    background-color: #ffffff;
+    border-bottom: 1rpx solid $u-border-color;
+}
+
+.card {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 24rpx 28rpx;
+    margin: 20rpx 24rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(17, 24, 39, 0.05);
+
+    &.is-selected {
+        box-shadow: inset 0 0 0 2rpx $u-type-primary;
+    }
+}
+
+.card-check {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 40rpx;
+    margin-top: 4rpx;
+    margin-right: 18rpx;
+    border: 2rpx solid #d3d6db;
+    border-radius: 50%;
+
+    &.is-on {
+        background-color: $u-type-primary;
+        border-color: $u-type-primary;
+    }
+}
+
+.card-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.card-head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.card-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: $u-main-color;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.card-meta {
+    margin-top: 10rpx;
+}
+
+.meta-line {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    margin-top: 6rpx;
+}
+
+/* 左固定标签列 + 右跟值（左对齐），避免两端对齐拉出中间空白 */
+.meta-label {
+    flex-shrink: 0;
+    width: 132rpx;
+    font-size: 24rpx;
+    color: $u-tips-color;
+}
+
+.meta-value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 26rpx;
+    color: $u-content-color;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.action-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16rpx 28rpx;
+    background-color: #ffffff;
+    border-top: 1rpx solid $u-border-color;
+}
+
+.action-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.action-toggle {
+    font-size: 26rpx;
+    color: $u-type-primary;
+}
+
+.action-count {
+    margin-top: 4rpx;
+    font-size: 22rpx;
+    color: $u-tips-color;
+}
+
+.action-cancel {
+    padding: 10rpx 24rpx;
+    font-size: 26rpx;
+    color: $u-content-color;
+}
+</style>
diff --git a/uniapp/youjiala/src/composables/index.ts b/uniapp/youjiala/src/composables/index.ts
index 8beb140..cfbeaa6 100644
--- a/uniapp/youjiala/src/composables/index.ts
+++ b/uniapp/youjiala/src/composables/index.ts
@@ -1,2 +1,5 @@
+export * from "./useAdminList";
+export * from "./useAdminMenu";
+export * from "./useAdminPick";
 export * from "./useAuthGuard";
 export * from "./useLang";
diff --git a/uniapp/youjiala/src/composables/useAdminList.ts b/uniapp/youjiala/src/composables/useAdminList.ts
new file mode 100644
index 0000000..5098b5c
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useAdminList.ts
@@ -0,0 +1,130 @@
+/**
+ * 管理端列表页的共用状态机：筛选条 + 分页取数 + 抽屉草稿
+ *
+ * 它取代的是旧 WebVue 每个 Enquiry 页里重复三遍的东西：
+ * initBindOption()、onSubmit/onPagination/onReload 三件套、以及
+ * SearchCard 内部维护的 pagingParams/result/isSearched。
+ * 页面只需要提供两样东西：bindOptions（筛选项登记）和 loader（怎么取数）。
+ *
+ * 分工边界（重要）：
+ * - 本 composable 不认识 z-paging，也不认识 uni.*：它只把"一次查询"表达成
+ *   query(page, limit) -> Promise<rows>，翻页/下拉刷新/完成回调都归 admin-list；
+ *   这样内核逻辑在 node 下可测（见 src/admin/admin-filter.ts），
+ *   而组件库里那一堆 ref 时序问题不会污染判定逻辑。
+ * - 筛选走"草稿"模式：抽屉打开时拿到的是一份快照（draft），点确定才 applyDraft 写回
+ *   bindOptions，点取消/关闭直接丢弃。旧 WebVue 是直接改 BindOption 并立即查询，
+ *   手机上打字中途误触就发请求，体验和数据都脏。
+ * - draft 是 computed 而不是 ref：admin-list 用 v-if 挂载抽屉，
+ *   每次打开都重新取快照，不存在"抽屉里留着上一次的半截输入"这种状态。
+ */
+import type {
+  AdminFilterDraftItem,
+  AdminLoader,
+  AdminLoadResult,
+  AdminQuery,
+} from "@/admin/admin-types";
+import type { BindOption } from "@/data/custom/bindOption";
+import { computed, ref } from "vue";
+import {
+  activeFilterCount,
+  applyDraft,
+  buildFilters,
+  clearFilters,
+  toDraft,
+} from "@/admin/admin-filter";
+
+export interface UseAdminListOptions {
+  /** 页面登记的筛选项（引用传入，本 composable 只读写它的取值字段） */
+  bindOptions: BindOption[];
+  /** 取数：由页面闭包具体的 service 与 criteria 类型 */
+  loader: AdminLoader;
+  /** 每页条数，默认 20，与旧页面的 pagingParams.pageSize 一致 */
+  pageSize?: number;
+  /** 默认排序列与方向（后端 orderbytag 只取前 4 个字符，asc/desc） */
+  orderby?: string;
+  orderbytag?: string;
+}
+
+export function useAdminList(options: UseAdminListOptions) {
+  const limit = options.pageSize ?? 20;
+  const total = ref(0);
+  const busy = ref(false);
+  const filterVisible = ref(false);
+  /** 自增即触发 admin-list 重新拉第一页：筛选生效的唯一出口 */
+  const searchToken = ref(0);
+
+  /** 当前已生效的筛选条件（不是草稿），每次请求现算，避免和抽屉改动静偶合 */
+  const filters = computed(() => buildFilters(options.bindOptions));
+  const filterCount = computed(() => activeFilterCount(options.bindOptions));
+  /** 抽屉打开时的初始内容快照 */
+  const draft = computed(() => toDraft(options.bindOptions));
+
+  /** admin-list 的 @query 直接绑这里：补齐 filters / orderby 后转给页面的 loader */
+  async function query(
+    page: number,
+    pageSize: number,
+  ): Promise<AdminLoadResult> {
+    busy.value = true;
+    try {
+      const merged: AdminQuery = {
+        page,
+        limit: pageSize || limit,
+        filters: filters.value,
+        orderby: options.orderby,
+        orderbytag: options.orderbytag,
+      };
+      const result = await options.loader(merged);
+      total.value = result.total;
+      return result;
+    } finally {
+      busy.value = false;
+    }
+  }
+
+  /** 草稿写回并重新查询（回到第 1 页：条件变了还停在第 5 页一定是空列表） */
+  function applyFilter(items: AdminFilterDraftItem[]): void {
+    applyDraft(options.bindOptions, items);
+    filterVisible.value = false;
+    searchToken.value += 1;
+  }
+
+  /** 清空全部条件并重查：旧页面的 onReset + onSearch 合并 */
+  function clearFiltersAndSearch(): void {
+    clearFilters(options.bindOptions);
+    filterVisible.value = false;
+    searchToken.value += 1;
+  }
+
+  /** 只关掉抽屉，不改任何已生效的条件 */
+  function closeFilter(): void {
+    filterVisible.value = false;
+  }
+
+  function openFilter(): void {
+    filterVisible.value = true;
+  }
+
+  /** 手动重查当前条件（删除/保存成功后要刷新列表） */
+  function reload(): void {
+    searchToken.value += 1;
+  }
+
+  return {
+    limit,
+    total,
+    busy,
+    filters,
+    draft,
+    filterCount,
+    filterVisible,
+    searchToken,
+    query,
+    openFilter,
+    closeFilter,
+    applyFilter,
+    clearFiltersAndSearch,
+    reload,
+  };
+}
+
+export type AdminListState = ReturnType<typeof useAdminList>;
diff --git a/uniapp/youjiala/src/composables/useAdminMenu.ts b/uniapp/youjiala/src/composables/useAdminMenu.ts
new file mode 100644
index 0000000..6712562
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useAdminMenu.ts
@@ -0,0 +1,89 @@
+/**
+ * 首页入口菜单：后端按用户过滤的菜单 + 本地白名单 + 本地权限复核
+ *
+ * 数据源选择（实测结论，别再改回去）：
+ * - /SecurityUser/FindMenuByUsername：**按当前用户授权过滤**，返回
+ *   SecurityFunctionResultData.SecurityFunctionDisplayDatas（含 FunctionLocalName /
+ *   FunctionEngName / Icon / Orderby / PermissionName），这是唯一能直接渲染入口的形态。
+ *   后端链路是 user -> actor -> group -> group_permission -> permission_function_map
+ *   -> function；UserId 为空时**直接返回 null**（不是空数组），这里要吃得下。
+ * - /SecurityFunction/FindMenus：**不区分用户的全量表**，旧项目只用来注册路由。
+ *   拿它做菜单会把没授权的功能也列出来，所以这里坚决不用它兜底。
+ *   菜单拉不到就是拉不到，让用户重试或重新登录，而不是给一个必然 403 的入口。
+ *
+ * 两道本地过滤，缺一不可：
+ * 1. mapMenuEntries 只认 menu-map.ts 白名单里的功能——没移植的页面不该出现入口；
+ * 2. canVisitPage 再判一次：菜单接口有缓存、档案也可能比菜单新，
+ *    入口点下去才 403 是最难排查的那种 bug。
+ */
+import type { AdminMenuEntry } from "@/admin/menu-map";
+import type { SecurityFunctionDisplayData } from "@/data/auto/securityFunctionDisplayData";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { mapMenuEntries } from "@/admin/menu-map";
+import { UI_LOCALE_EN } from "@/common/locale-const";
+import { canVisitPage } from "@/permission/permission-context";
+import securityUserService from "@/service/security/securityUserService";
+import { useLoginProfileStore } from "@/stores";
+
+/** 模块级缓存：菜单在一次登录会话里基本不变，首页反复 onShow 不该重复打接口 */
+let cached: AdminMenuEntry[] | null = null;
+/** 缓存归属的账号：换登录人必须重取，否则会把上一个人的入口给下一个人 */
+let cachedFor = "";
+
+const entries = ref<AdminMenuEntry[]>([]);
+const loading = ref(false);
+const errorText = ref("");
+
+/** 取菜单行的数组：后端无权限/未关联用户时返回的是 null 或空对象，都要归一成 [] */
+function menuRows(data: any): SecurityFunctionDisplayData[] {
+  const rows = data?.SecurityFunctionDisplayDatas;
+  return Array.isArray(rows) ? rows : [];
+}
+
+export function useAdminMenu() {
+  const store = useLoginProfileStore();
+  const { currentLocale } = useLocale();
+  const english = computed(
+    () => (currentLocale.value?.name ?? "") === UI_LOCALE_EN,
+  );
+
+  /** 可见入口：白名单 + 本地权限判定后的结果 */
+  const visible = computed(() =>
+    entries.value.filter((item) => canVisitPage(item.page)),
+  );
+
+  async function refresh(force = false): Promise<AdminMenuEntry[]> {
+    const account = String(store.username ?? "");
+    if (!force && cached && cachedFor === account) {
+      entries.value = cached;
+      return cached;
+    }
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const data = await securityUserService.FindMenuByUsername();
+      const mapped = mapMenuEntries(menuRows(data), english.value);
+      cached = mapped;
+      cachedFor = account;
+      entries.value = mapped;
+      return mapped;
+    } catch (error: any) {
+      // 提示已由 http.interceptor / 全局错误边界统一处理，这里只留状态给页面显示重试
+      errorText.value = String(error?.message ?? error ?? "");
+      cached = null;
+      return entries.value;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** 退出登录后清缓存：否则换个账号登录还会闪一下前一个人的入口 */
+  function clearCache(): void {
+    cached = null;
+    cachedFor = "";
+    entries.value = [];
+  }
+
+  return { entries, visible, loading, errorText, english, refresh, clearCache };
+}
diff --git a/uniapp/youjiala/src/composables/useAdminPick.ts b/uniapp/youjiala/src/composables/useAdminPick.ts
new file mode 100644
index 0000000..414c492
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useAdminPick.ts
@@ -0,0 +1,108 @@
+/**
+ * 管理端"选择页"回传协议
+ *
+ * 旧 WebVue 的做法：Operation 页面里塞一个 `<dragModal>`，内嵌 Enquiry 组件，
+ * 用 provide/inject（operationToEnquiryMethodKey + isModalUser/selectionTypeUser）
+ * 双向通信，确定时读 `enquiry.value.keys`。
+ * 移动端不能照搬：屏幕容不下"表单 + 弹窗 + 表格"三层，而且 uni 的页面之间
+ * 没有 provide/inject（每个页面是独立实例）。所以改成"真的跳一个选择页，
+ * 选完 emit + navigateBack"，通道名由调用方给定。
+ *
+ * 参数一律不做 encodeURIComponent：H5 侧 uni/vue-router 拼 URL 用的是 encodeURI，
+ * 预编码会把 % 再编成 %25（这个坑在 nav-guard 的 ?from= 上踩过一次，
+ * 见 src/md/page-routing.md）。因此 channel 与 params 的值只允许
+ * 字母、数字、下划线、连字符、点、斜杠这类安全字符。
+ */
+import type { AdminRow } from "@/admin/admin-types";
+import type { PageName } from "@/router/routes";
+import { onUnmounted, ref } from "vue";
+import { pageUrl } from "@/router/routes";
+
+/** 事件名前缀：uni.$emit 是全局总线，加前缀避免与业务事件撞名 */
+const EVENT_PREFIX = "admin:pick:";
+
+/** 打开发起方要的东西：目标页 + 透传给它的 query */
+export interface AdminPickRequest {
+  page: PageName;
+  /** 简单标量参数，如 { multiple: "1" }；不允许放 JSON 串或含特殊字符的值 */
+  params?: Record<string, string>;
+}
+
+function buildQuery(params: Record<string, string>): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(params)) {
+    parts.push(`${key}=${value}`);
+  }
+  return parts.join("&");
+}
+
+/**
+ * 调用方侧：打开选择页并登记"选好了怎么办"。
+ * @param channel 通道名，同一页面的多个选择器用不同通道（如 actor、manager）
+ */
+export function useAdminPick<T extends AdminRow = AdminRow>(channel: string) {
+  const eventName = `${EVENT_PREFIX}${channel}`;
+  let handler: ((rows: T[]) => void) | null = null;
+
+  function detach(): void {
+    if (handler) {
+      uni.$off(eventName, handler);
+      handler = null;
+    }
+  }
+
+  function open(
+    request: AdminPickRequest,
+    onPicked: (rows: T[]) => void,
+  ): void {
+    // 先退订再订阅：同一通道重复打开时若留着旧闭包，上一次的选择逻辑会被再执行一遍
+    detach();
+    handler = (rows: T[]) => {
+      onPicked(rows ?? []);
+    };
+    uni.$on(eventName, handler);
+
+    const query = buildQuery({ channel, ...(request.params ?? {}) });
+    uni.navigateTo({ url: `${pageUrl(request.page)}?${query}` });
+  }
+
+  onUnmounted(detach);
+
+  return { channel, open, detach };
+}
+
+/**
+ * 选择页侧：onLoad 里把 channel 存下来，确定时回传。
+ * 没带 channel 参数时按 "default" 处理——手敲地址进来也不会报错，
+ * 只是没人接收这次选择。
+ */
+export function useAdminPickTarget() {
+  const channel = ref("default");
+  const multiple = ref(false);
+
+  /** 从 onLoad 的 options 里读协议参数 */
+  function readOptions(options?: Record<string, string | undefined>): void {
+    const raw = String(options?.channel ?? "").trim();
+    if (raw) {
+      channel.value = raw;
+    }
+    multiple.value = String(options?.multiple ?? "") === "1";
+  }
+
+  /** 回传并退回上一页 */
+  function deliver(rows: AdminRow[]): void {
+    uni.$emit(`${EVENT_PREFIX}${channel.value}`, rows);
+    uni.navigateBack();
+  }
+
+  /** 单选语义：只认第一条 */
+  function deliverOne(row: AdminRow): void {
+    deliver([row]);
+  }
+
+  function cancel(): void {
+    uni.navigateBack();
+  }
+
+  return { channel, multiple, readOptions, deliver, deliverOne, cancel };
+}
diff --git a/uniapp/youjiala/src/locale/lang/en-US.json b/uniapp/youjiala/src/locale/lang/en-US.json
index 1574805..7297178 100644
--- a/uniapp/youjiala/src/locale/lang/en-US.json
+++ b/uniapp/youjiala/src/locale/lang/en-US.json
@@ -7,6 +7,62 @@
     "cancelBut": "Cancel",
     "cultureLabel": "Language:"
   },
+  "AdminPage": {
+    "filterBut": "Filter",
+    "filterTitle": "Filter Conditions",
+    "searchPlaceholder": "Search",
+    "confirmBut": "OK",
+    "cancelBut": "Cancel",
+    "clearBut": "Clear",
+    "clearAllBut": "Clear All",
+    "startPlaceholder": "From",
+    "endPlaceholder": "To",
+    "quickDays": "Last {days} days",
+    "totalText": "{total} record(s)",
+    "selectedText": "{count} selected",
+    "selectAllBut": "Select All",
+    "unselectAllBut": "Deselect",
+    "emptyText": "No matching records",
+    "viewBut": "View",
+    "amendBut": "Edit",
+    "createBut": "New",
+    "deleteBut": "Invalidate",
+    "saveBut": "Save",
+    "backBut": "Back",
+    "pickDoneBut": "Done",
+    "pickNoneTip": "Please select a record",
+    "notExistTip": "Record not found",
+    "notSetTip": "Not set",
+    "savedTip": "Saved",
+    "deletedTip": "Records invalidated",
+    "confirmDeleteTitle": "Invalidate the selected records?",
+    "noPermissionText": "No accessible admin function",
+    "menuLoading": "Loading menu…",
+    "menuRetryBut": "Reload",
+    "menuEmptyText": "The server returned no authorized function"
+  },
+  "UserPage": {
+    "title": "User Query",
+    "detailTitle": "User Detail",
+    "userName": "User Name",
+    "userLocalName": "Local Name",
+    "userEngName": "English Name",
+    "userMobile": "Mobile",
+    "userPassword": "Password",
+    "createdDatetime": "Created Date",
+    "account": "Account",
+    "unnamed": "No user name",
+    "actorTitle": "Roles",
+    "actorEnquiryTitle": "Role Query",
+    "actorName": "Role Name",
+    "actorLocalName": "Role Local Name",
+    "addActorBut": "Add Role",
+    "actorEmpty": "No role yet",
+    "unnamedActor": "Unnamed role",
+    "userNameRequired": "Please enter the user name",
+    "localNameRequired": "Please enter the local name",
+    "passwordTip": "Leave it empty to keep the password"
+  },
   "ErrorPage": {
     "reasonsTitle": "Possible reasons",
     "fromLabel": "Failed address:",
diff --git a/uniapp/youjiala/src/locale/lang/zh-CN.json b/uniapp/youjiala/src/locale/lang/zh-CN.json
index 43a4a63..a7f3f72 100644
--- a/uniapp/youjiala/src/locale/lang/zh-CN.json
+++ b/uniapp/youjiala/src/locale/lang/zh-CN.json
@@ -7,6 +7,62 @@
     "cancelBut": "取消",
     "cultureLabel": "语言："
   },
+  "AdminPage": {
+    "filterBut": "筛选",
+    "filterTitle": "筛选条件",
+    "searchPlaceholder": "搜索",
+    "confirmBut": "确定",
+    "cancelBut": "取消",
+    "clearBut": "清空",
+    "clearAllBut": "全部清空",
+    "startPlaceholder": "起始",
+    "endPlaceholder": "截止",
+    "quickDays": "最近 {days} 天",
+    "totalText": "共 {total} 条",
+    "selectedText": "已选 {count} 条",
+    "selectAllBut": "全选",
+    "unselectAllBut": "取消选择",
+    "emptyText": "没有符合条件的数据",
+    "viewBut": "查看",
+    "amendBut": "修改",
+    "createBut": "新增",
+    "deleteBut": "无效",
+    "saveBut": "保存",
+    "backBut": "返回",
+    "pickDoneBut": "完成选择",
+    "pickNoneTip": "请选择一条记录",
+    "notExistTip": "记录不存在",
+    "notSetTip": "未设置",
+    "savedTip": "保存成功",
+    "deletedTip": "记录删除成功",
+    "confirmDeleteTitle": "确定要作废选中的记录吗？",
+    "noPermissionText": "没有可访问的管理功能",
+    "menuLoading": "菜单加载中…",
+    "menuRetryBut": "重新加载",
+    "menuEmptyText": "后端没有返回你有权限的功能"
+  },
+  "UserPage": {
+    "title": "用户查询",
+    "detailTitle": "用户详情",
+    "userName": "用户名称",
+    "userLocalName": "中文名称",
+    "userEngName": "英文名称",
+    "userMobile": "手机",
+    "userPassword": "登录密码",
+    "createdDatetime": "创建日期",
+    "account": "账号",
+    "unnamed": "未填写用户名称",
+    "actorTitle": "角色明细",
+    "actorEnquiryTitle": "角色查询",
+    "actorName": "角色名称",
+    "actorLocalName": "角色中文名称",
+    "addActorBut": "新增角色",
+    "actorEmpty": "暂无角色明细",
+    "unnamedActor": "未命名角色",
+    "userNameRequired": "请输入用户名称",
+    "localNameRequired": "请输入中文名称",
+    "passwordTip": "留空表示不修改密码"
+  },
   "ErrorPage": {
     "reasonsTitle": "可能的原因",
     "fromLabel": "出错的地址：",
diff --git a/uniapp/youjiala/src/md/admin-pages.md b/uniapp/youjiala/src/md/admin-pages.md
new file mode 100644
index 0000000..aaeca49
--- /dev/null
+++ b/uniapp/youjiala/src/md/admin-pages.md
@@ -0,0 +1,132 @@
+# 管理端页面层（security 域移动端移植）
+
+适用范围：`src/components/admin-list|admin-form|admin-filter-drawer`、`src/composables/useAdminList|useAdminPick|useAdminMenu`、`src/admin/*`、`src/pages/security/*`、`src/pages/dashboard/dashboard.vue`，以及 `src/router/routes.ts` 里 security 域的 `PAGE_PATHS` / `PAGE_PERMISSIONS` 登记。
+
+判定层（`can`/`canVisitPage`/`usePagePermission` 的语义）不在本文，见 `src/md/permission.md`；本文只讲"页面怎么把判定结果用起来"。
+
+---
+
+## 1. 移植策略：移植模式，不移植框架
+
+旧 WebVue `src/views/security` 是桌面形态：`SearchCard`（近 900 行，多列网格 + 列配置 + 打印 + 排序表头 + 行选择）、`ft-page/ft-hero/ft-card/ft-field` 一套 CSS 布局、"选角色"用 `<dragModal>` 内嵌 Enquiry + `provide/inject` 双向通信。
+
+手机上这三样都成立不了：屏幕放不下多列网格，页面之间没有 `provide/inject`（uni 每个页面是独立实例）。所以本层的取舍是——
+
+- **保留** `bindOption` 数据模型（后端列名 / `Type` / `Operator` / `SelectOptions`）与查询语义（分页、条件、`orderby`），因为后端 `FindBySearchCriteria` 吃的就是这个形状；
+- **砍掉** 多列网格、列配置、打印、排序表头——手机没有对应交互；
+- **重写** 列表为卡片流、详情为单列卡、选择为"真跳一页再回传"。
+
+复用分三层，边界清楚，换域移植（Group/Function/Dms/Publish…）时机械部分零改动：
+
+| 层 | 文件 | 认识什么 | 不认识什么 |
+| --- | --- | --- | --- |
+| 纯函数 | `admin/admin-filter.ts`、`admin-date.ts`、`admin-column.ts`、`admin-types.ts` | SearchFilter / BindOption / 日期口径 | vue、uni、service |
+| composable | `useAdminList`、`useAdminPick`、`useAdminMenu` | 上面那层 + vue 响应式 | z-paging、service、权限名 |
+| 组件 | `admin-list`、`admin-form`、`admin-filter-drawer` | z-paging + uview-pro | service、**权限** |
+
+**组件不判权限**：按钮由页面按 `canCreate/canAmend/canDelete` 组好数组（详情）或用 `v-if`（列表工具条）传进来。这样公共组件不需要知道任何一个域的权限名。
+
+---
+
+## 2. 三个页面 + 入口
+
+| 页面名 | 路径 | 旧对应 | 作用 |
+| --- | --- | --- | --- |
+| `userEnquiry` | `pages/security/user-enquiry` | `UserEnquiry.vue` | 用户列表：三条筛选（用户名/中文名/创建日期区间）、每页 20、按创建日期倒序、行点进详情、多选批量作废 |
+| `userOperation` | `pages/security/user-operation` | `UserOperation.vue` | 用户详情：查看/新增/修改，`?id=&mode=`；角色明细在 `#extra` 插槽自绘 |
+| `actorEnquiry` | `pages/security/actor-enquiry` | `ActorEnquiry.vue` | 角色查询，**双用途**（见 §3.3） |
+| `dashboard` | `pages/dashboard/dashboard` | `layout` 菜单 | 入口九宫格，`FindMenuByUsername` 驱动（见 §5） |
+
+列表页写法（`user-enquiry.vue` 为准）：`reactive(bindOptions)` + 一个只碰具体 service 的 `fetchData(query)` 交给 `useAdminList`；解构出的 `filterCount/filterVisible/draft/searchToken` 是 ref/computed，模板自动 unwrap，方法仍走 `state.xxx`。取数排在 `useAuthGuard` 之后（`admin-list` 的 `auto` 默认 false，首屏手动 `listRef.refresh()` 一次）。
+
+**为什么 `bindOptions` 必须 `reactive`**：`useAdminList.filters` 是 `computed`，源数组非响应式就永不失效，改了条件却仍是旧结果。
+
+---
+
+## 3. 详情页与"选角色"
+
+### 3.1 admin-form 的形状
+`sections: AdminFormSection[]`（每张卡 `title` + `fields: AdminFormField[]`），字段用 `type`（text/password/number/digit/textarea/switch/date）、`lock`（主键编辑态也锁死）、`date`（只读态按日期格式化）、`required`。编辑控件的值改写通过 `@field-change(prop, value)` 回抛给页面，组件**不 mutate** `props.model`（`vue/no-mutating-props`）。
+
+底部按钮是 `actions: AdminFormAction[]`：`when: "view" | "edit"` 按当前态过滤显示，`confirm: true` 走 `uni.showModal` 二次确认。
+
+### 3.2 user-operation 的取数与保存
+`onLoad` 读 `id`（=`UserName`）与 `mode`；`FindByKey` 取 `SecurityUserData`，取不到提示"记录不存在"。保存按有无 `CreatedBy` 决定 `Update`/`Insert`，成功后用后端回写的档案刷新、回填主键、退回只读。密码编辑的是 `SecurityUserDisplayData.OrgUserPassword`（留空即不改），只在编辑态出现。
+
+### 3.3 选择页回传协议（useAdminPick / useAdminPickTarget）
+旧系统的"选角色"是 Operation 用 `<dragModal>` 内嵌 Enquiry + `provide/inject`。移动端改成**真跳一页再回传**：
+
+- 调用方 `useAdminPick<T>(channel).open({ page, params }, onPicked)`——先退订再订阅，`onUnmounted` 兜底清理；
+- 目标页（`actor-enquiry`）`useAdminPickTarget()` 在 `onLoad` 里 `readOptions(options)` 存下 `channel`/`multiple`，确定时 `deliver(rows)`（`uni.$emit('admin:pick:'+channel, rows)` + `navigateBack`）；
+- `actor-enquiry` 因此**同一个列表两种用法**：菜单进入（无 `channel`）是普通查询；被带 `?channel=&multiple=1` 打开就是选择器，单选点行即回传、多选底部"完成"批量回传。
+
+**协议参数一律不做 `encodeURIComponent`**：H5 侧 uni/vue-router 拼 URL 用 `encodeURI`，预编码会把 `%` 再编成 `%25`。`channel` 与 `params` 的值只允许字母/数字/下划线/连字符/点/斜杠。
+
+> 命名订正：这个页面就叫 `actor-enquiry`（旧系统本是 `ActorEnquiry.vue`），早期草稿里的 `actor-pick` 是造错的概念——"选择"只是它带 `channel` 打开时的一种模式，不是另一张页面。
+
+---
+
+## 4. 权限登记与命名（改这条最容易踩坑）
+
+`PAGE_PERMISSIONS` 登记（`routes.ts`）：
+
+| 页面 | permission_name | 来源说明 |
+| --- | --- | --- |
+| `userEnquiry` | `UserEnquiry` | 功能名与权限名**同名** |
+| `userOperation` | `UserOperation` | 功能名与权限名**同名** |
+| `actorEnquiry` | `SecurityActor` | 功能名是 `ActorEnquiry`，但权限名是**实体名** |
+
+**security 域命名不统一，逐字照抄，别"顺手归一"**：多数功能（如 ActorEnquiry）的 `permission_name` 是实体名（`SecurityActor`/`SecurityGroup`），而 `UserEnquiry`/`UserOperation` 的 `permission_name` 与功能名本身同名。写错等于该页永远进不去。
+
+反查方法：
+- 菜单渲染用 `POST /SecurityUser/FindMenuByUsername`——**按当前用户授权过滤**，`UserId` 为空直接返回 `null`；
+- 校对权限名用 `POST /SecurityFunction/FindMenus`——`[AllowAnonymous]` 的**全量表**（实测 37 行），只读它的 `permission_name` 列来核对登记，**绝不用它做菜单兜底**（会把没授权的功能也列出来）。
+
+---
+
+## 5. 入口菜单（useAdminMenu + menu-map 白名单）
+
+数据链路三层过滤，缺一不可：
+
+```
+FindMenuByUsername（后端按用户过滤）
+  -> mapMenuEntries（menu-map.ts 白名单：只认已移植的功能）
+  -> canVisitPage（本地再判一次路由权限）
+  -> 剩下的才是能点的入口
+```
+
+- `menu-map.ts` 的 `MENU_PAGE_MAP` 把后端功能名映射到本地页名（现登记 `UserEnquiry`/`ActorEnquiry`），`MENU_ICON_MAP` 给图标（键含特殊字符故全部加引号，守 `quote-props: consistent`）；没进白名单的功能不显示入口。
+- **菜单缓存按账号**（模块级 `cached`/`cachedFor`）：一次登录会话里首页反复 `onShow` 不重复打接口；换登录人或退出（`clearCache`）必须重取，否则会把上一个人的入口给下一个人。
+- `canVisitPage` 再判一次的理由：菜单接口有缓存、档案可能比菜单新，入口点下去才 403 是最难排查的那种 bug。
+
+---
+
+## 6. 本批已知边界
+
+- **只做了 User 域 + 入口菜单**。Group/Function/Dms/Publish 等域未移植；它们在 `menu-map` 白名单里没有映射，所以后端即便授权也不会显示入口——这是有意的，不是漏判。
+- `actor-enquiry` 从菜单进入时"点行看详情"尚未接（本批它只作查询/回传），详情依赖后续 Actor 域。
+- `PAGE_PERMISSIONS` 这三个权限名后端存在，但**当前账号是否被授予 `ViewIndc=Y` 尚未端到端验证**——入口可能点出 403。要验证就在真机上点，或查 `security_group_permission` 是否含对应授权。
+
+---
+
+## 7. 环境与代码约定（务必遵守，改一次撞一次）
+
+- **i18n 走 uview-pro 的 `useLocale()`，项目没装 vue-i18n**：`import { useI18n } from "vue-i18n"` 会 TS2307。正确写法 `import { useLocale } from "uview-pro"; const { t, currentLocale } = useLocale();`。`currentLocale` 是 ref（`{ name }` 形态），语言切换监听用 `watch(currentLocale, ...)`，没有 `locale`。
+- **ESLint CLI 在本机崩溃**：`eslint-plugin-jsdoc` 在 `join(import.meta.dirname, ...)` 处因当前 Node 版本 `import.meta.dirname` 为 `undefined` 抛 `ERR_INVALID_ARG_TYPE`（需 Node ≥ 20.11）。所以 lint 门禁靠 **IDE 诊断**（`GetProblems`），类型门禁靠 `npx vue-tsc --noEmit`（权威，能解析 `@/`）。IDE 报的"找不到模块 `@/…`"是别名解析未就绪的**误报**，以 vue-tsc 裁决。
+- **`.vue` 模板**：`indent: 2`；多属性标签一律 tag 名单独一行、每个属性各占一行、缩进 = 元素缩进 + 2、闭合 `>` / `/>` 单独一行；带属性或有内容的 `<text>`/`<view>` 其内容单独成行（`vue/singleline-html-element-content-newline`）；属性顺序 `ref` → `v-model` → `:props`/静态属性 → `@events`（`vue/attributes-order`）。
+- **脚本/`.ts` 约定**：Stroustrup（`}` 换行后再 `catch`/`else`/`finally`）；`arrow-parens: as-needed`（单参数无类型注解时不加括号）；`quote-props: consistent`；`<script setup>` 内不 `export`；perfectionist 导入排序——type 块按路径字母序，value 块"包（`@dcloudio` → `uview-pro` → `vue`）先、后 alias 字母序"（`@/admin/*` < `@/composables` < `@/data/*` < `@/permission/*` < `@/policy/*` < `@/router/*` < `@/service/*`），同模块路径不重复 import。
+- **uview-pro 组件契约**（0.6.x）：`u-input` 的 `border` 是**布尔**，不是旧 uview 的 `'surround'` 字符串；`u-switch` 只吃布尔且只发 `change`；`u-popup` 的 `length`/`border-radius` 吃字符串。
+- **`u-popup` 只认 `modelValue`，不消费 `show`**：其内部只 `watch(() => props.modelValue)` 调 `open()/close()`，`show` 仅在 types 里声明无人用。所以 `admin-filter-drawer` 必须 `:model-value="props.show"` 绑定，写 `:show` 抽屉永远弹不出来（表现为点了没反应、DOM 里只有一个注释占位节点）。图标名同理：uview-pro 没有 `filter` 图标（会渲染成空白方块），筛选入口用已存在的 `list`。
+- **视觉语言**：管理页统一走 iOS/微信「设置」式，沿用登录页的翠绿主色（`green` 主题，primary `#059669`）。列表卡片 = 加粗主标题左上 + 右箭头 + 「左固定标签列（132rpx）+ 紧跟其左对齐的值」（不用两端对齐，避免中间拉大空白）；详情 = 渐变英雄卡 + 分组白卡内「标签左 / 值右」带细线的行；空值统一显示 `AdminPage.notSetTip`（"未设置"）而非刺眼的 `-`（列表 `EMPTY_CELL_TEXT` 仍为 `-`，纯逻辑层不引 i18n）；次级动作（新增）走靠右的翠绿实心胶囊。
+
+## 8. 校验清单
+
+改完这一层，按顺序跑（全部已在本批通过）：
+
+```
+npx vue-tsc --noEmit                     # 类型 + 模板表达式，EXIT=0
+node + esbuild 跑 permission-kernel.spec # 内核判定 59 断言（见 permission.md §7）
+npm run build:h5 ; npm run build:app     # 两端构建 DONE
+```
+
+lint（属性顺序 / 缩进 / singleline-content）当前只能靠 IDE `GetProblems` 逐个文件确认——CLI 不可用时，新写的每个 `.vue` 落盘后都单独查一遍。
diff --git a/uniapp/youjiala/src/md/permission.md b/uniapp/youjiala/src/md/permission.md
index a2d3859..5cae687 100644
--- a/uniapp/youjiala/src/md/permission.md
+++ b/uniapp/youjiala/src/md/permission.md
@@ -301,19 +301,18 @@ Get-ChildItem 'dist\build\mp-weixin' -Recurse -File -Include *.js | Select-Strin
 
 ## 8. 已知缺口
 
-- **入口可见性这一层还没做（菜单/首页九宫格）**。权限的可见性分两层，本层只实现了第二层：
+- **入口可见性（菜单/首页九宫格）已实现**——这一层不再是缺口。权限可见性分两层，两层现在都落地了：
 
   | 层 | 管什么 | 数据源 | 现状 |
   | --- | --- | --- | --- |
-  | ① 入口可见性 | 首页列不列得出这个入口 | `POST /SecurityUser/FindMenuByUsername`（后端按用户权限过滤） | **未实现**：`dashboard.vue` 是空白占位页 |
-  | ② 页面可进入性 | 手输地址/深链跳过去能不能进 | `PAGE_PERMISSIONS` + `canVisitPage()` | 判定层就绪，登记表为空 |
+  | ① 入口可见性 | 首页列不列得出这个入口 | `POST /SecurityUser/FindMenuByUsername`（后端按用户权限过滤） | **已实现**：`dashboard.vue` + `useAdminMenu` + `admin/menu-map.ts` 白名单，详见 `src/md/admin-pages.md` §5 |
+  | ② 页面可进入性 | 手输地址/深链跳过去能不能进 | `PAGE_PERMISSIONS` + `canVisitPage()` | 判定层就绪，security 域三页已登记（见下条） |
 
-  旧 WebVue 主要靠 ①：看不见的入口自然不会点，②只是补"手敲 URL"的漏洞。①的后端链路（`SecurityUserService.cs:232-248`）是 `用户名 -> security_user_actor -> security_actor_group -> security_group_permission -> security_permission_function_map -> security_function`，只返回本人被授权的功能，`UserId` 为空直接返回 null。
-  两个接口都已随 service 层移植进来且**零调用者**：`securityUserService.FindMenuByUsername()`（返回 `SecurityFunctionResultData`，含 `SecurityFunctionDisplayData[]` 的 `FunctionLocalName/FunctionEngName/Icon/Orderby/PageUrl/PermissionName` 与 `SecurityFunctionMaps` 层级，正是旧 `layout/index.vue` 的 `initMenu()` 消费的形态）和 `securityFunctionService.FindMenus()`（`[AllowAnonymous]`、**不区分用户的全量表**，旧项目只用来全量注册路由，别拿它做过滤）。
-  所以这一条缺口的真实含义是：等做首页入口时调 `FindMenuByUsername` 渲染，并用返回的 `PermissionName` 顺手校对 `PAGE_PERMISSIONS` 的登记；`stores/tabbar.ts` 的默认列表目前也是空的，等同一个数据源。
+  ①的后端链路（`SecurityUserService.cs:232-248`）是 `用户名 -> security_user_actor -> security_actor_group -> security_group_permission -> security_permission_function_map -> security_function`，只返回本人被授权的功能，`UserId` 为空直接返回 null。`securityUserService.FindMenuByUsername()` 返回 `SecurityFunctionResultData`（含 `SecurityFunctionDisplayData[]` 的 `FunctionLocalName/FunctionEngName/Icon/Orderby/PermissionName`），正是旧 `layout/index.vue` 的 `initMenu()` 消费的形态；`useAdminMenu` 拿它渲染，再过 `menu-map` 白名单与 `canVisitPage` 两道本地过滤。`securityFunctionService.FindMenus()`（`[AllowAnonymous]`、**不区分用户的全量表**）仍只用来全量核对 `permission_name`，别拿它做菜单兜底。
+  遗留：`stores/tabbar.ts` 的默认列表仍是空的（tabbar 与本批九宫格是两套东西，暂未统一数据源）。
 - **数据级（dependent）判定尚无真实页面在用**：旧项目所有调用点都是单参形式，口子为 `Submit`/`Approval` 与将来的目录级授权保留。
-- **`PAGE_PERMISSIONS` 目前是空表**：现在只有 login / dashboard / 三个错误页，除 dashboard 有意不绑（§3.1）之外，其余页面还没迁进来。空表意味着路由级 403 实际上还没被任何页面触发，只能靠请求层的 HTTP 403。
-- **403 页的"返回首页"在首页本身被拦时会原地弹回一次**：`page403.vue` 的返回按钮走 `reLaunch(pageUrl("dashboard"))`，而 reLaunch 同样过 `nav-guard`；若 dashboard 恰好被绑了拿不到的权限，这次跳转会被再拦一次、弹回 403（实测是一次性弹回，不是死循环，因为 403 页自身在 `AUTH_FREE_PAGES` 里）。等真有页面登记权限时，这里应该改成"按 `PAGE_PERMISSIONS` 找第一个可达页"或直接隐藏该按钮。
+- **`PAGE_PERMISSIONS` 登记仍很稀疏**：security 域已登记 `userEnquiry=UserEnquiry`、`userOperation=UserOperation`、`actorEnquiry=SecurityActor` 三条（命名不统一、别"顺手归一"的坑见 `src/md/admin-pages.md` §4）；其余旧 WebVue 域（Group/Function/Dms/Publish…）尚未迁进来。已登记页面会真正触发路由级 403，未登记页面仍只靠请求层 HTTP 403 兜底。
+- **403 页的"返回首页"在首页本身被拦时会原地弹回一次**：`page403.vue` 的返回按钮走 `reLaunch(pageUrl("dashboard"))`，而 reLaunch 同样过 `nav-guard`；若 dashboard 恰好被绑了拿不到的权限，这次跳转会被再拦一次、弹回 403（实测是一次性弹回，不是死循环，因为 403 页自身在 `AUTH_FREE_PAGES` 里）。dashboard 目前有意不绑（§3.1），所以这条还触发不到；等哪天给 dashboard 也登记了权限，这里就该改成"按 `PAGE_PERMISSIONS` 找第一个可达页"或直接隐藏该按钮。
 - **前端判定滞后于后端**：后端每次请求实时查库，前端读登录时的快照。管理员改了授权后，用户重新登录前看到的仍是旧按钮状态（可能点了才 403）。这是"权限随令牌下发"这个既有模型的代价，不是本层引入的。
 - **`SecurityUserPermissionInfo.UserGroups` 未参与判定**：后端也不用它做短路（只用于 join 出授权行），前端同样只用 `Permissions` / `PermissionDependents`。
 - **孤儿授权数据**：种子库里 `security_group_permission` 有 `abc` 组以及 `acc`/`PhotoPublish`/`AudioPublish`/`VideoPublish` 等权限名，而 `security_group` / `security_permission` 里查不到它们。判定层对此的表现是"多几行永远匹配不上的索引项"，无害；但登记权限名时**不能以授权表的并集为准**，要以 `security_permission` 为准，否则会照抄到这些历史残留。
diff --git a/uniapp/youjiala/src/pages.json b/uniapp/youjiala/src/pages.json
index dcc0911..fa9346e 100644
--- a/uniapp/youjiala/src/pages.json
+++ b/uniapp/youjiala/src/pages.json
@@ -17,6 +17,17 @@
     },
     {
       "path": "pages/error/page404"
+    },
+    // 管理端 security 域（旧 WebVue views/security 的第一批移植）：
+    // user-enquiry 列表 / user-operation 详情（?id=&mode=view|create|amend）/ actor-enquiry 角色查询（兼作选择器）
+    {
+      "path": "pages/security/user-enquiry"
+    },
+    {
+      "path": "pages/security/user-operation"
+    },
+    {
+      "path": "pages/security/actor-enquiry"
     }
   ],
   // 全局配置
diff --git a/uniapp/youjiala/src/pages/dashboard/dashboard.vue b/uniapp/youjiala/src/pages/dashboard/dashboard.vue
index dafdcbb..53b9ea5 100644
--- a/uniapp/youjiala/src/pages/dashboard/dashboard.vue
+++ b/uniapp/youjiala/src/pages/dashboard/dashboard.vue
@@ -1,33 +1,127 @@
 <script setup lang="ts">
-// 登录后的落地页：当前为空白占位，后续由旧 WebVue 项目的
-// 菜单（/SecurityFunction/FindMenus）+ 权限守卫驱动真实内容
-import { useAuthGuard } from "@/composables";
+/**
+ * 登录后的落地页：后端按用户下发的功能菜单驱动入口网格
+ *
+ * 数据链路（详见 composables/useAdminMenu.ts）：
+ * /SecurityUser/FindMenuByUsername（按用户授权）-> menu-map.ts 白名单 -> canVisitPage 复核。
+ * 三层过滤后剩下的才是能点的入口，绝不用 FindMenus 全量表兜底（会列出未授权功能）。
+ */
+import type { PageName } from "@/router/routes";
+import { useLocale } from "uview-pro";
+import { computed } from "vue";
+import { useAdminMenu, useAuthGuard } from "@/composables";
 import { WebSitePolicy } from "@/policy/custom/webSitePolicy";
+import { pageUrl } from "@/router/routes";
 
-// 冷启动深链 / 分享链接直达本页时不经过任何导航 API，拦截器拦不到，故页面级再复核一次
-useAuthGuard();
+const { t } = useLocale();
+const menu = useAdminMenu();
+
+/** 可见入口：useAdminMenu 里已做过白名单 + canVisitPage 两道过滤 */
+const items = computed(() => menu.visible.value);
+/** 拉取失败（不是"没权限"就是网络/后端异常）：给出重试入口而不是空一片 */
+const failed = computed(() => !menu.loading.value && Boolean(menu.errorText.value));
+
+function openPage(page: PageName): void {
+  uni.navigateTo({ url: pageUrl(page) });
+}
+
+// 菜单拉取排在登录守卫之后；refresh 自带按账号的模块级缓存，反复 onShow 不会重复打接口
+useAuthGuard(() => {
+  menu.refresh();
+});
 </script>
 
 <template>
-  <app-page :nav-title="WebSitePolicy.Title">
+  <app-page :nav-title="WebSitePolicy.Title" :show-nav-back="false" :hide-nav="true">
     <view class="dashboard">
-      <view class="dashboard__placeholder">
-        {{ WebSitePolicy.Title }}
+      <view v-if="menu.loading.value" class="dashboard__tip">
+        <text>{{ t("AdminPage.menuLoading") }}</text>
       </view>
+
+      <view v-else-if="failed" class="dashboard__tip">
+        <text>{{ t("AdminPage.noPermissionText") }}</text>
+        <u-button class="dashboard__retry" shape="circle" size="mini" :text="t('AdminPage.menuRetryBut')"
+          @click="menu.refresh(true)" />
+      </view>
+
+      <scroll-view v-else class="dashboard__scroll" scroll-y :show-scrollbar="false">
+        <view v-if="!items.length" class="dashboard__empty">
+          <u-empty mode="list" :text="t('AdminPage.menuEmptyText')" />
+        </view>
+
+        <view v-else class="grid">
+          <view v-for="item in items" :key="item.function" class="grid-item" @click="openPage(item.page)">
+            <view class="grid-icon">
+              <u-icon :name="item.icon" size="46" color="var(--u-type-primary)" />
+            </view>
+            <text class="grid-title">
+              {{ item.title }}
+            </text>
+          </view>
+        </view>
+      </scroll-view>
     </view>
   </app-page>
 </template>
 
 <style lang="scss" scoped>
 .dashboard {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 60vh;
+  padding: 20rpx;
 }
 
-.dashboard__placeholder {
-    font-size: 32rpx;
-    color: $u-tips-color;
+.dashboard__tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 0;
+  font-size: 26rpx;
+  color: $u-tips-color;
+}
+
+.dashboard__retry {
+  margin-top: 24rpx;
+}
+
+.dashboard__scroll {
+  flex: 1;
+}
+
+.dashboard__empty {
+  padding: 80rpx 0;
+}
+
+.grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 33.33%;
+  padding: 28rpx 0;
+}
+
+.grid-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96rpx;
+  height: 96rpx;
+  margin-bottom: 12rpx;
+  background-color: #ffffff;
+  border-radius: 24rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
+}
+
+.grid-title {
+  font-size: 24rpx;
+  color: $u-content-color;
+  text-align: center;
 }
 </style>
diff --git a/uniapp/youjiala/src/pages/security/actor-enquiry.vue b/uniapp/youjiala/src/pages/security/actor-enquiry.vue
new file mode 100644
index 0000000..75fe2d8
--- /dev/null
+++ b/uniapp/youjiala/src/pages/security/actor-enquiry.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/**
+ * 角色查询（ActorEnquiry）：旧 WebVue views/security/ActorEnquiry.vue 的移动端等价物
+ *
+ * 它有两种打开方式，同一套列表：
+ * 1. 从菜单进（无 channel）：普通查询页，点行看详情（本批暂未接详情，仅回传/返回）；
+ * 2. 被 user-operation 当"角色选择器"跳进来（带 ?channel=&multiple=1）：
+ *    选完 uni.$emit 回传再 navigateBack（见 useAdminPick / useAdminPickTarget 协议）。
+ *
+ * 旧系统里这个选择能力是 Operation 用 <dragModal> 内嵌 Enquiry + provide/inject 实现的；
+ * 移动端页面之间没有 provide/inject，只能真跳一页再回传，所以这个页面本身就是 Enquiry。
+ */
+import type { AdminColumn, AdminQuery, AdminRow } from "@/admin/admin-types";
+import { onLoad } from "@dcloudio/uni-app";
+import { useLocale } from "uview-pro";
+import { computed, nextTick, reactive, ref } from "vue";
+import { fillCriteria, makeFilterOption } from "@/admin/admin-filter";
+import { useAdminList, useAdminPickTarget, useAuthGuard } from "@/composables";
+import { SecurityActorEntity } from "@/data/auto/securityActorEntity";
+import { SecurityActorSearchCriteria } from "@/data/auto/securityActorSearchCriteria";
+import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
+import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
+import securityActorService from "@/service/security/securityActorService";
+
+const { t } = useLocale();
+const pickTarget = useAdminPickTarget();
+
+const bindOptions = reactive([
+    makeFilterOption(
+        SecurityActorEntity.DB_ACTOR_LOCAL_NAME,
+        t("UserPage.actorLocalName"),
+        SearchFilterTypePolicy.TEXT,
+        SearchFilterOperatorPolicy.CONTAIN,
+    ),
+]);
+
+async function fetchData(query: AdminQuery) {
+    const criteria = new SecurityActorSearchCriteria();
+    criteria.GridColumns = [];
+    fillCriteria(criteria, query.filters, query);
+    const data = await securityActorService.FindBySearchCriteria(criteria);
+    return { rows: data?.Datas ?? [], total: data?.Total ?? 0 };
+}
+
+const state = useAdminList({ bindOptions, loader: fetchData });
+const { filterCount, filterVisible, draft, searchToken } = state;
+
+const columns = computed<AdminColumn[]>(() => [
+    {
+        label: t("UserPage.actorLocalName"),
+        prop: SecurityActorEntity.ACTOR_LOCAL_NAME,
+    },
+    { label: t("UserPage.actorName"), prop: SecurityActorEntity.ACTOR_NAME },
+]);
+
+const keyword = ref("");
+const listRef = ref<any>(null);
+
+function onSearch(): void {
+    const option = bindOptions.find(
+        item => item.BindValue === SecurityActorEntity.DB_ACTOR_LOCAL_NAME,
+    );
+    if (option) {
+        option.Value = keyword.value;
+    }
+    state.reload();
+}
+
+function onRowTap(row: AdminRow): void {
+    // 多选态交给勾选，不在这里回传；单选态点一行即选中
+    if (pickTarget.multiple.value) {
+        return;
+    }
+    pickTarget.deliverOne(row);
+}
+
+function onConfirm(rows: AdminRow[]): void {
+    if (!rows.length) {
+        uni.showToast({ title: t("AdminPage.pickNoneTip"), icon: "none" });
+        return;
+    }
+    pickTarget.deliver(rows);
+}
+
+onLoad((options) => {
+    pickTarget.readOptions(options);
+});
+
+let booted = false;
+useAuthGuard(() => {
+    if (booted) {
+        return;
+    }
+    booted = true;
+    nextTick(() => listRef.value?.refresh());
+});
+</script>
+
+<template>
+    <view class="page">
+        <admin-list ref="listRef" v-model:keyword="keyword" :nav-title="t('UserPage.actorEnquiryTitle')"
+            :columns="columns" :loader="state.query" :row-key="SecurityActorEntity.ACTOR_NAME"
+            title-key="ActorLocalName" :selectable="pickTarget.multiple.value" :filter-count="filterCount"
+            :filter-visible="filterVisible" :filter-items="draft" :search-token="searchToken" @search="onSearch"
+            @open-filter="state.openFilter()" @close-filter="state.closeFilter()"
+            @apply-filter="state.applyFilter($event)" @clear-filter="state.clearFiltersAndSearch()" @row-tap="onRowTap">
+            <template #actions="{ rows }">
+                <u-button type="primary" shape="circle" size="mini" :text="t('AdminPage.pickDoneBut')"
+                    @click="onConfirm(rows)" />
+            </template>
+        </admin-list>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.page {
+    width: 100%;
+    height: 100vh;
+    background-color: $u-bg-color;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/security/user-enquiry.vue b/uniapp/youjiala/src/pages/security/user-enquiry.vue
new file mode 100644
index 0000000..cdb5d54
--- /dev/null
+++ b/uniapp/youjiala/src/pages/security/user-enquiry.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * 用户查询（列表页）：旧 WebVue views/security/UserEnquiry.vue 的移动端等价物
+ *
+ * 保留的东西：三条筛选项（用户名/中文名/创建日期区间）、每页 20 条、
+ * 按创建日期倒序、行点击进详情、多选批量"无效"（旧页面也是循环 Delete，不是 Deletes）。
+ * 丢掉的东西：多列网格、列配置、打印——手机上没有对应交互。
+ *
+ * 页面只组数据与路由，列表/筛选/分页的机制全在 admin-list + useAdminList 里。
+ */
+import type { AdminColumn, AdminQuery, AdminRow } from "@/admin/admin-types";
+import { useLocale } from "uview-pro";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import { fillCriteria, makeFilterOption } from "@/admin/admin-filter";
+import { useAdminList, useAuthGuard } from "@/composables";
+import { SecurityUserEntity } from "@/data/auto/securityUserEntity";
+import { SecurityUserSearchCriteria } from "@/data/auto/securityUserSearchCriteria";
+import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
+import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
+import { usePagePermission } from "@/permission/permission-context";
+import { pageUrl } from "@/router/routes";
+import securityUserService from "@/service/security/securityUserService";
+
+const { t, currentLocale } = useLocale();
+const perm = usePagePermission("userEnquiry");
+
+/** 列名 -> i18n key：抽屉标签、卡片行标签都靠它，切换语言时就地刷新而不重建条件 */
+const LABEL_KEYS: Record<string, string> = {
+    [SecurityUserEntity.DB_USER_NAME]: "UserPage.userName",
+    [SecurityUserEntity.DB_USER_LOCAL_NAME]: "UserPage.userLocalName",
+    [SecurityUserEntity.DB_CREATED_DATETIME]: "UserPage.createdDatetime",
+};
+
+// reactive 是必须的：useAdminList 的 filters 是 computed，源数组非响应式就永远不会失效，
+// 改了条件却仍是旧筛选结果是这一层最容易踩的坑
+const bindOptions = reactive([
+    makeFilterOption(
+        SecurityUserEntity.DB_USER_NAME,
+        t(LABEL_KEYS[SecurityUserEntity.DB_USER_NAME]),
+        SearchFilterTypePolicy.TEXT,
+        SearchFilterOperatorPolicy.CONTAIN,
+    ),
+    makeFilterOption(
+        SecurityUserEntity.DB_USER_LOCAL_NAME,
+        t(LABEL_KEYS[SecurityUserEntity.DB_USER_LOCAL_NAME]),
+        SearchFilterTypePolicy.TEXT,
+        SearchFilterOperatorPolicy.CONTAIN,
+    ),
+    makeFilterOption(
+        SecurityUserEntity.DB_CREATED_DATETIME,
+        t(LABEL_KEYS[SecurityUserEntity.DB_CREATED_DATETIME]),
+        SearchFilterTypePolicy.DATE,
+        SearchFilterOperatorPolicy.DATE_BETWEEN,
+    ),
+]);
+
+/** 取数：criteria 每页重建（与旧实现一致），只在这里碰具体 service */
+async function fetchData(query: AdminQuery) {
+    const criteria = new SecurityUserSearchCriteria();
+    criteria.GridColumns = [];
+    fillCriteria(criteria, query.filters, query);
+    const data = await securityUserService.FindBySearchCriteria(criteria);
+    return { rows: data?.Datas ?? [], total: data?.Total ?? 0 };
+}
+
+const state = useAdminList({
+    bindOptions,
+    loader: fetchData,
+    orderby: SecurityUserEntity.DB_CREATED_DATETIME,
+    orderbytag: "desc",
+});
+
+// 解构出来的是 ref/computed，交给模板自动 .value；方法仍走 state.xxx
+const { filterCount, filterVisible, draft, searchToken } = state;
+
+const columns = computed<AdminColumn[]>(() => [
+    {
+        label: t("UserPage.userLocalName"),
+        prop: SecurityUserEntity.USER_LOCAL_NAME,
+    },
+    { label: t("UserPage.userName"), prop: SecurityUserEntity.USER_NAME },
+    { label: t("UserPage.userMobile"), prop: SecurityUserEntity.USER_MOBILE },
+    {
+        label: t("UserPage.createdDatetime"),
+        prop: SecurityUserEntity.CREATED_DATETIME,
+        date: "datetime",
+    },
+]);
+
+const keyword = ref("");
+const listRef = ref<any>(null);
+
+/** 顶部搜索框：把关键字并进"用户名包含"这一条条件，复用同一套筛选链路 */
+function onSearch(): void {
+    const option = bindOptions.find(
+        item => item.BindValue === SecurityUserEntity.DB_USER_NAME,
+    );
+    if (option) {
+        option.Value = keyword.value;
+    }
+    state.reload();
+}
+
+function onRowTap(row: AdminRow): void {
+    // 与旧页面一致：id 用 UserName，mode 决定详情页是只读还是编辑
+    // 不做 encodeURIComponent：见 composables/useAdminPick 的说明（H5 二次编码坑）
+    uni.navigateTo({
+        url: `${pageUrl("userOperation")}?id=${row.UserName}&mode=view`,
+    });
+}
+
+function onCreate(): void {
+    uni.navigateTo({ url: `${pageUrl("userOperation")}?mode=create` });
+}
+
+/** 批量作废：旧 UserEnquiry 也是逐条 Delete，Delete 语义最贴近后端 */
+async function onDelete(rows: AdminRow[]): Promise<void> {
+    if (!rows.length) {
+        uni.showToast({ title: t("AdminPage.pickNoneTip"), icon: "none" });
+        return;
+    }
+    uni.showModal({
+        title: t("AdminPage.confirmDeleteTitle"),
+        success: async (res: any) => {
+            if (!res.confirm) {
+                return;
+            }
+            for (const row of rows) {
+                await securityUserService.Delete(String(row.UserName));
+            }
+            listRef.value?.clearSelection();
+            state.reload();
+            uni.showToast({ title: t("AdminPage.deletedTip"), icon: "none" });
+        },
+    });
+}
+
+// 语言切换后条件标签也要跟着换（值不动，只改显示名）
+watch(currentLocale, () => {
+    for (const option of bindOptions) {
+        const key = LABEL_KEYS[option.BindValue];
+        if (key) {
+            option.DisplayName = t(key);
+        }
+    }
+});
+
+// 取数排在登录守卫之后：admin-list 的 auto 默认 false，首屏由这里手动触发一次
+let booted = false;
+useAuthGuard(() => {
+    if (booted) {
+        return;
+    }
+    booted = true;
+    nextTick(() => listRef.value?.refresh());
+});
+</script>
+
+<template>
+    <view class="page">
+        <admin-list ref="listRef" v-model:keyword="keyword" :nav-title="t('UserPage.title')" :show-nav-back="false"
+            :columns="columns" :loader="state.query" :row-key="SecurityUserEntity.USER_NAME" title-key="UserLocalName"
+            :selectable="Boolean(perm.canDelete.value)" :filter-count="filterCount" :filter-visible="filterVisible"
+            :filter-items="draft" :search-token="searchToken" @search="onSearch" @open-filter="state.openFilter()"
+            @close-filter="state.closeFilter()" @apply-filter="state.applyFilter($event)"
+            @clear-filter="state.clearFiltersAndSearch()" @row-tap="onRowTap">
+            <template #toolbar>
+                <view v-if="perm.canCreate.value" class="create-entry" @click="onCreate">
+                    <u-icon name="plus" size="24" color="#ffffff" />
+                    <text class="create-text">
+                        {{ t("AdminPage.createBut") }}
+                    </text>
+                </view>
+            </template>
+
+            <template #actions="{ rows }">
+                <u-button v-if="perm.canDelete.value" type="error" shape="circle" size="mini"
+                    :text="t('AdminPage.deleteBut')" @click="onDelete(rows)" />
+            </template>
+        </admin-list>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.page {
+    width: 100%;
+    height: 100vh;
+    background-color: $u-bg-color;
+}
+
+/* 新增：翠绿实心胶囊，靠右落在次级工具行里 */
+.create-entry {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12rpx 28rpx;
+    color: #ffffff;
+    background-color: $u-type-primary;
+    border-radius: 999rpx;
+    box-shadow: 0 6rpx 16rpx rgba(5, 150, 105, 0.24);
+}
+
+.create-text {
+    margin-left: 8rpx;
+    font-size: 26rpx;
+    font-weight: 500;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/security/user-operation.vue b/uniapp/youjiala/src/pages/security/user-operation.vue
new file mode 100644
index 0000000..7ab4b2a
--- /dev/null
+++ b/uniapp/youjiala/src/pages/security/user-operation.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+/**
+ * 用户详情（查看 / 新增 / 修改）：旧 WebVue views/security/UserOperation.vue 的移动端等价物
+ *
+ * 逐条对齐旧逻辑：
+ * - onLoad 读 id（=UserName）与 mode（view|create|amend）；
+ * - FindByKey 取 SecurityUserData，取不到提示"记录不存在"；
+ * - 保存按 CreatedBy 有无决定 Update / Insert，成功后把主键回填、退回只读；
+ * - 密码编辑的是 SecurityUserDisplayData.OrgUserPassword（留空即不改）；
+ * - 角色明细按 ActorName 去重合并，删除即从数组里剔除。
+ *
+ * 旧页面的"选角色"是弹窗内嵌 Enquiry + provide/inject；这里改成真跳 actor-enquiry 页
+ * 再回传（见 composables/useAdminPick），所以角色区放在 admin-form 的 #extra 插槽里自绘。
+ */
+import type {
+    AdminFormAction,
+    AdminFormField,
+    AdminFormSection,
+} from "@/admin/admin-types";
+import { onLoad } from "@dcloudio/uni-app";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { useAdminPick, useAuthGuard } from "@/composables";
+import { SecurityUserActorViewEntity } from "@/data/auto/securityUserActorViewEntity";
+import { SecurityUserData } from "@/data/auto/securityUserData";
+import { usePagePermission } from "@/permission/permission-context";
+import securityUserService from "@/service/security/securityUserService";
+
+const { t } = useLocale();
+const perm = usePagePermission("userOperation");
+
+const data = ref<SecurityUserData>(new SecurityUserData());
+const user = computed(() => data.value.SecurityUser);
+const readonly = ref(true);
+const routeId = ref("");
+
+/** 新增态判定：没有 CreatedBy 就说明是还没落库的新记录 */
+const isNew = computed(() => !String(user.value.CreatedBy ?? "").trim());
+
+const heroTitle = computed(
+    () => String(user.value.UserLocalName || user.value.UserName || ""),
+);
+const heroChips = computed(() => {
+    const chips: string[] = [];
+    if (user.value.UserName) {
+        chips.push(`${t("UserPage.account")}: ${user.value.UserName}`);
+    }
+    if (user.value.UserMobile) {
+        chips.push(`${t("UserPage.userMobile")}: ${user.value.UserMobile}`);
+    }
+    return chips;
+});
+
+const sections = computed<AdminFormSection[]>(() => {
+    const fields: AdminFormField[] = [
+        {
+            label: t("UserPage.userName"),
+            prop: "UserName",
+            required: true,
+            // 已有记录时主键锁死：与旧页面"编辑态 UserName 只读"一致
+            lock: routeId.value !== "",
+        },
+        { label: t("UserPage.userLocalName"), prop: "UserLocalName", required: true },
+        { label: t("UserPage.userEngName"), prop: "UserEngName" },
+        { label: t("UserPage.userMobile"), prop: "UserMobile" },
+        { label: t("UserPage.createdDatetime"), prop: "CreatedDatetime", date: "datetime", lock: true },
+    ];
+    // 密码只在编辑态出现：查看态没必要显示（即便是掩码）
+    if (!readonly.value) {
+        fields.push({
+            label: t("UserPage.userPassword"),
+            prop: "OrgUserPassword",
+            type: "password",
+            placeholder: t("UserPage.passwordTip"),
+        });
+    }
+    return [{ title: t("UserPage.detailTitle"), fields }];
+});
+
+const actions = computed<AdminFormAction[]>(() => {
+    const list: AdminFormAction[] = [];
+    if (perm.canAmend.value) {
+        list.push({ key: "amend", label: t("AdminPage.amendBut"), when: "view" });
+    }
+    if (perm.canDelete.value) {
+        list.push({
+            key: "delete",
+            label: t("AdminPage.deleteBut"),
+            tone: "error",
+            confirm: true,
+            when: "view",
+        });
+    }
+    list.push({ key: "save", label: t("AdminPage.saveBut"), when: "edit" });
+    list.push({ key: "cancel", label: t("AdminPage.cancelBut"), when: "edit" });
+    return list;
+});
+
+async function load(): Promise<void> {
+    const result = await securityUserService.FindByKey(routeId.value);
+    if (!result?.SecurityUser) {
+        uni.showToast({ title: t("AdminPage.notExistTip"), icon: "none" });
+        return;
+    }
+    data.value = result;
+}
+
+/** 字段改写：admin-form 不直接改 props.model，统一回抛到这里 */
+function onFieldChange(prop: string, value: unknown): void {
+    (user.value as Record<string, any>)[prop] = value;
+}
+
+async function onSave(): Promise<void> {
+    if (!String(user.value.UserName ?? "").trim()) {
+        uni.showToast({ title: t("UserPage.userNameRequired"), icon: "none" });
+        return;
+    }
+    if (!String(user.value.UserLocalName ?? "").trim()) {
+        uni.showToast({ title: t("UserPage.localNameRequired"), icon: "none" });
+        return;
+    }
+    const isUpdate = !isNew.value;
+    const result = await (isUpdate
+        ? securityUserService.Update(data.value)
+        : securityUserService.Insert(data.value));
+    // 后端回写后的档案才是准的（新记录拿到了 CreatedBy）
+    if (result?.SecurityUser) {
+        data.value = result;
+    }
+    routeId.value = String(user.value.UserName ?? "");
+    readonly.value = true;
+    uni.showToast({ title: t("AdminPage.savedTip"), icon: "none" });
+}
+
+async function onDelete(): Promise<void> {
+    await securityUserService.Delete(routeId.value);
+    uni.showToast({ title: t("AdminPage.deletedTip"), icon: "none" });
+    setTimeout(() => uni.navigateBack(), 600);
+}
+
+function onAction(action: AdminFormAction): void {
+    switch (action.key) {
+        case "amend":
+            readonly.value = false;
+            break;
+        case "save":
+            onSave();
+            break;
+        case "delete":
+            onDelete();
+            break;
+        case "cancel":
+            if (isNew.value || !routeId.value) {
+                uni.navigateBack();
+                return;
+            }
+            readonly.value = true;
+            load();
+            break;
+        default:
+            break;
+    }
+}
+
+function onBack(): void {
+    uni.navigateBack();
+}
+
+// 角色选择：跳 actor-enquiry（可多选），回传后按 ActorName 去重合并
+const actorPicker = useAdminPick<SecurityUserActorViewEntity>("actor");
+
+function onAddActor(): void {
+    actorPicker.open(
+        { page: "actorEnquiry", params: { multiple: "1" } },
+        (rows) => {
+            const exists = new Set(
+                data.value.SecurityUserActors.map(item => item.ActorName),
+            );
+            for (const row of rows) {
+                const actorName = String(row.ActorName ?? "");
+                if (!actorName || exists.has(actorName)) {
+                    continue;
+                }
+                const entity = new SecurityUserActorViewEntity();
+                entity.UserName = String(user.value.UserName ?? "");
+                entity.ActorName = actorName;
+                entity.ActorLocalName = String(row.ActorLocalName ?? "");
+                data.value.SecurityUserActors.push(entity);
+                exists.add(actorName);
+            }
+        },
+    );
+}
+
+function onDeleteActor(actorName: string): void {
+    data.value.SecurityUserActors = data.value.SecurityUserActors.filter(
+        item => item.ActorName !== actorName,
+    );
+}
+
+onLoad((options) => {
+    routeId.value = String(options?.id ?? "");
+    const mode = String(options?.mode ?? "view");
+    readonly.value = mode !== "create" && mode !== "amend";
+});
+
+// 详情取数排在登录守卫之后，且只跑一次
+let booted = false;
+useAuthGuard(() => {
+    if (booted) {
+        return;
+    }
+    booted = true;
+    if (routeId.value) {
+        load();
+    }
+});
+</script>
+
+<template>
+    <admin-form :nav-title="t('UserPage.detailTitle')" :show-nav-back="true" :hero-title="heroTitle"
+        :hero-chips="heroChips" :sections="sections" :model="user" :readonly="readonly" :actions="actions"
+        @back="onBack" @action="onAction" @field-change="onFieldChange">
+        <template #extra="{ readonly: ro }">
+            <view class="group">
+                <view class="group-head">
+                    <text class="group-title">
+                        {{ t("UserPage.actorTitle") }}
+                    </text>
+                    <view v-if="!ro && perm.canAmend.value" class="group-add" @click="onAddActor">
+                        <u-icon name="plus" size="24" color="#059669" />
+                        <text class="group-add-text">
+                            {{ t("UserPage.addActorBut") }}
+                        </text>
+                    </view>
+                </view>
+
+                <view class="group-card">
+                    <view v-if="!data.SecurityUserActors.length" class="group-empty">
+                        <text>
+                            {{ t("UserPage.actorEmpty") }}
+                        </text>
+                    </view>
+
+                    <view v-for="actor in data.SecurityUserActors" :key="actor.ActorName" class="actor-row">
+                        <view class="actor-text">
+                            <text class="actor-name">
+                                {{ actor.ActorLocalName || actor.ActorName || t("UserPage.unnamedActor") }}
+                            </text>
+                            <text v-if="actor.ActorLocalName" class="actor-sub">
+                                {{ actor.ActorName }}
+                            </text>
+                        </view>
+                        <u-icon v-if="!ro && perm.canAmend.value" name="trash" size="34" color="#c4c8cf"
+                            @click="onDeleteActor(actor.ActorName)" />
+                    </view>
+                </view>
+            </view>
+        </template>
+    </admin-form>
+</template>
+
+<style lang="scss" scoped>
+/* 角色明细：与 admin-form 的分组卡同一套视觉（细标题 + 白卡 + 行间细线） */
+.group {
+    margin-bottom: 28rpx;
+}
+
+.group-head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12rpx 12rpx;
+}
+
+.group-title {
+    font-size: 24rpx;
+    color: $u-tips-color;
+}
+
+.group-add {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.group-add-text {
+    margin-left: 4rpx;
+    font-size: 24rpx;
+    color: $u-type-primary;
+}
+
+.group-card {
+    padding: 0 28rpx;
+    overflow: hidden;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+}
+
+.group-empty {
+    padding: 40rpx 0;
+    font-size: 24rpx;
+    color: $u-tips-color;
+    text-align: center;
+}
+
+.actor-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 92rpx;
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid $u-border-color;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.actor-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.actor-name {
+    font-size: 28rpx;
+    color: $u-main-color;
+}
+
+.actor-sub {
+    margin-top: 4rpx;
+    font-size: 22rpx;
+    color: $u-tips-color;
+}
+</style>
diff --git a/uniapp/youjiala/src/router/routes.ts b/uniapp/youjiala/src/router/routes.ts
index 122fc97..67a11ca 100644
--- a/uniapp/youjiala/src/router/routes.ts
+++ b/uniapp/youjiala/src/router/routes.ts
@@ -15,6 +15,10 @@ export const PAGE_PATHS = {
   error401: "pages/error/page401",
   error403: "pages/error/page403",
   error404: "pages/error/page404",
+  // 管理端（旧 WebVue 的 security 域）：短地址按末段推导 => /user-enquiry 等
+  userEnquiry: "pages/security/user-enquiry",
+  userOperation: "pages/security/user-operation",
+  actorEnquiry: "pages/security/actor-enquiry",
 } as const;
 
 export type PageName = keyof typeof PAGE_PATHS;
@@ -49,7 +53,17 @@ export const AUTH_FREE_PAGES: PageName[] = [
  * DmsFileEnquiry），写错等于该页永远进不去；登记流程与反查方法见 src/md/permission.md。
  * 数组表示任一命中即放行。缺省（未登记）表示该页不做权限校验，登录校验照旧。
  */
-export const PAGE_PERMISSIONS: Partial<Record<PageName, PermissionNames>> = {};
+export const PAGE_PERMISSIONS: Partial<Record<PageName, PermissionNames>> = {
+  // 三个权限名均取自运行中后端的 security_function.permission_name（POST
+  // /SecurityFunction/FindMenus 实测 37 行，详见 src/md/admin-pages.md §4）。
+  // 注意 security 域的命名不统一：多数功能 perm 是实体名（SecurityActor/SecurityGroup），
+  // 但 UserEnquiry、UserOperation 的 perm 与功能名同名，逐字照抄，不要"顺手归一"。
+  // actorEnquiry 既作菜单入口，也被 user-operation 当"角色选择器"跳转，功能名 ActorEnquiry
+  // 的 permission_name 是实体名 SecurityActor。
+  userEnquiry: "UserEnquiry",
+  userOperation: "UserOperation",
+  actorEnquiry: "SecurityActor",
+};
 
 /** 带前导斜杠的真实路径，供 uni.* API 之外的路径比较、日志使用 */
 export function toRealPath(name: PageName): string {