Merge pull request gmingchen#7 from gmingchen/composition-api

fix el-avatar component bug, add set page

Author: gmingchen

src/assets/sass/_element.scss

@@ -22,3 +22,7 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts';
     }
   }
 }
+// 头像组件样式调整修改
+.el-avatar > img {
+  width: 100%;
+}

src/i18n/langs/cn.ts

@@ -131,6 +131,11 @@ const cn = {
       virtualPath: '虚拟路径',
       command: '命令',
       recovery: '恢复'
+    },
+    set: {
+      language: '语言',
+      fixedNavBar: '固定导航栏',
+      showTabBar: '显示标签栏'
     }
   }
 }

src/i18n/langs/en.ts

@@ -131,6 +131,11 @@ const en = {
       virtualPath: 'Virtual path',
       command: 'Command',
       recovery: 'Recovery'
+    },
+    set: {
+      language: 'Language',
+      fixedNavBar: 'Fixed navigation bar',
+      showTabBar: 'Show tab bar'
     }
   }
 }

src/store/modules/setting/index.ts

@@ -70,6 +70,12 @@ export default {
     SET_SIDEBAR_WIDTH: (state: State, width: number): void => {
       state.sidebar.width = width
     },
+    SET_FIXED: (state: State, fixed: boolean): void => {
+      state.navbar.fixed = fixed
+    },
+    SET_TABS_DISPLAY: (state: State, tabsDisplay: boolean): void => {
+      state.navbar.tabsDisplay = tabsDisplay
+    },
     SET_LANGUAGE: (state: State, language: string): void => {
       state.set.language = language
     },
@@ -91,6 +97,12 @@ export default {
         commit('SET_SIDEBAR_WIDTH', state.sidebar.openWidth)
       }
     },
+    setFixed({ commit }: ActionContext<State, null>, fixed: boolean): void {
+      commit('SET_FIXED', fixed)
+    },
+    setTabsDisplay({ commit }: ActionContext<State, null>, tabsDisplay: boolean): void {
+      commit('SET_TABS_DISPLAY', tabsDisplay)
+    },
     setLanguage({ commit }: ActionContext<State, null>, language: string): void {
       setLanguage(language)
       commit('SET_LANGUAGE', language)

src/views/modules/base/file/index.vue

@@ -63,10 +63,9 @@
         width="80">
         <template v-slot="{ row }">
           <el-avatar
-            :preview-src-list="[flowApi(row.id)]"
             :src="flowApi(row.id)"
             shape="square"
-            fit="fill">{{ row.extension }}</el-avatar>
+            fit="contain">{{ row.extension }}</el-avatar>
         </template>
       </el-table-column>
       <el-table-column

src/views/modules/set/index.vue

@@ -7,36 +7,60 @@
  * @LastEditTime: 2021-05-07 22:19:37
 -->
 <template>
-  <div>
-    <el-switch
-      :disabled="true"
-      v-permission="'base:menu:display'"
-      v-model="fa"
-      active-color="#13ce66"
-      inactive-color="#ff4949"
-      :active-value="1"
-      :inactive-value="0" />
-  </div>
+  <el-form label-position="left" label-width="140px">
+    <el-form-item :label="t('base.set.language')">
+      <language />
+    </el-form-item>
+    <el-form-item :label="t('base.set.fixedNavBar')">
+      <el-switch v-model="fixed" active-color="#13ce66" inactive-color="#ff4949" />
+    </el-form-item>
+    <el-form-item :label="t('base.set.showTabBar')">
+      <el-switch v-model="tabsDisplay" active-color="#13ce66" inactive-color="#ff4949" />
+    </el-form-item>
+  </el-form>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Language from 'V/components/language/index.vue'
+import { key, useStore } from '@/store'
 
 export default defineComponent({
+  components: { Language },
   setup() {
-    const fa = ref(1)
+    const { t } = useI18n()
+    const store = useStore(key)
+
+    const fixed = computed({
+      get: () => {
+        return store.state.setting.navbar.fixed
+      },
+      set: (val) => {
+        store.dispatch('setting/setFixed', val)
+      }
+    })
+
+    const tabsDisplay = computed({
+      get: () => {
+        return store.state.setting.navbar.tabsDisplay
+      },
+      set: (val) => {
+        store.dispatch('setting/setTabsDisplay', val)
+      }
+    })
 
-    const test = () => {
-      console.log('test')
-    }
     return {
-      fa,
-      test
+      t,
+      fixed,
+      tabsDisplay
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-
+::v-deep(.el-form-item__label) {
+  line-height: 36px!important;
+}
 </style>