@cmstops/pro-compo 0.1.0 → 0.1.2

package/es/appCenter/style/index.css

@@ -0,0 +1,90 @@
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+.app-list-wrap {
+  position: relative;
+  padding: 10px;
+}
+.app-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0px 15px;
+}
+.ul-list {
+  list-style: none;
+  overflow: hidden;
+  width: 435px !important;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+.ul-list .li_item {
+  float: left;
+  width: 85px;
+  height: 90px;
+  text-align: center;
+  margin: 13px 0;
+  position: relative;
+}
+.ul-list .li_item .icon-logo .svg-icon {
+  width: 4em;
+  height: 3.5em;
+}
+.ul-list .li_item:hover {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ul-list .li_item:hover .icon-gengduo {
+  display: block;
+}
+.ul-list .li_item .wrap_icon {
+  width: 70px;
+  display: inline-block;
+  margin-top: 6px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon-logo {
+  width: 70px;
+  height: 50px;
+  margin-bottom: 4px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon-logo img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ul-list .li_item .wrap_icon .wrap_ .shortcut-logo {
+  line-height: 77px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .shortcut-logo img {
+  width: 35px;
+  height: 35px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon_title {
+  width: 73px;
+  height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ul-list .li_item .wrap_icon .quick-add .icon-logo {
+  width: 40px;
+  height: 40px;
+  margin: 5px auto 9px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.12);
+  border-radius: 50%;
+}
+.ul-list .li_item .wrap_icon .quick-add .icon-logo i {
+  line-height: 40px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+.ul-list .li_item .icon-gengduo {
+  display: none;
+  position: absolute;
+  top: 2px;
+  right: 4px;
+}

package/es/appCenter/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/appCenter/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/es/appCenter/style/index.less

@@ -0,0 +1,100 @@
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+.app-list-wrap {
+  position: relative;
+  padding: 10px;
+}
+.app-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0px 15px;
+}
+.ul-list {
+  list-style: none;
+  overflow: hidden;
+  width: 435px !important;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  .li_item {
+    float: left;
+    width: 85px;
+    height: 90px;
+    text-align: center;
+    // margin-left: 16px;
+    margin: 13px 0;
+    position: relative;
+    .icon-logo {
+      .svg-icon {
+        width: 4em;
+        height: 3.5em;
+      }
+    }
+    &:hover {
+      // transition: ease-out 0.2s;
+      // transform: scale(1.1);
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      cursor: pointer;
+      .icon-gengduo {
+        display: block;
+      }
+    }
+    .wrap_icon {
+      width: 70px;
+      display: inline-block;
+      margin-top: 6px;
+      .wrap_ {
+        .icon-logo {
+          width: 70px;
+          height: 50px;
+          margin-bottom: 4px;
+          img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .shortcut-logo {
+          line-height: 77px;
+          img {
+            width: 35px;
+            height: 35px;
+          }
+        }
+        .icon_title {
+          width: 73px;
+          height: 20px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      .quick-add {
+        .icon-logo {
+          width: 40px;
+          height: 40px;
+          margin: 5px auto 9px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.12);
+          border-radius: 50%;
+          i {
+            line-height: 40px;
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    .icon-gengduo {
+      display: none;
+      position: absolute;
+      top: 2px;
+      right: 4px;
+    }
+  }
+}
+

package/es/button/style/css.js

@@ -1 +1 @@
-import "../../index.css";
+import "./index.css";

package/es/button/style/index.js

@@ -1 +1 @@
-import "../../index.less";
+import "./index.less";

package/es/index.css

@@ -2,3 +2,93 @@
   height: auto;
   padding: 20px;
 }
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+.app-list-wrap {
+  position: relative;
+  padding: 10px;
+}
+.app-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0px 15px;
+}
+.ul-list {
+  list-style: none;
+  overflow: hidden;
+  width: 435px !important;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+.ul-list .li_item {
+  float: left;
+  width: 85px;
+  height: 90px;
+  text-align: center;
+  margin: 13px 0;
+  position: relative;
+}
+.ul-list .li_item .icon-logo .svg-icon {
+  width: 4em;
+  height: 3.5em;
+}
+.ul-list .li_item:hover {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ul-list .li_item:hover .icon-gengduo {
+  display: block;
+}
+.ul-list .li_item .wrap_icon {
+  width: 70px;
+  display: inline-block;
+  margin-top: 6px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon-logo {
+  width: 70px;
+  height: 50px;
+  margin-bottom: 4px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon-logo img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ul-list .li_item .wrap_icon .wrap_ .shortcut-logo {
+  line-height: 77px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .shortcut-logo img {
+  width: 35px;
+  height: 35px;
+}
+.ul-list .li_item .wrap_icon .wrap_ .icon_title {
+  width: 73px;
+  height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ul-list .li_item .wrap_icon .quick-add .icon-logo {
+  width: 40px;
+  height: 40px;
+  margin: 5px auto 9px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.12);
+  border-radius: 50%;
+}
+.ul-list .li_item .wrap_icon .quick-add .icon-logo i {
+  line-height: 40px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+.ul-list .li_item .icon-gengduo {
+  display: none;
+  position: absolute;
+  top: 2px;
+  right: 4px;
+}

package/es/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './components';
 export { default as button } from './button';
+export { default as appCenter } from './appCenter';

package/es/index.js

@@ -1,2 +1,3 @@
 export { default } from "./components.js";
 export { default as button } from "./button/index.js";
+export { default as appCenter } from "./appCenter/index.js";

package/es/index.less

@@ -1,2 +1,3 @@
 @import './style/index.less';
 @import './button/style/index.less';
+@import './appCenter/style/index.less';

package/es/utils/auth.d.ts

@@ -0,0 +1,5 @@
+export declare function getToken(): string | null;
+export declare function setToken(token: string): void;
+export declare function getRID(): string | null;
+export declare function setRID(rid: string | number): void;
+export declare function removeToken(): void;

package/es/utils/auth.js

@@ -0,0 +1,9 @@
+const TokenKey = "cmstop_admin_template_token";
+const RIDKey = "cmstop_admin_template_rid";
+function getToken() {
+  return window.sessionStorage.getItem(TokenKey);
+}
+function getRID() {
+  return window.sessionStorage.getItem(RIDKey);
+}
+export { getRID, getToken };

package/es/utils/request.d.ts

@@ -0,0 +1,9 @@
+declare module 'axios' {
+    interface AxiosResponse<T = any> {
+        code: number;
+        data: T;
+        message: T;
+    }
+    function create(config?: AxiosRequestConfig): AxiosInstance;
+}
+export default function (BASE_API: string, options: any): import("axios").AxiosPromise<any>;

package/es/utils/request.js

@@ -0,0 +1,36 @@
+import axios from "axios";
+import { getToken } from "./auth.js";
+function request(BASE_API, options) {
+  const service = axios.create({
+    baseURL: BASE_API,
+    timeout: 5e3,
+    withCredentials: true
+  });
+  service.interceptors.request.use(
+    (config) => {
+      if (getToken()) {
+        config.headers.Authorization = `Bearer ${getToken()}`;
+      }
+      return config;
+    },
+    (error) => {
+      console.log(error);
+      return Promise.reject(error);
+    }
+  );
+  service.interceptors.response.use(
+    (response) => {
+      const res = response.data;
+      if (res.code !== 0) {
+        return Promise.reject(new Error(res.message || "Error"));
+      }
+      return res;
+    },
+    (error) => {
+      console.log("err" + error);
+      return Promise.reject(error);
+    }
+  );
+  return service(options);
+}
+export { request as default };

package/lib/appCenter/component.js

@@ -0,0 +1,187 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var routeMap = require("./script/routeMap.js");
+var permissionMap = require("./script/permissionMap.js");
+var apps = require("./script/apps.js");
+var api = require("./script/api.js");
+var auth = require("../utils/auth.js");
+const _hoisted_1 = {
+  key: 1,
+  class: "reference-btn"
+};
+const _hoisted_2 = { class: "app-list-wrap apps-popover" };
+const _hoisted_3 = {
+  key: 0,
+  class: "app-title"
+};
+const _hoisted_4 = { class: "ul-list" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "wrap_icon" };
+const _hoisted_7 = { class: "wrap_" };
+const _hoisted_8 = { class: "icon-logo" };
+const _hoisted_9 = ["src"];
+const _hoisted_10 = { class: "icon_title" };
+const _hoisted_11 = {
+  key: 1,
+  class: "app-title"
+};
+const _hoisted_12 = { class: "ul-list" };
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "wrap_icon" };
+const _hoisted_15 = { class: "wrap_" };
+const _hoisted_16 = { class: "icon-logo" };
+const _hoisted_17 = ["src"];
+const _hoisted_18 = { class: "icon_title" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "appCenter" },
+  __name: "component",
+  props: {
+    BASE_API: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const StorePubApplication = vue.ref([]);
+    const resentApp = vue.ref([]);
+    const permissions = vue.ref([]);
+    const slotTest = !!vue.useSlots().reference;
+    const rid = auth.getRID() || "4";
+    const BASE_API = props.BASE_API || "https://site.cmstop.xyz";
+    const navList = vue.computed(() => {
+      const appList2 = [];
+      StorePubApplication.value.map((item) => {
+        item.actions.map((app) => {
+          if (!app.icon.includes("http") && !app.icon.includes("data:image") && !app.icon.includes(".svg")) {
+            app.icon = `${BASE_API}/static/icon/${app.icon}.svg`;
+          }
+          const hide = [];
+          if (!hide.includes(app.key) && (app.type === 3 || app.subscribed) && hasRight(app)) {
+            appList2.push(app);
+          }
+          return app;
+        });
+        return item;
+      });
+      return appList2;
+    });
+    const resentList = vue.computed(() => {
+      return navList.value.filter((item) => {
+        return resentApp.value.includes(item.id);
+      });
+    });
+    const remainList = vue.computed(() => {
+      return navList.value.filter((item) => {
+        return !resentApp.value.includes(item.id);
+      });
+    });
+    const routeRedirect = (item) => {
+      if (hasRight(item)) {
+        setResent(item);
+        routeMap(BASE_API, rid, item.key, item);
+      } else {
+        webVue.Message.warning({ content: "\u6682\u65E0\u6743\u9650\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458" });
+      }
+    };
+    const hasRight = (item) => {
+      return permissionMap(permissions.value, item);
+    };
+    const getUserActs = async () => {
+      const { code, message } = await api.getUserRepoActs(BASE_API);
+      if (code === 0 && message) {
+        permissions.value = message || [];
+      }
+    };
+    const getResent = async () => {
+      const { code, message } = await api.getResentApp(BASE_API, { repo_id: rid });
+      if (code === 0 && message) {
+        resentApp.value = message.map((item) => parseInt(item, 10));
+      }
+    };
+    const setResent = async (item) => {
+      await api.setResentApp(BASE_API, { repo_id: rid, app_id: item.id });
+    };
+    const load = async () => {
+      const result = await api.getPubApps(BASE_API, { rid, type: "2,3" });
+      if (result.code === 0) {
+        StorePubApplication.value = result.data.concat(apps);
+        setTimeout(() => {
+          getResent();
+          getUserActs();
+        }, 500);
+      }
+    };
+    vue.onMounted(() => {
+      load();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(vue.unref(webVue.Popover), {
+          trigger: "hover",
+          position: "bottom",
+          "arrow-style": { display: "none" },
+          "content-style": { padding: 0, minWidth: "400px" }
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2, [
+              resentList.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, "\u6700\u8FD1\u4F7F\u7528")) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("ul", _hoisted_4, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(resentList.value, (item, index) => {
+                  return vue.openBlock(), vue.createElementBlock("li", {
+                    key: index,
+                    class: "li_item"
+                  }, [
+                    vue.createElementVNode("div", {
+                      onClick: ($event) => routeRedirect(item)
+                    }, [
+                      vue.createElementVNode("div", _hoisted_6, [
+                        vue.createElementVNode("div", _hoisted_7, [
+                          vue.createElementVNode("div", _hoisted_8, [
+                            vue.createElementVNode("img", {
+                              src: item.icon,
+                              class: "icon"
+                            }, null, 8, _hoisted_9)
+                          ]),
+                          vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(item.alias), 1)
+                        ])
+                      ])
+                    ], 8, _hoisted_5)
+                  ]);
+                }), 128))
+              ]),
+              resentList.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, "\u76F8\u5173\u5E94\u7528")) : vue.createCommentVNode("v-if", true),
+              vue.createElementVNode("ul", _hoisted_12, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(remainList.value, (item, index) => {
+                  return vue.openBlock(), vue.createElementBlock("li", {
+                    key: index,
+                    class: "li_item"
+                  }, [
+                    vue.createElementVNode("div", {
+                      onClick: ($event) => routeRedirect(item)
+                    }, [
+                      vue.createElementVNode("div", _hoisted_14, [
+                        vue.createElementVNode("div", _hoisted_15, [
+                          vue.createElementVNode("div", _hoisted_16, [
+                            vue.createElementVNode("img", {
+                              src: item.icon,
+                              class: "icon"
+                            }, null, 8, _hoisted_17)
+                          ]),
+                          vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(item.alias), 1)
+                        ])
+                      ])
+                    ], 8, _hoisted_13)
+                  ]);
+                }), 128))
+              ])
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            slotTest ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("button", _hoisted_1, "\u5E94\u7528\u4E2D\u5FC3"))
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/appCenter/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const appCenter = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = appCenter;

package/lib/appCenter/script/api.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function getUserRepoActs(BASE_API) {
+  return request(BASE_API, {
+    url: `/poplar/v3/ac/account/rules`,
+    method: "get"
+  });
+}
+function getPubApps(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/leaf/v1/market/apps",
+    method: "get",
+    params
+  });
+}
+function getResentApp(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/repo/${params.repo_id}/common/apps`,
+    method: "get"
+  });
+}
+function setResentApp(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/repo/${params.repo_id}/app/${params.app_id}/access`,
+    method: "post"
+  });
+}
+exports.getPubApps = getPubApps;
+exports.getResentApp = getResentApp;
+exports.getUserRepoActs = getUserRepoActs;
+exports.setResentApp = setResentApp;