@arkxos/arkos-theme-classic 0.1.0

package/src/os-themes/classic/i18n/en.ts

@@ -0,0 +1,39 @@
+export default {
+  login: {
+    slogan: 'High performance / delicate / grace',
+    describe: 'Vue3 + element plus based front-end solutions in the background.',
+    signInTitle: 'Sign in',
+    accountLogin: 'Account sign in',
+    mobileLogin: 'Mobile sign in',
+    rememberMe: 'Remember me',
+    forgetPassword: 'Forget password',
+    signIn: 'Sign in',
+    signInOther: 'Sign in with',
+    userPlaceholder: 'user / phone / email',
+    userError: 'Please input a user name',
+    PWPlaceholder: 'Please input a password',
+    PWError: 'Please input a password',
+    admin: 'Administrator',
+    user: 'User',
+    mobilePlaceholder: 'Mobile',
+    mobileError: 'Please input mobile',
+    smsPlaceholder: 'SMS Code',
+    smsError: 'Please input sms code',
+    smsGet: 'Get SMS Code',
+    smsSent: 'SMS sent to mobile number',
+    noAccount: 'No account?',
+    createAccount: 'Create a new account',
+    wechatLoginTitle: 'QR code sign in',
+    wechatLoginMsg: 'Please use wechat to scan and log in | Auto scan after 3 seconds of simulation',
+    wechatLoginResult: 'Scanned | Please click authorize login in the device'
+  },
+  user: {
+    dynamic: 'Dynamic',
+    info: 'User Info',
+    settings: 'Settings',
+    nightmode: 'night mode',
+    nightmode_msg: 'Suitable for low light environment,The current night mode is beta',
+    language: 'language',
+    language_msg: 'Translation in progress,Temporarily translated the text of this view',
+  }
+}

package/src/os-themes/classic/i18n/zh-cn.ts

@@ -0,0 +1,39 @@
+export default {
+  login: {
+    slogan: '高性能 / 精致 / 优雅',
+    describe: '基于Vue3 + Element-Plus 的中后台前端解决方案。',
+    signInTitle: '用户登录',
+    accountLogin: '账号登录',
+    mobileLogin: '手机号登录',
+    rememberMe: '24小时免登录',
+    forgetPassword: '忘记密码',
+    signIn: '登录',
+    signInOther: '其他登录方式',
+    userPlaceholder: '用户名 / 手机 / 邮箱',
+    userError: '请输入用户名',
+    PWPlaceholder: '请输入密码',
+    PWError: '请输入密码',
+    admin: '管理员',
+    user: '用户',
+    mobilePlaceholder: '手机号码',
+    mobileError: '请输入手机号码',
+    smsPlaceholder: '短信验证码',
+    smsError: '请输入短信验证码',
+    smsGet: '获取验证码',
+    smsSent: '已发送短信至手机号码',
+    noAccount: '还没有账号?',
+    createAccount: '创建新账号',
+    wechatLoginTitle: '二维码登录',
+    wechatLoginMsg: '请使用微信扫一扫登录 | 模拟3秒后自动扫描',
+    wechatLoginResult: '已扫描 | 请在设备中点击授权登录'
+  },
+  user: {
+    dynamic: '近期动态',
+    info: '个人信息',
+    settings: '设置',
+    nightmode: '黑夜模式',
+    nightmode_msg: '适合光线较弱的环境，当前黑暗模式为beta版本',
+    language: '语言',
+    language_msg: '翻译进行中，暂翻译了本视图的文本',
+  }
+}

package/src/os-themes/classic/i18nFileBuilder/index.ts

@@ -0,0 +1,19 @@
+
+import { i18nBuilder } from '@arkxos/arkos-core'
+
+/**
+ * 说明：
+ * 须在 pages 下新建文件夹（建议 `要国际化界面目录` 与 `i18n 目录` 相同，方便查找），
+ * 注意国际化定义的字段，不要与原有的定义字段相同。
+ * 1、/src/i18n/lang 下的 ts 为框架的国际化内容
+ * 2、/src/i18n/pages 下的 ts 为各界面的国际化内容
+ */
+const modules = require.context('../i18n', false, /\.ts$/) // import.meta.glob('./**/*.ts', { eager: true });
+
+const i18nFileData = {}
+modules.keys().forEach((path) => {
+  i18nFileData[path] = modules(path).default;
+})
+console.log('theme i18nFileData', i18nFileData)
+
+export default i18nBuilder(i18nFileData)

package/src/os-themes/classic/index.js

@@ -0,0 +1,19 @@
+import RouterStatic from './router/routerStatic';
+import Store from './store';
+
+// 样式
+// <style lang="scss">
+//   @import '@/os-themes/classic/style/style.scss';
+// </style>
+import './style/style.scss';
+import * as components from "@element-plus/icons-vue";
+import i18nMessage from "@/os-themes/classic/i18nFileBuilder"
+import {i18n} from '@arkxos/arkos-core'
+
+export default myRuntimePublicPath => {
+  __webpack_public_path__ = myRuntimePublicPath;
+  return {
+    routerStatic: RouterStatic,
+    store: Store
+  };
+};

package/src/os-themes/classic/layout/components/NavMenu.vue

@@ -0,0 +1,56 @@
+<template>
+	<div v-if="navMenus.length<=0" style="padding:20px;">
+		<el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
+	</div>
+	<template v-for="navMenu in navMenus" v-bind:key="navMenu">
+		<el-menu-item v-if="!navMenu.hidden && !hasChildren(navMenu)" :index="jsonToQuery(navMenu)">
+			<a v-if="navMenu.meta && navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='()=>{}'></a>
+			<el-icon v-if="navMenu.meta&&navMenu.meta.icon&&'#'===navMenu.meta.icon"><component :is="'el-icon-document'"/></el-icon>
+			<el-icon v-else-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+			<template #title>
+				<span>{{navMenu.meta.title}}</span>
+				<span v-if="navMenu.meta.tag" class="menu-tag">{{navMenu.meta.tag}}</span>
+			</template>
+		</el-menu-item>
+		<el-sub-menu v-else-if="!navMenu.hidden" :index="navMenu.path">
+			<template #title>
+				<el-icon v-if="navMenu.meta&&navMenu.meta.icon&&'#'===navMenu.meta.icon"><component :is="'el-icon-document'"/></el-icon>
+				<el-icon v-else-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+				<span>{{navMenu.meta.title}}</span>
+				<span v-if="navMenu.meta.tag" class="menu-tag">{{navMenu.meta.tag}}</span>
+			</template>
+			<NavMenu :navMenus="navMenu.children"></NavMenu>
+		</el-sub-menu>
+	</template>
+</template>
+
+<script>
+export default {
+  name: 'NavMenu',
+  props: ['navMenus'],
+  data() {
+    return {}
+  },
+  methods: {
+    hasChildren(item) {
+      return item.children && !item.children.every(item => item.meta && item.meta.hidden)
+    },
+    jsonToQuery(navMenu) {
+      let result = navMenu.path
+      const queryString = navMenu.query
+      if (!queryString) {
+        return result
+      }
+      const json = JSON.parse(queryString)
+      console.log('menu query', json)
+      let query = '?';
+      for (const i in json) { // i是对象的键值
+        query += i + '=' + json[i] + '&'// json[i][j]是属性值
+      }
+      query = query.substring(0, query.length - 1);
+      result += query
+      return result;
+    }
+  }
+}
+</script>

package/src/os-themes/classic/layout/components/iframeView.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Descripttion: 处理iframe持久化，涉及store(VUEX)
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月30日13:20:41
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div v-show="$route.meta.type=='iframe'" class="iframe-pages">
+		<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url" :src="item.meta.url" frameborder='0'></iframe>
+	</div>
+</template>
+
+<script>
+import iframeStore from '../../store/modules/iframe';
+import globalStore from '../../store/modules/global';
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  watch: {
+    $route(e) {
+      this.push(e)
+    },
+  },
+  created() {
+    this.push(this.$route);
+  },
+  computed: {
+    iframeList() {
+      return iframeStore().iframeList
+    },
+    ismobile() {
+      return globalStore().ismobile
+    },
+    layoutTags() {
+      return globalStore().layoutTags
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    push(route) {
+      if (route.meta.type == 'iframe') {
+        if (this.ismobile || !this.layoutTags) {
+          iframeStore().setIframeList(route)
+        } else {
+          iframeStore().pushIframeList(route)
+        }
+      } else {
+        if (this.ismobile || !this.layoutTags) {
+          iframeStore().clearIframeList()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.iframe-pages {width:100%;height:100%;background: #fff;}
+	iframe {border:0;width:100%;height:100%;display: block;}
+</style>

package/src/os-themes/classic/layout/components/search.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="sc-search">
+		<el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/>
+		<div class="sc-search-history" v-if="history.length>0">
+			<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag>
+		</div>
+		<div class="sc-search-result">
+			<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
+			<ul v-else>
+				<el-scrollbar max-height="366px">
+					<li v-for="item in result" :key="item.path" @click="to(item)">
+						<el-icon><component :is="item.icon || 'el-icon-menu'" /></el-icon>
+						<span class="title">{{ item.breadcrumb }}</span>
+					</li>
+				</el-scrollbar>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      input: '',
+      menu: [],
+      result: [],
+      history: []
+    }
+  },
+  mounted() {
+    const searchHistory = this.$TOOL.data.get('SEARCH_HISTORY') || []
+    this.history = searchHistory
+    const menuTree = this.$TOOL.data.get('MENU')
+    this.filterMenu(menuTree)
+    this.$refs.input.focus()
+  },
+  methods: {
+    inputChange(value) {
+      if (value) {
+        this.result = this.menuFilter(value)
+      } else {
+        this.result = []
+      }
+    },
+    filterMenu(map) {
+      map.forEach(item => {
+        if (item.meta.hidden || item.meta.type == 'button') {
+          return false
+        }
+        if (item.meta.type == 'iframe') {
+          item.path = `/i/${item.name}`
+        }
+        if (item.children && item.children.length > 0 && !item.component) {
+          this.filterMenu(item.children)
+        } else {
+          this.menu.push(item)
+        }
+      })
+    },
+    menuFilter(queryString) {
+      const res = []
+      // 过滤菜单树
+      const filterMenu = this.menu.filter((item) => {
+        if ((item.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
+          return true
+        }
+        if ((item.name).toLowerCase().indexOf(queryString.toLowerCase()) >= 0) {
+          return true
+        }
+      })
+      // 匹配系统路由
+      const router = this.$router.getRoutes()
+      const filterRouter = filterMenu.map((m) => {
+        if (m.meta.type == 'link') {
+          return router.find(r => r.path == '/' + m.path)
+        } else {
+          return router.find(r => r.path == m.path)
+        }
+      })
+      // 重组对象
+      filterRouter.forEach(item => {
+        res.push({
+          name: item.name,
+          type: item.meta.type,
+          path: item.meta.type == 'link' ? item.path.slice(1) : item.path,
+          icon: item.meta.icon,
+          title: item.meta.title,
+          breadcrumb: item.meta.breadcrumb.map(v => v.meta.title).join(' - ')
+        })
+      })
+      return res
+    },
+    to(item) {
+      if (!this.history.includes(this.input)) {
+        this.history.push(this.input)
+        this.$TOOL.data.set('SEARCH_HISTORY', this.history)
+      }
+      if (item.type == 'link') {
+        setTimeout(() => {
+          const a = document.createElement('a')
+          a.style = 'display: none'
+          a.target = '_blank'
+          a.href = item.path
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }, 10);
+      } else {
+        this.$router.push({ path: item.path })
+      }
+      this.$emit('success', true)
+    },
+    historyClick(text) {
+      this.input = text
+      this.inputChange(text)
+    },
+    historyClose(index) {
+      this.history.splice(index, 1);
+      if (this.history.length <= 0) {
+        this.$TOOL.data.remove('SEARCH_HISTORY')
+      } else {
+        this.$TOOL.data.set('SEARCH_HISTORY', this.history)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.sc-search {}
+	.sc-search-no-result {text-align: center;margin: 40px 0;color: #999;}
+	.sc-search-history {margin-top: 10px;}
+	.sc-search-history .el-tag {cursor: pointer;}
+	.sc-search-result {margin-top: 15px;}
+	.sc-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;}
+	.sc-search-result li  i {font-size: 20px;margin-right: 15px;}
+	.sc-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);}
+</style>

package/src/os-themes/classic/layout/components/setting.vue

@@ -0,0 +1,95 @@
+<template>
+	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
+		<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
+		<el-divider></el-divider>
+		<el-form-item :label="$t('user.nightmode')">
+			<el-switch v-model="dark"></el-switch>
+		</el-form-item>
+		<el-form-item :label="$t('user.language')">
+			<el-select v-model="lang">
+				<el-option label="简体中文" value="zh-cn"></el-option>
+				<el-option label="English" value="en"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-divider></el-divider>
+		<el-form-item label="主题颜色">
+			<el-color-picker v-model="colorPrimary" :predefine="colorList">></el-color-picker>
+		</el-form-item>
+		<el-divider></el-divider>
+		<el-form-item label="框架布局">
+			<el-select v-model="layout" placeholder="请选择">
+				<el-option label="默认" value="default"></el-option>
+				<el-option label="通栏" value="header"></el-option>
+				<el-option label="经典" value="menu"></el-option>
+				<el-option label="功能坞" value="dock"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="折叠菜单">
+			<el-switch v-model="menuIsCollapse"></el-switch>
+		</el-form-item>
+		<el-form-item label="标签栏">
+			<el-switch v-model="layoutTags"></el-switch>
+		</el-form-item>
+		<el-divider></el-divider>
+	</el-form>
+</template>
+
+<script>
+import { color } from '@arkxos/arkos-util'
+import globalStore from '../../store/modules/global';
+
+export default {
+  data() {
+    return {
+      layout: globalStore().layout,
+      menuIsCollapse: globalStore().menuIsCollapse,
+      layoutTags: globalStore().layoutTags,
+      lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+      dark: this.$TOOL.data.get('APP_DARK') || false,
+      colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+      colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
+    }
+  },
+  watch: {
+    layout(val) {
+      globalStore().layout = val
+    },
+    menuIsCollapse() {
+      globalStore().toggleMenuIsCollapse()
+    },
+    layoutTags() {
+      globalStore().toggleLayoutTags()
+    },
+    dark(val) {
+      if (val) {
+        document.documentElement.classList.add('dark')
+        this.$TOOL.data.set('APP_DARK', val)
+      } else {
+        document.documentElement.classList.remove('dark')
+        this.$TOOL.data.remove('APP_DARK')
+      }
+    },
+    lang(val) {
+      this.$i18n.locale = val
+      this.$TOOL.data.set('APP_LANG', val);
+    },
+    colorPrimary(val) {
+      if (!val) {
+        val = '#409EFF'
+        this.colorPrimary = '#409EFF'
+      }
+      document.documentElement.style.setProperty('--el-color-primary', val);
+      for (let i = 1; i <= 9; i++) {
+        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, color.lighten(val, i / 10));
+      }
+      for (let i = 1; i <= 9; i++) {
+        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, color.darken(val, i / 10));
+      }
+      this.$TOOL.data.set('APP_COLOR', val);
+    }
+  }
+}
+</script>
+
+<style>
+</style>

package/src/os-themes/classic/layout/components/sideM.vue

@@ -0,0 +1,137 @@
+<template>
+	<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false"><el-icon><el-icon-menu /></el-icon></div>
+
+	<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false" destroy-on-close>
+		<el-container class="mobile-nav">
+			<el-header>
+				<div class="logo-bar"><img class="logo" src="img/logo.png"><span>{{ $CONFIG.ArkosTitle }}</span></div>
+			</el-header>
+			<el-main>
+				<el-scrollbar>
+					<el-menu :default-active="$route.meta.active || $route.path" @select="select" router background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
+						<NavMenu :navMenus="menu"></NavMenu>
+					</el-menu>
+				</el-scrollbar>
+			</el-main>
+		</el-container>
+	</el-drawer>
+
+</template>
+
+<script>
+import NavMenu from './NavMenu.vue';
+
+export default {
+  components: {
+    NavMenu
+  },
+  data() {
+    return {
+      nav: false,
+      menu: []
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    // var menu = this.$router.sc_getMenu()
+    // this.menu = this.filterUrl(menu)
+    console.log('this.$pinia', this.$pinia)
+    const systemStore = this.$pinia._s.get('system');
+    console.log('systemStore.menus', systemStore.menus)
+    this.menu = systemStore.menus
+  },
+
+  watch: {
+
+  },
+  methods: {
+    showMobileNav(e) {
+      const isdrag = e.currentTarget.getAttribute('drag-flag')
+      if (isdrag == 'true') {
+        return false;
+      } else {
+        this.nav = true;
+      }
+    },
+    select() {
+      this.$refs.mobileNavBox.handleClose()
+    },
+    // 转换外部链接的路由
+    filterUrl(map) {
+      const newMap = []
+      map && map.forEach(item => {
+        item.meta = item.meta ? item.meta : {};
+        // 处理隐藏
+        if (item.meta.hidden || item.meta.type == 'button') {
+          return false
+        }
+        // 处理http
+        if (item.meta.type == 'iframe') {
+          item.path = `/i/${item.name}`;
+        }
+        // 递归循环
+        if (item.children && item.children.length > 0) {
+          item.children = this.filterUrl(item.children);
+        }
+        newMap.push(item)
+      })
+      return newMap;
+    }
+  },
+  directives: {
+    drag(el) {
+      const oDiv = el; // 当前元素
+      let firstTime = ''; let lastTime = '';
+      // 禁止选择网页上的文字
+      // document.onselectstart = function() {
+      // 	return false;
+      // };
+      oDiv.onmousedown = function(e) {
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - oDiv.offsetLeft;
+        const disY = e.clientY - oDiv.offsetTop;
+        document.onmousemove = function(e) {
+          oDiv.setAttribute('drag-flag', true);
+          firstTime = new Date().getTime();
+          // 通过事件委托，计算移动的距离
+          const l = e.clientX - disX;
+          const t = e.clientY - disY;
+
+          // 移动当前元素
+
+          if (t > 0 && t < document.body.clientHeight - 50) {
+            oDiv.style.top = t + 'px';
+          }
+          if (l > 0 && l < document.body.clientWidth - 50) {
+            oDiv.style.left = l + 'px';
+          }
+        }
+        document.onmouseup = function() {
+          lastTime = new Date().getTime();
+          if ((lastTime - firstTime) > 200) {
+            oDiv.setAttribute('drag-flag', false);
+          }
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
+        return false;
+      };
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.mobile-nav-button {position: fixed;bottom:10px;left:10px;z-index: 10;width: 50px;height: 50px;background: #409EFF;box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
+	.mobile-nav-button i {color: #fff;font-size: 20px;}
+
+	.mobile-nav {background: #212d3d;}
+	.mobile-nav .el-header {background: transparent;border: 0;}
+	.mobile-nav .el-main {padding:0;}
+	.mobile-nav .logo-bar {display: flex;align-items: center;font-weight: bold;font-size: 20px;color: #fff;}
+	.mobile-nav .logo-bar img {width: 30px;margin-right: 10px;}
+	.mobile-nav .el-submenu__title:hover {background: #fff!important;}
+</style>