🎨 组件优化

2023-05-31 18:19:38 +08:00 · 2023-05-31 18:19:38 +08:00 · 507435014b
commit 507435014b
parent 94c3d5d714
8 changed files with 124 additions and 85 deletions
--- 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>
--- 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>
--- 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]
+}
--- 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'
--- 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;
--- 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
--- 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>
--- 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>