@quicktvui/ai 1.0.6 → 1.0.8

package/rules/.source/ESVue/src/runtime/style/css-resolve-auto-style.ts

@@ -0,0 +1,119 @@
+import { HippyElement } from "../element/hippy-element";
+import { NativeNodeProps } from "../../types";
+import { resolveBaseValueRecursive } from "./css-resolve-percent-style";
+
+/**
+ * 解析auto
+ */
+export function resolveAutoStyles(
+  node: HippyElement,
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  const resolved: NativeNodeProps = {};
+
+  // 展开 margin: auto 成四个方向
+  if (styleObject.margin === "auto") {
+    styleObject.marginTop = "auto";
+    styleObject.marginRight = "auto";
+    styleObject.marginBottom = "auto";
+    styleObject.marginLeft = "auto";
+    delete styleObject.margin;
+  }
+
+  for (const key of Object.keys(styleObject)) {
+    const val = styleObject[key];
+    if (val !== "auto") {
+      resolved[key] = val;
+      continue;
+    }
+
+    switch (key) {
+      case "width":
+      case "height": {
+        const parentBase = resolveBaseValueRecursive(
+          node.parentNode as HippyElement,
+          key,
+        );
+        let size = typeof parentBase === "number" ? parentBase : 0;
+
+        // 读取 min/max 限制
+        const minKey = key === "width" ? "minWidth" : "minHeight";
+        const maxKey = key === "width" ? "maxWidth" : "maxHeight";
+        const min = getResolvedStyleValue(node, minKey);
+        const max = getResolvedStyleValue(node, maxKey);
+        if (typeof min === "number" && size < min) {
+          size = min;
+        }
+        if (typeof max === "number" && size > max) {
+          size = max;
+        }
+        resolved[key] = size;
+        node.updateInlineStyle({ [key]: size });
+        break;
+      }
+
+      case "marginLeft":
+      case "marginRight": {
+        const width = getResolvedStyleValue(node, "width");
+        const parentWidth = resolveBaseValueRecursive(
+          node.parentNode as HippyElement,
+          "width",
+        );
+        if (typeof width === "number" && typeof parentWidth === "number") {
+          const space = (parentWidth - width) / 2;
+          resolved.marginLeft = space;
+          resolved.marginRight = space;
+        } else {
+          resolved[key] = 0;
+        }
+        break;
+      }
+
+      case "marginTop":
+      case "marginBottom": {
+        const height = getResolvedStyleValue(node, "height");
+        const parentHeight = resolveBaseValueRecursive(
+          node.parentNode as HippyElement,
+          "height",
+        );
+        if (typeof height === "number" && typeof parentHeight === "number") {
+          const space = (parentHeight - height) / 2;
+          resolved.marginTop = space;
+          resolved.marginBottom = space;
+        } else {
+          resolved[key] = 0;
+        }
+        break;
+      }
+
+      case "top":
+      case "left":
+      case "right":
+      case "bottom":
+        resolved[key] = 0;
+        break;
+
+      case "flexBasis":
+        resolved[key] = 0;
+        break;
+
+      default:
+        console.warn(`[resolveAutoStyles] unsupported auto style "${key}"`);
+        resolved[key] = 0;
+        break;
+    }
+  }
+  return resolved;
+}
+
+function getResolvedStyleValue(
+  node: HippyElement,
+  key: string,
+): number | undefined {
+  const css = node.getMatchedCssStyleWithCache?.()?.normal ?? {};
+  const inline = node.getInlineStyle?.() ?? {};
+  const value = inline[key] ?? css[key];
+
+  if (typeof value === "number") return value;
+  return undefined;
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-percent-style.ts

@@ -0,0 +1,111 @@
+import { HippyElement } from "../element/hippy-element";
+import { NativeNodeProps } from "../../types";
+
+export const percentProps = [
+  "width",
+  "height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "marginTop",
+  "marginLeft",
+  "marginRight",
+  "marginBottom",
+  "paddingTop",
+  "paddingLeft",
+  "paddingRight",
+  "paddingBottom",
+];
+
+const relativeBaseMap: Record<string, "width" | "height"> = {
+  width: "width",
+  left: "width",
+  right: "width",
+  marginLeft: "width",
+  marginRight: "width",
+  paddingLeft: "width",
+  paddingRight: "width",
+  height: "height",
+  top: "height",
+  bottom: "height",
+  marginTop: "height",
+  marginBottom: "height",
+  paddingTop: "height",
+  paddingBottom: "height",
+};
+
+export function resolvePercentStyles(
+  node: HippyElement,
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  const resolved: NativeNodeProps = {};
+
+  for (const key of Object.keys(styleObject)) {
+    const val = styleObject[key];
+    if (
+      typeof val === "string" &&
+      val.endsWith("%") &&
+      percentProps.includes(key)
+    ) {
+      const percent = parseFloat(val) / 100;
+      const base = relativeBaseMap[key];
+
+      // 向上找父节点确定基准值
+      const baseValue = resolveBaseValueRecursive(
+        node.parentNode as HippyElement,
+        base,
+      );
+
+      resolved[key] = typeof baseValue === "number" ? baseValue * percent : val; // fallback 原始字符串
+    } else {
+      resolved[key] = val;
+    }
+  }
+  return resolved;
+}
+
+export function resolveBaseValueRecursive(
+  node: HippyElement | null,
+  base: "width" | "height",
+): number | undefined {
+  const traceStack: HippyElement[] = [];
+
+  while (node && node.tagName !== "es-page-view") {
+    traceStack.push(node);
+
+    const cssStyle = node.getMatchedCssStyleWithCache?.()?.normal || {};
+    const inlineStyle = node.getInlineStyle?.() || {};
+    const mergedStyle = { ...cssStyle, ...inlineStyle };
+
+    const rawValue = mergedStyle[base];
+
+    if (typeof rawValue === "number") {
+      // 回填：用 setInlineStyle 设置中间节点
+      for (const n of traceStack) {
+        const origin = n.getInlineStyle?.() || {};
+        if (typeof origin[base] !== "number") {
+          n.setInlineStyle?.({ ...origin, [base]: rawValue });
+        }
+      }
+      return rawValue;
+    }
+
+    if (typeof rawValue === "string" && rawValue.endsWith("%")) {
+      const resolved = resolvePercentStyles(node, mergedStyle)[base];
+      if (typeof resolved === "number") {
+        for (const n of traceStack) {
+          const origin = n.getInlineStyle?.() || {};
+          if (typeof origin[base] !== "number") {
+            n.setInlineStyle?.({ ...origin, [base]: resolved });
+          }
+        }
+        return resolved;
+      }
+    }
+
+    node = node.parentNode as HippyElement;
+  }
+
+  return undefined;
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-rem-style.ts

@@ -0,0 +1,45 @@
+/**
+ * process the rem in the style unit and return the actual size value
+ *
+ * @param styleObject - style
+ */
+import { NativeNodeProps } from "../../types";
+import { parseRemStyle } from "../../util/rem";
+
+export const remProps = [
+  "fontSize",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "width",
+  "height",
+  "lineHeight",
+  "borderWidth",
+  "borderRadius",
+];
+
+export function resolveRemStyles(
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  let style: NativeNodeProps = {};
+  const keys = Object.keys(styleObject);
+
+  if (keys.length) {
+    keys.forEach((key) => {
+      style[key] = parseRemStyle(styleObject[key]);
+    });
+  } else {
+    style = styleObject;
+  }
+
+  return style;
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-scale-style.ts

@@ -0,0 +1,103 @@
+import { NativeNodeProps } from "../../types";
+import type { NeedToTyped } from "../../types";
+import { HippyElement } from "../element/hippy-element";
+import { getHippyCachedInstance } from "../../util/instance";
+
+export const scaleProps = [
+  // 尺寸相关
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+
+  // 外边距
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginVertical",
+  "marginHorizontal",
+
+  // 内边距
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingVertical",
+  "paddingHorizontal",
+
+  // 边框宽度
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+
+  // 圆角
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+
+  // 位置类（适用于 position: absolute / relative）
+  "top",
+  "right",
+  "bottom",
+  "left",
+
+  // 字体
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+
+  // 阴影（部分数值可能为字符串，如 '0px 2px 4px rgba(0,0,0,0.2)'，需额外处理）
+  "shadowOffsetX",
+  "shadowOffsetY",
+  "shadowRadius",
+
+  // 图片圆角、尺寸
+  "resizeMode",
+  "aspectRatio", // 非直接缩放，但常一起处理
+];
+
+export function resolveScaleStyles(
+  node: HippyElement,
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  let enableStylesScale =
+    (typeof __ES_VUE_FEATURE_FLAGS__ !== "undefined"
+      ? __ES_VUE_FEATURE_FLAGS__.ENABLE_STYLES_SCALE
+      : undefined) ?? true;
+
+  if (global.Hippy.device.platform.OS != "ohos" || !enableStylesScale) {
+    return styleObject;
+  }
+
+  let style: NativeNodeProps = {};
+  const keys = Object.keys(styleObject);
+
+  if (keys.length) {
+    keys.forEach((key) => {
+      if (scaleProps.includes(key)) {
+        style[key] = resolveScaleValue(styleObject[key]);
+      } else {
+        style[key] = styleObject[key];
+      }
+    });
+  } else {
+    style = styleObject;
+  }
+  return style;
+}
+
+export function resolveScaleValue(styleValue: NeedToTyped): NeedToTyped {
+  const { width, scale } = global.Hippy.device.screen;
+  const { ratioBaseWidth } = getHippyCachedInstance();
+  const scalePx = (width * scale) / ratioBaseWidth;
+  return (styleValue * scalePx) / scale;
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-style.ts

@@ -0,0 +1,24 @@
+import { HippyElement } from "../element/hippy-element";
+import { NativeNodeProps } from "../../types";
+import { resolveRemStyles } from "./css-resolve-rem-style";
+import { resolvePercentStyles } from "./css-resolve-percent-style";
+import { resolveVwVhStyles } from "./css-resolve-vwvh-style";
+import { resolveAutoStyles } from "./css-resolve-auto-style";
+import { resolveWidthHeightStyles } from "./css-resolve-width-height-style";
+import { resolveScaleStyles } from "./css-resolve-scale-style";
+
+export function resolveStyle(
+  node: HippyElement,
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  // 1. 先处理其他单位（px、pt、auto、vw 等）
+  // 2. 基于 parentResolvedStyle 处理百分比样式
+  // finally, get the style from the style attribute of the node and process the rem unit
+
+  const remStyles = resolveRemStyles(styleObject);
+  const vwvhStyles = resolveVwVhStyles(remStyles);
+  const widthHeightStyles = resolveWidthHeightStyles(node, vwvhStyles);
+  const autoStyles = resolveAutoStyles(node, widthHeightStyles);
+  const percentStyles = resolvePercentStyles(node, autoStyles);
+  return resolveScaleStyles(node, percentStyles);
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-variables.ts

@@ -0,0 +1,209 @@
+import { warn } from "../../util/log";
+import { translateColor } from "@extscreen/es3-vue-style-parser";
+import { CssAttribute } from "./css-selectors-match";
+import { Native } from "../native";
+
+/**
+ * 提取 CSS 中定义的变量：如 `--main-color: red;`
+ */
+export function extractCssVariables(
+  rules: CssAttribute[],
+): Record<string, string> {
+  const variables: Record<string, string> = {};
+
+  for (const rule of rules) {
+    for (const decl of rule.declarations) {
+      if (
+        decl.type === "declaration" &&
+        typeof decl.property === "string" &&
+        decl.property.startsWith("--")
+      ) {
+        const varName = decl.property.trim();
+        const varValue = decl.value;
+        if (varValue != null && varValue != undefined) {
+          variables[varName] = varValue;
+        }
+      }
+    }
+  }
+  return variables;
+}
+
+/**
+ * 解析css变量
+ * @param value
+ * @param cssVariables
+ */
+export function resolveVariables(
+  value: any,
+  cssVariables: Record<string, string>,
+): string | number {
+  if (typeof value === "string") {
+    // 替换所有 var()
+    value = resolveCssValue(value, cssVariables);
+    if (typeof value === "string") {
+      if (value.startsWith("calc(")) {
+        value = evaluateCalcExpression(value);
+      } else if (value.startsWith("clamp(")) {
+        value = evaluateClamp(value);
+      } else if (value.startsWith("min(")) {
+        value = evaluateMin(value);
+      } else if (value.startsWith("max(")) {
+        value = evaluateMax(value);
+      } else if (/^(rgb|rgba|hsl|hsla)\(/.test(value)) {
+        value = evaluateColorFunction(value);
+      }
+    }
+  }
+  return value;
+}
+
+// 工具：解析 var() 并展开为实际值
+export function resolveCssValue(
+  value: string,
+  cssVariables: Record<string, string | number>,
+  seen: Set<string> = new Set(),
+): string | number {
+  const trimmed = value.trim();
+
+  const fullVarMatch = /^var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)$/;
+  const exactMatch = trimmed.match(fullVarMatch);
+  if (exactMatch) {
+    const [, varName, fallback] = exactMatch;
+
+    if (seen.has(varName)) {
+      warn(`Circular reference detected in CSS variable: ${varName}`);
+      return fallback?.trim() ?? "";
+    }
+
+    seen.add(varName);
+
+    if (varName in cssVariables) {
+      const resolved = cssVariables[varName];
+      if (typeof resolved === "string") {
+        return resolveCssValue(resolved, cssVariables, new Set(seen));
+      } else {
+        return resolved;
+      }
+    } else if (fallback != null) {
+      return fallback.trim();
+    } else {
+      warn(`CSS variable ${varName} is not defined`);
+      return "";
+    }
+  }
+
+  // 含多个 var() 的情况
+  const varRegex = /var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)/g;
+  return value.replace(varRegex, (_, varName, fallback) => {
+    const localSeen = new Set(seen); // 👈 修复点：每个 var() 替换自己维护 seen
+    if (localSeen.has(varName)) {
+      warn(`Circular reference detected in CSS variable: ${varName}`);
+      return fallback?.trim() ?? "";
+    }
+    localSeen.add(varName);
+
+    const resolved = cssVariables[varName];
+    if (resolved != null) {
+      return resolveCssValue(
+        resolved.toString(),
+        cssVariables,
+        localSeen,
+      ).toString();
+    } else if (fallback != null) {
+      return fallback.trim();
+    } else {
+      warn(`CSS variable ${varName} is not defined`);
+      return "";
+    }
+  });
+}
+
+// 工具：尝试计算 calc 表达式，简单实现
+function evaluateCalcExpression(expr: string): string | number {
+  try {
+    const cleaned = expr.replace(/calc\((.+)\)/, "$1");
+    // 替换单位
+    const replaced = cleaned.replace(
+      /([0-9.]+)(vw|vh|px)?/g,
+      (_, num, unit = "") => {
+        try {
+          return __parseUnit(num + unit).toString();
+        } catch {
+          return num + unit; // 保留原值
+        }
+      },
+    );
+    // 注意：此处 eval 存在风险，仅适用于受控源码分析，建议使用 math.js 或手写表达式求值器
+    const result = Function(`"use strict"; return (${replaced})`)();
+    return typeof result === "number" ? result : result;
+  } catch (e) {
+    warn(`Failed to evaluate calc expression: ${expr}`);
+    return expr;
+  }
+}
+
+function evaluateClamp(value: string): string | number {
+  const match = value.match(
+    /clamp\(\s*([^\s,]+)\s*,\s*([^\s,]+)\s*,\s*([^\s,)]+)\s*\)/,
+  );
+  if (match) {
+    const [_full, min, mid, max] = match;
+    try {
+      const result = Math.max(
+        __parseUnit(min),
+        Math.min(__parseUnit(max), __parseUnit(mid)),
+      );
+      return result;
+    } catch (e) {
+      warn(`Invalid clamp values: ${value}`);
+    }
+  }
+  return value;
+}
+
+function evaluateMin(value: string): string | number {
+  const match = value.match(/min\(\s*([^\s,]+)\s*,\s*([^\s,)]+)\s*\)/);
+  if (match) {
+    const [_full, a, b] = match;
+    return Math.min(__parseUnit(a), __parseUnit(b));
+  }
+  return value;
+}
+
+function evaluateMax(value: string): string | number {
+  const match = value.match(/max\(\s*([^\s,]+)\s*,\s*([^\s,)]+)\s*\)/);
+  if (match) {
+    const [_full, a, b] = match;
+    return Math.max(__parseUnit(a), __parseUnit(b));
+  }
+  return value;
+}
+
+function evaluateColorFunction(value: string): string | number {
+  // 暂不解析颜色，直接返回原值，例如 rgba(255,0,0,0.5)
+  try {
+    const color = translateColor(value);
+    return color;
+  } catch (e) {
+    console.error(e);
+  }
+  return value;
+}
+
+function __parseUnit(value: string): number {
+  const vw = Native.Dimensions.screen.width * Native.Dimensions.screen.scale;
+  const vh = Native.Dimensions.screen.height * Native.Dimensions.screen.scale;
+
+  if (value.endsWith("vw")) {
+    return (parseFloat(value) / 100) * vw;
+  } else if (value.endsWith("vh")) {
+    return (parseFloat(value) / 100) * vh;
+  } else if (value.endsWith("px")) {
+    return parseFloat(value);
+  } else if (!isNaN(parseFloat(value))) {
+    return parseFloat(value); // 无单位，直接数值
+  } else {
+    throw new Error(`Unsupported unit: ${value}`);
+  }
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-vwvh-style.ts

@@ -0,0 +1,65 @@
+// 可按需添加你希望支持 vw/vh 的属性
+import { NativeNodeProps } from "../../types";
+import type { NeedToTyped } from "../../types";
+import { Native } from "../native";
+
+export const vwvhProps = [
+  "width",
+  "height",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "fontSize",
+  "lineHeight",
+  "borderWidth",
+  "borderRadius",
+];
+
+export function resolveVwVhStyles(
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  let style: NativeNodeProps = {};
+  const keys = Object.keys(styleObject);
+
+  if (keys.length) {
+    keys.forEach((key) => {
+      style[key] = parseVwVhStyle(styleObject[key]);
+    });
+  } else {
+    style = styleObject;
+  }
+
+  return style;
+}
+
+export function parseVwVhStyle(styleValue: NeedToTyped): NeedToTyped {
+  if (typeof styleValue !== "string") {
+    return styleValue;
+  }
+
+  const vwMatch = styleValue.match(/^([\d.]+)vw$/);
+  const vhMatch = styleValue.match(/^([\d.]+)vh$/);
+
+  if (vwMatch) {
+    const vw = parseFloat(vwMatch[1]);
+    const { width } = Native.Dimensions.screen;
+    return (vw / 100) * width * Native.Dimensions.screen.scale;
+  }
+
+  if (vhMatch) {
+    const { height } = Native.Dimensions.screen;
+    const vh = parseFloat(vhMatch[1]);
+    return (vh / 100) * height * Native.Dimensions.screen.scale;
+  }
+
+  return styleValue;
+}

package/rules/.source/ESVue/src/runtime/style/css-resolve-width-height-style.ts

@@ -0,0 +1,18 @@
+import { HippyElement } from "../element/hippy-element";
+import { NativeNodeProps } from "../../types";
+
+export function resolveWidthHeightStyles(
+  node: HippyElement,
+  styleObject: NativeNodeProps,
+): NativeNodeProps {
+  // const resolved: NativeNodeProps = {...styleObject};
+  // const hasWidth = resolved.width != null;
+  // const hasHeight = resolved.height != null;
+  // if (!hasWidth) {
+  //   resolved.width = 'auto';
+  // }
+  // if (!hasHeight) {
+  //   resolved.height = 'auto';
+  // }
+  return styleObject;
+}