officialblock 1.0.1 → 1.0.2

package/src/utils/theme.ts

@@ -0,0 +1,335 @@
+/**
+ * 主题工具函数
+ * 提供便捷的主题相关工具方法
+ */
+
+// 颜色工具函数
+export class ThemeUtils {
+  /**
+   * 将十六进制颜色转换为RGB
+   */
+  static hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null
+  }
+
+  /**
+   * 将RGB颜色转换为十六进制
+   */
+  static rgbToHex(r: number, g: number, b: number): string {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+  }
+
+  /**
+   * 调整颜色亮度
+   */
+  static adjustBrightness(hex: string, percent: number): string {
+    const rgb = this.hexToRgb(hex)
+    if (!rgb) return hex
+
+    const adjust = (color: number) => {
+      const adjusted = Math.round(color * (1 + percent / 100))
+      return Math.max(0, Math.min(255, adjusted))
+    }
+
+    return this.rgbToHex(
+      adjust(rgb.r),
+      adjust(rgb.g),
+      adjust(rgb.b)
+    )
+  }
+
+  /**
+   * 生成颜色色阶
+   */
+  static generateColorScale(baseColor: string): Record<string, string> {
+    const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    const result: Record<string, string> = {}
+
+    scales.forEach((scale, index) => {
+      let brightness: number
+      if (scale <= 500) {
+        // 浅色：从 +80% 到 0%
+        brightness = 80 - (index * 16)
+      } else {
+        // 深色：从 -20% 到 -80%
+        brightness = -20 - ((index - 5) * 12)
+      }
+      
+      result[scale.toString()] = this.adjustBrightness(baseColor, brightness)
+    })
+
+    return result
+  }
+
+  /**
+   * 检查颜色对比度是否符合可访问性标准
+   */
+  static getContrastRatio(color1: string, color2: string): number {
+    const getLuminance = (hex: string): number => {
+      const rgb = this.hexToRgb(hex)
+      if (!rgb) return 0
+
+      const normalize = (color: number) => {
+        const c = color / 255
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+      }
+
+      return 0.2126 * normalize(rgb.r) + 0.7152 * normalize(rgb.g) + 0.0722 * normalize(rgb.b)
+    }
+
+    const lum1 = getLuminance(color1)
+    const lum2 = getLuminance(color2)
+    const brightest = Math.max(lum1, lum2)
+    const darkest = Math.min(lum1, lum2)
+
+    return (brightest + 0.05) / (darkest + 0.05)
+  }
+
+  /**
+   * 判断颜色是否为深色
+   */
+  static isDarkColor(hex: string): boolean {
+    const rgb = this.hexToRgb(hex)
+    if (!rgb) return false
+
+    // 使用相对亮度公式
+    const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
+    return brightness < 128
+  }
+
+  /**
+   * 获取颜色的最佳文本颜色（黑色或白色）
+   */
+  static getBestTextColor(backgroundColor: string): string {
+    return this.isDarkColor(backgroundColor) ? '#ffffff' : '#000000'
+  }
+
+  /**
+   * 混合两种颜色
+   */
+  static mixColors(color1: string, color2: string, ratio: number = 0.5): string {
+    const rgb1 = this.hexToRgb(color1)
+    const rgb2 = this.hexToRgb(color2)
+    
+    if (!rgb1 || !rgb2) return color1
+
+    const mix = (c1: number, c2: number) => Math.round(c1 * (1 - ratio) + c2 * ratio)
+
+    return this.rgbToHex(
+      mix(rgb1.r, rgb2.r),
+      mix(rgb1.g, rgb2.g),
+      mix(rgb1.b, rgb2.b)
+    )
+  }
+}
+
+// 响应式工具函数
+export class ResponsiveUtils {
+  /**
+   * 获取当前屏幕断点
+   */
+  static getCurrentBreakpoint(): string {
+    const width = window.innerWidth
+    
+    if (width < 475) return 'xs'
+    if (width < 640) return 'sm'
+    if (width < 768) return 'md'
+    if (width < 1024) return 'lg'
+    if (width < 1280) return 'xl'
+    return '2xl'
+  }
+
+  /**
+   * 检查是否为移动设备
+   */
+  static isMobile(): boolean {
+    return window.innerWidth < 768
+  }
+
+  /**
+   * 检查是否为平板设备
+   */
+  static isTablet(): boolean {
+    const width = window.innerWidth
+    return width >= 768 && width < 1024
+  }
+
+  /**
+   * 检查是否为桌面设备
+   */
+  static isDesktop(): boolean {
+    return window.innerWidth >= 1024
+  }
+
+  /**
+   * 监听屏幕尺寸变化
+   */
+  static onBreakpointChange(callback: (breakpoint: string) => void): () => void {
+    let currentBreakpoint = this.getCurrentBreakpoint()
+
+    const handleResize = () => {
+      const newBreakpoint = this.getCurrentBreakpoint()
+      if (newBreakpoint !== currentBreakpoint) {
+        currentBreakpoint = newBreakpoint
+        callback(newBreakpoint)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    
+    // 返回清理函数
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }
+}
+
+// 动画工具函数
+export class AnimationUtils {
+  /**
+   * 缓动函数
+   */
+  static easing = {
+    linear: (t: number) => t,
+    easeInQuad: (t: number) => t * t,
+    easeOutQuad: (t: number) => t * (2 - t),
+    easeInOutQuad: (t: number) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+    easeInCubic: (t: number) => t * t * t,
+    easeOutCubic: (t: number) => (--t) * t * t + 1,
+    easeInOutCubic: (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+  }
+
+  /**
+   * 数值动画
+   */
+  static animate(
+    from: number,
+    to: number,
+    duration: number,
+    callback: (value: number) => void,
+    easing: (t: number) => number = this.easing.easeOutQuad
+  ): () => void {
+    const startTime = performance.now()
+    let animationId: number
+
+    const step = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const easedProgress = easing(progress)
+      const currentValue = from + (to - from) * easedProgress
+
+      callback(currentValue)
+
+      if (progress < 1) {
+        animationId = requestAnimationFrame(step)
+      }
+    }
+
+    animationId = requestAnimationFrame(step)
+
+    // 返回取消函数
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId)
+      }
+    }
+  }
+
+  /**
+   * 滚动到指定位置
+   */
+  static scrollTo(
+    element: HTMLElement | Window,
+    to: number,
+    duration: number = 300,
+    easing: (t: number) => number = this.easing.easeOutQuad
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      const isWindow = element === window
+      const from = isWindow ? window.pageYOffset : (element as HTMLElement).scrollTop
+
+      this.animate(from, to, duration, (value) => {
+        if (isWindow) {
+          window.scrollTo(0, value)
+        } else {
+          (element as HTMLElement).scrollTop = value
+        }
+      }, easing)
+
+      setTimeout(resolve, duration)
+    })
+  }
+}
+
+// 存储工具函数
+export class StorageUtils {
+  /**
+   * 安全的 localStorage 操作
+   */
+  static setItem(key: string, value: any): boolean {
+    try {
+      localStorage.setItem(key, JSON.stringify(value))
+      return true
+    } catch (error) {
+      console.warn('Failed to save to localStorage:', error)
+      return false
+    }
+  }
+
+  static getItem<T>(key: string, defaultValue?: T): T | null {
+    try {
+      const item = localStorage.getItem(key)
+      return item ? JSON.parse(item) : defaultValue || null
+    } catch (error) {
+      console.warn('Failed to read from localStorage:', error)
+      return defaultValue || null
+    }
+  }
+
+  static removeItem(key: string): boolean {
+    try {
+      localStorage.removeItem(key)
+      return true
+    } catch (error) {
+      console.warn('Failed to remove from localStorage:', error)
+      return false
+    }
+  }
+
+  /**
+   * 清理过期的存储项
+   */
+  static cleanExpired(): void {
+    const now = Date.now()
+    const keysToRemove: string[] = []
+
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && key.startsWith('officialblock-')) {
+        try {
+          const item = JSON.parse(localStorage.getItem(key) || '{}')
+          if (item.expires && item.expires < now) {
+            keysToRemove.push(key)
+          }
+        } catch (error) {
+          // 忽略解析错误
+        }
+      }
+    }
+
+    keysToRemove.forEach(key => localStorage.removeItem(key))
+  }
+}
+
+// 导出所有工具类
+export default {
+  ThemeUtils,
+  ResponsiveUtils,
+  AnimationUtils,
+  StorageUtils
+}

package/src/views/Layout.vue

@@ -0,0 +1,247 @@
+<template>
+  <a-layout class="layout">
+    <!-- 顶部导航栏 -->
+    <a-layout-header class="header">
+      <div class="header-content">
+        <div class="logo">
+          <h1>OfficialBlock</h1>
+          <a-tag color="blue" size="small">v{{ version }}</a-tag>
+        </div>
+        <nav class="nav">
+          <router-link to="/guide/introduction" class="nav-link">指南</router-link>
+          <router-link to="/components/article-list" class="nav-link">组件</router-link>
+          <a-button
+            type="text"
+            class="mobile-menu-btn"
+            @click="toggleMobileMenu"
+            :icon="isMobileMenuOpen ? 'icon-close' : 'icon-menu'"
+          >
+            <template #icon>
+              <icon-menu v-if="!isMobileMenuOpen" />
+              <icon-close v-if="isMobileMenuOpen" />
+            </template>
+          </a-button>
+        </nav>
+      </div>
+    </a-layout-header>
+
+    <a-layout class="main-container">
+      <!-- 移动端遮罩层 -->
+      <div
+        v-if="isMobileMenuOpen"
+        class="mobile-overlay"
+        @click="toggleMobileMenu"
+      ></div>
+
+      <!-- 左侧菜单栏 -->
+      <a-layout-sider
+        class="sidebar"
+        :class="{ 'mobile-open': isMobileMenuOpen }"
+        :width="280"
+        :collapsed="false"
+        :collapsible="false"
+      >
+        <a-menu
+          :selected-keys="selectedKeys"
+          :default-open-keys="['guide', 'components']"
+          :style="{ height: '100%', borderRight: 0 }"
+          @menu-item-click="handleMenuClick"
+        >
+          <a-sub-menu key="guide" title="开发指南">
+            <template #icon>
+              <icon-book />
+            </template>
+            <a-menu-item key="/guide/introduction">介绍</a-menu-item>
+            <a-menu-item key="/guide/installation">安装</a-menu-item>
+            <a-menu-item key="/guide/quickstart">快速开始</a-menu-item>
+          </a-sub-menu>
+
+          <a-sub-menu key="components" title="组件">
+            <template #icon>
+              <icon-apps />
+            </template>
+            <a-menu-item key="/components/article-list">ArticleList 文章列表</a-menu-item>
+            <a-menu-item key="/components/hero-slide">HeroSlide 轮播图</a-menu-item>
+            <a-menu-item key="/components/rich-text-editor">RichTextEditor 富文本编辑器</a-menu-item>
+            <a-menu-item key="/components/theme">Theme 主题系统</a-menu-item>
+          </a-sub-menu>
+        </a-menu>
+      </a-layout-sider>
+
+      <!-- 主内容区域 -->
+      <a-layout-content class="content">
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  IconMenu,
+  IconClose,
+  IconBook,
+  IconApps
+} from '@arco-design/web-vue/es/icon'
+
+const route = useRoute()
+const router = useRouter()
+
+const version = ref('1.0.1')
+const isMobileMenuOpen = ref(false)
+const selectedKeys = ref([route.path])
+
+// 监听路由变化，更新选中的菜单项
+watch(() => route.path, (newPath) => {
+  selectedKeys.value = [newPath]
+}, { immediate: true })
+
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
+}
+
+const handleMenuClick = (key: string) => {
+  router.push(key)
+  // 在移动端点击菜单项后关闭菜单
+  if (window.innerWidth <= 768) {
+    isMobileMenuOpen.value = false
+  }
+}
+</script>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+}
+
+.header {
+  background: #fff;
+  border-bottom: 1px solid var(--color-border-2);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 60px;
+  padding: 0;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: rgb(var(--primary-6));
+}
+
+.nav {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+}
+
+.nav-link {
+  color: var(--color-text-2);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.nav-link:hover,
+.nav-link.router-link-active {
+  color: rgb(var(--primary-6));
+}
+
+.mobile-menu-btn {
+  display: none;
+}
+
+.main-container {
+  padding-top: 60px;
+  min-height: calc(100vh - 60px);
+}
+
+.sidebar {
+  background: #fff;
+  border-right: 1px solid var(--color-border-2);
+  position: fixed;
+  left: 0;
+  top: 60px;
+  bottom: 0;
+  overflow-y: auto;
+  z-index: 999;
+}
+
+.content {
+  margin-left: 280px;
+  padding: 32px;
+  background: var(--color-bg-1);
+  min-height: calc(100vh - 60px);
+}
+
+.mobile-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: inline-flex;
+  }
+
+  .nav-link {
+    display: none;
+  }
+
+  .mobile-overlay {
+    display: block;
+  }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s;
+    z-index: 1001;
+  }
+
+  .sidebar.mobile-open {
+    transform: translateX(0);
+  }
+
+  .content {
+    margin-left: 0;
+    padding: 16px;
+  }
+
+  .header-content {
+    padding: 0 16px;
+  }
+
+  .nav {
+    gap: 16px;
+  }
+}
+</style>

package/src/views/NotFound.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="not-found">
+    <div class="content">
+      <h1>404</h1>
+      <h2>页面未找到</h2>
+      <p>抱歉，您访问的页面不存在。</p>
+      <div class="actions">
+        <router-link to="/guide/introduction" class="btn btn-primary">
+          返回首页
+        </router-link>
+        <router-link to="/components/article-list" class="btn btn-secondary">
+          查看组件
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 404 页面
+</script>
+
+<style scoped>
+.not-found {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+}
+
+.content h1 {
+  font-size: 120px;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+.content h2 {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 16px 0;
+}
+
+.content p {
+  font-size: 18px;
+  margin: 24px 0 32px 0;
+  opacity: 0.9;
+}
+
+.actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s;
+  display: inline-block;
+}
+
+.btn-primary {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-primary:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+  .content h1 {
+    font-size: 80px;
+  }
+  
+  .content h2 {
+    font-size: 24px;
+  }
+  
+  .content p {
+    font-size: 16px;
+  }
+  
+  .actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 200px;
+  }
+}
+</style>