luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除多余代码

Browse Source
This commit is contained in:
sexygoat
2026-04-08 19:31:22 +08:00
parent b510b4539f
commit d1c6588d8f
110 changed files with 897 additions and 24613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/views/template/banners/index.vue
View File

@@ -1,142 +0,0 @@
<template>
<div class="banners">
<h1 class="page-title">基础横幅</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="12">
<ArtBasicBanner
title="欢迎回来，管理员！"
subtitle="今日系统访问量增长了23%，运行状态良好。"
buttonText="查看详情"
buttonColor="rgb(var(--art-secondary))"
buttonTextColor="#fff"
@click="handleBannerClick"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12">
<ArtBasicBanner
title="欢迎使用本系统!"
subtitle="这是一个基于Vue3和Element Plus的后台管理系统模板。"
buttonText="开始使用"
buttonColor="rgb(var(--art-success))"
buttonTextColor="#fff"
backgroundColor="#D4F1F7"
titleColor="#333"
subtitleColor="#666"
@click="handleBannerClick"
/>
</ElCol>
</ElRow>
<h1 class="page-title">基础横幅（图片）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="12">
<ArtBasicBanner
title="欢迎回来，管理员！"
subtitle="今日系统访问量增长了23%，运行状态良好。"
buttonText="查看详情"
buttonColor="#FF3E76"
backgroundColor="#FF80A4"
buttonTextColor="#fff"
:backgroundImage="icon3"
@click="handleBannerClick"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12">
<ArtBasicBanner
title="欢迎使用本系统!"
subtitle="这是一个基于Vue3和Element Plus的后台管理系统模板。"
buttonText="开始使用"
buttonColor="#1385FF"
buttonTextColor="#fff"
backgroundColor="#88A7FF"
:backgroundImage="icon5"
@click="handleBannerClick"
/>
</ElCol>
</ElRow>
<h1 class="page-title">卡片横幅</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="12" :lg="6">
<ArtCardBanner
title="系统状态良好"
description="所有服务运行正常，无异常情况。"
buttonText="查看详情"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="6">
<ArtCardBanner
:icon="icon2"
title="新消息提醒"
description="您有3条未读消息需要处理。"
buttonText="立即查看"
buttonColor="rgb(var(--art-warning))"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="6">
<ArtCardBanner
:icon="icon3"
title="数据分析报告"
description="本周数据分析报告已生成完毕。"
buttonText="下载报告"
buttonColor="rgb(var(--art-error))"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="12" :lg="6">
<ArtCardBanner
:icon="icon4"
title="系统更新提示"
description="新版本V2.1.0已发布，建议及时更新。"
buttonText="更新"
buttonColor="rgb(var(--art-primary))"
:showCancel="true"
cancelButtonText="取消"
cancelButtonColor="#eee"
cancelButtonTextColor="#333"
@click="handleConfirm"
@cancel="handleCancel"
/>
</ElCol>
</ElRow>
</div>
</template>
<script setup lang="ts">
import icon2 from '@imgs/3d/icon2.webp'
import icon3 from '@imgs/3d/icon3.webp'
import icon4 from '@imgs/3d/icon4.webp'
import icon5 from '@imgs/3d/icon7.webp'
import { ElRow } from 'element-plus'
const handleBannerClick = () => {
console.log('banner clicked')
}
const handleConfirm = () => {
console.log('confirm clicked')
}
const handleCancel = () => {
console.log('cancel clicked')
}
</script>
<style lang="scss" scoped>
.banners {
padding-top: 20px;
.page-title {
margin: 20px 0 15px;
font-size: 22px;
font-weight: 500;
&:first-child {
margin-top: 0;
}
}
.el-col {
margin-bottom: 20px;
}
}
</style>

442
src/views/template/cards/index.vue
View File

@@ -1,442 +0,0 @@
<template>
<div class="cards">
<h1 class="page-title">统计卡片（文字）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.id">
<ArtStatsCard
:icon="card.icon"
:title="card.title"
:description="card.description"
:iconSize="card.iconSize"
iconColor="#fff"
:iconBgColor="card.iconBgColor"
:showArrow="card.showArrow"
/>
</ElCol>
</ElRow>
<h1 class="page-title">统计卡片（数字滚动）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.id">
<ArtStatsCard
:icon="card.icon"
:count="card.count"
:description="card.description"
:iconSize="card.iconSize"
iconColor="#fff"
:iconBgColor="card.iconBgColor"
:showArrow="card.showArrow"
/>
</ElCol>
</ElRow>
<h1 class="page-title">统计卡片（自定义样式）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.id">
<ArtStatsCard
:icon="card.icon"
:title="card.title"
:description="card.description"
:iconColor="card.iconColor"
:textColor="card.textColor"
:backgroundColor="card.backgroundColor"
:showArrow="card.showArrow"
/>
</ElCol>
</ElRow>
<h1 class="page-title">进度卡片</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in progressCards" :key="card.id">
<ArtProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
</ElCol>
</ElRow>
<h1 class="page-title">进度卡片（icon）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in progressCards" :key="card.id">
<ArtProgressCard
:percentage="card.percentage"
:title="card.title"
:color="card.color"
:icon="card.icon"
:iconColor="card.iconColor"
:iconBgColor="card.iconBgColor"
:iconSize="card.iconSize"
/>
</ElCol>
</ElRow>
<h1 class="page-title">图表卡片（小图表）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6">
<ArtLineChartCard
:isMiniChart="true"
:value="2545"
label="新用户"
date="过去7天"
:percentage="1.2"
:height="9.5"
:chartData="[120, 132, 101, 134, 90, 230, 210]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtBarChartCard
:isMiniChart="true"
:value="15480"
label="浏览量"
date="过去 14 天"
:percentage="-4.15"
:height="9.5"
:chartData="[120, 100, 150, 140, 90, 120, 130]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtLineChartCard
:isMiniChart="true"
:value="2545"
label="粉丝数"
date="过去 30 天"
:percentage="1.2"
:height="9.5"
:showAreaColor="true"
:chartData="[150, 180, 160, 200, 180, 220, 240]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtDonutChartCard
:value="36358"
title="粉丝量"
:percentage="18"
:data="[50, 40]"
:height="9.5"
currentYear="2022"
previousYear="2021"
:radius="['50%', '70%']"
/>
</ElCol>
</ElRow>
<h1 class="page-title">图表卡片（大图表）</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6">
<ArtLineChartCard
:value="2545"
label="新用户"
:percentage="1.2"
:height="11"
:chartData="[120, 132, 101, 134, 90, 230, 210]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtBarChartCard
:value="15480"
label="浏览量"
:percentage="-4.15"
:height="11"
:chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtLineChartCard
:value="2545"
label="粉丝数"
:percentage="1.2"
:height="11"
:showAreaColor="true"
:chartData="[150, 180, 160, 200, 180, 220, 240]"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :md="6">
<ArtDonutChartCard
:value="36358"
title="粉丝量"
:percentage="18"
:data="[70, 30]"
:height="11"
currentYear="2022"
previousYear="2021"
/>
</ElCol>
</ElRow>
<h1 class="page-title">数据列表卡片</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :lg="8">
<ArtDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
</ElCol>
<ElCol :xs="24" :sm="12" :lg="8">
<ArtDataListCard
:maxCount="4"
:list="dataList"
title="最近活动"
subtitle="近期活动列表"
:showMoreButton="true"
@more="handleMore"
/>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="8">
<ArtTimelineListCard :list="timelineData" title="最近交易" subtitle="2024年12月20日" />
</ElCol>
</ElRow>
<h1 class="page-title">图片卡片</h1>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="6" v-for="card in imageCards" :key="card.id">
<ArtImageCard
:imageUrl="card.imageUrl"
:title="card.title"
:category="card.category"
:readTime="card.readTime"
:views="card.views"
:comments="card.comments"
:date="card.date"
/>
</ElCol>
</ElRow>
</div>
</template>
<script setup lang="ts">
import cover1 from '@imgs/cover/img1.webp'
import cover2 from '@imgs/cover/img2.webp'
import cover3 from '@imgs/cover/img3.webp'
import cover4 from '@imgs/cover/img4.webp'
const statsCards = [
{
id: 1,
title: '销售产品',
count: 1235,
description: '鞋子、牛仔裤、派对服装、手表',
icon: '&#xe812;',
iconColor: 'rgb(var(--art-primary))',
iconSize: 20,
iconBgColor: 'rgb(var(--art-info))',
textColor: 'rgb(var(--art-primary))',
backgroundColor: 'rgb(var(--art-bg-primary))',
showArrow: false
},
{
id: 2,
title: '活跃用户',
count: 5000,
description: '日活跃用户超过5,000+',
icon: '&#xe724;',
iconColor: 'rgb(var(--art-warning))',
iconSize: 20,
iconBgColor: 'rgb(var(--art-success))',
textColor: 'rgb(var(--art-warning))',
backgroundColor: 'rgb(var(--art-bg-warning))',
showArrow: false
},
{
id: 3,
title: '总收入',
count: 35000,
description: '月收入超过¥350,000+',
icon: '&#xe70e;',
iconColor: 'rgb(var(--art-secondary))',
iconSize: 20,
iconBgColor: 'rgb(var(--art-secondary))',
textColor: 'rgb(var(--art-secondary))',
backgroundColor: 'rgb(var(--art-bg-secondary))',
showArrow: false
},
{
id: 4,
title: '客户评价',
count: 4800,
description: '平均评分4.8/5',
icon: '&#xe82d;',
iconColor: 'rgb(var(--art-error))',
iconSize: 20,
iconBgColor: 'rgb(var(--art-error))',
textColor: 'rgb(var(--art-error))',
backgroundColor: 'rgb(var(--art-bg-error))',
showArrow: false
}
]
const progressCards = [
{
id: 1,
title: '完成进度',
percentage: 75,
color: 'rgb(var(--art-success))',
icon: '&#xe812;',
iconColor: 'rgb(var(--art-success))',
iconBgColor: 'rgb(var(--art-bg-success))',
iconSize: 20
},
{
id: 2,
title: '项目进度',
percentage: 65,
color: 'rgb(var(--art-primary))',
icon: '&#xe724;',
iconColor: 'rgb(var(--art-primary))',
iconBgColor: 'rgb(var(--art-bg-primary))',
iconSize: 20
},
{
id: 3,
title: '学习进度',
percentage: 45,
color: 'rgb(var(--art-error))',
icon: '&#xe724;',
iconColor: 'rgb(var(--art-error))',
iconBgColor: 'rgb(var(--art-bg-error))',
iconSize: 20
},
{
id: 4,
title: '任务进度',
percentage: 90,
color: 'rgb(var(--art-secondary))',
icon: '&#xe724;',
iconColor: 'rgb(var(--art-secondary))',
iconBgColor: 'rgb(var(--art-bg-secondary))',
iconSize: 20
}
]
const imageCards = [
{
id: 1,
imageUrl: cover1,
title: 'AI技术在医疗领域的创新应用与发展前景',
category: '社交',
readTime: '2分钟',
views: 9125,
comments: 3,
date: '12月19日 周一'
},
{
id: 2,
imageUrl: cover2,
title: '大数据分析助力企业决策的实践案例',
category: '技术',
readTime: '3分钟',
views: 7234,
comments: 5,
date: '12月20日 周二'
},
{
id: 3,
imageUrl: cover3,
title: '区块链技术在供应链管理中的应用',
category: '科技',
readTime: '4分钟',
views: 5678,
comments: 8,
date: '12月21日 周三'
},
{
id: 4,
imageUrl: cover4,
title: '云计算技术发展趋势与未来展望',
category: '云技术',
readTime: '5分钟',
views: 4321,
comments: 6,
date: '12月22日 周四'
}
]
const dataList = [
{
title: '新加坡之行',
status: '进行中',
time: '5分钟',
class: 'bg-primary',
icon: '&#xe6f2;'
},
{
title: '归档数据',
status: '进行中',
time: '10分钟',
class: 'bg-secondary',
icon: '&#xe806;'
},
{
title: '客户会议',
status: '待处理',
time: '15分钟',
class: 'bg-warning',
icon: '&#xe6fb;'
},
{
title: '筛选任务团队',
status: '进行中',
time: '20分钟',
class: 'bg-danger',
icon: '&#xe813;'
},
{
title: '发送信封给小王',
status: '已完成',
time: '20分钟',
class: 'bg-success',
icon: '&#xe70c;'
}
]
const timelineData = [
{
time: '上午 09:30',
status: 'rgb(73, 190, 255)',
content: '收到 John Doe 支付的 385.90 美元'
},
{
time: '上午 10:00',
status: 'rgb(54, 158, 255)',
content: '新销售记录',
code: 'ML-3467'
},
{
time: '上午 12:00',
status: 'rgb(103, 232, 207)',
content: '向 Michael 支付了 64.95 美元'
},
{
time: '下午 14:30',
status: 'rgb(255, 193, 7)',
content: '系统维护通知',
code: 'MT-2023'
},
{
time: '下午 15:45',
status: 'rgb(255, 105, 105)',
content: '紧急订单取消提醒',
code: 'OR-9876'
},
{
time: '下午 17:00',
status: 'rgb(103, 232, 207)',
content: '完成每日销售报表'
}
]
const handleMore = () => {}
</script>
<style lang="scss" scoped>
.cards {
padding: 20px 0;
.page-title {
margin: 20px 0 15px;
font-size: 22px;
font-weight: 500;
&:first-child {
margin-top: 0;
}
}
.el-col {
margin-bottom: 20px;
}
}
</style>

278
src/views/template/pricing/index.vue
View File

@@ -1,278 +0,0 @@
<template>
<div class="pricing-container">
<div class="pricing-header">
<h1 class="title">超过 53,476 位信赖的开发者</h1>
<h2 class="subtitle">以及众多科技巨头的选择</h2>
</div>
<div class="pricing-cards">
<ElRow :gutter="20" justify="center">
<ElCol v-for="plan in pricingPlans" :key="plan.type" :xs="24" :sm="12" :md="6">
<ElCard class="pricing-card" :class="{ popular: plan.isPopular }" shadow="never">
<div class="card-header">
<h3>{{ plan.title }}</h3>
<p class="description">{{ plan.description }}</p>
<div class="price">
<span class="amount">¥{{ plan.price }}</span>
<span class="period">/一次性付款</span>
</div>
</div>
<div class="features">
<div v-for="(feature, index) in plan.features" :key="index" class="feature-item">
<ElIcon :class="feature.available ? 'available' : 'unavailable'">
<Check v-if="feature.available" />
<Close v-else />
</ElIcon>
<span>{{ feature.text }}</span>
</div>
</div>
<div class="card-footer">
<ElButton type="primary" class="purchase-btn" v-ripple>立即购买</ElButton>
</div>
</ElCard>
</ElCol>
</ElRow>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
interface Feature {
text: string
available: boolean
}
interface PricingPlan {
type: string
title: string
description: string
price: number
isPopular: boolean
features: Feature[]
}
const pricingPlans = ref<PricingPlan[]>([
{
type: 'single',
title: '单次使用版',
description: '适用于单个最终产品，最终用户无需付费。',
price: 349,
isPopular: false,
features: [
{ text: '完整源代码', available: true },
{ text: '技术文档', available: true },
{ text: 'SaaS应用授权', available: false },
{ text: '单个项目使用', available: true },
{ text: '一年技术支持', available: true },
{ text: '一年免费更新', available: true }
]
},
{
type: 'multiple',
title: '多次使用版',
description: '适用于无限个最终产品，最终用户无需付费。',
price: 629,
isPopular: false,
features: [
{ text: '完整源代码', available: true },
{ text: '技术文档', available: true },
{ text: 'SaaS应用授权', available: false },
{ text: '无限项目使用', available: true },
{ text: '一年技术支持', available: true },
{ text: '一年免费更新', available: true }
]
},
{
type: 'extended',
title: '扩展授权版',
description: '适用于单个最终产品，最终用户需要付费。',
price: 2099,
isPopular: false,
features: [
{ text: '完整源代码', available: true },
{ text: '技术文档', available: true },
{ text: 'SaaS应用授权', available: true },
{ text: '单个项目使用', available: true },
{ text: '一年技术支持', available: true },
{ text: '一年免费更新', available: true }
]
},
{
type: 'unlimited',
title: '无限授权版',
description: '适用于无限个最终产品，最终用户需要付费。',
price: 3499,
isPopular: false,
features: [
{ text: '完整源代码', available: true },
{ text: '技术文档', available: true },
{ text: 'SaaS应用授权', available: true },
{ text: '无限项目使用', available: true },
{ text: '一年技术支持', available: true },
{ text: '一年免费更新', available: true }
]
}
])
</script>
<style lang="scss" scoped>
.pricing-container {
padding: 5rem 1rem !important;
background-color: transparent !important;
border: none !important;
.pricing-header {
margin-bottom: 40px;
text-align: center;
.title {
margin-bottom: 0.5rem;
font-size: 2.5rem;
font-weight: 500;
}
.subtitle {
font-size: 1.4rem;
font-weight: 400;
color: #666;
}
}
.pricing-cards {
margin-top: 80px;
.el-col {
margin-bottom: 20px;
}
.pricing-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 10px;
&.popular {
position: relative;
border: 2px solid var(--el-color-primary);
&::after {
position: absolute;
top: 10px;
right: 10px;
padding: 2px 8px;
font-size: 12px;
color: var(--el-color-primary);
content: '热门';
background-color: var(--el-color-primary-light-9);
border-radius: 12px;
}
}
.card-header {
margin-bottom: 20px;
h3 {
margin-bottom: 10px;
font-size: 1.3rem;
color: var(--art-text-gray-900) !important;
}
.description {
display: -webkit-box;
height: 40px;
padding-bottom: 20px;
margin-bottom: 20px;
overflow: hidden;
font-size: 14px;
color: var(--art-text-gray-600);
text-overflow: ellipsis;
border-bottom: 1px solid var(--art-border-color);
-webkit-box-orient: vertical;
}
.price {
margin-top: 30px;
.amount {
font-size: 1.8rem;
font-weight: 600;
}
.period {
margin-left: 10px;
font-size: 14px;
color: var(--art-text-gray-600);
}
}
}
.features {
flex-grow: 1;
margin-bottom: 20px;
.feature-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
.el-icon {
margin-right: 10px;
&.available {
color: var(--el-color-primary);
}
&.unavailable {
color: var(--el-color-danger);
}
}
}
}
.card-footer {
margin-top: auto;
text-align: center;
.purchase-btn {
width: 100%;
height: 40px;
}
}
}
}
}
@media only screen and (max-width: $device-notebook) {
.pricing-container {
padding: 2rem 0 !important;
.pricing-cards {
margin-top: 0;
}
}
}
@media only screen and (max-width: $device-phone) {
.pricing-container {
.pricing-header {
.title {
font-size: 2rem;
}
.subtitle {
font-size: 1.5rem;
}
}
.el-col {
margin-bottom: 20px;
}
}
}
</style>