From bbdd44a9178be01a5ce2b0371b1cac47e3ee22b2 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 19 Dec 2024 17:29:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=BB=91=E5=9D=97?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                               |  1 +
 locales/zh-CN.yaml                            |  1 +
 src/components/ReText/src/index.vue           |  2 +-
 src/layout/components/lay-footer/index.vue    |  2 +-
 src/router/modules/components.ts              | 16 +++--
 .../components/slider/components/Base.vue     | 64 +++++++++++++++++++
 .../components/slider/components/Input.vue    | 24 +++++++
 .../components/slider/components/Marks.vue    | 43 +++++++++++++
 .../slider/components/Placement.vue           | 40 ++++++++++++
 .../components/slider/components/Range.vue    | 24 +++++++
 .../components/slider/components/Size.vue     | 23 +++++++
 .../components/slider/components/Step.vue     | 45 +++++++++++++
 .../components/slider/components/Vertical.vue | 24 +++++++
 .../components/slider/components/index.ts     |  8 +++
 src/views/components/slider/index.vue         | 56 ++++++++++++++++
 src/views/components/text.vue                 |  2 +-
 src/views/components/upload/form.vue          |  2 +-
 src/views/table/virtual/list.vue              |  2 +-
 src/views/table/virtual/pageList.vue          |  2 +-
 src/views/table/virtual/treeList.vue          |  2 +-
 .../vue-flow/layouting/animationEdge.vue      |  2 +-
 src/views/vue-flow/layouting/icon.vue         |  2 +-
 src/views/vue-flow/layouting/index.vue        |  2 +-
 src/views/vue-flow/layouting/processNode.vue  |  2 +-
 24 files changed, 375 insertions(+), 16 deletions(-)
 create mode 100644 src/views/components/slider/components/Base.vue
 create mode 100644 src/views/components/slider/components/Input.vue
 create mode 100644 src/views/components/slider/components/Marks.vue
 create mode 100644 src/views/components/slider/components/Placement.vue
 create mode 100644 src/views/components/slider/components/Range.vue
 create mode 100644 src/views/components/slider/components/Size.vue
 create mode 100644 src/views/components/slider/components/Step.vue
 create mode 100644 src/views/components/slider/components/Vertical.vue
 create mode 100644 src/views/components/slider/components/index.ts
 create mode 100644 src/views/components/slider/index.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 2aa5a24cf5..2f3b01ef6f 100644
--- a/locales/en.yaml
+++ b/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
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 0287a09558..7b039f33ec 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -92,6 +92,7 @@ menus:
   pureDraggable: 拖拽
   pureSplitPane: 切割面板
   pureText: 文本省略
+  pureSlider: 滑块
   pureElButton: 按钮
   pureCheckButton: 可选按钮
   pureButton: 按钮动效
diff --git a/src/components/ReText/src/index.vue b/src/components/ReText/src/index.vue
index ecaebdbb8e..eddf70ba18 100644
--- a/src/components/ReText/src/index.vue
+++ b/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";
 
diff --git a/src/layout/components/lay-footer/index.vue b/src/layout/components/lay-footer/index.vue
index 7763134300..b265daf738 100644
--- a/src/layout/components/lay-footer/index.vue
+++ b/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");
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 053840169b..386072d793 100644
--- a/src/router/modules/components.ts
+++ b/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")
       }
     },
     {
diff --git a/src/views/components/slider/components/Base.vue b/src/views/components/slider/components/Base.vue
new file mode 100644
index 0000000000..480802087d
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Input.vue b/src/views/components/slider/components/Input.vue
new file mode 100644
index 0000000000..78928d3ca8
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Marks.vue b/src/views/components/slider/components/Marks.vue
new file mode 100644
index 0000000000..b3867296e1
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Placement.vue b/src/views/components/slider/components/Placement.vue
new file mode 100644
index 0000000000..5d09999294
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Range.vue b/src/views/components/slider/components/Range.vue
new file mode 100644
index 0000000000..bf17ea3a7c
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Size.vue b/src/views/components/slider/components/Size.vue
new file mode 100644
index 0000000000..c31c382f4c
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Step.vue b/src/views/components/slider/components/Step.vue
new file mode 100644
index 0000000000..3783af8e25
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/Vertical.vue b/src/views/components/slider/components/Vertical.vue
new file mode 100644
index 0000000000..c5e11922bf
--- /dev/null
+++ b/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>
diff --git a/src/views/components/slider/components/index.ts b/src/views/components/slider/components/index.ts
new file mode 100644
index 0000000000..ad8ac28a4b
--- /dev/null
+++ b/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";
diff --git a/src/views/components/slider/index.vue b/src/views/components/slider/index.vue
new file mode 100644
index 0000000000..8ab1134cde
--- /dev/null
+++ b/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>
diff --git a/src/views/components/text.vue b/src/views/components/text.vue
index 20f609da5e..fa4f4236c3 100644
--- a/src/views/components/text.vue
+++ b/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";
diff --git a/src/views/components/upload/form.vue b/src/views/components/upload/form.vue
index 070233ea74..bfa156370c 100644
--- a/src/views/components/upload/form.vue
+++ b/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";
diff --git a/src/views/table/virtual/list.vue b/src/views/table/virtual/list.vue
index 3316a747d1..cc4b480ec4 100644
--- a/src/views/table/virtual/list.vue
+++ b/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";
 
diff --git a/src/views/table/virtual/pageList.vue b/src/views/table/virtual/pageList.vue
index 21a926f5ac..d5a7391717 100644
--- a/src/views/table/virtual/pageList.vue
+++ b/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";
 
diff --git a/src/views/table/virtual/treeList.vue b/src/views/table/virtual/treeList.vue
index 696f1e0edc..119028fa92 100644
--- a/src/views/table/virtual/treeList.vue
+++ b/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";
diff --git a/src/views/vue-flow/layouting/animationEdge.vue b/src/views/vue-flow/layouting/animationEdge.vue
index 38c06520f8..a86b0530fd 100644
--- a/src/views/vue-flow/layouting/animationEdge.vue
+++ b/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 {
diff --git a/src/views/vue-flow/layouting/icon.vue b/src/views/vue-flow/layouting/icon.vue
index 5e8c059531..01c81d167b 100644
--- a/src/views/vue-flow/layouting/icon.vue
+++ b/src/views/vue-flow/layouting/icon.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   name: {
     type: String,
diff --git a/src/views/vue-flow/layouting/index.vue b/src/views/vue-flow/layouting/index.vue
index a88f213a94..fa4941b356 100644
--- a/src/views/vue-flow/layouting/index.vue
+++ b/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";
diff --git a/src/views/vue-flow/layouting/processNode.vue b/src/views/vue-flow/layouting/processNode.vue
index 425952a8ef..17bce31eb1 100644
--- a/src/views/vue-flow/layouting/processNode.vue
+++ b/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";