xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-11-15 21:23:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(projects): 优化路由导入页面写法，页面路由调整

Browse Source
This commit is contained in:
Soybean
2021-11-28 12:19:00 +08:00
parent d683894beb
commit 0b10b5056e
36 changed files with 303 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/component/button/index.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

6
src/views/component/card/index.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

46
src/views/component/editor/markdown/index.vue
View File

@@ -1,46 +0,0 @@
<template>
<div>
<n-card title="markdown插件" class="shadow-sm rounded-16px">
<div ref="domRef"></div>
<template #footer>
<github-link link="https://github.com/Vanessa219/vditor" />
</template>
</n-card>
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { NCard } from 'naive-ui';
import Vditor from 'vditor';
import 'vditor/src/assets/scss/index.scss';
import { useThemeStore } from '@/store';
import { GithubLink } from '@/components';
const theme = useThemeStore();
const vditor = ref<Vditor | null>(null);
const domRef = ref<HTMLElement | null>(null);
function renderVditor() {
vditor.value = new Vditor(domRef.value!, {
minHeight: 400,
theme: theme.darkMode ? 'dark' : 'classic',
icon: 'material',
cache: { enable: false }
});
}
watch(
() => theme.darkMode,
newValue => {
const themeMode = newValue ? 'dark' : 'classic';
vditor.value?.setTheme(themeMode);
}
);
onMounted(() => {
renderVditor();
});
</script>
<style scoped></style>

44
src/views/component/editor/quill/index.vue
View File

@@ -1,44 +0,0 @@
<template>
<div>
<n-card title="富文本插件" class="shadow-sm rounded-16px">
<div ref="domRef" class="bg-white dark:bg-dark"></div>
<template #footer>
<github-link link="https://github.com/wangeditor-team/wangEditor" />
</template>
</n-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { NCard } from 'naive-ui';
import WangEditor from 'wangeditor';
import { GithubLink } from '@/components';
const editor = ref<WangEditor | null>(null);
const domRef = ref<HTMLElement | null>(null);
function renderWangEditor() {
editor.value = new WangEditor(domRef.value);
setEditorConfig();
editor.value.create();
}
function setEditorConfig() {
editor.value!.config.zIndex = 10;
}
onMounted(() => {
renderWangEditor();
});
</script>
<style scoped>
:deep(.w-e-toolbar) {
background: inherit !important;
border-color: #999 !important;
}
:deep(.w-e-text-container) {
background: inherit;
border-color: #999 !important;
}
</style>

4
src/views/component/index.ts Normal file
View File

@@ -0,0 +1,4 @@
import ComponentButton from './button/index.vue';
import ComponentCard from './card/index.vue';
export { ComponentButton, ComponentCard };

26
src/views/component/map/components/BaiduMap.vue
View File

@@ -1,26 +0,0 @@
<template>
<div ref="domRef" class="w-full h-full"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useScriptTag } from '@vueuse/core';
import { BAIDU_MAP_SDK_URL } from '@/config';
const { load } = useScriptTag(BAIDU_MAP_SDK_URL);
const domRef = ref<HTMLDivElement | null>(null);
async function renderBaiduMap() {
await load(true);
const map = new BMap.Map(domRef.value!);
const point = new BMap.Point(114.05834626586915, 22.546789983033168);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
}
onMounted(() => {
renderBaiduMap();
});
</script>
<style scoped></style>

29
src/views/component/map/components/GaodeMap.vue
View File

@@ -1,29 +0,0 @@
<template>
<div ref="domRef" class="w-full h-full"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useScriptTag } from '@vueuse/core';
import { GAODE_MAP_SDK_URL } from '@/config';
const { load } = useScriptTag(GAODE_MAP_SDK_URL);
const domRef = ref<HTMLDivElement | null>(null);
async function renderBaiduMap() {
await load(true);
const map = new AMap.Map(domRef.value!, {
zoom: 11,
center: [114.05834626586915, 22.546789983033168],
viewMode: '3D'
});
return map;
}
onMounted(() => {
renderBaiduMap();
});
</script>
<style scoped></style>

29
src/views/component/map/components/TencentMap.vue
View File

@@ -1,29 +0,0 @@
<template>
<div ref="domRef"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useScriptTag } from '@vueuse/core';
import { TENCENT_MAP_SDK_URL } from '@/config';
const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
const domRef = ref<HTMLDivElement | null>(null);
async function renderBaiduMap() {
await load(true);
const map = new TMap.Map(domRef.value!, {
center: new TMap.LatLng(39.98412, 116.307484),
zoom: 11,
viewMode: '3D'
});
return map;
}
onMounted(() => {
renderBaiduMap();
});
</script>
<style scoped></style>

5
src/views/component/map/components/index.ts
View File

@@ -1,5 +0,0 @@
import BaiduMap from './BaiduMap.vue';
import GaodeMap from './GaodeMap.vue';
import TencentMap from './TencentMap.vue';
export { BaiduMap, GaodeMap, TencentMap };

29
src/views/component/map/index.vue
View File

@@ -1,29 +0,0 @@
<template>
<div>
<n-card title="地图插件" class="h-full shadow-sm rounded-16px" content-style="overflow:hidden">
<n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
<n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
<component :is="item.component" />
</n-tab-pane>
</n-tabs>
</n-card>
</div>
</template>
<script setup lang="ts">
import type { Component } from 'vue';
import { NCard, NTabs, NTabPane } from 'naive-ui';
import { GaodeMap, TencentMap } from './components';
interface Map {
id: string;
label: string;
component: Component;
}
const maps: Map[] = [
{ id: 'gaode', label: '高德地图', component: GaodeMap },
{ id: 'tencent', label: '腾讯地图', component: TencentMap }
];
</script>
<style scoped></style>

118
src/views/component/swiper/index.vue
View File

@@ -1,118 +0,0 @@
<template>
<div>
<n-card title="Swiper插件" class="shadow-sm rounded-16px">
<n-space :vertical="true">
<github-link link="https://github.com/nolimits4web/swiper" />
<web-site-link label="vue3版文档地址：" link="https://swiperjs.com/vue" />
<web-site-link label="插件demo地址：" link="https://swiperjs.com/demos" />
</n-space>
<n-space :vertical="true">
<div v-for="item in swiperExample" :key="item.id">
<h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
<swiper v-bind="item.options">
<swiper-slide v-for="i in 5" :key="i">
<div class="flex-center h-240px border-1px border-[#999] text-18px font-bold">Slide{{ i }}</div>
</swiper-slide>
</swiper>
</div>
</n-space>
</n-card>
</div>
</template>
<script setup lang="ts">
import { NCard, NSpace } from 'naive-ui';
import SwiperCore, { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import type { SwiperOptions } from 'swiper';
import { WebSiteLink, GithubLink } from '@/components';
type SwiperExampleOptions = Pick<
SwiperOptions,
| 'navigation'
| 'pagination'
| 'scrollbar'
| 'slidesPerView'
| 'slidesPerGroup'
| 'spaceBetween'
| 'direction'
| 'loop'
| 'loopFillGroupWithBlank'
>;
interface SwiperExample {
id: number;
label: string;
options: Partial<SwiperExampleOptions>;
}
SwiperCore.use([Navigation, Pagination]);
const swiperExample: SwiperExample[] = [
{ id: 0, label: 'Default', options: {} },
{
id: 1,
label: 'Navigation',
options: {
navigation: true
}
},
{
id: 2,
label: 'Pagination',
options: {
pagination: true
}
},
{
id: 3,
label: 'Pagination dynamic',
options: {
pagination: { dynamicBullets: true }
}
},
{
id: 4,
label: 'Pagination progress',
options: {
navigation: true,
pagination: {
type: 'progressbar'
}
}
},
{
id: 5,
label: 'Pagination fraction',
options: {
navigation: true,
pagination: {
type: 'fraction'
}
}
},
{
id: 6,
label: 'Slides per view',
options: {
pagination: {
clickable: true
},
slidesPerView: 3,
spaceBetween: 30
}
},
{
id: 7,
label: 'Infinite loop',
options: {
navigation: true,
pagination: {
clickable: true
},
loop: true
}
}
];
</script>
<style scoped></style>

36
src/views/component/video/index.vue
View File

@@ -1,36 +0,0 @@
<template>
<div>
<n-card title="视频播放器插件" class="h-full shadow-sm rounded-16px">
<div ref="domRef"></div>
</n-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { NCard } from 'naive-ui';
import Player from 'xgplayer';
const domRef = ref<HTMLElement | null>(null);
const player = ref<Player | null>(null);
function renderXgPlayer() {
const url = 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
player.value = new Player({
el: domRef.value!,
url,
playbackRate: [0.5, 0.75, 1, 1.5, 2]
});
}
function destroyXgPlayer() {
player.value?.destroy();
}
onMounted(() => {
renderXgPlayer();
});
onUnmounted(() => {
destroyXgPlayer();
});
</script>
<style scoped></style>