ホーム エクスプローラ ヘルプ
サインイン
old_project
/
smartai2dian0
2
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

feat: 完善项目

1. 添加一些图标
2. 初步实现header的样式
zhupei@smartai.com 1 年間 前
親
91feff754f
コミット
60698e80d0
31 ファイル変更、332 行追加、100 行削除
分割表示 差分情報を表示
  1. BIN
      public/logo.png
  2. BIN
      src/assets/arrow-down.png
  3. BIN
      src/assets/header-agent-1.png
  4. BIN
      src/assets/header-huihua-1.png
  5. BIN
      src/assets/header-moxingguanli-1.png
  6. BIN
      src/assets/header-quanping-1.png
  7. BIN
      src/assets/header-quanxian-1.png
  8. BIN
      src/assets/header-search-1.png
  9. BIN
      src/assets/header-setting-1.png
  10. BIN
      src/assets/header-zhinengti-1.png
  11. BIN
      src/assets/header-zhishiku-1.png
  12. BIN
      src/assets/language-1.png
  13. BIN
      src/assets/logo.png
  14. BIN
      src/assets/theme.png
  15. BIN
      src/assets/属性=上@2x.png
  16. BIN
      src/assets/属性=标签.png
  17. BIN
      src/assets/属性=用户.png
  18. 15 0
      src/index.css
  19. 1 1
      src/index.html
  20. 2 0
      src/index.js
  21. 21 0
      src/views/Home.vue
  22. 0 24
      src/views/common/BtnLanguage.vue
  23. 46 27
      src/views/common/Header.vue
  24. 63 4
      src/views/common/NavItem.vue
  25. 78 6
      src/views/common/PermissionDropdown.vue
  26. 13 0
      src/views/common/header-btns/BtnFullScreen.vue
  27. 44 0
      src/views/common/header-btns/BtnLanguage.vue
  28. 13 0
      src/views/common/header-btns/BtnSearch.vue
  29. 13 0
      src/views/common/header-btns/BtnSettings.vue
  30. 23 5
      src/views/common/header-btns/BtnTheme.vue
  31. 0 33
      src/views/common/header-i18n.js

BIN
public/logo.png
ファイルの表示


BIN
src/assets/arrow-down.png
ファイルの表示


BIN
src/assets/header-agent-1.png
ファイルの表示


BIN
src/assets/header-huihua-1.png
ファイルの表示


BIN
src/assets/header-moxingguanli-1.png
ファイルの表示


BIN
src/assets/header-quanping-1.png
ファイルの表示


BIN
src/assets/header-quanxian-1.png
ファイルの表示


BIN
src/assets/header-search-1.png
ファイルの表示


BIN
src/assets/header-setting-1.png
ファイルの表示


BIN
src/assets/header-zhinengti-1.png
ファイルの表示


BIN
src/assets/header-zhishiku-1.png
ファイルの表示


BIN
src/assets/language-1.png
ファイルの表示


BIN
src/assets/logo.png
ファイルの表示


BIN
src/assets/theme.png
ファイルの表示


BIN
src/assets/属性=上@2x.png
ファイルの表示


BIN
src/assets/属性=标签.png
ファイルの表示


BIN
src/assets/属性=用户.png
ファイルの表示


+ 15 - 0
src/index.css
ファイルの表示 

@@ -0,0 +1,15 @@
 
+body {
 
+  font-size: 14px;
 
+  font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans',
 
+    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
+}
 
+
 
+body {
 
+  color: var(--color-text-2);
 
+  /* font-size: 14px; */
 
+  background-color: var(--color-bg-1);
 
+}
 
+
 
+a {
 
+  text-decoration: none;
 
+}

+ 1 - 1
src/index.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>大模型2.0</title>
 
     <script type="module" src="/config.js"></script>

+ 2 - 0
src/index.js
ファイルの表示 

@@ -7,6 +7,8 @@ import { createApp } from 'vue';
 
 import ArcoVue from '@arco-design/web-vue';
 
 import '@arco-design/web-vue/dist/arco.css';
 
 
+import './index.css';
 
+
 
 /**
 
  * 无界 微前端
 
  * @see https://wujie-micro.github.io/doc/pack/#%E5%BC%95%E5%85%A5

+ 21 - 0
src/views/Home.vue
ファイルの表示 

@@ -6,6 +6,27 @@
 
   <ApiGetExample2 />
 
 
   <ApiGetExample3 />
 
+
 
+  <div>
 
+    <ul>
 
+      <li><router-link class="arco-link" to="/">首页</router-link></li>
 
+      <li><router-link class="arco-link" to="/login">登录</router-link></li>
 
+      <li><router-link class="arco-link" to="/reg">注册</router-link></li>
 
+      <li><router-link class="arco-link" to="/conversation">会话</router-link></li>
 
+      <li><router-link class="arco-link" to="/knowledge">知识库</router-link></li>
 
+      <li><router-link class="arco-link" to="/model">模型管理</router-link></li>
 
+      <li><router-link class="arco-link" to="/agent">Agent</router-link></li>
 
+      <li><router-link class="arco-link" to="/intelligent">智能体管理</router-link></li>
 
+      <li><router-link class="arco-link" to="/permission">权限</router-link></li>
 
+      <li><router-link class="arco-link" to="/permission/org">机构</router-link></li>
 
+      <li><router-link class="arco-link" to="/permission/account">账号</router-link></li>
 
+      <li><router-link class="arco-link" to="/permission/role">角色</router-link></li>
 
+      <li><router-link class="arco-link" to="/permission/resource">资源</router-link></li>
 
+      <li><router-link class="arco-link" to="/profile">个人中心</router-link></li>
 
+      <li><router-link class="arco-link" to="/setting">设置</router-link></li>
 
+      <li><router-link class="arco-link" to="/about">关于</router-link></li>
 
+    </ul>
 
+  </div>
 
 </template>
 
 
 <script setup>

+ 0 - 24
src/views/common/BtnLanguage.vue
ファイルの表示 

@@ -1,24 +0,0 @@
 
-<template>
 
-  <a-dropdown trigger="hover" @select="handleSelect">
 
-    <a-button>语言</a-button>
 
-
 
-    <template #content>
 
-      <a-doption value="zh">中文</a-doption>
 
-      <a-doption value="en">English</a-doption>
 
-    </template>
 
-  </a-dropdown>
 
-</template>
 
-
 
-<script setup>
 
-import { setI18nLanguage } from '../../i18n';
 
-
 
-const props = defineProps({
 
-  label: String
 
-});
 
-
 
-const handleSelect = (value) => {
 
-  setI18nLanguage(value);
 
-};
 
-</script>
 
-
 
-<style lang="css" scoped></style>

+ 46 - 27
src/views/common/Header.vue
ファイルの表示 

@@ -1,41 +1,33 @@
 
 <template>
 
   <div class="header">
 
-    <div class="header-left">logo</div>
 
+    <div class="header-left">
 
+      <img class="header-logo-img" src="../../assets/logo.png" />
 
+
 
+      <span>SmartAI大模型平台</span>
 
+    </div>
 
 
     <div class="header-center">
 
       <a-space>
 
-        <NavItem :label="$t('header.conversation')" to="/conversation" />
 
-        <NavItem :label="$t('header.knowledge')" to="/knowledge" />
 
-        <NavItem :label="$t('header.model')" to="/model" />
 
-        <NavItem :label="$t('header.agent')" to="/agent" />
 
-        <NavItem :label="$t('header.intelligent')" to="/intelligent" />
 
+        <NavItem :label="$t('header.conversation')" to="/conversation" icon_name="header-huihua" />
 
+        <NavItem :label="$t('header.knowledge')" to="/knowledge" icon_name="header-zhishiku" />
 
+        <NavItem :label="$t('header.model')" to="/model" icon_name="header-moxingguanli" />
 
+        <NavItem :label="$t('header.agent')" to="/agent" icon_name="header-agent" />
 
+        <NavItem :label="$t('header.intelligent')" to="/intelligent" icon_name="header-zhinengti" />
 
         <PermissionDropdown :label="$t('header.permission')" />
 
       </a-space>
 
     </div>
 
 
     <div class="header-right">
 
       <a-space>
 
-        <div class="header-right-item">
 
-          <span>{{ $t('search') }}</span>
 
-        </div>
 
-
 
-        <!-- <div class="header-right-item" @click="handleLangaugeChange('zh')">
 
-          <span>{{ $t('language') }}</span>
 
-        </div> -->
 
+        <BtnSearch class="header-right-item" />
 
 
-        <BtnLanguage />
 
+        <BtnLanguage class="header-right-item" />
 
 
-        <!-- <div class="header-right-item" @click="handleThemeChange('dark')">
 
-          <span>{{ $t('theme') }}</span>
 
-        </div> -->
 
+        <BtnTheme class="header-right-item" />
 
 
-        <BtnTheme />
 
+        <BtnFullScreen class="header-right-item" @click="handleFullScreen" />
 
 
-        <div class="header-right-item" @click="handleFullScreen"><span>全屏</span></div>
 
-
 
-        <div class="header-right-item" @click="handleNameChange">
 
-          <span>{{ $t('setting') }}</span>
 
-        </div>
 
+        <BtnSettings class="header-right-item" @click="handleNameChange" />
 
 
         <div class="header-right-item">
 
           <span>{{ currentUser.name }}</span>
 
@@ -56,8 +48,11 @@ import NavItem from './NavItem.vue';
 
 
 import PermissionDropdown from './PermissionDropdown.vue';
 
 
-import BtnLanguage from './BtnLanguage.vue';
 
-import BtnTheme from './BtnTheme.vue';
 
+import BtnSearch from './header-btns/BtnSearch.vue';
 
+import BtnLanguage from './header-btns/BtnLanguage.vue';
 
+import BtnTheme from './header-btns/BtnTheme.vue';
 
+import BtnFullScreen from './header-btns/BtnFullScreen.vue';
 
+import BtnSettings from './header-btns/BtnSettings.vue';
 
 
 const currentUser = useCurrentUserStore();
 
 
@@ -108,13 +103,26 @@ const handleNameChange = () => {
 
 }
 
 
 .header-left {
 
-  width: 200px;
 
+  width: 240px;
 
   flex-shrink: 0;
 
-  background-color: var(--test-bg-color1);
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  color: var(--color-text-1);
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+}
 
+
 
+.header-logo-img {
 
+  width: 46px;
 
 }
 
 
 .header-center {
 
   flex-grow: 1;
 
+
 
+  padding-left: 15px;
 
+  padding-right: 15px;
 
 }
 
 
 .header-right {
 
@@ -123,5 +131,16 @@ const handleNameChange = () => {
 
 }
 
 
 .header-right-item {
 
+  color: var(--color-text-2);
 
+  width: 30px;
 
+  height: 30px;
 
+  border-radius: 20px;
 
+  border: solid 1px #e5e6eb;
 
+
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  cursor: pointer;
 
 }
 
 </style>

+ 63 - 4
src/views/common/NavItem.vue
ファイルの表示 

@@ -1,16 +1,75 @@
 
 <template>
 
   <router-link :to="to">
 
-    <a-button>
 
+    <div class="nav-item" :class="{ 'is-active': is_active }">
 
+      <span class="nav-item-icon"><img :src="img_src" /></span>
 
       <span>{{ label }}</span>
 
-    </a-button>
 
+    </div>
 
   </router-link>
 
 </template>
 
 
 <script setup>
 
+import { ref, computed } from 'vue';
 
+import { useRoute } from 'vue-router';
 
+
 
 const props = defineProps({
 
   label: String,
 
-  to: String
 
+  to: String,
 
+  icon_name: String
 
+});
 
+
 
+const is_active = computed(() => {
 
+  const route = useRoute();
 
+
 
+  const cur_path = route.path;
 
+
 
+  return cur_path === props.to;
 
+});
 
+
 
+const img_src = computed(() => {
 
+  if (is_active.value) {
 
+    // TODO: 如果是激活状态，应该改为 2
 
+    // 资源目录应该添加名为 2 的图标
 
+    return `../../assets/${props.icon_name}-1.png`;
 
+  } else {
 
+    return `../../assets/${props.icon_name}-1.png`;
 
+  }
 
 });
 
 </script>
 
 
-<style lang="css" scoped></style>
 
+<style lang="css" scoped>
 
+.nav-item {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  height: 40px;
 
+  border-radius: 20px;
 
+
 
+  padding-left: 15px;
 
+  padding-right: 15px;
 
+
 
+  margin-left: 5px;
 
+  margin-right: 5px;
 
+
 
+  color: var(--color-text-1);
 
+}
 
+.nav-item:hover {
 
+  background-color: var(--color-fill-4);
 
+  color: #fff;
 
+}
 
+.nav-item.is-active {
 
+  background-color: rgb(var(--primary-6));
 
+  color: #fff;
 
+}
 
+
 
+.nav-item-icon {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  margin-right: 5px;
 
+}
 
+.nav-item-icon img {
 
+  width: 18px;
 
+}
 
+</style>

+ 78 - 6
src/views/common/PermissionDropdown.vue
ファイルの表示 

@@ -1,22 +1,94 @@
 
 <template>
 
   <a-space size="large">
 
     <a-dropdown trigger="hover">
 
-      <a-button>{{ label }}</a-button>
 
+      <div class="nav-item" :class="{ 'is-active': is_active }">
 
+        <span class="nav-item-icon"><img :src="img_src" /></span>
 
+        <span>{{ label }}</span>
 
+        <span class="nav-item-icon arrow-down"><img src="../../assets/arrow-down.png" /></span>
 
+      </div>
 
 
       <template #content>
 
-        <a-doption><router-link to="/permission/role">角色</router-link></a-doption>
 
-        <a-doption><router-link to="/permission/account">账号</router-link></a-doption>
 
-        <a-doption><router-link to="/permission/org">机构</router-link></a-doption>
 
-        <a-doption><router-link to="/permission/resource">资源</router-link></a-doption>
 
+        <a-doption><router-link class="arco-link" to="/permission/role">角色</router-link></a-doption>
 
+        <a-doption><router-link class="arco-link" to="/permission/account">账号</router-link></a-doption>
 
+        <a-doption><router-link class="arco-link" to="/permission/org">机构</router-link></a-doption>
 
+        <a-doption><router-link class="arco-link" to="/permission/resource">资源</router-link></a-doption>
 
       </template>
 
     </a-dropdown>
 
   </a-space>
 
 </template>
 
 
 <script setup>
 
+import { ref, computed } from 'vue';
 
+import { useRoute } from 'vue-router';
 
+
 
 const props = defineProps({
 
   label: String
 
 });
 
+
 
+const is_active = computed(() => {
 
+  const route = useRoute();
 
+
 
+  const cur_path = route.path;
 
+
 
+  const active_list = ['/permission/role', '/permission/account', '/permission/org', '/permission/resource'];
 
+
 
+  return active_list.indexOf(cur_path) >= 0;
 
+});
 
+
 
+const img_src = computed(() => {
 
+  if (is_active.value) {
 
+    // TODO: 如果是激活状态，应该改为 2
 
+    // 资源目录应该添加名为 2 的图标
 
+    return `../../assets/header-quanxian-1.png`;
 
+  } else {
 
+    return `../../assets/header-quanxian-1.png`;
 
+  }
 
+});
 
 </script>
 
 
-<style lang="css" scoped></style>
 
+<style lang="css" scoped>
 
+.nav-item {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  height: 40px;
 
+  border-radius: 20px;
 
+
 
+  padding-left: 15px;
 
+  padding-right: 15px;
 
+
 
+  margin-left: 5px;
 
+  margin-right: 5px;
 
+
 
+  color: var(--color-text-1);
 
+
 
+  cursor: pointer;
 
+}
 
+.nav-item:hover {
 
+  background-color: var(--color-fill-4);
 
+  color: #fff;
 
+}
 
+.nav-item.is-active {
 
+  background-color: rgb(var(--primary-6));
 
+  color: #fff;
 
+}
 
+
 
+.nav-item-icon {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  margin-right: 5px;
 
+}
 
+.nav-item-icon img {
 
+  width: 18px;
 
+}
 
+
 
+.nav-item-icon.arrow-down {
 
+  margin-left: 2px;
 
+}
 
+.nav-item-icon.arrow-down img {
 
+  width: 14px;
 
+}
 
+</style>

+ 13 - 0
src/views/common/header-btns/BtnFullScreen.vue
ファイルの表示 

@@ -0,0 +1,13 @@
 
+<template>
 
+  <div>
 
+    <img class="icon-fullscreen-img" src="../../../assets/header-quanping-1.png" />
 
+  </div>
 
+</template>
 
+
 
+<script setup></script>
 
+
 
+<style lang="css" scoped>
 
+.icon-fullscreen-img {
 
+  width: 16px;
 
+}
 
+</style>

+ 44 - 0
src/views/common/header-btns/BtnLanguage.vue
ファイルの表示 

@@ -0,0 +1,44 @@
 
+<template>
 
+  <a-dropdown trigger="hover" @select="handleSelect">
 
+    <div class="header-right-language-item">
 
+      <img class="icon-language-img" src="../../../assets/language-1.png" />
 
+    </div>
 
+
 
+    <template #content>
 
+      <a-doption value="zh">中文</a-doption>
 
+      <a-doption value="en">English</a-doption>
 
+    </template>
 
+  </a-dropdown>
 
+</template>
 
+
 
+<script setup>
 
+import { setI18nLanguage } from '../../../i18n';
 
+
 
+const props = defineProps({
 
+  label: String
 
+});
 
+
 
+const handleSelect = (value) => {
 
+  setI18nLanguage(value);
 
+};
 
+</script>
 
+
 
+<style lang="css" scoped>
 
+.header-right-language-item {
 
+  color: var(--color-text-2);
 
+  width: 30px;
 
+  height: 30px;
 
+  border-radius: 20px;
 
+  border: solid 1px #e5e6eb;
 
+
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  cursor: pointer;
 
+}
 
+
 
+.icon-language-img {
 
+  width: 16px;
 
+}
 
+</style>

+ 13 - 0
src/views/common/header-btns/BtnSearch.vue
ファイルの表示 

@@ -0,0 +1,13 @@
 
+<template>
 
+  <div>
 
+    <img class="icon-search-img" src="../../../assets/header-search-1.png" />
 
+  </div>
 
+</template>
 
+
 
+<script setup></script>
 
+
 
+<style lang="css" scoped>
 
+.icon-search-img {
 
+  width: 16px;
 
+}
 
+</style>

+ 13 - 0
src/views/common/header-btns/BtnSettings.vue
ファイルの表示 

@@ -0,0 +1,13 @@
 
+<template>
 
+  <div>
 
+    <img class="icon-fullscreen-img" src="../../../assets/header-setting-1.png" />
 
+  </div>
 
+</template>
 
+
 
+<script setup></script>
 
+
 
+<style lang="css" scoped>
 
+.icon-fullscreen-img {
 
+  width: 16px;
 
+}
 
+</style>

+ 23 - 5
src/views/common/BtnTheme.vue → src/views/common/header-btns/BtnTheme.vue
ファイルの表示 

@@ -1,6 +1,8 @@
 
 <template>
 
   <a-dropdown trigger="hover" @select="handleSelect">
 
-    <a-button>主题</a-button>
 
+    <div class="header-right-theme-item">
 
+      <img class="icon-theme-img" src="../../../assets/theme.png" />
 
+    </div>
 
 
     <template #content>
 
       <a-doption value="light">浅色主题</a-doption>
 
@@ -10,9 +12,7 @@
 
 </template>
 
 
 <script setup>
 
-import { setI18nLanguage } from '../../i18n';
 
-
 
-import { getCurrentTheme, setThemeDark, setThemeLight } from '../../base/theme';
 
+import { setThemeDark, setThemeLight } from '../../../base/theme';
 
 
 const props = defineProps({
 
   label: String
 
@@ -37,4 +37,22 @@ const handleSelect = (value) => {
 
 };
 
 </script>
 
 
-<style lang="css" scoped></style>
 
+<style lang="css" scoped>
 
+.header-right-theme-item {
 
+  color: var(--color-text-2);
 
+  width: 30px;
 
+  height: 30px;
 
+  border-radius: 20px;
 
+  border: solid 1px #e5e6eb;
 
+
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+
 
+  cursor: pointer;
 
+}
 
+
 
+.icon-theme-img {
 
+  width: 16px;
 
+}
 
+</style>

+ 0 - 33
src/views/common/header-i18n.js
ファイルの表示 

@@ -1,33 +0,0 @@
 
-/**
 
- * 定义中文
 
- */
 
-export const header_zh = {
 
-  conversation: '会话',
 
-  knowledge: '知识库管理',
 
-  model: '模型管理',
 
-  agent: 'Agent',
 
-  intelligent: '智能体',
 
-  permission: '权限管理',
 
-
 
-  search: '搜索',
 
-  language: '语言',
 
-  theme: '主题',
 
-  setting: '设置'
 
-};
 
-
 
-/**
 
- * 定义英文
 
- */
 
-export const header_en = {
 
-  conversation: 'Conversation',
 
-  knowledge: 'Knowledge Base Management',
 
-  model: 'Model Management',
 
-  agent: 'Agent',
 
-  intelligent: 'Intelligent',
 
-  permission: 'Permission',
 
-
 
-  search: 'Search',
 
-  language: 'Language',
 
-  theme: 'Theme',
 
-  setting: 'Settings'
 
-};