基本表单功能、通用设置界面

src/views/components/global/GlobalSettings.vue

@@ -1,22 +1,109 @@
 <script setup>
-import {useGlobalConfigStore} from '@/stores/GlobalConfigStore'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useTabsViewStore } from '@/stores/TabsViewStore'
+import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants'
 const globalConfigStore = useGlobalConfigStore()
-
+const tabsViewStore = useTabsViewStore()
+/**
+ * @type {[CommonFormOption]}
+ */
+const options = [
+  {
+    labelKey: 'common.label.theme',
+    prop: 'isDarkTheme',
+    type: 'switch',
+    model: globalConfigStore,
+    attrs: {
+      activeActionIcon: 'icon-moon',
+      inactiveActionIcon: 'icon-sunny'
+    }
+  },
+  {
+    labelKey: 'common.label.language',
+    type: 'select',
+    prop: 'currentLocale',
+    model: globalConfigStore,
+    change (val) {
+      globalConfigStore.changeLocale(val)
+    },
+    children: [{
+      labelKey: 'common.label.langCn',
+      value: GlobalLocales.CN,
+      type: 'option'
+    }, {
+      labelKey: 'common.label.langEn',
+      value: GlobalLocales.EN,
+      type: 'option'
+    }]
+  },
+  {
+    labelKey: 'common.label.layout',
+    type: 'select',
+    prop: 'layoutMode',
+    model: globalConfigStore,
+    change (val) {
+      globalConfigStore.changeLayout(val)
+    },
+    children: [{
+      labelKey: 'common.label.layoutLeft',
+      value: GlobalLayoutMode.LEFT,
+      type: 'option'
+    }, {
+      labelKey: 'common.label.layoutTop',
+      value: GlobalLayoutMode.TOP,
+      type: 'option'
+    }]
+  },
+  {
+    label: '多标签模式',
+    prop: 'isTabMode',
+    type: 'switch',
+    model: tabsViewStore,
+    change (val) {
+      tabsViewStore.changeTabMode(val)
+    }
+  },
+  {
+    label: '缓存标签',
+    prop: 'isCachedTabMode',
+    type: 'switch',
+    model: tabsViewStore,
+    change (val) {
+      tabsViewStore.changeCachedTabMode(val)
+    }
+  },
+  {
+    label: '标签图标',
+    prop: 'isShowTabIcon',
+    type: 'switch',
+    model: tabsViewStore
+  }
+]
 </script>
 
 <template>
-  <el-drawer v-model="globalConfigStore.isShowSettings" direction="rtl" :size="350">
+  <el-drawer
+    v-model="globalConfigStore.isShowSettings"
+    direction="rtl"
+    :size="350"
+  >
     <template #header>
       <strong>{{ $t('common.label.settings') }}</strong>
     </template>
     <template #default>
-      <div>
-
-      </div>
+      <common-form
+        :options="options"
+        label-position="left"
+      />
     </template>
     <template #footer>
       <div style="flex: auto">
-        <el-button type="primary" @click="globalConfigStore.changeShowSettings(false)">{{$t('common.label.close')}}</el-button>
+        <el-button
+          type="primary"
+          @click="globalConfigStore.changeShowSettings(false)"
+        >
+          {{ $t('common.label.close') }}
+        </el-button>
       </div>
     </template>
   </el-drawer>

src/views/tools/Forms.vue

@@ -1,10 +1,65 @@
 <script setup>
+import { ref } from 'vue'
 
+/**
+ * @type {[CommonFormOption]}
+ */
+const formOptions = [{
+  label: '用户名',
+  prop: 'userName',
+  value: '',
+  placeholder: '请输入用户名',
+  rules: [
+    {
+      required: true,
+      message: '用户名不能为空',
+      trigger: 'blur'
+    },
+    {
+      min: 2,
+      max: 6,
+      message: '用户名在2-6位之间',
+      trigger: 'blur'
+    }
+  ]
+}, {
+  label: '密码',
+  prop: 'userPassword',
+  value: '',
+  placeholder: '请输入密码',
+  rules: [
+    {
+      required: true,
+      message: '密码不能为空',
+      trigger: 'blur'
+    },
+    {
+      min: 2,
+      max: 6,
+      message: '密码在2-6位之间',
+      trigger: 'blur'
+    }
+  ],
+  attrs: {
+    showPassword: true
+  }
+}]
+const userDto = ref({
+  userName: '',
+  userPassword: ''
+})
 </script>
 
 <template>
   <div>
-    <strong>表单测试</strong>
+    <common-form
+      :model="userDto"
+      :options="formOptions"
+      label-width="120px"
+    />
+    <div>
+      {{ userDto }}
+    </div>
   </div>
 </template>