1

src/scss/common.scss

@@ -0,0 +1,121 @@
+// 全局通用样式变量和混入
+// 字体相关
+$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
+
+// 颜色相关
+$color-primary: #000000 !default;
+$color-primary-light: rgba(0, 0, 0, 0.85) !default;
+$color-primary-medium: rgba(0, 0, 0, 0.65) !default;
+$color-primary-lightest: rgba(0, 0, 0, 0.35) !default;
+$color-primary-lightest-2: rgba(0, 0, 0, 0.2) !default;
+$color-primary-lightest-3: rgba(0, 0, 0, 0.16) !default;
+$color-primary-lightest-4: rgba(0, 0, 0, 0.1) !default;
+$color-primary-lightest-5: rgba(0, 0, 0, 0.06) !default;
+$color-primary-lightest-6: rgba(0, 0, 0, 0.08) !default;
+
+$color-text-secondary: rgba(60, 60, 67, 0.6) !default;
+$color-text-tertiary: rgba(60, 60, 67, 0.3) !default;
+
+$color-white: #FFFFFF !default;
+$color-background: #FAFAFA !default;
+
+// 字体大小和行高混入
+@mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) {
+  font-family: $font-family-primary;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+}
+
+// 常用文本样式
+@mixin text-primary {
+  @include text-style(20px, 600, 1.4em, 1.9%);
+  color: $color-primary;
+}
+
+@mixin text-secondary {
+  @include text-style(14px, 400, 1.4em, 2.7%);
+  color: $color-primary-lightest;
+}
+
+@mixin text-small {
+  @include text-style(12px, 500, 1.4em, 3.2%);
+  color: $color-primary-lightest;
+}
+
+@mixin text-medium {
+  @include text-style(18px, 600, 1.4em, 2.1%);
+  color: $color-primary-light;
+}
+
+@mixin text-body {
+  @include text-style(14px, 400, 1.571em, 2.7%);
+  color: $color-primary-medium;
+}
+
+@mixin text-caption {
+  @include text-style(12px, 400, 1.5em);
+  color: $color-text-secondary;
+}
+
+@mixin text-tag {
+  @include text-style(11px, 500, 1.8em, -2.1%);
+  color: $color-primary;
+}
+
+// 按钮样式混入
+@mixin button-base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+  outline: none;
+}
+
+@mixin button-primary {
+  @include button-base;
+  background: $color-primary;
+  border: 0.5px solid $color-primary-lightest-5;
+  border-radius: 999px;
+  color: $color-white;
+}
+
+@mixin button-secondary {
+  @include button-base;
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-3;
+  border-radius: 999px;
+  color: $color-primary;
+}
+
+// 卡片样式混入
+@mixin card-base {
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-6;
+  border-radius: 20px;
+  box-shadow: 0px 4px 36px 0px $color-primary-lightest-5;
+}
+
+// 标签样式混入
+@mixin tag-base {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  height: 20px;
+  background: $color-white;
+  border: 0.5px solid $color-primary-lightest-3;
+  border-radius: 999px;
+}
+
+// 头像样式混入
+@mixin avatar-base($size: 64px) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+}