feat 新增测试页面

admin-ui/src/components/RuoYi/Git/index.vue

@@ -1,13 +1,11 @@
 <template>
-  <div>
+  <div v-if="env == 'development'">
-    <svg-icon icon-class="github" @click="goto" />
+    <svg-icon icon-class="bug" @click="router.push({ path: '/test/index' })" />
   </div>
 </template>
 
 <script setup>
-const url = ref('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus');
+import { useRouter } from "vue-router";
-
+const router = useRouter();
-function goto() {
+const env = import.meta.env.VITE_APP_ENV;
-  window.open(url.value)
-}
 </script>

admin-ui/src/layout/components/Navbar.vue

@@ -15,6 +15,9 @@
         <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip> -->
+        <el-tooltip content="示例代码" effect="dark" placement="bottom">
+          <ruo-yi-git  class="right-menu-item hover-effect" />
+        </el-tooltip>
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 

admin-ui/src/router/index.js

@@ -1,4 +1,4 @@
-import { createWebHistory,createWebHashHistory, createRouter } from 'vue-router'
+import { createWebHistory, createWebHashHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 
@@ -24,6 +24,17 @@ import Layout from '@/layout'
   }
  */
 
+const env = import.meta.env.VITE_APP_ENV;
+const children = []
+if (env == 'development') {
+
+  const files = import.meta.glob('@/views/test/*.vue');//异步导入
+  for (let fileName in files) {
+    let moduleName = fileName.replace(/^.*\/(\w+)\.vue$/, "$1");
+    children.push({ path: moduleName, component: files[fileName] })
+  }
+}
+console.debug(children)
 // 公共路由
 export const constantRoutes = [
   {
@@ -83,9 +94,20 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  }, {
+    path: '/test',
+    component: () => import('@/views/test'),
+    hidden: true,
+    redirect: '/test/index',
+    children
   }
 ]
 
+
+
+
+
+
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {

admin-ui/src/views/test.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="w-test">
+    <div>
+      <div>
+        <router-link to="/">系统首页</router-link>
+        
+        <router-link v-for="(path,index) in list" :to="'./'+path" :key="index">{{ path }}</router-link>
+      </div>
+    </div>
+    <div>
+      <div>
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+const list = ref([]);
+let files = import.meta.glob("@/views/test/*.vue");
+
+for (let fileName in files) {
+  let moduleName = fileName.replace(/^.*\/(\w+)\.vue$/, "$1");
+  // if (moduleName == "index") {
+  //   continue;
+  // }
+  list.value.push(moduleName);
+}
+</script>
+<style lang="scss" scoped>
+.w-test {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 10rem 1fr;
+  gap: 2rem;
+
+  & > div {
+    position: relative;
+
+    & > div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    &:last-child > div {
+      overflow: auto;
+    }
+    &:first-child {
+      background-image: linear-gradient(to right, #fff 70%, #0001);
+      & > div {
+        padding: 1rem 0;
+
+        & > a {
+          display: flex;
+          font-size: 0.9rem;
+          position: relative;
+          height: 2rem;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.5s;
+          margin: 0.3rem 0;
+          color: var(--el-color-primary-dark-2);
+          border: solid 0.1rem #0000;
+
+          &:not(.router-link-exact-active):hover {
+            background-color: #fff;
+            color: var(--el-color-primary-dark-3);
+            border: solid 0.1rem var(--el-color-primary-dark-3);
+            transform: scale(0.95);
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            box-sizing: border-box;
+            right: 0rem;
+            width: 1rem;
+            height: 2rem;
+            border: solid 1rem #0000;
+            border-right-width: 0;
+            border-left-color: var(--c, #0000);
+            transition: all 0.5s;
+          }
+
+          &.router-link-exact-active {
+            --c: var(--el-color-primary-dark-2);
+            background-color: var(--c);
+            color: #fff;
+            transform: scale(1.05);
+            &:hover {
+              --c: var(--el-color-primary-dark-3);
+            }
+            &::after {
+              right: -1rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

admin-ui/src/views/test/index.vue

@@ -0,0 +1,11 @@
+<template>
+<div>
+  <h1>示例首页</h1>
+  <div>直接在@/views/test/下创建vue文件</div>
+</div>
+</template>
+<script setup>
+</script>
+<style lang="scss" scoped>
+
+</style>

admin-ui/src/views/test/uploader.vue

@@ -0,0 +1,164 @@
+<template>
+  <div style="margin: 1rem;">
+    <el-tabs type="border-card">
+
+
+      <el-tab-pane label="图片上传组件">
+        <div style="padding: 1rem;">
+          <div>
+            图片上传组件说明：
+            <ol style="font-size: .8rem; line-height: 1.8;">
+              <li>基础用法： &lt;w-image-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
+                v-model:uploading="uploading" /&gt;</li>
+              <li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
+                前端示例<br />
+                <pre class="code">
+const getUploadKey =async () => {
+  let r = await request.get("/file/upload/getUploadKey")
+  return r.data
+} </pre>
+                后端示例<br />
+                <pre class="code">  @GetMapping("getUploadKey")
+  public R getUploadKey() {
+    return R.ok().setData(FileUtils.getUploadKey());
+  }</pre>
+
+              </li>
+              <li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
+              <li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
+              <li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
+              <li>属性（prefix）：上传路径前缀，默认：default</li>
+              <li>属性（disabled）：禁止上传（图片预览模式）， 默认：false</li>
+              <li>属性（text）：按钮文字，默认：上传图片</li>
+              <li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
+              <li>属性（threadNum）：并行上传数量：默认：2</li>
+              <li>属性（retry）：重试次数，默认：3 </li>
+              <li>属性（saveSrc）：是否保存图片原文件，如果true，则下载时下载原图zip文件，否则下载大图片，默认：false </li>
+              <li>属性（saveMin）：是否保存缩略图，如果true，则列表时显示缩略图，否则显示大图，默认：true </li>
+              <li>属性（watermark）：是否添加水印，默认：true </li>
+              <li>属性（noEffect）：是否无效果，本质设置css属性，默认：false </li>
+              <li>css属性（--image-size）：图片显示大小，默认： 10em </li>
+              <li>css属性（--image-border-radius）：图片显示圆角，默认： .4em</li>
+              <li>css属性（--image-margin）：图片外边距，默认： .5em .5em 0 0</li>
+              <li>css属性（--image-border）：图片边框，默认： #FFF solid 2px </li>
+              <li>css属性（--image-box-shadow）：图片阴影，默认： 0 0 .2em #0005</li>
+              <li>插槽（button）：上传按钮插槽</li>
+              <li>插槽（default）：图片列表插槽，作用域：list，不建议定义</li>
+              <li>事件（change）：modelValue发送了变化</li>
+            </ol>
+
+          </div>
+          <el-divider>单图片上传</el-divider>
+          <w-image-uploader v-model="imgs[0]" saveSrc max="1" v-model:uploading="imging" />
+          <pre>绑定值：{{ imgs[0] }}</pre>
+          <div>{{ imging ? '上传中' : '没有上传' }}
+
+            <w-image-view ref="imgView" />
+            <el-button @click="proxy.$refs.imgView.open(imgs[0])">重写的图片预览组件测试</el-button>
+          </div>
+
+
+          <el-divider>9张图片上传</el-divider>
+          <div style="width: 50em;"><w-image-uploader v-model="imgs[1]" saveSrc max="9" text="9张图片上传"
+              style="--image-size:15em;" /></div>
+
+          <pre>绑定值：{{ imgs[1] }}</pre>
+
+          <el-divider>预览模式</el-divider>
+          <w-image-uploader style="width: 35em;" disabled :modelValue="[
+            '/files/default/2024/10/24/d0wt3m3j4tud.webp',
+            '/files/default/2024/10/24/4x53htt9v8j1.webp',
+            '/files/default/2024/10/24/1trnacdjxeoju.webp',
+            '/files/default/2024/10/24/742tvr5pq526.webp',
+            '/files/default/2024/10/24/1dg74ibgi0xbj.webp',
+            '/files/default/2024/10/24/1bgesfnixpfvt.webp',
+            '/files/default/2024/10/24/h1legy4o8tko.webp',
+            '/files/default/2024/10/24/9xe6yyoed9dj.webp'
+          ]" />
+        </div>
+      </el-tab-pane>
+
+
+      <el-tab-pane label="文件上传组件">
+        <div style="padding: 1rem;">
+          <div>
+            文件上传组件说明：
+            <ol style="font-size: .8rem; line-height: 1.8;">
+              <li>基础用法： &lt;w-file-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
+                v-model:uploading="uploading" /&gt;</li>
+              <li>大小大于chunksize的大文件上传会自动分片上传</li>
+              <li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
+                前端示例<br />
+                <pre class="code">
+const getUploadKey =async () => {
+  let r = await request.get("/file/upload/getUploadKey")
+  return r.data
+} </pre>
+                后端示例<br />
+                <pre class="code">  @GetMapping("getUploadKey")
+  public R getUploadKey() {
+    return R.ok().setData(FileUtils.getUploadKey());
+  }</pre>
+
+              </li>
+              <li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
+              <li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
+              <li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
+              <li>属性（prefix）：上传路径前缀，默认：default</li>
+              <li>属性（keepFilename）：是否保留文件名, 默认：true</li>
+              <li>属性（disabled）：禁止上传（文件预览模式）， 默认：false</li>
+              <li>属性（text）：按钮文字，默认：上传文件</li>
+              <li>属性（accept）：允许上传的文件扩展名列表，默认：'' ,office:'.doc,.docx,.ppt,.pptx,.xls,.xlsx'</li>
+              <li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
+              <li>属性（threadNum）：并行上传数量：默认：2</li>
+              <li>属性（retry）：重试次数，默认：3 </li>
+              <li>属性（chunksize）：分片大小，默认：5Mb，不建议修改</li>
+              <li>属性（border）：文件项是否显示边框，默认：true</li>
+              <li>插槽（button）：上传按钮插槽</li>
+              <li>插槽（default）：文件列表，作用域：list，不建议定义</li>
+              <li>事件（change）：modelValue发送了变化</li>
+
+            </ol>
+
+          </div>
+          <el-divider>单文件上传</el-divider>
+          <w-file-uploader v-model="data[0]" max="1" v-model:uploading="uploading" />
+          <pre>绑定值：{{ data[0] }}</pre>
+          <div>{{ uploading ? '上传中' : '没有上传' }}</div>
+
+          <el-divider>预览模式</el-divider>
+          <w-file-uploader v-model="data[0]" max="1" :border="false" disabled />
+
+          <el-divider>单word文件小于10kb上传</el-divider>
+          <w-file-uploader v-model="data[1]" max="1" accept=".docx,.doc" text="单word文件小于10kb上传" :max-size="10240" />
+          <pre>绑定值：{{ data[1] }}</pre>
+
+
+          <el-divider>多文件上传</el-divider>
+          <w-file-uploader v-model="data[2]" max="2" />
+          <pre>绑定值：{{ data[2] }}</pre>
+        </div>
+      </el-tab-pane>
+
+    </el-tabs>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const data = ref(['/files/default/2024/10/24/2nhdirb2ujey/5mb.txt'])
+const uploading = ref(false)
+
+const imgs = ref(['/files/default/2024/10/24/d0wt3m3j4tud.webp'])
+const imging = ref(false)
+</script>
+<style lang="scss" scoped>
+.code {
+  border: solid 1px #0001;
+  margin: .5rem;
+  padding: .5rem;
+  border-radius: .3rem;
+}
+</style>