From f37f15482e5a1eff94a75aac724e160810fdcf13 Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Tue, 21 Jan 2025 17:41:15 +0800
Subject: [PATCH] load app and fields

---
 .../src/components/Config.vue                 |  33 ++-
 .../src/components/basic/PluginDropdown.vue   |   9 +-
 .../src/components/basic/PluginInput.vue      |   6 +-
 .../src/components/basic/PluginTableArea.vue  |  58 ++---
 .../basic/PluginTableConditionRow.vue         |  12 +-
 .../basic/PluginTableConnectRow.vue           |   6 +-
 .../my-kintone-plugin/src/css/config.css      |  18 +-
 .../my-kintone-plugin/src/js/helper.ts        |  51 +++++
 .../src/js/kintone-config-helper.js           | 209 ------------------
 .../src/js/kintone-rest-api-client.ts         |  59 +++++
 .../my-kintone-plugin/src/types/kintone.d.ts  |  45 ----
 .../src/types/my-kintone.d.ts                 |  17 ++
 12 files changed, 211 insertions(+), 312 deletions(-)
 delete mode 100644 vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
 create mode 100644 vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
 delete mode 100644 vue-project/my-kintone-plugin/src/types/kintone.d.ts
 create mode 100644 vue-project/my-kintone-plugin/src/types/my-kintone.d.ts

diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue
index 9138696..154ca55 100644
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/vue-project/my-kintone-plugin/src/components/Config.vue
@@ -3,27 +3,29 @@
   <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
 
   <plugin-row class="header-row border">
-    <plugin-input v-model="data.buttonName" label="集約ボタン名" />
+    <plugin-input v-model="data.buttonName" placeholder="集約" 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 id="main-area" ref="mainArea">
+    <plugin-table-area v-for="joinTable in data.joinTables" :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>
+
+  <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable } from '@/js/helper';
+import { createEmptyJoinTable, fetchApps } from '@/js/helper';
 import type { JoinTable, SavedData } from '@/types/model';
+import type { KucSpinnerEl } from '@/types/my-kintone';
 
-import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
+import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
 
 const props = defineProps<{ pluginId: string }>();
-const loading = ref(true);
+const loading = ref(false);
 const data: SavedData = reactive({
   buttonName: '',
   joinTables: [] as JoinTable[],
@@ -31,15 +33,24 @@ const data: SavedData = reactive({
 
 provide('savedData', data);
 
+const mainArea = shallowRef<HTMLElement | null>(null);
+const spinner = shallowRef<KucSpinnerEl | null>(null);
+
 onMounted(async () => {
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
   data.buttonName = savedData?.buttonName || '集約';
-  data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
-  loading.value = false;
+  data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
+  nextTick(async () => {
+    spinner.value?.close(); // 修复不自动挂载到节点的 bug
+    loading.value = true;
+    await fetchApps();
+    loading.value = false;
+  });
 });
 
-const mainTable = computed(() => data.joinTables[0]);
-const otherTables = computed(() => data.joinTables.slice(1));
+watch(loading, (load) => {
+  load ? spinner.value?.open() : spinner.value?.close();
+});
 
 watch(
   () => data.joinTables.length,
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue
index bc8591e..336588e 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue
@@ -1,16 +1,19 @@
 <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" />
+    <kuc-combobox className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" :disabled="disabled"/>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
+import type { DropdownItem } from 'kintone-ui-component';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
   label: string;
-  items: kintone.fieldTypes.DropDown['Item'][];
+  disabled: boolean;
+  items: DropdownItem[];
   modelValue: string;
 }>();
 
@@ -18,7 +21,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: kintone.Event) => {
+const updateValue = (event: KucEvent) => {
   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
index b4dce50..8a33ade 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue
@@ -1,23 +1,25 @@
 <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" />
+    <kuc-text :placeholder="placeholder" className="kuc-text-input" :value="modelValue" @change="updateValue" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
   label: string;
   modelValue: string;
+  placeholder: string;
 }>();
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: kintone.Event) => {
+const updateValue = (event: KucEvent) => {
   emit('update:modelValue', event.detail.value);
 };
 </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
index 706ca56..947f222 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
@@ -2,22 +2,22 @@
   <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-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp"/>
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown label="テーブル" :items="tables" v-model="table.table" />
+        <plugin-dropdown :disabled="!table.app" label="テーブル" :items="tables" v-model="table.table"  @change="select"/>
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
-        <plugin-table-connect-row connector="=" v-model="table.onConditions" />
+        <plugin-table-connect-row connector="=" :disabled="!table.app" v-model="table.onConditions" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="取得フィールド" />
-        <plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
+        <plugin-table-connect-row connector="→" :disabled="!table.app" v-model="table.fieldsMapping" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="絞込条件" />
-        <plugin-table-condition-row v-model="table.whereConditions" />
+        <plugin-table-condition-row :disabled="!table.app" v-model="table.whereConditions" />
       </plugin-row>
     </div>
     <div class="table-action-area">
@@ -27,40 +27,30 @@
 </template>
 
 <script setup lang="ts">
+import { fetchApps, fetchFields, getField, resetTable } from '@/js/helper';
+import { types } from '@/js/kintone-rest-api-client';
 import type { JoinTable, SavedData } from '@/types/model';
-import { inject } from 'vue';
+import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
+import { inject, onMounted, ref } 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 apps = ref([] as KucDropdownItem[]);
+const tables = ref([] as KucDropdownItem[]);
+
+onMounted(async () => {
+  apps.value = await fetchApps();
+});
+
+const selectApp = async (e: KucEvent) => {
+  resetTable(props.table);
+  tables.value = await fetchFields(e.detail.value, types.SUBTABLE);
+}
+
+const select = async (e: KucEvent) => {
+  console.log(getField(e.detail.value));
+}
 
 const isJoinConditionShown = (table: JoinTable) => {
   return savedData.joinTables[0].id !== table.id;
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
index 8262ac9..c2f2823 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -3,12 +3,14 @@
 </template>
 
 <script setup lang="ts">
+import type { KucDropdownItem } from '@/types/my-kintone';
 import type { WhereCondition } from '@/types/model';
 import { defineProps, defineEmits } from 'vue';
 import { Dropdown } from 'kintone-ui-component/lib/dropdown';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
+  disabled: boolean;
 }>();
 
 const renderDropdown = (cellData: string) => {
@@ -62,17 +64,17 @@ const columns = [
   },
 ];
 
-const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
-const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const leftFields = [] as KucDropdownItem[];
+const rightFields = [] as KucDropdownItem[];
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
+  (e: 'update:modelValue', value: WhereCondition[]): void;
 }>();
 
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+const changeRow = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
 };
 
-const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+const changeField = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
   item[key] = value;
   emit('update:modelValue', props.modelValue);
 };
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
index 4e2aaf6..816550d 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import type { KucDropdownItem } from '@/types/my-kintone';
 import type { FieldsJoinMapping } from '@/types/model';
 import { defineProps, defineEmits } from 'vue';
 import { Dropdown } from 'kintone-ui-component/lib/dropdown';
@@ -10,6 +11,7 @@ import { Dropdown } from 'kintone-ui-component/lib/dropdown';
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
+  disabled: boolean;
 }>();
 
 const renderDropdown = (cellData: string) => {
@@ -44,8 +46,8 @@ const columns = [
   },
 ];
 
-const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
-const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const leftFields = [] as KucDropdownItem[];
+const rightFields = [] as KucDropdownItem[];
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css
index 3fc358f..bc9cfb3 100644
--- a/vue-project/my-kintone-plugin/src/css/config.css
+++ b/vue-project/my-kintone-plugin/src/css/config.css
@@ -24,12 +24,27 @@
   padding-left: 20px;
   line-height: 40px;
 }
-/* laebl input 单号的情况 */
+/* laebl input 单行的情况 */
 .flex-row .kintoneplugin-label {
   margin: 0;
   width: 10em;
 }
 
+/* 遮罩 */
+#main-area {
+  position: relative;
+}
+#main-area .kuc-spinner-1-18-0__mask {
+  position: absolute;
+  background-color: white;
+}
+#main-area .kuc-spinner-1-18-0__spinner {
+  position: absolute;
+}
+#main-area .kuc-spinner-1-18-0__spinner__loader {
+  fill: #3498db;
+}
+
 /* 表格内容垂直居中 */
 .table-area {
   margin: 0;
@@ -64,6 +79,7 @@
 .kuc-text-input {
   --kuc-text-input-width: max(15vw, 200px);
   --kuc-dropdown-toggle-width: max(15vw, 200px);
+  --kuc-combobox-toggle-width: max(15vw, 200px);
 }
 
 /* 统一 kintone +/- 按钮样式 */
diff --git a/vue-project/my-kintone-plugin/src/js/helper.ts b/vue-project/my-kintone-plugin/src/js/helper.ts
index cd7d98d..22efbe1 100644
--- a/vue-project/my-kintone-plugin/src/js/helper.ts
+++ b/vue-project/my-kintone-plugin/src/js/helper.ts
@@ -1,4 +1,6 @@
 import type { JoinTable } from '@/types/model';
+import type { KucDropdownItem } from '@/types/my-kintone';
+import { client, isType, type App, type Properties, type OneOf } from './kintone-rest-api-client';
 
 export const condition = {
   unset: '',
@@ -14,3 +16,52 @@ export function createEmptyJoinTable(id = Number(new Date())) {
     whereConditions: [{ field: '', condition: condition.unset, data: '' }],
   } as JoinTable;
 }
+
+export function resetTable(table: JoinTable) {
+  table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
+  table.onConditions = [{ leftField: '', rightField: '' }];
+  table.fieldsMapping = [{ leftField: '', rightField: '' }];
+}
+
+const LIMIT = 100; // 每次请求的最大应用数量
+let allAppsCache: KucDropdownItem[] = [];
+let allFieldsCache: Properties = {};
+export const fetchApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
+  if (allAppsCache.length) return allAppsCache;
+  const { apps } = await client.app.getApps({ limit: LIMIT, offset });
+  const allApps: KucDropdownItem[] = [
+    ..._apps,
+    ...apps.map((app: App) => ({ value: app.appId, label: app.name + '（ID: ' + app.appId + '）' })),
+  ];
+  if (apps.length === LIMIT) {
+    return fetchApps(offset + LIMIT, allApps);
+  }
+  allAppsCache = allApps.sort((a, b) => Number(b.value) - Number(a.value));
+  return allApps;
+};
+
+export const fetchFields = async (appId: string, filter: OneOf['type']) => {
+  let properties = allFieldsCache;
+  if (!allFieldsCache.length) {
+    properties = (await client.app.getFormFields({ app: appId })).properties;
+    allFieldsCache = properties;
+  }
+  const labels = Object.keys(properties).reduce((acc, fieldCode) => {
+    const field = properties[fieldCode];
+    if (filter && !isType[filter](field)) return acc;
+    acc.push({
+      value: fieldCode,
+      label: field.label + '（FC: ' + fieldCode + '）',
+    });
+    return acc;
+  }, [] as KucDropdownItem[]);
+  return labels;
+};
+
+export const getField = (fieldCode: string) => {
+  const field = allFieldsCache[fieldCode];
+  if (isType.SUBTABLE(field)) {
+    console.log(field.fields);
+  }
+  return field;
+};
diff --git a/vue-project/my-kintone-plugin/src/js/kintone-config-helper.js b/vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
deleted file mode 100644
index 7898101..0000000
--- a/vue-project/my-kintone-plugin/src/js/kintone-config-helper.js
+++ /dev/null
@@ -1,209 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (factory((global.KintoneConfigHelper = {})));
-}(this, (function (exports) { 'use strict';
-
-  var ALL_FIELD_TYPES = [
-      "SINGLE_LINE_TEXT",
-      "MULTI_LINE_TEXT",
-      "RICH_TEXT",
-      "NUMBER",
-      "CALC",
-      "RADIO_BUTTON",
-      "CHECK_BOX",
-      "MULTI_SELECT",
-      "DROP_DOWN",
-      "DATE",
-      "TIME",
-      "DATETIME",
-      "FILE",
-      "LINK",
-      "USER_SELECT",
-      "ORGANIZATION_SELECT",
-      "GROUP_SELECT",
-      "REFERENCE_TABLE",
-      "SPACER",
-      "GROUP",
-      "SUBTABLE",
-      "RECORD_NUMBER",
-      "CREATOR",
-      "CREATED_TIME",
-      "MODIFIER",
-      "UPDATED_TIME"
-  ];
-  function createKintoneClient(kintone) {
-      function fetchFormInfoByFields() {
-          var url = kintone.api.url("/k/v1/preview/app/form/fields", true);
-          var body = {
-              app: kintone.app.getId()
-          };
-          return kintone.api(url, "GET", body).then(function (resp) {
-              return resp.properties;
-          });
-      }
-      function fetchFormInfoByLayout() {
-          var url = kintone.api.url("/k/v1/preview/app/form/layout", true);
-          var body = {
-              app: kintone.app.getId()
-          };
-          return kintone.api(url, "GET", body).then(function (resp) {
-              return resp.layout;
-          });
-      }
-      return {
-          fetchFormInfoByFields: fetchFormInfoByFields,
-          fetchFormInfoByLayout: fetchFormInfoByLayout
-      };
-  }
-
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */
-
-  var __assign = function() {
-      __assign = Object.assign || function __assign(t) {
-          for (var s, i = 1, n = arguments.length; i < n; i++) {
-              s = arguments[i];
-              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-          }
-          return t;
-      };
-      return __assign.apply(this, arguments);
-  };
-
-  function __rest(s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-          t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function")
-          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-              t[p[i]] = s[p[i]];
-      return t;
-  }
-
-  var NOT_EXIST_MESSAGE = "Either the specified field type does not exist, or this method cannot respond the specified field type.";
-  var NOT_MATCH_MESSAGE = "Specify either characters or an array of characters for the getAllFields parameter.";
-
-  function createGetFields(kintoneClient, Promise_) {
-      var Promise = Promise_;
-      var fetchFormInfoByFields = kintoneClient.fetchFormInfoByFields, fetchFormInfoByLayout = kintoneClient.fetchFormInfoByLayout;
-      function removeUnnecessaryProperties(field) {
-          var _ = field.size, rest = __rest(field, ["size"]);
-          return rest;
-      }
-      function getFieldInfo(layoutFields) {
-          return layoutFields
-              .filter(function (layout) { return layout.type !== "LABEL" && layout.type !== "HR"; })
-              .map(function (field) { return removeUnnecessaryProperties(field); });
-      }
-      function modifiedLayoutResp(layoutList) {
-          return layoutList.reduce(function (acc, layout) {
-              switch (layout.type) {
-                  case "ROW":
-                      return acc.concat(getFieldInfo(layout.fields));
-                  case "GROUP":
-                      return acc.concat([
-                          { type: layout.type, code: layout.code }
-                      ], layout.layout
-                          .map(function (childLayout) { return getFieldInfo(childLayout.fields); })
-                          .reduce(function (acc, cur) { return acc.concat(cur); }, []));
-                  case "SUBTABLE":
-                      var layoutFieldsIncludeSubtableCode = layout.fields.map(function (layoutField) { return (__assign({}, layoutField, { subtableCode: layout.code })); });
-                      return acc.concat([
-                          { type: layout.type, code: layout.code }
-                      ], getFieldInfo(layoutFieldsIncludeSubtableCode));
-              }
-          }, []);
-      }
-      function getLabeledFields(fieldsResp) {
-          return Object.keys(fieldsResp).reduce(function (acc, key) {
-              var _a;
-              var field = fieldsResp[key];
-              if (field.type === "SUBTABLE") {
-                  return __assign({}, acc, getLabeledFields(field.fields));
-              }
-              return field.label ? __assign({}, acc, (_a = {}, _a[field.code] = field.label, _a)) : acc;
-          }, {});
-      }
-      function addLabel(layoutFieldList, fieldsResp) {
-          var labeledFields = getLabeledFields(fieldsResp);
-          return layoutFieldList.map(function (layoutField) {
-              return labeledFields[layoutField.code]
-                  ? __assign({}, layoutField, { label: labeledFields[layoutField.code] }) : layoutField;
-          });
-      }
-      function getLookupFieldKeys(fieldsResp) {
-          return Object.keys(fieldsResp).filter(function (key) { return typeof fieldsResp[key].lookup !== "undefined"; });
-      }
-      function filterLookupField(layoutFieldList, fieldsResp) {
-          var lookupFieldKeys = getLookupFieldKeys(fieldsResp);
-          if (lookupFieldKeys.length === 0)
-              ;
-          return layoutFieldList.filter(function (layoutField) {
-              return !lookupFieldKeys.some(function (key) { return fieldsResp[key].code === layoutField.code; });
-          });
-      }
-      function flattenFieldsForSubtable(fieldsResp) {
-          return Object.keys(fieldsResp).reduce(function (fields, key) {
-              var _a, _b;
-              if (fieldsResp[key].type === "SUBTABLE") {
-                  return __assign({}, fields, (_a = {}, _a[key] = fieldsResp[key], _a), fieldsResp[key].fields);
-              }
-              return __assign({}, fields, (_b = {}, _b[key] = fieldsResp[key], _b));
-          }, {});
-      }
-      function fetchAllFields(selectFieldTypes) {
-          return Promise.all([fetchFormInfoByFields(), fetchFormInfoByLayout()]).then(function (_a) {
-              var fieldsResp = _a[0], layoutResp = _a[1];
-              var fieldList = addLabel(filterLookupField(modifiedLayoutResp(layoutResp), flattenFieldsForSubtable(fieldsResp)), fieldsResp);
-              return selectFieldTypes
-                  ? fieldList.filter(function (field) { return selectFieldTypes.indexOf(field.type) !== -1; })
-                  : fieldList;
-          });
-      }
-      function validateFieldType(fieldType) {
-          return ALL_FIELD_TYPES.some(function (type) { return type === fieldType; });
-      }
-      function validateGetAllFieldsArgument(fieldType) {
-          if (typeof fieldType === "string") {
-              return validateFieldType(fieldType) ? null : NOT_EXIST_MESSAGE;
-          }
-          if (Array.isArray(fieldType)) {
-              return fieldType.every(validateFieldType) ? null : NOT_EXIST_MESSAGE;
-          }
-          return NOT_MATCH_MESSAGE;
-      }
-      function getFields(selectFieldType) {
-          if (typeof selectFieldType === "undefined") {
-              return fetchAllFields();
-          }
-          var error = validateGetAllFieldsArgument(selectFieldType);
-          if (error) {
-              return Promise.reject(new Error(error));
-          }
-          return fetchAllFields(Array.isArray(selectFieldType) ? selectFieldType : [selectFieldType]);
-      }
-      return getFields;
-  }
-
-  var kintone = window.kintone;
-  var kintoneClient = createKintoneClient(kintone);
-  var getFields = createGetFields(kintoneClient, kintone.Promise);
-
-  exports.getFields = getFields;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
diff --git a/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts b/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
new file mode 100644
index 0000000..8e11435
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
@@ -0,0 +1,59 @@
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+
+export const client = new KintoneRestAPIClient();
+
+export type App = {
+  appId: string;
+  name: string;
+};
+
+export type Properties = Awaited<ReturnType<typeof client.app.getFormFields>>['properties'];
+export type OneOf = Properties[string];
+
+const typeNames = [
+  'RECORD_NUMBER',
+  'CREATOR',
+  'CREATED_TIME',
+  'MODIFIER',
+  'UPDATED_TIME',
+  'CATEGORY',
+  'STATUS',
+  'STATUS_ASSIGNEE',
+  'SINGLE_LINE_TEXT',
+  'NUMBER',
+  'CALC',
+  'MULTI_LINE_TEXT',
+  'RICH_TEXT',
+  'LINK',
+  'CHECK_BOX',
+  'RADIO_BUTTON',
+  'DROP_DOWN',
+  'MULTI_SELECT',
+  'FILE',
+  'DATE',
+  'TIME',
+  'DATETIME',
+  'USER_SELECT',
+  'ORGANIZATION_SELECT',
+  'GROUP_SELECT',
+  'GROUP',
+  'REFERENCE_TABLE',
+  'SUBTABLE',
+] as const satisfies readonly OneOf['type'][];
+
+export const types = typeNames.reduce(
+  (acc, name) => {
+    acc[name] = name;
+    return acc;
+  },
+  {} as Record<(typeof typeNames)[number], (typeof typeNames)[number]>,
+);
+
+type ExtractOneOf<T extends OneOf['type']> = Extract<OneOf, { type: T }>;
+function createTypeGuard<T extends OneOf['type']>(type: T) {
+  return (value: OneOf): value is ExtractOneOf<T> => value.type === type;
+}
+
+export const isType = Object.fromEntries(
+  typeNames.map((typeName) => [typeName, createTypeGuard(typeName as OneOf['type'])]),
+) as { [K in (typeof typeNames)[number]]: (value: OneOf) => value is ExtractOneOf<K> };
diff --git a/vue-project/my-kintone-plugin/src/types/kintone.d.ts b/vue-project/my-kintone-plugin/src/types/kintone.d.ts
deleted file mode 100644
index ad58b5f..0000000
--- a/vue-project/my-kintone-plugin/src/types/kintone.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// https://cybozu.dev/ja/kintone/docs/overview/field-types/
-// https://cybozudev.kf5.com/hc/kb/article/201593/
-declare namespace kintone.fieldTypes {
-  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/
-// import { KintoneRestAPIClient } from '@kintone/rest-api-client';
-// // 定义了一个Lookup类型，其中给lookup设置的是对象类型
-// // 下面还有展开，到具体用的时候还会定义的更详细，这里够用了
-// export type Lookup = {
-//   label: string;
-//   code: string;
-//   lookup: object;
-// };
-// // 创建sdk客户端
-// const client = new KintoneRestAPIClient({
-//   baseUrl: 'https://yourdomain.cybozu.cn',
-// });
-// // 获取一个应用中所有类型是Lookup的字段
-// export const getFormSetting = async () => {
-//   const prop = (await client.app.getFormFields({ app: kintone.app.getId() as number })).properties;
-//   const lookUpFields = Object.values(prop).filter((f) => 'lookup' in f) as Lookup[];
-//   return lookUpFields;
-// };
diff --git a/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts b/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
new file mode 100644
index 0000000..1c0d110
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
@@ -0,0 +1,17 @@
+// 组件相关
+export interface KucDropdownItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface KucSpinnerEl {
+  open: function;
+  close: function;
+}
+
+export interface KucEvent {
+  detail: {
+    value: string;
+  };
+}