2025/2/8第一次更新

node_modules/tnuiv3p-tn-graphic-card/theme-chalk/index.scss

@@ -0,0 +1,215 @@
+@use './mixins/mixins.scss' as *;
+
+@include b(graphic-card) {
+  position: relative;
+  width: 100%;
+  padding: 30rpx;
+  background-color: var(--tn-color-white);
+
+  /* 简要信息 start */
+  @include e(brief-info) {
+    display: flex;
+    align-items: center;
+
+    /* 简要内容 start */
+    &__content {
+      flex-grow: 1;
+      display: flex;
+    }
+    &__avatar {
+      flex-shrink: 0;
+      width: 90rpx;
+      height: 90rpx;
+      border-radius: 50%;
+      background-color: var(--tn-color-gray--disabled);
+      .image {
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+      }
+    }
+    &__data {
+      flex-grow: 1;
+      margin-left: 24rpx;
+      color: var(--tn-text-color-primary);
+      line-height: 1;
+      padding-top: 6rpx;
+      .title {
+        font-size: 30rpx;
+      }
+      .desc {
+        margin-top: 16rpx;
+        font-size: 24rpx;
+        color: var(--tn-color-gray);
+      }
+    }
+    /* 简要内容 end */
+
+    /* 操作按钮 start */
+    &__operation {
+      flex-grow: 0;
+
+      &--more {
+        font-size: 40rpx;
+        font-weight: bold;
+        color: var(--tn-color-gray-disabled);
+        padding-left: 20rpx;
+      }
+    }
+    /* 操作按钮 end */
+  }
+  /* 简要信息 end */
+
+  /* 内容 start */
+  @include e(container) {
+    margin-top: 20rpx;
+  }
+  @include e(content) {
+    /* 内容标签 start */
+    &__tags {
+      display: flex;
+      float: left;
+      align-items: center;
+      margin-top: 4rpx;
+      .tag-item {
+        width: fit-content;
+        height: fit-content;
+        padding: 8rpx 16rpx;
+        border-radius: 6rpx;
+
+        margin-right: 16rpx;
+        font-size: 24rpx;
+        line-height: 1;
+      }
+    }
+    /* 内容标签 end */
+
+    /* 内容数据 start */
+    &__data {
+      font-size: 28rpx;
+      line-height: 1.8em;
+      // display: inline-block;
+      color: var(--tn-text-color-primary);
+      // 文字两端对齐
+      text-align: justify;
+    }
+    /* 内容数据 end */
+  }
+
+  /* 图片列表 start */
+  @include e(images) {
+    width: 100%;
+    margin-top: 20rpx;
+
+    @include m(item) {
+      /* 一张图片 start */
+      @include when(one) {
+        width: 70%;
+        height: 300rpx;
+        border-radius: 15rpx;
+      }
+      /* 一张图片 end */
+
+      /* 两张图片 start */
+      @include when(two) {
+        width: 80%;
+      }
+      /* 两张图片 end */
+
+      /* 三张图片 start */
+      @include when(three) {
+        position: relative;
+        width: 100%;
+        height: 332rpx;
+        display: flex;
+        align-items: center;
+
+        /* 左边单图 start */
+        .image-wrapper-left {
+          position: relative;
+          width: 50%;
+          height: 100%;
+
+          .image-container {
+            width: 100%;
+            height: 100%;
+            border-radius: 15rpx;
+          }
+        }
+        /* 左边单图 end */
+        /* 右边双图 start */
+        .image-wrapper-right {
+          position: relative;
+          flex: 1;
+          height: 100%;
+          margin-left: 28rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .image-container {
+            flex: 1;
+            width: 100%;
+            border-radius: 15rpx;
+
+            & + .image-container {
+              margin-top: 28rpx;
+            }
+          }
+        }
+        /* 右边双图 end */
+      }
+      /* 三张图片 end */
+
+      /* 四张图片 start */
+      @include when(four) {
+        width: 80%;
+      }
+      /* 四张图片 end */
+    }
+  }
+  /* 图片列表 end */
+  /* 内容 end */
+
+  /* 底部信息 start */
+  @include e(bottom-info) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 16rpx;
+
+    /* 左边查看数据 start */
+    &__left {
+      display: flex;
+      align-items: center;
+
+      .count-item-data {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
+
+        .count {
+          margin-left: 6rpx;
+        }
+      }
+    }
+    /* 左边查看数据 end */
+
+    /* 右边查看用户头像数据 start */
+    &__right {
+      display: flex;
+      align-items: center;
+    }
+    /* 右边查看用户头像数据 end */
+
+    @include when(no-content) {
+      margin-top: 24rpx;
+    }
+  }
+  @include e(view-user-count) {
+    margin-left: 8rpx;
+    font-size: 26rpx;
+    color: var(--tn-color-gray);
+  }
+  /* 底部信息 end */
+}

node_modules/tnuiv3p-tn-graphic-card/theme-chalk/mixins/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'tn' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

node_modules/tnuiv3p-tn-graphic-card/theme-chalk/mixins/function.scss

@@ -0,0 +1,105 @@
+@use 'config';
+
+// BEM support Func
+// 块（Block）：代表一个独立的组件或页面中的一个大型部分。块可以看作是一个命名空间，用于包含相关元素和修饰符。例如，一个导航栏可以被视为一个块。
+// 元素（Element）：代表块的一部分，但不能独立存在。元素总是属于一个块，并且与该块紧密相关。元素由块名称和元素名称组成，中间由双下划线（__）连接。例如，一个导航栏可以包含多个链接，链接可以被视为导航栏块的元素。
+// 修饰符（Modifier）：代表块或元素的变体或状态。修饰符用于修改块或元素的外观或行为。修饰符由块名称或元素名称，连字符（-）和修饰符名称组成。例如，一个导航栏可以具有活动状态或浅色主题，这些状态可以通过添加修饰符类进行实现。
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str_index($selector, config.$modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + config.$state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+// join var name
+// joinVarName(('button', 'text-color')) => '--tn-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--tn-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--tn-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault('button', 'text-color', 'red') => var(--tn-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}
+
+// bem('block', 'element', ''modifier) => 'tn-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  @return $name;
+}
+
+// 字符串替换
+@function str-replace($string, $search, $replace) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}

node_modules/tnuiv3p-tn-graphic-card/theme-chalk/mixins/mixins.scss

@@ -0,0 +1,134 @@
+@use 'function' as *;
+// forward mixins
+@forward 'config';
+@forward 'function';
+
+@use 'config' as *;
+
+// BEM
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector +
+      '.' +
+      $B +
+      $element-separator +
+      $unit +
+      ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +
+      $selector +
+      $modifier-separator +
+      $unit +
+      ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B + $interpolation + $modifier-separator + $modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector(
+  $specSelector: '',
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
+  $modifierCombo: '';
+  $elementCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+  @if $element {
+    $elementCombo: $element-separator + $element;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block + $elementCombo + $modifierCombo} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block + $element-separator + $element + $modifierCombo} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}