@taole/dev-helper 0.1.13 → 0.1.15

package/Tdiv/index.js

@@ -33,6 +33,13 @@ function hasValue(value) {
     return value !== null && value !== undefined && value !== '';
 }
 
+function parseClassTokens(value) {
+    if (!value) return [];
+    return value.trim().split(/\s+/).filter(Boolean);
+}
+
+const RESERVED_CLASS = new Set(['tw-img-div', 'click-effect']);
+
 function calc(value, { usePx, viewportWidth, viewportUnit }) {
     let vWidth = setting.viewportWidth;
     if (viewportWidth) vWidth = viewportWidth;
@@ -55,10 +62,10 @@ function calc(value, { usePx, viewportWidth, viewportUnit }) {
 class Tdiv extends HTMLElement {
     static get observedAttributes() {
         return [
-            '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
+            'class', '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
             'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
             'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
-            'dot9', 'dot9Border', 'bold', 'textEllipsis', 'bgColor'
+            'dot9', 'dot9Border', 'bold', 'textEllipsis', 'textDot', 'bgColor'
         ];
     }
 
@@ -68,6 +75,8 @@ class Tdiv extends HTMLElement {
         this._connected = false;
         this._iscalcstyle = false;
         this._unsubscribe = null;
+        this._managedClasses = new Set();
+        this._syncingClass = false;
     }
 
     connectedCallback() {
@@ -87,8 +96,9 @@ class Tdiv extends HTMLElement {
         }
     }
 
-    attributeChangedCallback() {
+    attributeChangedCallback(name) {
         if (!this._connected) return;
+        if (this._iscalcstyle || this._syncingClass) return;
         this._update();
     }
 
@@ -111,11 +121,48 @@ class Tdiv extends HTMLElement {
         return val;
     }
 
+    _getUserClassTokens() {
+        const tokens = new Set();
+        parseClassTokens(this._getAttr('_class') || '').forEach((t) => tokens.add(t));
+        parseClassTokens(this.getAttribute('class') || '')
+            .filter((t) => !RESERVED_CLASS.has(t))
+            .forEach((t) => tokens.add(t));
+        return tokens;
+    }
+
+    _syncClasses(desiredManaged) {
+        let changed = false;
+        for (const cls of this._managedClasses) {
+            if (!desiredManaged.has(cls)) changed = true;
+        }
+        if (!changed) {
+            for (const cls of desiredManaged) {
+                if (!this._managedClasses.has(cls)) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (!changed) return;
+
+        this._syncingClass = true;
+        try {
+            for (const cls of this._managedClasses) {
+                if (!desiredManaged.has(cls)) this.classList.remove(cls);
+            }
+            for (const cls of desiredManaged) {
+                this.classList.add(cls);
+            }
+            this._managedClasses = desiredManaged;
+        } finally {
+            this._syncingClass = false;
+        }
+    }
+
     _update() {
         if (this._iscalcstyle) return;
         this._iscalcstyle = true;
         // 读取所有属性
-        const _class = this._getAttr('_class') || '';
         const usePx = this._getAttr('usePx', 'boolean');
         const styleAttr = this._getAttr('_style') || '';
         const src = this._getAttr('src') || '';
@@ -143,14 +190,15 @@ class Tdiv extends HTMLElement {
         const debug = this._getAttr('debug', 'boolean');
         const viewportWidth = this._getAttr('viewportWidth', 'number');
         const viewportUnit = this._getAttr('viewportUnit');
-        const textEllipsis = this._getAttr('textEllipsis');
+        const textEllipsis = this.hasAttribute('textEllipsis')
+            ? this._getAttr('textEllipsis')
+            : this._getAttr('textDot');
         let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
         let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
 
-        // class
-        let extraClass = ['tw-img-div'];
-        if (_class) extraClass.push(_class);
-        if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+        // class（组件托管：tw-img-div、class/_class 空格分拆、click-effect）
+        const desiredManaged = new Set(['tw-img-div', ...this._getUserClassTokens()]);
+        if (setting.useButtonEffect && this._getAttr('onClick')) desiredManaged.add('click-effect');
         // 分组样式
         const calcOpt = { usePx, viewportWidth, viewportUnit };
         let layoutStyle = '';
@@ -278,9 +326,7 @@ class Tdiv extends HTMLElement {
         if (debug) {
             console.log('layoutStyle', layoutStyle);
         }
-        const currentList = Array.from(this.classList);
-        const classNeeded = extraClass.filter(item => !currentList.includes(item));
-        this.classList.add(...classNeeded);
+        this._syncClasses(desiredManaged);
         this.style.cssText = layoutStyle;
         this._iscalcstyle = false;
     }

package/bin/dev-helper.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageRoot = resolve(__dirname, '..');
+const PACKAGE_NAME = '@taole/dev-helper';
+const HTML_DATA_ENTRY = `./node_modules/${PACKAGE_NAME}/custom-data/t-div.html-data.json`;
+
+function getProjectRoot() {
+  return process.env.INIT_CWD ? resolve(process.env.INIT_CWD) : process.cwd();
+}
+
+function printUsage() {
+  console.log(`用法: npx ${PACKAGE_NAME} init-t-div`);
+  console.log('  在项目的 .vscode/settings.json 中写入 html.customData 配置');
+}
+
+function parseSettings(content) {
+  try {
+    return JSON.parse(content);
+  } catch {
+    console.error('无法解析 .vscode/settings.json，请确保为合法 JSON（不支持注释）。');
+    process.exit(1);
+  }
+}
+
+function hasHtmlDataEntry(list) {
+  const target = HTML_DATA_ENTRY.replace(/\\/g, '/');
+  return list.some((item) => {
+    if (typeof item !== 'string') return false;
+    const normalized = item.replace(/\\/g, '/');
+    return (
+      normalized === target ||
+      normalized.endsWith('/custom-data/t-div.html-data.json')
+    );
+  });
+}
+
+function getHtmlCustomData(settings) {
+  if (!settings || settings['html.customData'] == null) return [];
+  const data = settings['html.customData'];
+  return Array.isArray(data) ? data : [data];
+}
+
+function getInstalledDataPath(projectRoot) {
+  return join(
+    projectRoot,
+    'node_modules',
+    '@taole',
+    'dev-helper',
+    'custom-data',
+    't-div.html-data.json',
+  );
+}
+
+function shouldSkipPostinstall(projectRoot) {
+  if (process.env.CI === 'true' || process.env.DEV_HELPER_SKIP_INIT === '1') {
+    return true;
+  }
+  if (!process.env.INIT_CWD) {
+    return true;
+  }
+  if (resolve(projectRoot) === packageRoot) {
+    return true;
+  }
+  return false;
+}
+
+function initTDiv({ silent = false } = {}) {
+  const projectRoot = getProjectRoot();
+  const vscodeDir = join(projectRoot, '.vscode');
+  const settingsPath = join(vscodeDir, 'settings.json');
+  const installedDataPath = getInstalledDataPath(projectRoot);
+
+  if (existsSync(settingsPath)) {
+    const existing = getHtmlCustomData(parseSettings(readFileSync(settingsPath, 'utf8')));
+    if (hasHtmlDataEntry(existing)) {
+      if (!silent) console.log('html.customData 已包含 t-div 配置，跳过。');
+      return;
+    }
+  }
+
+  if (!existsSync(installedDataPath)) {
+    const message = `未在项目中找到 ${HTML_DATA_ENTRY}，请先安装: npm install ${PACKAGE_NAME}`;
+    if (silent) return;
+    console.error(message);
+    process.exit(1);
+  }
+
+  let settings = existsSync(settingsPath)
+    ? parseSettings(readFileSync(settingsPath, 'utf8'))
+    : {};
+
+  if (!Array.isArray(settings['html.customData'])) {
+    settings['html.customData'] = settings['html.customData']
+      ? [settings['html.customData']]
+      : [];
+  }
+
+  settings['html.customData'].push(HTML_DATA_ENTRY);
+  mkdirSync(vscodeDir, { recursive: true });
+  writeFileSync(settingsPath, `${JSON.stringify(settings, null, 2)}\n`, 'utf8');
+  if (!silent) {
+    console.log(`已写入 ${settingsPath}`);
+    console.log(`  html.customData += "${HTML_DATA_ENTRY}"`);
+  }
+}
+
+function runPostinstall() {
+  const projectRoot = getProjectRoot();
+  if (shouldSkipPostinstall(projectRoot)) return;
+  initTDiv({ silent: true });
+}
+
+const command = process.argv[2];
+
+if (command === 'init-t-div') {
+  initTDiv();
+} else if (command === 'postinstall') {
+  runPostinstall();
+} else if (command) {
+  console.error(`未知命令: ${command}\n`);
+  printUsage();
+  process.exit(1);
+} else {
+  printUsage();
+}

package/custom-data/t-div.html-data.json

@@ -0,0 +1,173 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "t-div",
+      "description": "基于设计稿尺寸的布局容器 Web Component。数值属性会按 viewportWidth（默认 750）换算为 vw；设置 usePx 后按 px 输出。支持背景图、九宫格 border-image、flex 布局与文本省略。需先引入 tdiv.umd.js。",
+      "attributes": [
+        {
+          "name": "class",
+          "description": "class属性"
+        },
+        {
+          "name": "_class",
+          "description": "（兼容）同 class，与 class 合并生效；推荐直接使用 class属性"
+        },
+        {
+          "name": "usePx",
+          "description": "为 true 时 width/height/top 等数值属性直接输出 px，否则按 viewportWidth 换算为 viewportUnit（默认 vw）。可覆盖全局 setting.usePx。"
+        },
+        {
+          "name": "_style",
+          "description": "追加到计算后内联 style 末尾的原始 CSS 字符串。"
+        },
+        {
+          "name": "src",
+          "description": "背景图或九宫格图源。非 http(s) 路径会补全为 dynamics-share CDN；以 -- 开头时作为 CSS 变量（如 --bg1 → var(--bg1)）。支持 WebP 自动处理。"
+        },
+        {
+          "name": "srcMode",
+          "description": "非九宫格时 background-size 模式。",
+          "valueSet": "tdiv-srcMode"
+        },
+        {
+          "name": "dot9",
+          "description": "九宫格 border-image slice，4 个空格分隔数值（上 右 下 左）"
+        },
+        {
+          "name": "dot9Border",
+          "description": "九宫格 border-width，4 个空格分隔数值；未设置时回退为 dot9 的值。"
+        },
+        {
+          "name": "width",
+          "description": "宽度，数字或数字字符串"
+        },
+        {
+          "name": "height",
+          "description": "高度，数字或数字字符串"
+        },
+        {
+          "name": "absolute",
+          "description": "为 true 时使用 position: absolute，top/left/right/bottom 作为定位偏移。"
+        },
+        {
+          "name": "fixed",
+          "description": "为 true 时使用 position: fixed（优先于 absolute），top/left/right/bottom 作为定位偏移。"
+        },
+        {
+          "name": "top",
+          "description": "absolute/fixed 时为 top；否则为 margin-top。"
+        },
+        {
+          "name": "left",
+          "description": "absolute/fixed 时为 left；否则为 margin-left。"
+        },
+        {
+          "name": "right",
+          "description": "absolute/fixed 时为 right；否则为 margin-right。"
+        },
+        {
+          "name": "bottom",
+          "description": "absolute/fixed 时为 bottom；否则为 margin-bottom。"
+        },
+        {
+          "name": "zIndex",
+          "description": "z-index 层叠顺序。"
+        },
+        {
+          "name": "pointer",
+          "description": "为 true 时 cursor: pointer。未设置且存在 onClick 时也会显示手型光标。"
+        },
+        {
+          "name": "flex",
+          "description": "为 true 时 display: flex。"
+        },
+        {
+          "name": "column",
+          "description": "flex 为 true 时设置 flex-direction: column。"
+        },
+        {
+          "name": "center",
+          "description": "flex 为 true 时水平垂直居中；否则 text-align: center。"
+        },
+        {
+          "name": "text",
+          "description": "字号，数值经 calc 换算为 font-size。"
+        },
+        {
+          "name": "bold",
+          "description": "为 true 时 font-weight: bold。"
+        },
+        {
+          "name": "color",
+          "description": "文字颜色。以 -- 开头时使用 var(--xxx)。"
+        },
+        {
+          "name": "bgColor",
+          "description": "背景色。以 -- 开头时使用 var(--xxx)。"
+        },
+        {
+          "name": "radius",
+          "description": "圆角 border-radius，数值经 calc 换算。"
+        },
+        {
+          "name": "border",
+          "description": "边框宽度，数值经 calc 换算；与 borderColor 组合为 solid 边框。"
+        },
+        {
+          "name": "borderColor",
+          "description": "边框颜色，默认 #000；以 -- 开头时使用 var(--xxx)。仅设 borderColor 时只改 border-color。"
+        },
+        {
+          "name": "textEllipsis",
+          "description": "文本省略：非纯数字时为单行省略；纯数字时为多行省略（-webkit-line-clamp 行数）。"
+        },
+        {
+          "name": "textDot",
+          "description": "textEllipsis 的别名，行为相同。"
+        },
+        {
+          "name": "onClick",
+          "description": "点击回调：填写挂载在 window 上的函数名字符串；全局 useButtonEffect 为 true 时会附加 click-effect 样式。不推荐使用onClick属性，推荐使用click事件"
+        },
+        {
+          "name": "debug",
+          "description": "为 true 时在控制台输出计算后的 layoutStyle。"
+        },
+        {
+          "name": "viewportWidth",
+          "description": "覆盖本次样式计算的设计稿基准宽度（默认 750）。"
+        },
+        {
+          "name": "viewportUnit",
+          "description": "覆盖数值换算单位（默认 vw）。"
+        }
+      ],
+      "references": [
+        {
+          "name": "Tdiv 源码",
+          "url": "https://codeup.aliyun.com/5ec8bb7bd1d1abe63b55cd33/PC_Web/web-libs/blob/master/dev-helper/Tdiv/index.js"
+        }
+      ]
+    }
+  ],
+  "valueSets": [
+    {
+      "name": "tdiv-srcMode",
+      "values": [
+        {
+          "name": "auto",
+          "description": "默认，background-size: 100% auto（仅顶部对齐拉伸宽度）。"
+        },
+        {
+          "name": "fill",
+          "description": "background-size: 100% 100%，铺满容器。"
+        },
+        {
+          "name": "cover",
+          "description": "background-size: cover，等比覆盖。"
+        }
+      ]
+    }
+  ]
+}

package/dist/open-diandian.umd.js

@@ -48,10 +48,10 @@
         });
     }
     let id = 1;
-    function defineTag() {
-        customElements.define(
-            "open-diandain-app",
-            class extends HTMLElement {
+    const OPEN_DIANDIAN_TAG_NAMES = ['open-diandain-app', 'open-diandian-app'];
+
+    function createOpenDiandianElementClass() {
+        return class extends HTMLElement {
                 static get observedAttributes() {
                     return ['appid', 'extinfo', 'debug', 'scene'];
                 }
@@ -367,8 +367,15 @@
                         this._alink.href = this._alink_link;
                     }
                 }
-            },
-        );
+            };
+    }
+
+    function defineTag() {
+        OPEN_DIANDIAN_TAG_NAMES.forEach((tagName) => {
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, createOpenDiandianElementClass());
+            }
+        });
     }
 
     let isRegister = false;

package/dist/tdiv.umd.js

@@ -117,6 +117,13 @@
         return value !== null && value !== undefined && value !== '';
     }
 
+    function parseClassTokens(value) {
+        if (!value) return [];
+        return value.trim().split(/\s+/).filter(Boolean);
+    }
+
+    const RESERVED_CLASS = new Set(['tw-img-div', 'click-effect']);
+
     function calc(value, { usePx, viewportWidth, viewportUnit }) {
         let vWidth = config.viewportWidth;
         if (viewportWidth) vWidth = viewportWidth;
@@ -139,10 +146,10 @@
     class Tdiv extends HTMLElement {
         static get observedAttributes() {
             return [
-                '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
+                'class', '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute', 'fixed',
                 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
                 'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
-                'dot9', 'dot9Border', 'bold', 'textEllipsis', 'bgColor'
+                'dot9', 'dot9Border', 'bold', 'textEllipsis', 'textDot', 'bgColor'
             ];
         }
 
@@ -152,6 +159,8 @@
             this._connected = false;
             this._iscalcstyle = false;
             this._unsubscribe = null;
+            this._managedClasses = new Set();
+            this._syncingClass = false;
         }
 
         connectedCallback() {
@@ -171,8 +180,9 @@
             }
         }
 
-        attributeChangedCallback() {
+        attributeChangedCallback(name) {
             if (!this._connected) return;
+            if (this._iscalcstyle || this._syncingClass) return;
             this._update();
         }
 
@@ -195,11 +205,48 @@
             return val;
         }
 
+        _getUserClassTokens() {
+            const tokens = new Set();
+            parseClassTokens(this._getAttr('_class') || '').forEach((t) => tokens.add(t));
+            parseClassTokens(this.getAttribute('class') || '')
+                .filter((t) => !RESERVED_CLASS.has(t))
+                .forEach((t) => tokens.add(t));
+            return tokens;
+        }
+
+        _syncClasses(desiredManaged) {
+            let changed = false;
+            for (const cls of this._managedClasses) {
+                if (!desiredManaged.has(cls)) changed = true;
+            }
+            if (!changed) {
+                for (const cls of desiredManaged) {
+                    if (!this._managedClasses.has(cls)) {
+                        changed = true;
+                        break;
+                    }
+                }
+            }
+            if (!changed) return;
+
+            this._syncingClass = true;
+            try {
+                for (const cls of this._managedClasses) {
+                    if (!desiredManaged.has(cls)) this.classList.remove(cls);
+                }
+                for (const cls of desiredManaged) {
+                    this.classList.add(cls);
+                }
+                this._managedClasses = desiredManaged;
+            } finally {
+                this._syncingClass = false;
+            }
+        }
+
         _update() {
             if (this._iscalcstyle) return;
             this._iscalcstyle = true;
             // 读取所有属性
-            const _class = this._getAttr('_class') || '';
             const usePx = this._getAttr('usePx', 'boolean');
             const styleAttr = this._getAttr('_style') || '';
             const src = this._getAttr('src') || '';
@@ -227,14 +274,15 @@
             const debug = this._getAttr('debug', 'boolean');
             const viewportWidth = this._getAttr('viewportWidth', 'number');
             const viewportUnit = this._getAttr('viewportUnit');
-            const textEllipsis = this._getAttr('textEllipsis');
+            const textEllipsis = this.hasAttribute('textEllipsis')
+                ? this._getAttr('textEllipsis')
+                : this._getAttr('textDot');
             let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
             let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
 
-            // class
-            let extraClass = ['tw-img-div'];
-            if (_class) extraClass.push(_class);
-            if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+            // class（组件托管：tw-img-div、class/_class 空格分拆、click-effect）
+            const desiredManaged = new Set(['tw-img-div', ...this._getUserClassTokens()]);
+            if (config.useButtonEffect && this._getAttr('onClick')) desiredManaged.add('click-effect');
             // 分组样式
             const calcOpt = { usePx, viewportWidth, viewportUnit };
             let layoutStyle = '';
@@ -362,9 +410,7 @@
             if (debug) {
                 console.log('layoutStyle', layoutStyle);
             }
-            const currentList = Array.from(this.classList);
-            const classNeeded = extraClass.filter(item => !currentList.includes(item));
-            this.classList.add(...classNeeded);
+            this._syncClasses(desiredManaged);
             this.style.cssText = layoutStyle;
             this._iscalcstyle = false;
         }

package/open-diandian/index.js

@@ -43,10 +43,10 @@ function resolveTwKit() {
     });
 }
 let id = 1;
-function defineTag() {
-    customElements.define(
-        "open-diandain-app",
-        class extends HTMLElement {
+const OPEN_DIANDIAN_TAG_NAMES = ['open-diandain-app', 'open-diandian-app'];
+
+function createOpenDiandianElementClass() {
+    return class extends HTMLElement {
             static get observedAttributes() {
                 return ['appid', 'extinfo', 'debug', 'scene'];
             }
@@ -362,8 +362,15 @@ function defineTag() {
                     this._alink.href = this._alink_link;
                 }
             }
-        },
-    );
+        };
+}
+
+function defineTag() {
+    OPEN_DIANDIAN_TAG_NAMES.forEach((tagName) => {
+        if (!customElements.get(tagName)) {
+            customElements.define(tagName, createOpenDiandianElementClass());
+        }
+    });
 }
 
 let isRegister = false;

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
+  "bin": {
+    "dev-helper": "./bin/dev-helper.js"
+  },
   "scripts": {
     "build": "npx -y rimraf dist && rollup -c",
+    "postinstall": "node ./bin/dev-helper.js postinstall",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -14,7 +18,9 @@
   "files": [
     "Tdiv",
     "open-diandian",
-    "dist"
+    "dist",
+    "custom-data",
+    "bin"
   ],
   "author": "",
   "license": "ISC",

package/Tdiv/index.svelte

@@ -1,314 +0,0 @@
-<script>
-    import { createEventDispatcher } from "svelte";
-    import setting from "./setting";
-
-    /**
-     * @type {string}
-     * 传入的class请务必放在global下
-     */
-    export let _class = "";
-
-    /**
-     * @type {boolean}
-     * 默认false， 传入true表示直接使用px单位，一般使用场景比如pc
-     */
-    export let usePx = null;
-
-    /**
-     * @type {string}
-     * 请不要传入数值相关的style, 因为这部分不会被转换成vw单位
-     */
-    export let style = "";
-
-    /**
-     * @type {string}
-     * 图片地址
-     * 传入完整url或者path，组件会自动拼上`https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`
-     */
-    export let src = "";
-    /**
-     * @type {number|string}
-     * 宽度
-     */
-    export let width = null;
-    /**
-     * @type {number|string}
-     * 高度
-     */
-    export let height = null;
-    /**
-     * @type {boolean}
-     * 使用绝对布局， false则为相对布局
-     */
-    export let absolute = false;
-
-    /**
-     * @type {number|string}
-     * 绝对布局下为top，相对布局下为margin-top
-     */
-    export let top = null;
-    /**
-     * @type {number|string}
-     * 绝对布局下为left，相对布局下为margin-left
-     */
-    export let left = null;
-    /**
-     * @type {number|string}
-     * 绝对布局下为right，相对布局下为margin-right
-     */
-    export let right = null;
-    /**
-     * @type {number|string}
-     * 绝对布局下为bottom，相对布局下为margin-bottom
-     */
-    export let bottom = null;
-    /**
-     * @type {number}
-     * z-index层级
-     */
-    export let zIndex = null;
-    /**
-     * @type {boolean}
-     * cursor:pointer
-     */
-    export let pointer = null;
-    /**
-     * @type {boolean}
-     * 使用flex布局
-     */
-    export let flex = false;
-    /**
-     * @type {boolean}
-     * flex布局下，flex-direction:column
-     */
-    export let column = false;
-    /**
-     * @type {boolean}
-     * flex布局下，align-items:center;justify-content: center;
-     */
-    export let center = false;
-    /**
-     * @type {number|string}
-     * 内部文本的大小
-     */
-    export let text = null;
-    /**
-     * @type {string}
-     * 内部文本的颜色
-     */
-    export let color = "";
-
-    /**
-     * @type {number|string}
-     * 圆角大小
-     */
-    export let radius = null;
-
-    /**
-     * @type {string}
-     * 边框宽度
-     */
-    export let border = null;
-
-    /**
-     * @type {string}
-     * 边框颜色
-     */
-    export let borderColor = null;
-
-
-    /**
-     * @type {'auto'|'fill'|'cover'|'contain'}
-     * src传入时有效, 图片的填充模式: 默认auto
-     * - fill: 长款拉伸填充
-     * - auto: 自动填充(按照宽高比自动填充， 不重复不裁剪)
-     * - cover: 覆盖
-     * - contain: 包含
-     */
-    export let srcMode = "auto";
-
-    /**
-     * @type {(e) => void}
-     * 点击事件监听
-     * - onClick 使用onClick将会自动设置cursor:pointer样式
-     * - on:click 不会
-     */
-    export let onClick = null;
-
-    /**
-     * @type {boolean}
-     * 打开后，属性变化的时候会打印最终的所有style
-     */
-    export let debug = false;
-
-    // 留个口子
-    export let viewportWidth = undefined;
-    export let viewportUnit = undefined;
-
-    const dispatch = createEventDispatcher();
-
-    /**
-     * 计算宽高
-     * @param value
-     * @returns {string}
-     */
-    function calc(value) {
-        let vWidth = setting.viewportWidth;
-        if(viewportWidth){
-            vWidth = viewportWidth;
-        }
-        let vUnit = setting.viewportUnit;
-        if(viewportUnit){
-            vUnit = viewportUnit;
-        }
-        let localUsePx = setting.usePx;
-        if(typeof usePx === 'boolean'){
-            localUsePx = usePx;
-        }
-        // @ts-ignore
-        if (typeof value === "string" && !isNaN(value)) {
-            value = Number(value);
-        }
-        if (typeof value === "number") {
-            if (localUsePx) {
-                return value + "px";
-            }
-            let val = ((value / vWidth) * 100).toFixed(4); // 4?
-            return `${val}${vUnit}`;
-        }
-        return value;
-    }
-
-    function handleOnClick(e) {
-        if(typeof onClick === 'function'){
-            onClick(e);
-        }
-        dispatch("click", e);
-    }
-
-    function hasValue(value) {
-        return value !== null && value !== undefined && value !== "";
-    }
-
-    // 计算最终样式
-    $: styleStr = (function fmtStyle() {
-        let ret = "";
-        if (hasValue(width)) {
-            ret += `width: ${calc(width)};`;
-        }
-        if (hasValue(height)) {
-            ret += `height: ${calc(height)};`;
-        }
-        if (absolute) {
-            ret += `position: absolute;`;
-            if (hasValue(left)) {
-                ret += `left: ${calc(left)};`;
-            }
-            if (hasValue(top)) {
-                ret += `top: ${calc(top)};`;
-            }
-            if (hasValue(right)) {
-                ret += `right: ${calc(right)};`;
-            }
-            if (hasValue(bottom)) {
-                ret += `bottom: ${calc(bottom)};`;
-            }
-        } else {
-            ret += `position: relative;`;
-            if (hasValue(top)) {
-                ret += `margin-top: ${calc(top)};`;
-            }
-            if (hasValue(left)) {
-                ret += `margin-left: ${calc(left)};`;
-            }
-            if (hasValue(right)) {
-                ret += `margin-right: ${calc(right)};`;
-            }
-            if (hasValue(bottom)) {
-                ret += `margin-bottom: ${calc(bottom)};`;
-            }
-        }
-        if(hasValue(radius)){
-            ret += `border-radius: ${calc(radius)};`;
-        }
-        if(hasValue(border)){
-            ret += `border: ${calc(border)} solid ${borderColor || "#000"};`;
-        } else if(hasValue(borderColor)){
-            ret += `border-color: ${borderColor};`;
-        }
-        
-        if (hasValue(zIndex)) {
-            ret += `z-index: ${zIndex};`;
-        }
-        if (pointer === true) {
-            ret += `cursor: pointer;`;
-        } else if(typeof onClick === "function" && pointer === null){
-            ret += `cursor: pointer;`;
-        }
-        if (flex) {
-            ret += "display:flex;";
-            if (column) {
-                ret += "flex-direction: column;";
-            }
-            if (center) {
-                ret += "justify-content: center;";
-                ret += "align-items: center;";
-            }
-        } else {
-            if (center) {
-                ret += "text-align: center;";
-            }
-        }
-        if (text) {
-            ret += `font-size: ${calc(text)};`;
-        }
-        if (src) {
-            let realSrc = src;
-            if(src.indexOf("data:") === 0){
-                realSrc = src;
-            }else if (src.indexOf("https://") === -1) {
-                realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
-            }
-            ret += `background-image: url(${realSrc});`;
-            if (srcMode === "fill") {
-                ret += `background-size: 100% 100%;`;
-            } else if (srcMode === "cover") {
-                ret += `background-size: cover;`;
-            }else if (srcMode === "contain") {
-                ret += `background-size: contain;`;
-            }
-        }
-        if (color) {
-            ret += `color: ${color};`;
-        }
-        if (style) {
-            ret += style;
-        }
-        if (debug) {
-            console.log("styleStr", ret);
-        }
-        return ret;
-    })();
-</script>
-
-<div
-    role="presentation"
-    on:click={handleOnClick}
-    class="tw-img-div {_class} {setting.useButtonEffect && onClick ? 'click-effect' : ''}"
-    style={styleStr}
->
-    <slot />
-</div>
-
-<style scoped>
-    .tw-img-div {
-        background-position: top center;
-        background-repeat: no-repeat;
-        background-size: 100% auto;
-        flex: none;
-    }
-    .click-effect:active {
-        opacity: 0.85;
-        transform: translateY(1px);
-    }
-</style>

package/Tdiv/index.vue

@@ -1,150 +0,0 @@
-<template>
-  <div role="presentation" :class="['tw-img-div', _class, setting.useButtonEffect && onClick ? 'click-effect' : '']" :style="styleStr" @click="handleOnClick">
-    <slot />
-  </div>
-</template>
-
-<script>
-import setting from "./setting";
-
-export default {
-  name: 'Tdiv',
-  props: {
-    _class: { type: String, default: '' },
-    usePx: { type: Boolean, default: null },
-    style: { type: String, default: '' },
-    src: { type: String, default: '' },
-    width: { type: [Number, String], default: null },
-    height: { type: [Number, String], default: null },
-    absolute: { type: Boolean, default: false },
-    top: { type: [Number, String], default: null },
-    left: { type: [Number, String], default: null },
-    right: { type: [Number, String], default: null },
-    bottom: { type: [Number, String], default: null },
-    zIndex: { type: [Number, String], default: null },
-    pointer: { type: Boolean, default: null },
-    flex: { type: Boolean, default: false },
-    column: { type: Boolean, default: false },
-    center: { type: Boolean, default: false },
-    text: { type: [Number, String], default: null },
-    color: { type: String, default: '' },
-    radius: { type: [Number, String], default: null },
-    border: { type: [Number, String], default: null },
-    borderColor: { type: String, default: null },
-    srcMode: { type: String, default: 'auto' },
-    onClick: { type: Function, default: null },
-    debug: { type: Boolean, default: false },
-    viewportWidth: { type: Number, default: null },
-    viewportUnit: { type: String, default: null },
-  },
-  data() {
-    return {
-      setting,
-    };
-  },
-  computed: {
-    styleStr() {
-      let vWidth = setting.viewportWidth;
-      if (this.viewportWidth) {
-        vWidth = this.viewportWidth;
-      }
-      let vUnit = setting.viewportUnit;
-      if (this.viewportUnit) {
-        vUnit = this.viewportUnit;
-      }
-      let localUsePx = setting.usePx;
-      if (typeof this.usePx === 'boolean') {
-        localUsePx = this.usePx;
-      }
-      const calc = (value) => {
-
-        if (typeof value === 'string' && !isNaN(value)) value = Number(value);
-        if (typeof value === 'number') {
-          if (localUsePx) return value + 'px';
-          let val = ((value / vWidth) * 100).toFixed(4);
-          return `${val}${vUnit}`;
-        }
-        return value;
-      };
-      const hasValue = (value) => value !== null && value !== undefined && value !== '';
-      let ret = '';
-      if (hasValue(this.width)) ret += `width: ${calc(this.width)};`;
-      if (hasValue(this.height)) ret += `height: ${calc(this.height)};`;
-      if (this.absolute) {
-        ret += 'position: absolute;';
-        if (hasValue(this.left)) ret += `left: ${calc(this.left)};`;
-        if (hasValue(this.top)) ret += `top: ${calc(this.top)};`;
-        if (hasValue(this.right)) ret += `right: ${calc(this.right)};`;
-        if (hasValue(this.bottom)) ret += `bottom: ${calc(this.bottom)};`;
-      } else {
-        ret += 'position: relative;';
-        if (hasValue(this.top)) ret += `margin-top: ${calc(this.top)};`;
-        if (hasValue(this.left)) ret += `margin-left: ${calc(this.left)};`;
-        if (hasValue(this.right)) ret += `margin-right: ${calc(this.right)};`;
-        if (hasValue(this.bottom)) ret += `margin-bottom: ${calc(this.bottom)};`;
-      }
-      if (hasValue(this.radius)) ret += `border-radius: ${calc(this.radius)};`;
-      if (hasValue(this.border)) {
-        ret += `border: ${calc(this.border)} solid ${this.borderColor || "#000"};`;
-      } else if(hasValue(this.borderColor)){
-        ret += `border-color: ${this.borderColor};`;
-      }
-      if (hasValue(this.zIndex)) ret += `z-index: ${this.zIndex};`;
-      if (this.pointer === true) {
-        ret += 'cursor: pointer;';
-      } else if (typeof this.onClick === 'function' && this.pointer === null) {
-        ret += 'cursor: pointer;';
-      }
-      if (this.flex) {
-        ret += 'display:flex;';
-        if (this.column) ret += 'flex-direction: column;';
-        if (this.center) {
-          ret += 'justify-content: center;';
-          ret += 'align-items: center;';
-        }
-      } else {
-        if (this.center) ret += 'text-align: center;';
-      }
-      if (this.text) ret += `font-size: ${calc(this.text)};`;
-      if (this.src) {
-        let realSrc = this.src;
-        if (this.src.indexOf('https://') === -1) {
-          realSrc = `https://dynamics-share.tuwan.com/${this.src}?x-oss-process=image/format,webp/ignore-error,1`;
-        }
-        ret += `background-image: url(${realSrc});`;
-        if (this.srcMode === 'fill') {
-          ret += 'background-size: 100% 100%;';
-        } else if (this.srcMode === 'cover') {
-          ret += 'background-size: cover;';
-        }
-      }
-      if (this.color) ret += `color: ${this.color};`;
-      if (this.style) ret += this.style;
-      if (this.debug) console.log('styleStr', ret);
-      return ret;
-    },
-  },
-  methods: {
-    handleOnClick(e) {
-      if (typeof this.onClick === 'function') {
-        this.onClick(e);
-      }
-      this.$emit('click', e);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.tw-img-div {
-  background-position: top center;
-  background-repeat: no-repeat;
-  background-size: 100% auto;
-  flex: none;
-}
-
-.click-effect:active {
-    opacity: 0.85;
-    transform: translateY(1px);
-  }
-</style>