Frontend: Removed the button and AiScript widgets
This commit is contained in:
parent
22208d4c68
commit
2fea3b79a7
GPG Key ID:
BF6CB659ADEE60EC
|
|
@ -1,206 +0,0 @@
|
|||
<template>
|
||||
<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
|
||||
<template #header
|
||||
><i class="ph-terminal-window ph-bold ph-lg"></i
|
||||
>{{ i18n.ts._widgets.aiscript }}</template
|
||||
>
|
||||
|
||||
<div class="uylguesu _monospace">
|
||||
<textarea
|
||||
v-model="widgetProps.script"
|
||||
placeholder="(1 + 1)"
|
||||
></textarea>
|
||||
<button class="_buttonPrimary" @click="run">RUN</button>
|
||||
<div class="logs">
|
||||
<div
|
||||
v-for="log in logs"
|
||||
:key="log.id"
|
||||
class="log"
|
||||
:class="{ print: log.print }"
|
||||
>
|
||||
{{ log.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { AiScript, parse, utils } from "@syuilo/aiscript";
|
||||
import {
|
||||
useWidgetPropsManager,
|
||||
Widget,
|
||||
WidgetComponentEmits,
|
||||
WidgetComponentExpose,
|
||||
WidgetComponentProps,
|
||||
} from "./widget";
|
||||
import { GetFormResultType } from "@/scripts/form";
|
||||
import * as os from "@/os";
|
||||
import MkContainer from "@/components/MkContainer.vue";
|
||||
import { createAiScriptEnv } from "@/scripts/aiscript/api";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const name = "aiscript";
|
||||
|
||||
const widgetPropsDef = {
|
||||
showHeader: {
|
||||
type: "boolean" as const,
|
||||
default: true,
|
||||
},
|
||||
script: {
|
||||
type: "string" as const,
|
||||
multiline: true,
|
||||
default: "(1 + 1)",
|
||||
hidden: true,
|
||||
},
|
||||
};
|
||||
|
||||
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
|
||||
|
||||
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
|
||||
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
|
||||
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
|
||||
const props = defineProps<{ widget?: Widget<WidgetProps> }>();
|
||||
const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
|
||||
|
||||
const { widgetProps, configure } = useWidgetPropsManager(
|
||||
name,
|
||||
widgetPropsDef,
|
||||
props,
|
||||
emit
|
||||
);
|
||||
|
||||
const logs = ref<
|
||||
{
|
||||
id: string;
|
||||
text: string;
|
||||
print: boolean;
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
const run = async () => {
|
||||
logs.value = [];
|
||||
const aiscript = new AiScript(
|
||||
createAiScriptEnv({
|
||||
storageKey: "widget",
|
||||
token: $i?.token,
|
||||
}),
|
||||
{
|
||||
in: (q) => {
|
||||
return new Promise((ok) => {
|
||||
os.inputText({
|
||||
title: q,
|
||||
}).then(({ canceled, result: a }) => {
|
||||
ok(a);
|
||||
});
|
||||
});
|
||||
},
|
||||
out: (value) => {
|
||||
logs.value.push({
|
||||
id: Math.random().toString(),
|
||||
text:
|
||||
value.type === "str"
|
||||
? value.value
|
||||
: utils.valToString(value),
|
||||
print: true,
|
||||
});
|
||||
},
|
||||
log: (type, params) => {
|
||||
switch (type) {
|
||||
case "end":
|
||||
logs.value.push({
|
||||
id: Math.random().toString(),
|
||||
text: utils.valToString(params.val, true),
|
||||
print: false,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
let ast;
|
||||
try {
|
||||
ast = parse(widgetProps.script);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: "Syntax error :(",
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await aiscript.exec(ast);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: err,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose<WidgetComponentExpose>({
|
||||
name,
|
||||
configure,
|
||||
id: props.widget ? props.widget.id : null,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uylguesu {
|
||||
text-align: right;
|
||||
|
||||
> textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
padding: 16px;
|
||||
color: var(--fg);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
> button {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
padding: 0 10px;
|
||||
height: 28px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
> .logs {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .log {
|
||||
&:not(.print) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
<template>
|
||||
<div class="mkw-button">
|
||||
<MkButton :primary="widgetProps.colored" full @click="run">
|
||||
{{ widgetProps.label }}
|
||||
</MkButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { AiScript, parse, utils } from "@syuilo/aiscript";
|
||||
import {
|
||||
useWidgetPropsManager,
|
||||
Widget,
|
||||
WidgetComponentEmits,
|
||||
WidgetComponentExpose,
|
||||
WidgetComponentProps,
|
||||
} from "./widget";
|
||||
import { GetFormResultType } from "@/scripts/form";
|
||||
import * as os from "@/os";
|
||||
import { createAiScriptEnv } from "@/scripts/aiscript/api";
|
||||
import { $i } from "@/account";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
|
||||
const name = "button";
|
||||
|
||||
const widgetPropsDef = {
|
||||
label: {
|
||||
type: "string" as const,
|
||||
default: "BUTTON",
|
||||
},
|
||||
colored: {
|
||||
type: "boolean" as const,
|
||||
default: true,
|
||||
},
|
||||
script: {
|
||||
type: "string" as const,
|
||||
multiline: true,
|
||||
default: 'Mk:dialog("hello" "world")',
|
||||
},
|
||||
};
|
||||
|
||||
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
|
||||
|
||||
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
|
||||
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
|
||||
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
|
||||
const props = defineProps<{ widget?: Widget<WidgetProps> }>();
|
||||
const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
|
||||
|
||||
const { widgetProps, configure } = useWidgetPropsManager(
|
||||
name,
|
||||
widgetPropsDef,
|
||||
props,
|
||||
emit
|
||||
);
|
||||
|
||||
const run = async () => {
|
||||
const aiscript = new AiScript(
|
||||
createAiScriptEnv({
|
||||
storageKey: "widget",
|
||||
token: $i?.token,
|
||||
}),
|
||||
{
|
||||
in: (q) => {
|
||||
return new Promise((ok) => {
|
||||
os.inputText({
|
||||
title: q,
|
||||
}).then(({ canceled, result: a }) => {
|
||||
ok(a);
|
||||
});
|
||||
});
|
||||
},
|
||||
out: (value) => {
|
||||
// nop
|
||||
},
|
||||
log: (type, params) => {
|
||||
// nop
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
let ast;
|
||||
try {
|
||||
ast = parse(widgetProps.script);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: "Syntax error :(",
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await aiscript.exec(ast);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: "error",
|
||||
text: err,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose<WidgetComponentExpose>({
|
||||
name,
|
||||
configure,
|
||||
id: props.widget ? props.widget.id : null,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mkw-button {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -69,14 +69,6 @@ export default function (app: App) {
|
|||
"MkwJobQueue",
|
||||
defineAsyncComponent(() => import("./job-queue.vue"))
|
||||
);
|
||||
app.component(
|
||||
"MkwButton",
|
||||
defineAsyncComponent(() => import("./button.vue"))
|
||||
);
|
||||
app.component(
|
||||
"MkwAiscript",
|
||||
defineAsyncComponent(() => import("./aiscript.vue"))
|
||||
);
|
||||
app.component(
|
||||
"MkwUserList",
|
||||
defineAsyncComponent(() => import("./user-list.vue"))
|
||||
|
|
@ -107,6 +99,4 @@ export const widgets = [
|
|||
"serverInfo",
|
||||
"onlineUsers",
|
||||
"jobQueue",
|
||||
"button",
|
||||
"aiscript",
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue