Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: jd white screen #2824

Merged
merged 3 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@
"@tarojs/components": "4.0.8-beta.1",
"@tarojs/plugin-platform-alipay": "4.0.8-beta.1",
"@tarojs/plugin-platform-weapp": "4.0.8-beta.1",
"@tarojs/plugin-platform-jd": "4.0.8-beta.1",
"@tarojs/react": "4.0.8-beta.1",
"@tarojs/taro": "4.0.8-beta.1",
"@testing-library/jest-dom": "^6.4.2",
Expand Down
15 changes: 15 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

194 changes: 100 additions & 94 deletions src/styles/theme-dark.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
:root,
page {
// 品牌颜色
--nutui-brand-1: #403635; // 梯度1
--nutui-brand-2: #665452; // 梯度2
--nutui-brand-3: #99706b; // 梯度3
Expand All @@ -11,32 +12,28 @@ page {
--nutui-brand-9: #f26e61; // 梯度9
--nutui-brand-10: #e5928a; // 梯度10

--nutui-brand-stop-1: #ff475d; // 梯度100
--nutui-brand-stop-2: #fa3725; // 渐变色止
--nutui-brand-11: #330f02; // 梯度11

--nutui-secondary-1: #1bbf30; // 辅助色
--nutui-brand-stop-1: #ff475d; // 渐变色起
--nutui-brand-stop-2: #fa3725; // 渐变色止

// 品牌颜色语义化
--nutui-color-primary: var(
--nutui-brand-6
); // 品牌主色调默认态,主要功能控件的背景、边框、镂空状态下的文字等
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1); // 品牌渐变色左端
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2); // 品牌渐变色右端
--nutui-color-primary-text: var(
--nutui-color-background-gray-1
); // 品牌主色调或其他深色背景下的文字
--nutui-color-primary-pressed: var(
--nutui-brand-7
); // 品牌主色调点击态,背景、边框、镂空状态下的文字
--nutui-color-primary-disabled: var(
--nutui-color-content-gray-1
); // 品牌主色调禁用态,背景、边框、镂空状态下的文字
--nutui-color-primary-disabled-special: var(
--nutui-brand-3
); // 品牌主色调特殊禁用态,通过操作后可转位默认态
--nutui-color-primary-light-pressed: var(
--nutui-brand-1
); // 品牌主色调镂空背景点击态
// 品牌主色调默认态,主要功能控件的背景、边框、镂空状态下的文字等
--nutui-color-primary: var(--nutui-brand-6);
// 品牌渐变色左端
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
// 品牌渐变色右端
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
// 品牌主色调或其他深色背景下的文字
--nutui-color-primary-text: var(--nutui-color-background-gray-1);
// 品牌主色调点击态,背景、边框、镂空状态下的文字
--nutui-color-primary-pressed: var(--nutui-brand-7);
// 品牌主色调禁用态,背景、边框、镂空状态下的文字
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
// 品牌主色调特殊禁用态,通过操作后可转位默认态
--nutui-color-primary-disabled-special: var(--nutui-brand-3);
// 品牌主色调镂空背景点击态
--nutui-color-primary-light-pressed: var(--nutui-brand-1);

// service color
--nutui-golden-1: #fff2e0;
Expand Down Expand Up @@ -121,6 +118,8 @@ page {
--nutui-black-4: rgba(20, 20, 20, 0.1);
--nutui-black-5: rgba(20, 20, 20, 0.2);
--nutui-black-6: rgba(20, 20, 20, 0.3);
// 蒙层色
// 局部蒙层,像图片上的小蒙层,无货、采购中等
--nutui-black-7: rgba(20, 20, 20, 0.4);
--nutui-black-8: rgba(20, 20, 20, 0.5);
--nutui-black-9: rgba(20, 20, 20, 0.6);
Expand All @@ -133,7 +132,7 @@ page {

--nutui-white-1: rgba(31, 31, 31, 0);
// --nutui-white-2: rgba(255, 255, 255, 0.02);
// --nutui-white-3: rgba(255, 255, 255, 0.06);
// --nutui-white-3: rgba(255, 255, 255, 0.05);
// --nutui-white-4: rgba(255, 255, 255, 0.1);
// --nutui-white-5: rgba(255, 255, 255, 0.2);
// --nutui-white-6: rgba(255, 255, 255, 0.3);
Expand All @@ -150,48 +149,49 @@ page {
--nutui-color-content-gray-2: var(--nutui-gray-5);
--nutui-color-content-gray-3: var(--nutui-gray-6);
--nutui-color-content-gray-4: var(--nutui-gray-7);
--nutui-color-title: var(--nutui-color-content-gray-4); // 一级文字色(重要)
--nutui-color-text: var(
--nutui-color-content-gray-3
); // 二级文字色或可操作用色(常规)
--nutui-color-text-help: var(
--nutui-color-content-gray-2
); // 三级文字色(次要)
--nutui-color-text-disabled: var(
--nutui-color-content-gray-1
); // 四级文字色(不可操作)
// 一级文字色(重要)
--nutui-color-title: var(--nutui-color-content-gray-4);
// 二级文字色或可操作用色(常规)
--nutui-color-text: var(--nutui-color-content-gray-3);
// 三级文字色(次要)
--nutui-color-text-help: var(--nutui-color-content-gray-2);
// 四级文字色(不可操作)
--nutui-color-text-disabled: var(--nutui-color-content-gray-1);

// 背景颜色值 语义化
--nutui-color-background-gray-1: var(--nutui-gray-1);
--nutui-color-background-gray-2: var(--nutui-gray-2);
--nutui-color-background-gray-3: var(--nutui-gray-3);
--nutui-color-background: var(--nutui-color-background-gray-3); // 页面背景
--nutui-color-background-overlay: var(
--nutui-color-background-gray-1
); // 卡片背景
--nutui-color-background-sunken: var(
--nutui-color-background-gray-2
); // 卡片内容器背景
// 页面背景
--nutui-color-background: var(--nutui-color-background-gray-3);
// 卡片背景
--nutui-color-background-overlay: var(--nutui-color-background-gray-1);
// 卡片内容器背景
--nutui-color-background-sunken: var(--nutui-color-background-gray-2);

// 蒙层颜色值 语义化
--nutui-color-mask-gray-1: var(--nutui-black-2);
--nutui-color-mask-gray-2: var(--nutui-black-7);
--nutui-color-mask-gray-3: var(--nutui-black-10);
--nutui-color-mask: var(--nutui-color-mask-gray-3); // 全部蒙层
--nutui-color-mask-part: var(--nutui-color-mask-gray-2); // 局部弹层
--nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1); // 容错弹层
// 全部蒙层
--nutui-color-mask: var(--nutui-color-mask-gray-3);
// 局部弹层
--nutui-color-mask-part: var(--nutui-color-mask-gray-2);
// 容错弹层
--nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1);

// 线颜色值 语义化
--nutui-color-line-gray-1: var(--nutui-black-3);
--nutui-color-border: var(--nutui-color-line-gray-1); // 间隔线或容错线
--nutui-color-border-disabled: var(
--nutui-color-content-gray-1
); // 组件边框禁用色
// 间隔线或容错线
--nutui-color-border: var(--nutui-color-line-gray-1);
// 组件边框禁用色
--nutui-color-border-disabled: var(--nutui-color-content-gray-1);

// 字体 ok
--nutui-font-size-8: 8px;
--nutui-font-size-9: 9px;
--nutui-font-size-10: 10px;
--nutui-font-size-11: 11px;
--nutui-font-size-12: 12px;
--nutui-font-size-13: 13px;
--nutui-font-size-14: 14px;
Expand All @@ -209,29 +209,30 @@ page {
--nutui-font-size-26: 26px;

// 字号语义化
--nutui-font-size-xxs: var(--nutui-font-size-10); // 标签内文字
--nutui-font-size-xs: var(
--nutui-font-size-11
); // 导购或信息密集的次要内容、辅助信息
--nutui-font-size-s: var(
--nutui-font-size-12
); // 汉字:次要内容、辅助类信息 数字:羊角符号、小数点及角分
--nutui-font-size-base: var(--nutui-font-size-14); // 标准内容、名称类关键信息
--nutui-font-size-l: var(
--nutui-font-size-16
); // 汉字:楼层标题、卡片标题 数字:重复型价格,如搜推商卡
--nutui-font-size-xl: var(
--nutui-font-size-18
); // 汉字:页面标题、页面级最重要内容 数字:模块级主价格,如购物车、结算、底导
--nutui-font-size-xxl: var(
--nutui-font-size-24
); // 数字:页面级主价格,如商详、收银台
--nutui-font-size-xxxl: var(--nutui-font-size-26); // zanwu
// 标签内文字
--nutui-font-size-xxs: var(--nutui-font-size-10);
// 导购或信息密集的次要内容、辅助信息
--nutui-font-size-xs: var(--nutui-font-size-11);
// 汉字:次要内容、辅助类信息 数字:羊角符号、小数点及角分
--nutui-font-size-s: var(--nutui-font-size-12);
// 标准内容、名称类关键信息
--nutui-font-size-base: var(--nutui-font-size-14);
// 汉字:楼层标题、卡片标题 数字:重复型价格,如搜推商卡
--nutui-font-size-l: var(--nutui-font-size-16);
// 汉字:页面标题、页面级最重要内容 数字:模块级主价格,如购物车、结算、底导
--nutui-font-size-xl: var(--nutui-font-size-18);
// 数字:页面级主价格,如商详、收银台
--nutui-font-size-xxl: var(--nutui-font-size-24);
// zanwu
--nutui-font-size-xxxl: var(--nutui-font-size-26);

// 字重 ok
--nutui-font-weight-light: 300; // 次要内容
--nutui-font-weight: 400; // 常规内容
--nutui-font-weight-bold: 600; // 强化内容
// 次要内容
--nutui-font-weight-light: 300;
// 常规内容
--nutui-font-weight: 400;
// 强化内容
--nutui-font-weight-bold: 600;

// 行高
--nutui-line-height-base: 1.5;
Expand All @@ -258,22 +259,22 @@ page {
--nutui-spacing-16: 16px;

// space 语义化
--nutui-spacing-xxxs: var(--nutui-spacing-2); // 狭小空间内的紧密关联内容
--nutui-spacing-xxs: var(
--nutui-spacing-4
); // 导购:紧密关联内容;平台:紧密关联内容
--nutui-spacing-xs: var(
--nutui-spacing-6
); // 导购:常规关联内容;平台:替代常规关联内容
--nutui-spacing-s: var(--nutui-spacing-7); // 一行二、一行三卡片间距
--nutui-spacing-base: var(
--nutui-spacing-8
); // 导购:弱关联内容;平台:常规关联内容
--nutui-spacing-l: var(--nutui-spacing-9); // 一行四卡片间距
--nutui-spacing-xl: var(
--nutui-spacing-12
); // 导购:无关联内容;平台:弱关联内容
--nutui-spacing-xxl: var(--nutui-spacing-16); // 平台:无关联内容
// 狭小空间内的紧密关联内容
--nutui-spacing-xxxs: var(--nutui-spacing-2);
// 导购:紧密关联内容;平台:紧密关联内容
--nutui-spacing-xxs: var(--nutui-spacing-4);
// 导购:常规关联内容;平台:替代常规关联内容
--nutui-spacing-xs: var(--nutui-spacing-6);
// 一行二、一行三卡片间距
--nutui-spacing-s: var(--nutui-spacing-7);
// 导购:弱关联内容;平台:常规关联内容
--nutui-spacing-base: var(--nutui-spacing-8);
// 一行四卡片间距
--nutui-spacing-l: var(--nutui-spacing-9);
// 导购:无关联内容;平台:弱关联内容
--nutui-spacing-xl: var(--nutui-spacing-12);
// 平台:无关联内容
--nutui-spacing-xxl: var(--nutui-spacing-16);

// radius ok
--nutui-radius-0: 0px;
Expand Down Expand Up @@ -303,15 +304,20 @@ page {
--nutui-radius-24: 24px;

// radius 语义化
--nutui-radius-xxxs: var(--nutui-radius-0); // 内容描述型的详情页面通栏结构
--nutui-radius-xxs: var(--nutui-radius-2); // 标签
--nutui-radius-xs: var(--nutui-radius-4); // 单行高度20、24、28的组件
--nutui-radius-s: var(--nutui-radius-6); // 单行高度32、36的组件
--nutui-radius-base: var(--nutui-radius-8); // 单行高度40及以上的组件
--nutui-radius-l: var(--nutui-radius-8); // 入口型非通栏卡片
--nutui-radius-xl: var(
--nutui-radius-12
); // 结构分割、通栏卡片、临时操作层组件等场景
// 内容描述型的详情页面通栏结构
--nutui-radius-xxxs: var(--nutui-radius-0);
// 标签
--nutui-radius-xxs: var(--nutui-radius-2);
// 单行高度20、24、28的组件
--nutui-radius-xs: var(--nutui-radius-4);
// 单行高度32、36的组件
--nutui-radius-s: var(--nutui-radius-6);
// 单行高度40及以上的组件
--nutui-radius-base: var(--nutui-radius-8);
// 入口型非通栏卡片
--nutui-radius-l: var(--nutui-radius-8);
// 结构分割、通栏卡片、临时操作层组件等场景
--nutui-radius-xl: var(--nutui-radius-12);
Comment on lines +307 to +320
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

建议移除未使用的圆角变量定义

搜索结果显示 --nutui-radius-xxl--nutui-radius-xxxl 这两个圆角变量:

  • 在主题文件和变量定义中都被标记为"暂无"或"zanwu"
  • 在整个代码库中没有任何实际使用的地方

建议:

  • 移除这两个未使用的圆角变量定义,包括:
    • src/styles/theme-dark.scss
    • src/styles/theme-default.scss
    • src/styles/variables.scss
  • 如果未来需要这些尺寸,可以根据实际需求重新添加
🔗 Analysis chain

圆角系统优化建议

圆角变量的语义化说明完整,但存在以下问题:

  1. --nutui-radius-xxl--nutui-radius-xxxl 标记为"zanwu",建议明确这些值的未来用途或考虑移除
  2. 建议补充圆角在不同尺寸组件中的具体应用指南
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查标记为"zanwu"的圆角变量是否在组件中使用
rg --type css --type tsx --type jsx "nutui-radius-xxl|nutui-radius-xxxl"

Length of output: 102


Script:

#!/bin/bash
# 使用更通用的搜索方式查找圆角变量的使用情况
rg "radius-xxl|radius-xxxl" --type scss --type css --type js --type jsx --type ts --type tsx

# 检查theme文件中是否定义了这些变量
rg "radius-(xxl|xxxl)" src/styles/

Length of output: 668

--nutui-radius-xxl: var(--nutui-radius-14); // zanwu
--nutui-radius-xxxl: var(--nutui-radius-16); // zanwu
}
Loading
Loading