@tzk-design-vue2/shared 1.0.2 → 1.2.0

package/README.md

@@ -27,7 +27,7 @@ pnpm add @tzk-design-vue2/shared
 
 ```less
 // 在你的 Less 文件中导入
-@import '@tzk-design-vue2/shared/styles/variables.less';
+@import '@tzk-design-vue2/shared/styles/variables.scss';
 
 .my-component {
   color: @primary-color;
@@ -48,9 +48,9 @@ const result = utils.someFunction();
 
 ### 样式资源
 
-- `styles/variables.less` - Less 变量
-- `styles/mixins.less` - Less 混入
-- `styles/common.less` - 通用样式
+- `styles/variables.scss` - Less 变量
+- `styles/mixins.scss` - Less 混入
+- `styles/common.scss` - 通用样式
 
 ### 工具函数
 

package/index.js

@@ -3,7 +3,7 @@
  */
 
 // 样式
-import './styles/index.less';
+import './styles/index.scss';
 
 // 工具函数
 export * from './utils/type';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tzk-design-vue2/shared",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "TZK Design 共享资源包",
   "main": "index.js",
   "keywords": [

package/styles/index.scss

@@ -0,0 +1,9 @@
+/**
+ * 样式入口文件
+ */
+
+@import './variables/color.scss';
+@import './variables/typography.scss';
+@import './variables/spacing.scss';
+@import './variables/common.scss';
+@import './mixins.scss';

package/styles/{mixins.less → mixins.scss}

@@ -1,15 +1,15 @@
 /**
- * Less Mixins
+ * Sass Mixins
  * 常用样式混入
  */
 
-@import './variables/color.less';
-@import './variables/typography.less';
-@import './variables/spacing.less';
-@import './variables/common.less';
+@import './variables/color.scss';
+@import './variables/typography.scss';
+@import './variables/spacing.scss';
+@import './variables/common.scss';
 
 // ========== 清除浮动 ==========
-.clearfix() {
+@mixin clearfix {
   &::after {
     content: '';
     display: table;
@@ -18,48 +18,48 @@
 }
 
 // ========== 文本溢出省略 ==========
-.ellipsis() {
+@mixin ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.multi-ellipsis(@lines: 2) {
+@mixin multi-ellipsis($lines: 2) {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: @lines;
+  -webkit-line-clamp: $lines;
   /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;
 }
 
 // ========== Flex 布局 ==========
-.flex-center() {
+@mixin flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.flex-between() {
+@mixin flex-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.flex-start() {
+@mixin flex-start {
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 
-.flex-end() {
+@mixin flex-end {
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 
 // ========== 绝对定位居中 ==========
-.absolute-center() {
+@mixin absolute-center {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -67,7 +67,7 @@
 }
 
 // ========== 1px 边框 ==========
-.hairline(@direction: all, @color: @border-color-base, @radius: 0) {
+@mixin hairline($direction: all, $color: $border-color-base, $radius: 0) {
   position: relative;
 
   &::after {
@@ -77,60 +77,64 @@
     left: 0;
     width: 200%;
     height: 200%;
-    border: 0 solid @color;
+    border: 0 solid $color;
     transform: scale(0.5);
     transform-origin: 0 0;
     box-sizing: border-box;
     pointer-events: none;
 
-    & when (@direction = all) {
+    @if $direction == all {
       border-width: 2rpx;
-      border-radius: @radius * 2;
+      border-radius: $radius * 2;
     }
 
-    & when (@direction = top) {
+    @if $direction == top {
       border-top-width: 2rpx;
     }
 
-    & when (@direction = right) {
+    @if $direction == right {
       border-right-width: 2rpx;
     }
 
-    & when (@direction = bottom) {
+    @if $direction == bottom {
       border-bottom-width: 2rpx;
     }
 
-    & when (@direction = left) {
+    @if $direction == left {
       border-left-width: 2rpx;
     }
   }
 }
 
 // ========== 安全区域 ==========
-.safe-area-top(@padding: 0) {
-  padding-top: calc(@padding + constant(safe-area-inset-top));
-  padding-top: calc(@padding + env(safe-area-inset-top));
+@mixin safe-area-top($padding: 0) {
+  padding-top: calc(#{$padding} + constant(safe-area-inset-top));
+  padding-top: calc(#{$padding} + env(safe-area-inset-top));
 }
 
-.safe-area-bottom(@padding: 0) {
-  padding-bottom: calc(@padding + constant(safe-area-inset-bottom));
-  padding-bottom: calc(@padding + env(safe-area-inset-bottom));
+@mixin safe-area-bottom($padding: 0) {
+  padding-bottom: calc(#{$padding} + constant(safe-area-inset-bottom));
+  padding-bottom: calc(#{$padding} + env(safe-area-inset-bottom));
 }
 
 // ========== 禁用状态 ==========
-.disabled() {
-  opacity: @opacity-disabled;
+@mixin disabled {
+  opacity: $opacity-disabled;
   cursor: not-allowed;
 }
 
 // ========== 点击态 ==========
-.active-opacity(@opacity: 0.6) {
+@mixin active-opacity($opacity: 0.6) {
   &:active {
-    opacity: @opacity;
+    opacity: $opacity;
   }
 }
 
 // ========== 过渡动画 ==========
-.transition(@property: all, @duration: @animation-duration-base, @timing: @animation-timing-function-ease) {
-  transition: @property @duration @timing;
+@mixin transition(
+  $property: all,
+  $duration: $animation-duration-base,
+  $timing: $animation-timing-function-ease
+) {
+  transition: $property $duration $timing;
 }

package/styles/variables/color.scss

@@ -0,0 +1,54 @@
+/**
+ * 色彩系统 Token
+ * 参考 NutUI 设计规范
+ */
+
+// ========== 品牌色 ==========
+$primary-color: #fa2c19; // 主色
+$primary-color-light: #ff6034; // 浅主色
+$primary-color-dark: #d81e06; // 深主色
+
+// ========== 功能色 ==========
+$success-color: #1ba784; // 成功
+$warning-color: #ff8800; // 警告
+$danger-color: #fa2c19; // 危险
+$info-color: #3460fa; // 信息
+
+// ========== 中性色 ==========
+$gray-1: #f7f8fa; // 浅灰色-1
+$gray-2: #f2f3f5; // 浅灰色-2
+$gray-3: #e5e6eb; // 浅灰色-3
+$gray-4: #dcdee3; // 浅灰色-4
+$gray-5: #c5c6cc; // 灰色-5
+$gray-6: #a8abb2; // 灰色-6
+$gray-7: #888b94; // 深灰色-7
+$gray-8: #6c6f7a; // 深灰色-8
+$gray-9: #494d56; // 深灰色-9
+$gray-10: #1a1c24; // 深灰色-10
+
+// ========== 文本色 ==========
+$text-color-primary: #1a1c24; // 主要文本
+$text-color-secondary: #494d56; // 次要文本
+$text-color-tertiary: #888b94; // 三级文本
+$text-color-disabled: #c5c6cc; // 禁用文本
+$text-color-inverse: #ffffff; // 反色文本
+
+// ========== 背景色 ==========
+$bg-color-page: #f7f8fa; // 页面背景
+$bg-color-container: #ffffff; // 容器背景
+$bg-color-overlay: rgba(0, 0, 0, 0.7); // 遮罩背景
+$bg-color-disabled: #f2f3f5; // 禁用背景
+
+// ========== 边框色 ==========
+$border-color-base: #e5e6eb; // 基础边框
+$border-color-light: #f2f3f5; // 浅色边框
+$border-color-dark: #dcdee3; // 深色边框
+
+// ========== 链接色 ==========
+$link-color: #3460fa; // 链接颜色
+$link-hover-color: #5a7eff; // 链接悬停颜色
+$link-active-color: #2347d9; // 链接激活颜色
+
+// ========== 白色和黑色 ==========
+$white: #ffffff;
+$black: #000000;

package/styles/variables/common.scss

@@ -0,0 +1,64 @@
+/**
+ * 通用变量 Token
+ */
+
+// ========== 圆角 ==========
+$border-radius-none: 0;
+$border-radius-sm: 4rpx; // 2px
+$border-radius-base: 8rpx; // 4px
+$border-radius-md: 12rpx; // 6px
+$border-radius-lg: 16rpx; // 8px
+$border-radius-xl: 24rpx; // 12px
+$border-radius-2xl: 32rpx; // 16px
+$border-radius-round: 9999rpx; // 圆形
+$border-radius-circle: 50%; // 圆形百分比
+
+// ========== 边框宽度 ==========
+$border-width-none: 0;
+$border-width-thin: 1rpx; // 0.5px
+$border-width-base: 2rpx; // 1px
+$border-width-thick: 4rpx; // 2px
+
+// ========== 阴影 ==========
+$box-shadow-none: none;
+$box-shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+$box-shadow-base: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+$box-shadow-md: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+$box-shadow-lg: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
+$box-shadow-xl: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+
+// ========== 层级 (z-index) ==========
+$z-index-base: 1;
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal-backdrop: 1040;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-tooltip: 1070;
+$z-index-toast: 1080;
+
+// ========== 动画时长 ==========
+$animation-duration-fast: 150ms;
+$animation-duration-base: 300ms;
+$animation-duration-slow: 500ms;
+
+// ========== 动画曲线 ==========
+$animation-timing-function-ease: ease;
+$animation-timing-function-ease-in: ease-in;
+$animation-timing-function-ease-out: ease-out;
+$animation-timing-function-ease-in-out: ease-in-out;
+$animation-timing-function-linear: linear;
+
+// ========== 透明度 ==========
+$opacity-disabled: 0.4;
+$opacity-loading: 0.6;
+$opacity-overlay: 0.7;
+
+// ========== 组件尺寸 ==========
+$height-xs: 48rpx; // 24px
+$height-sm: 56rpx; // 28px
+$height-base: 64rpx; // 32px
+$height-md: 80rpx; // 40px
+$height-lg: 96rpx; // 48px
+$height-xl: 112rpx; // 56px

package/styles/variables/spacing.scss

@@ -0,0 +1,38 @@
+/**
+ * 间距系统 Token
+ * 基础单位: 4px (8rpx)
+ */
+
+// ========== 基础间距单位 ==========
+$spacing-unit: 8rpx; // 4px
+
+// ========== Padding ==========
+$padding-xs: 8rpx; // 4px
+$padding-sm: 16rpx; // 8px
+$padding-base: 24rpx; // 12px
+$padding-md: 32rpx; // 16px
+$padding-lg: 48rpx; // 24px
+$padding-xl: 64rpx; // 32px
+$padding-2xl: 96rpx; // 48px
+
+// ========== Margin ==========
+$margin-xs: 8rpx; // 4px
+$margin-sm: 16rpx; // 8px
+$margin-base: 24rpx; // 12px
+$margin-md: 32rpx; // 16px
+$margin-lg: 48rpx; // 24px
+$margin-xl: 64rpx; // 32px
+$margin-2xl: 96rpx; // 48px
+
+// ========== 组件内边距 ==========
+$padding-h-xs: 16rpx; // 水平内边距-xs
+$padding-h-sm: 24rpx; // 水平内边距-sm
+$padding-h-base: 32rpx; // 水平内边距-base
+$padding-h-md: 40rpx; // 水平内边距-md
+$padding-h-lg: 48rpx; // 水平内边距-lg
+
+$padding-v-xs: 8rpx; // 垂直内边距-xs
+$padding-v-sm: 16rpx; // 垂直内边距-sm
+$padding-v-base: 24rpx; // 垂直内边距-base
+$padding-v-md: 32rpx; // 垂直内边距-md
+$padding-v-lg: 40rpx; // 垂直内边距-lg

package/styles/variables/typography.scss

@@ -0,0 +1,35 @@
+/**
+ * 字体系统 Token
+ */
+
+// ========== 字体族 ==========
+$font-family-base:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+$font-family-number: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// ========== 字号 ==========
+$font-size-xs: 20rpx; // 10px
+$font-size-sm: 24rpx; // 12px
+$font-size-base: 28rpx; // 14px
+$font-size-md: 32rpx; // 16px
+$font-size-lg: 36rpx; // 18px
+$font-size-xl: 40rpx; // 20px
+$font-size-2xl: 48rpx; // 24px
+$font-size-3xl: 56rpx; // 28px
+$font-size-4xl: 64rpx; // 32px
+
+// ========== 字重 ==========
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// ========== 行高 ==========
+$line-height-xs: 1.2;
+$line-height-sm: 1.4;
+$line-height-base: 1.5;
+$line-height-md: 1.6;
+$line-height-lg: 1.8;
+$line-height-xl: 2;

package/styles/index.less

@@ -1,9 +0,0 @@
-/**
- * 样式入口文件
- */
-
-@import './variables/color.less';
-@import './variables/typography.less';
-@import './variables/spacing.less';
-@import './variables/common.less';
-@import './mixins.less';

package/styles/variables/color.less

@@ -1,54 +0,0 @@
-/**
- * 色彩系统 Token
- * 参考 NutUI 设计规范
- */
-
-// ========== 品牌色 ==========
-@primary-color: #fa2c19; // 主色
-@primary-color-light: #ff6034; // 浅主色
-@primary-color-dark: #d81e06; // 深主色
-
-// ========== 功能色 ==========
-@success-color: #1ba784; // 成功
-@warning-color: #ff8800; // 警告
-@danger-color: #fa2c19; // 危险
-@info-color: #3460fa; // 信息
-
-// ========== 中性色 ==========
-@gray-1: #f7f8fa; // 浅灰色-1
-@gray-2: #f2f3f5; // 浅灰色-2
-@gray-3: #e5e6eb; // 浅灰色-3
-@gray-4: #dcdee3; // 浅灰色-4
-@gray-5: #c5c6cc; // 灰色-5
-@gray-6: #a8abb2; // 灰色-6
-@gray-7: #888b94; // 深灰色-7
-@gray-8: #6c6f7a; // 深灰色-8
-@gray-9: #494d56; // 深灰色-9
-@gray-10: #1a1c24; // 深灰色-10
-
-// ========== 文本色 ==========
-@text-color-primary: #1a1c24; // 主要文本
-@text-color-secondary: #494d56; // 次要文本
-@text-color-tertiary: #888b94; // 三级文本
-@text-color-disabled: #c5c6cc; // 禁用文本
-@text-color-inverse: #ffffff; // 反色文本
-
-// ========== 背景色 ==========
-@bg-color-page: #f7f8fa; // 页面背景
-@bg-color-container: #ffffff; // 容器背景
-@bg-color-overlay: rgba(0, 0, 0, 0.7); // 遮罩背景
-@bg-color-disabled: #f2f3f5; // 禁用背景
-
-// ========== 边框色 ==========
-@border-color-base: #e5e6eb; // 基础边框
-@border-color-light: #f2f3f5; // 浅色边框
-@border-color-dark: #dcdee3; // 深色边框
-
-// ========== 链接色 ==========
-@link-color: #3460fa; // 链接颜色
-@link-hover-color: #5a7eff; // 链接悬停颜色
-@link-active-color: #2347d9; // 链接激活颜色
-
-// ========== 白色和黑色 ==========
-@white: #ffffff;
-@black: #000000;

package/styles/variables/common.less

@@ -1,64 +0,0 @@
-/**
- * 通用变量 Token
- */
-
-// ========== 圆角 ==========
-@border-radius-none: 0;
-@border-radius-sm: 4rpx; // 2px
-@border-radius-base: 8rpx; // 4px
-@border-radius-md: 12rpx; // 6px
-@border-radius-lg: 16rpx; // 8px
-@border-radius-xl: 24rpx; // 12px
-@border-radius-2xl: 32rpx; // 16px
-@border-radius-round: 9999rpx; // 圆形
-@border-radius-circle: 50%; // 圆形百分比
-
-// ========== 边框宽度 ==========
-@border-width-none: 0;
-@border-width-thin: 1rpx; // 0.5px
-@border-width-base: 2rpx; // 1px
-@border-width-thick: 4rpx; // 2px
-
-// ========== 阴影 ==========
-@box-shadow-none: none;
-@box-shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-@box-shadow-base: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-@box-shadow-md: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
-@box-shadow-lg: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
-@box-shadow-xl: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
-
-// ========== 层级 (z-index) ==========
-@z-index-base: 1;
-@z-index-dropdown: 1000;
-@z-index-sticky: 1020;
-@z-index-fixed: 1030;
-@z-index-modal-backdrop: 1040;
-@z-index-modal: 1050;
-@z-index-popover: 1060;
-@z-index-tooltip: 1070;
-@z-index-toast: 1080;
-
-// ========== 动画时长 ==========
-@animation-duration-fast: 150ms;
-@animation-duration-base: 300ms;
-@animation-duration-slow: 500ms;
-
-// ========== 动画曲线 ==========
-@animation-timing-function-ease: ease;
-@animation-timing-function-ease-in: ease-in;
-@animation-timing-function-ease-out: ease-out;
-@animation-timing-function-ease-in-out: ease-in-out;
-@animation-timing-function-linear: linear;
-
-// ========== 透明度 ==========
-@opacity-disabled: 0.4;
-@opacity-loading: 0.6;
-@opacity-overlay: 0.7;
-
-// ========== 组件尺寸 ==========
-@height-xs: 48rpx; // 24px
-@height-sm: 56rpx; // 28px
-@height-base: 64rpx; // 32px
-@height-md: 80rpx; // 40px
-@height-lg: 96rpx; // 48px
-@height-xl: 112rpx; // 56px

package/styles/variables/spacing.less

@@ -1,38 +0,0 @@
-/**
- * 间距系统 Token
- * 基础单位: 4px (8rpx)
- */
-
-// ========== 基础间距单位 ==========
-@spacing-unit: 8rpx; // 4px
-
-// ========== Padding ==========
-@padding-xs: 8rpx; // 4px
-@padding-sm: 16rpx; // 8px
-@padding-base: 24rpx; // 12px
-@padding-md: 32rpx; // 16px
-@padding-lg: 48rpx; // 24px
-@padding-xl: 64rpx; // 32px
-@padding-2xl: 96rpx; // 48px
-
-// ========== Margin ==========
-@margin-xs: 8rpx; // 4px
-@margin-sm: 16rpx; // 8px
-@margin-base: 24rpx; // 12px
-@margin-md: 32rpx; // 16px
-@margin-lg: 48rpx; // 24px
-@margin-xl: 64rpx; // 32px
-@margin-2xl: 96rpx; // 48px
-
-// ========== 组件内边距 ==========
-@padding-h-xs: 16rpx; // 水平内边距-xs
-@padding-h-sm: 24rpx; // 水平内边距-sm
-@padding-h-base: 32rpx; // 水平内边距-base
-@padding-h-md: 40rpx; // 水平内边距-md
-@padding-h-lg: 48rpx; // 水平内边距-lg
-
-@padding-v-xs: 8rpx; // 垂直内边距-xs
-@padding-v-sm: 16rpx; // 垂直内边距-sm
-@padding-v-base: 24rpx; // 垂直内边距-base
-@padding-v-md: 32rpx; // 垂直内边距-md
-@padding-v-lg: 40rpx; // 垂直内边距-lg

package/styles/variables/typography.less

@@ -1,35 +0,0 @@
-/**
- * 字体系统 Token
- */
-
-// ========== 字体族 ==========
-@font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji';
-@font-family-number: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-// ========== 字号 ==========
-@font-size-xs: 20rpx; // 10px
-@font-size-sm: 24rpx; // 12px
-@font-size-base: 28rpx; // 14px
-@font-size-md: 32rpx; // 16px
-@font-size-lg: 36rpx; // 18px
-@font-size-xl: 40rpx; // 20px
-@font-size-2xl: 48rpx; // 24px
-@font-size-3xl: 56rpx; // 28px
-@font-size-4xl: 64rpx; // 32px
-
-// ========== 字重 ==========
-@font-weight-light: 300;
-@font-weight-normal: 400;
-@font-weight-medium: 500;
-@font-weight-semibold: 600;
-@font-weight-bold: 700;
-
-// ========== 行高 ==========
-@line-height-xs: 1.2;
-@line-height-sm: 1.4;
-@line-height-base: 1.5;
-@line-height-md: 1.6;
-@line-height-lg: 1.8;
-@line-height-xl: 2;