From 507435014b06eb2cb325e866d662efb3513b0820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Wed, 31 May 2023 18:19:38 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImagePreview/index.vue        | 66 ++++++++------
 src/layout/components/Navbar.vue             |  2 +-
 src/utils/ruoyi.js                           | 11 +++
 src/views/components/CommonMenu/index.vue    |  3 +-
 src/views/index_v1.vue                       | 19 ++--
 src/views/system/article/manager.vue         |  2 +-
 src/views/system/article/publish.vue         | 91 +++++++++++---------
 src/views/system/user/profile/userAvatar.vue | 15 ++--
 8 files changed, 124 insertions(+), 85 deletions(-)

diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 30fd088..76a9656 100644
--- a/src/components/ImagePreview/index.vue
+++ b/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,
-    required: true
+    type: [String, null],
+    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 (isExternal(real_src)) {
-    return real_src;
+  if (props.src == null || props.src == undefined) return
+  let real_src = props.src.split(props.split)
+
+  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(",");
-  let srcList = [];
-  real_src_list.forEach(item => {
+  if (props.src == null || props.src == undefined) return
+  let real_src_list = props.src.split(props.split)
+  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;
-});
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item)
+  })
+  return srcList
+})
 
-const realWidth = computed(() =>
-  typeof props.width == "string" ? props.width : `${props.width}px`
-);
+const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`))
 
-const realHeight = computed(() =>
-  typeof props.height == "string" ? props.height : `${props.height}px`
-);
+const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 95e2c31..22b5566 100644
--- a/src/layout/components/Navbar.vue
+++ b/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>
diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js
index 54fbb5d..39f1bbb 100644
--- a/src/utils/ruoyi.js
+++ b/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]
+}
diff --git a/src/views/components/CommonMenu/index.vue b/src/views/components/CommonMenu/index.vue
index 5aff0a6..289de43 100644
--- a/src/views/components/CommonMenu/index.vue
+++ b/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'
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index fd040bf..443c3d9 100644
--- a/src/views/index_v1.vue
+++ b/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;
diff --git a/src/views/system/article/manager.vue b/src/views/system/article/manager.vue
index 74f652c..78fa8f3 100644
--- a/src/views/system/article/manager.vue
+++ b/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
diff --git a/src/views/system/article/publish.vue b/src/views/system/article/publish.vue
index 6a8317f..f12c24f 100644
--- a/src/views/system/article/publish.vue
+++ b/src/views/system/article/publish.vue
@@ -3,49 +3,62 @@
     <el-row :gutter="24">
       <!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
       <el-form :model="form" ref="formRef" label-width="100px" :rules="rules" @submit.prevent>
-        <el-form-item label="文章标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入文章标题（必须）" />
-        </el-form-item>
-        <el-form-item label="文章分类" prop="categoryId">
-          <el-cascader
-            class="w100"
-            :options="categoryOptions"
-            :props="{ checkStrictly: true, value: 'categoryId', label: 'name', emitPath: false }"
-            placeholder="请选择文章分类"
-            clearable
-            v-model="form.categoryId" />
-        </el-form-item>
+        <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-form-item label="文章标签">
-          <el-tag v-for="tag in form.dynamicTags" :key="tag" class="mr10" closable :disable-transitions="false" @close="handleCloseTag(tag)">
-            {{ tag }}
-          </el-tag>
-          <el-input
-            v-if="inputVisible"
-            ref="inputRef"
-            v-model="inputValue"
-            class="w20"
-            @keyup.enter="handleInputConfirm"
-            @blur="handleInputConfirm" />
+          <el-col :lg="12">
+            <el-form-item label="文章分类" prop="categoryId">
+              <el-cascader
+                class="w100"
+                :options="categoryOptions"
+                :props="{ checkStrictly: true, value: 'categoryId', label: 'name', emitPath: false }"
+                placeholder="请选择文章分类"
+                clearable
+                v-model="form.categoryId" />
+            </el-form-item>
+          </el-col>
 
-          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 文章标签</el-button>
-        </el-form-item>
-        <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-form-item label="文章封面">
-          <UploadImage ref="uploadRef" v-model="form.coverUrl" :limit="1" :fileSize="15" :drag="true" />
-        </el-form-item>
-        <el-form-item prop="content" label="文章内容">
-          <MdEditor v-model="form.content" :onUploadImg="onUploadImg" />
-        </el-form-item>
+          <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="24">
-          <el-form-item style="text-align: right">
-            <el-button @click="handlePublish('1')">发布文章</el-button>
-            <el-button type="success" @click="handlePublish('2')">存为草稿</el-button>
+          <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 }}
+              </el-tag>
+              <el-input
+                v-if="inputVisible"
+                ref="inputRef"
+                v-model="inputValue"
+                class="w20"
+                @keyup.enter="handleInputConfirm"
+                @blur="handleInputConfirm" />
+
+              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 文章标签</el-button>
+            </el-form-item>
+          </el-col>
+
+          <el-form-item label="文章封面">
+            <UploadImage ref="uploadRef" v-model="form.coverUrl" :limit="1" :fileSize="15" :drag="true" />
           </el-form-item>
-        </el-col>
+          <el-form-item prop="content" label="文章内容">
+            <MdEditor v-model="form.content" :onUploadImg="onUploadImg" />
+          </el-form-item>
+
+          <el-col :lg="24">
+            <el-form-item style="text-align: right">
+              <el-button type="success" @click="handlePublish('1')">发布文章</el-button>
+              <el-button @click="handlePublish('2')">存为草稿</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </el-row>
   </div>
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
index 148e1e0..4339d98 100644
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/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>