create-young-proj 0.0.1 → 0.1.0

package/template-vue-admin/src/views/system/menuList.vue

@@ -0,0 +1,195 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-05-30 16:28:37
+ * @LastEditTime: 2023-01-06 11:35:16
+ * @Description: 菜单管理
+-->
+<route lang="yaml">
+meta:
+  title: 菜单管理
+  authPath: /system/menuList
+</route>
+
+<script lang="ts" setup>
+import { deepClone, isArray } from '@bluesyoung/utils';
+import { useFormMode, YoungDialog } from '@bluesyoung/ui-vue3-element-plus';
+import { apis } from '@/modules/3-net';
+
+const FORM_TEMP: NavArrItem = {
+  breadcrumb: 0,
+  component: '',
+  createdAt: '',
+  creator: '',
+  icon: '',
+  id: 0,
+  name: '',
+  not_dev: 0,
+  parentId: 0,
+  path: '',
+  permission: '',
+  redirect: '',
+  sort: 0,
+  status: 1,
+  title: '',
+  updatedAt: '',
+  visible: 1
+};
+// key 的类型必须为 string 才会生效！！！
+const expandKeys = ref<Set<string>>(new Set());
+
+let tempArr: string[] = [];
+const getFatherAndSon = (arr: NavArrItem[], num?: number): string[] => {
+  if (num === 1) {
+    tempArr = [];
+  }
+  for (const item of arr) {
+    tempArr.push(item.id + '');
+    if (item.children && isArray(item.children) && item.children.length > 0) {
+      getFatherAndSon(deepClone(item.children));
+    }
+  }
+  return tempArr;
+};
+const expandChange = (...args: any) => {
+  const [row, isOpen] = args as [NavArrItem, boolean];
+  const autoid = row.id;
+  if (isOpen) {
+    expandKeys.value.add(autoid + '');
+  } else {
+    const allSub = getFatherAndSon([row], 1);
+    allSub.forEach((v) => expandKeys.value.delete(v));
+  }
+};
+const tableData = ref<NavArrItem[]>([]);
+
+const topMenuOption = ref<Partial<NavArrItem>[]>([]);
+
+/**
+ * 获取节点列表
+ */
+const getList = async () => {
+  const list = Object.values(await apis.get.getMenuList());
+
+  tableData.value = list;
+
+  topMenuOption.value = [
+    { title: '顶级目录', children: list, id: 0 }
+  ];
+};
+
+const {
+  isAdd,
+  isEdit,
+  form,
+  edit,
+  del,
+  sure,
+  clear,
+  formRef,
+  validForm
+} = useFormMode<NavArrItem>(FORM_TEMP, {
+  addCbk: async () => {
+    const res = await validForm() as boolean;
+    if (res) {
+      const v = deepClone(form.value);
+      await apis.post.addMenuItem(v);
+      ElMessage.success('菜单添加成功！');
+    }
+    return res;
+  },
+  modCbk: async () => {
+    const res = await validForm() as boolean;
+    if (res) {
+      const v = deepClone(form.value);
+      await apis.patch.changeMenuItem(v);
+      ElMessage.success('菜单修改成功！');
+    }
+    return res;
+  },
+  delCbk: async (nav: NavArrItem) => {
+    apis.delete.deleteMenu(nav.id.toString());
+    expandKeys.value.delete(nav.id.toString());
+    ElMessage.success('节点删除成功！');
+    // 框架有 bug，视图更新不及时
+    location.reload();
+  },
+  cgEffect: async () => {
+    await getList();
+  }
+});
+
+/**
+ * 添加节点
+ */
+const add = () => {
+  form.value.parentId = 0;
+  isAdd.value = true;
+};
+
+const changeVisiable = async (id: number, visible: number) => {
+  await apis.patch.changeMenuItem({ id, visible });
+  ElMessage.success('修改成功！');
+  getList();
+};
+
+getList()
+</script>
+
+<template>
+  <div class="index">
+    <div class="caozuoFat">
+      <ElButton type="primary" plain @click="add">新建菜单</ElButton>
+    </div>
+    <!-- 节点列表 -->
+    <ElTable :data="tableData" style="width: 100%; margin-bottom: 20px;" :tree-props="{ children: 'children' }"
+      row-key="id" :expand-row-keys="[...expandKeys]" @expand-change="expandChange">
+      <ElTableColumn prop="name" label="英文名称" width="320px" />
+      <ElTableColumn prop="title" label="标题" />
+      <ElTableColumn prop="sort" label="同级排序" />
+      <ElTableColumn prop="component" label="页面路径" />
+      <ElTableColumn prop="visible" label="隐藏/显示">
+        <template #default="scope">
+          <ElSwitch v-model="scope.row.visible" :active-value="1" :inactive-value="0" active-color="#409EFF"
+            inactive-color="#909399" @change="(e) => changeVisiable(scope.row.id, e as number)" />
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="creator" label="创建人" />
+      <ElTableColumn label="操作" width="300" fixed="right">
+        <template #default="scope">
+          <ElButton @click="edit(scope.row)">编辑</ElButton>
+          <ElButton type="danger" @click="del(scope.row)">删除</ElButton>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <!-- 添加 / 编辑 -->
+    <YoungDialog width="370px" :is-add="isAdd" :is-edit="isEdit" @sure="sure" @clear="clear">
+      <template #body>
+        <ElForm ref="formRef" :model="form" label-width="80px">
+          <ElFormItem label="上级目录">
+            <ElCascader :model-value="form.parentId" :props="{
+              label: 'title',
+              value: 'id',
+              checkStrictly: true,
+              multiple: false
+            }" :options="topMenuOption" :show-all-levels="false"
+              @update:model-value="(e: any) => form.parentId = e[e.length - 1]" />
+          </ElFormItem>
+          <ElFormItem label="英文名称" prop="name" :rules="{ required: true, message: '请输入英文名', trigger: 'blur' }">
+            <ElInput v-model="form.name" placeholder="请输入英文名" />
+          </ElFormItem>
+          <ElFormItem label="标题" prop="title" :rules="{ required: true, message: '请输入页面标题', trigger: 'blur' }">
+            <ElInput v-model="form.title" placeholder="请输入页面标题" />
+          </ElFormItem>
+          <ElFormItem label="排序">
+            <ElInput v-model.number="form.sort" />
+          </ElFormItem>
+          <ElFormItem label="路径" prop="component" :rules="form.parentId === 0 ? {} :
+            { message: '请输入合法的路径, eg: /path/page', trigger: 'blur', validator: (_: any, v: string) => v.trim() === '' || /\/(.*)\/(.*)/.test(v) }
+          ">
+            <ElInput v-model="form.component" />
+          </ElFormItem>
+        </ElForm>
+      </template>
+    </YoungDialog>
+  </div>
+</template>

package/template-vue-admin/src/views/system/role.vue

@@ -0,0 +1,132 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-03-01 20:04:26
+ * @LastEditTime: 2023-01-09 10:32:11
+ * @Description: 角色列表
+-->
+<route lang="yaml">
+meta:
+  title: 角色列表
+  authPath: /system/role
+</route>
+
+<script lang="ts" setup>
+import { YoungTable, YoungDialog, YoungPagination } from '@bluesyoung/ui-vue3-element-plus';
+import { useRoleApi, useRoleBase, useRoleMenu } from './hooks/useRole';
+
+const {
+  query,
+  getList,
+  tableHead,
+  tableData,
+  baseFormRef,
+  changeStatus,
+  base
+} = useRoleBase();
+
+const { showPriority, menu } = useRoleMenu();
+
+const { showApi, api } = useRoleApi();
+
+getList();
+</script>
+
+<template>
+  <div class="flex">
+    <div class="m-2">
+      <ElInput v-model="query.name" placeholder="请输入角色名称(中文)" />
+    </div>
+    <div class="m-2">
+      <ElInput v-model="query.keyword" placeholder="请输入角色关键字(英文)" />
+    </div>
+    <div class="m-2 w-50">
+      <ElSelect v-model="query.status" placeholder="请选择状态" clearable>
+        <ElOption :value="1" label="1-启用" />
+        <ElOption :value="0" label="0-禁用" />
+      </ElSelect>
+    </div>
+    <div class="m-2">
+      <ElButton type="primary" @click="getList">搜索</ElButton>
+    </div>
+    <div class="m-2">
+      <ElButton type="success" @click="base.isAdd = true">添加角色</ElButton>
+    </div>
+  </div>
+  <div class="m-2">
+    <YoungTable :table-data="tableData" :table-head="tableHead" :table-height="680">
+      <template #switch>
+        <ElTableColumn label="禁用/启用">
+          <template #default="scope">
+            <ElSwitch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#409EFF"
+              inactive-color="#909399" @change="(e) => changeStatus(scope.row.id, e as number)" />
+          </template>
+        </ElTableColumn>
+      </template>
+      <template #operate>
+        <ElTableColumn label="操作" width="300px" fixed="right">
+          <template #default="scope">
+            <ElButton type="primary" link @click="base.edit(scope.row)">信息编辑</ElButton>
+            <ElButton type="primary" link @click="menu.edit(scope.row)">菜单编辑</ElButton>
+            <ElButton type="primary" link @click="api.edit(scope.row)">接口编辑</ElButton>
+            <ElButton type="danger" link @click="base.del(scope.row)">删除</ElButton>
+          </template>
+        </ElTableColumn>
+      </template>
+    </YoungTable>
+    <YoungPagination v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
+      @page-change="getList" />
+  </div>
+  <!-- 基础信息编辑 -->
+  <YoungDialog :is-add="base.isAdd" :is-edit="base.isEdit" width="520px" @sure="base.sure" @clear="base.clear">
+    <template #body>
+      <ElForm ref="baseFormRef" :model="base.form" label-width="120px">
+        <ElFormItem label="角色名称(中文)" prop="name" :rules="[{ required: true, message: '请填写角色名称', trigger: 'blur' }]">
+          <ElInput v-model="base.form.name" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="关键字(英文)" prop="keyword" :rules="[{ required: true, message: '请填写关键字', trigger: 'blur' }]">
+          <ElInput v-model="base.form.keyword" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="角色描述">
+          <ElInput v-model="base.form.desc" class="!w-300px" />
+        </ElFormItem>
+      </ElForm>
+    </template>
+  </YoungDialog>
+  <!-- 菜单编辑 -->
+  <YoungDialog real-title="菜单编辑" :is-edit="showPriority" top="5vh" width="1200px" @sure="menu.sure" @clear="menu.clear">
+    <template #body>
+      <ElTable :data="menu.tableData" row-key="id" :default-expand-all="false" class="max-h-600px !overflow-y-auto">
+        <ElTableColumn prop="name" label="节点名称" width="320px">
+          <template #default="scope">
+            <ElCheckbox v-model="menu.checkMap[scope.row.id]" @change="menu.selectChange(scope.row)">{{
+              scope.row.title
+            }}</ElCheckbox>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn v-for="(item, index) in menu.tableHead" v-bind="item" :key="index + 'fsdjhfaer'" />
+        <ElTableColumn prop="name" label="隐藏/显示">
+          <template #default="scope">
+            <ElSwitch v-model="scope.row.visible" :active-value="1" :inactive-value="0" active-color="#409EFF"
+              inactive-color="#909399" disabled />
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </template>
+  </YoungDialog>
+  <!-- 接口编辑 -->
+  <YoungDialog real-title="接口编辑" :is-edit="showApi" top="5vh" width="1200px" @sure="api.sure" @clear="api.clear">
+    <template #body>
+      <ElTable :data="api.tableData" row-key="id" :default-expand-all="false" class="max-h-600px !overflow-y-auto">
+        <ElTableColumn prop="name" width="100px">
+          <template #header>
+            <ElCheckbox v-model="api.isAll" @change="api.changeAll">全选</ElCheckbox>
+          </template>
+          <template #default="scope">
+            <ElCheckbox v-model="api.checkMap[scope.row.id]">{{ scope.row.title }}</ElCheckbox>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn v-for="(item, index) in api.tableHead" v-bind="item" :key="index + 'fsdjhfaer'" />
+      </ElTable>
+    </template>
+  </YoungDialog>
+</template>

package/template-vue-admin/src/views/system/user.vue

@@ -0,0 +1,193 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-10-27 11:28:27
+ * @LastEditTime: 2023-01-09 10:32:20
+ * @Description: 
+-->
+<route lang="yaml">
+meta:
+  title: 用户管理
+  authPath: /system/user
+</route>
+
+<script lang="ts" setup>
+import { useFormMode, YoungDialog, YoungPagination, YoungTable, YoungSelect } from '@bluesyoung/ui-vue3-element-plus';
+import type { TableHeadItem, TableDataItem, SelectOptionItem } from '@bluesyoung/ui-vue3-element-plus';
+import { deepClone } from '@bluesyoung/utils';
+import { RoleItem, UserItem } from '@/typings';
+import { apis } from '@/modules/3-net';
+
+interface Form extends UserItem { };
+const FORM_TEMP: Form = {
+  id: 0,
+  username: '',
+  nickname: '',
+  mobile: '',
+  roleId: 1,
+  status: 1,
+  initPassword: ''
+};
+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.addUserItem(v);
+      ElMessage.success('新增成功！');
+    }
+    return res;
+  },
+  modCbk: async () => {
+    const res = await validForm() as boolean;
+    if (res) {
+      const v = deepClone(form.value);
+      await apis.patch.changeUserItem(v);
+      ElMessage.success('修改成功！');
+    }
+    return res;
+  },
+  delCbk: async (row) => {
+    await apis.delete.deleteUser(row.id.toString());
+    ElMessage.success('删除成功！');
+    query.pageNum = 1;
+  },
+  cgEffect: () => getList()
+});
+const tableHead: TableHeadItem<Form>[] = [
+  { prop: 'id', label: '用户ID' },
+  { prop: 'username', label: '用户名' },
+  { prop: 'mobile', label: '手机号' },
+  { prop: 'role_name', label: '角色名称' },
+  { prop: 'creator', label: '创建信息' },
+];
+interface Query extends BaseQuery {
+  username: string;
+  mobile: string;
+  status: 0 | 1;
+};
+const query = reactive<Query>({
+  pageNum: 1,
+  pageSize: 50,
+  total: 0,
+  username: '',
+  mobile: '',
+  status: 1
+});
+
+const tableData = ref<TableDataItem<Form>[]>([]);
+const roleList = ref<SelectOptionItem<number>[]>([]);
+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.getUserList(query);
+  tableData.value = deepClone(list || []);
+  query.pageNum = +pageNum || 1;
+  query.pageSize = +pageSize || 50;
+  query.total = +total || 0;
+};
+/**
+ * @param id userId
+ * @param status 0 | 1
+ */
+const changeStatus = async (id: number, status: number) => {
+  await apis.patch.changeUserItem({ id, status });
+  ElMessage.success('修改成功！');
+  getList();
+};
+
+const changePwd = (e: UserItem) => {
+  ElMessageBox.prompt('请输入新密码').then(async ({ value }) => {
+    value = value.trim()
+    if (value) {
+      await apis.patch.changeUserItem({ id: e.id, newPassword: value });
+      ElMessage.success('修改成功！');
+    }
+  }).catch(() => null);
+};
+
+getList();
+</script>
+
+<template>
+  <div class="flex">
+    <div class="m-2">
+      <ElInput v-model="query.username" placeholder="请输入用户名" />
+    </div>
+    <div class="m-2">
+      <ElInput v-model="query.mobile" placeholder="请输入手机号" :maxlength="11" />
+    </div>
+    <div class="m-2 w-50">
+      <ElSelect v-model="query.status" placeholder="请选择状态" clearable>
+        <ElOption :value="1" label="1-启用" />
+        <ElOption :value="0" label="0-禁用" />
+      </ElSelect>
+    </div>
+    <div class="m-2">
+      <ElButton type="primary" @click="getList">搜索</ElButton>
+    </div>
+    <div class="m-2">
+      <ElButton type="success" @click="isAdd = true">添加用户</ElButton>
+    </div>
+  </div>
+  <div class="m-2">
+    <YoungTable :table-data="tableData" :table-head="tableHead" :table-height="680">
+      <template #switch>
+        <ElTableColumn label="禁用/启用">
+          <template #default="scope">
+            <ElSwitch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#409EFF"
+              inactive-color="#909399" @change="(e) => changeStatus(scope.row.id, e as number)" />
+          </template>
+        </ElTableColumn>
+      </template>
+      <template #operate>
+        <ElTableColumn label="操作" width="300px" fixed="right">
+          <template #default="scope">
+            <ElButton type="primary" link @click="edit(scope.row)">编辑</ElButton>
+            <ElButton type="warning" link @click="changePwd(scope.row)">修改密码</ElButton>
+            <ElButton type="danger" link @click="del(scope.row)">删除</ElButton>
+          </template>
+        </ElTableColumn>
+      </template>
+    </YoungTable>
+    <YoungPagination v-show="query.total > 0" v-model:page="query.pageNum" v-model:limit="query.pageSize"
+      :total="query.total" @page-change="getList" />
+  </div>
+  <YoungDialog :is-add="isAdd" :is-edit="isEdit" width="520px" @sure="sure" @clear="clear">
+    <template #body>
+      <ElForm ref="formRef" :model="form" label-width="100px">
+        <ElFormItem label="用户名" prop="username" :rules="{ required: true, message: '请输用户名', trigger: 'blur' }">
+          <ElInput v-model="form.username" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="昵称" prop="nickname" :rules="{ required: true, message: '请输昵称(用于右上角展示)', trigger: 'blur' }">
+          <ElInput v-model="form.nickname" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="手机号" prop="mobile" :rules="{ required: true, message: '请输手机号', trigger: 'blur' }">
+          <ElInput v-model="form.mobile" :maxlength="11" class="!w-300px" />
+        </ElFormItem>
+        <ElFormItem label="角色">
+          <YoungSelect v-model="form.roleId" placeholder="请选择角色" :options="roleList" />
+        </ElFormItem>
+        <ElFormItem v-if="isAdd" label="初始密码" prop="initPassword"
+          :rules="{ required: true, message: '请输初始密码', trigger: 'blur' }">
+          <ElInput v-model="form.initPassword" class="!w-300px" />
+        </ElFormItem>
+      </ElForm>
+    </template>
+  </YoungDialog>
+</template>

package/template-vue-admin/src/vite-env.d.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-03 15:57:40
+ * @LastEditTime: 2023-01-05 09:16:16
+ * @Description:
+ */
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
+/// <reference types="vite-plugin-vue-layouts/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+/**
+ * import.meta.env 类型提示
+ */
+declare interface ImportMetaEnv {
+  /**
+   * 标题
+   */
+  VITE_TITLE?: string;
+
+  /**
+   * 基础接口请求地址
+   */
+  VITE_BASE_HTTP: string;
+
+
+  /**
+  * 是否启用 Casdoor
+  */
+  // VITE_ENABLE_CASDOOR?: string;
+  /**
+  * Casdoor 相关
+  */
+  // VITE_CAS_SERVER?: string;
+  // VITE_CAS_ID?: string;
+  // VITE_CAS_ORG?: string;
+  // VITE_CAS_APP?: string;
+
+  /**
+   * 是否静态部署
+   */
+  VITE_USE_DEFAULT_DEPLOY_METHOD?: boolean;
+}
+
+declare interface Window {
+  __YOUNG_VITE_ENV__: ImportMetaEnv;
+}

package/template-vue-admin/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", ".nitro/**/*"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/template-vue-admin/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template-vue-admin/unocss.config.ts

@@ -0,0 +1,47 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 19:11:11
+ * @LastEditTime: 2022-05-21 18:32:05
+ * @Description:
+ */
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss';
+
+export default defineConfig({
+  shortcuts: [
+    [
+      'btn',
+      'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
+    ],
+    [
+      'icon-btn',
+      'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
+    ],
+  ],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+});