perf: 更干净整洁的项目配置右侧弹出面板 (#841)

src/components/ReCropper/src/circled.css

@@ -1,7 +1,5 @@
-@import "cropperjs/dist/cropper.css";
-@import "tippy.js/dist/tippy.css";
 @import "tippy.js/themes/light.css";
-@import "tippy.js/animations/perspective.css";
+@import "cropperjs/dist/cropper.css";
 
 .re-circled {
   .cropper-view-box,

src/components/ReCropper/src/index.tsx

@@ -1,10 +1,10 @@
 import "./circled.css";
 import Cropper from "cropperjs";
+import { useTippy } from "vue-tippy";
 import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
-import { useTippy, directive as tippy } from "vue-tippy";
 import { delay, debounce, isArray, downloadByBase64 } from "@pureadmin/utils";
 import {
   ref,
@@ -233,7 +233,6 @@ export default defineComponent({
 
     const menuContent = defineComponent({
       directives: {
-        tippy,
         longpress
       },
       setup() {

src/components/ReIcon/src/hooks.ts

@@ -33,7 +33,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
     });
   } else if (typeof icon === "function" || typeof icon?.render === "function") {
     // svg
-    return icon;
+    return h(icon, { ...attrs });
   } else if (typeof icon === "object") {
     return defineComponent({
       name: "OfflineIcon",

src/components/ReIcon/src/types.ts

@@ -13,7 +13,8 @@ export interface iconType {
   align?: string;
   onLoad?: Function;
   includes?: Function;
-
-  //  all icon
+  // svg 需要什么SVG属性自行添加
+  fill?: string;
+  // all icon
   style?: object;
 }

src/components/ReSegmented/src/index.css

@@ -6,7 +6,6 @@
   color: rgba(0, 0, 0, 0.65);
   background-color: rgb(0 0 0 / 4%);
   border-radius: 2px;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .pure-segmented-group {
@@ -43,7 +42,7 @@
   text-align: center;
   cursor: pointer;
   border-radius: 4px;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .pure-segmented-item > div {

src/components/ReSegmented/src/index.tsx

@@ -121,7 +121,11 @@ export default defineComponent({
                   class="pure-segmented-item-icon"
                   style={{ marginRight: option.label ? "6px" : 0 }}
                 >
-                  {h(useRenderIcon(option.icon))}
+                  {h(
+                    useRenderIcon(option.icon, {
+                      ...option?.iconAttrs
+                    })
+                  )}
                 </span>
               ) : null}
               {option.label ? (

src/components/ReSegmented/src/type.ts

@@ -1,4 +1,5 @@
 import type { VNode, Component } from "vue";
+import type { iconType } from "@/components/ReIcon/src/types.ts";
 
 export interface OptionsType {
   /** 文字 */
@@ -8,6 +9,8 @@ export interface OptionsType {
    * @see {@link 用法参考 https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
    */
   icon?: string | Component;
+  /** 图标属性、样式配置 */
+  iconAttrs?: iconType;
   /** 值 */
   value?: string | number;
   /** 是否禁用 */