@pubinfo/core 2.0.0-beta.1

package/src/pages/personal/profile/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { getRbacUserUserEntireInfo } from '@/api/modules/rbac';
+import { SchemaForm } from '@pubinfo/pro-components';
+import { isNil } from 'lodash-es';
+
+// TODO 解耦组件库
+
+defineOptions({
+  name: 'PersonalCenter',
+});
+
+const form = ref<API.PubUserBo>({});
+
+const sexOptions = [
+  { label: '未知', value: '0' },
+  { label: '男', value: '1' },
+  { label: '女', value: '2' },
+];
+
+function renderText({ value }: any) {
+  return isNil(value) ? '-' : value;
+}
+
+const columns: ProColumns = [
+  {
+    render: renderText,
+    renderFormItem: renderText,
+    dataIndex: 'loginName',
+    title: '登录账号',
+    colProps: { span: 12 },
+  },
+  {
+    render: renderText,
+    valueType: 'a-input',
+    dataIndex: 'realName',
+    title: '真实姓名',
+    colProps: { span: 12 },
+  },
+  {
+    render: renderText,
+    valueType: 'a-input',
+    dataIndex: 'mobile',
+    title: '手机号',
+    colProps: { span: 12 },
+  },
+  {
+    render: ({ value }) => sexOptions.find(e => e.value === value)?.label,
+    valueType: 'a-radio-group',
+    dataIndex: 'sex',
+    title: '性别',
+    colProps: { span: 12 },
+    fieldProps: {
+      options: sexOptions,
+    },
+  },
+  {
+    render: renderText,
+    valueType: 'a-input',
+    dataIndex: 'email',
+    title: '邮箱',
+    colProps: { span: 12 },
+  },
+  {
+    render: renderText,
+    valueType: 'a-input',
+    dataIndex: 'idCard',
+    title: '身份证',
+    colProps: { span: 12 },
+  },
+  {
+    render: renderText,
+    valueType: 'a-input',
+    dataIndex: 'address',
+    title: '地址',
+    colProps: { span: 12 },
+  },
+];
+
+const permissionColumns: ProColumns = [
+  {
+    renderFormItem: ({ value }) => value?.map((item: API.PubUserOrgBo) => item.orgName).join('、'),
+    dataIndex: 'userOrgList',
+    title: '所属组织',
+  },
+];
+
+async function getCurrentUserInfo() {
+  const res = await getRbacUserUserEntireInfo();
+  if (res.success) {
+    form.value = res.data ?? {};
+  }
+}
+
+onMounted(() => {
+  getCurrentUserInfo();
+});
+</script>
+
+<template>
+  <div class="relative w-full h-full py-10px px-10px overflow-hidden">
+    <div class="w-full h-full overflow-y-auto space-y-3">
+      <a-card title="个人信息" :bordered="false">
+        <SchemaForm
+          v-model="form"
+          :label-col="{ style: { width: '100px' } }"
+          :columns="columns"
+          readonly
+          grid
+          :submitter="false"
+        />
+      </a-card>
+
+      <a-card title="权限信息" :bordered="false">
+        <SchemaForm
+          v-model="form"
+          :label-col="{ style: { width: '100px' } }"
+          :columns="permissionColumns"
+          :submitter="false"
+          style="width: 600px;"
+        />
+      </a-card>
+    </div>
+  </div>
+</template>

package/src/pages/system/[...all].vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useSettingsStore, useTabbarStore } from '@/stores';
+
+const route = useRoute();
+const router = useRouter();
+
+const settingsStore = useSettingsStore();
+const tabbarStore = useTabbarStore();
+
+const data = ref({
+  inter: Number.NaN,
+  countdown: 5,
+});
+
+onBeforeRouteLeave(() => {
+  if (data.value.inter) {
+    window.clearInterval(data.value.inter);
+  }
+});
+
+onMounted(() => {
+  if (settingsStore.settings.tabbar.enable) {
+    tabbarStore.remove(route.meta.activeMenu || route.fullPath);
+  }
+  data.value.inter = window.setInterval(() => {
+    data.value.countdown--;
+    if (data.value.countdown === 0) {
+      if (data.value.inter) {
+        window.clearInterval(data.value.inter);
+      }
+      goBack();
+    }
+  }, 1000);
+});
+
+function goBack() {
+  router.push('/');
+}
+</script>
+
+<template>
+  <div w-full h-full class="dark:bg-[#25282D]">
+    <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
+      <div class="allIcon w-300px h-300px lg:w-400px lg:h-400px" />
+      <div class="flex flex-col gap-4">
+        <h1 class="m-0 text-6xl font-sans dark:text-[#C9D6EF]">
+          404
+        </h1>
+        <div class="desc mx-0 text-xl text-stone-5 dark:text-[#C9D6EF]">
+          抱歉，你访问的页面不存在
+        </div>
+        <div>
+          <HButton @click="goBack">
+            {{ data.countdown }} 秒后，返回首页
+          </HButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.allIcon {
+  background: url("@/assets/icons/404.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+[data-theme="dark"] {
+  .allIcon {
+    background: url("@/assets/icons/404_dark.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

package/src/pages/system/change-organization/index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+import { useUserStore } from '@/stores';
+import { message } from 'ant-design-vue';
+
+defineOptions({
+  name: 'ChangeOrganization',
+});
+
+const userStore = useUserStore();
+const router = useRouter();
+
+// 切断响应式，否则组织清楚后会导致页面闪烁
+const rawOrganization = toRaw(userStore.orgList);
+const orgList = computed(() => {
+  const org = rawOrganization.map((item) => {
+    return {
+      orgId: item.orgId,
+      label: item.orgName!,
+      ...item,
+    };
+  });
+  return org;
+});
+
+const activeIndex = ref(-1);
+
+function setActive(idx: number) {
+  activeIndex.value = idx;
+}
+
+function handleBack() {
+  router.go(-1);
+}
+
+async function changeOrganization() {
+  const org = orgList.value[activeIndex.value];
+  const orgId = org?.orgId;
+  if (orgId) {
+    if (orgId === userStore.orgId) {
+      message.error('请避免切换到当前已选组织');
+    }
+    else {
+      await userStore.changeOrg(orgId);
+      message.success('组织切换成功');
+    }
+  }
+  else {
+    message.error('请选择要切换的组织');
+  }
+}
+</script>
+
+<template>
+  <div class="change-org">
+    <div
+      w-full
+      h-full
+      flex="~"
+      justify-center
+    >
+      <div w-620px pt-20vh>
+        <div
+          text="30px"
+          font="bold"
+          mb-40px
+          flex="~"
+          items="center"
+        >
+          请选择组织
+        </div>
+        <div v-for="(item, index) in orgList" :key="index" @click="setActive(index)">
+          <div class="org-item" :class="{ active: index === activeIndex }">
+            <div flex="~" h-full>
+              <PubinfoIcon name="change-org" size="48px" />
+              <div
+                flex="~ col"
+                h-full
+                justify-center
+                ml="18px"
+              >
+                <div text="20px black dark:[#86909C]" flex="~" items-center>
+                  <span mr-10px>
+                    {{ item.label }}
+                  </span>
+                  <a-tag v-if="userStore.orgId === item.orgId" color="blue">
+                    当前使用组织
+                  </a-tag>
+                  <a-tag v-if="item.main" color="red">
+                    主组织
+                  </a-tag>
+                </div>
+              </div>
+            </div>
+            <div>
+              <PubinfoIcon
+                class="arrow"
+                name="i-iconamoon-arrow-right-6-circle-duotone"
+                :color="index === activeIndex ? '#1677ff' : '#8E97A3'"
+                size="22px"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <a-button
+            type="primary"
+            block
+            h-40px
+            mb-15px
+            @click="changeOrganization"
+          >
+            确定
+          </a-button>
+          <a-button
+            block
+            h-40px
+            @click="handleBack"
+          >
+            返回
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.change-org {
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/images/login-small.png") no-repeat 50%;
+  background-size: cover;
+
+  .org-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 91px;
+    padding: 22px 32px;
+    margin-bottom: 15px;
+    overflow: hidden;
+    color: #86909c;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #f2f3f5;
+    border-radius: 8px;
+
+    &.active {
+      background-color: rgb(22 119 255 / 10%);
+      border-color: #1677ff;
+    }
+  }
+}
+
+[data-theme="dark"] {
+  .change-org {
+    background: url("@/assets/images/login-small_dark.webp") no-repeat 50%;
+    background-size: cover;
+  }
+
+  .org-item {
+    background: #2c2c2c;
+    border: 1px solid #2c2c2c;
+
+    &.active {
+      background: rgb(20 20 20 / 60%);
+      border-color: #1668dc;
+    }
+  }
+}
+</style>

package/src/pages/system/change-password/components/ChangePasswordForm/index.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { RouteParamValue } from 'vue-router';
+import { useUserStore } from '@/stores';
+import { message } from 'ant-design-vue';
+import { delay } from 'lodash-es';
+
+defineOptions({
+  name: 'ChangePasswordForm',
+});
+
+const props = defineProps<{
+  token?: RouteParamValue | RouteParamValue[]
+}>();
+
+const isValidate = defineModel('validate', { type: Boolean, default: false });
+
+interface FormState {
+  password: string
+  newPassword: string
+  repeatNewPassword: string
+}
+const formState = reactive<FormState>({
+  password: '',
+  newPassword: '',
+  repeatNewPassword: '',
+});
+
+const router = useRouter();
+const changePasswordForm = ref<FormInstance>();
+const userStore = useUserStore();
+
+async function checkRepeatNewPassword(_rule: Rule, value: string) {
+  if (!value) {
+    return Promise.reject(new Error('请再次输入新密码'));
+  }
+  if (value !== formState.newPassword) {
+    return Promise.reject(new Error('两次输入的密码不匹配，请确保新密码在两个输入框中完全相同'));
+  }
+}
+
+async function checkNewPassWord(_rule: Rule, value: string) {
+  await nextTick();
+  if (!value) {
+    return Promise.reject(new Error('请再次输入新密码'));
+  }
+  if (!isValidate.value) {
+    return Promise.reject(new Error('密码安全校验不通过'));
+  }
+}
+
+const rules: Record<string, Rule[]> = {
+  password: [{
+    required: true,
+    whitespace: true,
+    message: '请输入密码',
+  }],
+  newPassword: [{ validator: checkNewPassWord }],
+  repeatNewPassword: [{ validator: checkRepeatNewPassword }],
+};
+
+async function submit() {
+  try {
+    await changePasswordForm.value?.validate();
+    await userStore.changeUserPassword({
+      oldPassword: formState.password,
+      newPassword: formState.newPassword,
+      token: props.token,
+    });
+    message.success('密码修改成功');
+
+    delay(() => {
+      returnPage();
+    }, 800);
+  }
+  catch (error) {
+  }
+}
+
+function returnPage() {
+  router.go(-1);
+}
+
+defineExpose({
+  formState,
+});
+</script>
+
+<template>
+  <div>
+    <a-form
+      ref="changePasswordForm"
+      :model="formState"
+      :rules="rules"
+    >
+      <a-form-item name="password">
+        <a-input-password
+          v-model:value="formState.password"
+          allow-clear
+          size="large"
+          placeholder="请输入旧密码"
+          visibility-toggle
+        />
+      </a-form-item>
+      <a-form-item name="newPassword">
+        <a-input-password
+          v-model:value="formState.newPassword"
+          allow-clear
+          size="large"
+          placeholder="请输入新密码"
+          visibility-toggle
+        />
+      </a-form-item>
+
+      <a-form-item name="repeatNewPassword">
+        <a-input-password
+          v-model:value="formState.repeatNewPassword"
+          allow-clear
+          size="large"
+          placeholder="请再次输入新密码"
+          visibility-toggle
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button
+          type="primary"
+          block
+          h-48px
+          mb-10px
+          @click="submit"
+        >
+          修改密码
+        </a-button>
+        <a-button
+          block
+          h-48px
+          @click="returnPage"
+        >
+          返回
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>

package/src/pages/system/change-password/index.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { PassStrengthValidator, PubinfoIcon } from '@/components';
+import ChangePasswordForm from './components/ChangePasswordForm/index.vue';
+
+defineOptions({
+  name: 'ChangePassword',
+});
+
+const ChangePassWordForm = ref<InstanceType<typeof ChangePasswordForm>>();
+
+const newPassWord = computed({
+  get() {
+    return ChangePassWordForm.value?.formState.newPassword;
+  },
+  set() {},
+});
+
+const route = useRoute();
+const token = route.params.changePassWordToken;
+const isValidate = ref(false);
+</script>
+
+<template>
+  <div class="password-bg">
+    <main
+      flex="~ auto center"
+      w-full
+      h-0
+    >
+      <div
+        h-full
+        flex="~"
+        justify-between
+        items-center
+      >
+        <div w-650px mr-20px>
+          <PassStrengthValidator v-model="newPassWord" v-model:validate="isValidate" />
+        </div>
+        <div class="change-password-form">
+          <div flex="~ col center" mb-40px>
+            <div
+              w-88px
+              h-88px
+              flex="~ center"
+              rounded="50%"
+              mb-15px
+            >
+              <PubinfoIcon
+                name="mima"
+                color="transparent"
+                :size="88"
+              />
+            </div>
+            <span text="18px" font="bold">
+              更改密码
+            </span>
+          </div>
+          <ChangePasswordForm ref="ChangePassWordForm" v-model:validate="isValidate" :token="token" />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.password-bg {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 25px;
+  background: url("@/assets/images/login-small.png") no-repeat 50%;
+  background-size: cover;
+
+  .change-password-form {
+    display: flex;
+    flex-direction: column;
+    width: 560px;
+    min-height: 680px;
+    padding: 64px 80px 34px;
+    overflow: hidden;
+    background: linear-gradient(180deg, hsl(0deg 0% 100% / 90%), hsl(0deg 0% 100% / 75%));
+    backdrop-filter: blur(7.5px);
+    border: 2px solid #fff;
+    border-radius: 8px;
+    box-shadow: 0 20px 50px rgb(29 42 165 / 5%);
+  }
+}
+
+[data-theme="dark"] {
+  .password-bg {
+    background: url("@/assets/images/login-small_dark.webp") no-repeat 50%;
+    background-size: cover;
+  }
+
+  .change-password-form {
+    background: #0f1e3b;
+    border-color: #0f1e3b;
+  }
+}
+</style>

package/src/pages/system/change-password/page.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { PassStrengthValidator } from '@/components';
+import ChangePasswordForm from './components/ChangePasswordForm/index.vue';
+
+defineOptions({
+  name: 'ChangePasswordPageView',
+});
+
+const ChangePassWordForm = ref<InstanceType<typeof ChangePasswordForm>>();
+
+const newPassWord = computed({
+  get() {
+    return ChangePassWordForm.value?.formState.newPassword;
+  },
+  set() {},
+});
+
+const route = useRoute();
+const token = route.params.changePassWordToken;
+const isValidate = ref(false);
+</script>
+
+<template>
+  <div
+    flex="~"
+    w-full
+    h-full
+  >
+    <main
+      flex="~ auto center"
+      w-full
+      h-full
+      pt-10px
+    >
+      <div
+        w-full
+        h-full
+        flex="~"
+        justify-between
+        bg="#fff"
+        px-32px
+        py-20px
+      >
+        <div w-420px ml-60px mt-70px>
+          <div flex="~ col center" mb-40px>
+            <span text="18px" font="bold">
+              更改密码
+            </span>
+          </div>
+          <ChangePasswordForm ref="ChangePassWordForm" v-model:validate="isValidate" :token="token" />
+        </div>
+        <div w-644px py-15px bg="red">
+          <PassStrengthValidator v-model="newPassWord" v-model:validate="isValidate" />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>

package/src/pages/system/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="home">
+    主页
+  </div>
+</template>