py-test-components 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react.js +1 -0
- package/dist/vue.js +1 -0
- package/package.json +19 -1
- package/src/react/index.js +117 -53
package/dist/react.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("React")):"function"==typeof define&&define.amd?define(["React"],n):"object"==typeof exports?exports.PyComponentReact=n(require("React")):e.PyComponentReact=n(e.React)}(Object("undefined"!=typeof self?self:this),e=>(()=>{"use strict";var n={883(n){n.exports=e}},t={};function o(e){var r=t[e];if(void 0!==r)return r.exports;var i=t[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return o.d(n,{a:n}),n},o.d=(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var r={};o.d(r,{default:()=>p});var i=o(883);const c="https://unpkg.com/element-ui/lib/theme-chalk/index.css";let a=!1,u=null;function d(){return new Promise(function(e,n){if("undefined"!=typeof window&&window.PyComponent)return u=window.PyComponent.initStore,void e(window.PyComponent);if("undefined"==typeof document)return void n(new Error("只能在浏览器环境中使用"));const t=document.createElement("script");t.src="/node_modules/py-test-components/dist/py-component.js",t.onload=function(){window.PyComponent?(u=window.PyComponent.initStore,e(window.PyComponent)):n(new Error("组件库加载失败"))},t.onerror=function(){const t=document.createElement("script");t.src="./dist/py-component.js",t.onload=function(){window.PyComponent?(u=window.PyComponent.initStore,e(window.PyComponent)):n(new Error("组件库加载失败"))},t.onerror=function(){n(new Error("无法加载组件库"))},document.head.appendChild(t)},document.head.appendChild(t)})}function f(e,n){return(0,i.forwardRef)(function(t,o){var r=t.propData,u=t.loading,f=t.onChange,p=t.onLoad,s=t.onError,l=t.onRefresh,m=t.onSelectionChange,h=t.onEdit,y=t.onDelete,w=t.onSizeChange,C=t.onPageChange,v={};for(var E in t)t.hasOwnProperty(E)&&!["propData","loading","onChange","onLoad","onError","onRefresh","onSelectionChange","onEdit","onDelete","onSizeChange","onPageChange"].includes(E)&&(v[E]=t[E]);var g=(0,i.useRef)(null),P=(0,i.useState)(!1),S=P[0],b=P[1];return(0,i.useEffect)(function(){"function"==typeof o?o(g.current):o&&(o.current=g.current)},[o]),(0,i.useEffect)(function(){!function(){if(a||"undefined"==typeof document)return;if(document.querySelector('link[href="'+c+'"]'))return void(a=!0);const e=document.createElement("link");e.rel="stylesheet",e.href=c,document.head.appendChild(e),a=!0}(),d().then(function(){b(!0)}).catch(function(e){console.error("[PyComponent] 加载失败:",e)})},[]),(0,i.useEffect)(function(){g.current&&S&&(g.current[n]=r)},[r,S,n]),(0,i.useEffect)(function(){var e=g.current;if(e&&S){var n={change:f,load:p,error:s,refresh:l,"selection-change":m,edit:h,delete:y,"size-change":w,"page-change":C};return Object.keys(n).forEach(function(t){var o=n[t];o&&e.addEventListener(t,o)}),function(){Object.keys(n).forEach(function(t){var o=n[t];o&&e.removeEventListener(t,o)})}}},[S,f,p,s,l,m,h,y,w,C]),S?(0,i.createElement)(e,{ref:g,...v}):u||(0,i.createElement)("div",{style:{padding:20,textAlign:"center"}},"加载中...")})}const p={PyTable:f("py-table","propData"),PyWeather:f("py-weather","propData"),initStore:function(e){return d().then(function(n){if(n.initStore)n.initStore(e);else{if(!u)throw new Error("initStore 不存在");u(e)}})}};return r.default})());
|
package/dist/vue.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("Vue")):"function"==typeof define&&define.amd?define(["Vue"],e):"object"==typeof exports?exports.PyComponentVue=e(require("Vue")):t.PyComponentVue=e(t.Vue)}(Object("undefined"!=typeof self?self:this),t=>(()=>{"use strict";var e={628(t,e,a){a.d(e,{A:()=>o});var n=a(601),i=a.n(n),r=a(314),s=a.n(r)()(i());s.push([t.id,"\n.py-table[data-v-f08eba9c] {\n width: 100%;\n}\n.table-card[data-v-f08eba9c] {\n margin-bottom: 20px;\n}\n.card-header[data-v-f08eba9c] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.title[data-v-f08eba9c] {\n font-size: 16px;\n font-weight: 500;\n}\n.pagination-wrapper[data-v-f08eba9c] {\n margin-top: 20px;\n text-align: right;\n}\n",""]);const o=s},96(t,e,a){a.d(e,{A:()=>o});var n=a(601),i=a.n(n),r=a(314),s=a.n(r)()(i());s.push([t.id,"\n.py-weather[data-v-457c781e] {\n width: 100%;\n max-width: 400px;\n}\n.weather-card[data-v-457c781e] {\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n.loading-wrapper[data-v-457c781e],\n.error-wrapper[data-v-457c781e] {\n padding: 40px;\n text-align: center;\n color: #909399;\n}\n.error-wrapper i[data-v-457c781e] {\n font-size: 48px;\n color: #F56C6C;\n display: block;\n margin-bottom: 16px;\n}\n.loading-wrapper i[data-v-457c781e] {\n font-size: 32px;\n margin-right: 8px;\n}\n.weather-content[data-v-457c781e] {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 24px;\n}\n.weather-header[data-v-457c781e] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n}\n.location[data-v-457c781e] {\n display: flex;\n align-items: center;\n font-size: 18px;\n}\n.location i[data-v-457c781e] {\n margin-right: 8px;\n}\n.city[data-v-457c781e] {\n font-weight: 500;\n}\n.date[data-v-457c781e] {\n font-size: 14px;\n opacity: 0.9;\n}\n.weather-main[data-v-457c781e] {\n text-align: center;\n margin-bottom: 24px;\n}\n.temperature[data-v-457c781e] {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n}\n.temp-value[data-v-457c781e] {\n font-size: 72px;\n font-weight: 300;\n line-height: 1;\n}\n.temp-unit[data-v-457c781e] {\n font-size: 24px;\n margin-top: 8px;\n opacity: 0.8;\n}\n.weather-desc[data-v-457c781e] {\n margin-top: 12px;\n font-size: 18px;\n opacity: 0.9;\n}\n.weather-desc i[data-v-457c781e] {\n font-size: 24px;\n margin-right: 8px;\n}\n.weather-details[data-v-457c781e] {\n display: flex;\n justify-content: space-around;\n padding: 16px 0;\n border-top: 1px solid rgba(255, 255, 255, 0.2);\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n.detail-item[data-v-457c781e] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n}\n.detail-item i[data-v-457c781e] {\n font-size: 20px;\n opacity: 0.8;\n}\n.detail-item .label[data-v-457c781e] {\n font-size: 12px;\n opacity: 0.7;\n}\n.detail-item .value[data-v-457c781e] {\n font-size: 14px;\n font-weight: 500;\n}\n.weather-forecast[data-v-457c781e] {\n margin-top: 16px;\n}\n.forecast-title[data-v-457c781e] {\n font-size: 14px;\n margin-bottom: 12px;\n opacity: 0.9;\n}\n.forecast-list[data-v-457c781e] {\n display: flex;\n justify-content: space-between;\n}\n.forecast-item[data-v-457c781e] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n}\n.forecast-item .day[data-v-457c781e] {\n opacity: 0.8;\n}\n.forecast-item i[data-v-457c781e] {\n font-size: 20px;\n}\n.forecast-item .temp[data-v-457c781e] {\n opacity: 0.9;\n}\n",""]);const o=s},314(t){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var a="",n=void 0!==e[5];return e[4]&&(a+="@supports (".concat(e[4],") {")),e[2]&&(a+="@media ".concat(e[2]," {")),n&&(a+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),a+=t(e),n&&(a+="}"),e[2]&&(a+="}"),e[4]&&(a+="}"),a}).join("")},e.i=function(t,a,n,i,r){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(n)for(var o=0;o<this.length;o++){var c=this[o][0];null!=c&&(s[c]=!0)}for(var l=0;l<t.length;l++){var d=[].concat(t[l]);n&&s[d[0]]||(void 0!==r&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),a&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=a):d[2]=a),i&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=i):d[4]="".concat(i)),e.push(d))}},e}},601(t){t.exports=function(t){return t[1]}},72(t){var e=[];function a(t){for(var a=-1,n=0;n<e.length;n++)if(e[n].identifier===t){a=n;break}return a}function n(t,n){for(var r={},s=[],o=0;o<t.length;o++){var c=t[o],l=n.base?c[0]+n.base:c[0],d=r[l]||0,p="".concat(l," ").concat(d);r[l]=d+1;var h=a(p),u={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==h)e[h].references++,e[h].updater(u);else{var f=i(u,n);n.byIndex=o,e.splice(o,0,{identifier:p,updater:f,references:1})}s.push(p)}return s}function i(t,e){var a=e.domAPI(e);return a.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;a.update(t=e)}else a.remove()}}t.exports=function(t,i){var r=n(t=t||[],i=i||{});return function(t){t=t||[];for(var s=0;s<r.length;s++){var o=a(r[s]);e[o].references--}for(var c=n(t,i),l=0;l<r.length;l++){var d=a(r[l]);0===e[d].references&&(e[d].updater(),e.splice(d,1))}r=c}}},659(t){var e={};t.exports=function(t,a){var n=function(t){if(void 0===e[t]){var a=document.querySelector(t);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(t){a=null}e[t]=a}return e[t]}(t);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(a)}},540(t){t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},56(t,e,a){t.exports=function(t){var e=a.nc;e&&t.setAttribute("nonce",e)}},825(t){t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(a){!function(t,e,a){var n="";a.supports&&(n+="@supports (".concat(a.supports,") {")),a.media&&(n+="@media ".concat(a.media," {"));var i=void 0!==a.layer;i&&(n+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),n+=a.css,i&&(n+="}"),a.media&&(n+="}"),a.supports&&(n+="}");var r=a.sourceMap;r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleTagTransform(n,t,e.options)}(e,t,a)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},113(t){t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},508(e){e.exports=t}},a={};function n(t){var i=a[t];if(void 0!==i)return i.exports;var r=a[t]={id:t,exports:{}};return e[t](r,r.exports,n),r.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var a in e)n.o(e,a)&&!n.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nc=void 0;var i={};n.d(i,{default:()=>O});var r=function(){var t=this,e=t._self._c;return e("div",{staticClass:"py-table"},[e("el-card",{staticClass:"table-card"},[e("div",{staticClass:"card-header",attrs:{slot:"header"},slot:"header"},[e("span",{staticClass:"title"},[t._v(t._s(t.config.title||"数据表格"))]),t._v(" "),e("div",{staticClass:"actions"},[!1!==t.config.showRefresh?e("el-button",{attrs:{type:"text",icon:"el-icon-refresh"},on:{click:t.refreshData}},[t._v("\n 刷新\n ")]):t._e()],1)]),t._v(" "),e("el-table",{directives:[{name:"loading",rawName:"v-loading",value:t.loading,expression:"loading"}],attrs:{data:t.tableData,stripe:!1!==t.config.stripe,border:!0===t.config.border,height:t.config.height},on:{"selection-change":t.handleSelectionChange}},[t.config.showSelection?e("el-table-column",{attrs:{type:"selection",width:"55"}}):t._e(),t._v(" "),!1!==t.config.showIndex?e("el-table-column",{attrs:{type:"index",label:"序号",width:"60"}}):t._e(),t._v(" "),t._l(t.columns,function(a){return e("el-table-column",{key:a.prop,attrs:{prop:a.prop,label:a.label,width:a.width,"min-width":a.minWidth,sortable:a.sortable},scopedSlots:t._u([{key:"default",fn:function(n){return[a.formatter?e("span",[t._v("\n "+t._s(a.formatter(n.row[a.prop],n.row))+"\n ")]):"date"===a.type?e("span",[t._v("\n "+t._s(t.formatDate(n.row[a.prop]))+"\n ")]):"status"===a.type?e("span",[e("el-tag",{attrs:{type:t.getStatusType(n.row[a.prop])}},[t._v("\n "+t._s(n.row[a.prop])+"\n ")])],1):e("span",[t._v("\n "+t._s(n.row[a.prop])+"\n ")])]}}],null,!0)})}),t._v(" "),!1!==t.config.showActions?e("el-table-column",{attrs:{label:"操作",width:"150",fixed:"right"},scopedSlots:t._u([{key:"default",fn:function(a){return[e("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){return t.handleEdit(a.row)}}},[t._v("\n 编辑\n ")]),t._v(" "),e("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){return t.handleDelete(a.row)}}},[t._v("\n 删除\n ")])]}}],null,!1,3347720758)}):t._e()],2),t._v(" "),!1!==t.config.pagination?e("div",{staticClass:"pagination-wrapper"},[e("el-pagination",{attrs:{"current-page":t.currentPage,"page-size":t.pageSize,"page-sizes":[10,20,50,100],total:t.total,layout:"total, sizes, prev, pager, next, jumper"},on:{"size-change":t.handleSizeChange,"current-change":t.handlePageChange}})],1):t._e()],1)],1)};r._withStripped=!0;var s=n(508),o=n.n(s);const c=o().observable({apiKey:"",baseUrl:"",userInfo:null}),l={get:t=>c[t],set(t,e){c[t]=e},setMultiple(t){Object.assign(c,t)},subscribe:t=>o().watch(()=>c,(e,a)=>{t(e,a)},{deep:!0}),getState:()=>c},d={baseURL:"",timeout:1e4,headers:{"Content-Type":"application/json"}};function p(t,e={}){const a={...d,...e,headers:{...d.headers,...e.headers}},n=a.baseURL?`${a.baseURL}${t}`:t,i=new AbortController,r=setTimeout(()=>i.abort(),a.timeout);return fetch(n,{...a,signal:i.signal}).then(t=>{if(clearTimeout(r),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const e=t.headers.get("content-type");return e&&e.includes("application/json")?t.json():t.text()}).catch(t=>{if(clearTimeout(r),"AbortError"===t.name)throw new Error("Request timeout");throw t})}function h(t,e={},a={}){const n=Object.keys(e).map(t=>`${encodeURIComponent(t)}=${encodeURIComponent(e[t])}`).join("&");return p(n?`${t}?${n}`:t,{method:"GET",...a})}function u(){return l.get("baseUrl")||""}function f(){const t=l.get("apiKey")||"";return t?{"X-API-Key":t}:{}}const v=t=>h("/api/weather",{city:t},{baseURL:u(),headers:f()}),g=t=>h("/api/weather/forecast",{city:t},{baseURL:u(),headers:f()}),m=(t={})=>h("/api/table/data",t,{baseURL:u(),headers:f()}),y={name:"PyTable",props:{propData:{default:null}},data:()=>({tableData:[],loading:!1,currentPage:1,pageSize:10,total:0,selectedRows:[]}),computed:{config(){return this.propData||{}},columns(){return this.config.columns||[]}},mounted(){this.loadData();const t=l.get("baseUrl");t&&console.log("[PyTable] baseUrl from store:",t)},methods:{async loadData(){if(this.config.data)return this.tableData=this.config.data,void(this.total=this.tableData.length);if(!1!==this.config.api)try{this.loading=!0;const t={page:this.currentPage,size:this.pageSize,...this.config.params},e=await m(t),a=this.config.dataPath||"data",n=this.config.totalPath||"total";this.tableData=this.getPathValue(e,a)||[],this.total=this.getPathValue(e,n)||0}catch(t){console.error("[PyTable] 加载数据失败:",t),this.$message.error("加载数据失败")}finally{this.loading=!1}},getPathValue:(t,e)=>e.split(".").reduce((t,e)=>t&&t[e],t),refreshData(){this.currentPage=1,this.loadData(),this.$emit("refresh")},handleSizeChange(t){this.pageSize=t,this.loadData(),this.$emit("size-change",t)},handlePageChange(t){this.currentPage=t,this.loadData(),this.$emit("page-change",t)},handleSelectionChange(t){this.selectedRows=t,this.$emit("selection-change",t)},handleEdit(t){this.$emit("edit",t)},handleDelete(t){this.$emit("delete",t)},formatDate:t=>t?new Date(t).toLocaleDateString("zh-CN"):"",getStatusType:t=>({active:"success",pending:"warning",disabled:"info",error:"danger"}[t]||"")}};var w=n(72),b=n.n(w),_=n(825),x=n.n(_),C=n(659),D=n.n(C),S=n(56),z=n.n(S),P=n(540),T=n.n(P),j=n(113),$=n.n(j),A=n(628),k={};function R(t,e,a,n,i,r,s,o){var c,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=a,l._compiled=!0),n&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):i&&(c=o?function(){i.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:i),c)if(l.functional){l._injectStyles=c;var d=l.render;l.render=function(t,e){return c.call(e),d(t,e)}}else{var p=l.beforeCreate;l.beforeCreate=p?[].concat(p,c):[c]}return{exports:t,options:l}}k.styleTagTransform=$(),k.setAttributes=z(),k.insert=D().bind(null,"head"),k.domAPI=x(),k.insertStyleElement=T(),b()(A.A,k),A.A&&A.A.locals&&A.A.locals;const E=R(y,r,[],!1,null,"f08eba9c",null).exports;var I=function(){var t=this,e=t._self._c;return e("div",{staticClass:"py-weather"},[e("el-card",{staticClass:"weather-card",attrs:{"body-style":{padding:"0px"}}},[t.loading?e("div",{staticClass:"loading-wrapper"},[e("i",{staticClass:"el-icon-loading"}),t._v(" "),e("span",[t._v("加载天气数据...")])]):t.error?e("div",{staticClass:"error-wrapper"},[e("i",{staticClass:"el-icon-warning-outline"}),t._v(" "),e("span",[t._v(t._s(t.error))]),t._v(" "),e("el-button",{attrs:{type:"text"},on:{click:t.loadWeather}},[t._v("重试")])],1):e("div",{staticClass:"weather-content"},[e("div",{staticClass:"weather-header"},[e("div",{staticClass:"location"},[e("i",{staticClass:"el-icon-location"}),t._v(" "),e("span",{staticClass:"city"},[t._v(t._s(t.displayCity))])]),t._v(" "),e("div",{staticClass:"date"},[t._v(t._s(t.currentDate))])]),t._v(" "),e("div",{staticClass:"weather-main"},[e("div",{staticClass:"temperature"},[e("span",{staticClass:"temp-value"},[t._v(t._s(t.weatherData.temperature))]),t._v(" "),e("span",{staticClass:"temp-unit"},[t._v("°C")])]),t._v(" "),e("div",{staticClass:"weather-desc"},[e("i",{class:t.weatherIcon}),t._v(" "),e("span",[t._v(t._s(t.weatherData.description))])])]),t._v(" "),e("div",{staticClass:"weather-details"},[e("div",{staticClass:"detail-item"},[e("i",{staticClass:"el-icon-moisture"}),t._v(" "),e("span",{staticClass:"label"},[t._v("湿度")]),t._v(" "),e("span",{staticClass:"value"},[t._v(t._s(t.weatherData.humidity)+"%")])]),t._v(" "),e("div",{staticClass:"detail-item"},[e("i",{staticClass:"el-icon-wind-power"}),t._v(" "),e("span",{staticClass:"label"},[t._v("风速")]),t._v(" "),e("span",{staticClass:"value"},[t._v(t._s(t.weatherData.windSpeed)+" km/h")])]),t._v(" "),e("div",{staticClass:"detail-item"},[e("i",{staticClass:"el-icon-view"}),t._v(" "),e("span",{staticClass:"label"},[t._v("能见度")]),t._v(" "),e("span",{staticClass:"value"},[t._v(t._s(t.weatherData.visibility)+" km")])])]),t._v(" "),t.config.showForecast&&t.forecast.length>0?e("div",{staticClass:"weather-forecast"},[e("div",{staticClass:"forecast-title"},[t._v("未来预报")]),t._v(" "),e("div",{staticClass:"forecast-list"},t._l(t.forecast,function(a,n){return e("div",{key:n,staticClass:"forecast-item"},[e("span",{staticClass:"day"},[t._v(t._s(a.day))]),t._v(" "),e("i",{class:t.getWeatherIcon(a.weather)}),t._v(" "),e("span",{staticClass:"temp"},[t._v(t._s(a.low)+"° - "+t._s(a.high)+"°")])])}),0)]):t._e()])])],1)};I._withStripped=!0;const U={name:"PyWeather",props:{propData:{default:null}},data:()=>({loading:!1,error:"",weatherData:{temperature:"--",description:"--",humidity:"--",windSpeed:"--",visibility:"--"},forecast:[]}),computed:{config(){return this.propData||{}},displayCity(){return this.config.city||this.weatherData.city||"北京"},currentDate:()=>(new Date).toLocaleDateString("zh-CN",{year:"numeric",month:"long",day:"numeric",weekday:"long"}),weatherIcon(){return{晴:"el-icon-sunny",多云:"el-icon-cloudy-and-sunny",阴:"el-icon-cloudy",雨:"el-icon-heavy-rain",雪:"el-icon-light-snow",雾:"el-icon-foggy",霾:"el-icon-foggy"}[this.weatherData.description]||"el-icon-sunny"}},mounted(){this.loadWeather()},watch:{"config.city":{handler(){this.loadWeather()}}},methods:{async loadWeather(){if(this.config.mockData)return this.weatherData={...this.config.mockData},void(this.config.forecast&&(this.forecast=this.config.forecast));try{this.loading=!0,this.error="";const t=this.config.city||"北京",e=await v(t);if(this.weatherData={city:t,temperature:e.temperature||25,description:e.weather||"晴",humidity:e.humidity||60,windSpeed:e.windSpeed||10,visibility:e.visibility||10,...e},this.config.showForecast){const e=await g(t);this.forecast=e.data||this.getDefaultForecast()}this.$emit("load",this.weatherData)}catch(t){console.error("[PyWeather] 加载天气失败:",t),this.error="获取天气数据失败",this.$emit("error",t)}finally{this.loading=!1}},getDefaultForecast:()=>["明天","后天","周三","周四","周五"].map(t=>({day:t,weather:"晴",high:28,low:18})),getWeatherIcon:t=>({晴:"el-icon-sunny",多云:"el-icon-cloudy-and-sunny",阴:"el-icon-cloudy",雨:"el-icon-heavy-rain",雪:"el-icon-light-snow"}[t]||"el-icon-sunny")}};var L=n(96),V={};V.styleTagTransform=$(),V.setAttributes=z(),V.insert=D().bind(null,"head"),V.domAPI=x(),V.insertStyleElement=T(),b()(L.A,V),L.A&&L.A.locals&&L.A.locals;const O={PyTable:E,PyWeather:R(U,I,[],!1,null,"457c781e",null).exports,initStore:function(t){t&&"object"==typeof t?(Object.keys(t).forEach(e=>{l.set(e,t[e])}),console.log("[PyComponent] Store 已初始化")):console.warn("[PyComponent] initStore 需要传入配置对象")}};return i.default})());
|
package/package.json
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "py-test-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "跨框架组件库 - Vue 2 组件可被 React 使用",
|
|
5
5
|
"main": "dist/py-component.js",
|
|
6
6
|
"module": "dist/py-component.esm.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/py-component.esm.js",
|
|
10
|
+
"require": "./dist/py-component.js",
|
|
11
|
+
"default": "./dist/py-component.esm.js"
|
|
12
|
+
},
|
|
13
|
+
"./vue": {
|
|
14
|
+
"import": "./dist/vue.js",
|
|
15
|
+
"require": "./dist/vue.js",
|
|
16
|
+
"default": "./dist/vue.js"
|
|
17
|
+
},
|
|
18
|
+
"./react": {
|
|
19
|
+
"import": "./dist/react.js",
|
|
20
|
+
"require": "./dist/react.js",
|
|
21
|
+
"default": "./dist/react.js"
|
|
22
|
+
},
|
|
23
|
+
"./package.json": "./package.json"
|
|
24
|
+
},
|
|
7
25
|
"files": [
|
|
8
26
|
"dist",
|
|
9
27
|
"src"
|
package/src/react/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
|
1
|
+
import React, { forwardRef, useEffect, useRef, useState, createElement } from 'react';
|
|
2
2
|
|
|
3
3
|
// ElementUI CSS URL
|
|
4
4
|
const ELEMENT_UI_CSS = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
|
|
@@ -6,6 +6,9 @@ const ELEMENT_UI_CSS = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
|
|
|
6
6
|
// 标记 CSS 是否已注入
|
|
7
7
|
let cssInjected = false;
|
|
8
8
|
|
|
9
|
+
// 存储 initStore 函数
|
|
10
|
+
let storeInitFn = null;
|
|
11
|
+
|
|
9
12
|
/**
|
|
10
13
|
* 注入 ElementUI CSS
|
|
11
14
|
*/
|
|
@@ -13,7 +16,7 @@ function injectElementUICSS() {
|
|
|
13
16
|
if (cssInjected || typeof document === 'undefined') return;
|
|
14
17
|
|
|
15
18
|
// 检查是否已存在
|
|
16
|
-
const existing = document.querySelector(
|
|
19
|
+
const existing = document.querySelector('link[href="' + ELEMENT_UI_CSS + '"]');
|
|
17
20
|
if (existing) {
|
|
18
21
|
cssInjected = true;
|
|
19
22
|
return;
|
|
@@ -26,32 +29,94 @@ function injectElementUICSS() {
|
|
|
26
29
|
cssInjected = true;
|
|
27
30
|
}
|
|
28
31
|
|
|
32
|
+
/**
|
|
33
|
+
* 加载主组件库
|
|
34
|
+
*/
|
|
35
|
+
function loadMainLibrary() {
|
|
36
|
+
return new Promise(function(resolve, reject) {
|
|
37
|
+
// 如果已经加载过
|
|
38
|
+
if (typeof window !== 'undefined' && window.PyComponent) {
|
|
39
|
+
storeInitFn = window.PyComponent.initStore;
|
|
40
|
+
resolve(window.PyComponent);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// 动态加载脚本
|
|
45
|
+
if (typeof document === 'undefined') {
|
|
46
|
+
reject(new Error('只能在浏览器环境中使用'));
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const script = document.createElement('script');
|
|
51
|
+
// 使用 CDN 或相对路径加载构建产物
|
|
52
|
+
script.src = '/node_modules/py-test-components/dist/py-component.js';
|
|
53
|
+
script.onload = function() {
|
|
54
|
+
if (window.PyComponent) {
|
|
55
|
+
storeInitFn = window.PyComponent.initStore;
|
|
56
|
+
resolve(window.PyComponent);
|
|
57
|
+
} else {
|
|
58
|
+
reject(new Error('组件库加载失败'));
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
script.onerror = function() {
|
|
62
|
+
// 尝试备用路径
|
|
63
|
+
const script2 = document.createElement('script');
|
|
64
|
+
script2.src = './dist/py-component.js';
|
|
65
|
+
script2.onload = function() {
|
|
66
|
+
if (window.PyComponent) {
|
|
67
|
+
storeInitFn = window.PyComponent.initStore;
|
|
68
|
+
resolve(window.PyComponent);
|
|
69
|
+
} else {
|
|
70
|
+
reject(new Error('组件库加载失败'));
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
script2.onerror = function() {
|
|
74
|
+
reject(new Error('无法加载组件库'));
|
|
75
|
+
};
|
|
76
|
+
document.head.appendChild(script2);
|
|
77
|
+
};
|
|
78
|
+
document.head.appendChild(script);
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
|
|
29
82
|
/**
|
|
30
83
|
* 包装 Vue Web Component 为 React 组件
|
|
31
84
|
* @param {string} tagName - 自定义元素标签名
|
|
32
85
|
* @param {string} dataProp - 数据属性名
|
|
33
86
|
* @returns {React.Component} React 组件
|
|
34
87
|
*/
|
|
35
|
-
function wrapVueComponent(tagName, dataProp
|
|
36
|
-
return forwardRef(function WrappedComponent({
|
|
37
|
-
propData,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
88
|
+
function wrapVueComponent(tagName, dataProp) {
|
|
89
|
+
return forwardRef(function WrappedComponent(props, ref) {
|
|
90
|
+
var propData = props.propData,
|
|
91
|
+
loading = props.loading,
|
|
92
|
+
onChange = props.onChange,
|
|
93
|
+
onLoad = props.onLoad,
|
|
94
|
+
onError = props.onError,
|
|
95
|
+
onRefresh = props.onRefresh,
|
|
96
|
+
onSelectionChange = props.onSelectionChange,
|
|
97
|
+
onEdit = props.onEdit,
|
|
98
|
+
onDelete = props.onDelete,
|
|
99
|
+
onSizeChange = props.onSizeChange,
|
|
100
|
+
onPageChange = props.onPageChange,
|
|
101
|
+
restProps = {};
|
|
102
|
+
|
|
103
|
+
// 提取其他 props
|
|
104
|
+
for (var key in props) {
|
|
105
|
+
if (props.hasOwnProperty(key) &&
|
|
106
|
+
!['propData', 'loading', 'onChange', 'onLoad', 'onError',
|
|
107
|
+
'onRefresh', 'onSelectionChange', 'onEdit', 'onDelete',
|
|
108
|
+
'onSizeChange', 'onPageChange'].includes(key)) {
|
|
109
|
+
restProps[key] = props[key];
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
var innerRef = useRef(null);
|
|
114
|
+
var _useState = useState(false);
|
|
115
|
+
var isReady = _useState[0];
|
|
116
|
+
var setIsReady = _useState[1];
|
|
52
117
|
|
|
53
118
|
// 合并 ref
|
|
54
|
-
useEffect(()
|
|
119
|
+
useEffect(function() {
|
|
55
120
|
if (typeof ref === 'function') {
|
|
56
121
|
ref(innerRef.current);
|
|
57
122
|
} else if (ref) {
|
|
@@ -60,32 +125,31 @@ function wrapVueComponent(tagName, dataProp = 'propData') {
|
|
|
60
125
|
}, [ref]);
|
|
61
126
|
|
|
62
127
|
// 加载组件库和 CSS
|
|
63
|
-
useEffect(()
|
|
128
|
+
useEffect(function() {
|
|
64
129
|
injectElementUICSS();
|
|
65
130
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
.then(() => {
|
|
131
|
+
loadMainLibrary()
|
|
132
|
+
.then(function() {
|
|
69
133
|
setIsReady(true);
|
|
70
134
|
})
|
|
71
|
-
.catch(err
|
|
72
|
-
console.error(
|
|
135
|
+
.catch(function(err) {
|
|
136
|
+
console.error('[PyComponent] 加载失败:', err);
|
|
73
137
|
});
|
|
74
138
|
}, []);
|
|
75
139
|
|
|
76
140
|
// 设置 propData 到 DOM property
|
|
77
|
-
useEffect(()
|
|
141
|
+
useEffect(function() {
|
|
78
142
|
if (innerRef.current && isReady) {
|
|
79
143
|
innerRef.current[dataProp] = propData;
|
|
80
144
|
}
|
|
81
145
|
}, [propData, isReady, dataProp]);
|
|
82
146
|
|
|
83
147
|
// 绑定事件
|
|
84
|
-
useEffect(()
|
|
85
|
-
|
|
148
|
+
useEffect(function() {
|
|
149
|
+
var el = innerRef.current;
|
|
86
150
|
if (!el || !isReady) return;
|
|
87
151
|
|
|
88
|
-
|
|
152
|
+
var events = {
|
|
89
153
|
'change': onChange,
|
|
90
154
|
'load': onLoad,
|
|
91
155
|
'error': onError,
|
|
@@ -97,14 +161,16 @@ function wrapVueComponent(tagName, dataProp = 'propData') {
|
|
|
97
161
|
'page-change': onPageChange
|
|
98
162
|
};
|
|
99
163
|
|
|
100
|
-
Object.
|
|
164
|
+
Object.keys(events).forEach(function(eventName) {
|
|
165
|
+
var handler = events[eventName];
|
|
101
166
|
if (handler) {
|
|
102
167
|
el.addEventListener(eventName, handler);
|
|
103
168
|
}
|
|
104
169
|
});
|
|
105
170
|
|
|
106
|
-
return ()
|
|
107
|
-
Object.
|
|
171
|
+
return function() {
|
|
172
|
+
Object.keys(events).forEach(function(eventName) {
|
|
173
|
+
var handler = events[eventName];
|
|
108
174
|
if (handler) {
|
|
109
175
|
el.removeEventListener(eventName, handler);
|
|
110
176
|
}
|
|
@@ -114,19 +180,21 @@ function wrapVueComponent(tagName, dataProp = 'propData') {
|
|
|
114
180
|
|
|
115
181
|
// 显示 loading 状态
|
|
116
182
|
if (!isReady) {
|
|
117
|
-
return loading ||
|
|
183
|
+
return loading || createElement('div', {
|
|
184
|
+
style: { padding: 20, textAlign: 'center' }
|
|
185
|
+
}, '加载中...');
|
|
118
186
|
}
|
|
119
187
|
|
|
120
|
-
return
|
|
188
|
+
return createElement(tagName, {
|
|
121
189
|
ref: innerRef,
|
|
122
|
-
...
|
|
190
|
+
...restProps
|
|
123
191
|
});
|
|
124
192
|
});
|
|
125
193
|
}
|
|
126
194
|
|
|
127
195
|
// 创建组件
|
|
128
|
-
export
|
|
129
|
-
export
|
|
196
|
+
export var PyTable = wrapVueComponent('py-table', 'propData');
|
|
197
|
+
export var PyWeather = wrapVueComponent('py-weather', 'propData');
|
|
130
198
|
|
|
131
199
|
/**
|
|
132
200
|
* 初始化 Store
|
|
@@ -134,23 +202,19 @@ export const PyWeather = wrapVueComponent('py-weather', 'propData');
|
|
|
134
202
|
* @returns {Promise<void>}
|
|
135
203
|
*/
|
|
136
204
|
export function initStore(config) {
|
|
137
|
-
return
|
|
138
|
-
|
|
139
|
-
.
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
reject(new Error('initStore 不存在'));
|
|
146
|
-
}
|
|
147
|
-
})
|
|
148
|
-
.catch(reject);
|
|
205
|
+
return loadMainLibrary().then(function(module) {
|
|
206
|
+
if (module.initStore) {
|
|
207
|
+
module.initStore(config);
|
|
208
|
+
} else if (storeInitFn) {
|
|
209
|
+
storeInitFn(config);
|
|
210
|
+
} else {
|
|
211
|
+
throw new Error('initStore 不存在');
|
|
212
|
+
}
|
|
149
213
|
});
|
|
150
214
|
}
|
|
151
215
|
|
|
152
216
|
export default {
|
|
153
|
-
PyTable,
|
|
154
|
-
PyWeather,
|
|
155
|
-
initStore
|
|
217
|
+
PyTable: PyTable,
|
|
218
|
+
PyWeather: PyWeather,
|
|
219
|
+
initStore: initStore
|
|
156
220
|
};
|