twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-15 14:03:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: standard code format

Browse Source
This commit is contained in:
xiaoxian521
2022-05-14 09:59:02 +08:00
parent 2214ce7911
commit 1cf82eb7a4
29 changed files with 85 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ReBarcode/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reBarcode from "./src/index.vue";
/** 条形码组件 */
export const ReBarcode = Object.assign(reBarcode, {
install(app: App) {
app.component(reBarcode.name, reBarcode);

10
src/components/ReCard/index.ts
View File

@@ -1,10 +0,0 @@
import { App } from "vue";
import reCard from "./src/index.vue";
export const ReCard = Object.assign(reCard, {
install(app: App) {
app.component(reCard.name, reCard);
}
});
export default ReCard;

177
src/components/ReCard/src/index.vue
View File

@@ -1,177 +0,0 @@
<script lang="ts">
export default {
name: "ReCard"
};
</script>
<script setup lang="ts">
import { computed, PropType } from "vue";
import shopIcon from "/@/assets/svg/shop.svg?component";
import laptopIcon from "/@/assets/svg/laptop.svg?component";
import serviceIcon from "/@/assets/svg/service.svg?component";
import calendarIcon from "/@/assets/svg/calendar.svg?component";
import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
export interface CardProductType {
type: number;
isSetup: boolean;
description: string;
name: string;
}
const props = defineProps({
product: {
type: Object as PropType<CardProductType>
}
});
const emit = defineEmits(["manage-product", "delete-item"]);
const handleClickManage = (product: CardProductType) => {
emit("manage-product", product);
};
const handleClickDelete = (product: CardProductType) => {
emit("delete-item", product);
};
const cardClass = computed(() => [
"list-card-item",
{ "list-card-item__disabled": !props.product.isSetup }
]);
const cardLogoClass = computed(() => [
"list-card-item_detail--logo",
{ "list-card-item_detail--logo__disabled": !props.product.isSetup }
]);
</script>
<template>
<div :class="cardClass">
<div class="list-card-item_detail">
<el-row justify="space-between">
<div :class="cardLogoClass">
<shopIcon v-if="product.type === 1" />
<calendarIcon v-if="product.type === 2" />
<serviceIcon v-if="product.type === 3" />
<userAvatarIcon v-if="product.type === 4" />
<laptopIcon v-if="product.type === 5" />
</div>
<div class="list-card-item_detail--operation">
<el-tag
:color="product.isSetup ? '#00a870' : '#eee'"
effect="dark"
class="mx-1 list-card-item_detail--operation--tag"
>
{{ product.isSetup ? "已启用" : "已停用" }}
</el-tag>
<el-dropdown
trigger="click"
:disabled="!product.isSetup"
max-height="2"
>
<IconifyIconOffline icon="more-vertical" class="icon-more" />
<template #dropdown>
<el-dropdown-menu :disabled="!product.isSetup">
<el-dropdown-item @click="handleClickManage(product)"
>管理</el-dropdown-item
>
<el-dropdown-item @click="handleClickDelete(product)"
>删除</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-row>
<p class="list-card-item_detail--name">{{ product.name }}</p>
<p class="list-card-item_detail--desc">{{ product.description }}</p>
</div>
</div>
</template>
<style scoped lang="scss">
$text-color-disabled: rgba(0, 0, 0, 0.26);
.list-card-item {
display: flex;
flex-direction: column;
margin-bottom: 12px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
&_detail {
flex: 1;
background: #fff;
padding: 24px 32px;
min-height: 140px;
&--logo {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #e0ebff;
font-size: 32px;
color: #0052d9;
&__disabled {
color: #a1c4ff;
}
}
&--operation {
display: flex;
height: 100%;
&--tag {
border: 0;
}
}
.icon-more {
font-size: 24px;
color: rgba(36, 36, 36, 1);
}
&--name {
margin: 24px 0 8px 0;
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.9);
}
&--desc {
font-size: 12px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
height: 40px;
}
}
&__disabled {
color: $text-color-disabled;
.icon-more {
color: $text-color-disabled;
}
.list-card-item_detail--name {
color: $text-color-disabled;
}
.list-card-item_detail--operation--tag {
color: #bababa;
}
}
}
</style>

36
src/components/ReCharts/index.ts
View File

@@ -1,36 +0,0 @@
import { App } from "vue";
import reBar from "./src/Bar.vue";
import reGithub from "./src/Github.vue";
import reInfinite from "./src/Infinite.vue";
import reLine from "./src/Line.vue";
import rePie from "./src/Pie.vue";
export const ReBar = Object.assign(reBar, {
install(app: App) {
app.component(reBar.name, reBar);
}
});
export const ReGithub = Object.assign(reGithub, {
install(app: App) {
app.component(reGithub.name, reGithub);
}
});
export const ReInfinite = Object.assign(reInfinite, {
install(app: App) {
app.component(reInfinite.name, reInfinite);
}
});
export const ReLine = Object.assign(reLine, {
install(app: App) {
app.component(reLine.name, reLine);
}
});
export const RePie = Object.assign(rePie, {
install(app: App) {
app.component(rePie.name, rePie);
}
});

96
src/components/ReCharts/src/Bar.vue
View File

@@ -1,96 +0,0 @@
<script lang="ts">
export default {
name: "Bar"
};
</script>
<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onBeforeMount, onMounted, nextTick } from "vue";
import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
let echartInstance: ECharts;
const props = defineProps({
index: {
type: Number,
default: 0
}
});
function initechartInstance() {
const echartDom = document.querySelector(".bar" + props.index);
if (!echartDom) return;
// @ts-ignore
echartInstance = echarts.init(echartDom);
echartInstance.clear(); //清除旧画布 重新渲染
echartInstance.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
bottom: "20%",
height: "68%",
containLabel: true
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0
// width: "70",
// overflow: "truncate"
},
data: ["open_issues", "forks", "watchers", "star"]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "GitHub信息",
type: "bar",
data: [3, 204, 1079, 1079]
}
]
});
}
onBeforeMount(() => {
nextTick(() => {
initechartInstance();
});
});
onMounted(() => {
nextTick(() => {
useEventListener("resize", () => {
if (!echartInstance) return;
useTimeoutFn(() => {
echartInstance.resize();
}, 180);
});
});
});
tryOnUnmounted(() => {
if (!echartInstance) return;
echartInstance.dispose();
echartInstance = null;
});
</script>
<template>
<div :class="'bar' + props.index" style="width: 100%; height: 35vh" />
</template>

87
src/components/ReCharts/src/Github.vue
View File

@@ -1,87 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
const lists = ref([
{ type: "", label: "善良" },
{ type: "success", label: "好学" },
{ type: "info", label: "幽默" },
{ type: "danger", label: "旅游" },
{ type: "warning", label: "追剧" }
]);
</script>
<template>
<el-descriptions class="margin-top" direction="vertical" :column="3" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="user" />
</el-icon>
用户名
</template>
xiaoxian
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="iphone" />
</el-icon>
手机号
</template>
123456789
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="location" />
</el-icon>
居住地
</template>
上海
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="2" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="tickets" />
</el-icon>
标签
</template>
<el-tag
v-for="item in lists"
:key="item.label"
:type="item.type"
size="small"
effect="dark"
>
{{ item.label }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="office-building" />
</el-icon>
联系地址
</template>
上海市徐汇区
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="1" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="notebook" />
</el-icon>
留言
</template>
好好学习，天天向上
</el-descriptions-item>
</el-descriptions>
</template>
<style scoped>
.el-tag {
margin-right: 10px !important;
}
</style>

134
src/components/ReCharts/src/Infinite.vue
View File

@@ -1,134 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { templateRef } from "@vueuse/core";
import SeamlessScroll from "/@/components/ReSeamlessScroll";
const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref([
{
date: "2021-09-01",
name: "vue-pure-admin",
star: "1000"
},
{
date: "2021-09-02",
name: "vue-pure-admin",
star: "1100"
},
{
date: "2021-09-03",
name: "vue-pure-admin",
star: "1200"
},
{
date: "2021-09-04",
name: "vue-pure-admin",
star: "1300"
},
{
date: "2021-09-05",
name: "vue-pure-admin",
star: "1400"
},
{
date: "2021-09-06",
name: "vue-pure-admin",
star: "1500"
},
{
date: "2021-09-07",
name: "vue-pure-admin",
star: "1600"
},
{
date: "2021-09-08",
name: "vue-pure-admin",
star: "1700"
},
{
date: "2021-09-09",
name: "vue-pure-admin",
star: "1800"
},
{
date: "2021-09-10",
name: "vue-pure-admin",
star: "1900"
}
]);
let classOption = reactive({
direction: "top"
});
</script>
<template>
<div class="infinite">
<ul class="top">
<li>更新日期</li>
<li>项目名称</li>
<li>Star数量</li>
</ul>
<SeamlessScroll
ref="scroll"
:data="listData"
:class-option="classOption"
class="warp"
>
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span v-text="item.date" />
<span v-text="item.name" />
<span v-text="item.star" />
</li>
</ul>
</SeamlessScroll>
</div>
</template>
<style lang="scss" scoped>
.infinite {
.top {
width: 95%;
height: 40px;
line-height: 40px;
display: flex;
margin: 0 auto;
font-size: 14px;
color: #909399;
font-weight: 400;
background: #fafafa;
li {
width: 34%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.warp {
width: 95%;
height: 215px;
margin: 0 auto;
overflow: hidden;
li {
height: 30px;
line-height: 30px;
display: flex;
font-size: 15px;
}
span {
width: 34%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

84
src/components/ReCharts/src/Line.vue
View File

@@ -1,84 +0,0 @@
<script lang="ts">
export default {
name: "Line"
};
</script>
<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onBeforeMount, onMounted, nextTick } from "vue";
import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
let echartInstance: ECharts;
const props = defineProps({
index: {
type: Number,
default: 0
}
});
function initechartInstance() {
const echartDom = document.querySelector(".line" + props.index);
if (!echartDom) return;
// @ts-ignore
echartInstance = echarts.init(echartDom);
echartInstance.clear(); //清除旧画布 重新渲染
echartInstance.setOption({
grid: {
bottom: "20%",
height: "68%",
containLabel: true
},
tooltip: {
trigger: "item"
},
xAxis: {
type: "category",
axisLabel: {
interval: 0
},
data: ["open_issues", "forks", "watchers", "star"]
},
yAxis: {
type: "value"
},
series: [
{
data: [3, 204, 1079, 1079],
type: "line",
areaStyle: {}
}
]
});
}
onBeforeMount(() => {
nextTick(() => {
initechartInstance();
});
});
onMounted(() => {
nextTick(() => {
useEventListener("resize", () => {
if (!echartInstance) return;
useTimeoutFn(() => {
echartInstance.resize();
}, 180);
});
});
});
tryOnUnmounted(() => {
if (!echartInstance) return;
echartInstance.dispose();
echartInstance = null;
});
</script>
<template>
<div :class="'line' + props.index" style="width: 100%; height: 35vh" />
</template>

87
src/components/ReCharts/src/Pie.vue
View File

@@ -1,87 +0,0 @@
<script lang="ts">
export default {
name: "Pie"
};
</script>
<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onBeforeMount, onMounted, nextTick } from "vue";
import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
let echartInstance: ECharts;
const props = defineProps({
index: {
type: Number,
default: 0
}
});
function initechartInstance() {
const echartDom = document.querySelector(".pie" + props.index);
if (!echartDom) return;
// @ts-ignore
echartInstance = echarts.init(echartDom);
echartInstance.clear(); //清除旧画布 重新渲染
echartInstance.setOption({
tooltip: {
trigger: "item"
},
legend: {
orient: "vertical",
right: true
},
series: [
{
name: "Github信息",
type: "pie",
radius: "60%",
center: ["40%", "50%"],
data: [
{ value: 1079, name: "watchers" },
{ value: 1079, name: "star" },
{ value: 204, name: "forks" },
{ value: 3, name: "open_issues" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
}
onBeforeMount(() => {
nextTick(() => {
initechartInstance();
});
});
onMounted(() => {
nextTick(() => {
useEventListener("resize", () => {
if (!echartInstance) return;
useTimeoutFn(() => {
echartInstance.resize();
}, 180);
});
});
});
tryOnUnmounted(() => {
if (!echartInstance) return;
echartInstance.dispose();
echartInstance = null;
});
</script>
<template>
<div :class="'pie' + props.index" style="width: 100%; height: 35vh" />
</template>

8
src/components/ReCountTo/index.ts
View File

@@ -2,14 +2,18 @@ import { App } from "vue";
import reNormalCountTo from "./src/normal";
import reboundCountTo from "./src/rebound";
export const ReNormalCountTo = Object.assign(reNormalCountTo, {
/** 普通数字动画组件 */
const ReNormalCountTo = Object.assign(reNormalCountTo, {
install(app: App) {
app.component(reNormalCountTo.name, reNormalCountTo);
}
});
export const ReboundCountTo = Object.assign(reboundCountTo, {
/** 回弹式数字动画组件 */
const ReboundCountTo = Object.assign(reboundCountTo, {
install(app: App) {
app.component(reboundCountTo.name, reboundCountTo);
}
});
export { ReNormalCountTo, ReboundCountTo };

1
src/components/ReCropper/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reCropper from "./src";
/** 图片裁剪组件 */
export const ReCropper = Object.assign(reCropper, {
install(app: App) {
app.component(reCropper.name, reCropper);

1
src/components/ReFlop/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reFlop from "./src/index.vue";
/** 时间翻牌组件 */
export const ReFlop = Object.assign(reFlop, {
install(app: App) {
app.component(reFlop.name, reFlop);

2
src/components/ReFlop/src/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, unref, nextTick, onUnmounted } from "vue";
import { templateRef } from "@vueuse/core";
import flippers from "./Filpper";
import flippers from "./filpper";
let timer = ref(null);
let flipObjs = ref([]);

13
src/components/ReFlowChart/index.ts
View File

@@ -3,20 +3,27 @@ import control from "./src/Control.vue";
import nodePanel from "./src/NodePanel.vue";
import dataDialog from "./src/DataDialog.vue";
export const Control = Object.assign(control, {
/** LogicFlow流程图-控制面板 */
const Control = Object.assign(control, {
install(app: App) {
app.component(control.name, control);
}
});
export const NodePanel = Object.assign(nodePanel, {
/** LogicFlow流程图-拖拽面板 */
const NodePanel = Object.assign(nodePanel, {
install(app: App) {
app.component(nodePanel.name, nodePanel);
}
});
export const DataDialog = Object.assign(dataDialog, {
/** LogicFlow流程图-查看数据 */
const DataDialog = Object.assign(dataDialog, {
install(app: App) {
app.component(dataDialog.name, dataDialog);
}
});
export { Control, NodePanel, DataDialog };
// LogicFlow流程图文档：http://logic-flow.org/

21
src/components/ReIcon/index.ts
View File

@@ -1,16 +1,15 @@
import iconifyIconOffline from "./src/iconifyIconOffline";
import iconifyIconOnline from "./src/iconifyIconOnline";
import iconSelect from "./src/Select.vue";
import fontIcon from "./src/iconfont";
import iconSelect from "./src/select.vue";
export const IconifyIconOffline = iconifyIconOffline;
export const IconifyIconOnline = iconifyIconOnline;
export const FontIcon = fontIcon;
export const IconSelect = iconSelect;
/** 离线图标组件 */
const IconifyIconOffline = iconifyIconOffline;
/** 在线图标组件 */
const IconifyIconOnline = iconifyIconOnline;
/** 图标选择器组件 */
const IconSelect = iconSelect;
/** iconfont组件 */
const FontIcon = fontIcon;
export default {
IconifyIconOffline,
IconifyIconOnline,
FontIcon,
IconSelect
};
export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon };

5
src/components/ReImageVerify/index.ts
View File

@@ -1,12 +1,11 @@
import { App } from "vue";
import reImageVerify from "./src/index.vue";
/** 图形验证码组件 */
export const ReImageVerify = Object.assign(reImageVerify, {
install(app: App) {
app.component(reImageVerify.name, reImageVerify);
}
});
export default {
ReImageVerify
};
export default ReImageVerify;

5
src/components/ReMap/index.ts
View File

@@ -1,12 +1,11 @@
import { App } from "vue";
import amap from "./src/Amap.vue";
/** 高德地图组件 */
export const Amap = Object.assign(amap, {
install(app: App) {
app.component(amap.name, amap);
}
});
export default {
Amap
};
export default Amap;

4
src/components/ReMap/src/Amap.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue";
import { mapJson } from "/@/api/mock";
import { deviceDetection } from "/@/utils/deviceDetection";
import AMapLoader from "@amap/amap-jsapi-loader";
import { mapJson } from "/@/api/mock";
import car from "/@/assets/car.png";
export interface MapConfigureInter {

1
src/components/ReQrcode/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reQrcode from "./src/index";
/** 二维码组件 */
export const ReQrcode = Object.assign(reQrcode, {
install(app: App) {
app.component(reQrcode.name, reQrcode);

1
src/components/ReSeamlessScroll/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reSeamlessScroll from "./src/index.vue";
/** 无缝滚动组件 */
export const ReSeamlessScroll = Object.assign(reSeamlessScroll, {
install(app: App) {
app.component(reSeamlessScroll.name, reSeamlessScroll);

1
src/components/ReSelector/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import reSelector from "./src";
/** 选择器组件 */
export const ReSelector = Object.assign(reSelector, {
install(app: App) {
app.component(reSelector.name, reSelector);

1
src/components/ReSplitPane/index.tsx
View File

@@ -8,6 +8,7 @@ export interface ContextProps {
split: string;
}
/** 切割面板组件 */
export default defineComponent({
name: "splitPane",
components: { resizer },

1
src/components/ReTable/index.ts
View File

@@ -1,6 +1,7 @@
import { App } from "vue";
import epTableProBar from "./src/bar";
/** table-crud组件 */
export const EpTableProBar = Object.assign(epTableProBar, {
install(app: App) {
app.component(epTableProBar.name, epTableProBar);

1
src/components/ReTreeLine/index.ts
View File

@@ -9,6 +9,7 @@ import type {
TreeNodeData
} from "element-plus/es/components/tree-v2/src/types";
/** 树形连接线组件 */
export default defineComponent({
name: "el-tree-line",
props: {