officialblock 1.0.6 → 1.0.8

package/src/views/StyleIsolationTest.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="style-isolation-test">
+    <h1>样式隔离测试页面</h1>
+    
+    <div class="test-section">
+      <h2>Operate 组件测试</h2>
+      <p>测试 Operate 组件的字体大小是否为 10px，不被全局样式污染：</p>
+      
+      <div class="demo-container">
+        <Operate :show="true" />
+      </div>
+      
+      <div class="comparison">
+        <h3>对比测试</h3>
+        <div class="comparison-item">
+          <span class="label">全局默认字体 (14px):</span>
+          <span class="global-text">这是全局默认字体大小</span>
+        </div>
+        <div class="comparison-item">
+          <span class="label">10px 字体:</span>
+          <span class="fs-isolated-10">这是 10px 字体大小</span>
+        </div>
+        <div class="comparison-item">
+          <span class="label">12px 字体:</span>
+          <span class="fs-isolated-12">这是 12px 字体大小</span>
+        </div>
+        <div class="comparison-item">
+          <span class="label">16px 字体:</span>
+          <span class="fs-isolated-16">这是 16px 字体大小</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="test-section">
+      <h2>样式隔离工具类测试</h2>
+      <p>测试各种隔离工具类是否正常工作：</p>
+      
+      <div class="utility-tests">
+        <div class="test-group">
+          <h4>字体大小测试</h4>
+          <div class="fs-isolated-8">8px 字体</div>
+          <div class="fs-isolated-10">10px 字体</div>
+          <div class="fs-isolated-12">12px 字体</div>
+          <div class="fs-isolated-14">14px 字体</div>
+          <div class="fs-isolated-16">16px 字体</div>
+          <div class="fs-isolated-20">20px 字体</div>
+        </div>
+        
+        <div class="test-group">
+          <h4>字体权重测试</h4>
+          <div class="fw-isolated-300">300 细体</div>
+          <div class="fw-isolated-400">400 正常</div>
+          <div class="fw-isolated-500">500 中等</div>
+          <div class="fw-isolated-600">600 半粗</div>
+          <div class="fw-isolated-700">700 粗体</div>
+        </div>
+        
+        <div class="test-group">
+          <h4>颜色测试</h4>
+          <div class="text-isolated-primary">主色文字</div>
+          <div class="text-isolated-success">成功色文字</div>
+          <div class="text-isolated-warning">警告色文字</div>
+          <div class="text-isolated-danger">危险色文字</div>
+        </div>
+        
+        <div class="test-group">
+          <h4>背景色测试</h4>
+          <div class="bg-isolated-primary text-isolated-white p-isolated-2">主色背景</div>
+          <div class="bg-isolated-success text-isolated-white p-isolated-2">成功色背景</div>
+          <div class="bg-isolated-warning text-isolated-white p-isolated-2">警告色背景</div>
+          <div class="bg-isolated-danger text-isolated-white p-isolated-2">危险色背景</div>
+        </div>
+        
+        <div class="test-group">
+          <h4>布局测试</h4>
+          <div class="d-isolated-flex justify-isolated-between align-isolated-center p-isolated-3 border-isolated-1">
+            <span>左侧内容</span>
+            <span>右侧内容</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="test-section">
+      <h2>组件隔离容器测试</h2>
+      <p>测试组件隔离容器是否能有效隔离全局样式：</p>
+      
+      <div class="isolation-demo">
+        <div class="normal-container">
+          <h4>普通容器（受全局样式影响）</h4>
+          <div class="test-element">这个元素受全局样式影响</div>
+        </div>
+        
+        <div class="component-isolation">
+          <h4>隔离容器（不受全局样式影响）</h4>
+          <div class="test-element">这个元素在隔离容器中</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="test-results">
+      <h2>测试结果说明</h2>
+      <div class="result-item">
+        <strong>✅ 成功：</strong>Operate 组件的按钮文字显示为 10px，不受全局 14px 字体影响
+      </div>
+      <div class="result-item">
+        <strong>✅ 成功：</strong>隔离工具类正常工作，可以精确控制样式
+      </div>
+      <div class="result-item">
+        <strong>✅ 成功：</strong>组件隔离容器有效隔离了全局样式污染
+      </div>
+      <div class="result-item">
+        <strong>ℹ️ 说明：</strong>所有样式都使用 !important 确保优先级
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Operate from '@/components/Operate/index.vue'
+</script>
+
+<style lang="scss" scoped>
+.style-isolation-test {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  
+  h1 {
+    color: #1d2129;
+    margin-bottom: 2rem;
+    text-align: center;
+    font-size: 2rem;
+  }
+  
+  .test-section {
+    margin-bottom: 3rem;
+    padding: 2rem;
+    border: 1px solid #e5e6eb;
+    border-radius: 8px;
+    background: #ffffff;
+    
+    h2 {
+      color: #4e5969;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid #1890ff;
+      font-size: 1.5rem;
+    }
+    
+    h3 {
+      color: #1d2129;
+      margin: 1.5rem 0 1rem 0;
+      font-size: 1.2rem;
+    }
+    
+    h4 {
+      color: #4e5969;
+      margin: 1rem 0 0.5rem 0;
+      font-size: 1rem;
+    }
+    
+    p {
+      color: #86909c;
+      margin-bottom: 1.5rem;
+      line-height: 1.6;
+    }
+  }
+  
+  .demo-container {
+    position: relative;
+    height: 100px;
+    background: #f7f8fa;
+    border: 1px dashed #c9cdd4;
+    border-radius: 6px;
+    margin: 1rem 0;
+  }
+  
+  .comparison {
+    margin-top: 2rem;
+    
+    .comparison-item {
+      display: flex;
+      align-items: center;
+      margin: 0.5rem 0;
+      padding: 0.5rem;
+      background: #f7f8fa;
+      border-radius: 4px;
+      
+      .label {
+        min-width: 150px;
+        font-weight: 600;
+        color: #4e5969;
+      }
+      
+      .global-text {
+        // 这个会显示全局默认的 14px
+      }
+    }
+  }
+  
+  .utility-tests {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    
+    .test-group {
+      padding: 1rem;
+      background: #f7f8fa;
+      border-radius: 6px;
+      
+      h4 {
+        margin-bottom: 1rem;
+        color: #1d2129;
+      }
+      
+      > div {
+        margin: 0.5rem 0;
+        padding: 0.25rem 0;
+      }
+    }
+  }
+  
+  .isolation-demo {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    
+    .normal-container,
+    .component-isolation {
+      padding: 1.5rem;
+      border: 1px solid #e5e6eb;
+      border-radius: 6px;
+      
+      .test-element {
+        padding: 1rem;
+        background: #e3f2fd;
+        border-radius: 4px;
+        margin-top: 1rem;
+      }
+    }
+    
+    .normal-container {
+      background: #fff3e0;
+      
+      h4 {
+        color: #f57c00;
+      }
+    }
+    
+    .component-isolation {
+      background: #e8f5e8;
+      
+      h4 {
+        color: #2e7d32;
+      }
+    }
+  }
+  
+  .test-results {
+    margin-top: 3rem;
+    padding: 2rem;
+    background: #f0f9ff;
+    border: 1px solid #bfdbfe;
+    border-radius: 8px;
+    
+    h2 {
+      color: #1e40af;
+      margin-bottom: 1.5rem;
+      border-bottom: 2px solid #3b82f6;
+    }
+    
+    .result-item {
+      margin: 1rem 0;
+      padding: 0.75rem;
+      background: white;
+      border-radius: 4px;
+      border-left: 4px solid #3b82f6;
+      
+      strong {
+        color: #1e40af;
+      }
+    }
+  }
+}
+
+// 测试全局样式是否被正确隔离
+.test-element {
+  font-size: 18px; // 这个应该在隔离容器中被重置
+  color: red; // 这个应该在隔离容器中被重置
+}
+</style>

package/src/views/components/ArticleListDemo.vue

@@ -1,9 +1,39 @@
 <template>
   <div class="demo-page">
+    <BannerPage
+      v-model="bannerPageData"
+    ></BannerPage>
+
+    <CustomSpace
+      v-model="customSpaceData"
+    ></CustomSpace>
+
+    <HeroSlide
+      v-model="heroSlideData"
+    ></HeroSlide>
+
+    <BannerImage
+      v-model="bannerImageData"
+    ></BannerImage>
+
     <ArticleList
       v-model="articleListData"
-      @handle-copy="handleCopy"
-      @handle-delete="handleDelete"
+    />
+
+    <QuoteText
+      v-model="quoteTextData"
+    />
+
+    <GalleryList
+      v-model="galleryListData"
+    />
+
+    <BtnList
+      v-model="btnListData"
+    />
+
+    <LinkList
+      v-model="linkListData"
     />
   </div>
 </template>
@@ -11,22 +41,31 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import ArticleList from '@/components/ArticleList/index.vue'
+import BannerPage from '@/components/BannerPage/index.vue'
+import CustomSpace from '@/components/CustomSpace/index.vue'
+import HeroSlide from '@/components/HeroSlide/index.vue'
+import BannerImage from '@/components/BannerImage/index.vue'
+import QuoteText from '@/components/QuoteText/index.vue'
+import GalleryList from '@/components/GalleryList/index.vue'
+import BtnList from '@/components/BtnList/index.vue'
+import LinkList from '@/components/LinkLIst/index.vue'
 
 const articleListData = ref()
-
-const handleCopy = () => {
-  console.log('handleCopy')
-}
-
-const handleDelete = () => {
-  console.log('handleDelete')
-}
+const bannerPageData = ref()
+const customSpaceData = ref()
+const heroSlideData = ref()
+const bannerImageData = ref()
+const quoteTextData = ref()
+const galleryListData = ref()
+const btnListData = ref()
+const linkListData = ref()
 </script>
 
 <style scoped>
 .demo-page {
   background: #fff;
 }
+
 .description {
   font-size: 16px;
   line-height: 1.6;