fix
This commit is contained in:
39
README.md
39
README.md
@@ -79,7 +79,8 @@ npm install # 或 yarn
|
|||||||
|
|
||||||
# 编译流程
|
# 编译流程
|
||||||
|
|
||||||
- `build` 会生成 `dist` 文件夹,以及 `plugin.zip` 文件
|
- **build**
|
||||||
|
- `build` 会生成 `dist` 文件夹,以及 `plugin.zip` 文件
|
||||||
|
|
||||||
> 如果只需要 `dist` 文件夹,可以执行 `vite:build`
|
> 如果只需要 `dist` 文件夹,可以执行 `vite:build`
|
||||||
|
|
||||||
@@ -90,13 +91,22 @@ npm run build # 或 yarn build
|
|||||||
npm run vite:build # 或 yarn vite:build
|
npm run vite:build # 或 yarn vite:build
|
||||||
```
|
```
|
||||||
|
|
||||||
- `upload` 会将 `plugin.zip` 上传到 Kintone plugin
|
- **build:prod**
|
||||||
|
- `build:prod` 也是生成 `plugin.zip` 文件,但是会进行压缩和混淆,并且没有 sourceMap,在发布的时候使用
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build:prod # 或 yarn build:prod
|
||||||
|
```
|
||||||
|
|
||||||
|
- **upload**
|
||||||
|
- `upload` 会将 `plugin.zip` 上传到 Kintone plugin
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run upload # 或 yarn upload
|
npm run upload # 或 yarn upload
|
||||||
```
|
```
|
||||||
|
|
||||||
- `build-upload` 会顺序执行上面两步
|
- **build-upload**
|
||||||
|
- `build-upload` 会顺序执行上面两步
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run build-upload # 或 yarn build-upload
|
npm run build-upload # 或 yarn build-upload
|
||||||
@@ -199,6 +209,28 @@ desktop/mobile 的 js 会被 `vite` 使用 `lib` 模式打包,从而将所有
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 关于 KintoneRestAPIClient
|
||||||
|
|
||||||
|
在 desktop/mobile,直接使用:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
|
||||||
|
|
||||||
|
const client = new KintoneRestAPIClient();
|
||||||
|
client.app...
|
||||||
|
```
|
||||||
|
|
||||||
|
在 vue 中使用 useKintoneClient():
|
||||||
|
|
||||||
|
```vue
|
||||||
|
import { useKintoneClient } from '@/composables/useKintoneClient';
|
||||||
|
|
||||||
|
const client = useKintoneClient();// KintoneRestAPIClient
|
||||||
|
client.app...
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 关于 i18n
|
## 关于 i18n
|
||||||
|
|
||||||
在 desktop/mobile:
|
在 desktop/mobile:
|
||||||
@@ -211,6 +243,7 @@ console.log(t('config.button.label'));
|
|||||||
```
|
```
|
||||||
|
|
||||||
在 vue:
|
在 vue:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|||||||
@@ -18,12 +18,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Setting } from '@/types';
|
import type { Setting } from '@/types';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useKintoneClient } from '@/composables/useKintoneClient';
|
||||||
import type { Spinner } from 'kintone-ui-component';
|
import type { Spinner } from 'kintone-ui-component';
|
||||||
|
|
||||||
import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
|
import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
|
||||||
|
|
||||||
// 配置国际化
|
const { t: $t } = useI18n();// 配置国际化
|
||||||
const { t: $t } = useI18n();
|
const client = useKintoneClient();// KintoneRestAPIClient
|
||||||
|
|
||||||
// 定义组件属性
|
// 定义组件属性
|
||||||
const props = defineProps<{ pluginId: string }>();
|
const props = defineProps<{ pluginId: string }>();
|
||||||
@@ -48,8 +49,13 @@ onMounted(async () => {
|
|||||||
const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
|
const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
|
||||||
setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
|
setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
|
||||||
setting.message = savedSetting?.message || $t('config.message.default');
|
setting.message = savedSetting?.message || $t('config.message.default');
|
||||||
|
const { plugins } = await client.app.getPlugins({
|
||||||
|
app: kintone.app.getId() as number,
|
||||||
|
});
|
||||||
|
const pluginsInfo = plugins.map((p: any) => p.name).join(';show');
|
||||||
|
console.log('pluginsInfo', pluginsInfo);
|
||||||
// 模拟加载时间,展示 spinner 效果
|
// 模拟加载时间,展示 spinner 效果
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -84,7 +90,7 @@ async function save() {
|
|||||||
}
|
}
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
// 模拟保存时间,展示 spinner 效果
|
// 模拟保存时间,展示 spinner 效果
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||||
// 保存配置到插件
|
// 保存配置到插件
|
||||||
kintone.plugin.app.setConfig({
|
kintone.plugin.app.setConfig({
|
||||||
buttonName: setting.buttonName,
|
buttonName: setting.buttonName,
|
||||||
|
|||||||
13
src/composables/useKintoneClient.ts
Normal file
13
src/composables/useKintoneClient.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { inject } from 'vue';
|
||||||
|
import { KintoneClientInjectionKey } from '../plugins/kintoneClient';
|
||||||
|
import type { KintoneRestAPIClient } from '@kintone/rest-api-client';
|
||||||
|
|
||||||
|
export function useKintoneClient(): KintoneRestAPIClient {
|
||||||
|
const client = inject<KintoneRestAPIClient>(KintoneClientInjectionKey);
|
||||||
|
|
||||||
|
if (!client) {
|
||||||
|
throw new Error('Kintone client is not provided. Make sure to install the kintoneClient plugin.');
|
||||||
|
}
|
||||||
|
|
||||||
|
return client;
|
||||||
|
}
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import Config from './components/Config.vue';
|
import Config from './components/Config.vue';
|
||||||
import i18n from './i18n';
|
import i18n from './i18n';
|
||||||
|
import { kintoneClientPlugin } from './plugins/kintoneClient';
|
||||||
|
|
||||||
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).mount('#app');
|
createApp(Config, { pluginId: kintone.$PLUGIN_ID }).use(i18n).use(kintoneClientPlugin).mount('#app');
|
||||||
|
|||||||
16
src/plugins/kintoneClient.ts
Normal file
16
src/plugins/kintoneClient.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { type App } from 'vue';
|
||||||
|
import { KintoneRestAPIClient } from '@kintone/rest-api-client';
|
||||||
|
|
||||||
|
// 创建注入的 Symbol(用于类型安全)
|
||||||
|
export const KintoneClientInjectionKey = Symbol('kintone-client');
|
||||||
|
|
||||||
|
// 插件安装函数
|
||||||
|
export const kintoneClientPlugin = {
|
||||||
|
install(app: App) {
|
||||||
|
// 创建客户端实例(不需要参数)
|
||||||
|
const client = new KintoneRestAPIClient();
|
||||||
|
|
||||||
|
// 提供给整个应用使用
|
||||||
|
app.provide(KintoneClientInjectionKey, client);
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -151,6 +151,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
|
target: 'es2022',
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
config: path.resolve(__dirname, 'index.html'),
|
config: path.resolve(__dirname, 'index.html'),
|
||||||
@@ -163,7 +164,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
sourcemap: isProd ? false : 'inline', // 生产环境关闭 sourcemap,开发环境使用 inline
|
sourcemap: isProd ? false : 'inline', // 生产环境关闭 sourcemap,开发环境使用 inline
|
||||||
minify: isProd ? 'terser' : false, // 生产环境使用 terser 混淆,开发环境不混淆
|
minify: 'terser', // 强制进行混淆,避免全局变量被污染的问题
|
||||||
...(isProd && {
|
...(isProd && {
|
||||||
terserOptions: {
|
terserOptions: {
|
||||||
compress: {
|
compress: {
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ function createIIFEConfig(platform: 'desktop' | 'mobile'): UserConfig {
|
|||||||
global: 'window',
|
global: 'window',
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
|
target: 'es2022',
|
||||||
lib: {
|
lib: {
|
||||||
entry: path.resolve(__dirname, `src/js/${platform}.ts`),
|
entry: path.resolve(__dirname, `src/js/${platform}.ts`),
|
||||||
name: `${packageJson.name.replaceAll('-', '_')}_${platform}_iife`,
|
name: `${packageJson.name.replaceAll('-', '_')}_${platform}_iife`,
|
||||||
@@ -38,7 +39,7 @@ function createIIFEConfig(platform: 'desktop' | 'mobile'): UserConfig {
|
|||||||
},
|
},
|
||||||
outDir: path.resolve(__dirname, `dist-iife/${platform}`), // 输出到 dist-iife 目录
|
outDir: path.resolve(__dirname, `dist-iife/${platform}`), // 输出到 dist-iife 目录
|
||||||
sourcemap: isProd ? false : 'inline', // 生产环境关闭,开发环境使用 inline
|
sourcemap: isProd ? false : 'inline', // 生产环境关闭,开发环境使用 inline
|
||||||
minify: isProd ? 'terser' : false, // 生产环境使用 terser 混淆,开发环境不混淆
|
minify: 'terser', // 强制进行混淆,避免全局变量被污染的问题
|
||||||
...(isProd && {
|
...(isProd && {
|
||||||
terserOptions: {
|
terserOptions: {
|
||||||
compress: {
|
compress: {
|
||||||
|
|||||||
Reference in New Issue
Block a user