diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md new file mode 100644 index 0000000000..d498ff7afc --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/SKILL.md @@ -0,0 +1,72 @@ +--- +name: nutui-build-local-verify +description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。 +disable-model-invocation: true +--- + +# NutUI Build Local Verify + +## 在做什么 + +**只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。 + +**不扫描、不写入**：**`src/packages/<组件名>/demo.scss`**（各组件目录根下的单文件）、`**/demos/**`、路径中含 **`/demo/`**、测试与快照目录下的 `.scss`（与官方 `build.mjs` 里对 `**/demo.scss` 的 ignore 一致）。 + +- **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。 +- **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。 + +之后是否再跑 `pnpm run build`、是否用别的工具核对，由你自行决定；本 skill **不要求** build。 + +## 覆盖原 SCSS（推荐） + +在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。 + +若只需还原 **`src/packages/<组件>/demo.scss`**（当前脚本已跳过；若曾被旧版本误改）： + +```bash +find src/packages -name 'demo.scss' -exec git restore -- {} \; +``` + +**然后**在仓库根执行验证： + +```bash +pnpm run verify-scale +``` + +等价： + +```bash +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs +``` + +（`--in-place` / `-i` 与默认等价。） + +## 报告 + +路径：**`scale-verify/report.json`**。覆盖模式下看 `overwriteSource === true`、`changedFileCount`、`changedFiles`。 + +## 其它命令 + +```bash +# 删除仓库根下 scale-verify/ 整目录（含 report；不还原已覆盖的 src/packages） +node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --clean +``` + +**可选**（只镜像、不覆盖源码）： + +```bash +pnpm run verify-scale:mirror +``` + +`--mirror` 与 `--in-place` 不能同时使用。 + +## 核对清单 + +- [ ] 覆盖前已 git 可回滚 +- [ ] `changedFiles` 抽样无 `scale-px(0px)`、无重复嵌套 `scale-px` +- [ ] `font-size` / `font` 未被误改（转换器会跳过） + +## 给用户的一句话结论 + +- 脚本跑完 + `changedFileCount` + 列 2～3 个 `changedFiles` +- **覆盖的是真实源码**时，验证完用 **git 恢复** diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs new file mode 100644 index 0000000000..e3922ada2e --- /dev/null +++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs @@ -0,0 +1,136 @@ +#!/usr/bin/env node +/** + * 本地验证：默认就地写回 src/packages 下同一路径的组件 .scss（如 …/actionsheet/actionsheet.scss）。 + * 跳过 src/packages/**/demo.scss、demos、测试与快照（与 build.mjs ignore 一致）。 + * --mirror 只写 scale-verify/；不包含 build；自行 git diff / 恢复即可。 + */ +import fs from 'node:fs/promises' +import path from 'path' +import { createRequire } from 'node:module' + +const require = createRequire(import.meta.url) +const transform = require(path.resolve(process.cwd(), 'scripts/px-to-scale-px-in-component-scss.cjs')) + +const repoRoot = process.cwd() +const packagesRoot = path.resolve(repoRoot, 'src/packages') +const outRoot = path.resolve(repoRoot, 'scale-verify') +const reportPath = path.resolve(outRoot, 'report.json') + +const argv = new Set(process.argv.slice(2)) +const shouldClean = argv.has('--clean') +const mirrorMode = argv.has('--mirror') +/** 默认覆盖 src/packages 原 .scss；传 --mirror 则只写 scale-verify/ */ +const inPlace = !mirrorMode + +if (mirrorMode && (argv.has('--in-place') || argv.has('-i'))) { + console.error('[scale-verify] 不能同时使用 --mirror 与 --in-place / -i') + process.exit(1) +} + +function isScssFile(name) { + return name.endsWith('.scss') +} + +function shouldSkip(relPath) { + const p = relPath.replaceAll('\\', '/') + // 与 build.mjs 的 ignore 一致：**/demo.scss 不参与 px→scale 写回 + if (path.posix.basename(p) === 'demo.scss') return true + if (p.includes('/demo/')) return true + if (p.includes('/demos/')) return true + if (p.includes('/__test__/')) return true + if (p.includes('/__tests__/')) return true + if (p.includes('/__snapshots__/')) return true + if (p.startsWith('.scale-verify/')) return true + return false +} + +async function walkScssFiles(dir, base = dir, list = []) { + const entries = await fs.readdir(dir, { withFileTypes: true }) + for (const entry of entries) { + const abs = path.resolve(dir, entry.name) + const rel = path.relative(base, abs) + if (entry.isDirectory()) { + await walkScssFiles(abs, base, list) + continue + } + if (!entry.isFile() || !isScssFile(entry.name)) continue + if (shouldSkip(rel)) continue + list.push(abs) + } + return list +} + +async function ensureReportDir() { + await fs.mkdir(outRoot, { recursive: true }) +} + +async function prepareOutputLayout() { + if (shouldClean) { + await fs.rm(outRoot, { recursive: true, force: true }) + console.log('[scale-verify] cleaned:', path.relative(repoRoot, outRoot)) + return + } + + await fs.rm(outRoot, { recursive: true, force: true }) + await fs.mkdir(outRoot, { recursive: true }) +} + +async function main() { + await prepareOutputLayout() + if (shouldClean) { + return + } + + const files = await walkScssFiles(packagesRoot) + files.sort() + + const changed = [] + for (const absFile of files) { + const rel = path.relative(packagesRoot, absFile) + const source = await fs.readFile(absFile, 'utf8') + const transformed = transform(source) + if (source === transformed) continue + + const targetFile = inPlace ? absFile : path.resolve(outRoot, rel) + if (!inPlace) { + await fs.mkdir(path.dirname(targetFile), { recursive: true }) + } + await fs.writeFile(targetFile, transformed, 'utf8') + changed.push(rel.replaceAll('\\', '/')) + } + + await ensureReportDir() + const scssWriteRoot = inPlace + ? path.relative(repoRoot, packagesRoot).replaceAll('\\', '/') + : path.relative(repoRoot, outRoot).replaceAll('\\', '/') + + const report = { + generatedAt: new Date().toISOString(), + mode: inPlace ? 'in-place' : 'mirror', + overwriteSource: inPlace, + /** 本次写入的 SCSS 根路径：原地为 src/packages，镜像为仓库根下 scale-verify */ + scssWriteRoot, + /** 镜像模式下的实验目录；原地模式为 null */ + outDir: inPlace ? null : path.relative(repoRoot, outRoot).replaceAll('\\', '/'), + reportPath: path.relative(repoRoot, reportPath).replaceAll('\\', '/'), + totalScssFiles: files.length, + changedFileCount: changed.length, + changedFiles: changed, + } + await fs.writeFile(reportPath, `${JSON.stringify(report, null, 2)}\n`, 'utf8') + + console.log('[scale-verify] mode:', report.mode) + if (!inPlace) { + console.log('[scale-verify] outDir:', report.outDir) + } else { + console.log('[scale-verify] wrote into:', path.relative(repoRoot, packagesRoot)) + } + console.log('[scale-verify] totalScssFiles:', report.totalScssFiles) + console.log('[scale-verify] changedFileCount:', report.changedFileCount) + console.log('[scale-verify] report:', path.relative(repoRoot, reportPath)) +} + +main().catch((err) => { + console.error('[scale-verify] failed:', err) + process.exitCode = 1 +}) diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md index 057b43070d..4c2fcc482d 100644 --- a/.cursor/skills/nutui-proportional-scaling/SKILL.md +++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md @@ -4,10 +4,13 @@ description: >- NutUI React proportional scaling on branch feat_resize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font - tokens in variables.scss & theme-*.scss; profiles standard / large / elderly; + tokens in variables.scss & theme-*.scss; npm run build / build:taro run + scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly; commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配, 等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or - editing component SCSS for resize. + editing component SCSS for resize; SCSS: prefer calc($token + Npx) over + #{} in calc, use outer calc() when mixing tokens that compile to + var(--nutui-*). --- # NutUI React 等比适配 @@ -48,6 +51,12 @@ description: >- **主题字号档**（`theme-default.scss` / `theme-dark.scss`）：`--nutui-font-size-*` 使用 `calc(Npx * var(--nut-scale-font, var(--nut-scale-f, 1)))`，与 **大字/老年** 档位对齐。 +### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px` + +- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库里的组件 SCSS。 +- 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。 +- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。 + --- ## 3. 提交里固化的规范（务必遵守） @@ -70,6 +79,21 @@ description: >- - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。 +### 3.5 组件 `.tsx` 图标尺寸治理（props → class → 变量） + +- 对 `@nutui/icons-react` / `@nutui/icons-react-taro`：尽量避免在组件上写死 `size={12}`、`width={16}`、`height={16}`。 +- **推荐模式**：在 `.tsx` 里只加语义化 `className`，到对应 `.scss` 里用变量控制尺寸（优先 `$icon-size-*` 阶梯，或组件专用变量）。 +- 若是内联 ``（非 NutUI 图标组件）也遵循同一规则：移除 `width/height` 字面量，改为 class，并在 SCSS 用变量（可新增如 `$xxx-icon-size`，默认 `scale-icon-px(Npx)`）。 +- 新增尺寸档优先沉淀到 `variables.scss`（如 `$icon-size-11`、`$icon-size-16`），避免同一像素值在多个组件重复散落。 + +### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致） + +- **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。 +- **与 `var(--nutui-*)` 一起运算时**：许多 token 会展开为 **`var(--nutui-…, calc(Npx * var(--nut-scale-f, 1)))`**。此时**不要**指望纯 Sass 括号在声明值里做「减法 + 固定 px」，例如 + **`margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px`** + 会在编译结果里拼成 **`var(...)var(...)`** 一类**缺少运算符**的非法片段。应写成 **`margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px`**，让整条长度在**一个** CSS `calc()` 里由浏览器解析。 +- **`100%` 与长度相减**：用 **`calc(100% - Npx)`** 一层即可，避免出现 **`100% - calc(...)`** 这类单位不合法的组合（历史上有过 postcss / 手工替换导致的损坏，以当前组件 SCSS 为准）。 + --- ## 4. 业务接入清单 @@ -85,6 +109,9 @@ description: >- - [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。 +- [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。 +- [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。 +- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。 diff --git a/package.json b/package.json index def1792648..823e6fc138 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,9 @@ "e2e:run:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:run:taro", "e2e:open:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:open:taro", "update:taro:entry": "node ./scripts/harmony/update-taro-entry", - "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro" + "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro", + "verify-scale": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs", + "verify-scale:mirror": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --mirror" }, "lint-staged": { "*.{scss,md}": "prettier --write", diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index c5e78f4674..421a8708a7 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/taro/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -352,9 +355,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( @@ -444,9 +448,10 @@ async function buildHarmonyCSS(themeName = '') { ), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/build.mjs b/scripts/build.mjs index 947f1d11bd..2f366a0ee8 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -7,6 +7,7 @@ import scss from 'postcss-scss' import { copy } from 'fs-extra' import { deleteAsync } from 'del' import { fileURLToPath } from 'url' +import { createRequire } from 'node:module' import { execSync } from 'child_process' import { access, mkdir, readFile, writeFile } from 'fs/promises' import { basename, dirname, extname, join, relative, resolve } from 'path' @@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) +const require = createRequire(import.meta.url) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') const dist = 'release/h5/dist' const filePath = resolve(__dirname, '../package.json') const packageJson = JSON.parse(readFileSync(filePath, 'utf8')) @@ -301,9 +304,10 @@ async function buildCSS(themeName = '') { join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), ) for (const file of componentScssFiles) { - const scssContent = await readFile(join(__dirname, '../', file), { + let scssContent = await readFile(join(__dirname, '../', file), { encoding: 'utf8', }) + scssContent = pxToScalePxInComponentScss(scssContent) // countup 是特例 const base = basename(file) const loadPath = join( diff --git a/scripts/generate-css-for-rtl-comparison.js b/scripts/generate-css-for-rtl-comparison.js index 1475746e4f..f985f6a039 100644 --- a/scripts/generate-css-for-rtl-comparison.js +++ b/scripts/generate-css-for-rtl-comparison.js @@ -21,6 +21,8 @@ const variables = fs.readFileSync( path.join(__dirname, '../src/styles/variables.scss') ) +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + function postcssRemoveRtl() { return { postcssPlugin: 'postcss-remove-rtl', @@ -50,6 +52,7 @@ components.forEach((component) => { ) ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.rtl.css` diff --git a/scripts/px-to-scale-px-in-component-scss.cjs b/scripts/px-to-scale-px-in-component-scss.cjs new file mode 100644 index 0000000000..f2c754a870 --- /dev/null +++ b/scripts/px-to-scale-px-in-component-scss.cjs @@ -0,0 +1,137 @@ +/** + * 仅在发布构建链路中（内存里）把组件 SCSS 声明值里的裸 Npx 转为 scale-px(Npx)， + * 与 .cursor/skills/nutui-proportional-scaling/SKILL.md 约定一致；不修改磁盘上的源文件。 + * + * 规则摘要： + * - 仅处理 Declaration，不处理 @media 等 at-rule 参数（避免断点被 scale）。 + * - 跳过 font-size、font、以及自定义属性 --*。 + * - 整段保留 scale-font-px(...) / scale-icon-px(...)；已写的 scale-px(...) 不嵌套。 + * - 数值 0 的 px → 字面量 0（不写 scale-px(0px)）。 + * - 已是 calc(Npx * var(--nut-scale-f,...)) 的不再包 scale-px。 + * - 含 Sass 变量 $ 且含除法 / 的 calc(...) 整段先占位再替换 px（避免 calc($var / 2) 被 postcss-scss 拆坏）。 + */ +const postcss = require('postcss') +const postcssScss = require('postcss-scss') + +const PROP_SKIP = new Set(['font-size', 'font']) + +function matchingCloseParen(str, openParenIdx) { + let depth = 1 + for (let i = openParenIdx + 1; i < str.length; i++) { + const c = str[i] + if (c === '(') depth++ + else if (c === ')') { + depth-- + if (depth === 0) return i + } + } + return -1 +} + +/** 最左侧的「体内不含 calc(」的 calc 块（同一层里先处理最左） */ +function findInnermostCalcRange(str) { + let best = null + let scan = 0 + const lower = str.toLowerCase() + while (true) { + const idx = lower.indexOf('calc(', scan) + if (idx === -1) break + const openParen = idx + 4 + const close = matchingCloseParen(str, openParen) + if (close < 0) { + scan = idx + 5 + continue + } + const body = str.slice(openParen + 1, close) + if (!body.toLowerCase().includes('calc(')) { + if (!best || idx < best.start) { + best = { start: idx, end: close + 1, body } + } + } + scan = idx + 5 + } + return best +} + +/** 体内同时有 $ 与 / 时整段保护（典型：calc(#{$var} / 2)） */ +function shouldProtectCalcBody(body) { + return /\$/.test(body) && /\//.test(body) +} + +function protectCalcsForPxPass(value) { + const saved = [] + let v = value + while (true) { + const m = findInnermostCalcRange(v) + if (!m) break + if (!shouldProtectCalcBody(m.body)) break + saved.push(v.slice(m.start, m.end)) + v = `${v.slice(0, m.start)}__NUT_CALC_${saved.length - 1}__${v.slice(m.end)}` + } + return { value: v, saved } +} + +function restoreCalcs(value, saved) { + let out = value + for (let i = saved.length - 1; i >= 0; i--) { + out = out.split(`__NUT_CALC_${i}__`).join(saved[i]) + } + return out +} + +function wrapBarePxInSegment(seg) { + return seg.replace( + /(-?\d*\.?\d+)px\b(?!\s*\*\s*var\(\s*--nut-scale-f)/g, + (full, numStr) => { + const n = parseFloat(numStr) + if (!Number.isFinite(n) || n === 0) return '0' + return `scale-px(${numStr}px)` + }, + ) +} + +/** 在非 scale-px(...) 段内包裸 px */ +function transformScalePxChunks(chunk) { + return chunk.split(/(\bscale-px\s*\([^)]*\))/g).map((part, i) => { + if (i % 2 === 1) return part + return wrapBarePxInSegment(part) + }).join('') +} + +function transformDeclValue(value) { + if (value == null || !/[\d.]+\s*px/i.test(value)) return value + const { value: v1, saved } = protectCalcsForPxPass(value) + let out = v1 + .split(/(\bscale-(?:font|icon)-px\s*\([^)]*\))/g) + .map((outer, oi) => { + if (oi % 2 === 1) return outer + return transformScalePxChunks(outer) + }) + .join('') + return restoreCalcs(out, saved) +} + +function pxToScalePxInComponentScssPlugin() { + return { + postcssPlugin: 'nutui-px-to-scale-px-in-component-scss', + Once(root) { + root.walkDecls((decl) => { + const prop = decl.prop.toLowerCase() + if (PROP_SKIP.has(prop)) return + if (decl.prop.startsWith('--')) return + decl.value = transformDeclValue(decl.value) + }) + }, + } +} + +function pxToScalePxInComponentScss(source) { + const result = postcss([pxToScalePxInComponentScssPlugin()]).process(source, { + from: undefined, + syntax: postcssScss, + }) + return result.css +} + +module.exports = pxToScalePxInComponentScss +module.exports.pxToScalePxInComponentScss = pxToScalePxInComponentScss diff --git a/scripts/replace-css-var.js b/scripts/replace-css-var.js index 5c7b278c42..cdbe546360 100644 --- a/scripts/replace-css-var.js +++ b/scripts/replace-css-var.js @@ -24,6 +24,8 @@ const theme = fs.readFileSync( path.join(__dirname, '../src/styles/theme-default.scss'), ).toString().replace('@import "./jd-font";', '').replace(`@import './jd-font';`, '') +const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs') + const exclude = ['icon'] components.forEach((component) => { const componentName = component.name.toLowerCase() @@ -37,6 +39,7 @@ components.forEach((component) => { ), ) .toString() + content = pxToScalePxInComponentScss(content) let to = path.join( __dirname, `../src/packages/${componentName}/${componentName}.harmony.css`, @@ -56,14 +59,18 @@ components.forEach((component) => { content = content.replace(m, '') const splitScssName = m.match(/\'\.\/([a-z]+)\.scss/) if (splitScssName && splitScssName.length == 2) { - componentSplitScss.push(fs - .readFileSync( - path.join( - __dirname, - `../src/packages/${componentName}/${splitScssName[1]}.scss`, - ), - ) - .toString()) + componentSplitScss.push( + pxToScalePxInComponentScss( + fs + .readFileSync( + path.join( + __dirname, + `../src/packages/${componentName}/${splitScssName[1]}.scss`, + ), + ) + .toString(), + ), + ) } } diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index 5c341c91fc..b50db33779 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -30,7 +30,7 @@ &-footer { width: 100%; height: scale-px(54px); - padding: scale-px(6px) 0px 0; + padding: scale-px(6px) 0 0; border-top: scale-px(1px) solid $color-border; &-btn { diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index d70948064e..122804031e 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -39,7 +39,7 @@ display: flex; align-items: center; width: 100%; - margin: 0px auto; + margin: 0 auto; padding: scale-px(10px) 0; &-bar-wrapper { diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index f227f259b2..ee184339f9 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/src/packages/avatarcropper/avatarcropper.taro.tsx @@ -4,9 +4,8 @@ import React, { useMemo, useCallback, FunctionComponent, - useLayoutEffect, } from 'react' -import Taro, { createSelectorQuery } from '@tarojs/taro' +import Taro, { useReady, createSelectorQuery } from '@tarojs/taro' import classNames from 'classnames' import { Canvas, CommonEventFunction, View } from '@tarojs/components' import { getWindowInfo } from '@/utils/taro/get-system-info' @@ -138,7 +137,7 @@ export const AvatarCropper: FunctionComponent< cropperCanvasContext: null, }) - useLayoutEffect(() => { + useReady(() => { if (showAlipayCanvas2D) { const { canvasId } = canvasAll createSelectorQuery() @@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent< }) .exec() } - }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth]) + }) useEffect(() => { setCanvasAll({ @@ -694,5 +693,4 @@ export const AvatarCropper: FunctionComponent< ) } - AvatarCropper.displayName = 'NutAvatarCropper' diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx index 8bb4286f94..13e2ed6083 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -1,7 +1,10 @@ import React, { CSSProperties, useCallback, useMemo } from 'react' import type { MouseEvent } from 'react' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { + View, + // Button as TaroButton, +} from '@tarojs/components' import { Loading } from '@nutui/icons-react-taro' import { ComponentDefaults } from '@/utils/typings' import { harmony } from '@/utils/taro/platform' diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index 8bd0d37768..d8c07c6fa5 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -60,8 +60,8 @@ align-items: center; justify-content: space-around; height: scale-px(36px); - border-radius: 0px 0px scale-px(12px) scale-px(12px); - box-shadow: 0px scale-px(4px) scale-px(10px) 0px + border-radius: 0 0 scale-px(12px) scale-px(12px); + box-shadow: 0 scale-px(4px) scale-px(10px) 0 rgba($color: #000000, $alpha: 0.06); } @@ -171,13 +171,13 @@ border-radius: $calendar-day-active-border-radius; &.active-start { - border-radius: 0px; + border-radius: 0; border-top-left-radius: $calendar-day-active-border-radius; border-bottom-left-radius: $calendar-day-active-border-radius; } &.active-end { - border-radius: 0px; + border-radius: 0; border-top-right-radius: $calendar-day-active-border-radius; border-bottom-right-radius: $calendar-day-active-border-radius; } diff --git a/src/packages/calendar/demo.scss b/src/packages/calendar/demo.scss index c39e1f3a24..4101628312 100644 --- a/src/packages/calendar/demo.scss +++ b/src/packages/calendar/demo.scss @@ -22,7 +22,7 @@ } .d_div { - margin: 0px 5px; + margin: 0 5px; .d_btn { background: #fa3f19; diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss index 6bba3e5099..dfee5da62a 100644 --- a/src/packages/calendarcard/calendarcard.scss +++ b/src/packages/calendarcard/calendarcard.scss @@ -3,7 +3,6 @@ border-radius: scale-px(12px); overflow: hidden; font-size: $calendar-base-font-size; - line-height: $calendar-base-font-size; color: $color-title; &-header { @@ -12,6 +11,7 @@ align-items: center; justify-content: space-between; font-weight: normal; + line-height: $line-height-l; &-left, &-right { @@ -19,7 +19,6 @@ flex-direction: row; cursor: pointer; margin: scale-px(16px); - line-height: 1; .left { margin-left: scale-px(8px); @@ -32,8 +31,8 @@ } &-icon { - width: 18px; - height: 18px; + width: scale-px(18px); + height: scale-px(18px); display: block; } diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index eb6cb1000f..803205197f 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -27,7 +27,7 @@ &-title { @include moreline-ellipsis(); - line-height: 1.5; + line-height: $line-height-2xl; font-size: $font-size-base; color: $color-title; } @@ -69,7 +69,7 @@ align-items: center; &-name { - line-height: 1.5; + line-height: $line-height-xl; color: $color-text; font-size: $font-size-s; padding-top: scale-px(4px); diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 940f910880..73a729518d 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -12,9 +12,9 @@ &-icon-wrap { font-size: 0px; - line-height: 0px; + line-height: 0; border-radius: 50%; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(255, 15, 35, 0.2); + box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(255, 15, 35, 0.2); } &-icon-checked { @@ -43,7 +43,7 @@ &-icon-indeterminate { color: $color-primary; background-color: $white; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; + box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333; border-radius: 50%; &.nut-checkbox-icon-disabled { @@ -103,10 +103,10 @@ bottom: 0; width: 0; height: 0; - border-top: scale-icon-px(10px) solid transparent; - border-left: scale-icon-px(10px) solid transparent; - border-bottom: scale-icon-px(10px) solid $color-primary; - border-right: scale-icon-px(10px) solid $color-primary; + border-top: $icon-size-10 solid transparent; + border-left: $icon-size-10 solid transparent; + border-bottom: $icon-size-10 solid $color-primary; + border-right: $icon-size-10 solid $color-primary; display: flex; align-items: flex-end; justify-content: flex-end; @@ -117,7 +117,7 @@ height: scale-px(12px); position: absolute; color: $white; - right: 0px; + right: 0; bottom: 0; transform: translate(scale-px(-1px), scale-px(-2px)); } diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index 298f1549ee..84f720f48c 100644 --- a/src/packages/collapseitem/collapseitem.scss +++ b/src/packages/collapseitem/collapseitem.scss @@ -57,7 +57,7 @@ flex: 1; display: flex; justify-content: flex-end; - padding: 0px scale-px(20px); + padding: 0 scale-px(20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index 3abbf27a8a..8709501775 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -54,18 +54,34 @@ export type NutCSSVariables = | 'nutuiFontSizeXxs' | 'nutuiFontSizeXs' | 'nutuiFontSizeS' + | 'nutuiFontSizeM' | 'nutuiFontSizeBase' | 'nutuiFontSizeL' + | 'nutuiFontSizeMd' | 'nutuiFontSizeIcon' | 'nutuiFontSizeXl' + | 'nutuiFontSize2Xl' | 'nutuiFontSizeXxl' | 'nutuiFontSize10' | 'nutuiFontSize11' + | 'nutuiLineHeightXxxs' + | 'nutuiLineHeightXxs' + | 'nutuiLineHeightXs' + | 'nutuiLineHeightS' + | 'nutuiLineHeightM' + | 'nutuiLineHeightBase' + | 'nutuiLineHeightL' + | 'nutuiLineHeightMd' + | 'nutuiLineHeightIcon' + | 'nutuiLineHeightXl' + | 'nutuiLineHeight2Xl' + | 'nutuiLineHeightXxl' + | 'nutuiLineHeightXxxl' + | 'nutuiLineHeightXxxxl' | 'nutuiFontWeightLight' | 'nutuiFontWeight' | 'nutuiFontWeightMedium' | 'nutuiFontWeightBold' - | 'nutuiLineHeightBase' | 'nutuiSpacingXxxs' | 'nutuiSpacingXxs' | 'nutuiSpacingXs' @@ -166,6 +182,15 @@ export type NutCSSVariables = | 'nutuiDividerSideWidth' | 'nutuiDividerVerticalHeight' | 'nutuiDividerVerticalMargin' + | 'nutuiIconSize6' + | 'nutuiIconSize8' + | 'nutuiIconSize10' + | 'nutuiIconSize11' + | 'nutuiIconSize12' + | 'nutuiIconSize16' + | 'nutuiIconSize18' + | 'nutuiIconSize20' + | 'nutuiIconSize22' | 'nutuiIconHeight' | 'nutuiIconWidth' | 'nutuiIconLineHeight' @@ -287,6 +312,12 @@ export type NutCSSVariables = | 'nutuiPriceSymbolSmallSize' | 'nutuiPriceIntegerSmallSize' | 'nutuiPriceDecimalSmallSize' + | 'nutuiPriceRootLineHeight' + | 'nutuiPriceMinorLineHeight' + | 'nutuiPriceIntegerXlargeLineHeight' + | 'nutuiPriceIntegerLargeLineHeight' + | 'nutuiPriceIntegerNormalLineHeight' + | 'nutuiPriceIntegerSmallLineHeight' | 'nutuiAvatarSquare' | 'nutuiAvatarLargeWidth' | 'nutuiAvatarLargeHeight' @@ -378,6 +409,8 @@ export type NutCSSVariables = | 'nutuiRateIconSize' | 'nutuiRateFontColor' | 'nutuiRateFontSize' + | 'nutuiRateFontSizeLarge' + | 'nutuiRateFontSizeSmall' | 'nutuiTabbarHeight' | 'nutuiTabbarActiveColor' | 'nutuiTabbarInactiveColor' diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss index 6cff69ca04..10ba12e110 100644 --- a/src/packages/divider/divider.scss +++ b/src/packages/divider/divider.scss @@ -51,7 +51,7 @@ /* #ifndef dynamic*/ display: inline-flex; /* #endif */ - width: 0px; + width: 0; height: $divider-vertical-height; border-left: scale-px(1px) solid $divider-border-color; margin: $divider-vertical-margin; diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss index 9fe8c396d3..fc6bdf3d99 100644 --- a/src/packages/fixednav/fixednav.scss +++ b/src/packages/fixednav/fixednav.scss @@ -32,7 +32,7 @@ width: scale-px(70px); height: 100%; background: $fixednav-button-background; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(0, 0, 0, 0.2); + box-shadow: 0 scale-px(2px) scale-px(4px) 0 rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; @@ -59,7 +59,7 @@ background: $fixednav-background-color; display: flex; justify-content: space-between; - box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0px rgba(0, 0, 0, 0.2); + box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0 rgba(0, 0, 0, 0.2); &-item { position: relative; @@ -150,9 +150,9 @@ &-btn { right: auto; left: 0; - border-radius: 0px scale-px(45px) scale-px(45px) 0px; + border-radius: 0 scale-px(45px) scale-px(45px) 0; .nut-icon { - margin-right: 0px; + margin-right: 0; margin-left: scale-px(5px); transform: rotate(180deg); } @@ -162,9 +162,8 @@ right: auto; left: 0; transform: translateX(-100%); - border-radius: 0px scale-px(25px) scale-px(25px) 0px; - box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0px - rgba(0, 0, 0, 0.2); + border-radius: 0 scale-px(25px) scale-px(25px) 0; + box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0 rgba(0, 0, 0, 0.2); padding: { right: scale-px(20px); @@ -191,7 +190,7 @@ .nut-icon { transform: rotate(0deg); margin-right: scale-px(5px); - margin-left: 0px; + margin-left: 0; } } @@ -199,7 +198,7 @@ transform: translateX(100%); right: auto; left: auto; - border-radius: scale-px(25px) 0px 0px scale-px(25px); + border-radius: scale-px(25px) 0 0 scale-px(25px); padding: { right: scale-px(80px); diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss index 16c7dc9327..c094e69aee 100644 --- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss +++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss @@ -44,7 +44,7 @@ display: block; width: scale-px(20px); height: scale-px(20px); - font-size: scale-font-px(20px); + font-size: $font-size-2xl; } } diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss index 66e75485ee..dbd0a32d5b 100644 --- a/src/packages/indicator/indicator.scss +++ b/src/packages/indicator/indicator.scss @@ -21,7 +21,7 @@ opacity: 0.4; &-0 { - margin-left: 0px; + margin-left: 0; } &-active { @@ -149,11 +149,11 @@ .nut-indicator { &-dot { - margin: 0px; + margin: 0; margin-top: $indicator-dot-margin; &-0 { - margin-top: 0px; + margin-top: 0; } &-active { @@ -178,7 +178,7 @@ &-dot { &-0 { margin-right: $indicator-dot-margin; - margin-left: 0px; + margin-left: 0; } } } diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx index 1a8ada7528..eb4769fb72 100644 --- a/src/packages/inputnumber/inputnumber.taro.tsx +++ b/src/packages/inputnumber/inputnumber.taro.tsx @@ -184,7 +184,6 @@ export const InputNumber: FunctionComponent< { speed = 1, dpr = true, } = props - + const setSpeed = () => { + if (animation.current) { + animation.current.setSpeed(Math.abs(speed)) + animation.current.setDirection(speed > 0 ? 1 : -1) + } + } useImperativeHandle(ref, () => animation.current || {}) const pixelRatio = useRef(getWindowInfo().pixelRatio) - useLayoutEffect(() => { + useReady(() => { createSelectorQuery() .select(`#${id}`) .fields( @@ -57,14 +62,9 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { context, }, }) - if (onComplete) { + onComplete && animation.current.addEventListener('complete', onComplete) - } - - if (animation.current) { - animation.current.setSpeed(Math.abs(speed)) - animation.current.setDirection(speed > 0 ? 1 : -1) - } + setSpeed() inited.current = true } catch (error) { console.error(error) @@ -72,8 +72,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { } ) .exec() - }, [autoPlay, dpr, id, loop, onComplete, source, speed, style]) - + }) useUnload(() => { onComplete && animation.current && diff --git a/src/packages/menu/menu.scss b/src/packages/menu/menu.scss index aa24f24c6b..a4942885d3 100644 --- a/src/packages/menu/menu.scss +++ b/src/packages/menu/menu.scss @@ -42,8 +42,8 @@ } &-icon { - width: scale-icon-px(12px); - height: scale-icon-px(12px); + width: $icon-size-12; + height: $icon-size-12; flex-shrink: 0; transition: all 0.2s linear; } diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx index fb50e8ab8a..c4659bad1e 100644 --- a/src/packages/menuitem/menuitem.taro.tsx +++ b/src/packages/menuitem/menuitem.taro.tsx @@ -233,7 +233,6 @@ export const MenuItem = forwardRef((props: Partial, ref) => { ) : ( )} diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 701c006fa5..9b1aec0d04 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -73,7 +73,7 @@ .nutui-iconfont { width: scale-px(20px); height: scale-px(20px); - font-size: scale-font-px(20px); + font-size: $font-size-2xl; } /* #endif */ diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss index f7e7e78387..cecf080dab 100644 --- a/src/packages/noticebar/noticebar.scss +++ b/src/packages/noticebar/noticebar.scss @@ -74,6 +74,11 @@ } } + &-right-icon-default { + width: $icon-size-12; + height: $icon-size-12; + } + &-wrap { display: flex; flex: 1; diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx index 93f479a1ae..ac9acb7d87 100644 --- a/src/packages/noticebar/noticebar.taro.tsx +++ b/src/packages/noticebar/noticebar.taro.tsx @@ -26,7 +26,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent< className="nut-noticebar-box-right-icon" onClick={handleClickIcon} > - {rightIcon || } + {rightIcon || ( + + )} ) : null} diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx index a371e56538..ccf99c42c5 100644 --- a/src/packages/noticebar/noticebar.tsx +++ b/src/packages/noticebar/noticebar.tsx @@ -24,7 +24,7 @@ const defaultProps = { content: '', closeable: false, wrap: false, - leftIcon: , + leftIcon: , rightIcon: null, right: null, delay: 1, @@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent< ) : null} {closeable || rightIcon ? (
- {rightIcon || } + {rightIcon || ( + + )}
) : null} @@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent< handleClickIcon(e) }} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss index 1b6c2d7c33..f0c9652283 100644 --- a/src/packages/notify/notify.scss +++ b/src/packages/notify/notify.scss @@ -98,4 +98,9 @@ width: scale-px(12px); } } + + &-close-icon { + height: $icon-size-12; + width: $icon-size-12; + } } diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx index 4b1e62df97..33ab4eed87 100644 --- a/src/packages/notify/notify.taro.tsx +++ b/src/packages/notify/notify.taro.tsx @@ -142,7 +142,10 @@ export const Notify: FunctionComponent> & { className={`${classPrefix}-right-icon`} onClick={handleClickIcon} > - {rightIcon || (closeable ? : null)} + {rightIcon || + (closeable ? ( + + ) : null)} ) : null} diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index b0ad39a6a2..ab86345f29 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -2,8 +2,13 @@ .nut-numberkeyboard { &-close-icon { - width: scale-icon-px(18px); - height: scale-icon-px(18px); + width: $icon-size-18; + height: $icon-size-18; + } + + &-delete-icon { + width: scale-px(28px); + height: scale-px(28px); } width: 100%; diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx index 8cc8ac73bd..7c6969967e 100644 --- a/src/packages/numberkeyboard/numberkeyboard.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.tsx @@ -71,7 +71,7 @@ export const NumberKeyboard: FunctionComponent< const DeleteIcon = () => { return ( - + { setInnerVisible(visible) @@ -78,6 +81,9 @@ export const Overlay: FunctionComponent< style={styles} {...rest} onClick={handleClick} + {...(closeOnOverlayClick + ? { ariaLabel: ariaLabel || locale.mask } + : {})} > {children} diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index fb17684946..ddaee1df0f 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -94,7 +94,7 @@ word-wrap: break-word; &:last-child { - margin-bottom: 0px; + margin-bottom: 0; border-bottom: none; } diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 51c0f83b18..0a26fdb272 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -265,7 +265,7 @@ export const Popover: FunctionComponent< {showArrow && ( - + )} {Array.isArray(children) ? children[1] : null} diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index d68d30eb56..5535cd8711 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -1,6 +1,7 @@ .nut-price { direction: ltr; font-size: $font-size-l; + line-height: $price-root-line-height; display: flex; flex-direction: row; align-items: baseline; @@ -17,7 +18,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-darkgray-color; } } @@ -28,7 +28,6 @@ &-symbol, &-integer, &-decimal { - font-family: 'JDZH-Bold'; color: $price-primary-color; } } @@ -38,22 +37,22 @@ padding-right: $price-symbol-padding-right; &-xlarge { font-size: $price-symbol-xlarge-size; - line-height: $price-symbol-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-symbol-large-size; - line-height: $price-symbol-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-symbol-normal-size; - line-height: $price-symbol-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-symbol-small-size; - line-height: $price-symbol-small-size; + line-height: $price-minor-line-height; } &-rtl { @@ -65,44 +64,44 @@ &-integer { &-xlarge { font-size: $price-integer-xlarge-size; - line-height: $price-integer-xlarge-size; + line-height: $price-integer-xlarge-line-height; } &-large { font-size: $price-integer-large-size; - line-height: $price-integer-large-size; + line-height: $price-integer-large-line-height; } &-normal { font-size: $price-integer-normal-size; - line-height: $price-integer-normal-size; + line-height: $price-integer-normal-line-height; } &-small { font-size: $price-integer-small-size; - line-height: $price-integer-small-size; + line-height: $price-integer-small-line-height; } } &-decimal { &-xlarge { font-size: $price-decimal-xlarge-size; - line-height: $price-decimal-xlarge-size; + line-height: $price-minor-line-height; } &-large { font-size: $price-decimal-large-size; - line-height: $price-decimal-large-size; + line-height: $price-minor-line-height; } &-normal { font-size: $price-decimal-normal-size; - line-height: $price-decimal-normal-size; + line-height: $price-minor-line-height; } &-small { font-size: $price-decimal-small-size; - line-height: $price-decimal-small-size; + line-height: $price-minor-line-height; } } diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss index 3caf986118..eea305afa1 100644 --- a/src/packages/quickenter/quickenter.scss +++ b/src/packages/quickenter/quickenter.scss @@ -3,7 +3,7 @@ .nut-quickenter { width: 100%; /* 限制弹层最大高度，包含安全区 */ - max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0)); + max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0)); background: $quickenter-bg-color; border-radius: 0 0 scale-px(12px) scale-px(12px); overflow: hidden; @@ -101,8 +101,8 @@ svg, .nut-icon { - width: scale-icon-px(22px); - height: scale-icon-px(22px); + width: $icon-size-22; + height: $icon-size-22; } } @@ -110,7 +110,7 @@ font-size: $quickenter-item-title-font-size; color: $quickenter-item-title-color; text-align: center; - line-height: scale-font-px(16px); + line-height: $line-height-md; // Allow multi-line if text is long, preventing truncation white-space: normal; word-wrap: break-word; diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index fd0c80b838..6caaf86c93 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -37,7 +37,7 @@ &-checked { color: $color-primary; background-color: $white; - box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333; + box-shadow: 0 scale-px(2px) scale-px(4px) 0 #ff0f2333; border-radius: 50%; &.nut-radio-icon-disabled { diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index e07ecbfbc7..b2d0bc01de 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -59,7 +59,7 @@ height: $range-button-height; background: $range-button-background; border-radius: 50%; - box-shadow: 0px scale-px(1px) scale-px(2px) 0px rgba(0, 0, 0, 0.15); + box-shadow: 0 scale-px(1px) scale-px(2px) 0 rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; align-items: center; @@ -158,7 +158,7 @@ top: scale-px(-20px); width: scale-px(11px); height: scale-px(11px); - left: 0px; + left: 0; border-radius: scale-px(6px); background: $range-inactive-color; @@ -171,12 +171,12 @@ .nut-range-vertical-container { height: 100%; flex-direction: column; - padding: 0px scale-px(15px); + padding: 0 scale-px(15px); } .nut-range-vertical { width: $range-height; - margin: $range-margin 0px; + margin: $range-margin 0; &-button { &-wrapper, @@ -192,7 +192,7 @@ } &-wrapper-left { - top: 0px; + top: 0; left: 50%; /* #ifndef dynamic*/ right: initial; @@ -201,7 +201,7 @@ } &-number { - left: 0px; + left: 0; top: 50%; // transform: translate3d(100%, 0, 0); } @@ -211,11 +211,11 @@ position: absolute; width: scale-px(36px); height: 100%; - top: 0px; + top: 0; right: 50%; overflow: visible; font-size: $font-size-s; - padding: 0px; + padding: 0; } &-mark-hm { @@ -223,7 +223,7 @@ } &-mark-text-wrapper { - // width: scale-px(20px); + // width: 20px; height: scale-px(16px); position: absolute; display: inline-block; @@ -275,7 +275,7 @@ } &-tick { - right: 0px; + right: 0; /* #ifndef dynamic*/ left: initial; /* #endif */ @@ -318,7 +318,7 @@ left: auto; right: scale-px(30px); margin-left: 0; - margin-right: scale-px(-0px); + margin-right: 0; } &-mark-text-wrapper { diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss index 3646328b18..ddb90c6b06 100644 --- a/src/packages/rate/rate.scss +++ b/src/packages/rate/rate.scss @@ -110,18 +110,18 @@ &-normal { padding-left: $rate-item-margin; font-size: $rate-font-size; - line-height: $rate-font-size; + line-height: $line-height-s; } &-large { - font-size: calc($rate-font-size + scale-font-px(6px)); - line-height: calc($rate-font-size + scale-font-px(6px)); + font-size: $rate-font-size-large; + line-height: $line-height-xl; padding-left: calc($rate-item-margin * 2); } &-small { - font-size: calc($rate-font-size - scale-font-px(2px)); - line-height: calc($rate-font-size - scale-font-px(2px)); + font-size: $rate-font-size-small; + line-height: $line-height-xxs; padding-left: calc($rate-item-margin / 2); } diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx index 000c68f296..e2f30008f5 100644 --- a/src/packages/rate/rate.taro.tsx +++ b/src/packages/rate/rate.taro.tsx @@ -1,14 +1,13 @@ import React, { FunctionComponent, ReactElement, - useCallback, useEffect, - useLayoutEffect, useRef, useState, } from 'react' import classNames from 'classnames' import { StarFill } from '@nutui/icons-react-taro' +import { useReady } from '@tarojs/taro' import { ITouchEvent, Text, View } from '@tarojs/components' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/hooks/use-props-value' @@ -132,7 +131,7 @@ export const Rate: FunctionComponent> = (props) => { } } - const updateRects = useCallback(() => { + const updateRects = () => { for (let index = 0; index < refs.length; index++) { const item = refs[index] if (item) { @@ -141,11 +140,11 @@ export const Rate: FunctionComponent> = (props) => { }) } } - }, [refs]) + } - useLayoutEffect(() => { + useReady(() => { updateRects() - }, [updateRects]) + }) const handleTouchStart = (e: any) => { if (!touchable || readOnly || disabled) { diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index 629bcffacb..6558423d00 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -74,8 +74,8 @@ &.nut-searchbar-icon { position: relative; .nut-icon { - width: scale-icon-px(12px); - height: scale-icon-px(12px); + width: $icon-size-12; + height: $icon-size-12; color: var(--nutui-black-5); margin-right: $searchbar-inner-gap; } @@ -111,9 +111,9 @@ } .nut-icon { - width: scale-icon-px(6px); - height: scale-icon-px(6px); - font-size: scale-font-px(6px); + width: $icon-size-6; + height: $icon-size-6; + font-size: $icon-size-6; color: #c2c4cc; margin-left: scale-px(4px); } diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss index ebe65addc1..2b11c03fa9 100644 --- a/src/packages/segmented/segmented.scss +++ b/src/packages/segmented/segmented.scss @@ -23,7 +23,7 @@ border-radius: $segmented-item-radius; color: $segmented-item-color; font-size: $segmented-item-fontsize; - line-height: $segmented-item-fontsize; + line-height: $line-height-s; box-sizing: border-box; } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index 8003ff02d0..2b3a3035f7 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -10,7 +10,7 @@ &-title { display: flex; justify-content: center; - line-height: $font-size-l; + line-height: $line-height-l; font-size: $font-size-l; color: $color-title; } @@ -20,7 +20,7 @@ justify-content: center; margin-top: scale-px(12px); margin-bottom: scale-px(24px); - line-height: $font-size-s; + line-height: $line-height-s; font-size: $font-size-s; color: $color-text; } @@ -85,13 +85,13 @@ width: scale-px(247px); &-error { - line-height: $font-size-xs; + line-height: $line-height-xs; font-size: $font-size-xs; color: $shortpassword-error; } &-forget { - line-height: $font-size-s; + line-height: $line-height-s; font-size: $font-size-s; color: $shortpassword-forget; display: flex; @@ -101,6 +101,11 @@ margin-right: scale-px(3px); } } + + &-tips-icon { + width: $icon-size-11; + height: $icon-size-11; + } } &-footer { @@ -113,7 +118,7 @@ border: scale-px(1px) solid $color-primary; border-radius: scale-px(15px); padding: scale-px(8px) scale-px(38px); - line-height: $font-size-base; + line-height: $line-height-base; font-size: $font-size-base; color: $color-primary; } @@ -126,7 +131,7 @@ ); border-radius: scale-px(15px); padding: scale-px(8px) scale-px(38px); - line-height: $font-size-base; + line-height: $line-height-base; font-size: $font-size-base; color: $color-primary-text; } diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx index a22528970b..f86b013206 100644 --- a/src/packages/shortpassword/shortpassword.taro.tsx +++ b/src/packages/shortpassword/shortpassword.taro.tsx @@ -142,7 +142,7 @@ export const InternalShortPassword: ForwardRefRenderFunction< {tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx index 4e7cc02da5..0873a87ace 100644 --- a/src/packages/shortpassword/shortpassword.tsx +++ b/src/packages/shortpassword/shortpassword.tsx @@ -141,7 +141,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
{tips || ( <> - + {locale.shortpassword.tips} )} diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index 2f0293501a..baf036f05a 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -1,5 +1,5 @@ .nut-skeleton { - line-height: 0px; + line-height: 0; font-size: 0px; &-content { diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss index 9fba1b8b6b..9203872639 100644 --- a/src/packages/space/space.scss +++ b/src/packages/space/space.scss @@ -30,7 +30,7 @@ &-wrap { flex-wrap: wrap; - margin-bottom: calc(#{$space-gap} * -1); + margin-bottom: calc($space-gap * -1); &-item { padding-bottom: $space-gap; diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss index e00e62aa5a..cd3ca99aea 100644 --- a/src/packages/steps/steps.scss +++ b/src/packages/steps/steps.scss @@ -13,8 +13,8 @@ &-icon { .nut-icon { - height: scale-icon-px(10px); - width: scale-icon-px(10px); + height: $icon-size-10; + width: $icon-size-10; } .nut-image { @@ -146,8 +146,8 @@ width: $steps-double-head-icon-size; .nut-icon { - height: scale-icon-px(12px); - width: scale-icon-px(12px); + height: $icon-size-12; + width: $icon-size-12; } } @@ -229,8 +229,8 @@ height: $steps-vertical-head-icon-size; .nut-icon { - height: scale-icon-px(12px); - width: scale-icon-px(12px); + height: $icon-size-12; + width: $icon-size-12; } } } diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 4621183833..8d4135bbf1 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -27,14 +27,14 @@ &-left { left: 0; - transform: translate(-100%, 0px); + transform: translate(-100%, 0); } &-right { display: flex; //left: 100%; height: 100%; - right: 0px; - transform: translate(100%, 0px); + right: 0; + transform: translate(100%, 0); } } diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss index ace561058c..f2e41740fc 100644 --- a/src/packages/tabbar/tabbar.scss +++ b/src/packages/tabbar/tabbar.scss @@ -1,7 +1,7 @@ @import '../tabbaritem/tabbaritem.scss'; .nut-tabbar { - border: 0px; + border: 0; box-shadow: $tabbar-box-shadow; border-bottom: $tabbar-border-bottom; border-top: $tabbar-border-top; @@ -44,8 +44,8 @@ &-fixed { position: fixed; - bottom: 0px; - left: 0px; + bottom: 0; + left: 0; } } @@ -58,6 +58,6 @@ &-fixed { left: auto; - right: 0px; + right: 0; } } diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss index 4d2cd82e81..dde07f51bc 100644 --- a/src/packages/table/table.scss +++ b/src/packages/table/table.scss @@ -143,7 +143,7 @@ &-sticky-left, &-sticky-right { position: absolute; - top: 0px; + top: 0; width: scale-px(8px); bottom: scale-px(-1px); overflow-x: hidden; diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 6fe817bc63..56f86215a3 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -93,12 +93,17 @@ .nut-icon { position: absolute; - font-size: scale-font-px(20px); + font-size: $font-size-2xl; width: 100%; height: 100%; } } + &-smile-icon { + width: scale-px(40px); + height: scale-px(20px); + } + &-active { .nut-icon { color: $tabs-titles-item-active-color; diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx index d5edb93b94..f30e38754d 100644 --- a/src/packages/tabs/tabs.taro.tsx +++ b/src/packages/tabs/tabs.taro.tsx @@ -282,7 +282,10 @@ export const Tabs: FunctionComponent> & { // @ts-ignore ariaHidden > - + )} > & { className={`${classPrefix}-titles-item-smile`} aria-hidden="true" > - +
)}
= PAD_BREAKPOINT ? 'pad' : 'phone' + return window.innerWidth >= 600 ? 'pad' : 'phone' } /** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */ @@ -124,8 +120,8 @@ function getScaleByViewport() { if (!deviceWidth) return 1 - if (deviceWidth >= PAD_BREAKPOINT) { - return PAD_SCALE + if (deviceWidth >= 600) { + return 1.2 } if (deviceWidth >= 375 && deviceWidth < 600) {