@maketribe/ms-app 3.0.0

package/src/page/index/material/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <MKMaterialList :material-man="materialMan" />
+</template>
+<script setup lang="ts">
+import { reactive } from "vue";
+import { MaterialMan } from "../../../dataview";
+import { MKMaterialList } from "../../../components";
+import { MaterialComponents } from "../../../MaterialComponents";
+
+const materialMan = reactive(
+  new MaterialMan({ components: new MaterialComponents() })
+) as MaterialMan;
+</script>
+<style lang="scss"></style>

package/src/page/login/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="login-wrap">
+    <div class="login-bg">
+      <div class="login-bg-block"></div>
+      <div class="login-bg-block"></div>
+    </div>
+    <div class="login-root">
+      <div class="login-main">
+        <div class="form-container">
+          <div class="form-wrap">
+            <div class="form-title" v-if="!forgotPassword">
+              账号登录
+              <span class="notify">
+                没有账号？<ElButton
+                  link
+                  class="operaBtn"
+                  @click="router.push('/signup')"
+                >
+                  申请使用
+                </ElButton>
+              </span>
+            </div>
+            <div class="form-title" v-else>账号重置</div>
+            <ElForm
+              :model="loginFormData"
+              :rules="rules"
+              size="large"
+              ref="formEl"
+              @submit.native.prevent
+            >
+              <ElFormItem prop="account">
+                <ElInput
+                  v-model="loginFormData.account"
+                  placeholder="帐号"
+                  @keyup.enter.native.prevent="verifyHandle"
+                />
+              </ElFormItem>
+              <ElFormItem prop="password" v-if="!forgotPassword">
+                <ElInput
+                  v-model="loginFormData.password"
+                  type="password"
+                  placeholder="密码"
+                  @keyup.enter.native.prevent="verifyHandle"
+                />
+              </ElFormItem>
+              <ElFormItem>
+                <ElRow style="width: 100%">
+                  <ElCol :span="12">
+                    <ElButton
+                      link
+                      class="operaBtn"
+                      @click="forgotPassword = !forgotPassword"
+                      >{{
+                        forgotPassword ? "返回登陆" : "忘记密码？"
+                      }}</ElButton
+                    >
+                  </ElCol>
+                </ElRow>
+              </ElFormItem>
+              <ElFormItem>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                  :disabled="loginDisabled"
+                  v-if="!forgotPassword"
+                >
+                  登陆
+                </ElButton>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                  :disabled="resetDisabled"
+                  v-else
+                >
+                  重置
+                </ElButton>
+              </ElFormItem>
+            </ElForm>
+            <ElDivider></ElDivider>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <MKVerifyDialog
+    :scene="scene"
+    v-model:visible="verifyVisible"
+    v-if="verifyVisible"
+    @verifySuccessful="handleLogin"
+  />
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElForm, ElFormItem } from "element-plus";
+import { useMSAppClient } from "../../composables";
+import { MKVerifyDialog } from "../../components";
+import { Ref, computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({
+  mkRoute: {
+    name: "login",
+    path: "/login",
+    meta: {
+      isAuthorization: false,
+    },
+  },
+});
+
+// 记住登陆状态
+const rememberLoginState = ref(false);
+
+const formEl: Ref<any> = ref(null);
+
+const system = useMSAppClient()!;
+
+const router = useRouter();
+
+const loading = ref(false);
+
+const loginDisabled = computed(
+  () => !loginFormData.account || !loginFormData.password
+);
+const resetDisabled = computed(() => !loginFormData.account);
+
+const forgotPassword = ref(false);
+const scene = computed(() =>
+  forgotPassword.value ? "ModifyPassword" : "Login"
+);
+
+const rules = {
+  account: [{ required: true, message: "账号必填" }],
+  password: [{ required: true, message: "密码必填" }],
+};
+
+const loginFormData = reactive({
+  account: "",
+  password: "",
+  vCode: "code",
+});
+const verifyVisible = ref(false);
+
+const verifyHandle = async () => {
+  const result = await formEl.value?.validate();
+  if (!result) {
+    return;
+  }
+  verifyVisible.value = true;
+};
+
+const handleLogin = async (v: string) => {
+  loginFormData.vCode = v;
+  try {
+    loading.value = true;
+    if (forgotPassword.value) {
+      const { data } = await system.modifyPassword(
+        loginFormData.account,
+        loginFormData.vCode
+      );
+      if (data.code !== 200) {
+        ElMessage.error(data.msg || "重置邮箱失败！");
+        return;
+      }
+      ElMessage.success("重置密码邮件已发送到邮箱");
+      verifyVisible.value = false;
+      forgotPassword.value = false;
+    } else {
+      const { data } = await system.login(
+        loginFormData.account,
+        loginFormData.password,
+        loginFormData.vCode
+      );
+
+      if (data.code !== 200) {
+        ElMessage.error(data.msg || "登录失败!");
+        return;
+      }
+      verifyVisible.value = false;
+
+      router.push({ path: "/" });
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+</script>

package/src/page/signup/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="login-wrap">
+    <div class="login-bg">
+      <div class="login-bg-block"></div>
+      <div class="login-bg-block"></div>
+    </div>
+    <div class="login-root">
+      <div class="login-main">
+        <div class="form-container">
+          <div class="form-wrap">
+            <div class="form-title" v-if="!forgotPassword">
+              账号注册
+              <span class="notify">
+                已有账号？<ElButton
+                  link
+                  class="operaBtn"
+                  @click="router.push('/login')"
+                >
+                  返回登录
+                </ElButton>
+              </span>
+            </div>
+            <div class="form-title" v-else>账号重置</div>
+            <ElForm
+              :model="signFormData"
+              :rules="rules"
+              size="large"
+              ref="formEl"
+            >
+              <ElFormItem prop="account">
+                <ElInput v-model="signFormData.account" placeholder="帐号" />
+              </ElFormItem>
+              <ElFormItem prop="email">
+                <ElInput v-model="signFormData.email" placeholder="邮箱" />
+              </ElFormItem>
+              <ElFormItem prop="name">
+                <ElInput v-model="signFormData.name" placeholder="姓名" />
+              </ElFormItem>
+              <ElFormItem prop="nickName">
+                <ElInput v-model="signFormData.nickName" placeholder="昵称" />
+              </ElFormItem>
+              <ElFormItem prop="phone">
+                <ElInput v-model="signFormData.phone" placeholder="手机号" />
+              </ElFormItem>
+
+              <ElFormItem>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                >
+                  提交申请
+                </ElButton>
+              </ElFormItem>
+            </ElForm>
+            <ElDivider></ElDivider>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <MKVerifyDialog
+    :scene="scene"
+    v-model:visible="verifyVisible"
+    v-if="verifyVisible"
+    @verifySuccessful="handleSign"
+  />
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { FormRules } from "element-plus";
+import { Messager } from "@maketribe/dm";
+import { useHttpRequest } from "../../composables";
+import { MKVerifyDialog } from "../../components";
+
+defineOptions({
+  mkRoute: {
+    name: "signup",
+    path: "/signup",
+    meta: {
+      isAuthorization: false,
+    },
+  },
+});
+
+const formEl: Ref<any> = ref(null);
+
+const router = useRouter();
+
+const httpRequest = useHttpRequest();
+
+const loading = ref(false);
+
+const verifyVisible = ref(false);
+
+const forgotPassword = ref(false);
+const scene = computed(() =>
+  forgotPassword.value ? "ModifyPassword" : "Login"
+);
+const rules: FormRules = {
+  account: [{ required: true, message: "账号必填" }],
+  email: [
+    {
+      required: true,
+      trigger: "change",
+      validator: (rule, value, callback) => {
+        if (!value) {
+          callback(new Error("邮箱必填"));
+        } else if (
+          !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
+        ) {
+          callback(new Error("邮箱规则不符"));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
+  name: [{ required: true, message: "姓名必填" }],
+};
+
+const verifyHandle = async () => {
+  const result = await formEl.value.validate();
+  if (!result) {
+    return;
+  }
+  verifyVisible.value = true;
+};
+
+const signFormData = reactive({
+  account: "",
+  email: "",
+  name: "",
+  nickName: "",
+  phone: "",
+});
+
+const handleSign = async (v: string) => {
+  const result = await httpRequest.post(
+    "/api/dv/ms-member/apply/account",
+    signFormData
+  );
+  if (result.data.code != 200) {
+    Messager.instance.error(result.data.msg || "注册失败");
+    return;
+  }
+  verifyVisible.value = false;
+  Messager.instance.success({ message: "注册成功,请联系管理员通过验证" });
+};
+
+// 记住登陆状态
+const rememberLoginState = ref(false);
+</script>

package/src/resolver/ITypeResolver.ts

@@ -0,0 +1,5 @@
+export interface ITypeResolver<T> {
+  resolveType(type: string): string;
+
+  resolveItemType(item: T): string;
+}

package/src/router-middleware/auth.ts

@@ -0,0 +1,64 @@
+import { MSAppClient } from "../MSAppClient";
+import { isSameRoute } from "@maketribe/utils";
+import { RouteLocationNormalized, RouteLocationRaw } from "vue-router";
+
+export const authBeforeEach = async (
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized
+): Promise<RouteLocationRaw | void> => {
+  if (to.meta.isAuthorization === false) {
+    return;
+  }
+  
+  const msAppClient = MSAppClient.instance!;
+
+  let userSession = msAppClient.userSession;
+
+  if (!userSession) {
+    try {
+      await msAppClient.loadCurrentUserSession();
+
+      userSession = msAppClient.userSession;
+
+      if (!userSession) {
+        return { name: "login" };
+      }
+
+      // 因为登陆成功会添加用户可以访问的路由，这里给到vue-router去重新resolve
+      return { path: to.path };
+    } catch (e) {
+      return { name: "login" };
+    }
+  }
+
+  const tabs = userSession.tabs;
+  const router = userSession.router;
+
+  const route = router.getRouteByName(to.name as string);
+
+  if (!route) {
+    // 前往第一个菜单
+    const menuNode = userSession.menu.getFirstLeafMenuNode();
+
+    if (!menuNode || !menuNode.route) {
+      return { name: "login" };
+    }
+
+    return { name: menuNode.route.name };
+  }
+
+  const matched = to.matched[to.matched.length - 1];
+
+  if (matched) {
+    if (!isSameRoute(router.currentRoute, to)) {
+      router.changeRoute(to);
+    }
+
+    const tab = tabs.getTabByID(to.name as string);
+
+    if (tab) {
+      tab.affix = matched.meta.affix as boolean;
+      tab.realRoute = to;
+    }
+  }
+};

package/src/router-middleware/index.ts

@@ -0,0 +1 @@
+export * from "./auth";

package/src/tabs/Tab.ts

@@ -0,0 +1,59 @@
+import { Disposable, Event } from "@maketribe/utils";
+import { Route } from "../dataview";
+import type { Tabs } from "./Tabs";
+
+export interface TabOptions {
+  id: string;
+
+  title: string;
+
+  affix?: boolean;
+
+  realRoute: any;
+
+  route: Route;
+
+  tabs: Tabs;
+}
+
+export class Tab extends Disposable {
+  id: string;
+
+  title: string;
+
+  affix: boolean;
+
+  realRoute: any;
+
+  route: Route;
+
+  beforeCloseEvent: Event = this.register(new Event());
+
+  refreshEvent: Event = this.register(new Event());
+
+  beforeSwitchEvent: Event = this.register(new Event());
+
+  tabs: Tabs;
+
+  constructor(options: TabOptions) {
+    super();
+    this.id = options.id;
+    this.title = options.title;
+    this.affix = options.affix ?? false;
+    this.realRoute = options.realRoute;
+    this.route = options.route;
+    this.tabs = options.tabs;
+  }
+
+  getTitle() {
+    return this.title;
+  }
+
+  getID() {
+    return this.id;
+  }
+
+  close() {
+    this.tabs.closeTab(this);
+  }
+}

package/src/tabs/Tabs.ts

@@ -0,0 +1,176 @@
+import { Disposable, Event } from "@maketribe/utils";
+import { Tab, TabOptions } from "./Tab";
+import type { UserSession } from "../UserSession";
+
+export class Tabs extends Disposable {
+  userSession: UserSession;
+
+  _tabs: Tab[] = [];
+  _currentTab: Tab | null = null;
+
+  currentTabChangeEvent: Event<{ currentTab: Tab | null }> = this.register(
+    new Event()
+  );
+  tabsChangeEvent: Event<{ tabs: Tab[] }> = this.register(new Event());
+
+  constructor(userSession: UserSession) {
+    super();
+    this.userSession = userSession;
+  }
+
+  init() {
+    const getAffixRoutes = () => {
+      let routes = this.userSession.vueRouter.getRoutes().slice();
+
+      const affixRoutes: any[] = [];
+
+      for (let i = 0; i < routes.length; i++) {
+        const route = routes[i];
+
+        if (route.meta?.affix === true) {
+          affixRoutes.push(route);
+        }
+      }
+
+      return affixRoutes;
+    };
+
+    const getAffixTabs = () => {
+      return getAffixRoutes()
+        .map((affixRoute) => {
+          const route = this.userSession.router.getRouteByName(
+            affixRoute.name as string
+          );
+
+          if (!route) {
+            return null;
+          }
+
+          return this.createTab({
+            id: affixRoute.path,
+            title: route.title,
+            affix: true,
+            route: route,
+            realRoute: affixRoute,
+          });
+        })
+        .filter(Boolean) as Tab[];
+    };
+
+    this.setTabs(getAffixTabs());
+  }
+
+  getTabs() {
+    return this._tabs;
+  }
+
+  getCurrentTab() {
+    return this._currentTab;
+  }
+
+  setCurrentTab(tab: Tab | null) {
+    if (this._currentTab === tab) {
+      return;
+    }
+
+    this._currentTab = tab;
+
+    this.currentTabChangeEvent.emit({ currentTab: tab });
+  }
+
+  getTabByID(id: string) {
+    return this._tabs.find((tab) => tab.id === id) ?? null;
+  }
+
+  createTab(options: Omit<TabOptions, "tabs">) {
+    return this.register(new Tab({ ...options, tabs: this }));
+  }
+
+  setTabs(tabs: Tab[]): void {
+    this._tabs = tabs;
+
+    this.tabsChangeEvent.emit({ tabs });
+  }
+
+  switchTab(tab: Tab | null) {
+    if (!tab) {
+      this.setCurrentTab(null);
+      return;
+    }
+
+    let _tab = this._tabs.find((item) => item.getID() === tab.getID());
+
+    if (!_tab) {
+      this.setTabs([...this.getTabs(), tab]);
+    }
+
+    this.setCurrentTab(tab);
+  }
+
+  findTabByID(id: Tab["id"]) {
+    return this.getTabs().find((tab) => tab.id === id) ?? null;
+  }
+
+  async closeTab(tab: Tab) {
+    if ((await tab.beforeCloseEvent.emitAsync()) === false) {
+      return;
+    }
+
+    const tabItemList = this.getTabs().slice();
+
+    if (this.getCurrentTab()?.getID() !== tab.getID()) {
+      this.setTabs(tabItemList.filter((item) => item.getID() !== tab.getID()));
+
+      return;
+    }
+
+    const index = tabItemList.findIndex((item) => item.getID() === tab.getID());
+
+    if (index === -1) {
+      return;
+    }
+
+    const deleteTab = tabItemList[index];
+    deleteTab.dispose();
+
+    tabItemList.splice(index, 1);
+    this.setTabs(tabItemList);
+
+    this.setCurrentTab(this._tabs[this._tabs.length - 1] ?? null);
+  }
+
+  closeAll() {
+    const affixTabs = this.getTabs().filter((tab) => tab.affix);
+
+    if (affixTabs.length) {
+      this.setTabs(affixTabs);
+      this.setCurrentTab(affixTabs[0]);
+      return;
+    }
+
+    this.setTabs([this.getCurrentTab() ?? this.getTabs()[0]]);
+    this.setCurrentTab(this.getTabs()[0]);
+  }
+
+  closeOther() {
+    const currentTab = this.getCurrentTab();
+
+    if (!currentTab) {
+      return;
+    }
+
+    const affixTabs = this.getTabs().filter((tab) => tab.affix);
+
+    if (affixTabs.length) {
+      if (affixTabs.find((item) => item.getID() === currentTab.getID())) {
+        this.setTabs(affixTabs);
+      } else {
+        this.setTabs([...affixTabs, currentTab]);
+      }
+
+      return;
+    }
+
+    this.setTabs([currentTab]);
+  }
+}

package/src/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tab";
+export * from "./Tabs";

package/src/tokens/index.ts

@@ -0,0 +1 @@
+export * from "./ms-app-client";

package/src/tokens/ms-app-client.ts

@@ -0,0 +1,10 @@
+import { InjectionKey } from "vue";
+import { MSAppClient } from "../MSAppClient";
+
+export interface MSAppClientContext {
+  msAppClient: MSAppClient;
+}
+
+export const MSAPPCLIENT_CONTEXT_KEY: InjectionKey<MSAppClientContext> = Symbol(
+  "msAppClientContextKey"
+);

package/style/components/image-select.scss

@@ -0,0 +1,13 @@
+.img-select {
+  display: flex;
+  &-content {
+    width: 200px;
+    cursor: pointer;
+  }
+  &-icon {
+    border: 1px dashed var(--el-input-border-color, var(--el-border-color));
+    cursor: pointer;
+    width: 200px;
+    height: 200px;
+  }
+}