finish basic page

packages/ui/package.json

@@ -25,6 +25,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "electron-updater": "^6.1.7",
     "element-plus": "^2.5.5",
+    "normalize.css": "^8.0.1",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -42,6 +43,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.20.1",
     "prettier": "^3.2.4",
+    "sass": "^1.70.0",
     "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",

packages/ui/src/renderer/components.d.ts

@@ -8,6 +8,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

packages/ui/src/renderer/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import 'normalize.css'
 
 createApp(App).use(router).mount('#app')

packages/ui/src/renderer/src/page/Configuration/GeekAutoStartChatWithBoss.vue

@@ -1,8 +1,53 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div>
-    <el-button>Hello</el-button>
+  <div class="form-wrap">
+    <el-form :model="formContent" label-position="top">
+      <el-form-item
+        label="BossZhipin cookies (copy with EditThisCookie Extension from a window which has been logined)"
+        prop="bossZhipinCookies"
+      >
+        <el-input
+          v-model="formContent.bossZhipinCookies"
+          :autosize="{ minRows: 4 }"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item label="Dingtalk robot access token" prop="dingtalkRobotAccessToken">
+        <el-input v-model="formContent.dingtalkRobotAccessToken" />
+      </el-form-item>
+      <el-form-item label="Your Expect Companies (separate with comma)" prop="expectCompanies">
+        <el-input
+          v-model="formContent.expectCompanies"
+          :autosize="{ minRows: 4 }"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item class="last-form-item">
+        <el-button type="primary"> I'm ready, geekgeekgo! </el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const formContent = ref({
+  bossZhipinCookies: '',
+  dingtalkRobotAccessToken: '',
+  expectCompanies: ''
+})
+</script>
+
+<style scoped lang="scss">
+.form-wrap {
+  padding-top: 100px;
+  margin: 0 auto;
+  max-width: 640px;
+  .last-form-item {
+    :deep(.el-form-item__content) {
+      margin-top: 40px;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>