haiwei-ui 1.0.0

package/script/npm_install.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 安装脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_install.ps1"
+pause

package/script/npm_install.ps1

@@ -0,0 +1,13 @@
+# 设置执行策略（如果需要）
+Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
+
+# 切换到项目根目录
+Set-Location ..
+
+# 使用淘宝镜像安装依赖（加速下载）
+Write-Host "正在使用淘宝镜像安装依赖..." -ForegroundColor Green
+npm --registry https://registry.npmmirror.com/ install
+
+# 等待用户按键
+Write-Host "依赖安装完成，按任意键继续..." -ForegroundColor Green
+$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

package/script/npm_publish.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 发布脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_publish.ps1"
+pause

package/script/npm_publish.ps1

@@ -0,0 +1,12 @@
+# 设置执行策略（如果需要）
+Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
+
+# 切换到项目根目录
+Set-Location ..
+
+# 发布到 npm 官方仓库
+npm --registry https://registry.npmjs.org/ publish
+
+# 等待用户按键
+Write-Host "发布完成，按任意键继续..."
+$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

package/script/npm_update.bat

@@ -0,0 +1,4 @@
+@echo off
+REM 执行 npm 更新脚本
+powershell -ExecutionPolicy Bypass -File "%~dp0npm_update.ps1"
+pause

package/script/npm_update.ps1

@@ -0,0 +1,13 @@
+# 设置执行策略（如果需要）
+Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
+
+# 切换到项目根目录
+Set-Location ..
+
+# 使用淘宝镜像更新依赖（加速下载）
+Write-Host "正在使用淘宝镜像更新依赖..." -ForegroundColor Green
+npm --registry https://registry.npmmirror.com/ update
+
+# 等待用户按键
+Write-Host "依赖更新完成，按任意键继续..." -ForegroundColor Green
+$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

package/src/api/account.js

@@ -0,0 +1,47 @@
+import menus from '../menus'
+const login = params => {
+  return new Promise((resolve, reject) => {
+    if (params.userName === 'admin' && params.password === 'admin') {
+      resolve({
+        accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+        refreshToken: ''
+      })
+    } else {
+      reject(new Error('密码错误'))
+    }
+  })
+}
+/**
+ * @description 获取账户信息
+ */
+const get = () => {
+  return {
+    /** 账户编号 */
+    id: 1,
+    /** 用户名 */
+    name: '管理员',
+    /** 头像 */
+    avatar: '',
+    /** 菜单列表 */
+    menus: menus,
+    /** 权限列表 */
+    permissions: [],
+    /** 皮肤设置 */
+    skin: {
+      /** 名称 */
+      name: 'pretty',
+      /** 主题 */
+      theme: '',
+      /** 字号 medium/small/mini */
+      fontSize: 'small'
+    }
+  }
+}
+
+const skinUpdate = () => {
+  return new Promise(resolve => {
+    resolve()
+  })
+}
+
+export default { login, get, skinUpdate }

package/src/api/actions.js

@@ -0,0 +1,18 @@
+import accountApi from './account'
+const actions = {
+  login: accountApi.login,
+  getVerifyCode() {
+    return new Promise(resolve => {
+      resolve()
+    })
+  },
+  getAuthInfo: accountApi.get,
+  // 修改密码
+  updatePassword() {
+    return new Promise(resolve => {
+      resolve()
+    })
+  },
+  saveSkin: accountApi.skinUpdate
+}
+export default actions

package/src/api/config.js

@@ -0,0 +1,78 @@
+const getUI = () => {
+  return new Promise(resolve => {
+    resolve({
+      system: {
+        /** 标题 */
+        title: 'NetModular前端文档',
+        /** logo */
+        logo: '',
+        /** 用户信息页(路由名称) */
+        userPage: 'userinfo',
+        /** 版权声明 */
+        copyright: '版权所有：尼古拉斯·老李 | 用代码改变世界 | Powered by .NET Core 3.1.0 on Linux'
+      },
+      /**权限配置 */
+      permission: {
+        //开启权限验证
+        validate: false,
+        //开启按钮权限
+        button: false
+      },
+      /**组件配置 */
+      component: {
+        /**登录设置 */
+        login: {
+          //登录页类型
+          pageType: 'auto',
+          //是否启用验证码
+          verifyCode: false
+        },
+        /** 工具栏 */
+        toolbar: {
+          // 全屏
+          fullscreen: true,
+          // 皮肤切换
+          skin: true,
+          // 退出
+          logout: true,
+          // 用户信息
+          userInfo: true
+        },
+        //菜单
+        menu: {
+          //是否只能打开一个菜单
+          uniqueOpened: true
+        },
+        //对话框
+        dialog: {
+          //点击模态框是否可关闭对话框
+          closeOnClickModal: false,
+          //对话框默认是否可拖拽
+          draggable: false
+        },
+        //列表页
+        list: {
+          //序号表头名称
+          serialNumberName: '#'
+        },
+        //标签页
+        tabnav: {
+          //是否启用
+          enabled: true,
+          //是否显示首页
+          showHome: true,
+          /** 首页 */
+          homeUrl: '',
+          //是否显示图标
+          showIcon: true,
+          //最大页面数量
+          maxOpenCount: 20
+        },
+        //自定义样式
+        customCss: null
+      }
+    })
+  })
+}
+
+export { getUI }

package/src/components/code-preview/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="nm-code-preview" :class="{ show: visible }">
+    <nm-button class="nm-code-preview-btn" type="warning" icon="develop" @click="onCBtnlick" />
+    <nm-drawer class="nm-code-preview-drawer" v-bind="drawer" :visible.sync="visible">
+      <template v-slot:toolbar>
+        <nm-button icon="transmit" @click="run" />
+      </template>
+      <pre v-highlightjs="code"><code class="html"></code></pre>
+    </nm-drawer>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      drawer: {
+        header: true,
+        title: '代码预览',
+        icon: 'preview',
+        width: '50%',
+        draggable: true
+      },
+      timer: null
+    }
+  },
+  props: ['code'],
+  methods: {
+    onCBtnlick() {
+      this.visible = !this.visible
+    },
+    run() {
+      window.addEventListener('message', this.receiveMessage, false)
+      const runUrl = window.location.href.split('#')[0] + '#/run'
+      const runWindow = window.open(runUrl, '_blank')
+      this.timer = setInterval(() => {
+        runWindow.postMessage(this.code, runUrl)
+      }, 300)
+    },
+    receiveMessage(event) {
+      if (this.timer && event.origin === window.location.origin) {
+        clearInterval(this.timer)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-code-preview {
+  &-btn {
+    padding: 0;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    border-radius: 22px;
+    font-size: 1.5rem;
+    text-align: center;
+    z-index: 9999;
+    transition: all 0.3s ease-in-out;
+  }
+}
+.nm-code-preview-drawer {
+  .nm-drawer-modal,
+  .nm-drawer-dialog {
+    z-index: 9998;
+  }
+  .el-scrollbar__wrap {
+    background: #2b2b2b;
+  }
+  .el-scrollbar__view {
+    padding: 0;
+  }
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import lib from '../../packages/library'
+import Tmpl from './tmpl'
+import CodePreview from './code-preview'
+
+Vue.component(`${lib.prefix}Tmpl`, Tmpl)
+Vue.component(`${lib.prefix}CodePreview`, CodePreview)

package/src/components/tmpl/components/attributes/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <section class="nm-tmpl-box">
+    <h1 class="nm-tmpl-box-title">属性(Attributes)</h1>
+    <el-table :data="data" border style="width: 100%">
+      <el-table-column prop="name" label="参数" />
+      <el-table-column prop="desc" label="说明" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="opt" label="可选值" />
+      <el-table-column label="默认值">
+        <template slot-scope="{ row }">{{ row.def }}</template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  props: ['data']
+}
+</script>

package/src/components/tmpl/components/events/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="nm-tmpl-box">
+    <h1 class="nm-tmpl-box-title">事件(Event)</h1>
+    <el-table :data="data" border style="width: 100%">
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="desc" label="说明" />
+      <el-table-column prop="params" label="参数" />
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  props: ['data']
+}
+</script>

package/src/components/tmpl/components/methods/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="nm-tmpl-box">
+    <h1 class="nm-tmpl-box-title">方法(Method)</h1>
+    <el-table :data="data" border style="width: 100%">
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="desc" label="说明" />
+      <el-table-column prop="params" label="参数" />
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  props: ['data']
+}
+</script>

package/src/components/tmpl/components/slots/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <section class="nm-tmpl-box">
+    <h1 class="nm-tmpl-box-title">插槽(Slot)</h1>
+    <el-table :data="data" border style="width: 100%">
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="desc" label="说明" />
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  props: ['data']
+}
+</script>

package/src/components/tmpl/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <nm-container>
+    <nm-box class="nm-tmpl" page header :title="title" :icon="icon">
+      <div>
+        <slot />
+      </div>
+      <nm-attributes v-if="attrs" :data="attrs" />
+      <div>
+        <slot name="after-attrs" />
+      </div>
+      <nm-slots v-if="slots" :data="slots" />
+      <div>
+        <slot name="after-slots" />
+      </div>
+      <nm-methods v-if="methods" :data="methods" />
+      <div>
+        <slot name="after-methods" />
+      </div>
+      <nm-events v-if="events" :data="events" />
+      <div>
+        <slot name="after-events" />
+      </div>
+    </nm-box>
+  </nm-container>
+</template>
+<script>
+import NmAttributes from './components/attributes'
+import NmMethods from './components/methods'
+import NmEvents from './components/events'
+import NmSlots from './components/slots'
+export default {
+  name: 'Tmpl',
+  components: { NmAttributes, NmMethods, NmEvents, NmSlots },
+  props: {
+    title: {
+      type: String
+    },
+    icon: {
+      type: String
+    },
+    attrs: {
+      type: Array
+    },
+    slots: {
+      type: Array
+    },
+    methods: {
+      type: Array
+    },
+    events: {
+      type: Array
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-tmpl {
+  &-box {
+    margin-bottom: 30px;
+    &-title {
+      margin: 10px 0;
+      font-size: 25px;
+    }
+  }
+  .el-alert__title {
+    font-size: 17px;
+  }
+
+  .el-alert__description {
+    margin-top: 10px;
+    font-size: 15px;
+    p {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,25 @@
+import store from './store'
+import routes from './routes'
+import login from './views/login/index'
+export default {
+  module: {
+    name: 'nm-module-admin',
+    code: 'admin',
+    version: '1.0.0',
+    description: '权限管理'
+  },
+  routes,
+  store,
+  components: [
+    {
+      name: 'nm-login-auto',
+      component: login
+    }
+  ],
+  callback({ Vue }) {
+    // 地图配置
+    Vue.prototype.$map = {
+      ak: 'q96f4kWdHsVg1Y8tlclqYvrlpdnhlz5l'
+    }
+  }
+}

package/src/main.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Skins from '../packages/index'
+import './components'
+import actions from './api/actions'
+import { getUI } from './api/config'
+import 'highlight.js/styles/vs.css'
+import VueHighlightJS from 'vue-highlightjs'
+import Vuep from 'vuep'
+import 'vuep/dist/vuep.css'
+import './style/element-ui.scss'
+import Admin from './index'
+
+// 代码高亮插件
+Vue.use(VueHighlightJS)
+
+// 在线编辑预览代码插件
+Vue.use(Vuep /*, { codemirror options } */)
+
+// 获取系统信息
+getUI().then(config => {
+  let modules = [Admin]
+
+  window.loaded = true
+  const t = setInterval(() => {
+    if (window.loadProgress > 98) {
+      clearInterval(t)
+      Skins.configApi({ baseUrl: '' })
+      Skins.use({ config, modules, actions })
+    }
+  }, 20)
+})

package/src/menus/index.js

@@ -0,0 +1,18 @@
+import componentMenus from '../views/components/menus'
+let menus = []
+// 基础组件
+menus = menus.concat(componentMenus)
+const setId = (menus, parentId) => {
+  menus.map((m, i) => {
+    if (parentId) {
+      m.id = parentId + '-' + i
+    } else {
+      m.id = i + ''
+    }
+    if (m.children) {
+      setId(m.children, m.id)
+    }
+  })
+}
+setId(menus)
+export default menus

package/src/routes.js

@@ -0,0 +1,3 @@
+import loadRoutes from '../packages/utils/load-routes'
+const requireComponent = require.context('./views', true, /\page.js$/)
+export default loadRoutes(requireComponent.keys().map(fileName => requireComponent(fileName).route))

package/src/store.js

@@ -0,0 +1,3 @@
+export default {
+  state: {}
+}

package/src/style/element-ui.scss

@@ -0,0 +1,11 @@
+.el-alert {
+    margin-bottom: 10px;
+}
+
+.el-row {
+    margin-bottom: 15px;
+}
+
+.el-button-group {
+    margin-right: 15px;
+}

package/src/utils/menus-loader.js

@@ -0,0 +1,15 @@
+// 加载菜单
+export const loadMenu = params => {
+  return {
+    type: params.type !== 0 ? 1 : 0,
+    name: params.name,
+    routeName: params.routeName || '',
+    icon: params.icon || '',
+    iconColor: params.iconColor || '',
+    url: params.url || '',
+    level: params.level || 3,
+    show: params.show || true,
+    sort: params.sort || 0,
+    children: params.children || []
+  }
+}

package/src/views/components/advanced/details/_index/data/attrs.js

@@ -0,0 +1,51 @@
+export default [
+  {
+    name: 'action',
+    desc: '数据查询方法',
+    type: 'Function',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'model',
+    desc: '模型数据，对于不需要通过接口返回的数据，可以通过该属性传递',
+    type: 'Object',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'options',
+    desc: '模型配置项',
+    type: 'Arrary',
+    opt: '-',
+    def: '-'
+  },
+  {
+    name: 'label-width',
+    desc: '标签的宽度',
+    type: 'string',
+    opt: '',
+    def: '80px'
+  },
+  {
+    name: 'no-loading',
+    desc: '不显示加载动画',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'no-border',
+    desc: '不显示外边框',
+    type: 'boolean',
+    opt: '-',
+    def: 'false'
+  },
+  {
+    name: 'query-on-created',
+    desc: '创建时执行一次查询',
+    type: 'boolean',
+    opt: '-',
+    def: 'true'
+  }
+]

package/src/views/components/advanced/details/_index/data/events.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'click',
+    desc: '点击事件',
+    params: '无'
+  }
+]

package/src/views/components/advanced/details/_index/data/slots.js

@@ -0,0 +1,10 @@
+export default [
+  {
+    name: 'label-属性名称',
+    desc: '自定义属性标签，接收model和item两个参数'
+  },
+  {
+    name: 'content-属性名称',
+    desc: '自定义内容，接收model和item两个参数'
+  }
+]

package/src/views/components/advanced/details/_index/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <nm-tmpl v-bind="tmpl"></nm-tmpl>
+</template>
+<script>
+import page from './page.js'
+import attrs from './data/attrs.js'
+import slots from './data/slots.js'
+export default {
+  name: page.name,
+  data() {
+    return {
+      tmpl: {
+        title: '详情页(nm-details)',
+        icon: 'detail',
+        attrs,
+        slots
+      }
+    }
+  },
+  created() {
+    this.setTabName(this.tmpl.title)
+  }
+}
+</script>

package/src/views/components/advanced/details/_index/page.js

@@ -0,0 +1,16 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '详情页'
+  this.name = 'components-details-index'
+  this.path = '/components/details/index'
+  this.icon = 'detail'
+  this.group = 2
+  this.sort = 1
+})()
+
+export const route = {
+  page,
+  component: () => import('./index')
+}
+
+export default page