create-young-proj 0.6.1 → 0.8.0

package/template-nuxt-admin/pages/login.vue

@@ -0,0 +1,179 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 10:03:11
+ * @LastEditTime: 2023-08-02 10:39:05
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isMobile } from '@bluesyoung/utils';
+import type { FormInstance } from 'element-plus';
+
+definePageMeta({
+  auth: false,
+  title: '用户登录',
+  noCache: true,
+  layout: 'blank'
+});
+
+const {
+  NUXT_PUBLIC_LOGIN_LOGO: LoginLogo,
+  NUXT_PUBLIC_LOGIN_BG: LoginBg,
+  NUXT_PUBLIC_TITLE: Title,
+  NUXT_PUBLIC_SUB_TITLE: SubTitle,
+  NUXT_PUBLIC_SLOGAN: SloGan,
+  NUXT_PUBLIC_CURRENT_VERSION: Version
+} = window.__YOUNG_ENV__;
+
+const { SaveFlag, hasLogin, cookie } = storeToRefs(useUserStore());
+
+const loginType = ref<'account' | 'code'>('account');
+
+const form = reactive<LoginForm>({
+  mobile: '',
+  vercode: '',
+  password: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const loginHandler = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    try {
+      if (valid) {
+        const { enter } = useFullscreen();
+        const { width, height } = useWindowSize();
+
+        const data = await apis.post.login(form);
+        if (data) {
+          cookie.value = data;
+          height.value > width.value && enter();
+          showSuccessToast('登录成功！');
+          navigateTo('/');
+        }
+      } else {
+        ElMessage.error('请仔细检查输入内容');
+        return;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  });
+};
+
+onMounted(() => {
+  if (SaveFlag.value && hasLogin.value) {
+    navigateTo({
+      path: '/',
+      replace: true
+    });
+  }
+});
+</script>
+
+<template>
+  <img :src="LoginBg" class="absolute object-center object-cover w-100vw h-100vh blur-6 brightness-50" />
+  <div class="flex flex-col items-center login-container pt-6%">
+    <div class="w-80px h-80px">
+      <img class="h-full" :src="LoginLogo" referrerpolicy="no-referrer" />
+    </div>
+    <div class="title">{{ Title }}</div>
+    <div v-if="SubTitle" v-html="SubTitle" class="sub-title" />
+
+    <ElCard class="w-430px mt-3%" lt-sm="w-[96%] mx-[2%]">
+      <ElForm ref="formRef" :model="form">
+        <VanTabs v-model:active="loginType" size="large" @change="formRef?.resetFields?.()">
+          <VanTab name="account" title="账密登录">
+            <ElFormItem prop="mobile" :rules="[
+              { required: true, trigger: 'blur', message: '请输入手机号' },
+              { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
+            ]" class="mt-20px">
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+            </ElFormItem>
+            <ElFormItem v-if="loginType === 'account'" prop="password" :rules="[
+              { required: true, trigger: 'blur', message: '请输入密码' },
+              { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' }
+            ]">
+              <ElInput type="password" v-model.trim="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
+                class="!h-52px" clearable show-password @keyup.enter="loginHandler" />
+            </ElFormItem>
+          </VanTab>
+          <VanTab name="code" title="短信登录">
+            <ElFormItem prop="mobile" :rules="[
+              { required: true, trigger: 'blur', message: '请输入手机号' },
+              { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
+            ]" class="mt-20px">
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+            </ElFormItem>
+            <ElFormItem v-if="loginType === 'code'" prop="vercode"
+              :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
+              <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" @enter="loginHandler" />
+            </ElFormItem>
+          </VanTab>
+        </VanTabs>
+
+        <ElFormItem>
+          <div class="flex justify-between w-full">
+            <ElCheckbox v-model="SaveFlag">三天之内免登录</ElCheckbox>
+            <ElButton v-show="loginType === 'account'" type="warning" @click="useChangePassword" link>忘记密码？</ElButton>
+          </div>
+        </ElFormItem>
+      </ElForm>
+
+      <VanButton type="primary" class="w-full" @click="loginHandler">
+        登录
+      </VanButton>
+    </ElCard>
+
+    <div v-if="SloGan" class="slogan">
+      {{ SloGan }}
+    </div>
+    <div class="content-wrapper">
+      <div class="mb-5% text-[#c0c0c0] text-16px">{{ Version }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@-webkit-keyframes left-to-right {
+  from {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  to {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes left-to-right {
+  from {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  to {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.login-container {
+  @apply relative overflow-hidden h-100vh w-full;
+
+  .title {
+    @apply mt-10px text-[#fff] text-24px font-bold;
+  }
+
+  .sub-title {
+    @apply mt-10px text-[#f5f5f5] text-16px mb-30px;
+  }
+
+  .slogan {
+    @apply flex flex-1 justify-center items-center text-[#fff] font-500 text-26px text-shadow;
+    -webkit-animation: left-to-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    animation: left-to-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+}
+</style>
+

package/template-nuxt-admin/pages/system/api.vue

@@ -0,0 +1,166 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-25 16:44:56
+ * @LastEditTime: 2023-08-25 16:54:08
+ * @Description:
+-->
+<script lang="ts" setup>
+import { useFormMode, YoungDialog, YoungTablePro, YoungPagination, YoungSelect, useQuery, YoungSearchForm } from '@bluesyoung/ui-vue3-element-plus';
+import type { TableDataItem, TableHeadItem, SelectOptionItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus';
+import { deepClone } from '@bluesyoung/utils';
+import { ElButton, ElTag } from 'element-plus';
+
+definePageMeta({
+  title: '接口管理'
+});
+
+interface Form extends ApiItem { op?: any; };
+const FORM_TEMP: Form = {
+  id: 0,
+  path: '',
+  desc: '',
+  method: 'POST',
+  category: '',
+  roleIds: []
+};
+const {
+  isAdd,
+  isEdit,
+  edit,
+  del,
+  sure,
+  clear,
+  form,
+  formRef,
+  validForm
+} = useFormMode<Form>(FORM_TEMP, {
+  addCbk: async () => {
+    const res = await validForm() as boolean;
+    if (res) {
+      const v = deepClone(form.value);
+      await apis.post.addApiItem(v);
+      ElMessage.success('新增成功！');
+    }
+    return res;
+  },
+  modCbk: async () => {
+    const res = await validForm() as boolean;
+    if (res) {
+      const v = deepClone(form.value);
+      await apis.patch.changeApiItem(v);
+      ElMessage.success('修改成功！');
+    }
+    return res;
+  },
+  delCbk: async (row) => {
+    await apis.delete.deleteApi(row.id.toString());
+    ElMessage.success('删除成功！');
+    query.value.pageNum = 1;
+  },
+  cgEffect: () => getList(),
+});
+const tableHead: TableHeadItem<Form>[] = [
+  { prop: 'id', label: '接口ID' },
+  { prop: 'desc', label: '接口描述' },
+  { prop: 'category', label: '接口分组' },
+  { prop: 'path', label: '接口路径' },
+  { prop: 'creator', label: '创建信息' },
+  {
+    prop: 'method', label: '接口方法', render: (row) => h(ElTag, {
+      effect: 'dark',
+      type: MethodObj[row.method]
+    },
+      {
+        default: () => row.method
+      }
+    )
+  },
+  {
+    prop: 'op', label: '操作', render: (row) => h('div', [
+      h(ElButton, { type: 'primary', link: true, onClick: () => edit(row) }, { default: () => '编辑' }),
+      h(ElButton, { type: 'danger', link: true, onClick: () => del(row) }, { default: () => '删除' })
+    ])
+  }
+];
+const tableData = ref<TableDataItem<Form>[]>([]);
+
+const getList = async () => {
+  const { list: role_list } = await apis.get.getRoleList({ noPagination: true });
+  roleList.value = (role_list || []).map((item: RoleItem) => {
+    return {
+      label: item.name,
+      value: item.id
+    };
+  });
+
+  const { list, pageNum, pageSize, total } = await apis.get.getApiList(query.value);
+  tableData.value = deepClone(list || []);
+  query.value.pageNum = +pageNum || 1;
+  query.value.pageSize = +pageSize || 50;
+  query.value.total = +total || 0;
+};
+
+type Query = BaseQuery & Partial<Form>;
+const { query, reset } = useQuery<Query>(
+  {
+    pageNum: 1,
+    pageSize: 10,
+    total: 0,
+    path: '',
+  },
+  getList,
+);
+const queryScheme: YoungSearchScheme<Query> = {
+  path: {
+    type: 'input',
+    tip: '接口路径',
+    attrs: {
+      placeholder: '请输入接口路径',
+    },
+  },
+};
+
+const roleList = ref<SelectOptionItem<number>[]>([]);
+
+useTabReOpen(getList);
+</script>
+<template>
+  <ElCard>
+    <YoungSearchForm v-model="query" :search-scheme="queryScheme" :on-search="getList" :on-reset="reset">
+      <template #btns>
+        <ElButton type="success" @click="isAdd = true">添加接口</ElButton>
+      </template>
+    </YoungSearchForm>
+  </ElCard>
+
+  <br />
+
+  <ElCard>
+    <YoungTablePro :table-data="tableData" :table-head="tableHead" />
+    <YoungPagination v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
+      @page-change="getList" />
+  </ElCard>
+  <YoungDialog :is-add="isAdd" :is-edit="isEdit" :diff-form="form" width="520px" @sure="sure" @clear="clear">
+    <template #body>
+      <ElForm ref="formRef" :model="form" label-width="100px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
+        <ElFormItem label="分组名称" prop="category" :rules="{ required: true, message: '请填写分组名称', trigger: 'blur' }">
+          <ElInput v-model.trim="form.category" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="接口描述" prop="desc" :rules="{ required: true, message: '请填写接口描述', trigger: 'blur' }">
+          <ElInput v-model.trim="form.desc" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="请求方法">
+          <YoungSelect v-model="form.method" class="!w-300px"
+            :options="Object.keys(MethodObj).map((item) => ({ label: item, value: item }))" />
+        </ElFormItem>
+        <ElFormItem label="接口路径" prop="path"
+          :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }">
+          <ElInput v-model.trim="form.path" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="关联角色">
+          <YoungSelect v-model="form.roleIds" multiple placeholder="请选择角色" class="!w-300px" :options="roleList" />
+        </ElFormItem>
+      </ElForm>
+    </template>
+  </YoungDialog>
+</template>

package/template-nuxt-admin/pages/system/hooks/useRole.ts

@@ -0,0 +1,336 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 15:51:14
+ * @LastEditTime: 2023-07-28 11:22:35
+ * @Description:
+ */
+import type {
+  SelectOptionItem,
+  TableDataItem,
+  TableHeadItem,
+  YoungSearchScheme,
+} from '@bluesyoung/ui-vue3-element-plus';
+import { YoungSelect, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus';
+import { deepClone } from '@bluesyoung/utils';
+
+export const useRoleBase = () => {
+  const FORM_TEMP: RoleItem = {
+    id: 0,
+    name: '',
+    keyword: '',
+    desc: '',
+    status: 1,
+    sort: 0,
+  };
+
+  const { isAdd, isEdit, edit, del, sure, clear, form, formRef, validForm } = useFormMode(
+    FORM_TEMP,
+    {
+      addCbk: async () => {
+        const res = (await validForm()) as boolean;
+        if (res) {
+          const v = deepClone(form.value);
+          await apis.post.addRoleItem(v);
+          ElMessage.success('新增成功！');
+        }
+        return res;
+      },
+      modCbk: async () => {
+        const res = (await validForm()) as boolean;
+        if (res) {
+          const v = deepClone(form.value);
+          await apis.patch.changeRoleItem(v);
+          ElMessage.success('修改成功！');
+        }
+        return res;
+      },
+      delCbk: async (row) => {
+        await apis.delete.deleteRole(row.id.toString());
+        ElMessage.success('删除成功！');
+        query.value.pageNum = 1;
+      },
+      cgEffect: () => getList(),
+    },
+  );
+
+  const options: SelectOptionItem[] = [
+    { label: '禁用', value: 0 },
+    { label: '启用', value: 1 },
+  ];
+
+  const tableHead: TableHeadItem<RoleItem>[] = [
+    { label: '角色ID', prop: 'id' },
+    { label: '角色关键字', prop: 'keyword' },
+    { label: '角色名称', prop: 'name' },
+    { label: '角色描述', prop: 'desc' },
+    { label: '创建信息', prop: 'creator' },
+    {
+      label: '启用状态',
+      prop: 'status',
+      render: (row) =>
+        h(YoungSelect, {
+          modelValue: row.status,
+          options,
+          'onUpdate:modelValue': async (status) => {
+            // 状态未修改
+            if (status === row.status) {
+              return;
+            }
+
+            row.status = status as 0 | 1;
+            await apis.patch.changeRoleItem(row);
+            ElMessage.success('修改成功！');
+          },
+        }),
+    },
+  ];
+  const tableData = ref<TableDataItem<RoleItem>[]>([]);
+  const getList = async () => {
+    const { list, pageNum, pageSize, total } = await apis.get.getRoleList(query.value);
+    tableData.value = deepClone(list || []);
+    query.value.pageNum = +pageNum || 1;
+    query.value.pageSize = +pageSize || 50;
+    query.value.total = +total || 0;
+  };
+
+  interface Query extends BaseQuery {
+    name: string;
+    keyword: string;
+    status: 0 | 1;
+  }
+
+  const { query, reset } = useQuery<Query>(
+    {
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      name: '',
+      keyword: '',
+      status: 1,
+    },
+    getList,
+  );
+
+  const queryScheme: YoungSearchScheme<Query> = {
+    name: {
+      type: 'input',
+      tip: '角色名称',
+      attrs: {
+        placeholder: '请输入角色名称(中文)',
+      },
+    },
+    keyword: {
+      type: 'input',
+      tip: '角色关键字',
+      attrs: {
+        placeholder: '请输入角色关键字(英文)',
+      },
+    },
+    status: {
+      type: 'select',
+      tip: '状态',
+      attrs: {
+        placeholder: '角色状态',
+      },
+      options,
+    },
+  };
+
+  return {
+    query,
+    queryScheme,
+    getList,
+    reset,
+    tableHead,
+    tableData,
+    baseFormRef: formRef,
+    base: reactive({
+      form,
+      isAdd,
+      isEdit,
+      edit,
+      del,
+      sure,
+      clear,
+    }),
+  };
+};
+
+export const useRoleMenu = () => {
+  const showPriority = ref(false);
+  const currRole = ref(0);
+  const access = ref<number[]>([]);
+  const origin = ref<number[]>([]);
+
+  const tableHead = ref<TableHeadItem<NavArrItem>[]>([
+    { label: '菜单名称', prop: 'title' },
+    { label: '菜单id', prop: 'id' },
+    { label: '父节点', prop: 'parentId' },
+    { label: '页面路径', prop: 'component' },
+  ]);
+  const tableData = ref<TableDataItem<NavArrItem>[]>([]);
+
+  const checkMap = ref<Record<number, boolean>>({});
+
+  /**
+   * 生成节点映射
+   */
+  const nodeMap = new Map<number, NavArrItem>();
+  const generateNodeMap = (list: NavArrItem[]) => {
+    for (const node of list) {
+      nodeMap.set(node.id, node);
+      if (node.children && node.children?.length > 0) {
+        generateNodeMap(node.children);
+      }
+    }
+  };
+
+  /**
+   * 多级联动选择
+   */
+  const selectChange = (item: NavArrItem) => {
+    if (item.children && item.children?.length !== 0) {
+      item.children.forEach((v) => {
+        checkMap.value[v.id] = checkMap.value[item.id];
+        selectChange(v);
+      });
+    }
+    if (checkMap.value[item.id]) {
+      while (item.parentId) {
+        const tp = nodeMap.get(item.parentId);
+        if (tp) {
+          item = tp;
+          checkMap.value[item.id] = true;
+        } else {
+          break;
+        }
+      }
+    }
+  };
+
+  const edit = async (row: TableDataItem<RoleItem>) => {
+    currRole.value = row.id;
+    checkMap.value = {};
+    nodeMap.clear();
+
+    const { list, accessIds } = await apis.get.getRoleMenuTree(row.id);
+    generateNodeMap(list);
+    (Array.from(accessIds) as number[]).forEach((v) => {
+      checkMap.value[v] = true;
+    });
+
+    tableData.value = deepClone(list);
+    access.value = accessIds;
+    origin.value = accessIds;
+    showPriority.value = true;
+  };
+  const clear = () => {
+    showPriority.value = false;
+    currRole.value = 0;
+    tableData.value.length = 0;
+  };
+
+  const sure = async () => {
+    const before = origin.value.slice();
+    const now = Object.entries(checkMap.value)
+      .filter(([k, v]) => v)
+      .map(([k, v]) => +k);
+
+    const add = now.filter((v) => !before.includes(v));
+    const del = before.filter((v) => !now.includes(v));
+    await apis.patch.changeRoleMenu(currRole.value, add, del);
+    ElMessage.success('修改成功！');
+    clear();
+  };
+
+  return {
+    showPriority,
+    menu: reactive({
+      checkMap,
+      tableHead,
+      tableData,
+      edit,
+      clear,
+      sure,
+      selectChange,
+    }),
+  };
+};
+
+export const useRoleApi = () => {
+  const showApi = ref(false);
+  const currRole = ref(0);
+  const access = ref<number[]>([]);
+  const origin = ref<number[]>([]);
+
+  const tableHead = ref<TableHeadItem<ApiItem>[]>([
+    { prop: 'desc', label: '接口描述' },
+    { prop: 'id', label: '接口ID' },
+    { prop: 'method', label: '接口方法' },
+    { prop: 'path', label: '请求地址' },
+  ]);
+  const tableData = ref<TableDataItem<ApiItem>[]>([]);
+
+  const checkMap = ref<Record<number, boolean>>({});
+
+  const edit = async (row: TableDataItem<RoleItem>) => {
+    currRole.value = row.id;
+    checkMap.value = {};
+
+    const { list, accessIds } = await apis.get.getRoleApis(row.id);
+    (Array.from(accessIds) as number[]).forEach((v) => {
+      checkMap.value[v] = true;
+    });
+
+    tableData.value = deepClone(
+      Array.from(list)
+        .map((item: any) => item.children)
+        .flat(),
+    );
+
+    access.value = accessIds;
+    origin.value = accessIds;
+    showApi.value = true;
+
+    isAll.value = tableData.value.length === access.value.length;
+  };
+  const clear = () => {
+    showApi.value = false;
+    currRole.value = 0;
+    tableData.value.length = 0;
+  };
+
+  const sure = async () => {
+    const before = origin.value.slice();
+    const now = Object.entries(checkMap.value)
+      .filter(([k, v]) => v)
+      .map(([k, v]) => +k);
+
+    const add = now.filter((v) => !before.includes(v));
+    const del = before.filter((v) => !now.includes(v));
+    await apis.patch.changeRoleApi(currRole.value, add, del);
+    ElMessage.success('修改成功！');
+    clear();
+  };
+
+  const isAll = ref(false);
+  const changeAll = () => {
+    tableData.value.forEach((i) => {
+      checkMap.value[i.id] = isAll.value;
+    });
+  };
+
+  return {
+    showApi,
+    api: reactive({
+      checkMap,
+      tableHead,
+      tableData,
+      edit,
+      clear,
+      sure,
+      isAll,
+      changeAll,
+    }),
+  };
+};