@houaoran/designer 1.0.0

package/src/components/language/LanguageConfig.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="_fd-language-config">
+        <div class="_fc-l-label">{{ t('language.name') }}</div>
+        <div class="_fc-l-info">
+            {{ t('warning.language') }}
+        </div>
+        <div class="_fd-lc-header">
+            <el-button size="small" @click="addColumn">{{ t('language.add') }}</el-button>
+            <el-button size="small" type="danger" plain :disabled="!selected.length" @click="batchRmColumn">
+                {{ t('language.batchRemove') }}
+            </el-button>
+        </div>
+        <div class="_fd-lc-body">
+            <el-table :data="column" size="small" ref="table"
+                      @selection-change="selectionChange" row-key="key">
+                <el-table-column type="selection" width="30px"></el-table-column>
+                <el-table-column prop="key" label="Key" width="90px"></el-table-column>
+                <template v-for="item in localeOptions" :key="item.value">
+                    <el-table-column :prop="item.value" :label="item.label" min-width="100px">
+                        <template #default="scope">
+                            <template v-if="scope.row.input">
+                                <el-input size="small" v-model="scope.row[item.value]" @blur="saveColumn(scope.row, true)"></el-input>
+                            </template>
+                            <template v-else>
+                                {{ scope.row[item.value] || '-' }}
+                            </template>
+                        </template>
+                    </el-table-column>
+                </template>
+                <el-table-column width="75px" :label="t('tableOptions.handle')" fixed="right">
+                    <template #default="scope">
+                        <div class="_fd-lc-handle">
+                            <i class="fc-icon icon-edit" v-if="!scope.row.input" @click="scope.row.input = true"></i>
+                            <i class="fc-icon icon-check" v-else @click="saveColumn(scope.row)"></i>
+                            <i class="fc-icon icon-group" @click="copy(scope.row.key)"></i>
+                            <i class="fc-icon icon-delete-circle" @click="rmColumn(scope.$index)"></i>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import {copyTextToClipboard} from '../../utils';
+
+export default defineComponent({
+    name: 'LanguageConfig',
+    inject: ['designer'],
+    computed: {
+        localeOptions() {
+            return this.designer.setupState.getConfig('localeOptions', [
+                {value: 'zh-cn', label: '简体中文'},
+                {value: 'en', label: 'English'},
+            ]);
+        },
+        t() {
+            return this.designer.setupState.t;
+        },
+    },
+    data() {
+        return {
+            column: [],
+            uni: 0,
+            selected: [],
+        }
+    },
+    methods: {
+        copy(key) {
+            copyTextToClipboard(key);
+        },
+        addColumn() {
+            this.column.unshift({
+                key: this.randomString(),
+                input: true,
+            })
+        },
+        saveColumn(row, input) {
+            row.input = input || false;
+            const language = this.designer.setupState.formOptions.language;
+            this.localeOptions.forEach(item => {
+                if (!language[item.value]) {
+                    language[item.value] = {};
+                }
+                language[item.value][row.key] = row[item.value];
+            })
+        },
+        rmColumn(idx) {
+            const row = this.column[idx];
+            this.column.splice(idx, 1);
+            const language = this.designer.setupState.formOptions.language;
+            this.localeOptions.forEach(item => {
+                if (language[item.value]) {
+                    delete language[item.value][row.key]
+                }
+            })
+        },
+        batchRmColumn() {
+            this.selected.forEach(item => {
+                this.rmColumn(this.column.indexOf(item));
+            });
+            this.selected = [];
+        },
+        selectionChange(list) {
+            this.selected = list;
+        },
+        randomString() {
+            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            let result = '';
+            const charactersLength = characters.length;
+
+            for (let i = 0; i < 7; i++) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return characters.charAt((this.uni++) % 26) + result;
+        }
+    },
+    mounted() {
+        const language = this.designer.setupState.formOptions.language || {};
+        const column = {};
+        Object.keys(language).forEach(lang => {
+            Object.keys(language[lang]).forEach(key => {
+                if (!column[key]) {
+                    column[key] = {
+                        key: key,
+                    }
+                }
+                column[key][lang] = language[lang][key];
+            })
+        });
+        this.column = Object.values(column);
+    }
+
+});
+</script>
+
+<style>
+._fd-language-config {
+    height: 100%;
+    overflow: auto;
+}
+
+._fd-lc-body, ._fd-lc-header {
+    padding: 0 12px;
+}
+
+._fd-lc-body {
+    overflow: auto;
+}
+
+._fd-lc-header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+}
+
+._fd-language-config .el-table__cell {
+    height: 34px;
+}
+
+._fd-language-config ._fc-l-info {
+    margin-bottom: 12px;
+}
+
+._fd-lc-handle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+</style>

package/src/components/language/LanguageInput.vue

@@ -0,0 +1,191 @@
+<template>
+    <el-input class="_fd-language-input" :class="{'is-variable': isVar}" :placeholder="placeholder" :disabled="disabled"
+              :modelValue="modelValue"
+              @update:modelValue="onInput"
+              @blur="$emit('blur')"
+              :size="size || 'small'">
+        <template #append v-if="showLanguage !== false">
+            <el-popover placement="bottom-end" :width="300" :hide-after="0" trigger="click" ref="pop"
+                        popper-class="_fd-language-popover">
+                <template #reference>
+                    <i class="fc-icon icon-language"></i>
+                </template>
+                <div class="_fd-language-list">
+                    <div class="_fd-language-header">
+                        <div class="_fd-language-title">
+                            {{ t('language.select') }}<i class="fc-icon icon-setting" @click="openConfig"></i>
+                        </div>
+                        <div class="_fd-language-name">
+                            <template v-for="item in localeList" :key="item.value">
+                                <div>{{ item.label }}</div>
+                            </template>
+                        </div>
+                    </div>
+                    <template v-for="lang in language" :key="lang.key">
+                        <div class="_fd-language-item" @click="clickLang(lang.key)">
+                            <template v-for="item in localeList" :key="item.value">
+                                <div>{{ lang[item.value] || '-' }}</div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </el-popover>
+        </template>
+    </el-input>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    name: 'LanguageInput',
+    inject: ['designer'],
+    emits: ['update:modelValue', 'blur', 'change'],
+    props: {
+        size: String,
+        placeholder: String,
+        modelValue: String,
+        disabled: Boolean,
+    },
+    computed: {
+        isVar() {
+            return !!(this.modelValue || '').match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+        },
+        t() {
+            return this.designer.setupState.t;
+        },
+        localeList() {
+            const localeOptions = this.designer.setupState.getConfig('localeOptions', [
+                {value: 'zh-cn', label: '简体中文'},
+                {value: 'en', label: 'English'},
+            ]);
+            const localeList = [];
+            const locale = this.designer.props?.locale?.name || 'zh-cn';
+            localeOptions.forEach((item) => {
+                if (item.value === locale) {
+                    localeList.unshift(item);
+                } else if (localeList.length < 2) {
+                    localeList.push(item);
+                }
+            });
+            if (localeList.length > 2) {
+                localeList.pop();
+            }
+            return localeList;
+        },
+        showLanguage() {
+            return this.designer.setupState.getConfig('showLanguage');
+        },
+        language() {
+            const language = this.designer.setupState.formOptions.language || {};
+            const column = {};
+            Object.keys(language).forEach(lang => {
+                Object.keys(language[lang]).forEach(key => {
+                    if (!column[key]) {
+                        column[key] = {
+                            key: key,
+                        }
+                    }
+                    column[key][lang] = language[lang][key];
+                })
+            });
+            return Object.values(column);
+        }
+    },
+    methods: {
+        openConfig() {
+            this.designer.setupState.activeModule = 'language';
+        },
+        clickLang(key) {
+            this.onInput(`{{$t.${key}}}`);
+            this.$refs.pop.hide();
+        },
+        onInput(val) {
+            this.$emit('update:modelValue', val);
+            this.$emit('change', val);
+        }
+    },
+    mounted() {
+    }
+
+});
+</script>
+
+<style>
+._fd-language-list {
+    max-height: 320px;
+    padding-top: 70px;
+    overflow: auto;
+}
+
+._fd-language-input .el-input-group__append {
+    width: 25px;
+    padding: 0;
+    margin: 0;
+    color: #AAAAAA;
+    cursor: pointer;
+}
+
+._fd-language-input.is-variable input {
+    color: #2E73FF;
+}
+
+._fd-language-header, ._fd-language-item {
+    display: flex;
+    border-bottom: 1px solid #ECECEC;
+    padding: 0 12px;
+}
+
+._fd-language-header {
+    font-weight: 500;
+    padding-top: 10px;
+    overflow: auto;
+    color: #262626;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #FFFFFF;
+    flex-direction: column;
+}
+
+._fd-language-name > div, ._fd-language-item > div {
+    flex: 1;
+    font-size: 12px;
+    padding: 5px;
+    min-width: 70px;
+}
+
+._fd-language-title {
+    margin: 6px 0;
+}
+
+._fd-language-title .fc-icon {
+    color: #2E73FF;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+._fd-language-name {
+    display: flex;
+}
+
+._fd-language-name > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+._fd-language-item {
+    cursor: pointer;
+}
+
+._fd-language-item:hover {
+    color: #2E73FF;
+    background-color: #CCDFFF;
+}
+
+._fd-language-popover {
+    padding: 0 !important;
+}
+</style>

package/src/components/style/BackgroundInput.vue

@@ -0,0 +1,315 @@
+<template>
+    <ConfigItem :label="t('style.background.name')">
+        <ColorInput v-model="backgroundColor" @change="onInput"></ColorInput>
+        <template #append>
+            <div class="_fd-background-input">
+                <el-form label-width="50px" label-position="top" inline size="small">
+                    <el-form-item :label="t('style.background.image')" class="_fd-bg-image-item">
+                        <el-input
+                            v-model="backgroundImageUrl"
+                            clearable
+                            @change="onImageUrlChange"
+                            @keydown.enter="onImageUrlChange"
+                            :placeholder="t('style.background.placeholder')"
+                        >
+                            <template #append>
+                                <div style="cursor: pointer" @click="handleImageInput"><i class="fc-icon icon-image"></i></div>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <div class="_fd-bg-size-repeat-row">
+                        <el-form-item :label="t('style.background.size.name')" class="_fd-bg-size-item">
+                            <el-select v-model="sizeSelectValue" clearable @change="onSizeSelectChange" style="width: 100%">
+                                <el-option v-for="item in sizeType" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                            <div class="_fd-bg-size-custom" v-if="sizeSelectValue === 'custom'">
+                                <SizeInput v-model="backgroundSizeX" @change="onSizeChange" />
+                                <span style="margin: 0 5px">×</span>
+                                <SizeInput v-model="backgroundSizeY" @change="onSizeChange" />
+                            </div>
+                        </el-form-item>
+                        <el-form-item :label="t('style.background.repeat.name')" class="_fd-bg-repeat-item">
+                            <el-select v-model="backgroundStyle.backgroundRepeat" clearable @change="onInput" style="width: 100%">
+                                <el-option v-for="item in repeatType" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <el-form-item :label="t('style.background.position')" class="_fd-bg-position-item">
+                        <div class="_fd-bg-position">
+                            <SizeInput v-model="backgroundPositionX" @change="onPositionChange" />
+                            <SizeInput v-model="backgroundPositionY" @change="onPositionChange" />
+                        </div>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </template>
+    </ConfigItem>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import SizeInput from './SizeInput.vue';
+import ConfigItem from './ConfigItem.vue';
+import ColorInput from './ColorInput.vue';
+
+export default defineComponent({
+    name: 'BackgroundInput',
+    components: { SizeInput, ConfigItem, ColorInput },
+    inject: ['designer'],
+    emits: ['update:modelValue', 'change'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    watch: {
+        modelValue() {
+            this.tidyValue();
+        },
+    },
+    computed: {
+        t() {
+            return this.designer.setupState.t;
+        },
+        sizeType() {
+            const size = this.t('style.background.size') || {};
+            return [
+                { label: size.cover || 'cover', value: 'cover' },
+                { label: size.contain || 'contain', value: 'contain' },
+                { label: size.auto || 'auto', value: 'auto' },
+            ];
+        },
+        repeatType() {
+            const repeat = this.t('style.background.repeat') || {};
+            return ['no-repeat', 'repeat', 'repeat-x', 'repeat-y', 'round', 'space'].map(v => {
+                return { label: repeat[v] || v, value: v };
+            });
+        },
+    },
+    data() {
+        return {
+            backgroundColor: '',
+            backgroundImageUrl: '',
+            backgroundStyle: {
+                backgroundImage: '',
+                backgroundSize: '',
+                backgroundPosition: '',
+                backgroundRepeat: '',
+            },
+            backgroundSizeX: '',
+            backgroundSizeY: '',
+            backgroundPositionX: '',
+            backgroundPositionY: '',
+            sizeSelectValue: '',
+        };
+    },
+    methods: {
+        tidyValue() {
+            const value = this.modelValue || {};
+            this.backgroundColor = value.backgroundColor || '';
+
+            // 解析 backgroundImage，提取url()中的内容
+            const bgImage = value.backgroundImage || '';
+            if (bgImage) {
+                const match = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                this.backgroundImageUrl = match ? match[1] : bgImage;
+            } else {
+                this.backgroundImageUrl = '';
+            }
+
+            this.backgroundStyle = {
+                backgroundImage: bgImage,
+                backgroundSize: value.backgroundSize || '',
+                backgroundPosition: value.backgroundPosition || '',
+                backgroundRepeat: value.backgroundRepeat || '',
+            };
+
+            // 解析 backgroundSize
+            this.parseBackgroundSize(value.backgroundSize);
+
+            // 解析 backgroundPosition
+            this.parseBackgroundPosition(value.backgroundPosition);
+        },
+        parseBackgroundSize(size) {
+            if (!size) {
+                this.sizeSelectValue = '';
+                this.backgroundSizeX = '';
+                this.backgroundSizeY = '';
+                return;
+            }
+            if (size === 'cover' || size === 'contain' || size === 'auto') {
+                this.sizeSelectValue = size;
+                this.backgroundSizeX = '';
+                this.backgroundSizeY = '';
+                return;
+            }
+            // 自定义尺寸
+            const parts = size.split(/\s+/);
+            this.backgroundSizeX = parts[0] || '';
+            this.backgroundSizeY = parts[1] || '';
+            this.sizeSelectValue = 'custom';
+        },
+        parseBackgroundPosition(position) {
+            if (!position) {
+                this.backgroundPositionX = '';
+                this.backgroundPositionY = '';
+                return;
+            }
+            const parts = position.split(/\s+/);
+            this.backgroundPositionX = parts[0] || '';
+            this.backgroundPositionY = parts[1] || '';
+        },
+        onSizeSelectChange(value) {
+            if (!value) {
+                this.backgroundStyle.backgroundSize = '';
+                this.backgroundSizeX = '';
+                this.backgroundSizeY = '';
+            } else if (value === 'custom') {
+                // 切换到自定义模式，保持当前值或使用默认值
+                if (this.backgroundSizeX || this.backgroundSizeY) {
+                    const size = [this.backgroundSizeX || 'auto', this.backgroundSizeY || 'auto'].join(' ');
+                    this.backgroundStyle.backgroundSize = size;
+                } else {
+                    this.backgroundStyle.backgroundSize = '';
+                }
+            } else {
+                // 预设值
+                this.backgroundStyle.backgroundSize = value;
+                this.backgroundSizeX = '';
+                this.backgroundSizeY = '';
+            }
+            this.onInput();
+        },
+        onSizeChange() {
+            if (this.backgroundSizeX || this.backgroundSizeY) {
+                const size = [this.backgroundSizeX || 'auto', this.backgroundSizeY || 'auto'].join(' ');
+                this.backgroundStyle.backgroundSize = size;
+            } else {
+                this.backgroundStyle.backgroundSize = '';
+            }
+            this.onInput();
+        },
+        onPositionChange() {
+            if (this.backgroundPositionX || this.backgroundPositionY) {
+                const position = [this.backgroundPositionX || '0', this.backgroundPositionY || '0'].join(' ');
+                this.backgroundStyle.backgroundPosition = position;
+            } else {
+                this.backgroundStyle.backgroundPosition = '';
+            }
+            this.onInput();
+        },
+        onImageUrlChange() {
+            if (this.backgroundImageUrl) {
+                this.backgroundStyle.backgroundImage = `url(${this.backgroundImageUrl})`;
+            } else {
+                this.backgroundStyle.backgroundImage = '';
+            }
+            this.onInput();
+        },
+        handleImageInput() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.onchange = e => {
+                const file = e.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = event => {
+                        this.backgroundImageUrl = event.target.result;
+                        this.backgroundStyle.backgroundImage = `url(${event.target.result})`;
+                        this.onInput();
+                    };
+                    reader.readAsDataURL(file);
+                }
+            };
+            input.click();
+        },
+        onInput() {
+            const style = {
+                backgroundColor: this.backgroundColor || '',
+                ...Object.keys(this.backgroundStyle).reduce((acc, key) => {
+                    if (this.backgroundStyle[key] !== '') {
+                        acc[key] = this.backgroundStyle[key];
+                    }
+                    return acc;
+                }, {}),
+            };
+            // 移除空值
+            Object.keys(style).forEach(k => {
+                if (style[k] === '') {
+                    delete style[k];
+                }
+            });
+            this.$emit('update:modelValue', style);
+            this.$emit('change', style);
+        },
+    },
+    created() {
+        this.tidyValue();
+    },
+});
+</script>
+
+<style>
+._fd-background-input {
+    display: flex;
+    justify-content: center;
+    padding: 0 5px;
+}
+
+._fd-background-input .el-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+._fd-background-input .el-input-group__append {
+    padding: 0;
+    width: 24px;
+}
+
+._fd-bg-image-item {
+    width: 100%;
+}
+
+._fd-bg-size-repeat-row {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+}
+
+._fd-bg-size-item,
+._fd-bg-repeat-item {
+    flex: 1;
+}
+
+._fd-bg-position-item {
+    width: 100%;
+}
+
+._fd-background-input .el-form--inline .el-form-item {
+    margin: 0;
+    padding: 0;
+}
+
+._fd-background-input ._fd-size-input .el-input-number--small {
+    width: 100%;
+}
+
+._fd-bg-size-custom {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+}
+
+._fd-bg-position {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+._fd-bg-position ._fd-size-input {
+    flex: 1;
+}
+</style>