officialblock 1.0.7 → 1.0.9

package/src/index.ts

@@ -1,13 +1,28 @@
 import type { App, Plugin } from 'vue'
-import { ArticleList, HeroSlide, RichTextEditor, ThemePreview } from './components'
+import { 
+  ArticleList, 
+  BannerImage, 
+  BannerPage, 
+  BtnList, 
+  CustomSpace, 
+  GalleryList, 
+  HeroSlide, 
+  LinkList,
+  QuoteText
+ } from './components'
 
 // 全部引入插件
 const OfficialBlock = {
   install: (app: App) => {
     app.component('ArticleList', ArticleList)
+    app.component('BannerImage', BannerImage)
+    app.component('BannerPage', BannerPage)
+    app.component('BtnList', BtnList)
+    app.component('CustomSpace', CustomSpace)
+    app.component('GalleryList', GalleryList)
     app.component('HeroSlide', HeroSlide)
-    app.component('RichTextEditor', RichTextEditor)
-    app.component('ThemePreview', ThemePreview)
+    app.component('LinkList', LinkList)
+    app.component('QuoteText', QuoteText)
   },
 } satisfies Plugin
 
@@ -15,10 +30,30 @@ const OfficialBlock = {
 export default OfficialBlock
 
 // 按需引入 - 导出组件
-export { ArticleList, HeroSlide, RichTextEditor, ThemePreview }
+export { 
+  ArticleList, 
+  BannerImage, 
+  BannerPage, 
+  BtnList, 
+  CustomSpace, 
+  GalleryList, 
+  HeroSlide, 
+  LinkList,
+  QuoteText
+}
 
 // 按需引入 - 导出单个组件的插件
-export { ArticleListPlugin, HeroSlidePlugin } from './components'
+export { 
+  ArticleListPlugin, 
+  BannerImagePlugin, 
+  BannerPagePlugin, 
+  BtnListPlugin, 
+  CustomSpacePlugin, 
+  GalleryListPlugin, 
+  HeroSlidePlugin, 
+  LinkListPlugin, 
+  QuoteTextPlugin 
+} from './components'
 
 // 导出主题相关功能
 export { useTheme } from './composables/useTheme'
@@ -26,15 +61,24 @@ export { ThemeUtils, ResponsiveUtils, AnimationUtils, StorageUtils } from './uti
 
 // 导出类型定义
 export type {
-  ComponentProps,
-  ComponentEmits,
-  ComponentSlots,
+  ArticleListProps,
+  ArticleListEmits,
+  BannerImageProps,
+  BannerImageEmits,
+  BannerPageProps,
+  BannerPageEmits,
+  BtnListProps,
+  BtnListEmits,
+  CustomSpaceProps,
+  CustomSpaceEmits,
+  GalleryListProps,
+  GalleryListEmits,
   HeroSlideProps,
   HeroSlideEmits,
-  SlideItem,
-  IDomEditor,
-  IEditorConfig,
-  IToolbarConfig
+  LinkListProps,
+  LinkListEmits,
+  QuoteTextProps,
+  QuoteTextEmits,
 } from './components'
 
 export type { ThemeConfig } from './composables/useTheme'

package/src/main.ts

@@ -1,11 +1,14 @@
 import { createApp } from 'vue'
-import './style.css'
-import './styles/variables.scss'
+// 使用 CSS 层级管理系统来控制样式优先级
+import './styles/layers.scss'           // 1. CSS 层级管理（包含所有层级定义）
+import './style.css'                    // 2. 基础样式
+import './styles/main.scss'             // 3. 全局样式（会被放入 vendors 层）
+import '@arco-design/web-vue/dist/arco.css'  // 4. 第三方库样式（会被放入 vendors 层）
+import './styles/component-isolation.scss'   // 5. 组件隔离工具（会被放入 utilities 层）
 import App from './App.vue'
 import router from './router'
 import ArcoVue from '@arco-design/web-vue'
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
-import '@arco-design/web-vue/dist/arco.css'
 
 const app = createApp(App)
 app.use(router)

package/src/router/index.ts

@@ -74,6 +74,12 @@ const routes: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/style-isolation-test',
+    name: 'StyleIsolationTest',
+    component: () => import('../views/StyleIsolationTest.vue'),
+    meta: { title: '样式隔离测试' }
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',

package/src/style.css

@@ -75,3 +75,20 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+:root {
+  --primary-color: #d65a00;
+  --link-active-color: #ff8200;
+  --link-blue-color: #172386;
+  --link-light-color: rgba(255, 255, 255, 1);
+  --label-color: #d65a00;
+  --quote-line-color: #ff8200;
+  --quote-text-color: #172386;
+  --tab-color: #ff8200;
+  --tab-color--search: #ff8200;
+  --text-color--primary: #0032a0;
+  --header-height: 72px;
+  --header-height-calc: 72px;
+  --alert-height: 0px;
+  --vh: 8.57px;
+}

package/src/styles/component-isolation.scss

@@ -0,0 +1,257 @@
+/**
+ * 组件样式隔离
+ * 用于确保组件样式不被全局样式污染
+ */
+
+// 导入样式隔离 mixins
+// @import './mixins/style-isolation.scss';
+@use './mixins/style-isolation.scss' as *;
+
+// 创建一个组件隔离容器
+.component-isolation {
+  // 重置字体继承，让组件可以自由设置字体大小
+  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;
+  
+  // 确保子元素不继承全局样式
+  * {
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+}
+
+// 为特定组件提供样式隔离
+.operate-component-isolation {
+  @include operate-component-isolation();
+}
+
+// 通用的字体大小工具类（不会被全局样式覆盖）
+.fs-isolated {
+  &-8 { font-size: 8px !important; }
+  &-9 { font-size: 9px !important; }
+  &-10 { font-size: 10px !important; }
+  &-11 { font-size: 11px !important; }
+  &-12 { font-size: 12px !important; }
+  &-13 { font-size: 13px !important; }
+  &-14 { font-size: 14px !important; }
+  &-15 { font-size: 15px !important; }
+  &-16 { font-size: 16px !important; }
+  &-18 { font-size: 18px !important; }
+  &-20 { font-size: 20px !important; }
+  &-24 { font-size: 24px !important; }
+  &-28 { font-size: 28px !important; }
+  &-32 { font-size: 32px !important; }
+}
+
+// 字体权重工具类
+.fw-isolated {
+  &-100 { font-weight: 100 !important; }
+  &-200 { font-weight: 200 !important; }
+  &-300 { font-weight: 300 !important; }
+  &-400 { font-weight: 400 !important; }
+  &-500 { font-weight: 500 !important; }
+  &-600 { font-weight: 600 !important; }
+  &-700 { font-weight: 700 !important; }
+  &-800 { font-weight: 800 !important; }
+  &-900 { font-weight: 900 !important; }
+}
+
+// 行高工具类
+.lh-isolated {
+  &-1 { line-height: 1 !important; }
+  &-1-2 { line-height: 1.2 !important; }
+  &-1-4 { line-height: 1.4 !important; }
+  &-1-5 { line-height: 1.5 !important; }
+  &-1-6 { line-height: 1.6 !important; }
+  &-2 { line-height: 2 !important; }
+}
+
+// 颜色工具类（不会被全局样式覆盖）
+.text-isolated {
+  &-white { color: #ffffff !important; }
+  &-black { color: #000000 !important; }
+  &-gray-100 { color: #f8f9fa !important; }
+  &-gray-200 { color: #e9ecef !important; }
+  &-gray-300 { color: #dee2e6 !important; }
+  &-gray-400 { color: #ced4da !important; }
+  &-gray-500 { color: #adb5bd !important; }
+  &-gray-600 { color: #6c757d !important; }
+  &-gray-700 { color: #495057 !important; }
+  &-gray-800 { color: #343a40 !important; }
+  &-gray-900 { color: #212529 !important; }
+  &-primary { color: #007bff !important; }
+  &-secondary { color: #6c757d !important; }
+  &-success { color: #28a745 !important; }
+  &-danger { color: #dc3545 !important; }
+  &-warning { color: #ffc107 !important; }
+  &-info { color: #17a2b8 !important; }
+}
+
+// 背景色工具类
+.bg-isolated {
+  &-white { background-color: #ffffff !important; }
+  &-black { background-color: #000000 !important; }
+  &-transparent { background-color: transparent !important; }
+  &-primary { background-color: #007bff !important; }
+  &-secondary { background-color: #6c757d !important; }
+  &-success { background-color: #28a745 !important; }
+  &-danger { background-color: #dc3545 !important; }
+  &-warning { background-color: #ffc107 !important; }
+  &-info { background-color: #17a2b8 !important; }
+}
+
+// 边距工具类（不会被全局样式覆盖）
+.m-isolated {
+  &-0 { margin: 0 !important; }
+  &-1 { margin: 0.25rem !important; }
+  &-2 { margin: 0.5rem !important; }
+  &-3 { margin: 1rem !important; }
+  &-4 { margin: 1.5rem !important; }
+  &-5 { margin: 3rem !important; }
+}
+
+.p-isolated {
+  &-0 { padding: 0 !important; }
+  &-1 { padding: 0.25rem !important; }
+  &-2 { padding: 0.5rem !important; }
+  &-3 { padding: 1rem !important; }
+  &-4 { padding: 1.5rem !important; }
+  &-5 { padding: 3rem !important; }
+}
+
+// 显示工具类
+.d-isolated {
+  &-none { display: none !important; }
+  &-block { display: block !important; }
+  &-inline { display: inline !important; }
+  &-inline-block { display: inline-block !important; }
+  &-flex { display: flex !important; }
+  &-inline-flex { display: inline-flex !important; }
+  &-grid { display: grid !important; }
+}
+
+// Flex 工具类
+.flex-isolated {
+  &-row { flex-direction: row !important; }
+  &-column { flex-direction: column !important; }
+  &-wrap { flex-wrap: wrap !important; }
+  &-nowrap { flex-wrap: nowrap !important; }
+}
+
+.justify-isolated {
+  &-start { justify-content: flex-start !important; }
+  &-center { justify-content: center !important; }
+  &-end { justify-content: flex-end !important; }
+  &-between { justify-content: space-between !important; }
+  &-around { justify-content: space-around !important; }
+  &-evenly { justify-content: space-evenly !important; }
+}
+
+.align-isolated {
+  &-start { align-items: flex-start !important; }
+  &-center { align-items: center !important; }
+  &-end { align-items: flex-end !important; }
+  &-stretch { align-items: stretch !important; }
+  &-baseline { align-items: baseline !important; }
+}
+
+// 边框工具类
+.border-isolated {
+  &-0 { border: 0 !important; }
+  &-1 { border: 1px solid #dee2e6 !important; }
+  &-2 { border: 2px solid #dee2e6 !important; }
+  &-3 { border: 3px solid #dee2e6 !important; }
+}
+
+.rounded-isolated {
+  &-0 { border-radius: 0 !important; }
+  &-1 { border-radius: 0.25rem !important; }
+  &-2 { border-radius: 0.375rem !important; }
+  &-3 { border-radius: 0.5rem !important; }
+  &-circle { border-radius: 50% !important; }
+  &-pill { border-radius: 50rem !important; }
+}
+
+// 位置工具类
+.position-isolated {
+  &-static { position: static !important; }
+  &-relative { position: relative !important; }
+  &-absolute { position: absolute !important; }
+  &-fixed { position: fixed !important; }
+  &-sticky { position: sticky !important; }
+}
+
+// 宽度和高度工具类
+.w-isolated {
+  &-auto { width: auto !important; }
+  &-25 { width: 25% !important; }
+  &-50 { width: 50% !important; }
+  &-75 { width: 75% !important; }
+  &-100 { width: 100% !important; }
+}
+
+.h-isolated {
+  &-auto { height: auto !important; }
+  &-25 { height: 25% !important; }
+  &-50 { height: 50% !important; }
+  &-75 { height: 75% !important; }
+  &-100 { height: 100% !important; }
+}
+
+// 文本对齐工具类
+.text-align-isolated {
+  &-left { text-align: left !important; }
+  &-center { text-align: center !important; }
+  &-right { text-align: right !important; }
+  &-justify { text-align: justify !important; }
+}
+
+// 光标工具类
+.cursor-isolated {
+  &-auto { cursor: auto !important; }
+  &-default { cursor: default !important; }
+  &-pointer { cursor: pointer !important; }
+  &-wait { cursor: wait !important; }
+  &-text { cursor: text !important; }
+  &-move { cursor: move !important; }
+  &-not-allowed { cursor: not-allowed !important; }
+}
+
+// 用户选择工具类
+.user-select-isolated {
+  &-none { user-select: none !important; }
+  &-auto { user-select: auto !important; }
+  &-text { user-select: text !important; }
+  &-all { user-select: all !important; }
+}
+
+// 溢出工具类
+.overflow-isolated {
+  &-auto { overflow: auto !important; }
+  &-hidden { overflow: hidden !important; }
+  &-visible { overflow: visible !important; }
+  &-scroll { overflow: scroll !important; }
+}
+
+// Z-index 工具类
+.z-isolated {
+  &-0 { z-index: 0 !important; }
+  &-10 { z-index: 10 !important; }
+  &-20 { z-index: 20 !important; }
+  &-30 { z-index: 30 !important; }
+  &-40 { z-index: 40 !important; }
+  &-50 { z-index: 50 !important; }
+  &-auto { z-index: auto !important; }
+}

package/src/styles/editor.scss

@@ -1,4 +1,4 @@
-@use "variables.scss" as *;
+@use "main.scss" as *;
 
 .editor-content {
   margin-top: 16px;

package/src/styles/layers.scss

@@ -0,0 +1,256 @@
+/**
+ * CSS 层级管理
+ * 使用 @layer 规则来明确定义样式优先级
+ */
+
+/* 定义层级顺序（从低到高优先级） */
+@layer reset, base, vendors, components, utilities, overrides;
+
+/* 重置层 - 最低优先级 */
+@layer reset {
+  /* 基础重置样式 */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    font-size: 16px;
+    line-height: 1.15;
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    /* 不设置 font-size，让后续层级控制 */
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+  }
+}
+
+/* 基础层 - 基础样式 */
+@layer base {
+  /* 这里可以放置基础的样式设置 */
+  :root {
+    --font-size-xs: 12px;
+    --font-size-sm: 14px;
+    --font-size-base: 16px;
+    --font-size-lg: 18px;
+    --font-size-xl: 20px;
+    
+    --color-primary: #007bff;
+    --color-success: #28a745;
+    --color-warning: #ffc107;
+    --color-danger: #dc3545;
+    --color-info: #17a2b8;
+  }
+  
+  /* 默认字体大小设置 */
+  body {
+    font-size: var(--font-size-sm); /* 14px 作为默认值 */
+  }
+}
+
+/* 第三方库层 */
+@layer vendors {
+  /* 这里会放置第三方库的样式 */
+  /* Arco Design 等第三方库样式会在这一层 */
+}
+
+/* 组件层 - 组件样式 */
+@layer components {
+  /* 组件样式会在这一层，优先级高于基础层和第三方库层 */
+  
+  /* Operate 组件样式 */
+  .operate-component {
+    .operate-btn {
+      .btn-item {
+        font-size: 10px; /* 这里不需要 !important，因为层级优先级更高 */
+        color: #fff;
+        font-weight: 600;
+        padding: 4px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+      }
+      
+      .btn-copy {
+        background: var(--color-warning);
+      }
+      
+      .btn-delete {
+        background: var(--color-danger);
+      }
+      
+      .btn-edit {
+        background: var(--color-primary);
+      }
+    }
+  }
+}
+
+/* 工具类层 */
+@layer utilities {
+  /* 工具类样式，优先级很高 */
+  .fs-10 { font-size: 10px; }
+  .fs-12 { font-size: 12px; }
+  .fs-14 { font-size: 14px; }
+  .fs-16 { font-size: 16px; }
+  .fs-18 { font-size: 18px; }
+  .fs-20 { font-size: 20px; }
+  
+  .fw-300 { font-weight: 300; }
+  .fw-400 { font-weight: 400; }
+  .fw-500 { font-weight: 500; }
+  .fw-600 { font-weight: 600; }
+  .fw-700 { font-weight: 700; }
+  
+  .text-primary { color: var(--color-primary); }
+  .text-success { color: var(--color-success); }
+  .text-warning { color: var(--color-warning); }
+  .text-danger { color: var(--color-danger); }
+  .text-info { color: var(--color-info); }
+  
+  .bg-primary { background-color: var(--color-primary); }
+  .bg-success { background-color: var(--color-success); }
+  .bg-warning { background-color: var(--color-warning); }
+  .bg-danger { background-color: var(--color-danger); }
+  .bg-info { background-color: var(--color-info); }
+  
+  .d-none { display: none; }
+  .d-block { display: block; }
+  .d-flex { display: flex; }
+  .d-inline-flex { display: inline-flex; }
+  
+  .justify-start { justify-content: flex-start; }
+  .justify-center { justify-content: center; }
+  .justify-end { justify-content: flex-end; }
+  .justify-between { justify-content: space-between; }
+  
+  .align-start { align-items: flex-start; }
+  .align-center { align-items: center; }
+  .align-end { align-items: flex-end; }
+  
+  .m-0 { margin: 0; }
+  .m-1 { margin: 0.25rem; }
+  .m-2 { margin: 0.5rem; }
+  .m-3 { margin: 1rem; }
+  .m-4 { margin: 1.5rem; }
+  
+  .p-0 { padding: 0; }
+  .p-1 { padding: 0.25rem; }
+  .p-2 { padding: 0.5rem; }
+  .p-3 { padding: 1rem; }
+  .p-4 { padding: 1.5rem; }
+  
+  .border { border: 1px solid #dee2e6; }
+  .border-0 { border: 0; }
+  .rounded { border-radius: 0.375rem; }
+  .rounded-0 { border-radius: 0; }
+  
+  .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
+  .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+  .shadow-none { box-shadow: none; }
+}
+
+/* 覆盖层 - 最高优先级 */
+@layer overrides {
+  /* 这里放置需要强制覆盖的样式 */
+  /* 通常应该避免使用这一层，除非绝对必要 */
+  
+  /* 特殊情况下的样式覆盖 */
+  .force-font-10 {
+    font-size: 10px;
+  }
+  
+  .force-font-12 {
+    font-size: 12px;
+  }
+}
+
+/* 响应式工具类 */
+@media (max-width: 575.98px) {
+  @layer utilities {
+    .fs-sm-10 { font-size: 10px; }
+    .fs-sm-12 { font-size: 12px; }
+    .fs-sm-14 { font-size: 14px; }
+    
+    .d-sm-none { display: none; }
+    .d-sm-block { display: block; }
+    .d-sm-flex { display: flex; }
+  }
+}
+
+@media (max-width: 767.98px) {
+  @layer utilities {
+    .fs-md-10 { font-size: 10px; }
+    .fs-md-12 { font-size: 12px; }
+    .fs-md-14 { font-size: 14px; }
+    
+    .d-md-none { display: none; }
+    .d-md-block { display: block; }
+    .d-md-flex { display: flex; }
+  }
+}
+
+@media (max-width: 991.98px) {
+  @layer utilities {
+    .fs-lg-10 { font-size: 10px; }
+    .fs-lg-12 { font-size: 12px; }
+    .fs-lg-14 { font-size: 14px; }
+    
+    .d-lg-none { display: none; }
+    .d-lg-block { display: block; }
+    .d-lg-flex { display: flex; }
+  }
+}
+
+/* 打印样式 */
+@media print {
+  @layer utilities {
+    .print-hidden { display: none; }
+    .print-visible { display: block; }
+  }
+}
+
+/* 暗色主题支持 */
+@media (prefers-color-scheme: dark) {
+  @layer base {
+    :root {
+      --color-text: #ffffff;
+      --color-bg: #1a1a1a;
+      --color-border: #333333;
+    }
+    
+    body {
+      color: var(--color-text);
+      background-color: var(--color-bg);
+    }
+  }
+}
+
+/* 减少动画偏好支持 */
+@media (prefers-reduced-motion: reduce) {
+  @layer base {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}