From 7ddaeb4bf8fee3cd8dd0e69ce5b4719632116956 Mon Sep 17 00:00:00 2001 From: xuejiahao Date: Fri, 17 Oct 2025 14:34:26 +0800 Subject: [PATCH] refactoring --- .gitignore | 1 + src/components/Config.vue | 37 ++++++++--- src/components/basic/PluginInput.vue | 91 +++++++++++++++------------- src/components/basic/PluginLabel.vue | 28 ++++----- src/i18n/index.ts | 40 ++++++++---- src/i18n/lang/en.ts | 30 ++++----- src/i18n/lang/ja.ts | 30 ++++----- src/js/desktop.ts | 47 +++++++++----- src/js/mobile.ts | 47 +++++++++----- src/manifest.json | 2 - src/types/index.d.ts | 11 +--- src/types/model.d.ts | 12 ++-- src/types/my-kintone.d.ts | 28 +++++---- vite.config.ts | 82 +++++++++++++------------ vite.desktop.config.ts | 59 ++++++++---------- vite.mobile.config.ts | 59 ++++++++---------- 16 files changed, 339 insertions(+), 265 deletions(-) diff --git a/.gitignore b/.gitignore index 7202a8e..0c37bcb 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ lerna-debug.log* node_modules dist +dist-iife dist-ssr *.local diff --git a/src/components/Config.vue b/src/components/Config.vue index e00154e..2bb28d4 100644 --- a/src/components/Config.vue +++ b/src/components/Config.vue @@ -16,44 +16,55 @@ + + + diff --git a/src/components/basic/PluginLabel.vue b/src/components/basic/PluginLabel.vue index 32691ed..d512e46 100644 --- a/src/components/basic/PluginLabel.vue +++ b/src/components/basic/PluginLabel.vue @@ -1,15 +1,15 @@ - - - \ No newline at end of file diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 834fcea..d07a102 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,13 +1,27 @@ -import { createI18n } from 'vue-i18n'; -import ja from './lang/ja'; -import en from './lang/en'; - -const i18n = createI18n({ - legacy: false, - locale: kintone.getLoginUser().language || 'ja', - messages: { - ja, - en, - }, -}); -export default i18n; +// 国际化配置 +// 配置 Vue I18n 实现多语言支持 + +import { createI18n } from 'vue-i18n'; + +// 动态导入语言文件 +const messages: Record = {}; + +const modules = import.meta.glob('./lang/*.ts', { eager: true }); + +for (const path in modules) { + const match = path.match(/\.\/lang\/(\w+)\.ts$/); + if (match) { + const langCode = match[1]; + const module = modules[path] as any; + messages[langCode] = module.default || module; + } +} + +// 创建 i18n 实例配置 +const i18n = createI18n({ + legacy: false, // 使用 Composition API 模式 + locale: kintone.getLoginUser().language || 'ja', + messages, +}); + +export default i18n; diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts index e54a4d3..0776d49 100644 --- a/src/i18n/lang/en.ts +++ b/src/i18n/lang/en.ts @@ -1,14 +1,16 @@ -export default { - config: { - title: 'kintone Vue template', - desc: 'kintone Vue template for creating plugin', - button: { - label: 'button name', - default: 'button' - }, - message: { - label: 'message', - default: '' - }, - }, -}; +// 英语语言包配置 +// 包含配置页面相关的翻译文本 +export default { + config: { + title: 'kintone Vue template', + desc: 'kintone Vue template for creating plugin', + button: { + label: 'button name', + default: 'button', + }, + message: { + label: 'message', + default: '', + }, + }, +}; diff --git a/src/i18n/lang/ja.ts b/src/i18n/lang/ja.ts index 3cae0bf..bab7211 100644 --- a/src/i18n/lang/ja.ts +++ b/src/i18n/lang/ja.ts @@ -1,14 +1,16 @@ -export default { - config: { - title: 'kintone Vue テンプレート', - desc: 'kintoneプラグイン作成用 Vue テンプレート', - button: { - label: 'ボタン名', - default: 'ボタン' - }, - message: { - label: 'メッセージ', - default: '' - }, - }, -}; +// 日语语言包配置 +// 包含配置页面相关的翻译文本 +export default { + config: { + title: 'kintone Vue テンプレート', + desc: 'kintoneプラグイン作成用 Vue テンプレート', + button: { + label: 'ボタン名', + default: 'ボタン', + }, + message: { + label: 'メッセージ', + default: '', + }, + }, +}; diff --git a/src/js/desktop.ts b/src/js/desktop.ts index 52a7fb1..98c1894 100644 --- a/src/js/desktop.ts +++ b/src/js/desktop.ts @@ -1,35 +1,52 @@ -import type { Setting } from '@/types/model'; +import type { Setting } from '@/types'; + import { KintoneRestAPIClient } from '@kintone/rest-api-client'; +import { Button } from 'kintone-ui-component/lib/button'; (function (PLUGIN_ID) { kintone.events.on('app.record.index.show', () => { - // App id - const appId = kintone.app.getId()?.toString(); - if (!appId) return; + // 获取当前应用ID + const appIdNum = kintone.app.getId(); + if (!appIdNum) { + return; + }; + const appId = appIdNum.toString(); - // get setting + // 从插件配置中读取设置信息 const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID); - // header space + // 检查按钮是否已存在，防止翻页时重复添加 + const btnId = 'template-btn-id'; + if (document.getElementById(btnId)) { + return; + }; + + // 获取 Header 容器元素 const headerSpace = kintone.app.getHeaderMenuSpaceElement(); if (!headerSpace) { throw new Error('このページではヘッダー要素が利用できません。'); } - const btnId = 'template-btn-id'; - // ボタン追加 - if (document.getElementById(btnId)) return; - const button = new Kucs[KUC_VERSION].Button({ + // 创建按钮 + const button = new Button({ text: setting.buttonName, type: 'submit', id: btnId, }); - const client = new KintoneRestAPIClient(); button.addEventListener('click', async () => { - const { plugins } = await client.app.getPlugins({ - app: appId - }) - alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、')); + try { + // 测试 KintoneRestAPIClient，显示所有已启用的插件名 + const client = new KintoneRestAPIClient(); + const { plugins } = await client.app.getPlugins({ + app: appId, + }); + const pluginsInfo = plugins.map((p) => p.name).join('、'); + + const message = setting.message + '\n--------\n【Plugins】 ' + pluginsInfo; + alert(message); + } catch (error) { + console.error('Failed to fetch plugins:', error); + } }); headerSpace.appendChild(button); }); diff --git a/src/js/mobile.ts b/src/js/mobile.ts index c7d5d65..3377798 100644 --- a/src/js/mobile.ts +++ b/src/js/mobile.ts @@ -1,35 +1,52 @@ -import type { Setting } from '@/types/model'; +import type { Setting } from '@/types'; + import { KintoneRestAPIClient } from '@kintone/rest-api-client'; +import { MobileButton } from 'kintone-ui-component/lib/mobile/button'; (function (PLUGIN_ID) { kintone.events.on('mobile.app.record.index.show', () => { - // App id - const appId = kintone.mobile.app.getId()?.toString(); - if (!appId) return; + // 获取当前应用ID + const appIdNum = kintone.mobile.app.getId(); + if (!appIdNum) { + return; + }; + const appId = appIdNum.toString(); - // get setting + // 从插件配置中读取设置信息 const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID); - // header space + // 检查按钮是否已存在，防止翻页时重复添加 + const btnId = 'template-btn-id'; + if (document.getElementById(btnId)) { + return; + }; + + // 获取 Header 容器元素 const headerSpace = kintone.mobile.app.getHeaderSpaceElement(); if (!headerSpace) { throw new Error('このページではヘッダー要素が利用できません。'); } - const btnId = 'template-btn-id'; - // ボタン追加 - if (document.getElementById(btnId)) return; - const button = new Kucs[KUC_VERSION].MobileButton({ + // 创建按钮 + const button = new MobileButton({ text: setting.buttonName, type: 'submit', id: btnId, }); - const client = new KintoneRestAPIClient(); button.addEventListener('click', async () => { - const { plugins } = await client.app.getPlugins({ - app: appId - }) - alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、')); + try { + // 测试 KintoneRestAPIClient，显示所有已启用的插件名 + const client = new KintoneRestAPIClient(); + const { plugins } = await client.app.getPlugins({ + app: appId, + }); + const pluginsInfo = plugins.map((p) => p.name).join('、'); + + const message = setting.message + '\n--------\n【Plugins】 ' + pluginsInfo; + alert(message); + } catch (error) { + console.error('Failed to fetch plugins:', error); + } }); headerSpace.appendChild(button); }); diff --git a/src/manifest.json b/src/manifest.json index 1bd389a..e16863a 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -5,7 +5,6 @@ "type": "APP", "desktop": { "js": [ - "js/kuc.min.js", "js/desktop.js" ], "css": [ @@ -40,7 +39,6 @@ }, "mobile": { "js": [ - "js/kuc.min.js", "js/mobile.js" ], "css": [ diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 8a48749..325b69d 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1,8 +1,3 @@ -declare global { - const Kucs: { - [version: string]: any; - }; - const KUC_VERSION: string; - const KUC_VERSION_DASHED: string; -} -export {}; +// 导出所有类型定义 +// 主要导出应用设置相关的类型接口 +export * from './model'; diff --git a/src/types/model.d.ts b/src/types/model.d.ts index 795a732..4a826b1 100644 --- a/src/types/model.d.ts +++ b/src/types/model.d.ts @@ -1,4 +1,8 @@ -export interface Setting { - buttonName: string; - message: string; -} \ No newline at end of file +// 插件设置接口定义 +// 描述用户可以在配置页面中设置的参数 +export interface Setting { + // 按钮显示名称，用户自定义按钮的文本 + buttonName: string; + // 用户自定义的消息内容，在点击按钮时会显示此消息 + message: string; +} diff --git a/src/types/my-kintone.d.ts b/src/types/my-kintone.d.ts index a91cc9c..b954c06 100644 --- a/src/types/my-kintone.d.ts +++ b/src/types/my-kintone.d.ts @@ -1,11 +1,17 @@ -import { KintoneFormFieldProperty } from '@kintone/rest-api-client'; - -export interface KucEvent { - detail: T; -} - -export type SelectType = - | KintoneFormFieldProperty.CheckBox - | KintoneFormFieldProperty.RadioButton - | KintoneFormFieldProperty.Dropdown - | KintoneFormFieldProperty.MultiSelect; +// 导入官方 REST API 客户端的类型定义 +import { KintoneFormFieldProperty } from '@kintone/rest-api-client'; + +// KUC 组件事件类型定义 +// 定义 kintone UI 组件触发事件的结构 +export interface KucEvent { + // 事件详情，包含组件传递的数据 + detail: T; +} + +// 选择类型字段联合类型 +// 定义支持的选择类字段类型，用于类型检查和推断 +export type SelectType = + | KintoneFormFieldProperty.CheckBox // 多选框字段 + | KintoneFormFieldProperty.RadioButton // 单选按钮字段 + | KintoneFormFieldProperty.Dropdown // 下拉选择字段 + | KintoneFormFieldProperty.MultiSelect; // 多选下拉字段 diff --git a/vite.config.ts b/vite.config.ts index 640fdb5..bb3291f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,33 +1,35 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import copy from "rollup-plugin-copy"; +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import copy from 'rollup-plugin-copy'; import * as path from 'path'; import * as fs from 'fs'; import * as child_process from 'child_process'; import Components from 'unplugin-vue-components/vite'; import RSA from 'node-rsa'; -// Read kintone-ui-component version from package.json +// 从 package.json 读取 kintone-ui-component 版本信息 const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8')); const kucVersion = packageJson.dependencies['kintone-ui-component']; -const formattedVersion = kucVersion.replace(/\./g, '-'); // e.g., 1.22.0 -> 1-22-0 -const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0 +const formattedVersion = kucVersion.replace(/\./g, '-'); // 例如：1.22.0 -> 1-22-0 /** - * Create a private key for a kintone plugin + * 生成 kintone 插件的私钥 */ export const generatePrivateKey = () => { const key = new RSA({ b: 1024 }); - return key.exportKey("pkcs1-private"); + return key.exportKey('pkcs1-private'); }; -// Check if private.ppk exists, if not, generate it +// 检查 private.ppk 是否存在，如果不存在则生成 const privateKeyPath = path.resolve(__dirname, 'private.ppk'); if (!fs.existsSync(privateKeyPath)) { const privateKey = generatePrivateKey(); fs.writeFileSync(privateKeyPath, privateKey); } +/** + * 自定义插件 vite-plugin-replace-tags：替换 KUC 组件标签为包含版本号的标签，并自动导入组件 + */ function replaceKucTagsPlugin() { return { name: 'vite-plugin-replace-tags', @@ -35,24 +37,28 @@ function replaceKucTagsPlugin() { if (id.endsWith('.vue')) { const content = await fs.promises.readFile(id, 'utf-8'); - const usedComponent = {} + const usedComponent = {}; + // 替换 为带有版本号的形式 let res = content .replace(new RegExp(``, 'g'), (match, p1) => ``) .replace(new RegExp(`]*)>`, 'g'), (match, p1, p2) => { usedComponent[p1] = true; - return `` + return ``; }); + + // 如果有 KUC 组件，自动生成 import 脚本 if (Object.keys(usedComponent).length) { - let importScript = ''; res = importScript + res; @@ -60,11 +66,13 @@ function replaceKucTagsPlugin() { return res; } - } + }, }; } -// Function to build IIFE versions of desktop and mobile scripts +/** + * 自定义插件 iife-builder：构建 desktop.ts 和 mobile.ts 的 IIFE 版本 + */ function buildIIFEVersions() { return { name: 'iife-builder', @@ -87,9 +95,9 @@ function buildIIFEVersions() { } }, generateBundle(options, bundle) { - // Copy and overwrite the main dist/src/js files with IIFE versions - const desktopIIFEPath = path.resolve(__dirname, 'dist-temp/desktop/desktop.js'); - const mobileIIFEPath = path.resolve(__dirname, 'dist-temp/mobile/mobile.js'); + // 将 IIFE 版本复制到主构建目录覆盖原有文件 + const desktopIIFEPath = path.resolve(__dirname, 'dist-iife/desktop/desktop.js'); + const mobileIIFEPath = path.resolve(__dirname, 'dist-iife/mobile/mobile.js'); const destDir = path.resolve(__dirname, 'dist/src/js'); if (fs.existsSync(desktopIIFEPath)) { @@ -104,12 +112,12 @@ function buildIIFEVersions() { console.log('Copied mobile.js to dist/src/js/'); } - // Clean up dist-temp directory - if (fs.existsSync(path.resolve(__dirname, 'dist-temp'))) { - fs.rmSync(path.resolve(__dirname, 'dist-temp'), { recursive: true, force: true }); - console.log('Cleaned up dist-temp directory'); + // 清理临时的 dist-iife 目录 + if (fs.existsSync(path.resolve(__dirname, 'dist-iife'))) { + fs.rmSync(path.resolve(__dirname, 'dist-iife'), { recursive: true, force: true }); + console.log('Cleaned up dist-iife directory'); } - } + }, }; } @@ -120,12 +128,14 @@ export default defineConfig({ vue({ template: { compilerOptions: { - isCustomElement: (tag) => tag.startsWith("kuc-"), - } - } + // 将以 kuc- 开头的标签识别为自定义元素，避免 Vue 的警告 + isCustomElement: (tag) => tag.startsWith('kuc-'), + }, + }, }), - Components(), + Components(), // 自动导入 Vue 组件 copy({ + // 将打包 plugin 需要的文件复制到 dist 里面 targets: [ { src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' }, { src: 'src/manifest.json', dest: 'dist/src' }, @@ -136,11 +146,11 @@ export default defineConfig({ ], hook: 'writeBundle' // 指定在何时复制文件 }), - replaceKucTagsPlugin() + replaceKucTagsPlugin(), // 自定义标签替换插件 ], resolve: { alias: { - '@': path.resolve(__dirname, 'src'), + '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录 }, }, build: { @@ -150,15 +160,11 @@ export default defineConfig({ }, output: { entryFileNames: (chunkInfo) => { - return 'src/js/[name].js'; // 默认处理为 JS 文件 + return 'src/js/[name].js'; // 将入口文件输出为 JS 文件 }, - assetFileNames: 'src/[ext]/[name].[ext]', + assetFileNames: 'src/[ext]/[name].[ext]', // 设置资源文件输出路径 }, }, - sourcemap: 'inline', + sourcemap: 'inline', // 生成内联 sourcemap 用于调试 }, - define: { - KUC_VERSION: JSON.stringify(dottedVersion), - KUC_VERSION_DASHED: JSON.stringify(formattedVersion) - } -}) +}); diff --git a/vite.desktop.config.ts b/vite.desktop.config.ts index 836a008..44f1d66 100644 --- a/vite.desktop.config.ts +++ b/vite.desktop.config.ts @@ -1,33 +1,26 @@ -import * as path from 'path'; -import * as fs from 'fs'; - -// Read kintone-ui-component version from package.json -const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8')); -const kucVersion = packageJson.dependencies['kintone-ui-component']; -const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0 - -export default { - build: { - lib: { - entry: path.resolve(__dirname, 'src/js/desktop.ts'), - name: 'DesktopPlugin', - formats: ['iife'], - fileName: () => 'desktop.js' - }, - rollupOptions: { - external: ['kintone'], - output: { - globals: { - kintone: 'kintone' - } - } - }, - sourcemap: false, - emptyOutDir: false, - outDir: path.resolve(__dirname, 'dist-temp/desktop') - }, - define: { - KUC_VERSION: JSON.stringify(dottedVersion), - KUC_VERSION_DASHED: JSON.stringify(dottedVersion.replace(/\./g, '-')) - } -} +import * as path from 'path'; + +/** + * 将桌面端 desktop.ts 文件打包为立即执行函数表达式 (IIFE) 格式 + */ +export default { + build: { + lib: { + entry: path.resolve(__dirname, 'src/js/desktop.ts'), + name: 'DesktopPlugin', + formats: ['iife'], + fileName: () => 'desktop.js', // 输出文件名，和 manifest.json 中的 name 一致 + }, + rollupOptions: { + external: ['kintone'], // kintone 是网站提供的 api，需要处理 + output: { + globals: { + kintone: 'kintone', + }, + }, + }, + sourcemap: false, + emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除 + outDir: path.resolve(__dirname, 'dist-iife/desktop'), // 输出到 dist-iife 目录 + }, +}; diff --git a/vite.mobile.config.ts b/vite.mobile.config.ts index 0f21d17..ef528a2 100644 --- a/vite.mobile.config.ts +++ b/vite.mobile.config.ts @@ -1,33 +1,26 @@ -import * as path from 'path'; -import * as fs from 'fs'; - -// Read kintone-ui-component version from package.json -const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8')); -const kucVersion = packageJson.dependencies['kintone-ui-component']; -const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0 - -export default { - build: { - lib: { - entry: path.resolve(__dirname, 'src/js/mobile.ts'), - name: 'MobilePlugin', - formats: ['iife'], - fileName: () => 'mobile.js' - }, - rollupOptions: { - external: ['kintone'], - output: { - globals: { - kintone: 'kintone' - } - } - }, - sourcemap: false, - emptyOutDir: false, - outDir: path.resolve(__dirname, 'dist-temp/mobile') - }, - define: { - KUC_VERSION: JSON.stringify(dottedVersion), - KUC_VERSION_DASHED: JSON.stringify(dottedVersion.replace(/\./g, '-')) - } -} +import * as path from 'path'; + +/** + * 将移动端 mobile.ts 文件打包为立即执行函数表达式 (IIFE) 格式 + */ +export default { + build: { + lib: { + entry: path.resolve(__dirname, 'src/js/mobile.ts'), + name: 'MobilePlugin', + formats: ['iife'], + fileName: () => 'mobile.js', // 输出文件名，和 manifest.json 中的 name 一致 + }, + rollupOptions: { + external: ['kintone'], // kintone 是网站提供的 api，需要处理 + output: { + globals: { + kintone: 'kintone', + }, + }, + }, + sourcemap: false, + emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除 + outDir: path.resolve(__dirname, 'dist-iife/mobile'), // 输出到 dist-iife 目录 + }, +};