- P1 通道：view-ui-plus 锁 1.3.24（A 类 loader + vite /static dev 代理核验，五档/断源降级走查） - P2 回收：删本地 layout.css/icons.css(+bak) 并清 main.ts import；骨架六类对齐 + 品牌色 var(--brand) 化；index CSS 779→393kB - P3 操作列：新增 utils/tableActions.ts（同构 UserBase，7 函数+2 表，无 AUTO_MODE）；7 页迁 actionColumn text 形态；旧 operatingHandle/operatingTextHandle 薄封装保留、签名不变 - P4 外观：接入三态头像 avatar.ts+UserAvatar.vue（同步自 YschTheme），顶栏裸 img 替换；外观三键红线零写 - 失效注释订正（layout.vue/def-editor）
This commit is contained in:
chenxing
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 默认头像样式（首字 / 剪影）公共源（YschTheme，scripts/sync-apps.mjs 下发三端 src/utils/avatar.ts）。
|
||||
* 取值链与主题同构（theme-core.js resolveEffectiveThemeState 的合成链写法）：
|
||||
* URL ?yh-avatar=text|silhouette（仅预览/排障覆盖：只影响读、绝不写回）
|
||||
* > localStorage["yh-avatar"]（用户自选，纯字符串）
|
||||
* > localStorage["yh-avatar-sch-default"]（学校默认，UserHome 登录后写入）
|
||||
* > "text"（系统默认）
|
||||
* 值域恒为 "text" | "silhouette"，键缺失/值非法均静默回落下一级，不报错不阻塞渲染。
|
||||
* 渲染三态与取字规则的唯一契约见 UserHome《设置页修复与默认头像落地方案》§10.1/§10.2。
|
||||
*/
|
||||
|
||||
export type AvatarStyle = "text" | "silhouette";
|
||||
|
||||
interface StorageLike {
|
||||
getItem(k: string): string | null;
|
||||
setItem(k: string, v: string): void;
|
||||
removeItem(k: string): void;
|
||||
}
|
||||
|
||||
export const AVATAR_STORAGE_KEY = "yh-avatar";
|
||||
|
||||
/** 学校默认头像存储键（UserHome 登录时写入；值格式与用户键相同，仅无"用户自选"语义） */
|
||||
export const SCHOOL_DEFAULT_AVATAR_STORAGE_KEY = "yh-avatar-sch-default";
|
||||
|
||||
export const AVATAR_STYLES: readonly AvatarStyle[] = ["text", "silhouette"];
|
||||
|
||||
export const DEFAULT_AVATAR_STYLE: AvatarStyle = "text";
|
||||
|
||||
/** 值合法才采用（用户键/学校键同一判据；脏数据不生效） */
|
||||
function readAvatarStyleOrNull(raw: string | null): AvatarStyle | null {
|
||||
return raw === "text" || raw === "silhouette" ? raw : null;
|
||||
}
|
||||
|
||||
/** URL 覆盖参数（?yh-avatar=text|silhouette）：非法值忽略，且只影响"读哪一档"、绝不写回 localStorage */
|
||||
function readAvatarOverride(): AvatarStyle | null {
|
||||
try {
|
||||
const search = (globalThis.location && globalThis.location.search) || "";
|
||||
const m = new RegExp("[?&]yh-avatar=([^&]*)").exec(search);
|
||||
return m ? readAvatarStyleOrNull(decodeURIComponent(m[1])) : null;
|
||||
} catch {
|
||||
/* 无 location 环境（测试/SSR）：无覆盖 */
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生效样式合成（与 resolveEffectiveThemeState 同构）：
|
||||
* URL 覆盖 > localStorage["yh-avatar"]（用户自选）> localStorage["yh-avatar-sch-default"]（学校默认）
|
||||
* > DEFAULT_AVATAR_STYLE。
|
||||
*/
|
||||
export function resolveAvatarStyle(storage: StorageLike | undefined = globalThis.localStorage): AvatarStyle {
|
||||
let style: AvatarStyle | null = null;
|
||||
if (storage) {
|
||||
style = readAvatarStyleOrNull(storage.getItem(AVATAR_STORAGE_KEY));
|
||||
if (!style) style = readAvatarStyleOrNull(storage.getItem(SCHOOL_DEFAULT_AVATAR_STORAGE_KEY));
|
||||
}
|
||||
if (!style) style = DEFAULT_AVATAR_STYLE;
|
||||
return readAvatarOverride() || style;
|
||||
}
|
||||
|
||||
/** 保存用户自选（直写 localStorage，无响应式；调用方操作后自行刷新 UI） */
|
||||
export function saveAvatarStyle(style: AvatarStyle, storage: StorageLike | undefined = globalThis.localStorage): void {
|
||||
try {
|
||||
storage?.setItem(AVATAR_STORAGE_KEY, style);
|
||||
} catch {
|
||||
/* 隐私模式/配额失败静默：仅丢持久化，不丢本次会话生效 */
|
||||
}
|
||||
}
|
||||
|
||||
/** 跟随学校默认 = 删用户自选键（之后回落学校默认/系统默认） */
|
||||
export function clearAvatarStyle(storage: StorageLike | undefined = globalThis.localStorage): void {
|
||||
try {
|
||||
storage?.removeItem(AVATAR_STORAGE_KEY);
|
||||
} catch {
|
||||
/* 隐私模式静默 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取字（顺序判定，先命中先返回）：含 "@" 先截 "@" 前段（邮箱取首字母）；
|
||||
* 首字符必须用展开 [...s][0]（禁用 charAt(0)，避免代理对截半出乱码）。
|
||||
* ASCII 字母转大写；纯数字回落 ""（剪影）；符号/emoji/空白回落 ""（剪影）；其余（CJK 等）原样。
|
||||
*/
|
||||
export function pickAvatarText(name: string | null | undefined): string {
|
||||
let s = String(name ?? "");
|
||||
const at = s.indexOf("@");
|
||||
if (at > -1) s = s.slice(0, at);
|
||||
const ch = [...s.trim()][0];
|
||||
if (ch === undefined) return "";
|
||||
if (/^[A-Za-z]$/.test(ch)) return ch.toUpperCase();
|
||||
if (/^[0-9]$/.test(ch)) return "";
|
||||
if (/^[\p{P}\p{S}\s]$/u.test(ch)) return "";
|
||||
return ch;
|
||||
}
|
||||
+12
-33
@@ -1,5 +1,5 @@
|
||||
import { IObj, UseTableSetting } from "@/types/Basics";
|
||||
import { resolveComponent } from "vue";
|
||||
import { actionIcon, actionText } from "@/utils/tableActions";
|
||||
export default class Utils {
|
||||
/**
|
||||
* 格式化日期
|
||||
@@ -76,7 +76,8 @@ export default class Utils {
|
||||
}
|
||||
|
||||
/**
|
||||
* iview Tooltip封装
|
||||
* iview Tooltip封装（旧 API，薄封装转调 tableActions.actionIcon，签名不变）
|
||||
* 2026-10-10 起 D1 修正：禁用态 onClick 置 null（原先禁用仍可点）。
|
||||
*/
|
||||
public static operatingHandle(
|
||||
h: any,
|
||||
@@ -85,30 +86,10 @@ export default class Utils {
|
||||
callback: Function,
|
||||
disabled: boolean = false,
|
||||
) {
|
||||
if (disabled) iconClass += " disabled";
|
||||
|
||||
return h(
|
||||
resolveComponent("Tooltip"),
|
||||
{
|
||||
content: info,
|
||||
placement: "bottom",
|
||||
transfer: true,
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: `operating-btn iconfont ${iconClass}`,
|
||||
onClick: callback,
|
||||
},
|
||||
null,
|
||||
),
|
||||
],
|
||||
},
|
||||
);
|
||||
return actionIcon(h, { key: info, label: info, icon: iconClass, on: () => callback(), disabled });
|
||||
}
|
||||
|
||||
/** 旧 API，薄封装转调 tableActions.actionText（签名不变；第三参仅识别 text-error → danger） */
|
||||
public static operatingTextHandle(
|
||||
h: any,
|
||||
info: string,
|
||||
@@ -116,15 +97,13 @@ export default class Utils {
|
||||
callback: Function,
|
||||
disabled: boolean = false,
|
||||
) {
|
||||
if (disabled) className += " disabled";
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: `operating-link ${className}`,
|
||||
onClick: disabled ? null : callback,
|
||||
},
|
||||
info,
|
||||
);
|
||||
return actionText(h, {
|
||||
key: info,
|
||||
label: info,
|
||||
danger: (className || "").includes("text-error"),
|
||||
on: () => callback(),
|
||||
disabled,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* 表格操作列统一原子（方案：outputs/table-action-buttons/操作列统一方案-20261010.md）
|
||||
*
|
||||
* 三条变化轴各自独立，每加一种形态 = 加 1 个渲染器 + RENDERERS 表加 1 行，不动既有分支：
|
||||
* 轴1 形态 actionIcon / actionText / actionMore —— 只画节点，零策略
|
||||
* 轴2 动作集 normalizeActions —— 纯数据：when 过滤 / disabled 归一 / danger 沉底
|
||||
* 轴3 溢出 splitActions —— 纯函数：直出与「更多」分档，零 DOM 可单测
|
||||
* 组装 actionCell / actionColumn —— 唯一懂 DOM 结构与表格列
|
||||
*
|
||||
* 形态由页面【显式声明】（mode: "icon" | "text"，缺省 text），不按动作数自动切换——
|
||||
* 工程间风格区分是既定口径（Notice=图标钮 / UserBase=文字链），各自恒定不漂移。
|
||||
* 「更多▾」只是长尾收纳（动作数 ≥ maxInline+2 时启用），不改变形态、不分档。
|
||||
* 菜单项纯文字不带图标（动作一多找不到贴切图标，文字更准）；transfer 到 body，
|
||||
* 避免 fixed/sticky 操作列裁剪与层叠上下文遮盖（原型已实证）。
|
||||
*/
|
||||
import { h, resolveComponent } from "vue";
|
||||
|
||||
export interface ActionItem {
|
||||
/** 稳定标识：溢出分桶按 key 去重，必填 */
|
||||
key: string;
|
||||
label: string;
|
||||
/** 点击回调，normalizeActions 阶段闭包绑定行数据 */
|
||||
on: (row: any) => void;
|
||||
/** iconfont 类名（仅 mode:"icon" 时消费；通道 icons.css 全集见 YschTheme） */
|
||||
icon?: string;
|
||||
/** 危险动作：文字转红（text-error）、恒沉底、「更多」内分隔线隔离 */
|
||||
danger?: boolean;
|
||||
/** 返回 false → 该行不渲染此动作（决定「有没有」） */
|
||||
when?: (row: any) => boolean;
|
||||
/** 直接置灰 */
|
||||
disabled?: boolean;
|
||||
/** 按行判定置灰（决定「能不能点」），disabled 显式值优先 */
|
||||
disabledWhen?: (row: any) => boolean;
|
||||
}
|
||||
|
||||
export interface ActionCellOpts {
|
||||
/** 形态显式声明：icon=图标圆钮 / text=文字链，缺省 text；不按动作数自动切换 */
|
||||
mode?: "icon" | "text";
|
||||
/** 超额动作收进「更多」，默认开（防 5+ 动作页面忘传爆宽） */
|
||||
collapsible?: boolean;
|
||||
/** 直出上限，默认 2；n ≤ maxInline+1 时全直出（3 个动作不进更多） */
|
||||
maxInline?: number;
|
||||
/** 列宽；缺省 icon = n*40+40 / text = 180 */
|
||||
width?: number;
|
||||
align?: "center" | "left" | "right";
|
||||
/** 缺省不固定列（与存量页面一致）；需要吸右显式传 "right" */
|
||||
fixed?: "right" | "left" | false;
|
||||
}
|
||||
|
||||
/* ============ 轴 1：渲染器（只画节点，零策略） ============ */
|
||||
|
||||
/** 图标圆钮：Tooltip > div.operating-btn（沿用通道既有 class，主题层零改动） */
|
||||
export function actionIcon(h: any, item: ActionItem) {
|
||||
return h(
|
||||
resolveComponent("Tooltip"),
|
||||
{ content: item.label, placement: "bottom", transfer: true },
|
||||
{
|
||||
default: () => [
|
||||
h("div", {
|
||||
class: `operating-btn iconfont ${item.icon}${item.disabled ? " disabled" : ""}`,
|
||||
onClick: item.disabled ? null : item.on,
|
||||
}),
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 文字链：danger 输出既有 text-error 类对接主题红色 */
|
||||
export function actionText(h: any, item: ActionItem) {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: `operating-link${item.danger ? " text-error" : ""}${item.disabled ? " disabled" : ""}`,
|
||||
onClick: item.disabled ? null : item.on,
|
||||
},
|
||||
item.label,
|
||||
);
|
||||
}
|
||||
|
||||
/** 「更多▾」+ 下拉菜单：iView Dropdown transfer 模式，菜单挂 body */
|
||||
export function actionMore(h: any, items: ActionItem[]) {
|
||||
return h(
|
||||
resolveComponent("Dropdown"),
|
||||
{ class: "op-more", placement: "bottom-end", transfer: true },
|
||||
{
|
||||
default: () => [
|
||||
h("div", { class: "operating-link op-more-label" }, [
|
||||
"更多",
|
||||
h(resolveComponent("Icon"), { type: "ios-arrow-down", class: "op-more-arrow" }),
|
||||
]),
|
||||
],
|
||||
list: () => [
|
||||
h(resolveComponent("DropdownMenu"), {}, {
|
||||
default: () => items.map((it) =>
|
||||
h(
|
||||
resolveComponent("DropdownItem"),
|
||||
{
|
||||
key: it.key,
|
||||
divided: !!(it.danger && items.length > 1),
|
||||
disabled: !!it.disabled,
|
||||
class: it.danger ? "op-item-danger" : "",
|
||||
onClick: () => it.on(),
|
||||
},
|
||||
{ default: () => it.label },
|
||||
),
|
||||
),
|
||||
}),
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/* ============ 轴 2：归一化（纯数据） ============ */
|
||||
export function normalizeActions(items: ActionItem[], row: any): ActionItem[] {
|
||||
return items
|
||||
.filter((it) => (it.when ? it.when(row) : true))
|
||||
.map((it) => ({
|
||||
...it,
|
||||
disabled: it.disabled ?? (it.disabledWhen ? it.disabledWhen(row) : false),
|
||||
on: () => it.on(row),
|
||||
}))
|
||||
.sort((a, b) => Number(!!a.danger) - Number(!!b.danger)); // danger 恒沉底（稳定排序）
|
||||
}
|
||||
|
||||
/* ============ 轴 3：溢出策略（纯函数，可单测、零 DOM） ============ */
|
||||
export function splitActions(items: ActionItem[], maxInline = 2): { inline: ActionItem[]; overflow: ActionItem[] } {
|
||||
if (items.length <= maxInline + 1) return { inline: items, overflow: [] };
|
||||
const inline = items.filter((it) => !it.danger).slice(0, maxInline);
|
||||
const inlineKeys = new Set(inline.map((it) => it.key));
|
||||
return { inline, overflow: items.filter((it) => !inlineKeys.has(it.key)) };
|
||||
}
|
||||
|
||||
/* ============ 组装层 ============ */
|
||||
const RENDERERS: Record<string, (h: any, item: ActionItem) => any> = { icon: actionIcon, text: actionText };
|
||||
|
||||
export function actionCell(h: any, items: ActionItem[], opts: ActionCellOpts = {}) {
|
||||
const mode = opts.mode ?? "text";
|
||||
const { inline, overflow } = (opts.collapsible ?? true)
|
||||
? splitActions(items, opts.maxInline ?? 2)
|
||||
: { inline: items, overflow: [] };
|
||||
|
||||
const render = RENDERERS[mode] || actionText;
|
||||
const children = inline.map((it) => render(h, it));
|
||||
if (overflow.length) children.push(actionMore(h, overflow));
|
||||
|
||||
return h("div", { class: "op-cell" }, children); // flex 横排容器，见 main.scss
|
||||
}
|
||||
|
||||
/** 产出可直接塞进 columns 的操作列对象；列宽按「声明数」估算，when 过滤后只宽不窄 */
|
||||
export function actionColumn(items: ActionItem[], opts: ActionCellOpts = {}) {
|
||||
const mode = opts.mode ?? "text";
|
||||
return {
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: opts.width ?? (mode === "icon" ? items.length * 40 + 40 : 180),
|
||||
align: opts.align ?? "center",
|
||||
...(opts.fixed === undefined ? {} : { fixed: opts.fixed === false ? undefined : opts.fixed }),
|
||||
render: (h: any, p: any) => actionCell(h, normalizeActions(items, p.row), opts),
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user