Merge branch 'main' into pages

locales/en.yaml

@@ -108,6 +108,7 @@ menus:
   pureTypeit: Typeit
   pureJsonEditor: JSON Editor
   pureColorPicker: Color Picker
+  pureColorPickerPanel: Color PickerPanel
   pureDatePicker: Date Picker
   pureDateTimePicker: DateTimePicker
   pureTimePicker: TimePicker

locales/zh-CN.yaml

@@ -108,6 +108,7 @@ menus:
   pureTypeit: 打字机
   pureJsonEditor: JSON编辑器
   pureColorPicker: 颜色选择器
+  pureColorPickerPanel: 颜色选择器面板
   pureDatePicker: 日期选择器
   pureDateTimePicker: 日期时间选择器
   pureTimePicker: 时间选择器

src/plugins/elementPlus.ts

@@ -3,15 +3,13 @@ import type { App, Component } from "vue";
 import {
   /**
    * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
-   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L116-L226
    * */
   ElAffix,
   ElAlert,
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -32,6 +30,7 @@ import {
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -40,6 +39,7 @@ import {
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -56,6 +56,7 @@ import {
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -107,17 +108,22 @@ import {
   ElWatermark,
   ElTour,
   ElTourStep,
+  ElAnchor,
+  ElAnchorLink,
   ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel,
   /**
    * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
    * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
    * */
-  ElLoading, // v-loading 指令
   ElInfiniteScroll, // v-infinite-scroll 指令
-  ElPopoverDirective, // v-popover 指令
+  ElLoading, // v-loading 指令
   ElMessage, // $message 全局属性对象globalProperties
   ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
-  ElNotification // $notify 全局属性对象globalProperties
+  ElNotification, // $notify 全局属性对象globalProperties
+  ElPopoverDirective // v-popover 指令
 } from "element-plus";
 
 const components = [
@@ -126,8 +132,6 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -148,6 +152,7 @@ const components = [
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -156,6 +161,7 @@ const components = [
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -172,6 +178,7 @@ const components = [
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -223,16 +230,21 @@ const components = [
   ElWatermark,
   ElTour,
   ElTourStep,
-  ElSegmented
+  ElAnchor,
+  ElAnchorLink,
+  ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel
 ];
 
 const plugins = [
-  ElLoading,
   ElInfiniteScroll,
-  ElPopoverDirective,
+  ElLoading,
   ElMessage,
   ElMessageBox,
-  ElNotification
+  ElNotification,
+  ElPopoverDirective
 ];
 
 /** 按需引入`element-plus` */

src/router/modules/components.ts

@@ -119,8 +119,7 @@ export default {
       name: "PureSlider",
       component: () => import("@/views/components/slider/index.vue"),
       meta: {
-        title: $t("menus.pureSlider"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSlider")
       }
     },
     {
@@ -195,6 +194,15 @@ export default {
         title: $t("menus.pureColorPicker")
       }
     },
+    {
+      path: "/components/color-picker-panel",
+      name: "ColorPickerPanel",
+      component: () => import("@/views/components/color-picker-panel.vue"),
+      meta: {
+        title: $t("menus.pureColorPickerPanel"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/components/selector",
       name: "Selector",

src/views/components/color-picker-panel.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ColorPickerPanel"
+});
+
+const disabled = ref(false);
+const color = ref("rgba(255, 69, 0, 0.68)");
+const predefineColors = [
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker-panel.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器面板
+          </el-link>
+          <el-radio-group v-model="disabled">
+            <el-radio :value="false">启用</el-radio>
+            <el-radio :value="true">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker-panel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker-panel.vue
+      </el-link>
+    </template>
+
+    <div class="mb-2">选择透明度、预定义颜色、无边框</div>
+    <el-color-picker-panel
+      v-model="color"
+      show-alpha
+      :border="false"
+      :disabled="disabled"
+      :predefine="predefineColors"
+    />
+    <el-divider />
+  </el-card>
+</template>