@tuoyuan/module-page-select 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,284 @@
+# template-page-select
+
+Vue 3 组件：用于选择业务模块、对应页面，编辑页面自带配置参数，区分移动端和web端，产出配置数据供页面渲染、路由绑定使用。
+
+## 功能特性
+
+- ✅ 模块与页面二级联动选择
+- ✅ 支持模块、页面数据缓存
+- ✅ 基于 JSON Schema 的动态表单渲染
+- ✅ 区分移动端（mobile）和 Web 端（external）
+- ✅ 支持默认值回显
+- ✅ 自定义数据获取方法
+- ✅ 完整的 TypeScript 类型定义
+
+## 安装
+
+```bash
+npm install template-page-select
+```
+
+## 使用
+
+### 全局注册
+
+```javascript
+import { createApp } from 'vue'
+import ModulePageSelect from 'template-page-select'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ModulePageSelect)
+app.mount('#app')
+```
+
+### 局部引入
+
+```vue
+<template>
+  <ModulePageSelect
+    type="mobile"
+    :fetchModules="getModules"
+    :fetchPages="getPages"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script>
+import ModulePageSelect from 'template-page-select'
+
+export default {
+  components: {
+    ModulePageSelect
+  },
+  methods: {
+    async getModules() {
+      // 返回模块列表
+      const res = await fetch('/api/modules')
+      return res.json()
+    },
+    async getPages(moduleId, pageType) {
+      // 返回页面列表
+      const res = await fetch(`/api/pages?moduleId=${moduleId}&type=${pageType}`)
+      return res.json()
+    },
+    handleConfirm(config) {
+      console.log('选中配置:', config)
+      // config 格式：
+      // {
+      //   module_id: "66613bff9aa40000",
+      //   module_name: "操作日志",
+      //   page_id: "6663c53083e40000",
+      //   page_name: "操作日志",
+      //   page_type: 1,
+      //   configJson: {}
+      // }
+    }
+  }
+}
+</script>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| type | 终端类型 | String | mobile / external | mobile |
+| defaultModuleId | 默认模块ID（用于回显） | String | - | '' |
+| defaultPageId | 默认页面ID（用于回显） | String | - | '' |
+| fetchModules | 自定义模块列表获取方法 | Function | - | null |
+| fetchPages | 自定义页面列表获取方法 | Function(moduleId, pageType) | - | null |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| confirm | 确认选择时触发 | config: PageConfig |
+| error | 发生错误时触发 | { type: string, error: Error } |
+
+### 数据格式
+
+#### 模块数据格式
+
+```javascript
+{
+  id: "66613bff9aa40000",
+  name: "操作日志"
+}
+```
+
+#### 页面数据格式
+
+```javascript
+{
+  id: "6663c53083e40000",
+  name: "操作日志",
+  type: 1, // 0: 移动端, 1: Web端
+  options: {
+    // JSON Schema 格式的配置
+    properties: {
+      wechatId: {
+        type: "string",
+        title: "微信ID",
+        description: "请输入微信ID"
+      },
+      groupName: {
+        type: "string",
+        title: "业务分组"
+      }
+    }
+  }
+}
+```
+
+#### 输出配置格式
+
+```javascript
+{
+  module_id: "66613bff9aa40000",
+  module_name: "操作日志",
+  page_id: "6663c53083e40000",
+  page_name: "操作日志",
+  page_type: 1,
+  configJson: {
+    wechatId: "xxx",
+    groupName: "xxx"
+  }
+}
+```
+
+## 使用示例
+
+### 示例 1：基础通用调用
+
+```vue
+<template>
+  <ModulePageSelect
+    type="mobile"
+    :fetchModules="fetchModules"
+    :fetchPages="fetchPages"
+    @confirm="handlePageConfirm"
+  />
+</template>
+
+<script>
+export default {
+  methods: {
+    async fetchModules() {
+      // 实现模块获取逻辑
+      return [
+        { id: '1', name: '模块1' },
+        { id: '2', name: '模块2' }
+      ]
+    },
+    async fetchPages(moduleId, pageType) {
+      // 实现页面获取逻辑
+      return [
+        { 
+          id: '1', 
+          name: '页面1', 
+          type: pageType,
+          options: {
+            properties: {
+              field1: { type: 'string', title: '字段1' }
+            }
+          }
+        }
+      ]
+    },
+    handlePageConfirm(pageConfig) {
+      console.log('选中页面配置', pageConfig)
+    }
+  }
+}
+</script>
+```
+
+### 示例 2：回显已有页面数据
+
+```vue
+<template>
+  <ModulePageSelect
+    type="external"
+    :defaultModuleId="form.moduleId"
+    :defaultPageId="form.pageId"
+    :fetchModules="fetchModules"
+    :fetchPages="fetchPages"
+    @confirm="savePageInfo"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        moduleId: '66613bff9aa40000',
+        pageId: '6663c53083e40000'
+      }
+    }
+  },
+  methods: {
+    async fetchModules() {
+      // 获取模块列表
+    },
+    async fetchPages(moduleId, pageType) {
+      // 获取页面列表
+    },
+    savePageInfo(data) {
+      // 存储选中的模块、页面及配置
+      this.form.moduleId = data.module_id
+      this.form.pageId = data.page_id
+      console.log('配置数据:', data.configJson)
+    }
+  }
+}
+</script>
+```
+
+## 核心功能说明
+
+### 1. 模块与页面加载逻辑
+
+- 初始化优先读取模块缓存，无缓存再请求接口拉取模块列表
+- 切换模块清空旧页面数据，重新获取当前模块下所有页面并缓存
+- 选中页面：加载页面配置
+  - 有配置（非空对象）→ 渲染动态表单
+  - 无配置（null/{}）→ 不展示表单区域
+
+### 2. 动态表单渲染
+
+组件支持基于 JSON Schema 的动态表单渲染，支持以下字段类型：
+
+- `string` → 文本输入框
+- `number` / `integer` → 数字输入框
+- `enum` → 下拉选择框
+
+### 3. 配置使用规则
+
+1. 前端用 `page_id` 绑定页面路由
+2. 后端解析只依赖 `module_id` 和 `page_id`，名称字段仅做展示
+3. 页面初始化读取 `configJson`，回填表单
+4. 根据 `page_type` 走不同端逻辑（0: 移动端, 1: Web端）
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run serve
+
+# 构建库文件
+npm run build:lib
+
+# 代码检查
+npm run lint
+```
+
+## License
+
+MIT

package/dist/demo.html

@@ -0,0 +1 @@
+<!doctype html><meta charset="utf-8"><title>module-page-select demo</title><script src="./module-page-select.umd.js"></script><script>console.log(module-page-select)</script>