kintone-plugins/kintone-vue-template
Template
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
薛家豪
2025-10-17 14:34:26 +08:00
parent 8e40f9f0e6
commit 7ddaeb4bf8
16 changed files with 339 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -9,6 +9,7 @@ lerna-debug.log*
node_modules node_modules
dist dist
dist-iife
dist-ssr dist-ssr
*.local *.local

37
src/components/Config.vue
View File

@@ -16,44 +16,55 @@
<kuc-spinner :container="mainArea" v-show="loading" ref="spinner"></kuc-spinner> <kuc-spinner :container="mainArea" v-show="loading" ref="spinner"></kuc-spinner>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { Setting } from '@/types/model'; import type { Setting } from '@/types';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import type { Spinner } from 'kintone-ui-component'; import type { Spinner } from 'kintone-ui-component';
import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue'; import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
// i18n // 配置国际化
const { t: $t } = useI18n(); const { t: $t } = useI18n();
// 定义组件属性
const props = defineProps<{ pluginId: string }>(); const props = defineProps<{ pluginId: string }>();
// 响应式插件设置数据
const setting: Setting = reactive({ const setting: Setting = reactive({
buttonName: '', buttonName: '',
message: '', message: '',
}); });
const error = ref('')
const error = ref('');
const loading = ref(false); const loading = ref(false);
const mainArea = shallowRef<HTMLElement | null>(null); const mainArea = shallowRef<HTMLElement | null>(null);
const spinner = shallowRef<Spinner | null>(null); const spinner = shallowRef<Spinner | null>(null);
onMounted(async () => { onMounted(async () => {
// 先将整体页面渲染出来，再弹出 spinner 进行数据读取 // 等待页面完全渲染后再显示加载状态，实现更平滑的用户体验
nextTick(async () => { nextTick(async () => {
loading.value = true; loading.value = true;
// 获取已保存的插件配置
const savedSetting = kintone.plugin.app.getConfig(props.pluginId); const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
setting.buttonName = savedSetting?.buttonName || $t('config.button.default'); setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
setting.message = savedSetting?.message || $t('config.message.default'); setting.message = savedSetting?.message || $t('config.message.default');
// 暂停 1s 用于展示 spinner Demo // 模拟加载时间，展示 spinner 效果
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
loading.value = false; loading.value = false;
}); });
}); });
// 使用 loading 状态控制 spinner // 监听加载状态变化，控制 spinner 显示/隐藏
watch(loading, (load) => { watch(loading, (load) => {
load ? spinner.value?.open() : spinner.value?.close(); load ? spinner.value?.open() : spinner.value?.close();
}); });
/**
* 验证表单输入
* 检查必填字段是否已填写
* @param setting 要验证的设置对象
* @returns 验证是否通过
*/
function validate(setting: Setting): boolean { function validate(setting: Setting): boolean {
if (!setting.buttonName.trim()) { if (!setting.buttonName.trim()) {
error.value = 'ボタン名を入力してください。'; error.value = 'ボタン名を入力してください。';
@@ -62,19 +73,29 @@ function validate(setting: Setting): boolean {
return true; return true;
} }
/**
* 保存配置设置
* 验证输入后将设置保存到插件配置中
*/
async function save() { async function save() {
if(!validate(setting)){ // 先进行验证，如果验证失败则终止保存
if (!validate(setting)) {
return; return;
} }
loading.value = true; loading.value = true;
// 暂停 1s 用于展示 spinner Demo // 模拟保存时间，展示 spinner 效果
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
// 保存配置到插件
kintone.plugin.app.setConfig({ kintone.plugin.app.setConfig({
buttonName: setting.buttonName, buttonName: setting.buttonName,
message: setting.message, message: setting.message,
}); });
} }
/**
* 取消操作并返回插件列表
* 重定向到插件管理页面
*/
function cancel() { function cancel() {
window.location.href = `../../${kintone.app.getId()}/plugin/`; window.location.href = `../../${kintone.app.getId()}/plugin/`;
} }

91
src/components/basic/PluginInput.vue
View File

@@ -1,43 +1,48 @@
<template> <template>
<div class="kintoneplugin-input-container flex-row"> <div class="kintoneplugin-input-container flex-row">
<plugin-label v-if="label" :label="label" :required-icon="requiredIcon" /> <plugin-label v-if="label" :label="label" :required-icon="requiredIcon" />
<kuc-text v-bind="textProps" :value="modelValue" @change="updateValue" /> <kuc-text v-bind="textProps" :value="modelValue" @change="updateValue" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { KucEvent } from '@/types/my-kintone'; import type { KucEvent } from '@/types/my-kintone';
import type { TextProps, TextInputEventDetail } from 'kintone-ui-component/lib/text'; import type { TextProps, TextInputEventDetail } from 'kintone-ui-component/lib/text';
import { defineProps, defineEmits, computed } from 'vue'; import { defineProps, defineEmits, computed } from 'vue';
// kuc 不支持 v-model 的写法，所以如果想要使用需要包装一下 // KUC Text 组件不支持 v-model 语法，因此需要进行包装以支持双向绑定
const props = withDefaults(defineProps<TextProps & { const props = withDefaults(defineProps<TextProps & {
modelValue: string; modelValue: string;
}>(), { }>(), {
// boolean 的处理有点问题，这里手动重新定义 // 布尔值的默认值处理，设置为 undefined 表示未定义
disabled: undefined, disabled: undefined,
requiredIcon: undefined, requiredIcon: undefined,
visible: undefined visible: undefined,
}); });
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: string): void; (e: 'update:modelValue', value: string): void;
}>(); }>();
const textProps = computed<TextProps>(() => { /**
const baseProps = { * 计算属性：生成传递给 KUC Text 组件的属性对象
...props, * 过滤掉未定义的属性，避免传递无效值
label: '', // 在 plugin-label 处显示 label，不传入 text */
className: `kuc-text-input${props.className ? ` ${props.className}` : ''}`, const textProps = computed<TextProps>(() => {
}; const baseProps = {
...props,
// 过滤掉所有值为 undefined 的属性 label: '', // 标签由 plugin-label 组件显示，这里设置为空
return Object.fromEntries( className: `kuc-text-input${props.className ? ` ${props.className}` : ''}`, // 添加基础样式类
Object.entries(baseProps).filter(([_, value]) => value !== undefined) };
) as TextProps;
}); // 移除值为 undefined 的属性，确保只传递有效属性
return Object.fromEntries(Object.entries(baseProps).filter(([_, value]) => value !== undefined)) as TextProps;
const updateValue = ({ detail }: KucEvent<TextInputEventDetail>) => { });
emit('update:modelValue', detail.value || '');
}; /**
</script> * 处理 v-model 事件
*/
const updateValue = ({ detail }: KucEvent<TextInputEventDetail>) => {
emit('update:modelValue', detail.value || '');
};
</script>

28
src/components/basic/PluginLabel.vue
View File

@@ -1,15 +1,15 @@
<template> <template>
<div class="kintoneplugin-label"> <div class="kintoneplugin-label">
<span>{{ label }}</span> <span>{{ label }}</span>
<span v-if="requiredIcon" class="kintoneplugin-label-required-icon">*</span> <span v-if="requiredIcon" class="kintoneplugin-label-required-icon">*</span>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps } from 'vue'; import { defineProps } from 'vue';
const props = defineProps<{ const props = defineProps<{
label: string; label: string; // 标签文本内容
requiredIcon?: boolean | undefined, requiredIcon?: boolean; // 是否显示必填标记
}>(); }>();
</script> </script>

40
src/i18n/index.ts
View File

@@ -1,13 +1,27 @@
import { createI18n } from 'vue-i18n'; // 国际化配置
import ja from './lang/ja'; // 配置 Vue I18n 实现多语言支持
import en from './lang/en';
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
legacy: false, // 动态导入语言文件
locale: kintone.getLoginUser().language || 'ja', const messages: Record<string, any> = {};
messages: {
ja, const modules = import.meta.glob('./lang/*.ts', { eager: true });
en,
}, for (const path in modules) {
}); const match = path.match(/\.\/lang\/(\w+)\.ts$/);
export default i18n; 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;

30
src/i18n/lang/en.ts
View File

@@ -1,14 +1,16 @@
export default { // 英语语言包配置
config: { // 包含配置页面相关的翻译文本
title: 'kintone Vue template', export default {
desc: 'kintone Vue template for creating plugin', config: {
button: { title: 'kintone Vue template',
label: 'button name', desc: 'kintone Vue template for creating plugin',
default: 'button' button: {
}, label: 'button name',
message: { default: 'button',
label: 'message', },
default: '' message: {
}, label: 'message',
}, default: '',
}; },
},
};

30
src/i18n/lang/ja.ts
View File

@@ -1,14 +1,16 @@
export default { // 日语语言包配置
config: { // 包含配置页面相关的翻译文本
title: 'kintone Vue テンプレート', export default {
desc: 'kintoneプラグイン作成用 Vue テンプレート', config: {
button: { title: 'kintone Vue テンプレート',
label: 'ボタン名', desc: 'kintoneプラグイン作成用 Vue テンプレート',
default: 'ボタン' button: {
}, label: 'ボタン名',
message: { default: 'ボタン',
label: 'メッセージ', },
default: '' message: {
}, label: 'メッセージ',
}, default: '',
}; },
},
};

47
src/js/desktop.ts
View File

@@ -1,35 +1,52 @@
import type { Setting } from '@/types/model'; import type { Setting } from '@/types';
import { KintoneRestAPIClient } from '@kintone/rest-api-client'; import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import { Button } from 'kintone-ui-component/lib/button';
(function (PLUGIN_ID) { (function (PLUGIN_ID) {
kintone.events.on('app.record.index.show', () => { kintone.events.on('app.record.index.show', () => {
// App id // 获取当前应用ID
const appId = kintone.app.getId()?.toString(); const appIdNum = kintone.app.getId();
if (!appId) return; if (!appIdNum) {
return;
};
const appId = appIdNum.toString();
// get setting // 从插件配置中读取设置信息
const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID); 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(); const headerSpace = kintone.app.getHeaderMenuSpaceElement();
if (!headerSpace) { if (!headerSpace) {
throw new Error('このページではヘッダー要素が利用できません。'); throw new Error('このページではヘッダー要素が利用できません。');
} }
const btnId = 'template-btn-id'; // 创建按钮
// ボタン追加 const button = new Button({
if (document.getElementById(btnId)) return;
const button = new Kucs[KUC_VERSION].Button({
text: setting.buttonName, text: setting.buttonName,
type: 'submit', type: 'submit',
id: btnId, id: btnId,
}); });
const client = new KintoneRestAPIClient();
button.addEventListener('click', async () => { button.addEventListener('click', async () => {
const { plugins } = await client.app.getPlugins({ try {
app: appId // 测试 KintoneRestAPIClient，显示所有已启用的插件名
}) const client = new KintoneRestAPIClient();
alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、')); 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); headerSpace.appendChild(button);
}); });

47
src/js/mobile.ts
View File

@@ -1,35 +1,52 @@
import type { Setting } from '@/types/model'; import type { Setting } from '@/types';
import { KintoneRestAPIClient } from '@kintone/rest-api-client'; import { KintoneRestAPIClient } from '@kintone/rest-api-client';
import { MobileButton } from 'kintone-ui-component/lib/mobile/button';
(function (PLUGIN_ID) { (function (PLUGIN_ID) {
kintone.events.on('mobile.app.record.index.show', () => { kintone.events.on('mobile.app.record.index.show', () => {
// App id // 获取当前应用ID
const appId = kintone.mobile.app.getId()?.toString(); const appIdNum = kintone.mobile.app.getId();
if (!appId) return; if (!appIdNum) {
return;
};
const appId = appIdNum.toString();
// get setting // 从插件配置中读取设置信息
const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID); 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(); const headerSpace = kintone.mobile.app.getHeaderSpaceElement();
if (!headerSpace) { if (!headerSpace) {
throw new Error('このページではヘッダー要素が利用できません。'); throw new Error('このページではヘッダー要素が利用できません。');
} }
const btnId = 'template-btn-id'; // 创建按钮
// ボタン追加 const button = new MobileButton({
if (document.getElementById(btnId)) return;
const button = new Kucs[KUC_VERSION].MobileButton({
text: setting.buttonName, text: setting.buttonName,
type: 'submit', type: 'submit',
id: btnId, id: btnId,
}); });
const client = new KintoneRestAPIClient();
button.addEventListener('click', async () => { button.addEventListener('click', async () => {
const { plugins } = await client.app.getPlugins({ try {
app: appId // 测试 KintoneRestAPIClient，显示所有已启用的插件名
}) const client = new KintoneRestAPIClient();
alert(setting.message + "\n--------\n【Plugins】 " + plugins.map(p => p.name).join('、')); 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); headerSpace.appendChild(button);
}); });

2
src/manifest.json
View File

@@ -5,7 +5,6 @@
"type": "APP", "type": "APP",
"desktop": { "desktop": {
"js": [ "js": [
"js/kuc.min.js",
"js/desktop.js" "js/desktop.js"
], ],
"css": [ "css": [
@@ -40,7 +39,6 @@
}, },
"mobile": { "mobile": {
"js": [ "js": [
"js/kuc.min.js",
"js/mobile.js" "js/mobile.js"
], ],
"css": [ "css": [

11
src/types/index.d.ts vendored
View File

@@ -1,8 +1,3 @@
declare global { // 导出所有类型定义
const Kucs: { // 主要导出应用设置相关的类型接口
[version: string]: any; export * from './model';
};
const KUC_VERSION: string;
const KUC_VERSION_DASHED: string;
}
export {};

12
src/types/model.d.ts vendored
View File

@@ -1,4 +1,8 @@
export interface Setting { // 插件设置接口定义
buttonName: string; // 描述用户可以在配置页面中设置的参数
message: string; export interface Setting {
} // 按钮显示名称，用户自定义按钮的文本
buttonName: string;
// 用户自定义的消息内容，在点击按钮时会显示此消息
message: string;
}

28
src/types/my-kintone.d.ts vendored
View File

@@ -1,11 +1,17 @@
import { KintoneFormFieldProperty } from '@kintone/rest-api-client'; // 导入官方 REST API 客户端的类型定义
import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
export interface KucEvent<T> {
detail: T; // KUC 组件事件类型定义
} // 定义 kintone UI 组件触发事件的结构
export interface KucEvent<T> {
export type SelectType = // 事件详情，包含组件传递的数据
| KintoneFormFieldProperty.CheckBox detail: T;
| KintoneFormFieldProperty.RadioButton }
| KintoneFormFieldProperty.Dropdown
| KintoneFormFieldProperty.MultiSelect; // 选择类型字段联合类型
// 定义支持的选择类字段类型，用于类型检查和推断
export type SelectType =
| KintoneFormFieldProperty.CheckBox // 多选框字段
| KintoneFormFieldProperty.RadioButton // 单选按钮字段
| KintoneFormFieldProperty.Dropdown // 下拉选择字段
| KintoneFormFieldProperty.MultiSelect; // 多选下拉字段

82
vite.config.ts
View File

@@ -1,33 +1,35 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue';
import copy from "rollup-plugin-copy"; import copy from 'rollup-plugin-copy';
import * as path from 'path'; import * as path from 'path';
import * as fs from 'fs'; import * as fs from 'fs';
import * as child_process from 'child_process'; import * as child_process from 'child_process';
import Components from 'unplugin-vue-components/vite'; import Components from 'unplugin-vue-components/vite';
import RSA from 'node-rsa'; 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 packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
const kucVersion = packageJson.dependencies['kintone-ui-component']; const kucVersion = packageJson.dependencies['kintone-ui-component'];
const formattedVersion = kucVersion.replace(/\./g, '-'); // e.g., 1.22.0 -> 1-22-0 const formattedVersion = kucVersion.replace(/\./g, '-'); // 例如：1.22.0 -> 1-22-0
const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0
/** /**
* Create a private key for a kintone plugin * 生成 kintone 插件的私钥
*/ */
export const generatePrivateKey = () => { export const generatePrivateKey = () => {
const key = new RSA({ b: 1024 }); 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'); const privateKeyPath = path.resolve(__dirname, 'private.ppk');
if (!fs.existsSync(privateKeyPath)) { if (!fs.existsSync(privateKeyPath)) {
const privateKey = generatePrivateKey(); const privateKey = generatePrivateKey();
fs.writeFileSync(privateKeyPath, privateKey); fs.writeFileSync(privateKeyPath, privateKey);
} }
/**
* 自定义插件 vite-plugin-replace-tags：替换 KUC 组件标签为包含版本号的标签，并自动导入组件
*/
function replaceKucTagsPlugin() { function replaceKucTagsPlugin() {
return { return {
name: 'vite-plugin-replace-tags', name: 'vite-plugin-replace-tags',
@@ -35,24 +37,28 @@ function replaceKucTagsPlugin() {
if (id.endsWith('.vue')) { if (id.endsWith('.vue')) {
const content = await fs.promises.readFile(id, 'utf-8'); const content = await fs.promises.readFile(id, 'utf-8');
const usedComponent = {} const usedComponent = {};
// 替换 <kuc-*> 为带有版本号的形式 <kuc-[version]-*>
let res = content let res = content
.replace(new RegExp(`</kuc-([a-zA-Z0-9-]+)(?![0-9-])>`, 'g'), (match, p1) => `</kuc-${p1}-${formattedVersion}>`) .replace(new RegExp(`</kuc-([a-zA-Z0-9-]+)(?![0-9-])>`, 'g'), (match, p1) => `</kuc-${p1}-${formattedVersion}>`)
.replace(new RegExp(`<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>`, 'g'), (match, p1, p2) => { .replace(new RegExp(`<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>`, 'g'), (match, p1, p2) => {
usedComponent[p1] = true; usedComponent[p1] = true;
return `<kuc-${p1}-${formattedVersion}${p2}>` return `<kuc-${p1}-${formattedVersion}${p2}>`;
}); });
// 如果有 KUC 组件，自动生成 import 脚本
if (Object.keys(usedComponent).length) { if (Object.keys(usedComponent).length) {
let importScript = '<script lang="ts">' let importScript = '<script lang="ts">';
Object.keys(usedComponent).forEach((key) => { Object.keys(usedComponent).forEach((key) => {
const keyPascal = key.split('-') const keyPascal = key.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(''); .join('');
// 特殊处理 multi-choice 组件名称
if (key === 'multi-choice') { if (key === 'multi-choice') {
key = 'multichoice'; key = 'multichoice';
} }
importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";` importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`;
}); });
importScript += '</script>'; importScript += '</script>';
res = importScript + res; res = importScript + res;
@@ -60,11 +66,13 @@ function replaceKucTagsPlugin() {
return res; return res;
} }
} },
}; };
} }
// Function to build IIFE versions of desktop and mobile scripts /**
* 自定义插件 iife-builder：构建 desktop.ts 和 mobile.ts 的 IIFE 版本
*/
function buildIIFEVersions() { function buildIIFEVersions() {
return { return {
name: 'iife-builder', name: 'iife-builder',
@@ -87,9 +95,9 @@ function buildIIFEVersions() {
} }
}, },
generateBundle(options, bundle) { generateBundle(options, bundle) {
// Copy and overwrite the main dist/src/js files with IIFE versions // 将 IIFE 版本复制到主构建目录覆盖原有文件
const desktopIIFEPath = path.resolve(__dirname, 'dist-temp/desktop/desktop.js'); const desktopIIFEPath = path.resolve(__dirname, 'dist-iife/desktop/desktop.js');
const mobileIIFEPath = path.resolve(__dirname, 'dist-temp/mobile/mobile.js'); const mobileIIFEPath = path.resolve(__dirname, 'dist-iife/mobile/mobile.js');
const destDir = path.resolve(__dirname, 'dist/src/js'); const destDir = path.resolve(__dirname, 'dist/src/js');
if (fs.existsSync(desktopIIFEPath)) { if (fs.existsSync(desktopIIFEPath)) {
@@ -104,12 +112,12 @@ function buildIIFEVersions() {
console.log('Copied mobile.js to dist/src/js/'); console.log('Copied mobile.js to dist/src/js/');
} }
// Clean up dist-temp directory // 清理临时的 dist-iife 目录
if (fs.existsSync(path.resolve(__dirname, 'dist-temp'))) { if (fs.existsSync(path.resolve(__dirname, 'dist-iife'))) {
fs.rmSync(path.resolve(__dirname, 'dist-temp'), { recursive: true, force: true }); fs.rmSync(path.resolve(__dirname, 'dist-iife'), { recursive: true, force: true });
console.log('Cleaned up dist-temp directory'); console.log('Cleaned up dist-iife directory');
} }
} },
}; };
} }
@@ -120,12 +128,14 @@ export default defineConfig({
vue({ vue({
template: { template: {
compilerOptions: { compilerOptions: {
isCustomElement: (tag) => tag.startsWith("kuc-"), // 将以 kuc- 开头的标签识别为自定义元素，避免 Vue 的警告
} isCustomElement: (tag) => tag.startsWith('kuc-'),
} },
},
}), }),
Components(), Components(), // 自动导入 Vue 组件
copy({ copy({
// 将打包 plugin 需要的文件复制到 dist 里面
targets: [ targets: [
{ src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' }, { src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' },
{ src: 'src/manifest.json', dest: 'dist/src' }, { src: 'src/manifest.json', dest: 'dist/src' },
@@ -136,11 +146,11 @@ export default defineConfig({
], ],
hook: 'writeBundle' // 指定在何时复制文件 hook: 'writeBundle' // 指定在何时复制文件
}), }),
replaceKucTagsPlugin() replaceKucTagsPlugin(), // 自定义标签替换插件
], ],
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, 'src'), '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录
}, },
}, },
build: { build: {
@@ -150,15 +160,11 @@ export default defineConfig({
}, },
output: { output: {
entryFileNames: (chunkInfo) => { 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)
}
})

59
vite.desktop.config.ts
View File

@@ -1,33 +1,26 @@
import * as path from 'path'; import * as path from 'path';
import * as fs from 'fs';
/**
// Read kintone-ui-component version from package.json * 将桌面端 desktop.ts 文件打包为立即执行函数表达式 (IIFE) 格式
const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8')); */
const kucVersion = packageJson.dependencies['kintone-ui-component']; export default {
const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0 build: {
lib: {
export default { entry: path.resolve(__dirname, 'src/js/desktop.ts'),
build: { name: 'DesktopPlugin',
lib: { formats: ['iife'],
entry: path.resolve(__dirname, 'src/js/desktop.ts'), fileName: () => 'desktop.js', // 输出文件名，和 manifest.json 中的 name 一致
name: 'DesktopPlugin', },
formats: ['iife'], rollupOptions: {
fileName: () => 'desktop.js' external: ['kintone'], // kintone 是网站提供的 api，需要处理
}, output: {
rollupOptions: { globals: {
external: ['kintone'], kintone: 'kintone',
output: { },
globals: { },
kintone: 'kintone' },
} sourcemap: false,
} emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除
}, outDir: path.resolve(__dirname, 'dist-iife/desktop'), // 输出到 dist-iife 目录
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, '-'))
}
}

59
vite.mobile.config.ts
View File

@@ -1,33 +1,26 @@
import * as path from 'path'; import * as path from 'path';
import * as fs from 'fs';
/**
// Read kintone-ui-component version from package.json * 将移动端 mobile.ts 文件打包为立即执行函数表达式 (IIFE) 格式
const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8')); */
const kucVersion = packageJson.dependencies['kintone-ui-component']; export default {
const dottedVersion = kucVersion; // e.g., 1.22.0 -> 1.22.0 build: {
lib: {
export default { entry: path.resolve(__dirname, 'src/js/mobile.ts'),
build: { name: 'MobilePlugin',
lib: { formats: ['iife'],
entry: path.resolve(__dirname, 'src/js/mobile.ts'), fileName: () => 'mobile.js', // 输出文件名，和 manifest.json 中的 name 一致
name: 'MobilePlugin', },
formats: ['iife'], rollupOptions: {
fileName: () => 'mobile.js' external: ['kintone'], // kintone 是网站提供的 api，需要处理
}, output: {
rollupOptions: { globals: {
external: ['kintone'], kintone: 'kintone',
output: { },
globals: { },
kintone: 'kintone' },
} sourcemap: false,
} emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除
}, outDir: path.resolve(__dirname, 'dist-iife/mobile'), // 输出到 dist-iife 目录
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, '-'))
}
}