kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(assets): vendor 资产迁入标准目录并全仓去除 zibll 标识

Browse Source 
- assets/vendor 全量迁移: fontawesome5→assets/fontawesome5, css→assets/css,
  js→assets/js/runtime(避开 14 个同名自有文件), img 合并去重→assets/img,
  fonts→assets/fonts; 删除 assets/vendor
- libs 五个与 widgets/third-party 字节相同的库不重复入库, loader paths 改指向
- 运行时切换: _win.uri=assets 根, loader baseUrl=/js/runtime, enlighter 注入
  路径同步; PHP 7 个引用文件切换并改名 $zibll_*→$runtime_*
- 去品牌: Qinver 头注释/品牌 console.log/演示链接清除, 默认文案中性化
- 功能标识符改名: zib__→aksrt__, zib_ajax→aksrt_ajax, window.zib→
  window.aksrtLegacy, zibllblock/*→aksrtblock/*, .zib-widget→.aksrt-panel,
  .zib-slider→.aksrt-slider, zib_menu_options meta 键等
- 自有 CSS 改名: legacy-utilities/compat-vars/footer shell
- admin SPA 重建; 契约测试同步(路径/断言/文件更名)
- 例外保留: tests/visual 对照环境与 fixtures 前缀(外部 Zibll 产品引用)

验证: php -l 133 个改动文件通过; runtime 86 个 JS node --check 通过;
契约测试 68/70(2 个失败经 stash 对照确认为存量问题)
This commit is contained in:
kate522
2026-08-22 16:16:30 +08:00
parent 4f2391fb64
commit 9375b1c30c
591 changed files with 1690 additions and 11041 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/runtime/poster-share.js
+546
View File
@@ -0,0 +1,546 @@
const poster = (function () {
const DEBUG = 0;
const WIDTH = 768;
const HEIGHT = 1168;
function init(config) {
const $container = document.querySelector(config.selector);
const $wrapper = createDom('div', 'id', 'wrapper');
const $canvas = createDom('canvas', 'id', 'canvas', 'block');
const $day = createDom('canvas', 'id', 'day');
const $date = createDom('canvas', 'id', 'date');
const $title = createDom('canvas', 'id', 'title');
const $content = createDom('canvas', 'id', 'content');
const $tags = createDom('canvas', 'id', 'tags');
const $logo = createDom('canvas', 'id', 'logo');
const $description = createDom('canvas', 'id', 'description');
appendChilds($wrapper, $canvas, $day, $date, $title, $content, $logo, $tags, $description);
$container.appendChild($wrapper);
const date = new Date();
// day
const $weekarray = [aksrt__('week_sun'), aksrt__('week_mon'), aksrt__('week_tue'), aksrt__('week_wed'), aksrt__('week_thu'), aksrt__('week_fri'), aksrt__('week_sat')];
const dayStyle = {
font: '35px Arial',
color: 'rgba(255, 255, 255, 1)',
position: 'left',
};
drawOneline($day, dayStyle, aksrt__('week_prefix') + $weekarray[date.getDay()]);
// date
const dateStyle = {
font: '28px Arial',
color: 'rgba(255, 255, 255, 1)',
position: 'left',
};
drawOneline($date, dateStyle, date.getMonth() + 1 + ' / ' + date.getDate());
// title canvas
const titleStyle = {
font: 'bold 35px Arial',
lineHeight: 1.5,
color: '#424242',
length: 2,
position: 'left',
};
titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font;
titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color;
titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position;
drawMoreLines($title, titleStyle, config.title);
// content canvas
const contentStyle = {
font: '25px Arial',
lineHeight: 1.5,
position: 'left',
color: 'rgba(88, 88, 88, 1)',
};
contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font;
contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color;
contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight;
contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position;
drawMoreLines($content, contentStyle, config.content);
// tags
const tagsStyle = {
font: '24px Roboto Slab',
position: 'left',
color: '#fc4e1f',
};
tagsStyle.color = (config.tagsStyle && config.tagsStyle.color) || tagsStyle.color;
drawMoreLines($tags, tagsStyle, config.tags);
// description
const descriptionStyle = {
font: '22px Arial',
color: '#b4b4b4',
lineHeight: 1.2,
position: 'center',
};
drawMoreLines($description, descriptionStyle, config.description);
// background image
const image = new Image();
image.crossOrigin = 'Anonymous';
const logo = new Image();
var logoLoadCount = 0;
logo.crossOrigin = 'Anonymous';
logo.src = config.logo;
logo.onerror = function () {
logoLoadCount++;
if (logoLoadCount < 3) {
logo.src = config.logo;
}
};
const qrcode = new Image();
qrcode.src = config.qrcode;
var loadCount = 0;
const setSrc = function () {
if (loadCount == 0) {
config.banner ? (image.src = config.banner) : (loadCount = 1);
}
if (loadCount == 1) {
config.banner_default ? (image.src = config.banner_default) : (loadCount = 2);
}
if (loadCount == 2) {
image.src = config.banner_spare;
}
onload();
};
const onload = function () {
$canvas.width = WIDTH;
$canvas.height = HEIGHT;
image.onload = function () {
const ctx = $canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
//绘制顶部主图
var img_height = config.type === 'product' ? $canvas.width : $canvas.height / 2;
const imgRect = coverImg($canvas.width, img_height, image.width, image.height);
ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 0, 0, $canvas.width, img_height);
//绘制顶部日期
ctx.drawImage($day, 0, 35);
ctx.drawImage($date, 0, 85);
//绘制标题竖线
ctx.strokeStyle = '#00a1ff';
ctx.lineWidth = 7;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(40, img_height + 38);
ctx.lineTo(40, img_height + 74);
ctx.stroke();
if (config.type === 'product') {
drawTextOverflow(ctx, config.title, $canvas.width, 1, 'bold 35px Arial', '#424242', 50, 20, img_height + 69);
//绘制价格
var price_color = config.is_points ? '#ff6f06' : '#FB3961';
var unit = config.is_points ? aksrt__('points') : aksrt__('currency_yuan');
var price_height = img_height + 69 + 50 + 20;
var price_c, unit_c, original_price_c, original_unit_c;
if (config.is_points) {
price_c = drawTextOverflow(ctx, config.price, $canvas.width, 1, 'bold 40px Arial', price_color, 50, 0, price_height);
unit_c = drawTextOverflow(ctx, unit, $canvas.width, 1, '22px Arial', price_color, 50, 0 + 4 + price_c.width, price_height - 2);
if (config.original_price) {
original_price_c = drawTextOverflow(ctx, config.original_price, $canvas.width - price_c.width - unit_c.width, 1, '25px Arial', '#878787', 50, 8 + price_c.width + unit_c.width, price_height);
original_unit_c = drawTextOverflow(ctx, unit, $canvas.width - price_c.width - unit_c.width, 1, '22px Arial', '#878787', 50, 8 + 2 + price_c.width + unit_c.width + original_price_c.width, price_height - 1);
//绘制划掉原价
ctx.strokeStyle = '#878787';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(8 + price_c.width + unit_c.width + 42, price_height - 15);
ctx.lineTo(8 + price_c.width + unit_c.width + 42 + original_unit_c.width + original_price_c.width, price_height - 3);
ctx.stroke();
}
} else {
unit_c = drawTextOverflow(ctx, unit, $canvas.width, 1, '26px Arial', price_color, 50, -10, price_height - 1);
price_c = drawTextOverflow(ctx, config.price, $canvas.width, 1, 'bold 40px Arial', price_color, 50, -10 + unit_c.width, price_height);
if (config.original_price) {
original_unit_c = drawTextOverflow(ctx, unit, $canvas.width - price_c.width - unit_c.width, 1, '23px Arial', '#878787', 50, 0 + price_c.width + unit_c.width, price_height - 1);
original_price_c = drawTextOverflow(ctx, config.original_price, $canvas.width - price_c.width - unit_c.width, 1, '25px Arial', '#878787', 50, 0 + price_c.width + unit_c.width + original_unit_c.width, price_height);
//绘制划掉原价
ctx.strokeStyle = '#878787';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(0 + price_c.width + unit_c.width + 42, price_height - 15);
ctx.lineTo(0 + price_c.width + unit_c.width + 42 + original_unit_c.width + original_price_c.width, price_height - 3);
ctx.stroke();
}
}
//绘制标签
var price_width = price_c.width + unit_c.width + (original_unit_c && original_unit_c.width ? original_unit_c.width : 0) + (original_price_c && original_price_c.width ? original_price_c.width : 0);
var tags_width = $canvas.width - price_width - 20;
if (tags_width > 200) {
drawTextOverflow(ctx, config.tags, tags_width, 1, '25px Arial', '#fc4545', 50, price_width + 50, price_height);
}
} else {
ctx.drawImage($title, 20, img_height + 40);
//绘制标签
ctx.drawImage($tags, 0, img_height + 160);
//绘制内容
ctx.drawImage($content, 0, img_height + 220);
}
//绘制底部logo和二维码
ctx.strokeStyle = 'rgba(122, 122, 122, 0.2)';
ctx.lineWidth = 2;
ctx.rect(30, $canvas.height - 230, $canvas.width - 60, 200);
ctx.stroke();
const logoRect = containImg(80, $canvas.height - 190, 300, 100, logo.width, logo.height);
ctx.drawImage(logo, logoRect.dx, logoRect.dy, logoRect.dWidth, logoRect.dHeight);
ctx.drawImage(qrcode, $canvas.width - 200, $canvas.height - 200, 120, 120);
ctx.drawImage($description, 0, $canvas.height - 60);
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = $canvas.toDataURL('image/png');
const radio = config.radio || 0.7;
img.width = WIDTH * radio;
img.height = HEIGHT * radio;
img.className = 'loaded-img';
ctx.clearRect(0, 0, $canvas.width, $canvas.height);
$canvas.style.display = 'none';
if ($container.querySelector('.loaded-img')) {
$container.querySelector('.loaded-img').src = img.src;
} else {
$container.appendChild(img);
}
$container.removeChild($wrapper);
$container.classList.add('loaded');
$.isFunction(config.callback) && config.callback($container);
};
image.onerror = function () {
loadCount++;
if (loadCount >= 3) {
return $.isFunction(config.onerror) && config.onerror($container);
}
setSrc();
};
};
setSrc();
}
/**
* canvas多行文本溢出
* @param {Object} context - canvas组件的绘图上下文
* @param {String} text - 文本内容
* @param {Number} maxWidth - 文本最大宽度
* @param {Number} maxRow - 文本最多显示行数
* @param {Number} fontSize - 字体样式
* @param {String} color - 文本颜色
* @param {Number} lineHeight - 文本行高
* @param {Number} x - 文本的x坐标
* @param {Number} y - 文本的y坐标
*/
function drawTextOverflow(context, text, maxWidth, maxRow, font, color, lineHeight, x, y) {
let arr = [];
let temp = '';
let row = [];
maxWidth = maxWidth - 120;
x = x + 38;
text = text.replace(/[\r\n]/g, ''); // 去除回车换行符
arr = text.split('');
context.fillStyle = color;
context.font = font;
if (context.measureText(text).width <= maxWidth) {
row.push(text);
} else {
for (let i = 0; i < arr.length; i++) {
// 超出最大行数且字符有剩余，添加...
if (row.length == maxRow && i < arr.length - 1) {
row[row.length - 1] += '...';
break;
}
// 字符换行计算
if (context.measureText(temp).width < maxWidth) {
temp += arr[i];
// 遍历到最后一位字符
if (i === arr.length - 1) {
row.push(temp);
}
} else {
i--; // 防止字符丢失
row.push(temp);
temp = '';
}
}
}
// 绘制文本
var width = 0;
for (let i = 0; i < row.length; i++) {
width = Math.max(width, context.measureText(row[i]).width);
context.fillText(row[i], x, y + i * lineHeight, maxWidth);
}
return {
width: width,
height: row.length * lineHeight,
};
}
function containImg(sx, sy, box_w, box_h, source_w, source_h) {
var dx = sx,
dy = sy,
dWidth = box_w,
dHeight = box_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
dHeight = (source_h * dWidth) / source_w;
dy = sy + (box_h - dHeight) / 2;
} else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
dWidth = (source_w * dHeight) / source_h;
dx = sx + (box_w - dWidth) / 2;
}
return {
dx,
dy,
dWidth,
dHeight,
};
}
function coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
}
function createDom(name, key, value, display = 'none') {
const $dom = document.createElement(name);
$dom.setAttribute(key, value);
$dom.style.display = display;
$dom.width = WIDTH;
return $dom;
}
function appendChilds(parent, ...doms) {
doms.forEach((dom) => {
parent.appendChild(dom);
});
}
function drawOneline(canvas, style, content) {
const ctx = canvas.getContext('2d');
canvas.height = parseInt(style.font.match(/\d+/), 10) + 20;
ctx.font = style.font;
ctx.fillStyle = style.color;
ctx.textBaseline = 'top';
let lineWidth = 0;
let idx = 0;
let truncated = false;
for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width;
if (lineWidth > canvas.width - 60) {
truncated = true;
idx = i;
break;
}
}
let padding = 30;
if (truncated) {
content = content.substring(0, idx);
padding = canvas.width / 2 - lineWidth / 2;
}
if (DEBUG) {
ctx.strokeStyle = '#6fda92';
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
if (style.position === 'center') {
ctx.textAlign = 'center';
ctx.fillText(content, canvas.width / 2, 2);
} else if (style.position === 'left') {
ctx.fillText(content, padding, 2);
} else {
ctx.textAlign = 'right';
ctx.fillText(content, canvas.width - padding, 2);
}
}
function drawMoreLines(canvas, style, content) {
const ctx = canvas.getContext('2d');
const fontHeight = parseInt(style.font.match(/\d+/), 10);
if (DEBUG) {
ctx.strokeStyle = '#6fda92';
ctx.strokeRect(0, 0, canvas.width, canvas.height);
}
ctx.font = style.font;
ctx.fillStyle = style.color;
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
let alignX = 0;
if (style.position === 'center') {
alignX = canvas.width / 2;
} else if (style.position === 'left') {
ctx.textAlign = 'left';
alignX = 40;
} else {
ctx.textAlign = 'right';
alignX = canvas.width - 40;
}
let lineWidth = 0;
let lastSubStrIndex = 0;
let offsetY = 2;
for (let i = 0; i < content.length; i++) {
lineWidth += ctx.measureText(content[i]).width;
if (lineWidth > canvas.width - 120) {
ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
offsetY += fontHeight * style.lineHeight;
lineWidth = 0;
lastSubStrIndex = i;
}
if (i === content.length - 1) {
ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
}
}
}
return {
init,
};
})();
$('body').on('click', '[poster-share]', function () {
var _this = $(this);
var _id = _this.attr('poster-share');
var modal_id = 'modal_poster_' + _id;
var modal_selector = '#' + modal_id;
var modal_html =
'<div class="modal fade flex jc" id="' +
modal_id +
'" tabindex="-1" role="dialog" aria-hidden="false">\
<div class="modal-dialog poster-share hover-show" role="document">\
<div class="modal-content" style="height:220px;overflow:hidden">\
<div class="poster-imgbox hover-show">\
</div>\
<div class="flex jc loading-mask absolute main-bg radius8"><div class="loading zts fa-2x"></div><div class="muted-2-color box-body">' + aksrt__('poster_generating') + '</div>\
</div>\
</div>\
<div class="padding-6 abs-center hover-show-con text-center" style="top:auto;"><a type="button" href="javascript:;" class="but cir jb-blue poster-download hide"><i class="fa fas fa-download" aria-hidden="true"></i></a><button data-dismiss="modal" class="but cir jb-yellow ml10"><svg aria-hidden="true" class="icon em12"><use xlink:href="#icon-close"></use></svg></button></div>\
</div>\
</div>';
$('.modal:not(' + modal_selector + ')').modal('hide');
var _modal = $(modal_selector);
if (_modal.length) {
_modal.modal('show');
return false;
}
$('body').append(modal_html);
_modal = $(modal_selector);
_modal.modal('show');
var ajax_data = {
action: 'poster_share_data',
id: _id,
};
function posterDownload(e) {
if (e == null) {
return;
}
_modal
.find('.poster-download')
.attr('href', _modal.find('img').attr('src'))
.attr('download', 'poster_' + _id + '.png')
.removeClass('hide');
var b_height = _modal.find('.poster-imgbox').outerHeight();
_modal.find('.loading-mask').fadeOut(200);
_modal.find('.modal-content').css({
height: b_height,
transition: '.2s',
});
setTimeout(function () {
_modal.find('.modal-content').css({
height: '',
overflow: '',
transition: '',
});
}, 200);
}
aksrt_ajax(
_this,
ajax_data,
function (_poster) {
poster.init({
banner: _poster.banner,
banner_default: _poster.banner_default,
banner_spare: _poster.banner_spare,
selector: modal_selector + ' .poster-imgbox',
title: _poster.title,
content: _poster.content,
logo: _poster.logo,
tags: _poster.tags,
description: _poster.description,
qrcode: _poster.qrcode,
type: _poster.type,
is_points: _poster.is_points,
price: _poster.price,
original_price: _poster.original_price,
onerror: function () {
notyf(aksrt__('poster_load_failed'), 'danger');
},
callback: posterDownload,
});
},
'stop',
true
);
});