tang-ui-x 1.0.0

package/style/colors/index.scss

@@ -0,0 +1,157 @@
+/**
+ * 颜色变量定义
+ * @module style/colors
+ */
+
+// 主题色
+$primary-color: #007aff !default;
+$success-color: #4cd964 !default;
+$warning-color: #f0ad4e !default;
+$danger-color: #dd524d !default;
+$info-color: #909399 !default;
+
+// 主题色浅色版本
+$primary-light: mix(white, $primary-color, 80%) !default;
+$success-light: mix(white, $success-color, 80%) !default;
+$warning-light: mix(white, $warning-color, 80%) !default;
+$danger-light: mix(white, $danger-color, 80%) !default;
+$info-light: mix(white, $info-color, 80%) !default;
+
+// 主题色深色版本
+$primary-dark: mix(black, $primary-color, 20%) !default;
+$success-dark: mix(black, $success-color, 20%) !default;
+$warning-dark: mix(black, $warning-color, 20%) !default;
+$danger-dark: mix(black, $danger-color, 20%) !default;
+$info-dark: mix(black, $info-color, 20%) !default;
+
+// 文本颜色
+$text-color-primary: #303133 !default;
+$text-color-regular: #606266 !default;
+$text-color-secondary: #909399 !default;
+$text-color-placeholder: #c0c4cc !default;
+$text-color-disabled: #c0c4cc !default;
+
+// 边框颜色
+$border-color-base: #dcdfe6 !default;
+$border-color-light: #e4e7ed !default;
+$border-color-lighter: #ebeef5 !default;
+$border-color-extra-light: #f2f6fc !default;
+
+// 背景颜色
+$bg-color: #f5f7fa !default;
+$bg-color-page: #f2f3f5 !default;
+$bg-color-white: #ffffff !default;
+$bg-color-black: #000000 !default;
+$bg-color-overlay: rgba(0, 0, 0, 0.4) !default;
+
+// 阴影
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04) !default;
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !default;
+
+// 渐变色
+$gradient-primary: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%) !default;
+$gradient-success: linear-gradient(135deg, $success-color 0%, $success-dark 100%) !default;
+$gradient-warning: linear-gradient(135deg, $warning-color 0%, $warning-dark 100%) !default;
+$gradient-danger: linear-gradient(135deg, $danger-color 0%, $danger-dark 100%) !default;
+$gradient-info: linear-gradient(135deg, $info-color 0%, $info-dark 100%) !default;
+
+// 链接颜色
+$link-color: $primary-color !default;
+$link-hover-color: $primary-dark !default;
+$link-active-color: $primary-dark !default;
+$link-disabled-color: $text-color-placeholder !default;
+
+// 状态颜色
+$color-hover: $primary-light !default;
+$color-active: $primary-color !default;
+$color-focus: $primary-color !default;
+$color-disabled: $text-color-disabled !default;
+
+// CSS 变量导出
+:root {
+  // 主题色
+  --primary-color: #{$primary-color};
+  --success-color: #{$success-color};
+  --warning-color: #{$warning-color};
+  --danger-color: #{$danger-color};
+  --info-color: #{$info-color};
+
+  // 主题色浅色
+  --primary-light: #{$primary-light};
+  --success-light: #{$success-light};
+  --warning-light: #{$warning-light};
+  --danger-light: #{$danger-light};
+  --info-light: #{$info-light};
+
+  // 主题色深色
+  --primary-dark: #{$primary-dark};
+  --success-dark: #{$success-dark};
+  --warning-dark: #{$warning-dark};
+  --danger-dark: #{$danger-dark};
+  --info-dark: #{$info-dark};
+
+  // 文本颜色
+  --text-color-primary: #{$text-color-primary};
+  --text-color-regular: #{$text-color-regular};
+  --text-color-secondary: #{$text-color-secondary};
+  --text-color-placeholder: #{$text-color-placeholder};
+  --text-color-disabled: #{$text-color-disabled};
+
+  // 边框颜色
+  --border-color-base: #{$border-color-base};
+  --border-color-light: #{$border-color-light};
+  --border-color-lighter: #{$border-color-lighter};
+  --border-color-extra-light: #{$border-color-extra-light};
+
+  // 背景颜色
+  --bg-color: #{$bg-color};
+  --bg-color-page: #{$bg-color-page};
+  --bg-color-white: #{$bg-color-white};
+  --bg-color-black: #{$bg-color-black};
+  --bg-color-overlay: #{$bg-color-overlay};
+}
+
+// 颜色工具类
+@each $name, $color in (
+  'primary': $primary-color,
+  'success': $success-color,
+  'warning': $warning-color,
+  'danger': $danger-color,
+  'info': $info-color
+) {
+  // 文字颜色
+  .text-#{$name} {
+    color: $color !important;
+  }
+
+  // 背景颜色
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+
+  // 边框颜色
+  .border-#{$name} {
+    border-color: $color !important;
+  }
+
+  // 浅色版本
+  .text-#{$name}-light {
+    color: mix(white, $color, 80%) !important;
+  }
+
+  .bg-#{$name}-light {
+    background-color: mix(white, $color, 80%) !important;
+  }
+
+  // 深色版本
+  .text-#{$name}-dark {
+    color: mix(black, $color, 20%) !important;
+  }
+
+  .bg-#{$name}-dark {
+    background-color: mix(black, $color, 20%) !important;
+  }
+}

package/style/index.scss

@@ -0,0 +1,399 @@
+/**
+ * 样式系统入口
+ * @module style
+ */
+
+// 导入颜色系统
+@import './colors/index.scss';
+
+// 尺寸变量
+$size-mini: 24rpx !default;
+$size-small: 28rpx !default;
+$size-medium: 32rpx !default;
+$size-large: 36rpx !default;
+
+// 字体大小
+$font-size-xs: 20rpx !default;
+$font-size-sm: 24rpx !default;
+$font-size-base: 28rpx !default;
+$font-size-md: 32rpx !default;
+$font-size-lg: 36rpx !default;
+$font-size-xl: 40rpx !default;
+$font-size-xxl: 48rpx !default;
+
+// 字体粗细
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+
+// 行高
+$line-height-none: 1 !default;
+$line-height-tight: 1.25 !default;
+$line-height-snug: 1.375 !default;
+$line-height-normal: 1.5 !default;
+$line-height-relaxed: 1.625 !default;
+$line-height-loose: 2 !default;
+
+// 圆角
+$border-radius-none: 0 !default;
+$border-radius-sm: 4rpx !default;
+$border-radius-base: 8rpx !default;
+$border-radius-md: 12rpx !default;
+$border-radius-lg: 16rpx !default;
+$border-radius-xl: 24rpx !default;
+$border-radius-full: 9999rpx !default;
+
+// 边框宽度
+$border-width-none: 0 !default;
+$border-width-thin: 1px !default;
+$border-width-base: 2rpx !default;
+$border-width-thick: 4rpx !default;
+
+// 间距
+$spacing-xs: 8rpx !default;
+$spacing-sm: 12rpx !default;
+$spacing-base: 16rpx !default;
+$spacing-md: 20rpx !default;
+$spacing-lg: 24rpx !default;
+$spacing-xl: 32rpx !default;
+$spacing-xxl: 40rpx !default;
+
+// 动画时长
+$duration-fast: 150ms !default;
+$duration-base: 300ms !default;
+$duration-slow: 500ms !default;
+
+// 缓动函数
+$ease-linear: linear !default;
+$ease-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$ease-out: cubic-bezier(0, 0, 0.2, 1) !default;
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// z-index 层级
+$z-index-dropdown: 1000 !default;
+$z-index-sticky: 1020 !default;
+$z-index-fixed: 1030 !default;
+$z-index-modal-backdrop: 1040 !default;
+$z-index-modal: 1050 !default;
+$z-index-popover: 1060 !default;
+$z-index-tooltip: 1070 !default;
+$z-index-toast: 1080 !default;
+
+// CSS 变量导出
+:root {
+  // 尺寸
+  --size-mini: #{$size-mini};
+  --size-small: #{$size-small};
+  --size-medium: #{$size-medium};
+  --size-large: #{$size-large};
+
+  // 字体大小
+  --font-size-xs: #{$font-size-xs};
+  --font-size-sm: #{$font-size-sm};
+  --font-size-base: #{$font-size-base};
+  --font-size-md: #{$font-size-md};
+  --font-size-lg: #{$font-size-lg};
+  --font-size-xl: #{$font-size-xl};
+  --font-size-xxl: #{$font-size-xxl};
+
+  // 圆角
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-base: #{$border-radius-base};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+
+  // 间距
+  --spacing-xs: #{$spacing-xs};
+  --spacing-sm: #{$spacing-sm};
+  --spacing-base: #{$spacing-base};
+  --spacing-md: #{$spacing-md};
+  --spacing-lg: #{$spacing-lg};
+  --spacing-xl: #{$spacing-xl};
+  --spacing-xxl: #{$spacing-xxl};
+
+  // 动画
+  --duration-fast: #{$duration-fast};
+  --duration-base: #{$duration-base};
+  --duration-slow: #{$duration-slow};
+}
+
+// 全局样式重置
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+// 工具类
+// 显示/隐藏
+.hidden {
+  display: none !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+uni-view {
+  overflow: visible;
+}
+
+// Flex 布局
+.flex {
+  display: flex !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-col {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.justify-start {
+  justify-content: flex-start !important;
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+.justify-end {
+  justify-content: flex-end !important;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.justify-around {
+  justify-content: space-around !important;
+}
+
+.justify-evenly {
+  justify-content: space-evenly !important;
+}
+
+.items-start {
+  align-items: flex-start !important;
+}
+
+.items-center {
+  align-items: center !important;
+}
+
+.items-end {
+  align-items: flex-end !important;
+}
+
+.items-stretch {
+  align-items: stretch !important;
+}
+
+.flex-1 {
+  flex: 1 !important;
+}
+
+.flex-auto {
+  flex: auto !important;
+}
+
+.flex-none {
+  flex: none !important;
+}
+
+// 文本对齐
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+// 字体大小
+@each $name, $size in (
+  'xs': $font-size-xs,
+  'sm': $font-size-sm,
+  'base': $font-size-base,
+  'md': $font-size-md,
+  'lg': $font-size-lg,
+  'xl': $font-size-xl,
+  'xxl': $font-size-xxl
+) {
+  .text-#{$name} {
+    font-size: $size !important;
+  }
+}
+
+// 字体粗细
+@each $name, $weight in (
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'semibold': $font-weight-semibold,
+  'bold': $font-weight-bold
+) {
+  .font-#{$name} {
+    font-weight: $weight !important;
+  }
+}
+
+// 圆角
+@each $name, $radius in (
+  'none': $border-radius-none,
+  'sm': $border-radius-sm,
+  'base': $border-radius-base,
+  'md': $border-radius-md,
+  'lg': $border-radius-lg,
+  'xl': $border-radius-xl,
+  'full': $border-radius-full
+) {
+  .rounded-#{$name} {
+    border-radius: $radius !important;
+  }
+}
+
+// 间距（内边距和外边距）
+@each $name, $space in (
+  'xs': $spacing-xs,
+  'sm': $spacing-sm,
+  'base': $spacing-base,
+  'md': $spacing-md,
+  'lg': $spacing-lg,
+  'xl': $spacing-xl,
+  'xxl': $spacing-xxl
+) {
+  // 内边距
+  .p-#{$name} {
+    padding: $space !important;
+  }
+  .px-#{$name} {
+    padding-left: $space !important;
+    padding-right: $space !important;
+  }
+  .py-#{$name} {
+    padding-top: $space !important;
+    padding-bottom: $space !important;
+  }
+  .pt-#{$name} {
+    padding-top: $space !important;
+  }
+  .pr-#{$name} {
+    padding-right: $space !important;
+  }
+  .pb-#{$name} {
+    padding-bottom: $space !important;
+  }
+  .pl-#{$name} {
+    padding-left: $space !important;
+  }
+
+  // 外边距
+  .m-#{$name} {
+    margin: $space !important;
+  }
+  .mx-#{$name} {
+    margin-left: $space !important;
+    margin-right: $space !important;
+  }
+  .my-#{$name} {
+    margin-top: $space !important;
+    margin-bottom: $space !important;
+  }
+  .mt-#{$name} {
+    margin-top: $space !important;
+  }
+  .mr-#{$name} {
+    margin-right: $space !important;
+  }
+  .mb-#{$name} {
+    margin-bottom: $space !important;
+  }
+  .ml-#{$name} {
+    margin-left: $space !important;
+  }
+}
+
+// 宽高
+.w-full {
+  width: 100% !important;
+}
+
+.h-full {
+  height: 100% !important;
+}
+
+.w-screen {
+  width: 100vw !important;
+}
+
+.h-screen {
+  height: 100vh !important;
+}
+
+// 溢出
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+// 文本溢出
+.truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+// 阴影
+@each $name, $shadow in (
+  'sm': $shadow-sm,
+  'base': $shadow-base,
+  'md': $shadow-md,
+  'lg': $shadow-lg,
+  'xl': $shadow-xl
+) {
+  .shadow-#{$name} {
+    box-shadow: $shadow !important;
+  }
+}
+
+// 过渡
+.transition {
+  transition: all $duration-base $ease-in-out !important;
+}
+
+.transition-fast {
+  transition: all $duration-fast $ease-in-out !important;
+}
+
+.transition-slow {
+  transition: all $duration-slow $ease-in-out !important;
+}

package/types/index.uts

@@ -0,0 +1,52 @@
+/**
+ * 全局类型定义
+ */
+
+/**
+ * 组件类型
+ */
+export type ComponentType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+/**
+ * 位置类型
+ */
+export type PositionType = 'top' | 'center' | 'bottom'
+
+/**
+ * Toast 选项类型
+ */
+export type ToastOptions = {
+  /**
+   * 提示内容
+   */
+  message: string
+
+  /**
+   * 提示类型
+   * @default 'default'
+   */
+  type?: ComponentType
+
+  /**
+   * 显示时长（毫秒）
+   * @default 2000
+   */
+  duration?: number
+
+  /**
+   * 显示位置
+   * @default 'center'
+   */
+  position?: PositionType
+
+  /**
+   * 是否显示遮罩层
+   * @default false
+   */
+  mask?: boolean
+
+  /**
+   * 自定义图标路径
+   */
+  icon?: string
+}

package/uni.scss

@@ -0,0 +1,79 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+// 导入自定义样式
+@import '@/style/index.scss';
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16px;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;