create-young-proj 0.0.1 → 0.1.0

package/template-vue-admin/.vscode/list-export.code-snippets

@@ -0,0 +1,72 @@
+{
+  "list-export-admin": {
+    "prefix": "list-export",
+    "body": [
+      "<route lang=\"yaml\">",
+      "meta:",
+      "  title: $1",
+      "  authPath: $2",
+      "</route>",
+      "",
+      "<script lang=\"ts\" setup>",
+      "import { YoungTable, YoungPagination} from '@bluesyoung/ui-vue3-element-plus';",
+      "import type { TableDataItem, TableHeadItem } from '@bluesyoung/ui-vue3-element-plus';",
+      "import type { $3 } from '@/typings';",
+      "import { apis } from '@/modules/3-net';",
+      "",
+      "interface Form extends $3 {};",
+      "",
+      "const tableHead: TableHeadItem<Form>[] = [",
+      "  { prop: '', label: '' },",
+      "];",
+      "const tableData = ref<TableDataItem<Form>[]>([]);",
+      "",
+      "type Query = BaseQuery & Partial<Form>;",
+      "const query = reactive<Query>({",
+      "  pageNum: 1,",
+      "  pageSize: 10,",
+      "  total: 0,",
+      "});",
+      "",
+      "const getList = async () => {",
+      "  // const { list, pageNum, pageSize, total } = await apis.get.getApiList(query);",
+      "  // tableData.value = deepClone(list || []);",
+      "  // query.pageNum = +pageNum || 1;",
+      "  // query.pageSize = +pageSize || 50;",
+      "  // query.total = +total || 0;",
+      "};",
+      "",
+      "const exportHandler = async () => {",
+      "  const { useExport2Excel } = await import('@bluesyoung/ui-vue3-element-plus');",
+      "  await useExport2Excel({",
+      "    filename: '数据导出',",
+      "    tableHead: tableHead,",
+      "    tableData: tableData.value",
+      "  });",
+      "};",
+      "",
+      "getList();",
+      "</script>",
+      "",
+      "<template>",
+      "  <div class=\"flex\">",
+      "    <div class=\"m-2\">",
+      "      <ElInput v-model=\"query.\" placeholder=\"请输入\" />",
+      "    </div>",
+      "    <div class=\"m-2\">",
+      "      <ElButton type=\"primary\" @click=\"getList\">搜索</ElButton>",
+      "    </div>",
+      "    <div class=\"m-2\">",
+      "      <ElButton :disabled=\"tableData.length <= 0\" type=\"success\" @click=\"exportHandler\">导出</ElButton>",
+      "    </div>",
+      "  </div>",
+      "  <div class=\"m-2\">",
+      "    <YoungTable :table-data=\"tableData\" :table-head=\"tableHead\" :table-height=\"680\" />",
+      "    <YoungPagination v-model:page=\"query.pageNum\" v-model:limit=\"query.pageSize\" :total=\"query.total\"",
+      "      @page-change=\"getList\" />",
+      "  </div>",
+      "</template>"
+    ],
+    "description": "list-export-admin"
+  }
+}

package/template-vue-admin/.vscode/list.code-snippets

@@ -0,0 +1,61 @@
+{
+	"list-admin": {
+		"prefix": "list",
+		"body": [
+			"<route lang=\"yaml\">",
+			"meta:",
+			"  title: $1",
+			"  authPath: $2",
+			"</route>",
+			"",
+			"<script lang=\"ts\" setup>",
+			"import { YoungPagination, YoungTable } from '@bluesyoung/ui-vue3-element-plus';",
+			"import type { TableHeadItem, TableDataItem } from '@bluesyoung/ui-vue3-element-plus';",
+			"import { deepClone } from '@bluesyoung/utils';",
+			"import { $3 } from '@/typings';",
+			"import { apis } from '@/modules/3-net';",
+			"",
+			"interface Form extends $3 { };",
+			"",
+			"const tableHead: TableHeadItem<Form>[] = [",
+			"  { prop: '', label: '' },",
+			"];",
+			"interface Query extends BaseQuery {};",
+			"const query = reactive<Query>({",
+			"  pageNum: 1,",
+			"  pageSize: 50,",
+			"  total: 0,",
+			"});",
+			"",
+			"const tableData = ref<TableDataItem<Form>[]>([]);",
+			"const roleList = ref<SelectOptionItem[]>([]);",
+			"const getList = async () => {",
+			"  // 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;",
+			"};",
+			"",
+			"getList();",
+			"</script>",
+			"",
+			"<template>",
+			"  <div class=\"flex\">",
+			"    <div class=\"m-2\">",
+			"      <ElInput v-model=\"query.\" placeholder=\"请输入\" />",
+			"    </div>",
+			"    <div class=\"m-2\">",
+			"      <ElButton type=\"primary\" @click=\"getList\">搜索</ElButton>",
+			"    </div>",
+			"  </div>",
+			"  <div class=\"m-2\">",
+			"    <YoungTable :table-data=\"tableData\" :table-head=\"tableHead\" :table-height=\"680\" />",
+			"    <YoungPagination v-show=\"query.total > 0\" v-model:page=\"query.pageNum\" v-model:limit=\"query.pageSize\" :total=\"query.total\"",
+			"      @page-change=\"getList\" />",
+			"  </div>",
+			"</template>",
+		],
+		"description": "list-admin"
+	}
+}

package/template-vue-admin/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "rome.rome",
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
+  }
+}

package/template-vue-admin/Dockerfile

@@ -0,0 +1,42 @@
+# 拉取基础镜像
+FROM node:16-alpine as builder
+
+# 维护者
+MAINTAINER BluesYoung "bluesyoung_web@163.com"
+
+# 工作目录
+WORKDIR /app
+
+# 没有压缩包，首选 COPY，如果需要自动解包或下载，则使用 ADD
+
+# 对比依赖是否变更
+COPY package.json yarn.lock /app/
+
+# 设置npm仓库 + 下载依赖，上面的文件如果没有变化则跳过下载，直接使用缓存
+RUN npm config set registry https://registry.npmmirror.com && \
+    yarn config set registry https://registry.npmmirror.com && \        
+    yarn
+
+# 加入代码
+COPY . /app
+# 打包
+RUN yarn build
+
+# 打包完成，构建最终的极简镜像
+FROM node:16-alpine
+
+# 工作目录
+WORKDIR /app
+
+# 复制运行需要的文件[及依赖]
+# 直接复制源代码
+COPY boot.mjs /app/
+COPY config /app/config
+# 复制上一步的打包产物
+COPY --from=builder /app/.output /app/.output
+
+# 暴露指定的端口号，暂不需要
+# EXPOSE 3001
+
+# 启动容器时运行的命令
+ENTRYPOINT ["node", "boot.mjs"]

package/template-vue-admin/README.md

@@ -0,0 +1,75 @@
+# 后台模板
+
+## 用户代码片段(页面模板)
+
+模板 | 触发关键字
+--- | ---
+基础列表 | `list`
+列表 + `Excel` 导出 | `list-export`
+列表 + 弹出层 | `list-add`
+
+## **Docker 部署**
+
+- 同一份代码，可以根据运行时的环境变量决定具体表现
+- `node` 服务：
+  - 托管前端静态资源
+  - 根据环境变量读取对应的配置文件，并以接口的形式暴露给前端
+  - 跨域接口代理
+
+环境变量
+
+```sh
+# 部署环境 dev | test | online
+DEPLOY_ENV=dev
+# DEPLOY_ENV=test
+# DEPLOY_ENV=online
+# node 服务监听的端口号
+LISTEN_PORT=3000
+# 网关主机地址
+# APIGATEHOST='apisix.intranet.cn'
+```
+
+### 本地开发
+
+**确保上述的环境变量存在**
+
+启动服务端程序 `yarn dev:server`
+
+启动客户端程序 `yarn dev`
+
+### 打包预览
+
+`yarn build`
+
+确保上述的环境变量存在
+
+`node boot.mjs`
+
+### 配置文件
+
+存放于 `config` 目录下的 `.${env}rc` 文件，`env` 为对应的环境标识
+
+## 常规部署
+
+- `nginx` 托管前端静态资源
+- 每次打包时读取环境变量，打包完成之后不可变
+- 使用 `nginx` 代理跨域
+
+环境变量
+
+```sh
+# 设置静态部署
+VITE_USE_DEFAULT_DEPLOY_METHOD=true
+# 其他的环境变量，根据环境区分
+VITE_TITLE=管理后台
+```
+
+### 本地开发
+
+确保上述的环境变量存在，然后 `yarn dev` 即可
+
+### 打包预览
+
+`yarn build`
+
+`yarn preview`

package/template-vue-admin/_env

@@ -0,0 +1,8 @@
+# 部署环境 dev | test | online
+DEPLOY_ENV=dev
+# DEPLOY_ENV=test
+# DEPLOY_ENV=online
+# node 服务监听的端口号
+LISTEN_PORT=3000
+# 网关主机地址
+# APIGATEHOST='apisix.intranet.cn'

package/template-vue-admin/_gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/*.code-snippets
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.nitro
+.output

package/template-vue-admin/boot.mjs

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-09-16 11:48:05
+ * @LastEditTime: 2022-12-29 16:21:59
+ * @Description:
+ */
+(async () => {
+  const env = process.env.DEPLOY_ENV;
+  const listenPort = process.env.LISTEN_PORT || 3003;
+  console.log('当前环境：', env);
+  console.log('服务监听端口：', listenPort);
+
+  process.env.NITRO_PORT = listenPort;
+
+  await import('./.output/server/index.mjs');
+})();

package/template-vue-admin/config/.devrc

@@ -0,0 +1,2 @@
+VITE_TITLE = 管理后台-dev
+VITE_BASE_HTTP = http://localhost:7001

package/template-vue-admin/config/.onlinerc

@@ -0,0 +1,2 @@
+VITE_TITLE = 管理后台-online
+VITE_BASE_HTTP = http://localhost:7001

package/template-vue-admin/config/.testrc

@@ -0,0 +1,2 @@
+VITE_TITLE = 管理后台-test
+VITE_BASE_HTTP = http://localhost:7001

package/template-vue-admin/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+    <script>
+    // hack globalThis
+    this.globalThis || (this.globalThis = this);
+    // window.onerror = function(e) {
+    //   console.log(e)
+    //   window.alert('您的浏览器版本过低，请尝试使用其他浏览器或将浏览器升级至最新版本后重试！');
+    // }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,19 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-28 11:59:56
+ * @LastEditTime: 2023-01-04 19:01:20
+ * @Description:
+ */
+import { defineNitroConfig } from 'nitropack';
+
+export default defineNitroConfig({
+  /**
+   * 托管前端静态资源
+   */
+  serveStatic: 'node',
+  publicAssets: [
+    {
+      dir: 'dist',
+    },
+  ],
+});

package/template-vue-admin/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "vue3_admin",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "dev:server": "nitropack dev",
+    "build": "vite build && nitropack build",
+    "preview": "vite preview --host",
+    "format": "rome format .* --write",
+    "release": "changelogen && bumpp --no-push"
+  },
+  "dependencies": {
+    "@bluesyoung/http": "0.1.3",
+    "@bluesyoung/ui-vue3": "0.0.3",
+    "@bluesyoung/ui-vue3-element-plus": "0.0.6",
+    "@bluesyoung/utils": "0.0.3",
+    "@vueuse/core": "^9.4.0",
+    "core-js": "^3.26.0",
+    "element-plus": "^2.2.28",
+    "pinia": "^2.0.23",
+    "regenerator-runtime": "^0.13.10",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.1",
+    "@types/node": "16",
+    "@unocss/reset": "^0.48.0",
+    "@vitejs/plugin-legacy": "^3.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "bumpp": "^8.2.1",
+    "c12": "^1.1.0",
+    "changelogen": "^0.4.0",
+    "less": "^4.1.3",
+    "nitropack": "^1.0.0",
+    "rome": "^11.0.0",
+    "sass": "^1.57.1",
+    "terser": "^5.15.1",
+    "typescript": "^4.8.4",
+    "unocss": "^0.48.0",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.9",
+    "vite": "^4.0.4",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-vue-layouts": "^0.7.0"
+  }
+}

package/template-vue-admin/plugins/env.ts

@@ -0,0 +1,26 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-04 18:53:23
+ * @LastEditTime: 2023-01-04 19:12:55
+ * @Description: 在插件中读取环境变量，避免重复的文件 io
+ */
+import { resolve } from 'node:path';
+import { loadConfig } from 'c12';
+// @ts-ignore
+export default defineNitroPlugin(async (app) => {
+  const env = (process.env.DEPLOY_ENV as 'dev' | 'test' | 'online') || 'dev';
+  const { config } = await loadConfig({
+    name: env,
+    cwd: resolve(process.cwd(), 'config'),
+  });
+
+  for (const key in config) {
+    if (Object.prototype.hasOwnProperty.call(config, key)) {
+      process.env[key] = config[key];
+    }
+  }
+
+  console.log('------------------------读取配置文件------------------------');
+  console.log(config);
+  console.log('------------------------------------------------------------');
+});

package/template-vue-admin/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue-admin/rome.json

@@ -0,0 +1,26 @@
+{
+  "formatter": {
+    "ignore": [
+      "node_modules/**/*",
+      "src/utils/**/*.js",
+      "src/utils/**/*.map",
+      "*.d.ts",
+      "index.html",
+      "yarn.lock",
+      "*.json",
+      "README.md",
+      "dist/**/*"
+    ],
+    "indentStyle": "space",
+    "indentSize": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "enabled": false
+  }
+}

package/template-vue-admin/routes/api/[...all].ts

@@ -0,0 +1,49 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-04 15:16:30
+ * @LastEditTime: 2023-01-05 09:10:47
+ * @Description:
+ */
+export default eventHandler(async (event) => {
+  const method = event.node.req.method;
+  const url = event.node.req.url;
+  let body;
+
+  if (!(method && method.toLowerCase() === 'get')) {
+    try {
+      body = await readBody(event);
+      console.log('🚀 ~ file: [...all].ts:16 ~ eventHandler ~ body', body);
+    } catch (error) {
+      console.log('🚀 ~ file: [...all].ts:18 ~ eventHandler ~ error', error);
+    }
+  }
+
+  // 开发服使用 http + 主机名，其他环境直接读取完整配置
+  const api_server_url = process.env.VITE_BASE_HTTP;
+  // 如果正式服报错，则设置一个请求头白名单，只传递对应的请求头
+  // console.log("🚀 ~ file: [...].post.ts:11 ~ defineEventHandler ~ api_server_url", api_server_url);
+  const headers = event.node.req.headers as Record<string, string>;
+
+  try {
+    const res = await $fetch(`${api_server_url}${url}`, {
+      method: event.node.req.method,
+      headers: {
+        time: headers['time'],
+        authorization: headers['authorization'],
+        sign: headers['sign'],
+        'content-type': headers['content-type'],
+        'x-forwarded-for': headers['x-forwarded-for'],
+      },
+      body,
+    });
+
+    return res;
+  } catch (error: any) {
+    if (error.toString().includes('401')) {
+      event.node.res.statusCode = 401;
+      return error.data;
+    } else {
+      return error;
+    }
+  }
+});

package/template-vue-admin/routes/get/env.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-11-18 10:55:50
+ * @LastEditTime: 2023-01-04 19:06:46
+ * @Description:
+ */
+export default defineEventHandler(async (event) => {
+  const envObj: any = {};
+  for (const key in process.env) {
+    if (Object.prototype.hasOwnProperty.call(process.env, key) && key.startsWith('VITE_')) {
+      envObj[key] = process.env[key];
+    }
+  }
+
+  event.node.res.setHeader('Access-Control-Allow-Origin', '*');
+
+  return envObj as ImportMetaEnv;
+});

package/template-vue-admin/src/App.vue

@@ -0,0 +1,14 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-12-03 15:57:40
+ * @LastEditTime: 2023-01-05 14:07:02
+ * @Description:
+-->
+<script lang="ts" setup>
+import locale from 'element-plus/lib/locale/lang/zh-cn';
+</script>
+<template>
+  <ElConfigProvider :locale="locale">
+    <RouterView />
+  </ElConfigProvider>
+</template>

package/template-vue-admin/src/apis/delete.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-06 10:50:53
+ * @LastEditTime: 2023-01-06 14:08:45
+ * @Description:
+ */
+import { http } from '@/modules/3-net';
+
+const method = 'DELETE';
+
+const del = async (url: string, ids: string) => {
+  await http.authReq({
+    url,
+    method,
+    data: { ids },
+  });
+};
+
+export const useDeleteReq = () => ({
+  /**
+   * 删除用户
+   */
+  deleteUser: async (ids: string) => del('/user/delete/batch', ids),
+  /**
+   * 删除菜单
+   */
+  deleteMenu: async (ids: string) => del('/menu/delete/batch', ids),
+  /**
+   * 删除接口
+   */
+  deleteApi: async (ids: string) => del('/api/delete/batch', ids),
+  /**
+   * 删除角色
+   */
+  deleteRole: async (ids: string) => del('/role/delete/batch', ids),
+});