Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+yarn.lock
+components.d.ts
 
 # Editor directories and files
 .vscode

src/components/Table/index.module.less

@@ -0,0 +1,45 @@
+.jtable-body {
+    width: 100%;
+    padding: 0 24px 24px;
+    background-color: white;
+    .jtable-body-header {
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .jtable-body-header-right {
+            display: flex;
+            gap: 8px;
+            .jtable-setting-item {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: @primary-color-hover;
+                }
+
+                &.active {
+                    color: @primary-color-active;
+                }
+            }
+        }
+    }
+    .jtable-content {
+        .jtable-card {
+            .jtable-card-items {
+                display: grid;
+                grid-gap: 26px;
+                // grid-template-columns: repeat(4, 1fr);
+                .jtable-card-item {
+                    display: flex;
+                }
+            }
+        }
+    }
+    .jtable-pagination {
+        position: absolute;
+        right: 24px;
+        bottom: 24px;
+    }
+}   

src/components/Table/index.tsx

@@ -0,0 +1,163 @@
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+import styles from './index.module.less'
+import { Space, Pagination, Table, Empty } from 'ant-design-vue'
+import type { TableProps } from 'ant-design-vue/es/table'
+enum ModelEnum {
+    TABLE = 'TABLE',
+    CARD = 'CARD',
+}
+
+export declare type RequestData = {
+    code: string;
+    result: {
+        data: any[] | undefined;
+        pageIndex: number;
+        pageSize: number;
+        total: number;
+    };
+    status: number;
+} & Record<string, any>;
+// interface ColumnType extends 
+
+interface JTableProps extends TableProps{
+    // columns?: ColumnsType<RecordType>;
+    request: (params: Record<string, any> & {
+        pageSize?: number;
+        pageIndex?: number;
+    }) => Promise<Partial<RequestData>>;
+    cardBodyClass?: string;
+}
+
+
+const JTable = defineComponent<JTableProps>({
+    name: 'JTable',
+    slots: [
+        'headerTitle', // 顶部左边插槽
+        'cardRender', // 卡片内容
+    ],
+    emits: [
+        'modelChange', // 切换卡片和表格
+    ],
+    setup(props: JTableProps, { slots, emit }){
+        const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
+        const column = ref<number>(3);
+        console.log(props)
+        const dataSource = ref<any[]>([
+            {
+              key: '1',
+              name: '胡彦斌',
+              age: 32,
+              address: '西湖区湖底公园1号',
+            },
+            {
+              key: '2',
+              name: '胡彦祖1',
+              age: 42,
+              address: '西湖区湖底公园1号',
+            },
+            {
+                key: '3',
+                name: '胡彦斌',
+                age: 32,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '4',
+                name: '胡彦祖1',
+                age: 42,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '5',
+                name: '胡彦斌',
+                age: 32,
+                address: '西湖区湖底公园1号',
+              },
+              {
+                key: '6',
+                name: '胡彦祖1',
+                age: 42,
+                address: '西湖区湖底公园1号',
+              },
+        ])
+
+        onMounted(() => {
+
+        })
+        
+        return () => <div class={styles["jtable-body"]}>
+            <div class={styles["jtable-body-header"]}>
+                <div class={styles["jtable-body-header-left"]}>
+                    {/* 顶部左边插槽 */}
+                    {slots.headerTitle && slots.headerTitle()}
+                </div>
+                <div class={styles["jtable-body-header-right"]}>
+                    {/* <Space> */}
+                        <div class={[styles["jtable-setting-item"], ModelEnum.CARD === model.value ? styles['active'] : '']} onClick={() => {
+                            model.value = ModelEnum.CARD
+                        }}>
+                            <AppstoreOutlined />
+                        </div>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === model.value ? styles['active'] : '']} onClick={() => {
+                            model.value = ModelEnum.TABLE
+                        }}>
+                            <UnorderedListOutlined  />
+                        </div>
+                    {/* </Space> */}
+                </div>
+            </div>
+            {/* content */}
+            <div class={styles['jtable-content']}>
+            {
+                model.value === ModelEnum.CARD ?
+                <div class={styles['jtable-card']}>
+                    {
+                        dataSource.value.length ? 
+                        <div 
+                            class={styles['jtable-card-items']}
+                            style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
+                        >
+                            {
+                                dataSource.value.map(item => slots.cardRender ? 
+                                    <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.cardRender(item)}</div>
+                                    : null)
+                            }
+                        </div> : 
+                        <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
+                    }
+                </div> :
+                <div>
+                    <Table
+                        dataSource={dataSource.value}
+                        columns={props.columns}
+                        pagination={false}
+                    />
+                </div>
+            }
+            </div>
+            {/* 分页 */}
+            {
+                dataSource.value.length && 
+                <div class={styles['jtable-pagination']}>
+                    <Pagination 
+                        size="small" 
+                        total={50}
+                        showTotal={(total) => {
+                            const min  = 1
+                            const max = 1
+                            return `第 ${min} - ${max} 条/总共 ${total} 条`
+                        }}
+                        onChange={() => {
+
+                        }}
+                        onShowSizeChange={() => {
+
+                        }}
+                    />
+                </div>
+            }
+        </div>
+    }
+})
+
+export default JTable

src/components/TitleComponent/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="title">
+    <div class="title-before"></div>
+    <span>{{ data }}</span>
+    <slot name="extra"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TitleComponent",
+  props: {
+    data: {
+        type: String,
+        default: ""
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: 600;
+  font-size: 16px;
+}
+.title-before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: calc(100% - 2px);
+  background-color: @primary-color;
+  border-radius: 0 3px 3px 0;
+}
+</style>

src/components/index.ts

@@ -1,10 +1,14 @@
 import type { App } from 'vue'
 import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
+import JTable from './Table/index'
+import TitleComponent from "./TitleComponent/index.vue";
 
 export default  {
     install(app: App) {
         app.component('AIcon', AIcon)
         app.component('PermissionButton', PermissionButton)
+        app.component('JTable', JTable)
+        app.component('TitleComponent', TitleComponent)
     }
 }

src/router/menu.ts

@@ -36,8 +36,13 @@ export default [
         path: '/iot/home',
         component: () => import('@/views/iot/home/index.vue')
     },
+    {
+        path: '/table',
+        component: () => import('@/views/table/index.vue')
+    },
     // end: 测试用, 可删除
 
+    // link 运维管理
     {
         path: '/link/log',
         component: () => import('@/views/link/Log/index.vue')
@@ -50,4 +55,8 @@ export default [
         path: '/link/certificate/detail/add',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
+    {
+        path: '/link/accessConfig/detail/add',
+        component: () => import('@/views/link/AccessConfig/Detail/index.vue')
+    },
 ]

src/utils/request.ts

@@ -162,7 +162,7 @@ request.interceptors.request.use(config => {
     // 让每个请求携带自定义 token 请根据实际情况自行修改
     const token = LocalStore.get(TOKEN_KEY)
     // const token = store.$state.tokenAlias
-    if (token) {
+    if (!token) {
         setTimeout(() => {
             router.replace({
                 path: LoginPath

src/views/link/AccessConfig/Detail/data.ts

@@ -0,0 +1,99 @@
+const MetworkTypeMapping = new Map();
+MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
+MetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
+MetworkTypeMapping.set('udp-device-gateway', 'UDP');
+MetworkTypeMapping.set('coap-server-gateway', 'COAP_SERVER');
+MetworkTypeMapping.set('mqtt-client-gateway', 'MQTT_CLIENT');
+MetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
+MetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
+
+const ProcotoleMapping = new Map();
+ProcotoleMapping.set('websocket-server', 'WebSocket');
+ProcotoleMapping.set('http-server-gateway', 'HTTP');
+ProcotoleMapping.set('udp-device-gateway', 'UDP');
+ProcotoleMapping.set('coap-server-gateway', 'CoAP');
+ProcotoleMapping.set('mqtt-client-gateway', 'MQTT');
+ProcotoleMapping.set('mqtt-server-gateway', 'MQTT');
+ProcotoleMapping.set('tcp-server-gateway', 'TCP');
+ProcotoleMapping.set('child-device', '');
+
+const descriptionList = {
+    'udp-device-gateway':
+        'UDP可以让设备无需建立连接就可以与平台传输数据。在允许一定程度丢包的情况下，提供轻量化且简单的连接。',
+    'tcp-server-gateway':
+        'TCP服务是一种面向连接的、可靠的、基于字节流的传输层通信协议。设备可通过TCP服务与平台进行长链接，实时更新状态并发送消息。可自定义多种粘拆包规则，处理传输过程中可能发生的粘拆包问题。',
+    'websocket-server':
+        'WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。设备通过WebSocket服务与平台进行长链接，实时更新状态并发送消息，且可以发布订阅消息',
+    'mqtt-client-gateway':
+        'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。平台使用指定的ID接入其他远程平台，订阅消息。也可添加用户名和密码校验。可设置最大消息长度。可统一设置共享的订阅前缀。',
+    'http-server-gateway':
+        'HTTP服务是一个简单的请求-响应的基于TCP的无状态协议。设备通过HTTP服务与平台进行灵活的短链接通信，仅支持设备和平台之间单对单的请求-响应模式',
+    'mqtt-server-gateway':
+        'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。提供MQTT的服务端，以供设备以长链接的方式接入平台。设备使用唯一的ID，也可添加用户名和密码校验。可设置最大消息长度。',
+    'coap-server-gateway':
+        'CoAP是针对只有少量的内存空间和有限的计算能力提供的一种基于UDP的协议。便于低功耗或网络受限的设备与平台通信，仅支持设备和平台之间单对单的请求-响应模式。',
+};
+
+const columnsMQTT = [
+    {
+        title: '分组',
+        dataIndex: 'group',
+        key: 'group',
+        ellipsis: true,
+        align: 'center',
+        width: 100,
+        scopedSlots: { customRender: 'group' },
+    },
+    {
+        title: 'topic',
+        dataIndex: 'topic',
+        key: 'topic',
+        scopedSlots: { customRender: 'topic' },
+    },
+    {
+        title: '上下行',
+        dataIndex: 'stream',
+        key: 'stream',
+        ellipsis: true,
+        align: 'center',
+        width: 100,
+        scopedSlots: { customRender: 'stream' },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        scopedSlots: { customRender: 'description' },
+    },
+]
+
+const columnsHTTP = [
+    {
+        title: '分组',
+        dataIndex: 'group',
+        key: 'group',
+        ellipsis: true,
+        width: 100,
+        scopedSlots: { customRender: 'group' },
+      },
+      {
+        title: '地址',
+        dataIndex: 'address',
+        key: 'address',
+        scopedSlots: { customRender: 'address' },
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        key: 'example',
+        scopedSlots: { customRender: 'example' },
+      },
+      {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        scopedSlots: { customRender: 'description' }
+      },
+]
+
+export { MetworkTypeMapping, ProcotoleMapping, descriptionList, columnsMQTT, columnsHTTP };

src/views/link/AccessConfig/Detail/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <a-card :bordered="false">
+        <TitleComponent data="自定义设备接入"></TitleComponent>
+        <div>
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12" v-for="item in items" :key="item.id">
+                    <div class="provider">
+                        <div class="box">
+                            <div class="left">
+                                <div class="images">
+                                    <img :src="backMap.get(item.id)" />
+                                </div>
+                                <div class="context">
+                                    <div class="title">{{ item.name }}</div>
+                                    <div class="desc">
+                                        <a-tooltip :title="item.description">
+                                            {{ item.description || '' }}
+                                        </a-tooltip>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <a-button
+                                    type="primary"
+                                    @click="goProviders(item)"
+                                    >接入</a-button
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+    </a-card>
+</template>
+
+<script lang="ts" setup name="AccessConfigDetail">
+import { getImage } from '@/utils/comm';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+const items = [
+    { id: 'mqtt-server-gateway', name: '测试1', description: '测试1' },
+    { id: 'websocket-server', name: '测试2', description: '测试' },
+    { id: 'coap-server-gateway', name: '测试3', description: '测试' },
+];
+
+const backMap = new Map();
+backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
+backMap.set('websocket-server', getImage('/access/websocket.png'));
+backMap.set('coap-server-gateway', getImage('/access/coap.png'));
+backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
+backMap.set('child-device', getImage('/access/child-device.png'));
+backMap.set('http-server-gateway', getImage('/access/http.png'));
+backMap.set('udp-device-gateway', getImage('/access/udp.png'));
+backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
+
+const goProviders = (value: object) => {
+    console.log(111, value);
+};
+</script>
+
+<style lang="less" scoped>
+.provider {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+    background: url('/public/images/access/background.png') no-repeat;
+    background-size: 100% 100%;
+    border: 1px solid #e6e6e6;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 40px;
+        display: block;
+        width: 15%;
+        min-width: 64px;
+        height: 2px;
+        background-image: url('/public/images/access/rectangle.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        // border: 1px #8da1f4 solid;
+        // border-bottom-left-radius: 10%;
+        // border-bottom-right-radius: 10%;
+        content: ' ';
+    }
+
+    &:hover {
+        box-shadow: 0 0 24px rgba(#000, 0.1);
+    }
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .left {
+        display: flex;
+        width: calc(100% - 70px);
+        .images {
+            width: 64px;
+            height: 64px;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .context {
+            width: calc(100% - 84px);
+            margin: 10px;
+
+            .title {
+                font-weight: 600;
+            }
+
+            .desc {
+                width: 100%;
+                margin-top: 10px;
+                overflow: hidden;
+                color: rgba(0, 0, 0, 0.55);
+                font-weight: 400;
+                font-size: 13px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .right {
+        width: 70px;
+    }
+}
+</style>

src/views/link/AccessConfig/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-button type="primary" @click="handlAdd">新增</a-button>
+</template>
+<script lang="ts" setup name="AccessConfigPage">
+
+const handlAdd = (e: any) => {
+  console.log(111,e);
+  
+}
+
+</script>

src/views/table/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="box">
+        <JTable 
+            :columns="[
+                {
+                    title: '姓名',
+                    dataIndex: 'name',
+                    key: 'name',
+                },
+                {
+                    title: '年龄',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '住址',
+                    dataIndex: 'address',
+                    key: 'address',
+                }
+            ]"
+        >
+            <template #headerTitle>
+                <a-button type="primary">新增</a-button>
+            </template>
+            <template #cardRender="slotProps">
+                {{slotProps.name}}
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { post } from "@/utils/request";
+// :request="post('/device-product/_query', {})"
+</script>
+
+
+<style lang="less" scoped>
+.box {
+    padding: 20px;
+    background: #f0f2f5;
+}
+</style>
+

src/views/user/Login/index.vue

@@ -121,7 +121,19 @@
                                         style="position: 'relative', bottom: '10px'"
                                         v-for="(item, index) in bindings"
                                         :key="index"
-                                    ></div>
+                                    >
+                                        <Button type="link" @Click="handle">
+                                            <img
+                                                style="width: 32, height: 33"
+                                                :alt="item.name"
+                                                :src="
+                                                    iconMap.get(
+                                                        item.provider,
+                                                    ) || defaultImg
+                                                "
+                                            />
+                                        </Button>
+                                    </div>
                                 </div>
                             </div>
                         </div>

vite.config.ts

@@ -79,7 +79,7 @@ export default defineConfig(({ mode}) => {
                 //   target: 'http://47.112.135.104:5096', // opcua
                   target: 'http://47.108.63.174:8845', // 测试
                   changeOrigin: true,
-                  rewrite: (path) => path.replace('^'+env.VITE_APP_BASE_API, '')
+                  rewrite: (path) => path.replace(/^\/api/, '')
               }
           }
       },