前端代码初始版

1 year ago · 167bb2d273
parent e5d3488734
commit 167bb2d273
25 changed files with 9497 additions and 0 deletions
--- a/src/walktofree/.gitignore
+++ b/src/walktofree/.gitignore
@ -0,0 +1,30 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 /cypress/videos/
 /cypress/screenshots/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 *.tsbuildinfo
--- a/src/walktofree/.vscode/extensions.json
+++ b/src/walktofree/.vscode/extensions.json
@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
--- a/src/walktofree/README.md
+++ b/src/walktofree/README.md
@ -0,0 +1,29 @@
 # walktofree
 This template should help get you started developing with Vue 3 in Vite.
 ## Recommended IDE Setup
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 ## Customize configuration
 See [Vite Configuration Reference](https://vitejs.dev/config/).
 ## Project Setup
 ```sh
 npm install
 ```
 ### Compile and Hot-Reload for Development
 ```sh
 npm run dev
 ```
 ### Compile and Minify for Production
 ```sh
 npm run build
 ```
--- a/src/walktofree/index.html
+++ b/src/walktofree/index.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/src/walktofree/jsconfig.json
+++ b/src/walktofree/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/src/walktofree/package-lock.json
+++ b/src/walktofree/package-lock.json
--- a/src/walktofree/package.json
+++ b/src/walktofree/package.json
@ -0,0 +1,21 @@
 {
  "name": "walktofree",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.8",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/cli-service": "^5.0.8",
    "vite": "^5.2.8"
  }
 }
--- a/src/walktofree/public/favicon.ico
+++ b/src/walktofree/public/favicon.ico
--- a/src/walktofree/src/App.vue
+++ b/src/walktofree/src/App.vue
@ -0,0 +1,19 @@
 <template>
  <div id="app">
    <router-view></router-view>
  </div>
 </template>
 <script>
 export default {
  name: 'App'
 }
 </script>
 <style>
 #app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
 }
 </style>
--- a/src/walktofree/src/api/auth.js
+++ b/src/walktofree/src/api/auth.js
@ -0,0 +1,11 @@
 import axios from 'axios'
 const baseURL = '192.168.254.35:8080'
 export const login = (data) => {
    return axios.post(`${baseURL}/Login/login`, data)
 }
 export const register = (data) => {
    return axios.post(`${baseURL}/Login/register`, data)
 }
--- a/src/walktofree/src/assets/base.css
+++ b/src/walktofree/src/assets/base.css
@ -0,0 +1,86 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;
  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;
  --vt-c-indigo: #2c3e50;
  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 }
 /* semantic color variables for this project */
 :root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);
  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);
  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);
  --section-gap: 160px;
 }
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);
    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
 }
 *,
 *::before,
 *::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
 }
 body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
--- a/src/walktofree/src/assets/logo.svg
+++ b/src/walktofree/src/assets/logo.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/walktofree/src/assets/main.css
+++ b/src/walktofree/src/assets/main.css
@ -0,0 +1,35 @@
@import './base.css';
 #app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
 }
 a,
 .green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
 }
@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
 }
@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
 }
--- a/src/walktofree/src/components/Communication.vue
+++ b/src/walktofree/src/components/Communication.vue
@ -0,0 +1,122 @@
 <template>
  <div class="chat-container">
    <div class="chat">
      <h2 class="title">聊天室</h2>
      <div class="chat-box">
        <div v-for="(message, index) in messages" :key="index" class="message">
          <span class="sender">{{ message.sender }}：</span>
          <span class="content">{{ message.content }}</span>
        </div>
      </div>
      <div class="input">
        <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
 </template>
 <script>
 import axios from 'axios';
 export default {
  data() {
    return {
      messages: [],
      newMessage: '',
    };
  },
  methods: {
    async fetchMessages() {
      try {
        const response = await axios.get('http://example.com/messages');
        this.messages = response.data;
      } catch (error) {
        console.error('Error fetching messages:', error);
      }
    },
    async sendMessage() {
      try {
        await axios.post('http://example.com/messages', {
          content: this.newMessage,
          sender: 'Me', // You can replace 'Me' with the sender's name
        });
        this.newMessage = ''; // Clear the input field after sending
        // You might want to fetch messages again here to update the UI with the latest messages
      } catch (error) {
        console.error('Error sending message:', error);
      }
    },
    // WebSocket logic to receive messages
    setupWebSocket() {
      const ws = new WebSocket('ws://example.com/socket');
      ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        this.messages.push(message);
      };
    },
  },
  created() {
    this.fetchMessages(); // Fetch messages when the component is created
    this.setupWebSocket(); // Setup WebSocket connection
  },
 };
 </script>
 <style>
 .chat-container {
  max-width: 600px;
  margin: 0 auto;
 }
 .chat {
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure the chat box takes up the entire height */
 }
 .title {
  margin-top: 0;
 }
 .chat-box {
  flex: 1; /* Allow the chat box to grow and take up remaining space */
  max-height: 300px;
  overflow-y: auto;
 }
 .message {
  margin-bottom: 10px;
 }
 .input {
  display: flex;
  margin-top: 10px;
 }
 .input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
 }
 .input button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
 }
 .input button:hover {
  background-color: #0056b3;
 }
 </style>
--- a/src/walktofree/src/components/Demand.vue
+++ b/src/walktofree/src/components/Demand.vue
@ -0,0 +1,11 @@
 <script setup>
 </script>
 <template>
 </template>
 <style scoped>
 </style>
--- a/src/walktofree/src/components/HelloWorld.vue
+++ b/src/walktofree/src/components/HelloWorld.vue
@ -0,0 +1,44 @@
 <script setup>
 defineProps({
  msg: {
    type: String,
    required: true
  }
 })
 </script>
 <template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
 </template>
 <style scoped>
 h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
 }
 h3 {
  font-size: 1.2rem;
 }
 .greetings h1,
 .greetings h3 {
  text-align: center;
 }
@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
 }
 </style>
--- a/src/walktofree/src/components/HomePage.vue
+++ b/src/walktofree/src/components/HomePage.vue
@ -0,0 +1,110 @@
 <template>
  <div class="profile">
    <h2>个人主页</h2>
    <h1>{{ user.name }}</h1>
 <!--    <h1>用户姓名</h1>-->
    <p>创建时间：{{user.createtime}}</p>
    <p>账号: {{ username }}</p>
    <p>身份证号：{{user.IDCard}}</p>
    <div v-if="showEmailInput">
      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="email" class="input-field">
      <button @click="updateEmail">保存</button>
    </div>
    <div v-else>
      <p>邮箱：{{ user.email }}</p>
      <button @click="toggleEmailInput">编辑</button>
    </div>
    <div v-if="showPhoneInput">
      <label for="PhoneNumber">手机号：</label>
      <input type="phone" id="phone" v-model="phone" class="input-field">
      <button @click="updatePhone">保存</button>
    </div>
    <div v-else>
      <p>手机号：{{ user.phone }}</p>
      <button @click="togglePhoneInput">编辑</button>
    </div>
  </div>
 </template>
 <script>
 import axios from 'axios';
 export default {
  props: ['username'],
  data() {
    return {
      user: {},
      email: '',
      showEmailInput: false,
      phone: '',
      showPhoneInput: false,
      IDCard: '',
      createtime: '',
    };
  },
  created() {
    // 在组件创建时根据账号获取用户信息
    this.fetchUser(this.username);
  },
  methods: {
    fetchUser(username) {
      // 从后端 API 请求
      axios.post(`http://192.168.254.35:8080/user/${username}`)
          .then(response => {
            this.user = response.data;
          })
          .catch(error => {
            console.error('Error fetching user:', error);
          });
    },
    toggleEmailInput() {
      this.showEmailInput = !this.showEmailInput;
      this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
    },
    updateEmail() {
      // 这里发送请求更新用户邮箱
      axios.put(`http://192.168.254.35:8080/user/${this.username}/email`, { email: this.email })
          .then(response => {
            this.user.email = this.email;
            this.toggleEmailInput(); // 切换回展示模式
          })
          .catch(error => {
            console.error('Error updating email:', error);
          });
    },
    togglePhoneInput(){
      this.showPhoneInput = !this.showPhoneInput;
      this.phone = this.user.phone;
    },
    updatePhone(){
      axios.put(`http://192.168.254.35:8080/user/${this.username}/phone`, { phone: this.phone })
          .then(response => {
            this.user.phone = this.phone;
            this.togglePhoneInput(); // 切换回展示模式
          })
          .catch(error => {
            console.error('Error updating phone:', error);
          });
    }
  }
 };
 </script>
 <style scoped>
 /* 在这里添加样式 */
 .profile {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
 }
 .input-field {
  margin-bottom: 10px;
 }
 button {
  margin-top: 10px;
 }
 </style>
--- a/src/walktofree/src/components/Login.vue
+++ b/src/walktofree/src/components/Login.vue
@ -0,0 +1,92 @@
 <template>
  <div class="login-container">
    <h1>登录页面</h1>
    <form @submit.prevent="login" class="login-form">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" class="input-field">
      <br>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" class="input-field">
      <br>
      <button type="submit" class="submit-button"@click="goToHomePage">登录</button>
      <button  class="register-button" @click="goToRegister">注册</button>
      <button @click="goToCommunication">聊天室</button>
    </form>
  </div>
 </template>
 <style scoped>
 .login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #28a7a3;
  border-radius: 5px;
  text-align: center;
 }
 .input-field {
  margin: 10px 0;
  padding: 5px;
  width: 100%;
 }
 .submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #003f3f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 }
 </style>
 <script>
 import axios from "axios";
 export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      console.log("用户名：", this.username);
      console.log("密码：", this.password);
      axios.post('http://192.168.254.35:8080/Login/login', {
        // 在请求体中传递用户名和密码字段
        username: this.username,
        password: this.password
      }, {
        // 配置跨域请求时携带 cookie
        withCredentials: true,
        // 设置请求头部为 JSON 格式
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
            console.log(response.data)
            // 处理登录成功后的逻辑
            alert(response.data);
          })
          .catch(error => {
            console.error(error)
            // 处理登录失败后的逻辑
          })
    },
    goToRegister() {
      this.$router.push('/register'); // 跳转到注册页面
    },
    goToHomePage(){
      this.$router.push('/HomePage');//跳转到个人主页
    },
    goToCommunication(){
      this.$router.push('/Communication');
    }
  }
 }
 </script>
--- a/src/walktofree/src/components/Register.vue
+++ b/src/walktofree/src/components/Register.vue
@ -0,0 +1,86 @@
 <template>
  <div class="register-container">
    <h1>注册页面</h1>
    <form @submit.prevent="register" class="register-form">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" class="input-field">
      <br>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" class="input-field">
      <br>
      <button type="submit" class="submit-button" @click="goToLogin">注册</button>
    </form>
  </div>
 </template>
 <style scoped>
 .register-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #cccc7b;
  border-radius: 5px;
  text-align: center;
 }
 .input-field {
  margin: 10px 0;
  padding: 5px;
  width: 100%;
 }
 .submit-button {
  padding: 10px 20px;
  background-color: #28a7a3;
  color: #abd4ee;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 }
 </style>
 <script>
 import { register } from '../api/auth'
 import axios from "axios";
 export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    register() {
      console.log("用户名：", this.username);
      console.log("密码：", this.password);
      axios.post('http://192.168.254.35:8080/Login/register', {
        // 在请求体中传递用户名和密码字段
        username: this.username,
        password: this.password
      }, {
        // 配置跨域请求时携带 cookie
        withCredentials: true,
        // 设置请求头部为 JSON 格式
        headers: {
          'Content-Type': 'application/json'
        }
      })
          .then(response => {
            console.log(response.data)
            // 处理注册成功后的逻辑
            alert(response.data);
          })
          .catch(error => {
            console.error(error)
            // 处理注册失败后的逻辑
            alert(response.data);
          })
    },
    goToLogin(){
      this.$router.push('/login');
    }
  }
 }
 </script>
--- a/src/walktofree/src/components/SecurityVerification.vue
+++ b/src/walktofree/src/components/SecurityVerification.vue
@ -0,0 +1,11 @@
 <script setup>
 </script>
 <template>
 </template>
 <style scoped>
 </style>
--- a/src/walktofree/src/components/TheWelcome.vue
+++ b/src/walktofree/src/components/TheWelcome.vue
@ -0,0 +1,88 @@
 <script setup>
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
 import SupportIcon from './icons/IconSupport.vue'
 </script>
 <template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>
    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>
  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>
    This project is served and bundled with
    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
    recommended IDE setup is
    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
    you need to test your components and web pages, check out
    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
      >Cypress Component Testing</a
    >.
    <br />
    More instructions are available in <code>README.md</code>.
  </WelcomeItem>
  <WelcomeItem>
    <template #icon>
      <EcosystemIcon />
    </template>
    <template #heading>Ecosystem</template>
    Get official tools and libraries for your project:
    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
    you need more resources, we suggest paying
    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
    a visit.
  </WelcomeItem>
  <WelcomeItem>
    <template #icon>
      <CommunityIcon />
    </template>
    <template #heading>Community</template>
    Got stuck? Ask your question on
    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
    Discord server, or
    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
      >StackOverflow</a
    >. You should also subscribe to
    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
    the official
    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
    twitter account for latest news in the Vue world.
  </WelcomeItem>
  <WelcomeItem>
    <template #icon>
      <SupportIcon />
    </template>
    <template #heading>Support Vue</template>
    As an independent project, Vue relies on community backing for its sustainability. You can help
    us by
    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
  </WelcomeItem>
 </template>
--- a/src/walktofree/src/components/WelcomeItem.vue
+++ b/src/walktofree/src/components/WelcomeItem.vue
@ -0,0 +1,87 @@
 <template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
 </template>
 <style scoped>
 .item {
  margin-top: 2rem;
  display: flex;
  position: relative;
 }
 .details {
  flex: 1;
  margin-left: 1rem;
 }
 i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text);
 }
 h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
 }
@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }
  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }
  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }
  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }
  .item:first-of-type:before {
    display: none;
  }
  .item:last-of-type:after {
    display: none;
  }
 }
 </style>
--- a/src/walktofree/src/main.js
+++ b/src/walktofree/src/main.js
@ -0,0 +1,9 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 const app = createApp(App);
 app.use(router);
 app.mount('#app');
--- a/src/walktofree/src/router/index.js
+++ b/src/walktofree/src/router/index.js
@ -0,0 +1,20 @@
 import { createWebHistory, createRouter } from 'vue-router';
 import Login from '../components/Login.vue';
 import Register from '../components/Register.vue';
 import HomePage from "../components/HomePage.vue";
 import Communication from "../components/Communication.vue";
 const routes = [
    { path: '/', redirect: '/login' },  // 重定向到/login路径
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/HomePage', component: HomePage},
    { path: '/Communication', component: Communication}
 ];
 const router = createRouter({
    history: createWebHistory(),
    routes
 });
 export default router;
--- a/src/walktofree/vite.config.js
+++ b/src/walktofree/vite.config.js
@ -0,0 +1,17 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
 })
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`