# xwindow

**Repository Path**: nway/xwindow

## Basic Information

- **Project Name**: xwindow
- **Description**: 本项目改自https://github.com/woyou0712/WIN10-VUE，非常感谢作者开源这么优秀的代码。

仿Windows10、11的桌面风格，适合做管理系统基础平台，尤其适合大平台模式。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2022-01-29
- **Last Updated**: 2024-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

本项目修改自 https://github.com/woyou0712/WIN10-VUE ，非常感谢作者开放这么优秀的源代码，为尊重、发扬原作者的奉献精神，现特将修改后的源码以MIT协议开放。  

仿Windows10、11的桌面风格，适合做管理系统基础平台，尤其适合大平台模式。

# 如下内容为原项目文档

[官方网站](http://win10.bauble.top/#/)
---
[QQ交流群](https://jq.qq.com/?_wv=1027&k=A6uckLvp)
# 直接运行
## 安装依赖
```
$ npm install -g cnpm --registry=https://registry.npmmirror.com
```

### 热加载运行
```
$ npm run serve
```


# 引入到自己的项目中
```
- src/views/win10整个复制到自己项目的views目录下
- 在router中引入win10/index.vue
- main.js中引入
  - import "./views/win10/css/main.css";
  - import myApp from "./views/win10/MyUI/js/myApp.js";
  - Vue.prototype.myApp = new myApp(Vue);
```

# 弹窗API
### 默认配置
```
 option = {
    title: "新窗口",//应用名称
    theme: "theme",//主题css类名
    content: "http://www.baidu.com",//内容:如果是iframe就直接填写完整的url
    size: ["70%", "80%"],//窗口大小
    maxmin: true,//是否显示最大化和最小化,默认为true
    on(appBox) { return },//打开窗口的回调函数 appBox:窗口对象
    move(appBox) { return },//在窗口中按下鼠标的回调函数
    min(appBox) { return },//窗口最小化回调函数
    max(appBox) { return },//窗口最大化回调函数
    yes() { return },//点击确定回调函数
    off(id) { return },//关闭窗口回调函数
  }
```
### 弹出一个可以拖动的iframe窗口
- this.myApp.html(option)
**例:**
```
this.myApp.html({
  content: "http://www.baidu.com/",
  title: "百度一下",
  theme:"theme-b",
  // 打开窗口回调
  on: appBox => {
  },
  // 窗口移动回调
  move: appBox => {
  },
  // 最小化回调
  min: appBox => {
  },
  // 关闭窗口回调
  off: id => {
  }
});
```
### 弹出一个可以拖动的VUE组件窗口
- this.myApp.vue(option)

**例:**
- 弹窗VUE组件需要先引入组件; 详情:[系统配置](#系统配置)
```
import browser from "./componemts/app/browser.vue"

this.myApp.vue({
  content: browser,
  title: "浏览器",
  theme:"theme-b",
  props: {key:value},
  // 打开窗口回调
  on: appBox => {
  },
  // 窗口移动回调
  move: appBox => {
  },
  // 最小化回调
  min: appBox => {
  },
  // 关闭窗口回调
  off: id => {
  }
});
```
### 弹出一个可以拖动的消息确认框
- this.myApp.alert(option)
```
this.myApp.alert({
  title:"提示",
  content: "你想干什么?",
  // 点击确定回调
  yes:()=> {
  }
});
```
### 弹出一个2秒后自动关闭的消息提示框
- this.myApp.msg(option)
```
this.myApp.msg({
  content: "轻提示"
});
```

# 右键菜单
- index.vue
### 配置
```
data(){
  return {
    // 右键菜单内容
    rightClickDatas:{
      // 桌面右键菜单
      window:[],
      // 应用图标右键菜单
      app:[],
      // 导航栏右键菜单
      navbar:[]
    },
  }
}
```
### 处理函数
```
methods:{
  onRightList(name) {
    // neme 你点击的菜单名字
  }
}
```
# 系统配置
- index.vue
### 配置
```
data(){
  return {
    // 背景图片列表
    bgList : [
      // 如果图片在服务器,则可以直接使用网络图片的完整URL
      require("./images/bg_01.jpg"),
      require("./images/bg_02.jpg"),
      require("./images/bg_03.jpg"),
      require("./images/bg_04.jpg"),
      require("./images/bg_05.jpg")

    ],
    bgIndex :0, //当前背景下标
    // 主题Class列表
    themeColors : [
      // 可以使用自定义类
      "theme-a",   //主题类包括至少两条属性 {background-color:#???,color:#???}
      "theme-b",
      "theme-c",
      "theme-d"
    ],
    themeIndex : 18; //当前主题下标
    // 桌面应用列表
    windowsApp : [
      {
        id: 1, //唯一ID
        name: "浏览器", //应用名称
        imgType: "icon",
        icon: "", //应用图标
        img: "",
        content: browser, //VUE组件 需要先引入自定义的VUE组件 例如: import browser from "./componemts/app/browser.vue"; //浏览器
        type: "vue", // 应用类型 "vue" "html"  
        isShow: true, // 是否在桌面显示
        isDel: false // 是否允许删除
      },
      {
        id: 2,
        name: "百度一下",
        imgType: "icon",
        icon: "",
        img: "",
        content: "https://www.baidu.com/", // iframe组件
        type: "html",
        isShow: true,
        isDel: true
      }
    ],
  }
}
```
### 登陆并配置
```
methods:{
  login(uname, upwd, loadData) {
    if (!uname) {
      this.myApp.msg({
        content: "用户名不能为空"
      });
      return;
    } else if (!upwd) {
      this.myApp.msg({
        content: "密码不能为空"
      });
      return;
    }
    if (uname == "admin" && upwd == "123456") {
      // 登陆成功,开始加载配置
      // 先调用回调函数,告诉子组件登陆成功了,开始加载配置
      if (typeof loadData == "function") {
        loadData();
      }
      // 为了能够看到加载效果,假设请求数据要两秒钟,实际是ajax请求的时间
      setTimeout(() => {
        // 如果配置在服务器,请求服务器配置文件,
        // 背景图片列表
        this.bgList = [
          require("./images/bg_01.jpg"),
          require("./images/bg_02.jpg"),
          require("./images/bg_03.jpg"),
          require("./images/bg_04.jpg"),
          require("./images/bg_05.jpg")
        ];
        this.bgIndex = 0; //当前背景下标
        // 主题Class列表
        this.themeColors = [
          "theme-a",
          "theme-b",
          "theme-c",
          "theme-d",
          "theme-e",
          "theme-f",
          "theme-g",
          "theme-h",
          "theme-i",
          "theme-j",
          "theme-k",
          "theme-l",
          "theme-m",
          "theme-n",
          "theme-o",
          "theme-p",
          "theme-q",
          "theme-r",
          "theme-s",
          "theme-t",
          "theme-u",
          "theme-v",
          "theme-w",
          "theme-x",
          "theme-y",
          "theme-z"
        ];
        this.themeIndex = 18; //当前主题下标
        // 桌面应用列表
        this.windowsApp = [
          {
            id: 1, //唯一ID
            name: "浏览器", //应用名称
            imgType: "icon",
            icon: "", //应用图标
            img: "",
            content: browser, //VUE组件
            type: "vue", //应用类型
            isShow: true, //是否在桌面显示
            isDel: false //是否允许删除
          },
          {
            id: 2,
            name: "百度一下",
            imgType: "icon",
            icon: "",
            img: "",
            content: "https://www.baidu.com/",
            type: "html",
            isShow: true,
            isDel: true
          },
          {
            id: 3,
            name: "微信",
            imgType: "icon",
            icon: "",
            img: "",
            content: "https://wx.qq.com/",
            type: "html",
            isShow: true,
            isDel: true
          }
        ];
        // 数据全部获取到了之后,登陆完成,显示桌面
        this.isLogin = true;
      }, 2000);
    } else {
      this.myApp.msg({
        content: "用户名或密码错误"
      });
    }
  }
}
```
# 修改系统配置
- index.vue
- 可在以下函数中,对配置做处理或者保存到服务器
```
methods:{
  // 监听背景修改
  onbg(i) {
    if (this.bgIndex == i) {
      return;
    }
    this.bgIndex = i;
    // 然后将配置保存到服务器
  },
  // 监听主题修改
  ontheme(i) {
    if (this.themeIndex == i) {
      return;
    }
    this.themeIndex = i;
    // 然后将配置保存到服务器
  },
  // 添加App
  addNewAPP(app, end) {
    if (app) {
      this.windowsApp.push(app);
      if (typeof end == "function") {
        // 添加完成调用回调函数
        end();
        // 然后将配置保存到服务器
      }
    }
  },
  // 修改App
  setWinApp(app) {
    // 将配置保存到服务器
    console.log("确定修改APP", app);
  },
  // 从系统中删除APP
  delWinApp(app) {
    // 将配置保存到服务器
    console.log("卸载APP", app);
  },
}
```
### 自定义管理菜单和磁贴
- win10/components/built-in/memu.vue
```
  data() {
    return {
      // 菜单数据,-可从服务器获取
      memuData: [
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
            "http://183.134.66.144/tx_01.jpg", //图片,二选一
          name: "一级菜单", //名称
          //子菜单
          son: []
        },
        {
          imgType: "icon", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img: "", //图片,二选一
          name: "一级菜单2", //名称
          //子菜单
          son: [
            {
              imgType: "icon", //图标类型 "icon", "img"
              icon: "",
              img: "",
              name: "二级菜单2",
              son: []
            },
            {
              imgType: "img", //图标类型 "icon", "img"
              icon: "",
              img:
                "http://183.134.66.144/tx_02.jpg",
              name: "二级菜单3",
              son: []
            }
          ]
        },
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
            "http://183.134.66.144/tx_03.jpg", //图片,二选一
          name: "一级菜单3", //名称
          //子菜单
          son: [
            {
              imgType: "img", //图标类型 "icon", "img"
              icon: "",
              img:
                "http://183.134.66.144/tx_04.jpg",
              name: "二级菜单2",
              son: [
                {
                  imgType: "img", //图标类型 "icon", "img"
                  icon: "",
                  img:
                    "http://183.134.66.144/tx_05.jpg",
                  name: "三级菜单",
                  son: []
                },
                {
                  imgType: "img", //图标类型 "icon", "img"
                  icon: "",
                  img:
                    "http://183.134.66.144/tx_06.jpg",
                  name: "三级菜单",
                  son: []
                }
              ]
            },
            {
              imgType: "img", //图标类型 "icon", "img"
              icon: "",
              img:
                "http://183.134.66.144/tx_07.jpg",
              name: "二级菜单3",
              son: [
                {
                  imgType: "img", //图标类型 "icon", "img"
                  icon: "",
                  img:
                    "http://183.134.66.144/tx_08.jpg",
                  name: "三级菜单10",
                  son: []
                }
              ]
            }
          ]
        }
      ],
      // 打开的二级菜单
      unfoldTwoMemu: null,
      // 打开的三级菜单
      unfoldThreeMemu: null,
      // 磁贴数据,-可从服务器获取
      pasterData: [
        {
          imgType: "icon", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img: "", //图片,二选一
          name: "小妖出品",
          content: "内容"
        },
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
            "http://183.134.66.144/tx_09.jpg", //图片,二选一
          name: "小妖出品",
          content: "内容"
        },
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
           "http://183.134.66.144/tx_09.jpg", //图片,二选一
          name: "小妖出品",
          content: "内容"
        },
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
            "http://183.134.66.144/tx_09.jpg", //图片,二选一
          name: "小妖出品",
          content: "内容"
        },
        {
          imgType: "img", //图标类型 "icon", "img"
          icon: "", //图标,二选一
          img:
            "http://183.134.66.144/tx_09.jpg", //图片,二选一
          name: "小妖出品",
          content: "内容"
        }
      ]
    };
  },
```
# 配置本地icon图标列表
- 先更新/win10/iconfont/目录下的图标文件：[阿里iconfont图标](https://www.iconfont.cn/)
- 再添加到本地iconfont图标列表组件中
  - /win10/components/built-in/iconfontList.vue 
```

  data() {
    return {
      iconList: [
      ]
    };
  }
```