ts-glitter 21.9.2 → 21.9.6

package/lowcode/Entry.js

@@ -151,7 +151,7 @@ export class Entry {
             }
             window.renderClock = (_b = window.renderClock) !== null && _b !== void 0 ? _b : createClock();
             console.log(`Entry-time:`, window.renderClock.stop());
-            glitter.share.editerVersion = 'V_21.9.2';
+            glitter.share.editerVersion = 'V_21.9.6';
             glitter.share.start = new Date();
             const vm = { appConfig: [] };
             window.saasConfig = {

package/lowcode/Entry.ts

@@ -155,7 +155,7 @@ export class Entry {
       }
       (window as any).renderClock = (window as any).renderClock ?? createClock();
       console.log(`Entry-time:`, (window as any).renderClock.stop());
-      glitter.share.editerVersion = 'V_21.9.2';
+      glitter.share.editerVersion = 'V_21.9.6';
       glitter.share.start = new Date();
       const vm = { appConfig: [] };
       (window as any).saasConfig = {

package/lowcode/backend-manager/bg-product.js

@@ -361,7 +361,7 @@ export class BgProduct {
                                 }
                             });
                             vm.loading = false;
-                            gvc.notifyDataChange(vm.id);
+                            setTimeout(() => gvc.notifyDataChange(vm.id), 200);
                         });
                     }
                 },

package/lowcode/backend-manager/bg-product.ts

@@ -442,8 +442,9 @@ export class BgProduct {
                     }
                   }
                 );
+
                 vm.loading = false;
-                gvc.notifyDataChange(vm.id);
+                setTimeout(() => gvc.notifyDataChange(vm.id), 200);
               });
             }
           },

package/lowcode/cms-plugin/app-market-install.js

@@ -0,0 +1,97 @@
+import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { Tool } from '../modules/tool.js';
+import { ApiMarket } from '../glitter-base/route/market.js';
+const html = String.raw;
+const css = String.raw;
+export class AppMarketInstall {
+    static drawAppList(gvc, card_list_id, app_list) {
+        gvc.addStyle(css `
+        .app-card-border{
+          border-radius: 10px;
+          padding-bottom:18px;
+        }
+        .app-card{
+          display: flex;
+          padding: 20px;
+          flex-direction: column;
+          gap: 24px;
+          border-radius: 10px;
+          background: #FFF;
+        }
+      `);
+        return gvc.bindView({
+            bind: card_list_id,
+            view: () => {
+                return app_list.map(app => {
+                    return html `
+            <div class="app-card-border col-12 col-xl-4 ps-3 ps-xl-0 pe-3">
+              <div class="app-card">
+                <div class="d-flex" style="gap: 12px;">
+                  <div class="h-100">
+                    <img src="${app.image}" style="width: 40px;height: 40px;" alt="logo" />
+                  </div>
+                  <div class="d-flex flex-column flex-fill" style="gap: 6px;">
+                    <div class="tx_700" style="line-height: 100%;">${app.name}</div>
+                    <div class="d-flex w-100">
+                      <div class="w-100 tx_yellow_14 d-flex align-items-center" style="gap:4px;">
+                        <i class="fa-solid fa-star"></i>
+                        <div class="tx_yellow_14">${app.rate}</div>
+                        <div class="tx_gray_12 h-100 d-flex align-items-end">(${app.rate_count})</div>
+                      </div>
+                      <div class="ms-auto tx_gray_14">${app.price == 0 ? '免費' : app.price}</div>
+                    </div>
+                    <div class="d-flex tx_gray_14">
+                      ${Tool.truncateString(app.description, 21)}
+                    </div>
+                  </div>
+                </div>
+                <div class="w-100 d-flex justify-content-end" style="gap:12px;">
+                  ${BgWidget.cancel('', '移除')}
+                  <button class="btn btn-gray tx_700" style="color:#393939">查看</button>
+                </div>
+              </div>
+            </div>
+            `;
+                }).join('');
+            }, divCreate: {
+                class: 'd-flex flex-wrap',
+            }
+        });
+    }
+    static main(gvc) {
+        const that = this;
+        const glitter = gvc.glitter;
+        const vm = {
+            id: glitter.getUUID(),
+            card_list_id: glitter.getUUID(),
+            app_list: [],
+        };
+        const dialog = new ShareDialog(gvc.glitter);
+        function getAppList() {
+            ApiMarket.getInstallAppList().then((dd) => {
+                vm.app_list = dd.response;
+                gvc.notifyDataChange(vm.id);
+            });
+        }
+        return gvc.bindView(() => {
+            return {
+                bind: vm.id,
+                dataList: [{ obj: vm, key: 'type' }],
+                view: () => {
+                    if (vm.app_list.length === 0) {
+                        getAppList();
+                    }
+                    return BgWidget.container(html `
+          <div class="tx_700 ps-3" style="font-size: 24px;margin-bottom: 18px;">已安裝APP</div>
+          ${that.drawAppList(gvc, vm.card_list_id, vm.app_list)}
+          `);
+                }, divCreate: {
+                    class: 'd-flex flex-column',
+                    style: 'gap: 24px;'
+                },
+            };
+        });
+    }
+}
+window.glitter.setModule(import.meta.url, AppMarketInstall);

package/lowcode/cms-plugin/app-market-install.ts

@@ -0,0 +1,123 @@
+import { GVC } from '../glitterBundle/GVController.js';
+import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
+import { ApiWallet } from '../glitter-base/route/wallet.js';
+import { UserList } from './user-list.js';
+import { Tool } from '../modules/tool.js';
+import { FilterOptions } from '../cms-plugin/filter-options.js';
+import { ApiUser } from '../glitter-base/route/user.js';
+import { ApiMarket } from '../glitter-base/route/market.js';
+const html=String.raw;
+const css = String.raw;
+
+
+interface App {
+  name: string;
+  image: string;
+  link: string;
+  rate: number;
+  rate_count: number;
+  description: string;
+  tag: string[];
+  price: number;
+}
+export class AppMarketInstall {
+  public static drawAppList(gvc:GVC , card_list_id:string , app_list:App[]){
+    gvc.addStyle(css`
+        .app-card-border{
+          border-radius: 10px;
+          padding-bottom:18px;
+        }
+        .app-card{
+          display: flex;
+          padding: 20px;
+          flex-direction: column;
+          gap: 24px;
+          border-radius: 10px;
+          background: #FFF;
+        }
+      `)
+    return gvc.bindView({
+      bind:card_list_id,
+      view:()=>{
+        return app_list.map(app=>{
+          return html `
+            <div class="app-card-border col-12 col-xl-4 ps-3 ps-xl-0 pe-3">
+              <div class="app-card">
+                <div class="d-flex" style="gap: 12px;">
+                  <div class="h-100">
+                    <img src="${app.image}" style="width: 40px;height: 40px;" alt="logo" />
+                  </div>
+                  <div class="d-flex flex-column flex-fill" style="gap: 6px;">
+                    <div class="tx_700" style="line-height: 100%;">${app.name}</div>
+                    <div class="d-flex w-100">
+                      <div class="w-100 tx_yellow_14 d-flex align-items-center" style="gap:4px;">
+                        <i class="fa-solid fa-star"></i>
+                        <div class="tx_yellow_14">${app.rate}</div>
+                        <div class="tx_gray_12 h-100 d-flex align-items-end">(${app.rate_count})</div>
+                      </div>
+                      <div class="ms-auto tx_gray_14">${app.price == 0 ? '免費' : app.price}</div>
+                    </div>
+                    <div class="d-flex tx_gray_14">
+                      ${Tool.truncateString(app.description, 21)}
+                    </div>
+                  </div>
+                </div>
+                <div class="w-100 d-flex justify-content-end" style="gap:12px;">
+                  ${BgWidget.cancel('','移除')}
+                  <button class="btn btn-gray tx_700" style="color:#393939">查看</button>
+                </div>
+              </div>
+            </div>
+            `
+        }).join('')
+      },divCreate:{
+        class:'d-flex flex-wrap',
+      }
+    })
+
+  }
+  public static main(gvc: GVC) {
+    const that = this;
+    const glitter = gvc.glitter;
+    const vm: {
+      id: string;
+      card_list_id: string;
+      app_list: App[];
+    } = {
+      id: glitter.getUUID(),
+      card_list_id: glitter.getUUID(),
+      app_list: [],
+    };
+    const dialog = new ShareDialog(gvc.glitter);
+    function getAppList() {
+      ApiMarket.getInstallAppList().then((dd: any) => {
+        vm.app_list = dd.response;
+        gvc.notifyDataChange(vm.id);
+      });
+    }
+    return gvc.bindView(() => {
+      return {
+        bind: vm.id,
+        dataList: [{ obj: vm, key: 'type' }],
+        view: () => {
+          if (vm.app_list.length === 0) {
+            getAppList()
+          }
+          return BgWidget.container(html`
+          <div class="tx_700 ps-3" style="font-size: 24px;margin-bottom: 18px;">已安裝APP</div>
+          ${that.drawAppList(gvc,vm.card_list_id,vm.app_list)}
+          `)
+
+        },divCreate:{
+          class:'d-flex flex-column',
+          style:'gap: 24px;'
+        },
+      };
+    });
+  }
+
+}
+
+(window as any).glitter.setModule(import.meta.url, AppMarketInstall);

package/lowcode/cms-plugin/app-market-published.js

@@ -0,0 +1,42 @@
+import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { ApiMarket } from '../glitter-base/route/market.js';
+import { AppMarketInstall } from './app-market-install.js';
+const html = String.raw;
+const css = String.raw;
+export class AppMarketPublished {
+    static main(gvc) {
+        const glitter = gvc.glitter;
+        const vm = {
+            id: glitter.getUUID(),
+            card_list_id: glitter.getUUID(),
+            app_list: [],
+        };
+        const dialog = new ShareDialog(gvc.glitter);
+        function getAppList() {
+            ApiMarket.getPublishedAppList().then((dd) => {
+                vm.app_list = dd.response;
+                gvc.notifyDataChange(vm.id);
+            });
+        }
+        return gvc.bindView(() => {
+            return {
+                bind: vm.id,
+                dataList: [{ obj: vm, key: 'type' }],
+                view: () => {
+                    if (vm.app_list.length === 0) {
+                        getAppList();
+                    }
+                    return BgWidget.container(html `
+          <div class="tx_700 ps-3" style="font-size: 24px;margin-bottom: 18px;">已發佈APP</div>
+          ${AppMarketInstall.drawAppList(gvc, vm.card_list_id, vm.app_list)}
+          `);
+                }, divCreate: {
+                    class: 'd-flex flex-column',
+                    style: 'gap: 24px;'
+                },
+            };
+        });
+    }
+}
+window.glitter.setModule(import.meta.url, AppMarketPublished);

package/lowcode/cms-plugin/app-market-published.ts

@@ -0,0 +1,70 @@
+import { GVC } from '../glitterBundle/GVController.js';
+import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { EditorElem } from '../glitterBundle/plugins/editor-elem.js';
+import { ApiWallet } from '../glitter-base/route/wallet.js';
+import { UserList } from './user-list.js';
+import { Tool } from '../modules/tool.js';
+import { FilterOptions } from '../cms-plugin/filter-options.js';
+import { ApiUser } from '../glitter-base/route/user.js';
+import { ApiMarket } from '../glitter-base/route/market.js';
+import { AppMarketInstall } from './app-market-install.js';
+
+const html=String.raw;
+const css = String.raw;
+
+
+interface App {
+  name: string;
+  image: string;
+  link: string;
+  rate: number;
+  rate_count: number;
+  description: string;
+  tag: string[];
+  price: number;
+}
+export class AppMarketPublished {
+  public static main(gvc: GVC) {
+    const glitter = gvc.glitter;
+    const vm: {
+      id: string;
+      card_list_id:string;
+      app_list: App[];
+    } = {
+      id: glitter.getUUID(),
+      card_list_id:glitter.getUUID(),
+      app_list: [],
+    };
+    const dialog = new ShareDialog(gvc.glitter);
+    function getAppList() {
+      ApiMarket.getPublishedAppList().then((dd: any) => {
+        vm.app_list = dd.response;
+        gvc.notifyDataChange(vm.id);
+      });
+    }
+
+    return gvc.bindView(() => {
+      return {
+        bind: vm.id,
+        dataList: [{ obj: vm, key: 'type' }],
+        view: () => {
+          if (vm.app_list.length === 0) {
+            getAppList();
+          }
+          return BgWidget.container(html`
+          <div class="tx_700 ps-3" style="font-size: 24px;margin-bottom: 18px;">已發佈APP</div>
+          ${AppMarketInstall.drawAppList(gvc , vm.card_list_id , vm.app_list)}
+          `)
+
+        },divCreate:{
+          class:'d-flex flex-column',
+          style:'gap: 24px;'
+        },
+      };
+    });
+  }
+
+}
+
+(window as any).glitter.setModule(import.meta.url, AppMarketPublished);

package/lowcode/cms-plugin/app-market.js

@@ -0,0 +1,286 @@
+import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { Tool } from '../modules/tool.js';
+import { FilterOptions } from '../cms-plugin/filter-options.js';
+import { ApiMarket } from '../glitter-base/route/market.js';
+const html = String.raw;
+const css = String.raw;
+export class AppMarket {
+    static main(gvc) {
+        const glitter = gvc.glitter;
+        const vm = {
+            id: glitter.getUUID(),
+            card_list_id: glitter.getUUID(),
+            tag_list_id: glitter.getUUID(),
+            type: 'landing',
+            banner: {
+                image: 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_ses9s7s5sbs5sbse_%E5%AE%B6%E5%85%B7banner2.png',
+                link: '',
+            },
+            app_list: [],
+            show_app_list: [],
+            tag_list: [],
+            show_tag: '',
+            query: '',
+            orderString: 'name',
+        };
+        const dialog = new ShareDialog(gvc.glitter);
+        const sortByName = () => {
+            return vm.show_app_list.sort((a, b) => a.name.localeCompare(b.name));
+        };
+        const sortByPopularDesc = () => {
+            return vm.show_app_list.sort((a, b) => b.download_count - a.download_count);
+        };
+        const sortByPopularAsc = () => {
+            return sortByPopularDesc().reverse();
+        };
+        const sortByPriceDesc = () => {
+            return vm.show_app_list.sort((a, b) => b.price - a.price);
+        };
+        const sortByPriceAsc = () => {
+            return sortByPriceDesc().reverse();
+        };
+        const sortFun = {
+            name: sortByName,
+            popularity_desc: sortByPopularDesc,
+            popularity_asc: sortByPopularAsc,
+            price_desc: sortByPriceDesc,
+            price_asc: sortByPriceAsc,
+        };
+        function drawBanner() {
+            gvc.addStyle(css `
+        .banner {
+          background-image: url('${vm.banner.image}');
+          background-position: center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          height: 250px;
+          width: 100%;
+        }
+
+        .banner h1 {
+          font-size: 24px;
+          margin-bottom: 10px;
+        }
+
+        .banner p {
+          font-size: 16px;
+          margin-bottom: 20px;
+        }
+
+        .btn {
+          background-color: #fff;
+          color: #4caf50;
+          padding: 10px 20px;
+          font-size: 16px;
+          text-decoration: none;
+          border-radius: 5px;
+          transition: background-color 0.3s ease;
+        }
+
+        .btn:hover {
+          background-color: #45a049; /* Darker green on hover */
+          color: white;
+        }
+      `);
+            return html `<!-- Banner Section -->
+        <div class="banner"></div> `;
+        }
+        function getAppList() {
+            ApiMarket.getAppList().then((dd) => {
+                vm.app_list = dd.response;
+                filterAppTag();
+                gvc.notifyDataChange(vm.id);
+            });
+        }
+        function drawCard(app) {
+            gvc.addStyle(css `
+        .app-card {
+          border-radius: 10px;
+          border: 1px solid #ddd;
+          background: #fff;
+        }
+
+        .card-image {
+          padding-top: 50%;
+          width: 100%;
+          background-size: cover;
+          background-position: center;
+          background-repeat: no-repeat;
+        }
+        .app-card .tag{
+          height: 22px;
+          padding: 2px 8px;
+          border-radius: 5px;
+          background: #EAEAEA;
+          letter-spacing: 0.28px;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      `);
+            function drawTag(tag) {
+                return html `<div class="tag d-flex align-items-center">${tag}</div>
+        `;
+            }
+            return html `
+        <div class="col-6 col-xl-3 px-3 pb-4" style="">
+          <div class="d-flex flex-column app-card">
+            <div class="card-image" style="background-image:url('${app.image}') "></div>
+            <div class="d-flex flex-column " style="gap:10px;padding: 12px;">
+              <div class="d-flex flex-column" style="gap: 6px;">
+                <div class="d-flex flex-column" style="gap: 2px">
+                  <div class="tx_700 tx_normal">${app.name}</div>
+                  <div class="d-flex" style="gap:4px">
+                    <div class="d-flex flex-fill align-items-center" style="gap: 4px;">
+                      <i class="fa-solid fa-star" style="color: #FFB21C;"></i>
+                      <div class="tx_yellow_12">${app.rate}</div>
+                      <div class="tx_gray_12">(${app.rate_count})</div>
+                    </div>
+                    <div class="tx_gray_14" style="letter-spacing: 0.28px;">${app.price == 0 ? '免費' : app.price}</div>
+                  </div>
+                </div>
+                <div class="tx_normal_14 text-break" style="letter-spacing: 0.28px;">
+                  ${Tool.truncateString(app.description, 12)}
+                </div>
+              </div>
+              <div class="d-flex" style="gap: 6px">
+                ${app.tag.map(tag => {
+                return drawTag(tag);
+            }).join('')}
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+        }
+        function filterAppTag() {
+            vm.app_list.forEach(app => {
+                app.tag.forEach(tag => {
+                    if (vm.tag_list.indexOf(tag) == -1) {
+                        vm.tag_list.push(tag);
+                    }
+                });
+            });
+        }
+        function drawTag(tag) {
+            gvc.addStyle(css `
+        .app-tag {
+          display: flex;
+          height: 40px;
+          padding: 6px 18px;
+          justify-content: center;
+          align-items: center;
+          border-radius: 10px;
+          border: 1px solid #ddd;
+          background: #fff;
+          white-space: nowrap;
+        }
+
+        .app-tag-active {
+          background-color: #dddddd;
+        }
+
+        .app-tag:hover {
+          background-color: #dddddd;
+        }
+      `);
+            return html `
+        <div
+          class="app-tag ${vm.show_tag == tag ? 'app-tag-active' : ''}"
+          onclick="${gvc.event(() => {
+                vm.show_tag = vm.show_tag === tag ? '' : tag;
+                gvc.notifyDataChange(vm.id);
+            })}"
+        >
+          ${tag}
+        </div>
+      `;
+        }
+        function drawSearchBar() {
+            return html ` <div class="d-flex w-100" style="gap:14px;margin-bottom: 18px;">
+        ${BgWidget.searchFilter(gvc.event(e => {
+                vm.query = e.value;
+                gvc.notifyDataChange(vm.id);
+            }), vm.query || '', '搜尋APP')}
+        ${BgWidget.updownFilter({
+                gvc,
+                callback: (value) => {
+                    vm.orderString = value;
+                    gvc.notifyDataChange(vm.id);
+                },
+                default: vm.orderString || 'default',
+                options: FilterOptions.appMarketOrderBy,
+            })}
+      </div>`;
+        }
+        return gvc.bindView(() => {
+            return {
+                bind: vm.id,
+                dataList: [{ obj: vm, key: 'type' }],
+                view: () => {
+                    if (vm.type === 'landing') {
+                        if (vm.app_list.length === 0) {
+                            getAppList();
+                        }
+                        vm.show_app_list = vm.show_app_list.length ? vm.show_app_list : vm.app_list;
+                        return html `
+              ${drawBanner()}
+              <div class="px-4">
+                ${BgWidget.mainCard(gvc.bindView({
+                            bind: vm.tag_list_id,
+                            view: () => {
+                                return vm.tag_list
+                                    .map(tag => {
+                                    return drawTag(tag);
+                                })
+                                    .join('');
+                            },
+                            divCreate: {
+                                class: 'd-flex w-100 overflow-scroll',
+                                style: 'gap:10px;margin-bottom:10px',
+                            },
+                        }) +
+                            drawSearchBar() +
+                            gvc.bindView({
+                                bind: vm.card_list_id,
+                                view: () => {
+                                    function filterApp() {
+                                        var _a;
+                                        if (vm.show_tag.length) {
+                                            vm.show_app_list = vm.app_list.filter(app => {
+                                                return app.tag.indexOf(vm.show_tag) != -1;
+                                            });
+                                        }
+                                        else {
+                                            vm.show_app_list = vm.app_list;
+                                        }
+                                        vm.show_app_list = sortFun[(_a = vm.orderString) !== null && _a !== void 0 ? _a : 'name']();
+                                    }
+                                    filterApp();
+                                    return vm.show_app_list
+                                        .map(app => {
+                                        return drawCard(app);
+                                    })
+                                        .join('');
+                                },
+                                divCreate: {
+                                    class: 'd-flex flex-wrap ',
+                                    style: '',
+                                },
+                            }), 'px-3')}
+              </div>
+            `;
+                    }
+                    else {
+                        return ``;
+                    }
+                },
+                divCreate: {
+                    class: 'd-flex flex-column',
+                    style: 'gap: 24px;',
+                },
+            };
+        });
+    }
+}
+window.glitter.setModule(import.meta.url, AppMarket);