Merge branch 'main' into pages

locales/en.yaml

@@ -92,6 +92,7 @@ menus:
   pureDraggable: Draggable
   pureSplitPane: Split Pane
   pureText: Text Ellipsis
+  pureSlider: Slider
   pureElButton: Button
   pureButton: Button Animation
   pureCheckButton: Check Button

locales/zh-CN.yaml

@@ -92,6 +92,7 @@ menus:
   pureDraggable: 拖拽
   pureSplitPane: 切割面板
   pureText: 文本省略
+  pureSlider: 滑块
   pureElButton: 按钮
   pureCheckButton: 可选按钮
   pureButton: 按钮动效

src/components/ReText/src/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { h, onMounted, ref, useSlots } from "vue";
 import { type TippyOptions, useTippy } from "vue-tippy";
 

src/components/ReTreeLine/index.ts

@@ -90,9 +90,9 @@ export default defineComponent({
         ];
     // 取得每一层的当前节点是不是在当前层级列表的最后一个
     const lastnodeArr = [];
-    let currentNode = this.node;
+    let currentNode: any = this.node;
     while (currentNode) {
-      let parentNode = currentNode.parent;
+      let parentNode: any = currentNode.parent;
       // 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树)
       if (currentNode.level === 1 && !currentNode.parent) {
         // el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent

src/layout/components/lay-footer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getConfig } from "@/config";
 
 const TITLE = getConfig("Title");

src/router/modules/components.ts

@@ -47,8 +47,7 @@ export default {
       name: "CheckCard",
       component: () => import("@/views/components/check-card.vue"),
       meta: {
-        title: $t("menus.pureCheckCard"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckCard")
       }
     },
     {
@@ -112,7 +111,15 @@ export default {
       name: "PureText",
       component: () => import("@/views/components/text.vue"),
       meta: {
-        title: $t("menus.pureText"),
+        title: $t("menus.pureText")
+      }
+    },
+    {
+      path: "/components/slider",
+      name: "PureSlider",
+      component: () => import("@/views/components/slider/index.vue"),
+      meta: {
+        title: $t("menus.pureSlider"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -129,8 +136,7 @@ export default {
       name: "CheckButton",
       component: () => import("@/views/components/check-button.vue"),
       meta: {
-        title: $t("menus.pureCheckButton"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckButton")
       }
     },
     {

src/store/modules/app.ts

@@ -8,8 +8,7 @@ import {
   responsiveStorageNameSpace
 } from "../utils";
 
-export const useAppStore = defineStore({
-  id: "pure-app",
+export const useAppStore = defineStore("pure-app", {
   state: (): appType => ({
     sidebar: {
       opened:

src/store/modules/epTheme.ts

@@ -6,8 +6,7 @@ import {
   responsiveStorageNameSpace
 } from "../utils";
 
-export const useEpThemeStore = defineStore({
-  id: "pure-epTheme",
+export const useEpThemeStore = defineStore("pure-epTheme", {
   state: () => ({
     epThemeColor:
       storageLocal().getItem<StorageConfigs>(

src/store/modules/multiTags.ts

@@ -14,8 +14,7 @@ import {
 } from "../utils";
 import { usePermissionStoreHook } from "./permission";
 
-export const useMultiTagsStore = defineStore({
-  id: "pure-multiTags",
+export const useMultiTagsStore = defineStore("pure-multiTags", {
   state: () => ({
     // 存储标签页信息（路由信息）
     multiTags: storageLocal().getItem<StorageConfigs>(
@@ -24,12 +23,12 @@ export const useMultiTagsStore = defineStore({
       ? storageLocal().getItem<StorageConfigs>(
           `${responsiveStorageNameSpace()}tags`
         )
-      : [
+      : ([
           ...routerArrays,
           ...usePermissionStoreHook().flatteningRoutes.filter(
             v => v?.meta?.fixedTag
           )
-        ],
+        ] as any),
     multiTagsCache: storageLocal().getItem<StorageConfigs>(
       `${responsiveStorageNameSpace()}configure`
     )?.multiTagsCache

src/store/modules/permission.ts

@@ -12,8 +12,7 @@ import {
 } from "../utils";
 import { useMultiTagsStoreHook } from "./multiTags";
 
-export const usePermissionStore = defineStore({
-  id: "pure-permission",
+export const usePermissionStore = defineStore("pure-permission", {
   state: () => ({
     // 静态路由生成的菜单
     constantMenus,
@@ -31,7 +30,7 @@ export const usePermissionStore = defineStore({
         filterTree(ascending(this.constantMenus.concat(routes)))
       );
       this.flatteningRoutes = formatFlatteningRoutes(
-        this.constantMenus.concat(routes)
+        this.constantMenus.concat(routes) as any
       );
     },
     cacheOperate({ mode, name }: cacheType) {

src/store/modules/settings.ts

@@ -1,8 +1,7 @@
 import { defineStore } from "pinia";
 import { type setType, store, getConfig } from "../utils";
 
-export const useSettingStore = defineStore({
-  id: "pure-setting",
+export const useSettingStore = defineStore("pure-setting", {
   state: (): setType => ({
     title: getConfig().Title,
     fixedHeader: getConfig().FixedHeader,

src/store/modules/user.ts

@@ -16,8 +16,7 @@ import {
 import { useMultiTagsStoreHook } from "./multiTags";
 import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
 
-export const useUserStore = defineStore({
-  id: "pure-user",
+export const useUserStore = defineStore("pure-user", {
   state: (): userType => ({
     // 头像
     avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",

src/utils/print.ts

@@ -9,6 +9,7 @@ const Print = function (dom, options?: object): PrintFunction {
   options = options || {};
   // @ts-expect-error
   if (!(this instanceof Print)) return new Print(dom, options);
+  // @ts-expect-error
   this.conf = {
     styleStr: "",
     // Elements that need to dynamically get and set the height
@@ -18,19 +19,26 @@ const Print = function (dom, options?: object): PrintFunction {
     // Callback after printing
     printDoneCallBack: null
   };
+  // @ts-expect-error
   for (const key in this.conf) {
     if (key && options.hasOwnProperty(key)) {
+      // @ts-expect-error
       this.conf[key] = options[key];
     }
   }
   if (typeof dom === "string") {
+    // @ts-expect-error
     this.dom = document.querySelector(dom);
   } else {
+    // @ts-expect-error
     this.dom = this.isDOM(dom) ? dom : dom.$el;
   }
+  // @ts-expect-error
   if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
+    // @ts-expect-error
     this.setDomHeight(this.conf.setDomHeightArr);
   }
+  // @ts-expect-error
   this.init();
 };
 

src/views/components/slider/components/Base.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(10);
+const value3 = ref(0);
+const value4 = ref(0);
+const value5 = ref(0);
+
+const formatTooltip = (val: number) => {
+  return val / 100;
+};
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="demonstration">默认值</span>
+    <el-slider v-model="value1" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">自定义初始值</span>
+    <el-slider v-model="value2" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">隐藏 Tooltip 提示</span>
+    <el-slider v-model="value3" :show-tooltip="false" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">格式化 Tooltip 提示</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">禁用</span>
+    <el-slider v-model="value5" disabled />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+
+.slider-demo-block .demonstration {
+  flex: 1;
+  margin-bottom: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 44px;
+  color: var(--el-text-color-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slider-demo-block .demonstration + .el-slider {
+  flex: 0 0 70%;
+}
+</style>

src/views/components/slider/components/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" show-input />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Marks.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import type { CSSProperties } from "vue";
+
+interface Mark {
+  style: CSSProperties;
+  label: string;
+}
+
+type Marks = Record<number, Mark | string>;
+
+const value = ref([30, 60]);
+const marks = reactive<Marks>({
+  0: "0°C",
+  8: "8°C",
+  37: "37°C",
+  50: {
+    style: {
+      color: "#1989FA"
+    },
+    label: "50%"
+  }
+});
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" range :marks="marks" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Placement.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(0);
+const value3 = ref(0);
+const value4 = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="mr-2">上</span>
+    <el-slider v-model="value1" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">下</span>
+    <el-slider v-model="value2" placement="bottom" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">左</span>
+    <el-slider v-model="value4" placement="left" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">右</span>
+    <el-slider v-model="value3" placement="right" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Range.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref([4, 8]);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" range show-stops :max="10" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Size.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="max-w-[600px] ml-4">
+    <el-slider v-model="value" show-input size="large" />
+    <el-slider v-model="value" show-input />
+    <el-slider v-model="value" show-input size="small" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-slider {
+  margin-top: 20px;
+}
+
+.el-slider:first-child {
+  margin-top: 0;
+}
+</style>

src/views/components/slider/components/Step.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="demonstration">不显示断点</span>
+    <el-slider v-model="value1" :step="10" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">显示断点</span>
+    <el-slider v-model="value2" :step="10" show-stops />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+
+.slider-demo-block .demonstration {
+  flex: 1;
+  margin-bottom: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 44px;
+  color: var(--el-text-color-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slider-demo-block .demonstration + .el-slider {
+  flex: 0 0 70%;
+}
+</style>

src/views/components/slider/components/Vertical.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" vertical height="200px" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Base } from "./Base.vue";
+export { default as Step } from "./Step.vue";
+export { default as Size } from "./Size.vue";
+export { default as Input } from "./Input.vue";
+export { default as Range } from "./Range.vue";
+export { default as Marks } from "./Marks.vue";
+export { default as Vertical } from "./Vertical.vue";
+export { default as Placement } from "./Placement.vue";

src/views/components/slider/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  Base,
+  Step,
+  Input,
+  Size,
+  Placement,
+  Range,
+  Vertical,
+  Marks
+} from "./components";
+
+defineOptions({
+  name: "PureSlider"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">滑块</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/slider/index.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/slider/index.vue
+        </el-link>
+      </div>
+    </template>
+    <p class="mb-2">基础用法</p>
+    <Base />
+    <el-divider />
+    <p class="mb-2">离散值</p>
+    <Step />
+    <el-divider />
+    <p class="mb-2">带有输入框的滑块</p>
+    <Input />
+    <el-divider />
+    <p class="mb-2">不同尺寸</p>
+    <Size />
+    <el-divider />
+    <p class="mb-2">位置</p>
+    <Placement />
+    <el-divider />
+    <p class="mb-2">范围选择</p>
+    <Range />
+    <el-divider />
+    <p class="mb-2">垂直模式</p>
+    <Vertical />
+    <el-divider />
+    <p class="mb-2">显示标记</p>
+    <Marks class="mb-6" />
+  </el-card>
+</template>

src/views/components/text.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import dayjs from "dayjs";
 import { ref } from "vue";
 import { ReText } from "@/components/ReText";

src/views/components/upload/form.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { reactive, ref } from "vue";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";

src/views/table/virtual/list.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { VxeTableBar } from "@/components/ReVxeTableBar";
 

src/views/table/virtual/pageList.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, reactive, computed } from "vue";
 import { VxeTableBar } from "@/components/ReVxeTableBar";
 

src/views/table/virtual/treeList.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import treeList from "./tree.json";
 import { VxeTableBar } from "@/components/ReVxeTableBar";

src/views/vue-flow/layouting/animationEdge.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, nextTick, ref, toRef, watch } from "vue";
 import { TransitionPresets, executeTransition } from "@vueuse/core";
 import {

src/views/vue-flow/layouting/icon.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   name: {
     type: String,

src/views/vue-flow/layouting/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import Icon from "./icon.vue";

src/views/vue-flow/layouting/processNode.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { toRef } from "vue";
 import { Handle, useHandleConnections } from "@vue-flow/core";
 

tsconfig.json

@@ -4,10 +4,11 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "strict": false,
+    "strictFunctionTypes": false,
+    "noImplicitThis": true,
     "jsx": "preserve",
     "importHelpers": true,
     "experimentalDecorators": true,
-    "strictFunctionTypes": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "isolatedModules": true,

types/global-components.d.ts

@@ -120,6 +120,7 @@ declare module "vue" {
   }
 
   interface ComponentCustomProperties {
+    $storage: ResponsiveStorage;
     $message: (typeof import("element-plus"))["ElMessage"];
     $notify: (typeof import("element-plus"))["ElNotification"];
     $msgbox: (typeof import("element-plus"))["ElMessageBox"];