leisure-core 1.0.2 → 1.0.4

package/le-theme/common/vars.css

@@ -0,0 +1,131 @@
+/* =========================================================================
+ * leisure-core 主题 CSS 变量层
+ * -------------------------------------------------------------------------
+ * 设计要点:
+ * 1. 全部使用 CSS Custom Properties,运行时可通过 LeTheme.set(name) 一键切换
+ * 2. :root 为默认皮肤(default),其它皮肤由 LeTheme 在 <html> 上覆盖变量
+ * 3. 语义化命名:--le-{role}-{state},避免直接用色值名
+ * 4. 同时覆盖 Element UI 的 primary 色族,使 type="primary" 按钮可换肤
+ * ======================================================================= */
+
+:root {
+  /* 品牌色族 */
+  --le-color-primary: #409eff;
+  --le-color-primary-2: #2563eb;
+  --le-color-primary-light: #60a5fa;
+  --le-color-primary-light-1: #53a8ff;
+  --le-color-primary-light-9: #ecf5ff;
+  --le-color-primary-shadow: rgba(64, 158, 255, 0.25);
+  --le-color-primary-shadow-strong: rgba(64, 158, 255, 0.4);
+  --le-color-primary-shadow-soft: rgba(64, 158, 255, 0.1);
+
+  /* 功能色 */
+  --le-color-success: #10b981;
+  --le-color-success-2: #059669;
+  --le-color-success-shadow: rgba(16, 185, 129, 0.4);
+
+  /* 文本 */
+  --le-color-text-strong: #1e293b;
+  --le-color-text-regular: #64748b;
+  --le-color-text-muted: #94a3b8;
+  --le-color-text-form: #475569;
+  --le-color-input-text: #334155;
+  --le-color-on-dark: #f1f5f9;
+
+  /* 边框 */
+  --le-color-border: #e2e8f0;
+  --le-color-border-hover: #cbd5e1;
+  --le-color-border-dark: #475569;
+
+  /* 容器/卡片 */
+  --le-color-card-bg: rgba(255, 255, 255, 0.98);
+  --le-color-card-border: rgba(255, 255, 255, 0.2);
+  --le-color-card-shadow: rgba(0, 0, 0, 0.1);
+  --le-color-input-bg: #ffffff;
+  --le-color-placeholder: #94a3b8;
+
+  /* 装饰区(left-section 渐变背景) */
+  --le-color-section-bg-from: #f8fafc;
+  --le-color-section-bg-to: #f1f5f9;
+
+  /* le-home 框架色 */
+  --le-color-header-bg: #212121;
+  --le-color-aside-bg: #3a3a3a;
+  --le-color-aside-text: #ffffff;
+  --le-color-aside-active: #ffd04b;
+  --le-color-menu-bg: #3a3a3a;
+  --le-color-aside-handle-hover: rgba(74, 144, 226, 0.2);
+  --le-color-aside-handle-active: rgba(74, 144, 226, 0.4);
+  --le-color-aside-toggle-bg: #2a333a;
+  --le-color-aside-toggle-hover: #ff8e2b;
+  --le-color-contextmenu-bg: #ffffff;
+  --le-color-contextmenu-border: #cccccc;
+  --le-color-contextmenu-text: #333333;
+  --le-color-contextmenu-hover: #f2f2f2;
+  --le-color-contextmenu-shadow: rgba(0, 0, 0, 0.2);
+}
+
+/* =========================================================================
+ * Element UI primary 色族覆盖
+ * 让 .el-button--primary 等组件跟随 --le-color-primary 切换
+ * ======================================================================= */
+.el-button--primary {
+  background-color: var(--le-color-primary);
+  border-color: var(--le-color-primary);
+}
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background-color: var(--le-color-primary-light-1);
+  border-color: var(--le-color-primary-light-1);
+}
+.el-button--primary.is-plain {
+  color: var(--le-color-primary);
+  background-color: var(--le-color-primary-light-9);
+  border-color: var(--le-color-primary-light-1);
+}
+.el-tag--primary {
+  background-color: var(--le-color-primary-light-9);
+  border-color: var(--le-color-primary-light-1);
+  color: var(--le-color-primary);
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: var(--le-color-primary);
+  border-color: var(--le-color-primary);
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--le-color-primary);
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: var(--le-color-primary);
+  border-color: var(--le-color-primary);
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: var(--le-color-primary);
+}
+.el-switch.is-checked .el-switch__core {
+  border-color: var(--le-color-primary);
+  background-color: var(--le-color-primary);
+}
+.el-slider__bar {
+  background-color: var(--le-color-primary);
+}
+.el-slider__button {
+  border-color: var(--le-color-primary);
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: var(--le-color-primary);
+  color: #fff;
+}
+.el-tabs__item.is-active {
+  color: var(--le-color-primary);
+}
+.el-tabs__active-bar {
+  background-color: var(--le-color-primary);
+}
+.el-link--primary {
+  color: var(--le-color-primary);
+}
+.el-loading-spinner .circular .path {
+  stroke: var(--le-color-primary);
+}

package/le-theme/iconfont/iconfont.css

@@ -0,0 +1,125 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3548950 */
+  /* Color fonts */
+  src: 
+       url('iconfont.woff2?t=1673227579566') format('woff2'),
+       url('iconfont.woff?t=1673227579566') format('woff'),
+       url('iconfont.ttf?t=1673227579566') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-cyxiaoshouqushi:before {
+  content: "\e665";
+}
+
+.icon-cyshezhi:before {
+  content: "\e62b";
+}
+
+.icon-cyshujubaobiao:before {
+  content: "\e6ee";
+}
+
+.icon-cypingjia:before {
+  content: "\e60d";
+}
+
+.icon-cy_mendian:before {
+  content: "\e827";
+}
+
+.icon-cyyongjinjisuan:before {
+  content: "\e649";
+}
+
+.icon-cybumen:before {
+  content: "\e6b1";
+}
+
+.icon-cydaoru:before {
+  content: "\e60f";
+}
+
+.icon-cysucaiguanli:before {
+  content: "\e607";
+}
+
+.icon-cypage-management:before {
+  content: "\e651";
+}
+
+.icon-cyyonghu:before {
+  content: "\e60c";
+}
+
+.icon-cypinglun:before {
+  content: "\e69b";
+}
+
+.icon-cyshangpinguanli:before {
+  content: "\e6b0";
+}
+
+.icon-cychengpincangku:before {
+  content: "\e60a";
+}
+
+.icon-cytongjibaobiao:before {
+  content: "\e62a";
+}
+
+.icon-cy-shangpinshuxing-gai-:before {
+  content: "\e675";
+}
+
+.icon-cy-shangpindanwei-gai:before {
+  content: "\e678";
+}
+
+.icon-cychakankucun:before {
+  content: "\e655";
+}
+
+.icon-cyshuxing:before {
+  content: "\e662";
+}
+
+.icon-cydingdan:before {
+  content: "\e98d";
+}
+
+.icon-cywuliu:before {
+  content: "\e999";
+}
+
+.icon-cyrenyuanleixing:before {
+  content: "\e61d";
+}
+
+.icon-cya-ziyuan19:before {
+  content: "\eb24";
+}
+
+.icon-cydengdaitishi:before {
+  content: "\e65c";
+}
+
+.icon-cyhuiyuanguanli:before {
+  content: "\e628";
+}
+
+.icon-cyjiaoseguanli:before {
+  content: "\e641";
+}
+
+.icon-cydanwei:before {
+  content: "\e65e";
+}
+

package/le-theme/index.js

@@ -0,0 +1,189 @@
+import "./common/vars.css";
+
+/**
+ * leisure-core 主题服务
+ *
+ * 用法:
+ *   import { LeTheme } from "leisure-core/le-theme";
+ *   LeTheme.set("dark");               // 一键切换
+ *   LeTheme.register("custom", {...});  // 注册自定义皮肤
+ *   LeTheme.current;                    // 当前皮肤名
+ *
+ * 也可通过 Vue 原型方法访问(已由根 index.js 挂载):
+ *   this.$leTheme.set("dark");
+ */
+
+const STORAGE_KEY = "le-theme";
+
+/**
+ * 预置皮肤:每个皮肤是一组 CSS 变量键值对
+ * 未列出的变量自动回退到 :root 默认值
+ */
+const skins = {
+  default: {
+    // 默认皮肤走 :root,无需覆盖
+  },
+
+  dark: {
+    "--le-color-primary": "#3b82f6",
+    "--le-color-primary-2": "#1d4ed8",
+    "--le-color-primary-light": "#60a5fa",
+    "--le-color-primary-light-1": "#2563eb",
+    "--le-color-primary-light-9": "#1e3a8a",
+    "--le-color-primary-shadow": "rgba(59, 130, 246, 0.25)",
+    "--le-color-primary-shadow-strong": "rgba(59, 130, 246, 0.4)",
+    "--le-color-primary-shadow-soft": "rgba(59, 130, 246, 0.1)",
+
+    "--le-color-text-strong": "#f1f5f9",
+    "--le-color-text-regular": "#94a3b8",
+    "--le-color-text-muted": "#64748b",
+    "--le-color-text-form": "#cbd5e1",
+    "--le-color-input-text": "#f1f5f9",
+    "--le-color-on-dark": "#f1f5f9",
+
+    "--le-color-border": "#475569",
+    "--le-color-border-hover": "#64748b",
+    "--le-color-border-dark": "#334155",
+
+    "--le-color-card-bg": "rgba(30, 41, 59, 0.95)",
+    "--le-color-card-border": "rgba(255, 255, 255, 0.1)",
+    "--le-color-card-shadow": "rgba(0, 0, 0, 0.3)",
+    "--le-color-input-bg": "rgba(15, 23, 42, 0.5)",
+    "--le-color-placeholder": "#64748b",
+
+    "--le-color-section-bg-from": "rgba(30, 41, 59, 0.8)",
+    "--le-color-section-bg-to": "rgba(15, 23, 42, 0.9)",
+
+    "--le-color-header-bg": "#0f172a",
+    "--le-color-aside-bg": "#1e293b",
+    "--le-color-aside-text": "#f1f5f9",
+    "--le-color-aside-active": "#60a5fa",
+    "--le-color-menu-bg": "#1e293b",
+    "--le-color-aside-handle-hover": "rgba(59, 130, 246, 0.3)",
+    "--le-color-aside-handle-active": "rgba(59, 130, 246, 0.5)",
+    "--le-color-aside-toggle-bg": "#334155",
+    "--le-color-aside-toggle-hover": "#3b82f6",
+    "--le-color-contextmenu-bg": "#1e293b",
+    "--le-color-contextmenu-border": "#475569",
+    "--le-color-contextmenu-text": "#e2e8f0",
+    "--le-color-contextmenu-hover": "#334155",
+    "--le-color-contextmenu-shadow": "rgba(0, 0, 0, 0.5)",
+  },
+
+  green: {
+    "--le-color-primary": "#00b96b",
+    "--le-color-primary-2": "#009e5a",
+    "--le-color-primary-light": "#52c995",
+    "--le-color-primary-light-1": "#1cc879",
+    "--le-color-primary-light-9": "#e6f7ec",
+    "--le-color-primary-shadow": "rgba(0, 185, 107, 0.25)",
+    "--le-color-primary-shadow-strong": "rgba(0, 185, 107, 0.4)",
+    "--le-color-primary-shadow-soft": "rgba(0, 185, 107, 0.1)",
+
+    // 2026-08-26:补齐 header/aside 框架色,确保整套换肤一致
+    "--le-color-header-bg": "#14301f",
+    "--le-color-aside-bg": "#1b3d2b",
+    "--le-color-aside-text": "#f1f8f4",
+    "--le-color-aside-active": "#8effb9",
+    "--le-color-menu-bg": "#1b3d2b",
+    "--le-color-aside-handle-hover": "rgba(0, 185, 107, 0.3)",
+    "--le-color-aside-handle-active": "rgba(0, 185, 107, 0.5)",
+    "--le-color-aside-toggle-bg": "#0e2417",
+    "--le-color-aside-toggle-hover": "#00b96b",
+
+    "--le-color-contextmenu-bg": "#1b3d2b",
+    "--le-color-contextmenu-border": "#2f5d42",
+    "--le-color-contextmenu-text": "#e6f7ec",
+    "--le-color-contextmenu-hover": "#2f5d42",
+    "--le-color-contextmenu-shadow": "rgba(0, 0, 0, 0.4)",
+
+    // 文本/容器维持 default 风格
+  },
+};
+
+/**
+ * 应用一套皮肤到 <html>
+ * 先清除上次注入的 le-* 变量,再写入新值
+ */
+function applySkin(vars) {
+  const root = document.documentElement;
+  // 清除上次的覆盖
+  Array.from(root.style).forEach((k) => {
+    if (k.indexOf("--le-") === 0) root.style.removeProperty(k);
+  });
+  // 写入新值
+  Object.keys(vars).forEach((k) => {
+    root.style.setProperty(k, vars[k]);
+  });
+  // 标记当前皮肤,便于 CSS 做 [data-le-theme="dark"] 等条件样式
+  root.setAttribute("data-le-theme", LeTheme.current);
+}
+
+const LeTheme = {
+  /** 所有已注册皮肤名 */
+  skins: Object.keys(skins),
+
+  /** 当前皮肤名 */
+  current: "default",
+
+  /** 上次应用前的变量缓存(供回退) */
+  _applied: {},
+
+  /**
+   * 切换皮肤
+   * @param {string} name 皮肤名,未注册则回退到 default
+   */
+  set(name) {
+    const vars = skins[name] || skins.default;
+    LeTheme.current = skins[name] ? name : "default";
+    LeTheme._applied = vars;
+    applySkin(vars);
+    try {
+      localStorage.setItem(STORAGE_KEY, LeTheme.current);
+    } catch (e) {
+      // 隐私模式或禁用 localStorage 时静默失败
+    }
+    if (typeof window !== "undefined" && window.EventBus) {
+      try {
+        window.EventBus.$emit("le-theme-change", LeTheme.current);
+      } catch (e) {
+        // EventBus 未就绪时静默忽略
+      }
+    }
+    // 2026-08-26:主动派发自定义事件,让 DOM 级的 theme 变化事件监听器(如 el-menu 颜色绑定)能感知变化
+    if (typeof window !== "undefined") {
+      try {
+        window.dispatchEvent(
+          new CustomEvent("le-theme-change", { detail: LeTheme.current }),
+        );
+      } catch (e) {}
+    }
+    return LeTheme.current;
+  },
+
+  /**
+   * 注册自定义皮肤
+   * @param {string} name 皮肤名
+   * @param {Object} vars CSS 变量键值对
+   */
+  register(name, vars) {
+    if (!name || typeof vars !== "object") return;
+    skins[name] = vars;
+    if (LeTheme.skins.indexOf(name) === -1) LeTheme.skins.push(name);
+  },
+
+  /**
+   * 启动时恢复上次皮肤
+   * 通常在 install 流程中自动调用
+   */
+  init() {
+    let saved = "default";
+    try {
+      saved = localStorage.getItem(STORAGE_KEY) || "default";
+    } catch (e) {}
+    LeTheme.set(saved);
+  },
+};
+
+export default LeTheme;
+export { LeTheme };

package/le-theme/pages/index.css

@@ -0,0 +1,15 @@
+html,
+body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.le-table-btn-container {
+    white-space: nowrap;
+    display: inline-block;
+}

package/le-upload/index.js

@@ -0,0 +1,7 @@
+import LeUpload from "./src/main.vue";
+
+LeUpload.install = function (Vue) {
+  Vue.component(LeUpload.name, LeUpload);
+};
+
+export default LeUpload;

package/le-upload/src/main.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="le-upload-container">
+    <el-upload
+      class="upload-demo"
+      action="#"
+      ref="le-upload"
+      :multiple="false"
+      :limit="limit"
+      :accept="accept"
+      :http-request="onHttpRequest"
+      :on-success="onUploadSuccess"
+      :on-remove="onRemove"
+      :on-change="onChange"
+      :on-exceed="onExceed"
+      :on-progress="onDispProgress"
+      :before-upload="onBeforeUpload"
+      :auto-upload="true"
+    >
+      <le-button slot="trigger" size="small" type="primary">{{
+        BtnSeText
+      }}</le-button>
+    </el-upload>
+    <div v-if="showTip" slot="tip" class="el-upload__tip tip">
+      {{ tipText }}
+    </div>
+    <el-progress
+      v-if="showProgress"
+      :percentage="pvalue"
+      :format="format"
+      style="width: 20%"
+    ></el-progress>
+  </div>
+</template>
+<script>
+export default {
+  name: "le-upload",
+  props: {
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    accept: {
+      type: String,
+      default: ".xlsx,.xls",
+    },
+    BtnSeText: {
+      type: String,
+      default: "1.选择excell表",
+    },
+    BtnUpText: {
+      type: String,
+      default: "2.上传服务器",
+    },
+    showTip: {
+      type: Boolean,
+      default: true,
+    },
+    tipText: {
+      type: String,
+      default: "",
+    },
+    maxSize: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      showProgress: false,
+      pvalue: 0,
+    };
+  },
+  mounted() {},
+  methods: {
+    onChange(file, fileList) {},
+    onRemove(file, fileList) {},
+    format(percentage) {
+      return percentage === 100 ? "导入完成" : `${percentage}%`;
+    },
+    onDispProgress(info) {
+      let num = ((info.loaded / info.total) * 100) | 0;
+      this.pvalue = num;
+    },
+    onExceed() {
+      this.$message.warning(`每次最多只能使用${this.limit}个文件!`);
+    },
+    onHttpRequest({ file, onProgress, onSuccess }) {
+      this.showProgress = true;
+      let formData = new FormData();
+      formData.append("file", file);
+      this.$emit(
+        "upload",
+        formData,
+        (progress) => {
+          onProgress(progress);
+        },
+        (res) => {
+          onSuccess(res);
+        },
+        (error) => {
+          this.onError(error);
+        }
+      );
+    },
+    onUploadSuccess(res) {
+      this.$message.success(res.data.info);
+      this.$refs["le-upload"].clearFiles();
+    },
+    onBeforeUpload(file) {
+      const isLimit = file.size / 1024 / 1024 < this.maxSize;
+      if (!isLimit) {
+        this.$message.error(`文件大小不能超过${this.maxSize}M`);
+        return;
+      }
+    },
+    onError(error) {
+      this.$refs["le-upload"].clearFiles();
+      this.showProgress = false;
+      console.log(error);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-upload-container {
+  display: flex;
+  display: -webkit-flex;
+  align-items: center;
+
+  .tip {
+    margin-left: 10px !important;
+  }
+}
+</style>

package/le-upload-table/index.js

@@ -0,0 +1,6 @@
+import LeUploadTable from "./src/main.vue";
+
+LeUploadTable.install = function (Vue) {
+  Vue.component(LeUploadTable.name, LeUploadTable);
+};
+export default LeUploadTable;