@polyv/vue-components 1.3.0 → 1.5.0

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@polyv/vue-components",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "main": "./vue/index.es.js",
   "types": "./vue/src/index.d.ts",
-  "type": "module",
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@just4/ajax": "^1.1.0",
@@ -11,21 +10,27 @@
     "@just4/load-script": "^1.2.0",
     "@just4/querystring": "^2.0.0",
     "@just4/ua-info": "^3.0.0",
-    "@polyv/icons-vue-middle": "1.3.0",
+    "@polyv/icons-vue-middle": "1.4.0",
     "@popperjs/core": "2.11.4",
     "async-validator": "4.2.5",
     "clipboard": "2.0.10",
+    "dayjs": "^1.11.19",
     "esno": "4.8.0",
     "fs-extra": "11.3.0",
     "lodash-es": "4.17.21",
     "normalize-wheel": "^1.0.1",
+    "sortablejs": "^1.15.6",
     "svgaplayerweb": "2.3.2",
     "swiper": "^12.0.2",
     "vue": "2.7.16",
+    "vue-draggable-plus": "^0.6.0",
     "vue-types": "5.1.1"
   },
+  "peerDependencies": {
+    "@polyv/utils": "^2.0.0"
+  },
   "module": "./vue/index.es.js",
   "scripts": {
-    "postinstall": "node ./after-install/index.js"
+    "postinstall": "node ./after-install/index.mjs"
   }
 }

package/styles/function.scss

@@ -0,0 +1,60 @@
+@use 'sass:math';
+@use 'sass:color';
+
+@function get-css-var($name) {
+  @return var(--pwc-#{$name});
+}
+
+@function get-rgb($color) {
+  @return (
+    round(color.channel($color, 'red')),
+    round(color.channel($color, 'green')),
+    round(color.channel($color, 'blue'))
+  );
+}
+
+// 计算浅色颜色
+@function light-color($color, $alpha) {
+  @return rgb(
+    round(color.channel($color, 'red')   * $alpha + 255 * (1 - $alpha)),
+    round(color.channel($color, 'green') * $alpha + 255 * (1 - $alpha)),
+    round(color.channel($color, 'blue')  * $alpha + 255 * (1 - $alpha))
+  );
+}
+
+// 计算深色颜色
+@function dark-color($color, $alpha) {
+  @return rgb(
+    round(color.channel($color, 'red')   * $alpha),
+    round(color.channel($color, 'green') * $alpha),
+    round(color.channel($color, 'blue')  * $alpha)
+  );
+}
+
+@function get-mode-color($color, $alpha, $mode: 'light') {
+  @if $mode == 'light' {
+    @return light-color($color, $alpha);
+  } @else if $mode == 'dark' {
+    @return dark-color($color, $alpha);
+  }
+}
+
+@function brightness($color, $factor) {
+  @return rgb(
+    min(255, color.channel($color, 'red')),
+    min(255, color.channel($color, 'green') * $factor),
+    min(255, color.channel($color, 'blue') * $factor)
+  );
+}
+
+@function hue-rotate-hex($color, $deg) {
+  // 使用 HSL 色相旋转
+  $rotated: color.adjust($color, $hue: $deg);
+
+  // 强制取整，避免 rgb 小数
+  @return rgb(
+    round(color.channel($rotated, 'red')),
+    round(color.channel($rotated, 'green')),
+    round(color.channel($rotated, 'blue'))
+  );
+}

package/styles/mixins.scss

@@ -51,6 +51,7 @@
     background-color: $thumbColor;
     border-color: transparent;
     transition: background-color 0.2s ease;
+    border-radius: 8px;
     &:hover {
       background-color: $thumbColor-hover;
     }

package/styles/root/basic.scss

@@ -0,0 +1,85 @@
+@use '../function.scss' as *;
+@use '../variables.scss' as *;
+
+:root {
+  // 主色
+  --pwc-primary-basic: #{$primary-basic};
+  --pwc-primary-basic-rgb: #{get-rgb($primary-basic)};
+  --pwc-primary-light-1: #{light-color($primary-basic, 0.1)};
+  --pwc-primary-light-2: #{light-color($primary-basic, 0.2)};
+  --pwc-primary-light-3: #{light-color($primary-basic, 0.3)};
+  --pwc-primary-light-4: #{light-color($primary-basic, 0.4)};
+  --pwc-primary-light-5: #{light-color($primary-basic, 0.5)};
+  --pwc-primary-light-6: #{light-color($primary-basic, 0.6)};
+  --pwc-primary-light-7: #{light-color($primary-basic, 0.7)};
+  --pwc-primary-light-8: #{light-color($primary-basic, 0.8)};
+  --pwc-primary-dark-8: #{dark-color($primary-basic, 0.8)};
+  --pwc-primary-color: var(--pwc-primary-basic);
+  --pwc-primary-color-hover: var(--pwc-primary-light-8);
+  --pwc-primary-color-active: var(--pwc-primary-dark-8);
+  --pwc-primary-color-disabled: var(--pwc-primary-light-6);
+  --pwc-primary-color-bg: rgba(var(--pwc-primary-basic-rgb), 0.1);
+  --pwc-primary-color-gradient: #8abfef;
+
+  // 成功色
+  --pwc-success-basic: #{$success-basic};
+  --pwc-success-basic-rgb: #{get-rgb($success-basic)};
+  --pwc-success-light-1: #{light-color($success-basic, 0.1)};
+  --pwc-success-light-2: #{light-color($success-basic, 0.2)};
+  --pwc-success-light-3: #{light-color($success-basic, 0.3)};
+  --pwc-success-light-4: #{light-color($success-basic, 0.4)};
+  --pwc-success-light-5: #{light-color($success-basic, 0.5)};
+  --pwc-success-light-6: #{light-color($success-basic, 0.6)};
+  --pwc-success-light-7: #{light-color($success-basic, 0.7)};
+  --pwc-success-light-8: #{light-color($success-basic, 0.8)};
+  --pwc-success-dark-8: #{dark-color($success-basic, 0.8)};
+  --pwc-success-color: var(--pwc-success-basic);
+  --pwc-success-color-hover: var(--pwc-success-light-8);
+  --pwc-success-color-active: var(--pwc-success-dark-8);
+  --pwc-success-color-disabled: var(--pwc-success-light-6);
+  --pwc-success-color-bg: rgba(var(--pwc-success-basic-rgb), 0.1);
+  --pwc-success-color-gradient: #7fe082;
+
+  // 危险色
+  --pwc-danger-basic: #{$danger-basic};
+  --pwc-danger-basic-rgb: #{get-rgb($danger-basic)};
+  --pwc-danger-light-1: #{light-color($danger-basic, 0.1)};
+  --pwc-danger-light-2: #{light-color($danger-basic, 0.2)};
+  --pwc-danger-light-3: #{light-color($danger-basic, 0.3)};
+  --pwc-danger-light-4: #{light-color($danger-basic, 0.4)};
+  --pwc-danger-light-5: #{light-color($danger-basic, 0.5)};
+  --pwc-danger-light-6: #{light-color($danger-basic, 0.6)};
+  --pwc-danger-light-7: #{light-color($danger-basic, 0.7)};
+  --pwc-danger-light-8: #{light-color($danger-basic, 0.8)};
+  --pwc-danger-dark-8: #{dark-color($danger-basic, 0.8)};
+  --pwc-danger-color: var(--pwc-danger-basic);
+  --pwc-danger-color-hover: var(--pwc-danger-light-8);
+  --pwc-danger-color-active: var(--pwc-danger-dark-8);
+  --pwc-danger-color-disabled: var(--pwc-danger-light-6);
+  --pwc-danger-color-bg: rgba(var(--pwc-danger-basic-rgb), 0.1);
+  --pwc-danger-color-brightness: #{brightness($danger-basic, 2)};
+  --pwc-danger-color-gradient: #FF9E63;
+
+  // 警告色
+  --pwc-warning-basic: #{$warning-basic};
+  --pwc-warning-basic-rgb: #{get-rgb($warning-basic)};
+  --pwc-warning-light-1: #{light-color($warning-basic, 0.1)};
+  --pwc-warning-light-2: #{light-color($warning-basic, 0.2)};
+  --pwc-warning-light-3: #{light-color($warning-basic, 0.3)};
+  --pwc-warning-light-4: #{light-color($warning-basic, 0.4)};
+  --pwc-warning-light-5: #{light-color($warning-basic, 0.5)};
+  --pwc-warning-light-6: #{light-color($warning-basic, 0.6)};
+  --pwc-warning-light-7: #{light-color($warning-basic, 0.7)};
+  --pwc-warning-light-8: #{light-color($warning-basic, 0.8)};
+  --pwc-warning-dark-8: #{dark-color($warning-basic, 0.8)};
+  --pwc-warning-color: var(--pwc-warning-basic);
+  --pwc-warning-color-hover: var(--pwc-warning-light-8);
+  --pwc-warning-color-active: var(--pwc-warning-dark-8);
+  --pwc-warning-color-disabled: var(--pwc-warning-light-6);
+  --pwc-warning-color-bg: rgba(var(--pwc-warning-basic-rgb), 0.1);
+  --pwc-warning-color-gradient: #fae735;
+
+  // 链接色
+  --pwc-link-color: rgb(63, 118, 252);
+  --pwc-link-color-disabled: rgba(63, 118, 252, 0.6);
+}

package/styles/root/bg.scss

@@ -0,0 +1,25 @@
+:root {
+  --pwc-bg-color-1: #ffffff;
+  --pwc-bg-color-2: #ffffff;
+  --pwc-bg-color-3: #ffffff;
+  --pwc-bg-color-4: #ffffff;
+  --pwc-bg-color-5: #ffffff;
+  // 气泡弹层背景
+  --pwc-popover-bg: #ffffff;
+}
+
+.pwc-skin-color-mode--dark {
+  --pwc-bg-color-1: #17171a;
+  --pwc-bg-color-2: #232324;
+  --pwc-bg-color-3: #2a2a2b;
+  --pwc-bg-color-4: #313132;
+  --pwc-bg-color-5: #373739;
+}
+
+.pwc-skin-color-mode--light {
+  --pwc-bg-color-1: #ffffff;
+  --pwc-bg-color-2: #ffffff;
+  --pwc-bg-color-3: #ffffff;
+  --pwc-bg-color-4: #ffffff;
+  --pwc-bg-color-5: #ffffff;
+}

package/styles/root/border.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../function.scss' as *;
+@use '../variables.scss' as *;
+
+:root {
+  // 边框色
+  --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 一级边框色
+  --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 二级边框色
+  --pwc-border-color-2: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 三级边框色
+  --pwc-border-color-3: rgba(#{$neutral-color-dark-rgb}, 0.1);
+}
+
+.pwc-skin-color-mode--dark {
+  // 边框色
+  --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 一级边框色
+  --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 二级边框色
+  --pwc-border-color-2: rgba(#{$neutral-color-dark-rgb}, 0.4);
+  // 三级边框色
+  --pwc-border-color-3: rgba(#{$neutral-color-dark-rgb}, 0.6);
+}
+
+.pwc-skin-color-mode--light {
+  // 边框色
+  --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 一级边框色
+  --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 二级边框色
+  --pwc-border-color-2: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 三级边框色
+  --pwc-border-color-3: rgba(#{$neutral-color-dark-rgb}, 0.1);
+}

package/styles/root/gray.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../function.scss' as *;
+@use '../variables.scss' as *;
+
+@mixin gray-color-variables($mode: 'light') {
+  // 一级灰色
+  --pwc-gray-color-1: #{map.get($gray-colors, $mode, '1')};
+  // 二级灰色
+  --pwc-gray-color-2: #{map.get($gray-colors, $mode, '2')};
+  // 三级灰色
+  --pwc-gray-color-3: #{map.get($gray-colors, $mode, '3')};
+  // 四级灰色
+  --pwc-gray-color-4: #{map.get($gray-colors, $mode, '4')};
+  // 五级灰色
+  --pwc-gray-color-5: #{map.get($gray-colors, $mode, '5')};
+  // 六级灰色
+  --pwc-gray-color-6: #{map.get($gray-colors, $mode, '6')};
+  // 七级灰色
+  --pwc-gray-color-7: #{map.get($gray-colors, $mode, '7')};
+  // 八级灰色
+  --pwc-gray-color-8: #{map.get($gray-colors, $mode, '8')};
+  // 九级灰色
+  --pwc-gray-color-9: #{map.get($gray-colors, $mode, '9')};
+  // 十级灰色
+  --pwc-gray-color-10: #{map.get($gray-colors, $mode, '10')};
+}
+
+:root {
+  @include gray-color-variables('light');
+}
+
+.pwc-skin-color-mode--dark {
+  @include gray-color-variables('dark');
+}
+
+.pwc-skin-color-mode--light {
+  @include gray-color-variables('light');
+}

package/styles/root/neutral.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../function.scss' as *;
+@use '../variables.scss' as *;
+
+:root {
+  // 中性深色
+  --pwc-neutral-color-dark: #000000;
+  // 中性深色（rgb）
+  --pwc-neutral-color-dark-rgb: 0, 0, 0;
+  // 中性浅色
+  --pwc-neutral-color-light: #ffffff;
+  // 中性浅色（rgb）
+  --pwc-neutral-color-light-rgb: 255, 255, 255;
+}
+
+.pwc-skin-color-mode--dark {
+  // 中性深色
+  --pwc-neutral-color-dark: #ffffff;
+  // 中性深色（rgb）
+  --pwc-neutral-color-dark-rgb: 255, 255, 255;
+  // 中性浅色
+  --pwc-neutral-color-light: #000000;
+  // 中性浅色（rgb）
+  --pwc-neutral-color-light-rgb: 0, 0, 0;
+}
+
+.pwc-skin-color-mode--light {
+  // 中性深色
+  --pwc-neutral-color-dark: #000000;
+  // 中性深色（rgb）
+  --pwc-neutral-color-dark-rgb: 0, 0, 0;
+  // 中性浅色
+  --pwc-neutral-color-light: #ffffff;
+  // 中性浅色（rgb）
+  --pwc-neutral-color-light-rgb: 255, 255, 255;
+}

package/styles/root/other.scss

@@ -0,0 +1,3 @@
+:root {
+  --pwc-white-color: #ffffff;
+}

package/styles/root/radius.scss

@@ -0,0 +1,14 @@
+:root {
+  // 直角
+  --pwc-border-radius-none: 0;
+  // 圆角-常规
+  --pwc-border-radius-small: 2px;
+  // 圆角-中等
+  --pwc-border-radius-medium: 4px;
+  // 圆角-较大
+  --pwc-border-radius-large: 8px;
+  // 圆角-全圆角
+  --pwc-border-radius-circle: 50%;
+  // 圆角-胶囊
+  --pwc-border-radius-capsule: 999px;
+}

package/styles/root/root.scss

@@ -0,0 +1,9 @@
+@use './basic.scss' as *;
+@use './gray.scss' as *;
+@use './neutral.scss' as *;
+@use './text.scss' as *;
+@use './bg.scss' as *;
+@use './border.scss' as *;
+@use './other.scss' as *;
+@use './radius.scss' as *;
+@use './shadow.scss' as *;

package/styles/root/shadow.scss

@@ -0,0 +1,8 @@
+:root {
+  // 基础阴影
+  --pwc-shadow-base: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  // 中层阴影
+  --pwc-shadow-middle: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+  // 上层阴影
+  --pwc-shadow-top: 0 6px 30px -5px rgba(0, 0, 0, 0.2);
+}

package/styles/root/text.scss

@@ -0,0 +1,34 @@
+@use '../function.scss' as *;
+@use '../variables.scss' as *;
+
+@mixin text-color-variables() {
+  // // 一级字体色
+  // --pwc-text-color: #{$gray-color-10};
+  // // 二级字体色
+  // --pwc-text-color-secondary: #{$gray-color-8};
+  // // 三级字体色
+  // --pwc-text-color-tertiary: #{$gray-color-6};
+  // // 四级字体色
+  // --pwc-text-color-quaternary: #{$gray-color-4};
+
+  // 一级字体色
+  --pwc-text-color: rgba(#{$neutral-color-dark-rgb}, 0.8);
+  // 二级字体色
+  --pwc-text-color-secondary: rgba(#{$neutral-color-dark-rgb}, 0.6);
+  // 三级字体色
+  --pwc-text-color-tertiary: rgba(#{$neutral-color-dark-rgb}, 0.4);
+  // 四级字体色
+  --pwc-text-color-quaternary: rgba(#{$neutral-color-dark-rgb}, 0.2);
+}
+
+:root {
+  @include text-color-variables;
+}
+
+.pwc-skin-color-mode--dark {
+  @include text-color-variables;
+}
+
+.pwc-skin-color-mode--light {
+  @include text-color-variables;
+}

package/styles/variables.scss

@@ -0,0 +1,192 @@
+@use './function.scss' as *;
+
+// 主色基础色
+$primary-basic: #3F76FC !default;
+// 主要色基础色（rgb）
+$primary-basic-rgb: get-css-var('primary-basic-rgb') !default;
+// 主要色
+$primary-color: get-css-var('primary-color') !default;
+// 主要色悬停
+$primary-color-hover: get-css-var('primary-color-hover') !default;
+// 主要色激活
+$primary-color-active: get-css-var('primary-color-active') !default;
+// 主要色禁用
+$primary-color-disabled: get-css-var('primary-color-disabled') !default;
+// 主要色浅色透明背景
+$primary-color-bg: get-css-var('primary-color-bg') !default;
+// 主要色渐变
+$primary-color-gradient: get-css-var('primary-color-gradient') !default;
+
+// 成功色基础色
+$success-basic: #23AA4F !default;
+// 成功色基础色（rgb）
+$success-basic-rgb: get-css-var('success-basic-rgb') !default;
+// 成功色
+$success-color: get-css-var('success-color') !default;
+// 成功色悬停
+$success-color-hover: get-css-var('success-color-hover') !default;
+// 成功色激活
+$success-color-active: get-css-var('success-color-active') !default;
+// 成功色禁用
+$success-color-disabled: get-css-var('success-color-disabled') !default;
+// 成功色浅色透明背景
+$success-color-bg: get-css-var('success-color-bg') !default;
+// 成功色渐变
+$success-color-gradient: get-css-var('success-color-gradient') !default;
+
+// 危险色基础色
+$danger-basic: #FF6264 !default;
+// 危险色基础色（rgb）
+$danger-basic-rgb: get-css-var('danger-basic-rgb') !default;
+// 危险色
+$danger-color: get-css-var('danger-color') !default;
+// 危险色悬停
+$danger-color-hover: get-css-var('danger-color-hover') !default;
+// 危险色激活
+$danger-color-active: get-css-var('danger-color-active') !default;
+// 危险色禁用
+$danger-color-disabled: get-css-var('danger-color-disabled') !default;
+// 危险色浅色透明背景
+$danger-color-bg: get-css-var('danger-color-bg') !default;
+// 危险色渐变
+$danger-color-gradient: get-css-var('danger-color-gradient') !default;
+
+// 警告色基础色
+$warning-basic: #FF9F45 !default;
+// 警告色基础色（rgb）
+$warning-basic-rgb: get-css-var('warning-basic-rgb') !default;
+// 警告色
+$warning-color: get-css-var('warning-color') !default;
+// 警告色悬停
+$warning-color-hover: get-css-var('warning-color-hover') !default;
+// 警告色激活
+$warning-color-active: get-css-var('warning-color-active') !default;
+// 警告色禁用
+$warning-color-disabled: get-css-var('warning-color-disabled') !default;
+// 警告色浅色透明背景
+$warning-color-bg: get-css-var('warning-color-bg') !default;
+// 警告色渐变
+$warning-color-gradient: get-css-var('warning-color-gradient') !default;
+
+// 链接色基础色
+$link-basic: #3F76FC !default;
+// 链接色
+$link-color: get-css-var('link-color') !default;
+// 链接色禁用
+$link-color-disabled: get-css-var('link-color-disabled') !default;
+
+// 灰色
+$gray-colors: (
+  'light': (
+    '1': #f7f8fa,
+    '2': #f2f3f5,
+    '3': #e5e6eb,
+    '4': #c9cdd4,
+    '5': #a9aeb8,
+    '6': #86909c,
+    '7': #6b7785,
+    '8': #4e5969,
+    '9': #272e3b,
+    '10': #1d2129,
+  ),
+  'dark': (
+    '1': #17171a,
+    '2': #2e2e30,
+    '3': #484849,
+    '4': #5f5f60,
+    '5': #78787a,
+    '6': #929293,
+    '7': #ababac,
+    '8': #c5c5c5,
+    '9': #dfdfdf,
+    '10': #f6f6f6,
+  )
+) !default;
+
+// 一级灰色
+$gray-color-1: get-css-var('gray-color-1') !default;
+// 二级灰色
+$gray-color-2: get-css-var('gray-color-2') !default;
+// 三级灰色
+$gray-color-3: get-css-var('gray-color-3') !default;
+// 四级灰色
+$gray-color-4: get-css-var('gray-color-4') !default;
+// 五级灰色
+$gray-color-5: get-css-var('gray-color-5') !default;
+// 六级灰色
+$gray-color-6: get-css-var('gray-color-6') !default;
+// 七级灰色
+$gray-color-7: get-css-var('gray-color-7') !default;
+// 八级灰色
+$gray-color-8: get-css-var('gray-color-8') !default;
+// 九级灰色
+$gray-color-9: get-css-var('gray-color-9') !default;
+// 十级灰色
+$gray-color-10: get-css-var('gray-color-10') !default;
+
+// 中性深色
+$neutral-color-dark: get-css-var('neutral-color-dark') !default;
+// 中性深色（rgb）
+$neutral-color-dark-rgb: get-css-var('neutral-color-dark-rgb') !default;
+// 中性浅色
+$neutral-color-light: get-css-var('neutral-color-light') !default;
+// 中性浅色（rgb）
+$neutral-color-light-rgb: get-css-var('neutral-color-light-rgb') !default;
+
+// 一级字体色/正文
+$text-color: get-css-var('text-color') !default;
+// 二级字体色/辅助
+$text-color-secondary: get-css-var('text-color-secondary') !default;
+// 三级字体色/提示
+$text-color-tertiary: get-css-var('text-color-tertiary') !default;
+// 四级字体色/禁用
+$text-color-quaternary: get-css-var('text-color-quaternary') !default;
+
+// 一级背景色
+$bg-color-1: get-css-var('bg-color-1') !default;
+// 二级背景色
+$bg-color-2: get-css-var('bg-color-2') !default;
+// 三级背景色
+$bg-color-3: get-css-var('bg-color-3') !default;
+// 四级背景色
+$bg-color-4: get-css-var('bg-color-4') !default;
+// 五级背景色
+$bg-color-5: get-css-var('bg-color-5') !default;
+
+// 边框色
+$border-color: get-css-var('border-color') !default;
+// 一级边框色
+$border-color-1: get-css-var('border-color-1') !default;
+// 二级边框色
+$border-color-2: get-css-var('border-color-2') !default;
+// 三级边框色
+$border-color-3: get-css-var('border-color-3') !default;
+
+// 白色
+$white-color: get-css-var('white-color') !default;
+
+// 基础阴影
+$shadow-base: get-css-var('shadow-base') !default;
+// 中层阴影
+$shadow-middle: get-css-var('shadow-middle') !default;
+// 上层阴影
+$shadow-top: get-css-var('shadow-top') !default;
+
+// 禁用状态的透明度
+$disabled-opacity: 0.6 !default;
+
+// 直角
+$border-radius-none: get-css-var('border-radius-none') !default;
+// 圆角-常规
+$border-radius-small: get-css-var('border-radius-small') !default;
+// 圆角-中等
+$border-radius-medium: get-css-var('border-radius-medium') !default;
+// 圆角-较大
+$border-radius-large: get-css-var('border-radius-large') !default;
+// 圆角-全圆角
+$border-radius-circle: get-css-var('border-radius-circle') !default;
+// 圆角-胶囊
+$border-radius-capsule: get-css-var('border-radius-capsule') !default;
+
+// 气泡弹层背景
+$popover-bg: #fff !default;