haiwei-skins-classics 1.0.0

package/.eslintignore

@@ -0,0 +1 @@
+node_modules/*

package/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', '@vue/prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  globals: {
+    $http: 'readonly',
+    particlesJS: 'readonly',
+    BMap: 'readonly',
+    BMAP_STATUS_SUCCESS: 'readonly'
+  }
+}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 200
+}

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
+  "eslint.autoFixOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.tslint": true
+  }
+}

package/README.md

@@ -0,0 +1,67 @@
+# HaiWei.Skins.Classics
+
+HaiWei 前端框架的经典皮肤组件
+
+## 特性
+
+- **经典设计** - 简洁优雅的经典界面设计
+- **主题切换** - 支持多种主题颜色切换
+- **响应式布局** - 适配不同屏幕尺寸
+- **易于集成** - 与 HaiWei.UI 框架无缝集成
+
+## 安装
+
+```bash
+npm install haiwei-skins-classics
+```
+
+## 使用
+
+```javascript
+import ClassicsSkin from 'haiwei-skins-classics'
+
+// 注册皮肤组件
+WebHost.registerSkin(ClassicsSkin)
+```
+
+## 主题
+
+皮肤支持以下主题：
+
+- **default** - 默认蓝色主题 (#03a9f4)
+- **blue-light** - 浅蓝色主题 (#e4e7ed)
+
+## 项目结构
+
+```
+haiwei-skins-classics/
+├── src/
+│   ├── index.js      # 入口文件
+│   ├── index.vue     # 皮肤组件
+│   ├── store.js      # 状态管理
+│   └── preview.png   # 皮肤预览图
+└── script/           # 构建脚本
+```
+
+## 可用脚本
+
+- `npm run serve` - 启动开发服务器
+- `npm run build` - 构建生产版本
+- `npm run lint` - 代码规范检查
+- `npm run i` - 使用淘宝镜像安装依赖
+- `npm run up` - 使用淘宝镜像更新依赖
+- `npm run pub` - 发布到 npm
+
+## 技术栈
+
+- **前端框架**: Vue 2.x
+- **构建工具**: Vue CLI
+- **包管理**: npm
+
+## 许可证
+
+ISC License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "haiwei-skins-classics",
+    "version": "1.0.0",
+    "description": "HaiWei皮肤组件classics",
+    "author": "Eric",
+    "license": "ISC",
+    "main": "src/index.js",
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "cm": "rimraf node_modules && rimraf dist",
+        "cc": "rimraf node_modules/.cache",
+        "i": "cd ./script && npm_install.bat",
+        "up": "cd ./script && npm_update.bat",
+        "pub": "cd ./script && npm_publish.bat"
+    },
+    "dependencies": {
+        "haiwei-ui": "^1.0.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.0.0",
+        "@vue/cli-plugin-eslint": "^4.0.0",
+        "@vue/cli-plugin-router": "^4.0.0",
+        "@vue/cli-plugin-vuex": "^4.0.0",
+        "@vue/cli-service": "^4.0.0",
+        "@vue/eslint-config-prettier": "^5.0.0",
+        "babel-eslint": "^10.0.3",
+        "eslint": "^5.16.0",
+        "eslint-plugin-prettier": "^3.1.1",
+        "eslint-plugin-vue": "^5.0.0",
+        "prettier": "^1.18.2",
+        "raw-loader": "^3.1.0",
+        "rimraf": "^3.0.0",
+        "sass": "^1.22.10",
+        "sass-loader": "^8.0.0",
+        "vue-template-compiler": "^2.6.10"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/iamoldli/NetModular.Skins.Classics.git"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

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,10 @@
+# 切换到项目根目录
+Set-Location ..
+
+# 使用淘宝镜像安装依赖（加速下载）
+Write-Host "Installing dependencies using Taobao mirror..." -ForegroundColor Green
+npm --registry https://registry.npmmirror.com/ install
+
+# 等待用户按键
+Write-Host "Dependencies installation completed. Press any key to continue..." -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,10 @@
+# 切换到项目根目录
+Set-Location ..
+
+# 发布到 npm 官方仓库
+Write-Host "Publishing to npm official registry..." -ForegroundColor Green
+npm --registry https://registry.npmjs.org/ publish
+
+# 等待用户按键
+Write-Host "Publishing completed. Press any key to continue..." -ForegroundColor Green
+$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,10 @@
+# 切换到项目根目录
+Set-Location ..
+
+# 使用淘宝镜像更新依赖（加速下载）
+Write-Host "Updating dependencies using Taobao mirror..." -ForegroundColor Green
+npm --registry https://registry.npmmirror.com/ update
+
+# 等待用户按键
+Write-Host "Dependencies update completed. Press any key to continue..." -ForegroundColor Green
+$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

package/src/components/header/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <section class="nm-header">
+    <!--logo-->
+    <section class="nm-header-logo">
+      <img :src="sys.logo" class="nm-header-logo-img" :alt="sys.title" :title="sys.title" />
+      <div class="nm-header-logo-text">{{ sys.title }}</div>
+    </section>
+    <!--导航栏-->
+    <section class="nm-header-nav">
+      <ul>
+        <template v-for="menu in menus">
+          <li :class="['nm-header-nav-item', menu.id === curr ? 'active' : '']" :key="menu.id">
+            <a href="javascript:void(0)" @click.prevent="onNavClick(menu)">
+              <nm-icon class="nm-header-nav-item-icon" :name="menu.icon" :style="{ color: menu.iconColor }" />
+              <span class="nm-header-nav-item-text">{{ menu.name }}</span>
+            </a>
+          </li>
+        </template>
+      </ul>
+    </section>
+    <!--工具栏-->
+    <section class="nm-header-toolbar">
+      <nm-toolbar />
+    </section>
+  </section>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex'
+import { open } from 'netmodular-ui/packages/utils/menu'
+
+export default {
+  data() {
+    return {
+      curr: ''
+    }
+  },
+  computed: {
+    ...mapState('app/system', { sys: s => s.config.base }),
+    ...mapState('app/account', ['menus', 'routeMenus']),
+    ...mapState('app/page', ['current'])
+  },
+  methods: {
+    ...mapMutations('app/skins/classics', ['setMenus']),
+    onNavClick(menu) {
+      this.curr = menu.id
+      // 节点类型
+      if (menu.type === 0) {
+        if (menu.children) {
+          this.setMenus(menu.children)
+          if (menu.children && menu.children[0]) {
+            open(this.$router, menu.children[0])
+          }
+        } else {
+          this.setMenus([])
+        }
+      } else {
+        open(this.$router, menu)
+      }
+    }
+  },
+  watch: {
+    current() {
+      if (this.current.name && this.routeMenus) {
+        let routeMenu = this.routeMenus.get(this.current.name)
+        if (routeMenu) {
+          for (var i = 0; i < this.menus.length; i++) {
+            if (this.menus[i].id === routeMenu.menu.rootId) {
+              this.curr = this.menus[i].id
+              this.setMenus(this.menus[i].children)
+              break
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/main/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <section :class="['nm-main',fontSize,sidebarCollapse?'collapse':'']">
+    <section class="nm-main-left">
+      <nm-menus />
+    </section>
+    <section class="nm-main-right">
+      <div class="nm-main-right-top">
+        <div>
+          <nm-tabnav>
+            <template v-slot:before>
+              <div class="nm-sidebar-toggle-btn">
+                <a @click.prevent="sidebarToggle">
+                  <nm-icon :name="sidebarCollapse ? 'indent-left' : 'indent-right'"></nm-icon>
+                </a>
+              </div>
+            </template>
+          </nm-tabnav>
+        </div>
+      </div>
+      <section class="nm-content">
+        <transition name="fade-transverse">
+          <keep-alive :include="keepAlive">
+            <router-view :key="$route.path" />
+          </keep-alive>
+        </transition>
+      </section>
+    </section>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex'
+import NmMenus from '../menus'
+export default {
+  components: { NmMenus },
+  computed: {
+    ...mapState('app/skins/classics/sidebar', { sidebarCollapse: 'collapse' }),
+    ...mapState('app/page', ['keepAlive'])
+  },
+  methods: {
+    ...mapActions('app/skins/classics/sidebar', { sidebarToggle: 'toggle' })
+  }
+}
+</script>

package/src/components/menus/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <section class="nm-menus">
+    <div class="no-menus" v-if="!menus || menus.length < 1">
+      <nm-icon name="form" />
+      <p>没有菜单</p>
+    </div>
+    <el-scrollbar v-else>
+      <el-menu :default-active="active" :unique-opened="uniqueOpened" :collapse="collapse" :collapse-transition="false">
+        <template v-for="item in menus">
+          <menu-item v-if="item.show" :key="item.id" :menu="item" />
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </section>
+</template>
+<script>
+import MenuItem from 'netmodular-ui/packages/skins/pretty/components/menus/item'
+import { mapState } from 'vuex'
+export default {
+  components: { MenuItem },
+  computed: {
+    ...mapState('app/system', { uniqueOpened: s => s.config.component.menu.uniqueOpened }),
+    ...mapState('app/skins/classics/sidebar', ['collapse']),
+    ...mapState('app/skins/classics', ['menus']),
+    ...mapState('app/account', ['routeMenus']),
+    ...mapState('app/page', ['current']),
+    active: {
+      get() {
+        if (this.current.name && this.routeMenus) {
+          let routeMenu = this.routeMenus.get(this.current.name)
+
+          if (routeMenu) {
+            return routeMenu.menu.id
+          }
+        }
+        return '-1'
+      },
+      set() {}
+    }
+  }
+}
+</script>

package/src/index.js

@@ -0,0 +1,23 @@
+import store from './store'
+import component from './index.vue'
+import preview from './preview.png'
+
+export default {
+  component,
+  store,
+  options: {
+    name: '经典',
+    code: 'classics',
+    preview,
+    themes: [
+      {
+        name: 'default',
+        color: '#03a9f4'
+      },
+      {
+        name: 'blue-light',
+        color: '#e4e7ed'
+      }
+    ]
+  }
+}

package/src/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="nm-wrapper">
+    <nm-header />
+    <nm-main />
+  </div>
+</template>
+<script>
+import NmHeader from './components/header'
+import NmMain from './components/main'
+export default {
+  components: { NmHeader, NmMain }
+}
+</script>
+<style lang="scss">
+@import "./styles/_index.scss";
+</style>

package/src/store/index.js

@@ -0,0 +1,15 @@
+import sidebar from 'netmodular-ui/packages/skins/pretty/store/modules/sidebar'
+export default {
+  namespaced: true,
+  state: {
+    menus: []
+  },
+  mutations: {
+    setMenus(state, menus) {
+      state.menus = menus
+    }
+  },
+  modules: {
+    sidebar
+  }
+}

package/src/styles/_index.scss

@@ -0,0 +1,17 @@
+@import '~netmodular-ui/packages/styles/mixins';
+@import '~netmodular-ui/packages/styles/variables';
+
+#{$prefix}skin-classics {
+    #{$prefix}wrapper {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        @include flex-column();
+    }
+
+    @import './components/header/index';
+    @import './components/main/index';
+
+    @import './themes/index';
+
+}

package/src/styles/components/header/_index.scss

@@ -0,0 +1,112 @@
+#{$prefix}header {
+    position: relative;
+    @include flex-row();
+    flex-shrink: 0;
+    height: 80px;
+    background-color: #03a9f4;
+
+    /*logo*/
+    &-logo {
+        @include flex-row();
+        flex-shrink: 0;
+        height: 100%;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
+        z-index: 1;
+
+        &-img {
+            flex-shrink: 0;
+            margin: 5px 11px;
+            width: 60px;
+            height: 60px;
+        }
+
+        &-text {
+            flex-grow: 1;
+            text-align: center;
+            @include vertical-center(80px);
+            font-size: 30px;
+            color: #fff;
+            white-space: nowrap;
+        }
+    }
+
+    &-nav {
+        display: inline-block;
+        flex-grow: 1;
+        margin-left: 15px;
+        overflow: hidden;
+
+        &-item {
+            padding: 0 3px;
+            float: left;
+
+            a {
+                position: relative;
+                padding: 10px 15px;
+                display: inline-block;
+                text-decoration: none;
+                color: #e4e7ed;
+                text-align: center;
+                height: 80px;
+                box-sizing: border-box;
+                cursor: pointer;
+                transition: background-color 0.25s ease-in-out;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    width: 0;
+                    height: 3px;
+                    background: #e6a23c;
+                    transition: all .25s ease-in-out;
+                }
+            }
+
+            &-icon {
+                font-size: 35px;
+            }
+
+            &-text {
+                display: block;
+                margin-top: 5px;
+                font-size: 14px;
+            }
+
+            &:hover,
+            &.active {
+
+                a {
+                    color: #fff;
+                    background-color: #29d;
+
+                    &::after {
+                        left: 0;
+                        width: 100%;
+                    }
+
+                }
+            }
+        }
+    }
+
+    &-toolbar {
+        #{$prefix}toolbar {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 80px;
+            background-color: #03a9f4;
+
+            &-button {
+                width: 50px;
+
+                #{$prefix}icon {
+                    font-size: 35px;
+                }
+            }
+        }
+    }
+}

package/src/styles/components/main/_index.scss

@@ -0,0 +1,103 @@
+#{$prefix}main {
+    @include flex-row();
+    flex-grow: 1;
+    overflow: hidden;
+
+    &-left {
+        position: relative;
+        flex-shrink: 0;
+        width: 240px;
+        background-color: #344058;
+        transition: all 0.25s ease-in;
+
+    }
+
+    &-right {
+        @include flex-column();
+        flex-grow: 1;
+
+        &-top {
+            position: relative;
+            flex-shrink: 0;
+            height: 50px;
+            overflow: hidden;
+
+            >div {
+                position: absolute;
+                height: 100%;
+                width: 100%;
+            }
+        }
+
+        #{$prefix}sidebar-toggle-btn {
+            padding: 0 5px;
+            flex-shrink: 0;
+            background-color: #ebf1f6;
+
+            a {
+                padding: 0 8px;
+                display: inline-block;
+                height: 50px;
+                line-height: 50px;
+                font-size: 25px;
+                text-align: center;
+                background-color: #fff;
+                color: #909090;
+                cursor: pointer;
+                text-decoration: none;
+                box-sizing: border-box;
+                border-bottom: 1px solid #dcdfe6;
+                border-left: 1px solid #dcdfe6;
+
+                &:hover {
+                    color: #444;
+                }
+            }
+        }
+
+
+        #{$prefix}content {
+            position: relative;
+            flex-grow: 1;
+            overflow: hidden;
+            background: #f0f0f0;
+        }
+    }
+
+    &.collapse {
+        #{$prefix}main-left {
+            width: 70px;
+        }
+    }
+
+    @mixin main-right($height) {
+        #{$prefix}main-right {
+            &-top {
+                height: $height;
+
+                #{$prefix}sidebar-toggle-btn {
+
+                    a {
+                        height: $height;
+                        line-height: $height;
+                    }
+                }
+            }
+        }
+    }
+
+    &.mini {
+        @include main-right(35px);
+    }
+
+    &.small {
+        @include main-right(40px);
+
+    }
+
+    &.medium {
+        @include main-right(45px);
+    }
+}
+
+@import '~netmodular-ui/packages/skins/pretty/styles/components/menus/index';

package/src/styles/themes/_index.scss

@@ -0,0 +1,2 @@
+@import './default/index';
+@import './blue-light/index';

package/src/styles/themes/_theme.scss

@@ -0,0 +1,30 @@
+#{$prefix}main {
+    &-left {
+
+        #{$prefix}menus {
+            background-color: $classics-menus-background-color !important;
+        }
+
+        .el-menu,
+        .el-menu--vertical {
+            background-color: $classics-menus-background-color;
+
+            .el-menu-item,
+            .el-submenu__title {
+                color: $classics-menus-menu-color;
+
+                &:focus,
+                &:active,
+                &:hover {
+                    background: $classics-menus-menu-hover-background-color !important;
+                    color: $classics-menus-menu-hover-color !important;
+                }
+
+                &.is-active {
+                    background: $classics-menus-menu-active-background-color !important;
+                    color: $classics-menus-menu-active-color !important;
+                }
+            }
+        }
+    }
+}

package/src/styles/themes/blue-light/_index.scss

@@ -0,0 +1,2 @@
+@import './variables';
+@import '../theme';

package/src/styles/themes/blue-light/_variables.scss

@@ -0,0 +1,12 @@
+/*主题色*/
+$classics-theme-color: #03a9f4;
+
+/*menus*/
+$classics-menus-background-color: #fff;
+$classics-menus-menu-color:#444;
+
+$classics-menus-menu-active-background-color:#29d;
+$classics-menus-menu-active-color:#fff;
+
+$classics-menus-menu-hover-background-color:rgba(64, 158, 255, 0.2);
+$classics-menus-menu-hover-color:#444;

package/src/styles/themes/default/_index.scss

@@ -0,0 +1,2 @@
+@import './variables';
+@import '../theme';

package/src/styles/themes/default/_variables.scss

@@ -0,0 +1,12 @@
+/*主题色*/
+$classics-theme-color: #03a9f4;
+
+/*menus*/
+$classics-menus-background-color: #344058;
+$classics-menus-menu-color:rgba(255, 255, 255, .7);
+
+$classics-menus-menu-active-background-color:#29d;
+$classics-menus-menu-active-color:#fff;
+
+$classics-menus-menu-hover-background-color:rgba(64, 158, 255, 0.2);
+$classics-menus-menu-hover-color:#fff;