以下是搭建一个使用Spring Boot 3和Vue 3的项目骨架的步骤：

1. 创建Spring Boot项目：

mvn archetype:generate -DgroupId=com.example -DartifactId=novelty-house-backend -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

2. 添加Spring Boot和Web依赖到pom.xml：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

3. 创建一个简单的REST控制器src/main/java/com/example/NoveltyHouseBackendApplication.java：

package com.example;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@SpringBootApplication
public class NoveltyHouseBackendApplication {
    public static void main(String[] args) {
        SpringApplication.run(NoveltyHouseBackendApplication.class, args);
    }
}
 
@RestController
class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Novelty House!";
    }
}

4. 创建Vue 3项目：

npm init vue@latest

5. 安装必要的依赖，例如Vue Router和Vuex，并创建相应的文件和配置。
6. 在package.json中添加scripts来运行前端和后端：

"scripts": {
    "start": "npm run dev",
    "dev": "vue-tsc --noEmit && vite",
    "build": "vue-tsc && vite build",
    "server": "java -jar target/novelty-house-backend-0.0.1-SNAPSHOT.jar"
}

7. 创建前端代码，例如在src/views/HomeView.vue中：

<template>
  <div>
    <h1>Welcome to Novelty House</h1>
  </div>
</template>
 
<script setup lang="ts">
// TypeScript setup script
</script>

8. 在src/main.ts中启动Vue应用：

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

9. 运行后端Spring Boot应用：

mvn spring-boot:run

10. 运行前端应用并确保后端运行中：

npm run start

这样你就搭建了一个使用Spring Boot 3作为后端和Vue 3作为前端的项目骨架，可以在此基础上进行开发。

由于提出的查询涉及的内容较多，并且涉及到具体的项目实现，我将提供一个简化版的核心功能代码示例。这个示例展示了如何在Node.js后端使用Express框架创建一个API接口，以及如何在Vue前端使用Element UI组件库与该API进行交互。

后端代码示例 (server.js 使用Express框架):

const express = require('express');
const app = express();
const port = 3000;
 
// 假设有一个心理健康测评分析的API接口
app.get('/api/mental-health', (req, res) => {
  // 这里应该是获取数据的逻辑，比如从数据库读取或者调用外部服务
  const mentalHealthData = {
    score: 75, // 假设的心理健康测评分数
    warning: '可能需要进一步帮助' // 根据分数给出的预警信息
  };
  res.json(mentalHealthData);
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

前端代码示例 (App.vue 使用Vue和Element UI):

<template>
  <div>
    <el-button @click="checkMentalHealth">检查心理健康</el-button>
    <div v-if="mentalHealthData">
      心理健康评分: {{ mentalHealthData.score }}
      <p v-if="mentalHealthData.warning">预警: {{ mentalHealthData.warning }}</p>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      mentalHealthData: null
    };
  },
  methods: {
    async checkMentalHealth() {
      try {
        const response = await axios.get('/api/mental-health');
        this.mentalHealthData = response.data;
      } catch (error) {
        console.error('Error fetching mental health data:', error);
      }
    }
  }
};
</script>

在这个例子中，前端Vue应用通过axios库向后端Express应用发送HTTP GET请求，获取心理健康测评分数和预警信息。后端应用处理请求，连接数据库或调用外部服务，并将结果以JSON格式返回给前端。前端应用在获取数据后，使用Element UI的组件展示结果。

这个简化示例展示了如何将Node.js与Vue结合，创建一个基本的前后端交互应用。在实际项目中，你需要根据具体需求进行数据库设计、安全性考虑（如身份验证和授权）、错误处理等。

在Vue 3 + Spring Boot + PostgreSQL项目中，前后端传递参数通常涉及以下步骤：

前端（Vue 3）：

1. 定义API接口。
2. 使用axios或者其他HTTP客户端发送请求。
3. 绑定数据到请求参数。

后端（Spring Boot）：

1. 创建Controller类。
2. 定义请求处理方法。
3. 使用@RequestBody或@RequestParam等注解接收参数。

以下是一个简单的例子：

前端（Vue 3）：

// 使用axios发送POST请求
import axios from 'axios';
 
const postData = async (url = '', data = {}) => {
  const response = await axios.post(url, data);
  return response.data;
};
 
// 发送数据到后端
const sendData = async () => {
  const url = 'http://localhost:8080/api/data';
  const data = { key: 'value' };
  try {
    const result = await postData(url, data);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
};
 
// 调用函数发送数据
sendData();

后端（Spring Boot）：

import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api")
public class DataController {
 
  @PostMapping("/data")
  public String receiveData(@RequestBody Map<String, String> data) {
    // 处理接收到的数据
    String receivedValue = data.get("key");
    // 返回响应
    return "Received: " + receivedValue;
  }
}

在这个例子中，前端使用axios库发送一个POST请求，后端的Controller接收这个请求并处理。这里的@RequestBody注解用于将请求体中的JSON数据绑定到方法参数上。如果是表单数据或简单参数，可以使用@RequestParam注解。

由于提供的信息不足以确定具体的代码问题，我无法提供一个精确的代码解决方案。不过，我可以提供一个简单的Java后端服务的框架示例，该框架可以与大多数现代前端框架（如Vue.js和ElementUI）配合使用。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@SpringBootApplication
public class ProductionManagementSystemApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(ProductionManagementSystemApplication.class, args);
    }
 
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:8080");
            }
        };
    }
}

这个Java Spring Boot应用程序框架定义了一个入口点，并启动了一个Spring应用程序。corsConfigurer方法允许从http://localhost:8080（Vue开发服务器的默认地址）进行跨源请求。

对于具体的产科信息管理系统，你需要根据业务需求设计数据模型、相关的API接口、以及数据库交互等。这个框架只是一个起点，你需要根据实际需求添加更多的细节。

请注意，源代码的提供必须遵守版权和许可协议，且通常需要源代码的所有权，因此在没有明确许可的情况下，我不能提供完整的产科信息管理系统源代码。如果你需要实现一个具体的系统，你应该联系系统的开发者或者购买使用权。

在Vue项目中，如果你想要全局修改Element UI的Message组件的显示时长，你可以通过修改其默认配置来实现。

Element UI的Message组件有一个duration属性，用于控制消息提示的持续时间，单位是毫秒。你可以在项目的入口文件（比如main.js）中，通过修改Message组件的默认配置来设置全局的时长。

以下是一个示例代码，展示了如何全局设置Element UI的Message组件的显示时长为5000毫秒（5秒）：

import Vue from 'vue';
import { Message } from 'element-ui';
 
// 修改默认配置
Message.defaultOptions = {
  duration: 5000
};
 
// 或者使用全局配置方法
Vue.prototype.$message.defaultOptions.duration = 5000;
 
new Vue({
  // ...
}).$mount('#app');

在上面的代码中，我们直接修改了Message.defaultOptions的duration属性，这样所有使用Message组件的地方都会应用这个新的默认时长配置。

请确保在Vue实例挂载之前进行这样的配置修改，这样配置更改才会被正确地应用到整个应用中。

在Vue 3和Element Plus中，您可以通过CSS来美化el-tree组件。以下是一个简单的例子，展示如何自定义el-tree的样式：

1. 首先，在项目的全局样式文件中（例如styles.css或app.css），添加自定义样式来覆盖默认的el-tree样式。

/* 自定义树节点内容样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
 
/* 修改选中节点的背景色 */
.el-tree .el-tree-node__content:hover {
  background-color: #f5f7fa;
}
 
/* 修改节点图标 */
.el-tree .el-tree-node__expand-icon {
  color: #c0c4cc;
}
 
/* 其他自定义样式... */

2. 在Vue组件中，使用el-tree组件并应用自定义节点内容：

<template>
  <el-tree
    :data="treeData"
    class="custom-tree"
    :props="defaultProps"
    node-key="id"
    default-expand-all
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <!-- 其他自定义内容，如图标或按钮 -->
      </span>
    </template>
  </el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeData = ref([
  // 树形数据
]);
 
const defaultProps = {
  children: 'children',
  label: 'label'
};
</script>
 
<style>
/* 使用上面定义的CSS类和样式 */
</style>

在这个例子中，我们使用了template #default来自定义节点内容，并且应用了.custom-tree-node类来改变节点的样式。您可以根据需要添加更多的自定义样式。

// 安装依赖
// npm install @vueuse/core sqlite
 
// main.js
import { ref } from 'vue'
import { openDB, DBSchema, deleteDB, wrap } from 'sqlite'
 
// 定义数据库模式
const schema = wrap(new DBSchema())
  .version(1)
  .create('messages', (table) => {
    table.int('id').primaryKey().autoIncrement()
    table.text('message')
  })
 
// 打开或创建数据库
const db = ref(null)
const openDatabase = async () => {
  db.value = await openDB('my-database.db', 1, schema)
}
 
// 插入数据
const insertMessage = async (message) => {
  if (db.value) {
    const tx = db.value.transaction('messages', 'readwrite')
    const store = tx.objectStore('messages')
    const addRequest = store.add({ message })
    await tx.done
    console.log('Message inserted', addRequest.result)
  }
}
 
// 删除数据库
const deleteDatabase = async () => {
  await deleteDB('my-database.db')
  console.log('Database deleted')
}
 
// 在组件中使用
// 在组件中调用 openDatabase, insertMessage, 或 deleteDatabase 方法

这段代码展示了如何在 Vue 3 应用中使用 Vite 创建和管理 SQLite 数据库。它包括打开数据库、定义模式、插入数据和删除数据库的操作。通过这个例子，开发者可以学习如何在前端应用中使用 SQLite 进行数据的本地存储。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      <span>{{ item.label }}</span>
      <ul v-if="item.children" class="submenu">
        <!-- 递归地调用自己，并传递子菜单项 -->
        <menu-item :menu-items="item.children"></menu-item>
      </ul>
    </li>
  </ul>
</template>
 
<script>
export default {
  name: 'MenuItem',
  props: {
    menuItems: Array
  }
}
</script>

这个例子中，我们定义了一个名为MenuItem的Vue组件，它接受一个menuItems数组作为prop。在模板中，我们使用v-for来遍历这个数组，并为每个菜单项输出相应的HTML结构。如果该项有子菜单，我们再次使用MenuItem组件来递归地渲染子菜单项。这样就可以无限级地渲染菜单了。

以下是创建一个简单的Spring Boot后端和Vue前端分离项目的步骤：

后端（Spring Boot）:

1. 使用Spring Initializr（https://start.spring.io/）生成Spring Boot项目骨架。
2. 添加必要的依赖，比如spring-boot-starter-web。
3. 创建一个简单的REST控制器。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

前端（Vue.js）:

1. 使用Vue CLI创建新项目或手动创建文件夹。
2. 安装axios进行HTTP请求。
3. 创建简单的组件发送请求并显示响应。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/hello')
        .then(response => {
          this.message = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

配置前后端连接：

确保Spring Boot应用运行在8080端口，并且Vue项目能够正确代理API请求到Spring Boot应用。

package.json中的代理配置示例（Vue项目）:

"devServer": {
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "changeOrigin": true
    }
  }
}

然后在Vue组件中，你可以使用/api前缀来发送请求到Spring Boot服务。

运行应用:

1. 首先运行Spring Boot应用。
2. 然后运行Vue前端，确保Vue代理指向Spring Boot应用。
3. 访问Vue应用，它将从Spring Boot应用获取数据。

这个简单的例子展示了如何设置和运行一个前后端分离的项目。在实际应用中，你可能需要进一步配置路由、认证、权限等安全和非功能性需求。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
 
interface TableColumn {
  prop: string;
  label: string;
}
 
export default defineComponent({
  name: 'MyTable',
  components: {
    ElTable,
    ElTableColumn
  },
  props: {
    columns: {
      type: Array as () => TableColumn[],
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
});
</script>

这个简单的例子展示了如何在Vue 3和TypeScript中使用Element-Plus创建一个可以动态渲染列的表格组件。组件接收columns和tableData作为props，其中columns是一个对象数组，定义了表格列的属性和标签。tableData是表格的数据数组。这个组件可以被其他Vue组件作为自定义表格来使用。