@coffic/cosy-ui 0.8.22 → 0.8.24

package/dist/src-astro/install-tabs/InstallTabs.astro

@@ -0,0 +1,174 @@
+---
+/**
+ * @component InstallTabs
+ *
+ * @description
+ * 展示多个包管理器（npm、pnpm、yarn等）的安装命令，支持标签切换和一键复制。
+ * 只需传入包名即可自动生成各包管理器的安装命令。
+ *
+ * @props
+ * @param packageName 要安装的包名
+ * @param managers 支持的包管理器，默认['npm','pnpm','yarn']
+ * @param dev 是否为开发依赖，影响命令参数（如-D/--save-dev）
+ *
+ * @usage
+ * ```astro
+ * <InstallTabs packageName="react" />
+ * <InstallTabs packageName="vite" dev />
+ * <InstallTabs packageName="eslint" managers={["npm","yarn"]} />
+ * ```
+ */
+import '../../style.ts';
+import ButtonCopyInstall from './ButtonCopyInstall.astro';
+import { CodePanel } from '../code-panel';
+
+interface Props {
+  /** 要安装的包名 */
+  packageName: string;
+  /** 支持的包管理器，默认['npm','pnpm','yarn'] */
+  managers?: string[];
+  /** 是否为开发依赖 */
+  dev?: boolean;
+}
+
+const {
+  packageName,
+  managers = ['npm', 'pnpm', 'yarn'],
+  dev = false,
+} = Astro.props;
+
+const managerLabels: Record<string, string> = {
+  npm: 'npm',
+  pnpm: 'pnpm',
+  yarn: 'yarn',
+};
+
+function getCommand(manager: string, pkg: string, dev: boolean) {
+  switch (manager) {
+    case 'npm':
+      return `npm install${dev ? ' -D' : ''} ${pkg}`;
+    case 'pnpm':
+      return `pnpm add${dev ? ' -D' : ''} ${pkg}`;
+    case 'yarn':
+      return `yarn add${dev ? ' -D' : ''} ${pkg}`;
+    default:
+      return '';
+  }
+}
+
+const commands = managers.map((m) => getCommand(m, packageName, dev));
+---
+
+<div
+  class="cosy:mb-8 cosy:card cosy:p-0 cosy:overflow-hidden"
+  data-role="install-tabs">
+  <div
+    class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+    <div class="cosy:flex cosy:items-center cosy:gap-4">
+      <div role="tablist" class="cosy:tabs cosy:tabs-box">
+        {
+          managers.map((manager, idx) => (
+            <button
+              role="tab"
+              class={`cosy:tab${idx === 0 ? ' cosy:tab-active' : ''}`}
+              data-tab={`tab-${idx + 1}`}
+              aria-selected={idx === 0 ? 'true' : 'false'}>
+              {managerLabels[manager] ?? manager}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+    <div class="cosy:flex cosy:items-center cosy:gap-2">
+      {
+        commands.map((cmd, idx) => (
+          <div
+            class={`cosy:install-copy-container ${idx === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+            data-copy-container={`tab-${idx + 1}`}>
+            <ButtonCopyInstall code={cmd} />
+          </div>
+        ))
+      }
+    </div>
+  </div>
+  {
+    commands.map((cmd, idx) => (
+      <div
+        class={`cosy:install-panel ${idx === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+        data-panel={`tab-${idx + 1}`}>
+        <CodePanel code={cmd} language="bash" theme="dark-plus" />
+      </div>
+    ))
+  }
+</div>
+
+<script>
+  function initializeInstallTabs() {
+    console.log('InstallTabs: 初始化安装标签组件');
+
+    // 为所有InstallTabs容器添加事件委托
+    document
+      .querySelectorAll('[data-role="install-tabs"]')
+      .forEach((container) => {
+        // 防止重复绑定
+        if (container.hasAttribute('data-initialized')) return;
+        container.setAttribute('data-initialized', 'true');
+
+        // 使用事件委托处理标签点击
+        container.addEventListener('click', (event) => {
+          const target = event.target as HTMLElement;
+          const tab = target.closest('[role="tab"][data-tab^="tab-"]');
+
+          if (!tab) return;
+
+          console.log('InstallTabs: 切换标签', tab.getAttribute('data-tab'));
+
+          const targetTab = tab.getAttribute('data-tab');
+          if (!targetTab) return;
+
+          // 更新标签状态
+          container
+            .querySelectorAll('[role="tab"][data-tab^="tab-"]')
+            .forEach((t) => {
+              t.classList.remove('cosy:tab-active');
+              t.setAttribute('aria-selected', 'false');
+            });
+          tab.classList.add('cosy:tab-active');
+          tab.setAttribute('aria-selected', 'true');
+
+          // 切换面板显示
+          container
+            .querySelectorAll('.cosy\\:install-panel')
+            .forEach((panel) => {
+              if (panel.getAttribute('data-panel') === targetTab) {
+                panel.classList.remove('cosy:hidden');
+                panel.classList.add('cosy:block');
+              } else {
+                panel.classList.add('cosy:hidden');
+                panel.classList.remove('cosy:block');
+              }
+            });
+
+          // 切换复制按钮显示
+          container
+            .querySelectorAll('.cosy\\:install-copy-container')
+            .forEach((copyContainer) => {
+              if (
+                copyContainer.getAttribute('data-copy-container') === targetTab
+              ) {
+                copyContainer.classList.remove('cosy:hidden');
+                copyContainer.classList.add('cosy:block');
+              } else {
+                copyContainer.classList.add('cosy:hidden');
+                copyContainer.classList.remove('cosy:block');
+              }
+            });
+        });
+      });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    console.log('InstallTabs: 页面加载完成，初始化安装标签组件');
+    initializeInstallTabs();
+  });
+</script>

package/dist/src-astro/install-tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as InstallTabs } from './InstallTabs.astro';
+export type { InstallTabsProps } from './types'; 

package/dist/src-astro/install-tabs/types.ts

@@ -0,0 +1,8 @@
+export interface InstallTabsProps {
+    /** 要安装的包名 */
+    packageName: string;
+    /** 支持的包管理器，默认['npm','pnpm','yarn'] */
+    managers?: string[];
+    /** 是否为开发依赖 */
+    dev?: boolean;
+} 

package/dist/src-astro/layout-app/AppLayout.astro

@@ -195,16 +195,7 @@ const {
 }: Props = Astro.props;
 ---
 
-<BaseLayout
-  title={metaConfig.title}
-  description={metaConfig.description}
-  keywords={metaConfig.keywords}
-  author={metaConfig.author}
-  robots={metaConfig.robots}
-  head={metaConfig.head}
-  favicon={metaConfig.favicon}
-  debug={debug}
-  {...rest}>
+<BaseLayout {...metaConfig} debug={debug}>
   <ClientRouter />
   {
     showHeader && (

package/dist/src-astro/layout-basic/BaseLayout.astro

@@ -52,9 +52,7 @@
 import '../../style.ts';
 import { type IMetaProps } from '../../index-astro';
 
-export interface Props extends IMetaProps {
-  debug?: boolean;
-}
+export interface Props extends IMetaProps {}
 
 const {
   title,
@@ -68,10 +66,28 @@ const {
   class: className,
   favicon,
   'class:list': classList,
+  background = 'default',
 } = Astro.props;
 
+// 处理背景色 class
+const bgClassMap: Record<string, string> = {
+  default: 'cosy:bg-base-100',
+  white: 'cosy:bg-white',
+  gray: 'cosy:bg-gray-100',
+  dark: 'cosy:bg-gray-900',
+  'gradient-blue': 'cosy:bg-gradient-to-br cosy:from-blue-400 cosy:to-blue-600',
+  'gradient-pink': 'cosy:bg-gradient-to-br cosy:from-pink-400 cosy:to-pink-600',
+  'gradient-green':
+    'cosy:bg-gradient-to-br cosy:from-green-400 cosy:to-green-600',
+};
+
 // 处理类名
-let bodyClasses = debug ? 'cosy:border cosy:border-red-500' : className || '';
+let bodyClasses = [
+  debug ? 'cosy:border cosy:border-red-500' : className || '',
+  bgClassMap[background] || '',
+]
+  .filter(Boolean)
+  .join(' ');
 ---
 
 <!doctype html>

package/dist/src-astro/list/ListItem.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * @component ListItem
+ * @description 支持加载中进度条的列表项组件。点击后可显示从左到右的进度条，适合异步操作场景。
+ * @usage
+ * <ListItem loading={loading} duration={1500} on:click={...}>内容</ListItem>
+ * @props loading?: boolean 是否加载中
+ * @props duration?: number 进度条动画时长（毫秒），默认1500
+ * @slots default 默认插槽，列表项内容
+ */
+import '../../style.ts';
+const { loading = false, duration = 1500 } = Astro.props;
+---
+
+<li
+  class="cosy:mb-2 cosy:rounded-md cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:bg-base-300 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+  {...Astro.props}>
+  {
+    loading && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+<style scoped>
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

package/dist/src-astro/list/index.ts

@@ -0,0 +1 @@
+export { default as ListItem } from './ListItem.astro'; 

package/dist/src-astro/types/meta.ts

@@ -1,55 +1,67 @@
 export interface IMetaProps {
-  title: string;
-  description: string;
-  keywords: string;
-  author: string;
-  robots: string;
-
-  /**
-   * 图标
-   */
-  favicon?: ImageMetadata;
-
-  /**
-   * 基础路径，用于处理网站部署在二级目录的情况
-   * @default ""
-   */
-  basePath?: string;
-
-  /**
-   * 站点名称
-   */
-  siteName?: string;
-
-  /**
-   * 页面语言
-   * @default "zh-CN"
-   */
-  lang?: string;
-
-  /**
-   * 是否包含视口元标签
-   * @default true
-   */
-  viewport?: boolean;
-
-  /**
-   * 自定义CSS
-   */
-  customStyles?: string;
-
-  /**
-   * 自定义头部内容
-   */
-  head?: astroHTML.JSX.Element;
-
-  /**
-   * 页面类名
-   */
-  class?: string;
-
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+    title: string;
+    description: string;
+    keywords: string;
+    author: string;
+    robots: string;
+
+    /**
+     * 图标
+     */
+    favicon?: ImageMetadata;
+
+    /**
+     * 基础路径，用于处理网站部署在二级目录的情况
+     * @default ""
+     */
+    basePath?: string;
+
+    /**
+     * 站点名称
+     */
+    siteName?: string;
+
+    /**
+     * 页面语言
+     * @default "zh-CN"
+     */
+    lang?: string;
+
+    /**
+     * 是否包含视口元标签
+     * @default true
+     */
+    viewport?: boolean;
+
+    /**
+     * 自定义CSS
+     */
+    customStyles?: string;
+
+    /**
+     * 自定义头部内容
+     */
+    head?: astroHTML.JSX.Element;
+
+    /**
+     * 页面类名
+     */
+    class?: string;
+
+    /**
+     * 类名列表
+     */
+    'class:list'?: any;
+
+    /**
+     * 调试模式，显示边框
+     * @default false
+     */
+    debug?: boolean;
+
+    /**
+     * 预设背景色，可选值：'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green'
+     * @default 'default'
+     */
+    background?: 'default' | 'white' | 'gray' | 'dark' | 'gradient-blue' | 'gradient-pink' | 'gradient-green';
 }

package/dist/src-vue/list/ListItem.vue

@@ -1,5 +1,50 @@
 <template>
-  <li class="mb-2 rounded-md p-2 flex items-center gap-3 hover:bg-accent">
-    <slot />
+  <li
+    class="cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden"
+    @click="$emit('click')"
+  >
+    <div
+      v-if="loading"
+      class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+      :style="{ animationDuration: duration + 'ms' }"
+    ></div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
   </li>
 </template>
+
+<script setup lang="ts">
+import { defineProps, withDefaults, defineEmits } from 'vue';
+
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number; // 进度条动画时长，毫秒
+  }>(),
+  {
+    loading: false,
+    duration: 1500,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+.loading-bar {
+  width: 0%;
+  height: 100%;
+  animation: loading-bar-anim linear forwards;
+}
+@keyframes loading-bar-anim {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -63,7 +63,8 @@
     "@remixicon/vue": "^4.6.0",
     "astro-integration-kit": "^0.18.0",
     "fs-extra": "^11.3.0",
-    "html-to-image": "^1.11.13"
+    "html-to-image": "^1.11.13",
+    "shiki": "^3.7.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",