feat: 完成生成等界面的编码

src/views/components/navBar.vue

@@ -0,0 +1,80 @@
+<template>
+  <div :class="['top-nav', colorClass]">
+    <img
+      class="icon"
+      :src="backSrc"
+      alt="back"
+      @click="emitBack"
+    />
+
+    <div class="nav-title">{{ title }}</div>
+
+    <img
+      v-if="showHistory"
+      class="icon-history"
+      :src="historySrc"
+      alt="history"
+      @click="emitHistory"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import back from '@/assets/images/back_left.png';
+import backWhite from '@/assets/images/back_left_white.png';
+import history from '@/assets/images/history_line.png';
+import historyWhite from '@/assets/images/history_line_white.png';
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  color: { type: String, default: 'white' }, // 'white' or 'black'
+  showHistory: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['back', 'history']);
+
+const emitBack = () => emit('back');
+const emitHistory = () => emit('history');
+
+const backSrc = computed(() => (props.color === 'white' ? backWhite : back));
+const historySrc = computed(() => (props.color === 'white' ? historyWhite : history));
+const colorClass = computed(() => (props.color === 'white' ? 'nav-white' : 'nav-black'));
+</script>
+
+<style scoped>
+.top-nav {
+  position: absolute;
+  top: 44px;
+  left: 20px;
+  right: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+}
+
+.top-nav .icon,
+.top-nav .icon-history {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: block;
+}
+
+.nav-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.nav-white .nav-title {
+  color: #fff;
+}
+
+.nav-black .nav-title {
+  color: #000;
+}
+</style>