product/SmartisanNote.Remake
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Activity

还原了搜索栏布局、样式；

Browse Source 
还原了文件夹管理布局、样式；
还原了头部布局、样式；
This commit is contained in:
User
2025-10-10 15:01:36 +08:00
parent e40288e8ef
commit f68cd4e0fd
10 changed files with 469 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Header.vue
View File

@@ -1,22 +1,18 @@
<template>
<div class="code-fun-flex-row code-fun-items-center component">
<!-- 左侧图标 -->
<img v-if="leftType == 'settings'" class="left-icon" src="/assets/icons/drawable-xxhdpi/btn_settings.png" @click="handleLeftAction" />
<img v-else class="left-icon" src="/assets/icons/drawable-xxhdpi/btn_back.png" @click="handleLeftAction" />
<img class="left-icon" :src="leftIconSource" @click="handleLeftAction" />
<!-- 标题区域 -->
<div class="title-container" @click="handleTitlePress" v-if="leftType == 'settings'">
<div class="title-container" @click="handleTitlePress">
<span class="text">{{ title }}</span>
<!-- 文件夹展开图标 -->
<img class="folder-icon" :src="folderExpanded ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'" @click.stop="handleFolderToggle" />
</div>
<div class="title-container" v-else>
<span class="text">{{ title }}</span>
<img v-if="showFolderIcon" class="folder-icon" :src="folderExpanded ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'" @click.stop="handleFolderToggle" />
</div>
<!-- 右侧操作按钮 -->
<img v-if="actionIcon === 'create'" class="image_4" src="/assets/icons/drawable-xxhdpi/btn_create.png" @click="handleAction" />
<i class="image_4" v-else></i>
<div v-else class="image_4-placeholder"></div>
</div>
</template>
@@ -77,33 +73,14 @@ const folderExpanded = computed(() => {
return props.isFolderExpanded !== undefined ? props.isFolderExpanded : localFolderExpanded.value
})
const actionIconSource = computed(() => {
// 根据actionIcon属性返回对应的图标路径
switch (props.actionIcon) {
case 'settings':
return '/assets/icons/drawable-xxhdpi/btn_settings.png'
case 'create':
return '/assets/icons/drawable-xxhdpi/btn_create.png'
default:
return null
}
const showFolderIcon = computed(() => {
// 只有当leftType为settings且有onFolderToggle回调时才显示文件夹图标
return props.leftType === 'settings' && props.onFolderToggle
})
const leftIconSource = computed(() => {
// 根据leftIcon属性返回对应的图标路径
switch (props.leftIcon) {
case 'folder':
// 文件夹图标根据展开状态切换
return folderExpanded.value ? '/assets/icons/drawable-xxhdpi/folder_title_arrow_pressed.png' : '/assets/icons/drawable-xxhdpi/folder_title_arrow_normal.png'
case 'back':
// 返回图标
return '/assets/icons/drawable-xxhdpi/btn_back.png'
case 'settings':
// 设置图标
return '/assets/icons/drawable-xxhdpi/btn_settings.png'
default:
return null
}
// 根据leftType属性返回对应的图标路径
return props.leftType === 'settings' ? '/assets/icons/drawable-xxhdpi/btn_settings.png' : '/assets/icons/drawable-xxhdpi/btn_back.png'
})
const handleFolderToggle = () => {
@@ -146,10 +123,10 @@ const handleTitlePress = () => {
<style scoped lang="less">
.component {
padding: 2rem 0.72rem 0.5rem 0.72rem;
padding: 2rem 0.72rem 0.5rem;
background-color: #00000000;
background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/686f20ecd54496f19f54e801/68e862ab9520a30011f388ff/17600644443142372133.png);
background-size: cover;
background-image: url(assets/icons/drawable-xxhdpi/action_bar_default.png);
background-size: 100% 100%;
background-position: 0% 0%;
display: flex;
justify-content: space-between;
@@ -162,6 +139,11 @@ const handleTitlePress = () => {
cursor: pointer;
}
.image_4-placeholder {
width: 1.7rem;
height: 1.7rem;
}
.title-container {
display: flex;
align-items: center;