@isxiaoyuan/elpis 1.0.0

package/app/pages/widgets/schema-table/schema-table.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="schema-table">
+    <el-table
+      v-if="schema && schema.properties"
+      v-loading="loading"
+      :data="tableData"
+      class="table"
+    >
+      <template v-for="(schemaItem, key) in schema.properties">
+        <el-table-column
+          v-if="schemaItem.option.visible !== false"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label || key"
+          v-bind="schemaItem.tableOption"
+        />
+      </template>
+      <el-table-column
+        v-if="buttons?.length > 0"
+        label="操作"
+        fixed="right"
+        :width="operationWidth"
+      >
+        <template #default="scoped">
+          <el-button
+            v-for="item in buttons"
+            link
+            v-bind="item"
+            @click="handleOperation({ btnConfig: item, rowData: scoped.row })"
+          >
+            {{ item.label }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row class="pagination" justify="end">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        :layout="layout"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
+
+import $curl from "$elpisCommon/curl.js";
+
+const props = defineProps({
+  /**
+   * schema 配置，结构如下
+   {
+      type: "object",
+      properties: {
+        key: {
+          ...schema,
+          type: "", // 字段类型
+          label: "", // 字段中文名
+          option: {
+            ...elTableColumnConfig, // 标准 el-table-cloumn 配置
+            visible: true, // 是否在 table 中显示
+          },
+        },
+      },
+    }
+   */
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * 接口地址
+   */
+  api: {
+    type: String,
+    default: "",
+  },
+  /**
+   * 接口参数
+   */
+  apiParams: {
+    type: Object,
+    default: () => {},
+  },
+  /**
+   * buttons 操作按钮相关配置 配置如下
+   * [{
+        label: "", // 按钮中文名
+        evenKey: "", // 按钮事件名
+        eventOption: {}, // 按钮具体配置
+        ...elButtonConfig, // 标准 el-button 配置
+      },...]
+   */
+  buttons: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * 分页布局
+   */
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper",
+  },
+});
+
+const { schema, api, buttons, apiParams } = toRefs(props);
+
+const emit = defineEmits(["operate"]);
+
+const operationWidth = computed(() => {
+  return buttons?.value?.length > 0
+    ? buttons?.value?.reduce((pre, cur) => {
+        return pre + cur.label.length * 18;
+      }, 50)
+    : 50;
+});
+
+const loading = ref(false);
+const tableData = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+
+onMounted(() => {
+  initData();
+});
+
+watch(
+  [schema, api, apiParams],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+const initData = () => {
+  currentPage.value = 1;
+  pageSize.value = 50;
+  nextTick(async () => {
+    await loadTableData();
+  });
+};
+
+let timerId = null;
+const loadTableData = async () => {
+  clearTimeout(timerId);
+  timerId = setTimeout(async () => {
+    await fetchTableData();
+    timerId = null;
+  }, 100);
+};
+
+const fetchTableData = async () => {
+  if (!api.value) {
+    return;
+  }
+  showLoading();
+  try {
+    const res = await $curl({
+      url: `${api.value}/list`,
+      method: "get",
+      query: {
+        ...apiParams.value,
+        page: currentPage.value,
+        size: pageSize.value,
+      },
+    });
+    if (res.data && res.data.length > 0) {
+      tableData.value = buildTableData(res.data);
+    }
+    total.value = res.metadata?.total || 0;
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoading();
+  }
+};
+
+/**
+ * 对后端返回的数据进行渲染前的预处理
+ * @param {Object} listData 列表数据
+ */
+const buildTableData = (listData) => {
+  if (!schema.value?.properties) {
+    return listData;
+  }
+
+  return listData.map((rowData) => {
+    for (const dKey in rowData) {
+      const schemaItem = schema.value?.properties[dKey];
+      if (schemaItem?.option?.toFixed) {
+        rowData[dKey] =
+          rowData[dKey].toFixed &&
+          rowData[dKey].toFixed(schemaItem?.option?.toFixed);
+      }
+    }
+    return rowData;
+  });
+};
+
+const showLoading = () => {
+  loading.value = true;
+};
+
+const hideLoading = () => {
+  loading.value = false;
+};
+
+// 处理操作按钮点击事件
+const handleOperation = ({ btnConfig, rowData }) => {
+  emit("operate", { btnConfig, rowData });
+};
+
+const handleSizeChange = async (val) => {
+  pageSize.value = val;
+  await loadTableData();
+};
+
+const handleCurrentChange = async (val) => {
+  currentPage.value = val;
+  await loadTableData();
+};
+
+defineExpose({
+  initData,
+  loadTableData,
+  showLoading,
+  hideLoading,
+});
+</script>
+
+<style scoped lang="less">
+.schema-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.table {
+  flex: 1;
+}
+
+.pagination {
+  margin: 10px 0;
+  text-align: right;
+}
+</style>

package/app/pages/widgets/sider-container/complex-view/sub-menu/sub-menu.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-sub-menu :index="menuItem.key">
+    <template #title>{{ menuItem.name }}</template>
+    <div v-for="item in menuItem.subMenu" :key="item.key">
+      <sub-menu
+        :menu-item="item"
+        v-if="item.subMenu && item.subMenu.length > 0"
+      />
+      <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+    </div>
+  </el-sub-menu>
+</template>
+
+<script setup>
+const { menuItem } = defineProps(["menuItem"]);
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/sider-container/sider-container.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-container class="sider-container">
+    <!-- 侧边导航 -->
+    <el-aside width="200px" class="aside">
+      <slot name="menu-container"></slot>
+    </el-aside>
+    <el-main class="main">
+      <slot name="main-container"></slot>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less">
+.sider-container {
+  height: 100%;
+}
+.aside {
+  border-right: 1px solid #e8e8e8;
+}
+.main {
+  overflow: auto;
+}
+
+:deep(.el-menu) {
+  border-right: 0;
+}
+</style>

package/app/public/dist/entry.dashboard.tpl

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/logo.png" rel="icon" type="image/x-icon">
+    <title>{{name}}</title>
+<script defer src="http://127.0.0.2:9002/public/dist/dev/js/runtime~entry.dashboard_ccdd5987.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/vendor_2d349590.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/common_ba73051e.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/entry.dashboard_ba6bcc72.bundle.js"></script></head>
+
+<body style="margin: 0;">
+    <div id="root"></div>
+    <input id="projKey" name="projKey" value="{{projKey}}" style="display:none;">
+    <input id="env" name="env" value="{{env}}" style="display:none;">
+    <input id="options" name="options" value="{{options}}" style="display:none;">
+</body>
+<script type="text/javascript">
+    try {
+        window.projKey = document.getElementById("projKey").value;
+        window.env = document.getElementById("env").value;
+        const options = document.getElementById("options").value;
+        window.options = JSON.parse(options);
+    } catch (e) {
+        console.log(e);
+    }
+</script>
+
+</html>

package/app/public/dist/entry.page1.tpl

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/logo.png" rel="icon" type="image/x-icon">
+    <title>{{name}}</title>
+<script defer src="http://127.0.0.2:9002/public/dist/dev/js/runtime~entry.page1_36b95ec6.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/vendor_8245c48c.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/entry.page1_6389798d.bundle.js"></script></head>
+
+<body style="color:red;">
+    <div id="root"></div>
+    <input id="env" name="env" value="{{env}}" style="display:none;">
+    <input id="options" name="options" value="{{options}}" style="display:none;">
+</body>
+<script type="text/javascript">
+    try {
+        window.env = document.getElementById("env").value;
+        const options = document.getElementById("options").value;
+        window.options = JSON.parse(options);
+    } catch (e) {
+        console.log(e);
+    }
+</script>
+
+</html>

package/app/public/dist/entry.page2.tpl

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/logo.png" rel="icon" type="image/x-icon">
+    <title>{{name}}</title>
+<script defer src="http://127.0.0.2:9002/public/dist/dev/js/runtime~entry.page2_38c5cb7b.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/vendor_8245c48c.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/entry.page2_2b1f94bc.bundle.js"></script></head>
+
+<body style="color:red;">
+    <div id="root"></div>
+    <input id="env" name="env" value="{{env}}" style="display:none;">
+    <input id="options" name="options" value="{{options}}" style="display:none;">
+</body>
+<script type="text/javascript">
+    try {
+        window.env = document.getElementById("env").value;
+        const options = document.getElementById("options").value;
+        window.options = JSON.parse(options);
+    } catch (e) {
+        console.log(e);
+    }
+</script>
+
+</html>

package/app/public/dist/entry.project-list.tpl

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/logo.png" rel="icon" type="image/x-icon">
+    <title>{{name}}</title>
+<script defer src="http://127.0.0.2:9002/public/dist/dev/js/runtime~entry.project-list_db9087cf.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/vendor_2d349590.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/common_ba73051e.bundle.js"></script><script defer src="http://127.0.0.2:9002/public/dist/dev/js/entry.project-list_65caa4f1.bundle.js"></script></head>
+
+<body style="margin: 0;">
+    <div id="root"></div>
+    <input id="projKey" name="projKey" value="{{projKey}}" style="display:none;">
+    <input id="env" name="env" value="{{env}}" style="display:none;">
+    <input id="options" name="options" value="{{options}}" style="display:none;">
+</body>
+<script type="text/javascript">
+    try {
+        window.projKey = document.getElementById("projKey").value;
+        window.env = document.getElementById("env").value;
+        const options = document.getElementById("options").value;
+        window.options = JSON.parse(options);
+    } catch (e) {
+        console.log(e);
+    }
+</script>
+
+</html>

package/app/public/static/normalize.css

@@ -0,0 +1,239 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */    
+html,body,span,div,p,a,table,tbody,td,h1,h2,h3,img,form,font,strong,b,i,dl,dt,dd,ol,ul,li,dl,dd,dt,iframe,label,blockquote,input,button
+{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+html {
+    font-family: "Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif;/* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+    border: 0;
+}
+
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+a *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+    overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}

package/app/router/project.js

@@ -0,0 +1,12 @@
+module.exports = (app, router) => {
+  const { project: projectController } = app.controller;
+  router.get("/api/project", projectController.get.bind(projectController));
+  router.get(
+    "/api/project/list",
+    projectController.getList.bind(projectController),
+  );
+  router.get(
+    "/api/project/model_list",
+    projectController.getModelList.bind(projectController),
+  );
+};

package/app/router/view.js

@@ -0,0 +1,7 @@
+module.exports = (app, router) => {
+  const { view: viewController } = app.controller;
+
+  //用户输入 http://ip:port/view/xxx 能渲染对应的页面
+  router.get("/view/:page", viewController.renderPage.bind(viewController));
+  router.get("/view/:page/*", viewController.renderPage.bind(viewController));
+};