@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/skills/bkui-builder/assets/pages/dashboard-page.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="dashboard-wrapper">
+    <bk-container :col="4" :margin="20">
+      <bk-row>
+        <bk-col v-for="stats in statsList" :key="stats.id">
+          <bk-card :title="stats.label" class="stats-card">
+            <div class="stats-value">{{ stats.value }}</div>
+            <div class="stats-footer">
+              较昨日 <span :class="stats.trend">{{ stats.percent }}% ↑</span>
+            </div>
+          </bk-card>
+        </bk-col>
+      </bk-row>
+    </bk-container>
+
+    <div class="main-content mt20">
+      <bk-row :gutter="20">
+        <bk-col :span="16">
+          <bk-card title="访问趋势">
+            <div class="chart-placeholder">
+              <bk-loading :loading="loading" title="数据加载中...">
+                <div style="height: 300px; display: flex; align-items: center; justify-content: center;">
+                  图表渲染区域
+                </div>
+              </bk-loading>
+            </div>
+          </bk-card>
+        </bk-col>
+        <bk-col :span="8">
+          <bk-card title="最近操作">
+            <bk-timeline :list="timelineList" />
+          </bk-card>
+        </bk-col>
+      </bk-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const loading = ref(true);
+
+const statsList = ref([
+  { id: 1, label: '总活跃用户', value: '12,480', percent: '12', trend: 'up' },
+  { id: 2, label: '今日请求量', value: '84,200', percent: '5', trend: 'up' },
+  { id: 3, label: '告警事件', value: '3', percent: '2', trend: 'down' },
+  { id: 4, label: '资源占用率', value: '65%', percent: '1', trend: 'up' }
+]);
+
+const timelineList = ref([
+  { tag: '2024-03-20', content: '系统内核升级完成' },
+  { tag: '2024-03-19', content: '新增 5 台集群节点' }
+]);
+
+onMounted(() => {
+  setTimeout(() => (loading.value = false), 1000);
+});
+</script>
+
+<style scoped>
+.dashboard-wrapper { padding: 20px; background: #f5f7fa; }
+.stats-card { text-align: center; }
+.stats-value { font-size: 28px; font-weight: bold; padding: 10px 0; color: #313238; }
+.stats-footer { font-size: 12px; color: #979ba5; }
+.up { color: #2dcb56; }
+.down { color: #ea3636; }
+.mt20 { margin-top: 20px; }
+</style>

package/knowledge/skills/bkui-builder/assets/pages/detail-page.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="detail-page">
+    <!-- 状态概览栏 -->
+    <bk-card class="mb20" :border="false">
+      <div class="status-header">
+        <div class="status-left">
+          <h2 class="title">单据详情: #REQ-20231201</h2>
+          <bk-tag theme="success">执行成功</bk-tag>
+        </div>
+        <div class="status-steps">
+          <bk-steps :cur-step="3" :steps="steps" />
+        </div>
+      </div>
+    </bk-card>
+
+    <!-- 分组详情 -->
+    <bk-collapse v-model="activePanels" class="info-collapse">
+      <bk-collapse-panel name="basic">
+        基本信息
+        <template #content>
+          <bk-container :col="2" :margin="0">
+            <bk-row class="mb10">
+              <bk-col :span="1"><span class="label">申请人：</span>admin</bk-col>
+              <bk-col :span="1"><span class="label">申请时间：</span>2023-12-01 10:00:00</bk-col>
+            </bk-row>
+            <bk-row>
+              <bk-col :span="1"><span class="label">所属业务：</span>王者荣耀</bk-col>
+              <bk-col :span="1"><span class="label">备注：</span>无</bk-col>
+            </bk-row>
+          </bk-container>
+        </template>
+      </bk-collapse-panel>
+
+      <bk-collapse-panel name="log">
+        执行记录
+        <template #content>
+          <bk-timeline :list="timelineList" />
+        </template>
+      </bk-collapse-panel>
+    </bk-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const activePanels = ref(['basic', 'log']);
+
+const steps = [
+  { title: '提交申请' },
+  { title: '审批通过' },
+  { title: '执行完成' },
+];
+
+const timelineList = [
+  { tag: '2023-12-01 10:05', content: '审批通过', type: 'success' },
+  { tag: '2023-12-01 10:00', content: '用户提交申请', type: 'primary' },
+];
+</script>
+
+<style scoped>
+.detail-page {
+  padding: 20px;
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.title {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 18px;
+  color: #313238;
+}
+
+.status-steps {
+  width: 400px;
+}
+
+.label {
+  color: #979ba5;
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+}
+
+.mb20 { margin-bottom: 20px; }
+.mb10 { margin-bottom: 10px; }
+</style>

package/knowledge/skills/bkui-builder/assets/pages/table-page.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="table-page">
+    <!-- 提示信息 -->
+    <bk-alert theme="info" class="mb16">
+      <template #title>平台按优先级从大到小匹配，可直接编辑优先级数值。</template>
+    </bk-alert>
+
+    <!-- 工具栏 -->
+    <div class="toolbar mb16">
+      <!-- 左侧：新建按钮 -->
+      <bk-button theme="primary" @click="handleCreate">新建</bk-button>
+
+      <!-- 右侧：Tab 筛选 + 搜索框 -->
+      <div class="toolbar-right">
+        <!-- Tab 筛选 -->
+        <bk-tab v-model:active="activeTab" type="card" class="filter-tab" @change="handleTabChange">
+          <bk-tab-panel name="all" :label="`全部 (${totalCount})`" />
+          <bk-tab-panel name="enabled" :label="`启用 (${enabledCount})`" />
+          <bk-tab-panel name="disabled" :label="`停用 (${disabledCount})`" />
+        </bk-tab>
+
+        <!-- 搜索框 -->
+        <bk-input
+          v-model="searchKey"
+          placeholder="搜索 名称、描述、更新人、定义"
+          :clearable="true"
+          style="width: 280px"
+          @enter="handleSearch"
+        >
+          <template #suffix>
+            <Search class="search-icon" @click="handleSearch" />
+          </template>
+        </bk-input>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <bk-table
+      :data="tableData"
+      :columns="columns"
+      :pagination="pagination"
+      :remote-pagination="true"
+      :settings="true"
+      @page-value-change="handlePageChange"
+      @page-limit-change="handleLimitChange"
+      @filter-change="handleFilterChange"
+      @sort-change="handleSortChange"
+    >
+      <!-- 来源列：Tag -->
+      <template #source="{ row }">
+        <bk-tag :theme="row.source === 'builtin' ? 'info' : 'success'">
+          {{ row.source === 'builtin' ? '内置' : '自定义' }}
+        </bk-tag>
+      </template>
+
+      <!-- 启停列：Switcher -->
+      <template #enabled="{ row }">
+        <bk-switcher
+          v-model="row.enabled"
+          theme="primary"
+          size="small"
+          @change="(val) => handleToggle(row, val)"
+        />
+      </template>
+
+      <!-- 操作列 -->
+      <template #operation="{ row }">
+        <bk-button text theme="primary" @click="handleEdit(row)">编辑</bk-button>
+        <bk-button text theme="danger" @click="handleDelete(row)">删除</bk-button>
+      </template>
+    </bk-table>
+
+    <!-- 新建/编辑弹窗 -->
+    <!-- ⚠️ 注意: 使用 v-model:isShow，不是 v-model -->
+    <bk-dialog
+      v-model:isShow="dialogVisible"
+      :title="dialogTitle"
+      width="600"
+      @confirm="handleConfirm"
+    >
+      <bk-form ref="formRef" :model="formData" :rules="formRules" label-width="100">
+        <bk-form-item label="名称" property="name" required>
+          <bk-input v-model="formData.name" placeholder="请输入名称" />
+        </bk-form-item>
+        <bk-form-item label="定义" property="definition" required>
+          <bk-input v-model="formData.definition" placeholder="请输入定义" />
+        </bk-form-item>
+        <bk-form-item label="描述" property="description">
+          <bk-input v-model="formData.description" type="textarea" placeholder="请输入描述" />
+        </bk-form-item>
+      </bk-form>
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+// ⚠️ 正确导入方式：从 bkui-vue/lib/icon 导入
+import { Search } from 'bkui-vue/lib/icon';
+
+interface RowData {
+  id: number;
+  name: string;
+  source: 'builtin' | 'custom';
+  definition: string;
+  description: string;
+  updatedBy: string;
+  updatedAt: string;
+  enabled: boolean;
+}
+
+// Tab 筛选
+const activeTab = ref('all');
+const totalCount = ref(24);
+const enabledCount = ref(10);
+const disabledCount = ref(14);
+
+// 搜索
+const searchKey = ref('');
+
+// 表格配置
+const columns = [
+  { label: '名称', field: 'name', width: 150 },
+  {
+    label: '来源',
+    field: 'source',
+    width: 100,
+    filter: {
+      list: [
+        { text: '内置', value: 'builtin' },
+        { text: '自定义', value: 'custom' }
+      ]
+    }
+  },
+  { label: '定义', field: 'definition', showOverflowTooltip: true },
+  { label: '描述', field: 'description', showOverflowTooltip: true },
+  {
+    label: '更新人',
+    field: 'updatedBy',
+    width: 100,
+    filter: {
+      list: [] // 动态填充
+    }
+  },
+  {
+    label: '更新时间',
+    field: 'updatedAt',
+    width: 170,
+    sort: { value: 'desc' }
+  },
+  { label: '启停', field: 'enabled', width: 80 },
+  { label: '操作', field: 'operation', width: 120 }
+];
+
+const tableData = ref<RowData[]>([]);
+const pagination = reactive({
+  current: 1,
+  count: 198,
+  limit: 10,
+  showTotalCount: true,
+  location: 'left'
+});
+
+// 弹窗
+const dialogVisible = ref(false);
+const dialogTitle = ref('新建');
+const formRef = ref();
+const formData = reactive({
+  id: 0,
+  name: '',
+  definition: '',
+  description: ''
+});
+
+const formRules = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  definition: [{ required: true, message: '请输入定义', trigger: 'blur' }]
+};
+
+// 方法
+const handleTabChange = (tab: string) => {
+  activeTab.value = tab;
+  pagination.current = 1;
+  fetchData();
+};
+
+const handleSearch = () => {
+  pagination.current = 1;
+  fetchData();
+};
+
+const handlePageChange = (page: number) => {
+  pagination.current = page;
+  fetchData();
+};
+
+const handleLimitChange = (limit: number) => {
+  pagination.limit = limit;
+  pagination.current = 1;
+  fetchData();
+};
+
+const handleFilterChange = (filters: Record<string, any>) => {
+  console.log('Filter changed:', filters);
+  fetchData();
+};
+
+const handleSortChange = ({ column, prop, order }: any) => {
+  console.log('Sort changed:', { column, prop, order });
+  fetchData();
+};
+
+const handleToggle = (row: RowData, enabled: boolean) => {
+  console.log('Toggle:', row.id, enabled);
+  // TODO: 调用启停 API
+};
+
+const handleCreate = () => {
+  dialogTitle.value = '新建';
+  Object.assign(formData, { id: 0, name: '', definition: '', description: '' });
+  dialogVisible.value = true;
+};
+
+const handleEdit = (row: RowData) => {
+  dialogTitle.value = '编辑';
+  Object.assign(formData, row);
+  dialogVisible.value = true;
+};
+
+const handleDelete = async (row: RowData) => {
+  // TODO: 调用删除 API
+  console.log('Delete:', row.id);
+};
+
+const handleConfirm = async () => {
+  await formRef.value?.validate();
+  // TODO: 调用保存 API
+  dialogVisible.value = false;
+  fetchData();
+};
+
+const fetchData = async () => {
+  // TODO: 调用列表 API
+  console.log('Fetch data:', { tab: activeTab.value, searchKey: searchKey.value, ...pagination });
+};
+
+// 初始化
+fetchData();
+</script>
+
+<style scoped>
+.table-page {
+  height: 100%;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Tab 按钮组样式 */
+.filter-tab :deep(.bk-tab-header) {
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  background: #fff;
+}
+
+.filter-tab :deep(.bk-tab-header-item) {
+  border: none;
+  background: transparent;
+  padding: 0 16px;
+}
+
+.filter-tab :deep(.bk-tab-header-item.is-active) {
+  background: #e1ecff;
+  color: #3a84ff;
+}
+
+.search-icon {
+  cursor: pointer;
+}
+
+.mb16 {
+  margin-bottom: 16px;
+}
+</style>

package/knowledge/skills/bkui-builder/assets/pages/wizard-form.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="wizard-container">
+    <div class="wizard-steps-header mb30">
+      <bk-steps :cur-step="currentStep" :steps="stepList" />
+    </div>
+
+    <div class="wizard-content card-style">
+      <!-- 步骤 1: 基本信息 -->
+      <bk-form v-if="currentStep === 1" form-type="vertical">
+        <bk-form-item label="任务名称" required>
+          <bk-input v-model="form.name" placeholder="输入任务名称" />
+        </bk-form-item>
+        <bk-form-item label="任务类型">
+          <bk-radio-group v-model="form.type">
+            <bk-radio label="sync">同步任务</bk-radio>
+            <bk-radio label="async">异步任务</bk-radio>
+          </bk-radio-group>
+        </bk-form-item>
+      </bk-form>
+
+      <!-- 步骤 2: 参数配置 -->
+      <div v-else-if="currentStep === 2">
+        <bk-alert theme="warning" title="请仔细检查参数，错误的参数可能导致执行失败。" class="mb20" />
+        <bk-form form-type="vertical">
+          <bk-form-item label="并发数">
+            <bk-slider v-model="form.concurrency" :max-value="100" />
+          </bk-form-item>
+          <bk-form-item label="通知邮箱">
+            <bk-tag-input v-model="form.emails" placeholder="输入邮箱并回车" />
+          </bk-form-item>
+        </bk-form>
+      </div>
+
+      <!-- 步骤 3: 确认提交 -->
+      <div v-else-if="currentStep === 3" class="confirm-view">
+        <bk-exception type="empty" scene="part" title="配置确认">
+          <div class="summary">
+            <p>名称: {{ form.name }}</p>
+            <p>并发: {{ form.concurrency }}</p>
+          </div>
+        </bk-exception>
+      </div>
+    </div>
+
+    <div class="wizard-footer mt20">
+      <bk-button v-if="currentStep > 1" @click="currentStep--">上一步</bk-button>
+      <bk-button v-if="currentStep < 3" theme="primary" class="ml10" @click="currentStep++">下一步</bk-button>
+      <bk-button v-else theme="success" class="ml10" @click="handleFinish">立即提交</bk-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { Message } from 'bkui-vue';
+
+const currentStep = ref(1);
+const stepList = [
+  { title: '基本信息' },
+  { title: '参数配置' },
+  { title: '确认提交' }
+];
+
+const form = reactive({
+  name: '',
+  type: 'sync',
+  concurrency: 20,
+  emails: []
+});
+
+const handleFinish = () => {
+  Message({ theme: 'success', message: '任务已提交' });
+};
+</script>
+
+<style scoped>
+.wizard-container { max-width: 900px; margin: 0 auto; padding: 40px 0; }
+.card-style { background: #fff; padding: 30px; border-radius: 2px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); }
+.summary { text-align: left; background: #f5f7fa; padding: 15px; display: inline-block; width: 300px; }
+.mb30 { margin-bottom: 30px; }
+.mb20 { margin-bottom: 20px; }
+.mt20 { margin-top: 20px; }
+.ml10 { margin-left: 10px; }
+</style>

package/knowledge/skills/bkui-builder/references/checklist.md

@@ -0,0 +1,72 @@
+# 设计稿还原检查清单 (Quality Checklist)
+
+> 💡 生成代码后，逐项核对设计稿
+
+## 0. 主题/配色 (最高优先级)
+
+- [ ] **导航栏背景色**: 深色(深蓝/深灰) vs 浅色(白色/浅灰)
+  - 深色 → 必须使用 `admin-layout-dark.vue` 模版
+  - 必须覆盖 CSS 变量: `--header-bg-color`, `--nav-bg-color`
+- [ ] **顶部导航栏颜色**: 是否与设计稿一致？
+- [ ] **侧边栏背景颜色**: 是否与设计稿一致？
+
+## 1. 顶部导航区
+
+- [ ] **Logo + 产品名**: 使用 `side-title` 或 `#side-header` 插槽
+- [ ] **业务选择器**: 若有下拉选择业务，使用 `<bk-select>` 放在 side-header
+- [ ] **顶部水平菜单**: 检索/监控/管理等，使用 `<bk-menu mode="horizontal">`
+  - 深色背景下菜单文字颜色需覆盖为白色
+- [ ] **右侧工具图标**: 帮助/通知/设置图标用 `@bkui-vue/icon`
+- [ ] **用户下拉**: 使用 `<bk-dropdown>` 包裹用户名
+
+## 2. 侧边栏菜单
+
+- [ ] **菜单图标**: 每个菜单项是否有图标？使用 `#icon` 插槽
+- [ ] **菜单分组**: 使用 `<bk-menu-group name="分组名">`，不是 div
+- [ ] **分组标题样式**: 深色主题下分组名需设置为浅色
+- [ ] **当前选中高亮**: 使用 `:active-key` 绑定当前路由
+- [ ] **默认展开**: 使用 `:opened-keys="['group-id']"` 控制
+
+## 3. 表格相关
+
+- [ ] **列筛选图标** (漏斗) → `filter: { list: [...] }`
+- [ ] **列排序图标** (↑↓) → `sort: true`
+- [ ] **列设置按钮** (齿轮) → `:settings="true"`
+- [ ] **操作列** → `<bk-button text theme="primary">编辑</bk-button>`
+- [ ] **开关 vs 勾选** → `<bk-switcher>` vs `<bk-checkbox>`
+- [ ] **分页位置** → `showTotalCount: true, location: 'left'`
+- [ ] **溢出省略** → `showOverflowTooltip: true`
+
+## 4. 工具栏布局
+
+- [ ] **左侧按钮**: 新建按钮通常在左侧，`<bk-button theme="primary">`
+- [ ] **右侧筛选**: Tab + 搜索框通常在右侧
+- [ ] **Tab 样式**:
+  - 普通下划线 → `type="border-card"` (默认)
+  - 无边框卡片 → `type="unborder-card"`
+  - 边框按钮组 → `type="card"` + 自定义样式
+- [ ] **Tab 筛选带数量**: 如"全部(24)"，使用动态 label `:label="\`全部(${count})\`"`
+- [ ] **搜索框 placeholder**: 与设计稿文案一致
+- [ ] **搜索框图标位置**: 使用 `#suffix` 插槽放 `<Search />`
+
+## 5. 表单/筛选
+- [ ] **搜索框图标**: 使用 `#suffix` 插槽放 `<Search />` 图标
+- [ ] **筛选条件**: 是 Select 下拉还是 Tab 切换？
+- [ ] **按钮样式**: 主按钮 `theme="primary"`，次按钮无 theme 或 `outline`
+
+## 6. 状态展示
+- [ ] **状态标签**: 使用 `<bk-tag>` 还是纯文字？颜色是否匹配？
+- [ ] **空状态**: 无数据时是否显示 `<bk-exception type="empty">`？
+- [ ] **加载状态**: 是否需要 `v-bkloading` 指令？
+
+## 7. 布局细节
+- [ ] **间距**: 卡片/区块间距是否使用 `mt16`, `mb16` 等原子类？
+- [ ] **对齐**: 标题左对齐？操作按钮右对齐？
+- [ ] **分隔线**: 是否需要 `<bk-divider>`？
+- [ ] **Alert 提示**: 页面顶部提示条使用 `<bk-alert>`
+
+## 8. 颜色/主题
+- [ ] **Switch 颜色**: 蓝色用 `theme="primary"`，绿色是默认色
+- [ ] **Tag 样式**: 是背景色 Tag 还是纯文字/链接？
+- [ ] **Tag 主题**: `theme="info"` (蓝), `success` (绿), `warning` (橙), `danger` (红)
+- [ ] **链接颜色**: 蓝色可点击文字用 `<bk-link theme="primary">`