Home Explore Help
Register Sign In
caner
/
termcap
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update

caner 1 year ago
parent
31fd86375a
commit
3af9ac6074
3 changed files with 241 additions and 146 deletions
Unified View Show Diff Stats
  1. 27 136
      src/App.vue
  2. 3 1
      src/components/edit.vue
  3. 211 9
      src/components/head.vue

+ 27 - 136
src/App.vue
View File 

@@ -4,42 +4,15 @@
 
     inline-theme-disabled
 
     inline-theme-disabled
 
   >
 
   >
 
     <div class="box">
 
     <div class="box">
 
-      <!-- <Head /> -->
 
-      <div class="box-top">
 
-        <n-tabs
 
-          ref="tabsRef"
 
-          v-model:value="currentMenu"
 
-          type="card"
 
-          closable
 
-          size="small"
 
-          :tabs-padding="5"
 
-          addable
 
-          @close="close"
 
-          @add="showAdd = true"
 
-          @update:value="updateScrollBar"
 
-        >
 
-          <template
 
-            v-for="(item, index) in tabs"
 
-            :key="index"
 
-          >
 
-            <n-tab-pane :name="item.name">
 
-              <template #tab>
 
-                <Icon
 
-                  :name="item.icon"
 
-                  :size="item.size"
 
-                />
 
-                {{ item.label }}
 
-              </template>
 
-            </n-tab-pane>
 
-          </template>
 
-        </n-tabs>
 
-      </div>
 
-
 
-      <!-- 弹窗 -->
 
-      <n-modal v-model:show="showAdd">
 
-        <Add @call-back="addBack" />
 
-      </n-modal>
 
+      <Head
 
+        v-model:show-add="showAdd"
 
+        v-model:list="tabs"
 
+      />
 
     </div>
 
     </div>
 
+    <!-- 弹窗 -->
 
+    <n-modal v-model:show="showAdd">
 
+      <Add @call-back="addBack" />
 
+    </n-modal>
 
   </n-config-provider>
 
   </n-config-provider>
 
 </template>
 
 </template>
 
 <script setup lang='ts'>
 
 <script setup lang='ts'>
 
@@ -48,74 +21,53 @@ import Head from '@/components/head.vue'
 
 import Add from '@/components/add.vue'
 
 import Add from '@/components/add.vue'
 
 import { FormData } from '@/components/edit.vue'
 
 import { FormData } from '@/components/edit.vue'
 
 
 
-const currentMenu = ref('0')
 
-const tabsRef = ref()
 
+const showAdd = ref(false)
 
 const tabs = ref([
 
 const tabs = ref([
 
   {
 
   {
 
-    name: '0', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '1', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'cmd', size: 14
 
   }, {
 
   }, {
 
-    name: '2', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '3', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '4', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '5', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '6', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '7', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '8', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '9', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }, {
 
   }, {
 
-    name: '10', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '11', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '12', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '13', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '14', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   },
 
   },
 
   {
 
   {
 
-    name: '15', label: 'Home', icon: 'home', size: 15
 
+    label: 'Home', icon: 'home', size: 15
 
   }
 
   }
 
-])
 
-const showAdd = ref(false)
 
-
 
-function close(name: string) {
 
-  if (name === '0') return
 
-  const id = tabs.value.findIndex((v) => name === v.name)
 
-  tabs.value.splice(id, 1)
 
-  if (currentMenu.value === name) currentMenu.value = tabs.value[id - 1].name
 
-}
 
-
 
-// 更新工具条位置
 
-function updateScrollBar(params: string) {
 
-  tabsRef.value.xScrollInstRef.scrollTo({ top: 0, left: +params * 110 - 110, behavior: 'smooth' })
 
-  console.log(123, tabsRef.value, +params * 110)
 
-}
 
+] as FormData[])
 
 
 
 function addBack(params: FormData) {
 
 function addBack(params: FormData) {
 
   console.log('双击返回', params)
 
   console.log('双击返回', params)
 
-  tabs.value.push({
 
-    name: `${tabs.value.length + 1}`, label: params.label, icon: 'host', size: 13
 
-  })
 
-  currentMenu.value = tabs.value[tabs.value.length - 1].name
 
+  tabs.value.push({ ...params })
 
   showAdd.value = false
 
   showAdd.value = false
 
-  setTimeout(() => {
 
-    updateScrollBar(currentMenu.value)
 
-  }, 0)
 
 }
 
 }
 
 
 
 onMounted(() => {
 
 onMounted(() => {
 
@@ -126,66 +78,5 @@ onMounted(() => {
 
 .box {
 
 .box {
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100vh;
 
   height: 100vh;
 
-
 
-  &-top {
 
-    background: var(--background-color);
 
-    -webkit-app-region: drag;
 
-
 
-    :deep(.n-tabs) {
 
-      --n-tab-border-radius: 8px;
 
-      --n-tab-gap: 5px;
 
-      --n-tab-text-color: var(--font-color);
 
-      // height: 100%;
 
-      // width: 100%;
 
-      margin: 0 auto;
 
-      -webkit-app-region: no-drag;
 
-      // padding: 0 70px;
 
-      padding-left: 70px;
 
-
 
-      .n-tabs-tab {
 
-        min-width: 100px;
 
-        text-indent: 5px;
 
-        padding: 3px 5px !important;
 
-        overflow: hidden;
 
-        user-select: none;
 
-
 
-        &--active {
 
-          position: relative;
 
-          background: var(--background-color) !important;
 
-          color: var(--font-color) !important;
 
-        }
 
-
 
-        &--addable {
 
-          min-width: auto;
 
-          text-indent: 0;
 
-        }
 
-
 
-        &-wrapper {
 
-          padding-top: 5px;
 
-        }
 
-
 
-      }
 
-
 
-      // .n-tab-pane {
 
-      //   height: calc(100% - 34px);
 
-      //   padding: 0;
 
-      // }
 
-
 
-      .n-tabs-pad {
 
-        -webkit-app-region: drag;
 
-      }
 
-
 
-      .n-tabs-wrapper{
 
-        max-width: 80%;
 
-      }
 
-
 
-      // .n-tabs-nav-scroll-content {
 
-      //   padding-left: 70px;
 
-      //   // margin-right: 70px;
 
-      //   // min-width: unset;
 
-      //   // width: 100%;
 
-      // }
 
-    }
 
-  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 3 - 1
src/components/edit.vue
View File 

@@ -106,7 +106,9 @@ export interface FormData {
 
   port: string,
 
   port: string,
 
   label: string,
 
   label: string,
 
   userName: string,
 
   userName: string,
 
-  password: string
 
+  password: string,
 
+  icon?:string,
 
+  size?:number
 
 }
 
 }
 
 const props = withDefaults(defineProps<{
 
 const props = withDefaults(defineProps<{
 
   data?:FormData
 
   data?:FormData

+ 211 - 9
src/components/head.vue
View File 

@@ -1,17 +1,219 @@
 
 <template>
 
 <template>
 
-  <div class="head" />
 
+  <div class="head">
 
+    <div class="head-items">
 
+      <template
 
+        v-for="(item, index) in list"
 
+        :key="index"
 
+      >
 
+        <div
 
+          class="head-items-item"
 
+          :class="{ active: index === selectKey }"
 
+          @click="check(index)"
 
+        >
 
+          <div>
 
+            <div>
 
+              <Icon
 
+                :name="item.icon"
 
+                :size="item.size"
 
+              />
 
+              {{ item.label }}
 
+            </div>
 
+            <Icon
 
+              name="close"
 
+              :size="12"
 
+              @click="close"
 
+            />
 
+          </div>
 
+        </div>
 
+      </template>
 
+    </div>
 
+    <div
 
+      class="head-add"
 
+      @click="emit('update:showAdd',true)"
 
+    >
 
+      <Icon
 
+        name="add"
 
+        :size="15"
 
+      />
 
+    </div>
 
+  </div>
 
 </template>
 
 </template>
 
+<script setup lang='ts'>
 
+import { ref } from 'vue'
 
+import { FormData } from '@/components/edit.vue'
 
 
 
+const props = withDefaults(defineProps<{
 
+  showAdd?:boolean,
 
+  list:FormData[]
 
+}>(), {
 
+  showAdd: false,
 
+  list: () => []
 
+})
 
+
 
+const emit = defineEmits<{
 
+  (evt: 'update:showAdd', value: boolean): void,
 
+  (evt: 'update:list', value: FormData[]): void,
 
+
 
+}>()
 
+
 
+// const tabs = ref([
 
+//   {
 
+//     name: '0', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '1', label: 'Home', icon: 'cmd', size: 14
 
+//   }, {
 
+//     name: '2', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '3', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '4', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '5', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '6', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '7', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '8', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '9', label: 'Home', icon: 'home', size: 15
 
+//   }, {
 
+//     name: '10', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '11', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '12', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '13', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '14', label: 'Home', icon: 'home', size: 15
 
+//   },
 
+//   {
 
+//     name: '15', label: 'Home', icon: 'home', size: 15
 
+//   }
 
+// ])
 
+const selectKey = ref(0)
 
+
 
+function check(id: number) {
 
+  selectKey.value = id
 
+}
 
+
 
+function close(id: number) {
 
+  // tabs.value.splice(id, 1)
 
+  console.log(1)
 
+}
 
+
 
+</script>
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
 .head {
 
 .head {
 
-    width: 100%;
 
-    height: 40px;
 
-    user-select: none;
 
-    text-shadow: 0px -2px -4px var(--shadow-color);
 
-    -webkit-app-region: drag;
 
+  width: 100%;
 
+  height: 38px;
 
+  user-select: none;
 
+  text-shadow: 0px -2px -4px var(--shadow-color);
 
+  -webkit-app-region: drag;
 
+  display: flex;
 
+  align-items: flex-end;
 
+  background: #ccc;
 
+  overflow: hidden;
 
+  color: var(--font-color);
 
+
 
+  &-items {
 
+    max-width: 85%;
 
+    margin-left: 70px;
 
     display: flex;
 
     display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    background: #353739;
 
+    align-items: flex-end;
 
+    overflow-x: auto;
 
+    -webkit-app-region: no-drag;
 
+    padding: 0 12px;
 
+
 
+    /* 隐藏滚动条 */
 
+    &::-webkit-scrollbar {
 
+      width: 0 !important;
 
+      display: none;
 
+    }
 
+
 
+    &-item {
 
+      height: 34px;
 
+      font-size: 13px;
 
+      color: var(--font-color);
 
+      padding: 6px 8px 0 8px;
 
+      position: relative;
 
+
 
+      &>div {
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: space-between;
 
+
 
+        &>svg {
 
+          margin-top: 2px;
 
+          margin-left: 3px;
 
+          cursor: pointer;
 
+        }
 
+
 
+        &>div {
 
+          display: flex;
 
+          align-items: center;
 
+
 
+          &>svg {
 
+            margin-right: 3px;
 
+          }
 
+        }
 
+      }
 
+
 
+      &::after {
 
+        content: '';
 
+        height: 15px;
 
+        width: 2px;
 
+        border-radius: 3px;
 
+        background: #ddd;
 
+        position: absolute;
 
+        right: -2px;
 
+        top: 50%;
 
+        transform: translate(0, -50%);
 
+      }
 
+    }
 
+
 
+    .active {
 
+      background: white;
 
+      border-radius: 8px 8px 0 0;
 
+      position: relative;
 
+      box-shadow: 8px 8px 0 0 #ffffff, -8px 8px 0 0 #ffffff;
 
+
 
+      &::before {
 
+        content: '';
 
+        position: absolute;
 
+        left: -8px;
 
+        bottom: 0;
 
+        width: 8px;
 
+        height: 33px;
 
+        background: #ccc;
 
+        border-radius: 0 0 8px 0;
 
+      }
 
+
 
+      &::after {
 
+        content: '';
 
+        position: absolute;
 
+        right: -8px;
 
+        bottom: 0;
 
+        width: 8px;
 
+        height: 33px;
 
+        background: #ccc;
 
+        border-radius: 0 0 0 8px;
 
+      }
 
+
 
+    }
 
+  }
 
+
 
+  &-add {
 
+    height: 70%;
 
+    margin-left: 5px;
 
+    -webkit-app-region: no-drag;
 
+    cursor: pointer;
 
+  }
 
 }
 
 }
 
 </style>
 
 </style>