@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/blueking/status-tag/i18n-demo.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="status-tag-demo">
+    <h3>国际化支持</h3>
+    <div class="demo-controls">
+      <button
+        :class="{ active: currentLang === 'zh-CN' }"
+        @click="setLanguage('zh-CN')"
+      >
+        中文
+      </button>
+      <button
+        :class="{ active: currentLang === 'en-US' }"
+        @click="setLanguage('en-US')"
+      >
+        English
+      </button>
+    </div>
+
+    <div class="demo-row">
+      <div class="status-item">
+        <span class="label">加载中/Loading：</span>
+        <status-tag
+          status="loading"
+          :locale="currentLang"
+        ></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">运行中/Running：</span>
+        <status-tag
+          status="running"
+          :locale="currentLang"
+        ></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">已停止/Stopped：</span>
+        <status-tag
+          status="stop"
+          :locale="currentLang"
+        ></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">警告/Warning：</span>
+        <status-tag
+          status="warning"
+          :locale="currentLang"
+        ></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">未知/Unknown：</span>
+        <status-tag
+          status="unknown"
+          :locale="currentLang"
+        ></status-tag>
+      </div>
+    </div>
+
+    <p class="hint">
+      提示：组件会自动检测 Cookie 中的 blueking_language 设置，也可以手动指定 locale 属性
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+
+  const currentLang = ref('zh-CN');
+
+  const setLanguage = (lang: string) => {
+    currentLang.value = lang;
+  };
+
+  onMounted(() => {
+    // 确保 Web Component 已注册
+    if (!customElements.get('status-tag')) {
+      import('@blueking/status-tag');
+    }
+  });
+</script>
+
+<style scoped>
+  .status-tag-demo {
+    padding: 20px;
+  }
+
+  .demo-controls {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+
+  .demo-controls button {
+    padding: 6px 16px;
+    font-size: 12px;
+    color: #63656e;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #c4c6cc;
+    border-radius: 2px;
+  }
+
+  .demo-controls button:hover {
+    color: #3a84ff;
+    border-color: #3a84ff;
+  }
+
+  .demo-controls button.active {
+    color: #fff;
+    background: #3a84ff;
+    border-color: #3a84ff;
+  }
+
+  .demo-row {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+    margin-bottom: 24px;
+  }
+
+  .status-item {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .label {
+    min-width: 140px;
+    font-size: 12px;
+    color: #63656e;
+  }
+
+  .hint {
+    padding: 12px;
+    margin-top: 16px;
+    font-size: 12px;
+    line-height: 1.6;
+    color: #63656e;
+    background: #f5f7fa;
+    border-radius: 2px;
+  }
+
+  h3 {
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #313238;
+  }
+</style>

package/knowledge/examples/blueking/status-tag/index.tsx

@@ -0,0 +1,180 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { defineComponent } from 'vue';
+
+import DemoBox from '../../../components/demo-box';
+import DemoTitle from '../../../components/demo-title';
+import PropsBox from '../../../components/props-box';
+import { IPropsTableItem } from '../../../typings';
+import BaseDemo from './base-demo.vue';
+import CustomColorDemo from './custom-color-demo.vue';
+import I18nDemo from './i18n-demo.vue';
+import InstallationDemo from './installation-demo.vue';
+import TypeDemo from './type-demo.vue';
+
+const propsJson: IPropsTableItem[] = [
+  {
+    name: 'status',
+    type: 'String',
+    default: '-',
+    desc: '状态值（必填），如：loading、running、stop、warning、failed、unknown 等',
+    optional: ['loading', 'running', 'stop', 'warning', 'failed', 'unknown'],
+  },
+  {
+    name: 'type',
+    type: 'String',
+    default: 'default',
+    desc: '标签类型：default（带背景框）、stroke（8px 描边）、filled（13px 光晕 + 7px 实心）',
+    optional: ['default', 'stroke', 'filled'],
+  },
+  {
+    name: 'locale',
+    type: 'String',
+    default: 'zh-CN',
+    desc: '语言设置，支持中英文切换。会自动检测 Cookie 中的 blueking_language 设置',
+    optional: ['zh-CN', 'en-US'],
+  },
+  {
+    name: 'status-map',
+    type: 'String (JSON)',
+    default: '-',
+    desc: '自定义状态映射配置（JSON 字符串），用于定义自定义状态的文本和主题',
+    optional: [],
+  },
+];
+
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+
+const featuresJson = [
+  {
+    name: '无框架依赖',
+    desc: '原生 Web Component，可在任何前端框架中使用（Vue、React、Angular 等）',
+    params: '',
+  },
+  {
+    name: '样式隔离',
+    desc: '使用 Shadow DOM，避免样式冲突',
+    params: '',
+  },
+  {
+    name: '国际化支持',
+    desc: '内置中英文，可扩展其他语言，自动检测 Cookie 设置',
+    params: '',
+  },
+  {
+    name: '智能匹配',
+    desc: '支持大小写不敏感的状态匹配（RUNNING、Running、running 都会被识别）',
+    params: '',
+  },
+  {
+    name: '自定义配置',
+    desc: '支持通过 status-map 属性自定义状态映射',
+    params: '',
+  },
+  {
+    name: '轻量级',
+    desc: '压缩后约 12KB（gzip: 3.1KB）',
+    params: '',
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Status Tag 是一个无框架依赖的状态标签 Web Component，支持国际化，适用于任何前端项目（Vue、React、Angular 等）。它提供了多种预设状态类型，支持自定义颜色、尺寸和图标。'
+          name='Status Tag 状态标签'
+          npmLink='https://www.npmjs.com/package/@blueking/status-tag'
+        />
+        <DemoBox
+          componentName='blueking/status-tag'
+          demoName='installation-demo'
+          desc='通过 npm 安装后，在 Vue 3 项目中引入并使用。'
+          subtitle='快速开始使用 Status Tag'
+          title='安装和使用'
+        >
+          <InstallationDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='blueking/status-tag'
+          demoName='base-demo'
+          desc='通过 status 属性设置不同的状态值。组件内置了 6 种状态：loading、running、stop、warning、failed、unknown。支持大小写不敏感的智能匹配。'
+          subtitle='展示所有内置状态和智能匹配功能'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='blueking/status-tag'
+          demoName='type-demo'
+          desc='通过 type 属性设置标签的显示类型。default（带背景框）、stroke（8px 描边）、filled（13px 光晕 + 7px 实心）。'
+          subtitle='三种不同的视觉风格'
+          title='标签类型'
+        >
+          <TypeDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='blueking/status-tag'
+          demoName='custom-color-demo'
+          desc='通过 status-map 属性可以自定义状态映射，定义自己的状态文本和主题样式。支持审批流程、连接状态等各种业务场景。'
+          subtitle='自定义状态映射配置'
+          title='自定义状态'
+        >
+          <CustomColorDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='blueking/status-tag'
+          demoName='i18n-demo'
+          desc='Status Tag 支持国际化，通过 locale 属性可以切换语言。组件会自动检测 Cookie 中的 blueking_language 设置。'
+          subtitle='支持中英文切换，可扩展其他语言'
+          title='国际化'
+        >
+          <I18nDemo />
+        </DemoBox>
+
+        <PropsBox
+          propsData={propsJson}
+          title='组件属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={featuresJson}
+          title='特性列表'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/blueking/status-tag/installation-demo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="installation-guide">
+    <h3>安装</h3>
+    <pre><code>npm install @blueking/status-tag</code></pre>
+
+    <h3>在 Vue 3 项目中使用</h3>
+    <div class="code-block">
+      <pre><code>&lt;template&gt;
+  &lt;div&gt;
+    &lt;status-tag status="running"&gt;&lt;/status-tag&gt;
+    &lt;status-tag status="loading"&gt;&lt;/status-tag&gt;
+    &lt;status-tag status="warning"&gt;&lt;/status-tag&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script setup lang="ts"&gt;
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  if (!customElements.get('status-tag')) {
+    import('@blueking/status-tag');
+  }
+});
+&lt;/script&gt;</code></pre>
+    </div>
+
+    <h3>实际效果</h3>
+    <div class="demo-result">
+      <status-tag status="loading"></status-tag>
+      <status-tag status="running"></status-tag>
+      <status-tag status="stop"></status-tag>
+      <status-tag status="warning"></status-tag>
+      <status-tag status="unknown"></status-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    // 确保 Web Component 已注册
+    if (!customElements.get('status-tag')) {
+      import('@blueking/status-tag');
+    }
+  });
+</script>
+
+<style scoped>
+  .installation-guide {
+    padding: 20px;
+  }
+
+  h3 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #313238;
+  }
+
+  h3:first-child {
+    margin-top: 0;
+  }
+
+  pre {
+    padding: 16px;
+    margin: 0;
+    overflow-x: auto;
+    background: #f5f7fa;
+    border: 1px solid #dcdee5;
+    border-radius: 2px;
+  }
+
+  code {
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    color: #313238;
+  }
+
+  .code-block {
+    margin-bottom: 24px;
+  }
+
+  .demo-result {
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    background: #fafbfd;
+    border: 1px solid #dcdee5;
+    border-radius: 2px;
+  }
+</style>

package/knowledge/examples/blueking/status-tag/type-demo.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="status-tag-demo">
+    <h3>Default 类型（带背景框）</h3>
+    <div class="demo-row">
+      <div class="status-item">
+        <span class="label">loading:</span>
+        <status-tag status="loading"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">running:</span>
+        <status-tag status="running"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">stop:</span>
+        <status-tag status="stop"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">warning:</span>
+        <status-tag status="warning"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">failed:</span>
+        <status-tag status="failed"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">unknown:</span>
+        <status-tag status="unknown"></status-tag>
+      </div>
+    </div>
+
+    <h3>Stroke 类型（8px 描边）</h3>
+    <div class="demo-row">
+      <div class="status-item">
+        <span class="label">loading:</span>
+        <status-tag status="loading" type="stroke"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">running:</span>
+        <status-tag status="running" type="stroke"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">stop:</span>
+        <status-tag status="stop" type="stroke"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">warning:</span>
+        <status-tag status="warning" type="stroke"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">failed:</span>
+        <status-tag status="failed" type="stroke"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">unknown:</span>
+        <status-tag status="unknown" type="stroke"></status-tag>
+      </div>
+    </div>
+
+    <h3>Filled 类型（13px 光晕 + 7px 实心）</h3>
+    <div class="demo-row">
+      <div class="status-item">
+        <span class="label">loading:</span>
+        <status-tag status="loading" type="filled"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">running:</span>
+        <status-tag status="running" type="filled"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">stop:</span>
+        <status-tag status="stop" type="filled"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">warning:</span>
+        <status-tag status="warning" type="filled"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">failed:</span>
+        <status-tag status="failed" type="filled"></status-tag>
+      </div>
+      <div class="status-item">
+        <span class="label">unknown:</span>
+        <status-tag status="unknown" type="filled"></status-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    // 确保 Web Component 已注册
+    if (!customElements.get('status-tag')) {
+      import('@blueking/status-tag');
+    }
+  });
+</script>
+
+<style scoped>
+  .status-tag-demo {
+    padding: 20px;
+  }
+
+  .demo-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  .status-item {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .label {
+    min-width: 60px;
+    font-size: 12px;
+    color: #63656e;
+  }
+
+  h3 {
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #313238;
+  }
+</style>
+

package/knowledge/examples/breadcrumb/base-demo.vue

@@ -0,0 +1,37 @@
+<template>
+  <bk-breadcrumb>
+    <bk-breadcrumb>
+      <bk-breadcrumb-item
+        v-for="(item, index) in list"
+        :key="index"
+        :to="item.link"
+      >
+        {{ item.title }}
+      </bk-breadcrumb-item>
+    </bk-breadcrumb>
+  </bk-breadcrumb>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import { BkBreadcrumb, BkBreadcrumbItem } from '@bkui-vue/breadcrumb';
+
+  export default defineComponent({
+    name: 'SiteBreadcrumb',
+    components: {
+      BkBreadcrumb,
+      BkBreadcrumbItem,
+    },
+    setup() {
+      const list = [
+        { title: '首页', link: { path: '/' } },
+        { title: '进度条', link: { path: 'loading' } },
+        { title: '滑块开关', link: { path: 'switcher' } },
+        { title: '面包屑', link: null },
+      ];
+      return {
+        list,
+      };
+    },
+  });
+</script>