hunk-2025-02-28 10:40:49

src/router/index.js

@@ -1,11 +1,23 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/login.vue'
+import DashboardView from '../views/dashboard.vue'
 
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'Home',
     component: HomeView
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView
+  },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardView
   }
 ]
 

src/views/dashboard.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="flex">
+    <aside class="bg-[#08002E] text-white w-64 p-4">
+      <h2 class="text-xl font-bold mb-6">Product Name</h2>
+      <nav>
+        <ul>
+          <li class="mb-2">
+            <a href="#/dashboard" class="block py-2 px-4 rounded hover:bg-gray-700">首页</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/module1" class="block py-2 px-4 rounded hover:bg-gray-700">模块1</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/module2" class="block py-2 px-4 rounded hover:bg-gray-700">模块2</a>
+          </li>
+          <!-- Add more menu items as needed -->
+        </ul>
+      </nav>
+    </aside>
+    <main class="flex-1 p-4">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h2 class="text-2xl font-bold">首页</h2>
+          <div class="mt-2">
+            <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Search...">
+          </div>
+        </div>
+        <div>
+          <!-- Breadcrumb navigation can be added here -->
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-4 mb-6">
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同审核</h3>
+          <p>审核中的合同数量: 10</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同签署</h3>
+          <p>待签署的合同数量: 5</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同登记</h3>
+          <p>待登记的合同数量: 3</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同履约</h3>
+          <p>待履约的合同数量: 8</p>
+        </div>
+      </div>
+      <div class="mb-6">
+        <h3 class="text-lg font-bold mb-2">特办事项</h3>
+        <ul>
+          <li class="py-2 px-4 bg-white rounded-lg shadow-md mb-2">
+            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
+            <span class="ml-2">任务1</span>
+          </li>
+          <li class="py-2 px-4 bg-white rounded-lg shadow-md mb-2">
+            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
+            <span class="ml-2">任务2</span>
+          </li>
+          <li class="py-2 px-4 bg-white rounded-lg shadow-md mb-2">
+            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
+            <span class="ml-2">任务3</span>
+          </li>
+          <!-- Add more tasks as needed -->
+        </ul>
+      </div>
+      <div class="mb-6">
+        <h3 class="text-lg font-bold mb-2">项目进程</h3>
+        <table class="w-full bg-white rounded-lg shadow-md">
+          <thead>
+            <tr>
+              <th class="py-2 px-4 border-b">项目名称</th>
+              <th class="py-2 px-4 border-b">负责人</th>
+              <th class="py-2 px-4 border-b">截止日期</th>
+              <th class="py-2 px-4 border-b">状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="py-2 px-4 border-b">项目A</td>
+              <td class="py-2 px-4 border-b">张三</td>
+              <td class="py-2 px-4 border-b">2025-03-01</td>
+              <td class="py-2 px-4 border-b">进行中</td>
+            </tr>
+            <tr>
+              <td class="py-2 px-4 border-b">项目B</td>
+              <td class="py-2 px-4 border-b">李四</td>
+              <td class="py-2 px-4 border-b">2025-03-15</td>
+              <td class="py-2 px-4 border-b">待开始</td>
+            </tr>
+            <!-- Add more projects as needed -->
+          </tbody>
+        </table>
+      </div>
+      <div class="mb-6">
+        <h3 class="text-lg font-bold mb-2">快捷功能</h3>
+        <div class="grid grid-cols-3 gap-4">
+          <div class="bg-white p-4 rounded-lg shadow-md">
+            <h4 class="text-md font-bold mb-2">功能1</h4>
+            <p>功能描述1</p>
+          </div>
+          <div class="bg-white p-4 rounded-lg shadow-md">
+            <h4 class="text-md font-bold mb-2">功能2</h4>
+            <p>功能描述2</p>
+          </div>
+          <div class="bg-white p-4 rounded-lg shadow-md">
+            <h4 class="text-md font-bold mb-2">功能3</h4>
+            <p>功能描述3</p>
+          </div>
+          <!-- Add more quick actions as needed -->
+        </div>
+      </div>
+      <div>
+        <h3 class="text-lg font-bold mb-2">合同类型统计</h3>
+        <canvas id="contractTypeChart" class="w-full h-80"></canvas>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import Chart from 'chart.js/auto';
+
+export default {
+  setup() {
+    onMounted(() => {
+      const ctx = document.getElementById('contractTypeChart').getContext('2d');
+      new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: ['类型A', '类型B', '类型C', '类型D'],
+          datasets: [{
+            label: '合同数量',
+            data: [12, 19, 3, 5],
+            backgroundColor: [
+              'rgba(255, 99, 132, 0.2)',
+              'rgba(54, 162, 235, 0.2)',
+              'rgba(255, 206, 86, 0.2)',
+              'rgba(75, 192, 192, 0.2)'
+            ],
+            borderColor: [
+              'rgba(255, 99, 132, 1)',
+              'rgba(54, 162, 235, 1)',
+              'rgba(255, 206, 86, 1)',
+              'rgba(75, 192, 192, 1)'
+            ],
+            borderWidth: 1
+          }]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    });
+
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+</style>

src/views/login.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h2 class="text-2xl font-bold">Company Logo</h2>
+          <p class="text-gray-600">Company Name</p>
+        </div>
+        <button class="text-gray-600 hover:text-gray-800">Language Switch</button>
+      </div>
+      <form @submit.prevent="handleLogin">
+        <div class="mb-4">
+          <label for="tenant" class="block text-gray-700 text-sm font-bold mb-2">Tenant Name</label>
+          <input v-model="tenant" type="text" id="tenant" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Tenant Name">
+        </div>
+        <div class="mb-4">
+          <label for="username" class="block text-gray-700 text-sm font-bold mb-2">Username</label>
+          <input v-model="username" type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username">
+        </div>
+        <div class="mb-6">
+          <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+          <input v-model="password" type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" placeholder="Password">
+          <p class="text-red-500 text-xs italic">Please choose a password.</p>
+        </div>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <input v-model="rememberMe" type="checkbox" id="rememberMe" class="form-checkbox h-4 w-4 text-blue-600">
+            <label for="rememberMe" class="ml-2 block text-sm text-gray-900">Remember Me</label>
+          </div>
+          <a href="#" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
+            Forgot Password?
+          </a>
+        </div>
+        <div class="mt-6">
+          <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full">
+            Login
+          </button>
+        </div>
+        <div class="mt-4">
+          <button class="w-full bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+            使用AD域免密自动登录
+          </button>
+        </div>
+      </form>
+      <div class="mt-6 text-center text-gray-600">
+        <p>&copy; 2025 Company Name. All rights reserved.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default {
+  setup() {
+    const tenant = ref('');
+    const username = ref('');
+    const password = ref('');
+    const rememberMe = ref(false);
+    const router = useRouter();
+
+    const handleLogin = () => {
+      if (username.value === 'admin' && password.value === 'admin') {
+        if (rememberMe.value) {
+          localStorage.setItem('user', JSON.stringify({ username: username.value, password: password.value }));
+        }
+        router.push('/dashboard');
+      } else {
+        alert('Invalid credentials');
+      }
+    };
+
+    return {
+      tenant,
+      username,
+      password,
+      rememberMe,
+      handleLogin,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+</style>