hy-dispatch-ui-v3 0.1.0 → 0.1.2

package/es/style/index.scss

@@ -1,6 +1,43 @@
+@use './element/index.scss';
 @use './theme.scss';
 // @use './style/tailwind.scss';
 
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+video {
+  width: 100%;
+  height: 100%;
+}
+.svgBox {
+  width: 16px;
+  height: 16px;
+}
+
+.drawer_box {
+  height: 92% !important;
+  top: 3% !important;
+  border-radius: 10px 0 0 10px;
+  border: 4px solid var(--hy-main);
+  border-right: 0;
+}
+.clickBox {
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+.clickBox:active {
+  opacity: 0.6;
+}
+
 .clickBox {
   position: relative;
   z-index: 2;

package/es/style/theme.scss

@@ -1,123 +1,21 @@
 :root {
-  --basics-size: 12px;
-  --theme: #2df2ff; // 主视觉配色
-  --themev02: #1f596e;
-  --theme-05: rgba(45, 242, 255, 0.5); // #2DF2FF
-  --theme-02: rgba(45, 242, 255, 0.2); // #2DF2FF
-  --theme-00: rgba(45, 242, 255, 0); // #2DF2FF
-
-  --add: #2ce898; // 新增
-  --success: #2ce898; // 成功
-  --success-05: rgba(44, 232, 152, 0.5); // #2DF2FF
-  --success-02: rgba(44, 232, 152, 0.2); // #2DF2FF
-  --info: #909399; // 灰色
-  --info-05: rgba(144, 147, 153, 0.2); // #2DF2FF
-  --warning: #f8a62d; // 警告
-  --warning-05: rgba(248, 166, 45, 0.5); // 警告
-  --warning-02: rgba(248, 166, 45, 0.2); // 警告
-
-  --danger: #c92525; // 删除
-  --dangerv2: #f56c6c; // 删除
-  --dangerv2-05: rgba(245, 108, 108, 0.5); // 删除
-  --dangerv2-02: rgba(245, 108, 108, 0.2); // 删除
-
-  --function: #2df2ff; // 功能色
-  --main: #fff; // 字体主色
-  --auxiliary: #5e9db4; // 字体辅助色
-  --auxiliary-05: #5e9db480; // 字体辅助色
-  --auxiliaryv2: #fff; // 字体辅助色
-
-  --prohibit: rgba(255, 255, 255, 0.2); // 禁止选择
-
-  --background-gradient: linear-gradient(
-    180deg,
-    #132339 0%,
-    #147c9e 100%
-  ); // 背景渐变色
-  --background-gradientV2: linear-gradient(
-    180deg,
-    #0ea0bb 0%,
-    var(--backgroundv2) 100%
-  ); // 背景渐变色
-  --background-gradientV3: linear-gradient(
-    270deg,
-    #3d6286 0%,
-    #1c334a 100%,
-    #2a4968 100%
-  ); // 背景渐变色
-  --background_mask: linear-gradient(
-    180deg,
-    rgba(14, 24, 49, 0.4) 0%,
-    rgba(0, 3, 9, 0.5) 100%
-  ); // 蒙版
-  /* 辅助线条 */
-  --border-auxiliary: #31546b;
-
+  --hy-theme: 45, 242, 255; // 主视觉配色
+  --hy-add: 44, 232, 152; // 新增
+  --hy-success: 44, 232, 152; // 成功
+  --hy-success-2: 44, 232, 152; // 成功
+  --hy-info: 144, 147, 153; // 灰色
+  --hy-warning: 248, 166, 45; // 警告
+  --hy-danger: 201, 37, 37; // 删除
+  --hy-danger-2: 245, 108, 108; // 删除
+  --hy-function: 45, 242, 255; // 功能色
+  --hy-main: 255, 255, 255; // 字体主色
+  --hy-auxiliary: 94, 157, 180; // 字体辅助色
+  --hy-auxiliary-2: 255, 255, 255; // 字体辅助色
   /* 页面颜色 */
-  --background: #0e1525; // 页面黑色
-  --background-05: rgba(14, 21, 37, 0.5); // 页面黑色
-
-  --backgroundv2: #1c334a; // 页面第二层
-  --backgroundv2-05: rgba(28, 51, 74, 0.5); // 页面第二层
-
-  --backgroundv3: #305272; // 页面第三层
-  --backgroundv3-05: rgba(48, 82, 114, 0.5); // 页面第三层
-
-  --backgroundv4: #10263b; // 斑马纹备用色
-  --backgroundv4-05: rgba(16, 38, 59, 0.5); // 斑马纹备用色
-
-  --border: #365d84;
-  --border-radius: 12px; // 圆角角度
-  --box-shadow: 0 0 4px 2px transparent; // 投影
-
-  /* 弹窗页面*/
-  --dialog-background: #0d1a2a; // 弹窗背景色页面第一层
-  --dialog-backgroundv2: #1c334a; // 弹窗背景色页面第二层
-  --dialog-backgroundv3: #305272; // 弹窗背景色页面第三层
-  --dialog-border: #365d84; // 边框样式
-  --dialog-border-radius: 8px; // 圆角角度
-  --dialog-box-shadow: 0 0 10px 4px transparent; // 投影
-
-  /*input */
-  --input-background: #1c334a;
-  --input-border: #365d84;
-  --input-button: #307492;
-  --input-placeholder: rgba(139, 229, 252, 0.4);
-  /*input 深色 */
-  --input-background-darkColor: #1c334a;
-  --input-border-darkColor: #365d84;
-  --input-button-darkColor: #307492;
-  --input-placeholder-darkColor: rgba(139, 229, 252, 0.4);
-
-  /* ============= ============= ============= ============= ============= ============= =============*/
-  --select-color: var(--theme);
-  --main-select-color: var(--theme);
-  --main-select-color-05: var(--theme-05);
-  --tableBackgroundColor: var(--background);
-  --main-color: var(--main);
-  --auxiliary-color: var(--auxiliary);
-  --dialog-background-darkColor: var(--dialog-background);
-  /* 背景 */
-  --background-main-color: var(--backgroundv2);
-  --background-auxiliary-color: var(--backgroundv3);
-  --item-background-main-color: var(--backgroundv2);
-  --item-background-auxiliary-color: var(--backgroundv3);
-  --item-background-auxiliary-color-05: var(--theme-05);
-  /* 字体 */
-  --fontSize-main-color: var(--main);
-  --fontSize-auxiliary-color: var(--auxiliary);
-  /* 边框 */
-  --border-main-color: var(--theme);
-  --border-auxiliary-color: transparent;
-  /* 下面因为根据页面微调样式，命名方式 文件名或者功能名字-class名-用的位置-用状态 */
-  --department-centerBox-background: #24354e;
-  /* app */
-  --app-background-color: var(--background);
-  /* 表格按钮 */
-  --iconBox-iconBox-background: var(--backgroundv3);
-  /* 自定义表格 */
-  --customTable-background-select: #3e536f;
-  --customTable-border-select: #3e536f;
-  /* 任务 */
-  --button-background: #24354e;
+  --hy-background: 14, 21, 37; // 页面黑色
+  --hy-background-2: 28, 51, 74; // 页面第二层
+  --hy-background-2-50: 24, 40, 60; // 页面第二层50%透明度
+  --hy-background-3: 48, 82, 114; // 页面第三层
+  --hy-background-4: 16, 38, 59; // 斑马纹备用色
+  --hy-border: 54, 93, 132;
 }

package/es/utils/adaptive.mjs

@@ -27,4 +27,3 @@ function parseRem(res) {
 }
 
 export { parseRem, pxTorem, remToPx, vwToPx };
-//# sourceMappingURL=adaptive.mjs.map

package/es/utils/bus.mjs

@@ -3,4 +3,3 @@ import mitt from 'mitt';
 const bus = mitt();
 
 export { bus };
-//# sourceMappingURL=bus.mjs.map

package/es/utils/crypto.mjs

@@ -18,4 +18,3 @@ function generateRandomCode(number = 13) {
 }
 
 export { base64Decrypt, encryptToBase64, generateRandomCode };
-//# sourceMappingURL=crypto.mjs.map

package/es/utils/date.mjs

@@ -22,4 +22,3 @@ function getDefaultValueFormatByType(type = "date") {
 }
 
 export { getDefaultValueFormatByType };
-//# sourceMappingURL=date.mjs.map

package/es/utils/handler.mjs

@@ -80,4 +80,3 @@ const withInstall = (comp) => {
 };
 
 export { cloneDeep, createUniqueId, funRunHandler, mergeDeep, withInstall };
-//# sourceMappingURL=handler.mjs.map

package/es/utils/index.mjs

@@ -4,4 +4,3 @@ export { base64Decrypt, encryptToBase64, generateRandomCode } from './crypto.mjs
 export { isArray, isBoolean, isEmpty, isFunction, isNull, isNumber, isObject, isOverflowing, isString, isSymbol, isUndefined, isVueProxy } from './is.mjs';
 export { cloneDeep, createUniqueId, funRunHandler, mergeDeep, withInstall } from './handler.mjs';
 export { getDefaultValueFormatByType } from './date.mjs';
-//# sourceMappingURL=index.mjs.map

package/es/utils/is.mjs

@@ -16,4 +16,3 @@ const isVueProxy = (e) => {
 };
 
 export { isArray, isBoolean, isEmpty, isFunction, isNull, isNumber, isObject, isOverflowing, isString, isSymbol, isUndefined, isVueProxy };
-//# sourceMappingURL=is.mjs.map

package/es/version.mjs

@@ -1,4 +1,3 @@
-const version = "0.1.0";
+const version = "0.1.2";
 
 export { version };
-//# sourceMappingURL=version.mjs.map

package/lib/bussiness/index.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.js.map

package/lib/components/appButton/appButton.vue.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var index = require('../appIcon/index.js');
+
+import "./style/appButton.scss";
+
+const _sfc_main = {
+  __name: "appButton",
+  props: {
+    type: {
+      type: String,
+      default: "default"
+      // default 默认 primary 亮色 success 添加 danger 删除
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      size: "default"
+      // default、small、large
+    },
+    svgName: {
+      type: String
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const typeObj = {
+      default: "button_default",
+      primary: "button_function",
+      success: "button_addTo",
+      danger: "button_delete"
+    };
+    const emit = __emit;
+    const handleClick = (event) => {
+      if (props.disabled || props.loading) return;
+      emit("click", event);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("button", {
+        type: "button",
+        disabled: __props.disabled,
+        class: vue.normalizeClass(["hy-button p-[2px] box-border rounded-md group", [
+          typeObj[props.type],
+          {
+            "hy-button--large": __props.size === "large",
+            "hy-button--small": __props.size === "small",
+            "is-disabled": __props.disabled,
+            "is-loading": __props.loading,
+            clickBox: !__props.disabled && !__props.loading
+          }
+        ]]),
+        onClick: handleClick
+      }, [
+        vue.createCommentVNode(" \u7B2C\u4E8C\u5C42\u5BB9\u5668 b "),
+        vue.createElementVNode("div", { class: "hy-button__border w-full h-full flex items-center justify-center p-[1px] box-border rounded-[4px]" }, [
+          vue.createCommentVNode(" \u7B2C\u4E09\u5C42\u5BB9\u5668 d "),
+          vue.createElementVNode("div", { class: "hy-button__inner w-full h-full flex items-center justify-center relative rounded-[4px]" }, [
+            vue.createElementVNode("div", { class: "hy-button__text relative z-[1] w-full h-full flex items-center justify-center" }, [
+              vue.renderSlot(_ctx.$slots, "content", {}, () => [
+                vue.createElementVNode(
+                  "div",
+                  {
+                    class: vue.normalizeClass(["flex items-center text-main", {
+                      "px-3": !__props.expand,
+                      "pl-3 pr-1.5": __props.expand
+                    }])
+                  },
+                  [
+                    !__props.loading ? vue.renderSlot(_ctx.$slots, "svg", { key: 0 }, () => [
+                      __props.svgName ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppIcon), {
+                        key: 0,
+                        "svg-name": __props.svgName,
+                        "class-name": "!w-3 !h-3 text-main mr-2"
+                      }, null, 8, ["svg-name"])) : vue.createCommentVNode("v-if", true)
+                    ]) : (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                      key: 1,
+                      color: "rgb(var(--hy-main))",
+                      class: "is-loading mr-2"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.Loading))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })),
+                    vue.renderSlot(_ctx.$slots, "default")
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ]),
+              __props.expand ? (vue.openBlock(), vue.createElementBlock(
+                vue.Fragment,
+                { key: 0 },
+                [
+                  vue.createElementVNode("div", { class: "w-px h-full bg-success/50" }),
+                  vue.createElementVNode("div", { class: "w-[30px] flex items-center justify-center" }, [
+                    vue.createVNode(vue.unref(elementPlus.ElIcon), { color: "rgb(var(--hy-main))" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.ArrowDown))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ])
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : vue.createCommentVNode("v-if", true)
+            ]),
+            vue.createCommentVNode(" \u6E10\u53D8\u906E\u7F69 e "),
+            vue.createElementVNode("div", { class: "hy-button__mask w-full h-full absolute blur-[1px]" })
+          ])
+        ])
+      ], 10, ["disabled"]);
+    };
+  }
+};
+
+exports.default = _sfc_main;

package/lib/components/appButton/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appButton = require('./appButton.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppButton = handler.withInstall(appButton.default);
+
+exports.AppButton = AppButton;
+exports.default = AppButton;

package/lib/components/appButton/style/appButton.scss

@@ -0,0 +1,289 @@
+.hy-button {
+  height: 32px;
+  border: 0;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  box-sizing: border-box;
+  white-space: nowrap;
+  font-size: 14px;
+
+  &:disabled,
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  &.is-loading {
+    cursor: default;
+  }
+  &.hy-button--large {
+    height: 40px;
+  }
+  &.hy-button--small {
+    height: 24px;
+    font-size: 12px;
+  }
+
+  & + & {
+    margin-left: 16px;
+  }
+}
+
+.button_default {
+  background: rgba(94, 157, 180, 0.32);
+
+  .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(94, 157, 180, 0.4) 0%,
+      rgba(94, 157, 180, 1) 50%,
+      rgba(94, 157, 180, 0.4) 100%
+    );
+  }
+
+  .hy-button__inner {
+    background: #003a48;
+    box-shadow:
+      inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
+      inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
+  }
+
+  .hy-button__text {
+    color: #fff;
+  }
+
+  .hy-button__mask {
+    background: radial-gradient(
+      ellipse at center bottom,
+      #7ebbd2 0%,
+      rgb(17, 108, 114) 30%,
+      transparent 60%
+    );
+  }
+
+  &:hover .hy-button__inner {
+    box-shadow:
+      inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
+      inset 0 0 2px 0 rgba(0, 147, 157, 0.5),
+      inset 0 0 5px 1px rgba(0, 138, 157, 0.5),
+      inset 0 0 2px 0 rgba(0, 147, 157, 0.5);
+  }
+
+  &:disabled .hy-button__border,
+  &.is-disabled .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(94, 157, 180, 0.18) 0%,
+      rgba(94, 157, 180, 0.42) 50%,
+      rgba(94, 157, 180, 0.18) 100%
+    );
+  }
+
+  &:disabled .hy-button__inner,
+  &.is-disabled .hy-button__inner {
+    background: #3e5a64;
+    box-shadow:
+      inset 0 0 4px 1px rgba(0, 138, 157, 0.2),
+      inset 0 0 2px 0 rgba(0, 147, 157, 0.16);
+  }
+
+  &:disabled .hy-button__text,
+  &.is-disabled .hy-button__text {
+    color: rgba(255, 255, 255, 0.68);
+  }
+}
+
+.button_function {
+  background: rgba(45, 242, 255, 0.32);
+
+  .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(45, 242, 255, 0.4) 0%,
+      rgba(45, 242, 255, 1) 50%,
+      rgba(45, 242, 255, 0.4) 100%
+    );
+  }
+
+  .hy-button__inner {
+    background: #003a48;
+    box-shadow:
+      inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
+      inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
+  }
+
+  .hy-button__text {
+    color: #fff;
+  }
+
+  .hy-button__mask {
+    background: radial-gradient(
+      ellipse at center bottom,
+      #2df2ff 0%,
+      #1798a1 30%,
+      transparent 60%
+    );
+  }
+
+  &:hover .hy-button__inner {
+    box-shadow:
+      inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
+      inset 0 0 2px 0 rgba(159, 248, 255, 0.5),
+      inset 0 0 5px 1px rgba(97, 248, 255, 0.5),
+      inset 0 0 2px 0 rgba(159, 248, 255, 0.5);
+  }
+
+  &:disabled .hy-button__border,
+  &.is-disabled .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(45, 242, 255, 0.18) 0%,
+      rgba(45, 242, 255, 0.42) 50%,
+      rgba(45, 242, 255, 0.18) 100%
+    );
+  }
+
+  &:disabled .hy-button__inner,
+  &.is-disabled .hy-button__inner {
+    background: #10575c;
+    box-shadow:
+      inset 0 0 4px 1px rgba(97, 248, 255, 0.2),
+      inset 0 0 2px 0 rgba(159, 248, 255, 0.16);
+  }
+
+  &:disabled .hy-button__text,
+  &.is-disabled .hy-button__text {
+    color: rgba(255, 255, 255, 0.68);
+  }
+}
+
+.button_addTo {
+  background: rgba(44, 232, 152, 0.32);
+
+  .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(171, 255, 185, 0.4) 0%,
+      rgba(171, 255, 185, 1) 50%,
+      rgba(171, 255, 185, 0.4) 100%
+    );
+  }
+
+  .hy-button__inner {
+    background: #004823;
+    box-shadow:
+      inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
+      inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
+  }
+
+  .hy-button__text {
+    color: #fff;
+  }
+
+  .hy-button__mask {
+    background: radial-gradient(
+      ellipse at center bottom,
+      #20e080 0%,
+      #109060 30%,
+      transparent 60%
+    );
+  }
+
+  &:hover .hy-button__inner {
+    box-shadow:
+      inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
+      inset 0 0 2px 0 rgba(159, 255, 209, 0.5),
+      inset 0 0 5px 1px rgba(97, 255, 179, 0.5),
+      inset 0 0 2px 0 rgba(159, 255, 209, 0.5);
+  }
+
+  &:disabled .hy-button__border,
+  &.is-disabled .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(171, 255, 185, 0.18) 0%,
+      rgba(171, 255, 185, 0.42) 50%,
+      rgba(171, 255, 185, 0.18) 100%
+    );
+  }
+
+  &:disabled .hy-button__inner,
+  &.is-disabled .hy-button__inner {
+    background: #1d3d2d;
+    box-shadow:
+      inset 0 0 4px 1px rgba(97, 255, 179, 0.2),
+      inset 0 0 2px 0 rgba(159, 255, 209, 0.16);
+  }
+
+  &:disabled .hy-button__text,
+  &.is-disabled .hy-button__text {
+    color: rgba(255, 255, 255, 0.68);
+  }
+}
+
+.button_delete {
+  background: rgba(255, 77, 77, 0.32);
+
+  .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 77, 77, 0.4) 0%,
+      rgba(255, 77, 77, 1) 50%,
+      rgba(255, 77, 77, 0.4) 100%
+    );
+  }
+
+  .hy-button__inner {
+    background: #4f0000;
+    box-shadow:
+      inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
+      inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
+  }
+
+  .hy-button__text {
+    color: #fff;
+  }
+
+  .hy-button__mask {
+    background: radial-gradient(
+      ellipse at center bottom,
+      #ff0000 0%,
+      #b41414 30%,
+      transparent 60%
+    );
+  }
+
+  &:hover .hy-button__inner {
+    box-shadow:
+      inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
+      inset 0 0 2px 0 rgba(255, 159, 159, 0.5),
+      inset 0 0 5px 1px rgba(255, 97, 97, 0.5),
+      inset 0 0 2px 0 rgba(255, 159, 159, 0.5);
+  }
+
+  &:disabled .hy-button__border,
+  &.is-disabled .hy-button__border {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 77, 77, 0.18) 0%,
+      rgba(255, 77, 77, 0.42) 50%,
+      rgba(255, 77, 77, 0.18) 100%
+    );
+  }
+
+  &:disabled .hy-button__inner,
+  &.is-disabled .hy-button__inner {
+    background: #4b0c0c;
+    box-shadow:
+      inset 0 0 4px 1px rgba(255, 97, 97, 0.2),
+      inset 0 0 2px 0 rgba(255, 159, 159, 0.16);
+  }
+
+  &:disabled .hy-button__text,
+  &.is-disabled .hy-button__text {
+    color: rgba(255, 255, 255, 0.68);
+  }
+}