rhjy-ui 0.1.0 → 0.2.1

package/dist/responsive-info-grid/RhResponsiveInfoGridItem.vue.d.ts

@@ -0,0 +1,49 @@
+declare function __VLS_template(): {
+    title?(_: {}): any;
+    content?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    content?: string | number;
+    span?: number;
+}>, {
+    title: string;
+    content: string;
+    span: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    content?: string | number;
+    span?: number;
+}>, {
+    title: string;
+    content: string;
+    span: number;
+}>>> & Readonly<{}>, {
+    span: number;
+    title: string;
+    content: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/responsive-info-grid/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("../_plugin-vue_export-helper-f246444f.cjs"),i=e.defineComponent({__name:"RhResponsiveInfoGrid",props:{columns:{default:4},tabletColumns:{default:2},mobileColumns:{default:1},gap:{default:"15px 15px"}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:"responsive-info-grid",style:e.normalizeStyle({"--responsive-info-grid-columns":String(t.columns),"--responsive-info-grid-tablet-columns":String(t.tabletColumns),"--responsive-info-grid-mobile-columns":String(t.mobileColumns),"--responsive-info-grid-gap":t.gap})},[e.renderSlot(n.$slots,"default",{},void 0,!0)],4))}});const l=o._export_sfc(i,[["__scopeId","data-v-85b5413b"]]),r={class:"responsive-info-grid-item__title"},d={class:"responsive-info-grid-item__content"},a=e.defineComponent({__name:"RhResponsiveInfoGridItem",props:{title:{default:""},content:{default:""},span:{default:1}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:"responsive-info-grid-item",style:e.normalizeStyle({gridColumn:t.span>1?`span ${t.span}`:void 0})},[e.createElementVNode("div",r,[e.renderSlot(n.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)]),e.createElementVNode("div",d,[e.renderSlot(n.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)],!0)])],4))}});const c=o._export_sfc(a,[["__scopeId","data-v-67645283"]]);exports.RhResponsiveInfoGrid=l;exports.RhResponsiveInfoGridItem=c;

package/dist/responsive-info-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RhResponsiveInfoGrid } from './RhResponsiveInfoGrid.vue';
+export { default as RhResponsiveInfoGridItem } from './RhResponsiveInfoGridItem.vue';

package/dist/responsive-info-grid/index.js

@@ -0,0 +1,54 @@
+import { defineComponent as l, openBlock as r, createElementBlock as d, normalizeStyle as a, renderSlot as n, createElementVNode as o, createTextVNode as s, toDisplayString as i } from "vue";
+import { _ as c } from "../_plugin-vue_export-helper-dad06003.js";
+const u = /* @__PURE__ */ l({
+  __name: "RhResponsiveInfoGrid",
+  props: {
+    columns: { default: 4 },
+    tabletColumns: { default: 2 },
+    mobileColumns: { default: 1 },
+    gap: { default: "15px 15px" }
+  },
+  setup(e) {
+    return (t, m) => (r(), d("div", {
+      class: "responsive-info-grid",
+      style: a({
+        "--responsive-info-grid-columns": String(e.columns),
+        "--responsive-info-grid-tablet-columns": String(e.tabletColumns),
+        "--responsive-info-grid-mobile-columns": String(e.mobileColumns),
+        "--responsive-info-grid-gap": e.gap
+      })
+    }, [
+      n(t.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+});
+const R = /* @__PURE__ */ c(u, [["__scopeId", "data-v-85b5413b"]]), p = { class: "responsive-info-grid-item__title" }, _ = { class: "responsive-info-grid-item__content" }, f = /* @__PURE__ */ l({
+  __name: "RhResponsiveInfoGridItem",
+  props: {
+    title: { default: "" },
+    content: { default: "" },
+    span: { default: 1 }
+  },
+  setup(e) {
+    return (t, m) => (r(), d("div", {
+      class: "responsive-info-grid-item",
+      style: a({ gridColumn: e.span > 1 ? `span ${e.span}` : void 0 })
+    }, [
+      o("div", p, [
+        n(t.$slots, "title", {}, () => [
+          s(i(e.title), 1)
+        ], !0)
+      ]),
+      o("div", _, [
+        n(t.$slots, "content", {}, () => [
+          s(i(e.content), 1)
+        ], !0)
+      ])
+    ], 4));
+  }
+});
+const I = /* @__PURE__ */ c(f, [["__scopeId", "data-v-67645283"]]);
+export {
+  R as RhResponsiveInfoGrid,
+  I as RhResponsiveInfoGridItem
+};

package/dist/style.css

@@ -1 +1 @@
-:root{--rh-ui-data-center-primary: #00828a;--rh-ui-data-center-primary-soft: #cfe8ea;--rh-ui-data-center-panel-width: 606px;--rh-ui-data-center-panel-height: 500px;--rh-ui-data-center-text: #333;--rh-ui-data-center-secondary-text: #999;--rh-ui-data-center-border: #e9e9e9}.rh-data-center-panel{width:var(--rh-ui-data-center-panel-width);height:var(--rh-ui-data-center-panel-height);display:flex;overflow:hidden;box-sizing:border-box;background:#fff;border:1px solid var(--rh-ui-data-center-border);border-radius:8px;box-shadow:0 12px 32px #0f172a29}.rh-data-center-panel__sidebar{width:124px;flex:0 0 124px;box-sizing:border-box;padding:16px 10px;border-right:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__main{min-width:0;flex:1;padding:16px 0 10px 15px}.rh-data-center-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0 10px 15px 0;color:var(--rh-ui-data-center-text);font-size:16px;font-weight:600}.rh-data-center-panel__category{width:104px;min-height:32px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:10px 0;padding:0 10px;border-radius:3px;color:#666;cursor:pointer;font-size:14px}.rh-data-center-panel__category.is-active{background:var(--rh-ui-data-center-primary-soft);color:var(--rh-ui-data-center-primary);font-weight:600}.rh-data-center-panel__categoryCount{color:#999;font-size:12px;font-weight:400}.rh-data-center-panel__category.is-active .rh-data-center-panel__categoryCount{color:var(--rh-ui-data-center-primary)}.rh-data-center-panel__scroll{height:calc(100% - 48px);padding-right:10px;overflow-y:auto}.rh-data-center-panel__task{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:84px;margin-bottom:10px;padding:0 10px 10px 0;border-bottom:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__taskMain{min-width:0;flex:1}.rh-data-center-panel__taskTitle{overflow:hidden;color:var(--rh-ui-data-center-text);font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rh-data-center-panel__taskTag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:12px;background:#f5f6f7;color:#999;font-size:12px;line-height:20px;vertical-align:1px}.rh-data-center-panel__progress{width:100%;height:4px;margin:7px 0 5px;overflow:hidden;border-radius:4px;background:#edf0f1}.rh-data-center-panel__progressBar{height:100%;border-radius:inherit;background:var(--rh-ui-data-center-primary);transition:width .3s ease}.rh-data-center-panel__progressBar.is-failed{background:#f04444}.rh-data-center-panel__meta,.rh-data-center-panel__message{color:var(--rh-ui-data-center-secondary-text);font-size:11px;line-height:18px}.rh-data-center-panel__message.is-failed{color:#f04444;font-size:12px}.rh-data-center-panel__actions{flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;min-height:56px;padding-bottom:1px}.rh-data-center-panel__action{padding:0;border:0;background:transparent;color:#008ae6;cursor:pointer;font-size:12px;white-space:nowrap}.rh-data-center-panel__action:disabled{color:#bbb;cursor:not-allowed}.rh-data-center-panel__state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--rh-ui-data-center-secondary-text);font-size:14px}.rh-data-center-panel__retry{border:0;background:transparent;color:var(--rh-ui-data-center-primary);cursor:pointer}.rh-data-center-panel__footer{display:flex;justify-content:space-between;box-sizing:border-box;padding:8px 10px 0 0;color:var(--rh-ui-data-center-secondary-text);font-size:12px}.rh-data-center-tip__content{display:flex;flex-direction:column;align-items:center;color:var(--rh-ui-data-center-text)}.rh-data-center-tip__minutes{color:var(--rh-ui-data-center-primary);font-size:18px}.rh-data-center-tip__description{margin:15px 0 30px;font-size:14px;line-height:22px}.rh-data-center-tip__guide{width:120px;height:56px;position:relative;margin:-20px auto 8px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(0,130,138,.18),transparent 65%)}.rh-data-center-tip__guide:after{content:">";position:absolute;top:0;right:15px;color:var(--rh-ui-data-center-primary);font-size:32px;animation:rh-data-center-guide 1.5s ease-in-out infinite}@keyframes rh-data-center-guide{0%,to{transform:translate(-8px,5px)}50%{transform:translate(0)}}.rh-data-center[data-v-b6caa4d9]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-b6caa4d9]{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:4px;color:var(--rh-ui-data-center-text);cursor:pointer;transition:background-color .2s ease,color .2s ease}.rh-data-center__trigger[data-v-b6caa4d9]:hover,.rh-data-center__trigger.is-active[data-v-b6caa4d9]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-b6caa4d9]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-b6caa4d9]{position:fixed;z-index:3000;box-sizing:border-box}
+:root{--rh-ui-data-center-primary: #00828a;--rh-ui-data-center-primary-soft: #cfe8ea;--rh-ui-data-center-panel-width: 606px;--rh-ui-data-center-panel-height: 500px;--rh-ui-data-center-text: #333;--rh-ui-data-center-secondary-text: #999;--rh-ui-data-center-border: #e9e9e9}.rh-data-center-panel{width:var(--rh-ui-data-center-panel-width);height:var(--rh-ui-data-center-panel-height);display:flex;overflow:hidden;box-sizing:border-box;background:#fff;border:1px solid var(--rh-ui-data-center-border);border-radius:8px;box-shadow:0 12px 32px #0f172a29}.rh-data-center-panel__sidebar{width:124px;flex:0 0 124px;box-sizing:border-box;padding:16px 10px;border-right:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__main{min-width:0;flex:1;padding:16px 0 10px 15px}.rh-data-center-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0 10px 15px 0;color:var(--rh-ui-data-center-text);font-size:16px;font-weight:600}.rh-data-center-panel__category{width:104px;min-height:32px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:10px 0;padding:0 10px;border-radius:3px;color:#666;cursor:pointer;font-size:14px}.rh-data-center-panel__category.is-active{background:var(--rh-ui-data-center-primary-soft);color:var(--rh-ui-data-center-primary);font-weight:600}.rh-data-center-panel__categoryCount{color:#999;font-size:12px;font-weight:400}.rh-data-center-panel__category.is-active .rh-data-center-panel__categoryCount{color:var(--rh-ui-data-center-primary)}.rh-data-center-panel__scroll{height:calc(100% - 48px);padding-right:10px;overflow-y:auto}.rh-data-center-panel__task{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:84px;margin-bottom:10px;padding:0 10px 10px 0;border-bottom:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__taskMain{min-width:0;flex:1}.rh-data-center-panel__taskTitle{overflow:hidden;color:var(--rh-ui-data-center-text);font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rh-data-center-panel__taskTag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:12px;background:#f5f6f7;color:#999;font-size:12px;line-height:20px;vertical-align:1px}.rh-data-center-panel__progress{width:100%;height:4px;margin:7px 0 5px;overflow:hidden;border-radius:4px;background:#edf0f1}.rh-data-center-panel__progressBar{height:100%;border-radius:inherit;background:var(--rh-ui-data-center-primary);transition:width .3s ease}.rh-data-center-panel__progressBar.is-failed{background:#f04444}.rh-data-center-panel__meta,.rh-data-center-panel__message{color:var(--rh-ui-data-center-secondary-text);font-size:11px;line-height:18px}.rh-data-center-panel__message.is-failed{color:#f04444;font-size:12px}.rh-data-center-panel__actions{flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;min-height:56px;padding-bottom:1px}.rh-data-center-panel__action{padding:0;border:0;background:transparent;color:#008ae6;cursor:pointer;font-size:12px;white-space:nowrap}.rh-data-center-panel__action:disabled{color:#bbb;cursor:not-allowed}.rh-data-center-panel__state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--rh-ui-data-center-secondary-text);font-size:14px}.rh-data-center-panel__retry{border:0;background:transparent;color:var(--rh-ui-data-center-primary);cursor:pointer}.rh-data-center-panel__footer{display:flex;justify-content:space-between;box-sizing:border-box;padding:8px 10px 0 0;color:var(--rh-ui-data-center-secondary-text);font-size:12px}.rh-data-center-tip__content{display:flex;flex-direction:column;align-items:center;color:var(--rh-ui-data-center-text)}.rh-data-center-tip__minutes{color:var(--rh-ui-data-center-primary);font-size:18px}.rh-data-center-tip__description{margin:15px 0 30px;font-size:14px;line-height:22px}.rh-data-center-tip__guide{width:120px;height:56px;position:relative;margin:-20px auto 8px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(0,130,138,.18),transparent 65%)}.rh-data-center-tip__guide:after{content:">";position:absolute;top:0;right:15px;color:var(--rh-ui-data-center-primary);font-size:32px;animation:rh-data-center-guide 1.5s ease-in-out infinite}@keyframes rh-data-center-guide{0%,to{transform:translate(-8px,5px)}50%{transform:translate(0)}}.rh-data-center[data-v-94eef479]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-94eef479]{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:4px;color:var(--rh-ui-data-center-text);cursor:pointer;transition:background-color .2s ease,color .2s ease}.rh-data-center__trigger[data-v-94eef479]:hover,.rh-data-center__trigger.is-active[data-v-94eef479]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-94eef479]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-94eef479]{position:fixed;z-index:3000;box-sizing:border-box}.responsive-info-grid[data-v-85b5413b]{display:grid;grid-template-columns:repeat(var(--responsive-info-grid-columns),minmax(0,1fr));gap:var(--responsive-info-grid-gap)}@media (max-width: 1200px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-tablet-columns),minmax(0,1fr))}}@media (max-width: 768px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-mobile-columns),minmax(0,1fr))}}.responsive-info-grid-item[data-v-67645283]{min-width:0;color:#333;font-size:14px;line-height:22px;word-break:break-all;display:flex}.responsive-info-grid-item__title[data-v-67645283]{display:inline-block;color:#777;white-space:nowrap}.responsive-info-grid-item__content[data-v-67645283]{display:inline}@media (max-width: 768px){.responsive-info-grid-item[data-v-67645283]{grid-column:span 1!important}}

package/package.json

@@ -1,47 +1,53 @@
-{
-  "name": "rhjy-ui",
-  "version": "0.1.0",
-  "description": "Vue 3 and Element Plus business UI components",
-  "type": "module",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./data-center": {
-      "types": "./dist/data-center/index.d.ts",
-      "import": "./dist/data-center/index.js",
-      "require": "./dist/data-center/index.cjs"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "package": "vite build",
-    "pack:check": "npm pack --dry-run"
-  },
-  "peerDependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "element-plus": "^2.14.0",
-    "vue": "^3.5.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "sass": "^1.63.6",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^3.8.3"
-  }
-}
+{
+  "name": "rhjy-ui",
+  "version": "0.2.1",
+  "description": "Vue 3 and Element Plus business UI components",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "src/responsive-info-grid/README.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./data-center": {
+      "types": "./dist/data-center/index.d.ts",
+      "import": "./dist/data-center/index.js",
+      "require": "./dist/data-center/index.cjs"
+    },
+    "./responsive-info-grid": {
+      "types": "./dist/responsive-info-grid/index.d.ts",
+      "import": "./dist/responsive-info-grid/index.js",
+      "require": "./dist/responsive-info-grid/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "package": "vite build",
+    "pack:check": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": ">=1.1.4 <3",
+    "element-plus": ">=2.4.0 <3",
+    "vue": ">=3.2.0 <4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "sass": "^1.63.6",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.8.3"
+  }
+}

package/src/responsive-info-grid/README.md

@@ -0,0 +1,137 @@
+# Responsive Info Grid
+
+Responsive Info Grid 用于按响应式网格展示标题与内容组成的信息项，适合详情页、概览卡片和只读表单等场景。组件包含布局容器 `RhResponsiveInfoGrid` 和信息项 `RhResponsiveInfoGridItem`。
+
+请在应用入口引入一次组件库样式：
+
+```ts
+import 'rhjy-ui/style.css'
+```
+
+## 导入方式
+
+从主入口导入：
+
+```ts
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui'
+```
+
+也可以从 Responsive Info Grid 子入口导入：
+
+```ts
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui/responsive-info-grid'
+```
+
+两种方式提供相同的组件，可根据项目的导入规范选择。
+
+## RhResponsiveInfoGrid
+
+`RhResponsiveInfoGrid` 负责定义网格列数和间距。
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `columns` | `number` | `4` | 宽度大于 1200px 时的列数 |
+| `tabletColumns` | `number` | `2` | 宽度不大于 1200px 且大于 768px 时的列数 |
+| `mobileColumns` | `number` | `1` | 宽度不大于 768px 时的列数 |
+| `gap` | `string` | `'15px 15px'` | CSS Grid 的 `gap` 值，可同时设置行间距和列间距 |
+
+### 插槽
+
+| 插槽 | 说明 |
+| --- | --- |
+| `default` | 网格内容，通常放置一个或多个 `RhResponsiveInfoGridItem` |
+
+### 响应式断点
+
+组件根据视口宽度切换列数：
+
+| 视口宽度 | 使用的属性 |
+| --- | --- |
+| 大于 1200px | `columns` |
+| 不大于 1200px 且大于 768px | `tabletColumns` |
+| 不大于 768px | `mobileColumns` |
+
+## RhResponsiveInfoGridItem
+
+`RhResponsiveInfoGridItem` 展示一组标题和内容，并可横跨多列。
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `title` | `string` | `''` | 标题文字；提供 `title` 插槽时作为后备内容 |
+| `content` | `string \| number` | `''` | 内容文字或数字；提供 `content` 插槽时作为后备内容 |
+| `span` | `number` | `1` | 大于 `1` 时横跨指定列数；不大于 `1` 时占一列 |
+
+### 插槽
+
+| 插槽 | 说明 |
+| --- | --- |
+| `title` | 自定义标题区域；未提供时显示 `title` 属性 |
+| `content` | 自定义内容区域；未提供时显示 `content` 属性 |
+
+在视口宽度不大于 768px 时，每个信息项都会强制占一列，`span` 不再横跨多列，以避免移动端内容溢出。
+
+## 基础文字内容
+
+```vue
+<script setup lang="ts">
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui'
+import 'rhjy-ui/style.css'
+</script>
+
+<template>
+  <RhResponsiveInfoGrid :columns="3" :tablet-columns="2" :mobile-columns="1">
+    <RhResponsiveInfoGridItem title="项目名称：" content="智慧园区" />
+    <RhResponsiveInfoGridItem title="负责人：" content="张三" />
+    <RhResponsiveInfoGridItem title="设备数量：" :content="128" />
+    <RhResponsiveInfoGridItem title="项目说明：" content="覆盖园区全部楼栋" :span="2" />
+  </RhResponsiveInfoGrid>
+</template>
+```
+
+## 自定义插槽
+
+```vue
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui/responsive-info-grid'
+import 'rhjy-ui/style.css'
+</script>
+
+<template>
+  <RhResponsiveInfoGrid gap="20px 24px">
+    <RhResponsiveInfoGridItem>
+      <template #title>
+        <strong>运行状态：</strong>
+      </template>
+      <template #content>
+        <ElTag type="success">正常</ElTag>
+      </template>
+    </RhResponsiveInfoGridItem>
+
+    <RhResponsiveInfoGridItem :span="2">
+      <template #title>
+        <strong>最近更新：</strong>
+      </template>
+      <template #content>
+        <time datetime="2026-09-09T10:30:00+08:00">2026-09-09 10:30</time>
+      </template>
+    </RhResponsiveInfoGridItem>
+  </RhResponsiveInfoGrid>
+</template>
+```