@hsu-react/ui 0.0.1

package/lib/request/ResType.d.ts

@@ -0,0 +1,20 @@
+/** 通用响应包装：与后端约定的 { code, data, msg } 结构 */
+export interface ResType<T = unknown> {
+    code: number;
+    data: T;
+    msg?: string;
+}
+/** 分页列表响应 */
+export interface ListRes<T> {
+    list: Array<T>;
+    page: {
+        pageNum: number;
+        pageSize: number;
+        total: number;
+    };
+}
+/** 文件响应（二进制下载） */
+export interface FileRes {
+    filename: string;
+    data: ArrayBuffer;
+}

package/lib/request/ResType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/request/index.d.ts

@@ -0,0 +1,28 @@
+import type { ResType } from "./ResType";
+export * from "./ResType";
+/** 请求配置（与常见 axios 封装兼容的子集） */
+export interface RequestConfig<P = object> {
+    params?: P;
+    responseType?: string;
+    headers?: Record<string, unknown>;
+    /** 为 true 时该请求 401 不触发全局跳登录 */
+    skipAuthRedirect?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * 组件库内部「智能组件」依赖的请求实现接口。
+ * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
+ * 组件库自身不绑定任何具体 HTTP 客户端。
+ */
+export interface RequestImpl {
+    get<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
+    post<T = unknown>(url: string, data?: any, config?: any): Promise<ResType<T>>;
+    del<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
+    put<T = unknown>(url: string, data?: any): Promise<ResType<T>>;
+}
+/** 注入真实的请求实现（可只注入用到的方法） */
+export declare const configureRequest: (request: Partial<RequestImpl>) => void;
+export declare const get: RequestImpl["get"];
+export declare const post: RequestImpl["post"];
+export declare const del: RequestImpl["del"];
+export declare const put: RequestImpl["put"];

package/lib/request/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  configureRequest: true,
+  get: true,
+  post: true,
+  del: true,
+  put: true
+};
+exports.put = exports.post = exports.get = exports.del = exports.configureRequest = void 0;
+var _ResType = require("./ResType");
+Object.keys(_ResType).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ResType[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResType[key];
+    }
+  });
+});
+/** 请求配置（与常见 axios 封装兼容的子集） */
+
+/**
+ * 组件库内部「智能组件」依赖的请求实现接口。
+ * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
+ * 组件库自身不绑定任何具体 HTTP 客户端。
+ */
+// 注意：config/data 用宽松类型，以兼容各类 axios 封装的方法签名差异
+
+const notConfigured = () => {
+  throw new Error("[@hsu-react/ui] 尚未注入 request。请用 <ConfigProvider request={...}> 包裹应用，" + "或在入口调用 configureRequest({ get, post, del, put })。");
+};
+let impl = {
+  get: notConfigured,
+  post: notConfigured,
+  del: notConfigured,
+  put: notConfigured
+};
+
+/** 注入真实的请求实现（可只注入用到的方法） */
+const configureRequest = request => {
+  impl = {
+    ...impl,
+    ...request
+  };
+};
+exports.configureRequest = configureRequest;
+const get = (url, config) => impl.get(url, config);
+exports.get = get;
+const post = (url, data, config) => impl.post(url, data, config);
+exports.post = post;
+const del = (url, config) => impl.del(url, config);
+exports.del = del;
+const put = (url, data) => impl.put(url, data);
+exports.put = put;

package/lib/styles/antd-overload.less

@@ -0,0 +1,133 @@
+.ant-layout-sider-children {
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+
+  .ant-menu {
+    overflow: auto;
+  }
+}
+
+.ant-picker-range {
+  .ant-picker-active-bar {
+    background: none;
+  }
+}
+
+.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 主色按钮交由 antd colorPrimary 令牌驱动（随亮/暗外观自动取色 + 正确的 hover/active 派生）
+
+.ant-menu-item,
+.ant-menu-submenu-title {
+  column-gap: 5px;
+}
+
+// ===== Cloudflare 风格：侧边菜单（亮/暗通用）=====
+.ant-layout-sider .ant-menu {
+  border-inline-end: none;
+
+  // 选中行左侧水色高亮条 + 中等字重，呼应 CF dashboard 的左缘指示器
+  .ant-menu-item-selected {
+    position: relative;
+
+    font-weight: 500;
+
+    &::before {
+      content: "";
+
+      position: absolute;
+      left: 0px;
+      top: 7px;
+      bottom: 7px;
+
+      width: 3px;
+
+      background: var(--primary-color);
+      border-radius: 3px;
+    }
+  }
+
+  // CF 分区标题：小号、加粗、字间距、弱色（英文大写）
+  .ant-menu-item-group-title {
+    padding: 18px 20px 6px;
+
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    line-height: 1.4;
+    text-transform: uppercase;
+
+    color: var(--cf-text-3);
+  }
+
+  // 分组内的项左对齐缩进更克制（贴近 CF）
+  .ant-menu-item-group-list .ant-menu-item {
+    padding-left: 20px !important;
+  }
+}
+
+// ===== Cloudflare 风格：表格 =====
+.ant-table-wrapper {
+  .ant-table {
+    // 表头更细的字重与字间距
+    .ant-table-thead > tr > th {
+      font-weight: 600;
+      font-size: 13px;
+    }
+
+    // 去掉单元格右侧默认竖分割线（CF 表格只保留横线）
+    .ant-table-thead > tr > th::before {
+      display: none !important;
+    }
+  }
+}
+
+// ===== Cloudflare 风格：Tag 走描边轻底 =====
+.ant-tag {
+  border-radius: 6px;
+}
+
+.ant-notification {
+  top: 50px !important;
+
+  .ant-notification-notice-with-icon {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    .ant-notification-notice-message {
+      margin-bottom: 0px !important;
+    }
+
+    .ant-notification-notice-description {
+      &:empty {
+        display: none;
+      }
+    }
+  }
+}
+
+.ant-tabs {
+  display: flex;
+  flex-direction: column;
+
+  .ant-tabs-content-holder {
+    flex: 1;
+
+    min-height: 0px;
+
+    .ant-tabs-content {
+      height: 100%;
+
+      .ant-tabs-tabpane {
+        height: 100%;
+      }
+    }
+  }
+}

package/lib/styles/utils.less

@@ -0,0 +1,88 @@
+/* =========================================================
+ * utils.less
+ * Design: 1366 x 768
+ * Rule:   x/width -> vw, y/height -> vh
+ * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
+ *
+ * Usage:
+ *   .banner {
+ *     .vh(239);          // => @vh
+ *     background-size: 100% @vh;
+ *   }
+ *
+ *   .box {
+ *     .vw(600); width: @vw;
+ *     .vh(300); height: @vh;
+ *   }
+ * ========================================================= */
+
+@design-w: 1366;
+@design-h: 768;
+
+/* -------------------------
+ * vw (width/x-axis)
+ * ------------------------- */
+.vw(@px) {
+  @vw: calc((@px / @design-w) * 100vw);
+}
+
+.vw2(@a; @b) {
+  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
+}
+
+.vw3(@a; @b; @c) {
+  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
+    calc((@c / @design-w) * 100vw);
+}
+
+.vw4(@t; @r; @b; @l) {
+  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
+    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
+}
+
+/* -------------------------
+ * vh (height/y-axis)
+ * ------------------------- */
+.vh(@px) {
+  @vh: calc((@px / @design-h) * 100vh);
+}
+
+.vh2(@a; @b) {
+  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
+}
+
+.vh3(@a; @b; @c) {
+  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
+    calc((@c / @design-h) * 100vh);
+}
+
+.vh4(@t; @r; @b; @l) {
+  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
+    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
+}
+
+/* =========================================================
+ * Examples (delete if you want)
+ * ========================================================= */
+/*
+.banner {
+  .vh(239);
+  background-size: 100% @vh;
+}
+
+.card {
+  .vw4(24; 32; 24; 32);
+  padding: @vw4;
+
+  .vh(16);
+  border-radius: @vh;
+}
+
+.modal {
+  .vw(600); width: @vw;
+  .vh(400); height: @vh;
+
+  .vh(50);
+  transform: translateY(@vh);
+}
+*/

package/lib/styles/variables.global.less

@@ -0,0 +1 @@
+

package/lib/typings.d.ts

@@ -0,0 +1,42 @@
+// 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
+// 仅提供类型，不影响运行时行为。
+
+// CSS / Less Modules
+declare module "*.module.less" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module "*.less" {
+  const content: string;
+  export default content;
+}
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+// 静态资源
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}

package/lib/utils/cssSupports.d.ts

@@ -0,0 +1,2 @@
+export declare const supportsHasSelector: () => boolean;
+export declare const isLegacyHasSelectorBrowser: () => boolean;

package/lib/utils/cssSupports.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.supportsHasSelector = exports.isLegacyHasSelectorBrowser = void 0;
+let cachedHasSelectorSupport;
+const supportsHasSelector = () => {
+  if (typeof cachedHasSelectorSupport === "boolean") {
+    return cachedHasSelectorSupport;
+  }
+  if (typeof window === "undefined" || typeof CSS === "undefined" || typeof CSS.supports !== "function") {
+    cachedHasSelectorSupport = false;
+    return cachedHasSelectorSupport;
+  }
+  try {
+    cachedHasSelectorSupport = CSS.supports("selector(:has(*))");
+  } catch {
+    cachedHasSelectorSupport = false;
+  }
+  return cachedHasSelectorSupport;
+};
+exports.supportsHasSelector = supportsHasSelector;
+const isLegacyHasSelectorBrowser = () => {
+  return !supportsHasSelector();
+};
+exports.isLegacyHasSelectorBrowser = isLegacyHasSelectorBrowser;

package/lib/utils/getUUID.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 生成 UUID v4
+ */
+export declare const getUUID: () => string;

package/lib/utils/getUUID.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUUID = void 0;
+/**
+ * 生成 UUID v4
+ */
+const getUUID = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 0x3 | 0x8;
+    return v.toString(16);
+  });
+};
+exports.getUUID = getUUID;

package/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getUUID } from "./getUUID";
+export { supportsHasSelector, isLegacyHasSelectorBrowser, } from "./cssSupports";

package/lib/utils/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getUUID", {
+  enumerable: true,
+  get: function () {
+    return _getUUID.getUUID;
+  }
+});
+Object.defineProperty(exports, "isLegacyHasSelectorBrowser", {
+  enumerable: true,
+  get: function () {
+    return _cssSupports.isLegacyHasSelectorBrowser;
+  }
+});
+Object.defineProperty(exports, "supportsHasSelector", {
+  enumerable: true,
+  get: function () {
+    return _cssSupports.supportsHasSelector;
+  }
+});
+var _getUUID = require("./getUUID");
+var _cssSupports = require("./cssSupports");

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@hsu-react/ui",
+  "version": "0.0.1",
+  "description": "一套基于 React + Ant Design 的中后台业务组件库",
+  "license": "MIT",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "keywords": [
+    "react",
+    "antd",
+    "ant-design",
+    "components",
+    "ui",
+    "admin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VitaTsui/hsu-ui.git"
+  },
+  "homepage": "https://github.com/VitaTsui/hsu-ui#readme",
+  "bugs": {
+    "url": "https://github.com/VitaTsui/hsu-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "es",
+    "lib",
+    "src"
+  ],
+  "sideEffects": [
+    "*.less",
+    "*.css",
+    "*.png",
+    "*.svg"
+  ],
+  "scripts": {
+    "dev": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:preview": "dumi preview",
+    "build": "father build",
+    "prepublishOnly": "father build"
+  },
+  "dependencies": {
+    "@ant-design/x": "^2.0.1",
+    "@antv/g": "^6.1.21",
+    "@antv/g6": "4.8.24",
+    "@antv/g6-plugin": "0.8.24",
+    "@chakra-ui/react": "^3.30.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "^6.9.1",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3",
+    "@dnd-kit/accessibility": "^3.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@hsu-react/single-router": "^0.0.24",
+    "@iconify/json": "^2.2.385",
+    "@iconify/react": "^5.0.1",
+    "@uiw/codemirror-theme-vscode": "^4.25.1",
+    "@uiw/react-codemirror": "^4.25.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-react": "^1.0.6",
+    "ahooks": "^3.7.11",
+    "axios": "^1.7.1",
+    "bson": "5.5.1",
+    "classnames": "^2.5.1",
+    "comment-json": "^4.2.5",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.1",
+    "echarts-gl": "^2.0.9",
+    "highlight.js": "^11.11.1",
+    "hsu-utils": "^0.0.54",
+    "js-cookie": "^3.0.5",
+    "katex": "^0.17.0",
+    "lodash": "^4.17.21",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "mermaid": "^11.15.0",
+    "mongodb-query-parser": "^4.6.0",
+    "node-sql-parser": "^5.3.12",
+    "rc-field-form": "^2.7.0",
+    "rc-picker": "^4.11.3",
+    "rc-select": "^14.15.1",
+    "rc-tree-select": "^5.27.0",
+    "rc-upload": "^4.8.1",
+    "react-activation": "^0.13.4",
+    "react-markdown": "^9.0.1",
+    "react-markdown-editor-lite": "^1.3.4",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "turndown": "^7.2.0",
+    "web-storage-cache": "^1.1.1",
+    "x-data-spreadsheet": "^1.1.9",
+    "xlsx": "^0.18.5",
+    "zrender": "^5.6.1",
+    "zxcvbn": "^4.4.2"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": ">=5",
+    "antd": ">=5",
+    "mobx": ">=6",
+    "mobx-react-lite": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.4",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-link-attributes": "^3.0.5",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/turndown": "^5.0.5",
+    "@types/zxcvbn": "^4.4.4",
+    "antd": "5.24.3",
+    "dumi": "^2.4.0",
+    "father": "^4.5.0",
+    "less": "^4.2.0",
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5"
+  }
+}

package/src/components/Button/ChakraButton/index.module.less

@@ -0,0 +1,20 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 4px;
+
+  height: 32px;
+  padding: 0px 12px;
+
+  font-size: 14px;
+  font-weight: normal;
+
+  .icon {
+    font-size: 16px;
+
+    svg {
+      width: max-content;
+      height: max-content;
+    }
+  }
+}