jgy-public-component 0.0.21 → 0.0.22

package/README.md

@@ -41,6 +41,48 @@ import 'jgy-public-component/dist/style.css'
 | 组件名 | 说明 |
 |--------|------|
 | JButton | 按钮 |
+| JSearchHeader | 搜索头部 |
+| JImportExcel | Excel 导入 |
+| JSearchInputDialog | 关键词搜索（类型下拉 + 输入 + 批量弹窗） |
+| JUploadImg | 图片上传 |
+| JSidebar / JSideMenuItem | 侧边栏菜单 |
+| JAdminLayout | 后台布局 |
+| JProductDetailDialog / JSkuLink | 产品详情 / SKU 链接 |
+| JIconRender | 图标渲染 |
+
+### 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,41 @@
+import { 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;
+}>>, {}, {}, {}, {}, 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;
+}>>> & Readonly<{
+    "onUpdate:visible"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    type: "sku" | "spu";
+    id: number | string;
+    code: string;
+    visible: boolean;
+}, {}, {}, {}, 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,4 @@
+export { default as JProductDetailDialog } from './JProductDetailDialog';
+export { default as JSkuLink } from './JSkuLink';
+export { useProductDetailDialog } from './useProductDetailDialog';
+export type { JProductDetailDialogProps, JSkuLinkProps, JProductRequestFn, JProductRequestConfig, } from './types';

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

@@ -0,0 +1,38 @@
+/**
+ * JProductDetail 相关类型
+ *
+ * 该组件依赖宿主项目注入 request 函数(各 *_front 项目 `@/api` 的默认导出),
+ * 组件内部不直接依赖任何具体项目的 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 函数(必传),传入宿主 `@/api` 默认导出 */
+    request: JProductRequestFn;
+}
+export interface JSkuLinkProps {
+    /** 编码,有值时渲染为可点击链接 */
+    code?: string | null;
+    /** 无编码时展示的占位文本 */
+    emptyText?: string;
+}

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

@@ -0,0 +1,16 @@
+import { Ref } from 'vue';
+/**
+ * 产品详情弹窗状态管理。
+ *
+ * 用法:
+ *   const { productDetailDialogVisible, productDetailDialogCode, openProductDetailDialog }
+ *     = useProductDetailDialog()
+ *   // <JSkuLink :code="row.sku_code" @open="openProductDetailDialog" />
+ *   // <JProductDetailDialog v-model:visible="productDetailDialogVisible"
+ *   //   :code="productDetailDialogCode" :request="request" />
+ */
+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 } 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';