update

src/App.vue

@@ -1,20 +1,145 @@
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb } from 'naive-ui'
-import type { stats, file, directory } from '@/types/type.ts'
-import VirtualDirectory from '@/class/virtualDirectory';
-// import test from './hooks/test.ts';
+import { onMounted, reactive } from 'vue';
+import { NIcon } from 'naive-ui';
+import { EyeOffOutline, EyeOutline, CloseOutline, AddOutline } from '@vicons/ionicons5'
+import miaoDirectory from './views/miaoDirectory.vue';
+import VirtualPage from './class/virtualPage';
 
-const testData: string[] = ['111', '222', '333']
+const views = reactive<VirtualPage[]>([])
 
+const createView = () => {
+  views.push(reactive<VirtualPage>(new VirtualPage()))
+}
+
+const deleteView = (index: number) => {
+  views.splice(index, 1)
+  if(views.length === 0){
+    createView()
+  }
+}
+
+onMounted(() => {
+  createView()
+})
 </script>
 
 <template>
-  <n-breadcrumb separator=">">
-    <n-breadcrumb-item v-for="(title, index) in testData">
-      {{ title }}
-    </n-breadcrumb-item>
-  </n-breadcrumb>
-    <div>miao</div>
+	<div class="view-controler">
+		<div class="tag" v-for="(view, index) of views" :key="view.uid">
+			<div class="tag-title">{{ view.title }}</div>
+			<div class="tag-control">
+				<n-icon class="tag-control-icon icon" @click="view.switchShow()">
+					<EyeOutline v-show="view.visible" class="icon-inner" />
+					<EyeOffOutline v-show="!view.visible" class="icon-inner" />
+				</n-icon>
+				<n-icon class="tag-control-icon icon" @click="deleteView(index)">
+					<CloseOutline class="icon-inner" />
+				</n-icon>
+			</div>
+		</div>
+		<div class="tag-short">
+			<n-icon class="icon icon-larger" @click="createView()" size="20">
+				<AddOutline class="icon-inner" />
+			</n-icon>
+		</div>
+	</div>
+	<div class="view-container">
+		<div class="view" v-for="(view) of views" v-show="view.visible" :key="view.uid">
+			<!-- title: {{ view.title }} -->
+			<miao-directory @on-title-change="(_t) => view.setTitle(_t)"></miao-directory>
+		</div>
+	</div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+$controler-height: 25px;
+
+.view-controler {
+  display: flex;
+  height: $controler-height;
+  width: 100%;
+  overflow: hidden;
+
+  .tag-short {
+    position: relative;
+    // margin-left: 5px;
+    height: $controler-height;
+    width:  $controler-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tag {
+    position: relative;
+    width: 170px;
+    // flex: 1;
+    margin: 0 5px;
+    display: flex;
+    border-radius: 5px 5px 0 0;
+    align-items: center;
+
+    &::after {
+      content: '';
+      height: calc($controler-height*0.6);
+      width: 1px;
+      border-right: 1px solid black;
+      position: absolute;
+      right: 0px;
+    }
+
+    .tag-title {
+      margin-left: 4px;
+      width: 70%;
+      user-select: none;
+    }
+
+    .tag-control {
+      position: absolute;
+      right: 10px;
+      display: flex;
+      align-items: center;
+
+
+
+      .tag-control-icon:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .icon {
+    height: calc($controler-height * 0.7);
+    width: calc($controler-height * 0.7);
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: rgba(128, 128, 128, 0);
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.4);
+    }
+  }
+
+  .icon-larger {
+    height: calc($controler-height * 0.85);
+    width: calc($controler-height * 0.85);
+  }
+}
+
+.view-container {
+  position: relative;
+  display: flex;
+  height: calc(100% - $controler-height);
+
+  .view {
+    border: 1px solid black;
+    margin: 0 5px;
+    padding: 3px;
+    flex: 1;
+  }
+}
+</style>