feat: 首页样式开发

src/views/home/components/table/columns.tsx

@@ -0,0 +1,63 @@
+import { tableData } from "../../data";
+import { delay } from "@pureadmin/utils";
+import { ref, onMounted, reactive } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+import Empty from "./empty.svg?component";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const columns: TableColumnList = [
+    {
+      sortable: false,
+      label: "知识标题",
+      prop: "questionNumber"
+    },
+    {
+      sortable: false,
+      label: "发文日期",
+      prop: "date"
+    },
+    {
+      sortable: false,
+      label: "政策类型",
+      prop: "resolveNumber"
+    },
+    {
+      label: "最新时间",
+      prop: "date"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 7,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: 0,
+    align: "center"
+  });
+
+  function onCurrentChange(page: number) {
+    console.log("onCurrentChange", page);
+    loading.value = true;
+    delay(300).then(() => {
+      loading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    dataList.value = tableData;
+    pagination.total = dataList.value.length;
+    loading.value = false;
+  });
+
+  return {
+    Empty,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onCurrentChange
+  };
+}

src/views/home/components/table/empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>

src/views/home/components/table/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const { loading, columns, dataList, Empty, onCurrentChange } = useColumns();
+</script>
+
+<template>
+  <pure-table
+    row-key="id"
+    alignWhole="center"
+    showOverflowTooltip
+    :loading="loading"
+    :loading-config="{ background: 'transparent' }"
+    :data="dataList"
+    :header-cell-style="{
+      background: 'var(--el-table-row-hover-bg-color)',
+      color: '#888888'
+    }"
+    :columns="columns"
+    @page-current-change="onCurrentChange"
+  >
+    <template #empty>
+      <el-empty description="暂无数据" :image-size="60">
+        <template #image>
+          <Empty />
+        </template>
+      </el-empty>
+    </template>
+    <template #operation="{ row }">
+      <el-button
+        plain
+        circle
+        size="small"
+        :title="`查看序号为${row.id}的详情`"
+        :icon="useRenderIcon('ri:search-line')"
+      />
+    </template>
+  </pure-table>
+</template>
+
+<style lang="scss">
+.pure-table-filter {
+  .el-table-filter__list {
+    min-width: 80px;
+    padding: 0;
+
+    li {
+      line-height: 28px;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-table) {
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+
+  height: 300px;
+
+  .el-empty__description {
+    margin: 0;
+  }
+
+  .el-scrollbar__bar {
+    display: none;
+  }
+}
+</style>

src/views/home/data.ts

@@ -0,0 +1,61 @@
+import { dayjs, getRandomIntBetween } from "./utils";
+/** 数据统计 */
+const tableData = Array.from({ length: 30 }).map((_, index) => {
+  return {
+    id: index + 1,
+    requiredNumber: getRandomIntBetween(13500, 19999),
+    questionNumber: getRandomIntBetween(12600, 16999),
+    resolveNumber: getRandomIntBetween(13500, 17999),
+    satisfaction: getRandomIntBetween(95, 100),
+    date: dayjs().subtract(index, "day").format("YYYY-MM-DD")
+  };
+});
+
+const processList = [
+  {
+    label: "全量报送",
+    value: 24,
+    bgImage: "/src/assets/home/quanliangbaosong@2x.png"
+  },
+  {
+    label: "待审批",
+    value: 24,
+    bgImage: "/src/assets/home/daishenpi@2x.png"
+  },
+  {
+    label: "审批通过",
+    value: 24,
+    bgImage: "/src/assets/home/shenpitongguo@2x.png"
+  },
+  {
+    label: "驳回",
+    value: 0,
+    bgImage: "/src/assets/home/bohui@2x.png"
+  },
+  {
+    label: "失效",
+    value: 24,
+    bgImage: "/src/assets/home/shixiao@2x.png"
+  }
+];
+
+const commonList = [
+  {
+    label: "报送知识管理",
+    bgImage: "/src/assets/home/baosongguanli@2x.png"
+  },
+  {
+    label: "全量知识管理",
+    bgImage: "/src/assets/home/quanliangzhishi@2x.png"
+  },
+  {
+    label: "敏感词管理",
+    bgImage: "/src/assets/home/minganci@2x.png"
+  },
+  {
+    label: "知识审批",
+    bgImage: "/src/assets/home/shenpi@2x.png"
+  }
+];
+
+export { tableData, processList, commonList };

src/views/home/index.vue

@@ -1,11 +1,356 @@
 <script setup lang="ts">
+// import { ref, markRaw } from "vue";
+import ReCol from "@/components/ReCol";
+import WelcomeTable from "./components/table/index.vue";
+import { ArrowRight } from "@element-plus/icons-vue";
+import { processList, commonList } from "./data";
+
 defineOptions({
   name: "Home"
 });
 </script>
 
 <template>
-  <div class="container">
-    <h1>首页</h1>
+  <div class="main px-14">
+    <el-row :gutter="24" justify="space-around">
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="9"
+        :md="9"
+        :sm="9"
+        :xs="9"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
+      >
+        <el-card
+          class="bar-card"
+          shadow="never"
+          :body-style="{ padding: '0px' }"
+        >
+          <div class="h-[204px]">
+            <img
+              src="@/assets/home/livelihood_Information.png"
+              class="w-[100%] h-[100%]"
+            />
+          </div>
+        </el-card>
+      </re-col>
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="15"
+        :md="15"
+        :sm="15"
+        :xs="15"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 480
+          }
+        }"
+      >
+        <el-card shadow="never" :body-style="{ padding: '16px 24px' }">
+          <div class="my_process">
+            <div class="my_process_header">
+              <div class="my_process_header-right">
+                <img
+                  src="@/assets/home/my_process_icon.png"
+                  class="w-[24px] h-[24px] mr-2"
+                />
+                <span>知识报送</span>
+              </div>
+              <div class="my_process_header-left">
+                <span class="mr-[52px]">姓名: {{ "1111" }}</span>
+                <span>最后登陆时间: {{ "1111" }}</span>
+              </div>
+            </div>
+            <div class="my_process_content">
+              <div
+                class="my_process_content-box"
+                v-for="(v, i) in processList"
+                :key="i"
+              >
+                <img :src="v.bgImage" class="w-[56px] h-[56px] mr-2" />
+                <div class="my_process_content-box-left">
+                  <span>{{ v.value }}</span>
+                  <sapn>{{ v.label }}</sapn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="16"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 560
+          }
+        }"
+      >
+        <el-card
+          shadow="never"
+          class="h-[380px]"
+          :body-style="{ padding: '16px 24px 0px' }"
+        >
+          <div class="flex justify-between">
+            <div class="flex justify-start">
+              <img
+                src="@/assets/home/my_process_icon.png"
+                class="w-[24px] h-[24px] mr-2"
+              />
+              <span>最新报送知识</span>
+            </div>
+            <div>
+              <el-button type="text">
+                查看更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+              </el-button>
+            </div>
+          </div>
+          <WelcomeTable class="mt-3" />
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="8"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 640
+          }
+        }"
+      >
+        <el-card shadow="never" class="h-[380px]">
+          <div class="home_title">
+            <div class="flex justify-start">
+              <img
+                src="@/assets/home/my_process_icon.png"
+                class="w-[24px] h-[24px] mr-2"
+              />
+              <span>常用功能</span>
+            </div>
+          </div>
+          <div class="common_content">
+            <div
+              class="common_content_box"
+              v-for="(v, i) in commonList"
+              :key="i"
+            >
+              <img :src="v.bgImage" class="w-[50px] h-[50px]" />
+              <span>{{ v.label }}</span>
+            </div>
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="12"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 640
+          }
+        }"
+      >
+        <el-card shadow="never" class="h-[350px]">
+          <div class="home_title">
+            <div class="flex justify-start">
+              <img
+                src="@/assets/home/my_process_icon.png"
+                class="w-[24px] h-[24px] mr-2"
+              />
+              <span>最新知识问题</span>
+            </div>
+            <div>
+              <el-button type="text">
+                查看更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+              </el-button>
+            </div>
+          </div>
+          <div class="py-[16px]">
+            识知识知识知识知识知识知识知识知识知识知识
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[16px]"
+        :value="12"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 640
+          }
+        }"
+      >
+        <el-card shadow="never" class="h-[350px]">
+          <div class="home_title">
+            <div class="flex justify-start">
+              <img
+                src="@/assets/home/my_process_icon.png"
+                class="w-[24px] h-[24px] mr-2"
+              />
+              <span>常问问题</span>
+            </div>
+            <div>
+              <el-button type="text">
+                查看更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+              </el-button>
+            </div>
+          </div>
+          <div class="py-[16px]">
+            识知识知识知识知识知识知识知识知识知识知识
+          </div>
+        </el-card>
+      </re-col>
+    </el-row>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.main {
+  .my_process {
+    box-sizing: border-box;
+    height: 172px;
+
+    .my_process_header {
+      display: flex;
+      align-items: self-start;
+      justify-content: space-between;
+      height: 40px;
+      border-bottom: 1px solid #eaeaea;
+
+      .my_process_header-right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-size: 20px;
+      }
+
+      .my_process_header-left {
+        font-size: 16px;
+        color: #333;
+      }
+    }
+
+    .my_process_content {
+      display: flex;
+      align-items: center;
+
+      .my_process_content-box {
+        box-sizing: border-box;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: flex-start;
+        height: 104px;
+        padding: 24px;
+        margin-top: 16px;
+        margin-right: 16px;
+        color: #333;
+        background: #f5f9ff;
+        border-radius: 8px;
+
+        .my_process_content-box-left {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: space-between;
+
+          & > :first-child {
+            font-size: 30px;
+          }
+
+          & > :last-child {
+            font-size: 18px;
+            color: #999;
+          }
+        }
+      }
+
+      & > :last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .home_title {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #eaeaea;
+  }
+
+  .common_content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 16px;
+
+    .common_content_box {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 96px;
+      font-size: 16px;
+      color: #333;
+
+      img {
+        margin-bottom: 12px;
+      }
+    }
+  }
+}
+</style>

src/views/home/utils.ts

@@ -0,0 +1,6 @@
+export { default as dayjs } from "dayjs";
+export { useDark, cloneDeep } from "@pureadmin/utils";
+
+export function getRandomIntBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}