upload code

2025-10-17 14:33:33 +08:00
commit 0d9423e6e4
29 changed files with 1526 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: [
+    '@cybozu/eslint-config/globals/kintone.js',
+    '@cybozu/eslint-config/lib/base.js',
+    '@cybozu/eslint-config/lib/kintone.js',
+    '@cybozu/eslint-config/lib/prettier.js',
+  ],
+  rules: {
+    'prettier/prettier': ['error', { singleQuote: true }],
+    'space-before-function-paren': 0,
+    'object-curly-spacing': 0,
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+data
+
+private.ppk
+package-lock.json
+yarn.lock
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "bracketSpacing": true
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,189 @@
+
+# kintone-vue-ts-template
+
+使用 Vue 、ts 和 Vite 创建 kintone plugin 的初始化模板，先由 [create-plugin](https://cybozu.dev/ja/kintone/sdk/development-environment/create-plugin/) 生成之后再手动引入 Vue。
+
+> プラグイン開発手順：https://cybozu.dev/ja/kintone/tips/development/plugins/development-plugin/
+
+包括了以下 kintone 库：
+
+- [kintone-ui-component (v1.22.0)](https://cybozu.dev/ja/kintone/sdk/library/kintone-ui-component-v1/)（[文档](https://ui-component.kintone.dev/ja/)）
+- [@cybozu/eslint-config](https://cybozu.dev/ja/kintone/sdk/development-environment/eslint-config/)
+- [@kintone/rest-api-client](https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/)（[文档](https://github.com/kintone/js-sdk/tree/main/packages/rest-api-client)）
+- [kintone/plugin-packer](https://cybozu.dev/ja/kintone/sdk/development-environment/plugin-packer/)
+- [@kintone/plugin-uploader](https://cybozu.dev/ja/kintone/sdk/development-environment/plugin-uploader/)
+- [@kintone/dts-gen](https://cybozu.dev/ja/kintone/sdk/library/dts-gen/)
+
+# 使用步骤
+
+首先进行安装
+
+```bash
+npm install # 或 yarn
+```
+
+随后需要修改项目信息：
+
+1. `package.json`
+```diff
+{
+  "name": "项目名",
+-  "name": "kintone-vue-template",
+  "private": true,
+  "version": "版本号",
+-  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "vite:build": "vite build",
+    "build": "vite build && npm run pkg",
+    "build-upload": "npm run build && npm run upload",
+    "pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
+    "upload": "修改 kintone 域名、用户名和密码"
+-    "upload": "kintone-plugin-uploader --base-url https://alicorn.cybozu.com --username maxz --password 7ld7i8vd dist/plugin.zip "
+  },
+  ...
+```
+
+2. `src/manifest.json`
+
+```diff
+{
+  ...
+  "icon": "icon 路径",
+-  "icon": "image/icon.png",
+  "config": {
+    ...
+    "required_params": [ "/config 页面必填的参数" ]
+-    "required_params": [ "buttonName" ]
+  },
+  "name": "项目名",
+-  "name": {
+-    "en": "kintone Vue template",
+-    "ja": "kintone Vue テンプレート"
+-  },
+  "description": "项目描述",
+-  "description": {
+-    "en": "kintone Vue template for creating plugin",
+-    "ja": "kintoneプラグイン作成用 Vue テンプレート"
+-  },
+  "description": "项目网站",
+-  "homepage_url": {
+-    "en": "https://www.alicorns.co.jp/",
+-    "ja": "https://www.alicorns.co.jp/"
+-  },
+  ...
+}
+```
+
+# 编译流程
+
+- `build` 会生成 `dist` 文件夹，以及 `plugin.zip` 文件
+
+> 如果只需要 `dist` 文件夹，可以执行 `vite:build`
+
+```bash
+npm run build # 或 yarn build
+
+# 仅生成 `dist` 文件夹
+npm run vite:build # 或 yarn vite:build
+```
+
+- `upload` 会将 `plugin.zip` 上传到 Kintone plugin
+
+```bash
+npm run upload # 或 yarn upload
+```
+
+- `build-upload` 会顺序执行上面两步
+
+```bash
+npm run build-upload # 或 yarn build-upload
+```
+
+# 开发说明
+
+## 项目结构
+
+```
+├── src
+│   ├── components
+│   │   ├── basic
+│   │   │   ├── PluginInput.vue
+│   │   │   └── PluginLabel.vue
+│   │   └── Config.vue
+│   ├── css
+│   │   ├── 51-modern-default.css
+│   │   └── config.css
+│   ├── i18n
+│   │   ├── lang
+│   │   │   ├── en.ts
+│   │   │   └── ja.ts
+│   │   └── index.ts
+│   ├── js
+│   │   ├── desktop.ts
+│   │   └── mobile.ts
+│   ├── types
+│   │   ├── index.d.ts
+│   │   ├── model.d.ts
+│   │   └── my-kintone.d.ts
+│   ├── main.ts
+│   └── manifest.json
+├── README.md
+├── components.d.ts
+├── env.d.ts
+├── index.html
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+当前模板中已经有一个案例，可以参考并且修改。
+
+1. 对于 Config 页面，请修改 `components/Config.vue`
+2. 对于 PC 的 App 页面，请修改 `js/desktop.ts`
+3. 对于 Mobile 的 App 页面，请修改 `js/mobile.ts`
+
+这三个文件是强制指定的，请不要修改。
+
+### 关于 Config 页面
+
+只有 **Config 页面** 的开发可以使用 Vue Template，其他页面请使用 `js` 文件。
+
+基本上和 Vue 开发没有区别，但是有以下一些限制：
+1. CSS 样式只能使用 `css` 文件
+2. `kintone-ui-component` 库有一些限制
+
+
+### 关于 CSS
+
+1. 暂时不支持在 Vue Template 中创建，**只能在 `css` 文件夹下新建 css 文件**
+2. 目前在 `config` 页面引入了 `51-modern-default.css`，里面存放了 kintone 的一些样式
+   - 如果不需要使用就在 `manifest.json` 中删除
+   ```diff
+   "config": {
+      "html": "html/config.html",
+      "js": [
+         "js/config.js"
+      ],
+      "css": [
+   -      "css/51-modern-default.css",
+         "css/config.css"
+      ],
+      "required_params": [
+         "buttonName"
+      ]
+   },
+   ```
+
+
+
+### 
+
+
+**支持 Vue 页面**，
+不支持 Vue 页面，
+
+
+## 对于 `kintone-ui-component` 库的限制
+
+v-model 语法糖无法使用
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Config: typeof import('./src/components/Config.vue')['default']
+    PluginInput: typeof import('./src/components/basic/PluginInput.vue')['default']
+    PluginLabel: typeof import('./src/components/basic/PluginLabel.vue')['default']
+  }
+}
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+/// <reference types="kintone" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,4 @@
+<section class="settings">
+  <div id="app"></div>
+</section>
+<script type="module" src="/src/main.ts"></script>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "kintone-vue-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "vite:build": "vite build",
+    "build": "vite build && npm run pkg",
+    "build-upload": "npm run build && npm run upload",
+    "pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
+    "upload": "kintone-plugin-uploader --base-url https://alicorn.cybozu.com --username maxz --password 7ld7i8vd dist/plugin.zip "
+  },
+  "dependencies": {
+    "@kintone/rest-api-client": "^5.7.5",
+    "kintone-ui-component": "1.22.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.0.1"
+  },
+  "devDependencies": {
+    "@cybozu/eslint-config": "^23.0.0",
+    "@kintone/dts-gen": "^8.1.1",
+    "@kintone/plugin-packer": "^8.1.3",
+    "@kintone/plugin-uploader": "^9.1.2",
+    "@types/node-rsa": "^1.1.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^8.57.0",
+    "node-rsa": "^1.1.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "typescript": "^5.7.3",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.0.1",
+    "vue-tsc": "^2.1.10"
+  }
+}
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/components/Config.vue
+++ b/src/components/Config.vue
@@ -0,0 +1,81 @@
+<template>
+  <h2 class="settings-heading">{{ $t('config.title') }}</h2>
+  <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
+
+  <div id="main-area" ref="mainArea">
+    <plugin-input v-model="setting.buttonName" :error="error" :label="$t('config.button.label')" required-icon />
+    <plugin-input v-model="setting.message" :label="$t('config.message.label')" />
+  </div>
+
+  <div class="action-area">
+    <kuc-button text="キャンセル" type="normal" @click="cancel" />
+    <kuc-button :disabled="loading" text="保存する" class="save-btn" type="submit" @click="save" />
+  </div>
+
+  <!-- 必须使用 v-show 让 spinner dom 创建的时候不显示 -->
+  <kuc-spinner :container="mainArea" v-show="loading" ref="spinner"></kuc-spinner>
+</template>
+<script setup lang="ts">
+import type { Setting } from '@/types/model';
+import { useI18n } from 'vue-i18n';
+import type { Spinner } from 'kintone-ui-component';
+
+import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
+
+// i18n
+const { t: $t } = useI18n();
+
+const props = defineProps<{ pluginId: string }>();
+const setting: Setting = reactive({
+  buttonName: '',
+  message: '',
+});
+const error = ref('')
+const loading = ref(false);
+
+const mainArea = shallowRef<HTMLElement | null>(null);
+const spinner = shallowRef<Spinner | null>(null);
+
+onMounted(async () => {
+  // 先将整体页面渲染出来，再弹出 spinner 进行数据读取
+  nextTick(async () => {
+    loading.value = true;
+    const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
+    setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
+    setting.message = savedSetting?.message || $t('config.message.default');
+    // 暂停 1s 用于展示 spinner Demo
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    loading.value = false;
+  });
+});
+
+// 使用 loading 状态控制 spinner
+watch(loading, (load) => {
+  load ? spinner.value?.open() : spinner.value?.close();
+});
+
+function validate(setting: Setting): boolean {
+  if (!setting.buttonName.trim()) {
+    error.value = 'ボタン名を入力してください。';
+    return false;
+  }
+  return true;
+}
+
+async function save() {
+  if(!validate(setting)){
+    return;
+  }
+  loading.value = true;
+  // 暂停 1s 用于展示 spinner Demo
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  kintone.plugin.app.setConfig({
+    buttonName: setting.buttonName,
+    message: setting.message,
+  });
+}
+
+function cancel() {
+  window.location.href = `../../${kintone.app.getId()}/plugin/`;
+}
+</script>
--- a/src/components/basic/PluginInput.vue
+++ b/src/components/basic/PluginInput.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="kintoneplugin-input-container flex-row">
+    <plugin-label v-if="label" :label="label" :required-icon="requiredIcon" />
+    <kuc-text v-bind="textProps" :value="modelValue" @change="updateValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
+import type { TextProps, TextInputEventDetail } from 'kintone-ui-component/lib/text';
+import { defineProps, defineEmits, computed } from 'vue';
+
+// kuc 不支持 v-model 的写法，所以如果想要使用需要包装一下
+const props = withDefaults(defineProps<TextProps & {
+  modelValue: string;
+}>(), {
+  // boolean 的处理有点问题，这里手动重新定义
+  disabled: undefined,
+  requiredIcon: undefined,
+  visible: undefined
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const textProps = computed<TextProps>(() => {
+  const baseProps = {
+    ...props,
+    label: '', // 在 plugin-label 处显示 label，不传入 text
+    className: `kuc-text-input${props.className ? ` ${props.className}` : ''}`,
+  };
+
+  // 过滤掉所有值为 undefined 的属性
+  return Object.fromEntries(
+    Object.entries(baseProps).filter(([_, value]) => value !== undefined)
+  ) as TextProps;
+});
+
+const updateValue = ({ detail }: KucEvent<TextInputEventDetail>) => {
+  emit('update:modelValue', detail.value || '');
+};
+</script>
--- a/src/components/basic/PluginLabel.vue
+++ b/src/components/basic/PluginLabel.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="kintoneplugin-label">
+    <span>{{ label }}</span>
+    <span v-if="requiredIcon" class="kintoneplugin-label-required-icon">*</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  requiredIcon?: boolean | undefined,
+}>();
+</script>
--- a/src/css/51-modern-default.css
+++ b/src/css/51-modern-default.css
--- a/src/css/config.css
+++ b/src/css/config.css
@@ -0,0 +1,73 @@
+/* 辅助类 */
+.flex-row {
+  display: flex;
+}
+.hidden {
+  visibility: hidden;
+}
+
+/* config 页面 */
+#app {
+  width: 60vw;
+  min-width: 1030px;
+}
+
+/* 最上面的说明 */
+.settings-heading {
+  padding: 1em 0;
+  margin-bottom: 8px;
+}
+
+/* label 样式 */
+.kintoneplugin-label {
+  padding-left: 20px;
+  line-height: 40px;
+}
+
+.kintoneplugin-label-required-icon {
+  font-size: 20px;
+  vertical-align: -3px;
+  color: #e74c3c;
+  margin-left: 4px;
+  line-height: 1;
+}
+
+/* label input 单行的情况 */
+.flex-row .kintoneplugin-label {
+  margin: 0;
+  width: 8.5em;
+}
+
+/* 底部按钮空间 */
+.action-area {
+  padding: 24px 0;
+  margin-bottom: 32px;
+  text-align: right;
+  border-top: none;
+}
+.save-btn {
+  margin-left: 16px;
+  margin-right: 24px;
+}
+
+/* loading 遮罩 */
+#main-area {
+  position: relative;
+}
+#main-area [class^="kuc-spinner"][class$="__mask"] {
+  position: absolute;
+  background-color: white;
+}
+#main-area [class^="kuc-spinner"][class$="__spinner"] {
+  position: absolute;
+}
+#main-area [class^="kuc-spinner"][class$="__spinner__loader"] {
+  fill: #3498db;
+}
+
+/* 输入框宽度 */
+.kuc-text-input {
+  --kuc-text-input-width: max(16vw, 200px);
+  --kuc-dropdown-toggle-width: max(16vw, 200px);
+  --kuc-combobox-toggle-width: max(16vw, 200px);
+}
--- a/src/css/desktop.css
+++ b/src/css/desktop.css
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -0,0 +1,13 @@
+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;
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -0,0 +1,14 @@
+export default {
+  config: {
+    title: 'kintone Vue template',
+    desc: 'kintone Vue template for creating plugin',
+    button: {
+      label: 'button name',
+      default: 'button'
+    },
+    message: {
+      label: 'message',
+      default: ''
+    },
+  },
+};
--- a/src/i18n/lang/ja.ts
+++ b/src/i18n/lang/ja.ts
@@ -0,0 +1,14 @@
+export default {
+  config: {
+    title: 'kintone Vue テンプレート',
+    desc: 'kintoneプラグイン作成用 Vue テンプレート',
+    button: {
+      label: 'ボタン名',
+      default: 'ボタン'
+    },
+    message: {
+      label: 'メッセージ',
+      default: ''
+    },
+  },
+};
--- a/src/js/desktop.ts
+++ b/src/js/desktop.ts
@@ -0,0 +1,36 @@
+import type { Setting } from '@/types/model';
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+
+(function (PLUGIN_ID) {
+  kintone.events.on('app.record.index.show', () => {
+    // App id
+    const appId = kintone.app.getId()?.toString();
+    if (!appId) return;
+
+    // get setting
+    const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID);
+
+    // header space
+    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({
+      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('、'));
+    });
+    headerSpace.appendChild(button);
+  });
+})(kintone.$PLUGIN_ID);
--- a/src/js/mobile.ts
+++ b/src/js/mobile.ts
@@ -0,0 +1,36 @@
+import type { Setting } from '@/types/model';
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+
+(function (PLUGIN_ID) {
+  kintone.events.on('mobile.app.record.index.show', () => {
+    // App id
+    const appId = kintone.app.getId()?.toString();
+    if (!appId) return;
+
+    // get setting
+    const setting: Setting = kintone.plugin.app.getConfig(PLUGIN_ID);
+
+    // header space
+    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({
+      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('、'));
+    });
+    headerSpace.appendChild(button);
+  });
+})(kintone.$PLUGIN_ID);
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Config from './components/Config.vue';
+import i18n from './i18n';
+
+createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).mount('#app');
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
+  "manifest_version": 1,
+  "version": 1,
+  "type": "APP",
+  "desktop": {
+    "js": [
+      "js/kuc.min.js",
+      "js/desktop.js"
+    ],
+    "css": [
+      "css/desktop.css"
+    ]
+  },
+  "icon": "image/icon.png",
+  "config": {
+    "html": "html/config.html",
+    "js": [
+      "js/config.js"
+    ],
+    "css": [
+      "css/51-modern-default.css",
+      "css/config.css"
+    ],
+    "required_params": [
+      "buttonName"
+    ]
+  },
+  "name": {
+    "en": "kintone Vue template",
+    "ja": "kintone Vue テンプレート"
+  },
+  "description": {
+    "en": "kintone Vue template for creating plugin",
+    "ja": "kintoneプラグイン作成用 Vue テンプレート"
+  },
+  "homepage_url": {
+    "en": "https://www.alicorns.co.jp/",
+    "ja": "https://www.alicorns.co.jp/"
+  },
+  "mobile": {
+    "js": [
+      "js/kuc.min.js",
+      "js/mobile.js"
+    ],
+    "css": [
+      "css/mobile.css"
+    ]
+  }
+}
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -0,0 +1,8 @@
+declare global  {
+    const Kucs: {
+      [version: string]: any;
+    };
+    const KUC_VERSION: string;
+    const KUC_VERSION_DASHED: string;
+}
+export {};
--- a/src/types/model.d.ts
+++ b/src/types/model.d.ts
@@ -0,0 +1,4 @@
+export interface Setting {
+  buttonName: string;
+  message: string;
+}
--- a/src/types/my-kintone.d.ts
+++ b/src/types/my-kintone.d.ts
@@ -0,0 +1,11 @@
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+
+export interface KucEvent<T> {
+  detail: T;
+}
+
+export type SelectType =
+  | KintoneFormFieldProperty.CheckBox
+  | KintoneFormFieldProperty.RadioButton
+  | KintoneFormFieldProperty.Dropdown
+  | KintoneFormFieldProperty.MultiSelect;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
+  "exclude": ["src/**/__tests__/*"],
+  "files" : [
+    "./node_modules/@kintone/dts-gen/kintone.d.ts",
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,150 @@
+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 Components from 'unplugin-vue-components/vite';
+import RSA from 'node-rsa';
+
+// 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 formattedVersion = kucVersion.replace(/\./g, '-'); // e.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
+ */
+export const generatePrivateKey = () => {
+  const key = new RSA({ b: 1024 });
+  return key.exportKey("pkcs1-private");
+};
+
+// Check if private.ppk exists, if not, generate it
+const privateKeyPath = path.resolve(__dirname, 'private.ppk');
+if (!fs.existsSync(privateKeyPath)) {
+  const privateKey = generatePrivateKey();
+  fs.writeFileSync(privateKeyPath, privateKey);
+}
+
+function replaceKucTagsPlugin() {
+  return {
+    name: 'vite-plugin-replace-tags',
+    async load(id) {
+      if (id.endsWith('.vue')) {
+        const content = await fs.promises.readFile(id, 'utf-8');
+
+        const usedComponent = {}
+
+        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, p2) => {
+            usedComponent[p1] = true;
+            return `<kuc-${p1}-${formattedVersion}${p2}>`
+          });
+        if (Object.keys(usedComponent).length) {
+          let importScript = '<script lang="ts">'
+          Object.keys(usedComponent).forEach((key) => {
+            const keyPascal = key.split('-')
+              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+              .join('');
+            if (key === 'multi-choice') {
+              key = 'multichoice';
+            }
+            importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`
+          });
+          importScript += '</script>';
+          res = importScript + res;
+        }
+
+        return res;
+      }
+    }
+  };
+}
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith("kuc-"),
+        }
+      }
+    }),
+    Components(),
+    copy({
+      targets: [
+        { src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' },
+        { src: 'src/assets/*.js', dest: 'dist/src/js' },
+        { src: 'src/assets/*.png', dest: 'dist/src/image' },
+        { src: 'src/css/*', dest: 'dist/src/css' },
+        { src: 'node_modules/kintone-ui-component/umd/kuc.min.js', dest: 'dist/src/js' },
+      ],
+      hook: 'writeBundle' // 指定在何时复制文件
+    }),
+    {
+      name: 'manifest-updater',
+      writeBundle() {
+        try {
+          const manifestPath = path.resolve(__dirname, 'dist/src/manifest.json');
+          const destDir = path.dirname(manifestPath);
+          fs.mkdirSync(destDir, { recursive: true });
+          fs.copyFileSync(path.resolve(__dirname, 'src/manifest.json'), manifestPath);
+          const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+          const viteManifestPath = path.resolve(__dirname, 'dist/.vite/manifest.json');
+          if (!fs.existsSync(viteManifestPath)) return;
+
+          const viteManifest = JSON.parse(fs.readFileSync(viteManifestPath, 'utf-8'));
+
+          // 收集所有生成的 chunk 文件
+          const chunkFiles: string[] = [];
+          Object.values(viteManifest).forEach((value: any) => {
+            if (value.file && value.file.endsWith('.chunk.js')) {
+              chunkFiles.push('js/' + path.basename(value.file));
+            }
+          });
+
+          // 更新 desktop 和 mobile 的 js 数组，包含 chunk 文件
+          if (chunkFiles.length > 0) {
+            manifest.desktop.js = ['js/kuc.min.js', 'js/desktop.js', ...chunkFiles];
+            manifest.mobile.js = ['js/kuc.min.js', 'js/mobile.js', ...chunkFiles];
+          }
+
+          fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+        } catch (error) {
+          console.error('Error updating manifest:', error);
+        }
+      }
+    },
+    replaceKucTagsPlugin()
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        config: path.resolve(__dirname, 'index.html'),
+        desktop: path.resolve(__dirname, 'src/js/desktop.ts'),
+        mobile: path.resolve(__dirname, 'src/js/mobile.ts'),
+      },
+      output: {
+        entryFileNames: (chunkInfo) => {
+           return 'src/js/[name].js'; // 默认处理为 JS 文件
+        },
+        chunkFileNames: 'src/js/[name]-[hash].chunk.js',
+        assetFileNames: 'src/[ext]/[name].[ext]',
+      },
+    },
+    sourcemap: 'inline',
+    manifest: true,
+  },
+  define: {
+    KUC_VERSION: JSON.stringify(dottedVersion),
+    KUC_VERSION_DASHED: JSON.stringify(formattedVersion)
+  }
+})