227 lines
9.9 KiB
Vue
227 lines
9.9 KiB
Vue
<script lang="ts" setup>
|
|
import { $t } from '@/plugins/i18n';
|
|
import { onMounted, ref } from 'vue';
|
|
import { FormInstance } from 'element-plus';
|
|
import ReCol from '@/components/MyCol';
|
|
import { auth, form, onSearch, rules, submitForm } from '@/views/configuration/webConifg/utils';
|
|
import { userI18nTypeStore } from '@/store/i18n/i18nType';
|
|
import { usePublicHooks } from '@/views/hooks';
|
|
import { hasAuth } from '@/router/utils';
|
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
const i18nTypeStore = userI18nTypeStore();
|
|
// 用户是否停用样式
|
|
const { switchStyle } = usePublicHooks();
|
|
const theme = ['dark', 'light', 'system'];
|
|
const layout = ['vertical', 'horizontal', 'mix'];
|
|
|
|
onMounted(() => {
|
|
onSearch();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<el-form ref="ruleFormRef" :model="form" :rules="rules" class="bg-white p-[30px] h-[100%]" label-position="left" label-width="auto" status-icon>
|
|
<el-row :gutter="30">
|
|
<!-- 应用程序的版本 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('version')" prop="version">
|
|
<el-input v-model="form.version" :placeholder="$t('input') + $t('version')" autocomplete="off" type="text" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 应用程序的标题 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('appTitle')" prop="title">
|
|
<el-input v-model="form.title" :placeholder="$t('input') + $t('appTitle')" autocomplete="off" type="text" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 版权信息 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('copyright')" prop="copyright">
|
|
<el-input v-model="form.copyright" :placeholder="$t('input') + $t('copyright')" autocomplete="off" type="text" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 头部是否固定 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('fixedHeader')" prop="fixedHeader">
|
|
<el-switch v-model="form.fixedHeader" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 侧边栏是否隐藏 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('hiddenSideBar')" prop="hiddenSideBar">
|
|
<el-switch v-model="form.hiddenSideBar" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否缓存多个标签 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('multiTagsCache')" prop="multiTagsCache">
|
|
<el-switch v-model="form.multiTagsCache" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否持久化 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('keepAlive')" prop="keepAlive">
|
|
<el-switch v-model="form.keepAlive" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 语言类型 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('appLocale')" prop="locale">
|
|
<el-select v-model="form.locale" :placeholder="$t('select') + $t('appLocale')" filterable>
|
|
<el-option v-for="item in i18nTypeStore.datalist" :key="item.id" :label="item.summary" :value="item.typeName" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 应用程序的布局 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('layout')" prop="layout">
|
|
<el-select v-model="form.layout" :placeholder="$t('select') + $t('layout')" filterable>
|
|
<el-option v-for="item in layout" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 应用程序的主题 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('theme')" prop="theme">
|
|
<el-select v-model="form.theme" :placeholder="$t('select') + $t('theme')" filterable>
|
|
<el-option v-for="item in theme" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否启用深色模式 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('darkMode')" prop="darkMode">
|
|
<el-switch v-model="form.darkMode" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 应用程序的整体样式 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('overallStyle')" prop="overallStyle">
|
|
<el-select v-model="form.overallStyle" :placeholder="$t('select') + $t('overallStyle')" filterable>
|
|
<el-option v-for="item in theme" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否启用灰色模式 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('greyStyle')" prop="grey">
|
|
<el-switch v-model="form.grey" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 色弱模式 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('weakStyle')" prop="weak">
|
|
<el-switch v-model="form.weak" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否隐藏选项卡 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('hideTabs')" prop="weak">
|
|
<el-switch v-model="form.hideTabs" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否隐藏页脚 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('hideFooter')" prop="weak">
|
|
<el-switch v-model="form.hideFooter" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否拉伸显示 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('stretch')" prop="stretch">
|
|
<el-switch v-model="form.stretch" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 侧边栏的状态 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('sidebarStatus')" prop="sidebarStatus">
|
|
<el-switch v-model="form.sidebarStatus" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 主题颜色 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('epThemeColor')" prop="epThemeColor">
|
|
<el-color-picker v-model="form.epThemeColor" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否显示logo -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('showLogo')" prop="showLogo">
|
|
<el-switch v-model="form.showLogo" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 要显示的模型 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('showModel')" prop="showModel">
|
|
<el-input v-model="form.showModel" :placeholder="$t('input') + $t('showModel')" autocomplete="off" type="text" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 菜单箭头图标是否没有过渡效果 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('menuArrowIconNoTransition')" prop="menuArrowIconNoTransition">
|
|
<el-switch v-model="form.menuArrowIconNoTransition" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 是否缓存异步路由 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('cachingAsyncRoutes')" prop="cachingAsyncRoutes">
|
|
<el-switch v-model="form.cachingAsyncRoutes" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 工具提示的效果 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('tooltipEffect')" prop="tooltipEffect">
|
|
<el-select v-model="form.tooltipEffect" :placeholder="$t('select') + $t('tooltipEffect')" filterable>
|
|
<el-option v-for="item in theme" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 响应式存储的命名空间 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('responsiveStorageNameSpace')" prop="responsiveStorageNameSpace">
|
|
<el-input v-model="form.responsiveStorageNameSpace" :placeholder="$t('input') + $t('responsiveStorageNameSpace')" autocomplete="off" type="text" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 菜单搜索历史 -->
|
|
<re-col :sm="24" :value="12" :xs="24">
|
|
<el-form-item :label="$t('menuSearchHistory')" prop="menuSearchHistory">
|
|
<el-input v-model="form.menuSearchHistory" :max="99" :min="1" :placeholder="$t('input') + $t('menuSearchHistory')" autocomplete="off" type="number" />
|
|
</el-form-item>
|
|
</re-col>
|
|
|
|
<!-- 提交内容 -->
|
|
<re-col v-if="hasAuth(auth.update)" :sm="24" :value="12" :xs="24">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm(ruleFormRef)"> {{ $t('modifyingConfiguration') }}</el-button>
|
|
</el-form-item>
|
|
</re-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|