fix(frontend): align layouts posts and widgets with zibll

2026-08-17 21:47:40 +08:00
1 parent 526364b438
commit 5d45eb053b
@@ -0,0 +1,35 @@
+{
+  "schema": "aksrt.page-visual-matrix.v1",
+  "reference": "https://localhost:9443",
+  "candidate": "https://localhost",
+  "viewports": {
+    "desktop": [1440, 1100],
+    "tablet": [1024, 1000],
+    "mobile": [390, 844]
+  },
+  "themes": ["light", "dark"],
+  "identities": ["guest", "member", "vip"],
+  "routes": [
+    {"id": "home", "path": "/", "states": ["default", "hover", "loading", "error"]},
+    {"id": "archive", "path": "/?post_type=post", "states": ["default", "numbered", "load-more", "infinite"]},
+    {"id": "category", "path": "/category/aksrt_zibll_v1_101/", "states": ["default", "empty"]},
+    {"id": "tag", "path": "/tag/aksrt_zibll_v1_103/", "states": ["default", "empty"]},
+    {"id": "search", "path": "/?s=AKSRT", "states": ["default", "empty", "focus"]},
+    {"id": "single", "path": "/aksrt_zibll_v1_301/", "states": ["default", "hover", "toc-open"]},
+    {"id": "resource", "path": "/aksrt_zibll_v1_303/", "states": ["locked", "authorized", "download"]},
+    {"id": "page", "path": "/sample-page/", "states": ["default"]},
+    {"id": "login", "path": "/wp-login.php", "states": ["default", "focus", "error"]},
+    {"id": "user", "path": "/user/", "states": ["guest", "member", "vip"]},
+    {"id": "orders", "path": "/user/orders/", "states": ["empty", "populated"]},
+    {"id": "vip", "path": "/user/vip/", "states": ["member", "vip"]},
+    {"id": "credits", "path": "/user/credits/", "states": ["member", "loading", "error"]}
+  ],
+  "acceptance": {
+    "dimension_delta_px_max": 2,
+    "pixel_difference_percent_max": 1.5,
+    "console_errors_max": 0,
+    "unexpected_network_failures_max": 0,
+    "a11y_critical_max": 0,
+    "a11y_serious_max": 0
+  }
+}
@@ -0,0 +1,23 @@
+# AKSRT / Zibll visual reference
+
+The reference stack is isolated from the AKSRT site and exposes Zibll at
+https://localhost:9443. The local Zibll source remains read-only.
+
+~~~powershell
+$env:ZIBLL_THEME_PATH='C:\Users\Xing\Desktop\zibll'
+docker compose -f tests/visual/docker-compose.zibll.yml up -d
+docker compose -f tests/visual/docker-compose.zibll.yml run --rm wp core install --url=https://localhost:9443 --title='Zibll Reference' --admin_user=visual_admin --admin_password='AKSRT-Visual-2026!' --admin_email=visual@example.test --skip-email
+docker compose -f tests/visual/docker-compose.zibll.yml run --rm wp theme activate zibll
+~~~
+
+Create or clean AKSRT fixtures inside its WordPress container:
+
+~~~powershell
+wp eval-file wp-content/themes/AKSRT-theme/tools/wp-cli-visual-fixtures.php create
+wp eval-file wp-content/themes/AKSRT-theme/tools/wp-cli-visual-fixtures.php cleanup
+~~~
+
+Use tests/fixtures/widget-golden-v1.json for the 222 component captures and
+tests/fixtures/page-visual-matrix-v1.json for page-level captures. Remove
+the reference stack with docker compose down -v only after fixture cleanup
+and screenshot verification.
@@ -0,0 +1,70 @@
+name: aksrt-zibll-visual-reference
+
+services:
+  db:
+    image: mariadb:11.4
+    environment:
+      MARIADB_DATABASE: zibll_reference
+      MARIADB_USER: zibll
+      MARIADB_PASSWORD: zibll
+      MARIADB_RANDOM_ROOT_PASSWORD: "1"
+    volumes:
+      - zibll_db:/var/lib/mysql
+    healthcheck:
+      test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+
+  wordpress:
+    image: wordpress:php8.1-apache
+    depends_on:
+      db:
+        condition: service_healthy
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_USER: zibll
+      WORDPRESS_DB_PASSWORD: zibll
+      WORDPRESS_DB_NAME: zibll_reference
+    volumes:
+      - zibll_wp:/var/www/html
+      - type: bind
+        source: ${ZIBLL_THEME_PATH}
+        target: /var/www/html/wp-content/themes/zibll
+        read_only: true
+
+  caddy:
+    image: caddy:2.8-alpine
+    depends_on:
+      - wordpress
+    ports:
+      - "9443:443"
+    volumes:
+      - ./zibll-Caddyfile:/etc/caddy/Caddyfile:ro
+      - zibll_caddy_data:/data
+
+  wp:
+    image: wordpress:cli-php8.1
+    depends_on:
+      db:
+        condition: service_healthy
+      wordpress:
+        condition: service_started
+    user: "33:33"
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_USER: zibll
+      WORDPRESS_DB_PASSWORD: zibll
+      WORDPRESS_DB_NAME: zibll_reference
+    volumes:
+      - zibll_wp:/var/www/html
+      - type: bind
+        source: ${ZIBLL_THEME_PATH}
+        target: /var/www/html/wp-content/themes/zibll
+        read_only: true
+    entrypoint: ["wp"]
+
+volumes:
+  zibll_db:
+  zibll_wp:
+  zibll_caddy_data:
@@ -0,0 +1,4 @@
+https://localhost {
+	tls internal
+	reverse_proxy wordpress:80
+}
@@ -0,0 +1,46 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+
+const root = path.resolve(__dirname, '..', '..');
+const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
+
+test('post list DOM follows the Zibll flex and multi-image contract', () => {
+  const markup = read('inc/helpers/posts-renderer/markup.php');
+  const data = read('inc/helpers/posts-renderer/post-data.php');
+  const cardStart = markup.indexOf('function aksrt_renderer_card');
+  const miniStart = markup.indexOf('function aksrt_renderer_mini');
+  const card = markup.slice(cardStart, miniStart);
+
+  assert.match(markup, /\['posts-item', 'list', 'ajax-item', 'flex'/);
+  assert.match(markup, /if \(!empty\(\$data\['is_mult_thumb'\]\)\)[\s\S]*?\$thumb = '';/);
+  assert.doesNotMatch(card, /item-excerpt|renderer_excerpt_markup/);
+  assert.match(data, /&& \$cfg\['mode'\] === 'list'/);
+  assert.match(data, /<a class=\"thumb-items contain\"/);
+});
+
+test('site shell has one float owner and fluid zones sit outside main', () => {
+  const layout = read('assets/css/frontend/layout.css');
+  const archive = read('inc/helpers/aksrt-archive.php');
+  const shell = layout.slice(layout.indexOf('Site shell'), layout.indexOf('页面标题区'));
+
+  assert.doesNotMatch(shell, /display:\s*grid/);
+  assert.match(shell, /width:\s*var\(--sidebar-width, 311px\)/);
+  assert.match(shell, /calc\(var\(--sidebar-width, 311px\) \+ 15px\)/);
+  assert.ok(archive.indexOf("$args['top_fluid']") < archive.indexOf('<main id="main-content"'));
+  assert.ok(archive.lastIndexOf("$args['bottom_fluid']") > archive.indexOf('</main>'));
+});
+
+test('widget shell uses Zibll wrappers without overriding post link colors', () => {
+  const renderer = read('src/WidgetSystem/FrontendRenderer.php');
+  const css = read('assets/widgets/frontend.css');
+
+  assert.match(renderer, /'zib-widget-wrap'/);
+  assert.match(renderer, /\$classes\[\] = 'zib-widget'/);
+  assert.match(renderer, /aksrt-widget__inner container/);
+  assert.doesNotMatch(css, /\.aksrt-widget a\s*\{[^}]*color:\s*inherit/);
+  assert.match(css, /\.aksrt-widget\.zib-widget\s*\{/);
+});