auth-web/src/views/configuration/web-configuration/index.vue

<script lang="ts" setup>
import { $t } from '@/plugins/i18n';
import { onMounted, ref } from 'vue';
import { FormInstance } from 'element-plus';
import ReCol from '@/components/ReCol';
import { auth, form, onSearch, rules, submitForm } from '@/views/configuration/web-configuration/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="24" :xs="24">
        <el-form-item>
          <el-button class="w-full" plain type="primary" @click="submitForm(ruleFormRef)">
            {{ $t('modifyingConfiguration') }}
          </el-button>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>