改点样式

2025-11-18 14:13:43 +08:00 · 2023-11-16 05:02:34 +08:00
parent 05ee4d5977
commit 5e503d671e
11 changed files with 150 additions and 42 deletions
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -466,7 +466,7 @@ const ChannelsTable = () => {
                            manageChannel(channel.id, 'delete', idx);
                          }}
                        >
-                          删除渠道 {channel.name}
+                          确认删除 {channel.name}
                        </Button>
                      </Popup>

--- a/web/src/components/Header.js
+++ b/web/src/components/Header.js
@@ -6,6 +6,8 @@ import { Button, Container, Dropdown, Icon, Menu, Segment } from 'semantic-ui-re
 import { API, getLogo, getSystemName, isAdmin, isMobile, showSuccess } from '../helpers';
 import '../index.css';

+
+
 // Header Buttons
 let headerButtons = [
  {
@@ -83,6 +85,8 @@ const Header = () => {
  const [showSidebar, setShowSidebar] = useState(false);
  const systemName = getSystemName();
  const logo = getLogo();
+  const [activeItem, setActiveItem] = useState(null);
+

  async function logout() {
    setShowSidebar(false);
@@ -100,6 +104,7 @@ const Header = () => {
  const renderButtons = (isMobile) => {
    return headerButtons.map((button) => {
      if (button.admin && !isAdmin()) return <></>;
+      const isActive = activeItem === button.name;
      if (isMobile) {
        return (
          <Menu.Item
@@ -113,14 +118,22 @@ const Header = () => {
        );
      }
      return (
-        <Menu.Item key={button.name} as={Link} to={button.to}>
-          <Icon name={button.icon} />
-          {button.name}
+        <Menu.Item
+          key={button.name}
+          as={Link}
+          to={button.to}
+          onClick={() => setActiveItem(button.name)}
+        >
+          <div className={isActive ? 'active-menu-item' : ''}>
+            {button.icon && <Icon name={button.icon} />}
+            {button.name}
+          </div>
        </Menu.Item>
      );
    });
  };

+
  if (isMobile()) {
    return (
      <>
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -158,7 +158,12 @@ const LogsTable = () => {
  const getLogStat = async () => {
    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
    let localEndTimestamp = Date.parse(end_timestamp) / 1000;
-    let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`);
+    let url = `/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`;
+    let res = await API.get(url);
+    if (!res || !res.data) {
+      showError('No response or response data');
+      return;
+    }
    const { success, message, data } = res.data;
    if (success) {
      setStat(data);
@@ -185,6 +190,10 @@ const LogsTable = () => {
      url = `/api/log/self/?p=${startIdx}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
    }
    const res = await API.get(url);
+    if (!res || !res.data) {
+      showError('No response or response data');
+      return;
+    }
    const { success, message, data } = res.data;
    if (success) {
      if (startIdx === 0) {
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -365,7 +365,8 @@ const TokensTable = () => {
                            manageToken(token.id, 'delete', idx);
                          }}
                          style={{ backgroundColor: 'var(--czl-error-color)', borderColor: 'var(--czl-error-color)' }}
-                        />
+                        >
+                          确认删除key: {token.name}</Button>
                      </Popup>
                      <Button
                        size={'small'}
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -319,7 +319,9 @@ const UsersTable = () => {
                          onClick={() => {
                            manageUser(user.username, 'delete', idx);
                          }}
-                        />
+                        >
+                          确认删除{user.username}
+                          </Button>
                      </Popup>
                      <Button
                        size={'small'}
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -188,7 +188,7 @@ body::-webkit-scrollbar {
 }

 code {
-    font-family: "CZL",source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    font-family: "CZL", source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

 .main-content {
@@ -199,24 +199,43 @@ code {
    font-size: 1em !important;
 }

-.custom-footer {
+/* .custom-footer {
    font-size: 1.1em;
-}
+} */
+
+
+

@media only screen and (max-width: 600px) {
    .hide-on-mobile {
        display: none !important;
    }
 }
-@media only screen and (min-width: 1600px){
-.main-content {
-    width: 1300px !important;
-}
-.ui.menu .ui.container {
-    width: 1608px !important; /* 或者你想要设置的宽度 */
-    /* padding: 0 !important; */
-  }
+
+@media only screen and (min-width: 1200px) {
+    .main-content {
+        width: 1300px !important;
+    }
+
+    .ui.menu .ui.container {
+        height: 80px;
+        font-size: 1em;
+        width: 90% !important;
+        /* 或者你想要设置的宽度 */
+        /* padding: 0 !important; */
+    }
+
+    .ui.menu .item>img:not(.ui) {
+        width: 4.5rem !important;
+    }
 }


-  
+.active-menu-item {
+    background-color: var(--czl-grayD) !important;
+    color: white !important;
+    border-radius: 16px !important;
+    padding: 10px 16px !important;
+    display: flex;
+    align-items: center;
+}
--- a/web/src/pages/Token/EditToken.js
+++ b/web/src/pages/Token/EditToken.js
@@ -10,7 +10,7 @@ const EditToken = () => {
  const isEdit = tokenId !== undefined;
  const [loading, setLoading] = useState(isEdit);
  const originInputs = {
-    name: '',
+    name: '默认key',
    remain_quota: isEdit ? 0 : 100,
    expired_time: -1,
    unlimited_quota: false
@@ -86,11 +86,12 @@ const EditToken = () => {
    const { success, message } = res.data;
    if (success) {
      if (isEdit) {
-        showSuccess('Key更新成功！');
+        showSuccess('Key更新成功');
      } else {
-        showSuccess('Key创建成功，请在列表页面点击复制获取Key！');
+        showSuccess('Key创建成功');
        setInputs(originInputs);
      }
+      navigate("/token"); // 在这里添加导航到 "/token"
    } else {
      showError(message);
    }
--- a/web/src/pages/User/EditUser.js
+++ b/web/src/pages/User/EditUser.js
@@ -91,6 +91,16 @@ const EditUser = () => {
      <Segment loading={loading}>
        <Header as='h3'>更新用户信息</Header>
        <Form autoComplete='new-password'>
+        <Form.Field>
+            <Form.Input
+              label='昵称'
+              name='display_name'
+              placeholder={'请输入新的昵称'}
+              onChange={handleInputChange}
+              value={display_name}
+              autoComplete='new-password'
+            />
+          </Form.Field>
          <Form.Field>
            <Form.Input
              label='用户名'
@@ -112,16 +122,7 @@ const EditUser = () => {
              autoComplete='new-password'
            />
          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='显示名称'
-              name='display_name'
-              placeholder={'请输入新的显示名称'}
-              onChange={handleInputChange}
-              value={display_name}
-              autoComplete='new-password'
-            />
-          </Form.Field>
+          
          {
            userId && <>
              <Form.Field>
@@ -153,7 +154,7 @@ const EditUser = () => {
              </Form.Field>
            </>
          }
-          <Form.Field>
+          {/* <Form.Field>
            <Form.Input
              label='已绑定的 GitHub 账户'
              name='github_id'
@@ -162,8 +163,8 @@ const EditUser = () => {
              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
              readOnly
            />
-          </Form.Field>
-          <Form.Field>
+          </Form.Field> */}
+          {/* <Form.Field>
            <Form.Input
              label='已绑定的微信账户'
              name='wechat_id'
@@ -172,8 +173,8 @@ const EditUser = () => {
              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
              readOnly
            />
-          </Form.Field>
-          <Form.Field>
+          </Form.Field> */}
+          {/* <Form.Field>
            <Form.Input
              label='已绑定的邮箱账户'
              name='email'
@@ -182,7 +183,7 @@ const EditUser = () => {
              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
              readOnly
            />
-          </Form.Field>
+          </Form.Field> */}
          <Button onClick={handleCancel}>取消</Button>
          <Button positive onClick={submit}>提交</Button>
        </Form>