Merge branch 'main' of https://gitee.com/izory/zradmin-vue3 into main

package.json

@@ -31,10 +31,10 @@
     "md-editor-v3": "^1.11.11",
     "nprogress": "0.2.0",
     "sortablejs": "^1.15.0",
-    "vue": "3.2.26",
+    "vue": "^3.2.36",
     "vue-cropper": "1.0.2",
     "vue-i18n": "^9.1.10",
-    "vue-router": "4.0.12",
+    "vue-router": "^4.0.15",
     "vue3-seamless-scroll": "^1.2.0",
     "vuex": "4.0.2",
     "wangeditor": "^4.7.15"

src/App.vue

@@ -20,7 +20,7 @@ const lang = computed(() => {
   return store.getters.language
 })
 const locale = ref(zh)
-const size = ref('default')
+const size = ref('small')
 size.value = store.getters.size
 watch(
   token,

src/assets/styles/element-ui.scss

@@ -1,16 +1,5 @@
 // cover some element-ui styles
 
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-// .el-upload {
-//   input[type="file"] {
-//     display: none !important;
-//   }
-// }
-
 .el-upload__input {
   display: none;
 }
@@ -21,11 +10,11 @@
   }
 }
 
-.small-padding {
+// table 里面操作按钮样式覆盖
-  .cell {
+.el-table__cell .cell {
-    padding-left: 5px;
+	.el-button.is-text{
-    padding-right: 5px;
+		padding: 8px 5px;
-  }
+	}
 }
 
 .status-col {
@@ -50,7 +39,7 @@
 
 .el-header {
   --el-header-padding: 0 0px !important;
-  --el-header-height: 50px !important;
+  // --el-header-height: 50px !important;
 }
 // el 2.2.0 text button
 .el-button.is-text {

src/assets/styles/index.scss

@@ -5,7 +5,7 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
-@import './black.scss';
+// @import './black.scss';
 
 html,
 body,

src/assets/styles/sidebar.scss

@@ -1,22 +1,15 @@
 #app {
-  .layout-sidebar__container {
+  .sidebar {
+    position: relative;
+    overflow-y: hidden;
+    z-index: 1001;
     transition: width 0.28s ease;
     background-color: var(--base-menu-background);
     height: 100%;
-    position: relative;
-    font-size: 0px;
-    z-index: 1001;
     display: flex;
     flex-direction: column;
     -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
     box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
-    .scrollbar-wrapper {
-      overflow-x: hidden;
-    }
-
-    .el-scrollbar {
-      flex: 1;
-    }
 
     .el-scrollbar__bar.is-vertical {
       right: 0px;
@@ -29,8 +22,11 @@
 
   // 展开sidebar状态设置svg-icon边距
   .openSidebar {
-    .layout-sidebar__container .svg-icon {
+    .sidebar {
-      margin-right: 10px;
+      transform: translate(0);
+    }
+    .sidebar .svg-icon {
+      margin-right: 5px;
     }
   }
 
@@ -76,13 +72,14 @@
       margin-left: 0px;
     }
 
-    .layout-sidebar__container {
+    .sidebar {
       transition: transform 0.28s;
-			position: fixed;
+      position: fixed;
+      // background: var(--base-menu-background, #fff);
     }
 
     &.hideSidebar {
-      .layout-sidebar__container {
+      .sidebar {
         display: none;
       }
     }

src/assets/styles/variables.module.scss

@@ -10,31 +10,31 @@ $panGreen: #30b08f;
 
 // 默认菜单主题风格
 :root {
-  --base-menu-background: #ffffff;
+  --base-text-color-rgba: rgba(0, 0, 0, 0.85);
-  --base-logo-title-color: #ffffff;
-  --base-topBar-background: #ffffff;
-  --base-topBar-color: #5a5e66;
   --base-sidebar-width: 220px;
-  --base-sidebar-left: 64px;
-
   --el-aside-width: 220px;
+  --base-footer-height: 40px;
+  --base-tags-height: 34px;
+  --base-header-height: 50px;
 }
-/***默认主题颜色配置***/
+
-[data-theme='theme-light'] {
+/***侧边栏深色配置***/
-  // 菜单背景
-  --base-menu-background: #ffffff;
-  // logo部分文字颜色
-  --base-logo-title-color: #001529;
-  // 顶部导航栏背景色
-  --base-topBar-background: #ffffff;
-}
-/***深色主题颜色配置***/
 [data-theme='theme-dark'] {
   --base-menu-background: #304156;
   --base-logo-title-color: #ffffff;
-  --base-topBar-background: #ffffff;
+  // // el-ement ui 设置
-
+  // --el-fill-color-blank: #304156;
-  // el-ement ui 设置
+  --el-text-color-primary: #e5eaf3;
-  --el-fill-color-blank: #304156;
+}
-  --el-text-color-primary: #bfcbd9;
+html.dark {
+  /* custom dark bg color */
+  // --el-bg-color: #141414;
+  --base-color-white: #ffffff;
+  --base-text-color-rgba: #ffffff;
+}
+html.cafe {
+  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
+}
+html.contrast {
+  filter: contrast(2);
 }

src/components/Breadcrumb/index.vue

@@ -1,30 +1,31 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
+    <!-- <transition-group name="breadcrumb"> -->
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+    <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+      <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
-      </el-breadcrumb-item>
+    </el-breadcrumb-item>
-    </transition-group>
+    <!-- </transition-group> -->
   </el-breadcrumb>
 </template>
 
 <script setup>
-const route = useRoute();
+const route = useRoute()
-const router = useRouter();
+const router = useRouter()
 const levelList = ref([])
 
 function getBreadcrumb() {
   // only show routes with meta.title
-  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  let matched = route.matched.filter((item) => item.meta && item.meta.title)
-  const first = matched[0]
+  // const first = matched[0]
   // 判断是否为首页
   // if (!isDashboard(first)) {
   //   matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
   // }
 
-  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+  levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 }
+
 function isDashboard(route) {
   const name = route && route.name
   if (!name) {
@@ -48,10 +49,10 @@ watchEffect(() => {
   }
   getBreadcrumb()
 })
-getBreadcrumb();
+getBreadcrumb()
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
@@ -63,7 +64,7 @@ getBreadcrumb();
     cursor: text;
   }
 }
-.mobile .app-breadcrumb.el-breadcrumb{
+.mobile .app-breadcrumb.el-breadcrumb {
-	display: none;
+  display: none;
 }
-</style>
+</style>

src/components/Echarts/Gauge.vue

@@ -1,99 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
+<script setup>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 
 // import("echarts/theme/macarons"); // echarts theme
-import { debounce } from "@/utils";
+// import { debounce } from '@/utils'
+import { useDebounceFn } from '@vueuse/core'
 
-export default {
+const { proxy } = getCurrentInstance()
-  props: {
-    name: {
-      type: String,
-      default: "业务指标",
-    },
-    min: {
-      type: [Object, Number],
-      default: 0,
-    },
-    max: {
-      type: [Object, Number],
-      default: 0,
-    },
-    data: {
-      type: Array,
-      default: () => [
-        {
-          value: "",
-          name: "占比",
-        },
-      ],
-    },
-    className: {
-      type: String,
-      default: "chart",
-    },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "300px",
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener("resize", this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener("resize", this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, "macarons");
 
-      this.chart.setOption({
+const props = defineProps({
-        tooltip: {
+  name: {
-          formatter: "{a} <br/>{b} : {c}",
+    type: String,
-        },
+    default: '',
-        // toolbox: {
-        //   feature: {
-        //     restore: {},
-        //     saveAsImage: {},
-        //   },
-        // },
-        series: [
-          {
-            name: this.name,
-            type: "gauge",
-            min: this.min,
-            max: this.max,
-            detail: {
-              formatter: "{value}%",
-            },
-            data: this.data,
-          },
-        ],
-      });
-    },
   },
-};
+  min: {
+    type: [Object, Number],
+    default: 0,
+  },
+  max: {
+    type: [Object, Number],
+    default: 0,
+  },
+  data: {
+    type: Array,
+    default: () => [
+      {
+        value: '',
+        name: '占比',
+      },
+    ],
+  },
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+let chart = null
+const chartRef = ref()
+
+//重绘图表函数
+const resizeHandler = () => {
+  chart.resize()
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+
+  chart.setOption({
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c}',
+    },
+    series: [
+      {
+        name: props.name,
+        type: 'gauge',
+        min: props.min,
+        max: props.max,
+        detail: {
+          formatter: '{value}%',
+        },
+        data: props.data,
+      },
+    ],
+  })
+}
+const debouncedFn = useDebounceFn(() => {
+  // do something
+	resizeHandler()
+}, 500)
+
+document.addEventListener('resize', debouncedFn)
+
+onMounted(() => {
+  initChart()
+})
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', debouncedFn)
+})
 </script>

src/components/ImageUpload/index.vue

@@ -75,7 +75,7 @@ const uploadList = ref([])
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const baseUrl = import.meta.env.VITE_APP_BASE_API
-const uploadImgUrl = ref(baseUrl + import.meta.env.VITE_APP_UPLOAD_URL ?? '/Common/UploadFile') // 上传的图片服务器地址
+const uploadImgUrl = ref(baseUrl + import.meta.env.VITE_APP_UPLOAD_URL) // 上传的图片服务器地址
 const headers = ref({ Authorization: 'Bearer ' + getToken() })
 const fileList = ref([])
 const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
@@ -89,11 +89,11 @@ watch(
       // 然后将数组转为对象数组
       fileList.value = list.map((item) => {
         if (typeof item === 'string') {
-          if (item.indexOf(baseUrl) === -1) {
+          // if (item.indexOf(baseUrl) === -1) {
-            item = { name: baseUrl + item, url: baseUrl + item }
+          //   item = { name: baseUrl + item, url: baseUrl + item }
-          } else {
+          // } else {
-            item = { name: item, url: item }
+          item = { name: item, url: item }
-          }
+          // }
         }
         return item
       })

src/components/SvgIcon/index.vue

@@ -29,7 +29,7 @@ export default defineComponent({
           },
           [h(resolveComponent(props.name.replace('ele-', '')))],
         )
-    } else {
+    } else if (props.name != undefined && props.name != '') {
       return () =>
         h(
           'svg',
@@ -44,6 +44,8 @@ export default defineComponent({
             fill: `${props.color}`,
           }),
         )
+    } else {
+      return () => h('i')
     }
   },
 })

src/components/TopNav/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-menu :default-active="activeMenu" :active-text-color="theme" mode="horizontal" background-color="transparent" @select="handleSelect" :ellipsis="false">
+  <el-menu
+    :default-active="activeMenu"
+    :active-text-color="theme"
+    mode="horizontal"
+    background-color="transparent"
+    @select="handleSelect"
+    :ellipsis="false">
     <template v-for="(item, index) in topMenus">
       <el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
         <svg-icon :name="item.meta.icon" />
@@ -24,6 +30,7 @@
 import { constantRoutes } from '@/router'
 import { isHttp } from '@/utils/validate'
 import { useRouter } from 'vue-router'
+import { getNormalPath } from '@/utils/ruoyi'
 
 // 顶部栏初始数
 const visibleNumber = ref(5)
@@ -64,10 +71,10 @@ const childrenMenus = computed(() => {
     for (let item in router.children) {
       if (router.children[item].parentPath === undefined) {
         if (router.path === '/') {
-          router.children[item].path = '/redirect/' + router.children[item].path
+          router.children[item].path = getNormalPath('/redirect/' + router.children[item].path)
         } else {
           if (!isHttp(router.children[item].path)) {
-            router.children[item].path = router.path + '/' + router.children[item].path
+            router.children[item].path = getNormalPath(router.path + '/' + router.children[item].path)
           }
         }
         router.children[item].parentPath = router.path
@@ -96,7 +103,6 @@ const activeMenu = computed(() => {
   if (routes.length === 0) {
     activePath = currentIndex.value || defaultRouter.value
 
-    console.log('activePath', activePath)
     activeRoutes(activePath)
   }
   return activePath
@@ -170,12 +176,6 @@ onMounted(() => {
 .el-menu--horizontal > .el-menu-item .svg-icon {
   margin-right: 5px;
 }
-// .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
-// .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
-//   border-bottom: 0px solid #{"var(--theme)"} !important;
-//   color: #303133;
-// }
-
 /* sub-menu item */
 .topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
   height: 50px !important;

src/i18n/index.js

@@ -13,6 +13,10 @@ import pageLangSetCn from './pages/langSet/zh-cn'
 import pageLangSetEn from './pages/langSet/en'
 import pageLangSetTw from './pages/langSet/zh-tw'
 
+import pagemenuCn from './pages/menu/zh-cn'
+import pagemenuEn from './pages/menu/en'
+import pagemenuTw from './pages/menu/zh-tw'
+
 const i18n = createI18n({
   // 全局注入 $t 函数
   globalInjection: true,
@@ -20,9 +24,9 @@ const i18n = createI18n({
   locale: store.getters.language, //默认选择的语言 
   legacy: false, // 使用 Composition API 模式，则需要将其设置为false
   messages: {
-    'zh-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn },
+    'zh-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn, ...pagemenuCn },
-    'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw },
+    'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw, ...pagemenuTw },
-    'en': { ...en, ...pageLoginEn, ...pageLangSetEn }
+    'en': { ...en, ...pageLoginEn, ...pageLangSetEn, ...pagemenuEn }
   }
 })
 console.log('lang=' + store.getters.language)

src/i18n/lang/en.js

@@ -6,7 +6,7 @@ export default {
     system: 'System',
     monitoring: 'Monitoring',
     systemTools: 'Tools',
-    externalOpen: 'ExternalOpen',
+    externalOpen: 'External open',
     icon: 'Icon',
     systemMenu: 'Menu',
     systemRole: 'Role',
@@ -20,32 +20,34 @@ export default {
     loginLog: 'Login log',
     systemNotice: 'Notice',
     systemLang: 'Language set',
-    timedTask: 'TimedTask',
+    timedTask: 'Timed task',
-    serviceMonitor: 'ServiceMonitor',
+    serviceMonitor: 'Service monitoring',
-    codeGeneration: 'CodeGeneration',
+    codeGeneration: 'Code generation',
-    systemInterface: 'SystemInterface',
+    systemInterface: 'System interface',
     sendEmail: 'Email',
     systemArticle: 'Article',
     articleList: 'Article list',
     formBuild: 'Form building',
     officialWebsite: 'Official website',
-    fileStorage: 'File Storage',
+    fileStorage: 'File storage',
     personalCenter: 'Personal',
-    menuPermi: 'Menu permi',
+    menuPermi: 'Menu permissions',
-    assignUsers: 'Assign users',
+    assignUsers: 'Authorized user',
+    cacheMonitor: 'Cache monitoring',
   },
   tagsView: {
     refresh: 'refresh',
     close: 'close',
-    closeOther: 'closeOther',
+    closeOther: 'close other',
-    closeLeft: 'closeLeft',
+    closeLeft: 'close left',
-    closeRight: 'closeRight',
+    closeRight: 'close right',
-    closeAll: 'closeAll',
+    closeAll: 'close all',
     fullscreen: 'fullscreen',
-    closeFullscreen: 'closeFullscreen',
+    closeFullscreen: 'close fullscreen',
   },
   layout: {
     tip1: 'If you feel good, welcome to ⭐ Star ⭐ Collect it so that the author can continue to be free. Thank you!',
+    rewardUser: 'Reward the author with a cup of coffee to express encouragement',
     contactUs: 'contact us',
     donationSupport: 'donation support',
     officialWebsite: 'Official website',
@@ -65,13 +67,24 @@ export default {
     fixed: 'fixed',
     show: 'show',
     dynamicTitle: 'dynamic title',
-    darkMode: 'dark mode',
+    darkMode: 'dark',
+    lightMode: 'light',
     saveConfig: 'save',
     resetConfig: 'reset',
     logOutConfirm: 'Are you sure you want to exit the current login?',
     large: 'Large',
     default: 'Default',
-    small: 'Small'
+    small: 'Small',
+    myWorkbench: 'My workbench',
+    onlineUsers: 'Online user',
+    message: 'Message',
+    amount: 'Amount',
+    order: 'Order',
+    modifyInformation: 'Modify information',
+    technicalSelection: 'Technical selection',
+    frontendTechnology: 'Front-end technology',
+    backendTechnology: 'Backend technology',
+    BackstageManagement: 'Backstage management',
   },
   common: {
     ok: 'Ok',
@@ -82,7 +95,11 @@ export default {
     traditionalChinese: 'TraditionalChinese',
     name: 'Name',
     content: 'Content',
-    addTime: 'AddTime'
+    addTime: 'AddTime',
+    nickName: 'NickName',
+    time: 'Time',
+    yes: '是',
+    no: '否',
   },
   btn: {
     add: 'Add',

src/i18n/lang/zh-cn.js

@@ -33,6 +33,7 @@ export default {
     personalCenter: '个人中心',
     menuPermi: '菜单权限',
     assignUsers: '分配用户',
+    cacheMonitor: '缓存监控',
   },
   tagsView: {
     refresh: '刷新页面',
@@ -46,6 +47,7 @@ export default {
   },
   layout: {
     tip1: '如果觉得不错欢迎给个⭐Star⭐收藏一下，这样作者才有继续免费下去的动力，谢谢！',
+    rewardUser: '打赏作者喝杯咖啡表示鼓励',
     contactUs: '联系信息',
     donationSupport: '捐贈支持',
     officialWebsite: '官网',
@@ -65,13 +67,24 @@ export default {
     fixed: '固定',
     show: '显示',
     dynamicTitle: '动态标题',
-    darkMode: '深色模式',
+    darkMode: '深色',
+    lightMode: '明亮',
     saveConfig: '保存配置',
     resetConfig: '重置配置',
     logOutConfirm: '你確定要退出当前登录吗？',
     large: '较大',
     default: '默认',
-    small: '较小'
+    small: '较小',
+    myWorkbench: '我的工作台',
+    onlineUsers: '在线用户',
+    message: '消息',
+    amount: '金额',
+    order: '订单',
+    modifyInformation: '修改信息',
+    technicalSelection: '技术选型',
+    frontendTechnology: '前端技术',
+    backendTechnology: '后端技术',
+    BackstageManagement: '后台管理',
   },
   common: {
     ok: '确定',
@@ -80,9 +93,13 @@ export default {
     english: '英文',
     chinese: '中文',
     traditionalChinese: '繁体',
-		name: '名称',
+    name: '名称',
-		content: '内容',
+    content: '内容',
-    addTime: '添加时间'
+    addTime: '添加时间',
+    nickName: '昵称',
+    time: '时间',
+    yes: '是',
+    no: '否',
   },
   btn: {
     add: '新增',

src/i18n/lang/zh-tw.js

@@ -33,6 +33,7 @@ export default {
     personalCenter: '個人中心',
     menuPermi: '菜單權限',
     assignUsers: '分配用戶',
+    cacheMonitor: '緩存監控',
   },
   tagsView: {
     refresh: '重繪',
@@ -65,13 +66,24 @@ export default {
     fixed: '固定',
     show: '顯示',
     dynamicTitle: '動態標題',
-    darkMode: '深色模式',
+    darkMode: '深色',
+    lightMode: '明亮',
     saveConfig: '保存配置',
     resetConfig: '重置配置',
     logOutConfirm: '你確定要退出当前登录吗？',
     large: '較大',
     default: '默認',
-    small: '較小'
+    small: '較小',
+    myWorkbench: '我的工作台',
+    onlineUsers: '在線用戶',
+    message: '消息',
+    amount: '金額',
+    order: '訂單',
+    modifyInformation: '修改信息',
+    technicalSelection: '技術選型',
+    frontendTechnology: '前端技術',
+    backendTechnology: '後端技術',
+    BackstageManagement: '後台管理',
   },
   common: {
     ok: '確定',
@@ -82,7 +94,11 @@ export default {
     traditionalChinese: '繁體',
     name: '名稱',
     content: '內容',
-    addTime: '添加時間'
+    addTime: '添加時間',
+    nickName: '暱稱',
+    time: '時間',
+    yes: '是',
+    no: '否',
   },
   btn: {
     add: '新增',

src/i18n/pages/menu/en.js

@@ -0,0 +1,22 @@
+export default {
+  m: {
+    menuName: 'menuName',
+    menuState: 'menuState',
+    icon: 'icon',
+    menuid: 'menuid',
+    menuType: 'menuType',
+    sort: 'sort',
+    authorityID: 'authorityID',
+    componentPath: 'componentPath',
+    isShow: 'isShow',
+    parentMenu: 'parentMenu',
+    directory: 'directory',
+    menu: 'menu',
+    button: 'button',
+    link: 'link',
+    isFrame: 'isFrame',
+    routePath: 'routePath',
+    permissionStr: 'permission',
+    isCache: 'isCache',
+  }
+}

src/i18n/pages/menu/zh-cn.js

@@ -0,0 +1,22 @@
+export default {
+  m: {
+    menuName: '菜单名称',
+    menuState: '菜单状态',
+    icon: '图标',
+    menuid: '菜单id',
+    menuType: '菜单类型',
+    sort: '排序',
+    authorityID: '权限标识',
+    componentPath: '组件路径',
+    isShow: '是否显示',
+    parentMenu: '上级菜单',
+    directory: '目录',
+    menu: '菜单',
+    button: '按钮',
+    link: '链接',
+    isFrame: '是否外链',
+    routePath: '路由地址',
+    permissionStr: '权限字符',
+    isCache: '是否缓存',
+  }
+}

src/i18n/pages/menu/zh-tw.js

@@ -0,0 +1,22 @@
+export default {
+  m: {
+    menuName: '菜單名稱',
+    menuState: '菜單狀態',
+    icon: '圖標',
+    menuid: '菜單id',
+    menuType: '菜單類型',
+    sort: '排序',
+    authorityID: '權限標識',
+    componentPath: '組件路徑',
+    isShow: '是否顯示',
+    parentMenu: '上級菜單',
+    directory: '目錄',
+    menu: '菜單',
+    button: '按鈕',
+    link: '鏈接',
+    isFrame: '是否外鏈',
+    routePath: '路由地址',
+    permissionStr: '權限字符',
+    isCache: '是否緩存',
+  }
+}

src/layout/components/AppMain.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-main class="app-main">
+    <router-view v-slot="{ Component, route }" :key="route.path">
+      <transition appear name="fade-transform" mode="out-in">
+        <keep-alive :include="cachedViews">
+          <component :is="Component" :key="route.path" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </el-main>
+</template>
+<script setup>
+const route = useRoute()
+const store = useStore()
+const cachedViews = computed(() => {
+  return store.state.tagsView.cachedViews
+})
+</script>

src/layout/components/Navbar.vue

@@ -40,7 +40,6 @@
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -74,11 +73,12 @@ function handleCommand(command) {
 }
 
 function logout() {
-  ElMessageBox.confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
+  proxy
-    confirmButtonText: proxy.$t('common.ok'),
+    .$confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
-    cancelButtonText: proxy.$t('common.cancel'),
+      confirmButtonText: '确定',
-    type: 'warning',
+      cancelButtonText: '取消',
-  })
+      type: 'warning',
+    })
     .then(() => {
       store.dispatch('LogOut').then(() => {
         location.href = '/index'
@@ -94,21 +94,23 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-// .el-menu {
+.el-menu {
-//   // display: inline-table;
+  // display: inline-table;
-//   .el-menu-item {
+  border-bottom: none;
-//     vertical-align: center;
+  .el-menu-item {
-//   }
+    vertical-align: center;
-// }
+  }
+}
 .navbar {
-  height: 50px;
+  height: var(--base-header-height);
+  line-height: var(--base-header-height);
   overflow: hidden;
   position: relative;
   background: var(--base-topBar-background);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height: var(--base-header-height);
     height: 100%;
     float: left;
     cursor: pointer;
@@ -134,8 +136,6 @@ function setLayout() {
   }
 
   .right-menu {
-    height: 100%;
-    line-height: 50px;
     display: flex;
     justify-content: flex-end;
     align-items: center;

src/layout/components/Settings/index.vue

@@ -4,26 +4,33 @@
       <h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
     </div>
     <div class="setting-drawer-block-checbox">
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+      <div class="item" @click="handleTheme('theme-dark')">
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
         </div>
       </div>
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+      <div class="item" @click="handleTheme('theme-light')">
         <img src="@/assets/images/light.svg" alt="light" />
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
         </div>
       </div>
-      <div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
-        <div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <el-icon><Check /></el-icon>
-        </div>
-        <el-icon><moon /></el-icon>
-        {{ $t('layout.darkMode') }}
-      </div>
     </div>
+    <div class="drawer-item">
+      <el-radio-group v-model="mode" size="small">
+        <el-radio label="dark">{{ $t('layout.darkMode') }}</el-radio>
+        <el-radio label="light">{{ $t('layout.lightMode') }}</el-radio>
+        <el-radio label="cafe">cafe</el-radio>
+        <!-- <el-radio label="contrast">contrast</el-radio> -->
+      </el-radio-group>
+    </div>
+    <!-- <div class="drawer-item">
+      <span>暗黑模式</span>
+      <span class="comp-style">
+        <el-switch v-model="isDark" class="mt-2" inline-prompt />
+      </span>
+    </div> -->
     <div class="drawer-item">
       <span>{{ $t('layout.themeColor') }}</span>
       <span class="comp-style">
@@ -46,7 +53,12 @@
         <el-switch v-model="tagsView" class="drawer-switch" />
       </span>
     </div>
-
+    <div class="drawer-item">
+      <span>显示底部栏</span>
+      <span class="comp-style">
+        <el-switch v-model="showFooter" class="drawer-switch" />
+      </span>
+    </div>
     <!-- <div class="drawer-item">
       <span>{{ $t('layout.fixed') }} Header</span>
       <span class="comp-style">
@@ -76,9 +88,9 @@
 </template>
 
 <script setup>
-import variables from '@/assets/styles/variables.module.scss'
+import 'element-plus/theme-chalk/index.css'
-import originElementPlus from 'element-plus/theme-chalk/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
-
+import { useDark, useCycleList, useColorMode } from '@vueuse/core'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 import { getLightColor } from '@/utils/index'
 
@@ -90,7 +102,16 @@ const sideTheme = ref(store.state.settings.sideTheme)
 const storeSettings = computed(() => store.state.settings)
 const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
 
-const blackTheme = ref(false)
+// 可以手动更改当前值 model.value = 'cafe'
+const mode = useColorMode({
+  modes: {
+    // custom colors
+    contrast: 'dark contrast',
+    cafe: 'cafe',
+  },
+})
+const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
+const isDark = useDark()
 
 /** 是否需要topnav */
 const topNav = computed({
@@ -103,6 +124,8 @@ const topNav = computed({
     if (!val) {
       store.dispatch('app/toggleSideBarHide', false)
       store.commit('SET_SIDEBAR_ROUTERS', store.state.permission.defaultRoutes)
+      // TODO 临时解决切换topnav路由跳转问题
+      setTimeout('window.location.reload()', 100)
     }
   },
 })
@@ -126,6 +149,16 @@ const fixedHeader = computed({
     })
   },
 })
+// 是否显示底部
+const showFooter = computed({
+  get: () => storeSettings.value.showFooter,
+  set: (val) => {
+    store.dispatch('settings/changeSetting', {
+      key: 'showFooter',
+      value: val,
+    })
+  },
+})
 /**是否需要侧边栏的logo */
 const sidebarLogo = computed({
   get: () => storeSettings.value.sidebarLogo,
@@ -161,15 +194,26 @@ watch(
 watch(
   () => sideTheme,
   (val) => {
-    console.log(val.value)
     const body = document.documentElement
-    if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+    body.setAttribute('data-theme', '')
-    else body.setAttribute('data-theme', '')
   },
   {
     immediate: true,
   },
 )
+watch(
+  () => mode,
+  (val) => {
+    console.log(val.value)
+    if (val.value === 'dark') {
+      handleTheme('')
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
 /**
  * 改变主题颜色
  */
@@ -195,9 +239,7 @@ function handleTheme(val) {
   sideTheme.value = val
   const body = document.documentElement
   if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
-  else body.setAttribute('data-theme', '')
+  else body.removeAttribute('data-theme')
-  console.log('change ' + val)
-  blackTheme.value = val === 'theme-black'
 }
 function saveSetting() {
   proxy.$modal.loading('正在保存到本地，请稍候...')
@@ -209,9 +251,10 @@ function saveSetting() {
     dynamicTitle: storeSettings.value.dynamicTitle,
     sideTheme: storeSettings.value.sideTheme,
     theme: storeSettings.value.theme,
+    showFooter: storeSettings.value.showFooter,
   }
   localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
-  setTimeout(proxy.$modal.closeLoading(), 1000)
+  setTimeout(proxy.$modal.closeLoading(), 500)
 }
 function resetSetting() {
   proxy.$modal.loading('正在清除设置缓存并刷新，请稍候...')
@@ -230,7 +273,7 @@ defineExpose({
 <style lang="scss" scoped>
 .setting-drawer-title {
   margin-bottom: 12px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--base-text-color-rgba);
   line-height: 22px;
   font-weight: bold;
   .drawer-title {
@@ -244,7 +287,7 @@ defineExpose({
   margin-top: 10px;
   margin-bottom: 20px;
 
-  .setting-drawer-block-checbox-item {
+  .item {
     position: relative;
     margin-right: 16px;
     border-radius: 2px;
@@ -278,7 +321,7 @@ defineExpose({
 }
 
 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--base-text-color-rgba);
   padding: 12px 0;
   font-size: 14px;
 

src/layout/components/Sidebar/Logo.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script setup>
-import variables from '@/assets/styles/variables.module.scss'
 import logo from '@/assets/logo/logo.png'
 
 defineProps({

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-aside :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
+  <el-aside :data-theme="sideTheme" class="sidebar" :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
@@ -20,7 +20,6 @@
 <script setup>
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
 
 const route = useRoute()
 const store = useStore()
@@ -40,7 +39,3 @@ const activeMenu = computed(() => {
   return path
 })
 </script>
-
-<style lang="scss">
-@import '@/assets/styles/variables.module.scss';
-</style>

src/layout/components/TagsView/index.vue

@@ -10,18 +10,19 @@
         class="tags-view-item"
         :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
+        @contextmenu.prevent="openMenu(tag, $event)">
-      >
         <span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
         <span v-else>{{ tag.title }}</span>
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" style="width: 10px; height: 10px; display: inline-block">
-          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+          <close class="el-icon-close close" style="width: 1em; height: 1em; vertical-align: middle" />
         </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{ $t('tagsView.refresh') }}</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}
+      </li>
       <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{ $t('tagsView.closeOther') }}</li>
       <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{ $t('tagsView.closeLeft') }}</li>
       <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{ $t('tagsView.closeRight') }}</li>
@@ -225,7 +226,7 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: var(--base-tags-height);
   width: 100%;
   background: var(--base-topBar-background);
   // border-bottom: 1px solid #d8dce5;
@@ -237,22 +238,35 @@ function handleScroll() {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #ccc;
+      // border: 1px solid #ccc;
       color: var(--el-text-color-regular);
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      .close {
+        display: none;
+      }
       &:first-of-type {
         margin-left: 15px;
       }
       &:last-of-type {
         margin-right: 15px;
       }
+      &:hover {
+        background-color: var(--el-color-primary);
+        color: #fff;
+        .close {
+          display: inline-block !important;
+        }
+      }
       &.active {
         background-color: var(--el-color-primary);
         border-color: var(--el-color-primary);
         color: #fff;
+        .close {
+          display: inline-block !important;
+        }
         &::before {
           content: '';
           background: #fff;

src/layout/index.vue

@@ -1,8 +1,11 @@
 <template>
   <el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
     <!-- 移动端打开菜单遮罩 -->
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <el-drawer v-if="device === 'mobile'" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr">
-    <sidebar v-if="!sidebar.hide" />
+      <sidebar />
+    </el-drawer>
+    <sidebar v-else-if="!sidebar.hide" />
+
     <el-container class="main-container flex-center" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
       <el-header :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
@@ -17,6 +20,9 @@
           </transition>
         </router-view>
       </el-main>
+      <el-footer v-if="showFooter">
+        <div v-html="defaultSettings.copyright"></div>
+      </el-footer>
       <settings ref="settingRef" />
     </el-container>
   </el-container>
@@ -27,14 +33,19 @@ import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
-
+const menuDrawer = computed({
+  get: () => store.state.app.sidebar.opened,
+  set: (val) => {
+    store.dispatch('app/toggleSideBar')
+  },
+})
 const store = useStore()
 const theme = computed(() => store.state.settings.theme)
-// const sideTheme = computed(() => store.state.settings.sideTheme)
 const sidebar = computed(() => store.state.app.sidebar)
 const device = computed(() => store.state.app.device)
 const needTagsView = computed(() => store.state.settings.tagsView)
 const fixedHeader = computed(() => store.state.settings.fixedHeader)
+const showFooter = computed(() => store.state.settings.showFooter)
 
 const route = useRoute()
 store.dispatch('tagsView/addCachedView', route)
@@ -53,18 +64,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
 
 watchEffect(() => {
   if (device.value === 'mobile' && sidebar.value.opened) {
-    store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    // store.dispatch('app/closeSideBar')
   }
   if (width.value - 1 < WIDTH) {
     store.dispatch('app/toggleDevice', 'mobile')
-    store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    // store.dispatch('app/closeSideBar')
   } else {
     store.dispatch('app/toggleDevice', 'desktop')
   }
 })
 
 function handleClickOutside() {
-  store.dispatch('app/closeSideBar', { withoutAnimation: false })
+  store.dispatch('app/closeSideBar')
 }
 
 const settingRef = ref(null)
@@ -75,7 +86,6 @@ function setLayout() {
 
 <style lang="scss">
 @import '@/assets/styles/mixin.scss';
-@import '@/assets/styles/variables.module.scss';
 
 .main-container {
   min-height: 100%;
@@ -98,15 +108,7 @@ function setLayout() {
     top: 0;
   }
 }
-// 移动端打开菜单背景遮罩
+
-.drawer-bg {
-  background: rgba(0, 0, 0, 0.3);
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
 // 固定header
 .fixed-header {
   position: sticky;
@@ -124,19 +126,33 @@ function setLayout() {
   position: relative;
   height: 100%;
 }
+.sidebar-mobile {
+  .el-drawer__body {
+    padding: 0;
+  }
+  @media screen and (max-width: 700px) {
+    .el-drawer {
+      width: var(--base-sidebar-width) !important;
+    }
+  }
+}
 
 .el-header {
   --el-header-padding: 0 0px !important;
-  --el-header-height: 50px !important;
+  // --el-header-height: 50px !important;
+}
+.el-footer {
+  --el-footer-height: var(--base-footer-height);
+  line-height: var(--base-footer-height);
+  text-align: center;
+  color: #ccc;
 }
-
 .hasTagsView {
-  .app-main {
+  // .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+  //   min-height: calc(100vh - 84px - var(--base-footer-height));
-    min-height: calc(100vh - 84px);
+  // }
-  }
   .el-header {
-    --el-header-height: 84px !important;
+    --el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
   }
 }
 </style>

src/main.js

@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import Cookies from 'js-cookie'
 
 import ElementPlus from 'element-plus'
-import elZhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 import 'dayjs/locale/zh-cn'
 import '@/assets/styles/index.scss' // global css
 

src/plugins/cache.js

@@ -1,5 +1,5 @@
 const sessionCache = {
-  set (key, value) {
+  set(key, value) {
     if (!sessionStorage) {
       return
     }
@@ -7,7 +7,7 @@ const sessionCache = {
       sessionStorage.setItem(key, value)
     }
   },
-  get (key) {
+  get(key) {
     if (!sessionStorage) {
       return null
     }
@@ -16,23 +16,23 @@ const sessionCache = {
     }
     return sessionStorage.getItem(key)
   },
-  setJSON (key, jsonValue) {
+  setJSON(key, jsonValue) {
     if (jsonValue != null) {
       this.set(key, JSON.stringify(jsonValue))
     }
   },
-  getJSON (key) {
+  getJSON(key) {
     const value = this.get(key)
     if (value != null) {
       return JSON.parse(value)
     }
   },
-  remove (key) {
+  remove(key) {
     sessionStorage.removeItem(key);
   }
 }
 const localCache = {
-  set (key, value) {
+  set(key, value) {
     if (!localStorage) {
       return
     }
@@ -40,7 +40,7 @@ const localCache = {
       localStorage.setItem(key, value)
     }
   },
-  get (key) {
+  get(key) {
     if (!localStorage) {
       return null
     }
@@ -49,22 +49,37 @@ const localCache = {
     }
     return localStorage.getItem(key)
   },
-  setJSON (key, jsonValue) {
+  setJSON(key, jsonValue) {
     if (jsonValue != null) {
       this.set(key, JSON.stringify(jsonValue))
     }
   },
-  getJSON (key) {
+  getJSON(key) {
     const value = this.get(key)
     if (value != null) {
       return JSON.parse(value)
     }
   },
-  remove (key) {
+  remove(key) {
     localStorage.removeItem(key);
   }
 }
+import Cookies from 'js-cookie'
 
+const cookie = {
+  set(key, data, expires) {
+    Cookies.set(key, data, { expires: expires })
+  },
+  set(key, data) {
+    Cookies.set(key, data)
+  },
+  remove(key) {
+    Cookies.remove(key)
+  },
+  get(key) {
+    Cookies.get(key)
+  }
+}
 export default {
   /**
    * 会话级缓存
@@ -73,5 +88,9 @@ export default {
   /**
    * 本地缓存
    */
-  local: localCache
+  local: localCache,
-}
+  /**
+   * cookie存储
+   */
+  cookie: cookie
+}

src/settings.js

@@ -10,11 +10,11 @@ export default {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-	sideTheme: 'theme-dark',
+  sideTheme: 'theme-dark',
-	/**
+  /**
-	 * 框架主题颜色值
+   * 框架主题颜色值
-	 */
+   */
-	theme: '#FF8C00',
+  theme: '#FF8C00',
   /**
    * 是否系统布局配置
    */
@@ -51,9 +51,9 @@ export default {
    * The default is only used in the production env
    * If you want to also use it in dev, you can pass ['production', 'development']
    */
-	errorLog: 'production',
+  errorLog: 'production',
-	/**
+  /**
-	 * 版权信息
+   * 版权信息
-	 */
+   */
-  copyright: 'Copyright ©2022 izhaorui.cn All Rights Reserved.'
+  copyright: 'Copyright ©2022 <a target="_black" href="http://www.izhaorui.cn">izhaorui.cn</a> All Rights Reserved.',
 }

src/store/modules/app.js

@@ -7,7 +7,7 @@ const state = {
     hide: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'default',
+  size: Cookies.get('size') || 'small',
   lang: Cookies.get('lang') || 'zh-cn'
 }
 
@@ -50,8 +50,8 @@ const actions = {
   toggleSideBar({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
-  closeSideBar({ commit }, { withoutAnimation }) {
+  closeSideBar({ commit }) {
-    commit('CLOSE_SIDEBAR', withoutAnimation)
+    commit('CLOSE_SIDEBAR', '')
   },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)

src/store/modules/settings.js

@@ -13,7 +13,8 @@ const state = {
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
-  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
+  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
+  showFooter: storageSetting.showFooter === undefined ? true : storageSetting.showFooter
 }
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {

src/utils/ruoyi.js

@@ -1,49 +1,57 @@
 const baseURL =
   import.meta.env.VITE_APP_BASE_API
+import dayjs from 'dayjs'
 /**
  * 通用js方法封装处理
  * Copyright (c) 2019 ruoyi
  */
 
-// 日期格式化
+/**
-export function parseTime(time, pattern) {
+ * 日期格式化
+ * @param {*} time 
+ * @param {* } pattern 'YYYY-MM-DD HH:mm:ss'
+ * @returns 
+ */
+export function parseTime(time, pattern = 'YYYY-MM-DD HH:mm:ss') {
   if (arguments.length === 0 || !time) {
     return null
   }
-  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+
-  let date
+  return dayjs(time).format(pattern)
-  if (typeof time === 'object') {
+  // const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
-    date = time
+  // let date
-  } else {
+  // if (typeof time === 'object') {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+  //   date = time
-      time = parseInt(time)
+  // } else {
-    } else if (typeof time === 'string') {
+  //   if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
+  //     time = parseInt(time)
-    }
+  //   } else if (typeof time === 'string') {
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
+  //     time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
-      time = time * 1000
+  //   }
-    }
+  //   if ((typeof time === 'number') && (time.toString().length === 10)) {
-    date = new Date(time)
+  //     time = time * 1000
-  }
+  //   }
-  const formatObj = {
+  //   date = new Date(time)
-    y: date.getFullYear(),
+  // }
-    m: date.getMonth() + 1,
+  // const formatObj = {
-    d: date.getDate(),
+  //   y: date.getFullYear(),
-    h: date.getHours(),
+  //   m: date.getMonth() + 1,
-    i: date.getMinutes(),
+  //   d: date.getDate(),
-    s: date.getSeconds(),
+  //   h: date.getHours(),
-    a: date.getDay()
+  //   i: date.getMinutes(),
-  }
+  //   s: date.getSeconds(),
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+  //   a: date.getDay()
-    let value = formatObj[key]
+  // }
-    // Note: getDay() returns 0 on Sunday
+  // const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+  //   let value = formatObj[key]
-    if (result.length > 0 && value < 10) {
+  //   // Note: getDay() returns 0 on Sunday
-      value = '0' + value
+  //   if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
-    }
+  //   if (result.length > 0 && value < 10) {
-    return value || 0
+  //     value = '0' + value
-  })
+  //   }
-  return time_str
+  //   return value || 0
+  // })
+  // return time_str
 }
 
 // 表单重置

src/utils/storage.js

@@ -1,28 +0,0 @@
-import Cookies from 'js-cookie'
-
-export const cookie = {
-  set(key, data, expires) {
-    Cookies.set(key, data, { expires: expires })
-  },
-  set(key, data) {
-    Cookies.set(key, data)
-  },
-  remove(key) {
-    Cookies.remove(key)
-  },
-  get(key) {
-    Cookies.get(key)
-  }
-}
-
-export const local = {
-  set(key, data) {
-    return localStorage.setItem(key, data)
-  },
-  remove(key) {
-    return localStorage.removeItem(key)
-  },
-  get(key) {
-    return localStorage.getItem(key)
-  }
-}

src/views/dashboard/PanelGroup.vue

@@ -6,7 +6,7 @@
           <svg-icon name="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>在线用户</div>
+          <div class="card-panel-text" v-waves>{{$t('layout.onlineUsers')}}</div>
           <div id="onlineNum" class="card-panel-num">{{ state.onlineUserNum }}</div>
         </div>
       </div>
@@ -17,7 +17,7 @@
           <svg-icon name="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>消息</div>
+          <div class="card-panel-text" v-waves>{{$t('layout.message')}}</div>
           <div class="card-panel-num" id="messageNum">{{ state.chatNum }}</div>
         </div>
       </div>
@@ -28,7 +28,7 @@
           <svg-icon name="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>金额</div>
+          <div class="card-panel-text" v-waves>{{$t('layout.amount')}}</div>
           <div id="amount" class="card-panel-num">{{ state.amount }}</div>
         </div>
       </div>
@@ -39,7 +39,7 @@
           <svg-icon name="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" v-waves>订单</div>
+          <div class="card-panel-text" v-waves>{{$t('layout.order')}}</div>
           <div id="order" class="card-panel-num">{{ state.order }}</div>
         </div>
       </div>

src/views/index.vue

@@ -34,7 +34,7 @@
     </el-row>
     <el-row :gutter="20">
       <el-col :lg="16" :sm="24">
-        <h2>ZRAdmin.NET后台管理框架</h2>
+        <h2>ZRAdmin.NET {{ $t('layout.BackstageManagement') }}</h2>
         <p>
           ZRAdmin.NET借鉴了很多开源项目的优点，让你开发Web管理系统更简单，所以我也把它给开源了（前端
           <code>vue页面</code>主要参考若依，在此表示感谢.)
@@ -53,9 +53,7 @@
           </el-link>
         </p>
         <p>
-          <el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')"
+          <el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')">Gitee </el-button>
-            >访问码云
-          </el-button>
           <el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://github.com/izhaorui/ZrAdmin.NET')"
             >Github
           </el-button>
@@ -64,9 +62,9 @@
         <h3>{{ $t('layout.tip1') }}</h3>
       </el-col>
       <el-col :lg="8" :sm="24">
-        <h2>技术选型</h2>
+        <h2>{{ $t('layout.technicalSelection') }}</h2>
         <el-col :span="10">
-          <h4>后端技术</h4>
+          <h4>{{ $t('layout.backendTechnology') }}</h4>
           <ul>
             <li>NET6</li>
             <li>JWT</li>
@@ -81,7 +79,7 @@
           </ul>
         </el-col>
         <el-col :span="10">
-          <h4>前端技术</h4>
+          <h4>{{ $t('layout.frontendTechnology') }}</h4>
           <ul>
             <li>Vue3</li>
             <li>Vuex</li>
@@ -106,7 +104,7 @@
           </template>
 
           <div class="body">
-            <div style="color: red">打赏作者喝杯咖啡表示鼓励</div>
+            <div style="color: red">{{ $t('layout.rewardUser') }}</div>
             <img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
           </div>
         </el-card>
@@ -122,7 +120,7 @@
               <el-link href="http://www.izhaorui.cn/doc" target="_blank"> http://www.izhaorui.cn/doc </el-link>
             </p>
             <p>
-              <el-icon> <UserFilled /> </el-icon>QQ群：
+              <el-icon> <UserFilled /> </el-icon>{{ $t('layout.qqGroup') }}：
               <el-link
                 target="_black"
                 href="https://qm.qq.com/cgi-bin/qm/qr?k=Y__-fTGo_K2UIo3nWz7QnvS8LoRfPWKm&authKey=/ldXxiuolv80PF4yC8VtLk/TvAYbIhm2LKP8YVHCxAk+x2I+iqPAM1H/IsxQ+0gC&noverify=0">
@@ -140,7 +138,6 @@
         </el-card> -->
       </el-col>
     </el-row>
-    <el-divider />
   </div>
 </template>
 

src/views/index_v1.vue

@@ -5,7 +5,7 @@
       <el-col :md="24" :lg="16" :xl="16" class="mb10">
         <el-card shadow="hover">
           <template #header>
-            <span>我的工作台</span>
+            <span>{{$t('layout.myWorkbench')}}</span>
           </template>
           <div class="user-item">
             <div class="user-item-left">
@@ -20,7 +20,7 @@
                 <el-col :xs="24" :sm="24" :md="24">
                   <el-row>
                     <el-col :xs="24" :lg="8" class="right-l-v">
-                      <div class="right-label">昵称：</div>
+                      <div class="right-label">{{$t('common.nickName')}}：</div>
                       <div class="right-value">{{ userInfo.nickName }}</div>
                     </el-col>
                     <el-col :xs="24" :lg="16" class="right-l-v">
@@ -42,7 +42,7 @@
                       </div>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="16" class="right-l-v">
-                      <div class="right-label one-text-overflow">时间：</div>
+                      <div class="right-label one-text-overflow">{{$t('common.time')}}：</div>
                       <div class="right-value one-text-overflow">
                         {{ currentTime }}
                       </div>
@@ -51,7 +51,7 @@
                 </el-col>
                 <el-col :lg="24" class="mt10">
                   <el-button size="small" icon="edit">
-                    <router-link to="/user/profile">修改信息</router-link>
+                    <router-link to="/user/profile">{{$t('layout.modifyInformation')}}</router-link>
                   </el-button>
                   <!-- <el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button> -->
                 </el-col>
@@ -64,8 +64,8 @@
         <el-card shadow="hover">
           <template #header>
             <div>
-              <span>在线用户</span>
+              <span>{{$t('layout.onlineUsers')}}</span>
-              <el-button class="home-card-more" text @click="onOpenGitee">更多</el-button>
+              <el-button class="home-card-more" text @click="onOpenGitee">{{$t('btn.more')}}</el-button>
             </div>
           </template>
           <div class="info">
@@ -75,6 +75,7 @@
                 <ul class="info-ul">
                   <li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
                     <div class="info-item-left" v-text="v.name"></div>
+										<div>{{v.userIP}}</div>
                     <div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
                   </li>
                 </ul></div
@@ -165,7 +166,6 @@ function onOpenGitee() {}
 
 <style lang="scss" scoped>
 .home {
-  width: 97%;
   overflow: hidden;
   .home-card-more {
     float: right;
@@ -198,7 +198,7 @@ function onOpenGitee() {}
         display: flex;
         .right-label {
           color: gray;
-          width: 40px;
+          width: 75px;
         }
         .right-value {
           flex: 1;
@@ -244,7 +244,6 @@ function onOpenGitee() {}
   }
 }
 .dashboard-editor-container {
-  padding: 18px;
   background-color: var(--base-bg-main);
   position: relative;
 

src/views/login.vue

@@ -57,7 +57,7 @@
 
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>{{ defaultSettings.copyright }}</span>
+      <div v-html="defaultSettings.copyright"></div>
     </div>
   </div>
 </template>
@@ -231,9 +231,5 @@ getCookie()
   position: absolute;
   right: 20px;
   top: 10px;
-
-  .svg-icon {
-    color: #fff !important;
-  }
 }
 </style>

src/views/monitor/cache/index.vue

@@ -22,7 +22,7 @@
                     <div class="cell">运行模式</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
+                    <div class="cell" v-if="cache.info">{{ cache.info.redis_mode == 'standalone' ? '单机' : '集群' }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">端口</div>
@@ -68,7 +68,7 @@
                     <div class="cell">AOF是否开启</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
+                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == '0' ? '否' : '是' }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">RDB是否成功</div>
@@ -80,13 +80,15 @@
                     <div class="cell">Key数量</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div>
+                    <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">网络入口/出口</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div>
+                    <div class="cell" v-if="cache.info">
+                      {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
+                    </div>
                   </td>
                 </tr>
               </tbody>
@@ -116,8 +118,15 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <gauge name="内存消耗" :max="100"
+            <gauge
-              :data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
+              name="内存消耗"
+              :max="100"
+              :data="[
+                {
+                  value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2),
+                  name: '内存消耗',
+                },
+              ]" />
           </div>
         </el-card>
       </el-col>
@@ -129,7 +138,7 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗'}]" />
+            <gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗' }]" />
           </div>
         </el-card>
       </el-col>
@@ -140,7 +149,7 @@
 <script setup name="cache">
 import { getCache } from '@/api/monitor/cache'
 import * as echarts from 'echarts'
-// import Gauge from '@/components/Echarts/Gauge.vue'
+import Gauge from '@/components/Echarts/Gauge.vue'
 
 // 统计命令信息
 const commandstats = ref(null)
@@ -180,5 +189,7 @@ function getList() {
   })
 }
 
-getList()
+onMounted(() => {
-</script>
+  getList()
+})
+</script>

src/views/monitor/server/index.vue

@@ -4,65 +4,61 @@
       <el-col :lg="24" class="card-box">
         <el-card class="box-card">
           <template #header>
-            <div class="card-header clearfix">
+            <span>状态</span>
-              <span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
-            </div>
           </template>
-          <div>
+
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
-              <div class="title">CPU使用率</div>
+            <div class="title">CPU使用率</div>
-              <el-tooltip placement="top-end">
+            <el-tooltip placement="top-end">
-                <div class="content" v-if="server.cpu">
+              <div class="content" v-if="server.cpu">
-                  <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+                <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+              </div>
+            </el-tooltip>
+            <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-if="server.cpu">
+            <div class="title">内存使用率</div>
+            <el-tooltip placement="top-end">
+              <template #content>
+                <div style="font-size: 12px">
+                  <div style="padding: 3px">总量：{{ server.cpu.totalRAM }}</div>
+                  <div style="padding: 3px">已使用：{{ server.cpu.usedRam }}</div>
+                  <div style="padding: 3px">空闲：{{ server.cpu.freeRam }}</div>
                 </div>
-              </el-tooltip>
+              </template>
-              <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
+
-            </el-col>
+              <div class="content">
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
+                <el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" />
-              <div class="title">内存使用率</div>
+              </div>
+            </el-tooltip>
+            <div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="24" class="card-box">
+        <el-card>
+          <template #header>
+            <span>磁盘状态</span>
+          </template>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName">
+            <div class="title">{{ sysFile.diskName }}盘使用率</div>
+            <div class="content">
               <el-tooltip placement="top-end">
                 <template #content>
-                  <div style="font-size: 12px;">
+                  <div style="font-size: 12px">
-                    <div style="padding: 3px;">
+                    <div style="padding: 3px">总量：{{ sysFile.totalSize }}GB</div>
-                      总量：{{ server.cpu.totalRAM }}
+                    <div style="padding: 3px">空闲：{{ sysFile.availableFreeSpace }}GB</div>
-                    </div>
+                    <div style="padding: 3px">已用：{{ sysFile.used }}GB</div>
-                    <div style="padding: 3px">
-                      已使用：{{ server.cpu.usedRam }}
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ server.cpu.freeRam }}
-                    </div>
                   </div>
                 </template>
-
                 <div class="content">
-                  <el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
+                  <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
                 </div>
               </el-tooltip>
-              <div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
+            </div>
-            </el-col>
+            <div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
-            <!--
+          </el-col>
-            
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
-              <div class="title">磁盘使用率</div>
-              <div class="content">
-                <el-tooltip placement="top-end">
-                  <div slot="content" style="font-size: 12px;">
-                    <div style="padding: 3px">
-                      总量：{{ 1 }}
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ 1 }}
-                    </div>
-                  </div>
-                  <div class="content">
-                    <el-progress type="dashboard" :percentage="parseFloat(3)" />
-                  </div>
-                </el-tooltip>
-              </div>
-              <div class="footer">{{ 1 }} / {{ 100 }}</div>
-            </el-col> -->
-          </div>
         </el-card>
       </el-col>
 
@@ -74,7 +70,7 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;" v-if="server.sys">
+            <table cellspacing="0" style="width: 100%" v-if="server.sys">
               <tbody>
                 <tr>
                   <td>
@@ -124,49 +120,13 @@
         </el-card>
       </el-col>
 
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <template #header>
-            <div class="card-header">
-              <span>磁盘状态</span>
-            </div>
-          </template>
-          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
-            <div class="title">{{sysFile.diskName }}盘使用率</div>
-            <div class="content">
-              <el-tooltip placement="top-end">
-                <template #content>
-                  <div style="font-size: 12px;">
-                    <div style="padding: 3px">
-                      总量：{{ sysFile.totalSize }}GB
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ sysFile.availableFreeSpace }}GB
-                    </div>
-                    <div style="padding: 3px">
-                      已用：{{ sysFile.used }}GB
-                    </div>
-                  </div>
-                </template>
-                <div class="content">
-                  <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
-                </div>
-              </el-tooltip>
-            </div>
-            <div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
-          </el-col>
-        </el-card>
-      </el-col>
-
       <el-col :lg="24" class="card-box">
         <el-card>
           <template #header>
-            <div>
+            <span>.NET Core信息</span>
-              <span>.NET Core信息</span>
-            </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
+            <table cellspacing="0" style="width: 100%">
               <tbody>
                 <tr>
                   <td>
@@ -207,7 +167,7 @@
                     <div class="cell">启动地址</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.app">{{server.app.host}}</div>
+                    <div class="cell" v-if="server.app">{{ server.app.host }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -229,7 +189,6 @@
           </div>
         </el-card>
       </el-col>
-
     </el-row>
   </div>
 </template>
@@ -323,4 +282,4 @@ table tr {
   margin-top: 5px;
   margin-bottom: 5px;
 }
-</style>
+</style>

src/views/system/config/index.vue

@@ -77,7 +77,7 @@
       </el-table-column>
     </el-table>
 
-    <pagination :total="total" :page="queryParams.pageNum" :limit="queryParams.pageSize" @pagination="getList" />
+    <pagination v-model:total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>

src/views/system/menu/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-      <el-form-item label="菜单名称" prop="menuName">
+      <el-form-item :label="$t('m.menuName')" prop="menuName">
         <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item :label="$t('m.menuState')" prop="status">
         <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
           <el-option v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
         </el-select>
@@ -33,23 +33,23 @@
       :default-expand-all="isExpandAll"
       border
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+      <el-table-column prop="menuName" :label="$t('m.menuName')" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="60">
+      <el-table-column prop="icon" :label="$t('m.icon')" align="center" width="60">
         <template #default="scope">
           <svg-icon :name="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="60" align="center"></el-table-column>
+      <el-table-column prop="menuId" :label="$t('m.menuid')" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
-      <el-table-column prop="menuType" label="类型" align="center" width="80">
+      <el-table-column prop="menuType" :label="$t('m.menuType')" align="center" width="80">
         <template #default="scope">
-          <el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">链接</el-tag>
+          <el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">{{ $t('m.link') }}</el-tag>
-          <el-tag v-else-if="scope.row.menuType == 'C'">菜单</el-tag>
+          <el-tag v-else-if="scope.row.menuType == 'C'">{{ $t('m.menu') }}</el-tag>
-          <el-tag type="success" v-else-if="scope.row.menuType == 'M'">目录</el-tag>
+          <el-tag type="success" v-else-if="scope.row.menuType == 'M'">{{ $t('m.directory') }}</el-tag>
-          <el-tag type="warning" v-else-if="scope.row.menuType == 'F'">按钮</el-tag>
+          <el-tag type="warning" v-else-if="scope.row.menuType == 'F'">{{ $t('m.button') }}</el-tag>
         </template>
       </el-table-column>
       <!-- <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column> -->
-      <el-table-column prop="orderNum" label="排序" width="90" sortable align="center">
+      <el-table-column prop="orderNum" :label="$t('m.sort')" width="90" sortable align="center">
         <template #default="scope">
           <span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index)">{{ scope.row.orderNum }}</span>
           <el-input
@@ -59,24 +59,24 @@
             @blur="handleChangeSort(scope.row)"></el-input>
         </template>
       </el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="perms" :label="$t('m.authorityID')" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="component" :label="$t('m.componentPath')" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="visible" label="显示" width="70" align="center">
+      <el-table-column prop="visible" :label="$t('m.isShow')" width="70" align="center">
         <template #default="scope">
           <dict-tag :options="sys_show_hide" :value="scope.row.visible" />
         </template>
       </el-table-column>
-      <el-table-column prop="status" label="状态" width="80" align="center">
+      <el-table-column prop="status" :label="$t('m.menuState')" width="80" align="center">
         <template #default="scope">
           <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime">
+      <el-table-column :label="$t('common.addTime')" align="center" prop="createTime">
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="170" class-name="small-padding fixed-width">
+      <el-table-column :label="$t('btn.operate')" align="center" width="170" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button text size="small" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']"></el-button>
           <el-button text size="small" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']"></el-button>
@@ -90,7 +90,7 @@
       <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :lg="24">
-            <el-form-item label="上级菜单">
+            <el-form-item :label="$t('m.parentMenu')">
               <el-cascader
                 class="w100"
                 :options="menuOptions"
@@ -106,16 +106,16 @@
             </el-form-item>
           </el-col>
           <el-col :lg="24">
-            <el-form-item label="菜单类型" prop="menuType">
+            <el-form-item :label="$t('m.menuType')" prop="menuType">
               <el-radio-group v-model="form.menuType">
-                <el-radio label="M">目录</el-radio>
+                <el-radio label="M">{{ $t('m.directory') }}</el-radio>
-                <el-radio label="C">菜单</el-radio>
+                <el-radio label="C">{{ $t('m.menu') }}</el-radio>
-                <el-radio label="F">按钮</el-radio>
+                <el-radio label="F">{{ $t('m.button') }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :lg="12">
-            <el-form-item label="菜单名称" prop="menuName">
+            <el-form-item :label="$t('m.menuName')" prop="menuName">
               <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
             </el-form-item>
           </el-col>
@@ -127,18 +127,18 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                多语言key
+                {{ $t('languageKey') }}
               </template>
               <el-input v-model="form.menuNameKey" placeholder="请输入多语言菜单key" />
             </el-form-item>
           </el-col>
           <el-col :lg="12">
-            <el-form-item label="显示排序" prop="orderNum">
+            <el-form-item :label="$t('m.sort')" prop="orderNum">
               <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
             </el-form-item>
           </el-col>
           <el-col :lg="24" v-if="form.menuType != 'F'">
-            <el-form-item label="菜单图标" prop="icon">
+            <el-form-item :label="$t('m.icon')" prop="icon">
               <el-popover placement="bottom-start" :width="540" v-model:visible="showChooseIcon" trigger="click" @show="showSelectIcon">
                 <template #reference>
                   <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
@@ -162,11 +162,11 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                是否外链
+                {{ $t('m.isFrame') }}
               </template>
               <el-radio-group v-model="form.isFrame">
-                <el-radio label="1">是</el-radio>
+                <el-radio label="1">{{ $t('common.yes') }}</el-radio>
-                <el-radio label="0">否</el-radio>
+                <el-radio label="0">{{ $t('common.no') }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -178,7 +178,7 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                路由地址
+                {{ $t('m.routePath') }}
               </template>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
@@ -191,7 +191,7 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                组件路径
+                {{ $t('m.componentPath') }}
               </template>
               <el-input v-model="form.component" placeholder="请输入组件路径" />
             </el-form-item>
@@ -205,7 +205,7 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                权限字符
+                {{ $t('m.permissionStr') }}
               </template>
             </el-form-item>
           </el-col>
@@ -230,11 +230,11 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                是否缓存
+                {{ $t('m.isCache') }}
               </template>
               <el-radio-group v-model="form.isCache">
-                <el-radio label="0">缓存</el-radio>
+                <el-radio label="0">{{ $t('common.yes') }}</el-radio>
-                <el-radio label="1">不缓存</el-radio>
+                <el-radio label="1">{{ $t('common.no') }}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -246,7 +246,7 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                显示状态
+                {{ $t('m.isShow') }}
               </template>
               <el-radio-group v-model="form.visible">
                 <el-radio v-for="dict in sys_show_hide" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
@@ -261,7 +261,7 @@
                     <questionFilled />
                   </el-icon>
                 </el-tooltip>
-                菜单状态
+                {{ $t('m.menuState') }}
               </template>
               <el-radio-group v-model="form.status">
                 <el-radio v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
@@ -393,7 +393,7 @@ function handleAdd(row) {
     form.value.parentId = 0
   }
   open.value = true
-  title.value = '添加菜单'
+  title.value = proxy.$t('btn.add')
 }
 /** 展开/折叠操作 */
 function toggleExpandAll() {
@@ -410,7 +410,7 @@ async function handleUpdate(row) {
   getMenu(row.menuId).then((response) => {
     form.value = response.data
     open.value = true
-    title.value = '修改菜单'
+    title.value = proxy.$t('btn.edit')
   })
 }
 /** 提交按钮 */

src/views/system/notice/index.vue

@@ -53,7 +53,7 @@
       <el-table-column label="创建者" align="center" prop="createBy" width="100" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, 'YYYY-MM-DD') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

src/views/tool/gen/editTable.vue

@@ -8,16 +8,16 @@
         <gen-info-form ref="genInfo" :info="info" :tables="tables" :columns="columns" />
       </el-tab-pane>
       <el-tab-pane label="字段信息" name="cloum">
-        <el-table ref="dragTableRef" v-loading="loading" :data="columns" row-key="columnId" min-height="100px" :max-height="tableHeight">
+        <el-table ref="dragTableRef" v-loading="loading" :data="columns" row-key="columnId" min-height="80px" :max-height="tableHeight">
-          <el-table-column label="序号" type="index" class-name="allowDrag" />
+          <el-table-column label="#" type="index" class-name="allowDrag" width="60" fixed />
-          <el-table-column label="字段列名" prop="columnName" :show-overflow-tooltip="true" />
+          <el-table-column label="字段列名" prop="columnName" :show-overflow-tooltip="true" width="90" fixed />
-          <el-table-column label="字段描述">
+          <el-table-column label="字段描述" fixed width="120">
             <template #default="scope">
               <el-input v-model="scope.row.columnComment" :ref="setColumnsRef" @keydown="nextFocus(scope.row, scope.$index, $event)"> </el-input>
             </template>
           </el-table-column>
-          <el-table-column label="物理类型" prop="columnType" :show-overflow-tooltip="true" />
+          <el-table-column label="物理类型" prop="columnType" :show-overflow-tooltip="true" width="90" />
-          <el-table-column label="C#类型">
+          <el-table-column label="C#类型" width="140">
             <template #default="scope">
               <el-select v-model="scope.row.csharpType">
                 <el-option label="int" value="int" />
@@ -30,33 +30,40 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="C#属性">
+          <el-table-column label="C#属性" width="100">
             <template #default="scope">
               <el-input v-model="scope.row.csharpField"></el-input>
             </template>
           </el-table-column>
-          <el-table-column label="插入" width="50" align="center" v-if="info.tplCategory != 'select'">
+          <el-table-column label="插入" width="60" align="center" v-if="info.tplCategory != 'select'">
             <template #default="scope">
               <el-checkbox v-model="scope.row.isInsert" :disabled="scope.row.isIncrement"></el-checkbox>
             </template>
           </el-table-column>
-          <el-table-column label="编辑" width="50" align="center" v-if="info.tplCategory != 'select'">
+          <el-table-column label="编辑" width="60" align="center" v-if="info.tplCategory != 'select'">
             <template #default="scope">
               <el-checkbox v-model="scope.row.isEdit" :disabled="scope.row.isPk || scope.row.isIncrement"></el-checkbox>
             </template>
           </el-table-column>
-          <el-table-column label="列表" width="50" align="center">
+          <el-table-column label="排序" width="60" align="center">
+            <template #default="scope">
+              <el-checkbox
+                v-model="scope.row.isSort"
+                :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" width="60" align="center">
             <template #default="scope">
               <el-checkbox v-model="scope.row.isList"></el-checkbox>
             </template>
           </el-table-column>
-          <el-table-column label="查询" width="50" align="center">
+          <el-table-column label="查询" width="60" align="center">
             <template #default="scope">
               <el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'">
               </el-checkbox>
             </template>
           </el-table-column>
-          <el-table-column label="查询方式">
+          <el-table-column label="查询方式" width="90" align="center">
             <template #default="scope">
               <el-select v-model="scope.row.queryType" :disabled="scope.row.htmlType == 'datetime'" v-if="scope.row.isQuery">
                 <el-option label="=" value="EQ" />
@@ -70,12 +77,12 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="必填" width="60">
+          <el-table-column label="必填" width="60" align="center">
             <template #default="scope">
               <el-checkbox v-model="scope.row.isRequired"></el-checkbox>
             </template>
           </el-table-column>
-          <el-table-column label="表单显示类型">
+          <el-table-column label="表单显示类型" width="140">
             <template #default="scope">
               <el-select v-model="scope.row.htmlType">
                 <el-option label="文本框" value="input" />
@@ -92,15 +99,14 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="字典类型">
+          <el-table-column label="字典类型" min-width="140">
             <template #default="scope">
               <el-select
                 v-model="scope.row.dictType"
                 clearable
                 filterable
                 placeholder="请选择"
-                v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType == 'checkbox'"
+                v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType == 'checkbox'">
-              >
                 <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
                   <span style="float: left">{{ dict.dictName }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
@@ -108,6 +114,11 @@
               </el-select>
             </template>
           </el-table-column>
+          <el-table-column label="备注" align="center" width="200">
+            <template #default="scope">
+              <el-input v-model="scope.row.remark"> </el-input>
+            </template>
+          </el-table-column>
         </el-table>
       </el-tab-pane>
     </el-tabs>
@@ -129,7 +140,7 @@ import Sortable from 'sortablejs'
 // 选中选项卡的 name
 const activeName = ref('cloum')
 // 表格的高度
-const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
+const tableHeight = ref(document.documentElement.scrollHeight - 275 + 'px')
 // 表信息
 const tables = ref([])
 // 表列信息
@@ -151,7 +162,7 @@ function handleQuery() {
     getGenTable(tableId).then((res) => {
       loading.value = false
       columns.value = res.data.info.columns
-      info.value = res.data.info
+      info.value = { ...res.data.info, ...res.data.info.options }
       tables.value = res.data.tables // 子表
     })
   }
@@ -176,8 +187,9 @@ function submitForm() {
         parentMenuId: info.value.parentMenuId,
         sortField: info.value.sortField,
         sortType: info.value.sortType,
-        checkedBtn: info.value.checkedBtn?.toString(),
+        checkedBtn: info.value.checkedBtn,
         permissionPrefix: info.value.permissionPrefix,
+        colNum: info.value.colNum,
       }
       console.log('genForm', genTable)
 

src/views/tool/gen/genInfoForm.vue

@@ -87,8 +87,7 @@
             :props="{ checkStrictly: true, value: 'menuId', label: 'menuName', emitPath: false }"
             placeholder="请选择上级菜单"
             clearable
-            v-model="info.parentMenuId"
+            v-model="info.parentMenuId">
-          >
             <template #default="{ node, data }">
               <span>{{ data.menuName }}</span>
               <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -97,7 +96,7 @@
         </el-form-item>
       </el-col>
       <el-col :lg="12">
-        <el-form-item label="查询排序字段">
+        <el-form-item label="默认查询排序字段">
           <el-select v-model="info.sortField" placeholder="请选择字段" class="mr10" clearable="">
             <el-option v-for="item in columns" :key="item.columnId" :label="item.csharpField" :value="item.csharpField"> </el-option>
           </el-select>
@@ -164,6 +163,17 @@
           </el-input>
         </el-form-item>
       </el-col>
+      <!-- <el-col :lg="12">
+        <el-form-item prop="vuePath" label="Vue路径">
+          <el-input v-model="info.vuePath" placeholder="Vue项目所在绝对路径到项目根目录，eg：D:/ZRAdmin-vue"></el-input>
+        </el-form-item>
+      </el-col> -->
+      <el-col :lg="12">
+        <el-form-item prop="colNum" label="一行显示列">
+          <el-radio v-model="info.colNum" :label="12">2列</el-radio>
+          <el-radio v-model="info.colNum" :label="24">1列</el-radio>
+        </el-form-item>
+      </el-col>
       <el-col :lg="24" v-show="info.tplCategory != 'select'">
         <el-form-item label="显示按钮">
           <el-checkbox-group v-model="info.checkedBtn" @change="checkedBtnSelect">
@@ -201,8 +211,7 @@
               v-for="(column, index) in columns"
               :key="index"
               :label="column.csharpField + '：' + column.columnComment"
-              :value="column.csharpField"
+              :value="column.csharpField"></el-option>
-            ></el-option>
           </el-select>
         </el-form-item>
       </el-col>
@@ -221,8 +230,7 @@
               v-for="(column, index) in columns"
               :key="index"
               :label="column.csharpField + '：' + column.columnComment"
-              :value="column.csharpField"
+              :value="column.csharpField"></el-option>
-            ></el-option>
           </el-select>
         </el-form-item>
       </el-col>
@@ -241,8 +249,7 @@
               v-for="(column, index) in columns"
               :key="index"
               :label="column.csharpField + '：' + column.columnComment"
-              :value="column.csharpField"
+              :value="column.csharpField"></el-option>
-            ></el-option>
           </el-select>
         </el-form-item>
       </el-col>
@@ -279,12 +286,7 @@
             </el-tooltip>
           </template>
           <el-select v-model="info.subTableFkName">
-            <el-option
+            <el-option v-for="(column, index) in subColumns" :key="index" :label="column.csharpField" :value="column.csharpField">
-              v-for="(column, index) in subColumns"
-              :key="index"
-              :label="column.csharpField"
-              :value="column.csharpField"
-            >
               <span style="float: left">{{ column.csharpField }}</span>
               <span style="float: right">{{ column.columnComment }}</span>
             </el-option>
@@ -301,7 +303,6 @@ import { queryColumnInfo } from '@/api/tool/gen'
 
 const subColumns = ref([])
 const menuOptions = ref([])
-// const checkedBtn = ref([])
 
 const props = defineProps({
   info: {
@@ -361,7 +362,6 @@ function setSubTableColumns(value) {
   for (var item in props.tables) {
     const obj = props.tables[item]
     if (value === obj.tableName) {
-      // subColumns.value = props.tables[item].columns
       queryColumnInfo(obj.tableId).then((res) => {
         if (res.code == 200) {
           subColumns.value = res.data.columns

src/views/tool/gen/index.vue

@@ -48,7 +48,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <pagination :page="queryParams.pageNum" v-model:limit="queryParams.pageSize" v-model:total="total" @pagination="getList" />
+    <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" v-model:total="total" @pagination="getList" />
 
     <!-- 预览界面 -->
     <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body>
@@ -173,7 +173,7 @@ function openImportTable() {
 function handlePreview(row) {
   proxy.$refs['codeform'].validate((valid) => {
     if (!valid) {
-      proxy.$modal.msgError('请先完成表格')
+      proxy.$modal.msgError('请先完成表格内容')
       return
     }
     proxy.$modal.loading('请稍后...')