zhytech-ui-mobile 1.0.1 → 1.0.2

package/src/unocss/index.ts

@@ -0,0 +1,20 @@
+/*
+ * relative     : \src\unocss\index.ts
+ * Author       : 郭鹏超
+ * Date         : 2024-08-23 11:20
+ * LastEditors  : 郭鹏超
+ * LastEditTime : 2024-08-25 16:34
+ * Description  :
+ * CodeIterationRecord:
+ */
+import themes from "./theme/index";
+import rules from "./rules";
+import shortcuts from "./shortcuts";
+import variants from "./variants";
+const unocssOption = {
+  themes,
+  rules,
+  shortcuts,
+  variants
+} as Record<string, any>;
+export default unocssOption;

package/src/unocss/rules.ts

@@ -0,0 +1,139 @@
+/*
+ * relative     : \src\unocss\rules.ts
+ * Author       : 郭鹏超
+ * Date         : 2024-08-24 15:02
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 08:32
+ * Description  :规则
+ * CodeIterationRecord:
+ */
+
+const rules = [
+  // font-size
+  [/^fs-(\d+)$/, ([, d]: any) => ({ "font-size": `${d}px` })],
+  // font-weight
+  [/^fw-(\d+)$/, ([, d]: any) => ({ "font-weight": `${d}` })],
+  // height
+  [/^h-(\d+)$/, ([, d]: any) => ({ height: `${d}px` })],
+  [/^hl-(\d+)$/, ([, d]: any) => ({ height: `${d}px`, "line-height": `${d}px` })],
+  // 宽
+  [
+    /^w-(\d+|datetime|date|time)$/,
+    ([, value]: any) => {
+      let width: string;
+      switch (value) {
+        // 时间日期宽度
+        case "datetime":
+          width = "130px";
+          break;
+        // 日期宽度
+        case "date":
+          width = "100px";
+          break;
+        // 时间宽度
+        case "time":
+          width = "80px";
+          break;
+        default:
+          width = `${value}px`;
+      }
+      return { width };
+    }
+  ],
+  // 边框border
+  [/^b-(\d+)$/, (match: any) => ({ "border-width": `${match[1]}px` })],
+  [/^b-(\d+)-#([\w]+)$/, (match: any) => ({ border: `solid ${match[1]}px #${match[2]}` })],
+  [/^bt-(\d+)-#([\w]+)$/, (match: any) => ({ "border-top": `solid ${match[1]}px #${match[2]}` })],
+  [/^bb-(\d+)-#([\w]+)$/, (match: any) => ({ "border-bottom": `solid ${match[1]}px #${match[2]}` })],
+  [/^bl-(\d+)-#([\w]+)$/, (match: any) => ({ "border-left": `solid ${match[1]}px #${match[2]}` })],
+  [/^br-(\d+)-#([\w]+)$/, (match: any) => ({ "border-right": `solid ${match[1]}px #${match[2]}` })],
+  // padding
+  [/^p-(\d+)$/, (match: any) => ({ padding: `${match[1]}px` })],
+  [/^px-(\d+)$/, (match: any) => ({ "padding-left": `${match[1]}px`, "padding-right": `${match[1]}px` })],
+  [/^py-(\d+)$/, (match: any) => ({ "padding-top": `${match[1]}px`, "padding-bottom": `${match[1]}px` })],
+  [/^pt-(\d+)$/, (match: any) => ({ "padding-top": `${match[1]}px` })],
+  [/^pb-(\d+)$/, (match: any) => ({ "padding-bottom": `${match[1]}px` })],
+  [/^pl-(\d+)$/, (match: any) => ({ "padding-left": `${match[1]}px` })],
+  [/^pr-(\d+)$/, (match: any) => ({ "padding-right": `${match[1]}px` })],
+  // margin
+  [/^m-(\d+)$/, (match: any) => ({ margin: `${match[1]}px` })],
+  [/^mx-(\d+)$/, (match: any) => ({ "margin-left": `${match[1]}px`, "margin-right": `${match[1]}px` })],
+  [/^my-(\d+)$/, (match: any) => ({ "margin-top": `${match[1]}px`, "margin-bottom": `${match[1]}px` })],
+  [/^mt-(\d+)$/, (match: any) => ({ "margin-top": `${match[1]}px` })],
+  [/^mb-(\d+)$/, (match: any) => ({ "margin-bottom": `${match[1]}px` })],
+  [/^ml-(\d+)$/, (match: any) => ({ "margin-left": `${match[1]}px` })],
+  [/^mr-(\d+)$/, (match: any) => ({ "margin-right": `${match[1]}px` })],
+  ["flex-1", { flex: 1 }],
+  // 背景图片铺满父级元素
+  [/^bgi-full-(.*)$/, (match: any) => ({ background: `url(${match[1]})`, "background-size": "100% 100%" })],
+  [/^bgs-(.*)-(.*)$/, (match: any) => ({ "background-size": `${match[1]} ${match[2]}` })],
+  // px计算
+  [/^hc-(\d+)$/, ([, d]: any) => ({ height: `calc(100% - ${d}px) !important` })],
+  [/^hc-(\d+)$/, ([, d]: any) => ({ height: `calc(100% - ${d}px) !important` })],
+  ["text-align-last-justify", { "text-align-last": "justify" }],
+  /**
+   * @description: 设置背景颜色
+   */
+  [
+    /^bgc-(.*)$/,
+    (match: any) => {
+      const color = `${match[1]}`;
+      return { "background-color": `${color}` };
+    }
+  ],
+  /**
+   * @description: 设置主题 背景颜色 字体颜色 边框颜色
+   */
+  [
+    /^theme-(bgc|color|bc)-(\w+)$/,
+    (match: any, { theme }: any) => {
+      const mapping: any = {
+        bgc: "background-color",
+        color: "color",
+        bc: "border-color"
+      };
+      const property = mapping[match[1]];
+      const colorName = match[2];
+      const colorValue = theme[colorName];
+      if (colorValue) {
+        return { [property]: `${colorValue} !important` }; // 返回样式，添加 !important
+      }
+      return {};
+    }
+  ],
+  /**
+   * @description: 设置按钮颜色
+   */
+  [
+    /^button-(\w+)$/,
+    (match: any, { theme }: any) => {
+      const colorName = match[1];
+      const colorValue = theme[colorName];
+      if (colorValue) {
+        return { "background-color": `${colorValue} !important`, color: colorName === "default" ? `${theme["fontColor"]} !important` : "" }; // 返回样式，添加 !important
+      }
+      return {};
+    }
+  ],
+  // 阴影
+  [
+    /^system-shadow-(.*?)-(.*?)-(.*?)-(.*?)$/, // 修改正则表达式以匹配两个颜色参数
+    (match: any) => {
+      const css = `${match[1] ?? "2"}px ${match[2] ?? "2px"}px ${match[3] ?? "1"}px ${match[4] ?? "0"}px ${
+        match[5] ?? "rgba(0, 0, 0, 0.2)"
+      }`;
+      return {
+        "box-shadow": css
+      };
+    }
+  ],
+  [
+    "p-safe",
+    {
+      padding: "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)"
+    }
+  ],
+  ["pt-safe", { "padding-top": "env(safe-area-inset-top)" }],
+  ["pb-safe", { "padding-bottom": "env(safe-area-inset-bottom)" }]
+];
+export default rules;

package/src/unocss/shortcuts.ts

@@ -0,0 +1,53 @@
+/*
+ * relative     : \src\unocss\shortcuts.ts
+ * Author       : 郭鹏超
+ * Date         : 2024-08-24 15:02
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 20:36
+ * Description  :快捷方式
+ * CodeIterationRecord:
+ */
+const shortcuts: Record<string, any>[] = [
+  {
+    "wh-full": "w-full h-full"
+  },
+  // 子集DOM元素横向布局 左对齐：left  两端对齐between 右对齐:right
+  [
+    /^aline-(.*)$/,
+    ([, c]: any) => {
+      let direction = c;
+      // 解决部分浏览器不支持 left，right
+      if (c === "left") {
+        direction = "start";
+      }
+      if (c === "right") {
+        direction = "end";
+      }
+      return `flex-justify-${direction} flex items-center flex-wrap gap-3px`;
+    }
+  ],
+  // 子集DOM元素纵向布局 左对齐：顶部对齐:start 底部对齐:end
+  [
+    /^y-aline-(.*)$/,
+    ([, c]: any) => {
+      return `flex flex-col justify-${c}`;
+    }
+  ],
+  // zhy-form组件专用
+  [
+    /^zhy-form-component-(.*)$/,
+    () => {
+      return "h-full pl-15 box-border";
+    }
+  ],
+  {
+    "dynamic-form-item-description": "pos-relative w-full min-h-16px my-5 p-5 pl-30! box-border c-#000000 line-height-tight"
+  },
+  {
+    "show-description": "bgc-#ffffdd b-2 b-dashed b-#ff0000"
+  },
+  {
+    "description-tip": "pos-absolute left-7px top-3px"
+  }
+];
+export default shortcuts;

package/src/unocss/theme/index.ts

@@ -0,0 +1,13 @@
+/*
+ * relative     : e:\Code\CaseManagement\case-management-web\src\unocss\theme\index.ts
+ * Author       : 郭鹏超
+ * Date         : 2024-08-22 17:09
+ * LastEditors  : 郭鹏超
+ * LastEditTime : 2024-10-15 15:25
+ * Description  :
+ * CodeIterationRecord:
+ */
+import primary from "./themeOption/primary";
+import dark from "./themeOption/dark";
+const themes = { primary, dark } as Record<string, any>;
+export default themes;

package/src/unocss/theme/themeOption/dark.ts

@@ -0,0 +1,35 @@
+/*
+ * FilePath     : \src\unocss\theme\themeOption\dark.ts
+ * Author       : 苏军志
+ * Date         : 2025-09-03 15:58
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 08:32
+ * Description  : 黑暗主题
+ * CodeIterationRecord:
+ */
+
+const textColor = "#cdd6f4";
+const bgcColor = "#181825";
+const dark = {
+  fontColor: textColor,
+  primaryFontColor: textColor,
+  hasBgcfontColor: textColor,
+  contentBgcColor: bgcColor,
+  bodyBgcColor: bgcColor,
+  borderColor: "#cccccc",
+  systemPrimary: textColor,
+  primary: bgcColor,
+  info: "#909399",
+  success: "#67c23a",
+  warning: "#e6a23c",
+  danger: "#ff0000",
+  create: "#14d8d8",
+  staging: "#ff7400",
+  read: "#8cc63e",
+  update: "#108bf7",
+  delete: "#f56c6c",
+  disabled: "#c0c4cc",
+  default: "#000000",
+  hoverColor: "#ffffff"
+};
+export default dark;

package/src/unocss/theme/themeOption/primary.ts

@@ -0,0 +1,33 @@
+/*
+ * FilePath     : \src\unocss\theme\themeOption\primary.ts
+ * Author       : 苏军志
+ * Date         : 2025-09-03 15:59
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 08:33
+ * Description  : 浅色主题
+ * CodeIterationRecord:
+ */
+
+const primary = {
+  fontColor: "#000000",
+  primaryFontColor: "#3F51B5",
+  hasBgcfontColor: "#ffffff",
+  contentBgcColor: "#ffffff",
+  bodyBgcColor: "#f3f3f3",
+  borderColor: "#cccccc",
+  systemPrimary: "#0470d3",
+  primary: "#3F51B5",
+  info: "#909399",
+  success: "#67c23a",
+  warning: "#e6a23c",
+  danger: "#ff0000",
+  create: "#14d8d8",
+  staging: "#ff7400",
+  read: "#8cc63e",
+  update: "#3F51B5",
+  delete: "#f56c6c",
+  disabled: "#c0c4cc",
+  default: "#fff",
+  hoverColor: "#3F51B5"
+};
+export default primary;

package/src/unocss/variants.ts

@@ -0,0 +1,110 @@
+/*
+ * relative     : \src\unocss\variants.ts
+ * Author       : 郭鹏超
+ * Date         : 2024-08-24 15:02
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 08:28
+ * Description  :变体
+ * CodeIterationRecord:
+ */
+const variants: any[] = [
+  /**
+   * 选择子级为指定标签的元素
+   * 用法示例: sons-html-div:bg-red-500
+   * 这将选择所有 div 元素并应用 bg-red-500 样式
+   */
+  (matcher: any) => {
+    const parentPrefix = "sons-html-";
+    if (!matcher.startsWith(parentPrefix)) {
+      return matcher;
+    }
+    // 提取标签名和实际的样式匹配器
+    const [tag, ...rest] = matcher.slice(parentPrefix.length).split(":");
+    const newMatcher = rest.join(":");
+    return {
+      matcher: newMatcher, // 去掉 'sons-html-<tag>:' 前缀
+      selector: (s: any) => `${s} ${tag}` // 选择子级为指定标签的元素
+    };
+  },
+
+  /**
+   * 选择直接子级为指定标签的元素
+   * 用法示例: son-html-div:bg-blue-500
+   * 这将选择所有直接子级 div 元素并应用 bg-blue-500 样式
+   */
+  (matcher: any) => {
+    const parentPrefix = "son-html-";
+    if (!matcher.startsWith(parentPrefix)) {
+      return matcher;
+    }
+
+    // 提取标签名和实际的样式匹配器
+    const [tag, ...rest] = matcher.slice(parentPrefix.length).split(":");
+    const newMatcher = rest.join(":");
+
+    return {
+      matcher: newMatcher, // 去掉 'son-html-<tag>:' 前缀
+      selector: (s: any) => `${s} > ${tag}` // 选择直接子级为指定标签的元素
+    };
+  },
+
+  /**
+   * 选择子级为指定类名的元素
+   * 用法示例: sons-class-my-class:bg-green-500
+   * 这将选择所有子级具有 my-class 类的元素并应用 bg-green-500 样式
+   */
+  (matcher: any) => {
+    const parentPrefix = "sons-class-";
+    if (!matcher.startsWith(parentPrefix)) {
+      return matcher;
+    }
+    // 提取类名和实际的样式匹配器
+    const [className, ...rest] = matcher.slice(parentPrefix.length).split(":");
+    const newMatcher = rest.join(":");
+    return {
+      matcher: newMatcher, // 去掉 'sons-class-<class>:' 前缀
+      selector: (s: any) => `${s} .${className}` // 选择子级为指定类名的元素
+    };
+  },
+  /**
+   * 选择指定标签的第 index 个元素
+   * 用法示例: nth-son-html-div-2:bg-purple-500
+   * 这将选择所有 div 元素的第二个并应用 bg-purple-500 样式
+   *
+   * 同时支持带连字符的标签，如: nth-son-html-uni-view-2:overflow-y-auto
+   * 这将选择所有 uni-view 元素的第二个并应用 overflow-y-auto 样式
+   */
+  (matcher: any) => {
+    const parentPrefix = "nth-son-html-";
+    if (!matcher.startsWith(parentPrefix)) {
+      return matcher;
+    }
+
+    // 提取标签名、索引和实际的样式匹配器
+    const parts = matcher.slice(parentPrefix.length).split(":");
+    const tagAndIndex = parts[0];
+    const rest = parts.slice(1);
+
+    // 查找最后一个连字符位置，它分隔标签名和索引
+    const lastHyphenIndex = tagAndIndex.lastIndexOf("-");
+    if (lastHyphenIndex === -1) {
+      return matcher;
+    }
+
+    // 提取标签名和索引
+    const tag = tagAndIndex.substring(0, lastHyphenIndex);
+    const index = tagAndIndex.substring(lastHyphenIndex + 1);
+
+    // 确保索引是一个数字
+    if (!/^\d+$/.test(index)) {
+      return matcher;
+    }
+
+    const newMatcher = rest.join(":");
+    return {
+      matcher: newMatcher, // 去掉 'nth-son-html-<tag>-<index>:' 前缀
+      selector: (s: any) => `${s} > ${tag}:nth-of-type(${index})` // 选择子级为指定标签的第 index 个元素
+    };
+  }
+];
+export default variants;

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
+  "compilerOptions": {
+    "sourceMap": true,
+    "baseUrl": ".",
+    "isolatedModules": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": ["esnext", "dom"],
+    "types": ["@dcloudio/types", "@types/wechat-miniprogram", "@uni-helper/uni-app-types"],
+    "verbatimModuleSyntax": true,
+    "ignoreDeprecations": "5.0"
+  },
+  "vueCompilerOptions": {
+    "nativeTags": ["block", "component", "template", "slot"]
+  }
+}

package/uno.config.ts

@@ -0,0 +1,63 @@
+/*
+ * FilePath     : \uno.config.ts
+ * Author       : 苏军志
+ * Date         : 2025-03-24 15:43
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-04 15:51
+ * Description  : unocss配置文件
+ * CodeIterationRecord:
+ */
+import { defineConfig, presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from "unocss";
+import { presetApplet, presetRemRpx, transformerAttributify } from "unocss-applet";
+import unoCssOption from "./src/unocss/index";
+const { themes, rules, shortcuts, variants } = unoCssOption;
+const isMp = process.env?.UNI_PLATFORM?.startsWith("mp") ?? false;
+const presets: any = [];
+if (isMp) {
+  // 使用小程序预设
+  presets.push(presetApplet(), presetRemRpx());
+} else {
+  presets.push(
+    // 非小程序用官方预设
+    presetUno(),
+    // 支持css class属性化
+    presetAttributify({
+      prefix: "un-",
+      prefixedOnly: true
+    })
+  );
+}
+export default defineConfig({
+  presets: [
+    ...presets,
+    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+      extraProperties: {
+        display: "inline-block",
+        "vertical-align": "middle"
+      }
+    }),
+    unoCssOption
+  ],
+  layers: {
+    components: -2,
+    default: 1,
+    user: 2
+  },
+  transformers: [
+    transformerVariantGroup(),
+    transformerDirectives(),
+    transformerAttributify({
+      // 解决与第三方框架样式冲突问题
+      prefixedOnly: true,
+      prefix: "zhy"
+    })
+  ],
+  variants: variants,
+  rules: rules,
+  shortcuts: shortcuts,
+  // 主题暂时使用primary
+  theme: themes.primary
+});

package/vite.config.ts

@@ -0,0 +1,83 @@
+/*
+ * FilePath     : \vite.config.ts
+ * Author       : 苏军志
+ * Date         : 2024-04-19 14:12
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-06 09:00
+ * Description  :
+ * CodeIterationRecord:
+ */
+import path from "path";
+import uni from "@dcloudio/vite-plugin-uni";
+import UnoCSS from "unocss/vite";
+import AutoImport from "unplugin-auto-import/vite";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    server: {
+      port: 6790,
+      // 显示IP地址
+      host: true,
+      // 端口占用直接退出
+      strictPort: true,
+      // 启动后是否自动打开浏览器
+      open: false
+    },
+    plugins: [
+      uni(),
+      // UnoCSS({ mode: "vue-scoped" }),
+      UnoCSS(),
+      AutoImport({
+        dirs: ["src/hooks/", "src/types/"],
+        // 需要去解析的文件
+        include: [
+          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+          /\.vue$/,
+          /\.vue\?vue/, // .vue
+          /\.md$/ // .md
+        ],
+        // imports 指定自动引入的包位置（名）
+        imports: ["vue", "uni-app", "@vueuse/core"],
+        // 生成相应的自动导入json文件。
+        eslintrc: {
+          // 启用
+          enabled: true,
+          // 生成自动导入json文件位置
+          filepath: "./.eslintrc-auto-import.json",
+          // 全局属性值
+          globalsPropValue: true
+        }
+      })
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // 加载全局样式，使用scss特性
+          additionalData: '@import "./src/static/scss/index.scss";'
+        }
+      }
+    },
+    build: {
+      outDir: "dist",
+      assetsDir: "static",
+      lib: {
+        entry: path.resolve(__dirname, "src/index.ts"),
+        name: "zhytech-ui-mobile",
+        fileName: (format) => `zhytech-ui-mobile.${format}.js`
+      },
+      rollupOptions: {
+        // 确保外部化处理那些你不想打包进库的依赖
+        external: ["vue"],
+        output: {
+          exports: "named",
+          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+          globals: {
+            vue: "Vue"
+          }
+        }
+      }
+    }
+  };
+});