@utogether/udp-core 1.0.0

package/src/utils/storage/index.ts

@@ -0,0 +1,51 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-07-02 14:35:39
+ * @Description: file content
+ */
+// 响应式storage
+import type { App } from 'vue';
+import Storage from 'responsive-storage';
+import { routerArrays } from '../../layout/types';
+import { responsiveStorageNameSpace } from '../../config';
+
+export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
+  const nameSpace = responsiveStorageNameSpace();
+  const configObj = Object.assign(
+    {
+      // 国际化 默认中文zh
+      locale: Storage.getData('locale', nameSpace) ?? {
+        locale: config.Locale ?? 'zh'
+      },
+      // layout模式以及主题
+      layout: Storage.getData('layout', nameSpace) ?? {
+        layout: config.Layout ?? 'vertical',
+        theme: config.Theme ?? 'default',
+        darkMode: config.DarkMode ?? false,
+        sidebarStatus: config.SidebarStatus ?? true,
+        epThemeColor: config.EpThemeColor ?? '#409EFF',
+        themeColor: config.Theme ?? 'light', // 主题色（对应项目配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
+        overallStyle: config.OverallStyle ?? 'light' // 整体风格（浅色：light、深色：dark、自动：system）
+      },
+      configure: Storage.getData('configure', nameSpace) ?? {
+        grey: config.Grey ?? false,
+        weak: config.Weak ?? false,
+        hideTabs: config.HideTabs ?? false,
+        showLogo: config.ShowLogo ?? true,
+        showModel: config.ShowModel ?? 'smart',
+        multiTagsCache: config.MultiTagsCache ?? false
+      },
+      cnd: Storage.getData('cnd', nameSpace) ?? {}
+    },
+    config.MultiTagsCache
+      ? {
+          // 默认显示首页tag
+          tags: Storage.getData('tags', nameSpace) ?? routerArrays
+        }
+      : {}
+  );
+
+  app.use(Storage, { nameSpace, memory: configObj });
+};

package/src/views/components/contextmenu/basic.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h1>基本使用</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>GitHub</v-contextmenu-item>
+      <v-contextmenu-item>GitLab</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-submenu title="蔬菜菜">
+        <v-contextmenu-item>土豆</v-contextmenu-item>
+
+        <v-contextmenu-submenu title="青菜">
+          <v-contextmenu-item>小油菜</v-contextmenu-item>
+          <v-contextmenu-item>空心菜</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item>黄瓜</v-contextmenu-item>
+      </v-contextmenu-submenu>
+
+      <v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-item>哈密瓜</v-contextmenu-item>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from 'v-contextmenu';
+
+export default defineComponent({
+  name: 'ExampleSimple',
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

package/src/views/components/contextmenu/context-menu.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-10-17 11:26:28
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-11-30 07:58:05
+ * @Description: file content
+-->
+<script setup lang="ts">
+import basic from './basic.vue';
+import menuGroup from './menuGroup.vue';
+import menuDynamic from './menuDynamic.vue';
+import 'v-contextmenu/dist/themes/default.css';
+defineOptions({
+  name: 'ContextMenu'
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">右键菜单组件</span>
+      </div>
+    </template>
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 基本使用 -->
+        <basic />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 按钮组 -->
+        <menuGroup />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 动态菜单 -->
+        <menuDynamic />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>

package/src/views/components/contextmenu/menuDynamic.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <h1>动态菜单</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group title="操作">
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')"
+          >添加菜单</v-contextmenu-item
+        >
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')"
+          >添加菜单组</v-contextmenu-item
+        >
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('submenu')"
+          >添加子菜单</v-contextmenu-item
+        >
+        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">删除</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <template v-for="(item, index) of extra" :key="index">
+        <v-contextmenu-divider />
+
+        <v-contextmenu-group v-if="item === 'group'" :title="`菜单组 ${index + 1}`">
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-group>
+
+        <v-contextmenu-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`">
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
+      </template>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from 'v-contextmenu';
+
+export default defineComponent({
+  name: 'ExampleDynamic',
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  },
+
+  data() {
+    return {
+      extra: []
+    };
+  },
+
+  methods: {
+    addItem(type = 'item') {
+      this.extra.push(type);
+    },
+    removeItem() {
+      this.extra.pop();
+    }
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  margin-bottom: 30px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

package/src/views/components/contextmenu/menuGroup.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h1>按钮组</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>菜单</v-contextmenu-item>
+
+      <v-contextmenu-group>
+        <v-contextmenu-item>Github</v-contextmenu-item>
+        <v-contextmenu-item>Codepen</v-contextmenu-item>
+        <v-contextmenu-item disabled>Alipay</v-contextmenu-item>
+        <v-contextmenu-item>Wechat</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-group title="按钮组">
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item disabled>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from 'v-contextmenu';
+
+const ExampleSFC = defineComponent({
+  name: 'ExampleSFC',
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+
+export default ExampleSFC;
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

package/src/views/components/count-to/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ReNormalCountTo, ReboundCountTo } from '@/components/ReCountTo';
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">数字动画组件</span>
+      </div>
+    </template>
+    <div class="flex items-center">
+      <ReNormalCountTo
+        prefix="$"
+        :duration="1000"
+        :color="'#409EFF'"
+        :fontSize="'2em'"
+        :startVal="1"
+        :endVal="1000"
+      />
+      <ul class="flex ml-8">
+        <ReboundCountTo
+          v-for="(num, inx) of [1, 6, 6, 6]"
+          :key="inx"
+          :i="num"
+          :blur="inx"
+          :delay="inx + 1"
+        />
+      </ul>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+
+:deep(.el-card) {
+  margin-bottom: 10px;
+  text-align: center;
+}
+</style>

package/src/views/components/cropping/index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, nextTick, getCurrentInstance } from 'vue';
+import Cropper from '@/components/ReCropper';
+import img from './picture.jpeg';
+
+let info = ref<object>(null);
+let cropperImg = ref<string>('');
+const instance = getCurrentInstance();
+
+const onCropper = (): void => {
+  nextTick(() => {
+    // @ts-expect-error
+    instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
+      let fileReader: FileReader = new FileReader();
+      fileReader.onloadend = (e: ProgressEvent) => {
+        // @ts-ignore
+        cropperImg.value = e.target.result;
+        // @ts-expect-error
+        info.value = instance.refs.refCropper.cropper.getData();
+      };
+      fileReader.readAsDataURL(blob);
+    }, 'image/jpeg');
+  });
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">图片裁剪组件</span>
+      </div>
+    </template>
+    <div class="cropper-container">
+      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
+      <img v-if="cropperImg" :src="cropperImg" class="croppered" />
+    </div>
+    <el-button type="primary" @click="onCropper">裁剪</el-button>
+    <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
+  </el-card>
+</template>
+
+<style scoped>
+.cropper-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.el-button {
+  margin-top: 10px;
+}
+
+.croppered {
+  display: block;
+  width: 45%;
+  height: 360px;
+}
+</style>

package/src/views/components/split-pane/index.vue

@@ -0,0 +1,82 @@
+<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>
+  <el-card>
+    <!-- <template #header>
+      <div class="card-header">
+        <span class="font-medium">切割面板组件</span>
+      </div>
+    </template> -->
+    <div class="split-pane">
+      <splitpane :split-set="settingLR">
+        <!-- #paneL 表示指定该组件为左侧面板 -->
+        <template #paneL>
+          <!-- 自定义左侧面板的内容 -->
+          <div class="dv-a">A</div>
+        </template>
+        <!-- #paneR 表示指定该组件为右侧面板 -->
+        <template #paneR>
+          <!-- 再次将右侧面板进行拆分 -->
+          <splitpane :split-set="settingTB">
+            <template #paneL>
+              <div class="dv-b">B</div>
+            </template>
+            <template #paneR>
+              <div class="dv-c">C</div>
+            </template>
+          </splitpane>
+        </template>
+      </splitpane>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+$W: 100%;
+$H: 70vh;
+
+.split-pane {
+  width: $W;
+  height: $H;
+  font-size: 50px;
+  color: #fff;
+  text-align: center;
+
+  .dv-a,
+  .dv-b,
+  .dv-c {
+    width: $W;
+    height: $W;
+    line-height: $H;
+    background: rgba($color: dodgerblue, $alpha: 80%);
+  }
+
+  .dv-b,
+  .dv-c {
+    line-height: 250px;
+  }
+
+  .dv-b {
+    background: rgba($color: #000, $alpha: 80%);
+  }
+
+  .dv-c {
+    background: rgba($color: #ce272d, $alpha: 80%);
+  }
+}
+</style>

package/src/views/components/video/index.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-04 18:18:51
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-09-06 14:45:11
+ * @Description: file content
+-->
+<script setup lang="ts">
+// import { onMounted } from 'vue';
+// import Player from 'xgplayer/dist/simple_player';
+// import volume from 'xgplayer/es/controls/volume';
+// import screenShot from 'xgplayer/es/controls/screenShot';
+// import { deviceDetection } from '@utogether/utils';
+// import playbackRate from 'xgplayer/es/controls/playbackRate';
+import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+
+// onMounted(() => {
+//   new Player({
+//     id: 'mse',
+//     // 默认静音
+//     volume: 0,
+//     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>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"
+          >视频组件，采用开源的<el-link
+            href="https://v2.h5player.bytedance.com"
+            target="_blank"
+            :icon="useRenderIcon('video-play')"
+            style="margin: 0 4px 5px; font-size: 16px"
+            >西瓜播放器</el-link
+          ></span
+        >
+      </div>
+    </template>
+    <div id="mse" />
+  </el-card>
+</template>
+
+<style scoped>
+#mse {
+  flex: auto;
+}
+</style>

package/src/views/error/403.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-07 15:54:28
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-10-25 11:29:52
+ * @Description: 无权限页面
+-->
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import { delCurrentRoute } from '../../router/utils';
+import noAccess from '../../assets/status/403.svg?component';
+const router = useRouter();
+const route = useRoute();
+const goHome = () => {
+  delCurrentRoute(route, false);
+  router.push('/');
+};
+</script>
+
+<template>
+  <div style="width: 100%; height: 100%" class="flex justify-center items-center bg-[#fff]">
+    <noAccess />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+      >
+        403
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
+      >
+        抱歉，你无权访问该页面
+      </p>
+      <el-button
+        v-motion
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
+        type="primary"
+        @click="goHome"
+        >返回首页</el-button
+      >
+    </div>
+  </div>
+</template>

package/src/views/error/404.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-07 15:54:28
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-10-25 11:31:33
+ * @Description: 404页面
+-->
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import { delCurrentRoute } from '../../router/utils';
+import noExist from '../../assets/status/404.svg?component';
+const router = useRouter();
+const route = useRoute();
+const goHome = () => {
+  delCurrentRoute(route, false);
+  router.push('/');
+};
+</script>
+
+<template>
+  <div style="width: 100%; height: 100%" class="flex justify-center items-center bg-[#fff]">
+    <noExist />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+      >
+        404
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
+      >
+        抱歉，你访问的页面不存在
+      </p>
+      <el-button
+        v-motion
+        :initial="{ opacity: 0, y: 100 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }"
+        type="primary"
+        @click="goHome"
+        >返回首页</el-button
+      >
+    </div>
+  </div>
+</template>