🎨 组件优化

src/components/ImagePreview/index.vue

@@ -1,10 +1,12 @@
 <template>
   <el-image
     :src="`${realSrc}`"
-    fit="cover"
+    fit="contain"
+    preview-teleported
+    :hide-on-click-modal="true"
+    lazy
     :style="`width:${realWidth};height:${realHeight};`"
-    :preview-src-list="realSrcList"
+    :preview-src-list="realSrcList">
-  >
     <template #error>
       <div class="image-slot">
         <el-icon><picture-filled /></el-icon>
@@ -14,50 +16,58 @@
 </template>
 
 <script setup>
-import { isExternal } from "@/utils/validate";
+import { isExternal, isArray } from '@/utils/validate'
 
 const props = defineProps({
   src: {
-    type: String,
+    type: [String, null],
-    required: true
+    required: true,
+    default: ''
   },
   width: {
     type: [Number, String],
-    default: ""
+    default: ''
   },
   height: {
     type: [Number, String],
-    default: ""
+    default: ''
+  },
+  split: {
+    type: String,
+    default: ','
   }
-});
+})
 
 const realSrc = computed(() => {
-  let real_src = props.src.split(",")[0];
+  if (props.src == null || props.src == undefined) return
-  if (isExternal(real_src)) {
+  let real_src = props.src.split(props.split)
-    return real_src;
+
+  if (real_src && isArray(real_src)) {
+    var url0 = real_src[0]
+    if (isExternal(url0)) {
+      return url0
     }
-  return import.meta.env.VITE_APP_BASE_API + real_src;
+  }
-});
+
+  return import.meta.env.VITE_APP_BASE_API + real_src
+})
 
 const realSrcList = computed(() => {
-  let real_src_list = props.src.split(",");
+  if (props.src == null || props.src == undefined) return
-  let srcList = [];
+  let real_src_list = props.src.split(props.split)
-  real_src_list.forEach(item => {
+  let srcList = []
+  real_src_list.forEach((item) => {
     if (isExternal(item)) {
-      return srcList.push(item);
+      return srcList.push(item)
     }
-    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item)
-  });
+  })
-  return srcList;
+  return srcList
-});
+})
 
-const realWidth = computed(() =>
+const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`))
-  typeof props.width == "string" ? props.width : `${props.width}px`
-);
 
-const realHeight = computed(() =>
+const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`))
-  typeof props.height == "string" ? props.height : `${props.height}px`
-);
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Navbar.vue

@@ -19,7 +19,7 @@
 
       <el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
         <span class="avatar-wrapper">
-          <img :src="userStore.avatar" class="user-avatar" />
+          <el-avatar :size="25" shape="circle" class="user-avatar" :src="userStore.avatar" />
           <span class="name">{{ userStore.name }}</span>
           <el-icon><ArrowDown /></el-icon>
         </span>

src/utils/ruoyi.js

@@ -282,3 +282,14 @@ export function color16() {
   const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`
   return color
 }
+
+/**
+ * 返回星期几
+ * @param {*} num
+ * @returns
+ */
+export function getWeek(num = 0) {
+  var datas = dayjs().add(num, 'day').day()
+  var week = ['日', '一', '二', '三', '四', '五', '六']
+  return '星期' + week[datas]
+}

src/views/components/CommonMenu/index.vue

@@ -11,8 +11,9 @@
         </router-link>
       </div>
     </template>
-    <el-empty :image-size="80" v-if="commonRouters && commonRouters.length <= 0" />
   </div>
+
+  <el-empty :image-size="80" v-if="commonRouters && commonRouters.length <= 0" />
 </template>
 <script setup>
 import usePermissionStore from '@/store/modules/permission'

src/views/index_v1.vue

@@ -2,11 +2,11 @@
   <div class="home">
     <!-- 用户信息 -->
     <el-row :gutter="15">
-      <el-col :md="24" :lg="24" :xl="24" class="mb10">
+      <el-col :md="24" :lg="18" :xl="24" class="mb10">
         <el-card shadow="hover">
           <div class="user-item">
             <div class="user-item-left">
-              <img :src="userInfo.avatar" />
+              <el-avatar :size="60" shape="circle" :src="userInfo.avatar" />
             </div>
 
             <div class="user-item-right">
@@ -24,6 +24,12 @@
           </div>
         </el-card>
       </el-col>
+      <el-col :lg="6" class="mb10">
+        <el-card style="height: 100%">
+          <div class="text-warning mb10">{{ currentTime }} {{ weekName }}</div>
+          <div>上次登录时间：{{ userInfo.loginDate }}</div>
+        </el-card>
+      </el-col>
     </el-row>
 
     <el-row :gutter="15">
@@ -88,6 +94,7 @@ import BarChart from './dashboard/BarChart'
 import CommonMenu from './components/CommonMenu'
 
 import useUserStore from '@/store/modules/user'
+import { getWeek } from '@/utils/ruoyi'
 const showEdit = ref(false)
 const data = {
   newVisitis: {
@@ -112,8 +119,9 @@ const userInfo = computed(() => {
   return useUserStore().userInfo
 })
 const currentTime = computed(() => {
-  return proxy.parseTime(new Date())
+  return proxy.parseTime(new Date(), 'YYYY-MM-DD')
 })
+const weekName = getWeek()
 
 let lineChartData = reactive([])
 const dataType = ref(null)
@@ -143,13 +151,8 @@ function handleAdd() {
     .user-item-left {
       width: 60px;
       height: 60px;
-      border-radius: 50%;
       overflow: hidden;
       margin-right: 10px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
     }
     .user-item-right {
       flex: 1;

src/views/system/article/manager.vue

@@ -49,7 +49,7 @@
       <el-table-column prop="fmt_type" label="编辑器类型" width="100"> </el-table-column>
       <el-table-column prop="tags" label="标签" width="100" :show-overflow-tooltip="true"> </el-table-column>
       <el-table-column prop="hits" label="点击量" width="80" align="center"> </el-table-column>
-      <el-table-column prop="content" label="文章内容" :show-overflow-tooltip="true"> </el-table-column>
+      <!-- <el-table-column prop="content" label="文章内容" :show-overflow-tooltip="true"> </el-table-column> -->
       <el-table-column sortable prop="status" align="center" label="状态" width="90">
         <template #default="scope">
           <el-tag :type="scope.row.status == '2' ? 'danger' : 'success'" disable-transitions

src/views/system/article/publish.vue

@@ -3,9 +3,14 @@
     <el-row :gutter="24">
       <!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
       <el-form :model="form" ref="formRef" label-width="100px" :rules="rules" @submit.prevent>
+        <el-row :gutter="20">
+          <el-col :lg="12">
             <el-form-item label="文章标题" prop="title">
               <el-input v-model="form.title" placeholder="请输入文章标题（必须）" />
             </el-form-item>
+          </el-col>
+
+          <el-col :lg="12">
             <el-form-item label="文章分类" prop="categoryId">
               <el-cascader
                 class="w100"
@@ -15,7 +20,15 @@
                 clearable
                 v-model="form.categoryId" />
             </el-form-item>
+          </el-col>
 
+          <el-col :lg="12">
+            <el-form-item label="是否公开">
+              <el-switch v-model="form.isPublic" inline-prompt :active-value="1" :in-active-value="0" active-text="是" inactive-text="否" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :lg="12">
             <el-form-item label="文章标签">
               <el-tag v-for="tag in form.dynamicTags" :key="tag" class="mr10" closable :disable-transitions="false" @close="handleCloseTag(tag)">
                 {{ tag }}
@@ -30,9 +43,8 @@
 
               <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 文章标签</el-button>
             </el-form-item>
-        <el-form-item label="是否公开">
+          </el-col>
-          <el-switch v-model="form.isPublic" inline-prompt :active-value="1" :in-active-value="0" active-text="是" inactive-text="否" />
+
-        </el-form-item>
           <el-form-item label="文章封面">
             <UploadImage ref="uploadRef" v-model="form.coverUrl" :limit="1" :fileSize="15" :drag="true" />
           </el-form-item>
@@ -42,10 +54,11 @@
 
           <el-col :lg="24">
             <el-form-item style="text-align: right">
-            <el-button @click="handlePublish('1')">发布文章</el-button>
+              <el-button type="success" @click="handlePublish('1')">发布文章</el-button>
-            <el-button type="success" @click="handlePublish('2')">存为草稿</el-button>
+              <el-button @click="handlePublish('2')">存为草稿</el-button>
             </el-form-item>
           </el-col>
+        </el-row>
       </el-form>
     </el-row>
   </div>

src/views/system/user/profile/userAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user-info-head" @click="editCropper()">
-    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <!-- <img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> -->
+    <el-avatar shape="circle" :size="120" :src="options.img" />
   </div>
   <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
     <el-row>
@@ -62,12 +63,12 @@ import useUserStore from '@/store/modules/user'
 export default {
   components: {
     VueCropper,
-    uploadAvatar,
+    uploadAvatar
   },
   props: {
     user: {
-      type: Object,
+      type: Object
-    },
+    }
   },
   setup() {
     const useStore = useUserStore()
@@ -84,7 +85,7 @@ export default {
       autoCropWidth: 200, // 默认生成截图框宽度
       autoCropHeight: 200, // 默认生成截图框高度
       fixedBox: true, // 固定截图框大小 不允许改变
-      previews: {}, //预览数据
+      previews: {} //预览数据
     })
 
     /** 编辑头像 */
@@ -162,9 +163,9 @@ export default {
       beforeUpload,
       uploadImg,
       realTime,
-      closeDialog,
+      closeDialog
+    }
   }
-  },
 }
 </script>