feat(views): 添加“首次使用”页面

src/App.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
+import { RouterView } from 'vue-router';
 
 import AntdConfig from './components/AntdConfig.vue';
 </script>
 
 <template>
   <AntdConfig>
-    <header>
-      <nav>
-        <ASpace>
-          <RouterLink to="/">Home</RouterLink>
-          <RouterLink to="/first-usage">首次使用</RouterLink>
-          <RouterLink to="/create-customer">创建客户</RouterLink>
-          <RouterLink to="/setup-protocol">配置协议</RouterLink>
-          <RouterLink to="/register-gateway">注册网关</RouterLink>
-          <RouterLink to="/create-device">创建设备</RouterLink>
-        </ASpace>
-        <ASteps />
-      </nav>
-    </header>
     <RouterView />
   </AntdConfig>
 </template>

src/i18n/locales/zh.json

@@ -1,6 +1,7 @@
 {
   "common": {
     "cancel": "取消",
+    "skip": "跳过",
     "tip": "提示",
     "warning": "警告"
   },
@@ -11,7 +12,11 @@
     "createDevice": "创建设备"
   },
   "firstUsage": {
-    "chooseItemToBeginSetup": "选择一项开始配置"
+    "chooseItemToBeginSetup": "选择一项开始配置",
+    "createCustomer": "为你的客户创建账号",
+    "createDevice": "选择网关参数，创建设备",
+    "registerGateway": "注册网关，绑定网关与协议",
+    "setupProtocol": "按项目点表配置协议"
   },
   "registerGateway": {
     "registerGateway": "注册网关"

src/router/index.ts

@@ -1,19 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-import HomeView from '@/views/HomeView.vue';
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('@/views/AboutView.vue'),
+      redirect: '/first-usage',
     },
     {
       path: '/first-usage',

src/views/first-usage/FirstUsage.vue

@@ -1,3 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { t } from '@/i18n';
+
+import createCustomer from '@/assets/img/create-customer.png';
+import createDevice from '@/assets/img/create-device.png';
+import registerGateway from '@/assets/img/register-gateway.png';
+import setupProtocol from '@/assets/img/setup-protocol.png';
+
+interface ConfigItem {
+  title: string;
+  description: string;
+  icon: string;
+  path: string;
+  done: boolean;
+}
+
+const configList = computed<ConfigItem[]>(() => {
+  return [
+    {
+      title: t('createCustomer.createCustomer'),
+      description: t('firstUsage.createCustomer'),
+      icon: createCustomer,
+      path: '/create-customer',
+      done: true,
+    },
+    {
+      title: t('setupProtocol.setupProtocol'),
+      description: t('firstUsage.setupProtocol'),
+      icon: setupProtocol,
+      path: '/setup-protocol',
+      done: false,
+    },
+    {
+      title: t('registerGateway.registerGateway'),
+      description: t('firstUsage.registerGateway'),
+      icon: registerGateway,
+      path: '/register-gateway',
+      done: false,
+    },
+    {
+      title: t('createDevice.createDevice'),
+      description: t('firstUsage.createDevice'),
+      icon: createDevice,
+      path: '/create-device',
+      done: false,
+    },
+  ];
+});
+</script>
+
 <template>
-  <div>首次使用</div>
+  <div class="page-container">
+    <div>
+      <div class="usage-tip">{{ $t('firstUsage.chooseItemToBeginSetup') }}</div>
+      <ARow :gutter="6">
+        <ACol v-for="(item, index) in configList" :key="index" :span="12">
+          <div class="config-container" @click="$router.push(item.path)">
+            <img class="config-icon" :src="item.icon" />
+            <div>
+              <div class="config-title">{{ item.title }}</div>
+              <div class="config-description">{{ item.description }}</div>
+            </div>
+            <img v-show="item.done" class="config-checked" src="@/assets/img/checked.png" />
+          </div>
+        </ACol>
+      </ARow>
+      <AButton class="skip-button" type="text">{{ $t('common.skip') }}</AButton>
+    </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+
+.usage-tip {
+  margin-bottom: 30px;
+  font-size: var(--antd-font-size-xl);
+  color: var(--antd-color-text);
+  text-align: center;
+}
+
+.config-container {
+  display: flex;
+  align-items: center;
+  height: 130px;
+  padding: 33px 25px;
+  margin-bottom: 6px;
+  color: var(--antd-color-text);
+  cursor: pointer;
+  border: 1px solid var(--antd-color-border);
+  border-radius: 3px;
+
+  &:hover {
+    background-color: #f1f2f6;
+  }
+}
+
+.config-icon {
+  margin-right: 12px;
+}
+
+.config-title {
+  margin-bottom: 10px;
+  font-size: var(--antd-font-size-lg);
+}
+
+.config-description {
+  font-size: var(--antd-font-size-sm);
+}
+
+.config-checked {
+  position: absolute;
+  top: -6px;
+  right: 0;
+}
+
+.skip-button {
+  margin-top: 50px;
+}
+</style>