@gx-design-vue/create-gx-cli 0.0.4 → 0.0.5

package/template-design-pro/src/views/user/login/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div :class="$style['login-container']">
+    <div :class="$style.content">
+      <GProFormLogin
+        style="margin-top: 40px"
+        :model="userForm"
+        :rules="userRules"
+        :logo="Logo"
+        title="GX Pro Admin"
+        @submit="handleSubmit"
+      >
+        <template #subTitle>
+          <p>GX Pro Admin 是一套基于</p>
+          vue（{{ state.dependencies['vue'] }}） + ant-design-vue（{{
+            state.dependencies['ant-design-vue']
+          }}） 开发的一套后台系统
+        </template>
+        <GProFormText
+          name="userName"
+          :fieldProps="{ size: 'large', prefix: userOutlined }"
+          placeholder="用户名: admin"
+        />
+        <GProFormPassword
+          name="password"
+          :fieldProps="{ size: 'large', prefix: lockOutlined }"
+          placeholder="密码: gx.design"
+        />
+        <div class="mb-[24px]">
+          <GProFormCheckbox noStyle name="autoLogin">自动登录</GProFormCheckbox>
+          <a style="float: right">忘记密码</a>
+        </div>
+      </GProFormLogin>
+    </div>
+    <GlobalFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useStore } from '@gx-vuex'
+import { useRoute, useRouter } from 'vue-router'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { GProFormText, GProFormPassword, GProFormCheckbox, GProFormLogin } from '@gx-design-vue/pro-form'
+import { GlobalFooter } from '@gx-design/ProLayout'
+import Logo from '@/assets/logo.png'
+
+interface UserState {
+  userName: string
+  password: string
+}
+
+interface loginState {
+  redirect: string
+  dependencies: RecordType
+  devDependencies: RecordType
+}
+
+const { pkg } = __APP_INFO__
+
+const userOutlined = h(UserOutlined)
+const lockOutlined = h(LockOutlined)
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+const userForm = reactive({
+  userName: 'admin',
+  password: 'gx.design',
+  autoLogin: true
+} as UserState)
+
+const userRules = reactive({
+  userName: [{ required: true, message: '用户名是必填项！' }],
+  password: [{ required: true, message: '密码是必填项！' }]
+})
+
+const state: loginState = reactive({
+  redirect: undefined,
+  dependencies: pkg.dependencies,
+  devDependencies: pkg.devDependencies
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    state.redirect = (route.query?.redirect as string) || '/'
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+const handleRoute = () => {
+  return state.redirect === '/exception/404' || state.redirect === '/exception/403'
+    ? '/'
+    : state.redirect
+}
+
+const handleSubmit = async (value) => {
+  const response: any = await store.user.userLogin({ ...value })
+  if (response) {
+    await router.push(handleRoute())
+  }
+}
+</script>
+
+<style lang="less" module>
+@import './style';
+</style>

package/template-design-pro/src/views/user/login/style.less

@@ -0,0 +1,38 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: @layout-body-background;
+}
+
+.content {
+  flex: 1;
+  padding: 32px 0;
+}
+
+.icon {
+  margin-left: 8px;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.2);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: @primary-color;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .login-container {
+    background-image: url(/src/assets/login_images/login_background.svg);
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
+  }
+
+  .content {
+    padding: 32px 0 24px;
+  }
+}

package/template-design-pro/stylelint.config.js

@@ -0,0 +1,106 @@
+module.exports = {
+  root: true,
+  plugins: [ 'stylelint-order' ],
+  extends: [ 'stylelint-config-standard', 'stylelint-config-prettier' ],
+  customSyntax: 'postcss-html',
+  rules: {
+    'number-leading-zero': null,
+    'alpha-value-notation': null,
+    'color-function-notation': null,
+    'no-eol-whitespace': null,
+    'function-no-unknown': null,
+    'selector-class-pattern': null,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: [ 'global' ]
+      }
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: [ 'v-deep' ]
+      }
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin'
+        ]
+      }
+    ],
+    'no-empty-source': null,
+    'font-family-name-quotes': null,
+    'declaration-colon-newline-after': null,
+    'selector-pseudo-element-colon-notation': null,
+    'string-quotes': null,
+    'named-grid-areas-no-invalid': null,
+    'unicode-bom': 'never',
+    'no-descending-specificity': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    'rule-empty-line-before': [
+      'always',
+      {
+        ignore: [ 'after-comment', 'first-nested' ]
+      }
+    ],
+    'unit-no-unknown': [ true, { ignoreUnits: [ 'rpx' ] } ],
+    'order/order': [
+      [
+        'dollar-variables',
+        'custom-properties',
+        'at-rules',
+        'declarations',
+        {
+          type: 'at-rule',
+          name: 'supports'
+        },
+        {
+          type: 'at-rule',
+          name: 'media'
+        },
+        'rules'
+      ],
+      { severity: 'warning' }
+    ]
+  },
+  ignoreFiles: [ '**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts' ],
+  overrides: [
+    {
+      files: [ '*.vue', '**/*.vue', '**/*.ts', '**/*.tsx', '*.html', '**/*.html' ],
+      extends: [ 'stylelint-config-recommended', 'stylelint-config-html' ],
+      rules: {
+        'keyframes-name-pattern': null,
+        'selector-pseudo-class-no-unknown': [
+          true,
+          {
+            ignorePseudoClasses: [ 'deep', 'global' ]
+          }
+        ],
+        'selector-pseudo-element-no-unknown': [
+          true,
+          {
+            ignorePseudoElements: [ 'v-deep', 'v-global', 'v-slotted' ]
+          }
+        ]
+      }
+    },
+    {
+      files: [ '*.less', '**/*.less' ],
+      customSyntax: 'postcss-less',
+      extends: [ 'stylelint-config-standard', 'stylelint-config-recommended-vue' ]
+    }
+  ]
+}

package/template-design-pro/tests/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+export default '';

package/template-design-pro/tests/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

package/template-design-pro/tests/__mocks__/workerMock.ts

@@ -0,0 +1,5 @@
+export default jest.fn().mockImplementation(() => ({
+  postMessage: jest.fn(),
+  onmessage: jest.fn(),
+  onerror: jest.fn(),
+}));

package/template-design-pro/tests/server/README.md

@@ -0,0 +1,15 @@
+# Test Server
+
+It is used to start the test interface service, which can test the upload, websocket, login and other interfaces.
+
+## Usage
+
+```bash
+
+cd ./test/server
+
+yarn
+
+yarn start
+
+```

package/template-design-pro/tests/server/controller/FileController.ts

@@ -0,0 +1,18 @@
+import FileService from '../service/FileService';
+
+class FileController {
+  private service: FileService = new FileService();
+
+  upload = async (ctx) => {
+    const files = ctx.request.files.file;
+    console.log(files);
+
+    if (files.length === undefined) {
+      this.service.upload(ctx, files, false);
+    } else {
+      this.service.upload(ctx, files, true);
+    }
+  };
+}
+
+export default new FileController();

package/template-design-pro/tests/server/controller/UserController.ts

@@ -0,0 +1,15 @@
+import UserService from '../service/UserService';
+
+class UserController {
+  private service: UserService = new UserService();
+
+  login = async (ctx) => {
+    ctx.body = await this.service.login();
+  };
+
+  getUserInfoById = async (ctx) => {
+    ctx.body = await this.service.getUserInfoById();
+  };
+}
+
+export default new UserController();

package/template-design-pro/tests/server/ecosystem.config.js

@@ -0,0 +1,18 @@
+const { name } = require('./package.json');
+const path = require('path');
+
+module.exports = {
+  apps: [
+    {
+      name,
+      script: path.resolve(__dirname, './dist/index.js'),
+      instances: require('os').cpus().length,
+      autorestart: true,
+      watch: true,
+      env_production: {
+        NODE_ENV: 'production',
+        PORT: 8080,
+      },
+    },
+  ],
+};

package/template-design-pro/tests/server/index.ts

@@ -0,0 +1,63 @@
+import Koa from 'koa';
+import path from 'path';
+import Router from 'koa-router';
+import body from 'koa-body';
+import cors from 'koa2-cors';
+import koaStatic from 'koa-static';
+import websockify from 'koa-websocket';
+import route from 'koa-route';
+
+import AppRoutes from './routes';
+
+const PORT = 3300;
+
+const app = websockify(new Koa());
+
+app.ws.use(function (ctx, next) {
+  ctx.websocket.send('connection succeeded!');
+  return next(ctx);
+});
+
+app.ws.use(
+  route.all('/test', function (ctx) {
+    // ctx.websocket.send('Hello World');
+    ctx.websocket.on('message', function (message) {
+      // do something with the message from client
+
+      if (message !== 'ping') {
+        const data = JSON.stringify({
+          id: Math.ceil(Math.random() * 1000),
+          time: new Date().getTime(),
+          res: `${message}`,
+        });
+        ctx.websocket.send(data);
+      }
+      console.log(message);
+    });
+  })
+);
+
+const router = new Router();
+
+// router
+AppRoutes.forEach((route) => router[route.method](route.path, route.action));
+
+app.use(cors());
+app.use(
+  body({
+    encoding: 'gzip',
+    multipart: true,
+    formidable: {
+      // uploadDir: path.join(__dirname, '/upload/'), // 设置文件上传目录
+      keepExtensions: true,
+      maxFieldsSize: 20 * 1024 * 1024,
+    },
+  })
+);
+app.use(router.routes());
+app.use(router.allowedMethods());
+app.use(koaStatic(path.join(__dirname)));
+
+app.listen(PORT, () => {
+  console.log(`Application started successfully: http://localhost:${PORT}`);
+});

package/template-design-pro/tests/server/nodemon.json

@@ -0,0 +1,8 @@
+{
+  "watch": ["src"],
+  "ext": "ts",
+  "exec": "ts-node -r tsconfig-paths/register index.ts",
+  "events": {
+    "restart": "clear"
+  }
+}

package/template-design-pro/tests/server/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "nodemon",
+    "build": "rimraf ./dist && tsup ./index.ts --dts --format cjs,esm  ",
+    "prod": "npx pm2 start ecosystem.config.js --env production",
+    "restart": "pm2 restart ecosystem.config.js --env production",
+    "stop": "npx pm2 stop ecosystem.config.js"
+  },
+  "dependencies": {
+    "fs-extra": "^10.0.0",
+    "koa": "^2.7.0",
+    "koa-body": "^4.2.0",
+    "koa-bodyparser": "^4.2.1",
+    "koa-route": "^3.2.0",
+    "koa-router": "^10.0.0",
+    "koa-static": "^5.0.0",
+    "koa-websocket": "^6.0.0",
+    "koa2-cors": "^2.0.6"
+  },
+  "devDependencies": {
+    "@types/koa": "^2.0.48",
+    "@types/koa-bodyparser": "^4.2.2",
+    "@types/koa-router": "^7.0.40",
+    "@types/node": "^15.12.1",
+    "nodemon": "^2.0.7",
+    "pm2": "^4.5.6",
+    "rimraf": "^3.0.2",
+    "ts-node": "^10.0.0",
+    "tsconfig-paths": "^3.8.0",
+    "tsup": "^4.11.2",
+    "typescript": "^4.2.5"
+  }
+}

package/template-design-pro/tests/server/routes.ts

@@ -0,0 +1,23 @@
+import UserController from './controller/UserController';
+import FileController from './controller/FileController';
+
+export default [
+  // user
+  {
+    path: '/login',
+    method: 'post',
+    action: UserController.login,
+  },
+  {
+    path: '/getUserInfoById',
+    method: 'get',
+    action: UserController.getUserInfoById,
+  },
+
+  // file
+  {
+    path: '/upload',
+    method: 'post',
+    action: FileController.upload,
+  },
+];

package/template-design-pro/tests/server/service/FileService.ts

@@ -0,0 +1,54 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+const uploadUrl = 'http://localhost:3300/static/upload';
+const filePath = path.join(__dirname, '../static/upload/');
+
+fs.ensureDir(filePath);
+export default class UserService {
+  async upload(ctx, files, isMultiple) {
+    let fileReader, fileResource, writeStream;
+
+    const fileFunc = function (file) {
+      fileReader = fs.createReadStream(file.path);
+      fileResource = filePath + `/${file.name}`;
+      console.log(fileResource);
+
+      writeStream = fs.createWriteStream(fileResource);
+      fileReader.pipe(writeStream);
+    };
+
+    const returnFunc = function (flag) {
+      if (flag) {
+        let url = '';
+        for (let i = 0; i < files.length; i++) {
+          url += uploadUrl + `/${files[i].name},`;
+        }
+        url = url.replace(/,$/gi, '');
+        ctx.body = {
+          url: url,
+          code: 0,
+          message: 'upload Success!',
+        };
+      } else {
+        ctx.body = {
+          url: uploadUrl + `/${files.name}`,
+          code: 0,
+          message: 'upload Success!',
+        };
+      }
+    };
+    console.log(isMultiple, files.length);
+
+    if (isMultiple) {
+      for (let i = 0; i < files.length; i++) {
+        const f1 = files[i];
+        fileFunc(f1);
+      }
+    } else {
+      fileFunc(files);
+    }
+    fs.ensureDir(filePath);
+    returnFunc(isMultiple);
+  }
+}

package/template-design-pro/tests/server/service/UserService.ts

@@ -0,0 +1,25 @@
+import { Result } from '../utils';
+
+const fakeUserInfo = {
+  userId: '1',
+  userName: 'vben',
+  realName: 'Vben Admin',
+  desc: 'manager',
+  password: '123456',
+  token: 'fakeToken1',
+  roles: [
+    {
+      roleName: 'Super Admin',
+      value: 'super',
+    },
+  ],
+};
+export default class UserService {
+  async login() {
+    return Result.success(fakeUserInfo);
+  }
+
+  async getUserInfoById() {
+    return Result.success(fakeUserInfo);
+  }
+}

package/template-design-pro/tests/server/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": false,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es6",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "baseUrl": "./"
+  },
+  "exclude": ["node_modules"]
+}

package/template-design-pro/tests/server/utils.ts

@@ -0,0 +1,9 @@
+export class Result {
+  static success(data: any) {
+    return {
+      code: 0,
+      success: true,
+      result: data,
+    };
+  }
+}