vue2-client 1.8.3 → 1.8.5

package/src/react-client/amis-react-starter/snowpack.config.js

@@ -0,0 +1,30 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+  mount: {
+    snowpack: '/',
+    src: '/_dist_'
+  },
+  plugins: [
+    '@snowpack/plugin-react-refresh',
+    '@snowpack/plugin-dotenv',
+    '@snowpack/plugin-typescript'
+  ],
+  install: [
+    /* ... */
+  ],
+  installOptions: {
+    /* ... */
+  },
+  devOptions: {
+    /* ... */
+  },
+  buildOptions: {
+    /* ... */
+  },
+  proxy: {
+    /* ... */
+  },
+  alias: {
+    /* ... */
+  }
+};

package/src/react-client/amis-react-starter/src/AMISComponent.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { render as renderAmis } from "amis-core";
+import axios from "axios";
+import copy from "copy-to-clipboard";
+import { toast } from "amis-ui";
+import { Schema } from "amis";
+
+class AMISComponent extends React.Component {
+  schema: {}
+  constructor(props:any) {
+    super(props);
+    this.schema = props || {}; // 传入的Amis配置
+    console.log('props',props)
+  }
+
+  // 在组件内部定义的fetcher函数
+  // @ts-ignore
+  fetcher = ({ url, method, data, responseType, config, headers }): any => {
+    // ...（fetcher的代码，与你的代码相同）
+    config = config || {};
+    config.withCredentials = true;
+    responseType && (config.responseType = responseType);
+
+    if (config.cancelExecutor) {
+      config.cancelToken = new (axios as any).CancelToken(
+        config.cancelExecutor
+      );
+    }
+
+    config.headers = headers || {};
+
+    if (method !== 'post' && method !== 'put' && method !== 'patch') {
+      if (data) {
+        config.params = data;
+      }
+      return (axios as any)[method](url, config);
+    } else if (data && data instanceof FormData) {
+      config.headers = config.headers || {};
+      config.headers['Content-Type'] = 'multipart/form-data';
+    } else if (
+      data &&
+      typeof data !== 'string' &&
+      !(data instanceof Blob) &&
+      !(data instanceof ArrayBuffer)
+    ) {
+      data = JSON.stringify(data);
+      config.headers = config.headers || {};
+      config.headers['Content-Type'] = 'application/json';
+    }
+
+    return (axios as any)[method](url, data, config);
+  };
+
+  // 在组件内部定义的isCancel函数
+  isCancel = (value: any) => {
+    return axios.isCancel(value);
+  };
+
+  // 在组件内部定义的copy函数
+  copyToClipboard = (content: string) => {
+    copy(content);
+    toast.success('内容已复制到粘贴板');
+  };
+
+  // 渲染函数
+  render() {
+
+    const amisEnv = {
+      fetcher: this.fetcher,
+      isCancel: this.isCancel,
+      copy: this.copyToClipboard,
+    };
+    console.log('this.schema',this.schema)
+    // @ts-ignore
+    return renderAmis(this.schema, {}, amisEnv);
+  }
+}
+
+export default AMISComponent;

package/src/react-client/amis-react-starter/src/App.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+
+import '@fortawesome/fontawesome-free/css/all.css';
+import '@fortawesome/fontawesome-free/css/v4-shims.css';
+
+import 'amis/lib/themes/cxd.css';
+import 'amis/lib/helper.css';
+import 'amis/sdk/iconfont.css';
+
+import axios from 'axios';
+import copy from 'copy-to-clipboard';
+
+import {render as renderAmis, ToastComponent, AlertComponent} from 'amis';
+import {alert, confirm, toast} from 'amis-ui';
+
+// amis 环境配置
+const env = {
+  // 下面三个接口必须实现
+  fetcher: ({
+    url, // 接口地址
+    method, // 请求方法 get、post、put、delete
+    data, // 请求数据
+    responseType,
+    config, // 其他配置
+    headers // 请求头
+  }: any) => {
+    config = config || {};
+    config.withCredentials = true;
+    responseType && (config.responseType = responseType);
+
+    if (config.cancelExecutor) {
+      config.cancelToken = new (axios as any).CancelToken(
+        config.cancelExecutor
+      );
+    }
+
+    config.headers = headers || {};
+
+    if (method !== 'post' && method !== 'put' && method !== 'patch') {
+      if (data) {
+        config.params = data;
+      }
+      return (axios as any)[method](url, config);
+    } else if (data && data instanceof FormData) {
+      config.headers = config.headers || {};
+      config.headers['Content-Type'] = 'multipart/form-data';
+    } else if (
+      data &&
+      typeof data !== 'string' &&
+      !(data instanceof Blob) &&
+      !(data instanceof ArrayBuffer)
+    ) {
+      data = JSON.stringify(data);
+      config.headers = config.headers || {};
+      config.headers['Content-Type'] = 'application/json';
+    }
+
+    return (axios as any)[method](url, data, config);
+  },
+  isCancel: (value: any) => (axios as any).isCancel(value),
+  copy: (content: string) => {
+    copy(content);
+    toast.success('内容已复制到粘贴板');
+  }
+
+  // 后面这些接口可以不用实现
+
+  // 默认是地址跳转
+  // jumpTo: (
+  //   location: string /*目标地址*/,
+  //   action: any /* action对象*/
+  // ) => {
+  //   // 用来实现页面跳转, actionType:link、url 都会进来。
+  // },
+
+  // updateLocation: (
+  //   location: string /*目标地址*/,
+  //   replace: boolean /*是replace，还是push？*/
+  // ) => {
+  //   // 地址替换，跟 jumpTo 类似
+  // },
+
+  // isCurrentUrl: (
+  //   url: string /*url地址*/,
+  // ) => {
+  //   // 用来判断是否目标地址当前地址
+  // },
+
+  // notify: (
+  //   type: 'error' | 'success' /**/,
+  //   msg: string /*提示内容*/
+  // ) => {
+  //   toast[type]
+  //     ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
+  //     : console.warn('[Notify]', type, msg);
+  // },
+  // alert,
+  // confirm,
+};
+
+class AMISComponent extends React.Component<any, any> {
+  render() {
+    return renderAmis(
+      // 这里是 amis 的 Json 配置。
+      {
+        type: 'page',
+        body: {
+          type: 'form',
+          api: '/api/form',
+          body: [
+            {
+              type: 'input-text',
+              name: 'name',
+              label: '姓名'
+            },
+            {
+              name: 'email',
+              type: 'input-email',
+              label: '邮箱'
+            },
+            {
+              name: 'color',
+              type: 'input-color',
+              label: 'color'
+            },
+            {
+              type: 'editor',
+              name: 'editor',
+              label: '编辑器'
+            }
+          ]
+        }
+      },
+      {
+        // props...
+      },
+      env
+    );
+  }
+}
+
+class APP extends React.Component<any, any> {
+  render() {
+    return (
+      <>
+        <ToastComponent key="toast" position={'top-right'} />
+        <AlertComponent key="alert" />
+        <AMISComponent />
+      </>
+    );
+  }
+}
+
+export default APP;

package/src/react-client/amis-react-starter/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>amis starter</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/src/react-client/amis-react-starter/src/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import APP from './App';
+import AMISComponent from './AMISComponent'
+
+export {APP}
+export {AMISComponent}

package/src/react-client/amis-react-starter/src/react-app-env.d.ts

@@ -0,0 +1,74 @@
+
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface Process{
+    env: ProcessEnv
+  }
+  interface ProcessEnv {
+    /**
+     * By default, there are two modes in Vite:
+     * 
+     * * `development` is used by vite and vite serve
+     * * `production` is used by vite build
+     * 
+     * You can overwrite the default mode used for a command by passing the --mode option flag.
+     * 
+     */
+    readonly NODE_ENV: 'development' | 'production'
+  }
+}
+
+declare var process: NodeJS.Process
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+    const src: string
+    export default src
+}
+
+declare module '*.svg' {
+  import * as React from 'react'
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>
+
+  const src: string;
+  export default src
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

package/src/react-client/amis-react-starter/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

package/src/react-client/amis-react-starter/vite.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+});

package/src/react-client/amis-react-starter/webpack.config.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    index: [
+      './src/index.tsx',
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'MyReactApp.js',
+    library: 'MyReactApp', // 被其他项目 引用时的名字
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true
+            }
+          }
+        ],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: 'url-loader?limit=10000'
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
+        use: 'file-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.ttf$/,
+        use: ['file-loader']
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    }),
+    new MonacoWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin()
+  ],
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.html'],
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    publicPath: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 9000,
+    hot: true,
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
+};

package/src/router/async/router.map.js

@@ -34,7 +34,7 @@ routerResource.settings = () => import('@vue2-client/pages/system/settings')
 // 查询配置生成工具
 routerResource.createQuery = () => import('@vue2-client/pages/CreateQueryPage')
 // AMIS示例页面
-routerResource.amisDemo = () => import('@vue2-client/pages/AMisDemo/AMisDemo.vue')
+routerResource.amisDemo = () => import('@vue2-client/pages/AMisDemo/AMisDemo')
 
 // 基础路由组件注册
 const routerMap = {

package/src/router.js

@@ -0,0 +1,13 @@
+// 动态导入你的组件
+function loadView (view) {
+  console.log('view', view)
+  return () => import(/* webpackChunkName: "view-[request]" */ `@vue2-client/base-client/components/common/${view}`)
+}
+
+const routes = [
+  // 对于每个路由，你都可以使用 'loadView' 方法动态加载对应的组件
+  { path: '/Tree', component: loadView('Tree') },
+  { path: '/Amis', component: () => import('@vue2-client/pages/AMisDemo/AMisDemo') },
+  // ... 其他路由
+]
+export default routes

package/src/services/api/common.js

@@ -44,7 +44,7 @@ export function getNativeConfigUrl (serviceName = process.env.VUE_APP_SYSTEM_NAM
 }
 
 export function parseConfigUrl (serviceName = process.env.VUE_APP_SYSTEM_NAME) {
-  return '/api/' + serviceName + '/' + commonApi.parseConfig
+  return '/api/af-liuli/' + commonApi.parseConfig
 }
 
 /**
@@ -56,14 +56,22 @@ export function getDictionaryParam () {
 
 /**
  * 根据配置名获取配置内容
+ * @param content 已有的配置内容
  * @param configName 配置名称
  * @param serviceName 命名空间名称
  * @param callback 回调函数
  */
-export function getConfig (configName, serviceName = process.env.VUE_APP_SYSTEM_NAME, callback) {
+export function getConfig (content, configName, serviceName = process.env.VUE_APP_SYSTEM_NAME, callback) {
+  if (content) {
+    return content
+  }
   indexedDB.getByWeb(configName, getConfigUrl(serviceName), { configName: configName }, callback)
 }
 
+export function getConfigByName (configName, serviceName = process.env.VUE_APP_SYSTEM_NAME, callback) {
+  return getConfig(undefined, configName, serviceName, callback)
+}
+
 export function getNativeConfig (configName, serviceName = process.env.VUE_APP_SYSTEM_NAME) {
   return post(getNativeConfigUrl(serviceName), { configName: configName })
 }

package/test/Amis.spec.js

@@ -0,0 +1,163 @@
+import { mount } from '@vue/test-utils'
+import AMisRender from '@vue2-client/base-client/components/common/AMisRender/index.vue'
+
+describe('AmisRender', () => {
+    // 测试用例：正确渲染组件
+    it('renders correctly', () => {
+        const wrapper = mount(AMisRender, {
+            // 组件必要的传参
+            propsData: {
+                schema: {
+                    title: '${siteName}：这是 AMIS 表格页面示例',
+                    remark: '嘿，不保证数据准确性',
+                    type: 'page',
+                    body: {
+                        type: 'crud',
+                        draggable: true,
+                        api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample',
+                        keepItemSelectionOnPageChange: true,
+                        autoGenerateFilter: true,
+                        bulkActions: [
+                            {
+                                type: 'button',
+                                label: '批量删除',
+                                actionType: 'ajax',
+                                api: 'delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/${ids|raw}',
+                                confirmText: '确定要批量删除?',
+                            },
+                            {
+                                type: 'button',
+                                label: '批量修改',
+                                actionType: 'dialog',
+                                dialog: {
+                                    title: '批量编辑',
+                                    name: 'sample-bulk-edit',
+                                    body: {
+                                        type: 'form',
+                                        api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate2',
+                                        body: [
+                                            {
+                                                type: 'hidden',
+                                                name: 'ids',
+                                            },
+                                            {
+                                                type: 'input-text',
+                                                name: 'engine',
+                                                label: 'Engine',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        ],
+                        quickSaveApi:
+                            'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/bulkUpdate',
+                        quickSaveItemApi:
+                            'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id',
+                        headerToolbar: [
+                            'bulkActions',
+                            {
+                                type: 'button',
+                                label: '重置测试数据',
+                                actionType: 'ajax',
+                                size: 'sm',
+                                api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/reset',
+                            },
+                            'export-excel',
+                            {
+                                type: 'tpl',
+                                tpl: '一共有 ${count} 行数据。',
+                                className: 'v-middle',
+                            },
+                            {
+                                type: 'columns-toggler',
+                                align: 'right',
+                                draggable: true,
+                            },
+                            {
+                                type: 'drag-toggler',
+                                align: 'right',
+                            },
+                        ],
+                        footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
+                        columns: [
+                            {
+                                name: 'id',
+                                label: 'ID',
+                                width: 20,
+                                sortable: true,
+                                type: 'text',
+                                searchable: {
+                                    type: 'input-text',
+                                    name: 'id',
+                                    label: '主键',
+                                    placeholder: '输入id',
+                                },
+                            },
+                            {
+                                name: 'browser',
+                                label: 'Browser',
+                                searchable: {
+                                    type: 'select',
+                                    name: 'browser',
+                                    label: '浏览器',
+                                    placeholder: '选择浏览器',
+                                    options: [
+                                        {
+                                            label: 'Internet Explorer ',
+                                            value: 'ie',
+                                        },
+                                        {
+                                            label: 'AOL browser',
+                                            value: 'aol',
+                                        },
+                                        {
+                                            label: 'Firefox',
+                                            value: 'firefox',
+                                        },
+                                    ],
+                                },
+                            },
+                            {
+                                name: 'platform',
+                                label: '平台',
+                                popOver: {
+                                    trigger: 'hover',
+                                    body: {
+                                        type: 'tpl',
+                                        tpl: '就是为了演示有个叫 popOver 的功能',
+                                    },
+                                },
+                                sortable: true,
+                                type: 'text',
+                            },
+                            {
+                                name: 'grade',
+                                label: 'CSS 等级',
+                                type: 'select',
+                                options: ['A', 'B', 'C', 'D', 'X'],
+                            },
+                            {
+                                type: 'operation',
+                                label: '操作',
+                                width: 100,
+                                buttons: [
+                                    {
+                                        type: 'button',
+                                        actionType: 'ajax',
+                                        label: '删除',
+                                        confirmText: '您确认要删除?',
+                                        api: 'delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample/$id',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                },
+                locals: {}
+            }
+        })
+        console.debug('返回的组件html：' + wrapper.html())
+        expect(wrapper.exists()).toBe(true)
+    })
+})