mirror of
https://git.joinfirefish.org/firefish/firefish.git
synced 2024-05-20 18:51:12 +02:00
474 lines
12 KiB
Vue
474 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
|
<header>
|
|
<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
|
|
<div class="buttons">
|
|
<button @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
|
|
<button @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
|
|
<button @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
|
|
|
|
<ui-input v-model="title">
|
|
<span>{{ $t('title') }}</span>
|
|
</ui-input>
|
|
|
|
<template v-if="showOptions">
|
|
<ui-input v-model="summary">
|
|
<span>{{ $t('summary') }}</span>
|
|
</ui-input>
|
|
|
|
<ui-input v-model="name">
|
|
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
|
|
<span>{{ $t('url') }}</span>
|
|
</ui-input>
|
|
|
|
<ui-switch v-model="alignCenter">{{ $t('align-center') }}</ui-switch>
|
|
|
|
<ui-select v-model="font">
|
|
<template #label>{{ $t('font') }}</template>
|
|
<option value="serif">{{ $t('fontSerif') }}</option>
|
|
<option value="sans-serif">{{ $t('fontSansSerif') }}</option>
|
|
</ui-select>
|
|
|
|
<div class="eyeCatch">
|
|
<ui-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('set-eye-catching-image') }}</ui-button>
|
|
<div v-else-if="eyeCatchingImage">
|
|
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name"/>
|
|
<ui-button @click="removeEyeCatchingImage()" v-if="!readonly"><fa :icon="faTrashAlt"/> {{ $t('remove-eye-catching-image') }}</ui-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<x-blocks class="content" v-model="content" :ai-script="aiScript"/>
|
|
|
|
<ui-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
|
|
</section>
|
|
</div>
|
|
|
|
<ui-container :body-togglable="true">
|
|
<template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template>
|
|
<div class="qmuvgica">
|
|
<div class="variables" v-show="variables.length > 0">
|
|
<template v-for="variable in variables">
|
|
<x-variable
|
|
:value="variable"
|
|
:removable="true"
|
|
@input="v => updateVariable(v)"
|
|
@remove="() => removeVariable(variable)"
|
|
:key="variable.name"
|
|
:ai-script="aiScript"
|
|
:name="variable.name"
|
|
:title="variable.name"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
|
|
|
|
<ui-info><span v-html="$t('variables-info')"></span><a @click="() => moreDetails = true" style="display:block;">{{ $t('more-details') }}</a></ui-info>
|
|
|
|
<template v-if="moreDetails">
|
|
<ui-info><span v-html="$t('variables-info2')"></span></ui-info>
|
|
<ui-info><span v-html="$t('variables-info3')"></span></ui-info>
|
|
<ui-info><span v-html="$t('variables-info4')"></span></ui-info>
|
|
</template>
|
|
</div>
|
|
</ui-container>
|
|
|
|
<ui-container :body-togglable="true" :expanded="false">
|
|
<template #header><fa :icon="faCode"/> {{ $t('inspector') }}</template>
|
|
<div style="padding:0 32px 32px 32px;">
|
|
<ui-textarea :value="JSON.stringify(content, null, 2)" readonly tall>{{ $t('content') }}</ui-textarea>
|
|
<ui-textarea :value="JSON.stringify(variables, null, 2)" readonly tall>{{ $t('variables') }}</ui-textarea>
|
|
</div>
|
|
</ui-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
|
|
import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
|
|
import i18n from '../../../../i18n';
|
|
import XVariable from './page-editor.script-block.vue';
|
|
import XBlocks from './page-editor.blocks.vue';
|
|
import * as uuid from 'uuid';
|
|
import { blockDefs } from '../../../../../../misc/aiscript/index';
|
|
import { ASTypeChecker } from '../../../../../../misc/aiscript/type-checker';
|
|
import { url } from '../../../../config';
|
|
import { collectPageVars } from '../../../scripts/collect-page-vars';
|
|
|
|
export default Vue.extend({
|
|
i18n: i18n('pages'),
|
|
|
|
components: {
|
|
XVariable, XBlocks
|
|
},
|
|
|
|
props: {
|
|
page: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
author: this.$store.state.i,
|
|
pageId: null,
|
|
currentName: null,
|
|
title: '',
|
|
summary: null,
|
|
name: Date.now().toString(),
|
|
eyeCatchingImage: null,
|
|
eyeCatchingImageId: null,
|
|
font: 'sans-serif',
|
|
content: [],
|
|
alignCenter: false,
|
|
variables: [],
|
|
aiScript: null,
|
|
showOptions: false,
|
|
moreDetails: false,
|
|
url,
|
|
faPlus, faICursor, faSave, faStickyNote, faMagic, faCog, faTrashAlt, faExternalLinkSquareAlt, faCode
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
async eyeCatchingImageId() {
|
|
if (this.eyeCatchingImageId == null) {
|
|
this.eyeCatchingImage = null;
|
|
} else {
|
|
this.eyeCatchingImage = await this.$root.api('drive/files/show', {
|
|
fileId: this.eyeCatchingImageId,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.aiScript = new ASTypeChecker();
|
|
|
|
this.$watch('variables', () => {
|
|
this.aiScript.variables = this.variables;
|
|
}, { deep: true });
|
|
|
|
this.$watch('content', () => {
|
|
this.aiScript.pageVars = collectPageVars(this.content);
|
|
}, { deep: true });
|
|
|
|
if (this.page) {
|
|
this.author = this.page.user;
|
|
this.pageId = this.page.id;
|
|
this.title = this.page.title;
|
|
this.name = this.page.name;
|
|
this.currentName = this.page.name;
|
|
this.summary = this.page.summary;
|
|
this.font = this.page.font;
|
|
this.alignCenter = this.page.alignCenter;
|
|
this.content = this.page.content;
|
|
this.variables = this.page.variables;
|
|
this.eyeCatchingImageId = this.page.eyeCatchingImageId;
|
|
} else {
|
|
const id = uuid.v4();
|
|
this.content = [{
|
|
id,
|
|
type: 'text',
|
|
text: 'Hello World!'
|
|
}];
|
|
}
|
|
},
|
|
|
|
provide() {
|
|
return {
|
|
readonly: this.readonly,
|
|
getScriptBlockList: this.getScriptBlockList,
|
|
getPageBlockList: this.getPageBlockList
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
save() {
|
|
if (this.pageId) {
|
|
this.$root.api('pages/update', {
|
|
pageId: this.pageId,
|
|
title: this.title.trim(),
|
|
name: this.name.trim(),
|
|
summary: this.summary,
|
|
font: this.font,
|
|
alignCenter: this.alignCenter,
|
|
content: this.content,
|
|
variables: this.variables,
|
|
eyeCatchingImageId: this.eyeCatchingImageId,
|
|
}).then(page => {
|
|
this.currentName = this.name.trim();
|
|
this.$root.dialog({
|
|
type: 'success',
|
|
text: this.$t('page-updated')
|
|
});
|
|
});
|
|
} else {
|
|
this.$root.api('pages/create', {
|
|
title: this.title.trim(),
|
|
name: this.name.trim(),
|
|
summary: this.summary,
|
|
font: this.font,
|
|
alignCenter: this.alignCenter,
|
|
content: this.content,
|
|
variables: this.variables,
|
|
eyeCatchingImageId: this.eyeCatchingImageId,
|
|
}).then(page => {
|
|
this.pageId = page.id;
|
|
this.currentName = this.name.trim();
|
|
this.$root.dialog({
|
|
type: 'success',
|
|
text: this.$t('page-created')
|
|
});
|
|
this.$router.push(`/i/pages/edit/${this.pageId}`);
|
|
});
|
|
}
|
|
},
|
|
|
|
del() {
|
|
this.$root.dialog({
|
|
type: 'warning',
|
|
text: this.$t('are-you-sure-delete'),
|
|
showCancelButton: true
|
|
}).then(({ canceled }) => {
|
|
if (canceled) return;
|
|
this.$root.api('pages/delete', {
|
|
pageId: this.pageId,
|
|
}).then(() => {
|
|
this.$root.dialog({
|
|
type: 'success',
|
|
text: this.$t('page-deleted')
|
|
});
|
|
this.$router.push(`/i/pages`);
|
|
});
|
|
});
|
|
},
|
|
|
|
async add() {
|
|
const { canceled, result: type } = await this.$root.dialog({
|
|
type: null,
|
|
title: this.$t('choose-block'),
|
|
select: {
|
|
groupedItems: this.getPageBlockList()
|
|
},
|
|
showCancelButton: true
|
|
});
|
|
if (canceled) return;
|
|
|
|
const id = uuid.v4();
|
|
this.content.push({ id, type });
|
|
},
|
|
|
|
async addVariable() {
|
|
let { canceled, result: name } = await this.$root.dialog({
|
|
title: this.$t('enter-variable-name'),
|
|
input: {
|
|
type: 'text',
|
|
},
|
|
showCancelButton: true
|
|
});
|
|
if (canceled) return;
|
|
|
|
name = name.trim();
|
|
|
|
if (this.aiScript.isUsedName(name)) {
|
|
this.$root.dialog({
|
|
type: 'error',
|
|
text: this.$t('the-variable-name-is-already-used')
|
|
});
|
|
return;
|
|
}
|
|
|
|
const id = uuid.v4();
|
|
this.variables.push({ id, name, type: null });
|
|
},
|
|
|
|
removeVariable(v) {
|
|
const i = this.variables.findIndex(x => x.name === v.name);
|
|
const newValue = [
|
|
...this.variables.slice(0, i),
|
|
...this.variables.slice(i + 1)
|
|
];
|
|
this.variables = newValue;
|
|
},
|
|
|
|
getPageBlockList() {
|
|
return [{
|
|
label: this.$t('content-blocks'),
|
|
items: [
|
|
{ value: 'section', text: this.$t('blocks.section') },
|
|
{ value: 'text', text: this.$t('blocks.text') },
|
|
{ value: 'image', text: this.$t('blocks.image') },
|
|
{ value: 'textarea', text: this.$t('blocks.textarea') },
|
|
]
|
|
}, {
|
|
label: this.$t('input-blocks'),
|
|
items: [
|
|
{ value: 'button', text: this.$t('blocks.button') },
|
|
{ value: 'textInput', text: this.$t('blocks.textInput') },
|
|
{ value: 'textareaInput', text: this.$t('blocks.textareaInput') },
|
|
{ value: 'numberInput', text: this.$t('blocks.numberInput') },
|
|
{ value: 'switch', text: this.$t('blocks.switch') },
|
|
{ value: 'counter', text: this.$t('blocks.counter') }
|
|
]
|
|
}, {
|
|
label: this.$t('special-blocks'),
|
|
items: [
|
|
{ value: 'if', text: this.$t('blocks.if') },
|
|
{ value: 'post', text: this.$t('blocks.post') }
|
|
]
|
|
}];
|
|
},
|
|
|
|
getScriptBlockList(type: string = null) {
|
|
const list = [];
|
|
|
|
const blocks = blockDefs.filter(block => type === null || block.out === null || block.out === type);
|
|
|
|
for (const block of blocks) {
|
|
const category = list.find(x => x.category === block.category);
|
|
if (category) {
|
|
category.items.push({
|
|
value: block.type,
|
|
text: this.$t(`script.blocks.${block.type}`)
|
|
});
|
|
} else {
|
|
list.push({
|
|
category: block.category,
|
|
label: this.$t(`script.categories.${block.category}`),
|
|
items: [{
|
|
value: block.type,
|
|
text: this.$t(`script.blocks.${block.type}`)
|
|
}]
|
|
});
|
|
}
|
|
}
|
|
|
|
const userFns = this.variables.filter(x => x.type === 'fn');
|
|
if (userFns.length > 0) {
|
|
list.unshift({
|
|
label: this.$t(`script.categories.fn`),
|
|
items: userFns.map(v => ({
|
|
value: 'fn:' + v.name,
|
|
text: v.name
|
|
}))
|
|
});
|
|
}
|
|
|
|
return list;
|
|
},
|
|
|
|
setEyeCatchingImage() {
|
|
this.$chooseDriveFile({
|
|
multiple: false
|
|
}).then(file => {
|
|
this.eyeCatchingImageId = file.id;
|
|
});
|
|
},
|
|
|
|
removeEyeCatchingImage() {
|
|
this.eyeCatchingImageId = null;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.gwbmwxkm
|
|
overflow hidden
|
|
background var(--face)
|
|
margin-bottom 16px
|
|
|
|
&.round
|
|
border-radius 6px
|
|
|
|
&.shadow
|
|
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
|
|
|
> header
|
|
background var(--faceHeader)
|
|
|
|
> .title
|
|
z-index 1
|
|
margin 0
|
|
padding 0 16px
|
|
line-height 42px
|
|
font-size 0.9em
|
|
font-weight bold
|
|
color var(--faceHeaderText)
|
|
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
|
|
|
|
> [data-icon]
|
|
margin-right 6px
|
|
|
|
&:empty
|
|
display none
|
|
|
|
> .buttons
|
|
position absolute
|
|
z-index 2
|
|
top 0
|
|
right 0
|
|
|
|
> button
|
|
padding 0
|
|
width 42px
|
|
font-size 0.9em
|
|
line-height 42px
|
|
color var(--faceTextButton)
|
|
|
|
&:hover
|
|
color var(--faceTextButtonHover)
|
|
|
|
&:active
|
|
color var(--faceTextButtonActive)
|
|
|
|
> section
|
|
padding 0 32px 32px 32px
|
|
|
|
@media (max-width 500px)
|
|
padding 0 16px 16px 16px
|
|
|
|
> .view
|
|
display inline-block
|
|
margin 16px 0 0 0
|
|
font-size 14px
|
|
|
|
> .content
|
|
margin-bottom 16px
|
|
|
|
> .eyeCatch
|
|
margin-bottom 16px
|
|
|
|
> div
|
|
> img
|
|
max-width 100%
|
|
|
|
.qmuvgica
|
|
padding 32px
|
|
|
|
@media (max-width 500px)
|
|
padding 16px
|
|
|
|
> .variables
|
|
margin-bottom 16px
|
|
|
|
> .add
|
|
margin-bottom 16px
|
|
|
|
</style>
|