@kine-design/crud 0.0.1-beta.2 → 0.0.1-beta.21

package/components/navMenu/KNavMenu.tsx

@@ -0,0 +1,175 @@
+/**
+ * @description KNavMenu — 路由联动导航菜单（crud 高阶组件）
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 基于 useMenu + KMenuItem + vue-router 封装。
+ * 自动同步路由 active 状态，点击叶子节点跳转路由。
+ */
+import { defineComponent, watch, onMounted, PropType, h } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useMenu } from '@kine-design/core/components/template/menu/useMenu';
+import { MenuNodeData } from '@kine-design/core/components/template/menu/props';
+import KMenuItem from 'kine-ui/components/menu/KMenuItem.tsx';
+import './navMenu.css';
+
+/**
+ * 导航菜单数据项（扩展 MenuData，叶子节点带 path/icon）
+ */
+export interface NavMenuData {
+  key: string | number;
+  label: string;
+  path?: string;
+  icon?: string;
+  children?: NavMenuData[];
+  disabled?: boolean;
+  [k: string]: unknown;
+}
+
+/**
+ * 递归查找 path 匹配的节点 key
+ */
+function findKeyByPath(data: NavMenuData[], path: string): string | number | null {
+  for (const item of data) {
+    if (item.path === path) return item.key;
+    if (item.children) {
+      const found = findKeyByPath(item.children, path);
+      if (found !== null) return found;
+    }
+  }
+  return null;
+}
+
+export default defineComponent({
+  name: 'KNavMenu',
+  props: {
+    data: { type: Array as PropType<NavMenuData[]>, default: () => [] },
+  },
+  setup(props, { slots }) {
+    const router = useRouter();
+    const route = useRoute();
+
+    const {
+      nodesRef,
+      nodeMap,
+      initNodes,
+      toggleExpand,
+      setActive,
+      getNodesByKeys,
+      config,
+    } = useMenu({ data: props.data });
+
+    // data 变化时重新初始化
+    watch(() => props.data, newData => {
+      initNodes(newData ?? []);
+      syncActiveByRoute(route.path);
+    }, { deep: true });
+
+    /**
+     * 根据路由路径同步 active 状态 + 展开父链
+     */
+    const syncActiveByRoute = (path: string) => {
+      const key = findKeyByPath(props.data, path);
+      if (key === null) return;
+
+      const node = nodeMap.get(key);
+      if (!node) return;
+
+      setActive(node);
+
+      // 展开所有祖先节点
+      let parent = node.parent;
+      while (parent) {
+        if (!parent.expand) {
+          parent.expand = true;
+        }
+        parent = parent.parent;
+      }
+    };
+
+    // 监听路由变化
+    watch(() => route.path, syncActiveByRoute);
+
+    // 首次挂载时同步
+    onMounted(() => {
+      syncActiveByRoute(route.path);
+    });
+
+    /** 点击节点 */
+    const handleItemClick = (node: MenuNodeData, e: MouseEvent) => {
+      if (node.disabled) return;
+
+      const navNode = node as MenuNodeData & { path?: string };
+
+      if (navNode.path) {
+        // 叶子节点：跳转路由
+        router.push(navNode.path);
+        setActive(node);
+      } else {
+        // 分类节点：切换展开
+        toggleExpand(node);
+      }
+
+      e.stopPropagation();
+    };
+
+    /**
+     * label 点击（KMenuItem 内部 label span 绑的是 handleExpand）
+     * 对叶子节点也需要处理路由跳转
+     */
+    const handleExpand = (node: MenuNodeData, e: MouseEvent) => {
+      if (node.disabled) return;
+
+      const navNode = node as MenuNodeData & { path?: string };
+      const hasChildren = node.children && node.children.length > 0;
+
+      if (hasChildren) {
+        // 分类节点：切换展开
+        toggleExpand(node);
+      } else if (navNode.path) {
+        // 叶子节点：跳转路由
+        router.push(navNode.path);
+        setActive(node);
+      }
+
+      e.stopPropagation();
+    };
+
+    /** checkbox（不启用，占位） */
+    const handleCheck = () => {};
+
+    /**
+     * 默认 slot：渲染 icon + label
+     * 外部可通过 slot 自定义，slot 参数 { data: label, node: MenuNodeData }
+     */
+    const defaultSlot = slots.default
+      ? slots.default
+      : (slotProps: { data: string; node?: MenuNodeData }) => {
+          const label = slotProps.data;
+          const icon = slotProps.node ? (slotProps.node as NavMenuData & MenuNodeData).icon : undefined;
+          return [
+            icon ? h('span', { class: 'k-nav-menu-icon' }, icon as string) : null,
+            h('span', { class: 'k-nav-menu-label' }, label),
+          ];
+        };
+
+    return () => (
+      <div class="k-nav-menu">
+        <KMenuItem
+          data={[...nodesRef.value]}
+          config={config}
+          checkbox={false}
+          root={true}
+          getNodesByKeys={getNodesByKeys}
+          handleExpand={handleExpand}
+          handleCheck={handleCheck}
+          handleItemClick={handleItemClick}
+          v-slots={{ default: defaultSlot }}
+        />
+      </div>
+    );
+  },
+});

package/components/navMenu/index.ts

@@ -0,0 +1,2 @@
+export { default as KNavMenu } from './KNavMenu';
+export type { NavMenuData } from './KNavMenu';

package/components/navMenu/navMenu.css

@@ -0,0 +1,197 @@
+/**
+ * @description KNavMenu 导航菜单样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ */
+
+/* ===== 容器：撑满侧边栏，去掉 KMenu 默认边框 ===== */
+.k-nav-menu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--kine-spacing-2) 0;
+}
+
+/* 根级 li：无缩进 */
+.k-nav-menu > .k-menu-item-root {
+  list-style: none;
+}
+
+/* ===== 内容行通用 ===== */
+.k-nav-menu .k-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-5);
+  padding: 11px 18px; /* 11px/18px 无精确 token，保留 */
+  color: var(--kine-color-text-secondary);
+  font-size: 15px; /* 15px 无精确 token，保留 */
+  cursor: pointer;
+  transition:
+    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  border-left: 2px solid transparent;
+}
+
+.k-nav-menu .k-menu-item-content:hover {
+  background: var(--kine-color-bg-hover);
+  color: var(--kine-color-text-primary);
+}
+
+/* ===== 分类父节点：小号标题风格 ===== */
+.k-nav-menu > .k-menu-item-root > .k-menu-item-content {
+  font-size: var(--kine-font-size-sm);
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  padding: var(--kine-spacing-7) var(--kine-spacing-8) var(--kine-spacing-3);
+  border-left: none;
+}
+
+.k-nav-menu > .k-menu-item-root > .k-menu-item-content:hover {
+  background: transparent;
+  color: var(--kine-color-text-secondary);
+}
+
+/* 分类节点不显示 active 样式 */
+.k-nav-menu > .k-menu-item-root.k-menu-item-active > .k-menu-item-content {
+  color: var(--kine-color-text-muted);
+  background: transparent;
+  border-left: none;
+  padding-left: var(--kine-spacing-8);
+}
+
+/* ===== 子节点（组件条目）===== */
+.k-nav-menu .k-menu-item-children {
+  padding-left: 0;
+  border-left: none;
+  margin-left: 0;
+}
+
+.k-nav-menu .k-menu-item-children .k-menu-item-content {
+  padding: 11px 18px 11px 26px; /* 11px/18px/26px 无精确 token，保留 */
+  font-size: 15px; /* 15px 无精确 token，保留 */
+}
+
+/* ===== active 叶子节点 ===== */
+.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 12%, transparent);
+  color: var(--kine-color-accent-default);
+  font-weight: var(--kine-font-weight-medium);
+  border-left: 2px solid var(--kine-color-accent-default);
+  padding-left: 22px; /* 24 - 2(border) */
+}
+
+.k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content:hover {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, transparent);
+}
+
+/* ===== 展开箭头 ===== */
+.k-nav-menu .k-menu-item-arrow {
+  flex-shrink: 0;
+  width: 0;
+  height: 0;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-left: 4px solid currentColor;
+  opacity: 0.5;
+  transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-nav-menu .k-menu-item-arrow-expand {
+  transform: rotate(90deg);
+}
+
+/* ===== 禁用状态 ===== */
+.k-nav-menu .k-menu-item-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===== 折叠状态：只显示图标 ===== */
+.k-crud-sider--collapsed .k-nav-menu-label {
+  display: none;
+}
+
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-content {
+  justify-content: center;
+  padding: var(--kine-spacing-6) 0;
+  border-left: none;
+  gap: 0;
+}
+
+.k-crud-sider--collapsed .k-nav-menu-icon {
+  font-size: var(--kine-font-size-3xl);
+  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 折叠时根节点也用统一的居中样式（覆盖分类标题的特殊样式） */
+.k-crud-sider--collapsed .k-nav-menu > .k-menu-item-root > .k-menu-item-content {
+  font-size: inherit;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  padding: var(--kine-spacing-6) 0;
+  justify-content: center;
+  color: var(--kine-color-text-secondary);
+  border-left: none;
+}
+
+/* 折叠时隐藏展开箭头 */
+.k-crud-sider--collapsed .k-menu-item-arrow {
+  display: none;
+}
+
+/* 折叠时子菜单也对齐 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-content {
+  padding: var(--kine-spacing-6) 0;
+  justify-content: center;
+}
+
+/* 折叠时子菜单列表无缩进 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children {
+  padding-left: 0;
+}
+
+/* 折叠时 active 样式调整 */
+.k-crud-sider--collapsed .k-nav-menu .k-menu-item-children .k-menu-item-active > .k-menu-item-content {
+  border-left: none;
+  padding-left: 0;
+  border-radius: var(--kine-radius-sm);
+  margin: 0 var(--kine-spacing-4);
+}
+
+/* 折叠时 label 区域也隐藏 */
+.k-crud-sider--collapsed .k-menu-item-label {
+  display: none;
+}
+
+/* ===== label 溢出省略 ===== */
+.k-nav-menu .k-menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+}
+
+/* ===== icon ===== */
+.k-nav-menu-icon {
+  flex-shrink: 0;
+  font-size: 18px; /* 18px 无对应 token，保留 */
+  width: 22px;
+  text-align: center;
+}
+
+.k-nav-menu-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/components/pageHeader/KPageHeader.tsx

@@ -0,0 +1,85 @@
+/**
+ * @description KPageHeader 页面头部组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent } from 'vue';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './pageHeader.css';
+
+export default defineComponent({
+  name: 'KPageHeader',
+  props: {
+    /** 页面标题 */
+    title: {
+      type: String,
+      default: '',
+    },
+    /** 副标题 */
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    /** 是否显示返回按钮 */
+    backable: {
+      type: Boolean,
+      default: false,
+    },
+    /** 返回回调 */
+    onBack: {
+      type: Function as unknown as () => () => void,
+      default: undefined,
+    },
+  },
+  setup(props, ctx) {
+    const handleBack = () => {
+      props.onBack?.();
+    };
+
+    return () => (
+      <div class="k-page-header">
+        {/* 面包屑插槽 */}
+        {ctx.slots.breadcrumb && (
+          <div class="k-page-header-breadcrumb">
+            {ctx.slots.breadcrumb()}
+          </div>
+        )}
+
+        {/* 主行：左侧标题 + 右侧操作 */}
+        <div class="k-page-header-main">
+          {/* 左侧：返回 + 标题区 */}
+          <div class="k-page-header-left">
+            {props.backable && (
+              <KButton text="←" onClick={handleBack} />
+            )}
+            <div class="k-page-header-heading">
+              {props.title && (
+                <h2 class="k-page-header-title">{props.title}</h2>
+              )}
+              {props.subtitle && (
+                <p class="k-page-header-subtitle">{props.subtitle}</p>
+              )}
+            </div>
+          </div>
+
+          {/* 右侧操作区插槽 */}
+          {ctx.slots.extra && (
+            <div class="k-page-header-extra">
+              {ctx.slots.extra()}
+            </div>
+          )}
+        </div>
+
+        {/* 标题下方内容插槽 */}
+        {ctx.slots.default && (
+          <div class="k-page-header-content">
+            {ctx.slots.default()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/components/pageHeader/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @description pageHeader 模块导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { default as KPageHeader } from './KPageHeader';

package/components/pageHeader/pageHeader.css

@@ -0,0 +1,93 @@
+/**
+ * @description KPageHeader 页面头部样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.2
+ */
+
+/* ===== 容器 ===== */
+.k-page-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kine-spacing-8) 0 var(--kine-spacing-6);
+  border-bottom: 1px solid var(--kine-color-border-default);
+  background-color: transparent;
+  margin-bottom: var(--kine-spacing-8);
+}
+
+/* ===== 面包屑区域 ===== */
+.k-page-header-breadcrumb {
+  margin-bottom: var(--kine-spacing-4);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted);
+  font-family: var(--kine-font-family-system);
+  min-height: 20px;
+}
+
+/* ===== 主行：标题 + 操作 ===== */
+.k-page-header-main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kine-spacing-8);
+  min-height: 32px;
+}
+
+/* ===== 左侧：返回 + 标题区 ===== */
+.k-page-header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  min-width: 0;
+  flex: 1;
+}
+
+/* 标题文字区 */
+.k-page-header-heading {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 主标题 */
+.k-page-header-title {
+  font-size: 18px; /* 18px 无对应 token，保留 */
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary);
+  margin: 0;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--kine-font-family-system);
+}
+
+/* 副标题 */
+.k-page-header-subtitle {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-muted);
+  margin: var(--kine-spacing-1) 0 0;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--kine-font-family-system);
+}
+
+/* ===== 右侧操作区 ===== */
+.k-page-header-extra {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--kine-spacing-4);
+}
+
+/* ===== 标题下方内容插槽 ===== */
+.k-page-header-content {
+  margin-top: var(--kine-spacing-6);
+}

package/components/searchTable/KSearchTable.tsx

@@ -0,0 +1,138 @@
+/**
+ * @description KSearchTable 搜索表格组合组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, PropType } from 'vue';
+import KTable from 'kine-ui/components/table/KTable.tsx';
+import KPagination from 'kine-ui/components/pagination/KPagination.tsx';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './searchTable.css';
+
+export default defineComponent({
+  name: 'KSearchTable',
+
+  props: {
+    /** 加载状态 */
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /** 表格数据 */
+    data: {
+      type: Array as PropType<Record<string, unknown>[]>,
+      default: () => [],
+    },
+    /** 总条数 */
+    total: {
+      type: Number,
+      default: 0,
+    },
+    /** 当前页（受控，配合 v-model:page） */
+    page: {
+      type: Number,
+      default: 1,
+    },
+    /** 每页条数（受控，配合 v-model:pageSize） */
+    pageSize: {
+      type: Number,
+      default: 20,
+    },
+    /** 是否显示搜索区 */
+    searchable: {
+      type: Boolean,
+      default: true,
+    },
+    /** 是否显示分页 */
+    pageable: {
+      type: Boolean,
+      default: true,
+    },
+    /** 透传给 KTable 的额外 props */
+    tableProps: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
+  },
+
+  emits: [
+    'update:page',
+    'update:pageSize',
+    /** 点击搜索按钮 */
+    'search',
+    /** 点击重置按钮 */
+    'reset',
+  ],
+
+  setup(props, ctx) {
+    /** 点击搜索按钮 */
+    const onSearch = () => {
+      ctx.emit('search');
+    };
+
+    /** 点击重置按钮 */
+    const onReset = () => {
+      ctx.emit('reset');
+    };
+
+    /** 分页 currentPage 变更 */
+    const onPageChange = (page: number) => {
+      ctx.emit('update:page', page);
+    };
+
+    return () => (
+      <div class={['k-search-table', props.loading ? 'k-search-table--loading' : '']}>
+
+        {/* 搜索区：searchable 为 true 时展示 */}
+        {props.searchable && (
+          <div class="k-search-table-search">
+            {/* 搜索表单插槽：业务方放 KForm + KFormItem */}
+            <div class="k-search-table-search-form">
+              {ctx.slots.search?.()}
+            </div>
+            {/* 搜索 / 重置按钮区 */}
+            <div class="k-search-table-search-actions">
+              <KButton type="primary" text="搜索" onClick={onSearch} />
+              <KButton text="重置" onClick={onReset} />
+            </div>
+          </div>
+        )}
+
+        {/* 工具栏：搜索区与表格之间，放操作按钮等 */}
+        {ctx.slots.toolbar && (
+          <div class="k-search-table-toolbar">
+            {ctx.slots.toolbar()}
+          </div>
+        )}
+
+        {/* 表格区：flex: 1 撑满剩余空间 */}
+        <div class="k-search-table-body">
+          <KTable
+            data={props.data}
+            {...props.tableProps}
+          >
+            {{
+              default: ctx.slots.default,
+              empty: ctx.slots.empty,
+            }}
+          </KTable>
+        </div>
+
+        {/* 分页区：固定底部 */}
+        {props.pageable && (
+          <div class="k-search-table-pagination">
+            <KPagination
+              modelValue={props.page}
+              total={props.total}
+              pageSize={props.pageSize}
+              onUpdate:modelValue={onPageChange}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/components/searchTable/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @description KSearchTable barrel export
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { default as KSearchTable } from './KSearchTable';