twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use setup refactor

Browse Source
This commit is contained in:
xiaoxian521 2021-09-17 10:29:59 +08:00
parent d4302627e8
commit ff329b1e8e
17 changed files with 2844 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="/iconfont.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>后台管理系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.js"></script>
<script src="/sortable.min.js"></script>
<script>
window.process = {};
</script>

1
package.json
View File

@ -41,6 +41,7 @@
"pinia": "^2.0.0-rc.6",
"resize-observer-polyfill": "^1.5.1",
"responsive-storage": "^1.0.9",
"sortablejs": "1.13.0",
"v-contextmenu": "^3.0.0",
"vue": "^3.2.11",
"vue-i18n": "^9.2.0-beta.3",

2607
public/sortable.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

27
src/views/components/button/index.vue
View File

@ -1,24 +1,17 @@
<script setup lang="ts">
import { ref } from "vue";
const url = ref(
process.env.NODE_ENV === "production"
? "/manages/html/button.html"
: "/html/button.html"
);
</script>
<template>
<iframe :src="url" frameborder="0" class="iframe"></iframe>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
name: "reButton",
setup() {
const url = ref(
process.env.NODE_ENV === "production"
? "/manages/html/button.html"
: "/html/button.html"
);
return {
url
};
}
};
</script>
<style scoped>
.iframe {
width: 98%;

23
src/views/components/contextmenu/index.vue
View File

@ -1,3 +1,9 @@
<script setup lang="ts">
import basic from "./basic.vue";
import menuGroup from "./menuGroup.vue";
import menuDynamic from "./menuDynamic.vue";
</script>
<template>
<div style="margin: 10px">
<el-row :gutter="24">
@ -16,20 +22,3 @@
</el-row>
</div>
</template>
<script lang="ts">
import basic from "./basic.vue";
import menuGroup from "./menuGroup.vue";
import menuDynamic from "./menuDynamic.vue";
export default {
name: "reContextmenu",
components: {
basic,
menuGroup,
menuDynamic
},
setup() {
return {};
}
};
</script>

19
src/views/components/count-to/index.vue
View File

@ -1,3 +1,7 @@
<script setup lang="ts">
import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
</script>
<template>
<div style="margin: 10px">
<el-row :gutter="24">
@ -30,21 +34,6 @@
</div>
</template>
<script lang="ts">
import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
export default {
name: "reCountTo",
components: {
ReNormalCountTo,
ReboundCountTo
},
setup() {
return {};
}
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;

62
src/views/components/cropping/index.vue
View File

@ -1,3 +1,27 @@
<script setup lang="ts">
import { ref, nextTick, getCurrentInstance } from "vue";
import Cropper from "/@/components/ReCropper";
import img from "./picture.jpeg";
const instance = getCurrentInstance();
let info = ref<object>("");
let cropperImg = ref<string>("");
const onCropper = (): void => {
nextTick(() => {
instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
let fileReader: FileReader = new FileReader();
fileReader.onloadend = (e: ProgressEvent) => {
// @ts-ignore
cropperImg.value = e.target.result;
info.value = instance.refs.refCropper.cropper.getData();
};
fileReader.readAsDataURL(blob);
}, "image/jpeg");
});
};
</script>
<template>
<div style="margin: 10px">
<div class="cropper-container">
@ -9,44 +33,6 @@
</div>
</template>
<script lang="ts">
import { ref, nextTick, getCurrentInstance } from "vue";
import Cropper from "/@/components/ReCropper";
import img from "./picture.jpeg";
export default {
name: "reCropping",
components: {
Cropper
},
setup() {
const instance = getCurrentInstance();
let info = ref("");
let cropperImg = ref("");
const onCropper = (): void => {
nextTick(() => {
instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
let fileReader: FileReader = new FileReader();
fileReader.onloadend = (e: any) => {
cropperImg.value = e.target.result;
info.value = instance.refs.refCropper.cropper.getData();
};
fileReader.readAsDataURL(blob);
}, "image/jpeg");
});
};
return {
img,
info,
cropperImg,
onCropper
};
}
};
</script>
<style scoped>
.cropper-container {
display: flex;

106
src/views/components/draggable/index.vue
View File

@ -1,3 +1,51 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import draggable from "vuedraggable/src/vuedraggable";
let gridLists = ref<Array<Object>>([
{ grid: "cn", num: 1 },
{ grid: "cn", num: 2 },
{ grid: "cn", num: 3 },
{ grid: "cn", num: 4 },
{ grid: "cn", num: 5 },
{ grid: "cn", num: 6 },
{ grid: "cn", num: 7 },
{ grid: "cn", num: 8 },
{ grid: "cn", num: 9 }
]);
let lists = ref<Array<Object>>([
{ people: "cn", id: 1, name: "www.itxst.com" },
{ people: "cn", id: 2, name: "www.baidu.com" },
{ people: "cn", id: 3, name: "www.taobao.com" },
{ people: "cn", id: 4, name: "www.google.com" }
]);
let cutLists = ref<Array<Object>>([
{ people: "cn", id: 1, name: "cut1" },
{ people: "cn", id: 2, name: "cut2" },
{ people: "cn", id: 3, name: "cut3" },
{ people: "cn", id: 4, name: "cut4" }
]);
const change = (evt): void => {
console.log("evt: ", evt);
};
onMounted(() => {
// 使用原生sortable实现元素位置切换
// @ts-ignore
// eslint-disable-next-line no-undef
new Sortable(document.querySelector(".cut-container"), {
swap: true,
forceFallback: true,
chosenClass: "chosen",
swapClass: "highlight",
animation: 300
});
});
</script>
<template>
<div class="drag-container">
<!-- grid列表拖拽 -->
@ -72,64 +120,6 @@
</div>
</template>
<script lang="ts">
import draggable from "vuedraggable/src/vuedraggable";
import { reactive, toRefs, onMounted } from "vue";
export default {
name: "reDraggable",
components: { draggable },
setup() {
const myArray = reactive({
gridLists: [
{ grid: "cn", num: 1 },
{ grid: "cn", num: 2 },
{ grid: "cn", num: 3 },
{ grid: "cn", num: 4 },
{ grid: "cn", num: 5 },
{ grid: "cn", num: 6 },
{ grid: "cn", num: 7 },
{ grid: "cn", num: 8 },
{ grid: "cn", num: 9 }
],
lists: [
{ people: "cn", id: 1, name: "www.itxst.com" },
{ people: "cn", id: 2, name: "www.baidu.com" },
{ people: "cn", id: 3, name: "www.taobao.com" },
{ people: "cn", id: 4, name: "www.google.com" }
],
cutLists: [
{ people: "cn", id: 1, name: "cut1" },
{ people: "cn", id: 2, name: "cut2" },
{ people: "cn", id: 3, name: "cut3" },
{ people: "cn", id: 4, name: "cut4" }
]
});
const change = (evt): void => {
console.log("evt: ", evt);
};
onMounted(() => {
// 使用原生sortable实现元素位置切换
// @ts-ignore
// eslint-disable-next-line no-undef
new Sortable(document.querySelector(".cut-container"), {
swap: true,
forceFallback: true,
chosenClass: "chosen",
swapClass: "highlight",
animation: 300
});
});
return {
...toRefs(myArray),
change
};
}
};
</script>
<style lang="scss" scoped>
/* grid列表拖拽 */
.grid-container {

17
src/views/components/map/index.vue
View File

@ -1,22 +1,13 @@
<script setup lang="ts">
import { Amap } from "/@/components/ReMap";
</script>
<template>
<div class="map">
<Amap />
</div>
</template>
<script lang="ts">
import { Amap } from "/@/components/ReMap";
export default {
name: "reMap",
components: {
Amap
},
setup() {
return {};
}
};
</script>
<style scoped>
.map {
width: 100%;

110
src/views/components/seamless-scroll/index.vue
View File

@ -1,3 +1,51 @@
<script setup lang="ts">
import { ref, unref } from "vue";
import { templateRef } from "@vueuse/core";
import SeamlessScroll from "/@/components/ReSeamlessScroll";
// eslint-disable-next-line no-undef
const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref<Array<Object>>([
{
title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
},
{
title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
},
{
title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
},
{
title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
},
{
title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
},
{
title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
},
{
title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
},
{
title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
},
{
title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
}
]);
let classOption = ref<Object>({
direction: "top"
});
function changeDirection(val) {
unref(scroll).reset();
unref(classOption).direction = val;
}
</script>
<template>
<el-space wrap>
<el-card class="box-card">
@ -60,68 +108,6 @@
</el-space>
</template>
<script lang="ts">
import { ref, unref } from "vue";
import { templateRef } from "@vueuse/core";
import SeamlessScroll from "/@/components/ReSeamlessScroll";
export default {
name: "reSeamlessScroll",
components: {
SeamlessScroll
},
setup() {
// eslint-disable-next-line no-undef
const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref([
{
title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
},
{
title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
},
{
title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
},
{
title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
},
{
title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
},
{
title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
},
{
title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
},
{
title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
},
{
title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
}
]);
let classOption = ref({
direction: "top"
});
function changeDirection(val) {
unref(scroll).reset();
unref(classOption).direction = val;
}
return {
listData,
classOption,
changeDirection
};
}
};
</script>
<style lang="scss" scoped>
.box-card {
margin: 10px;

58
src/views/components/selector/index.vue
View File

@ -1,3 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
import Selector from "/@/components/ReSelector";
let selectRange = ref<string>("");
let dataLists = ref<Array<Object>>([
{
title: "基本使用",
echo: [],
disabled: false
},
{
title: "回显模式",
echo: [2, 7],
disabled: true
}
]);
const selectedVal = ({ left, right }): void => {
selectRange.value = `${left}-${right}`;
};
</script>
<template>
<div>
<el-card
@ -21,38 +44,3 @@
</el-card>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
import Selector from "/@/components/ReSelector";
export default {
name: "reSelector",
components: { Selector },
setup() {
let selectRange = ref(null);
let dataLists = ref([
{
title: "基本使用",
echo: [],
disabled: false
},
{
title: "回显模式",
echo: [2, 7],
disabled: true
}
]);
const selectedVal = ({ left, right }) => {
selectRange.value = `${left}-${right}`;
};
return {
selectedVal,
selectRange,
dataLists
};
}
};
</script>

46
src/views/components/split-pane/index.vue
View File

@ -1,3 +1,20 @@
<script setup lang="ts">
import splitpane, { ContextProps } from "/@/components/ReSplitPane";
import { reactive } from "vue";
const settingLR: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "vertical"
});
const settingTB: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "horizontal"
});
</script>
<template>
<div class="split-pane">
<splitpane :splitSet="settingLR">
@ -22,35 +39,6 @@
</div>
</template>
<script lang="ts">
import splitpane, { ContextProps } from "/@/components/ReSplitPane";
import { reactive } from "vue";
export default {
name: "reSplitPane",
components: {
splitpane
},
setup() {
const settingLR: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "vertical"
});
const settingTB: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "horizontal"
});
return {
settingLR,
settingTB
};
}
};
</script>
<style lang="scss" scoped>
$W: 100%;
$H: 80vh;

45
src/views/components/video/index.vue
View File

@ -1,8 +1,4 @@
<template>
<div id="mse"></div>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer/dist/simple_player";
import volume from "xgplayer/dist/controls/volume";
@ -10,28 +6,27 @@ import playbackRate from "xgplayer/dist/controls/playbackRate";
import screenShot from "xgplayer/dist/controls/screenShot";
import { deviceDetection } from "/@/utils/deviceDetection";
export default {
name: "reVideo",
setup() {
onMounted(() => {
new Player({
id: "mse",
autoplay: false,
screenShot: true,
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
poster:
"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
fluid: deviceDetection(),
controlPlugins: [volume, playbackRate, screenShot],
playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
});
});
return {};
}
};
onMounted(() => {
new Player({
id: "mse",
autoplay: false,
screenShot: true,
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
poster:
"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
fluid: deviceDetection(),
controlPlugins: [volume, playbackRate, screenShot],
//传入倍速可选数组
playbackRate: [0.5, 0.75, 1, 1.5, 2]
});
});
</script>
<style lang="scss" scoped>
<template>
<div id="mse"></div>
</template>
<style scoped>
#mse {
flex: auto;
}

2
src/views/permission/button/index.vue
View File

@ -2,7 +2,7 @@
import { ref } from "vue";
import { storageSession } from "/@/utils/storage";
const auth = ref(storageSession.getItem("info").username || "admin");
const auth = ref<Boolean>(storageSession.getItem("info").username || "admin");
function changRole(value) {
storageSession.setItem("info", {

2
src/views/permission/page/index.vue
View File

@ -2,7 +2,7 @@
import { ref, unref } from "vue";
import { storageSession } from "/@/utils/storage";
let purview: string = ref(storageSession.getItem("info").username);
let purview = ref<string>(storageSession.getItem("info").username);
function changRole() {
if (unref(purview) === "admin") {

48
types/global.d.ts vendored
View File

@ -16,53 +16,53 @@ declare global {
};
lastBuildTime: string;
};
declare interface Window {
interface Window {
// Global vue app instance
__APP__: App<Element>;
webkitCancelAnimationFrame: (id?: any) => any;
webkitRequestAnimationFrame: (id?: any) => any;
mozCancelAnimationFrame: (id?: any) => any;
oCancelAnimationFrame: (id?: any) => any;
msCancelAnimationFrame: (id?: any) => any;
mozRequestAnimationFrame: (id?: any) => any;
oRequestAnimationFrame: (id?: any) => any;
msRequestAnimationFrame: (id?: any) => any;
webkitCancelAnimationFrame: (handle: number) => void;
webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
mozCancelAnimationFrame: (id?: string) => any;
oCancelAnimationFrame: (id?: string) => any;
msCancelAnimationFrame: (id?: string) => any;
mozRequestAnimationFrame: (id?: string) => any;
oRequestAnimationFrame: (id?: string) => any;
msRequestAnimationFrame: (id?: string) => any;
}
// vue
declare type PropType<T> = VuePropType<T>;
type PropType<T> = VuePropType<T>;
export type Writable<T> = {
type Writable<T> = {
-readonly [P in keyof T]: T[P];
};
declare type Nullable<T> = T | null;
declare type NonNullable<T> = T extends null | undefined ? never : T;
declare type Recordable<T = any> = Record<string, T>;
declare type ReadonlyRecordable<T = any> = {
type Nullable<T> = T | null;
type NonNullable<T> = T extends null | undefined ? never : T;
type Recordable<T = any> = Record<string, T>;
type ReadonlyRecordable<T = any> = {
readonly [key: string]: T;
};
declare type Indexable<T = any> = {
type Indexable<T = any> = {
[key: string]: T;
};
declare type DeepPartial<T> = {
type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
declare type TimeoutHandle = ReturnType<typeof setTimeout>;
declare type IntervalHandle = ReturnType<typeof setInterval>;
type TimeoutHandle = ReturnType<typeof setTimeout>;
type IntervalHandle = ReturnType<typeof setInterval>;
declare interface ChangeEvent extends Event {
interface ChangeEvent extends Event {
target: HTMLInputElement;
}
declare interface WheelEvent {
interface WheelEvent {
path?: EventTarget[];
}
interface ImportMetaEnv extends ViteEnv {
__: unknown;
}
declare interface ViteEnv {
interface ViteEnv {
VITE_PORT: number;
VITE_USE_MOCK: boolean;
VITE_USE_PWA: boolean;
@ -79,9 +79,9 @@ declare global {
VITE_GENERATE_UI: string;
}
declare function parseInt(s: string | number, radix?: number): number;
function parseInt(s: string | number, radix?: number): number;
declare function parseFloat(string: string | number): number;
function parseFloat(string: string | number): number;
namespace JSX {
// tslint:disable no-empty-interface

5
yarn.lock
View File

@ -3865,6 +3865,11 @@ snake-case@^3.0.4:
dot-case "^3.0.4"
tslib "^2.0.3"
sortablejs@1.13.0:
version "1.13.0"
resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
integrity sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
sortablejs@1.14.0:
version "1.14.0"
resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"