# PhotUI

**Repository Path**: Photlab/phot-ui

## Basic Information

- **Project Name**: PhotUI
- **Description**: 光纤传输仿真平台UI组件库
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-10-30
- **Last Updated**: 2024-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### PhotUI

#### 介绍

光纤传输仿真平台 UI 组件库

目前已开发完成如下 ui 组件：

- Button 按钮组件
- Icon 组件
- Switch 开关组件
- Tag 标签组件
- Tabs 标签页组件
- Input 输入框组件
- Selector 下拉框组件
- CheckBox 复选框组件
- Search 搜索框组件
- Popper 悬浮窗组件（基于 vue3popper 的二次封装）
- Dialog 对话框组件
- Drawer 抽屉组件
- Tree 树形组件
- Cascader 级联选择器
- Toolbar 分组工具栏组件
- Svg 矢量图组件

#### 软件架构

- Vue3.x
- Typescript

#### 安装教程

```js
$ npm install @photlab/phot-ui
```

#### 使用说明

```main.ts进行配置：
import PhotUI from '@photlab/phot-ui'
import '@photlab/phot-ui/lib/index.css'
createApp(App).use(PhotUI).mount('#app')

```

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 数据格式

```jsx
<template>
  <div id="app">
    <div :class="['demo', 'pui-theme', demoRef.theme && 'pui-theme__dark']">
      <div class="top">
        <div class="left">
          <div class="demo-item">
            <div class="title text_dark">主题</div>
            <div class="content">
              <pui-switch
                activeLabel="Dark"
                inactiveLabel="Light"
                activeColor="#409EFF"
                inactiveColor="#909399"
                v-model="demoRef.theme"
                @onChange="themeChange"
              ></pui-switch>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">按钮</div>
            <div class="content">
              <pui-button>描边按钮</pui-button>
              <pui-button type="primary">描边按钮</pui-button>
              <pui-button icon="check"></pui-button>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">开关</div>
            <div class="content">
              <div>
                <pui-switch v-model="demoRef.switchActive1" isLoading :loading="demoRef.switchLoading" @onChange="switchChange"></pui-switch>
                <pui-switch v-model="demoRef.switchActive2"></pui-switch>
              </div>
              <div class="m-t-10">
                <pui-switch v-model="demoRef.switchActive3" disabled></pui-switch>
                <pui-switch v-model="demoRef.switchActive4" disabled></pui-switch>
              </div>
              <div class="m-t-10">
                <pui-switch v-model="demoRef.switchActive5" autofocus isLoading :loading="demoRef.switchLoading" @onChange="switchChange"></pui-switch>
                <pui-switch v-model="demoRef.switchActive6" autofocus></pui-switch>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">下拉列表</div>
            <div class="content">
              <pui-selector :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">自动补全</div>
            <div class="content">
              <pui-search :dataList="demoRef.optionsList" v-model="demoRef.inputText1" type="input" clearAble></pui-search>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">输入框</div>
            <div class="content">
              <pui-input v-model="demoRef.inputText2" type="input" clearAble full width="200px"></pui-input>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="demo-item">
            <div class="title text_dark">复选框</div>
            <div class="content">
              <div>
                <pui-checkbox v-model="demoRef.check1" label="checkbox1" size></pui-checkbox>
                <pui-checkbox v-model="demoRef.check2" size label="checkbox2"></pui-checkbox>
                <pui-checkbox v-model="demoRef.check3" disabled size label="disabled"></pui-checkbox>
              </div>
              <div class="m-t-20">
                <pui-checkbox v-model="demoRef.check1" label="checkbox1" size border></pui-checkbox>
                <pui-checkbox v-model="demoRef.check2" size label="checkbox2" border></pui-checkbox>
                <pui-checkbox v-model="demoRef.check3" disabled size label="disabled" border></pui-checkbox>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">单选框</div>
            <div class="content">
              <pui-radio-group v-model="demoRef.radio1" :list="demoRef.radioList"></pui-radio-group>
              <pui-radio-group class="m-t-20" v-model="demoRef.radio1" :list="demoRef.radioList" disabled column></pui-radio-group>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">标签</div>
            <div class="content">
              <div>
                <pui-tag plain>Tag1</pui-tag>
                <pui-tag type="primary" plain>Tag1</pui-tag>
                <pui-tag type="primary">Tag1</pui-tag>
                <pui-tag type="primary" plain><pui-icon name="plus" /> Add Tag</pui-tag>
              </div>
              <div class="m-t-20">
                <pui-tag plain circle>1</pui-tag>
                <pui-tag type="primary" plain circle>2</pui-tag>
                <pui-tag type="primary" circle>9+</pui-tag>
              </div>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">标签栏</div>
            <div class="content">
                <pui-tabs :tabList="demoRef.tabList1" @onRemove="removeTab" @onAdd="addTab" @onClickHandle="tabClickHandle" add remove></pui-tabs>
                <pui-tabs round class="m-t-20" :tabList="demoRef.tabList2" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="demo-item">
            <div class="title text_dark">对话框</div>
            <div class="content">
              <pui-button @click="showDialog('fade')">fade</pui-button>
              <pui-button @click="showDialog('slide-fade')">slide-fade</pui-button>
              <pui-button @click="showDialog('bounce')">bounce</pui-button>
              <pui-dialog title="对话框" v-model="demoRef.dialogVisible" :animate="demoRef.animate">
                <template #content>
                  <div>
                      {{demoRef.animate}}
                  </div>
                </template>
              </pui-dialog>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">树形控件</div>
            <div class="content">
              <pui-tree :dataList="demoRef.optionsList" isPopper>
                <pui-button>树形控件</pui-button>
              </pui-tree>
              <pui-tree :dataList="demoRef.optionsList"></pui-tree>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">级联选择器</div>
            <div class="content">
              <pui-cascader :dataList="demoRef.optionsList">
                <pui-button>级联选择器</pui-button>
              </pui-cascader>
            </div>
          </div>
          <div class="demo-item m-t-20">
            <div class="title text_dark">抽屉组件</div>
            <div class="content" style="height: 150px;width:300px;position:relative;">
              <div class="l" style="height: 150px;width:300px;position:relative;display: flex;justify-content: space-between;align-items: flex-start;">
                <pui-drawer position="left" header zIndex="2" :width="270" show>
                  <template #header>
                    <span style="font-size: 16px">left</span>
                  </template>
                  left
                </pui-drawer>
                <pui-drawer position="right" title="right" zIndex="1" :width="270">right</pui-drawer>
              </div>
              <pui-drawer position="top" title="top" zIndex="4" :height="120">top</pui-drawer>
              <pui-drawer position="bottom" title="bottom" zIndex="3" :height="120" show>bottom</pui-drawer>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title text_dark m-t-20">分组工具栏</div>
        <pui-toolbar :toolbarList="demoRef.toolbarList"></pui-toolbar>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export interface BaseOptions {  // tree、cascader 数据格式
    label: string,
    value: string | number,
    children?: BaseOptions[]
}
import { defineComponent, reactive, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    const sliderRef = ref()
    const demoRef = reactive({
      theme: false,
      switchActive1: true,
      switchActive2: false,
      switchActive3: true,
      switchActive4: false,
      switchActive5: true,
      switchActive6: false,
      switchLoading: false,
      optionsList: [
        {
          label: '测试1',
          value: '1',
          children: [
            {
              label: '测试1-1',
              value: '1-1',
              children: [
                {
                  label: '测试1-1-1',
                  value: '1-1-1',
                },
                {
                  label: '测试1-1-2',
                  value: '1-1-2',
                },
                {
                  label: '测试1-1-3',
                  value: '1-1-3',
                },
              ]
            },
            {
              label: '测试1-2',
              value: '1-2',
            },
            {
              label: '测试1-3',
              value: '1-3',
            },
          ]
        },
        {
          label: '测试2',
          value: '2'
        },
        {
          label: '测试3',
          value: '3'
        },
      ],
      selectData1: {
        value: '',
        label: ''
      },
      selectData2: '',
      selectData3: {
        value: '',
        label: ''
      },
      inputText1: '',
      inputText2: '',
      check1: false,
      check2: true,
      check3: true,
      radio1: '2',
      radioList: [
        {
          value: '1',
          label: 'radio1'
        },
        {
          value: '2',
          label: 'radio2',
          disabled: true
        },
        {
          value: '3',
          label: 'radio3'
        },
      ],
      tabList1: [
        {name: 'tab1'},
        {name: 'tab2'},
        {name: 'tab3'},
        {name: 'tab4'},
        {name: 'tab5'},
        {name: 'tab6'},
      ],
      tabList2: [
        {name:'图标'},
        {name:'文字'},
        {name:'数字'},
      ],
      selected: [],
      dialogVisible: false, // 对话框开关
      animate: 'fade',  // 对话框动画方式
      toolbarList: [ // toolbar 列表
        {
            title: '文件',
            type: 'file',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '新建',
                            icon: 'new-file',
                            id: '',
                            arrow: true
                        },
                    ]
                },
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '保存',
                            icon: 'save',
                            id: '',
                            arrow: true
                        },
                    ]
                },
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '打开',
                            icon: 'folder-open',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '关闭',
                            icon: 'folder-close',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '退出',
                            icon: 'quit',
                            id: '',
                        },
                    ]
                },
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '打印',
                            icon: 'print',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '帮助',
                            icon: 'help',
                            id: '',
                            arrow: true
                        },
                        {
                            display: 'row',
                            label: '设置',
                            icon: 'setting',
                            id: '',
                        },
                    ]
                },
            ]
        },
        {
            title: '剪切板',
            type: 'clipboard',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '粘贴',
                            icon: 'stickup',
                            id: '',
                            arrow: true
                        }
                    ]
                },
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '复制',
                            icon: 'copy',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '剪切',
                            icon: 'cut',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '删除',
                            icon: 'clean',
                            id: '',
                        },
                    ]
                },
            ]
        },
        {
          title: '文本编辑',
          type: 'text-mode'
        },
        {
            title: '工具栏1',
            options: [
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '还原',
                            icon: 'restore',
                            id: ''
                        },
                        {
                            display: 'row',
                            label: '放大',
                            icon: 'zoom-in',
                            id: ''
                        },
                    ]
                },
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '平移',
                            icon: 'translate-45',
                            id: ''
                        },
                        {
                            display: 'row',
                            label: '缩小',
                            icon: 'zoom-out',
                            id: ''
                        },
                    ]
                },
            ]
        },
        {
            title: '工具栏2',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'large',
                    list: [
                        {
                            display: 'column',
                            label: '粘贴',
                            icon: 'stickup',
                            id: '',
                            arrow: true
                        }
                    ]
                },
                {
                    display: 'column',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'row',
                            label: '复制',
                            icon: 'copy',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '剪切',
                            icon: 'cut',
                            id: '',
                        },
                        {
                            display: 'row',
                            label: '删除',
                            icon: 'clean',
                            id: '',
                        },
                    ]
                },
            ]
        },
        {
            title: '工具栏3',
            options: [
                {
                    display: 'row',
                    showText: true,
                    size: 'small',
                    list: [
                        {
                            display: 'column',
                            label: '运行',
                            icon: 'play',
                            id: '',
                        },
                        {
                            display: 'column',
                            label: '暂停',
                            icon: 'pause',
                            id: '',
                        },
                        {
                            display: 'column',
                            label: '终止',
                            icon: 'stop',
                            id: '',
                        },
                    ]
                },
            ]
        }
      ]
    })
    const dataList = reactive<BaseOptions[]>([{
        label: '周一不开心',
        value: '1',
        children: [
            {label: '不开心1', value: '1-1', children: [{label: '不开心1-1', value: '1-1-1'}]},
            {label: '不开心2', value: '1-2', children: [{label: '不开心2-1', value: '1-2-1'}]},
            {label: '开心3', value: '1-3', children: [{label: '开心1-3-1', value: '1-3-1', children: [{label: '开心1-3-2', value: '1-3-2'}]}]}
        ]
    }])
    const removeTab = (e:Boolean) => {
      console.log(demoRef.tabList1)
    }
    const addTab = () => {
      demoRef.tabList1.push({
        name: 'tab' + (demoRef.tabList1.length + 1)
      })
    }
    const tabClickHandle = (e:Boolean) => {
    }
    const themeChange = () => {
      demoRef.theme = !demoRef.theme
    }
    const switchChange = (e: any) => {
      demoRef.switchLoading = true
      setTimeout(() => {
        demoRef.switchLoading = false
        demoRef.switchActive1 = !demoRef.switchActive1
        demoRef.switchActive5 = !demoRef.switchActive5
      }, 2000)
    }
    const showDialog = (animate: string) => {
      demoRef.animate = animate
      demoRef.dialogVisible = true
    }
    return {
      sliderRef,
      demoRef,
      removeTab,
      addTab,
      tabClickHandle,
      themeChange,
      switchChange,
      dataList,
      showDialog
    }
  }
})
</script>
```