jgy-public-component 0.0.22 → 0.0.23

package/README.md

@@ -47,9 +47,121 @@ import 'jgy-public-component/dist/style.css'
 | JUploadImg | 图片上传 |
 | JSidebar / JSideMenuItem | 侧边栏菜单 |
 | JAdminLayout | 后台布局 |
-| JProductDetailDialog / JSkuLink | 产品详情 / SKU 链接 |
+| JProductDetailDialog / JSkuLink | 产品详情 / SKU 链接（需注入 request） |
 | JIconRender | 图标渲染 |
 
+### JSkuLink + JProductDetailDialog（点击 SKU 弹产品详情）
+
+列表场景：**多行 `JSkuLink` + 页面底部一个 `JProductDetailDialog`**，不要每行挂一个弹窗。
+
+#### 1. 入口注入 request（推荐，全项目一次）
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import request from '@/api'
+import JgyComponents, { provideProductRequest } from 'jgy-public-component'
+import 'jgy-public-component/dist/style.css'
+
+const app = createApp(App)
+app.use(JgyComponents)
+
+// 把项目统一的 axios 封装注入给产品详情组件
+provideProductRequest(app, (config) => request(config))
+
+app.mount('#app')
+```
+
+#### 2. 页面用法
+
+```vue
+<template>
+  <!-- 表格里：只放链接 -->
+  <JSkuLink :code="row.sku" @open="openProductDetailDialog" />
+
+  <!-- 页面底部：只挂一个弹窗 -->
+  <JProductDetailDialog
+    v-model:visible="productDetailDialogVisible"
+    :code="productDetailDialogCode"
+    type="sku"
+  />
+  <!-- 若未在 main.ts provide，需额外传 :request="request" -->
+</template>
+
+<script setup lang="ts">
+import {
+  JSkuLink,
+  JProductDetailDialog,
+  useProductDetailDialog,
+} from 'jgy-public-component'
+
+const {
+  productDetailDialogVisible,
+  productDetailDialogCode,
+  openProductDetailDialog,
+} = useProductDetailDialog()
+</script>
+```
+
+#### 3. 单页传入 request（不全局 provide 时）
+
+```vue
+<script setup lang="ts">
+import request from '@/api'
+import { JProductDetailDialog, JSkuLink, useProductDetailDialog } from 'jgy-public-component'
+// ...
+</script>
+
+<template>
+  <JSkuLink :code="row.sku" @open="openProductDetailDialog" />
+  <JProductDetailDialog
+    v-model:visible="productDetailDialogVisible"
+    :code="productDetailDialogCode"
+    type="sku"
+    :request="request"
+  />
+</template>
+```
+
+#### 4. Props / 事件
+
+**JSkuLink**
+
+| 属性 | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| code | `string \| null` | - | SKU/编码 |
+| emptyText | `string` | `'-'` | 无编码时展示 |
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| open | `(code: string)` | 有编码且点击时触发 |
+
+**JProductDetailDialog**
+
+| 属性 | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| visible / v-model:visible | `boolean` | `false` | 显隐 |
+| code | `string` | `''` | sku_code / spu_code |
+| type | `'sku' \| 'spu'` | `'sku'` | 详情接口类型 |
+| id | `number \| string` | - | 可选行 id |
+| request | `JProductRequestFn` | - | 可选；未传则用全局 provide |
+
+**主题色（可选）**
+
+```css
+:root {
+  --j-sku-link-color: #409eff;
+}
+```
+
+#### 5. 宿主前置条件
+
+1. 已安装 `element-plus`（peerDependency）
+2. vite 已代理 `/bis-app` 到后端
+3. 后端具备同一套 bis 产品详情接口（`/bis-app/comm/sku/doDetail` 等）
+4. `request` 返回体已被拦截器解包为 `{ code, data, msg }`
+
 ### JSearchInputDialog 快速示例
 
 ```vue

package/dist/components/JProductDetail/JProductDetailDialog.d.ts

@@ -1,4 +1,4 @@
-import { JProductDetailDialogProps } from './types';
+import { JProductRequestFn, JProductDetailDialogProps } from './types';
 import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
 
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<JProductDetailDialogProps>, {
@@ -6,6 +6,7 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
     code: string;
     type: string;
     id: undefined;
+    request: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:visible": (args_0: boolean) => void;
 }, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<JProductDetailDialogProps>, {
@@ -13,6 +14,7 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
     code: string;
     type: string;
     id: undefined;
+    request: undefined;
 }>>> & Readonly<{
     "onUpdate:visible"?: ((args_0: boolean) => any) | undefined;
 }>, {
@@ -20,6 +22,7 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
     id: number | string;
     code: string;
     visible: boolean;
+    request: JProductRequestFn;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/JProductDetail/index.d.ts

@@ -1,4 +1,5 @@
 export { default as JProductDetailDialog } from './JProductDetailDialog';
 export { default as JSkuLink } from './JSkuLink';
 export { useProductDetailDialog } from './useProductDetailDialog';
+export { provideProductRequest, resolveProductRequest, useInjectedProductRequest, J_PRODUCT_REQUEST_KEY, } from './request';
 export type { JProductDetailDialogProps, JSkuLinkProps, JProductRequestFn, JProductRequestConfig, } from './types';

package/dist/components/JProductDetail/request.d.ts

@@ -0,0 +1,28 @@
+import { App, InjectionKey } from 'vue';
+import { JProductRequestFn } from './types';
+
+/** provide/inject 用的 key，业务方一般无需直接使用 */
+export declare const J_PRODUCT_REQUEST_KEY: InjectionKey<JProductRequestFn>;
+/**
+ * 在应用入口注入 request（推荐，全项目只需一次）。
+ *
+ * @example
+ * ```ts
+ * import { createApp } from 'vue'
+ * import request from '@/api'
+ * import { provideProductRequest } from 'jgy-public-component'
+ *
+ * const app = createApp(App)
+ * provideProductRequest(app, (config) => request(config))
+ * ```
+ */
+export declare function provideProductRequest(app: App, request: JProductRequestFn): void;
+/**
+ * 在 setup 中读取全局注入的 request（必须在 setup 同步阶段调用 inject）。
+ */
+export declare function useInjectedProductRequest(): JProductRequestFn | null;
+/**
+ * 解析最终 request：prop 优先，否则用全局 provide。
+ * 可在 setup 外调用，但需把 setup 阶段拿到的 injected 传进来。
+ */
+export declare function resolveProductRequest(propRequest?: JProductRequestFn | null, injectedRequest?: JProductRequestFn | null): JProductRequestFn;

package/dist/components/JProductDetail/types.d.ts

@@ -1,10 +1,14 @@
 /**
  * JProductDetail 相关类型
  *
- * 该组件依赖宿主项目注入 request 函数(各 *_front 项目 `@/api` 的默认导出),
+ * 该组件依赖宿主项目注入 request 函数（各 *_front 项目 `@/api` 的默认导出），
  * 组件内部不直接依赖任何具体项目的 request 封装。
+ *
+ * 注入方式二选一（推荐 1）：
+ * 1. main.ts: provideProductRequest(app, request)
+ * 2. 组件 prop: <JProductDetailDialog :request="request" ... />
  */
-/** request 请求配置(与各项目 axios 实例调用签名对齐) */
+/** request 请求配置（与各项目 axios 实例调用签名对齐） */
 export interface JProductRequestConfig {
     url: string;
     method?: string;
@@ -14,24 +18,28 @@ export interface JProductRequestConfig {
 }
 /**
  * 注入式 request 函数类型。
- * 传入 `@/api` 的默认导出即可:`(config) => Promise<res>`,
- * 其中 res 已被拦截器解包为后端返回体(含 code/data/msg)。
+ * 传入 `@/api` 的默认导出即可：`(config) => Promise<res>`，
+ * 其中 res 已被拦截器解包为后端返回体（含 code/data/msg）。
  */
 export type JProductRequestFn = (config: JProductRequestConfig) => Promise<any>;
 export interface JProductDetailDialogProps {
-    /** 弹窗显隐,配合 v-model:visible 使用 */
+    /** 弹窗显隐，配合 v-model:visible 使用 */
     visible?: boolean;
-    /** sku_code 或 spu_code,弹窗打开时自动请求详情 */
+    /** sku_code 或 spu_code，弹窗打开时自动请求详情 */
     code?: string;
-    /** sku 走 /sku/doDetail,spu 走 /spu/doDetail */
+    /** sku 走 /sku/doDetail，spu 走 /spu/doDetail */
     type?: 'sku' | 'spu';
-    /** 行 id,可选 */
+    /** 行 id，可选 */
     id?: number | string;
-    /** 注入的 request 函数(必传),传入宿主 `@/api` 默认导出 */
-    request: JProductRequestFn;
+    /**
+     * request 函数。可选：
+     * - 未传时使用 provideProductRequest 注入的全局 request
+     * - 传入时优先使用 prop（便于单页覆盖）
+     */
+    request?: JProductRequestFn;
 }
 export interface JSkuLinkProps {
-    /** 编码,有值时渲染为可点击链接 */
+    /** 编码，有值时渲染为可点击链接 */
     code?: string | null;
     /** 无编码时展示的占位文本 */
     emptyText?: string;

package/dist/components/JProductDetail/useProductDetailDialog.d.ts

@@ -1,13 +1,26 @@
 import { Ref } from 'vue';
 /**
- * 产品详情弹窗状态管理。
+ * 产品详情弹窗状态管理（页面级：多个 JSkuLink 共用一个 Dialog）。
  *
- * 用法:
- *   const { productDetailDialogVisible, productDetailDialogCode, openProductDetailDialog }
- *     = useProductDetailDialog()
- *   // <JSkuLink :code="row.sku_code" @open="openProductDetailDialog" />
- *   // <JProductDetailDialog v-model:visible="productDetailDialogVisible"
- *   //   :code="productDetailDialogCode" :request="request" />
+ * @example
+ * ```ts
+ * const {
+ *   productDetailDialogVisible,
+ *   productDetailDialogCode,
+ *   openProductDetailDialog,
+ * } = useProductDetailDialog()
+ * ```
+ *
+ * ```vue
+ * <JSkuLink :code="row.sku" @open="openProductDetailDialog" />
+ * <JProductDetailDialog
+ *   v-model:visible="productDetailDialogVisible"
+ *   :code="productDetailDialogCode"
+ *   type="sku"
+ * />
+ * ```
+ *
+ * 注意：列表中每行只用 JSkuLink，Dialog 放页面底部只挂一次，不要每行一个 Dialog。
  */
 export declare function useProductDetailDialog(): {
     productDetailDialogVisible: Ref<boolean, boolean>;

package/dist/index.d.ts

@@ -14,7 +14,7 @@ declare const _default: {
 };
 export default _default;
 export { JButton, JUploadImg, JIconRender, JSearchHeader, JImportExcel, JSidebar, JSideMenuItem, JAdminLayout, JProductDetailDialog, JSkuLink, JSearchInputDialog, };
-export { useProductDetailDialog } from './components/JProductDetail';
+export { useProductDetailDialog, provideProductRequest, resolveProductRequest, useInjectedProductRequest, J_PRODUCT_REQUEST_KEY, } from './components/JProductDetail';
 export { toSnakeCase, toCamelCase, pick, omit, deepClone, filterEmpty, flatten, unflatten, toTableColumns } from './utils';
 export { createRouterGuard, buildRouteTree, transformBackendRoutes, findFirstAllowedRoute, getComponentImport } from './router';
 export type { BackendRoute, RouteStoreAdapter, PermissionStoreAdapter, UserStoreAdapter, RouterGuardOptions } from './router';
@@ -25,5 +25,5 @@ export type { JSearchHeaderProps } from './components/JSearchHeader';
 export type { JImportExcelProps, ApiFn } from './components/JImportExcel';
 export type { SidebarMenuItem, JSidebarProps, JSideMenuItemProps } from './components/JSidebar';
 export type { AdminLayoutMenuItem, JAdminLayoutProps } from './components/JAdminLayout';
-export type { JProductDetailDialogProps, JSkuLinkProps, JProductRequestFn, JProductRequestConfig } from './components/JProductDetail';
+export type { JProductDetailDialogProps, JSkuLinkProps, JProductRequestFn, JProductRequestConfig, } from './components/JProductDetail';
 export type { JSearchInputDialogProps, SearchInputOption, SearchInputModel, } from './components/JSearchInputDialog';