Layout Navigation on Safari app & Improve Input component

src/components/Button/index.vue

@@ -33,7 +33,7 @@ const props = defineProps<{
   bg?: boolean
   // 是否禁用按钮
   disabled?: boolean
-  // 按钮尺寸
+  // 尺寸
   size?: 'large' | 'huge'
 }>()
 
@@ -57,7 +57,7 @@ const handleClick = () => {
   background-color: transparent;
   // 字体
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.9);
   // 布局
   display: inline-flex;
   justify-content: center;

src/components/Input/index.vue

@@ -1,7 +1,25 @@
 <template>
-  <div class="input">
-    <span class="input-icon mgc_mic_fill"></span>
-    <input type="text" :placeholder="props.placeholder" />
+  <div
+    :class="['input', props.round ? 'is-round' : '', props.size === 'large' ? 'is-large' : '']"
+    :style="{ width: props.width + 'px' }"
+  >
+    <!-- 前缀插槽 -->
+    <slot name="prefix"></slot>
+
+    <div class="input-inner">
+      <!-- <span class="input-icon mgc_mic_fill"></span> -->
+      <span :class="['input-icon', props.icon ? 'mgc_' + props.icon : '']"></span>
+      <input
+        type="text"
+        :placeholder="props.placeholder"
+        :value="modelValue"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        :class="[props.center ? 'is-center' : '']"
+      />
+    </div>
+
+    <!-- 后缀插槽 -->
+    <slot name="suffix"></slot>
   </div>
 </template>
 
@@ -12,8 +30,23 @@ defineOptions({
 
 // 接收参数
 const props = defineProps<{
+  // 占位符
   placeholder?: string
+  // 宽度
+  width?: number
+  // 是否圆角
+  round?: boolean
+  // 尺寸
+  size?: 'large'
+  // 双向绑定值
+  modelValue?: string
+  // 输入框图标
+  icon?: string
+  // 是否居中
+  center?: boolean
 }>()
+
+const emit = defineEmits(['update:modelValue'])
 </script>
 
 <style scoped lang="scss">
@@ -25,30 +58,66 @@ const props = defineProps<{
   // 布局
   display: flex;
   align-items: center;
+  justify-content: space-between;
+
+  .input-inner {
+    // 布局
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    // 可放大
+    flex: 1;
+
+    .input-icon {
+      font-size: 14px;
+      margin: 6px;
+      color: rgba(255, 255, 255, 0.4);
+    }
+
+    input {
+      // 尺寸
+      width: 100%;
+      height: 28px;
+      background-color: transparent;
+      border: none;
+      // 内边距
+      padding-right: 10px;
+      // 字体
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.9);
+
+      &:focus {
+        outline: none;
+      }
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+      }
 
-  .input-icon {
-    margin: 6px;
-    color: rgba(255, 255, 255, 0.4);
+      &.is-center {
+        text-align: center;
+      }
+    }
+  }
+
+  &.is-round {
+    border-radius: 14px;
   }
+}
 
-  input {
-    // 尺寸
-    width: 100%;
-    height: 28px;
-    background-color: transparent;
-    border: none;
-    // 内边距
-    padding-right: 10px;
-    // 字体
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-
-    &:focus {
-      outline: none;
+.is-large {
+  .input-inner {
+    .input-icon {
+      font-size: 16px;
     }
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.4);
+
+    input {
+      height: 34px;
+      font-size: 14px;
     }
   }
+
+  &.is-round {
+    border-radius: 17px;
+  }
 }
 </style>

src/components/Window/index.vue

@@ -4,12 +4,14 @@
     <slot></slot>
   </div>
 
-  <div class="above-window"></div>
+  <div class="above-window">
+    <slot name="navigation"></slot>
+  </div>
 
   <div class="below-window">
-    <!-- 装饰品插槽 -->
+    <!-- 装饰插槽 -->
     <slot name="ornaments"></slot>
-    <div class="window-bar"></div>
+    <div class="window-controls"></div>
   </div>
 </template>
 
@@ -36,7 +38,7 @@ defineOptions({
   top: 50%;
   left: 50%;
   transform: translate(-50%, 250px); // 以左上角为原点，向下偏移 window 高度的一半
-  .window-bar {
+  .window-controls {
     // 尺寸
     width: 70px;
     height: 6px;

src/router/index.ts

@@ -27,6 +27,11 @@ const router = createRouter({
       name: 'settings',
       component: () => import('@/views/settings/index.vue')
     },
+    {
+      path: '/safari',
+      name: 'safari',
+      component: () => import('@/views/safari/index.vue')
+    },
     {
       path: '/photos',
       name: 'photos',

src/views/apps/index.vue

@@ -96,7 +96,8 @@ const appList = [
   },
   {
     name: 'Safari',
-    icon: 'Safari.png'
+    icon: 'Safari.png',
+    path: '/safari'
   },
   {
     name: 'Photos',

src/views/environment/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="environment">
-    <img src="@/assets/images/environment/home-daytime.png" alt="environment" />
+    <img src="@/assets/images/environment/apartment-daytime.png" alt="environment" />
   </div>
 </template>
 

src/views/music/index.vue

@@ -96,7 +96,7 @@
         </div>
 
         <div class="content">
-          <Input class="search-input" placeholder="Search in Albums" />
+          <Input class="search-input" icon="mic_fill" placeholder="Search in Albums" />
 
           <div class="playlists hide-scrollbar">
             <div class="playlist" v-for="playlist in playlists" :key="playlist.name">

src/views/safari/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <Window>
+    <template v-slot:navigation>
+      <div class="navigation glass-material">
+        <Button bg icon="layout_9_line" />
+        <Button bg icon="left_line" />
+        <Button bg icon="right_line" />
+
+        <Input
+          class="search-input"
+          placeholder="Search or Enter website name"
+          :width="350"
+          round
+          center
+          v-model="inputValue"
+        >
+          <template v-slot:prefix>
+            <Button icon="world_2_line"></Button>
+          </template>
+
+          <template v-slot:suffix>
+            <Button icon="refresh_1_line" />
+          </template>
+        </Input>
+
+        <Button bg icon="upload_line" />
+        <Button bg icon="add_line" />
+        <Button bg icon="copy_2_line" />
+      </div>
+    </template>
+
+    Window画布内容
+  </Window>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Window from '@/components/Window/index.vue'
+import Button from '@/components/Button/index.vue'
+import Input from '@/components/Input/index.vue'
+
+defineOptions({
+  name: 'SafariView'
+})
+
+let inputValue = ref('teenage.engineering')
+</script>
+
+<style scoped lang="scss">
+.navigation {
+  // border: 1px solid red;
+  width: 600px;
+  height: 40px;
+  margin-bottom: 15px;
+  padding: 8px;
+  // 布局
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .search-input {
+    margin: 0 10px;
+  }
+}
+</style>