jgy-public-component 0.0.21 → 0.0.23

package/README.md

@@ -41,6 +41,160 @@ import 'jgy-public-component/dist/style.css'
 | 组件名 | 说明 |
 |--------|------|
 | JButton | 按钮 |
+| JSearchHeader | 搜索头部 |
+| JImportExcel | Excel 导入 |
+| JSearchInputDialog | 关键词搜索（类型下拉 + 输入 + 批量弹窗） |
+| JUploadImg | 图片上传 |
+| JSidebar / JSideMenuItem | 侧边栏菜单 |
+| JAdminLayout | 后台布局 |
+| 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
+<template>
+  <JSearchInputDialog
+    v-model:type="filters.keywordType"
+    v-model:keyword="filters.keyword"
+    :options="[
+      { label: 'SKU', value: 'sku' },
+      { label: '品名', value: 'product_name' },
+    ]"
+    @confirm="handleSearch"
+    @search="handleSearch"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { JSearchInputDialog } from 'jgy-public-component'
+
+const filters = reactive({
+  keywordType: 'sku',
+  keyword: '',
+})
+
+const handleSearch = () => {
+  const params: Record<string, any> = {}
+  if (filters.keyword) {
+    params[filters.keywordType] = filters.keyword // { sku: 'sku1,sku2' }
+  }
+}
+</script>
+```
 
 ## 本地开发
 

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

@@ -0,0 +1,44 @@
+import { JProductRequestFn, JProductDetailDialogProps } from './types';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<JProductDetailDialogProps>, {
+    visible: boolean;
+    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>, {
+    visible: boolean;
+    code: string;
+    type: string;
+    id: undefined;
+    request: undefined;
+}>>> & Readonly<{
+    "onUpdate:visible"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    type: "sku" | "spu";
+    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;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: 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];
+} & {};

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

@@ -0,0 +1,36 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    code?: string | null;
+    emptyText?: string;
+}>, {
+    emptyText: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    open: (code: string) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    code?: string | null;
+    emptyText?: string;
+}>, {
+    emptyText: string;
+}>>> & Readonly<{
+    onOpen?: ((code: string) => any) | undefined;
+}>, {
+    emptyText: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+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: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: 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];
+} & {};

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

@@ -0,0 +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

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

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

@@ -0,0 +1,29 @@
+import { Ref } from 'vue';
+/**
+ * 产品详情弹窗状态管理（页面级：多个 JSkuLink 共用一个 Dialog）。
+ *
+ * @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>;
+    productDetailDialogCode: Ref<string, string>;
+    openProductDetailDialog: (code: string) => void;
+};

package/dist/components/JSearchInputDialog/JSearchInputDialog.d.ts

@@ -0,0 +1,112 @@
+import { SearchInputModel, SearchInputOption } from './types';
+import { DefineComponent, ExtractPropTypes, PropType, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+
+declare const _default: DefineComponent<ExtractPropTypes<{
+    type: PropType<string>;
+    keyword: PropType<string>;
+    width: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<SearchInputOption[]>;
+        default: () => never[];
+    };
+    selectWidth: {
+        type: PropType<string>;
+        default: string;
+    };
+    separator: {
+        type: PropType<string>;
+        default: string;
+    };
+    dialogTitle: {
+        type: PropType<string>;
+        default: string;
+    };
+    dialogWidth: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    rows: {
+        type: PropType<number>;
+        default: number;
+    };
+    textareaPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    clearOnTypeChange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>, {
+    reset: (defaultType?: string) => void;
+    toParams: () => Record<string, string>;
+    openDialog: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    search: () => void;
+    confirm: (payload: SearchInputModel) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    type: PropType<string>;
+    keyword: PropType<string>;
+    width: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<SearchInputOption[]>;
+        default: () => never[];
+    };
+    selectWidth: {
+        type: PropType<string>;
+        default: string;
+    };
+    separator: {
+        type: PropType<string>;
+        default: string;
+    };
+    dialogTitle: {
+        type: PropType<string>;
+        default: string;
+    };
+    dialogWidth: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    rows: {
+        type: PropType<number>;
+        default: number;
+    };
+    textareaPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    clearOnTypeChange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSearch?: (() => any) | undefined;
+    onConfirm?: ((payload: SearchInputModel) => any) | undefined;
+}>, {
+    width: string;
+    placeholder: string;
+    options: SearchInputOption[];
+    selectWidth: string;
+    separator: string;
+    dialogTitle: string;
+    dialogWidth: string | number;
+    rows: number;
+    textareaPlaceholder: string;
+    clearOnTypeChange: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as JSearchInputDialog } from './JSearchInputDialog';
+export type { JSearchInputDialogProps, SearchInputOption, SearchInputModel, } from './types';

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

@@ -0,0 +1,33 @@
+/** 下拉选项：label 展示文案，value 作为请求字段 key / 类型标识 */
+export interface SearchInputOption {
+    label: string;
+    value: string;
+}
+/** 组件当前选中状态快照（confirm 事件会带上） */
+export interface SearchInputModel {
+    type: string;
+    keyword: string;
+}
+/** JSearchInputDialog Props */
+export interface JSearchInputDialogProps {
+    /** 前置类型选项，如 [{ label: 'SKU', value: 'sku' }, { label: '品名', value: 'product_name' }] */
+    options?: SearchInputOption[];
+    /** 主输入框占位文案 */
+    placeholder?: string;
+    /** 组件整体宽度 */
+    width?: string;
+    /** 左侧类型下拉宽度 */
+    selectWidth?: string;
+    /** 多值拼接分隔符；textarea 确定后用它合并，默认 ',' */
+    separator?: string;
+    /** 弹窗标题；不传则自动生成「批量输入{当前类型 label}」 */
+    dialogTitle?: string;
+    /** 批量输入弹窗宽度 */
+    dialogWidth?: string | number;
+    /** textarea 默认行数 */
+    rows?: number;
+    /** textarea 占位提示 */
+    textareaPlaceholder?: string;
+    /** 切换左侧类型时是否清空 keyword，默认 false */
+    clearOnTypeChange?: boolean;
+}

package/dist/index.d.ts

@@ -6,12 +6,15 @@ import { JSearchHeader } from './components/JSearchHeader';
 import { JImportExcel } from './components/JImportExcel';
 import { JSidebar, JSideMenuItem } from './components/JSidebar';
 import { JAdminLayout } from './components/JAdminLayout';
+import { JProductDetailDialog, JSkuLink } from './components/JProductDetail';
+import { JSearchInputDialog } from './components/JSearchInputDialog';
 
 declare const _default: {
     install: (app: App) => void;
 };
 export default _default;
-export { JButton, JUploadImg, JIconRender, JSearchHeader, JImportExcel, JSidebar, JSideMenuItem, JAdminLayout };
+export { JButton, JUploadImg, JIconRender, JSearchHeader, JImportExcel, JSidebar, JSideMenuItem, JAdminLayout, JProductDetailDialog, JSkuLink, JSearchInputDialog, };
+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';
@@ -22,3 +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 { JSearchInputDialogProps, SearchInputOption, SearchInputModel, } from './components/JSearchInputDialog';