verce-vue-test 0.0.19 → 0.0.21

package/src/views/ExecutiveManagementView/components/ExecutiveWarningTablePanel.vue

@@ -64,3 +64,162 @@ const rows = [
     </div>
   </article>
 </template>
+
+<style scoped>
+.table-board {
+  --blue: #1267f2;
+  --line: #dce4ef;
+  min-width: 0;
+  height: calc(100vh - 190px);
+  min-height: 700px;
+  padding: 14px 14px 17px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: rgba(255, 255, 255, .96);
+  border-radius: 10px;
+  box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
+}
+
+.board-head {
+  height: 38px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.board-head h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  line-height: 1.1;
+  font-weight: 900;
+}
+
+.board-head h2 span {
+  width: 13px;
+  height: 14px;
+  border-radius: 4px;
+  background: var(--blue);
+  box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  color: #6c7480;
+  font-size: 15px;
+}
+
+.actions button {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  border: 0;
+  background: transparent;
+  color: #6c7480;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.actions button.active {
+  padding: 0 13px;
+  border-radius: 14px;
+  background: var(--blue);
+  color: #fff;
+}
+
+.warning-table {
+  width: 100%;
+  height: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 0 0 8px 8px;
+  font-size: 12px;
+  text-align: center;
+}
+
+.warning-table th {
+  height: 32px;
+  border-right: 1px solid rgba(255, 255, 255, .36);
+  border-bottom: 1px solid rgba(255, 255, 255, .36);
+  background: var(--blue);
+  color: #fff;
+  font-weight: 700;
+}
+
+.warning-table td {
+  height: 40px;
+  border-right: 1px solid #e1e7ef;
+  border-bottom: 1px solid #e1e7ef;
+  background: #fff;
+}
+
+.warning-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.pager {
+  height: 54px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 16px;
+  color: #1e2735;
+  font-size: 14px;
+}
+
+.pager button {
+  min-width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  background: #fff;
+  color: #0d1625;
+  font-weight: 700;
+}
+
+.pager button.selected {
+  background: var(--blue);
+  color: #fff;
+}
+
+.pager input {
+  width: 48px;
+  height: 30px;
+  border: 1px solid #dbe3ef;
+  border-radius: 5px;
+  text-align: center;
+}
+
+@media (max-width: 1200px) {
+  .table-board {
+    height: auto;
+  }
+}
+
+@media (max-width: 720px) {
+  .actions {
+    gap: 10px;
+  }
+
+  .board-head {
+    height: auto;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+
+  .warning-table {
+    min-width: 720px;
+  }
+
+  .table-board {
+    overflow-x: auto;
+  }
+}
+</style>

package/src/views/ExecutiveManagementView/index.vue

@@ -3,7 +3,6 @@ import ExecutiveAccountPanel from './components/ExecutiveAccountPanel.vue'
 import ExecutiveReliablePanel from './components/ExecutiveReliablePanel.vue'
 import ExecutiveWarningOverview from './components/ExecutiveWarningOverview.vue'
 import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.vue'
-import './executive-management.css'
 </script>
 
 <template>
@@ -23,3 +22,77 @@ import './executive-management.css'
     </section>
   </main>
 </template>
+
+<style scoped>
+.executive-page {
+  width: 100%;
+  height: 100vh;
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: #05070b;
+  background:
+    linear-gradient(90deg, #f8f9fb 0 31.4%, transparent 31.4%),
+    linear-gradient(142deg, #2688ff 0%, #0063ee 43%, #005ce9 100%);
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
+}
+
+.hero {
+  width: 100%;
+  height: 128px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 23px 31px 0;
+}
+
+.hero-title h1 {
+  font-size: 36px;
+  line-height: 1.16;
+  font-weight: 900;
+}
+
+.hero-title p {
+  margin-top: 16px;
+  color: #91959b;
+  font-size: 16px;
+}
+
+.dashboard-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  padding: 0 31px 39px;
+}
+
+@media (max-width: 1200px) {
+  .hero {
+    height: auto;
+    min-height: 128px;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+
+  .dashboard-grid {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}
+
+@media (max-width: 720px) {
+  .hero {
+    padding: 18px 16px 0;
+  }
+
+  .hero-title h1 {
+    font-size: 30px;
+  }
+
+  .dashboard-grid {
+    padding: 0 16px 24px;
+  }
+}
+</style>

package/src/views/LoginView.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { User, Lock } from '@element-plus/icons-vue'
+import { useLoginStore } from '@/stores/login'
+
+const loginStore = useLoginStore()
+const formRef = ref<FormInstance>()
+
+const rules = reactive<FormRules>({
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+})
+
+const handleLogin = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      loginStore.login()
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-left">
+      <div class="login-left-content">
+        <h1 class="login-title">管理系统</h1>
+        <p class="login-subtitle">高效、智能的企业管理平台</p>
+      </div>
+    </div>
+    <div class="login-right">
+      <div class="login-form-wrapper">
+        <h2 class="form-title">登录</h2>
+        <el-form ref="formRef" :model="loginStore" :rules="rules" size="large">
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginStore.username"
+              placeholder="请输入用户名"
+              :prefix-icon="User"
+            />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginStore.password"
+              type="password"
+              placeholder="请输入密码"
+              :prefix-icon="Lock"
+              show-password
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-checkbox v-model="loginStore.remember">记住我</el-checkbox>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" class="login-btn" :loading="loginStore.loading" @click="handleLogin">登录</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+}
+
+.login-left {
+  flex: 6;
+  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.login-left-content {
+  text-align: center;
+}
+
+.login-title {
+  font-size: 42px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.login-subtitle {
+  font-size: 18px;
+  opacity: 0.85;
+}
+
+.login-right {
+  flex: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.login-form-wrapper {
+  width: 360px;
+}
+
+.form-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 32px;
+  color: #303133;
+}
+
+.login-btn {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .login-left {
+    display: none;
+  }
+  .login-right {
+    flex: 1;
+  }
+}
+</style>

package/src/views/ExecutiveManagementView/components/chart.ts

@@ -1,116 +0,0 @@
-import { nextTick, onUnmounted } from 'vue'
-import * as echarts from 'echarts'
-import type { ECharts, EChartsOption } from 'echarts'
-
-export function useChartRegistry() {
-  const charts: ECharts[] = []
-
-  function panelChart(el: HTMLElement | undefined, option: EChartsOption) {
-    if (!el) return
-    const chart = echarts.init(el)
-    chart.setOption(option)
-    charts.push(chart)
-  }
-
-  function resizeCharts() {
-    charts.forEach((chart) => chart.resize())
-  }
-
-  async function mountCharts(render: () => void) {
-    await nextTick()
-    render()
-    window.addEventListener('resize', resizeCharts)
-  }
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', resizeCharts)
-    charts.forEach((chart) => chart.dispose())
-  })
-
-  return { panelChart, mountCharts }
-}
-
-export function ringOption(
-  centerText: string,
-  data: Array<{ value: number; name: string; itemStyle?: object }>,
-): EChartsOption {
-  return {
-    color: ['#1267f2', '#e7f0ff'],
-    animationDuration: 900,
-    title: {
-      text: centerText,
-      left: 'center',
-      top: '42%',
-      textStyle: { color: '#05070b', fontSize: 30, fontWeight: 800 },
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['57%', '77%'],
-        center: ['50%', '51%'],
-        startAngle: 90,
-        avoidLabelOverlap: false,
-        label: { show: false },
-        labelLine: { show: false },
-        itemStyle: { borderColor: '#fff', borderWidth: 4 },
-        data,
-      },
-    ],
-  }
-}
-
-export function lineOption(series: echarts.SeriesOption[], yMin = 0, yMax = 200): EChartsOption {
-  return {
-    grid: { left: 56, right: 28, top: 46, bottom: 42 },
-    legend: {
-      top: 4,
-      right: 8,
-      icon: 'path://M0,4 L12,4',
-      itemWidth: 16,
-      itemHeight: 7,
-      textStyle: { color: '#6e7787', fontSize: 11 },
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: ['05-15', '05-16', '05-17', '05-18', '05-20', '05-21'],
-      axisTick: { show: false },
-      axisLine: { lineStyle: { color: '#d6dde8' } },
-      axisLabel: { color: '#6b7280', fontSize: 12 },
-    },
-    yAxis: {
-      type: 'value',
-      min: yMin,
-      max: yMax,
-      splitNumber: 4,
-      axisLabel: { color: '#6b7280', fontSize: 12 },
-      splitLine: { lineStyle: { color: '#e7ecf3' } },
-    },
-    series,
-  }
-}
-
-export function sparkOption(values: number[]): EChartsOption {
-  return {
-    animationDuration: 700,
-    grid: { left: 2, right: 2, top: 8, bottom: 7 },
-    xAxis: { type: 'category', show: false, data: values.map((_, index) => index) },
-    yAxis: { type: 'value', show: false },
-    series: [
-      {
-        type: 'line',
-        data: values,
-        symbol: 'none',
-        smooth: false,
-        lineStyle: { color: '#1267f2', width: 2 },
-      },
-    ],
-  }
-}
-
-export function chartGradient(start: string, end: string) {
-  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    { offset: 0, color: start },
-    { offset: 1, color: end },
-  ])
-}