first commit

src/views/home/components/AccessTrend.vue

@@ -0,0 +1,206 @@
+<template>
+  <a-card title="访问趋势" :bordered="false" class="gi_card_title">
+    <template #extra>
+      <a-radio-group type="button" size="small" default-value="1">
+        <a-radio value="1">近7天</a-radio>
+        <a-radio value="2">近30天</a-radio>
+      </a-radio-group>
+    </template>
+    <VCharts :option="option" autoresize :style="{ height: '289px' }"></VCharts>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+import VCharts from 'vue-echarts'
+import { graphic } from 'echarts'
+import { useChart } from '@/hooks'
+// import { ToolTipFormatterParams } from '@/types/echarts';
+
+const xData = ref<string[]>([])
+const yData = ref<number[]>([])
+
+function graphicFactory(side: AnyObject) {
+  return {
+    type: 'text',
+    bottom: '8',
+    ...side,
+    style: {
+      text: '',
+      textAlign: 'center',
+      fill: '#4E5969',
+      fontSize: 12
+    }
+  }
+}
+const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])
+const { option } = useChart(() => {
+  return {
+    grid: {
+      left: '40',
+      right: '0',
+      top: '10',
+      bottom: '30'
+    },
+    xAxis: {
+      type: 'category',
+      offset: 2,
+      data: xData.value,
+      boundaryGap: false,
+      axisLabel: {
+        color: '#4E5969',
+        formatter(value: number, idx: number) {
+          if (idx === 0) return ''
+          if (idx === xData.value.length - 1) return ''
+          return `${value}`
+        }
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        interval: (idx: number) => {
+          if (idx === 0) return false
+          if (idx === xData.value.length - 1) return false
+          return true
+        },
+        lineStyle: {
+          color: '#E5E8EF'
+        }
+      },
+      axisPointer: {
+        show: true,
+        lineStyle: {
+          color: '#23ADFF',
+          width: 2
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        formatter(value: any, idx: number) {
+          if (idx === 0) return value
+          return `${value}k`
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#E5E8EF'
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter(params) {
+        const [firstElement] = params as any[]
+        return `<div>
+            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
+            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${(
+              Number(firstElement.value) * 10000
+            ).toLocaleString()}</span></div>
+          </div>`
+      },
+      className: 'echarts-tooltip-diy'
+    },
+    graphic: {
+      elements: graphicElements.value
+    },
+    series: [
+      {
+        name: '浏览量(PV)',
+        data: yData.value,
+        type: 'line',
+        smooth: true,
+        // symbol: 'circle',
+        symbolSize: 12,
+        emphasis: {
+          focus: 'series',
+          itemStyle: {
+            borderWidth: 2
+          }
+        },
+        lineStyle: {
+          width: 3,
+          color: new graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: 'rgba(30, 231, 255, 1)'
+            },
+            {
+              offset: 0.5,
+              color: 'rgba(36, 154, 255, 1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(111, 66, 251, 1)'
+            }
+          ])
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(17, 126, 255, 0.16)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(17, 128, 255, 0)'
+            }
+          ])
+        }
+      },
+      {
+        name: 'IP数',
+        data: yData.value,
+        type: 'line',
+        smooth: true,
+        color: '#00B2FF',
+        symbolSize: 12,
+        emphasis: {
+          focus: 'series',
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: '#E2F2FF'
+          }
+        }
+      }
+    ]
+  }
+})
+
+const getChartData = () => {
+  try {
+    const values = [100, 200, 150, 30, 100, 50, 10, 80]
+    const year = new Date().getFullYear()
+    const data = values.map((i, n) => {
+      const m = n + 1
+      const month = m >= 10 ? m : `0${m}`
+      return { y: i, x: `${year}-${month}` }
+    })
+    data.forEach((item: any, index: number) => {
+      xData.value.push(item.x)
+      yData.value.push(item.y)
+      if (index === 0) {
+        graphicElements.value[0].style.text = item.x
+      }
+      if (index === data.length - 1) {
+        graphicElements.value[1].style.text = item.x
+      }
+    })
+  } catch (err) {
+    // you can report use errorHandler or other
+  }
+}
+getChartData()
+</script>

src/views/home/components/FastCard.vue

@@ -0,0 +1,75 @@
+<template>
+  <a-card title="快捷操作" :bordered="false" size="medium" class="card gi_card_title">
+    <a-card-grid v-for="(item, index) in list" :key="item.name" class="card-grid-item" :style="{ width: '33.33%' }">
+      <a-card :bordered="false" hoverable>
+        <a-row justify="center" align="center" :class="'animated-fade-up-' + (index + 1)">
+          <a-space direction="vertical" align="center" class="wrapper">
+            <component :is="item.icon" :size="30" class="icon"></component>
+            <a-typography-text class="text">{{ item.name }}</a-typography-text>
+          </a-space>
+        </a-row>
+      </a-card>
+    </a-card-grid>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+const list = [
+  { name: '用户管理', icon: 'icon-user' },
+  { name: '部门管理', icon: 'icon-mind-mapping' },
+  { name: '角色管理', icon: 'icon-user-group' },
+  { name: '通知公告', icon: 'icon-notification' },
+  { name: '系统配置', icon: 'icon-desktop' },
+  { name: '系统日志', icon: 'icon-history' }
+]
+</script>
+
+<style lang="scss" scoped>
+.card {
+  overflow: hidden;
+  :deep(.arco-card-header) {
+    border: none;
+  }
+  .card-grid-item {
+    cursor: pointer;
+  }
+
+  :deep(.text) {
+    font-size: 12px;
+    text-align: center;
+    color: rgb(var(--gray-8));
+  }
+
+  :deep(.wrapper) {
+    margin-bottom: 8px;
+    text-align: center;
+    cursor: pointer;
+
+    &:last-child {
+      .text {
+        margin-bottom: 0;
+      }
+    }
+    &:hover {
+      .icon {
+        color: rgb(var(--arcoblue-6));
+      }
+      .text {
+        color: rgb(var(--arcoblue-6));
+      }
+    }
+  }
+
+  :deep(.icon) {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-bottom: 4px;
+    color: rgb(var(--gray-8));
+    line-height: 32px;
+    font-size: 16px;
+    text-align: center;
+    border-radius: 4px;
+  }
+}
+</style>

src/views/home/components/MessageCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-card title="公告" :bordered="false" size="medium" class="gi_card_title">
+    <template #extra>
+      <a-link>更多</a-link>
+    </template>
+    <a-comment
+      v-for="(item, index) in list"
+      :key="index"
+      align="right"
+      :class="'animated-fade-up-' + index"
+      style="overflow: hidden"
+    >
+      <template #content>
+        <div class="content">
+          <a-tag v-if="item.type === 1" color="blue" size="small">通知</a-tag>
+          <a-tag v-if="item.type === 2" color="orangered" size="small">活动</a-tag>
+          <a-tag v-if="item.type === 3" color="cyan" size="small">消息</a-tag>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </a-comment>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+const list = [
+  { type: 1, content: 'v2.4.0 版本发布公告🎉' },
+  { type: 1, content: 'v2.3.0 版本发布公告🎉' },
+  { type: 1, content: 'v2.2.0 版本发布公告🎉' },
+  { type: 2, content: '作者喊你来贡献代码了~' },
+  { type: 2, content: '作者喊你来提需求了~' }
+]
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
+  margin-top: 10px;
+}
+:deep(.arco-comment-content) {
+  font-size: 14px;
+  color: var(--color-text-1);
+}
+:deep(.arco-comment-datetime) {
+  color: var(--color-text-4);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  > p {
+    margin-left: 6px;
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="now-time" v-if="time">
+    <p class="now-time__time gi_line_1">{{ time }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Dayjs from 'dayjs'
+
+defineOptions({ name: 'NowTime' })
+const time = ref('')
+
+// 获取现在时间
+const getFormatNowTime = () => {
+  const weekList = ['日', '一', '二', '三', '四', '五', '六']
+  return `${Dayjs(new Date()).format('YYYY年MM月DD日 HH:mm:ss')} 星期${weekList[Dayjs(new Date()).day()]}`
+}
+
+// 初始化时间
+const initTime = () => {
+  time.value = getFormatNowTime()
+  setInterval(() => {
+    time.value = getFormatNowTime()
+  }, 1000)
+}
+
+initTime()
+</script>
+
+<style lang="scss" scoped>
+@import url('@/assets/fonts/font.css');
+.now-time {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-family: DINPro-Medium;
+  color: var(--color-text-1);
+  &__time {
+    margin-left: 6px;
+  }
+}
+</style>

src/views/home/components/ProjectCard.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-card title="项目" :bordered="false" size="medium" class="gi_card_title" style="overflow: hidden">
+    <a-row align="stretch">
+      <a-col :xs="12" :sm="8" :md="8" v-for="(item, index) in list" :key="item.name">
+        <a-card-grid class="w-full h-full">
+          <a-card :bordered="false" hoverable :class="'animated-fade-up-' + index">
+            <a :href="item.url" target="_blank">
+              <section class="item">
+                <div class="item__header">
+                  <img :src="item.logo" width="30px" alt="logo" />
+                  <span class="item__name gi_line_1">{{ item.name }}</span>
+                </div>
+                <div class="item__middle">
+                  <p class="item__desc gi_line_2">{{ item.desc }}</p>
+                </div>
+              </section>
+            </a>
+          </a-card>
+        </a-card-grid>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+const list = [
+  {
+    name: 'ContiNew Admin',
+    desc: '持续优化的前后端分离中后台管理框架，开箱即用，持续提供舒适的开发体验。',
+    logo: 'https://doc.charles7c.top/logo.svg',
+    url: 'https://gitee.com/continew/continew-admin'
+  },
+  {
+    name: 'ContiNew Starter',
+    desc: '包含了一系列经过企业实践优化的依赖包（如 MyBatis-Plus、SaToken）。',
+    logo: 'https://doc.charles7c.top/logo.svg',
+    url: 'https://gitee.com/continew/continew-starter'
+  },
+  {
+    name: 'ContiNew Admin UI - GI',
+    desc: '基于 Gi Demo 前端模板开发的 ContiNew Admin 前端适配项目。',
+    logo: 'https://doc.charles7c.top/logo.svg',
+    url: 'https://gitee.com/continew/continew-admin-ui-gi'
+  },
+  {
+    name: 'ContiNew Admin UI',
+    desc: '基于 Arco Design Pro 前端模板开发的 ContiNew Admin 前端适配项目。',
+    logo: 'https://doc.charles7c.top/logo.svg',
+    url: 'https://gitee.com/continew/continew-admin-ui'
+  },
+  {
+    name: 'ContiNew Cloud（孵化中）',
+    desc: 'ContiNew Admin 微服务版本',
+    logo: 'https://doc.charles7c.top/logo.svg',
+    url: '#'
+  },
+  {
+    name: 'charles7c.github.io',
+    desc: '基于 VitePress 构建的个人知识库/博客，扩展 VitePress 默认主题。',
+    logo: 'https://blog.charles7c.top/logo.png',
+    url: 'https://github.com/Charles7c/charles7c.github.io'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-card) {
+  height: 100%;
+  .arco-card-body {
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+
+:deep(.arco-card-header) {
+  border: none;
+}
+
+.item {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    display: flex;
+    align-items: center;
+  }
+  &__name {
+    margin-left: 10px;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    color: var(--color-text-1);
+    &:hover {
+      color: rgb(var(--arcoblue-6));
+    }
+  }
+  &__middle {
+    flex: 1;
+  }
+  &__desc {
+    flex: 1;
+    margin-top: 10px;
+    line-height: 1.5;
+    color: var(--color-text-2);
+  }
+  &__footer {
+    font-size: 12px;
+    color: var(--color-text-3);
+    margin-top: 8px;
+  }
+}
+</style>

src/views/home/components/Sponsor.vue

@@ -0,0 +1,37 @@
+<template>
+  <a-card title="特别赞助" :bordered="false" size="medium" class="card gi_card_title">
+    <template #extra>
+      <a-link href="https://doc.charles7c.top/other/sponsor.html" target="_blank" rel="noopener">>></a-link>
+    </template>
+    <a-row :gutter="8">
+      <a-carousel
+        indicator-type="slider"
+        show-arrow="always"
+        auto-play
+        style="width: 100%; height: 110px; border-radius: 4px; overflow: hidden"
+      >
+        <a-carousel-item v-for="(image, idx) in imageList" :key="idx">
+          <a :href="image.link" target="_blank" :title="image.title">
+            <img :src="image.src" style="width: 100%" :alt="image.title" />
+          </a>
+        </a-carousel-item>
+      </a-carousel>
+    </a-row>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+interface ImageType {
+  src: string;
+  title: string;
+  link: string;
+}
+
+const imageList: ImageType[] = [
+  {
+    src: `https://doc.charles7c.top/img/sponsor/ad/roovps.jpg?${new Date().getTime()}`,
+    title: 'ROOVPS',
+    link: 'https://roovps.com/cart',
+  },
+];
+</script>

src/views/home/components/WorkCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-card title="工作台" :bordered="false" size="medium" class="card">
+    <template #extra>
+      <NowTime />
+    </template>
+    <a-row align="center" wrap :gutter="[{ xs: 0, sm: 14, md: 14, lg: 14, xl: 14, xxl: 14 }, 16]" class="content">
+      <a-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16" :xxl="18">
+        <a-space size="medium">
+          <a-avatar :size="68">
+            <img :src="userStore.avatar" alt="avatar" />
+          </a-avatar>
+          <div class="welcome">
+            <p class="hello">{{ goodTimeText() }}！{{ userStore.name }}</p>
+            <p>北海虽赊，扶摇可接；东隅已逝，桑榆非晚。</p>
+          </div>
+        </a-space>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+import NowTime from './NowTime/index.vue'
+import { useUserStore } from '@/stores'
+import { goodTimeText } from '@/utils'
+
+const userStore = useUserStore()
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-statistic-title) {
+  margin-bottom: 0;
+}
+
+.card {
+  margin-top: $margin;
+  .content {
+    padding: 8px 20px;
+    .welcome {
+      margin: 8px 0;
+      color: $color-text-3;
+      .hello {
+        font-size: 1.25rem;
+        color: $color-text-1;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="gi_page home" id="home">
+    <WorkCard />
+
+    <a-row class="home__content">
+      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="18" :xxl="20">
+        <div class="home__item"><ProjectCard /></div>
+        <div class="home__item"><AccessTrend /></div>
+      </a-col>
+      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="4">
+        <div class="home__item"><FastCard /></div>
+        <div class="home__item"><Sponsor /></div>
+        <div class="home__item"><MessageCard /></div>
+      </a-col>
+    </a-row>
+
+    <a-back-top :visible-height="100" target-container="#home">
+      <GiSvgIcon name="backtop" :size="50" class="backtop-icon" />
+    </a-back-top>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WorkCard from './components/WorkCard.vue'
+import ProjectCard from './components/ProjectCard.vue'
+import AccessTrend from './components/AccessTrend.vue'
+import FastCard from './components/FastCard.vue'
+import MessageCard from './components/MessageCard.vue'
+import Sponsor from './components/Sponsor.vue'
+
+defineOptions({ name: 'Home' })
+</script>
+
+<style lang="scss" scoped>
+.home {
+  padding: 0;
+  &__content {
+    padding: 6px;
+  }
+  &__item {
+    padding: 6px;
+    box-sizing: border-box;
+  }
+  .backtop-icon {
+    cursor: pointer;
+  }
+}
+</style>