​ood 框架深度解析：OneCode-RAD 跨平台移动开发套件的技术演进之路

// 虚拟 DOM 模板示例
class ComponentTemplate {
  static template = {
    tag: 'div',
    class: 'component-wrapper',
    children: [
      {
        tag: 'header',
        class: 'component-header',
        $submap: 'header'
      },
      {
        tag: 'main',
        class: 'component-content',
        $submap: 'content'
      },
      {
        tag: 'footer',
        class: 'component-footer',
        $submap: 'footer'
      }
    ]
  };
}

// absList 父类继承体系
class absList extends absContainer {
  items() { }
  _prepareData() { }
  _prepareStyle() { }
}

// 响应式布局示例
class Layout extends absList {
  _prepareStyle() {
    const { direction, gap } = this.properties;
    return {
      display: 'flex',
      flexDirection: direction === 'vertical' ? 'column' : 'row',
      gap: gap
    };
  }
}

// 创建一个主按钮
const button = new ood.Mobile.Button({
  text: '点击我',
  type: 'primary',
  size: 'large',
  onClick: function() {
    console.log('按钮被点击了');
  }
});

// 密码输入框
const passwordInput = new ood.Mobile.Input({
  type: 'password',
  placeholder: '请输入密码',
  showPassword: true
});

// 创建一个开关组件
const switchComponent = new ood.Mobile.Switch({
  value: false,
  onChange: function(value) {
    console.log('开关状态:', value);
  }
});

// 创建一个垂直布局
const verticalLayout = new ood.Mobile.Layout({
  direction: 'vertical',
  gap: '10px',
  items: [
    { id: 'header', size: 50, pos: 'before' },
    { id: 'content', flex: 1, pos: 'main' },
    { id: 'footer', size: 50, pos: 'after' }
  ]
});

// 创建一个带标题的面板
const panel = new ood.Mobile.Panel({
  title: '用户信息',
  closable: true,
  content: '这里是面板内容'
});

// 创建一个网格布局
const grid = new ood.Mobile.Grid({
  columns: 3,
  gap: '10px',
  items: [
    { id: 'item1', content: '网格项1' },
    { id: 'item2', content: '网格项2' },
    { id: 'item3', content: '网格项3' }
  ]
});

// 创建一个导航栏
const navBar = new ood.Mobile.NavBar({
  title: '首页',
  leftButtons: [
    { id: 'back', icon: 'ri-arrow-left-line', onClick: function() { history.back(); } }
  ],
  rightButtons: [
    { id: 'search', icon: 'ri-search-line', onClick: function() { /* 搜索逻辑 */ } }
  ]
});

// 创建一个标签栏
const tabBar = new ood.Mobile.TabBar({
  items: [
    { id: 'home', caption: '首页', icon: 'ri-home-line' },
    { id: 'search', caption: '搜索', icon: 'ri-search-line' },
    { id: 'profile', caption: '我的', icon: 'ri-user-line' }
  ],
  activeTab: 'home',
  onChange: function(tabId) {
    console.log('切换到标签:', tabId);
  }
});

// 创建一个左侧抽屉
const drawer = new ood.Mobile.Drawer({
  position: 'left',
  width: '80%',
  content: '抽屉内容',
  onOpen: function() {
    console.log('抽屉打开');
  },
  onClose: function() {
    console.log('抽屉关闭');
  }
});

// 创建一个列表
const list = new ood.Mobile.List({
  data: [
    { id: '1', title: '列表项1', description: '描述信息1' },
    { id: '2', title: '列表项2', description: '描述信息2' }
  ],
  pullRefresh: true,
  infiniteScroll: true,
  onItemClick: function(item) {
    console.log('点击了列表项:', item);
  }
});

// 创建一个卡片
const card = new ood.Mobile.Card({
  title: '产品名称',
  description: '产品详细描述信息',
  image: 'path/to/image.jpg',
  actions: [
    { id: 'buy', text: '购买', onClick: function() { /* 购买逻辑 */ } },
    { id: 'favorite', text: '收藏', onClick: function() { /* 收藏逻辑 */ } }
  ]
});

// 创建一个圆形头像
const avatar = new ood.Mobile.Avatar({
  src: 'path/to/avatar.jpg',
  size: 'large',
  shape: 'circle'
});

// 创建一个数字徽标
const badge = new ood.Mobile.Badge({
  count: 5,
  maxCount: 99
});

// 显示成功提示
ood.Mobile.Toast.success('操作成功');

// 显示错误提示
ood.Mobile.Toast.error('操作失败');

// 显示加载提示
ood.Mobile.Toast.loading('加载中...');

// 创建一个确认模态框
const confirmModal = new ood.Mobile.Modal({
  title: '确认操作',
  content: '确定要执行此操作吗？',
  buttons: [
    { id: 'cancel', text: '取消', type: 'default' },
    { id: 'confirm', text: '确认', type: 'primary' }
  ],
  onButtonClick: function(buttonId) {
    if (buttonId === 'confirm') {
      console.log('用户确认操作');
    }
  }
});

// 创建一个动作面板
const actionSheet = new ood.Mobile.ActionSheet({
  title: '选择操作',
  actions: [
    { id: 'edit', text: '编辑' },
    { id: 'delete', text: '删除', danger: true },
    { id: 'share', text: '分享' }
  ],
  onCancel: function() {
    console.log('取消操作');
  },
  onAction: function(actionId) {
    console.log('选择了操作:', actionId);
  }
});

// 创建一个表单
const form = new ood.Mobile.Form({
  fields: [
    {
      id: 'username',
      type: 'input',
      label: '用户名',
      required: true,
      validator: function(value) {
        return value.length >= 3 ? null : '用户名至少3个字符';
      }
    },
    {
      id: 'email',
      type: 'input',
      label: '邮箱',
      inputType: 'email',
      required: true
    }
  ],
  onSubmit: function(data) {
    console.log('表单数据:', data);
  }
});

// 创建一个单列选择器
const picker = new ood.Mobile.Picker({
  data: [
    { id: 'apple', text: '苹果' },
    { id: 'banana', text: '香蕉' },
    { id: 'orange', text: '橙子' }
  ],
  onChange: function(value) {
    console.log('选择的值:', value);
  }
});

// 创建一个图片组件
const image = new ood.Mobile.Image({
  src: 'path/to/image.jpg',
  alt: '图片描述',
  lazyLoad: true,
  onLoad: function() {
    console.log('图片加载完成');
  },
  onError: function() {
    console.log('图片加载失败');
  }
});

// 创建一个视频组件
const video = new ood.Mobile.Video({
  src: 'path/to/video.mp4',
  controls: true,
  autoplay: false,
  onPlay: function() {
    console.log('视频开始播放');
  },
  onPause: function() {
    console.log('视频暂停');
  }
});

// 创建一个音频组件
const audio = new ood.Mobile.Audio({
  src: 'path/to/audio.mp3',
  controls: true,
  onPlay: function() {
    console.log('音频开始播放');
  },
  onEnded: function() {
    console.log('音频播放结束');
  }
});

// 创建页面布局
const pageLayout = new ood.Mobile.Layout({
  direction: 'vertical',
  items: [
    { id: 'header', size: 50, pos: 'before' },
    { id: 'content', flex: 1, pos: 'main' },
    { id: 'footer', size: 50, pos: 'after' }
  ]
});

// 创建导航栏
const navBar = new ood.Mobile.NavBar({
  title: '用户中心',
  leftButtons: [
    { id: 'back', icon: 'ri-arrow-left-line', onClick: function() { history.back(); } }
  ]
});

// 创建用户信息卡片
const userCard = new ood.Mobile.Card({
  title: '张三',
  description: '高级会员',
  image: 'path/to/avatar.jpg'
});

// 创建功能列表
const functionList = new ood.Mobile.List({
  data: [
    { id: 'profile', title: '个人资料', icon: 'ri-user-line' },
    { id: 'orders', title: '我的订单', icon: 'ri-file-list-line' },
    { id: 'settings', title: '设置', icon: 'ri-settings-line' }
  ],
  onItemClick: function(item) {
    switch(item.id) {
      case 'profile':
        // 跳转到个人资料页面
        break;
      case 'orders':
        // 跳转到订单页面
        break;
      case 'settings':
        // 跳转到设置页面
        break;
    }
  }
});

// 创建底部标签栏
const tabBar = new ood.Mobile.TabBar({
  items: [
    { id: 'home', caption: '首页', icon: 'ri-home-line' },
    { id: 'search', caption: '搜索', icon: 'ri-search-line' },
    { id: 'profile', caption: '我的', icon: 'ri-user-line' }
  ],
  activeTab: 'profile'
});

// 组装页面
pageLayout.setItemContent('header', navBar);
pageLayout.setItemContent('content', [userCard, functionList]);
pageLayout.setItemContent('footer', tabBar);

// 移动端组件配置示例
{
  id: 'ood.Mobile.Layout',
  key: 'ood.Mobile.Layout',
  caption: '$(RAD.widgets.mobileLayout)',
  imageClass: 'ri ri-layout-line',
  draggable: true,
  iniProp: {
    direction: 'vertical',
    gap: '10px',
    items: [
      {id: 'header', size: 50, pos: 'before'},
      {id: 'content', flex: 1, pos: 'main'},
      {id: 'footer', size: 50, pos: 'after'}
    ]
  }
}