diff --git a/vue-project/my-kintone-plugin/components.d.ts b/vue-project/my-kintone-plugin/components.d.ts
new file mode 100644
index 0000000..fb726aa
--- /dev/null
+++ b/vue-project/my-kintone-plugin/components.d.ts
@@ -0,0 +1,21 @@
+/* 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']
+    PluginDropdown: typeof import('./src/components/basic/PluginDropdown.vue')['default']
+    PluginInput: typeof import('./src/components/basic/PluginInput.vue')['default']
+    PluginLabel: typeof import('./src/components/basic/PluginLabel.vue')['default']
+    PluginRow: typeof import('./src/components/basic/PluginRow.vue')['default']
+    PluginTableActionIcon: typeof import('./src/components/basic/PluginTableActionIcon.vue')['default']
+    PluginTableActionIconGroup: typeof import('./src/components/basic/PluginTableActionIconGroup.vue')['default']
+    PluginTableArea: typeof import('./src/components/basic/PluginTableArea.vue')['default']
+    PluginTableConditionRow: typeof import('./src/components/basic/PluginTableConditionRow.vue')['default']
+    PluginTableConnectRow: typeof import('./src/components/basic/PluginTableConnectRow.vue')['default']
+  }
+}
diff --git a/vue-project/my-kintone-plugin/package-lock.json b/vue-project/my-kintone-plugin/package-lock.json
index e2217bb..616763d 100644
--- a/vue-project/my-kintone-plugin/package-lock.json
+++ b/vue-project/my-kintone-plugin/package-lock.json
@@ -11,7 +11,8 @@
         "@kintone/rest-api-client": "^5.7.0",
         "kintone-ui-component": "1.18.0",
         "rollup-plugin-css-only": "^4.5.2",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.0.1"
       },
       "devDependencies": {
         "@cybozu/eslint-config": "^23.0.0",
@@ -23,10 +24,21 @@
         "eslint": "^8.57.0",
         "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"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -593,6 +605,50 @@
         "node": ">=18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.0.1.tgz",
+      "integrity": "sha512-NAmhw1l/llM0HZRpagR/ChJTNymW4ll6/4EDSJML5c8L5Hl/+k6UyF8EIgE6DeHpfheQujkSRngauViHqq6jJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.0.1",
+        "@intlify/shared": "11.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.0.1.tgz",
+      "integrity": "sha512-5RFH8x+Mn3mbjcHXnb6KCXGiczBdiQkWkv99iiA0JpKrNuTAQeW59Pjq/uObMB0eR0shnKYGTkIJxum+DbL3sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.0.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.0.1.tgz",
+      "integrity": "sha512-lH164+aDDptHZ3dBDbIhRa1dOPQUp+83iugpc+1upTOWCnwyC1PVis6rSWNMMJ8VQxvtHQB9JMib48K55y0PvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -1974,6 +2030,12 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/language-core": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.0.tgz",
@@ -2972,6 +3034,13 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/core-js": {
       "version": "3.40.0",
       "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.40.0.tgz",
@@ -6011,6 +6080,23 @@
         "@types/trusted-types": "^2.0.2"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz",
@@ -6320,6 +6406,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
@@ -6818,6 +6917,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.1.tgz",
+      "integrity": "sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/pend/-/pend-1.2.0.tgz",
@@ -6843,6 +6949,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -8644,6 +8762,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -8689,6 +8814,84 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-2.1.2.tgz",
+      "integrity": "sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "28.0.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-28.0.0.tgz",
+      "integrity": "sha512-vYe0wSyqTVhyNFIad1iiGyQGhG++tDOMgohqenMDOAooMJP9vvzCdXTqCVx20A0rCQXFNjgoRbSeDAioLPH36Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.4",
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.0",
+        "fast-glob": "^3.3.3",
+        "local-pkg": "^0.5.1",
+        "magic-string": "^0.30.17",
+        "minimatch": "^9.0.5",
+        "mlly": "^1.7.3",
+        "unplugin": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@@ -8823,6 +9026,26 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.0.1.tgz",
+      "integrity": "sha512-pWAT8CusK8q9/EpN7V3oxwHwxWm6+Kp2PeTZmRGvdZTkUzMQDpbbmHp0TwQ8xw04XKm23cr6B4GL72y3W8Yekg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.0.1",
+        "@intlify/shared": "11.0.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.2.0.tgz",
@@ -8840,6 +9063,13 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
diff --git a/vue-project/my-kintone-plugin/package.json b/vue-project/my-kintone-plugin/package.json
index 929c26c..e0ac405 100644
--- a/vue-project/my-kintone-plugin/package.json
+++ b/vue-project/my-kintone-plugin/package.json
@@ -16,7 +16,8 @@
     "@kintone/rest-api-client": "^5.7.0",
     "kintone-ui-component": "1.18.0",
     "rollup-plugin-css-only": "^4.5.2",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.0.1"
   },
   "devDependencies": {
     "@cybozu/eslint-config": "^23.0.0",
@@ -28,6 +29,7 @@
     "eslint": "^8.57.0",
     "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"
   }
diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue
index 146b157..9138696 100644
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/vue-project/my-kintone-plugin/src/components/Config.vue
@@ -1,53 +1,63 @@
 <template>
-  <h2 class="settings-heading">Settings for data fetch pluging</h2>
-  <p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
-  <form class="js-submit-settings">
-    <p class="kintoneplugin-row">
-      <label for="message">
-        Message:
-        <input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
-      </label>
-    </p>
-    <p class="kintoneplugin-row">
-      <kuc-button text="Cancel" type="normal" @click="cancel" />
-      <kuc-button text="Save" type="submit" @click="save" />
-    </p>
-  </form>
+  <h2 class="settings-heading">{{ $t('config.title') }}</h2>
+  <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
+
+  <plugin-row class="header-row border">
+    <plugin-input v-model="data.buttonName" label="集約ボタン名" />
+  </plugin-row>
+
+  <div v-if="!loading">
+    <plugin-table-area :table="mainTable" :key="mainTable.id" />
+    <plugin-table-area v-for="joinTable in otherTables" :table="joinTable" :key="joinTable.id" />
+  </div>
+
+  <plugin-row class="footer-row border">
+    <kuc-button text="キャンセル" type="normal" @click="cancel" />
+    <kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
+  </plugin-row>
 </template>
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { createEmptyJoinTable } from '@/js/helper';
+import type { JoinTable, SavedData } from '@/types/model';
+
+import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
 
 const props = defineProps<{ pluginId: string }>();
-const data: {
-  message: string;
-} = reactive({
-  message: '',
+const loading = ref(true);
+const data: SavedData = reactive({
+  buttonName: '',
+  joinTables: [] as JoinTable[],
 });
 
+provide('savedData', data);
+
 onMounted(async () => {
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
-  data.message = JSON.parse(savedData.message);
+  data.buttonName = savedData?.buttonName || '集約';
+  data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
+  loading.value = false;
 });
 
+const mainTable = computed(() => data.joinTables[0]);
+const otherTables = computed(() => data.joinTables.slice(1));
+
+watch(
+  () => data.joinTables.length,
+  (newLength) => {
+    if (newLength === 1) {
+      data.joinTables[0].onConditions = [];
+    }
+  },
+);
+
 function save() {
-  kintone.plugin.app.setConfig(
-    { message: JSON.stringify(data.message) },
-    // () => {
-    //   alert("The plug-in settings have been saved. Please update the app!");
-    //   window.location.href = "../../flow?app=" + kintone.app.getId();
-    // }
-  );
+  kintone.plugin.app.setConfig({
+    buttonName: data.buttonName,
+    joinTables: JSON.stringify(data.joinTables || []),
+  });
 }
 
 function cancel() {
   window.location.href = `../../${kintone.app.getId()}/plugin/`;
 }
 </script>
-<style scoped>
-.settings-heading {
-  padding: 1em 0;
-}
-.kintoneplugin-input-text {
-  width: 20em;
-}
-</style>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue
new file mode 100644
index 0000000..bc8591e
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="kintoneplugin-input-container flex-row">
+    <plugin-label v-if="label" :label="label" />
+    <kuc-dropdown className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  items: kintone.fieldTypes.DropDown['Item'][];
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: kintone.Event) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue
new file mode 100644
index 0000000..b4dce50
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="kintoneplugin-input-container flex-row">
+    <plugin-label v-if="label" :label="label" />
+    <kuc-text className="kuc-text-input" :value="modelValue" @change="updateValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: kintone.Event) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue
new file mode 100644
index 0000000..d87afe7
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="kintoneplugin-label">{{ label }}</div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  label: string;
+}>();
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue
new file mode 100644
index 0000000..9f2bbe5
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="kintoneplugin-row">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue
new file mode 100644
index 0000000..a07c8d1
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <button :class="['kuc-action-button', isAdd ? 'add' : 'remove']" :title="title">
+    <svg fill="none" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">
+      <path :d="dPath" fill-rule="evenodd" clip-rule="evenodd" :fill="fillPath"></path>
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ isAdd: boolean; title: string }>();
+
+const dAdd =
+  'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z';
+const fillAdd = '#3498db';
+const dRemove =
+  'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z';
+const fillRemove = '#b5b5b5';
+
+const dPath = computed(() => (props.isAdd ? dAdd : dRemove));
+const fillPath = computed(() => (props.isAdd ? fillAdd : fillRemove));
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue
new file mode 100644
index 0000000..47db08d
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <plugin-table-action-icon v-if="canAdd" :is-add="true" title="Add Row" @click="onClick('add')" />
+    <plugin-table-action-icon v-if="canDelete" :is-add="false" title="Delete this row" @click="onClick('remove')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createEmptyJoinTable } from '@/js/helper';
+import type { SavedData } from '@/types/model';
+import { defineProps, withDefaults, inject } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    canAdd?: boolean;
+    canDelete?: boolean;
+    tableId: number;
+  }>(),
+  {
+    canAdd: true,
+    canDelete: true,
+  },
+);
+
+const savedData = inject<SavedData>('savedData') as SavedData;
+const onClick = (type: 'add' | 'remove') => {
+  if (type === 'add') {
+    savedData.joinTables.push(createEmptyJoinTable());
+  } else if (savedData.joinTables.length > 1) {
+    savedData.joinTables = savedData.joinTables.filter((t) => t.id !== props.tableId);
+  }
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
new file mode 100644
index 0000000..706ca56
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
@@ -0,0 +1,68 @@
+<template>
+  <plugin-row class="table-area flex-row border">
+    <div class="table-main-area ">
+      <plugin-row>
+        <plugin-dropdown label="取得元アプリ" :items="apps" v-model="table.app" />
+      </plugin-row>
+      <plugin-row>
+        <plugin-dropdown label="テーブル" :items="tables" v-model="table.table" />
+      </plugin-row>
+      <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
+        <plugin-label label="連結条件" />
+        <plugin-table-connect-row connector="=" v-model="table.onConditions" />
+      </plugin-row>
+      <plugin-row class="flex-row">
+        <plugin-label label="取得フィールド" />
+        <plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
+      </plugin-row>
+      <plugin-row class="flex-row">
+        <plugin-label label="絞込条件" />
+        <plugin-table-condition-row v-model="table.whereConditions" />
+      </plugin-row>
+    </div>
+    <div class="table-action-area">
+      <plugin-table-action-icon-group :can-delete="savedData.joinTables.length > 1" :table-id="table.id" />
+    </div>
+  </plugin-row>
+</template>
+
+<script setup lang="ts">
+import type { JoinTable, SavedData } from '@/types/model';
+import { inject } from 'vue';
+
+const savedData = inject<SavedData>('savedData') as SavedData;
+
+const props = defineProps<{ table: JoinTable }>();
+const apps = [
+  {
+    label: '-------',
+    value: '',
+  },
+  {
+    label: 'lable 1',
+    value: 'value 1',
+  },
+  {
+    label: 'lable 2',
+    value: 'value 2',
+  },
+];
+const tables = [
+  {
+    label: '-------',
+    value: '-------',
+  },
+  {
+    label: 'tables 1',
+    value: 'tables 1',
+  },
+  {
+    label: 'tables 2',
+    value: 'tables 2',
+  },
+];
+
+const isJoinConditionShown = (table: JoinTable) => {
+  return savedData.joinTables[0].id !== table.id;
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
new file mode 100644
index 0000000..8262ac9
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -0,0 +1,79 @@
+<template>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+</template>
+
+<script setup lang="ts">
+import type { WhereCondition } from '@/types/model';
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+
+const props = defineProps<{
+  modelValue: WhereCondition[];
+}>();
+
+const renderDropdown = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const renderCondition = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const renderDynamicData = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+
+const columns = [
+  {
+    title: '取得元アプリのフィールド',
+    field: 'field',
+    render: renderDropdown,
+  },
+  {
+    title: '',
+    field: 'condition',
+    render: renderCondition,
+  },
+  {
+    title: '',
+    field: 'data',
+    render: renderDynamicData,
+  },
+];
+
+const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
+}>();
+
+const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+};
+
+const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+  item[key] = value;
+  emit('update:modelValue', props.modelValue);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
new file mode 100644
index 0000000..4e2aaf6
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -0,0 +1,61 @@
+<template>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+</template>
+
+<script setup lang="ts">
+import type { FieldsJoinMapping } from '@/types/model';
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+
+const props = defineProps<{
+  connector: string;
+  modelValue: FieldsJoinMapping[];
+}>();
+
+const renderDropdown = (cellData: string) => {
+  const dropdown = new Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerard', value: 'steven' },
+    ],
+    value: cellData,
+  });
+  return dropdown;
+};
+const renderConnector = () => {
+  return props.connector;
+};
+
+const columns = [
+  {
+    title: '取得元アプリのフィールド',
+    field: 'leftField',
+    render: renderDropdown,
+  },
+  {
+    title: '',
+    field: 'connector',
+    render: renderConnector,
+  },
+  {
+    title: 'このアプリのフィールド',
+    field: 'rightField',
+    render: renderDropdown,
+  },
+];
+
+const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
+}>();
+
+const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+};
+
+const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+  item[key] = value;
+  emit('update:modelValue', props.modelValue);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css
index a3a0ef3..3fc358f 100644
--- a/vue-project/my-kintone-plugin/src/css/config.css
+++ b/vue-project/my-kintone-plugin/src/css/config.css
@@ -1,6 +1,114 @@
+/* 辅助类 */
+.flex-row {
+  display: flex;
+}
+.hidden {
+  visibility: hidden;
+}
+.border {
+  border: 1px solid #e3e7e8;
+}
+/* config 页面 */
+#app {
+  width: 60vw;
+  min-width: 920px;
+}
+
+/* 最上面的说明 */
 .settings-heading {
   padding: 1em 0;
 }
-.kintoneplugin-input-text {
-  width: 20em;
+
+/* label 样式 */
+.kintoneplugin-label {
+  padding-left: 20px;
+  line-height: 40px;
+}
+/* laebl input 单号的情况 */
+.flex-row .kintoneplugin-label {
+  margin: 0;
+  width: 10em;
+}
+
+/* 表格内容垂直居中 */
+.table-area {
+  margin: 0;
+  align-items: center;
+}
+
+/* 整体边框相关样式 */
+.header-row {
+  padding: 24px 0;
+  margin: 0;
+  border-bottom: none;
+}
+.table-main-area {
+  flex: 1;
+  border-right: 1px solid #e3e7e8;
+  padding-top: 24px;
+}
+.footer-row {
+  padding: 24px 0;
+  margin-bottom: 32px;
+  text-align: right;
+  border-top: none;
+}
+
+/* 底部按钮空间 */
+.save-btn {
+  margin-left: 16px;
+  margin-right: 24px;
+}
+
+/* 输入框宽度 */
+.kuc-text-input {
+  --kuc-text-input-width: max(15vw, 200px);
+  --kuc-dropdown-toggle-width: max(15vw, 200px);
+}
+
+/* 统一 kintone +/- 按钮样式 */
+.kuc-action-button {
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: 1px solid transparent;
+  padding: 2px;
+  cursor: pointer;
+  margin: 0 4px;
+}
+.kuc-action-button.remove {
+  margin-right: 8px;
+}
+.kuc-action-button.add {
+  margin-left: 8px;
+}
+.kuc-action-button:focus {
+  border: 1px solid #3498db;
+  outline: none;
+}
+.kuc-action-button.remove:hover path {
+  fill: #e74c3c;
+}
+
+/* 覆盖表格样式 */
+.plugin-kuc-table td {
+  border-left-color: rgba(0, 0, 0, 0);
+  border-right-color: rgba(0, 0, 0, 0);
+  vertical-align: middle;
+}
+
+.plugin-kuc-table tr td:nth-last-child(2) {
+  border-right-color: #e3e7e8;
+}
+.plugin-kuc-table tr td:first-child {
+  border-left-color: #e3e7e8;
+}
+.plugin-kuc-table .kuc-table-1-18-0__table__body__row__action {
+  height: 55px;
+  align-items: center;
+}
+
+/* 絞り込み条件选择相关样式 */
+.row-connector-area {
+  margin: 0 1em;
 }
diff --git a/vue-project/my-kintone-plugin/src/i18n/index.ts b/vue-project/my-kintone-plugin/src/i18n/index.ts
new file mode 100644
index 0000000..834fcea
--- /dev/null
+++ b/vue-project/my-kintone-plugin/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;
diff --git a/vue-project/my-kintone-plugin/src/i18n/lang/en.ts b/vue-project/my-kintone-plugin/src/i18n/lang/en.ts
new file mode 100644
index 0000000..3624b51
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/i18n/lang/en.ts
@@ -0,0 +1,6 @@
+export default {
+  config: {
+    title: 'Settings for data fetch plugin',
+    desc: 'This message is displayed on the app page after the app has been updated.',
+  },
+};
diff --git a/vue-project/my-kintone-plugin/src/i18n/lang/ja.ts b/vue-project/my-kintone-plugin/src/i18n/lang/ja.ts
new file mode 100644
index 0000000..3624b51
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/i18n/lang/ja.ts
@@ -0,0 +1,6 @@
+export default {
+  config: {
+    title: 'Settings for data fetch plugin',
+    desc: 'This message is displayed on the app page after the app has been updated.',
+  },
+};
diff --git a/vue-project/my-kintone-plugin/src/js/helper.ts b/vue-project/my-kintone-plugin/src/js/helper.ts
new file mode 100644
index 0000000..cd7d98d
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/js/helper.ts
@@ -0,0 +1,16 @@
+import type { JoinTable } from '@/types/model';
+
+export const condition = {
+  unset: '',
+  eq: '=',
+};
+export function createEmptyJoinTable(id = Number(new Date())) {
+  return {
+    id,
+    app: '',
+    table: '',
+    onConditions: [{ leftField: '', rightField: '' }],
+    fieldsMapping: [{ leftField: '', rightField: '' }],
+    whereConditions: [{ field: '', condition: condition.unset, data: '' }],
+  } as JoinTable;
+}
diff --git a/vue-project/my-kintone-plugin/src/main.ts b/vue-project/my-kintone-plugin/src/main.ts
index 2972b0c..34d0a6c 100644
--- a/vue-project/my-kintone-plugin/src/main.ts
+++ b/vue-project/my-kintone-plugin/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import Config from './components/Config.vue';
+import i18n from './i18n/index';
 
-createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');
+createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).mount('#app');
diff --git a/vue-project/my-kintone-plugin/src/types/kintone.d.ts b/vue-project/my-kintone-plugin/src/types/kintone.d.ts
index 5be79ec..ad58b5f 100644
--- a/vue-project/my-kintone-plugin/src/types/kintone.d.ts
+++ b/vue-project/my-kintone-plugin/src/types/kintone.d.ts
@@ -1,11 +1,27 @@
 // https://cybozu.dev/ja/kintone/docs/overview/field-types/
 // https://cybozudev.kf5.com/hc/kb/article/201593/
 declare namespace kintone.fieldTypes {
-  interface TABLE {
+  interface Table {
     type: 'SUBTABLE';
     value: any;
   }
 
+  interface DropDown {
+    Item: {
+      label: string,
+      value: string,
+      disabled?: boolean
+    }
+  }
+}
+
+declare namespace kintone {
+  interface Event {
+    detail: {
+      value: string;
+    };
+  }
+
 }
 
 // lookup https://cybozudev.kf5.com/hc/kb/article/1611088/
diff --git a/vue-project/my-kintone-plugin/src/types/model.d.ts b/vue-project/my-kintone-plugin/src/types/model.d.ts
new file mode 100644
index 0000000..035dab3
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/types/model.d.ts
@@ -0,0 +1,27 @@
+import { condition } from './helper';
+
+export interface FieldsJoinMapping {
+  leftField: string;
+  rightField: string;
+}
+
+export interface WhereCondition {
+  field: string;
+  condition: (typeof condition)[keyof typeof condition];
+  data: string;
+}
+
+export interface JoinTable {
+  id: number;    // 用于唯一区分
+  app: string;   // 取得元アプリ
+  table: string; // テーブル
+  onConditions: FieldsJoinMapping[];  // 連結条件
+  fieldsMapping: FieldsJoinMapping[]; // 取得フィールド
+  whereConditions: WhereCondition[];  // 絞込条件
+}
+
+// 存储的数据格式
+export interface SavedData {
+  buttonName: string;
+  joinTables: JoinTable[];
+}
\ No newline at end of file
diff --git a/vue-project/my-kintone-plugin/tsconfig.json b/vue-project/my-kintone-plugin/tsconfig.json
index d58de83..2bca332 100644
--- a/vue-project/my-kintone-plugin/tsconfig.json
+++ b/vue-project/my-kintone-plugin/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "files" : [
     "./node_modules/@kintone/dts-gen/kintone.d.ts",
diff --git a/vue-project/my-kintone-plugin/vite.config.js b/vue-project/my-kintone-plugin/vite.config.ts
similarity index 93%
rename from vue-project/my-kintone-plugin/vite.config.js
rename to vue-project/my-kintone-plugin/vite.config.ts
index 65fc26d..7c734d5 100644
--- a/vue-project/my-kintone-plugin/vite.config.js
+++ b/vue-project/my-kintone-plugin/vite.config.ts
@@ -3,6 +3,8 @@ import vue from '@vitejs/plugin-vue'
 import copy from "rollup-plugin-copy";
 import path from 'path';
 import fs from 'fs';
+import Components from 'unplugin-vue-components/vite';
+
 function replaceKucTagsPlugin() {
   return {
     name: 'vite-plugin-replace-tags',
@@ -46,6 +48,7 @@ export default defineConfig({
         }
       }
     }),
+    Components(),
     copy({
       targets: [
         { src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' },
@@ -57,6 +60,11 @@ export default defineConfig({
     }),
     replaceKucTagsPlugin()
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
   build: {
     rollupOptions: {
       input: {
diff --git a/vue-project/my-kintone-plugin/yarn.lock b/vue-project/my-kintone-plugin/yarn.lock
index 5252797..40e56ff 100644
--- a/vue-project/my-kintone-plugin/yarn.lock
+++ b/vue-project/my-kintone-plugin/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@antfu/utils@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.10.tgz"
+  integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
+
 "@babel/code-frame@^7.0.0":
   version "7.26.2"
   resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.26.2.tgz"
@@ -21,7 +26,7 @@
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz"
   integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
 
-"@babel/parser@^7.25.3":
+"@babel/parser@^7.15.8", "@babel/parser@^7.25.3":
   version "7.26.3"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz"
   integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
@@ -342,6 +347,27 @@
   dependencies:
     mute-stream "^1.0.0"
 
+"@intlify/core-base@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.0.1.tgz"
+  integrity sha512-NAmhw1l/llM0HZRpagR/ChJTNymW4ll6/4EDSJML5c8L5Hl/+k6UyF8EIgE6DeHpfheQujkSRngauViHqq6jJQ==
+  dependencies:
+    "@intlify/message-compiler" "11.0.1"
+    "@intlify/shared" "11.0.1"
+
+"@intlify/message-compiler@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.0.1.tgz"
+  integrity sha512-5RFH8x+Mn3mbjcHXnb6KCXGiczBdiQkWkv99iiA0JpKrNuTAQeW59Pjq/uObMB0eR0shnKYGTkIJxum+DbL3sw==
+  dependencies:
+    "@intlify/shared" "11.0.1"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@intlify/shared/-/shared-11.0.1.tgz"
+  integrity sha512-lH164+aDDptHZ3dBDbIhRa1dOPQUp+83iugpc+1upTOWCnwyC1PVis6rSWNMMJ8VQxvtHQB9JMib48K55y0PvQ==
+
 "@jridgewell/sourcemap-codec@^1.5.0":
   version "1.5.0"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
@@ -460,7 +486,7 @@
     unbzip2-stream "^1.4.3"
     yargs "^17.7.2"
 
-"@rollup/pluginutils@5":
+"@rollup/pluginutils@^5.1.4", "@rollup/pluginutils@5":
   version "5.1.4"
   resolved "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz"
   integrity sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==
@@ -852,6 +878,11 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.6.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/language-core@2.2.0":
   version "2.2.0"
   resolved "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.0.tgz"
@@ -1373,6 +1404,11 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+confbox@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz"
+  integrity sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
+
 core-js@^3.38.1, core-js@^3.39.0:
   version "3.40.0"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.40.0.tgz"
@@ -2165,7 +2201,7 @@ fast-fifo@^1.2.0, fast-fifo@^1.3.2:
   resolved "https://registry.npmmirror.com/fast-fifo/-/fast-fifo-1.3.2.tgz"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.0.3, fast-glob@^3.2.9, fast-glob@^3.3.2:
+fast-glob@^3.0.3, fast-glob@^3.2.9, fast-glob@^3.3.2, fast-glob@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -3021,6 +3057,14 @@ lit@^3.2.0:
     lit-element "^4.1.0"
     lit-html "^3.2.0"
 
+local-pkg@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.1.tgz"
+  integrity sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==
+  dependencies:
+    mlly "^1.7.3"
+    pkg-types "^1.2.1"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz"
@@ -3064,7 +3108,7 @@ lru-cache@^7.14.1:
   resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-7.18.3.tgz"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
-magic-string@^0.30.11:
+magic-string@^0.30.11, magic-string@^0.30.17:
   version "0.30.17"
   resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz"
   integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
@@ -3210,6 +3254,16 @@ mkdirp@^3.0.1:
   resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-3.0.1.tgz"
   integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
 
+mlly@^1.7.3, mlly@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.npmmirror.com/mlly/-/mlly-1.7.4.tgz"
+  integrity sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==
+  dependencies:
+    acorn "^8.14.0"
+    pathe "^2.0.1"
+    pkg-types "^1.3.0"
+    ufo "^1.5.4"
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz"
@@ -3505,6 +3559,11 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pathe@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/pathe/-/pathe-2.0.1.tgz"
+  integrity sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/pend/-/pend-1.2.0.tgz"
@@ -3535,6 +3594,15 @@ picomatch@^4.0.2:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
+pkg-types@^1.2.1, pkg-types@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz"
+  integrity sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==
+  dependencies:
+    confbox "^0.1.8"
+    mlly "^1.7.4"
+    pathe "^2.0.1"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
@@ -4009,7 +4077,7 @@ socks@^2.8.3:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
-source-map-js@^1.2.0, source-map-js@^1.2.1:
+source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -4379,6 +4447,11 @@ typescript@*, typescript@^5.7.3, typescript@>=4.2.0, "typescript@>=4.7.5 || ^5.0
   resolved "https://registry.npmmirror.com/typescript/-/typescript-5.7.3.tgz"
   integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
 
+ufo@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.npmmirror.com/ufo/-/ufo-1.5.4.tgz"
+  integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
+
 unbox-primitive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz"
@@ -4407,6 +4480,30 @@ universalify@^0.1.0:
   resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+unplugin-vue-components@^28.0.0:
+  version "28.0.0"
+  resolved "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-28.0.0.tgz"
+  integrity sha512-vYe0wSyqTVhyNFIad1iiGyQGhG++tDOMgohqenMDOAooMJP9vvzCdXTqCVx20A0rCQXFNjgoRbSeDAioLPH36Q==
+  dependencies:
+    "@antfu/utils" "^0.7.10"
+    "@rollup/pluginutils" "^5.1.4"
+    chokidar "^3.6.0"
+    debug "^4.4.0"
+    fast-glob "^3.3.3"
+    local-pkg "^0.5.1"
+    magic-string "^0.30.17"
+    minimatch "^9.0.5"
+    mlly "^1.7.3"
+    unplugin "^2.1.2"
+
+unplugin@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/unplugin/-/unplugin-2.1.2.tgz"
+  integrity sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==
+  dependencies:
+    acorn "^8.14.0"
+    webpack-virtual-modules "^0.6.2"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz"
@@ -4443,6 +4540,15 @@ vscode-uri@^3.0.8:
   resolved "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.0.8.tgz"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-i18n@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.0.1.tgz"
+  integrity sha512-pWAT8CusK8q9/EpN7V3oxwHwxWm6+Kp2PeTZmRGvdZTkUzMQDpbbmHp0TwQ8xw04XKm23cr6B4GL72y3W8Yekg==
+  dependencies:
+    "@intlify/core-base" "11.0.1"
+    "@intlify/shared" "11.0.1"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-tsc@^2.1.10:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.2.0.tgz"
@@ -4451,7 +4557,7 @@ vue-tsc@^2.1.10:
     "@volar/typescript" "~2.4.11"
     "@vue/language-core" "2.2.0"
 
-vue@^3.2.25, vue@^3.4.0, vue@^3.5.13, vue@3.5.13:
+vue@^3.0.0, vue@^3.2.25, vue@^3.4.0, vue@^3.5.13, "vue@2 || 3", vue@3.5.13:
   version "3.5.13"
   resolved "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz"
   integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
@@ -4462,6 +4568,11 @@ vue@^3.2.25, vue@^3.4.0, vue@^3.5.13, vue@3.5.13:
     "@vue/server-renderer" "3.5.13"
     "@vue/shared" "3.5.13"
 
+webpack-virtual-modules@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz"
+  integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
+
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz"