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

package/components/layout/KLayout.tsx

@@ -0,0 +1,82 @@
+/**
+ * @description KLayout 布局容器组件，提供 collapsed 状态及宽度配置
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, provide, ref, watch, type InjectionKey, type Ref } from 'vue';
+import './layout.css';
+
+export const LAYOUT_COLLAPSED_KEY: InjectionKey<Ref<boolean>> = Symbol('kCrudLayoutCollapsed');
+export const LAYOUT_TOGGLE_KEY: InjectionKey<() => void> = Symbol('kCrudLayoutToggle');
+export const LAYOUT_SIDER_WIDTH_KEY: InjectionKey<string> = Symbol('kCrudLayoutSiderWidth');
+export const LAYOUT_COLLAPSED_WIDTH_KEY: InjectionKey<string> = Symbol('kCrudLayoutCollapsedWidth');
+export const LAYOUT_DRAWER_OPEN_KEY: InjectionKey<Ref<boolean>> = Symbol('kCrudLayoutDrawerOpen');
+export const LAYOUT_TOGGLE_DRAWER_KEY: InjectionKey<() => void> = Symbol('kCrudLayoutToggleDrawer');
+
+export default defineComponent({
+  name: 'KLayout',
+  props: {
+    /** 受控模式：外部传入 collapsed 状态 */
+    collapsed: {
+      type: Boolean,
+      default: undefined,
+    },
+    /** 侧边栏展开宽度 */
+    siderWidth: {
+      type: String,
+      default: '240px',
+    },
+    /** 侧边栏折叠宽度 */
+    collapsedWidth: {
+      type: String,
+      default: '64px',
+    },
+  },
+  emits: ['update:collapsed'],
+  setup(props, ctx) {
+    // 内部折叠状态，受控时跟随 props
+    const innerCollapsed = ref(props.collapsed ?? false);
+
+    // 受控模式：同步外部变化
+    watch(
+      () => props.collapsed,
+      val => {
+        if (val !== undefined) {
+          innerCollapsed.value = val;
+        }
+      },
+    );
+
+    const toggleCollapsed = () => {
+      const next = !innerCollapsed.value;
+      innerCollapsed.value = next;
+      ctx.emit('update:collapsed', next);
+    };
+
+    // 移动端抽屉开关状态
+    const drawerOpen = ref(false);
+    const toggleDrawer = () => { drawerOpen.value = !drawerOpen.value; };
+
+    // 向子组件提供折叠状态、切换方法和宽度配置
+    provide(LAYOUT_COLLAPSED_KEY, innerCollapsed);
+    provide(LAYOUT_TOGGLE_KEY, toggleCollapsed);
+    provide(LAYOUT_SIDER_WIDTH_KEY, props.siderWidth);
+    provide(LAYOUT_COLLAPSED_WIDTH_KEY, props.collapsedWidth);
+    provide(LAYOUT_DRAWER_OPEN_KEY, drawerOpen);
+    provide(LAYOUT_TOGGLE_DRAWER_KEY, toggleDrawer);
+
+    return () => (
+      <div class="k-crud-layout">
+        {/* 移动端遮罩层，点击关闭抽屉 */}
+        <div
+          class={['k-crud-sider-overlay', drawerOpen.value && 'k-crud-sider-overlay--visible']}
+          onClick={toggleDrawer}
+        />
+        {ctx.slots.default?.()}
+      </div>
+    );
+  },
+});

package/components/layout/KSider.tsx

@@ -0,0 +1,80 @@
+/**
+ * @description KSider 侧边栏组件，支持折叠动画和自定义 trigger
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { computed, defineComponent, inject, ref } from 'vue';
+import {
+  LAYOUT_COLLAPSED_KEY,
+  LAYOUT_TOGGLE_KEY,
+  LAYOUT_SIDER_WIDTH_KEY,
+  LAYOUT_COLLAPSED_WIDTH_KEY,
+  LAYOUT_DRAWER_OPEN_KEY,
+} from './KLayout';
+
+export default defineComponent({
+  name: 'KSider',
+  setup(_, ctx) {
+    // 从 KLayout 注入折叠状态、切换方法和宽度配置
+    const collapsed = inject(LAYOUT_COLLAPSED_KEY);
+    const toggle = inject(LAYOUT_TOGGLE_KEY);
+    const drawerOpen = inject(LAYOUT_DRAWER_OPEN_KEY, ref(false));
+    const siderWidth = inject(LAYOUT_SIDER_WIDTH_KEY, '240px');
+    const collapsedWidth = inject(LAYOUT_COLLAPSED_WIDTH_KEY, '64px');
+
+    const currentWidth = computed(() => {
+      if (!collapsed) return siderWidth;
+      return collapsed.value ? collapsedWidth : siderWidth;
+    });
+
+    const isCollapsed = computed(() => collapsed?.value ?? false);
+
+    const handleTriggerClick = () => {
+      toggle?.();
+    };
+
+    // 默认折叠按钮图标：展开时显示 ←，折叠时显示 →
+    const defaultTrigger = () => (
+      <button
+        class="k-crud-sider-trigger-btn"
+        onClick={handleTriggerClick}
+        title={isCollapsed.value ? '展开侧边栏' : '折叠侧边栏'}
+      >
+        <span class={['k-crud-sider-trigger-icon', isCollapsed.value && 'k-crud-sider-trigger-icon--collapsed']}>
+          {'‹'}
+        </span>
+      </button>
+    );
+
+    return () => (
+      <aside
+        class={[
+          'k-crud-sider',
+          isCollapsed.value && 'k-crud-sider--collapsed',
+          drawerOpen.value && 'k-crud-sider--drawer-open',
+        ]}
+        style={{ width: currentWidth.value }}
+      >
+        {/* Logo 区域 */}
+        {ctx.slots.logo && (
+          <div class="k-crud-sider-logo">
+            {ctx.slots.logo()}
+          </div>
+        )}
+
+        {/* 主内容区（菜单等） */}
+        <div class="k-crud-sider-body">
+          {ctx.slots.default?.()}
+        </div>
+
+        {/* 折叠触发器：优先使用自定义 trigger slot */}
+        <div class="k-crud-sider-trigger">
+          {ctx.slots.trigger ? ctx.slots.trigger({ collapsed: isCollapsed.value, toggle }) : defaultTrigger()}
+        </div>
+      </aside>
+    );
+  },
+});

package/components/layout/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @description layout 布局组件统一导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { default as KLayout } from './KLayout';
+export { default as KSider } from './KSider';
+export { default as KHeader } from './KHeader';
+export { default as KContent } from './KContent';
+export {
+  LAYOUT_COLLAPSED_KEY,
+  LAYOUT_TOGGLE_KEY,
+  LAYOUT_SIDER_WIDTH_KEY,
+  LAYOUT_COLLAPSED_WIDTH_KEY,
+} from './KLayout';

package/components/layout/layout.css

@@ -0,0 +1,262 @@
+/**
+ * @description KLayout 布局组件样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.2
+ */
+
+/* ===== KLayout ===== */
+.k-crud-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ===== KSider ===== */
+.k-crud-sider {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--kine-color-bg-secondary);
+  color: var(--kine-color-text-primary);
+  border-right: 1px solid var(--kine-color-border-default);
+  /* 折叠/展开宽度过渡 */
+  transition: width 0.3s var(--kine-motion-easing-default);
+  will-change: width;
+  box-sizing: border-box;
+}
+
+/* Logo 区域 */
+.k-crud-sider-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 56px;
+  min-height: 56px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--kine-color-border-default);
+  box-sizing: border-box;
+}
+
+/* 菜单主体，占满剩余高度 */
+.k-crud-sider-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 折叠触发器（底部） */
+.k-crud-sider-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 48px;
+  border-top: 1px solid var(--kine-color-border-default);
+}
+
+/* 默认折叠按钮 */
+.k-crud-sider-trigger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--kine-color-text-secondary);
+  background-color: var(--kine-color-bg-tertiary);
+  transition:
+    background-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
+    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  padding: 0;
+}
+
+.k-crud-sider-trigger-btn:hover {
+  background-color: var(--kine-color-bg-hover);
+  color: var(--kine-color-text-primary);
+}
+
+/* 折叠箭头图标：展开时朝左，折叠时朝右 */
+.k-crud-sider-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--kine-font-size-3xl);
+  line-height: 1;
+  font-style: normal;
+  transition: transform 0.3s var(--kine-motion-easing-default);
+  /* 默认（展开态）：‹ 指向左侧，表示可以收起 */
+  transform: rotate(0deg);
+}
+
+.k-crud-sider-trigger-icon--collapsed {
+  /* 折叠态：旋转 180deg，‹ 变成朝右，表示可以展开 */
+  transform: rotate(180deg);
+}
+
+/* ===== KHeader ===== */
+.k-crud-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  height: 56px;
+  min-height: 56px;
+  padding: 0 var(--kine-spacing-8);
+  box-sizing: border-box;
+  background-color: var(--kine-color-bg-primary);
+  border-bottom: 1px solid var(--kine-color-border-default);
+}
+
+.k-crud-header-main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.k-crud-header-extra {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--kine-spacing-4);
+}
+
+/* ===== KContent ===== */
+.k-crud-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: var(--kine-color-bg-primary);
+  padding: var(--kine-spacing-8);
+  box-sizing: border-box;
+}
+
+/* ===== 遮罩层（桌面端隐藏） ===== */
+.k-crud-sider-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  transition: background 0.3s var(--kine-motion-easing-default);
+}
+
+.k-crud-sider-overlay--visible {
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: auto;
+}
+
+/* ===== 汉堡按钮 ===== */
+.k-crud-header-hamburger {
+  display: none; /* 桌面端隐藏 */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  margin-right: var(--kine-spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--kine-spacing-2);
+  border-radius: var(--kine-radius-xs);
+  color: var(--kine-color-text-secondary);
+  transition: background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-crud-header-hamburger:hover {
+  background: var(--kine-color-bg-hover);
+  color: var(--kine-color-text-primary);
+}
+
+/* 三条横线图标 */
+.k-crud-header-hamburger-icon,
+.k-crud-header-hamburger-icon::before,
+.k-crud-header-hamburger-icon::after {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+.k-crud-header-hamburger-icon {
+  position: relative;
+}
+
+.k-crud-header-hamburger-icon::before,
+.k-crud-header-hamburger-icon::after {
+  content: '';
+  position: absolute;
+  left: 0;
+}
+
+.k-crud-header-hamburger-icon::before { top: -5px; }
+.k-crud-header-hamburger-icon::after  { top: 5px; }
+
+/* ================================================================
+   移动端（<768px）
+   ================================================================ */
+
+@media (max-width: 767px) {
+  /* 汉堡按钮显示 */
+  .k-crud-header-hamburger {
+    display: flex;
+  }
+
+  /* 侧边栏变为 fixed 抽屉，默认隐藏 */
+  .k-crud-sider {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 240px !important; /* 覆盖 inline style */
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition:
+      transform 0.3s var(--kine-motion-easing-default),
+      box-shadow 0.3s var(--kine-motion-easing-default);
+    box-shadow: none;
+    border-right: none;
+  }
+
+  /* 抽屉打开 */
+  .k-crud-sider--drawer-open {
+    transform: translateX(0);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
+  }
+
+  /* 遮罩层 */
+  .k-crud-sider-overlay {
+    display: block;
+  }
+
+  /* 底部折叠 trigger 在移动端隐藏 */
+  .k-crud-sider-trigger {
+    display: none;
+  }
+
+  /* 内容区 padding 缩减 */
+  .k-crud-content {
+    padding: var(--kine-spacing-4);
+  }
+}

package/components/login/KLoginPage.tsx

@@ -0,0 +1,129 @@
+/**
+ * @description KLoginPage 登录页组件
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineComponent, ref } from 'vue';
+import KInput from 'kine-ui/components/input/KInput.tsx';
+import KButton from 'kine-ui/components/button/KButton.tsx';
+import './login.css';
+
+export type LoginForm = {
+  username: string;
+  password: string;
+  remember: boolean;
+};
+
+export default defineComponent({
+  name: 'KLoginPage',
+  props: {
+    /** 系统名称 */
+    title: {
+      type: String,
+      default: '系统登录',
+    },
+    /** 登录中状态 */
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /** 登录提交回调 */
+    onSubmit: {
+      type: Function as unknown as () => (form: LoginForm) => Promise<void> | void,
+      default: undefined,
+    },
+  },
+  setup(props, ctx) {
+    const username = ref('');
+    const password = ref('');
+    const remember = ref(false);
+
+    const handleSubmit = async (e: Event) => {
+      e.preventDefault();
+      if (props.loading) return;
+      await props.onSubmit?.({
+        username: username.value,
+        password: password.value,
+        remember: remember.value,
+      });
+    };
+
+    return () => (
+      <div class="k-login-page">
+        <div class="k-login-card">
+          {/* Logo 插槽 */}
+          {ctx.slots.logo && (
+            <div class="k-login-logo">
+              {ctx.slots.logo()}
+            </div>
+          )}
+
+          {/* 标题 */}
+          <h2 class="k-login-title">{props.title}</h2>
+
+          {/* 登录表单 */}
+          <form class="k-login-form" onSubmit={handleSubmit}>
+            {/* 用户名 */}
+            <div class="k-login-form-item">
+              <label>用户名</label>
+              <KInput
+                modelValue={username.value}
+                placeholder="请输入用户名"
+                onUpdate:modelValue={(v: string) => { username.value = v; }}
+              />
+            </div>
+
+            {/* 密码 */}
+            <div class="k-login-form-item">
+              <label>密码</label>
+              <KInput
+                type="password"
+                modelValue={password.value}
+                placeholder="请输入密码"
+                onUpdate:modelValue={(v: string) => { password.value = v; }}
+              />
+            </div>
+
+            {/* 记住我 */}
+            <label class="k-login-remember">
+              <input
+                type="checkbox"
+                checked={remember.value}
+                onChange={(e: Event) => {
+                  remember.value = (e.target as HTMLInputElement).checked;
+                }}
+              />
+              记住我
+            </label>
+
+            {/* 提交按钮 */}
+            <KButton
+              type="primary"
+              text={props.loading ? '登录中...' : '登 录'}
+              disabled={props.loading}
+              loading={props.loading}
+              onClick={handleSubmit}
+            />
+          </form>
+
+          {/* 额外登录方式插槽 */}
+          {ctx.slots.extra && (
+            <div class="k-login-extra">
+              {ctx.slots.extra()}
+            </div>
+          )}
+        </div>
+
+        {/* 底部版权插槽 */}
+        {ctx.slots.footer && (
+          <div class="k-login-footer">
+            {ctx.slots.footer()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/components/login/index.ts

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

package/components/login/login.css

@@ -0,0 +1,118 @@
+/**
+ * @description KLoginPage 登录页样式 — Phosphor 主题
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v0.0.2
+ */
+
+/* ===== 全屏容器 ===== */
+.k-login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kine-spacing-12);
+  background-color: var(--kine-color-bg-secondary);
+}
+
+/* ===== 登录卡片 ===== */
+.k-login-card {
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--kine-color-bg-primary);
+  border-radius: var(--kine-radius-md);
+  border: 1px solid var(--kine-color-border-default);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: var(--kine-spacing-20) 36px var(--kine-spacing-16);
+  box-sizing: border-box;
+}
+
+@media (max-width: 480px) {
+  .k-login-card {
+    padding: var(--kine-spacing-16) var(--kine-spacing-10) var(--kine-spacing-12);
+    box-shadow: none;
+    border-radius: 0;
+    max-width: 100%;
+  }
+}
+
+/* ===== Logo 区域 ===== */
+.k-login-logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--kine-spacing-8);
+}
+
+/* ===== 标题 ===== */
+.k-login-title {
+  text-align: center;
+  font-size: 22px; /* 22px 无精确 token，保留 */
+  font-weight: var(--kine-font-weight-semibold);
+  color: var(--kine-color-text-primary);
+  margin: 0 0 var(--kine-spacing-14);
+  line-height: 1.4;
+  font-family: var(--kine-font-family-system);
+}
+
+/* ===== 表单 ===== */
+.k-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-8);
+}
+
+/* 表单项 */
+.k-login-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kine-spacing-3);
+}
+
+.k-login-form-item label {
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary);
+  font-weight: var(--kine-font-weight-medium);
+  font-family: var(--kine-font-family-system);
+}
+
+/* KInput 宽度撑满表单项 */
+.k-login-form-item .k-input {
+  width: 100%;
+}
+
+/* 记住我行 */
+.k-login-remember {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-4);
+  font-size: var(--kine-font-size-lg);
+  color: var(--kine-color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--kine-font-family-system);
+}
+
+.k-login-remember input[type='checkbox'] {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+  accent-color: var(--kine-color-accent-default);
+}
+
+/* ===== 额外登录方式区域 ===== */
+.k-login-extra {
+  margin-top: var(--kine-spacing-10);
+  text-align: center;
+}
+
+/* ===== 底部版权区域 ===== */
+.k-login-footer {
+  margin-top: var(--kine-spacing-16);
+  text-align: center;
+  font-size: var(--kine-font-size-md);
+  color: var(--kine-color-text-muted);
+  font-family: var(--kine-font-family-system);
+}