officialblock 1.0.7 → 1.0.9

package/src/styles/mixins/style-isolation.scss

@@ -0,0 +1,262 @@
+/**
+ * 样式隔离 Mixins
+ * 用于帮助组件完全隔离全局样式影响
+ */
+
+// 字体隔离 mixin
+@mixin font-isolation($size: null, $weight: null, $family: null, $line-height: null) {
+  // 重置字体继承
+  font-size: initial;
+  font-family: initial;
+  font-weight: initial;
+  line-height: initial;
+  
+  // 设置指定的字体属性
+  @if $size {
+    font-size: $size !important;
+  }
+  
+  @if $weight {
+    font-weight: $weight !important;
+  }
+  
+  @if $family {
+    font-family: $family !important;
+  }
+  
+  @if $line-height {
+    line-height: $line-height !important;
+  }
+}
+
+// 完全样式隔离 mixin
+@mixin complete-isolation() {
+  // 重置所有可能被继承的样式
+  all: initial;
+  
+  // 恢复必要的显示属性
+  display: block;
+  box-sizing: border-box;
+  
+  // 重置字体
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #000;
+  
+  // 确保子元素也被隔离
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// 按钮样式隔离 mixin
+@mixin button-isolation($font-size: 14px, $padding: 8px 16px, $bg-color: #007bff, $text-color: #fff) {
+  @include font-isolation($font-size, 500);
+  
+  padding: $padding !important;
+  background-color: $bg-color !important;
+  color: $text-color !important;
+  border: none !important;
+  border-radius: 4px !important;
+  cursor: pointer !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-decoration: none !important;
+  user-select: none !important;
+  
+  &:hover {
+    opacity: 0.9 !important;
+  }
+  
+  &:active {
+    transform: translateY(1px) !important;
+  }
+}
+
+// 文本样式隔离 mixin
+@mixin text-isolation($size: 14px, $weight: 400, $color: #000, $line-height: 1.5) {
+  @include font-isolation($size, $weight, null, $line-height);
+  color: $color !important;
+  text-decoration: none !important;
+  text-transform: none !important;
+  letter-spacing: normal !important;
+}
+
+// 容器样式隔离 mixin
+@mixin container-isolation($width: auto, $height: auto, $padding: 0, $margin: 0) {
+  width: $width !important;
+  height: $height !important;
+  padding: $padding !important;
+  margin: $margin !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+// Flex 布局隔离 mixin
+@mixin flex-isolation($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
+  display: flex !important;
+  flex-direction: $direction !important;
+  justify-content: $justify !important;
+  align-items: $align !important;
+  flex-wrap: $wrap !important;
+}
+
+// 定位隔离 mixin
+@mixin position-isolation($position: static, $top: auto, $right: auto, $bottom: auto, $left: auto, $z-index: auto) {
+  position: $position !important;
+  top: $top !important;
+  right: $right !important;
+  bottom: $bottom !important;
+  left: $left !important;
+  z-index: $z-index !important;
+}
+
+// 边框隔离 mixin
+@mixin border-isolation($width: 0, $style: solid, $color: transparent, $radius: 0) {
+  border: $width $style $color !important;
+  border-radius: $radius !important;
+}
+
+// 阴影隔离 mixin
+@mixin shadow-isolation($shadow: none) {
+  box-shadow: $shadow !important;
+}
+
+// 背景隔离 mixin
+@mixin background-isolation($color: transparent, $image: none, $size: auto, $position: 0 0, $repeat: no-repeat) {
+  background-color: $color !important;
+  background-image: $image !important;
+  background-size: $size !important;
+  background-position: $position !important;
+  background-repeat: $repeat !important;
+}
+
+// 溢出隔离 mixin
+@mixin overflow-isolation($overflow: visible, $overflow-x: null, $overflow-y: null) {
+  overflow: $overflow !important;
+  
+  @if $overflow-x {
+    overflow-x: $overflow-x !important;
+  }
+  
+  @if $overflow-y {
+    overflow-y: $overflow-y !important;
+  }
+}
+
+// 变换隔离 mixin
+@mixin transform-isolation($transform: none, $origin: center, $style: flat) {
+  transform: $transform !important;
+  transform-origin: $origin !important;
+  transform-style: $style !important;
+}
+
+// 过渡隔离 mixin
+@mixin transition-isolation($property: all, $duration: 0.3s, $timing: ease, $delay: 0s) {
+  transition: $property $duration $timing $delay !important;
+}
+
+// 用户交互隔离 mixin
+@mixin interaction-isolation($cursor: auto, $user-select: auto, $pointer-events: auto) {
+  cursor: $cursor !important;
+  user-select: $user-select !important;
+  pointer-events: $pointer-events !important;
+}
+
+// 可见性隔离 mixin
+@mixin visibility-isolation($visibility: visible, $opacity: 1, $display: block) {
+  visibility: $visibility !important;
+  opacity: $opacity !important;
+  display: $display !important;
+}
+
+// 响应式隔离 mixin
+@mixin responsive-isolation($breakpoint, $property, $value) {
+  @if $breakpoint == 'sm' {
+    @media (max-width: 575.98px) {
+      #{$property}: #{$value} !important;
+    }
+  } @else if $breakpoint == 'md' {
+    @media (max-width: 767.98px) {
+      #{$property}: #{$value} !important;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media (max-width: 991.98px) {
+      #{$property}: #{$value} !important;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media (max-width: 1199.98px) {
+      #{$property}: #{$value} !important;
+    }
+  }
+}
+
+// 组件根元素隔离 mixin（推荐用法）
+@mixin component-root-isolation() {
+  // 创建一个新的层叠上下文
+  position: relative;
+  z-index: 0;
+  
+  // 重置字体继承
+  font-size: initial;
+  font-family: initial;
+  font-weight: initial;
+  line-height: initial;
+  color: initial;
+  
+  // 重置其他样式
+  text-align: initial;
+  text-decoration: initial;
+  text-transform: initial;
+  letter-spacing: initial;
+  word-spacing: initial;
+  
+  // 确保盒模型正确
+  box-sizing: border-box;
+  
+  // 重置边距和内边距
+  margin: 0;
+  padding: 0;
+  
+  // 重置边框
+  border: none;
+  outline: none;
+  
+  // 重置背景
+  background: transparent;
+  
+  // 确保子元素继承正确的样式
+  * {
+    box-sizing: inherit;
+  }
+}
+
+// 特定组件的隔离 mixin
+@mixin operate-component-isolation() {
+  @include component-root-isolation();
+  
+  .btn-item {
+    @include button-isolation(10px, 4px 16px);
+    @include font-isolation(10px, 600);
+    
+    margin-left: 12px;
+    border-radius: 4px;
+    
+    &.btn-copy {
+      background-color: var(--warning-color, #ffc107) !important;
+    }
+    
+    &.btn-delete {
+      background-color: var(--error-color, #dc3545) !important;
+    }
+    
+    &.btn-edit {
+      background-color: var(--primary-color, #007bff) !important;
+    }
+  }
+}

package/src/styles/smart-reset.scss

@@ -0,0 +1,287 @@
+/**
+ * 智能样式重置
+ * 提供合理的默认值，但不强制覆盖组件样式
+ */
+
+/* 基础重置 - 只重置必要的样式 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 移除默认边距和内边距 */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* HTML 和 body 基础设置 */
+html {
+  font-size: 16px; /* 设置根字体大小，用于 rem 计算 */
+  line-height: 1.15; /* 改善行高 */
+  -webkit-text-size-adjust: 100%; /* 防止 iOS 字体大小调整 */
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  /* 不设置 font-size，让组件自由控制 */
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 标题元素 - 设置合理的默认大小，但可以被覆盖 */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+/* 段落 */
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* 链接 */
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+/* 列表 */
+ol, ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+/* 表格 */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th, td {
+  padding: 0;
+  text-align: left;
+}
+
+/* 表单元素 */
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  /* 不设置 font-size，让组件自由控制 */
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/* 图片和媒体 */
+img {
+  border-style: none;
+  max-width: 100%;
+  height: auto;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+/* 代码 */
+code,
+kbd,
+pre,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+/* 其他元素 */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  margin: 1rem 0;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* 隐藏元素 */
+[hidden] {
+  display: none !important;
+}
+
+/* 可访问性 */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+/* 打印样式 */
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

package/src/styles/test.scss

@@ -1,5 +1,5 @@
 // 测试 Sass 功能和 @ 路径别名
-@import '@/styles/variables.scss';
+@import '@/styles/main.scss';
 
 .test-sass {
   // 测试 Sass 变量

package/src/types/button.ts

@@ -0,0 +1,10 @@
+export interface ButtonProps {
+  /** 按钮文字 */
+  text: string,
+  /** 按钮id */
+  id: string,
+  /** 按钮链接 */
+  url: string,
+  /** 是否是外部链接 */
+  isExternal: boolean,
+}