Thu Nov 28 11:54:00 CST 2024 inscode

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <el-container>
+    <el-header>
+      <el-row type="flex" justify="space-between">
+        <el-col>
+          <el-menu mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#409EFF">
+            <el-menu-item index="1">控制台</el-menu-item>
+            <el-menu-item index="2">文档</el-menu-item>
+          </el-menu>
+        </el-col>
+        <el-col>
+          <el-menu mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#409EFF">
+            <el-menu-item index="3">财务</el-menu-item>
+            <el-menu-item index="4">API密钥</el-menu-item>
+            <el-menu-item index="5"><i class="el-icon-setting"></i></el-menu-item>
+            <el-menu-item index="6"><i class="el-icon-user"></i></el-menu-item>
+          </el-menu>
+        </el-col>
+      </el-row>
+    </el-header>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+    <el-container>
+      <el-aside width="200px">
+        <el-menu :default-active="activeIndex" router mode="vertical" background-color="#f5f5f5" text-color="#606266" active-text-color="#409EFF">
+          <el-menu-item index="1" @click="handleClick('1')">
+            <i class="el-icon-s-home"></i>
+            <span slot="title">概览</span>
+          </el-menu-item>
+          <el-menu-item index="2" @click="handleClick('2')">
+            <i class="el-icon-s-shop"></i>
+            <span slot="title">体验中心</span>
+          </el-menu-item>
+          <!-- 更多菜单项... -->
+        </el-menu>
+      </el-aside>
 
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+      <el-main>
+        <el-card shadow="never" style="margin: 20px;">
+          <h2>欢迎体验智谱 AI 大模型！👋</h2>
+          <p>在这里，你可以快速测试大模型在业务场景上的效果，体验平台提供的各类大模型。</p>
+          <el-alert title="提示" type="info" show-icon>
+            <div v-for="(item, index) in tips" :key="index">
+              {{ item }}
+            </div>
+          </el-alert>
+        </el-card>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="模型">
+            <el-select v-model="form.model" placeholder="请选择模型">
+              <el-option label="glm-4v-plus" value="glm-4v-plus"></el-option>
+              <!-- 更多选项... -->
+            </el-select>
+          </el-form-item>
+          <!-- 更多表单项... -->
+        </el-form>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+        <el-input type="textarea" placeholder="请输入内容" v-model="inputText"></el-input>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+<script>
+export default {
+  data() {
+    return {
+      activeIndex: '1',
+      form: {
+        model: '',
+        // 其他表单字段...
+      },
+      inputText: '',
+      tips: [
+        '模型更擅长中文，也支持英文；',
+        '请避免输入有违公序良俗的问题，模型可能无法回答不合适的问题；',
+        '体验中心为计费调用，模型计价规则可参考产品定价'
+      ]
+    };
+  },
+  methods: {
+    handleClick(index) {
+      this.activeIndex = index;
     }
-  
-
-  .logo {
-    margin: 0 2rem 0 0;
   }
+};
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
+<style scoped>
+/* 添加自定义样式 */
 </style>
\ No newline at end of file