perfect_view_connectDialog

src/styles/tdesign.css

@@ -23,7 +23,7 @@
   }
 
   .t-input__inner::-webkit-input-placeholder {
-    color: transparent;
+    /* color: transparent; */
   }
 }
 
@@ -411,7 +411,7 @@
   }
 }
 
-.t-popup[data-popper-placement^='top'] .t-popup__arrow::before {
+.t-popup[data-popper-placement^="top"] .t-popup__arrow::before {
   top: -4px;
 }
 
@@ -452,14 +452,3 @@
 .t-divider--horizontal {
   margin: 0;
 }
-
-.t-dialog {
-  label {
-    font-size: 10px;
-    background-color: #ff400030;
-    color: var(--color-bland);
-    padding: 0 6px;
-    margin-left: 4px;
-    border-radius: 2px;
-  }
-}

src/views/components/Graphics.vue

@@ -157,7 +157,7 @@ const groupChange = async (name: string) => {
     case "场景":
       showList.value = [];
       break;
-    case "模版":
+    case "模板":
       showList.value = [];
       break;
     case "图表":

src/views/components/View.vue

@@ -28,7 +28,9 @@
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
           >
-            <defs><path id="77456364" d="M0 0h256v256H0z"></path></defs>
+            <defs>
+              <path id="77456364" d="M0 0h256v256H0z"></path>
+            </defs>
             <g fill="none" fill-rule="evenodd">
               <mask id="3804093554b" fill="#fff">
                 <use xlink:href="#77456364"></use>
@@ -258,44 +260,91 @@
       width="800px"
       header="数据源管理"
       v-model:visible="connectVisible"
-      @confirm="comConfirm"
+      :footer="false"
     >
       <t-tabs :default-value="1">
         <t-tab-panel :value="1" label="通信" :destroy-on-hide="false">
           <template #panel>
-            <t-row class="mt-8" justify="end">
-              <t-space :size="8">
-                <t-input placeholder="搜索我的数据源">
-                  <template #suffixIcon>
-                    <icon name="search"></icon>
-                    <!-- <search-icon :style="{ cursor: 'pointer' }" /> -->
-                  </template>
-                </t-input>
-                <t-button style="height: 30px">添加数据源</t-button>
-              </t-space>
-            </t-row>
-            <t-table
-              class="mt-8"
-              row-key="id"
-              :data="comData"
-              :columns="comColumns"
-            >
-              <template #operation="{ row }">
-                <t-link theme="primary" hover="color" @click="editCom(row)">
-                  编辑
-                </t-link>
-                <t-divider layout="vertical" />
-                <t-link theme="primary" hover="color" @click="deleteCom(row)">
-                  删除
-                </t-link>
-              </template>
-            </t-table>
-            <!-- <p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p> -->
+            <div v-show="comShow">
+              <t-row class="mt-8" justify="end">
+                <t-space :size="8">
+                  <t-select-input
+                    placeholder="搜索我的数据源"
+                    allow-input
+                    clearable
+                    :popup-visible="popupVisible"
+                    :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
+                    @input-change="onInputChange"
+                    @popup-visible-change="onPopupVisibleChange"
+                  >
+                    <template #panel>
+                      <ul>
+                        <li
+                          style="line-height: 14px; margin: 8px 4px"
+                          v-for="item in comOptions"
+                          :key="item.addr"
+                          @click="() => onOptionClick(item)"
+                        >
+                          名称: {{ item.name }}<br />
+                          地址: {{ item.addr }}
+                        </li>
+                      </ul>
+                    </template>
+                    <template #suffixIcon>
+                      <t-icon name="search"></t-icon
+                    ></template>
+                  </t-select-input>
+                  <t-button style="height: 30px">添加数据源</t-button>
+                </t-space>
+              </t-row>
+              <t-table
+                class="mt-8"
+                row-key="id"
+                :data="comData"
+                :columns="comColumns"
+              >
+                <template #operation="{ row, rowIndex }">
+                  <t-link theme="primary" hover="color" @click="editCom(row)">
+                    编辑
+                  </t-link>
+                  <t-divider layout="vertical" />
+                  <t-popconfirm
+                    content="确认删除吗"
+                    @confirm="deleteCom(rowIndex)"
+                  >
+                    <t-link theme="primary" hover="color"> 删除 </t-link>
+                  </t-popconfirm>
+                </template>
+              </t-table>
+              <!-- <p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p> -->
+            </div>
+            <div v-show="!comShow">
+              <t-button theme="primary" variant="text" ghost @click="comBack">
+                <template #icon>
+                  <t-icon name="rollback"></t-icon>
+                </template>
+                返回
+              </t-button>
+              <div class="form-item">
+                <label>名称</label>
+                <t-input v-model="com.name" class="ml-8" style="width: 200px" />
+              </div>
+              <div class="form-item">
+                <label>连接类型</label>
+                <t-input v-model="com.type" class="ml-8" style="width: 200px" />
+              </div>
+              <div class="form-item">
+                <label>接口地址</label>
+                <t-input v-model="com.addr" class="ml-8" style="width: 200px" />
+              </div>
+              <t-button theme="primary">仅当前页面使用</t-button>
+              <t-button theme="primary">保存到服务器</t-button>
+            </div>
           </template>
         </t-tab-panel>
         <t-tab-panel :value="2" :destroy-on-hide="false">
           <template #label
-            >数据集 <span><label>VIP</label></span></template
+            >数据集 <span><label class="vip-label">VIP</label></span></template
           >
           <template #panel>
             <t-row class="mt-8" style="height: 32px; line-height: 32px">
@@ -792,24 +841,31 @@ const changeContextMenuVisible = (e: boolean) => {
   contextMenuVisible.value = e;
 };
 
-const comConfirm = () => {
-  connectVisible.value = false;
-};
-const comData = ref([
+// const comConfirm = () => {
+//   connectVisible.value = false;
+// };
+
+interface Com {
+  name?: string;
+  type: "mqtt" | "websocket" | "http";
+  addr: string;
+}
+
+const comData = ref<Com[]>([
   {
     name: "连接1",
     type: "mqtt",
-    addr: "wss://",
+    addr: "wss://1",
   },
   {
     name: "连接2",
     type: "mqtt",
-    addr: "wss://",
+    addr: "wss://2",
   },
   {
     name: "连接3",
     type: "mqtt",
-    addr: "wss://",
+    addr: "wss://3",
   },
 ]);
 const comColumns = ref([
@@ -831,6 +887,65 @@ const comColumns = ref([
   { colKey: "operation", title: "操作", width: 120, foot: "-" },
 ]);
 
+const comOptions = ref<Com[]>([
+  {
+    name: "连接A",
+    type: "mqtt",
+    addr: "ws://A",
+  },
+  {
+    name: "连接B",
+    type: "mqtt",
+    addr: "ws://B",
+  },
+  {
+    name: "连接C",
+    type: "mqtt",
+    addr: "ws://C",
+  },
+  {
+    name: "连接D",
+    type: "mqtt",
+    addr: "ws://D",
+  },
+  {
+    name: "连接E",
+    type: "mqtt",
+    addr: "ws://E",
+  },
+]);
+
+const onOptionClick = (item: Com) => {
+  comData.value.push(item);
+  popupVisible.value = false;
+};
+
+const popupVisible = ref(false);
+const onInputChange = () => {};
+const onPopupVisibleChange = (val: boolean) => {
+  popupVisible.value = val;
+};
+const editCom = (row: Com) => {
+  com.value = row;
+  comShow.value = false;
+};
+
+const deleteCom = (index: number) => {
+  comData.value.splice(index, 1);
+};
+
+const comShow = ref(true);
+
+const comBack = () => {
+  comShow.value = true;
+};
+
+const com = ref<Com>({
+  name: "连接E",
+  type: "mqtt",
+  addr: "ws://E",
+});
+
 const dsData = ref([]);
 
 const dsColumns = ref([
@@ -873,10 +988,12 @@ const dsColumns = ref([
       padding: 0 10px;
       color: var(--color);
       text-decoration: none;
+
       .l-icon {
         width: 16px;
         height: 16px;
       }
+
       &:hover {
         color: var(--color-primary);
       }
@@ -890,9 +1007,27 @@ const dsColumns = ref([
   #meta2d {
     border-top: 1px solid var(--color-background-input);
     height: calc(100vh - 81px);
+
     :deep(.meta2d-map) {
       background: var(--color-background);
     }
   }
 }
 </style>
+
+<style lang="postcss">
+
+.t-dialog {
+  .form-item{
+  display: flex;
+}
+  .vip-label {
+    font-size: 10px;
+    background-color: #ff400030;
+    color: var(--color-bland);
+    padding: 0 6px;
+    margin-left: 4px;
+    border-radius: 2px;
+  }
+}
+</style>